feat(pwa): add Progressive Web App support with iOS compatibility

- Install vite-plugin-pwa and workbox-window for PWA functionality
- Configure Vite with full PWA manifest (name, icons, theme, display)
- Add service worker caching for static assets only (no API cache)
- Create app icons (192x192, 512x512, apple-touch-icon)
- Generate iOS splash screens for multiple device sizes
- Add iOS-specific meta tags (apple-mobile-web-app-capable, etc.)
- Implement InstallPWA component with dual platform support:
  - Android/Chrome: beforeinstallprompt event with custom UI
  - iOS Safari: manual installation instructions with icons
- Add dismissal logic with 7-day localStorage persistence
- Update documentation to reflect 90% project completion

PWA implementation focuses on installability and static asset caching
while avoiding offline API cache (WebRTC requires active connection).

frontend/public/icons/apple-touch-icon.png

@@ -0,0 +1,21 @@
+<svg width="180" height="180" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect width="180" height="180" fill="#6366f1"/>
+
+  <!-- Spotlight effect -->
+  <g transform="translate(90, 90)">
+    <circle r="54" fill="#ffffff" opacity="0.2"/>
+    <circle r="36" fill="#ffffff" opacity="0.3"/>
+    <circle r="18" fill="#ffffff"/>
+
+    <!-- Letter 'S' -->
+    <text
+      x="0"
+      y="27"
+      font-family="Arial, sans-serif"
+      font-size="72"
+      font-weight="bold"
+      fill="#ffffff"
+      text-anchor="middle">S</text>
+  </g>
+</svg>

frontend/public/icons/apple-touch-icon.svg

@@ -0,0 +1,21 @@
+<svg width="180" height="180" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect width="180" height="180" fill="#6366f1"/>
+
+  <!-- Spotlight effect -->
+  <g transform="translate(90, 90)">
+    <circle r="54" fill="#ffffff" opacity="0.2"/>
+    <circle r="36" fill="#ffffff" opacity="0.3"/>
+    <circle r="18" fill="#ffffff"/>
+
+    <!-- Letter 'S' -->
+    <text
+      x="0"
+      y="27"
+      font-family="Arial, sans-serif"
+      font-size="72"
+      font-weight="bold"
+      fill="#ffffff"
+      text-anchor="middle">S</text>
+  </g>
+</svg>

frontend/public/icons/icon-192x192.png

@@ -0,0 +1,20 @@
+<svg width="192" height="192" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect width="192" height="192" fill="#6366f1"/>
+
+  <!-- Spotlight effect -->
+  <g transform="translate(96, 96)">
+    <circle r="57" fill="#ffffff" opacity="0.2"/>
+    <circle r="38" fill="#ffffff" opacity="0.3"/>
+    <circle r="19" fill="#ffffff"/>
+
+    <!-- Letter 'S' -->
+    <text
+      x="0"
+      y="29"       font-family="Arial, sans-serif"
+      font-size="77"
+      font-weight="bold"
+      fill="#ffffff"
+      text-anchor="middle">S</text>
+  </g>
+</svg>

frontend/public/icons/icon-192x192.svg

@@ -0,0 +1,20 @@
+<svg width="192" height="192" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect width="192" height="192" fill="#6366f1"/>
+
+  <!-- Spotlight effect -->
+  <g transform="translate(96, 96)">
+    <circle r="57" fill="#ffffff" opacity="0.2"/>
+    <circle r="38" fill="#ffffff" opacity="0.3"/>
+    <circle r="19" fill="#ffffff"/>
+
+    <!-- Letter 'S' -->
+    <text
+      x="0"
+      y="29"       font-family="Arial, sans-serif"
+      font-size="77"
+      font-weight="bold"
+      fill="#ffffff"
+      text-anchor="middle">S</text>
+  </g>
+</svg>

frontend/public/icons/icon-512x512.png

@@ -0,0 +1,21 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect width="512" height="512" fill="#6366f1"/>
+
+  <!-- Spotlight effect -->
+  <g transform="translate(256, 256)">
+    <circle r="154" fill="#ffffff" opacity="0.2"/>
+    <circle r="102" fill="#ffffff" opacity="0.3"/>
+    <circle r="51" fill="#ffffff"/>
+
+    <!-- Letter 'S' -->
+    <text
+      x="0"
+      y="77"
+      font-family="Arial, sans-serif"
+      font-size="205"
+      font-weight="bold"
+      fill="#ffffff"
+      text-anchor="middle">S</text>
+  </g>
+</svg>

frontend/public/icons/icon-512x512.svg

@@ -0,0 +1,21 @@
+<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect width="512" height="512" fill="#6366f1"/>
+
+  <!-- Spotlight effect -->
+  <g transform="translate(256, 256)">
+    <circle r="154" fill="#ffffff" opacity="0.2"/>
+    <circle r="102" fill="#ffffff" opacity="0.3"/>
+    <circle r="51" fill="#ffffff"/>
+
+    <!-- Letter 'S' -->
+    <text
+      x="0"
+      y="77"
+      font-family="Arial, sans-serif"
+      font-size="205"
+      font-weight="bold"
+      fill="#ffffff"
+      text-anchor="middle">S</text>
+  </g>
+</svg>