/**
 * 全局样式重置
 * 清除默认边距和内边距，设置盒模型为border-box
 */
* {
    margin: 0;          /* 清除所有元素的外边距 */
    padding: 0;         /* 清除所有元素的内边距 */
    box-sizing: border-box;  /* 设置盒模型为border-box，宽度包含边框和内边距 */
}

/**
 * 页面基础样式
 * 设置字体、背景色、文本颜色和最小高度
 */
body {
    font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  /* 设置页面字体 */
    background-color: #e8f4fc;      /* 设置页面背景色为浅蓝色 */
    color: #333;                    /* 设置默认文本颜色为深灰色 */
    min-height: 100vh;              /* 设置最小高度为视口高度 */
    margin: 0;                      /* 清除默认边距 */
}

/* 各页面主题色 */
body.page-index { --theme-color: #1e88e5; }      /* 主页主题色 - 蓝色 */
body.page-design { --theme-color: #43a047; }     /* 课程设计页主题色 - 绿色 */
body.page-config { --theme-color: #ff7043; }     /* 课程配置页主题色 - 橙色 */
body.page-material { --theme-color: #9c27b0; }   /* 物料制作页主题色 - 紫色 */

/**
 * 整体布局容器
 */
.spa-shell {
    display: flex;           /* 左右布局 */
    min-height: 100vh;       /* 最小高度为视口高度 */
}

/**
 * 左侧导航栏样式
 */
.sidebar {
    width: 180px;                                    /* 导航栏宽度 */
    background: linear-gradient(180deg, var(--theme-color) 0%, color-mix(in srgb, var(--theme-color) 70%, white) 50%, color-mix(in srgb, var(--theme-color) 50%, white) 100%);  /* 主题色渐变背景 */
    color: #fff;                                     /* 白色文本 */
    padding: 25px 15px;                              /* 内边距 */
    position: fixed;                                 /* 固定定位 */
    height: 100vh;                                   /* 高度占满视口 */
    overflow-y: auto;                                /* 垂直滚动 */
    z-index: 100;                                    /* 层级 */
    user-select: none;                               /* 禁止文本选择 */
    -webkit-user-select: none;                       /* Safari浏览器兼容 */
    -moz-user-select: none;                          /* Firefox浏览器兼容 */
    -ms-user-select: none;                           /* IE浏览器兼容 */
}

/* Logo区域样式 */
.logo {
    text-align: center;        /* 居中对齐 */
    margin-bottom: 20px;       /* 底部外边距 */
    padding-bottom: 15px;      /* 底部内边距 */
    border-bottom: 1px solid rgba(255,255,255,0.2); /* 底部边框分隔线 */
}

.logo p {
    font-size: 18px;   /* 中文Logo字体大小 */
    font-weight: 600;  /* 加粗 */
    margin-bottom: 4px; /* 底部间距 */
    color: #fff;       /* 白色 */
}

.logo h2 {
    font-size: 12px;   /* 英文Logo字体大小 */
    margin-bottom: 8px; /* 底部间距 */
    color: rgba(255,255,255,0.85);  /* 半透明白色 */
    font-weight: 400;  /* 正常字重 */
}

/* 导航菜单样式 */
.nav-menu {
    list-style: none;   /* 去除列表默认样式 */
}

.nav-menu li {
    margin-bottom: 8px; /* 列表项之间的间距 */
}

.nav-menu a {
    display: block;                  /* 块级元素 */
    padding: 14px 12px;             /* 内边距 */
    color: rgba(255,255,255,0.95);  /* 文本颜色 */
    text-decoration: none;           /* 去除下划线 */
    border-radius: 8px;              /* 圆角 */
    transition: all 0.3s ease;       /* 过渡动画 */
    font-size: 17px;                 /* 字体大小 */
    text-align: center;              /* 居中对齐 */
}

.nav-menu a:hover {
    background-color: rgba(255,255,255,0.2);  /* 悬停时背景色 */
    color: #fff;                               /* 悬停时文本颜色 */
}

.nav-menu a.active {
    background-color: rgba(255,255,255,0.3);  /* 激活状态背景色 */
    color: #fff;                               /* 激活状态文本颜色 */
}

/* 课线选择器样式 */
.track-selector {
    position: relative;              /* 相对定位，作为下拉框的参考 */
    background: rgba(255,255,255,0.1); /* 半透明白色背景 */
    border-radius: 12px;             /* 圆角 */
    padding: 5px;                   /* 内边距 */
    margin-bottom: 10px;             /* 底部间距 */
}

.track-label {
    font-size: 12px;                           /* 标签字体大小 */
    color: rgba(255,255,255,0.7);           /* 半透明颜色 */
    margin-bottom: 6px;                      /* 底部间距 */
    text-align: center;                     /* 居中对齐 */
}

.track-display {
    display: flex;                          /* 弹性布局 */
    justify-content: space-between;         /* 两端对齐 */
    align-items: center;                    /* 垂直居中 */
    background: rgba(255,255,255,0.2);     /* 半透明背景 */
    border-radius: 8px;                     /* 圆角 */
    padding: 10px 12px;                    /* 内边距 */
    cursor: pointer;                        /* 鼠标指针样式 */
    user-select: none;                      /* 禁止文本选择 */
}

.track-display:hover {
    background: rgba(255,255,255,0.3);  /* 悬停时加深背景色 */
}

#track-name {
    font-size: 15px;      /* 课线名称字体大小 */
    font-weight: 500;     /* 中等字重 */
    color: #fff;          /* 白色 */
}

.track-arrow {
    font-size: 10px;                         /* 箭头字体大小 */
    color: rgba(255,255,255,0.8);           /* 半透明颜色 */
    transition: transform 0.3s ease;         /* 旋转过渡动画 */
}

.track-dropdown {
    position: absolute;                     /* 绝对定位 */
    top: 70px;                                 /* 顶部对齐 */
    left: 0;                                /* 左侧对齐 */
    right: 0;                               /* 右侧对齐 */
    width: 100%;                            /* 宽度100% */
    background: var(--theme-color);         /* 主题色背景 */
    border-radius: 12px;                    /* 圆角 */
    list-style: none;                       /* 去除列表样式 */
    padding: 8px 0;                         /* 内边距 */
    box-shadow: 0 4px 20px rgba(0,0,0,0.3); /* 阴影效果 */
    display: none;                          /* 默认隐藏 */
    max-height: 200px;                      /* 最大高度 */
    overflow-y: auto;                       /* 垂直滚动 */
}

.track-dropdown.show {
    display: block;  /* 显示下拉框 */
}

.track-dropdown li {
    padding: 10px 16px;                  /* 内边距 */
    color: #fff;                         /* 白色文本 */
    cursor: pointer;                     /* 鼠标指针样式 */
    font-size: 14px;                     /* 字体大小 */
    transition: background 0.2s ease;    /* 背景过渡动画 */
}

.track-dropdown li:hover {
    background: rgba(255,255,255,0.2);  /* 悬停背景色 */
}

.track-dropdown li.active {
    background: rgba(255,255,255,0.3);  /* 选中状态背景色 */
    color: #fff;                         /* 白色文本 */
    font-weight: 500;                    /* 中等字重 */
}

/* 时间显示区域样式 */
.time-display {
    position: absolute;                  /* 绝对定位 */
    bottom: 20px;                        /* 距离底部20px */
    left: 10px;                          /* 距离左边10px */
    right: 10px;                         /* 距离右边10px */
    text-align: center;                  /* 居中对齐 */
    padding: 10px 5px;                  /* 内边距 */
    background: rgba(255,255,255,0.15); /* 半透明背景 */
    border-radius: 12px;                  /* 圆角 */
}


#time-part {
    font-size: 28px;    /* 时间字体大小 */
    font-weight: 700;   /* 加粗 */
    color: #fff;        /* 白色 */
    margin-bottom: 4px; /* 底部间距 */
}

#date-part {
    font-size: 14px;    /* 日期字体大小 */
    color: rgba(255,255,255,0.85);  /* 半透明白色 */
}

/* 开课日倒计时样式 */
#countdown-display {
    position: absolute;                  /* 绝对定位 */
    bottom: 110px;                        /* 距离底部80px（在时间显示上方） */
    left: 10px;                          /* 距离左边10px */
    right: 10px;                         /* 距离右边10px */
    text-align: center;                  /* 居中对齐 */
    padding: 10px 5px;                  /* 内边距 */
    background: rgba(255, 100, 100, 0.2); /* 红色半透明背景 */
    border-radius: 12px;                  /* 圆角 */
}

#countdown-title {
    font-size: 20px;       /* 标题字体大小 */
    font-weight: 600;      /* 中等加粗 */
    color: #ff0000;        /* 红色 */
    margin-bottom: 4px;    /* 底部间距 */
}

#countdown-text {
    font-size: 16px;       /* 倒计时字体大小 */
    color: #ff0000;  /* 红色 */
    font-weight: 500;      /* 稍粗 */
}

/* 周会倒计时样式 */
#meeting-weekly {
    position: absolute;                  /* 绝对定位 */
    bottom: 190px;                       /* 距离底部140px（在开课日倒计时上方） */
    left: 10px;                          /* 距离左边10px */
    right: 10px;                         /* 距离右边10px */
    text-align: center;                  /* 居中对齐 */
    padding: 10px 5px;                  /* 内边距 */
    background: rgba(0, 0, 255, 0.15); /* 半透明背景 */
    border-radius: 12px;                  /* 圆角 */
}

#meeting-text {
    font-size: 18px;       /* 倒计时字体大小 */
    color: #fff;        /* 白色 */
    font-weight: 500;      /* 稍粗 */
}

/**
 * 主内容区域样式
 */
.content {
    margin-left: 180px;           /* 左侧留出导航栏宽度 */
    padding: 0px;                /* 内边距 */
    height: 100vh;                /* 固定高度为视口高度 */
    width: calc(100% - 180px);    /* 宽度减去侧边栏宽度 */
    box-sizing: border-box;       /* 确保padding包含在宽度内 */
}

/* SPA内容插槽 */
#spa-outlet {
    display: flex;                /* 使用弹性布局 */
    flex-direction: column;       /* 垂直排列子元素 */
    height: 100%;                 /* 占满父容器高度 */
    width: 100%;                  /* 占满父容器宽度 */
    position: relative;           /* 相对定位，作为子元素绝对定位的参考 */
}

/* SPA页面容器 */
.spa-page-container {
    display: none;                /* 默认隐藏 */
    flex-direction: column;       /* 垂直排列 */
    flex: 1;                      /* 填充剩余空间 */
    min-height: 0;                /* 允许收缩 */
    overflow: hidden;             /* 隐藏溢出 */
}

.spa-page-container.active {
    display: flex;                /* 激活时显示 */
}

/* 中间内容区域样式 */
.main-content {
    background: #fff;                            /* 白色背景 */
    border-radius: 12px;                         /* 圆角 */
    padding: 10px;                               /* 内边距 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);    /* 阴影效果 */
    display: flex;                               /* 弹性布局 */
    flex-direction: column;                       /* 垂直排列子元素 */
    gap: 20px;                                   /* 子元素间距 */
    flex: 1;                                     /* 自动填充剩余空间 */
    width: 100%;                                 /* 占满父容器宽度 */
    overflow: hidden;                            /* 隐藏溢出内容 */
    min-height: 600px;                           /* 最小高度 */
}

/* 应用网格容器 - 三列布局 */
.app-grid-container {
    display: flex;                               /* 弹性布局 */
    height: 200px;                               /* 固定高度 */
    gap: 10px;                                   /* 列之间的间距 */
    padding: 0px 0;                             /* 上下内边距 */
    width: 100%;                                 /* 占满宽度 */
    box-sizing: border-box;                      /* 确保padding包含在宽度内 */

}

/* 应用网格列 */
.app-grid-column {
    flex: 1;                                     /* 根据内容自动分配宽度 */
    background: #e8f4fc;                            /* 白色背景 */
    border-radius: 12px;                         /* 圆角 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);    /* 阴影效果 */
    padding: 10px;                               /* 内边距 */
    overflow: hidden;                            /* 隐藏溢出内容 */
    display: flex;                               /* 弹性布局 */
    flex-direction: column;                       /* 垂直排列 */
}

.app-grid-column .category-title {
    margin: 0 0 10px 0;                         /* 底部外边距 */
    font-size: 14px;                             /* 字体大小 */
    font-weight: 600;                            /* 字体粗细 */
    color: #333;                                 /* 字体颜色 */
    padding-bottom: 10px;                        /* 底部内边距 */
    border-bottom: 1px solid #eee;               /* 底部边框 */
}

.app-grid-column .app-grid {
    display: flex;                               /* 弹性布局 */
    flex-wrap: wrap;                             /* 自动换行 */
    gap: 10px;                                   /* 按钮间距 */
    flex: 1;                                     /* 填充剩余空间 */
    overflow-y: auto;                            /* 垂直滚动 */
}

/* 左侧内容区域样式 */
.main-content-left {
    flex: 1;                               /* 占据剩余空间 */
    background: #f2f2f2be;                 /* 半透明背景 */
    border-radius: 12px;                   /* 圆角 */
    padding: 10px;                         /* 内边距 */
    display: flex;                         /* 弹性布局 */
    flex-direction: column;                 /* 垂直排列 */
    min-height: 0;                         /* flex高度计算 */
    overflow: hidden;                      /* 隐藏溢出内容 */
}

.main-content-left .embed-wrap {
    flex: 1;                   /* 占据剩余空间 */
    display: flex;             /* 弹性布局 */
    flex-direction: column;    /* 垂直排列 */
    min-height: 0;             /* flex高度计算 */
}

.embed-frame {
    flex: 1;                /* 占据剩余空间 */
    width: 100%;            /* 宽度100% */
    min-height: 60vh;       /* 最小高度 */
    border: 0;              /* 无边框 */
    display: block;         /* 块级显示 */
}

.design-frame {
    flex: 1;                /* 占据剩余空间 */
    width: 100%;            /* 宽度100% */
    height: calc(100vh - 80px);  /* 高度减去边距 */
    border: 0;              /* 无边框 */
    display: block;         /* 块级显示 */
    border-radius: 8px;     /* 圆角 */
}

.video-edit-frame {
    flex: 1;               /* 填充剩余空间 */
    border: 0;              /* 无边框 */
    display: block;         /* 块级显示 */
    border-radius: 8px;     /* 圆角 */
}

.course-config-frame {
    width: 100%;           /* 宽度100% */
    flex: 1;               /* 填充剩余空间 */
    border: 0;              /* 无边框 */
    display: block;         /* 块级显示 */
    border-radius: 8px;     /* 圆角 */
    min-height: 600px;      /* 最小高度 */
}

.course-config-layout {
    display: flex;
    flex: 1;
    gap: 5px;
}

.course-config-panel {
    width: 400px;
    flex-shrink: 0;
    background: rgba(from var(--theme-color) r g b / 0.2);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.config-icon {
    font-size: 36px;
    margin-bottom: 10px;
}

.config-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px 0;
}

.config-input-group {
    width: 100%;
    margin-bottom: 12px;
}

.config-input-group label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    font-weight: 500;
    text-align: left;
}

.config-input-group input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}

.config-input-group input:focus {
    outline: none;
    border-color: var(--theme-color);
}

.config-button {
    width: 100%;
    padding: 10px 16px;
    background: var(--theme-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.config-button:hover {
    opacity: 0.9;
}

.config-tip {
    color: #999;
    font-size: 11px;
    margin-top: 8px;
}

.course-doc-frame {
    flex: 1;               /* 填充剩余空间 */
    border: 0;              /* 无边框 */
    display: block;         /* 块级显示 */
    border-radius: 8px;     /* 圆角 */
    min-height: 600px;      /* 最小高度 */
}

.back-button {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 8px 16px;
    background: rgb(255, 255, 255);
    border: 5px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.back-button:hover {
    background: rgb(198, 197, 249);
}

.basic-info-layout {
    display: flex;
    flex: 1;
    gap: 16px;
}

.schedule-apps-panel {
    width: 130px;           /* 固定宽度 */
    flex-shrink: 0;         /* 不收缩 */
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 0px;
    background: #ffffff;
    border-radius: 12px;
}

.schedule-apps-panel .app-category {
    margin-bottom: 0;
}

.schedule-apps-panel .category-title {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin-bottom: 10px;
    padding-left: 4px;
}

.schedule-apps-panel .app-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.schedule-apps-panel .app-btn {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;     /* 横向排列 */
    align-items: center;
    justify-content: flex-start;
    padding: 10px 10px;
    gap: 1px;
}

.schedule-apps-panel .btn-icon {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    margin-right: 5px;
}

.schedule-apps-panel .btn-text {
    font-size: 15px;
    flex: 1;
    text-align: left;
}

.dingtalk-doc-frame {
    flex: 1;                /* 占据剩余空间 */
    border: 0;              /* 无边框 */
    display: block;         /* 块级显示 */
    border-radius: 8px;     /* 圆角 */
    min-height: 600px;      /* 最小高度 */
}

.welcome-message {
    flex: 1;                              /* 占据剩余空间 */
    display: flex;                        /* 弹性布局 */
    flex-direction: column;               /* 垂直排列 */
    justify-content: center;              /* 垂直居中 */
    align-items: center;                  /* 水平居中 */
    min-height: 600px;                    /* 最小高度 */
    background: url('../BG.png') no-repeat center center;  /* 背景图片 */
    background-size: cover;               /* 背景图片覆盖整个区域 */
    border-radius: 8px;                   /* 圆角 */
    text-align: center;                   /* 文本居中 */
    padding: 40px;                        /* 内边距 */
    position: relative;                   /* 相对定位，用于伪元素 */
}

.welcome-message::before {
    content: '';                          /* 伪元素内容为空 */
    position: absolute;                   /* 绝对定位 */
    top: 0;                               /* 顶部对齐 */
    left: 0;                              /* 左侧对齐 */
    right: 0;                             /* 右侧对齐 */
    bottom: 0;                            /* 底部对齐 */
    background: rgba(255, 255, 255, 0.7); /* 白色半透明遮罩，增加文字可读性 */
    border-radius: 8px;                   /* 圆角 */
    z-index: 0;                           /* 层级低于文字 */
}

.welcome-message h1,
.welcome-message p {
    position: relative;                   /* 相对定位 */
    z-index: 1;                           /* 层级高于遮罩 */
}

.welcome-message h1 {
    font-size: 50px;                      /* 大字体 */
    font-weight: 700;                     /* 加粗 */
    color: var(--theme-color);                      /* 主题色 */
    margin-bottom: 20px;                  /* 底部间距 */
    letter-spacing: 2px;                  /* 字间距 */
}

.tab-panel .welcome-message p {
    font-size: 30px;                      /* 字体大小 */
    font-weight: bold;                    /* 字体加粗 */
    color: #666;                          /* 灰色文本 */
    line-height: 1.6;                     /* 行高 */
}

.basic-guide-panel {
    width: 400px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(30, 136, 229, 0.1) 0%, rgba(30, 136, 229, 0.05) 100%);
    border: 1px solid rgba(30, 136, 229, 0.3);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
}

.input-group {
    margin-bottom: 10px;
}

.input-group label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    font-weight: 500;
}

.input-group input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}

.input-group input:focus {
    outline: none;
    border-color: var(--theme-color);
}

.parsed-data {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(30, 136, 229, 0.2);
    max-height: 300px;
    overflow-y: auto;
}

.data-hint {
    color: #999;
    font-size: 12px;
    text-align: center;
    margin: 0;
}

.data-success {
    color: #4caf50;
    font-size: 13px;
    font-weight: 500;
    margin: 0 0 10px 0;
    text-align: center;
}

.data-error {
    color: #f44336;
    font-size: 12px;
    margin: 0;
}

.data-item {
    font-size: 13px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 500;
}

.data-grid {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 10px;
}

.data-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 4px;
    font-size: 12px;
}

.data-row:last-child {
    margin-bottom: 0;
}

.data-label {
    color: #666;
    font-weight: 500;
    min-width: 70px;
}

.data-value {
    color: #333;
    word-break: break-all;
    flex: 1;
}

.guide-desc {
    color: #999;
    font-size: 12px;
    line-height: 1.5;
    margin-top: 8px;
}

.scrape-button {
    width: 100%;
    padding: 10px 16px;
    background: var(--theme-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 16px;
    transition: opacity 0.3s ease;
}

.scrape-button:hover {
    opacity: 0.9;
}

.scrape-tip {
    color: #999;
    font-size: 11px;
    margin-top: 8px;
}

.basic-main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 10px;
}

.basic-preview {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.preview-header h4 {
    margin: 0;
    font-size: 15px;
    color: #333;
}

.preview-output {
    flex: 1;
    overflow-y: auto;
}

.scrape-result {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    max-height: 200px;
    overflow: hidden;
}

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

.result-header h4 {
    margin: 0;
    font-size: 14px;
    color: #333;
}

.clear-result {
    padding: 4px 12px;
    background: #f0f0f0;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
}

.clear-result:hover {
    background: #e0e0e0;
}

.result-content {
    max-height: 150px;
    overflow-y: auto;
}

.empty-hint {
    color: #999;
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

.scrape-success {
    color: #4caf50;
    font-weight: 500;
}

.scrape-error {
    color: #f44336;
}

.scrape-data {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    line-height: 1.5;
    color: #333;
    white-space: pre-wrap;
    word-break: break-all;
    background: #fff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    overflow-x: auto;
}

.copy-script {
    display: block;
    margin: 0 auto 10px;
    padding: 6px 16px;
    background: var(--theme-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

.copy-script:hover {
    opacity: 0.9;
}

.course-form {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
}

.form-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.form-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.form-section h4 {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: #333;
}

.form-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.form-item {
    flex: 1;
    min-width: 200px;
}

.form-item label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.form-item input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.form-item input:focus {
    outline: none;
    border-color: var(--theme-color);
}

.result-display {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    max-height: 200px;
    overflow: hidden;
}

.preview-content {
    max-height: 150px;
    overflow-y: auto;
}

.doc-guide-panel {
    width: 280px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(30, 136, 229, 0.1) 0%, rgba(30, 136, 229, 0.05) 100%);
    border: 1px solid rgba(30, 136, 229, 0.3);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-right: 16px;
}

.guide-note {
    color: #999;
    font-size: 12px;
    margin-top: -10px;
    margin-bottom: 16px;
}

.video-edit-layout {
    display: flex;
    flex: 1;
    gap: 5px;
}

.video-guide-panel {
    width: 400px;
    flex-shrink: 0;
    background: rgba(from var(--theme-color) r g b / 0.2);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.guide-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.guide-text {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.guide-button {
    display: inline-block;
    padding: 10px 24px;
    background: var(--theme-color);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 20px;
    transition: background-color 0.3s ease;
}

.guide-button:hover {
    opacity: 0.9;
}

/* 右侧内容区域样式 */
.main-content-right {
    width: 210px;            /* 固定宽度 */
    flex-shrink: 0;          /* 不收缩 */
    background: #f2f2f2be;   /* 半透明背景 */
    border-radius: 12px;     /* 圆角 */
    padding: 10px;           /* 内边距 */
    display: flex;           /* 弹性布局 */
    flex-direction: column;  /* 垂直排列 */
}

/**
 * 应用按钮样式
 */
/* 应用分类区域样式 */
.app-category {
    margin-bottom: 40px;  /* 分类之间间距 */
}

.app-category:last-child {
    margin-bottom: 0;  /* 最后一个分类无底部间距 */
}

.category-title {
    font-size: 18px;      /* 分类标题大小 */
    font-weight: 600;     /* 标题加粗 */
    color: #333;          /* 标题颜色 */
    margin-bottom: 16px;  /* 标题与按钮网格间距 */
    padding-left: 12px;   /* 标题左边距 */
    border-left: 4px solid var(--theme-color); /* 左侧主题色边框 */
}

/* 应用按钮网格样式 */
.app-grid {
    display: grid;                                    /* 网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));  /* 自适应列数 */
    gap: 10px;                                       /* 网格间距 */
    max-width: 1000px;                               /* 最大宽度 */
    margin: 0 auto;                                  /* 居中对齐 */
    margin-top: 10px;  /* 标题与按钮网格间距 */
}

/* 应用按钮基础样式 */
.app-btn {
    width: 90px;                       /* 宽度 - 正方形 */
    height: 90px;                      /* 高度 - 正方形 */
    padding: 10px;                     /* 内边距 */
    border: none;                      /* 无边框 */
    border-radius: 16px;               /* 圆角 */
    cursor: pointer;                   /* 鼠标指针 */
    font-size: 15px;                   /* 字体大小 */
    font-weight: 600;                  /* 加粗 */
    color: #333;                       /* 默认深灰色文本 */
    background: #f5f5f5;               /* 默认浅灰色背景 */
    transition: all 0.3s ease;         /* 过渡动画 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);  /* 阴影 */
    position: relative;                /* 相对定位 */
    display: flex;                     /* 弹性布局 */
    flex-direction: column;            /* 垂直排列 */
    align-items: center;               /* 水平居中 */
    justify-content: center;           /* 垂直居中 */
}

.app-btn:hover {
    transform: translateY(-3px);              /* 悬停上移 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);  /* 悬停阴影加深 */
}

/* 按钮图标样式 */
.btn-icon {
    width: 48px;              /* 图标宽度 */
    height: 48px;             /* 图标高度 */
    margin-bottom: 6px;       /* 与文字间距 */
    border-radius: 8px;       /* 圆角 */
    display: block;           /* 块级显示 */
}

/* 按钮文字样式 */
.btn-text {
    display: block;           /* 块级显示 */
    font-size: 14px;          /* 字体大小 */
    font-weight: 600;         /* 加粗 */
}

/* 按钮颜色样式（马卡龙色系） */
.app-yellow {
    background: linear-gradient(135deg, #FFE8B8 0%, #FFD591 100%);  /* 浅黄→芒果色渐变 */
    color: #fff;  /* 白色文字 */
}

.app-red {
    background: linear-gradient(135deg, #F8B5B5 0%, #F08080 100%);   /* 粉玫瑰→珊瑚红渐变 */
    color: #fff;  /* 白色文字 */
}

.app-white {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8F8F8 100%);   /* 纯白→极浅灰渐变 */
    color: #333;  /* 黑色文字 */
    border: 1px solid #E8E8E8;  /* 灰色边框 */
}

.app-blue {
    background: linear-gradient(135deg, #98D8EA 0%, #6BB9D0 100%);   /* 天蓝→水蓝渐变 */
    color: #fff;  /* 白色文字 */
}

.app-pink {
    background: linear-gradient(135deg, #FFB6C1 0%, #FF69B4 100%);   /* 樱花粉→热粉渐变 */
    color: #fff;  /* 白色文字 */
}

.app-blue2 {
    background: linear-gradient(135deg, #DDA0DD 0%, #BA55D3 100%);   /* 薰衣草紫→梅红紫渐变 */
    color: #fff;  /* 白色文字 */
}

.app-orange {
    background: linear-gradient(135deg, #FFDAB9 0%, #FFB347 100%);   /* 桃色→杏橙渐变 */
    color: #fff;  /* 白色文字 */
}

.app-cyan {
    background: linear-gradient(135deg, #87CEEB 0%, #5BB5D0 100%);   /* 天蓝→青色渐变 */
    color: #fff;  /* 白色文字 */
}

.app-purple {
    background: linear-gradient(135deg, #DDA0DD 0%, #9B59B6 100%);   /* 淡紫→紫罗兰渐变 */
    color: #fff;  /* 白色文字 */
}

.app-black {
    background: linear-gradient(135deg, #424242 0%, #212121 100%);   /* 深灰→黑色渐变 */
    color: #fff;  /* 白色文字 */
}

.app-gray {
    background: linear-gradient(135deg, #D3D3D3 0%, #A9A9A9 100%);   /* 浅灰→中灰渐变 */
    color: #fff;  /* 白色文字 */
}

/**
 * 标签页样式
 */
.tab-container {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tab-nav {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    background: #fafafa;
    padding: 0;
    border-radius: 8px 8px 0 0;
    margin-bottom: 5px;
}

.tab-btn {
    flex: 1;
    padding: 14px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    transition: all 0.3s ease;
    border-radius: 8px 8px 0 0;
    position: relative;
    text-align: center;
}

.tab-btn:hover {
    color: var(--theme-color);
    background: rgba(0,0,0,0.05);
}

.tab-btn.active {
    color: #fff;
    background: var(--theme-color);
    font-weight: 600;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--theme-color);
}

.tab-content {
    flex: 1;
    position: relative;
    min-height: 400px;
}

.tab-panel {
    display: none;
    padding: 0px 0px 0px 0px;
    height: 100%;
    flex-direction: column;
}

.tab-panel.active {
    display: flex;
}

.tab-panel h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.tab-panel p {
    color: #666;
    margin-bottom: 20px;
    font-size: 14px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #333;
}

.form-group input[type="text"],
.form-group input[type="file"],
.form-group select,
.form-group textarea {
    width: 100%;
    max-width: 500px;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    background: #fff;
}

.form-group input[type="text"]:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--theme-color);
}

.form-group textarea {
    height: 100px;
    resize: vertical;
}

.form-group input[type="radio"] {
    margin-right: 8px;
    margin-left: 12px;
}

.form-group input[type="radio"]:first-of-type {
    margin-left: 0;
}

/**
 * 响应式布局（移动端适配）
 */
@media (max-width: 768px) {
    .sidebar {
        width: 100%;        /* 宽度100% */
        height: auto;       /* 高度自适应 */
        position: relative; /* 相对定位 */
    }

    .content {
        margin-left: 0;     /* 去除左侧外边距 */
    }

    .app-grid {
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));  /* 移动端按钮更小 */
    }

    .tab-nav {
        flex-wrap: wrap;
    }

    .tab-btn {
        padding: 10px 14px;
        font-size: 13px;
    }
}