/* 
    页面整体样式设计
    1. 设置页面背景为渐变极光效果，使用CSS3的线性渐变和动画实现动态效果。
    2. 导航栏采用固定定位，半透明背景，并使用Flex布局进行内容对齐。
    3. 采用响应式网格布局，确保在不同屏幕尺寸下内容有序排列。
    4. 卡片式布局用于展示主要内容模块，添加悬停效果以增强交互性。
    5. 使用媒体查询实现移动端优化，调整布局以适应较小屏幕。
    6. 按钮和链接添加渐变和缩放动画，提升用户点击体验。
    7. 图片样式包括圆角、阴影和悬浮效果，增强视觉层次感。
    8. 代码块样式独立于正文内容，使用专属背景和字体样式。
    9. 章节导航系统采用固定侧边栏，提供快速跳转功能。
    10. 使用谷歌字体Roboto，确保字体显示清晰现代。
    11. 通过过渡效果实现内容的平滑呈现，避免突兀变化。
    12. 表格样式简洁，强化信息展示的可读性。
    13. 使用CSS变量管理颜色，便于主题调整和维护。
    14. 优化加载性能，减少不必要的CSS复杂度。
    15. 确保所有内部链接包含rel="nofollow"属性。
*/

/* CSS变量定义 */
:root {
    --main-gradient: linear-gradient(135deg, #32CD32, #8A2BE2, #00008B);
    --secondary-color: rgba(255, 255, 255, 0.1);
    --accent-color: #32CD32;
    --text-color: #ffffff;
    --background-color: #1a1a1a;
    --font-family: 'Roboto', sans-serif;
    --transition-speed: 0.3s;
}

/* 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 页面背景极光效果 */
body {
    font-family: var(--font-family);
    color: var(--text-color);
    background: var(--main-gradient);
    background-size: 400% 400%;
    animation: gradientAnimation 30s ease infinite;
    line-height: 1.6;
    padding-top: 60px; /* 为固定导航栏留出空间 */
}

/* 渐变动画 */
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 导航栏样式 */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 15px 0;
    z-index: 1000;
}

.navbar a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 16px;
    transition: color var(--transition-speed);
}

.navbar a:hover {
    color: var(--accent-color);
}

/* 主要内容容器 */
.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* 卡片样式 */
.card {
    background: var(--secondary-color);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-speed), background var(--transition-speed);
}

.card:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.2);
}

/* 图片样式 */
.card img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.card img:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
}

/* 按钮样式 */
.button {
    background: var(--accent-color);
    border: none;
    padding: 10px 20px;
    color: var(--text-color);
    cursor: pointer;
    border-radius: 5px;
    transition: background var(--transition-speed), transform var(--transition-speed);
}

.button:hover {
    background: #8A2BE2;
    transform: scale(1.05);
}

/* 代码块样式 */
code {
    display: block;
    background: rgba(0, 0, 0, 0.7);
    padding: 15px;
    border-radius: 5px;
    font-family: 'Courier New', Courier, monospace;
    color: #00ff00;
    overflow-x: auto;
    margin: 20px 0;
}

/* 表格样式 */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

table, th, td {
    border: 1px solid #ffffff;
}

th, td {
    padding: 10px;
    text-align: left;
}

th {
    background: rgba(50, 205, 50, 0.7);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
    }

    .container {
        grid-template-columns: 1fr;
    }

    .navbar a {
        padding: 10px 0;
    }
}

/* 章节导航栏 */
.sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    width: 200px;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    height: calc(100% - 60px);
    overflow-y: auto;
}

.sidebar a {
    display: block;
    color: var(--text-color);
    text-decoration: none;
    margin: 10px 0;
    transition: color var(--transition-speed);
}

.sidebar a:hover {
    color: var(--accent-color);
}

/* 主内容区调整 */
.main-content {
    margin-left: 220px;
}

/* 折叠区域样式 */
.collapsible {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    transition: background var(--transition-speed);
}

.active, .collapsible:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.content {
    padding: 0 15px;
    display: none;
    background-color: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: max-height var(--transition-speed);
}

/* 表单元素隐藏 */
input, textarea {
    display: none;
}

/* 高亮样式 */
.highlight {
    background: rgba(50, 205, 50, 0.3);
    padding: 2px 4px;
    border-radius: 3px;
}

/* 数据可视化图表样式 */
.chart {
    width: 100%;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* 动画效果 */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 表单按钮样式 */
.form-button {
    background: linear-gradient(45deg, #32CD32, #8A2BE2);
    border: none;
    padding: 10px 20px;
    color: #ffffff;
    cursor: pointer;
    border-radius: 5px;
    transition: background var(--transition-speed), transform var(--transition-speed);
}

.form-button:hover {
    background: linear-gradient(45deg, #8A2BE2, #32CD32);
    transform: scale(1.05);
}