/* ==========================================================================
   环信云学院 · 移动端样式层
   --------------------------------------------------------------------------
   生效条件：屏幕宽度 < 992px（与 Bootstrap lg 断点对齐）
   桌面端（≥ 992px）：本文件所有规则均不生效，界面与交互保持原样
   加载位置：base.html 的 {% block head %} 之后，确保优先级高于页面内联样式
   ========================================================================== */

@media (max-width: 991.98px) {

    /* ---------------- 1. 全局与布局 ---------------- */
    :root {
        --m-appbar-h: 56px;
        --m-tabbar-h: 58px;
        --m-safe-b: env(safe-area-inset-bottom, 0px);
        --m-gap: 14px;
    }

    html, body { overflow-x: hidden; }

    body {
        padding-bottom: calc(var(--m-tabbar-h) + var(--m-safe-b));
        -webkit-tap-highlight-color: transparent;
    }

    /* 抽屉打开时锁定背景滚动 */
    body.m-drawer-open { overflow: hidden; }

    /* 桌面侧边栏在手机端隐藏，改用「抽屉 + 底部 Tab」 */
    .sidebar { display: none !important; }

    /* 主内容列必须可收缩（关键）：
       该列同时是外层 flex 的子项，默认 min-width:auto 会被内部「横向滚动容器」
       （如首页「继续学习」的课程卡列表）的内容宽度撑开（实测 393px 屏被撑到 528px），
       整页随后被 html/body 的 overflow-x:hidden 裁切 —— 表现为右侧内容被切掉、
       且内部横向列表“滑不动”。置 0 后内容区回到视口宽度，内部滚动容器才真正可滚动。 */
    .app-shell { min-width: 0; max-width: 100%; }
    .app-main { min-width: 0; max-width: 100%; }

    /* 内容区：为固定顶栏与底部 Tab 预留空间 */
    .app-main {
        padding: calc(var(--m-appbar-h) + 12px) var(--m-gap) 20px !important;
    }

    #content { min-width: 0; max-width: 100%; }

    /* 页面标题字号收敛 */
    h4.page-title, .page-title { font-size: 17px !important; }

    /* ---------------- 2. 顶部应用栏（AppBar） ---------------- */
    .topbar {
        position: fixed !important;
        top: 0; left: 0; right: 0;
        z-index: 1040;
        height: var(--m-appbar-h);
        padding: 0 10px !important;
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: saturate(180%) blur(12px);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        border-bottom: 1px solid var(--border) !important;
        box-shadow: 0 1px 2px rgba(46, 34, 91, .04);
    }

    .topbar #pageTitle,
    .topbar .page-title {
        font-size: 17px;
        font-weight: 700;
        max-width: 46vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar #breadcrumbArea { display: none !important; }

    /* 汉堡菜单按钮 */
    .m-menu-btn {
        flex: none;
        width: 38px; height: 38px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--border);
        border-radius: 11px;
        background: #fff;
        color: var(--text);
        font-size: 18px;
        transition: background .15s, transform .15s;
    }
    .m-menu-btn:active { background: var(--primary-bg); transform: scale(.94); }

    /* 顶栏用户头像 */
    .m-avatar {
        flex: none;
        width: 32px; height: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), var(--primary-light));
        color: #fff;
        font-size: 13px; font-weight: 700;
        display: inline-flex; align-items: center; justify-content: center;
        box-shadow: 0 2px 8px rgba(124, 58, 237, .28);
    }

    /* ---------------- 3. 侧滑抽屉 ---------------- */
    .m-drawer-mask {
        position: fixed; inset: 0;
        z-index: 1050;
        background: rgba(30, 27, 46, .44);
        opacity: 0; visibility: hidden;
        transition: opacity .22s ease, visibility .22s ease;
    }
    body.m-drawer-open .m-drawer-mask { opacity: 1; visibility: visible; }

    .m-drawer {
        position: fixed; top: 0; bottom: 0; left: 0;
        z-index: 1051;
        width: 78vw; max-width: 320px;
        display: flex; flex-direction: column;
        background: #fff;
        box-shadow: 0 12px 32px rgba(46, 34, 91, .18);
        transform: translateX(-102%);
        transition: transform .24s cubic-bezier(.4, 0, .2, 1);
        will-change: transform;
    }
    body.m-drawer-open .m-drawer { transform: none; }

    .m-drawer-brand {
        padding: 18px 18px 14px;
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        color: #fff;
    }
    .m-drawer-brand .bname { font-size: 17px; font-weight: 800; letter-spacing: .02em; }
    .m-drawer-brand .bsub { font-size: 11.5px; opacity: .82; margin-top: 3px; }

    .m-drawer-user {
        display: flex; align-items: center; gap: 11px;
        padding: 13px 18px;
        border-bottom: 1px solid var(--border);
        background: #fff;
    }
    .m-drawer-user .avatar {
        width: 40px; height: 40px; border-radius: 50%; flex: none;
        background: linear-gradient(135deg, var(--primary), var(--primary-light));
        color: #fff; font-weight: 700; font-size: 15px;
        display: flex; align-items: center; justify-content: center;
    }
    .m-drawer-user .uname { font-size: 14.5px; font-weight: 700; }
    .m-drawer-user .urole { font-size: 11.5px; color: var(--text-light); margin-top: 2px; }

    .m-drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 22px; }

    .m-nav-section {
        padding: 13px 18px 6px;
        font-size: 11px; font-weight: 700; letter-spacing: .07em;
        color: #9AA0AE;
    }

    .m-nav-item {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 18px;
        font-size: 14.5px;
        color: var(--text);
        transition: background .15s, color .15s;
    }
    .m-nav-item:active { background: #F7F5FF; }
    .m-nav-item.on { color: var(--primary); background: var(--primary-bg); font-weight: 600; }
    .m-nav-item i.lead { font-size: 17px; color: var(--primary-light); flex: none; }
    .m-nav-item.on i.lead { color: var(--primary); }
    .m-nav-item .arrow { margin-left: auto; color: #C4BFD8; transition: transform .2s ease; font-size: 12px; }
    .m-nav-item.open .arrow { transform: rotate(90deg); }

    .m-sub { padding: 2px 0 6px; }
    .m-sub-item {
        display: flex; align-items: center; gap: 8px;
        padding: 11px 18px 11px 34px;
        font-size: 13.5px;
        color: var(--text-light);
        border-left: 3px solid transparent;
        transition: background .15s, color .15s;
    }
    .m-sub-item i { font-size: 11px; color: #C4BFD8; }
    .m-sub-item.on {
        color: var(--primary); background: #FBFAFF; font-weight: 600;
        border-left-color: var(--primary);
    }
    .m-sub-item.on i { color: var(--primary); }

    /* ---------------- 4. 底部 Tab ---------------- */
    .m-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0;
        z-index: 1040;
        height: calc(var(--m-tabbar-h) + var(--m-safe-b));
        padding-bottom: var(--m-safe-b);
        display: flex; align-items: stretch;
        background: rgba(255, 255, 255, .97);
        backdrop-filter: saturate(180%) blur(12px);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        border-top: 1px solid var(--border);
    }
    .m-tabbar .m-tab {
        flex: 1 1 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px;
        border: 0; background: transparent;
        color: var(--text-light);
        font-size: 10.5px;
        padding: 0;
        transition: color .15s ease;
    }
    .m-tabbar .m-tab i { font-size: 20px; line-height: 1; transition: transform .15s ease; }
    .m-tabbar .m-tab.on { color: var(--primary); font-weight: 600; }
    .m-tabbar .m-tab.on i { transform: translateY(-1px) scale(1.08); }
    .m-tabbar .m-tab:active i { transform: scale(.92); }

    /* ---------------- 5. 主内容与卡片 ---------------- */
    #content > .card,
    #content .card { border-radius: 14px; }

    /* 栅格沿用 Bootstrap 默认堆叠行为（col-md-* 在 <768px 本就会单列），
       此处不覆盖，避免破坏「col-6 col-md-3」这类手机端两列布局 */

    /* 卡片内边距与阴影微调 */
    .card-body { padding: 14px !important; }

    .um-org-wrap { flex-direction: column !important; }
    .um-org-sidebar { flex: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; max-height: 46vh; }
    .um-org-main { width: 100% !important; }

    /* 二级入口条：单行横向滑动 */
    #subNav {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 6px;
        margin: 0 calc(var(--m-gap) * -1) 12px;
        padding-left: var(--m-gap);
        padding-right: var(--m-gap);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #subNav::-webkit-scrollbar { display: none; }
    #subNav > * { flex: 0 0 auto; white-space: nowrap; }

    /* 页面内工具栏：允许换行，按钮自适应 */
    #content .d-flex.flex-wrap { gap: 8px !important; }

    /* 固定高度容器放开 */
    .table-responsive { max-height: none !important; }

    /* ---------------- 6. 表格 → 卡片 ---------------- */
    /* 由 JS 为可转化表格添加 .m-cardify，为拖拽排序表格添加 .m-keep */
    table.m-cardify {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
    }
    table.m-cardify thead { display: none; }
    table.m-cardify,
    table.m-cardify tbody,
    table.m-cardify tr,
    table.m-cardify td { display: block; width: 100% !important; }

    table.m-cardify tr {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 14px;
        box-shadow: var(--shadow-sm);
        padding: 12px 14px;
        margin-bottom: 11px;
        animation: mCardIn .18s ease both;
    }
    table.m-cardify tr:last-child { margin-bottom: 0; }

    @keyframes mCardIn {
        from { opacity: 0; transform: translateY(4px); }
        to { opacity: 1; transform: none; }
    }

    table.m-cardify td {
        border: none !important;
        padding: 5px 0 !important;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        text-align: left !important;
        font-size: 13.5px;
        white-space: normal !important;
        word-break: break-word;
    }
    table.m-cardify td::before {
        content: attr(data-label);
        flex: 0 0 74px;
        color: var(--text-light);
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.6;
        padding-top: 1px;
    }
    table.m-cardify td:empty { display: none; }
    /* 复选框列 / 空数据占位行 */
    table.m-cardify td.m-col-check { padding: 0 0 8px !important; }
    table.m-cardify td.m-col-check::before { display: none; }
    table.m-cardify tr.m-empty-row {
        display: block; text-align: center;
        color: var(--text-light); font-size: 13px;
        padding: 22px 14px;
    }
    table.m-cardify tr.m-empty-row td { justify-content: center; padding: 0 !important; }
    table.m-cardify tr.m-empty-row td::before { display: none; }
    /* 首列作为卡片标题 */
    table.m-cardify td.m-col-title {
        font-size: 15px;
        font-weight: 700;
        padding-bottom: 8px !important;
        border-bottom: 1px dashed var(--border) !important;
        margin-bottom: 4px;
    }
    table.m-cardify td.m-col-title::before { display: none; }
    /* 操作列固定在卡片底部右侧 */
    table.m-cardify td.m-col-ops {
        justify-content: flex-end;
        padding-top: 10px !important;
        gap: 8px;
    }
    table.m-cardify td.m-col-ops::before { display: none; }
    table.m-cardify td.m-col-ops .btn,
    table.m-cardify td.m-col-ops a.btn { margin: 0 !important; }

    /* 拖拽排序表格：保留表格形态，横向滑动 */
    table.m-keep {
        min-width: 560px;
        font-size: 13px;
    }
    table.m-keep th, table.m-keep td { white-space: nowrap; padding: .55rem .6rem !important; }

    /* 表格横向滚动的可滑动提示 */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* ---------------- 7. 表单与按钮 ---------------- */
    .form-label { font-size: 13px; font-weight: 600; margin-bottom: 5px; }
    /* 输入框字号保持 16px，避免 iOS Safari 聚焦时自动放大页面 */
    .form-control, .form-select {
        height: 44px;
        font-size: 16px;
        border-radius: 11px;
    }
    .form-control-lg, .form-select-lg { height: 46px !important; font-size: 16px !important; }
    textarea.form-control { height: auto; min-height: 96px; }
    .form-control-sm, .form-select-sm { height: 38px !important; font-size: 15px; }
    .form-check-input { width: 1.2em; height: 1.2em; margin-top: .15em; }
    .form-check-label { font-size: 14px; }

    .btn { min-height: 42px; border-radius: 11px; font-size: 14.5px; }
    .btn-sm { min-height: 34px; font-size: 13px; padding: .35rem .72rem; }
    .btn-icon { min-height: 0; }

    .input-group .btn { min-height: 44px; }

    /* 工具栏按钮组横向滑动 */
    .m-scroll-x {
        display: flex; flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 6px;
        scrollbar-width: none;
    }
    .m-scroll-x::-webkit-scrollbar { display: none; }
    .m-scroll-x > * { flex: 0 0 auto; }

    /* ---------------- 8. 弹层适配 ---------------- */
    /* 自定义弹层（用户管理等）全屏化 */
    .um-overlay { padding: 0 !important; align-items: stretch !important; }
    .um-modal {
        max-width: none !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        display: flex; flex-direction: column;
        overflow: hidden;
    }
    .um-modal .um-modal-body { flex: 1; overflow-y: auto; }
    .um-modal .um-modal-foot {
        padding-bottom: calc(12px + var(--m-safe-b)) !important;
    }
    .um-modal .um-modal-foot > .btn { flex: 1 1 0; }

    /* Bootstrap 弹窗：底部抽屉式 */
    .modal-dialog {
        margin: 0 !important;
        max-width: none !important;
        min-height: 100% !important;
        align-items: flex-end !important;
        display: flex;
    }
    .modal-content {
        border-radius: 18px 18px 0 0 !important;
        border: 0 !important;
        width: 100% !important;
        max-height: 92vh;
    }
    .modal-body { padding: 14px 16px !important; overflow-y: auto; }
    .modal-header, .modal-footer { padding: 12px 16px !important; }
    .modal-footer { padding-bottom: calc(12px + var(--m-safe-b)) !important; }
    .modal-footer .btn { flex: 1 1 0; }

    /* 项目内 lm-modal 弹层 */
    .lm-modal { padding: 0 !important; }
    .lm-modal .modal-dialog { max-width: none !important; }

    /* 通知面板自适应宽度 */
    .notif-panel {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: calc(var(--m-appbar-h) + 6px) !important;
        width: auto !important;
        max-width: none !important;
        max-height: 72vh;
        overflow-y: auto;
    }
    .notif-list { max-height: none !important; }

    /* 日期时间选择器：改为视口居中，避免被 JS 绝对定位计算出界 */
    .cc-cal, #ccCalBox {
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
        max-width: calc(100vw - 24px);
        max-height: 78vh;
        overflow-y: auto;
        box-shadow: 0 18px 48px rgba(46, 34, 91, .24);
    }

    /* 操作下拉菜单：以底部抽屉形式呈现，避免溢出屏幕 */
    .ccx-menu {
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: calc(12px + var(--m-safe-b)) !important;
        width: auto !important;
        max-width: none !important;
        max-height: 62vh;
        overflow-y: auto;
        border-radius: 16px;
        box-shadow: 0 -8px 34px rgba(46, 34, 91, .2);
    }

    /* Bootstrap 下拉菜单：不超出视口 */
    .dropdown-menu {
        max-width: calc(100vw - 24px);
        font-size: 14px;
    }

    /* ---------------- 9. 登录 / 注册 ---------------- */
    /* 手机上隐藏品牌展示区，表单单列铺满整屏 */
    .login-wrapper { display: block !important; min-height: 100vh; }
    .login-brand { display: none !important; }
    .login-panel {
        width: 100% !important;
        min-height: 100vh;
        padding: 28px 20px calc(28px + var(--m-safe-b)) !important;
        display: flex; flex-direction: column;
        align-items: stretch; justify-content: center;
        background: linear-gradient(180deg, #FFFFFF 0%, var(--bg) 42%);
    }
    /* 用 margin:auto 实现安全垂直居中：内容过高时自动回落并随页面滚动，
       避免 flex 居中在表单较长（注册页）时顶部被裁切 */
    .login-form-wrap {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: auto 0;
    }
    .login-form-title { font-size: 22px !important; }
    .login-form-sub { font-size: 13.5px !important; margin-bottom: 20px !important; }
    .login-footer { margin-top: 18px !important; text-align: center; }

    /* 表单顶部的紧凑品牌标识（桌面端由 Bootstrap d-lg-none 隐藏） */
    .login-mobile-brand { text-align: center; margin-bottom: 20px; }
    .login-mobile-logo {
        height: 40px; width: auto; max-width: 76%;
        object-fit: contain;
        display: inline-block;
    }
    .login-mobile-sub {
        font-size: 12.5px; color: var(--text-light);
        margin-top: 9px; letter-spacing: .02em;
    }
    .login-form-wrap .form-label { font-size: 13px; }
    .login-form-wrap .form-control-lg,
    .login-form-wrap .form-select-lg { height: 48px !important; font-size: 16px !important; border-radius: 12px; }
    .login-form-wrap .btn-lg { min-height: 48px; }

    /* ---------------- 10. 其他细节 ---------------- */
    /* 头像/徽标触控友好 */
    .badge { font-size: 11px; }

    /* 长文本表格内已有 m-cardify 处理，这里保证普通容器不横向溢出 */
    #content img { max-width: 100%; height: auto; }

    /* ==================== 课程学习页 (courseLearnDetail) ====================
       桌面模板用 .row.g-3 > .col-lg-8 + .col-lg-4 双栏 + 章节行 .d-flex，
       在窄屏不收起、章节行也无法正确 text-truncate；这里强制单列、章节行可换行。 */
    #content > .row.g-3,
    #content .row.g-3 { flex-direction: column !important; }
    #content .row.g-3 > [class*="col-"] {
        width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 0 !important;
    }
    #content .cd-top { gap: 8px !important; }
    #content .cd-top > h5 { min-width: 0 !important; flex: 1 1 100% !important; order: 2; }
    #content .cd-top > .btn,
    #content .cd-top > .cd-favbtn { flex: 0 0 auto !important; }
    #content .cd-ring { width: 56px !important; height: 56px !important; }
    #content .border.rounded.p-2 { padding: 10px 12px !important; }
    /* 章节内的课件行：标题截断、按钮可换行 */
    #content .d-flex.align-items-center.gap-2.border-top { flex-wrap: wrap !important; row-gap: 8px; }
    #content .d-flex.align-items-center.gap-2.border-top > .flex-grow-1 { min-width: 0 !important; flex: 1 1 100% !important; }
    #content .d-flex.align-items-center.gap-2.border-top > .flex-grow-1 .text-truncate { max-width: 100%; }
    #content .d-flex.align-items-center.gap-2.border-top > .flex-shrink-0 { flex: 0 0 auto !important; margin-left: auto; }
    /* 顺序学习提示等长串说明允许换行 */
    #content .card .text-muted.small { white-space: normal !important; }
    #content .sec-bar { display: inline-block; width: 80px; max-width: 30vw; }
    #content .lock-tip { display: inline-block; max-width: 100%; }

    /* ==================== 学习播放器（移动端专用 .mp-player，见 mobile-renderer.js） ====================
       完全独立于桌面 .lm-modal：固定全屏白色页面 + 顶部 AppBar + 16:9 满宽视频。
       内部保留 lm-* 元素 id 作为桌面端播放逻辑（防快进/断点/心跳）的挂钩。 */
    #learnSecModal.mp-player {
        position: fixed; inset: 0; z-index: 2060;
        background: #FAF9FF;
        display: flex; flex-direction: column;
        animation: mpPlayerIn .22s ease;
    }
    @keyframes mpPlayerIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    /* 顶部 AppBar */
    #learnSecModal.mp-player .mpp-appbar {
        flex: 0 0 auto; height: 48px; padding: 0 10px;
        display: flex; align-items: center; gap: 6px;
        background: #fff; border-bottom: 1px solid #f0edf8;
        padding-top: env(safe-area-inset-top, 0px);
    }
    #learnSecModal.mp-player .mpp-back,
    #learnSecModal.mp-player .mpp-close {
        width: 36px; height: 36px; border: 0; background: transparent; border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-size: 19px; color: #262a3a;
    }
    #learnSecModal.mp-player .mpp-title {
        flex: 1 1 auto; min-width: 0;
        font-size: 14px; font-weight: 600;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* 可滚动主体 */
    #learnSecModal.mp-player .mpp-scroll {
        flex: 1 1 auto; min-height: 0; overflow-y: auto;
        overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    }
    /* 16:9 满宽视频区（无左右黑边） */
    #learnSecModal.mp-player .lm-video-wrap {
        width: 100%; aspect-ratio: 16 / 9; background: #000; position: relative;
    }
    #learnSecModal.mp-player .lm-video-wrap video {
        width: 100%; height: 100%; object-fit: contain; display: block; background: #000;
        /* 覆盖桌面端全局的 44vh 上限，否则横屏全屏时画面被压成一条 */
        max-height: none;
    }
    /* 音频 16:9 封面区 */
    #learnSecModal.mp-player .lm-audio-art {
        width: 100%; aspect-ratio: 16 / 9; max-height: 40vh; position: relative;
        display: flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, #4c3575, #241a3d);
    }
    #learnSecModal.mp-player .lm-artdisc { font-size: 64px; color: #A78BFA; }
    #learnSecModal.mp-player .lm-artdisc.playing { animation: mpDisc 3s linear infinite; }
    @keyframes mpDisc { to { transform: rotate(360deg); } }
    /* 视频中央播放按钮 */
    #learnSecModal.mp-player .lm-vplay {
        position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 58px; text-shadow: 0 2px 16px rgba(0,0,0,.45); cursor: pointer;
    }
    /* 元信息卡 */
    #learnSecModal.mp-player .mpp-meta { padding: 14px 16px 8px; }
    #learnSecModal.mp-player .mpp-chapter {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: 11.5px; color: #6f42c1; background: #F3EEFF;
        padding: 3px 9px; border-radius: 999px; margin-bottom: 7px;
    }
    #learnSecModal.mp-player .mpp-vtitle { font-size: 15px; font-weight: 600; line-height: 1.45; word-break: break-all; }
    #learnSecModal.mp-player .mpp-vsub { font-size: 12px; color: #8a90a6; margin-top: 4px; }
    #learnSecModal.mp-player .mpp-vsub b { color: #198754; }
    /* 进度条 + 时间 */
    #learnSecModal.mp-player .mpp-progress { padding: 0 16px; }
    #learnSecModal.mp-player .lm-seek {
        position: relative; height: 26px; display: flex; align-items: center; cursor: pointer; touch-action: none;
    }
    #learnSecModal.mp-player .lm-track {
        position: relative; width: 100%; height: 4px; background: #ece6fa; border-radius: 999px; overflow: visible;
    }
    #learnSecModal.mp-player .lm-zone {
        position: absolute; left: 0; top: 0; bottom: 0; background: #d9cef5; border-radius: 999px;
    }
    #learnSecModal.mp-player .lm-fill {
        position: absolute; left: 0; top: 0; bottom: 0; width: 0;
        background: linear-gradient(90deg, #6f42c1, #8b5cf6); border-radius: 999px;
    }
    #learnSecModal.mp-player .lm-fill.done { background: linear-gradient(90deg, #198754, #34c07a); }
    #learnSecModal.mp-player .lm-thumb {
        position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
        width: 14px; height: 14px; border-radius: 50%; background: #fff;
        box-shadow: 0 0 0 3px #6f42c1, 0 2px 6px rgba(0,0,0,.25);
    }
    #learnSecModal.mp-player .lm-seek.locked .lm-thumb { box-shadow: 0 0 0 3px #dc3545, 0 2px 6px rgba(0,0,0,.25); }
    #learnSecModal.mp-player .mpp-times {
        display: flex; justify-content: space-between;
        font-size: 11.5px; color: #8a90a6; margin-top: 2px; font-variant-numeric: tabular-nums;
    }
    /* 主控制条 */
    #learnSecModal.mp-player .mpp-controls {
        display: flex; align-items: center; gap: 10px; padding: 12px 16px 6px;
    }
    #learnSecModal.mp-player .lm-playbtn {
        width: 42px; height: 42px; border-radius: 50%; border: 0; flex: 0 0 auto;
        background: linear-gradient(135deg, #6f42c1, #8b5cf6); color: #fff; font-size: 21px;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 12px rgba(111, 66, 193, .32);
    }
    #learnSecModal.mp-player .lm-speedbtn {
        border: 1px solid #e6e0f5; border-radius: 999px; background: #fff;
        padding: 5px 11px; font-size: 12.5px; color: #262a3a; min-width: 52px;
    }
    #learnSecModal.mp-player .lm-speed { position: relative; flex: 0 0 auto; }
    #learnSecModal.mp-player .lm-speedmenu {
        position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
        background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(31, 18, 70, .16);
        padding: 5px; display: none; flex-direction: column; min-width: 72px; z-index: 10;
    }
    #learnSecModal.mp-player .lm-speedmenu.open { display: flex; }
    #learnSecModal.mp-player .lm-speedmenu button {
        border: 0; background: transparent; padding: 8px 10px; border-radius: 8px;
        font-size: 13px; color: #262a3a; text-align: center;
    }
    #learnSecModal.mp-player .lm-speedmenu button.on { background: #F3EEFF; color: #6f42c1; font-weight: 700; }
    #learnSecModal.mp-player .mpp-volwrap { display: flex; align-items: center; gap: 5px; flex: 1 1 auto; min-width: 0; }
    #learnSecModal.mp-player .lm-mutebtn {
        width: 32px; height: 32px; border: 0; background: transparent; color: #6f42c1; font-size: 17px;
    }
    #learnSecModal.mp-player .lm-volrange {
        -webkit-appearance: none; appearance: none; flex: 1 1 auto; max-width: none;
        height: 4px; background: #ece6fa; border-radius: 999px; outline: none;
    }
    #learnSecModal.mp-player .lm-volrange::-webkit-slider-thumb {
        -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #6f42c1;
    }
    /* 全屏按钮：浮于视频画面右下角（非全屏 / 全屏态都在画面右下角） */
    #learnSecModal.mp-player .lm-fsbtn {
        position: absolute; right: 10px; bottom: 10px; z-index: 5;
        width: 38px; height: 38px; border: 0; border-radius: 12px; flex: 0 0 auto;
        background: rgba(0, 0, 0, .45); color: #fff; font-size: 17px;
        display: flex; align-items: center; justify-content: center;
        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
    }
    /* 已学习徽标 */
    #learnSecModal.mp-player .lm-done-badge {
        display: inline-flex; align-items: center; gap: 3px;
        background: #E7F7EE; color: #198754; font-size: 12px; font-weight: 600;
        padding: 3px 10px; border-radius: 999px;
    }
    /* 提示条 */
    #learnSecModal.mp-player .mpp-hint {
        margin: 8px 16px 0; font-size: 12px; color: #6b5a96;
        background: #F3EEFF; padding: 9px 12px; border-radius: 10px;
        display: flex; align-items: center; gap: 6px; line-height: 1.5;
    }
    /* 上一节 / 完成态 / 下一节 */
    #learnSecModal.mp-player .mpp-actions { display: flex; gap: 8px; padding: 14px 16px 4px; }
    #learnSecModal.mp-player .mpp-act {
        flex: 1 1 0; min-height: 42px; border-radius: 11px; border: 1px solid #e6e0f5;
        background: #fff; font-size: 13px; color: #262a3a;
        display: flex; align-items: center; justify-content: center; gap: 4px;
    }
    #learnSecModal.mp-player .mpp-act.primary {
        background: linear-gradient(135deg, #6f42c1, #8b5cf6); border-color: transparent;
        color: #fff; font-weight: 600; box-shadow: 0 4px 12px rgba(111, 66, 193, .28);
    }
    #learnSecModal.mp-player .mpp-act:disabled { opacity: .55; }
    #learnSecModal.mp-player .mpp-act.done { border-color: #bfe6d2; color: #198754; background: #f2fbf6; }
    /* 课程提示卡 + 笔记入口 */
    #learnSecModal.mp-player .mpp-course {
        margin: 10px 16px 0; padding: 11px 13px; background: #F3EEFF;
        border-radius: 10px; font-size: 12.5px; line-height: 1.7; color: #262a3a;
    }
    #learnSecModal.mp-player .mpp-course b { color: #5B21B6; }
    #learnSecModal.mp-player .mpp-note {
        margin: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        display: flex; gap: 8px; align-items: center;
    }
    #learnSecModal.mp-player .mpp-note input {
        flex: 1 1 auto; min-width: 0; height: 40px; border: 1px solid #e6e0f5; border-radius: 10px;
        padding: 0 12px; font-size: 13px; background: #fff; outline: none;
    }
    #learnSecModal.mp-player .mpp-note input:focus { border-color: #8b5cf6; }
    #learnSecModal.mp-player .mpp-note button {
        flex: 0 0 auto; height: 40px; padding: 0 16px; border: 0; border-radius: 10px;
        background: #6f42c1; color: #fff; font-size: 13px;
    }
    /* 本节笔记：列表 + 输入框 + 全部笔记入口 */
    #learnSecModal.mp-player .mpp-notebox {
        margin: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        background: #fff; border: 1px solid #ece7fb; border-radius: 12px; padding: 11px 12px;
    }
    #learnSecModal.mp-player .mpp-note-h {
        font-size: 13px; font-weight: 600; color: #262a3a; display: flex; align-items: center; gap: 6px;
    }
    #learnSecModal.mp-player .mpp-note-h i { color: #6f42c1; }
    #learnSecModal.mp-player .mpp-note-h span { font-weight: 400; color: #9490a8; }
    #learnSecModal.mp-player .mpp-note-list { margin: 8px 0 4px; }
    #learnSecModal.mp-player .mpp-note-item { padding: 7px 0; border-top: 1px dashed #efeafb; }
    #learnSecModal.mp-player .mpp-note-item:first-child { border-top: 0; }
    #learnSecModal.mp-player .mpp-note-txt { font-size: 12.5px; line-height: 1.6; color: #262a3a; word-break: break-word; }
    #learnSecModal.mp-player .mpp-note-time { font-size: 11px; color: #9490a8; margin-top: 3px; }
    #learnSecModal.mp-player .mpp-note-reply { display: block; font-size: 11.5px; color: #5B21B6; margin-top: 3px; }
    #learnSecModal.mp-player .mpp-note-empty { font-size: 12px; color: #a9a5bb; padding: 4px 0 2px; }
    #learnSecModal.mp-player .mpp-note { margin: 6px 0 0; }
    #learnSecModal.mp-player .mpp-note-all {
        margin-top: 8px; font-size: 12px; color: #6f42c1; text-align: right;
    }
    /* 图片/文档类课件查看区 */
    #learnSecModal.mp-player .lm-imgstage { background: #17141F; }
    #learnSecModal.mp-player .lm-imgstage img { width: 100%; display: block; }
    #learnSecModal.mp-player .lm-filestage { padding: 36px 16px !important; text-align: center; }
    #learnSecModal.mp-player .lm-filestage .lm-fileicon { font-size: 52px; color: #A78BFA; }
    /* 全屏首次提示气泡 */
    #learnSecModal.mp-player .mpp-fsbubble {
        position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9;
        display: none; align-items: center; gap: 8px; font-size: 12.5px;
        background: rgba(0,0,0,.62); color: #fff; padding: 8px 16px; border-radius: 999px;
    }
    #learnSecModal.mp-player .mpp-fsbubble.show { display: flex; }
    /* 竖屏全屏态：黑底 + 视频占上方 + 下方控制条 */
    #learnSecModal.mp-player.mpp-fs { background: #000; }
    #learnSecModal.mp-player.mpp-fs .mpp-scroll { display: flex; flex-direction: column; overflow: hidden; }
    #learnSecModal.mp-player.mpp-fs .mpp-meta,
    #learnSecModal.mp-player.mpp-fs .mpp-hint,
    #learnSecModal.mp-player.mpp-fs .mpp-course,
    #learnSecModal.mp-player.mpp-fs .mpp-note,
    /* 全屏只保留画面与控制条：笔记卡片 / 上一节下一节不再占据画面下方空间 */
    #learnSecModal.mp-player.mpp-fs .mpp-notebox,
    #learnSecModal.mp-player.mpp-fs .mpp-actions { display: none !important; }
    /* 全屏态：画面铺满，控制条贴底，右下角全屏按钮加大并避开安全区 */
    #learnSecModal.mp-player.mpp-fs .lm-fsbtn {
        width: 42px; height: 42px; border-radius: 13px;
        right: calc(12px + env(safe-area-inset-right, 0px));
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
    #learnSecModal.mp-player.mpp-fs .lm-video-wrap { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
    /* 全屏态：接管手势（左右调进度 / 上下调音量），禁止浏览器滚动与前进后退 */
    #learnSecModal.mp-player.mpp-fs .lm-video-wrap { touch-action: none; }
    #learnSecModal.mp-player.mpp-fs .mpp-dock {
        background: rgba(0,0,0,.72); padding-bottom: calc(10px + var(--m-safe-b));
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    /* 竖屏全屏：顶栏浮层化，只留右上角「退出全屏」 */
    #learnSecModal.mp-player.mpp-fs .mpp-appbar {
        position: absolute; top: 0; left: 0; right: 0; z-index: 6;
        justify-content: flex-end; border-bottom: 0;
        background: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
    }
    #learnSecModal.mp-player.mpp-fs .mpp-scroll { flex: 1 1 auto; min-height: 0; }
    #learnSecModal.mp-player.mpp-fs .mpp-appbar .mpp-back,
    #learnSecModal.mp-player.mpp-fs .mpp-appbar .mpp-title { display: none; }
    /* 全屏沉浸：控件浮层 + 3s 自动隐藏 */
    #learnSecModal.mp-player.mpp-fs .mpp-appbar,
    #learnSecModal.mp-player.mpp-fs .mpp-dock { transition: opacity .25s ease, transform .25s ease; }
    #learnSecModal.mp-player.mpp-fs.mpp-ui-off .mpp-appbar { opacity: 0; pointer-events: none; }
    #learnSecModal.mp-player.mpp-fs.mpp-ui-off .mpp-dock { opacity: 0; pointer-events: none; transform: translateY(12px); }
    /* 竖屏全屏下退出按钮为白字浮层样式 */
    #learnSecModal.mp-player.mpp-fs .mpp-appbar .mpp-close { color: #fff; }




    /* 横屏沉浸：视频铺满，控件浮层化 */
    @media (orientation: landscape) and (min-width: 500px) {
        #learnSecModal.mp-player { background: #000; }
        #learnSecModal.mp-player .mpp-appbar {
            position: absolute; top: 0; left: 0; right: 0; z-index: 6;
            background: linear-gradient(180deg, rgba(0,0,0,.72), transparent); border-bottom: 0;
        }
        #learnSecModal.mp-player .mpp-back, #learnSecModal.mp-player .mpp-close { color: #fff; }
        #learnSecModal.mp-player .mpp-title { color: #fff; }
        #learnSecModal.mp-player .mpp-scroll { position: relative; display: flex; flex-direction: column; overflow: hidden; }
        #learnSecModal.mp-player .lm-video-wrap {
            flex: 1 1 auto; min-height: 0; aspect-ratio: auto; max-height: none;
        }
        #learnSecModal.mp-player .lm-video-wrap video {
            width: 100%; height: 100%; max-height: none; object-fit: contain;
        }
        #learnSecModal.mp-player .mpp-dock {
            position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
            background: linear-gradient(0deg, rgba(0,0,0,.8), transparent);
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            padding: 26px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        }
        #learnSecModal.mp-player .mpp-dock .lm-track { background: rgba(255,255,255,.28); }
        #learnSecModal.mp-player .mpp-dock .lm-zone { background: rgba(255,255,255,.22); }
        #learnSecModal.mp-player .mpp-dock .mpp-times { color: rgba(255,255,255,.82); }
        #learnSecModal.mp-player .mpp-dock .lm-speedbtn { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.24); }
        #learnSecModal.mp-player .mpp-dock .lm-mutebtn { color: #fff; }
        #learnSecModal.mp-player .mpp-dock .lm-volrange { background: rgba(255,255,255,.3); }
        #learnSecModal.mp-player .mpp-meta, #learnSecModal.mp-player .mpp-hint,
        #learnSecModal.mp-player .mpp-course,
        #learnSecModal.mp-player .mpp-note { display: none; }
        #learnSecModal.mp-player .mpp-controls { padding: 8px 0 0; }
        /* 在音量与全屏按钮之间预留「上一节 / 下一节」的位置（全屏按钮仍在最右端）
           注：用 margin 而不是控制条 padding-right，否则会把全屏按钮挤到按钮浮层下面 */
        #learnSecModal.mp-player .mpp-volwrap { margin-right: 186px; }
        /* 「上一节 / 下一节」：与底部控制条同一行，位于全屏按钮左侧，常驻可见 */
        #learnSecModal.mp-player .mpp-actions {
            position: absolute; z-index: 7;
            right: calc(60px + env(safe-area-inset-right, 0px));
            bottom: calc(11px + env(safe-area-inset-bottom, 0px));
            margin: 0; padding: 0; gap: 8px; align-items: center; pointer-events: none;
        }
        #learnSecModal.mp-player .mpp-actions .mpp-act { pointer-events: auto; }
        #learnSecModal.mp-player .mpp-actions .mpp-act {
            flex: 0 0 auto; min-height: 40px; padding: 0 12px; border-radius: 999px;
            border: 1px solid rgba(255,255,255,.22);
            background: rgba(255,255,255,.10); color: #fff; font-size: 13px;
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        }
        /* 中间「完成本节 / 已学习」在横屏沉浸态下隐藏（视频播完自动完成） */
        #learnSecModal.mp-player .mpp-actions .mpp-act:nth-child(2) { display: none; }
        #learnSecModal.mp-player .mpp-actions .mpp-act:last-child {
            background: linear-gradient(135deg, #6f42c1, #8b5cf6);
            border-color: transparent; color: #fff; font-weight: 600;
            box-shadow: 0 6px 18px rgba(111, 66, 193, .45);
        }
        #learnSecModal.mp-player .mpp-actions .mpp-act:disabled {
            opacity: .45; box-shadow: none; background: rgba(255,255,255,.10);
            color: rgba(255,255,255,.7);
        }
        /* 3s 无操作后自动隐藏浮层控件（上一节/下一节常驻，不隐藏） */
        #learnSecModal.mp-player .mpp-appbar,
        #learnSecModal.mp-player .mpp-dock { transition: opacity .25s ease; }
        #learnSecModal.mp-player.mpp-ui-off .mpp-appbar,
        #learnSecModal.mp-player.mpp-ui-off .mpp-dock { opacity: 0; pointer-events: none; }
    }

    /* 滚动条在移动端隐藏，更接近原生 */
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-thumb { background: #E4DFF6; }

    /* ==================== 11. 业务模块适配 ====================
       课程中心 / 课程分类 / 课程学习 / 考试 / 题库 / 用户等高频模块的
       自定义布局（多为 flex 行 + 固定宽度侧栏）在手机上改为纵向堆叠或横向滑动。
       注：.cc-* 样式由 ensureCcStyle() 注入到 <head> 末尾、优先级高于本文件，
       因此这里统一加 #content 前缀以提升权重，确保移动端规则生效。 */

    /* 11.1 页面级工具栏（约定带 mb-3 的 flex 行）：自动换行 + 控件自适应 */
    #content > .d-flex.mb-3,
    #content .card > .d-flex.mb-3 { flex-wrap: wrap !important; gap: 8px !important; }
    #content .d-flex.mb-3 > .d-flex { flex-wrap: wrap !important; gap: 8px !important; flex: 1 1 auto; min-width: 0; }
    #content .d-flex.mb-3 .form-control,
    #content .d-flex.mb-3 .form-select {
        flex: 1 1 140px;
        width: auto !important;
        min-width: 0;
    }
    #content .d-flex.mb-3 .input-group { flex: 1 1 100%; }
    #content .d-flex.mb-3 > .btn,
    #content .d-flex.mb-3 > .d-flex > .btn { flex: 0 0 auto; }
    /* 输入控件统一不溢出屏幕（含内联固定宽度） */
    #content .form-control, #content .form-select { max-width: 100%; }
    #content .um-table .form-select,
    #content .um-table .form-control { max-width: 100%; }

    /* 11.2 标签页 / 分段控件：单行横向滑动，避免换行 */
    #content .nav-tabs, #content .cl-tabs, #content .cc-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    #content .nav-tabs::-webkit-scrollbar,
    #content .cl-tabs::-webkit-scrollbar,
    #content .cc-tabs::-webkit-scrollbar { display: none; }
    #content .nav-tabs .nav-item, #content .cl-tabs .nav-item { flex: 0 0 auto; }
    #content .nav-tabs .nav-link { white-space: nowrap; padding: .45rem .7rem; font-size: 13.5px; }

    /* 11.3 课程中心：分类栏由左侧栏折叠为顶部卡片，课程网格自动两列 */
    #content .cc-page { flex-direction: column; gap: 12px; }
    #content .cc-side {
        width: 100%; flex: none;
        position: static; max-height: 44vh;
        padding: 12px;
    }
    #content .cc-main { width: 100%; padding: 12px; }
    #content .cc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    #content .cc-fbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding: 8px 10px;
        scrollbar-width: none;
    }
    #content .cc-fbar::-webkit-scrollbar { display: none; }
    #content .cc-fbar > * { flex: 0 0 auto; }
    #content .cc-dd-panel { min-width: 140px; max-width: calc(100vw - 48px); }
    #content .cc-menu-btn { width: 28px; height: 28px; font-size: 16px; }
    #content .cc-title {
        white-space: normal;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    #content .cc-sub { white-space: normal; }
    #content .cc-pager { justify-content: center; }
    #content .cc-bulk { position: static; }

    /* 11.4 课程分类：分类树与内容上下堆叠 */
    #content .cc-flex { flex-direction: column; gap: 12px; }
    #content .cc-tree { width: 100%; flex: none; max-height: 42vh; }
    #content .cc-right { width: 100%; }
    #content .cc-bwrap { flex-direction: column; align-items: stretch; gap: 10px; }
    #content .cc-toolbar { flex-wrap: wrap; }
    #content .cc-toolbar .cc-btn { flex: 1 1 auto; justify-content: center; }

    /* 11.5 课程分类弹层（ccm-*）全屏化 */
    .ccm-mask { padding: 0; align-items: stretch; }
    .ccm-box, .ccm-lg {
        width: 100%; max-width: none;
        height: 100%; max-height: none;
        border-radius: 0; padding: 16px;
    }
    .ccm-grid { grid-template-columns: 1fr; }
    .ccm-ft { padding-bottom: calc(10px + var(--m-safe-b)); }
    .ccm-ft .cc-btn { flex: 1 1 0; justify-content: center; }

    /* 11.6「添加题目」方式选择弹层 */
    #addQChoose { padding: 0; align-items: stretch !important; }
    #addQChoose > .card {
        width: 100% !important; max-width: none !important;
        height: 100%; border-radius: 0 !important;
        display: flex; flex-direction: column; justify-content: center;
    }

    /* 11.7 课程学习：筛选栏与标签页 */
    #content .cl-headbar { gap: 10px; }
    #content .cl-headbar .ms-auto { width: 100%; }
    #content .cl-headbar .ms-auto .form-control { width: 100% !important; }
    #content .cl-card .p-3 { padding: 12px !important; }

    /* 11.8 可见范围选择组件（课程发布/编辑弹窗） */
    #content .cvs-list { max-height: 34vh; }

    /* 尊重系统「减少动态效果」设置 */
    @media (prefers-reduced-motion: reduce) {
        .m-drawer, .m-drawer-mask, .m-tabbar .m-tab, .m-tabbar .m-tab i { transition: none !important; }
        table.m-cardify tr { animation: none !important; }
    }
}