/* 
    本样式设计旨在为“智能投顾与量化交易”主题的网页提供现代、科技感十足的视觉效果。整体采用渐变色调，结合响应式网格布局，确保在各种设备上都能良好展示。以下是主要样式说明：
    
    1. 全局样式：
        - 使用Roboto无衬线字体，提升现代感和可读性。
        - 采用深紫色到亮蓝色的渐变背景，象征智能化与数据流动。
        - 所有链接添加rel="nofollow"属性，确保SEO优化。
        
    2. 布局设计：
        - 使用CSS Grid布局，确保内容区域在不同屏幕尺寸下自适应。
        - 固定导航栏位于左侧，内容区在右侧，布局简洁。
        
    3. 颜色搭配：
        - 主色调：#6A11CB到#2575FC的渐变色，占比70%。
        - 辅助色：#FFFFFF和#F1F1F1，占比25%。
        - 点缀色：#FF4081，用于重要按钮和链接，占比5%。
        
    4. 交互效果：
        - 按钮和卡片悬停时添加阴影和轻微放大效果，提升用户体验。
        - 使用CSS动画实现页面加载和滚动触发的动态效果。
        
    5. 图片样式：
        - 图片使用圆角和阴影效果，增加视觉层次感。
        - 悬停时图片轻微放大，增加互动性。
        
    6. 代码块样式：
        - 代码块使用深色背景和对比色字体，便于阅读。
        - 添加复制按钮，提升用户便利性。
        
    7. 导航系统：
        - 清晰的章节导航，帮助用户快速定位内容。
        - 使用固定导航栏，确保在滚动时始终可见。
        
    8. 响应式设计：
        - 确保在320px到1920px宽度范围内，无论是移动端还是桌面端都能良好展示。
        - 使用媒体查询调整布局和字体大小，保持良好的可读性和操作性。
        
    9. 其他细节：
        - 页面加载时的淡入动画，提升用户的第一印象。
        - 使用CSS变量统一管理颜色和字体，便于维护和修改。
*/

/* CSS变量定义 */
:root {
    --main-gradient: linear-gradient(135deg, #6A11CB, #2575FC);
    --secondary-color: #FFFFFF;
    --background-secondary: #F1F1F1;
    --accent-color: #FF4081;
    --font-family: 'Roboto', sans-serif;
    --font-size-base: 16px;
    --transition-speed: 0.3s;
}

/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    background: var(--main-gradient);
    color: var(--secondary-color);
    line-height: 1.6;
    overflow-x: hidden;
    animation: fadeIn 1s ease-in-out;
}

/* 页面加载动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 固定导航栏 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
}

.navbar a {
    color: var(--secondary-color);
    text-decoration: none;
    padding: 10px 0;
    transition: color var(--transition-speed);
}

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

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

/* 章节样式 */
.section {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.section:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
}

/* 标题样式 */
h1, h2, h3, h4 {
    color: var(--secondary-color);
    margin-bottom: 15px;
}

h1 {
    font-size: 2em;
    text-align: center;
    margin-bottom: 30px;
}

h2 {
    font-size: 1.8em;
}

h3 {
    font-size: 1.6em;
}

h4 {
    font-size: 1.4em;
}

/* 段落样式 */
p {
    margin-bottom: 15px;
    font-size: 1em;
}

/* 强调样式 */
mark {
    background: var(--accent-color);
    color: #000;
    padding: 2px 4px;
    border-radius: 3px;
}

/* 代码块样式 */
pre {
    background: rgba(0, 0, 0, 0.8);
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    margin-bottom: 20px;
}

code {
    color: #00FF00;
    font-family: 'Courier New', Courier, monospace;
}

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

.button:hover {
    background: var(--secondary-color);
    color: var(--background-secondary);
    transform: scale(1.05);
}

/* 图片样式 */
img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

img:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* 导航高亮 */
.navbar a.active {
    color: var(--accent-color);
    font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .navbar {
        width: 200px;
    }
    .container {
        margin-left: 220px;
    }
}

@media (max-width: 768px) {
    .navbar {
        position: relative;
        width: 100%;
        height: auto;
        flex-direction: row;
        overflow: hidden;
    }
    .navbar a {
        padding: 10px;
    }
    .container {
        margin-left: 0;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.5em;
    }
    h2 {
        font-size: 1.4em;
    }
    .button {
        padding: 8px 16px;
        font-size: 0.9em;
    }
}