/* ============================================================
   panels.css —— 面板内部组件（33 个面板共用）
   ------------------------------------------------------------
   面板结构约定：
     .cc-pane
       └ .cc-card
           ├ .cc-card-head（标题 + 说明 + 操作）
           ├ .cc-card-body（列表 / 表单 / 编辑器）
           └ .cc-card-foot（次级操作与信息）
   ------------------------------------------------------------
   章节编辑（teach.js 的「资源中心」）走第 16 节另一套骨架：
     .ce-topbar（课程切换）
     .ce-wrap 内 .ce-tree（左：章 / 节目录树）+ .ce-main（右：选中那一章的元信息与入口）
       正文不在面板里编辑：每行一个入口跳 admin/edit.html（版面走 .rt-*）
     .ce-foot（保存结果与操作口径）
   ============================================================ */

/* ---------- 0. 纸只有一层（卡片去纸化总则） ----------
   全站只有「一张纸」：.cc-card（= mz_surface.css 的卡片档玻璃）。
   卡片**里面**的任何组件都不再各铺一层纸 —— 内嵌的底色一律 transparent，
   靠留白、一条发丝线（--mz-line）和字重分层次。
   以前每个内嵌块都自带 --cc-surface / --cc-surface-2 的半透明白，
   叠到第三层时白纱互相叠加，页面发灰、滚动时还要逐层重绘；
   本节起只在地图 / 图片 / 预览这类「必须读到内容本身」的地方保留底色。
   ------------------------------------------------------------ */

/* ---------- 1. 卡片 ---------- */
/* 底色 / 描边 / 圆角 / 模糊与全站同一份：mz_theme.css 第五节的卡片档
   （surface-card = 顶部斜向高光 + --mz-glass，模糊走 --mz-blur）。
   不再用后台自己那块不透明的 --cc-surface，也不在这里重抄一遍字面量。 */
.cc-card {
    overflow: hidden;
}

.cc-card+.cc-card {
    margin-top: var(--cc-sp-4);
}

/* 卡里的卡（就地嵌入的子面板）—— 教学域的「作业 / 考试 / 讨论」、
   「学情统计」里的两块，都是把别的面板原样挂进外卡的槽位里，
   而每个面板自己也以 .cc-card 开头，于是又长出一张纸。
   这里统一把内层卡退成一层：纸交还外卡，只留它的卡头当小节标题，
   内边距收成 0（外卡已经给过一圈 24px）。 */
.cc-card .cc-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.cc-card .cc-card > .cc-card-head,
.cc-card .cc-card > .cc-card-body,
.cc-card .cc-card > .cc-toolrow,
.cc-card .cc-card > .cc-card-foot {
    padding-left: 0;
    padding-right: 0;
}

.cc-card .cc-card > .cc-card-head {
    padding-top: 0;
}

/* 内层卡里的行也不再退一级：外卡的 24px 已经是它们的左边距，
   否则「小节标题——列表行」会错开一截，看着像又嵌了一层。 */
.cc-card .cc-card .cc-item {
    padding-left: 0;
    padding-right: 0;
}

/* 内层卡与上一块之间只留一条发丝线，不再叠第二道纸缝 */
.cc-card .cc-card+.cc-card {
    margin-top: 0;
    border-top: 1px solid var(--mz-line);
    padding-top: var(--cc-sp-4);
}

.cc-card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--cc-sp-4);
    padding: var(--cc-sp-4) var(--cc-sp-5);
    border-bottom: 1px solid var(--mz-line);
    /* 卡头不再单独铺一层实色：卡片本身是玻璃，头再糊一层会把它切成两段 */
    background: transparent;
}

.cc-card-head--plain {
    border-bottom: 0;
}

.cc-card-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--cc-fs-lg);
    font-weight: 700;
}

.cc-card-title .cc-ic {
    color: var(--cc-brand);
}

.cc-card-desc {
    margin-top: 4px;
    font-size: var(--cc-fs-sm);
    color: var(--cc-text-2);
}

.cc-card-head-main {
    flex: 1 1 auto;
    min-width: 0;
}

.cc-card-head-ops {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cc-card-body {
    padding: var(--cc-sp-5);
}

.cc-card-body--flush {
    padding: 0;
}

/* 卡脚与卡头同一刀切：卡内不再分「上白下灰」两块，只留一条发丝线 */
.cc-card-foot {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-3);
    flex-wrap: wrap;
    padding: var(--cc-sp-3) var(--cc-sp-5);
    border-top: 1px solid var(--mz-line);
    background: transparent;
    font-size: var(--cc-fs-sm);
    color: var(--cc-text-2);
}

.cc-foot-spacer {
    flex: 1 1 auto;
}

/* ---------- 2. 工具行（筛选 / 统计） ---------- */
/* 工具行只是卡片里的一段，不再自带浅底：与卡头同一块纸，用一条发丝线分界 */
.cc-toolrow {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-3);
    flex-wrap: wrap;
    padding: var(--cc-sp-3) var(--cc-sp-5);
    border-bottom: 1px solid var(--mz-line);
    background: transparent;
}

.cc-toolrow .cc-input,
.cc-toolrow .cc-select {
    width: auto;
    min-width: 160px;
}

/* 检索输入可以比下拉更宽一点（考试总览的「试卷名」位） */
.cc-toolrow .cc-input--grow {
    flex: 0 1 260px;
    min-width: 180px;
}

.cc-spacer {
    flex: 1 1 auto;
}

.cc-count {
    font-size: var(--cc-fs-sm);
    color: var(--cc-text-2);
    font-variant-numeric: tabular-nums;
}

/* 分段控件：外框只留描边，选中项才落一层极淡的主色（原先外框自带一层白纱）*/
.cc-seg {
    display: inline-flex;
    padding: 3px;
    background: transparent;
    border: 1px solid var(--mz-line);
    border-radius: var(--mz-radius-pill);
    gap: 2px;
}

.cc-seg-btn {
    height: 26px;
    padding: 0 12px;
    border-radius: var(--mz-radius-pill);
    font-size: var(--cc-fs-xs);
    color: var(--mz-ink-2);
    white-space: nowrap;
}

.cc-seg-btn[aria-selected="true"] {
    background: var(--mz-glass-2);
    color: var(--mz-ink);
    font-weight: 700;
    box-shadow: var(--mz-shadow-s);
}

/* ---------- 3. 列表 ---------- */
.cc-list {
    display: flex;
    flex-direction: column;
}

.cc-item {
    display: flex;
    align-items: flex-start;
    gap: var(--cc-sp-3);
    padding: var(--cc-sp-3) var(--cc-sp-5);
    border-bottom: 1px solid var(--cc-line);
    transition: background var(--cc-dur) var(--cc-ease);
}

.cc-item:last-child {
    border-bottom: 0;
}

.cc-item:hover {
    background: var(--cc-surface-2);
}

.cc-item-main {
    flex: 1 1 auto;
    min-width: 0;
}

.cc-item-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 700;
    color: var(--cc-text);
}

.cc-item-sub {
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px var(--cc-sp-3);
    flex-wrap: wrap;
    font-size: var(--cc-fs-sm);
    color: var(--cc-text-2);
    overflow-wrap: anywhere;
}

/* 行内的归属课程：只描边的胶囊，不叠白纱 */
.cc-item-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--mz-line);
    background: transparent;
    font-size: var(--cc-fs-xs);
    color: var(--cc-text-2);
    white-space: nowrap;
}

.cc-item-meta {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: var(--cc-sp-2) var(--cc-sp-3);
    flex-wrap: wrap;
    font-size: var(--cc-fs-xs);
    color: var(--cc-text-3);
    font-variant-numeric: tabular-nums;
}

.cc-item-ops {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.cc-item-ops--wrap {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cc-item-toggle {
    width: 100%;
    text-align: left;
    align-items: center;
}

.cc-item-toggle .cc-item-main {
    pointer-events: none;
}

.cc-avatar-lg {
    width: 40px;
    height: 40px;
    border-radius: var(--cc-r-md);
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--cc-brand-soft);
    color: var(--cc-brand-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* 展开的详情：不再是一张虚线小卡，而是一段缩进的分栏正文 */
.cc-detail {
    padding: 0 var(--cc-sp-5) var(--cc-sp-4);
}

.cc-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--cc-sp-4);
    padding: var(--cc-sp-4) 0 0 var(--cc-sp-4);
    background: transparent;
    border: 0;
    border-left: 2px solid var(--cc-line);
    border-radius: 0;
}

.cc-detail-title {
    font-size: var(--cc-fs-sm);
    font-weight: 700;
    color: var(--cc-text-2);
    margin-bottom: var(--cc-sp-2);
}

.cc-kv {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 6px var(--cc-sp-3);
    font-size: var(--cc-fs-sm);
}

.cc-kv dt {
    color: var(--cc-text-3);
}

.cc-kv dd {
    margin: 0;
    color: var(--cc-text);
    overflow-wrap: anywhere;
}

.cc-sublist {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 260px;
    overflow: auto;
}

/* 子列表：行与行之间一条发丝线，行本身不再各自成卡 */
.cc-sublist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 2px;
    border-radius: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--cc-line);
    font-size: var(--cc-fs-xs);
    color: var(--cc-text-2);
}

.cc-sublist-item:last-child {
    border-bottom: 0;
}

.cc-sublist-item time {
    font-variant-numeric: tabular-nums;
    color: var(--cc-text-3);
    flex: 0 0 auto;
}

.cc-sublist-item b {
    color: var(--cc-text);
    font-weight: 500;
}

.cc-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ---------- 4. 空状态与加载 ---------- */
.cc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cc-sp-2);
    padding: var(--cc-sp-6) var(--cc-sp-4);
    text-align: center;
    color: var(--cc-text-3);
    font-size: var(--cc-fs-sm);
}

.cc-empty .cc-svg,
.cc-empty .cc-ic svg {
    width: 28px;
    height: 28px;
    opacity: .75;
}

.cc-skel {
    height: 14px;
    border-radius: var(--cc-r-full);
    background: linear-gradient(90deg, var(--cc-surface-3) 25%, var(--cc-surface-2) 37%, var(--cc-surface-3) 63%);
    background-size: 400% 100%;
    animation: cc-shimmer 1.4s ease infinite;
}

.cc-skel-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--cc-sp-4) var(--cc-sp-5);
}

.cc-skel-row .cc-skel:nth-child(2) {
    width: 70%;
}

.cc-skel-row .cc-skel:nth-child(3) {
    width: 45%;
}

@keyframes cc-shimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0 0;
    }
}

/* ---------- 5. 表格（操作日志） ---------- */
.cc-table-wrap {
    max-height: 60vh;
    overflow: auto;
}

.cc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--cc-fs-sm);
}

/* 表头吸顶时底下会滚过正文，所以它是「浮层」而不是「纸」：
   只用半透明白 + 一层模糊压住透字，不铺第二块实底。 */
.cc-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px var(--cc-sp-4);
    text-align: left;
    font-weight: 700;
    font-size: var(--cc-fs-xs);
    color: var(--cc-text-2);
    background: var(--mz-glass-2);
    -webkit-backdrop-filter: blur(var(--mz-blur)) saturate(var(--mz-blur-sat));
    backdrop-filter: blur(var(--mz-blur)) saturate(var(--mz-blur-sat));
    border-bottom: 1px solid var(--cc-line);
    white-space: nowrap;
}

.cc-table td {
    padding: 10px var(--cc-sp-4);
    border-bottom: 1px solid var(--cc-line);
    vertical-align: top;
    color: var(--cc-text-2);
    overflow-wrap: anywhere;
}

.cc-table tr:hover td {
    background: var(--cc-surface-2);
}

.cc-table td b {
    color: var(--cc-text);
    font-weight: 500;
}

.cc-mono {
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-xs);
    color: var(--cc-text-3);
    overflow-wrap: anywhere;
}

/* ---------- 6. 表单（字段编辑器 / 大模型配置） ---------- */
.cc-form {
    display: flex;
    flex-direction: column;
    gap: var(--cc-sp-4);
}

.cc-fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--cc-sp-4);
}

.cc-fieldset--full {
    grid-template-columns: 1fr;
}

/* 面板内的小节（.cc-panel）：公共层把它列在「卡片」清单里，
   在后台它却是卡里的一段 —— 这里显式退回「无纸」状态：
   上下只用一条发丝线分节，横向不再多缩进一层。 */
.cc-panel {
    padding: var(--cc-sp-4) 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--mz-line);
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.cc-panel:first-child {
    padding-top: 0;
    border-top: 0;
}

/* 主题层（mz_theme.css 末尾那份「卡片清单」）把 .cc-panel 也当成一张卡，
   于是卡里又长出一层玻璃纸。那条规则写在主题层、加载次序在本文件之后，
   这里只能提高一级选择器把它按回去：
     · 底色 / 描边 / 投影 / 模糊 —— 靠 .cc-card .cc-panel 的权重压过 .cc-panel；
     · 圆角 —— 主题层那条带 !important，所以这里同样 !important，再靠权重取胜。 */
.cc-card .cc-panel,
.cc-pane .cc-panel,
.cc-sheet .cc-panel {
    background: transparent;
    border: 0;
    border-radius: 0 !important;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.cc-panel+.cc-panel {
    margin-top: 0;
}

.cc-panel-head {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-2);
    margin-bottom: var(--cc-sp-3);
}

.cc-panel-title {
    font-size: var(--cc-fs-sm);
    font-weight: 700;
    color: var(--cc-text-2);
}

/* 表单项卡片：从「卡里的小卡」改成「带左规线的一段」——
   这是本次去嵌套最重的一处，考试 / 训练 / 表单三个域都靠它。 */
.cc-field-item {
    border: 0;
    border-left: 2px solid var(--cc-line);
    border-radius: 0;
    background: transparent;
    padding: 0 0 0 var(--cc-sp-4);
}

.cc-field-item+.cc-field-item {
    margin-top: var(--cc-sp-3);
}

.cc-field-item-head {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-2);
    margin-bottom: var(--cc-sp-3);
}

.cc-field-item-name {
    flex: 1 1 auto;
    font-weight: 700;
    min-width: 0;
}

.cc-field-item-grid {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: var(--cc-sp-2) var(--cc-sp-3);
    align-items: center;
}

.cc-field-item-grid>span {
    font-size: var(--cc-fs-sm);
    color: var(--cc-text-3);
}

/* ---------- 7. 富文本编辑器 ---------- */
/* 编辑器的边框就是「输入区」的边界，保留；但底色透明 —— 纸已经是卡片那张了 */
.cc-editor {
    border: 1px solid var(--cc-line-strong);
    border-radius: var(--cc-r-md);
    background: transparent;
    overflow: hidden;
}

.cc-editor-rail {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    padding: 6px 8px;
    border-bottom: 1px solid var(--cc-line);
    background: transparent;
}

.cc-editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    border-radius: var(--cc-r-xs);
    color: var(--cc-text-2);
    font-size: var(--cc-fs-xs);
    /* 文字按钮与全站同族（规范 §6.2 第 5 条）：button 的 font-family 已在
       tokens.css 统一补了 inherit，这里再写一次，防单页直引样式表时漏掉。 */
    font-family: inherit;
    line-height: 1;
}

/* 图标单独指定图标族，且**不挂在工具栏容器上**（规范 §6.2 第 6 条）：
   本站图标是内联 SVG，本身不吃字体；写死图标族是为了换成图标字体（font/svgicons.woff）
   时 glyph 落对族，同时保证 .cc-editor-rail 上没有图标字体 ——
   否则「H2 / H3」这类中文标签会被图标字体吃掉、显示成方框。
   图标按 24px 图标线居中（规范 §6.2 第 7 条）：视觉尺寸仍是 16px，
   按钮 28px 高度不变，不撑破 30 / 34 / 44px 三档。 */
.cc-editor-btn .cc-ic {
    font-family: var(--cc-icon-font);
    height: 24px;
}

/* H2 / H3 是文字按钮：字重取 700（真 Bold 子集），不用 800 / 900（会合成假粗） */
.cc-editor-btn--title {
    font-weight: 700;
}

.cc-editor-btn:hover {
    background: var(--cc-hover);
    color: var(--cc-text);
}

.cc-editor-btn.is-on {
    background: var(--cc-brand-soft);
    color: var(--cc-brand-text);
}

.cc-editor-sep {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: var(--cc-line-strong);
}

.cc-editor-area {
    min-height: 320px;
    max-height: 62vh;
    overflow: auto;
    padding: var(--cc-sp-4) var(--cc-sp-5);
    /* 编辑区显式指定字体族：contenteditable 在部分浏览器里会脱离继承链，
       只靠继承不可靠（规范 §6.1 第 1 条）。字号 / 行高与前台长文同一基线。 */
    font-family: var(--cc-font);
    font-size: var(--cc-fs-body);
    line-height: var(--cc-lh-body);
    letter-spacing: var(--cc-ls-body);
    outline: none;
}

/* 编辑区内的代码 / 终端片段保留等宽族，不被 Harmony 覆盖（规范 §6.1 第 3 条） */
.cc-editor-area pre,
.cc-editor-area code {
    font-family: var(--cc-code);
    font-variant-ligatures: none;
}

.cc-editor-area:empty::before {
    content: attr(data-ph);
    color: var(--cc-text-3);
}

.cc-editor-area h2 {
    font-size: 20px;
    margin: 18px 0 8px;
}

.cc-editor-area h3 {
    font-size: 17px;
    margin: 14px 0 6px;
}

.cc-editor-area p {
    margin: 10px 0;
}

.cc-editor-area ul,
.cc-editor-area ol {
    padding-left: 22px;
    list-style: disc;
    margin: 10px 0;
}

.cc-editor-area ol {
    list-style: decimal;
}

.cc-editor-area blockquote {
    margin: 12px 0;
    padding: 8px 14px;
    border-left: 3px solid var(--cc-brand);
    background: transparent;
    color: var(--cc-text-2);
}

.cc-editor-area img {
    max-width: 100%;
    border-radius: var(--cc-r-sm);
}

.cc-editor-area table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.cc-editor-area th,
.cc-editor-area td {
    border: 1px solid var(--cc-line-strong);
    padding: 7px 10px;
    font-size: var(--cc-fs-sm);
}

.cc-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cc-sp-4);
}

.cc-split.is-preview {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

@media (max-width: 1100px) {
    .cc-split.is-preview {
        grid-template-columns: 1fr;
    }
}

/* 预览区＝前台阅读效果，但纸还是卡片那张：只留一条主色虚线做「这是一段预览」的标记 */
.cc-preview {
    border: 0;
    border-left: 2px dashed var(--cc-line-strong);
    border-radius: 0;
    background: transparent;
    padding: var(--cc-sp-1) 0 var(--cc-sp-1) var(--cc-sp-5);
    max-height: 62vh;
    overflow: auto;
    /* 预览＝前台阅读效果：走长文基线（规范 §三）——16px / 行高 2.0 / 字距 .015em */
    font-family: var(--cc-font);
    font-size: var(--cc-fs-body);
    line-height: var(--cc-lh-read);
    letter-spacing: var(--cc-ls-read);
}

/* 长文段距 20px、长段落 pretty 断行（摘要那一行除外，它有自己的间距） */
.cc-preview p:not(.sum),
.cc-preview li,
.cc-preview blockquote {
    margin-block: var(--cc-gap-read);
    text-wrap: pretty;
}

/* 预览里的代码 / 终端片段同样保留等宽族 */
.cc-preview pre,
.cc-preview code {
    font-family: var(--cc-code);
    font-variant-ligatures: none;
}

.cc-preview-tag {
    display: block;
    margin-bottom: var(--cc-sp-2);
    font-size: var(--cc-fs-xs);
    color: var(--cc-text-3);
    letter-spacing: .08em;
}

.cc-preview h2 {
    font-size: 20px;
    margin-bottom: 6px;
}

.cc-preview .sum {
    color: var(--cc-text-2);
    font-size: var(--cc-fs-sm);
    margin-bottom: var(--cc-sp-3);
}

/* ---------- 8. 通知接收人 ---------- */
.cc-people {
    display: flex;
    flex-direction: column;
    gap: var(--cc-sp-2);
}

.cc-people-head {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-2);
    font-size: var(--cc-fs-sm);
    color: var(--cc-text-2);
}

/* 接收人名单：一个可滚动的字段区，靠描边立界，底透明 */
.cc-people-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
    max-height: 240px;
    overflow: auto;
    padding: var(--cc-sp-2);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-r-sm);
    background: transparent;
}

.cc-person {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: var(--cc-r-xs);
    font-size: var(--cc-fs-sm);
    color: var(--cc-text-2);
    cursor: pointer;
}

.cc-person:hover {
    background: var(--cc-hover);
}

/* 两侧布局：窄侧栏（列表）+ 主区（编辑器） */
.cc-split--aside {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
}

@media (max-width: 1100px) {
    .cc-split--aside {
        grid-template-columns: 1fr;
    }
}

/* 侧栏列表 / 卡内列表：不再自成一卡。默认无纸无边，
   只有并排布局（.cc-split--aside）里才补一条右缘发丝线当分栏。 */
.cc-listbox {
    border: 0;
    border-radius: 0;
    background: transparent;
    max-height: 62vh;
    overflow-y: auto;
}

.cc-split--aside > .cc-listbox {
    border-right: 1px solid var(--cc-line);
    padding-right: var(--cc-sp-2);
}

.cc-listbox .cc-item {
    padding: 12px 14px;
}

.cc-item.is-on {
    background: var(--cc-brand-soft);
}

.cc-item.is-on .cc-item-title {
    color: var(--cc-brand-text);
}

/* 折叠段：summary 就是它的边界，展开的正文不再另起一张底卡 */
.cc-details {
    border: 0;
    border-top: 1px solid var(--cc-line);
    border-radius: 0;
    background: transparent;
    padding: var(--cc-sp-2) 0;
}

.cc-details>summary {
    cursor: pointer;
    font-size: var(--cc-fs-sm);
    font-weight: 700;
    color: var(--cc-text-2);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cc-details>summary::-webkit-details-marker {
    display: none;
}

.cc-details>summary::before {
    content: "▸";
    font-size: 11px;
    color: var(--cc-text-3);
}

.cc-details[open]>summary::before {
    content: "▾";
}

.cc-details-body {
    display: grid;
    gap: var(--cc-sp-3);
    margin-top: var(--cc-sp-3);
}

/* 可整块点击的列表行主体（行内另有「管理」等操作按钮，故不整体用 button 包行） */
.cc-row-main {
    display: flex;
    align-items: flex-start;
    gap: var(--cc-sp-3);
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.cc-row-main .cc-caret svg {
    transition: transform var(--cc-dur) var(--cc-ease);
}

.cc-row-main[aria-expanded="true"] .cc-caret svg {
    transform: rotate(180deg);
}

.cc-item.is-open {
    background: var(--cc-surface-2);
}

/* ---------- 9. 开关 ---------- */
.cc-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--cc-fs-sm);
    color: var(--cc-text-2);
    cursor: pointer;
}

.cc-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cc-switch-track {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: var(--cc-r-full);
    background: var(--cc-line-strong);
    transition: background var(--cc-dur) var(--cc-ease);
    flex: 0 0 auto;
}

.cc-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--cc-shadow-1);
    transition: transform var(--cc-dur) var(--cc-ease);
}

.cc-switch input:checked+.cc-switch-track {
    background: var(--cc-brand);
}

.cc-switch input:checked+.cc-switch-track::after {
    transform: translateX(18px);
}

.cc-switch input:focus-visible+.cc-switch-track {
    outline: 2px solid var(--cc-focus);
    outline-offset: 2px;
}

/* ---------- 10. 内联消息 ---------- */
.cc-msg {
    font-size: var(--cc-fs-sm);
    color: var(--cc-text-2);
    min-height: 20px;
}

.cc-msg[data-kind="ok"] {
    color: var(--cc-ok);
}

.cc-msg[data-kind="error"] {
    color: var(--cc-danger);
}

/* 字段错误提示（表单必填） */
.cc-input[aria-invalid="true"],
.cc-select[aria-invalid="true"],
.cc-textarea[aria-invalid="true"] {
    border-color: var(--cc-danger);
}

/* ---------- 11. 关键词标签 ---------- */
.cc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ---------- 11b. 协作台账：状态徽标与筛选行 ---------- */
/* 状态色板：待处理＝中性 / 进行中＝品牌 / 受阻＝警示 / 已完成＝成功 */
/* 状态徽标：中性档只描边不铺底（语义档仍保留一档淡色，颜色本身就是信息） */
.cc-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: var(--cc-r-full);
    font-size: var(--cc-fs-xs);
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
    border: 1px solid var(--mz-line);
    background: transparent;
    color: var(--mz-ink-2);
}

.cc-badge[data-kind="open"] {
    border-color: var(--cc-line-strong);
    background: transparent;
    color: var(--cc-text-2);
}

.cc-badge[data-kind="doing"] {
    border-color: var(--cc-brand);
    background: var(--cc-brand-soft);
    color: var(--cc-brand-text);
}

.cc-badge[data-kind="blocked"] {
    border-color: var(--cc-warn);
    background: var(--cc-warn-soft);
    color: var(--cc-warn);
}

.cc-badge[data-kind="done"] {
    border-color: var(--cc-ok);
    background: var(--cc-ok-soft);
    color: var(--cc-ok);
}

/* 筛选行：标签 + 控件横排，窄屏由 mobile.css 收成竖排 */
.cc-filters {
    align-items: center;
    gap: var(--cc-sp-2) var(--cc-sp-3);
    flex-wrap: wrap;
    padding-bottom: var(--cc-sp-3);
    margin-bottom: var(--cc-sp-3);
    border-bottom: 1px solid var(--cc-line);
}

.cc-filters .cc-select {
    min-width: 132px;
}

/* 详情区右下的操作行 */
.cc-detail-ops {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: var(--cc-sp-4);
}

/* 台账条目正文：白底长文块，可换行、可滚动，不受提示条的配色约束 */
/* 台账条目正文：透明长文块，靠左规线标明「这是引用的一段」 */
.cc-prose {
    padding: var(--cc-sp-1) 0 var(--cc-sp-1) var(--cc-sp-4);
    border: 0;
    border-left: 2px solid var(--cc-line);
    border-radius: 0;
    background: transparent;
    color: var(--cc-text);
    font-size: var(--cc-fs-sm);
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 46vh;
    overflow: auto;
}

/* ---------- 12. 公众号排版工场 ---------- */
.cc-wx {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--cc-sp-4);
}

@media (max-width: 1100px) {
    .cc-wx {
        grid-template-columns: 1fr;
    }
}

.cc-wx textarea {
    min-height: 380px;
    font-family: var(--cc-mono);
    font-size: var(--cc-fs-sm);
    line-height: 1.7;
}

.cc-wx-preview {
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-r-md);
    background: #fff;
    color: #1f1f1f;
    padding: var(--cc-sp-4) var(--cc-sp-5);
    max-height: 62vh;
    overflow: auto;
}

.cc-wx-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cc-sp-3);
}

.cc-wx-controls .cc-input {
    width: 110px;
}

/* ---------- 13. 统计小卡 ---------- */
/* 数字块只是「一段读数」，不是第二层卡：不描边、不铺底 */
.cc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--cc-sp-3);
}

.cc-stat {
    padding: var(--cc-sp-1) 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.cc-stat b {
    display: block;
    font-size: var(--cc-fs-2xl);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.cc-stat span {
    font-size: var(--cc-fs-xs);
    color: var(--cc-text-3);
}

/* ---------- 14. 危险提示条 ---------- */
.cc-warnbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--cc-r-md);
    background: var(--cc-warn-soft);
    color: var(--cc-warn);
    font-size: var(--cc-fs-sm);
}

.cc-warnbox .cc-ic {
    margin-top: 2px;
}

.cc-dangerbox {
    background: var(--cc-danger-soft);
    color: var(--cc-danger);
}

/* ---------- 15. 封面缩略图（文章列表 / 编辑器预览） ---------- */
.cc-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-r-sm);
    background: transparent;
}

.cc-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-thumb.is-empty {
    border-style: dashed;
}

.cc-thumb-txt {
    font-size: var(--cc-fs-xs);
    color: var(--cc-text-3);
    letter-spacing: .06em;
}

/* 编辑器里的预览尺寸 */
.cc-thumb--lg {
    width: 96px;
    height: 62px;
}

.cc-cover-input {
    flex: 1 1 260px;
    min-width: 0;
}

.cc-cover-box {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-3);
    margin-top: 8px;
}

.cc-cover-box .cc-hint {
    min-width: 0;
}

/* ---------- 主观题的「拍照作答」缩略图（考试 / 训练的评阅面板） ---------- */
.cc-photos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cc-sp-2);
    margin-top: var(--cc-sp-2);
}

.cc-photo-link {
    display: block;
    line-height: 0;
    border-radius: var(--cc-r-sm);
}

.cc-photo {
    width: 132px;
    height: 132px;
    object-fit: cover;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-r-sm);
    background: transparent;
}

.cc-photo-link:hover .cc-photo {
    border-color: var(--cc-line-strong);
    box-shadow: var(--cc-shadow-1);
}

.cc-photo--bad {
    display: inline-flex;
    width: 96px;
    height: 96px;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    color: var(--cc-text-3);
    font-size: var(--cc-fs-xs);
}

/* ---------- 9. 汇总域：协作平台入口汇总（任务 261016-01 · 规范 §5.2） ---------- */
.cc-sum-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--cc-sp-3);
}

/* 入口行：一条发丝线分界的一行，不再每行各包一张小卡 */
.cc-sum-row {
    display: flex;
    align-items: flex-start;
    gap: var(--cc-sp-3);
    padding: var(--cc-sp-3) 0;
    border: 0;
    border-bottom: 1px solid var(--cc-line);
    border-radius: 0;
    background: transparent;
}

.cc-sum-row:last-child {
    border-bottom: 0;
}

.cc-sum-no {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--cc-r-full);
    background: var(--cc-brand-soft);
    color: var(--cc-brand-text);
    font-size: var(--cc-fs-xs);
    /* 序数用等宽数字，1–8 的圆点不会因位数跳动 */
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cc-sum-glyph {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--cc-text-3);
}

.cc-sum-main {
    flex: 1 1 auto;
    min-width: 0;
}

.cc-sum-title {
    font-size: var(--cc-fs-lg);
    font-weight: 700;
    line-height: 1.4;
    color: var(--cc-text);
    text-wrap: balance;
}

.cc-sum-desc {
    margin: 4px 0 6px;
    font-size: var(--cc-fs-sm);
    line-height: 1.8;
    color: var(--cc-text-2);
    text-wrap: pretty;
}

.cc-sum-url {
    margin: 0 0 8px;
    word-break: break-all;
}

.cc-sum-url code {
    font-family: var(--cc-code);
    font-size: var(--cc-fs-xs);
    color: var(--cc-text-3);
}

.cc-sum-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cc-sp-2);
}

@media (max-width: 720px) {
    .cc-sum-row {
        flex-wrap: wrap;
    }

    .cc-sum-main {
        flex: 1 1 100%;
    }
}

/* ---------- 富文本编辑面（与阅读端同款排版，不用原生样式） ----------
   编辑面是「输入区的纸」，底色仍取卡片那张，不另铺一层白 ——
   否则正文一块白、卡头一块玻璃，卡片被切成两段。 */
.cc-rt {
    min-height: 340px;
    max-height: 62vh;
    overflow: auto;
    padding: 18px 20px;
    line-height: 1.95;
    font-size: 15px;
    color: var(--cc-ink, #1b2430);
    background: transparent;
    border: 1px solid var(--cc-line, #e3e7ee);
    border-radius: 10px;
    outline: none;
}

.cc-rt:focus {
    border-color: var(--cc-accent, #2563eb);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-accent, #2563eb) 14%, transparent);
}

.cc-rt h1, .cc-rt h2, .cc-rt h3, .cc-rt h4 { line-height: 1.45; margin: 1.4em 0 .5em; }
.cc-rt h1 { font-size: 22px; }
.cc-rt h2 { font-size: 19px; }
.cc-rt h3 { font-size: 16px; }
.cc-rt p { margin: .7em 0; }
.cc-rt ul, .cc-rt ol { margin: .7em 0 .7em 1.5em; }
.cc-rt li { margin: .3em 0; }
.cc-rt blockquote {
    margin: 1em 0; padding: 10px 14px;
    border-left: 3px solid var(--cc-accent, #2563eb);
    background: color-mix(in srgb, var(--cc-accent, #2563eb) 8%, transparent);
    border-radius: 0 8px 8px 0;
    color: var(--cc-ink-2, #445065);
}
.cc-rt table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 14px; }
.cc-rt th, .cc-rt td { border: 1px solid var(--cc-line, #e3e7ee); padding: 7px 9px; text-align: left; vertical-align: top; }
.cc-rt th { background: transparent; font-weight: 700; }
.cc-rt img { max-width: 100%; height: auto; border-radius: 8px; }
.cc-rt a { color: var(--cc-accent, #2563eb); }
.cc-rt pre, .cc-rt code { background: var(--cc-surface-2, #f4f6fa); border-radius: 6px; padding: 2px 6px; }
.cc-rt pre { padding: 12px 14px; overflow: auto; }

/* 插入链接 / 图片的行内工具条：只是编辑器下方的一行，不另起一张卡 */
.cc-rt-insert {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px 0 0;
    margin: 8px 0 0;
    border: 0;
    border-top: 1px dashed var(--cc-line, #e3e7ee);
    border-radius: 0;
    background: transparent;
}

.cc-rt-insert[hidden] { display: none; }
.cc-rt-insert input { flex: 1 1 220px; min-width: 0; }

/* ---------- 主观题作答里的旧版图片（![图片](地址) → 真图） ---------- */
.cc-answer-rich {
    margin-top: var(--cc-sp-2);
    padding: var(--cc-sp-2) 0 var(--cc-sp-2) var(--cc-sp-4);
    border: 0;
    border-left: 2px dashed var(--cc-line);
    border-radius: 0;
    background: transparent;
    font-size: var(--cc-fs-sm);
    line-height: 1.85;
    color: var(--cc-text-2);
    word-break: break-word;
}

.cc-answer-rich a {
    color: var(--cc-accent);
}

.cc-answer-fig {
    margin: var(--cc-sp-2) 0 0;
    max-width: 100%;
}

.cc-answer-fig:first-child {
    margin-top: 0;
}

.cc-answer-fig a {
    display: inline-block;
    line-height: 0;
    border-radius: var(--cc-r-sm);
}

.cc-answer-fig img {
    display: block;
    max-width: min(100%, 420px);
    max-height: 420px;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-r-sm);
    background: #fff;
}

.cc-answer-fig figcaption {
    margin-top: 4px;
    font-size: var(--cc-fs-xs);
    color: var(--cc-text-3);
}
/* ---------- 16. 章节编辑（ce-*）：左侧章节树 + 右侧单章面板 ----------
   旧系统（ExtJS）那一页的层次是「返回条 + 工具条 + 编辑区 + 字数/状态」，
   这里只借层次：顶部一条课程切换，中间左树右面板，底部一条状态。
   皮肤全部取 --cc-* / --mz-*，不搬任何 x-panel / edui 的样式。 */

.ce-topbar .cc-select {
    min-width: 220px;
    max-width: 320px;
}

.ce-wrap {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: stretch;
    min-height: 420px;
}

/* 左树：贴卡片左侧，右侧一根分隔线；滚动只在树内发生。
   底色透明 —— 树是卡片里的一栏，不是卡片里的另一张卡。 */
.ce-tree {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--mz-line);
    background: transparent;
}

.ce-tree-head {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-2);
    padding: 10px var(--cc-sp-4);
    border-bottom: 1px solid var(--mz-line);
    font-size: var(--cc-fs-sm);
    font-weight: 700;
    color: var(--cc-text);
}

.ce-tree-meta {
    margin-left: auto;
    font-size: var(--cc-fs-xs);
    font-weight: 400;
    color: var(--cc-text-3);
    font-variant-numeric: tabular-nums;
}

.ce-tree-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 62vh;
    overflow: auto;
    padding: 6px;
}

.ce-tree-empty {
    margin: 0;
    padding: var(--cc-sp-4) var(--cc-sp-3);
    font-size: var(--cc-fs-sm);
    line-height: 1.7;
    color: var(--cc-text-3);
}

.ce-node {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 4px 6px;
    border-radius: var(--cc-r-sm);
    cursor: pointer;
    color: var(--cc-text);
    font-size: var(--cc-fs-sm);
    transition: background var(--cc-dur) var(--cc-ease), color var(--cc-dur) var(--cc-ease);
}

.ce-node:hover {
    background: var(--cc-surface-2);
}

/* 选中：左缘一道主色标 + 主色淡底。整行反色会把树压成一块黑板，
   反而看不出「哪一行是当前正在编的那一节」。 */
.ce-node.is-on {
    background: var(--cc-brand-soft);
    box-shadow: inset 2px 0 0 var(--cc-brand);
    color: var(--cc-brand-text);
    font-weight: 700;
}

.ce-node--sub {
    margin-left: 14px;
}

.ce-caret {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: var(--cc-r-xs);
    background: none;
    color: var(--cc-text-3);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--cc-dur) var(--cc-ease), background var(--cc-dur) var(--cc-ease);
}

.ce-caret:hover {
    color: var(--cc-text);
    background: var(--cc-hover);
}

.ce-caret.is-fold {
    transform: rotate(-90deg);
}

/* 没有子节的章也占住这颗箭头的宽度，标题才对得齐 */
.ce-caret--none {
    visibility: hidden;
    cursor: default;
}

.ce-no {
    flex: 0 0 auto;
    min-width: 22px;
    font-size: var(--cc-fs-xs);
    color: var(--cc-text-3);
    font-variant-numeric: tabular-nums;
}

.ce-node.is-on .ce-no {
    color: var(--cc-brand-text);
}

.ce-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ce-name.is-empty {
    color: var(--cc-text-3);
    font-weight: 400;
}

/* 上移 / 下移悬停才出现：树窄，常显会把标题挤成一串省略号 */
.ce-ops {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--cc-dur) var(--cc-ease);
}

.ce-node:hover .ce-ops,
.ce-node.is-on .ce-ops,
.ce-ops:focus-within {
    opacity: 1;
}

.ce-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--cc-r-xs);
    background: none;
    color: var(--cc-text-2);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.ce-mini:hover {
    border-color: var(--cc-line);
    background: var(--mz-surface-comp);
    color: var(--cc-text);
}

/* 触屏没有 hover：操作按钮常显，否则手机上根本点不到 */
@media (hover: none) {
    .ce-ops {
        opacity: 1;
    }
}

/* ---------- 右侧：一次只编一章 ---------- */
.ce-main {
    display: flex;
    flex-direction: column;
    gap: var(--cc-sp-3);
    min-width: 0;
    padding: var(--cc-sp-4) var(--cc-sp-5) var(--cc-sp-5);
}

.ce-main-head {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-2);
    flex-wrap: wrap;
    padding-bottom: var(--cc-sp-3);
    border-bottom: 1px solid var(--cc-line);
}

/* 面板标题与树上那一行同一把尺子：序号灰、名字黑，等宽数字不抖 */
.ce-main-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 200px;
    min-width: 0;
    font-size: var(--cc-fs-lg);
    font-weight: 700;
}

.ce-main-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ce-fields {
    display: grid;
    gap: var(--cc-sp-3);
}

.ce-field {
    display: grid;
    gap: 5px;
}

.ce-field-label {
    font-size: var(--cc-fs-xs);
    font-weight: 700;
    color: var(--cc-text-2);
}

.ce-field-hint {
    font-size: var(--cc-fs-xs);
    line-height: 1.7;
    color: var(--cc-text-3);
}

.ce-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: var(--cc-sp-1);
}

.ce-hint {
    margin: auto 0;
    padding: var(--cc-sp-5) var(--cc-sp-4);
    border: 1px dashed var(--cc-line-strong);
    border-radius: var(--cc-r-md);
    background: transparent;
    text-align: center;
}

.ce-hint-t {
    margin: 0 0 6px;
    font-size: var(--cc-fs-md);
    font-weight: 700;
    color: var(--cc-text);
}

.ce-hint-d {
    margin: 0;
    font-size: var(--cc-fs-sm);
    line-height: 1.7;
    color: var(--cc-text-2);
}

/* 正文编辑器已搬去独立页 admin/edit.html（版面走 admin-editor.css 的 .rt-*）：
   这一节的 .ce-* 只管「章节树上那一条长什么样」，不再有内嵌编辑区。 */

.ce-count {
    font-size: var(--cc-fs-xs);
    color: var(--cc-text-3);
    font-variant-numeric: tabular-nums;
}

.ce-foot {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-2);
    flex-wrap: wrap;
    padding: var(--cc-sp-3) var(--cc-sp-5);
    border-top: 1px solid var(--mz-line);
    background: transparent;
}

.ce-foot .cc-msg {
    margin: 0;
    min-height: 0;
}

/* 窄屏：树折到上面、面板在下面（顺序不变，别让树盖住正文） */
@media (max-width: 900px) {
    .ce-wrap {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .ce-tree {
        border-right: 0;
        border-bottom: 1px solid var(--mz-line);
    }

    .ce-tree-list {
        max-height: 34vh;
    }

    .ce-main {
        padding: var(--cc-sp-4);
    }
}
/* ---------- 19. 站内日期 / 时间选择器（.cc-dtp） ----------
   由 core/datetime.js 接管原生 <input type="date|datetime-local|time">：
   点输入框弹这里的浮层（骨架仍是 .cc-sheet，浮层档、深浅两色自动跟随），
   不再出现浏览器那张跟页面不是一套的日历。
   配色只取 --cc-* 令牌，不写死色值。 */
.cc-dtp {
    display: grid;
    gap: 10px;
}

.cc-dtp-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cc-dtp-month {
    flex: 1 1 auto;
    text-align: center;
    font-size: var(--cc-fs-md);
    font-weight: 700;
    color: var(--cc-text);
    font-variant-numeric: tabular-nums;
}

.cc-dtp-head .cc-icon-btn {
    font-size: 18px;
    line-height: 1;
    color: var(--cc-text-2);
}

.cc-dtp-head .cc-icon-btn:hover {
    background: var(--cc-hover);
    color: var(--cc-text);
}

.cc-dtp-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    font-size: var(--cc-fs-xs);
    color: var(--cc-text-3);
    text-align: center;
}

.cc-dtp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cc-dtp-day {
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--cc-r-sm);
    background: transparent;
    color: var(--cc-text);
    font: inherit;
    font-size: var(--cc-fs-sm);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--cc-dur) var(--cc-ease), border-color var(--cc-dur) var(--cc-ease);
}

.cc-dtp-day:hover {
    background: var(--cc-hover);
}

.cc-dtp-day:focus-visible {
    outline: 2px solid var(--cc-focus);
    outline-offset: 1px;
}

/* 上 / 下月的日子：留着做「顺手点过去」，但明显退后一层 */
.cc-dtp-day.is-out {
    color: var(--cc-text-3);
}

.cc-dtp-day.is-today {
    border-color: var(--cc-line-strong);
}

.cc-dtp-day.is-on {
    background: var(--cc-brand);
    border-color: var(--cc-brand);
    color: #fff;
    font-weight: 700;
}

.cc-dtp-time {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid var(--cc-line);
}

.cc-dtp-num {
    width: 78px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cc-dtp-colon {
    margin-left: -4px;
    color: var(--cc-text-3);
}

@media (max-width: 720px) {
    .cc-dtp-day {
        height: 40px;
    }

    .cc-dtp-num {
        width: 84px;
    }
}