/* 动态背景新增 - 正式版（排雷通过后恢复正常效果） */
body::before {
content: '';
position: fixed;
/* 偏移 -12px 留安全余量，避免 cover 贴边时出现 1px 缝隙（不破坏全屏铺满观感） */
top: -12px;
left: -12px;
width: calc(100vw + 24px);
height: calc(100vh + 24px);
/* 1. 诊断模式：换回【未预模糊】的原始锐图 bg-window-blur.jpg，先看清原图里到底有没有雨滴 */
background-image: url('/bg-window-blur.webp');
background-size: cover;
background-position: center;
/* 2. 诊断模式：取消所有 CSS 滤镜（blur/brightness/contrast 全关），让原图裸显 */
filter: none;
/* 3. 压暗图片：减轻黑色叠加（0.6→0.35），露出窗外雨夜氛围与雨滴反光 */
background-color: rgba(0, 0, 0, 0.35);
/* 4. 混合模式，让黑色自然融入模糊图 */
background-blend-mode: multiply;
/* 5. 已去除排雷用的红框 */
z-index: -1;
}
/* 动态背景新增 - 深色主题下让原生滚动条渲染为深色（配合 style.css 的 overflow-y:scroll），
使右侧滚动条槽位融入暗色页面，不出现浅色/黑色纯色边。仅新增规则，不改动任何核心样式。 */
html { color-scheme: dark; }
/* 动态背景新增 - 配套卡片化（让浮在背景图上的"白底+深字"面板变成"半透明深色+浅色字"，避免看不清） */
/* 原则：只追加配套样式，不改原主题（.card 等）与其他文件 */
.site-header,
.site-footer,
.search-bar,
.hero,
.article,
.sub-branch,
.empty,
.editor-pane,
.modal-box,
.auth-box {
background: rgba(15, 20, 35, 0.62) !important; /* 半透明深色卡片 */
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 12px !important;
/* 诊断模式：取消毛玻璃 backdrop-filter，卡片不再糊背景 */
color: #e2e8f0;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
/* 头部导航、底部、搜索框留些内边距更舒展 */
.site-header,
.search-bar,
.hero,
.sub-branch,
.empty,
.editor-pane,
.modal-box,
.auth-box {
padding: 14px 18px !important;
}
/* 站内文字：全站统一浅色，主体段落/标题/链接全部清晰锐利 */
body,
h1, h2, h3, h4, h5, h6,
p, label, input, textarea, button,
li, td, th, span, div,
.hero h1, .hero h2, .hero p,
.article h1, .article h2, .article h3, .article p, .article li,
.empty p,
.muted,
.card-title a, .card-excerpt, .card-meta,
.modal-msg, .auth-msg,
.search-bar input {
color: #e2e8f0 !important;
}
/* 链接 / 强调色：冷蓝（与图片蓝色调呼应） */
a, .nav-link, .tag-chip, .brand, .site-nav a {
color: #93c5fd !important;
}
a:hover, .site-nav a:hover, .brand:hover {
color: #bfdbfe !important;
}
/* 搜索框输入区：略微提亮，便于看清输入文字 */
.search-bar input,
input[type="search"],
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
color: #f1f5f9 !important;
}
.search-bar input::placeholder,
input::placeholder,
textarea::placeholder {
color: #999999 !important; /* 用户要求：白底提示语改中灰，清晰可读 */
opacity: 1 !important; /* 修复某些浏览器 placeholder 默认半透明的问题 */
}
/* 按钮：半透明深色 + 浅色字 */
.btn,
button.btn,
.auth-tab {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
color: #e2e8f0 !important;
}
.btn:hover,
button.btn:hover,
.auth-tab.active {
background: rgba(147, 197, 253, 0.18) !important;
color: #f1f5f9 !important;
}
/* 标签筛选：白底圆角标签转半透明深色 + 浅色字 */
.tag-chip,
.sub-branch .tag,
button.tag {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
color: #cbd5e1 !important;
}
.tag-chip.active,
.sub-branch .tag.active,
button.tag.active {
background: rgba(147, 197, 253, 0.25) !important;
color: #f1f5f9 !important;
}
/* markdown 渲染区：文字/代码块都改为深色底浅色字 */
.markdown-body, .markdown-body * {
color: #e2e8f0 !important;
}
.markdown-body pre,
.markdown-body code {
background: rgba(0, 0, 0, 0.45) !important;
color: #f1f5f9 !important;
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* 兼容性降级：浏览器不支持 backdrop-filter 时加深底色 */
@supports not (backdrop-filter: blur(1px)) {
.site-header, .site-footer, .search-bar, .hero, .article,
.sub-branch, .empty, .editor-pane, .modal-box, .auth-box {
background: rgba(15, 20, 35, 0.88) !important;
}
}
/* 动态背景新增 - 白底卡片内文字改深灰（白底黑字，清晰易读） */
/* 仅作用于白色背景卡片 .card / .white-card，不影响上方深色面板的浅色字。
用更高特异性覆盖前面 `.card-title a / .card-excerpt / .card-meta { #e2e8f0 !important }`。 */
.card,
.white-card {
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
/* 标题 / 主文字：#333333（深灰近黑，最清晰） */
.card .card-title,
.card .card-title a,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.card .card-title-text,
.card .card-excerpt,
.card .card-body,
.card p,
.white-card .card-title,
.white-card .card-title a,
.white-card h1, .white-card h2, .white-card h3, .white-card h4,
.white-card .card-title-text,
.white-card .card-excerpt,
.white-card .card-body,
.white-card p {
color: #333333 !important;
}
/* 辅助文字 / 小字：#555555（中灰，对比度足够，清晰可读） */
.card .card-meta,
.card .muted,
.card small,
.card .card-date,
.card .card-tags,
.card .card-author,
.white-card .card-meta,
.white-card .muted,
.white-card small,
.white-card .card-date,
.white-card .card-tags {
color: #555555 !important;
}
/* 白卡内链接：可读深蓝，不抢浅蓝（深色面板）的视觉 */
.card a:not(.btn):not(.tag-chip):not(.auth-tab),
.white-card a:not(.btn):not(.tag-chip):not(.auth-tab) {
color: #2563eb !important;
}
/* 动态背景新增 - 卡片内"标签/日期"等次要文字改为 #555555（用户最新要求：白底深灰，清晰可读）
注：原 .date 是 .card-meta 子 span（无 dash），之前规则用 .card-date 完全没命中。
.hero .chip 在深色面板上保留 #A5D8E8 浅蓝色，不在此处覆盖。 */
.chip,
.chip-static,
.card .date,
.card .card-meta .date,
.card-meta .date,
span.date,
.card .card-tags,
.card .tag-chip,
.card .card-author {
color: #555555 !important;
}
/* 动态背景新增 - 技能推荐卡星星：5 颗满的"精通"等级，黄色高亮 */
.card .stars,
.skill-card .stars {
color: #facc15 !important; /* 鲜亮金黄，与白卡对比强 */
}
/* 动态背景新增 - 技能等级标签（精通 / 熟练 / 核心）：橙色底 + 蓝色字（用户最新要求）
原 style.css:121 .skill-level { color: var(--primary) #2f6df6; background: #eef2ff 浅紫 }
但被前面全局 body..span 强制 #e2e8f0 浅色字覆盖，整体显示成"灰底+深灰字"。
现在用更高特异性覆盖：浅橙底 #fff3e0 + 深蓝字 #1d4ed8，柔和醒目。 */
.skill-level,
.card .skill-level,
.skill-card .skill-level {
color: #1d4ed8 !important; /* 深蓝，清晰可读 */
background: #fff3e0 !important; /* 浅橙 */
border: 1px solid #fed7aa; /* 中橙描边，让标签更立体 */
}
/* 动态背景新增 - 用图片替换默认"J"文字 logo：让 ![]()
正确显示
原 style.css:50-54 .brand-logo { width:34; height:34; border-radius:9px;
display:grid; place-items:center; color:#fff; font-weight:800;
background:linear-gradient(135deg, var(--primary), var(--autosar)); }
这是为 J 文字块设计的，现在换成 ![]()
后需要：
① 去掉背景渐变和文字相关属性（display:grid / color / font-weight 已对 img 无效但不影响）
② 加上 object-fit:cover 让图片按 34x34 圆角矩形完美裁切
③ box-shadow 加细描边，让米色 logo 在深色面板（.site-header 半透明深色）上轮廓更清晰 */
.brand-logo {
background: transparent !important; /* 去掉渐变色 */
color: transparent !important; /* 文字对 img 无意义但清掉 */
font-weight: 400 !important; /* 还原默认（对 img 无意义） */
object-fit: cover; /* 图片填满 34x34 圆角 */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); /* 深色面板上轻微阴影突出 */
transition: transform 0.18s ease;
}
.brand:hover .brand-logo {
transform: scale(1.06); /* 鼠标悬停品牌时 logo 微微放大 */
}
/* 动态背景新增 - 首页 hero 大头像（120x120 圆角矩形，用户要求调大）从 "J" 文字块改为图片
原 style.css:147-151 .hero-avatar { width:78; height:78; border-radius:20px;
display:grid; place-items:center; font-size:38px; font-weight:800; color:#fff;
background:linear-gradient(135deg, var(--primary), var(--autosar)); }
现在 ![]()
同样 class，所以要清掉文字块相关属性，
加 object-fit:cover 让 logo.webp 按 120x120 圆角矩形填满，加 box-shadow 增强立体感 */
.hero-avatar {
width: 140px !important; /* 显式放大（原 120px → 140px） */
height: 140px !important; /* 显式放大 */
border-radius: 32px !important; /* 圆角随尺寸放大，保持比例协调 */
background: transparent !important; /* 去掉蓝紫渐变背景 */
color: transparent !important; /* 文字对 img 无意义 */
font-weight: 400 !important; /* 还原默认 */
font-size: 0 !important; /* 保险：万一残留文字也不显示 */
display: block !important; /* img 默认 inline，改 block 让 object-fit 完全生效 */
object-fit: cover; /* 图片填满 120x120 圆角矩形 */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); /* 深色 hero 面板上更突出 */
transition: transform 0.2s ease;
}
.hero:hover .hero-avatar {
transform: scale(1.04); /* 悬停整个 hero 区时头像微微放大 */
}
/* 动态背景新增 - 写日志区/预览区/白卡内的 label/小字/段落改为深色（覆盖前面全局 #e2e8f0 浅色强制）
.editor-form / .editor-preview 原本就是 var(--surface) #ffffff 白底，但被全局 body...span/div 强制为浅色字，对比度差。
现在让这些白底面板内的文字回归深色：标题/正文 #1f2530，弱化提示 .muted/small/次要文字 #555555。 */
.editor-form,
.editor-preview,
.preview-pane,
.live-preview {
background: #ffffff !important;
color: #1f2530 !important;
}
/* 写日志/预览区内：label、span、div、p、strong、h1-h6 → 深色 #1f2530（深灰近黑，最清晰） */
.editor-form label,
.editor-form p,
.editor-form span,
.editor-form div,
.editor-form strong,
.editor-form h1, .editor-form h2, .editor-form h3, .editor-form h4, .editor-form h5, .editor-form h6,
.editor-preview label,
.editor-preview p,
.editor-preview span,
.editor-preview div,
.editor-preview strong,
.editor-preview h1, .editor-preview h2, .editor-preview h3, .editor-preview h4, .editor-preview h5, .editor-preview h6,
.preview-pane label,
.preview-pane p,
.preview-pane span,
.preview-pane div,
.preview-pane strong {
color: #1f2530 !important;
}
/* 弱化提示（.muted / small / 字段说明）→ #555555（中灰，对比度足够又不抢眼） */
.editor-form .muted,
.editor-preview .muted,
.editor-form small,
.editor-preview small,
.editor-form .tag-preset-row .muted,
.editor-form .upload-row .muted,
.editor-form .upload-row span,
.preview-head,
.editor-preview .preview-head,
.preview-pane .preview-head,
.preview-pane .muted,
.preview-pane small {
color: #555555 !important;
}
/* 写日志输入框：白底 + 深色字（用户实际输入字符是黑色 #1f2530，确保清晰） */
.editor-form input[type="text"],
.editor-form input[type="date"],
.editor-form input[type="email"],
.editor-form input[type="password"],
.editor-form input[type="file"],
.editor-form textarea,
.editor-form select,
.tag-preset-row select,
.editor-form .upload-row button {
background: #ffffff !important;
border: 1px solid #cbd5e1 !important;
color: #1f2530 !important;
}
/* 写日志 placeholder：#999999（用户最新要求：中灰，看得清但与真实输入区分明显） */
.editor-form input::placeholder,
.editor-form textarea::placeholder,
.editor-form select::placeholder,
.preview-pane input::placeholder,
.preview-pane textarea::placeholder {
color: #999999 !important;
opacity: 1 !important;
}
/* 写日志区"上传 Markdown 文件"等 .btn-ghost：白底深字（覆盖 .btn 强制深色半透明） */
.editor-form .btn,
.editor-form .btn-ghost,
.editor-form .editor-actions .btn,
.editor-form .editor-actions .btn-ghost,
.upload-row .btn,
.upload-row .btn-ghost {
background: #ffffff !important;
color: #1f2530 !important;
border: 1px solid #cbd5e1 !important;
}
.editor-form .editor-actions .btn:not(.btn-ghost),
.editor-form #saveLog {
background: #2f6df6 !important;
color: #ffffff !important;
border: 1px solid #2f6df6 !important;
}
/* 实时预览 .markdown-body 在白底上 → 深色（覆盖前面 #e2e8f0 浅色） */
.editor-preview .markdown-body,
.editor-preview .markdown-body *,
.preview-pane .markdown-body,
.preview-pane .markdown-body * {
color: #1f2530 !important;
}
.editor-preview .markdown-body p.muted,
.preview-pane .markdown-body p.muted {
color: #555555 !important;
}
/* 动态背景新增 - 详情页 .log-extra（问题与总结 / 明日目标）内 markdown-body 文字改深色
原 style.css: .log-extra .markdown-body { background: var(--surface-2) #f1f3f6 浅灰底 }
但被前面 line 134-142 强制 .markdown-body * { #e2e8f0 } 浅色，文字看不清。
改 #1f2530（深灰近黑）保证浅灰底/白底上对比度都足够；链接保留深蓝 #2563eb。 */
.log-extra .markdown-body,
.log-extra .markdown-body p,
.log-extra .markdown-body h1,
.log-extra .markdown-body h2,
.log-extra .markdown-body h3,
.log-extra .markdown-body h4,
.log-extra .markdown-body h5,
.log-extra .markdown-body h6,
.log-extra .markdown-body li,
.log-extra .markdown-body span,
.log-extra .markdown-body div,
.log-extra .markdown-body strong,
.log-extra .markdown-body em,
.log-extra .markdown-body code,
.log-extra .markdown-body blockquote,
.log-extra .markdown-body table,
.log-extra .markdown-body th,
.log-extra .markdown-body td {
color: #1f2530 !important;
}
.log-extra .markdown-body a {
color: #2563eb !important;
}
.log-extra .markdown-body code {
background: rgba(0, 0, 0, 0.06) !important;
color: #1f2530 !important;
border: 1px solid rgba(0, 0, 0, 0.08);
}
/* 动态背景新增 - 写日志区日期输入框（type=date）日历图标颜色提亮（部分浏览器原生控件） */
.editor-form input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(0.2);
cursor: pointer;
opacity: 0.7;
}
/* 动态背景新增 - 白色卡片内编辑/删除按钮改为深色（用户要求：白底深字清晰） */
/* 编辑（btn-ghost）：白底 + 深灰字 + 深灰边；删除（btn-danger）：白底 + 深红字 + 红边（保持警示色） */
.card .btn,
.card .btn-ghost,
.card .btn-sm,
.card .log-card-btns .btn,
.card .log-card-btns .btn-ghost,
.card .log-card-btns a.btn,
.log-card-btns .btn,
.log-card-btns .btn-ghost,
.log-card-btns a.btn {
background: #ffffff !important;
color: #1f2530 !important;
border: 1px solid #cbd5e1 !important;
}
.card .btn:hover,
.card .btn-ghost:hover,
.card .log-card-btns .btn:hover,
.log-card-btns .btn:hover {
background: #f1f3f6 !important;
color: #1f2530 !important;
border-color: #94a3b8 !important;
}
.card .btn-danger,
.card .log-card-btns .btn-danger,
.log-card-btns .btn-danger {
/* 红调毛玻璃：渐变 + 半透明 + 模糊背景 + 柔和红光，去掉原来生硬的 1px 纯红描边 */
background: linear-gradient(135deg, rgba(254, 226, 226, 0.85), rgba(252, 165, 165, 0.55)) !important;
color: #b91c1c !important; /* 深红，沉稳有质感 */
border: 1px solid rgba(239, 68, 68, 0.28) !important; /* 半透明红边，柔和不刺眼 */
backdrop-filter: blur(8px) saturate(150%);
-webkit-backdrop-filter: blur(8px) saturate(150%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7), /* 顶部内高光，玻璃质感 */
inset 0 -1px 0 rgba(220, 38, 38, 0.08), /* 底部暗边，立体感 */
0 1px 2px rgba(220, 38, 38, 0.08),
0 4px 12px rgba(220, 38, 38, 0.10); /* 柔和红色外发光 */
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease, color 0.2s ease;
}
.card .btn-danger:hover,
.card .log-card-btns .btn-danger:hover,
.log-card-btns .btn-danger:hover {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.92), rgba(220, 38, 38, 0.88)) !important;
color: #ffffff !important;
border-color: rgba(220, 38, 38, 0.45) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 2px 6px rgba(220, 38, 38, 0.22),
0 6px 18px rgba(220, 38, 38, 0.30); /* 悬停时红光更强 */
transform: translateY(-1px);
}
.card .btn-danger:active,
.card .log-card-btns .btn-danger:active,
.log-card-btns .btn-danger:active {
transform: translateY(0);
box-shadow:
inset 0 1px 2px rgba(220, 38, 38, 0.18),
0 1px 3px rgba(220, 38, 38, 0.15);
}
/* 动态背景新增 - 日志详情页 .article 是深色半透明面板，删除按钮需红调深色毛玻璃
（之前只改了白底 .card 的 btn-danger，这里补上 .article 上下文；去掉 style.css 默认的
白底 + 1px 硬红边，改成红调深色磨砂玻璃，与 .btn 深色磨砂风格统一又有警示色） */
.article .btn-danger,
.article-actions .btn-danger {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.16), rgba(220, 38, 38, 0.24)) !important;
color: #fca5a5 !important; /* 浅红字，与深色面板对比清晰 */
border: 1px solid rgba(239, 68, 68, 0.40) !important; /* 半透明红边，无生硬感 */
backdrop-filter: blur(8px) saturate(150%);
-webkit-backdrop-filter: blur(8px) saturate(150%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12), /* 顶部内高光 */
inset 0 -1px 0 rgba(0, 0, 0, 0.18), /* 底部暗边 */
0 1px 2px rgba(0, 0, 0, 0.25),
0 2px 8px rgba(239, 68, 68, 0.14); /* 柔和红光 */
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease, color 0.2s ease;
}
.article .btn-danger:hover,
.article-actions .btn-danger:hover {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.85), rgba(220, 38, 38, 0.8)) !important;
color: #ffffff !important;
border-color: rgba(239, 68, 68, 0.55) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 2px 6px rgba(220, 38, 38, 0.3),
0 4px 14px rgba(220, 38, 38, 0.35);
transform: translateY(-1px);
}
.article .btn-danger:active,
.article-actions .btn-danger:active {
transform: translateY(0);
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.2),
0 1px 3px rgba(220, 38, 38, 0.2);
}
/* 动态背景新增 - 关于页底部"logo 解释"块（左侧 logo 图标 + 右侧两段说明文字）
插入位置：viewAbout() 中 .about-grid 之后、 之前；.article 是深色半透明面板，
所以这里文字用浅色（#cbd5e1 正文 / #93c5fd 关键名词），保持与整体深色面板一致且清晰。 */
.logo-explainer {
display: flex;
align-items: flex-start;
gap: 22px;
margin: 30px 0 6px;
padding-top: 26px;
border-top: 1px dashed rgba(255, 255, 255, 0.14); /* 与上方 about-grid 区隔 */
}
.logo-explainer-img {
flex: 0 0 auto;
width: 128px !important;
height: 128px !important;
border-radius: 28px !important;
background: transparent !important; /* 去掉任何底色 */
color: transparent !important;
font-size: 0 !important;
object-fit: cover; /* 图片填满 128x128 圆角矩形 */
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.logo-explainer-body {
flex: 1 1 auto;
color: #cbd5e1; /* 浅灰正文，与深色 .article 面板对比清晰 */
font-size: 22px; /* 关于页底部 logo 解释块字号 20260726 - 与 style.css 同步，放大后用户能感知 */
line-height: 1.5;
}
.logo-explainer-body p {
margin: 0 0 12px;
}
.logo-explainer-body p:last-child {
margin-bottom: 0;
}
.logo-explainer-body .logo-key {
color: #93c5fd; /* 关键名词用浅蓝高亮，东方清雅感 */
font-weight: 700;
margin-right: 1px;
}
.logo-explainer-body em {
color: #f1f5f9; /* 「梧桐更兼细雨」古诗词高亮 */
font-style: normal;
border-bottom: 1px dotted #93c5fd;
}
/* 动态背景新增 - 关于页"关注方向"现在展开为三行 chips（专业 / 心理学 / 做饭美食）
让第二、第三行与上一行有清晰间距，视觉上是三组而不是挤在一块。 */
.about-grid .chips + .chips {
margin-top: 12px;
}
/* 动态背景新增 - 移动端：上方 .site-header 的 4 边白边（border）收敛为仅底部一条白线，
并钉在 header 卡片最底边（导航底框下边框）；去掉上下 padding 与圆角，
让白线是整条干净横线、且不与登录/注册按钮重叠。PC 端仍保持原圆角卡片 4 边白边。 */
@media (max-width: 760px) {
.site-header {
border: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 0 !important;
padding: 0 18px !important;
}
}
/* footer：动态背景方案下去掉 footer 卡片的全部白色边框（含备案号下方底边与顶部），
footer 仅以半透明深色背景与上方内容区隔，整体无任何白线 */
.site-footer {
border: 0 !important;
border-radius: 0 !important;
}
/* footer 白线根因修复（最终方案）：
白线并非 CSS border/outline，而是背景图(bg-window-blur.webp)中偏亮区域
透过 .site-footer 的半透明背景 rgba(15,20,35,0.62) 后形成的视觉"线"。
该亮区位于 footer 内容区中下部（备案号下方），不在 footer 底边，
故底部渐变遮罩无效。最终方案：让 footer 背景完全不透明(1.0)，
背景图任何位置的亮区都不再透出，白线彻底消失。其余卡片仍保持毛玻璃质感。 */
.site-footer {
background: rgba(15, 20, 35, 1) !important;
}