/* ============================================================
   TWCG 长果桑基因组 · 样式表
   ------------------------------------------------------------
   设计语言 : Mulberry Lab Green（桑绿科研版）
   对标     : 桑树小站 + Ensembl / NCBI 基因组门户
   寄存器   : Product（首页 Hero 带轻度 Brand 叙事）
   规则     :
     1. 全部颜色经 var() 引用 design-tokens.css，本文件无裸 hex
     2. 全站无图标（emoji 与 SVG 图标均不用）：层次由字重 / 字号 /
        色块 / 间距建立
     3. 无紫→粉渐变、无弹跳缓动、无常驻装饰动画
     4. 卡片左侧彩条全站仅 1 处（#allele 高亮卡）
   ============================================================ */

/* ============================================================
   1. 基础重置与版心
   ============================================================ */
:root {
  --gutter: var(--container-gutter-mobile);
  --section-pad-y: var(--section-y-mobile);
}
@media (min-width: 640px) {
  :root { --gutter: var(--container-gutter-tablet); --section-pad-y: var(--section-y-tablet); }
}
@media (min-width: 1024px) {
  :root { --gutter: var(--container-gutter); --section-pad-y: var(--section-y); }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg);
}
p { margin: 0; }
ul, ol, dl, dt, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
a:visited { color: var(--link-visited); }

em { font-style: italic; color: var(--prose-em-fg); }
strong { color: var(--prose-strong-fg); font-weight: var(--prose-strong-weight); }
code {
  font-family: var(--font-mono);
  font-size: var(--code-font-size);
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: var(--code-radius);
  padding: var(--code-padding);
  overflow-wrap: anywhere;
}
button { font-family: inherit; font-size: inherit; color: inherit; line-height: inherit; }

/* 数字统一等宽 + 表格数字对齐 */
.num, .stat-num, .fact-list dd, .haplo-list b, .evo-num, .af3-num b,
.rga-bar b, .sb .v, .gtitle, .result__id, .af3-num span {
  font-variant-numeric: var(--num-variant);
}

/* 视觉隐藏但保留给辅助技术 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 焦点环：禁止 outline:none 而不补替代 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* 版心容器 */
.container,
.wrap {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.wrap { padding-top: var(--space-6); padding-bottom: var(--space-9); }

/* ============================================================
   2. 顶部导航（桑树小站绿色外壳）
   ============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--nav-bg);
  box-shadow: var(--nav-shadow);
}
.site-nav__inner {
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
/* :visited 变体必须显式声明：全局 a:visited (0,1,1) 会压过本类 (0,1,0)，导致品牌字访问后变紫 */
.site-nav__brand,
.site-nav__brand:visited {
  font-size: var(--nav-brand-size);
  font-weight: var(--weight-semibold);
  color: var(--nav-fg);
  flex: none;
  padding: var(--space-2) 0;
}
.site-nav__brand:hover { color: var(--nav-fg); text-decoration: none; }
.site-nav__brand:focus-visible { box-shadow: var(--focus-ring-on-dark); }

.site-nav__crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--nav-fg-muted);
  min-width: 0;
}
.site-nav__crumbs a { color: var(--nav-fg-muted); }
.site-nav__crumbs a:hover { color: var(--nav-fg); text-decoration: underline; }
.site-nav__crumbs a:focus-visible { box-shadow: var(--focus-ring-on-dark); }
.site-nav__sep { color: var(--nav-fg-muted); }
.site-nav__crumbs [aria-current="page"] { font-weight: var(--weight-medium); color: var(--nav-fg); }

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  min-width: 0;
}
.site-nav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--nav-link-size);
  font-weight: var(--weight-medium);
  color: var(--nav-fg-muted);
  white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.site-nav__links a:hover { background: var(--nav-hover-bg); color: var(--nav-fg); text-decoration: none; }
.site-nav__links a:focus-visible { box-shadow: var(--focus-ring-on-dark); }
.site-nav__links a::after {
  content: "";
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: 6px;
  height: 2px;
  background: var(--nav-active-underline);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-fast) var(--ease-out);
}
.site-nav__links a:hover::after { transform: scaleX(1); }
.site-nav__links a.is-active { background: var(--nav-active-bg); color: var(--nav-fg); font-weight: var(--weight-semibold); }
.site-nav__links a.is-active::after { transform: scaleX(1); }
.site-nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* 禁用态导航项（/downloads 在 nginx 中返回 403） */
.site-nav__disabled {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--nav-link-size);
  font-weight: var(--weight-medium);
  color: var(--nav-fg-muted);
  white-space: nowrap;
  cursor: not-allowed;
  background: var(--nav-hover-bg);
}

/* ============================================================
   3. 按钮
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-h);
  padding: 0 var(--btn-padding-x);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn--primary:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-fg); }
.btn--primary:active { background: var(--btn-primary-bg-active); }

.btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); border-color: var(--btn-secondary-border); }
.btn--secondary:hover { background: var(--btn-secondary-bg-hover); border-color: var(--btn-secondary-border-hover); color: var(--btn-secondary-fg); }
.btn--secondary:active { background: var(--btn-secondary-bg-hover); }

.btn--ghost { background: var(--btn-ghost-bg); color: var(--btn-ghost-fg); }
.btn--ghost:hover { background: var(--btn-ghost-bg-hover); color: var(--fg); }

.btn--tool { background: var(--btn-tool-bg); color: var(--btn-tool-fg); }
.btn--tool:hover { background: var(--btn-tool-bg-hover); color: var(--btn-tool-fg); }

.btn[aria-disabled="true"],
.btn:disabled {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-fg);
  border-color: var(--btn-disabled-border);
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   4. 输入框 / 检索框
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-2); }
.input {
  height: var(--input-h);
  width: 100%;
  padding: 0 var(--input-padding-x);
  background: var(--input-bg);
  color: var(--input-fg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  font-family: var(--font-body);
  font-size: var(--input-font-size);
  transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.input::placeholder { color: var(--input-placeholder); }
.input:hover { border-color: var(--input-border-hover); }
.input:focus { outline: none; border-color: var(--input-border-focus); box-shadow: var(--input-ring-focus); }
.input:focus-visible { outline: none; box-shadow: var(--input-ring-focus); }
.input:disabled { background: var(--input-bg-disabled); color: var(--meta); cursor: not-allowed; }
.field__error { font-size: var(--text-sm); color: var(--danger); }

/* ============================================================
   5. 卡片 / 面板
   ============================================================ */
.card,
.panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
}
.panel { border-radius: var(--card-radius-lg); margin-bottom: var(--space-5); }
.panel__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--fg); margin-bottom: var(--space-3); }

/* ============================================================
   6. 章节标题与说明块
   ============================================================ */
.section {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: var(--section-pad-y) var(--gutter);
  scroll-margin-top: calc(var(--nav-h) + var(--space-4));
}
.section-head { margin-bottom: var(--space-6); }

.section-title {
  font-size: var(--section-title-size);
  font-weight: var(--section-title-weight);
  color: var(--section-title-color);
  border-left: var(--section-title-rule-w) solid var(--section-title-rule);
  padding-left: var(--section-title-gap);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-snug);
}
.section-desc {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--muted);
  max-width: 68ch;
  margin-bottom: var(--space-5);
}

/* 说明块：全站限用 ≤2 处 */
.section-intro {
  background: var(--intro-bg);
  border-left: 4px solid var(--intro-border-left);
  border-radius: var(--intro-radius);
  padding: var(--intro-padding);
  font-size: var(--intro-font-size);
  color: var(--intro-fg);
  line-height: var(--leading-relaxed);
}
.section-intro b { color: var(--fg); font-weight: var(--weight-semibold); }

.figure-note {
  font-size: var(--text-sm);
  color: var(--meta);
  line-height: var(--leading-normal);
  margin-top: var(--space-3);
  text-align: left;
  font-style: normal;
}

/* ============================================================
   7. 表格
   ============================================================ */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--text-base); }
.data-table thead th {
  background: var(--table-head-bg);
  color: var(--table-head-fg);
  font-size: var(--table-head-size);
  font-weight: var(--weight-medium);
  text-align: left;
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
}
.data-table tbody td {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-bottom: 1px solid var(--table-row-border);
  color: var(--fg);
}
.data-table tbody tr:hover td { background: var(--table-row-bg-hover); }
.data-table td.num { font-family: var(--font-num); font-variant-numeric: var(--num-variant); text-align: right; }
.table-caption { font-size: var(--text-sm); color: var(--meta); margin-bottom: var(--space-2); }

/* ============================================================
   8. 徽章 / chip / 图例色块
   ============================================================ */
.badge {
  display: inline-block;
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: var(--badge-size);
  font-weight: var(--badge-weight);
  padding: var(--badge-padding);
  border-radius: var(--badge-radius);
  white-space: nowrap;
  line-height: var(--leading-normal);
}
.badge--hap-a1 { background: var(--hap-a1-soft); color: var(--hap-a1); }
.badge--hap-a2 { background: var(--hap-a2-soft); color: var(--hap-a2); }
.badge--hap-b  { background: var(--hap-b-soft);  color: var(--hap-b); }
.badge--tool   { background: var(--tool-accent-soft); color: var(--tool-accent-d); }
.badge--neutral { background: var(--surface-warm); color: var(--muted); }
.badge--soon { background: var(--surface-warm); color: var(--muted); font-size: var(--text-2xs); padding: 2px var(--space-2); }

.chip {
  display: inline-block;
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: var(--text-xs);
  border-radius: var(--badge-radius);
  padding: 3px var(--space-3);
  margin: 2px;
}

.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  vertical-align: -1px;
  margin-right: var(--space-2);
  flex: none;
}
.sw--a1 { background: var(--hap-a1); }
.sw--a2 { background: var(--hap-a2); }
.sw--b  { background: var(--hap-b); }
.sw--vegetative { background: var(--chart-vegetative); }
.sw--fruit { background: var(--chart-fruit); }
.sw--neutral { background: var(--chart-neutral); }
.sw--tri { background: var(--chart-tri); }
.sw--bi { background: var(--chart-bi); }
.sw--mono { background: var(--chart-mono); }

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-3);
  line-height: var(--leading-normal);
}

/* ============================================================
   9. 状态：加载 / 空 / 错误
   ============================================================ */
@keyframes ux-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.ux-skeleton {
  background: var(--skeleton-bg);
  background-size: 200% 100%;
  border-radius: var(--skeleton-radius);
  animation: ux-shimmer 1.2s linear infinite;
  min-height: var(--skeleton-h);
}
.ux-skeleton--row { min-height: 56px; border-radius: var(--radius-sm); }
.ux-loading { display: grid; gap: var(--space-2); }

.ux-empty {
  text-align: center;
  padding: var(--empty-padding) var(--space-4);
  color: var(--empty-fg);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}
.ux-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }

.ux-error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  color: var(--error-fg);
  text-align: center;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}
.ux-error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }

/* ============================================================
   10. 首页 · Hero（非对称两栏 · 真实装配指标）
   ============================================================ */
.hero {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: var(--space-7) var(--gutter) var(--space-6);
  background: var(--bg);
  scroll-margin-top: var(--nav-h);
}
.hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
.hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  color: var(--accent-bright);
  margin-bottom: var(--space-3);
}
.hero__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.hero__title-en {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  color: var(--muted);
  margin-top: var(--space-2);
}
.hero__lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--muted);
  max-width: 56ch;
  margin-top: var(--space-4);
  margin-bottom: var(--space-5);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Hero 右栏：装配指标速览 */
.hero-facts {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius-lg);
  padding: var(--card-padding);
}
.hero-facts__title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--fg); margin-bottom: var(--space-3); }
.fact-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}
.fact-list__row + .fact-list__row { border-top: 1px solid var(--border-soft); }
.fact-list dt { font-size: var(--text-sm); color: var(--muted); }
.fact-list dd {
  font-family: var(--font-num);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--accent);
}
.hero-facts__section { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.hero-facts__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg); margin-bottom: var(--space-2); }

.haplo-bar {
  display: flex;
  width: 100%;
  height: 12px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-warm);
}
.haplo-bar__seg { display: block; height: 100%; }
.haplo-bar__seg--a1 { background: var(--hap-a1); width: 35.4%; }
.haplo-bar__seg--a2 { background: var(--hap-a2); width: 33.8%; }
.haplo-bar__seg--b  { background: var(--hap-b);  width: 30.8%; }

.hero-facts__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: var(--leading-normal);
}
.hero-facts__legend span { display: inline-flex; align-items: center; }

/* ============================================================
   11. 关于 TWCG / 谱系条 / 工具卡
   ============================================================ */
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--card-gap); }
.about-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.about-card h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--fg); margin-bottom: var(--space-2); }
.about-card p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--muted); }
/* 桌面端固定 3 列；中等屏 2 列，窄屏 1 列 */
@media (min-width: 1180px) {
  .about-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 861px) and (max-width: 1179px) {
  .about-grid { grid-template-columns: repeat(2, 1fr); }
}

.pedigree {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  background: var(--surface-warm);
  border-radius: var(--card-radius);
  padding: var(--space-4);
}
.pedigree-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.pedigree-node em { font-size: var(--text-md); font-style: italic; }
.pedigree-node small { font-size: var(--text-sm); color: var(--meta); }
.pedigree-node--mom { border-color: var(--hap-a1); }
.pedigree-node--dad { border-color: var(--hap-b); }
.pedigree-node--child { background: var(--accent-soft); border-color: var(--accent); }
.pedigree-op { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--muted); }

/* 工具卡 */
.tool-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius-lg);
  padding: var(--card-padding);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}
a.tool-card:hover {
  border-color: var(--accent-bright);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-3px);
  text-decoration: none;
  color: inherit;
}
a.tool-card:hover .tool-card__title { color: var(--accent); }
.tool-card__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--fg); }
.tool-card__desc { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--muted); min-height: 44px; }
.tool-card__tag {
  align-self: flex-start;
  background: var(--surface-warm);
  color: var(--muted);
  font-size: var(--text-xs);
  border-radius: var(--radius-pill);
  padding: 3px var(--space-3);
}
.tool-card--blast:hover { border-color: var(--tool-accent); }
.tool-card.is-disabled {
  background: var(--btn-disabled-bg);
  border-color: var(--btn-disabled-border);
  color: var(--btn-disabled-fg);
  cursor: not-allowed;
}
.tool-card.is-disabled .tool-card__title,
.tool-card.is-disabled .tool-card__desc { color: var(--meta); }
.tool-card.is-disabled .tool-card__tag { background: var(--surface); color: var(--meta); }

/* ============================================================
   12. 基因组概览 · 8 张统计卡
   ============================================================ */
.stat-grid { display: grid; grid-template-columns: 1fr; gap: var(--card-gap); }
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-5) var(--space-5);
  transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.stat-card:hover { border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover); }
.stat-num {
  font-family: var(--font-num);
  font-size: var(--text-stat);
  font-weight: var(--weight-bold);
  color: var(--accent);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}
.stat-label { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--fg); margin-top: var(--space-1); }
.stat-sub { font-size: var(--text-xs); color: var(--meta); margin-top: 2px; }
/* 层次例外：仅 2 张质量头条主张用主色浅底 */
.stat-card--accent { background: var(--accent-soft); border-color: var(--accent); }

/* ============================================================
   13. 三联单倍型 + 对比柱图
   ============================================================ */
.haplo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--card-gap); }
.haplo-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.haplo-card--a1:hover { border-color: var(--hap-a1); box-shadow: var(--card-shadow-hover); }
.haplo-card--a2:hover { border-color: var(--hap-a2); box-shadow: var(--card-shadow-hover); }
.haplo-card--b:hover  { border-color: var(--hap-b);  box-shadow: var(--card-shadow-hover); }
.haplo-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.haplo-tag { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.haplo-origin { font-size: var(--text-xs); color: var(--muted); background: var(--surface-warm); padding: 3px var(--space-3); border-radius: var(--radius-pill); }
.haplo-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.haplo-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  border-top: 1px solid var(--border-soft);
}
.haplo-list li:nth-child(2) { border-left: 1px solid var(--border-soft); }
.haplo-list li:nth-child(4),
.haplo-list li:nth-child(6) { border-left: 1px solid var(--border-soft); }
.haplo-list b { font-family: var(--font-num); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--fg); }
.haplo-list span { font-size: var(--text-xs); color: var(--meta); }

.assembly-figure {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius-lg);
  padding: var(--card-padding);
  margin-top: var(--space-5);
}
.assembly-figure h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--fg); margin-bottom: var(--space-2); }
.assembly-figure .figure-note { margin-top: var(--space-2); }

.chart-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-7);
  margin: var(--space-4) 0;
  flex-wrap: wrap;
}
.chart-row__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--muted); text-align: left; }
.bar-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 84px; }
.bar-value {
  font-family: var(--font-num);
  font-variant-numeric: var(--num-variant);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg);
  margin-bottom: var(--space-1);
  white-space: nowrap;
}
.bar-track { width: 46px; height: 150px; display: flex; align-items: flex-end; }
.bar {
  width: 100%;
  height: var(--h, 50%);
  background: var(--c, var(--accent));
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
html.js .bar { transform: scaleY(0); transform-origin: bottom center; transition: transform var(--motion-slow) var(--ease-out); }
html.js .bar.is-in { transform: scaleY(1); }
.bar--a1 { --c: var(--chart-hap-a1); }
.bar--a2 { --c: var(--chart-hap-a2); }
.bar--b  { --c: var(--chart-hap-b); }
.bar-cap { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg); text-align: center; }

/* ============================================================
   14. 起源与进化
   ============================================================ */
.evo-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
.evo-tree { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: var(--card-padding); }
.tree-svg { width: 100%; height: auto; }
.tree-branch { fill: none; stroke-width: 2; }
.tree-branch--out { stroke: var(--meta); }
.tree-branch--laev { stroke: var(--hap-a1); stroke-width: 2.5; }
.tree-branch--a { stroke: var(--hap-a2); stroke-width: 2.5; }
.tree-branch--b { stroke: var(--hap-b); stroke-width: 2.5; }
.tree-node--out { fill: var(--meta); }
.tree-node--laev { fill: var(--hap-a1); }
.tree-node--a { fill: var(--hap-a2); }
.tree-node--b { fill: var(--hap-b); }
.tree-label { font-size: 11px; fill: var(--fg); font-family: var(--font-body); letter-spacing: var(--tracking-wide); }
.tree-time { font-size: 11px; fill: var(--accent); font-style: italic; font-family: var(--font-body); }

.evo-facts { display: grid; gap: var(--card-gap); }
.evo-fact {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.evo-fact:hover { border-color: var(--card-border-hover); box-shadow: var(--card-shadow-hover); }
.evo-num {
  font-family: var(--font-num);
  font-variant-numeric: var(--num-variant);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--accent);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-1);
}
.evo-num--text { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.evo-fact p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--muted); }

/* ============================================================
   15. 等位基因表达偏倚
   ============================================================ */
.allele-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
.allele-pie { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: var(--card-padding); text-align: center; }
.donut { width: 200px; height: 200px; max-width: 100%; margin: 0 auto; }
.donut-seg { fill: none; stroke-width: 34; }
.donut-seg--tri { stroke: var(--chart-tri); }
.donut-seg--mono { stroke: var(--chart-mono); }
.donut-seg--bi { stroke: var(--chart-bi); }
.donut-big {
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: var(--weight-bold);
  fill: var(--fg);
}
.donut-small { font-size: 11px; fill: var(--muted); font-family: var(--font-body); letter-spacing: var(--tracking-wide); }
.allele-pie .legend { flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--text-sm); text-align: left; }
.allele-pie .legend span { display: inline-flex; align-items: center; }

.allele-points { display: grid; gap: var(--card-gap); }
.allele-point {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-5);
}
.allele-point h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--fg); margin-bottom: var(--space-2); }
.allele-point p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--muted); }
/* 全站唯一一张带左侧主色竖线的卡：最重要的发现 */
.allele-point--highlight {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
}

/* ============================================================
   16. 抗病机制
   ============================================================ */
.resist-top { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
.fungus-card, .rga-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
}
.fungus-svg { width: 96px; height: 96px; margin-bottom: var(--space-2); }
.fungus-cap { fill: var(--surface-warm); stroke: var(--border-strong); stroke-width: 1; }
.fungus-cap-under { fill: var(--border-strong); }
.fungus-spot { fill: var(--muted); }
.fungus-stem { stroke: var(--meta); fill: none; stroke-linecap: round; }
.fungus-card h3, .rga-card h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--fg); margin-bottom: var(--space-3); }
.fungus-card ul { display: block; }
.fungus-card li { font-size: var(--text-base); color: var(--muted); padding: var(--space-2) 0; }
.fungus-card li + li { border-top: 1px solid var(--border-soft); }
.fungus-card li b { font-family: var(--font-num); font-variant-numeric: var(--num-variant); color: var(--fg); font-weight: var(--weight-semibold); }

.rga-bars { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.rga-bar { display: grid; grid-template-columns: 1fr 56px 88px; align-items: center; gap: var(--space-3); }
.rga-track { height: 12px; background: var(--surface-warm); border-radius: var(--radius-pill); overflow: hidden; }
.rga-fill {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--c, var(--accent));
  border-radius: var(--radius-pill);
}
html.js .rga-fill { transform: scaleX(0); transform-origin: left center; transition: transform var(--motion-slow) var(--ease-out); }
html.js .rga-fill.is-in { transform: scaleX(1); }
.rga-fill--rlp { --c: var(--chart-rlp); }
.rga-fill--rlk { --c: var(--chart-rlk); }
.rga-fill--nlr { --c: var(--chart-nlr); }
.rga-bar b { font-family: var(--font-num); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--fg); text-align: right; }
.rga-name { font-size: var(--text-sm); color: var(--muted); }
.rga-card p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--muted); }

.af3 {
  background: var(--surface-warm);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  margin-top: var(--space-5);
}
.af3 h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--fg); margin-bottom: var(--space-4); }
.af3-nums { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); }
.af3-num {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--space-3) var(--space-5);
  text-align: center;
  min-width: 120px;
}
.af3-num b { display: block; font-family: var(--font-num); font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--accent); line-height: 1.1; }
.af3-num span { font-size: var(--text-xs); color: var(--meta); }
.af3-num--total { background: var(--accent-soft); border-color: var(--accent); }
.af3-num--total b { color: var(--accent); }
.af3-op { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--muted); }

/* ============================================================
   17. 团队与数据
   ============================================================ */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--card-gap); }
.team-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: var(--card-padding); }
.team-card h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--fg); margin-bottom: var(--space-3); }
.authors { font-size: var(--text-base); line-height: 2; color: var(--muted); }
.authors sup { font-size: var(--text-2xs); color: var(--meta); }
.authors strong { color: var(--accent); }
.corr { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--muted); }
.corr a { color: var(--link); overflow-wrap: anywhere; }
.affil { display: block; }
.affil li { font-size: var(--text-base); color: var(--muted); padding: var(--space-2) 0; }
.affil li + li { border-top: 1px solid var(--border-soft); }
.team-card p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--muted); }
.cite-note { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--muted); }
.cite-note em { color: var(--fg-2); }

/* ============================================================
   18. 页脚
   ============================================================ */
.site-footer { background: var(--footer-bg); color: var(--footer-fg); padding: var(--footer-padding-y) 0; margin-top: var(--section-pad-y); }
.site-footer__inner {
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
.site-footer__brand { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--footer-link-hover); margin-bottom: var(--space-2); }
.site-footer__desc { font-size: var(--text-base); color: var(--footer-fg); line-height: var(--leading-relaxed); max-width: 46ch; }
.site-footer__cite { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--footer-fg-muted); font-style: italic; line-height: var(--leading-normal); }
.site-footer__cite em { color: var(--footer-fg); }
.site-footer__h { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--footer-link-hover); margin-bottom: var(--space-3); }
.site-footer__links { display: grid; gap: var(--space-2); }
.site-footer__links a, .site-footer a { color: var(--footer-link); }
.site-footer__links a:hover, .site-footer a:hover { color: var(--footer-link-hover); text-decoration: underline; }
.site-footer__links a:focus-visible, .site-footer a:focus-visible { box-shadow: var(--focus-ring-on-dark); }
.site-footer p { font-size: var(--text-base); color: var(--footer-fg); line-height: var(--leading-relaxed); }
.site-footer__bottom {
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin: var(--space-5) auto 0;
  padding: var(--space-4) var(--gutter) 0;
  border-top: 1px solid var(--footer-border);
  font-size: var(--text-sm);
  color: var(--footer-fg-muted);
}

/* ============================================================
   19. 子页面通用：页头 / 检索行 / 结果状态
   ============================================================ */
.page-head { margin-bottom: var(--space-5); }
.page-title { font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--fg); }
.page-title-en { font-size: var(--text-base); font-weight: var(--weight-regular); color: var(--muted); letter-spacing: var(--tracking-normal); margin-left: var(--space-3); }
.page-sub { margin-top: var(--space-2); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--muted); max-width: 72ch; }
.page-sub b { color: var(--fg); font-weight: var(--weight-semibold); }

.lookup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.lookup .field { flex: 1 1 260px; min-width: 240px; }
.hint { font-size: var(--text-sm); line-height: 1.7; color: var(--muted); margin-top: var(--space-3); }
.hint b { color: var(--fg); font-weight: var(--weight-semibold); }
.hint code { color: var(--code-fg); }

.result-meta { font-size: var(--text-sm); color: var(--meta); margin-bottom: var(--space-2); }
.result-list { display: block; }
.result {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.result:hover { background: var(--surface-warm); }
.result:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.result__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.result__id { font-family: var(--font-mono); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--link); overflow-wrap: anywhere; }
.result__meta { font-size: var(--text-xs); color: var(--meta); }
.result__desc {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.result-note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--warn); }

/* 基因详情卡 */
.detail {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius-lg);
  padding: var(--card-padding);
  margin-top: var(--space-4);
}
.detail[hidden] { display: none; }
.detail__title { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--fg); overflow-wrap: anywhere; }
.detail__title:focus { outline: none; }
.kv { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); font-size: var(--text-base); }
.kv dt { color: var(--muted); font-weight: var(--weight-medium); }
.kv dd { color: var(--fg); overflow-wrap: anywhere; }
.kv dd.num { font-family: var(--font-num); }
.detail__chips { margin-top: var(--space-2); }

/* ============================================================
   20. 表达图谱 · 参考图 / 基因卡 / 柱状图
   ============================================================ */
.ref-figure {
  background: var(--figure-bg);
  border: 1px solid var(--figure-border);
  border-radius: var(--figure-radius);
  padding: var(--figure-padding);
}
.ref-img { width: 100%; height: auto; display: block; }
.ref-cap { font-size: var(--text-sm); line-height: 1.8; color: var(--muted); margin-top: var(--space-3); text-align: left; }
.ref-cap b { color: var(--fg); font-weight: var(--weight-semibold); }

.gene-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius-lg);
  padding: var(--card-padding);
  margin-bottom: var(--space-4);
}
.gene-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.gtitle { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--fg); overflow-wrap: anywhere; }
.gene-card__peak { margin-left: auto; font-size: var(--text-xs); color: var(--meta); }
.gsub { font-size: var(--text-xs); color: var(--meta); margin-top: 2px; margin-bottom: var(--space-3); }

.bars-wrap { overflow-x: auto; margin-top: var(--space-2); }
.bars-wrap:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* 分组标题行：绿紫明度比仅 1.03:1，靠文字兜底（WCAG 1.4.1） */
.bar-groups {
  display: flex;
  min-width: 720px;
  border-top: 1px solid var(--chart-axis);
  padding-top: var(--space-1);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--muted);
  line-height: var(--leading-normal);
}
.bar-groups__seg { padding: 0 var(--space-2); }
.bar-groups__seg--veg { flex: 3; }
.bar-groups__seg--fruit { flex: 7; border-left: 1px solid var(--chart-axis); }

.sbar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: 200px;
  min-width: 720px;
  border-bottom: 1px solid var(--chart-axis);
}
.sbar .sb {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}
.sbar .sb .v {
  font-family: var(--font-num);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--muted);
  white-space: nowrap;
  margin-bottom: var(--space-1);
}
.sbar .sb .fill {
  width: 100%;
  min-height: 2px;
  border-radius: 6px 6px 0 0;
  background: var(--chart-vegetative);
  transition: height var(--motion-slow) var(--ease-out);
}
.sbar .sb[data-group="Fruit"] .fill { background: var(--chart-fruit); }
.sbar .sb[data-na="1"] .fill { background: var(--chart-neutral); }
.sbar .sb .lab { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--fg); margin-top: var(--space-2); white-space: nowrap; }
.sbar .sb .grp { font-size: 10px; color: var(--meta); letter-spacing: var(--tracking-wide); white-space: nowrap; }

/* ============================================================
   21. 滚动揭示（仅在 JS 可用时隐藏，避免脚本失效导致内容不可见）
   ============================================================ */
html.js .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out);
  transition-delay: var(--d, 0s);
}
html.js .reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   22. 响应式断点：640 / 768 / 1024 / 1280
   ============================================================ */
@media (min-width: 640px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: var(--space-8) var(--gutter) var(--space-7); }
  .hero__title { font-size: var(--text-4xl); }
}
@media (min-width: 768px) {
  .site-nav__crumbs { display: flex; }
}
@media (max-width: 767px) {
  .site-nav__inner { flex-wrap: wrap; padding-top: var(--space-2); padding-bottom: var(--space-2); row-gap: 0; }
  .site-nav__crumbs { display: none; }
  .site-nav__links {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-nav__links::-webkit-scrollbar { display: none; }
  .site-nav__links a { padding: 0 var(--space-4); }
}
@media (min-width: 860px) {
  .evo-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .resist-top { grid-template-columns: 1fr 1.2fr; }
  .allele-grid { grid-template-columns: 320px 1fr; gap: var(--space-6); }
}
@media (max-width: 859px) {
  .allele-pie { max-width: 320px; margin: 0 auto; }
}
@media (min-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-7); }
  .site-footer__inner { grid-template-columns: 2fr 1.2fr; gap: var(--space-6); }
}
@media (max-width: 1023px) {
  .chart-row { gap: var(--space-5); }
}
@media (max-width: 719px) {
  .kv { grid-template-columns: 1fr; gap: var(--space-1); }
  .kv dt { margin-top: var(--space-2); }
  .kv dd { margin-bottom: var(--space-1); }
  .rga-bar { grid-template-columns: 1fr 56px 72px; }
}
@media (max-width: 639px) {
  .hero-facts { padding: var(--space-4); }
  .af3-num { min-width: 96px; padding: var(--space-3) var(--space-4); }
  .ux-empty { padding: var(--space-6) var(--space-3); }
}

/* ============================================================
   23. 减弱动态效果
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
  html.js .bar,
  html.js .rga-fill { transform: none; }
  a.tool-card:hover { transform: none; }
}


/* ============================================================
   基因检索 · 详情卡片 v2（概览 / 基因组位置 / 表达谱 / 序列）
   ============================================================ */
.detail { margin-top: var(--space-5); }
.detail__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.detail__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }

/* 小号按钮 */
.btn--sm { height: 34px; padding: 0 var(--space-3); font-size: var(--text-sm); }

/* 页签栏 */
.gd-tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
}
.gd-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base); font-weight: var(--weight-medium);
  color: var(--muted); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  position: relative;
}
.gd-tab:hover { color: var(--fg); background: var(--surface-warm); }
.gd-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.gd-tab.is-active { color: var(--accent); font-weight: var(--weight-semibold); }
.gd-tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--accent-bright); border-radius: 2px 2px 0 0;
}

/* 快览统计 */
.gd-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--card-gap); margin-bottom: var(--space-4);
}
.gd-stat {
  background: var(--surface-sunken); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: 2px;
}
.gd-stat b {
  font-family: var(--font-num); font-variant-numeric: var(--num-variant);
  font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--fg);
}
.gd-stat span { font-size: var(--text-sm); color: var(--muted); }
.gd-stat em { font-style: normal; font-size: var(--text-2xs); color: var(--meta); }

/* 注释分组 */
.anno-groups { margin-top: var(--space-4); }
.anno-groups h4, .gd-sub {
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  color: var(--fg); margin: var(--space-4) 0 var(--space-2);
  padding-left: var(--space-3); border-left: 3px solid var(--accent-bright);
}
.anno-row { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-2) var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--border-soft); }
.anno-row dt { color: var(--muted); font-weight: var(--weight-medium); font-size: var(--text-sm); padding-top: 2px; }
.anno-row dd { color: var(--fg); overflow-wrap: anywhere; }
.gd-more { font-size: var(--text-xs); color: var(--meta); margin-left: var(--space-2); }

/* 基因结构图 */
.gd-structure {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-3);
  overflow-x: auto;
}
.gd-svg { width: 100%; min-width: 640px; height: auto; display: block; }
.gd-intron { stroke: var(--border-strong); stroke-width: 1.5; }
.gd-exon { fill: var(--accent-soft); stroke: var(--accent-bright); stroke-width: 1.2; }
.gd-cds { fill: var(--accent-bright); }
.gd-exon-num { font-size: 10px; fill: var(--fg-2); font-family: var(--font-num); }
.gd-tick { stroke: var(--meta); stroke-width: 1; }
.gd-tick-label { font-size: 10px; fill: var(--meta); font-family: var(--font-num); }
.gd-strand-label { font-size: 11px; fill: var(--muted); font-family: var(--font-num); }
.gd-sw-exon { background: var(--accent-soft); border: 1px solid var(--accent-bright); }
.gd-sw-cds { background: var(--accent-bright); }

/* 序列查看器 */
.seq-seg { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.seq-seg .btn--sm.is-active {
  background: var(--accent); color: var(--accent-on); border-color: var(--accent);
}
.seq-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.seq-tools__btns { display: flex; gap: var(--space-2); margin-left: auto; }
.gd-seq-len { font-size: var(--text-sm); color: var(--muted); }
.gd-seq-len b { font-family: var(--font-num); color: var(--fg); }
.seq-pre {
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7;
  color: var(--fg-2); white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 420px; overflow-y: auto; margin: 0;
}
.seq-pre:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (max-width: 639px) {
  .anno-row { grid-template-columns: 1fr; gap: 2px; }
  .detail__actions { margin-left: 0; }
}

/* ============================================================
   工具模块统一顶栏（对标 BLAST 工具页）：
   深绿导航（brand + 横向菜单 + 右侧面包屑）+ 第二行工具条
   ============================================================ */
.site-nav__links--main { margin-left: var(--space-2); }
.site-nav__crumbs--right { margin-left: auto; flex: none; }

.tool-bar { background: var(--surface); border-bottom: 1px solid var(--border); }
.tool-bar__inner {
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.tool-bar__back {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--link);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  margin-left: calc(-1 * var(--space-2));
}
.tool-bar__back:hover { color: var(--link-hover); text-decoration: underline; }
.tool-bar__back:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tool-bar__meta { font-size: var(--text-sm); color: var(--meta); }

@media (max-width: 960px) {
  .site-nav__crumbs--right { display: none; }
  .site-nav__links--main { margin-left: auto; overflow-x: auto; }
}

/* 检索物种下拉 */
.select { cursor: pointer; appearance: auto; padding-right: var(--space-5); }
.lookup .field--org { flex: 0 1 220px; }

/* 表达图谱 · 数据集视图切换（互斥视图，不堆叠） */
.seg-ctl { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.seg-ctl__btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  color: var(--fg-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}
.seg-ctl__btn:hover { border-color: var(--border-strong); background: var(--surface-warm); }
.seg-ctl__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.seg-ctl__btn.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.seg-ctl__tag { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--muted); }
.seg-ctl__btn.is-active .seg-ctl__tag { color: var(--accent); }
.ds-view[hidden] { display: none; }

/* ============================================================
   首页板块切换（仿桑树小站导航，互斥显示，不做单页长滚动）
   ============================================================ */
.page-block { display: none; }
.page-block.is-on { display: block; }

/* ============================================================
   首页 Hero band（About 板块首屏 · 2026-09-08 视觉优化）
   ============================================================ */
.hero{
  margin: calc(var(--section-pad-y) * -1) calc(var(--gutter) * -1) var(--space-7);
  padding: clamp(44px, 7vw, 72px) var(--gutter) 46px;
  background:
    radial-gradient(900px 360px at 88% -18%, rgba(74, 124, 18, .12), transparent 62%),
    radial-gradient(760px 300px at 4% 108%, rgba(123, 63, 158, .07), transparent 55%),
    linear-gradient(135deg, #edf4e9 0%, #f6faf4 52%, #eef5ec 100%);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.hero__eyebrow{
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-bright);
  margin: 0 0 var(--space-3);
}
.hero__title{
  max-width: 26ch;
  margin: 0 auto var(--space-4);
  font-size: clamp(30px, 5vw, 46px);
  font-weight: var(--weight-semibold);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-wrap: balance;
}
.hero__title em{ color: var(--accent); font-style: italic; }
.hero__lead{
  max-width: 66ch;
  margin: 0 auto var(--space-6);
  font-size: var(--text-lg);
  line-height: 1.85;
  color: var(--muted);
}
.hero__badges{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 auto var(--space-6);
  max-width: 880px;
}
.hero__badge{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-num);
  font-variant-numeric: var(--num-variant);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.hero__badge small{
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--muted);
}
.hero__cta{ display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
@media (max-width: 640px){
  .hero{ padding-top: 40px; text-align: left; }
  .hero__cta{ justify-content: flex-start; }
  .hero__badges{ justify-content: flex-start; }
}