/* 通用基础设置 
   确保代码块在所有浏览器中表现一致，防止溢出。
*/
pre {
  /* 字体栈：优先使用等宽字体，确保代码对齐 */
  font-family: "Fira Code", "Consolas", "Monaco", "Menlo", monospace;
  font-size: 14px; /* 字体大小，可根据正文调整 */
  line-height: 1.6; /* 行高，增加可读性 */
  padding: 1rem; /* 内边距 */
  margin: 1.5rem 0; /* 外边距，与段落隔开 */
  border-radius: 6px; /* 圆角 */
  overflow-x: auto; /* 超出宽度时显示横向滚动条，而不是撑破布局 */
  word-wrap: normal; /* 保持代码不强制换行，便于阅读逻辑 */
  position: relative; /* 为后续可能的绝对定位元素做准备 */
  background: #141515;
  color: #d4c2c2;
}

/* 确保 pre 内部的 code 标签继承字体和背景 */
pre code {
  background: none;
  padding: 0;
  font-family: inherit;
  color: inherit;
}

/* -----------------------------------------------------------
   风格 1: 简约灰底 (GitHub 浅色风格)
   适合大多数阅读型博客，干净清爽。
----------------------------------------------------------- */
.pre-style-simple {
  background-color: #f6f8fa; /* 浅灰背景 */
  color: #24292e; /* 深色文字 */
  border: 1px solid #e1e4e8; /* 极细边框 */
}

/* -----------------------------------------------------------
   风格 2: 经典暗色 (VS Code / Dracula 风格)
   适合技术博客，保护视力，代码高亮对比度好。
----------------------------------------------------------- */
.pre-style-dark {
  background-color: #282c34; /* 深色背景 */
  color: #abb2bf; /* 柔和的白色文字 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微阴影，增加立体感 */
}

/* -----------------------------------------------------------
   风格 3: 优雅卡片风 (带左侧强调线)
   适合引用代码或强调内容的博客。
----------------------------------------------------------- */
.pre-style-elegant {
  background-color: #fdfdfd;
  color: #333;
  border: 1px solid #eee;
  border-left: 4px solid #007bff; /* 左侧蓝色强调线 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* -----------------------------------------------------------
   风格 4: 仿 Mac 终端窗口 (顶部带三个小圆点)
   非常流行的博客代码块风格，看起来像一个应用程序窗口。
----------------------------------------------------------- */
.pre-style-mac {
  background-color: #21252b; /* 终端黑 */
  color: #dcdcdc;
  padding-top: 40px; /* 顶部留出空间给“红绿灯”圆点 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* 使用伪元素制作 Mac 窗口的三个圆点 (红、黄、绿) */
.pre-style-mac::before {
  content: " ";
  position: absolute;
  top: 12px;
  left: 15px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fc625d; /* 红色圆点 */
  /* 利用 box-shadow 复制出黄色和绿色圆点，无需额外的 HTML */
  box-shadow: 20px 0 0 #fdbc40, 40px 0 0 #35cd4b; 
}

/* -----------------------------------------------------------
   滚动条美化 (Webkit 内核: Chrome, Safari, Edge)
   让滚动条不那么突兀。
----------------------------------------------------------- */
pre::-webkit-scrollbar {
  height: 8px; /* 滚动条高度 */
  background-color: transparent;
}

pre::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2); /* 滚动滑块颜色 */
  border-radius: 4px;
}

/* 暗色模式下的滚动条微调 */
.pre-style-dark::-webkit-scrollbar-thumb,
.pre-style-mac::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
}