/* ===========================================================
   四柱排盘 · 结构与基础盘面
   -----------------------------------------------------------
   由原 chart.css + chart-pro.css + chart-v2.css 合并而成。
   合并时消除的遗留问题：
     · .star-chip 原在两文件中各定义一次，后者静默覆盖前者
     · [hidden] 的 !important 已移交 components.css 统一处理
     · 圆角由 22/14/16/13/12/10 六种收敛为令牌三档

   依赖：tokens.css → components.css → 本文件 → chart-detail.css
   =========================================================== */

/* ---------- 页面骨架 ---------- */
.chart-app {
  width: min(880px, 100%);
  margin: 0 auto var(--sp-10);
}

.page-chart { background-color: var(--paper); }

/* 专业细盘已改为单栏一列到底，不再需要为双栏放宽整页宽度。
   原先的 .chart-app:has(#view-detail.active){width:min(1200px,100%)} 会与
   外层定宽容器叠加算出 2028px 的文档宽度，是 1440px 下 588px 横向溢出的根因，故删除。 */

.chart-brand {
  position: relative;
  margin: 28px var(--sp-4) 18px;
  padding: 30px 28px 26px;
  overflow: hidden;
  border-radius: 2px 36px 2px 36px;
  background: var(--jade);
  text-align: center;
}

.chart-brand::before {
  content: '四柱';
  position: absolute;
  right: -8px;
  bottom: -32px;
  color: rgba(247,245,239,.055);
  font-family: var(--serif);
  font-size: 126px;
  line-height: 1;
}

.chart-brand .eyebrow { color: #d9be8b; }

.chart-brand h1 {
  margin: var(--sp-1) 0;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  position: relative;
  color: var(--ink-invert);
  font-weight: 500;
}

.chart-brand p {
  margin: 0;
  position: relative;
  color: rgba(247,245,239,.68);
  font-size: var(--fs-sm);
}

/* ---------- 录入卡 ---------- */
.entry-card {
  margin: 0 var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: 2px 32px 2px 32px;
  background: rgba(251,250,246,.94);
  box-shadow: var(--sh-2);
}

@media (min-width: 621px) {
  .chart-app { width: min(960px, 100%); }
  .chart-brand { margin-top: 32px; padding-block: 26px 22px; }
  .entry-card { padding: 28px 32px 30px; }
  .entry-grid { gap: 18px 20px; }
  .entry-field.full { gap: 8px; }
  .summary-control { min-height: 58px; }
  .privacy { max-width: 720px; margin-inline: auto; }
}

.calendar-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: var(--sp-5);
  padding: 5px;
  border-radius: 2px 12px 2px 12px;
  background: var(--paper-2);
}

.calendar-tab {
  padding: var(--sp-3);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
}

.calendar-tab.active {
  background: var(--card);
  color: var(--jade);
  box-shadow: inset 0 -2px 0 var(--gold);
}

.entry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.entry-field {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: var(--fs-sm);
}

.entry-field small {
  color: var(--ink-3);
  font-weight: var(--fw-normal);
}

.entry-field input,
.entry-field select {
  min-width: 0;
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: 2px 10px 2px 10px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}

.entry-field input:focus,
.entry-field select:focus {
  border-color: var(--jade);
  outline: none;
  box-shadow: 0 0 0 3px var(--jade-soft);
}

.entry-field.full,
.calculate { grid-column: 1 / -1; }

.summary-control {
  min-height: 54px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: 2px 12px 2px 12px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.summary-control b { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.summary-control i { color: var(--gold); font-size: 28px; font-style: normal; }
.summary-control:hover { border-color: var(--jade); background: var(--jade-soft); }
.summary-control:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }

/* 日期时间合并成一行后，日期与时间两块各自是个 <b>，中间用一段浅墨分隔。
   flex:1 让它们左右分列（日期占主、时间靠右），不加只会挤成一团。 */
.summary-control .summary-time {
  margin-left: auto;
  padding-left: var(--sp-3);
  color: var(--ink-2);
  font-weight: var(--fw-normal);
}
/* 窄屏下日期与时间分两行，避免「2000年01月01日 10:30」整串被压到换行难看 */
@media (max-width: 420px) {
  .summary-control { flex-wrap: nowrap; padding-block: 0; }
  .summary-control .summary-time { flex-basis: auto; margin-left: auto; padding-left: var(--sp-3); }
}

.advanced-options {
  border: 1px solid var(--line);
  border-radius: 2px 12px 2px 12px;
  background: var(--card-soft);
  overflow: hidden;
}
.advanced-options summary {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-4);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.advanced-options summary::-webkit-details-marker { display: none; }
.advanced-options summary::after { content: '＋'; color: var(--gold); font-size: 20px; }
.advanced-options[open] summary::after { content: '－'; }
.advanced-options summary small { margin-left: auto; margin-right: var(--sp-3); color: var(--ink-3); }
.advanced-options-body { display: grid; gap: var(--sp-3); padding: 0 var(--sp-3) var(--sp-3); }

.picker-open { overflow: hidden; }
.picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: rgba(13, 28, 26, .46);
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.picker-overlay[hidden] { display: none !important; }
.picker-overlay.open { opacity: 1; }
.picker-sheet {
  width: min(680px, 100%);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: 2px 28px 2px 28px;
  background: var(--paper);
  box-shadow: var(--sh-3);
  transform: translateY(8px);
  transition: transform 250ms var(--ease);
}
.picker-overlay.open .picker-sheet { transform: translateY(0); }
.picker-sheet > header { display: grid; grid-template-columns: 52px 1fr 62px; align-items: center; margin-bottom: var(--sp-5); }
.picker-sheet > header h2 { margin: 0; text-align: center; font-size: var(--fs-lg); }
.picker-sheet > header button { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--jade); font: inherit; cursor: pointer; }
.picker-sheet > header #closePicker { font-size: 30px; text-align: left; }
.picker-sheet > header #confirmPicker { color: var(--gold-dark); font-weight: var(--fw-medium); }
.picker-help { margin: var(--sp-4) 0 0; color: var(--ink-3); font-size: var(--fs-sm); text-align: center; }
.unknown-time-option { width: 100%; min-height: 48px; margin-top: var(--sp-4); border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font: inherit; cursor: pointer; }
.unknown-time-option.active { border-color: var(--gold); background: var(--gold-soft); color: var(--ink); }

.pillar-lookup { padding: var(--sp-4); border: 1px solid var(--line); background: var(--card-soft); }
.pillar-lookup > p { margin: 0 0 var(--sp-4); color: var(--ink-2); line-height: 1.7; }
.pillar-lookup-hint { min-height: 1.7em; }

/* ---------- 四柱反查：圆钮选干选支 + 候选区随进度变形 ----------
   站长 2026-09-25 要求照问真八字的交互重做（原为四个六十甲子下拉框）。
   这里只写布局与四态外观，干支的五行着色仍复用 .wx-木 等既有类（chart.css 上方），
   不新增颜色变量 —— 五行色只在 tokens.css 定义一次。 */
.pillar-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.pillar-column { display: grid; gap: var(--sp-2); justify-items: center; }
.pillar-column-label { color: var(--ink-3); font-size: var(--fs-sm); }

/* 圆钮：一柱两个（上干下支） */
.pillar-slot {
  width: 56px; height: 56px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--card); color: var(--ink-2);
  font: inherit; font-size: var(--fs-lg); line-height: 1; cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.pillar-slot:hover:not(:disabled) { border-color: var(--gold); }
/* 未选：虚边框 + 问号位 */
.pillar-slot.is-empty { border-style: dashed; color: var(--ink-3); }
/* 已选：五行实色边 + 淡底（.wx-* 提供文字色，此处补边框与底） */
.pillar-slot.is-selected.wx-木 { border-color: var(--wx-mu); background: var(--wx-mu-soft); }
.pillar-slot.is-selected.wx-火 { border-color: var(--wx-huo); background: var(--wx-huo-soft); }
.pillar-slot.is-selected.wx-土 { border-color: var(--wx-tu); background: var(--wx-tu-soft); }
.pillar-slot.is-selected.wx-金 { border-color: var(--wx-jin); background: var(--wx-jin-soft); }
.pillar-slot.is-selected.wx-水 { border-color: var(--wx-shui); background: var(--wx-shui-soft); }
/* 当前正在编辑：黛金边框 + 光晕。这一态必须与「已选」可区分（不只靠颜色深浅） */
.pillar-slot.is-active { border-color: var(--gold); border-style: solid; box-shadow: 0 0 0 3px var(--gold-soft); }
/* 禁用：前置柱未完成时不可点 */
.pillar-slot:disabled { opacity: .38; cursor: not-allowed; }

/* 候选区：一个容器，按 stage 换成三种栅格 */
.pillar-candidates { margin-top: var(--sp-4); }
.pillar-candidates:empty { margin-top: 0; }
.candidate-grid { display: grid; gap: var(--sp-2); }
.candidate-grid.gan-panel { grid-template-columns: repeat(5, 1fr); max-width: 380px; margin: 0 auto; }
/* 地支六列要保证每格 ≥44px：6×44 + 5×8 = 304px，故给面板一个地板宽度。
   平板竖屏（768px）时外层表单栏比视口窄，不设地板会把格子压到 43.5px。 */
.candidate-grid.zhi-panel { grid-template-columns: repeat(6, 1fr); min-width: 304px; }
.candidate-grid.pillar-panel { grid-template-columns: repeat(4, 1fr); }

.candidate-chip {
  min-height: 46px; display: grid; place-items: center; padding: 4px 6px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink); font: inherit; font-size: var(--fs-lg);
  cursor: pointer; transition: border-color .16s ease, background-color .16s ease, opacity .16s ease;
}
.candidate-chip:hover:not(:disabled) { border-color: var(--gold); background: var(--gold-soft); }
.candidate-chip:disabled { opacity: .3; cursor: not-allowed; }
/* 干支卡片：干与支各按自己的五行着色 */
.candidate-chip .chip-gan, .candidate-chip .chip-zhi { line-height: 1.15; }

.pillar-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.pillar-actions .lookup-button { flex: 1; }
.lookup-button { width: 100%; min-height: 50px; border: 0; background: var(--jade); color: var(--ink-invert); font: inherit; cursor: pointer; }
.lookup-button:disabled { opacity: .55; cursor: not-allowed; }
.lookup-clear { min-height: 50px; padding: 0 var(--sp-4); border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-2); font: inherit; cursor: pointer; }
.lookup-clear:hover { border-color: var(--gold); color: var(--ink); }
.lookup-results > p { color: var(--ink-2); line-height: 1.6; }
.candidate-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); max-height: 300px; overflow: auto; }
.candidate-list button { min-height: 58px; display: grid; gap: 3px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); background: var(--card); color: var(--ink); text-align: left; cursor: pointer; }
.candidate-list button:hover { border-color: var(--gold); }
.candidate-list span { color: var(--ink-3); font-size: var(--fs-sm); }
.lookup-empty { padding: var(--sp-3); background: var(--paper-2); }

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

.segmented label { position: relative; }

.segmented input {
  position: absolute;
  opacity: 0;
}

.segmented b {
  display: block;
  padding: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: 2px 10px 2px 10px;
  font-weight: var(--fw-normal);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.segmented input:checked + b {
  border-color: var(--jade);
  background: var(--jade-soft);
  color: var(--jade);
}

.switch-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 2px 12px 2px 12px;
  background: var(--card-soft);
}

.switch-field span { display: grid; font-size: var(--fs-sm); }

.switch-field input {
  width: 22px;
  height: 22px;
  accent-color: var(--jade);
}

.calculate {
  padding: var(--sp-4);
  border: 0;
  border-radius: 2px 16px 2px 16px;
  background: var(--jade);
  color: var(--ink-invert);
  font: inherit;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-wider);
  cursor: pointer;
  /* ⚠ 过渡属性里必须带上 transform 与 box-shadow。
     原先只有 background —— 于是站长点名的这枚「开始排盘」**是全站唯一
     按下不缩、也没有内阴影的主按钮**：.ios-press 的 transform 与 box-shadow
     写进来会被这条 transition 的「未列出属性即刻生效」规则瞬间落定，
     等于没有按压动画。他三次反馈「没感觉到动画」，主按钮恰好毫无反应。
     两处一起写在这里而不是靠 .ios-press 覆盖：后者特异性同为 0-1-0，
     会由源码顺序决定胜负，太脆。 */
  transition:
    background var(--dur) var(--ease),
    transform 90ms var(--ease-out),
    box-shadow 90ms var(--ease-out);
  box-shadow: 0 10px 28px rgba(18,61,58,.18);
}

.calculate:hover { background: var(--jade-hover); }

.privacy,
.form-error {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
  text-align: center;
}

.privacy { color: var(--ink-3); }
.form-error { color: var(--red); }

.chart-skeleton {
  margin: 0 var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: 2px 32px 2px 32px;
  background: var(--card);
  box-shadow: var(--sh-1);
}

.skeleton-heading { display: flex; align-items: center; margin-bottom: var(--sp-6); color: var(--jade); }
.skeleton-pillars { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-3); }
.skeleton-pillars i { height: 118px; border-radius: 2px 18px 2px 18px; background: var(--paper-2); }
.skeleton-rows { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.skeleton-rows i { position: relative; overflow: hidden; width: 100%; height: 18px; border-radius: var(--r-sm); background: var(--paper-2); }
.skeleton-rows i:nth-child(2n) { width: 78%; }
.skeleton-pillars i::after,
.skeleton-rows i::after { content:''; display:block; width:45%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent); animation:shimmer 1.25s ease-in-out infinite; }

#resultPanel.result-entering .pillar-card { animation: pillar-enter var(--dur-slow) var(--ease-in) both; }
#resultPanel.result-entering .pillar-card:nth-child(2) { animation-delay: 80ms; }
#resultPanel.result-entering .pillar-card:nth-child(3) { animation-delay: 160ms; }
#resultPanel.result-entering .pillar-card:nth-child(4) { animation-delay: 240ms; }
#resultPanel.result-entering .wuxing-bar,
#resultPanel.result-entering .wuxing-energy-card,
#resultPanel.result-entering .info-table,
#resultPanel.result-entering .jieqi-card { animation: result-detail-enter var(--dur-slow) var(--ease-in) both; animation-delay: 300ms; }

@keyframes pillar-enter { from { opacity:0; transform:translateY(var(--move-md)); } }
@keyframes result-detail-enter { from { opacity:0; transform:translateY(var(--move-lg)); } }

/* ---------- 结果页头 ---------- */
.result-title {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) + 2);
  display: grid;
  grid-template-columns: 70px 1fr 70px;
  align-items: center;
  min-height: 116px;
  border-bottom: 1px solid var(--line);
  background: rgba(251,250,246,.94);
  backdrop-filter: blur(16px);
  text-align: center;
  /* ⚠ 只过渡 box-shadow，**不过渡 min-height**。
     min-height 是布局属性：116px → 66px 的过渡会让整个结果页正文
     在 250ms 里被推着往上挪 50px。站长 2026-09-27 反馈「感觉页面不对劲」——
     就是这种「页面自己在动」：用户没滚，内容却在漂。
     阴影变化照样有过渡（视觉上够用），高度改为瞬时切换（一帧到位，看不见挪动）。 */
  transition: box-shadow var(--dur) var(--ease);
}

.result-title button {
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-base);
  cursor: pointer;
}

.result-title button:first-child { font-size: 34px; }

.result-title.is-compact {
  min-height: 66px;
  box-shadow: var(--sh-1);
}

.result-title #resultMore { font-size: 17px; letter-spacing: 2px; }

.result-more-menu {
  position: absolute;
  top: calc(100% - 8px);
  right: 12px;
  z-index: calc(var(--z-sticky) + 4);
  width: 150px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--sh-2);
  text-align: left;
}

.result-more-menu[hidden] { display: none; }
.result-more-menu button { width: 100%; height: 46px; padding: 0 16px; text-align: left; }
.result-more-menu button + button { border-top: 1px solid var(--line-soft); }
.result-more-menu button:hover { background: var(--gold-soft); color: var(--gold); }

.result-title strong {
  display: block;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.result-title small {
  display: block;
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

/* ---------- 顶部页签（设置收进更多菜单，只保留四个主任务） ---------- */
.result-tabs {
  position: sticky;
  /* 横滑交给页签栏自己的手势（chart.js），纵向滚动仍交给浏览器 */
  touch-action: pan-y;
  top: 116px;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.result-title.is-compact + .result-tabs { top: 66px; }

.result-tabs button {
  padding: var(--sp-4) var(--sp-1);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-md);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.result-tabs button.active {
  color: var(--jade);
  background: var(--gold-soft);
}

/* 底部滑块：取代各按钮自己的下边框，点击时平滑滑到目标页签，横滑时跟手。
   只动 transform，走合成层。 */
.result-tabs-ink {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% / 4);
  height: 3px;
  background: var(--gold);
  border-radius: 3px 3px 0 0;
  pointer-events: none;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

/* 结果区禁止产生横向滚动（clip 不建立滚动容器，不影响 sticky 页签） */
#resultPanel { overflow-x: clip; }

.result-view {
  display: none;
  padding: var(--sp-4) var(--sp-4);
}

/* 2026-10-14：删除移动端“面板常驻 + 绝对定位 + 拖动时两面板叠层跟手”的整块规则。
   那套做法让相邻面板在横滑时叠在当前面板上平移，两页文字交错 —— 即站长说的“切换过程乱码”。
   现在横滑只在页签栏上进行、只移动底部滑块，面板一律 display 切换（见下）。 */

/* ⚠ display 必须由这里给回来。
   .result-view 的基态是 display:none，showView() 只切 .active 类；
   而 CSS 动画（animation）**不能把 display:none 变回可见** —— 光有下面那条
   animation 是不够的。全站唯一让结果面板显形的就是这一条。
   2026-09-25 曾因这条丢失导致**桌面端整个结果区空白**（页签能点、DOM 都在、
   所有「元素是否存在」的断言全绿，就是屏幕上什么都没有），补回并加此注释。 */
.result-view.active { display: block; }

/* 2026-10-14：进场只做 160ms 纯淡入。原先带 translateY(8px)，且与 Motion.pop 的缩放叠加，
   面板切换后会“落一下”，是“切过去轻微抖动”的来源之一。透明度动画只走合成层，不引起重排。 */
.result-view.active { animation: view-enter 160ms ease-out both; }
@keyframes view-enter { from { opacity: 0; } }

/* 横滑切换时不要再叠一层纵向淡入 —— 两套动画同时跑会互相打架，
   观感是「一边横移一边上浮」，更不自然。JS 拖动时会加 .no-enter 抑制它。 */
.result-view.no-enter.active { animation: none; }

/* ---------- 通用卡片 ---------- */
.identity-seal {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: var(--sp-2) auto var(--sp-5);
  border: 2px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font-size: var(--fs-3xl);
}

.info-card,
.detail-card,
.relation-box {
  margin-bottom: var(--sp-3);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px 24px 2px 24px;
  background: rgba(251,250,246,.92);
  box-shadow: var(--sh-1);
}

.info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
}

.info-row:nth-child(even) { background: var(--paper-2); }

.info-row span { min-width: 0; }

.info-row b {
  color: var(--ink-2);
  font-weight: var(--fw-normal);
}

.disclaimer,
.tip,
.method-note {
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.disclaimer {
  padding: var(--sp-4);
  font-size: var(--fs-xs);
  text-align: center;
}

.tip { padding: 0 6px var(--sp-4); }

/* ---------- 专业表 ---------- */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 2px 18px 2px 18px;
  background: var(--card);
}

.pro-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  table-layout: fixed;
}

.pro-table th,
.pro-table td {
  padding: 6px 5px;
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
  vertical-align: top;
}

.pro-table thead th,
.pro-table tbody th {
  color: var(--ink-2);
  font-weight: var(--fw-normal);
}

.pro-table tbody th { width: 72px; }

.pro-table .stem,
.pro-table .branch {
  font-size: var(--fs-ganzhi-table);
  /* 与基础排盘的四柱干支同粗细。
     ⚠ 基础排盘那条（见文件下方 #basicChart 一组）给的是 var(--fw-medium)，
       本规则原先没有 font-weight，于是细盘干支落到常规 400 ——
       同一张命盘在「基础排盘」与「专业细盘」两个页签里粗细不一样，是站长的原话问题。
       只加粗细，**不动 font-size**：细盘表是 9 行密表，字号一变整表高度跟着变。 */
  font-weight: var(--fw-medium);
  line-height: 1.25;
}

/* 五行着色：唯一取值处，内容由 chart.js 拼成 wx-木 之类 */
.wx-木 { color: var(--wx-mu); }
.wx-火 { color: var(--wx-huo); }
.wx-土 { color: var(--wx-tu); }
.wx-金 { color: var(--wx-jin); }
.wx-水 { color: var(--wx-shui); }

.tiny-lines {
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.solar-terms,
.jieqi-card {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-md);
  background: var(--gold-soft);
}

.solar-terms p,
.jieqi-card .jq-line {
  display: flex;
  justify-content: space-between;
  margin: var(--sp-1) 0;
  font-size: var(--fs-sm);
}

.jieqi-card h3 {
  margin: 0 0 var(--sp-2);
  color: var(--gold);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}

.jieqi-card .jq-line span:first-child { color: var(--ink-2); }

/* ---------- 关系摘要 ---------- */
.relation-box { padding: var(--sp-5); }

.relation-line {
  display: flex;
  gap: var(--sp-3);
  margin: 7px 0;
}

.relation-line b {
  color: var(--gold);
  font-weight: var(--fw-medium);
}

/* ---------- 小卡片组 ---------- */
.professional-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.mini-card {
  padding: var(--sp-3) var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  text-align: center;
}

.mini-card small {
  display: block;
  color: var(--ink-2);
  font-size: var(--fs-xs);
}

.mini-card strong {
  color: var(--gold);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.detail-card { padding: var(--sp-4); }

.detail-card h2 {
  margin: 0 0 var(--sp-3);
  color: var(--gold);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

/* ---------- 命主标识区 ---------- */
.chart-owner {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  padding: 12px var(--sp-4);
}

.chart-owner h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
}

.owner-divider { color: var(--gold); }

.chart-owner .zao-bie {
  padding: 2px 9px;
  border: 1px solid var(--gold);
  border-radius: var(--r-sm);
  color: var(--gold);
  font-size: var(--fs-xs);
}

.chart-owner .owner-sub {
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.owner-pillars { display: flex; align-items: center; justify-content: center; gap: 13px; }
.owner-pillars span { display: grid; grid-template-columns: auto auto; align-items: center; gap: 5px; }
.owner-pillars small { color: var(--ink-3); font-size: 10px; }
.owner-pillars b { display: inline-flex; gap: 3px; font-size: 18px; font-weight: var(--fw-medium); }
.owner-pillars i { font-style: normal; }
.result-title.is-compact .chart-owner { grid-template-columns: auto auto; justify-content: center; gap: 16px; }
.result-title.is-compact .owner-pillars { gap: 9px; }
.result-title.is-compact .owner-pillars small,
.result-title.is-compact .owner-sub { display: none; }
.result-title.is-compact .owner-pillars b { font-size: 15px; }

/* ---------- 基础盘分区 ---------- */
.basic-section-head,
.module-heading,
.timeline-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-4); }
.basic-section-head { margin-bottom: var(--sp-4); }
.basic-section-head h2,
.module-heading h2 { margin: 2px 0 0; color: var(--ink); font-size: var(--fs-xl); }
.basic-section-head p { max-width: 420px; margin: 0; color: var(--ink-3); font-size: var(--fs-sm); text-align: right; }
.section-kicker { color: var(--gold); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); }
.basic-module { margin-top: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--sh-1); }
.module-heading { margin-bottom: var(--sp-4); }
.module-heading > span,
.timeline-heading span { color: var(--ink-3); font-size: var(--fs-xs); }
.yun-start { margin: 0 0 var(--sp-4); color: var(--ink-2); font-size: var(--fs-sm); }
.cycle-analysis { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); padding: 12px 16px; border-left: 3px solid var(--gold); background: var(--gold-soft); }
.cycle-analysis small { color: var(--gold); white-space: nowrap; }
.cycle-analysis strong { font-weight: var(--fw-medium); }
.timeline-group + .timeline-group { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); }
.timeline-heading { align-items: center; margin-bottom: var(--sp-3); }
.timeline-heading h3 { margin: 0; font-size: var(--fs-md); }

#basicChart .pro-table .stem,
#basicChart .pro-table .branch { font-size: clamp(30px, 4vw, 36px); font-weight: var(--fw-medium); }

/* ---------- 四柱总览 ---------- */
.pillar-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  padding: 0 var(--sp-4) var(--sp-3);
}

.pillar-card {
  padding: var(--sp-4) var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  text-align: center;
}

.pillar-card .pc-label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
}

.pillar-card .pc-gz {
  display: block;
  font-size: var(--fs-ganzhi);
  line-height: 1.24;
  letter-spacing: var(--ls-normal);
}

.pillar-card .pc-gz .stem,
.pillar-card .pc-gz .branch { display: block; }

.pillar-card .pc-shishen {
  display: block;
  margin-top: 9px;
  color: var(--ink-2);
  font-size: var(--fs-xs);
}

/* ---------- 五行能量条 ---------- */
.wuxing-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin: 0 var(--sp-4) var(--sp-3);
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--line);
}

.wuxing-bar .wx-cell {
  padding: var(--sp-3) var(--sp-1);
  background: var(--card);
  text-align: center;
}

.wuxing-bar .wx-cell b {
  display: block;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.wuxing-bar .wx-cell small {
  display: block;
  margin-top: 3px;
  color: var(--ink-2);
  font-size: var(--fs-xs);
}

.wuxing-bar .wx-cell.is-count b { color: var(--gold); }

/* 旺相休囚死已独立成「五行状态」横排，格子内不再缀小字，
   否则 5 个格子会因小字有无而高矮不齐。 */

/* 五行占比条：本站自拟权重，页面已标明 */
.wuxing-energy-card {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card-soft);
}

.wuxing-energy-card h3 {
  margin: 0 0 var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
}

/* 五行口径切换：能量／个数／含藏干。三态算法不同，说明文字随模式同步替换。 */
.wx-mode-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.wx-mode-head h3 { margin: 0; }

.wx-mode-tabs { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }

.wx-mode-tabs button {
  padding: 4px 10px;
  border: 0;
  background: var(--card);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  cursor: pointer;
}

.wx-mode-tabs button.active { background: var(--gold); color: var(--paper); }

/* 旺相休囚死按强弱梯度横排，不按五行生序。 */
.wangshuai-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--line);
}

.wangshuai-row .ws-cell {
  padding: var(--sp-2) var(--sp-1);
  background: var(--card);
  text-align: center;
}

.wangshuai-row .ws-cell small {
  display: block;
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.wangshuai-row .ws-cell b {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.wangshuai-row .ws-cell.is-empty b { color: var(--ink-3); }

/* 3×2 派生小卡：四柱之外的短值不再各占一整行标签。 */
.aux-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin: 0 var(--sp-4) var(--sp-3);
}

.aux-card {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
}

.aux-card small { display: block; color: var(--ink-3); font-size: var(--fs-xs); }
.aux-card b { display: block; margin-top: 2px; font-size: var(--fs-md); font-weight: var(--fw-medium); }
.aux-card b em { color: var(--gold); font-size: var(--fs-xs); font-style: normal; }

.aux-card.is-wide { grid-column: 1 / -1; }

/* 标签行的语义分组：组间留白，组内紧贴。 */
.info-table .it-group + .it-group { border-top: 4px solid var(--line-soft); }

.wx-energy-list { display: grid; gap: 7px; }

.wx-energy-row {
  display: grid;
  grid-template-columns: 26px 1fr 52px;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-sm);
}

.wx-energy-name { color: var(--ink); }

.wx-energy-track {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--line-soft);
}

.wx-energy-track i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: currentColor;
}

.wx-energy-val {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- 信息表：标签 / 值 ---------- */
.info-table {
  margin: 0 var(--sp-4) var(--sp-3);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
}

.info-table .it-row {
  display: grid;
  grid-template-columns: 108px 1fr;
  border-bottom: 1px solid var(--line-soft);
}

.info-table .it-row:last-child { border-bottom: 0; }
.info-table .it-row:nth-child(even) { background: var(--card-soft); }

.info-table dt {
  padding: var(--sp-2) var(--sp-4);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.info-table dd {
  margin: 0;
  padding: var(--sp-2) var(--sp-4) var(--sp-2) 0;
  line-height: var(--lh-normal);
}

.info-table dd em {
  color: var(--gold);
  font-style: normal;
}

/* ---------- 神煞 ---------- */
.shensha-group { margin-bottom: var(--sp-4); }

.shensha-group > h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  color: var(--gold);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.shensha-group > h3 .count {
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
}

.shensha-line {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px dashed var(--line);
}

.shensha-line:last-child { border-bottom: 0; }

.shensha-line > b {
  padding-top: 2px;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
}

.shensha-line .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.shensha-row {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: var(--sp-3);
  margin: 9px 0;
}

.shensha-row b { font-weight: var(--fw-medium); }
.shensha-row span { color: var(--gold); }

/* 神煞胶囊：吉绿 凶红 中性金 特殊紫。此处是唯一定义处 */
.star-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}

.star-chip {
  min-width: 68px;
  padding: 4px 12px;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-pill);
  background: var(--gold-soft);
  color: var(--gold);
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  /* ⚠ 必须把 transform / box-shadow 列进过渡。
     原来只列了 border-color 与 background —— 于是这枚胶囊是全站
     **按下不缩、也不出现内阴影**的一类元素：.ios-press 写进去的
     transform 会被这条 transition 的「未列出属性即刻生效」瞬间落定。
     站长三次点名「排盘后点击神煞」要有明显反馈，这里就是那处。 */
  transition:
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease),
    transform 90ms var(--ease-out),
    box-shadow 90ms var(--ease-out);
}

.star-chip:hover { border-color: var(--gold); }

/* 点中的那枚弹一下（站长在口径里选定的 1.14）。
   ⚠ 1.14 比松手回弹的 1.03 大得多，是刻意的：普通的按钮反馈要在
   「看得见」与「不打扰」之间取平衡，而这枚胶囊是**用户此刻的落点** ——
   抽屉整个是从它身上长出来的，它自己必须弹得更明显，视线才接得上。
   用独立的 keyframes 而不是改 .ios-release：后者是全站共用的，
   把峰值调到 1.14 会让每个链接都蹦一下。 */
@keyframes star-bounce {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.star-chip.is-bouncing {
  /* ⚠ 放在 .ios-press 之后写，让 animation 在 transform 上赢过 transition ——
     否则按压的 transition 值会和这条动画在同一个属性上打架。
     ⚠ 关键帧必须**从 1 直接回到 1**，中间不能有低于 1 的回砸帧。
     第一版是 0%→1 / 38%→1.14 / 66%→.97 / 100%→1，走一遍是
     「放大 → 缩到比原样还小 → 再放大回原样」，读起来是**荡了两次**。
     站长 2026-09-27 反馈「按了按钮感觉页面一弹一弹的」，
     这条回砸帧就是被点名的那个「弹」。单峰曲线才是「弹一下就走」。 */
  animation: star-bounce 260ms var(--ease-ios) both;
}

.star-chip[data-nature="吉"] {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green);
}

.star-chip[data-nature="凶"] {
  border-color: var(--red);
  background: var(--red-soft);
  color: var(--red);
}

.star-chip[data-nature="特殊"] {
  border-color: var(--ss-te);
  background: #f7f4fb;
  color: var(--ss-te);
}

/* 「·存疑」后缀。
   2026-09-25：原先它是行内附加的，而带存疑的 29 个神煞恰好是名字最长的
   那批（天乙贵人／福星贵人／文昌贵人）。.star-chip 是 white-space: nowrap，
   行内后缀无法换行也无法收缩，直接把胶囊顶破——这就是站长看到的「排版错乱」。
   当时改成 display:block 让它另起一行。

   2026-09-28 站长要求「把神煞旁边的『存疑』删掉」，整条 ::after 规则随之移除。
   ⚠ 只删可见后缀，**data-trust="disputed" 属性保留** —— 神煞抽屉里那枚
     「查法存疑」标签（chart.js 按 s.trust === 'disputed' 判断）仍要靠它，
     而抽屉里是把版本分歧讲清楚的地方：那里有古文原文、白话释义与本站采用的口径，
     删掉那里等于把分歧藏起来。被要求删的是列表里那 26 处重复的两字后缀。 */

.star-chip.is-off {
  opacity: .46;
  text-decoration: line-through;
}

/* ---------- 专业细盘里的神煞列（PC 端排版错乱的根治处） ----------
   背景：站长反馈「PC 端神煞排版错乱」。根因是三层叠加，不是单纯的宽度不够——
     1. 下面这个 @media 把 .star-list 钉成 repeat(2, 1fr)：**固定两列**，
        与四柱单元格的实际宽度无关；
     2. 「·存疑」后缀给最长的神煞名又加了 3 个字（已改为换行，见上）；
     3. .chart-app 宽度是 min(880px, 100%)，**与屏幕宽度无关**，
        所以换更大的显示器表格也不会变宽——这才是问题只在「PC 端」被注意到的原因。

   实测量化（font-size 13.5px、padding 4px 12px，见 mobile.css 的窄屏覆盖）：
     · 关「胎命身」→ 四柱 td ≈ 194px → 两列每列 89px → 4 字名（80px）勉强放下，
       带「·存疑」（113px）必然溢出；
     · 开「胎命身」→ 四柱 td ≈ 140px → 两列每列 62px → **连 4 字名都放不下**。
   .star-chip 是 white-space: nowrap，文字不换行不收缩，于是顶出胶囊边框、
   与相邻列重叠，看上去就是「字跑出框、几列糊在一起」。

   修法要点：
     · 用 auto-fill + minmax 而不是固定列数 —— 窄 td（62px 那档）会自动降为
       **一列**，宽 td 保持两列。这是选 auto-fill 的核心原因，改回 repeat(2,…)
       会立刻复现原问题；
     · 不裁字：加 overflow:hidden + 省略号会把「德秀贵人」变成「德秀贵…」，
       神煞名是读数本身，不能截断；
     · 补 621–1099px 区间：该区间原先回落到带 min-width:68px 的 flex，
       同样会溢出，是原改动的漏网段。
   作用域：全程带 .pro-table 前缀。chart-detail.css 与 mobile.css 里另有
   .star-chip 定义，不加前缀会造出新的静默覆盖（本文件开头已警告过这类问题）。 */
@media (min-width: 621px) {
  .pro-table .star-list {
    display: grid;
    /* 88px = 4 字神煞名在 13.5px 下的实测宽度 + 两侧 8px 内边距的余量。
       低于这个值会换行折字，高于这个值则窄 td 里放不下、退回单列。 */
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
  }
  .pro-table .star-chip {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
  }
}

/* 1100px 以上：表格所在容器已是 880px 满宽，四柱列可稳定容纳两列，显式放开上限。 */
@media (min-width: 1100px) {
  .pro-table .star-list {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  }
}

/* ---------- 神煞总览面板 ---------- */
.shensha-panel {
  margin: 0 var(--sp-4) var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
}

.shensha-panel h3 {
  margin: 0 0 var(--sp-3);
  color: var(--gold);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}

.shensha-panel .panel-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.shensha-panel .panel-hint {
  margin: var(--sp-3) 0 0;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  line-height: 1.7;
}

/* ---------- 工具条 ---------- */
.chart-toolbar {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  overflow-x: auto;
}

.chart-toolbar button {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--gold);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--gold);
  font: inherit;
  font-size: var(--fs-sm);
  white-space: nowrap;
  cursor: pointer;
}

.star-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
}

.star-filter label { font-size: var(--fs-sm); }
.star-filter input { accent-color: var(--jade); }

/* ---------- 抽屉 ---------- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: rgba(12, 18, 15, .38);
  opacity: 0;
  transition: opacity 200ms var(--ease-in);
}

.drawer-backdrop.visible { opacity: 1; }
.drawer-open { overflow: hidden; }

.star-drawer {
  position: fixed;
  z-index: calc(var(--z-drawer) + 10);
  top: 0;
  right: 0;
  width: min(560px, 94vw);
  height: 100dvh;
  padding: var(--sp-9) var(--sp-6) var(--sp-7);
  overflow: auto;
  background: var(--card);
  box-shadow: -18px 0 50px rgba(0, 0, 0, .18);
  transform: translateX(105%);
  opacity: 0;
  transition: transform var(--dur) var(--ease-in), opacity var(--dur) var(--ease-in);
}

.star-drawer.open { transform: none; opacity: 1; }

.drawer-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-4);
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 32px;
  cursor: pointer;
}

.star-drawer .drawer-head {
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.star-drawer .drawer-head h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  color: var(--gold);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
}

.star-drawer .drawer-head .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.star-drawer dt {
  margin-top: var(--sp-5);
  color: var(--ink-2);
}

.star-drawer dd {
  margin: 6px 0;
  line-height: 1.75;
}

/* ---------- 标签 ---------- */
.tag {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
}

.tag[data-nature="吉"] { background: var(--green-soft); color: var(--green); }
.tag[data-nature="凶"] { background: var(--red-soft); color: var(--red); }
.tag[data-nature="中性"] { background: var(--gold-soft); color: var(--gold); }
.tag[data-nature="特殊"] { background: #f2ecf8; color: var(--ss-te); }
.tag.tag-plain { background: var(--paper-2); color: var(--ink-2); }

/* ---------- 大白话解释（抽屉置顶块）----------
   与下方「古文 / 白话对照」刻意区别开：这块是给普通读者的入口，
   用左侧金色竖线 + 浅色底，视觉上先于古籍考据内容。 */
.plain-mean {
  margin: var(--sp-4) 0 var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--gold-soft);
}

.plain-mean .pm-label {
  display: block;
  margin-bottom: 7px;
  color: var(--gold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-normal);
}

.plain-mean .pm-body {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.9;
}

/* ---------- 古文 / 白话 对照 ---------- */
.text-compare {
  margin: var(--sp-4) 0;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-md);
}

.text-compare .tc-half { padding: var(--sp-3) var(--sp-4); }

.text-compare .tc-half + .tc-half {
  border-top: 1px dashed var(--gold-line);
  background: var(--gold-soft);
}

.text-compare .tc-label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-normal);
}

.text-compare .tc-ancient {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-base);
  line-height: 1.95;
  letter-spacing: .04em;
}

.text-compare .tc-plain {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.9;
}

/* ---------- 抽屉内的通用小节 ---------- */
.drawer-section { margin: var(--sp-4) 0; }

.drawer-section dt {
  margin-bottom: 6px;
  color: var(--gold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-normal);
}

.drawer-section dd {
  margin: 0;
  line-height: 1.85;
}

.drawer-section .verse {
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--gold-soft);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-base);
  line-height: 1.9;
}

.drawer-section .note-box {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

.drawer-section .variant-box {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--gold-soft);
  color: var(--gold);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

/* ---------- 通用横向卡片流 ---------- */
.horizontal-cards {
  display: flex;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  overflow-x: auto;
  scrollbar-color: var(--gold) transparent;
}

.cycle-card {
  flex: 0 0 100px;
  padding: var(--sp-3) 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  text-align: center;
  cursor: pointer;
}

.cycle-card.active {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--gold);
}

.cycle-card strong {
  display: block;
  font-size: var(--fs-xl);
}

.cycle-card small {
  display: block;
  color: inherit;
  opacity: .72;
}

.years .cycle-card { flex-basis: 82px; }
.months .cycle-card { flex-basis: 78px; }

.dayun-cards .cycle-card.active strong { color: var(--gold); }

/* ---------- 操作区 ---------- */
.result-actions {
  display: flex;
  gap: var(--sp-3);
  padding: 0 var(--sp-4) var(--sp-6);
}

.result-actions > * { flex: 1; }

.loading {
  opacity: .55;
  pointer-events: none;
}

/* ---------- 起运说明 ---------- */
.yun-start {
  margin: 0 0 var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 620px) {
  /* 站点导航在排盘页让位给页内页签，避免两行吸顶 */
  .site-header { display: none; }
  /* ⚠ 光隐藏 .site-header 不够：外面那层 #site-header 挂着
     site.css 的 `min-height: var(--header-h)`（手机端 64px），
     里面空了照样占着 64px，于是排盘页顶上出现一条什么都没有的留白，
     把 entry-card 一直推到 y=64。必须连同外壳一起塌掉。
     （≤560px 时 .chart-brand 也被隐藏，那一段就变成纯白板，
       这条更是必需——否则顶上 64px 全是空。）
     ⚠ 不能直接 min-height:0 —— 那样卡片会顶到屏幕最上沿，
       贴着状态栏，读起来像内容被切掉了。改成把小屏安全区留出来：
       外壳收起 min-height，改用 padding 顶开 12px。 */
  #site-header:has(.site-header) { min-height: 0; padding-top: 12px; }

  .chart-app { margin-top: 0; }
  /* 外壳顶开的 12px 已经让出安全区，页内标题不必再自己加一大截。
     保留 --sp-3 让「林谦 · 传统文化工具」这行小字不贴边。 */
  .chart-brand { padding-top: var(--sp-3); }
  .chart-brand h1 { font-size: var(--fs-2xl); }

  .entry-card {
    margin: 0 var(--sp-3);
    padding: var(--sp-5);
  }

  .entry-grid { grid-template-columns: 1fr; }
  .entry-field.full,
  .calculate { grid-column: auto; }

  .result-tabs { top: 0; }

  .result-tabs button {
    padding: var(--sp-3) 2px;
    font-size: var(--fs-sm);
    letter-spacing: 0;
  }

  .result-view { padding: var(--sp-4) 10px; }

  .info-row {
    grid-template-columns: 1fr;
    padding: var(--sp-3) var(--sp-4);
  }

  .professional-grid { grid-template-columns: 1fr 1fr; }
  .result-actions { flex-direction: column; }

  .chart-owner { padding: var(--sp-4) var(--sp-3) 10px; }
  .chart-owner h2 { font-size: var(--fs-xl); }

  .pillar-overview {
    gap: 7px;
    padding: 0 var(--sp-3) var(--sp-4);
  }

  .pillar-card { padding: var(--sp-3) 4px 10px; }
  .pillar-card .pc-gz { font-size: var(--fs-ganzhi-sm); }
  .pillar-card .pc-label { font-size: 11px; letter-spacing: var(--ls-tight); }
  .pillar-card .pc-shishen { font-size: 11px; }

  .wuxing-bar,
  .info-table,
  .jieqi-card,
  .shensha-panel { margin-left: var(--sp-3); margin-right: var(--sp-3); }

  .info-table .it-row { grid-template-columns: 84px 1fr; }
  .info-table dt { padding: 10px; font-size: 12.5px; }
  .info-table dd { padding: 10px var(--sp-3) 10px 0; font-size: var(--fs-base); }

  .shensha-line { grid-template-columns: 76px 1fr; gap: var(--sp-2); }

  .star-drawer {
    width: 100vw;
    padding: var(--sp-8) var(--sp-4) var(--sp-6);
  }

  .text-compare .tc-half { padding: 11px var(--sp-3); }
}

/* ---------- 打印 ---------- */
@media print {
  .result-tabs,
  .chart-toolbar,
  .shensha-panel,
  .result-actions,
  .star-drawer,
  .drawer-backdrop { display: none; }
}

/* ===========================================================
   滚动式日期 / 时间选择器（js/picker.js）
   -----------------------------------------------------------
   自写滚轮，不引第三方库。每列 5 项可见、当前项居中并高亮。
   --picker-item-h 必须与 picker.js 里的 ITEM_H 常量一致，
   否则吸附位置会与视觉中心错开。
   =========================================================== */
.picker {
  --picker-item-h: 44px;
  position: relative;
  display: flex;
  gap: 2px;
  padding: var(--sp-2) 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  overflow: hidden;
}

.picker-col {
  flex: 1 1 0;
  min-width: 0;
  height: calc(var(--picker-item-h) * 5);
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  /* 滚到头不把整页带着一起滚（滚动链），iOS 闹钟同款手感 */
  overscroll-behavior: contain;
  /* 2026-10-15 修“出生地滚动时左右摇摆”：长地名（新疆维吾尔自治区）比列宽，overflow-y:auto 会连带
     让该列可横向滚动，手指上下滑稍偏就整列左右晃。禁止横向溢出并只允许纵向手势。 */
  overflow-x: hidden;
  touch-action: pan-y;
  scrollbar-width: none;
  text-align: center;
  /* 上下留白 = 2 项高，首尾项才能滚到正中（否则永远差一格） */
  padding-block: calc(var(--picker-item-h) * 2);
  outline: none;
}

.picker-col::-webkit-scrollbar { display: none; }

.picker-col:focus-visible {
  box-shadow: inset 0 0 0 2px var(--gold);
  border-radius: var(--r-sm);
}

.picker-item {
  height: var(--picker-item-h);
  line-height: var(--picker-item-h);
  scroll-snap-align: center;
  color: var(--ink-3);
  font-size: var(--fs-base);
  cursor: pointer;
  /* 2026-10-15：去掉 font-size 过渡（字号变化会触发重排）。滚筒变换由 picker.js 每帧写 transform。 */
  transition: color 120ms linear;
  white-space: nowrap;
  /* 吸附项本身尺寸、位置恒定（见 picker.js：滚筒变换只写在 .picker-t 上） */
  contain: layout style;
  -webkit-user-select: none;
  user-select: none;
}

.picker-item.is-active {
  color: var(--ink);
  /* 不改 font-weight：字重变化会触发排版，安卓 Chrome 排版后会重新吸附（滚动中“一卡一顿”）。
     用文字阴影模拟加粗，只重绘不排版。 */
  text-shadow: 0 0 .5px currentColor, 0 0 .5px currentColor;
}
/* 滚筒变换层：只做 transform / opacity，不影响吸附项的盒子（will-change 由 picker.js 只给可见的几项开） */
.picker-t {
  display: block;
  height: 100%;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 中间高亮条：纯装饰，不挡点击 */
.picker-band {
  position: absolute;
  left: 6px; right: 6px;
  top: 50%;
  height: var(--picker-item-h);
  transform: translateY(-50%);
  border-block: 1px solid var(--gold);
  background: var(--gold-soft);
  opacity: .45;
  pointer-events: none;
  border-radius: var(--r-sm);
}

/* 滚动音效开关（picker.js 自动挂在选择器下方） */
.picker-sound {
  display: block;
  margin: var(--sp-3) auto 0;
  min-height: 32px;
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--card);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}
.picker-sound[aria-pressed="true"] { color: var(--jade); border-color: var(--jade-line); background: var(--jade-soft); }

/* ---------- 五列 / 三列时的列宽分配 ----------
   2026-09-25：日期与时间合并为一个五列 picker（年/月/日/时/分），
   出生地是另一个三列 picker（省/市/区县）。

   ⚠ 列宽原先是用 `[aria-label="出生时辰"]` 这种**无障碍属性当样式钩子**
     来调的。合并后列数与列名都变了，再靠文案选列会在改文案时静默改变布局，
     故这里改用 data-cols 属性显式声明列数。

   五列的宽度需求不同：
     · 年 = "1997 年" 最长，给 1.35 份
     · 月 = "12 月"、日 = "31 日"、时 = "08 时"、分 = "05 分" 均为 4 字符，各 1 份
   合计 5.35 份，1440px 桌面下薄弹层宽度足够；320px 手机下最窄列仍需实测。 */
.picker[data-cols="5"] .picker-col:nth-child(1) { flex: 1.35 1 0; }
.picker[data-cols="5"] .picker-col:nth-child(2),
.picker[data-cols="5"] .picker-col:nth-child(3),
.picker[data-cols="5"] .picker-col:nth-child(4),
.picker[data-cols="5"] .picker-col:nth-child(5) { flex: 1 1 0; }

/* 三列（省/市/区县）：名字长度差异大，区县名最长（"克孜勒苏柯尔克孜"这类），
   故均分即可，靠 .picker-item 的省略号兜底。 */
.picker[data-cols="3"] .picker-col { flex: 1 1 0; }
/* 区县名可能长达 8 个字，滚轮里放不下就是放不下——换成小一号字仍是溢出，
   与其裁掉字（地名不可截断），不如允许它横向不收缩并给出提示。 */
.picker[data-cols="3"] .picker-col:nth-child(3) .picker-item {
  font-size: var(--fs-sm);
  letter-spacing: -0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 省、市两列同样收字号并兜底省略号：最长省名 8 字在 320–390px 手机上也能放进列宽，不再撑出横向溢出 */
.picker[data-cols="3"] .picker-col:nth-child(-n+2) .picker-item {
  font-size: var(--fs-sm);
  letter-spacing: -0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 窄屏：项高略减，避免 5 项把表单撑得太高 */
@media (max-width: 560px) {
  .chart-brand { display: none; }
  .entry-card { margin: 0 8px; padding: 14px 12px; border-radius: 2px 20px 2px 20px; }
  .calendar-tabs { margin-bottom: var(--sp-4); }
  .calendar-tab { min-height: 46px; padding: 8px 3px; font-size: 14px; }
  .entry-grid { gap: 12px; }
  .summary-control { min-height: 50px; }

  /* ---------- 手机端弹层：底部卡片（原为整屏铺满） ----------
     2026-09-25 站长要求手机端「单独弹出一个卡片进行选择」。原先这里是
     `padding:0; place-items:stretch` + `min-height:100dvh; border-radius:0`，
     即一整屏白页，不像卡片。

     另：本块原先还有一条 `.picker { --picker-item-h: 32px }`，但它被下面
     同一块里的 44px 覆盖，是条**从未生效的死规则**，本次一并删除。
     44px 是有意的——它同时满足移动端最小点击区。 */
  .picker-overlay { padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); place-items: end center; align-items: flex-end; }
  .picker-sheet {
    width: 100%;
    max-height: 86dvh;
    padding: 4px 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
  }
  /* 卡片里不需要 12vh 的空白——那是整屏布局时代的留白 */
  .picker-sheet > header { margin-bottom: var(--sp-4); }
  .picker-pane { width: 100%; }
  .picker { --picker-item-h: 44px; }
  .picker-item { font-size: 17px; }
  .unknown-time-option { min-height: 52px; }
  /* 反查区是页面内嵌区（不是弹层），底部留出安全区，
     与 .picker-sheet 的处理一致 —— 否则横屏/带 Home 条的机型会压到最后一排按钮。 */
  .pillar-lookup { padding: 12px 8px calc(12px + env(safe-area-inset-bottom)); }
  .pillar-board { gap: 6px; }
  /* 46px 仍满足 44px 最小点击区，且四列在 320px 下不重叠 */
  .pillar-slot { width: 46px; height: 46px; font-size: var(--fs-md); }
  /* 窄屏候选面板的列数按「每格 ≥44px」反推，**减列**而不是给格子加 min-width
     ——后者会撑破栅格，在 320px 造成横向溢出、在 768px 把面板挤窄（已踩过）。
     实测容器 260px 时：
       天干 5 列 → (260−4×4)/5 = 48.8px ✓
       地支 6 列 → (260−5×4)/6 = 40.0px ★ 故降为 4 列 → 62px ✓
     天干保持两行五列（口诀就是五列，改了反而难认）。 */
  .candidate-grid.gan-panel { gap: 4px; max-width: none; }
  .candidate-grid.zhi-panel { grid-template-columns: repeat(4, 1fr); gap: 4px; min-width: 0; }
  .candidate-grid.pillar-panel { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .candidate-chip { min-height: 44px; font-size: var(--fs-md); padding: 4px 2px; }
  .pillar-actions { flex-wrap: wrap; }
  .candidate-list { grid-template-columns: 1fr; }
}

/* 只在所选农历年月确有闰月时显示的单一确认项。 */
.leap-option {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-base);
  cursor: pointer;
}

.leap-option.active {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--ink);
  font-weight: var(--fw-medium);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.leap-option:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ==========================================================================
   V3：基础排盘接入智能古籍参考 + 整体降低拥挤度
   ========================================================================== */

/* 古籍参考原为细盘的 .detail-card，移到基础排盘后改用 .basic-module，
   两处卡片的 padding / 标题字号体系不同，这里补齐模块态样式，
   避免出现「搬过来但没穿对衣服」的违和感。 */
.classics-module { margin-top: var(--sp-4); }

.classics-module > h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
}

.classics-module > .method-note { margin-bottom: var(--sp-3); }

.classics-module .cls-switch { margin-bottom: var(--sp-3); }

/* ---------- 降低拥挤度：神煞胶囊与分组 ---------- */
/* 站长反馈「字数堆积太多、神煞很挤」。胶囊本身信息密度必须保留，
   可压缩的是外围留白：组标题字号、组间距、胶囊内边距与行距。 */
.basic-module .shensha-group > h3 {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-base);
  letter-spacing: .2px;
}

.basic-module .shensha-group { margin-bottom: var(--sp-3); }

/* 神煞开关面板：13 个开关排成更紧凑的网格，减少纵向占用 */
.shensha-panel .panel-row { padding: 6px 0; }

@media (min-width: 621px) {
  /* 宽屏下神煞胶囊两列排布，比单列堆叠短一半 */
  .basic-module .shensha-group .star-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 7px;
  }
  .basic-module .shensha-group .star-chip {
    width: 100%;
    min-width: 0;
    text-align: center;
  }
}

/* ---------- 降低拥挤度：基本信息页标签表 ---------- */
/* 页面上半部分资料卡的行高略微放松，堆叠感主要来自行距过紧而非字号。 */
.info-table .it-row dt,
.info-table .it-row dd { padding: 9px 14px; }