/* 定义全局 CSS 变量（颜色、阴影、圆角等常用属性） */
:root {
    --primary-color: #5e72e4;
    /* 主色调（蓝紫色） */
    --secondary-color: #2dce89;
    /* 辅助色（绿色） */
    --accent-color: #fb6340;
    /* 强调色（橙红色） */
    --dark-bg: #1a2035;
    /* 深色背景 */
    --light-bg: #f8f9fe;
    /* 浅色背景 */
    --card-bg: #ffffff;
    /* 卡片背景（白色） */
    --text-dark: #32325d;
    /* 深色文字 */
    --text-light: #525f7f;
    /* 浅色文字 */
    --text-white: #ffffff;
    /* 白色文字 */
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* 默认阴影 */
    --transition: all 0.3s ease;
    /* 动画过渡效果 */
    --border-radius: 12px;
    /* 圆角大小 */
}

/* 夜间模式下替换部分颜色和阴影 */
.dark-mode {
    --light-bg: #121629;
    /* 夜间背景改为深色 */
    --card-bg: #1a2035;
    /* 卡片背景更深 */
    --text-dark: #f8f9fe;
    /* 深色文字替换为浅色文字 */
    --text-light: #a0aec0;
    /* 浅色文字变灰色 */
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    /* 阴影更明显 */
}

/* 全局重置，清除默认边距和内边距，启用盒模型 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans SC', sans-serif;
    /* 默认字体使用思源黑体 */
    background-color: var(--light-bg);
    /* 设置背景色 */
    color: var(--text-dark);
    /* 默认文字颜色 */
    line-height: 1.6;
    /* 行高，提高可读性 */
    transition: var(--transition);
    /* 添加过渡效果 */
    padding-top: 70px;
    /* 给顶部导航栏预留空间 */
}

/* 标题字体样式 */
h1,
h2,
h3,
h4 {
    font-family: 'Noto Serif SC', serif;
    /* 标题字体使用思源宋体 */
    font-weight: 700;
    /* 标题加粗 */
    color: var(--text-dark);
    /* 标题文字颜色 */
    margin-bottom: 1rem;
    /* 标题与下方文字的间距 */
}

/* 段落文字样式 */
p {
    color: var(--text-light);
    /* 使用浅色文字 */
    margin-bottom: 1.2rem;
    /* 段落之间留白 */
}

/* 链接样式 */
a {
    text-decoration: none;
    /* 去掉下划线 */
    color: var(--primary-color);
    /* 链接默认蓝紫色 */
    transition: var(--transition);
    /* 鼠标悬停时渐变效果 */
}

/* 链接悬停效果 */
a:hover {
    color: var(--accent-color);
    /* 悬停时变成橙红色 */
}

/* 图片样式：自适应宽度 */
img {
    max-width: 100%;
    height: auto;
}

/* 页面主容器，限制最大宽度并居中 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* 居中 */
    padding: 0 20px;
}

/* 按钮基础样式 */
.btn {
    display: inline-block;
    padding: 10px 24px;
    /* 内边距 */
    background: var(--primary-color);
    /* 按钮背景色 */
    color: white;
    /* 按钮文字颜色 */
    border-radius: 50px;
    /* 圆角按钮 */
    font-weight: 500;
    transition: var(--transition);
    border: none;
    /* 去掉边框 */
    cursor: pointer;
    /* 鼠标悬停时显示手型 */
    font-size: 1rem;
}

/* 按钮悬停效果 */
.btn:hover {
    background: #4a5bd2;
    /* 颜色变深 */
    transform: translateY(-2px);
    /* 微微上移 */
    box-shadow: 0 7px 14px rgba(94, 114, 228, 0.2);
    /* 增加阴影 */
}

/* 边框按钮样式（透明背景 + 有色边框） */
.btn-outline {
    background: transparent;
    /* 背景透明 */
    border: 2px solid var(--primary-color);
    /* 按钮边框使用主色 */
    color: var(--primary-color);
    /* 字体颜色为主色 */
}

/* 鼠标悬停时，边框按钮变为实心主色 */
.btn-outline:hover {
    background: var(--primary-color);
    /* 背景填充主色 */
    color: white;
    /* 字体颜色变白 */
}

/* 强调按钮（橙红色背景） */
.btn-accent {
    background: var(--accent-color);
    /* 使用强调色 */
}

/* 鼠标悬停时强调按钮背景颜色变深 */
.btn-accent:hover {
    background: #fa521f;
    /* 橙红色变深一点 */
}

/* ===============================
           页眉（Header）样式
           =============================== */
header {
    position: fixed;
    /* 固定在页面顶部，不随滚动条移动 */
    top: 0;
    left: 0;
    width: 100%;
    /* 占满整个页面宽度 */
    background: var(--card-bg);
    /* 背景色使用卡片色 */
    box-shadow: var(--shadow);
    /* 添加阴影 */
    z-index: 1000;
    /* 提高层级，保证在最上层 */
    padding: 15px 0;
    /* 上下留白 */
    transition: var(--transition);
    /* 平滑过渡效果 */
}

/* 页眉容器：左右分布，垂直居中 */
.header-container {
    display: flex;
    justify-content: space-between;
    /* 左右两端对齐 */
    align-items: center;
    /* 垂直居中 */
}

/* LOGO 样式 */
.logo {
    font-family: 'Noto Serif SC', serif;
    /* 使用宋体风格字体 */
    font-size: 1.8rem;
    /* 字号较大 */
    font-weight: 700;
    /* 加粗 */
    color: var(--primary-color);
    /* 主色文字 */
}

/* LOGO 中的特殊字符或部分文字使用强调色 */
.logo span {
    color: var(--accent-color);
}

/* 导航菜单样式 */
.nav-menu {
    display: flex;
    /* 水平排列 */
    list-style: none;
    /* 去掉列表默认样式 */
}

/* 导航菜单的每个 li 之间保持间距 */
.nav-menu li {
    margin-left: 30px;
}

/* 导航菜单的链接样式 */
.nav-menu a {
    color: var(--text-dark);
    /* 默认深色文字 */
    font-weight: 500;
    /* 中等粗细 */
    position: relative;
    /* 方便伪元素定位 */
}

/* 导航菜单链接下划线效果（伪元素实现） */
.nav-menu a:after {
    content: '';
    /* 生成一个空内容 */
    position: absolute;
    width: 0;
    /* 默认宽度为 0，不显示 */
    height: 2px;
    /* 下划线高度 */
    background: var(--accent-color);
    /* 下划线颜色为强调色 */
    bottom: -5px;
    /* 位于文字下方 5px */
    left: 0;
    transition: var(--transition);
    /* 添加动画过渡 */
}

/* 悬停时下划线从左到右展开 */
.nav-menu a:hover:after {
    width: 100%;
}

/* 当前激活的菜单项（高亮显示） */
.nav-menu a.active {
    color: var(--primary-color);
    /* 使用主色文字 */
}

/* 激活状态的导航链接，下划线也高亮为主色 */
.nav-menu a.active:after {
    width: 100%;
    /* 下划线展开到 100% */
    background: var(--primary-color);
    /* 下划线颜色改为主色 */
}

/* 页眉右侧的操作区（比如主题切换、按钮） */
.header-actions {
    display: flex;
    /* 横向排列 */
    align-items: center;
    /* 垂直居中 */
    gap: 15px;
    /* 子元素之间的间距 */
}

/* 夜间模式切换按钮样式 */
.theme-toggle {
    background: none;
    /* 无背景 */
    border: none;
    /* 无边框 */
    color: var(--text-dark);
    /* 文字颜色为深色 */
    font-size: 1.2rem;
    /* 按钮大小 */
    cursor: pointer;
    /* 鼠标悬停时显示手型 */
    transition: var(--transition);
    /* 平滑过渡效果 */
}

/* 鼠标悬停时，主题切换按钮变为强调色，并有旋转效果 */
.theme-toggle:hover {
    color: var(--accent-color);
    /* 颜色变橙红 */
    transform: rotate(20deg);
    /* 按钮轻微旋转 */
}

/* 移动端菜单切换按钮（默认隐藏） */
.mobile-toggle {
    display: none;
    /* PC 端隐藏 */
    background: none;
    border: none;
    color: var(--text-dark);
    /* 按钮颜色为深色 */
    font-size: 1.5rem;
    /* 按钮比主题切换稍大 */
    cursor: pointer;
}

/* ===============================
           Hero 区域（首页顶部大横幅）
           =============================== */
.hero {
    padding: 100px 0 70px;
    /* 上方留大间距，下方留 70px */
    background: linear-gradient(135deg, rgba(94, 114, 228, 0.1) 0%, rgba(253, 99, 64, 0.05) 100%);
    /* 渐变背景 */
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    /* 只有下边圆角 */
    margin-bottom: 80px;
    /* 与下方内容保持距离 */
}

/* Hero 文本内容容器 */
.hero-content {
    max-width: 700px;
    /* 限制最大宽度 */
}

/* Hero 标题样式 */
.hero h1 {
    font-size: 3.5rem;
    /* 大标题字号 */
    line-height: 1.2;
    /* 行间距紧凑 */
    margin-bottom: 20px;
}

/* Hero 段落样式 */
.hero p {
    font-size: 1.2rem;
    /* 字号稍大 */
    margin-bottom: 30px;
}

/* Hero 区域的右侧图片 */
.hero-image {
    position: absolute;
    /* 绝对定位 */
    right: 0;
    /* 靠右 */
    top: 100px;
    /* 距离顶部 100px */
    width: 45%;
    /* 占宽度 45% */
    max-width: 550px;
    /* 最大宽度限制 */
    border-radius: var(--border-radius);
    /* 圆角 */
    overflow: hidden;
    /* 超出隐藏（比如圆角裁切图片） */
    box-shadow: var(--shadow);
    /* 添加阴影 */
}

/* ===============================
           博客区块样式
=============================== */
.blog-link {
  display: block;     /* 让 网址 变成块级，撑满整片卡片 */
  color: inherit;     /* 继承父级颜色，避免文字变蓝 */
  text-decoration: none;
}

/* 区块标题（居中 + 下划线装饰） */
.section-title {
    text-align: center;
    /* 居中对齐 */
    margin-bottom: 60px;
    /* 与下方内容的间距 */
    position: relative;
}

/* 区块标题下方的装饰横线 */
.section-title:after {
    content: '';
    /* 生成一个空内容 */
    display: block;
    width: 80px;
    /* 横线长度 */
    height: 4px;
    /* 横线高度 */
    background: var(--primary-color);
    /* 使用主色 */
    margin: 15px auto 0;
    /* 居中，距离标题 15px */
    border-radius: 2px;
    /* 横线两端圆角 */
}

/* 博客文章网格布局 */
.blog-grid {
    display: grid;
    /* 使用网格布局 */
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    /* 自动填充，每列最小宽度 350px，最大填满剩余空间 */
    gap: 30px;
    /* 网格间距 */
    margin-bottom: 80px;
    /* 与下方内容保持间距 */
}

/* 博客卡片整体样式 */
.blog-card {
    background: var(--card-bg);
    /* 使用变量定义的卡片背景色 */
    border-radius: var(--border-radius);
    /* 圆角边框，让卡片更柔和 */
    overflow: hidden;
    /* 隐藏超出边界的内容，防止图片或文字溢出 */
    box-shadow: var(--shadow);
    /* 使用阴影增加立体感 */
    transition: var(--transition);
    /* 设置过渡效果，应用在 hover 时 */
    
    
    /* ↓↓↓ 新增：强制等高 ↓↓↓ */
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 鼠标悬停在博客卡片时的交互效果 */
.blog-card:hover {
    transform: translateY(-10px);
    /* 整个卡片上移 10px，产生浮动感 */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    /* 阴影变大，显得更突出 */
}

/* 卡片里的图片容器 */
.card-img {
    height: 220px;
    /* 固定高度，保持卡片整齐 */
    overflow: hidden;
    /* 超出的图片部分被裁剪掉 */
}

/* 卡片中的图片样式 */
.card-img img {
    width: 100%;
    /* 图片自适应容器宽度 */
    height: 100%;
    /* 图片拉伸填满高度 */
    object-fit: cover;
    /* 保持比例，裁剪掉多余部分，保证不变形 */
    transition: var(--transition);
    /* 平滑过渡（比如缩放） */
}

/* 鼠标悬停时，图片稍微放大，产生动态效果 */
.blog-card:hover .card-img img {
    transform: scale(1.05);
    /* 图片放大 5% */
}

/* 卡片正文内容部分 */
.card-content {
    /*padding: 25px;*/
    /* 内边距，保证文字不紧贴边框 */
    flex: 1;                     /* 占满剩余高度 */
    display: flex;               /* 变成 flex 容器 */
    flex-direction: column;      /* 纵向排列 */
    padding: 25px;
}

/* 卡片元信息（比如时间、作者） */
.card-meta {
    display: flex;
    /* 横向排列 */
    align-items: center;
    /* 垂直居中对齐 */
    margin-bottom: 15px;
    /* 和下面的内容保持间距 */
    font-size: 0.9rem;
    /* 稍微小一点的字体 */
    color: var(--text-light);
    /* 使用浅色文字 */
}

/* 每个元信息项（比如日期、分类） */
.card-meta span {
    display: flex;
    /* 图标和文字横向排布 */
    align-items: center;
    /* 图标和文字居中对齐 */
    margin-right: 20px;
    /* 每个信息之间留点空隙 */
}

/* 元信息里的图标样式 */
.card-meta i {
    margin-right: 5px;
    /* 图标和文字之间的间距 */
    color: var(--primary-color);
    /* 图标用主题色，突出显示 */
}

/* 卡片标题 */
.card-content h3 {
    font-size: 1.5rem;
    /* 比正文更大，突出标题 */
    margin-bottom: 15px;
    /* 和下面内容拉开间距 */
}

/* 标签容器放在最底部 */
.card-content .tag-wrap {
    margin-top: auto;            /* 关键：把标签推到最下面 */
    display: flex;
    gap: 8px;                    /* 标签之间的间距 */
    flex-wrap: wrap;
}


/* 标签样式（比如 #科技 #生活） */
.tag {
    display: inline-block;
    /* 标签像小块状一样显示 */
    padding: 5px 12px;
    /* 内边距，增加点击区域 */
    background: rgba(94, 114, 228, 0.1);
    /* 半透明背景，和主题色呼应 */
    color: var(--primary-color);
    /* 标签文字用主题色 */
    border-radius: 30px;
    /* 圆角很大，做成椭圆形 */
    font-size: 0.85rem;
    /* 稍微小一些 */
    margin-right: 8px;
    /* 标签之间留间距 */
    /*margin-top: 15px;*/
    /* 和上方内容保持距离 */
}


/* 关于我（About）版块 */
.about {
    display: flex;
    /* 图片和文字左右并排 */
    align-items: center;
    /* 垂直居中 */
    gap: 50px;
    /* 两部分之间的间距 */
    margin-bottom: 100px;
    /* 和下面的内容留出空间 */
}


/* 关于我 - 图片部分 */
.about-image {
    flex: 1;
    /* 占一半宽度 */
    border-radius: 12px;
    /* 圆角 */
    overflow: hidden;
    /* 裁剪溢出部分 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* 投影，增强层次感 */
    transition: transform 0.3s ease;
    /* 添加过渡效果 */
    cursor: pointer;
    /* 鼠标悬停时显示可点击样式 */
    position: relative;
    /* 相对定位，用于提示框定位 */
}

/* 关于我 - 文字部分 */
.about-content {
    flex: 1;
    /* 也占一半宽度 */
}

/* 关于我 - 标题 */
.about-content h2 {
    margin-bottom: 25px;
    /* 和正文之间留间距 */
}

/* 社交媒体链接容器 */
.social-links {
    display: flex;
    /* 横向排布 */
    gap: 15px;
    /* 每个按钮之间间距 */
    margin-top: 30px;
    /* 和上面正文留空隙 */
}

/* 每个社交按钮的样式 */
.social-links a {
    display: flex;
    /* 图标居中对齐 */
    align-items: center;
    justify-content: center;
    width: 45px;
    /* 固定宽高，做成正方形 */
    height: 45px;
    border-radius: 50%;
    /* 圆形按钮 */
    background: rgba(94, 114, 228, 0.1);
    /* 背景是淡淡的主题色 */
    color: var(--primary-color);
    /* 图标颜色是主题色 */
    font-size: 1.2rem;
    /* 图标大小 */
    transition: var(--transition);
    /* 悬停时有动画效果 */
}

/* 鼠标悬停时，按钮变成实心主题色，图标变白 */
.social-links a:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-5px);
    /* 上移 5px，产生浮动感 */
}

/* 订阅新闻模块 */
.newsletter {
    background: linear-gradient(135deg, var(--primary-color) 0%, #825ee4 100%);
    /* 渐变背景 */
    border-radius: var(--border-radius);
    /* 圆角 */
    padding: 60px;
    /* 内边距 */
    margin-bottom: 100px;
    /* 和下方拉开距离 */
    color: white;
    /* 默认文字是白色 */
    text-align: center;
    /* 居中排版 */
}

/* 订阅区标题 */
.newsletter h2 {
    color: white;
    margin-bottom: 20px;
}

/* 订阅区描述文字 */
.newsletter p {
    color: rgba(255, 255, 255, 0.8);
    /* 白色带点透明 */
    max-width: 600px;
    /* 限制文字宽度，保持美观 */
    margin: 0 auto 30px;
    /* 居中，并和下面间距 */
}

/* 输入框+按钮的外层容器 */
.subscribe-form {
    display: flex;
    /* 输入框和按钮横向排列 */
    max-width: 550px;
    /* 限制最大宽度 */
    margin: 0 auto;
    /* 居中 */
}

/* 输入框样式 */
.subscribe-form input {
    flex: 1;
    /* 占满剩余空间 */
    padding: 15px 20px;
    /* 内边距，保证文字舒适 */
    border: none;
    /* 去掉边框 */
    border-radius: 50px 0 0 50px;
    /* 左侧圆角，右侧直角，和按钮拼接 */
    font-size: 1rem;
}

/* 输入框获得焦点时（点击输入时） */
.subscribe-form input:focus {
    outline: none;
    /* 去掉默认的高亮边框 */
}

/* 按钮样式 */
.subscribe-form button {
    border-radius: 0 50px 50px 0;
    /* 右侧圆角，拼成一个整体 */
    padding: 15px 30px;
}

/* 页脚样式 */
footer {
    background: var(--dark-bg);
    /* 深色背景 */
    color: var(--text-white);
    /* 白色文字 */
    padding: 70px 0 30px;
    /* 上下内边距 */
}

/* 页脚布局：自适应网格 */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* 最小 250px，最多平分 */
    gap: 40px;
    /* 栅格之间的空隙 */
    margin-bottom: 50px;
}

/* 页脚栏目标题样式 */
.footer-col h3 {
    color: white;
    /* 标题字体为白色 */
    margin-bottom: 25px;
    /* 与下面内容拉开距离 */
    position: relative;
    /* 为伪元素定位做准备 */
    padding-bottom: 15px;
    /* 底部留空，放置下划线 */
}

/* 页脚栏目标题的下划线效果 */
.footer-col h3:after {
    content: '';
    /* 生成一个空内容块 */
    position: absolute;
    /* 绝对定位，基于 h3 */
    left: 0;
    bottom: 0;
    width: 40px;
    /* 下划线的宽度 */
    height: 3px;
    /* 下划线厚度 */
    background: var(--accent-color);
    /* 使用强调色 */
}

/* 页脚段落文字样式 */
.footer-col p {
    color: rgba(255, 255, 255, 0.7);
    /* 半透明白色文字 */
}

/* 页脚链接列表样式 */
.footer-links {
    list-style: none;
    /* 去掉默认的列表符号 */
}

.footer-links li {
    margin-bottom: 12px;
    /* 每个链接之间的间距 */
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    /* 链接为浅白色 */
    transition: var(--transition);
    /* 添加过渡动画 */
}

/* 鼠标悬停时的效果 */
.footer-links a:hover {
    color: white;
    /* 链接变成纯白色 */
    padding-left: 5px;
    /* 向右平移 5px */
}

/* 页脚最底部版权信息 */
.copyright {
    text-align: center;
    /* 文字居中 */
    padding-top: 30px;
    /* 顶部内边距 */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* 顶部细分隔线 */
    color: rgba(255, 255, 255, 0.6);
    /* 浅灰色文字 */
    font-size: 0.9rem;
    /* 字号稍小 */
}

/*//////////////*/
/* ================= 留言板与评论区样式 ================= */
/* 留言板头部样式 */
.comments-header {
    /* 设置渐变背景，从左到右从深蓝色到紫色 */
    background: linear-gradient(90deg, #2d00f7, #6a11cb);
    /* 文字颜色为白色 */
    color: white;
    /* 内边距30px */
    padding: 30px;
    /* 文本居中对齐 */
    text-align: center;
    /* 设置左上角和右上角的圆角 */
    border-radius: 15px 15px 0 0;
}

/* 留言板标题样式 */
.comments-header h2 {
    /* 字体大小2.5rem（相对于根元素） */
    font-size: 2.5rem;
    /* 底部外边距10px */
    margin-bottom: 10px;
}

/* 留言板副标题样式 */
.comments-header p {
    /* 设置不透明度为90% */
    opacity: 0.9;
    /* 字体大小1.1rem */
    font-size: 1.1rem;
}

/* 评论表单区域样式 */
.comment-form {
    /* 内边距30px */
    padding: 30px;
    /* 浅蓝色背景 */
    background: #f8f9ff;
    /* 底部边框，浅蓝色1px实线 */
    border-bottom: 1px solid #e0e5ff;
}

/* 表单组样式（包含标签和输入框） */
.form-group {
    /* 底部外边距20px，在表单项之间创建间隔 */
    margin-bottom: 20px;
}

/* 表单标签样式 */
.form-group label {
    /* 将标签设置为块级元素（独占一行） */
    display: block;
    /* 底部外边距8px，与输入框创建间隔 */
    margin-bottom: 8px;
    /* 字体粗细为600（粗体） */
    font-weight: 600;
    /* 深蓝色文字 */
    color: #2d00f7;
}

/* 表单控件通用样式（输入框、文本区域） */
.form-control {
    /* 宽度100%填充父容器 */
    width: 100%;
    /* 内边距15px */
    padding: 15px;
    /* 2px浅蓝色实线边框 */
    border: 2px solid #e0e5ff;
    /* 10px圆角 */
    border-radius: 10px;
    /* 字体大小1rem（相对于根元素） */
    font-size: 1rem;
    /* 所有属性变化添加0.3秒缓动过渡效果 */
    transition: all 0.3s ease;
}

/* 表单控件获得焦点时的样式 */
.form-control:focus {
    /* 移除默认的轮廓线 */
    outline: none;
    /* 边框颜色变为深蓝色 */
    border-color: #2d00f7;
    /* 添加深蓝色阴影效果，增强焦点状态可见性 */
    box-shadow: 0 0 0 3px rgba(45, 0, 247, 0.1);
}

/* 文本区域特定样式 */
textarea.form-control {
    /* 最小高度120px */
    min-height: 120px;
    /* 允许用户垂直调整大小 */
    resize: vertical;
}

/* 按钮通用样式 */
.btn {
    /* 内边距：上下15px，左右30px */
    padding: 15px 30px;
    /* 无边框 */
    border: none;
    /* 10px圆角 */
    border-radius: 10px;
    /* 字体大小1.1rem */
    font-size: 1.1rem;
    /* 字体粗细600（粗体） */
    font-weight: 600;
    /* 鼠标指针变为手型，表示可点击 */
    cursor: pointer;
    /* 所有属性变化添加0.3秒缓动过渡效果 */
    transition: all 0.3s ease;
}

/* 主要按钮样式 */
.btn-primary {
    /* 渐变背景，从左到右从深蓝色到紫色 */
    background: linear-gradient(90deg, #2d00f7, #6a11cb);
    /* 文字颜色白色 */
    color: white;
}

/* 主要按钮悬停状态样式 */
.btn-primary:hover {
    /* 悬停时渐变方向反转 */
    background: linear-gradient(90deg, #6a11cb, #2d00f7);
    /* 向上移动2px，创建浮动效果 */
    transform: translateY(-2px);
    /* 添加阴影效果，增强立体感 */
    box-shadow: 0 5px 15px rgba(45, 0, 247, 0.2);
}

/* 评论列表区域样式 */
.comments-list {
    /* 内边距30px */
    padding: 30px;
}

/* 评论数量显示样式 */
.comment-count {
    /* 字体大小1.2rem */
    font-size: 1.2rem;
    /* 底部外边距20px */
    margin-bottom: 20px;
    /* 深蓝色文字 */
    color: #2d00f7;
    /* 字体粗细600（粗体） */
    font-weight: 600;
}

/* 单条评论样式 */
.comment {
    /* 使用Flex布局 */
    display: flex;
    /* 底部外边距30px，在评论之间创建间隔 */
    margin-bottom: 30px;
    /* 底部内边距30px，为底部边框留出空间 */
    padding-bottom: 30px;
    /* 底部边框，浅灰色1px实线 */
    border-bottom: 1px solid #e0e5ff;
}

/* 最后一条评论特殊样式 */
.comment:last-child {
    /* 移除底部外边距 */
    margin-bottom: 0;
    /* 移除底部内边距 */
    padding-bottom: 0;
    /* 移除底部边框 */
    border-bottom: none;
}

/* 评论头像样式 */
.comment-avatar {
    /* 固定宽度60px */
    width: 60px;
    /* 固定高度60px */
    height: 60px;
    /* 圆形边框 */
    border-radius: 50%;
    /* 隐藏溢出内容 */
    overflow: hidden;
    /* 右侧外边距20px，与评论内容创建间隔 */
    margin-right: 20px;
    /* 防止Flex项目收缩 */
    flex-shrink: 0;
    /* 渐变背景，从紫色到蓝色 */
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    /* 使用Flex布局并居中内容 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 白色文字 */
    color: white;
    /* 字体大小1.5rem */
    font-size: 1.5rem;
    /* 粗体字 */
    font-weight: bold;
}

/* 评论内容区域样式 */
.comment-content {
    /* 允许Flex项目增长以填充可用空间 */
    flex-grow: 1;
}

/* 评论头部（作者和日期）样式 */
.comment-header {
    /* 使用Flex布局 */
    display: flex;
    /* 子元素在主轴两端对齐 */
    justify-content: space-between;
    /* 子元素在交叉轴居中 */
    align-items: center;
    /* 底部外边距10px，与评论正文创建间隔 */
    margin-bottom: 10px;
}

/* 评论作者名称样式 */
.comment-author {
    /* 字体粗细600（粗体） */
    font-weight: 600;
    /* 深蓝色文字 */
    color: #2d00f7;
    /* 右侧外边距15px，与日期创建间隔 */
    margin-right: 15px;
}

/* 评论日期样式 */
.comment-date {
    /* 灰色文字 */
    color: #888;
    /* 字体大小0.9rem（略小） */
    font-size: 0.9rem;
}

/* 评论正文样式 */
.comment-text {
    /* 底部外边距15px，与操作按钮创建间隔 */
    margin-bottom: 15px;
    /* 深灰色文字 */
    color: #444;
    /* 行高1.6，提高可读性 */
    line-height: 1.6;
}

/* 评论操作按钮容器样式 */
.comment-actions {
    /* 使用Flex布局 */
    display: flex;
    /* 子元素之间间隔15px */
    gap: 15px;
}

/* 单个评论操作按钮样式 */
.comment-action {
    /* 使用Flex布局并垂直居中 */
    display: flex;
    align-items: center;
    /* 灰色文字 */
    color: #666;
    /* 字体大小0.9rem（略小） */
    font-size: 0.9rem;
    /* 鼠标指针变为手型，表示可点击 */
    cursor: pointer;
    /* 颜色变化添加0.3秒缓动过渡效果 */
    transition: color 0.3s ease;
}

/* 评论操作按钮悬停状态样式 */
.comment-action:hover {
    /* 悬停时变为深蓝色 */
    color: #2d00f7;
}

/* 评论操作按钮图标样式 */
.comment-action i {
    /* 右侧外边距5px，与文字创建间隔 */
    margin-right: 5px;
}

/* 分页控件容器样式 */
.pagination {
    /* 使用Flex布局 */
    display: flex;
    /* 子元素在主轴上居中 */
    justify-content: center;
    /* 顶部外边距30px，与上方内容创建间隔 */
    margin-top: 30px;
    /* 子元素之间间隔10px */
    gap: 10px;
}

/* 分页按钮样式 */
.page-btn {
    /* 固定宽度40px */
    width: 40px;
    /* 固定高度40px */
    height: 40px;
    /* 圆形按钮 */
    border-radius: 50%;
    /* 使用Flex布局并居中内容 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 浅蓝色背景 */
    background: #f8f9ff;
    /* 深蓝色文字 */
    color: #2d00f7;
    /* 字体粗细600（粗体） */
    font-weight: 600;
    /* 鼠标指针变为手型，表示可点击 */
    cursor: pointer;
    /* 所有属性变化添加0.3秒缓动过渡效果 */
    transition: all 0.3s ease;
}

/* 当前激活的分页按钮样式 */
.page-btn.active {
    /* 渐变背景，从紫色到蓝色 */
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    /* 白色文字 */
    color: white;
}

/* 非激活分页按钮悬停状态样式 */
.page-btn:hover:not(.active) {
    /* 悬停时变为稍深的蓝色背景 */
    background: #e0e5ff;
}

/* 响应式设计 - 屏幕宽度小于768px时的样式 */
@media (max-width: 768px) {

    /* 小屏幕上评论改为垂直布局 */
    .comment {
        flex-direction: column;
    }

    /* 调整头像的间距 */
    .comment-avatar {
        margin-right: 0;
        margin-bottom: 15px;
    }

    /* 减小标题字体大小 */
    .comments-header h2 {
        font-size: 2rem;
    }

    /* 评论头部改为垂直布局 */
    .comment-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* 日期上方添加间距 */
    .comment-date {
        margin-top: 5px;
    }
}

/*//////////////*/

/* ------- 响应式设计 ------- */
/* 平板及中等屏幕 */
@media (max-width: 992px) {
    .hero {
        padding: 80px 0 50px;
        /* 缩小上下间距 */
    }

    .hero-image {
        position: relative;
        /* 取消绝对定位，改为随文档流 */
        width: 100%;
        max-width: 100%;
        margin-top: 40px;
        /* 图片放在文字下方 */
    }

    .about {
        flex-direction: column;
        /* 竖向排列 */
    }
}

/* 手机端小屏幕 */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        /* 固定在屏幕顶部 */
        top: 70px;
        /* 距离顶部 70px（避开 header） */
        left: -100%;
        /* 默认隐藏在左边屏幕外 */
        flex-direction: column;
        /* 菜单竖排 */
        background: var(--card-bg);
        width: 100%;
        /* 宽度占满 */
        padding: 20px 0;
        box-shadow: var(--shadow);
        /* 阴影效果 */
        transition: var(--transition);
        /* 动画切换 */
    }

    .nav-menu.active {
        left: 0;
        /* 激活时滑出显示 */
    }

    .nav-menu li {
        margin: 15px 0;
        text-align: center;
        /* 菜单居中 */
    }

    .mobile-toggle {
        display: block;
        /* 显示手机菜单按钮 */
    }

    .hero h1 {
        font-size: 2.8rem;
        /* 标题缩小 */
    }

    .blog-grid {
        grid-template-columns: 1fr;
        /* 博客文章单列 */
    }

    .newsletter {
        padding: 40px 20px;
        /* 缩小内边距 */
    }

    .subscribe-form {
        flex-direction: column;
        /* 输入框和按钮竖排 */
        gap: 15px;
    }

    .subscribe-form input,
    .subscribe-form button {
        border-radius: 50px;
        /* 圆角样式 */
        width: 100%;
        /* 占满宽度 */
    }
}