Modernize UI with glass morphism and refined styling

- Add backdrop-filter blur effects to sidebar, cards, and dropdowns
- Replace flat button colors with gradients
- Implement softer multi-layer shadows
- Add new CSS variables: --color-overlay, --color-card-outline, --color-focus-ring
- Modernize transitions with smoother easing curves
- Add loading spinner animation
- Add hexToRgbString() for --color-accent-rgb variable

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

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

frontend/src/styles/Login.css

@@ -3,7 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--color-bg-main);
+  background: transparent;
   padding: 1rem;
 }
 
@@ -11,10 +11,17 @@
   background: var(--color-bg-card);
   padding: 2rem;
   border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-xl);
   width: 100%;
   max-width: 450px;
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-card-outline);
+}
+
+@supports (color: color-mix(in srgb, black, transparent)) {
+  .login-card {
+    background: color-mix(in srgb, var(--color-bg-card) 86%, transparent);
+    backdrop-filter: blur(18px) saturate(1.15);
+  }
 }
 
 /* Mobile responsiveness */
@@ -90,38 +97,49 @@
 
 .form-group input {
   width: 100%;
-  padding: 0.75rem;
+  height: var(--height-input);
+  padding: 0 0.875rem;
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  font-size: 1rem;
+  border-radius: var(--radius-md);
+  font-size: 0.95rem;
   background: var(--color-bg-card);
   color: var(--color-text-primary);
-  transition: border-color 0.3s;
+  transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
 }
 
 .form-group input:focus {
   outline: none;
-  border-color: var(--color-accent);
+  border-color: rgba(var(--color-accent-rgb), 0.55);
+  box-shadow: var(--shadow-ring);
 }
 
-.btn-primary {
+.login-container .btn-primary {
   width: 100%;
   padding: 0.75rem;
-  background: var(--color-accent);
+  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
   color: white;
   border: none;
   border-radius: var(--radius-md);
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
-  transition: background 0.3s;
+  transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
   display: flex;
   align-items: center;
   justify-content: center;
+  box-shadow: var(--shadow-md);
 }
 
-.btn-primary:hover {
-  background: var(--color-accent-hover);
+.login-container .btn-primary:hover {
+  filter: brightness(1.03);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-lg);
+}
+
+.login-container .btn-primary:active {
+  transform: translateY(0);
+  box-shadow: var(--shadow-md);
 }
 
 .login-footer {
@@ -134,17 +152,19 @@
   gap: 1rem;
 }
 
-.btn-link {
+.login-container .btn-link {
   background: none;
   border: none;
   color: var(--color-accent);
   cursor: pointer;
-  text-decoration: underline;
+  text-decoration: none;
   font-size: 0.95rem;
+  font-weight: 600;
 }
 
-.btn-link:hover {
+.login-container .btn-link:hover {
   color: var(--color-accent-hover);
+  text-decoration: underline;
 }
 
 .footer-actions {