/*
 * CSS Custom Properties (Variables)
 * 定义全局CSS自定义属性（变量），用于统一管理主题颜色、尺寸、效果等
 * 所有变量以双横线（--）开头，便于在项目中统一使用和修改
 */
:root {
    /* 主题颜色 - 红色系 */
    --primary: #cb3931; /* 主红色 - 用于主要按钮、链接、高亮元素 */
    --primary-dark: #a52c25; /* 深红色 - 用于悬停状态、深色变体 */
    --primary-light: #e74c3c; /* 浅红色 - 用于次要状态、渐变起点 */
    --primary-very-light: #fdf0f0; /* 非常浅的红色 - 用于背景、提示区域 */

    /* 辅助颜色 */
    --secondary: #f39c12; /* 橙色 - 用于辅助按钮、警告信息 */
    --light: #f8f9fa; /* 浅灰色 - 用于浅色背景 */
    --dark: #2c3e50; /* 深灰色 - 用于文字、深色背景 */
    --darker: #2c3e50; /* 深灰色，用于页脚 - 比dark更暗 */
    --gray: #7f8c8d; /* 灰色 - 用于次要文字、装饰元素 */

    /* 特定用途颜色 */
    --tooltip-bg: #cb3931; /* 气泡提示背景色，使用主红色 */
    --code-bg: #fff5f5; /* 代码背景色 - 淡红色背景 */
    --code-border: #e74c3c; /* 代码边框色 - 红色边框 */
    --code-text: #2c3e50; /* 代码文字色 - 深灰色文字 */
    --interface-address-text: #2c3e50; /* 接口地址文字色 - 与代码文字色一致 */

    /* 滚动条颜色 */
    --scrollbar-thumb: #e39d9a; /* 滚动条滑块颜色 - 与主题相关的浅红色 */
    --scrollbar-track: transparent; /* 滚动条轨道颜色设为透明 */

    /* 尺寸和布局 */
    --border-radius: 8px; /* 圆角大小 - 用于按钮、卡片等元素 */

    /* 效果 */
    --shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 阴影效果 - 用于卡片、弹窗等 */
    --transition: all 0.3s ease; /* 过渡动画 - 用于悬停、变换等效果 */
}

/*
 * Global Reset and Base Styles
 * 全局重置和基础样式，确保在所有浏览器中有一致的基础表现
 * 重置默认边距、设置字体、定义页面基本结构
 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

body {
    /* 渐变背景，与红色主题相呼应 */
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    min-height: 100vh; /* 确保页面至少占满整个视窗高度 */
    display: flex;
    flex-direction: column; /* 垂直布局，header -> main -> footer */
    color: #333; /* 默认文字颜色 */
    line-height: 1.6; /* 使文字更易读 */
}

/*
 * Header and Navigation Styles
 * 页头和导航栏样式，包含品牌标识、导航链接和移动菜单按钮
 * 使用粘性定位确保导航栏在滚动时保持在页面顶部
 */
header {
    background: rgba(255, 255, 255, 0.95); /* 半透明白色背景，确保内容可见性 */
    box-shadow: var(--shadow); /* 底部阴影，增加层次感 */
    position: sticky; /* 粘性定位，滚动时固定在顶部 */
    top: 0;
    z-index: 1000; /* 确保导航栏始终显示在其他内容之上 */
}

.navbar { /* 主导航容器 */
    display: flex;
    justify-content: space-between; /* 两端对齐：logo在左，导航链接在右 */
    align-items: center; /* 垂直居中对齐 */
    padding: 1rem 5%; /* 左右使用百分比边距，适应不同屏幕尺寸 */
    max-width: 1600px; /* 最大宽度限制 */
    margin: 0 auto; /* 水平居中 */
}

.logo { /* 品牌标识 */
    display: flex;
    align-items: center;
    gap: 10px; /* 图标与文字间距 */
    font-size: 1.8rem; /* 字体大小 */
    font-weight: 700; /* 粗体 */
    color: var(--primary); /* 主题红色 */
    text-decoration: none; /* 去除下划线 */
}

.logo span { /* 品牌名称中的特定部分使用深灰色 */
    color: var(--dark);
}

.logo-image { /* 品牌图标 */
    height: 40px; /* 固定高度 */
    width: auto; /* 保持宽高比 */
}

.nav-links { /* 导航链接容器 */
    display: flex;
    gap: 2rem; /* 链接之间的间距 */
}

.nav-links a { /* 导航链接样式 */
    text-decoration: none; /* 去除默认下划线 */
    color: var(--dark); /* 默认文字颜色 */
    font-weight: 500; /* 中等粗细 */
    transition: var(--transition); /* 平滑过渡效果 */
    position: relative; /* 为下划线动画定位 */
}

.nav-links a:hover { /* 鼠标悬停效果 */
    color: var(--primary); /* 变为主题红色 */
}

.nav-links a::after { /* 下划线动画效果 */
    content: '';
    position: absolute;
    bottom: -5px; /* 位于链接文字下方 */
    left: 0;
    width: 0; /* 初始宽度为0 */
    height: 2px; /* 线条高度 */
    background: var(--primary); /* 主题红色 */
    transition: var(--transition); /* 宽度变化的过渡效果 */
}

.nav-links a:hover::after { /* 悬停时的下划线效果 */
    width: 100%; /* 展开到完整宽度 */
}

.mobile-menu-btn { /* 移动端菜单按钮（桌面端隐藏） */
    display: none; /* 桌面端不显示 */
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--dark);
}

/*
 * Main Content Area Styles
 * 主要内容区域样式，包括英雄区域、标题和副标题
 * 使用flex布局确保内容居中且具有响应性
 */
main {
    flex: 1; /* 占据剩余空间 */
    width: 100%;
    max-width: 1600px; /* 最大宽度限制 */
    margin: 0 auto; /* 水平居中 */
    padding: 2rem 3%; /* 内边距，使用百分比适应不同屏幕 */
}

.hero { /* 英雄区域，通常包含主要标题和介绍 */
    display: flex;
    align-items: center; /* 垂直居中 */
    gap: 3rem; /* 左右两部分之间的间距 */
    margin: 3rem 0; /* 上下边距 */
}

.hero-content { /* 英雄区域的文本内容部分 */
    flex: 1; /* 占据可用空间 */
}

.hero-image { /* 英雄区域的图片部分 */
    flex: 1; /* 与内容部分等宽 */
    border-radius: var(--border-radius); /* 圆角 */
    overflow: hidden; /* 隐藏超出边界的图像部分 */
    box-shadow: var(--shadow); /* 阴影效果 */
    height: 350px; /* 固定高度 */
    position: relative;
    background: #f0f0f0; /* 占位背景色 */
}

.hero-image img { /* 英雄区域的图像样式 */
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持宽高比同时覆盖整个容器 */
    display: block; /* 移除底部空白 */
}

h1 { /* 主标题样式 */
    color: var(--dark); /* 深灰色文字 */
    font-size: 2.8rem; /* 大字体 */
    margin-bottom: 1.5rem; /* 下边距 */
    line-height: 1.2; /* 行高，使标题紧凑 */
}

.subtitle { /* 副标题样式 */
    color: var(--gray); /* 灰色文字 */
    font-size: 1.2rem; /* 中等字体 */
    margin-bottom: 2rem; /* 下边距 */
}

/*
 * Button Styles
 * 按钮样式定义，包括主要按钮和轮廓按钮
 * 使用渐变背景、阴影和悬停效果增强交互体验
 */
.btn { /* 主要按钮样式 */
    display: inline-flex; /* 行内弹性布局，支持图标对齐 */
    align-items: center; /* 垂直居中对齐内容 */
    padding: 1rem 2rem; /* 内边距，提供点击区域 */
    background: linear-gradient(45deg, var(--primary), var(--primary-dark)); /* 红色渐变背景 */
    color: white; /* 白色文字 */
    text-decoration: none; /* 去除链接下划线 */
    border-radius: 50px; /* 椭圆形圆角 */
    font-size: 1.1rem; /* 字体大小 */
    font-weight: 600; /* 半粗体 */
    transition: var(--transition); /* 过渡动画 */
    box-shadow: 0 4px 15px rgba(203, 57, 49, 0.3); /* 阴影效果 */
    border: none; /* 去除默认边框 */
    cursor: pointer; /* 鼠标指针 */
}

.btn:hover { /* 按钮悬停效果 */
    transform: translateY(-3px); /* 向上移动3px */
    box-shadow: 0 6px 20px rgba(203, 57, 49, 0.4); /* 更强的阴影 */
    background: linear-gradient(45deg, var(--primary-dark), var(--primary)); /* 反向渐变 */
}

.btn i { /* 按钮中的图标样式 */
    margin-right: 0.8rem; /* 图标与文字的间距 */
}

.btn-outline { /* 轮廓按钮样式，背景透明，红色边框 */
    background: transparent; /* 透明背景 */
    border: 2px solid var(--primary); /* 红色边框 */
    color: var(--primary); /* 红色文字 */
    margin-left: 1rem; /* 左边距，与主按钮分离 */
}

.btn-outline:hover { /* 轮廓按钮悬停效果 */
    background: var(--primary); /* 背景变红色 */
    color: white; /* 文字变白色 */
}

/*
 * Features Section Styles
 * 功能特点部分样式，包含标题、功能卡片和图标
 * 使用CSS Grid布局实现响应式功能展示
 */
.section { /* 通用章节样式 */
    margin: 5rem 0; /* 上下边距，与其他内容保持距离 */
}

.section-title { /* 章节标题容器 */
    text-align: center; /* 文字居中 */
    margin-bottom: 3rem; /* 下边距 */
    color: var(--dark); /* 深灰色文字 */
}

.section-title h2 { /* 章节主标题 */
    font-size: 2.2rem; /* 大字体 */
    margin-bottom: 1rem; /* 下边距 */
    position: relative; /* 为装饰线定位 */
    display: inline-block; /* 限制宽度为内容宽度 */
}

.section-title h2::after { /* 章节标题下方的装饰线 */
    content: '';
    position: absolute;
    bottom: -10px; /* 位于标题下方 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 精确居中 */
    width: 80px; /* 线条宽度 */
    height: 3px; /* 线条高度 */
    background: var(--primary); /* 主题红色 */
}

.section-title p { /* 章节描述文字 */
    color: var(--gray); /* 灰色文字 */
    max-width: 700px; /* 最大宽度限制 */
    margin: 2rem auto 0; /* 水平居中，顶部间距 */
}

.features { /* 功能特点网格容器 */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 响应式网格，最小300px */
    gap: 2rem; /* 网格项之间的间距 */
}

.feature-card { /* 功能卡片样式 */
    background: white; /* 白色背景 */
    padding: 2rem; /* 内边距 */
    border-radius: var(--border-radius); /* 圆角 */
    box-shadow: var(--shadow); /* 阴影 */
    transition: var(--transition); /* 过渡动画 */
    text-align: center; /* 内容居中 */
    border-top: 4px solid var(--primary); /* 顶部红色装饰条 */
    overflow: hidden; /* 隐藏溢出内容 */
    cursor: pointer; /* 指针样式，表示可交互 */
}

.feature-card:hover { /* 功能卡片悬停效果 */
    transform: translateY(-10px); /* 向上移动 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* 更强的阴影 */
}

.feature-icon { /* 功能图标样式 */
    width: 70px; /* 固定尺寸 */
    height: 70px;
    background: linear-gradient(45deg, var(--primary), var(--primary-light)); /* 红色渐变背景 */
    border-radius: 50%; /* 圆形 */
    display: flex;
    align-items: center;
    justify-content: center; /* 图标居中 */
    margin: 0 auto 1.5rem; /* 居中，下边距 */
    color: white; /* 白色图标 */
    font-size: 1.8rem; /* 大图标 */
}

.feature-card h3 { /* 功能标题 */
    margin-bottom: 1rem; /* 下边距 */
    color: var(--dark); /* 深灰色 */
}

/*
 * Solutions Section Styles
 * 解决方案部分样式，展示各种解决方案卡片
 * 与功能特点类似，但有独特的视觉标识
 */
.solutions { /* 解决方案网格容器 */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 响应式网格布局 */
    gap: 2rem; /* 卡片之间的间距 */
    margin-top: 3rem; /* 与上方内容的间距 */
}

.solution-card { /* 解决方案卡片样式 */
    background: white; /* 白色背景 */
    padding: 2rem; /* 内边距 */
    border-radius: var(--border-radius); /* 圆角 */
    box-shadow: var(--shadow); /* 阴影 */
    transition: var(--transition); /* 过渡动画 */
    position: relative; /* 为装饰条定位 */
    overflow: hidden; /* 隐藏溢出内容 */
}

.solution-card::before { /* 左侧红色装饰条 */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px; /* 装饰条宽度 */
    height: 100%; /* 占满卡片高度 */
    background: var(--primary); /* 主题红色 */
}

.solution-card:hover { /* 解决方案卡片悬停效果 */
    transform: translateY(-5px); /* 向上移动 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* 更强的阴影 */
}

.solution-card h3 { /* 解决方案标题 */
    color: var(--primary); /* 主题红色文字 */
    margin-bottom: 1rem; /* 下边距 */
    display: flex;
    align-items: center; /* 垂直居中对齐图标和文字 */
    gap: 10px; /* 图标与文字间距 */
}

.solution-card h3 i { /* 解决方案图标 */
    font-size: 1.5rem; /* 图标大小 */
}

/*
 * Download Experience Section Styles
 * 下载体验部分样式，展示下载选项和二维码
 * 包含下载卡片和相关信息展示
 */
.download-section { /* 下载区域主容器 */
    background: white; /* 白色背景 */
    border-radius: var(--border-radius); /* 圆角 */
    padding: 3rem; /* 内边距 */
    box-shadow: var(--shadow); /* 阴影 */
    text-align: center; /* 内容居中 */
    margin-top: 3rem; /* 与上方内容的间距 */
}

.download-options { /* 下载选项网格 */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 响应式网格，最小250px */
    gap: 2rem; /* 选项之间的间距 */
    margin-top: 2rem; /* 与上方标题的间距 */
}

.download-card { /* 下载选项卡片 */
    background: #f8f9fa; /* 浅灰色背景 */
    padding: 2rem; /* 内边距 */
    border-radius: var(--border-radius); /* 圆角 */
    border: 2px solid #e9ecef; /* 浅灰色边框 */
    transition: var(--transition); /* 过渡动画 */
}

.download-card:hover { /* 下载卡片悬停效果 */
    border-color: var(--primary); /* 边框变为主题红色 */
    transform: translateY(-5px); /* 向上移动 */
}

.download-card h3 { /* 下载选项标题 */
    margin-bottom: 1.5rem; /* 下边距 */
    color: var(--dark); /* 深灰色文字 */
}

.download-info { /* 下载信息文字 */
    margin: 1rem 0; /* 上下边距 */
    color: var(--gray); /* 灰色文字 */
    font-size: 0.9rem; /* 较小字体 */
}

.qr-code { /* 二维码展示区域 */
    width: 150px; /* 固定尺寸 */
    height: 150px;
    margin: 1rem auto; /* 水平居中 */
    background: #f0f0f0; /* 占位背景色 */
    display: flex;
    align-items: center;
    justify-content: center; /* 内容居中 */
    border-radius: 8px; /* 小圆角 */
    font-size: 0.8rem; /* 占位文字大小 */
}

/*
 * Download Area Styles
 * 下载区域样式，包含下载头部、内容、功能列表和操作按钮
 * 使用flexbox布局确保内容在不同屏幕尺寸下的适应性
 */
.download-container { /* 下载区域容器 */
    padding: 1rem; /* 内边距 */
    text-align: center; /* 内容居中 */
}

.download-header h3 { /* 下载区域标题 */
    color: var(--primary); /* 主题红色 */
    margin-bottom: 0.5rem; /* 下边距 */
    font-size: 1.4rem; /* 字体大小 */
}

.download-header p { /* 下载区域描述 */
    color: var(--gray); /* 灰色文字 */
    margin-bottom: 1.5rem; /* 下边距 */
}

.download-content { /* 下载内容区域 */
    display: flex;
    flex-wrap: wrap; /* 允许换行以适应小屏幕 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
    gap: 1rem; /* 元素之间的间距 */
}

.download-features { /* 下载功能列表 */
    flex: 1; /* 占据可用空间 */
    text-align: left; /* 文字左对齐 */
    min-width: 200px; /* 最小宽度 */
    list-style: none; /* 去除默认列表样式 */
    padding: 0; /* 无内边距 */
}

.download-features li { /* 功能列表项 */
    margin: 0.5rem 0; /* 上下边距 */
    color: var(--dark); /* 深灰色文字 */
    display: flex;
    align-items: center; /* 垂直居中对齐图标和文字 */
    gap: 0.5rem; /* 图标与文字间距 */
}

.download-features i { /* 功能列表图标 */
    color: var(--primary); /* 主题红色 */
    width: 20px; /* 固定宽度 */
}

.download-actions { /* 下载操作区域 */
    flex: 1; /* 占据可用空间 */
    min-width: 200px; /* 最小宽度 */
}

.file-info { /* 文件信息 */
    margin-top: 1rem; /* 与上方内容的间距 */
    color: var(--gray); /* 灰色文字 */
}

.file-info small { /* 文件详细信息 */
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中 */
    gap: 0.5rem; /* 元素间距 */
}

.download-container .btn-outline { /* 下载区域中的轮廓按钮 */
    margin: 0; /* 重置默认边距 */
}

.download-container .btn-outline:disabled { /* 禁用状态的按钮 */
    background-color: #f8f9fa; /* 浅灰色背景 */
    border-color: #ddd; /* 浅灰色边框 */
    color: #aaa; /* 浅灰色文字 */
    cursor: not-allowed; /* 禁用光标 */
}

.download-container .btn-outline:disabled:hover { /* 禁用按钮的悬停状态 */
    transform: none; /* 无变换 */
    box-shadow: none; /* 无阴影 */
}

/*
 * Footer Styles
 * 页脚样式，包含页脚内容、版权信息和社交媒体链接
 * 使用深色背景与主色调保持一致
 */
footer { /* 页脚主容器 */
    background: var(--darker); /* 深色背景 */
    color: white; /* 白色文字 */
    padding: 3rem 0; /* 内边距 */
    margin-top: 5rem; /* 与上方内容的间距 */
    width: 100%; /* 全宽 */
}

.footer-container { /* 页脚内容容器 */
    max-width: 1600px; /* 最大宽度 */
    margin: 0 auto; /* 水平居中 */
    padding: 0 3%; /* 水平内边距 */
}

.footer-content { /* 页脚内容网格 */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 响应式网格，最小250px */
    gap: 3rem; /* 列之间的间距 */
}

.footer-column h3 { /* 页脚列标题 */
    margin-bottom: 1.5rem; /* 下边距 */
    font-size: 1.3rem; /* 字体大小 */
    position: relative; /* 为装饰线定位 */
    padding-bottom: 0.5rem; /* 底部内边距 */
}

.footer-column h3::after { /* 页脚标题下的装饰线 */
    content: '';
    position: absolute;
    bottom: 0; /* 位于标题底部 */
    left: 0;
    width: 50px; /* 线条宽度 */
    height: 2px; /* 线条高度 */
    background: var(--primary); /* 主题红色 */
}

.footer-links { /* 页脚链接列表 */
    display: flex;
    flex-direction: column; /* 垂直布局 */
    gap: 0.8rem; /* 链接之间的间距 */
}

.footer-links a { /* 页脚链接样式 */
    color: #bbb; /* 浅灰色文字 */
    text-decoration: none; /* 无下划线 */
    transition: var(--transition); /* 过渡动画 */
}

.footer-links a:hover { /* 页脚链接悬停效果 */
    color: white; /* 白色文字 */
    padding-left: 5px; /* 左边距，创建移动效果 */
}

.copyright { /* 版权信息 */
    text-align: center; /* 文字居中 */
    padding-top: 2rem; /* 顶部内边距 */
    margin-top: 2rem; /* 顶部外边距 */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 顶部分隔线 */
    color: #bbb; /* 浅灰色文字 */
    font-size: 0.9rem; /* 较小字体 */
}

.bottom-info { /* 页脚底部信息 */
    display: flex;
    justify-content: center; /* 水平居中 */
    gap: 1rem; /* 元素间距 */
    margin-top: 1rem; /* 与上方内容的间距 */
    flex-wrap: wrap; /* 允许换行 */
}

.bottom-info a { /* 页脚底部链接 */
    color: #bbb; /* 浅灰色文字 */
    text-decoration: none; /* 无下划线 */
    font-size: 0.9rem; /* 较小字体 */
    display: flex;
    align-items: center; /* 垂直居中 */
    gap: 5px; /* 图标与文字间距 */
}

.bottom-info a:hover { /* 页脚底部链接悬停效果 */
    color: white; /* 白色文字 */
}

.social-links { /* 社交媒体链接 */
    display: flex;
    gap: 1rem; /* 链接之间的间距 */
    margin-top: 1.5rem; /* 与上方内容的间距 */
}

.social-links a { /* 社交媒体链接图标 */
    display: flex;
    align-items: center;
    justify-content: center; /* 内容居中 */
    width: 40px; /* 固定尺寸 */
    height: 40px;
    background: rgba(255, 255, 255, 0.1); /* 透明白色背景 */
    border-radius: 50%; /* 圆形 */
    color: white; /* 白色图标 */
    transition: var(--transition); /* 过渡动画 */
}

.social-links a:hover { /* 社交媒体链接悬停效果 */
    background: var(--primary); /* 背景变为主题红色 */
    transform: translateY(-3px); /* 向上移动 */
}

/*
 * Documentation Page Layout Styles
 * 文档页面布局样式，包含容器、侧边栏和主要内容区域
 * 使用flexbox布局实现响应式文档页面
 */
.container { /* 文档页面主容器 */
    display: flex;
    width: 100%;
    max-width: 100%;
    margin: 0 auto; /* 水平居中 */
    padding: 2rem 1.5%; /* 内边距 */
    gap: 1.5rem; /* 主内容和侧边栏之间的间距 */
}

.sidebar-container { /* 侧边栏容器 */
    position: sticky; /* 粘性定位 */
    top: 100px; /* 距离顶部的距离 */
    height: fit-content; /* 高度自适应内容 */
}

/* 左侧边栏 */
.sidebar { /* 侧边栏样式 */
    width: 240px; /* 固定宽度 */
    background: white; /* 白色背景 */
    border-radius: var(--border-radius); /* 圆角 */
    box-shadow: var(--shadow); /* 阴影 */
    transition: var(--transition); /* 过渡动画 */
    position: sticky; /* 粘性定位 */
    top: 100px; /* 距离顶部的距离 */
    height: fit-content; /* 高度自适应内容 */
}

.sidebar.collapsed { /* 收起状态的侧边栏 */
    width: 50px; /* 窄宽度 */
}

.sidebar-header { /* 侧边栏头部 */
    padding: 1.5rem; /* 内边距 */
    border-bottom: 1px solid #eee; /* 底部分隔线 */
    display: flex;
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
}

.sidebar.collapsed .sidebar-header h3 { /* 收起状态下的标题 */
    display: none; /* 隐藏标题 */
}

.sidebar-toggle-btn { /* 侧边栏切换按钮 */
    background: var(--primary); /* 主题红色背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    width: 30px; /* 宽度 */
    height: 30px; /* 高度 */
    border-radius: 50%; /* 圆形 */
    cursor: pointer; /* 指针光标 */
    display: flex;
    align-items: center;
    justify-content: center; /* 内容居中 */
    transition: var(--transition); /* 过渡动画 */
}

.sidebar.collapsed .sidebar-toggle-btn { /* 收起状态下按钮的位置 */
    position: absolute;
    right: -15px; /* 右侧偏移 */
    top: 20px; /* 顶部位置 */
}

.sidebar-menu { /* 侧边栏菜单 */
    list-style: none; /* 去除默认列表样式 */
    padding: 1rem 0; /* 内边距 */
}

.sidebar-menu li { /* 侧边栏菜单项 */
    margin: 0; /* 无外边距 */
}

.sidebar-menu a { /* 侧边栏链接样式 */
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    padding: 1rem 1.5rem; /* 内边距 */
    text-decoration: none; /* 无下划线 */
    color: var(--dark); /* 深灰色文字 */
    transition: var(--transition); /* 过渡动画 */
    gap: 0.8rem; /* 图标与文字间距 */
}

.sidebar.collapsed .sidebar-menu a span { /* 收起状态下隐藏文字 */
    display: none; /* 隐藏文字 */
}

.sidebar.collapsed .sidebar-menu a i { /* 收起状态下图标的样式 */
    margin-right: 0; /* 无右边距 */
    text-align: center; /* 文字居中 */
    width: 100%; /* 占满宽度 */
}

.sidebar-menu a:hover,
.sidebar-menu a.active { /* 悬停和激活状态 */
    background: var(--primary); /* 主题红色背景 */
    color: white; /* 白色文字 */
}

.sidebar-menu a i { /* 侧边栏链接图标 */
    width: 20px; /* 固定宽度 */
    text-align: center; /* 文字居中 */
}

.main-content { /* 主内容区域 */
    flex: 1; /* 占据可用空间 */
    min-width: 0; /* 防止内容溢出 */
    margin: 0; /* 无外边距 */
}

.content-section { /* 内容章节 */
    margin-bottom: 3rem; /* 下边距 */
    scroll-margin-top: 80px; /* 滚动定位时的顶部偏移 */
}

.content-section h1,
.content-section h2 { /* 内容章节标题 */
    color: var(--dark); /* 深灰色文字 */
    margin-bottom: 1.5rem; /* 下边距 */
}

.content-section h3 { /* 内容章节三级标题 */
    color: var(--dark); /* 深灰色文字 */
    margin: 1.5rem 0 1rem; /* 上下边距 */
}

.section-card { /* 内容卡片 */
    background: white; /* 白色背景 */
    padding: 2rem; /* 内边距 */
    border-radius: var(--border-radius); /* 圆角 */
    box-shadow: var(--shadow); /* 阴影 */
    margin-bottom: 2rem; /* 下边距 */
}

/*
 * Code Block Styles
 * 代码块样式，用于显示代码片段和接口地址
 * 包含语法高亮、滚动条和特殊接口地址样式
 */
.code-block { /* 代码块基本样式 */
    background: var(--code-bg); /* 淡红色背景 */
    color: var(--code-text); /* 深灰色文字 */
    padding: 1rem; /* 内边距 */
    border-radius: var(--border-radius); /* 圆角 */
    font-family: monospace; /* 等宽字体 */
    overflow-x: auto; /* 水平滚动 */
    margin: 1rem 0; /* 上下边距 */
    border: 1px solid var(--code-border); /* 红色边框 */
}

/*专门针对接口地址的样式*/
.interface-address { /* 接口地址特殊样式 */
    background: var(--primary-very-light); /* 非常浅的红色背景 */
    color: var(--interface-address-text); /* 接口地址文字颜色 */
    font-weight: 500; /* 中等粗细 */
}

/* JSON格式化显示专用样式 */
.json-response { /* JSON响应显示样式 */
    white-space: pre; /* 保留空白字符 */
    font-family: monospace; /* 等宽字体 */
    max-height: none; /* 移除固定高度限制，让内容完整显示 */
    overflow-y: auto; /* 垂直滚动 */
}

/*
 * Custom Scrollbar Styles for Code Blocks
 * 代码块自定义滚动条样式，针对不同浏览器提供一致的滚动条外观
 * 为代码块提供主题一致的滚动条
 */
/* Webkit内核浏览器滚动条样式（Chrome, Safari, Edge） */
.code-block::-webkit-scrollbar { /* 代码块的水平滚动条 */
    height: 12px; /* 滚动条高度 */
    background-color: var(--scrollbar-track); /* 轨道颜色，使用CSS变量 */
}

.code-block::-webkit-scrollbar-thumb { /* 代码块滚动条滑块 */
    background-color: var(--scrollbar-thumb); /* 滑块颜色 */
    border-radius: 6px; /* 滑块圆角 */
    border: 2px solid transparent; /* 边框 */
    background-clip: content-box; /* 背景裁剪 */
}

.code-block::-webkit-scrollbar-thumb:hover { /* 代码块滑块悬停效果 */
    background-color: var(--primary-dark); /* 悬停时的滑块颜色 */
}

.code-block::-webkit-scrollbar-track { /* 代码块滚动条轨道 */
    background-color: var(--scrollbar-track); /* 轨道颜色 */
    border-radius: 6px; /* 轨道圆角 */
}

/* 火狐浏览器滚动条样式 */
.code-block { /* 代码块在火狐浏览器中的滚动条样式 */
    scrollbar-width: thin; /* 滚动条宽度 */
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); /* 滑块和轨道颜色 */
}

/*
 * Parameters Table Styles
 * 参数表格样式，用于展示接口参数信息
 * 包含表头和表单元格的样式定义
 */
.params-table { /* 参数表格基本样式 */
    width: 100%; /* 全宽 */
    border-collapse: collapse; /* 合并边框 */
    margin: 1rem 0; /* 上下边距 */
}

.params-table th,
.params-table td { /* 表头和表单元格样式 */
    padding: 0.6rem; /* 内边距 */
    text-align: left; /* 左对齐 */
    border-bottom: 1px solid #eee; /* 底部分隔线 */
    font-size: 0.85rem; /* 字体大小 */
}

.params-table th { /* 表头样式 */
    background: #f8f9fa; /* 浅灰色背景 */
    font-weight: 600; /* 粗体 */
    font-size: 0.9rem; /* 字体大小 */
}

/*
 * Code Tabs Styles
 * 代码选项卡样式，用于在单个区域展示多个代码片段
 * 支持选项卡切换和内容展示
 */
.code-tabs { /* 代码选项卡容器 */
    margin: 1rem 0; /* 上下边距 */
}

.tab-buttons { /* 选项卡按钮容器 */
    display: flex; /* 水平排列 */
    border-bottom: 1px solid var(--code-border); /* 底部分隔线 */
    margin-bottom: -1px; /* 负边距以与内容区域对齐 */
    overflow-x: auto; /* 水平滚动以适应小屏幕 */
}

.tab-button { /* 选项卡按钮样式 */
    background: #f8e0e0; /* 浅红色背景 */
    border: 1px solid var(--code-border); /* 红色边框 */
    border-bottom: none; /* 去除底边框 */
    padding: 0.8rem 1.5rem; /* 内边距 */
    cursor: pointer; /* 指针光标 */
    font-weight: 500; /* 中等粗细 */
    transition: background-color 0.3s; /* 背景颜色过渡 */
    border-radius: 5px 5px 0 0; /* 顶部圆角 */
    margin-right: 0.2rem; /* 右边距 */
    color: var(--primary-dark); /* 深红色文字 */
}

.tab-button:hover { /* 选项卡按钮悬停效果 */
    background: #f5cccc; /* 更深的浅红色 */
}

.tab-button.active { /* 激活状态的选项卡按钮 */
    background: var(--primary); /* 主题红色背景 */
    color: white; /* 白色文字 */
    border-color: var(--primary); /* 红色边框 */
}

.tab-content { /* 选项卡内容区域 */
    border: 1px solid var(--code-border); /* 红色边框 */
    border-radius: 0 0 5px 5px; /* 底部圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    background: var(--code-bg); /* 代码背景色 */
}

.tab-pane { /* 选项卡面板 */
    display: none; /* 默认隐藏 */
}

.tab-pane.active { /* 激活状态的选项卡面板 */
    display: block; /* 显示内容 */
}

.tab-pane .code-block { /* 选项卡中的代码块样式 */
    border-radius: 0; /* 无圆角 */
    margin: 0; /* 无边距 */
    border: none; /* 无边框 */
    background: var(--code-bg); /* 代码背景色 */
    color: var(--code-text); /* 代码文字色 */
    overflow-y: hidden; /* 避免选项卡中的代码块出现垂直滚动条 */
}

/*
 * Prism.js Code Highlighting Styles
 * Prism.js代码高亮样式定制，为不同类型的代码元素提供颜色方案
 * 与整体红色主题保持一致
 */
pre[class*="language-"] { /* Prism.js代码块容器 */
    border-radius: 0 0 5px 5px; /* 底部圆角 */
    margin: 0; /* 无外边距 */
    background: var(--code-bg) !important; /* 使用CSS变量的背景色 */
    /* 滚动条样式 */
    overflow-x: auto; /* 水平滚动 */
    overflow-y: hidden; /* 避免出现垂直滚动条 */
}

pre[class*="language-"]::-webkit-scrollbar { /* Prism.js代码块的水平滚动条 */
    height: 12px; /* 滚动条高度 */
    background-color: var(--scrollbar-track); /* 轨道颜色 */
}

pre[class*="language-"]::-webkit-scrollbar-thumb { /* Prism.js代码块滚动条滑块 */
    background-color: var(--scrollbar-thumb); /* 滑块颜色 */
    border-radius: 6px; /* 滑块圆角 */
    border: 2px solid transparent; /* 边框 */
    background-clip: content-box; /* 背景裁剪 */
}

pre[class*="language-"]::-webkit-scrollbar-thumb:hover { /* Prism.js代码块滑块悬停效果 */
    background-color: var(--primary-dark); /* 悬停时的滑块颜色 */
}

pre[class*="language-"]::-webkit-scrollbar-track { /* Prism.js代码块滚动条轨道 */
    background-color: var(--scrollbar-track); /* 轨道颜色 */
    border-radius: 6px; /* 轨道圆角 */
}

/* 火狐浏览器滚动条样式 */
pre[class*="language-"] { /* 火狐浏览器中Prism.js代码块的滚动条样式 */
    scrollbar-width: thin; /* 滚动条宽度 */
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); /* 滑块和轨道颜色 */
}

code[class*="language-"],
pre[class*="language-"] { /* Prism.js代码元素基础样式 */
    font-size: 0.95rem; /* 字体大小 */
    line-height: 1.4; /* 行高 */
    color: var(--code-text) !important; /* 文字颜色 */
    text-shadow: none !important; /* 无文字阴影 */
    background: var(--code-bg) !important; /* 背景色 */
}

/* Prism.js 颜色定制以匹配红色主题 */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata { /* 注释类元素 */
    color: #8d7a7a; /* 深灰色 */
}

.token.punctuation { /* 标点符号 */
    color: #5a5a5a; /* 深灰色 */
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted { /* 属性、标签、布尔值、数字等 */
    color: var(--primary); /* 主题红色 */
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted { /* 选择器、属性名、字符串等 */
    color: var(--secondary); /* 橙色 */
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string { /* 操作符、实体、URL等 */
    color: #5a5a5a; /* 深灰色 */
}

.token.atrule,
.token.attr-value,
.token.keyword { /* CSS规则、属性值、关键词 */
    color: var(--primary-dark); /* 深红色 */
}

.token.function,
.token.class-name { /* 函数、类名 */
    color: #2980b9; /* 蓝色 */
}

.token.regex,
.token.important,
.token.variable { /* 正则表达式、重要标记、变量 */
    color: #8e44ad; /* 紫色 */
}

/*
 * Table of Contents Navigation
 * 右侧目录导航样式，提供页面内容的快速导航
 * 使用粘性定位确保导航在滚动时保持可见
 */
.toc { /* 目录导航容器 */
    width: 200px; /* 固定宽度 */
    background: white; /* 白色背景 */
    border-radius: var(--border-radius); /* 圆角 */
    box-shadow: var(--shadow); /* 阴影 */
    height: fit-content; /* 高度自适应内容 */
    position: sticky; /* 粘性定位 */
    top: 100px; /* 距离顶部的距离 */
    align-self: flex-start; /* 与顶部对齐 */
}

.toc-header { /* 目录头部 */
    padding: 1.5rem; /* 内边距 */
    border-bottom: 1px solid #eee; /* 底部分隔线 */
}

.toc-header h3 { /* 目录标题 */
    margin: 0; /* 无外边距 */
    color: var(--dark); /* 深灰色文字 */
    font-size: 1.2rem; /* 字体大小 */
}

.toc-menu { /* 目录菜单 */
    list-style: none; /* 去除默认列表样式 */
    padding: 1rem 0; /* 内边距 */
}

.toc-menu li { /* 目录菜单项 */
    margin: 0; /* 无外边距 */
}

.toc-menu a { /* 目录链接样式 */
    display: block; /* 块级元素 */
    padding: 0.8rem 1.5rem; /* 内边距 */
    text-decoration: none; /* 无下划线 */
    color: var(--dark); /* 深灰色文字 */
    transition: var(--transition); /* 过渡动画 */
    font-size: 0.9rem; /* 字体大小 */
}

.toc-menu a:hover,
.toc-menu a.active { /* 目录链接悬停和激活状态 */
    background: var(--primary); /* 主题红色背景 */
    color: white; /* 白色文字 */
}

/*
 * Sidebar Category Menu Styles
 * 侧边栏分类菜单样式，提供可折叠的分类和子分类菜单
 * 支持展开/收起动画和视觉层次展示
 */
.sidebar-category { /* 侧边栏分类容器 */
    border-bottom: 1px solid #eee; /* 底部分隔线 */
}

.sidebar-category:last-child { /* 最后一个分类无底部分隔线 */
    border-bottom: none; /* 移除底部分隔线 */
}

.category-header { /* 分类标题头部 */
    display: flex;
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
    padding: 1rem 1.5rem; /* 内边距 */
    text-decoration: none; /* 无下划线 */
    color: var(--dark); /* 深灰色文字 */
    transition: var(--transition); /* 过渡动画 */
    gap: 0.8rem; /* 元素间距 */
    font-weight: 600; /* 粗体 */
    background-color: #fdf0f0; /* 浅红色背景 */
    border-left: 4px solid var(--primary); /* 左侧红色装饰条 */
    cursor: pointer; /* 指针光标 */
    font-size: 1.05rem; /* 稍微增大字体 */
}

.category-header:hover { /* 分类标题悬停效果 */
    background: #f8d4d2; /* 悬停背景色 */
}

.category-header i:first-child { /* 分类图标 */
    width: 20px; /* 固定宽度 */
    text-align: center; /* 文字居中 */
}

.category-arrow { /* 分类展开箭头 */
    font-size: 0.8rem; /* 小字体 */
    transition: transform 0.3s ease; /* 旋转过渡 */
}

.sidebar-category.expanded .category-arrow { /* 展开状态下的箭头旋转 */
    transform: rotate(180deg); /* 旋转180度 */
}

.subcategory-menu { /* 子分类菜单 */
    list-style: none; /* 去除默认列表样式 */
    padding: 0; /* 无内边距 */
    max-height: 0; /* 初始高度为0 */
    overflow: hidden; /* 隐藏溢出内容 */
    transition: max-height 0.3s ease; /* 展开收起过渡 */
    background-color: #ffffff; /* 白色背景 */
}

.sidebar-category.expanded .subcategory-menu { /* 展开状态下的子菜单 */
    max-height: 500px; /* 设置足够大的高度以显示内容 */
}

/* 添加一个初始状态类，避免页面加载时的动画 */
.subcategory-menu.initial { /* 初始状态，避免加载时的动画 */
    transition: none; /* 无过渡效果 */
}

.subcategory-menu a { /* 子分类链接样式 */
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    padding: 0.8rem 1.5rem 0.8rem 3rem; /* 左侧增加内边距以实现缩进 */
    text-decoration: none; /* 无下划线 */
    color: var(--dark); /* 深灰色文字 */
    transition: var(--transition); /* 过渡动画 */
    gap: 0.8rem; /* 元素间距 */
    font-size: 0.9rem; /* 字体大小 */
    border-left: 4px solid transparent; /* 左侧透明装饰条 */
}

.subcategory-menu a:hover,
.subcategory-menu a.active { /* 子分类链接悬停和激活状态 */
    background: var(--primary-very-light); /* 浅红色背景 */
    color: var(--primary-dark); /* 深红色文字 */
    border-left: 4px solid var(--primary); /* 左侧红色装饰条 */
}

.subcategory-menu a.active { /* 激活状态的子分类链接 */
    background: var(--primary); /* 主题红色背景 */
    color: white; /* 白色文字 */
    font-weight: 500; /* 中等粗细 */
}

.subcategory-menu a i { /* 子分类链接图标 */
    width: 20px; /* 固定宽度 */
    text-align: center; /* 文字居中 */
}

/* 添加子菜单项的缩进样式，增强层次感 */
.subcategory-menu li { /* 子菜单项容器 */
    position: relative; /* 为装饰元素定位 */
}

.subcategory-menu li:not(:last-child)::after { /* 子菜单项连接线 */
    content: "";
    position: absolute;
    left: 2.2rem; /* 连接线位置 */
    top: 0;
    bottom: 0;
    width: 1px; /* 线条宽度 */
    background-color: #eee; /* 灰色连接线 */
}

/* 为子菜单项添加小圆点标识 */
.subcategory-menu li::before { /* 子菜单项圆点标识 */
    content: "";
    position: absolute;
    left: 1.8rem; /* 圆点位置 */
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    width: 5px; /* 圆点宽度 */
    height: 5px; /* 圆点高度 */
    border-radius: 50%; /* 圆形 */
    background-color: var(--primary); /* 主题红色 */
}

/* 折叠状态下的分类菜单 */
.sidebar.collapsed .subcategory-menu { /* 侧边栏收起时的子菜单 */
    display: none; /* 隐藏子菜单 */
}

/*
 * Table of Contents Submenu Styles
 * 目录子菜单样式，用于嵌套目录项的展示
 * 提供缩进和层级视觉效果
 */
.toc-menu ul { /* 目录子菜单 */
    list-style: none; /* 去除默认列表样式 */
    padding-left: 1rem; /* 左侧缩进 */
    margin: 0.5rem 0; /* 上下边距 */
}

.toc-menu ul a { /* 目录子项链接 */
    padding: 0.5rem 1.5rem 0.5rem 2rem; /* 增加左侧内边距以实现缩进 */
    font-size: 0.85rem; /* 较小字体 */
}

/*
 * Responsive Design Styles
 * 响应式设计样式，适配不同屏幕尺寸
 * 包括大屏、中屏和小屏的适配方案
 */
/* 大屏适配 (最大宽度1200px) */
@media (max-width: 1200px) {
    .container { /* 大屏容器适配 */
        padding: 2rem 1%; /* 减少水平内边距 */
    }

    .sidebar { /* 大屏侧边栏适配 */
        width: 220px; /* 窄侧边栏 */
    }

    .toc { /* 大屏目录适配 */
        width: 180px; /* 窄目录 */
    }
}

/* 中屏适配 (最大宽度992px) */
@media (max-width: 992px) {
    .hero { /* 中屏英雄区域适配 */
        flex-direction: column; /* 垂直布局 */
    }

    .hero-image { /* 中屏英雄图片适配 */
        width: 100%; /* 全宽 */
    }

    .container { /* 中屏容器适配 */
        flex-direction: column; /* 垂直布局 */
    }

    .sidebar { /* 中屏侧边栏适配 */
        width: 100%; /* 全宽 */
        position: relative; /* 相对定位 */
        top: 0; /* 顶部对齐 */
    }

    .toc { /* 中屏目录适配 */
        width: 100%; /* 全宽 */
        position: relative; /* 相对定位 */
        top: 0; /* 顶部对齐 */
    }

    .sidebar.collapsed { /* 中屏收起状态侧边栏 */
        width: 100%; /* 全宽 */
    }

    .sidebar.collapsed .sidebar-menu a span { /* 中屏收起状态下显示文字 */
        display: inline; /* 显示文字 */
    }

    .sidebar.collapsed .sidebar-menu a i { /* 中屏收起状态下图标样式 */
        width: 20px; /* 固定宽度 */
        margin-right: 0.8rem; /* 右边距 */
    }
}

/* 小屏适配 (最大宽度768px) */
@media (max-width: 768px) {
    .nav-links { /* 小屏隐藏导航链接 */
        display: none; /* 隐藏 */
    }

    .mobile-menu-btn { /* 小屏显示移动端菜单按钮 */
        display: block; /* 显示 */
    }

    h1 { /* 小屏主标题适配 */
        font-size: 2.2rem; /* 较小字体 */
    }

    .section { /* 小屏章节适配 */
        margin: 3rem 0; /* 较小边距 */
    }

    .btn { /* 小屏按钮适配 */
        width: 100%; /* 全宽 */
        justify-content: center; /* 居中对齐 */
        margin-bottom: 1rem; /* 底部边距 */
    }

    .btn-outline { /* 小屏轮廓按钮适配 */
        margin-left: 0; /* 无左边距 */
    }

    .features { /* 小屏功能特点适配 */
        grid-template-columns: 1fr; /* 单列布局 */
    }

    .container { /* 小屏容器适配 */
        padding: 1rem; /* 较小内边距 */
        gap: 1rem; /* 较小间距 */
    }

    .sidebar-header { /* 小屏侧边栏头部适配 */
        padding: 1rem; /* 较小内边距 */
    }

    .sidebar-menu a { /* 小屏侧边栏菜单项适配 */
        padding: 0.8rem 1rem; /* 较小内边距 */
    }

    .section-card { /* 小屏内容卡片适配 */
        padding: 1.5rem; /* 较小内边距 */
    }
}

.guide-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin: 1rem 0;
    display: block;
}

.guide-image-small { /* 小型指南图片样式 */
    max-width: 40%; /* 最大宽度 */
    max-height: 40%; /* 最大高度 */
    height: auto; /* 自适应高度 */
    border-radius: var(--border-radius); /* 圆角 */
    box-shadow: var(--shadow); /* 阴影 */
    margin: 1rem 0; /* 上下边距 */
    display: block; /* 块级元素 */
}

/*
 * Global Scrollbar Styles
 * 全局滚动条样式，为整个页面提供统一的滚动条外观
 * 针对不同浏览器内核提供相应的样式定义
 */
/* Webkit内核浏览器滚动条样式（Chrome, Safari, Edge） */
::-webkit-scrollbar { /* 全局页面滚动条 */
    width: 8px; /* 垂直滚动条宽度 */
    height: 8px; /* 水平滚动条高度 */
}

::-webkit-scrollbar-track { /* 全局页面滚动条轨道 */
    background-color: transparent; /* 透明轨道 */
}

::-webkit-scrollbar-thumb { /* 全局页面滚动条滑块 */
    background-color: var(--scrollbar-thumb); /* 滑块颜色 */
    border-radius: 4px; /* 滑块圆角 */
}

::-webkit-scrollbar-thumb:hover { /* 全局页面滚动条滑块悬停效果 */
    background-color: var(--primary-dark); /* 悬停时的滑块颜色 */
}

/* 火狐浏览器滚动条样式 */
html { /* 火狐浏览器中全局滚动条样式 */
    scrollbar-width: thin; /* 滚动条宽度 */
    scrollbar-color: var(--scrollbar-thumb) transparent; /* 滑块颜色和轨道颜色 */
}

/*
 * Tooltip Styles
 * 气泡提示样式，为用户提供额外信息的交互功能
 * 包含悬停显示和定位效果
 */
.tooltip { /* 气泡提示容器 */
    position: relative; /* 相对定位 */
    display: inline-block; /* 行内块元素 */
    border-bottom: 1px dotted var(--primary); /* 主题红色点线边框 */
    color: var(--primary); /* 主题红色文字 */
    cursor: help; /* 帮助光标 */
}

.tooltip .tooltip-text { /* 气泡提示内容 */
    visibility: hidden; /* 默认隐藏 */
    width: 400px; /* 固定宽度 */
    background-color: var(--tooltip-bg); /* 背景色 */
    color: #fff; /* 白色文字 */
    text-align: left; /* 左对齐 */
    border-radius: 6px; /* 圆角 */
    padding: 15px; /* 内边距 */
    position: absolute; /* 绝对定位 */
    z-index: 1000; /* 高层级 */
    bottom: 125%; /* 位于元素上方 */
    left: 50%; /* 水平居中 */
    margin-left: -200px; /* 左偏移以居中 */
    opacity: 0; /* 透明度 */
    transition: opacity 0.3s; /* 透明度过渡 */
    font-size: 0.9rem; /* 字体大小 */
    line-height: 1.5; /* 行高 */
    box-shadow: var(--shadow); /* 阴影 */
}

.tooltip .tooltip-text::after { /* 气泡提示三角形 */
    content: "";
    position: absolute;
    top: 100%; /* 位于提示框底部 */
    left: 50%; /* 水平居中 */
    margin-left: -5px; /* 左偏移以居中 */
    border-width: 5px; /* 边框宽度 */
    border-style: solid; /* 实线边框 */
    border-color: var(--tooltip-bg) transparent transparent transparent; /* 上边框颜色，其他透明 */
}

.tooltip:hover .tooltip-text { /* 悬停时显示气泡提示 */
    visibility: visible; /* 可见 */
    opacity: 1; /* 不透明 */
}

/*
 * Appendix Modal Styles
 * 附录弹窗样式，用于展示附录内容
 * 包含遮罩层和弹窗内容区域
 */
.modal { /* 弹窗遮罩层 */
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位 */
    z-index: 1001; /* 高层级 */
    left: 0; /* 左对齐 */
    top: 0; /* 顶对齐 */
    width: 100%; /* 全宽 */
    height: 100%; /* 全高 */
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
}

.modal-content { /* 弹窗内容区域 */
    background-color: #fff; /* 白色背景 */
    margin: 5% auto; /* 垂直居中 */
    padding: 0; /* 无内边距 */
    border: none; /* 无边框 */
    border-radius: var(--border-radius); /* 圆角 */
    width: 80%; /* 宽度 */
    max-width: 900px; /* 最大宽度 */
    max-height: 70vh; /* 最大高度 */
    overflow-y: auto; /* 垂直滚动 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* 阴影 */
}

/* 附录弹窗滚动条样式 */
/* Webkit内核浏览器滚动条样式（Chrome, Safari, Edge） */
.modal-content::-webkit-scrollbar { /* 弹窗内容区域滚动条 */
    width: 8px; /* 垂直滚动条宽度 */
    height: 8px; /* 水平滚动条高度 */
}

.modal-content::-webkit-scrollbar-track { /* 弹窗内容区域滚动条轨道 */
    background-color: transparent; /* 透明轨道 */
}

.modal-content::-webkit-scrollbar-thumb { /* 弹窗内容区域滚动条滑块 */
    background-color: var(--scrollbar-thumb); /* 滑块颜色 */
    border-radius: 4px; /* 滑块圆角 */
}

.modal-content::-webkit-scrollbar-thumb:hover { /* 弹窗内容区域滚动条滑块悬停效果 */
    background-color: var(--primary-dark); /* 悬停时的滑块颜色 */
}

/* 火狐浏览器滚动条样式 - 附录弹窗 */
.modal-content { /* 火狐浏览器中弹窗滚动条样式 */
    scrollbar-width: thin; /* 滚动条宽度 */
    scrollbar-color: var(--scrollbar-thumb) transparent; /* 滑块颜色和轨道颜色 */
}

.modal-header { /* 弹窗头部 */
    padding: 1rem 2rem; /* 内边距 */
    background: linear-gradient(45deg, var(--primary), var(--primary-dark)); /* 主题红色渐变背景 */
    color: white; /* 白色文字 */
    border-radius: var(--border-radius) var(--border-radius) 0 0; /* 顶部圆角 */
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
}

.modal-header h2 { /* 弹窗标题 */
    margin: 0; /* 无外边距 */
    font-size: 1.5rem; /* 字体大小 */
}

.close { /* 关闭按钮 */
    color: white; /* 白色文字 */
    font-size: 1.8rem; /* 字体大小 */
    font-weight: bold; /* 粗体 */
    cursor: pointer; /* 指针光标 */
    background: none; /* 无背景 */
    border: none; /* 无边框 */
}

.close:hover { /* 关闭按钮悬停效果 */
    color: #ddd; /* 浅灰色 */
}

.modal-body { /* 弹窗内容区域 */
    padding: 2rem; /* 内边距 */
}

/* 响应式设计：在小屏幕上调整气泡宽度 */
@media (max-width: 768px) {
    .tooltip .tooltip-text { /* 小屏上气泡提示适配 */
        width: 250px; /* 较小宽度 */
        margin-left: -125px; /* 调整居中偏移 */
    }

    .modal-content { /* 小屏上弹窗适配 */
        width: 95%; /* 更宽的宽度 */
        margin: 10% auto; /* 更大的上下边距 */
    }
}

/* 附录链接样式 */
.appendix-link { /* 附录链接样式 */
    color: var(--primary); /* 主题红色 */
    text-decoration: none; /* 无下划线 */
    border-bottom: 1px dotted var(--primary); /* 点线底边框 */
    cursor: pointer; /* 指针光标 */
}

.appendix-link:hover { /* 附录链接悬停效果 */
    color: var(--primary-dark); /* 深红色 */
}

/* 确保代码块容器有相对定位 */
.code-block { /* 代码块相对定位，用于绝对定位的子元素 */
    position: relative; /* 相对定位 */
}

/* 复制按钮样式 */
.copy-btn { /* 代码块复制按钮 */
    position: absolute; /* 绝对定位 */
    top: 10px; /* 顶部距离 */
    right: 10px; /* 右侧距离 */
    padding: 6px 12px; /* 内边距 */
    background-color: var(--primary); /* 主题红色背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    border-radius: 4px; /* 圆角 */
    cursor: pointer; /* 指针光标 */
    font-size: 12px; /* 字体大小 */
    font-weight: 500; /* 中等粗细 */
    transition: var(--transition); /* 过渡动画 */
    z-index: 10; /* 层级 */
}

.copy-btn:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
}

.copy-btn:active {
    transform: translateY(0);
}

.copy-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(203, 57, 49, 0.25);
}

.content-area {
    flex-grow: 1;
    padding: 2rem;
    background: #f8fafc;
    overflow: auto;
}

/* 容器 */
.content-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* 表单容器 */
.form-container {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 2rem;
    box-sizing: border-box;
}

.request_table {
    width: 100%;
    border-collapse: collapse;
}

.request_table tr {
    border-bottom: 1px solid #eee;
}

.request_table td {
    padding: 1rem;
    vertical-align: middle;
}

.request_table td:first-child {
    width: 35%;
    font-weight: 500;
    color: #4a5568;
    white-space: nowrap;
}

/* 响应式设计 */
@media (max-width: 992px) {
    .form-section {
        min-width: unset;
        max-width: 100%;
    }

    .form-container,
    .result-section-container {
        max-width: 100%;
    }
}

/*
 * Form Input Control Styles
 * 表单输入控件样式，包括文本框、文本域和下拉框
 * 提供统一的外观和交互体验
 */
/* 输入控件样式 */
.input_text, textarea, select { /* 输入控件基本样式 */
    width: 100%; /* 全宽 */
    padding: 0.8rem 1rem; /* 内边距 */
    border: 2px solid #e2e8f0; /* 浅灰色边框 */
    border-radius: 6px; /* 圆角 */
    transition: all 0.3s ease; /* 过渡动画 */
    font-size: 1rem; /* 字体大小 */
    background-color: white; /* 白色背景 */
    color: #333; /* 深灰色文字 */
    box-sizing: border-box; /* 盒模型 */
    max-width: 100%; /* 确保输入框不会超出容器 */
}

.input_text:focus, textarea:focus, select:focus { /* 输入控件焦点状态 */
    border-color: #cb3931; /* 主题红色边框 */
    box-shadow: 0 0 0 3px rgba(203, 57, 49, 0.2); /* 红色阴影 */
    outline: none; /* 无轮廓 */
}

/* 专门为下拉框设置样式 */
select { /* 下拉框样式 */
    -webkit-appearance: none; /* 移除Webkit默认样式 */
    -moz-appearance: none; /* 移除Mozilla默认样式 */
    appearance: none; /* 移除默认样式 */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); /* 自定义箭头 */
    background-repeat: no-repeat; /* 不重复背景 */
    background-position: right 1.5rem center; /* 调整箭头位置，距离右边更远 */
    background-size: 1rem; /* 背景大小 */
    padding-right: 3rem; /* 增加右内边距，为箭头留出更多空间 */
}

select:focus { /* 下拉框焦点状态 */
    border-color: #cb3931; /* 主题红色边框 */
    box-shadow: 0 0 0 3px rgba(203, 57, 49, 0.2); /* 红色阴影 */
    outline: none; /* 无轮廓 */
}

/* 必填项标识 */
font[color="red"] { /* 必填项红色标识 */
    color: #cb3931 !important; /* 主题红色 */
    margin-left: 4px; /* 左边距 */
}

/*
 * Button Group and Container Styles
 * 按钮组和容器样式，用于表单按钮布局
 * 包括按钮组、提交按钮等
 */
/* 按钮组 */
.button-group { /* 按钮组容器 */
    display: flex; /* 弹性布局 */
    gap: 10px; /* 按钮间距 */
    flex-wrap: wrap; /* 允许换行 */
}

/* 提交按钮 */
.btn-container { /* 按钮容器 */
    text-align: center; /* 居中对齐 */
    margin-top: 2rem; /* 顶部边距 */
}

input[type="submit"] { /* 提交按钮样式 */
    background: linear-gradient(45deg, #cb3931, #cb372b); /* 红色渐变背景 */
    color: white; /* 白色文字 */
    padding: 1.1rem 2.5rem; /* 内边距 */
    border: none; /* 无边框 */
    border-radius: 50px; /* 椭圆形圆角 */
    cursor: pointer; /* 指针光标 */
    font-size: 1.15rem; /* 字体大小 */
    transition: all 0.3s ease; /* 过渡动画 */
    box-shadow: 0 5px 18px rgba(219, 52, 52, 0.35); /* 阴影 */
    font-weight: 600; /* 粗体 */
    letter-spacing: 0.5px; /* 字间距 */
    min-width: 80px; /* 最小宽度 */
}

input[type="submit"]:hover { /* 提交按钮悬停效果 */
    transform: translateY(-3px); /* 向上移动 */
    box-shadow: 0 8px 22px rgba(219, 52, 52, 0.45); /* 更强阴影 */
    background: linear-gradient(45deg, #cb372b, #cb3931); /* 反向渐变 */
}

/* 为input[type="button"]添加相同样式 */
input[type="button"] { /* 普通按钮样式，与提交按钮保持一致 */
    background: linear-gradient(45deg, #cb3931, #cb372b); /* 红色渐变背景 */
    color: white; /* 白色文字 */
    padding: 1.1rem 2.5rem; /* 内边距 */
    border: none; /* 无边框 */
    border-radius: 50px; /* 椭圆形圆角 */
    cursor: pointer; /* 指针光标 */
    font-size: 1.15rem; /* 字体大小 */
    transition: all 0.3s ease; /* 过渡动画 */
    box-shadow: 0 5px 18px rgba(219, 52, 52, 0.35); /* 阴影 */
    font-weight: 600; /* 粗体 */
    letter-spacing: 0.5px; /* 字间距 */
    min-width: 80px; /* 最小宽度 */
    margin-right: 10px; /* 添加右边距，与提交按钮间隔 */
}

input[type="button"]:hover { /* 普通按钮悬停效果 */
    transform: translateY(-3px); /* 向上移动 */
    box-shadow: 0 8px 22px rgba(219, 52, 52, 0.45); /* 更强阴影 */
    background: linear-gradient(45deg, #cb372b, #cb3931); /* 反向渐变 */
}

/*
 * Form Content Layout Styles
 * 表单内容布局样式，用于组织表单和结果区域
 * 包括内容包装器、表单区域和结果区域
 */
/* B2B自动出票内容包装 */
.content-wrapper { /* 内容包装器 */
    display: flex; /* 弹性布局 */
    gap: 20px; /* 元素间距 */
    margin: 20px 0; /* 上下边距 */
    align-items: stretch; /* 拉伸对齐 */
}

.form-section { /* 表单区域 */
    flex: 1; /* 占据可用空间 */
    min-width: 400px; /* 最小宽度 */
    display: flex;
    flex-direction: column; /* 垂直布局 */
    overflow: hidden; /* 防止子元素超出边界 */
}

.form-container { /* 表单容器 */
    flex: 1; /* 占据可用空间 */
    display: flex;
    flex-direction: column; /* 垂直布局 */
    overflow: hidden; /* 防止子元素超出边界 */
}

/* 确保表单内部内容正确滚动 */
.input_cont { /* 输入内容容器 */
    flex: 1; /* 占据可用空间 */
    overflow-y: auto; /* 垂直滚动 */
    overflow-x: hidden; /* 隐藏水平滚动 */
}

.result-section-container { /* 结果区域容器 */
    flex: 1; /* 占据可用空间 */
    min-width: 400px; /* 最小宽度 */
    display: none; /* 默认隐藏 */
    overflow: hidden; /* 防止子元素超出边界 */
}

/* 响应式设计 */
@media (max-width: 992px) {
    .content-wrapper { /* 中屏适配 */
        flex-direction: column; /* 垂直布局 */
    }

    .form-section,
    .result-section-container { /* 中屏表单区域适配 */
        width: 100%; /* 全宽 */
        min-width: unset; /* 取消最小宽度限制 */
    }
}

/*
 * Code Block Container Styles
 * 代码块容器样式，用于展示代码和接口地址
 * 包括基础代码块和接口地址样式
 */
/* 代码块容器 */
.code-block { /* 代码块基本样式 */
    background: var(--code-bg); /* 淡红色背景 */
    color: var(--code-text); /* 深灰色文字 */
    padding: 1rem; /* 内边距 */
    border-radius: var(--border-radius); /* 圆角 */
    font-family: monospace; /* 等宽字体 */
    overflow-x: auto; /* 水平滚动 */
    margin: 1rem 0; /* 上下边距 */
    border: 1px solid var(--code-border); /* 红色边框 */
    position: relative; /* 相对定位 */
    min-height: 50px; /* 最小高度 */
    /* 移除垂直滚动，显示所有内容 */
    overflow-y: hidden; /* 隐藏垂直滚动 */
}

.code-block-container { /* 代码块容器包装 */
    position: relative; /* 相对定位 */
}

/* 专门针对接口地址的样式 */
.interface-address { /* 接口地址特殊样式 */
    background: var(--primary-very-light); /* 非常浅的红色背景 */
    color: var(--interface-address-text); /* 接口地址文字颜色 */
    font-weight: 500; /* 中等粗细 */
}

/* ==================== 自定义滚动条样式 ==================== */
.code-block::-webkit-scrollbar {
    height: 12px;
    background-color: var(--scrollbar-track);
}

.code-block::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.code-block::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-dark);
}

.code-block::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track);
    border-radius: 6px;
}

/* 火狐浏览器滚动条样式 */
.code-block {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ==========================================================================
 * Detailed Form Styles
 * 明细表单样式，用于展示和编辑详细数据
 * 包括表单网格、垂直布局和操作按钮
 * ========================================================================== */

.form-data-grid { /* 明细表单网格布局 */
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 两列等宽布局 */
    gap: 1rem; /* 网格间距 */
    width: 100%; /* 全宽 */
    max-width: 100%; /* 最大宽度 */
    box-sizing: border-box; /* 盒模型 */
}

.form-data-vertical { /* 明细表单垂直布局 */
    display: flex;
    flex-direction: column; /* 垂直方向 */
    gap: 1rem; /* 元素间距 */
    width: 100%; /* 全宽 */
    max-width: 100%; /* 最大宽度 */
    box-sizing: border-box; /* 盒模型 */
}

.form-data-item { /* 明细表单项 */
    display: flex;
    flex-direction: column; /* 垂直方向 */
    width: 100%; /* 全宽 */
    max-width: 100%; /* 最大宽度 */
    box-sizing: border-box; /* 盒模型 */
}

.form-data-item label { /* 明细表单项标签 */
    font-size: 0.9rem; /* 字体大小 */
    color: #718096; /* 浅灰色 */
    margin-bottom: 0.4rem; /* 下边距 */
}

.form-data-item input { /* 明细表单项输入框 */
    padding: 0.7rem; /* 内边距 */
    border: 1px solid #e2e8f0; /* 浅灰色边框 */
    border-radius: 6px; /* 圆角 */
    font-size: 0.95rem; /* 字体大小 */
    transition: all 0.2s ease; /* 过渡动画 */
    width: 100%; /* 全宽 */
    max-width: 100%; /* 最大宽度 */
    box-sizing: border-box; /* 盒模型 */
}

.form-data-item input:focus { /* 明细表单项输入框焦点状态 */
    border-color: #cb372b; /* 深红色边框 */
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); /* 阴影 */
}

/* 明细表单中的操作按钮样式 */
.action-btn { /* 操作按钮样式 */
    display: inline-flex; /* 行内弹性布局 */
    align-items: center; /* 垂直居中 */
    padding: 0.6rem 1.2rem; /* 内边距 */
    background: linear-gradient(45deg, var(--primary), var(--primary-dark)); /* 红色渐变背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    border-radius: 6px; /* 圆角 */
    cursor: pointer; /* 指针光标 */
    font-size: 0.9rem; /* 字体大小 */
    font-weight: 500; /* 中等粗细 */
    transition: var(--transition); /* 过渡动画 */
    box-shadow: 0 2px 6px rgba(203, 57, 49, 0.25); /* 阴影 */
    position: relative; /* 相对定位 */
    z-index: 10; /* 层级 */
    margin: 2px 0; /* 上下边距 */
    flex-shrink: 0; /* 不收缩 */
    box-sizing: border-box; /* 盒模型 */
}

.action-btn:hover { /* 操作按钮悬停效果 */
    transform: translateY(-2px); /* 向上移动 */
    box-shadow: 0 4px 10px rgba(203, 57, 49, 0.35); /* 更强阴影 */
    background: linear-gradient(45deg, var(--primary), var(--primary-dark)); /* 背景 */
}

.action-btn:active { /* 操作按钮激活状态 */
    transform: translateY(0); /* 恢复原位 */
    box-shadow: 0 1px 3px rgba(203, 57, 49, 0.25); /* 较弱阴影 */
}

.action-btn:focus { /* 操作按钮焦点状态 */
    outline: none; /* 无轮廓 */
    box-shadow: 0 0 0 3px rgba(203, 57, 49, 0.3); /* 焦点阴影 */
}

/* 特别针对添加按钮的样式 */
.add-btn { /* 添加按钮样式 */
    margin-top: 0.5rem; /* 顶部边距 */
    background: linear-gradient(45deg, var(--primary), var(--primary-dark)); /* 红色渐变背景 */
    box-shadow: 0 6px 20px rgba(203, 57, 49, 0.4); /* 强阴影 */
    z-index: 10; /* 层级 */
    flex-shrink: 0; /* 防止按钮在空间不足时被压缩 */
}

.add-btn:hover { /* 添加按钮悬停效果 */
    box-shadow: 0 6px 20px rgba(203, 57, 49, 0.4); /* 阴影 */
    background: linear-gradient(45deg, var(--primary), var(--primary-dark)); /* 背景 */
}

.add-btn:focus { /* 添加按钮焦点状态 */
    box-shadow: 0 6px 20px rgba(203, 57, 49, 0.4); /* 焦点阴影 */
}

/*
 * Scene Selection Styles
 * 场景选择样式，用于切换不同场景的界面
 * 包括场景选择区域和场景按钮
 */
.scene-selection { /* 场景选择区域 */
    margin-bottom: 20px; /* 底部边距 */
    padding: 15px; /* 内边距 */
    background-color: #f8f9fa; /* 浅灰色背景 */
    border-radius: 5px; /* 圆角 */
}

.scene-btn { /* 场景按钮样式 */
    padding: 8px 16px; /* 内边距 */
    margin-right: 10px; /* 右边距 */
    background-color: #e9ecef; /* 浅灰色背景 */
    border: 1px solid #ced4da; /* 浅灰色边框 */
    border-radius: 4px; /* 圆角 */
    cursor: pointer; /* 指针光标 */
    transition: all 0.3s; /* 过渡动画 */
}

.scene-btn.active { /* 激活状态的场景按钮 */
    background-color: #cb3931; /* 主题红色背景 */
    color: white; /* 白色文字 */
    border-color: #cb3931; /* 红色边框 */
}

.scene-btn:hover { /* 场景按钮悬停效果 */
    background-color: #dee2e6; /* 灰色背景 */
}

.scene-btn.active:hover { /* 激活状态场景按钮悬停效果 */
    background-color: #cb372b; /* 深红色背景 */
}

tr.hidden-scene { /* 隐藏的场景表格行 */
    display: none; /* 隐藏 */
}

/*
 * Response Value Styles
 * 响应值样式，用于展示API响应结果
 * 确保内容正确换行和显示
 */
.response-value { /* 响应值显示区域 */
    flex-grow: 1; /* 占据可用空间 */
    color: #2c3e50; /* 深灰色文字 */
    font-size: 1.1rem; /* 字体大小 */
    /* 确保内容可以换行 */
    word-wrap: break-word; /* 允许单词内换行 */
    overflow-wrap: break-word; /* 允许内容换行 */
}

/*
 * Card Link Styles
 * 卡片链接样式，用于将卡片内容变为链接
 * 确保链接内容正确显示和点击，同时隐藏字体的下划线
 */
.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.card-link:hover {
    text-decoration: none;
    color: inherit;
}