/* ===== 响应式样式 ===== */

/* 平板 */
@media (max-width: 1024px) {
    .main-header .container {
        flex-wrap: wrap;
        gap: 15px;
    }
    .main-nav { order: 3; width: 100%; overflow-x: auto; }
    .main-nav ul { flex-wrap: nowrap; }
    .main-content .container {
        flex-direction: column;
    }
    .content-right { width: 100%; }
    .footer-top {
        grid-template-columns: repeat(2, 1fr);
    }
    .news-grid {
        grid-template-columns: 1fr;
    }
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .server-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 手机 */
@media (max-width: 768px) {
    .top-bar .container {
        flex-direction: column;
        gap: 5px;
    }
    .top-bar-right { display: none; }
    .main-header { padding: 15px 0; }
    .logo h1 { font-size: 22px; }
    .header-search input { width: 140px; }
    .breadcrumb { font-size: 12px; }
    
    .main-nav a {
        padding: 8px 10px;
        font-size: 13px;
    }
    
    .banner-img { height: 200px !important; }
    .banner-info { padding: 15px; }
    .banner-info h3 { font-size: 18px; }
    .banner-info p { font-size: 12px; }
    
    .server-table { font-size: 12px; }
    .server-table th, .server-table td { padding: 8px 5px; }
    .server-table th:nth-child(4),
    .server-table td:nth-child(4) { display: none; }
    
    .news-item.featured .news-img { height: 160px; }
    .news-img { height: 140px; }
    .news-text h3 { font-size: 14px; }
    .news-item.featured .news-text h3 { font-size: 16px; }
    
    .category-grid { grid-template-columns: 1fr; }
    
    .footer-top { grid-template-columns: 1fr; gap: 20px; }
    
    .server-detail-header { flex-direction: column; gap: 15px; }
    .server-detail-name { font-size: 22px; }
    .server-info-grid { grid-template-columns: repeat(2, 1fr); }
    .server-actions { flex-direction: column; }
    .btn-download { text-align: center; }
    
    .article-content { padding: 20px 15px; }
    .article-header h1 { font-size: 20px; }
    .article-meta { flex-direction: column; gap: 5px; }
}

@media (max-width: 480px) {
    .container { padding: 0 10px; }
    .logo h1 { font-size: 18px; }
    .header-search { display: none; }
    .server-table th:nth-child(5),
    .server-table td:nth-child(5) { display: none; }
    .float-qq { right: 10px; bottom: 80px; }
    .float-qq a { padding: 8px 6px; font-size: 11px; }
    .back-to-top { right: 10px; bottom: 20px; width: 38px; height: 38px; line-height: 38px; }
}