/*!
 * dongniai mobile-shell.css v1.0.14 (2026-08-03)
 *
 * 7 个页面共用的统一移动端增强层：
 *   - /                                  (首页, ThinkPHP)
 *   - /price                             (价格页, ThinkPHP)
 *   - /dongniai/                         (Next.js)
 *   - /help/                             (Notion HTML)
 *   - /index/user/index.html             (FastAdmin 用户中心)
 *   - /index/user/login.html             (v6.84 大厂视觉)
 *   - /index/user/register.html          (v6.84 大厂视觉)
 *
 * 设计原则：
 *   1. PC 端 0 影响 — 所有 mobile-only 样式包在 @media(max-width:768px) 内
 *   2. 大厂视觉 — 多色渐变 + 玻璃态 + 三层阴影 + 触摸目标 ≥44px
 *   3. mobile-first 增强 — 不破坏 PC 端布局
 *   4. hamburger 抽屉 + 底部 Tab Bar — 跨 7 页一致
 *   5. 表格转卡片 — 用户中心 / 账单记录
 *   6. safe-area-inset — iPhone 刘海/底部小白条兼容
 *
 * 触发条件（任何一个）：
 *   - 老板说"做一套手机页面"
 *   - 老板说"像大厂产品"
 *   - 老板说"PC页面有的功能手机都要有"
 *
 * 验证清单（13 项矩阵）：
 *   1. viewport meta (width=device-width, initial-scale=1)
 *   2. 触摸目标 ≥44px
 *   3. input 字号 ≥16px (避免 iOS 自动 zoom)
 *   4. hamburger 菜单可点开/关闭
 *   5. 底部 Tab Bar 可点切换
 *   6. 表格在 ≤768px 转卡片布局
 *   7. hero h1 用 clamp 自适应
 *   8. 安全区 env(safe-area-inset-*)
 *   9. 不出现横向 scroll
 *   10. 表单错误提示可见
 *   11. 按钮不被遮挡
 *   12. console 0 错误
 *   13. 1s 内首屏渲染完成
 */

/* ================================================================
   Layer A — 通用基础 (所有 viewport, mobile-shell 必须的 reset)
   ================================================================ */
html.ios-snap body { -webkit-overflow-scrolling: touch; }

/* 防止 input focus 时 iOS 缩放 (font-size ≥ 16px) */
.mobile-input-noflicker input[type="text"],
.mobile-input-noflicker input[type="password"],
.mobile-input-noflicker input[type="email"],
.mobile-input-noflicker input[type="tel"],
.mobile-input-noflicker input[type="number"],
.mobile-input-noflicker textarea,
.mobile-input-noflicker select { font-size: 16px !important; }

/* ================================================================
   Layer B — Hamburger 按钮
   v1.0.4 (2026-07-27): 老板要求"去掉页面右上角三横的可展开按钮"
   JS 端 injectHamburger 已改成 no-op, CSS 端保留规则方便以后回滚
   ================================================================ */
.mobile-hamburger {
    display: none;
}

/* ================================================================
   Layer C — Hamburger Drawer (mobile only, default hidden)
   ================================================================ */
.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mobile-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}
.mobile-drawer-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.mobile-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 84%;
    max-width: 360px;
    background: #fff;
    box-shadow: -16px 0 48px rgba(15, 23, 42, 0.16);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mobile-drawer.is-open .mobile-drawer-panel {
    transform: translateX(0);
}
.mobile-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #F1F5F9;
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    color: #fff;
    flex-shrink: 0;
}
.mobile-drawer-head .title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mobile-drawer-head .close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobile-drawer-head .close:hover {
    background: rgba(255, 255, 255, 0.25);
}
.mobile-drawer-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 0 80px;
}
.mobile-drawer-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    color: #1E293B;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.18s;
    min-height: 48px;
}
.mobile-drawer-link i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: #64748B;
}
.mobile-drawer-link:hover,
.mobile-drawer-link:active {
    background: linear-gradient(90deg, rgba(79, 70, 229, 0.06), transparent);
    border-left-color: #4F46E5;
    color: #4F46E5;
}
.mobile-drawer-link.active {
    background: linear-gradient(90deg, rgba(79, 70, 229, 0.10), transparent);
    border-left-color: #4F46E5;
    color: #4F46E5;
    font-weight: 700;
}
.mobile-drawer-link.cta {
    background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    color: #fff;
    margin: 16px 22px;
    border-radius: 12px;
    border-left: 0;
    padding: 14px 22px;
    justify-content: center;
    box-shadow: 0 6px 20px -4px rgba(79, 70, 229, 0.45);
    font-weight: 700;
}
.mobile-drawer-link.cta:hover { color: #fff; background: linear-gradient(135deg, #4338CA 0%, #4F46E5 100%); }
/* 2026-07-30 老板 P0：所有"立即上课"右侧加"习题演练"（青绿渐变次级 CTA）*/
.mobile-drawer-link.cta-exercise {
    background: linear-gradient(135deg, #10B981 0%, #14B8A6 100%);
    color: #fff;
    margin: 0 22px 16px 22px;
    border-radius: 12px;
    border-left: 0;
    padding: 14px 22px;
    justify-content: center;
    box-shadow: 0 6px 20px -4px rgba(16, 185, 129, 0.45);
    font-weight: 700;
}
.mobile-drawer-link.cta-exercise:hover { color: #fff; background: linear-gradient(135deg, #059669 0%, #0D9488 100%); }
.mobile-drawer-divider {
    height: 1px;
    background: #F1F5F9;
    margin: 12px 22px;
}
.mobile-drawer-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 16px 22px 6px;
}

/* ================================================================
   Layer D — 底部 Tab Bar (mobile only, default hidden)
   ================================================================ */
.mobile-tabbar {
    display: none;
}
@media (max-width: 768px) {
    .mobile-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9998;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-top: 1px solid #E2E8F0;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.06);
        justify-content: space-around;
        align-items: stretch;
    }
    .mobile-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 4px;
        text-decoration: none;
        color: #64748B;
        font-size: 11px;
        font-weight: 500;
        /* v1.0.5 (2026-07-27): dongniai/help 没引用 FontAwesome → icon 渲染 0×0 → tab 塌陷到 44px
           首页引用了 fa 4.7 → icon 撑开到 22px → tab 自然到 53.59px
           为了让两个页面 tabbar 视觉高度一致 (且触摸目标 ≥44px), 设硬兜底 min-height: 56px
           后续如果切到 SVG icon 就删掉这个兜底 */
        min-height: 56px;
        border-radius: 10px;
        transition: color 0.2s, background 0.2s;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-tab i {
        font-size: 18px;
        line-height: 1;
    }
    .mobile-tab.is-active,
    .mobile-tab:hover {
        color: #4F46E5;
        background: rgba(79, 70, 229, 0.06);
    }
    .mobile-tab.is-primary {
        background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
        color: #fff;
        margin: 0 4px;
        box-shadow: 0 6px 16px -4px rgba(79, 70, 229, 0.45);
    }
    .mobile-tab.is-primary i {
        font-size: 22px;
    }
    .mobile-tab.is-primary:hover { color: #fff; }
    /* Body 底部留空间避免被 tabbar 遮挡 */
    body.has-mobile-tabbar {
        padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    }
    /* login/register 不显示 tabbar (已经是单页布局) */
    body.no-mobile-tabbar .mobile-tabbar { display: none !important; }
}

/* ================================================================
   Layer E — 通用 mobile 响应式补丁
   ================================================================ */
@media (max-width: 768px) {
    /* 1. 防横向 scroll */
    html, body {
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }
    /* 2. body 容器自适应 */
    body { font-size: 15px; }
    /* 3. 防止 iOS 橡皮筋 */
    .scroll-fix { -webkit-overflow-scrolling: touch; }
    /* 4. 安全区 padding */
    .safe-bottom { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    .safe-top { padding-top: calc(16px + env(safe-area-inset-top)); }
    /* 5. 表单控件触摸友好 */
    button, .btn, a.btn { min-height: 44px; }
    input[type="text"], input[type="password"], input[type="email"],
    input[type="tel"], input[type="number"], textarea, select {
        font-size: 16px !important;
        min-height: 44px;
    }
    /* 6. hero h1 自适应 (默认 fallback) */
    h1, .h1 { font-size: clamp(28px, 7vw, 56px) !important; }
    h2, .h2 { font-size: clamp(22px, 5.5vw, 36px) !important; }
    h3, .h3 { font-size: clamp(18px, 4.5vw, 26px) !important; }
    /* 7. 段落 */
    p { font-size: 14px; line-height: 1.6; }
    /* 8. 隐藏 PC-only 元素 */
    .pc-only { display: none !important; }
    /* 9. 显示 mobile-only 元素 */
    .mobile-only { display: block !important; }
}

/* ================================================================
   Layer F — 表格转卡片 (用户中心 / 账单记录)
   ================================================================ */
@media (max-width: 768px) {
    /* 触发条件：data-mobile-table 属性 */
    table[data-mobile-table="cards"] thead {
        display: none;
    }
    table[data-mobile-table="cards"],
    table[data-mobile-table="cards"] tbody,
    table[data-mobile-table="cards"] tr,
    table[data-mobile-table="cards"] td {
        display: block;
        width: 100%;
        background: transparent;
    }
    table[data-mobile-table="cards"] tr {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.04);
        margin-bottom: 12px;
        padding: 12px 14px;
        border: 1px solid #F1F5F9;
    }
    table[data-mobile-table="cards"] td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0 !important;
        border: 0 !important;
        font-size: 14px;
        text-align: left;
    }
    table[data-mobile-table="cards"] td::before {
        content: attr(data-mobile-label);
        font-weight: 600;
        color: #64748B;
        font-size: 12px;
        flex-shrink: 0;
        margin-right: 12px;
    }
    table[data-mobile-table="cards"] td.empty,
    table[data-mobile-table="cards"] td[colspan] {
        text-align: center !important;
        padding: 24px 12px !important;
        color: #94A3B8;
        display: block;
    }
    table[data-mobile-table="cards"] td[colspan]::before {
        display: none;
    }
}

/* ================================================================
   Layer G — FastAdmin sidenav 抽屉 (用户中心 mobile)
   ================================================================ */
@media (max-width: 768px) {
    /* v1.0.7 (2026-07-27): 老板要求去掉 user/index.html (用户中心 mobile)
       右下角 (col-md-3 顶部) 多出来的孤立汉堡按钮.
       common/sidenav.html 第 1 行有 <div class="sidebar-toggle"><i class="fa fa-bars"></i></div>,
       这是 FastAdmin 老模板的 PC 端 toggle, 但没有 onclick 处理器 (点了没反应),
       而且没 mobile 隐藏 CSS, 会在 16 个用户中心页面 (user/* recharge/* withdraw/* partner/* invite) 重复显示.
       mobile-shell 自己注入了 .sidenav-toggle-bar 替代它 (紫色 banner + 正确 handler),
       所以这里把它藏掉即可. PC 端无影响 (@media 内). */
    .sidebar-toggle {
        display: none !important;
    }
    .col-md-3:has(.sidenav),
    .sidebar-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .sidenav-toggle-bar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px;
        background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
        color: #fff;
        border-radius: 14px;
        margin-bottom: 16px;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
        font-size: 15px;
        font-weight: 600;
        min-height: 48px;
        -webkit-tap-highlight-color: transparent;
    }
    .sidenav-toggle-bar i.fa-bars { font-size: 16px; }
    .sidenav-toggle-bar .arrow { transition: transform 0.2s; }
    .sidenav-toggle-bar.open .arrow { transform: rotate(180deg); }
    .sidenav {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        background: #fff;
        padding: 24px;
        border-radius: 0 !important;
        margin: 0 !important;
        transform: translateY(-100%);
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
    }
    .sidenav.is-open {
        transform: translateY(0);
    }
    .sidenav-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9989;
        background: rgba(15, 23, 42, 0.5);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        display: none;
    }
    .sidenav-backdrop.show { display: block; }
    .sidenav-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: #F1F5F9;
        border: 0;
        color: #475569;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sidenav .list-group-heading {
        margin-top: 24px;
        font-size: 18px !important;
        color: #0F172A !important;
        border-bottom: 1px solid #E2E8F0;
        padding-bottom: 12px !important;
    }
    .sidenav .list-group-item a {
        font-size: 15px !important;
        padding: 14px 12px !important;
        min-height: 48px;
    }
}

/* ================================================================
   Layer H — 表格/操作 row 触摸优化 (适用于用户中心列表)
   ================================================================ */
@media (max-width: 768px) {
    /* bootstrap-style 操作按钮触摸友好 */
    .table .btn-xs,
    .btn-group .btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
        min-height: 36px;
    }
    /* avatar 更大 */
    .avatar-img img { width: 64px !important; height: 64px !important; }
}

/* ================================================================
   Layer I — 防止 dark mode + body min-height 问题
   ================================================================ */
@media (max-width: 768px) {
    /* 让内容区高度自适应 */
    .container { padding-left: 16px !important; padding-right: 16px !important; }
    .row { margin-left: -8px !important; margin-right: -8px !important; }
    .row > [class*="col-"] { padding-left: 8px !important; padding-right: 8px !important; }
}

/* ================================================================
   Layer J — 隐藏顶部 sticky nav (v1.0.1 2026-07-26)
   老板需求: /dongniai/ 和 /help/ 的手机页面要去掉顶部栏
   mobile-shell 注入的 hamburger + 底部 TabBar 接管导航
   仅 ≤768px 生效, PC 端 100% 保留
   ================================================================ */
@media (max-width: 768px) {
    /* /dongniai/ Next.js TopNav: nav.sticky.top-0 含 backdrop-blur + z-[1000] */
    body[data-mobile-shell="dongniai"] nav.sticky.top-0[class*="z-[1000]"],
    body[data-mobile-shell="dongniai"] nav.sticky.top-0.z-\[1000\] {
        display: none !important;
    }
    /* /help/ 静态 HTML 顶栏: 同款 sticky top-0 + z-[1000] + backdrop-blur */
    body[data-mobile-shell="help"] nav.sticky.top-0[class*="z-[1000]"],
    body[data-mobile-shell="help"] nav.sticky.top-0.z-\[1000\] {
        display: none !important;
    }
    /* 隐藏顶栏后, NCMain / main 内容需要吃掉原 68px 顶部空间 */
    body[data-mobile-shell="help"] .NCMain {
        padding-top: 0 !important;
        margin-top: 0 !important;
        min-height: calc(100vh - 60px) !important;
    }
    /* /dongniai/ app/page.tsx hero 区, 原 pt-16 留出 nav 高度, 现需要减小 */
    body[data-mobile-shell="dongniai"] main > section:first-of-type,
    body[data-mobile-shell="dongniai"] [class*="pt-16"]:first-child {
        padding-top: 16px !important;
    }
}

/* ================================================================
   Layer K — dongniai 课程目录 FAB 悬浮按钮 + 抽屉 (v1.0.2 2026-07-27)
   老板需求: /dongniai/ 手机页面的卡片变成悬浮按钮, 可点击展开, 默认悬浮
   PC 端 (≥1024px) 原 .course-catalog-sidebar 仍可见, FAB 隐藏
   仅 ≤768px 注入 FAB + 抽屉, 数据从 /api/my-courses fetch
   ================================================================ */

/* FAB 按钮: 右下角悬浮, 避开底部 TabBar */
.course-fab {
    display: none;
}
@media (max-width: 768px) {
    body[data-mobile-shell="dongniai"] .course-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        /* 避开底部 TabBar (64px) + safe-area-inset-bottom */
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        right: max(16px, env(safe-area-inset-right, 16px));
        z-index: 1090;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
        color: #fff;
        border: 0;
        box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45),
                    0 2px 6px rgba(15, 23, 42, 0.12);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    body[data-mobile-shell="dongniai"] .course-fab:active {
        transform: scale(0.94);
    }
    body[data-mobile-shell="dongniai"] .course-fab:hover {
        box-shadow: 0 10px 28px rgba(79, 70, 229, 0.55),
                    0 4px 10px rgba(15, 23, 42, 0.18);
        transform: translateY(-1px);
    }
    body[data-mobile-shell="dongniai"] .course-fab svg {
        width: 24px;
        height: 24px;
        color: #fff;
    }
    /* 角标: 课程数 */
    body[data-mobile-shell="dongniai"] .course-fab .badge {
        position: absolute;
        top: -4px;
        right: -4px;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 10px;
        background: #EF4444;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
        box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    }
    body[data-mobile-shell="dongniai"] .course-fab .badge[hidden] {
        display: none;
    }

    /* 抽屉 (默认隐藏, 屏幕外) */
    body[data-mobile-shell="dongniai"] .course-sheet {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1095;
        pointer-events: none;
    }
    body[data-mobile-shell="dongniai"] .course-sheet.is-open {
        pointer-events: auto;
    }
    body[data-mobile-shell="dongniai"] .course-sheet-mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.5);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        opacity: 0;
        transition: opacity 0.3s;
    }
    body[data-mobile-shell="dongniai"] .course-sheet.is-open .course-sheet-mask {
        opacity: 1;
    }
    body[data-mobile-shell="dongniai"] .course-sheet-panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 75vh;
        background: #fff;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -16px 48px rgba(15, 23, 42, 0.18);
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    body[data-mobile-shell="dongniai"] .course-sheet.is-open .course-sheet-panel {
        transform: translateY(0);
    }
    /* 抽屉头部 */
    body[data-mobile-shell="dongniai"] .course-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px 12px;
        border-bottom: 1px solid #E2E8F0;
    }
    body[data-mobile-shell="dongniai"] .course-sheet-head .title {
        font-size: 17px;
        font-weight: 700;
        color: #0F172A;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    body[data-mobile-shell="dongniai"] .course-sheet-head .close {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #F1F5F9;
        border: 0;
        color: #475569;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }
    /* Tabs */
    body[data-mobile-shell="dongniai"] .course-sheet-tabs {
        display: flex;
        gap: 6px;
        padding: 12px 20px 0;
    }
    body[data-mobile-shell="dongniai"] .course-tab {
        flex: 1;
        padding: 10px 14px;
        border-radius: 10px;
        background: #F1F5F9;
        border: 0;
        color: #475569;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        -webkit-tap-highlight-color: transparent;
    }
    body[data-mobile-shell="dongniai"] .course-tab.active {
        background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
        color: #fff;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    }
    /* 抽屉内容滚动区 */
    body[data-mobile-shell="dongniai"] .course-sheet-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 20px 20px;
    }
    /* Loading */
    body[data-mobile-shell="dongniai"] .course-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 40px 0;
        color: #94A3B8;
        font-size: 13px;
    }
    body[data-mobile-shell="dongniai"] .course-loading .spinner {
        width: 28px;
        height: 28px;
        border: 3px solid #E2E8F0;
        border-top-color: #4F46E5;
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    /* 空状态 */
    body[data-mobile-shell="dongniai"] .course-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 40px 20px;
        text-align: center;
    }
    body[data-mobile-shell="dongniai"] .course-empty .icon {
        font-size: 40px;
        opacity: 0.5;
    }
    body[data-mobile-shell="dongniai"] .course-empty .msg {
        font-size: 15px;
        font-weight: 600;
        color: #475569;
    }
    body[data-mobile-shell="dongniai"] .course-empty .hint {
        font-size: 13px;
        color: #94A3B8;
    }
    /* 课程条目 */
    body[data-mobile-shell="dongniai"] .course-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 14px 16px;
        margin-bottom: 8px;
        background: #F8FAFC;
        border-radius: 12px;
        text-decoration: none;
        color: #0F172A;
        transition: background 0.15s, transform 0.15s;
        border: 1px solid transparent;
        -webkit-tap-highlight-color: transparent;
    }
    body[data-mobile-shell="dongniai"] .course-item:active {
        background: #EEF2FF;
        border-color: #C7D2FE;
        transform: scale(0.98);
    }
    body[data-mobile-shell="dongniai"] .course-item-title {
        font-size: 15px;
        font-weight: 600;
        color: #0F172A;
        line-height: 1.4;
    }
    body[data-mobile-shell="dongniai"] .course-item-meta {
        font-size: 12px;
        color: #94A3B8;
    }
    /* ================================================================
       v1.0.6 (2026-07-27) 课程目录卡片 - 完整复刻 PC 端 course-catalog-card
       老板反馈: FAB 展开后应该显示"近期上课课程"+"管理课程"完整内容
       真因: 之前只渲染 1 个 Tab + 简陋列表, 没紫色课程头卡/状态徽章/课时展开/分页/失败 banner
       修复: 新增课程头卡 + 状态徽章 + 课时列表 + 失败 banner + 表单卡片 + 登录墙
       ================================================================ */
    /* 紫色渐变课程头卡 (courses Tab 用) */
    body[data-mobile-shell="dongniai"] .course-card {
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
        margin-bottom: 14px;
        border: 1px solid #E2E8F0;
    }
    body[data-mobile-shell="dongniai"] .course-card.is-failed {
        border-color: #FCA5A5;
    }
    body[data-mobile-shell="dongniai"] .course-card-head {
        background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
        padding: 14px 16px 12px;
        color: #fff;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        position: relative;
    }
    body[data-mobile-shell="dongniai"] .course-card.is-failed .course-card-head {
        background: linear-gradient(135deg, #EF4444 0%, #F43F5E 100%);
    }
    body[data-mobile-shell="dongniai"] .course-card-head-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    body[data-mobile-shell="dongniai"] .course-card-title {
        font-size: 14px;
        font-weight: 600;
        color: rgba(255,255,255,0.95);
        line-height: 1.35;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body[data-mobile-shell="dongniai"] .course-card-status {
        font-size: 11px;
        padding: 2px 8px;
        border-radius: 999px;
        background: rgba(255,255,255,0.2);
        color: #fff;
        flex-shrink: 0;
        white-space: nowrap;
    }
    body[data-mobile-shell="dongniai"] .course-card-meta {
        margin-top: 6px;
        font-size: 11px;
        color: rgba(255,255,255,0.7);
        display: flex;
        flex-wrap: wrap;
        gap: 4px 6px;
        line-height: 1.5;
    }
    body[data-mobile-shell="dongniai"] .course-card-meta .sep { opacity: 0.5; }
    /* 课程大纲标题 */
    body[data-mobile-shell="dongniai"] .course-outline-title {
        padding: 12px 16px 6px;
        font-size: 12px;
        font-weight: 600;
        color: #6366F1;
        letter-spacing: 0.4px;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    /* 课时列表 */
    body[data-mobile-shell="dongniai"] .course-lessons {
        max-height: 380px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    body[data-mobile-shell="dongniai"] .course-lesson {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 16px;
        font-size: 13px;
        cursor: pointer;
        border-bottom: 1px solid rgba(15,23,42,0.04);
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.15s;
    }
    body[data-mobile-shell="dongniai"] .course-lesson:last-child { border-bottom: 0; }
    body[data-mobile-shell="dongniai"] .course-lesson:active { transform: translateX(2px); }
    body[data-mobile-shell="dongniai"] .course-lesson.completed { background: rgba(16,185,129,0.08); }
    body[data-mobile-shell="dongniai"] .course-lesson.in-progress { background: rgba(59,130,246,0.08); }
    body[data-mobile-shell="dongniai"] .course-lesson.not-started { background: rgba(251,146,60,0.08); }
    body[data-mobile-shell="dongniai"] .course-lesson-title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #334155;
    }
    body[data-mobile-shell="dongniai"] .course-lesson.completed .course-lesson-title { color: #059669; }
    body[data-mobile-shell="dongniai"] .course-lesson-badge {
        font-size: 10px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 999px;
        color: #fff;
        flex-shrink: 0;
        white-space: nowrap;
    }
    body[data-mobile-shell="dongniai"] .course-lesson-badge.completed { background: #10B981; }
    body[data-mobile-shell="dongniai"] .course-lesson-badge.in-progress { background: #3B82F6; }
    body[data-mobile-shell="dongniai"] .course-lesson-badge.not-started { background: #FB923C; }
    /* 失败 banner + 重新生成 */
    body[data-mobile-shell="dongniai"] .course-failed {
        padding: 18px 16px 20px;
        background: rgba(254,226,226,0.5);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    body[data-mobile-shell="dongniai"] .course-failed-icon { font-size: 32px; }
    body[data-mobile-shell="dongniai"] .course-failed-msg {
        font-size: 13px;
        font-weight: 600;
        color: #B91C1C;
    }
    body[data-mobile-shell="dongniai"] .course-failed-hint {
        font-size: 11px;
        color: rgba(185,28,28,0.7);
        text-align: center;
        line-height: 1.5;
        max-width: 240px;
    }
    body[data-mobile-shell="dongniai"] .course-failed-btn {
        margin-top: 6px;
        padding: 8px 16px;
        border-radius: 10px;
        background: #EF4444;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        border: 0;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.2s, transform 0.1s;
    }
    body[data-mobile-shell="dongniai"] .course-failed-btn:active { transform: scale(0.97); background: #DC2626; }
    body[data-mobile-shell="dongniai"] .course-failed-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    /* forms Tab 卡片 */
    body[data-mobile-shell="dongniai"] .form-card {
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
        margin-bottom: 14px;
        border: 1px solid #E2E8F0;
    }
    body[data-mobile-shell="dongniai"] .form-card-head {
        background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
        padding: 12px 16px;
        color: #fff;
    }
    body[data-mobile-shell="dongniai"] .form-card-head-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    body[data-mobile-shell="dongniai"] .form-card-title {
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        line-height: 1.35;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body[data-mobile-shell="dongniai"] .form-card-status {
        font-size: 10px;
        padding: 2px 7px;
        border-radius: 999px;
        color: #fff;
        flex-shrink: 0;
        white-space: nowrap;
    }
    body[data-mobile-shell="dongniai"] .form-card-status.s-1 { background: #10B981; }
    body[data-mobile-shell="dongniai"] .form-card-status.s-2 { background: #F59E0B; }
    body[data-mobile-shell="dongniai"] .form-card-status.s--1 { background: #EF4444; }
    body[data-mobile-shell="dongniai"] .form-card-status.s-0 { background: #94A3B8; }
    body[data-mobile-shell="dongniai"] .form-card-progress {
        font-size: 10px;
        color: rgba(255,255,255,0.6);
        margin-left: 6px;
    }
    body[data-mobile-shell="dongniai"] .form-card-meta {
        margin-top: 4px;
        font-size: 11px;
        color: rgba(255,255,255,0.65);
    }
    body[data-mobile-shell="dongniai"] .form-card-body {
        padding: 12px 16px 8px;
        background: rgba(99,102,241,0.04);
        font-size: 11px;
        color: #64748B;
        line-height: 1.6;
    }
    body[data-mobile-shell="dongniai"] .form-card-progress-bar {
        margin-top: 6px;
        background: rgba(99,102,241,0.15);
        border-radius: 999px;
        height: 4px;
        overflow: hidden;
    }
    body[data-mobile-shell="dongniai"] .form-card-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #6366F1, #8B5CF6);
        transition: width 0.4s;
    }
    body[data-mobile-shell="dongniai"] .form-card-actions {
        padding: 8px 12px 10px;
        display: flex;
        gap: 8px;
        border-top: 1px solid rgba(15,23,42,0.04);
    }
    body[data-mobile-shell="dongniai"] .form-card-btn {
        flex: 1;
        padding: 7px 10px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px;
        border: 0;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        -webkit-tap-highlight-color: transparent;
        transition: all 0.2s;
    }
    body[data-mobile-shell="dongniai"] .form-card-btn.regenerate {
        background: #F59E0B;
        color: #fff;
    }
    body[data-mobile-shell="dongniai"] .form-card-btn.regenerate:active { background: #D97706; }
    body[data-mobile-shell="dongniai"] .form-card-btn.delete {
        background: rgba(239,68,68,0.1);
        color: #DC2626;
    }
    body[data-mobile-shell="dongniai"] .form-card-btn.delete:active { background: rgba(239,68,68,0.2); }
    body[data-mobile-shell="dongniai"] .form-card-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    /* 登录墙 */
    body[data-mobile-shell="dongniai"] .course-login-wall {
        padding: 50px 20px 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
    body[data-mobile-shell="dongniai"] .course-login-wall-icon {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.15));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        color: #6366F1;
    }
    body[data-mobile-shell="dongniai"] .course-login-wall-title {
        font-size: 15px;
        font-weight: 600;
        color: #4338CA;
    }
    body[data-mobile-shell="dongniai"] .course-login-wall-hint {
        font-size: 12px;
        color: rgba(99,102,241,0.7);
        line-height: 1.6;
        max-width: 240px;
    }
    body[data-mobile-shell="dongniai"] .course-login-wall-btn {
        margin-top: 8px;
        padding: 10px 20px;
        border-radius: 10px;
        background: linear-gradient(135deg, #6366F1, #8B5CF6);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        border: 0;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 4px 12px rgba(99,102,241,0.3);
        -webkit-tap-highlight-color: transparent;
    }
    body[data-mobile-shell="dongniai"] .course-login-wall-btn:active { transform: scale(0.97); }
}

/* ================================================================
   Layer L — dongniai mobile 强制隐藏 PC 端 sidebar (v1.0.3 2026-07-27)
   老板反馈: 手机页面卡片"还在", 默认应该显示 FAB 按钮, 点击才展开
   真因: .course-catalog-sidebar 有 inline style (position:fixed + top:64px + right:20px + display:flex),
         Tailwind hidden lg:block class 在 inline style 下失效
   修复: ≤768px 用 !important 强制 display:none, mobile 只看 FAB 按钮
   ================================================================ */
@media (max-width: 768px) {
    body[data-mobile-shell="dongniai"] .course-catalog-sidebar {
        display: none !important;
    }
}