/* 引入Roboto字体 */
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

    /* 全局样式 */
    body {
        margin: 0;
        font-family: 'Roboto', sans-serif;
        background-color: #1e272e; /* 深蓝色背景 */
        color: #ffffff; /* 白色文字 */
        overflow-x: hidden; /* 避免水平滚动条 */
    }

    a {
        color: #ff9f43; /* 橙色链接 */
        text-decoration: none;
    }

    a:hover {
        color: #ffc085; /* 浅橙色悬停效果 */
    }

    /* 顶部导航栏 */
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #0f3460; /* 深蓝色 */
        padding: 20px;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 1000;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .navbar .logo {
        font-size: 24px;
        font-weight: 700;
    }

    .navbar .nav-links {
        display: flex;
        gap: 20px;
    }

    .navbar .nav-links button {
        background: none;
        border: none;
        color: #ffffff;
        font-size: 16px;
        cursor: pointer;
        padding: 10px 15px;
        transition: background-color 0.3s;
    }

    .navbar .nav-links button:hover, .navbar .nav-links button.active {
        background-color: #16213e; /* 悬停和激活状态背景色 */
        border-radius: 5px;
    }

    /* 主内容区域 */
    .content {
        padding: 100px 20px 20px 20px; /* 顶部留出导航栏空间 */
        max-width: 1200px;
        margin: 0 auto;
    }

    /* 选项卡内容 */
    .tab-content {
        display: none;
        animation: fadeIn 0.5s;
    }

    .tab-content.active {
        display: block;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* 模块化布局 */
    .module {
        background-color: #273c75;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .module:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 10px rgba(0,0,0,0.15);
    }

    /* 卡片式布局 */
    .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
    }

    .card {
        background-color: #40739e;
        padding: 15px;
        border-radius: 8px;
        text-align: center;
        transition: background-color 0.3s;
    }

    .card img {
        max-width: 100%;
        border-radius: 5px;
    }

    .card:hover {
        background-color: #7289da;
    }

    /* 按钮样式 */
    .btn-primary {
        background-color: #ff9f43;
        color: #000000;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
        font-size: 16px;
    }

    .btn-primary:hover {
        background-color: #ffc085;
    }

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

        .navbar .nav-links {
            flex-direction: column;
            width: 100%;
        }

        .navbar .nav-links button {
            width: 100%;
            text-align: left;
        }

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

    /* 提示信息 */
    .prompt {
        text-align: center;
        padding: 10px;
        background-color: #0f3460;
        color: #ffffff;
        position: fixed;
        bottom: 0;
        width: 100%;
        font-size: 14px;
    }

    /* 样本数据展示 */
    .sample-data {
        background-color: #2f3640;
        padding: 20px;
        border-radius: 10px;
        margin-top: 40px;
    }

    .sample-data h2 {
        color: #ff9f43;
        margin-bottom: 15px;
    }

    .sample-data article {
        line-height: 1.6;
    }

    .sample-data pre {
        background-color: #353b48;
        padding: 10px;
        border-radius: 5px;
        overflow-x: auto;
    }

    .sample-data code {
        color: #f5f6fa;
    }

    /* 页面顶部与内容的分隔 */
    .separator {
        height: 60px; /* 导航栏高度 */
    }