html {
    margin: 0;
    padding: 0;
    width: 100%; /* 确保html占满窗口宽度，作为body的父容器 */
    height: 100%;
    position: static; /* 避免父元素定位影响body */
}

body {
    font-family: Arial, sans-serif;
    margin: 0 auto; /* 水平居中：上下0，左右自动（仅对有宽度的块级元素生效） */
    padding: 20px; /* 内边距：避免内容贴边 */
    line-height: 1.6;
    width: 100%; /* 关键：让body占满浏览器宽度（块级元素默认width: auto，可能受父元素影响） */
    max-width: 1024px; /* 限制最大宽度：窗口>1024px时，body宽1024px并居中；窗口<1024px时，body宽100% */
    box-sizing: border-box; /* 关键：padding不会增加body的总宽度（避免width:100%+padding导致超出窗口，居中失效） */
}
        .navbar {
            background-color: #f8f9fa;
            padding: 15px 20px;
            border-radius: 4px;
            margin-bottom: 30px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            width: 100%;
        }
        .nav-links {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .nav-links li {
            white-space: nowrap;
        }
        .nav-links li a {
            text-decoration: none;
            color: #333;
            padding: 8px 20px; /* 左右内边距加大，配合大圆角 */
            border: 1px solid #ddd;
            border-radius: 50px; /* 核心：大圆角，形成胶囊形状 */
            transition: all 0.3s ease;
            display: inline-block;
            font-size: 14px; /* 可选：文字稍小，更精致 */
        }

        .nav-links li a:hover {
            border-color: #e64980; /* 悬浮时边框变粉色（活泼色） */
            color: #e64980;
            background-color: #fff5f8; /* 轻微粉色背景，呼应边框 */
        }

        /* 当前页面高亮：胶囊填充色 */
        .nav-links li a.download-btn {
            border-color: #e64980;
            background-color: #e64980;
            color: white;
        }
        .nav-links li a.download-btn:hover {
            border-color: #d6336c;
            background-color: #d6336c;
        }
        .download-btn {
            background-color: #28a745;
            color: white !important;
            font-weight: bold;
            padding: 8px 16px;
            border-radius: 4px;
            margin-right: 10px;
            text-decoration: none;
            display: inline-block;
            transition: background-color 0.3s ease;
        }
        .download-btn:hover {
            background-color: #218838;
            color: white !important;
        }
        .file-list {
            list-style: none;
            padding: 0;
             border: 1px solid #b4a6a6ff; 
    border-radius: 4px; 
    width: 468px; 

        }
        .file-item {
            padding: 15px;
            margin-bottom: 10px;
            background-color: #f5f5f5;
            border-radius: 4px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            /* 列表项底部添加分隔线（最后一项除外） */
            border-bottom: 1px dashed #ddd;
        }
        .file-name {
            color: #2c3e50;
            font-weight: 500;
            flex: 1;
            min-width: 200px;
        }
        .file-meta {
            font-size: 0.9em;
            color: #666;
            margin: 0;
            flex: 2;
            min-width: 300px;
        }
        .beian {
            margin-top: 30px;
            font-size: 18px;
            color: #666;
            text-align: center;
        }
        .beian a {
            color: #070b36;
            text-decoration: none;
        }
        .beian a:hover {
            text-decoration: underline;
        }
        .empty-message {
            color: #7f8c8d;
            text-align: center;
            padding: 20px;
        }
        @media (max-width: 468px) {
            .file-item {
                flex-direction: column;
                align-items: flex-start;
            }
            .file-meta {
                min-width: auto;
                width: 100%;
            }
        }