/* =========================================================
   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);
    transition: 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 rgba(255, 255, 255, 0.08);
    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: #49b1f5 !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: transparent !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: #49b1f5 !important;
}

/* ---------- 4. 页头与页脚透明 ---------- */
#footer, #page-header.post-bg, #page-header.page-bg {
    background: transparent !important;
}
#page-header.post-bg::before, #page-header.page-bg::before {
    background-color: 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;
}

/* ---------- 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;
}

/* =========================================================
   补充：三层背景区分 + 标题可读性（覆盖上面「全透明」的方案）
   ========================================================= */

/* 1) 开屏 hero：显示背景照片 */
#page-header {
    background: url(/img/core/bg1.jpg) center / cover no-repeat !important;
}
/* 开屏大标题/副标题：白字 + 阴影，深色照片上也能看清 */
#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:
        radial-gradient(circle at 12% 0%, rgba(73, 177, 245, 0.16), transparent 45%),
        radial-gradient(circle at 88% 100%, rgba(147, 130, 255, 0.12), transparent 45%),
        linear-gradient(160deg, #eef4fc 0%, #dfe9f7 100%) !important;
    background-attachment: fixed !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:
        radial-gradient(circle at 12% 0%, rgba(73, 177, 245, 0.16), transparent 45%),
        radial-gradient(circle at 88% 100%, rgba(147, 130, 255, 0.12), transparent 45%),
        linear-gradient(160deg, #eef4fc 0%, #dfe9f7 100%) !important;
    background-attachment: fixed !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) 文章详情页开屏：恢复照片背景（教程把它设成透明了） */
#page-header.post-bg,
#page-header.page-bg {
    background: url(/img/core/bg1.jpg) center / cover no-repeat !important;
}
#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, 0.6) !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 #nav .site-page,
html:not([data-theme="dark"]) #page-header #nav a,
html:not([data-theme="dark"]) #page-header #nav i,
html:not([data-theme="dark"]) #page-header #nav .menus_items .menus_item > a > span,
html:not([data-theme="dark"]) #page-header #nav .menus_items .menus_item > a > i,
html:not([data-theme="dark"]) #page-header #nav #blog-info .site-name,
html:not([data-theme="dark"]) #page-header #nav #blog-info > a,
html:not([data-theme="dark"]) #page-header #nav #search-button > a,
html:not([data-theme="dark"]) #page-header #nav #search-button > a > i,
html:not([data-theme="dark"]) #page-header #nav #search-button > a > span,
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;
}

/* 页脚：黑字（逐条对齐教程的选择器，且在后 → 生效） */
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:
        radial-gradient(circle at 12% 0%, rgba(73, 177, 245, 0.10), transparent 45%),
        linear-gradient(160deg, #141a24 0%, #0b0e13 100%) !important;
    background-attachment: fixed !important;
}

/* 页脚：暗色下同款渐变 + 浅字（与正文区一致） */
html[data-theme="dark"] #footer {
    background:
        radial-gradient(circle at 12% 0%, rgba(73, 177, 245, 0.10), transparent 45%),
        linear-gradient(160deg, #141a24 0%, #0b0e13 100%) !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: #e6edf5 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

/* 首页文章卡片 */
html[data-theme="dark"] #body-wrap .recent-post-item {
    background: #1b1f27 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !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: #1b1f27 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !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: #1b1f27 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !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;
}

/* =========================================================
   补充 7：全站字体换成 Inter（保留图标/代码字体）
   ⚠️ 不能用 * 通配，否则 FontAwesome 图标字体被覆盖 → 图标变方块
   ========================================================= */
body,
#body-wrap, #nav, #nav a, #nav span, #nav i,
#blog-info, .site-name,
#page-header, #page-header .post-title, #post-info, #post-info *,
#article-container, #article-container p, #article-container li,
#article-container h1, #article-container h2, #article-container h3,
#article-container h4, #article-container h5, #article-container h6,
#article-container table, #article-container th, #article-container td,
#article-container blockquote,
#aside-content, #aside-content *,
#footer, #footer *,
#pagination, #pagination *,
h1, h2, h3, h4, h5, h6, p, a, li, td, th, span, div,
input, textarea, button, select {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif !important;
}

/* 图标字体必须还原，且要「压过」上面的文本规则
   （文本规则里有 #nav i 这种带 ID 的选择器，特异性高于 i.fas，
     所以这里必须同样带上 html + 祖先 ID 才能赢） */
html #nav i, html #nav i[class*="fa"],
html #page-header i, html #page-header i[class*="fa"],
html #aside-content i, html #aside-content i[class*="fa"],
html #footer i, html #footer i[class*="fa"],
html #pagination i, html #pagination i[class*="fa"],
html body i.fa, html body i.fas, html body i.far, html body i.fab, html body i.fal, html body i.fad,
html body i[class^="fa-"], html body i[class*=" fa-"],
html body .fa, html body .fas, html body .far, html body .fab, html body .fal, html body .fad,
html body [class^="fa-"], html body [class*=" fa-"] {
    font-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free',
                 'Font Awesome 6 Brands', 'Font Awesome 5 Free',
                 'Font Awesome 5 Brands', FontAwesome !important;
}

/* 代码块/行内代码保持等宽字体 */
#article-container pre, #article-container pre *,
#article-container code, #article-container code *,
.highlight, .highlight *,
kbd, samp {
    font-family: consolas, Menlo, Monaco, monospace,
                 "PingFang SC", "Microsoft YaHei", monospace !important;
}