/* ============================================================
   visual-upgrade.css · TWCG 2026-10-30 桌面视觉升级共享层
   ------------------------------------------------------------
   依据：docs/design-spec.md（G2 后用户拍板：hero 常驻页首 /
   一主一次一文字 CTA / 深色页只换壳 / 不引入任何图标）。
   规则：
   1. 只做视觉层；不改 DOM 钩子（data-pg / page-block /
      data-breadcrumb / mgdb-ai）与业务 JS 行为。
   2. 颜色一律 var(--token, fallback)：未引入 design-tokens.css
      的页面自动走 fallback，值与设计规范一致。
   3. 深色画布页（hormone_network / defense）的一切规则都以
      body[data-page="hormone"] / body[data-page="defense"]
      作用域限定，不触碰画布 SVG / 节点 / 连线 / 图例颜色语义。
   4. 全站不新增图标、emoji、装饰图形。
   ============================================================ */

/* ---------- 0. 响应式 gutter（≥1280:40 / 1024–1279:32 / 640–1023:24 / <640:20） ---------- */
:root { --vu-gutter: 20px; }
@media (min-width: 640px)  { :root { --vu-gutter: 24px; } }
@media (min-width: 1024px) { :root { --vu-gutter: var(--container-gutter-compact, 32px); } }
@media (min-width: 1280px) { :root { --vu-gutter: var(--container-gutter, 40px); } }

/* ---------- 1. 首屏 Hero（常驻页首；全页唯一 H1） ---------- */
/* 基线 style.css 中遗留旧版 .hero 波段样式，这里用 .hero.vu-hero
   （更高特异度）全量覆盖：margin/padding/背景/对齐/底边。 */
.hero.vu-hero {
  margin: 0;
  padding: 0;
  background: var(--hero-bg, linear-gradient(165deg, #eef4e9 0%, #ffffff 52%, #f7f9f7 100%));
  border-bottom: 1px solid var(--border, #e1e8e3);
  text-align: left;
  scroll-margin-top: var(--nav-h, 60px);
}
.vu-hero__in {
  max-width: calc(var(--container-max, 1240px) + 2 * var(--vu-gutter));
  margin: 0 auto;
  padding: var(--hero-pad-top, 88px) var(--vu-gutter) var(--hero-pad-bottom, 80px);
}
.vu-hero__eyebrow {
  margin: 0 0 var(--space-4, 16px);
  font-size: var(--text-xs, 12px);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: var(--tracking-caps, 0.08em);
  text-transform: uppercase;
  color: var(--accent-bright, #4a7c12);
}
.vu-hero__title {
  margin: 0 0 20px;
  max-width: var(--hero-h1-max-w, 21ch);
  font-size: var(--text-4xl, 40px);
  font-weight: var(--weight-bold, 700);
  line-height: var(--leading-tight, 1.15);
  letter-spacing: var(--tracking-tight, -0.02em);
  color: var(--fg, #16201a);
}
.vu-hero__lead {
  margin: 0;
  max-width: var(--hero-lead-max-w, 62ch);
  font-size: var(--text-lg, 18px);
  line-height: var(--leading-relaxed, 1.75);
  color: var(--fg-2, #2f3d34);
}
.vu-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 12px);
  margin-top: var(--space-6, 32px);
}
.hero.vu-hero .btn { font-weight: var(--weight-semibold, 600); }
/* CTA-3 文字按钮：透明底 + 主色文字，热区 44px */
.vu-hero__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--hotzone-min, 44px);
  margin-left: var(--space-3, 12px);
  padding: 0 var(--space-3, 12px);
  border-radius: var(--radius-sm, 8px);
  font-size: var(--text-base, 14px);
  font-weight: var(--weight-semibold, 600);
  color: var(--accent, #2d5016);
  text-decoration: none;
  transition: background-color var(--motion-fast, 150ms) var(--ease-out, ease-out);
}
.vu-hero__link:hover { background: var(--accent-soft, #e8f5e9); color: var(--accent, #2d5016); text-decoration: none; }
.vu-hero__link:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(74, 124, 18, .28)); }

/* 首屏数据短标签：白芯片 + 左缘 3px 主色竖线；数字 mono 不进词典 */
.vu-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap-stat, 16px);
  margin: var(--space-7, 48px) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1024px) { .vu-hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vu-hero__stat {
  background: var(--stat-chip-bg, #ffffff);
  border: 1px solid var(--stat-chip-border, #e1e8e3);
  border-left: var(--stat-chip-rule, 3px solid #4a7c12);
  border-radius: var(--radius-sm, 8px);
  padding: var(--stat-chip-padding, 14px 20px);
}
.vu-hero__num {
  display: block;
  font-family: var(--font-num, var(--font-mono, monospace));
  font-variant-numeric: tabular-nums;
  font-size: var(--stat-chip-num-size, 28px);
  font-weight: var(--weight-semibold, 600);
  line-height: 1.2;
  color: var(--accent, #2d5016);
}
.vu-hero__label {
  display: block;
  margin-top: 2px;
  font-size: var(--stat-chip-label-size, 12px);
  color: var(--meta-strong, #68766c);
}
@media (max-width: 1023px) { .vu-hero__in { padding-top: 56px; padding-bottom: 56px; } }
@media (max-width: 639px) {
  .vu-hero__in { padding-top: 40px; padding-bottom: 40px; }
  .vu-hero__title { font-size: 30px; line-height: 1.2; }
  .vu-hero__lead { font-size: var(--text-md, 16px); }
}

/* ---------- 2. Tool Center 网格（≥1280 四列 / 1024–1279 两列，无空格子） ---------- */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap-tool, 24px);
  margin-top: var(--space-5, 24px);
}
@media (min-width: 1280px) { .tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tool-grid .tool-divider { grid-column: 1 / -1; margin: var(--space-2, 8px) 0; }
.tool-card--lead { grid-column: 1 / -1; }
.tool-card--wide { grid-column: span 2; }
@media (max-width: 639px) {
  .tool-grid { grid-template-columns: minmax(0, 1fr); }
  .tool-card--wide { grid-column: auto; }
}
/* 工具卡三行式：白底 1px 边 12px 圆角，静态无阴影；hover 上移 2px */
.tool-card { border-radius: var(--card-radius, 12px); box-shadow: none; }
.tool-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover, 0 1px 3px rgba(22, 32, 26, .08)); }
.tool-name { font-size: var(--text-lg, 18px); font-weight: var(--weight-semibold, 600); color: var(--fg, #16201a); }
a.tool-card:hover .tool-name { color: var(--accent, #2d5016); }

/* ---------- 3. 表格：容器内滚动 + 粘性表头（浅色 token 页） ---------- */
.table-scroll { overflow: auto; max-height: var(--table-scroll-max-h, 480px); }
.data-table { min-width: var(--table-min-width, 720px); }
.table-scroll thead th { position: sticky; top: 0; z-index: 2; }

/* ---------- 4. 表单控件统一（仅浅色工具页；高度/圆角，不改配色语义） ---------- */
body[data-page]:not([data-page="defense"]):not([data-page="hormone"]) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
body[data-page]:not([data-page="defense"]):not([data-page="hormone"]) select,
body[data-page]:not([data-page="defense"]):not([data-page="hormone"]) textarea {
  min-height: 44px;
  border-radius: var(--input-radius, 8px);
}

/* ---------- 5. 状态与页签微调 ---------- */
.ux-error { border-left: 4px solid var(--error-border, #dc2626); color: #b91c1c; text-align: left; }
.gd-tab { min-height: 44px; }
.gd-tab:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(74, 124, 18, .28)); }

/* ---------- 6. 浅色工具页版心统一（≥1024 收敛为 1240 版心 + 统一 gutter） ---------- */
@media (min-width: 1024px) {
  body[data-page]:not([data-page="defense"]):not([data-page="hormone"]) .wrap,
  body[data-page]:not([data-page="defense"]):not([data-page="hormone"]) .topbar,
  body[data-page]:not([data-page="defense"]):not([data-page="hormone"]) .crumb,
  body[data-page]:not([data-page="defense"]):not([data-page="hormone"]) .mode-tabs,
  body[data-page]:not([data-page="defense"]):not([data-page="hormone"]) .doc,
  body[data-page]:not([data-page="defense"]):not([data-page="hormone"]) .ref-section,
  body[data-page]:not([data-page="defense"]):not([data-page="hormone"]) .footer-note {
    max-width: calc(var(--container-max, 1240px) + 2 * var(--vu-gutter));
    padding-left: var(--vu-gutter);
    padding-right: var(--vu-gutter);
  }
}

/* ---------- 7. AI 面板（/#ai）：版心对齐 + 横向溢出守护 ---------- */
.ai-embed {
  max-width: calc(var(--container-max, 1240px) + 2 * var(--vu-gutter));
  padding-left: var(--vu-gutter, 20px);
  padding-right: var(--vu-gutter, 20px);
}
#twcg-immuno-ai { max-width: 100%; min-width: 0; }
#twcg-immuno-ai :is(p, li, h1, h2, h3, h4, td, th, div) { overflow-wrap: break-word; }
#twcg-immuno-ai pre { white-space: pre-wrap; overflow-x: auto; }

/* ---------- 8. 深色画布页外壳（只动壳；画布配色/节点/连线/图例语义零改动） ---------- */
/* 8.1 头部与工具条几何 */
body[data-page="hormone"] .hd,
body[data-page="defense"] .hd { padding: 20px var(--vu-gutter, 24px) 14px; }
body[data-page="hormone"] .tb,
body[data-page="defense"] .tb { padding: 8px var(--vu-gutter, 24px); }

/* 8.2 深色页全部控件：白色焦点环（沿用 --focus-ring-on-dark 语义） */
body[data-page="hormone"] .tb :is(button, select, input):focus-visible,
body[data-page="defense"] .tb :is(button, select, input):focus-visible,
body[data-page="hormone"] .panel :is(a, button):focus-visible,
body[data-page="defense"] .panel :is(a, button):focus-visible,
body[data-page="hormone"] .hd a:focus-visible,
body[data-page="hormone"] .ft :is(a, summary, button):focus-visible,
body[data-page="hormone"] summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-on-dark, 0 0 0 3px rgba(255, 255, 255, .55));
  border-radius: var(--radius-sm, 8px);
}

/* 8.3 分段切换：深色变体（底 6% 白 / 选中 14% 白 + 白字 600），热区 ≥44px */
body[data-page="hormone"] .seg,
body[data-page="defense"] .seg { background: rgba(255, 255, 255, .06); }
body[data-page="hormone"] .seg button,
body[data-page="defense"] .seg button {
  position: relative;
  min-height: 38px;
  padding: 8px 14px;
}
body[data-page="hormone"] .seg button::after,
body[data-page="defense"] .seg button::after { content: ""; position: absolute; inset: -3px; }
body[data-page="hormone"] .seg button.on,
body[data-page="defense"] .seg button.on {
  background: rgba(255, 255, 255, .14);
  color: var(--dark-shell-fg, #e8eef5);
  font-weight: 600;
}

/* 8.4 返回链接（hormone .tclink）：透明底描边按钮 */
body[data-page="hormone"] .tclink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--dark-shell-muted, #9fb0c0);
  background: transparent;
  border: 1px solid var(--dark-shell-btn-border, rgba(255, 255, 255, .28));
  transition: background-color var(--motion-fast, 150ms) ease-out, color var(--motion-fast, 150ms) ease-out;
}
body[data-page="hormone"] .tclink:hover {
  background: var(--dark-shell-btn-hover-bg, rgba(255, 255, 255, .08));
  color: var(--dark-shell-fg, #e8eef5);
  border-color: var(--dark-shell-btn-border, rgba(255, 255, 255, .28));
}

/* 8.5 图例区：统一 panel 底 + 1px 边（色块本身与文字说明不动） */
body[data-page="hormone"] .legend,
body[data-page="defense"] .legend {
  background: var(--dark-shell-panel, #111a24);
  border: 1px solid var(--dark-shell-border, #1d2733);
  border-radius: var(--radius-sm, 8px);
  padding: 10px 14px;
  margin: 10px 0 14px;
}

/* 8.6 页脚节奏（仅 hormone 自带 .ft；defense 用统一 .tft） */
body[data-page="hormone"] .ft { padding: 32px var(--vu-gutter, 24px) 48px; }

/* ---------- 9. reduced-motion 兜底 ---------- */
@media (prefers-reduced-motion: reduce) {
  .tool-card, .vu-hero__link, .tclink { transition: none; }
  .tool-card:hover { transform: none; }
}