/* 后台管理样式 */
* { box-sizing: border-box; }
html, body, #admin { height: 100%; margin: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f5f6f8; }
[v-cloak] { display: none; }
/* 登录页 */
.adm-login {
min-height: 100vh; display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #12224a 0%, #1f3f86 50%, #2b5fc4 100%);
padding: 24px;
}
.adm-login-card {
width: 100%; max-width: 400px; background: #fff; border-radius: 14px; padding: 36px 32px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.adm-login-card h2 { margin: 0 0 6px; font-size: 22px; color: #1f2329; }
.adm-login-card .tip { color: #86909c; font-size: 13px; margin-bottom: 26px; }
/* 布局 */
.adm-layout { height: 100vh; }
.adm-aside {
background: #fff; color: #4e5969; width: 216px; transition: width .2s; overflow-x: hidden;
position: relative;
}
.adm-aside.small { width: 64px; }
.adm-logo {
height: 44px; flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 12px;
color: #1f2329; font-weight: 700; font-size: 15px; border-bottom: 1px solid rgba(0,0,0,.06);
white-space: nowrap;
}
.adm-logo img { width: 22px; height: 22px; flex-shrink: 0; }
.adm-menu { border-right: none !important; background: transparent !important; }
.adm-menu .el-menu-item, .adm-menu .el-sub-menu__title {
color: #4e5969 !important; height: 46px !important; line-height: 46px !important;
}
.adm-menu .el-menu-item:hover, .adm-menu .el-sub-menu__title:hover { background: rgba(0,0,0,.05) !important; }
.adm-menu .el-menu-item.is-active { background: #2f6df6 !important; color: #fff !important; }
.adm-menu .el-menu--inline { background: #e3e8f0 !important; }
/* 侧边导航（自绘，不依赖 el-menu） */
.adm-nav { padding: 8px 0 42px; overflow-y: auto; height: calc(100vh - 58px);
scrollbar-width: none; -ms-overflow-style: none; }
.adm-nav::-webkit-scrollbar { display: none; }
.adm-aside { scrollbar-width: none; -ms-overflow-style: none; }
/* 侧栏底部的构建版本：部署完对一下，就知道跑的是不是新包 */
.adm-ver { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 18px; font-size: 11px;
color: #a8b0bc; border-top: 1px solid rgba(0,0,0,.06); background: #fff; }
.adm-aside::-webkit-scrollbar { display: none; }
/* 一级菜单（分组标题）：近白的浅色背景、深色文字 */
.adm-nav-group { padding: 12px 18px; font-size: 12.5px; letter-spacing: 1px;
color: #303133; font-weight: 600; white-space: nowrap;
background: rgba(255,255,255,.72); }
/* 分组标题可点击折叠 */
.adm-nav-group { display: flex; align-items: center; justify-content: space-between;
cursor: pointer; user-select: none; transition: color .15s; }
.adm-nav-group:hover { color: #1f2329; }
.adm-nav-arrow { font-style: normal; font-size: 14px; color: rgba(0,0,0,.35);
transform: rotate(-90deg); transition: transform .18s; line-height: 1; }
.adm-nav-group.open .adm-nav-arrow { transform: rotate(0deg); }
/* 二级菜单：比整个浅色竖条深一档的背景（上下不留缝） */
.adm-nav-sub { background: #e3e8f0; padding: 0; }
.adm-nav-sub .adm-nav-item { padding-left: 26px; }
.adm-nav-item {
display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 18px;
cursor: pointer; color: #4e5969; font-size: 14px; white-space: nowrap;
border-left: 3px solid transparent; transition: background .15s, color .15s;
}
.adm-nav-item:hover { background: rgba(0,0,0,.05); color: #1f2329; }
.adm-nav-item.on { background: #2f6df6; color: #fff; border-left-color: rgba(255,255,255,.55); }
.adm-nav-item .ico { width: 18px; text-align: center; font-size: 15px; flex-shrink: 0; opacity: .9; }
.adm-aside.small .adm-nav-item { justify-content: center; padding: 0; }
/* 顶栏：全站统一 44px（与侧栏 logo 行等高）。
flex:none 必须保留 —— 它是个 flex 纵向子项，内容区一长就会被 flex-shrink 压扁
（综合看板页曾从 44px 被压到 21px），所以顶栏绝不参与压缩。 */
.adm-header {
background: #fff; height: 44px; flex: none; display: flex; align-items: center; justify-content: space-between;
padding: 0 20px; border-bottom: 1px solid #e8eaef;
}
.adm-header .left { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 600; }
.adm-header .right { display: flex; align-items: center; gap: 14px; font-size: 13px; color: #4e5969; }
/* 内容区：自己撑满剩余高度并内部滚动，不去挤顶栏 */
.adm-main { flex: 1; min-height: 0; padding: 18px; overflow-y: auto; background: #f5f6f8; }
/* 卡片 */
.adm-card { background: #fff; border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; border: 1px solid #eceef2; }
.adm-card-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center;
justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.adm-toolbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
/* 统计卡 */
.adm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.adm-stat { background: #fff; border-radius: 10px; padding: 18px 20px; border: 1px solid #eceef2; }
.adm-stat .n { font-size: 26px; font-weight: 700; line-height: 1.3; }
.adm-stat .l { color: #86909c; font-size: 13px; }
.adm-stat .d { font-size: 12px; color: #86909c; margin-top: 4px; }
/* 趋势图（纯 CSS 柱状，不引第三方图表库） */
.adm-chart { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding: 10px 4px 0; }
.adm-chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%;
justify-content: flex-end; }
.adm-chart .bar { width: 100%; max-width: 38px; background: linear-gradient(180deg, #6c9bff, #2f6df6);
border-radius: 5px 5px 0 0; min-height: 3px; transition: height .4s; }
.adm-chart .lab { font-size: 11px; color: #86909c; white-space: nowrap; }
.adm-chart .num { font-size: 11px; color: #4e5969; }
/* 表格微调 */
.el-table th.el-table__cell { background: #fafbfc !important; color: #4e5969; font-weight: 600; }
.adm-pager { display: flex; justify-content: flex-end; margin-top: 14px; }
/* 封面小图 */
.adm-thumb { width: 68px; height: 44px; object-fit: cover; border-radius: 5px; background: #eef0f4; display: block; }
.adm-thumb.book { width: 42px; height: 56px; object-fit: contain; }
/* 课时列表 */
.adm-chapter { border: 1px solid #eceef2; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.adm-chapter-head { background: #fafbfc; padding: 10px 14px; display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: grab; }
.adm-chapter-head:active { cursor: grabbing; }
.adm-lesson { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid #f2f3f5; font-size: 13px; cursor: grab; }
.adm-lesson:active { cursor: grabbing; }
/* 拖拽手柄与分类列表 */
.drag-handle { color: #c9ced6; cursor: grab; font-size: 13px; letter-spacing: -2px; user-select: none; padding: 0 2px; }
.drag-handle:active { cursor: grabbing; }
.cat-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid #f2f3f5; background: #fff; }
.cat-row.cat-parent { background: #fafbfc; font-size: 14px; }
.cat-row.cat-child { font-size: 13px; color: #4e5969; }
.cat-row:hover { background: #f5f8ff; }
.adm-lesson:hover { background: #fafbfc; }
/* 提示块 */
.adm-tip { background: #f0f6ff; border-left: 3px solid #2f6df6; padding: 10px 14px; border-radius: 0 6px 6px 0;
color: #1e4fa8; font-size: 13px; line-height: 1.8; margin-bottom: 14px; }
.adm-tip.warn { background: #fff8e6; border-color: #f59e0b; color: #8a5a00; }
.adm-tip.err { background: #fef2f2; border-color: #dc2626; color: #9b1c1c; }
.adm-pre { background: #1f2329; color: #d6e0f0; padding: 14px; border-radius: 8px; font-size: 12.5px;
overflow-x: auto; line-height: 1.7; white-space: pre-wrap; word-break: break-all;
font-family: Menlo, Consolas, monospace; }
.adm-code-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.adm-code-row input { flex: 1; font-family: Menlo, Consolas, monospace; font-size: 12.5px; }
@media (max-width: 900px) {
.adm-stats { grid-template-columns: repeat(2, 1fr); }
.adm-aside { width: 64px; }
.adm-aside .el-menu-item span, .adm-aside .el-sub-menu__title span { display: none; }
}
/* ============================================================
字号整体加大（后台全局）
============================================================ */
body { font-size: 15px; }
/* 侧边栏：分组标题、菜单项（字号颜色统一；整个竖条浅色，二级菜单深一档） */
.adm-nav-group { font-size: 15.5px; color: #303133; letter-spacing: 0; padding: 13px 18px; }
.adm-nav-group:hover { color: #1f2329; }
.adm-nav-group-label { display: flex; align-items: center; gap: 9px; min-width: 0; }
.adm-nav-group .g-ico { font-size: 16px; opacity: .85; width: 19px; text-align: center; flex-shrink: 0; }
.adm-nav-arrow { font-size: 15px; color: rgba(0,0,0,.35); }
.adm-nav-item { font-size: 15.5px; height: 46px; gap: 12px; }
.adm-nav-item .ico { font-size: 18px; width: 22px; }
/* 顶栏、卡片、统计 */
.adm-header .left { font-size: 14.5px; }
.adm-header .left .el-button { font-size: 14px; }
.adm-header .right { font-size: 13px; }
.adm-logo { font-size: 15px; }
.adm-card-title { font-size: 16.5px; }
.adm-stat .n { font-size: 28px; }
.adm-stat .l { font-size: 14px; }
.adm-stat .d { font-size: 13px; }
.adm-chart .lab, .adm-chart .num { font-size: 12px; }
/* 列表行 */
.adm-lesson { font-size: 14.5px; }
.cat-row.cat-parent { font-size: 15px; }
.cat-row.cat-child { font-size: 14.5px; }
.adm-tip { font-size: 14.5px; }
/* 表单里的灰色小字提示（与控件保持间距，不贴着） */
.adm-hint { color: #86909c; font-size: 12px; margin-left: 12px; line-height: 1.8; }
.el-form-item__content > .adm-hint:only-child, .el-form-item__content > .adm-hint:first-child { margin-left: 0; width: 100%; }
/* 课时资料附件列表 */
.adm-file-list { margin-top: 10px; border: 1px solid #e8eaef; border-radius: 6px; overflow: hidden; }
.adm-file-row { display: flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; }
.adm-file-row + .adm-file-row { border-top: 1px solid #f0f1f4; }
.adm-file-ico { flex-shrink: 0; }
/* 资料文件类型小图标（第 91 轮，与前台统一）：音频 / PDF / 图片彩色图标 */
.fico { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; border-radius: 3px; }
.adm-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-file-size { color: #86909c; font-size: 12px; flex-shrink: 0; }
/* 媒体库（课程视频管理 / 课时资料管理 / 图片素材管理） */
.media-layout { display: flex; gap: 16px; align-items: flex-start; }
.media-thumb { width: 52px; height: 34px; object-fit: cover; border-radius: 4px;
background: #eef0f4; flex-shrink: 0; display: block; border: 1px solid #eceef2; }
.media-side { width: 240px; flex-shrink: 0; padding: 10px 8px; }
.media-side .ms-head { display: flex; align-items: center; justify-content: space-between;
padding: 14px 10px 6px; font-size: 12.5px; color: #86909c; }
.media-side .ms-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
border-radius: 6px; font-size: 13.5px; cursor: pointer; color: #4e5969; }
.media-side .ms-item:hover { background: #f4f6fa; }
.media-side .ms-item.on { background: #eaf2ff; color: #2f6df6; font-weight: 600; }
.media-side .ms-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-side .ms-n { color: #86909c; font-size: 12px; flex-shrink: 0; }
.media-side .ms-act { display: none; flex-shrink: 0; }
.media-side .ms-item:hover .ms-act { display: inline-flex; align-items: center; gap: 2px; }
.media-side .ms-act .el-button { margin-left: 0 !important; font-size: 12.5px; padding: 2px 3px; }
.media-side .ms-empty { padding: 10px; font-size: 12.5px; color: #a9aeb8; line-height: 1.7; }
/* 图片素材库缩略图 */
.media-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px;
border: 1px solid #e8eaef; background: #f4f6f8; flex-shrink: 0; }
@media (max-width: 900px) {
.media-layout { flex-direction: column; }
.media-side { width: 100%; }
}
.mt6 { margin-top: 6px; }
/* Element Plus 组件统一加大 */
.el-table { font-size: 15px !important; }
.el-table th.el-table__cell { font-size: 14.5px !important; }
.el-table .el-table__cell { padding: 10px 0; }
/* 表格操作列统一（第 26 轮）：按钮一律两个字，固定格宽上下对齐，放不下自动换行 */
.el-table .op { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 8px; row-gap: 2px; }
.el-table .op .el-button { margin: 0 !important; min-width: 0; padding: 0; }
/* =============================================================
后台按钮间距统一收紧（第 104 轮）
Element Plus 默认两个按钮之间 12px 太散，这里统一收到 6px。
想把按钮推到右边用 .push-r（margin-left:auto），别再用内联 margin-left:auto，
否则会被下面这条 !important 规则盖掉。
============================================================= */
.el-button + .el-button { margin-left: 6px !important; }
/* 按钮组例外：它本来就是贴在一起显示的一整排，不能被上面那条撑开 */
.el-button-group > .el-button + .el-button { margin-left: 0 !important; }
/* 推到最右的按钮（保留自身功能间距，不能被上面那条吃掉） */
.el-button.push-r { margin-left: auto !important; }
.push-r { margin-left: auto !important; }
.el-button { font-size: 15px; }
.el-button--small { font-size: 13.5px; }
.el-input__inner, .el-textarea__inner { font-size: 15px; }
.el-form-item__label { font-size: 15px; }
.el-select-dropdown__item { font-size: 15px; }
.el-checkbox__label, .el-radio__label { font-size: 15px; }
.el-pagination { font-size: 14.5px; }
.el-pagination .el-pager li { font-size: 15px; }
.el-dialog__title { font-size: 17px; }
.el-dialog__body { font-size: 15px; line-height: 1.7; }
.el-message__content { font-size: 14.5px; }
.el-message-box__message { font-size: 15px; }
.el-switch__label { font-size: 14.5px; }
.el-tabs__item { font-size: 15.5px; }
.el-tag { font-size: 13.5px; }
.el-upload { font-size: 15px; }
/* =============================================================
讲师角色标记 + 登录页提示
============================================================= */
.adm-role-tag { background: #e8f5ec; color: #0f8a4d; font-size: 12px; padding: 1px 8px;
border-radius: 10px; margin-right: 8px; }
.adm-login-note { margin-top: 16px; color: #86909c; font-size: 12px; line-height: 1.8;
background: #f7f8fa; border-radius: 8px; padding: 10px 12px; }
/* =============================================================
课程封面上传框（虚线卡片 + 预览悬浮遮罩）
============================================================= */
.cover-upload {
position: relative;
width: 240px; height: 135px;
border: 1.5px dashed #c9cdd4;
border-radius: 10px;
background: #f7f8fa;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px;
cursor: pointer;
overflow: hidden;
transition: border-color .15s, background .15s;
}
.cover-upload:hover { border-color: var(--el-color-primary, #409eff); background: #f0f6ff; }
.cover-plus { font-size: 30px; color: #a9aeb8; line-height: 1; }
.cover-tip { font-size: 14px; color: #4e5969; }
.cover-sub { font-size: 12px; color: #a9aeb8; }
.cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-mask {
position: absolute; inset: 0;
background: rgba(0,0,0,.42);
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .15s;
}
.cover-mask span { color: #fff; font-size: 14px; }
.cover-upload:hover .cover-mask { opacity: 1; }
/* ---------- 单词拖动排序弹窗 ---------- */
.wd-sort-list { max-height: 56vh; overflow-y: auto; border: 1px solid #e5e6eb; border-radius: 8px; padding: 6px; }
.wd-sort-row {
display: flex; align-items: center; gap: 10px;
padding: 9px 10px; border-radius: 6px; background: #fff;
border-bottom: 1px solid #f2f3f5; cursor: grab;
}
.wd-sort-row:last-child { border-bottom: none; }
.wd-sort-row:hover { background: #f7f8fa; }
.wd-sort-row.dragging { background: #e8f3ff; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.wd-handle { color: #c9cdd4; font-size: 16px; letter-spacing: -2px; user-select: none; }
.wd-no { width: 34px; text-align: center; color: #86909c; font-size: 12px; flex: none; }
.wd-word { width: 150px; font-weight: 600; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-meaning { flex: 1; color: #4e5969; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-btns { flex: none; }
/* ---------- 视频章节编辑器 ---------- */
.ched-wrap { display: flex; gap: 16px; align-items: flex-start; }
.ched-left { width: 46%; flex-shrink: 0; }
.ched-right { flex: 1; min-width: 0; }
.ched-novideo {
background: #f5f6f8; border: 1px dashed #dcdfe6; border-radius: 8px;
padding: 44px 20px; color: #86909c; font-size: 13px; text-align: center; line-height: 1.9;
}
.ched-tools { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.ched-list { max-height: 46vh; overflow-y: auto; border: 1px solid #e5e6eb; border-radius: 8px; }
.ched-row {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
padding: 9px 12px; border-bottom: 1px solid #f2f3f5; background: #fff;
}
.ched-row:last-child { border-bottom: none; }
.ched-row:not(.ched-editing):hover { background: #f7f9fc; }
.ched-editing { display: grid; grid-template-columns: 96px 1fr auto auto; background: #f7f9fc; }
.ched-time { color: #1fb469; font-weight: 600; font-size: 13px; width: 56px; flex: none; font-variant-numeric: tabular-nums; }
.ched-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ched-title { font-size: 13px; color: #303133; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ched-intro { font-size: 12px; color: #86909c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ched-empty { padding: 36px 20px; text-align: center; color: #86909c; font-size: 13px; line-height: 1.8; }
/* ---- 直播管理（教务 → 直播管理，第 49 轮） ---- */
.adm-live-tip {
margin: 0 0 12px; padding: 10px 14px; border-radius: 8px;
background: #f0f9f4; color: #4a7a5e; font-size: 12.5px; line-height: 1.8;
}
.adm-live-warn {
padding: 12px 14px; border-radius: 8px; background: #fff7e8;
color: #b4650a; font-size: 13px; line-height: 1.8;
}
/* ---- 直播排期：按日期横向时间轴（第 113 轮） ----
一场一个卡片，从左往右按开播时间排；卡片多了一行放不下就横向滚动。
不用表格，避免大屏上大片空白。 */
.adm-live-day {
border: 1px solid #e5e6eb; border-radius: 10px; background: #fff;
padding: 12px 14px;
}
.adm-live-day-head {
display: flex; align-items: baseline; gap: 10px;
padding: 0 2px 10px; border-bottom: 1px solid #f2f3f5; margin-bottom: 12px;
}
.adm-live-day-head b { font-size: 15px; color: #1d2129; }
.adm-live-day-empty {
padding: 22px 0; text-align: center; color: #86909c; font-size: 13px;
}
.adm-live-rail {
display: flex; align-items: stretch; gap: 10px;
overflow-x: auto; padding-bottom: 6px;
}
.adm-live-rail::-webkit-scrollbar { height: 8px; }
.adm-live-rail::-webkit-scrollbar-thumb { background: #d9dde3; border-radius: 4px; }
.adm-live-card {
flex: 0 0 250px; width: 250px;
border: 1px solid #e5e6eb; border-radius: 10px; padding: 10px 12px;
background: #fcfcfd; display: flex; flex-direction: column; gap: 6px;
}
.adm-live-card .t {
font-size: 15px; font-weight: 600; color: #1d2129;
font-variant-numeric: tabular-nums;
}
.adm-live-card .ti { font-size: 13px; font-weight: 600; color: #1d2129; }
.adm-live-card .c { font-size: 12px; color: #86909c; }
.adm-live-card .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.adm-live-card .tags .el-tag { margin: 0; }
.adm-live-card .sh { font-size: 11.5px; color: #b4650a; }
.adm-live-card .ops {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 2px; padding-top: 8px; border-top: 1px dashed #ebedf0;
}
.adm-live-card .ops .el-button + .el-button { margin-left: 0 !important; }
@media (max-width: 720px) {
.adm-live-card { flex: 0 0 82%; width: 82%; }
}
/* 推流弹窗地址行（第 58 轮改版）：灰标签 + 纯文本地址 + 复制小图标，对齐云控制台样式 */
.adm-live-line { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.adm-live-line .l { flex: none; width: 130px; font-size: 13px; color: #86909c; }
.adm-live-line .v {
flex: 1; min-width: 0; font-size: 13px; color: #1d2129;
font-family: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
user-select: all; cursor: text;
}
.adm-live-line .cp {
flex: none; width: 22px; height: 22px; border-radius: 4px;
display: inline-flex; align-items: center; justify-content: center;
color: #86909c; cursor: pointer;
}
.adm-live-line .cp:hover { color: #165dff; background: #f2f3f5; }
.adm-live-line .cp svg { width: 14px; height: 14px; display: block; }
.adm-live-online { margin-top: 14px; font-size: 13px; color: #4e5969; }
.adm-live-online b { color: #1fb469; }
.adm-live-ops { margin-top: 14px; display: flex; align-items: center; gap: 3px; }
.adm-live-ops .l { flex: none; font-size: 13px; color: #4e5969; margin-right: 4px; }
.adm-live-pub { display: flex; gap: 6px; margin-bottom: 12px; }
.adm-live-pub .el-input { flex: 1; }
/* 直播间消息标签页（第 50 轮）：左上角课时名称头部 */
.adm-msg-head { display: flex; align-items: center; gap: 14px; }
.adm-msg-head .t { min-width: 0; }
.adm-msg-head .name { font-size: 17px; font-weight: 700; color: #303133;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-msg-head .sub { font-size: 12.5px; color: #86909c; margin-top: 3px;
display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
/* ---- 通用单行省略（页面里到处在用 class="ellipsis"） ---- */
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* =============================================================
直播聊天（教务 → 直播聊天，第 52 轮）
左：直播间列表 右：气泡聊天窗 + 底部输入框
============================================================= */
.lc { display: flex; gap: 14px; height: calc(100vh - 96px); min-height: 460px; }
/* ---- 左侧直播间列表 ---- */
.lc-side {
width: 286px; flex: none; display: flex; flex-direction: column;
background: #fff; border: 1px solid #eceef2; border-radius: 10px; overflow: hidden;
}
.lc-search { padding: 10px 10px 8px; border-bottom: 1px solid #f2f3f5; }
.lc-rooms { flex: 1; min-height: 0; overflow-y: auto; }
.lc-room { padding: 10px 12px; border-bottom: 1px solid #f7f8fa; cursor: pointer; transition: background .15s; }
.lc-room:hover { background: #f7f9fc; }
.lc-room.on { background: #eaf2ff; box-shadow: inset 3px 0 0 #2f6df6; }
.lc-room .top { display: flex; align-items: center; gap: 6px; }
.lc-room .nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: #1d2129; }
.lc-room .sub { font-size: 12px; color: #86909c; margin-top: 2px; }
.lc-room .last { font-size: 12px; color: #6b7785; margin-top: 3px; }
.lc-room .last .who { color: #9aa4b2; }
.lc-room .meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; color: #9aa4b2; }
.lc-room .badge {
margin-left: auto; background: #ffece8; color: #d4380d; border-radius: 9px;
padding: 0 7px; font-size: 11px; line-height: 17px; font-variant-numeric: tabular-nums;
}
/* ---- 右侧聊天区 ---- */
.lc-main {
flex: 1; min-width: 0; display: flex; flex-direction: column;
background: #fff; border: 1px solid #eceef2; border-radius: 10px; overflow: hidden;
}
.lc-head {
flex: none; display: flex; align-items: center; gap: 12px;
padding: 12px 16px; border-bottom: 1px solid #f2f3f5;
}
.lc-head .t { flex: 1; min-width: 0; }
.lc-head .nm { font-size: 15px; font-weight: 700; color: #1d2129;
display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-head .sub { font-size: 12px; color: #86909c; margin-top: 3px; }
.lc-head .ops { flex: none; display: flex; gap: 8px; }
.lc-msgs {
flex: 1; min-height: 0; overflow-y: auto; padding: 16px;
background: #fafbfc; display: flex; flex-direction: column; gap: 14px;
}
.lc-msg { display: flex; gap: 8px; align-items: flex-start; }
.lc-msg .avatar {
flex: none; width: 30px; height: 30px; border-radius: 50%; background: #e8eefc;
color: #4a72c4; font-size: 13px; font-weight: 600;
display: flex; align-items: center; justify-content: center;
}
.lc-msg .body { max-width: 74%; min-width: 0; }
.lc-msg .line { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.lc-msg .nick { font-size: 12px; color: #86909c; }
.lc-msg .tm { font-size: 11.5px; color: #c2c7cf; }
.lc-msg .tag {
font-size: 11px; line-height: 16px; padding: 0 5px; border-radius: 3px;
background: #e8f8ee; color: #1fa25a;
}
.lc-msg .bubble {
display: inline-block; padding: 8px 12px; border-radius: 4px 10px 10px 10px;
background: #fff; border: 1px solid #eceef2; color: #303133;
font-size: 13.5px; line-height: 1.7; word-break: break-word; white-space: pre-wrap;
}
.lc-msg .acts { display: flex; gap: 10px; margin-top: 3px; opacity: 0; transition: opacity .15s; }
.lc-msg:hover .acts { opacity: 1; }
.lc-msg .act { font-size: 11.5px; color: #86909c; cursor: pointer; }
.lc-msg .act:hover { color: #2f6df6; }
/* 老师（自己）发言：靠右、绿底 */
.lc-msg.mine { flex-direction: row-reverse; }
.lc-msg.mine .body { text-align: right; }
.lc-msg.mine .line { justify-content: flex-end; }
.lc-msg.mine .acts { justify-content: flex-end; }
.lc-msg.mine .bubble {
border-radius: 10px 4px 10px 10px;
background: #e8f8ee; border-color: #cdebd9; color: #14603a; text-align: left;
}
/* 已屏蔽：划掉并压淡 */
.lc-msg.hidden .bubble { background: #f5f6f8; border-color: #eceef2; color: #b7bec9; text-decoration: line-through; }
.lc-msg.hidden .hid { margin-left: 6px; font-size: 11px; color: #d4380d; text-decoration: none; }
.lc-empty { margin: auto; color: #9aa4b2; font-size: 13px; }
.lc-input {
flex: none; display: flex; gap: 10px; align-items: flex-end;
padding: 12px 16px; border-top: 1px solid #f2f3f5; background: #fff;
}
.lc-input .el-textarea { flex: 1; }
.lc-blank { margin: auto; color: #9aa4b2; font-size: 13.5px; }
/* 协议预览（第 57 轮）：后台「系统 → 协议」预览区 */
.doc-preview {
border: 1px solid #e5e6eb; border-radius: 8px; background: #fff;
padding: 18px 20px; min-height: 360px; max-height: 620px; overflow: auto;
line-height: 1.9; color: #1f2329; font-size: 14px;
}
.doc-preview img { max-width: 100%; height: auto; }
.doc-preview h1, .doc-preview h2, .doc-preview h3 { font-size: 16px; margin: 16px 0 8px; }
.doc-preview p { margin: 8px 0; }
.doc-preview ul, .doc-preview ol { padding-left: 22px; margin: 8px 0; }
/* 小程序图标管理（第 59 轮）：后台「系统 → 小程序图标」 */
.aic-group { margin-bottom: 22px; }
.aic-gtitle { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.aic-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.aic-item {
width: 176px; padding: 14px 12px 12px;
background: #fff; border: 1px solid #e5e6eb; border-radius: 10px;
text-align: center;
}
.aic-item:hover { border-color: #34c383; box-shadow: 0 4px 14px rgba(52, 195, 131, .12); }
.aic-prev {
width: 72px; height: 72px; margin: 0 auto 8px;
border: 1px dashed #e5e6eb; border-radius: 12px; background: #fafbfc;
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.aic-prev.small { width: 56px; height: 56px; margin-top: 10px; }
.aic-img { max-width: 100%; max-height: 100%; }
.aic-char { font-size: 34px; color: #86909c; line-height: 1; }
.aic-name { font-size: 13px; font-weight: 600; color: #1f2329; }
.aic-key { font-size: 11px; color: #b6bcc6; margin: 2px 0 8px; word-break: break-all; }
.aic-sub { font-size: 11px; color: #86909c; margin-bottom: 6px; }
.aic-ops { display: flex; flex-direction: column; gap: 2px; align-items: center; }
/* =============================================================
深色主题（第 60 轮）
用法：html 上加 class="dark" 即生效（admin.html 里默认加；顶栏可切回浅色，记在 localStorage）
Element Plus 组件的颜色由官方 element-plus-dark.css 的变量接管，
下面只覆盖咱们自己写的那些块（侧栏 / 卡片 / 表格头 / 聊天 / 媒体库 …）。
============================================================= */
html.dark body { background: #14161a; color: #dfe3e8; }
html.dark #admin, html.dark .adm-layout { background: #14161a; }
/* 登录页 */
html.dark .adm-login { background: linear-gradient(135deg, #0b1220 0%, #14243f 50%, #1c3a6e 100%); }
html.dark .adm-login-card { background: #1b1e24; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
html.dark .adm-login-card h2 { color: #e8ebef; }
html.dark .adm-login-card .tip { color: #8b93a1; }
html.dark .adm-login-note { background: #22262e; color: #8b93a1; }
/* 侧边栏 */
html.dark .adm-aside { background: #1b1e24; color: #c9cdd4; }
html.dark .adm-logo { color: #e8ebef; border-bottom-color: rgba(255, 255, 255, .08); }
html.dark .adm-ver { color: #6b7382; border-top-color: rgba(255, 255, 255, .08); background: #1b1e24; }
html.dark .adm-nav-group { background: rgba(255, 255, 255, .04); color: #d5dae1; }
html.dark .adm-nav-group:hover { color: #ffffff; }
html.dark .adm-nav-arrow { color: rgba(255, 255, 255, .35); }
html.dark .adm-nav-sub { background: #22262e; }
html.dark .adm-nav-item { color: #c9cdd4; }
html.dark .adm-nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
html.dark .adm-menu .el-menu-item,
html.dark .adm-menu .el-sub-menu__title { color: #c9cdd4 !important; }
html.dark .adm-menu .el-menu-item:hover,
html.dark .adm-menu .el-sub-menu__title:hover { background: rgba(255, 255, 255, .07) !important; }
html.dark .adm-menu .el-menu--inline { background: #22262e !important; }
/* 顶栏 / 内容区 */
html.dark .adm-header { background: #1b1e24; border-bottom-color: #2a2f38; }
html.dark .adm-header .left { color: #e8ebef; }
html.dark .adm-header .right { color: #c9cdd4; }
html.dark .adm-main { background: #14161a; }
/* 卡片 / 统计 */
html.dark .adm-card { background: #1b1e24; border-color: #2a2f38; }
html.dark .adm-stat { background: #1b1e24; border-color: #2a2f38; }
html.dark .adm-stat .n { color: #f2f4f7; }
html.dark .adm-stat .l, html.dark .adm-stat .d { color: #8b93a1; }
html.dark .adm-chart .lab { color: #8b93a1; }
html.dark .adm-chart .num { color: #c9cdd4; }
html.dark .adm-card-title { color: #e8ebef; }
html.dark .adm-hint { color: #8b93a1; }
/* 表格（表头是强写的 !important，这里必须同样强写才盖得住） */
html.dark .el-table th.el-table__cell { background: #22262e !important; color: #d5dae1; }
html.dark .adm-thumb { background: #2a2f38; }
/* 课时 / 分类列表 */
html.dark .adm-chapter { border-color: #2a2f38; }
html.dark .adm-chapter-head { background: #22262e; color: #e8ebef; }
html.dark .adm-lesson { border-top-color: #2a2f38; color: #d5dae1; }
html.dark .adm-lesson:hover { background: #22262e; }
html.dark .cat-row { background: #1b1e24; border-bottom-color: #2a2f38; color: #d5dae1; }
html.dark .cat-row.cat-parent { background: #22262e; }
html.dark .cat-row.cat-child { color: #c9cdd4; }
html.dark .cat-row:hover { background: #262b34; }
html.dark .drag-handle { color: #5c6472; }
/* 提示块 */
html.dark .adm-tip { background: #17243c; border-left-color: #4a86ff; color: #a9c6ff; }
html.dark .adm-tip.warn { background: #2b2413; border-color: #d98c0b; color: #f0c274; }
html.dark .adm-tip.err { background: #2f1a1a; border-color: #e0453c; color: #f0a09a; }
html.dark .adm-pre { background: #0f1216; color: #c9d4e6; }
/* 文件列表 / 角色标记 */
html.dark .adm-file-list { border-color: #2a2f38; }
html.dark .adm-file-row + .adm-file-row { border-top-color: #2a2f38; }
html.dark .adm-file-size { color: #8b93a1; }
html.dark .adm-role-tag { background: #17302a; color: #4fd1a0; }
/* 媒体库（课程视频 / 课时资料 / 图片素材） */
html.dark .media-thumb { background: #2a2f38; border-color: #333944; }
html.dark .media-side .ms-head { color: #8b93a1; }
html.dark .media-side .ms-item { color: #c9cdd4; }
html.dark .media-side .ms-item:hover { background: #262b34; }
html.dark .media-side .ms-item.on { background: #17304a; color: #6ba3ff; }
html.dark .media-side .ms-n { color: #8b93a1; }
html.dark .media-side .ms-empty { color: #6b7382; }
/* 封面上传框 */
html.dark .cover-upload { border-color: #3a4150; background: #22262e; }
html.dark .cover-upload:hover { background: #262b34; }
html.dark .cover-plus { color: #6b7382; }
html.dark .cover-tip { color: #d5dae1; }
html.dark .cover-sub { color: #8b93a1; }
/* 单词排序弹窗 */
html.dark .wd-sort-list { border-color: #2a2f38; }
html.dark .wd-sort-row { background: #1b1e24; border-bottom-color: #2a2f38; color: #d5dae1; }
html.dark .wd-sort-row:hover { background: #22262e; }
html.dark .wd-sort-row.dragging { background: #17304a; }
html.dark .wd-handle { color: #5c6472; }
html.dark .wd-no { color: #8b93a1; }
html.dark .wd-meaning { color: #c9cdd4; }
/* 视频章节编辑器 */
html.dark .ched-novideo { background: #1b1e24; border-color: #3a4150; color: #8b93a1; }
html.dark .ched-list { border-color: #2a2f38; }
html.dark .ched-row { background: #1b1e24; border-bottom-color: #2a2f38; color: #d5dae1; }
html.dark .ched-row:not(.ched-editing):hover { background: #22262e; }
html.dark .ched-editing { background: #22262e; }
html.dark .ched-title { color: #e8ebef; }
html.dark .ched-intro { color: #8b93a1; }
html.dark .ched-empty { color: #8b93a1; }
/* 直播管理 / 推流弹窗 */
html.dark .adm-live-tip { background: #16291f; color: #8fd7b0; }
html.dark .adm-live-warn { background: #2b2413; color: #f0c274; }
/* 深色：直播排期时间轴（第 113 轮） */
html.dark .adm-live-day { background: #1d2129; border-color: #333a45; }
html.dark .adm-live-day-head { border-bottom-color: #2a3039; }
html.dark .adm-live-day-head b { color: #e5e6eb; }
html.dark .adm-live-day-empty { color: #86909c; }
html.dark .adm-live-card { background: #232830; border-color: #333a45; }
html.dark .adm-live-card .t,
html.dark .adm-live-card .ti { color: #e5e6eb; }
html.dark .adm-live-card .c { color: #86909c; }
html.dark .adm-live-card .ops { border-top-color: #333a45; }
html.dark .adm-live-card .sh { color: #f0c274; }
html.dark .adm-live-line .l { color: #8b93a1; }
html.dark .adm-live-line .v { color: #e8ebef; }
html.dark .adm-live-line .cp { color: #8b93a1; }
html.dark .adm-live-line .cp:hover { color: #6ba3ff; background: #2a2f38; }
html.dark .adm-live-online { color: #c9cdd4; }
html.dark .adm-live-ops .l { color: #c9cdd4; }
html.dark .adm-msg-head .name { color: #e8ebef; }
html.dark .adm-msg-head .sub { color: #8b93a1; }
/* 直播聊天 */
html.dark .lc-side, html.dark .lc-main { background: #1b1e24; border-color: #2a2f38; }
html.dark .lc-search { border-bottom-color: #2a2f38; }
html.dark .lc-room { border-bottom-color: #22262e; }
html.dark .lc-room:hover { background: #22262e; }
html.dark .lc-room.on { background: #17304a; }
html.dark .lc-room .nm { color: #e8ebef; }
html.dark .lc-room .sub { color: #8b93a1; }
html.dark .lc-room .last { color: #aeb6c2; }
html.dark .lc-room .last .who { color: #8b93a1; }
html.dark .lc-room .meta { color: #8b93a1; }
html.dark .lc-room .badge { background: #3a1d16; color: #ff8f73; }
html.dark .lc-head { border-bottom-color: #2a2f38; }
html.dark .lc-head .nm { color: #e8ebef; }
html.dark .lc-head .sub { color: #8b93a1; }
html.dark .lc-msgs { background: #14161a; }
html.dark .lc-msg .avatar { background: #263449; color: #9dc0ff; }
html.dark .lc-msg .nick { color: #8b93a1; }
html.dark .lc-msg .tm { color: #6b7382; }
html.dark .lc-msg .tag { background: #17302a; color: #4fd1a0; }
html.dark .lc-msg .bubble { background: #22262e; border-color: #2a2f38; color: #dfe3e8; }
html.dark .lc-msg .act { color: #8b93a1; }
html.dark .lc-msg .act:hover { color: #6ba3ff; }
html.dark .lc-msg.mine .bubble { background: #16352a; border-color: #235340; color: #b6f0d4; }
html.dark .lc-msg.hidden .bubble { background: #1b1e24; border-color: #2a2f38; color: #6b7382; }
html.dark .lc-input { border-top-color: #2a2f38; background: #1b1e24; }
html.dark .lc-empty, html.dark .lc-blank { color: #6b7382; }
/* 协议预览 / 图标管理 */
html.dark .doc-preview { border-color: #2a2f38; background: #1b1e24; color: #dfe3e8; }
html.dark .aic-item { background: #1b1e24; border-color: #2a2f38; }
html.dark .aic-item:hover { border-color: #34c383; }
html.dark .aic-prev { border-color: #3a4150; background: #22262e; }
html.dark .aic-char { color: #8b93a1; }
html.dark .aic-name { color: #e8ebef; }
html.dark .aic-key { color: #6b7382; }
html.dark .aic-sub { color: #8b93a1; }
/* 深色下表格里被压住的白色小方块（复选框 / 空状态图标）统一调亮一点 */
html.dark .el-table__empty-text { color: #8b93a1; }
html.dark .el-empty__description p { color: #8b93a1; }
/* 首页轮播（第 62 轮） */
.bn-prev img { width: 260px; height: 108px; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 6px; background: #eef2f7; }
/* 深色适配 */
html.dark .bn-prev img { background: #22262e; }
/* =============================================================
客服工作台（第 67 轮）
左会话列表 + 右聊天窗，占满内容区高度
============================================================= */
.kf-wrap {
display: flex;
height: calc(100vh - 160px);
min-height: 480px;
background: #fff;
border-radius: 8px;
overflow: hidden;
border: 1px solid #ebeef5;
}
/* ---- 左：会话列表 ---- */
.kf-side {
width: 300px;
flex: 0 0 300px;
display: flex;
flex-direction: column;
border-right: 1px solid #ebeef5;
background: #fafbfc;
}
.kf-side-head { display: flex; gap: 8px; padding: 12px; }
.kf-side-count { padding: 0 12px 8px; font-size: 12px; color: #86909c; }
.kf-unread-tip { color: #f5222d; margin-left: 4px; }
.kf-sessions { flex: 1; overflow-y: auto; }
.kf-session {
display: flex; gap: 10px; padding: 12px;
cursor: pointer; border-bottom: 1px solid #f2f3f5;
}
.kf-session:hover { background: #f2f7ff; }
.kf-session.on { background: #e8f3ff; }
.kf-av {
width: 38px; height: 38px; flex: 0 0 38px;
border-radius: 50%; overflow: hidden;
background: #e7f7ee; color: #149252;
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 600;
}
.kf-av img { width: 100%; height: 100%; object-fit: cover; }
.kf-s-main { flex: 1; min-width: 0; }
.kf-s-top { display: flex; justify-content: space-between; gap: 8px; }
.kf-s-name { font-size: 13.5px; font-weight: 600; color: #1f2329; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-s-time { flex: 0 0 auto; font-size: 11.5px; color: #a8b0bb; }
.kf-s-bottom { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.kf-s-last {
flex: 1; min-width: 0; font-size: 12.5px; color: #86909c;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kf-badge {
flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 9px; background: #f5222d; color: #fff;
font-size: 11px; line-height: 18px; text-align: center;
}
.kf-empty { padding: 40px 20px; text-align: center; font-size: 12.5px; color: #a8b0bb; line-height: 1.8; }
.kf-side-foot { padding: 8px; text-align: center; border-top: 1px solid #f2f3f5; }
/* ---- 右：聊天窗 ---- */
.kf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kf-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 16px; border-bottom: 1px solid #ebeef5;
}
.kf-head-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kf-head-name { font-size: 15px; font-weight: 600; }
.kf-head-contact { font-size: 12px; color: #86909c; }
.kf-head-r { flex: 0 0 auto; display: flex; gap: 8px; }
.kf-msgs {
flex: 1; overflow-y: auto; padding: 16px;
background: #f5f7fa;
}
.kf-msg { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 14px; }
.kf-msg.mine { align-items: flex-end; }
.kf-bubble {
max-width: 70%; padding: 9px 13px; border-radius: 10px;
background: #fff; color: #1f2329; font-size: 13.5px; line-height: 1.6;
white-space: pre-wrap; word-break: break-word;
box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.kf-msg.mine .kf-bubble { background: #34c383; color: #fff; }
.kf-msg.sys .kf-bubble { background: #f2f3f5; color: #86909c; font-size: 12px; }
.kf-time { margin-top: 4px; font-size: 11px; color: #a8b0bb; }
.kf-msgs-empty { padding: 60px 20px; text-align: center; color: #a8b0bb; font-size: 12.5px; }
.kf-input { border-top: 1px solid #ebeef5; padding: 10px 16px 12px; background: #fff; }
.kf-quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.kf-quick-t { font-size: 12px; color: #86909c; }
.kf-quick-i {
padding: 3px 10px; border-radius: 12px;
background: #f2f4f7; color: #4e5969; font-size: 12px; cursor: pointer;
}
.kf-quick-i:hover { background: #e7f7ee; color: #149252; }
.kf-actions { display: flex; align-items: center; margin-top: 8px; }
.kf-hint { font-size: 12px; color: #f5222d; }
.kf-blank {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 8px;
color: #86909c; font-size: 13.5px;
}
.kf-blank-ico { font-size: 46px; color: #d0d5dd; }
.kf-blank-tip { font-size: 12px; color: #a8b0bb; }
/* ---- 深色适配 ---- */
html.dark .kf-wrap { background: #1b1e24; border-color: #2a2f38; }
html.dark .kf-side { background: #17191e; border-right-color: #2a2f38; }
html.dark .kf-session { border-bottom-color: #24272e; }
html.dark .kf-session:hover { background: #1f242c; }
html.dark .kf-session.on { background: #1d2a3a; }
html.dark .kf-av { background: #17302a; color: #4fd1a0; }
html.dark .kf-s-name { color: #e8ebef; }
html.dark .kf-s-last, html.dark .kf-side-count { color: #8b93a1; }
html.dark .kf-head { border-bottom-color: #2a2f38; }
html.dark .kf-head-name { color: #e8ebef; }
html.dark .kf-head-contact { color: #8b93a1; }
html.dark .kf-msgs { background: #14161a; }
html.dark .kf-bubble { background: #22262e; color: #dfe3e8; }
html.dark .kf-msg.mine .kf-bubble { background: #16352a; color: #b6f0d4; }
html.dark .kf-msg.sys .kf-bubble { background: #1b1e24; color: #6b7382; }
html.dark .kf-input { background: #1b1e24; border-top-color: #2a2f38; }
html.dark .kf-quick-i { background: #22262e; color: #8b93a1; }
html.dark .kf-blank, html.dark .kf-blank-tip { color: #6b7382; }
/* =============================================================
客服工单（第 68 轮）
列表 + 抽屉详情 + 话术管理
============================================================= */
/* ---- 状态页签 ---- */
.kft-tabs {
display: flex; align-items: center; gap: 6px;
margin-top: 12px; padding-bottom: 2px;
border-bottom: 1px solid #ebeef5;
}
.kft-tab {
padding: 8px 14px; cursor: pointer;
font-size: 13.5px; color: #4e5969;
border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.kft-tab:hover { color: #1f2329; }
.kft-tab.on { color: #149252; border-bottom-color: #34c383; font-weight: 600; }
.kft-n {
display: inline-block; min-width: 18px; padding: 0 5px;
margin-left: 2px; border-radius: 9px;
background: #f2f3f5; color: #86909c;
font-size: 11.5px; line-height: 17px; text-align: center;
}
.kft-tab.on .kft-n { background: #e7f7ee; color: #149252; }
.kft-n.warn { background: #fff2e8; color: #d4380d; }
.kft-unread { font-size: 12.5px; color: #f5222d; }
/* ---- 回复时限 ---- */
.kft-sla { font-size: 12.5px; }
.kft-sla.is-ok { color: #86909c; }
.kft-sla.is-warn { color: #d46b08; font-weight: 600; }
.kft-sla.is-over { color: #f5222d; font-weight: 600; }
.kft-sla.is-replied { color: #149252; }
.kft-sla.is-done { color: #a8b0bb; }
/* ---- 抽屉 ---- */
.kft-detail {
display: flex; flex-direction: column;
height: 100%; padding: 18px 20px 14px;
box-sizing: border-box;
}
.kft-d-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding-bottom: 12px; border-bottom: 1px solid #ebeef5;
}
.kft-d-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kft-d-no { font-size: 15px; font-weight: 600; color: #1f2329; }
.kft-d-meta {
padding: 12px 0; font-size: 13px; color: #1f2329;
line-height: 1.9; border-bottom: 1px solid #f2f3f5;
}
.kft-lb {
display: inline-block; width: 64px;
color: #86909c; font-size: 12.5px;
}
/* 消息区 */
.kft-msgs {
flex: 1; overflow-y: auto;
padding: 14px 4px; background: #f7f9fb;
border-radius: 8px; margin: 12px 0;
}
.kft-msg { margin-bottom: 14px; }
.kft-msg.mine { text-align: right; }
.kft-who { font-size: 11.5px; color: #a8b0bb; margin-bottom: 4px; }
.kft-bubble {
display: inline-block; max-width: 78%; text-align: left;
padding: 9px 13px; border-radius: 10px;
background: #fff; color: #1f2329;
font-size: 13.5px; line-height: 1.65;
white-space: pre-wrap; word-break: break-word;
box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.kft-msg.mine .kft-bubble { background: #e7f7ee; color: #0f5132; }
.kft-empty { padding: 40px; text-align: center; color: #a8b0bb; font-size: 12.5px; }
/* 回复区 */
.kft-reply { flex: 0 0 auto; }
.kft-quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.kft-quick-t { font-size: 12px; color: #86909c; }
.kft-quick-i {
padding: 3px 10px; border-radius: 12px; cursor: pointer;
background: #f2f4f7; color: #4e5969; font-size: 12px;
}
.kft-quick-i:hover { background: #e7f7ee; color: #149252; }
.kft-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
/* 话术表单 */
.kft-qform {
margin-top: 16px; padding-top: 14px;
border-top: 1px dashed #e5e6eb;
}
.kft-qform-t { font-size: 13.5px; font-weight: 600; margin-bottom: 10px; color: #1f2329; }
/* ---- 深色适配 ---- */
html.dark .kft-tabs { border-bottom-color: #2a2f38; }
html.dark .kft-tab { color: #a9b0bd; }
html.dark .kft-tab.on { color: #4fd1a0; border-bottom-color: #34c383; }
html.dark .kft-n { background: #262b33; color: #8b93a1; }
html.dark .kft-d-head { border-bottom-color: #2a2f38; }
html.dark .kft-d-no { color: #e8ebef; }
html.dark .kft-d-meta { color: #dfe3e8; border-bottom-color: #24272e; }
html.dark .kft-msgs { background: #14161a; }
html.dark .kft-bubble { background: #22262e; color: #dfe3e8; }
html.dark .kft-msg.mine .kft-bubble { background: #16352a; color: #b6f0d4; }
html.dark .kft-quick-i { background: #22262e; color: #8b93a1; }
html.dark .kft-qform { border-top-color: #2a2f38; }
html.dark .kft-qform-t { color: #e8ebef; }