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/Layout.css

@@ -35,7 +35,7 @@
   display: flex;
   justify-content: center;
   padding: 0.75rem var(--page-padding-x);
-  background: var(--color-bg-main);
+  background: transparent;
 }
 
 /* Page header slider - rounded pill style (like admin panel) */
@@ -44,12 +44,20 @@
   display: inline-flex;
   align-items: center;
   background: var(--color-bg-elevated);
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--color-card-outline);
   border-radius: var(--radius-xl);
   padding: 4px;
   gap: 4px;
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--shadow-md);
   max-width: 100%;
+  backdrop-filter: blur(14px) saturate(1.15);
+}
+
+@supports (color: color-mix(in srgb, black, white)) {
+  .page-tabs-slider,
+  .admin-tabs-slider {
+    background: color-mix(in srgb, var(--color-bg-elevated) 78%, transparent);
+  }
 }
 
 /* Page title section inside slider */
@@ -133,14 +141,15 @@
 .page-tab-btn:hover:not(.active),
 .admin-tab-btn:hover:not(.active) {
   color: var(--color-text-primary);
-  background: rgba(var(--color-accent-rgb), 0.1);
+  background: rgba(var(--color-accent-rgb), 0.10);
 }
 
 .page-tab-btn.active,
 .admin-tab-btn.active {
-  background: var(--color-accent);
+  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
   color: white;
   box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.3);
+  transform: translateY(-1px);
 }
 
 .page-subtitle {
@@ -445,4 +454,4 @@
 [data-theme='dark'][data-accent='auto'] .page-tab-btn.active:focus-visible,
 [data-theme='dark'][data-accent='auto'] .admin-tab-btn.active:focus-visible {
   box-shadow: 0 0 25px 4px rgba(229, 231, 235, 0.5);
-}
+}