Center responsive layout and add PWA install support for mobile, tablet, and desktop.

Co-authored-by: Cursor <cursoragent@cursor.com>

pwa/icons/icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <rect width="512" height="512" rx="108" fill="#0f1419"/>
+  <rect x="32" y="32" width="448" height="448" rx="88" fill="none" stroke="#2563eb" stroke-width="12"/>
+  <path d="M280 96 L168 288 H240 L232 416 L344 224 H272 Z" fill="#3b82f6"/>
+  <text x="256" y="472" text-anchor="middle" fill="#93c5fd" font-family="system-ui,sans-serif" font-size="56" font-weight="700">TS</text>
+</svg>

pwa/manifest.webmanifest

@@ -0,0 +1,27 @@
+{
+  "name": "Trading Studio 交易复盘配音",
+  "short_name": "TradingStudio",
+  "description": "本地量化交易复盘 → B 站配音生产流水线",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "any",
+  "background_color": "#0f1419",
+  "theme_color": "#2563eb",
+  "lang": "zh-CN",
+  "categories": ["productivity", "utilities"],
+  "icons": [
+    {
+      "src": "/pwa/icons/icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    },
+    {
+      "src": "/pwa/icons/icon.svg",
+      "sizes": "512x512",
+      "type": "image/svg+xml",
+      "purpose": "maskable"
+    }
+  ]
+}

pwa/sw.js

@@ -0,0 +1,50 @@
+/**
+ * Trading Studio PWA Service Worker
+ * 缓存应用壳，支持离线打开已访问页面；API 请求始终走网络。
+ */
+const CACHE_NAME = "trading-studio-v1";
+const SHELL = ["/", "/manifest.webmanifest"];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(SHELL)).catch(() => {})
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+  const url = new URL(request.url);
+
+  // API / 文件上传 / Gradio 动态接口不走缓存
+  if (
+    request.method !== "GET" ||
+    url.pathname.startsWith("/gradio_api") ||
+    url.pathname.startsWith("/file=") ||
+    url.pathname.startsWith("/upload") ||
+    url.pathname.includes("call")
+  ) {
+    return;
+  }
+
+  event.respondWith(
+    fetch(request)
+      .then((response) => {
+        if (response.ok && url.origin === self.location.origin) {
+          const clone = response.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
+        }
+        return response;
+      })
+      .catch(() => caches.match(request).then((r) => r || caches.match("/")))
+  );
+});