/* 学生端全局响应式适配 v20260808g */
/* 补全 compact.css 和页面内联 @media 未覆盖的布局断点 */

/* ========== 平板适配 (769px ~ 1024px) ========== */
@media screen and (max-width: 1024px) {
    .mode-grid,
    .subject-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .container { padding: 16px !important; }
}

/* ========== 手机适配 (≤768px) ========== */
@media screen and (max-width: 768px) {
    /* --- 网格布局 --- */

    /* 3列统计 → 保持2列（courses.html进度概览） */
    .progress-overview {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .progress-overview > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* 4列模式/科目 → 2列 */
    .mode-grid,
    .subject-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* 5列学习闭环 → 横向可滚 */
    .loop-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 4px;
    }
    .loop-step {
        scroll-snap-align: start;
        min-width: 72px !important;
        padding: 10px 6px !important;
    }
    .loop-step::after { display: none !important; }

    /* 通用 grid-cols 降级 */
    .grid.grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }

    /* --- 头部 --- */
    .header { padding: 10px 14px !important; }
    .header-title { font-size: 17px !important; }

    /* --- 统计卡 --- */
    .stat-card { padding: 12px !important; }
    .stat-icon { width: 40px !important; height: 40px !important; font-size: 18px !important; }
    .stat-info h3, .stat-num { font-size: 20px !important; }
    .stat-info p, .stat-label { font-size: 11px !important; }

    /* --- 模式卡 --- */
    .mode-card { padding: 12px 8px !important; }
    .mode-icon { width: 44px !important; height: 44px !important; font-size: 20px !important; margin-bottom: 8px !important; }
    .mode-card h4 { font-size: 13px !important; }
    .mode-card p { font-size: 10px !important; }

    /* --- 学习闭环 --- */
    .learning-loop { padding: 14px !important; border-radius: 14px !important; }
    .loop-title { font-size: 14px !important; }
    .step-num { font-size: 18px !important; }
    .step-label { font-size: 10px !important; }

    /* --- 个人中心 --- */
    .setting-item { padding: 14px 16px !important; }
    .setting-icon { width: 34px !important; height: 34px !important; font-size: 16px !important; }
    .setting-label { font-size: 14px !important; }
    .menu-card { padding: 12px !important; gap: 10px !important; }
    .menu-icon { width: 40px !important; height: 40px !important; font-size: 18px !important; }
    .menu-text h4 { font-size: 14px !important; }
    .menu-text p { font-size: 11px !important; }
    .logout-btn { padding: 14px !important; font-size: 15px !important; }
    .avatar-upload { width: 90px !important; height: 90px !important; }

    /* --- AI Board --- */
    .board-container, .ai-board-content { width: 100% !important; max-width: 100% !important; padding: 8px !important; }

    /* --- 表格横滚 --- */
    .overflow-auto, table {
        display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
    }
    table thead th { position: sticky; top: 0; background: #fff; z-index: 1; }

    /* --- 弹窗 --- */
    .modal-content, .modal { width: 95% !important; max-width: 95vw !important; margin: 0 auto !important; }

    /* --- 防横向溢出 --- */
    body { overflow-x: hidden !important; max-width: 100vw !important; }
    .container { max-width: 100% !important; padding: 12px !important; }
}

/* ========== 小屏手机 (≤480px) ========== */
@media screen and (max-width: 480px) {
    .progress-overview { grid-template-columns: 1fr !important; }
    .mode-grid, .subject-grid { grid-template-columns: 1fr !important; }
    .grid.grid-cols-2 { grid-template-columns: 1fr !important; }
    .header { padding: 8px 10px !important; gap: 8px !important; }
    .header-title { font-size: 15px !important; }
    .back-btn { width: 32px !important; height: 32px !important; }
    .container { padding: 8px !important; }
    .loop-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ========== 大屏桌面优化 (≥1280px) ========== */
@media screen and (min-width: 1280px) {
    .container { max-width: 1200px !important; }
    .stats-grid { grid-template-columns: repeat(4, 1fr) !important; }
}