/* ========================================
   数构营造 - 全局样式表
   传统古建视觉体系：宣纸底 · 朱砂红 · 鎏金
   ======================================== */

:root {
  --bg-primary: #F9F7F4;
  --bg-surface: #F0EDE8;
  --bg-card: #FFFFFF;
  --text-primary: #1C1917;
  --text-secondary: #57534E;
  --text-muted: #A8A29E;
  --accent: #B91C1C;
  --accent-light: #DC2626;
  --accent-dark: #991B1B;
  --accent-gold: #B8936E;
  --accent-gold-light: #D4B896;
  --accent-gold-dark: #9A7A58;
  --border: #E7E5E4;
  --border-light: #F5F4F2;
  --border-dark: #D6D3D1;
  --shadow: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-hover: 0 8px 30px rgba(0,0,0,0.08);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.03);
  --radius: 4px;
  --radius-sm: 2px;
  --radius-lg: 8px;
  --transition: 0.2s ease;
  --font-calligraphy: 'Ma Shan Zheng', 'KaiTi', 'STKaiti', serif;
  --font-heading: 'Noto Serif SC', 'SimSun', 'STSong', serif;
  --font-body: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  /* 兼容性别名：部分组件使用 --surface/--text/--shadow-color */
  --surface: var(--bg-card);
  --text: var(--text-primary);
  --shadow-color: rgba(0,0,0,0.08);
  --bg-hover: var(--bg-surface);
}


html {
  scroll-behavior: smooth;
  color-scheme: light;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  opacity: 0;
  transition: opacity 0.5s ease;
  -webkit-tap-highlight-color: rgba(185,28,28,0.08);
  touch-action: manipulation;
}

body.loaded { opacity: 1; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}

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

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

/* 可访问性：跳转到主内容 */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  z-index: 1001;
  font-size: 0.9rem;
}
.skip-link:focus {
  top: 0.5rem;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ========== 按钮 ========== */
.btn {
  display: inline-block;
  padding: 10px 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  letter-spacing: 0.03em;
}

.btn:hover {
  background: var(--accent-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(185,28,28,0.2);
}
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-secondary {
  display: inline-block;
  padding: 9px 22px;
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  font-family: var(--font-body);
  text-decoration: none;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn-secondary:hover {
  background: var(--accent);
  color: #fff;
}
.btn-secondary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  height: 32px;
  min-height: 32px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.85rem;
  font-family: var(--font-body);
  text-decoration: none;
  transition: all var(--transition);
  text-align: center;
  min-width: 60px;
  line-height: 1;
  white-space: nowrap;
}
.btn-small:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); }
.btn-small.view { background: rgba(60,130,80,0.12); color: #3a7a4a; border: 1px solid rgba(60,130,80,0.25); }
.btn-small.view:hover { background: rgba(60,130,80,0.22); }
.btn-small.edit { background: rgba(181,52,46,0.08); color: var(--accent-dark); border: 1px solid rgba(181,52,46,0.2); }
.btn-small.edit:hover { background: rgba(181,52,46,0.15); }
.btn-small.delete { background: rgba(153,27,27,0.08); color: #991B1B; border: 1px solid rgba(153,27,27,0.2); }
.btn-small.delete:hover { background: rgba(153,27,27,0.18); }
html[data-theme="dark"] .btn-small.view { background: rgba(76,175,80,0.18); color: #81c784; border-color: rgba(76,175,80,0.3); }
html[data-theme="dark"] .btn-small.edit { background: rgba(201,168,123,0.15); color: #d4b87a; border-color: rgba(201,168,123,0.25); }
html[data-theme="dark"] .btn-small.delete { background: rgba(244,67,54,0.15); color: #ef5350; border-color: rgba(244,67,54,0.25); }

/* ========== 卡片 ========== */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* ========== 动画 ========== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

@keyframes inkFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.fade-in {
  animation: fadeUp 0.8s ease forwards;
  opacity: 0;
}
.fade-in.delay-1 { animation-delay: 0.2s; }
.fade-in.delay-2 { animation-delay: 0.4s; }
.fade-in.delay-3 { animation-delay: 0.6s; }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ========== 导航栏 ========== */
.navbar {
  background: rgba(249, 247, 244, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  border-bottom: 1px solid var(--border);
}

.navbar:not(.hidden) {
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}

.navbar.hidden {
  transform: translateY(-100%);
}

.navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 1rem;
}

.logo {
  font-family: var(--font-calligraphy);
  font-size: 1.6rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 400;
  white-space: nowrap;
  letter-spacing: 0.08em;
}
.logo:hover { color: var(--accent-dark); }

.nav-links {
  list-style: none;
  display: flex;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-links a {
  display: inline-block;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
}

.nav-links a:hover {
  background: rgba(185, 28, 28, 0.06);
  color: var(--accent);
}
.nav-links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.search-form { display: flex; align-items: center; }
.search-form input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  color: var(--text-primary);
  font-size: 0.88rem;
  width: 150px;
  transition: border-color var(--transition), width var(--transition), background var(--transition);
  font-family: var(--font-body);
}
.search-form input::placeholder { color: var(--text-muted); }
.search-form input:focus-visible {
  outline: none;
  border-color: var(--accent);
  width: 200px;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(181,52,46,0.12);
}

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--accent);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
}
.menu-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ========== Hero 区域 ========== */
.hero {
  position: relative;
  text-align: center;
  padding: 5rem 0 3rem;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(185,28,28,0.02) 0%, transparent 50%);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: 2.4rem;
  color: var(--accent);
  margin-bottom: 0.75rem;
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

/* ========== 品牌故事 ========== */
.about-us {
  background: var(--bg-surface);
  padding: 3rem;
  border-radius: var(--radius-lg);
  margin: 2rem 0;
  text-align: center;
  border: 1px solid var(--border-light);
  position: relative;
}

.about-us::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

.about-us h2 {
  color: var(--accent);
  margin: 1rem 0 1.5rem;
  font-family: var(--font-heading);
}

.about-us p {
  max-width: 700px;
  margin: 0 auto 1.5rem;
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.image-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.image-row img {
  width: 200px;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
}

/* ========== 页面标题行 ========== */
.featured-projects,
.featured-components,
.latest-articles,
.projects-page,
.components-page,
.blog-page,
.download-page,
.search-page {
  padding: 2rem 0;
}

.featured-projects h2,
.featured-components h2,
.latest-articles h2 {
  color: var(--accent);
  margin-bottom: 2rem;
  font-family: var(--font-heading);
  font-size: 1.6rem;
}

.projects-page h1,
.components-page h1,
.blog-page h1,
.download-page h1,
.search-page h1,
.donate-page h1 {
  color: var(--accent);
  margin-bottom: 2rem;
  font-family: var(--font-heading);
  font-size: 2rem;
}

/* ========== 网格 ========== */
.project-grid,
.component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.project-card,
.component-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
  perspective: 1000px;
  border: 1px solid var(--border-light);
}

.project-card:hover,
.component-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.card-inner {
  padding: 0;
  transform-style: preserve-3d;
  transition: transform 0.2s ease;
}

.project-card img,
.component-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: var(--bg-surface);
}

.project-card .card-body,
.component-card .card-body {
  padding: 1.25rem;
}

.project-card h3,
.component-card h3 {
  color: var(--text-primary);
  margin: 0.5rem 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
}

.category-tag {
  display: inline-block;
  background: var(--bg-surface);
  color: var(--text-secondary);
  padding: 0.15rem 0.6rem;
  border-radius: 2px;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
}

.printable-badge {
  display: inline-block;
  background: rgba(60,130,80,0.12);
  color: #3a7a4a;
  padding: 0.2rem 0.6rem;
  border-radius: 10px;
  font-size: 0.8rem;
  margin: 0.3rem 0;
}

.project-card p,
.component-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 0.5rem 0;
}

/* ========== 进度 ========== */
.progress-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.progress-bar {
  background: var(--bg-surface);
  height: 8px;
  border-radius: 4px;
  margin: 0.5rem 0;
  overflow: hidden;
  border: 1px solid var(--border-light);
}
.progress-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  height: 100%;
  border-radius: 4px;
  width: 0;
  transition: width 1.2s cubic-bezier(.2,.8,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  .progress-fill { transition: none; }
}
.progress-section {
  max-width: 500px;
  margin: 1.5rem 0;
}

/* ========== 众筹区块 ========== */
.crowdfunding-section {
  background: linear-gradient(135deg, rgba(201,168,123,0.08), rgba(201,168,123,0.02));
  border: 1px solid rgba(201,168,123,0.25);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0 1.5rem;
  position: relative;
  overflow: hidden;
}
.crowdfunding-section::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(201,168,123,0.12), transparent 70%);
  pointer-events: none;
}
.cf-progress-bar {
  background: var(--bg-surface);
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  margin: 0;
}
/* 众筹区块：标题行（左标题+右按钮），下方进度条 */
.cf-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}
.cf-head-left {
  flex: 1;
  min-width: 200px;
}
.cf-title {
  font-family: var(--font-heading, 'Noto Serif SC', serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 0.25rem;
}
.cf-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}
.cf-progress-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  height: 100%;
  border-radius: 6px;
  transition: width 1.2s cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.cf-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: cf-shimmer 2.4s infinite;
}
@keyframes cf-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .cf-progress-fill::after { animation: none; }
  .cf-progress-fill { transition: none; }
}
.cf-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0.35rem 0 0;
  gap: 1rem;
  flex-wrap: wrap;
}
.cf-progress-meta span:first-child {
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.cf-cta-btn {
  display: inline-block;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff !important;
  padding: 0.7rem 1.6rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 14px rgba(201,168,123,0.35);
}
.cf-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201,168,123,0.45);
}

/* ========== 链接 ========== */
.read-more {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  margin-top: 0.5rem;
  transition: color var(--transition);
}
.read-more:hover { color: var(--accent-dark); }

/* ========== 统计信息 ========== */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.75rem 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.stats span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* ========== 卡片操作行 ========== */
.card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  gap: 1rem;
}

/* 标题行：标题 + 点赞按钮（新卡片布局） */
.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.4rem 0 0.4rem;
}
.card-title-compact {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}
.card-title-compact a {
  color: var(--text-primary);
  text-decoration: none;
}
.card-title-compact a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* 卡片点赞按钮（紧凑版） */
.btn-like-compact {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.3rem 0.65rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-like-compact:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-like-compact.liked {
  background: #e6162d;
  color: #fff;
  border-color: #e6162d;
}
.btn-like-compact span {
  font-weight: 600;
}

/* 底部动作行：左浏览量，右点赞 */
.card-actions-bottom {
  padding: 0.85rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  margin: 1.5rem 0 0.5rem;
}
.card-actions-bottom .view-count-bottom {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.card-actions-bottom .view-count-bottom strong {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
  margin-left: 0.15rem;
}
.btn-like-bottom {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.btn-like-bottom strong {
  font-weight: 600;
  font-size: 0.9rem;
}
.btn-like-bottom.liked strong {
  color: #fff;
}

/* ========== 点赞按钮 ========== */
.btn-like {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition), transform 0.25s ease;
  font-family: var(--font-body);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.btn-like:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-like:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn-like.liked {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  cursor: default;
}
.btn-like:disabled {
  opacity: 0.7;
  cursor: default;
}

/* ========== 筛选栏 ========== */
.filter-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  align-items: center;
}
.filter-bar select,
.filter-bar input[type="text"] {
  padding: 0.5rem 1rem;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: var(--font-body);
  cursor: pointer;
}
.filter-bar .search-input {
  flex: 1 1 200px;
  min-width: 160px;
  cursor: text;
}
.filter-bar .search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(185,28,28,0.08);
}
.filter-bar select:focus-visible,
.filter-bar input[type="text"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(181,52,46,0.12);
}

/* ========== 模型查看器（Three.js） ========== */
.model-wrapper {
  position: relative;
  background:
    radial-gradient(circle at 50% 35%, rgba(246, 239, 225, 0.34), transparent 34%),
    linear-gradient(155deg, #c9c2b6 0%, #aaa296 58%, #817b73 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%;
  max-width: none;
  margin: 1rem 0 2rem;
  border: 1px solid rgba(111, 99, 82, 0.32);
  width: 100%;
  max-width: none;
  height: clamp(520px, 72vh, 820px);
  min-height: 520px;
  box-shadow: 0 24px 64px rgba(52, 45, 36, 0.24), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -80px 120px rgba(50,43,35,0.12);
}
.three-canvas {
  position: absolute;
  top: 0; left: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.three-canvas:active { cursor: grabbing; }

/* 信息浮层：左上角构件标题 */
.model-info-overlay {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 5;
  padding: 0.7rem 1.1rem;
  background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.4));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-left: 3px solid var(--accent-gold);
  border-radius: 0 8px 8px 0;
  color: #f5f0e6;
  pointer-events: none;
  max-width: 60%;
}
.model-info-title {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.model-info-sub {
  font-size: 0.8rem;
  color: var(--accent-gold);
  margin-top: 0.25rem;
  opacity: 0.9;
}

/* 视角指示器（已移除，保留样式以防回退） */
.model-view-indicator { display: none; }

/* 加载动画遮罩 */
.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(42,38,32,0.85) 0%, rgba(20,17,13,0.95) 100%);
  z-index: 10;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  opacity: 1;
  visibility: visible;
}
.loading-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.loading-emblem {
  width: 96px;
  height: 96px;
  position: relative;
}
.loading-svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* 外圈弧线旋转 */
.loading-arc {
  transform-origin: 50px 50px;
  animation: loading-arc-spin 1.6s linear infinite;
}
@keyframes loading-arc-spin {
  to { transform: rotate(360deg); }
}
/* 八瓣花纹反向旋转 */
.loading-petals {
  transform-origin: 50px 50px;
  animation: loading-petals-spin 8s linear infinite reverse;
}
@keyframes loading-petals-spin {
  to { transform: rotate(360deg); }
}
.loading-text {
  color: var(--accent-gold);
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  font-weight: 300;
  text-shadow: 0 0 12px rgba(201,168,123,0.4);
}
.loading-progress {
  width: 180px;
  height: 2px;
  background: rgba(201,168,123,0.15);
  border-radius: 1px;
  overflow: hidden;
}
.loading-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(201,168,123,0.3), var(--accent-gold));
  border-radius: 1px;
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(201,168,123,0.6);
}
.loading-percent {
  color: rgba(245,240,230,0.6);
  font-size: 0.75rem;
  font-family: 'Consolas', 'Monaco', monospace;
  letter-spacing: 0.1em;
}

/* 工具栏覆盖层：底部居中（固定尺寸，避免缩放跳动） */
.model-toolbar {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: 8px;
  z-index: 6;
  padding: 6px;
  background: rgba(20, 17, 13, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 168, 123, 0.18);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.tool-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ddd;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255,255,255,0.06);
}
.tool-btn:hover {
  background: rgba(181,52,46,0.75);
  color: #fff;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 12px rgba(181,52,46,0.4);
}
.tool-btn:active { transform: translateY(0) scale(0.98); }
.tool-btn:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}
.tool-btn.active {
  background: linear-gradient(135deg, rgba(201,168,123,0.85), rgba(201,168,123,0.65));
  color: #1a1815;
  border-color: var(--accent-gold);
  box-shadow: 0 0 12px rgba(201,168,123,0.4);
}

/* ========== 搭建模拟面板（古建主题） ========== */
.construction-panel {
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  width: min(360px, calc(100% - 24px));
  background: rgba(20, 17, 13, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(201, 168, 123, 0.25);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(201,168,123,0.08);
  z-index: 7;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  pointer-events: none;
}
.construction-panel.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.construction-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(201, 168, 123, 0.15);
}
.construction-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-gold);
  letter-spacing: 0.06em;
}
.construction-close {
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255,255,255,0.06);
  color: #aaa;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.construction-close:hover {
  background: rgba(181,52,46,0.6);
  color: #fff;
}
.construction-body {
  padding: 12px 14px 14px;
}
.construction-progress-wrap {
  margin-bottom: 12px;
}
.construction-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.construction-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #b5342e, #c9a87b);
  border-radius: 3px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.construction-progress-text {
  font-size: 0.72rem;
  color: #999;
  text-align: center;
  letter-spacing: 0.04em;
}
.construction-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}
.construction-btn {
  width: 40px;
  height: 36px;
  border: 1px solid rgba(201,168,123,0.2);
  background: rgba(0,0,0,0.3);
  color: #ddd;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.construction-btn:hover {
  background: rgba(181,52,46,0.6);
  color: #fff;
  border-color: rgba(181,52,46,0.8);
  transform: translateY(-1px);
}
.construction-btn:active {
  transform: translateY(0) scale(0.96);
}
.construction-btn.active {
  background: rgba(201,168,123,0.25);
  color: var(--accent-gold);
  border-color: var(--accent-gold);
}
.construction-speed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 0.72rem;
  color: #888;
}
.speed-label {
  margin-right: 4px;
  letter-spacing: 0.04em;
}
.speed-btn {
  padding: 3px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: #999;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.7rem;
  transition: all 0.2s;
}
.speed-btn:hover {
  border-color: rgba(201,168,123,0.4);
  color: #ccc;
}
.speed-btn.active {
  background: rgba(201,168,123,0.2);
  color: var(--accent-gold);
  border-color: var(--accent-gold);
}
.construction-layer-info {
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid rgba(201,168,123,0.1);
}
.layer-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-gold);
  margin-bottom: 3px;
  letter-spacing: 0.05em;
}
.layer-components {
  font-size: 0.7rem;
  color: #888;
  line-height: 1.4;
}
.construction-toggles {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}
.toggle-btn {
  padding: 4px 12px;
  border: 1px solid rgba(201,168,123,0.2);
  background: rgba(0,0,0,0.25);
  color: #888;
  border-radius: 14px;
  cursor: pointer;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.toggle-btn:hover {
  border-color: rgba(201,168,123,0.4);
  color: #ccc;
}
.toggle-btn.active {
  background: rgba(74,144,217,0.2);
  color: #6ab0f3;
  border-color: rgba(74,144,217,0.5);
}

/* ========== ViewCube 3D 立方体控制器 ========== */
.view-cube-container {
  position: absolute;
  top: 16px; right: 16px;
  width: 104px;
  height: 104px;
  perspective: 300px;
  z-index: 6;
  pointer-events: auto;
  /* 立方体半边长，用于 translateZ */
  --cube-half: 34px;
  /* 小正方体/长方体的尺寸 */
  --corner-size: 14px;
  --edge-thick: 9px;
}
.view-cube-3d {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.18s ease-out;
}
/* 6 个面：完全不透明的大正方体按钮 */
.cube3d-face {
  position: absolute;
  width: 66.67%;
  height: 66.67%;
  top: 16.67%;
  left: 16.67%;
  background: #3a3228;
  border: 1px solid rgba(201, 168, 123, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f5f0e6;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  backface-visibility: visible;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.45);
}
.cube3d-face:hover {
  background: #8c2622;
  border-color: var(--accent-gold);
  box-shadow: inset 0 0 14px rgba(0,0,0,0.3), 0 0 12px rgba(201,168,123,0.5);
}
.cube3d-face.active {
  background: var(--accent-gold);
  color: #1a1815;
  border-color: var(--accent-gold);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.15), 0 0 16px rgba(201,168,123,0.7);
}
.cube3d-face span { pointer-events: none; }
/* 6 个面的 3D 位置 */
.cube3d-front  { transform: translateZ(var(--cube-half)); }
.cube3d-back   { transform: rotateY(180deg) translateZ(var(--cube-half)); }
.cube3d-right  { transform: rotateY(90deg) translateZ(var(--cube-half)); }
.cube3d-left   { transform: rotateY(-90deg) translateZ(var(--cube-half)); }
.cube3d-top    { transform: rotateX(90deg) translateZ(var(--cube-half)); }
.cube3d-bottom { transform: rotateX(-90deg) translateZ(var(--cube-half)); }

/* 8 个角：小正方体（用 3D 边框模拟立体效果，完全不透明） */
.cube3d-corner {
  position: absolute;
  width: var(--corner-size);
  height: var(--corner-size);
  background: #5a5045;
  border: 1px solid #2a2620;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  /* 模拟 3D 正方体：上左亮、下右暗 */
  box-shadow:
    inset 2px 2px 0 rgba(140, 128, 110, 0.9),
    inset -2px -2px 0 rgba(20, 17, 13, 0.9),
    0 1px 3px rgba(0,0,0,0.5);
}
.cube3d-corner:hover {
  background: #b5342e;
  box-shadow:
    inset 2px 2px 0 rgba(220, 100, 90, 0.9),
    inset -2px -2px 0 rgba(80, 20, 16, 0.9),
    0 0 10px rgba(201,168,123,0.6);
}
.cube3d-corner.active {
  background: var(--accent-gold);
  box-shadow:
    inset 2px 2px 0 rgba(240, 220, 180, 0.9),
    inset -2px -2px 0 rgba(140, 110, 60, 0.9),
    0 0 12px rgba(201,168,123,0.7);
}
/* 8 个顶点位置（在正方体顶点处） */
.c3d-tfl { top: 8px; left: 8px; transform: translateZ(var(--cube-half)); }
.c3d-tfr { top: 8px; right: 8px; transform: translateZ(var(--cube-half)); }
.c3d-tbl { top: 8px; left: 8px; transform: translateZ(calc(var(--cube-half) * -1)); }
.c3d-tbr { top: 8px; right: 8px; transform: translateZ(calc(var(--cube-half) * -1)); }
.c3d-bfl { bottom: 8px; left: 8px; transform: translateZ(var(--cube-half)); }
.c3d-bfr { bottom: 8px; right: 8px; transform: translateZ(var(--cube-half)); }
.c3d-bbl { bottom: 8px; left: 8px; transform: translateZ(calc(var(--cube-half) * -1)); }
.c3d-bbr { bottom: 8px; right: 8px; transform: translateZ(calc(var(--cube-half) * -1)); }

/* 12 条边：小长方体（用 3D 边框模拟立体效果，完全不透明） */
.cube3d-edge {
  position: absolute;
  background: #6a5f50;
  border: 1px solid #2a2620;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  /* 模拟 3D 长方体 */
  box-shadow:
    inset 1px 1px 0 rgba(150, 138, 118, 0.9),
    inset -1px -1px 0 rgba(20, 17, 13, 0.9),
    0 1px 2px rgba(0,0,0,0.4);
}
.cube3d-edge:hover {
  background: #b5342e;
  box-shadow:
    inset 1px 1px 0 rgba(220, 100, 90, 0.9),
    inset -1px -1px 0 rgba(80, 20, 16, 0.9),
    0 0 8px rgba(201,168,123,0.5);
}
.cube3d-edge.active {
  background: var(--accent-gold);
  box-shadow:
    inset 1px 1px 0 rgba(240, 220, 180, 0.9),
    inset -1px -1px 0 rgba(140, 110, 60, 0.9),
    0 0 10px rgba(201,168,123,0.6);
}
/* 水平边（前后方向，宽度自适应） */
.c3d-e-tf { top: 8px; left: 50%; transform: translateX(-50%) translateZ(var(--cube-half)); width: calc(var(--cube-half) * 1.4); height: var(--edge-thick); }
.c3d-e-tb { top: 8px; left: 50%; transform: translateX(-50%) translateZ(calc(var(--cube-half) * -1)); width: calc(var(--cube-half) * 1.4); height: var(--edge-thick); }
.c3d-e-bf { bottom: 8px; left: 50%; transform: translateX(-50%) translateZ(var(--cube-half)); width: calc(var(--cube-half) * 1.4); height: var(--edge-thick); }
.c3d-e-bb { bottom: 8px; left: 50%; transform: translateX(-50%) translateZ(calc(var(--cube-half) * -1)); width: calc(var(--cube-half) * 1.4); height: var(--edge-thick); }
/* 垂直边（左右方向，高度自适应） */
.c3d-e-tl { top: 50%; left: 8px; transform: translateY(-50%) translateZ(var(--cube-half)); width: var(--edge-thick); height: calc(var(--cube-half) * 1.4); }
.c3d-e-tr { top: 50%; right: 8px; transform: translateY(-50%) translateZ(var(--cube-half)); width: var(--edge-thick); height: calc(var(--cube-half) * 1.4); }
.c3d-e-bl { top: 50%; left: 8px; transform: translateY(-50%) translateZ(calc(var(--cube-half) * -1)); width: var(--edge-thick); height: calc(var(--cube-half) * 1.4); }
.c3d-e-br { top: 50%; right: 8px; transform: translateY(-50%) translateZ(calc(var(--cube-half) * -1)); width: var(--edge-thick); height: calc(var(--cube-half) * 1.4); }
/* 连接前后的边（左右面，旋转 90°） */
.c3d-e-fl { top: 50%; left: 8px; transform: translateY(-50%) rotateY(90deg) translateZ(var(--cube-half)); width: var(--edge-thick); height: calc(var(--cube-half) * 1.4); }
.c3d-e-fr { top: 50%; right: 8px; transform: translateY(-50%) rotateY(-90deg) translateZ(var(--cube-half)); width: var(--edge-thick); height: calc(var(--cube-half) * 1.4); }
.c3d-e-bl2 { top: 50%; left: 8px; transform: translateY(-50%) rotateY(90deg) translateZ(calc(var(--cube-half) * -1)); width: var(--edge-thick); height: calc(var(--cube-half) * 1.4); }
.c3d-e-br2 { top: 50%; right: 8px; transform: translateY(-50%) rotateY(-90deg) translateZ(calc(var(--cube-half) * -1)); width: var(--edge-thick); height: calc(var(--cube-half) * 1.4); }

/* ========== 构件信息面板（古建主题，下移避免遮挡） ========== */
.model-info-panel:empty { display: none; }
.model-info-panel {
  position: absolute;
  top: 110px; left: 16px;
  width: 260px;
  background: linear-gradient(135deg, rgba(28, 22, 16, 0.95), rgba(40, 32, 24, 0.92));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(201, 168, 123, 0.35);
  border-radius: 10px;
  z-index: 7;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,168,123,0.1) inset;
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  max-height: calc(100% - 150px);
  overflow-y: auto;
  box-sizing: border-box;
}
.model-info-panel.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.model-info-panel::-webkit-scrollbar { width: 4px; }
.model-info-panel::-webkit-scrollbar-track { background: transparent; }
.model-info-panel::-webkit-scrollbar-thumb { background: rgba(201,168,123,0.3); border-radius: 2px; }
.info-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid rgba(201, 168, 123, 0.2);
  background: linear-gradient(135deg, rgba(181,52,46,0.25), transparent);
  border-radius: 10px 10px 0 0;
}
.info-panel-title {
  color: var(--accent-gold);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  /* 长构件名自动换行 */
  word-break: break-word;
  overflow-wrap: break-word;
  flex: 1;
  min-width: 0;
}
.info-panel-close {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.2s;
  flex-shrink: 0;
}
.info-panel-close:hover { color: #fff; }
.info-panel-body {
  padding: 0.7rem 1.1rem;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.4rem 0;
  font-size: 0.85rem;
  border-bottom: 1px dashed rgba(201, 168, 123, 0.12);
  /* 标签和数值之间自动换行 */
  gap: 0.5rem;
}
.info-row:last-child { border-bottom: none; }
.info-row .info-label-cn {
  color: rgba(201, 168, 123, 0.85);
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
}
.info-row .info-value-cn {
  color: #f5f0e6;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.82rem;
  text-align: right;
  word-break: break-word;
  flex: 1;
  min-width: 0;
}

/* 空模型占位 */
.no-model {
  width: 100%;
  height: clamp(360px, 55vh, 600px);
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}
.no-model .small {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* 全屏模式 */
.model-wrapper:fullscreen {
  border-radius: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

/* 响应式（≤768px 平板/大手机） */
@media (max-width: 768px) {
  .model-wrapper {
    height: clamp(380px, 68vh, 560px);
    min-height: 380px;
    max-width: 100%;
    margin: 0.75rem auto 1.5rem;
  }
  .model-info-overlay {
    top: 10px;
    left: 10px;
    padding: 0.5rem 0.75rem;
    max-width: 55%;
  }
  .model-info-title { font-size: 0.95rem; letter-spacing: 0.03em; }
  .model-info-sub { font-size: 0.72rem; margin-top: 0.2rem; }
  .model-info-panel {
    top: 72px;
    left: 10px;
    width: 210px;
    max-width: calc(100% - 20px);
  }
  .loading-emblem { width: 72px; height: 72px; }
  .loading-content { gap: 0.8rem; }
  .loading-text { font-size: 0.85rem; }
  .loading-progress { width: 140px; }
  .view-cube-container {
    width: 80px;
    height: 80px;
    top: 10px;
    right: 10px;
    --cube-half: 27px;
    --corner-size: 12px;
    --edge-thick: 8px;
  }
  .cube3d-face {
    font-size: 0.72rem;
    letter-spacing: 0;
  }
  .model-toolbar {
    bottom: 10px;
    gap: 5px;
    padding: 5px;
    /* 允许按钮在超窄屏上换行，不溢出 */
    flex-wrap: wrap;
    max-width: calc(100% - 20px);
    justify-content: center;
  }
    .tool-btn {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      font-size: 0.95rem;
      border-radius: 8px;
    }
  .construction-panel {
    width: min(320px, calc(100% - 20px));
    border-radius: 12px;
  }
  .construction-header { padding: 8px 12px; }
  .construction-body { padding: 10px 12px 12px; }
  .construction-btn { width: 36px; height: 32px; font-size: 0.85rem; }
  .construction-speed { font-size: 0.68rem; }
  .speed-btn { padding: 2px 8px; font-size: 0.65rem; }
  .construction-toggles { gap: 6px; margin-bottom: 8px; }
  .toggle-btn { padding: 3px 10px; font-size: 0.62rem; }
  .layer-name { font-size: 0.8rem; }
  .layer-components { font-size: 0.65rem; }
}

/* 响应式（≤600px 中等手机） */
@media (max-width: 600px) {
  .model-wrapper {
    height: clamp(340px, 65vh, 500px);
    min-height: 340px;
    border-radius: var(--radius);
  }
  .model-info-overlay {
    top: 8px;
    left: 8px;
    padding: 0.4rem 0.65rem;
    max-width: 50%;
    border-left-width: 2px;
  }
  .model-info-title { font-size: 0.85rem; }
  .model-info-sub { font-size: 0.75rem; }
  .model-info-panel {
    top: 64px;
    left: 8px;
    width: 180px;
  }
  .view-cube-container {
    width: 72px;
    height: 72px;
    top: 8px;
    right: 8px;
    --cube-half: 24px;
  }
  .cube3d-face { font-size: 0.68rem; }
  .tool-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 0.85rem;
    border-radius: 7px;
  }
  .model-toolbar {
    bottom: 8px;
    gap: 4px;
    padding: 4px;
  }
  .construction-panel {
    bottom: 56px;
    width: min(280px, calc(100% - 16px));
    border-radius: 10px;
  }
  .construction-header { padding: 7px 10px; }
  .construction-title { font-size: 0.78rem; }
  .construction-close { width: 20px; height: 20px; font-size: 0.8rem; }
  .construction-body { padding: 8px 10px 10px; }
  .construction-progress-bar { height: 5px; }
  .construction-progress-text { font-size: 0.65rem; }
  .construction-controls { gap: 6px; margin-bottom: 8px; }
  .construction-btn { width: 32px; height: 28px; font-size: 0.75rem; border-radius: 6px; }
  .construction-speed { font-size: 0.62rem; gap: 4px; margin-bottom: 8px; }
  .speed-btn { padding: 2px 6px; font-size: 0.6rem; border-radius: 10px; }
  .construction-toggles { gap: 5px; margin-bottom: 6px; }
  .toggle-btn { padding: 2px 8px; font-size: 0.58rem; }
  .layer-name { font-size: 0.75rem; }
  .layer-components { font-size: 0.6rem; }
}

/* 响应式（≤480px 小手机） */
@media (max-width: 480px) {
  .model-wrapper {
    height: clamp(300px, 62vh, 460px);
    min-height: 300px;
  }
  .model-info-overlay { max-width: 55%; padding: 0.35rem 0.55rem; }
  .model-info-title { font-size: 0.85rem; }
  .model-info-sub { font-size: 0.75rem; }
  .view-cube-container {
    display: none;
  }
  .tool-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 0.8rem;
  }
  .construction-panel {
    bottom: 52px;
    width: min(260px, calc(100% - 12px));
    border-radius: 10px;
  }
  .construction-header { padding: 6px 8px; }
  .construction-title { font-size: 0.72rem; }
  .construction-body { padding: 6px 8px 8px; }
  .construction-progress-bar { height: 4px; }
  .construction-progress-text { font-size: 0.6rem; }
  .construction-controls { gap: 5px; margin-bottom: 6px; }
  .construction-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 0.7rem; border-radius: 5px; }
  .construction-speed { font-size: 0.58rem; gap: 3px; margin-bottom: 6px; }
  .speed-btn { padding: 1px 5px; font-size: 0.55rem; }
  .construction-toggles { gap: 4px; margin-bottom: 5px; }
  .toggle-btn { padding: 2px 6px; font-size: 0.52rem; border-radius: 10px; }
  .layer-name { font-size: 0.7rem; }
  .layer-components { font-size: 0.55rem; }
}

/* 3D 徽标 */
.model-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(185,28,28,0.08);
  color: var(--accent);
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(185,28,28,0.15);
}

/* ========== 详情页 ========== */
.project-detail,
.component-detail {
  padding: 2rem 0;
}
.project-detail h1,
.component-detail h1 {
  color: var(--accent);
  font-family: var(--font-heading);
  font-weight: 700;
}
.component-meta {
  margin: 1rem 0;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.description {
  font-size: 1.1rem;
  margin: 2rem 0;
  line-height: 1.9;
  color: var(--text-primary);
}
.tags-section { margin: 1.5rem 0; }
.tag {
  display: inline-block;
  background: rgba(201,168,123,0.12);
  color: var(--accent-gold-dark);
  padding: 0.2rem 0.8rem;
  border-radius: 12px;
  font-size: 0.85rem;
  margin: 0.2rem;
}
.project-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ========== 文章 ========== */
.article-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
/* .article-card 主样式定义见后方"文章列表（图文混排）"区块；此处仅保留标题样式 */
.article-card h3 { margin: 0.5rem 0; font-size: 1.1rem; }
.article-card h3 a {
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-heading);
}
.article-card h3 a:hover { color: var(--accent); }
.article-date {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0.5rem 0;
}
.article-cover {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.article-cover-full {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin: 1rem 0;
}
.article-summary {
  background: var(--bg-surface);
  padding: 1rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1rem 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.article-content {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--text-primary);
  word-break: break-word;
  overflow-wrap: break-word;
}
/* 文章目录 */
.article-toc {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.article-toc .toc-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.article-toc .toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 1.5rem;
}
.article-toc .toc-item {
  margin-bottom: 0.25rem;
  break-inside: avoid;
}
.article-toc .toc-item.toc-level-h3 {
  padding-left: 1rem;
}
.article-toc .toc-item a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.5;
  display: block;
  padding: 0.15rem 0;
  transition: color var(--transition);
}
.article-toc .toc-item a:hover {
  color: var(--accent);
}
@media (max-width: 600px) {
  .article-toc .toc-list { columns: 1; }
}
/* 标题层级 */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  color: var(--accent-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.4;
  margin: 2rem 0 1rem;
}
.article-content h1 {
  font-size: 1.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-light);
}
.article-content h2 {
  font-size: 1.35rem;
  padding-left: 0.75rem;
  border-left: 4px solid var(--accent);
  margin-top: 2.2rem;
}
.article-content h3 {
  font-size: 1.18rem;
  color: var(--accent);
}
.article-content h4 { font-size: 1.06rem; }
.article-content h5,
.article-content h6 { font-size: 0.95rem; color: var(--text-secondary); }
/* 段落 */
.article-content p {
  margin: 1.1rem 0;
  text-align: justify;
  text-justify: inter-ideograph;
}
/* 行内元素 */
.article-content strong {
  color: var(--accent-dark);
  font-weight: 700;
}
.article-content em { font-style: italic; color: var(--text-secondary); }
.article-content del { color: var(--text-muted); }
.article-content a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(181,52,46,0.25);
  transition: border-color 0.2s;
}
.article-content a:hover { border-bottom-color: var(--accent); }
.article-content sup,
.article-content sub { font-size: 0.75em; line-height: 0; }
/* 列表 */
.article-content ul,
.article-content ol {
  margin: 1.1rem 0;
  padding-left: 1.6rem;
}
.article-content li {
  margin: 0.4rem 0;
  text-align: justify;
}
.article-content ul li::marker { color: var(--accent); }
.article-content ol li::marker { color: var(--accent); font-weight: 600; }
/* 图片（来自 marked 自定义 renderer 的 figure） */
.article-content .article-fig,
.article-content figure {
  margin: 1.5rem auto;
  text-align: center;
  max-width: 100%;
}
.article-content .article-fig img,
.article-content figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
  margin: 0 auto;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.article-content .article-fig.broken,
.article-content figure.broken { display: none; }
.article-content figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}
/* 单独的 img（非 figure 包裹） */
.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
  margin: 1.2rem auto;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
/* 表格响应式滚动容器 */
.article-content .table-wrapper {
  overflow-x: auto;
  margin: 1.5rem 0;
  -webkit-overflow-scrolling: touch;
}
.article-content .table-wrapper::-webkit-scrollbar { height: 4px; }
.article-content .table-wrapper::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
/* 表格（斑马纹、边框、圆角） */
.article-content table {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  border: 1px solid var(--border-light);
}
.article-content thead {
  background: var(--accent);
  color: #fff;
}
.article-content thead th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  border-right: 1px solid rgba(255,255,255,0.15);
}
.article-content thead th:last-child { border-right: none; }
.article-content tbody td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  vertical-align: top;
}
.article-content tbody td:last-child { border-right: none; }
.article-content tbody tr:last-child td { border-bottom: none; }
.article-content tbody tr:nth-child(even) { background: rgba(155,139,122,0.06); }
.article-content tbody tr:hover { background: rgba(181,52,46,0.05); }
/* 引用块 */
.article-content blockquote {
  border-left: 4px solid var(--accent);
  background: rgba(181,52,46,0.04);
  padding: 0.8rem 1.2rem;
  margin: 1.3rem 0;
  color: var(--text-secondary);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: normal;
}
.article-content blockquote p { margin: 0.5rem 0; }
.article-content blockquote p:first-child { margin-top: 0; }
.article-content blockquote p:last-child { margin-bottom: 0; }
/* 代码 */
.article-content pre {
  background: #2b2b2b;
  color: #f8f8f2;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 1.2rem 0;
  font-size: 0.9rem;
  line-height: 1.6;
}
.article-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}
.article-content code {
  background: rgba(181,52,46,0.08);
  color: var(--accent);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  font-size: 0.88em;
}
/* 分割线 */
.article-content hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-light), transparent);
  margin: 2rem 0;
}
/* 首段加大字号（公众号风格） */
.article-content > p:first-of-type {
  font-size: 1.1rem;
  color: var(--text-primary);
}
/* 段落首行缩进（仅在含中文的段落生效，通过 class 控制） */
.article-content.indent p { text-indent: 2em; }
.article-content.indent p:first-of-type,
.article-content.indent li,
.article-content.indent blockquote p { text-indent: 0; }

/* ========== 搜索 ========== */
mark {
  background: rgba(181,52,46,0.12);
  color: var(--accent);
  padding: 0 0.15rem;
  border-radius: 2px;
}
.result-count {
  color: var(--text-secondary);
  margin-bottom: 2rem;
}
.search-results {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.result-item {
  background: var(--bg-card);
  padding: 1.2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: stretch;
  gap: 1.2rem;
  transition: box-shadow var(--transition), transform var(--transition);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
}
.result-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.result-thumb {
  flex-shrink: 0;
  width: 140px;
  height: 100px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-surface);
}
.result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.result-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.result-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.result-type {
  background: rgba(201,168,123,0.15);
  color: var(--accent-gold-dark);
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
  font-size: 0.85rem;
  white-space: nowrap;
}
.result-link {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 600;
}
.result-item:hover .result-link { color: var(--accent); }
.result-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* ========== 文件下载 ========== */
.file-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.file-card {
  background: var(--bg-card);
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition);
}
.file-card:hover { box-shadow: var(--shadow-hover); }
.file-card h3 { margin: 0 0 0.75rem 0; color: var(--text-primary); font-size: 1rem; }
.file-category {
  display: inline-block;
  background: var(--bg-surface);
  color: var(--text-secondary);
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
}

/* ========== 支持我们 ========== */
.support-page { padding: 2rem 0; }
.support-hero {
  text-align: center;
  padding: 3rem 1rem 2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}
.support-hero h1 {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--accent);
}
.support-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 1rem 0 0.5rem;
}
.support-sub {
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.support-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 900px;
  margin: 0 auto;
}
.support-card {
  background: var(--bg-card);
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
}
.support-card-icon { font-size: 2rem; margin-bottom: 0.75rem; }
.support-card h2 {
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.support-card-desc {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}
.tier-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.tier-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  position: relative;
  transition: border-color var(--transition);
}
.tier-card:hover { border-color: var(--accent-gold); }
.tier-highlight { border-color: var(--accent-gold); border-width: 2px; }
.tier-badge {
  position: absolute;
  top: -0.6rem; right: 1rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-weight: 700;
}
.tier-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-light);
}
.tier-name { font-weight: 700; color: var(--text-primary); }
.tier-price { color: var(--accent); font-weight: 700; font-size: 1.25rem; }
.tier-card ul { list-style: none; padding: 0; margin: 0; }
.tier-card li {
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: 0.3rem 0;
  padding-left: 1rem;
  position: relative;
}
.tier-card li::before {
  content: '〰';
  color: var(--accent-gold);
  position: absolute;
  left: 0;
  font-size: 0.7rem;
}
.tier-cta {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}
.cta-hint { margin-top: 0.5rem; }
.support-form { margin-top: 1rem; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.form-group { margin-bottom: 1rem; }
.form-group label,
.amount-row label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: var(--font-body);
  transition: border-color var(--transition);
}
.form-group input:focus-visible,
.form-group textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(181,52,46,0.12);
}
.amount-row { margin-bottom: 1rem; }
.amount-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.amount-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.amount-btn:hover { border-color: var(--accent); color: var(--accent); }
.amount-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}
.amount-options input[type="number"] {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius);
  width: 120px;
  font-size: 0.9rem;
  font-family: var(--font-body);
}
.amount-options input[type="number"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(181,52,46,0.12);
}
.donate-submit {
  display: block;
  width: 100%;
  padding: 0.85rem;
  font-size: 1.1rem;
  margin-top: 1rem;
  font-weight: 600;
}
.asset-list { display: flex; flex-direction: column; gap: 0.75rem; }
.asset-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--bg-surface);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  gap: 1rem;
}
.asset-info { flex: 1; min-width: 0; }
.asset-info h3 { color: var(--text-primary); font-size: 1rem; margin-bottom: 0.3rem; }
.asset-info p { color: var(--text-secondary); font-size: 0.85rem; margin: 0; }
.asset-badge {
  flex-shrink: 0;
  font-size: 0.75rem;
  background: var(--bg-card);
  color: var(--accent);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.asset-badge:hover { background: var(--accent); color: #fff; }
.asset-free {
  background: rgba(60,130,80,0.08);
  border-color: #5a9a5a;
  color: #3a7a4a;
}
.asset-free:hover { background: rgba(60,130,80,0.2); }
.community-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.community-box {
  background: var(--bg-surface);
  padding: 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  text-align: center;
}
.community-box h3 { color: var(--text-primary); font-size: 1rem; margin-bottom: 0.5rem; }
.community-box p { color: var(--text-secondary); font-size: 0.9rem; margin: 0.25rem 0; }
.community-box strong { color: var(--accent); }
.community-sub { font-size: 0.8rem !important; color: var(--text-muted); }
.success-msg {
  background: rgba(60,130,80,0.08);
  border: 1px solid rgba(60,130,80,0.3);
  color: #3a7a4a;
  padding: 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.error-msg {
  background: rgba(181,52,46,0.06);
  border: 1px solid rgba(181,52,46,0.2);
  color: var(--accent);
  padding: 0.75rem;
  border-radius: var(--radius);
  text-align: center;
  margin-bottom: 1rem;
}

/* ========== 空状态 ========== */
.empty-tip {
  color: var(--text-muted);
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
}

/* ========== 页脚 ========== */
footer {
  background: var(--bg-surface);
  margin-top: 4rem;
  position: relative;
}

.footer-ornament {
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%, var(--accent-gold) 20%, var(--accent) 50%, var(--accent-gold) 80%, transparent 100%);
  opacity: 0.4;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.footer-brand {
  text-align: center;
}

.footer-logo {
  font-family: var(--font-calligraphy);
  font-size: 1.5rem;
  color: var(--accent);
}

.footer-brand p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.3rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color var(--transition);
}

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

.footer-info {
  text-align: right;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.footer-copy { margin-top: 0.3rem; }
.footer-company { margin-top: 0.3rem; font-size: 0.82rem; color: var(--text-muted); }

/* ========== 面包屑 ========== */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  padding: 0.5rem 0;
}
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { color: var(--text-primary); }

/* ========== 相关推荐 ========== */
.related-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: none;
}
.related-section h3 {
  color: var(--accent);
  font-family: var(--font-heading);
  margin-bottom: 1rem;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.related-card {
  background: var(--bg-card);
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.related-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.related-card-link:hover .related-card {
  border-color: var(--accent-gold);
  box-shadow: var(--shadow);
}
.related-card h4 { margin: 0 0 0.3rem 0; font-size: 0.95rem; color: var(--accent); }
.related-card .related-meta { font-size: 0.8rem; color: var(--text-muted); }

/* ========== 分页 ========== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.pagination a,
.pagination span {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  text-decoration: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .current {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 700;
}
.pagination .disabled { opacity: 0.35; pointer-events: none; }

/* ========== 新版首页 ========== */
.hero-new {
  text-align: center;
  padding: 5rem 1rem 3rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(185,28,28,0.015) 0%, transparent 60%);
}
.hero-new h1 {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
  letter-spacing: 0.08em;
  font-weight: 900;
}
.hero-sub {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

/* 首页众筹条：多项目横向滚动容器 */
.hero-cf-scroll {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  padding: 0.25rem 0.1rem;
  margin-bottom: 1.5rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.hero-cf-scroll::-webkit-scrollbar { height: 4px; }
.hero-cf-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.hero-cf-scroll .hero-progress {
  flex: 0 1 auto;
  text-decoration: none;
}
.hero-cf-scroll .hero-cf-link {
  max-width: 320px;
}
@media (max-width: 600px) {
  .hero-cf-scroll { justify-content: flex-start; }
  .hero-cf-scroll .hero-cf-link { max-width: 200px; }
}
.hero-progress {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--bg-surface);
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  max-width: min(100%, 720px);
}
.hero-cf-badge {
  flex-shrink: 0;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(181,52,46,0.12);
  color: #b5342e;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.hero-cf-link {
  color: var(--text-primary);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.hero-cf-link:hover { color: var(--accent); text-decoration: underline; }
.mini-pct {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}
.hero-progress .mini-bar {
  width: 100px;
  height: 5px;
  background: var(--bg-card);
  border-radius: 3px;
  overflow: hidden;
}
.hero-progress .mini-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 1s ease;
}
.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  padding: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
  background: var(--border);
}
.stat-item {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--bg-primary);
}
.stat-num {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-heading);
}
.stat-label { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.25rem; }

.tab-section { margin-bottom: 2.5rem; }
.tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.tab-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.95rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition), border-color var(--transition);
  font-family: var(--font-body);
}
.tab-btn:hover { color: var(--accent); }
.tab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.timeline-section {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.timeline-section h2 {
  color: var(--accent);
  font-family: var(--font-heading);
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
}
.timeline {
  position: relative;
  padding-left: 2rem;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 0.5rem; top: 0; bottom: 0;
  width: 1px;
  background: var(--border);
}
.timeline-item {
  position: relative;
  padding-bottom: 1.25rem;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -1.65rem;
  top: 0.35rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
/* 未来里程碑：金色虚线圆点 */
.timeline-item.timeline-future::before {
  background: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 123, 0.2);
}
.timeline-item.timeline-future .timeline-date {
  color: var(--accent-gold);
  font-weight: 600;
}
/* 关于页注释与列表 */
.about-note {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  background: rgba(201, 168, 123, 0.08);
  border-left: 3px solid var(--accent-gold);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 0.92rem;
}
.about-list {
  margin: 1rem 0;
  padding-left: 1.5rem;
}
.about-list li {
  margin-bottom: 0.6rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.about-list li strong {
  color: var(--text-primary);
}
.timeline-date { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.2rem; }
.timeline-title { color: var(--text-primary); text-decoration: none; font-size: 0.95rem; }
.timeline-title:hover { color: var(--accent); }

/* ========== 后台登录 ========== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-form {
  background: var(--bg-card);
  padding: 3rem;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow);
}
.login-form h1 {
  color: var(--accent);
  text-align: center;
  margin-bottom: 2rem;
  font-family: var(--font-heading);
}
.login-form input {
  width: 100%;
  padding: 0.8rem;
  margin-bottom: 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 1rem;
  font-family: var(--font-body);
}
.login-form input:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(181,52,46,0.12);
}
.login-form button {
  width: 100%;
  padding: 0.8rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--transition);
}
.login-form button:hover { background: var(--accent-dark); }

/* ========== 后台通用 ========== */
.admin-page,
.dashboard { padding: 2rem 0; }
.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}
.admin-card {
  background: var(--bg-card);
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  text-decoration: none;
  color: var(--text-primary);
  transition: box-shadow var(--transition), transform var(--transition);
  box-shadow: var(--shadow-card);
}
.admin-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.admin-card h2 {
  color: var(--accent);
  margin: 0 0 1rem 0;
  font-family: var(--font-heading);
}
.admin-card p a {
  color: var(--accent-gold);
  text-decoration: none;
  font-size: 0.85rem;
}
.admin-card p a:hover {
  text-decoration: underline;
}
.card-count {
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0.5rem 0;
}

/* 后台编辑页统计卡片 */
.admin-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}
.admin-stat-card {
  flex: 1;
  min-width: 100px;
  text-align: center;
  padding: 0.75rem 1rem;
  background: var(--bg-surface);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
}
.admin-stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.admin-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-heading);
}
@media (max-width: 600px) {
  .admin-stats-row { flex-direction: column; }
  .admin-stat-card { min-width: unset; }
}

.admin-form {
  background: var(--bg-card);
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  margin-bottom: 2rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.admin-form.highlight {
  animation: formHighlight 0.5s ease-out;
  box-shadow: 0 0 0 3px rgba(181, 52, 46, 0.2), var(--shadow-card);
  border-color: var(--accent);
}
@keyframes formHighlight {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}
.admin-form + .admin-form {
  margin-top: 2rem;
}
.admin-form h3 {
  margin-top: 0;
  color: var(--accent);
  font-size: 1.15rem;
}
.admin-form label {
  display: block;
  color: var(--accent-dark);
  margin: 1rem 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.admin-form input,
.admin-form textarea,
.admin-form select {
  width: 100%;
  padding: 0.8rem;
  margin-bottom: 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 1rem;
  font-family: var(--font-body);
}
.admin-form input:focus-visible,
.admin-form textarea:focus-visible,
.admin-form select:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(181,52,46,0.12);
}
.admin-form textarea { min-height: 150px; resize: vertical; }
.admin-form input[type="checkbox"] { width: auto; margin-right: 0.5rem; }
.admin-form button {
  padding: 0.8rem 2rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  margin-top: 1rem;
  transition: background var(--transition);
}
.admin-form button:hover { background: var(--accent-dark); }

.admin-form .cf-fieldset {
  margin: 1.5rem 0 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(201,168,123,0.35);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(201,168,123,0.05), transparent);
}
.admin-form .cf-fieldset legend {
  font-weight: 600;
  color: var(--accent-dark);
  padding: 0 0.5rem;
  font-size: 1rem;
}
.admin-form .cf-fieldset label { margin-top: 0.75rem; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-light);
}
.admin-table th,
.admin-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  background: var(--bg-card);
}
.admin-table th {
  color: var(--accent-dark);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  border-bottom: 2px solid var(--accent);
}
.admin-table tr:hover { background: rgba(181,52,46,0.04); }

.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.stat-card {
  background: var(--bg-card);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.stat-card h3 { color: var(--accent); margin: 0 0 0.5rem; }
.stat-number { font-size: 2rem; font-weight: 700; color: var(--text-primary); }

/* ========== AI 助手 ========== */
.ai-section {
  background: var(--bg-surface);
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  margin-top: 1rem;
}
.ai-section h3 { color: var(--accent); margin-top: 0; }
.ai-row { display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.ai-row input {
  flex: 1;
  min-width: 200px;
  padding: 0.6rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 1rem;
  font-family: var(--font-body);
}
.ai-row input:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(181,52,46,0.12);
}

/* ========== 文字轮播动画 ========== */
.hero-rotating {
  height: 1.8em;
  overflow: hidden;
  margin: 0.75rem 0;
  font-size: 1rem;
  color: var(--text-secondary);
  position: relative;
}

.hero-rotating span {
  display: block;
  height: 1.8em;
  line-height: 1.8em;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(1em);
  animation: heroRotate 12s infinite ease-in-out;
}

.hero-rotating span:nth-child(1) { animation-delay: 0s; }
.hero-rotating span:nth-child(2) { animation-delay: 4s; }
.hero-rotating span:nth-child(3) { animation-delay: 8s; }

@keyframes heroRotate {
  0%, 25%   { opacity: 0; transform: translateY(1em); }
  8%, 33%   { opacity: 1; transform: translateY(0); }
  35%, 100% { opacity: 0; transform: translateY(-1em); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rotating { height: auto; overflow: visible; }
  .hero-rotating span {
    position: static;
    animation: none;
    opacity: 1;
    transform: none;
    display: inline;
    margin-right: 1rem;
  }
}

/* ========== 点赞按钮状态 ========== */
.btn-like.liked {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  cursor: default;
}

.btn-like.liked:hover {
  background: var(--accent);
  color: #fff;
}

.btn-like:active:not(:disabled) {
  transform: scale(0.95);
}

/* ========== 点赞动效 ========== */
@keyframes likePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.btn-like.liked {
  animation: likePop 0.4s ease;
}

/* ========== 404 页面 ========== */
.error-page {
  text-align: center;
  padding: 4rem 1rem;
}

.error-page h1 {
  font-size: 6rem;
  color: var(--accent);
  font-family: var(--font-heading);
  margin: 0;
  letter-spacing: 0.1em;
}

.error-page p {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin: 1rem 0 2rem;
}

/* ========== 主体偏移 ========== */
main.container {
  padding-top: 80px;
  min-height: 60vh;
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
  .hero h1 { font-size: 1.8rem; }
  .hero-new h1 { font-size: 2rem; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .tab-bar { flex-wrap: wrap; }
  .footer-content { grid-template-columns: 1fr; text-align: center; }
  .footer-info { text-align: center; }
  /* 手机端页脚整体居中，邮箱联系方式同步居中 */
  .footer-info .footer-contact { justify-content: center; }
  .footer-info .footer-contact-item { text-align: center; }

  .nav-links {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    padding: 0.75rem 0;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }
  .nav-links.active { display: flex; }
  .nav-links a {
    padding: 0.6rem 1.5rem;
    border-radius: 0;
  }
  .navbar-inner { flex-wrap: wrap; position: relative; height: auto; min-height: 64px; padding: 0.5rem 20px; }
  .menu-toggle { display: block; }
  .search-form { width: 100%; }
  .search-form input { width: 100%; }
  .project-grid, .component-grid, .article-list, .file-list { grid-template-columns: 1fr; }
  .admin-table { font-size: 0.85rem; }
  .admin-table th, .admin-table td { padding: 0.5rem; }
  .about-us, .about-content, .donate-section { padding: 1.5rem; }
  .filter-bar { flex-direction: column; }
  .filter-bar select, .filter-bar input { width: 100%; }
  /* 纵向布局下 flex-basis 会被当作高度，导致搜索框被拉成 200px */
  .filter-bar .search-input { flex: 0 0 auto; min-width: 0; }
  .image-row img { width: 100%; }
  .result-thumb { width: 90px; height: 70px; }
  .result-link { font-size: 1rem; }
  .model-wrapper model-viewer { height: 50vh; min-height: 280px; }
}

/* ---------- 小屏手机（480px） ---------- */
@media (max-width: 480px) {
  .hero h1 { font-size: 1.5rem; letter-spacing: 0.05em; }
  .hero-new h1 { font-size: 1.7rem; }
  .hero-rotating { font-size: 0.9rem; }
  .hero-progress { grid-template-columns: repeat(2, 1fr); }
  .hero-progress .progress-item { font-size: 0.8rem; }
  .stats-bar { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .stats-bar .stat-item { padding: 0.6rem; }
  .container { padding: 0 12px; }
  .card-title { font-size: 1rem; }
  .card-sub { font-size: 0.75rem; }
  .filter-bar { gap: 0.3rem; }
  .pagination .page-link, .pagination .page-current { padding: 0.3rem 0.5rem; font-size: 0.85rem; }
  .admin-cards { grid-template-columns: 1fr; }
  .donate-card { padding: 1.2rem; }
  .donate-tier { font-size: 1.3rem; }
  .error-page h1 { font-size: 4rem; }
  .login-box { width: 95%; padding: 1.5rem; }
  .model-wrapper model-viewer { height: 45vh; min-height: 240px; }
  .model-interact-hint { display: none; }
}

/* ---------- 平板横屏（1024px） ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero h1 { font-size: 2.2rem; }
  .hero-new h1 { font-size: 2.5rem; }
  .project-grid, .component-grid { grid-template-columns: repeat(3, 1fr); }
  .article-list { grid-template-columns: repeat(2, 1fr); }
  .file-list { grid-template-columns: repeat(3, 1fr); }
  .footer-content { grid-template-columns: 1fr 1fr; }
  .stats-bar { grid-template-columns: repeat(4, 1fr); }
  .hero-progress { grid-template-columns: repeat(4, 1fr); }
  .container { max-width: 960px; }
  .navbar-inner { padding: 0 24px; }
  .donate-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- 大屏优化（1440px+） ---------- */
@media (min-width: 1440px) {
  .container { max-width: 1320px; }
  .hero h1 { font-size: 3rem; }
  .hero-new h1 { font-size: 3.2rem; }
  .project-grid, .component-grid { grid-template-columns: repeat(4, 1fr); }
  .article-list { grid-template-columns: repeat(3, 1fr); }
  .file-list { grid-template-columns: repeat(4, 1fr); }
  .navbar-inner { padding: 0 40px; }
  .stats-bar { grid-template-columns: repeat(4, 1fr); }
}

/* ========== 项目里程碑时间线 ========== */
.milestone {
  position: relative;
  margin: 2rem 0;
  padding: 1.5rem 0;
  border-left: 3px solid var(--accent);
  margin-left: 1rem;
}

.milestone-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.8rem 0 0.8rem 1.5rem;
  position: relative;
}

.milestone-date {
  font-family: var(--font-heading);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.95rem;
}

.milestone-dot {
  position: absolute;
  left: -8px;
  top: 1.2rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 3px solid var(--accent);
  grid-column: 1;
}

.milestone-dot.milestone-active {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(181, 52, 46, 0.15);
}

.milestone-title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1.05rem;
  grid-column: 2;
}

.milestone-desc {
  grid-column: 2;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .milestone-item {
    grid-template-columns: 1fr;
    padding-left: 1rem;
  }
  .milestone-date {
    font-size: 0.85rem;
  }
  .milestone-title {
    font-size: 0.95rem;
  }
  .milestone-desc {
    font-size: 0.85rem;
  }
}

/* ========================================
   后台管理增强样式
   ======================================== */

/* 后台工具栏（搜索 + 操作） */
.admin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.admin-toolbar-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.admin-search-form {
  display: flex;
  gap: 0.5rem;
  flex: 1;
  min-width: 250px;
  max-width: 500px;
}
.admin-search-form input {
  flex: 1;
  padding: 0.5rem 1rem;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.95rem;
  font-family: var(--font-body);
}
.admin-search-form input:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(181,52,46,0.12);
}

/* 后台表格缩略图列 */
.admin-table-thumb .col-thumb {
  width: 60px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-thumb {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
}
.admin-thumb-placeholder {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border-radius: 6px;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  font-size: 0.7rem;
}

/* 状态徽标 */
.badge-dot {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-yes {
  background: rgba(60,130,80,0.12);
  color: #3a7a4a;
}
.badge-no {
  background: rgba(155,139,122,0.12);
  color: var(--text-muted);
}
.badge-cf-live {
  background: rgba(76, 175, 80, 0.15);
  color: #2e7d32;
}
.badge-cf-success {
  background: rgba(201,168,123,0.18);
  color: #8a6a2f;
}
.badge-cf-failed {
  background: rgba(158,158,158,0.15);
  color: #616161;
}
html[data-theme="dark"] .badge-cf-live { color: #81c784; }
html[data-theme="dark"] .badge-cf-success { color: #d4b87a; }
html[data-theme="dark"] .badge-cf-failed { color: #b0b0b0; }

/* 后台按钮变体：审核/警告 */
.btn-small.verify {
  background: rgba(60,130,80,0.12);
  color: #3a7a4a;
  border: 1px solid rgba(60,130,80,0.3);
}
.btn-small.verify:hover { background: rgba(60,130,80,0.2); }
.btn-small.warn {
  background: rgba(201,168,123,0.15);
  color: #8a6a2f;
  border: 1px solid rgba(201,168,123,0.35);
}
.btn-small.warn:hover { background: rgba(201,168,123,0.25); }
html[data-theme="dark"] .btn-small.verify { background: rgba(76,175,80,0.2); color: #81c784; }
html[data-theme="dark"] .btn-small.warn { background: rgba(201,168,123,0.2); color: #d4b87a; }

/* 捐赠记录行状态 */
.donation-verified { background: rgba(60,130,80,0.03); }
.donation-pending { background: rgba(201,168,123,0.03); }
html[data-theme="dark"] .donation-verified { background: rgba(76,175,80,0.06); }
html[data-theme="dark"] .donation-pending { background: rgba(201,168,123,0.06); }

/* 状态徽章 */
.status-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}
.status-verified {
  background: rgba(60,130,80,0.15);
  color: #3a7a4a;
}
.status-pending {
  background: rgba(201,168,123,0.18);
  color: #8a6a2f;
}
html[data-theme="dark"] .status-verified { background: rgba(76,175,80,0.25); color: #81c784; }
html[data-theme="dark"] .status-pending { background: rgba(201,168,123,0.25); color: #d4b87a; }

/* 后台页面标题统一（非 admin-page-header 的 h1） */
.admin-page > h1,
.dashboard > h1 {
  margin: 0 0 1.25rem 0;
  font-size: 1.6rem;
  color: var(--accent);
  font-family: var(--font-heading);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border);
}
.admin-page h2 {
  margin: 2rem 0 1rem;
  font-size: 1.25rem;
  color: var(--accent-dark);
  font-family: var(--font-heading);
}

/* 后台 footer 简洁样式 */
main.container + footer {
  text-align: center;
  padding: 1.5rem 20px;
  margin-top: 3rem;
}
main.container + footer p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* 后台返回链接 */
.admin-page > p a.btn-secondary,
.admin-form + p a.btn-secondary {
  display: inline-block;
  margin-top: 1.5rem;
}

/* 项目卡片上的众筹徽标 */
.card-cf-row {
  margin: 0.5rem 0 0.25rem;
}
.card-cf-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.card-cf-badge.card-cf-live {
  background: rgba(76, 175, 80, 0.15);
  color: #2e7d32;
  border: 1px solid rgba(76, 175, 80, 0.3);
}
.card-cf-badge.card-cf-success {
  background: rgba(201,168,123,0.18);
  color: #8a6a2f;
  border: 1px solid rgba(201,168,123,0.4);
}
.card-cf-badge.card-cf-failed {
  background: rgba(158,158,158,0.15);
  color: #616161;
  border: 1px solid rgba(158,158,158,0.3);
}
html[data-theme="dark"] .card-cf-badge.card-cf-live { color: #81c784; }
html[data-theme="dark"] .card-cf-badge.card-cf-success { color: #d4b87a; }
html[data-theme="dark"] .card-cf-badge.card-cf-failed { color: #b0b0b0; }

/* 卡片内紧凑众筹行：徽章 + 进度条 */
.card-cf-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.6rem 0 0.2rem;
}
.card-cf-row-compact {
  margin-top: 0.4rem;
}
.card-cf-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-surface);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  min-width: 60px;
}
.card-cf-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 4px;
  transition: width 1.2s cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.card-cf-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: cf-shimmer 2.4s infinite;
}
html[data-theme="dark"] .card-cf-fill::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}

/* 众筹区块介绍文字 */
/* 项目详情区块 */
.project-detail-section {
  margin: 2rem 0;
  padding: 1.75rem 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition);
}
.project-detail-section:hover {
  box-shadow: var(--shadow-hover);
}

.section-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

.project-intro {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-primary);
  margin: 1.5rem 0;
}

.detail-content p {
  font-size: 0.98rem;
  line-height: 1.9;
  color: var(--text-primary);
  margin-bottom: 0.9rem;
  text-align: justify;
}
.detail-content p:last-child {
  margin-bottom: 0;
}

.project-highlights {
  margin: 0.8rem 0 1rem;
  padding: 1rem 1rem 1rem 2.5rem;
  background: linear-gradient(135deg, rgba(201,168,123,0.08), transparent);
  border-radius: 10px;
  border: 1px solid rgba(201,168,123,0.2);
}
.project-highlights li {
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.project-highlights li:last-child {
  margin-bottom: 0;
}

/* 时间线进度 */
.progress-timeline {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 0.5rem 0;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
  padding-left: 0.5rem;
}

.timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 26px;
  bottom: -18px;
  width: 2px;
  background: var(--border-light);
}

.timeline-item.timeline-done:not(:last-child)::before {
  background: var(--accent);
}

.timeline-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--border-light);
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
  z-index: 1;
}

.timeline-item.timeline-done .timeline-dot {
  background: var(--accent);
  border-color: var(--accent);
}
.timeline-item.timeline-done .timeline-dot::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.timeline-item.timeline-active .timeline-dot {
  background: var(--bg-card);
  border-color: var(--accent);
  animation: pulse-dot 1.8s infinite;
}
.timeline-item.timeline-active .timeline-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,123,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(201,168,123,0.05); }
}

.timeline-content {
  flex: 1;
}

.timeline-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}
.timeline-item.timeline-active .timeline-title {
  color: var(--accent-dark);
}

.timeline-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.timeline-item:not(.timeline-done):not(.timeline-active) .timeline-title {
  color: var(--text-muted);
}
.timeline-item:not(.timeline-done):not(.timeline-active) .timeline-desc {
  color: var(--text-muted);
  opacity: 0.8;
}

/* 信息卡片 accent 样式 */
.detail-info-card-accent {
  background: linear-gradient(135deg, rgba(201,168,123,0.1), rgba(201,168,123,0.03));
  border: 1px solid rgba(201,168,123,0.3);
}
.detail-info-card-accent .info-label {
  color: var(--accent-dark);
}

/* 深色模式适配 */
html[data-theme="dark"] .project-detail-section {
  background: var(--bg-card);
}
html[data-theme="dark"] .project-highlights {
  background: linear-gradient(135deg, rgba(201,168,123,0.1), transparent);
}

.badge-warn {
  background: rgba(200,140,40,0.14);
  color: #a8741a;
}

/* 表格内迷你进度条 */
.mini-progress {
  position: relative;
  width: 80px;
  height: 18px;
  background: var(--bg-surface);
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--border-light);
}
.mini-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 9px;
  transition: width 0.6s ease;
}
.mini-progress-text {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--text-primary);
  font-weight: 600;
}

/* 文件类型图标 */
.file-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
}
.file-type-pdf { background: rgba(181,52,46,0.08); }
.file-type-xls { background: rgba(60,130,80,0.08); }
.file-type-doc { background: rgba(50,100,180,0.08); }
.file-type-3d { background: rgba(201,168,123,0.12); }
.file-type-img { background: rgba(180,120,200,0.08); }
.file-type-zip { background: rgba(150,100,60,0.08); }

/* 表格列宽度控制 */
.admin-table .col-name { min-width: 120px; max-width: 200px; }
.admin-table .col-summary { max-width: 200px; color: var(--text-secondary); font-size: 0.88rem; }
.admin-table .col-tags { max-width: 180px; }
.table-tag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  background: rgba(181,52,46,0.08);
  color: var(--accent-dark);
  border-radius: 4px;
  font-size: 0.75rem;
  margin: 0.1rem;
  white-space: nowrap;
}
html[data-theme="dark"] .table-tag {
  background: rgba(201,168,123,0.12);
  color: var(--accent-gold);
}
.admin-table .col-date { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; }
.admin-table .col-path { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 0.82rem; }
.admin-table .col-actions {
  white-space: nowrap;
  text-align: center;
}
.admin-table .col-actions a,
.admin-table .col-actions button,
.admin-table .col-actions form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 3px;
}
.admin-table .col-actions form {
  margin: 0;
}

/* 统计图表 */
.chart-container {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-card);
}
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 200px;
  padding-top: 1rem;
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
}
.chart-bar-item {
  flex: 1;
  min-width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 0.25rem;
}
.chart-bar {
  width: 100%;
  max-width: 40px;
  background: linear-gradient(180deg, var(--accent-light), var(--accent));
  border-radius: 4px 4px 0 0;
  transition: height 0.6s ease;
  min-height: 2px;
}
.chart-bar:hover {
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
}
.chart-bar-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.chart-bar-date {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* 热门内容网格 */
.top-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.top-content-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.top-content-card h3 {
  color: var(--accent);
  margin: 0 0 1rem 0;
  font-size: 1rem;
}
.top-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.top-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.88rem;
}
.top-list li:last-child { border-bottom: none; }
.top-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--accent-gold);
  color: #fff;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.top-list li:nth-child(1) .top-rank { background: var(--accent); }
.top-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}
.top-count {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.82rem;
  flex-shrink: 0;
}

/* 仪表盘最近活动 */
.dashboard-recent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.recent-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.recent-card h3 {
  color: var(--accent);
  margin: 0 0 1rem 0;
  font-size: 1rem;
}
.recent-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.recent-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.88rem;
}
.recent-list li:last-child { border-bottom: none; }
.recent-list a {
  color: var(--text-primary);
  text-decoration: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-list a:hover { color: var(--accent); }
.recent-date {
  color: var(--text-muted);
  font-size: 0.78rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 编辑页缩略图预览 */
.thumb-preview {
  margin: 0.5rem 0 1.5rem;
  padding: 1rem;
  background: var(--bg-surface);
  border-radius: var(--radius);
  border: 1px dashed var(--border);
}
.thumb-preview-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.thumb-preview img {
  width: 200px;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  background: var(--bg-card);
}

/* 表单两列布局 */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-row-2 label {
  margin-top: 0;
}

/* 后台表格响应式 */
@media (max-width: 768px) {
  .admin-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-search-form {
    max-width: none;
  }
  .admin-table {
    font-size: 0.78rem;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .admin-table th, .admin-table td {
    padding: 0.4rem 0.5rem;
  }
  .admin-thumb, .admin-thumb-placeholder {
    width: 36px;
    height: 36px;
  }
  .form-row-2 {
    grid-template-columns: 1fr;
  }
  .thumb-preview img {
    width: 100%;
    height: 120px;
  }
  .dashboard-recent, .top-content-grid {
    grid-template-columns: 1fr;
  }
  .chart-bars {
    height: 150px;
  }
}

/* ========================================
   前台列表卡片深化样式（第二轮迭代）
   ======================================== */

/* 页面标题区 */
.page-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border-light);
}
.page-header h1 {
  margin: 0;
}
.page-count {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: normal;
  margin-left: 0.5rem;
}
.page-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* 卡片缩略图容器与角标 */
.card-thumb-wrap {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface);
}
.card-thumb-wrap img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.project-card:hover .card-thumb-wrap img,
.component-card:hover .card-thumb-wrap img {
  transform: scale(1.05);
}

.model-badge-corner {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  background: rgba(181,52,46,0.92);
  color: #fff;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.done-badge-corner {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: rgba(58,122,74,0.92);
  color: #fff;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.printable-badge-corner {
  position: absolute;
  bottom: 0.6rem;
  left: 0.6rem;
  background: rgba(60,130,80,0.92);
  color: #fff;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 600;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* 卡片标签行 */
.card-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.category-tag-year {
  background: rgba(181,52,46,0.10);
  color: var(--accent-dark);
}

/* 卡片标题链接化 */
.project-card h3 a,
.component-card h3 a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.project-card h3 a:hover,
.component-card h3 a:hover {
  color: var(--accent);
}

/* 卡片描述截断 */
.card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
  min-height: 4.8em;
  color: var(--text-secondary);
  font-size: 0.92rem;
}

/* 统计区日期 */
.stat-date {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* 空状态 */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
}
.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.6;
}
.empty-state p {
  margin: 0.5rem 0;
}
.empty-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.5rem !important;
}
.empty-hint a {
  margin: 0 0.25rem;
}

/* 分页省略号 */
.pagination-ellipsis {
  padding: 0.4rem 0.6rem;
  color: var(--text-muted);
}

/* ========== 文章卡片（横向布局） ========== */
.article-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.article-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  transition: box-shadow var(--transition), transform var(--transition);
}
.article-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.article-card-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
}
.article-cover-wrap {
  display: block;
  overflow: hidden;
  background: var(--bg-surface);
}
.article-cover {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.article-card:hover .article-cover {
  transform: scale(1.04);
}
.article-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.article-body h3 {
  margin: 0 0 0.5rem 0;
  font-family: var(--font-heading);
  font-size: 1.25rem;
}
.article-body h3 a {
  color: var(--accent-dark);
  text-decoration: none;
  transition: color var(--transition);
}
.article-body h3 a:hover {
  color: var(--accent);
}
.article-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.article-date {
  color: var(--text-muted);
}
.article-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0.5rem 0 1rem 0;
  flex: 1;
}

@media (max-width: 600px) {
  .article-card-row {
    grid-template-columns: 1fr;
  }
  .article-cover {
    min-height: 160px;
    max-height: 200px;
  }
}

/* ========== 下载页文件卡片 ========== */
.file-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.file-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.file-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent-gold);
}
.file-card-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 1.25rem;
  align-items: center;
}
.file-type-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  font-weight: 600;
  border: 1px solid var(--border-light);
}
.file-type-emoji {
  font-size: 1.8rem;
  line-height: 1;
}
.file-type-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.file-type-pdf { background: rgba(220,53,69,0.10); }
.file-type-xls { background: rgba(40,167,69,0.10); }
.file-type-doc { background: rgba(0,123,255,0.10); }
.file-type-3d { background: rgba(111,66,193,0.12); }
.file-type-img { background: rgba(255,193,7,0.14); }
.file-type-zip { background: rgba(108,117,125,0.12); }
.file-type-cad { background: rgba(23,162,184,0.12); }
.file-type-bim { background: rgba(255,127,80,0.12); }
.file-type-other { background: rgba(201,168,123,0.14); }

.file-card-body h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.05rem;
  color: var(--accent-dark);
}
.file-card-body h3 a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.file-card-body h3 a:hover {
  color: var(--accent);
}
.file-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
}
.file-category {
  background: rgba(201,168,123,0.18);
  color: var(--accent-gold-dark);
  padding: 0.2rem 0.7rem;
  border-radius: 12px;
  font-size: 0.8rem;
}
.file-card-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.download-page .file-card-row {
  grid-template-columns: 80px 1fr auto;
}
.file-check-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-check-col input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
}
.batch-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.select-all-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.select-all-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
}

@media (max-width: 600px) {
  .file-card-row {
    grid-template-columns: 60px 1fr;
    gap: 0.85rem;
  }
  .download-page .file-card-row {
    grid-template-columns: 60px 1fr;
    gap: 0.5rem;
  }
  .file-type-icon {
    width: 60px;
    height: 60px;
  }
  .file-type-emoji { font-size: 1.4rem; }
  .file-card-action {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
  }
  .file-card-action .btn {
    width: auto;
    text-align: center;
  }
  .batch-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* ========== 搜索页增强 ========== */
.search-filter-bar {
  background: var(--bg-card);
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
}
.result-item {
  display: grid;
  grid-template-columns: 100px 1fr 30px;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  margin-bottom: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.result-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent-gold);
}
.result-thumb {
  width: 100px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-surface);
}
.result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.result-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: var(--bg-surface);
  color: var(--text-muted);
}
.result-body {
  min-width: 0;
}
.result-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}
.result-type {
  background: rgba(201,168,123,0.18);
  color: var(--accent-gold-dark);
  padding: 0.15rem 0.6rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}
.result-type-project { background: rgba(181,52,46,0.12); color: var(--accent-dark); }
.result-type-component { background: rgba(111,66,193,0.12); color: #6f42c1; }
.result-type-article { background: rgba(0,123,255,0.12); color: #007bff; }
.result-type-file { background: rgba(40,167,69,0.12); color: #28a745; }
.result-link {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 1rem;
}
.result-link mark {
  background: rgba(201,168,123,0.4);
  color: var(--accent-dark);
  padding: 0 2px;
  border-radius: 2px;
}
.result-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.result-desc mark {
  background: rgba(201,168,123,0.4);
  color: var(--accent-dark);
  padding: 0 2px;
  border-radius: 2px;
}
.result-arrow {
  color: var(--text-muted);
  font-size: 1.2rem;
  text-align: right;
  transition: color var(--transition), transform var(--transition);
}
.result-item:hover .result-arrow {
  color: var(--accent);
  transform: translateX(4px);
}

@media (max-width: 600px) {
  .result-item {
    grid-template-columns: 70px 1fr;
    gap: 0.75rem;
  }
  .result-thumb {
    width: 70px;
    height: 70px;
  }
  .result-arrow {
    display: none;
  }
}

/* ========== 详情页元信息与分享 ========== */
.detail-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  margin: 1.5rem 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.detail-meta-bar .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.detail-meta-bar .meta-label {
  color: var(--text-muted);
  font-size: 0.82rem;
}
.detail-meta-bar .meta-value {
  color: var(--text-primary);
  font-weight: 500;
}

.share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  margin: 1.5rem 0;
}
.share-bar .share-label {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-right: 0.4rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  font-family: var(--font-body);
}
.share-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.share-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.share-btn.copied {
  background: rgba(58,122,74,0.15);
  color: #3a7a4a;
  border-color: #3a7a4a;
}
.share-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.share-btn:hover svg {
  transform: scale(1.1);
}
.share-btn.share-wechat:hover {
  background: #07c160;
  border-color: #07c160;
  color: #fff;
}
.share-btn.share-qq:hover {
  background: #12b7f5;
  border-color: #12b7f5;
  color: #fff;
}
.share-btn.share-weibo:hover {
  background: #e6162d;
  border-color: #e6162d;
  color: #fff;
}

/* 微信二维码弹窗 */
.wechat-qr-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: qr-fade-in 0.2s ease;
}
.wechat-qr-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.wechat-qr-box {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 1.5rem 1.8rem 1.2rem;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: qr-pop-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 260px;
}
.wechat-qr-title {
  font-size: 1.02rem;
  font-weight: 600;
  color: #07c160;
  margin-bottom: 0.8rem;
  letter-spacing: 0.04em;
}
.wechat-qr-img {
  padding: 0.6rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  margin: 0 auto 0.8rem;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wechat-qr-img img {
  width: 100%;
  height: 100%;
  display: block;
}
.wechat-qr-text {
  font-size: 0.85rem;
  color: #666;
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin-bottom: 0.6rem;
}
.wechat-copy-hint {
  font-size: 0.8rem;
  color: #999;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
}
.wechat-copy-btn {
  padding: 0.25rem 0.7rem;
  background: var(--accent-gold);
  color: #1a1815;
  border: none;
  border-radius: 12px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  font-family: inherit;
}
.wechat-copy-btn:hover {
  background: #b5342e;
  color: #fff;
}
.wechat-qr-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: none;
  color: #333;
  cursor: pointer;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.wechat-qr-close:hover {
  background: #f5f5f5;
  transform: rotate(90deg);
}
@keyframes qr-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes qr-pop-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* 深色模式适配（分享栏和二维码） */
html[data-theme="dark"] .share-btn.share-wechat:hover {
  background: #07c160;
}
html[data-theme="dark"] .wechat-qr-box {
  background: #2a2620;
  border: 1px solid rgba(201, 168, 123, 0.2);
}
html[data-theme="dark"] .wechat-qr-text {
  color: #999;
}
html[data-theme="dark"] .wechat-qr-img {
  background: #fff;
  border-color: rgba(201, 168, 123, 0.15);
}
html[data-theme="dark"] .wechat-qr-close {
  background: #3a3228;
  color: #ccc;
}
html[data-theme="dark"] .wechat-qr-close:hover {
  background: #4a4238;
}

/* 详情页标签 */
.tags-section {
  margin: 1.5rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.tags-section p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.tag {
  display: inline-block;
  background: rgba(201,168,123,0.18);
  color: var(--accent-gold-dark);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.82rem;
  border: 1px solid rgba(201,168,123,0.3);
}

/* 详情页信息卡片网格 */
.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.detail-info-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.detail-info-card .info-label {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-bottom: 0.3rem;
}
.detail-info-card .info-value {
  color: var(--accent-dark);
  font-size: 1.1rem;
  font-weight: 600;
  font-family: var(--font-heading);
}

/* 相关推荐卡片 */
.related-section {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: none;
}
.related-section h3 {
  font-family: var(--font-heading);
  color: var(--accent-dark);
  margin-bottom: 1rem;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.related-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent-gold);
}
.related-card h4 {
  margin: 0 0 0.4rem 0;
  font-size: 1rem;
}
.related-card h4 a {
  color: var(--accent-dark);
  text-decoration: none;
}
.related-card h4 a:hover {
  color: var(--accent);
}
.related-meta {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ========== 关于页增强 ========== */
.about-hero {
  text-align: center;
  padding: 3rem 1rem 2rem;
}
.about-hero h1 {
  font-family: var(--font-calligraphy);
  font-size: 3rem;
  color: var(--accent-dark);
  margin-bottom: 0.5rem;
}
.about-hero .about-tagline {
  font-size: 1.15rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}
.about-hero .about-en {
  color: var(--text-muted);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}

.about-section {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin: 1.5rem 0;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
}
.about-section h2 {
  font-family: var(--font-heading);
  color: var(--accent);
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
}
.about-section p {
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 0.75rem;
}

.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.about-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  text-align: center;
}
.about-stat-card .stat-num {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--accent);
  font-weight: 700;
  display: block;
}
.about-stat-card .stat-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* 时间轴增强 */
.timeline {
  position: relative;
  padding-left: 2rem;
  margin: 2rem 0;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-gold), var(--accent), transparent);
}
.timeline-item {
  position: relative;
  padding: 0.75rem 0 1.5rem 1.5rem;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 1.1rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 2px var(--accent-gold);
}
.timeline-date {
  color: var(--accent-dark);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}
.timeline-title {
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.timeline-desc {
  color: var(--text-secondary);
  font-size: 0.92rem;
}

/* 团队卡片 */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}
.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent-gold);
}
.team-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-gold), var(--accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0 auto 1rem;
}
.team-name {
  font-family: var(--font-heading);
  color: var(--accent-dark);
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}
.team-role {
  color: var(--accent);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.team-desc {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .about-hero h1 { font-size: 2.2rem; }
  .about-section { padding: 1.25rem; }
}

/* ========================================
   登录页增强
   ======================================== */
.login-body {
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-surface) 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.login-page {
  width: 100%;
  max-width: 400px;
}
.login-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  border: 1px solid var(--border-light);
}
.login-brand {
  text-align: center;
  margin-bottom: 2rem;
}
.login-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-calligraphy);
  font-size: 2rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(181,52,46,0.3);
}
.login-brand h1 {
  font-family: var(--font-heading);
  color: var(--accent-dark);
  font-size: 1.5rem;
  margin: 0;
}
.login-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.login-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.login-field label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.login-field input {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.login-field input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(181,52,46,0.12);
}
.login-submit {
  margin-top: 0.5rem;
  padding: 0.85rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  letter-spacing: 0.1em;
}
.login-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(181,52,46,0.3);
}
.login-submit:active {
  transform: translateY(0);
}
.login-submit:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}
.login-hint {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 0.5rem;
}
.login-footer {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-light);
}
.login-footer a {
  color: var(--text-secondary);
  font-size: 0.88rem;
  text-decoration: none;
  transition: color var(--transition);
}
.login-footer a:hover {
  color: var(--accent);
}

/* 登录页错误提示（覆盖全局 error-msg） */
.login-form .error-msg {
  background: rgba(220,53,69,0.10);
  color: #b5342e;
  padding: 0.65rem 1rem;
  border-radius: var(--radius);
  font-size: 0.88rem;
  border: 1px solid rgba(220,53,69,0.25);
}

@media (max-width: 480px) {
  .login-card { padding: 2rem 1.5rem; }
  .login-logo { width: 56px; height: 56px; font-size: 1.7rem; }
}

/* ========================================
   第三轮迭代：无障碍 / 响应式 / 404 页增强
   ======================================== */

/* 404 页面增强 */
.error-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.7;
}
.error-page .error-title {
  font-family: var(--font-heading);
  color: var(--accent-dark);
  font-size: 1.4rem;
  margin: 0.5rem 0;
}
.error-page .error-desc {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}
.error-page .error-desc code {
  background: var(--bg-surface);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  color: var(--accent);
  font-size: 0.9rem;
  word-break: break-all;
}
.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.error-hint {
  color: var(--text-muted);
  font-size: 0.88rem;
}
.error-hint a {
  margin: 0 0.2rem;
}

/* 焦点可见性增强（无障碍） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.btn:focus-visible,
.btn-small:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

/* 阅读更多链接焦点 */
.read-more:focus-visible {
  outline-offset: 4px;
}

/* 卡片可点击区域焦点 */
.project-card:focus-within,
.component-card:focus-within,
.article-card:focus-within,
.file-card:focus-within,
.related-card:focus-within {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

/* 减少动画偏好（无障碍） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .project-card:hover,
  .component-card:hover,
  .article-card:hover,
  .file-card:hover {
    transform: none;
  }
  .card-thumb-wrap img,
  .article-cover {
    transition: none;
  }
  .project-card:hover .card-thumb-wrap img,
  .component-card:hover .card-thumb-wrap img,
  .article-card:hover .article-cover {
    transform: none;
  }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  :root {
    --border: #8a7a5e;
    --border-light: #b8a88c;
    --text-secondary: #4a3a2e;
    --text-muted: #6b5b4f;
  }
  .card,
  .about-section,
  .detail-info-card,
  .share-bar,
  .detail-meta-bar,
  .file-card,
  .result-item,
  .related-card,
  .team-card {
    border-width: 2px;
  }
}

/* 打印样式 */
@media print {
  .navbar,
  .footer-ornament,
  .share-bar,
  .card-actions,
  .btn-like,
  .hero-cta,
  .filter-bar,
  .pagination,
  .model-toolbar,
  .model-interact-hint,
  .menu-toggle,
  .search-form {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .card,
  .about-section,
  .detail-info-card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }
  a {
    color: #000;
    text-decoration: underline;
  }
  a::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}

/* 新增组件的响应式补充 */
@media (max-width: 768px) {
  .detail-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .related-grid {
    grid-template-columns: 1fr;
  }
  .page-header h1 {
    font-size: 1.5rem;
  }
  .page-subtitle {
    font-size: 0.88rem;
  }
  .share-bar {
    flex-wrap: wrap;
  }
  .share-btn {
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
  }
  .detail-meta-bar {
    gap: 0.75rem 1rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .detail-info-grid {
    grid-template-columns: 1fr;
  }
  .about-stats-grid {
    grid-template-columns: 1fr;
  }
  .team-grid {
    grid-template-columns: 1fr;
  }
  .about-hero h1 {
    font-size: 2rem;
  }
  .about-hero .about-tagline {
    font-size: 1rem;
  }
  .timeline {
    padding-left: 1.5rem;
  }
  .timeline-item {
    padding-left: 1rem;
  }
  .error-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .error-actions .btn,
  .error-actions .btn-secondary {
    width: 100%;
    text-align: center;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .tilt-card {
    transform: none !important;
  }
  .project-card:hover,
  .component-card:hover,
  .article-card:hover,
  .file-card:hover {
    transform: none;
  }
  .btn-like {
    min-height: 44px;
    min-width: 44px;
  }
  .tool-btn {
    width: 44px;
    height: 44px;
  }
  .share-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* 屏幕阅读器专用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 表单元素统一焦点 */
.filter-bar select:focus-visible,
.filter-bar input[type="text"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 模型查看器无障碍 */
model-viewer:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* 暗色模式已由 [data-theme="dark"] 显式控制，不再使用系统级 prefers-color-scheme 媒体查询，
   避免用户在 UI 选择"浅色"但系统为暗色时被强制套用暗色样式。
@media (prefers-color-scheme: dark) {
} */

/* ========================================
   第四轮迭代：图片画廊 / 灯箱 / 面包屑 / 收藏 / 表单提示
   ======================================== */

/* ---------- 图片画廊 ---------- */
.gallery-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}
.gallery-title {
  font-family: var(--font-heading);
  color: var(--accent-dark);
  font-size: 1.2rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-light);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}
.gallery-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  margin: 0;
  transition: transform var(--transition), box-shadow var(--transition);
}
.gallery-item:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-hover);
  z-index: 1;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery-item:hover img {
  transform: scale(1.08);
}
.gallery-hint {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-top: 0.75rem;
}

/* ---------- 灯箱 ---------- */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 8, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 2rem;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.gallery-lightbox.active {
  display: flex;
}
.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.lightbox-content img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 10px 50px rgba(0,0,0,0.5);
}
.lightbox-counter {
  color: #f7f2e6;
  font-size: 0.9rem;
  background: rgba(0,0,0,0.4);
  padding: 0.25rem 0.85rem;
  border-radius: 12px;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform var(--transition);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255,255,255,0.25);
  transform: scale(1.1);
}
.lightbox-close {
  top: 1.5rem;
  right: 1.5rem;
}
.lightbox-prev {
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox-next {
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox-prev:hover { transform: translateY(-50%) scale(1.1); }
.lightbox-next:hover { transform: translateY(-50%) scale(1.1); }

@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .lightbox-close, .lightbox-prev, .lightbox-next {
    width: 40px; height: 40px; font-size: 1.4rem;
  }
  .lightbox-close { top: 0.75rem; right: 0.75rem; }
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
}

/* ---------- 面包屑导航增强 ---------- */
.breadcrumb {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  padding: 0.5rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.breadcrumb a:hover {
  background: rgba(181,52,46,0.08);
  color: var(--accent);
}
.breadcrumb span[aria-hidden] {
  color: var(--border-dark);
  -webkit-user-select: none;
  user-select: none;
}
.breadcrumb-current {
  color: var(--accent-dark);
  font-weight: 500;
  padding: 0.2rem 0.5rem;
}

/* ---------- 收藏按钮 ---------- */
.btn-bookmark {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.92rem;
  font-family: var(--font-body);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.btn-bookmark:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold-dark);
  background: rgba(201,168,123,0.08);
}
.btn-bookmark.active {
  border-color: var(--accent-gold);
  color: var(--accent-gold-dark);
  background: rgba(201,168,123,0.15);
}
.btn-bookmark:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- 表单提示 ---------- */
.form-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: -0.5rem 0 1rem;
  padding: 0.4rem 0.6rem;
  background: rgba(201,168,123,0.08);
  border-left: 3px solid var(--accent-gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.form-hint a {
  color: var(--accent);
  text-decoration: underline;
}

/* ---------- 详情页位置信息 ---------- */
.detail-location {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(201,168,123,0.10);
  border: 1px solid var(--border-light);
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0.5rem 0 1rem;
}
.detail-location .location-icon {
  font-size: 1rem;
}

/* ---------- 文章摘要框 ---------- */
.article-summary-box {
  background: var(--bg-surface);
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--accent-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.5rem 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.8;
}
.article-summary-box strong {
  color: var(--accent-dark);
  font-family: var(--font-heading);
}

/* ---------- 文章标题主样式 ---------- */
.article-title-main {
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 2rem;
  margin: 0.5rem 0 1rem;
  line-height: 1.3;
}

/* ---------- 文章页阅读宽度容器 ---------- */
.article-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.2rem 3rem;
}
.article-page .article-content {
  background: var(--bg-card);
  padding: 2rem 2.2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  margin-top: 1rem;
}
@media (max-width: 720px) {
  .article-page { padding: 1rem 0.8rem 2rem; }
  .article-page .article-content { padding: 1.2rem 1rem; }
  .article-title-main { font-size: 1.5rem; }
  .article-content h1 { font-size: 1.35rem; }
  .article-content h2 { font-size: 1.2rem; }
  .article-content h3 { font-size: 1.08rem; }
  .article-content table { font-size: 0.85rem; }
  .article-content thead th,
  .article-content tbody td { padding: 0.5rem 0.6rem; }
}

/* ---------- 文章附件区 ---------- */
.article-attachments {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}
.article-attachments .file-list {
  margin-top: 0.5rem;
}

/* ---------- 表单两列布局 ---------- */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
@media (max-width: 600px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

/* ========================================
   第五轮迭代：深色模式 / 主题切换
   ======================================== */

/* 主题切换按钮 */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--accent-gold-dark);
  transition: border-color var(--transition), color var(--transition), background var(--transition), transform var(--transition);
  padding: 0;
  line-height: 1;
}
.theme-toggle:hover {
  border-color: var(--accent-gold);
  background: rgba(201,168,123,0.12);
  transform: rotate(15deg);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.theme-toggle .theme-icon-light,
.theme-toggle .theme-icon-dark {
  display: none;
}
/* 默认浅色：显示月亮（点击进入深色） */
html:not([data-theme="dark"]) .theme-toggle .theme-icon-dark { display: block; }
html[data-theme="dark"] .theme-toggle .theme-icon-light { display: block; }

/* 深色模式变量覆盖 */
html[data-theme="dark"] {
  --bg-primary: #141211;
  --bg-surface: #1C1917;
  --bg-card: #292524;
  --text-primary: #F5F5F4;
  --text-secondary: #A8A29E;
  --text-muted: #78716C;
  --accent: #EF4444;
  --accent-light: #F87171;
  --accent-dark: #DC2626;
  --accent-gold: #D4B896;
  --accent-gold-light: #E8C898;
  --accent-gold-dark: #B8936E;
  --border: #44403C;
  --border-light: #292524;
  --border-dark: #57534E;
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-hover: 0 8px 30px rgba(0,0,0,0.4);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.2);
  /* 补充缺失变量（供后续扩展及兼容旧引用） */
  --surface-dark: #1C1917;
  --bg-dark: #141211;
  --text-dark: #F5F5F4;
  --text-muted-dark: #78716C;
  --bg-hover-dark: rgba(255,255,255,0.05);
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

html[data-theme="dark"] .navbar {
  background: rgba(20, 18, 17, 0.95);
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .nav-links a {
  color: var(--text-primary);
}
html[data-theme="dark"] .nav-links a:hover {
  background: rgba(239, 68, 68, 0.12);
  color: var(--accent-light);
}

html[data-theme="dark"] .search-form input {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme="dark"] .search-form input:focus-visible {
  background: var(--bg-surface);
  border-color: var(--accent);
}

html[data-theme="dark"] .hero-bg {
  background: radial-gradient(ellipse at center, rgba(212,176,128,0.10) 0%, transparent 60%),
              linear-gradient(180deg, rgba(212,84,74,0.05) 0%, transparent 50%);
}

html[data-theme="dark"] .project-card,
html[data-theme="dark"] .component-card,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .file-card,
html[data-theme="dark"] .related-card,
html[data-theme="dark"] .team-card,
html[data-theme="dark"] .detail-info-card,
html[data-theme="dark"] .about-section,
html[data-theme="dark"] .gallery-section,
html[data-theme="dark"] .article-attachments,
html[data-theme="dark"] .article-summary-box {
  background: var(--bg-card);
  border-color: var(--border-light);
}

html[data-theme="dark"] .project-card img,
html[data-theme="dark"] .component-card img {
  background: var(--bg-surface);
}

html[data-theme="dark"] .progress-bar {
  background: var(--bg-surface);
  border-color: var(--border-light);
}

html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .admin-toolbar {
  background: var(--bg-card);
  border-color: var(--border-light);
}

html[data-theme="dark"] .filter-bar select,
html[data-theme="dark"] .filter-bar input,
html[data-theme="dark"] .admin-search-form input,
html[data-theme="dark"] .admin-form input,
html[data-theme="dark"] .admin-form textarea,
html[data-theme="dark"] .admin-form select {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-primary);
}

html[data-theme="dark"] .admin-table {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border);
}
html[data-theme="dark"] .admin-table th {
  background: var(--bg-card);
  color: var(--accent-gold);
  border-bottom-color: var(--accent-gold);
}
html[data-theme="dark"] .admin-table td {
  border-color: var(--border-light);
  color: var(--text-primary);
}
html[data-theme="dark"] .admin-table tr:hover td {
  background: var(--bg-surface);
}

html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .recent-card,
html[data-theme="dark"] .top-content-card {
  background: var(--bg-card);
  border-color: var(--border-light);
}

html[data-theme="dark"] .chart-bar {
  background: linear-gradient(180deg, var(--accent-light), var(--accent));
}

html[data-theme="dark"] .login-body {
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-surface) 100%);
}
html[data-theme="dark"] .login-card {
  background: var(--bg-card);
  border-color: var(--border-light);
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .login-field input {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-primary);
}

html[data-theme="dark"] footer {
  background: var(--bg-surface);
  border-top-color: var(--accent-gold-dark);
}

html[data-theme="dark"] .model-wrapper {
  background:
    radial-gradient(circle at 50% 34%, rgba(139, 127, 106, 0.2), transparent 36%),
    linear-gradient(155deg, #45413b 0%, #2b2925 60%, #181715 100%);
  border-color: rgba(201, 168, 123, 0.2);
  box-shadow: 0 24px 64px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -90px 140px rgba(0,0,0,0.22);
}

html[data-theme="dark"] .file-type-icon {
  background: var(--bg-surface);
}

html[data-theme="dark"] .batch-actions {
  background: var(--bg-card);
  border-color: var(--border-light);
}

html[data-theme="dark"] .result-item {
  background: var(--bg-card);
  border-color: var(--border-light);
}

html[data-theme="dark"] .timeline::before {
  background: var(--accent-gold-dark);
}
html[data-theme="dark"] .timeline-item::before {
  background: var(--accent-gold);
  border-color: var(--bg-primary);
}

html[data-theme="dark"] .category-tag {
  background: var(--bg-surface);
  color: var(--text-secondary);
}

html[data-theme="dark"] .model-badge,
html[data-theme="dark"] .model-badge-corner {
  background: rgba(239,68,68,0.15);
  color: var(--accent-light);
}

html[data-theme="dark"] .printable-badge,
html[data-theme="dark"] .printable-badge-corner {
  background: rgba(80,160,100,0.18);
  color: #7ec488;
}

html[data-theme="dark"] .done-badge-corner {
  background: rgba(80,160,100,0.85);
  color: #fff;
}

html[data-theme="dark"] .share-btn {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--text-secondary);
}
html[data-theme="dark"] .share-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

html[data-theme="dark"] .btn-secondary {
  border-color: var(--accent);
  color: var(--accent-light);
}
html[data-theme="dark"] .btn-secondary:hover {
  background: var(--accent);
  color: #fff;
}

html[data-theme="dark"] .btn-bookmark {
  border-color: var(--border);
  color: var(--text-secondary);
}
html[data-theme="dark"] .btn-bookmark:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold-light);
  background: rgba(212,176,128,0.10);
}
html[data-theme="dark"] .btn-bookmark.active {
  border-color: var(--accent-gold);
  color: var(--accent-gold-light);
  background: rgba(212,176,128,0.15);
}

html[data-theme="dark"] .btn-like {
  border-color: var(--border);
  color: var(--text-secondary);
}
html[data-theme="dark"] .btn-like.liked {
  background: rgba(212,84,74,0.15);
  border-color: var(--accent);
  color: var(--accent-light);
}

html[data-theme="dark"] .article-content,
html[data-theme="dark"] .description {
  color: var(--text-primary);
}
html[data-theme="dark"] .article-content a {
  color: var(--accent-light);
  border-bottom-color: rgba(212,84,74,0.35);
}
html[data-theme="dark"] .article-content strong {
  color: var(--accent-light);
}
html[data-theme="dark"] .article-content h1,
html[data-theme="dark"] .article-content h2,
html[data-theme="dark"] .article-content h3,
html[data-theme="dark"] .article-content h4 {
  color: var(--accent-gold-light);
}
html[data-theme="dark"] .article-content h2 { border-left-color: var(--accent-light); }
html[data-theme="dark"] .article-content blockquote {
  background: rgba(212,84,74,0.08);
  border-left-color: var(--accent-light);
  color: var(--text-secondary);
}
html[data-theme="dark"] .article-content pre {
  background: #1a1a1a;
  border: 1px solid var(--border-light);
}
html[data-theme="dark"] .article-content code {
  background: rgba(212,84,74,0.15);
  color: var(--accent-light);
}
html[data-theme="dark"] .article-content table {
  background: var(--bg-card);
  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
  border-color: var(--border-light);
}
html[data-theme="dark"] .article-content thead { background: var(--accent-dark); }
html[data-theme="dark"] .article-content tbody td { border-color: var(--border-light); }
html[data-theme="dark"] .article-content tbody tr:nth-child(even) { background: rgba(255,255,255,0.03); }
html[data-theme="dark"] .article-content tbody tr:hover { background: rgba(212,84,74,0.08); }
html[data-theme="dark"] .article-content .table-wrapper::-webkit-scrollbar-thumb { background: var(--border-light); }
html[data-theme="dark"] .article-content img,
html[data-theme="dark"] .article-content .article-fig img {
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

html[data-theme="dark"] .form-hint {
  background: rgba(212,176,128,0.08);
  color: var(--text-muted);
}

html[data-theme="dark"] .detail-location {
  background: rgba(212,176,128,0.10);
  border-color: var(--border-light);
  color: var(--text-secondary);
}

html[data-theme="dark"] .empty-state {
  background: var(--bg-card);
  color: var(--text-muted);
}

html[data-theme="dark"] .tag {
  background: rgba(212,176,128,0.18);
  color: var(--accent-gold-light);
}

html[data-theme="dark"] .pagination a {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
}
html[data-theme="dark"] .pagination a:hover {
  background: var(--accent);
  color: #fff;
}
html[data-theme="dark"] .pagination .current {
  background: var(--accent);
  color: #fff;
}

html[data-theme="dark"] .thumb-preview {
  background: var(--bg-surface);
  border-color: var(--border-light);
}

html[data-theme="dark"] .error-page .error-desc code {
  background: var(--bg-surface);
  color: var(--accent-light);
}

/* 深色模式下减少图片亮度，保护眼睛 */
html[data-theme="dark"] .project-card img,
html[data-theme="dark"] .component-card img,
html[data-theme="dark"] .article-cover,
html[data-theme="dark"] .gallery-item img {
  filter: brightness(0.92);
}

/* 深色模式下导航栏阴影调整 */
html[data-theme="dark"] .navbar:not(.hidden) {
  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

/* ========================================
   第六轮迭代：Toast 提示 / 返回顶部 / 骨架屏
   ======================================== */

/* Toast 提示 */
.sg-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--accent-dark);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  z-index: 3000;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
.sg-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 返回顶部按钮 */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(181,52,46,0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
  z-index: 999;
  line-height: 1;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--accent-dark);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(181,52,46,0.45);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

html[data-theme="dark"] .back-to-top {
  background: var(--accent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

html[data-theme="dark"] .sg-toast {
  background: var(--accent);
}

@media (max-width: 480px) {
  .back-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  .sg-toast {
    bottom: 5rem;
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
  }
}

/* 骨架屏（卡片加载占位） */
.skeleton-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-light);
}
.skeleton-thumb {
  width: 100%;
  height: 200px;
  background: linear-gradient(90deg, var(--bg-surface) 0%, var(--bg-card) 50%, var(--bg-surface) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}
.skeleton-body {
  padding: 1.5rem;
}
.skeleton-line {
  height: 14px;
  background: linear-gradient(90deg, var(--bg-surface) 0%, var(--bg-card) 50%, var(--bg-surface) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  margin-bottom: 0.6rem;
  animation: skeleton-shimmer 1.5s infinite;
}
.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }
.skeleton-line.long { width: 100%; }

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-thumb,
  .skeleton-line {
    animation: none;
  }
}

/* 移动端导航栏主题按钮位置调整 */
@media (max-width: 768px) {
  .theme-toggle {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
  }
}

/* ============================================
   后台管理列表深化 - 筛选/批量操作/排序
   ============================================ */

/* 页面头部：标题 + 主操作按钮 */
.admin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border);
}

.admin-page-header h1 {
  margin: 0;
  font-size: 1.6rem;
  color: var(--accent);
}

/* 筛选条 */
.admin-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 1rem;
}

.admin-filter-bar input[type="text"],
.admin-filter-bar select,
.admin-filter-bar .btn-small,
.admin-filter-bar button[type="submit"] {
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.92rem;
  line-height: 36px;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-filter-bar input[type="text"] {
  flex: 1 1 220px;
  min-width: 180px;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-filter-bar input[type="text"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(181, 52, 46, 0.12);
}

.admin-filter-bar select {
  padding: 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.2s;
}

.admin-filter-bar select:hover {
  border-color: var(--accent);
}

.admin-filter-bar select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(181, 52, 46, 0.12);
}

.admin-filter-bar .btn-small {
  flex-shrink: 0;
}

/* 批量操作工具栏 */
.batch-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding: 0.7rem 1rem;
  background: linear-gradient(135deg, rgba(181, 52, 46, 0.04), rgba(212, 164, 55, 0.04));
  border: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
}

.batch-select-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  font-size: 0.9rem;
  color: var(--text);
}

.batch-select-all input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

.batch-count {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.batch-count span {
  color: var(--accent);
  font-weight: 600;
}

#batch-delete-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 表格容器：横向滚动 */
.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

.admin-table-wrap .admin-table {
  margin: 0;
  border: none;
  border-radius: 0;
}

.admin-table-wrap .admin-table th:first-child,
.admin-table-wrap .admin-table td:first-child {
  border-left: none;
}

/* 复选框列 */
.admin-table .col-check {
  width: 40px;
  text-align: center;
  padding: 0.5rem !important;
}

.admin-table .col-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}

.empty-state .empty-icon {
  font-size: 3.5rem;
  margin-bottom: 0.75rem;
  opacity: 0.6;
}

.empty-state p {
  margin: 0;
  font-size: 0.95rem;
}

/* 表格行 hover 强化 */
.admin-table-wrap .admin-table tbody tr {
  transition: background 0.15s;
}

.admin-table-wrap .admin-table tbody tr:hover {
  background: rgba(181, 52, 46, 0.05);
}

.admin-table-wrap .admin-table tbody tr:has(.batch-check:checked) {
  background: rgba(212, 164, 55, 0.08);
}

/* 缩略图占位符（无图时） */
.admin-thumb-placeholder {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--surface), var(--border));
  color: var(--text-muted);
  font-size: 1.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* 移动端筛选条适配 */
@media (max-width: 768px) {
  .admin-page-header h1 {
    font-size: 1.3rem;
  }

  .admin-filter-bar {
    padding: 0.7rem;
    gap: 0.5rem;
  }

  .admin-filter-bar input[type="text"],
  .admin-filter-bar select {
    flex: 1 1 100%;
    width: 100%;
  }

  .admin-filter-bar .btn-small {
    flex: 1 1 calc(50% - 0.25rem);
  }

  .batch-toolbar {
    padding: 0.6rem 0.75rem;
    gap: 0.5rem;
  }

  .batch-count {
    margin-left: 0;
    flex: 1 1 100%;
    text-align: left;
  }

  .admin-table .col-check {
    width: 36px;
    padding: 0.35rem !important;
  }
}

/* 深色模式下的新管理组件 */
html[data-theme="dark"] .admin-page-header {
  border-bottom-color: var(--border-dark);
}

html[data-theme="dark"] .admin-filter-bar {
  background: var(--surface-dark);
  border-color: var(--border-dark);
}

html[data-theme="dark"] .admin-filter-bar input[type="text"],
html[data-theme="dark"] .admin-filter-bar select {
  background: var(--bg-dark);
  color: var(--text-dark);
  border-color: var(--border-dark);
}

html[data-theme="dark"] .admin-filter-bar input[type="text"]:focus-visible,
html[data-theme="dark"] .admin-filter-bar select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(181, 52, 46, 0.25);
}

html[data-theme="dark"] .batch-toolbar {
  background: linear-gradient(135deg, rgba(181, 52, 46, 0.1), rgba(212, 164, 55, 0.08));
  border-color: var(--border-dark);
}

html[data-theme="dark"] .admin-table-wrap {
  background: var(--surface-dark);
  border-color: var(--border-dark);
}

html[data-theme="dark"] .admin-table-wrap .admin-table tbody tr:hover {
  background: rgba(181, 52, 46, 0.12);
}

html[data-theme="dark"] .admin-table-wrap .admin-table tbody tr:has(.batch-check:checked) {
  background: rgba(212, 164, 55, 0.15);
}

html[data-theme="dark"] .admin-thumb-placeholder {
  background: linear-gradient(135deg, var(--surface-dark), var(--border-dark));
  color: var(--text-muted-dark);
  border-color: var(--border-dark);
}

/* 打印样式：管理列表 */
@media print {
  .admin-filter-bar,
  .batch-toolbar,
  .admin-table .col-check,
  .admin-table .col-actions,
  .admin-page-header a.btn {
    display: none !important;
  }

  .admin-table-wrap {
    border: none;
  }
}

/* ============================================
   缩略图与图片预览（迭代4）
   ============================================ */

/* 可点击的缩略图 */
.admin-thumb-clickable {
  cursor: zoom-in;
  transition: transform 0.2s, box-shadow 0.2s;
}

.admin-thumb-clickable:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.admin-thumb.broken {
  opacity: 0.3;
  filter: grayscale(1);
  cursor: not-allowed;
}

/* 名称子行（原文件名） */
.col-name-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 元数据子行（MIME 类型） */
.col-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

/* 后台图片预览灯箱 */
.admin-preview-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  padding: 2rem;
  box-sizing: border-box;
}

.admin-preview-lightbox.active {
  opacity: 1;
  visibility: visible;
}

.admin-preview-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}

.admin-preview-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.admin-preview-content {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.admin-preview-content img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.admin-preview-caption {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  text-align: center;
  max-width: 80vw;
  word-break: break-all;
}

/* 深色模式下的缩略图相关 */
html[data-theme="dark"] .col-name-sub,
html[data-theme="dark"] .col-meta {
  color: var(--text-muted-dark);
}

html[data-theme="dark"] .admin-thumb-clickable:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* 移动端预览适配 */
@media (max-width: 768px) {
  .admin-preview-lightbox {
    padding: 1rem;
  }

  .admin-preview-close {
    top: 0.75rem;
    right: 0.75rem;
    width: 40px;
    height: 40px;
  }

  .admin-preview-content img {
    max-height: 70vh;
  }
}

/* ============================================
   交互增强（迭代5）
   ============================================ */

/* 阅读进度条 */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 999;
  pointer-events: none;
}

.reading-progress {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-gold));
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* 代码块复制按钮 */
.code-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.3rem 0.7rem;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  font-family: inherit;
}

pre:hover .code-copy-btn {
  opacity: 1;
}

.code-copy-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 图片淡入加载 */
img.fade-in {
  opacity: 0;
  transition: opacity 0.4s ease;
}

img.fade-in.loaded {
  opacity: 1;
}

/* 深色模式下的阅读进度条 */
html[data-theme="dark"] .reading-progress {
  background: linear-gradient(90deg, var(--accent), var(--accent-gold));
  box-shadow: 0 0 8px rgba(181, 52, 46, 0.4);
}

/* 移动端阅读进度条 */
@media (max-width: 768px) {
  .reading-progress-bar {
    height: 2px;
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .reading-progress {
    transition: none;
  }

  img.fade-in {
    transition: none;
    opacity: 1;
  }
}

/* ============================================
   性能优化：骨架屏与图片加载占位（迭代6）
   ============================================ */

/* 卡片缩略图容器：加载时显示骨架背景 */
.card-thumb-wrap {
  background: linear-gradient(110deg, var(--surface) 8%, var(--border) 18%, var(--surface) 33%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s linear infinite;
}

.card-thumb-wrap:has(img.fade-in.loaded),
.card-thumb-wrap:has(img:not(.fade-in)) {
  background: none;
  animation: none;
}

/* 文章封面容器：加载时显示骨架背景 */
.article-cover-wrap {
  background: linear-gradient(110deg, var(--surface) 8%, var(--border) 18%, var(--surface) 33%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s linear infinite;
}

.article-cover-wrap:has(img.fade-in.loaded),
.article-cover-wrap:has(img:not(.fade-in)) {
  background: none;
  animation: none;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 深色模式下的骨架屏 */
html[data-theme="dark"] .card-thumb-wrap,
html[data-theme="dark"] .article-cover-wrap {
  background: linear-gradient(110deg, var(--surface-dark) 8%, var(--border-dark) 18%, var(--surface-dark) 33%);
  background-size: 200% 100%;
}

/* 减少动画偏好：禁用骨架屏动画 */
@media (prefers-reduced-motion: reduce) {
  .card-thumb-wrap,
  .article-cover-wrap {
    animation: none;
    background: var(--surface);
  }

  html[data-theme="dark"] .card-thumb-wrap,
  html[data-theme="dark"] .article-cover-wrap {
    background: var(--surface-dark);
  }
}

/* 内容占位骨架（用于异步加载场景） */
.skeleton-block {
  background: linear-gradient(110deg, var(--surface) 8%, var(--border) 18%, var(--surface) 33%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s linear infinite;
  border-radius: 6px;
  min-height: 1em;
}

html[data-theme="dark"] .skeleton-block {
  background: linear-gradient(110deg, var(--surface-dark) 8%, var(--border-dark) 18%, var(--surface-dark) 33%);
  background-size: 200% 100%;
}

/* 图片加载错误时的占位样式 */
img.broken-placeholder {
  background: var(--surface);
  filter: grayscale(1) opacity(0.5);
}

/* 列表容器：content-visibility 延迟渲染（大幅提升滚动性能） */
.project-grid,
.component-grid,
.article-list,
.related-grid,
.gallery-grid {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* 卡片自身 layout containment */
.card,
.project-card,
.component-card,
.article-card,
.related-card {
  contain: layout style;
}

/* ============================================
   RSS 订阅链接（迭代1）
   ============================================ */

.rss-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1rem;
  color: var(--accent);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  background: var(--bg-hover);
}

.rss-link:hover {
  background: var(--accent);
  color: #fff;
  transform: rotate(-8deg) scale(1.05);
}

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

html[data-theme="dark"] .rss-link:hover {
  background: var(--accent-dark);
  color: #000;
}

/* ============================================
   导航栏登录/用户入口
   ============================================ */

.nav-login-link {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  transition: var(--transition);
  white-space: nowrap;
}

.nav-login-link:hover {
  background: var(--accent);
  color: #fff;
}

.nav-user-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.nav-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  transition: var(--transition);
  overflow: hidden;
  flex-shrink: 0;
}

.nav-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nav-user-menu-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nav-user-menu-avatar {
  overflow: hidden;
}

.nav-user-link:hover .nav-user-avatar {
  background: var(--accent-dark);
  transform: scale(1.08);
}

html[data-theme="dark"] .nav-login-link {
  color: var(--accent-light);
  border-color: var(--accent-dark);
}

html[data-theme="dark"] .nav-login-link:hover {
  background: var(--accent-dark);
  color: #000;
}

/* 导航栏用户菜单 */
.nav-user-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem 0.3rem 0.3rem;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-body);
}

.nav-user-btn:hover {
  background: var(--bg-surface);
  border-color: var(--border-light);
}

.nav-user-btn .nav-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
}

.nav-user-btn .nav-user-name {
  font-size: 0.85rem;
  color: var(--text-primary);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user-btn .nav-user-arrow {
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: var(--transition);
}

.nav-user-wrap.open .nav-user-arrow {
  transform: rotate(180deg);
}

.nav-user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: var(--transition);
  z-index: 1000;
}

.nav-user-wrap.open .nav-user-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-user-menu-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 0.3rem;
}

.nav-user-menu-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.nav-user-menu-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.nav-user-menu-phone {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.nav-user-menu-item {
  display: block;
  width: 100%;
  padding: 0.55rem 1rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
  font-family: var(--font-body);
  box-sizing: border-box;
}

.nav-user-menu-item:hover {
  background: var(--bg-surface);
  color: var(--accent);
}

.nav-user-logout:hover {
  color: var(--accent-dark);
}

@media (max-width: 768px) {
  .nav-user-btn .nav-user-name {
    display: none;
  }
  .nav-user-btn .nav-user-arrow {
    display: none;
  }
  .nav-user-menu {
    right: -50px;
  }
}

/* ============================================
   评论区样式
   ============================================ */

.comments-section {
  width: 100%;
  max-width: none;
  margin: 2.5rem 0;
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.comments-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--border-light);
}

.comments-count {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 0.3rem;
}

.comment-form-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.comment-form-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.comment-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.comment-form-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
}

.comment-textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  box-sizing: border-box;
  resize: vertical;
  font-family: var(--font-body);
  transition: var(--transition);
}

.comment-textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(181, 52, 46, 0.1);
}

.comment-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.6rem;
}

.comment-char-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.comment-submit-btn {
  padding: 0.5rem 1.3rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-body);
}

.comment-submit-btn:hover:not(:disabled) {
  background: var(--accent-dark);
}

.comment-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.comment-login-hint {
  text-align: center;
  padding: 1.5rem 0;
}

.comment-login-hint p {
  color: var(--text-secondary);
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
}

.comment-login-btn {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  transition: var(--transition);
}

.comment-login-btn:hover {
  background: var(--accent-dark);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comments-loading,
.comments-empty {
  text-align: center;
  padding: 2rem 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.comment-item {
  display: flex;
  gap: 0.8rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-light);
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-reply-item {
  padding: 0.7rem 0;
  border-bottom: none;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
}

.comment-author {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.comment-time {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ========== 移动端触摸目标（WCAG 2.5.5：至少 44x44px） ========== */
@media (max-width: 480px) {
  .btn-small,
  .btn-like,
  .share-btn,
  .btn-bookmark {
    min-height: 44px;
    min-width: 44px;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
  .pagination a,
  .pagination span,
  .pagination-ellipsis {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.9rem;
  }
  .tool-btn {
    width: 44px;
    height: 44px;
  }
  .back-to-top {
    width: 44px;
    height: 44px;
  }
  .lightbox-close,
  .lightbox-prev,
  .lightbox-next {
    width: 44px;
    height: 44px;
  }
  .menu-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  .comment-picker-popup .emoji-item {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.4rem;
  }
}

/* ============================================
   视觉提升 · 古建主题精修
   ============================================ */

/* ---------- 1. 卡片悬停增强：鎏金边框 + 层次阴影 ---------- */
.project-card,
.component-card,
.article-card,
.file-card,
.related-card {
  position: relative;
  transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.35s ease;
}
.project-card::before,
.component-card::before,
.article-card::before,
.related-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(135deg, transparent 30%, var(--accent-gold) 50%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}
.project-card:hover::before,
.component-card:hover::before,
.article-card:hover::before,
.related-card:hover::before {
  opacity: 0.6;
}
.project-card:hover,
.component-card:hover,
.article-card:hover,
.related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(185, 28, 28, 0.06);
}

/* ---------- 2. 按钮微交互：涟漪 + 光泽 ---------- */
.btn,
.btn-small,
.comment-submit-btn {
  position: relative;
  overflow: hidden;
}
.btn::after,
.btn-small::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
  pointer-events: none;
}
.btn:active::after,
.btn-small:active::after {
  width: 300px;
  height: 300px;
  transition: 0s;
}
.btn:active,
.btn-small:active {
  transform: translateY(0) scale(0.98);
}

/* ---------- 3. 滚动渐入：错落动画 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
/* 列表项错落延迟 */
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal:nth-child(6) { transition-delay: 0.40s; }

/* ---------- 4. 标题装饰：鎏金下划线 ---------- */
.page-header h1,
.hero-new h1,
.article-title-main,
.support-hero h1 {
  position: relative;
  display: inline-block;
}
.page-header h1::after,
.hero-new h1::after,
.article-title-main::after,
.support-hero h1::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-gold));
  border-radius: 2px;
  animation: underlineGrow 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}
@keyframes underlineGrow {
  from { width: 0; opacity: 0; }
  to { width: 48px; opacity: 1; }
}

/* ---------- 5. 导航栏：滚动方向感知阴影 ---------- */
.navbar:not(.hidden) {
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04), 0 1px 0 rgba(184, 147, 110, 0.08);
}
.navbar.scrolled {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(184, 147, 110, 0.12);
}

/* ---------- 6. 图片加载：渐入 + 占位背景 ---------- */
.card-thumb-wrap,
.article-cover-wrap,
.gallery-item,
.result-thumb {
  background: linear-gradient(110deg, var(--bg-surface) 8%, var(--bg-card) 18%, var(--bg-surface) 33%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer {
  to { background-position: -200% 0; }
}
.card-thumb-wrap img,
.article-cover img,
.gallery-item img,
.result-thumb img {
  animation: imgFadeIn 0.6s ease;
}
@keyframes imgFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- 7. 链接悬停：下划线动画 ---------- */
.breadcrumb a,
.article-body h3 a,
.related-card h4,
.comment-author {
  position: relative;
  text-decoration: none;
}
.breadcrumb a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.breadcrumb a:hover::after {
  width: 100%;
}

/* ---------- 8. 分页按钮：激活态光晕 ---------- */
.pagination .current {
  box-shadow: 0 2px 8px rgba(185, 28, 28, 0.25);
  animation: pagePulse 0.4s ease;
}
@keyframes pagePulse {
  0% { transform: scale(0.9); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.pagination a {
  transition: border-color var(--transition), color var(--transition),
              background var(--transition), transform 0.2s ease;
}
.pagination a:hover {
  transform: translateY(-1px);
  border-color: var(--accent-gold);
}

/* ---------- 9. 表单输入：鎏金聚焦边框 ---------- */
.auth-input:focus,
.comment-textarea:focus,
#donor-name:focus,
#donor-contact:focus,
#donor-msg:focus,
.search-filter-bar input:focus,
.admin-filter-bar input:focus {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(184, 147, 110, 0.15);
}

/* ---------- 10. 暗色模式精修 ---------- */
html[data-theme="dark"] .project-card:hover,
html[data-theme="dark"] .component-card:hover,
html[data-theme="dark"] .article-card:hover,
html[data-theme="dark"] .related-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(184, 147, 110, 0.08);
}
html[data-theme="dark"] .project-card::before,
html[data-theme="dark"] .component-card::before,
html[data-theme="dark"] .article-card::before,
html[data-theme="dark"] .related-card::before {
  background: linear-gradient(135deg, transparent 30%, var(--accent-gold-light) 50%, transparent 70%);
}

/* ---------- 11. 返回顶部按钮：呼吸动画 ---------- */
#back-to-top.visible {
  animation: breathe 3s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 2px 12px rgba(185, 28, 28, 0.2); }
  50% { box-shadow: 0 2px 20px rgba(185, 28, 28, 0.35); }
}

/* ---------- 12. Toast 提示：滑入增强 ---------- */
.sg-toast {
  animation: toastSlide 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes toastSlide {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
.sg-toast.show {
  transform: translate(-50%, 0);
}

/* ---------- 13. 骨架屏占位 ---------- */
.skeleton-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-light);
}
.skeleton-thumb {
  width: 100%;
  height: 200px;
  background: linear-gradient(110deg, var(--bg-surface) 8%, var(--bg-card) 18%, var(--bg-surface) 33%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}
.skeleton-body {
  padding: 1.25rem;
}
.skeleton-line {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(110deg, var(--bg-surface) 8%, var(--bg-card) 18%, var(--bg-surface) 33%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  margin-bottom: 0.6rem;
}
.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }

/* ---------- 14. 文章目录：悬停高亮 ---------- */
.article-toc .toc-item a {
  position: relative;
  padding-left: 0;
  transition: color var(--transition), padding-left 0.25s ease;
}
.article-toc .toc-item a:hover {
  color: var(--accent);
  padding-left: 6px;
}
.article-toc .toc-item a::before {
  content: '·';
  position: absolute;
  left: -8px;
  opacity: 0;
  color: var(--accent-gold);
  transition: opacity 0.25s ease;
}
.article-toc .toc-item a:hover::before {
  opacity: 1;
}

/* ---------- 15. 评论区：头像渐变背景 ---------- */
.comment-avatar,
.comment-form-user .comment-avatar {
  background: linear-gradient(135deg, var(--accent), var(--accent-gold));
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ---------- 16. 分享按钮：悬停图标弹跳 ---------- */
.share-btn {
  transition: background var(--transition), color var(--transition),
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.share-btn:hover {
  transform: translateY(-2px);
}
.share-btn svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.share-btn:hover svg {
  transform: scale(1.15) rotate(-5deg);
}

/* ---------- 17. 标签：悬停填充效果 ---------- */
.category-tag,
.tag {
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform 0.2s ease;
}
.category-tag:hover,
.tag:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ---------- 18. 滚动条美化 ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-surface);
}
::-webkit-scrollbar-thumb {
  background: var(--border-dark);
  border-radius: 5px;
  border: 2px solid var(--bg-surface);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-gold);
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--surface-dark);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #44403c;
  border-color: var(--surface-dark);
}

/* ---------- 19. 选中文本颜色 ---------- */
::selection {
  background: rgba(185, 28, 28, 0.15);
  color: var(--accent-dark);
}
html[data-theme="dark"] ::selection {
  background: rgba(184, 147, 110, 0.25);
  color: var(--accent-gold-light);
}

/* ---------- 20. 阅读进度条增强 ---------- */
.reading-progress {
  background: linear-gradient(90deg, var(--accent), var(--accent-gold));
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(185, 28, 28, 0.3);
}

.comment-content {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-primary);
  word-break: break-word;
}

.comment-footer {
  display: flex;
  gap: 1rem;
  margin-top: 0.4rem;
}

.comment-action-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
  transition: var(--transition);
  font-family: var(--font-body);
}

.comment-action-btn:hover {
  color: var(--accent);
}

.comment-delete-btn:hover {
  color: var(--accent-dark);
}

.comment-replies {
  margin-top: 0.6rem;
  padding-left: 1rem;
  border-left: 2px solid var(--border-light);
}

.comment-reply-box {
  margin-top: 0.6rem;
}

.comment-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.comment-reply-cancel,
.comment-reply-submit {
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-body);
  border: 1px solid var(--border);
}

.comment-reply-cancel {
  background: transparent;
  color: var(--text-secondary);
}

.comment-reply-cancel:hover {
  background: var(--bg-surface);
}

.comment-reply-submit {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.comment-reply-submit:hover {
  background: var(--accent-dark);
}

/* 贴吧风格增强 */
.comment-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
  position: relative;
}

.comment-emoji-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.emoji-toggle {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  padding: 0.35rem 0.8rem;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: var(--transition);
  font-family: var(--font-body);
}
.emoji-toggle:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.emoji-picker {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.2rem;
  padding: 0.7rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  max-width: 320px;
}

.emoji-item {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 6px;
  transition: var(--transition);
  -webkit-user-select: none;
  user-select: none;
}
.emoji-item:hover {
  background: var(--bg-surface);
  transform: scale(1.25);
}

.comment-reply-prefix {
  display: inline;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-right: 0.3rem;
}
.comment-reply-prefix .comment-reply-to {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.comment-reply-box.active {
  background: var(--bg-surface);
  padding: 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  margin-top: 0.8rem;
  position: relative;
}

.reply-target {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

/* 深色模式适配 */
html[data-theme="dark"] .comments-section,
html[data-theme="dark"] .comment-form-box,
html[data-theme="dark"] .comment-reply-box {
  background: var(--bg-card);
}

html[data-theme="dark"] .comment-textarea {
  background: var(--bg-surface);
}

@media (max-width: 600px) {
  .comments-section {
    margin: 1.5rem 0;
    padding: 1rem;
  }
  .comment-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.78rem;
  }
  .comment-replies {
    padding-left: 0.6rem;
  }
}

/* ============================================
   数字 count-up 动画（迭代2）
   ============================================ */

.stat-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* 数字进入视口时的弹跳动画 */
@keyframes countPop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

.stat-num.animated {
  animation: countPop 0.6s ease-out;
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .stat-num.animated { animation: none; }
}

/* ============================================
   分类导航卡片（迭代3）
   ============================================ */

.category-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.category-nav-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.category-nav-item:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--shadow-color);
}

.category-nav-item.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.category-nav-icon {
  font-size: 1.5rem;
}

.category-nav-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.category-nav-count {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.category-nav-item.active .category-nav-count {
  color: rgba(255, 255, 255, 0.9);
}

html[data-theme="dark"] .category-nav-item {
  background: var(--surface-dark);
  border-color: var(--border-dark);
  color: var(--text-dark);
}

html[data-theme="dark"] .category-nav-item:hover {
  border-color: var(--accent-dark);
}

html[data-theme="dark"] .category-nav-item.active {
  background: var(--accent-dark);
  color: #000;
  border-color: var(--accent-dark);
}

/* ============================================
   捐赠页支持者列表（迭代5）
   ============================================ */

.supporters-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.supporters-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.supporter-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* 注册会员捐赠者高亮 */
.supporter-card.supporter-logged {
  border-color: var(--accent-gold);
  background: linear-gradient(135deg, rgba(201, 168, 123, 0.08), var(--surface));
}
.supporter-tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.7rem;
  background: var(--accent-gold);
  color: #fff;
  border-radius: 3px;
  vertical-align: middle;
}

/* 捐赠表单登录状态提示 */
.donor-logged-info,
.donor-login-hint {
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.donor-logged-info {
  background: rgba(201, 168, 123, 0.12);
  border: 1px solid var(--accent-gold);
  color: var(--text-primary);
}
.donor-badge {
  background: var(--accent-gold);
  color: #fff;
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
}
.donor-name { font-weight: 600; }
.donor-email { color: var(--text-muted); font-size: 0.82rem; }
.donor-switch {
  margin-left: auto;
  color: var(--accent);
  text-decoration: underline;
  font-size: 0.82rem;
}
.donor-login-hint {
  background: rgba(181, 52, 46, 0.06);
  border: 1px dashed var(--border);
  color: var(--text-secondary);
}
.donor-login-hint a {
  color: var(--accent);
  font-weight: 600;
  margin-right: 0.2rem;
}

/* 捐赠支付二维码区 */
.donate-pay-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  margin-bottom: 1.5rem;
}
.donate-pay-section h3 {
  margin: 0 0 0.8rem;
  font-size: 1rem;
  color: var(--accent-dark);
}
.donate-qr-row {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.donate-qr-box {
  text-align: center;
}
.donate-qr-box img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  background: #fff;
  padding: 8px;
}
.donate-qr-box p {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.donate-pay-hint {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}
.support-form h3 {
  margin: 0 0 0.8rem;
  font-size: 1rem;
  color: var(--accent-dark);
}

.supporter-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #f39c12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.supporter-info {
  flex: 1;
  min-width: 0;
}

.supporter-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.supporter-msg {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.supporter-amount {
  font-weight: 600;
  color: var(--accent);
  font-size: 0.9rem;
}

html[data-theme="dark"] .supporters-section {
  border-top-color: var(--border-dark);
}

html[data-theme="dark"] .supporter-card {
  background: var(--surface-dark);
  border-color: var(--border-dark);
}

html[data-theme="dark"] .supporter-name {
  color: var(--text-dark);
}

html[data-theme="dark"] .supporter-amount {
  color: var(--accent-dark);
}

/* 移动端：RSS 按钮缩小 */
@media (max-width: 600px) {
  .rss-link {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
  .category-nav { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   页脚法律信息 / 备案号
   ============================================ */
.footer-legal {
  text-align: center;
  padding: 0.8rem 1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
}
.footer-legal a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-legal a:hover {
  color: var(--accent);
}
.footer-sep {
  color: var(--border-dark);
  margin: 0 0.2rem;
}
.footer-beian a {
  color: var(--text-muted);
}

/* ============================================
   第三方登录按钮
   ============================================ */
.auth-social {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border-light);
}
.auth-social-title {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
}
.auth-social-btns {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}
.auth-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  transition: all 0.15s ease;
  font-family: var(--font-body);
}
.auth-social-btn:hover:not(.disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}
.auth-social-btn svg { flex-shrink: 0; }
.auth-social-btn.github-btn:hover:not(.disabled) { background: #24292e; color: #fff; border-color: #24292e; }
.auth-social-btn.wechat-btn:hover:not(.disabled) { background: #07C160; color: #fff; border-color: #07C160; }
.auth-social-btn.qq-btn:hover:not(.disabled) { background: #12B7F5; color: #fff; border-color: #12B7F5; }
.auth-social-btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* ============================================
   登录注册 - 协议勾选框
   ============================================ */
.auth-agree {
  display: flex !important;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.82rem !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  line-height: 1.5;
}
.auth-agree input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.auth-agree a {
  color: var(--accent);
  text-decoration: underline;
}

/* 页脚联系方式 */
.footer-contact {
  display: flex;
  flex-wrap: wrap;
  /* 跟随右栏文字右对齐，避免邮箱孤零零居中错位 */
  justify-content: flex-end;
  gap: 0.6rem 1.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0.5rem 0;
}
.footer-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.footer-contact-item svg {
  flex-shrink: 0;
  opacity: 0.6;
}

/* 详情页操作按钮栏（创想云/GitHub，两端对齐） */
.action-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.65rem;
  margin: 1.2rem 0;
}
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.2rem;
  border-radius: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.action-btn svg { flex-shrink: 0; }
.action-btn:hover { transform: translateY(-1px); }

.action-cx {
  background: #E8F0FB; color: #2E6BA6; border-color: #C5D9F0;
}
.action-cx:hover { background: #D4E3F6; color: #1D5080; box-shadow: 0 2px 10px rgba(46,107,166,0.15); }

.action-gh {
  background: #F0F0F0; color: #24292e; border-color: #D0D0D0;
}
.action-gh:hover { background: #E0E0E0; box-shadow: 0 2px 10px rgba(36,41,46,0.12); }

.action-cf {
  background: linear-gradient(135deg, #FFF5F0, #FFE8D8); color: #B8532E; border-color: #F0C8A8;
}
.action-cf:hover { background: linear-gradient(135deg, #FFE8D8, #FFD8C0); color: #8B3A1A; box-shadow: 0 2px 10px rgba(184,83,46,0.18); }

html[data-theme="dark"] .action-cx { background: rgba(46,107,166,0.15); color: #7AB8F5; border-color: rgba(46,107,166,0.3); }
html[data-theme="dark"] .action-cx:hover { background: rgba(46,107,166,0.25); }
html[data-theme="dark"] .action-gh { background: rgba(255,255,255,0.08); color: #D0D0D0; border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] .action-gh:hover { background: rgba(255,255,255,0.14); }
html[data-theme="dark"] .action-cf { background: rgba(184,83,46,0.12); color: #F09870; border-color: rgba(184,83,46,0.3); }
html[data-theme="dark"] .action-cf:hover { background: rgba(184,83,46,0.22); }

/* 众筹浮动CTA条 */
.cf-float-bar {
  position: sticky;
  bottom: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 500;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d1f1a 100%);
  border-top: 2px solid var(--accent-gold);
  padding: 0.8rem 0;
  margin-top: 2rem;
}
.cf-float-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
/* 底部浮动众筹栏：标题 + 进度条 + 百分比 + 前往支持按钮 */
.cf-float-label {
  color: #f5ead6;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.cf-float-progress {
  flex: 1;
  min-width: 60px;
  height: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  overflow: hidden;
}
.cf-float-pct {
  color: var(--accent-gold, #c9a87b);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.cf-float-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-light));
  border-radius: 3px;
  transition: width 0.6s ease;
}
.cf-float-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.4rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}
.cf-float-cta:hover {
  background: var(--accent-light);
  transform: translateY(-1px);
}
.cf-float-cta svg { flex-shrink: 0; }

/* 滚动到页脚时浮动栏渐隐退场 */
.cf-float-bar.cf-float-hidden {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .cf-float-bar { transition: opacity 0.2s ease; }
  .cf-float-bar.cf-float-hidden { transform: none; }
}

@media (max-width: 600px) {
  .cf-float-bar { padding: 0.6rem 0; }
  .cf-float-inner { padding: 0 0.8rem; gap: 0.8rem; }
  .cf-float-cta { padding: 0.45rem 1rem; font-size: 0.85rem; }
}

/* ===== 时间线统一修复（首页「最新动态」+ 关于页「项目里程碑」）=====
   修复两处历史规则层叠问题：
   1) 非末项圆点被进度时间线规则覆盖成 2×14 淡色窄条（几乎隐形）
   2) 关于页里程碑被 flex 横排成 date/title/desc 三列
   统一为：竖排布局 + 每项可见圆点，垂直居中于内容字段 */
.timeline .timeline-item {
  display: block;
  padding: 0.75rem 0 1.5rem 1.5rem;
}
.timeline .timeline-item::before,
.timeline .timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: -2rem;
  bottom: auto;
  top: calc(0.75rem + (100% - 2.25rem) / 2);
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 2px var(--accent-gold);
}
/* 未来里程碑：金色圆点 */
.timeline .timeline-item.timeline-future::before {
  background: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 123, 0.25);
}
/* 移动端适配 */
@media (max-width: 600px) {
  .timeline .timeline-item { padding: 0.6rem 0 1.2rem 1.2rem; }
  .timeline .timeline-item::before,
  .timeline .timeline-item:not(:last-child)::before {
    left: -1.7rem;
    top: calc(0.6rem + (100% - 1.8rem) / 2);
  }
}