fix: 1:1 prototype port – exact hms-* CSS, real logo, all components from app.js

frontend/components/LoadingSkeleton.vue

@@ -1,24 +1,12 @@
 <template>
-  <div class="animate-pulse" :class="wrapperClass">
-    <div
-      v-for="n in count"
-      :key="n"
-      class="skeleton-shimmer rounded-md"
-      :style="{ height: height, marginBottom: gap }"
-    />
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" aria-live="polite" aria-busy="true">
+    <div v-for="i in count" :key="i" class="hms-card overflow-hidden">
+      <div class="hms-skeleton aspect-[4/3]" style="border-radius:0"></div>
+      <div class="p-4 space-y-3"><div class="hms-skeleton h-4 w-3/4"></div><div class="hms-skeleton h-3 w-full"></div><div class="hms-skeleton h-3 w-1/2"></div><div class="flex justify-between items-center pt-2"><div class="hms-skeleton h-3 w-20"></div><div class="hms-skeleton h-6 w-24" style="border-radius:var(--radius-md)"></div></div></div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
-  count?: number;
-  height?: string;
-  gap?: string;
-  wrapperClass?: string;
-}>(), {
-  count: 3,
-  height: "20px",
-  gap: "12px",
-  wrapperClass: "w-full",
-});
+withDefaults(defineProps<{ count?: number }>(), { count: 6 })
 </script>