/* 时宜网页：按网页的习惯排——顶部导航、正文成栏、细线分区，不用卡片和转场。
   正文走系统字体（苹方 / 微软雅黑）；站名、标题、刻读数、干支、节气名排汇文明朝子集
   （由 tool/build_web.py 按 lib/text/ 与 yi_core 的干支节气表切出）。
   子集按语言分三份（docs/i18n.md 第五节）：<html lang> 换 --serif，浏览器只下载用到的那一份。 */

@font-face {
  font-family: "Huiwen Hans";
  src: url("/fonts/huiwen-hans.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Huiwen Hant";
  src: url("/fonts/huiwen-hant.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Huiwen En";
  src: url("/fonts/huiwen-en.woff2") format("woff2");
  font-display: swap;
}

:root {
  --paper: #faf8f5;
  --ink: #1f1c1a;
  --muted: #6f6862;
  --faint: #9a928b;
  --line: #e6dfd7;
  --accent: #ad3727;
  --accent-hover: #922c1f;
  --accent-wash: #f6e9e5;
  --serif: "Huiwen Hans", "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
  --sans: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI",
    "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color-scheme: light dark;
}
/* 繁体：台湾的宋体、黑体作后备 */
:root:lang(zh-Hant) {
  --serif: "Huiwen Hant", "Songti TC", "PMingLiU", "Noto Serif TC", "Source Han Serif TC", serif;
  --sans: system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei",
    "Noto Sans TC", sans-serif;
}
/* 英文：汇文明朝的拉丁字，后接 Georgia（同林泉站英文）；照排的汉字（干支、刻读数）也在这份子集里 */
:root:lang(en) {
  --serif: "Huiwen En", Georgia, "Times New Roman", "Songti SC", "Noto Serif SC", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC",
    "Microsoft YaHei UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141211;
    --ink: #ece6e0;
    --muted: #a69e97;
    --faint: #7a726c;
    --line: #2d2926;
    --accent: #d06c5d;
    --accent-hover: #e08473;
    --accent-wash: #2a1c19;
  }
}

* { box-sizing: border-box; }

/* 滚动条的位置一直留着：日历比一屏长、今日不到一屏，不留的话换页时
   正文会随滚动条出现、消失左右跳一下（Windows 上的 Chrome、Edge、Firefox；
   苹果系统的滚动条浮在页面上，本来就不占位）。 */
html { scrollbar-gutter: stable; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }

button { font: inherit; color: inherit; }

.wrap {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- 顶部导航 ---------- */
.site-header { border-bottom: 1px solid var(--line); }
.header-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 64px;
}
.brand {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-decoration: none;
}
.site-nav {
  display: flex;
  gap: 28px;
  flex: 1;
}
.site-nav a, .site-nav .soon, .signin {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a.active { color: var(--ink); border-bottom-color: var(--accent); }
.soon { color: var(--faint) !important; cursor: default; }
/* 语言一组「简 繁 EN」（同林泉站）：当前这种深色、不链，另两种淡色 */
.langs { display: flex; gap: 12px; font-size: 13px; }
.langs a, .langs span { padding: 4px 0; color: var(--faint); text-decoration: none; }
.langs a:hover { color: var(--ink); }
.langs .is-current { color: var(--ink); }

/* ---------- 今日 · 此刻 ---------- */
.now { padding: 56px 0 40px; }
.dateline { margin: 0 0 20px; color: var(--muted); font-size: 15px; }
.dateline .lunar { margin-left: 1em; }
.reading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.ke {
  margin: 0;
  font-family: var(--serif);
  font-weight: normal;
  font-size: clamp(56px, 9vw, 96px);
  line-height: 1.05;
  letter-spacing: 0.04em;
}
.nickname {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: 20px;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.clock-block { text-align: right; }
.clock {
  margin: 0;
  font-size: clamp(40px, 6vw, 60px);
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.clock-note { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.place { margin: 28px 0 0; color: var(--faint); font-size: 14px; }
.place.error { margin-top: 6px; color: var(--accent); }
.linklike {
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.linklike:hover { color: var(--accent-hover); }
.linklike:disabled { color: var(--faint); cursor: default; text-decoration: none; }

/* ---------- 四柱 · 节气：宽屏左右两栏，窄屏上下 ---------- */
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
  border-top: 1px solid var(--line);
}
h2, h3 {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-weight: normal;
  font-size: 18px;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.pillars, .term { padding: 36px 0 40px; }

.pillar-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.pillar-row.three { grid-template-columns: repeat(3, 1fr); }
.pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.pillar-label { color: var(--faint); font-size: 13px; }
.gz {
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
.pillar.lit .gz { color: var(--accent); }
.pillar-change {
  color: var(--faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.term-now {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.term-name {
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1.2;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.term-detail { color: var(--muted); }
.term-next { margin: 18px 0 0; color: var(--muted); }
.term-next strong { color: var(--ink); font-weight: 600; }
.term-more { margin: 14px 0 0; font-size: 14px; }
.term-more a { color: var(--accent); text-decoration: none; }
.term-more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 读信入口 ---------- */
.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 36px 0 64px;
  border-top: 1px solid var(--line);
}
.cta h2 { margin-bottom: 8px; }
.cta p { margin: 0; color: var(--muted); }
.cta-actions { display: flex; gap: 12px; }
.button {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  transition: background-color 0.15s;
}
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button.secondary { background: transparent; color: var(--accent); }
.button.secondary:hover { background: var(--accent-wash); }

/* ---------- 日历 ---------- */
.calendar { padding: 40px 0 64px; }
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.cal-title {
  margin: 0;
  font-weight: normal;
  font-size: 32px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.cal-nav { display: flex; gap: 8px; }
.nav-btn {
  height: 36px;
  min-width: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}
.nav-btn:hover { color: var(--ink); border-color: var(--faint); }

.cal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}
.month {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.month th {
  padding: 0 0 10px;
  color: var(--faint);
  font-weight: normal;
  font-size: 13px;
}
.month td {
  padding: 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 76px;
  padding: 8px 8px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.day:hover { background: var(--accent-wash); }
.d-num { font-size: 18px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.d-lunar { font-size: 12px; color: var(--muted); }
.d-gz { font-family: var(--serif); font-size: 13px; color: var(--faint); }
.day.has-term .d-lunar { color: var(--accent); font-family: var(--serif); font-size: 13px; }
.d-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 0 4px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--accent);
  font-family: var(--serif);
  font-size: 11px;
  line-height: 1.4;
}
.day.is-today .d-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  margin: -4px 0 0 -6px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}
.day.is-selected { box-shadow: inset 0 0 0 2px var(--accent); }
.d-rike { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.d-tone { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; }
.d-tone.is-advance { background: var(--ink); }
.d-tone.is-hold { border: 1px solid var(--muted); }
.cal-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 14px 0 0;
  color: var(--faint);
  font-size: 13px;
}
.cal-legend .d-tone { margin-right: 5px; vertical-align: 1px; }
.cal-legend a { color: var(--muted); }

.day-detail {
  position: sticky;
  top: 24px;
  padding-left: 32px;
  border-left: 1px solid var(--line);
}
.dd-date {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
  font-family: var(--sans);
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.dd-today {
  font-size: 12px;
  letter-spacing: 0;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0 8px;
}
.dd-sub { margin: 0 0 24px; color: var(--muted); font-size: 14px; }
.dd-term { margin-left: 1em; }
.dd-term.is-jie { color: var(--accent); }
.day-detail .gz { font-size: 30px; }
.dd-shichen-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.dd-shichen-head h3 { margin-bottom: 12px; }
.dd-note { color: var(--faint); font-size: 12px; }
.shichen-list { list-style: none; margin: 0; padding: 0; }
.shichen-list li {
  display: grid;
  grid-template-columns: 3.2em 3.4em 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}
.sc-name { font-family: var(--serif); color: var(--muted); }
.sc-gz { font-family: var(--serif); font-size: 16px; }
.sc-time { color: var(--faint); font-variant-numeric: tabular-nums; }
.sc-now { color: var(--accent); font-size: 12px; }
.sc-end { display: inline-flex; align-items: baseline; gap: 8px; }
.sc-mark { font-family: var(--serif); font-size: 15px; color: var(--ink); }
.sc-mark.is-bad { color: var(--faint); }
.day-detail .this-day { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.day-detail .td-theme { font-size: 15px; }
.day-detail .td-theme-name { font-size: 19px; }
.day-detail .td-why { font-size: 14px; }
.day-detail .td-yiji, .day-detail .td-best { font-size: 14px; }
.dd-letter { margin: 12px 0 0; font-size: 14px; }
.dd-letter a { color: var(--accent); }
.shichen-list li.is-now .sc-name, .shichen-list li.is-now .sc-gz { color: var(--accent); }

/* ---------- 通用页面骨架 ---------- */
.page { padding: 40px 0 64px; }
.page.narrow { max-width: 560px; }
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: normal;
  font-size: 32px;
  letter-spacing: 0.06em;
}
.page-title.is-name { font-family: var(--sans); letter-spacing: 0.02em; }
.lead { margin: 0 0 24px; color: var(--muted); }
.note { margin: 24px 0 0; color: var(--muted); font-size: 14px; }
.note a, .lead a { color: var(--accent); }
.muted { color: var(--faint); }
.tag {
  display: inline-block;
  padding: 0 8px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.6;
  vertical-align: middle;
}
.row-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.button { cursor: pointer; }
.button:disabled { opacity: 0.5; cursor: default; }
.button.danger { background: transparent; border-color: var(--line); color: var(--muted); }
.button.danger:hover { border-color: #b3261e; color: #b3261e; background: transparent; }

/* ---------- 表单 ---------- */
.stack { display: flex; flex-direction: column; gap: 20px; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { color: var(--muted); font-size: 14px; padding: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
input[type="text"], input[type="email"], input[type="search"], input[type="date"], input[type="time"], textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
}
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
textarea { resize: vertical; line-height: 1.6; }
.code-input { font-size: 24px; letter-spacing: 0.4em; font-variant-numeric: tabular-nums; }
.choices { display: flex; gap: 24px; }
.choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.choice input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.hint { margin: -8px 0 0; color: var(--faint); font-size: 13px; }
.form-error { margin: 0; color: #b3261e; font-size: 14px; }
.search-row { display: flex; gap: 8px; }
.search-row input { flex: 1; }
.picked { margin: 2px 0 0; font-size: 14px; }
.candidates { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.candidates li + li { border-top: 1px solid var(--line); }
.candidate {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
}
.candidate:hover { background: var(--accent-wash); }
.candidate.is-picked { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; margin: 0 0 28px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

/* ---------- 命盘列表 ---------- */
.chart-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.chart-list li { border-bottom: 1px solid var(--line); }
.chart-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 4px 24px;
  padding: 18px 8px;
  text-decoration: none;
}
.chart-row:hover { background: var(--accent-wash); }
.chart-row-name { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.chart-row-gz { font-family: var(--serif); font-size: 20px; letter-spacing: 0.08em; text-align: right; }
.chart-row-birth { grid-column: 1 / -1; color: var(--faint); font-size: 13px; }

/* ---------- 命盘详情 ---------- */
.chart-meta { margin: 0; color: var(--muted); }
.chart-meta.muted { color: var(--faint); font-size: 14px; }
.bazi {
  width: 100%;
  max-width: 720px;
  margin: 8px 0 8px;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
}
.bazi th, .bazi td { padding: 8px 4px; border-bottom: 1px solid var(--line); font-weight: normal; }
.bazi thead th { color: var(--faint); font-size: 13px; }
.bazi tbody th { width: 4.5em; color: var(--faint); font-size: 13px; text-align: left; }
.bazi .row-god td { color: var(--muted); font-size: 14px; }
.bazi .row-stem td, .bazi .row-branch td { font-family: var(--serif); font-size: 40px; line-height: 1.2; }
.bazi .row-stem td.is-day { color: var(--accent); }
.bazi .row-hidden td { vertical-align: top; }
.hidden-stem { display: block; color: var(--muted); font-size: 13px; line-height: 1.8; }
.chart-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 64px; }
.geju, .dayun, .context { padding: 36px 0 8px; }
.geju-name { margin: 0 0 8px; font-family: var(--serif); font-size: 28px; color: var(--accent); }
.dayun-list { list-style: none; margin: 12px 0 0; padding: 0; }
.dayun-list li {
  display: grid;
  grid-template-columns: 3em 7em 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}
.dy-gz { font-family: var(--serif); font-size: 18px; }
.dy-age { color: var(--muted); }
.dy-year { color: var(--faint); font-variant-numeric: tabular-nums; }
.dayun-list li.is-now .dy-gz { color: var(--accent); }
.context { border-top: 1px solid var(--line); margin-top: 32px; max-width: 720px; }
.context textarea { margin: 4px 0 12px; }

/* ---------- 读信 ---------- */
.letters .page-head { margin-bottom: 20px; }
.status-line {
  margin: 0 0 24px;
  padding: 8px 14px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.daily { padding: 4px 0 40px; border-bottom: 1px solid var(--line); }
.daily-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.daily-gz {
  margin: 0;
  font-family: var(--serif);
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.daily-unit { margin-left: 6px; font-size: 24px; letter-spacing: 0; color: var(--muted); }
.daily-date { margin: 8px 0 0; color: var(--muted); }
.daily-nav { display: flex; align-items: center; gap: 8px; }
.icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.icon-button:hover { border-color: var(--muted); }
input.daily-pick { width: auto; min-height: 40px; padding: 6px 10px; }
.excerpt { max-width: 720px; margin: 0 0 18px; line-height: 1.9; }
.excerpt p { margin: 0 0 6px; }
.running { color: var(--muted); }
.linklike.quiet { color: var(--muted); text-decoration: none; }
.linklike.quiet:hover { color: var(--ink); text-decoration: underline; }

/* 这一天：本机按规则算，排在信前面；基调只用墨色深浅分，不着朱砂 */
.this-day { max-width: 720px; margin: 0 0 32px; }
.td-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; }
.td-heading { margin: 0; }
.td-tone {
  padding: 0 10px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.1em;
}
.td-tone.is-even { border-color: var(--line); color: var(--muted); }
.td-tone.is-hold { border-color: var(--faint); color: var(--muted); }
.td-gods { color: var(--faint); font-size: 13px; }
.td-theme { margin: 0 0 12px; font-size: 17px; line-height: 1.7; }
.td-theme-name { margin-right: 0.6em; font-family: var(--serif); font-size: 22px; letter-spacing: 0.06em; }
.td-why { margin: 0 0 14px; padding-left: 1.2em; color: var(--muted); line-height: 1.8; }
/* 「宜」「忌」是汇文明朝、后面是系统黑体，两种字在同一行高里基线差 2px：按基线对齐，不然标签偏高 */
.td-yiji { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; line-height: 1.7; }
.td-yiji dt { font-family: var(--serif); color: var(--muted); }
.td-yiji dd { margin: 0; }
.td-best { margin: 0 0 12px; line-height: 1.7; }
.td-hours { margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.td-hours-label { margin-right: 6px; font-family: var(--serif); color: var(--ink); }
.td-hours-label ~ .td-hours-label { margin-left: 1.4em; }
.td-table > summary {
  display: inline-block;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}
.td-table > summary::-webkit-details-marker { display: none; }
.td-table > summary::after { content: " · 展开"; color: var(--faint); }
.td-table[open] > summary::after { content: " · 收起"; }
.td-hour-list { list-style: none; margin: 8px 0 0; padding: 0; }
.td-hour-list li {
  display: grid;
  grid-template-columns: 3.2em 3.4em 7.6em 1.6em minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}
.td-mark { font-family: var(--serif); font-size: 16px; }
.td-hour-list li.is-bad .td-mark, .td-hour-list li.is-bad .sc-gz { color: var(--faint); }
.td-reason { color: var(--faint); font-size: 13px; }
.td-hint { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.daily-letter-head { margin: 0 0 12px; padding-top: 24px; border-top: 1px dashed var(--line); }
.daily-letter-lead { max-width: 720px; margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.daily-letter-note { margin: 12px 0 0; color: var(--faint); font-size: 13px; }
.daily-letter-note a { color: var(--muted); }

.periods { padding: 36px 0 8px; }
.period-block { border-bottom: 1px solid var(--line); }
.period-block > summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 4px;
  cursor: pointer;
  list-style: none;
}
.period-block > summary::-webkit-details-marker { display: none; }
.period-block > summary::after { content: "展开"; margin-left: auto; color: var(--faint); font-size: 13px; }
.period-block[open] > summary::after { content: "收起"; }
.period-block > summary:hover .period-kind { color: var(--ink); }
.period-kind { width: 3em; color: var(--muted); }
.period-gz { font-family: var(--serif); font-size: 20px; letter-spacing: 0.08em; }
.period-badge { color: var(--faint); font-size: 13px; }
.period-list { list-style: none; margin: 0 0 12px; padding: 0; }
.period-row {
  display: grid;
  grid-template-columns: 10em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 16px;
  padding: 9px 4px;
  border-top: 1px dashed var(--line);
  font-size: 15px;
}
.period-label .gz { font-family: var(--serif); font-size: 18px; letter-spacing: 0.06em; }
.period-tag {
  margin-left: 8px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
}
.period-range { color: var(--faint); font-size: 14px; font-variant-numeric: tabular-nums; }
.period-action { text-align: right; white-space: nowrap; }
.period-action a { color: var(--accent); }
.period-error { grid-column: 1 / -1; }
.period-other label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.period-other input { width: auto; min-height: 36px; padding: 4px 8px; }
.period-other input[type="number"] { width: 7em; }

.archive { padding: 40px 0 8px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.filter {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.filter:hover { border-color: var(--muted); }
.filter.is-on { border-color: var(--ink); color: var(--ink); }
.letter-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.letter-list li { border-bottom: 1px solid var(--line); }
.letter-row {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 16px;
  padding: 14px 4px;
  color: inherit;
  text-decoration: none;
}
.letter-row:hover { background: var(--accent-wash); }
.letter-kind { color: var(--faint); font-size: 14px; white-space: nowrap; }
.letter-title { min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.letter-row.is-unread .letter-title { color: var(--ink); font-weight: 600; }
.letter-row.is-unread .letter-kind::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}
.letter-date { color: var(--faint); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 一封信 */
.letter { max-width: 720px; }
.crumbs { margin: 0 0 20px; font-size: 14px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.letter-body { margin: 28px 0 0; font-size: 17px; line-height: 1.95; }
.letter-body p { margin: 0 0 12px; }
/* 小节标题是模型写的字，不在展示字体子集里：走正文字体 */
.letter-body .letter-section {
  margin: 30px 0 10px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.signature { margin: 20px 0 0; text-align: right; color: var(--faint); font-style: italic; font-size: 14px; }
.letter-actions { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }

/* 命盘档案 */
.natal { max-width: 720px; margin-top: 32px; padding: 36px 0 8px; border-top: 1px solid var(--line); }
.natal-summary { margin: 0 0 8px; line-height: 1.8; }
.natal .row-actions { margin-top: 16px; }

/* ---------- 卜卦 ---------- */
:root {
  --letter-paper: #fbf5e6;
  --letter-edge: rgba(153, 133, 90, 0.35);
  --letter-ink: #44392a;
  --letter-muted: rgba(138, 106, 56, 0.75);
  --letter-water: rgba(138, 106, 56, 0.14);
  --letter-rule-outer: rgba(163, 74, 60, 0.3);
  --letter-rule-inner: rgba(163, 74, 60, 0.15);
  --envelope: #f4ead3;
  --envelope-flap: #ecdfc2;
  --letter-paper-back: #f3ead5;
  --coin: #eadcbc;
  --coin-edge: #b08d57;
  --coin-ink: #6b4f24;
}
@media (prefers-color-scheme: dark) {
  :root {
    --letter-paper: #221d16;
    --letter-edge: rgba(176, 141, 87, 0.3);
    --letter-ink: #e6dccb;
    --letter-muted: rgba(196, 164, 110, 0.75);
    --letter-water: rgba(196, 164, 110, 0.13);
    --letter-rule-outer: rgba(208, 108, 93, 0.35);
    --letter-rule-inner: rgba(208, 108, 93, 0.18);
    --envelope: #2a241b;
    --envelope-flap: #352d21;
    --letter-paper-back: #1c1812;
    --coin: #3a3121;
    --coin-edge: #8a6a38;
    --coin-ink: #e2c792;
  }
}
.divination .ask textarea { min-height: 128px; font-size: 17px; line-height: 1.8; }
.history { padding: 48px 0 8px; }
.history-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.history-list li { border-bottom: 1px solid var(--line); }
.history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 16px;
  padding: 14px 4px;
  color: inherit;
  text-decoration: none;
}
.history-row:hover { background: var(--accent-wash); }
.history-q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-gua { font-family: var(--serif); color: var(--accent); letter-spacing: 0.06em; }
.history-meta { grid-column: 1 / -1; color: var(--faint); font-size: 13px; }

/* 信封：信纸（所问）三折——下折上、上折下——落进信封，封舌合上，钤「缄」；
   开缄反过来：拆印、掀舌、信纸抽出、逐折展开（纸上已显卦，水印）。
   信纸是上中下三条，各显同一张纸的三分之一，折时真翻（3D），字不压扁。
   层次：封舌开着在最底（竖在信封后），信纸其上，信封身再上（落进去就被挡住），
   封舌合上时换到信封身之前，印最上。 */
.seal-scene { display: flex; justify-content: center; padding: 16px 0 8px; }
.envelope { position: relative; flex: none; width: 216px; height: 284px; transition: height 0.35s ease; }
.env-body {
  position: absolute;
  z-index: 3;
  top: 160px;
  left: 0;
  width: 216px;
  height: 112px;
  border: 1px solid var(--letter-edge);
  border-radius: 4px;
  background: var(--envelope);
  transition: top 0.35s ease;
}
.env-flap {
  position: absolute;
  z-index: 4;
  top: 160px;
  left: 0;
  width: 216px;
  height: 62px;
  transform-origin: 50% 0;
  transform: perspective(600px) rotateX(0deg);
  filter: drop-shadow(0 1px 0.5px rgba(0, 0, 0, 0.18));
  transition: top 0.35s ease;
}
.env-flap > span {
  position: absolute;
  inset: 0;
  background: var(--envelope-flap);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.env-paper {
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 18px;
  width: 180px;
  height: 150px;
  perspective: 700px;
  transform-style: preserve-3d;
}
.env-strip { position: absolute; left: 0; width: 180px; height: 50px; transform-style: preserve-3d; }
.env-strip.s1 { top: 0; transform-origin: 50% 100%; }
.env-strip.s2 { top: 50px; }
.env-strip.s3 { top: 100px; transform-origin: 50% 0; }
.env-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--letter-edge);
  background: var(--letter-paper);
  backface-visibility: hidden;
}
.env-face.back { transform: rotateX(180deg); background: var(--letter-paper-back); }
.s1 .env-face { border-bottom: 0; border-radius: 3px 3px 0 0; }
.s2 .env-face { border-top: 0; border-bottom: 0; }
.s3 .env-face { border-top: 0; border-radius: 0 0 3px 3px; }
.s1 .env-face.back { border-radius: 0 0 3px 3px; }
.s3 .env-face.back { border-radius: 3px 3px 0 0; }
.env-sheet { position: absolute; left: -1px; width: 180px; height: 150px; padding: 14px 16px; color: var(--letter-ink); }
.s1 .env-sheet { top: -1px; }
.s2 .env-sheet { top: -50px; }
.s3 .env-sheet { top: -100px; }
.env-sheet p {
  position: relative;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.env-seal {
  position: absolute;
  z-index: 5;
  top: 191px;
  left: 89px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 38px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transform: rotate(-6deg);
  transition: top 0.35s ease;
}

/* 已封：信纸在封内，收起上方那块空，信封与印随之上移（从封入接过来时有过渡） */
.envelope.is-sealed { height: 124px; }
.envelope.is-sealed .env-paper { visibility: hidden; }
.envelope.is-sealed .env-body,
.envelope.is-sealed .env-flap { top: 0; }
.envelope.is-sealed .env-seal { top: 31px; }

/* 封入：淡入 → 下折上 → 上折下 → 落入 → 合舌 → 钤印（约 2.8 秒） */
.envelope.is-sealing .env-paper { animation: env-fade-in 0.35s ease-out both, env-drop 0.55s 1.45s ease-in both; }
.envelope.is-sealing .s3 { animation: env-fold-up 0.5s 0.4s ease-in-out both; }
.envelope.is-sealing .s1 { animation: env-fold-down 0.5s 0.9s ease-in-out both; }
.envelope.is-sealing .env-flap { animation: env-flap-close 0.4s 2s ease-in-out both; }
.envelope.is-sealing .env-seal { animation: env-stamp 0.4s 2.4s cubic-bezier(0.2, 0.8, 0.3, 1.2) both; }

/* 开缄：拆印 → 掀舌 → 抽出 → 上折展开 → 下折展开（约 2.2 秒），遮罩随后淡出 */
.envelope.is-opening .env-seal { animation: env-unstamp 0.35s ease-in both; }
.envelope.is-opening .env-flap { animation: env-flap-open 0.4s 0.3s ease-in-out both; }
.envelope.is-opening .env-paper { animation: env-rise 0.55s 0.7s ease-out both; }
.envelope.is-opening .s1 { animation: env-unfold-down 0.45s 1.3s ease-in-out both; }
.envelope.is-opening .s3 { animation: env-unfold-up 0.45s 1.75s ease-in-out both; }

@keyframes env-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* 折过来的那条往观者这边翻，落定时略高于中条（translateZ 在翻转后的坐标里，负值朝外） */
@keyframes env-fold-up { from { transform: rotateX(0deg); } to { transform: rotateX(180deg) translateZ(-1px); } }
@keyframes env-fold-down { from { transform: rotateX(0deg); } to { transform: rotateX(-180deg) translateZ(-2px); } }
@keyframes env-unfold-up { from { transform: rotateX(180deg) translateZ(-1px); } to { transform: rotateX(0deg); } }
@keyframes env-unfold-down { from { transform: rotateX(-180deg) translateZ(-2px); } to { transform: rotateX(0deg); } }
@keyframes env-drop { from { transform: translateY(0); } to { transform: translateY(136px); } }
@keyframes env-rise { from { transform: translateY(136px); } to { transform: translateY(0); } }
@keyframes env-flap-close {
  0% { transform: perspective(600px) rotateX(180deg); z-index: 1; }
  49% { z-index: 1; }
  51% { z-index: 4; }
  100% { transform: perspective(600px) rotateX(0deg); z-index: 4; }
}
@keyframes env-flap-open {
  0% { transform: perspective(600px) rotateX(0deg); z-index: 4; }
  49% { z-index: 4; }
  51% { z-index: 1; }
  100% { transform: perspective(600px) rotateX(180deg); z-index: 1; }
}
@keyframes env-stamp {
  from { opacity: 0; transform: scale(1.8) rotate(-14deg); }
  to { opacity: 1; transform: scale(1) rotate(-6deg); }
}
@keyframes env-unstamp {
  from { opacity: 1; transform: scale(1) rotate(-6deg); }
  to { opacity: 0; transform: scale(1.5) rotate(-6deg); }
}
/* 开缄前信纸在封内、已折好 */
.envelope.is-opening .s1 { transform: rotateX(-180deg) translateZ(-2px); }
.envelope.is-opening .s3 { transform: rotateX(180deg) translateZ(-1px); }
.unseal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  cursor: pointer;
  animation: unseal-fade 0.45s 2.25s ease-out both;
}
@keyframes unseal-fade { to { opacity: 0; visibility: hidden; } }

.methods { max-width: 560px; margin: 8px auto 0; }
.methods h2 { text-align: center; }
.method-list { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--line); }
.method-list li { border-bottom: 1px solid var(--line); }
.method {
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  padding: 16px 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.method:hover { background: var(--accent-wash); }
.method-name { width: 5em; flex: none; font-family: var(--serif); font-size: 20px; color: var(--ink); }
.method-desc { color: var(--muted); font-size: 15px; }
.method-help > summary { color: var(--muted); font-size: 14px; cursor: pointer; }
.method-help dl { margin: 12px 0 8px; }
.method-help dt { margin-top: 10px; font-family: var(--serif); }
.method-help dd { margin: 2px 0 0; color: var(--muted); font-size: 15px; line-height: 1.8; }

/* 起卦：左边已封的信封随行，右边起卦 */
.cast { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 32px 64px; align-items: start; }
.cast.meihua { display: block; max-width: 640px; margin: 0 auto; text-align: center; cursor: pointer; }
.cast-main { min-width: 0; }
.cast-progress { margin: 0 0 20px; color: var(--muted); letter-spacing: 0.12em; }
.cast-restart { margin: 32px 0 0; font-size: 14px; }
.cast-actions { margin-top: 8px; }
.coins { display: flex; gap: 16px; margin: 4px 0 28px; perspective: 600px; }
.coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 2px solid var(--coin-edge);
  border-radius: 50%;
  background: var(--coin);
  color: var(--coin-ink);
  font-family: var(--serif);
  font-size: 26px;
}
.coin.is-blank { opacity: 0.45; }
.coins.is-flipping .coin { animation: coin-flip 0.7s ease-out; }
.coins.is-flipping .coin:nth-child(2) { animation-duration: 0.62s; }
.coins.is-flipping .coin:nth-child(3) { animation-duration: 0.68s; }
@keyframes coin-flip {
  0% { transform: rotateY(0) translateY(0); }
  45% { transform: rotateY(540deg) translateY(-20px); }
  100% { transform: rotateY(1080deg) translateY(0); }
}

/* 卦形：阳爻一横、阴爻两段；动爻朱色、右标 ○ × */
.gua { display: inline-flex; flex-direction: column; gap: 8px; color: var(--ink); }
.gua .yao { position: relative; display: flex; justify-content: space-between; width: 100%; height: 12px; }
.gua .bar { height: 100%; border-radius: 1px; background: currentColor; }
.gua .yao.yang .bar { width: 100%; }
.gua .yao.yin .bar { width: 42%; }
.gua .yao.is-moving .bar { background: var(--accent); }
.gua .mark {
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
}
.cast-lines { width: 160px; margin: 0 0 24px; }
.gua.mini { width: 26px; gap: 3px; }
.gua.mini .yao { height: 4px; }
.gua.mini .yao.yin .bar { width: 40%; }
.gua.mini .mark { display: none; }

.yarrow-intro { margin: 0 0 16px; font-family: var(--serif); letter-spacing: 0.12em; color: var(--muted); }
.stalks {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 96px;
  padding: 0 4px;
  border-bottom: 1px solid var(--line);
  cursor: crosshair;
  user-select: none;
}
.stalks:hover .stalk { background: var(--muted); }
.stalk { flex: none; width: 2px; border-radius: 1px; background: var(--faint); }
.stalk:nth-child(3n) { margin-top: 6px; }
.stalk:nth-child(4n + 1) { margin-top: 3px; }
.stalk-hint { margin: 8px 0 20px; font-size: 14px; }
.yarrow-steps { list-style: none; margin: 0 0 24px; padding: 0; font-size: 15px; color: var(--muted); }
.yarrow-steps li { padding: 4px 0; }
.yarrow-steps .step-title { display: inline-block; min-width: 9.5em; margin-right: 12px; font-family: var(--serif); color: var(--ink); }
.yarrow-steps .step-line { color: var(--ink); }

.meihua-chips { display: flex; justify-content: center; gap: 28px; margin: 24px 0 36px; flex-wrap: wrap; }
.meihua-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: rise-in 0.5s ease-out both; }
.chip-name { color: var(--muted); font-family: var(--serif); letter-spacing: 0.08em; }
.chip-num { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--ink); }
.meihua-formula { margin: 0 0 12px; color: var(--ink); font-size: 17px; animation: rise-in 0.5s ease-out both; }
.meihua-skip { margin-top: 28px; font-size: 13px; animation: rise-in 0.5s 1s ease-out both; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 卦象：开缄后平铺的那封信（朱栏双线、本卦水印、朱批、落款） */
.gua-letter {
  position: relative;
  max-width: 720px;
  min-height: 300px;
  margin: 0 0 40px;
  padding: 36px 40px 30px;
  overflow: hidden;
  border: 1px solid var(--letter-edge);
  border-radius: 6px;
  background: var(--letter-paper);
  color: var(--letter-ink);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.gua-letter::before,
.gua-letter::after { content: ""; position: absolute; pointer-events: none; }
.gua-letter::before { inset: 6px; border: 1px solid var(--letter-rule-outer); }
.gua-letter::after { inset: 9px; border: 1px solid var(--letter-rule-inner); }
.gua.watermark {
  position: absolute;
  top: 50%;
  right: 9%;
  width: 220px;
  gap: 16px;
  color: var(--letter-water);
  transform: translateY(-50%);
}
.gua.watermark .yao { height: 22px; }
.gua.watermark .yao.is-moving .bar { background: currentColor; }
.gua.paper-mark { position: absolute; top: 18px; right: 18px; width: 64px; gap: 6px; color: var(--letter-water); }
.gua.paper-mark .yao { height: 7px; }
.gua.paper-mark .yao.is-moving .bar { background: currentColor; }
.gua-letter-label { position: relative; margin: 0 0 8px; font-family: var(--serif); font-size: 14px; letter-spacing: 0.3em; color: var(--letter-muted); }
.gua-letter-question { position: relative; max-width: 28em; margin: 0; font-size: 19px; line-height: 2; white-space: pre-wrap; }
.gua-letter-verdict {
  position: relative;
  margin: 40px 0 0;
  text-align: right;
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: 0.1em;
  color: var(--accent);
  transform: rotate(-3deg);
  transform-origin: right center;
}
.gua-letter-sign { position: relative; margin: 6px 0 0; text-align: right; font-size: 13px; color: var(--letter-muted); }
.gua-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 64px; align-items: start; }
.gua-text-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gua-text-head h2 { margin-bottom: 16px; }
.gua-minis { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.gua-arrow { color: var(--faint); }
.gua-ci { margin: 0 0 10px; line-height: 1.9; }
.gua-text h3 { margin: 24px 0 10px; font-size: 16px; }
.gua-analysis .letter-body { margin-top: 0; }
.gua-actions { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }

/* ---------- 解读次数：随全站细线分栏，不用卡片；朱砂只给主按钮与链接 ---------- */
.credits-balance { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 8px; }
.credits-balance-label { color: var(--muted); font-size: 13px; letter-spacing: 0.1em; }
.credits-balance-value {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.credits-balance-value .unit, .price-credits .unit {
  margin-left: 6px;
  font-size: 0.45em;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.credits-free { margin: 0; color: var(--muted); font-size: 14px; }
.credits h2 { margin: 44px 0 14px; }
.credits .facts { margin: 0; font-size: 15px; }
.price-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.price-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.price-credits {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.price-total { font-size: 17px; }
.price-per { color: var(--faint); font-size: 13px; white-space: nowrap; }
.price-list .button { height: 36px; padding: 0 18px; }
.buy-error, .buy-closed { margin: 12px 0 0; }
.fine-print { margin: 20px 0 0; color: var(--muted); font-size: 14px; }
.fine-print p { margin: 0 0 6px; }
.fine-print a, .status-line a, .credits-hint a { color: var(--accent); }
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ledger li { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ledger-at { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger-what { flex: 1; min-width: 0; }
.ledger-delta { min-width: 3em; text-align: right; font-variant-numeric: tabular-nums; }
.credits-hint { font-size: 13px; }
.status-ok { color: var(--ink); border-left-color: var(--accent); }
.form-error a { color: var(--accent); }
.login-gift { margin: -12px 0 24px; color: var(--muted); font-size: 14px; }
.login-terms { margin: 28px 0 0; color: var(--faint); font-size: 13px; }
/* 人机验证（Turnstile）：一般空着；要人点一下时在这里出勾选框 */
.turnstile-box { max-width: 100%; }
.turnstile-box:not(:empty) { margin-top: 16px; }
.login-terms a, .context-note a { color: var(--muted); text-underline-offset: 3px; }
.context-note { margin: -8px 0 12px; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  /* 照样走完（结束事件推着流程往下），只是一闪而过 */
  .envelope *, .unseal-overlay, .coins .coin, .meihua-chip, .meihua-formula, .meihua-skip {
    animation-duration: 0.01s !important;
    animation-delay: 0s !important;
  }
}

/* ---------- 页脚 ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 24px 0 40px;
  color: var(--faint);
  font-size: 13px;
}
.footer-inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; }
.site-footer a { color: inherit; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--muted); }

/* ---------- 窄屏：日历详情落到月历下面 ---------- */
@media (max-width: 900px) {
  .cal-body { grid-template-columns: 1fr; gap: 32px; }
  .day-detail { position: static; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 28px; }
}

/* ---------- 手机 ---------- */
@media (max-width: 720px) {
  .price-list li { gap: 16px; }
  .price-credits { font-size: 22px; }
  .wrap { padding: 0 20px; }
  .header-inner { gap: 20px; height: auto; flex-wrap: wrap; padding: 14px 20px 0; }
  .site-nav { order: 3; flex-basis: 100%; gap: 22px; overflow-x: auto; padding-bottom: 8px; }
  .langs { margin-left: auto; }
  .now { padding: 32px 0 28px; }
  .reading { align-items: flex-start; flex-direction: column; gap: 20px; }
  .clock-block { text-align: left; }
  .columns { grid-template-columns: 1fr; }
  .term { border-top: 1px solid var(--line); }
  .pillars, .term { padding: 28px 0 32px; }
  .gz { font-size: 30px; }
  .cta { padding-bottom: 48px; }
  .calendar { padding-top: 28px; }
  .cal-title { font-size: 26px; }
  .day { min-height: 64px; padding: 6px 4px 8px; }
  .d-num { font-size: 16px; }
  .d-lunar, .d-gz { font-size: 11px; }
  .day.has-term .d-lunar { font-size: 12px; }
  .d-tag { top: 4px; right: 3px; font-size: 10px; padding: 0 2px; }
  .d-rike { font-size: 11px; gap: 3px; }
  .d-tone { width: 6px; height: 6px; }
  .td-hour-list li { grid-template-columns: 3em 3.2em minmax(0, 1fr) 1.6em; }
  .td-reason { grid-column: 1 / -1; }
  .page { padding-top: 28px; }
  .page-title { font-size: 26px; }
  .field-row { grid-template-columns: 1fr; }
  .chart-row { grid-template-columns: 1fr; }
  .chart-row-gz { text-align: left; }
  .chart-columns { grid-template-columns: 1fr; }
  .daily-gz { font-size: 48px; }
  .period-row { grid-template-columns: minmax(0, 1fr) auto; }
  .period-range { grid-column: 1 / -1; grid-row: 2; }
  .letter-row { grid-template-columns: minmax(0, 1fr) auto; }
  .letter-kind { grid-column: 1 / -1; }
  .letter-body { font-size: 16px; }
  .cast { grid-template-columns: 1fr; gap: 8px; }
  .cast-envelope { display: flex; justify-content: center; }
  .gua-letter { padding: 28px 24px 24px; min-height: 240px; }
  .gua.watermark { width: 140px; gap: 10px; right: 6%; }
  .gua.watermark .yao { height: 14px; }
  .gua-letter-question { font-size: 17px; }
  .gua-columns { grid-template-columns: 1fr; }
  .meihua-chips { gap: 18px; }
  .chip-num { font-size: 32px; }
  .bazi .row-stem td, .bazi .row-branch td { font-size: 30px; }
  .hidden-stem { font-size: 11px; }
}

/* ---------- 英文界面（docs/i18n.md）----------
   标题、读数在英文里是拉丁字：中文的字距拉开了读着散，归零；照排汉字的（带 lang 的干支、刻读数）不动。
   干支大字下面另起一行写拼音（gz-roman），卦辞英译下面小字附原文（gua-ci-original）。 */
:root:lang(en) :is(h1, h2, h3, .brand, .nickname, .term-name, .td-theme-name, .td-tone, .gz, .history-gua,
  .cast-progress, .yarrow-intro, .chip-name, .gua-letter-label, .gua-letter-verdict, .credits-balance-label,
  .method-name, .period-kind, .price-credits, .credits-balance-value, .td-hours-label, .td-yiji dt):not([lang]) {
  letter-spacing: normal;
}
.ke-gloss { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.gz-roman, .daily-roman, .dy-roman, .period-roman { color: var(--muted); font-size: 13px; letter-spacing: 0.02em; }
.gz-roman { margin-top: -2px; }
.bazi .gz-roman { display: block; font-family: var(--sans); font-size: 12px; line-height: 1.4; }
.daily-roman { margin: 4px 0 0; font-size: 15px; }
.period-roman { margin-left: 8px; }
:root:lang(en) .dayun-list li { grid-template-columns: 2.6em 4.8em 6.8em 1fr auto; }
:root:lang(en) .method-name { width: 7em; font-size: 18px; }
:root:lang(en) .d-lunar { font-size: 10px; line-height: 1.2; }
:root:lang(en) .day.has-term .d-lunar { font-size: 10.5px; }
:root:lang(en) .d-tag { font-family: var(--sans); }
.gua-name { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.gua-ci-label { color: var(--muted); font-style: italic; }
.gua-ci-original { margin: -6px 0 14px; color: var(--faint); font-size: 13px; line-height: 1.7; }
/* 英文的换柱注（Ding-Wei from Feb 3）比中文长：可折行，格子不撑出屏 */
:root:lang(en) .pillar-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:root:lang(en) .pillar-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root:lang(en) .pillar-change { white-space: normal; text-align: center; line-height: 1.35; }
@media (max-width: 720px) {
  :root:lang(en) .site-nav { gap: 16px; }
  :root:lang(en) .site-nav a { font-size: 14px; }
  :root:lang(en) .pillar-row { gap: 6px; }
}
/* 英文日历：主题词（Solitude、Pressure）比两个汉字宽，格子里缩一号、可断行，不压到隔壁格 */
:root:lang(en) .d-rike { max-width: 100%; min-width: 0; flex-wrap: wrap; row-gap: 1px; line-height: 1.2; }
:root:lang(en) .cal-title { letter-spacing: 0; white-space: nowrap; }
@media (max-width: 720px) {
  :root:lang(en) .d-rike { font-size: 9.5px; gap: 2px; }
  :root:lang(en) .cal-title { font-size: 22px; }
}
.chart-help { max-width: 40em; margin: 12px 0 0; font-size: 14px; }