/* ============================================================
   示例零售集团知识库 — 共享样式基础
   响应式 · 暗色模式 · 无障碍 · 动效 · 组件
   ============================================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
  /* 颜色体系 */
  --color-bg: #f0f4f8;
  --color-surface: #ffffff;
  --color-text: #1e293b;
  --color-text-secondary: #64748b;
  --color-text-muted: #64748b;
  --color-border: #e2e8f0;
  --domain-color: #2563eb;
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-light: #eff6ff;
  --color-success: #059669;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-header-bg: linear-gradient(160deg, #0f2b4a 0%, #1e4d8c 60%, #2563eb 100%);

  /* 域主题色 */
  --color-purchase: #0891b2;
  --color-ops: #d97706;
  --color-finance: #059669;
  --color-marketing: #db2777;
  --color-master: #2563eb;
  --color-infra: #4b5563;
  --color-distribution: #15803d;
  --color-deep: #334155;

  /* 排版 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Consolas", monospace;
  --font-size-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
  --font-size-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --font-size-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --font-size-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --font-size-3xl: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);

  /* 间距 */
  --space-xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem);
  --space-sm: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
  --space-md: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
  --space-lg: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  --space-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --space-2xl: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  --space-3xl: clamp(2.5rem, 2rem + 2vw, 4rem);

  /* 圆角 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* 阴影 */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.1);

  /* 动效 */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* 布局 */
  --content-max: 980px;
  --header-height: auto;
}

/* ---------- 暗色模式 ---------- */
[data-theme="dark"] {
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-text: #e2e8f0;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #7e8ca0;
  --color-border: #334155;
  --color-accent: #60a5fa;
  --color-distribution: #4ade80;
  --color-accent-hover: #93bbfd;
  --color-accent-light: #1e3a5f;
  --color-header-bg: linear-gradient(160deg, #020617 0%, #0f172a 60%, #1e293b 100%);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 全局键盘聚焦可见样式（无障碍）：链接/按钮/可聚焦元素获得清晰轮廓 */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 标题换行更均衡，避免孤字/断行难看 */
h1, h2 { text-wrap: balance; }

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  transition: background var(--duration-normal) var(--ease-out-expo),
              color var(--duration-normal) var(--ease-out-expo);
}

@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;
  }
}

/* ---------- 布局容器 ---------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-md);
  }
}

/* ---------- Header ---------- */
.site-header {
  background: var(--color-header-bg);
  color: #fff;
  padding: var(--space-3xl) 0 var(--space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.site-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
}

.site-header h1 {
  font-size: clamp(1.5rem, 1.35rem + 0.7vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-sm);
}

.site-header p {
  font-size: var(--font-size-base);
  opacity: 0.85;
  max-width: 560px;
  margin: 0 auto;
}

/* 眉标：编辑式小标签，置于 hero 标题上方（由 common.js 按页面注入） */
.eyebrow {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--domain-color);
  margin-bottom: var(--space-sm);
}

/* 领读段：章节/正文前的摘要句 */
.lead {
  font-size: var(--font-size-lg);
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-xl);
  max-width: 64ch;
}

@media (max-width: 640px) {
  .site-header {
    padding: var(--space-2xl) 0 var(--space-lg);
  }
  .site-header::after { width: 40px; }
}

/* ---------- 面包屑 ---------- */
.breadcrumb {
  padding: var(--space-md) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--duration-fast);
}

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

.breadcrumb span {
  color: var(--color-text-muted);
}

/* ---------- 分区标题 ---------- */
.section-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-2xl) 0 var(--space-lg);
  padding-left: var(--space-md);
  border-left: 5px solid var(--color-accent);
  letter-spacing: -0.01em;
  transition: border-color var(--duration-normal);
}

/* ---------- 卡片基础 ---------- */
/* 入口卡片统一：.card / .domain-card / .deep-card 三套同构卡片共享基础视觉 */
.card, .domain-card, .deep-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal) var(--ease-out-expo),
              border-color var(--duration-normal);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}

.card:hover, .domain-card:hover, .deep-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.card:focus-visible, .domain-card:focus-visible, .deep-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

.card:active, .domain-card:active, .deep-card:active {
  transform: translateY(-1px) scale(0.99);
}

@media (hover: none) {
  .card:hover, .domain-card:hover, .deep-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
  .card:active, .domain-card:active, .deep-card:active {
    transform: scale(0.98);
  }
}

/* ---------- 卡片网格 ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 640px) {
  .card-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* ---------- 标签 ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

.tag-system { background: #e0f2fe; color: #0369a1; }
.tag-pain { background: #fee2e2; color: #b91c1c; }
.tag-ok { background: #dcfce7; color: #15803d; }
.tag-warn { background: #fef3c7; color: #92400e; }
.tag-master { background: var(--color-accent-light); color: var(--color-accent); }

[data-theme="dark"] .tag-system { background: #0c4a6e; color: #7dd3fc; }
[data-theme="dark"] .tag-pain { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .tag-ok { background: #052e16; color: #86efac; }
[data-theme="dark"] .tag-warn { background: #451a03; color: #fcd34d; }

/* ---------- 暗色模式切换按钮 ---------- */
.theme-toggle {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: 1000;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}

.theme-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

[data-theme="dark"] .theme-toggle {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 640px) {
  .theme-toggle {
    top: var(--space-md);
    right: var(--space-md);
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

/* ---------- 回到顶部按钮 ---------- */
.back-to-top {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  z-index: 999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out-expo),
              transform var(--duration-normal) var(--ease-out-expo),
              background var(--duration-fast);
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--color-accent-hover);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .back-to-top {
    bottom: var(--space-md);
    right: var(--space-md);
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

/* ---------- 移动端导航 ---------- */
.mobile-nav-toggle {
  display: none;
  position: fixed;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 1001;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
}

.mobile-nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: transform var(--duration-normal) var(--ease-out-expo),
              opacity var(--duration-normal);
}

.mobile-nav-toggle.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.mobile-nav-toggle.active span:nth-child(2) {
  opacity: 0;
}
.mobile-nav-toggle.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  transition: opacity var(--duration-normal);
}

.mobile-nav-overlay.active {
  display: block;
  opacity: 1;
}

.mobile-nav-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 80vw;
  background: var(--color-surface);
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform var(--duration-normal) var(--ease-out-expo);
  overflow-y: auto;
  padding: var(--space-2xl) var(--space-lg);
  box-shadow: var(--shadow-xl);
}

.mobile-nav-panel.active {
  transform: translateX(0);
}

.mobile-nav-panel h3 {
  font-size: var(--font-size-lg);
  color: var(--color-text);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav-panel a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: background var(--duration-fast), color var(--duration-fast);
}

.mobile-nav-panel a:hover,
.mobile-nav-panel a:focus-visible {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.mobile-nav-panel a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.mobile-nav-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-md) 0;
}

@media (max-width: 768px) {
  .mobile-nav-toggle { display: flex; }
}

/* 桌面端始终隐藏移动导航面板 */
@media (min-width: 769px) {
  .mobile-nav-panel { display: none; }
  .mobile-nav-overlay { display: none; }
}

/* ---------- 跳跃链接（无障碍） ---------- */
.skip-link {
  position: fixed;
  top: -100%;
  left: var(--space-md);
  z-index: 10000;
  background: var(--color-accent);
  color: #fff;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--duration-fast);
}

.skip-link:focus {
  top: var(--space-md);
}

/* ---------- 入场动画 ---------- */
.js .animate-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

.animate-stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
.animate-stagger.visible > *:nth-child(2) { transition-delay: 80ms; }
.animate-stagger.visible > *:nth-child(3) { transition-delay: 160ms; }
.animate-stagger.visible > *:nth-child(4) { transition-delay: 240ms; }
.animate-stagger.visible > *:nth-child(5) { transition-delay: 320ms; }
.animate-stagger.visible > *:nth-child(6) { transition-delay: 400ms; }
.animate-stagger.visible > *:nth-child(7) { transition-delay: 480ms; }
.animate-stagger.visible > *:nth-child(8) { transition-delay: 560ms; }

.animate-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .animate-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 页脚 ---------- */
.site-footer {
  text-align: center;
  padding: var(--space-2xl) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

/* ---------- 可折叠章节 ---------- */
details.collapsible {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-md);
  transition: box-shadow var(--duration-normal);
}

details.collapsible:hover {
  box-shadow: var(--shadow-md);
}

details.collapsible summary {
  padding: var(--space-lg);
  font-weight: 600;
  font-size: var(--font-size-base);
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text);
  transition: background var(--duration-fast);
}

details.collapsible summary:hover {
  background: var(--color-accent-light);
}

details.collapsible summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

details.collapsible summary::after {
  content: '▾';
  font-size: var(--font-size-sm);
  transition: transform var(--duration-normal) var(--ease-out-expo);
  color: var(--color-text-muted);
}

details.collapsible[open] summary::after {
  transform: rotate(180deg);
}

details.collapsible .content {
  padding: 0 var(--space-lg) var(--space-lg);
}

/* ---------- 通知框 ---------- */
.callout {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  margin: var(--space-md) 0;
  font-size: var(--font-size-sm);
  border-left: 4px solid;
}

.callout-info {
  background: var(--color-accent-light);
  border-color: var(--color-accent);
  color: var(--color-text);
}

.callout-warn {
  background: #fef3c7;
  border-color: var(--color-warning);
  color: #92400e;
}

.callout-danger {
  background: #fee2e2;
  border-color: var(--color-danger);
  color: #b91c1c;
}

[data-theme="dark"] .callout-info { background: #1e3a5f; color: #e2e8f0; }
[data-theme="dark"] .callout-warn { background: #451a03; color: #fcd34d; }
[data-theme="dark"] .callout-danger { background: #450a0a; color: #fca5a5; }

/* ---------- 卡片子组件 ---------- */
/* icon-chip：入口卡片 emoji 统一圆角色块底，hover 轻微缩放旋转微交互 */
.card .icon, .domain-card .icon, .deep-card .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-md);
  background: var(--color-accent-light);
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: var(--space-md);
  transition: transform var(--duration-normal) var(--ease-out-expo), background var(--duration-normal);
}
.card:hover .icon, .domain-card:hover .icon, .deep-card:hover .icon {
  transform: scale(1.08) rotate(-3deg);
}
.card h3 { font-size: var(--font-size-lg); margin-bottom: var(--space-xs); color: var(--color-text); }
.card .desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-sm); }
.card .meta { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.card .ref { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--space-xs); }

/* ---------- 深度知识链接 ---------- */
.deep-links {
  margin-top: var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: background var(--duration-normal), box-shadow var(--duration-normal);
}
.deep-links h3 {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}
.deep-links a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.deep-links a:hover,
.deep-links a:focus-visible {
  background: var(--color-accent-light);
  color: var(--color-accent-hover);
}
.deep-links a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

[data-theme="dark"] .deep-links {
  box-shadow: var(--shadow-sm);
}

/* ---------- 阅读进度条 ---------- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--color-accent);
  z-index: 10000;
  width: 0%;
  transition: width 100ms linear;
}

/* ============================================================
   流程页组件（lifecycle / flow / point-card / param-table 等）
   ============================================================ */

/* ---------- 域色变量覆盖 ---------- */
.process-page--purchase { --domain-color: #0891b2; --domain-dark: #164e63; }
.process-page--ops      { --domain-color: #d97706; --domain-dark: #78350f; }
.process-page--finance  { --domain-color: #059669; --domain-dark: #064e3b; }
.process-page--marketing { --domain-color: #db2777; --domain-dark: #831843; }
.process-page--master   { --domain-color: #2563eb; --domain-dark: #1e3a5f; }
.process-page--infra    { --domain-color: #4b5563; --domain-dark: #1f2937; }
.process-page--return   { --domain-color: #ef4444; --domain-dark: #7f1d1d; }

/* ---------- 流程页 Header（域色渐变） ---------- */
.process-header {
  background: linear-gradient(135deg, var(--domain-dark) 0%, var(--domain-color) 100%);
  color: #fff;
  padding: var(--space-2xl) 0 var(--space-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.process-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
}

.process-header h1 {
  font-size: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xs);
}

.process-header .subtitle {
  font-size: var(--font-size-base);
  opacity: 0.85;
}

[data-theme="dark"] .process-header {
  background: linear-gradient(135deg, var(--domain-dark) 0%, var(--domain-color) 80%);
}

@media (max-width: 640px) {
  .process-header { padding: var(--space-xl) 0 var(--space-md); }
}

/* ---------- 生命周期导航 ---------- */
.lifecycle-nav {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  margin: var(--space-md) 0 var(--space-lg);
  box-shadow: var(--shadow-xs);
  scrollbar-width: thin;
}

.lifecycle-nav a {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.lifecycle-nav a:hover,
.lifecycle-nav a:focus-visible {
  background: var(--color-accent-light);
  color: var(--domain-color);
}

.lifecycle-nav a .num {
  display: inline-block;
  margin-right: 4px;
  font-weight: 700;
}

.lifecycle-nav a.active {
  background: var(--domain-color);
  color: #fff;
}

@media (max-width: 640px) {
  .lifecycle-nav { padding: var(--space-sm); gap: 4px; }
  .lifecycle-nav a { padding: 6px 10px; font-size: var(--font-size-xs); }
}

/* ---------- RMIS 参考标记 ---------- */
.rmis-ref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  margin-bottom: var(--space-md);
  border: 1px solid var(--domain-color);
  color: var(--domain-dark);
  background: var(--color-surface);
}

[data-theme="dark"] .rmis-ref {
  background: rgba(255,255,255,0.05);
  color: #e2e8f0;
  border-color: rgba(255,255,255,0.2);
}

/* ---------- 流程章节 ---------- */
.flow-section {
  margin-bottom: var(--space-2xl);
}

.flow-section h2 {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-md);
  padding-left: var(--space-md);
  border-left: 3px solid var(--domain-color);
}

.flow-section h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.lifecycle-section {
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.lifecycle-section h2 {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-md);
  padding-left: var(--space-md);
  border-left: 3px solid var(--domain-color);
}

.lifecycle-section h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: var(--space-md) 0 var(--space-sm);
}

/* ---------- 流程步骤 ---------- */
.flow-steps {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  flex-wrap: wrap;
}

.flow-step {
  background: linear-gradient(135deg, color-mix(in srgb, var(--domain-color, var(--master-color, #2563eb)) 10%, var(--color-surface)) 0%, var(--color-surface) 100%);
  border: 2px solid var(--domain-color, var(--master-color, #2563eb));
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: center;
  position: relative;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}

.flow-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.10);
}

/* 流程节点内角色标注 */
.flow-step .role {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--domain-color, var(--master-color, #2563eb));
  margin-top: 4px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--domain-color, var(--master-color, #2563eb)) 12%, var(--color-surface));
  border-radius: var(--radius-sm);
}

.flow-arrow {
  font-size: var(--font-size-xl);
  color: var(--domain-color, var(--master-color, #2563eb));
  padding-top: var(--space-sm);
  align-self: center;
  font-weight: 700;
  opacity: 0.6;
}

@media (max-width: 640px) {
  .flow-steps { flex-direction: column; gap: var(--space-xs); }
  .flow-arrow { display: none; }
  .flow-step { width: 100%; text-align: left; }
}

[data-theme="dark"] .flow-step {
  background: linear-gradient(135deg, color-mix(in srgb, var(--domain-color, var(--master-color, #2563eb)) 15%, var(--color-surface)) 0%, var(--color-surface) 100%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

[data-theme="dark"] .flow-step .role {
  background: color-mix(in srgb, var(--domain-color, var(--master-color, #2563eb)) 15%, var(--color-surface));
}

/* 主数据域流程节点：固定蓝色主调，覆盖 domain-color */
.master-page .flow-step {
  background: linear-gradient(135deg, var(--master-soft) 0%, var(--color-surface) 100%);
  border-color: var(--master-color);
}

.master-page .flow-step .role {
  color: var(--master-color);
  background: color-mix(in srgb, var(--master-color) 12%, var(--color-surface));
}

[data-theme="dark"] .master-page .flow-step {
  background: linear-gradient(135deg, #1e3a5f 0%, var(--color-surface) 100%);
}

[data-theme="dark"] .master-page .flow-step .role {
  color: var(--master-color);
  background: color-mix(in srgb, var(--master-color) 15%, var(--color-surface));
}

.master-page .flow-arrow {
  color: var(--master-color);
}

/* ---------- 业务关键点 ---------- */
.biz-points {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

@media (max-width: 640px) {
  .biz-points { grid-template-columns: 1fr; }
}

.point-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 2px solid transparent;
  transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
}

.point-card:hover {
  border-color: var(--domain-color);
  box-shadow: var(--shadow-md);
}

.point-card .point-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.point-card .point-header .icon {
  font-size: 1.5rem;
}

.point-card .point-header h3,
.point-card .point-header h4 {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.point-desc, .p-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.75;
  text-wrap: pretty;
  margin-bottom: var(--space-sm);
}

.point-meta, .p-meta {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

/* ---------- 参数表 ---------- */
.param-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  margin: var(--space-md) 0;
}

.param-table th {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-weight: 600;
  background: var(--color-accent-light);
  color: var(--domain-dark);
  border-bottom: 2px solid var(--color-border);
}

.param-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .param-table th {
  background: rgba(255,255,255,0.05);
  color: #e2e8f0;
}

[data-theme="dark"] .param-table td {
  color: var(--color-text-secondary);
}

@media (max-width: 640px) {
  .param-table { font-size: var(--font-size-xs); }
  .param-table th, .param-table td { padding: 6px 8px; }
}

/* ---------- 硬规则框 ---------- */
.hard-rules {
  background: #fefce8;
  border-left: 4px solid #eab308;
  padding: var(--space-md) var(--space-lg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: var(--space-lg);
}

.hard-rules h3 {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: #92400e;
  margin-bottom: var(--space-sm);
}

.hard-rules ul {
  list-style: none;
  padding-left: var(--space-md);
}

.hard-rules li {
  font-size: var(--font-size-sm);
  color: #78350f;
  padding: var(--space-xs) 0;
  position: relative;
  padding-left: 20px;
}

.hard-rules li::before {
  content: '⚠';
  position: absolute;
  left: 0;
  font-size: var(--font-size-xs);
}

[data-theme="dark"] .hard-rules {
  background: #451a03;
  border-color: #fcd34d;
  color: #fcd34d;
}

[data-theme="dark"] .hard-rules h3 { color: #fcd34d; }
[data-theme="dark"] .hard-rules li { color: #fcd34d; }

/* ---------- 相关阅读 ---------- */
.related-reading {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-lg);
}

.related-reading h4 {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.related-reading .sub-heading {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: var(--space-sm) 0 var(--space-xs);
}

.related-reading a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--domain-color);
  text-decoration: none;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast);
}

.related-reading a:hover {
  background: var(--color-accent-light);
}

/* ---------- 字段速查 ---------- */
.fields-overview {
  margin-bottom: var(--space-2xl);
}

.fields-overview h2 {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-md);
  padding-left: var(--space-md);
  border-left: 3px solid var(--domain-color);
}

/* 相关阅读标题：与章节标题节奏一致 */
.master-related h2 {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-top: var(--space-3xl);
  padding-top: var(--space-lg);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}

.fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-sm);
}

@media (max-width: 640px) {
  .fields-grid { grid-template-columns: 1fr 1fr; }
}

.field-item {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
}

.field-item .f-name {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.field-item .f-val {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-weight: 600;
}

.field-item a {
  display: block;
  padding: var(--space-sm);
  color: var(--domain-color);
  text-decoration: none;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast);
}

.field-item a:hover {
  background: var(--color-accent-light);
}

/* ---------- 经营方式卡片 ---------- */
.biz-mode {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (max-width: 640px) {
  .biz-mode { grid-template-columns: 1fr; }
}

.mode-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
  border: 2px solid transparent;
  transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
}

.mode-card:hover {
  border-color: var(--domain-color);
  box-shadow: var(--shadow-md);
}

.mode-name {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.mode-code {
  font-size: var(--font-size-sm);
  color: var(--domain-color);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.mode-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

[data-theme="dark"] .mode-desc { color: #94a3b8; }

/* ---------- 跨域流转 ---------- */
.cross-flow {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.cross-step {
  background: var(--color-surface);
  border: 2px solid var(--domain-color);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  transition: background var(--duration-fast), box-shadow var(--duration-fast);
}

.cross-step:hover {
  background: var(--color-accent-light);
  box-shadow: var(--shadow-sm);
}

.cross-step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--domain-color);
  color: #fff;
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: 700;
  flex-shrink: 0;
}

.cross-step .step-role {
  color: var(--color-text);
  font-weight: 600;
}

@media (max-width: 640px) {
  .cross-flow { flex-direction: column; }
  .cross-step { width: 100%; }
}

/* ---------- 状态时间线 ---------- */
.status-timeline {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.status-step {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  box-shadow: var(--shadow-xs);
  border-left: 4px solid var(--domain-color);
}

.status-step.active { border-left-color: var(--color-success); }
.status-step.expired { border-left-color: var(--color-danger); }
.status-step.pending { border-left-color: var(--color-warning); }

@media (max-width: 640px) {
  .status-timeline { flex-direction: column; }
}

/* ---------- 物流/收货/退货路径卡片 ---------- */
.logistics-grid, .receiving-modes, .return-routes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (max-width: 640px) {
  .logistics-grid, .receiving-modes, .return-routes {
    grid-template-columns: 1fr;
  }
}

.logistics-card, .mode-card, .route-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
  border: 2px solid transparent;
  transition: border-color var(--duration-normal);
}

.logistics-card:hover, .route-card:hover {
  border-color: var(--domain-color);
}

/* ---------- Badge（路径/方式标签） ---------- */
.badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.badge-direct { background: #dcfce7; color: #15803d; }
.badge-dc     { background: #e0f2fe; color: #0369a1; }

[data-theme="dark"] .badge-direct { background: #052e16; color: #86efac; }
[data-theme="dark"] .badge-dc     { background: #0c4a6e; color: #7dd3fc; }

/* ---------- 系统卡片 ---------- */
.sys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (max-width: 640px) {
  .sys-grid { grid-template-columns: 1fr; }
}

.sys-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
  border: 2px solid transparent;
  transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
}

.sys-card:hover { box-shadow: var(--shadow-md); }

.sys-core    { border-color: var(--color-accent); }
.sys-finance { border-color: var(--color-finance); }
.sys-weigh   { border-color: var(--color-ops); }
.sys-online  { border-color: var(--color-marketing); }

/* ---------- 数据链路卡片 ---------- */
.link-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (max-width: 640px) {
  .link-cards { grid-template-columns: 1fr; }
}

.link-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
  border-left: 4px solid;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
}

.link-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--domain-color, var(--color-accent));
}

.link-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.link-card h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-xs);
}

.link-card p, .link-card .link-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.link-warn   { border-left-color: var(--color-warning); }
.link-stable { border-left-color: var(--color-success); }
.link-info   { border-left-color: var(--color-accent); background: var(--color-accent-light); }
.link-info:hover { background: var(--color-surface); border-left-color: var(--color-accent); }

[data-theme="dark"] .link-info { background: var(--color-accent-light); }
[data-theme="dark"] .link-info:hover { background: var(--color-surface); }

/* ---------- 回链接 ---------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  color: var(--domain-color);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast);
}

.back-link:hover {
  background: var(--color-accent-light);
}

/* ---------- 补充 Tag ---------- */
.tag-owner { background: #f5f3ff; color: #7c3aed; }
.tag-info  { background: #ecfdf5; color: #059669; }
.tag-ext   { background: #fee2e2; color: #b91c1c; }
.tag-block { background: #fee2e2; color: #b91c1c; }
.tag-design { background: #ecfdf5; color: #059669; }

[data-theme="dark"] .tag-owner { background: #2e1065; color: #c4b5fd; }
[data-theme="dark"] .tag-info  { background: #052e16; color: #86efac; }
[data-theme="dark"] .tag-ext   { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .tag-block { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .tag-design { background: #052e16; color: #86efac; }

/* ---------- 流程页内容容器 ---------- */
.process-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

@media (max-width: 768px) {
  .process-content { padding: 0 var(--space-md); }
}

/* ============================================================
   主数据域专属样式（Master Data Domain）
   商品/供应商/合同三个主数据页使用域入口页设计语言：
   - 1200px 宽容器
   - 生命周期卡片概览
   - 生命周期详情板块卡片
   - 与 domain-*.html 视觉一致
   ============================================================ */

/* 主数据页变量 */
.master-page {
  --master-color: #2563eb;
  --master-dark: #1e3a5f;
  --master-soft: #eff6ff;
}

[data-theme="dark"] .master-page {
  --master-soft: #1e3a5f;
}

/* 主数据 Hero 头图 */
.master-hero {
  background: linear-gradient(135deg, var(--master-dark) 0%, var(--master-color) 100%);
  color: #fff;
  padding: var(--space-3xl) 0 var(--space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.master-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
}

.master-hero h1 {
  font-size: clamp(1.5rem, 1.35rem + 0.7vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-sm);
}

.master-hero .subtitle {
  font-size: var(--font-size-base);
  opacity: 0.85;
  max-width: 560px;
  margin: 0 auto;
}

[data-theme="dark"] .master-hero {
  background: linear-gradient(135deg, #0f1d30 0%, #1e4d8c 100%);
}

@media (max-width: 640px) {
  .master-hero { padding: var(--space-2xl) 0 var(--space-lg); }
  .master-hero::after { width: 40px; }
}

/* 主数据生命周期概览卡片 */
.master-overview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-lg);
  margin: var(--space-2xl) 0;
}

.master-overview-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
  display: block;
  border: 2px solid transparent;
  transition: transform var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal) var(--ease-out-expo),
              border-color var(--duration-normal);
  position: relative;
}

.master-overview-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--master-color);
}

.master-overview-card:focus-visible {
  outline: 2px solid var(--master-color);
  outline-offset: 2px;
}

.master-overview-card .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--master-color);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.master-overview-card h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

.master-overview-card .desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* 主数据生命周期详情板块 */
.master-detail {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-2xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-xl);
  border-top: 4px solid var(--master-color);
}

@media (max-width: 768px) {
  .master-detail { padding: var(--space-lg); }
}

.master-detail h2 {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-3xl);
  padding-top: var(--space-lg);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}

/* 章节编号 → 域色圆角胶囊 */
.master-detail h2 > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9em;
  height: 1.9em;
  padding: 0 0.45em;
  border-radius: 999px;
  background: var(--domain-color);
  color: #fff;
  font-size: 0.72em;
  font-weight: 700;
  flex: none;
}

.master-detail .rmis-ref {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

.master-detail h3 {
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
  font-weight: 600;
  margin: var(--space-xl) 0 var(--space-sm);
  color: var(--color-text);
}

/* 正文节奏：更松的行高 */
.master-detail p,
.master-detail li { line-height: 1.75; }

/* 主数据页内流程步骤增强 */
.master-detail .flow-steps {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.master-detail .flow-step {
  min-width: 140px;
  flex: 1 1 160px;
  max-width: 240px;
}

/* 主数据页内业务点卡片网格 */
.master-detail .biz-points {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
  gap: var(--space-lg);
}

/* 主数据核心字段卡片 */
.master-fields {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-2xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-xl);
}

.master-fields h2 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-lg);
  color: var(--color-text);
}

.master-fields .fields-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

/* 主数据相关阅读 */
.master-related {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-2xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-xl);
}

.master-related h2 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-lg);
  color: var(--color-text);
}

/* 主数据/流程页返回按钮（ghost pill，按域色自动渲染） */
.master-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border: 1.5px solid var(--domain-color);
  border-radius: 999px;
  color: var(--domain-color);
  background: transparent;
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-decoration: none;
  cursor: pointer;
  margin-top: var(--space-lg);
  transition: background-color var(--duration-fast), color var(--duration-fast),
              border-color var(--duration-fast), transform var(--duration-fast);
}

.master-back:hover {
  background: var(--domain-color);
  color: #fff;
  border-color: var(--domain-color);
  transform: translateY(-1px);
}

.master-back:focus-visible {
  outline: 2px solid var(--domain-color);
  outline-offset: 2px;
}

.master-back:active {
  transform: translateY(0);
}

[data-theme="dark"] .master-back {
  color: var(--domain-color);
  border-color: var(--domain-color);
}

[data-theme="dark"] .master-back:hover {
  background: var(--domain-color);
  color: #fff;
}

/* 主数据页内的 mode-card / cross-step 使用 --master-color 而非 --domain-color */
.master-page .mode-card { border-top: 3px solid var(--master-color); }
.master-page .mode-card:hover { border-color: var(--master-color); box-shadow: var(--shadow-md); }
.master-page .mode-code { color: var(--master-color); }

.master-page .cross-step { border-color: var(--master-color); }
.master-page .cross-step .step-num { background: var(--master-color); }
.master-page .cross-step:hover { background: var(--master-soft); }

[data-theme="dark"] .master-page .mode-card:hover { border-color: #93bbfd; }
[data-theme="dark"] .master-page .mode-code { color: #93bbfd; }
[data-theme="dark"] .master-page .cross-step { border-color: #93bbfd; }
[data-theme="dark"] .master-page .cross-step .step-num { background: #93bbfd; color: #0f172a; }
[data-theme="dark"] .master-page .cross-step:hover { background: #1e3a5f; }

/* ---------- 深度页域色变量 ---------- */
.deep-page--purchase  { --deep-color: #7c3aed; --deep-dark: #4c1d95; }
.deep-page--ops       { --deep-color: #d97706; --deep-dark: #78350f; }
.deep-page--finance   { --deep-color: #059669; --deep-dark: #064e3b; }
.deep-page--marketing { --deep-color: #db2777; --deep-dark: #831843; }
.deep-page--infra     { --deep-color: #334155; --deep-dark: #0f172a; }
.deep-page--trouble   { --deep-color: #dc2626; --deep-dark: #991b1b; }

/* ---------- 深度页 Header ---------- */
.deep-header {
  background: linear-gradient(135deg, var(--deep-dark) 0%, var(--deep-color) 100%);
  color: #fff;
  padding: var(--space-2xl) 0 var(--space-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.deep-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
}
.deep-header h1 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xs);
}
.deep-header .subtitle {
  font-size: var(--font-size-base);
  opacity: 0.85;
}
[data-theme="dark"] .deep-header {
  background: linear-gradient(135deg, var(--deep-dark) 0%, var(--deep-color) 80%);
}
@media (max-width: 640px) {
  .deep-header { padding: var(--space-xl) 0 var(--space-md); }
}

/* ---------- 深度页内容容器 ---------- */
.deep-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  flex: 1;
}
@media (max-width: 768px) {
  .deep-content { padding: 0 var(--space-md); }
}

/* ---------- 粘性 TOC 目录 ---------- */
.deep-toc {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin: var(--space-md) 0 var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.deep-toc h3 {
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}
.deep-toc ol {
  margin-left: var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.deep-toc ol li { margin-bottom: 4px; }
.deep-toc ol li a {
  color: var(--deep-color);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.deep-toc ol li a:hover { text-decoration: underline; }

/* ---------- 算法卡片 (algo-card / algo-block) ---------- */
.algo-card, .algo-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
}
.algo-card:hover, .algo-block:hover {
  border-color: var(--deep-color);
  box-shadow: var(--shadow-md);
}
.algo-card h3, .algo-block h3 {
  font-size: var(--font-size-lg);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.algo-card h3 .card-num, .algo-block .rmis-ref {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--deep-color);
  color: #fff;
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: 700;
  flex-shrink: 0;
}
.algo-block .rmis-ref {
  width: auto;
  height: auto;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  border: 1px solid var(--deep-color);
  color: var(--deep-dark);
  background: var(--color-surface);
}
.algo-card .card-subtitle, .algo-block .card-subtitle {
  font-size: var(--font-size-xs);
  color: var(--deep-color);
  margin-bottom: var(--space-md);
  background: var(--color-accent-light);
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
}
.algo-card p, .algo-block p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}
.algo-card ul, .algo-card ol, .algo-block ul, .algo-block ol {
  margin: var(--space-sm) 0 var(--space-sm) var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.algo-card ul li, .algo-card ol li, .algo-block ul li, .algo-block ol li {
  margin-bottom: 6px;
  line-height: 1.6;
}
.algo-card table, .algo-block table, .feature-card table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-md) 0;
  font-size: var(--font-size-sm);
}
.algo-card table th, .algo-block table th, .feature-card table th {
  background: var(--deep-dark);
  color: #e2e8f0;
  padding: var(--space-sm) var(--space-md);
  text-align: left;
}
.algo-card table td, .algo-block table td, .feature-card table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.algo-card table tr:hover td, .algo-block table tr:hover td, .feature-card table tr:hover td {
  background: var(--color-accent-light);
}
.algo-card table tr:nth-child(even) td, .algo-block table tr:nth-child(even) td, .feature-card table tr:nth-child(even) td {
  background: var(--color-bg);
}
[data-theme="dark"] .algo-card table th, [data-theme="dark"] .algo-block table th, [data-theme="dark"] .feature-card table th {
  background: rgba(255,255,255,0.08);
  color: #e2e8f0;
}

/* ---------- 公式框 ---------- */
.formula-box {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin: var(--space-sm) 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.8;
  overflow-x: auto;
}
.algo-block .formula {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin: var(--space-sm) 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.8;
}

/* ---------- 通知框变体 ---------- */
.note-box, .algo-block .note {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: #fefce8;
  border-left: 3px solid #eab308;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  margin-top: var(--space-sm);
}
.note-box strong { color: #78350f; }
.case-box {
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0;
  font-size: var(--font-size-sm);
  color: #92400e;
}
.case-box strong { color: #78350f; }
.warn-box {
  background: #fef2f2;
  border-left: 4px solid var(--color-danger);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0;
  font-size: var(--font-size-sm);
  color: #991b1b;
}
.warn-box strong { color: #7f1d1d; }
.info-box {
  background: var(--color-accent-light);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0;
  font-size: var(--font-size-sm);
  color: #1e40af;
}
.tip-box {
  background: #f0fdf4;
  border-left: 4px solid #16a34a;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0;
  font-size: var(--font-size-sm);
  color: #166534;
}
[data-theme="dark"] .note-box, [data-theme="dark"] .algo-block .note { background: #451a03; color: #fcd34d; }
[data-theme="dark"] .note-box strong { color: #fcd34d; }
[data-theme="dark"] .case-box { background: #451a03; color: #fcd34d; }
[data-theme="dark"] .case-box strong { color: #fcd34d; }
[data-theme="dark"] .warn-box { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .warn-box strong { color: #fca5a5; }
[data-theme="dark"] .info-box { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .tip-box { background: #052e16; color: #86efac; }

/* ---------- 代码框 ---------- */
.code-box {
  background: #1e293b;
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin: var(--space-sm) 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: #e2e8f0;
  line-height: 1.8;
  overflow-x: auto;
}
.code-box .comment { color: #94a3b8; }
.code-box .key { color: #fbbf24; }
.code-box .val { color: #34d399; }
.code-box .proc { color: #fbbf24; }
[data-theme="dark"] .code-box { background: #0f172a; }

/* ---------- 参数卡片网格 ---------- */
.param-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-sm);
  margin: var(--space-sm) 0;
}
.param-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
}
.param-card .param-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.param-card .param-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
@media (max-width: 640px) { .param-grid { grid-template-columns: 1fr; } }

/* ---------- 小卡片网格 (algo-block 内) ---------- */
.point-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.point-grid .point-card {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
}
.point-grid .point-card h4 {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin-bottom: 4px;
}
.point-grid .point-card p {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
@media (max-width: 640px) { .point-grid { grid-template-columns: 1fr; } }

/* ---------- 流程图 (process-flow) ---------- */
.process-flow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin: var(--space-sm) 0;
  font-size: var(--font-size-xs);
}
.process-flow .step {
  background: var(--color-accent-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  color: var(--color-text);
}
.process-flow .step strong { display: block; font-size: var(--font-size-sm); margin-bottom: 2px; }
.process-flow .step span { color: var(--deep-color); }
.process-flow .arrow { color: var(--deep-color); font-weight: 700; font-size: var(--font-size-lg); }
@media (max-width: 640px) {
  .process-flow { flex-direction: column; }
  .process-flow .arrow { display: none; }
  .process-flow .step { width: 100%; text-align: left; }
}

/* ---------- 时间线 ---------- */
.timeline {
  position: relative;
  padding-left: var(--space-lg);
  margin: var(--space-sm) 0;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}
.timeline-item {
  position: relative;
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 4px;
  width: 10px;
  height: 10px;
  background: var(--deep-color);
  border-radius: 50%;
}
.timeline-item .time {
  font-weight: 700;
  color: var(--deep-color);
  margin-bottom: 2px;
}
.timeline-item .desc { color: var(--color-text-secondary); }

/* ---------- 流程盒子 (flow-box) ---------- */
.flow-box {
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin: var(--space-sm) 0;
}
.flow-box .flow-item {
  display: inline-block;
  background: var(--deep-dark);
  color: #e2e8f0;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  margin: 4px 6px 4px 0;
}
.flow-box .flow-arrow {
  display: inline-block;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: 0 2px;
}

/* ---------- 故障排查卡片 ---------- */
.trouble-card, .issue-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
}
.issue-block { border-left: 4px solid var(--deep-color); }
.trouble-card:hover, .issue-block:hover {
  border-color: var(--deep-color);
  box-shadow: var(--shadow-md);
}
.trouble-card h3, .issue-block h3 {
  font-size: var(--font-size-lg);
  color: var(--deep-dark);
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.trouble-card h3 .card-icon { font-size: 1.25rem; }
.trouble-card .card-subtitle {
  font-size: var(--font-size-xs);
  color: var(--deep-color);
  margin-bottom: var(--space-md);
  background: var(--color-accent-light);
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
}
.issue-block .symptom {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}
.issue-block .symptom strong { color: var(--deep-color); }

/* ---------- 症状框 ---------- */
.trouble-card .symptom {
  background: var(--color-accent-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
}
.trouble-card .symptom strong { color: var(--deep-dark); }
.trouble-card .symptom p { font-size: var(--font-size-sm); color: var(--color-text); margin: 0; }

/* ---------- 排查步骤 ---------- */
.trouble-card .steps, .step-list {
  margin-bottom: var(--space-sm);
}
.trouble-card .steps h4, .issue-block .step-list {
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}
.trouble-card .steps ol, .step-list {
  margin: 0 0 0 var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.trouble-card .steps ol li, .step-list li {
  margin-bottom: 6px;
  line-height: 1.5;
}
.trouble-card .steps ol li code, .step-list li code {
  background: var(--color-bg);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: var(--font-size-xs);
  color: var(--deep-color);
}
.step-list li strong { color: var(--color-text); }

/* ---------- 原因/修复双列 ---------- */
.cause-fix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}
.cause-fix .cause, .cause-fix .fix {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
}
.cause-fix .cause h4 { font-size: var(--font-size-sm); color: #b45309; margin-bottom: 6px; }
.cause-fix .fix h4 { font-size: var(--font-size-sm); color: var(--color-success); margin-bottom: 6px; }
.cause-fix .cause ul, .cause-fix .fix ul {
  margin: 0 0 0 var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}
.cause-fix .cause ul li, .cause-fix .fix ul li { margin-bottom: 3px; }
@media (max-width: 640px) { .cause-fix { grid-template-columns: 1fr; } }

/* ---------- 特性卡片 (feature-card) ---------- */
.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
}
.feature-card:hover {
  border-color: var(--deep-color);
  box-shadow: var(--shadow-md);
}
.feature-card h3 {
  font-size: var(--font-size-lg);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.feature-card h3 .card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--deep-dark);
  color: #e2e8f0;
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: 700;
  flex-shrink: 0;
}
.feature-card .card-subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
  background: var(--color-bg);
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
}
.feature-card p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}
.feature-card ul, .feature-card ol {
  margin: var(--space-sm) 0 var(--space-sm) var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.feature-card ul li, .feature-card ol li { margin-bottom: 6px; line-height: 1.6; }

/* ---------- 索引页卡片网格 ---------- */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
@media (max-width: 640px) { .topic-grid { grid-template-columns: 1fr; } }
.topic-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: inherit;
  display: block;
  border: 2px solid transparent;
  transition: transform var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal), border-color var(--duration-normal);
}
.topic-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--deep-color);
}
.topic-card:focus-visible {
  outline: 2px solid var(--deep-color);
  outline-offset: 2px;
}
.topic-card .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-md);
  background: var(--color-accent-light);
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: var(--space-md);
  transition: transform var(--duration-normal) var(--ease-out-expo), background var(--duration-normal);
}
.topic-card:hover .icon { transform: scale(1.08) rotate(-3deg); }
.topic-card h3 { font-size: var(--font-size-base); margin-bottom: var(--space-xs); color: var(--color-text); }
.topic-card .desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-sm); }
.topic-card .meta { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
@media (hover: none) {
  .topic-card:hover { transform: none; box-shadow: var(--shadow-xs); }
}

/* ---------- 索引页分区标题变体 ---------- */
.section-title-ops { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-text); margin: var(--space-xl) 0 var(--space-md); padding-left: var(--space-md); border-left: 5px solid var(--color-ops); }
.section-title-finance { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-text); margin: var(--space-xl) 0 var(--space-md); padding-left: var(--space-md); border-left: 5px solid var(--color-finance); }
.section-title-marketing { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-text); margin: var(--space-xl) 0 var(--space-md); padding-left: var(--space-md); border-left: 5px solid var(--color-marketing); }

/* ---------- 深度页 tag 变体 ---------- */
.tag-algo { background: #f5f3ff; color: #7c3aed; }
.tag-new { background: #ecfdf5; color: #059669; }
.tag-opt { background: #eff6ff; color: #2563eb; }
.tag-fix { background: #fef2f2; color: #dc2626; }
.tag-features { background: #f1f5f9; color: #334155; }
.tag-debug { background: #fef2f2; color: #dc2626; }
.tag-guide { background: #fefce8; color: #ca8a04; }
.tag-process { background: #eff6ff; color: #2563eb; }
.tag-infra { background: #f3f4f6; color: #4b5563; }
.tag-data { background: #eef2ff; color: #4338ca; }
[data-theme="dark"] .tag-algo { background: #2e1065; color: #c4b5fd; }
[data-theme="dark"] .tag-new { background: #052e16; color: #86efac; }
[data-theme="dark"] .tag-opt { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .tag-fix { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .tag-features { background: #1e293b; color: #cbd5e1; }
[data-theme="dark"] .tag-debug { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .tag-guide { background: #451a03; color: #fcd34d; }
[data-theme="dark"] .tag-process { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .tag-infra { background: #1f2937; color: #9ca3af; }
[data-theme="dark"] .tag-data { background: #312e81; color: #a5b4fc; }

/* ---------- 深度页补充 tag ---------- */
.tag-formula { background: #fefce8; color: #ca8a04; }
.tag-concept { background: #ecfdf5; color: #059669; }
.tag-domain { background: #eff6ff; color: #2563eb; }
.tag-ops { background: #fff7ed; color: #ea580c; }
.tag-finance { background: #ecfdf5; color: #059669; }
.tag-marketing { background: #fdf2f8; color: #be185d; }
.tag-purchase { background: #ecfeff; color: #0891b2; }

[data-theme="dark"] .tag-formula { background: #451a03; color: #fcd34d; }
[data-theme="dark"] .tag-concept { background: #052e16; color: #86efac; }
[data-theme="dark"] .tag-domain { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .tag-ops { background: #431407; color: #fdba74; }
[data-theme="dark"] .tag-finance { background: #052e16; color: #86efac; }
[data-theme="dark"] .tag-marketing { background: #831843; color: #f9a8d4; }
[data-theme="dark"] .tag-purchase { background: #083344; color: #67e8f9; }

/* ---------- 深度页 section-title 使用域色 ---------- */
body[class*="deep-page--"] .section-title {
  border-left-color: var(--deep-color);
}

/* ---------- 深度页关联阅读/返回链接 ---------- */
.deep-related {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-xs);
  margin: var(--space-lg) 0 var(--space-xl);
}
.deep-related h4 {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}
.deep-related a {
  display: inline-block;
  margin-right: var(--space-md);
  color: var(--deep-color);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--duration-fast);
}
.deep-related a:hover { text-decoration: underline; }
.deep-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--deep-color);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast);
}
.deep-back:hover { background: var(--color-accent-light); }

/* ============================================================
   P5–P10 增强样式（站内搜索 / 表格响应式 / 代码复制 / TOC / 灯箱）
   ============================================================ */

/* 标题锚点偏移已在文件末尾统一设定，此处不再重复 */

/* ---------- P6 表格响应式 ---------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-md) 0;
  border-radius: var(--radius-md);
}
.table-wrap > table { margin: 0; }
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }

/* ---------- P6 内联代码 + 点击复制 ---------- */
code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--color-accent-light);
  color: var(--color-accent);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--duration-fast), box-shadow var(--duration-fast);
  word-break: break-word;
}
code:hover { box-shadow: 0 0 0 2px var(--color-accent); }
code.copied { background: #dcfce7; color: #166534; }
[data-theme="dark"] code.copied { background: #052e16; color: #86efac; }

/* ---------- P5 搜索触发按钮（固定右上，紧贴主题按钮左侧） ---------- */
.search-toggle {
  position: fixed;
  top: var(--space-lg);
  right: calc(var(--space-lg) + 52px);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}
.search-toggle:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-1px); }
.search-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.search-toggle__icon { font-size: 1.1rem; line-height: 1; }
.search-toggle__label { white-space: nowrap; }

/* ---------- P5 搜索模态框 ---------- */
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--space-xl) + 2rem) var(--space-md) var(--space-md);
}
.search-modal[hidden] { display: none; }
.search-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
.search-modal__panel {
  position: relative;
  width: min(640px, 100%);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  animation: searchPop 160ms ease-out;
}
@keyframes searchPop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.search-modal__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.search-modal__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1.05rem;
  color: var(--color-text);
}
.search-modal__input::placeholder { color: var(--color-text-muted); }
.search-modal__close {
  flex: none;
  border: none;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.search-modal__close:hover { background: var(--color-accent-light); color: var(--color-text); }
.search-modal__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.search-filter {
  --chip-color: #64748b;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.search-filter:hover { border-color: var(--chip-color); color: var(--color-text); }
.search-filter.is-active { background: var(--chip-color); border-color: var(--chip-color); color: #fff; }
.search-modal__results { list-style: none; margin: 0; padding: var(--space-xs); overflow-y: auto; }
.search-modal__empty { padding: var(--space-xl); text-align: center; color: var(--color-text-muted); }
.search-result { border-radius: var(--radius-md); }
.search-result.is-selected { background: var(--color-accent-light); }
.search-result__link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md);
}
.search-result__top { display: flex; align-items: center; gap: var(--space-sm); }
.search-result__title { font-weight: 700; font-size: 0.98rem; color: var(--color-text); }
.search-result__chip {
  margin-left: auto;
  font-size: 0.72rem;
  padding: 1px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--chip-color, #64748b);
  white-space: nowrap;
}
.search-result__section { font-size: 0.82rem; color: var(--color-text-secondary); margin-top: 2px; }
.search-result__excerpt { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 3px; line-height: 1.5; }
.search-result mark, mark {
  background: rgba(245, 158, 11, 0.35);
  color: inherit;
  padding: 0 1px;
  border-radius: 3px;
}

/* ---------- P8 目录（TOC）浮动按钮 + 弹层 ---------- */
.toc-fab {
  position: fixed;
  left: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}
.toc-fab:hover { border-color: var(--color-accent); color: var(--color-accent); }
.toc-panel {
  position: fixed;
  left: var(--space-lg);
  bottom: calc(var(--space-lg) + 48px);
  z-index: 901;
  width: min(280px, calc(100vw - 2 * var(--space-lg)));
  max-height: 60vh;
  overflow-y: auto;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  padding: var(--space-sm);
}
.toc-panel[hidden] { display: none; }
.toc-panel a {
  display: block;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.85rem;
  border-left: 3px solid transparent;
}
.toc-panel a:hover { background: var(--color-accent-light); color: var(--color-text); }
.toc-panel a.toc-h3 { padding-left: 22px; font-size: 0.8rem; }
.toc-panel a.is-active { border-left-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-light); }

/* ---------- P8 图片灯箱（当前站点无图片，预留通用能力） ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.82);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius-md); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); }

/* ---------- 响应式：搜索按钮在窄屏只显示图标 ---------- */
@media (max-width: 640px) {
  .search-toggle {
    top: var(--space-md);
    right: calc(var(--space-md) + 48px);
    height: 40px;
    padding: 0 11px;
  }
  .search-toggle__label { display: none; }
}

/* ============================================================
   内容驱动版式优化（2026-07-18 追加）
   让参数表 / 流程图 / 业务点卡片 / 正文阅读更清晰，并补充打印（分享为 PDF）样式。
   本块为追加规则，不改动上方基础定义；相同特异性下后写者生效。
   ============================================================ */

/* ---- 1. 表格：提升数据可读性 ---- */
/* 普通 <table>（非 .param-table）也获得基础样式，避免裸表 */
table:not(.param-table) {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  margin: var(--space-md) 0;
}
table:not(.param-table) th,
table:not(.param-table) td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
table:not(.param-table) th {
  background: var(--color-accent-light);
  font-weight: 600;
  color: var(--color-text);
}

/* 参数表：数据文字加深 + 数字等宽 + 斑马纹 + 行 hover */
.param-table th {
  color: var(--domain-dark, var(--color-text));
}
.param-table td {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.param-table tr:nth-child(even) td {
  background: color-mix(in srgb, var(--color-text) 4%, var(--color-surface));
}
.param-table tr:hover td {
  background: color-mix(in srgb, var(--domain-color, #2563eb) 8%, var(--color-surface));
}

/* ---- 2. 流程图：节点均分、连接更清晰 ---- */
.flow-steps { gap: var(--space-md); }
.flow-step {
  flex: 1 1 160px;
  min-width: 140px;
}
.flow-arrow { opacity: 0.75; }

@media (max-width: 640px) {
  .flow-steps { gap: var(--space-xs); }
  .flow-step { flex: 1 1 auto; }
}

/* ---- 3. 业务点卡片：左侧域色强调线，强化重点/风险视觉锚点 ---- */
.point-card {
  border-left: 4px solid color-mix(in srgb, var(--domain-color, #2563eb) 45%, var(--color-border));
}
.point-card:hover {
  border-left-color: var(--domain-color, #2563eb);
}

/* ---- 4. 阅读排版：锚点跳转不被遮挡 + 中文更顺 ---- */
h1, h2, h3, h4 {
  scroll-margin-top: 84px;
}
.master-detail p,
.master-detail li {
  text-wrap: pretty;
}

/* ---- 5. 打印 / 分享为 PDF：隐藏交互控件，保留配色，避免断页 ---- */
@media print {
  .theme-toggle,
  .mobile-nav-toggle,
  .mobile-nav-panel,
  .mobile-nav-overlay,
  .back-to-top,
  .reading-progress { display: none !important; }

  html, body {
    background: #fff !important;
    color: #000 !important;
  }
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .master-hero,
  .site-header,
  .master-detail,
  .point-card,
  .param-table th,
  .flow-step,
  .link-card,
  .domain-card,
  .deep-card,
  .master-overview-card {
    box-shadow: none !important;
  }
  .master-detail,
  .point-card,
  .link-card,
  .domain-card,
  .deep-card,
  .master-overview-card,
  .table-wrap,
  .arch-flow,
  .biz-points {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  a { color: #000 !important; text-decoration: underline; }
  .master-detail { border-top: 4px solid var(--domain-color, #2563eb) !important; }
}