/* ==========================================================================
   Doing++ · 最新资讯文章页样式（腾讯 Tencent 文章页风格）
   --------------------------------------------------------------------------
   作用域：仅 <body class="dx-nr"> 下生效，不影响其他页面。
   参考：https://www.tencent.com/zh-cn/tencents-quirky-accidental-mascot-turns-10/
   关键数值（2026-10-24 实测该页取得）：
     · 页面背景 #fff
     · 标签：12px / 蓝色文字 #0052D9 / 1px solid #D9D9D9 描边 / 圆角 200px / padding 6px 12px
     · 标题：46px / 600 / 行高 1.2 / #000
     · 日期：12px / 500 / #3A3A3A
     · 正文：21px / 500 / 行高 1.5 / #000，段距 24px
     · 小节标题 H2：38px / 600 / 行高 1.2 / #000，下边距 32px
     · 正文列宽 656px，居中
     · 正文距日期上留白 80px
   ========================================================================== */

/* ---------- 0. 阿里巴巴普惠体（自托管） ---------- */
/* 两套字重的加载策略不同，都在 header.php 里统一注入：
     · Regular(400)：fonts/puhuiti/puhuiti-regular.css，84 条 @font-face 按
       unicode-range 分片，浏览器只下当前页用到的 2~4 片
     · Light(300)：fonts/_subset_cache/light_v2.woff2，单文件子集，一次请求拿全

   ⚠️ 这里曾经有一条 `@import url("../fonts/puhuiti/result.css");`，
      但 @import 被写在了第 24 行 —— 前面已有注释和规则。
      CSS 规范要求 @import 必须位于样式表最前面（除了 @charset / @layer），
      否则整条被浏览器静默丢弃。结果就是：CSS 里写了 "55 Regular" 这个字体名，
      页面却从未注册过对应的 @font-face，所有 400 字重全部回退到
      PingFang SC / Microsoft YaHei，和正文的普惠体 Light 混排，
      看起来像"该细的没细、有些字变粗了"。
      现在改由 header.php 用 <link> 引入，位置可控，也不再占 @import 的位置。
   注意：每个字重必须声明准确 font-weight，否则浏览器会「合成加粗」。 */

/* ---------- 页面骨架：整页白底 ---------- */
body.dx-nr {
    background-color: #fff;
    font-family: "Alibaba PuHuiTi 3.0 55 Regular", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

body.dx-nr .dx-page {
    background: #fff;
}

body.dx-nr.dx-home {
    background-color: #fff;
}

.dx-nr-main {
    background: #fff;
    /* 底部不留内距：最后一个区块（面包屑）要直接贴住页脚顶边。
       评论开启时由 .dx-nr-comments 自己的 padding 补足底部留白。 */
    padding: 64px 24px 0;
    padding-top: calc(var(--dx-header-h) + 64px);
}

.dx-nr-article {
    max-width: 656px;
    margin: 0 auto;
}

/* ---------- 1. 标签（顶部第一个元素） ---------- */
.dx-nr-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 28px;
}

.dx-nr-tag,
.dx-nr-tags .tags {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #D9D9D9;
    border-radius: 200px;
    background: #fff;
    color: #0052D9;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: .25px;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s, background-color .2s, color .2s;
}

.dx-nr-tag:hover,
.dx-nr-tags .tags:hover {
    border-color: #0052D9;
    background: #F2F3FF;
    color: #0052D9;
}

.dx-nr-tags-label {
    font-size: 12px;
    color: rgba(0, 0, 0, .45);
    margin-right: 2px;
}

.dx-nr-tags-bottom {
    margin: 48px 0 0;
    padding-top: 24px;
    border-top: 1px solid #EFEFEF;
}

/* ---------- 2. 标题 ---------- */
.dx-nr-title {
    margin: 0 0 24px;
    font-size: 46px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.5px;
    color: #000;
    word-break: break-word;
}

.dx-nr-title .topflg,
.dx-nr-title .log-topflg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    font-size: 12px;
    font-weight: 400;
    padding: 3px 8px;
    border-radius: 4px;
    background: #0052D9;
    color: #fff;
}

/* ---------- 3. 发布时间 ---------- */
.dx-nr-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 40px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #3A3A3A;
}

.dx-nr-meta time {
    color: #3A3A3A;
}

.dx-nr-meta a {
    color: #3A3A3A;
    text-decoration: none;
}

.dx-nr-meta a:hover {
    color: #0052D9;
}

.dx-nr-meta-sep {
    color: #D9D9D9;
}

.dx-nr-meta-edit:empty {
    display: none;
}

/* 封面图（若模板设置开启了封面） */
.dx-nr-cover {
    margin: 0 0 40px;
    border-radius: 8px;
    overflow: hidden;
}

.dx-nr-cover img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- 4. 正文（对齐腾讯：21px / 500 / 1.5 / #000） ---------- */
/* 字体栈只把 Light 放在首位、不要再跟 Regular：
   两者并列时，浏览器会先按"字重最接近"去挑族，300 的元素挑到 Light，
   但 400 的元素可能挑到 Regular 而不是 Light —— 同一段落里字形就这样混了。
   正文既然定了 300，栈里就只留 Light；400 的强调由 4.9.1 单独指定 Regular。 */
.dx-nr-body {
    margin-top: 80px;
    font-family: "Alibaba PuHuiTi 3.0 45 Light", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    font-size: 21px;
    font-weight: 300;
    line-height: 1.5;
    color: #000;
    letter-spacing: 0;
    word-break: normal;
    overflow-wrap: break-word;
}

.dx-nr-body > *:first-child {
    margin-top: 0;
}

/* 正文段落：字号/字重/行高/颜色一律由模板接管（正文自带内联 font-size:16px;
   color:#333 会盖掉样式表，必须用 !important 才能对齐腾讯的 21px 观感），
   但**保留正文自带的 text-align**（图注居中依赖它） */
.dx-nr-body p {
    margin: 0 0 24px;
    font-family: "Alibaba PuHuiTi 3.0 45 Light", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    font-size: 21px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    color: #000 !important;
    letter-spacing: 0 !important;
}

/* 正文内可能残留的旧内联颜色（#333 / #0f1730 等），统一收归纯黑 */
.dx-nr-body p[style],
.dx-nr-body p[style] strong,
.dx-nr-body p[style] span {
    color: #000 !important;
}

/* 图注：正文里以「小字号 + 灰色 + 居中」写的说明文字（常见于图片下方），
   保留其小字与居中的语义，只把灰色映射成主题色。
   data-dxnr-cap 由 PHP 在输出前打标，比 style 子串匹配更可靠 */
.dx-nr-body p[data-dxnr-cap],
.dx-nr-body p[style*="8a8a8a"],
.dx-nr-body p[style*="999"],
.dx-nr-body p[style*="13px"] {
    margin: 8px 0 32px;
    font-family: "Alibaba PuHuiTi 3.0 45 Light", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.6 !important;
    color: rgba(0, 0, 0, .45) !important;
    text-align: center !important;
}

[data-theme="dark"] .dx-nr-body p[data-dxnr-cap],
[data-theme="dark"] .dx-nr-body p[style*="8a8a8a"],
[data-theme="dark"] .dx-nr-body p[style*="999"],
[data-theme="dark"] .dx-nr-body p[style*="13px"] {
    color: rgba(255, 255, 255, .5) !important;
}

/* 正文小节标题：腾讯 38px / 600 / 纯黑 / 无装饰线 */
.dx-nr-body h2 {
    margin: 56px 0 32px;
    padding: 0 !important;
    border: 0 !important;
    font-size: 38px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #000 !important;
    letter-spacing: 0;
    word-break: normal;
    overflow-wrap: break-word;
}

.dx-nr-body h2:first-child {
    margin-top: 0;
}

.dx-nr-body h3 {
    margin: 40px 0 16px;
    padding: 0 !important;
    border: 0 !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: #000 !important;
}

.dx-nr-body h4 {
    margin: 32px 0 12px;
    font-size: 21px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #000 !important;
}

.dx-nr-body a {
    color: #0052D9;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 82, 217, .3);
}

.dx-nr-body a:hover {
    border-bottom-color: #0052D9;
}

.dx-nr-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 40px auto;
    border-radius: 8px;
}

.dx-nr-body figure {
    margin: 40px 0;
}

.dx-nr-body figcaption,
.dx-nr-body .img-caption {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(0, 0, 0, .45);
    text-align: center;
}

.dx-nr-body blockquote {
    /* 视觉规则已统一挪到 4.9.4（灰底 + 深灰细线，去彩色），这里只留间距占位 */
    margin: 32px 0;
}

.dx-nr-body ul,
.dx-nr-body ol {
    margin: 0 0 24px;
    padding-left: 1.4em;
}

.dx-nr-body li {
    margin: 8px 0;
    font-size: 21px;
    font-weight: 300;
    line-height: 1.5;
}

.dx-nr-body pre {
    margin: 28px 0;
    padding: 18px 20px;
    border-radius: 8px;
    background: #F7F8FA;
    overflow-x: auto;
    line-height: 1.7;
}

.dx-nr-body pre code {
    padding: 0;
    background: transparent;
    color: inherit;
}

.dx-nr-body table {
    width: 100%;
    margin: 28px 0;
    border-collapse: collapse;
    font-size: 15px;
}

.dx-nr-body th,
.dx-nr-body td {
    padding: 10px 12px;
    border: 1px solid #EBEBEB;
    text-align: left;
}

.dx-nr-body th {
    background: #F7F8FA;
    font-weight: 400;
}

.dx-nr-body hr {
    margin: 40px 0;
    border: 0;
    border-top: 1px solid #EFEFEF;
}


/* ==========================================================================
   4.9 正文配色与字重「归一化」—— 彻底压掉文章自带的彩色与假粗体
   --------------------------------------------------------------------------
   背景：文章正文是用富文本编辑器粘进来的，元素上带大量内联 style，
        内联优先级高于任何选择器（除非用 !important）。结果：
          · <strong style="font-weight:700;color:#0f1f3d">  → 在 300 字重的正文里
            突然黑粗一块，而且字号还是 16px（比正文 21px 小 5px）
          · <th style="font-weight:700;color:#1a2b4c">       → 表头蓝黑粗
          · <blockquote style="background:#f4fbfb;border-left:4px solid #1bb9b0">
            → 青色底 + 青色竖线，整页唯一的高饱和色
          · 图注 <span style="color:#8a94a6">、段落 color:#333 等蓝灰系
   处理原则：
        1) 字重只看标签语义，不看内联值 —— 正文 300，强调 400，标题 400
        2) 颜色只允许黑 / 灰阶，一律 !important 覆盖
        3) 引用的视觉区分靠「左侧细线 + 灰底 + 斜体衰减」而不是颜色
   ========================================================================== */

/* ---------- 4.9.1 强调：400 而非 700 ---------- */
/* 为什么是 400 不是 300：全 300 会让强调完全消失。普惠体的 400(Regular) 与
   300(Light) 有清晰但不夸张的对比，正好是「该细的地方细、该醒目的地方醒目」。
   字号强制跟随正文（用 inherit），解决 16px 强插在 21px 段落里的跳变。

   ⚠️ 凡是 400 的元素都必须显式写上 Regular 字体族，哪怕看着"反正会继承"。
      正文栈首是 Light，而 Light 的 @font-face 只声明了 font-weight:300；
      一个 400 的元素继承到 Light 后，浏览器没有 400 字面，就会**合成加粗**
      （把 300 的字形整体描粗一圈）—— 粗是粗了，但轮廓是假的、边缘发糊，
      和旁边正常的 Regular 放在一起还是不齐。h2/h3/h4/th/li strong 都踩过这个。 */
.dx-nr-body strong,
.dx-nr-body b,
.dx-nr-body h2,
.dx-nr-body h3,
.dx-nr-body h4,
.dx-nr-body th,
.dx-nr-body li strong {
    font-family: "Alibaba PuHuiTi 3.0 55 Regular", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

.dx-nr-body strong,
.dx-nr-body b {
    font-weight: 400 !important;
    font-size: inherit !important;   /* 关键：不再被内联的 16px 拽小 */
    color: #111 !important;
}

/* ---------- 4.9.2 斜体 / 下划线 / 删除线 ---------- */
.dx-nr-body em,
.dx-nr-body i {
    font-style: italic;
    color: inherit;
}

.dx-nr-body u {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: inherit;
}

.dx-nr-body s,
.dx-nr-body del {
    color: rgba(0, 0, 0, .4) !important;
}

/* ---------- 4.9.3 行内标记（高亮 / 小字 / 代码） ---------- */
.dx-nr-body mark {
    background: #F2F2F2 !important;
    color: #111 !important;
    padding: 0 3px;
    border-radius: 2px;
}

/* 正文里的 <span> 只允许继承颜色；图注例外（见下方 4.9.6） */
.dx-nr-body span {
    color: inherit;
}

/* 行内代码：原来用 #C7254E 玫红，改成中性灰底黑字 */
.dx-nr-body code {
    padding: 2px 6px;
    border-radius: 4px;
    background: #F2F2F2 !important;
    color: #111 !important;
    font-size: .92em;
}

/* ---------- 4.9.4 引用：去掉青底青线，改灰阶 ---------- */
.dx-nr-body blockquote {
    margin: 32px 0;
    padding: 16px 22px;
    /* 左侧 3px 深灰细线 —— 唯一的轮廓，不用任何彩色 */
    border: 0 !important;
    border-left: 3px solid #D8D8D8 !important;
    border-radius: 0 4px 4px 0;
    /* 浅灰底：#F7F7F7，与表头底色同一档 */
    background: #F7F7F7 !important;
    font-size: 19px !important;
    font-weight: 300 !important;
    line-height: 1.7 !important;
    /* 引用整体降一档灰度，形成"引用感" */
    color: rgba(0, 0, 0, .72) !important;
}

/* 引用内部所有文字统一灰度，不再继承内联的 #333/#0f1f3d。
   ⚠️ 特异性坑（连踩两次，务必记牢）：
      特异性是 (ID数, 类/属性/伪类数, 元素数) 三位「逐位比较」，不是加总。
          `.dx-nr-body strong`            = (0, 2, 1)  ← 4.9.1，带 !important
          `.dx-nr-body blockquote strong` = (0, 1, 2)  ← 类数 1 < 2，输
      两条都 !important 时比的是特异性而非源顺序，后者永远输，改多少次都白改。

      第一次修错：想着「给 blockquote 加个属性选择器凑一个类」，写成
          `.dx-nr-body blockquote[class] strong`
      —— 结果完全无效，因为 Emlog 的引用元素只有内联 style，**没有 class 属性**，
      属性选择器匹配不到，整条规则等同不存在（调试时 CDP 的 matched rules 里
      根本看不到它，就是最直接的证据）。
      （换成 `blockquote[style]` 能匹配上，但绑死「引用必须写内联 style」，
        太脆，不采用。）

      正确做法：把同一个类名写两遍 —— `.dx-nr-body.dx-nr-body`。
      特异性按两个类计，得 (0,3,1)，稳压 4.9.1 的 (0,2,1)；
      且不依赖元素身上有任何额外属性，是这里唯一稳的写法。 */
.dx-nr-body.dx-nr-body blockquote *,
.dx-nr-body.dx-nr-body blockquote strong,
.dx-nr-body.dx-nr-body blockquote b,
.dx-nr-body.dx-nr-body blockquote span,
.dx-nr-body.dx-nr-body blockquote em,
.dx-nr-body.dx-nr-body blockquote a,
.dx-nr-body.dx-nr-body blockquote code {
    color: rgba(0, 0, 0, .72) !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* 引用内的段落：不要重复大段间距 */
.dx-nr-body blockquote p {
    margin: 0 0 12px !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

.dx-nr-body blockquote p:last-child {
    margin-bottom: 0 !important;
}

/* ---------- 4.9.5 表格：表头灰底黑字，边框中性 ---------- */
.dx-nr-body table {
    font-size: 15px;
}

/* 主题自带的 markdown.css 里有 `.markdown thead tr { background-color:
   var(--bodyBground) }`，而 --bodyBground 是淡蓝 #F0F4F8 —— 这是整页唯一
   残留的「彩色」，肉眼能看出表头那一条发青。它的特异性 (0,1,2) 不算高，
   但我们不能靠猜，直接给 tr 一句 !important 归零，让底色只由 th/td 决定。 */
.dx-nr-body tr,
.dx-nr-body thead tr,
.dx-nr-body tbody tr {
    background: transparent !important;
}

.dx-nr-body th,
.dx-nr-body td {
    /* 边框统一成中性灰，压掉内联的 #e3e8ef（带蓝调） */
    border: 1px solid #E8E8E8 !important;
    color: #111 !important;
    background-image: none !important;
}

.dx-nr-body th {
    /* 表头用底色 + 400 字重区分，而不是 700 重压 */
    background: #F5F5F5 !important;
    font-weight: 400 !important;
}

.dx-nr-body td {
    font-weight: 300 !important;
    background: transparent !important;
}

/* 表格里的强调跟着正文规则走，但颜色锁死纯黑 */
.dx-nr-body th strong,
.dx-nr-body td strong {
    color: #000 !important;
}

/* ---------- 4.9.6 图注：正文里「小字号 + 灰色」的说明文字 ---------- */
/* 兜住所有常见写法：13px / 12px / #8a94a6 / #999 / #8a8a8a */
.dx-nr-body span[style*="13px"],
.dx-nr-body span[style*="12px"],
.dx-nr-body span[style*="8a94a6"],
.dx-nr-body span[style*="8a8a8a"],
.dx-nr-body span[style*="999"],
.dx-nr-body em[style*="13px"] {
    display: inline-block;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.6 !important;
    color: rgba(0, 0, 0, .42) !important;
}

/* ---------- 4.9.7 分隔线 / 列表 ---------- */
.dx-nr-body hr {
    border: 0 !important;
    border-top: 1px solid #EAEAEA !important;
    margin: 40px 0;
}

.dx-nr-body li {
    font-size: 21px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    color: #000 !important;
}

.dx-nr-body li strong {
    font-weight: 400 !important;
    color: #111 !important;
}

/* ---------- 4.9.8 兜底：任何漏网的元素只许黑白灰 ---------- */
/* 用属性选择器抓「带 style 且写了 color」的所有正文元素。
   这是最后一道闸 —— 新增文章无论怎么粘，只要写了 color 就会被拉回灰阶
   （下面这些颜色值之外的自定义色不会被命中，所以只兜最常见的几种）。

   ⚠️ 必须排除引用内部（`:not(blockquote):not(blockquote *)`）。踩过一次：
      引用自身的 style 里写着 `color:#3c4a5e`，正好命中这里的属性选择器，
      而它 (0,2,0) 的特异性高于 4.9.4 的 `.dx-nr-body blockquote` (0,1,1)，
      两条都是 !important 时前者赢 —— 结果引用整体被染成 #111，
      跟正文一样黑，"引用感"全没了，而且引用里的 strong 也随之变黑。
      排除后：引用整体由 4.9.4 统一管，引用内的 strong/b 由 4.9.4 的 [class]
      版本管，两边都不再被这条兜底越权覆盖。 */
.dx-nr-body [style*="color:#0f1f3d"]:not(blockquote):not(blockquote *),
.dx-nr-body [style*="color:#1a2b4c"]:not(blockquote):not(blockquote *),
.dx-nr-body [style*="color:#3c4a5e"]:not(blockquote):not(blockquote *),
.dx-nr-body [style*="color:#333"]:not(blockquote):not(blockquote *),
.dx-nr-body [style*="color:#222"]:not(blockquote):not(blockquote *),
.dx-nr-body [style*="color:#1bb9b0"]:not(blockquote):not(blockquote *),
.dx-nr-body [style*="color:#0052D9"]:not(blockquote):not(blockquote *),
.dx-nr-body [style*="color:#0052d9"]:not(blockquote):not(blockquote *) {
    color: #111 !important;
}

.dx-nr-body [style*="background:#f4fbfb"],
.dx-nr-body [style*="background:#f5f7fa"],
.dx-nr-body [style*="background:#F5F7FA"] {
    background: #F7F7F7 !important;
}

/* 青绿色描边（原引用竖线）一律改中性灰 */
.dx-nr-body [style*="#1bb9b0"] {
    border-left-color: #D8D8D8 !important;
    border-top-color: #D8D8D8 !important;
    border-right-color: #D8D8D8 !important;
    border-bottom-color: #D8D8D8 !important;
}

/* ---------- 5.3 相关阅读 / 更多栏目（通栏灰底，参考腾讯 section-news） ---------- */
.dx-nr-section {
    width: 100%;
    background: #F7F7F7;
}

.dx-nr-section-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 64px 24px;
}

/* 相关阅读：撑出正文列宽，形成「通栏分区」的视觉节奏
   ⚠️ 手机上 .dx-nr-main 有 20px 左内边距，负边距会把区块拉到 -20px 造成标题被裁，
      所以小屏改用普通块（见 @media），不依赖 50vw 计算。 */
.dx-nr-related {
    margin: 72px calc(50% - 50vw) 0;
    width: 100vw;
}

.dx-nr-more {
    margin: 0 calc(50% - 50vw);
    background: #fff;
    border-top: 1px solid #EFEFEF;
}

.dx-nr-more .dx-nr-section-inner {
    padding: 40px 24px 8px;
}

.dx-nr-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 32px;
}

.dx-nr-section-title {
    margin: 0;
    font-size: 38px;
    font-weight: 400;
    line-height: 1.2;
    color: #000;
}

.dx-nr-section-title--sm {
    font-size: 20px;
    margin-bottom: 20px;
}

.dx-nr-see-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 400;
    color: #0052D9;
    text-decoration: none;
}

.dx-nr-see-all:hover {
    color: #366EF4;
}

.dx-nr-arrow {
    display: inline-block;
    transition: transform .2s;
}

.dx-nr-see-all:hover .dx-nr-arrow,
.dx-nr-chip:hover .dx-nr-arrow {
    transform: translateX(3px);
}

.dx-nr-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* 卡片数少于 3 时，卡片不拉伸，避免「两张卡撑满三列」的怪异比例 */
.dx-nr-cards:has(.dx-nr-card:last-child:nth-child(1)) {
    grid-template-columns: minmax(0, 1fr) 2fr 0;
}

.dx-nr-cards:has(.dx-nr-card:last-child:nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 360px));
    justify-content: start;
}

.dx-nr-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.dx-nr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .09);
}

.dx-nr-card-media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #EDEEF0;
}

.dx-nr-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
    transition: transform .4s ease;
}

.dx-nr-card:hover .dx-nr-card-media img {
    transform: scale(1.04);
}

/* 无封面的文章：用斜纹占位，避免出现空白方块 */
.dx-nr-card-media--text {
    background: repeating-linear-gradient(45deg, #EEF0F3, #EEF0F3 10px, #F6F7F9 10px, #F6F7F9 20px);
}

.dx-nr-card-body {
    display: block;
    padding: 20px 20px 24px;
}

.dx-nr-card-title {
    /* 最多 3 行，超出省略 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: #000;
}

.dx-nr-card-date {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    color: rgba(0, 0, 0, .45);
}

/* 更多栏目：胶囊链接 */
.dx-nr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dx-nr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid #D9D9D9;
    border-radius: 200px;
    background: #fff;
    font-size: 14px;
    color: #1a1a1a;
    text-decoration: none;
    transition: border-color .2s, color .2s;
}

.dx-nr-chip:hover {
    border-color: #0052D9;
    color: #0052D9;
}

/* ---------- 5.4 评论 ---------- */
.dx-nr-comments {
    padding: 8px 0 96px;
}

.dx-nr-comments .dx-nr-section-inner {
    max-width: 720px;
    padding: 24px 0 0;
    border-top: 1px solid #EFEFEF;
}

/* ---------- 5.3.5 面包屑（对齐腾讯 #breadcrumbs） ----------
   ① 分隔符是「圆形描边 + 内嵌箭头」的图标，不是 » 字符
   ② 上方一条线（本区块 border-top），下方一条线由页脚 .dx-footer 的 border-top 提供
      —— 所以这里不画 border-bottom，否则会和页脚线叠成双线
   ③ 与上方「更多栏目」之间留一块空白，高度 = 面包屑两线之间的高度
      （32 + 24 + 32 = 88px，用 --dx-nr-bc-h 统一表达，改 padding/行高时自动跟随）
   ④ 本区块不留底边距，让分隔线紧贴页脚顶边 */

/* 面包屑「两线之间」的高度：上下 padding + 一行文字行高
   —— 同时给 .dx-page，让首页复用同一条面包屑时拿到同样的空白高度 */
.dx-nr-main,
.dx-page {
    --dx-nr-bc-h: calc(32px + 24px + 32px);
}

.dx-nr-breadcrumb {
    padding: 32px 24px;
    margin: var(--dx-nr-bc-h) 0 0;
    border-top: 1px solid #EBEBEB;
}

.dx-nr-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 1352px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    font-size: 16px;
    line-height: 1.5;
    color: #3A3A3A;
}

.dx-nr-breadcrumb-item {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dx-nr-breadcrumb-item::before {
    content: none;
}

.dx-nr-breadcrumb-item a {
    color: #3A3A3A;
    text-decoration: none;
    transition: color .2s;
}

.dx-nr-breadcrumb-item a:hover {
    color: #0052D9;
    text-decoration: underline;
}

.dx-nr-breadcrumb-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    /* 圆形与 16px 中文的视觉重心：略微下移 1px，避免看着偏高 */
    position: relative;
    top: 1px;
    /* 分隔图标用品牌蓝，与「首页」链接的 hover 同色，作为整行的点睛色
       描边线细，不降透明度，保持 #0052D9 本身即可清晰辨认 */
    color: #0052D9;
    opacity: 1;
}

.dx-nr-breadcrumb-sep svg {
    display: block;
    width: 18px;
    height: 18px;
    overflow: visible;
}

.dx-nr-breadcrumb-current {
    display: block;
    color: #3A3A3A;
    min-width: 0;
    max-width: 62ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- 6. 手机端 ---------- */
@media (max-width: 767px) {
    /* 右侧原本留 64px 避开固定悬浮工具条（.side-toolbar，right:20px / 宽 40px）。
       需求「手机上不必预留，按钮可以盖在文字上」后改为左右对称 20px，
       正文可用宽度从 307px 回到 353px。
       代价：滚到下 1/3 时悬浮按钮会盖住右下角一小块文字，读不下去时
       上下滑一下即可（按钮只有 40px 宽，且在底部 80px 以上区域）。 */
    .dx-nr-main {
        padding: 32px 20px 0;
        padding-top: calc(var(--dx-header-h) + 32px);
    }

    .dx-nr-tags {
        margin-bottom: 20px;
    }

    .dx-nr-title {
        font-size: 28px;
        line-height: 1.3;
        letter-spacing: 0;
        margin-bottom: 16px;
    }

    .dx-nr-meta {
        margin-bottom: 28px;
        font-size: 12px;
    }

    .dx-nr-body {
        margin-top: 32px;
        font-size: 17px;
        line-height: 1.75;
    }

    .dx-nr-body p {
        margin-bottom: 20px;
        font-size: 17px !important;
        line-height: 1.75 !important;
    }

    /* 手机上图注保持小字，不被上面的 17px 拉大 */
    .dx-nr-body p[data-dxnr-cap],
    .dx-nr-body p[style*="8a8a8a"],
    .dx-nr-body p[style*="999"],
    .dx-nr-body p[style*="13px"] {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    .dx-nr-body h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin: 36px 0 16px;
    }

    .dx-nr-body h3 {
        font-size: 19px !important;
        margin: 28px 0 12px;
    }

    .dx-nr-body h4 {
        font-size: 17px !important;
    }

    .dx-nr-body blockquote,
    .dx-nr-body li {
        font-size: 17px;
        line-height: 1.75;
    }

    .dx-nr-body img {
        margin: 24px auto;
        border-radius: 6px;
    }

    .dx-nr-body figure {
        margin: 32px 0;
    }

    /* AI 内容说明：手机上收紧留白 */
    .dx-nr-note {
        margin-top: 32px;
        padding: 18px 16px;
        border-radius: 8px;
    }

    .dx-nr-note-list {
        font-size: 12px;
        line-height: 1.85;
    }

    /* 相关阅读 / 更多栏目
       小屏不做通栏拉伸：外层已有 20px 内边距，再用 50vw 负边距会把标题顶出屏幕。
       这里改用「负内边距抵消」，让灰底铺满屏宽但内容仍从 20px 起。
       左右外层内距现在都是 20px，所以负边距也必须左右对称 -20px
       （原先右侧写 -64px 是为了抵消当时的 64px 避让，现在会直接把内容拉出屏幕）。 */
    .dx-nr-related {
        margin: 48px -20px 0 -20px;
        width: auto;
    }

    .dx-nr-more {
        margin: 0 -20px 0 -20px;
    }

    .dx-nr-section-inner {
        padding: 40px 20px;
    }

    .dx-nr-more .dx-nr-section-inner {
        padding: 32px 20px 8px;
    }

    /* 手机上相关阅读本来就是单列，取消「少于3张」的特殊规则 */
    .dx-nr-cards:has(.dx-nr-card:last-child:nth-child(2)),
    .dx-nr-cards:has(.dx-nr-card:last-child:nth-child(1)) {
        grid-template-columns: 1fr;
    }

    .dx-nr-section-head {
        margin-bottom: 20px;
    }

    .dx-nr-section-title {
        font-size: 24px;
    }

    .dx-nr-section-title--sm {
        font-size: 17px;
        margin-bottom: 14px;
    }

    .dx-nr-see-all {
        font-size: 13px;
    }

    /* 手机端：卡片改为横向列表，缩略图在左 */
    .dx-nr-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dx-nr-card {
        flex-direction: row;
        align-items: stretch;
        border-radius: 8px;
        background: #fff;
        padding: 10px;
        gap: 12px;
    }

    .dx-nr-card:hover {
        transform: none;
        box-shadow: none;
    }

    .dx-nr-card-media {
        flex: 0 0 96px;
        width: 96px;
        aspect-ratio: 1 / 1;
        border-radius: 6px;
    }

    .dx-nr-card:hover .dx-nr-card-media img {
        transform: none;
    }

    .dx-nr-card-body {
        padding: 2px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .dx-nr-card-title {
        font-size: 15px;
        line-height: 1.5;
        -webkit-line-clamp: 2;
    }

    .dx-nr-card-date {
        margin-top: 8px;
        font-size: 12px;
    }

    .dx-nr-chip {
        padding: 8px 14px;
        font-size: 13px;
    }

    .dx-nr-comments {
        padding: 0 20px 64px;
    }

    .dx-nr-comments .dx-nr-section-inner {
        padding-top: 32px;
    }

    /* 面包屑：小屏收窄内距与字号，避免标题被挤压换行 */
    .dx-nr-main,
    .dx-page {
        --dx-nr-bc-h: calc(20px + 21px + 20px);
    }

    /* 文字内距 20px，线由 ::before 画，左右同 20px 与页脚线终点对齐。
       右侧原为 64px（避让悬浮工具条），按「不必预留」要求改为 20px。 */
    .dx-nr-breadcrumb {
        padding: 20px;
        position: relative;
        border-top: 0;
    }

    .dx-nr-breadcrumb::before {
        content: "";
        position: absolute;
        top: 0;
        left: 20px;
        right: 20px;
        height: 1px;
        background: #EBEBEB;
        pointer-events: none;
    }

    /* 首页沿用同一条内缩线：页脚线在 900px 以下也是 left:20px / right:20px */
    [data-theme="dark"] .dx-nr-breadcrumb::before {
        background: rgba(255, 255, 255, .1);
    }

    .dx-nr-breadcrumb-list {
        gap: 6px;
        font-size: 14px;
        flex-wrap: nowrap;
    }

    .dx-nr-breadcrumb-item {
        gap: 6px;
        flex: 0 1 auto;
        min-width: 0;
    }

    /* 标题项允许收缩，否则「» 标题」会被挤到第二行 */
    .dx-nr-breadcrumb-item:last-child {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .dx-nr-breadcrumb-sep,
    .dx-nr-breadcrumb-sep svg {
        width: 16px;
        height: 16px;
    }
}

/* ---------- 7. 深色模式（沿用站点主题变量） ---------- */
[data-theme="dark"] body.dx-nr,
[data-theme="dark"] body.dx-nr .dx-page,
[data-theme="dark"] .dx-nr-main {
    background: #171923;
}

[data-theme="dark"] .dx-nr-title,
[data-theme="dark"] .dx-nr-body,
[data-theme="dark"] .dx-nr-body h2,
[data-theme="dark"] .dx-nr-body h3,
[data-theme="dark"] .dx-nr-body h4 {
    color: rgba(255, 255, 255, .92);
}

[data-theme="dark"] .dx-nr-meta,
[data-theme="dark"] .dx-nr-meta a,
[data-theme="dark"] .dx-nr-meta time {
    color: rgba(255, 255, 255, .65);
}

[data-theme="dark"] .dx-nr-tag,
[data-theme="dark"] .dx-nr-tags .tags {
    background: transparent;
    border-color: rgba(255, 255, 255, .2);
    color: #6FA8FF;
}

[data-theme="dark"] .dx-nr-tag:hover,
[data-theme="dark"] .dx-nr-tags .tags:hover {
    border-color: #6FA8FF;
    background: rgba(0, 82, 217, .18);
    color: #6FA8FF;
}

[data-theme="dark"] .dx-nr-tags-bottom,
[data-theme="dark"] .dx-nr-comments {
    border-top-color: rgba(255, 255, 255, .1);
}

[data-theme="dark"] .dx-nr-breadcrumb {
    border-top-color: rgba(255, 255, 255, .1);
}

[data-theme="dark"] .dx-nr-breadcrumb-list,
[data-theme="dark"] .dx-nr-breadcrumb-item a,
[data-theme="dark"] .dx-nr-breadcrumb-current {
    color: rgba(255, 255, 255, .65);
}

/* 分隔图标在深色下仍用蓝，只是提亮一档，保证在深底上有足够对比 */
[data-theme="dark"] .dx-nr-breadcrumb-sep {
    color: #6FA8FF;
}

[data-theme="dark"] .dx-nr-breadcrumb-item a:hover {
    color: #6FA8FF;
}

[data-theme="dark"] .dx-nr-body code {
    background: #263041 !important;
    color: rgba(255, 255, 255, .9) !important;
}

[data-theme="dark"] .dx-nr-body pre,
[data-theme="dark"] .dx-nr-body th {
    background: #202734 !important;
}

/* 深色下同样要关掉 `.markdown thead tr` 的 var(--bodyBground)，
   否则表头行的淡蓝底会在深色页面里透出一层偏冷的色块。 */
[data-theme="dark"] .dx-nr-body tr,
[data-theme="dark"] .dx-nr-body thead tr,
[data-theme="dark"] .dx-nr-body tbody tr {
    background: transparent !important;
}

[data-theme="dark"] .dx-nr-body th,
[data-theme="dark"] .dx-nr-body td {
    border-color: rgba(255, 255, 255, .12) !important;
}

/* 引用：深色下同样是灰底 + 浅灰细线，不用任何彩色 */
[data-theme="dark"] .dx-nr-body blockquote {
    background: #1e2430 !important;
    border-left-color: rgba(255, 255, 255, .18) !important;
    color: rgba(255, 255, 255, .72) !important;
}

/* 引用内文字统一 72% 白。
   特异性必须算准，否则深色下引用里的强调会变成黑字（黑底黑字 = 看不见）：
     亮色那条 `.dx-nr-body.dx-nr-body blockquote strong`        = (0,3,1)
     深色若写 `[data-theme="dark"] .dx-nr-body blockquote strong` = (0,3,1)
     —— 两者打平，而亮色那条在源顺序上更靠后，会赢，于是深色里 strong 拿到
        rgba(0,0,0,.72)。所以这里再叠一个类，写成 `.dx-nr-body.dx-nr-body`
        加 `[data-theme="dark"]`，得 (0,4,1)，稳稳压过亮色版。 */
[data-theme="dark"] .dx-nr-body.dx-nr-body blockquote *,
[data-theme="dark"] .dx-nr-body.dx-nr-body blockquote strong,
[data-theme="dark"] .dx-nr-body.dx-nr-body blockquote b,
[data-theme="dark"] .dx-nr-body.dx-nr-body blockquote span,
[data-theme="dark"] .dx-nr-body.dx-nr-body blockquote em,
[data-theme="dark"] .dx-nr-body.dx-nr-body blockquote a,
[data-theme="dark"] .dx-nr-body.dx-nr-body blockquote code {
    color: rgba(255, 255, 255, .72) !important;
    font-weight: inherit !important;
}

/* 强调：深色下用纯白提亮，而不是加粗 */
[data-theme="dark"] .dx-nr-body strong,
[data-theme="dark"] .dx-nr-body b {
    color: #fff !important;
    font-weight: 400 !important;
}

[data-theme="dark"] .dx-nr-body mark {
    background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
}

[data-theme="dark"] .dx-nr-body hr {
    border-top-color: rgba(255, 255, 255, .1) !important;
}

[data-theme="dark"] .dx-nr-body span[style*="13px"],
[data-theme="dark"] .dx-nr-body span[style*="12px"],
[data-theme="dark"] .dx-nr-body span[style*="8a94a6"],
[data-theme="dark"] .dx-nr-body span[style*="8a8a8a"],
[data-theme="dark"] .dx-nr-body span[style*="999"] {
    color: rgba(255, 255, 255, .42) !important;
}

[data-theme="dark"] .dx-nr-note,
[data-theme="dark"] .dx-nr-section {
    background: #1e2430;
}

[data-theme="dark"] .dx-nr-more {
    background: #171923;
    border-top-color: rgba(255, 255, 255, .1);
}

[data-theme="dark"] .dx-nr-note-title,
[data-theme="dark"] .dx-nr-section-title,
[data-theme="dark"] .dx-nr-card-title,
[data-theme="dark"] .dx-nr-chip {
    color: rgba(255, 255, 255, .92);
}

[data-theme="dark"] .dx-nr-note-list,
[data-theme="dark"] .dx-nr-card-date {
    color: rgba(255, 255, 255, .55);
}

[data-theme="dark"] .dx-nr-card {
    background: #1a202c;
}

[data-theme="dark"] .dx-nr-card-media--text {
    background: repeating-linear-gradient(45deg, #232a37, #232a37 10px, #1c222d, #1c222d 20px);
}

[data-theme="dark"] .dx-nr-chip {
    background: transparent;
    border-color: rgba(255, 255, 255, .2);
}

[data-theme="dark"] .dx-nr-comments .dx-nr-section-inner {
    border-top-color: rgba(255, 255, 255, .1);
}

/* 正文里历史内联样式常把文字写成 #333/#000，深色模式下会「深字配深底」看不清。
   这里只提升亮度，不改字号与对齐（图注等语义由上方规则单独处理）。 */
[data-theme="dark"] .dx-nr-body p,
[data-theme="dark"] .dx-nr-body span,
[data-theme="dark"] .dx-nr-body strong,
[data-theme="dark"] .dx-nr-body li,
[data-theme="dark"] .dx-nr-body td {
    color: rgba(255, 255, 255, .86) !important;
}

[data-theme="dark"] .dx-nr-body h1,
[data-theme="dark"] .dx-nr-body h2,
[data-theme="dark"] .dx-nr-body h3,
[data-theme="dark"] .dx-nr-body h4 {
    color: rgba(255, 255, 255, .95) !important;
}

/* 深色下正文里的浅灰底块（引用/提示块）也要跟着变暗 */
[data-theme="dark"] .dx-nr-body div[style*="fafafa"],
[data-theme="dark"] .dx-nr-body div[style*="F7F7F7"],
[data-theme="dark"] .dx-nr-body div[style*="f5f5f5"] {
    background: #1e2430 !important;
    border-color: rgba(255, 255, 255, .1) !important;
}