vivid 手机端导航重做：底部玻璃标签栏一次直达，替掉 dock + 汉堡 + 上拉菜单

- 五栏目平铺常驻拇指区，当前项分段高亮（与首页工具条分段控件同语言），
  44px 触达高度 + :active 缩放反馈，safe-area 适配保留
- 去掉菜单里的 01-05 编号、逐行分隔线与站点描述，导航只做导航
- 明暗切换：手机端挪到页脚 foot-nav 末尾的 ◐（≤720px 显示），
  桌面仍走顶栏主题键；QuickShort 的 FAB 底部给标签栏让位

frontend/src/ui/yohaku/chrome.css

@@ -50,98 +50,46 @@ html[data-ui='vivid'] .menu-btn {display:none}
   html[data-ui='vivid'] .top {display:none}
 }
 
-/* ---- 窄屏：底部悬浮 dock + 上拉菜单 ----
-   dock 常驻拇指区（品牌 + 汉堡），点开一片从底部长出来的圆角毛玻璃菜单。 */
-html[data-ui='vivid'] .dock {position:fixed;z-index:90;
-  left:50%;bottom:max(14px, env(safe-area-inset-bottom));transform:translateX(-50%);
-  display:none;align-items:center;gap:10px;
-  padding:6px 8px 6px 14px;border-radius:999px;
+/* ---- 窄屏：底部玻璃标签栏 ----
+   五个栏目平铺常驻拇指区，一次点击直达（替代旧的 dock + 汉堡 + 上拉菜单，
+   那套要两跳才能到目标页）。分段高亮与首页工具条「全部 / 长文 / 短文」
+   的分段控件同一语言；玻璃配方沿用原 dock（card 82% + blur 20px）。 */
+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);
   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);}
-html[data-ui='vivid'] .dock-brand {display:flex;align-items:center;
-  font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--ink);}
-/* 窄屏才把 dock 摆出来；这条必须压在基准规则（display:none）之后 */
+/* 窄屏才把标签栏摆出来；这条必须压在基准规则（display:none）之后 */
 @media (max-width:720px) {
-  html[data-ui='vivid'] .dock {display:flex}
+  html[data-ui='vivid'] .v-tabbar {display:flex}
 }
+html[data-ui='vivid'] .v-tabbar a {flex:1;display:flex;align-items:center;justify-content:center;
+  min-height:44px;padding:0 2px;border-radius:999px;
+  font-size:13px;font-weight:600;letter-spacing:.02em;
+  color:var(--soft);
+  transition:color .25s var(--ease),background-color .25s var(--ease),transform 120ms ease-out;}
+/* 按下即有物理反馈（触屏没有 hover，:active 就是全部） */
+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
-   回落（未设头像时）着色。只作用于桌面顶栏 .brand：手机 dock 里已经不放
-   站标（YohakuTop 的 dock 分支），选择器不需要 :is() 兼顾两边。 */
+   回落（未设头像时）着色。只作用于桌面顶栏 .brand：手机标签栏里没有品牌位，
+   选择器不需要 :is() 兼顾两边。 */
 html[data-ui='vivid'] .brand .av {width:30px;height:30px;flex:none;
   color:var(--ink);}
-
-/* 上拉菜单：圆角毛玻璃贴着 dock 上方长出来，最高 70vh，内容多就内部滚 */
-html[data-ui='vivid'] .menu-root {position:fixed;inset:0;z-index:110;}
-html[data-ui='vivid'] .menu-root .scrim {position:absolute;inset:0;
-  background:color-mix(in srgb,var(--ink) 32%,transparent);}
-html[data-ui='vivid'] .menu {position:absolute;left:10px;right:10px;
-  bottom:max(10px, env(safe-area-inset-bottom));
-  border-radius:26px;
-  background:color-mix(in srgb,var(--card) 92%,transparent);
-  backdrop-filter:blur(28px) saturate(1.6);
-  -webkit-backdrop-filter:blur(28px) saturate(1.6);
-  border:1px solid var(--line);
-  box-shadow:var(--shadow-lg);
-  display:flex;flex-direction:column;
-  padding:10px 22px max(14px, env(safe-area-inset-bottom));
-  overscroll-behavior:contain;
-  max-height:min(70vh, 560px);}
-html[data-ui='vivid'] .menu:focus {outline:none}
-html[data-ui='vivid'] .menu-in {flex:1;display:flex;flex-direction:column;
-  justify-content:flex-start;
-  padding-top:6px;overflow-y:auto;
-  scrollbar-width:none;}
-html[data-ui='vivid'] .menu-in a {position:relative;display:flex;align-items:baseline;gap:14px;
-  padding:15px 2px;font-size:25px;font-weight:800;letter-spacing:-.02em;
-  line-height:1.25;color:var(--soft);
-  border-bottom:1px solid var(--line);
-  transition:color .3s var(--ease);
-  /* 逐项入场：--i 由模板按序号写进 style，错峰 45ms */
-  animation:mItem .55s var(--spring) both;
-  animation-delay:calc(var(--i, 0) * 45ms);}
-@keyframes mItem {from {opacity:0;transform:translateY(14px)}}
-html[data-ui='vivid'] .menu-in a:last-child {border-bottom:0}
-html[data-ui='vivid'] .menu-in a .idx {font-family:var(--mono);font-size:11px;font-weight:700;
-  color:var(--muted);letter-spacing:.06em;
-  transition:color .3s var(--ease);}
-html[data-ui='vivid'] .menu-in a em {font-style:normal;font-size:11px;font-weight:700;
-  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-left:auto;
-  transition:color .3s var(--ease);}
-html[data-ui='vivid'] .menu-in a.on {color:var(--accent)}
-html[data-ui='vivid'] .menu-in a.on .idx,
-html[data-ui='vivid'] .menu-in a.on em {color:var(--accent)}
-/* 当前项的左缘短杠：菜单内边距 22px，杠落在离屏边 10px 处 */
-html[data-ui='vivid'] .menu-in a.on::before {content:"";position:absolute;left:-14px;top:50%;
-  width:3px;height:18px;border-radius:2px;background:var(--accent);
-  transform:translateY(-50%);}
-html[data-ui='vivid'] .menu-in a:active {color:var(--accent)}
-html[data-ui='vivid'] .menu-foot {flex:none;padding-top:16px;
-  display:flex;align-items:center;justify-content:space-between;gap:12px;}
-html[data-ui='vivid'] .menu-foot .m-desc {margin:0;font-size:12px;line-height:1.7;
-  color:var(--muted);text-align:right;}
-/* 进：scrim 淡入 + 菜单从底部长出来 + 项逐项推上来；出：整块沉回去 */
-html[data-ui='vivid'] .v-menu-enter-active {transition:opacity .3s var(--ease)}
-html[data-ui='vivid'] .v-menu-enter-active .menu {transition:transform .55s var(--spring),opacity .35s var(--ease)}
-html[data-ui='vivid'] .v-menu-enter-from {opacity:0}
-html[data-ui='vivid'] .v-menu-enter-from .menu {transform:translateY(56px);opacity:0}
-html[data-ui='vivid'] .v-menu-leave-active {transition:opacity .22s var(--ease)}
-html[data-ui='vivid'] .v-menu-leave-active .menu {transition:transform .22s var(--ease)}
-html[data-ui='vivid'] .v-menu-leave-to {opacity:0}
-html[data-ui='vivid'] .v-menu-leave-to .menu {transform:translateY(48px)}
-/* 全局 reduce-motion 只把 duration 压扁，delay 会留下来 → 单独清掉 */
-@media (prefers-reduced-motion: reduce) {
-  html[data-ui='vivid'] .v-menu-enter-active,
-  html[data-ui='vivid'] .v-menu-enter-active .menu {transition-delay:0s !important}
-  html[data-ui='vivid'] .menu-in a {animation:none}
-}
 /* 短文快发盒（QuickShort）的 vivid 差异：圆角跟自己的半径档走，
-   FAB 不用给经典版的主题浮钮让位（vivid 的主题键在菜单里），贴到安全区 */
+   FAB 底部给标签栏让位（栏高 = 44 触达 + 8 内边距 + 2 描边 ≈ 54px） */
 html[data-ui='vivid'] .qs-card {border-radius:14px;}
-html[data-ui='vivid'] .qs-fab {bottom:max(20px, env(safe-area-inset-bottom));}
+html[data-ui='vivid'] .qs-fab {bottom:calc(max(10px, env(safe-area-inset-bottom)) + 60px);}
 
 html[data-ui='vivid'] .progress {position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
   background:transparent;pointer-events:none;}
@@ -169,6 +117,21 @@ html[data-ui='vivid'] .foot-social a {color:var(--soft);font-weight:400;
 html[data-ui='vivid'] .foot-social a:hover {color:var(--accent);background:var(--accent-soft);}
 html[data-ui='vivid'] .foot-social svg {width:17px;height:17px;fill:currentColor;}
 html[data-ui='vivid'] .foot-social span {font-size:12px;}
+/* 页脚明暗切换：手机端顶栏退场后这里补位，桌面隐藏（顶栏有主题键）。
+   排在 foot-nav 文字行的末尾，做成和相邻链接同观感的小方块；
+   前面的 · 分隔符跟按钮一起在桌面隐藏，免得尾巴上挂个空点。 */
+html[data-ui='vivid'] .foot .theme-toggle,
+html[data-ui='vivid'] .foot .theme-sep {display:none}
+html[data-ui='vivid'] .foot .theme-toggle {padding:0;width:24px;height:24px;
+  align-items:center;justify-content:center;
+  border:0;border-radius:6px;background:transparent;
+  color:var(--accent);font-size:14px;line-height:1;cursor:pointer;
+  transition:opacity .25s;}
+html[data-ui='vivid'] .foot .theme-toggle:active {opacity:.6}
+@media (max-width:720px) {
+  html[data-ui='vivid'] .foot .theme-toggle {display:inline-flex}
+  html[data-ui='vivid'] .foot .theme-sep {display:inline}
+}
 /* 项目信息行：源码入口 + 版权。刻意不并进 .foot-social——那一排是站主的社交
    身份，源码是仓库入口，混在一起会让人以为它也是一个社交账号。
    放在 .foot a 规则之后：两者特指度相同，靠后者才能压掉默认的强调色。 */