/* 专门修复代码显示问题的CSS */
/* 特别处理C++头文件中的尖括号与HTML标签冲突问题 */

/* 重置所有可能影响代码显示的样式 */
.code-example {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  margin: 2rem 0 !important;
  background: #f5f5dc !important;
  border: 1px solid #e9ecef !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  min-width: 100% !important;
  min-height: 0 !important;
  transform: none !important;
  clip: none !important;
  clip-path: none !important;
  transition: all 0.3s ease !important;
}

/* 代码块容器优化 */
.code-example {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  margin: 2rem 0 !important;
  background: #f5f5dc !important;
  border: 1px solid #e9ecef !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  min-width: 100% !important;
  min-height: 0 !important;
  transform: none !important;
  clip: none !important;
  clip-path: none !important;
  transition: all 0.3s ease !important;
}

/* 代码块标题优化 */
.code-example h5 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
  margin: 0 !important;
  font-size: 1.1em !important;
  border: none !important;
  padding: 1.2rem 1.8rem !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 代码块内容区域优化 */
.code-example pre {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  margin: 0 !important;
  background: #f5f5dc !important;
  color: #333 !important;
  padding: 1.5rem !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: 600px !important;
  max-width: 100% !important;
  min-width: 100% !important;
  font-family: "Fira Code", "Monaco", "Cascadia Code", "Consolas", monospace !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  border-radius: 0 !important;
  white-space: pre !important;
  word-wrap: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-indent: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100px !important;
  transform: none !important;
  clip: none !important;
  clip-path: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  z-index: 1 !important;
  box-sizing: border-box !important;

  /* 滚动条样式 */
  scrollbar-width: thin !important;
  scrollbar-color: #c1c1c1 #f1f1f1 !important;
}

/* 输出区域优化 */
.code-example .output {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #f8f9fa !important;
  border-top: 1px solid #e9ecef !important;
  padding: 1rem 1.5rem !important;
  margin: 0 !important;
  color: #495057 !important;
  font-family: "Fira Code", "Monaco", "Cascadia Code", "Consolas", monospace !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .code-example {
    margin: 1rem 0 !important;
    border-radius: 10px !important;
  }

  .code-example h5 {
    padding: 1rem 1.2rem !important;
    font-size: 1em !important;
  }

  .code-example pre {
    padding: 1rem !important;
    font-size: 0.85rem !important;
    max-height: 400px !important;
  }

  .code-example .output {
    padding: 0.8rem 1rem !important;
    font-size: 0.85rem !important;
  }
}

/* 代码高亮优化 */
.code-example .hljs {
  background: transparent !important;
  color: #333 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 100% !important;
  min-height: 0 !important;
  transform: none !important;
  clip: none !important;
  clip-path: none !important;
  overflow: visible !important;
}

.code-example::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.code-example:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.code-example h3,
.code-example h4 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
  margin: 0 !important;
  font-size: 1.1em !important;
  border: none !important;
  padding: 1.2rem 1.8rem !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.code-example p {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 0 20px !important;
  margin: 10px 0 !important;
  color: #6c757d !important;
}

.code-example pre {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  margin: 0 !important;
  background: #f5f5dc !important;
  color: #333 !important;
  padding: 1.5rem !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: 600px !important;
  max-width: 100% !important;
  min-width: 100% !important;
  font-family: "Fira Code", "Monaco", "Cascadia Code", "Consolas", monospace !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  border-radius: 0 !important;
  white-space: pre !important;
  word-wrap: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-indent: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100px !important;
  transform: none !important;
  clip: none !important;
  clip-path: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  z-index: 1 !important;

  /* 滚动条样式 */
  scrollbar-width: thin !important;
  scrollbar-color: #c1c1c1 #f1f1f1 !important;
}

/* Webkit浏览器的滚动条样式 */
.code-example pre::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

.code-example pre::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 4px !important;
}

.code-example pre::-webkit-scrollbar-thumb {
  background: #c1c1c1 !important;
  border-radius: 4px !important;
}

.code-example pre::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8 !important;
}

.code-example pre::-webkit-scrollbar-corner {
  background: #f1f1f1 !important;
}

.code-example code {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  font-family: "Fira Code", "Monaco", "Cascadia Code", "Consolas", monospace !important;
  font-size: 0.95rem !important;
  line-height: 1.8 !important;
  color: #333 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 100% !important;
  min-height: 0 !important;
  transform: none !important;
  clip: none !important;
  clip-path: none !important;
  white-space: pre !important;
  word-wrap: normal !important;
  text-indent: 0 !important;
  overflow: visible !important;
}

/* 确保Prism.js的高亮样式正常工作 */
.code-example pre[class*="language-"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #f5f5dc !important;
  color: #333 !important;
}

.code-example code[class*="language-"] {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #333 !important;
  background: transparent !important;
}

/* 语法高亮token样式 */
.code-example .token.comment,
.code-example .token.prolog,
.code-example .token.doctype,
.code-example .token.cdata {
  color: #718096 !important;
  opacity: 0.85 !important;
  display: inline !important;
  visibility: visible !important;
  font-style: italic !important;
  background: rgba(113, 128, 150, 0.08) !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
}

.code-example .token.punctuation {
  color: #4a5568 !important;
  opacity: 0.9 !important;
  display: inline !important;
  visibility: visible !important;
  font-weight: 500 !important;
}

.code-example .token.property,
.code-example .token.tag,
.code-example .token.constant,
.code-example .token.symbol,
.code-example .token.deleted {
  color: #e74c3c !important;
  opacity: 1 !important;
  display: inline !important;
  visibility: visible !important;
  font-weight: 600 !important;
}

.code-example .token.boolean,
.code-example .token.number {
  color: #e53e3e !important;
  opacity: 1 !important;
  display: inline !important;
  visibility: visible !important;
  font-weight: 700 !important;
  background: rgba(229, 62, 62, 0.1) !important;
  padding: 1px 3px !important;
  border-radius: 3px !important;
}

.code-example .token.selector,
.code-example .token.attr-name,
.code-example .token.string,
.code-example .token.char,
.code-example .token.builtin,
.code-example .token.inserted {
  color: #27ae60 !important;
  opacity: 1 !important;
  display: inline !important;
  visibility: visible !important;
  font-weight: 500 !important;
}

.code-example .token.operator,
.code-example .token.entity,
.code-example .token.url,
.code-example .language-css .token.string,
.code-example .style .token.string {
  color: #805ad5 !important;
  opacity: 1 !important;
  display: inline !important;
  visibility: visible !important;
  font-weight: 700 !important;
  background: rgba(128, 90, 213, 0.08) !important;
  padding: 1px 3px !important;
  border-radius: 3px !important;
}

.code-example .token.atrule,
.code-example .token.attr-value,
.code-example .token.keyword {
  color: #667eea !important;
  opacity: 1 !important;
  display: inline !important;
  visibility: visible !important;
  font-weight: 700 !important;
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.15) 0%,
    rgba(118, 75, 162, 0.15) 100%
  ) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2) !important;
  border: 1px solid rgba(102, 126, 234, 0.2) !important;
}

.code-example .token.function,
.code-example .token.class-name {
  color: #2980b9 !important;
  opacity: 1 !important;
  display: inline !important;
  visibility: visible !important;
  font-weight: 600 !important;
}

.code-example .token.regex,
.code-example .token.important,
.code-example .token.variable {
  color: #e74c3c !important;
  opacity: 1 !important;
  display: inline !important;
  visibility: visible !important;
  font-weight: 600 !important;
}

/* 行内代码样式 */
.code-example p code:not([class*="language-"]),
.code-example li code:not([class*="language-"]) {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  color: #e53e3e !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 0.9em !important;
  border: 1px solid rgba(102, 126, 234, 0.2) !important;
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.15) !important;
  font-family: "Fira Code", "Monaco", "Consolas", monospace !important;
}

/* 修复C++头文件尖括号显示问题 */
.code-example pre code,
.code-example code[class*="language-"] {
  /* 确保代码内容按原样显示，不被HTML解析 */
  white-space: pre !important;
  word-wrap: normal !important;
  overflow-wrap: normal !important;
  text-rendering: optimizeSpeed !important;
}

/* 特殊处理包含尖括号的代码行 */
.code-example pre code::before {
  content: "" !important;
  white-space: pre !important;
}

/* 确保尖括号正确显示 */
.code-example .token.punctuation {
  color: #8e44ad !important;
  opacity: 1 !important;
  display: inline !important;
  visibility: visible !important;
  font-weight: 500 !important;
}

/* 头文件名称高亮 */
.code-example .token.string {
  color: #38a169 !important;
  opacity: 1 !important;
  display: inline !important;
  visibility: visible !important;
  font-weight: 600 !important;
  background: rgba(56, 161, 105, 0.1) !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 2px rgba(56, 161, 105, 0.1) !important;
}

/* include关键字高亮 - 统一所有关键字样式 */
.code-example .token.keyword,
.code-example .hljs-keyword,
.code-example .hljs-built_in,
.code-example .hljs-type,
.code-example .hljs-literal {
  color: #8e44ad !important;
  opacity: 1 !important;
  display: inline !important;
  visibility: visible !important;
  font-weight: bold !important;
  background: rgba(142, 68, 173, 0.08) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
}

/* 预处理器指令高亮 */
.code-example .token.directive,
.code-example .token.directive-hash {
  color: #2980b9 !important;
  opacity: 1 !important;
  display: inline !important;
  visibility: visible !important;
  font-weight: bold !important;
  background: rgba(41, 128, 185, 0.08) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
}

/* 确保所有代码内容都能正确显示 */
.code-example * {
  text-rendering: optimizeSpeed !important;
  -webkit-font-smoothing: auto !important;
  -moz-osx-font-smoothing: auto !important;
}

/* 确保代码块完整显示 */
.code-example,
.code-example pre,
.code-example code {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: auto !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* 防止内容被截断 */
.code-example pre code {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  transform: none !important;
  clip: none !important;
  clip-path: none !important;
}

/* 增强C++代码高亮效果 */
.code-example .hljs-meta {
  color: #2980b9 !important;
  font-weight: bold !important;
  background: rgba(41, 128, 185, 0.08) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
}

.code-example .hljs-meta .hljs-string {
  color: #27ae60 !important;
  font-weight: 500 !important;
}

/* 改进操作符显示 */
.code-example .hljs-operator {
  color: #805ad5 !important;
  font-weight: 700 !important;
  background: rgba(128, 90, 213, 0.08) !important;
  padding: 1px 3px !important;
  border-radius: 3px !important;
}

/* 改进命名空间显示 */
.code-example .hljs-namespace {
  color: #f39c12 !important;
  font-weight: 600 !important;
}

/* 改进关键字的显示 - 使用项目主色调渐变 */
.hljs-keyword,
.code-example .hljs-keyword {
  color: #667eea !important;
  font-weight: 700 !important;
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.15) 0%,
    rgba(118, 75, 162, 0.15) 100%
  ) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  opacity: 1 !important;
  display: inline !important;
  visibility: visible !important;
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2) !important;
  border: 1px solid rgba(102, 126, 234, 0.2) !important;
}

/* 改进类型显示 */
.code-example .hljs-type {
  color: #f39c12 !important;
  font-weight: 600 !important;
  background: rgba(243, 156, 18, 0.08) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
}

/* 改进模板参数显示 */
.code-example .hljs-template-variable {
  color: #e74c3c !important;
  font-weight: 600 !important;
  background: rgba(231, 76, 60, 0.08) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
}

/* 确保代码块内容不会被意外隐藏 */
.code-example pre,
.code-example code {
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* 修复可能的字体渲染问题 */
.code-example pre code {
  font-variant-ligatures: none !important;
  font-feature-settings: normal !important;
}

/* 强制确保关键字样式不被覆盖 */
.code-example .hljs-keyword,
.code-example .token.keyword,
.hljs-keyword,
.token.keyword {
  color: #8e44ad !important;
  font-weight: bold !important;
  opacity: 1 !important;
  display: inline !important;
  visibility: visible !important;
  text-decoration: none !important;
  background: rgba(142, 68, 173, 0.08) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
}

/* 确保所有C++关键字都被正确高亮 */
.code-example code .hljs-keyword,
.code-example pre .hljs-keyword,
.code-example code .token.keyword,
.code-example pre .token.keyword {
  color: #8e44ad !important;
  font-weight: bold !important;
  opacity: 1 !important;
}

/* 防止其他样式覆盖关键字颜色 */
.code-example * .hljs-keyword,
.code-example * .token.keyword {
  color: #8e44ad !important;
}

/* 修复cout、cin等输入输出流的颜色 */
.code-example .hljs-built_in,
.code-example .token.builtin,
.hljs-built_in,
.token.builtin {
  color: #2980b9 !important;
  font-weight: bold !important;
  opacity: 1 !important;
  background: rgba(41, 128, 185, 0.08) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
}

/* 修复vector、string等标准库类型的颜色 */
.code-example .hljs-type,
.code-example .token.class-name,
.hljs-type,
.token.class-name {
  color: #f39c12 !important;
  font-weight: bold !important;
  opacity: 1 !important;
  background: rgba(243, 156, 18, 0.08) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
}

/* 修复变量名的颜色 */
.code-example .hljs-variable,
.code-example .token.variable,
.hljs-variable,
.token.variable {
  color: #e74c3c !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

/* 修复函数名的颜色 */
.code-example .hljs-function .hljs-title,
.code-example .token.function,
.hljs-function .hljs-title,
.token.function {
  color: #2980b9 !important;
  font-weight: bold !important;
  opacity: 1 !important;
  background: rgba(41, 128, 185, 0.08) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
}

/* 修复数字的颜色 */
.code-example .hljs-number,
.code-example .token.number,
.hljs-number,
.token.number {
  color: #d69e2e !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  background: rgba(214, 158, 46, 0.12) !important;
  padding: 1px 3px !important;
  border-radius: 3px !important;
}

/* 修复操作符的颜色 */
.code-example .hljs-operator,
.code-example .token.operator,
.hljs-operator,
.token.operator {
  color: #3498db !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

/* 修复标识符的颜色 */
.code-example .hljs-name,
.code-example .token.attr-name,
.hljs-name,
.token.attr-name {
  color: #e74c3c !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

/* Debug样式 - 可以临时启用来检查元素 */
/*
.code-example {
    border: 3px solid red !important;
}
.code-example pre {
    border: 2px solid blue !important;
}
.code-example code {
    border: 1px solid green !important;
}
*/