/* ========================================
   Markdown 渲染区域专用样式
   针对 #md-container 和 .detail_content 容器内的 Markdown HTML
   ======================================== */

/* ==================== 页眉水印（验证CSS是否生效） ==================== */
#md-container::before,
.detail_content::before {
  content: "论文解读来自 frowang.com";
  display: block;
  text-align: center;
  font-size: 14px;
  color: #999;
  padding: 10px 0;
  margin-bottom: 20px;
  border-bottom: 1px dashed #ddd;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  letter-spacing: 2px;
  background: linear-gradient(to right, transparent, #f8f9fa, transparent);
}

/* ==================== P0：核心样式（必须） ==================== */

/* 1. 恢复列表样式（解决全局重置的问题） */
#md-container ul,
.detail_content ul {
  list-style: disc !important;        /* 实心圆点 */
  margin-left: 2em !important;
  margin-bottom: 1em !important;
  padding-left: 1.5em !important;
}

#md-container ol,
.detail_content ol {
  list-style: decimal !important;     /* 数字序号 */
  margin-left: 2em !important;
  margin-bottom: 1em !important;
  padding-left: 1.5em !important;
}

#md-container li,
.detail_content li {
  list-style: inherit !important;  /* 🔥 关键修复：继承父元素的 list-style */
  margin-bottom: 0.5em !important;
  line-height: 1.8;
  color: #333;
}

/* 嵌套列表样式 */
#md-container ul ul,
.detail_content ul ul {
  list-style: circle !important;      /* 空心圆点 */
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
}

#md-container ul ul ul,
.detail_content ul ul ul {
  list-style: square !important;      /* 方块 */
}

#md-container ol ol,
.detail_content ol ol {
  list-style: lower-alpha !important; /* 小写字母 a, b, c */
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
}

#md-container ol ol ol,
.detail_content ol ol ol {
  list-style: lower-roman !important; /* 小写罗马数字 i, ii, iii */
}

/* 2. 标题层级样式 */
#md-container h1,
.detail_content h1 {
  font-size: 2em;
  font-weight: 700;
  margin: 1.5em 0 0.8em;
  padding-bottom: 0.3em;
  border-bottom: 2px solid #eaecef;
  color: #24292e;
  line-height: 1.3;
}

#md-container h2,
.detail_content h2 {
  font-size: 1.6em;
  font-weight: 600;
  margin: 1.2em 0 0.6em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #eaecef;
  color: #24292e;
  line-height: 1.3;
}

#md-container h3,
.detail_content h3 {
  font-size: 1.3em;
  font-weight: 600;
  margin: 1em 0 0.5em;
  color: #24292e;
  line-height: 1.3;
}

#md-container h4,
.detail_content h4 {
  font-size: 1.15em;
  font-weight: 600;
  margin: 0.9em 0 0.4em;
  color: #24292e;
  line-height: 1.3;
}

#md-container h5,
.detail_content h5 {
  font-size: 1em;
  font-weight: 600;
  margin: 0.8em 0 0.3em;
  color: #24292e;
  line-height: 1.3;
}

#md-container h6,
.detail_content h6 {
  font-size: 0.95em;
  font-weight: 600;
  margin: 0.7em 0 0.3em;
  color: #6a737d;
  line-height: 1.3;
}

/* 3. 段落与基础文本 */
#md-container,
.detail_content {
  line-height: 1.8;
  color: #333;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Microsoft YaHei", sans-serif;
  word-wrap: break-word;
}

#md-container p,
.detail_content p {
  margin-bottom: 1em;
  line-height: 1.8;
  color: #333;
  font-size: 16px;
}

/* ==================== P1：重要增强样式 ==================== */

/* 4. 代码块样式 */
/* 行内代码 */
#md-container code,
.detail_content code {
  background-color: #f6f8fa;
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  border-radius: 3px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, "Courier New", monospace;
  color: #e83e8c;
  border: 1px solid #e1e4e8;
}

/* 代码块 */
#md-container pre,
.detail_content pre {
  background-color: #f6f8fa;
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  border-radius: 6px;
  margin-bottom: 1em;
  border: 1px solid #e1e4e8;
}

#md-container pre code,
.detail_content pre code {
  background-color: transparent;
  padding: 0;
  color: #24292e;
  border: none;
  font-size: 100%;
}

/* 5. 引用块样式 */
#md-container blockquote,
.detail_content blockquote {
  padding: 0.5em 1em;
  color: #6a737d;
  border-left: 4px solid #dfe2e5;
  margin: 1em 0;
  background-color: #f6f8fa;
  border-radius: 0 3px 3px 0;
}

#md-container blockquote > :first-child,
.detail_content blockquote > :first-child {
  margin-top: 0;
}

#md-container blockquote > :last-child,
.detail_content blockquote > :last-child {
  margin-bottom: 0;
}

/* 6. 表格样式 */
#md-container table,
.detail_content table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin: 1em 0;
  overflow: auto;
  display: block;
}

#md-container table th,
.detail_content table th {
  font-weight: 600;
  background-color: #f6f8fa;
  padding: 10px 13px;
  border: 1px solid #dfe2e5;
  text-align: left;
  color: #24292e;
}

#md-container table td,
.detail_content table td {
  padding: 10px 13px;
  border: 1px solid #dfe2e5;
  color: #333;
}

#md-container table tr,
.detail_content table tr {
  background-color: #ffffff;
  border-top: 1px solid #c6cbd1;
}

#md-container table tr:nth-child(2n),
.detail_content table tr:nth-child(2n) {
  background-color: #f6f8fa;
}

#md-container table tbody tr:hover,
.detail_content table tbody tr:hover {
  background-color: #f0f0f0;
  transition: background-color 0.2s;
}

/* 7. 链接样式 */
#md-container a,
.detail_content a {
  color: #0366d6;
  text-decoration: none;
  transition: color 0.2s, text-decoration 0.2s;
}

#md-container a:hover,
.detail_content a:hover {
  color: #0056b3;
  text-decoration: underline;
}

#md-container a:visited,
.detail_content a:visited {
  color: #6f42c1;
}

/* ==================== P2：锦上添花 ==================== */

/* 8. 数学公式样式优化 */
#md-container .katex,
.detail_content .katex {
  font-size: 1.1em;
  color: #24292e;
}

#md-container .katex-display,
.detail_content .katex-display {
  margin: 1.5em 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.5em 0;
}

/* 数学公式容器滚动条美化 */
#md-container .katex-display::-webkit-scrollbar,
.detail_content .katex-display::-webkit-scrollbar {
  height: 6px;
}

#md-container .katex-display::-webkit-scrollbar-thumb,
.detail_content .katex-display::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3px;
}

#md-container .katex-display::-webkit-scrollbar-track,
.detail_content .katex-display::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 9. 水平分割线 */
#md-container hr,
.detail_content hr {
  height: 2px;
  padding: 0;
  margin: 24px 0;
  background-color: #e1e4e8;
  border: 0;
}

/* 10. 强调文本样式 */
#md-container strong,
.detail_content strong {
  font-weight: 600;
  color: #24292e;
}

#md-container em,
.detail_content em {
  font-style: italic;
  color: #24292e;
}

#md-container del,
.detail_content del {
  text-decoration: line-through;
  color: #6a737d;
}

/* 11. 图片样式 */
#md-container img,
.detail_content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1em 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 12. 任务列表样式 */
#md-container input[type="checkbox"],
.detail_content input[type="checkbox"] {
  margin-right: 0.5em;
  vertical-align: middle;
}

/* 13. 定义列表样式 */
#md-container dl,
.detail_content dl {
  padding: 0;
  margin-bottom: 1em;
}

#md-container dt,
.detail_content dt {
  font-weight: 600;
  font-style: italic;
  margin-top: 1em;
  padding: 0;
}

#md-container dd,
.detail_content dd {
  margin-left: 2em;
  padding: 0;
  margin-bottom: 1em;
}

/* 14. 上标和下标 */
#md-container sup,
.detail_content sup {
  font-size: 0.75em;
  vertical-align: super;
}

#md-container sub,
.detail_content sub {
  font-size: 0.75em;
  vertical-align: sub;
}

/* 15. 键盘按键样式 */
#md-container kbd,
.detail_content kbd {
  display: inline-block;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 10px;
  color: #444d56;
  vertical-align: middle;
  background-color: #fafbfc;
  border: solid 1px #c6cbd1;
  border-bottom-color: #959da5;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #959da5;
}

/* 16. 脚注样式 */
#md-container .footnotes,
.detail_content .footnotes {
  font-size: 0.9em;
  color: #6a737d;
  border-top: 1px solid #e1e4e8;
  margin-top: 2em;
  padding-top: 1em;
}

/* 17. 高亮标记 */
#md-container mark,
.detail_content mark {
  background-color: #fff3cd;
  padding: 0.1em 0.2em;
  border-radius: 2px;
}

/* 18. 首字母下沉效果（可选，用于文章开头） */
#md-container > p:first-of-type::first-letter {
  /* 取消注释以启用 */
  /* font-size: 3em;
  font-weight: bold;
  float: left;
  line-height: 1;
  margin-right: 0.1em;
  color: #0366d6; */
}

/* ==================== 响应式调整 ==================== */
@media (max-width: 768px) {
  #md-container {
    font-size: 14px;
  }
  
  #md-container h1 {
    font-size: 1.6em;
  }
  
  #md-container h2 {
    font-size: 1.4em;
  }
  
  #md-container h3 {
    font-size: 1.2em;
  }
  
  #md-container table {
    font-size: 0.9em;
  }
}

/* ==================== 打印样式 ==================== */
@media print {
  #md-container {
    color: #000;
  }
  
  #md-container a {
    color: #000;
    text-decoration: underline;
  }
  
  #md-container pre,
  #md-container blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
}