/* ====修仙风格对话卡片样式（无边框）==== */
/* 1. 浅色模式下的样式（默认） */
  .is-assistant .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
    background: rgba(250, 240, 230, 0.96);  /* 暖玉杏色，温润如古灵玉 */
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* 2. 偶数项使用不同的背景色 */
  .is-user .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
    background: rgba(230, 245, 235, 0.96);  /* 灵竹淡青，通透如晨露 */
    border: none;
    border-radius: 8px;
}
/* 3. 深色模式下的样式覆盖 */
@media (prefers-color-scheme: dark) {
    .dark .is-user .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
        background: rgba(38, 32, 28, 0.96);  /* 檀木深褐，沉静如古卷 */
        border: none;
        border-radius: 8px;
    }
    .dark .is-assistant .flex.w-fit.max-w-full.min-w-0.flex-col.gap-2.text-sm.border.border-muted {
        background: rgba(28, 35, 30, 0.96);  /* 墨竹深青，幽然如夜林 */
        border: none;
        border-radius: 8px;
    }
}

/* "mod、流式、评论、回到底部" 等按钮 - 玄幻修仙风格 */
#prompt-input button:not([type="submit"]) {
  background: linear-gradient(135deg, #0f2027 0%, #1a3a4a 50%, #0f2027 100%) !important; /* 天青渐变背景，如灵玉 */
  color: #d4a843 !important; /* 暗金文字，如古神金文 */
  border: 2px solid #b8860b !important; /* 暗金边框，如金缕禁制 */
  border-radius: 12px !important;
  box-shadow: 
    0 4px 0px #6b4e16,      /* 正下方暗金实体阴影 */
    0 0 8px rgba(184, 134, 11, 0.5),  /* 暗金灵光 */
    0 0 12px rgba(184, 134, 11, 0.2) !important; /* 外层灵晕 */
  font-weight: bold !important;
  text-transform: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
  text-shadow: 0 0 8px rgba(212, 168, 67, 0.5) !important; /* 文字暗金灵光 */
}

/* 修仙灵气流动伪元素 */
#prompt-input button:not([type="submit"])::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 168, 67, 0.08) 30%,  /* 金灵气微粒 */
    rgba(184, 134, 11, 0.15) 50%,    /* 灵力核心 */
    rgba(212, 168, 67, 0.08) 70%,
    transparent 100%
  );
  transition: left 0.6s ease;
  z-index: 1;
  pointer-events: none;
}

/* 灵力汇聚点 */
#prompt-input button:not([type="submit"])::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 4px;
  height: 4px;
  background: #ffd700;
  border-radius: 50%;
  box-shadow: 0 0 8px #d4a843, 0 0 16px #b8860b;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 2;
}

/* 悬停效果 - 灵力激发 */
#prompt-input button:not([type="submit"]):hover {
  background: linear-gradient(135deg, #1a3a4a 0%, #2a5f6e 50%, #1a3a4a 100%) !important; /* 天青底色增亮，如灵湖映日 */
  color: #ffd700 !important; /* 文字化为纯金之色 */
  border-color: #daa520 !important; /* 亮金禁制显现 */
  transform: translateY(-2px) !important; /* 向上浮起，如御剑临空 */
  box-shadow: 
    0 6px 0px #8b6914,      /* 浮起后阴影加深 */
    0 0 12px rgba(218, 165, 32, 0.7),
    0 0 18px rgba(218, 165, 32, 0.3) !important;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.8) !important; /* 文字金光大放 */
}

#prompt-input button:not([type="submit"]):hover::before {
  left: 100%; /* 金光从左至右冲刷 */
}

#prompt-input button:not([type="submit"]):hover::after {
  opacity: 1;
  animation: goldenSpiritPulse 1.5s ease-in-out infinite;
}

/* 点击效果 - 灵力爆发 */
#prompt-input button:not([type="submit"]):active {
  background: linear-gradient(135deg, #0a1a24 0%, #0f2027 50%, #0a1a24 100%) !important; /* 天青底色压暗，如深海灵压 */
  color: #ffd700 !important;
  border-color: #ffd700 !important;
  box-shadow: 
    0 2px 0px #6b4e16,      /* 按下时阴影收窄 */
    0 0 12px rgba(255, 215, 0, 0.8),
    inset 0 0 10px rgba(184, 134, 11, 0.3) !important; /* 内灵压 */
  transform: translateY(2px) !important; /* 按下回弹 */
  transition: all 0.1s ease !important;
}

/* 暗金灵珠脉冲动画 */
@keyframes goldenSpiritPulse {
  0%, 100% {
    box-shadow: 0 0 8px #d4a843, 0 0 16px #b8860b;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    box-shadow: 0 0 16px #ffd700, 0 0 32px #daa520, 0 0 48px #b8860b;
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 1;
  }
}

/* 可选：按钮聚焦状态 */
#prompt-input button:not([type="submit"]):focus-visible {
  outline: 2px solid #daa520;
  outline-offset: 2px;
  box-shadow: 
    0 4px 0px #6b4e16,
    0 0 20px rgba(218, 165, 32, 0.6) !important;
}

/* ===== 提交按钮 - 紫霄天雷 ===== */
#prompt-input [type="submit"] {
  background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 50%, #1a0a2e 100%) !important; /* 紫夜穹顶，如天劫云海 */
  color: #c9a0ff !important; /* 淡紫神光，如雷纹天书 */
  border: 2px solid #8b6fcf !important; /* 紫金雷纹，如九天禁制 */
  border-radius: 12px !important;
  box-shadow: 
    0 4px 0px #4f3a7a,      /* 紫雷实体阴影 */
    0 0 8px rgba(139, 111, 207, 0.5),  /* 紫电气韵 */
    0 0 12px rgba(139, 111, 207, 0.2) !important;
  font-weight: bold !important;
  text-transform: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
  text-shadow: 0 0 8px rgba(201, 160, 255, 0.5) !important;
}

/* 紫电灵气冲刷 */
#prompt-input [type="submit"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 160, 255, 0.08) 30%,
    rgba(139, 111, 207, 0.15) 50%,
    rgba(201, 160, 255, 0.08) 70%,
    transparent 100%
  );
  transition: left 0.6s ease;
  z-index: 1;
  pointer-events: none;
}

/* 紫雷灵珠 */
#prompt-input [type="submit"]::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 4px;
  height: 4px;
  background: #b794f4;
  border-radius: 50%;
  box-shadow: 0 0 8px #c9a0ff, 0 0 16px #8b6fcf;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 2;
}

/* 悬停 - 紫雷激发 */
#prompt-input [type="submit"]:hover {
  background: linear-gradient(135deg, #2d1b4e 0%, #4a2b7a 50%, #2d1b4e 100%) !important;
  color: #e6ccff !important; /* 纯紫华光 */
  border-color: #b794f4 !important;
  transform: translateY(-2px) !important;
  box-shadow: 
    0 6px 0px #6b4f9e,
    0 0 12px rgba(183, 148, 244, 0.7),
    0 0 18px rgba(183, 148, 244, 0.3) !important;
  text-shadow: 0 0 12px rgba(230, 204, 255, 0.8) !important;
}

#prompt-input [type="submit"]:hover::before {
  left: 100%;
}

#prompt-input [type="submit"]:hover::after {
  opacity: 1;
  animation: purpleSpiritPulse 1.5s ease-in-out infinite;
}

/* 点击 - 紫雷爆发 */
#prompt-input [type="submit"]:active {
  background: linear-gradient(135deg, #0f0720 0%, #1a0a2e 50%, #0f0720 100%) !important;
  color: #e6ccff !important;
  border-color: #e6ccff !important;
  box-shadow: 
    0 2px 0px #4f3a7a,
    0 0 12px rgba(230, 204, 255, 0.8),
    inset 0 0 10px rgba(139, 111, 207, 0.3) !important;
  transform: translateY(2px) !important;
  transition: all 0.1s ease !important;
}

/* ===== 停止按钮 - 玄冥冰焰 ===== */
#prompt-input button[aria-label="停止"] {
  background: linear-gradient(135deg, #0a1e2f 0%, #1a3a5c 50%, #0a1e2f 100%) !important; /* 寒渊冰魄，如深海玄冰 */
  color: #7fc9ff !important; /* 冰蓝神辉，如霜月之刃 */
  border: 2px solid #4a8fc7 !important; /* 冰晶禁制，似万里冰封 */
  border-radius: 12px !important;
  box-shadow: 
    0 4px 0px #2a5f7a,      /* 冰霜实体阴影 */
    0 0 8px rgba(74, 143, 199, 0.5),  /* 冰魄灵光 */
    0 0 12px rgba(74, 143, 199, 0.2) !important;
  font-weight: bold !important;
  text-transform: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
  text-shadow: 0 0 8px rgba(127, 201, 255, 0.5) !important;
}

/* 冰雾灵气冲刷 */
#prompt-input button[aria-label="停止"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(127, 201, 255, 0.08) 30%,
    rgba(74, 143, 199, 0.15) 50%,
    rgba(127, 201, 255, 0.08) 70%,
    transparent 100%
  );
  transition: left 0.6s ease;
  z-index: 1;
  pointer-events: none;
}

/* 冰晶灵珠（实为极寒光点） */
#prompt-input button[aria-label="停止"]::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 4px;
  height: 4px;
  background: #a3d8ff;
  border-radius: 50%;
  box-shadow: 0 0 8px #7fc9ff, 0 0 16px #4a8fc7;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 2;
}

/* 悬停 - 冰焰升腾（蓝中透赤，以示“停止”之决意） */
#prompt-input button[aria-label="停止"]:hover {
  background: linear-gradient(135deg, #1a3a5c 0%, #3a6f8f 50%, #1a3a5c 100%) !important;
  color: #b3dfff !important; /* 亮冰蓝，如极光 */
  border-color: #6bb5e6 !important;
  transform: translateY(-2px) !important;
  box-shadow: 
    0 6px 0px #3a6f8f,
    0 0 12px rgba(107, 181, 230, 0.7),
    0 0 18px rgba(107, 181, 230, 0.3) !important;
  text-shadow: 0 0 12px rgba(179, 223, 255, 0.8) !important;
}

#prompt-input button[aria-label="停止"]:hover::before {
  left: 100%;
}

#prompt-input button[aria-label="停止"]:hover::after {
  opacity: 1;
  animation: iceSpiritPulse 1.5s ease-in-out infinite;
}

/* 点击 - 冰封爆发（压暗，强化内敛寒气） */
#prompt-input button[aria-label="停止"]:active {
  background: linear-gradient(135deg, #06141f 0%, #0a1e2f 50%, #06141f 100%) !important;
  color: #b3dfff !important;
  border-color: #b3dfff !important;
  box-shadow: 
    0 2px 0px #2a5f7a,
    0 0 12px rgba(179, 223, 255, 0.8),
    inset 0 0 10px rgba(74, 143, 199, 0.3) !important;
  transform: translateY(2px) !important;
  transition: all 0.1s ease !important;
}

/* ===== 自定义脉冲动画 ===== */

/* 紫雷灵珠脉动 */
@keyframes purpleSpiritPulse {
  0%, 100% {
    box-shadow: 0 0 8px #c9a0ff, 0 0 16px #8b6fcf;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    box-shadow: 0 0 16px #e6ccff, 0 0 32px #b794f4, 0 0 48px #8b6fcf;
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 1;
  }
}

/* 冰晶灵珠脉动 */
@keyframes iceSpiritPulse {
  0%, 100% {
    box-shadow: 0 0 8px #7fc9ff, 0 0 16px #4a8fc7;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    box-shadow: 0 0 16px #b3dfff, 0 0 32px #6bb5e6, 0 0 48px #4a8fc7;
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 1;
  }
}

/* ===== 聚焦状态 ===== */
#prompt-input [type="submit"]:focus-visible {
  outline: 2px solid #b794f4;
  outline-offset: 2px;
  box-shadow: 0 4px 0px #4f3a7a, 0 0 20px rgba(183, 148, 244, 0.6) !important;
}

#prompt-input button[aria-label="停止"]:focus-visible {
  outline: 2px solid #6bb5e6;
  outline-offset: 2px;
  box-shadow: 0 4px 0px #2a5f7a, 0 0 20px rgba(107, 181, 230, 0.6) !important;
}

/* 1. 基础容器与内容区域样式 */
details {
  width: 100%;
  background: rgba(245, 240, 235, 0.5); /* 浅米色，50%透明，如古卷宣纸 */
  border: 2px solid rgba(139, 105, 20, 0.5); /* 深金痕边框，岁月沉淀之感 */
  border-radius: 8px; /* 微圆角，如古卷边缘 */
  margin-bottom: 8px;
  box-shadow: 0 0 20px rgba(139, 105, 20, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.1); /* 内外辉光，灵气波动 */
  backdrop-filter: blur(4px); /* 背景模糊，增加仙气缥缈感 */
  transition: all 0.3s ease;
  overflow-x: auto;
  overflow-y: visible;
}

/* 2. summary 标题栏基础样式 */
summary {
  list-style: none; /* 移除默认的展开/折叠小三角 */
  cursor: pointer;
  font-weight: bold;
  color: #5c3d1a; /* 深棕色，如符咒上的朱砂墨迹 */
  text-shadow: 0 0 6px rgba(139, 105, 20, 0.3), 0 0 12px rgba(100, 60, 20, 0.2); /* 文字辉光，道韵流转 */
  padding: 7px 10px;
  position: relative;
  user-select: none; /* 防止文本被选中 */
  letter-spacing: 2px; /* 字间距，如符箓上的云篆 */
  font-family: "Noto Serif SC", "楷体", "KaiTi", "SimSun", "宋体", serif; /* 古朴字体 */
  
  /* 核心需求：默认（未展开）状态下仅显示下边框 */
  border-bottom: 2px solid rgba(139, 105, 20, 0.5);
  background: linear-gradient(180deg, 
    rgba(255, 250, 240, 0.6) 0%, 
    rgba(240, 230, 210, 0.5) 100%); /* 纵向渐变，如灵气下沉 */
  transition: all 0.4s ease;
}

/* 兼容 WebKit 内核浏览器（如 Chrome/Safari），彻底隐藏原生箭头 */
summary::-webkit-details-marker {
  display: none;
}

/* 3. 自定义展开/收起图标 (使用伪元素绘制太极符) */
summary::before {
  content: '☯'; /* 太极符，替代寻常加减号 */
  margin-right: 6px;
  font-size: 1.4em;
  color: #8b6914; /* 深金纹色 */
  text-shadow: 0 0 8px rgba(139, 105, 20, 0.4);
  display: inline-block;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 灵动旋转，如法器开合 */
  transform: rotate(0deg);
  opacity: 0.9;
}

/* 标题栏悬停时的灵气激荡效果 */
summary:hover {
  color: #3d2010; /* 更深的棕色 */
  border-bottom-color: rgba(139, 105, 20, 0.8);
  text-shadow: 0 0 10px rgba(139, 105, 20, 0.5), 0 0 20px rgba(120, 70, 30, 0.3);
  background: linear-gradient(180deg, 
    rgba(255, 245, 230, 0.7) 0%, 
    rgba(245, 235, 215, 0.6) 100%);
}

/* 4. 展开状态下的样式覆盖 */
details[open] > summary {
  /* 展开时，将下边框改为上边框，或者保持下边框但改变颜色以作区分 */
  border-bottom: 2px solid rgba(139, 105, 20, 0.9);
  color: #3d2010;
  text-shadow: 0 0 12px rgba(139, 105, 20, 0.6), 0 0 24px rgba(120, 70, 30, 0.4);
  background: linear-gradient(180deg, 
    rgba(255, 248, 235, 0.7) 0%, 
    rgba(248, 238, 218, 0.5) 100%);
  box-shadow: inset 0 -4px 12px rgba(139, 105, 20, 0.2); /* 内部底部辉光，如灵力泄露 */
}

details[open] > summary::before {
  content: '☯'; /* 展开时太极符旋转，寓意阴阳轮转、玄机已现 */
  color: #6b4f12;
  text-shadow: 0 0 14px rgba(139, 105, 20, 0.6), 0 0 24px rgba(160, 100, 40, 0.4);
  transform: rotate(180deg); /* 太极旋转，道法自然 */
  opacity: 1;
}

/* 5. details 内部包裹内容的样式美化 */
details > div, 
details > p {
  padding: 9px 11px;
  margin-top: 0;
  line-height: 1.8;
  color: #3d2b15; /* 深棕色文字，如古卷墨迹 */
  font-family: "Noto Serif SC", "楷体", "KaiTi", "SimSun", "宋体", serif;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  
  /* 内容区底部也保留下边框，保持整体视觉一致 */
  border-bottom: 2px solid rgba(139, 105, 20, 0.4);
  
  /* 内部背景：半透明浅色，如灵墨渲染 */
  background: linear-gradient(180deg, 
    rgba(252, 248, 238, 0.6) 0%, 
    rgba(245, 238, 220, 0.5) 100%);
  
  /* 内部左侧装饰性边框，如卷轴边缘的云纹 */
  border-left: 1px solid rgba(139, 105, 20, 0.2);
  border-right: 1px solid rgba(139, 105, 20, 0.2);
  
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.1);
  
  /* 内容区底部微光，似灵气沉淀 */
  position: relative;
}

/* 内容区底部装饰：灵气汇聚之纹 */
details > div::after,
details > p::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(139, 105, 20, 0.5), 
    transparent);
  opacity: 0.7;
}

/* 展开动画过渡，使内容呈现如卷轴舒展 */
details[open] > div,
details[open] > p {
  animation: daoUnfurl 0.5s ease-out;
}

/* 道卷展开动画 */
@keyframes daoUnfurl {
  0% {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    max-height: 1000px; /* 足够大的值以适应内容 */
  }
}

/* 内容区内文本选中时，呈现灵光标记效果 */
details > div::selection,
details > p::selection {
  background: rgba(139, 105, 20, 0.3);
  color: #2d1808;
  text-shadow: 0 0 4px rgba(139, 105, 20, 0.5);
}

/* 若内容区内部有链接或重点文字，赋予丹红点缀 */
details > div a,
details > p a {
  color: #8b3a3a; /* 丹红色 */
  text-decoration: none;
  border-bottom: 1px dashed rgba(139, 58, 58, 0.5);
  transition: all 0.2s;
}
details > div a:hover,
details > p a:hover {
  color: #6b2020;
  border-bottom-color: #6b2020;
  text-shadow: 0 0 8px rgba(139, 58, 58, 0.4);
}

/* 6. 行内代码样式：如符咒中的秘文 */
code {
  font-family: "Courier New", "Noto Serif SC", "楷体", monospace;
  background: rgba(245, 238, 220, 0.5); /* 浅米色底色，半透明 */
  color: #5c3d1a; /* 深棕色文字 */
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid rgba(139, 105, 20, 0.4); /* 金痕边框 */
  text-shadow: 0 0 4px rgba(139, 105, 20, 0.2); /* 灵光笼罩 */
  font-size: 0.9em;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* 7. 代码块容器：如封印的古籍残卷 */
pre {
  /* 核心：半透明背景，保留所有边框 */
  background: rgba(250, 245, 235, 0.5); /* 浅米色，50%透明，如古卷宣纸 */
  border: 2px solid rgba(139, 105, 20, 0.4); /* 金纹封印边框 */
  
  /* 四边皆保留边框，左上右下稍异以显层次 */
  border-top: 2px solid rgba(139, 105, 20, 0.5); /* 上边框更亮，如天光洒落 */
  border-bottom: 2px solid rgba(120, 90, 20, 0.4); /* 下边框稍暗，如地脉深沉 */
  
  border-radius: 8px; /* 古卷微圆角 */
  padding: 10px 12px;
  margin: 8px 0;
  
  /* 内部阴影，营造卷轴凹陷感 */
  box-shadow: 
    inset 0 0 40px rgba(0, 0, 0, 0.06), /* 深邃内影 */
    0 0 20px rgba(139, 105, 20, 0.15), /* 外部金色辉光 */
    0 4px 16px rgba(0, 0, 0, 0.1); /* 底部投影 */
  
  /* 背景模糊，增强仙气缥缈 */
  backdrop-filter: blur(4px);
  
  /* 文字样式 */
  color: #3d2b15; /* 古卷墨色，深棕 */
  font-family: "Courier New", "Noto Serif SC", "楷体", "SimSun", monospace;
  font-size: 0.95em;
  line-height: 1.7;
  letter-spacing: 0.8px;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  
  /* 溢出处理，保留古卷的庄严感 */
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  
  /* 平滑过渡 */
  transition: all 0.3s ease;
  
  /* 左侧装饰：模拟卷轴边缘的云纹刻度 */
  position: relative;
}

/* 代码块左侧装饰线：如卷轴左缘的云纹金线 */
pre::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 3px;
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(139, 105, 20, 0.35) 20%, 
    rgba(160, 120, 30, 0.5) 50%, 
    rgba(139, 105, 20, 0.35) 80%, 
    transparent 100%);
  border-radius: 0 2px 2px 0;
  opacity: 0.8;
}

/* 代码块悬停：灵气激荡，封印微亮 */
pre:hover {
  border-color: rgba(139, 105, 20, 0.6);
  box-shadow: 
    inset 0 0 50px rgba(0, 0, 0, 0.08),
    0 0 30px rgba(139, 105, 20, 0.25),
    0 0 60px rgba(139, 80, 40, 0.12), /* 淡淡丹红辉光 */
    0 4px 20px rgba(0, 0, 0, 0.12);
}

/* 8. 代码块内的行内代码样式覆盖 */
pre code {
  background: transparent; /* 继承 pre 背景 */
  border: none;
  padding: 0;
  color: inherit;
  text-shadow: inherit;
  font-size: inherit;
  white-space: pre-wrap;
}

/* 9. 滚动条美化：如灵纹卷轴边缘 */
pre::-webkit-scrollbar {
  height: 8px;
}

pre::-webkit-scrollbar-track {
  background: rgba(245, 238, 220, 0.4);
  border-radius: 0 0 8px 8px;
  border: 1px solid rgba(139, 105, 20, 0.15);
}

pre::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, 
    rgba(139, 105, 20, 0.35), 
    rgba(120, 90, 20, 0.3));
  border-radius: 4px;
  border: 1px solid rgba(139, 105, 20, 0.25);
  box-shadow: inset 0 0 6px rgba(139, 105, 20, 0.2);
}

pre::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, 
    rgba(139, 105, 20, 0.5), 
    rgba(120, 90, 20, 0.4));
  box-shadow: inset 0 0 10px rgba(139, 105, 20, 0.3);
}

/* 10. 代码高亮关键词的修仙风格配色（示例） */
/* 若使用 highlight.js 或类似库，可配合以下风格 */
pre .keyword {
  color: #8b6914; /* 深金色：关键字 */
  text-shadow: 0 0 6px rgba(139, 105, 20, 0.3);
}

pre .string {
  color: #3d6b3d; /* 灵草绿：字符串 */
  text-shadow: 0 0 4px rgba(61, 107, 61, 0.3);
}

pre .comment {
  color: #8b7d6b; /* 棕灰：注释，如淡墨 */
  font-style: italic;
  opacity: 0.8;
}

pre .number {
  color: #8b3a3a; /* 丹红：数字 */
  text-shadow: 0 0 4px rgba(139, 58, 58, 0.3);
}

pre .function {
  color: #6b4f12; /* 深金：函数名 */
  text-shadow: 0 0 6px rgba(107, 79, 18, 0.3);
}

/* 11. 代码块顶部可选标题栏：如功法名称 */
/* 使用方法：在 pre 外包裹 div，或使用 data-title 属性配合以下样式 */
pre[data-title]::before {
  content: attr(data-title);
  display: block;
  margin: -10px -12px 8px -12px; /* 抵消 pre 的 padding */
  padding: 4px 12px;
  background: linear-gradient(180deg, 
    rgba(255, 248, 235, 0.7) 0%, 
    rgba(248, 238, 218, 0.5) 100%);
  color: #5c3d1a;
  font-family: "Noto Serif SC", "楷体", serif;
  font-size: 0.9em;
  font-weight: bold;
  letter-spacing: 3px;
  text-align: center;
  border-bottom: 1px solid rgba(139, 105, 20, 0.3);
  border-radius: 6px 6px 0 0;
  text-shadow: 0 0 6px rgba(139, 105, 20, 0.3);
}


/* ============================================================
   12. 深色模式适配（系统级自动检测）
   当用户系统/浏览器设置为深色模式时，进一步增强对比与辉光
   ============================================================ */
@media (prefers-color-scheme: dark) {
  
  /* 深色模式下，整体背景更深邃，辉光更明显 */
  details {
    background: rgba(10, 5, 20, 0.5); /* 更深的玄冥虚空 */
    border-color: rgba(200, 170, 80, 0.55); /* 金痕稍亮 */
    box-shadow: 
      0 0 25px rgba(200, 170, 80, 0.35), 
      inset 0 0 25px rgba(0, 0, 0, 0.5); /* 增强辉光 */
    backdrop-filter: blur(6px); /* 模糊加深，仙气更浓 */
  }
  
  /* 标题栏：金辉更盛 */
  summary {
    color: #e0c060; /* 更亮的鎏金色 */
    text-shadow: 
      0 0 14px rgba(224, 192, 96, 0.7), 
      0 0 28px rgba(140, 30, 60, 0.5); /* 丹红辉光增强 */
    border-bottom-color: rgba(200, 170, 80, 0.75);
    background: linear-gradient(180deg, 
      rgba(30, 15, 40, 0.65) 0%, 
      rgba(15, 8, 25, 0.55) 100%);
  }
  
  summary:hover {
    color: #ffe080;
    text-shadow: 
      0 0 20px rgba(255, 224, 128, 0.9), 
      0 0 40px rgba(200, 50, 70, 0.6);
    border-bottom-color: rgba(255, 224, 128, 0.85);
  }
  
  /* 展开状态：封印大开，灵光四溢 */
  details[open] > summary {
    color: #ffe080;
    border-bottom-color: rgba(240, 208, 96, 0.95);
    text-shadow: 
      0 0 22px rgba(255, 224, 128, 1), 
      0 0 45px rgba(220, 70, 90, 0.7);
    box-shadow: inset 0 -6px 18px rgba(240, 208, 96, 0.4);
  }
  
  details[open] > summary::before {
    color: #ffe080;
    text-shadow: 
      0 0 22px rgba(255, 224, 128, 1), 
      0 0 40px rgba(255, 120, 60, 0.8);
  }
  
  /* 内容区：墨色更深，金文更亮 */
  details > div,
  details > p {
    color: #ead8b8;
    border-bottom-color: rgba(200, 170, 80, 0.55);
    background: linear-gradient(180deg, 
      rgba(20, 10, 30, 0.65) 0%, 
      rgba(10, 3, 18, 0.55) 100%);
    border-left-color: rgba(200, 170, 80, 0.3);
    border-right-color: rgba(200, 170, 80, 0.3);
    box-shadow: 
      inset 0 0 40px rgba(0, 0, 0, 0.6), 
      0 4px 16px rgba(0, 0, 0, 0.5);
  }
  
  /* 行内代码：秘文增辉 */
  code {
    background: rgba(30, 15, 40, 0.6);
    color: #e0c060;
    border-color: rgba(200, 170, 80, 0.55);
    text-shadow: 0 0 8px rgba(224, 192, 96, 0.6);
  }
  
  /* 代码块：古籍残卷在深色下更显神秘 */
  pre {
    background: rgba(8, 2, 15, 0.55);
    border-color: rgba(200, 170, 80, 0.65);
    border-top-color: rgba(224, 192, 96, 0.75);
    border-bottom-color: rgba(160, 120, 40, 0.55);
    color: #ead8b8;
    box-shadow: 
      inset 0 0 50px rgba(0, 0, 0, 0.7),
      0 0 28px rgba(200, 170, 80, 0.4),
      0 0 60px rgba(160, 40, 70, 0.25),
      0 4px 20px rgba(0, 0, 0, 0.6);
  }
  
  pre:hover {
    border-color: rgba(255, 224, 128, 0.8);
    box-shadow: 
      inset 0 0 60px rgba(15, 5, 30, 0.7),
      0 0 38px rgba(224, 192, 96, 0.55),
      0 0 75px rgba(200, 60, 90, 0.3),
      0 4px 24px rgba(0, 0, 0, 0.7);
  }
  
  /* 代码块左侧装饰线增强 */
  pre::before {
    background: linear-gradient(180deg, 
      transparent 0%, 
      rgba(224, 192, 96, 0.6) 20%, 
      rgba(255, 224, 128, 0.8) 50%, 
      rgba(224, 192, 96, 0.6) 80%, 
      transparent 100%);
  }
  
  /* 滚动条深色适配 */
  pre::-webkit-scrollbar-track {
    background: rgba(15, 5, 25, 0.5);
    border-color: rgba(200, 170, 80, 0.25);
  }
  
  pre::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, 
      rgba(200, 170, 80, 0.55), 
      rgba(160, 120, 40, 0.45));
    border-color: rgba(224, 192, 96, 0.35);
  }
  
  pre::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, 
      rgba(224, 192, 96, 0.75), 
      rgba(200, 170, 80, 0.65));
  }
  
  /* 深色模式下选中文字 */
  details > div::selection,
  details > p::selection {
    background: rgba(224, 192, 96, 0.45);
    color: #fff8e0;
  }
  
  /* 代码高亮深色增强 */
  pre .keyword {
    color: #e0c060;
    text-shadow: 0 0 10px rgba(224, 192, 96, 0.6);
  }
  
  pre .string {
    color: #90d890;
    text-shadow: 0 0 8px rgba(144, 216, 144, 0.5);
  }
  
  pre .comment {
    color: #9888b0;
    opacity: 0.75;
  }
  
  pre .number {
    color: #f08060;
    text-shadow: 0 0 8px rgba(240, 128, 96, 0.5);
  }
  
  pre .function {
    color: #ffe080;
    text-shadow: 0 0 12px rgba(255, 224, 128, 0.6);
  }
}


/* ============================================================
   13. 小屏幕适配（≤768px）
   缩减字体大小、内外边距，保持修仙风格的精致感
   ============================================================ */
@media screen and (max-width: 768px) {
  
  /* 基础容器：减小整体间距 */
  details {
    width: 100%;
    margin-bottom: 6px; /* 减半 */
    border-radius: 6px;
    border-width: 1.5px; /* 边框稍细 */
  }
  
  /* 标题栏：紧凑布局，字体缩小 */
  summary {
    font-size: 0.95em; /* 缩小字体 */
    padding: 5px 7px; /* 减半 */
    letter-spacing: 1px;
    border-bottom-width: 1.5px;
  }
  
  /* 太极图标缩小 */
  summary::before {
    font-size: 1.1em;
    margin-right: 4px; /* 减半 */
  }
  
  /* 内容区：减小内边距 */
  details > div,
  details > p {
    padding: 6px 7px; /* 减半 */
    font-size: 0.9em; /* 缩小字体 */
    line-height: 1.6;
    border-bottom-width: 1.5px;
    border-left-width: 0.5px;
    border-right-width: 0.5px;
  }
  
  /* 内容区底部装饰线宽度调整 */
  details > div::after,
  details > p::after {
    width: 50%;
  }
  
  /* 行内代码：缩小以适应小屏 */
  code {
    font-size: 0.8em;
    padding: 0.5px 3px; /* 减半 */
    border-radius: 3px;
  }
  
  /* 代码块：缩减内边距和字体 */
  pre {
    padding: 7px 8px; /* 减半 */
    margin: 6px 0; /* 减半 */
    font-size: 0.82em;
    line-height: 1.5;
    letter-spacing: 0.5px;
    border-radius: 6px;
    border-width: 1.5px;
    border-top-width: 1.5px;
    border-bottom-width: 1.5px;
  }
  
  /* 代码块左侧装饰线缩小 */
  pre::before {
    width: 2px;
    top: 12%;
    height: 76%;
  }
  
  /* 代码块悬停辉光适度减弱（移动端无需过强效果） */
  pre:hover {
    box-shadow: 
      inset 0 0 30px rgba(0, 0, 0, 0.06),
      0 0 18px rgba(139, 105, 20, 0.2),
      0 3px 12px rgba(0, 0, 0, 0.08);
  }
  
  /* 标题栏悬停效果适度减弱 */
  summary:hover {
    text-shadow: 
      0 0 8px rgba(139, 105, 20, 0.4), 
      0 0 16px rgba(120, 70, 30, 0.2);
  }
  
  /* 展开状态适配 */
  details[open] > summary {
    border-bottom-width: 1.5px;
    box-shadow: inset 0 -3px 10px rgba(139, 105, 20, 0.15);
  }
  
  details[open] > summary::before {
    font-size: 1.1em;
  }
  
  /* 展开动画适配 */
  @keyframes daoUnfurl {
    0% {
      opacity: 0;
      transform: translateY(-4px);
      max-height: 0;
    }
    100% {
      opacity: 1;
      transform: translateY(0);
      max-height: 1000px;
    }
  }
  
  /* 滚动条缩小 */
  pre::-webkit-scrollbar {
    height: 5px;
  }
  
  pre::-webkit-scrollbar-thumb {
    border-radius: 3px;
  }
  
  /* 代码块顶部标题栏适配 */
  pre[data-title]::before {
    margin: -7px -8px 6px -8px; /* 减半 */
    padding: 3px 8px; /* 减半 */
    font-size: 0.8em;
    letter-spacing: 2px;
  }
}

/* ——— 表格 · 战绩面板 ——— */
details table {
    width: auto;
    min-width: 800px;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 0.9em;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(139, 107, 74, 0.04);
    background: var(--light-surface);
    border: 1px solid var(--border-color);
}
@media (prefers-color-scheme: dark) {
    details table {
        background: var(--dark-surface);
    }
}

details table th {
    background: rgba(212, 163, 115, 0.10);
    color: var(--text-primary);
    font-weight: 700;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 3px solid var(--primary-color);
    font-family: inherit;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.5px;
    min-width: 100px;
}
details table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
    color: var(--text-secondary);
}
details table tr:last-child td {
    border-bottom: none;
}
details table tr:hover {
    background: var(--hover-bg);
    min-width: 100px;
}

details td:last-child,
details th:last-child {
    min-width: 200px;
}

@media (max-width: 768px) {
    details table {
        min-width: 600px;
        display: table;
        font-size: 0.85em;
        margin: 6px 0;
    }

    details table th,
    details table td {
        padding: 6px 8px;
        min-width: 80px;
    }

    details td:last-child,
    details th:last-child {
        min-width: 120px;
    }
}

/* ===== 对话项通用 ===== */
.npc-talk,
.my-talk {
    display: flex;
    flex-direction: column;
    margin-bottom: 22px;
    width: 100%;
}
.npc-talk:last-child,
.my-talk:last-child {
    margin-bottom: 0;
}

/* NPC — 右对齐 */
.npc-talk {
    align-items: flex-end;
}

/* 用户 — 左对齐 */
.my-talk {
    align-items: flex-start;
}

/* ===== 姓名框通用 ===== */
.npc-name,
.my-name {
    display: inline-block;
    padding: 4px 18px 4px 22px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Ma Shan Zheng', '华文楷体', 'KaiTi', serif;
    letter-spacing: 2px;
    border-radius: 20px 4px 4px 20px;
    border: 1px solid;
    margin-bottom: 6px;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    white-space: nowrap;
}
/* 姓名框小装饰（左侧符号） */
.npc-name::before,
.my-name::before {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    opacity: 0.7;
}

/* ===== NPC 姓名框 — 青蓝仙气 ===== */
.npc-name {
    background: linear-gradient(135deg, #3d6b7a, #2a4d5a);
    color: #f0e6d3;
    border-color: #c9a86c;
    box-shadow: 0 2px 8px rgba(42, 77, 90, 0.25);
}
.npc-name::before {
    content: '✦';
    color: #e8d5b0;
    left: 5px;
    font-size: 12px;
}
/* NPC 姓名框右对齐 */
.npc-talk .npc-name {
    border-radius: 4px 20px 20px 4px;
    padding: 4px 22px 4px 18px;
}
.npc-talk .npc-name::before {
    left: auto;
    right: 6px;
}

/* ===== 用户姓名框 — 朱红红尘 ===== */
.my-name {
    background: linear-gradient(135deg, #8a3a3a, #5a2a2a);
    color: #f0e6d3;
    border-color: #c9a86c;
    box-shadow: 0 2px 8px rgba(90, 42, 42, 0.25);
}
.my-name::before {
    content: '⚔';
    color: #e8d5b0;
    font-size: 12px;
}

/* ===== 气泡框通用 ===== */
.talk-word {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    line-height: 1.8;
    border-radius: 8px;
    border: 1px solid;
    max-width: 88%;
    word-break: break-word;
    position: relative;
    transition: all 0.2s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* ===== NPC 气泡 ===== */
.npc-talk .talk-word {
    background: rgba(58, 107, 122, 0.07);
    border-color: rgba(58, 107, 122, 0.25);
    color: #2d3a40;
    border-radius: 8px 4px 8px 8px;
    box-shadow: 0 2px 12px rgba(42, 77, 90, 0.06);
}
/* NPC 气泡左侧小墨点装饰 */
.npc-talk .talk-word::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 12px;
    width: 8px;
    height: 8px;
    background: rgba(58, 107, 122, 0.15);
    border-radius: 50%;
    filter: blur(2px);
}

/* ===== 用户气泡 ===== */
.my-talk .talk-word {
    background: rgba(138, 58, 58, 0.07);
    border-color: rgba(138, 58, 58, 0.25);
    color: #3d2a2a;
    border-radius: 4px 8px 8px 8px;
    box-shadow: 0 2px 12px rgba(90, 42, 42, 0.06);
}
/* 用户气泡右侧小墨点装饰 */
.my-talk .talk-word::before {
    content: '';
    position: absolute;
    right: -6px;
    top: 12px;
    width: 8px;
    height: 8px;
    background: rgba(138, 58, 58, 0.15);
    border-radius: 50%;
    filter: blur(2px);
}

/* ===== 对话内联样式微调 ===== */
.talk-word em {
    font-style: normal;
    color: #b8860b;
    font-weight: 700;
}
.talk-word .highlight {
    color: #8a3a3a;
    font-weight: 700;
}
.talk-word .highlight-blue {
    color: #2a5a6a;
    font-weight: 700;
}

/* ===== 修仙风格装饰 — 底部落款 ===== */
.dialogue-footer {
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid #d6cdbc;
    text-align: center;
    font-size: 12px;
    color: #b0a088;
    letter-spacing: 4px;
    font-family: 'Ma Shan Zheng', '华文楷体', 'KaiTi', serif;
}
.dialogue-footer span {
    display: inline-block;
    padding: 0 12px;
    position: relative;
}
.dialogue-footer span::before,
.dialogue-footer span::after {
    content: '◆';
    font-size: 8px;
    color: #c9b89a;
    position: relative;
    top: -1px;
}
.dialogue-footer span::before {
    margin-right: 10px;
}
.dialogue-footer span::after {
    margin-left: 10px;
}

/* ===== 可选：对话出现动画 ===== */
.npc-talk,
.my-talk {
    animation: fadeInUp 0.4s ease-out both;
}
.npc-talk:nth-child(2) {
    animation-delay: 0.1s;
}
.npc-talk:nth-child(3) {
    animation-delay: 0.2s;
}
.my-talk:nth-child(4) {
    animation-delay: 0.3s;
}
.my-talk:nth-child(5) {
    animation-delay: 0.4s;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 小屏幕适配 ≤768px ===== */
@media (max-width: 768px) {
    /* 对话间距减半 */
    .npc-talk,
    .my-talk {
        margin-bottom: 12px;
    }

    /* 姓名框内边距、字号、圆角减半 */
    .npc-name,
    .my-name {
        padding: 3px 10px 3px 14px;   /* 原 4px 18px 4px 22px，左右各减半 */
        font-size: 12px;
        border-radius: 10px 3px 3px 10px; /* 原 20px 4px 4px 20px */
        letter-spacing: 1px;
        white-space: normal; /* 允许换行，防止过长名字溢出 */
    }
    .npc-name::before,
    .my-name::before {
        font-size: 9px;  /* 原 11~12px */
        left: 4px;       /* 原 6px */
    }
    /* 右对齐的NPC姓名框反向圆角 */
    .npc-talk .npc-name {
        padding: 3px 14px 3px 10px;
        border-radius: 3px 10px 10px 3px; /* 原 4px 20px 20px 4px */
    }
    .npc-talk .npc-name::before {
        left: auto;
        right: 4px;      /* 原 6px */
    }

    /* 气泡内边距、字号、宽度 */
    .talk-word {
        padding: 6px 12px;
        font-size: 14px;
        max-width: 95%; 
        line-height: 1.6; 
        border-radius: 6px; 
    }
    /* NPC 气泡特殊圆角（保留原风格但缩小） */
    .npc-talk .talk-word {
        border-radius: 6px 3px 6px 6px; /* 原 8px 4px 8px 8px */
    }
    /* 用户气泡特殊圆角 */
    .my-talk .talk-word {
        border-radius: 3px 6px 6px 6px; /* 原 4px 8px 8px 8px */
    }

    /* 气泡装饰点缩小 */
    .npc-talk .talk-word::before,
    .my-talk .talk-word::before {
        width: 5px;
        height: 5px;
        filter: blur(1px);
    }
    .npc-talk .talk-word::before {
        left: -4px; 
        top: 10px; 
    }
    .my-talk .talk-word::before {
        right: -4px;
        top: 10px;
    }

    /* 底部落款缩小 */
    .dialogue-footer {
        margin-top: 16px;
        padding-top: 8px;
        font-size: 10px;
        letter-spacing: 2px;
    }
    .dialogue-footer span::before,
    .dialogue-footer span::after {
        font-size: 6px;
        margin: 0 6px; 
    }
    .dialogue-footer span::before {
        margin-right: 6px;
    }
    .dialogue-footer span::after {
        margin-left: 6px;
    }

    /* 动画延迟可缩短（可选） */
    .npc-talk:nth-child(2) { animation-delay: 0.05s; }
    .npc-talk:nth-child(3) { animation-delay: 0.1s; }
    .my-talk:nth-child(4) { animation-delay: 0.15s; }
    .my-talk:nth-child(5) { animation-delay: 0.2s; }
}

/* ===== 新增：深色模式 .dark ===== */
.dark .npc-name {
    background: linear-gradient(135deg, #2a4d5a, #1a2f36);
    color: #e8d5b0;
    border-color: #c9a86c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.dark .my-name {
    background: linear-gradient(135deg, #5a2a2a, #3a1a1a);
    color: #e8d5b0;
    border-color: #c9a86c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.dark .npc-talk .talk-word {
    background: rgba(200, 220, 230, 0.08);
    border-color: rgba(200, 220, 230, 0.25);
    color: #c8d0c8;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.dark .my-talk .talk-word {
    background: rgba(230, 200, 200, 0.08);
    border-color: rgba(230, 200, 200, 0.25);
    color: #d0c8c8;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
/* 装饰点颜色加深 */
.dark .npc-talk .talk-word::before {
    background: rgba(200, 220, 230, 0.2);
}
.dark .my-talk .talk-word::before {
    background: rgba(230, 200, 200, 0.2);
}
/* 底部落款适应深色 */
.dark .dialogue-footer {
    border-top-color: #5a4a3a;
    color: #a09080;
}
.dark .dialogue-footer span::before,
.dark .dialogue-footer span::after {
    color: #8a7a6a;
}
/* 内联高亮色在深色下提高明度 */
.dark .talk-word .highlight {
    color: #d4a0a0;
}
.dark .talk-word .highlight-blue {
    color: #80b0c0;
}
.dark .talk-word em {
    color: #d4b87a; /* 金色在深色下略亮 */
}

/* ================================================================
   .action · 青木灵韵（独特配色，不与现有元素重复）
   左对齐 + 自动换行 + .dark 深色模式
   ================================================================ */

.action {
  /* 木系专属变量（浅色默认） */
  --action-bg: rgba(235, 248, 235, 0.92);
  --action-border: #5a8a6a;
  --action-border-light: rgba(90, 138, 106, 0.35);
  --action-text: #1a2d1a;
  --action-text-secondary: #2a4a2a;
  --action-heading: #3a5a3a;
  --action-marker: #5a8a6a;
  --action-marker-bg: rgba(90, 138, 106, 0.12);
  --action-hover-bg: rgba(90, 138, 106, 0.06);
  --action-shadow: 0 2px 12px rgba(90, 138, 106, 0.12);
  --action-glow: 0 0 20px rgba(90, 138, 106, 0.06);

  display: block;
  padding: 18px 22px 20px;
  border-radius: 10px;
  border: 2px solid var(--action-border);
  background: var(--action-bg);
  color: var(--action-text);
  box-shadow: var(--action-shadow), var(--action-glow);
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;

  /* 强制左对齐 & 自动换行 */
  text-align: left;
  word-wrap: break-word;
  white-space: normal;
}

/* 灵气底纹 */
.action::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, var(--action-border-light) 0%, transparent 70%);
  opacity: 0.15;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.action:hover::before {
  opacity: 0.25;
}

/* ——— 标题 ——— */
.action h3,
.action h4,
.action .action-title {
  font-family: 'Ma Shan Zheng', '华文楷体', 'KaiTi', serif;
  font-weight: 700;
  color: var(--action-heading);
  letter-spacing: 3px;
  margin: 0 0 10px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--action-border-light);
  text-shadow: 0 0 8px var(--action-border-light);
  font-size: 1.15em;
  display: flex;
  align-items: center;
  gap: 8px;
  /* 继承左对齐 */
  text-align: left;
}
.action h3::before,
.action .action-title::before {
  content: '◆';
  font-size: 0.8em;
  color: var(--action-marker);
  opacity: 0.7;
}

/* ——— 列表通用 ——— */
.action ul,
.action ol {
  margin: 6px 0 4px;
  padding-left: 0;
  list-style: none;
  text-align: left; /* 左对齐 */
}

/* ——— 无序列表 ——— */
.action ul li {
  position: relative;
  padding: 5px 0 5px 34px;
  line-height: 1.7;
  color: var(--action-text-secondary);
  border-bottom: 1px solid var(--action-border-light);
  transition: background 0.2s ease, padding-left 0.2s ease;
  border-radius: 4px;
  text-align: left;
  word-wrap: break-word;
  white-space: normal;
}
.action ul li:last-child {
  border-bottom: none;
}
.action ul li:hover {
  background: var(--action-hover-bg);
  padding-left: 40px;
}

/* 灵纹标记（六种） */
.action ul li::before {
  content: '✦';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1em;
  color: var(--action-marker);
  opacity: 0.7;
  transition: all 0.3s ease;
  text-shadow: 0 0 6px var(--action-border-light);
  width: 20px;
  text-align: center;
}
.action ul li:nth-child(2)::before { content: '☯'; }
.action ul li:nth-child(3)::before { content: '⚔'; }
.action ul li:nth-child(4)::before { content: '◈'; }
.action ul li:nth-child(5)::before { content: '❖'; }
.action ul li:nth-child(6)::before { content: '✧'; }

.action ul li:hover::before {
  opacity: 1;
  transform: translateY(-50%) scale(1.2);
  text-shadow: 0 0 12px var(--action-marker);
}

/* ——— 有序列表 ——— */
.action ol {
  counter-reset: action-counter;
}
.action ol li {
  position: relative;
  padding: 5px 0 5px 40px;
  line-height: 1.7;
  color: var(--action-text-secondary);
  border-bottom: 1px solid var(--action-border-light);
  transition: background 0.2s ease, padding-left 0.2s ease;
  border-radius: 4px;
  counter-increment: action-counter;
  text-align: left;
  word-wrap: break-word;
  white-space: normal;
}
.action ol li:last-child {
  border-bottom: none;
}
.action ol li:hover {
  background: var(--action-hover-bg);
  padding-left: 46px;
}

/* 灵纹数字圆标 */
.action ol li::before {
  content: counter(action-counter);
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85em;
  font-weight: 700;
  color: var(--action-marker);
  background: var(--action-marker-bg);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--action-border-light);
  transition: all 0.3s ease;
  font-family: 'Ma Shan Zheng', '华文楷体', serif;
  text-shadow: 0 0 4px var(--action-border-light);
}
.action ol li:hover::before {
  transform: translateY(-50%) scale(1.1);
  border-color: var(--action-marker);
  box-shadow: 0 0 12px var(--action-border-light);
}

/* ——— 嵌套列表 ——— */
.action ul ul,
.action ol ul,
.action ul ol,
.action ol ol {
  margin: 2px 0 2px 20px;
  padding-left: 0;
}
.action ul ul li::before,
.action ol ul li::before {
  content: '·';
  font-size: 1.6em;
  left: 4px;
}
.action ul ul li,
.action ol ul li {
  padding-left: 28px;
  font-size: 0.92em;
  border-bottom: none;
}
.action ul ul li:hover,
.action ol ul li:hover {
  padding-left: 32px;
}

/* ================================================================
   深色模式 · 系统级 @media
   ================================================================ */
@media (prefers-color-scheme: dark) {
  .action {
    --action-bg: rgba(8, 20, 12, 0.88);
    --action-border: #7ab08a;
    --action-border-light: rgba(122, 176, 138, 0.30);
    --action-text: #c8dcc8;
    --action-text-secondary: #a8bca8;
    --action-heading: #8ac89a;
    --action-marker: #7ab08a;
    --action-marker-bg: rgba(122, 176, 138, 0.15);
    --action-hover-bg: rgba(122, 176, 138, 0.08);
    --action-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
    --action-glow: 0 0 30px rgba(122, 176, 138, 0.06);
  }
  /* 标记辉光增强 */
  .action ul li::before,
  .action ol li::before {
    text-shadow: 0 0 8px var(--action-border-light);
  }
  .action ul li:hover::before {
    text-shadow: 0 0 16px var(--action-marker);
  }
}

/* ================================================================
   深色模式 · 手动类 .dark（供用户通过 JS 切换）
   优先级高于 @media，可覆盖系统设置
   ================================================================ */
.dark .action {
  --action-bg: rgba(8, 20, 12, 0.88);
  --action-border: #7ab08a;
  --action-border-light: rgba(122, 176, 138, 0.30);
  --action-text: #c8dcc8;
  --action-text-secondary: #a8bca8;
  --action-heading: #8ac89a;
  --action-marker: #7ab08a;
  --action-marker-bg: rgba(122, 176, 138, 0.15);
  --action-hover-bg: rgba(122, 176, 138, 0.08);
  --action-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
  --action-glow: 0 0 30px rgba(122, 176, 138, 0.06);
}
.dark .action ul li::before,
.dark .action ol li::before {
  text-shadow: 0 0 8px var(--action-border-light);
}
.dark .action ul li:hover::before {
  text-shadow: 0 0 16px var(--action-marker);
}

/* ================================================================
   响应式 · 小屏 ≤768px
   ================================================================ */
@media (max-width: 768px) {
  .action {
    padding: 12px 14px 14px;
    border-radius: 8px;
    border-width: 1.5px;
    margin-bottom: 10px;
  }

  .action h3,
  .action h4,
  .action .action-title {
    font-size: 1em;
    letter-spacing: 2px;
    padding-bottom: 6px;
    margin-bottom: 6px;
  }
  .action h3::before,
  .action .action-title::before {
    font-size: 0.7em;
  }

  .action ul li,
  .action ol li {
    padding: 4px 0 4px 30px;
    font-size: 0.92em;
    line-height: 1.6;
  }
  .action ul li::before {
    left: 4px;
    font-size: 0.95em;
    width: 16px;
  }
  .action ol li::before {
    width: 22px;
    height: 22px;
    font-size: 0.75em;
    left: 2px;
  }

  .action ul li:hover,
  .action ol li:hover {
    padding-left: 34px;
  }

  .action ul ul li,
  .action ol ul li {
    padding-left: 22px;
    font-size: 0.88em;
  }
  .action ul ul li:hover,
  .action ol ul li:hover {
    padding-left: 26px;
  }
  .action ul ul,
  .action ol ul,
  .action ul ol,
  .action ol ol {
    margin-left: 12px;
  }
}