fix: properly configure maskable PWA icons

The previous configuration incorrectly marked regular icons as "maskable",
which would cause them to be cropped when displayed in circular or rounded
shapes on Android devices.

Changes:
- Created dedicated maskable icons with 10% padding (safe zone)
- Maskable icons use dark background (#020817) matching app theme
- Separated "any" and "maskable" purposes in manifest
- Regular icons (192x192, 512x512) use full space with purpose="any"
- Maskable icons (192x192-maskable, 512x512-maskable) have padding with purpose="maskable"

This ensures icons display correctly in all contexts:
- Regular icons for browser tabs, shortcuts, splash screens
- Maskable icons for adaptive icon shapes on Android

public/site.webmanifest

@@ -28,13 +28,25 @@
       "src": "/favicon-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
-      "purpose": "any maskable"
+      "purpose": "any"
     },
     {
       "src": "/favicon-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
-      "purpose": "any maskable"
+      "purpose": "any"
+    },
+    {
+      "src": "/favicon-192x192-maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/favicon-512x512-maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
     }
   ],
   "categories": ["social", "utilities", "productivity"],