/* ============================================================
 * 全站公共样式：主题令牌 + 页脚
 *
 * 【主题令牌是唯一来源】
 *   首页 index.html 是常驻暗色（body.themeDark 写死在 HTML 上）；
 *   其余 15 个页面默认亮色，点页脚「深色」后把 themeDark 类挂到 <html> 上切换。
 *   所有页面消费的是下面同一份令牌，所以暗色配色全站完全一致。
 *
 *   页面专属的令牌（各自 --brand 色相、--muted 等）在页面自己的
 *   `:root.themeDark{…}` 里覆盖即可——同特异度下后出现的规则生效，
 *   而页面 <style> 永远在公共 CSS 之后，所以页面总能赢。
 * ============================================================ */

:root{
  /* 亮色默认令牌。
   * 工具页会在自己的 :root 里覆盖 --bg/--panel/--ink/…（页面 <style> 在公共 CSS 之后，
   * 同特异度后者胜）；这里同时给出首页与 404 需要的 --bg0/--bg1/--bg2/--card，
   * 让它们也能跟随主题切换，而不是各写一份。 */
  --bg0:#f4f5fa; --bg1:#ffffff; --bg2:#e3e8f3; --card:#ffffff;
  --bg:#f4f5fa; --panel:#ffffff;
  --ink:#1a1f33; --ink-2:#4a5568; --muted:#6a7191;
  --line:rgba(20,30,60,.12);
  --brand:#2f6fed; --brand2:#0f9d58;
  --shadow:0 1px 2px rgba(26,31,51,.04),0 10px 28px rgba(26,31,51,.06);
  color-scheme:light;
}

:root.themeDark,
body.themeDark{
  --bg0:#0f141c; --bg1:#1a2332; --bg2:#121925; --card:#182233;
  --bg:#0f141c; --panel:#1a2332;
  --ink:#e8eef8; --ink-2:#9fb0c6; --muted:#8b97ab;
  --line:rgba(255,255,255,.08);
  --brand:#5b8def; --brand2:#3ecf8e;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.45);
  color-scheme:dark;
}

/* ---------- 全站统一顶栏（首页除外） ----------
   15 个页面共用同一份标记与样式：左边站点标识，中间当前页面，右边回全部工具。
   宽度自己管，不依赖各页的 .wrap（404 的 .wrap 是 640px 居中的，套过来会串味）。 */
.siteTop{
  position:sticky;top:0;z-index:30;
  background:var(--panel);border-bottom:1px solid var(--line);
}
.siteTopInner{
  max-width:1120px;margin:0 auto;padding:0 18px;
  display:flex;align-items:center;gap:10px;height:56px;
}
.siteTopBrand{
  display:flex;align-items:center;gap:9px;flex:none;
  text-decoration:none;color:var(--ink);font-size:15px;font-weight:750;
}
.siteTopBrand:hover{color:var(--brand)}
.siteTopMark{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:var(--brand);display:grid;place-items:center;
}
.siteTopMark svg{display:block}
.siteTopSep{color:var(--muted);opacity:.55;user-select:none;flex:none}
.siteTopCur{
  font-size:13.5px;font-weight:650;color:var(--muted);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 「全部工具」与主题按钮是并排的一对，几何必须一致。
   病因：原先只有主题按钮写了 line-height:1，而「全部工具」是行内元素、
   继承 body 的行高（1.5~1.6），于是内容盒一个 13px、一个约 20px，
   两个胶囊一高一矮（还随各页 body 的行高变化）。
   所以这里把决定尺寸的属性合并成一条共用规则，并显式定高：
   inline-flex + 定高 + box-sizing:border-box，高度就与行高、与图标大小彻底解耦。
   以后再加同类按钮，尺寸往这条规则上靠就不会再走样。 */
.siteTopHome,.siteTopTheme{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;height:32px;padding:0 12px;
  font:inherit;font-size:12.5px;font-weight:650;line-height:1;
  border:1px solid var(--line);border-radius:999px;
  color:var(--muted);transition:.15s;
}
.siteTopHome{margin-left:auto;text-decoration:none}
.siteTopHome:hover{color:var(--brand);border-color:var(--brand)}
.siteTopHome:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* 主题切换：原先在页脚，现在搬到顶栏最右（「全部工具」旁边）。
   .siteTopHome 上的 margin-left:auto 会把这一串一起推到右边，所以按钮自然落位。
   配色全部走令牌，因此自动跟随两套主题与各页自己的 --brand；
   两个图标只显示「可以去往」的那个：亮色下月亮、暗色下太阳。 */
.siteTopTheme{gap:5px;background:transparent;cursor:pointer}
.siteTopTheme:hover{color:var(--brand);border-color:var(--brand)}
.siteTopTheme:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.siteTopTheme svg{width:13px;height:13px;flex:none;display:block}
.siteTopTheme .iSun{display:none}
.themeDark .siteTopTheme .iMoon{display:none}
.themeDark .siteTopTheme .iSun{display:block}
@media (max-width:600px){
  .siteTopInner{height:50px;gap:8px;padding:0 14px}
  .siteTopName{display:none}
  .siteTopSep{display:none}
  .siteTopHome,.siteTopTheme{height:28px;padding:0 10px}   /* 两个一起缩，保持等高 */
  .siteTopTheme #themeToggleLabel{display:none}   /* 窄屏只留图标，省横向空间 */
}

/* ---------- 页脚 ----------
   宽度与左右内边距跟 .siteTopInner 及工具页 .wrap 保持一致（1120 / 18px），
   这样页脚文字的左边缘与顶栏、与页面内容在同一条竖线上。 */
.siteFooter{
  max-width:1120px;width:100%;margin:0 auto;padding:16px 18px 28px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;
  font-size:12.5px;line-height:1.5;color:#66758a;box-sizing:border-box;
  background:transparent;border:0;
}
.siteFooter.onlyLinks{justify-content:center;}
.siteFooterLeft,.siteFooterRight,.siteFooterLinks{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  font-size:12.5px;line-height:1.5;color:inherit;
}
.siteFooter a,.siteFooterLinks a{color:inherit;text-decoration:none;}
.siteFooter a:hover,.siteFooterLinks a:hover{color:#2f6fed;text-decoration:underline;}
.siteFooterSep{opacity:.45;user-select:none;}
.siteFooterWx{color:#6a9a2e;font-weight:600;}
.siteFooterPriv{color:#5a8f43;font-weight:600;display:inline-flex;align-items:center;gap:5px;}
.siteFooterPriv::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:currentColor;opacity:.75;
}
.themeDark .siteFooter{color:#8b97ab;}
.themeDark .siteFooter a:hover{color:#c5d4ea;}
.themeDark .siteFooterWx{color:#9ccc4a;}
.themeDark .siteFooterPriv{color:#7fc96a;}

/* 主题切换按钮已从页脚搬到顶栏，样式见上面的 .siteTopTheme
   （类名一起改了：它已经不在页脚里，留着 siteFooter 前缀会误导人） */

@media (max-width:720px){
 .siteFooter{padding:14px 16px 22px;justify-content:center;text-align:center;}
 .siteFooterLeft,.siteFooterRight,.siteFooterLinks{justify-content:center;}
}