style: 重做界面视觉与信息层级

先截图审视现状，再针对性修改。主要问题与改动如下。

工具栏
- 标签筛选从「平铺全部标签」改为下拉面板，标签多时不再换行挤爆工具栏
- 备份与快捷键帮助移到导航栏 —— 它们是应用级操作，不该挤在看板工具栏里，
  顺带修好了「? 帮助只在看板可用」的问题
- 到期统计（今日到期 / 逾期）合并为可点击的筛选入口，去掉两个独立控件
- 移动端工具栏从占半屏降到三行紧凑布局

卡片
- 优先级从彩色胶囊改为左侧色条，扫视一列时比读文字更快分辨轻重
- 元信息改为「优先级 · 日期 · 标签」的轻量文本行，不再三种胶囊叠在一起
- 完成态用勾选图标 + 降低不透明度

布局
- 今日视图限宽居中（max-w-3xl）：此前 1440px 下卡片被拉满整屏，
  标题与元信息之间出现大片空白
- 修复移动端卡片被压成细条：TaskCard 的 overflow-hidden（用于裁切左侧色条）
  会让 flex 项的最小尺寸解析为 0，补 shrink-0 修正；
  同时改为移动端按内容高度堆叠、桌面端列内滚动

其他
- 导航栏品牌改用看板图标，消除「看板」重复出现两次
- 统一卡片阴影、圆角与键盘焦点样式
- 新增 scripts/screenshot.mjs，便于后续对照审视视觉改动

验证：单元测试 452 个、端到端测试 23 个全部通过，lint 与构建无错误。

src/components/AppNav.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
 
+import { useUiStore } from '@/stores/ui'
+
+const ui = useUiStore()
+
 const LINKS = [
   { to: '/', label: '看板' },
   { to: '/today', label: '今日' },
@@ -9,11 +13,24 @@ const LINKS = [
 
 <template>
   <header
-    class="flex items-center gap-4 border-b border-slate-200 bg-white px-4 py-2.5 md:px-6"
+    class="flex items-center gap-3 border-b border-slate-200 bg-white/85 px-4 py-2.5 backdrop-blur-sm md:px-6"
   >
-    <span class="text-sm font-semibold tracking-wide text-slate-800">看板</span>
+    <div class="flex items-center gap-2">
+      <span
+        class="flex size-6 shrink-0 items-center justify-center rounded-md bg-slate-900 text-white"
+      >
+        <svg viewBox="0 0 16 16" class="size-3.5" aria-hidden="true">
+          <rect x="1" y="2" width="3.4" height="12" rx="1.2" fill="currentColor" opacity="0.5" />
+          <rect x="6.3" y="2" width="3.4" height="8.5" rx="1.2" fill="currentColor" />
+          <rect x="11.6" y="2" width="3.4" height="5" rx="1.2" fill="currentColor" opacity="0.75" />
+        </svg>
+      </span>
+      <span class="hidden text-sm font-semibold tracking-tight text-slate-900 sm:inline">看板</span>
+    </div>
 
-    <nav class="flex items-center gap-1" aria-label="主导航">
+    <span class="h-5 w-px bg-slate-200" aria-hidden="true" />
+
+    <nav class="flex items-center gap-0.5" aria-label="主导航">
       <RouterLink
         v-for="link in LINKS"
         :key="link.to"
@@ -23,11 +40,11 @@ const LINKS = [
       >
         <a
           :href="href"
-          class="rounded-md px-2.5 py-1 text-sm transition"
+          class="rounded-md px-3 py-1.5 text-sm transition"
           :class="
             isExactActive
-              ? 'bg-slate-800 font-medium text-white'
-              : 'text-slate-600 hover:bg-slate-100'
+              ? 'bg-slate-900 font-medium text-white shadow-sm'
+              : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
           "
           :aria-current="isExactActive ? 'page' : undefined"
           @click="navigate"
@@ -36,5 +53,48 @@ const LINKS = [
         </a>
       </RouterLink>
     </nav>
+
+    <div class="ml-auto flex items-center gap-1.5">
+      <button
+        type="button"
+        class="flex size-8 items-center justify-center rounded-md text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
+        aria-label="快捷键帮助"
+        @click="ui.openHelp()"
+      >
+        <svg viewBox="0 0 20 20" class="size-4" fill="none" aria-hidden="true">
+          <circle cx="10" cy="10" r="7.25" stroke="currentColor" stroke-width="1.5" />
+          <path
+            d="M8.2 7.9a1.9 1.9 0 1 1 2.6 1.75c-.5.22-.8.7-.8 1.25v.35"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+          <circle cx="10" cy="13.7" r="0.9" fill="currentColor" />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        class="flex items-center gap-1.5 rounded-md border border-slate-200 px-2.5 py-1.5 text-sm text-slate-600 transition hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900"
+        @click="ui.openBackup()"
+      >
+        <svg viewBox="0 0 20 20" class="size-3.5" fill="none" aria-hidden="true">
+          <path
+            d="M10 13V3.5m0 0L6.5 7M10 3.5 13.5 7"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M3.5 12.5v2A2 2 0 0 0 5.5 16.5h9a2 2 0 0 0 2-2v-2"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+        </svg>
+        备份
+      </button>
+    </div>
   </header>
 </template>