/* intake.css —— 录入页（ri- = reading intake）
 *
 * 设计：三层渐进披露。第一屏只见「出生日期时间 + 性别」两项，
 * 农历/四柱、出生城市/姓名收进按需展开的行内折叠区。
 *
 * ⚠ 约束：滚轮几何锁死在 js/app.js 的 ITEM_H = 44（.wheel 176px / .wi 44px /
 *   .spacer 66px，定义在 style.css）。本文件只改滚轮外围的框与色，
 *   一律不碰 .wheel / .wheel-col / .wi / .spacer 的尺寸。
 */

/* ---------- 版面 ---------- */
/* 必须带 .is-active：.view { display:none } 只有一个类，
   而 .view[data-view="input"] 是「类+属性」权重更高，不加限定会把
   「非当前页要隐藏」这条规则整个盖掉，切到命盘后录入表单仍留在页面上。 */
.view[data-view="input"].is-active {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px 72px;
  overflow: hidden;
}

/* ---------- 氛围层（与欢迎页同源，纯装饰） ---------- */
.ri-atmos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ri-ring {
  position: absolute;
  left: 50%;
  top: 120px;
  border: 1px solid rgba(184, 149, 82, .07);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.ri-ring--outer { width: 620px; height: 620px; }
.ri-ring--inner { width: 420px; height: 420px; border-color: rgba(184, 149, 82, .05); }
.ri-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .25;
  animation: riTwinkle 4.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes riTwinkle {
  0%, 100% { opacity: .1; }
  50%      { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .ri-star { animation: none; opacity: .25; }
}

/* ---------- 面板 ----------
 * 窄屏：单列，左栏叙事在上、表单在下。
 * ≥1000px：两栏，左叙事右表单。两种版式共用同一份 DOM 顺序，
 * 所以键盘 Tab 与读屏顺序在两种版式下一致。
 */
.ri-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-content: start;
}

/* ---------- 左栏：品牌叙事 ---------- */
.ri-aside { text-align: center; }
.ri-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.ri-mark {
  width: 46px;
  height: 46px;
  display: block;
  filter: drop-shadow(0 0 16px rgba(184, 149, 82, .28));
}
.ri-brand-name {
  font-family: "ShanmuSong", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  color: var(--gold);
  font-size: 11.5px;
  letter-spacing: .26em;
  text-indent: .26em;
}
.ri-eyebrow {
  margin: 0 0 12px;
  color: var(--gold-dim);
  font-size: 10px;
  letter-spacing: .34em;
  text-indent: .34em;
}
.ri-title {
  margin: 0;
  font-family: "ShanmuSong", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  color: var(--gold-bright);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .1em;
  text-indent: .1em;
}
.ri-lead {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.8;
}
.ri-trust {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 22px 0 0;
  color: var(--gold-dim);
  font-size: 11.5px;
  letter-spacing: .08em;
}
.ri-trust svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* ---------- 右栏：表单本体 ---------- */
.ri-main {
  display: flex;
  flex-direction: column;
  gap: 34px;          /* 字段组之间放松 */
}
/* 右栏小标题：窄屏下与左栏叙事重复，藏起来；两栏时才出现 */
.ri-main-head { display: none; }
.ri-step {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .28em;
  text-indent: .28em;
}
.ri-main-title {
  margin: 0;
  font-family: "ShanmuSong", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  color: var(--gold-bright);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .08em;
}
.ri-main-sub {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

/* ---------- 字段 ---------- */
.ri-field {
  margin: 0;
  padding: 0;
  border: none;   /* fieldset 复位 */
}
.ri-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  padding: 0;     /* legend 复位：legend 是 fieldset 首子元素，靠这里撑满一行 */
  margin: 0 0 14px;   /* 组内：标签与控件贴紧，靠留白区分层级而不是靠线 */
}
.ri-label {
  font-family: "ShanmuSong", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  color: var(--gold-bright);
  font-size: 14.5px;
  letter-spacing: .16em;
}
.ri-req {
  color: var(--gold-dim);
  font-size: 10.5px;
  letter-spacing: .2em;
}

/* ---------- 分段（性别 / 历法） ---------- */
.ri-field--gender .segmented,
#ri-cal .segmented { width: 100%; }

/* ---------- 折叠区 ---------- */
.ri-more { margin-top: 14px; }
.ri-more--optional { margin-top: 0; }

.ri-more-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 2px;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  color: var(--gold-dim);
  font-size: 12.5px;
  letter-spacing: .08em;
  cursor: pointer;
  text-align: left;
  transition: color .2s ease;
}
.ri-more-btn:hover { color: var(--gold); }
.ri-more-btn:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}
.ri-more-note {
  margin-left: auto;
  color: #6f6a5c;
  font-size: 10.5px;
  letter-spacing: 0;
}
.ri-plus {
  color: var(--gold);
  font-size: 13px;
  line-height: 1;
}
.ri-chev {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
}
.ri-more-btn[aria-expanded="true"] .ri-chev {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.ri-more-btn[aria-expanded="true"] { color: var(--gold); }

/* 展开用 class 控制，不用 hidden ——
   app.js 的 applyCalendarMode() 会对 [data-when] 写 hidden，两者不能抢同一个开关。 */
.ri-more-body {
  display: none;
  padding: 4px 0 2px;
}
.ri-more-body.is-open {
  display: block;
  animation: riReveal .28s cubic-bezier(.22, .8, .22, 1) both;
}
@keyframes riReveal {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ri-more-body.is-open { animation: none; }
}

.ri-hint {
  margin: 10px 0 0;
  min-height: 1em;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

/* ---------- 选填子项 ---------- */
.ri-sub { margin-top: 16px; }
.ri-sub:first-child { margin-top: 6px; }
.ri-sublabel {
  display: block;
  margin-bottom: 8px;
  color: var(--gold-dim);
  font-size: 12px;
  letter-spacing: .14em;
}
.ri-input {
  width: 100%;
  padding: 11px 12px;
  box-sizing: border-box;
  background: rgba(184, 149, 82, .04);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--text);
  font-size: 14px;
  transition: border-color .2s ease;
}
.ri-input::placeholder { color: #6f6a5c; }
.ri-input:focus {
  outline: none;
  border-color: rgba(184, 149, 82, .45);
}

/* ---------- 页脚 ---------- */
.ri-privacy {
  margin: 0;
  text-align: center;
  color: #6f6a5c;
  font-size: 11.5px;
  letter-spacing: .06em;
}
.view[data-view="input"].is-active .primary-btn { margin-top: 0; }
.view[data-view="input"].is-active .err { margin: 0; text-align: center; }

/* ---------- 窄屏 ---------- */
@media (max-width: 420px) {
  .view[data-view="input"].is-active { padding: 28px 16px 56px; }
  .ri-panel { gap: 22px; }
  .ri-title { font-size: 21px; }
  .ri-ring--outer { width: 420px; height: 420px; }
  .ri-ring--inner { width: 300px; height: 300px; }
  .ri-more-note {
    /* 窄屏一行挤不下，说明文字换到下一行 */
    margin-left: 0;
    flex-basis: 100%;
  }
  .ri-more-btn { flex-wrap: wrap; }
}

/* ---------- 两栏（宽屏） ---------- */
@media (min-width: 1000px) {
  .view[data-view="input"].is-active { align-items: center; padding: 48px 24px; }

  .ri-panel {
    width: min(100%, 880px);
    grid-template-columns: minmax(0, 320px) minmax(0, 440px);
    gap: 0 64px;
    align-items: start;
  }

  /* 左栏：靠左排，与右栏首行齐平。
     不用 sticky —— 左栏只有 ~270px 高、右栏近 700px，粘不出价值，
     反而会把左栏整体下推一个 top 的距离。
     也不用 border-right：竖线只能覆盖左栏那一小段，看着像断掉的线，
     两栏之间靠 64px 间距分隔就够。 */
  .ri-aside {
    text-align: left;
    padding-right: 8px;
  }
  .ri-brand {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 34px;
  }
  .ri-mark { width: 38px; height: 38px; }
  .ri-title { font-size: 30px; }
  .ri-trust { margin-top: 30px; }

  .ri-main-head { display: block; }
}

/* ---------- 滚轮：去盒子化 ----------
 * 原样式是带边框的圆角盒（style.css:484），像移动端原生 picker。
 * 这里只在录入页去掉外框与底色，保留几何（ITEM_H=44 不能动），
 * 让数字直接浮在页面底色上，选中区只用两条极细描金线界定。 */
.view[data-view="input"].is-active .wheel {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
.view[data-view="input"].is-active .wheel-band {
  left: 0;
  right: 0;
  background: none;
  border-radius: 0;
  border-top: 1px solid rgba(184, 149, 82, .28);
  border-bottom: 1px solid rgba(184, 149, 82, .28);
}
/* 选中项：宋体 + 亮金，与未选中拉开两档明度 */
.view[data-view="input"].is-active .wheel-col .wi.on {
  font-family: "ShanmuSong", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  text-shadow: 0 0 18px rgba(184, 149, 82, .3);
}
.view[data-view="input"].is-active .wheel-readout {
  font-family: "ShanmuSong", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  font-size: 14px;
  letter-spacing: .12em;
}

/* ---------- 主按钮：与欢迎页 CTA 同一套参数 ----------
 * 欢迎页 .wc-cta（welcome.css:135）是品牌金实心，墨底色字，
 * 对比度是算过的（最浅一档 12.7、最深一档 6.0）。两个入口页对齐到它，
 * 而不是 style.css:1348 那个带重投影的全站版本 —— 投影是"塑料感"的来源。 */
.view[data-view="input"].is-active .primary-btn {
  border: 1px solid rgba(231, 211, 164, .7);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 34px rgba(0, 0, 0, .34);
  color: var(--bg);
  font-family: "ShanmuSong", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .28em;
  text-indent: .28em;
  min-height: 54px;
}
.view[data-view="input"].is-active .primary-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 16px 38px rgba(0, 0, 0, .38);
}
.view[data-view="input"].is-active .primary-btn:active { transform: translateY(0) scale(.995); }
.view[data-view="input"].is-active .primary-btn::before {
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .22), transparent);
}

/* ---------- 分段控件：与去框后的滚轮统一 ----------
 * 全站 .seg 是描边方块（style.css:465）。录入页把滚轮去框之后，
 * 这两个带框小方块成了整屏唯一的"盒子"，反而显眼。
 * 这里改成底线式：静默态只有一条极淡的底线，选中态底线变亮金 + 文字提亮，
 * 与滚轮那条描金选中线是同一套语汇。 */
.view[data-view="input"].is-active .segmented { gap: 0; }
.view[data-view="input"].is-active .seg {
  border: none;
  border-bottom: 1px solid rgba(184, 149, 82, .18);
  border-radius: 0;
  box-shadow: none;
  padding: 10px 26px;
  font-family: "ShanmuSong", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  font-size: 15px;
}
.view[data-view="input"].is-active .seg:hover {
  border-bottom-color: rgba(184, 149, 82, .4);
  color: var(--gold-dim);
}
.view[data-view="input"].is-active .seg.is-active {
  border-bottom-color: var(--gold);
  color: var(--gold-bright);
  font-weight: 400;
  box-shadow: none;
}
/* 键盘焦点要看得见 —— 去掉边框后不能连焦点一起丢 */
.view[data-view="input"].is-active .seg:focus-visible {
  outline: 1px solid var(--gold-bright);
  outline-offset: 3px;
}

/* ---------- 手动输入 ----------
 * 与去框后的滚轮同一语汇：无盒子、底线式、宋体数字。
 * 焦点态把底线点亮，而不是画一圈边框。 */
.ri-manual { padding: 8px 0 2px; }
.ri-manual-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.ri-mi {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--gold-dim);
  font-size: 12px;
}
.ri-mi input {
  width: 3.4em;
  padding: 8px 2px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(184, 149, 82, .3);
  border-radius: 0;
  color: var(--gold-bright);
  font-family: "ShanmuSong", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  font-size: 21px;
  letter-spacing: .06em;
  text-align: center;
  transition: border-color .2s ease;
}
.ri-mi input:first-child { width: 4.6em; }   /* 年份四位 */
.ri-mi input:focus {
  outline: none;
  border-bottom-color: var(--gold);
}
.ri-leap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--gold-dim);
  font-size: 12.5px;
}
.ri-manual-msg {
  margin: 10px 0 0;
  min-height: 1em;
  color: var(--gold-dim);
  font-size: 11.5px;
}

/* 滚轮 ⇄ 手动 的切换：文字按钮，不抢主按钮的视觉 */
.ri-mode-toggle {
  display: block;
  margin: 10px 0 0 auto;
  padding: 4px 2px;
  background: none;
  border: none;
  color: var(--gold-dim);
  font-size: 12px;
  letter-spacing: .1em;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.ri-mode-toggle:hover { color: var(--gold); border-bottom-color: rgba(184, 149, 82, .4); }
.ri-mode-toggle:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 3px; }

/* ---------- 复选框：原生蓝改成品牌金 ---------- */
.view[data-view="input"].is-active input[type="checkbox"] {
  accent-color: var(--gold);
  width: 14px;
  height: 14px;
}
.view[data-view="input"].is-active .checkline {
  color: var(--gold-dim);
  font-size: 12.5px;
}
.view[data-view="input"].is-active .lng-readout {
  font-family: "ShanmuSong", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  font-size: 13px;
}

/* ---------- 四柱格：压进金/墨体系 ----------
 * 原样式是带渐变底、重投影、14px 大圆角的卡片，五行色还开到满饱和，
 * 在这一屏里像另一个产品。这里去掉盒子感、把五行色统一降到同一明度档，
 * 但不抹掉五行区分 —— 那是有信息量的，只是不该比标题还响。 */
.view[data-view="input"].is-active .pillars-input { gap: 14px; }
.view[data-view="input"].is-active .pillar-group {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(184, 149, 82, .3);
  border-radius: 0;
  box-shadow: none;
  min-width: 62px;
}
.view[data-view="input"].is-active .pillar-cell {
  font-family: "ShanmuSong", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  font-size: 26px;
  font-weight: 400;
  text-shadow: none;
  padding: 10px 4px;
  min-width: 56px;
  filter: saturate(.55) brightness(1.05);   /* 保留五行辨识，降一档响度 */
}
.view[data-view="input"].is-active .pillar-cell:first-of-type {
  border-bottom: 1px solid rgba(184, 149, 82, .14);
}
.view[data-view="input"].is-active .pillar-cell:hover {
  background: rgba(184, 149, 82, .07);
}
.view[data-view="input"].is-active .hint {
  color: var(--muted);
  font-size: 12px;
}

/* 手动模式下的滚轮：移出视口而非 display:none。
   必须保持被渲染，否则 scrollTop 写不进去（滚动盒不存在）。 */
.ri-offstage {
  position: absolute !important;
  left: -9999px !important;
  top: 0;
  width: 420px !important;
}

/* ==========================================================================
   可点击元素统一规范
   实测（CDP 量的）改前尺寸：模式切换 57×26、折叠行 440×42、分段 73×42、
   复选框行 127×20 —— 除主按钮外全部低于 44px 触摸目标。
   这里统一三件事：① 点击区补到 ≥44px；② 每个状态都有反馈（hover / active /
   focus-visible）；③ 焦点环用同一套金色描边，不依赖浏览器默认。
   ========================================================================== */

/* ---- 焦点环：全页统一 ---- */
.view[data-view="input"].is-active button:focus-visible,
.view[data-view="input"].is-active input:focus-visible,
.view[data-view="input"].is-active label:focus-within {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- 折叠行：整行可点，hover 时整行浮起淡金底 + 左缘金条 ---- */
.ri-more-btn {
  position: relative;
  min-height: 52px;
  padding: 14px 12px 14px 14px;
  margin-left: -14px;          /* 让底色铺满内容宽度，而不是缩进一块 */
  margin-right: -12px;
  width: calc(100% + 26px);
  border-radius: 2px;
  transition: color .2s ease, background .2s ease;
}
.ri-more-btn::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--gold);
  transform: translateY(-50%);
  transition: height .22s cubic-bezier(.22, .8, .22, 1);
}
.ri-more-btn:hover { background: rgba(184, 149, 82, .05); }
.ri-more-btn:hover::after,
.ri-more-btn[aria-expanded="true"]::after { height: 22px; }
.ri-more-btn:active { background: rgba(184, 149, 82, .09); }

/* ---- 滚轮 ⇄ 手动：从文字链改成胶囊，形态上明确是个可按的东西 ---- */
.ri-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin: 12px 0 0 auto;
  padding: 0 18px;
  border: 1px solid rgba(184, 149, 82, .28);
  border-radius: 999px;
  background: none;
  color: var(--gold-dim);
  font-size: 12.5px;
  letter-spacing: .1em;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.ri-mode-toggle::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}
.ri-mode-toggle:hover {
  color: var(--gold-bright);
  border-color: rgba(184, 149, 82, .55);
  background: rgba(184, 149, 82, .06);
}
.ri-mode-toggle:active { transform: translateY(1px); }
.ri-mode-toggle[aria-pressed="true"] {
  color: var(--gold);
  border-color: rgba(184, 149, 82, .45);
}

/* ---- 分段（性别 / 历法）---- */
.view[data-view="input"].is-active .seg {
  min-height: 46px;
  padding: 12px 30px;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.view[data-view="input"].is-active .seg:hover { background: rgba(184, 149, 82, .05); }
.view[data-view="input"].is-active .seg:active { transform: translateY(1px); }

/* ---- 真太阳时复选框：把整行做成 44px 的可点标签 ---- */
.view[data-view="input"].is-active .checkline {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 8px 0 0;
  cursor: pointer;
  gap: 9px;
  transition: color .2s ease;
}
.view[data-view="input"].is-active .checkline:hover { color: var(--gold); }
.view[data-view="input"].is-active input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ---- 四柱格 ---- */
.view[data-view="input"].is-active .pillar-cell {
  min-height: 52px;
  transition: background .18s ease;
}
.view[data-view="input"].is-active .pillar-cell:active { background: rgba(184, 149, 82, .13); }

/* ---- 主按钮按下态 ---- */
.view[data-view="input"].is-active .primary-btn:active { transform: translateY(1px) scale(.997); }

/* ---- 触摸设备：没有 hover，改由 active 提供唯一反馈 ---- */
@media (hover: none) {
  .ri-more-btn:hover { background: none; }
  .ri-more-btn:hover::after { height: 0; }
  .ri-more-btn[aria-expanded="true"]::after { height: 22px; }
}

/* 姓名输入：与手动输入框、滚轮同一套底线语言，不再是唯一带框的盒子 */
.ri-input {
  padding: 12px 2px;
  min-height: 44px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(184, 149, 82, .3);
  border-radius: 0;
  font-family: "ShanmuSong", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  font-size: 16px;
  letter-spacing: .06em;
}
.ri-input:focus { border-bottom-color: var(--gold); }

/* =========================================================
   录入页左侧：AI 解读内容预告
   纯展示模块，不参与表单状态和业务逻辑。
   只用 .ri-benefits 前缀，不覆盖任何既有控件。
   ========================================================= */

.ri-benefits {
  width: min(100%, 340px);
  margin-top: clamp(38px, 6vh, 72px);
  font-family: "ShanmuSong", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
}

.ri-benefits__eyebrow {
  margin: 0 0 18px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .28em;
}

.ri-benefits__list {
  position: relative;
  display: grid;
  gap: 17px;
  margin: 0;
  padding: 0 0 0 20px;
  list-style: none;
}

/* 纵向目录线 */
.ri-benefits__list::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 3px;
  width: 1px;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(184, 149, 82, .52) 0%,
    rgba(184, 149, 82, .2) 72%,
    rgba(184, 149, 82, .04) 100%
  );
}

.ri-benefits__item {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  opacity: .68;
  transition: opacity 260ms ease, transform 260ms ease;
}

/* 目录节点：光晕色取 --bg (#0B1412 = rgb(11,20,18))，与页面底色一致 */
.ri-benefits__item::before {
  position: absolute;
  top: 7px;
  left: -19px;
  box-sizing: border-box;
  width: 7px;
  height: 7px;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(184, 149, 82, .72);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 3px rgba(11, 20, 18, .92);
  transition: border-color 260ms ease, background-color 260ms ease, box-shadow 260ms ease;
}

.ri-benefits__number {
  padding-top: 1px;
  color: rgba(184, 149, 82, .82);
  font-size: 11px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1.55;
  letter-spacing: .1em;
}

.ri-benefits__copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.ri-benefits__copy strong {
  color: var(--gold-bright);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .1em;
}

/* 说明文字走 --muted（暖灰），不用原稿的 rgba(185,196,187,.7)：
   那是偏冷的绿灰，不在本项目色板里，与旁边的 .ri-lead 会差一档色温 */
.ri-benefits__copy > span {
  color: var(--muted);
  font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .025em;
}

@media (hover: hover) and (pointer: fine) {
  .ri-benefits__item:hover {
    opacity: 1;
    transform: translateX(3px);
  }
  .ri-benefits__item:hover::before {
    border-color: var(--gold-bright);
    background: var(--gold);
    box-shadow: 0 0 0 3px rgba(11, 20, 18, .92), 0 0 12px rgba(184, 149, 82, .25);
  }
}

/* 中等高度桌面：缩短纵向间距，防止内容超出视口 */
@media (min-width: 1000px) and (max-height: 760px) {
  .ri-benefits { margin-top: 28px; }
  .ri-benefits__eyebrow { margin-bottom: 13px; }
  .ri-benefits__list { gap: 12px; }
  .ri-benefits__copy { gap: 1px; }
}

/* 单栏（< 1000px）：压成一行内容索引，避免把表单推到首屏以下。
   断点取 999px 而非原稿的 760px —— 两栏版式是在 min-width:1000px 才生效的，
   用 760 会让 761~999 这段处在「版面已单栏、模块仍按桌面竖排」的错位区间。 */
@media (max-width: 999px) {
  .ri-benefits {
    width: 100%;
    margin-top: 22px;
  }
  .ri-benefits__eyebrow {
    margin-bottom: 10px;
    font-size: 10px;
  }
  .ri-benefits__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* .ri-aside 单栏下是居中的，但 flex 不吃 text-align */
    gap: 7px 18px;
    padding-left: 0;
  }
  .ri-benefits__list::before,
  .ri-benefits__item::before { display: none; }
  .ri-benefits__item {
    display: inline-flex;
    gap: 5px;
    width: auto;
    opacity: .82;
    transform: none;
  }
  .ri-benefits__number {
    padding-top: 1px;
    font-size: 10px;
  }
  .ri-benefits__copy { display: block; }
  .ri-benefits__copy strong {
    font-size: 12px;
    line-height: 1.55;
    letter-spacing: .07em;
  }
  .ri-benefits__copy > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ri-benefits__item,
  .ri-benefits__item::before { transition: none; }
}
.wheel-col--empty .wi { visibility: hidden; }
.wheel-col--empty::after {
  content: "—"; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; color: var(--gold-dim); pointer-events: none; font-size: 18px;
}

/* ---------- 日期选择：字段定位与确认 ---------- */
.wheel-labels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 3px;
  color: var(--gold-dim);
  font-size: 12px;
  letter-spacing: .18em;
  text-align: center;
}
/* 未确认占位必须相对各自列定位，不能五个破折号叠在整个滚轮中央。 */
.view[data-view="input"].is-active .wheel-col { position: relative; }
.view[data-view="input"].is-active .wheel-foot {
  justify-content: flex-start;
  gap: 10px;
  margin-top: 12px;
}
.wheel-readout-label {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid rgba(184, 149, 82, .28);
  border-radius: 999px;
  color: var(--gold-dim);
  font-size: 11px;
  letter-spacing: .08em;
}
.ri-mi input::placeholder { color: rgba(184, 149, 82, .38); opacity: 1; }

/* ---------- 四柱：完整六十甲子整柱选择 ---------- */
.view[data-view="input"].is-active .pillars-input {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
.view[data-view="input"].is-active .pillar-group {
  min-width: 0;
  border: 1px solid rgba(184, 149, 82, .24);
  border-radius: 8px;
  overflow: hidden;
}
.view[data-view="input"].is-active .pillar-cap {
  padding: 7px 4px;
  background: rgba(184, 149, 82, .09);
  color: var(--gold-dim);
  font-size: 12px;
  letter-spacing: .12em;
  text-indent: .12em;
}
.view[data-view="input"].is-active .pillar-cell,
.view[data-view="input"].is-active .pillar-cell:first-of-type {
  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 10px 4px;
  border: 0;
  color: var(--gold-bright);
  font-size: 24px;
}
.view[data-view="input"].is-active .pillar-cell.is-empty {
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .05em;
  filter: none;
}
.pillar-readout {
  margin: 13px 0 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
body.gz-open { overflow: hidden; }
.gz-panel {
  width: min(92vw, 620px);
  max-height: min(86vh, 720px);
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.gz-head {
  position: relative;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gz-title { margin: 0; }
.gz-title::after { margin-top: 8px; }
.gz-close {
  position: absolute;
  right: -4px;
  top: -6px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--gold-dim);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.gz-close:hover { color: var(--gold-bright); }
.gz-close:focus-visible,
.gz-item:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.gz-help {
  margin: 12px 0 14px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.gz-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 4px 8px;
  scrollbar-color: rgba(184, 149, 82, .36) transparent;
}
.gz-item {
  min-height: 54px;
  padding: 7px 4px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px;
  font-family: "ShanmuSong", "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
}
.gz-item small { color: var(--muted); font: 10px/1 sans-serif; }
.gz-item strong { font-size: 20px; font-weight: 400; }
.gz-item.on { background: rgba(184, 149, 82, .09); }

@media (max-width: 560px) {
  .wheel-labels { font-size: 11px; }
  .view[data-view="input"].is-active .wheel-col .wi { font-size: 15px; }
  .view[data-view="input"].is-active .wheel-col .wi.on { font-size: 18px; }
  .view[data-view="input"].is-active .pillars-input { gap: 6px; }
  .view[data-view="input"].is-active .pillar-cell,
  .view[data-view="input"].is-active .pillar-cell:first-of-type { min-height: 58px; font-size: 21px; }
  .view[data-view="input"].is-active .pillar-cell.is-empty { font-size: 11px; }
  .gz-panel { width: 94vw; max-height: 88vh; padding: 14px 10px; }
  .gz-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .gz-item { min-height: 52px; grid-template-columns: 1fr; gap: 3px; padding: 5px 2px; }
  .gz-item small { font-size: 9px; }
  .gz-item strong { font-size: 18px; }
}