Enhance shadows for dark theme + auto accent elements

Use thicker, 3-layer shadows with progressive downward fade:
- Layer 1: 6-8px offset, strong opacity (45-55%)
- Layer 2: 12-16px offset, medium opacity (20-28%)
- Layer 3: 20-24px offset, fading opacity (6-10%)

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

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

frontend/src/styles/AdminPanel.css

@@ -2266,14 +2266,20 @@
 [data-theme='dark'][data-accent='auto'] .btn-primary-modern {
     background: #e5e7eb;
     color: #111827;
-    box-shadow: 0 4px 12px rgba(229, 231, 235, 0.3), 0 8px 20px rgba(229, 231, 235, 0.12);
+    box-shadow:
+        0 6px 8px rgba(229, 231, 235, 0.45),
+        0 12px 20px rgba(229, 231, 235, 0.2),
+        0 20px 35px rgba(229, 231, 235, 0.06);
 }
 
 [data-theme='dark'][data-accent='auto'] .btn-primary:hover,
 [data-theme='dark'][data-accent='auto'] .btn-primary-modern:hover {
     background: #f3f4f6;
     color: #111827;
-    box-shadow: 0 6px 16px rgba(229, 231, 235, 0.4), 0 12px 28px rgba(229, 231, 235, 0.18);
+    box-shadow:
+        0 8px 10px rgba(229, 231, 235, 0.55),
+        0 16px 25px rgba(229, 231, 235, 0.28),
+        0 24px 40px rgba(229, 231, 235, 0.1);
 }
 
 /* Icon action buttons (edit) hover state with auto accent in dark mode */

frontend/src/styles/Layout.css

@@ -437,12 +437,18 @@
 [data-theme='dark'][data-accent='auto'] .admin-tab-btn.active {
   background: #e5e7eb;
   color: #111827;
-  box-shadow: 0 4px 12px rgba(229, 231, 235, 0.35), 0 8px 24px rgba(229, 231, 235, 0.15);
+  box-shadow:
+    0 6px 8px rgba(229, 231, 235, 0.5),
+    0 12px 20px rgba(229, 231, 235, 0.25),
+    0 20px 35px rgba(229, 231, 235, 0.08);
 }
 
 [data-theme='dark'][data-accent='auto'] .page-tab-btn.active:focus,
 [data-theme='dark'][data-accent='auto'] .admin-tab-btn.active:focus,
 [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 4px 12px rgba(229, 231, 235, 0.4), 0 8px 24px rgba(229, 231, 235, 0.2);
+  box-shadow:
+    0 6px 8px rgba(229, 231, 235, 0.55),
+    0 12px 20px rgba(229, 231, 235, 0.3),
+    0 20px 35px rgba(229, 231, 235, 0.1);
 }

frontend/src/styles/Sidebar.css

@@ -1026,7 +1026,10 @@
 [data-theme='dark'][data-accent='auto'] .nav-item.active {
   background: #e5e7eb;
   color: #111827 !important;
-  box-shadow: 0 4px 12px rgba(229, 231, 235, 0.35), 0 8px 24px rgba(229, 231, 235, 0.15);
+  box-shadow:
+    0 6px 8px rgba(229, 231, 235, 0.5),
+    0 12px 20px rgba(229, 231, 235, 0.25),
+    0 20px 35px rgba(229, 231, 235, 0.08);
 }
 
 [data-theme='dark'][data-accent='auto'] .nav-item.active .nav-icon,

frontend/src/styles/ThemeSettings.css

@@ -1437,13 +1437,19 @@
 [data-theme='dark'][data-accent='auto'] .btn-primary {
     background: #e5e7eb;
     color: #111827;
-    box-shadow: 0 4px 12px rgba(229, 231, 235, 0.3), 0 8px 20px rgba(229, 231, 235, 0.12);
+    box-shadow:
+        0 6px 8px rgba(229, 231, 235, 0.45),
+        0 12px 20px rgba(229, 231, 235, 0.2),
+        0 20px 35px rgba(229, 231, 235, 0.06);
 }
 
 [data-theme='dark'][data-accent='auto'] .btn-primary:hover {
     background: #f3f4f6;
     color: #111827;
-    box-shadow: 0 6px 16px rgba(229, 231, 235, 0.4), 0 12px 28px rgba(229, 231, 235, 0.18);
+    box-shadow:
+        0 8px 10px rgba(229, 231, 235, 0.55),
+        0 16px 25px rgba(229, 231, 235, 0.28),
+        0 24px 40px rgba(229, 231, 235, 0.1);
 }
 
 /* Ghost button hover */