a, a:hover,.menu li a:hover,.menu li.on a,.menu li .subnav a:hover:after,.menu li .subnav a.on,.menu li.subcate:hover a,.menu li.subcate:hover .subnav a:hover,.menu li.subcate:hover .subnav a.on,.menu li.subcate:hover .subnav a.on:after,.sch-m input,.sch-m button:after,.schfixed input,.schclose,.schform input,.schform button:after,.post h2 a:hover,.post h2 .istop:before,.post .user a:hover,.post .date a:hover,.post .cate a:hover,.post .views a:hover,.post .cmtnum a:hover,.post .readmore:hover,.post .readmore:hover:after,.post .tags a:hover,.pages a:hover,a.backlist:hover,.cmtsfoot .reply:hover,.cmtsfoot .reply:hover:before,.cmtsubmit button:hover,.cmtsubmit button:hover:before,.sidebox dd a:hover,#divTags ul li a:hover,#divCalendar td a,#divCalendar #today,#divContorPanel .cp-login a:hover,#divContorPanel .cp-vrs a:hover,#divContorPanel .cp-login a:hover:before,#divContorPanel .cp-vrs a:hover:before,.footer a:hover,.goback:hover,.goback:hover:after,.relateinfo h3 a:hover { color:#FBB719; }@media screen and (max-width:1080px){.menu ul li.subcate.slidedown > a:after {color:#FBB719}}.menu li:before,.schfixed button,.pagebar .now-page,.cmtpagebar .now-page,.pagebar a:hover,.cmtpagebar a:hover,a.backtotop {background:#FBB719}.menuico span {background-color:#FBB719}.menu li .subnav,.schfixed {border-top-color:#FBB719}.menu li.subcate .subnav a {color:#333}.menu li .subnav:before,.sch-m input,.schfixed:before,.schform input,.single h1:after,.single h2:after,.single h3:after,.single h4:after,.single h5:after,.single h6:after,.contitle h1,.contitle h2 {border-bottom-color:#FBB719}.post .readmore:hover,.post .tags a:hover,.pagebar .now-page,.cmtpagebar .now-page,.pagebar a:hover,.cmtpagebar a:hover,a.backlist:hover,.cmtsubmit button:hover,#divTags ul li a:hover,#divCalendar td a,#divContorPanel .cp-login a:hover,#divContorPanel .cp-vrs a:hover,.goback:hover {border-color:#FBB719}.wrapper { background:#F6F8F9; }/* ========== 全局重置与基础样式 ========== */

/* 1. 使用 border-box 盒模型，方便计算尺寸 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. 清除浏览器默认样式 */
html {
  /* 设置根元素字体大小，方便 rem 单位计算 */
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  /* 字体：优先使用系统界面字体，保证加载速度和美观 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  /* 行高是字体大小的1.6倍，提供舒适的阅读间距 */
  line-height: 1.6;
  /* 主要文字颜色，深灰色比纯黑色更护眼 */
  color: #333;
  /* 背景色，使用浅米色或灰白色，减少白屏刺眼 */
  background-color: #fafafa;
}

/* 3. 链接样式：统一处理所有链接 */
a {
  color: #1a73e8; /* Google风格的蓝色，友好且专业 */
  text-decoration: none; /* 默认无下划线 */
}

a:hover {
  color: #0d65c7; /* 悬停时加深颜色 */
  text-decoration: underline; /* 添加下划线提示 */
}

/* ========== 内容区域布局 ========== */

/* 4. 主容器：限制最大宽度并居中，增加左右内边距 */
.main-container {
  max-width: 1200px; /* 最大宽度，适应宽屏 */
  margin: 0 auto;
  padding: 0 20px; /* 左右留白 */
}

/* ========== 头部样式 (Header) ========== */

.header {
  background-color: #ffffff; /* 白色背景，突出导航 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1); /* 底部柔和阴影 */
  padding: 1rem 0; /* 上下内边距 */
  position: sticky; /* 粘性定位，滚动时固定在顶部 */
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #2c3e50;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem; /* 链接之间的间距 */
}

.nav-links a {
  color: #555;
  font-size: 1rem;
}

.nav-links a:hover {
  color: #1a73e8;
  text-decoration: none;
}

/* ========== 文章/帖子列表样式 (Blog Post List / Forum Thread List) ========== */

.post-card, .thread-card {
  background-color: #ffffff;
  border-radius: 8px; /* 圆角，现代感 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* 轻微阴影 */
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  transition: box-shadow 0.3s ease; /* 悬停动画 */
}

.post-card:hover, .thread-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); /* 悬停时加深阴影 */
}

.post-title, .thread-title {
  font-size: 1.4rem; /* 标题稍大 */
  margin: 0 0 0.5rem 0;
  color: #2c3e50; /* 深一点的颜色 */
}

.post-title a, .thread-title a {
  color: inherit; /* 继承父级颜色 */
}

.post-title a:hover, .thread-title a:hover {
  color: #1a73e8;
}

.post-meta, .thread-meta {
  color: #888; /* 浅灰色元数据 */
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.post-excerpt, .thread-summary {
  color: #555;
  line-height: 1.7;
}

/* ========== 文章详情页样式 (Post Detail Page) ========== */

.article-header {
  border-bottom: 1px solid #eee;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
}

.article-title {
  font-size: 2rem;
  color: #111;
  margin: 0 0 0.5rem 0;
}

.article-meta {
  color: #888;
  font-size: 0.9rem;
}

.article-content {
  color: #444;
  font-size: 1.05rem;
  line-height: 1.8;
  /* 对文章内的段落、标题等元素进行样式化 */
}

.article-content p {
  margin-bottom: 1.2em;
}

.article-content h2,
.article-content h3 {
  margin-top: 1.8em;
  margin-bottom: 1em;
  color: #2c3e50;
}

.article-content blockquote {
  border-left: 4px solid #1a73e8;
  margin: 1.5em 0;
  padding-left: 1.2em;
  color: #666;
  font-style: italic;
}

.article-content code {
  background-color: #f5f5f5;
  border-radius: 3px;
  padding: 0.2em 0.4em;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 85%;
  color: #e74c3c;
}

.article-content pre {
  background-color: #2d3748;
  border-radius: 6px;
  padding: 1em;
  overflow-x: auto;
  margin: 1.5em 0;
}

.article-content pre code {
  color: #e2e8f0;
  background: none;
  padding: 0;
}

/* ========== 评论区样式 (Comments Section) ========== */

.comments-section {
  margin-top: 2rem;
}

.comment-form textarea {
  width: 100%;
  min-height: 120px;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  resize: vertical; /* 只允许垂直拉伸 */
}

.comment-list {
  list-style: none;
  padding: 0;
}

.comment-item {
  border-bottom: 1px solid #eee;
  padding: 1.25rem 0;
}

.comment-author {
  font-weight: bold;
  color: #2c3e50;
}

.comment-date {
  color: #888;
  font-size: 0.85rem;
}

.comment-text {
  margin-top: 0.5rem;
  color: #555;
  line-height: 1.7;
}

/* ========== 通用辅助类 ========== */

.text-center { text-align: center; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* ========== 响应式设计 ========== */

@media (max-width: 768px) {
  .main-container {
    padding: 0 10px;
  }

  .header-content {
    flex-direction: column;
    gap: 1rem;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .post-card, .thread-card {
    padding: 1rem;
  }

  .article-title {
    font-size: 1.6rem;
  }
}