Feature: Add elegant PWA loading screen

Implemented a professional loading screen for the PWA to eliminate the
"hang and wait" experience during app initialization.

Changes:
- Added full-screen gradient loading overlay with TeleShop branding
- Implemented animated triple-ring spinner with smooth animations
- Added automatic removal after PWA initialization (500ms fade-out)
- Included 5-second fallback timeout to prevent infinite loading
- Updated service worker cache version to v2
- Enhanced JWT validation to detect test/temporary keys
- Updated appsettings.json with secure JWT key

Design Features:
- Purple/blue gradient background matching brand colors
- Pulsing logo animation for visual interest
- Staggered spinner rings with cubic-bezier easing
- Fade-in-out loading text animation
- Mobile-responsive design (scales appropriately on all devices)

Technical Implementation:
- Loading screen visible by default (no FOUC)
- Removed via JavaScript when PWA manager initialization completes
- Graceful fade-out animation before DOM removal
- Console logging for debugging

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

LittleShop/wwwroot/css/mobile-admin.css

@@ -454,4 +454,150 @@ button, a, .clickable {
     color: #6b7280;
     font-size: 14px;
     margin-top: 5px;
+}
+
+/* ========================================
+   PWA Loading Screen
+   ======================================== */
+
+.pwa-loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    opacity: 1;
+    transition: opacity 0.5s ease-out;
+}
+
+.pwa-loading-screen.fade-out {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.pwa-loading-content {
+    text-align: center;
+    color: white;
+    animation: slideUp 0.6s ease-out;
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.pwa-loading-logo {
+    font-size: 80px;
+    margin-bottom: 20px;
+    animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    50% {
+        transform: scale(1.1);
+        opacity: 0.8;
+    }
+}
+
+.pwa-loading-title {
+    font-size: 36px;
+    font-weight: 700;
+    margin-bottom: 30px;
+    letter-spacing: 2px;
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.pwa-loading-spinner {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 30px;
+}
+
+.spinner-ring {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border: 3px solid transparent;
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
+}
+
+.spinner-ring:nth-child(2) {
+    width: 90%;
+    height: 90%;
+    top: 5%;
+    left: 5%;
+    border-top-color: rgba(255, 255, 255, 0.7);
+    animation-delay: 0.2s;
+}
+
+.spinner-ring:nth-child(3) {
+    width: 80%;
+    height: 80%;
+    top: 10%;
+    left: 10%;
+    border-top-color: rgba(255, 255, 255, 0.5);
+    animation-delay: 0.4s;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.pwa-loading-text {
+    font-size: 16px;
+    font-weight: 400;
+    opacity: 0.9;
+    animation: fadeInOut 2s ease-in-out infinite;
+}
+
+@keyframes fadeInOut {
+    0%, 100% {
+        opacity: 0.6;
+    }
+    50% {
+        opacity: 1;
+    }
+}
+
+/* Mobile optimizations */
+@media (max-width: 768px) {
+    .pwa-loading-logo {
+        font-size: 60px;
+    }
+
+    .pwa-loading-title {
+        font-size: 28px;
+    }
+
+    .pwa-loading-spinner {
+        width: 60px;
+        height: 60px;
+    }
+
+    .pwa-loading-text {
+        font-size: 14px;
+    }
 }