/* 响应式适配样式 */

/* 桌面端 >= 768px */
@media (min-width: 768px) {
    .album-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .container {
        padding: 30px;
    }
}

/* 移动端 < 768px */
@media (max-width: 767px) {
    .album-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .container {
        padding: 15px;
    }
    
    .detail-title {
        font-size: 22px;
    }
    
    .detail-stats {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .image-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .auth-container {
        margin: 40px auto;
        padding: 30px 20px;
    }
    
    .admin-header {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    
    .admin-nav {
        width: 100%;
        justify-content: center;
    }
    
    .admin-container {
        padding: 15px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .data-table {
        overflow-x: auto;
    }
    
    .data-table table {
        min-width: 600px;
    }
}

/* 平板端 768px - 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    .album-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 小屏幕手机 < 480px */
@media (max-width: 480px) {
    .album-grid {
        gap: 10px;
    }
    
    .album-title {
        font-size: 14px;
    }
    
    .album-meta {
        font-size: 11px;
    }
    
    .search-box {
        flex-direction: column;
    }
    
    .search-btn {
        width: 100%;
    }
}