/* =========================================================
   【时光手账】现代女性真实人生 — AI输出美化样式
   燕麦米白 · 鼠尾草绿 · 雾霾蓝 · 干枯玫瑰粉 · 牛皮纸金
   与 开始游戏_现代女性向真实人生.html 视觉完全对齐
   结构对齐参考：圣萝丝女子贵族学院/ai输出样式.css
   ========================================================= */

/* =========================================================
   0. 根容器 <ai> · 手账本页面（纸质纹理 + 装订孔 + 顶部胶带）
   ========================================================= */
ai {
  /* —— 时光手账配色变量（与HTML :root 1:1 对齐）—— */
  --oat: #F7F3EC;              /* 主背景·燕麦纸 */
  --oat-2: #F0EADD;            /* 卡片底·浅一格 */
  --line: #E2D9C8;             /* 细线·牛皮纸边 */
  --line-2: #D8CBB3;           /* 深一点的线 */
  --sage: #93A593;             /* 鼠尾草绿·主tag/左条 */
  --sage-deep: #758675;        /* 鼠尾草深·标题/文字 */
  --sage-soft: #D8E2D3;        /* 软绿·tag底 */
  --mist: #8BA4B9;             /* 雾霾蓝·强调/手机/世界动态 */
  --mist-deep: #6E879C;        /* 雾霾深蓝·课表表头 */
  --mist-soft: #D8E2EB;        /* 软蓝·便签 */
  --rose: #C58A8A;             /* 干枯玫瑰粉·H私密/衣柜/在场 */
  --rose-deep: #A86C6C;
  --rose-soft: #F1DCDB;        /* 粉底·私密卡 */
  --gold: #C9A96E;             /* 牛皮纸金·记忆/名册/高亮 */
  --gold-soft: #F0E2C1;
  --ink: #3A3229;              /* 正文墨·深棕黑 */
  --ink-2: #6B6155;            /* 次要文字 */
  --ink-3: #9A8F81;            /* 占位/提示 */

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --paper-shadow: 0 2px 10px rgba(90, 75, 50, .07),
                   0 8px 24px rgba(90, 75, 50, .05);

  --f-sans:  'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', system-ui, sans-serif;
  --f-serif: 'Noto Serif SC', 'Songti SC', 'STSong', Georgia, serif;
  --f-hand:  'Ma Shan Zheng', 'Kaiti', 'STKaiti', cursive;

  /* —— 页面本体 —— */
  display: block;
  position: relative;
  margin: 12px auto;
  padding: 30px 26px 24px;
  max-width: 100%;
  background-color: var(--oat);
  background-image:
    /* 点状纸质颗粒（和HTML body::before一致） */
    radial-gradient(rgba(120, 100, 70, .045) 1px, transparent 1px),
    /* 左上暖光 + 右上冷光 */
    radial-gradient(600px 300px at 0% -10%, #FBF1DD 0%, transparent 60%),
    radial-gradient(500px 260px at 110% 10%, #E8EFE4 0%, transparent 55%);
  background-size: 18px 18px, auto, auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--paper-shadow);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.75;
  overflow: hidden;
}

/* 顶部胶带装饰（和HTML .paper::before 1:1） */
ai::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: 140px;
  height: 24px;
  background: linear-gradient(180deg,
    rgba(230, 210, 160, .6),
    rgba(230, 210, 160, .25));
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
  pointer-events: none;
  z-index: 3;
}

/* 左侧装订孔（3个圆孔·手账本装订感） */
ai::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 170px;
  background:
    radial-gradient(circle at 50% 24px,  #fff 5px, transparent 6px),
    radial-gradient(circle at 50% 85px,  #fff 5px, transparent 6px),
    radial-gradient(circle at 50% 146px, #fff 5px, transparent 6px);
  filter: drop-shadow(0 1px 1px rgba(90,75,50,.22));
  pointer-events: none;
  z-index: 2;
}

/* =========================================================
   1. <hd> · 抬头章（日期 · 地点 · 星期）· 手账日期戳
   ========================================================= */
hd {
  display: block;
  text-align: center;
  font-family: var(--f-serif);
  font-size: 15px;
  letter-spacing: 2.5px;
  color: var(--sage-deep);
  padding: 4px 0 14px;
  position: relative;
  margin-bottom: 6px;
}
hd::before {
  content: "❋";
  font-size: 12px;
  color: var(--sage);
  margin-right: 10px;
  opacity: .85;
}
hd::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--sage) 30%, var(--gold) 70%, transparent);
  border-radius: 2px;
  opacity: .75;
}

/* =========================================================
   2. <q> · 阶段标签 · 手账贴纸风（手写体+圆药丸）
   ========================================================= */
q {
  display: inline-block;
  padding: 4px 16px;
  margin: 4px 0 12px;
  font-family: var(--f-hand);
  font-size: 13px;
  letter-spacing: 2px;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage-deep);
  border: 1px solid rgba(147, 165, 147, .35);
  position: relative;
}
q::before {
  content: "✦ ";
  font-size: 10px;
  color: var(--sage);
}
/* 不同阶段不同颜色（系统提示词stage值：intro/campus/H-scene/work/ending）*/
q[stage="intro"],
q[stage="ending"]  { background: var(--gold-soft); color: #8E6F36;
                      border-color: rgba(201,169,110,.45); }
q[stage="campus"]  { background: var(--sage-soft); color: var(--sage-deep); }
q[stage="H-scene"] { background: var(--rose-soft); color: var(--rose-deep);
                      border-color: rgba(197,138,138,.4); }
q[stage="work"]    { background: var(--mist-soft); color: var(--mist-deep);
                      border-color: rgba(139,164,185,.4); }

/* =========================================================
   3. <p> · 正文叙事 · 手账横线纸（8mm行距·便签页）
   ========================================================= */
p {
  display: block;
  position: relative;
  margin: 12px 2px;
  padding: 10px 18px;
  border-radius: var(--radius-m);
  background-color: #FFFCF5;
  background-image:
    repeating-linear-gradient(
      transparent 0,
      transparent 31px,
      rgba(200, 185, 155, .28) 31px,
      rgba(200, 185, 155, .28) 32px
    );
  background-size: 100% 32px;
  line-height: 32px !important;
  text-indent: 2em;
  font-size: 14.5px;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 #fff;
}
/* 对白行（span[style]里的「」）· 手写体放大 */
p span[style*="color"],
p span[style] {
  font-family: var(--f-hand) !important;
  font-size: 16.5px !important;
  letter-spacing: .5px;
  font-weight: 500;
}

/* =========================================================
   4. <details>/<summary> · 折叠面板（9块：思维链/主角/名册
      /衣柜/记忆回廊/课表/手机/世界动态…）
   ========================================================= */
details {
  display: block;
  position: relative;
  margin: 14px 0;
  border-radius: var(--radius-m);
  background: #FFFCF5;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--paper-shadow);
  transition: border-color .2s;
}
details[open] { border-color: var(--sage); }

summary {
  display: block;
  padding: 11px 18px;
  font-family: var(--f-serif);
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--sage-deep);
  background: linear-gradient(180deg, #F7F3EC 0%, #FFFCF5 100%);
  cursor: pointer;
  user-select: none;
  position: relative;
  border-bottom: 1px dashed transparent;
  transition: all .2s;
  list-style: none !important;           /* Firefox 默认三角 */
}
summary::-webkit-details-marker { display: none !important; } /* Safari/Chrome */
summary::marker { content: "" !important; }                    /* 新规范 */

details[open] > summary {
  border-bottom: 1px dashed var(--line-2);
  background: linear-gradient(180deg, #EEF4EA 0%, #FFFCF5 100%);
}

/* 折叠三角（左·统一鼠尾草绿） */
summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 10px;
  font-size: 10px;
  color: var(--sage);
  transition: transform .3s, color .2s;
  vertical-align: 1px;
}
details[open] > summary::before {
  transform: rotate(90deg);
  color: var(--sage-deep);
}

/* —— 8大面板 按summary首emoji分色（用[open]外的关键词兜底，
      :has是CSS4选择器，Chrome/Safari/Edge现代版都支持；
      不支持时回落为统一鼠尾草绿也不破坏美观）—— */
/* 👤 主角状态 · 鼠尾草绿 */
details:has(summary:nth-child(1):-webkit-any(:-webkit-full-page-media)) { /* noop */ }
summary { letter-spacing: 1.2px; }

/* 用summary文字里的emoji/关键词分系（CSS4 :has + 文本片段不可直接选，
   这里采用更稳的：各details按打开summary后，首字符emoji所在位置用相邻兄弟+
   通用属性名+外层容器细节染色。主流平台若支持:has则生效，不支持则统一色也OK。*/
details:has(summary > *:first-child) { /* reserved */ }

/* 🌐 世界动态 / 📱 手机 · 雾霾蓝左条点缀 + 打开时summary */
details:has(summary:is([data-panel="phone"], [data-panel="world"])) > summary {
  color: var(--mist-deep);
}
details:has(summary:is([data-panel="phone"], [data-panel="world"]))[open] > summary {
  background: linear-gradient(180deg, #EEF4F9 0%, #FFFCF5 100%);
  border-bottom-color: rgba(139,164,185,.35);
}

/* 🌟 记忆回廊 + 角色名册 · 牛皮纸金summary */
details:has(summary[data-panel="memory"]) > summary,
details:has(summary[data-panel="roster"]) > summary {
  color: #8E6F36;
}
details:has(summary[data-panel="memory"])[open] > summary,
details:has(summary[data-panel="roster"])[open] > summary {
  background: linear-gradient(180deg, #FBF5E3 0%, #FFFCF5 100%);
  border-bottom-color: rgba(201,169,110,.4);
}

/* 👗 衣柜 · 干枯玫瑰粉summary */
details:has(summary[data-panel="wardrobe"]) > summary {
  color: var(--rose-deep);
}
details:has(summary[data-panel="wardrobe"])[open] > summary {
  background: linear-gradient(180deg, #FBF0EF 0%, #FFFCF5 100%);
  border-bottom-color: rgba(197,138,138,.4);
}

/* details打开后底部「鼠尾草绿条纹收尾」 */
details[open]::after {
  content: "";
  display: block;
  height: 8px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0, transparent 10px,
      var(--sage-soft) 10px, var(--sage-soft) 20px);
  opacity: .55;
  pointer-events: none;
}

/* =========================================================
   5. <t> · 通用状态块（纸质渐变+左侧色条）
      n=thought / 主角 / 在场·XX / 核心·XX / 三区·过渡路人
        / wardrobe / schedule
   ========================================================= */
t {
  display: block;
  padding: 8px 12px 10px;
  margin: 6px 10px;
  border-radius: var(--radius-s);
  border-left: 3px solid var(--sage);
  background: linear-gradient(135deg, #F7FAF4 0%, #FFFCF5 100%);
  position: relative;
}

/* 5.1 思维链总块 t[n="thought"] · 雾霾蓝左条 · 内容紧凑 */
t[n="thought"] {
  border-left-color: var(--mist);
  background: linear-gradient(135deg, #EEF4F9 0%, #FFFCF5 100%);
  font-size: 13px;
  padding: 10px 12px 8px;
}
/* 思维链9条：每条 <f> + 1~N个 <d> 构成一组，组之间加小间距 */
t[n="thought"] > f + d { margin-top: 1px; }
t[n="thought"] > f + d + f,
t[n="thought"] > f + d + d + f { margin-top: 8px; }

/* 5.2 主角状态 t[n="主角"] · 鼠尾草绿左条 */
t[n="主角"] {
  border-left-color: var(--sage);
  background: linear-gradient(135deg, #F3F8F0 0%, #FFFCF5 100%);
}

/* 5.3 角色名册一区·在场 t[n="在场·…"] · 干枯玫瑰左条 */
t[n^="在场"] {
  border-left-color: var(--rose);
  background: linear-gradient(135deg, #FBF0EF 0%, #FFFCF5 100%);
}

/* 5.4 角色名册二区·核心精简 t[n="核心·…"] · 鼠尾草绿·更窄 */
t[n^="核心"] {
  border-left-color: var(--sage);
  background: linear-gradient(135deg, #F5F9F2 0%, #FFFCF5 100%);
  padding: 6px 12px 8px;
  margin: 4px 10px;
}

/* 5.5 角色名册三区·过渡路人 · 雾霾蓝 */
t[n="三区·过渡路人"] {
  border-left-color: var(--mist);
  background: linear-gradient(135deg, #EEF4F9 0%, #FFFCF5 100%);
}

/* 5.6 衣柜 t[n="wardrobe"] · 干枯玫瑰粉 + 虚线边（和HTML private-card一致）*/
t[n="wardrobe"] {
  border-left-color: var(--rose);
  background: linear-gradient(135deg, #FBF0EF 0%, #FFFCF5 100%);
  border: 1px dashed rgba(197, 138, 138, .3);
  border-left-width: 3px;
}

/* 5.7 课程表/排班表 t[n="schedule"] · 鼠尾草绿·表格padding稍大 */
t[n="schedule"] {
  border-left-color: var(--sage);
  background: linear-gradient(135deg, #F3F8F0 0%, #FFFCF5 100%);
  padding: 10px 12px;
}

/* =========================================================
   6. <f> · 字段名标签 · 便签小贴（pill·衬线体·5色系）
   ========================================================= */
f {
  display: inline-block;
  font-family: var(--f-serif);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage-deep);
  margin-right: 6px;
  margin-bottom: 3px;
  white-space: nowrap;
  letter-spacing: .6px;
}

/* 思维链的f · 雾霾蓝 + 编号前导符已在正文里·背景浅一格 */
t[n="thought"]    f { color: var(--mist-deep); background: var(--mist-soft);
                       font-size: 12.5px; letter-spacing: 0; }

/* 主角·f · 鼠尾草绿 */
t[n="主角"]       f { color: var(--sage-deep); background: var(--sage-soft); }

/* 在场1-2人·f · 干枯玫瑰粉 */
t[n^="在场"]      f { color: var(--rose-deep); background: var(--rose-soft); }

/* 核心区精简行·f · 鼠尾草绿·字更小 */
t[n^="核心"]      f { color: var(--sage-deep); background: var(--sage-soft);
                       font-size: 11px; }

/* 三区路人·f · 雾霾蓝·字更小 */
t[n="三区·过渡路人"] f { color: var(--mist-deep); background: var(--mist-soft);
                           font-size: 11px; }

/* 衣柜·f · 干枯玫瑰粉 */
t[n="wardrobe"]   f { color: var(--rose-deep); background: var(--rose-soft); }

/* 排班表·f · 鼠尾草绿 */
t[n="schedule"]   f { color: var(--sage-deep); background: var(--sage-soft); }

/* =========================================================
   7. <d> · 字段值内容行 · 小点前缀 + 各t系配色
   ========================================================= */
d {
  display: block;
  padding: 2px 0 2px 20px;
  font-size: 13.5px;
  color: var(--ink-2);
  position: relative;
  line-height: 1.8;
}
d::before {
  content: "·";
  position: absolute;
  left: 6px;
  top: -1px;
  color: var(--sage);
  font-weight: 700;
  font-size: 15px;
}

t[n="thought"]    d::before { color: var(--mist); }
t[n^="在场"]      d::before { color: var(--rose); }
t[n^="核心"]      d::before { color: var(--sage); }
t[n="三区·过渡路人"] d::before { color: var(--mist); }
t[n="wardrobe"]   d::before { color: var(--rose); }
t[n="schedule"]   d::before { color: var(--sage); }

/* d行里若出现Markdown表格、「列表-符」等：宽度100%不溢出 */
d > table, d table { width: 100%; display: table; margin: 4px 0; }

/* =========================================================
   8. details 内 Markdown 表格（记忆回廊 / 课表 / 排班表 /
      世界动态表白墙表）· 手账表格风
   ========================================================= */
details table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 6px 0 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  font-family: var(--f-sans);
  border-radius: var(--radius-s);
  overflow: hidden;
  border: 1px solid var(--line);
  table-layout: fixed;    /* 防止长列把表格撑爆横向溢出 */
}
details thead {
  background: linear-gradient(180deg, #EEF4EA, #F7FAF4);
}
details th {
  padding: 7px 8px;
  text-align: left;
  font-family: var(--f-serif);
  color: var(--sage-deep);
  font-weight: 500;
  letter-spacing: 1px;
  border-bottom: 1px dashed var(--line-2);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
details td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  background: #FFFCF5;
  word-break: break-word;
}
details tr:last-child td { border-bottom: none; }
details tr:nth-child(even) td { background: #FCF8EF; }

/* 8.1 课程表/排班表：表头雾霾蓝（和HTML场景卡enter同系） */
t[n="schedule"] table thead,
t[n="schedule"] table th {
  background: linear-gradient(180deg, #EEF4F9, #F4F8FC);
  color: var(--mist-deep);
}
t[n="schedule"] table td {
  font-size: 12px;
  line-height: 1.6;
}

/* 8.2 记忆回廊表格：表头牛皮纸金（PIN钉选/LTM/STM三色表头）
   记忆回廊是直接写在details里的Markdown，没有t包裹 →
   用details summary + 首行th文本关键词选 */
details:has(summary + * table th:empty) { /* reserved */ }
/* 兜底：星记忆回廊里的表统一给金色表头（靠details>table:first-of-type + summary含🌟不
   好选，这里靠"记忆"summary后的table上class思路+更通用的th识别）*/
table th {
  word-break: keep-all;
}

/* 记忆回廊："钉选记忆"表头行 → 干枯玫瑰粉 */
table:has(th:is(:-webkit-any(*))) thead th,
table th { /* 下面再按类分色 */ }

/* 靠tr:first-child th的文本里带"钉选/LTM/STM"，现代浏览器支持
   :has()，用这个精准加分色 */
details table:has(th:contains("钉选")) thead th,
details table:has(th:contains("PIN"))  thead th {
  color: var(--rose-deep);
  background: linear-gradient(180deg, #FBF0EF, #FFF7F6);
}
details table:has(th:contains("LTM")) thead th {
  color: #8E6F36;
  background: linear-gradient(180deg, #FBF1D9, #FFF8E7);
}
details table:has(th:contains("STM")) thead th {
  color: var(--mist-deep);
  background: linear-gradient(180deg, #EEF4F9, #F4F8FC);
}
/* :contains() 非标准，给纯属性/结构兜底：纯th颜色回落统一鼠尾草绿即可。
   另外记忆回廊用details直接包裹**+表格，不在t里。下面直接给details内粗体一行加手写章。*/

/* 记忆回廊内 `**STM [0/6]｜LTM 0条｜PIN 0条**` 等行 → 手写字样徽章 */
details > p,
details > strong,
details > *:not(t):not(summary):not(pre):not(table) {
  padding: 0 16px;
}
details b, details strong {
  font-family: var(--f-serif);
  letter-spacing: 1px;
  color: var(--sage-deep);
}

/* =========================================================
   9. ```Status``` / ```1``` ```2``` ```3``` ```4``` 代码块
      · 手机 / 世界动态 / 行动菜单 · 纸质便签纸
   对齐圣萝丝CSS的 .markdown-body pre / pre > div 层级覆盖，
   防止AI对话平台默认暗色主题把便签纸覆盖。
   ========================================================= */

/* 9.1 平台通用pre（不管上层有没有.markdown-body包裹器都生效）*/
.markdown-body pre,
pre {
  margin: 10px 2px !important;
  padding: 14px 16px !important;
  border-radius: var(--radius-m) !important;
  background-color: #FFFCF5 !important;
  background-image:
    repeating-linear-gradient(
      transparent 0,
      transparent 27px,
      rgba(200, 185, 155, .22) 27px,
      rgba(200, 185, 155, .22) 28px
    ) !important;
  background-size: 100% 28px, auto !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--paper-shadow) !important;
  color: var(--ink) !important;
  line-height: 28px !important;
  font-family: var(--f-sans) !important;
  font-size: 13.5px !important;
  overflow-x: auto;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}
.markdown-body pre code,
.markdown-body pre > code,
pre code,
pre > code {
  background: transparent !important;
  padding: 0 !important;
  color: var(--ink) !important;
  font-family: var(--f-sans) !important;
  font-size: 13.5px !important;
  line-height: 28px !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

/* 9.2 相邻代码块紧贴 + 中间分隔虚线（1/2/3/4 行动菜单专用）*/
.markdown-body pre + pre,
pre + pre {
  margin-top: -10px !important;
  border-top: 1px dashed var(--line-2) !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* 9.3 手机 ```Status``` · 雾霾蓝左条 + 横线偏蓝 */
summary + pre:has(code:contains("通知中心")),
summary + pre:has(code:contains("【手机】")),
/* 兼容无:has支持的浏览器：直接给📱 summary下第一个pre染蓝 */
details pre:first-of-type {
  /* 稍后用更具体的nth覆盖回其他色 */
}
/* 用summary首emoji/关键词+紧邻pre匹配（手机在summary后面第一块pre）*/
summary + pre,
details[data-panel="phone"] pre:first-of-type,
details[data-panel="world"] pre:first-of-type {
  border-left: 3px solid var(--mist) !important;
}
/* 手机：横线换成雾霾蓝淡条纹 */
summary + pre:has(code:contains("【手机】")),
details[data-panel="phone"] pre {
  background-image:
    repeating-linear-gradient(
      transparent 0,
      transparent 27px,
      rgba(180, 200, 220, .18) 27px,
      rgba(180, 200, 220, .18) 28px
    ),
    linear-gradient(135deg, #F3F7FB 0%, #FFFCF5 100%) !important;
}

/* 9.4 世界动态 ```Status``` · 雾霾蓝左条 + 虚线外框 */
summary + pre:has(code:contains("【世界动态】")),
summary + pre:has(code:contains("表白墙")),
details[data-panel="world"] pre {
  border-left: 3px solid var(--mist) !important;
  border: 1px dashed rgba(139, 164, 185, .4) !important;
  border-left-width: 3px !important;
}

/* 9.5 行动菜单 4 块 ```1``` ```2``` ```3``` ```4```
   · 靠"紧邻+含【选项X】"模式匹配，不支持:has回落为统一便签色 */
/* 每一块左侧色条：1鼠尾草·2干枯玫瑰·3雾霾蓝·4牛皮纸金·形成四色手账索引贴 */
pre:has(code:matches-regex("^1\s*\n\s*【选项1】")),
pre:has(> code:first-child:contains("【选项1】")) {
  border-left: 4px solid var(--sage) !important;
  background:
    linear-gradient(90deg, rgba(216, 226, 211, .28) 0%, transparent 26%),
    #FFFCF5 !important;
}
pre:has(code:matches-regex("^2\s*\n\s*【选项2】")),
pre:has(> code:first-child:contains("【选项2】")) {
  border-left: 4px solid var(--rose) !important;
  background:
    linear-gradient(90deg, rgba(241, 220, 219, .25) 0%, transparent 26%),
    #FFFCF5 !important;
}
pre:has(code:matches-regex("^3\s*\n\s*【选项3】")),
pre:has(> code:first-child:contains("【选项3】")) {
  border-left: 4px solid var(--mist) !important;
  background:
    linear-gradient(90deg, rgba(216, 226, 235, .25) 0%, transparent 26%),
    #FFFCF5 !important;
}
pre:has(code:matches-regex("^4\s*\n\s*【选项4】")),
pre:has(> code:first-child:contains("【选项4】")) {
  border-left: 4px solid var(--gold) !important;
  background:
    linear-gradient(90deg, rgba(240, 226, 193, .3) 0%, transparent 28%),
    #FFFCF5 !important;
}

/* 9.6 【选项N】加粗衬线章：把"【选项X】："一段做成标题感 */
pre code:contains("【选项1】")::before,
pre code:contains("【选项2】")::before,
pre code:contains("【选项3】")::before,
pre code:contains("【选项4】")::before { /* noop·结构用 */ }
/* 【手机】/【世界动态】块内的 "━━━ xxx ━━━" 分隔行 → 鼠尾草绿+衬线 */
pre code:contains("━━━"),
pre:has(code:contains("━━━")) code {
  /* 这里只能选到整个code块·不能精确到某一行，故加颜色基调 */
  color: var(--sage-deep);
  font-family: var(--f-serif);
  letter-spacing: 1px;
}

/* =========================================================
   10. 圣萝丝层级对齐：.markdown-body pre 平台包裹器强制覆盖
       （ChatBox/SillyTavern/各种前端常自带.markdown-body层）
   ========================================================= */
.markdown-body pre > div {
  border-radius: 0 !important;
  background: transparent !important;
}
.markdown-body pre > div > div.flex.justify-between.h-8,
.markdown-body pre > div > div.border-b {
  background: linear-gradient(135deg, #F7F3EC 0%, #FBF7EB 100%) !important;
  border-bottom: 1px solid rgba(147,165,147,.18) !important;
  border-color: rgba(147,165,147,.18) !important;
}
.markdown-body pre > div > div.flex.justify-between > div.text-\[13px\],
.markdown-body pre > div > div.flex.justify-between > div:first-child {
  color: var(--sage-deep) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  background: transparent !important;
  font-family: var(--f-serif) !important;
}
.markdown-body pre > div > div[node],
.markdown-body pre > div > div:last-child {
  background: transparent !important;
  padding: 0 !important;
}
.markdown-body pre code[class^="language-"],
.markdown-body pre > div > div[node] > code {
  background: transparent !important;
  font-family: var(--f-sans) !important;
  font-size: 13.5px !important;
  color: var(--ink) !important;
  line-height: 28px !important;
}
.markdown-body pre code[class^="language-"] > span,
.markdown-body pre code span {
  font-family: var(--f-sans) !important;
}
.markdown-body pre > code[node] {
  background: transparent !important;
  color: var(--ink) !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  line-height: 28px !important;
}

/* =========================================================
   11. 响应式 · 手机端：装订孔隐藏 + 边距/字号收窄 + 表格小字号
   ========================================================= */
@media (max-width: 640px) {
  ai {
    padding: 22px 14px 18px;
    border-radius: 14px;
  }
  ai::after { display: none; }          /* 装订孔在窄屏没位置 */
  ai::before { width: 110px; height: 20px; }

  t  { margin: 5px 4px; padding: 7px 10px; }
  t[n^="核心"] { padding: 5px 10px 7px; margin: 3px 4px; }

  p  { font-size: 14px; padding: 10px 12px; line-height: 30px !important;
       background-size: 100% 30px !important; }
  hd { font-size: 14px; letter-spacing: 1.5px; }
  q  { font-size: 12px; padding: 3px 12px; }
  f  { font-size: 11px; padding: 2px 9px; }
  d  { font-size: 13px; padding-left: 18px; line-height: 1.75; }

  summary { padding: 10px 14px; font-size: 13px; letter-spacing: 1px; }

  details th, details td { padding: 5px 6px; font-size: 11.5px; }
  details table { table-layout: auto;  /* 窄屏允许横向滚动 */
                  display: block; overflow-x: auto; white-space: nowrap; }
  details table thead th { white-space: nowrap; }

  .markdown-body pre, pre {
    padding: 12px !important;
    font-size: 13px !important;
    line-height: 26px !important;
  }
  .markdown-body pre code, pre code {
    font-size: 13px !important;
    line-height: 26px !important;
  }
}

/* 超小屏（iPhone SE等）：装订胶带也缩小 */
@media (max-width: 380px) {
  ai::before { width: 92px; height: 18px; top: -8px; }
}