/* ============================================================
   六爻研习 · 组件样式            与「潜龙八字」同一套视觉语汇
   ------------------------------------------------------------
   设计契约（与潜龙一致，勿破）：
     · 尺寸只走 css/scale.css 的 --fs-* / --sp-* / --r-* 令牌，不写自由数值；
     · 颜色只走 css/light.css | dark.css | skins/*.css 的 --* 变量；
     · 五行色不落文字（沿用 readability 原则）：五行仅用于色点，文字一律 --ink；
     · 版式归本文件，皮肤只改颜色与质感。
   骨架（照潜龙 shell.css 三套断点）：
     手机 <768   底栏 tabbar · 单列 · 页头显示品牌
     平板 768–991 左侧图标条 76px · 单列
     桌面 ≥992   左侧栏 248px ⇄ 76px 可收起 · 内容 1160px 居中
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.serif { font-family: var(--font-serif); }
a { color: inherit; }

/* ============================================================
   1 · 外壳：侧栏 + 内容
   ============================================================ */
.shell { display: flex; min-height: 100vh; }

.content {
  flex: 1 1 auto; min-width: 0;
  max-width: 1160px;
  margin-inline: auto;
  padding: var(--sp-5) var(--sp-6) var(--sp-8);
}

/* 手机档：名牌只在页头出现 */
.mobile-only { display: flex; }

/* ---------- 侧栏 ---------- */
.sidenav {
  flex: 0 0 248px; width: 248px;
  display: flex; flex-direction: column;
  gap: 2px;
  padding: var(--sp-4) var(--sp-3);
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
  position: sticky; top: 0; height: 100vh;
  transition: flex-basis .2s ease, width .2s ease;
}
.side-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 2px 4px 12px; width: 100%;
}
.sb-seal {
  width: 30px; height: 30px; flex: none;
  border-radius: 9px 6px 9px 6px;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 15px; font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.sb-name {
  font-family: var(--font-serif); font-size: 15px; font-weight: 800;
  letter-spacing: 1px; line-height: 1.15;
}
.sb-sub { font-size: 11px; color: var(--ink-3); letter-spacing: .3px; margin-top: 1px; white-space: nowrap; }
/* ★ 261031 S7：月建旁显示「当令节气」用的弱化文本（原无此类，勿与 .dim-table 混） */
.dim { color: var(--ink-3); font-weight: 400; }

.sb-toggle {
  width: 100%; height: 32px; margin: 0 0 8px; padding: 0 10px;
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink-2);
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  transition: border-color .18s, color .18s;
}
.sb-toggle:hover { border-color: var(--brand); color: var(--brand); }
.sb-toggle svg { width: 15px; height: 15px; flex: none; }

.sidenav .tab {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 38px; padding: 0 11px;
  border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
  transition: background .16s, color .16s;
}
.sidenav .tab svg { flex: none; width: 19px; height: 19px; }
.sidenav .tab:hover { background: var(--surface-2); color: var(--ink); }
.sidenav .tab.active { background: var(--brand-soft); color: var(--brand); font-weight: 800; }
.sidenav .tab.active::before {
  content: ""; position: absolute; left: -1px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0;
  background: var(--brand);
}

.side-foot {
  margin-top: auto; padding-top: var(--sp-4);
  border-top: 1px solid var(--line-thin);
}
.sf-k { font-size: 11px; color: var(--ink-3); margin-bottom: 6px; }
.skin-open-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 7px 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-2);
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  transition: border-color .18s, color .18s;
}
.skin-open-btn:hover { border-color: var(--brand); color: var(--brand); }
.sob-go { color: var(--brand); font-weight: 700; white-space: nowrap; }
.sf-note { font-size: 10.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.5; }

/* 收起态（≥768）：图标条 76px */
.shell.nav-collapsed .sidenav { flex-basis: 76px; width: 76px; padding-inline: 8px; }
.shell.nav-collapsed .side-brand > div,
.shell.nav-collapsed .sb-tg-text,
.shell.nav-collapsed .sidenav .tab span,
.shell.nav-collapsed .side-foot { display: none; }
.shell.nav-collapsed .side-brand { justify-content: center; padding-bottom: 10px; }
.shell.nav-collapsed .sb-toggle { justify-content: center; padding: 0; }
.shell.nav-collapsed .sidenav .tab { justify-content: center; padding: 0; }

/* ============================================================
   2 · 页眉（照搬 app.css 的 .apphead 语汇）
   ============================================================ */
.apphead {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 2px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-4);
}
.brand { display: flex; align-items: center; gap: 11px; }
.seal {
  width: 40px; height: 40px;
  background: var(--brand); color: #fff;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800;
  transform: rotate(-3deg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 2px 6px rgba(127,45,27,.25);
  flex: none;
}
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: 1px; line-height: 1.1; }
.brand-sub { font-size: 11px; color: var(--ink-3); letter-spacing: .4px; margin-top: 2px; }
.apphead-actions { margin-left: auto; display: flex; gap: 8px; }
.apphead-ver {
  font-size: var(--fs-xs); color: var(--ink-3); font-weight: 700;
  letter-spacing: .08em; padding: 2px 7px;
  border: 1px solid var(--line-thin); border-radius: var(--r-sm);
  background: var(--surface-2); white-space: nowrap;
}
.iconbtn {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  flex: none; cursor: pointer; transition: .18s;
  font-family: inherit; font-size: 13px;
}
.iconbtn:hover { border-color: var(--brand); color: var(--brand); }
.iconbtn svg { width: 17px; height: 17px; }

/* ============================================================
   3 · 卡片（照搬 app.css）
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.card-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 800; letter-spacing: .06em;
  margin-bottom: var(--sp-3); flex-wrap: wrap;
}
.card-title .tick {
  width: 4px; height: 15px; background: var(--brand);
  border-radius: 2px; flex: none;
  box-shadow: 0 0 0 2px var(--brand-soft);
}
.card-title .sub {
  margin-left: auto; font-size: 11px; color: var(--ink-3);
  font-weight: 500; white-space: nowrap;
}

/* ============================================================
   4 · 分段控件（选中＝墨色实心，同 app.css）
   ============================================================ */
.segmented {
  display: flex; background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 3px; gap: 3px;
}
.segmented.big { margin-bottom: var(--sp-4); }
.segmented .seg {
  flex: 1; border: none; background: transparent;
  color: var(--ink-2); padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: .18s; font-family: inherit;
}
.segmented .seg.active { background: var(--ink); color: var(--bg); font-weight: 700; }

/* 小号：用在卡片工具条里，不该占满整行 */
.segmented.sm { display: inline-flex; flex: none; padding: 2px; gap: 2px; }
.segmented.sm .seg { flex: none; padding: 5px 13px; font-size: 12px; }

/* ============================================================
   5 · 表单（照搬 app.css）
   ============================================================ */
.form-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.field {
  display: flex; flex-direction: column;
  font-size: 11px; color: var(--ink-3); gap: 4px;
}
.field.grow { flex: 1; min-width: 140px; }
.field input, .field select, .field textarea {
  padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--r-md); font-size: 14px;
  color: var(--ink); background: var(--surface-2);
  font-family: inherit; min-width: 0; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.form-hint { font-size: 11.5px; color: var(--ink-3); margin-top: var(--sp-2); line-height: 1.6; }
.form-hint b { color: var(--brand); }

.primary-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink); border-radius: var(--r-md);
  padding: 13px; font-size: 14.5px; font-weight: 700;
  cursor: pointer; letter-spacing: .18em; transition: .22s; font-family: inherit;
  margin-top: var(--sp-4);
}
.primary-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.primary-btn:disabled { opacity: .55; cursor: default; }

/* ============================================================
   6 · 卦盘
   ============================================================ */
.gua-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  flex-wrap: wrap; padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-thin); margin-bottom: var(--sp-3);
}
.gua-name {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl); font-weight: 800;
  letter-spacing: .1em; line-height: 1.15;
}
.gua-name .arrow { color: var(--ink-3); font-size: var(--fs-lg); margin: 0 6px; }
.gua-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.tag {
  font-size: 11px; padding: 2px 8px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-2); white-space: nowrap;
}
.tag.brand { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.tag.gold { border-color: var(--gold); color: var(--gold-text); background: var(--gold-soft); }

/* 六爻行：紧凑居中，上爻在上、初爻在下（古法盘式） */
.yao-list { display: flex; flex-direction: column; gap: 2px; max-width: 640px; margin: 0 auto; }
.yao-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 7px var(--sp-2);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: background-color .14s ease, border-color .14s ease;
}
.yao-row:hover { background: var(--surface-2); border-color: var(--line-thin); }
.yao-row.is-shi { background: var(--brand-soft); border-color: var(--brand-soft); }
.yao-row.is-dong { border-color: var(--line-strong); }

.yao-shen { width: 40px; flex: none; font-size: 11.5px; color: var(--ink-3); letter-spacing: .06em; }
.yao-qin { width: 126px; flex: none; font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.yao-qin .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 2px;
  margin-right: 5px; vertical-align: 1px;
}
.yao-najia {
  font-size: 11.5px; color: var(--ink-2); font-weight: 500;
  font-variant-numeric: tabular-nums; margin-left: 5px;
}
.yao-sym { width: 104px; flex: none; display: flex; align-items: center; gap: 8px; }
.bars { display: flex; align-items: center; gap: 6px; height: 12px; }
.bar { height: 8px; border-radius: 1px; background: var(--ink); }
.bar.yang { width: 72px; }
.bar.yin { width: 32px; }
.yao-sym.is-dong .bar { background: var(--brand); }
.dong-mark {
  font-size: 11px; font-weight: 800; color: var(--brand);
  border: 1px solid var(--brand); border-radius: var(--r-sm);
  padding: 0 4px; line-height: 1.5;
}
.shi-ying { width: 26px; flex: none; text-align: center; font-size: 12px; font-weight: 800; color: var(--brand); }
.shi-ying.blank { color: var(--line-strong); font-weight: 500; }
.bian { flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bian .ar { color: var(--ink-3); margin-right: 3px; }
.kong {
  font-size: 10px; color: var(--ink-3);
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  padding: 0 3px; margin-left: 4px;
}

/* ============================================================
   7 · 总断（合参成败）
   ============================================================ */
.syn-head {
  font-family: var(--font-serif);
  font-size: var(--fs-lg); font-weight: 800; line-height: 1.55;
  letter-spacing: .03em; color: var(--ink);
  margin-bottom: var(--sp-4);
  padding-left: var(--sp-4); border-left: 3px solid var(--brand);
}
.dim-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dim-table td {
  padding: 8px var(--sp-3); border-top: 1px solid var(--line-thin);
  vertical-align: baseline; line-height: 1.7;
}
.dim-table tr:first-child td { border-top: none; }
.dim-table .d-dim {
  width: 84px; flex: none; color: var(--ink-3);
  font-size: 12px; letter-spacing: .06em; white-space: nowrap;
}
.dim-table .d-q { width: 40px; text-align: center; }
.dim-table .d-v { color: var(--ink-2); }
.q {
  display: inline-block; min-width: 22px; text-align: center;
  font-size: 11.5px; font-weight: 800; line-height: 17px;
  padding: 0 5px; border-radius: var(--r-sm); border: 1px solid;
}
/* 吉红凶青：吉用朱砂（中式吉色），凶用黛青，中为墨底中性 —— 三色皆取自既有令牌 */
.q.ji { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.q.xiong { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.q.zhong { color: var(--ink-3); border-color: var(--line-strong); background: transparent; }
.advice {
  margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4);
  background: var(--bg-soft); border-radius: var(--r-md);
  font-size: 13px; color: var(--ink-2); line-height: 1.75;
}
.advice b { color: var(--ink); font-weight: 800; margin-right: var(--sp-3); letter-spacing: .06em; }

/* ============================================================
   7.1 · 断语
   ============================================================ */
.reading-head {
  font-family: var(--font-serif);
  font-size: var(--fs-lg); font-weight: 800;
  letter-spacing: .04em; margin-bottom: var(--sp-3);
}
.reading-item { padding: var(--sp-3) 0; border-top: 1px solid var(--line-thin); }
.reading-item:first-of-type { border-top: none; padding-top: 0; }
.reading-item h4 { margin: 0 0 5px; font-size: 12.5px; font-weight: 800; color: var(--brand); letter-spacing: .06em; }
.reading-item p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.75; }

/* ============================================================
   8 · 干支条 / 空态 / 加载 / 页脚
   ============================================================ */
.meta-bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  font-size: 12px; color: var(--ink-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line-thin);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}
.meta-bar b { color: var(--ink); font-weight: 700; }
.meta-bar .warn { color: var(--warn); }

.empty { text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--ink-3); font-size: 13px; }
.empty .big {
  font-family: var(--font-serif); font-size: var(--fs-xl);
  color: var(--ink-2); display: block; margin-bottom: var(--sp-2); letter-spacing: .1em;
}
.spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--line-strong); border-top-color: var(--brand);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.manual-grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.manual-grid .field { width: 100px; }

.site-foot {
  text-align: center; font-size: 11px; color: var(--ink-3);
  padding: var(--sp-5) 0 var(--sp-2); line-height: 1.8;
}
.site-foot code { font-size: 11px; background: var(--surface-3); padding: 1px 5px; border-radius: var(--r-sm); }

/* ============================================================
   9 · 断点（与潜龙一致：<768 手机底栏 / 768–991 图标条 / ≥992 侧栏）
   ============================================================ */
@media (min-width: 768px) {
  .mobile-only { display: none; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .shell .sidenav { flex-basis: 76px; width: 76px; padding-inline: 8px; }
  .sidenav .side-brand > div,
  .sidenav .sb-tg-text,
  .sidenav .tab span,
  .sidenav .side-foot { display: none; }
  .side-brand { justify-content: center; padding-bottom: 10px; }
  .sb-toggle { justify-content: center; padding: 0; }
  .sidenav .tab { justify-content: center; padding: 0; }
}

@media (max-width: 767px) {
  .shell { display: block; }
  .content { padding: var(--sp-4) var(--sp-4) 84px; }

  /* 手机档：侧栏转为底栏 tabbar（只留导航三项） */
  .sidenav {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; height: 60px; flex-basis: auto;
    flex-direction: row; align-items: stretch; gap: 0;
    padding: 0 4px;
    border-right: none; border-top: 1px solid var(--line);
    background: var(--bg-soft);
    z-index: 50;
  }
  .sidenav .side-brand, .sidenav .sb-toggle, .sidenav .side-foot { display: none; }
  .sidenav .tab {
    flex: 1; height: 100%; flex-direction: column;
    justify-content: center; gap: 3px; padding: 0;
    font-size: 11px;
  }
  .sidenav .tab.active::before {
    left: 50%; top: 0; transform: translateX(-50%);
    width: 22px; height: 3px; border-radius: 0 0 3px 3px;
  }

  .yao-row { gap: var(--sp-2); }
  .yao-qin { width: 104px; font-size: 13px; }
  .yao-sym { width: 78px; }
  .bar.yang { width: 54px; }
  .bar.yin { width: 24px; }
  .gua-name { font-size: var(--fs-xl); }
  .gua-tags { margin-left: 0; }
  .yao-list { max-width: 100%; }

  /* 卡片右上说明在窄屏改独占一行：nowrap + margin-left:auto 会顶出卡片右边界 */
  .card-title .sub {
    white-space: normal; margin-left: 0; flex-basis: 100%; order: 3;
    font-size: 10.5px; line-height: 1.5;
  }

  /* 总断六维表转两行式：维度名与吉凶同排，断语另起一行，避免窄屏三列挤压 */
  .dim-table tr { display: block; padding: 9px 0; border-top: 1px solid var(--line-thin); }
  .dim-table tr:first-child { border-top: none; }
  .dim-table td { display: inline; padding: 0; border: none; }
  .dim-table .d-dim { width: auto; margin-right: var(--sp-3); }
  .dim-table .d-q { width: auto; }
  .dim-table .d-v { display: block; margin-top: 4px; }
  .syn-head { font-size: var(--fs-base); padding-left: var(--sp-3); }
}

@media (max-width: 420px) {
  .yao-shen { width: 34px; font-size: 11px; }
  .yao-qin { width: 92px; }
  .yao-najia { display: none; }
  .yao-sym { width: 64px; }
  .bar.yang { width: 44px; }
  .bar.yin { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   10 · 六十四卦页 / 典籍页
   ============================================================ */

/* 五行色点（全局通用；五行只作色点，不落文字） */
.dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 2px;
  margin-right: 5px; vertical-align: 1px;
}

/* ---------- 六十四卦：卦宫矩阵（上卦为行 × 下卦为列） ----------
   9 列网格：第 1 列是行首（上卦），第 1 行是列首（下卦），其余 8×8 为交会重卦。
   行列同者落对角线，即八纯卦（.pure）。 */
.board-scroll {
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: var(--sp-1);
  -webkit-overflow-scrolling: touch;
}
.gua-matrix {
  display: grid;
  grid-template-columns: 56px repeat(8, minmax(0, 1fr));
  gap: 5px;
}
/* 文王卦序视图：没有行列表头，8 等分铺 64 格（01→64 顺序） */
.gua-matrix[data-view="king"] {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.gua-matrix[data-view="king"] .mtx-cell { min-height: 52px; }

/* 视图切换工具条 */
.board-tools { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
/* 文王序不横滚，无需滑动提示与右侧渐隐 */
body[data-view="king"] .board-hint { display: none; }
body[data-view="king"] .board-scroll {
  mask-image: none; -webkit-mask-image: none;
}

/* 左上角：标明行读上卦、列读下卦 */
.mtx-corner {
  display: flex; align-items: center; justify-content: center; gap: 1px;
  font-size: var(--fs-xs); color: var(--ink-3);
  letter-spacing: 0;
}
.mtx-corner .mc-l, .mtx-corner .mc-r { color: var(--brand); font-weight: 800; }
.mtx-corner .mc-slash { color: var(--line-strong); }

/* 表头共用 */
.mtx-hd {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 5px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  transition: background .16s, color .16s;
}
.mtx-hd.hot { background: var(--brand-soft); color: var(--brand); }

/* 列首（下卦）：三爻 + 卦名 + 取象，横排一行，宽格子放得下 */
.mtx-col { flex-direction: row; gap: 5px; padding: 7px 3px; }
/* 行首（上卦）：受第 1 列 56px 限宽，改竖排；只放三爻与卦名（取象留给列首） */
.mtx-rowbox { display: flex; align-items: stretch; min-width: 0; }
.mtx-rowbox .mtx-hd { flex: 1 1 auto; }
.mtx-rowhd { flex-direction: column; gap: 3px; padding: 5px 3px; }

.mh-name { font-size: var(--fs-base); font-weight: 800; letter-spacing: .04em; line-height: 1; }
/* 取象字与卦名之间加一道细线，避免「乾 天」连读成一个词 */
.mh-img {
  font-size: 11px; color: var(--ink-3); line-height: 1;
  padding-left: 6px; border-left: 1px solid var(--line);
}
.mtx-hd.hot .mh-img { color: var(--brand); border-left-color: var(--brand); }

/* 三爻符号：JS 已按「上爻在前」输出，故这里用 column 正常自上而下排 */
.tri {
  display: flex; flex-direction: column; gap: 2px;
  width: 22px; flex: none;
}
.tri i { display: block; height: 3px; border-radius: 1px; }
.t-yang { background: var(--ink); }
.t-yin {
  background: linear-gradient(to right,
    var(--ink) 0 41%, transparent 41% 59%, var(--ink) 59% 100%);
}
.mtx-hd.hot .t-yang { background: var(--brand); }
.mtx-hd.hot .t-yin {
  background: linear-gradient(to right,
    var(--brand) 0 41%, transparent 41% 59%, var(--brand) 59% 100%);
}

/* 交会格 */
.mtx-cell {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  min-width: 0;
  min-height: 54px;
  padding: 5px 2px;
  cursor: pointer; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font-family: inherit; transition: .15s;
}
.mtx-cell:hover {
  border-color: var(--brand); background: var(--brand-soft); transform: translateY(-1px);
}
.mtx-cell.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand) inset; }
.mtx-cell:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.mtx-cell.miss { border-style: dashed; color: var(--ink-3); cursor: default; }

/* 对角线八纯卦：金底 + 金边，与普通格子的浅灰线区分开 */
.mtx-cell.pure { border-color: var(--gold); background: var(--gold-soft); }
.mtx-cell.pure:hover, .mtx-cell.pure.on { border-color: var(--brand); background: var(--brand-soft); }

.mc-name {
  font-size: var(--fs-lg); font-weight: 800; letter-spacing: .02em; line-height: 1.15;
  white-space: nowrap;
}
.mc-no {
  font-size: 9.5px; color: var(--ink-3); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mc-el { position: absolute; top: 4px; right: 5px; line-height: 0; }
.mc-el .dot { width: 5px; height: 5px; margin: 0; border-radius: 50%; vertical-align: 0; }

.board-note {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2); border-radius: var(--r-md);
  font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.95;
}
.board-note b { color: var(--ink-2); }

/* 提示只在矩阵需要横向滚动时出现（桌面放得下 9 列，不显示） */
.board-hint { display: none; }

/* ---------- 卦详情弹层 ---------- */
body.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute; inset: 0; background: rgba(39, 34, 26, .42);
  backdrop-filter: blur(2px);
}
.modal-panel {
  position: relative; width: min(760px, 94vw); max-height: 88vh; overflow: auto;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
}
.modal-panel:focus { outline: none; }
.modal-x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  font-size: 17px; line-height: 1; cursor: pointer; transition: .15s;
}
.modal-x:hover { border-color: var(--brand); color: var(--brand); }

.gm-head { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-4); }
/* 六爻微图（弹层大图）：六条爻线，上爻在上；.mb yin 用两段 <i> 画断爻 */
.mb { display: flex; height: 3px; gap: 7px; }
.mb i { flex: 1 1 0; background: var(--ink); border-radius: 1px; }
.mb.big { height: 4px; gap: 9px; }
.gm-sym { display: flex; flex-direction: column; gap: 5px; width: 76px; flex: none; }
.gm-sym .mb i { background: var(--ink); }
.gm-name { font-size: var(--fs-2xl); font-weight: 900; letter-spacing: .1em; line-height: 1.15; }
.gm-sec { margin-top: var(--sp-5); }
.gm-sec-t {
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
  padding-bottom: 6px; border-bottom: 1px solid var(--line-thin); margin-bottom: var(--sp-2);
}
.gm-sec-t b { font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.gm-sec-t span { font-size: 11px; color: var(--ink-3); }
.gm-nav {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line-thin);
}
.gm-step {
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 6px 12px; cursor: pointer; transition: .15s;
}
.gm-step:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- 引文块（卦辞 / 大象 / 简介） ---------- */
.quote-block { padding: var(--sp-1) 0; }
.qk {
  font-size: 10.5px; font-weight: 800; color: var(--brand);
  letter-spacing: .18em; margin-bottom: 3px;
}
.qv { font-size: 13.5px; color: var(--ink); line-height: 1.8; }

/* ---------- 六爻爻辞列表 ---------- */
.line-list { display: flex; flex-direction: column; gap: 2px; }
.line-item {
  display: flex; gap: var(--sp-3); padding: 7px var(--sp-2);
  border-radius: var(--r-sm); font-size: 13px; color: var(--ink-2);
}
.line-item:nth-child(odd) { background: var(--surface-2); }
.line-item b { flex: none; width: 34px; color: var(--brand); font-size: 11.5px; font-weight: 800; }

/* 典籍相关的 .cls-* / .chapter / .ch-* / .phil-list / .aph-list / .para
   已随典籍库拆出至 web/classics/css/classics.css，本站不再保留，
   以免两个门类的样式互相牵连。 */

/* ============================================================
   12 · 门类入口（照潜龙「三个门类，一个源头」版式）
   ============================================================ */
.gates-hero { padding: var(--sp-6) 0 var(--sp-7); }
.gh-kicker {
  font-size: 11px; font-weight: 800; color: var(--brand);
  letter-spacing: .34em; margin-bottom: var(--sp-3);
}
.gh-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-hero); font-weight: 900; letter-spacing: .02em;
  line-height: 1.25; color: var(--ink);
}
.gh-sub { margin: 0; font-size: 13.5px; color: var(--ink-3); letter-spacing: .02em; }

.gates-grid {
  /* ★ 261101：3 卡 → 4 卡（补八字门类）。改用自适应列宽而不是写死 4 列：
     宽屏 4 列、中屏 3 列、991 以下 2 列、767 以下 1 列，断点只兜底不强扭。
     240px 是本卡内文字（13px/1.85 行高）不断行的下限，实测值。 */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-5);
}
.gate-card {
  position: relative; display: flex; flex-direction: column;
  padding: 22px 20px 18px 26px;
  background: var(--bg-card); color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
/* 左侧纸边纹理：与潜龙门类卡同一处细节，只用令牌色，不加图片 */
.gate-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 11px;
  border-radius: var(--r-md) 0 0 var(--r-md);
  background:
    repeating-linear-gradient(180deg,
      var(--brand-glow) 0 5px,
      transparent 5px 11px),
    var(--brand-soft);
}
.gate-card:hover {
  border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-2px);
}
.gc-idx {
  font-size: 11.5px; color: var(--ink-3); letter-spacing: .2em;
  margin-bottom: var(--sp-2);
}
.gc-title {
  margin: 0 0 5px; font-size: var(--fs-xl); font-weight: 900; letter-spacing: .06em;
}
.gc-sub {
  font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em;
  margin-bottom: var(--sp-4);
}
.gc-sub i { font-style: normal; margin: 0 4px; color: var(--line-strong); }
.gc-desc {
  margin: 0 0 var(--sp-4); font-size: 13px; color: var(--ink-2); line-height: 1.85;
}
.gc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-4); }
.gc-tags span {
  font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 2px 7px; background: var(--surface-2);
}
.gc-go {
  margin-top: auto; font-size: 12.5px; font-weight: 800; color: var(--brand);
  letter-spacing: .06em;
}
.gc-go .ar { margin-left: 4px; transition: margin-left .18s; }
.gate-card:hover .gc-go .ar { margin-left: 9px; }

.gc-flag {
  position: absolute; top: 14px; right: 14px;
  font-size: 10.5px; color: var(--gold-text); letter-spacing: .08em;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 1px 6px; background: var(--gold-soft);
}
.gates-note {
  margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5);
  background: var(--surface-2); border-radius: var(--r-md);
  font-size: 12.5px; color: var(--ink-3); line-height: 1.9;
}
.gates-note b { color: var(--ink-2); }

@media (max-width: 991px) {
  .gates-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .gates-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .gh-title { font-size: var(--fs-2xl); }
  .gates-hero { padding: var(--sp-4) 0 var(--sp-5); }
}

/* ============================================================
   13 · 卦宫矩阵 / 弹层的窄屏覆写
   ------------------------------------------------------------
   ⚠ 必须放在文件末尾：.gua-matrix / .mtx-* 的基础规则定义在本节之前，
     若把窄屏规则写在前面的 @media 块里，会被后面的基础规则
     以「同特异性、后者胜」覆盖掉（实测过：窄屏覆写整段失效）。
   ⚠ 矩阵在窄屏**不降列**：行列是固定语义（上卦×下卦），拆列就不是矩阵了，
     改为 .board-scroll 横向滚动 + 右侧渐隐提示。
   ============================================================ */
@media (max-width: 767px) {
  /* 矩阵在手机不降列 —— 行列是固定语义（上卦×下卦），拆成 4 列就不是矩阵了。
     改为给 .board-scroll 横向滚动，矩阵保底 600px（约每格 66px）。 */
  .gua-matrix { min-width: 600px; grid-template-columns: 52px repeat(8, minmax(0, 1fr)); gap: 4px; }
  /* 文王序是纯流水排列，手机改 4 列不影响语义，也就不必横滚 */
  .gua-matrix[data-view="king"] {
    min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px;
  }
  .gua-matrix[data-view="king"] .mtx-cell { min-height: 46px; }
  body[data-view="king"] .board-scroll { overflow-x: visible; }
  .board-tools { margin-bottom: var(--sp-2); }
  .segmented.sm .seg { padding: 5px 11px; }
  .mtx-cell { min-height: 44px; padding: 4px 1px; }
  .mc-name { font-size: var(--fs-base); }
  .mtx-col { padding: 6px 3px; gap: 4px; }
  .mh-name { font-size: var(--fs-xs); }
  /* 矩阵放不下时给出滑动提示，否则用户不知道右侧还有四列 */
  .board-hint {
    display: block;
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-xs); color: var(--brand);
    letter-spacing: .04em;
  }
  /* 滚动提示：矩阵右侧渐隐，暗示还有内容 */
  .board-scroll {
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
  }

  /* 弹层在手机改底部抽屉 */
  .modal { align-items: flex-end; }
  .modal-panel {
    width: 100vw; max-height: 90vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
  }
  .gm-head { gap: var(--sp-4); }
  .gm-name { font-size: var(--fs-xl); }
  .gm-sym { width: 58px; }
}