style(fe): apply theme-aware colors to SkeletonLoader

- Light theme: neutral-100/200 with white background
- Dark theme: dark grays (2d3748/4a5568) with dark background
- Uses CSS variables for dark mode support
- Shimmer animation adapts to theme
- Automatic light/dark switching via prefers-color-scheme

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

frontend/src/shared/ui/components/SkeletonLoader.vue

@@ -72,7 +72,12 @@ defineProps<Props>()
 }
 
 .skeleton-line, .skeleton-cell, .skeleton-header-cell, .skeleton-avatar {
-  background: linear-gradient(90deg, var(--ks-color-neutral-100) 25%, var(--ks-color-neutral-200) 37%, var(--ks-color-neutral-100) 63%);
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-base) 25%,
+    var(--skeleton-highlight) 37%,
+    var(--skeleton-base) 63%
+  );
   background-size: 400% 100%;
   animation: skeleton-shimmer 1.4s ease infinite;
   border-radius: var(--ks-radius-sm);
@@ -85,8 +90,8 @@ defineProps<Props>()
 
 .skeleton-card {
   padding: var(--ks-space-3);
-  background: #fff;
-  border: 1px solid var(--ks-color-neutral-200);
+  background: var(--skeleton-bg);
+  border: 1px solid var(--skeleton-border);
   border-radius: var(--ks-radius-md);
 }
 
@@ -103,10 +108,26 @@ defineProps<Props>()
   display: flex;
   flex-direction: column;
   gap: 4px;
-  border: 1px solid var(--ks-color-neutral-200);
+  border: 1px solid var(--skeleton-border);
   border-radius: var(--ks-radius-md);
   padding: 6px;
-  background: #fff;
+  background: var(--skeleton-bg);
+}
+
+:root {
+  --skeleton-base: var(--ks-color-neutral-100, #f3f4f6);
+  --skeleton-highlight: var(--ks-color-neutral-200, #e5e7eb);
+  --skeleton-bg: #ffffff;
+  --skeleton-border: var(--ks-color-neutral-200, #e5e7eb);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --skeleton-base: #2d3748;
+    --skeleton-highlight: #4a5568;
+    --skeleton-bg: #1a202c;
+    --skeleton-border: #4a5568;
+  }
 }
 
 .skeleton-table-header {