/* 移动设备适配样式 */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    
    .container {
        width: 100%;
        padding: 0;
    }
    
    h1 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    
    h2 {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }
    
    .card {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    /* 输入组样式调整 */
    .input-group {
        flex-direction: column;
    }
    
    .input-group input[type="text"] {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .input-group button {
        width: 100%;
        margin-left: 0;
        margin-top: 5px;
    }
    
    /* 标签页按钮调整 */
    .tab-buttons {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .tab-button {
        padding: 10px;
        font-size: 0.9rem;
        flex: 1 1 calc(50% - 5px);
        text-align: center;
        margin-right: 0;
        margin-bottom: 5px;
    }
    
    /* 筛选控件调整 */
    .filter-controls {
        flex-direction: column;
        gap: 10px;
    }
    
    .filter-controls input,
    .filter-controls select {
        width: 100%;
    }
    
    /* 日期筛选器调整 */
    .date-filter {
        flex-direction: column;
        gap: 10px;
    }
    
    .filter-group {
        width: 100%;
        justify-content: space-between;
    }
    
    .filter-group label {
        width: 80px;
    }
    
    .filter-group select {
        flex: 1;
    }
    
    #clearDateFilterBtn {
        width: 100%;
        margin-top: 5px;
    }
    
    /* 表格样式调整 */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    th, td {
        padding: 10px 8px;
        font-size: 0.9rem;
    }
    
    .video-thumbnail {
        width: 80px;
        height: 45px;
    }
    
    /* 频道项目调整 */
    .channel-item {
        flex-direction: column;
        gap: 10px;
    }
    
    .channel-item div:last-child {
        display: flex;
        width: 100%;
        gap: 10px;
    }
    
    .channel-item button {
        flex: 1;
        padding: 8px;
        font-size: 0.9rem;
    }
    
    /* 统计卡片调整 */
    .stats-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 15px;
    }
    
    .stat-card {
        padding: 15px;
    }
    
    .stat-title {
        font-size: 0.8rem;
    }
    
    .stat-value {
        font-size: 1.8rem;
    }
    
    /* 分页控件调整 */
    .pagination {
        flex-wrap: wrap;
        gap: 5px;
        justify-content: center;
    }
    
    .pagination button {
        padding: 8px;
        min-width: 35px;
        font-size: 0.9rem;
    }
    
    /* 模态对话框调整 */
    .modal-content {
        width: 95%;
        padding: 15px;
        margin: 5% auto;
    }
    
    .modal textarea {
        height: 150px;
    }
    
    /* 视频表格调整为卡片式布局 */
    @media (max-width: 600px) {
        table, thead, tbody, th, td, tr {
            display: block;
        }
        
        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }
        
        tr {
            border: 1px solid var(--border-color);
            margin-bottom: 15px;
            border-radius: 3px;
            padding: 10px;
            background-color: rgba(26, 26, 26, 0.7);
        }
        
        td {
            border: none;
            border-bottom: 1px solid var(--border-color);
            position: relative;
            padding-left: 50%;
            white-space: normal;
            text-align: left;
        }
        
        td:before {
            position: absolute;
            top: 12px;
            left: 10px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            font-weight: bold;
            content: attr(data-title);
            color: var(--primary-light);
        }
        
        td:nth-of-type(1):before { content: "缩略图"; }
        td:nth-of-type(2):before { content: "标题"; }
        td:nth-of-type(3):before { content: "博主"; }
        td:nth-of-type(4):before { content: "发布日期"; }
        td:nth-of-type(5):before { content: "观看次数"; }
        
        /* 缩略图单元格特殊处理 */
        td:first-child {
            padding-left: 0;
            text-align: center;
        }
        
        td:first-child:before {
            display: none;
        }
        
        .video-thumbnail {
            width: 100%;
            max-width: 160px;
            height: auto;
            aspect-ratio: 16/9;
        }
    }
    
    /* 视频卡片的移动端适配 */
    @media (max-width: 768px) {
        .video-cards {
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 15px;
            margin: 15px 0 25px 0;
    }
    
        .video-card-title {
            font-size: 0.9rem;
            margin-bottom: 8px;
    }
        
        .video-card-content {
            padding: 12px;
}

        .video-views {
            padding: 3px 6px;
            font-size: 0.7rem;
        }
        
        .video-card-info {
            font-size: 0.75rem;
        }
    }
    
    @media (max-width: 480px) {
        .video-cards {
            grid-template-columns: 1fr;
    }
        
        .video-card {
            max-width: 100%;
            margin: 0 auto 15px auto;
}
        
        .video-thumbnail-container {
            padding-top: 50%; /* 减小高度比例 */
        }
        
        .video-card-content {
            padding: 10px;
        }
    }
}

/* 深色模式优化 */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #ff3b47;
        --primary-light: #ff6b6b;
        --background-color: #0a0a0a;
        --card-bg: #151515;
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    :root {
        --border-color: #555555;
        --text-color: #ffffff;
        --primary-color: #ff0000;
    }
    
    .card {
        border: 2px solid var(--border-color);
    }
    
    a, button {
        text-decoration: underline;
    }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        transition-duration: 0.001s !important;
    }
    
    .glitch-effect::before,
    .glitch-effect::after {
        display: none;
    }
}