/* ===== 全局样式 ===== */
/* 根元素变量定义 - 集中管理所有样式变量，便于统一维护和修改 */
:root {
    /* 主色调 - 蓝色系，用于主要按钮、链接、强调元素 */
    --primary-color: #2563eb;       /* 主色-标准蓝（更暗） */
    --primary-dark: #1d4ed8;        /* 主色-加深蓝（hover状态，更暗） */
    --primary-light: #3b82f6;       /* 主色-浅蓝 */
    --primary-lighter: #1e293b;     /* 主色-极浅蓝（背景/高亮） */
    
    /* 辅助色 - 绿色系，用于成功状态、次要按钮 */
    --secondary-color: #059669;     /* 辅助色-标准绿（更暗） */
    --secondary-dark: #047857;      /* 辅助色-加深绿（hover状态，更暗） */
    --secondary-light: #10b981;     /* 辅助色-浅绿 */
    
    /* 强调色 - 橙色系，用于警告、提示、突出显示 */
    --accent-color: #d97706;        /* 强调色-标准橙（更暗） */
    --accent-dark: #b45309;         /* 强调色-加深橙（hover状态，更暗） */
    --accent-light: #f59e0b;        /* 强调色-浅橙 */
    
    /* 中性色 - 文字颜色，从深到浅分级使用 */
    --text-primary: #e2e8f0;        /* 主要文字（标题、正文），更暗 */
    --text-secondary: #cbd5e1;      /* 次要文字（副标题、说明），更暗 */
    --text-tertiary: #94a3b8;       /* 三级文字（次要说明），更暗 */
    --text-muted: #64748b;          /* 弱化文字（占位符、辅助说明），更暗 */
    
    /* 背景色 - 页面背景分级 */
    --bg-primary: #0f172a;          /* 主要背景（卡片、内容区），更暗 */
    --bg-secondary: #020617;        /* 次要背景（次要区域），更暗 */
    --bg-tertiary: #1e293b;         /* 三级背景（输入框、hover状态） */
    --bg-light: #020617;            /* 全局背景（页面最外层），更暗 */
    
    /* 边框色 - 不同强度的边框 */
    --border-light: #334155;        /* 浅色边框（分隔线、卡片边框） */
    --border-medium: #475569;       /* 中等边框（输入框） */
    --border-dark: #64748b;         /* 深色边框（强调分隔） */
    
    /* 阴影 - 不同尺寸的阴影效果 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);      /* 小阴影（轻量级元素） */
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); /* 中等阴影（卡片） */
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); /* 大阴影（悬浮状态） */
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3); /* 超大阴影（重点突出） */
    
    /* 圆角 - 统一的圆角值 */
    --radius-sm: 2px;               /* 小圆角（按钮、输入框） */
    --radius-md: 4px;               /* 中等圆角（卡片） */
    --radius-lg: 6px;               /* 大圆角（容器） */
    
    /* 字体大小 - 使用rem单位，基于根元素16px基准 */
    --font-xs: 0.75rem;    /* 12px - 极小字体（徽章、标签） */
    --font-sm: 0.875rem;   /* 14px - 小字体（辅助文字） */
    --font-base: 1rem;     /* 16px - 基础字体（正文） */
    --font-lg: 1.125rem;   /* 18px - 大字体（次要标题） */
    --font-xl: 1.25rem;    /* 20px - 特大字体（导航项） */
    --font-2xl: 1.5rem;    /* 24px - 2倍大（二级标题） */
    --font-3xl: 1.875rem;  /* 30px - 3倍大（一级标题） */
    --font-4xl: 2.25rem;   /* 36px - 4倍大（页面主标题） */
    --font-5xl: 3rem;      /* 48px - 5倍大（超大标题） */
    
    /* 行高 - 不同紧凑程度的行高 */
    --line-tight: 1.25;     /* 紧凑行高（标题） */
    --line-snug: 1.375;     /* 较紧凑行高（短文本） */
    --line-normal: 1.5;     /* 标准行高（常规文本） */
    --line-relaxed: 1.625;  /* 宽松行高（长文本） */
    --line-loose: 2;        /* 极宽松行高（注释、说明） */
    
    /* 间距 - 统一的间距单位，基于4px递增 */
    --space-1: 0.25rem;    /* 4px - 极小间距（内边距微调） */
    --space-2: 0.5rem;     /* 8px - 小间距（图标与文字） */
    --space-3: 0.75rem;    /* 12px - 中小间距（按钮内边距） */
    --space-4: 1rem;       /* 16px - 基础间距（元素外边距） */
    --space-5: 1.25rem;    /* 20px - 中间距（卡片内边距） */
    --space-6: 1.5rem;     /* 24px - 大间距（模块间距） */
    --space-8: 2rem;       /* 32px - 特大间距（区域分隔） */
    --space-10: 2.5rem;    /* 40px - 超大间距（主要模块） */
    --space-12: 3rem;      /* 48px - 极大间距（页面分区） */
    --space-16: 4rem;      /* 64px - 巨型间距（页面头部） */
    --space-20: 5rem;      /* 80px - 超级间距（特殊布局） */
}

/* 全局重置 - 清除所有元素默认边距和内边距 */
* {
    margin: 0;                       /* 清除默认外边距 */
    padding: 0;                      /* 清除默认内边距 */
    box-sizing: border-box;          /* 盒模型：宽度包含边框和内边距 */
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; /* 系统无衬线字体，保证跨平台一致性 */
}

/* HTML和BODY基础样式 */
html, body {
    min-height: 100%;                /* 最小高度100%，允许内容超出视口高度 */
    /* 移除overflow:hidden，允许页面滚动 */
}

/* BODY主体样式 */
body {
    background-color: var(--bg-light);  /* 页面背景色使用全局变量 */
    color: var(--text-primary);         /* 默认文字颜色 */
    line-height: var(--line-normal);    /* 默认行高 */
    font-size: var(--font-base);        /* 默认字体大小 */
}

/* 标题样式 - 统一所有标题的基础样式 */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;                 /* 标题字重：半粗体 */
    line-height: var(--line-tight);   /* 标题行高：紧凑 */
    color: var(--text-primary);       /* 标题文字颜色 */
    margin-bottom: var(--space-4);    /* 标题底部间距 */
}

/* 各级标题字号 */
h1 {
    font-size: var(--font-4xl);       /* H1字号：36px */
}

h2 {
    font-size: var(--font-3xl);       /* H2字号：30px */
}

h3 {
    font-size: var(--font-2xl);       /* H3字号：24px */
}

h4 {
    font-size: var(--font-xl);        /* H4字号：20px */
}

h5 {
    font-size: var(--font-lg);        /* H5字号：18px */
}

h6 {
    font-size: var(--font-base);      /* H6字号：16px */
}

/* 段落样式 */
p {
    margin-bottom: var(--space-4);    /* 段落底部间距 */
    line-height: var(--line-relaxed); /* 段落行高：宽松，提升可读性 */
}

/* 链接样式增强 */
a {
    text-decoration: none;            /* 清除默认下划线 */
    color: var(--primary-color);      /* 链接默认颜色：主色调 */
    transition: all 0.3s ease;        /* 所有属性过渡效果：0.3秒，缓动 */
}

/* 链接悬浮状态 */
a:hover {
    color: var(--primary-dark);       /* 悬浮时颜色加深 */
    text-decoration: none;            /* 悬浮时仍无下划线 */
}

/* 布局容器 - 页面最外层容器 */
.app-wrapper {
    width: 100%;                      /* 宽度100% */
    min-height: 100vh;                /* 最小高度视口高度，保证占满屏幕 */
    display: flex;                    /* Flex布局 */
    flex-direction: column;           /* 垂直方向排列 */
    background-color: var(--bg-light); /* 背景色 */
    /* 移除overflow:hidden，允许页面滚动 */
    padding: 0 2rem;                  /* 左右内边距2rem */
}

/* ----- 顶部导航栏 (固定) ----- */
.top-header {
    position: fixed;                  /* 固定定位：始终在页面顶部 */
    top: 0;                           /* 距离顶部0 */
    left: 50%;                        /* 水平居中：左偏移50% */
    transform: translateX(-50%);      /* 水平居中：左移自身50%宽度 */
    z-index: 100;                     /* 层级100，保证在最上层 */
    background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary)); /* 背景渐变：白色到浅灰 */
    padding: 0.8rem 2rem;             /* 上下0.8rem，左右2rem内边距 */
    display: flex;                    /* Flex布局 */
    align-items: center;              /* 垂直居中对齐 */
    justify-content: space-between;   /* 元素两端对齐 */
    box-shadow: var(--shadow-md);     /* 中等阴影效果 */
    border-bottom: 1px solid var(--border-light); /* 底部浅色边框 */
    flex-wrap: wrap;                  /* 允许换行，适配小屏幕 */
    gap: 1rem;                        /* 元素间距1rem */
    width: 100%;                      /* 宽度100% */
    max-width: 1400px;                /* 最大宽度1400px */
    box-sizing: border-box;           /* 盒模型包含边框和内边距 */
    flex-shrink: 0;                   /* 不允许收缩 */
    transition: all 0.3s ease;        /* 过渡效果 */
}

/* 导航栏悬浮效果 */
.top-header:hover {
    box-shadow: var(--shadow-lg);     /* 悬浮时阴影变大 */
}

/* Logo区域 */
.logo-area {
    flex: 0 0 290px;                  /* Flex：不伸缩，固定宽度290px */
    padding-left: var(--space-6);     /* 左内边距24px */
    display: flex;                    /* Flex布局 */
    align-items: center;              /* 垂直居中 */
    gap: var(--space-3);              /* 元素间距12px */
}

/* 移动端菜单切换按钮 */
.menu-toggle {
    display: none !important;         /* 默认隐藏，移动端显示 */
    background: none;                 /* 无背景 */
    border: none;                     /* 无边框 */
    color: var(--text-primary);       /* 文字颜色 */
    font-size: 1.5rem;                /* 字体大小 */
    cursor: pointer;                  /* 鼠标指针：手型 */
    padding: var(--space-2);          /* 内边距8px */
    border-radius: var(--radius-sm);               /* 圆角4px */
    transition: all 0.3s ease;        /* 过渡效果 */
}

/* 菜单按钮悬浮状态 */
.menu-toggle:hover {
    background: var(--bg-tertiary);   /* 悬浮背景色 */
    color: var(--primary-color);      /* 悬浮文字颜色 */
}

/* Logo标题 */
.logo-area h1 {
    font-size: var(--font-2xl);       /* 字号24px */
    font-weight: 650;                 /* 字重650，比600稍粗 */
    color: var(--text-primary);       /* 文字颜色 */
    letter-spacing: 0.5px;            /* 字母间距0.5px */
    margin: 0;                        /* 清除默认外边距 */
}

/* Logo标题中的图标 */
.logo-area h1 i {
    color: var(--primary-color);      /* 图标颜色：主色调 */
    margin-right: var(--space-2);     /* 右外边距8px */
}

/* 搜索区域 - 优化：搜索按钮固定到右侧 */
.search-area {
    display: flex;                    /* Flex布局 */
    align-items: center;              /* 垂直居中 */
    background: var(--bg-tertiary);   /* 背景色：浅灰 */
    border-radius: var(--radius-md);               /* 圆角6px */
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-6); /* 内边距：上4px 右4px 下4px 左24px */
    border: 1px solid var(--border-medium); /* 中等边框 */
    flex: 1 1 400px;                  /* Flex：可伸缩，基础宽度400px */
    max-width: 550px;                 /* 最大宽度550px */
    position: relative;               /* 相对定位：作为按钮绝对定位的参考 */
    transition: all 0.3s ease;        /* 过渡效果 */
}

/* 搜索框获得焦点时的状态 */
.search-area:focus-within {
    border-color: var(--primary-color); /* 边框颜色变为主色调 */
    box-shadow: 0 0 0 3px var(--primary-lighter); /* 外发光效果：主色极浅 */
}

/* 搜索图标 */
.search-area i.fa-search {
    color: var(--text-tertiary);      /* 图标颜色：三级文字色 */
    font-size: var(--font-base);      /* 图标大小：16px */
}

/* 搜索输入框 */
.search-area input {
    border: none;                     /* 无边框 */
    background: transparent;          /* 透明背景 */
    padding: var(--space-3) var(--space-4); /* 内边距：上下12px 左右16px */
    width: 100%;                      /* 宽度100% */
    outline: none;                    /* 清除默认焦点轮廓 */
    font-size: var(--font-base);      /* 字体大小16px */
    padding-right: 120px;             /* 右内边距120px：留出按钮空间，避免文字遮挡 */
    color: var(--text-primary);       /* 文字颜色 */
}

/* 搜索框占位符样式 */
.search-area input::placeholder {
    color: var(--text-muted);         /* 占位符颜色：弱化文字色 */
}

/* 搜索按钮 */
.search-area button {
    background: var(--primary-color); /* 按钮背景：主色调 */
    border: none;                     /* 无边框 */
    color: white;                     /* 文字白色 */
    padding: var(--space-2) var(--space-6); /* 内边距：上下8px 左右24px */
    border-radius: var(--radius-sm);               /* 圆角4px */
    font-size: var(--font-sm);        /* 字体大小14px */
    font-weight: 500;                 /* 字重500：中等粗体 */
    cursor: pointer;                  /* 鼠标指针：手型 */
    transition: all 0.3s ease;        /* 过渡效果 */
    display: flex;                    /* Flex布局 */
    align-items: center;              /* 垂直居中 */
    gap: var(--space-2);              /* 元素间距8px */
    white-space: nowrap;              /* 文字不换行 */
    /* 核心：固定按钮到右侧 */
    position: absolute;               /* 绝对定位 */
    right: 2px;                       /* 右偏移2px */
    top: 2px;                         /* 上偏移2px */
    bottom: 2px;                      /* 下偏移2px */
}

/* 搜索按钮悬浮状态 */
.search-area button:hover {
    background: var(--primary-dark);  /* 背景色加深 */
    transform: translateY(-1px);      /* 向上偏移1px：微浮效果 */
    box-shadow: var(--shadow-md);     /* 中等阴影 */
}

/* 搜索按钮内图标 */
.search-area button i {
    color: white;                     /* 图标白色 */
    font-size: var(--font-sm);        /* 图标大小14px */
}

/* 用户操作区（图标按钮） */
.user-actions {
    display: flex;                    /* Flex布局 */
    gap: var(--space-6);              /* 元素间距24px */
    color: var(--text-secondary);     /* 文字颜色：次要文字色 */
}

/* 用户操作区图标 */
.user-actions i {
    font-size: var(--font-xl);        /* 图标大小20px */
    cursor: pointer;                  /* 鼠标指针：手型 */
    transition: all 0.3s ease;        /* 过渡效果 */
    padding: var(--space-2);          /* 内边距8px：增大点击区域 */
    border-radius: var(--radius-sm);               /* 圆角4px */
    position: relative;               /* 相对定位：用于伪元素 */
    overflow: hidden;                 /* 隐藏溢出：伪元素圆形效果 */
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands", sans-serif; /* 强制使用 Font Awesome 字体 */
    font-weight: 400;                 /* Font Awesome Regular 字重 */
}

/* 用户操作图标背景动画 - 伪元素 */
.user-actions i::after {
    content: '';                      /* 空内容 */
    position: absolute;               /* 绝对定位 */
    top: 50%;                         /* 垂直居中 */
    left: 50%;                        /* 水平居中 */
    width: 0;                         /* 初始宽度0 */
    height: 0;                        /* 初始高度0 */
    background: var(--primary-lighter); /* 背景色：主色极浅 */
    border-radius: 50%;               /* 圆形 */
    transform: translate(-50%, -50%); /* 居中调整 */
    transition: width 0.3s ease, height 0.3s ease; /* 宽高过渡 */
    z-index: -1;                      /* 层级-1：在图标下方 */
}

/* 图标悬浮时伪元素动画 */
.user-actions i:hover::after {
    width: 100px;                     /* 宽度100px */
    height: 100px;                    /* 高度100px */
}

/* 图标悬浮状态 */
.user-actions i:hover {
    color: var(--primary-color);      /* 颜色变为主色调 */
    transform: translateY(-2px);      /* 向上偏移2px */
}

/* 用户操作区链接样式 */
.user-actions a {
    color: inherit;                   /* 继承父元素颜色 */
    text-decoration: none;            /* 清除默认下划线 */
}

/* 用户操作区链接内图标 */
.user-actions a i {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands", sans-serif; /* 强制使用 Font Awesome 字体 */
    font-weight: 400;                 /* Font Awesome Regular 字重 */
}

/* ----- 主体布局 (侧边栏+内容) ----- */
.main-layout {
    display: flex;                    /* Flex布局 */
    flex: 1;                          /* 占满剩余空间 */
    /* 移除overflow:hidden，允许内容滚动 */
    max-width: 1400px;                /* 最大宽度1400px */
    margin: 80px auto 0;              /* 上外边距80px（避开导航栏），左右居中，下0 */
    width: 100%;                      /* 宽度100% */
    box-sizing: border-box;           /* 盒模型包含边框和内边距 */
    gap: 0;                           /* 元素间距0 */
    align-items: stretch;             /* 修改：让子元素拉伸填满高度 */
    /* 确保内容区优先显示 */
    flex-wrap: wrap;
}

/* 侧边栏 (固定+自身滚动) */
.sidebar {
    flex: 0 0 260px;                  /* Flex：不伸缩，固定宽度260px */
    background: linear-gradient(180deg, var(--bg-primary), var(--bg-secondary)); /* 背景渐变：从上到下白色到浅灰 */
    box-shadow: var(--shadow-md);     /* 中等阴影 */
    padding: var(--space-6) var(--space-4); /* 内边距：上下24px 左右16px */
    border-radius: 0;                 /* 无圆角 */
    margin: 0;                        /* 无外边距 */
    border-right: 1px solid var(--border-light); /* 右侧浅色边框 */
    transition: all 0.3s ease;        /* 过渡效果 */
    display: flex;                    /* Flex布局 */
    flex-direction: column;           /* 垂直排列 */
    position: sticky;                 /* 粘性定位：滚动时固定 */
    top: 80px;                        /* 距离顶部80px（导航栏高度） */
    height: calc(100vh - 80px);       /* 修改：固定侧边栏高度 = 视口高度 - 导航栏高度 */
    max-height: calc(100vh - 80px);   /* 最大高度同上 */
    overflow-y: auto;                /* 保持侧边栏自身滚动：垂直方向溢出滚动 */
    scrollbar-width: thin;            /* Firefox：滚动条细样式 */
    scrollbar-color: var(--primary-light) var(--bg-tertiary); /* Firefox：滚动条颜色 */
    /* 优先级设置 */
    order: 1;
}

/* 自定义滚动条 - Webkit浏览器（Chrome/Safari） */
.sidebar::-webkit-scrollbar {
    width: 6px;                       /* 滚动条宽度6px */
}
.sidebar::-webkit-scrollbar-track {
    background: var(--bg-tertiary);   /* 滚动条轨道背景色 */
    border-radius: 2px;               /* 轨道圆角2px */
}
.sidebar::-webkit-scrollbar-thumb {
    background-color: var(--primary-light); /* 滚动条滑块颜色 */
    border-radius: 2px;               /* 滑块圆角2px */
}
.sidebar::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color); /* 滑块悬浮颜色 */
}

/* 侧边栏悬浮效果 */
.sidebar:hover {
    box-shadow: var(--shadow-xl);     /* 超大阴影 */
}

/* 个人资料区域 */
.profile {
    text-align: center;               /* 文字居中 */
    margin-bottom: var(--space-10);   /* 底部间距40px（增加间距） */
}

/* 头像容器 */
.avatar {
    width: 100px;                     /* 宽度100px（保持尺寸） */
    height: 100px;                    /* 高度100px */
    border-radius: 50%;               /* 改为50%实现圆形 */
    background: linear-gradient(145deg, var(--primary-light), var(--primary-color)); /* 背景渐变：主色浅到标准 */
    margin: 0 auto var(--space-5);    /* 外边距：上下0 左右居中 底部20px */
    display: flex;                    /* Flex布局 */
    align-items: center;              /* 垂直居中 */
    justify-content: center;          /* 水平居中 */
    font-size: 2.2rem;                /* 字体大小2.2rem */
    color: white;                     /* 文字白色 */
    border: 3px solid white;          /* 白色边框3px */
    box-shadow: var(--shadow-lg);     /* 大阴影 */
    overflow: hidden;                 /* 隐藏溢出：图片裁剪 */
    transition: all 0.3s ease-in-out; /* 统一过渡效果：0.3秒，缓入缓出 */
    transform-origin: center center;  /* 确保放大从中心开始 */
}

/* 头像悬浮动画 */
.avatar:hover {
    transform: rotate(360deg) scale(1.1); /* 旋转360度 + 放大1.1倍 */
    box-shadow: var(--shadow-xl);     /* 放大时增强阴影：超大阴影 */
}

/* 头像内图片 */
.avatar img {
    width: 100%;                      /* 宽度100% */
    height: 100%;                     /* 高度100% */
    object-fit: cover;                /* 图片裁剪：覆盖容器 */
    transition: transform 0.5s ease-in-out; /* 图片过渡效果 */
}

/* 用户名 */
.profile h3 {
    font-size: var(--font-2xl);       /* 字号24px */
    font-weight: 600;                 /* 字重600 */
    margin-bottom: var(--space-2);    /* 底部间距8px */
    color: var(--text-primary);       /* 文字颜色 */
}

/* 个人简介 */
.profile .bio {
    font-size: var(--font-sm);        /* 字号14px */
    color: var(--text-secondary);     /* 文字颜色：次要文字色 */
    display: inline-block;            /* 行内块：可设置内边距 */
    padding: var(--space-1) var(--space-6); /* 内边距：上下4px 左右24px */
    margin-bottom: var(--space-4);    /* 底部间距16px */
    transition: all 0.3s ease;        /* 过渡效果 */
    min-height: 1.5em;                /* 最小高度1.5行：防止抖动 */
}

/* 简介悬浮效果 */
.profile .bio:hover {
    transform: translateY(-1px);      /* 向上偏移1px */
}

/* 导航菜单列表 */
.nav-menu {
    list-style: none;                 /* 清除列表样式 */
    margin: var(--space-8) 0 var(--space-4); /* 外边距：上32px 左右0 下16px */
}

/* 导航菜单项 */
.nav-item {
    margin-bottom: var(--space-2);    /* 底部间距8px（增加菜单项间距） */
    border-radius: var(--radius-sm);               /* 圆角4px */
    transition: all 0.3s ease;        /* 过渡效果 */
    position: relative;               /* 相对定位：用于伪元素 */
    overflow: hidden;                 /* 隐藏溢出：伪元素效果 */
}

/* 导航项左侧指示条 - 伪元素 */
.nav-item::before {
    content: '';                      /* 空内容 */
    position: absolute;               /* 绝对定位 */
    left: 0;                          /* 左对齐 */
    top: 0;                           /* 上对齐 */
    width: 4px;                       /* 宽度4px */
    height: 100%;                     /* 高度100% */
    background: var(--primary-color); /* 背景色：主色调 */
    transform: scaleY(0);             /* 初始缩放：垂直方向0 */
    transition: transform 0.3s ease;  /* 缩放过渡 */
    border-radius: 6px 0 0 6px;       /* 左侧圆角 */
}

/* 导航项悬浮时指示条显示 */
.nav-item:hover::before {
    transform: scaleY(1);             /* 垂直缩放100%：显示指示条 */
}

/* 导航项链接 */
.nav-item a {
    display: flex;                    /* Flex布局 */
    align-items: center;              /* 垂直居中 */
    padding: var(--space-4) var(--space-6); /* 内边距：上下16px 左右24px（增加内边距） */
    border-radius: var(--radius-sm);               /* 圆角4px */
    color: var(--text-secondary);     /* 文字颜色：次要文字色 */
    font-weight: 450;                 /* 字重450：略粗 */
    gap: var(--space-3);              /* 元素间距12px */
    font-size: var(--font-base);      /* 适度放大字体：16px */
    transition: all 0.3s ease;        /* 过渡效果 */
}

/* 导航项链接内第一个图标 */
.nav-item a i:first-child {
    width: 26px;                      /* 宽度26px：固定宽度，对齐 */
    color: var(--text-tertiary);      /* 颜色：三级文字色 */
    font-size: 1.3rem;                /* 图标大小1.3rem */
    transition: all 0.3s ease;        /* 过渡效果 */
}

/* 导航项激活状态 */
.nav-item.active {
    background-color: var(--primary-lighter); /* 背景色：主色极浅 */
}

/* 激活状态链接 */
.nav-item.active a {
    color: var(--primary-dark);       /* 文字颜色：主色加深 */
    font-weight: 500;                 /* 字重500 */
}

/* 激活状态图标 */
.nav-item.active a i:first-child {
    color: var(--primary-color);      /* 图标颜色：主色调 */
}

/* 非激活状态导航项悬浮 */
.nav-item:hover:not(.active) {
    background-color: var(--bg-secondary); /* 背景色：次要背景 */
}

/* 非激活状态链接悬浮 */
.nav-item:hover:not(.active) a {
    color: var(--primary-color);      /* 文字颜色：主色调 */
    transform: translateX(8px);       /* 向右偏移8px：动画效果 */
}

/* 非激活状态图标悬浮 */
.nav-item:hover:not(.active) a i:first-child {
    color: var(--primary-color);      /* 图标颜色：主色调 */
}

/* 导航分隔线 */
.nav-divider {
    height: 1px;                      /* 高度1px */
    background: var(--border-light);  /* 背景色：浅色边框 */
    margin: var(--space-6) 0;         /* 外边距：上下24px 左右0（增加分隔线间距） */
}

/* 子导航 (分类/页面/友链) */
.nav-sub {
    list-style: none;                 /* 清除列表样式 */
    padding-left: var(--space-10);    /* 左内边距40px：缩进 */
    margin: var(--space-2) 0 var(--space-4); /* 外边距：上下8px 左右0 下16px（增加子菜单项间距） */
    display: none;                    /* 默认隐藏 */
    transition: all 0.3s ease;        /* 过渡效果 */
}

/* 展开状态显示子导航 */
.nav-item.expanded .nav-sub {
    display: block;                   /* 块级显示 */
}

/* 子导航列表项 */
.nav-sub li {
    margin: var(--space-2) 0;         /* 外边距：上下8px 左右0（增加子菜单项间距） */
}

/* 子导航链接 */
.nav-sub li a {
    padding: var(--space-3) var(--space-4); /* 内边距：上下12px 左右16px */
    font-size: var(--font-sm);        /* 字号14px */
    color: var(--text-secondary);     /* 文字颜色：次要文字色 */
    display: flex;                    /* Flex布局 */
    justify-content: space-between;   /* 两端对齐：文字和徽章 */
    border-radius: var(--radius-sm);               /* 圆角4px */
    transition: all 0.3s ease;        /* 过渡效果 */
}

/* 子导航链接悬浮 */
.nav-sub li a:hover {
    background: var(--bg-tertiary);   /* 背景色：三级背景 */
    color: var(--text-primary);       /* 文字颜色：主要文字色 */
}

/* 徽章样式 */
.badge {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--border-medium)); /* 背景渐变：浅灰到中等边框色 */
    color: var(--text-secondary);     /* 文字颜色：次要文字色 */
    padding: var(--space-1) var(--space-3); /* 内边距：上下4px 左右12px */
    border-radius: var(--radius-sm);              /* 圆角4px */
    font-size: var(--font-xs);        /* 字号12px */
    font-weight: 500;                 /* 字重500 */
    transition: all 0.3s ease;        /* 过渡效果 */
    box-shadow: var(--shadow-sm);     /* 小阴影 */
}

/* 子导航链接悬浮时徽章效果 */
.nav-sub li a:hover .badge {
    background: linear-gradient(135deg, var(--primary-lighter), var(--primary-light)); /* 背景渐变：主色极浅到浅 */
    color: var(--primary-dark);       /* 文字颜色：主色加深 */
    box-shadow: var(--shadow-md);     /* 中等阴影 */
    transform: scale(1.05);           /* 放大1.05倍 */
}

/* 侧边栏底部 */
.sidebar-footer {
    display: flex;                    /* Flex布局 */
    justify-content: space-around;    /* 均匀分布 */
    margin-top: auto;                 /* 自动上边距：推到侧边栏底部 */
    padding-top: var(--space-6);      /* 上内边距24px */
    border-top: 1px dashed var(--border-medium); /* 顶部虚线边框：中等边框色 */
    flex-shrink: 0;                   /* 不允许收缩 */
    background: linear-gradient(180deg, var(--bg-primary), var(--bg-secondary)); /* 背景渐变 */
    position: relative;               /* 相对定位 */
    z-index: 10;                      /* 层级10 */
}

/* 侧边栏底部链接 */
.sidebar-footer a {
    color: var(--text-tertiary);      /* 文字颜色：三级文字色 */
    font-size: var(--font-sm);        /* 字号14px */
    display: flex;                    /* Flex布局 */
    flex-direction: column;           /* 垂直排列：图标在上，文字在下 */
    align-items: center;              /* 水平居中 */
    gap: var(--space-2);              /* 元素间距8px */
    transition: all 0.3s ease;        /* 过渡效果 */
    padding: var(--space-2);          /* 内边距8px：增大点击区域 */
    border-radius: var(--radius-sm);               /* 圆角4px */
    position: relative;               /* 相对定位：用于伪元素 */
    overflow: hidden;                 /* 隐藏溢出：伪元素效果 */
}

/* 侧边栏底部链接背景动画 - 伪元素 */
.sidebar-footer a::before {
    content: '';                      /* 空内容 */
    position: absolute;               /* 绝对定位 */
    top: 50%;                         /* 垂直居中 */
    left: 50%;                        /* 水平居中 */
    width: 0;                         /* 初始宽度0 */
    height: 0;                        /* 初始高度0 */
    background: var(--primary-lighter); /* 背景色：主色极浅 */
    border-radius: 50%;               /* 圆形 */
    transform: translate(-50%, -50%); /* 居中调整 */
    transition: width 0.3s ease, height 0.3s ease; /* 宽高过渡 */
    z-index: -1;                      /* 层级-1：在链接下方 */
}

/* 底部链接悬浮时伪元素动画 */
.sidebar-footer a:hover::before {
    width: 80px;                      /* 宽度80px */
    height: 80px;                     /* 高度80px */
}

/* 底部链接悬浮状态 */
.sidebar-footer a:hover {
    color: var(--primary-color);      /* 文字颜色：主色调 */
    transform: translateY(-2px);      /* 向上偏移2px */
    box-shadow: var(--shadow-md);     /* 中等阴影 */
}

/* 底部链接图标 */
.sidebar-footer a i {
    font-size: var(--font-xl);        /* 图标大小20px */
    transition: all 0.3s ease;        /* 过渡效果 */
}

/* 底部链接图标悬浮效果 */
.sidebar-footer a:hover i {
    transform: scale(1.1) rotate(5deg); /* 放大1.1倍 + 旋转5度 */
}

/* ----- 内容区 ----- */
.content {
    flex: 1;                          /* 占满剩余空间 */
    min-width: 0;                     /* 最小宽度0：允许收缩 */
    background: var(--bg-primary);    /* 背景色：主要背景 */
    border-radius: 0;                 /* 无圆角 */
    margin: 0;                        /* 无外边距 */
    padding: var(--space-6);          /* 内边距24px */
    box-shadow: none;                 /* 无阴影 */
    /* 移除固定高度，让内容自然展开 */
    width: 100%;                      /* 宽度100% */
    overflow-y: auto;                /* 核心：内容区垂直滚动 */
    scrollbar-width: thin;            /* Firefox：滚动条细样式 */
    scrollbar-color: var(--primary-light) var(--bg-tertiary); /* Firefox：滚动条颜色 */
    /* 优先级设置 */
    order: 2;
    min-width: 300px; /* 确保内容区有最小宽度 */
}

/* 内容区自定义滚动条 - Webkit浏览器 */
.content::-webkit-scrollbar {
    width: 8px;                       /* 滚动条宽度8px */
}
.content::-webkit-scrollbar-track {
    background: var(--bg-tertiary);   /* 滚动条轨道背景色 */
    border-radius: 4px;               /* 轨道圆角4px */
}
.content::-webkit-scrollbar-thumb {
    background-color: var(--primary-light); /* 滚动条滑块颜色 */
    border-radius: 4px;               /* 滑块圆角4px */
}
.content::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color); /* 滑块悬浮颜色 */
}

/* 右侧边栏 (固定+自身滚动) */
.right-sidebar {
    flex: 0 0 280px;                  /* Flex：不伸缩，固定宽度280px */
    background: linear-gradient(180deg, var(--bg-primary), var(--bg-secondary)); /* 背景渐变：从上到下白色到浅灰 */
    box-shadow: var(--shadow-md);     /* 中等阴影 */
    padding: var(--space-6) var(--space-4); /* 内边距：上下24px 左右16px */
    border-radius: 0;                 /* 无圆角 */
    margin: 0;                        /* 无外边距 */
    border-left: 1px solid var(--border-light); /* 左侧浅色边框 */
    transition: all 0.3s ease;        /* 过渡效果 */
    display: flex;                    /* Flex布局 */
    flex-direction: column;           /* 垂直排列 */
    position: sticky;                 /* 粘性定位：滚动时固定 */
    top: 80px;                        /* 距离顶部80px（导航栏高度） */
    height: calc(100vh - 80px);       /* 固定侧边栏高度 = 视口高度 - 导航栏高度 */
    max-height: calc(100vh - 80px);   /* 最大高度同上 */
    overflow-y: auto;                /* 保持侧边栏自身滚动：垂直方向溢出滚动 */
    scrollbar-width: thin;            /* Firefox：滚动条细样式 */
    scrollbar-color: var(--primary-light) var(--bg-tertiary); /* Firefox：滚动条颜色 */
    /* 优先级设置 */
    order: 3;
}

/* 右侧边栏悬浮效果 */
.right-sidebar:hover {
    box-shadow: var(--shadow-xl);     /* 超大阴影 */
}

/* 右侧边栏标题 */
.right-sidebar h3 {
    font-size: var(--font-xl);        /* 字号20px */
    font-weight: 600;                 /* 字重600 */
    margin-bottom: var(--space-4);    /* 底部间距16px */
    color: var(--text-primary);       /* 文字颜色 */
    padding-bottom: var(--space-2);   /* 下内边距8px */
    border-bottom: 1px solid var(--border-light); /* 底部浅色边框 */
}

/* 右侧边栏模块 */
.right-sidebar-section {
    margin-bottom: var(--space-8);    /* 底部间距32px */
}

/* 右侧边栏热门文章列表 */
.hot-articles {
    list-style: none;                 /* 清除列表样式 */
}

/* 热门文章项 */
.hot-article-item {
    margin-bottom: var(--space-4);    /* 底部间距16px */
    transition: all 0.3s ease;        /* 过渡效果 */
}

/* 热门文章链接 */
.hot-article-item a {
    display: block;                   /* 块级显示 */
    color: var(--text-secondary);     /* 文字颜色：次要文字色 */
    font-size: var(--font-sm);        /* 字号14px */
    line-height: var(--line-normal);  /* 行高：标准 */
    transition: all 0.3s ease;        /* 过渡效果 */
    padding: var(--space-2);          /* 内边距8px */
    border-radius: 4px;               /* 圆角4px */
}

/* 热门文章链接悬浮 */
.hot-article-item a:hover {
    color: var(--primary-color);      /* 文字颜色：主色调 */
    background-color: var(--bg-tertiary); /* 背景色：三级背景 */
    transform: translateX(4px);       /* 向右偏移4px */
}

/* 博客信息模块 */
.blog-info {
    background: var(--bg-secondary);  /* 背景色：次要背景 */
    padding: var(--space-4);          /* 内边距16px */
    border-radius: 4px;               /* 圆角4px */
    border-left: 4px solid var(--primary-color); /* 左侧4px主色边框 */
}

/* 博客信息项 */
.blog-info-item {
    display: flex;                    /* Flex布局 */
    justify-content: space-between;   /* 两端对齐 */
    margin-bottom: var(--space-3);    /* 底部间距12px */
    font-size: var(--font-sm);        /* 字号14px */
    color: var(--text-secondary);     /* 文字颜色：次要文字色 */
}

/* 博客信息值 */
.blog-info-value {
    color: var(--primary-color);      /* 文字颜色：主色调 */
    font-weight: 500;                 /* 字重500 */
}

/* 标签模块 */
.tags {
    display: flex;                    /* Flex布局 */
    flex-wrap: wrap;                  /* 允许换行 */
    gap: var(--space-2);              /* 元素间距8px */
}

/* 标签项 */
.tag-item {
    background: var(--bg-tertiary);   /* 背景色：三级背景 */
    color: var(--text-secondary);     /* 文字颜色：次要文字色 */
    padding: var(--space-1) var(--space-3); /* 内边距：上下4px 左右12px */
    border-radius: 8px;              /* 圆角8px：胶囊形状 */
    font-size: var(--font-xs);        /* 字号12px */
    font-weight: 500;                 /* 字重500 */
    transition: all 0.3s ease;        /* 过渡效果 */
    box-shadow: var(--shadow-sm);     /* 小阴影 */
}

/* 标签项悬浮 */
.tag-item:hover {
    background: linear-gradient(135deg, var(--primary-lighter), var(--primary-light)); /* 背景渐变：主色极浅到浅 */
    color: var(--primary-dark);       /* 文字颜色：主色加深 */
    box-shadow: var(--shadow-md);     /* 中等阴影 */
    transform: scale(1.05);           /* 放大1.05倍 */
}

/* 媒体查询：屏幕宽度小于1200px时 */
@media (max-width: 1200px) {
    .right-sidebar {
        flex: 0 0 250px; /* 减小右侧边栏宽度 */
    }
    
    .sidebar {
        flex: 0 0 230px; /* 减小左侧边栏宽度 */
    }
}

/* 媒体查询：屏幕宽度小于1000px时 */
@media (max-width: 1000px) {
    .right-sidebar {
        display: none; /* 隐藏右侧边栏 */
    }
    
    .sidebar {
        flex: 0 0 200px; /* 进一步减小左侧边栏宽度 */
    }
    
    .content {
        flex: 1; /* 内容区占满剩余空间 */
    }
}

/* 媒体查询：屏幕宽度小于768px时 */
@media (max-width: 768px) {
    .app-wrapper {
        padding: 0 1rem; /* 减小左右内边距 */
    }
    
    .sidebar {
        display: none; /* 隐藏左侧边栏 */
    }
    
    .content {
        flex: 1 1 100%; /* 内容区占满整个宽度 */
    }
    
    .main-layout {
        margin-top: 100px; /* 调整上边距，适配导航栏高度变化 */
    }
    
    /* 显示移动端菜单按钮 */
    .menu-toggle {
        display: block !important;
    }
    
    /* 导航栏调整 */
    .top-header {
        padding: 0.8rem 1rem;
    }
    
    .logo-area {
        flex: 0 0 auto;
        padding-left: var(--space-4);
    }
    
    .search-area {
        flex: 1 1 100%;
        max-width: none;
        order: 3;
    }
    
    .user-actions {
        order: 2;
    }
}

/* 媒体查询：屏幕宽度小于480px时 */
@media (max-width: 480px) {
    .app-wrapper {
        padding: 0 0.5rem;
    }
    
    .content {
        padding: var(--space-4); /* 减小内容区内边距 */
    }
    
    .logo-area h1 {
        font-size: var(--font-xl); /* 减小logo字体大小 */
    }
}

/* 返回首页链接 */
.back-home {
    display: inline-block;            /* 行内块：可设置边距 */
    margin: var(--space-2) 0 var(--space-6) 0; /* 外边距：上8px 左右0 下24px */
    color: var(--primary-color);      /* 文字颜色：主色调 */
    font-size: var(--font-sm);        /* 字号14px */
    font-weight: 500;                 /* 字重500 */
    text-decoration: none;            /* 无下划线 */
    transition: all 0.3s ease;        /* 过渡效果 */
    padding: var(--space-2) var(--space-4); /* 内边距：上下8px 左右16px */
    border-radius: 4px;               /* 圆角4px */
    position: relative;               /* 相对定位：用于伪元素 */
    overflow: hidden;                 /* 隐藏溢出：伪元素效果 */
}

/* 返回首页链接背景动画 - 伪元素 */
.back-home::before {
    content: '';                      /* 空内容 */
    position: absolute;               /* 绝对定位 */
    top: 0;                           /* 上对齐 */
    left: -100%;                      /* 初始位置：左侧100% */
    width: 100%;                      /* 宽度100% */
    height: 100%;                     /* 高度100% */
    background: var(--primary-lighter); /* 背景色：主色极浅 */
    transition: left 0.3s ease;       /* 左位置过渡 */
    z-index: -1;                      /* 层级-1 */
}

/* 返回首页链接悬浮时伪元素动画 */
.back-home:hover::before {
    left: 0;                          /* 左位置0：显示背景 */
}

/* 返回首页链接悬浮状态 */
.back-home:hover {
    color: var(--primary-dark);       /* 文字颜色：主色加深 */
    text-decoration: none;            /* 无下划线 */
    transform: translateX(-3px);      /* 向左偏移3px */
    box-shadow: var(--shadow-sm);     /* 小阴影 */
}

/* 文章内容区 */
.article-content {
    background: linear-gradient(180deg, var(--bg-primary), var(--bg-secondary)); /* 背景渐变：从上到下白色到浅灰 */
    border-radius: 8px;              /* 圆角8px */
    padding: var(--space-8) var(--space-10); /* 内边距：上下32px 左右40px */
    box-shadow: var(--shadow-lg);     /* 大阴影 */
    word-break: break-all;            /* 强制换行：所有字符 */
    word-wrap: break-word;            /* 换行：长单词 */
    overflow-wrap: break-word;        /* 换行：溢出单词 */
    white-space: normal;              /* 正常换行 */
    line-height: var(--line-relaxed); /* 行高：宽松 */
    font-size: var(--font-base);      /* 字号16px */
    color: var(--text-primary);       /* 文字颜色：主要文字色（白色） */
    margin-bottom: var(--space-8);    /* 底部间距32px */
    border: 1px solid var(--border-light); /* 浅色边框 */
    transition: all 0.3s ease;        /* 过渡效果 */
}

/* 文章内容区悬浮效果 */
.article-content:hover {
    box-shadow: var(--shadow-xl);     /* 超大阴影 */
    transform: translateY(-2px);      /* 向上偏移2px */
}

/* 文章内所有元素最大宽度不超过容器 */
.article-content * {
    max-width: 100%;                  /* 最大宽度100% */
    box-sizing: border-box;           /* 盒模型包含边框和内边距 */
    color: var(--text-primary);       /* 文字颜色：主要文字色（白色） */
}

/* 文章内标题样式 */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    color: var(--text-primary);       /* 标题文字颜色：主要文字色（白色） */
    margin-top: var(--space-8);       /* 顶部间距32px */
    margin-bottom: var(--space-4);    /* 底部间距16px */
    font-weight: 600;                 /* 字重600：半粗体 */
}

/* 文章内链接样式 */
.article-content a {
    color: var(--primary-light);      /* 链接颜色：主色浅色 */
    text-decoration: none;            /* 无下划线 */
    transition: all 0.3s ease;        /* 过渡效果 */
}

.article-content a:hover {
    color: var(--primary-color);      /* 链接悬浮颜色：主色 */
    text-decoration: underline;       /* 悬浮时显示下划线 */
}

/* 文章内列表样式 */
.article-content ul,
.article-content ol {
    margin-left: var(--space-6);      /* 左侧间距24px */
    margin-bottom: var(--space-4);    /* 底部间距16px */
}

.article-content li {
    margin-bottom: var(--space-2);    /* 列表项底部间距8px */
}

/* 文章内图片样式 */
.article-content img {
    max-width: 100%;                  /* 最大宽度100% */
    height: auto;                     /* 高度自动：保持比例 */
    border-radius: 4px;               /* 圆角4px */
    box-shadow: var(--shadow-md);     /* 中等阴影 */
    display: block;                   /* 块级：居中对齐 */
    margin: var(--space-6) auto;      /* 外边距：上下24px 左右居中 */
    transition: all 0.3s ease;        /* 过渡效果 */
}

/* 文章图片悬浮效果 */
.article-content img:hover {
    transform: scale(1.02);           /* 放大1.02倍 */
    box-shadow: var(--shadow-lg);     /* 大阴影 */
}

/* 文章内代码块样式 */
.article-content pre {
    background: var(--bg-tertiary);   /* 背景色：三级背景 */
    padding: var(--space-6);          /* 内边距24px */
    border-radius: 4px;               /* 圆角4px */
    overflow-x: auto;                /* 水平滚动：代码溢出 */
    margin: var(--space-6) 0;         /* 外边距：上下24px 左右0 */
    white-space: pre-wrap;            /* 换行：保留空格 */
    word-break: break-all;            /* 强制换行 */
    border: 1px solid var(--border-light); /* 浅色边框 */
}

/* 文章元信息中的标签样式 */
.post-tags {
    margin-left: var(--space-4);
}

.post-tags .tag-link {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: var(--font-xs);
    font-weight: 500;
    margin-left: 4px;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.post-tags .tag-link:hover {
    background: linear-gradient(135deg, var(--primary-lighter), var(--primary-light));
    color: var(--primary-dark);
    box-shadow: var(--shadow-md);
    transform: scale(1.05);
}

/* 文章内行内代码样式 */
.article-content code {
    background: var(--bg-tertiary);   /* 背景色：三级背景 */
    padding: var(--space-1) var(--space-2); /* 内边距：上下4px 左右8px */
    border-radius: 4px;               /* 圆角4px */
    white-space: pre-wrap;            /* 换行：保留空格 */
    word-break: break-all;            /* 强制换行 */
    overflow-x: auto;                /* 水平滚动 */
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace; /* 等宽字体：代码专用 */
}

/* 文章元信息 */
.article-meta {
    margin: var(--space-5) 0;         /* 外边距：上下20px 左右0 */
    padding: var(--space-5);          /* 内边距20px */
    background: var(--bg-secondary);  /* 背景色：次要背景 */
    border-radius: 4px;               /* 圆角4px */
    color: var(--text-secondary);     /* 文字颜色：次要文字色 */
    font-size: var(--font-sm);        /* 字号14px */
    display: flex;                    /* Flex布局 */
    flex-wrap: wrap;                  /* 允许换行：适配小屏幕 */
    gap: var(--space-6);              /* 元素间距24px */
    border-left: 4px solid var(--primary-color); /* 左侧4px主色边框：强调 */
}

/* 文章元信息项 */
.article-meta span {
    display: flex;                    /* Flex布局 */
    align-items: center;              /* 垂直居中 */
    gap: var(--space-2);              /* 元素间距8px */
    transition: all 0.3s ease;        /* 过渡效果 */
    padding: var(--space-1) var(--space-2); /* 内边距：上下4px 左右8px */
    border-radius: 4px;               /* 圆角4px */
}

/* 元信息项悬浮状态 */
.article-meta span:hover {
    color: var(--primary-color);      /* 文字颜色：主色调 */
    background-color: var(--primary-lighter); /* 背景色：主色极浅 */
    transform: translateY(-1px);      /* 向上偏移1px */
}

/* 元信息项图标 */
.article-meta span i {
    color: var(--text-muted);         /* 图标颜色：弱化文字色 */
    transition: all 0.3s ease;        /* 过渡效果 */
}

/* 元信息项悬浮时图标颜色 */
.article-meta span:hover i {
    color: var(--primary-color);      /* 图标颜色：主色调 */
}

/* 加载中样式 */
.loading {
    text-align: center;               /* 文字居中 */
    color: var(--text-tertiary);      /* 文字颜色：三级文字色 */
    font-size: 1.1rem;                /* 字号1.1rem */
    padding: 3rem 0;                  /* 内边距：上下3rem 左右0 */
}

/* 加载中图标 */
.loading i {
    margin-right: 0.5rem;             /* 右外边距0.5rem */
    animation: fa-spin 1.5s linear infinite; /* 旋转动画：1.5秒，线性，无限循环 */
}

/* 公告栏 */
.notice-board {
    background-color: var(--bg-primary); /* 背景色：主要背景 */
    backdrop-filter: blur(2px);       /* 背景模糊2px：毛玻璃效果 */
    border-left: 4px solid var(--accent-color); /* 左侧4px强调色边框 */
    border-radius: 4px;               /* 圆角4px */
    padding: 0.8rem 1.5rem;           /* 内边距：上下0.8rem 左右1.5rem */
    margin-bottom: 2rem;              /* 底部间距2rem */
    display: flex;                    /* Flex布局 */
    align-items: center;              /* 垂直居中 */
    gap: 1rem;                        /* 元素间距1rem */
    flex-wrap: wrap;                  /* 允许换行 */
    box-shadow: var(--shadow-md);     /* 中等阴影 */
    font-size: 0.95rem;               /* 字号0.95rem */
    transition: all 0.3s ease;        /* 过渡效果 */
}

/* 公告栏悬浮效果 */
.notice-board:hover {
    box-shadow: var(--shadow-lg);     /* 大阴影 */
    transform: translateY(-1px);      /* 向上偏移1px */
}

/* 公告栏图标 */
.notice-board i.fa-bullhorn {
    color: var(--accent-color);       /* 图标颜色：强调色 */
    font-size: 1.4rem;                /* 图标大小1.4rem */
}

/* 公告栏链接 */
.notice-board a {
    font-weight: 500;                 /* 字重500 */
    transition: all 0.3s ease;        /* 过渡效果 */
}

/* 公告栏链接悬浮 */
.notice-board a:hover {
    color: var(--primary-dark);       /* 文字颜色：主色加深 */
    text-decoration: none;            /* 无下划线 */
}

/* 关闭公告按钮 */
.close-notice {
    margin-left: auto;                /* 自动左外边距：推到最右侧 */
    background: none;                 /* 无背景 */
    border: none;                     /* 无边框 */
    cursor: pointer;                  /* 鼠标指针：手型 */
    color: var(--text-muted);         /* 文字颜色：弱化文字色 */
    font-size: 1.2rem;                /* 字号1.2rem */
    transition: all 0.3s ease;        /* 过渡效果 */
    padding: 0.25rem;                 /* 内边距0.25rem：增大点击区域 */
    border-radius: 4px;               /* 圆角4px */
}

/* 关闭按钮悬浮 */
.close-notice:hover {
    color: var(--text-primary);       /* 文字颜色：主要文字色 */
    background-color: var(--bg-tertiary); /* 背景色：三级背景 */
}

/* 页面头部 */
.page-header {
    margin-bottom: 2rem;              /* 底部间距2rem */
    text-align: left;                 /* 文字左对齐 */
}

/* 页面标题 */
.page-header h2 {
    font-size: 2rem;                  /* 字号2rem */
    font-weight: 700;                 /* 字重700：粗体 */
    color: var(--text-primary);       /* 文字颜色：主要文字色 */
    margin-bottom: 0.5rem;            /* 底部间距0.5rem */
}

/* 页面副标题/描述 */
.page-header p {
    color: var(--text-secondary);     /* 文字颜色：次要文字色 */
    font-style: italic;               /* 斜体 */
    font-size: 1.1rem;                /* 字号1.1rem */
}

/* 文章列表 - 增大间距 */
.post-list {
    display: flex;                    /* Flex布局 */
    flex-direction: column;           /* 垂直排列 */
    gap: var(--space-8);              /* 核心修改：增大文章间间距32px */
}

/* 文章项 - 增加底部间距兜底 */
.post-item {
    background: linear-gradient(180deg, var(--bg-primary), var(--bg-secondary)); /* 背景渐变：从上到下白色到浅灰 */
    border-radius: 8px;              /* 圆角8px */
    padding: var(--space-8);          /* 内边距32px */
    box-shadow: var(--shadow-md);     /* 中等阴影 */
    transition: all 0.3s ease;        /* 过渡效果 */
    margin-bottom: var(--space-6);    /* 新增：兜底间距24px */
    border: 1px solid var(--border-light); /* 浅色边框 */
    position: relative;               /* 相对定位：用于伪元素 */
    overflow: hidden;                 /* 隐藏溢出：伪元素效果 */
}


/* 文章项悬浮时光流动画 */
.post-item:hover::before {
    left: 100%;                       /* 左位置100%：流光从左到右 */
}

/* 文章项悬浮效果 */
.post-item:hover {
    transform: translateY(-5px);      /* 向上偏移5px：悬浮效果 */
    box-shadow: var(--shadow-xl);     /* 超大阴影 */
    border-color: var(--primary-light); /* 边框颜色：主色浅 */
}

/* 文章标题 */
.post-title {
    font-size: var(--font-2xl);       /* 字号24px */
    font-weight: 600;                 /* 字重600 */
    margin-bottom: var(--space-3);    /* 底部间距12px */
    display: flex;                    /* Flex布局 */
    align-items: center;              /* 垂直居中 */
    gap: var(--space-2);              /* 元素间距8px */
    flex-wrap: wrap;                  /* 允许换行：适配小屏幕 */
}

/* 文章标题链接 */
.post-title a {
    color: var(--text-primary);       /* 文字颜色：主要文字色 */
    transition: all 0.3s ease;        /* 过渡效果 */
}

/* 文章标题链接悬浮 */
.post-title a:hover {
    color: var(--primary-color);      /* 文字颜色：主色调 */
    text-decoration: none;            /* 无下划线 */
}

/* 置顶标签 */
.sticky-label {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-light)); /* 背景渐变：强调色到浅 */
    color: white;                     /* 文字白色 */
    padding: var(--space-1) var(--space-3); /* 内边距：上下4px 左右12px */
    border-radius: 3px;              /* 圆角8px：胶囊形状 */
    font-size: var(--font-xs);        /* 字号12px */
    font-weight: 500;                 /* 字重500 */
    display: inline-flex;             /* 行内Flex：居中对齐 */
    align-items: center;              /* 垂直居中 */
    gap: var(--space-1);              /* 元素间距4px */
    white-space: nowrap;              /* 文字不换行 */
    margin-right: var(--space-2);     /* 右外边距8px */
    transition: all 0.3s ease;        /* 过渡效果 */
    box-shadow: var(--shadow-sm);     /* 小阴影 */
}

/* 置顶标签悬浮效果 */
.sticky-label:hover {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent-color)); /* 背景渐变：强调色深到标准 */
    transform: scale(1.05);           /* 放大1.05倍 */
    box-shadow: var(--shadow-md);     /* 中等阴影 */
}

/* 文章摘要 */
.post-excerpt {
    color: var(--text-secondary);     /* 文字颜色：次要文字色 */
    margin: var(--space-3) 0 var(--space-4); /* 外边距：上下12px 左右0 下16px */
    line-height: var(--line-normal);  /* 行高：标准 */
    font-size: var(--font-base);      /* 字号16px */
}

/* 文章元信息 */
.post-meta {
    display: flex;                    /* Flex布局 */
    gap: var(--space-8);              /* 元素间距32px */
    color: var(--text-tertiary);      /* 文字颜色：三级文字色 */
    font-size: var(--font-sm);        /* 字号14px */
    border-top: 1px solid var(--border-light); /* 顶部浅色边框：分隔 */
    padding-top: var(--space-4);      /* 上内边距16px */
    flex-wrap: wrap;                  /* 允许换行 */
}

/* 文章元信息项 */
.post-meta span {
    display: flex;                    /* Flex布局 */
    align-items: center;              /* 垂直居中 */
    gap: var(--space-1);              /* 元素间距4px */
    transition: all 0.3s ease;        /* 过渡效果 */
    padding: var(--space-1) var(--space-2); /* 内边距：上下4px 左右8px */
    border-radius: 4px;               /* 圆角4px */
}

/* 文章元信息项悬浮 */
.post-meta span:hover {
    color: var(--primary-color);      /* 文字颜色：主色调 */
    background-color: var(--primary-lighter); /* 背景色：主色极浅 */
}

/* 文章元信息项图标 */
.post-meta span i {
    color: var(--text-muted);         /* 图标颜色：弱化文字色 */
    transition: all 0.3s ease;        /* 过渡效果 */
}

/* 元信息项悬浮时图标颜色 */
.post-meta span:hover i {
    color: var(--primary-color);      /* 图标颜色：主色调 */
}

/* 分页样式 */
.pagination {
    display: flex;                    /* Flex布局 */
    justify-content: center;          /* 水平居中 */
    gap: 0.5rem;                      /* 元素间距0.5rem */
    margin: 2rem 0;                   /* 外边距：上下2rem 左右0 */
}

/* 分页链接 */
.pagination a {
    padding: 0.5rem 1rem;             /* 内边距：上下0.5rem 左右1rem */
    border-radius: 4px;               /* 圆角4px */
    background: var(--bg-primary);    /* 背景色：主要背景 */
    color: var(--text-secondary);     /* 文字颜色：次要文字色 */
    text-decoration: none;            /* 无下划线 */
    transition: all 0.3s ease;        /* 过渡效果 */
    border: 1px solid var(--border-light); /* 浅色边框 */
}

/* 分页链接悬浮（非禁用/非激活） */
.pagination a:hover:not(.disabled):not(.active) {
    background: var(--primary-lighter); /* 背景色：主色极浅 */
    color: var(--primary-color);      /* 文字颜色：主色调 */
    border-color: var(--primary-light); /* 边框颜色：主色浅 */
}

/* 分页激活状态 */
.pagination a.active {
    background: var(--primary-color); /* 背景色：主色调 */
    color: white;                     /* 文字白色 */
    border-color: var(--primary-color); /* 边框颜色：主色调 */
}

/* 分页禁用状态 */
.pagination a.disabled {
    opacity: 0.5;                     /* 透明度0.5：视觉禁用 */
    cursor: not-allowed;              /* 鼠标指针：禁止 */
}

/* 页脚 */
.footer {
    text-align: center;               /* 文字居中 */
    padding: 2rem 0;                  /* 内边距：上下2rem 左右0 */
    color: var(--text-muted);         /* 文字颜色：弱化文字色 */
    font-size: 0.9rem;                /* 字号0.9rem */
    border-top: 1px solid var(--border-light); /* 顶部浅色边框 */
    margin-top: 2rem;                 /* 上外边距2rem */
}

/* 页脚段落 */
.footer p {
    margin: 0.5rem 0;                 /* 外边距：上下0.5rem 左右0 */
}

/* 页脚链接 */
.footer a {
    color: var(--text-muted);         /* 文字颜色：弱化文字色 */
    text-decoration: none;            /* 无下划线 */
    transition: color 0.3s ease;      /* 颜色过渡 */
}

/* 页脚链接悬浮 */
.footer a:hover {
    color: var(--primary-color);      /* 文字颜色：主色调 */
}

/* 页脚徽章 */
.footer-badge {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); /* 背景渐变：主色到浅 */
    color: white;                     /* 文字白色 */
    padding: 0.25rem 0.75rem;         /* 内边距：上下0.25rem 左右0.75rem */
    border-radius: 8px;              /* 圆角8px */
    font-weight: 500;                 /* 字重500 */
    margin-right: 0.5rem;             /* 右外边距0.5rem */
}

/* 返回顶部按钮 */
.back-to-top {
    position: fixed;                  /* 固定定位 */
    right: 30px;                      /* 距离右侧30px */
    bottom: 30px;                    /* 距离底部30px */
    z-index: 99;                      /* 层级99 */
    width: 50px;                      /* 宽度50px */
    height: 50px;                     /* 高度50px */
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); /* 背景渐变：主色到主色加深 */
    border-radius: 50%;               /* 圆形 */
    cursor: pointer;                  /* 鼠标指针：手型 */
    transition: all 0.3s ease;       /* 过渡效果 */
    opacity: 0;                       /* 初始透明度0 */
    visibility: hidden;               /* 初始隐藏 */
    box-shadow: var(--shadow-lg);     /* 大阴影 */
    display: flex;                    /* Flex布局 */
    align-items: center;              /* 垂直居中 */
    justify-content: center;          /* 水平居中 */
}

/* 返回顶部按钮图标 */
.back-to-top i {
    color: white;                    /* 图标颜色：白色 */
    font-size: 1.2rem;              /* 图标大小 */
    transition: all 0.3s ease;       /* 过渡效果 */
}

/* 返回顶部按钮显示状态 */
.back-to-top.show {
    opacity: 1;                       /* 显示时透明度1 */
    visibility: visible;              /* 显示时可见 */
    transform: translateY(0);        /* 无偏移 */
}

/* 返回顶部按钮隐藏状态 */
.back-to-top.hide {
    opacity: 0;                       /* 隐藏时透明度0 */
    visibility: hidden;               /* 隐藏时不可见 */
    transform: translateY(20px);     /* 向下偏移20px */
}

/* 返回顶部按钮悬浮 */
.back-to-top:hover {
    transform: translateY(-5px) scale(1.1); /* 悬停时向上偏移5px + 放大1.1倍 */
    box-shadow: var(--shadow-xl);     /* 超大阴影 */
}

/* 返回顶部按钮悬浮时图标 */
.back-to-top:hover i {
    transform: translateY(-2px);      /* 图标向上偏移2px */
}

/* 响应式：移动端调整 */
@media (max-width: 1000px) {
    .back-to-top {
        right: 20px;              /* 距离右侧20px */
        bottom: 20px;            /* 距离底部20px */
        width: 45px;              /* 宽度45px */
        height: 45px;             /* 高度45px */
    }
    
    .back-to-top i {
        font-size: 1rem;          /* 图标大小 */
    }
}

@media (max-width: 480px) {
    .back-to-top {
        right: 15px;              /* 距离右侧15px */
        bottom: 15px;            /* 距离底部15px */
        width: 40px;              /* 宽度40px */
        height: 40px;             /* 高度40px */
    }
    
    .back-to-top i {
        font-size: 0.9rem;         /* 图标大小 */
    }
}

/* 搜索提示 */
.search-tip {
    background: var(--primary-lighter); /* 背景色：主色极浅 */
    border-left: 4px solid var(--primary-color); /* 左侧4px主色边框 */
    padding: 1rem 1.5rem;             /* 内边距：上下1rem 左右1.5rem */
    margin-bottom: 1.5rem;            /* 底部间距1.5rem */
    border-radius: 0 8px 8px 0;       /* 右侧圆角8px */
    color: var(--text-secondary);     /* 文字颜色：次要文字色 */
}

/* 搜索提示强调文字 */
.search-tip strong {
    color: var(--primary-color);      /* 文字颜色：主色调 */
}

/* 无文章提示 */
.no-articles {
    text-align: center;               /* 文字居中 */
    padding: 3rem 1rem;               /* 内边距：上下3rem 左右1rem */
    color: var(--text-muted);         /* 文字颜色：弱化文字色 */
}

/* 无文章提示图标 */
.no-articles i {
    font-size: 3rem;                  /* 图标大小3rem */
    margin-bottom: 1rem;              /* 底部间距1rem */
    color: var(--border-medium);      /* 图标颜色：中等边框色 */
}

/* 响应式设计 - 平板设备（最大宽度1024px） */
@media (max-width: 1024px) {
    .sidebar {
        width: 220px;                 /* 侧边栏宽度220px：缩小 */
    }
    .main-layout {
        padding-left: 0;              /* 清除左内边距 */
    }
    
    .logo-area {
        flex: 0 0 auto;               /* Flex：自动宽度 */
    }
}

/* 响应式设计 - 移动设备（最大宽度768px） */
@media (max-width: 768px) {
    .menu-toggle {
        display: block !important;    /* 显示菜单切换按钮 */
    }
    
    .main-layout {
        flex-direction: column;       /* Flex垂直排列：侧边栏在上，内容在下 */
        padding-left: 0;              /* 清除左内边距 */
    }
    
    .sidebar {
        position: fixed;              /* 固定定位：侧边栏悬浮 */
        top: 80px;                    /* 距离顶部80px */
        left: 0;                      /* 左对齐 */
        width: 260px;                 /* 宽度260px */
        height: calc(100vh - 80px);   /* 高度：视口高度-导航栏高度 */
        max-height: calc(100vh - 80px); /* 最大高度同上 */
        overflow-y: auto;            /* 垂直滚动 */
        z-index: 95;                  /* 层级95：低于导航栏 */
        transform: translateX(-100%); /* 初始位置：左侧隐藏 */
        transition: transform 0.3s ease; /* 平移过渡 */
        border-right: 1px solid var(--border-light); /* 右侧浅色边框 */
        border-bottom: none;          /* 无底部边框 */
    }
    
    /* 移动端侧边栏激活状态 */
    .sidebar.active {
        transform: translateX(0);     /* 平移到可视区域 */
    }
    
    .content {
        height: calc(100vh - 80px);   /* 高度：视口高度-导航栏高度 */
        min-height: auto;             /* 最小高度自动 */
    }
    
    .top-header {
        padding: 0.8rem 1rem;         /* 内边距减小：上下0.8rem 左右1rem */
    }
    
    .search-area {
        flex: 1 1 100%;               /* Flex：占满100%宽度 */
        max-width: none;              /* 取消最大宽度限制 */
    }
}

/* 动画定义 - 旋转动画（用于加载中图标） */
@keyframes fa-spin {
    0% {
        transform: rotate(0deg);      /* 初始旋转0度 */
    }
    100% {
        transform: rotate(360deg);    /* 最终旋转360度 */
    }
}

/* 选中分类高亮 */
.active-cate {
    background: var(--primary-lighter) !important; /* 背景色：主色极浅（强制覆盖） */
    color: var(--primary-color) !important;        /* 文字颜色：*/
}