/* ===== GitHub 风格博客样式 ===== */
:root {
  --bg: #ffffff;
  --bg-subtle: #f6f8fa;
  --fg: #1f2328;
  --fg-muted: #59636e;
  --border: #d1d9e0;
  --link: #0969da;
  --code-bg: #f6f8fa;
  --shadow: rgba(31, 35, 40, 0.06);
}
[data-theme="dark"] {
  --bg: #0d1117;
  --bg-subtle: #161b22;
  --fg: #e6edf3;
  --fg-muted: #9198a1;
  --border: #30363d;
  --link: #58a6ff;
  --code-bg: #161b22;
  --shadow: rgba(1, 4, 9, 0.5);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC",
    "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg);
  background: var(--bg);
  transition: background-color 0.2s, color 0.2s;
}

/* 仅前台使用纵向布局（让页脚贴底）；后台 .admin-body 保持横向 */
body:not(.admin-body) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* ---- 顶栏（左右顶头） ---- */
/* z-index 30：必须高于 .rail 悬浮栏（20），否则顶栏内 z-90 的头像下拉菜单
   会被困在 header 自己的层叠上下文里、被主页左右侧面板盖住；仍低于抽屉/遮罩（60+） */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  padding: 12px 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.site-title {
  font-size: 17px; font-weight: 600; color: var(--fg);
  display: flex; align-items: center; gap: 9px;
  flex-shrink: 0;
}
.site-title:hover { text-decoration: none; color: var(--link); }
.site-title img.logo {
  width: 32px; height: 32px; border-radius: 8px;
  display: block; flex-shrink: 0;
  box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
}
.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.site-nav a {
  color: var(--fg-muted); font-size: 14.5px; padding: 5px 10px;
  border-radius: 6px;
}
.site-nav a:hover { color: var(--fg); background: var(--bg-subtle); text-decoration: none; }
.site-nav a.active { color: var(--fg); font-weight: 600; }
.theme-toggle {
  border: 1px solid var(--border); background: var(--bg-subtle);
  color: var(--fg-muted); cursor: pointer;
  width: 34px; height: 34px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--fg-muted); }
.theme-toggle svg { width: 16px; height: 16px; }
/* 顶栏布局：主题按钮位于导航与账号区分界线之间，与两侧等距
   （header-inner 的 gap 16px 均分；按钮不再需要单侧 margin） */
.theme-toggle { margin-left: 0; }
/* 顶栏右侧成组：导航 + 主题按钮 + 账号区；gap 9px 与分界线内距一致，
   主题按钮到分界线、分界线到登录按钮的间隔相等 */
.header-right { display: flex; align-items: center; gap: 9px; min-width: 0; }
.header-right .site-nav { justify-content: flex-end; }
[data-theme="light"] .icon-moon, [data-theme="dark"] .icon-sun { display: none; }

/* ---- 布局 ---- */
.container { max-width: 860px; margin: 0 auto; padding: 36px 20px 60px; }

/* ---- 首页 hero ---- */
.hero { padding: 18px 0 34px; border-bottom: 1px solid var(--border); margin-bottom: 30px; }
.hero h1 { font-size: 30px; margin: 0 0 10px; letter-spacing: -0.02em; }
.hero p { color: var(--fg-muted); margin: 0; font-size: 16.5px; }

/* ---- 文章列表 ---- */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-item {
  padding: 22px 0; border-bottom: 1px solid var(--border);
}
.post-item:last-child { border-bottom: none; }
.post-date {
  font-size: 13.5px; color: var(--fg-muted);
  font-variant-numeric: tab-nums;
  display: block; margin-bottom: 6px;
}
.post-item h2 { margin: 0 0 8px; font-size: 21px; letter-spacing: -0.01em; }
.post-item h2 a { color: var(--fg); }
.post-item h2 a:hover { color: var(--link); text-decoration: none; }
.post-excerpt { margin: 0; color: var(--fg-muted); font-size: 15px; }
.post-tags { margin-top: 10px; }
.post-tags .tag {
  display: inline-block; font-size: 12.5px; color: var(--link);
  background: color-mix(in srgb, var(--link) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--link) 25%, transparent);
  border-radius: 999px; padding: 1px 10px; margin-right: 6px;
}

/* ---- 文章页 ---- */
.post-header { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.post-header h1 { font-size: 30px; margin: 0 0 10px; letter-spacing: -0.02em; line-height: 1.3; }
.post-meta { color: var(--fg-muted); font-size: 14px; }
.post-meta .sep { margin: 0 8px; opacity: 0.5; }

/* ---- 正文排版 ---- */
.post-body h2, .page-body h2 {
  font-size: 22px; margin: 34px 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.post-body h3, .page-body h3 { font-size: 18px; margin: 26px 0 10px; }
.post-body p, .page-body p { margin: 0 0 16px; }
.post-body ul, .post-body ol, .page-body ul, .page-body ol { margin: 0 0 16px; padding-left: 26px; }
.post-body li, .page-body li { margin: 4px 0; }
.post-body blockquote, .page-body blockquote {
  margin: 0 0 16px; padding: 10px 18px;
  border-left: 4px solid var(--border);
  background: var(--bg-subtle); border-radius: 0 8px 8px 0;
  color: var(--fg-muted);
}
.post-body blockquote p, .page-body blockquote p { margin: 0; }
.post-body code, .page-body code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 86%; background: var(--code-bg);
  padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border);
}
.post-body pre, .page-body pre {
  background: var(--code-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px; overflow-x: auto; margin: 0 0 16px;
  line-height: 1.6;
}
.post-body pre code, .page-body pre code {
  background: none; border: none; padding: 0; font-size: 13.5px;
}
.post-body table, .page-body table {
  border-collapse: collapse; width: 100%; margin: 0 0 16px; font-size: 15px;
}
.post-body th, .post-body td, .page-body th, .page-body td {
  border: 1px solid var(--border); padding: 7px 13px; text-align: left;
}
.post-body th, .page-body th { background: var(--bg-subtle); font-weight: 600; }
.post-body hr, .page-body hr { border: none; border-top: 1px solid var(--border); margin: 30px 0; }

.post-footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); }
.back-link { font-size: 14.5px; }

/* ---- 归档页 ---- */
.archive-year { font-size: 19px; margin: 26px 0 12px; color: var(--fg); }
.archive-list { list-style: none; margin: 0 0 8px; padding: 0; }
.archive-list li {
  display: flex; gap: 14px; padding: 8px 0;
  border-bottom: 1px dashed var(--border); font-size: 15.5px;
}
.archive-list .date { color: var(--fg-muted); font-size: 13.5px; font-variant-numeric: tab-nums; min-width: 92px; }

/* ---- 卡片网格（下载中心入口等） ---- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; }
.card {
  display: block; padding: 18px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--bg-subtle);
  color: var(--fg); transition: border-color 0.15s, transform 0.15s;
}
.card:hover { border-color: var(--link); text-decoration: none; transform: translateY(-2px); }
.card h3 { margin: 0 0 6px; font-size: 16px; color: var(--link); }
.card p { margin: 0; font-size: 13.5px; color: var(--fg-muted); }

/* ---- 页脚（等间距规范：分界线→内容 = 内容之间 = 内容→底边）---- */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--border);
  padding: 20px 20px;
  margin-top: 120px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 13.5px;
}
.site-footer .links { margin-bottom: 0; }
.site-footer p { margin: 0; }
.site-footer .links a { margin: 0 8px; }

/* ---- 响应式 ---- */
@media (max-width: 600px) {
  .hero h1, .post-header h1 { font-size: 24px; }
  .header-inner { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  .site-nav a { padding: 4px 7px; font-size: 13.5px; }
  .container { padding: 26px 16px 48px; }
}

/* ---- 文章互动区 ---- */
.post-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 28px 0 8px; padding: 16px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.action-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px; font-size: 14px;
  background: var(--bg-subtle); border: 1px solid var(--border); color: var(--fg-muted);
}
.action-btn { cursor: pointer; font-family: inherit; }
.action-btn:hover { color: var(--fg); border-color: var(--fg-muted); }
.action-btn:active { transform: scale(0.97); }

/* ---- 功能未完成弹窗 ---- */
.modal-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgb(0 0 0 / 45%); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.modal-mask[hidden] { display: none; }
.modal-box {
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 28px 32px; max-width: 360px; width: calc(100% - 40px);
  text-align: center; box-shadow: 0 12px 40px rgb(0 0 0 / 18%);
}
.modal-box h3 { margin: 0 0 10px; font-size: 18px; }
.modal-box p { margin: 0 0 20px; color: var(--fg-muted); font-size: 14.5px; line-height: 1.6; }

/* ---- 左右悬浮面板（fixed，不随滚动） ---- */
.float-left, .float-right { position: fixed; top: 78px; z-index: 9; }
.float-left { left: 18px; display: flex; flex-direction: column; gap: 6px; }
.float-right { right: 18px; width: 196px; }
.float-link {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 9px; font-size: 13.5px;
  background: var(--bg); border: 1px solid var(--border); color: var(--fg-muted);
  box-shadow: 0 1px 3px rgb(0 0 0 / 6%); text-decoration: none;
}
.float-link:hover { color: var(--fg); border-color: var(--fg-muted); text-decoration: none; }
.float-link.active { color: var(--link); border-color: var(--link); font-weight: 600; }
.float-ico { font-size: 15px; line-height: 1; }
.float-panel {
  background: var(--bg); border: 1px solid var(--border); border-radius: 11px;
  padding: 14px 16px; box-shadow: 0 2px 10px rgb(0 0 0 / 7%);
  max-height: calc(100vh - 120px); overflow-y: auto;
}
.float-panel h3 { margin: 0 0 10px; font-size: 14px; }
.float-panel ul { list-style: none; margin: 0; padding: 0; }
.float-panel li { padding: 8px 0; border-top: 1px solid var(--border); }
.float-panel li:first-child { border-top: none; padding-top: 0; }
.float-panel li a { display: block; font-size: 13.5px; line-height: 1.45; color: var(--fg); }
.float-panel li a:hover { color: var(--link); }
.float-author { display: block; margin-top: 3px; font-size: 12px; color: var(--fg-muted); }
.float-empty { font-size: 12.5px; color: var(--fg-muted); }
@media (max-width: 1200px) {
  .float-left, .float-right { display: none; }
}

/* ===== v2026-10-23：用户侧左右悬浮栏 + 卡片化重构 ===== */
/* 主体容器宽度统一在文件末尾的「四页统一主体宽度」里定义，此处不再重复 */

/* ===== 页面标题区（四页统一规范）=====
 *
 * 间距由外层 .page-head 的 margin-bottom 统一控制，**不再让 h1/p 各自带
 * 底部外边距**。原因：以前 `.page-head p { margin: 0 0 26px }` 承担了
 * 标题区到正文的距离，于是"有副标题"和"没有副标题"的页面，
 * 标题到正文的间距会差 26px —— 关于页没有副标题时标题就紧贴正文。
 *
 * 现在：
 *   距 main 顶部 = main 的 padding-top（34px，四页一致）
 *   标题 → 正文 = .page-head 的 margin-bottom（28px，四页一致）
 *   标题 → 副标题 = p 的 margin-top（8px）
 * 三者都只有一个来源，改起来不会再出现某页对不上的情况。
 */
.page-head { margin: 0 0 28px; }
.page-head h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.page-head p {
  margin: 8px 0 0;
  color: var(--fg-muted);
  font-size: 14.5px;
  line-height: 1.6;
}
/* 标题区后面紧跟的第一个正文块，去掉自身的顶部外边距。
 *
 * 必须这样做：.page-body h2 带 margin-top: 34px，而 .page-head 带
 * margin-bottom: 28px，两者是相邻兄弟，**外边距会叠加**（不是相加就是取大，
 * 这里是取大 → 34px），于是"下载页"的标题到正文变成 34px 而不是 28px，
 * 跟首页（57.4px 里含卡片自身 margin）又对不上。
 * 把第一个子元素的 margin-top 归零，间距就严格等于 .page-head 的 margin-bottom。
 */
.page-head + .page-body > :first-child,
.page-head + .page-body > :first-child > :first-child,
.page-head + * > :first-child {
  margin-top: 0;
}

/* 主页文章卡片 */
.post-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px;
  margin-bottom: 20px; background: var(--bg); scroll-margin-top: 90px;
  transition: border-color .15s, box-shadow .15s;
}
.post-card:hover { border-color: var(--link); box-shadow: 0 2px 10px var(--shadow); }
.post-card h2 { margin: 0 0 8px; font-size: 19.5px; line-height: 1.45; letter-spacing: -0.01em; }
.post-card h2 a { color: var(--fg); }
.post-card h2 a:hover { color: var(--link); text-decoration: none; }
.post-card .meta {
  font-size: 13px; color: var(--fg-muted); margin-bottom: 12px;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.post-card p { margin: 0 0 14px; color: var(--fg-muted); font-size: 15px; }
.post-card .more { font-size: 13.5px; }
.post-card .post-tags { margin-bottom: 10px; }

/* 下载列表 */
.file-list { margin-top: 8px; }
.file-row {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px;
  background: var(--bg); scroll-margin-top: 90px;
}
.file-ico {
  width: 38px; height: 38px; border-radius: 9px; background: var(--bg-subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.file-main { flex: 1; min-width: 0; }
.file-main b { display: block; font-size: 15px; font-weight: 600; word-break: break-all; }
.file-main span { font-size: 12.5px; color: var(--fg-muted); }
.file-dl {
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 12px;
  font-size: 13px; color: var(--fg-muted); flex-shrink: 0;
}
.file-dl:hover { color: var(--link); border-color: var(--link); text-decoration: none; }

/* 左右悬浮栏：顶部与第一篇文章上边框对齐（JS 精确校正） */
.rail { position: fixed; top: 170px; z-index: 20; }

.rail-left { left: max(12px, calc(50vw - 622px)); width: 180px; }
.toc-head {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-muted); margin: 0 0 10px; padding-left: 11px; font-weight: 600;
}
.toc-list {
  list-style: none; margin: 0; padding: 0; position: relative;
  max-height: 56vh; overflow-y: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.toc-list::-webkit-scrollbar { display: none; }
.toc-list li { margin: 0; }
.toc-list a {
  display: block; padding: 7px 11px; font-size: 13px; line-height: 1.45;
  color: var(--fg-muted); border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: color .16s, border-color .16s;
}
.toc-list a:hover { color: var(--fg); text-decoration: none; }
.toc-list a.active { color: var(--link); border-left-color: var(--link); font-weight: 600; }

.rail-right {
  right: max(12px, calc(50vw - 702px)); width: 260px;
  max-height: calc(100vh - 210px); overflow-y: auto; scrollbar-width: none;
}
.rail-right::-webkit-scrollbar { display: none; }
.side-card {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); padding: 14px 15px; margin-bottom: 12px;
}
.side-card h3 {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-muted); font-weight: 600;
}
.pin-list { list-style: none; margin: 0; padding: 0; }
.pin-list li {
  padding: 7px 0; border-bottom: 1px dashed var(--border);
  font-size: 13.5px; line-height: 1.5;
}
.pin-list li:last-child { border-bottom: none; padding-bottom: 0; }
.pin-list a { display: block; color: var(--fg); }
.pin-list a:hover { color: var(--link); text-decoration: none; }
.pin-author { display: block; font-size: 11.5px; color: var(--fg-muted); margin-top: 2px; }

.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-list li {
  font-size: 13px; line-height: 1.6; padding: 8px 10px; border-radius: 7px;
  background: var(--bg); border-left: 3px solid var(--border); margin-bottom: 8px;
}
.notice-list li:last-child { margin-bottom: 0; }
.notice-list li b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.notice-list li p { margin: 0; color: var(--fg-muted); font-size: 12.5px; }
.notice-list li.n-info { border-left-color: var(--link); }
.notice-list li.n-info b { color: var(--link); }
.notice-list li.n-warning { border-left-color: #9a6700; }
.notice-list li.n-warning b { color: #9a6700; }
.notice-list li.n-ok { border-left-color: #1a7f37; }
.notice-list li.n-ok b { color: #1a7f37; }
.notice-list li.n-danger { border-left-color: #cf222e; }
.notice-list li.n-danger b { color: #cf222e; }

.stat-list { list-style: none; margin: 0; padding: 0; }
.stat-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; font-size: 12.5px; padding: 5px 0;
}
.stat-list li span { color: var(--fg-muted); }
.stat-list li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-list li b.ok { color: #1a7f37; }
.stat-note { margin: 9px 0 0; font-size: 11.5px; color: var(--fg-muted); }

/* 暗色下语义色提亮 */
[data-theme="dark"] .notice-list li.n-warning { border-left-color: #d29922; }
[data-theme="dark"] .notice-list li.n-warning b { color: #d29922; }
[data-theme="dark"] .notice-list li.n-ok { border-left-color: #3fb950; }
[data-theme="dark"] .notice-list li.n-ok b { color: #3fb950; }
[data-theme="dark"] .notice-list li.n-danger { border-left-color: #f85149; }
[data-theme="dark"] .notice-list li.n-danger b { color: #f85149; }
[data-theme="dark"] .stat-list li b.ok { color: #3fb950; }

/* 响应式：窄屏隐藏侧栏，避免遮挡正文 */
@media (max-width: 1279px) {
  .rail { display: none; }
}
@media (max-width: 900px) {
  main.container { padding: 24px 16px 80px; }
  .page-head h1 { font-size: 24px; }
  .post-card { padding: 18px; }
}

/* ===== 分页面宽度（已废弃，见文件末尾"四页统一主体宽度"）=====
 *
 * 这里原来的 1000 / 920 / 1140 / 1040 四组覆盖已全部删除：
 * 宽度统一由末尾那一条 main.container 决定，避免同一个属性被
 * 五处规则层层覆盖 —— 那种写法导致改一个页面的宽度时，
 * 很容易漏掉另一处，最后自己也说不清哪个值真正生效。
 *
 * 下载页的侧栏位置偏移也一并删除，改用统一的 calc(50vw - min(540px…))。
 */
/* （原“≤1519 隐藏下载页右栏”规则已删：与文件末尾的显示规则冲突，
     且特异性压过了 .rail 的手机端隐藏，导致下载页右栏在手机上显示——2026-10-24 修复） */

/* ===== 归档列表：卡片化（与主页文章卡片呼应）===== */
.archive-list { list-style: none; margin: 0 0 6px; padding: 0; }
.archive-list li {
  display: flex; align-items: baseline; gap: 16px;
  padding: 12px 16px; margin-bottom: 9px;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 15.5px; background: var(--bg);
  transition: border-color .15s, box-shadow .15s;
}
.archive-list li:hover { border-color: var(--link); box-shadow: 0 2px 8px var(--shadow); }
.archive-list li a { flex: 1; min-width: 0; color: var(--fg); font-weight: 500; }
.archive-list li a:hover { color: var(--link); text-decoration: none; }
.archive-list .date {
  color: var(--fg-muted); font-size: 13.5px;
  font-variant-numeric: tabular-nums; min-width: 92px; flex-shrink: 0;
}
.archive-year {
  font-size: 15px; margin: 26px 0 12px; color: var(--fg-muted);
  letter-spacing: .04em; font-weight: 600;
}
/* 第一个年份标题不再单独设 margin-top —— 标题区到内容的距离由 .page-head 统一管
 * （原先这里写 margin-top:4px，理由是"紧接页面标题不要太空"，
 *  但那样归档页的间距就和其他三页不一样了）。 */
.archive-year:first-of-type { margin-top: 0; }

/* ===== 侧栏紧凑化（按参考图收窄，更接近窄条形态）===== */
.rail-left { width: 160px; left: max(12px, calc(50vw - 602px)); }
.rail-right { width: 210px; right: max(12px, calc(50vw - 652px)); }

.toc-head { font-size: 10.5px; margin-bottom: 8px; padding-left: 10px; letter-spacing: .08em; }
.toc-list a { font-size: 12.5px; padding: 6px 10px; line-height: 1.4; }

.side-card { padding: 12px 13px; margin-bottom: 10px; border-radius: 9px; }
.side-card h3 { font-size: 11px; margin-bottom: 8px; letter-spacing: .06em; }
.pin-list li { font-size: 12.5px; padding: 6px 0; line-height: 1.4; }
.pin-author { font-size: 11px; margin-top: 1px; }
.notice-list li { font-size: 12.5px; padding: 7px 9px; margin-bottom: 7px; }
.notice-list li b { font-size: 12px; margin-bottom: 1px; }
.notice-list li p { font-size: 12px; line-height: 1.5; }
.stat-list li { font-size: 12px; padding: 4px 0; }
.stat-note { font-size: 11px; margin-top: 7px; line-height: 1.5; }

/* 宽页面 / 下载页的宽度覆盖已删除 —— 四页统一 1080，见文件末尾 */

/* ===== 最终布局：四页统一主体宽度 + 侧栏自适应 =====
 *
 * 主体宽度只有一个值：1080px。
 *
 * 历史坑：这里曾按页面分别给 1000 / 1140 / 1040 / 1180，理由是
 * "归档、关于没有侧栏，可以用得更宽"。但侧栏定位公式是
 *     left: calc(50vw - min(540px, calc(50vw - 280px)) - 202px)
 * 其中 540 就是 1080 的一半 —— 侧栏从一开始就是按 1080 设计的。
 * 页面比 1080 宽时，正文向两侧长出去、压到侧栏底下；
 * 比 1080 窄时（下载页 1040），侧栏边距又会莫名变宽。
 * 统一到 1080 后，四页文字左边线严格对齐，侧栏也回到设计意图。
 */
main.container {
  width: 100%;
  max-width: 1080px;
  padding: 34px 24px 70px;
  flex: 1 0 auto;
}
/* 大屏时为两侧侧栏预留 280px/侧，内容才不会压到面板 */
@media (min-width: 1280px) {
  main.container { width: calc(100% - 560px); }
}

/* 文章详情：保持舒适阅读宽度（长文过宽影响阅读，属刻意例外，非不一致） */
body[data-page="other"] main.container {
  width: 100%;
  max-width: 900px;
}

/* 侧栏：恢复常规宽度，位置随内容实际宽度自适应
   2026-10-24：左栏向左延长，左缘与顶栏 logo 左缘对齐（header 内距 28px），
   右缘保持在主栏左侧 22px 不变 → 宽度 = 主栏左缘 - 28 - 22 */
.rail-left {
  left: 28px;
  width: calc(50vw - min(540px, calc(50vw - 280px)) - 50px);
}
.rail-right {
  width: 260px;
  right: max(12px, calc(50vw - min(540px, calc(50vw - 280px)) - 282px));
}
/* 下载页右栏已按站长要求整体移除（2026-10-24），原定位/显示规则一并删除 */

/* 恢复常规字号（取消上一版过度紧凑） */
.toc-head { font-size: 11px; margin-bottom: 10px; padding-left: 11px; }
.toc-list a { font-size: 13px; padding: 7px 11px; }
.side-card { padding: 14px 15px; margin-bottom: 12px; border-radius: 10px; }
.side-card h3 { font-size: 12px; margin-bottom: 10px; }
.pin-list li { font-size: 13.5px; padding: 7px 0; }
.notice-list li { font-size: 13px; padding: 8px 10px; margin-bottom: 8px; }
.stat-list li { font-size: 12.5px; padding: 5px 0; }

/* ===== 移动端适配（2026-10-23）===== */

/* 长 URL / 行内代码不横向撑破容器 */
.post-body, .page-body { overflow-wrap: break-word; }

@media (max-width: 900px) {
  .header-inner { padding: 10px 16px; gap: 10px; }
  main.container { padding: 24px 16px 60px; }
  .page-head { margin-bottom: 22px; }
  .page-head h1 { font-size: 24px; }
  .page-head p { font-size: 14px; }
  .post-card { padding: 18px; margin-bottom: 16px; }
  .post-card h2 { font-size: 18px; }
  .site-footer { margin-top: 72px; }
}

@media (max-width: 600px) {
  /* 顶栏：品牌与账号区固定，只有中间导航可横向滑动。
     账号区不能放进 .site-nav，否则会被导航的 overflow-x 裁到屏幕外。 */
  .header-inner { padding: 10px 14px; gap: 6px; flex-wrap: nowrap; }
  .site-title { font-size: 16px; gap: 7px; flex: 0 0 auto; }
  .site-title img.logo { width: 28px; height: 28px; border-radius: 7px; }
  .site-nav {
    gap: 0; flex-wrap: nowrap; min-width: 0; flex: 1 1 auto;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a {
    padding: 6px 8px; font-size: 13.5px; white-space: nowrap;
    display: inline-flex; align-items: center; min-height: 34px;
  }
  .theme-toggle { width: 32px; height: 32px; margin-left: 2px; flex-shrink: 0; }
  .nav-account { flex-shrink: 0; padding-left: 8px; margin-left: 0; }

  /* 内容与页头 */
  main.container { padding: 20px 14px 56px; }
  .page-head { margin-bottom: 18px; }
  .page-head h1 { font-size: 22px; }
  .page-head p { font-size: 13.5px; }

  /* 主页卡片 */
  .post-card { padding: 16px; margin-bottom: 14px; border-radius: 10px; }
  .post-card h2 { font-size: 17px; line-height: 1.45; }
  .post-card .meta { font-size: 12px; gap: 10px; margin-bottom: 10px; }
  .post-card p { font-size: 14.5px; margin-bottom: 12px; }
  .post-card .more { font-size: 13px; }

  /* 下载列表 */
  .file-row { padding: 13px 14px; gap: 11px; margin-bottom: 10px; }
  .file-ico { width: 32px; height: 32px; font-size: 16px; border-radius: 8px; }
  .file-main b { font-size: 14px; }
  .file-main span { font-size: 12px; }
  .file-dl {
    padding: 6px 11px; font-size: 12.5px; min-height: 34px;
    display: inline-flex; align-items: center;
  }

  /* 归档 */
  .archive-list li { padding: 11px 13px; gap: 10px; font-size: 14px; }
  .archive-list .date { min-width: 72px; font-size: 12px; }
  .archive-year { font-size: 14px; margin: 20px 0 10px; }

  /* 文章详情 */
  .post-header { margin-bottom: 22px; padding-bottom: 16px; }
  .post-header h1 { font-size: 22px; }
  .post-meta { font-size: 12.5px; }
  .post-meta .sep { margin: 0 5px; }
  .post-body h2, .page-body h2 { font-size: 19px; margin: 26px 0 12px; }
  .post-body h3, .page-body h3 { font-size: 16.5px; margin: 20px 0 8px; }
  .post-body p, .page-body p { font-size: 15.5px; line-height: 1.8; }
  .post-body pre, .page-body pre { padding: 12px; border-radius: 8px; }
  .post-body pre code, .page-body pre code { font-size: 12.5px; }
  .post-body ul, .post-body ol, .page-body ul, .page-body ol { padding-left: 20px; }
  .post-body blockquote, .page-body blockquote { padding: 8px 14px; }

  /* 表格横向滚动，避免挤压变形 */
  .post-body table, .page-body table {
    display: block; overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* 互动区换行 */
  .post-actions { flex-wrap: wrap; gap: 10px; }

  /* 页脚：保持等间距规范，仅缩小尺寸 */
  .site-footer { gap: 16px; padding: 18px 14px; margin-top: 56px; font-size: 12.5px; }
  .site-footer .links a { margin: 0 6px; }
}

@media (max-width: 400px) {
  main.container { padding: 18px 12px 52px; }
  .site-title { font-size: 15px; }
  .site-title img.logo { width: 26px; height: 26px; }
  .site-nav a { padding: 5px 6px; font-size: 12.5px; }
  .page-head h1 { font-size: 20px; }
  .post-card h2 { font-size: 16px; }
  .post-header h1 { font-size: 20px; }
  .file-main b { font-size: 13.5px; }
}

/* ===== 手机端抽屉（≤1279 显示；桌面完全隐藏）===== */
.drawer-fab, .drawer-mask, .drawer { display: none; }

@media (max-width: 1279px) {
  .drawer-fab {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; right: 16px; bottom: 22px; z-index: 60;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--link); color: #fff; border: none; cursor: pointer;
    box-shadow: 0 6px 20px rgb(0 0 0 / 22%);
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s;
  }
  .drawer-fab:active { transform: scale(.94); }
  .drawer-fab svg { width: 22px; height: 22px; }

  .drawer-mask {
    display: block; position: fixed; inset: 0; z-index: 70;
    background: rgb(0 0 0 / 45%);
    opacity: 0; pointer-events: none; transition: opacity .22s;
  }
  .drawer-mask.open { opacity: 1; pointer-events: auto; }

  .drawer {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 80;
    width: min(84vw, 340px);
    background: var(--bg); border-right: 1px solid var(--border);
    transform: translateX(-100%); transition: transform .24s ease;
    overflow: hidden;
  }
  .drawer.open { transform: translateX(0); box-shadow: 0 0 40px rgb(0 0 0 / 22%); }

  .drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
  }
  .drawer-title { font-size: 14px; font-weight: 600; }
  .drawer-close {
    border: none; background: transparent; color: var(--fg-muted);
    font-size: 16px; line-height: 1; padding: 6px 8px; cursor: pointer;
  }
  .drawer-tabs { display: flex; padding: 0 8px; border-bottom: 1px solid var(--border); }
  .drawer-tab {
    flex: 1; border: none; background: transparent; color: var(--fg-muted);
    font: inherit; font-size: 13.5px; padding: 11px 8px; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  .drawer-tab.active { color: var(--link); border-bottom-color: var(--link); font-weight: 600; }

  .drawer-body {
    flex: 1; overflow-y: auto; padding: 14px 12px 28px;
    -webkit-overflow-scrolling: touch;
  }
  .drawer .toc-head { padding-left: 4px; margin-bottom: 8px; }
  .drawer .toc-list {
    max-height: none; overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  .drawer .toc-list a { padding: 11px 10px; font-size: 14px; border-radius: 8px; }
  .drawer .toc-list a.active { background: var(--bg-subtle); }
  .drawer .side-card { margin-bottom: 10px; }
  .drawer-empty { color: var(--fg-muted); font-size: 13px; padding: 8px 4px; }

  body.drawer-open { overflow: hidden; }
}

@media (max-width: 400px) {
  .drawer-fab { width: 48px; height: 48px; right: 14px; bottom: 18px; }
}

/* ===== 文章内附件卡片：/download/<id> 渲染为卡片而非裸超链接 =====
   仅类选择器作用域（style.css 同时被后台登录页引用，禁全局选择器，见铁律 8.1） */
.file-card {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg-subtle);
}
.file-card-icon { flex: none; font-size: 18px; }
.file-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.file-card-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card-size { font-size: 12.5px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card-btn {
  flex: none; padding: 6px 14px; font-size: 13px;
  border: 1px solid var(--link); color: var(--link);
  border-radius: 7px; text-decoration: none;
}
.file-card-btn:hover { background: var(--link); color: #fff; text-decoration: none; }
.file-card-missing { opacity: .65; border-style: dashed; }

/* ===== 首页列表置顶徽标（排在最前但非最新，需要解释为什么） ===== */
.pin-badge {
  display: inline-block; margin-right: 8px; padding: 2px 8px;
  vertical-align: 2px; font-size: 11px; font-weight: 600; letter-spacing: .05em;
  color: var(--link); background: var(--bg-subtle);
  border: 1px solid var(--link); border-radius: 999px;
}

/* ===== 短页面页脚贴底（sticky footer，2026-10-24）=====
   管理页等内容少的页面，正文+页脚 120px 间距常刚好超出视口几像素，
   出现"内容不满一屏却有滚动条"。改为 flex 贴底：短页页脚沉底不溢出。
   ⚠️ 必须 body:not(.admin-body) 限定——style.css 被后台登录页共用，
   历史上无此限定的 body{flex-direction:column} 打崩过整个后台（铁律 8.1）。 */
body:not(.admin-body) { display: flex; flex-direction: column; min-height: 100vh; }
body:not(.admin-body) main { flex: 1 0 auto; }
/* 这里只重置 margin-top，绝不动 padding。
   ⚠️ 历史坑（2026-10-24 引入、10-25 修复）：当时为了"腾出 120px 间距又让短页
      不溢出"，写成 padding-top: 120px，以为"间距从 border 外侧挪到内侧、背景同色
      所以等效"。这个判断是错的：border-top 就是那条分界线，间距挪到内侧后
      分界线位置不动、文字却被往下推了 120px，于是
      「分界线→文字」=120px 而「文字→底边」=20px，上下差 100px，肉眼一眼看出太高。
      正解：间距交给 main 的 padding-bottom（70px），footer 自身 padding 保持
      基础样式的 20px 上下等值（分界线→文字 = 文字之间 = 文字→底边）。
   ⚠️ 也不要在这里写 padding-top: 20px——本选择器优先级 (0,2,1) 会压过
      @media(max-width:600px) 里 .site-footer{padding:18px 14px} 的 (0,1,0)，
      移动端就会变成上 20 / 下 18，重新制造 2px 不对称。 */
body:not(.admin-body) .site-footer { margin-top: 0; }

/* ===== 矮视口（缩放/小屏笔记本）压掉"内容不满屏却有滚动条" =====
   页面固定最小总高原本 60+502+208=770px：视口矮于它就溢出几像素。
   按视口高度逐级压缩，属 8.4 铁律的响应式例外。全部 :not(.admin-body) 限定。
   ⚠️ 两段间距要分开调，别混：
      「正文→分界线」由 main 的 padding-bottom 承担；
      「分界线→文字」「文字→底边」由 footer 的 padding-block 承担（必须上下等值）。
      历史上把两者都塞进 footer 的 padding-top，既造出上下不对称，
      又因为增大内距反而更容易溢出视口——方向完全反了。
   ⚠️ 档位必须按 max-height 从大到小排列：这几条选择器优先级完全相同，
      后写的赢，所以 740 那条若排在 710 之后，≤710 时 48px 那档永远不生效。 */
@media (max-height: 760px) {
  body[data-page="manage"]:not(.admin-body) main { padding-bottom: 48px; }
}
@media (max-height: 740px) {
  body[data-page="manage"]:not(.admin-body) main { padding-bottom: 36px; }
  body[data-page="manage"]:not(.admin-body) .site-footer { gap: 12px; }
}
@media (max-height: 710px) {
  body[data-page="manage"]:not(.admin-body) main { padding-bottom: 26px; }
  body[data-page="manage"]:not(.admin-body) .site-footer { padding-block: 16px; gap: 10px; }
}
@media (max-height: 640px) {
  body[data-page="manage"]:not(.admin-body) .site-footer { padding-block: 12px; gap: 6px; }
  /* 极矮视口（如 1366×768 @125% 缩放 → 有效高 614px）正文上内距 34→18，
     属 8.3 间距体系的响应式例外：仅此档位生效 */
  body[data-page="manage"]:not(.admin-body) main { padding-top: 14px; padding-bottom: 14px; }
}

/* ===== 超矮视口兜底（2026-10-24 追加：站长仍见滚动条，继续压死角） ===== */
@media (max-height: 600px) {
  /* 隐藏首页 hero/管理页等 page-head 的副标题行，标题下间距同步收紧。
     仅此档位生效，常规布局不受影响（8.3 的响应式例外）。 */
  body[data-page="manage"]:not(.admin-body) .page-head p { display: none; }
  body[data-page="manage"]:not(.admin-body) .page-head { margin-bottom: 18px; }
  body[data-page="manage"]:not(.admin-body) main { padding-top: 6px; }
  body[data-page="manage"]:not(.admin-body) .hint-line { padding-block: 6px; }
  body[data-page="manage"]:not(.admin-body) .site-footer { padding-block: 4px; gap: 4px; }
}
@media (max-height: 540px) {
  body[data-page="manage"]:not(.admin-body) .site-header { padding-block: 6px; }
  body[data-page="manage"]:not(.admin-body) .site-footer .links { display: none; }
}


/* ===== 文章内独立链接卡片（与 .file-card 同族）：整行链接渲染为卡 ===== */
.link-card-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.link-card {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 0; max-width: 100%; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg-subtle);
  text-decoration: none;
}
.link-card:hover { border-color: var(--link); text-decoration: none; }
.link-card-icon { flex: none; font-size: 17px; }
.link-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.link-card-name {
  font-weight: 600; font-size: 14px; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-card-site {
  font-size: 12.5px; color: var(--fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-card-ext { flex: none; color: var(--fg-muted); font-size: 14px; }
.link-card:hover .link-card-ext { color: var(--link); }


/* ===== 右栏公告：紧凑限高 + 底部渐隐 + 查看详情 ===== */
.notice-clip { position: relative; max-height: 190px; overflow: hidden; }
.notice-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(to bottom, transparent, var(--bg-subtle));
  pointer-events: none;
}
.notice-more {
  display: block; margin-top: 6px; font-size: 12.5px; text-align: right;
  color: var(--link); text-decoration: none;
}
.notice-more:hover { text-decoration: underline; }

/* ===== 公告页（/notices）：完整公告列表 ===== */
.notice-page { max-width: 760px; margin: 0 auto; }
.notice-item {
  background: var(--bg); border: 1px solid var(--border); border-radius: 11px;
  padding: 20px 24px; margin-bottom: 16px;
}
.notice-item.n-warning { border-left: 3px solid #d4a72c; }
.notice-item.n-danger { border-left: 3px solid #cf222e; }
.notice-item.n-success { border-left: 3px solid #1a7f37; }
.notice-item.n-info { border-left: 3px solid var(--link); }
.notice-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.notice-tag {
  font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  color: var(--fg-muted); background: var(--bg-subtle); border: 1px solid var(--border);
}
.notice-head h2 { margin: 0; font-size: 17px; }
.notice-date { margin-left: auto; font-size: 12.5px; color: var(--fg-muted); }
.notice-body p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.75; }
.notice-body p:last-child { margin-bottom: 0; }
.notice-empty { color: var(--fg-muted); text-align: center; padding: 40px 0; }
