/* ============================================================
   飞灵AI FeelingAI — 主样式文件
   主题通过 [data-theme="xxx"] 切换，CSS变量驱动
   ============================================================ */

/* ─── 主题变量 ──────────────────────────────────────────────── */
:root, [data-theme="blue-tech"] {
  --primary: #1a6fc4;
  --primary-dark: #0d47a1;
  --primary-light: #e8f0fe;
  --accent: #00b4d8;
  --bg: #f0f4f8;
  --bg-subtle: #e8f0fe;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --text: #1a2332;
  --text-muted: #5f6b7c;
  --border: #dde3ea;
  --hero-bg: linear-gradient(135deg, #1a2332 0%, #0d47a1 60%, #00b4d8 100%);
  --hero-text: #ffffff;
  --nav-bg: #ffffff;
  --nav-text: #1a2332;
  --nav-hover: #1a6fc4;
  --footer-bg: #1a2332;
  --footer-text: #c8d8e8;
  --card-shadow: 0 2px 12px rgba(26,111,196,.08);
  --ad-bg: #f0f4f8;
  --ad-border: #c0cfe0;
  --ad-text: #6080a0;
  --ad-price: #99b0cc;
  --font-body: 'PingFang SC','Noto Sans SC','Microsoft YaHei',system-ui,sans-serif;
  --font-heading: 'PingFang SC','Noto Sans SC','Microsoft YaHei',system-ui,sans-serif;
  --radius: 10px;
  --radius-lg: 16px;
}

[data-theme="dark-pro"] {
  --primary: #4da8f7;
  --primary-dark: #1a6fc4;
  --primary-light: #0d2040;
  --accent: #00e5ff;
  --bg: #0d1117;
  --bg-subtle: #161b22;
  --surface: #1c2128;
  --surface-alt: #21262d;
  --text: #e6edf3;
  --text-muted: #8b949e;
  --border: #30363d;
  --hero-bg: linear-gradient(135deg, #010409 0%, #0d2040 50%, #0d47a1 100%);
  --hero-text: #e6edf3;
  --nav-bg: #161b22;
  --nav-text: #c9d1d9;
  --nav-hover: #4da8f7;
  --footer-bg: #010409;
  --footer-text: #8b949e;
  --card-shadow: 0 2px 12px rgba(0,0,0,.4);
  --ad-bg: #21262d;
  --ad-border: #30363d;
  --ad-text: #6e7681;
  --ad-price: #484f58;
}

[data-theme="warm-casual"] {
  --primary: #e07b39;
  --primary-dark: #c45e1f;
  --primary-light: #fef3ea;
  --accent: #f4a261;
  --bg: #fdf6ee;
  --bg-subtle: #fef0e0;
  --surface: #ffffff;
  --surface-alt: #fef8f2;
  --text: #3d2314;
  --text-muted: #8b6347;
  --border: #f0d8c0;
  --hero-bg: linear-gradient(135deg, #7b3f00 0%, #c45e1f 60%, #f4a261 100%);
  --hero-text: #ffffff;
  --nav-bg: #ffffff;
  --nav-text: #3d2314;
  --nav-hover: #e07b39;
  --footer-bg: #3d2314;
  --footer-text: #c8a88c;
  --card-shadow: 0 2px 12px rgba(224,123,57,.1);
  --ad-bg: #fef3ea;
  --ad-border: #f0c8a0;
  --ad-text: #b08060;
  --ad-price: #d0a080;
}

[data-theme="classic-wind"] {
  --primary: #3a7d44;
  --primary-dark: #2d6035;
  --primary-light: #eef7f0;
  --accent: #8fbc8f;
  --bg: #f5f8f3;
  --bg-subtle: #e8f2e9;
  --surface: #ffffff;
  --surface-alt: #f8faf7;
  --text: #1e3320;
  --text-muted: #5a7a5c;
  --border: #c8dbc9;
  --hero-bg: linear-gradient(135deg, #1e3320 0%, #3a7d44 60%, #8fbc8f 100%);
  --hero-text: #ffffff;
  --nav-bg: #ffffff;
  --nav-text: #1e3320;
  --nav-hover: #3a7d44;
  --footer-bg: #1e3320;
  --footer-text: #a0c8a2;
  --card-shadow: 0 2px 12px rgba(58,125,68,.08);
  --ad-bg: #eef7f0;
  --ad-border: #b0d0b2;
  --ad-text: #608060;
  --ad-price: #90b090;
}

[data-theme="chem-tech"] {
  --primary: #7b2d8b;
  --primary-dark: #5a1f68;
  --primary-light: #f4e8f8;
  --accent: #d100d1;
  --bg: #f5f0f8;
  --bg-subtle: #ede5f5;
  --surface: #ffffff;
  --surface-alt: #faf7fd;
  --text: #2d1040;
  --text-muted: #7a5a8a;
  --border: #d8c0e8;
  --hero-bg: linear-gradient(135deg, #1a0828 0%, #5a1f68 50%, #d100d1 100%);
  --hero-text: #ffffff;
  --nav-bg: #ffffff;
  --nav-text: #2d1040;
  --nav-hover: #7b2d8b;
  --footer-bg: #1a0828;
  --footer-text: #c0a0d0;
  --card-shadow: 0 2px 12px rgba(123,45,139,.1);
  --ad-bg: #f4e8f8;
  --ad-border: #c8a0d8;
  --ad-text: #9060a8;
  --ad-price: #b080c8;
}

[data-theme="polymer"] {
  --primary: #c0392b;
  --primary-dark: #922b21;
  --primary-light: #fdf2f0;
  --accent: #e74c3c;
  --bg: #fdf5f4;
  --bg-subtle: #fbe8e6;
  --surface: #ffffff;
  --surface-alt: #fdf8f7;
  --text: #3d1a17;
  --text-muted: #8a4040;
  --border: #f0c0bc;
  --hero-bg: linear-gradient(135deg, #1a0a0a 0%, #7b1414 50%, #c0392b 100%);
  --hero-text: #ffffff;
  --nav-bg: #ffffff;
  --nav-text: #3d1a17;
  --nav-hover: #c0392b;
  --footer-bg: #1a0a0a;
  --footer-text: #c89090;
  --card-shadow: 0 2px 12px rgba(192,57,43,.1);
  --ad-bg: #fdf2f0;
  --ad-border: #e8a0a0;
  --ad-text: #a06060;
  --ad-price: #c08080;
}

/* ─── 全局重置 ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 15px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  transition: background .3s, color .3s;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

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

/* ─── 导航栏 ──────────────────────────────────────────────── */
.site-header {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.site-logo { display: flex; align-items: baseline; gap: 4px; color: var(--text) !important; }
.logo-icon { font-size: 1.4rem; }
.logo-text { font-size: 1.3rem; font-weight: 800; color: var(--text); }
.logo-accent { color: var(--primary); }
.logo-sub { font-size: .7rem; color: var(--text-muted); letter-spacing: .05em; }

.navbar { padding: .6rem 0; }
.nav-link { color: var(--nav-text) !important; font-size: .9rem; font-weight: 500; padding: .5rem .75rem !important; border-radius: 6px; }
.nav-link:hover { color: var(--nav-hover) !important; background: var(--primary-light); }
.dropdown-menu { border: 1px solid var(--border); box-shadow: var(--card-shadow); border-radius: var(--radius); }
.dropdown-item { color: var(--text); font-size: .88rem; }
.dropdown-item:hover { background: var(--primary-light); color: var(--primary); }

/* 主题切换器 */
.theme-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: .8rem; }
.theme-btn:hover { background: var(--primary-light); }
.theme-option { cursor: pointer; }
.theme-option:hover { background: var(--primary-light) !important; }

/* ─── 英雄区 ────────────────────────────────────────────── */
.hero-section {
  background: var(--hero-bg);
  color: var(--hero-text);
  padding: 4rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.hero-content { display: flex; align-items: center; gap: 3rem; }
.hero-text { flex: 1; }
.hero-visual { flex: 0 0 280px; }
.hero-badge { display: inline-block; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3); padding: .3rem 1rem; border-radius: 99px; font-size: .8rem; margin-bottom: 1rem; }
.hero-title { font-size: 2.6rem; font-weight: 900; line-height: 1.2; margin-bottom: 1rem; }
.hero-title .highlight { color: var(--accent); }
.hero-desc { font-size: 1rem; opacity: .85; margin-bottom: 1.5rem; max-width: 480px; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.btn-hero { background: var(--accent); color: #fff; border: none; padding: .7rem 1.8rem; border-radius: 8px; font-weight: 700; font-size: .95rem; transition: transform .2s; }
.btn-hero:hover { transform: translateY(-2px); color: #fff; }
.btn-outline-hero { border: 2px solid rgba(255,255,255,.6); color: rgba(255,255,255,.9); padding: .7rem 1.8rem; border-radius: 8px; font-weight: 600; font-size: .95rem; transition: all .2s; }
.btn-outline-hero:hover { background: rgba(255,255,255,.15); color: #fff; }
.hero-stats { display: flex; gap: 2rem; }
.hero-stats .stat { text-align: center; }
.hero-stats .stat strong { display: block; font-size: 1.6rem; font-weight: 800; color: var(--accent); }
.hero-stats .stat span { font-size: .78rem; opacity: .7; }

/* 分子动画 */
.molecule-anim { position: relative; width: 220px; height: 220px; margin: auto; }
.mol-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 70px; height: 70px; background: var(--accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; box-shadow: 0 0 40px rgba(255,255,255,.3); }
.mol-node { position: absolute; width: 48px; height: 48px; background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; animation: orbit 8s linear infinite; }
.mol-node.n1 { top: 5%; left: 50%; margin-left: -24px; animation-delay: 0s; }
.mol-node.n2 { top: 50%; right: 5%; margin-top: -24px; animation-delay: -2s; }
.mol-node.n3 { bottom: 5%; left: 50%; margin-left: -24px; animation-delay: -4s; }
.mol-node.n4 { top: 50%; left: 5%; margin-top: -24px; animation-delay: -6s; }
@keyframes orbit { 0%,100% { transform: scale(1) } 50% { transform: scale(1.15) } }

/* ─── 通用区块 ────────────────────────────────────────────── */
.section-header { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.section-title { font-size: 1.4rem; font-weight: 800; color: var(--text); margin: 0; }
.section-sub { color: var(--text-muted); font-size: .9rem; flex: 1; }
.btn-more { color: var(--primary); font-size: .88rem; white-space: nowrap; }
.btn-more:hover { text-decoration: underline; }
.bg-subtle { background: var(--bg-subtle) !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

/* ─── 文章卡片 ───────────────────────────────────────────── */
.article-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.article-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
@media (max-width:900px) { .article-grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px) { .article-grid-3, .article-grid-2 { grid-template-columns: 1fr; } }

.article-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); border: 1px solid var(--border); transition: transform .2s, box-shadow .2s; }
.article-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.article-cover { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--primary-light); }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-cover-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; background: var(--primary-light); }
.article-cat-badge { position: absolute; bottom: .5rem; left: .5rem; background: var(--primary); color: #fff; padding: .15rem .6rem; border-radius: 4px; font-size: .72rem; font-weight: 600; }
.article-body { padding: 1rem; }
.article-body h3 { font-size: .95rem; font-weight: 700; margin-bottom: .5rem; line-height: 1.4; }
.article-body h3 a { color: var(--text); }
.article-body h3 a:hover { color: var(--primary); }
.article-summary { font-size: .82rem; color: var(--text-muted); line-height: 1.5; margin-bottom: .5rem; }
.article-meta { font-size: .75rem; color: var(--text-muted); display: flex; gap: .75rem; }

.article-card-sm { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; transition: border-color .2s; }
.article-card-sm:hover { border-color: var(--primary); }
.article-card-sm h4 { font-size: .9rem; font-weight: 700; margin: .25rem 0 .4rem; }
.article-card-sm h4 a { color: var(--text); }
.article-card-sm h4 a:hover { color: var(--primary); }
.article-card-sm p { font-size: .8rem; color: var(--text-muted); }
.cat-micro { font-size: .7rem; color: var(--primary); font-weight: 600; }

/* ─── 知识图谱卡片 ─────────────────────────────────────── */
.concept-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
@media (max-width:900px) { .concept-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px) { .concept-grid { grid-template-columns: 1fr; } }

.concept-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; text-decoration: none; color: var(--text); display: block; transition: all .2s; }
.concept-card:hover { border-color: var(--primary); box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); color: var(--text); }
.concept-type-badge { font-size: .7rem; color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4rem; }
.concept-card h4 { font-size: 1.05rem; font-weight: 800; margin: .2rem 0 .1rem; }
.concept-name-en { font-size: .82rem; color: var(--text-muted); margin-bottom: .4rem; }
.chem-formula { font-size: .75rem; background: var(--primary-light); color: var(--primary-dark); padding: .1rem .4rem; border-radius: 4px; display: inline-block; margin-bottom: .5rem; }
.concept-preview { font-size: .82rem; color: var(--text-muted); line-height: 1.5; }

.concept-grid-sm { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
@media (max-width:900px) { .concept-grid-sm { grid-template-columns: repeat(3,1fr); } }
@media (max-width:600px) { .concept-grid-sm { grid-template-columns: repeat(2,1fr); } }

.concept-card-sm { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; text-decoration: none; color: var(--text); display: block; transition: all .2s; }
.concept-card-sm:hover { border-color: var(--primary); transform: translateY(-2px); color: var(--text); }
.concept-name { font-weight: 800; font-size: .95rem; }
.concept-name-en { font-size: .75rem; color: var(--text-muted); margin: .15rem 0; }
.chem-formula-sm { font-size: .7rem; background: var(--primary-light); color: var(--primary); padding: .05rem .3rem; border-radius: 3px; }
.concept-preview-sm { font-size: .78rem; color: var(--text-muted); margin: .4rem 0 0; }
.view-count { font-size: .7rem; color: var(--text-muted); }

/* ─── 分类导航 ──────────────────────────────────────────── */
.category-nav-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
@media (max-width:900px) { .category-nav-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width:600px) { .category-nav-grid { grid-template-columns: repeat(2,1fr); } }

.cat-nav-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem 1rem; text-align: center; text-decoration: none; color: var(--text); display: block; transition: all .2s; }
.cat-nav-card:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary); transform: translateY(-3px); }
.cat-icon { font-size: 2rem; margin-bottom: .5rem; }
.cat-nav-card h4 { font-size: .95rem; font-weight: 700; margin-bottom: .4rem; }
.cat-nav-card p { font-size: .78rem; color: var(--text-muted); margin: 0; }

/* ─── 飞灵实验室 ────────────────────────────────────────── */
.lab-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; }
@media (max-width:600px) { .lab-grid { grid-template-columns: 1fr; } }

.lab-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; border-left: 4px solid var(--primary); transition: transform .2s; }
.lab-card:hover { transform: translateX(4px); }
.lab-card-inner { padding: 1.5rem; }
.lab-badge { font-size: .7rem; background: var(--primary); color: #fff; padding: .2rem .6rem; border-radius: 4px; font-weight: 700; }
.lab-card-inner h3 { font-size: 1rem; font-weight: 700; margin: .7rem 0 .5rem; }
.lab-card-inner h3 a { color: var(--text); }
.lab-card-inner h3 a:hover { color: var(--primary); }
.lab-card-inner p { font-size: .85rem; color: var(--text-muted); }
.lab-read-more { font-size: .85rem; color: var(--primary); font-weight: 600; }

/* ─── AI功能卡片 ────────────────────────────────────────── */
.ai-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 700px; margin: 0 auto; }
@media (max-width:600px) { .ai-cards-row { grid-template-columns: 1fr; } }

.ai-feature-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; text-align: center; transition: all .2s; }
.ai-feature-card.featured { border-color: var(--primary); background: var(--primary-light); }
.ai-feature-card:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: var(--card-shadow); }
.ai-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.ai-feature-card h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: .5rem; }
.ai-feature-card p { font-size: .85rem; color: var(--text-muted); margin-bottom: 1rem; }
.btn-ai { display: inline-block; background: var(--primary); color: #fff; padding: .5rem 1.5rem; border-radius: 8px; font-weight: 700; font-size: .88rem; }
.btn-ai:hover { background: var(--primary-dark); color: #fff; }

/* ─── 标签 ──────────────────────────────────────────────── */
.tag-cloud, .tag-cloud-home { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag-badge, .tag-pill { display: inline-block; background: var(--primary-light); color: var(--primary); padding: .2rem .7rem; border-radius: 99px; font-size: .78rem; font-weight: 600; border: 1px solid rgba(var(--primary),.2); transition: all .2s; }
.tag-badge:hover, .tag-pill:hover { background: var(--primary); color: #fff; }
.tag-badge.active { background: var(--primary); color: #fff; }
.tag-pill { padding: .3rem .9rem; font-size: .82rem; }

/* ─── 侧边栏 ─────────────────────────────────────────────── */
.sidebar-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; margin-bottom: 1.2rem; }
.sidebar-title { font-size: .95rem; font-weight: 800; color: var(--text); margin-bottom: .8rem; padding-bottom: .5rem; border-bottom: 2px solid var(--primary-light); }
.latest-list { list-style: none; padding: 0; margin: 0; }
.latest-list li { display: flex; justify-content: space-between; align-items: flex-start; padding: .4rem 0; border-bottom: 1px solid var(--border); font-size: .82rem; gap: .5rem; }
.latest-list li:last-child { border-bottom: none; }
.latest-list a { color: var(--text); flex: 1; line-height: 1.4; }
.latest-list a:hover { color: var(--primary); }
.article-date { color: var(--text-muted); font-size: .72rem; white-space: nowrap; }
.concept-list { list-style: none; padding: 0; margin: 0; }
.concept-list li { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.concept-list li:last-child { border-bottom: none; }
.concept-link { color: var(--text); font-size: .85rem; }
.concept-link:hover { color: var(--primary); }
.concept-summary { color: var(--text-muted); margin: .15rem 0 0; }

/* ─── 文章布局 ──────────────────────────────────────────── */
.article-layout { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; align-items: flex-start; }
@media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } .article-sidebar { display: none; } }

.category-layout { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; }
@media (max-width: 900px) { .category-layout { grid-template-columns: 1fr; } .category-sidebar { display: none; } }

.knowledge-detail-layout { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; }
@media (max-width: 900px) { .knowledge-detail-layout { grid-template-columns: 1fr; } .knowledge-sidebar { display: none; } }

/* ─── 文章详情 ──────────────────────────────────────────── */
.article-detail { background: var(--surface); border-radius: var(--radius-lg); padding: 2rem; border: 1px solid var(--border); margin-bottom: 1.5rem; }
.article-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--border); }
.article-cats { margin-bottom: .5rem; }
.cat-link { font-size: .78rem; color: var(--primary); font-weight: 700; text-transform: uppercase; margin-right: .4rem; }
.article-title { font-size: 1.8rem; font-weight: 900; line-height: 1.3; margin: .5rem 0; color: var(--text); }
.article-summary-hero { font-size: 1rem; color: var(--text-muted); margin-bottom: .75rem; }
.article-meta-bar { display: flex; gap: 1.25rem; font-size: .82rem; color: var(--text-muted); flex-wrap: wrap; margin-bottom: .75rem; }
.article-tags-top, .article-tags-bottom { margin: .5rem 0; }
.article-cover-img { margin-bottom: 1.5rem; border-radius: var(--radius); overflow: hidden; }
.article-cover-img img { width: 100%; border-radius: var(--radius); }

/* ─── 文章正文 ──────────────────────────────────────────── */
.article-content { line-height: 1.85; font-size: .95rem; color: var(--text); }
.article-content h2 { font-size: 1.35rem; font-weight: 800; color: var(--primary-dark); margin: 2rem 0 .75rem; padding-left: .75rem; border-left: 4px solid var(--primary); }
.article-content h3 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 .5rem; color: var(--text); }
.article-content p { margin-bottom: 1rem; }
.article-content ul, .article-content ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.article-content li { margin-bottom: .35rem; }
.article-content blockquote { border-left: 4px solid var(--primary); background: var(--primary-light); padding: 1rem 1.25rem; margin: 1.5rem 0; border-radius: 0 var(--radius) var(--radius) 0; color: var(--text-muted); }
.article-content code { background: var(--primary-light); color: var(--primary-dark); padding: .1rem .4rem; border-radius: 4px; font-size: .87em; }
.article-content pre { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; overflow-x: auto; }
.article-content strong { color: var(--primary-dark); }
.article-content table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.article-content th { background: var(--primary-light); color: var(--primary-dark); font-weight: 700; padding: .5rem .75rem; border: 1px solid var(--border); }
.article-content td { padding: .45rem .75rem; border: 1px solid var(--border); }
.article-content tr:nth-child(even) td { background: var(--surface-alt); }

/* ─── 文章导航 ──────────────────────────────────────────── */
.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; padding-top: 1.5rem; border-top: 2px solid var(--border); }
.nav-arrow { display: block; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; text-decoration: none; color: var(--text); transition: all .2s; }
.nav-arrow:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.article-nav-next .nav-arrow { text-align: right; }
.nav-dir { display: block; font-size: .72rem; color: var(--text-muted); margin-bottom: .2rem; }
.nav-title { font-size: .88rem; font-weight: 600; }

/* ─── 推荐文章列表 ──────────────────────────────────────── */
.related-articles, .recommended-articles { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; }
.recommended-list { }
.rec-item { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .85rem; }
.rec-item:last-child { border-bottom: none; }
.rec-cat { flex-shrink: 0; font-size: .7rem; color: var(--primary); font-weight: 700; background: var(--primary-light); padding: .1rem .5rem; border-radius: 4px; }
.rec-title { flex: 1; color: var(--text); }
.rec-title:hover { color: var(--primary); }
.rec-views { font-size: .7rem; color: var(--text-muted); flex-shrink: 0; }

/* ─── 分类页 ────────────────────────────────────────────── */
.cat-hero { display: flex; align-items: center; gap: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; }
.cat-icon-lg { font-size: 3rem; }
.cat-title { font-size: 1.6rem; font-weight: 900; margin-bottom: .25rem; }
.cat-desc { color: var(--text-muted); font-size: .9rem; margin: 0; }

.sub-category-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.sub-cat-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: .35rem .9rem; border-radius: 99px; font-size: .83rem; font-weight: 500; transition: all .2s; }
.sub-cat-btn:hover, .sub-cat-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.empty-state { text-align: center; padding: 3rem; color: var(--text-muted); background: var(--surface); border-radius: var(--radius); }

/* ─── 分页 ──────────────────────────────────────────────── */
.pagination-nav { display: flex; gap: .5rem; justify-content: center; margin: 2rem 0; }
.page-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: .4rem .85rem; border-radius: 6px; font-size: .85rem; transition: all .2s; }
.page-btn:hover { border-color: var(--primary); color: var(--primary); }
.page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ─── 知识图谱 ──────────────────────────────────────────── */
.knowledge-hero { text-align: center; padding: 2.5rem 0 1.5rem; }
.knowledge-hero h1 { font-size: 2rem; font-weight: 900; margin-bottom: .5rem; }
.knowledge-hero p { color: var(--text-muted); }
.knowledge-section { margin-bottom: 2.5rem; }
.knowledge-type-title { font-size: 1.2rem; font-weight: 800; color: var(--primary-dark); margin-bottom: 1rem; padding-left: .75rem; border-left: 4px solid var(--primary); }

/* 知识详情 */
.concept-detail-header { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; margin-bottom: 1.5rem; }
.concept-type-tag { display: inline-block; background: var(--primary); color: #fff; font-size: .72rem; padding: .2rem .7rem; border-radius: 4px; font-weight: 700; margin-bottom: .75rem; }
.concept-detail-header h1 { font-size: 1.8rem; font-weight: 900; margin-bottom: .25rem; }
.concept-detail-header h1 .name-en { font-size: 1.1rem; color: var(--text-muted); font-weight: 400; }
.chem-formula-block { margin: .5rem 0 1rem; font-size: .9rem; }
.chem-formula-block .label { color: var(--text-muted); }
.chem-formula-block code { background: var(--primary-light); color: var(--primary-dark); padding: .2rem .6rem; border-radius: 6px; font-size: .9rem; }
.concept-summary-hero { color: var(--text-muted); font-size: 1rem; margin-bottom: 1rem; }
.concept-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.concept-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; margin-top: 1.5rem; line-height: 1.85; font-size: .95rem; color: var(--text); }
.concept-content h1 { display: none; }  /* MD 顶部 # 标题与页面 header 重复，隐藏 */
.concept-content h2 { font-size: 1.25rem; font-weight: 800; color: var(--primary-dark); margin: 2rem 0 .75rem; padding-left: .75rem; border-left: 4px solid var(--primary); }
.concept-content h3 { font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 .5rem; color: var(--text); }
.concept-content h4 { font-size: .95rem; font-weight: 700; margin: 1.2rem 0 .4rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.concept-content p { margin-bottom: 1rem; }
.concept-content ul, .concept-content ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.concept-content li { margin-bottom: .35rem; }
.concept-content blockquote { border-left: 4px solid var(--primary); background: var(--primary-light); padding: 1rem 1.25rem; margin: 1.5rem 0; border-radius: 0 var(--radius) var(--radius) 0; color: var(--text-muted); font-size: .9rem; }
.concept-content blockquote p { margin: 0; }
.concept-content code { background: var(--primary-light); color: var(--primary-dark); padding: .1rem .4rem; border-radius: 4px; font-size: .87em; font-family: 'Fira Code', 'Courier New', monospace; }
.concept-content pre { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; overflow-x: auto; margin-bottom: 1rem; }
.concept-content pre code { background: none; color: var(--text); padding: 0; }
.concept-content strong { color: var(--primary-dark); }
.concept-content em { color: var(--text-muted); }
.concept-content a { color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--primary-light); }
.concept-content a:hover { border-bottom-color: var(--primary); }
.concept-content hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
.concept-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: .9rem; }
.concept-content th { background: var(--primary-light); color: var(--primary-dark); font-weight: 700; padding: .6rem .85rem; border: 1px solid var(--border); text-align: left; }
.concept-content td { padding: .5rem .85rem; border: 1px solid var(--border); vertical-align: top; }
.concept-content tr:nth-child(even) td { background: var(--surface-alt); }
.concept-content tr:hover td { background: var(--primary-light); transition: background .15s; }

/* ─── 标签页 ────────────────────────────────────────────── */
.tag-page-header { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; }
.tag-page-header h1 { font-size: 1.6rem; font-weight: 800; }
.tag-page-header p { color: var(--text-muted); margin: 0; }

/* ─── 面包屑 ────────────────────────────────────────────── */
.breadcrumb-nav { margin-bottom: 1rem; }
.breadcrumb { background: none; padding: 0; margin: 0; font-size: .82rem; }
.breadcrumb-item a { color: var(--primary); }
.breadcrumb-item.active { color: var(--text-muted); }
.breadcrumb-item+.breadcrumb-item::before { color: var(--text-muted); }

/* ─── 广告位 ────────────────────────────────────────────── */
.ad-slot { margin: 1rem 0; text-align: center; }
.ad-placeholder { display: flex; align-items: center; justify-content: center; border-radius: var(--radius); overflow: hidden; }

/* ─── 页脚 ──────────────────────────────────────────────── */
.footer-ads { padding: 1.5rem 0; }

.site-footer { background: var(--footer-bg); color: var(--footer-text); padding: 3rem 0 1.5rem; margin-top: 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-logo { font-size: 1.4rem; font-weight: 800; margin-bottom: .5rem; }
.footer-logo span { color: var(--accent); }
.footer-tagline { font-size: .85rem; opacity: .7; line-height: 1.6; }
.footer-links h5 { font-size: .9rem; font-weight: 700; color: var(--footer-text); opacity: .9; margin-bottom: .75rem; }
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .4rem; }
.footer-links a { color: var(--footer-text); opacity: .7; font-size: .83rem; }
.footer-links a:hover { opacity: 1; color: var(--accent); }
.friend-links { border-top: 1px solid rgba(255,255,255,.15); padding-top: 1rem; margin-bottom: 1rem; font-size: .82rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.friend-links-title { opacity: .7; }
.friend-links a { color: var(--footer-text); opacity: .75; }
.friend-links a:hover { opacity: 1; color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1rem; font-size: .8rem; opacity: .6; }
.footer-disclaimer { margin: .25rem 0 0; font-size: .75rem; }

/* ─── 响应式导航 ────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-title { font-size: 1.8rem; }
  .hero-visual { display: none; }
  .hero-content { flex-direction: column; }
  .article-layout { grid-template-columns: 1fr; }
  .article-detail { padding: 1rem; }
  .article-title { font-size: 1.3rem; }
}

/* ─── 知识图谱 RAG 辅助标记 ─────────────────────────────── */
/* 内链关键词高亮：在概念详情页中，概念名称自动高亮 */
.concept-keyword { background: var(--primary-light); color: var(--primary); padding: .05rem .3rem; border-radius: 3px; font-weight: 600; cursor: help; border-bottom: 1.5px dotted var(--primary); }

  margin-bottom: 60px;
}