feat: 前端美化层 v11——品牌氛围 + Tab 药丸化

为什么：页面经 v4-v10 十层打磨后整体已精致，但截图复看仍有四处寡淡——
纯文字下划线 Tab 缺乏点击感、背景氛围是中性灰与品牌无关、卡片顶边
平、账号区与音质区无分隔。

改动（全部为 CSS 叠加覆盖，不动类名/结构/JS 契约）：
- Tab 药丸化：hover 软底 + active 主色片 + 按压回弹，::after 下划线隐藏；
  用 .tabs .tab 权重压过基础层与 v10 超小屏规则
- 背景氛围替换为品牌红 + 主题蓝双色辉光（明暗两套参数）
- 卡片顶部内高光，浅色主题更挺括
- 账号栏补下分隔线，与音质栏边框上下呼应
- 主按钮补顶部高光渐变（对齐 success/danger 既有处理）
- 页脚字距微调；空状态浮动动画 v4 已有，不重复

golden：index 快照按 docstring 约定同步刷新（sha256/len），
仅 2 行值变更。门禁：ruff/pyright 0-0，pytest 294 全绿；
浏览器实测明暗两主题 + Tab 切换正常。

templates/index.html

@@ -1729,6 +1729,54 @@
             .card, .uc-card, .admin-side, .modal, .drawer { forced-color-adjust: auto; }
         }
 
+        /* ============================================================
+           美化层 v11（2026-09-27 品牌氛围 + Tab 药丸化）
+           延续 v4-v10 原则：叠加式覆盖，不动布局结构 / 类名 / JS 契约。
+           ============================================================ */
+
+        /* ---------- 背景氛围：品牌红 + 主题蓝 双色辉光（替换 v4 灰调氛围） ---------- */
+        body {
+            background-image:
+                radial-gradient(1100px 480px at 10% -8%, rgba(236, 65, 65, 0.05), transparent 60%),
+                radial-gradient(950px 460px at 104% -4%, rgba(22, 119, 255, 0.055), transparent 58%);
+        }
+        html.dark body {
+            background-image:
+                radial-gradient(1100px 480px at 10% -8%, rgba(236, 65, 65, 0.07), transparent 60%),
+                radial-gradient(950px 460px at 104% -4%, rgba(22, 104, 220, 0.09), transparent 58%);
+        }
+
+        /* ---------- 卡片：顶部内高光，浅色主题更挺括 ---------- */
+        .card { box-shadow: var(--color-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.65); }
+        html.dark .card { box-shadow: var(--color-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
+
+        /* ---------- 账号栏与音质栏之间补一条分隔线（音质栏自带下边框，上下呼应） ---------- */
+        .account-bar { border-bottom: 1px solid var(--color-border-split); }
+
+        /* ---------- Tab 药丸化：下划线 → 软色块，hover 有底、active 有片 ----------
+           用 .tabs .tab 权重（0-2-0）压过基础层 .tab 与 v10 超小屏的同权重规则；
+           ::after 下划线整体隐藏，active 态由药丸底色表达 */
+        .tabs .tab {
+            padding: 8px 16px;
+            margin-right: 6px;
+            border-radius: 999px;
+            transition: color 0.2s, background 0.2s, transform 0.15s;
+        }
+        .tabs .tab:hover { background: var(--color-fill); }
+        .tabs .tab:active { transform: scale(0.96); }
+        .tabs .tab.active { background: var(--color-primary-bg); }
+        .tabs .tab::after { display: none; }
+
+        /* ---------- 主按钮：与 success/danger 一致的顶部高光渐变 ---------- */
+        .btn-primary {
+            background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%);
+        }
+
+        /* ---------- 空状态图标：v4 层已有 floatY 浮动，此处不再重复 ---------- */
+
+        /* ---------- 页脚字距 ---------- */
+        .footer { letter-spacing: 0.3px; }
+
     </style>
 </head>
 <body>

tests/golden/responses.json

@@ -534,7 +534,7 @@
   "payload": null,
   "status": 200,
   "body": null,
-  "html_len": 464333,
-  "html_sha256": "0596d87ccbe8e7b5a19494c5d1ab1fd11bc95b82665ddc600ba90e4f2f790b06"
+  "html_len": 466913,
+  "html_sha256": "78cbb4b1f627700c0537840d20e2ebb5bd344efe05a309bef541cfaf63efb493"
  }
 ]