Add logo container and enhance login page styling

Introduced a styled wrapper for the login page logo to improve its appearance and layout consistency. Adjusted logo dimensions and applied new visual effects like gradients, shadow, and borders for a more polished design.

frontend/src/pages/LoginPage.jsx

@@ -27,7 +27,9 @@ export function LoginPage() {
   return (
     <div className="login-wrap">
       <form className="card login-card" onSubmit={submit}>
+        <div className="login-logo-wrap" aria-hidden="true">
           <img src="/nexapg-logo.svg" alt="NexaPG" className="login-logo" />
+        </div>
         <div className="login-eyebrow">NexaPG Monitor</div>
         <h2>Welcome back</h2>
         <p className="login-subtitle">Sign in to access monitoring and query insights.</p>

frontend/src/styles.css

@@ -1509,10 +1509,24 @@ td {
   animation: loginEnter 0.5s ease;
 }
 
+.login-logo-wrap {
+  margin: 2px auto 6px auto;
+  width: 190px;
+  display: grid;
+  place-items: center;
+  padding: 10px 10px 8px 10px;
+  border-radius: 16px;
+  border: 1px solid #2f6eb1;
+  background:
+    radial-gradient(circle at 50% 16%, #52cbff4f, transparent 62%),
+    linear-gradient(180deg, #163965, #122d52);
+  box-shadow: inset 0 1px 0 #8bd8ff40, 0 14px 28px #04163875;
+}
+
 .login-logo {
-  width: 110px;
-  margin: 0 auto 2px auto;
-  filter: drop-shadow(0 8px 18px #03173577);
+  width: 152px;
+  margin: 0 auto;
+  filter: drop-shadow(0 10px 22px #041c3eaa) saturate(1.08) contrast(1.04);
 }
 
 .login-eyebrow {