css
/* ═══════════════════════════════════════════════
   ★ 沈落薇 · 旧档案夹特别版 ★
   适配：星记忆回廊 / 状态面板 / 数值高亮
   ═══════════════════════════════════════════════ */

/* ── 档案夹外观：所有 details 容器 ── */
.markdown-body pre details {
  background: #f5ecd7 !important;           /* 泛黄纸色 */
  border: 1px solid #9c7e56 !important;
  border-left: 4px solid #4e3b22 !important;  /* 左侧书脊 */
  border-radius: 0 6px 6px 0 !important;
  margin: 8px 0 !important;
  padding: 0 !important;
  position: relative;
  box-shadow: 
    inset 0 0 15px rgba(110, 80, 40, 0.08),
    2px 2px 4px rgba(80, 60, 30, 0.15);
  contain: layout;
}

/* 档案夹标签条（summary） */
.markdown-body pre details > summary {
  background: #e3d3b2 !important;           /* 带纸色标签底 */
  color: #4e3b22 !important;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 12px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px dashed #9c7e56 !important;
  transition: background 0.2s;
}

.markdown-body pre details > summary:hover {
  background: #d6c19a !important;
}

/* 打开时给档案夹加突出效果 */
.markdown-body pre details[open] {
  border-left-color: #b3563a !important;    /* 翻开的档案夹，红绳 */
}

/* 档案夹类的小装饰：顶部、垂直卡舌（用伪元素） */
.markdown-body pre details::before {
  content: '📁';
  position: absolute;
  right: 8px;
  top: 4px;
  font-size: 14px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 2;
}

/* 斑驳污渍：通过径向渐变模拟旧书污点 */
.markdown-body pre details {
  background-image: 
    radial-gradient(circle at 15% 35%, rgba(86, 54, 20, 0.15) 0%, transparent 32%),
    radial-gradient(circle at 85% 60%, rgba(72, 42, 15, 0.12) 0%, transparent 28%),
    radial-gradient(circle at 40% 80%, rgba(60, 38, 12, 0.1) 0%, transparent 35%),
    repeating-linear-gradient(
      transparent,
      transparent 24px,
      rgba(139, 109, 66, 0.06) 24px,
      rgba(139, 109, 66, 0.06) 25px
    ) !important;
  background-blend-mode: multiply;
}

/* ── 档案夹内的表格（星记忆回廊的表格） ── */
.markdown-body pre table {
  border-collapse: collapse !important;
  width: 100% !important;
  background: transparent !important;
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

.markdown-body pre th,
.markdown-body pre td {
  border: none !important;
  border-bottom: 1px dotted #b08d64 !important;
  padding: 4px 8px !important;
  text-align: left !important;
  color: #4a3822 !important;
  background: transparent !important;
}

.markdown-body pre th {
  background: #e3d3b2 !important;
  font-weight: bold;
  border-bottom: 1.5px solid #9c7e56 !important;
}

/* 表格每行：有档案夹打孔感 */
.markdown-body pre tr {
  position: relative;
}

/* 打孔装饰（圆孔） */
.markdown-body pre th::before,
.markdown-body pre td::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #b08d64;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: baseline;
  opacity: 0.5;
}

/* ── 荧光笔高亮：专门用于沈落薇的关键数值 ──
   原理：使用代码块中 <span> 或特定行内容进行高亮
   由于CSS无法按内容动态选取，我们通过与标签组合实现。
   在您的回复中，可以将这些关键数字用 <marks> 包裹，或者利用
   现有格式（比如"字数：12"）通过相邻选择器？但CSS无法直接选文本节点
   因此这里提供两种方案：
   ① 若您愿意小改聊天格式，可给数字外包裹<mark>标签，然后使用mark样式
   ② 若必须纯CSS，则可使用 :contains()（不广泛支持），故推荐做法是：
   在正文排版时，将关键数值用代码块中单独一行显示（例如"| 字数：5 |"），
   然后我们用 attribute 选择器？这不可行。
   
   实际上最优雅的方式是：配合我们在 Markdown 中写内容时，
   将高亮数字放在 <font class="highlight"> 中，然后定义：
   但考虑到这是AI生成内容，我们可以通过正则替换，或约定：
   当写"字数"时，后面跟的数字使用 <span style="background:yellow"> 手动标记。
   
   为了提供纯CSS方案，我们为每个可能出现的数值所在行提供背景高亮，
   但会误伤其他内容，所以不推荐。
   
   因此，此处我们提供一个CSS类，您可以在生成内容时对关键数字加<span class="fl-ink">。
   但若不想改结构，就放弃吧。
   我们退而求其次，让【说了几个字】这种明显文字所在行整体有荧光痕迹。
   我们可以通过代码块内 <code> 标签内容中包含 "说了几个字" 来匹配？
   
   可惜CSS没有文本选择器。故我们只能：
   1. 提供预制好的高亮span样式，供您在回复时使用（推荐）。
   2. 或利用行内代码 <code> 被解析成 span 的特性？
   
   为了本次需求，我假设您在生成内容时会用 <span class="hl">数字</span> 包裹关键数字。
   我给出这个样式：
*/
.markdown-body pre span.hl {
  background: linear-gradient(180deg, transparent 40%, #ffeb73 40%, #ffeb73 90%, transparent 90%);
  padding: 0 2px;
  border-radius: 2px;
  color: #4a3822 !important;
  font-weight: bold;
}

/* 单独为“说了几个字”这类整行做一个荧光标注效果可以使用 :has 吗？
   :has 可匹配父元素，无法匹配文本。所以只能由您手动标记了。 */

/* 替代方案：我们直接设置所有数字的样式，比如让它带下划线荧光色？不自然。
   所以最终方案如下：
   ★ 在聊天中，我们将“说了几个字”后的数字用 <span class="hl">5</span>，
   将信任/安全感数值也这样高亮。您只需在输出内容时稍作调整。 */

/* ── 档案夹中的段落装饰（非表格部分） ── */
.markdown-body pre p {
  margin: 4px 0;
  color: #4a3822;
}

/* ── 其他辅助效果：滚动条调成档案盒风格 ── */
@supports selector(::-webkit-scrollbar) {
  .markdown-body pre > div > div:last-child::-webkit-scrollbar-thumb {
    background: #9c7e56 !important;
    border-radius: 8px;
    border: 1px solid #7c6342;
  }
}

/* 减少多余间距，让一切更紧凑 */
.markdown-body pre summary + * {
  padding: 8px !important;
}

/* 去除原有代码块边框，让档案夹更纯粹 */
.markdown-body pre {
  background: #f5ecd7 !important;
  border: none !important;
  box-shadow: none !important;
}