/* 高级编辑模式(Markdown)渲染出的正文样式，编辑器实时预览区和真正发布后的帖子/回复详情页
   共用同一份，保证"预览时看到什么样，发布后就是什么样"。
   代码块语法高亮颜色是 Pygments monokai 主题生成的(python -c "from pygments.formatters
   import HtmlFormatter; print(HtmlFormatter(style='monokai').get_style_defs('.codehilite'))")，
   以后想换配色主题，重新跑这行命令、把下面这段替换掉即可。 */

.md-content :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 800;
    color: #fff;
    margin: 0.9em 0 0.45em;
    line-height: 1.35;
}
.md-content h1:first-child,
.md-content h2:first-child,
.md-content h3:first-child { margin-top: 0; }
/* 标题样式跟随用户的 word模版.dotx 自定义设计(2026-07 第五十一轮，样式来源逐条对应)：
   H1~H3 = dotx heading 1~3 的"标题下方红色横线"(pBdr bottom: single, sz=18≈3px, #FF0000)；
   H4 = dotx heading 4 的"左侧蓝色竖条"(pBdr left: single, sz=24≈4px, #00B0F0, space=8)。
   字体保持项目的 Noto Sans SC——dotx 标题用仿宋，但仿宋是 Windows 系统字体，Linux 服务器
   和手机浏览器上不存在会静默回退导致样式走样，所以只迁移视觉结构(颜色/边框/间距)。 */
/* H1~H3底部红线粗细做了一个小梯度(2026-07)：以H1的3px为基准，H2/H3依次只收窄0.5px
   (不是砍半这种大幅度变化)，让标题层级在视觉上更有区分度，同时肉眼看不出突兀的跳变。 */
/* H1~H3底部红线改成"贴合文字宽度、且多出半个文字宽度的余量伸出去"，不再横向贯穿整行、
   标题字越多线越长(2026-07，用户纠正过一次：不是"红线只有文字宽度的一半"，而是"红线=
   文字整个宽度+额外多出来一半"，总共是文字宽度的150%，多出的部分从文字右端往右伸出)。
   直接用border-bottom做不到"只覆盖自身宽度的150%"这件事(border天然覆盖元素自身100%
   宽度，且没法比自身还宽)，改成两步——①display:block + width:fit-content让标题自己的
   盒子先收缩到文字实际渲染宽度(max-width:100%防止极端超长标题撑破容器)；②红线单独用
   ::after伪元素实现，宽度设成150%——因为①已经让标题盒子本身的宽度=文字宽度，这个150%
   就是"文字宽度本身+多出来的一半"，不是容器宽度的150%；标题字数变多时盒子跟着变宽，
   红线的150%也跟着等比变长，不需要额外写JS去监听文字长度。默认不设定位/居中，伪元素
   走正常块级流布局，天然从文字左端对齐开始、向右多伸出50%，符合"多余出来的部分在文字
   后面"这个方向。 */
.md-content :is(h1, h2, h3) { display: block; width: fit-content; max-width: 100%; }
.md-content :is(h1, h2, h3)::after {
    content: ""; display: block; width: 150%; background: #FF0000; margin-top: 0.12em;
}
.md-content h1 { font-size: 1.6em; }
.md-content h1::after { height: 3px; }
.md-content h2 { font-size: 1.35em; }
.md-content h2::after { height: 2.5px; }
.md-content h3 { font-size: 1.15em; }
.md-content h3::after { height: 2px; }
.md-content h4 { font-size: 1.05em; color: #A9B1D6; border-left: 4px solid #00B0F0; padding-left: 0.5em; }
.md-content p { margin: 0.6em 0; line-height: 1.75; }
.md-content ul, .md-content ol { margin: 0.6em 0; padding-left: 1.4em; color: #A9B1D6; }
.md-content li { margin: 0.25em 0; }
.md-content blockquote {
    margin: 0.8em 0; padding: 0.4em 1em; border-left: 3px solid #414868;
    color: #8188a8; background: rgba(65, 72, 104, 0.15); border-radius: 0 8px 8px 0;
}
.md-content hr { border: none; border-top: 1px solid #414868; margin: 1.2em 0; }
.md-content a { color: #00F2FF; text-decoration: underline; text-underline-offset: 2px; }
.md-content img { max-width: 100%; border-radius: 8px; margin: 0.4em 0; }
.md-content code:not(.codehilite code) {
    background: rgba(65, 72, 104, 0.35); color: #FF9D00;
    padding: 0.1em 0.4em; border-radius: 4px; font-size: 0.9em;
}
/* 代码块(```python等)：dotx"Intense Quote"深灰+蓝线装饰用户实测后不满意，撤回成简约
   深色面板，参考了现代文档站(Fern等)代码块的"干净、留白更宽松"观感做了一版视觉细节
   打磨(2026-07)——纯Pygments monokai配色搭配monokai自己的标准底色#272822(不是随手挑
   的颜色，是monokai主题作者设计token前景色时就配套的官方底色，换别的底色容易和某些
   token前景色对比度不够)；圆角从10px增到12px更柔和；内边距从12px 14px放宽到14px 18px
   (横向留白更宽松，读起来不局促)；边框从完全透明改成一圈极淡的白色描边(rgba 6%
   不透明度，只起"围出区块边界"的作用，不是彩色装饰线)。
   边框宽度/样式("1px三边+2px底边"这个不对称形状)保留、只是把透明色换成淡白色——这是
   刻意延续的：下面.codehilite.language-console那条规则只覆盖border-color，需要这里
   预先声明的border宽度/样式形状才有东西可"上色"，改变这个形状会连带让命令行块的边框
   变形(命令行块用户是满意的，这次改动不能波及它，只换了这里的颜色，形状分毫未动)。 */
.md-content .codehilite {
    background: #272822; border-radius: 12px; padding: 14px 18px;
    overflow-x: auto; margin: 0.8em 0; border: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 2px solid rgba(255, 255, 255, 0.06);
}
.md-content .codehilite pre { margin: 0; line-height: 1.5; }
/* "命令行"(```console)跟随 dotx 的 Quote 样式(2026-07 第五十一轮，用户测试后满意，
   未改动)：底纹 #012456(深蓝)、四边边框 #413D39(dotx pBdr 四边 single sz=8)、
   文字 #EEEDF0——深蓝底让它和普通代码块一眼区分开，更像一个独立的终端窗口。
   language-console 这个class是app.py里_LangTaggedHtmlFormatter额外打上去的
   (codehilite扩展默认不带语言信息)。 */
.md-content .codehilite.language-console {
    background: #012456; border-color: #413D39; color: #EEEDF0;
}
/* "小知识"(!!! tip，admonition)跟随 dotx 的 Note Heading 样式(2026-07 第五十一轮)：
   左右两侧红色点划线(dotx pBdr left/right: dotDotDash #FF0000——CSS没有原生dotDotDash，
   用最接近的dashed近似)+ 斜线条纹底纹(dotx shd thinDiagStripe，用repeating-linear-gradient
   实现；dotx是白纸上的浅灰纹，项目深色背景改用淡白纹)。标题红色呼应点划线。 */
.md-content .admonition {
    border: none;
    border-left: 2px dashed #FF0000;
    border-right: 2px dashed #FF0000;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 3px, transparent 3px 9px);
    border-radius: 8px; padding: 8px 10px; margin: 0.6em 0;
}
.md-content .admonition-title { font-weight: 700; color: #FF0000; margin: 0 0 2px; }
/* 小提示正文行距收紧(用户反馈：满意整体风格，但行距太宽、外框跟着显得太大)——只收紧
   admonition内部的正文段落，不动.md-content p的全局行距(1.75)，避免波及正文其它段落。 */
.md-content .admonition p:not(.admonition-title) { margin: 0.3em 0; line-height: 1.4; }
/* "选项解析"(def_list的dl/dt/dd)：dotx"annotation text"批注风(无底色+细左边框+dd斜体)
   用户实测后不满意，第五十一轮之后(2026-07)撤回成更早期的版本——和引用块(blockquote)
   同一家族的浅色调背景+左边框(同款rgba(65,72,104,0.15)底色+#414868左边框+右侧圆角)，
   视觉上和blockquote统一，不再是round51引入的"无底色批注"风格；dd不再斜体。 */
.md-content dl {
    margin: 0.8em 0; padding: 0.4em 1em;
    border-left: 3px solid #414868;
    background: rgba(65, 72, 104, 0.15);
    border-radius: 0 8px 8px 0;
    font-size: 0.92em;
}
.md-content dt { font-weight: 700; color: #fff; }
.md-content dd { margin: 0 0 0.6em 1.2em; color: #A9B1D6; }
.md-content dd:last-child { margin-bottom: 0; }
/* 第七十三轮：表格在窄屏（手机竖屏）会被长单元格撑破页面宽度。display:block+overflow-x:auto
   让过宽的表格在自身容器内横向滚动，不再顶破外层布局；窄表格 width:100% 行为不变。 */
.md-content table { border-collapse: collapse; margin: 0.8em 0; width: 100%; display: block; overflow-x: auto; }
.md-content th, .md-content td { border: 1px solid #414868; padding: 6px 10px; color: #A9B1D6; text-align: left; }
.md-content th { color: #fff; background: rgba(65, 72, 104, 0.25); }

/* ── Pygments monokai 代码语法高亮配色 ── */
.md-content .codehilite .hll { background-color: #49483e }
.md-content .codehilite { color: #F8F8F2 }
.md-content .codehilite .c { color: #959077 }
.md-content .codehilite .err { color: #ED007E; background-color: #1E0010 }
.md-content .codehilite .esc { color: #F8F8F2 }
.md-content .codehilite .g { color: #F8F8F2 }
.md-content .codehilite .k { color: #66D9EF }
.md-content .codehilite .l { color: #AE81FF }
.md-content .codehilite .n { color: #F8F8F2 }
.md-content .codehilite .o { color: #FF4689 }
.md-content .codehilite .x { color: #F8F8F2 }
.md-content .codehilite .p { color: #F8F8F2 }
.md-content .codehilite .ch { color: #959077 }
.md-content .codehilite .cm { color: #959077 }
.md-content .codehilite .cp { color: #959077 }
.md-content .codehilite .cpf { color: #959077 }
.md-content .codehilite .c1 { color: #959077 }
.md-content .codehilite .cs { color: #959077 }
.md-content .codehilite .gd { color: #FF4689 }
.md-content .codehilite .ge { color: #F8F8F2; font-style: italic }
.md-content .codehilite .ges { color: #F8F8F2; font-weight: bold; font-style: italic }
.md-content .codehilite .gr { color: #F8F8F2 }
.md-content .codehilite .gh { color: #F8F8F2 }
.md-content .codehilite .gi { color: #A6E22E }
.md-content .codehilite .go { color: #66D9EF }
.md-content .codehilite .gp { color: #FF4689; font-weight: bold }
.md-content .codehilite .gs { color: #F8F8F2; font-weight: bold }
.md-content .codehilite .gu { color: #959077 }
.md-content .codehilite .gt { color: #F8F8F2 }
.md-content .codehilite .kc { color: #66D9EF }
.md-content .codehilite .kd { color: #66D9EF }
.md-content .codehilite .kn { color: #FF4689 }
.md-content .codehilite .kp { color: #66D9EF }
.md-content .codehilite .kr { color: #66D9EF }
.md-content .codehilite .kt { color: #66D9EF }
.md-content .codehilite .ld { color: #E6DB74 }
.md-content .codehilite .m { color: #AE81FF }
.md-content .codehilite .s { color: #E6DB74 }
.md-content .codehilite .na { color: #A6E22E }
.md-content .codehilite .nb { color: #F8F8F2 }
.md-content .codehilite .nc { color: #A6E22E }
.md-content .codehilite .no { color: #66D9EF }
.md-content .codehilite .nd { color: #A6E22E }
.md-content .codehilite .ni { color: #F8F8F2 }
.md-content .codehilite .ne { color: #A6E22E }
.md-content .codehilite .nf { color: #A6E22E }
.md-content .codehilite .nl { color: #F8F8F2 }
.md-content .codehilite .nn { color: #F8F8F2 }
.md-content .codehilite .nx { color: #A6E22E }
.md-content .codehilite .py { color: #F8F8F2 }
.md-content .codehilite .nt { color: #FF4689 }
.md-content .codehilite .nv { color: #F8F8F2 }
.md-content .codehilite .ow { color: #FF4689 }
.md-content .codehilite .pm { color: #F8F8F2 }
.md-content .codehilite .w { color: #F8F8F2 }
.md-content .codehilite .mb { color: #AE81FF }
.md-content .codehilite .mf { color: #AE81FF }
.md-content .codehilite .mh { color: #AE81FF }
.md-content .codehilite .mi { color: #AE81FF }
.md-content .codehilite .mo { color: #AE81FF }
.md-content .codehilite .sa { color: #E6DB74 }
.md-content .codehilite .sb { color: #E6DB74 }
.md-content .codehilite .sc { color: #E6DB74 }
.md-content .codehilite .dl { color: #E6DB74 }
.md-content .codehilite .sd { color: #E6DB74 }
.md-content .codehilite .s2 { color: #E6DB74 }
.md-content .codehilite .se { color: #AE81FF }
.md-content .codehilite .sh { color: #E6DB74 }
.md-content .codehilite .si { color: #E6DB74 }
.md-content .codehilite .sx { color: #E6DB74 }
.md-content .codehilite .sr { color: #E6DB74 }
.md-content .codehilite .s1 { color: #E6DB74 }
.md-content .codehilite .ss { color: #E6DB74 }
.md-content .codehilite .bp { color: #F8F8F2 }
.md-content .codehilite .fm { color: #A6E22E }
.md-content .codehilite .vc { color: #F8F8F2 }
.md-content .codehilite .vg { color: #F8F8F2 }
.md-content .codehilite .vi { color: #F8F8F2 }
.md-content .codehilite .vm { color: #F8F8F2 }
.md-content .codehilite .il { color: #AE81FF }