/* 全局样式重置 */
/* 目的：消除不同浏览器对HTML元素的默认样式（如margin, padding）差异，确保页面在各种浏览器下有一致的基础外观 */
/* 作用于所有元素 (*) */
* {
margin: 0;
/* 移除所有元素的外边距 */
padding: 0;
/* 移除所有元素的内边距 */
box-sizing: border-box;
/* 改变盒模型：元素的width和height包含border和padding，便于布局计算 */
}
/* CSS 变量定义 (Custom Properties) */
/* 目的：创建可重用的值，方便进行主题切换（如亮色/暗色模式）和统一管理颜色、阴影、圆角等设计属性 */
/* :root 伪类选择器代表文档的根元素（通常是 ），在这里定义的变量可在整个文档中使用 */
:root {
--primary: #4361ee;
/* 主色调，通常用于主要按钮、链接、高亮区域 */
--secondary: #3f37c9;
/* 次要色调，用于次要按钮或作为主色调的补充 */
--accent: #4cc9f0;
/* 强调色，用于需要突出显示的元素 */
--light: #f8f9fa;
/* 浅色，常用于背景或浅色文本 */
--dark: #212529;
/* 深色，常用于深色文本或深色背景 */
--success: #4CAF50;
/* 成功/正确状态的颜色 */
--warning: #ff9800;
/* 警告/注意状态的颜色 */
--danger: #f44336;
/* 危险/错误状态的颜色 */
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
/* 预定义的阴影效果，增加元素层次感 */
--border-radius: 8px;
/* 预定义的边框圆角大小，用于创建圆角卡片、按钮等 */
--transition: all 0.3s ease;
/* 预定义的过渡动画，使属性变化更平滑 */
--text-light: #f8f9fa;
/* 浅色文本颜色 */
--text-dark: #212529;
/* 深色文本颜色 */
--bg: #f5f7fa;
/* 页面默认背景色 */
--card-bg: #ffffff;
/* 卡片（Card）组件的背景色 */
--header-bg: #4361ee;
/* 页头（Header）的背景色 */
--sidebar-bg: #f0f2f5;
/* 侧边栏（Sidebar）的背景色 */
}
/* 暗色主题变量覆盖 */
/* 目的：当 body 或根元素被添加 'dark-theme' 类时，覆盖 :root 中定义的某些变量值，实现暗色主题 */
/* 通常通过JavaScript动态切换此class来实现主题切换 */
.dark-theme {
--bg: #1a1a2e;
/* 暗色背景 */
--card-bg: #16213e;
/* 暗色卡片背景 */
--text-dark: #f0f0f0;
/* 暗色主题下使用浅色文本 */
--header-bg: #0f3460;
/* 暗色页头背景 */
--sidebar-bg: #1a1a2e;
/* 暗色侧边栏背景 */
}
/* 页面基础布局样式 */
/* 目的：使用 CSS Grid 布局模型构建整个页面的响应式结构 */
/* 采用网格布局，定义了明确的区域划分 */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
/* 定义字体栈 */
line-height: 1.6;
/* 定义行高，改善文本可读性 */
color: var(--text-dark);
/* 设置默认文本颜色，使用CSS变量 */
background-color: var(--bg);
/* 设置页面背景色，使用CSS变量 */
min-height: 100vh;
/* 最小高度为视口高度的100%，确保内容少时也能撑满屏幕 */
display: grid;
/* 启用 CSS Grid 布局 */
/* 定义网格的列：第一列固定280px（通常用于侧边栏），第二列占据剩余所有空间(1fr) */
grid-template-columns: 280px 1fr;
/* 定义网格的行：第一行固定70px（页头），第二行占据剩余空间(1fr)（主要内容区），第三行固定50px（页脚） */
grid-template-rows: 70px 1fr 50px;
/* 定义网格区域的名称和布局：
"header header" -> 页头跨越两列
"sidebar main" -> 第一列是侧边栏，第二列是主内容区
"footer footer" -> 页脚跨越两列
这些名称（header, sidebar, main, footer）将被 grid-area 属性引用 */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
/* 为 body 元素本身应用过渡效果，当切换主题（如添加/移除 dark-theme class）时，颜色等属性会平滑变化 */
transition: var(--transition);
}
/* 页头 (Header) 样式 */
/* 使用 grid-area: header; 将此元素放置在由 grid-template-areas 定义的 'header' 区域 */
header {
grid-area: header;
/* 将此元素放置在名为 'header' 的网格区域内 */
background: var(--header-bg);
/* 背景色使用CSS变量 */
color: var(--text-light);
/* 文本颜色使用CSS变量 */
padding: 0 2rem;
/* 左右内边距为2rem，上下为0 */
display: flex;
/* 使用 Flexbox 布局来排列页头内部元素 */
justify-content: space-between;
/* 子元素在主轴（水平）上分散对齐，第一个靠左，最后一个靠右 */
align-items: center;
/* 子元素在交叉轴（垂直）上居中对齐 */
box-shadow: var(--shadow);
/* 添加预定义的阴影效果 */
z-index: 100;
/* 设置较高的堆叠顺序，确保页头在其他内容之上（尤其在滚动时） */
}
/* logo 样式 */
/* 专门针对页头内的logo元素（通常是一个类名为logo的元素） */
.logo {
font-size: 1.8rem;
/* 设置logo文字大小 */
font-weight: bold;
/* 设置logo文字加粗 */
display: flex;
/* 使用 Flexbox 布局，方便图标和文字并排 */
align-items: center;
/* 内部元素（如图标和文字）垂直居中 */
gap: 10px;
/* 定义logo内部子元素之间的间距为10px */
/* 例如，如果logo包含一个图标和一个文字，这个gap会让它们之间有10px的空隙 */
}
/* 主题切换按钮样式 */
/* 定义一个用于切换亮色/暗色主题的按钮的外观 */
.theme-toggle {
background: var(--accent);
/* 背景色使用CSS变量 --accent (强调色) */
color: var(--text-dark);
/* 文本颜色使用CSS变量 --text-dark (深色文本) */
border: none;
/* 移除默认边框 */
padding: 8px 15px;
/* 设置上下8px，左右15px的内边距 */
border-radius: 20px;
/* 设置20px的圆角，使按钮呈胶囊或圆形 */
cursor: pointer;
/* 鼠标悬停时显示为手型光标，表示可点击 */
font-weight: 500;
/* 字体粗细设置为中等偏粗 */
display: flex;
/* 使用Flexbox布局，便于内部元素（如图标和文字）对齐 */
align-items: center;
/* 内部元素在交叉轴（垂直方向）上居中对齐 */
gap: 8px;
/* 内部子元素之间保持8px的间距 */
transition: var(--transition);
/* 应用预设的过渡效果，使背景色等属性变化更平滑 */
}
/* 主题切换按钮悬停状态 */
/* 当鼠标悬停在按钮上时的样式 */
.theme-toggle:hover {
background: #3fb8da;
/* 背景色变为一个特定的蓝色（比--accent稍深），提供视觉反馈 */
/* 注意：这里没有使用变量，而是固定值，可能为了提供更具体的悬停效果 */
}
/* 侧边栏样式 */
/* 定义页面左侧边栏（通常用于导航）的整体样式 */
aside {
grid-area: sidebar;
/* 将此元素放置在CSS Grid布局中名为'sidebar'的区域 */
background: var(--sidebar-bg);
/* 背景色使用CSS变量 --sidebar-bg */
padding: 20px;
/* 设置20px的内边距 */
overflow-y: auto;
/* 当内容超出容器高度时，允许垂直滚动（出现滚动条） */
border-right: 1px solid rgba(0, 0, 0, 0.1);
/* 右侧添加1px宽的浅色（透明度10%）实线边框，作为与主内容区的分隔 */
}
/* 侧边栏内的一个分组区域 */
/* 用于将侧边栏内容分组，例如“导航”、“工具”等 */
.sidebar-section {
margin-bottom: 25px;
/* 每个分组下方留出25px的外边距，增加分组间的空间 */
}
/* 侧边栏分组标题样式 */
.sidebar-section h3 {
color: var(--primary);
/* 标题文字颜色使用主色调 --primary */
margin-bottom: 15px;
/* 标题下方留出15px外边距 */
padding-bottom: 8px;
/* 标题下方填充8px */
border-bottom: 2px solid var(--accent);
/* 在标题下方添加2px宽的强调色实线，增强视觉层次 */
}
/* 侧边栏链接列表样式 */
/* 定义导航链接列表的通用样式 */
.sidebar-links {
list-style: none;
/* 移除列表项前的默认符号（如圆点） */
}
/* 侧边栏列表项样式 */
.sidebar-links li {
margin-bottom: 8px;
/* 每个列表项下方留出8px外边距 */
}
/* 侧边栏链接样式 */
.sidebar-links a {
text-decoration: none;
/* 移除链接的下划线 */
color: var(--text-dark);
/* 链接文字颜色使用深色文本 --text-dark */
display: block;
/* 使链接显示为块级元素，占据整行宽度，增加可点击区域 */
padding: 8px 12px;
/* 设置上下8px，左右12px的内边距 */
border-radius: var(--border-radius);
/* 应用预设的圆角 --border-radius */
transition: var(--transition);
/* 应用过渡效果，使悬停时的变化更平滑 */
}
/* 侧边栏链接悬停状态 */
.sidebar-links a:hover {
background: var(--primary);
/* 悬停时，背景色变为主色调 --primary */
color: white;
/* 悬停时，文字颜色变为白色，提高对比度 */
}
/* 侧边栏链接中的图标样式 */
/* 假设链接中包含使用图标字体（如Font Awesome）的 标签 */
.sidebar-links a i {
width: 25px;
/* 为图标设置固定的25px宽度 */
text-align: center;
/* 确保图标在设定的宽度内水平居中 */
/* 这使得所有图标对齐整齐，改善视觉效果 */
}
/* 主内容区样式 */
/* 定义页面中央主要区域的样式 */
main {
grid-area: main;
/* 将此元素放置在CSS Grid布局中名为'main'的区域 */
padding: 2rem;
/* 设置2rem的内边距 */
overflow-y: auto;
/* 当内容超出容器高度时，允许垂直滚动（出现滚动条） */
}
/* 内容卡片样式 */
/* 定义页面中用于包裹独立内容块（如表单、信息展示区）的卡片容器样式 */
.section-card {
background: var(--card-bg);
/* 背景色使用卡片背景色 --card-bg */
border-radius: var(--border-radius);
/* 应用预设的圆角 --border-radius */
box-shadow: var(--shadow);
/* 添加预设的阴影效果 --shadow，增加立体感和层次 */
padding: 1.8rem;
/* 设置1.8rem的内边距 */
margin-bottom: 2rem;
/* 卡片下方留出2rem的外边距，使卡片之间有足够间隔 */
transition: var(--transition);
/* 应用过渡效果，例如在主题切换时颜色变化更平滑 */
}
/* 卡片内一级标题样式 */
.section-card h2 {
color: var(--primary);
/* 标题文字颜色使用主色调 --primary */
margin-bottom: 1.5rem;
/* 标题下方留出1.5rem外边距 */
padding-bottom: 0.8rem;
/* 标题下方填充0.8rem */
border-bottom: 2px solid var(--accent);
/* 在标题下方添加2px宽的强调色实线 */
display: flex;
/* 使用Flexbox布局 */
align-items: center;
/* 内部元素（如图标和文字）在交叉轴（垂直方向）上居中对齐 */
gap: 10px;
/* 内部子元素（如图标和文字）之间保持10px的间距 */
}
/* 卡片内二级标题样式 */
.section-card h3 {
color: var(--secondary);
/* 标题文字颜色使用次要色调 --secondary */
margin: 1.2rem 0 0.8rem;
/* 设置上外边距1.2rem，左右外边距0，下外边距0.8rem */
}
/* 表格样式 */
/* 定义表格的整体外观和布局 */
table {
width: 100%;
/* 表格宽度占满其父容器 */
border-collapse: collapse;
/* 合并表格边框，使相邻单元格的边框合并为一条线 */
margin: 1.2rem 0;
/* 上下外边距为1.2rem，左右为0 */
background: var(--card-bg);
/* 背景色使用卡片背景色变量 */
box-shadow: var(--shadow);
/* 添加预设的阴影效果，增加立体感 */
border-radius: var(--border-radius);
/* 设置圆角，使表格边缘更柔和 */
overflow: hidden;
/* 隐藏溢出的内容，确保圆角和阴影效果在边框内显示 */
}
/* 表格表头和表格数据单元格的通用样式 */
table th,
table td {
padding: 0.9rem;
/* 单元格内边距为0.9rem */
text-align: left;
/* 文本左对齐 */
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
/* 每个单元格下方添加一条浅色（透明度10%）细线分隔 */
}
/* 表格表头样式 */
table th {
background-color: var(--primary);
/* 表头背景色使用主色调 */
color: white;
/* 表头文字颜色为白色，提高对比度 */
}
/* 表格行悬停状态样式 */
table tr:hover {
background-color: rgba(0, 0, 0, 0.03);
/* 当鼠标悬停在行上时，背景色变为非常浅的灰色（透明度3%） */
}
/* 表单样式 */
/* 表单控件分组容器，用于管理标签和输入框的间距 */
.form-group {
margin-bottom: 1.2rem;
/* 每个表单组下方留出1.2rem的外边距 */
}
/* 表单标签样式 */
label {
display: block;
/* 显示为块级元素，独占一行 */
margin-bottom: 0.5rem;
/* 标签下方留出0.5rem的外边距 */
font-weight: 500;
/* 字体加粗 */
}
/* 输入框、选择框、文本域的通用样式 */
input,
select,
textarea {
width: 100%;
/* 宽度占满其父容器 */
padding: 0.8rem;
/* 内边距为0.8rem */
border: 1px solid #ddd;
/* 1px宽的浅灰色边框 */
border-radius: var(--border-radius);
/* 应用预设的圆角 */
font-size: 1rem;
/* 字体大小 */
background: var(--card-bg);
/* 背景色使用卡片背景色 */
color: var(--text-dark);
/* 文字颜色使用深色文本变量 */
transition: var(--transition);
/* 应用过渡效果，使获得焦点时的变化更平滑 */
}
/* 输入框、选择框、文本域获得焦点时的样式 */
input:focus,
select:focus,
textarea:focus {
border-color: var(--accent);
/* 边框颜色变为强调色 */
outline: none;
/* 移除浏览器默认的轮廓线 */
box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.3);
/* 在边框外添加一层半透明的蓝色（--accent色）光晕（3px宽） */
}
/* 按钮通用样式 */
button,
.btn {
background: var(--primary);
/* 背景色使用主色调 */
color: white;
/* 文字颜色为白色 */
border: none;
/* 移除默认边框 */
padding: 0.8rem 1.5rem;
/* 上下内边距0.8rem，左右1.5rem */
border-radius: var(--border-radius);
/* 应用预设的圆角 */
cursor: pointer;
/* 鼠标悬停时显示为手型光标 */
font-size: 1rem;
/* 字体大小 */
font-weight: 500;
/* 字体加粗 */
transition: var(--transition);
/* 应用过渡效果 */
display: inline-flex;
/* 显示为行内Flexbox容器，便于图标和文字对齐 */
align-items: center;
/* 内部元素（如图标）垂直居中对齐 */
gap: 8px;
/* 内部子元素（如图标和文字）之间保持8px间距 */
}
/* 按钮悬停状态样式 */
button:hover,
.btn:hover {
background: var(--secondary);
/* 悬停时背景色变为次要色调 */
transform: translateY(-2px);
/* 向上轻微移动2px，模拟“按下”效果，增强交互感 */
}
/* 特定功能按钮样式 */
.btn-success {
/* 成功/确认按钮 */
background: var(--success);
}
.btn-warning {
/* 警告/注意按钮 */
background: var(--warning);
}
.btn-danger {
/* 危险/删除按钮 */
background: var(--danger);
}
/* 列表样式 */
/* 无序列表和有序列表的通用样式 */
ul,
ol {
margin-left: 1.8rem;
/* 左侧外边距1.8rem，形成缩进 */
margin-bottom: 1.2rem;
/* 下方外边距1.2rem */
}
/* 列表项样式 */
li {
margin-bottom: 0.5rem;
/* 每个列表项下方留出0.5rem外边距 */
}
/* 页脚样式 */
footer {
grid-area: footer;
/* 将此元素放置在CSS Grid布局中名为'footer'的区域 */
background: var(--dark);
/* 背景色使用深色变量 */
color: var(--text-light);
/* 文字颜色使用浅色文本变量 */
text-align: center;
/* 文本居中对齐 */
padding: 1rem;
/* 内边距1rem */
display: flex;
/* 使用Flexbox布局 */
justify-content: center;
/* 内容在主轴（水平）上居中对齐 */
align-items: center;
/* 内容在交叉轴（垂直）上居中对齐 */
}
/* 实用工具类 (Utility Classes) */
/* 提供快速布局和样式的辅助类 */
.flex {
display: flex;
/* 快速应用Flexbox布局 */
gap: 1rem;
/* 子元素间默认间距1rem */
flex-wrap: wrap;
/* 允许子元素换行 */
}
.grid {
display: grid;
/* 快速应用Grid布局 */
/* 创建一个响应式网格：自动填充列，每列最小250px，最大1fr（均分剩余空间） */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
/* 网格项之间的间距1.5rem */
}
.text-center {
text-align: center;
/* 文本居中对齐 */
}
.mt-2 {
margin-top: 2rem;
/* 上外边距2rem */
}
.mb-2 {
margin-bottom: 2rem;
/* 下外边距2rem */
}
.p-3 {
padding: 1.5rem;
/* 内边距1.5rem */
}
/* 示例框样式 - 用于突出显示示例内容 */
.example-box {
background: rgba(67, 97, 238, 0.1);
/* 非常浅的蓝色背景（透明度10%） */
border-left: 4px solid var(--primary);
/* 左侧添加4px宽的主色调实线，作为视觉引导 */
padding: 1.2rem;
/* 内边距1.2rem */
margin: 1.2rem 0;
/* 上下外边距1.2rem */
/* 设置圆角：左上角0度，其他三个角使用预设圆角，形成特殊视觉效果 */
border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
/* 代码块样式 - 用于展示代码片段 */
.code-block {
background: #2d2d2d;
/* 深灰色背景，模拟代码编辑器 */
color: #f8f8f2;
/* 浅色文字，提高可读性 */
padding: 1.2rem;
/* 内边距1.2rem */
border-radius: var(--border-radius);
/* 应用圆角 */
margin: 1.2rem 0;
/* 上下外边距1.2rem */
overflow: auto;
/* 内容溢出时允许滚动（特别是水平滚动） */
font-family: 'Courier New', monospace;
/* 使用等宽字体，适合代码显示 */
}
/* 标签示例样式 - 可能用于展示HTML标签或分类标签 */
.tag-example {
background: var(--light);
/* 背景色使用浅色变量 */
padding: 15px;
/* 内边距15px */
border-radius: var(--border-radius);
/* 应用圆角 */
margin: 15px 0;
/* 上下外边距15px */
}
/* 响应式设计：小屏幕下布局调整 */
/* 使用媒体查询，当屏幕宽度小于或等于 900px 时应用以下规则 */
@media (max-width: 900px) {
/* 调整整体页面布局 */
body {
/* 将网格布局的列数从多列（可能包含侧边栏）改为单列 */
grid-template-columns: 1fr;
/* 重新定义网格区域的排列顺序，使内容垂直堆叠 */
grid-template-areas:
"header"
/* 顶部导航栏 */
"main"
/* 主内容区域（现在占据整个宽度） */
"footer";
/* 页脚 */
/* 注意：'sidebar' 区域在此布局中被移除 */
}
/* 隐藏侧边栏 */
aside {
display: none;
/* 将侧边栏完全隐藏，不占用任何空间 */
}
/* 显示移动端菜单按钮 */
.mobile-menu-btn {
display: block;
/* 将原本可能隐藏的移动端菜单按钮显示出来 */
/* 这个按钮通常用于在小屏幕上点击以展开/收起侧边栏（如果实现的话） */
}
}
/* 进一步适配更小的屏幕（如手机竖屏） */
/* 当屏幕宽度小于或等于 600px 时应用以下规则 */
@media (max-width: 600px) {
/* 调整 Flex 布局容器的方向 */
.flex {
flex-direction: column;
/* 将 Flex 容器的主轴方向改为垂直（从上到下） */
/* 这使得原本水平排列的子元素在小屏幕上垂直堆叠，避免内容过窄或换行混乱 */
}
/* 调整 Grid 布局容器的列数 */
.grid {
/* 将网格布局强制变为单列 */
grid-template-columns: 1fr;
/* 无论之前定义的 minmax 如何，现在每行只显示一个网格项 */
/* 这确保了在非常窄的屏幕上，网格项能完整显示且易于点击 */
}
}