/* ============================================================
   diffusion-inference 共享样式表
   适用范围：docs/ 下所有 HTML 页面
   设计约束：零外部依赖（无 CDN/webfont/npm），纯 CSS
   主题：浅色（默认）+ 深色（prefers-color-scheme）
   兼容：docs/02_老引擎审计.html、docs/03_现代diffusion推理最小背景.html
   ============================================================ */

/* ---------- CSS 自定义属性（设计令牌）---------- */
:root {
  color-scheme: light dark;
  /* 浅色主题 */
  --color-bg:            #fafafa;
  --color-bg-card:       #ffffff;
  --color-bg-code:       #f4f4f4;
  --color-bg-nav:        #1a1a2e;
  --color-text:          #1a1a1a;
  --color-text-secondary:#555555;
  --color-text-muted:    #888888;
  --color-accent:        #2563eb;
  --color-accent-hover:  #1d4ed8;
  --color-accent-subtle: #dbeafe;
  --color-border:        #e0e0e0;
  --color-border-light:  #eeeeee;
  --color-table-stripe:  #f8f9fa;
  --color-table-header:  #eef1f5;
  --color-success:       #16a34a;
  --color-success-bg:    #dcfce7;
  --color-warning:       #d97706;
  --color-warning-bg:    #fef3c7;
  --color-danger:        #dc2626;
  --color-danger-bg:     #fee2e2;
  --color-info:          #0891b2;
  --color-info-bg:       #cffafe;
  --color-tag:           #6366f1;
  --color-tag-bg:        #e0e7ff;

  /* 排版 */
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", "JetBrains Mono", "Source Code Pro", Consolas, monospace;
  --font-size-base:      16px;
  --font-size-sm:        14px;
  --font-size-xs:        13px;
  --font-size-h1:        2.0rem;
  --font-size-h2:        1.5rem;
  --font-size-h3:        1.25rem;
  --font-size-h4:        1.1rem;

  /* 间距 */
  --spacing-xs:          0.25rem;
  --spacing-sm:          0.5rem;
  --spacing-md:          1rem;
  --spacing-lg:          1.5rem;
  --spacing-xl:          2rem;
  --spacing-2xl:         3rem;

  /* 圆角 */
  --radius-sm:           4px;
  --radius-md:           8px;
  --radius-lg:           12px;

  /* 阴影 */
  --shadow-sm:           0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:           0 4px 12px rgba(0,0,0,0.1);

  /* 布局 */
  --nav-height:          56px;
  --content-max-width:   900px;

  /* 兼容旧页面使用的变量名 */
  --accent:              var(--color-accent);
  --accent-bg:           var(--color-accent-subtle);
  --border:              var(--color-border);
  --bg-secondary:        var(--color-bg-code);
  --bg-tertiary:         var(--color-bg-card);
  --text-secondary:      var(--color-text-secondary);
}

/* ---------- 深色主题 ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:            #0f1117;
    --color-bg-card:       #1a1b26;
    --color-bg-code:       #1e2030;
    --color-bg-nav:        #0d0e14;
    --color-text:          #e0e0e0;
    --color-text-secondary:#a0a0b0;
    --color-text-muted:    #6c6c80;
    --color-accent:        #60a5fa;
    --color-accent-hover:  #93bbfd;
    --color-accent-subtle: #1e2946;
    --color-border:        #333348;
    --color-border-light:  #252540;
    --color-table-stripe:  #1e2030;
    --color-table-header:  #252540;
    --color-success:       #4ade80;
    --color-success-bg:    #0e2918;
    --color-warning:       #fbbf24;
    --color-warning-bg:    #2d2106;
    --color-danger:        #f87171;
    --color-danger-bg:     #2d0a0a;
    --color-info:          #22d3ee;
    --color-info-bg:       #0a2e2e;
    --color-tag:           #a78bfa;
    --color-tag-bg:        #1e1e3a;
    --shadow-sm:           0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:           0 4px 12px rgba(0,0,0,0.4);
  }
}

/* ---------- 重置与基础 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--nav-height);
}

/* ---------- 导航栏 ---------- */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background: var(--color-bg-nav);
  color: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-xl);
  box-shadow: var(--shadow-md);
}

.top-nav a {
  color: #c8d2e0;
  text-decoration: none;
  font-size: var(--font-size-sm);
  margin-right: var(--spacing-lg);
  transition: color 0.2s;
}

.top-nav a:hover {
  color: #ffffff;
}

.top-nav .nav-title {
  font-weight: 700;
  font-size: var(--font-size-h4);
  color: #ffffff;
  margin-right: auto;
}

/* ---------- 主容器 ---------- */
main {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-xl);
}

/* ---------- 标题 ---------- */
h1 {
  font-size: var(--font-size-h1);
  font-weight: 800;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--color-accent);
  color: var(--color-text);
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: 700;
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text);
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: 600;
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}

h4 {
  font-size: var(--font-size-h4);
  font-weight: 600;
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-secondary);
}

/* ---------- 段落与内联 ---------- */
p {
  margin-bottom: var(--spacing-md);
}

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-accent-hover);
}

strong {
  font-weight: 700;
  color: var(--color-text);
}

em {
  font-style: italic;
}

/* ---------- 区块引用 ---------- */
blockquote {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  border-left: 4px solid var(--color-accent);
  background: var(--color-accent-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

blockquote p:last-child {
  margin-bottom: 0;
}

figure {
  color: var(--color-text);
}

figcaption {
  color: var(--color-text-secondary) !important;
}

.code-block,
.code-block code,
.conclusion-box,
.conclusion-box p,
.conclusion-box li,
.relation-box,
.relation-box p,
.relation-box li,
.note,
.note strong,
.note code,
.comparison-table th,
.shape-table th {
  color: var(--color-text);
}

.comparison-table td,
.shape-table td {
  color: var(--color-text-secondary);
}

/* ---------- 水平线 ---------- */
hr {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: var(--spacing-xl) 0;
}

/* ---------- 列表 ---------- */
ul, ol {
  margin: var(--spacing-sm) 0 var(--spacing-md) var(--spacing-xl);
}

li {
  margin-bottom: var(--spacing-xs);
}

li > ul, li > ol {
  margin-top: var(--spacing-xs);
  margin-bottom: 0;
}

/* ---------- 表格 ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-md) 0 var(--spacing-lg);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

thead {
  background: var(--color-table-header);
}

th {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  font-weight: 700;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
}

tbody tr:nth-child(even) {
  background: var(--color-table-stripe);
}

tbody tr:hover {
  background: var(--color-accent-subtle);
}

/* ---------- 代码 ---------- */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background: var(--color-bg-code);
  border-radius: var(--radius-sm);
  color: var(--color-tag);
  word-break: break-word;
}

pre {
  background: var(--color-bg-code);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  overflow-x: auto;
  margin: var(--spacing-md) 0 var(--spacing-lg);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

pre code {
  padding: 0;
  background: transparent;
  color: var(--color-text);
  font-size: inherit;
}

/* ---------- 章节容器（卡片式）---------- */
.section, .card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  box-shadow: var(--shadow-sm);
}

.section > h2:first-child,
.section > h3:first-child,
.card > h2:first-child,
.card > h3:first-child {
  margin-top: 0;
}

/* ---------- 标签/徽章 ---------- */
.tag, .badge {
  display: inline-block;
  padding: 0.15em 0.6em;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-sm);
  color: var(--color-tag);
  background: var(--color-tag-bg);
  margin-right: var(--spacing-xs);
}

.tag-success {
  color: var(--color-success);
  background: var(--color-success-bg);
}

.tag-warning {
  color: var(--color-warning);
  background: var(--color-warning-bg);
}

.tag-danger {
  color: var(--color-danger);
  background: var(--color-danger-bg);
}

.tag-info {
  color: var(--color-info);
  background: var(--color-info-bg);
}

/* ---------- 状态指示 ---------- */
.status-done {
  color: var(--color-success);
  font-weight: 700;
}

.status-pending {
  color: var(--color-text-muted);
}

.status-blocked {
  color: var(--color-danger);
  font-weight: 600;
}

/* ---------- 页脚 ---------- */
footer {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  margin-top: var(--spacing-2xl);
  border-top: 1px solid var(--color-border-light);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

footer a {
  color: var(--color-text-muted);
}

footer a:hover {
  color: var(--color-accent);
}

/* ---------- 元信息栏 ---------- */
.meta-bar {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  padding: var(--spacing-sm) 0;
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.meta-bar span {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
  :root {
    --font-size-h1: 1.5rem;
    --font-size-h2: 1.25rem;
    --font-size-h3: 1.1rem;
  }

  main {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .top-nav {
    padding: 0 var(--spacing-md);
  }

  .top-nav a {
    margin-right: var(--spacing-sm);
    font-size: var(--font-size-xs);
  }

  table {
    font-size: var(--font-size-xs);
  }

  th, td {
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}

/* ---------- 打印样式 ---------- */
@media print {
  .top-nav {
    position: static;
    background: none;
    color: var(--color-text);
    box-shadow: none;
    border-bottom: 1px solid var(--color-border);
  }

  .top-nav a {
    color: var(--color-accent);
  }

  body {
    padding-top: 0;
  }

  .section, .card {
    box-shadow: none;
    border: 1px solid var(--color-border);
  }
}