/* 小屏幕元素隐藏 */
@media (max-width: 768px) {
#customized-answer-avatar {
  display: none;
}
}

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

/* "mod、流式、评论、回到底部" 等按钮 - 玄幻修仙风格 */
.flex.items-center.gap-2.pb-2 > button {
  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; /* 文字暗金灵光 */
}

/* 修仙灵气流动伪元素 */
.flex.items-center.gap-2.pb-2 > button::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;
}

/* 灵力汇聚点 */
.flex.items-center.gap-2.pb-2 > button::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;
}

/* 悬停效果 - 灵力激发 */
.flex.items-center.gap-2.pb-2 > button: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; /* 文字金光大放 */
}

.flex.items-center.gap-2.pb-2 > button:hover::before {
  left: 100%; /* 金光从左至右冲刷 */
}

.flex.items-center.gap-2.pb-2 > button:hover::after {
  opacity: 1;
  animation: goldenSpiritPulse 1.5s ease-in-out infinite;
}

/* 点击效果 - 灵力爆发 */
.flex.items-center.gap-2.pb-2 > button: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;
  }
}

/* 可选：按钮聚焦状态 */
.flex.items-center.gap-2.pb-2 > button: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;
}

/* 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;
    }
}