feat(system): implement 404 page with activity logging and change profile route format

Backend Changes:
- Added public API endpoint /api/public/log-404 (no auth required)
- Created backend/src/routes/public.js for public endpoints
- Added ACTIONS.SYSTEM_404 and CATEGORIES.system to activity log service
- Registered public routes in app.js

Frontend Changes:
- Created NotFoundPage.jsx with standalone layout (no auth required)
- Added publicAPI.log404() to log 404 access attempts
- Logs both authenticated and anonymous users
- Changed profile route from /@:username to /u/:username
- Made profile route public (removed ProtectedRoute wrapper)
- Updated all profile links from /@${username} to /u/${username} in:
  - ChatMessage.jsx
  - DashboardMatchCard.jsx
  - MatchRequestCards.jsx
  - MatchCard.jsx
  - UserListItem.jsx
  - MatchChatPage.jsx
  - PublicProfilePage.jsx

Fixes:
- React Router doesn't support @ in path segments
- 404 page now accessible to non-authenticated users without redirect
- Profile route no longer catches all unmatched routes

frontend/src/pages/MatchChatPage.jsx

@@ -219,7 +219,7 @@ const MatchChatPage = () => {
         <div className="bg-primary-600 text-white p-4">
             <div className="flex items-center justify-between">
               <div className="flex items-center space-x-4">
-                <Link to={`/@${partner.username}`} className="flex-shrink-0">
+                <Link to={`/u/${partner.username}`} className="flex-shrink-0">
                   <Avatar
                     src={partner.avatar}
                     username={partner.username}
@@ -229,7 +229,7 @@ const MatchChatPage = () => {
                   />
                 </Link>
                 <div>
-                  <Link to={`/@${partner.username}`}>
+                  <Link to={`/u/${partner.username}`}>
                     <h2 className="text-xl font-bold hover:text-primary-100 transition-colors">
                       {partner.firstName && partner.lastName
                         ? `${partner.firstName} ${partner.lastName}`

frontend/src/pages/NotFoundPage.jsx

@@ -0,0 +1,83 @@
+import { useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Home, ArrowLeft } from 'lucide-react';
+import { publicAPI } from '../services/api';
+
+export default function NotFoundPage() {
+  const location = useLocation();
+
+  useEffect(() => {
+    // Log 404 access to activity logs (works for both logged in and non-logged in users)
+    const log404 = async () => {
+      try {
+        await publicAPI.log404(location.pathname, location.search);
+      } catch (err) {
+        // Silently fail - logging should never break user experience
+        console.debug('Failed to log 404:', err);
+      }
+    };
+
+    log404();
+  }, [location.pathname, location.search]);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Simple header */}
+      <header className="bg-white shadow-sm">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <Link to="/" className="flex items-center gap-2 text-primary-600 hover:text-primary-700">
+            <Home size={24} />
+            <span className="text-xl font-bold">spotlight.cam</span>
+          </Link>
+        </div>
+      </header>
+
+      <div className="min-h-screen flex items-center justify-center px-4 -mt-16">
+        <div className="max-w-md w-full text-center">
+          {/* 404 Icon */}
+          <div className="mb-8">
+            <div className="text-9xl font-bold text-primary-600 mb-4">404</div>
+            <h1 className="text-3xl font-bold text-gray-900 mb-2">
+              Page Not Found
+            </h1>
+            <p className="text-gray-600">
+              The page you're looking for doesn't exist or has been moved.
+            </p>
+          </div>
+
+          {/* Current Path */}
+          <div className="mb-8 p-4 bg-gray-100 rounded-lg">
+            <p className="text-sm text-gray-500 mb-1">Requested URL:</p>
+            <code className="text-sm text-gray-800 break-all">
+              {location.pathname}
+              {location.search}
+            </code>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex flex-col sm:flex-row gap-3 justify-center">
+            <button
+              onClick={() => window.history.back()}
+              className="inline-flex items-center justify-center gap-2 px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+            >
+              <ArrowLeft size={20} />
+              Go Back
+            </button>
+            <Link
+              to="/"
+              className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+            >
+              <Home size={20} />
+              Go Home
+            </Link>
+          </div>
+
+          {/* Help Text */}
+          <div className="mt-8 text-sm text-gray-500">
+            <p>If you believe this is an error, please contact support.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/PublicProfilePage.jsx

@@ -267,7 +267,7 @@ const PublicProfilePage = () => {
                     <div key={rating.id} className="border-b pb-4 last:border-b-0">
                       <div className="flex items-start gap-4">
                         {/* Rater Info */}
-                        <Link to={`/@${rating.rater.username}`} className="flex-shrink-0">
+                        <Link to={`/u/${rating.rater.username}`} className="flex-shrink-0">
                           <Avatar
                             src={rating.rater.avatar}
                             username={rating.rater.username}
@@ -282,7 +282,7 @@ const PublicProfilePage = () => {
                           <div className="flex items-start justify-between mb-2">
                             <div>
                               <Link
-                                to={`/@${rating.rater.username}`}
+                                to={`/u/${rating.rater.username}`}
                                 className="font-semibold text-gray-900 hover:text-primary-600"
                               >
                                 {rating.rater.firstName && rating.rater.lastName