/* ============================================
   Reset and Base Styles - 重置和基础样式
   ============================================ */

/* 重置所有元素的默认样式，确保跨浏览器一致性
   Reset all default styles for cross-browser consistency */
* {
    margin: 0;           /* 清除外边距 / Remove margins */
    padding: 0;          /* 清除内边距 / Remove padding */
    box-sizing: border-box;  /* 边框盒模型 / Border-box sizing */
}

/* 全局基础样式设置
   Global base styles for body element */
body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  /* 字体族 / Font family */
    line-height: 1.6;      /* 行高倍数 / Line height multiplier */
    color: #000;            /* 文字颜色 / Text color */
    background-color: #fff;  /* 背景颜色白色 / White background color */
}

/* ============================================
   Layout Containers - 布局容器
   ============================================ */

/* 主容器样式 - 控制整体页面宽度和居中
   Main container - controls overall page width and centering */
.container {
    max-width: 1200px;     /* 最大宽度 / Maximum width */
    margin: 0 auto;        /* 水平居中 / Center horizontally */
    padding: 0 20px;        /* 左右内边距 / Horizontal padding */
}

/* ============================================
   Header Styles - 头部导航样式
   ============================================ */

/* 头部导航栏样式 - 固定定位、渐变背景、阴影效果
   Header navigation bar - fixed positioning, gradient background, shadow effect */
.header {
    background: linear-gradient(135deg, #fefefe 0%, #f8f9fa 100%);  /* 渐变背景 / Gradient background */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);  /* 阴影效果 / Shadow effect */
    position: fixed;        /* 固定定位 / Fixed positioning */
    top: 0;                 /* 顶部位置 / Top position */
    width: 100%;            /* 全宽 / Full width */
    z-index: 1000;          /* 层级 / Z-index */
}

/* 头部伪元素 - 添加深度效果的微妙覆盖层
   Header pseudo-element - subtle overlay for depth effect */
.header::before {
    content: '';           /* 空内容 / Empty content */
    position: absolute;     /* 绝对定位 / Absolute positioning */
    top: 0;                 /* 顶部对齐 / Top alignment */
    left: 0;                /* 左侧对齐 / Left alignment */
    right: 0;               /* 右侧对齐 / Right alignment */
    bottom: 0;              /* 底部对齐 / Bottom alignment */
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);  /* 微妙渐变 / Subtle gradient */
    z-index: -1;            /* 背景层级 / Background z-index */
}

/* 导航栏样式
   Navigation bar styles */
.navbar {
    padding: 1rem 0;        /* 上下内边距 / Vertical padding */
}

/* 导航栏内容容器 - 使用Flexbox布局
   Navigation content container - using Flexbox layout */
.nav-container {
    max-width: 1200px;     /* 最大宽度 / Maximum width */
    margin: 0 auto;        /* 水平居中 / Center horizontally */
    padding: 0 20px;        /* 左右内边距 / Horizontal padding */
    display: flex;          /* Flexbox布局 / Flexbox layout */
    justify-content: space-between;  /* 两端对齐 / Space between items */
    align-items: center;    /* 垂直居中 / Vertical centering */
}

/* 导航Logo链接样式
   Navigation logo link styles */
.nav-logo a {
    font-size: 1.2rem;      /* 字体大小 / Font size */
    font-weight: bold;      /* 字体粗细 / Font weight */
    color: #2c3e50;         /* 文字颜色 / Text color */
    text-decoration: none;  /* 无下划线 / No underline */
}

/* 导航菜单样式 - 使用Flexbox水平排列
   Navigation menu styles - horizontal Flexbox layout */
.nav-menu {
    display: flex;          /* Flexbox布局 / Flexbox layout */
    list-style: none;       /* 无列表样式 / No list style */
    gap: 0.5rem;            /* 项目间距 / Gap between items */
}

/* 导航链接样式
   Navigation link styles */
.nav-link {
    color: #2c3e50;         /* 文字颜色 / Text color */
    text-decoration: none;  /* 无下划线 / No underline */
    font-weight: 500;       /* 字体粗细 / Font weight */
    transition: all 0.3s ease;  /* 过渡动画 / Transition animation */
    padding: 0.5rem 0.6rem; /* 内边距 / Padding */
    border-radius: 6px;     /* 圆角 / Border radius */
}

/* 导航链接悬停和激活状态
   Navigation link hover and active states */
.nav-link:hover,
.nav-link.active {
    color: #555;                    /* 悬停文字颜色 / Hover text color */
    background-color: rgba(0, 0, 0, 0.05);  /* 悬停背景色 / Hover background */
    transform: translateY(-2px);   /* 向上移动效果 / Upward movement effect */
}

/* ============================================
   Mobile Navigation - 移动端导航
   ============================================ */

/* 汉堡菜单样式 - 移动端导航按钮
   Hamburger menu styles - mobile navigation button */
.hamburger {
    display: none;          /* 默认隐藏 / Hidden by default */
    flex-direction: column; /* 垂直排列 / Vertical layout */
    cursor: pointer;        /* 鼠标指针 / Cursor pointer */
}

/* 汉堡菜单线条样式
   Hamburger menu bar styles */
.bar {
    width: 25px;            /* 线条宽度 / Bar width */
    height: 3px;            /* 线条高度 / Bar height */
    background-color: #333; /* 线条颜色 / Bar color */
    margin: 3px 0;          /* 线条间距 / Bar spacing */
    transition: 0.3s;       /* 过渡动画 / Transition animation */
}

/* ============================================
   Main Content - 主要内容区域
   ============================================ */

/* 主要内容区域样式
   Main content area styles */
.main-content {
    margin-top: 70px;                    /* 顶部边距 / Top margin */
    min-height: calc(100vh - 70px);     /* 最小高度 / Minimum height */
}

/* ============================================
   Welcome Section - 欢迎区域
   ============================================ */

/* 欢迎区域样式
   Welcome section styles */
.welcome-section {
    background-color: #ffffff;           /* 背景颜色 / Background color */
    padding: 1.5rem 0;                  /* 上下内边距 / Vertical padding */
    border-radius: 8px;                  /* 圆角 / Border radius */
    margin: 1rem 0;                      /* 上下外边距 / Vertical margin */
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03);  /* 阴影效果 / Shadow effect */
}

/* 首页布局样式 - 使用CSS Grid两列布局
   Home page layout - CSS Grid two-column layout */
.home-layout {
    display: grid;                    /* Grid布局 / Grid layout */
    grid-template-columns: 2fr 1fr;  /* 两列比例 2:1 / Two columns ratio 2:1 */
    gap: 4rem;                       /* 列间距 / Column gap */
    align-items: start;               /* 顶部对齐 / Top alignment */
}

/* 主要内容区域样式 - 使用Flexbox垂直布局
   Main content area - vertical Flexbox layout */
.main-content-area {
    display: flex;            /* Flexbox布局 / Flexbox layout */
    flex-direction: column;  /* 垂直排列 / Vertical direction */
    gap: 1rem;               /* 项目间距 / Gap between items */
}

/* 个人姓名样式
   Profile name styles */
.profile-name {
    font-size: 1.5rem;        /* 字体大小 / Font size */
    color: #000;              /* 文字颜色 / Text color */
    margin-bottom: 0.5rem;   /* 底部外边距 / Bottom margin */
}

/* 标题部分样式 - 职位标题
   Title part styles - position title */
.title-part {
    font-size: 1.1rem;        /* 字体大小 / Font size */
    color: #2c5aa0;           /* 文字颜色 / Text color */
    font-weight: 500;         /* 字体粗细 / Font weight */
}

.profile-title {
    font-size: 1.3rem;
    color: #2c5aa0;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.profile-affiliation {
    font-size: 1.1rem;
    color: #000;
    margin-bottom: 0.5rem;
    line-height: 1.6;
    max-width: 600px;
}

/* Profile Email */
.profile-email {
    margin-bottom: 1rem;
}

.profile-email a {
    color: #2c5aa0;
    text-decoration: none;
    font-weight: 500;
}

.profile-email a:hover {
    text-decoration: underline;
}

/* Social Links */
.social-links {
    display: flex;
    flex-wrap: wrap;
    gap:  0.7rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #666;                     /* 较淡的文字颜色 / Lighter text color */
    padding: 0.5rem 0.8rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
}

.social-link:hover {
    background-color: #e9ecef;
    border-color: #2c5aa0;
    color: #2c5aa0;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(44, 90, 160, 0.1);
}

.social-icon-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.social-name {
    font-size: 0.9rem;
    font-weight: 500;
}

.profile-bio,
.profile-interests {
    margin-bottom: 0.5rem;
}

.profile-bio h3 {
    margin-bottom: 0.5rem;
}

.profile-bio h3,
.profile-interests h3 {
    color: #000;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.profile-bio p {
    color: #000;
    line-height: 1.7;
    margin-bottom: 0.3rem;
}

.interests-list {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.interests-list li {
    color: #000;
    margin-bottom: 0.3rem;
    line-height: 1.5;
}

/* Featured Publications Section */
/* 特色出版物样式
   Featured publications styles */
.featured-publications {
    margin-top: 1rem;                    /* 顶部外边距 / Top margin */
    background-color: #ffffff;           /* 背景颜色 / Background color */
    padding: 1.5rem;                     /* 内边距 / Padding */
    border-radius: 8px;                  /* 圆角 / Border radius */
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03);  /* 阴影效果 / Shadow effect */
}


.publications-list {
    display: grid;
    gap: 0.5rem;
}

.publication-item {
    background-color: #f8f9fa;
    padding: 0.7rem;
    border-radius: 10px;
    border-left: 4px solid #2c5aa0;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* Left side journal abbreviation tags */
.publication-item > .publication-journal {
    color: #2c5aa0;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    padding: 0.5rem 0.8rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #e6f3ff 0%, #cce7ff 100%);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(44, 90, 160, 0.15);
    border: 1px solid #b3d9ff;
}

.publication-content h3 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.publication-content h3 a {
    color: #666;                     /* 较淡的文字颜色 / Lighter text color */
    text-decoration: none;
    border-bottom: 1px solid #ccc;   /* 淡色下划线 / Light underline */
    transition: all 0.3s ease;
}

.publication-content h3 a:hover {
    color: #2c5aa0;                  /* 悬停时颜色 / Hover color */
    border-bottom-color: #2c5aa0;    /* 悬停时下划线颜色 / Hover underline color */
}

.publication-authors {
    color: #000;
    font-style: italic;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.publication-content .publication-journal {
    color: #2c5aa0;
    font-weight: bold;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
}

.publication-abstract {
    color: #000;
    line-height: 1.6;
    font-size: 0.9rem;
}

/* News Sidebar */
.news-sidebar {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    height: fit-content;
    border: 1px solid #e9ecef;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid #2c5aa0;
    padding-bottom: 0.5rem;
}

.sidebar-title {
    font-size: 1.2rem;
    color: #2c3e50;
    margin: 0;
}

.news-sidebar .news-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.news-sidebar .news-item {
    background-color: #fff;
    padding: 0.75rem;
    border-radius: 8px;
    box-shadow: none;                    /* 首页无阴影边框 / No shadow for homepage */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.news-sidebar .news-date {
    color: #2c5aa0;
    font-weight: bold;
    font-size: 0.9rem;
    border-right: none;                  /* 首页日期无右侧分隔线 / No separator line for homepage */
    padding-right: 0;                    /* 移除右侧内边距 / Remove right padding */
}

.news-sidebar .news-content h3 {
    color: #2c3e50;
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
}

.news-sidebar .news-content p {
    color: #000;
    line-height: 1.2;
    font-size: 0.9rem;
}

.news-more {
    margin-top: 2rem;
    text-align: center;
}

.news-link {
    color: #666;                     /* 较淡的文字颜色 / Lighter text color */
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    border-bottom: 1px solid #ccc;   /* 淡色下划线 / Light underline */
    transition: all 0.3s ease;
}

.news-link:hover {
    color: #2c5aa0;                  /* 悬停时颜色 / Hover color */
    border-bottom-color: #2c5aa0;    /* 悬停时下划线颜色 / Hover underline color */
}

/* 个人简介中的链接样式 - 减少视觉突出度
   Profile bio link styles - reduce visual prominence */
.profile-bio a {
    color: #666;                     /* 较淡的文字颜色 / Lighter text color */
    text-decoration: none;           /* 无下划线 / No underline */
    border-bottom: 1px solid #ccc;   /* 淡色下划线 / Light underline */
    transition: all 0.3s ease;       /* 过渡动画 / Transition animation */
}

.profile-bio a:hover {
    color: #2c5aa0;                  /* 悬停时颜色 / Hover color */
    border-bottom-color: #2c5aa0;    /* 悬停时下划线颜色 / Hover underline color */
}

/* News Section */
.news-section {
    background-color: #f8f9fa;
    padding: 4rem 0;
}

.section-title {
    font-size: 1.5rem;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 1rem;
}

.news-list {
    display: grid;
    gap: 2rem;
}

/* News Item Layout / 新闻条目布局 */
.news-item {
    display: grid;                          /* 网格布局 / Grid layout */
    grid-template-columns: 140px 1fr;       /* 日期160px，内容自适应 / Date 160px, content auto */
    gap: 2rem;                              /* 左右间距 / Gap between date and content */
    align-items: start;                     /* 顶部对齐 / Top alignment */
    margin-bottom: 1rem;                    /* 底部边距 / Bottom margin */
    padding-bottom: 1rem;                   /* 底部内边距 / Bottom padding */
    border-bottom: 1px solid #e0e0e0;      /* 底部分隔线 / Bottom separator */
}

/* Last News Item / 最后一条新闻 */
.news-item:last-child {
    margin-bottom: 0;                       /* 无底部边距 / No bottom margin */
    padding-bottom: 0;                      /* 无底部内边距 / No bottom padding */
    border-bottom: none;                    /* 无底部分隔线 / No bottom border */
}

/* News Date / 新闻日期 */
.news-date {
    color: #2c5aa0;                         /* 蓝色字体 / Blue color */
    font-weight: 600;                       /* 字体加粗 / Bold */
    font-size: 0.95rem;                     /* 字体大小 / Font size */
    text-align: left;                       /* 左对齐 / Left align */
    padding-right: 1rem;                   /* 右侧内边距 / Right padding */
    border-right: 2px solid #e0e0e0;       /* 右侧分隔线 / Right separator */
    display: flex;                          /* 弹性布局 / Flex layout */
    flex-direction: column;                 /* 垂直排列 / Vertical direction */
}

.news-month-day {
    display: block;                         /* 块级显示 / Block display */
}

.news-year {
    display: block;                         /* 块级显示 / Block display */
    font-size: 0.85rem;                     /* 年份字体稍小 / Slightly smaller for year */
    color: #666;                            /* 年份颜色稍浅 / Lighter color for year */
}

/* News Content / 新闻内容 */
.news-content {
    display: flex;                          /* 弹性布局 / Flex layout */
    flex-direction: column;                 /* 垂直排列 / Vertical direction */
}

/* News Title / 新闻标题 */
.news-content h3 {
    color: #2c3e50;                         /* 标题颜色 / Title color */
    margin-top: 0;                          /* 无顶部边距 / No top margin */
    margin-bottom: 0.5rem;                  /* 底部边距 / Bottom margin */
    font-size: 1.1rem;                      /* 字体大小 / Font size */
    font-weight: 600;                       /* 字体加粗 / Bold */
}

/* News Paragraph / 新闻段落 */
.news-content p {
    color: #000;                            /* 黑色字体 / Black color */
    line-height: 1.5 !important;            /* 行高 / Line height */
    margin-bottom: 0.3rem !important;       /* 段落间距 / Paragraph margin */
    font-size: 0.95rem;                     /* 字体大小 / Font size */
}

/* CV Page Styles */
.cv-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.cv-main-title {
    font-size: 2.5rem;
    color: #2c3e50;
    text-align: right;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

/* CV顶部最后更新时间样式
   CV top last updated time styles */
.cv-last-updated-top {
    text-align: right;               /* 右对齐 / Right alignment */
    color: #666;                     /* 文字颜色 / Text color */
    font-size: 0.9rem;               /* 字体大小 / Font size */
    margin: 0 0 2rem 0;             /* 边距 / Margin */
    font-style: italic;              /* 斜体 / Italic */
}

/* CV页面导航侧边栏样式
   CV page navigation sidebar styles */
.cv-nav-sidebar {
    position: fixed;            /* 固定定位 / Fixed positioning */
    left: 51%;                  /* 左侧位置 / Left position */
    transform: translateX(-600px);  /* 水平偏移 / Horizontal offset */
    top: 170px;                 /* 顶部位置 / Top position */
    background-color: #ffffff;  /* 背景颜色 / Background color */
    border-radius: 8px;         /* 圆角 / Border radius */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);  /* 阴影效果 / Shadow effect */
    padding: 1rem;              /* 内边距 / Padding */
    z-index: 1000;              /* 层级 / Z-index */
    min-width: 200px;           /* 最小宽度 / Minimum width */
    border: none; /* 边框 / Border */
}

.cv-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cv-nav-list li {
    margin-bottom: 0.5rem;
}

.cv-nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #2c3e50;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.cv-nav-link:hover {
    background-color: #f8f9fa;
    color: #2c5aa0;
}

.cv-nav-link.active {
    background-color: #2c5aa0;
    color: #ffffff;
}

/* CV页面主要内容区域样式
   CV page main content area styles */
.cv-main-content {
    margin-left: 300px;              /* 左侧外边距 / Left margin */
    margin-right: 0;                 /* 右侧外边距 / Right margin */
    max-width: none;                 /* 无最大宽度限制 / No max width limit */
    width: calc(100% - 270px);      /* 宽度计算 / Width calculation */
}

/* CV表格样式 - 时间在右边对齐
   CV table styles - time aligned to the right */
.cv-table {
    width: 100%;                     /* 全宽 / Full width */
    border-collapse: collapse;       /* 合并边框 / Collapse borders */
    margin-bottom: 0.8rem;          /* 减少底部外边距 / Reduced bottom margin */
}

.cv-table-row {
    display: flex;                   /* Flexbox布局 / Flexbox layout */
    align-items: flex-start;         /* 顶部对齐 / Top alignment */
    padding: 0.8rem 0;              /* 减少上下内边距 / Reduced vertical padding */
    border-bottom: 1px solid #e9ecef; /* 底部边框 / Bottom border */
}

.cv-table-row:last-child {
    border-bottom: none;             /* 最后一行无边框 / No border for last row */
}

.cv-table-content {
    flex: 1;                         /* 占据剩余空间 / Take remaining space */
    padding-right: 1rem;             /* 右侧内边距 / Right padding */
}

.cv-table-date {
    flex-shrink: 0;                  /* 不收缩 / Don't shrink */
    text-align: right;               /* 右对齐 / Right align */
    color: #666;                     /* 文字颜色 / Text color */
    font-weight: 500;                /* 字体粗细 / Font weight */
    min-width: 120px;                /* 最小宽度 / Minimum width */
    white-space: nowrap;             /* 不换行 / No wrap */
}

.cv-table h3 {
    margin: 0 0 0.5rem 0;           /* 标题边距 / Title margin */
    color: #2c3e50;                  /* 标题颜色 / Title color */
    font-size: 1.1rem;               /* 标题字体大小 / Title font size */
}

.cv-table p {
    margin: 0.25rem 0;               /* 段落边距 / Paragraph margin */
    color: #555;                     /* 段落颜色 / Paragraph color */
}

.cv-table ul {
    margin: 0.5rem 0;                /* 列表边距 / List margin */
    padding-left: 2rem;            /* 列表左内边距 / List left padding */
}

.cv-table li {
    margin: 0.25rem 0;               /* 列表项边距 / List item margin */
    color: #555;                     /* 列表项颜色 / List item color */
}


/* CV页面链接样式 - 减少视觉突出度
   CV page link styles - reduce visual prominence */
.cv-table a {
    color: #666;                     /* 较淡的文字颜色 / Lighter text color */
    text-decoration: none;           /* 无下划线 / No underline */
    border-bottom: 1px solid #ccc;   /* 淡色下划线 / Light underline */
    transition: all 0.3s ease;       /* 过渡动画 / Transition animation */
}

.cv-table a:hover {
    color: #2c5aa0;                  /* 悬停时颜色 / Hover color */
    border-bottom-color: #2c5aa0;    /* 悬停时下划线颜色 / Hover underline color */
}

/* ============================================
   Publications Page - 出版物页面
   ============================================ */

/* 出版物容器样式
   Publications container styles */
.publications-container {
    max-width: 1200px;               /* 最大宽度 / Maximum width */
    margin: 0 auto;                  /* 居中对齐 / Center alignment */
}

/* 按年份分组布局样式
   Publications by year layout styles */
.publications-by-year {
    max-width: 1200px;                /* 最大宽度 / Maximum width */
    margin: 0 auto;                   /* 居中 / Center alignment */
    counter-reset: publication-counter; /* 重置计数器 / Reset counter */
}

/* 年份标题样式
   Year header styles */
.year-header {
    font-size: 1.2rem;                /* 字体大小 / Font size */
    color: #2c5aa0;                   /* 颜色 / Color */
    margin: 1.5rem 0 1rem 0;         /* 边距 / Margin */
    padding-bottom: 0.3rem;           /* 底部内边距 / Bottom padding */
    font-weight: bold;                /* 字体粗细 / Font weight */
}

/* 第一个年份标题样式
   First year header styles */
.year-header:first-of-type {
    margin-top: 0.5rem;               /* 第一个年份顶部边距更小 / Smaller top margin for first year */
}

/* 年份组样式
   Year group styles */
.publications-year-group {
    margin-left: 2.5rem;              /* 左侧缩进 / Left indentation */
    margin-bottom: 1rem;              /* 底部边距 / Bottom margin */
}

/* 简单布局样式（保留用于其他页面）
   Simple layout styles (kept for other pages) */
.publications-simple-layout {
    display: grid;
    grid-template-columns: 80px 1fr;  /* 年份列宽度80px，引用列占据剩余空间 / Year column 80px, citations take remaining space */
    gap: 1rem;                        /* 列间距 / Gap between columns */
    max-width: 1000px;                /* 最大宽度 / Maximum width */
    margin: 0 auto;                   /* 居中 / Center alignment */
}

.publication-year-column {
    display: grid;
    grid-template-rows: repeat(16, 1.5rem); /* 16行，每行1.5rem高度 / 16 rows, 1.5rem height each */
    gap: 0;                           /* 无间距，由grid-row控制 / No gap, controlled by grid-row */
    padding-top: 0.5rem;             /* 顶部内边距 / Top padding */
    align-content: start;             /* 顶部对齐 / Top alignment */
}

.year-item {
    color: #2c5aa0;                   /* 年份颜色 / Year color */
    font-weight: bold;                /* 字体粗细 / Font weight */
    font-size: 0.9rem;                /* 字体大小 / Font size */
    text-align: right;                /* 右对齐 / Right alignment */
    padding-right: 1rem;              /* 右侧内边距 / Right padding */
}

.publication-citations {
    display: flex;
    flex-direction: column;           /* 垂直排列 / Vertical direction */
    gap: 1.5rem;                     /* 引用间距 / Gap between citations */
}

.citation-item {
    line-height: 1.6;                 /* 行高 / Line height */
    font-size: 0.95rem;               /* 字体大小 / Font size */
    display: flex;                    /* Flexbox布局 / Flexbox layout */
    align-items: baseline;            /* 基线对齐 / Baseline alignment */
    gap: 0.5rem;                     /* 序号与内容间距 / Gap between number and content */
}

.citation-number {
    color: #2c5aa0;                   /* 序号颜色 / Number color */
    font-weight: bold;                /* 字体粗细 / Font weight */
    font-size: 0.9rem;                /* 字体大小 / Font size */
    flex-shrink: 0;                   /* 不收缩 / Don't shrink */
}

/* 自动计数器样式
   Auto counter styles */
.citation-item {
    counter-increment: publication-counter; /* 递增计数器 / Increment counter */
}

.citation-number::before {
    content: counter(publication-counter) "."; /* 自动生成序号 / Auto generate number */
}

.citation-item a {
    color: #333;                      /* 链接颜色 / Link color */
    text-decoration: none;            /* 无下划线 / No underline */
    border-bottom: 1px solid #ccc;    /* 淡色下划线 / Light underline */
    transition: all 0.3s ease;        /* 过渡动画 / Transition animation */
}

.citation-item a:hover {
    color: #2c5aa0;                   /* 悬停时颜色 / Hover color */
    border-bottom-color: #2c5aa0;     /* 悬停时下划线颜色 / Hover underline color */
}

.citation-item em {
    font-style: italic;               /* 期刊名斜体 / Journal name italic */
    color: #2c5aa0;                   /* 期刊名颜色 / Journal name color */
}

/* 年份间距样式
   Year spacer styles */
.year-spacer {
    height: 1.5rem;                   /* 与引用间距相同 / Same as citation gap */
}

/* 部分副标题样式
   Section subtitle styles */
.section-subtitle {
    font-size: 1.5rem;                /* 字体大小 / Font size */
    color: #2c5aa0;                   /* 颜色 / Color */
    margin: 3rem 0 1.5rem 0;         /* 边距 / Margin */
    padding-bottom: 0.5rem;           /* 底部内边距 / Bottom padding */
    border-bottom: 2px solid #2c5aa0; /* 底部边框 / Bottom border */
    font-weight: bold;                /* 字体粗细 / Font weight */
}

/* 部分副标题响应式设计
   Section subtitle responsive design */
@media (max-width: 768px) {
    .section-subtitle {
        flex-direction: column;       /* 移动端垂直排列 / Vertical on mobile */
        align-items: flex-start;       /* 左对齐 / Left align */
        gap: 0.5rem;                  /* 添加间距 / Add gap */
    }
    
    .section-subtitle a {
        align-self: flex-end;          /* 移动端右对齐 / Right align on mobile */
    }
}

/* 会议报告样式
   Conference presentation styles */
.citation-item span:not(.citation-number) {
    color: #333;                      /* 文字颜色 / Text color */
}

/* 引用文本样式
   Citation text styles */
.citation-text {
    color: #333;                      /* 文字颜色 / Text color */
    line-height: 1.6;                 /* 行高 / Line height */
}

/* 作者姓名样式
   Author name styles */
.author-name {
    font-weight: bold;                /* 加粗 / Bold */
    text-decoration: underline;       /* 下划线 / Underline */
    color: #2c5aa0;                   /* 蓝色 / Blue color */
}

/* 通讯作者星号样式
   Corresponding author asterisk styles */
.author-name sup {
    font-weight: bold;                /* 加粗 / Bold */
    color: #d32f2f;                   /* 红色突出显示 / Red for emphasis */
    text-decoration: none;            /* 去除下划线 / Remove underline */
    vertical-align: super;            /* 上标对齐 / Superscript alignment */
    font-size: 1em;                 /* 字体大小 / Font size */
}

/* DOI链接样式
   DOI link styles */
.doi-link {
    color: #2c5aa0;                   /* DOI链接颜色 / DOI link color */
    text-decoration: underline;       /* 下划线 / Underline */
    font-weight: normal;              /* 字体粗细 / Font weight */
    margin-left: 0.5rem;              /* 左侧间距 / Left margin */
    transition: color 0.3s ease;      /* 过渡动画 / Transition animation */
}

.doi-link:hover {
    color: #1e3a8a;                   /* 悬停时颜色 / Hover color */
    text-decoration: underline;       /* 保持下划线 / Keep underline */
}

/* 会议部分年份列样式
   Conference section year column styles */
.conferences-layout .publication-year-column {
    grid-template-rows: repeat(4, 1.5rem); /* 4行，每行1.5rem高度 / 4 rows, 1.5rem height each */
}

/* 会议部分自动计数器重置
   Conference section counter reset */
.conferences-layout {
    counter-reset: publication-counter; /* 重置计数器 / Reset counter */
}

/* 年份标题样式
   Year title styles */
.year-title {
    font-size: 1.8rem;               /* 字体大小 / Font size */
    color: #2c5aa0;                  /* 文字颜色 / Text color */
    margin: 2rem 0 1rem 0;          /* 边距 / Margin */
    padding-bottom: 0.5rem;          /* 底部内边距 / Bottom padding */
    border-bottom: 2px solid #2c5aa0; /* 底部边框 / Bottom border */
    font-weight: bold;               /* 字体粗细 / Font weight */
}

/* 年份部分样式
   Year section styles */
.publication-year-section {
    margin-bottom: 3rem;             /* 底部外边距 / Bottom margin */
}

/* 出版物列表样式
   Publications list styles */
.publications-list {
    display: flex;                   /* Flexbox布局 / Flexbox layout */
    flex-direction: column;          /* 垂直排列 / Vertical direction */
    gap: 1.5rem;                    /* 项目间距 / Gap between items */
}

/* 出版物页面项目样式
   Publications page item styles */
.publications-container .publication-item {
    display: flex;                   /* Flexbox布局 / Flexbox layout */
    align-items: flex-start;         /* 顶部对齐 / Top alignment */
    gap: 1.5rem;                    /* 项目间距 / Gap between items */
    padding: 1.5rem;                /* 内边距 / Padding */
    background-color: #ffffff;       /* 背景颜色 / Background color */
    border-radius: 8px;              /* 圆角 / Border radius */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 / Shadow effect */
    border-left: 4px solid #2c5aa0;  /* 左侧边框 / Left border */
}

/* 出版物序号样式
   Publication number styles */
.publication-number {
    flex-shrink: 0;                  /* 不收缩 / Don't shrink */
    width: 40px;                     /* 宽度 / Width */
    height: 40px;                    /* 高度 / Height */
    background-color: #2c5aa0;       /* 背景颜色 / Background color */
    color: #ffffff;                  /* 文字颜色 / Text color */
    border-radius: 50%;              /* 圆形 / Circle */
    display: flex;                   /* Flexbox布局 / Flexbox layout */
    align-items: center;             /* 垂直居中 / Vertical centering */
    justify-content: center;         /* 水平居中 / Horizontal centering */
    font-weight: bold;               /* 字体粗细 / Font weight */
    font-size: 1.1rem;               /* 字体大小 / Font size */
}

/* 出版物页面内容样式
   Publications page content styles */
.publications-container .publication-content {
    flex: 1;                         /* 占据剩余空间 / Take remaining space */
}

.publications-container .publication-content h3 {
    margin: 0 0 0.8rem 0;           /* 标题边距 / Title margin */
    color: #2c3e50;                  /* 标题颜色 / Title color */
    font-size: 1.2rem;               /* 标题字体大小 / Title font size */
    line-height: 1.4;                /* 行高 / Line height */
}

.publications-container .publication-content h3 a {
    color: #2c3e50;                  /* 链接颜色 / Link color */
    text-decoration: none;           /* 无下划线 / No underline */
    transition: color 0.3s ease;     /* 过渡动画 / Transition animation */
}

.publications-container .publication-content h3 a:hover {
    color: #2c5aa0;                  /* 悬停时颜色 / Hover color */
}

.publications-container .publication-authors {
    color: #555;                     /* 作者颜色 / Authors color */
    font-style: italic;              /* 斜体 / Italic */
    margin: 0 0 0.5rem 0;           /* 边距 / Margin */
    font-size: 1rem;                 /* 字体大小 / Font size */
}

.publications-container .publication-journal {
    color: #2c5aa0;                  /* 期刊颜色 / Journal color */
    font-weight: bold;               /* 字体粗细 / Font weight */
    margin: 0 0 1rem 0;             /* 边距 / Margin */
    font-size: 0.95rem;              /* 字体大小 / Font size */
}

.publications-container .publication-abstract {
    color: #666;                     /* 摘要颜色 / Abstract color */
    line-height: 1.6;                /* 行高 / Line height */
    font-size: 0.95rem;              /* 字体大小 / Font size */
    margin: 0;                       /* 清除边距 / Remove margin */
}

/* ============================================
   Responsive Design - 响应式设计
   ============================================ */

/* CV页面响应式设计 - 中等屏幕
   CV page responsive design - medium screens */
@media (max-width: 1200px) {
    .cv-nav-sidebar {
        left: 20px;
        top: 150px;
        transform: none;
    }
    
    .cv-main-content {
        margin-left: 250px;
        max-width: none;
        width: calc(100% - 270px);
    }
}

/* CV表格响应式设计 - 小屏幕
   CV table responsive design - small screens */
@media (max-width: 768px) {
    .cv-table-row {
        flex-direction: column;      /* 垂直排列 / Vertical direction */
        align-items: flex-start;     /* 左对齐 / Left alignment */
    }
    
    .cv-table-date {
        text-align: left;            /* 左对齐 / Left align */
        margin-top: 0.5rem;          /* 顶部外边距 / Top margin */
        min-width: auto;             /* 自动宽度 / Auto width */
    }
    
    .cv-table-content {
        padding-right: 0;            /* 无右侧内边距 / No right padding */
    }
    
    /* 出版物页面移动端响应式设计
       Publications page mobile responsive design */
    .publications-container .publication-item {
        flex-direction: column;      /* 垂直排列 / Vertical direction */
        align-items: center;         /* 居中对齐 / Center alignment */
        text-align: center;          /* 文字居中 / Text center */
    }
    
    .publications-container .publication-number {
        margin-bottom: 1rem;         /* 底部外边距 / Bottom margin */
    }
    
    .publications-container .publication-content {
        text-align: left;            /* 内容左对齐 / Content left align */
    }
    
    /* 简单布局移动端响应式设计
       Simple layout mobile responsive design */
    .publications-simple-layout {
        grid-template-columns: 1fr;  /* 单列布局 / Single column layout */
        gap: 0.5rem;                 /* 减少间距 / Reduced gap */
    }
    
    .publication-year-column {
        display: none;               /* 隐藏年份列 / Hide year column */
    }
    
    .publication-citations {
        gap: 1rem;                   /* 减少引用间距 / Reduced citation gap */
    }
    
    .citation-item {
        font-size: 0.9rem;           /* 减小字体 / Smaller font */
    }
}

@media (max-width: 768px) {
    .cv-nav-sidebar {
        display: none;
    }
    
    .cv-main-content {
        margin-left: 0;
        max-width: 100%;
        width: 100%;
    }
    
    .cv-container {
        max-width: 100%;
    }
}

.cv-section {
    margin-bottom: 1.2rem;           /* 减少底部外边距 / Reduced bottom margin */
    padding: 1.2rem;                 /* 减少内边距 / Reduced padding */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03);
}

.cv-section h2 {
    color: #2c3e50;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #2c5aa0;
    padding-bottom: 0.5rem;
}

.cv-content {
    line-height: 1.6;
}

.cv-item {
    margin-bottom: 1.5rem;
}

.cv-item h3 {
    color: #2c3e50;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.cv-date {
    color: #666;
    font-style: italic;
    font-size: 0.9rem;
}

.publication-list {
    list-style: none;
    padding-left: 0;
}

.publication-list li {
    margin-bottom: 1rem;
    padding-left: 1rem;
    position: relative;
}

.publication-list li::before {
    content: "•";
    color: #2c5aa0;
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Footer */
.footer {
    background-color: #2c3e50;
    color: #fff;
    padding: 2rem 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-links {
    display: flex;
    gap: 2rem;
}

.footer-links a {
    color: #ecf0f1;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #2c5aa0;
}

/* Responsive Design */
/* 移动端响应式设计 - 小屏幕
   Mobile responsive design - small screens */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;         /* 固定定位 / Fixed positioning */
        left: -100%;             /* 左侧隐藏 / Hidden to left */
        top: 70px;               /* 顶部位置 / Top position */
        flex-direction: column;  /* 垂直排列 / Vertical direction */
        background-color: #fff;  /* 背景颜色 / Background color */
        width: 100%;             /* 全宽 / Full width */
        text-align: center;      /* 文字居中 / Text center */
        transition: 0.3s;        /* 过渡动画 / Transition animation */
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);  /* 阴影效果 / Shadow effect */
        padding: 2rem 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .hamburger {
        display: flex;
    }

    .home-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .main-content-area {
        gap: 2rem;
    }

    .profile-name {
        font-size: 2rem;
    }

    .profile-links {
        gap: 0.8rem;
    }

    .profile-link {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }

    .publication-item {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .publication-year {
        margin-bottom: 1rem;
    }

    .news-sidebar .news-item {
        flex-direction: column;
        gap: 1rem;
    }

    .footer-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .footer-links {
        justify-content: center;
    }
}

/* Page Section Styles */
.page-section {
    background-color: #fff;
    padding: 2rem 0;
    min-height: calc(100vh - 160px);
}

.page-title {
    font-size: 2.5rem;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 1.5rem;
}

.content-area {
    max-width: 1200px;
    margin: 0 auto;
}

.content-area h2 {
    color: #2c3e50;
    margin-bottom: 1rem;
    margin-top: 2rem;
    font-size: 1.5rem;
    border-bottom: 2px solid #2c5aa0;
    padding-bottom: 0.5rem;
}

.content-area p {
    color: #000;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.content-area ul {
    color: #000;
    line-height: 1.7;
    margin-left: 2rem;
    margin-bottom: 1.5rem;
}

.content-area li {
    margin-bottom: 0.5rem;
}

/* ============================================
   RESEARCH PAGE - 研究页面
   ============================================ */

/* Research Grid Layout / 研究网格布局 */
.research-grid {
    display: flex;                        /* 弹性布局 / Flex layout */
    flex-direction: column;               /* 垂直排列 / Vertical arrangement */
    gap: 2rem;                           /* 卡片间距 / Card gap */
    margin-top: 2rem;                    /* 顶部边距 / Top margin */
}

/* Research Card / 研究卡片 */
.research-card {
    display: block;                       /* 块级布局 / Block layout */
    padding-top: 0rem;                    /* 顶部内边距 / Top padding */
    margin-top: 0rem;                     /* 顶部外边距 / Top margin */
    border-top: 1px solid #e0e0e0;        /* 顶部分割线 / Top divider */
}

.research-card:first-child {
    border-top: none;                     /* 第一个卡片无分割线 / No divider for first card */
    margin-top: 0;                        /* 第一个卡片无顶部外边距 / No top margin for first card */
    padding-top: 0;                       /* 第一个卡片无顶部内边距 / No top padding for first card */
}

/* Research Card Horizontal Layout / 研究卡片横向布局 */
.research-card-horizontal {
    display: flex;                        /* 弹性布局 / Flex layout */
    align-items: center;                  /* 垂直居中对齐 / Center alignment */
    gap: 3rem;                           /* 左右间距 / Gap between content and image */
}

.research-card-horizontal .research-content {
    flex: 1;                              /* 占据剩余空间 / Take remaining space */
}

.research-card-horizontal .research-image-container {
    flex: 0 0 40%;                        /* 图片占40%宽度 / Image takes 40% width */
    padding: 0;                           /* 移除内边距 / Remove padding */
    margin-top: 0;                        /* 无顶部外边距 / No top margin */
}

/* Research Content / 研究内容 */
.research-content {
    padding: 2rem 2rem 1rem 2rem;        /* 内边距 / Padding */
}

.research-title {
    font-size: 1.5rem;                    /* 标题字体大小 / Title font size */
    color: #2c5aa0;                       /* 标题颜色 / Title color */
    margin-bottom: 1rem;                  /* 底部边距 / Bottom margin */
    font-weight: 600;                     /* 字体粗细 / Font weight */
}

.research-description {
    color: #555;                          /* 描述文字颜色 / Description text color */
    line-height: 1.5;                     /* 行高 / Line height */
    font-size: 1rem;                      /* 字体大小 / Font size */
    margin-bottom: 0.5rem;                /* 底部边距 / Bottom margin */
}

.research-list {
    color: #555;                          /* 列表文字颜色 / List text color */
    line-height: 1.15;                     /* 行高 / Line height */
    font-size: 0.95rem;                   /* 字体大小 / Font size */
    padding-left: 1.5rem;                 /* 左侧内边距 / Left padding */
    margin-top: 0.5rem;                   /* 顶部边距 / Top margin */
}

.research-list li {
    margin-bottom: 0.3rem;                /* 列表项间距 / List item spacing */
}

.research-list li:last-child {
    margin-bottom: 0;                     /* 最后一项无底部边距 / No margin for last item */
}

/* Research Image Container / 研究图片容器 */
.research-image-container {
    padding: 1rem 2rem 2rem 2rem;        /* 内边距 / Padding */
    display: flex;                        /* 弹性布局 / Flex layout */
    justify-content: center;              /* 水平居中 / Horizontal center */
    align-items: center;                  /* 垂直居中 / Vertical center */
}

.research-image-container img {
    max-width: 100%;                      /* 最大宽度100% / Max width 100% */
    height: auto;                         /* 高度自适应 / Auto height */
    display: block;                       /* 块级显示 / Block display */
}

/* Research Publications / 研究相关论文 */
.research-publications {
    padding: 0 2rem 2rem 2rem;           /* 内边距 / Padding */
    margin-top: 0.5rem;                   /* 顶部外边距 / Top margin */
}

/* Publications inside research-content (for horizontal layout) / 横向布局中content内的publications */
.research-content .research-publications {
    padding: 0;                           /* 无内边距 / No padding */
    margin-top: 1.2rem;                   /* 顶部外边距 / Top margin */
}

.research-publications .publications-subtitle {
    font-size: 0.9rem;                    /* 字体大小 / Font size */
    color: #666;                          /* 标题颜色 / Title color */
    margin-bottom: 0.5rem;                /* 底部边距 / Bottom margin */
    font-weight: 600;                     /* 字体粗细 / Font weight */
}

.research-publications .publications-list {
    list-style: disc;                     /* 圆点列表样式 / Disc list style */
    padding-left: 1.5rem;                 /* 左侧内边距 / Left padding */
    margin: 0;                            /* 无外边距 / No margin */
    display: block;                       /* 块级显示，覆盖其他定义 / Block display */
}

.research-publications .publications-list li {
    margin-bottom: 0.5rem;                /* 列表项间距 / List item spacing */
    line-height: 1.15;                    /* 行高 / Line height */
    padding: 0;                           /* 无内边距 / No padding */
}

.research-publications .publications-list li::marker {
    font-size: 0.8rem;                    /* 圆点大小 / Bullet size */
}

.research-publications .publications-list li:last-child {
    margin-bottom: 0;                     /* 最后一项无底部边距 / No margin for last item */
}

.research-publications .publications-list a {
    color: #555;                          /* 链接颜色 / Link color */
    text-decoration: none;                /* 无下划线 / No underline */
    font-size: 0.85rem;                   /* 字体大小 / Font size */
    transition: color 0.3s ease;          /* 颜色过渡 / Color transition */
    display: inline;                      /* 内联显示 / Inline display */
}

.research-publications .publications-list a:hover {
    color: #333;                          /* 悬停颜色 / Hover color */
    text-decoration: underline;           /* 悬停时添加下划线 / Add underline on hover */
}

.research-publications .publications-list em {
    font-style: italic;                   /* 斜体 / Italic */
    color: #777;                          /* 期刊名颜色 / Journal name color */
}

/* BRAIN GIFs Row Layout / BRAIN GIF单行布局 */
.brain-gifs-row {
    display: grid;                        /* 网格布局 / Grid layout */
    grid-template-columns: 1fr 1fr 1fr 1.2fr; /* Gauge, Satellite, Radar, BRAIN - 可调整比例 */
    gap: 1rem;                           /* 间距 / Gap */
    padding: 0.5rem 2rem 0.5rem 2rem;        /* 内边距(上 右 下 左) / Padding (top right bottom left) */
    align-items: center;                  /* 垂直居中 / Vertical center */
}

/* Outcome Item Styles / 成果项样式 */
.outcome-item {
    overflow: hidden;                     /* 隐藏溢出 / Hide overflow */
}

.outcome-item img {
    width: 100%;                          /* 宽度100% / 100% width */
    height: auto;                         /* 高度自适应 / Auto height */
    display: block;                       /* 块级显示 / Block display */
}

/* ============================================
   RESPONSIVE DESIGN - 响应式设计
   ============================================ */

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .profile-img {
        width: 150px;
        height: 150px;
    }

    .profile-name {
        font-size: 1.8rem;
    }

    .news-item {
        padding: 1.5rem;
    }

    .page-title {
        font-size: 2rem;
    }

    .content-area {
        padding: 0 1rem;
    }
    
    /* Research Card Responsive / 研究卡片响应式 */
    .research-card {
        flex-direction: column;           /* 移动端垂直排列 / Vertical on mobile */
    }
    
    .research-card-horizontal {
        flex-direction: column;           /* 移动端垂直排列 / Vertical on mobile */
    }
    
    .research-card-horizontal .research-image-container {
        flex: 0 0 auto;                   /* 移动端自动宽度 / Auto width on mobile */
        width: 100%;                      /* 移动端宽度100% / 100% width on mobile */
        padding: 1rem 2rem 2rem 2rem;    /* 恢复内边距 / Restore padding */
    }
    
    .research-image {
        width: 100%;                      /* 移动端宽度100% / 100% width on mobile */
        min-width: 100%;                  /* 移动端最小宽度100% / 100% min-width on mobile */
        height: 200px;                    /* 移动端高度减小 / Smaller height on mobile */
    }
    
    .research-content {
        padding: 1.5rem;                  /* 移动端减小内边距 / Smaller padding on mobile */
    }
    
    .research-title {
        font-size: 1.3rem;                /* 移动端减小标题 / Smaller title on mobile */
    }
    
    /* BRAIN GIFs Row Responsive / BRAIN GIF行响应式 */
    .brain-gifs-row {
        grid-template-columns: repeat(2, 1fr); /* 移动端2列 / 2 columns on mobile */
        gap: 0.5rem;                      /* 减小间距 / Smaller gap */
    }
}

/* ============================================
   CONTACT PAGE - 联系页面
   ============================================ */

/* Contact Info Styles / 联系信息样式 */
.contact-info {
    display: flex;                        /* 弹性布局 / Flex layout */
    flex-direction: column;               /* 垂直排列 / Vertical direction */
    gap: 2rem;                           /* 项目间距 / Gap between items */
    margin: 2rem 0;                      /* 上下外边距 / Vertical margin */
}

.contact-item {
    padding: 1.5rem;                     /* 内边距 / Padding */
    background-color: #f8f9fa;           /* 背景颜色 / Background color */
    border-radius: 8px;                  /* 圆角 / Border radius */
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03);  /* 阴影效果 / Shadow effect */
}

.contact-item h3 {
    color: #2c5aa0;                      /* 标题颜色 / Title color */
    font-size: 1.2rem;                    /* 字体大小 / Font size */
    margin-bottom: 0.75rem;              /* 底部外边距 / Bottom margin */
    font-weight: 600;                   /* 字体粗细 / Font weight */
}

.contact-item p {
    color: #333;                         /* 文字颜色 / Text color */
    line-height: 1.7;                    /* 行高 / Line height */
    margin: 0.5rem 0;                    /* 段落间距 / Paragraph margin */
}

.contact-item a {
    color: #2c5aa0;                      /* 链接颜色 / Link color */
    text-decoration: none;                /* 无下划线 / No underline */
    font-weight: 500;                    /* 字体粗细 / Font weight */
    transition: all 0.3s ease;            /* 过渡动画 / Transition animation */
}

.contact-item a:hover {
    color: #1e3a8a;                      /* 悬停时颜色 / Hover color */
    text-decoration: underline;           /* 添加下划线 / Add underline */
}

/* Contact Social Links / 联系社交链接 */
.contact-social-links {
    display: flex;                        /* 弹性布局 / Flex layout */
    flex-wrap: wrap;                      /* 允许换行 / Allow wrapping */
    gap: 0.75rem;                        /* 链接间距 / Link spacing */
    margin-top: 0.5rem;                  /* 顶部外边距 / Top margin */
}

.contact-social-link {
    padding: 0.5rem 1rem;                 /* 内边距 / Padding */
    background-color: #ffffff;            /* 背景颜色 / Background color */
    border: 1px solid #e0e0e0;          /* 边框 / Border */
    border-radius: 6px;                  /* 圆角 / Border radius */
    color: #2c5aa0;                      /* 文字颜色 / Text color */
    text-decoration: none;                /* 无下划线 / No underline */
    font-weight: 500;                    /* 字体粗细 / Font weight */
    transition: all 0.3s ease;           /* 过渡动画 / Transition animation */
}

.contact-social-link:hover {
    background-color: #2c5aa0;            /* 悬停背景色 / Hover background */
    color: #ffffff;                       /* 悬停文字色 / Hover text color */
    transform: translateY(-2px);         /* 向上移动效果 / Upward movement */
    box-shadow: 0 2px 8px rgba(44, 90, 160, 0.2);  /* 阴影效果 / Shadow effect */
}

/* Contact Message / 联系消息 */
.contact-message {
    margin-top: 2.5rem;                   /* 顶部外边距 / Top margin */
    padding: 2rem;                        /* 内边距 / Padding */
    background-color: #f8f9fa;            /* 背景颜色 / Background color */
    border-radius: 8px;                  /* 圆角 / Border radius */
    border-left: 4px solid #2c5aa0;     /* 左侧边框 / Left border */
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03);  /* 阴影效果 / Shadow effect */
}

.contact-message h2 {
    color: #2c3e50;                       /* 标题颜色 / Title color */
    font-size: 1.5rem;                    /* 字体大小 / Font size */
    margin-bottom: 1rem;                  /* 底部外边距 / Bottom margin */
}

.contact-message p {
    color: #555;                          /* 文字颜色 / Text color */
    line-height: 1.7;                     /* 行高 / Line height */
    margin-bottom: 1rem;                  /* 段落间距 / Paragraph margin */
}

.contact-message p:last-child {
    margin-bottom: 0;                     /* 最后一段无底部边距 / No margin for last paragraph */
}

/* Visitor Counter Styles / 访客计数器样式 */
.visitor-counter-box {
    background: linear-gradient(135deg, #e6f3ff 0%, #cce7ff 100%);
    border: 2px solid #2c5aa0;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(44, 90, 160, 0.15);
}

.counter-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.counter-label {
    font-weight: 500;
    color: #2c3e50;
    font-size: 1rem;
}

.counter-number {
    font-size: 1.5rem;
    font-weight: bold;
    color: #2c5aa0;
}

.visitor-map-item {
    text-align: center;                   /* 文字居中 / Text center */
}

.visitor-map-item h3 {
    text-align: left;                    /* 标题左对齐 / Title left align */
}

/* Contact Page Responsive / 联系页面响应式 */
@media (max-width: 768px) {
    .contact-info {
        gap: 1.5rem;                     /* 减小间距 / Reduced gap */
    }
    
    .contact-item {
        padding: 1.2rem;                 /* 减小内边距 / Reduced padding */
    }
    
    .contact-social-links {
        flex-direction: column;          /* 垂直排列 / Vertical direction */
    }
    
    .contact-social-link {
        width: 100%;                     /* 全宽 / Full width */
        text-align: center;              /* 文字居中 / Text center */
    }
    
    .contact-message {
        padding: 1.5rem;                 /* 减小内边距 / Reduced padding */
    }
    
    .visitor-counter-box {
        padding: 1.2rem;                 /* 减小内边距 / Reduced padding */
    }
    
    .counter-text {
        flex-direction: column;          /* 垂直排列 / Vertical direction */
        gap: 0.5rem;                    /* 添加间距 / Add gap */
    }
    
    .counter-number {
        font-size: 1.3rem;              /* 减小字体 / Smaller font */
    }
}