/* 移植自 course-pool.html 的样式 */
:root {
    --font-title: 16px;
    --font-base: 14px;
    --tile-padding: 15px;
    --doc-padding: 10px;
    --btn-font: 12px;
}

/* =========================
 * 修复：栏目 Tabs 出现“方框/项目符号”
 * 背景：
 * - Amis Tabs/Nav 本质是 ul/li；在某些环境下（样式加载顺序/覆盖）list-style 可能未被清掉
 * - 结果：标签文字左侧出现“□/■”样式的方块（像没渲染）
 * 处理：
 * - 强制把 Tabs/Nav 的列表 marker 清掉（只作用于 #app-main 下，避免污染外部页面）
 * ========================= */
#app-main .cxd-Tabs-links,
#app-main .cxd-Tabs-links > li,
#app-main .cxd-Nav-Menu-root,
#app-main .cxd-Nav-Menu-root > li,
#app-main ul[role="tablist"],
#app-main ul[role="tablist"] > li {
    list-style: none !important;
}


/* 顶部多页导航（header nav：.fc-app-nav）也统一成“炫酷胶囊”风格 */
.fc-app-nav {
    --fc-tab-primary: #2563eb;
    /* 更明显：选中态用更深的蓝做对比 */
    --fc-tab-primary-2: #1d4ed8;
    --fc-tab-text: #0f172a;
    --fc-tab-border: rgba(226, 232, 240, 0.95);
    --fc-tab-glass: rgba(255, 255, 255, 0.94);
    --fc-tab-glass-2: rgba(255, 255, 255, 0.86);
    --fc-tab-idle-bg: rgba(15, 23, 42, 0.04);
    --fc-tab-idle-border: rgba(15, 23, 42, 0.08);
}

.fc-app-nav .cxd-Nav-Menu-root {
    background: linear-gradient(180deg, var(--fc-tab-glass), var(--fc-tab-glass-2));
    border: 1px solid var(--fc-tab-border);
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.fc-app-nav .cxd-Nav-Menu-item {
    border-radius: 999px;
    margin: 0 !important;
}

.fc-app-nav .cxd-Nav-Menu-item-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--fc-tab-idle-border);
    background: var(--fc-tab-idle-bg);
    color: #334155 !important;
    font-weight: 900;
    font-size: 13px;
    /* 避免中文笔画被裁切：line-height 不要太紧 */
    line-height: 1.2;
    /* Amis 默认可能为 overflow:hidden，导致文字/阴影被裁掉 */
    overflow: visible;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* 容器也允许溢出，避免选中态阴影/文字被裁切 */
.fc-app-nav .cxd-Nav-Menu-root,
.fc-app-nav .cxd-Nav-Menu-item-wrap {
    overflow: visible;
}

.fc-app-nav .cxd-Nav-Menu-item:not(.cxd-Nav-Menu-item-selected):hover .cxd-Nav-Menu-item-link {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
    background: rgba(37, 99, 235, 0.14);
    border-color: rgba(37, 99, 235, 0.35);
    color: #0b57d0 !important;
}

.fc-app-nav .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-link {
    /* 更明显：蓝底白字（人眼立刻识别） */
    background: linear-gradient(135deg, var(--fc-tab-primary), var(--fc-tab-primary-2));
    border-color: rgba(29, 78, 216, 0.9);
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.30);
}

.fc-app-nav .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-link::after {
    content: '';
    display: block;
    height: 2px;
    width: 14px;
    border-radius: 999px;
    margin-left: 6px;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 6px 14px rgba(255,255,255,0.35);
}

@media (max-width: 480px) {
    .fc-app-nav .cxd-Nav-Menu-root { padding: 5px; }
    .fc-app-nav .cxd-Nav-Menu-item-link { padding: 7px 12px; font-size: 12px; }
}

/* ChannelBoard Tabs Skin 已移除：恢复为系统默认样式 */

/* 课程池容器 */
.course-pool-container {
    padding: 10px;
}

/* =========================
 * 左侧 aside（cxd Layout 侧栏占位）
 * 现状：即使没放导航/内容，Amis Layout 仍会保留一条深色 aside（默认 180px）
 * 目标：变窄 + 颜色与“羊皮纸”体系一致；移动端尽量不占空间
 * ========================= */
/* 注意：生产端根容器是 #app-main（历史上也可能是 #app-view），两者都兼容 */
#app-main .cxd-Layout--withAside .cxd-Layout-asideWrap,
#app-main .cxd-Layout--withAside .cxd-Layout-aside,
#app-main .cxd-Layout--withAside .cxd-Layout-asideInner,
#app-view .cxd-Layout--withAside .cxd-Layout-asideWrap,
#app-view .cxd-Layout--withAside .cxd-Layout-aside,
#app-view .cxd-Layout--withAside .cxd-Layout-asideInner {
    /* Desktop: aside 随窗口宽度“柔性伸缩”，避免看起来“完全不随浏览器大小变化” */
    width: clamp(72px, 8vw, 140px) !important;
}

#app-main .cxd-Layout--withAside .cxd-Layout-aside,
#app-view .cxd-Layout--withAside .cxd-Layout-aside {
    /* 改成暖色浅底，避免左侧出现一大块“黑墙” */
    background: linear-gradient(180deg, rgba(251, 241, 212, 0.92), rgba(243, 229, 194, 0.92)) !important;
    border-right: 1px solid rgba(146, 94, 32, 0.18) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.45);
}

/* 移动端：侧栏占位会显得很突兀，直接收起（内容区全宽） */
/* 小屏桌面/平板：侧栏占位会显得很突兀，直接收起（内容区全宽） */
@media (max-width: 1024px) {
    #app-main .cxd-Layout--withAside .cxd-Layout-asideWrap,
    #app-main .cxd-Layout--withAside .cxd-Layout-aside,
    #app-view .cxd-Layout--withAside .cxd-Layout-asideWrap,
    #app-view .cxd-Layout--withAside .cxd-Layout-aside {
        width: 0 !important;
        display: none !important;
    }
    #app-main .cxd-Layout--withAside .cxd-Layout-content,
    #app-view .cxd-Layout--withAside .cxd-Layout-content {
        width: 100% !important;
    }
}

/* =========================
 * 移动端顶部黑色条（brandBar）
 * 现状：header 内部的 .cxd-Layout-brandBar 默认是深色（像“黑墙”）
 * 目标：改成与羊皮纸一致的暖色系，并提高图标对比度
 * ========================= */
#app-main .cxd-Layout-header .cxd-Layout-brandBar,
#app-view .cxd-Layout-header .cxd-Layout-brandBar {
    background: linear-gradient(180deg, rgba(251, 241, 212, 0.96), rgba(243, 229, 194, 0.96)) !important;
    border-bottom: 1px solid rgba(146, 94, 32, 0.18) !important;
    box-shadow: 0 6px 16px rgba(92, 51, 17, 0.10);
}

#app-main .cxd-Layout-header .cxd-Layout-brandBar .bui-icon,
#app-main .cxd-Layout-header .cxd-Layout-brandBar .iconfont,
#app-view .cxd-Layout-header .cxd-Layout-brandBar .bui-icon,
#app-view .cxd-Layout-header .cxd-Layout-brandBar .iconfont {
    color: rgba(47, 31, 15, 0.88) !important; /* 深棕，和羊皮纸一致 */
}

/* =========================
 * 课程/分组卡片（fc-card）皮肤：更“像产品”，避免灰白过于朴素
 * 说明：不改 schema / HTML 结构，仅通过 className=fc-card 做视觉增强
 * ========================= */
.fc-card {
    /* 浅黄色“羊皮纸”效果：暖黄底 + 细纹理 + 轻微暗角（不依赖图片资源） */
    position: relative;
    border: 1px solid rgba(146, 94, 32, 0.32) !important;
    border-radius: 16px !important;
    background-color: #fbf1d4 !important; /* 纸张底色 */
    background-image:
        /* 顶部受光 */
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.00) 38%),
        /* 暗角（vignette） */
        radial-gradient(120% 90% at 18% 12%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.0) 58%),
        radial-gradient(120% 90% at 92% 88%, rgba(92, 51, 17, 0.12), rgba(92, 51, 17, 0.0) 62%),
        /* 纸纤维纹理（非常轻） */
        repeating-linear-gradient(45deg, rgba(120, 73, 22, 0.035) 0px, rgba(120, 73, 22, 0.035) 1px, rgba(255, 255, 255, 0) 6px, rgba(255, 255, 255, 0) 12px),
        repeating-linear-gradient(-35deg, rgba(120, 73, 22, 0.02) 0px, rgba(120, 73, 22, 0.02) 1px, rgba(255, 255, 255, 0) 7px, rgba(255, 255, 255, 0) 14px) !important;
    box-shadow:
        0 10px 26px rgba(92, 51, 17, 0.10),
        0 2px 0 rgba(255, 255, 255, 0.45) inset;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.fc-card:hover {
    transform: translateY(-2px);
    border-color: rgba(146, 94, 32, 0.50) !important;
    box-shadow:
        0 16px 42px rgba(92, 51, 17, 0.16),
        0 0 0 1px rgba(212, 175, 55, 0.20) inset;
}

/* 头部：标题+时间层级更清晰 */
.fc-card .cxd-Card-header {
    padding: 14px 14px 10px 14px;
    border-bottom: 1px solid rgba(146, 94, 32, 0.16);
    /* 头部略亮，像纸张边缘受光 */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.0));
}
.fc-card .cxd-Card-title {
    font-size: 15px;
    font-weight: 900;
    color: #2f1f0f;
    letter-spacing: 0.2px;
    /* 默认：允许换行，但由具体容器（父/子卡片）决定最多显示几行 */
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

/* 父标签（课程卡片）：正常 1 行，最多 2 行 */
.fc-course-cards .cxd-Card-title {
    -webkit-line-clamp: 2;
}

/* 子标签（文档卡片）：最多 3 行 + 更小字号（密度更高） */
.fc-course-items .cxd-Card-title {
    font-size: 13px;
    -webkit-line-clamp: 3;
}
.fc-card .cxd-Card-subTitle {
    font-size: 12px;
    color: rgba(92, 51, 17, 0.62);
}

/* 内容区 */
.fc-card .cxd-Card-body {
    padding: 12px 14px;
}
.fc-card .text-muted {
    color: rgba(92, 51, 17, 0.62) !important;
    font-size: 12px;
}

/* 操作区：让“进入”/“详情”更像胶囊按钮（当前渲染是 cxd-Card-action，而非 primary button） */
.fc-card .cxd-Card-actions {
    padding: 10px 14px 14px 14px;
    /* 回退到更“好看”的经典模式：flex + 自动换行
       - 观感更像之前的“胶囊按钮组”
       - 仍然防裁切：允许换行，并确保按钮 max-width:100% */
    display: flex;
    /* 居中：避免按钮被拉到两侧边缘（用户反馈“位置不对”） */
    justify-content: center;
    /* 横向一行展示“打开 + 详情”，避免被 .cxd-Card-action{width:100%} 撑成两行 */
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    /* 控制按钮组最大宽度，避免在大卡片上显得“太分散” */
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.fc-card .cxd-Card-actions > * {
    /* 两个按钮同一行：打开更大、详情更小 */
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
}
/* 让第一个动作（通常是“打开/进入”）更突出；其余动作（如“详情”）保持更小 */
.fc-card .cxd-Card-actions > *:first-child {
    flex: 2 1 0;
}
.fc-card .cxd-Card-actions > *:not(:first-child) {
    flex: 1 1 0;
}

/* Icon-only action (e.g. detail as a save-style icon) */
.fc-card .cxd-Card-action.fc-card-action-icon,
.fc-card .cxd-Button.fc-card-action-icon {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    padding: 0 !important;
    justify-content: center !important;
}
.fc-card .cxd-Card-action.fc-card-action-icon i,
.fc-card .cxd-Button.fc-card-action-icon i {
    font-size: 15px;
    line-height: 1;
}

/* 关键修复：
   之前 .cxd-Card-action 被强制 width:100%，导致按钮一定上下堆叠。
   在 actions 容器内覆写为 auto，让 flex 生效，才能形成“打开(大)+详情(小)”的同一行布局。 */
.fc-card .cxd-Card-actions .cxd-Card-action,
.fc-card .cxd-Card-actions .cxd-Button,
.fc-card .cxd-Card-actions > .cxd-Card-action,
.fc-card .cxd-Card-actions > .cxd-Button {
    width: auto !important;
    max-width: 100% !important;
}

/* 在 flex item 内部，让真实按钮填满自身宽度（而不是全卡片宽度） */
.fc-card .cxd-Card-actions .cxd-Button {
    width: 100% !important;
}
.fc-card .cxd-Card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 防裁切：不允许溢出卡片宽度（卡片本身 overflow:hidden） */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* 按钮不要太“厚”：减少高度占比 */
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    /* 纸面上用教育蓝做强调，形成“羊皮纸 + 蓝印章”对比 */
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    border: 1px solid rgba(29, 78, 216, 0.92) !important;
    color: #ffffff !important;
    font-weight: 900;
    font-size: 12px;
    line-height: 1.1;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none !important;
}

/* 同时兼容 actions 渲染为 Button 的场景 */
.fc-card .cxd-Card-actions .cxd-Button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 38px;
    box-sizing: border-box;
    /* 兜底：让 button 也保持“经典胶囊”观感 */
    padding: 8px 14px;
    font-size: 12px;
    line-height: 1.1;
}
.fc-card .cxd-Card-action:hover {
    filter: saturate(1.08) contrast(1.05);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.28);
}
.fc-card .cxd-Button--primary {
    border-radius: 999px !important;
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    border-color: rgba(29, 78, 216, 0.92) !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22) !important;
}
.fc-card .cxd-Button--primary:hover {
    filter: saturate(1.1) contrast(1.05);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.28) !important;
}

/* =========================
 * 通知条目（list 模式）做成“卡片同款皮肤”
 * - 复用 .fc-card 的羊皮纸背景/阴影
 * - 仍保持 1~2 行信息密度（不做大按钮占位）
 * ========================= */
.fc-notice-item-cardlike {
    cursor: pointer;
    user-select: none;
}
.fc-notice-item-cardlike:active {
    transform: translateY(0) scale(0.998);
}
.fc-notice-item-cardlike .fc-notice-item-title {
    color: #2f1f0f;
}
.fc-notice-item-cardlike .fc-notice-item-time {
    color: rgba(92, 51, 17, 0.62);
}
.fc-notice-item-cardlike .fc-notice-item-time--md {
    display: none;
}
@media (orientation: portrait) {
    .fc-notice-item-cardlike .fc-notice-item-time--full {
        display: none;
    }
    .fc-notice-item-cardlike .fc-notice-item-time--md {
        display: inline;
    }
}
.fc-notice-item-detail-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border: 1px solid rgba(29, 78, 216, 0.92);
    color: #fff;
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
    white-space: nowrap;
}

/* 课程列表布局 */
.course-list-layout {
    display: grid;
    grid-template-columns: minmax(240px, 280px) 1fr;
    gap: 20px;
    min-height: 360px;
    position: relative;
}

/* 课程卡片网格：避免平板出现“狭长条”导致内容不可见
 * - 父标签（课程卡片）：更宽，长宽比更稳（<= 1.5）
 * - 子标签（文档卡片）：略窄但仍避免过细（<= 2.5）
 */
.fc-course-cards,
.fc-course-items {
    display: grid;
    gap: 16px;
    align-items: stretch;
}
.fc-course-cards {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.fc-course-items {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* 平板：横竖屏自适应
 * - 竖屏：允许更细长（更多列）
 * - 横屏：更扁平（更少列、更宽）
 */
@media (min-width: 821px) and (orientation: portrait) {
    .fc-course-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
    .fc-course-items { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (min-width: 821px) and (orientation: landscape) {
    /* 横屏更扁：进一步加大最小宽度，强制更少列 */
    .fc-course-cards { grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); } /* 父标签：稍许更扁 */
    .fc-course-items { grid-template-columns: repeat(auto-fill, minmax(620px, 1fr)); } /* 子标签：强烈更扁 */
}

/* 平板横屏：子标签区域（右侧抽屉）更大 */
@media (min-width: 821px) and (max-width: 1400px) and (orientation: landscape) {
    .fc-course-drawer {
        width: 88vw !important;
        max-width: 1400px !important;
    }
}
.fc-course-cards .cxd-Card,
.fc-course-items .cxd-Card {
    width: 100%;
    min-width: 0;
}

/* 移动端适配 */
@media (max-width: 820px) {
    .course-list-layout {
        grid-template-columns: 1fr;
    }
    .course-master-panel {
        display: none; /* 默认隐藏左侧 */
    }
    .course-master-panel.active {
        display: flex;
        position: absolute;
        inset: 0;
        z-index: 10;
        background: white;
        height: 100%;
    }
    /* 手机：单列为主，避免过细 */
    .fc-course-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
    .fc-course-items { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
}

/* 顶部栏：隐藏“组织号-xxxx”胶囊（避免重复占位） */
#app-shell .fc-org-pill,
#app-shell .fc-org-pill-static {
    display: none !important;
}
/* 手机端用户胶囊仅保留图标 */
@media (max-width: 820px) {
    #app-shell .fc-user-pill .cxd-Button-label {
        display: none !important;
    }
}

/* 小屏竖屏：抽屉全宽，避免内容被挤到屏外 */
@media (max-width: 820px) {
    .fc-course-drawer,
    .fc-course-drawer.cxd-Drawer,
    .fc-course-drawer .cxd-Drawer,
    .fc-course-drawer .cxd-Drawer--right {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateX(0) !important;
        z-index: 3000 !important;
    }
    .fc-course-drawer .cxd-Drawer-content,
    .fc-course-drawer .cxd-Drawer-main,
    .fc-course-drawer .cxd-Drawer-body {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
    /* 竖屏：去掉抽屉内多余留白 */
    .fc-course-drawer .cxd-Drawer-content,
    .fc-course-drawer .cxd-Drawer-body {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .fc-course-drawer .cxd-Drawer-body > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .fc-course-items {
        grid-template-columns: 1fr !important;
    }
}

/* 子标签抽屉更贴右边线：减少右侧留白（不同 amis 版本 class 可能不同，做多路兜底） */
.fc-course-drawer,
.fc-course-drawer.cxd-Drawer,
.fc-course-drawer .cxd-Drawer,
.fc-course-drawer .cxd-Drawer--right {
    right: 0 !important;
    left: auto !important;
    margin-left: auto !important;
}
.fc-course-drawer .cxd-Drawer-content,
.fc-course-drawer .cxd-Drawer-body,
.fc-course-drawer .cxd-Drawer-main,
.fc-course-drawer .cxd-Drawer-inner,
.fc-course-drawer .cxd-Modal-content,
.fc-course-drawer .cxd-Modal-body {
    padding-right: 8px !important;
}

/* 平板竖屏：抽屉全宽并强制贴边，确保内容可见 */
@media (min-width: 821px) and (orientation: portrait) {
    .fc-course-drawer,
    .fc-course-drawer.cxd-Drawer,
    .fc-course-drawer .cxd-Drawer,
    .fc-course-drawer .cxd-Drawer--right {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateX(0) !important;
        z-index: 3000 !important;
    }
    .fc-course-drawer .cxd-Drawer-content,
    .fc-course-drawer .cxd-Drawer-main,
    .fc-course-drawer .cxd-Drawer-body {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 平板横屏：子标签区域更大（更贴右、占更宽） */
@media (min-width: 821px) and (orientation: landscape) {
    .fc-course-drawer {
        width: 92vw !important;
        max-width: 1600px !important;
    }
}

/* 修复：弹窗层级（非常关键）
   现象：课程文件列表抽屉（fc-course-drawer）为了解决遮挡问题被提高到 z-index:3000，
   但 Amis 的 “2th/3th” 弹窗默认 z-index 仍在 1400/1500 左右，导致：
   - 点“详情(💾)”其实已创建“文件详情”弹窗，但被课程抽屉盖住 → 用户感觉“没弹窗”
   这里显式抬高 2th+ 层级，保证“文件详情”永远在最上层。
*/
.cxd-Modal--2th { z-index: 3100 !important; }
.cxd-Modal--3th { z-index: 3200 !important; }
.cxd-Modal--4th { z-index: 3300 !important; }

/* 手机：避免组织名被竖排/旋转占用过多空间 */
@media (max-width: 820px) {
    #app-main [style*="writing-mode"] {
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
    }
}

/* 左侧：课程文件夹列表 */
.course-master-panel {
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    border-radius: 0; /* Remove border-radius for master panel to look like sidebar */
    padding: 10px 0; /* Remove horizontal padding */
    display: flex;
    flex-direction: column;
    gap: 2px; /* Tighter gap */
    overflow-y: auto;
    max-height: 100%;
}

.folder-list-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.course-folder-item {
    /* Basic reset, style injected by JS mostly but keeping defaults here */
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #334155;
    border-left: 3px solid transparent;
    transition: background 0.1s;
}

.course-folder-item:hover {
    background-color: #f1f5f9;
}

.course-folder-item.active {
    background-color: #eff6ff; /* Light blue */
    color: #2563eb;
    border-left-color: #2563eb;
    font-weight: 500;
}

.course-folder-badge {
    background: rgba(59,130,246,0.15);
    color: #1d4ed8;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

/* 右侧：详情与文档列表 */
.course-detail-panel {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.course-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.doc-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.doc-entry:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.doc-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.doc-info {
    flex: 1;
}

.doc-title {
    font-size: 15px;
    color: #334155;
    font-weight: 500;
    margin-bottom: 4px;
}

.doc-meta {
    font-size: 12px;
    color: #94a3b8;
}

/* 通知样式 */
.notice-item {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-left: 4px solid #2563eb;
}

.notice-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
}

.notice-title {
    font-size: 16px;
    font-weight: bold;
    color: #1e293b;
    margin-bottom: 6px;
}

.notice-content {
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
}

.notice-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
}

.notice-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background: white;
}

.notice-btn.primary {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
}

/* 搜索框 */
.search-box {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: white;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    margin-bottom: 10px;
}
.search-box input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 13px;
    margin-left: 8px;
}