/* ─────────────────────────────────────────────────────────────
   NewIVF 全站样式
   ─────────────────────────────────────────────────────────────

   两条取舍先说清楚：

   1. 不引外部字体。中文正文用系统字体栈——思源黑体之类的 CJK 字体
      动辄好几 MB，为了字形统一让首屏多等一秒不值得。西文部分靠
      system-ui 拿到各平台最好的那套（macOS 的 SF、Windows 的 Segoe）。

   2. 颜色全部走 CSS 变量。这个站点的读者会用手机在夜里查资料，
      暗色模式不是可选项。所有颜色只在这里定义一次，
      组件里不许出现字面色值——否则暗色下必然有某处读不出来。

   配色取深青绿（#0f6b5c 系）而不是医疗行业惯用的蓝：
   蓝色在这个领域已经泛滥到没有辨识度，而青绿既保留了「临床、冷静」
   的观感，又不至于和满屏的竞品撞在一起。
   ───────────────────────────────────────────────────────────── */

:root {
  /* 表面与文字 */
  --bg:            #fbfbf9;
  --surface:       #ffffff;
  --surface-alt:   #f4f6f4;
  --ink:           #16211f;
  --ink-muted:     #5f6b68;
  --ink-faint:     #8a938f;
  --border:        #e2e6e3;
  --border-strong: #cfd6d2;

  /* 主色 */
  --accent:        #0f6b5c;
  --accent-hover:  #0b5347;
  --accent-soft:   #e6f2ef;
  --accent-ink:    #ffffff;

  /* 状态 */
  --warn-bg:       #fdf6e8;
  --warn-border:   #e8d9b0;
  --warn-ink:      #7a5a12;

  /* 数据状态（§9.3 核验徽标 / 示例标记 / 数据缺口）
     这几组色是给数据用的，不是给「成功/失败」用的。
     刻意避开红绿对立：这里的「已核验」不是好消息，「存疑」也不是坏消息，
     它们描述的是**我们查到了什么程度**。用红绿会让读者读成评价。 */
  --ok-bg:         #e8f3ee;
  --ok-border:     #bcd9cd;
  --ok-ink:        #14614f;

  --danger-bg:     #fdecea;
  --danger-border: #f0c4bd;
  --danger-ink:    #8f2f22;

  --demo-bg:       #f1edfa;
  --demo-border:   #d6cbf0;
  --demo-ink:      #55409b;

  --neutral-bg:    #eef0ef;
  --neutral-border:#d5dad8;

  /* 排版 */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
               Consolas, "Liberation Mono", monospace;

  --step--1: 0.875rem;
  --step-0:  1rem;
  --step-1:  1.125rem;
  --step-2:  1.375rem;
  --step-3:  1.75rem;
  --step-4:  2.25rem;
  --step-5:  3rem;

  /* 布局 */
  --wrap:      1120px;
  --gutter:    20px;
  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 1px 2px rgba(22, 33, 31, .05),
               0 4px 16px -8px rgba(22, 33, 31, .10);

  color-scheme: light;
}

/* 暗色：显式选择优先于系统设置，两边都要覆盖到 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0e1413;
    --surface:       #161e1c;
    --surface-alt:   #1b2523;
    --ink:           #e7edeb;
    --ink-muted:     #9daba7;
    --ink-faint:     #74827e;
    --border:        #263230;
    --border-strong: #35443f;

    --accent:        #4ec2a8;
    --accent-hover:  #6ad3bb;
    --accent-soft:   #16302b;
    --accent-ink:    #08211c;

    --warn-bg:       #2a2418;
    --warn-border:   #4a3f24;
    --warn-ink:      #e0c073;

    --ok-bg:         #14302a;
    --ok-border:     #235145;
    --ok-ink:        #6fd3b6;

    --danger-bg:     #33201d;
    --danger-border: #5c3730;
    --danger-ink:    #f0a79b;

    --demo-bg:       #241f38;
    --demo-border:   #3d3460;
    --demo-ink:      #b9a8f0;

    --neutral-bg:    #1e2726;
    --neutral-border:#313d3b;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4),
              0 4px 16px -8px rgba(0, 0, 0, .6);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:            #0e1413;
  --surface:       #161e1c;
  --surface-alt:   #1b2523;
  --ink:           #e7edeb;
  --ink-muted:     #9daba7;
  --ink-faint:     #74827e;
  --border:        #263230;
  --border-strong: #35443f;

  --accent:        #4ec2a8;
  --accent-hover:  #6ad3bb;
  --accent-soft:   #16302b;
  --accent-ink:    #08211c;

  --warn-bg:       #2a2418;
  --warn-border:   #4a3f24;
  --warn-ink:      #e0c073;

  --ok-bg:         #14302a;
  --ok-border:     #235145;
  --ok-ink:        #6fd3b6;

  --danger-bg:     #33201d;
  --danger-border: #5c3730;
  --danger-ink:    #f0a79b;

  --demo-bg:       #241f38;
  --demo-border:   #3d3460;
  --demo-ink:      #b9a8f0;

  --neutral-bg:    #1e2726;
  --neutral-border:#313d3b;

  --shadow: 0 1px 2px rgba(0, 0, 0, .4),
            0 4px 16px -8px rgba(0, 0, 0, .6);

  color-scheme: dark;
}

/* ── 基础 ─────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  /* body 必须显式给背景：浏览器会把页面合成到宿主自己的底色上，
     透明背景会露出不属于本页的颜色 */
  background: var(--bg);
  color: var(--ink);
  font: var(--step-0) / 1.7 var(--font-sans);
  /* 侧边留白在这里给一次，组件里不要再加左右 padding */
  padding: 0 var(--gutter);
  /* 中文没有西文的词间距，靠 text-wrap 与行高处理断行更稳 */
  text-wrap: pretty;
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

h1, h2, h3 { line-height: 1.25; text-wrap: balance; margin: 0; }

code {
  font: 0.9em / 1.5 var(--font-mono);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .1em .4em;
  overflow-wrap: anywhere;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 10;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── 页头 ─────────────────────────────────────────────────── */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 62px;
  flex-wrap: wrap;
  padding-block: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  font-size: var(--step-1);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.01em;
  margin-right: auto;
}

.brand-mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  /* 内圈留白做出「同心」的意象——取卵/胚胎的视觉隐喻，克制到只是一个点 */
  box-shadow: inset 0 0 0 3px var(--surface);
  outline: 1px solid var(--accent);
  flex: none;
}

.site-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--ink-muted);
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
}
.site-nav a:hover { background: var(--surface-alt); color: var(--ink); }

/* 当前所在栏目。用底色 + 加粗，不用下划线——下划线在这个尺寸上会糊成一团 */
.site-nav a.is-current {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* ── 面包屑 ───────────────────────────────────────────────── */

.breadcrumb {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  margin: 0;
  padding: 9px 0;
  list-style: none;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* 分隔符用 ::before 而不是写进 HTML——它是装饰，
   屏幕阅读器不该把它读成内容的一部分 */
.breadcrumb li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--ink-faint);
}

.breadcrumb a {
  color: var(--ink-muted);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }

/* 最后一项是「你正在这里」，不是链接 */
.breadcrumb li[aria-current="page"] { color: var(--ink); }

.lang-switch {
  display: flex;
  gap: 2px;
  align-items: center;
  font-size: var(--step--1);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.lang-switch a,
.lang-switch .lang-current {
  padding: 3px 10px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink-muted);
  white-space: nowrap;
}
.lang-switch .lang-current {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* ── 页头搜索框（P1-12）───────────────────────────────────── */

.header-search {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* label 只给读屏软件：这个尺寸上「放大镜+输入框」的形状已经说明用途 */
.header-search-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.header-search-input {
  width: 170px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
}
.header-search-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.header-search-btn {
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
}
.header-search-btn:hover { background: var(--surface-alt); }

/* ── 通用块 ───────────────────────────────────────────────── */

.section { padding-block: 56px; }
.section-alt { background: var(--surface); border-block: 1px solid var(--border); }

.section-title {
  font-size: var(--step-3);
  letter-spacing: -.015em;
  margin-bottom: 8px;
}

.section-sub {
  color: var(--ink-muted);
  max-width: 62ch;
  margin: 0 0 28px;
}

.note {
  margin-top: 24px;
  padding: 14px 18px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  color: var(--ink-muted);
  max-width: 78ch;
}

/* ── 首屏 ─────────────────────────────────────────────────── */

.hero {
  padding-block: 72px 56px;
  background:
    radial-gradient(120% 90% at 12% 0%, var(--accent-soft) 0%, transparent 58%);
}

.eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--accent);
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, var(--step-5));
  letter-spacing: -.025em;
  max-width: 22ch;
}

.lede {
  margin: 20px 0 0;
  font-size: var(--step-1);
  color: var(--ink-muted);
  max-width: 62ch;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--step-0);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s, border-color .15s;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }

.btn-ghost {
  border-color: var(--border-strong);
  color: var(--ink);
  background: var(--surface);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ── 栅格与卡片 ───────────────────────────────────────────── */

.grid { display: grid; gap: 18px; }

/* auto-fit + minmax：列数由容器宽度自己决定，
   比写死三档媒体查询更不容易在中间宽度上留出空列 */
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.card h3 { font-size: var(--step-1); margin-bottom: 4px; }

.card-meta {
  margin: 0 0 12px;
  font-size: var(--step--1);
  color: var(--ink-faint);
  letter-spacing: .02em;
}

.card p:last-child { margin-bottom: 0; color: var(--ink-muted); }

.tile {
  display: block;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background-color .15s;
}
/* 悬停效果只给链接。
   入口还没建好时这里渲染的是 div.tile（见 helpers.php 的 link_tags），
   它不该亮起来——看起来能点、点了没反应，比明摆着不能点更让人恼火。 */
a.tile:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.tile h3 {
  font-size: var(--step-1);
  margin-bottom: 8px;
  color: var(--accent);
}
.tile p { margin: 0; color: var(--ink-muted); font-size: var(--step--1); }

.fact { padding-top: 18px; border-top: 2px solid var(--accent); }
.fact-num {
  display: block;
  font: 600 var(--step--1) / 1 var(--font-mono);
  color: var(--accent);
  letter-spacing: .1em;
  margin-bottom: 10px;
}
.fact h3 { font-size: var(--step-1); margin-bottom: 8px; }
.fact p { margin: 0; color: var(--ink-muted); font-size: var(--step--1); }

/* ── 错误页 ───────────────────────────────────────────────── */

.error-page { padding-block: 88px; }

.error-code {
  margin: 0 0 6px;
  font: 600 var(--step-4) / 1 var(--font-mono);
  color: var(--accent);
  letter-spacing: -.02em;
}

.error-page h1 { font-size: var(--step-3); }

.error-path {
  color: var(--ink-faint);
  font-size: var(--step--1);
  margin-top: 14px;
}

.debug-box {
  margin-top: 28px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  overflow-x: auto;
}
.debug-tag {
  margin: 0 0 10px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-muted);
}
.debug-where { margin: 0 0 10px; font-size: var(--step--1); }
.debug-box pre {
  margin: 0;
  font: 0.85rem / 1.6 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.debug-trace { margin-top: 10px; color: var(--ink-muted); font-size: .78rem; }

/* ── 页脚 ─────────────────────────────────────────────────── */

.site-footer {
  margin-top: 40px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-block: 40px 28px;
}

.footer-inner {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-brand p {
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: var(--step--1);
  max-width: 34ch;
}

.footer-links {
  display: flex;
  gap: 8px 18px;
  flex-wrap: wrap;
  align-content: flex-start;
  font-size: var(--step--1);
}

.footer-legal {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--ink-faint);
  font-size: 0.8125rem;
}
.footer-legal p { margin: 4px 0; max-width: 78ch; }

/* ── 数据展示组件（§9.3 / §9.4）─────────────────────────────
   这一组样式不只是「让它好看」。§9.3 的核心是「把核验展示出来」，
   而**展示的说服力来自一致性**：每一条数据的徽标、来源、年份都在
   同一个位置、同一种排布，读者扫过三行就知道该看哪儿。
   如果每条数据的来源链接位置都不一样，读者就不会去看了。
   ───────────────────────────────────────────────────────────── */

/* 徽标：核验状态 / 示例标记 */
.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--neutral-border);
  background: var(--neutral-bg);
  color: var(--ink-muted);
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: .02em;
  white-space: nowrap;
  vertical-align: middle;
}
.badge.is-verified { background: var(--ok-bg);      border-color: var(--ok-border);      color: var(--ok-ink); }
.badge.is-doubtful { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-ink); }
.badge.is-expired  { background: var(--neutral-bg); border-color: var(--neutral-border); color: var(--ink-faint); }
.badge.is-pending  { background: var(--warn-bg);    border-color: var(--warn-border);    color: var(--warn-ink); }
/* is-unknown 刻意长得和 is-pending 不一样，但都不是 is-verified。
   状态取值异常时读者必须一眼看出「这里没结论」。 */
.badge.is-unknown  { background: transparent; border-style: dashed; border-color: var(--border-strong); color: var(--ink-faint); }
.badge.is-demo     { background: var(--demo-bg); border-color: var(--demo-border); color: var(--demo-ink); font-weight: 600; }
.badge-date { margin-left: 5px; opacity: .75; font-variant-numeric: tabular-nums; }

/* 新鲜度 */
.freshness { font-size: 0.8125rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.freshness-year { display: block; color: var(--ink); }
.freshness-age  { display: block; color: var(--ink-faint); }
.freshness.is-stale .freshness-age { color: var(--warn-ink); }
.freshness.is-warn  .freshness-age { color: var(--danger-ink); }
.freshness.is-unknown .freshness-year,
.freshness.is-unknown .freshness-age { color: var(--ink-faint); font-style: italic; }
.freshness-note { margin: 8px 0 0; font-size: var(--step--1); color: var(--ink-muted); max-width: 78ch; }

/* 来源行 */
.source-line { font-size: 0.8125rem; line-height: 1.6; }
.source-line p { margin: 0 0 3px; }
.source-line p:last-child { margin-bottom: 0; }
.source-label {
  display: inline-block;
  margin-right: 4px;
  color: var(--ink-faint);
  font-size: 0.75rem;
  letter-spacing: .04em;
}
.source-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.source-link:hover { color: var(--accent-hover); }
.source-out { font-size: 0.75em; opacity: .7; }
.source-registry { display: block; color: var(--ink-faint); font-size: 0.75rem; }
/* 缺来源链接不是正常空状态，是数据事故——要显眼 */
.source-missing { color: var(--danger-ink); font-size: 0.75rem; }
.source-note { color: var(--ink-muted); }
.source-derive { color: var(--ink-muted); }

/* 成功率表 */
.success-tables { display: grid; gap: 28px; margin-block: 24px; }

/* 一张表一个口径（§9.4 原则 1）。宽表只在自己这里横向滚动，
   页面主体永远不横向滚动。 */
.success-group { min-width: 0; overflow-x: auto; }

.success-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: var(--step--1);
}
.success-table caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 10px;
  color: var(--ink);
}
.cap-metric { display: block; font-size: var(--step-1); font-weight: 600; }
.cap-cycle  { display: block; color: var(--ink-muted); font-size: var(--step--1); }
/* 口径的原始取值也露出来：中文标签是我们翻译的，code 才是数据本身。
   出了分歧时，能对质的是 code。 */
.cap-code   { display: block; color: var(--ink-faint); font-size: 0.75rem; font-family: var(--font-mono); }

.success-table th,
.success-table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.success-table thead th {
  background: var(--surface-alt);
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .05em;
  white-space: nowrap;
}
.success-table tbody tr:last-child td { border-bottom: 0; }
.success-table tbody tr.is-incomplete { background: var(--surface-alt); }
/* 示例行整行加一层底色。徽标已经标了，但底色让**扫读**也能看出来——
   验收截图时人会看数字，不会逐行读徽标。 */
.success-table tbody tr.is-demo-row { background: var(--demo-bg); }

.cell-value .value-main {
  display: block;
  font-size: var(--step-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cell-value .value-ci { display: block; color: var(--ink-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.cell-value .value-ci.is-missing { color: var(--ink-faint); font-style: italic; }
.cell-value .value-flag { display: block; margin-top: 4px; color: var(--danger-ink); font-size: 0.75rem; }
.cell-value .badge { margin-top: 5px; }

.cell-age { white-space: nowrap; }
.cell-raw-age { display: block; margin-top: 2px; color: var(--ink-faint); font-size: 0.75rem; }
.cell-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-fresh, .cell-verify { white-space: nowrap; }
.cell-source { min-width: 190px; }
.muted { color: var(--ink-faint); }

/* 空状态。**这是功能，不是兜底**：§9.3 的核心是「我们宁可空着
   也不放没核验过的数字」，那么把这句话说出来就是最有力的展示。 */
.data-empty {
  margin-block: 24px;
  padding: 26px 24px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 78ch;
}
.data-empty-title { margin: 0 0 8px; font-size: var(--step-1); font-weight: 600; }
.data-empty-body  { margin: 0; color: var(--ink-muted); font-size: var(--step--1); }
.data-empty-hint  { margin: 10px 0 0; color: var(--ink-faint); font-size: var(--step--1); }

/* 数据缺口警告。用 role="alert" 的同时也给它视觉重量——
   口径没录是**事故**，不是提示。 */
.data-warning {
  margin-block: 24px;
  padding: 18px 20px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  max-width: 78ch;
}
.data-warning-title { margin: 0 0 6px; font-weight: 600; color: var(--warn-ink); }
.data-warning-body  { margin: 0; color: var(--ink-muted); font-size: var(--step--1); }
.data-warning code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface); padding: 1px 5px; border-radius: 4px; }

.success-footnote {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--step--1);
  max-width: 78ch;
}

.demo-notice {
  margin-block: 20px;
  padding: 14px 18px;
  background: var(--demo-bg);
  border: 1px solid var(--demo-border);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: var(--step--1);
  max-width: 78ch;
}
.demo-notice strong { color: var(--demo-ink); }

/* 「关于本文」（§6.4）。E-E-A-T 最直接的抓手，所以给它独立的视觉份量：
   一块有上边框的、和正文分得开的区域，而不是页脚里的一行小字。 */
.about-this-page {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 2px solid var(--border);
  max-width: 78ch;
}
.atp-title { margin: 0 0 14px; font-size: var(--step-1); }
.atp-meta { margin: 0; display: grid; gap: 6px; }
.atp-row { display: flex; gap: 10px; font-size: var(--step--1); }
.atp-row dt { flex: 0 0 5.5em; color: var(--ink-faint); }
.atp-row dd { margin: 0; color: var(--ink); }
.atp-date { margin-left: 8px; color: var(--ink-faint); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
/* 缺字段如实说，不留白——留白会让页面看起来是完整的 */
.atp-missing { color: var(--warn-ink); font-style: italic; }
.atp-sub { margin: 20px 0 8px; font-size: var(--step-0); color: var(--ink-muted); }
.atp-sources ul { margin: 0; padding-left: 1.2em; font-size: var(--step--1); }
.atp-sources li { margin-bottom: 4px; }
.atp-sources a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.atp-disclaimer p { margin: 0; color: var(--ink-muted); font-size: var(--step--1); }

/* ── 诊所目录（P1-4）───────────────────────────────────────
   这一块的颜色全部走上面那组「数据状态」令牌，一个色值都不写死：
   暗色模式下 --neutral-bg 之类的值会整体翻转，而写死的浅灰
   在暗底上是一块刺眼的白斑——这种错只有在暗色模式下才看得见，
   所以不能靠肉眼在亮色模式下检查。 */

/* 页头。目录页的标题和导语是这一页最该被读的两句，
   所以给它们独立的节奏，不和下面的筛选栏挤在一起。 */
.page-head { margin-bottom: 24px; }
.page-title { margin: 0 0 10px; font-size: var(--step-3); text-wrap: balance; }
.page-lede {
  margin: 0;
  max-width: 68ch;
  color: var(--ink-muted);
  font-size: var(--step-0);
  line-height: 1.7;
}

/* ── 筛选栏 ─────────────────────────────────────────────────
   每一行是「标签 + 一串可换行的 chip」。用链接不用下拉框，
   理由见 partial/filter-bar.php 的注释（爬虫抓不到、无 JS 不可用、
   不能右键新开）。 */
.filter-bar {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.filter-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.filter-label {
  flex: 0 0 auto;
  min-width: 4.5em;
  color: var(--ink-faint);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: var(--step--1);
  text-decoration: none;
  white-space: nowrap;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
/* 当前生效的筛选用实心，不用下划线——一列 chip 里下划线几乎看不见 */
.chip.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.chip-count {
  color: var(--ink-faint);
  font-size: 0.75em;
  font-variant-numeric: tabular-nums;
}
.chip.is-active .chip-count { color: var(--accent-ink); opacity: 0.75; }
.filter-clear { margin: 0; font-size: var(--step--1); }
.filter-clear a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* 「显示第 X–Y 家，共 N 家」 */
.list-meta {
  margin: 0 0 14px;
  color: var(--ink-faint);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.list-meta strong { color: var(--ink); }
.list-meta-page { margin-left: 10px; }

/* ── 诊所卡片 ───────────────────────────────────────────────
   网格列数交给 auto-fill + minmax：卡片自己决定一行放几张，
   窄屏自然变成一列，不需要在媒体查询里再写一遍。 */
.clinic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.clinic-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
/* 示例行整张卡片换个底。徽标在卡片里，但整张卡看起来一样的话，
   截图里那条示例数据还是会被当成真数据——所以底色也要变。 */
.clinic-card.is-demo-row { background: var(--demo-bg); border-color: var(--demo-border); }

.cc-name {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.cc-name a { color: var(--ink); text-decoration: none; }
.cc-name a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cc-place { margin: 0; color: var(--ink-muted); font-size: var(--step--1); }
.cc-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.cc-facts { margin: auto 0 0; display: grid; gap: 8px; }
.cc-fact { display: flex; gap: 10px; align-items: baseline; font-size: var(--step--1); }
.cc-fact dt { flex: 0 0 5.5em; color: var(--ink-faint); }
.cc-fact dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }

/* 数据完整度。**它不是医疗质量评分**，所以刻意做成一条细进度条 +
   一个分数，而不是星级或大号数字——那两种形式读者会自动读成评价。
   完整的说明在 title 里（见 partial/clinic-card.php）。 */
.cc-score { display: inline-flex; align-items: center; gap: 8px; }
.cc-score-bar {
  display: inline-block;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--neutral-bg);
  overflow: hidden;
}
.cc-score-bar > span { display: block; height: 100%; background: var(--accent); }
.cc-score-num { font-variant-numeric: tabular-nums; color: var(--ink-muted); }

.cc-data-count { font-variant-numeric: tabular-nums; }
.cc-data-year { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.cc-langs { gap: 4px 8px; }
.cc-lang {
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 0.75rem;
}

/* ── 空状态 ─────────────────────────────────────────────────
   三种空状态共用这一个外观，但它们说的是三句不同的话
   （见 app/View/clinic/index.php 顶部的表）。样式一样是对的：
   它们是同一种东西——一句解释加一条出路。 */
.data-empty {
  padding: 32px 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.data-empty-title { margin: 0 0 10px; font-size: var(--step-1); color: var(--ink); }
.data-empty-body {
  margin: 0 auto 8px;
  max-width: 60ch;
  color: var(--ink-muted);
  font-size: var(--step-0);
  line-height: 1.7;
}
.data-empty-hint {
  margin: 0 auto;
  max-width: 60ch;
  color: var(--ink-faint);
  font-size: var(--step--1);
  line-height: 1.7;
}
.data-empty-body a, .data-empty-hint a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.data-empty-hint .btn { margin: 4px 4px 0; }

/* ── 分页 ───────────────────────────────────────────────────
   上一页/下一页在两端渲染成不可点的占位而不是省略掉，
   这样翻页时按钮位置不会整体跳动（见 partial/pagination.php）。 */
.pagination { margin-top: 28px; }
.pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination a, .pagination span {
  display: inline-block;
  min-width: 2.25em;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--step--1);
  text-align: center;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .is-current {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
/* 不可点的占位：压低对比度，但不隐藏——它占的位置就是它的作用 */
.pagination .is-disabled { color: var(--ink-faint); border-color: transparent; }
.pagination .page-gap { border-color: transparent; min-width: 1.5em; }

/* 全站示例数据横幅。`role="alert"`，放在 <header> 之前——
   它是这一页最该先被看到的一句话。 */
.demo-banner {
  padding: 10px var(--gutter);
  background: var(--demo-bg);
  border-bottom: 1px solid var(--demo-border);
  color: var(--demo-ink);
  font-size: var(--step--1);
  text-align: center;
}
.demo-banner strong { font-weight: 700; }

/* ── 诊所详情（P1-5）────────────────────────────────────────
   这一页的结构是「结论 → 证据 → 出处」：成功率表在最前，资质、
   医生、所在地依次跟上，署名区块收尾。样式只负责让这个顺序读起来
   顺，不负责让哪一块显得更重要——**这里没有一处「强调」是给
   商业信息的**。合作标记（.is-promo）用的是和其他徽标一样大的
   字号，不给它单独的视觉权重。
   ───────────────────────────────────────────────────────────── */

/* label: value 列表。
   这是全站第三处同样的排布（另两处是 .atp-row 与 .cc-fact），
   各自服务一个组件。合并要动已经验收过的页面，所以先记在这里：
   P1 结束后应当收敛成一套，否则改一次间距要改三个地方。 */
.kv-list { margin: 0; display: grid; gap: 6px; }
.kv-row { display: flex; gap: 10px; font-size: var(--step--1); }
.kv-row dt { flex: 0 0 6em; color: var(--ink-faint); }
.kv-row dd { margin: 0; color: var(--ink); min-width: 0; }

.clinic-hero { margin-bottom: 40px; }
.ch-name-en {
  display: block;
  margin-top: 4px;
  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-muted);
}
.ch-place { margin: 0 0 12px; color: var(--ink-muted); }
.ch-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ch-content { margin: 0 0 20px; max-width: 72ch; color: var(--ink-muted); }
.ch-facts { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
/* 语言小标签复用诊所卡片的 .cc-lang——同一件东西，两处各写一遍
   迟早会长得不一样 */
.ch-langs { display: flex; flex-wrap: wrap; gap: 4px 8px; }

.clinic-block { margin-top: 48px; }

/* 资质 */
.cert-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.cert-item {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.cert-head { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.cert-name { font-weight: 600; }
.cert-no { font-family: var(--font-mono); font-size: 0.8125rem; word-break: break-all; }

/* 医生 */
.doctor-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.doctor-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
/* 示例医生整张卡换底色：徽标在卡片里，但整张卡看起来一样的话，
   截图里那条示例数据还是会被当成真数据 */
.doctor-card.is-demo-row { background: var(--demo-bg); border-color: var(--demo-border); }
.doc-name {
  margin: 0;
  font-size: var(--step-1);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.doc-name a { color: var(--ink); text-decoration: none; }
.doc-name a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.doc-title { margin: 0; color: var(--ink-muted); font-size: var(--step--1); }
.doc-license { font-family: var(--font-mono); font-size: 0.8125rem; word-break: break-all; }
.doc-intro { margin: 0; color: var(--ink-muted); font-size: var(--step--1); }

/* 所在地 */
.country-box {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
}
.country-legality { margin: 0 0 12px; max-width: 78ch; }
.country-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: var(--step--1);
  color: var(--ink-faint);
}
.country-meta a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.country-note {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: var(--step--1);
  color: var(--ink-muted);
  max-width: 78ch;
}

/* ── 医生库与医生详情（P1-6）────────────────────────────────
   医生卡片本身复用诊所详情页里那套（.doctor-grid / .doctor-card /
   .doc-*）——同一件东西不该有第二份样式。这里只补列表页新出现的
   两处（所属机构、缺失值）和详情页自己的排布。
   ───────────────────────────────────────────────────────────── */

/* 所属机构：卡片上最需要被核对的一行。
   给的是正常文字色而不是灰色——它不是一个次要的元信息，
   它是「这位医生的资质去哪核对」的落点。 */
.doc-clinic { margin: 0; font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.doc-clinic a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.doc-clinic-missing { color: var(--warn-ink); }
.doc-place { color: var(--ink-faint); }

/* 未录入的字段。
   用虚线边框而不是浅灰文字：浅灰会被读成「有值但次要」，
   而这几个字要表达的是「这里本来该有个值，我们还没有」。 */
.doc-missing, .dh-missing {
  color: var(--ink-faint);
  border-bottom: 1px dashed var(--border-strong);
  font-style: normal;
}

.doctor-hero { margin-bottom: 40px; }
.dh-title { margin: 0 0 6px; color: var(--ink-muted); font-size: var(--step-1); }
.dh-place { margin: 0 0 12px; color: var(--ink-muted); }
.dh-content { margin: 0 0 20px; max-width: 72ch; color: var(--ink-muted); }
.dh-facts { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.dh-clinic { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.dh-clinic a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.dh-clinic-place { color: var(--ink-faint); }
.dh-clinic-country { font-size: var(--step--1); }
/* 执业编号用等宽：它是要被逐字抄去监管机构网站核对的，
   比例字体里 0/O、1/l 分不清 */
.dh-license { font-family: var(--font-mono); font-size: 0.8125rem; word-break: break-all; }

/* 核验范围说明。
   正文样式而不是脚注样式——它是这一页最容易被误读的地方
   （把「机构核验过」读成「医术被背书过」），所以不能做成小字。 */
.verify-scope {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-alt);
}
.verify-scope-lead { margin: 0 0 14px; max-width: 78ch; }
.verify-scope-list { margin: 0; display: grid; gap: 12px; }
/* 这一处的标签列比 .kv-row 默认的 6em 宽——「没录入的字段」是六个字，
   6em 会把它挤成两行。 */
.verify-scope-list .kv-row dt { flex: 0 0 7em; color: var(--ink-faint); }
.verify-scope-list .kv-row dd { max-width: 72ch; color: var(--ink-muted); }

/* ── 国家页（P1-7）──────────────────────────────────────────
   列表卡片是新的（.country-card）；详情页大量复用既有组件——
   法律区块用诊所详情页的 .country-box，成功区块整段交给
   success-table，机构名单是简单的行式列表。
   ───────────────────────────────────────────────────────────── */

.country-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.country-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.country-card.is-demo-row { background: var(--demo-bg); border-color: var(--demo-border); }
.cty-name {
  margin: 0;
  font-size: var(--step-1);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.cty-name a { color: var(--ink); text-decoration: none; }
.cty-name a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cty-region { margin: 0; color: var(--ink-muted); font-size: var(--step--1); }

/* 列表卡片上的事实行。与 .cc-fact 同一排布，但国家卡片只有两行，
   不需要那套 dt/dd 栅格——两行直接排，间距对齐 .cc-fact 的视觉节奏。 */
.cty-facts { margin: auto 0 0; display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.cty-fact { display: flex; gap: 10px; font-size: var(--step--1); }
.cty-fact dt { flex: 0 0 8em; color: var(--ink-faint); }
.cty-fact dd { margin: 0; min-width: 0; }
/* 「未标注更新日期」是缺口的显形，不是次要信息——
   与 .doc-missing 同一条规矩：虚线，不是浅灰。 */
.cty-missing { color: var(--ink-faint); border-bottom: 1px dashed var(--border-strong); }

.country-hero { margin-bottom: 40px; }
.country-lawnote {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--border-strong);
  font-size: var(--step--1);
  color: var(--ink-muted);
  max-width: 78ch;
}

/* 费用区间。数字要能被逐位读，等宽；区间性质说明在 .country-note 里，
   与数字同一区块——拆开性质说明就管不住数字了。 */
.cty-cost { margin-bottom: 0; }
.cty-cost .kv-row dt { flex: 0 0 6em; }
.cty-cost-num { font-family: var(--font-mono); font-size: 1rem; }

/* 该国收录机构：行式列表，不是卡片栅格——这一段的任务是「列出 +
   链接过去」，机构详情在各自页面上，卡片栅格会让国家页喧宾夺主。 */
.cty-clinic-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.cty-clinic {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--border);
}
.cty-clinic:last-child { border-bottom: 0; }
.cty-clinic.is-demo-row { background: var(--demo-bg); }
.cty-clinic-name { font-weight: 600; }
.cty-clinic-name a { color: var(--ink); text-decoration: none; }
.cty-clinic-name a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cty-clinic-city { color: var(--ink-muted); font-size: var(--step--1); }
.cty-clinic-data { margin-left: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: var(--step--1); }

/* ── 服务页（P1-8）──────────────────────────────────────────
   列表卡片直接复用国家页的 .country-card / .cty-*（同为参照数据的
   行式卡片）；这里只补服务页自己的部件：Hero 事实行、待整理段、
   CTA 条、法律对比表、风险六类、相关服务。
   组件段零字面色值，全部走变量（暗色模式依赖这一点）。
   ───────────────────────────────────────────────────────────── */

/* Hero 的事实行。与 .cty-fact 同一排布，但 Hero 上没有卡片边框，
   不需要顶部那条分隔线。 */
.svc-facts { margin: 14px 0 0; display: grid; gap: 6px; max-width: 60ch; }
.svc-facts .cty-fact dt { flex: 0 0 6em; }
.svc-hero-cta { margin: 18px 0 0; }

/* 待整理的段落。虚线左边线与 .cty-missing 的「缺口显形」是同一种
   视觉语言：这不是装饰性的灰字，是一个明说的空缺。 */
.svc-todo {
  margin: 0;
  max-width: 78ch;
  padding: 10px 14px;
  border-left: 3px dashed var(--border-strong);
  color: var(--ink-muted);
  font-size: var(--step--1);
}
.svc-todo strong { color: var(--ink); }

/* CTA 条。咨询通道上线前的 CTA 全部指向站内自助内容。 */
.svc-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
}
.svc-cta-note { margin: 0; color: var(--ink-muted); font-size: var(--step--1); }

/* 关键数据块复用 .kv-list，这里只调 dt 列宽（六字标签）。 */
.svc-data-list { max-width: 60ch; }
.svc-data-list .kv-row dt { flex: 0 0 8em; }

/* 目的地法律对比表。极简表格：行分隔线 + 表头弱化，
   数字列等宽字体与 .cty-cost-num 同一规则。 */
.svc-table-wrap { overflow-x: auto; }
.svc-table {
  width: 100%;
  max-width: 60ch;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.svc-table th, .svc-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.svc-table th { color: var(--ink-faint); font-weight: 600; }
.svc-table td:nth-child(2) { font-family: var(--font-mono); }

/* 风险评估六类。左边线呼应 .country-lawnote 的「说明性内容」视觉，
   这里用实线——它是这一页的正内容，不是缺口。 */
.svc-risk-list { display: grid; gap: 18px; margin: 18px 0 0; }
.svc-risk { border-left: 3px solid var(--border-strong); padding-left: 14px; }
.svc-risk-title { margin: 0 0 4px; font-size: var(--step-0); }
.svc-risk-body { margin: 0; max-width: 78ch; color: var(--ink-muted); }
.svc-risk-body strong { color: var(--ink); }

/* 本站数据局限性。 */
.svc-limit-title { margin: 28px 0 10px; font-size: var(--step-0); }
.svc-limit-list { margin: 0; padding-left: 1.4em; max-width: 78ch; color: var(--ink-muted); display: grid; gap: 6px; }
.svc-limit-list strong { color: var(--ink); }

/* 相关服务：行内链接列表。 */
.svc-related-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.svc-related-list a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── 科普文章（/guide/）────────────────────────────────────── */

/* 枢纽页的栏目列表。 */
.guide-cat-list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.guide-cat {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--surface);
}
.guide-cat-name { margin: 0; font-size: var(--step-1); }
.guide-cat-name a { color: var(--ink); text-decoration: none; }
.guide-cat-name a:hover, .guide-cat-name a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.guide-cat-intro { margin: 8px 0 0; max-width: 70ch; color: var(--ink-muted); }
.guide-cat-count { margin: 10px 0 0; font-size: var(--step-0); color: var(--ink-muted); }

/* 文章卡片。 */
.article-card {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--surface);
}
.article-card-title { margin: 0; font-size: var(--step-1); line-height: 1.4; }
.article-card-title a { color: var(--ink); text-decoration: none; }
.article-card-title a:hover, .article-card-title a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-card-title .chip { margin-left: 8px; font-size: 0.75rem; vertical-align: middle; }
.article-card-desc { margin: 8px 0 0; max-width: 74ch; color: var(--ink-muted); }
.article-card-meta { margin: 10px 0 0; font-size: var(--step-0); color: var(--ink-muted); }

/* 文章详情页。 */
.article-body { max-width: 78ch; }
.article-meta { margin: 10px 0 0; color: var(--ink-muted); font-size: var(--step-0); }
.article-meta a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-meta-sep { margin: 0 6px; }
.article-content { margin-top: 28px; line-height: 1.85; }
.article-content p { margin: 0 0 1em; }

/* ── FAQ（/faq/）───────────────────────────────────────────── */

/* 栏目锚点导航。 */
.faq-toc { margin: 20px 0 0; padding: 14px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt, var(--surface)); }
.faq-toc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.faq-toc a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* 栏目块与问答条目。类名是 P3 结构化数据字段映射的锚点：
   .faq-q → name，.faq-a → acceptedAnswer.text，不要改名。 */
.faq-cat { margin-top: 36px; }
.faq-cat-title { margin: 0 0 6px; font-size: var(--step-1); }
.faq-item { padding: 16px 0; border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-q { margin: 0; font-size: var(--step-0); line-height: 1.5; }
.faq-a { margin-top: 8px; max-width: 74ch; color: var(--ink-muted); line-height: 1.8; }
.faq-a strong { color: var(--ink); }

/* ── 数据看板（P1-11）：/data/ 枢纽、成功率看板、费用看板 ────── */
.data-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.data-nav-card {
  display: block;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}
.data-nav-card:hover { border-color: var(--accent); }
.data-nav-title { display: block; font-size: var(--step-1); margin-bottom: 8px; }
.data-nav-body { display: block; color: var(--ink-muted); line-height: 1.8; max-width: 44ch; }
.data-nav-body strong { color: var(--ink); }

.data-standard { margin-top: 40px; }
.data-standard-title { margin: 0 0 6px; font-size: var(--step-1); }
.data-standard-lede { margin: 0 0 16px; color: var(--ink-muted); }
.data-standard-list { margin: 0; max-width: 74ch; }
.data-standard-list dt { font-weight: 600; margin-top: 16px; }
.data-standard-list dd { margin: 4px 0 0; color: var(--ink-muted); line-height: 1.8; }

/* 成功率看板的国家筛选条 */
.data-country-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 20px;
}
.data-country-label { color: var(--ink-muted); }
.data-country-link {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
}
.data-country-link.is-active { background: var(--ink); color: var(--surface); }
.data-country-link:hover { border-color: var(--ink); }
.data-footnote { color: var(--ink-muted); margin-top: 12px; }

/* 费用看板 */
.cost-section { margin-top: 36px; }
.cost-section-title { margin: 0 0 6px; font-size: var(--step-1); }
.cost-section-note { margin: 0 0 14px; color: var(--ink-muted); max-width: 74ch; }
.table-scroll { overflow-x: auto; }
.cost-table { width: 100%; border-collapse: collapse; }
.cost-table th, .cost-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.cost-table th { color: var(--ink-muted); font-weight: 600; white-space: nowrap; }
.cost-table .cell-cost { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cost-table .cell-currency { color: var(--ink-muted); }

/* compare 模式下的推导值标记（detail 模式的推导说明在来源格里） */
.value-derive {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--ink-muted);
  cursor: help;
}

/* 诊所对比：已选托盘与加入列表 */
.compare-tray { margin: 24px 0 12px; }
.compare-tray-title { margin: 0 0 10px; font-size: var(--step-0); }
.compare-tray-empty { color: var(--ink-muted); max-width: 74ch; }
.compare-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.compare-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.compare-chip-name { font-weight: 600; }
.compare-chip-note { color: var(--ink-muted); }
.compare-chip-remove { margin-left: auto; text-decoration: underline; }
.compare-add { margin: 28px 0; }
.compare-add-title { margin: 0 0 10px; font-size: var(--step-0); }
.compare-add-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.compare-add-item { display: flex; align-items: baseline; gap: 12px; }
.compare-add-btn { text-decoration: underline; white-space: nowrap; }
.compare-add-full, .compare-add-empty { color: var(--ink-muted); }

/* ── 站内搜索（P1-12）：/search ───────────────────────────── */

.search-form {
  display: flex;
  gap: 8px;
  max-width: 560px;
  margin-block: 8px 4px;
}
.search-form-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.search-form-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}
.search-form-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.search-form-btn {
  padding: 10px 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.search-form-btn:hover { background: var(--surface-alt); }
.search-form-hint { margin: 4px 0 0; color: var(--ink-faint); font-size: var(--step--1); }

/* 落地态：能搜什么 */
.search-scope {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.search-scope-title { margin: 0 0 10px; font-size: var(--step-1); }
.search-scope-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.search-scope-list li { color: var(--ink-muted); font-size: var(--step--1); }
.search-scope-note { margin: 10px 0 0; color: var(--ink-faint); font-size: var(--step--1); }

/* 结果分组 */
.search-section { margin-top: 32px; }
.search-section-title {
  margin: 0 0 10px;
  font-size: var(--step-1);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.search-list { margin: 0; padding: 0; list-style: none; }
.search-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.search-item-link { color: var(--accent); text-decoration: none; font-weight: 500; }
.search-item-link:hover { text-decoration: underline; }
.search-item-sub { color: var(--ink-faint); font-size: var(--step--1); white-space: nowrap; }
.search-more { margin: 10px 0 0; color: var(--ink-faint); font-size: var(--step--1); }

/* 无结果的下一步出口 */
.data-empty-links { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 6px; }

/* ── 静态页四件套（P1-13）：/about/ /contact/ /privacy/ /disclaimer/ ── */

/* page-head 是通用样式（826 行起）；这里只补 .page-prose——静态页的
   正文没有卡片壳，直接是裸的 h2/p/ul/ol，需要自己撑起节奏。 */
.page-prose { max-width: 78ch; margin-top: 8px; }
.page-prose h2 {
  margin: 36px 0 12px;
  font-size: var(--step-2);
  text-wrap: balance;
}
.page-prose h2:first-child { margin-top: 0; }
.page-prose p { margin: 0 0 1em; line-height: 1.85; }
.page-prose ul,
.page-prose ol { margin: 0 0 1em; padding-left: 24px; line-height: 1.85; }
.page-prose li { margin: 0 0 6px; }
.page-prose li strong { color: var(--ink); }
.page-prose code {
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  font-size: 0.9em;
}

/* ── 窄屏 ─────────────────────────────────────────────────── */

@media (max-width: 720px) {
  :root { --gutter: 16px; }

  /* 表格横向滚动，页面主体不滚 */
  .success-table { min-width: 520px; font-size: 0.8125rem; }
  .success-table th, .success-table td { padding: 9px 10px; }
  .cell-source { min-width: 150px; }

  .atp-row { flex-direction: column; gap: 0; }
  .atp-row dt { flex: none; }

  /* 筛选栏：标签独占一行。挤在一行时「国家/地区」会被压成竖排，
     而 chip 又都是 nowrap，结果是一行里塞不下任何东西。 */
  .filter-row { flex-direction: column; gap: 6px; }
  .filter-label { min-width: 0; }
  .filter-bar { padding: 14px; }

  /* 卡片事实改成上下两行：5.5em 的标签列在 320px 上占掉三分之一 */
  .cc-fact { flex-direction: column; gap: 2px; }
  .cc-fact dt { flex: none; }

  /* 详情页的 label:value 同理 */
  .kv-row { flex-direction: column; gap: 2px; }
  .kv-row dt { flex: none; }

  .clinic-block { margin-top: 36px; }
  .clinic-hero { margin-bottom: 28px; }
  .doctor-hero { margin-bottom: 28px; }
  .verify-scope { padding: 14px; }

  /* 分页在窄屏上只留首末页和当前页附近的数字，省略号靠窗口逻辑
     已经控制住了；这里只是让每个按钮小一点，别撑出横向滚动 */
  .pagination a, .pagination span { min-width: 2em; padding: 6px 8px; }

  .hero { padding-block: 48px 40px; }
  .section { padding-block: 40px; }

  .header-inner { gap: 10px; }
  .site-nav { order: 3; width: 100%; }
  .brand { margin-right: 0; }
  .header-search { order: 4; width: 100%; }
  .header-search-input { flex: 1; width: auto; }
  .lang-switch { margin-left: auto; }

  .search-item { flex-direction: column; gap: 2px; }
  .search-item-sub { white-space: normal; }

  .br-wide { display: none; }
}

/* ============================================================
   咨询留资表单（P4-2）。命名随 .search-form 一族：竖排字段、
   可见 label（隐私勾选必须显式，GDPR），星号标必填。
   ============================================================ */
.consult-form { display: grid; gap: 14px; max-width: 560px; margin-block: 8px; }
.consult-field { display: grid; gap: 4px; }
.consult-label { font-weight: 600; font-size: var(--step-0); }
.consult-req { color: var(--danger, #b3261e); }
.consult-row { display: flex; flex-wrap: wrap; gap: 8px; }
.consult-input,
.consult-select,
.consult-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: inherit;
  font: inherit;
}
.consult-input:focus,
.consult-select:focus,
.consult-textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.consult-row .consult-select { width: 11em; flex: none; }
.consult-row .consult-input { flex: 1 1 14em; }
.consult-hint { margin: 0; color: var(--ink-faint); font-size: var(--step--1); }
.consult-privacy { display: flex; gap: 8px; align-items: flex-start; font-size: var(--step-0); }
.consult-privacy input { margin-top: 3px; }
.consult-submit {
  justify-self: start;
  padding: 9px 22px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.consult-submit:hover { filter: brightness(1.05); }
.consult-success {
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  margin-block: 10px;
  background: var(--surface);
}
.consult-success-title { margin: 0 0 4px; font-weight: 700; color: var(--accent); }
.consult-success-body { margin: 0; }

/* ── P4-3 防刷：蜜罐与人机验证 ─────────────────────────── */
/* 蜜罐：视觉上彻底移出，正常用户填不到；读屏也会跳过 */
.consult-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consult-captcha {
  display: inline-block;
  padding: 0 14px;
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.08em;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  white-space: nowrap;
  user-select: none;
}

/* ── P4-6 转化入口铺点 ─────────────────────────────────────── */
/* CTA 块：诊所详情（成功率表下方）与对比页底部共用 */
.consult-cta {
  margin-block: 28px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
}
.consult-cta-title { margin: 0 0 6px; font-size: var(--step-1); }
.consult-cta-context { margin: 0 0 4px; color: var(--ink); font-weight: 600; }
.consult-cta-line { margin: 0 0 10px; color: var(--ink-muted); }
.consult-cta-points { margin: 0 0 14px; padding-left: 1.2em; color: var(--ink-muted); }
.consult-cta-points li { margin-block: 4px; }
.consult-cta-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
}
.consult-cta-btn:hover { background: var(--accent-hover); }

/* 右侧悬浮：全站入口；窄屏退到底部横条，不遮正文 */
.consult-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgb(0 0 0 / 18%);
}
.consult-float:hover { background: var(--accent-hover); }

/* 高意图页弹窗：右下角小卡，hidden 起步，JS 达条件才显示 */
.consult-pop {
  position: fixed;
  right: 18px;
  bottom: 70px;
  z-index: 61;
  max-width: 300px;
  padding: 16px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgb(0 0 0 / 20%);
}
.consult-pop-title { margin: 0 0 6px; font-weight: 700; }
.consult-pop-body { margin: 0 0 12px; color: var(--ink-muted); }
.consult-pop-close {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 0 6px;
  border: 0;
  background: none;
  font-size: 1.2em;
  line-height: 1.4;
  color: var(--ink-faint);
  cursor: pointer;
}
.consult-pop-close:hover { color: var(--ink); }

@media (max-width: 640px) {
  .consult-float {
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0;
    text-align: center;
    padding: 12px;
  }
  .consult-pop {
    right: 12px;
    left: 12px;
    bottom: 58px;
    max-width: none;
  }
}

.consult-reply { margin: 4px 0 14px; color: var(--ink-muted); font-size: var(--step-0); }