/*!
 * let me see · 样式
 * 设计取向：极致简约 —— 近墨白双色、发丝级分隔线、大量留白、以衬线体承载数字与干支
 */

:root {
  --bg:        #ffffff;
  --bg-soft:   #fafaf8;
  --bg-tint:   #f5f4f1;
  --ink:       #17161a;
  --ink-2:     #55535c;
  --ink-3:     #8e8b95;
  --line:      #e8e6e2;
  --line-soft: #f0eeea;
  --accent:    #a8432c;

  --wood:  #4e8c6a;
  --fire:  #c2543f;
  --earth: #b08a46;
  --metal: #8e8e9b;
  --water: #3f6e8c;

  --serif: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "STSong", "SimSun", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 820px; margin: 0 auto;
  padding: 0 calc(28px + env(safe-area-inset-right)) 96px calc(28px + env(safe-area-inset-left));
}

/* ---------------- 页头 ---------------- */
.masthead {
  padding: 68px 0 36px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.masthead h1 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin: 0;
  text-indent: 0.1em;
}
.masthead .rule {
  width: 24px; height: 1px; background: var(--accent);
  margin: 26px auto 0;
}

/* ---------------- 通用标题 ---------------- */
.sec { padding: 56px 0 0; }
.sec > h2 {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: none;
  color: var(--ink-2);
  margin: 0 0 4px;
}
.sec > h2::before {
  content: "";
  display: block;
  width: 16px; height: 1px;
  background: var(--accent);
  margin-bottom: 14px;
}
.sec > .sec-note {
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: 0.06em;
  margin: 0 0 28px;
}

/* ---------------- 表单 ---------------- */
form { padding-top: 44px; }

.field { padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.field:first-child { padding-top: 0; }
.field-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.field-hint {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.7;
  margin-top: 10px;
}

input[type="text"], input[type="number"], select {
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 2px;
  width: 100%;
  outline: none;
  transition: border-color .2s;
  appearance: none;
  -webkit-appearance: none;
}
input[type="text"]:focus, input[type="number"]:focus, select:focus { border-bottom-color: var(--ink); }
/* 下拉与文本框：整行撑到 44px，手指不必瞄那条细下划线 */
select { min-height: 44px; }
input[type="text"], input[type="number"] { min-height: 44px; }
select:disabled, input:disabled { opacity: 0.45; }
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 12px) center, calc(100% - 7px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 24px;
}
input[type="date"] {
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: transparent; border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 8px 2px; width: 100%; outline: none;
  min-height: 44px;
}
input[type="date"]:focus { border-bottom-color: var(--ink); }
/* Safari 会把日期输入当普通文本框渲染，撑满整行更易点中 */
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; padding: 6px 2px; margin-right: -2px; }

.row { display: flex; gap: 20px; flex-wrap: wrap; }
.row > * { flex: 1 1 120px; min-width: 0; }

/* 仅作为数据载体的隐藏控件。
   放在表单控件规则之后，并用 !important 压过同优先级的
   width / min-height 设定，确保它确实不占版面、不可点。 */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  max-height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* 年月日三段：年宽一点，月日窄一点，避免窄屏把「日」挤到下一行 */
.date-row { gap: 14px; }
.date-row #sYear { flex: 1 1 132px; }
.date-row #sMonth { flex: 1 1 96px; }
.date-row #sDay { flex: 1 1 96px; }
/* 时分两段等宽 */
.time-row #hour, .time-row #minute { flex: 1 1 120px; }

/* 分段选择器 */
.seg { display: inline-flex; border: 1px solid var(--line); }
.seg label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 20px;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
  transition: all .18s;
}
.seg label + label { border-left: 1px solid var(--line); }
/* 原生 radio 视觉隐藏但保留可聚焦、可被 label 关联；
   不用 pointer-events:none —— 部分 Android WebView / 输入法环境
   会据此判定标签不可点，导致整组选不中。改为挪到 label 上并铺满。 */
.seg input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.seg label:has(input:focus-visible) { outline: 1px solid var(--ink); outline-offset: 2px; }
.seg input:checked + span { color: var(--ink); }
.seg label:has(input:checked) { background: var(--ink); }
.seg label:has(input:checked) span { color: #fff; }
/* 触屏 / 小屏：整段撑高，宽度拉满，手指好点 */
@media (pointer: coarse), (max-width: 640px) {
  .seg { display: flex; width: 100%; max-width: 320px; }
  .seg label { flex: 1 1 0; min-height: 48px; padding: 0 18px; }
  .seg-sm { max-width: 220px; }
}

/* 窄屏：年月日三段仍保持一行（三列），把间距收紧 */
@media (max-width: 420px) {
  .date-row { gap: 10px; }
  .date-row #sYear { flex: 1 1 0; }
  .date-row #sMonth, .date-row #sDay { flex: 0 0 30%; }
  .time-row { gap: 12px; }
}

/* 复选：整行可点，方框本身也放大到 18px 便于点中 */
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 6px 0; }
.check input { margin: 4px 0 0; accent-color: var(--ink); width: 18px; height: 18px; flex: none; cursor: pointer; }
.check span { font-size: 13px; color: var(--ink-2); line-height: 1.7; }

/* 按钮 */
.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  padding: 15px 0;
  width: 100%;
  color: #fff;
  background: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}
.btn:hover { background: #33313a; border-color: #33313a; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn-ghost {
  background: transparent; color: var(--ink-2); border-color: var(--line);
  letter-spacing: 0.16em; text-indent: 0.16em; padding: 11px 0; font-size: 13px;
}
.btn-ghost:hover { background: var(--bg-tint); color: var(--ink); border-color: var(--line); }

.submit-wrap { padding-top: 34px; }

.notice {
  font-size: 12px; color: var(--accent); padding: 12px 0 0; line-height: 1.7;
}

/* 高级选项折叠 */
details.adv { border-bottom: 1px solid var(--line-soft); }
details.adv > summary {
  padding: 18px 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::after { content: "＋"; font-size: 13px; letter-spacing: 0; }
details.adv[open] > summary::after { content: "－"; }
details.adv .adv-body { padding: 0 0 22px; }

/* ---------------- 结果 ---------------- */
#result { display: none; }
#result.on { display: block; animation: fade .45s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.result-head { padding: 60px 0 0; text-align: center; }
.result-head .who {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: 0.16em;
  margin: 0 0 14px;
}
.result-head .when {
  color: var(--ink-3);
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 2;
}
.result-head .when b { color: var(--ink-2); font-weight: 400; }

/* 三宫格 */
.triad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 44px;
}
.triad > div { padding: 30px 8px; text-align: center; }
.triad > div + div { border-left: 1px solid var(--line); }
.triad .k { font-size: 11px; letter-spacing: 0.24em; color: var(--ink-3); }
.triad .v {
  font-family: var(--serif);
  font-size: 22px;
  margin-top: 10px;
  letter-spacing: 0.06em;
}
.triad .sub { font-size: 11px; color: var(--ink-3); margin-top: 6px; letter-spacing: 0.04em; }

/* 信息表 */
.defs { border-top: 1px solid var(--line-soft); }
.defs .d {
  display: flex;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.defs .d .k { flex: 0 0 108px; color: var(--ink-3); font-size: 12.5px; letter-spacing: 0.06em; }
.defs .d .v { flex: 1; color: var(--ink); }
.defs .d .v em { font-style: normal; color: var(--ink-3); font-size: 12px; margin-left: 8px; }

/* 四柱 */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.pillars .col { text-align: center; padding: 0 0 4px; }
.pillars .col + .col { border-left: 1px solid var(--line); }
.pillars .col h4 {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.pillars .ss { font-size: 11px; color: var(--ink-3); padding: 12px 0 2px; letter-spacing: 0.06em; }
.pillars .gz {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.3;
  padding: 6px 0 10px;
  letter-spacing: 0;
}
.pillars .gz .g, .pillars .gz .z { display: block; }
.pillars .hide { font-size: 12px; color: var(--ink-2); padding: 10px 0 4px; border-top: 1px solid var(--line-soft); }
.pillars .hide .lab { font-size: 10.5px; color: var(--ink-3); display: block; letter-spacing: 0.16em; margin-bottom: 3px; }
.pillars .meta { font-size: 11.5px; color: var(--ink-3); padding: 3px 0; }
.pillars .meta .lab { letter-spacing: 0.14em; }
.pillars .foot { padding: 12px 0 14px; font-size: 11.5px; color: var(--ink-3); border-top: 1px solid var(--line-soft); margin-top: 6px; }
.pillars .daycol { background: var(--bg-soft); }

/* 五行条 */
.wx { border-top: 1px solid var(--line-soft); }
.wx .bar-row { display: flex; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.wx .bar-row .name {
  flex: 0 0 62px;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: 0.04em;
}
.wx .bar-row .track { flex: 1; height: 3px; background: var(--line-soft); position: relative; }
.wx .bar-row .fill { position: absolute; left: 0; top: 0; bottom: 0; transition: width .6s cubic-bezier(.2,.7,.3,1); }
.wx .bar-row .num {
  flex: 0 0 62px; text-align: right; font-size: 12px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.wx .bar-row.miss .name { color: var(--ink-3); }
.wx .bar-row.miss .num::after { content: " 缺"; color: var(--accent); font-size: 10px; letter-spacing: 0.1em; }

.num-wood .fill  { background: var(--wood); }  .num-wood .name  { color: var(--wood); }
.num-fire .fill  { background: var(--fire); }  .num-fire .name  { color: var(--fire); }
.num-earth .fill { background: var(--earth); } .num-earth .name { color: var(--earth); }
.num-metal .fill { background: var(--metal); } .num-metal .name { color: var(--metal); }
.num-water .fill { background: var(--water); } .num-water .name { color: var(--water); }

/* 标签 */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--bg);
}
.tag.ok { border-color: #cddcd3; background: #f4f8f5; color: #35664c; }
.tag.no { border-color: #e6d5d0; background: #fbf5f3; color: #9a4630; }
.tag.plain { border-color: var(--line); background: var(--bg-tint); color: var(--ink-3); }

/* 段落群 */
.prose p { margin: 0 0 14px; color: var(--ink-2); line-height: 1.95; font-size: 14.5px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 500; color: var(--ink); }

.lede {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 2;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* 大运：10 步，5 列正好铺满 5×2 */
.dayun { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.dayun .dy { background: var(--bg); padding: 18px 10px; text-align: center; }
.dayun .dy .gz { font-family: var(--serif); font-size: 21px; letter-spacing: 0.04em; }
.dayun .dy .age { font-size: 11.5px; color: var(--ink-3); margin-top: 7px; letter-spacing: 0.04em; }
.dayun .dy .yr { font-size: 11px; color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.dayun .dy .tone { display: inline-block; font-size: 10.5px; letter-spacing: 0.14em; margin-top: 9px; padding: 2px 8px; border: 1px solid var(--line); color: var(--ink-3); }
.dayun .dy[data-tone="顺"] .tone { background: #f4f8f5; border-color: #cddcd3; color: #35664c; }
.dayun .dy[data-tone="滞"] .tone { background: #fbf5f3; border-color: #e6d5d0; color: #9a4630; }
.dayun .dy .el { font-size: 10.5px; color: var(--ink-3); margin-top: 6px; }

/* 结果操作区 */
.actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 40px; }
.actions > * { flex: 1 1 180px; }

.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; font-size: 13px; letter-spacing: 0.08em;
  padding: 12px 24px; opacity: 0; pointer-events: none; transition: all .3s; z-index: 50;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 历史 */
.hist { border-top: 1px solid var(--line-soft); }
.hist .h {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; cursor: pointer;
}
.hist .h:hover .nm { color: var(--accent); }
.hist .nm { transition: color .2s; }
.hist .mt { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hist .del { font-size: 12px; color: var(--ink-3); cursor: pointer; padding: 0 4px; }
.hist .del:hover { color: var(--accent); }

.empty { color: var(--ink-3); font-size: 13px; padding: 20px 0; }

/* 页脚 */
footer {
  margin-top: 72px; padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: 12px; line-height: 2;
}
footer .disc { margin-bottom: 8px; }

/* 提示条 */
.hintline {
  font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em;
  padding: 10px 0 0; line-height: 1.8;
}
.hintline b { color: var(--ink-2); font-weight: 400; }

/* ================= 视图切换 ================= */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}
.tabs .tab {
  flex: 1;
  background: none;
  border: none;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--ink-3);
  padding: 22px 0;
  cursor: pointer;
  position: relative;
  transition: color .2s;
}
.tabs .tab:hover { color: var(--ink-2); }
.tabs .tab.is-on { color: var(--ink); }
.tabs .tab.is-on::after {
  content: "";
  position: absolute; left: 50%; bottom: -1px;
  width: 30px; height: 1px; background: var(--accent);
  transform: translateX(-50%);
}

/* ================= 老黄历 ================= */
#viewAlmanac { padding-top: 34px; }

/* 日期切换条 */
.al-bar { display: flex; align-items: stretch; border: 1px solid var(--line); }
.al-step {
  flex: 0 0 54px;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--ink-3);
  transition: background .18s, color .18s;
}
.al-step:hover { background: var(--bg-tint); color: var(--ink); }
.al-step:active { background: var(--bg-soft); }
.al-bar input[type="date"] {
  flex: 1; min-width: 0; min-height: 50px;
  border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  border-bottom: none;
  text-align: center; padding: 14px 4px;
  font-family: var(--serif); font-size: 16px; letter-spacing: 0.1em;
}
.al-bar input[type="date"]:focus { background: var(--bg-soft); }
/* 老黄历的三段日期下拉：与出生日期同款，手机上不用调系统弹窗 */
.al-parts {
  flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center;
  padding: 5px 8px;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.al-parts select {
  min-height: 40px; padding: 4px 2px 4px 6px; border-bottom: none;
  background-position: calc(100% - 6px) center, calc(100% - 2px) center;
  font-family: var(--serif); font-size: 15px; letter-spacing: 0.06em;
  text-align: center;
}
.al-parts #alYear { flex: 1 1 auto; }
.al-parts #alMonth, .al-parts #alDay { flex: 0 0 27%; }
.al-parts select:focus { background-color: var(--bg-soft); }

.al-back-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  padding-top: 14px;
}
.al-back {
  background: none; border: 1px solid var(--line); cursor: pointer;
  font-family: inherit; font-size: 12px; letter-spacing: 0.18em; text-indent: 0.18em;
  color: var(--ink-3); padding: 10px 20px; min-height: 44px;
  transition: all .2s;
}
.al-back:hover { color: var(--ink); border-color: var(--ink-3); background: var(--bg-soft); }

/* 历书页 */
.al-sheet { padding-top: 32px; }
.al-sheet.al-in { animation: fade .4s ease; }

.al-head {
  display: grid;
  grid-template-columns: 116px 1fr;
  border: 1px solid var(--line);
}
.al-solar {
  text-align: center; padding: 22px 6px;
  border-right: 1px solid var(--line);
  background: var(--bg-soft);
}
.al-solar-yr { font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.08em; }
.al-solar-day {
  font-family: var(--serif); font-size: 52px; line-height: 1.05;
  margin: 5px 0 3px; letter-spacing: 0;
}
.al-solar-wk { font-size: 12px; color: var(--ink-2); letter-spacing: 0.12em; }
.al-today-dot {
  display: inline-block; margin-left: 5px; padding: 0 4px;
  font-size: 10px; letter-spacing: 0.1em;
  color: var(--accent); border: 1px solid currentColor; vertical-align: 1px;
}
.al-lunar { padding: 22px 18px; }
.al-lunar-day {
  font-family: var(--serif); font-size: 22px; line-height: 1.4; letter-spacing: 0.06em;
}
.al-lunar-gz { font-size: 13px; color: var(--ink-2); margin-top: 9px; letter-spacing: 0.03em; }
.al-lunar-sx { font-size: 12px; color: var(--ink-3); margin-top: 4px; letter-spacing: 0.08em; }
.al-fest {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--accent); letter-spacing: 0.08em;
}

.al-jq-line, .al-jq-now {
  text-align: center; font-size: 12px; letter-spacing: 0.08em;
  color: var(--ink-3); padding: 14px 0 0; line-height: 1.9;
}
.al-jq-now { color: var(--accent); }

/* 宜 · 忌 */
.al-yiji {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line); margin-top: 26px;
}
.al-yiji .al-col { padding: 20px 18px 22px; min-width: 0; }
.al-yiji .al-col + .al-col { border-left: 1px solid var(--line); }
.al-yiji h3 {
  margin: 0 0 12px; font-weight: 400;
  font-family: var(--serif); font-size: 15px; letter-spacing: 0.3em;
}
.al-col-yi h3 { color: var(--accent); }
.al-col-ji h3 { color: var(--ink-2); }
.al-yiji ul { list-style: none; margin: 0; padding: 0; }
.al-yiji li { font-size: 14px; line-height: 1.95; letter-spacing: 0.05em; }
.al-col-yi li { color: var(--accent); }
.al-col-ji li { color: var(--ink-2); }
.al-yiji .al-none { color: var(--ink-3); }

/* 概览 chips */
.al-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.al-chip {
  font-size: 12px; letter-spacing: 0.08em; padding: 6px 13px;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--bg);
}
.al-chip.ok { border-color: #cddcd3; background: #f4f8f5; color: #35664c; }
.al-chip.no { border-color: #e6d5d0; background: #fbf5f3; color: #9a4630; }

.al-sub { font-size: 12px; letter-spacing: 0.16em; color: var(--ink-3); margin-bottom: 12px; }

/* 宿歌 */
details.al-song { margin-top: 22px; border-top: 1px solid var(--line-soft); }
details.al-song > summary {
  padding: 14px 0; font-size: 12px; letter-spacing: 0.18em; color: var(--ink-3);
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
details.al-song > summary::-webkit-details-marker { display: none; }
details.al-song > summary::after { content: "＋"; letter-spacing: 0; }
details.al-song[open] > summary::after { content: "－"; }
details.al-song > p {
  margin: 0 0 6px; padding: 0 0 6px;
  font-family: var(--serif); font-size: 13px; line-height: 2.1;
  color: var(--ink-2); letter-spacing: 0.03em;
}

/* 时辰横滚条 */
.al-times {
  display: flex; gap: 1px; overflow-x: auto;
  border: 1px solid var(--line); background: var(--line);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.al-times::-webkit-scrollbar { display: none; }
.al-t {
  flex: 0 0 80px; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 15px 6px 13px;
  background: var(--bg); border: none; cursor: pointer;
  font-family: inherit; color: var(--ink-2);
  transition: background .18s;
}
.al-t:active { background: var(--bg-tint); }
.al-t.on { background: var(--ink); }
.al-t-name { font-size: 12px; letter-spacing: 0.05em; }
.al-t-gz { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.al-t-luck {
  font-size: 10.5px; letter-spacing: 0.14em; padding: 1px 9px;
  border: 1px solid var(--line); color: var(--ink-3);
}
.al-t-luck.ok { color: #35664c; border-color: #cddcd3; background: #f4f8f5; }
.al-t-luck.no { color: #9a4630; border-color: #e6d5d0; background: #fbf5f3; }
.al-t.on .al-t-name,
.al-t.on .al-t-gz,
.al-t.on .al-t-luck { color: #fff; }
.al-t.on .al-t-luck.ok,
.al-t.on .al-t-luck.no { background: transparent; border-color: rgba(255,255,255,.45); }

.al-time-detail { margin-top: 22px; }
.al-td-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-soft);
}
.al-td-head b { font-family: var(--serif); font-size: 17px; font-weight: 400; letter-spacing: 0.08em; }
.al-td-head .al-td-range { font-size: 12.5px; color: var(--ink-3); letter-spacing: 0.04em; }
.al-td-luck {
  font-size: 12px; letter-spacing: 0.08em; padding: 1px 10px;
  border: 1px solid var(--line); color: var(--ink-3);
}
.al-td-luck.ok { color: #35664c; border-color: #cddcd3; background: #f4f8f5; }
.al-td-luck.no { color: #9a4630; border-color: #e6d5d0; background: #fbf5f3; }

/* 时辰详情里的宜忌：去掉外框，缩小留白 */
.al-yiji.al-yiji-sm { border: none; margin-top: 0; padding-top: 16px; }
.al-yiji.al-yiji-sm .al-col { padding: 0 16px 0 0; }
.al-yiji.al-yiji-sm .al-col + .al-col {
  border-left: 1px solid var(--line-soft); padding-left: 16px;
}
.al-yiji.al-yiji-sm h3 { font-size: 13px; letter-spacing: 0.24em; margin-bottom: 8px; }
.al-yiji.al-yiji-sm li { font-size: 13px; line-height: 1.9; }

.al-footnote { padding-top: 42px; }

/* ========== 黄历信息层级：概览 / 核心 / 方位 / 时间轴 / 折叠 ========== */

/* 今日概览：把已有数据翻成一句人话，放在日期之后 */
.al-overview {
  margin-top: 26px; padding: 20px 22px;
  background: var(--bg-tint);
  border-left: 2px solid var(--accent);
  border-radius: 0 8px 8px 0;
}
.al-overview .ov-h {
  font-family: var(--serif); font-size: 12px; letter-spacing: 0.3em;
  color: var(--ink-3); margin-bottom: 10px;
}
.al-overview .ov-l {
  margin: 0; font-size: 14px; line-height: 1.95; color: var(--ink);
  letter-spacing: 0.02em;
}
.al-overview .ov-l + .ov-l { margin-top: 5px; color: var(--ink-2); }

/* 今日与你的命盘：个性化层，与黄历传统数据分开呈现 */
.al-personal {
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}
.al-personal .ap-empty {
  margin: 14px 0 0; font-size: 14px; line-height: 1.95; color: var(--ink-2);
}
.al-personal .ap-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin: 14px 0 2px;
}
.al-personal .ap-who {
  font-family: var(--serif); font-size: 17px; letter-spacing: 0.06em; color: var(--ink);
}
.al-personal .ap-tag {
  font-size: 11px; letter-spacing: 0.12em; color: var(--ink-3);
  border: 1px solid var(--line); padding: 1px 8px;
}
.al-personal .ap-day {
  margin-left: auto; font-family: var(--serif); font-size: 13px;
  letter-spacing: 0.1em; color: var(--ink-2);
}
.al-personal .ap-rows { margin-top: 14px; }
.al-personal .ap-r {
  display: flex; gap: 14px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--line-soft);
}
.al-personal .ap-r:first-child { border-top: 0; }
.al-personal .ap-k {
  flex: none; width: 6.2em; font-size: 12px; letter-spacing: 0.12em; color: var(--ink-3);
}
.al-personal .ap-v { font-size: 13.5px; line-height: 1.9; color: var(--ink-2); }
.al-personal .ap-v b { color: var(--ink); }
.al-personal .ap-god { font-family: var(--serif); font-size: 15px; }
.al-personal .ap-god.ok { color: #35664c; }
.al-personal .ap-god:not(.ok) { color: var(--accent); }
.al-personal .ap-v b.ok { color: #35664c; }
.al-personal .ap-v b.no { color: #9a4630; }
.al-personal .ap-note {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 12px; line-height: 1.85; color: var(--ink-3);
}
.al-personal .ap-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px;
}
.al-personal .ap-go {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 18px;
  font-family: inherit; font-size: 13px; letter-spacing: 0.1em;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); cursor: pointer;
  transition: all .18s;
}
.al-personal .ap-go:hover { border-color: var(--ink); }
.al-personal .ap-go:active { background: var(--bg-tint); }
.al-personal .btn-ghost.ap-go { width: auto; padding: 0 20px; }
html.senior .al-personal .ap-v { font-size: 16px; }
html.senior .al-personal .ap-k { font-size: 14px; width: 6.8em; }
html.senior .al-personal .ap-who { font-size: 20px; }
html.senior .al-personal .ap-note { font-size: 14px; }
html.senior .al-personal .ap-go { font-size: 15px; min-height: 48px; }

/* 今日核心：三格提层级 */
.al-core-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-top: 24px;
}
.core-cell {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 14px; border: 1px solid var(--line); background: var(--bg);
}
.core-cell .cc-k { font-size: 11px; letter-spacing: 0.12em; color: var(--ink-3); }
.core-cell .cc-v {
  font-family: var(--serif); font-size: 20px; line-height: 1.3;
  letter-spacing: 0.08em; color: var(--ink);
}
.core-cell .cc-s { font-size: 12px; letter-spacing: 0.06em; color: var(--ink-3); }
.core-cell.ok { border-color: #cddcd3; background: #f4f8f5; }
.core-cell.ok .cc-v { color: #35664c; }
.core-cell.no { border-color: #e6d5d0; background: #fbf5f3; }
.core-cell.no .cc-v { color: #9a4630; }
.al-core .al-chips { margin-top: 16px; }

/* 八方位极简示意图 */
.al-compass { margin-top: 28px; }
.cp-note { font-size: 12px; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 10px; }
.cp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); max-width: 430px;
  margin: 0 auto;
}
.cp-cell {
  min-height: 76px; padding: 10px 8px; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-align: center;
}
.cp-cell .cp-d { font-size: 12px; letter-spacing: 0.08em; color: var(--ink-2); }
.cp-cell .cp-w { font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); }
.cp-cell.ok { background: #f4f8f5; }
.cp-cell.ok .cp-d { color: #35664c; }
.cp-cell.ok .cp-w { color: #4b7a5f; }
.cp-cell.no { background: #fbf5f3; }
.cp-cell.no .cp-d { color: #9a4630; }
.cp-cell.no .cp-w { color: #b1644d; }
.cp-cell.dim { background: var(--bg-soft); }
.cp-cell.dim .cp-d { color: var(--ink-3); }
.cp-mid { background: var(--bg-tint); }
.cp-mid .cp-d { font-family: var(--serif); letter-spacing: 0.22em; color: var(--ink-3); }

/* 近期节气：简洁时间轴 */
.al-tl { margin-top: 22px; }
.tl-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.tl-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-3); flex: none; position: relative; top: -2px;
}
.tl-row.now .tl-dot { background: var(--accent); }
.tl-name {
  font-family: var(--serif); font-size: 15px; letter-spacing: 0.12em;
  color: var(--ink); min-width: 3.4em;
}
.tl-date { font-size: 13px; color: var(--ink-2); }
.tl-off { margin-left: auto; font-size: 12px; letter-spacing: 0.06em; color: var(--ink-3); }
.tl-row.now .tl-off { color: var(--accent); }

/* 默认折叠区块（传统附项等） */
details.al-fold { border-top: 1px solid var(--line); }
details.al-fold > summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 0; cursor: pointer; list-style: none;
}
details.al-fold > summary::-webkit-details-marker { display: none; }
details.al-fold > summary::marker { content: ""; }
details.al-fold > summary::after {
  content: "＋"; margin-left: auto; color: var(--ink-3); font-size: 13px; letter-spacing: 0;
}
details.al-fold[open] > summary::after { content: "－"; }
details.al-fold[open] > summary { border-bottom: 1px solid var(--line-soft); }
.al-fold .fl-t { font-family: var(--serif); font-size: 14px; letter-spacing: 0.3em; color: var(--ink-2); }
.al-fold .fl-s { font-size: 12px; letter-spacing: 0.04em; color: var(--ink-3); }
.al-fold .defs { padding: 16px 0 18px; }

/* 宜忌更紧凑（不加项目，只压缩留白） */
.al-yiji .al-col { padding: 16px 16px 18px; min-width: 0; }
.al-yiji h3 { margin-bottom: 10px; }
.al-yiji li { line-height: 1.75; }

@media (max-width: 600px) {
  .al-overview { padding: 16px 16px; }
  .al-overview .ov-l { font-size: 13.5px; }
  .al-core-grid { grid-template-columns: 1fr; gap: 8px; }
  .core-cell { flex-direction: row; align-items: baseline; gap: 10px; padding: 13px 14px; }
  .core-cell .cc-k { min-width: 5.4em; flex: none; }
  .core-cell .cc-v { font-size: 17px; }
  .core-cell .cc-s { margin-left: auto; }
  .cp-grid { max-width: none; }
  .cp-cell { min-height: 64px; }
  .tl-name { min-width: 3em; font-size: 14px; }
  /* 今日与你的命盘：窄屏键名改上排、值下排 */
  .al-personal { padding: 18px 16px 16px; }
  .al-personal .ap-head { gap: 8px; }
  .al-personal .ap-day { margin-left: 0; width: 100%; }
  .al-personal .ap-r { flex-direction: column; gap: 3px; padding: 10px 0; }
  .al-personal .ap-k { width: auto; }
  .al-personal .ap-v { font-size: 13.5px; }
  .al-personal .ap-go { flex: 1 1 auto; min-height: 44px; }
}
html.senior .al-overview .ov-l { font-size: 17px; }
html.senior .core-cell .cc-v { font-size: 24px; }
html.senior .tl-name { font-size: 18px; }
html.senior details.al-fold > summary { padding: 20px 0; }

/* ================= 术语折叠解析 ================= */
.tm { display: inline-block; }
.tm[open] { display: block; }
.tm > summary {
  display: inline;
  cursor: pointer;
  list-style: none;
  color: inherit;
  border-bottom: 1px dashed var(--accent);
  padding-bottom: 1px;
  position: relative;
}
/* 行内「？」的命中区：用伪元素撑开，不改动一行文字的排版高度。
   纵向 ±9px、横向 ±5px，实测有效命中高度约 36px（窄屏同样生效）。 */
.tm > summary::before {
  content: "";
  position: absolute;
  left: -5px; right: -5px; top: -9px; bottom: -9px;
}
.tm > summary::-webkit-details-marker { display: none; }
.tm > summary::marker { content: ""; }
.tm > summary::after {
  content: "?";
  font-size: 9px;
  color: var(--accent);
  margin-left: 3px;
  vertical-align: 2px;
  letter-spacing: 0;
}
.tm[open] > summary { border-bottom-style: solid; }
.tm-x {
  display: block;
  margin: 10px 0 6px;
  padding: 13px 15px;
  background: var(--bg-tint);
  border-left: 2px solid var(--accent);
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
/* 三层解释：专业定义 → 白话理解 → 在你这里 */
.tm-x .tx-r, .gl > p .tx-r { display: block; }
.tm-x .tx-r + .tx-r, .gl > p .tx-r + .tx-r {
  margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line-soft);
}
.tm-x .tx-r b, .gl > p .tx-r b {
  display: block; font-weight: 400; font-size: 11px;
  letter-spacing: 0.18em; color: var(--ink-3); margin-bottom: 3px;
}
.tm-x .tx-mine b, .gl > p .tx-mine b { color: var(--accent); }
.tm-x .tx-mine, .gl > p .tx-mine { color: var(--ink); }
/* 术语卡落在窄容器里时，让容器改为上下排布，避免释义被挤成一条窄柱 */
.defs .d:has(.tm[open]) { display: block; }
.defs .d:has(.tm[open]) > .k { display: block; margin-bottom: 6px; }
.tag:has(.tm[open]) { display: block; flex: 1 1 100%; }
.tag:has(.tm[open]) .tm-x { margin-top: 8px; }
/* 术语密集的行 */
.al-terms { padding-top: 14px; font-size: 12px; color: var(--ink-3); line-height: 2.2; }
.howto-terms { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.howto-terms .al-terms { padding-top: 0; }

/* 完整术语表 */
.gl-sec { padding-top: 56px; }
.gl-group { margin-bottom: 28px; }
.gl-group h3 {
  font-size: 12.5px; font-weight: 400; letter-spacing: 0.2em;
  color: var(--ink-3); margin: 0 0 12px;
  border-top: 1px solid var(--line-soft); padding-top: 16px;
}
.gl-group:first-child h3 { border-top: none; padding-top: 0; }
.gl-list { border-top: 1px solid var(--line-soft); }
.gl { border-bottom: 1px solid var(--line-soft); }
.gl > summary {
  padding: 12px 0; cursor: pointer; list-style: none;
  font-size: 13.5px; color: var(--ink-2);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.gl > summary::-webkit-details-marker { display: none; }
.gl > summary::marker { content: ""; }
.gl > summary::after { content: "＋"; color: var(--ink-3); font-size: 12px; letter-spacing: 0; }
.gl[open] > summary::after { content: "－"; }
.gl[open] > summary { color: var(--ink); }
.gl > p { margin: 0 0 14px; font-size: 13px; line-height: 1.95; color: var(--ink-2); }

/* ================= 塔罗 ================= */
#viewTarot { padding-top: 34px; }

.tt-intro {
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 16px;
}
.tt-intro p { margin: 0; font-size: 13.5px; line-height: 2; color: var(--ink-2); }

/* --- 牌阵选择 --- */
.tt-spreads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tt-spread {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  text-align: left; cursor: pointer; font-family: inherit;
  background: none; border: 1px solid var(--line);
  padding: 16px 16px 15px; min-height: 44px;
  transition: border-color .2s, background .2s;
}
.tt-spread:hover { border-color: var(--ink-3); }
.tt-spread.is-on { border-color: var(--accent); background: var(--bg-soft); }
.tt-sp-n { font-family: var(--serif); font-size: 15px; color: var(--ink); letter-spacing: 0.08em; }
.tt-spread.is-on .tt-sp-n { color: var(--accent); }
.tt-sp-c { font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; }
.tt-sp-s { font-size: 11.5px; color: var(--ink-3); line-height: 1.7; }

/* --- 洗牌台 --- */
.tt-stage { padding: 4px 0 0; }
.tt-deckwrap {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  padding: 14px 0 6px;
}
.tt-deck {
  position: relative; width: 106px; height: 178px;
  padding: 0; border: none; background: none; cursor: pointer;
}
.tt-deck .tt-back { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.tt-deck .tt-back:nth-child(1) { transform: translate(-7px, 6px) rotate(-5deg); }
.tt-deck .tt-back:nth-child(2) { transform: translate(0, 3px) rotate(-1deg); }
.tt-deck .tt-back:nth-child(3) { transform: translate(7px, 0) rotate(4deg); }
.tt-deckwrap.is-busy .tt-back { animation: ttShuffle .8s ease-in-out infinite; }
.tt-deckwrap.is-busy .tt-back:nth-child(2) { animation-delay: .12s; }
.tt-deckwrap.is-busy .tt-back:nth-child(3) { animation-delay: .24s; }
@keyframes ttShuffle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(-10px, -5px) rotate(-7deg); }
  50%      { transform: translate(7px, 4px) rotate(6deg); }
  75%      { transform: translate(-5px, 7px) rotate(-4deg); }
}
.tt-btn { max-width: 220px; }

/* --- 牌背纹样 --- */
.tt-back {
  position: absolute; inset: 0; display: block; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  background:
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(168,67,44,.05) 6px 7px),
    repeating-linear-gradient(-45deg, transparent 0 6px, rgba(168,67,44,.05) 6px 7px),
    linear-gradient(160deg, #fdfcfa 0%, #f5f3ef 100%);
  box-shadow: 0 1px 2px rgba(23,22,26,.05);
}
.tt-back i {
  position: absolute; left: 50%; top: 50%;
  width: 34%; height: 34%;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(168,67,44,.32);
}
.tt-back i::after {
  content: ""; position: absolute; inset: 24%;
  border: 1px solid rgba(168,67,44,.2);
}

/* --- 散开的牌背（从中点选） --- */
.tt-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px;
  max-width: 680px; margin: 0 auto;
}
.tt-pick { position: relative; padding: 0; border: none; background: none; cursor: pointer; }
.tt-pick::before { content: ""; display: block; padding-top: 168%; }
.tt-pick .tt-back { transition: transform .18s, opacity .18s; }
.tt-pick:hover .tt-back { transform: translateY(-3px); }
.tt-pick.is-used { cursor: default; }
.tt-pick.is-used .tt-back { opacity: .22; }
.tt-pick.is-used::after {
  content: "✓"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: var(--accent);
}

/* --- 牌位 --- */
.tt-cards {
  display: grid;
  grid-template-columns: repeat(var(--tt-cols, 3), 1fr);
  gap: 14px; max-width: 620px; margin: 28px auto 0;
}
.tt-slot { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tt-slot-h {
  display: flex; align-items: center; justify-content: center;
  min-height: 34px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px; letter-spacing: 0.12em; color: var(--ink-3); text-align: center;
}
.tt-slot.is-filled .tt-slot-h { color: var(--accent); border-bottom-color: var(--line); }

/* --- 一张牌的正反面（3D 翻转） --- */
.tt-card { position: relative; perspective: 900px; }
.tt-card::before { content: ""; display: block; padding-top: 168%; }
.tt-card-in {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .72s cubic-bezier(.2, .7, .3, 1);
}
.tt-card.on .tt-card-in { transform: rotateY(180deg); }
.tt-face {
  position: absolute; inset: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 3px;
  background: #fff;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: rotateY(180deg);
  box-shadow: 0 1px 2px rgba(23,22,26,.05);
}
.tt-card-empty { opacity: .5; }
.tt-c-fr {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  width: 100%; height: 100%; padding: 11% 6%; text-align: center;
}
.tt-c-rn { font-family: var(--serif); font-size: 10.5px; letter-spacing: 0.14em; color: var(--ink-3); }
.tt-c-sym { font-size: 27px; line-height: 1; color: var(--accent); }
.tt-c-suit { display: block; width: 27px; height: 27px; }
.tt-c-suit svg {
  width: 100%; height: 100%; fill: none; stroke: var(--accent);
  stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round;
}
.tt-c-nm { font-family: var(--serif); font-size: 12.5px; letter-spacing: 0.03em; color: var(--ink); }
.tt-c-en { font-size: 8px; letter-spacing: 0.04em; color: var(--ink-3); }
/* 逆位：把牌面内容整体转 180°，像把牌倒过来放 */
.tt-face.is-rev .tt-c-fr { transform: rotate(180deg); }

/* --- 逐张解读 --- */
.tt-read { border-top: 1px solid var(--line); padding: 24px 0 6px; }
.tt-read:first-child { border-top: none; padding-top: 6px; }
.tt-read-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.tt-read-pos {
  flex: 0 0 auto; padding: 3px 9px;
  border: 1px solid var(--line);
  font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3);
}
.tt-read-nm { font-family: var(--serif); font-size: 17px; letter-spacing: 0.05em; color: var(--ink); }
.tt-read-or { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3); }
.tt-read-or.is-rev { color: var(--accent); }
.tt-read-en { margin-top: 7px; font-size: 11px; letter-spacing: 0.05em; color: var(--ink-3); }
.tt-kw { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 13px; }
.tt-kw-i { font-size: 12px; color: var(--ink-2); border-bottom: 1px solid var(--accent); padding: 1px 0 2px; }
.tt-read-t { margin: 15px 0 0; font-size: 14px; line-height: 2.05; color: var(--ink-2); }

.tt-q-echo { font-size: 13px; color: var(--ink-3); }
.tt-q-echo b { color: var(--ink); font-weight: 400; }

.tt-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 34px; max-width: 460px;
}
.tt-actions .btn { flex: 1 1 180px; }

/* ================= 创作者署名 ================= */
.byline {
  margin-top: 54px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--ink-3);
  text-transform: uppercase;
}
html.senior .byline { font-size: 14px; }

/* ================= 空状态 ================= */
.pane:not(.on) > *:not(.empty-state) { display: none !important; }
.pane.on > .empty-state { display: none; }
.empty-state { padding: 48px 0 10px; }
.empty-state .es-t {
  font-family: var(--serif); font-size: 20px; letter-spacing: 0.2em;
  color: var(--ink-2); margin-bottom: 20px;
}
.empty-state p { font-size: 14px; line-height: 2; color: var(--ink-2); margin: 0 0 12px; }
.empty-state .es-note { font-size: 12px; color: var(--ink-3); }

/* ================= 四柱「怎么读」 ================= */
.howto {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 20px 20px 14px;
  margin-bottom: 26px;
}
.howto h3 {
  margin: 0 0 14px; font-size: 12.5px; font-weight: 400;
  letter-spacing: 0.2em; color: var(--ink-2);
}
.howto ol { margin: 0; padding-left: 18px; }
.howto li { font-size: 13.5px; line-height: 1.95; color: var(--ink-2); margin-bottom: 9px; }
.howto li:last-child { margin-bottom: 0; }

/* ================= 重点提示框 ================= */
.callout {
  margin-top: 26px; border: 1px solid var(--line);
  background: var(--bg-soft); padding: 18px 20px 10px;
}
.callout:empty { display: none; }
.callout-t { font-size: 12.5px; letter-spacing: 0.18em; color: var(--ink-2); margin-bottom: 14px; }
.callout-r {
  display: flex; gap: 14px; padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.9; color: var(--ink-2);
}
.callout-r:first-of-type { border-top: none; }
.callout-r .ck {
  flex: 0 0 62px; font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-3); padding-top: 4px;
}
.callout-r .ck.ok { color: #35664c; }
.callout-r .ck.no { color: #9a4630; }

/* ================= 分布条（西方元素 / 宫位性质） ================= */
.dist { border-top: 1px solid var(--line-soft); }
.dist-h {
  font-size: 12px; letter-spacing: 0.2em; color: var(--ink-3);
  padding: 20px 0 10px;
}
.dist-h:first-child { padding-top: 0; }
.dist-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.dist-row .dn { flex: 0 0 50px; color: var(--ink-2); }
.dist-row .dt { flex: 1 1 auto; height: 4px; background: var(--line-soft); position: relative; min-width: 30px; }
.dist-row .dt i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink-3); transition: width .5s; }
.dist-row .dc {
  flex: 0 0 40px; text-align: right; color: var(--ink-3);
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.dist-row .dw { flex: 0 0 92px; text-align: right; color: var(--ink-3); font-size: 11.5px; }
.df-fire .dt i  { background: var(--fire); }   .df-fire .dn  { color: var(--fire); }
.df-earth .dt i { background: var(--earth); }  .df-earth .dn { color: var(--earth); }
.df-air .dt i   { background: var(--metal); }  .df-air .dn   { color: var(--metal); }
.df-water .dt i { background: var(--water); }  .df-water .dn { color: var(--water); }

/* ================= 重点强调 ================= */
.key { color: var(--accent); }
.triad .v.key { color: var(--accent); }
.prose b.key, .lede.key { color: var(--accent); }
.warn-note {
  font-size: 12.5px; color: var(--ink-3);
  border-left: 2px solid var(--line); padding-left: 12px;
}

/* ================= 页首字号切换 ================= */
.masthead-top { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.fontmode { display: flex; align-items: center; gap: 10px; }
.fontmode-lab { font-size: 11px; letter-spacing: 0.16em; color: var(--ink-3); }
.seg-sm label { padding: 6px 14px; font-size: 12px; letter-spacing: 0.06em; }

/* 行内小按钮 */
.linkbtn {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: var(--accent); cursor: pointer;
  border-bottom: 1px solid currentColor;
  position: relative;
}
/* 行内文字按钮的命中区同样撑开，便于手指点按 */
.linkbtn::before {
  content: "";
  position: absolute;
  left: -5px; right: -5px; top: -9px; bottom: -9px;
}

/* 出生地搜索框 */
#citySearch { margin-bottom: 4px; }
#city { margin-top: 10px; }
/* 四级行政区划选择（省 → 市 → 区县 → 街道/乡镇） */
#regionBox {
  margin-top: 14px;
  padding: 18px 16px 12px;
  background: var(--bg-tint);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
#regionBox .row { gap: 14px; }
#regionBox .field-label { margin-bottom: 6px; font-size: 11px; }
#regionBox select { width: 100%; }
#regionBox .field-hint { margin-top: 12px; }

#manualBox { margin-top: 4px; }

/* 四柱每柱管辖范围 */
.pillars .gov {
  font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.02em; line-height: 1.5;
  padding: 8px 4px 0;
}

/* ---------------- 响应式 ---------------- */
/* 平板区间：5 列会过窄，提前落成 2 列（10 步 = 2×5，不留空格） */
@media (max-width: 780px) {
  .dayun { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .wrap {
    padding: 0 calc(18px + env(safe-area-inset-right)) calc(72px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
  }
  .masthead { padding: 48px 0 30px; }
  .masthead h1 { font-size: 26px; letter-spacing: 0.08em; }
  .pillars .gz { font-size: 26px; }
  .pillars .hide { font-size: 11px; }
  .triad { grid-template-columns: 1fr; }
  .triad > div + div { border-left: none; border-top: 1px solid var(--line); }
  .dayun { grid-template-columns: repeat(2, 1fr); }
  .defs .d { flex-direction: column; gap: 2px; }
  .defs .d .k { flex: none; }
  .sec { padding-top: 44px; }

  /* --- 老黄历窄屏 --- */
  .al-head { grid-template-columns: 100px 1fr; }
  .al-solar { padding: 18px 4px; }
  .al-solar-day { font-size: 44px; }
  .al-solar-yr { font-size: 11px; letter-spacing: 0.04em; }
  .al-lunar { padding: 18px 14px; }
  .al-lunar-day { font-size: 19px; letter-spacing: 0.03em; }
  .al-lunar-gz { font-size: 12px; }
  .al-yiji .al-col { padding: 18px 14px 20px; }
  .al-yiji li { font-size: 13.5px; }
  .al-step { flex: 0 0 48px; }
  .al-t { flex: 0 0 74px; }
  .al-yiji.al-yiji-sm .al-col { padding-right: 12px; }
  .al-yiji.al-yiji-sm .al-col + .al-col { padding-left: 12px; }

  /* --- 触摸可用性 --- */
  /* 分段选择器的高度与宽度统一在上面 @media (pointer: coarse) 处定义，此处不再重复 */
  /* 复选行：整行可点且高度达 44px；方框与首行文字对齐 */
  .check { align-items: flex-start; min-height: 44px; padding: 0; }
  .check input { margin: 5px 0 0; width: 20px; height: 20px; }
  /* 次要按钮略增高度 */
  .btn-ghost { padding: 14px 0; }
  /* 档案行的「删除」：视觉尺寸不变，命中区域撑到 44px */
  .hist .h { align-items: center; }
  .hist .del { padding: 14px 17px; margin: -14px -17px -14px 0; }

  /* --- 四个标签在窄屏要挤得下 --- */
  .tabs .tab { font-size: 12.5px; letter-spacing: 0.06em; text-indent: 0.06em; padding: 20px 0; }

  /* --- 塔罗窄屏适配：牌阵改单列，选牌 4 列、牌位 3 列 --- */
  .tt-spreads { grid-template-columns: 1fr; }
  .tt-spread { padding: 14px 15px; }
  .tt-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .tt-cards { grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: none; }
  .tt-slot-h { font-size: 10.5px; letter-spacing: 0.06em; }
  .tt-deck { width: 92px; height: 154px; }
  .tt-actions { max-width: none; }
  .tt-c-sym { font-size: 21px; }
  .tt-c-suit { width: 21px; height: 21px; }
  .tt-c-nm { font-size: 11px; letter-spacing: 0; }
  .tt-c-en { display: none; }
  .tt-read-nm { font-size: 16px; }
  .tt-read-t { font-size: 13.5px; }

  /* --- 术语卡、分布条、要点框窄屏适配 --- */
  .tm-x { font-size: 13px; padding: 12px 13px; }
  .howto { padding: 18px 16px 12px; }
  .howto li { font-size: 13px; }
  .callout { padding: 16px 16px 8px; }
  .callout-r { flex-direction: column; gap: 4px; }
  .callout-r .ck { flex: none; padding-top: 0; }
  .dist-row { flex-wrap: wrap; gap: 6px 10px; }
  .dist-row .dw { flex: 1 1 100%; text-align: left; }
  .pillars .gov { font-size: 9.5px; }
  .masthead-top { margin-bottom: 0; }
}

/* 触屏设备：文本框 / 日期 / 下拉的字号不得小于 16px，
   否则 iOS Safari 在聚焦时会自动放大整个页面 */
@media (pointer: coarse), (max-width: 640px) {
  input[type="text"], input[type="number"], input[type="date"], select, textarea { font-size: 16px; }
}

/* ================= 大字（适老）模式 =================
   整体放大约 25%：字号、行距、控件高度一并加大，并把次要文字加深以便阅读。 */
html.senior { --ink-2: #46444c; --ink-3: #6f6c77; }
html.senior body { font-size: 19px; line-height: 1.95; }
html.senior .wrap { max-width: 900px; }

html.senior .masthead { padding: 56px 0 34px; }
html.senior .masthead h1 { font-size: 42px; }
html.senior .fontmode-lab { font-size: 14px; }
html.senior .seg-sm label { font-size: 15px; padding: 9px 18px; }

html.senior .tabs .tab { font-size: 17px; letter-spacing: 0.14em; padding: 26px 0; }

html.senior .field-label { font-size: 15px; }
html.senior .field-hint { font-size: 15px; }
html.senior input[type="text"], html.senior input[type="number"],
html.senior input[type="date"], html.senior select { font-size: 19px; }
html.senior .seg label { font-size: 16px; }
html.senior .check span { font-size: 16.5px; }
html.senior .check input { width: 18px; height: 18px; margin-top: 8px; }
html.senior .btn { font-size: 18px; padding: 18px 0; }
html.senior .btn-ghost { font-size: 17px; padding: 16px 0; }
html.senior details.adv > summary { font-size: 15px; padding: 22px 0; }

html.senior .sec { padding-top: 68px; }
html.senior .sec > h2 { font-size: 19px; }
html.senior .sec > .sec-note { font-size: 15px; margin-bottom: 32px; }

html.senior .result-head .who { font-size: 32px; }
html.senior .result-head .when { font-size: 16px; }
html.senior .triad .k { font-size: 13px; }
html.senior .triad .v { font-size: 28px; }
html.senior .triad .sub { font-size: 13.5px; }

html.senior .defs .d { font-size: 18px; }
html.senior .defs .d .k { flex: 0 0 140px; font-size: 15.5px; }
html.senior .defs .d .v em { font-size: 14px; }

html.senior .pillars .col h4 { font-size: 14px; }
html.senior .pillars .gov { font-size: 12.5px; }
html.senior .pillars .ss { font-size: 13.5px; }
html.senior .pillars .gz { font-size: 40px; }
html.senior .pillars .hide { font-size: 14px; }
html.senior .pillars .meta { font-size: 14px; }
html.senior .pillars .foot { font-size: 14px; }

html.senior .wx .bar-row .name { font-size: 20px; }
html.senior .wx .bar-row .num { font-size: 14.5px; }
html.senior .prose p { font-size: 18px; line-height: 2.05; }
html.senior .lede { font-size: 21px; }
html.senior .hintline { font-size: 15px; }
html.senior .tag { font-size: 14.5px; padding: 7px 15px; }

html.senior .dayun .dy .gz { font-size: 26px; }
html.senior .dayun .dy .age,
html.senior .dayun .dy .yr,
html.senior .dayun .dy .tone,
html.senior .dayun .dy .el { font-size: 13px; }

html.senior .tm-x { font-size: 16px; }
html.senior .gl > summary { font-size: 16.5px; }
html.senior .gl > p { font-size: 16px; }
html.senior .gl-group h3 { font-size: 15px; }
html.senior .howto li { font-size: 16.5px; }
html.senior .howto h3 { font-size: 15px; }
html.senior .callout-r { font-size: 16.5px; }
html.senior .callout-t { font-size: 15px; }
html.senior .callout-r .ck { flex: 0 0 78px; font-size: 13.5px; }
html.senior .dist-row { font-size: 15.5px; }
html.senior .dist-row .dn { flex: 0 0 58px; }
html.senior .dist-row .dc, html.senior .dist-row .dw { font-size: 13.5px; }
html.senior .dist-row .dw { flex: 0 0 108px; }
html.senior .dist-h { font-size: 14.5px; }
html.senior .al-terms { font-size: 14px; }

/* 塔罗 */
html.senior .tt-intro p { font-size: 16px; }
html.senior .tt-sp-n { font-size: 17px; }
html.senior .tt-sp-c { font-size: 13px; }
html.senior .tt-sp-s { font-size: 13.5px; }
html.senior .tt-slot-h { font-size: 13px; }
html.senior .tt-c-nm { font-size: 14px; }
html.senior .tt-c-sym { font-size: 30px; }
html.senior .tt-c-suit { width: 30px; height: 30px; }
html.senior .tt-read-pos { font-size: 13px; }
html.senior .tt-read-nm { font-size: 20px; }
html.senior .tt-read-or { font-size: 13px; }
html.senior .tt-read-en { font-size: 13px; }
html.senior .tt-kw-i { font-size: 14px; }
html.senior .tt-read-t { font-size: 17px; }
html.senior .tt-q-echo { font-size: 15px; }
html.senior .empty-state p { font-size: 17px; }
html.senior .empty-state .es-t { font-size: 24px; }
html.senior .empty-state .es-note { font-size: 14.5px; }

html.senior .al-solar-day { font-size: 60px; }
html.senior .al-lunar-day { font-size: 26px; }
html.senior .al-lunar-gz { font-size: 16px; }
html.senior .al-lunar-sx { font-size: 15px; }
html.senior .al-bar input[type="date"] { font-size: 20px; }
html.senior .al-back { font-size: 14px; }
html.senior .al-yiji h3 { font-size: 19px; }
html.senior .al-yiji li { font-size: 17.5px; }
html.senior .al-chip { font-size: 14.5px; }
html.senior .al-t-name { font-size: 14px; }
html.senior .al-t-gz { font-size: 19px; }
html.senior .al-t-luck { font-size: 12.5px; }
html.senior .al-sub { font-size: 14.5px; }
html.senior .al-td-head b { font-size: 21px; }
html.senior .hist .h { font-size: 17px; }
html.senior footer { font-size: 14px; }

/* 窄屏 + 大字：再收敛一点，保证不溢出 */
@media (max-width: 640px) {
  html.senior body { font-size: 18px; }
  html.senior .tabs .tab { font-size: 12.5px; letter-spacing: 0; padding: 22px 0; }
  html.senior .masthead h1 { font-size: 32px; }
  html.senior .pillars .gz { font-size: 28px; }
  html.senior .triad .v { font-size: 24px; }
  html.senior .defs .d .k { flex: none; }
  html.senior .dayun { grid-template-columns: repeat(2, 1fr); }
  html.senior .dist-row .dw { flex: 1 1 100%; }
  html.senior .callout-r .ck { flex: none; }
}

/* 极窄屏（≤400px，含 320px 小屏）：四个标签再收一点，保证同一行放得下 */
@media (max-width: 400px) {
  .tabs .tab { font-size: 11.5px; letter-spacing: 0.02em; text-indent: 0.02em; padding: 18px 0; }
  html.senior .tabs .tab { font-size: 11.5px; letter-spacing: 0; }
  .tt-sp-n { font-size: 14px; }
  .tt-c-nm { font-size: 10.5px; }
  .tt-grid { gap: 6px; }
  .tt-cards { gap: 8px; }
}

@media print {
  .masthead, form, .actions, footer, .tabs, .al-bar, .al-back-row, .al-footnote,
  .empty-state, .gl-sec, .al-terms, .howto-terms,
  .tt-spreads, .tt-stage, .tt-actions { display: none; }
  body { font-size: 12px; }
  #viewChart[hidden], #viewAlmanac[hidden], #viewTarot[hidden] { display: none !important; }
  .tm-x { display: none; }
  .al-in { animation: none !important; }
  .al-yiji { break-inside: avoid; }
  .al-head { break-inside: avoid; }
  .tt-card-in { transition: none !important; }
  .tt-read { break-inside: avoid; }
}