Revamp Login Page design and update styles.

Simplified the Login Page layout by removing the branding section and introducing a cleaner, more concise format. Adjusted styles for improved spacing, gradients, and overall visual hierarchy. Removed unused styles and animations for optimization.

frontend/src/styles.css

@@ -213,71 +213,55 @@ td {
   min-height: 100vh;
   display: grid;
   place-items: center;
-  padding: 20px;
+  padding: 24px;
   background:
-    radial-gradient(1000px 500px at 10% 10%, #12366e55, transparent),
-    radial-gradient(900px 450px at 90% 90%, #1e4f7e40, transparent);
+    radial-gradient(900px 500px at 20% 15%, #15356a44, transparent),
+    radial-gradient(900px 500px at 80% 90%, #1c4a7a33, transparent);
 }
 
 .login-card {
-  width: min(460px, 92vw);
+  width: min(460px, 95vw);
   display: grid;
-  gap: 8px;
-  border-color: #3559a3;
-  backdrop-filter: blur(8px);
+  gap: 10px;
+  border-color: #335aa4;
+  padding: 26px;
+  background: linear-gradient(180deg, #182548f0, #141f3df0);
+  box-shadow: 0 20px 50px #050b1f66;
+  backdrop-filter: blur(6px);
   animation: loginEnter 0.5s ease;
 }
 
-.login-shell {
-  width: min(1120px, 96vw);
-  display: grid;
-  grid-template-columns: 1fr 0.95fr;
-  gap: 18px;
+.login-eyebrow {
+  font-size: 12px;
+  color: #a8badb;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
-.login-brand {
-  min-height: 380px;
-  display: grid;
-  align-content: center;
-  gap: 14px;
-  border-color: #27498d;
-  background:
-    linear-gradient(155deg, #152957 0%, #102147 40%, #0f1b3d 100%);
-}
-
-.login-brand h1 {
+.login-card h2 {
   margin: 0;
-  font-size: 38px;
+  font-size: 34px;
+  line-height: 1.05;
 }
 
-.login-brand p {
-  margin: 0;
-  color: #b5c5e4;
-  max-width: 58ch;
-}
-
-.login-brand-points {
-  display: grid;
-  gap: 8px;
-}
-
-.login-brand-points span {
-  color: #d2e0f8;
+.login-subtitle {
+  margin: 0 0 2px 0;
+  color: #9db0d2;
   font-size: 14px;
 }
 
 .input-shell {
   border: 1px solid #2b3f74;
   border-radius: 12px;
-  padding: 1px;
+  padding: 0;
   background: #0e1731;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
 }
 
 .input-shell:focus-within {
   border-color: #38bdf8;
-  box-shadow: 0 0 0 3px #38bdf830, 0 0 20px #38bdf830;
-  animation: focusPulse 1.6s ease-in-out infinite;
+  box-shadow: 0 0 0 3px #38bdf820;
+  transform: translateY(-1px);
 }
 
 .input-shell input {
@@ -285,16 +269,16 @@ td {
   border: 0;
   outline: none;
   background: transparent;
-  padding: 9px 10px;
+  padding: 11px 12px;
   font-size: 15px;
 }
 
 .login-cta {
-  margin-top: 2px;
+  margin-top: 4px;
   font-weight: 700;
   border-color: #3f74d6;
-  background: linear-gradient(90deg, #1e74d6, #1b5ab6);
-  padding: 9px 12px;
+  background: linear-gradient(90deg, #2e7cd4, #265fb4);
+  padding: 11px 12px;
 }
 
 .login-cta:hover {
@@ -310,15 +294,6 @@ td {
   transition: background-color 9999s ease-out 0s;
 }
 
-@keyframes focusPulse {
-  0%, 100% {
-    box-shadow: 0 0 0 3px #38bdf820, 0 0 14px #38bdf820;
-  }
-  50% {
-    box-shadow: 0 0 0 3px #38bdf840, 0 0 24px #38bdf840;
-  }
-}
-
 @keyframes loginEnter {
   from {
     opacity: 0;
@@ -407,10 +382,4 @@ td {
     height: auto;
     overflow: visible;
   }
-  .login-shell {
-    grid-template-columns: 1fr;
-  }
-  .login-brand {
-    min-height: 240px;
-  }
 }