/* ═══════════════════════════════════════════════════════════════
   玄机 · 样式
   ───────────────────────────────────────────────────────────────
   设计口径（2026-09-21 重做）：

   ① **正文优先**：这门学问最特征的东西是「盘」——四柱、十二宫、九宫、卦爻的
      排布本身就是视觉。所以结构由**字级、横线、留白**承担，
      **不用统一的圆角盒子**（旧版每个块都套同一个 .card，是典型的模板感来源）。

   ② **一色一职**，不做装饰性着色：
        靛青 → 结构、导航、链接
        朱砂 → 凶、警示、批注（朱批）
        石绿 → 吉、正向
        墨   → 文字

   ③ **术语用楷**：干支、卦名、星曜、宫名一律楷体。这不是装饰——
      它们是**分类标记**（与正文分层），也是刻本批注的本色。

   ④ **动效只留一处**：流式生成的光标（它回答「正在发生什么」）。
      不做入场动画、不做卡片 hover 位移。

   ⑤ 色板刻意避开「暖米白 + 衬线 + 陶土红」那套默认（旧版正是它）。

   字体只用**本机系统字体**——这个应用是离线跑的，不能依赖任何 CDN。
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── 夜观 · 玄 ────────────────────────────────────────────────
     底不是纯黑、是**深靛**（有层次）；靠**一层微光 + 细泥金界行**撑住，
     ⚠ **不用大块平涂色面**——试过，那读起来像公文/展板，不是「古」。
     古意来自：细线、留白、字距、竖排、墨色浓淡。 */
  --xuan:      #0D1420;   /* 玄：底，深靛墨 */
  --xuan-deep: #080D16;   /* 更深：页脚 */
  --mian:      #141E2E;   /* 面 */
  --mian-2:    #1A2536;   /* 面·深一档 */

  --yue:       #E6E8E4;   /* 月白：正文（不刺眼） */
  --yue-soft:  #A8AFBA;
  /* ⚠ 最暗这一档**必须过 WCAG AA（4.5:1）**，因为全站 26 处在用它，
     而且原文照录（.sect-note，152 处）也挂在它上面。
     旧值 #6E7887 实测：对页底 4.13:1、对面 3.74:1、对面深 3.45:1 —— **哪儿都不够**，
     配上 12px 小字就是「看不清」。
     现值 #949CAA：对页底 6.67:1、最坏（面深）5.58:1，全过 AA，
     且仍明显低于 --yue-soft（最坏 6.98:1），层级没塌。
     **改这一档前请重算对比度，别凭眼睛调。** */
  --yue-faint: #949CAA;
  --jie:       rgba(201,162,39,.20);   /* 界：极低透明的泥金——若隐若现才「高级」 */
  --jie-soft:  rgba(201,162,39,.10);

  --jin:       #C9A227;   /* 泥金：星点、界行、点缀 */
  --zhu:       #C0392B;   /* 朱砂：凶、印——**只占极小面积** */
  --lv:        #6E9E7E;   /* 石绿：吉（压暗，配合暗底） */

  --font-song: "Songti SC", "SimSun", "Source Han Serif SC", "Noto Serif SC", serif;
  --font-ui:   "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
               "Source Han Sans SC", "Noto Sans SC", system-ui, sans-serif;
  --font-kai:  "KaiTi", "STKaiti", "Kaiti SC", var(--font-song);
  /* 等宽只给**卡密**用（见 .code-tbl）：那串是要念给人、抄在纸上的，
     字符对齐比字好看重要得多。 */
  --font-mono: "Cascadia Mono", "Consolas", "SFMono-Regular", "DejaVu Sans Mono",
               "Courier New", monospace;

  --zhu-soft: rgba(192,57,43,.35);

  /* 五行色：暗底上要提亮，但**仍按传统**——木青、火赤、土黄、金白、水玄。
     上一版把「水」挂在石青上，这一版给水单独一个玄蓝，否则五行里出现两个黄。 */
  --wx-mu:   #6FAE85;
  --wx-huo:  #D4675A;
  --wx-tu:   #C9A227;
  --wx-jin:  #CFCABC;
  --wx-shui: #6E9EC4;

  --radius: 3px;
  --wrap: 1180px;
  --measure: 38em;
  --bleed: calc(50% - 50vw);
}}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--xuan);
  color: var(--yue);
  /* 一层极弱的顶光：整页像被一盏灯从上方照着，不是死平的黑。 */
  background-image: radial-gradient(1200px 620px at 50% -180px, rgba(201,162,39,.07), transparent 68%);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--jin); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--jin);
  outline-offset: 2px;
  border-radius: 3px;
}

/* 术语一律楷体：干支、卦名、星曜、宫位 —— 分类标记，不是装饰 */
.kai, .gz, .zw-name, .zw-gz, .gua-box h4, .dy .gz2, .yao .mark {
  font-family: var(--font-kai);
}

/* ── 顶栏 ────────────────────────────────────────────────────── */
.topbar {
  /* 整条色面（石青/泥金）试过，读起来像公文或展板，不是「古」。
     这一版改成「深底 + 一条界行」——古意靠线，不靠面。 */
  background: var(--xuan-deep);
  border-bottom: 1px solid var(--jie);
  position: sticky; top: 0; z-index: 20;
}
/* ⚠ 这里**不能**用内容栏那个 1180——15 个模块名加上品牌放不下，会折成两行。 */
.topbar-inner {
  max-width: 1520px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 22px; height: 58px;
}
.brand {
  font-family: var(--font-song);
  font-size: 19px; font-weight: 700; letter-spacing: .2em;
  color: var(--yue); flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand small {
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: .08em; color: var(--yue-faint);
  font-weight: 400; margin-left: 9px;
}
.nav { display: flex; gap: 1px; flex: 1; flex-wrap: wrap; }
.nav a {
  padding: 6px 10px; border-radius: 3px; color: var(--yue-soft);
  font-size: 13px; white-space: nowrap; transition: background .12s, color .12s;
}
.nav a:hover { background: rgba(201,162,39,.12); color: var(--jin); text-decoration: none; }
/* 选中项：**不做底块**，只在字下压一道泥金细线——像古籍的界行。 */
.nav a.on {
  color: var(--jin); font-weight: 600;
  box-shadow: inset 0 -1px 0 var(--jin);
}
/* 顶栏右侧的「当前用户 · 退出」。刻意做得很轻——它不该跟十几个模块名抢地方。 */
.nav-user {
  flex-shrink: 0; display: flex; align-items: baseline; gap: 10px;
  padding-left: 14px; border-left: 1px solid var(--jie);
  font-size: 12.5px; color: var(--yue-soft);
}
.nav-user b { font-weight: 400; color: var(--yue); }
.nav-user a { color: var(--yue-faint); }
.nav-user a:hover { color: var(--zhu); text-decoration: none; }

/* ⚠ 上内边距放到 .page-head 自己的 padding 里（见下），不放在这里——
   否则顶栏的石青条与页头的石青色带之间会夹出一道绢色细缝，看着像失误。 */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px 96px; }
/* 没有 .page-head 的页面，仍要有上边距 */
.wrap > :first-child:not(.page-head) { margin-top: 34px; }

/* ── 页头 ────────────────────────────────────────────────────── */
/* 页头**不铺色**。改用两团极弱的微光（泥金 + 一点石绿）压在标题上方，
   底下一道界行收口。纵深是「光」给的，不是「面」给的——这一版的核心手法。
   --bleed = 50% − 50vw：宽屏时为负，把光推到边缘；窄屏归零、自然收住。 */
.page-head {
  position: relative;
  background: transparent; color: var(--yue);
  margin: 0 var(--bleed) 34px;
  padding: 44px calc(-1 * var(--bleed) + 24px) 24px;
  border-bottom: 1px solid var(--jie);
}
.page-head::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(560px 210px at 20% -30%, rgba(201,162,39,.16), transparent 70%),
    radial-gradient(420px 180px at 76% 6%, rgba(110,158,126,.09), transparent 74%);
}
.page-head > * { position: relative; }
.page-head h1 {
  font-family: var(--font-song);
  font-size: 30px; margin: 0 0 8px; letter-spacing: .24em; font-weight: 700;
  color: var(--yue);
}
.page-head p { margin: 0; color: var(--yue-soft); font-size: 13.5px; letter-spacing: .02em; }

/* ── 分节：**不是卡片** ──────────────────────────────────────────
   旧版每个块都是「同圆角＋同阴影」的盒子（模板感的主要来源）。
   这里改成校勘本的行格：**一条上横线 + 充裕留白**，靠字级分区。   */
.card {
  padding: 26px 0 4px;
  margin-bottom: 26px;
  border-top: 1px solid var(--jie);
}
/* 分节标题：**去掉色块**，改成题头的「朱砂竖标 + 拉开的字距」。
   朱砂是全站唯一的高饱和色，只占 2px 宽的一条——面积越小越贵。 */
.card > h2, .card > h3 {
  margin: 0 0 18px; font-family: var(--font-song);
  font-size: 16px; letter-spacing: .18em; font-weight: 700;
  color: var(--yue);
  padding: 1px 0 1px 13px; border-left: 2px solid var(--zhu);
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.card > h2 .sub, .card > h3 .sub {
  font-family: var(--font-ui);
  font-size: 11.5px; color: var(--yue-faint); font-weight: 400; letter-spacing: 0;
}

/* ── 首页模块陈列 ───────────────────────────────────────────────
   旧版是「14 个一模一样的细线格子」——那不是「去模板感」，
   只是把圆角盒子换成了方盒子，**格子等大本身就是展板**。
   这一版按**门类**分列，并且**大小不等**：问事单独当招牌，其余按门归拢。
   结构由「门类小标题 + 字级」承担，格线只是收口用的，不是主角。   */
.mods { margin-top: 30px; }

/* 招牌那一个：横贯整行，字更大，左侧一道泥金竖线（与分节题的朱砂线区分开） */
.mod--lead {
  display: block; padding: 26px 30px 27px;
  border: 1px solid var(--jie);
  border-left: 2px solid var(--jin);
  background:
    radial-gradient(520px 180px at 12% 0%, rgba(201,162,39,.10), transparent 72%);
}
.mod--lead h3 { font-size: 21px; letter-spacing: .14em; }
.mod--lead p  { font-size: 13.5px; color: var(--yue-soft); max-width: 66ch; }
.mod-flag {
  font-family: var(--font-ui); font-size: 11px; letter-spacing: .1em;
  color: var(--jin); font-weight: 400; vertical-align: 2px;
  margin-left: 12px; padding: 2px 8px;
  border: 1px solid rgba(201,162,39,.34); border-radius: 2px;
}

.mod-group { margin-top: 30px; }
/* 门类小标题：一个大字 + 一句注，**不做色块**，靠字级与字距立住 */
.mod-group-head {
  margin: 0 0 12px; display: flex; align-items: baseline; gap: 11px;
  font-weight: 400;
}
.mod-group-name {
  font-family: var(--font-song); font-size: 15px; font-weight: 700;
  letter-spacing: .3em; color: var(--jin);
}
.mod-group-note {
  font-family: var(--font-kai); font-size: 12.5px;
  color: var(--yue-faint); letter-spacing: .08em;
}

/* 格线**逐格画**（上 + 右），容器补一条左线：
   ⚠ 别用「容器底色 + gap 1px」那招——末行没填满时，空轨道会把底色露成一块灰。
   逐格画就没有这个问题，因为空轨道里没有元素。 */
.mod-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  border-left: 1px solid var(--jie);
}
.mod {
  display: block; padding: 18px 22px 20px; color: inherit;
  border-top: 1px solid var(--jie); border-right: 1px solid var(--jie);
  transition: background .14s;
}
.mod:hover { text-decoration: none; background: rgba(201,162,39,.06); }
.mod:hover h3 { color: var(--jin); }
.mod:hover p  { color: var(--yue-soft); }
.mod h3 {
  margin: 0 0 7px; font-family: var(--font-song);
  font-size: 15.5px; letter-spacing: .06em; font-weight: 700;
}
.mod p { margin: 0; font-size: 12.5px; color: var(--yue-soft); line-height: 1.7; }

/* ── 表单 ────────────────────────────────────────────────────── */
.form-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: 12px; color: var(--yue-faint); letter-spacing: .04em; }

input[type=text], input[type=date], input[type=number], input[type=password],
select, textarea {
  font-family: inherit; font-size: 14px; color: var(--yue);
  background: var(--mian); border: 1px solid var(--jie);
  border-radius: var(--radius); padding: 8px 11px; outline: none;
  transition: border-color .12s, box-shadow .12s; min-width: 120px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--jin);
  box-shadow: 0 0 0 3px rgba(201,162,39,.16);
}
textarea { resize: vertical; min-height: 62px; width: 100%; }

.btn {
  font-family: inherit; font-size: 14px; letter-spacing: .04em;
  background: rgba(201,162,39,.14); color: var(--jin);
  border: 1px solid var(--jin);
  border-radius: var(--radius); padding: 9px 22px; cursor: pointer;
  letter-spacing: .1em; transition: background .14s, color .14s;
}
.btn:hover { background: var(--jin); color: var(--xuan-deep); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--yue-soft); border-color: var(--jie); }
.btn.ghost:hover { background: var(--mian); color: var(--yue); border-color: var(--yue-faint); }

.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  font: inherit; font-size: 13px; padding: 6px 14px; cursor: pointer;
  background: var(--mian); border: 1px solid var(--jie);
  border-radius: 999px; color: var(--yue-soft); transition: .12s;
}
.chip:hover { border-color: var(--jin); color: var(--yue); }
.chip.on { background: rgba(201,162,39,.16); border-color: var(--jin); color: var(--jin); }

/* ── 紫微盘 ──────────────────────────────────────────────────── */
.zw-wrap {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--jie); border-radius: var(--radius);
  overflow: hidden; background: var(--mian);
}
.zw-cell {
  border-right: 1px solid var(--jie-soft); border-bottom: 1px solid var(--jie-soft);
  padding: 9px 10px; min-height: 140px; font-size: 12.5px; line-height: 1.6;
  display: flex; flex-direction: column; gap: 3px;
}
.zw-cell.soul { background: rgba(192,57,43,.10); box-shadow: inset 0 0 0 1px var(--zhu-soft); }
.zw-cell.body { background: rgba(110,158,126,.08); }
.zw-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; color: var(--yue-faint); margin-bottom: 2px;
}
.zw-gz { letter-spacing: .1em; font-weight: 700; color: var(--yue-soft); font-size: 12.5px; }
.zw-name { font-size: 13.5px; font-weight: 700; letter-spacing: .08em; }
.zw-name .body-tag {
  font-family: var(--font-ui);
  font-size: 10px; color: var(--lv); border: 1px solid var(--lv);
  border-radius: 3px; padding: 0 3px; margin-left: 4px; font-weight: 400;
}
.stars { display: flex; flex-wrap: wrap; gap: 4px; }
.st {
  display: inline-flex; align-items: center; gap: 1px;
  padding: 0 5px; border-radius: 3px; font-size: 12px;
  font-family: var(--font-kai);
  background: var(--mian-2); border: 1px solid var(--jie-soft);
}
.st.major { background: rgba(201,162,39,.10); border-color: var(--jie); font-weight: 600; }
.st b { font-family: var(--font-ui); font-weight: 400; font-size: 10px; color: var(--yue-faint); }
.st .mut { font-weight: 700; }
.st .mut.lu   { color: var(--lv); }
.st .mut.quan { color: var(--zhu); }
.st .mut.ke   { color: var(--jin); }
.st .mut.ji   { color: #B79BD6; }
.misc { font-size: 11px; color: var(--yue-faint); }
.zw-center {
  grid-column: 2 / 4; grid-row: 2 / 4;
  border-right: 1px solid var(--jie-soft); border-bottom: 1px solid var(--jie-soft);
  padding: 18px; display: flex; flex-direction: column; justify-content: center;
  gap: 7px; background: var(--mian-2);
}
.zw-center h3 { margin: 0; font-family: var(--font-song); font-size: 17px; letter-spacing: .1em; }
.zw-center .meta { font-size: 12.5px; color: var(--yue-soft); line-height: 1.9; }
.zw-center .meta b { font-weight: 600; color: var(--yue); }

/* ── 八字 ────────────────────────────────────────────────────── */
.bz-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bz-table th, .bz-table td {
  border: 1px solid var(--jie-soft); padding: 9px 10px; text-align: center; vertical-align: top;
}
.bz-table tbody tr:nth-child(even) td { background: rgba(201,162,39,.035); }
.bz-table th {
  background: var(--jin); font-weight: 600; font-size: 12.5px;
  color: var(--yue); letter-spacing: .06em;
}
.bz-table td.lead {
  background: var(--mian-2); font-size: 12.5px; color: var(--yue-soft);
  width: 88px; text-align: left;
}
.gz { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.3; margin: 0 5px; }
.gz .g, .gz .z { font-size: 22px; font-weight: 700; }
/* 五行五色：木青 火赤 土黄 金白（此处取可辨的灰金） 水黑（取靛） */
.el-木 { color: var(--wx-mu); } .el-火 { color: var(--wx-huo); }
.el-土 { color: var(--wx-tu); } .el-金 { color: var(--wx-jin); } .el-水 { color: var(--wx-shui); }
.ss { font-size: 11.5px; color: var(--yue-faint); }

.wx-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.wx-item {
  display: flex; align-items: center; gap: 6px; font-size: 13px;
  background: var(--mian); border: 1px solid var(--jie-soft);
  border-radius: var(--radius); padding: 5px 11px;
}
.wx-dot { width: 9px; height: 9px; border-radius: 50%; }
.dot-木 { background: var(--wx-mu); } .dot-火 { background: var(--wx-huo); }
.dot-土 { background: var(--wx-tu); } .dot-金 { background: var(--wx-jin); }
.dot-水 { background: var(--jin); }

.dy-list { display: flex; gap: 8px; flex-wrap: wrap; }
.dy {
  border: 1px solid var(--jie-soft); border-radius: var(--radius);
  padding: 8px 13px; text-align: center; background: var(--mian); min-width: 76px;
}
.dy .age { font-size: 11px; color: var(--yue-faint); }
.dy .gz2 { font-size: 17px; font-weight: 700; letter-spacing: .06em; }
.dy .s2 { font-size: 11px; color: var(--yue-soft); }

/* ── 黄历 ────────────────────────────────────────────────────── */
.yj { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.yj-box { border: 1px solid var(--jie-soft); border-radius: var(--radius); padding: 14px 16px; }
.yj-box.yi { background: rgba(110,158,126,.10); }
.yj-box.ji { background: rgba(192,57,43,.10); }
.yj-box h4 { margin: 0 0 10px; font-family: var(--font-song); font-size: 14.5px; letter-spacing: .14em; }
.yj-box.yi h4 { color: var(--lv); }
.yj-box.ji h4 { color: var(--zhu); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 12.5px; padding: 2px 9px; border-radius: 3px;
  background: rgba(20,30,46,.94); border: 1px solid var(--jie);
}

.hour-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 9px; }
.hour {
  border: 1px solid var(--jie-soft); border-radius: var(--radius);
  padding: 9px 11px; font-size: 12.5px; background: var(--mian);
}
.hour.good { border-left: 3px solid var(--lv); }
.hour.bad  { border-left: 3px solid var(--zhu-soft); }
.hour .hh { display: flex; justify-content: space-between; align-items: baseline; }
.hour .hh b { font-family: var(--font-kai); font-size: 14.5px; letter-spacing: .06em; }
.hour .hh span { font-size: 11px; color: var(--yue-faint); }
.hour .ys { color: var(--yue-soft); margin-top: 3px; font-size: 11.5px; }

/* ── 奇门 ────────────────────────────────────────────────────── */
.qm-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--jie); border-radius: var(--radius); overflow: hidden;
}
.qm-cell {
  border-right: 1px solid var(--jie-soft); border-bottom: 1px solid var(--jie-soft);
  /* ⚠ 内边距要**按抬升量留**：透视下抬起来的盘是往外长的（1100px 透视、
     悬停抬 38px 时单边长约 6px），原先 12px 那点余量悬停时就顶到宫界线上了。
     16px 之后静置余 ~12px、悬停余 ~10px，都还留在宫中。 */
  padding: 12px 16px 14px; min-height: 120px;
  display: flex; flex-direction: column; gap: 6px;
}
.qm-cell.center { background: var(--mian-2); }
.qm-cell .gong { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--yue-faint); }
.qm-cell .gong b { font-family: var(--font-kai); font-size: 14px; color: var(--yue-soft); letter-spacing: .08em; }
.qm-row { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.qm-row .k { font-size: 10.5px; color: var(--yue-faint); width: 30px; flex-shrink: 0; }
.qm-men { font-family: var(--font-kai); font-weight: 700; }
.qm-men.吉 { color: var(--lv); } .qm-men.凶 { color: var(--zhu); }
.qm-men.平 { color: var(--yue-soft); }

/* ── 奇门：天盘 / 地盘**本来就是上下叠着的两块盘** ──────────────────
   每宫那两行原先只是两条文字（「天盘 戊」「地盘 丙」），可奇门盘的构造
   正是**天盘转动、压在地盘之上**——这是全站唯一一处
   「3D 不是为了好看，是把本来就叠着的东西显示出来」的地方。
   做法：两块共用一张台面，天盘抬起来、往地盘上落影。
   ⚠ 透视要挂在**宫格自己**身上，不能借网格那层：透视原点是透视元素的中心，
     挂在网格上时，左列的盘会**朝左斜着飞出去**（离内边距之外、还把「天盘」两字切掉）。
     挂在宫格上，盘子就是从本宫中心**垂直**抬起来的。
   ⚠ 抬升量要跟**宫格 padding** 对得上：透视下抬起来会往外放大，
     放大量超过 padding 就会压到邻宫去。这里 padding 12px，
     放大 ~4%（1100px 透视 + 悬停 38px 抬升）＝单边 ~6px，留得住。 */
.qm-cell { perspective: 1100px; }
.qm-plates { position: relative; transform-style: preserve-3d; margin-top: 2px; }

/* 地盘：贴着台面，不上色——像刻在案上的字 */
.qm-di { padding: 2px 10px 2px 0; }

/* 天盘：抬起来的一块**有厚度的牌子**
   ⚠ 厚度靠「下缘一道 3px 的侧面」画出来，不能只靠 translateZ——
     正射（不倾斜）时你**看不见牌的侧面**，纯 translateZ 只会等比放大，
     静置看着还是「一行字加个框」。所以侧面必须自己画。
     光从左上来：上缘受光（inset 高光）、下缘背光（内暗），
     外面再补 3px + 5px 两道实边＝厚度，最后才是落影。 */
.qm-tian {
  padding: 4px 10px; margin: 3px 0 7px; border-radius: 3px;
  transform: translateZ(22px);
  background: linear-gradient(180deg, rgba(201,162,39,.20), rgba(201,162,39,.07));
  border: 1px solid rgba(201,162,39,.34);
  box-shadow:
    inset 0 1px 0 rgba(240,220,150,.26),      /* 上缘受光 */
    inset 0 -3px 0 rgba(86,66,20,.55),        /* 下缘收暗 */
    0 3px 0 rgba(108,83,26,.78),              /* ★ 侧面：这 3px 就是看得见的厚度 */
    0 5px 0 rgba(48,37,11,.55),               /* 侧面再收一档 */
    0 14px 22px -12px rgba(0,0,0,.85);        /* 落影 */
  transition: transform .34s cubic-bezier(.2,.75,.25,1), box-shadow .34s;
}
.qm-tian, .qm-tian .k { font-family: var(--font-song); }
.qm-tian .k { color: rgba(201,162,39,.82); }
/* 悬停时**天盘从地盘上抬起来**——这一下不是花招，抬的正是奇门盘里那块会转的天盘。
   ⚠ 抬升量别再加：1100px 透视下 translateZ(38) 约放大 4%，
     宫格内边距 16px 时单边余 ~10px，再加就压线了。 */
.qm-cell:hover .qm-tian {
  transform: translateZ(38px);
  box-shadow:
    inset 0 1px 0 rgba(240,220,150,.34),
    inset 0 -3px 0 rgba(86,66,20,.55),
    0 3px 0 rgba(108,83,26,.78),
    0 5px 0 rgba(48,37,11,.55),
    0 24px 34px -14px rgba(0,0,0,.95);
}

/* ── 卦象 ────────────────────────────────────────────────────── */
.gua-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.gua-box { border: 1px solid var(--jie-soft); border-radius: var(--radius); padding: 14px 16px; }
.gua-box h4 { margin: 0 0 4px; font-size: 17px; letter-spacing: .08em; }
.gua-box .sub2 { font-size: 11.5px; color: var(--yue-faint); margin-bottom: 10px; }
.gua-box .text { font-size: 12.5px; color: var(--yue-soft); line-height: 1.8; }
.yao-list { display: flex; flex-direction: column; gap: 3px; }
.yao {
  display: grid; grid-template-columns: 44px 56px 1fr; gap: 8px; align-items: center;
  font-size: 12.5px; padding: 3px 6px; border-radius: 3px;
}
.yao.moving { background: rgba(201,162,39,.10); }
/* 爻线用 CSS 画，比 ━ ━ 之类的方框字符清晰得多 */
.yao .sym { display: flex; align-items: center; gap: 4px; width: 56px; }
.yao .sym i { height: 5px; border-radius: 1px; background: var(--yue); flex: 1; }
.yao .sym i.gap { flex: 0 0 9px; background: transparent; }
.yao.moving .sym i { background: var(--zhu); }
.yao .mark { font-size: 11.5px; color: var(--yue-faint); }
.yao .tags2 { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.badge {
  font-size: 10.5px; padding: 0 5px; border-radius: 3px;
  border: 1px solid var(--jie); color: var(--yue-soft); background: var(--mian);
}
.badge.shi  { background: rgba(192,57,43,.18);  border-color: var(--zhu);   color: #E9A79E; }
.badge.ying { background: rgba(110,158,126,.16); border-color: var(--lv);    color: #9FD0AE; }
.badge.dong { background: rgba(201,162,39,.16);  border-color: var(--jin);   color: var(--jin); }
.badge.kong { background: rgba(109,91,134,.22);  border-color: #8B79A8;      color: #BCA9D6; }

/* 爻下的月建日辰行，占满整行 */
.yao-extra {
  grid-column: 1 / -1; font-size: 11.5px; color: var(--yue-soft);
  padding: 1px 0 3px 6px; line-height: 1.8;
}
.yao-extra b.good { color: var(--lv); }
.yao-extra b.bad  { color: var(--zhu); }
.yao-extra .ss { color: var(--yue-faint); }

.yuetime-bar {
  display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px;
  padding: 11px 15px; border-radius: var(--radius);
  background: var(--mian); border: 1px solid var(--jie-soft); margin-bottom: 14px;
}
.yuetime-bar b { color: var(--yue); }

/* ── 姓名 / 通用表 ────────────────────────────────────────────── */
.ge-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ge-table th, .ge-table td { border: 1px solid var(--jie-soft); padding: 9px 11px; }
.ge-table th { background: var(--jin); font-weight: 600; font-size: 12.5px; color: var(--yue); letter-spacing: .06em; }
.ge-table td.c { text-align: center; }
.luck-大吉 { color: var(--lv); font-weight: 700; }
.luck-吉   { color: var(--wx-mu); font-weight: 600; }
.luck-半吉 { color: var(--jin); font-weight: 600; }
.luck-凶   { color: var(--zhu); font-weight: 600; }

/* ── AI 输出 ─────────────────────────────────────────────────── */
.ai-out, .ask-a {
  white-space: pre-wrap; word-break: break-word;
  font-size: 14.5px; line-height: 2; max-width: var(--measure);
}
.ai-out h2, .ai-out h3, .ask-a h2, .ask-a h3 {
  font-family: var(--font-song);
  font-size: 16.5px; margin: 26px 0 10px; color: var(--jin);
  letter-spacing: .06em; font-weight: 700;
}
.ai-out h2:first-child, .ask-a h2:first-child { margin-top: 4px; }
.ai-out strong, .ask-a strong { color: var(--yue); font-weight: 700; }
.ai-out .cursor {
  display: inline-block; width: 8px; height: 15px; background: var(--jin);
  animation: blink 1.05s step-end infinite; vertical-align: -2px;
}
@keyframes blink { 50% { opacity: 0; } }

/* 多轮追问：问句成条、答段分段 */
.ai-q {
  display: flex; gap: 9px; align-items: baseline;
  margin: 0 0 14px; padding: 9px 13px;
  background: var(--mian); border: 1px solid var(--jie-soft);
  border-left: 3px solid var(--jin);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14px; white-space: normal; max-width: var(--measure);
}
.ai-who {
  flex: 0 0 auto; font-size: 11px; letter-spacing: .1em; color: var(--jin);
  border: 1px solid var(--jin); border-radius: 3px; padding: 0 4px; line-height: 1.7;
}
.ai-a { margin: 0 0 30px; }
.ai-a:last-child { margin-bottom: 0; }
.ai-tip { color: var(--yue-faint); font-size: 12px; margin: -6px 0 14px; }

/* ── 问事页 ──────────────────────────────────────────────────── */
.ask-wrap { display: flex; gap: 26px; align-items: flex-start; }
.ask-main { flex: 1; min-width: 0; }
.ask-side { flex: 0 0 272px; position: sticky; top: 86px; }

.ask-chat {
  min-height: 340px; max-height: 64vh; overflow-y: auto;
  padding: 4px 2px 14px; margin-bottom: 14px;
}
.ask-hello { color: var(--yue-faint); font-size: 13.5px; line-height: 2.1; padding: 12px 2px; }
.ask-eg {
  cursor: pointer; color: var(--yue-soft); border-left: 2px solid var(--jie);
  padding: 4px 11px; margin: 5px 0; transition: color .12s, border-color .12s, background .12s;
}
.ask-eg:hover { color: var(--jin); border-left-color: var(--jin); background: var(--mian); }

.ask-u {
  display: flex; gap: 9px; align-items: baseline;
  margin: 22px 0 14px; padding: 9px 13px;
  background: var(--mian); border: 1px solid var(--jie-soft);
  border-left: 3px solid var(--jin);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14.5px; white-space: pre-wrap; max-width: var(--measure);
}

.ask-steps {
  margin: 0 0 12px; padding-left: 4px;
  border-left: 1px solid var(--jie); font-size: 12.5px; color: var(--yue-faint);
}
.ask-step { display: flex; align-items: center; gap: 8px; padding: 2px 0 2px 11px; }
.ask-step .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--jin); flex: 0 0 auto; }

.ask-input { display: flex; gap: 10px; align-items: flex-end; }
.ask-input textarea {
  flex: 1; resize: vertical; min-height: 48px; max-height: 180px;
  font: inherit; font-size: 14px; line-height: 1.75;
  padding: 10px 12px; color: var(--yue); background: var(--mian);
  border: 1px solid var(--jie); border-radius: var(--radius); outline: none;
}
.ask-input textarea:focus { border-color: var(--jin); box-shadow: 0 0 0 3px rgba(30,58,95,.08); }
.ask-input .btn { height: 42px; padding: 0 22px; }
.ask-btns { display: flex; flex-direction: column; gap: 7px; align-items: stretch; }
.ask-btns .mini { text-align: center; }

.shelf-item { padding: 11px 0; border-bottom: 1px solid var(--jie-soft); }
.shelf-item:last-child { border-bottom: none; }
.shelf-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.shelf-top b { font-size: 13.5px; }
.shelf-top .ss { font-size: 11px; opacity: .75; }
.shelf-act { margin-top: 7px; display: flex; gap: 7px; }
.mini {
  font: inherit; font-size: 12px; cursor: pointer;
  padding: 3px 9px; color: var(--jin); background: transparent;
  border: 1px solid var(--jie); border-radius: 3px; transition: .12s;
}
.mini:hover { border-color: var(--jin); background: var(--mian); }
.mini.del { color: var(--yue-faint); }
.mini.del:hover { color: var(--zhu); border-color: var(--zhu-soft); }

/* 档案表单 */
.pf-form { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.pf-form input, .pf-form select {
  font: inherit; font-size: 12.5px; padding: 6px 9px; color: var(--yue);
  background: var(--mian); border: 1px solid var(--jie); border-radius: 3px;
  outline: none; width: 100%; min-width: 0;
}
.pf-form input:focus, .pf-form select:focus { border-color: var(--jin); }
.pf-row { display: flex; gap: 7px; }
.pf-item { padding: 9px 0; border-bottom: 1px solid var(--jie-soft); }
.pf-item:last-child { border-bottom: none; }
.pf-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pf-top b { font-size: 13.5px; }

/* ── 杂项 ────────────────────────────────────────────────────── */
.empty {
  color: var(--yue-faint); font-size: 13px; text-align: center; padding: 40px 10px;
  border: 1px dashed var(--jie); border-radius: var(--radius);
}
.loading { color: var(--yue-faint); font-size: 13px; padding: 18px 0; }
.loading::after { content: ''; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '·'; } 50% { content: '··'; } 75% { content: '···'; } }

.alert {
  padding: 11px 15px; border-radius: var(--radius); font-size: 13.5px;
  border: 1px solid; margin-bottom: 14px; max-width: var(--measure);
}
.alert.err  { background: rgba(192,57,43,.12); border-color: var(--zhu-soft); color: #E9A79E; }
.alert.ok   { background: rgba(110,158,126,.12); border-color: rgba(110,158,126,.42); color: #9FD0AE; }
.alert.info { background: rgba(110,158,196,.12); border-color: rgba(110,158,196,.40); color: #A6C6E4; }

.kv { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; }
.kv div { color: var(--yue-soft); }
.kv b { color: var(--yue); font-weight: 600; }

/* ── 卡密清单（/codes，管理员页）─────────────────────────────
   全站只有这一处用表，所以单独写一版，不塞一套通用 table 规则进去。
   一色一职沿用老口径：**未用＝石绿（还活着）**、**已用＝月白最暗档（已耗掉）**。
   ⚠ 那串码用等宽 + `user-select: all`：它是要念给人、抄在纸上的，
     字符对齐比字好看重要，点一下整串选中比拖选一遍省事。 */
.code-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.code-tbl th {
  text-align: left; font-weight: 500; font-size: 11.5px; letter-spacing: .12em;
  color: var(--yue-faint); padding: 0 12px 8px 0; border-bottom: 1px solid var(--jie);
}
.code-tbl td {
  padding: 9px 12px 9px 0; color: var(--yue-soft);
  border-bottom: 1px solid var(--jie-soft);
}
.code-tbl tr:last-child td { border-bottom: 0; }
.code-tbl .cd code {
  font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .06em;
  color: var(--yue); user-select: all; white-space: nowrap;
}
.code-tbl .st { font-size: 11.5px; letter-spacing: .1em; }
/* 三档状态＝一条「从新到耗」的梯度：**石绿（还没动）→ 泥金（已挂出去待售）→ 最暗档（已耗掉）**。
   ⚠ 别把「已上架」也弄成绿的——它跟「未用」是**两回事**，混了就会拿已经挂到小铺上的码送人。 */
.code-tbl .st.free { color: var(--lv); }
.code-tbl .st.listed { color: var(--jin); }
.code-tbl .st.used { color: var(--yue-faint); }
.code-tbl .ops { text-align: right; white-space: nowrap; }
.btn.tiny { padding: 2px 9px; font-size: 11.5px; letter-spacing: .06em; margin-left: 6px; }

/* ── 原文照录 ≠ 批注 ──────────────────────────────────────────
   这两类以前共用 .sect-note，读者分不出哪句是**书上写的**、哪句是**我们说的**。
   这在本项目是要紧的（「有据才判」），所以两种必须一眼分得开：

   ┌ 原文（.sect-note.quote）= **一页纸**：暖白纸面 + 墨字 + 宋体 + 泥金书脊
   │   ——像从刻本上剪下来贴在这儿。对比度 13.9:1。
   └ 批注/口径（.sect-note）= **朱批**：暗底 + 朱砂记号 + 楷体
       按本项目「一色一职」的老口径：**朱砂＝凶/警示/批注（朱批）**。
       ⚠ 朱砂只落在左边那条记号上，**文字不用朱砂**——
         13px 的红字在暗底又暗又累；「朱批」认出是朱批就够了。
       ⚠ 默认落在「批注」这一侧是**故意的**：漏标一处原文，它只是长得像批注；
         反过来把批注默认成纸，就是**拿我们的话冒充原书**——那个错更重。 */
.sect-note {
  font-size: 13px; color: var(--yue-soft);
  border-left: 2px solid var(--zhu);
  padding: 1px 0 1px 11px; margin-top: 12px;
  line-height: 1.9; letter-spacing: .01em;
  font-family: var(--font-kai);
}
/* 原文照录：纸。⚠ 别再往纸面加阴影/圆角——纸是贴上去的一张，不是浮起来的卡片。
   ⚠ 也**不要**用 --font-ui：刻本正文是宋体，纸上用宋正对（暗底会化的是浅色细笔画）。 */
.sect-note.quote {
  color: #201B14;                        /* 墨：不用纯黑，纯黑在暖纸上发死 */
  background: #EFE7D6;                   /* 纸：暖白，压暗一档，不刺眼 */
  border: 1px solid rgba(0,0,0,.16);
  border-left: 3px solid var(--jin);     /* 泥金书脊，与批注的朱砂线分开 */
  border-radius: 2px;
  padding: 12px 16px 13px;
  line-height: 1.95;
  font-family: var(--font-song);
}
/* 原文里的 **…** 渲染成 <b>（见 base.html 的 esc）。纸上强调就压深一档。 */
.sect-note.quote b { color: #0B0805; font-weight: 700; }
/* ⚠ 纸面里的**小标签**也要换墨色：`.ss` 那类是给暗底配的淡灰，
   搬到暖纸上就看不见了——「把原文搬进纸里」最容易漏的就是这一步。 */
.sect-note.quote .ss,
.sect-note.quote .sub2,
.sect-note.quote .k { color: #5C5340; }

/* ── 窄屏 ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ask-wrap { flex-direction: column; }
  .ask-side { flex: none; width: 100%; position: static; }
  .ask-chat { max-height: none; }
}
@media (max-width: 860px) {
  /* ⚠ 15 个模块名在窄屏会折成四行、把首屏吃光。
     改成「品牌一行 + 导航**一行可横滑**」——比汉堡菜单轻，也不藏东西。 */
  .topbar-inner {
    flex-direction: column; align-items: stretch;
    height: auto; padding: 10px 16px 0; gap: 6px;
  }
  .nav {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .zw-wrap { grid-template-columns: repeat(2, 1fr); }
  .zw-center { grid-column: 1 / 3; grid-row: auto; }
  .yj { grid-template-columns: 1fr; }
  .qm-grid { grid-template-columns: 1fr; }
  .nav { gap: 0; }
  .nav a { padding: 5px 9px; font-size: 13px; }
  .brand small { display: none; }
  .wrap { padding: 24px 16px 72px; }
  /* 首页首屏：罗盘挪到标题下面、居中，字号收一档——
     ⚠ 罗盘宽度必须跟着 --lp 走，不能只改宽高，否则字会跑出盘外（旧版就是这么坏的）。 */
  .hero {
    flex-direction: column; align-items: flex-start;
    gap: 26px; min-height: 0; padding-top: 34px; padding-bottom: 30px;
  }
  .hero h1 { font-size: 42px; letter-spacing: .26em; margin-bottom: 15px; }
  .hero-lead { font-size: 16px; }
  .luopan { --lp: 238px; margin: 0 auto; }
}

/* 尊重「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ══════════════════════════════════════════════════════════════
   3D 与动态 —— **只加三处，都跟题材有关**。
   ⚠ 不撒「每个卡片 fade-slide 入场」：那正是被点名的 AI 默认
     （见 frontend-design：入场动画与逐块 hover 位移是通用套路）。
   ══════════════════════════════════════════════════════════════ */

/* ── ① 首页的罗盘 ───────────────────────────────────────────────
   三层同心圆（静）+ 细刻度与指针（动）。盘的意象，也是全站唯一一处自主运动。
   ⚠ 字**不跟着转**：转的只是刻度层。字若跟着转，落到下半圈就头朝下，
     像一张坏掉的图；罗盘照片里盘面可以转，字也始终是顺的。
   ⚠ 罗盘必须**装得进色带**——旧版是 168px 的盒子却把字摆在 90px 半径上，
     字溢出盒子、撞在页头下界行上，看着就是「被切坏了」。这一版尺寸与半径同源。 */
.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  gap: 44px; min-height: 440px;
  padding-top: 58px; padding-bottom: 58px;
  /* ⚠ 透视必须挂在**祖先**上：挂在 .luopan 自己身上只能影响它的子元素，
     它自己的 rotateX 仍是无透视的仿射压扁（cos22°≈0.93），看着是「扁」不是「立」。
     挂这里之后 22° 才真的是俯视一张盘。 */
  perspective: 1300px;
}
.hero-copy { position: relative; z-index: 2; max-width: 620px; }
.hero h1 {
  font-size: 62px; line-height: 1.1; letter-spacing: .34em;
  margin: 0 0 20px; text-indent: .04em;
}
/* ⚠ 这两条必须带 `.hero` 前缀：`.page-head p`（类+元素）比单个类权重大，
   不前缀的话字号/颜色会被页头那条通配规则压回去。 */
.hero .hero-lead {
  margin: 0 0 14px; font-family: var(--font-kai);
  font-size: 19px; letter-spacing: .16em; color: var(--yue);
}
.hero .hero-note {
  margin: 0; padding-top: 13px; display: inline-block;
  border-top: 1px solid var(--jie);
  font-size: 13px; letter-spacing: .04em; color: var(--yue-faint);
}

/* 罗盘本体。直径收在一个变量里——半径、字号都从它算，改一处全都跟着走。
   半径排布（--lp=360，故半＝180）：
     盘边 180 · 界圈 119 · 二十四山 152 · 后天八卦 86 · 界圈 58 · 天池 26 */
.luopan {
  --lp: 360px;
  --tilt: 0deg;              /* 盘要**摆正**：正射俯视，不做倾斜 */
  position: relative; z-index: 1; flex: 0 0 auto;
  width: var(--lp); height: var(--lp); margin-right: 1%;
  transform: rotateX(var(--tilt)); transform-style: preserve-3d;
  border-radius: 50%;
  /* 盘面压暗：泥金要「金」，底下就得是深漆。太浓的暖雾会把整盘拖成橄榄色，
     金饰反而糊在里面——深底 + 细金线才是这一版要的高级感。 */
  background: radial-gradient(circle, rgba(201,162,39,.028), transparent 66%);
}
.luopan::before {            /* 底光：让盘「浮」在色带上，而不是贴上去 */
  content: ''; position: absolute; inset: -16%;
  background: radial-gradient(circle, rgba(201,162,39,.13), transparent 62%);
}
/* ⚠ 入场要自己写一份：页头那条 `.page-head > * { animation: rise }` 的末帧是
   `transform: none`，而 animation 压过普通声明——直接沿用会把 rotateX 永久抹掉。 */
@keyframes lp-in {
  from { opacity: 0; transform: rotateX(var(--tilt)) translateY(7px); }
  to   { opacity: 1; transform: rotateX(var(--tilt)); }
}
.hero .luopan { animation: lp-in .5s cubic-bezier(.2,.8,.2,1) .16s both; }

/* 盘边与两道界圈。摆正之后没有透视可以借力，立体感只能靠**光**：
   左上受光（一圈极窄的泥金高光边）、右下背光（宽而软的内影），
   盘外再落一道右下偏移的深影把它托住——这是「正射俯视」唯一的立体做法。 */
.lp-ring { position: absolute; border-radius: 50%; border: 1px solid var(--jie); }
.lp-ring--1 {
  inset: 0; border-color: rgba(201,162,39,.32);
  box-shadow:
    inset 1px 1px 0 rgba(201,162,39,.20),
    inset -12px -14px 34px -16px rgba(0,0,0,.6),
    inset 0 0 60px rgba(201,162,39,.03),
    12px 28px 74px -28px rgba(0,0,0,.85);
}
.lp-ring--2 { inset: 16.9%; border-color: rgba(201,162,39,.34); transform: translateZ(24px); }
.lp-ring--3 { inset: 33.9%; border-color: rgba(201,162,39,.26); transform: translateZ(46px); }

/* ── 两处动效：**只动「盘身」与「针」，不往盘上添东西** ──────────────
   盘的结构（哪一环是什么）是死的，会动的只有①盘身微浮 ②天池的针。
   为什么刻意不转那些环：转一个环要么让字倒过来、要么得给字加反向动画，
   而真盘上也没有哪个环在自己转——**结构不动，只有针和器物本身在动**。
   ⚠ 曾经加过一层「盘缘流光」（柔光绕边一圈），用户判「不好看」，已删。
     别再加回来：盘上凡是会动的东西，要么是真会动的（针），要么是器物本身
     （浮沉）；**在盘面上跑的装饰光，读起来就是「特效」，不是「器物」。** */

/* ① 盘身极缓地上下浮 ±2.5px：让它像一件**悬着的**器物，不是贴在页面上。
   摆正之后丢了透视那点纵深，这点位移把「立体」补回来一部分。 */
.lp-float {
  position: absolute; inset: 0;
  transform-style: preserve-3d;     /* ⚠ 少了这行，子元素的 translateZ 会被压平 */
  animation: lp-float 13s ease-in-out infinite;
}
@keyframes lp-float {
  0%, 100% { transform: translateY(-2.5px); }
  50%      { transform: translateY(2.5px); }
}

/* 天池：正中那个小圆，指针住在里面 */
.lp-chi {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--lp) * .144); height: calc(var(--lp) * .144);
  margin: calc(var(--lp) * -.072) 0 0 calc(var(--lp) * -.072);
  border: 1px solid rgba(201,162,39,.36); border-radius: 50%;
  transform: translateZ(74px);          /* 最高的一层，压在众环之上 */
  box-shadow: inset 1px 1px 0 rgba(201,162,39,.18),
              0 4px 14px -6px rgba(0,0,0,.7);
}
/* ② 天池的针：**平时极轻地晃，过一阵来一次明显的扰动、再衰减定住**。
   不整圈转——真罗盘的针是定南北的，不会自己转；「被扰动一下又稳住」才是它该有的样子。
   ⚠ 关键帧的头尾都停在 0°，循环回来才不会跳（起止不同值会看见「抽一下」）。
   ⚠ 针身给到 1.5px：1px 在普通屏幕上几乎看不见，用户上一版就说「针没了」。 */
.lp-needle {
  position: absolute; left: 50%; top: 50%;
  width: 1.5px; height: calc(var(--lp) * .108);
  margin: calc(var(--lp) * -.054) 0 0 -.75px;
  transform-origin: 50% 50%; transform: translateZ(80px);
  background: linear-gradient(to bottom,
      var(--zhu) 0 50%, rgba(201,162,39,.6) 50% 100%);
  animation: lp-swing 21s cubic-bezier(.45,.05,.55,.95) infinite;
}
/* 针座：针**不是浮在天池里的**，它压在一颗轴上——真罗盘的针就是这么架起来的。
   没有这颗轴，那根线看着像画上去的；有了它才像一件器械。
   画在 ::after 上、跟着针一起摆（圆点转不转看不出来），不必单独定位。 */
.lp-needle::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #EFE0A8, #A8842E 62%, #5C4718);
  box-shadow: 0 0 0 1px rgba(201,162,39,.45),
              0 1px 4px rgba(0,0,0,.75);
}
@keyframes lp-swing {
  /* 常态：几乎看不出在动，但有生命 */
  0%       { transform: translateZ(80px) rotate(0deg); }
  6%       { transform: translateZ(80px) rotate(.85deg); }
  12%      { transform: translateZ(80px) rotate(-.55deg); }
  18%      { transform: translateZ(80px) rotate(.3deg); }
  24%, 46% { transform: translateZ(80px) rotate(0deg); }
  /* 一次扰动：摆出去，衰减，定住 */
  51%      { transform: translateZ(80px) rotate(-12deg); }
  57%      { transform: translateZ(80px) rotate(7.5deg); }
  62%      { transform: translateZ(80px) rotate(-4.5deg); }
  66%      { transform: translateZ(80px) rotate(2.6deg); }
  70%      { transform: translateZ(80px) rotate(-1.4deg); }
  74%      { transform: translateZ(80px) rotate(.7deg); }
  77%, 100%{ transform: translateZ(80px) rotate(0deg); }
}

/* 两圈字。--i 由模板给：rotate → translate → 反 rotate，
   把字摆到圆周上，同时让字保持正立。
   半径一律写成 --lp 的**比例**，不写固定 px——
   ⚠ 固定 px 在窄屏（--lp: 238）会把外环压到内环上去；比例式则各环间距恒定。 */
.lp-shan, .lp-gua {
  position: absolute; inset: 0; margin: 0; padding: 0; list-style: none;
}
.lp-shan li, .lp-gua li {
  position: absolute; left: 50%; top: 50%; text-align: center;
}
/* 二十四山：外圈，一格 15°，共 24 格（子癸丑艮寅甲卯乙辰巽巳丙午丁未坤申庚酉辛戌乾亥壬）
   ⚠ 也**放射状**：不反向转，字头朝外——与里圈的八卦同一个规矩。
     于是底部那几个字是头朝下的，这正是真罗盘的样子（读盘要转盘，不是歪头看）。
     与八卦一致比「处处正立」更要紧：两圈一条规矩，盘才立得住。 */
.lp-shan li {
  width: calc(var(--lp) * .075); height: calc(var(--lp) * .075);
  margin: calc(var(--lp) * -.0375) 0 0 calc(var(--lp) * -.0375);
  font-family: var(--font-kai); font-size: 13.5px;
  line-height: calc(var(--lp) * .075);
  color: rgba(230,232,228,.82);
  transform: rotate(calc(var(--i) * 15deg))
             translateY(calc(var(--lp) * -.422));
}
/* 后天八卦：内圈，一格 45°。
   ⚠ 这里**故意不做反向转**：卦象要跟着方位转——初爻朝圆心、上爻朝外，
     于是最下面那条线正好与内圆的切线平行。真八卦盘是**放射状**的，
     不是一圈正立的字；早先那版把八条卦象都掰正，看着像贴图，不像盘。 */
.lp-gua li {
  width: calc(var(--lp) * .095); height: calc(var(--lp) * .13);
  margin: calc(var(--lp) * -.065) 0 0 calc(var(--lp) * -.0475);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  transform: rotate(calc(var(--i) * 45deg))
             translateY(calc(var(--lp) * -.239));
}
.lp-gua-sym { font-size: 16px; line-height: 1; color: rgba(201,162,39,.88); }
/* 卦名单独反向转回来、保持正立可读（--i 是自定义属性，会从 li 继承下来）。
   卦象放射、卦名正立——这是可读性与「像真盘」之间的取舍，本项目取后者为主。 */
.lp-gua-name {
  font-family: var(--font-kai); font-size: 12px; line-height: 1;
  color: rgba(230,232,228,.70);
  transform: rotate(calc(var(--i) * -45deg));
}

/* ── ② 盘格 hover：从盘面上「抬起一格」 ────────────────────────
   真 3D（perspective + translateZ）——不是常见的位移+阴影假装。
   用户触发，所以不违反「自主运动要克制」那条。                    */
.zw-wrap, .qm-grid, .mod-grid { perspective: 1100px; }
/* ⚠ 这几个盘原本是 overflow:hidden 圆角；抬起来会被裁掉，故放开。 */
.zw-wrap, .qm-grid { overflow: visible; border-radius: 0; }
.zw-cell, .qm-cell, .mod {
  transition: transform .34s cubic-bezier(.2,.75,.25,1), box-shadow .34s;
  will-change: transform;
}
.zw-cell:hover, .qm-cell:hover {
  transform: translateZ(30px) scale(1.015);
  box-shadow: 0 18px 34px -14px rgba(0,0,0,.55);
  position: relative; z-index: 3;
}
.mod:hover {
  transform: translateZ(22px);
  box-shadow: 0 16px 30px -16px rgba(0,0,0,.5);
  position: relative; z-index: 3;
}

/* ── ③ 石青色带载入时**刷开一次**（只此一次，不逐块入场）──────── */
@keyframes band-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.page-head { animation: band-wipe .5s cubic-bezier(.2,.8,.2,1) both; }
.page-head > * { animation: rise .5s cubic-bezier(.2,.8,.2,1) .16s both; }

/* ── 顶栏：滚动后落一道影（功能性动态——回答「我滚过了吗」）────── */
.topbar { transition: box-shadow .2s; }
body.scrolled .topbar { box-shadow: 0 4px 16px -6px rgba(0,0,0,.45); }

/* ── 「去买卡密」那枚铜钱（登录 / 注册页）────────────────────────
   为什么不是一个普通按钮：这一页来两种人——**买完码回来填**的，和**没码想买**的。
   前者进页面第一眼要找的是「邀请码 / 卡密」那个输入框，所以这个入口**不能抢注意力**；
   后者要一眼认得出。方孔圆钱本身就是「钱」的象，不必写「立即购买」四个大字。
   ⚠ 四个字按**方孔圆的读法**排：上→下→右→左（开元通宝以来的老规矩），合起来是
     「购买卡密」。这是全站唯一一处不按从左到右读的地方，所以下面那行小字把话补全，
     免得有人绕着圈读。
   ⚠ 方孔用 `--xuan-deep`（比页底再深一档）：页顶有一层泥金顶光，注册卡片正好落在
     那圈光里——用跟页底同色的方块会**比周围亮**，看着像贴了张贴纸，不像穿孔。 */
.buy-coin { margin: 20px 0 2px; text-align: center; }
.coin {
  position: relative; display: inline-block;
  /* ⚠ 尺寸是**配着方孔与四字算出来的**，不是随手调的：
     孔边到"字的内边缘"留 9px、字的外边缘到钱缘留 10px 才不挤。
     78px／24px 那一版四个字几乎贴在孔边上（实测看着发促），故放大到 94／20。 */
  width: 94px; height: 94px; border-radius: 50%;
  border: 2px solid var(--jin);
  color: var(--jin); font-family: var(--font-kai); text-decoration: none;
  background: radial-gradient(circle at 33% 27%,
              rgba(201,162,39,.20), rgba(201,162,39,.03) 66%);
  transition: border-color .15s, transform .15s;
}
.coin:hover { border-color: #E3C04A; transform: scale(1.045); }
.coin:focus-visible { outline: 2px solid var(--jin); outline-offset: 4px; }
.coin::after {                       /* 方孔 */
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border: 2px solid var(--jin); border-radius: 2px;
  background: var(--xuan-deep);
}
.coin i {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  font-style: normal; font-size: 16px; line-height: 1;
}
.coin i:nth-of-type(1) { transform: translate(-50%, -50%) translateY(-27px); }   /* 上·购 */
.coin i:nth-of-type(2) { transform: translate(-50%, -50%) translateY(27px); }    /* 下·买 */
.coin i:nth-of-type(3) { transform: translate(-50%, -50%) translateX(27px); }    /* 右·卡 */
.coin i:nth-of-type(4) { transform: translate(-50%, -50%) translateX(-27px); }   /* 左·密 */
.coin-cap { margin: 12px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--yue-soft); }

/* ── 尊重「减少动态效果」：全部停掉，并去掉会动的 3D ────────────── */
@media (prefers-reduced-motion: reduce) {
  .lp-needle, .lp-float { animation: none; }
  .page-head, .page-head > * { animation: none; }
  .zw-cell:hover, .qm-cell:hover, .mod:hover { transform: none; }
  .qm-cell:hover .qm-tian { transform: translateZ(22px); }
  .coin:hover { transform: none; }        /* 铜钱的放大也停掉，只留描边变化 */
}