/* ============================================================
   中云宏观 官网 — 组件层样式（阶段 1 / 阶段 2 新增）
   ------------------------------------------------------------
   依赖：css/fonts.css（本地字体）+ css/style.css（设计令牌 --color-* / --font-*）
   加载顺序：fonts.css → style.css → components.css（本文件最后加载，可覆盖旧组件）
   内容索引：
     1. 基础工具类与深色满幅区块
     2. 品牌锁定组合（【已废弃】原"文字字标"方案，现改为直接引用设计方 SVG 图片，
      相关 .brand-* 规则仅作历史保留，页面已不再使用）
     3. 顶部导航扩展（新增导航项 / 会员登录按钮 / 当前页高亮）
     4. 按钮补充（描边铜金 / 深色区按钮）
     5. 卡片、徽标、释义小字、数据元信息
     6. 中云指数（4 子模块 + 图表容器骨架 + 图例）
     7. 活动页（状态徽标 / 列表 / 时间轴 / 筛选）
     8. 研究框架页（框架卡 / 报告列表 / 会员锁定态）
     9. 弹窗组件（登录 / 会员方案）
    10. 页脚合规区（ICP / 公安备案 / 免责声明）
    11. 子页面 Hero 与面包屑
    12. 响应式补齐
   ============================================================ */

/* ============================================================
   1. 基础工具类与深色满幅区块
   ============================================================ */
.container-narrow { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* 深色满幅区（研究机构气质的"墨色版面"） */
.section-dark {
  background: var(--color-ink);
  color: var(--color-white);
}
.section-dark .section-title { color: var(--color-white); }
.section-dark .section-desc  { color: rgba(255, 255, 255, 0.66); }
.section-dark .section-label { color: var(--color-accent); }

/* 区块之间的分割线：深色区用半透明白线，浅色区用浅灰线 */
.divider-dark  { height: 1px; background: var(--color-divider-dark);  border: 0; }
.divider-light { height: 1px; background: var(--color-divider-light); border: 0; }
.section-dark + .section-dark { border-top: 1px solid var(--color-divider-dark); }

/* 文本工具类 */
.text-serif   { font-family: var(--font-serif); }
.text-mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* 破折号隔离类（方法 B）：把 U+2013 / U+2014 显式交给中文字体渲染。
   背景：拉丁 webfont Inter 的破折号墨迹宽度大于其字身框（32px 字号下 34px > 32px），
        因此在中文语境中破折号会贴住两侧汉字、两连用时彼此重叠（视觉上「重叠/挤压」）。
   双保险：css/fonts.css 已把 U+2010–U+2015 移出 Inter 的 unicode-range（全局生效），
        本类用于 Hero 正文、列表摘要等关键段落的显式隔离，避免将来字体栈变化后回归。
   仅用于 --font-sans 上下文；宋体标题（--font-serif）本身不含 Inter，无需包裹。 */
.zh-dash {
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Source Han Sans SC', system-ui, sans-serif;
  letter-spacing: normal;
  /* 极小的横向余量：破折号与相邻汉字（尤其「一」这类同高度横画）之间留出可见白列。
     0.06em ≈ 字号 16px 时 0.96px，仅作「呼吸感」微调；如需严格的中式齐排可置 0。 */
  margin: 0 0.06em;
}
.text-bronze  { color: var(--color-accent); }
.text-muted-2 { color: var(--color-text-muted); }

/* 行内小标签（比 .section-label 更轻，用于"数据口径/更新频率"等） */
.eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.section-dark .eyebrow { color: rgba(255, 255, 255, 0.5); }

/* ============================================================
   2. 品牌锁定组合（橙色 Φ 图标 + HTML 字标「中云宏观」）
   ============================================================ */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

/* 橙色 Φ 矢量图标：只保留图形本身（透明底），高度与字标对齐 */
.brand-icon {
  display: block;
  height: 34px;
  width: auto;
  aspect-ratio: 43 / 55;   /* images/logo-icon.svg 原始画布，防拉伸 */
  object-fit: contain;
  flex-shrink: 0;
}

/* 品牌字标：思源宋体（本地子集）加粗，纯白，适配深色导航/页脚 */
.brand-text {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-white);
  font-size: 1.375rem;      /* 22px */
  letter-spacing: 0.07em;
  line-height: 1.05;
  white-space: nowrap;
}

/* 字标下方的副标（可选，提升机构感） */
.brand-sub {
  display: block;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 0.5rem;        /* 8px */
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: 3px;
}

/* 深色底上的品牌组合（导航栏） */
.brand-lockup--nav .brand-text { color: var(--color-white); }

/* 页脚品牌组合 */
.brand-lockup--footer .brand-icon { height: 30px; }
.brand-lockup--footer .brand-text { font-size: 1.125rem; color: var(--color-white); }

/* 浅色底场景（如需要） */
.brand-lockup--light .brand-text { color: var(--color-primary); }

/* ============================================================
   3. 顶部导航扩展
   ============================================================ */
/* 导航项变多后收紧间距，避免 1200px 容器内换行 */
.main-nav { gap: 28px; }
.nav-list { gap: 24px; }

/* 当前页面/区块高亮 */
.nav-link.is-active { color: var(--color-white); }
.nav-link.is-active::after { width: 100%; }

/* 「会员登录」入口：铜金描边幽灵按钮 */
.nav-auth {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--color-accent);
  background: transparent;
  border: 1px solid rgba(56, 217, 194, 0.55);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
}
.nav-auth:hover {
  background: rgba(56, 217, 194, 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}
.nav-auth .nav-auth-icon { font-size: 0.9375rem; line-height: 1; }

/* 已登录状态的用户按钮（阶段 3 接入鉴权后启用） */
.nav-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: transparent;
}
.nav-user[hidden] { display: none; }

/* ============================================================
   4. 按钮补充
   ============================================================ */
.btn-sm { padding: 8px 18px; font-size: 0.875rem; }

/* 铜金实心主按钮（与旧 --color-accent 同源，此处仅强化质感） */
.btn-bronze { background: var(--color-bronze); color: #1A1206; border-color: var(--color-bronze); }
.btn-bronze:hover { background: var(--color-bronze-hover); border-color: var(--color-bronze-hover); }

/* 深色满幅区里的描边按钮 */
.btn-outline-light {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.32);
}
.btn-outline-light:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ============================================================
   5. 卡片、徽标、数据元信息
   ============================================================ */
/* 通用描边卡片：研究机构用"纸面感"，弱化阴影 */
.zy-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 28px;
  transition: border-color var(--transition), background var(--transition);
}
.zy-card:hover { border-color: #CFD8E0; }
.section-dark .zy-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--color-divider-dark);
}
.section-dark .zy-card:hover { border-color: rgba(56, 217, 194, 0.45); }

/* 徽标 */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
  white-space: nowrap;        /* 徽标为单行标签：禁止 CJK 逐字换行 */
  flex: 0 0 auto;             /* 在 flex 容器中不被压缩 */
}
.badge-bronze { background: rgba(200, 166, 106, 0.14); color: var(--color-bronze-dark); border: 1px solid rgba(200, 166, 106, 0.45); }
.badge-member { background: var(--color-accent); color: #1A1206; }
.badge-cinnabar { background: rgba(178, 58, 47, 0.12); color: var(--color-cinnabar); border: 1px solid rgba(178, 58, 47, 0.3); }
.badge-muted { background: rgba(138, 154, 168, 0.14); color: var(--color-text-light); }

/* 数据元信息行（更新日期 / 频率 / 口径 / 来源） */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.section-dark .meta-row { color: rgba(255, 255, 255, 0.45); }
.meta-row b { font-weight: 600; color: var(--color-text-light); }
.section-dark .meta-row b { color: rgba(255, 255, 255, 0.7); }

/* 免责声明小字 */
.data-note {
  font-size: 0.75rem;
  line-height: 1.8;
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-divider-light);
  padding-left: 12px;
}
.section-dark .data-note {
  color: rgba(255, 255, 255, 0.42);
  border-left-color: var(--color-divider-dark);
}

/* 中云指数页合规声明：四大指数图表模块下方 / 页脚上方，浅灰小字 + 顶部细分隔线 */
.index-disclaimer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.5);
  max-width: 980px;
}

/* 序号（研究目录式排版用） */
.serial {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

/* ============================================================
   6. 中云指数（4 子模块 + 图表容器骨架）
   ============================================================ */
.index-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.index-card { display: flex; flex-direction: column; gap: 14px; }
.index-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.index-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.04em;
}
.index-sub { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); margin-top: 4px; }
.index-desc { font-size: 0.875rem; line-height: 1.75; color: rgba(255, 255, 255, 0.66); }
.index-metrics { display: flex; align-items: baseline; gap: 10px; }
.index-latest { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 600; color: var(--color-white); }
.index-change { font-family: var(--font-mono); font-size: 0.8125rem; }
.index-change.up   { color: var(--color-accent); }
.index-change.down { color: var(--color-cinnabar); }

/* 图表容器：阶段 3 由 ECharts 挂载到 .chart-canvas 上 */
.chart-frame {
  position: relative;
  width: 100%;
  min-height: 220px;
  border: 1px solid var(--color-divider-dark);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px;
}
.chart-canvas { width: 100%; height: 240px; }
.chart-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.8125rem;
  text-align: center;
  padding: 16px;
}
.chart-placeholder .ph-icon { font-size: 1.5rem; opacity: 0.6; }
.chart-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.chart-range { display: inline-flex; gap: 4px; }
.chart-range button {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 3px 9px;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: 1px solid var(--color-divider-dark);
  border-radius: 4px;
  cursor: pointer;
}
.chart-range button.is-active { color: #1A1206; background: var(--color-accent); border-color: var(--color-accent); }

/* ------------------------------------------------------------
   预测期会员专属遮罩（中云指数图表右侧「未来 6 个月」预测段）
   · 磨砂玻璃 + 半透明深底：遮挡预测段走势，仅隐约透出虚线与底纹，形成会员解锁动因
   · 配色沿用全站会员语义：青绿描边（--color-accent）+ 香槟金锁（--color-bronze）
   · 几何（left/top/width/height）由 js/components/prediction-mask.js 按 ECharts 坐标系
     精准写入内联样式，本段只负责视觉与内部排版，因此 PC / 移动端都不会错位
   · 遮罩宽度 < 148px 时自动附加 .is-compact：仅留锁与短文案，避免文字挤压或溢出
   ------------------------------------------------------------ */
.prediction-mask {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  border-left: 1px dashed rgba(56, 217, 194, 0.45);
  border-radius: 0 6px 6px 0;
  background: rgba(10, 22, 40, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--color-white);
  font-family: var(--font-sans);
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.prediction-mask[hidden] { display: none; }
/* 左缘渐隐：让磨砂边界与未遮挡区域自然过渡 */
.prediction-mask::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  background: linear-gradient(90deg, rgba(10, 22, 40, 0) 0%, rgba(10, 22, 40, 0.5) 100%);
  pointer-events: none;
}
.prediction-mask:hover,
.prediction-mask:focus-visible {
  background: rgba(12, 30, 50, 0.72);
  border-left-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px rgba(56, 217, 194, 0.18);
  outline: none;
}
/* 锁徽标：青绿圆环 + 香槟金锁图标 */
.prediction-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(56, 217, 194, 0.42);
  background: rgba(56, 217, 194, 0.10);
  color: var(--color-bronze);
  box-shadow: 0 0 0 4px rgba(56, 217, 194, 0.06);
  transition: transform var(--transition), box-shadow var(--transition);
}
.prediction-mask:hover .prediction-lock,
.prediction-mask:focus-visible .prediction-lock {
  transform: translateY(-1px);
  box-shadow: 0 0 0 6px rgba(56, 217, 194, 0.10);
}
.prediction-lock svg { display: block; }
.prediction-text {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.88);
  max-width: 168px;
}
.prediction-text-short {
  display: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
}
.prediction-range {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.48);
  white-space: nowrap;
}
.prediction-range[hidden] { display: none; }
.prediction-cta {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

/* 紧凑排版：遮罩较窄（移动端单栏 / 图表缩放后）时只保留锁与短文案 */
.prediction-mask.is-compact { gap: 6px; padding: 8px 6px; }
.prediction-mask.is-compact .prediction-text,
.prediction-mask.is-compact .prediction-range,
.prediction-mask.is-compact .prediction-cta { display: none; }
.prediction-mask.is-compact .prediction-text-short { display: inline; }
.prediction-mask.is-compact .prediction-lock { width: 32px; height: 32px; }

/* 图例（色点 + 名称） */
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* ============================================================
   7. 活动页
   ============================================================ */
.activity-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px; }
.activity-card { display: flex; flex-direction: column; gap: 12px; }
.activity-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.activity-date { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-accent-dark); letter-spacing: 0.06em; }
.section-dark .activity-date { color: var(--color-accent); }
.activity-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.5; }
.activity-meta { font-size: 0.8125rem; color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.section-dark .activity-meta { color: rgba(255, 255, 255, 0.5); }
.activity-status { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 4px; }
.status-open   { background: rgba(56, 217, 194, 0.16); color: var(--color-accent-dark); border: 1px solid rgba(56, 217, 194, 0.4); }
.status-soon   { background: rgba(56, 217, 194, 0.14); color: #1F7A6C; border: 1px solid rgba(56, 217, 194, 0.4); }
.status-closed { background: rgba(138, 154, 168, 0.14); color: var(--color-text-light); border: 1px solid rgba(138, 154, 168, 0.3); }
.status-member { background: rgba(178, 58, 47, 0.12); color: var(--color-cinnabar); border: 1px solid rgba(178, 58, 47, 0.3); }
.activity-actions { display: flex; gap: 12px; align-items: center; margin-top: 4px; }

/* 年份/类型筛选（阶段 3 接数据后启用） */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.filter-btn {
  font-size: 0.8125rem;
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-light);
  cursor: pointer;
  transition: all var(--transition);
}
.filter-btn:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }
.filter-btn.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #1A1206; font-weight: 600; }

/* 往期活动时间轴 */
.timeline { position: relative; margin-top: 32px; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 1px; background: var(--color-divider-light); }
.timeline-item { position: relative; padding: 0 0 28px; }
.timeline-item::before {
  content: ''; position: absolute; left: -25px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 0 0 3px rgba(56, 217, 194, 0.18);
}
.timeline-date { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-muted); }
.timeline-title { font-size: 1rem; font-weight: 600; margin: 4px 0 6px; }
.timeline-desc { font-size: 0.875rem; color: var(--color-text-light); line-height: 1.7; }

/* ============================================================
   8. 研究框架页
   ============================================================ */
/* 网格：三列等宽 + 行内等高（align-items: stretch 让三张卡片高度一致） */
.framework-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 20px;
  margin-top: 36px;
}
.framework-card {
  display: flex;
  flex-direction: column;
  align-items: center;          /* 图标 / 标题 / 描述统一水平居中 */
  height: 100%;                 /* 撑满网格行高 → 三卡等高 */
  gap: 12px;
  text-align: center;
}
/* 图标：放大为圆形徽章（品牌青绿超淡底 rgba(26,138,122,0.1)），视觉重量更饱满 */
.framework-card .icon-badge {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(26, 138, 122, 0.1);
  border-color: rgba(26, 138, 122, 0.16);
  margin-bottom: 2px;
}
.framework-icon { width: 34px; height: 34px; }
.framework-name { font-size: 1.0625rem; font-weight: 700; }
.framework-desc { font-size: 0.875rem; color: var(--color-text-light); line-height: 1.7; }
.section-dark .framework-name { color: var(--color-white); }
.section-dark .framework-desc { color: rgba(255, 255, 255, 0.62); }

/* 报告列表（行式 = 表格化的专业感） */
.report-list { margin-top: 32px; border-top: 1px solid var(--color-divider-light); }
.report-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 150px 120px;   /* 极简后末列仅一个按钮，收窄让标题更透气 */
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-divider-light);
  transition: background var(--transition);
}
.report-row:hover { background: rgba(56, 217, 194, 0.05); }
.report-row .r-date { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-muted); }
.report-row .r-title { font-size: 0.9375rem; font-weight: 600; line-height: 1.5; }
.report-row .r-module { font-size: 0.75rem; color: var(--color-text-light); }
.report-row .r-actions {
  display: flex;
  align-items: center;          /* 右侧操作按钮垂直居中对齐，不拉伸 */
  gap: 10px;
  justify-content: flex-end;    /* 右侧对齐，保证各行标签与按钮列对齐 */
  white-space: nowrap;
}
/* 右侧操作元素不可压缩，避免被末列宽度挤压变形 */
.report-row .r-actions > * { flex: 0 0 auto; }

/* 会员锁定态（阶段 3 由 auth.js 切换 .is-locked） */
.report-lock { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: 0 0 auto; font-size: 0.8125rem; color: var(--color-text-muted); }

/* 报告列表右侧「会员」操作按钮：极简设计下每行仅一个操作元素，
   从「徽标」升级为与「阅读全文」等高的精致按钮；
   配色取香槟金家族（淡金底 + 细金边 + 暗金字），与青绿主按钮形成主次层级。 */
/* 「会员」锁定按钮（共享组件）：研究框架报告行 .report-row 与专项服务内容卡
   .svc-card-actions 共用同一套视觉 —— 香槟金细边 + 淡金底 + 暗金字 + 锁图标，
   与青绿主按钮形成主次层级；两处右侧始终只有这一个操作元素。 */
.btn-member-lock {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  padding: 9px 16px;                          /* 9×2 + 行盒 22.4 + 边框 2 = 42.4px，与 .btn-sm 等高 */
  border: 1px solid rgba(212, 175, 55, 0.5);  /* 香槟金细实线 */
  border-radius: var(--radius-md);            /* 与「阅读全文」同圆角，视觉成组 */
  background: rgba(212, 175, 55, 0.1);        /* 超淡香槟金底 */
  color: var(--color-bronze-dark);            /* 暗金文字与锁图标 */
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-member-lock:hover {
  background: rgba(212, 175, 55, 0.18);
  border-color: rgba(212, 175, 55, 0.85);
  transform: translateY(-2px);
}
.btn-member-lock svg { display: block; }

.report-row.is-locked .r-title { color: var(--color-text-light); }

/* ============================================================
   9. 弹窗（会员登录 / 会员方案）
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 14, 24, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }

.modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  background: #0F2137;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.25s ease;
}
.modal-overlay.is-open .modal { transform: translateY(0) scale(1); }
.modal-sm { max-width: 420px; }

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 26px 16px;
  border-bottom: 1px solid var(--color-divider-dark);
}
.modal-title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; color: var(--color-white); letter-spacing: 0.04em; }
.modal-subtitle { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); margin-top: 6px; }
.modal-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: 1px solid var(--color-divider-dark);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition);
}
.modal-close:hover { color: var(--color-white); border-color: rgba(255, 255, 255, 0.35); }

.modal-body { padding: 22px 26px; }
.modal-body p { font-size: 0.875rem; line-height: 1.8; color: rgba(255, 255, 255, 0.7); }
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 26px 24px;
}

/* 会员权益清单 */
.benefit-list { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 6px; }
.benefit-item { display: flex; gap: 10px; font-size: 0.875rem; color: rgba(255, 255, 255, 0.78); line-height: 1.7; }
.benefit-item .check-icon { color: var(--color-accent); font-weight: 700; }

body.modal-open { overflow: hidden; }

/* ============================================================
   10. 会员登录表单（login.html 与弹窗共用同一套样式）
   ============================================================ */
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-label { font-size: 0.8125rem; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.auth-input {
  width: 100%;
  padding: 11px 14px;
  font-size: 0.9375rem;
  font-family: var(--font-sans);
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.auth-input::placeholder { color: rgba(255, 255, 255, 0.32); }
.auth-input:focus { border-color: var(--color-accent); background: rgba(255, 255, 255, 0.08); }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.8125rem; }
.auth-check { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.66); cursor: pointer; }
.auth-check input { accent-color: var(--color-accent); }
.auth-link { color: var(--color-accent); font-size: 0.8125rem; }
.auth-link:hover { color: var(--color-accent-hover); }
.auth-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.auth-notice {
  font-size: 0.75rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.5);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 10px 12px;
}
.auth-notice.is-error { color: #F0A7A0; border-color: rgba(178, 58, 47, 0.6); }
.auth-notice.is-ok { color: #A8DCC8; border-color: rgba(56, 217, 194, 0.5); }

/* 独立登录页布局 */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 64px;
  background: var(--color-ink);
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: #0F2137;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 32px;
}
.auth-card .brand-lockup { margin-bottom: 22px; }
.auth-title { font-family: var(--font-serif); font-size: 1.375rem; font-weight: 700; color: var(--color-white); }
.auth-sub { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); margin: 8px 0 22px; }

/* ============================================================
   11. 页脚合规区（ICP 备案 / 公安网安备 / 免责声明）
   ============================================================ */
.footer-compliance {
  border-top: 1px solid var(--color-divider-dark);
  margin-top: 28px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}
.footer-legal a { color: rgba(255, 255, 255, 0.45); }
.footer-legal a:hover { color: var(--color-accent); }
.footer-legal .legal-dot { opacity: 0.4; }
.footer-legal img { display: inline-block; height: 16px; width: auto; vertical-align: -3px; margin-right: 6px; }
.footer-disclaimer { font-size: 0.75rem; line-height: 1.85; color: rgba(255, 255, 255, 0.34); }
.footer-disclaimer strong { color: rgba(255, 255, 255, 0.5); font-weight: 600; }

/* ============================================================
   12. 子页面 Hero 与面包屑
   ============================================================ */
.page-hero {
  background: var(--color-ink);
  color: var(--color-white);
  padding: 132px 0 56px;
  border-bottom: 1px solid var(--color-divider-dark);
}
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); margin-bottom: 16px; }
.breadcrumb a { color: rgba(255, 255, 255, 0.45); }
.breadcrumb a:hover { color: var(--color-accent); }
.page-hero h1 { font-family: var(--font-serif); font-size: 2.25rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; }
.page-hero .page-desc { margin-top: 14px; font-size: 1rem; line-height: 1.8; color: rgba(255, 255, 255, 0.66); max-width: 720px; }
/* 中云指数页 Hero 长句：加宽至 900px，桌面端单行完整呈现（原 720px 会把「强度。」挤到次行）。
   若可用宽度仍不足，则先在第二个逗号处断开 —— .pd-seg 片段在 ≥768px 不可内部折行，
   故换行只可能落在逗号后，不会出现半句悬行；<768px 关闭该约束，回归正常中文折行。 */
.page-hero .page-desc--wide { max-width: 900px; text-wrap: pretty; }
@media (min-width: 768px) {
  .page-hero .page-desc--wide .pd-seg { white-space: nowrap; }
}
.page-hero .meta-row { margin-top: 18px; }

/* ============================================================
   13. 响应式补齐（新增组件）
   ============================================================ */
@media (max-width: 1180px) {
  .main-nav { gap: 18px; }
  .nav-list { gap: 15px; }
  .nav-link { font-size: 0.875rem; }
  .brand-text { font-size: 1.25rem; }
  .nav-auth { padding: 6px 12px; font-size: 0.8125rem; }
  .nav-cta { padding: 7px 14px; font-size: 0.8125rem; }
}
@media (max-width: 1024px) {
  .index-grid, .activity-list, .framework-grid { grid-template-columns: 1fr; }
  .report-row { grid-template-columns: 84px minmax(0, 1fr) 120px; }
  .report-row .r-module { display: none; }
}
@media (max-width: 768px) {
  .brand-icon { height: 30px; }
  .brand-text { font-size: 1.125rem; }
  /* 抽屉菜单内：登录入口与 CTA 同宽 */
  .nav-auth, .nav-user {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 1rem;
  }
  .page-hero { padding: 108px 0 40px; }
  .page-hero h1 { font-size: 1.75rem; }
  .report-row { grid-template-columns: 1fr; gap: 8px; }
  .report-row .r-actions { justify-content: flex-start; }
  .btn-member-lock { min-height: 44px; }              /* 窄屏触控热区与 .btn 一致 */
  .svc-card-actions .btn-member-lock { width: 100%; }  /* 服务卡窄屏与同区按钮等宽铺满 */
  .modal { max-width: 100%; }
  .timeline { padding-left: 22px; }
  .footer-disclaimer { font-size: 0.6875rem; }
}
/* ============================================================
   14. 阶段 3 — 图标槽 / 用户菜单 / 图表状态 / PDF 预览与水印
   ============================================================ */

/* ---------- 图标槽（内联 SVG 占位，currentColor 继承） ---------- */
/* 登录页 LOGO 间距（图片版 logo） */
.auth-logo { margin-bottom: 22px; }
/* 登录页 / 登录弹窗内的 LOGO：虽然同样使用 .nav-logo-img 类，但它不在导航栏里，
   与菜单文字没有对齐关系，故单独锁定尺寸，不跟导航栏令牌（当前导航栏 44 / 40 / 36px）。
   注意：位图已裁掉透明留白，height 即肉眼可见高度，所以这里的 36px 观感远强于旧的 40px
   （旧图 373×200 元素 40px 只能显示 ≈22px 的图形）。
   桌面 36px（宽 ≈119px）/ ≤768px 30px / ≤480px 26px。 */
.auth-logo .nav-logo-img { height: 36px; }
@media (max-width: 768px) { .auth-logo .nav-logo-img { height: 30px; } }
@media (max-width: 480px) { .auth-logo .nav-logo-img { height: 26px; } }

.icon-slot { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.icon-slot svg { display: block; }
.inline-ico { vertical-align: -2px; margin-right: 4px; }
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(56, 217, 194, 0.12);
  border: 1px solid rgba(56, 217, 194, 0.28);
  color: var(--color-accent);
  margin-bottom: 4px;
}

/* 产品矩阵图标：由 emoji 改为线性 SVG */
/* 迁移说明：产品矩阵已移至 service/macro-strategy/，本规则随之恢复；
   尺寸/圆角/底色与 .icon-badge 保持同一套徽章规范（青绿 10% 底 + currentColor 描边图标） */
.product-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(56, 217, 194, 0.1);
  border: 1px solid rgba(56, 217, 194, 0.24);
  color: var(--color-accent);
  margin-bottom: 14px;
}
.placeholder-icon { color: var(--color-accent); display: inline-flex; }

/* ---------- Header 用户菜单（已登录状态） ---------- */
.nav-auth[hidden] { display: none; }
.nav-user-wrap { position: relative; display: inline-flex; }
.nav-user-wrap[hidden] { display: none; }
.nav-user {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(56, 217, 194, 0.45);
  background: rgba(56, 217, 194, 0.08);
}
.nav-user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  z-index: 1200;
  background: #0F2137;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-user-menu[hidden] { display: none; }
.nav-user-menu a,
.nav-user-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-sans);
}
.nav-user-menu a:hover,
.nav-user-menu button:hover { background: rgba(56, 217, 194, 0.14); color: var(--color-accent); }
.nav-user-meta {
  padding: 4px 12px 8px;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid var(--color-divider-dark);
  margin-bottom: 6px;
}

/* ---------- 图表加载/数据状态 ---------- */
.chart-status { font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); }
.chart-status.is-live { color: var(--color-accent); }
.skeleton {
  height: 240px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 37%, rgba(255,255,255,.04) 63%);
  background-size: 400% 100%;
  animation: zy-skeleton 1.4s ease infinite;
}
@keyframes zy-skeleton { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }
.timeline-highlights { margin: 6px 0 0 18px; list-style: disc; font-size: 0.8125rem; color: var(--color-text-light); }
.timeline-highlights li { margin-bottom: 2px; }

/* ---------- PDF 预览 + 倾斜 28° 平铺水印 ---------- */
.report-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-divider-light);
  margin-bottom: 20px;
}
.report-who { font-size: 0.8125rem; color: var(--color-text-light); display: inline-flex; align-items: center; }
.pdf-stage { position: relative; }
.pdf-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 22px;
  background: #0B1B2B;
  border: 1px solid var(--color-divider-dark);
  border-radius: 10px;
  overflow: auto;
  max-height: 78vh;
}
.pdf-page {
  position: relative;
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  max-width: 100%;
}
.pdf-page canvas { display: block; max-width: 100%; height: auto; }
.pdf-page-no {
  position: absolute;
  bottom: 6px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.pdf-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255,255,255,.5); padding: 60px 20px; }
.pdf-empty-ico { color: rgba(255, 255, 255, 0.35); }

/* 水印层：倾斜 28°、平铺、不可选中、不可点击 */
.pdf-watermark {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 5;
}
.pdf-watermark-row {
  position: absolute;
  width: 160%;
  white-space: nowrap;
  transform: rotate(-28deg);
  transform-origin: left center;
  opacity: 0.5;
}
.pdf-watermark-item {
  display: inline-block;
  margin-right: 90px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(10, 22, 40, 0.16);
  white-space: nowrap;
}

/* 会员锁定遮罩（保留备用：旧版 PDF 区硬锁样式；
   报告页 report.html 已改为柔性付费墙 .paywall-gate，此处不再被引用） */
.lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 40px 24px;
  background: rgba(11, 27, 43, 0.92);
  border: 1px dashed rgba(56, 217, 194, 0.4);
  border-radius: 10px;
  backdrop-filter: blur(2px);
}
.lock-overlay[hidden] { display: none; }
.lock-overlay .lock-ico { color: var(--color-accent); }
.lock-overlay h3 { font-family: var(--font-serif); font-size: 1.125rem; color: var(--color-white); }
.lock-overlay p { font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); max-width: 420px; line-height: 1.8; }

/* 受保护内容：禁止选中与拖拽 */
.pdf-container, .pdf-container * { user-select: none; -webkit-user-select: none; }
.report-body p { user-select: text; }

@media (max-width: 480px) {
  /* LOGO 尺寸统一由 css/style.css 的 --logo-height-* 令牌控制
     （≤480px：导航栏 40px / 页脚 42px），
     此处不再覆盖 .nav-logo-img / .footer-logo-img，避免旧值 28px 抢占令牌。 */
  .brand-icon { height: 26px; }
  .brand-text { font-size: 1rem; letter-spacing: 0.05em; }
  .brand-sub { display: none; }
  .footer-legal { font-size: 0.6875rem; gap: 6px 14px; }
  .modal-header, .modal-body, .modal-footer { padding-left: 18px; padding-right: 18px; }
}

/* 响应式：阶段 3 新增组件 */
@media (max-width: 1024px) {
  .pdf-container { padding: 14px; }
}
@media (max-width: 768px) {
  .nav-user-wrap { width: 100%; }
  .nav-user { width: 100%; justify-content: center; }
  .nav-user-menu { left: 0; right: auto; width: 100%; }
  .pdf-watermark-item { font-size: 11px; margin-right: 60px; }
}

/* ============================================================
   15. 专家团队卡片：统一网格 / 等高 / 头像尺寸完全一致
   （仅覆盖 .team-* 组件布局；不改动 style.css 的设计令牌与深蓝+青绿配色）
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;          /* 网格行高一致 → 5 张卡片等高 */
  gap: 20px;
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;                  /* 撑满网格行高，杜绝高低不一 */
  box-sizing: border-box;
}

/* 头像容器：固定正方形（aspect-ratio 1/1），5 张卡片尺寸完全相同 */
.team-avatar {
  width: 100%;
  max-width: 104px;
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  background: #FFFFFF;           /* 白底：与匿名剪影头像统一；肇越照片同样铺满 */
  flex: 0 0 auto;
}

/* 头像图片：统一裁切规则，严禁拉伸变形 */
.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 简介：占满卡片剩余高度并统一行高，「查看详情」因此在五张卡片上整齐贴底 */
.team-desc { flex: 1 1 auto; line-height: 1.75; }
.team-card .btn-text { margin-top: auto; padding-top: 12px; }

/* ------------------------------------------------------------
   卡片内部排版细化：头像 → 名字 → 名字下方通栏下划线 → 职位 → 简介 → 查看详情
   · 名字：头像下方、加粗加大，深青绿 --color-accent-dark（#1A8A7A，白底对比度约 4.1:1，
     比原 --color-accent (#38D9C2) 明显更清晰）
   · 下划线：与名字文字等宽的通栏线。.team-card 是 flex 列容器且 align-items:center，
     <h4> 会收缩到「名字文字宽度」，故 ::after 的 width:100% 恰好等于名字文字宽度；
     这里同时声明 inline-block，保证日后卡片改成普通块流布局时下划线仍贴合文字宽度
     （无需改动 5 张卡片的 HTML）
   · 职位：更小字号、同一深青绿，维持层级关系
   · 「查看详情」是卡片末尾的独立元素，随简介自动贴底，五张卡片完全一致
   ------------------------------------------------------------ */
.team-name {
  display: inline-block;         /* 收缩到名字文字宽度，让下划线随之等宽（兜底，不依赖 flex） */
  max-width: 100%;               /* 极窄屏兜底，避免长名字溢出卡片 */
  font-size: 1.0625rem;          /* 17px：比原 1rem 更大 */
  font-weight: 700;              /* 加粗 */
  color: var(--color-accent-dark);  /* 深青绿 #1A8A7A：更清晰 */
  margin-bottom: 0;              /* 与下划线的间距交给 ::after 控制 */
}

/* 名字下方的通栏下划线（纯 CSS 生成，宽度 = 名字文字宽度） */
.team-name::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  margin: 8px 0 10px;
  background: var(--color-accent-dark);  /* 与名字同色 */
  border-radius: 2px;
}

.team-role {
  font-size: 0.8125rem;          /* 小于名字，保持层级 */
  color: var(--color-accent-dark);  /* 原文 --color-accent，白底偏浅，改深青绿后更清晰 */
  margin-bottom: 10px;
}

/* 响应式：小屏保持等高，避免卡片被挤成不等宽 */
@media (max-width: 1024px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   16. 会员注册表单（作用域严格限定在 #memberPlanModal 弹窗内部）
   ------------------------------------------------------------
   隔离说明（对应「CSS Module / 局部作用域」要求）：
     本区块不新增任何全局类名，所有选择器均带 #memberPlanModal 前缀，
     只会命中「申请会员方案」弹窗内部的元素，绝不会污染弹窗外部的
     服务卡片（白块）、网格布局、页面背景及其他任何模块；
     颜色 / 圆角 / 过渡全部复用 style.css 的设计令牌（--color-* / --radius-*）。
   视觉：参考「浅灰底表单 + 深色边框输入框」的注册表单设计图。
   ============================================================ */

/* 弹窗内部 hidden 兜底：成功视图 / 提示条等为 flex 容器，需 !important 才能可靠隐藏 */
#memberPlanModal [hidden] { display: none !important; }

/* ---------- 视图 1：权益说明底部的主操作按钮（原虚线提示区位置，居中） ---------- */
#memberPlanModal .plan-cta {
  display: flex;
  justify-content: center;
  margin: 22px 0 2px;
}
#memberPlanModal .plan-cta-btn {
  min-width: 200px;
  padding: 12px 30px;
  font-size: 0.9375rem;
}

/* 注册视图下弹窗加宽（双列表单需要更多横向空间；仅本弹窗生效） */
#memberPlanModal .modal.is-register { max-width: 680px; }

/* ---------- 视图 2：注册表单（浅灰色面板） ---------- */
#memberPlanModal .plan-view--register {
  background: var(--color-bg-light);            /* #F5F7FA 干净浅灰 */
  border: 1px solid var(--color-divider-light);
  border-radius: var(--radius-md);
  padding: 18px 20px 22px;
}
#memberPlanModal .reg-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin-bottom: 10px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-light);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--transition);
}
#memberPlanModal .reg-back:hover { color: var(--color-accent-dark); }
#memberPlanModal .reg-intro {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin-bottom: 16px;
}
#memberPlanModal .req { color: var(--color-cinnabar); font-weight: 700; }  /* 必填星号 */

#memberPlanModal .reg-form { display: flex; flex-direction: column; gap: 14px; }
#memberPlanModal .reg-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
#memberPlanModal .reg-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#memberPlanModal .reg-fieldset { border: 0; padding: 0; margin: 0; }
#memberPlanModal .reg-fieldset.is-invalid .reg-label { color: var(--color-cinnabar); }
#memberPlanModal .reg-label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text);                     /* 深色标签，与浅灰底对比清晰 */
}

/* 输入框 / 下拉框 / 文本域：白底 + 深色边框（简洁风，参考设计图） */
#memberPlanModal .reg-input {
  width: 100%;
  padding: 11px 12px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-text-light);    /* #5A6A7A 深灰描边 */
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
#memberPlanModal .reg-input::placeholder { color: var(--color-text-muted); }
#memberPlanModal .reg-input:focus {
  border-color: var(--color-accent-dark);
  box-shadow: 0 0 0 3px rgba(26, 138, 122, 0.15);
}
#memberPlanModal .reg-input.is-invalid { border-color: var(--color-cinnabar); }
/* 下拉框：去掉系统箭头，换成深色自绘箭头 */
#memberPlanModal select.reg-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6A7A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
#memberPlanModal textarea.reg-input { resize: vertical; min-height: 96px; line-height: 1.7; }

/* 电话号码：左侧国家区号下拉 + 右侧号码输入 */
#memberPlanModal .reg-phone {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 10px;
}

/* 感兴趣领域：Checkbox 多选列表 */
#memberPlanModal .reg-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 16px;
  margin-top: 2px;
}
#memberPlanModal .reg-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--color-text);
  cursor: pointer;
}
#memberPlanModal .reg-check input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--color-accent-dark);
}

/* 表单内提示条（浅底专用，避免沿用深色弹窗的 .auth-notice 风格） */
#memberPlanModal .reg-notice {
  font-size: 0.8125rem;
  line-height: 1.7;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}
#memberPlanModal .reg-notice.is-error { color: #8E2F26; background: rgba(178, 58, 47, 0.08); border-color: rgba(178, 58, 47, 0.35); }
#memberPlanModal .reg-notice.is-ok { color: #14655A; background: rgba(26, 138, 122, 0.10); border-color: rgba(26, 138, 122, 0.35); }

/* 软提示（个人邮箱 → 建议改用公司邮箱；非强制，不阻断提交） */
#memberPlanModal .reg-hint {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-text-light);
}
#memberPlanModal .reg-hint.is-warn { color: var(--color-bronze-dark); }   /* 铜金：提示而非报错 */
#memberPlanModal .reg-input.is-warn { border-color: var(--color-bronze-dark); }

/* 提交中：按钮 loading 动画（配合 disabled 防止网络延迟导致的重复提交）
   注意：选择器带上 [disabled]，以高于上方 .reg-submit[disabled] 的优先级拿到 progress 光标 */
#memberPlanModal .reg-submit.is-loading[disabled] { cursor: progress; }
#memberPlanModal .reg-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid rgba(10, 22, 40, 0.28);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: zy-reg-spin 0.7s linear infinite;
}
@keyframes zy-reg-spin { to { transform: rotate(360deg); } }

/* ---------- 成功视图（提交成功后替换表单，淡入显示；居中排版） ---------- */
/* 成功态：隐藏返回链接 / 引导语 / 表单，只保留成功视图 */
#memberPlanModal .plan-view--register.is-success .reg-back,
#memberPlanModal .plan-view--register.is-success .reg-intro,
#memberPlanModal .plan-view--register.is-success .reg-form { display: none; }

#memberPlanModal .reg-success-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 4px 10px;
  animation: zy-reg-fade-in 0.4s ease both;
}
#memberPlanModal .reg-success-icon {
  width: 64px;
  height: 64px;
  color: var(--color-accent-dark);      /* 品牌主色青绿 #1A8A7A（对勾与描边取 currentColor） */
}
#memberPlanModal .reg-success-icon svg { display: block; width: 64px; height: 64px; }
#memberPlanModal .reg-success-title {
  margin: 18px 0 0;
  font-size: 1.5rem;                    /* 24px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-primary);          /* 深色标题 */
}
#memberPlanModal .reg-success-desc {
  max-width: 460px;
  margin: 12px 0 0;
  font-size: 0.9375rem;                 /* 15px */
  line-height: 1.9;                     /* 舒适留白 */
  color: var(--color-text-light);       /* 次级灰 */
}
#memberPlanModal .reg-success-meta {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
#memberPlanModal .reg-success-actions { margin-top: 26px; display: flex; justify-content: center; }
#memberPlanModal .reg-success-btn { min-width: 180px; padding: 12px 32px; font-size: 1rem; }

@keyframes zy-reg-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* 隐私同意 / 免责声明小字 */
#memberPlanModal .reg-consent {
  font-size: 0.75rem;
  line-height: 1.75;
  color: var(--color-text-light);
  margin-top: 2px;
}

/* 提交按钮：居中、醒目（品牌青绿 --color-accent） */
#memberPlanModal .reg-actions { display: flex; justify-content: center; margin-top: 4px; }
#memberPlanModal .reg-submit { min-width: 220px; padding: 13px 34px; font-size: 1rem; }
#memberPlanModal .reg-submit[disabled] { opacity: 0.85; cursor: default; transform: none; box-shadow: none; }

/* ---------- 响应式（同样只作用于本弹窗） ---------- */
@media (max-width: 640px) {
  #memberPlanModal { padding: 16px 12px; }                            /* 遮罩内边距收窄，给表单留宽度 */
  #memberPlanModal .plan-view--register { padding: 14px 14px 18px; }
  #memberPlanModal .reg-row { grid-template-columns: minmax(0, 1fr); } /* 双列改为单列 */
  #memberPlanModal .reg-phone { grid-template-columns: 92px minmax(0, 1fr); }
  #memberPlanModal .reg-checks { grid-template-columns: minmax(0, 1fr); }
  #memberPlanModal .reg-submit { width: 100%; min-width: 0; }
}

/* ============================================================
   17. 服务项目区副标题：宽屏单行排版（作用域严格限定 #services）
   ------------------------------------------------------------
   背景：基础样式 .section-desc { max-width: 600px }（style.css）会把本区
        副标题「覆盖宏观经济、地缘政治、中云指数与宏观策略的多维度研究
        体系，助力机构投资决策」挤成两行。
   方案：仅在桌面宽屏（≥1025px）解除 600px 限制并禁止换行；此时容器可用
        宽度 ≥977px，而该句单行所需约 646px，故不会溢出。
        max-width: max-content 让元素收紧到文本自身宽度，仍然由
        .section-desc 原有的 margin: 0 auto 保持水平居中。
   回归：平板 / 手机（≤1024px）不命中本规则，排版与原先完全一致（自动换行）。
   ============================================================ */
@media (min-width: 1025px) {
  #services .section-desc {
    max-width: max-content;   /* 收紧到文本自身宽度，不改变居中方式 */
    white-space: nowrap;      /* 宽屏完整一行显示，不再折行 */
  }
}

/* ============================================================
   18. 专项服务详情页（geopolitics / global-news）
   ------------------------------------------------------------
   作用域：.svc-hero* / .svc-list / .svc-card* / .svc-cover* / #serviceVideoModal / #serviceArticleModal
   仅上述两个页面使用，不改变既有区块（服务卡片、报告列表、会员弹窗）的任何样式。
   ============================================================ */

/* ---------- Hero：左文右图（深色，底色沿用 .page-hero 的 --color-ink） ---------- */
.svc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}
.svc-hero-sub {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  line-height: 1.7;
}
.svc-hero .page-desc { margin-top: 16px; max-width: 620px; }
.svc-hero-visual {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-divider-dark);
  background: rgba(255, 255, 255, 0.03);
}
.svc-hero-visual img { display: block; width: 100%; height: auto; }
/* 配图缺失时的抽象占位（保证不出现空白框） */
.svc-hero-visual.is-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 240px;
  border-style: dashed;
  color: rgba(255, 255, 255, 0.5);
}
.svc-hero-visual.is-placeholder em { font-style: normal; font-size: 0.8125rem; }
.svc-hero-visual-ico { color: var(--color-accent); }

/* ---------- 内容列表：纵向排列的横向宽卡片 ---------- */
.svc-list { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.svc-card {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 24px;
  padding: 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.svc-card:hover { border-color: #CFD8E0; box-shadow: 0 10px 26px var(--color-card-shadow); }

/* 左侧封面缩略图 */
.svc-cover { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #0B1B2B; }
.svc-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-cover-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  color: rgba(255, 255, 255, 0.45);
  background: linear-gradient(135deg, #0B1B2B 0%, #123043 100%);
}
.svc-cover-fallback em { font-style: normal; font-size: 0.75rem; }

/* 内容类型标识 + 视频时长 */
.svc-type {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.svc-type--video { background: rgba(10, 22, 40, 0.72); color: var(--color-accent); border: 1px solid rgba(56, 217, 194, 0.5); }
.svc-type--pdf { background: var(--color-bronze); color: #1A1206; }
.svc-type--article { background: rgba(255, 255, 255, 0.88); color: var(--color-primary); }
.svc-duration {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(10, 22, 40, 0.78);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

/* 视频：封面中央半透明播放按钮（叠层，不影响封面图本身） */
.svc-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: rgba(10, 22, 40, 0.26);
  cursor: pointer;
  transition: background var(--transition);
}
.svc-play:hover { background: rgba(10, 22, 40, 0.42); }
.svc-play.is-disabled { cursor: default; background: rgba(10, 22, 40, 0.44); }
.svc-play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(10, 22, 40, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  color: var(--color-white);
  backdrop-filter: blur(2px);
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}
.svc-play-icon svg { margin-left: 2px; }
.svc-play:not(.is-disabled):hover .svc-play-icon {
  transform: scale(1.08);
  background: rgba(56, 217, 194, 0.88);
  border-color: rgba(56, 217, 194, 0.95);
  color: #06231F;
}

/* ---------- 卡片右侧：标签 / 加粗标题 / 摘要 / 作者与日期 / 动作 ---------- */
.svc-card-body { display: flex; flex-direction: column; min-width: 0; }
.svc-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent-dark);
}
.svc-tag-sep { color: var(--color-border); font-weight: 400; }
.svc-card-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 10px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-primary);
}
.svc-card-summary { font-size: 0.875rem; line-height: 1.8; color: var(--color-text-light); }
.svc-card-meta { margin-top: 12px; font-size: 0.75rem; color: var(--color-text-muted); }
.svc-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}
.svc-hint { font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.7; }

/* ---------- 视频弹窗 / 图文弹窗（复用既有 .modal-* 结构，仅宽度与内容区不同） ---------- */
#serviceVideoModal .modal { max-width: 880px; }
#serviceArticleModal .modal { max-width: 760px; }
#serviceVideoModal .data-note,
#serviceArticleModal .data-note { color: rgba(255, 255, 255, 0.5); border-left-color: var(--color-divider-dark); }
#serviceVideoModal .data-note,
#serviceArticleModal .data-note { margin-top: 16px; }

.video-frame {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  min-height: 180px;
}
.video-frame video { display: block; width: 100%; max-height: 66vh; background: #000; }
.video-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 56px 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}
.video-fallback[hidden] { display: none; }
.video-fallback p { font-size: 0.8125rem; line-height: 1.8; max-width: 520px; }

.svc-article-body { max-height: 56vh; overflow: auto; }
.svc-article-body p { margin-bottom: 12px; }
.svc-article-body p:last-child { margin-bottom: 0; }

/* ---------- 响应式：Hero 单列、卡片改为上下排列 ---------- */
@media (max-width: 1024px) {
  .svc-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .svc-hero-visual { max-width: 520px; }
  .svc-card { grid-template-columns: 220px minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 768px) {
  .svc-card { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
  .svc-cover { aspect-ratio: 16 / 9; }
  .svc-card-title { font-size: 1rem; }
  .svc-card-actions { gap: 10px; }
  .svc-card-actions .btn { width: 100%; text-align: center; }
  .svc-hint { width: 100%; }
  .svc-play-icon { width: 48px; height: 48px; }
  #serviceVideoModal .modal-body,
  #serviceArticleModal .modal-body { padding: 16px; }
}

/* ============================================================
   19. 微信 H5 / 移动端专项（全部包裹在 @media (max-width: 768px) 内）
   ------------------------------------------------------------
   覆盖 components.css 自有组件（弹窗 / 筛选 / 复选框）与会员注册弹窗的
   移动端行为；>768px 的 PC 端不命中任何一条，布局与样式完全保持现状。
     · 弹窗：内部平滑滚动 + 阻断滚动穿透（overscroll-behavior）+ 底部安全区
     · 触控热区 ≥44px：弹窗关闭按钮 / 筛选按钮 / 复选框行
     · 会员注册表单：PC 端双栏（名|姓、职称|公司）→ 移动端上下单列
     · 表单控件字号提升到 16px，避免 iOS / 微信聚焦时自动放大页面
   ============================================================ */

/* ---------- 微信环境软提示弹窗（js/components/wechat-hint.js） ---------- */
#wxBrowserHintModal .modal-body p { font-size: 0.9375rem; line-height: 1.9; color: rgba(255, 255, 255, 0.78); }
#wxBrowserHintModal .wx-hint-steps { counter-reset: wxstep; margin: 14px 0 0; padding: 0; list-style: none; }
#wxBrowserHintModal .wx-hint-steps li {
  position: relative;
  padding-left: 22px;
  font-size: 0.875rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.72);
}
#wxBrowserHintModal .wx-hint-steps li::before {
  counter-increment: wxstep;
  content: counter(wxstep) '.';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}
#wxBrowserHintModal .data-note { margin-top: 14px; color: rgba(255, 255, 255, 0.5); border-left-color: var(--color-divider-dark); }
#wxBrowserHintModal .wx-hint-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }

@media (max-width: 768px) {
  /* ---------- 弹窗：滚动与穿透 ---------- */
  .modal-overlay {
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));   /* 不贴住 iPhone 指示条 */
    overscroll-behavior: contain;                               /* 滚动到边界不回传给页面 */
    -webkit-overflow-scrolling: touch;                          /* iOS 惯性滚动 */
  }
  .modal { max-height: calc(100vh - 32px); }                     /* 内容再长也只在弹窗内滚动 */
  body.modal-open { overscroll-behavior: none; }                 /* 弹窗打开时禁用底层滚动链 */
  .modal-close { width: 44px; height: 44px; }                    /* 关闭按钮热区 ≥44px */

  /* ---------- 筛选按钮 / 复选框行：热区 ≥44px ---------- */
  .filter-btn { display: inline-flex; align-items: center; min-height: 44px; }
  .reg-check,
  .auth-check { display: inline-flex; align-items: center; min-height: 44px; }

  /* ---------- 会员注册弹窗：「双栏 → 上下单列」 ---------- */
  #memberPlanModal .modal { max-height: calc(100vh - 24px); }
  #memberPlanModal .reg-row { grid-template-columns: minmax(0, 1fr); }   /* 名/姓、职称/公司改为上下排列 */
  #memberPlanModal .reg-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #memberPlanModal .plan-view--register { padding: 16px 16px 20px; }
  /* 输入框：热区 ≥44px + 16px 字号（iOS / 微信聚焦不再自动缩放） */
  #memberPlanModal .reg-input { min-height: 44px; font-size: 1rem; }
  #memberPlanModal .reg-submit { min-height: 46px; }

  /* ---------- 登录弹窗输入框 ---------- */
  .auth-input { min-height: 44px; font-size: 1rem; }
}

/* ============================================================
   20. 专项服务详情页「增强 Hero + 成果区」：地缘政治解读 / 全球新闻大事件观点 共用
   ------------------------------------------------------------
   作用域：仅 .svc-hero--rich / .svc-hero-cta* / .svc-metrics / .svc-metric*
          / .svc-chart* / .svc-outcomes / .svc-outcome* / .svc-list-section
   复用：两个服务页共享本区块的全部样式与 js/pages/service-detail.js 的渲染函数，
        差异只来自 data/services.json 的数据字典（heroTitle / heroMetrics /
        heroChart.variant / outcomes）；未配置这些字段的服务页不渲染对应区块。
   动态图两个变体：.svc-chart--bars（柱状图 + 折线）/ .svc-chart--scatter（散点 + 趋势面）。
   配色：深色底一律使用全站令牌（--color-ink #0A1628 / --color-primary 家族），
        强调色使用品牌青绿 --color-accent，风险数值使用朱砂 --color-cinnabar；
        不使用参考样图的亮蓝色，确保与首页 Header 及其他深色区块同族。
   说明：本节不修改 §18 及更早区块的任何既有声明，仅新增类名与关键帧。
   ============================================================ */

/* ---------- Hero 容器：全宽深色 + 层次光晕与网格底纹 ---------- */
.svc-hero--rich {
  position: relative;
  overflow: hidden;
  padding: 138px 0 68px;
  background:
    radial-gradient(1100px 420px at 78% 6%, rgba(56, 217, 194, 0.13), transparent 62%),
    radial-gradient(760px 380px at 4% 98%, rgba(200, 166, 106, 0.07), transparent 60%),
    var(--color-ink);
}
.svc-hero--rich::before {                     /* 细网格底纹（装饰，不参与交互） */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(1000px 420px at 72% 18%, #000 10%, transparent 72%);
  mask-image: radial-gradient(1000px 420px at 72% 18%, #000 10%, transparent 72%);
  pointer-events: none;
}
.svc-hero--rich .container { position: relative; z-index: 1; }

/* 主标题：白色大号加粗；text-wrap: balance 让长标题自动均分两行。
   注意：仅靠 balance 无法避免「与」这类单字连接词孤悬行末，长标题请配合 heroTitleLines 分段（见下条）。 */
.svc-hero--rich h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 4.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: var(--color-white);
  text-wrap: balance;
}
/* 长标题分段（heroTitleLines）：段内不拆行、只在段间软换行，
   因此「与」这类连接词永远不会孤悬在上一行行末；
   桌面端字号上限由 56px 收到 48px 以争取单行显示，字距与行高同步加大以提升呼吸感。
   颜色 #FFFFFF 与字重 700 沿用上一条规则，未作改动。 */
.svc-hero--rich h1.is-segmented {
  font-size: clamp(2.5rem, 4.4vw, 3rem);   /* 桌面 48px（原 56px）→ 1440 及以上可单行显示 */
  line-height: 1.24;                        /* 两行时不贴合（1.2–1.3） */
  letter-spacing: 0.05em;                   /* 微增字距，粗体大字更舒展 */
  text-align: left;
}
.svc-hero--rich h1 .svc-hero-title-seg { white-space: nowrap; }
.svc-hero--rich .breadcrumb { font-size: 0.6875rem; letter-spacing: 0.02em; margin-bottom: 18px; }
.svc-hero--rich .svc-hero-sub { font-size: 1.125rem; margin-top: 14px; }
.svc-hero--rich .page-desc { margin-top: 18px; max-width: 640px; }

/* ---------- 主 CTA「申请试用」（品牌青绿，复用首页注册弹窗） ---------- */
.svc-hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.svc-hero-cta-btn { padding: 14px 34px; font-size: 1rem; }
.svc-hero-cta-note { font-size: 0.8125rem; line-height: 1.7; color: rgba(255, 255, 255, 0.5); }

/* ---------- 数据指标栏：三个指标区块同行排列 ---------- */
.svc-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--color-divider-dark);
}
.svc-metrics[hidden] { display: none; }
.svc-metric { padding: 0 22px; border-left: 1px solid var(--color-divider-dark); }
.svc-metric:first-child { padding-left: 0; border-left: 0; }
.svc-metric-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-en);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-white);
}
.svc-metric-value--text { font-size: 1.5rem; letter-spacing: 0.02em; color: var(--color-accent); }
.svc-metric-unit { font-size: 0.9375rem; font-weight: 600; color: var(--color-accent); }
.svc-metric-label {
  margin-top: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}
.svc-metric-note { margin-top: 4px; font-size: 0.75rem; line-height: 1.7; color: rgba(255, 255, 255, 0.45); }

/* ---------- 右侧动态图区（内联 SVG + CSS 关键帧，微动效方案见文件头注释） ---------- */
.svc-chart {
  position: relative;
  border-radius: 14px;
  padding: 18px 18px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.025) 46%, rgba(10, 22, 40, 0.35) 100%);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(6px);
}
/* 数据缺失时的回退：静态配图 / 虚线占位（沿用 §18 占位视觉） */
.svc-chart--fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 260px;
  border-style: dashed;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}
.svc-chart--fallback img { display: block; width: 100%; height: auto; border-radius: 10px; }
.svc-chart--fallback em { font-style: normal; font-size: 0.8125rem; }

.svc-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.svc-chart-title { font-size: 0.9375rem; font-weight: 700; color: var(--color-white); }
.svc-chart-sub {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
}
.svc-chart-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(56, 217, 194, 0.42);
  background: rgba(56, 217, 194, 0.10);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}
.svc-chart-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: svcLivePulse 2.4s ease-in-out infinite;
}

.svc-chart-plot {
  position: relative;
  margin-top: 14px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(6, 14, 26, 0.42);
}
.svc-chart-svg { display: block; width: 100%; height: auto; }

.svc-chart-grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.svc-chart-base { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }

/* 柱体：① 按 --i 错峰「升入」（一次性）② 之后持续缓慢上下浮动（无限循环） */
.svc-chart-bar {
  fill: url(#svcChartBar);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: svcBarRise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both,
             svcBarFloat 6.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.07s), calc(var(--i) * 0.42s + 0.9s);
}
/* 折线：绘制动画（一次性）+ 呼吸光晕（无限循环） */
.svc-chart-line {
  fill: none;
  stroke: var(--color-bronze);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: svcLineDraw 1.7s ease-out 0.35s forwards,
             svcLineBreath 5.6s ease-in-out 2.2s infinite;
}
/* 数据点：错峰脉冲 */
.svc-chart-dot {
  fill: var(--color-bronze);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0.75;
  animation: svcDotPulse 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.22s);
}
/* 数据芯片：缓慢上下漂浮；风险数值用朱砂（与全站风险语义一致） */
.svc-chart-chip {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 22, 40, 0.82);
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.78);
  animation: svcChipFloat 7.5s ease-in-out infinite;
}
.svc-chart-chip b { font-weight: 600; }
.svc-chart-chip em { font-style: normal; font-family: var(--font-mono); font-weight: 700; color: var(--color-cinnabar); }
/* 缓慢扫过的高光条（科技感） */
.svc-chart-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 38%;
  background: linear-gradient(100deg, transparent 0%, rgba(56, 217, 194, 0.14) 48%, transparent 100%);
  transform: translateX(-120%);
  animation: svcSweep 7.2s ease-in-out 1.2s infinite;
  pointer-events: none;
}
.svc-chart-foot { margin-top: 12px; font-size: 0.6875rem; line-height: 1.7; color: rgba(255, 255, 255, 0.42); }

/* ---------- 变体二：散点闪烁 + 趋势面呼吸（全球新闻大事件观点）
   与变体一（柱状图 + 折线）共用外壳与底衬，仅图形与节奏不同，避免两页动效雷同。 ---------- */
.svc-chart--scatter .svc-chart-area {                 /* 趋势面：缓慢呼吸（青绿，面积极小） */
  fill: url(#svcChartArea);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: svcAreaBreath 7.6s ease-in-out infinite;
}
.svc-chart--scatter .svc-chart-trend {                /* 趋势线：虚线流动（区别于变体一的「一次性绘制」） */
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
  opacity: 0.7;
  animation: svcDashFlow 9s linear infinite;
}
.svc-chart--scatter .svc-chart-scatters { pointer-events: none; }
.svc-chart--scatter .svc-chart-scatter {              /* 散点：铜金小面积点缀，逐点错峰闪烁 */
  fill: var(--color-bronze);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: svcTwinkle 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.33s);
  animation-duration: calc(2.8s + var(--i) * 0.22s);   /* 逐点节奏不同，避免整齐划一 */
}
.svc-chart--scatter .svc-chart-scatter-halo {         /* 光晕：低透明度扩张脉冲 */
  fill: none;
  stroke: var(--color-bronze);
  stroke-width: 1;
  opacity: 0.3;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: svcHaloPulse 4.6s ease-out infinite;
  animation-delay: calc(var(--i) * 0.33s);
}

/* ---------- 关键帧（只用 transform / opacity） ---------- */
@keyframes svcBarRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes svcBarFloat { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.88); } }
@keyframes svcLineDraw { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
@keyframes svcLineBreath { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
@keyframes svcDotPulse { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.55); opacity: 1; } }
@keyframes svcChipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes svcSweep { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(320%); } }
@keyframes svcLivePulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
/* 变体二（散点 + 趋势面）专用关键帧 */
@keyframes svcAreaBreath { 0%, 100% { transform: scaleY(1); opacity: 0.78; } 50% { transform: scaleY(0.9); opacity: 1; } }
@keyframes svcDashFlow { from { stroke-dashoffset: 96; } to { stroke-dashoffset: 0; } }
@keyframes svcTwinkle { 0%, 100% { transform: scale(0.82); opacity: 0.42; } 50% { transform: scale(1.16); opacity: 1; } }
@keyframes svcHaloPulse { 0% { transform: scale(0.72); opacity: 0.36; } 70%, 100% { transform: scale(1.5); opacity: 0; } }

/* ---------- 中部成果区：浅灰底 + 居中标题 + 四列等宽卡片 ---------- */
.svc-outcomes { background: var(--color-bg-light); padding: 84px 0 76px; }
.svc-outcomes[hidden] { display: none; }
.svc-outcomes .section-header { margin-bottom: 44px; }
.svc-outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.svc-outcome {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.svc-outcome:hover { transform: translateY(-3px); border-color: #CFD8E0; box-shadow: 0 14px 30px var(--color-card-shadow); }

/* 卡片顶部：深色分类块（沿用全站深藏青，禁用样图亮蓝）+ 右侧线性图标 */
.svc-outcome-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 15px;
  background: linear-gradient(150deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.svc-outcome-title { font-size: 1rem; font-weight: 700; line-height: 1.5; color: var(--color-white); }
.svc-outcome-meta {
  display: inline-block;
  margin-top: 7px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(56, 217, 194, 0.42);
  background: rgba(56, 217, 194, 0.10);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}
.svc-outcome-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-accent);
}
.svc-outcome-body { flex: 1; padding: 18px; background: var(--color-white); }
.svc-outcome-body p { font-size: 0.875rem; line-height: 1.85; color: var(--color-text-light); }

/* ---------- 列表区与成果区的平滑衔接（细分割线 + 收敛留白） ---------- */
.svc-list-section { border-top: 1px solid var(--color-divider-light); padding-top: 76px; }

/* ---------- prefers-reduced-motion：关闭全部微动效 ---------- */
/* 关键帧终止态即最终可见态，因此关闭动画后静态呈现依然完整（柱体满高、折线绘制完整） */
@media (prefers-reduced-motion: reduce) {
  .svc-chart-bar,
  .svc-chart-line,
  .svc-chart-dot,
  .svc-chart-chip,
  .svc-chart-sweep,
  .svc-chart-live i,
  .svc-chart--scatter .svc-chart-area,
  .svc-chart--scatter .svc-chart-trend,
  .svc-chart--scatter .svc-chart-scatter,
  .svc-chart--scatter .svc-chart-scatter-halo { animation: none; }
  .svc-chart-line { stroke-dashoffset: 0; }
  .svc-outcome:hover,
  .svc-outcome { transition: none; transform: none; }
  /* 预测期遮罩：关闭 hover 位移与过渡 */
  .prediction-mask,
  .prediction-mask .prediction-lock { transition: none; }
  .prediction-mask:hover .prediction-lock { transform: none; }
}

/* ---------- 响应式：≤1024 Hero 单列（§18 已处理栅格）+ 卡片两列；≤768 全部单列 ---------- */
@media (max-width: 1024px) {
  .svc-hero--rich { padding: 124px 0 56px; }
  .svc-chart { max-width: 560px; }
  .svc-metric-value { font-size: 2rem; }
  .svc-outcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .svc-hero--rich { padding: 108px 0 46px; }
  .svc-hero--rich h1 { font-size: 2.125rem; }
  /* 分段长标题：移动端保持原字号（34px），行高放宽到 1.3，段间照常换行且不溢出 */
  .svc-hero--rich h1.is-segmented { font-size: 2.125rem; line-height: 1.3; }
  .svc-hero-cta { gap: 10px; }
  .svc-hero-cta-btn { width: 100%; }
  .svc-metrics { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 20px; }
  .svc-metric { padding: 0; border-left: 0; }
  .svc-metric-value { font-size: 1.875rem; }
  .svc-chart { max-width: none; padding: 16px 16px 12px; }
  .svc-chart-chip { position: static; display: inline-flex; margin-top: 10px; }
  .svc-outcomes { padding: 56px 0 52px; }
  .svc-outcomes .section-header { margin-bottom: 32px; }
  .svc-outcome-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-list-section { padding-top: 56px; }
}
/* 极窄屏（少见设备/浏览器分屏）：再收一号，确保分段标题的较长段（7 字）不产生横向溢出 */
@media (max-width: 359px) {
  .svc-hero--rich h1.is-segmented { font-size: 1.875rem; }
}







/* ============================================================
   19. 首页「免费试用」线索弹窗 + 报告页柔性付费墙（Soft Paywall）
   ------------------------------------------------------------
   作用域（全部为新增选择器，不覆盖任何既有规则）：
     · #trialModal / .auth-consent / .auth-input.is-invalid —— 线索弹窗专属补充
       （弹窗外壳仍复用 .modal / .modal-sm / .auth-form / .auth-input / .auth-notice）
     · .paywall-teaser* / .paywall* / .report-real —— 仅 report.html 使用
   视觉语言：青绿描边 + 深蓝玻璃卡（沿用全站高级金融终端质感）；
   动效只用 transform / opacity，并遵循 prefers-reduced-motion。
   ============================================================ */

/* ---------- 19.1 线索弹窗：必填星号 + 底部说明 + 校验失败态 ---------- */
/* 深色弹窗内的必填星号（浅底表单仍走 §16 的 #memberPlanModal .req，二者互不影响） */
#trialModal .req,
.auth-label .req { color: #F2A79C; font-weight: 700; }

/* 表单底部说明：比正文更轻，不抢主按钮焦点 */
.auth-consent {
  font-size: 0.75rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.42);
}

/* 校验失败：只加描边与光晕，不改尺寸（避免布局跳动） */
.auth-input.is-invalid {
  border-color: rgba(242, 167, 156, 0.72);
  box-shadow: 0 0 0 3px rgba(178, 58, 47, 0.14);
}

/* ---------- 19.2 柔性付费墙 · 免费预览区（摘要 / 反共识结论，始终可见） ---------- */
.paywall-teaser {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--color-divider-light);
}
.paywall-teaser-label {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-accent-dark);
  background: rgba(56, 217, 194, 0.10);
  border: 1px solid rgba(56, 217, 194, 0.30);
  border-radius: 999px;
  padding: 3px 12px;
}
.paywall-teaser-title {
  margin: 14px 0 10px;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}
.paywall-teaser-points {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.paywall-teaser-points li {
  position: relative;
  padding-left: 16px;
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--color-text-light);
}
.paywall-teaser-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.74em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.85;
}

/* ---------- 19.3 柔性付费墙 · 模糊内容层 ---------- */
.paywall { position: relative; margin-top: 30px; }
.paywall-blur {
  padding: 30px 28px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  filter: blur(8px);          /* 柔性付费墙核心：下方内容整体模糊，仍保留「有深度内容」的轮廓 */
  pointer-events: none;       /* 模糊层不可点击、不可选中 */
  user-select: none;
  -webkit-user-select: none;
}
.paywall-blur[hidden] { display: none; }   /* 已解锁：整块隐藏，让位给真实报告内容 */

/* 虚拟正文排版（与真实报告同构，仅作视觉暗示） */
.paywall-h2 {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 24px 0 10px;
}
.paywall-h2:first-child { margin-top: 0; }
.paywall-h3 { font-size: 0.9375rem; font-weight: 700; color: var(--color-text); margin: 18px 0 8px; }
.paywall-p { font-size: 0.875rem; line-height: 1.95; color: var(--color-text-light); margin-bottom: 10px; }

/* 图表骨架：柱体高度由内联 --h 指定，纯 CSS 绘制（不引入任何图表依赖） */
.paywall-figure {
  margin: 18px 0 6px;
  padding: 16px 16px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.paywall-figure-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
}
.paywall-figure-tag {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-accent-dark);
  background: rgba(56, 217, 194, 0.08);
  border: 1px solid rgba(56, 217, 194, 0.34);
}
.paywall-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  border-bottom: 1px solid var(--color-divider-light);
}
.paywall-bars i {
  flex: 1;
  height: var(--h, 40%);
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, rgba(56, 217, 194, 0.78), rgba(56, 217, 194, 0.26));
}
.paywall-bars i.is-alt { background: linear-gradient(180deg, rgba(200, 166, 106, 0.82), rgba(200, 166, 106, 0.24)); }
.paywall-figure figcaption { margin-top: 10px; font-size: 0.6875rem; line-height: 1.7; color: var(--color-text-muted); }

/* 数据表骨架 */
.paywall-table { width: 100%; border-collapse: collapse; margin: 14px 0 4px; font-size: 0.8125rem; }
.paywall-table th,
.paywall-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--color-divider-light);
  color: var(--color-text-light);
}
.paywall-table th { font-size: 0.75rem; font-weight: 700; color: var(--color-primary); background: rgba(10, 22, 40, 0.03); }
.paywall-table td.is-strong { font-weight: 700; color: var(--color-primary); }


/* ---------- 19.4 柔性付费墙 · 解锁引导层（覆盖在模糊内容之上） ---------- */
.paywall-gate {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.10) 0%, rgba(10, 22, 40, 0.62) 46%, rgba(10, 22, 40, 0.88) 100%);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}
.paywall-gate[hidden] { display: none; }   /* 覆盖 display:flex，会员解锁后整块移除 */
.paywall-gate-inner {
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 32px 30px 28px;
  border-radius: 14px;
  border: 1px solid rgba(56, 217, 194, 0.28);
  background: rgba(11, 27, 43, 0.88);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.40);
  animation: zy-paywall-in 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* 锁形图标：青绿描边圆角方块 + 外圈光晕（与 PDF 硬锁遮罩 .lock-ico 同一视觉语言） */
.paywall-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  color: var(--color-accent);
  border: 1px solid rgba(56, 217, 194, 0.35);
  background: rgba(56, 217, 194, 0.10);
  box-shadow: 0 0 0 6px rgba(56, 217, 194, 0.05);
}
.paywall-lock svg { display: block; }
.paywall-gate-title {
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-white);
}
.paywall-gate-desc { font-size: 0.8125rem; line-height: 1.85; color: rgba(255, 255, 255, 0.62); }
.paywall-gate-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 4px; }
/* 主按钮文案较长（「会员登录以解锁完整深度论证与数据图表」），窄屏允许换行、行高收紧 */
.paywall-gate-actions .btn { width: 100%; white-space: normal; line-height: 1.5; }
.paywall-gate-note { font-size: 0.6875rem; line-height: 1.7; color: rgba(255, 255, 255, 0.38); }

/* 引导层淡入：仅动画 opacity / transform */
@keyframes zy-paywall-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 19.5 柔性付费墙 · 响应式与动效降级 ---------- */
@media (max-width: 768px) {
  .paywall { margin-top: 22px; }
  /* 移动端模糊层限高，避免引导卡出现在首屏之外 */
  .paywall-blur { padding: 20px 16px; max-height: 620px; overflow: hidden; filter: blur(6px); }
  .paywall-bars { height: 90px; }
  .paywall-figure { padding: 14px 12px 10px; }
  .paywall-table { font-size: 0.75rem; }
  .paywall-table th,
  .paywall-table td { padding: 7px 8px; }
  .paywall-gate { padding: 20px 14px; }
  .paywall-gate-inner { padding: 24px 18px 22px; gap: 12px; }
  .paywall-gate-title { font-size: 1.0625rem; }
  .paywall-teaser-title { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .paywall-gate-inner { animation: none; }
}

/* ============================================================
   20. 头部交互：移动端抽屉 / 长文案加固
   ------------------------------------------------------------
   站点为纯中文，不再包含旧版语言控件或防闪烁遮罩。
   本区块只保留头部右侧按钮容器与导航断点加固，不新增布局令牌。
   ============================================================ */

/* 头部右侧容器：移动端汉堡按钮（各页 Header 共用） */
.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* ---------- 20.3 导航加固：中文菜单「不换行、不被压缩」 ---------- */
.nav-list > li { flex: 0 0 auto; }
.nav-link { white-space: nowrap; }
.main-nav,
.nav-cta,
.nav-auth { flex-shrink: 0; }

/* 1024–1100px：中文导航最挤（服务项目 / 中云指数 / 研究框架 / 活动 / 关于我们 ↔ 会员登录）
   收紧间距与字号，而不是让某一项折行；≤1024px 由页面既有的抽屉断点接管。 */
@media (max-width: 1100px) {
  .main-nav { gap: 14px; }
  .nav-list { gap: 12px; }
  .nav-link { font-size: 0.8125rem; }
  .nav-cta { padding: 7px 12px; font-size: 0.75rem; }
  .nav-auth { padding: 6px 10px; font-size: 0.75rem; }
}

/* ---------- 20.4 长文案兜底：不撑破容器 ---------- */
@media (min-width: 769px) {
  .team-name { overflow-wrap: anywhere; }   /* 姓名过长时允许断行，不撑破卡片 */
  .team-role { min-height: 2.6em; }         /* 预置两行高度，五张卡片的「查看详情」仍在同一水平线 */
}
/* 长标题 / 长段落：允许在容器内折行，不撑破卡片 */
.service-title,
.report-title,
.footer-title,
.about-lead { overflow-wrap: break-word; }


/* ============================================================
   21. 客户门户（portal.html · /portal/:clientId）
   ——与登录页同一深色基调（--color-ink 底 + #0F2137 卡片），
     复用 .btn / .report-row / .data-note 等既有组件；
     仅在门户容器内覆盖文字色，避免影响浅色区的同名片（.report-row 等）。
   ============================================================ */
.portal-page {
  min-height: 100vh;
  padding: 132px 0 72px;          /* 与 .page-hero 同一留白口径：让开固定 Header */
  background: var(--color-ink);
  color: var(--color-white);
}

/* ---------- 21.1 卡片与外层容器 ---------- */
.portal-card {
  background: #0F2137;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 24px;
}
.portal-card-title { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 700; color: var(--color-white); }
.portal-card-desc { margin-top: 8px; font-size: 0.8125rem; line-height: 1.8; color: rgba(255, 255, 255, 0.55); }

/* ---------- 21.2 页头：徽标 / 主标题 / 客户编号 / 视图切换 ---------- */
.portal-head { margin-bottom: 28px; }
.portal-badge {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.portal-title { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; }
.portal-lead { margin-top: 12px; max-width: 760px; font-size: 0.9375rem; line-height: 1.85; color: rgba(255, 255, 255, 0.66); }
/* 客户编号：等宽字体 + 强调色，便于与 URL 中的 ?client= 逐一核对 */
.portal-client { margin-top: 10px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-accent); }

.portal-views { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.portal-view-link {
  padding: 8px 16px;
  font-size: 0.8125rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.portal-view-link:hover { border-color: var(--color-accent); color: var(--color-accent); }
.portal-view-link.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-primary); font-weight: 600; }

/* ---------- 21.3 账户卡：字段行 + 凭据 ---------- */
.portal-account { display: flex; flex-direction: column; margin-top: 18px; }
.portal-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-divider-dark);
}
.portal-row:last-child { border-bottom: 0; }
.portal-row dt { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.5); }
.portal-row dd { font-size: 0.875rem; color: rgba(255, 255, 255, 0.86); word-break: break-word; }
.portal-token {
  display: inline-block;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-accent);
  background: rgba(56, 217, 194, 0.08);
  border-radius: 6px;
  cursor: help;                    /* 完整 Mock JWT 在 title 上，悬停可核对 */
}
.portal-note { margin-top: 14px; font-size: 0.75rem; line-height: 1.75; color: rgba(255, 255, 255, 0.38); }

/* ---------- 21.4 已解锁报告：沿用 .report-row 版式，只把颜色对齐深色卡 ---------- */
.portal-count { margin-top: 14px; font-family: var(--font-mono); font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); }
.portal-reports { margin-top: 8px; border-top-color: var(--color-divider-dark); }
.portal-reports .report-row { border-bottom-color: var(--color-divider-dark); }
.portal-reports .report-row:hover { background: rgba(56, 217, 194, 0.06); }
.portal-reports .report-row .r-title { color: var(--color-white); }
.portal-reports .report-row .r-date { color: rgba(255, 255, 255, 0.42); }
.portal-reports .report-row .r-module { color: rgba(255, 255, 255, 0.5); }
.portal-page .data-note { color: rgba(255, 255, 255, 0.45); }

/* ---------- 21.5 后续步骤与演示提示 ---------- */
.portal-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 14px; }
.portal-links a { font-size: 0.8125rem; color: var(--color-accent); }
.portal-links a:hover { color: var(--color-accent-hover); }
.portal-tip { font-size: 0.75rem; line-height: 1.75; color: rgba(255, 255, 255, 0.34); }

/* ---------- 21.6 守卫卡（客户编号不匹配 / 未开通门户） ---------- */
.portal-guard { padding: 44px 32px; text-align: center; }
.portal-guard-title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; }
.portal-guard-desc { max-width: 560px; margin: 12px auto 20px; font-size: 0.875rem; line-height: 1.85; color: rgba(255, 255, 255, 0.62); }
.portal-guard-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- 21.7 响应式（与 style.css 的 ≤768 抽屉断点一致） ---------- */
@media (max-width: 768px) {
  .portal-page { padding: 104px 0 56px; }
  .portal-card { padding: 22px 20px; }
  .portal-title { font-size: 1.5rem; }
  .portal-row { grid-template-columns: 1fr; gap: 4px; }
  .portal-row dt { font-size: 0.75rem; }
  .portal-guard { padding: 32px 20px; }
}