/* ============================================================================
   空 · 水 · 云 · 鸟 — 样式统一层（unify.css）
   ----------------------------------------------------------------------------
   用途：把脱离设计系统的页面（图库 / 后台 / 错误页）拉回首页与详情页
        已经确立的语言。**只做覆盖与补全，不改结构、不改 site.css、不动后端。**

   统一依据（全部取自站点现存做法，不是新发明的口味）：
     1) 令牌   —— 颜色/阴影/圆角/字号一律用 site.css 的 :root 变量，
                  本文件不声明任何新颜色值。
     2) 字体   —— 标题用 --font-display（中文 Windows 实际落宋体/衬线），
                  正文用 --font-body，UI/表单用 --font-ui。
                  楷体 --font-kai 只留给开场仪式层，不扩散到正文。
     3) 形     —— 站点基线是 .anime{ 白卡 + 1px 细边框 + var(--radius) }；
                  胶囊 999px 只给标签/按钮。禁止出现第三种圆角写法。
     4) 字号   —— 只用 --fs-* 十二档，禁止 0.5px 级的随手取值。
     5) 页级标题、页脚备案 —— 收敛成 .page-head / .page-foot 两个组件，
                  让"图库 / 后台 / 错误页"看起来和首页出自同一只手。

   加载顺序：必须放在 site.css 之后。
   ============================================================================ */

/* ── 1. 补齐 site.css 未定义、但各页到处手写的令牌 ─────────────────────────── */
:root{
  /* ⚠️ 命名冲突修复（同名不同值 = 最危险的一种「不统一」）：
     --ink 在首页开场里特指 #2b4a63（那一抹墨蓝），在后台里却指 #2c333e（正文色）。
     同一个名字挂着两个颜色，谁先加载谁生效 —— 这正是「改了没生效」的温床。
     收成两个语义名：
       --ink       正文色（= site.css 的 --text），后台沿用它
       --ink-seal  首页开场那抹墨蓝，只用于仪式层与深色层 */
  --ink:var(--text);
  --ink-seal:#2b4a63;
  /* 三档以上圆角写法统一收成两个令牌 + 一个胶囊 */
  --radius-pill:999px;
  /* 后台/表单这类 UI 层字体，给它一个正式出处（site.css 已有 --font-latin） */
  --font-ui:var(--font-latin);
  /* 仪式层字体：只允许开场四字使用 */
  --font-kai:"KaiTi","STKaiti","Kaiti SC","楷体","Songti SC","Noto Serif SC","STSong",serif;
  /* 统一缓动，避免各页各写一串 cubic-bezier */
  --ease:cubic-bezier(.22,.7,.3,1);
  /* 内容栏宽：首页/详情页用 --wrap(1180)，工具与列表页收窄一档更好读 */
  --wrap-narrow:1080px;
}

/* ── 2. 页级标题：三个页面共用同一套排版（对齐 site.css 的 .section-head h2） ── */
.page-head{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:0 0 18px;margin:0 0 26px;
  border-bottom:1px solid var(--border);
}
.page-head .kicker{
  font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
}
.page-head h1{
  margin:0;
  font-family:var(--font-display);          /* ← 关键：标题回到衬线，与首页/详情页一致 */
  font-size:var(--fs-4xl);font-weight:700;letter-spacing:1px;
  color:var(--water-deep);
}
.page-head .sub{font-size:var(--fs-sm);color:var(--muted)}
.page-head .back{
  margin-left:auto;font-size:var(--fs-sm);color:var(--water);
  text-decoration:none;transition:color .15s var(--ease);
}
.page-head .back:hover{color:var(--water-deep);text-decoration:underline}
.page-head .back:focus-visible{outline:2px solid var(--water);outline-offset:2px;border-radius:2px}

/* ── 3. 卡片语言：与 site.css 的 .anime 基线一致，一处定义、各页共用 ────────── */
.u-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
}

/* ── 4. 表单与按钮：只允许 --radius-sm 与 --radius-pill 两种写法 ───────────── */
.u-field{
  padding:8px 11px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  background:var(--card);
  font-family:var(--font-ui);font-size:var(--fs-base);color:var(--text);
}
.u-field:focus{outline:0;border-color:var(--water)}
.u-field:focus-visible{outline:2px solid var(--water);outline-offset:2px}

.u-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  background:var(--card);color:var(--text);
  font-family:var(--font-ui);font-size:var(--fs-base);font-weight:600;
  cursor:pointer;transition:border-color .15s var(--ease),color .15s var(--ease);
}
.u-btn:hover{border-color:var(--water);color:var(--water-deep)}
.u-btn:focus-visible{outline:2px solid var(--water);outline-offset:2px}
.u-btn.u-primary{background:var(--water);border-color:var(--water);color:#fff}
.u-btn.u-primary:hover{background:var(--water-deep);border-color:var(--water-deep);color:#fff}
.u-btn.u-ghost{border-color:var(--border);color:var(--muted)}
.u-btn.u-ghost:hover{color:var(--text);border-color:var(--border-strong)}

/* ── 5. 页脚 / 备案：独立页也要和首页一样露出备案号（监管要求，且是站点统一感的一半）
       站点已有的 footer / .icp 样式在 site.css，这里只补独立页需要的间距与离栏处理。 */
.page-foot{margin-top:64px}
.page-foot .icp{border-top:1px solid var(--border);background:rgba(255,255,255,.4)}

/* ── 6. 窄屏：与 site.css 的断点保持一致 ──────────────────────────────────── */
@media (max-width:640px){
  .page-head{gap:10px;padding-bottom:14px;margin-bottom:20px}
  .page-head h1{font-size:var(--fs-2xl)}
  .page-head .back{flex:1 0 100%;margin-left:0}
  .page-foot{margin-top:44px}
}