/* ==========================================================================
   1. 基础重置与全局变量
   ========================================================================== */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    background: #f5f5f7; 
    color: #333; 
    line-height: 1.5;
}

a { text-decoration: none; color: inherit; }

/* ==========================================================================
   2. 核心布局容器 (关键：页头、内容、页尾公用宽度逻辑)
   ========================================================================== */
.main-header,
.container,
.main-footer,
.announcement-bar {
    max-width: 1200px; /* PC端最大宽度 */
    margin-left: auto;
    margin-right: auto;
    width: 95%; /* 移动端两边留出一点空隙，防止贴边 */
}

/* ==========================================================================
   3. 页头重构 (main-header)
   ========================================================================== */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ff3344;
    color: #fff;
    padding: 15px 25px;
    margin-top: 10px; /* 顶部留白 */
    border-radius: 8px; /* 保持与内容卡片一致的圆角 */
}

.main-header .logo {
    font-size: 24px;
    font-weight: bold;
}

/* ==========================================================================
   4. 公告栏 (announcement-bar)
   ========================================================================== */
.announcement-bar {
    background: #fffce7;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid #f9eeb3;
    color: #d32f2f;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.announcement-bar .badge {
    background: #2cbafc;
    color: #fff;
    padding: 3px 10px;
    border-radius: 5px;
    font-weight: bold;
    white-space: nowrap;
}

/* ==========================================================================
   5. 中间内容区 (container)
   ========================================================================== */
.container {
    padding: 0; /* 清除默认padding，靠width控制 */
    margin-bottom: 30px;
}

.cate-card {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}

.cate-title {
    padding: 12px 20px;
    font-weight: bold;
    background: #fdfdfd;
    border-bottom: 1px solid #eee;
    color: #333;
}

.link-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
}

/* PC端链接项：一行6个 */
.link-item {
    flex: 0 0 calc(16.66% - 12px);
    margin: 6px;
    padding: 12px 8px;
    background: #f8f9fa;
    border-radius: 6px;
    text-align: center;
    transition: all 0.25s ease;
    border: 1px solid transparent;
}

.link-item:hover { 
    background: #fff; 
    border-color: #ff3344;
    transform: translateY(-3px); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ==========================================================================
   6. 页尾重构 (main-footer)
   ========================================================================== */
.main-footer {
    background: #1a1a1a;
    color: #999;
    padding: 25px;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

/* ==========================================================================
   7. 响应式适配 (Media Queries)
   ========================================================================== */

/* 平板端 (屏幕小于 992px) */
@media (max-width: 992px) {
    .link-item {
        flex: 0 0 calc(25% - 12px); /* 一行4个 */
    }
}

/* 手机端 (屏幕小于 576px) */
@media (max-width: 576px) {
    .main-header {
        flex-direction: row; /* 手机端依然保持logo和菜单在一行 */
        padding: 12px 15px;
    }
    
    .announcement-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .link-item {
        flex: 0 0 calc(50% - 12px); /* 手机端一行2个 */
        font-size: 14px;
    }

    /* 侧边栏/底部导航适配 */
    .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 55px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 1000;
        border-top: 1px solid #eee;
    }
    
    body { padding-bottom: 70px; } /* 避开底部栏 */
}

/* 大屏幕微调，确保绝对对齐 */
@media (min-width: 1200px) {
    .main-header, .container, .main-footer, .announcement-bar {
        width: 1200px; /* 强制锁定像素宽度 */
    }
}