#nameGrid {
  scroll-margin-top: 104px;
}

.qr-plans,
.qr-pay {
  scroll-margin-top: 112px;
}

.qr-bottom[hidden] {
  display: none;
}

.cg-state-panel {
  padding: 48px 28px;
  text-align: center;
}

.cg-state-panel .bar-title {
  justify-content: center;
}

.cg-state-panel p {
  max-width: 640px;
  margin: 18px auto 24px;
}

.cg-order-state {
  display: grid;
  gap: 6px;
  width: min(100%, 620px);
  margin-top: 18px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(183, 62, 62, .04);
  overflow-wrap: anywhere;
}

.cg-order-state strong {
  color: var(--moxuan);
}

.cg-order-state span,
.cg-order-state small {
  color: var(--ink-muted);
}

.cg-order-state.is-error {
  border-color: var(--zhuyin);
  color: var(--zhuyin);
}

.qr-pay-btn:disabled {
  cursor: default;
  opacity: .72;
}

.cg-data-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cg-data-list li {
  line-height: 1.8;
}

.cg-missing {
  color: var(--ink-muted);
}

/* 命主档案展开区的键值行：值列由真实字典拼出，长度不像 Demo 那样可控。
   窄屏 141px 的值列遇到「金（避用，不宜再补）」这类带括号的串时，CJK 禁则
   不允许在「）」前断行，整段被当成一个 147px 的不可断单元而溢出；
   overflow-wrap 管不到禁则，只有 line-break 能放开，故两者并用。
   不改 qiming-v2.css（它被 baseline-manifest 哈希冻结）。 */
.qr-more .qr-kv-val {
  overflow-wrap: anywhere;
  line-break: anywhere;
}

.cg-report-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.cg-score-item {
  padding: 18px 12px;
  border: 1px solid var(--line);
  text-align: center;
  background: var(--paper);
}

.cg-score-item strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
}

@media (max-width: 760px) {
  .cg-report-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   地域分布行（姓名测评详情页）
   NameDetail 里这段是纯内联样式，独立组件改用真实类名。
   ========================================================================== */
.cg-region-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font: 13px var(--font-sans);
}

.cg-region-name { min-width: 48px; color: var(--ink-muted) }

.cg-region-track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--xuanbai-dark);
  overflow: hidden;
}

.cg-region-track > i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--gutongjin);
}

.cg-region-num { color: var(--moxuan); font-weight: 500 }

/* ==========================================================================
   复姓命主印
   .tzg 是为单字设计的固定尺寸田字格（88px 字 / 148px 格）。复姓「欧阳」两字
   按原字号竖排需 195px，超出 146px 内高 49px，会把下方资料行顶乱。
   这里只在复姓时压字号与行高，格子尺寸不变，卡片高度稳定。
   ========================================================================== */
.tzg-lg.is-compound {
  font-size: 58px;
  line-height: 1.08;
  letter-spacing: 0;
}

@media (max-width: 1000px) {
  .tzg-lg.is-compound { font-size: 50px }
}

/* ==========================================================================
   骨架屏 / 刷新遮罩
   首次加载占位（结构与真实报告同构，内容到位时不跳版），
   刷新已有报告时改用遮罩保留原内容。
   ========================================================================== */

.cg-sk-note {
  margin: 0 0 20px;
  text-align: center;
  font: 20px var(--font-sans);
  color: var(--ink-muted);
  letter-spacing: .04em;
}

/* 占位块统一底色 + 扫光；prefers-reduced-motion 下只留静态底色 */
.cg-skeleton [class*="cg-sk-"] > i,
.cg-sk-crumbs i,
.cg-skeleton i[class*="cg-sk-"] {
  display: block;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--xuanbai-dark) 0%,
    rgba(246, 241, 231, .85) 40%,
    var(--xuanbai-dark) 80%
  );
  background-size: 300% 100%;
  animation: cgSkShimmer 1.4s ease-in-out infinite;
}

@keyframes cgSkShimmer {
  from { background-position: 150% 0 }
  to   { background-position: -150% 0 }
}

@media (prefers-reduced-motion: reduce) {
  .cg-skeleton i,
  .cg-sk-crumbs i { animation: none }
}

/* 尺寸全部照真实元素实测值取（见 ReportSkeleton 头注），使切换时不跳版 */
.cg-sk-rows { display: grid; margin: 0 }

.cg-sk-tag { width: 148px; height: 39px; border-radius: 4px }
.cg-sk-line { width: 100%; height: 16px }
/* 资料行：.qr-info-row 实测 49px（含 9px 上下内边距与虚线） */
.cg-sk-info { height: 21px; margin: 14px 0 }
/* 用字分析段落：右栏 .qr-panel-lead 实测 451px（tag 39 + 7 段 × 52 + 内边距 46） */
.cg-sk-para { height: 25px; margin-top: 27px }
.cg-sk-short { width: 42% }
.cg-sk-title { width: 64%; height: 28px; margin-top: 12px }
/* 大字格下三行值：.nmc-char dd 实测 27px，.nmc-char 用 grid gap:6px 撑开 */
.cg-sk-mini { width: 34px; height: 21px; margin: 0 }
/* .nmca-key 实测 40px */
.cg-sk-key { width: 84px; height: 40px; flex: none; border-radius: 4px }
.cg-sk-track { flex: 1; height: 12px; border-radius: 6px }

/* 分析段：.nmca-row 实测 90px，两行文本 + 行距 */
.cg-sk-analysis { flex: 1; min-width: 0; display: grid; gap: 22px }
.cg-sk-text { height: 34px }
.cg-sk-text-tail { width: 68% }

/* 按钮类：.qr-expand / .nmc-btn / .qr-again 实测均为 65px */
.cg-sk-expand { display: grid; place-items: center; padding: 13px 0 }
.cg-sk-expand > i { width: 168px; height: 39px }
.cg-sk-btn { display: grid; place-items: center; margin: 26px 28px 0 36px }
.cg-sk-btn > i { width: 232px; height: 65px; border-radius: 6px }
.cg-sk-bottom { display: flex; justify-content: center; gap: 18px; margin-top: 34px }
.cg-sk-action { width: 210px; height: 65px; border-radius: 6px }
/* .page-disclaimer 实测 108px = 34px×2 padding + 40px 文本 */
.cg-sk-foot { padding: 34px 20px; display: grid; place-items: center }
.cg-sk-foot > i { width: min(560px, 90%); height: 40px }

/* 面包屑：.crumbs-inner 实测 47px */
.cg-sk-crumbs .crumbs-inner { display: flex; align-items: center; min-height: 47px }
.cg-sk-crumbs .cg-sk-crumb { width: 240px; height: 18px }

/* 姓氏印：.tzg-lg 实测 148px */
.cg-sk-seal { width: 148px; height: 148px; border-radius: 8px; flex: none }
/* 大字格：.nmc-char 高 175px，其中大字约 94px */
.cg-sk-char { width: 94px; height: 94px; border-radius: 6px }

/* .qr-plan 实测 214px */
.cg-sk-plan { display: grid; gap: 10px; align-content: start; min-height: 214px }
.cg-sk-card { padding-bottom: 26px }

/* ---------- 刷新遮罩 ---------- */
.cg-refresh {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(246, 241, 231, .55);
  backdrop-filter: blur(2px);
}

.cg-refresh-box {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow-md);
  font: 500 21px var(--font-sans);
  color: var(--moxuan);
}

.cg-refresh-box em { font-style: normal }

.cg-refresh-box .icon {
  width: 24px;
  height: 24px;
  color: var(--zhuyin);
  animation: cgSpin 1s linear infinite;
}

@keyframes cgSpin {
  to { transform: rotate(360deg) }
}

@media (prefers-reduced-motion: reduce) {
  .cg-refresh-box .icon { animation: none }
}

/* ---------- 页脚不再上浮 ---------- */
/* 加载态、错误态、空状态内容不足时，页脚会顶到视口中部，看起来像页面塌了。
   让 body 撑满视口高度、main 吃掉剩余空间，页脚始终贴在视口底部。 */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

body > .site-footer {
  margin-top: auto;
}

@media (max-width: 760px) {
  .cg-sk-seal { width: 108px; height: 108px }
  .cg-sk-char { width: 74px; height: 74px }
  .cg-sk-note { font-size: 18px }
  .cg-sk-action { width: 100%; max-width: 210px }
  /* 窄屏文本换行行数是桌面的 3—4 倍，占位块按比例加高。
     真实高度随候选文案长短浮动，这里只做近似，不追求逐像素相等。 */
  .cg-sk-para { height: 69px; margin-top: 27px }
  .cg-sk-text { height: 150px }
  .cg-sk-text-tail { height: 157px; width: 84% }
  .cg-sk-analysis { gap: 18px }
}

/* ===== 起名专家卡的真实照片位 =====
   styles.css 被 baseline-manifest.txt 哈希冻结，故 .expert-card-photo 的
   照片样式补在这里（首页最后加载 cg-api.css，同选择器即可覆盖，无需 !important）。
   容器原为 height:236px 的 grid 占位；4 列/2 列/1 列三档宽度不同，
   固定高度会让取景比例在 1.19:1—2.2:1 之间剧烈摆动，改用 aspect-ratio 锁定。 */
.expert-card-photo{height:auto;aspect-ratio:4/3;overflow:hidden}
.expert-card-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 18%;display:block;
}
/* .photo-tip 原样式无 z-index，绝对定位的 img 会盖住它 */
.expert-card-photo .photo-tip{z-index:2}

.cg-native-pay {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 18px auto 0;
  color: var(--moxuan);
}

.cg-native-pay svg {
  width: min(220px, 70vw);
  height: auto;
  padding: 8px;
  border: 1px solid var(--line);
  background: #fff;
}

.cg-native-pay small { color: var(--ink-muted) }

/* ===== 详情页底部的「您的起名专家」 =====
   与首页同一个组件（components/site/ExpertsSection.tsx），只在详情页收窄：
   名字详情与姓名测评详情的内容栏是 980px（name-result.css 给 .detail-hero/.detail-section
   统一设定），沿用首页的 1180px 会让这块比上方所有模块宽出 200px。
   紧邻的 #mod-sx 同为 --xuanbai-dark，两块会连成一片，故补一条上边框做分隔；
   .section 的 74px 上下留白也按详情页的 46px 对齐。 */
.cg-experts{padding:46px 0;border-top:1px solid var(--line)}
.cg-experts .wrap{width:min(100% - 40px,980px)}