/* 全局样式设置 */
body {
    /* 设置页面的背景色为深蓝色，传达科技感和专业性 */
    background-color: #0d47a1;
    /* 设置字体颜色为白色，确保在深色背景上的可读性 */
    color: #ffffff;
    /* 设定全局字体为 'Open Sans'，无衬线字体，增强现代感和可读性 */
    font-family: 'Open Sans', sans-serif;
    /* 设置页面的基本边距和内边距，确保内容不紧贴边缘 */
    margin: 0;
    padding: 0;
}

/* 标题样式 */
h2, h3, h4 {
    /* 使用 'Roboto' 字体，增强标题的清晰度和现代感 */
    font-family: 'Roboto', sans-serif;
    /* 设置标题颜色为白色，确保在深色背景上的可读性 */
    color: #ffffff;
}

/* 段落样式 */
p {
    /* 设置正文字体大小为16px，确保良好的阅读体验 */
    font-size: 16px;
    /* 设置行高为1.6，提升文本的可读性 */
    line-height: 1.6;
    /* 使用灰色字体颜色，减轻视觉压力 */
    color: #e0e0e0;
    /* 设置段落的下边距，增加内容间的空白，符合呼吸感原则 */
    margin-bottom: 20px;
}

/* 链接样式 */
a {
    /* 链接默认颜色为亮橙色，突出显示 */
    color: #ff9800;
    /* 移除链接下划线 */
    text-decoration: none;
    /* 设置过渡效果，增加交互感 */
    transition: color 0.3s ease;
}

/* 链接悬停效果 */
a:hover {
    /* 悬停时链接颜色变为亮绿色，吸引用户注意 */
    color: #4caf50;
}

/* 容器类，使用12列网格系统 */
.container {
    /* 使用CSS Grid布局，设置12列 */
    display: grid;
    grid-template-columns: none;
    /* 设置列间距 */
    gap: 20px;
    /* 设置页面内边距 */
    padding: 20px;
}

/* 栅格列跨度设置 */
.column-3 {
    grid-column: span 3;
}

.column-6 {
    grid-column: span 6;
}

.column-12 {
    grid-column: span 12;
}

/* 功能模块样式 */
.features {
    /* 使用网格布局，分为3列 */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 设置模块间距 */
    gap: 30px;
    /* 设置上外边距和下外边距 */
    margin: 40px 0;
}

/* 功能卡片样式 */
.feature-card {
    /* 设置卡片背景色为中性色灰色 */
    background-color: #424242;
    /* 设置内边距 */
    padding: 20px;
    /* 设置边角圆润 */
    border-radius: 10px;
    /* 设置过渡效果，用于悬停时的动画 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 功能卡片悬停效果 */
.feature-card:hover {
    /* 悬停时卡片向上移动 */
    transform: translateY(-10px);
    /* 添加阴影效果 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* 仪表盘卡片样式 */
.dashboard-card {
    /* 设置背景色为中性色 */
    background-color: #424242;
    /* 设置内边距 */
    padding: 15px;
    /* 设置边角圆润 */
    border-radius: 8px;
    /* 设置鼠标光标为移动 */
    cursor: move;
    /* 设置过渡效果 */
    transition: background-color 0.3s ease;
}

/* 仪表盘卡片悬停效果 */
.dashboard-card:hover {
    /* 悬停时背景色加深 */
    background-color: #616161;
}

/* 全屏动态背景样式 */
.hero {
    /* 相对定位 */
    position: relative;
    /* 宽度100% */
    width: 100%;
    /* 高度为视口高度100% */
    height: 100vh;
    /* 设置背景为线性渐变 */
    background: linear-gradient(135deg, #0d47a1, #424242);
    /* 应用动画使渐变动起来 */
    animation: gradientMove 15s ease infinite;
}

/* 动画关键帧定义 */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 数据图表样式 */
.chart {
    /* 相对定位 */
    position: relative;
    /* 宽度100% */
    width: 100%;
    /* 高度300px */
    height: 300px;
    /* 背景色为主色调 */
    background-color: #0d47a1;
    /* 边角圆润 */
    border-radius: 10px;
    /* 隐藏溢出内容 */
    overflow: hidden;
}

/* 工具提示样式 */
.tooltip {
    /* 绝对定位 */
    position: absolute;
    /* 底部偏移10px */
    bottom: 10px;
    /* 左侧50% */
    left: 50%;
    /* 横向居中 */
    transform: translateX(-50%);
    /* 背景色为高亮色 */
    background-color: #4caf50;
    /* 内边距 */
    padding: 5px 10px;
    /* 边角圆润 */
    border-radius: 5px;
    /* 初始透明度为0 */
    opacity: 0;
    /* 初始状态为不可见 */
    visibility: hidden;
    /* 过渡效果 */
    transition: opacity 0.3s ease;
}

/* 鼠标悬停时显示工具提示 */
.chart:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

/* 按钮样式 */
.button {
    /* 背景色为点缀色 */
    background-color: #ff9800;
    /* 字体颜色为白色 */
    color: #ffffff;
    /* 内边距 */
    padding: 10px 20px;
    /* 无边框 */
    border: none;
    /* 边角圆润 */
    border-radius: 5px;
    /* 使用 'Roboto' 字体 */
    font-family: 'Roboto', sans-serif;
    /* 鼠标光标为指针 */
    cursor: pointer;
    /* 过渡效果 */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* 按钮悬停效果 */
.button:hover {
    /* 悬停时背景色变为高亮色 */
    background-color: #4caf50;
    /* 悬停时按钮略微放大 */
    transform: scale(1.05);
}

/* 拖拽时的反馈效果 */
.dashboard-card:active {
    /* 活动时透明度减小 */
    opacity: 0.8;
    /* 活动时略微缩小 */
    transform: scale(0.98);
}

/* 底部导航样式 */
.footer {
    /* 背景色为中性色 */
    background-color: #424242;
    /* 内边距 */
    padding: 40px 20px;
    /* 使用Flexbox布局 */
    display: flex;
    /* 主轴两端对齐 */
    justify-content: space-between;
    /* 自动换行 */
    flex-wrap: wrap;
}

/* 底部导航部分样式 */
.footer-section {
    /* 弹性成长和收缩 */
    flex: 1 1 200px;
    /* 外边距 */
    margin: 10px;
}

/* 底部导航标题样式 */
.footer-section h3 {
    /* 使用 'Roboto' 字体 */
    font-family: 'Roboto', sans-serif;
    /* 下边距 */
    margin-bottom: 15px;
}

/* 底部导航链接样式 */
.footer-link {
    /* 字体颜色为白色 */
    color: #ffffff;
    /* 无下划线 */
    text-decoration: none;
    /* 设置为块级元素 */
    display: block;
    /* 下边距 */
    margin-bottom: 10px;
    /* 过渡效果 */
    transition: color 0.3s ease;
}

/* 底部导航链接悬停效果 */
.footer-link:hover {
    /* 悬停时颜色变为点缀色 */
    color: #ff9800;
}

/* 响应式设计：大屏幕 */
@media (min-width: 1200px) {
    .features {
        grid-template-columns: repeat(3, 1fr);
    }
    .dashboard-card {
        flex: 1 1 calc(33.333% - 20px);
    }
}

/* 响应式设计：中等屏幕 */
@media (max-width: 1200px) and (min-width: 768px) {
    .features {
        grid-template-columns: repeat(2, 1fr);
    }
    .dashboard-card {
        flex: 1 1 calc(50% - 20px);
    }
}

/* 响应式设计：小屏幕 */
@media (max-width: 768px) {
    .features {
        grid-template-columns: 1fr;
    }
    .dashboard-card {
        flex: 1 1 100%;
    }
    .footer {
        flex-direction: column;
        align-items: center;
    }
}

/* 图片样式 */
img {
    /* 设置图片圆角 */
    border-radius: 10px;
    /* 添加阴影效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* 设置响应式宽度 */
    width: 100%;
    /* 设置过渡效果 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 图片悬停效果 */
img:hover {
    /* 悬停时图片放大 */
    transform: scale(1.05);
    /* 悬停时阴影加深 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* 导航栏样式 */
.navbar {
    /* 固定在顶部 */
    position: fixed;
    top: 0;
    left: 0;
    /* 宽度100% */
    width: 100%;
    /* 背景色为深蓝色 */
    background-color: #0d47a1;
    /* 使用Flexbox布局 */
    display: flex;
    /* 主轴对齐方式 */
    justify-content: space-between;
    /* 垂直对齐 */
    align-items: center;
    /* 内边距 */
    padding: 10px 20px;
    /* 设置高层级，确保在最上层 */
    z-index: 1000;
}

/* 导航栏链接样式 */
.navbar a {
    /* 字体颜色为白色 */
    color: #ffffff;
    /* 无下划线 */
    text-decoration: none;
    /* 设置字体大小 */
    font-size: 16px;
    /* 设置过渡效果 */
    transition: color 0.3s ease;
    /* 设置右边距 */
    margin-left: 20px;
}

/* 导航栏链接悬停效果 */
.navbar a:hover {
    /* 悬停时颜色变为亮橙色 */
    color: #ff9800;
}

/* 移动设备导航菜单（汉堡菜单） */
.mobile-nav {
    /* 在小屏幕隐藏 */
    display: none;
}

/* 移动设备导航链接显示 */
@media (max-width: 768px) {
    .navbar a {
        /* 隐藏导航链接 */
        display: none;
    }
    .mobile-nav {
        /* 显示汉堡菜单图标 */
        display: block;
        /* 设置光标为指针 */
        cursor: pointer;
    }
}