/* 
    本样式旨在打造一个融合赛博朋克视觉元素与智能投顾、量化交易功能的网页。整体采用深色调为主色，搭配霓虹蓝、紫色和粉色作为辅助色，增强未来感与科技感。利用CSS3的高级特性，如线性渐变、盒阴影、文本阴影、关键帧动画和平滑过渡，营造出动态且富有层次感的视觉效果。
    
    页面布局采用现代的Flexbox和Grid布局系统，确保在不同设备和屏幕宽度下均有良好的响应式表现。采用模块化设计，将内容分为多个独立的区块，便于信息的有序展示与用户的快速浏览。导航栏固定于顶部，便于用户在浏览过程中随时访问不同模块；侧边导航栏则在内容较多的页面中提供便捷的跳转路径。
    
    字体选择方面，使用了具有科技感的无衬线字体，确保文本的清晰度与易读性。所有按钮与交互元素都设计有悬停发光效果，通过盒阴影和文本阴影的应用，使得界面更加生动与富有动感。页面背景采用动态渐变效果，通过关键帧动画实现颜色的缓慢变化，增强页面的互动性与视觉吸引力。
    
    图像展示方面，所有装饰性图片均设置为圆角、添加阴影效果，并在悬停时呈现轻微的放大与发光效果，提升整体美观度与用户互动体验。通过合理的留白与元素对齐，确保页面内容的整洁与有序，避免视觉上的拥挤与混乱。
    
    导航系统设计为清晰的章节导航，采用有意义的标题与引导文字，帮助用户快速定位到指定内容区域。所有内部链接均添加了rel="nofollow"属性，确保搜索引擎优化与页面的安全性。页面中还集成了代码示例部分，以代码块的形式呈现，并通过独特的样式与正文内容区分，方便用户查阅与学习。
    
    为了提升用户体验，页面设计注重细节表现，如平滑的过渡效果、灵活的布局调整以及实时的数据展示。通过CSS3的动态效果与精致的视觉设计，确保网站在美观与实用性之间取得完美平衡，提供卓越的用户体验与持续的视觉吸引力。
    
    总结而言，本样式设计通过融合赛博朋克风格的视觉元素与智能投顾、量化交易的功能需求，打造了一个独具科技感与未来感的网页。通过响应式设计与动态交互效果，确保在各种设备与屏幕尺寸下都有出色的表现，同时提供清晰的章节导航与丰富的内容展示，满足科技爱好者、年轻投资者及金融科技从业者的多样化需求。
    
    具体样式包括：
    1. 动态渐变背景，增强页面的动态感与未来感。
    2. 霓虹按钮与悬停发光效果，提升互动体验。
    3. 灵活的网格布局，确保内容的有序排列与响应式表现。
    4. 扁平化图标与科技感字体，统一视觉风格。
    5. 代码示例部分的专属样式，便于查阅与学习。
    6. 圆角、阴影与悬停效果的图像展示，提升整体美观度。
    7. 清晰的章节导航系统，帮助用户快速定位内容。
    8. 保证页面在320px至1920px范围内的良好适配，避免水平滚动条与布局错乱。
    
    通过以上设计与实现，确保网页不仅具备独特的视觉冲击力，还能提供高效、便捷的用户体验，满足现代用户对金融科技平台的需求。
*/
body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background: #121212;
    color: #ffffff;
}

/* 导航栏样式 */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(18, 18, 18, 0.9);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    border-bottom: 2px solid #ff0080;
}

.navbar a {
    color: #fff;
    margin: 0 15px;
    text-decoration: none;
    font-size: 1em;
    position: relative;
}

.navbar a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #ff0080;
    transition: width 0.3s;
    position: absolute;
    bottom: -5px;
    left: 0;
}

.navbar a:hover::after {
    width: 100%;
}

/* 侧边导航栏样式 */
.sidebar-nav {
    position: fixed;
    left: 0;
    top: 60px;
    width: 200px;
    height: calc(100% - 60px);
    background: #1f1f1f;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
}

.sidebar-nav li {
    margin: 20px 0;
}

.sidebar-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 1em;
    display: block;
    transition: color 0.3s ease;
}

.sidebar-nav a:hover {
    color: #ff0080;
}

/* 主内容区布局 */
.main-content {
    margin-left: 220px;
    padding: 80px 30px 30px 30px;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
}

@media (min-width: 768px) {
    .main-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .main-content {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 页面标题样式 */
h2, h3, h4 {
    color: #ff0080;
    text-shadow: 2px 2px 5px rgba(255, 0, 128, 0.7);
}

h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

h3 {
    font-size: 1.8em;
    margin-bottom: 15px;
}

h4 {
    font-size: 1.6em;
    margin-bottom: 10px;
}

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

/* 代码块样式 */
code {
    background: #1e1e1e;
    padding: 5px 10px;
    border-radius: 5px;
    color: #00ffea;
    font-family: 'Courier New', Courier, monospace;
}

pre {
    background: #1e1e1e;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
    color: #00ffea;
}

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

th, td {
    border: 1px solid #ff0080;
    padding: 10px;
    text-align: left;
}

th {
    background: #2c5364;
}

td {
    background: #1f1f1f;
}

/* 按钮样式 */
button, .neon-button {
    background: #ff0080;
    border: none;
    padding: 15px 30px;
    color: #fff;
    font-size: 1.2em;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(255, 0, 128, 0.7), 0 0 40px rgba(255, 0, 128, 0.5);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

button:hover, .neon-button:hover {
    box-shadow: 0 0 30px rgba(255, 0, 128, 1), 0 0 60px rgba(255, 0, 128, 0.8);
    transform: scale(1.05);
}

/* 图标样式 */
.icon {
    width: 50px;
    height: 50px;
    background: #2c5364;
    mask: url('icon.svg') no-repeat center;
    mask-size: contain;
    transition: background 0.3s ease, transform 0.3s ease;
}

.icon:hover {
    background: #ff0080;
    transform: scale(1.1);
}

/* 图像样式 */
img.decorative {
    width: 100%;
    max-width: 320px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(44, 83, 100, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

img.decorative:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 0, 128, 0.7);
}

/* 动态背景 */
.dynamic-background {
    background: linear-gradient(270deg, #0f2027, #2c5364, #203a43, #0f2027);
    background-size: 800% 800%;
    animation: gradientAnimation 15s ease infinite;
}

@keyframes gradientAnimation {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

/* 悬停发光效果 */
.neon-link {
    color: #ff0080;
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

.neon-link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #ff0080;
    transition: width 0.3s;
    position: absolute;
    bottom: -5px;
    left: 0;
}

.neon-link:hover::after {
    width: 100%;
}

/* 折叠区域样式 */
.collapsible {
    background-color: #1f1f1f;
    color: #fff;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.collapsible:hover {
    background-color: #2c5364;
}

.content {
    padding: 0 15px;
    display: none;
    overflow: hidden;
    background-color: #1e1e1e;
}

.collapsible.active + .content {
    display: block;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .sidebar-nav {
        display: none;
    }
    .main-content {
        margin: 60px 15px 15px 15px;
    }
}

/* 章节导航样式 */
.chapter-nav {
    position: fixed;
    right: 20px;
    top: 100px;
    background: rgba(31, 31, 31, 0.8);
    padding: 10px;
    border-radius: 5px;
}

.chapter-nav a {
    display: block;
    color: #ff0080;
    text-decoration: none;
    margin: 5px 0;
    font-size: 0.9em;
    transition: color 0.3s ease;
}

.chapter-nav a:hover {
    color: #ffffff;
}

/* 提示信息样式 */
.alert {
    background: #2c5364;
    color: #ff0080;
    padding: 20px;
    border-left: 5px solid #ff0080;
    margin-bottom: 20px;
    font-size: 1.1em;
}