更新皮肤分类功能，添加帮助页面和Yggdrasil教程

src/app/globals.css

@@ -117,6 +117,80 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground font-sans;
+    background-image: 
+      linear-gradient(45deg, #e6f7ef 25%, transparent 25%),
+      linear-gradient(-45deg, #e6f7ef 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #e6f7ef 75%),
+      linear-gradient(-45deg, transparent 75%, #e6f7ef 75%);
+    background-size: 40px 40px;
+    background-position: 
+      0 0,
+      0 20px,
+      20px -20px,
+      -20px 0px;
+  }
+  .dark body {
+    background-image: 
+      linear-gradient(45deg, rgba(16, 185, 129, 0.1) 25%, transparent 25%),
+      linear-gradient(-45deg, rgba(16, 185, 129, 0.1) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, rgba(16, 185, 129, 0.1) 75%),
+      linear-gradient(-45deg, transparent 75%, rgba(16, 185, 129, 0.1) 75%);
+  }
+}
+
+@layer utilities {
+  .content-auto {
+    content-visibility: auto;
+  }
+  /* 响应式间距工具 */
+  .spacing-sm {
+    @apply p-2 sm:p-3 md:p-4;
+  }
+  .spacing-md {
+    @apply p-3 sm:p-4 md:p-6;
+  }
+  .spacing-lg {
+    @apply p-4 sm:p-6 md:p-8;
+  }
+  /* 响应式字体大小 */
+  .text-responsive {
+    @apply text-base sm:text-lg md:text-xl;
+  }
+  /* 响应式网格布局 */
+  .grid-responsive {
+    @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4;
+  }
+  /* 移动端安全区域padding */
+  .safe-area-inset {
+    @apply px-4 sm:px-6;
+  }
+  /* 修复iOS上的点击延迟 */
+  .ios-tap {
+    -webkit-tap-highlight-color: transparent;
+  }
+  /* 登录弹窗动画 */
+  .animate-fadeIn {
+    animation: fadeIn 0.3s ease-in-out;
+  }
+  
+  .animate-slideUp {
+    animation: slideUp 0.3s ease-out;
+  }
+  
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 }