/* ============================================================
   起名（2026-10-16 新版）：纸 #F6F5F0 · 墨 #111110，与测名入口同一套纸墨。
   姓氏 → 生辰 → 心意 → 起名中 → 三个名字 → 细看 → 读名。
   不用卡片、格线、渐变、光晕、印章，也不用五行颜色。
   交互状态的过渡统一走 --fc-motion-* 变量；内容入场动画用 @keyframes。
   ============================================================ */
body.naming-mode {
  --nm-paper: #f6f5f0;
  --nm-ink: #111110;
  --nm-ink-2: #45443f;
  --nm-ink-3: #5e5d58;
  --nm-mute: #8c8a82;
  --nm-faint: #b9b7af;
  --nm-ghost: #c4c2ba;
  --nm-hair: rgba(17, 17, 16, .1);
  --nm-tint: rgba(17, 17, 16, .05);
  --nm-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --nm-ease: cubic-bezier(.2, .7, .2, 1);
  min-height: 100dvh;
  background: var(--nm-paper);
  color: var(--nm-ink);
}
body.naming-mode .name-shell { background: var(--nm-paper); box-shadow: none; }

/* 起名中与细看：切换栏和底栏退开，只留名字 */
body.naming-mode .name-mode-bar,
body.naming-mode .name-tab-bar { transition: opacity var(--fc-motion-slow) var(--fc-motion-ease); }
body.naming-focus-mode .name-mode-bar,
body.naming-focus-mode .name-tab-bar { opacity: 0; pointer-events: none; }

body.naming-mode .view.naming-view {
  min-height: calc(100dvh - var(--fc-header-height, 64px) - 44px);
  padding: 0 0 calc(112px + env(safe-area-inset-bottom));
  background: var(--nm-paper);
}
body.naming-mode .view.naming-view > .naming-page {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 390px);
  margin: 0 auto;
  padding: 0 22px;
}
.naming-view [hidden] { display: none !important; }

/* ---------- 共用 ---------- */
.naming-view .primary-action {
  --fc-button-radius: 26px;
  --fc-button-padding: 0 24px;
  --fc-button-primary-border: var(--nm-ink);
  --fc-button-primary-surface: var(--nm-ink);
  --fc-button-primary-color: var(--nm-paper);
  --fc-button-primary-hover-surface: #262522;
  --fc-button-primary-hover-border: #262522;
  --fc-button-disabled-opacity: 1;
  width: 240px;
  min-height: 52px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 4px;
  text-indent: 4px;
}
.naming-view .primary-action:disabled {
  --fc-button-primary-border: #e4e2db;
  --fc-button-primary-surface: #e4e2db;
  --fc-button-primary-color: var(--nm-mute);
  cursor: default;
}
.naming-view .text-back {
  --fc-button-color: var(--nm-ink-3);
  --fc-button-hover-color: var(--nm-ink);
  min-height: 44px;
  margin: 8px 0 0;
  padding: 0;
  font-size: 13px;
  letter-spacing: 1px;
}
.naming-step-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 36px;
}
.naming-step-back {
  --fc-button-color: var(--nm-mute);
  --fc-button-hover-color: var(--nm-ink);
  min-height: 44px;
  padding: 0 16px;
  font-size: 12px;
  letter-spacing: 2px;
}
.naming-step-back .fc-icon { transition: transform var(--fc-motion-state) var(--fc-motion-ease); }
.naming-step-back:hover .fc-icon { transform: translateX(-3px); }
.naming-caption {
  margin: 0;
  color: var(--nm-mute);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 1px;
  text-align: center;
}
.naming-loading-head {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 12px;
  margin: 46px 0 0;
  color: var(--nm-mute);
  font-size: 13px;
  letter-spacing: 2px;
}
.naming-loading-head b { font-family: var(--nm-mono); font-size: 10px; font-weight: 400; letter-spacing: 1px; }
.naming-beats {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.naming-beats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--nm-ghost);
  font-size: 15px;
  letter-spacing: 2px;
  transition: color var(--fc-motion-state) var(--fc-motion-ease);
}
.naming-beats li.is-done { color: var(--nm-ink-3); }
.naming-beats li.is-current { color: var(--nm-ink); }
.naming-beats i {
  display: block;
  width: 14px;
  height: 1.5px;
  background: var(--nm-ink);
  opacity: 0;
  transform: scaleX(0);
  transition: opacity var(--fc-motion-state) var(--fc-motion-ease), transform var(--fc-motion-slow) var(--fc-motion-ease);
}
.naming-beats li.is-current i { opacity: 1; transform: none; }
.naming-sub { margin: 0; color: var(--nm-mute); font-size: 13px; line-height: 18px; letter-spacing: 2px; }
.naming-plain {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--nm-tint);
  color: var(--nm-ink-2);
  font-size: 12.5px;
  line-height: 1.85;
}
.naming-plain > span { margin-right: 8px; color: var(--nm-mute); font-size: 13px; letter-spacing: 1.5px; }
.naming-plain > b { font-weight: 400; }
.naming-points { display: flex; flex-direction: column; gap: 4px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.9; letter-spacing: .5px; }
.naming-points:empty { display: none; }
.naming-points li { position: relative; padding-left: 16px; }
.naming-points li::before { position: absolute; left: 0; color: var(--nm-mute); content: "·"; }

/* ---------- 填写：步骤与标题 ---------- */
.naming-steps {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.naming-steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--nm-faint);
  transition: color var(--fc-motion-medium) var(--fc-motion-ease);
}
.naming-steps li.is-done { color: var(--nm-ink-3); }
.naming-steps li.is-current { color: var(--nm-ink); }
.naming-steps span { font-family: var(--nm-mono); font-size: 10px; letter-spacing: 1px; }
.naming-steps b { font-size: 12px; font-weight: 400; letter-spacing: 2px; }
.naming-steps i {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--nm-ink);
  opacity: 0;
  transform: scaleX(0);
  transition: opacity var(--fc-motion-medium) var(--fc-motion-ease), transform var(--fc-motion-slow) var(--fc-motion-ease);
}
.naming-steps li.is-current i { opacity: 1; transform: none; }
.naming-view .naming-title {
  margin: 44px 0 0;
  font-size: 19px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 3px;
  text-align: center;
}
.naming-title.is-entering { animation: nm-title .5s ease both; }
.naming-step-form { display: flex; flex-direction: column; }
.naming-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 330px;
  padding-top: 34px;
  animation: nm-in .5s var(--nm-ease) both;
}
.naming-step > * { animation: nm-in .5s var(--nm-ease) both; }
.naming-step > *:nth-child(2) { animation-delay: 70ms; }
.naming-step > *:nth-child(3) { animation-delay: 140ms; }
.naming-step > *:nth-child(n + 4) { animation-delay: 200ms; }

/* 姓氏：只留一格或两格 */
.naming-surname-field { position: relative; display: flex; justify-content: center; margin-top: 10px; cursor: text; }
.naming-glyphs { display: flex; justify-content: center; gap: 18px; }
.naming-glyph { display: flex; flex-direction: column; align-items: center; width: 60px; }
.naming-glyph > b { height: 58px; font-size: 44px; font-weight: 400; line-height: 58px; }
.naming-glyph.is-filled > b { animation: nm-drop .45s ease both; }
.naming-glyph > i { display: block; width: 32px; height: 1px; margin-top: 4px; background: var(--nm-ghost); }
.naming-glyph.is-filled > i { background: var(--nm-ink); }
.naming-surname-field:focus-within .naming-glyph:not(.is-filled) > i { background: var(--nm-ink); animation: nm-blink 1.1s steps(2, start) infinite; }
.naming-glyph__py, .naming-glyph__st { height: 14px; font-family: var(--nm-mono); font-size: 13px; }
.naming-glyph__py { margin-top: 11px; color: var(--nm-ink-3); }
.naming-glyph__st { margin-top: 7px; color: var(--nm-mute); }
.naming-surname-field input {
  position: absolute;
  inset: 0 -14px auto;
  width: calc(100% + 28px);
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  opacity: 0;
}
.naming-surname-type { display: flex; justify-content: center; gap: 31px; margin-top: 34px; }
.naming-line-choice,
.naming-style-chips span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--nm-mute);
  font-size: 19px;
  letter-spacing: 1.3px;
  transition: color var(--fc-motion-state) var(--fc-motion-ease);
}
.naming-line-choice i,
.naming-style-chips span i {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--nm-ink);
  opacity: 0;
  transition: opacity var(--fc-motion-state) var(--fc-motion-ease);
}
.naming-line-choice.is-selected,
.naming-style-chips input:checked + span { color: var(--nm-ink); }
.naming-line-choice.is-selected i,
.naming-style-chips input:checked + span i { opacity: 1; }
.naming-hint { margin: 64px 0 0; color: var(--nm-faint); font-size: 13px; letter-spacing: 1px; }

/* 生辰：日期、时辰、乾坤 */
.naming-view .bazi-date-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 72px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nm-ink);
}
.naming-view .bazi-date-card strong { font-size: 26px; font-weight: 300; letter-spacing: 3px; color: var(--nm-mute); }
.naming-view .bazi-date-card.is-set strong { color: var(--nm-ink); }
.naming-view .bazi-date-card strong.is-numeric { font-family: var(--nm-mono); font-size: 30px; letter-spacing: 0; }
.naming-view .bazi-date-card span { color: var(--nm-ink-3); font-size: 13px; letter-spacing: 1px; }
.naming-hour { display: flex; flex-direction: column; align-items: center; margin-top: 30px; }
.naming-hour-button {
  min-width: 220px;
  min-height: 64px;
  border: 0;
  background: transparent;
  color: var(--nm-mute);
}
.naming-hour-button strong { font-size: 26px; font-weight: 400; line-height: 32px; letter-spacing: 4px; }
.naming-hour-button.is-set { color: var(--nm-ink); }
.naming-time-controls { display: flex; justify-content: center; align-items: center; gap: 4px; }
.naming-time-link,
.naming-switch-link,
.naming-region-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--nm-mute);
  font-size: 11px;
  letter-spacing: 1px;
}
.naming-time-link b,
.naming-switch-link b,
.naming-region-trigger b { color: var(--nm-ink-3); font-family: var(--nm-mono); font-size: 11px; font-weight: 400; }
.naming-switch-link[aria-checked="true"] b { color: var(--nm-ink); }
.naming-switch-link[aria-disabled="true"] { opacity: .6; }
.naming-solar-preview { margin: 0; color: var(--nm-mute); font-size: 11px; letter-spacing: 1px; }
.naming-solar-preview b { color: var(--nm-ink-3); font-family: var(--nm-mono); font-weight: 400; }
.naming-view .naming-sex-choice {
  display: flex;
  justify-content: center;
  gap: 48px;
  width: auto;
  max-width: none;
  margin: 30px 0 0;
  padding: 0;
  border: 0;
}
.naming-view .naming-sex-choice .choice {
  --fc-selection-focus: rgba(17, 17, 16, .32);
  --fc-selection-focus-surface: #f6f5f0;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: 52px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--nm-mute);
}
.naming-view .naming-sex-choice .choice strong { font-size: 19px; font-weight: 400; line-height: 1.4; letter-spacing: 3px; }
.naming-view .naming-sex-choice .choice span { color: inherit; font-family: var(--nm-mono); font-size: 13px; letter-spacing: 1px; }
.naming-view .naming-sex-choice .choice i {
  position: static;
  display: block;
  width: 16px;
  height: 1.5px;
  border-radius: 0;
  background: var(--nm-ink);
  opacity: 0;
}
.naming-view .naming-sex-choice .choice.is-selected { color: var(--nm-ink); }
.naming-view .naming-sex-choice .choice.is-selected i { opacity: 1; }

/* 心意：气质与避开的字 */
.naming-label { margin: 0; color: var(--nm-mute); font-size: 13px; letter-spacing: 2px; text-align: center; }
.naming-view .naming-style-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 10px; }
.naming-view .naming-style-chips span { min-width: 0; padding: 0; border: 0; background: transparent; font-size: 17px; letter-spacing: 1px; }
.naming-view .naming-style-chips span i { width: 14px; }
.naming-view .naming-style-chips input:checked + span { background: transparent; color: var(--nm-ink); }
.naming-view .naming-style-chips label:active span { transform: none; }
/* 心意一步：字数（不限 / 只要双名）与标签同一行，放在气质上面；整步收紧，免得按钮落到底栏下 */
.naming-length-row { display: flex; align-items: baseline; justify-content: center; gap: 18px; }
.naming-view .naming-length-row .naming-style-chips { margin-top: 0; }
.naming-view .naming-length-row .naming-style-chips span { font-size: 15px; }
.naming-view .naming-length-row + .naming-label { margin-top: 22px; }
.naming-step-final { padding-top: 22px; }
.naming-view .naming-step-final .naming-avoid { margin-top: 30px; }
.naming-step-final .naming-recap { margin-top: 30px; }
#naming-form:has(.naming-step-final:not([hidden])) .naming-step-actions { margin-top: 22px; }
.naming-style-desc { margin: 8px 0 0; color: var(--nm-ink-2); font-size: 13px; letter-spacing: 1px; text-align: center; }
.naming-view .naming-avoid { display: flex; flex-direction: column; align-items: center; margin-top: 44px; }
.naming-avoid-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 10px; }
.naming-view .naming-avoid .tag-list { gap: 6px; }
.naming-view .naming-avoid .tag {
  padding-left: 6px;
  border: 0;
  background: transparent;
  color: var(--nm-mute);
  font-size: 19px;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.naming-view .naming-avoid .tag-entry { width: auto; margin-top: 0; border-bottom: 0; }
.naming-view .naming-avoid .tag-entry input {
  --fc-field-focus-shadow: inset 0 -1px 0 var(--nm-ink);
  width: 64px;
  height: 32px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--nm-ghost);
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  letter-spacing: 2px;
  text-align: center;
}
.naming-view .naming-avoid .tag-entry button { --fc-button-color: var(--nm-ink-3); --fc-button-hover-color: var(--nm-ink); font-size: 13px; letter-spacing: 2px; }
.naming-recap { margin: 52px 0 0; color: var(--nm-ink-3); font-size: 13px; letter-spacing: 2px; text-align: center; }
.naming-view .form-disclaimer { max-width: 310px; margin: 10px auto 0; color: var(--nm-mute); font-size: 11px; line-height: 16px; letter-spacing: 1px; }

/* ---------- 起名中 ---------- */
.naming-loading-stage { position: relative; height: 320px; margin-top: 24px; }
.naming-loading-pillars {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 30px;
  transform: translateY(30px);
  transform-origin: 50% 0;
  transition: transform var(--fc-motion-slow) var(--nm-ease), gap var(--fc-motion-slow) var(--nm-ease), opacity var(--fc-motion-slow) ease;
}
.naming-loading[data-beat]:not([data-beat="0"]) .naming-loading-pillars { gap: 18px; transform: translateY(-14px) scale(.58); }
.naming-loading[data-beat="2"] .naming-loading-pillars,
.naming-loading[data-beat="3"] .naming-loading-pillars { opacity: .55; }
.naming-pillar { display: flex; flex-direction: column; align-items: center; color: var(--nm-ghost); }
.naming-pillar.is-real { color: var(--nm-ink); animation: nm-drop .5s var(--delay, 0ms) var(--nm-ease) both; }
.naming-pillar b { font-size: 34px; font-weight: 400; line-height: 42px; }
.naming-pillar small { margin-top: 6px; color: var(--nm-mute); font-family: var(--nm-mono); font-size: 10px; }
.naming-loading-elements {
  position: absolute;
  inset: 110px 0 auto;
  display: flex;
  justify-content: center;
  gap: 28px;
  transform-origin: 50% 0;
  transition: top var(--fc-motion-slow) var(--nm-ease), transform var(--fc-motion-slow) var(--nm-ease), gap var(--fc-motion-slow) var(--nm-ease);
}
.naming-loading[data-beat="2"] .naming-loading-elements,
.naming-loading[data-beat="3"] .naming-loading-elements { top: 52px; gap: 20px; transform: scale(.7); }
.naming-element { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--nm-ghost); animation: nm-rise .45s var(--delay, 0ms) ease both; }
.naming-element b { font-size: 26px; font-weight: 400; line-height: 32px; }
.naming-element small { font-size: 11px; letter-spacing: 1px; }
.naming-element i { display: block; width: 16px; height: 1.5px; background: var(--nm-ink); transform: scaleX(0); }
.naming-element--primary { color: var(--nm-ink); }
.naming-element--primary i { transform: scaleX(1); transition: transform var(--fc-motion-slow) var(--nm-ease); }
.naming-element--secondary { color: var(--nm-ink-2); }
.naming-loading-field {
  position: absolute;
  inset: 150px 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  transition: opacity var(--fc-motion-slow) ease, filter var(--fc-motion-slow) ease;
}
.naming-loading-field:empty { display: none; }
.naming-loading-field.is-leaving { opacity: 0; filter: blur(3px); }
.naming-field-row {
  display: flex;
  gap: 22px;
  width: max-content;
  height: 40px;
  align-items: center;
  animation: nm-drift var(--duration, 18s) linear infinite;
}
.naming-field-row.is-reverse { animation-direction: reverse; }
.naming-field-row span { color: var(--nm-faint); font-size: 15px; letter-spacing: 3px; white-space: nowrap; }
.naming-field-row span.is-kept { color: var(--nm-ink); }
.naming-loading-picks { position: absolute; inset: 168px 0 auto; display: flex; justify-content: center; gap: 26px; }
.naming-loading-picks span { font-size: 26px; letter-spacing: 6px; animation: nm-title .6s var(--delay, 0ms) ease both; }
.naming-loading .naming-beats { margin-top: 44px; }
.naming-loading .naming-caption { margin-top: 18px; }

/* ---------- 三个名字 ---------- */
.naming-basis { margin: 44px 0 0; color: var(--nm-mute); font-size: 13px; letter-spacing: 2px; text-align: center; animation: nm-fade .5s ease both; }
.naming-basis b { color: var(--nm-ink); font-weight: 600; }
.naming-basis em { color: var(--nm-ink-2); font-style: normal; font-weight: 500; }
.naming-view .naming-pick-title { margin: 30px 0 0; font-size: 14px; font-weight: 400; line-height: 28px; letter-spacing: 3px; text-align: center; animation: nm-title .5s .15s ease both; }
.naming-view .name-options { display: flex; justify-content: center; gap: 22px; margin: 32px 0 0; border: 0; }
.naming-view .name-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 96px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nm-ink);
  animation: nm-rise .55s var(--delay, 0ms) ease both;
}
.name-option__chars {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 186px;
  transition: opacity var(--fc-motion-slow) ease, filter var(--fc-motion-slow) ease, transform var(--fc-motion-slow) var(--nm-ease);
}
.name-option__chars b { display: block; height: 56px; font-size: 34px; font-weight: 400; line-height: 56px; }
.name-option__chars::before {
  position: absolute;
  top: 6px;
  left: -12px;
  width: 1.5px;
  height: 168px;
  background: var(--nm-ink);
  content: "";
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--fc-motion-slow) var(--nm-ease);
}
.name-option__source {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  text-align: center;
  transition: opacity var(--fc-motion-slow) ease, filter var(--fc-motion-slow) ease;
}
.name-option__source small { color: var(--nm-mute); font-size: 11px; line-height: 16px; letter-spacing: 1px; white-space: nowrap; }
.name-option__clause, .name-option__gloss { color: var(--nm-mute); font-size: 13px; line-height: 19px; letter-spacing: 1px; white-space: nowrap; }
.name-option__clause b { color: var(--nm-ink); font-weight: 400; }
.name-option__gloss { color: var(--nm-ink-3); }
.naming-view .name-option[aria-pressed="true"] .name-option__chars { transform: translateY(-8px); }
.naming-view .name-option[aria-pressed="true"] .name-option__chars::before { transform: scaleY(1); }
.naming-view .name-option[aria-pressed="true"] .name-option__chars b { animation: nm-settle .5s calc(var(--index) * 80ms) var(--nm-ease) both; }
.naming-view .name-option[aria-pressed="true"] .name-option__gloss { color: var(--nm-ink); }
.naming-view .name-options.has-selection .name-option[aria-pressed="false"] :is(.name-option__chars, .name-option__source) { opacity: .28; filter: blur(.6px); }
.naming-pick .naming-caption { margin-top: 30px; animation: nm-fade .35s ease both; }
.naming-pick .naming-step-actions { margin-top: 24px; }
.naming-pick .primary-action:not(:disabled) { animation: nm-pulse .5s ease; }

/* ---------- 细看 ---------- */
.naming-study-name {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 46px;
  transition: gap var(--fc-motion-slow) var(--nm-ease);
}
#naming-results[data-step="4"] .naming-study-name,
#naming-results[data-step="5"] .naming-study-name { gap: 0; }
.naming-study-col { display: flex; flex-direction: column; align-items: center; width: 84px; }
.naming-study-py { height: 16px; color: var(--nm-ghost); font-family: var(--nm-mono); font-size: 13px; transition: color var(--fc-motion-state) ease; }
#naming-results[data-read="1"] .naming-study-col:nth-child(-n + 1) .naming-study-py,
#naming-results[data-read="2"] .naming-study-col:nth-child(-n + 2) .naming-study-py,
#naming-results[data-read="3"] .naming-study-col:nth-child(-n + 3) .naming-study-py,
#naming-results[data-read="4"] .naming-study-col:nth-child(-n + 4) .naming-study-py,
#naming-results[data-read="all"] .naming-study-py { color: var(--nm-ink); }
.naming-study-col b { display: block; height: 84px; margin-top: 8px; font-size: 62px; font-weight: 400; line-height: 84px; animation: nm-drop .55s calc(var(--index) * 120ms) var(--nm-ease) both; }
.naming-study-col i {
  display: block;
  width: 44px;
  height: 1px;
  margin-top: 8px;
  background: var(--nm-ink);
  transform: scaleX(0);
  transition: transform var(--fc-motion-slow) var(--nm-ease), opacity var(--fc-motion-medium) ease;
}
#naming-results[data-step="3"] .naming-study-col i { transform: scaleX(1); }
#naming-results:is([data-step="4"], [data-step="5"]) .naming-study-col i { opacity: 0; }
.naming-study-count { margin-top: 10px; color: var(--nm-ghost); font-family: var(--nm-mono); font-size: 13px; transition: color var(--fc-motion-state) ease; }
#naming-results:is([data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"]) .naming-study-count { color: var(--nm-ink-3); }
.naming-study-merge {
  display: block;
  width: 240px;
  height: 1px;
  margin: -27px auto 0;
  background: var(--nm-ink);
  opacity: 0;
  transform: scaleX(0);
  transition: opacity var(--fc-motion-slow) ease, transform var(--fc-motion-slow) var(--nm-ease);
}
#naming-results:is([data-step="4"], [data-step="5"]) .naming-study-merge { opacity: 1; transform: none; }
.naming-study .naming-beats { margin-top: 64px; gap: 31px; }
.naming-study .naming-beats li { font-size: 16px; }
.naming-study .naming-caption { margin-top: 18px; font-size: 11px; }
.naming-study-source {
  box-sizing: border-box;
  width: fit-content;
  min-width: 240px;
  max-width: 320px;
  margin: 88px auto 0;
  padding: 10px 22px 11px;
  border-radius: 14px;
  background: rgba(17, 17, 16, .045);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--fc-motion-slow) ease, transform var(--fc-motion-slow) var(--nm-ease);
}
#naming-results:is([data-step="4"], [data-step="5"]) .naming-study-source { opacity: 1; transform: none; }
.naming-study-source p { margin: 0; color: var(--nm-mute); font-size: 15px; line-height: 22px; letter-spacing: 2px; }
.naming-study-source p b { color: var(--nm-ink); font-weight: 400; }
.naming-study-source span { display: block; margin-top: 4px; color: var(--nm-mute); font-size: 13px; line-height: 18px; letter-spacing: 1px; }
.naming-study .naming-step-actions { margin-top: 28px; }
.naming-study #namingRead {
  --fc-button-primary-border: #e4e2db;
  --fc-button-primary-surface: #e4e2db;
  --fc-button-primary-color: var(--nm-ink-3);
  gap: 8px;
}
.naming-study #namingRead.is-done {
  --fc-button-primary-border: var(--nm-ink);
  --fc-button-primary-surface: var(--nm-ink);
  --fc-button-primary-color: var(--nm-paper);
  animation: nm-pulse .5s ease;
}
.naming-down { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: nm-nudge 1.6s ease-in-out .6s infinite; }

/* ---------- 读名 ---------- */
.naming-reading-head { padding-bottom: 23px; }
.naming-reading-chars { display: flex; justify-content: center; gap: 16px; margin-top: 12px; }
.naming-reading-col { display: flex; flex-direction: column; align-items: center; width: 74px; }
.naming-reading-col b { display: block; height: 72px; font-size: 54px; font-weight: 400; line-height: 72px; }
.naming-reading-col i { display: block; width: 32px; height: 1px; margin-top: 12px; background: var(--nm-ink); }
.naming-reading-py { margin-top: 9px; color: var(--nm-ink-3); font-family: var(--nm-mono); font-size: 13px; }
.naming-reading-st { margin-top: 7px; color: var(--nm-mute); font-family: var(--nm-mono); font-size: 13px; }
.naming-reading-mean { min-height: 19px; margin-top: 14px; color: var(--nm-ink-2); font-size: 13px; line-height: 19px; letter-spacing: 1px; white-space: nowrap; }
.naming-section { margin-top: 31px; padding-top: 22px; border-top: 1px solid var(--nm-hair); }
.naming-section-head { display: flex; justify-content: space-between; align-items: baseline; }
.naming-section-head h2 { margin: 0; color: #62605a; font-size: 14px; font-weight: 400; letter-spacing: 2.86px; }
.naming-section-head span { color: var(--nm-mute); font-size: 11px; letter-spacing: 1px; }
.naming-source-line { margin: 26px 0 0; color: var(--nm-mute); font-size: 19px; line-height: 1.85; letter-spacing: 2px; text-align: center; animation: nm-rise .6s .12s ease both; }
.naming-source-line b { color: var(--nm-ink); font-weight: 500; }
.naming-source-ref { margin: 14px 0 0; color: var(--nm-ink-3); font-size: 12px; letter-spacing: 1px; text-align: center; }
.naming-source-ref + .naming-plain { margin-top: 20px; }
.naming-num-intro { margin: 18px 0 0; color: var(--nm-mute); font-size: 13px; line-height: 20px; letter-spacing: 1px; }
.naming-num-intro strong { color: var(--nm-ink); font-size: 15px; font-weight: 500; }
.naming-num-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 19px; margin-top: 19px; }
.naming-num-label { font-size: 46px; font-weight: 300; line-height: 1.05; letter-spacing: 12px; animation: nm-title .6s .2s ease both; }
.naming-num-badge {
  display: flex;
  flex: none;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--nm-ink);
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: 2px;
  text-indent: 2px;
}
.naming-num-scale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: 24px; }
.naming-num-scale span {
  position: relative;
  padding-top: 11px;
  border-top: 4px solid rgba(17, 17, 16, .12);
  border-radius: 2px;
  color: var(--nm-mute);
  font-size: 11.5px;
  line-height: 16px;
  letter-spacing: 1px;
  text-align: center;
}
.naming-num-scale span.is-current { border-top-color: var(--nm-ink); color: var(--nm-ink); font-weight: 500; }
.naming-num-scale span.is-current::before {
  position: absolute;
  top: -15px;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 6px solid var(--nm-ink);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: "";
  transform: translateX(-50%);
}
.naming-num-meaning { margin-top: 11px; padding-top: 18px; border-top: 1px solid var(--nm-hair); }
.naming-num-desc { margin: 8px 0 0; font-size: 15px; line-height: 1.9; letter-spacing: 1px; }
.naming-num-notes { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; padding-top: 11px; border-top: 1px solid var(--nm-hair); }
.naming-num-notes ul { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.naming-num-notes li { color: var(--nm-ink-2); font-size: 13px; line-height: 1.75; }
.naming-num-notes li::before { content: "· "; }
.naming-scope { margin: 0; color: var(--nm-mute); font-size: 11px; line-height: 1.7; }
.naming-why { margin-top: 14px; }
.naming-why-chart { display: flex; flex-direction: column; align-items: center; margin-top: 26px; }
.naming-why-chart > i { display: block; width: 1px; height: 22px; margin: 14px 0 6px; background: var(--nm-ghost); }
.naming-why-pillars { display: flex; gap: 30px; margin-top: 10px; }
.naming-why-pillars span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.naming-why-pillars b { font-size: 20px; font-weight: 400; line-height: 26px; }
.naming-why-pillars small { margin-top: 4px; color: var(--nm-mute); font-family: var(--nm-mono); font-size: 10px; }
.naming-why-elements { display: flex; gap: 26px; margin-top: 10px; }
.naming-why-elements .naming-element { animation: none; }
.naming-why-elements .naming-element b { font-size: 20px; line-height: 26px; }
.naming-why-elements .naming-element i { width: 14px; }
.naming-why-chars { display: flex; gap: 40px; margin-top: 10px; }
.naming-why-chars span { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.naming-why-chars b { font-size: 32px; font-weight: 400; line-height: 40px; }
.naming-why-chars small { color: var(--nm-ink-2); font-size: 12px; letter-spacing: 1px; }
.naming-why-total { margin: 26px 0 0; padding-top: 16px; border-top: 1px solid rgba(17, 17, 16, .08); color: var(--nm-ink-2); font-size: 13px; letter-spacing: 1px; text-align: center; }
.naming-words .word-card { display: flex; gap: 18px; margin-top: 22px; padding: 0 0 22px; border-top: 0; border-bottom: 1px solid rgba(17, 17, 16, .08); }
.naming-words .word-card:last-child { border-bottom-color: transparent; }
.naming-words .word-card > strong { flex: none; width: 52px; font-size: 44px; font-weight: 400; line-height: 52px; }
.naming-words .word-card__body { flex: 1; min-width: 0; }
.naming-words .word-card__reading { display: block; margin-top: 2px; color: var(--nm-ink-3); font-family: var(--nm-mono); font-size: 11px; letter-spacing: 0; }
.naming-words .word-card__meaning { min-height: 0; margin: 6px 0 0 !important; color: var(--nm-ink) !important; font-size: 16px; line-height: 1.7; }
.naming-words .word-card__facts { margin: 6px 0 0; border: 0; color: #62605a; font-size: 11.5px; line-height: 1.7; }
.naming-reading-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 40px; }
.naming-reading-actions .primary-action { width: 280px; letter-spacing: 2px; text-indent: 2px; }
.naming-reading-links { display: flex; justify-content: center; gap: 22px; margin-top: 4px; }
.naming-reading-links .fc-button {
  border-bottom: 0;
  --fc-button-color: var(--nm-ink-2);
  --fc-button-hover-color: var(--nm-ink);
  --fc-button-secondary-border: transparent;
  --fc-button-secondary-surface: transparent;
  --fc-button-secondary-color: var(--nm-ink-2);
  --fc-button-secondary-hover-border: transparent;
  --fc-button-secondary-hover-surface: transparent;
  --fc-button-secondary-hover-color: var(--nm-ink);
  min-height: 44px;
  padding: 0 4px;
  font-size: 13px;
  letter-spacing: 1px;
}
.naming-saved { margin: 6px 0 0; color: var(--nm-mute); font-family: var(--nm-mono); font-size: 10px; letter-spacing: 1px; }
.naming-disclaimer { width: 300px; margin: 18px 0 0; color: var(--nm-mute); font-size: 10px; line-height: 16px; text-align: center; }

/* ---------- 时辰弹层 ---------- */
.naming-hour-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10015;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(17, 17, 16, .16);
}
.naming-hour-sheet {
  box-sizing: border-box;
  width: min(100%, 390px);
  padding: 20px 24px calc(30px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  background: #f6f5f0;
  color: #111110;
  box-shadow: 0 -12px 40px -24px rgba(17, 17, 16, .35);
}
.naming-hour-sheet .picker-simple-head { display: flex; justify-content: space-between; align-items: center; }
.naming-hour-sheet .picker-simple-head strong { font-size: 13px; font-weight: 400; letter-spacing: 3px; }
.naming-hour-note { margin: 2px 0 0; color: #8c8a82; font-size: 11px; }
.naming-hour-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 10px; margin-top: 18px; }
.naming-hour-option {
  --fc-selection-focus: rgba(17, 17, 16, .32);
  --fc-selection-focus-surface: #f6f5f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 62px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #8c8a82;
}
.naming-hour-option strong { font-size: 20px; font-weight: 400; line-height: 24px; }
.naming-hour-option span { color: #b9b7af; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .5px; }
.naming-hour-option.is-selected { color: #111110; }
.naming-hour-option.is-selected strong { font-weight: 600; }
.naming-hour-option.is-selected span { color: #45443f; }
.naming-hour-precise { --fc-button-color: #5e5d58; --fc-button-hover-color: #111110; display: flex; min-height: 44px; margin: 10px auto 0; font-size: 12px; letter-spacing: 1px; }

/* ---------- 动画 ---------- */
@keyframes nm-title { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes nm-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes nm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes nm-drop { from { opacity: 0; filter: blur(6px); transform: translateY(-8px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes nm-settle { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes nm-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes nm-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes nm-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes nm-blink { to { visibility: hidden; } }

@media (min-width: 901px) {
  body.naming-mode .view.naming-view { padding-bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .naming-view *,
  .naming-view *::before,
  .naming-hour-sheet * {
    animation-duration: var(--fc-motion-instant, .001ms) !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  .naming-field-row { animation: none !important; }
}

@media print {
  body.naming-mode .name-mode-bar,
  body.naming-mode .name-tab-bar,
  .naming-reading-actions .primary-action,
  .naming-reading-links,
  .naming-view .text-back { display: none !important; }
}