feat(FRE-596): add PWA setup and responsive design

- Register service worker for offline caching (app shell + API responses)
- Link manifest.json in index.html with updated theme colors
- Update manifest start_url to /app/dashboard for PWA experience
- Add comprehensive team management CSS with responsive breakpoints
- Add alert, loading, and danger button styles
- Mobile-first responsive layout for team list and detail views

public/manifest.json

@@ -1,21 +1,27 @@
 {
-  "name": "Scripter",
+  "name": "Scripter — Write Faster",
   "short_name": "Scripter",
   "description": "Professional screenplay editor with real-time collaboration",
-  "start_url": "/",
+  "start_url": "/app/dashboard",
   "display": "standalone",
-  "background_color": "#1a1a2e",
-  "theme_color": "#1a1a2e",
+  "background_color": "#0a0a0a",
+  "theme_color": "#0a0a0a",
   "orientation": "any",
   "icons": [
     {
-      "src": "/icon-192.png",
+      "src": "/src-tauri/128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/src-tauri/128x128.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "any maskable"
     },
     {
-      "src": "/icon-512.png",
+      "src": "/src-tauri/128x128.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "any maskable"

public/sw.js

@@ -0,0 +1,65 @@
+const CACHE_NAME = 'scripter-v1';
+const API_CACHE = 'scripter-api-v1';
+const STATIC_ASSETS = [
+  '/',
+  '/index.html',
+  '/manifest.json',
+  '/src/App.tsx',
+  '/src/index.css',
+];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(STATIC_ASSETS))
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(
+        keys.filter((key) => key !== CACHE_NAME && key !== API_CACHE).map((key) => caches.delete(key))
+      )
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  const url = new URL(request.url);
+
+  if (url.pathname.startsWith('/trpc/')) {
+    event.respondWith(
+      fetch(request)
+        .then((response) => {
+          const clonedResponse = response.clone();
+          caches.open(API_CACHE).then((cache) => cache.put(request, clonedResponse));
+          return response;
+        })
+        .catch(() => caches.match(request))
+    );
+    return;
+  }
+
+  event.respondWith(
+    caches.match(request).then((cached) => {
+      const fetchPromise = fetch(request).then((response) => {
+        if (response.status === 200) {
+          const clonedResponse = response.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put(request, clonedResponse));
+        }
+        return response;
+      });
+
+      return cached || fetchPromise;
+    })
+  );
+});
+
+self.addEventListener('message', (event) => {
+  if (event.data === 'skipWaiting') {
+    self.skipWaiting();
+  }
+});