refactor(ui): unify layout system with 60rem max-width and consistent spacing

- Standardize container max-width across all panels:
  * Replace max-w-4xl and max-w-5xl with unified max-w-[60rem]
  * Apply to SettingsPage, UnifiedMcpPanel, SkillsPage, and FullScreenPanel
  * Ensures consistent reading width and visual balance on wide screens

- Optimize padding hierarchy and structure:
  * Move px-6 from parent elements to content containers
  * FullScreenPanel: Add max-w-[60rem] wrapper to header, content, and footer
  * Add border separators (border-t/border-b) to header and footer sections
  * Consolidate nested padding in MCP, Skills, and Prompts panels
  * Remove redundant padding layers for cleaner CSS

- Simplify component styling:
  * MCP list items: Replace card-based layout with modern group-based design
  * Remove unnecessary wrapper divs and flatten DOM structure
  * Update card hover effects with smooth transitions
  * Simplify icon selection dialog (remove description text in BasicFormFields)

- Benefits:
  * Consistent 60rem max-width provides optimal readability
  * Unified spacing rules reduce maintenance complexity
  * Cleaner component hierarchy improves performance
  * Better responsive behavior across different screen sizes
  * More cohesive visual design language throughout the app

This creates a maintainable, scalable design system foundation.

src/components/skills/RepoManagerPanel.tsx

@@ -93,7 +93,7 @@ export function RepoManagerPanel({
       onClose={onClose}
     >
       {/* 添加仓库表单 */}
-      <div className="space-y-4 glass-card rounded-xl p-6 border border-border/10">
+      <div className="space-y-4 glass rounded-xl p-6 border border-white/10">
         <h3 className="text-base font-semibold text-foreground">
           添加技能仓库
         </h3>
@@ -156,7 +156,7 @@ export function RepoManagerPanel({
           {t("skills.repo.list")}
         </h3>
         {repos.length === 0 ? (
-          <div className="text-center py-12 glass-card rounded-xl border border-border/10">
+          <div className="text-center py-12 glass rounded-xl border border-white/10">
             <p className="text-sm text-muted-foreground">
               {t("skills.repo.empty")}
             </p>
@@ -166,7 +166,7 @@ export function RepoManagerPanel({
             {repos.map((repo) => (
               <div
                 key={`${repo.owner}/${repo.name}`}
-                className="flex items-center justify-between rounded-xl border border-border/10 glass-card px-4 py-3"
+                className="flex items-center justify-between rounded-xl border border-white/10 bg-gray-900/40 px-4 py-3"
               >
                 <div>
                   <div className="text-sm font-medium text-foreground">

src/components/skills/SkillCard.tsx

@@ -57,7 +57,7 @@ export function SkillCard({ skill, onInstall, onUninstall }: SkillCardProps) {
     skill.directory.trim().toLowerCase() !== skill.name.trim().toLowerCase();
 
   return (
-    <Card className="glass-card flex flex-col h-full border-white/5 transition-all duration-300 hover:bg-white/[0.02] hover:border-primary/50 hover:shadow-lg hover:-translate-y-1 group relative overflow-hidden">
+    <Card className="glass flex flex-col h-full border border-white/10 bg-gray-900/40 transition-all duration-300 hover:bg-gray-900/60 hover:border-white/20 hover:shadow-lg group relative overflow-hidden">
       <div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
       <CardHeader className="pb-3">
         <div className="flex items-start justify-between gap-2">

src/components/skills/SkillsPage.tsx

@@ -167,39 +167,41 @@ export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
         {/* 顶部操作栏（固定区域）已移除，由 App.tsx 接管 */}
 
         {/* 技能网格（可滚动详情区域） */}
-        <div className="flex-1 min-h-0 overflow-y-auto px-6 py-4 animate-fade-in">
-          {loading ? (
-            <div className="flex items-center justify-center h-64">
-              <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
-            </div>
-          ) : skills.length === 0 ? (
-            <div className="flex flex-col items-center justify-center h-64 text-center">
-              <p className="text-lg font-medium text-gray-900 dark:text-gray-100">
-                {t("skills.empty")}
-              </p>
-              <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
-                {t("skills.emptyDescription")}
-              </p>
-              <Button
-                variant="link"
-                onClick={() => setRepoManagerOpen(true)}
-                className="mt-3 text-sm font-normal"
-              >
-                {t("skills.addRepo")}
-              </Button>
-            </div>
-          ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-              {skills.map((skill) => (
-                <SkillCard
-                  key={skill.key}
-                  skill={skill}
-                  onInstall={handleInstall}
-                  onUninstall={handleUninstall}
-                />
-              ))}
-            </div>
-          )}
+        <div className="flex-1 min-h-0 overflow-y-auto animate-fade-in">
+          <div className="mx-auto max-w-[60rem] px-6 py-4">
+            {loading ? (
+              <div className="flex items-center justify-center h-64">
+                <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
+              </div>
+            ) : skills.length === 0 ? (
+              <div className="flex flex-col items-center justify-center h-64 text-center">
+                <p className="text-lg font-medium text-gray-900 dark:text-gray-100">
+                  {t("skills.empty")}
+                </p>
+                <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+                  {t("skills.emptyDescription")}
+                </p>
+                <Button
+                  variant="link"
+                  onClick={() => setRepoManagerOpen(true)}
+                  className="mt-3 text-sm font-normal"
+                >
+                  {t("skills.addRepo")}
+                </Button>
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {skills.map((skill) => (
+                  <SkillCard
+                    key={skill.key}
+                    skill={skill}
+                    onInstall={handleInstall}
+                    onUninstall={handleUninstall}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
         </div>
 
         {/* 仓库管理面板 */}