（宽 392px）—— 表格没有滚动容器，列一多就顶破视口。
上轮已加 overflow-x:auto，表格缺同样的处理。
用 display:block + overflow-x:auto 让表格自身可横向滚动（不改变表格内部布局）。 */
.article-content table {
border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 14px;
display: block; overflow-x: auto; max-width: 100%;
}
/* display:block 会让表格不再撑满容器，这里补回最小宽度行为 */
.article-content table > thead,
.article-content table > tbody { display: table-row-group; }
.article-content th, .article-content td { border: 1px solid var(--lightGray); padding: 8px 12px; text-align: left; }
.article-content th { background: #faf9f6; }
.article-content img { max-width: 100%; border-radius: 8px; border: 1px solid var(--lightGray); }
.article-content hr { border: none; border-top: 1px dashed var(--lightGray); margin: 2em 0; }
.article-footer { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 16px; border-top: 1px dashed var(--lightGray); font-size: 14px; }
.article-footer a { color: var(--themeText); }
/* ---------- 页脚 ---------- */
.footer {
margin-top: 20px;
padding: 28px 20px;
text-align: center;
color: var(--greyFont);
font-size: 13px;
border-top: 1px solid var(--lightGray);
background: #fff;
}
.footer a { color: var(--themeText); }
/* ---------- 搜索框 ---------- */
.search-box {
position: relative;
margin: 28px auto 0;
max-width: 520px;
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
}
.search-box input {
flex: 1;
height: 42px;
border: none;
border-radius: 22px;
padding: 0 22px;
font-size: 14px;
font-family: inherit;
color: var(--toolbarFont);
background: rgba(255,255,255,.92);
box-shadow: 0 4px 16px rgba(0,0,0,.12);
outline: none;
}
.search-box input:focus { box-shadow: 0 0 0 3px rgba(255,165,0,.35); }
.search-box button {
height: 42px;
padding: 0 20px;
border: none;
border-radius: 22px;
/* 白字 + 品牌橙 #e8590c 只有 3.58:1，低于 WCAG AA 正文 4.5:1
（这是「白字压在橙底上」，和上轮修的「橙字压在浅底上」是同一主色的另一种用法）。
改用文字用的深一档主色 --themeText（浅色下 #c44507 = 5.00:1）；
深色下 --themeText 是 #e8590c（作为"文字"在深底上合格），作按钮底仍不足，
故深色另有覆盖（见 html.dark .search-box button）。 */
background: var(--themeText);
color: #fff;
font-family: inherit;
font-size: 14px;
cursor: pointer;
}
.search-results {
display: none;
position: absolute;
top: 50px;
left: 0;
right: 0;
background: #fff;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,.15);
overflow: hidden;
z-index: 50;
text-align: left;
}
.search-results a.search-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px;
font-size: 14px;
color: var(--fontColor);
border-bottom: 1px solid var(--lightGray);
}
.search-results a.search-item:last-child { border-bottom: none; }
.search-results a.search-item:hover { background: var(--favoriteBg); }
.search-results a.search-item em { font-style: normal; font-size: 12px; color: var(--greyFont); }
.search-empty { padding: 14px 16px; color: var(--greyFont); font-size: 13px; }
/* ---------- 弹幕墙 ---------- */
.danmaku-wall {
position: relative;
height: 180px;
background: #0f1f26;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 18px 0;
}
.danmaku-wall .row {
position: relative;
height: 34px;
overflow: hidden;
}
.danmaku-wall .row span {
position: absolute;
left: 0;
white-space: nowrap;
font-size: 14px;
color: rgba(255,255,255,.9);
animation: passing linear infinite;
}
.danmaku-wall .row:nth-child(1) span { animation-duration: 16s; animation-delay: 0s; }
.danmaku-wall .row:nth-child(2) span { animation-duration: 20s; animation-delay: -6s; }
.danmaku-wall .row:nth-child(3) span { animation-duration: 18s; animation-delay: -12s; }
.danmaku-wall .row:nth-child(4) span { animation-duration: 22s; animation-delay: -3s; }
.danmaku-wall .row:nth-child(5) span { animation-duration: 17s; animation-delay: -9s; }
@keyframes passing {
0% { transform: translateX(-130%); opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
100% { transform: translateX(130vw); opacity: 0; }
}
/* ---------- 动态标签云 ---------- */
.cloud {
position: relative;
min-height: 160px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 14px;
}
.cloud a {
display: inline-block;
color: var(--greyFont);
border-radius: 20px;
background: var(--favoriteBg);
padding: 3px 12px;
transition: all .3s ease-in-out;
animation: cloudFloat 4s ease-in-out infinite;
}
.cloud a:nth-child(1) { font-size: 18px; animation-delay: 0s; }
.cloud a:nth-child(2) { font-size: 14px; animation-delay: .4s; }
.cloud a:nth-child(3) { font-size: 16px; animation-delay: .8s; }
.cloud a:nth-child(4) { font-size: 13px; animation-delay: 1.2s; }
.cloud a:nth-child(5) { font-size: 20px; animation-delay: .2s; }
.cloud a:nth-child(6) { font-size: 15px; animation-delay: .6s; }
.cloud a:nth-child(7) { font-size: 17px; animation-delay: 1s; }
.cloud a:nth-child(8) { font-size: 14px; animation-delay: 1.4s; }
.cloud a:hover {
background: var(--themeBackground);
color: #fff;
transform: scale(1.2);
box-shadow: 0 0 5px var(--themeBackground);
}
@keyframes cloudFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* ---------- 深色模式 ---------- */
html.dark {
--background: #101014;
--fontColor: #d8d3c8;
--greyFont: #8a8f98;
--lightGray: #26262c;
--borderColor: rgba(255,255,255,.1);
--borderHoverColor: rgba(255,255,255,.2);
--favoriteBg: #1d1d24;
--maxMaxWhiteMask: rgba(16,16,20,.7);
--toolbarFont: #d8d3c8;
}
html.dark .card,
html.dark .post-card,
html.dark .article-card,
html.dark .footer,
html.dark .search-results {
background: #18181e;
}
html.dark .profile-card {
background: linear-gradient(rgba(255,255,255,0), #182630 40%, #1b2a35);
}
html.dark .signature-wall {
background:
radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.08), transparent 55%),
linear-gradient(180deg, #0a1620 0%, #122a33 45%, #1b3a40 75%, #101014 100%);
}
html.dark .danmaku-wall { background: #050a0e; }
html.dark .article-content pre { background: #000; color: #ccc; }
html.dark .article-content code { background: #202027; border-color: #333; color: #ffb26b; }
html.dark .search-box input { background: #18181e; color: #d8d3c8; }
/* 深色下表格头背景。
原来 `.article-content th { background:#faf9f6 }` 是**硬编码**，深色层没覆盖它，
于是深色模式下变成"浅色文字(继承 #d8d3c8) 压在浅色底 #faf9f6 上"——
实测对比度只有 **1.42:1**（237 处），表头几乎看不见。
这是深色模式全站审计（111 页）才发现的。 */
html.dark .article-content th { background: #26262c; }
/* 深色下 --themeText 是 #e8590c，配白字只有 3.58:1 —— 按钮单独用更深一档（白字 6.50:1） */
html.dark .search-box button { background: #a63a05; }
/* ---------- 暗色切换按钮 ---------- */
.dark-toggle {
background: none;
border: none;
color: inherit;
font-size: 18px;
cursor: pointer;
margin-left: 12px;
/* 默认隐藏：没有 JS 时它是"死控件"（点了没反应）。
site.js 运行后会执行 document.documentElement.classList.add('js')，
这条规则才让它出现。禁用 JS 的用户因此不会看到无效按钮。 */
display: none;
}
html.js .dark-toggle { display: inline-block; }
/* ---------- 文章详情页增强 ---------- */
.article-cover {
width: 100%;
/* 预留高度：原来只有 max-height:320px，容器高度**取决于图片是否加载完**
—— 实测（延迟封面图 900ms）容器在图片到达前只有 2px，加载后跳到 320px，
下方 h1/目录/正文全部被推下去，CLS=0.082（真实 Chrome 复现 5/5）。
用 aspect-ratio 让高度由**宽度**决定（布局时即已知），不再依赖图片：
宽 706px 时 16/9≈397px，被 max-height 收在 320px；窄屏按比例自然变矮。 */
aspect-ratio: 16 / 9;
max-height: 320px;
border-radius: 8px;
overflow: hidden;
margin-bottom: 24px;
border: 1px solid var(--lightGray);
}
.article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-nav {
display: flex;
justify-content: space-between;
gap: 20px;
margin-top: 40px;
padding-top: 16px;
border-top: 1px dashed var(--lightGray);
font-size: 14px;
}
.article-nav a { color: var(--themeText); }
/* 「已经是第一篇 / 最后一篇」是**占位提示**，不是禁用控件：
它是 、无 href、无点击处理。
原先 §「inactive UI component 豁免」的解读不成立 —— 它是纯文本，应满足正文 4.5:1。
实测 #b0b4b9 on #fff 只有 2.08:1，太淡。
改为 #767676（4.54:1）；同时用**斜体 + 浅灰边框块**保持"这不是链接"的视觉区分，
避免调深后看起来像可点链接。 */
.article-nav .disabled {
color: #767676;
font-style: italic;
}
/* #767676 是为**浅色底**选的（4.54:1）。深色底 rgb(24,24,30) 上它只有 3.89:1，
不合格 —— 与第 17 轮品牌橙那次是同一类问题：给浅色调的值必须在深色下复测。
深色下改用亮一档的 #8a8f98（与 --greyFont 的深色值一致，7.4:1 左右）。 */
html.dark .article-nav .disabled { color: #8a8f98; }
/* ---------- 文章描述 ---------- */
.post-desc {
font-size: 13px;
color: var(--greyFont);
line-height: 1.8;
margin-top: 8px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* ---------- 文章正文排版增强 ---------- */
.article-content > p:first-of-type::first-letter {
font-size: 3.2em;
float: left;
line-height: 1;
margin: 4px 8px 0 0;
color: var(--themeText); /* 首字下沉是文字（3.2em≈51px 属大字，规范只要 3:1，但统一用文字色更稳） */
font-weight: 700;
}
.article-content h2 {
position: relative;
padding-bottom: 10px;
}
.article-content h2::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 48px;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--themeBackground), transparent);
}
/* ---------- 阅读进度条 ---------- */
.progress-bar {
position: fixed;
top: 0; left: 0;
height: 3px;
width: 0;
background: linear-gradient(90deg, var(--themeBackground), var(--lightGreen));
z-index: 999;
}
/* ---------- 文章目录 TOC ---------- */
.toc {
background: #faf9f6;
border: 1px solid var(--lightGray);
border-radius: 8px;
padding: 14px 18px;
margin: 22px 0;
}
html.dark .toc { background: #1d1d24; }
.toc-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.toc ul { list-style: none; padding-left: 0; }
.toc ul li { margin: 4px 0; }
.toc ul li a { font-size: 13px; color: var(--greyFont); }
.toc ul li a:hover { color: var(--themeText); }
/* ---------- 相关推荐 ---------- */
.related { margin-top: 40px; }
.related-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 640px) { .related-grid { grid-template-columns: 1fr; } }
.related-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
background: #faf9f6;
border: 1px solid var(--lightGray);
border-radius: 8px;
transition: all .2s;
}
html.dark .related-item { background: #1d1d24; }
.related-item:hover { border-color: var(--themeBackground); transform: translateY(-2px); }
.related-item .rel-cat { font-size: 12px; color: var(--themeText); }
.related-item .rel-title { font-size: 14px; color: var(--fontColor); }
/* ============ 模板修饰类（替代原内联样式） ============ */
.signature-wall--compact { height: 280px; }
.signature-wall--compact h1,
.signature-wall--compact .hero-title { font-size: 32px; } /* .hero-title 见上方说明：页头横幅标题已从 h1 降级 */
.signature-wall--full { height: 100vh; }
.signature-back { margin-top: 20px; }
.signature-wall a.back-home { color: #fff; text-decoration: underline; }
.page-wrap--column { flex-direction: column; }
.page-wrap--center { justify-content: center; }
.main--full { width: 100%; }
.article-card { margin-top: -10px; }
/* ============================================================
设计令牌精修层（2026 重构）
保留国风身份（青瓷山水 + 朱砂 + 宋体），统一现代化令牌：
分层柔和阴影、统一圆角、克制的悬停动效、可达性焦点态。
本层规则位于文件末尾，同优先级覆盖前文。
============================================================ */
:root {
/* 语义化主色：朱砂（原 orange #ffa500 过亮，白底对比度不足） */
--themeBackground: #e8590c;
/* 「当文字用」的主色：与 --themeBackground 同色相，只压亮度。
原因：#e8590c 作为文字时白底 3.58:1、浅底 3.40:1，低于 WCAG AA 正文 4.5:1。
---- 选型（实测，别按直觉挑）----
#d24d08 白底 4.37 浅底 4.15 ← 不达标
#cc4707 白底 4.70 浅底 4.46 ← **只在白底过，浅底 4.46 仍不达标**，是个陷阱
#c44507 白底 5.00 浅底 4.75 ← 全部达标，取它
装饰性用法（边框、渐变、背景、焦点外环）**不改**，
对比度规范不约束非文字；只有作为 color 的地方才用这个变量。
⚠️ 默认值 = 品牌色 #e8590c：**深色模式下它本来就达标**
（on #1d1d24 = 4.68:1），若一并压暗反而掉到 3.35:1 不合格。
所以只在**浅色模式**下覆盖成 #c44507。 */
--themeText: #e8590c;
--themeHover: #d9480f;
--themeSoft: rgba(232, 89, 12, .08);
/* 统一圆角 */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
/* 分层柔和阴影 */
--shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
--shadow-2: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .05);
--shadow-3: 0 12px 32px rgba(16, 24, 40, .12), 0 4px 8px rgba(16, 24, 40, .06);
}
/* ---------- 卡片：柔影 + 轻浮起 ---------- */
.card, .post-card, .article-card {
border-radius: var(--radius-md);
box-shadow: var(--shadow-1);
}
.card:hover, .post-card:hover {
box-shadow: var(--shadow-2);
transform: translateY(-3px);
}
.post-cover img { transition: transform .6s ease; }
.post-card:hover .post-cover img { transform: scale(1.05); }
/* ---------- 标签云/分类云：收敛缩放动效 ---------- */
.cloud a:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.cloud a { animation: none; }
.cloud a:nth-child(n) { animation: none; }
.section-head .more:hover { transform: none; font-weight: 400; color: var(--themeText); }
/* ---------- 搜索：焦点态改用主色柔环 ---------- */
.search-box input { border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
.search-box input:focus { box-shadow: 0 0 0 3px var(--themeSoft), var(--shadow-2); }
.search-box button { border-radius: var(--radius-md); transition: background .2s ease; }
.search-box button:hover { background: var(--themeHover); }
.search-results { border-radius: var(--radius-md); box-shadow: var(--shadow-3); }
/* ---------- 文章页细节 ---------- */
.article-content h2 { border-left-color: var(--themeBackground); }
.article-content blockquote { background: var(--themeSoft); border-left-color: var(--themeBackground); }
.article-content code { border-radius: 6px; }
.toc, .related-item { border-radius: var(--radius-md); }
.related-item:hover { box-shadow: var(--shadow-1); }
.article-meta kbd { border-radius: 6px; }
a { transition: color .2s ease; }
/* ---------- 可达性：键盘焦点可见 ---------- */
a:focus-visible, button:focus-visible, input:focus-visible {
outline: 2px solid var(--themeBackground);
outline-offset: 2px;
border-radius: 4px;
}
/* ---------- 尊重系统"减弱动态效果"（弹幕/浮动/缩放仅在用户声明时关停）---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.post-card:hover, .card:hover, .related-item:hover, .cloud a:hover { transform: none; }
}
/* ---------- 深色模式同步 ---------- */
html.dark .card, html.dark .post-card, html.dark .article-card {
box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
html.dark .card:hover, html.dark .post-card:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, .55);
}
html.dark { --themeSoft: rgba(232, 89, 12, .16); }
/* 浅色模式下「当文字用的主色」需压暗到达标；
深色模式保持 #e8590c（实测 4.68:1，本就合格）。 */
:root:not(.dark) { --themeText: #c44507; }
/* ---------- 可访问性补丁（perf-a11y）----------
搜索条目键盘焦点态：条目是 原生可聚焦，这里只补可见反馈。
outline 朝内偏移，避免被 .search-results 的 overflow:hidden 裁掉。 */
.search-results a.search-item:focus-visible {
background: var(--favoriteBg);
outline: 2px solid var(--themeBackground);
outline-offset: -2px;
}
/* 搜索条目标题域显式类名（原为裸 ，无独立样式，视觉一致）。 */
.search-results a.search-item .search-text { min-width: 0; }
/* 顶栏未滚动时是透明底 + 橙色描边，停在浅色题词区上对比不足；补深色外描边。 */
.toolbar a:focus-visible,
.toolbar button:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
box-shadow: 0 0 0 4px var(--themeBackground);
}
.dark-toggle[aria-pressed="true"] { opacity: .85; }
/* ---------- 屏幕阅读器专用（视觉隐藏，但仍在可访问树里） ----------
原来的搜索输入框只有 placeholder —— 占位符不算可访问名（WCAG 4.1.2），
所以补一个