vivid 手机端标签栏挪回顶部：与桌面顶栏同构（全宽毛玻璃 + 发丝线），body 顶部让位 63px，QuickShort FAB 回落底部

frontend/src/ui/yohaku/YohakuTop.vue

@@ -8,9 +8,9 @@ import AuthorAvatar from '../../components/AuthorAvatar.vue'
 // 滚动过 8px 加 .scrolled（设计稿的「四态里的第一态」）。
 // 样式在 ui/yohaku/chrome.css，选择器已收敛到 html[data-ui="vivid"] 下。
 //
-// 窄屏例外：顶栏整条退场，导航收进底部玻璃标签栏（.v-tabbar，chrome.css）——
-// 五个栏目一次点击直达，不再需要汉堡 + 上拉菜单。明暗切换在手机上挪到页脚
-// （YohakuFoot 的 .theme-toggle），桌面仍走顶栏这枚 ◐。
+// 窄屏例外：顶栏整条退场，换成一枚常驻的顶部玻璃标签栏（.v-tabbar）——
+// 五个栏目一次点击直达，不再需要汉堡 + 上拉菜单。明暗切换在手机上挪到
+// 页脚（YohakuFoot 的 .theme-toggle），桌面仍走顶栏这枚 ◐。
 
 const route = useRoute()
 const scrolled = ref(false)
@@ -71,7 +71,7 @@ function toggleTheme() {
     </div>
   </header>
 
-  <!-- 窄屏：底部玻璃标签栏。五个栏目平铺一次直达，当前项用分段高亮
+  <!-- 窄屏：顶部玻璃标签栏。五个栏目平铺一次直达，当前项用分段高亮
        （与首页工具条「全部 / 长文 / 短文」的分段控件同一语言）。
        必须待在 .top 外面：.top 有 backdrop-filter，会给 fixed 后代当包含块。 -->
   <nav class="v-tabbar" aria-label="站点导航">

frontend/src/ui/yohaku/chrome.css

@@ -50,26 +50,28 @@ html[data-ui='vivid'] .menu-btn {display:none}
   html[data-ui='vivid'] .top {display:none}
 }
 
-/* ---- 窄屏：底部玻璃标签栏 ----
-   五个栏目平铺常驻拇指区，一次点击直达（替代旧的 dock + 汉堡 + 上拉菜单，
-   那套要两跳才能到目标页）。分段高亮与首页工具条「全部 / 长文 / 短文」
-   的分段控件同一语言；玻璃配方沿用原 dock（card 82% + blur 20px）。 */
+/* ---- 窄屏：顶部玻璃标签栏 ----
+   五个栏目平铺一次直达（替代旧的 dock + 汉堡 + 上拉菜单，那套要两跳才能到
+   目标页）。与桌面顶栏同构：全宽、毛玻璃、发丝线；当前项用分段高亮，
+   和首页工具条「全部 / 长文 / 短文」的分段控件同一语言。
+   fixed + body 顶部让位（sticky 的祖先链里只要有 overflow 容器就会失效，
+   fixed 最稳）；safe-area-top 给刘海屏 PWA 留出来。 */
 html[data-ui='vivid'] .v-tabbar {position:fixed;z-index:90;
-  left:max(10px, env(safe-area-inset-left));
-  right:max(10px, env(safe-area-inset-right));
-  bottom:max(10px, env(safe-area-inset-bottom));
-  display:none;align-items:stretch;gap:2px;
-  padding:4px;border-radius:999px;
-  border:1px solid var(--line);
+  top:0;left:0;right:0;
+  display:none;align-items:stretch;justify-content:center;gap:2px;
+  padding:max(10px, env(safe-area-inset-top)) 10px 8px;
+  border-bottom:1px solid var(--line);
   background:color-mix(in srgb,var(--card) 82%,transparent);
   backdrop-filter:blur(20px) saturate(1.5);
-  -webkit-backdrop-filter:blur(20px) saturate(1.5);
-  box-shadow:var(--shadow-lg);}
+  -webkit-backdrop-filter:blur(20px) saturate(1.5);}
 /* 窄屏才把标签栏摆出来；这条必须压在基准规则（display:none）之后 */
 @media (max-width:720px) {
   html[data-ui='vivid'] .v-tabbar {display:flex}
+  /* 内容区顶部让位：栏高 = 44 触达 + 18 上下内边距 + 1 发丝线 ≈ 63px */
+  html[data-ui='vivid'] body {padding-top:calc(max(10px, env(safe-area-inset-top)) + 63px)}
 }
 html[data-ui='vivid'] .v-tabbar a {flex:1;display:flex;align-items:center;justify-content:center;
+  max-width:96px;
   min-height:44px;padding:0 2px;border-radius:999px;
   font-size:13px;font-weight:600;letter-spacing:.02em;
   color:var(--soft);
@@ -78,7 +80,6 @@ html[data-ui='vivid'] .v-tabbar a {flex:1;display:flex;align-items:center;justif
 html[data-ui='vivid'] .v-tabbar a:active {transform:scale(.94);color:var(--accent)}
 html[data-ui='vivid'] .v-tabbar a.on {color:var(--accent);font-weight:700;
   background:color-mix(in srgb,var(--accent) 11%,transparent);}
-/* 未配强调色的浅色主题回落：高亮底太浅时靠字重与颜色也分得清 */
 
 /* 品牌位只管尺寸：头像本身已裁成圆（AuthorAvatar 的 img），外面不加光环、
    右下角也不加在线点——顶栏要的就是一张干净的圆头像。color 供 LogoMark
@@ -87,9 +88,9 @@ html[data-ui='vivid'] .v-tabbar a.on {color:var(--accent);font-weight:700;
 html[data-ui='vivid'] .brand .av {width:30px;height:30px;flex:none;
   color:var(--ink);}
 /* 短文快发盒（QuickShort）的 vivid 差异：圆角跟自己的半径档走，
-   FAB 底部给标签栏让位（栏高 = 44 触达 + 8 内边距 + 2 描边 ≈ 54px） */
+   FAB 贴到安全区（手机端导航在顶部，底部没有常驻栏要避让） */
 html[data-ui='vivid'] .qs-card {border-radius:14px;}
-html[data-ui='vivid'] .qs-fab {bottom:calc(max(10px, env(safe-area-inset-bottom)) + 60px);}
+html[data-ui='vivid'] .qs-fab {bottom:max(20px, env(safe-area-inset-bottom));}
 
 html[data-ui='vivid'] .progress {position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
   background:transparent;pointer-events:none;}