diff --git a/templates/index.html b/templates/index.html
index 7bd7a16..b14aeb0 100644
--- a/templates/index.html
+++ b/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>
diff --git a/tests/golden/responses.json b/tests/golden/responses.json
index a3b54a2..736d257 100644
--- a/tests/golden/responses.json
+++ b/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"
  }
 ]
\ No newline at end of file