/* =========================================================
   全局基座：毛玻璃卡片 / 三层背景 / 导航配色（补充 2）/ 页脚与详情页背景（补充 3）/ 高优先级覆盖（补充 4）/ 深色模式修复（补充 5）。
   （原 custom.css 拆分；"补充 N" 是历史编号，站内注释按编号引用，不要重排）
   ========================================================= */

/* =========================================================
   Butterfly 主题自定义美化（依据 luotian.cyou 教程）
   ========================================================= */

/* ---------- 1. 全局毛玻璃样式 ---------- */
/* 明亮模式 */
#body-wrap #recent-posts > .recent-post-item,
#body-wrap .recent-post-item,
#body-wrap #aside-content .card-widget,
#body-wrap .layout > div:first-child:not(.recent-posts),
#body-wrap #nav .menus_items .menus_item .menus_item_child,
#body-wrap #pagination .page-number:not(.current),
#body-wrap #pagination .extend,
#page-header #post-info {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 16px -4px rgba(138, 138, 138, 0.15);
    /* width/margin 必须保留：单双栏切换时正文 74%↔80% 与 margin-left 的过渡依赖它，
       缺了会导致文章页等页面切换时正文瞬跳（首页因 :not(.recent-posts) 不受影响） */
    transition: width 0.3s ease, margin 0.3s ease,
                background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}
#body-wrap #pagination .page-number:not(.current):hover,
#body-wrap #pagination .extend:hover {
    background: #ff7142d2;
    border-color: #ff7142d2;
    color: #fff;
}
/* 夜间模式 */
html[data-theme="dark"] #body-wrap #recent-posts > .recent-post-item,
html[data-theme="dark"] #body-wrap .recent-post-item,
html[data-theme="dark"] #body-wrap #aside-content .card-widget,
html[data-theme="dark"] #body-wrap .layout > div:first-child:not(.recent-posts),
html[data-theme="dark"] #body-wrap #nav .menus_items .menus_item .menus_item_child,
html[data-theme="dark"] #body-wrap #pagination .page-number:not(.current),
html[data-theme="dark"] #body-wrap #pagination .extend,
html[data-theme="dark"] #page-header #post-info {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid var(--zx-d-fill-1);
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.2);
}

/* ---------- 2. 明亮主题文本颜色 ---------- */
html:not([data-theme="dark"]) #site-title,
html:not([data-theme="dark"]) .site-title,
html:not([data-theme="dark"]) #site-name,
html:not([data-theme="dark"]) #site-info .site-subtitle,
html:not([data-theme="dark"]) #subtitle,
html:not([data-theme="dark"]) #nav #blog-info .site-name,
html:not([data-theme="dark"]) #nav #blog-info a {
    color: #2c3e50 !important;
    text-shadow: none !important;
}
html:not([data-theme="dark"]) #nav .site-page,
html:not([data-theme="dark"]) #nav .menus_items .menus_item > a > span,
html:not([data-theme="dark"]) #nav .menus_items .menus_item > a > i,
html:not([data-theme="dark"]) #search-button > a,
html:not([data-theme="dark"]) #search-button > a > span,
html:not([data-theme="dark"]) #search-button > a > i {
    color: #2c3e50 !important;
    text-shadow: none !important;
}
html:not([data-theme="dark"]) #nav .menus_item:hover > a,
html:not([data-theme="dark"]) #nav .menus_item:hover > a > span,
html:not([data-theme="dark"]) #nav .menus_item:hover > a > i {
    color: var(--zx-accent) !important;
}
html:not([data-theme="dark"]) #page-header .page-title,
html:not([data-theme="dark"]) #footer,
html:not([data-theme="dark"]) #footer a,
html:not([data-theme="dark"]) #footer div,
html:not([data-theme="dark"]) #footer p,
html:not([data-theme="dark"]) #footer span,
html:not([data-theme="dark"]) #footer .copyright *,
html:not([data-theme="dark"]) #post-info .post-title,
html:not([data-theme="dark"]) #post-info #post-meta,
html:not([data-theme="dark"]) #post-info #post-meta a,
html:not([data-theme="dark"]) #post-info #post-meta .post-meta-separator,
html:not([data-theme="dark"]) #post-info #post-meta i {
    color: #2c3e50 !important;
    text-shadow: none !important;
}

/* ---------- 3. 明亮主题导航栏子菜单颜色 ---------- */
html:not([data-theme="dark"]) #nav .menus_items .menus_item .menus_item_child li:hover,
html:not([data-theme="dark"]) #nav .menus_items .menus_item .menus_item_child li.active {
    background: #f2f6fa !important;
    border-radius: 5px !important;
}
html:not([data-theme="dark"]) #nav .menus_items .menus_item .menus_item_child li:hover a,
html:not([data-theme="dark"]) #nav .menus_items .menus_item .menus_item_child li:hover a span,
html:not([data-theme="dark"]) #nav .menus_items .menus_item .menus_item_child li.active a,
html:not([data-theme="dark"]) #post-info #post-meta a:hover {
    color: var(--zx-accent) !important;
}

/* ---------- 4. 页脚透明（页头背景交给 top_img / 默认透明处理） ---------- */
#footer {
    background: transparent !important;
}

/* ---------- 5. 文章卡片透明 ---------- */
#body-wrap #recent-posts > .recent-post-item .recent-post-info,
#body-wrap #recent-posts > .recent-post-item .recent-post-info::before,
#body-wrap #recent-posts > .recent-post-item .recent-post-info::after,
#body-wrap #recent-posts > .recent-post-item .recent-post-info > .article-title,
#body-wrap #recent-posts > .recent-post-item .recent-post-info > .article-meta-wrap,
#body-wrap #recent-posts > .recent-post-item .recent-post-info > .content {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/*
/*
   主题的 `.article-title` 只给了 `font-size: 1.55em`，**没有 font-weight**
   （见 node_modules/hexo-theme-butterfly/source/css/_page/homepage.styl:116-122），
   所以卡片标题一直继承正文字重 400，看起来是普通体。
    用 `#recent-posts` 限定作用域，**不要用裸 `.article-title`** ——
     侧栏「最新文章」列表用的是**同一套类名**（`.recent-post-item > .recent-post-info > .article-title`），
     裸选择器会把侧栏也一起加粗。`#recent-posts` 是首页正文列表的 id，侧栏在 `#aside-content` 里。
    注意 `.recent-post-item` 并不是 `#recent-posts` 的**直接子元素**
     （中间还隔着一层 `.recent-post-items`），所以这里用后代选择器、别用 `>`。 */
#body-wrap #recent-posts .recent-post-info > .article-title {
    font-weight: bold !important;
}

/* ---------- 6. 文章标题卡片透明 ---------- */
#page-header #post-info {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 20px 40px;
    box-sizing: border-box;
    display: block;
    text-align: left;
    border-radius: 10px;
}
@media screen and (max-width: 768px) {
    #page-header #post-info {
        padding: 15px 20px !important;
        bottom: 20px !important;
    }
    #post-info #post-meta > .meta-firstline > span:not(.post-meta-wordcount),
    #post-info #post-meta > .meta-secondline > span:not(.post-meta-wordcount) {
        display: none !important;
    }
    #post-info #post-meta > .meta-firstline > .post-meta-separator,
    #post-info #post-meta > .meta-secondline > .post-meta-separator {
        display: none !important;
    }
    #post-info .post-title {
        text-align: justify !important;
        text-align-last: left !important;
        display: block;
        margin-bottom: 10px;
    }
}

/* ---------- 7. Mermaid 流程图透明 ---------- */
#article-container .mermaid,
#article-container .mermaid svg,
.mermaid-wrap,
#article-container .mermaid svg rect.mermaid-bg,
#article-container .mermaid svg rect:first-child {
    background: transparent !important;
    fill: transparent !important;
}

/* ---------- 8. 明亮主题代码块配色 ---------- */
html:not([data-theme="dark"]) {
    --hl-bg: #f4f7fa !important;
    --hltools-bg: #e9eef4 !important;
    --hlnumber-bg: #f4f7fa !important;
    --hlnumber-color: #8da4bb !important;
    --hlscrollbar-bg: #dbe6f0 !important;
    --hlexpand-bg: linear-gradient(180deg, rgba(244, 247, 250, 0), rgba(244, 247, 250, 0.9)) !important;
}
html:not([data-theme="dark"]) #article-container .highlight table {
    background-color: #f4f7fa !important;
}
html:not([data-theme="dark"]) .highlight .code .keyword,
html:not([data-theme="dark"]) .highlight .code .built_in,
html:not([data-theme="dark"]) .highlight .code .type {
    color: #005cc5 !important;
}
html:not([data-theme="dark"]) .highlight .code .string {
    color: #22863a !important;
}
html:not([data-theme="dark"]) .highlight .code .comment {
    color: #677886 !important;
    font-style: italic !important;
}
html:not([data-theme="dark"]) .highlight .code .number {
    color: #d130a5 !important;
}
html:not([data-theme="dark"]) .highlight .code .title,
html:not([data-theme="dark"]) .highlight .code .function {
    color: #0077aa !important;
}
html:not([data-theme="dark"]) .highlight .code .meta,
html:not([data-theme="dark"]) .highlight .code .meta-keyword {
    color: #8b3c9b !important;
}
html:not([data-theme="dark"]) .highlight .code .attr,
html:not([data-theme="dark"]) .highlight .code .variable,
html:not([data-theme="dark"]) .highlight .code .params {
    color: #212f3b !important;
}

/* ---------- 9. 夜间主题代码块配色 ---------- */
html[data-theme="dark"] {
    --hl-bg: #0b0f19 !important;
    --hltools-bg: #111726 !important;
    --hlnumber-bg: #0b0f19 !important;
    --hlnumber-color: #5c6c7f !important;
    --hlscrollbar-bg: #1e293b !important;
    --hlexpand-bg: linear-gradient(180deg, rgba(11, 15, 25, 0), rgba(11, 15, 25, 0.9)) !important;
}
html[data-theme="dark"] #article-container .highlight table {
    background-color: #0b0f19 !important;
}
html[data-theme="dark"] .highlight .code .keyword,
html[data-theme="dark"] .highlight .code .built_in,
html[data-theme="dark"] .highlight .code .type {
    color: #569cd6 !important;
}
html[data-theme="dark"] .highlight .code .string {
    color: #8fca5c !important;
}
html[data-theme="dark"] .highlight .code .comment {
    color: #5c7080 !important;
    font-style: italic !important;
}
html[data-theme="dark"] .highlight .code .number {
    color: #f07178 !important;
}
html[data-theme="dark"] .highlight .code .title,
html[data-theme="dark"] .highlight .code .function {
    color: #82aaff !important;
}
html[data-theme="dark"] .highlight .code .meta,
html[data-theme="dark"] .highlight .code .meta-keyword {
    color: #c792ea !important;
}
html[data-theme="dark"] .highlight .code .attr,
html[data-theme="dark"] .highlight .code .variable,
html[data-theme="dark"] .highlight .code .params {
    color: #a6bcdc !important;
}

/* ---------- 10. 表格样式 ---------- */
#article-container table th,
#article-container table thead th {
    text-align: center !important;
}
/* 明亮模式 */
html:not([data-theme="dark"]) #article-container table {
    background-color: rgba(255, 255, 255, 0.5) !important;
}
html:not([data-theme="dark"]) #article-container table,
html:not([data-theme="dark"]) #article-container table th,
html:not([data-theme="dark"]) #article-container table td {
    border-color: #919191da !important;
    border-width: 1px !important;
}
html:not([data-theme="dark"]) #article-container table tbody tr:nth-child(even) {
    background-color: rgba(240, 244, 248, 0.5) !important;
}
/* 夜间模式 */
html[data-theme="dark"] #article-container table {
    background-color: rgba(22, 27, 34, 0.5) !important;
}
html[data-theme="dark"] #article-container table,
html[data-theme="dark"] #article-container table th,
html[data-theme="dark"] #article-container table td {
    border-color: #5c6c7f !important;
    border-width: 1px !important;
}
html[data-theme="dark"] #article-container table tbody tr:nth-child(even) {
    background-color: rgba(30, 36, 44, 0.5) !important;
}

/* ---------- 11. 排版美化 ---------- */
#body-wrap #page .page-title {
    text-align: center !important;
}
#article-container {
    text-align: justify;
}
iframe[src*="youtube.com"],
iframe[src*="youtu.be"],
iframe[src*="vimeo.com"] {
    display: block;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

/* =========================================================
   补充：三层背景区分 + 标题可读性
   ========================================================= */

/*
   原来是：`#page-header:not(.post-bg):not(.page-bg) { background: url(/img/core/bg1.jpg) … }`
   
    已在 _config.butterfly.yml 把 `disable_top_img` 设为 true —— 顶部不再有 hero/大图。
     */
/* 这条规则必须一起删：它带 !important，disable_top_img 之后 #page-header 仍存在
   （类名变成 not-top-img），规则依旧命中，会把 bg1.jpg 重新贴回那条 60px 的导航条上。 */
/* 开屏大标题/副标题的白字 + 阴影：hero 已不再渲染，这三条现在是**空转**（留着以防 hero 回来）。 */
#page-header #site-title,
#page-header #site-subtitle,
#page-header #subtitle,
#page-header #site-info .site-subtitle {
    color: #ffffff !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65), 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

/* 2) 正文区背景：透明，让最底层透出来 */
#body-wrap {
    background: transparent !important;
}
/*
   原来是 `background: transparent !important;`，那是为了露出飘带 canvas；
   现在飘带已停用、改由 _config.butterfly.yml 的 `background:` 提供**彩虹渐变**
   （主题会输出成 #web_bg 的**内联样式**）。这里若再写 `!important` 会把它压掉，渐变就没了。 */
/* 文章卡片：白底 + 轻边框，与正文背景、开屏照片都区分开 */
#body-wrap #recent-posts > .recent-post-item {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.16) !important;
}

/* 3) 页脚：与正文区（背景）用完全相同的渐变，视觉上连成一体 + 黑字 + 阴影
   （页脚元素自带内联 style="background: transparent"，故用 !important 覆盖） */
#footer {
    background: transparent !important;
}
/* 主题给 #footer:before 铺了一层 var(--mark-bg) 灰色遮罩，这里整体置为透明 */
#footer::before,
#footer:before {
    background: transparent !important;
    background-color: transparent !important;
}
#footer,
#footer a,
#footer span,
#footer div,
#footer p {
    color: #000000 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85) !important;
}

/* 4) （字号已回退到主题默认，不再单独放大正文） */

/* =========================================================
   补充 2：导航配色（浮在照片上要看清）+ 文章卡片白底修正
   ========================================================= */

/* 顶部导航：未滚动时（浮在照片上）→ 白字 + 阴影；滚动后由主题的 nav-fixed 恢复深色 */
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav .site-page,
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav a,
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav i,
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav #blog-info,
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav #blog-info .site-name,
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav .menus_item > a > span,
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav .menus_item > a > i,
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav #search-button > a,
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav #search-button > a > i,
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav #search-button > a > span {
    color: #ffffff !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55) !important;
}

/* 文章卡片：实心白底
   （教程里用的是直接子代选择器 #recent-posts > .recent-post-item，但真实 DOM 中间还有一层
   .recent-post-items，所以一直没生效；这里改成后代选择器） */
#body-wrap .recent-post-item {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.18) !important;
}
#body-wrap .recent-post-item .recent-post-info,
#body-wrap .recent-post-item .recent-post-info .article-title,
#body-wrap .recent-post-item .recent-post-info .content,
#body-wrap .recent-post-item .recent-post-info .article-meta-wrap {
    background: transparent !important;
}

/* =========================================================
   补充 3：页脚纯白字 + 文章/详情页背景 + 详情页开屏与标题融合
   ========================================================= */

/* 1) 页脚：淡蓝底 + 黑字（提高对比度） */
#footer,
#footer * {
    color: #000000 !important;
}
#footer a:hover,
#footer a:hover * {
    color: #1a6fb5 !important;
}

/* 2) 首页文章卡片：实心白底（覆盖教程的毛玻璃半透明） */
#body-wrap .recent-post-item {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.18) !important;
}

/* 3) 文章详情页正文卡片：白底 */
#post,
.layout > div:first-child:not(.recent-posts) {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.15) !important;
}

/* 4) 文章详情页开屏：背景交给 top_img（不再写死 bg1.jpg），加一层浅遮罩保证标题清晰 */
#page-header.post-bg::before,
#page-header.page-bg::before {
    background-color: rgba(0, 0, 0, 0.22) !important;
}

/* 5) 文章详情页标题：去掉卡片感、融入开屏背景 */
#page-header #post-info {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/*
   `#post-info .post-title, #post-info #post-meta, #post-info #post-meta *, #post-info #post-meta a`
   `{ color:#ffffff !important; text-shadow: 0 2px 12px rgba(0,0,0,.6) !important }`
   
   主题不再把 post-info 放进 `#page-header`，而是渲染到**正文白卡内部**（`#content-inner > #post > #post-info`）。
   于是这组「白字 + 黑色柔光」直接落到浅色卡片上 ——
   
   与 `.meta-secondline` 被 `*` 那条染成 **rgb(255,255,255)**，配黑柔光 = 发虚到看不清。
   注意「未限定作用域」正是病根：带 `#page-header` 前缀的那些同类规则（上面第 504 行、下面第 533 行）
   在无横幅时自然不命中，唯独这一组漏了前缀。
   标题与 meta 的颜色现在由第 159 行那段 `html:not([data-theme="dark"]) #post-info …` 的深色规则负责。
    若哪天把顶部图加回来，这组规则要连同 #page-header 前缀一起恢复。 */

/*
   有意**不限定作用域**，两种情形都该居中：
     · 有横幅时 post-info 在 `#page-header` 内；
     · 无横幅时（本站现状，`disable_top_img: true`）在 `#content-inner > #post > #post-info`。
    只设 text-align，别改成 flex/justify-content：meta 的两行
      （`.meta-firstline` / `.meta-secondline`）是块级 div，里面的「项 + 分隔符」按**行内流**排，
      靠继承 text-align 就能居中；动 display 会打乱主题的项间距与 `|` 分隔符。 */
#post-info {
    text-align: center;
}

/*
   主题的 `h1.post-title` 没给 font-weight，继承正文的 400。
    和首页卡片那条（下面「5b」）保持同一口径，改一处记得看另一处。 */
#post-info .post-title {
    font-weight: bold !important;
}

/* =========================================================
   补充 4：高优先级覆盖
   教程里的深色规则带 html:not([data-theme="dark"]) 前缀，优先级更高，
   之前那些覆盖没生效。这里逐条对齐同样的前缀（且在后），确保白色生效。
   ========================================================= */

/* 开屏标题 / 副标题 / 详情页标题：白色 */
html:not([data-theme="dark"]) #page-header #site-title,
html:not([data-theme="dark"]) #page-header .site-title,
html:not([data-theme="dark"]) #page-header #site-name,
html:not([data-theme="dark"]) #page-header #site-info .site-subtitle,
html:not([data-theme="dark"]) #page-header #site-subtitle,
html:not([data-theme="dark"]) #page-header #subtitle,
html:not([data-theme="dark"]) #page-header #post-info .post-title,
html:not([data-theme="dark"]) #page-header #post-info #post-meta,
html:not([data-theme="dark"]) #page-header #post-info #post-meta *,
html:not([data-theme="dark"]) #page-header #post-info #post-meta a {
    color: #ffffff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65), 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

/*  上面那条"白字"的唯一例外：banner 背景是**默认封面**（飘带截图，很淡）时白字看不见。
   
    背景亮度 199/255、白字 255，只有那圈柔光在撑。）
   这种情况下改成深色、去掉柔光，与主题「没有封面图」时的处理一致 ——
   既保住飘带本身的淡雅，也不必把图压暗。
   为什么用 `[style*="default-cover"]` 选：主题把 banner 背景图写成 header 的行内 style，
   这是唯一能区分"这张图是默认封面"还是"作者自己配的照片"的钩子。
   特异性 (2,3,1) 压过上面两条 (2,2,1)，所以不用再加 html[data-theme] 前缀也能在明暗两种主题下生效。 */
html #page-header[style*="default-cover"] #post-info .post-title,
html #page-header[style*="default-cover"] #post-info #post-meta,
html #page-header[style*="default-cover"] #post-info #post-meta *,
html #page-header[style*="default-cover"] #post-info #post-meta a {
    color: #2c3e50 !important;
    text-shadow: none !important;
}

/* 导航菜单：白字「仅在未滚动（浮在照片上）时」
    必须带 :not(.nav-fixed)，否则滚动后的固定导航也会被强制白字，
      与「补充 9」的黑字需求冲突（且特异性更高会赢）。 */
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav .site-page,
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav a,
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav i,
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav .menus_items .menus_item > a > span,
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav .menus_items .menus_item > a > i,
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav #blog-info .site-name,
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav #blog-info > a,
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav #search-button > a,
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav #search-button > a > i,
html:not([data-theme="dark"]) #page-header:not(.nav-fixed) #nav #search-button > a > span {
    color: #ffffff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65), 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

/* 页脚：黑字（逐条对齐教程的选择器，且在后 → 生效） */
html:not([data-theme="dark"]) #footer,
html:not([data-theme="dark"]) #footer a,
html:not([data-theme="dark"]) #footer span,
html:not([data-theme="dark"]) #footer div,
html:not([data-theme="dark"]) #footer p,
html:not([data-theme="dark"]) #footer .copyright,
html:not([data-theme="dark"]) #footer .copyright *,
html[data-theme="dark"] #footer,
html[data-theme="dark"] #footer a,
html[data-theme="dark"] #footer span,
html[data-theme="dark"] #footer div,
html[data-theme="dark"] #footer p,
html[data-theme="dark"] #footer .copyright,
html[data-theme="dark"] #footer .copyright *,
html[data-theme="dark"] #footer * {
    color: #000000 !important;
    text-shadow: none !important;
}
html:not([data-theme="dark"]) #footer a:hover,
html:not([data-theme="dark"]) #footer a:hover *,
html[data-theme="dark"] #footer a:hover,
html[data-theme="dark"] #footer a:hover * {
    color: #1a6fb5 !important;
}

/* =========================================================
   补充 5：深色模式配色修复
   之前正文区 / 文章卡片背景写死成了浅色（#eef2f7 / #ffffff），
   系统深色时页面变暗但背景还是浅色 → 浅底浅字看不清。这里补上暗色配色。
   ========================================================= */

/* 正文区：暗色下同样透明 */
html[data-theme="dark"] #body-wrap {
    background: transparent !important;
}

/* 页脚：暗色下同样透明 + 浅字 */
html[data-theme="dark"] #footer {
    background: transparent !important;
}
html[data-theme="dark"] #footer,
html[data-theme="dark"] #footer a,
html[data-theme="dark"] #footer span,
html[data-theme="dark"] #footer div,
html[data-theme="dark"] #footer p,
html[data-theme="dark"] #footer .copyright,
html[data-theme="dark"] #footer .copyright *,
html[data-theme="dark"] #footer * {
    color: var(--zx-d-text-strong) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

/* 首页文章卡片 */
html[data-theme="dark"] #body-wrap .recent-post-item {
    background: var(--zx-d-card) !important;
    border: 1px solid var(--zx-d-fill-1) !important;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.6) !important;
}

/* 详情页正文卡片 */
html[data-theme="dark"] #post,
html[data-theme="dark"] .layout > div:first-child:not(.recent-posts) {
    background: var(--zx-d-card) !important;
    border: 1px solid var(--zx-d-fill-1) !important;
    box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.6) !important;
}

/* 侧边栏卡片：加深到与正文卡片一致 */
html[data-theme="dark"] #body-wrap #aside-content .card-widget {
    background: var(--zx-d-card) !important;
    border: 1px solid var(--zx-d-fill-1) !important;
}

/* 顶部导航（暗色下浮在照片上仍要白字） */
html[data-theme="dark"] #page-header:not(.nav-fixed) #nav .site-page,
html[data-theme="dark"] #page-header:not(.nav-fixed) #nav a,
html[data-theme="dark"] #page-header:not(.nav-fixed) #nav i,
html[data-theme="dark"] #page-header:not(.nav-fixed) #nav #blog-info .site-name,
html[data-theme="dark"] #page-header:not(.nav-fixed) #nav #search-button > a > i,
html[data-theme="dark"] #page-header:not(.nav-fixed) #nav .menus_items .menus_item > a > span,
html[data-theme="dark"] #page-header:not(.nav-fixed) #nav .menus_items .menus_item > a > i {
    color: #ffffff !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6) !important;
}

/* 开屏标题 / 详情页标题：暗色下同样白字 */
html[data-theme="dark"] #page-header #site-title,
html[data-theme="dark"] #page-header .site-title,
html[data-theme="dark"] #page-header #site-subtitle,
html[data-theme="dark"] #page-header #subtitle,
html[data-theme="dark"] #page-header #post-info .post-title,
html[data-theme="dark"] #page-header #post-info #post-meta,
html[data-theme="dark"] #page-header #post-info #post-meta *,
html[data-theme="dark"] #page-header #post-info #post-meta a {
    color: #ffffff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65), 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

/* =========================================================
   补充 6：（已回退）字体改回主题默认
   之前用 Inter 强制覆盖全站字体，把 FontAwesome 图标字体也覆盖了，
   导致图标/符号渲染成方块（口）。现已撤销，用主题默认字体栈（与导航一致）。
   这里只保证「粗体/标题」沿用同一字体（不换字体，仅加粗）。
   ========================================================= */
strong, b, h1, h2, h3, h4, h5, h6,
.post-title, .article-title, .recent-post-info > .article-title {
    font-family: inherit !important;
}