Enhance login page with new UI and styling updates

Introduced a redesigned login page featuring a two-column layout with a branding section. Added new styles such as gradient backgrounds, input fields with focus animations, and button hover effects. These changes improve the visual appeal and user experience.

frontend/src/styles.css

@@ -213,14 +213,127 @@ td {
   min-height: 100vh;
   display: grid;
   place-items: center;
+  padding: 20px;
+  background:
+    radial-gradient(1000px 500px at 10% 10%, #12366e55, transparent),
+    radial-gradient(900px 450px at 90% 90%, #1e4f7e40, transparent);
 }
 
 .login-card {
-  width: min(420px, 90vw);
+  width: min(460px, 92vw);
+  display: grid;
+  gap: 10px;
+  border-color: #3559a3;
+  backdrop-filter: blur(8px);
+  animation: loginEnter 0.5s ease;
+}
+
+.login-shell {
+  width: min(1120px, 96vw);
+  display: grid;
+  grid-template-columns: 1.1fr 0.9fr;
+  gap: 18px;
+}
+
+.login-brand {
+  min-height: 420px;
+  display: grid;
+  align-content: center;
+  gap: 14px;
+  border-color: #27498d;
+  background:
+    linear-gradient(155deg, #152957 0%, #102147 40%, #0f1b3d 100%);
+}
+
+.login-brand h1 {
+  margin: 0;
+  font-size: 38px;
+}
+
+.login-brand p {
+  margin: 0;
+  color: #b5c5e4;
+  max-width: 58ch;
+}
+
+.login-brand-points {
   display: grid;
   gap: 8px;
 }
 
+.login-brand-points span {
+  color: #d2e0f8;
+  font-size: 14px;
+}
+
+.input-shell {
+  position: relative;
+  border: 1px solid #2b3f74;
+  border-radius: 12px;
+  padding: 1px;
+  background: #0e1731;
+  transition: border-color 0.2s ease;
+}
+
+.input-shell::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: 12px;
+  padding: 1px;
+  background: conic-gradient(#38bdf8, #4f6ee7, #38bdf8);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  opacity: 0;
+}
+
+.input-shell:focus-within {
+  border-color: transparent;
+}
+
+.input-shell:focus-within::before {
+  opacity: 1;
+  animation: spin 1.2s linear infinite;
+}
+
+.input-shell input {
+  width: 100%;
+  border: 0;
+  outline: none;
+  background: transparent;
+}
+
+.login-cta {
+  margin-top: 2px;
+  font-weight: 700;
+  border-color: #3f74d6;
+  background: linear-gradient(90deg, #1e74d6, #1b5ab6);
+}
+
+.login-cta:hover {
+  border-color: #6aa8ff;
+  filter: brightness(1.05);
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loginEnter {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .query {
   max-width: 400px;
   white-space: nowrap;
@@ -298,4 +411,10 @@ td {
     height: auto;
     overflow: visible;
   }
+  .login-shell {
+    grid-template-columns: 1fr;
+  }
+  .login-brand {
+    min-height: 240px;
+  }
 }