/* ═══════════════════════════════════════════════════════════════════════
   人生探微 · 组件层
   ─────────────────────────────────────────────────────────────────────
   规则（贯穿全文件）：
   · 只动 transform / opacity 做过渡，绝不用 transition: all
   · 按下反馈固定 scale(.96)——低于 .95 会显得夸张
   · 悬停只提亮描边，不上浮、不发光（原站 .card 早就定下这条，这里贯彻全站）
   · 热区不小于 --hit（44px）
   · 圆角同心：外圆角 = 内圆角 + 内边距
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 按钮 ═══════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--hit);
  padding: 0 var(--s-5);
  border: 1px solid var(--cinnabar);
  border-radius: var(--r-2);
  background: var(--cinnabar);
  color: var(--ink-invert);
  font: 500 var(--t-md)/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--dur-state) ease, transform var(--dur-tap) ease,
              background-color var(--dur-state) ease, border-color var(--dur-state) ease;
}
.btn:hover:not(:disabled) { opacity: .88; }
.btn:active:not(:disabled) { transform: var(--press); }
/* 禁用态不用 opacity 压——那会把文字一起压到 1.2:1，读不出来。
   改成明确的浅底 + 辅助文字色：既表达「不可用」，又保持可读。 */
.btn:disabled {
  cursor: not-allowed;
  opacity: 1;
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink-faint);
}

.btn-block { width: 100%; }

/* 次按钮：描边，不填充 */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-ghost:hover:not(:disabled) {
  opacity: 1;
  border-color: var(--ink);
  background: rgba(31,27,22,.04);
}

/* 文字按钮：用于低频、次要的操作 */
.btn-text {
  min-height: var(--hit);
  padding: 0 var(--s-2);
  border: 0;
  background: none;
  color: var(--cinnabar);
  cursor: pointer;
  font: 400 var(--t-sm)/1 var(--font-sans);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-text:hover { color: var(--cinnabar-deep); }

/* ═══ 分段控件 ═══════════════════════════════════════════════════════
   每个按钮自带边框，不用外层 overflow:hidden 包着——那样会把里面
   按钮的焦点环裁掉，键盘用户就看不见焦点了。 */
.seg { display: flex; width: 100%; }
.seg > button {
  flex: 1;
  min-height: var(--hit);
  border: 1px solid var(--line-2);
  background: none;
  color: var(--ink-mid);
  font: 400 var(--t-sm)/1 var(--font-sans);
  cursor: pointer;
  transition: background-color var(--dur-state) ease, color var(--dur-state) ease,
              border-color var(--dur-state) ease, transform var(--dur-tap) ease;
}
.seg > button + button { border-left: 0; }
.seg > button:first-child { border-radius: var(--r-2) 0 0 var(--r-2); }
.seg > button:last-child  { border-radius: 0 var(--r-2) var(--r-2) 0; }
.seg > button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ink-invert);
}
.seg > button:active { transform: var(--press); }

/* ═══ 表单 ═══════════════════════════════════════════════════════════ */

.field { margin-bottom: var(--s-5); }
.field:last-child { margin-bottom: 0; }
.field-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.field-head > label { font-size: var(--t-sm); color: var(--ink-mid); }
.field-head .hint { margin-left: auto; font-size: var(--t-xs); color: var(--ink-faint); }

/* 必填标记用朱砂印，跟导航的当前页标记同一套语言 */
.field-head .req {
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  background: var(--cinnabar);
  color: var(--ink-invert);
  border-radius: 3px;
  transform: rotate(-4deg);
  font-family: var(--font-serif);
  font-size: 10px;
  line-height: 1;
}

.input, input[type="text"], input[type="password"], input[type="search"] {
  width: 100%;
  min-height: 50px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-md)/1.4 var(--font-sans);
  transition: border-color var(--dur-state) ease, box-shadow var(--dur-state) ease;
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder { color: var(--ink-faint); }
.input:focus,
input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--cinnabar-soft);
}

/* 原生下拉必须显式给底色，否则 Windows 深色模式下会变黑读不出来 */
.select, select {
  width: 100%;
  min-height: 50px;
  padding: var(--s-3) calc(var(--s-7)) var(--s-3) var(--s-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background-color: var(--paper);
  color: var(--ink);
  font: 400 var(--t-md)/1.4 var(--font-sans);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0h10L5 6z' fill='%23574E42'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
}
.select:focus, select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--cinnabar-soft);
}

/* ═══ 卡片 ═══════════════════════════════════════════════════════════
   层级靠表面明度差，不靠阴影堆叠。悬停只提亮描边。 */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-5) var(--s-4);
  transition: border-color var(--dur-state) ease;
}
@media (min-width: 900px) {
  .card { padding: var(--s-7) var(--s-6); }
}
.card-link { display: block; text-decoration: none; }
.card-link:hover { border-color: var(--line-2); }

/* ═══ 分组列表 ═══════════════════════════════════════════════════════
   设置项、订单行这类。整组一个面板，行与行之间用发丝线。 */
.rows {
  margin: 0 var(--s-4) var(--s-4);
  padding: var(--s-1) 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
}
.row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 54px;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  color: inherit;
  font-size: var(--t-sm);
  text-decoration: none;
}
.row:last-child { border-bottom: 0; }
.row .k { color: var(--ink); }
.row .v { margin-left: auto; color: var(--ink-mid); font-size: var(--t-xs); text-align: right; }
.row .v.hot { color: var(--cinnabar); }
a.row:hover { background: rgba(31,27,22,.03); }

/* ★ button.row 要显式撑满 ★
   <a> / <div> 天生是块级，铺满 .rows；<button> 不是——按内容收缩，
   于是「改名字 / 删除」这类面板里只占中间一小块，还把按钮自带的
   3D 描边露出来。全站三处 button.row（我的-报告操作、对话-会话操作、
   顶栏菜单）本来各写各的内联 width:100%，这里一次说清。 */
button.row {
  width: 100%;
  background: none; border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer; font: inherit; text-align: left;
}
button.row:hover { background: rgba(31,27,22,.03); }

.sect-title {
  margin: var(--s-6) var(--s-4) var(--s-3);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  color: var(--ink-faint);
}

/* ═══ 顶栏 ═══════════════════════════════════════════════════════════ */

.appbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 56px;
  padding: 0 var(--s-4);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .appbar { background: var(--paper); }   /* 旧浏览器不支持 color-mix 时的兜底 */
}
.appbar .brand {
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: .05em;
  text-decoration: none;
  flex: 0 0 auto;
}
.appbar .spacer { margin-left: auto; }

/* 更多：分组面板入口 */
.icon-btn {
  display: grid;
  place-items: center;
  width: var(--hit);
  height: var(--hit);
  border: 0;
  border-radius: var(--r-2);
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur-state) ease;
}
.icon-btn:hover { background: rgba(31,27,22,.06); }
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* ═══ 底部标签栏 ═════════════════════════════════════════════════════
   手机上唯一的主导航。标签 12px（原站 10.5px，低于可读线）。 */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-tabbar);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
/* 底栏每一项：图标下面一层药丸底。
   ★ 按压反馈只作用在药丸上，不是整颗按钮 ★
     整颗 scale(.9) 会把图标和文字一起缩，看着别扭，配上弹簧还会晃。
     现代底栏的做法是「图标底下那块背景涨缩」，手指按哪块动哪块。 */
.tabbar > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--hit);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font: 400 var(--t-xs)/1 var(--font-sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;   /* 关掉安卓默认的灰色方块 */
  transition: color var(--dur-state) ease;
}
.tabbar > button .ic {
  display: grid;
  place-items: center;
  width: 54px;
  height: 30px;
  border-radius: var(--r-pill);
  background: transparent;
  transition: background-color var(--dur-state) ease,
              transform var(--dur-tap) var(--ease-spring);
}
.tabbar > button .ic svg { width: 22px; height: 22px; fill: currentColor; }

/* 按下：立刻有底色 + 缩一下。用 .08s 的快出，手感"实" */
.tabbar > button:active .ic {
  background: var(--line-2);
  transform: scale(.86);
  transition-duration: .08s;
  transition-timing-function: ease-out;
}

/* 当前项：朱砂淡底药丸 + 图标转朱砂 */
.tabbar > button[aria-current] { color: var(--ink); }
.tabbar > button[aria-current] .ic {
  background: var(--cinnabar-soft);
  color: var(--cinnabar);
  animation: tab-pill-in .4s var(--ease-spring) both;
}
@keyframes tab-pill-in {
  0%   { transform: scale(.6); opacity: .4; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

@media (min-width: 900px) { .tabbar { display: none; } }

/* ═══ 遮罩 / 底部面板 / 弹窗 ═════════════════════════════════════════ */

.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: rgba(31,27,22,.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-view) ease;
}
.scrim.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sheet);
  max-height: 82dvh;
  overflow-y: auto;
  overscroll-behavior: contain;      /* 面板内滚到底不带动页面 */
  padding: var(--s-2) var(--s-4) calc(var(--s-6) + env(safe-area-inset-bottom));
  background: var(--paper);
  border-radius: var(--r-3) var(--r-3) 0 0;
  transform: translateY(102%);
  transition: transform var(--dur-view) var(--ease-out);
}
.sheet.open { transform: none; }
.sheet-grab {
  width: 34px; height: 4px;
  margin: var(--s-2) auto var(--s-4);
  border-radius: var(--r-pill);
  background: var(--line-2);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--s-4);
  pointer-events: none;
}
.modal-panel {
  width: 100%;
  max-width: 480px;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-6) var(--s-5);
  background: var(--surface-hi);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  opacity: 0;
  transform: scale(.97);
  transition: opacity var(--dur-view) ease, transform var(--dur-view) var(--ease-out);
}
.modal.open { pointer-events: auto; }
.modal.open .modal-panel { opacity: 1; transform: none; }

/* ═══ 提示条 ═════════════════════════════════════════════════════════ */

.toast-wrap {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s-4));
  z-index: var(--z-toast);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: calc(100% - var(--s-8));
  max-width: 380px;
  pointer-events: none;
}
@media (min-width: 900px) { .toast-wrap { bottom: var(--s-6); } }
.toast {
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: var(--ink-invert);
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  line-height: 1.6;
  animation: toast-in var(--dur-view) var(--ease-out);
}
.toast.err  { background: var(--err); }
.toast.ok   { background: var(--ok); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ═══ 加载 / 空 / 错误 三态 ═══════════════════════════════════════════
   原站只有转圈，没有骨架屏也没有空状态。这三态是"做完"与"没做完"的分界。 */

/* 骨架屏：形状跟真实内容一致，避免加载完成后整页跳动 */
.skeleton {
  background: linear-gradient(90deg,
    rgba(31,27,22,.06) 25%,
    rgba(31,27,22,.10) 37%,
    rgba(31,27,22,.06) 63%);
  background-size: 400% 100%;
  border-radius: var(--r-1);
  animation: shimmer 1.4s ease-in-out infinite;
  color: transparent !important;
}
@keyframes shimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--line-2);
  border-top-color: var(--cinnabar);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-line {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  color: var(--ink-mid);
  font-size: var(--t-sm);
}

/* 空状态 = 邀请行动，不是一句"暂无数据" */
.empty {
  padding: var(--s-9) var(--s-5);
  text-align: center;
  color: var(--ink-mid);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-3);
}
.empty .empty-title { font-size: var(--t-md); color: var(--ink); margin-bottom: var(--s-2); }
.empty .empty-hint  { font-size: var(--t-sm); line-height: 1.9; }
.empty .btn { margin-top: var(--s-5); }

.inline-err {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--cinnabar-line);
  border-radius: var(--r-2);
  background: var(--cinnabar-soft);
  color: var(--cinnabar-deep);
  font-size: var(--t-sm);
  line-height: 1.7;
}

/* ═══ 盘面：四柱 + 五行 ═════════════════════════════════════════════ */

.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
}
.pillar { text-align: center; }
.pillar .pname {
  font-size: var(--t-xs);
  color: var(--ink-faint);
  letter-spacing: .08em;
  margin-bottom: var(--s-2);
}
/* 干支字用衬线，且给足行高——这是全站最有识别度的字符 */
.pillar .glyph {
  display: block;
  padding: var(--s-1) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-serif);
  font-size: var(--t-xl);
  line-height: 1.25;
}
.pillar .glyph + .glyph { border-top: 0; }
.pillar .god    { font-size: var(--t-xs); color: var(--ink-mid); margin-top: var(--s-2); min-height: 1.35em; }
.pillar .nayin  { font-size: var(--t-xs); color: var(--ink-faint); }

.wx-row {
  display: grid;
  grid-template-columns: 1.4em 1fr 2em;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-1) 0;
  font-size: var(--t-sm);
}
.wx-name { font-family: var(--font-serif); }
.wx-bar  { height: 5px; background: var(--line); border-radius: var(--r-1); overflow: hidden; }
/* 用 scaleX 而不是 width——scale 走合成层，不会触发重排 */
.wx-bar > i {
  display: block;
  height: 100%;
  border-radius: var(--r-1);
  transform-origin: left center;
  transition: transform var(--dur-view) var(--ease-out);
}
.wx-num { text-align: right; font-size: var(--t-xs); color: var(--ink-mid); }

/* ═══ 朱砂印：全站唯一的签名元素 ═════════════════════════════════════
   只出现在三处——当前导航、必填标记、盘成盖章。
   聚在一处才有辨识度，到处用就变成噪音。 */
.seal {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  background: var(--cinnabar);
  color: var(--ink-invert);
  border-radius: 3px;
  transform: rotate(-4deg);
  font-family: var(--font-serif);
  font-size: 11px;
  line-height: 1;
}
.stamp {
  position: absolute;
  top: -12px; right: var(--s-4);
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: var(--cinnabar);
  color: var(--ink-invert);
  border: 2px solid var(--paper);
  border-radius: var(--r-2);
  transform: rotate(-6deg);
  font-family: var(--font-serif);
  font-size: var(--t-md);
  font-weight: 600;
}


/* ═══ 出生日期输入件 ═══════════════════════════════════════════════════
   年 / 月 / 日 三个分开的格子。分开是为了「一眼看得出能敲」——
   合成一个框的话，用户会以为那是展示框，转头去找日历翻。
   敲满自动跳下一格，退格回上一格。实现见 assets/datefield.js。 */
.dfield {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: var(--s-2);
}
.dfield-box {
  position: relative;
  display: block;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--paper);
  transition: border-color var(--dur-state) ease, box-shadow var(--dur-state) ease;
  cursor: text;
}
/* 焦点状态放在外框上，而不是输入框自己——这样「年」字也在高亮范围内 */
.dfield-box:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--cinnabar-soft);
}
.dfield-box:has(.is-bad) { border-color: var(--err); }

.dfield-in {
  width: 100%;
  border: 0;
  background: none;
  outline: none;                       /* 焦点环在外框上，这里不要重复 */
  padding: 15px 30px 15px 14px;
  /* ★ 必须 ≥16px ★ iOS 上输入框小于 16px，聚焦时会把整页放大 */
  font: 400 16px/1.2 var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: var(--ink);
  border-radius: inherit;
}
.dfield-in::placeholder { color: var(--ink-faint); letter-spacing: .04em; }
.dfield-in.is-bad { color: var(--err); }

.dfield-unit {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--t-xs);
  color: var(--ink-faint);
  pointer-events: none;                /* 点「年」字也要能聚焦到输入框 */
}
.dfield-box:focus-within .dfield-unit { color: var(--ink-mid); }

.dfield-hint {
  margin-top: 8px;
  min-height: 1.4em;
  font-size: var(--t-xs);
  color: var(--ink-faint);
  transition: color var(--dur-state) ease;
}
.dfield-hint.ok  { color: var(--ink-mid); }
.dfield-hint.bad { color: var(--err); }


/* ═══ 盘面（免费部分）═════════════════════════════════════════════════
   旧站的免费盘有七个区块：四柱、五行分布、格局与旺衰、盘面细节、
   大运、流年、真太阳时提示。这里按同样的完整度渲染。
   实现见 assets/chart.js —— 只渲染盘面数据，不渲染付费报告的叙事钩子。 */
.csec { margin-bottom: var(--s-5); }
.csec:last-child { margin-bottom: 0; }
.csec-t {
  font-size: var(--t-xs); font-weight: 400;
  letter-spacing: .16em; color: var(--ink-faint);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}

/* ── 四柱表 ── */
/* table-layout:fixed 是必需的：神煞那行内容长（「天乙贵人」之类），
   自动布局会把四列撑破，手机上时柱直接被切掉。固定布局 + 允许换行。 */
.ptable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ptable col.c-label { width: 3.2em; }
.ptable th, .ptable td {
  text-align: center; padding: var(--s-2) 2px;
  font-size: var(--t-sm); vertical-align: middle;
}
.ptable thead th {
  font-size: var(--t-xs); font-weight: 400; color: var(--ink-faint);
  padding-bottom: var(--s-1);
}
.ptable tbody th {
  text-align: left; font-weight: 400; font-size: var(--t-xs);
  color: var(--ink-faint); padding-right: var(--s-2);
}
/* 长内容换行，不撑破列 */
.ptable td { word-break: break-word; line-height: 1.5; }
.ptable .wxel { font-size: var(--t-xs); color: var(--ink-mid); }
.ptable tbody tr + tr td,
.ptable tbody tr + tr th { border-top: 1px solid var(--line); }
/* 干支是盘面的主角：衬线、加大、给足行高 */
.ptable .pglyph td { padding: var(--s-2) 2px; }
.ptable .pglyph .g {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--t-xl);
  line-height: 1.3;
}
.wxdot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 2px; margin-right: 4px; vertical-align: middle;
}

/* ── 五行分布 ── */
.wxlist { padding-top: var(--s-1); }
.wx-row {
  display: grid; grid-template-columns: 1.6em 1fr auto;
  gap: var(--s-3); align-items: center; padding: var(--s-1) 0;
  font-size: var(--t-sm);
}
.wx-num { font-size: var(--t-xs); color: var(--ink-mid); text-align: right; white-space: nowrap; }

/* ── 定义列表（格局/旺衰、盘面细节）── */
.dl { margin: 0; }
.dl-row {
  display: flex; gap: var(--s-3); align-items: baseline;
  padding: var(--s-2) 0;
  font-size: var(--t-sm);
  border-bottom: 1px solid var(--line);
}
.dl-row:last-child { border-bottom: 0; }
.dl-row dt { flex: 0 0 4.6em; color: var(--ink-faint); font-size: var(--t-xs); }
.dl-row dd { margin: 0; flex: 1; min-width: 0; word-break: break-word; }

/* ── 大运 ── */
.luck-head { font-size: var(--t-sm); color: var(--ink-mid); margin-bottom: var(--s-3); }
.luck-head b { color: var(--ink); font-weight: 600; }
.luck-scroll {
  display: flex; gap: var(--s-2); overflow-x: auto;
  padding-bottom: var(--s-2);
  scrollbar-width: none; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.luck-scroll::-webkit-scrollbar { display: none; }
.luck-cell {
  flex: 0 0 auto; scroll-snap-align: start;
  min-width: 68px; padding: var(--s-2) var(--s-2);
  border: 1px solid var(--line); border-radius: var(--r-1);
  background: var(--surface); text-align: center;
}
/* 当前所处的这步大运标出来——用户最想知道"我现在在哪一步" */
.luck-cell.on {
  border-color: var(--cinnabar); background: var(--cinnabar-soft);
  box-shadow: 0 3px 10px rgba(142,36,28,.14);
}
.luck-cell .lgz {
  font-family: var(--font-serif); font-size: var(--t-md); line-height: 1.3;
}
.luck-cell.on .lgz { color: var(--cinnabar-deep); }
.luck-cell .lage { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 2px; }
.luck-cell .lgod { font-size: var(--t-xs); color: var(--ink-mid); margin-top: 1px; }
.luck-hint { margin-top: var(--s-1); font-size: var(--t-xs); color: var(--ink-faint); }

/* ── 流年 ── */
.ln-list { display: grid; gap: var(--s-2); }
.ln-row {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-1);
  background: var(--surface); font-size: var(--t-sm);
}
.ln-y { color: var(--ink-faint); font-size: var(--t-xs); }
.ln-gz { font-family: var(--font-serif); font-size: var(--t-md); }
.ln-god { margin-left: auto; font-size: var(--t-xs); color: var(--ink-mid); }


/* ═══ 弹窗右上角的关闭叉 ═══════════════════════════════════════════════
   ★ 必须有 ★
     之前弹窗只能靠点遮罩或按 Esc 关。手机上遮罩被面板占了大半，
     很容易点到面板上而不是遮罩——结果就是「弹出来退不出去」。
     叉号是唯一不会误解的出口。 */
.modal-panel { position: relative; }
/* 标题给 × 让位。不让的话长标题会一直排到右上角，被那 44px 的热区压住，
   最后几个字看不见（对话标题常常一整句，必现）。 */
.modal-panel > h3 { padding-right: 40px; }
.modal-x {
  position: absolute;
  top: 8px; right: 8px;
  width: 44px; height: 44px;            /* 够大的热区 */
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-2);
  background: none; cursor: pointer;
  color: var(--ink-faint);
  font-size: 26px; line-height: 1;
  transition: background-color var(--dur-state) ease, color var(--dur-state) ease,
              transform var(--dur-tap) var(--ease-spring);
}
.modal-x:hover { background: rgba(26,23,18,.06); color: var(--ink); }
.modal-x:active { transform: scale(.9); transition-duration: .08s; }


/* ═══ 时辰格子 ═══════════════════════════════════════════════════════
   ★ 这段原来只写在 index.html 的内联 <style> 里 ★
     结果 free-bazi.html 用了同样的 .hours 标记却拿不到样式，
     浏览器退回默认按钮字体（Arial），页面 46% 的文字是 Arial。
     凡是多个页面共用的组件，样式就必须放这一层，不能留在某个页面里。 */
/* 时辰：12 格 4×3 */
.hours { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.hours > button {
  min-height: 52px; padding: var(--s-1) 2px;
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--paper); color: var(--ink-mid); cursor: pointer;
  transition: background-color var(--dur-state) ease, border-color var(--dur-state) ease,
              color var(--dur-state) ease, transform var(--dur-tap) ease;
}
.hours > button[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--ink-invert);
}
.hours > button:active { transform: var(--press); }
.hours .hn { display: block; font-family: var(--font-serif); font-size: var(--t-md); line-height: 1.2; }
.hours .hr { display: block; font-size: var(--t-xs); opacity: .72; }