feat(ui): 全站画布氛围层、侧栏 sticky 对齐与长页回顶

用顶栏/主栏高度令牌消除 sticky 首滚空走，面包屑叠到中栏上方，公开页增加回顶浮钮。

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/app/globals.css

@@ -56,6 +56,14 @@
   --r: 18px;
   --r-sm: 12px;
 
+  /* 顶栏 68px 条 + 1px 底边；main 桌面 py-9。侧栏 sticky 必须等于
+     栏在 scrollY=0 时的视口 top，否则第一下滚动会先空走一截再吸住 */
+  --header-bar: 68px;
+  --header-h: calc(var(--header-bar) + 1px);
+  --main-pad-y: 2.25rem;
+  --rail-top: calc(var(--header-h) + var(--main-pad-y));
+  --rail-max-h: calc(100vh - var(--rail-top) - 1rem);
+
   color-scheme: light;
 }
 
@@ -103,6 +111,7 @@
 
 html {
   scrollbar-color: var(--line-2) transparent;
+  background-color: var(--bg); /* 橡皮筋 overscroll 与画布同色 */
 }
 
 body {
@@ -113,6 +122,59 @@ body {
   -webkit-font-smoothing: auto;
   text-rendering: optimizeLegibility;
   font-synthesis: none; /* 禁止伪粗，避免缺档字重糊成一团 */
+  isolation: isolate; /* 让 z-index:-1 的画布层停在内容之下、html 之上 */
+}
+
+/* 浏览器最后一层画布：氛围光 + 石墨微粒。
+   纯 CSS（令牌 + 内联 SVG），不跟位图——跟浅/暗/accent 换肤，无限缩放，无额外请求。 */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image:
+    radial-gradient(ellipse 80% 52% at 12% -18%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
+    radial-gradient(ellipse 48% 36% at 100% 0%, color-mix(in srgb, var(--ink) 4%, transparent), transparent 58%),
+    radial-gradient(ellipse 42% 28% at 78% 100%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%),
+    linear-gradient(180deg, color-mix(in srgb, var(--panel) 40%, transparent) 0%, transparent 32%);
+}
+
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  opacity: 0.032;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-size: 160px 160px;
+}
+
+.dark body::before {
+  background-image:
+    radial-gradient(ellipse 80% 52% at 12% -18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
+    radial-gradient(ellipse 48% 36% at 100% 0%, color-mix(in srgb, var(--ink) 6%, transparent), transparent 58%),
+    radial-gradient(ellipse 42% 28% at 78% 100%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
+    linear-gradient(180deg, color-mix(in srgb, var(--panel) 22%, transparent) 0%, transparent 36%);
+}
+
+.dark body::after {
+  opacity: 0.05;
+}
+
+@media print {
+  body::before,
+  body::after {
+    display: none;
+  }
+}
+
+@media (prefers-contrast: more) {
+  body::before,
+  body::after {
+    display: none;
+  }
 }
 
 /* 全站悬停即显提示气泡（配合 TipHost + data-tip，替代原生 title 延迟） */
@@ -2319,7 +2381,6 @@ body:has([data-admin-viewport]) {
   height: 100dvh;
   max-height: 100dvh;
   overflow: hidden;
-  background: var(--bg);
 }
 
 .admin-shell {
@@ -2328,7 +2389,7 @@ body:has([data-admin-viewport]) {
   max-height: 100dvh;
   min-height: 0;
   overflow: hidden;
-  background: var(--bg);
+  background: transparent; /* 透出全站画布层 */
 }
 
 .admin-rail {
@@ -5136,6 +5197,58 @@ html.dark .prose-content pre[data-theme] span {
   font-size: 13px;
 }
 
+/* 长文回顶：右下角浮钮 */
+.j13-back-top {
+  position: fixed;
+  right: 1rem;
+  bottom: 1.25rem;
+  z-index: 45;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 999px;
+  border: 1px solid var(--line-2);
+  background: color-mix(in srgb, var(--panel) 92%, transparent);
+  color: var(--ink-2);
+  box-shadow: var(--shadow-lg);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+}
+.j13-back-top:hover,
+.j13-back-top:focus-visible {
+  color: var(--accent);
+  background: var(--accent-soft);
+  border-color: color-mix(in srgb, var(--accent) 28%, var(--line-2));
+  outline: none;
+}
+/* 帖子移动端底栏上方抬高，避免遮挡 */
+.j13-back-top.is-lifted {
+  bottom: 5.25rem;
+}
+@media (min-width: 1024px) {
+  .j13-back-top.is-lifted {
+    bottom: 1.25rem;
+  }
+}
+@media (min-width: 640px) {
+  .j13-back-top {
+    right: 1.35rem;
+    bottom: 1.5rem;
+  }
+  .j13-back-top.is-lifted {
+    bottom: 5.25rem;
+  }
+}
+@media (min-width: 1024px) {
+  .j13-back-top.is-lifted {
+    bottom: 1.5rem;
+  }
+}
+
 /* 评论楼层树：抖音风格
    主评论全宽；子回复折叠在 panel-2 背景容器内，点击"展开 X 条回复"显示
    子回复之间用淡分隔线；depth≥2 时昵称后显示 ▶ 被回复者 */