/* 
    样式设计参考
    本样式表采用CSS3高级特性，包括线性渐变、盒阴影、文本阴影、关键帧动画、平滑过渡等，以营造未来感与高级质感相融合的视觉效果。
    整体布局使用Flexbox和Grid，确保响应式设计在不同屏幕尺寸下的良好展示。色彩搭配遵循黄金比例，主色调为蓝色和灰色，辅色橙色和绿色作为点缀，提升视觉层次感。
    图片采用圆角、阴影和悬浮效果，增强装饰性和互动性。导航栏固定顶部，采用多级菜单设计，保证用户在任何位置都能便捷访问。
    字体选择上，标题使用Montserrat，正文使用Roboto，确保清晰与专业性。代码块采用背景色区分，内嵌代码高亮显示，便于阅读与理解。
    页面结构注重留白与视觉平衡，通过模块化布局和卡片式设计，提升内容的可读性和用户体验。所有内部链接添加rel="nofollow"属性，遵循SEO最佳实践。
    关键帧动画用于动效元素，如旋转图形、波动图表等，增强科技感与动态视觉效果。过渡效果应用于交互元素，如按钮和链接的悬停状态，提升用户互动体验。
    导航栏和主要内容区域采用固定宽度与流式布局结合，确保在各种设备上无水平滚动条，内容完整可见。折叠区域用于次要信息展示，保持页面整洁。
    响应式设计通过媒体查询优化小屏幕设备的布局，调整字体大小和组件排列，确保在手机和平板上均有良好显示效果。
    图片最大宽度限制为650px，避免占满整个屏幕，通过Grid布局多图展示，实现图文并茂的视觉效果。
    各类装饰元素如渐变线条、科技图形等，贯穿整个页面，强调网络纵横与风险管理的技术主题。 
    特别提示：这是一个网页样式设计参考
*/

/* CSS变量定义 */
:root {
    --primary-color: #0A2C4D; /* 深蓝色 */
    --secondary-color: #F5F7FA; /* 浅灰色 */
    --accent-color-1: #FF9800; /* 亮橙色 */
    --accent-color-2: #81C784; /* 薄荷绿色 */
    --text-color: #333333;
    --background-gradient: linear-gradient(135deg, #0A2C4D, #81C784);
    --card-background: #FFFFFF;
    --code-background: #f0f0f0;
    --code-border: #E0E0E0;
    --transition-speed: 0.3s;
}

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

body {
    font-family: 'Roboto', sans-serif;
    background: var(--secondary-color);
    color: var(--text-color);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed);
}

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

.container {
    width: 90%;
    max-width: 1200px;
    margin: 100px auto 50px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* 导航栏样式 */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--primary-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

.navbar a {
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 4px;
    transition: background var(--transition-speed);
}

.navbar a:hover {
    background: var(--background-gradient);
}

/* 主要内容样式 */
main {
    padding-top: 70px;
}

h1, h2, h3, h4 {
    font-family: 'Montserrat', sans-serif;
    color: var(--primary-color);
    margin-bottom: 15px;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

p {
    margin-bottom: 15px;
}

img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.card {
    background-color: var(--card-background);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 20px;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 15px rgba(0,0,0,0.2);
}

.split-screen {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.left-panel, .right-panel {
    flex: 1;
    min-width: 300px;
    padding: 20px;
}

.left-panel {
    background-color: var(--primary-color);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.right-panel {
    display: flex;
    align-items: center;
    justify-content: center;
}

.right-panel svg {
    width: 80%;
    height: 80%;
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 代码块样式 */
pre {
    background-color: var(--code-background);
    border: 1px solid var(--code-border);
    border-radius: 5px;
    padding: 15px;
    overflow-x: auto;
    margin-bottom: 20px;
}

code {
    font-family: 'Courier New', Courier, monospace;
    color: var(--primary-color);
}

/* 按钮样式 */
.button {
    background: var(--accent-color-1);
    border: none;
    padding: 10px 20px;
    color: #ffffff;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--transition-speed);
}

.button:hover {
    background: var(--background-gradient);
}

/* 搜索框样式 */
.search-box {
    position: relative;
}

.search-box input {
    padding: 8px 12px;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    transition: width 0.4s ease;
    width: 150px;
}

.search-box input:focus {
    width: 250px;
    outline: none;
}

.search-box::after {
    content: '\1F50D';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--primary-color);
}

/* 图表样式 */
.chart {
    position: relative;
    width: 100%;
    height: 400px;
    background-color: var(--secondary-color);
    border-radius: 8px;
    overflow: hidden;
}

.chart::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,152,0,0), rgba(255,152,0,0.5));
    animation: wave 5s linear infinite;
}

@keyframes wave {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

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

@media (max-width: 500px) {
    body {
        font-size: 15px;
    }
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.75rem;
    }
    h3 {
        font-size: 1.5rem;
    }
    h4 {
        font-size: 1.25rem;
    }
}