/* 卡片布局专用样式 - 确保优先级最高 */
#website-list, #user-websites-list, #user-favorites-list {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -0.75rem !important;
    justify-content: center !important;
    width: 100% !important;
}

.website-card {
    flex: 0 0 calc(33.333% - 1.5rem) !important;
    max-width: calc(33.333% - 1.5rem) !important;
    margin: 0.75rem !important;
    background-color: #1e293b !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: 1px solid #334155 !important;
    height: auto !important;
    position: relative !important;
}

/* 响应式设计 - 平板 */
@media (max-width: 992px) {
    .website-card {
        flex: 0 0 calc(50% - 1.5rem) !important;
        max-width: calc(50% - 1.5rem) !important;
    }
}

/* 响应式设计 - 手机 */
@media (max-width: 576px) {
    .website-card {
        flex: 0 0 calc(100% - 1.5rem) !important;
        max-width: calc(100% - 1.5rem) !important;
    }
}

/* 个人主页特殊处理 - 确保在各种屏幕尺寸下都能正确响应 */
.websites-section .website-grid {
    width: 100% !important;
}

.websites-section #user-websites-list,
.websites-section #user-favorites-list {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -0.75rem !important;
    justify-content: center !important;
    width: 100% !important;
}

/* 个人主页的额外响应式规则 */
@media (max-width: 992px) {
    .websites-section .website-card {
        flex: 0 0 calc(50% - 1.5rem) !important;
        max-width: calc(50% - 1.5rem) !important;
    }
}

@media (max-width: 576px) {
    .websites-section .website-card {
        flex: 0 0 calc(100% - 1.5rem) !important;
        max-width: calc(100% - 1.5rem) !important;
    }
}

.website-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25) !important;
    border-color: #475569 !important;
}