diff --git a/app/components/index/CardDetailModal.vue b/app/components/index/CardDetailModal.vue
index 61d5d08..0d8191d 100644
--- a/app/components/index/CardDetailModal.vue
+++ b/app/components/index/CardDetailModal.vue
@@ -17,11 +17,21 @@ export interface CardDetail {
   articles?: { id: number; title: string }[]
 }
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   card: CardDetail | null
   visible: boolean
   categories: CategoryNode[]
-}>()
+  size?: 'default' | 'expanded'
+}>(), {
+  size: 'default',
+})
+
+const dialogStyle = computed(() => {
+  if (props.size === 'expanded') {
+    return { width: '80vw' }
+  }
+  return { width: '720px' }
+})
 
 const emit = defineEmits<{
   'update:visible': [v: boolean]
@@ -108,10 +118,10 @@ function formatDate(d?: string) {
   <BoDialog
     :show="visible"
     :mask-can-close="true"
-    :style="{ width: '600px' }"
+    :style="dialogStyle"
     @update:show="(v: boolean) => emit('update:visible', v)"
   >
-    <div v-if="card" class="detail">
+    <div v-if="card" class="detail" :class="{ 'detail--expanded': size === 'expanded' }">
       <!-- Image area -->
       <div v-if="card.images && card.images.length > 0" class="detail-image-area">
         <img
@@ -196,7 +206,7 @@ function formatDate(d?: string) {
 .detail {
   display: flex;
   flex-direction: column;
-  max-height: 85vh;
+  max-height: 92vh;
   background: var(--color-canvas, #faf9f5);
   border-radius: 16px;
   overflow: hidden;
@@ -256,8 +266,8 @@ function formatDate(d?: string) {
 .detail-image-area {
   position: relative;
   background: var(--color-surface-card);
-  min-height: 200px;
-  max-height: 55vh;
+  min-height: 180px;
+  max-height: 40vh;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -265,7 +275,7 @@ function formatDate(d?: string) {
 
 .detail-image {
   width: 100%;
-  max-height: 55vh;
+  max-height: 40vh;
   object-fit: cover;
   display: block;
 }
@@ -314,7 +324,6 @@ function formatDate(d?: string) {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  overflow-y: auto;
 }
 
 .detail-meta-row {
@@ -459,4 +468,30 @@ function formatDate(d?: string) {
 .detail-article-link:hover {
   background: #d0ece4;
 }
+
+/* ── Expanded mode ── */
+
+.detail--expanded {
+  height: 80vh;
+  max-height: none;
+}
+
+.detail--expanded .detail-image-area {
+  max-height: 55vh;
+}
+
+.detail--expanded .detail-image {
+  max-height: 55vh;
+}
+
+.detail--expanded .detail-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 32px 40px 40px;
+}
+
+.detail--expanded .detail-desc {
+  font-size: 16px;
+  line-height: 1.9;
+}
 </style>
diff --git a/app/components/index/CardFormModal.vue b/app/components/index/CardFormModal.vue
index 109d85b..4924b96 100644
--- a/app/components/index/CardFormModal.vue
+++ b/app/components/index/CardFormModal.vue
@@ -9,11 +9,12 @@ const ASPECT_PRESETS = [
   { label: '方形 1:1', value: 1.0 },
   { label: '横图 4:3', value: 1.33 },
   { label: '宽屏 16:9', value: 1.78 },
+  { label: '超宽 2.35:1', value: 2.35 },
 ]
 
 const props = defineProps<{
   mode: 'create' | 'edit'
-  card: CardDetail | null   // null for create, prefilled for edit
+  card: CardDetail | null
   categories: CategoryNode[]
   visible: boolean
 }>()
@@ -43,7 +44,7 @@ async function loadTags() {
 const formType = ref<string>('image-text')
 const title = ref('')
 const description = ref('')
-const aspectRatio = ref<number | null>(0.75)
+const aspectRatio = ref<number | null>(1.33)
 const categoryId = ref<string | null>(null)
 const imageUrl = ref('')
 const imageUrls = ref<string[]>([''])
@@ -98,7 +99,6 @@ const isEdit = computed(() => props.mode === 'edit')
 
 const titleText = computed(() => isEdit.value ? '编辑卡片' : '新增卡片')
 
-// 从注册表读取表单字段需求（新增类型无需修改此文件）
 const formFields = computed(() => cardTypeRegistry[formType.value as CardType]?.formFields ?? {})
 const needsImage = computed(() => formFields.value.image ?? false)
 const needsMultiImage = computed(() => formFields.value.multiImage ?? false)
@@ -108,7 +108,7 @@ const needsDescription = computed(() => formFields.value.description ?? false)
 // Flatten category tree for select
 interface FlatCat { id: string; name: string; depth: number }
 const flatCategories = computed<FlatCat[]>(() => {
-  const result: FlatCat[] = [{ id: '', name: '（无分类）', depth: 0 }]
+  const result: FlatCat[] = [{ id: '', name: '无分类', depth: 0 }]
   function walk(nodes: CategoryNode[], depth: number) {
     for (const n of nodes) {
       if (n.id === '__uncategorized__') continue
@@ -143,13 +143,12 @@ watch(() => props.visible, (v) => {
       : ['']
     selectedTagIds.value = []
     selectedArticleIds.value = []
-    // Re-fetch card to get full relations including articles
     fetchCardArticles(props.card.id)
   } else {
     formType.value = 'image-text'
     title.value = ''
     description.value = ''
-    aspectRatio.value = 0.75
+    aspectRatio.value = 1.33
     categoryId.value = null
     imageUrl.value = ''
     imageUrls.value = ['']
@@ -227,7 +226,7 @@ async function onSubmit() {
   error.value = ''
 
   if (!title.value.trim()) { error.value = '请输入标题'; return }
-  if (needsImage.value && !imageUrl.value.trim()) { error.value = '请输入图片 URL'; return }
+  if (needsImage.value && !imageUrl.value.trim()) { error.value = '请添加图片'; return }
   if (needsMultiImage.value) {
     const validUrls = imageUrls.value.filter(u => u.trim())
     if (validUrls.length === 0) { error.value = '请至少添加一张图片'; return }
@@ -243,7 +242,6 @@ async function onSubmit() {
     categoryId: categoryId.value || null,
   }
 
-  // Images
   if (needsMultiImage.value) {
     const validUrls = imageUrls.value.filter(u => u.trim())
     body.images = validUrls.map((url, i) => ({ url: url.trim(), sortOrder: i }))
@@ -251,12 +249,10 @@ async function onSubmit() {
     body.images = [{ url: imageUrl.value.trim(), sortOrder: 0 }]
   }
 
-  // Tags
   if (needsTags.value) {
     body.tagIds = [...selectedTagIds.value]
   }
 
-  // Articles
   body.articleIds = selectedArticleIds.value.length > 0 ? [...selectedArticleIds.value] : null
 
   try {
@@ -279,82 +275,96 @@ async function onSubmit() {
   <BoDialog
     :show="visible"
     :mask-can-close="!saving"
-    :style="{ width: '480px' }"
+    :style="{ width: '600px' }"
     @update:show="(v: boolean) => emit('update:visible', v)"
   >
     <div class="card-form">
       <!-- Header -->
-      <div class="cf-header">
-        <h2 class="cf-title">{{ titleText }}</h2>
-        <button type="button" class="cf-close" :disabled="saving" @click="emit('update:visible', false)">
+      <div class="form-header">
+        <h2 class="form-title">{{ titleText }}</h2>
+        <button
+          type="button"
+          class="form-close"
+          :disabled="saving"
+          @click="emit('update:visible', false)"
+        >
           <Icon name="lucide:x" />
         </button>
       </div>
 
       <!-- Body -->
-      <div class="cf-body">
-        <div v-if="error" class="cf-error">{{ error }}</div>
+      <div class="form-body">
+        <!-- Error -->
+        <div v-if="error" class="form-error">
+          <Icon name="lucide:alert-circle" class="form-error-icon" />
+          <span>{{ error }}</span>
+        </div>
 
-        <!-- Type selector -->
-        <div class="cf-field">
-          <label class="cf-label">类型</label>
-          <div class="cf-type-grid">
+        <!-- ── 卡片类型 ── -->
+        <div class="form-group">
+          <div class="form-group-label">卡片类型</div>
+          <div class="type-grid">
             <button
               v-for="ct in CARD_TYPE_OPTIONS"
               :key="ct.value"
               type="button"
-              class="cf-type-btn"
+              class="type-card"
               :class="{ active: formType === ct.value }"
               :disabled="saving"
               @click="formType = ct.value"
             >
-              <Icon :name="ct.icon" class="cf-type-icon" />
-              <span>{{ ct.label }}</span>
+              <Icon :name="ct.icon" class="type-card-icon" />
+              <span class="type-card-label">{{ ct.label }}</span>
             </button>
           </div>
         </div>
 
-        <!-- Title -->
-        <div class="cf-field">
-          <label class="cf-label"><span class="cf-required">*</span> 标题 <span class="cf-count">{{ title.length }}/60</span></label>
-          <input
-            v-model="title"
-            type="text"
-            class="cf-input"
-            placeholder="卡片标题"
-            :disabled="saving"
-            maxlength="60"
-            @keyup.enter="onSubmit"
-          />
-        </div>
-
-        <!-- Category -->
-        <div class="cf-field">
-          <label class="cf-label">分类</label>
-          <select v-model="categoryId" class="cf-select" :disabled="saving">
-            <option
-              v-for="fc in flatCategories"
-              :key="fc.id"
-              :value="fc.id || null"
-            >
-              {{ '\u00A0\u00A0'.repeat(fc.depth) }}{{ fc.name }}
-            </option>
-          </select>
-        </div>
-
-        <!-- Image URL (single) -->
-        <div v-if="needsImage" class="cf-field">
-          <label class="cf-label"><span class="cf-required">*</span> 图片</label>
-          <div class="cf-image-input-row">
+        <!-- ── 基本信息 ── -->
+        <div class="form-group">
+          <div class="form-group-label">基本信息</div>
+
+          <!-- Title -->
+          <div class="form-field">
+            <div class="field-header">
+              <label class="field-label">
+                标题 <span class="field-required">*</span>
+              </label>
+              <span class="field-count">{{ title.length }}/60</span>
+            </div>
             <input
-              v-model="imageUrl"
-              type="url"
-              class="cf-input"
-              placeholder="粘贴图片 URL 或点击上传"
+              v-model="title"
+              type="text"
+              class="field-input"
+              placeholder="输入卡片标题"
               :disabled="saving"
+              maxlength="60"
+              @keyup.enter="onSubmit"
             />
-            <label class="cf-upload-btn" :class="{ disabled: saving }">
-              <Icon name="lucide:upload" />
+          </div>
+
+          <!-- Category -->
+          <div class="form-field">
+            <label class="field-label">分类</label>
+            <select v-model="categoryId" class="field-select" :disabled="saving">
+              <option
+                v-for="fc in flatCategories"
+                :key="fc.id"
+                :value="fc.id || null"
+              >
+                {{ '\u00A0\u00A0'.repeat(fc.depth) }}{{ fc.name }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <!-- ── 图片（单张） ── -->
+        <div v-if="needsImage" class="form-group">
+          <div class="form-group-label">图片 <span class="field-required">*</span></div>
+
+          <div class="image-upload-row">
+            <label class="image-dropzone">
+              <Icon name="lucide:image-plus" class="dropzone-icon" />
+              <span class="dropzone-text">点击上传</span>
               <input
                 type="file"
                 accept="image/*"
@@ -363,177 +373,231 @@ async function onSubmit() {
                 @change="onFileUpload"
               />
             </label>
+            <input
+              v-model="imageUrl"
+              type="url"
+              class="field-input"
+              placeholder="或粘贴图片 URL…"
+              :disabled="saving"
+            />
           </div>
-          <div v-if="imageUrl" class="cf-image-preview">
-            <img :src="imageUrl" alt="预览" @error="(e) => { (e.target as HTMLImageElement).style.display = 'none' }" />
+
+          <div v-if="imageUrl" class="image-preview-block">
+            <img
+              :src="imageUrl"
+              alt="预览"
+              class="image-preview-img"
+              @error="(e) => { (e.target as HTMLImageElement).style.display = 'none' }"
+            />
+            <button
+              type="button"
+              class="image-preview-clear"
+              :disabled="saving"
+              @click="imageUrl = ''"
+            >
+              <Icon name="lucide:x" />
+            </button>
           </div>
         </div>
 
-        <!-- Image URLs (multi, for portfolio) -->
-        <div v-if="needsMultiImage" class="cf-field">
-          <label class="cf-label"><span class="cf-required">*</span> 图片列表</label>
-          <div class="cf-image-list">
-            <div v-for="(_, idx) in imageUrls" :key="idx" class="cf-image-row">
+        <!-- ── 图片列表（图集） ── -->
+        <div v-if="needsMultiImage" class="form-group">
+          <div class="form-group-label">图片列表 <span class="field-required">*</span></div>
+
+          <div class="multi-image-list">
+            <div v-for="(_, idx) in imageUrls" :key="idx" class="multi-image-row">
+              <span class="multi-image-index">{{ idx + 1 }}</span>
               <input
                 v-model="imageUrls[idx]"
                 type="url"
-                class="cf-input"
-                placeholder="https://..."
+                class="field-input"
+                :placeholder="`图片 ${idx + 1} 的 URL`"
                 :disabled="saving"
               />
               <button
                 v-if="imageUrls.length > 1"
                 type="button"
-                class="cf-image-remove"
+                class="multi-image-remove"
                 :disabled="saving"
                 @click="removeImageUrl(idx)"
               >
-                <Icon name="lucide:x" />
+                <Icon name="lucide:trash-2" />
               </button>
             </div>
-            <div v-if="imageUrls.some(u => u.trim())" class="cf-image-previews">
-              <div
-                v-for="(url, idx) in imageUrls.filter(u => u.trim())"
-                :key="idx"
-                class="cf-image-preview cf-image-preview--sm"
-              >
-                <img :src="url" alt="预览" @error="(e) => { (e.target as HTMLImageElement).style.display = 'none' }" />
-              </div>
-            </div>
           </div>
-          <button type="button" class="cf-add-btn" :disabled="saving" @click="addImageUrl">
+
+          <button type="button" class="add-row-btn" :disabled="saving" @click="addImageUrl">
             <Icon name="lucide:plus" />
-            <span>添加图片</span>
+            <span>添加一张</span>
           </button>
+
+          <div v-if="imageUrls.some(u => u.trim())" class="image-previews-grid">
+            <div
+              v-for="(url, idx) in imageUrls.filter(u => u.trim())"
+              :key="idx"
+              class="image-preview-thumb"
+            >
+              <img
+                :src="url"
+                :alt="`预览 ${idx + 1}`"
+                @error="(e) => { (e.target as HTMLImageElement).style.display = 'none' }"
+              />
+            </div>
+          </div>
         </div>
 
-        <!-- Description -->
-        <div v-if="needsDescription" class="cf-field">
-          <label class="cf-label">描述 <span class="cf-count">{{ description.length }}/200</span></label>
+        <!-- ── 描述 ── -->
+        <div v-if="needsDescription" class="form-group">
+          <div class="field-header">
+            <label class="form-group-label" style="margin-bottom:0">描述</label>
+            <span class="field-count">{{ description.length }}/200</span>
+          </div>
           <textarea
             v-model="description"
-            class="cf-textarea"
-            rows="3"
-            placeholder="描述内容..."
+            class="field-textarea"
+            rows="4"
+            placeholder="写点什么…"
             :disabled="saving"
             maxlength="200"
           ></textarea>
         </div>
 
-        <!-- Aspect Ratio -->
-        <div class="cf-field">
-          <label class="cf-label">宽高比</label>
-          <div class="cf-ratio-row">
+        <!-- ── 宽高比 ── -->
+        <div class="form-group">
+          <div class="form-group-label">宽高比</div>
+          <div class="ratio-bar">
             <button
               v-for="r in ASPECT_PRESETS"
               :key="r.value"
               type="button"
-              class="cf-ratio-btn"
+              class="ratio-btn"
               :class="{ active: aspectRatio === r.value }"
               :disabled="saving"
               @click="aspectRatio = r.value"
             >
               {{ r.label }}
             </button>
-            <input
-              v-model.number="aspectRatio"
-              type="number"
-              class="cf-input cf-input-sm"
-              step="0.01"
-              min="0.1"
-              max="5"
-              placeholder="自定义"
-              :disabled="saving"
-            />
           </div>
         </div>
 
-        <!-- Articles -->
-        <div class="cf-field">
-          <label class="cf-label">关联文章</label>
-          <!-- Selected articles -->
-          <div v-if="selectedArticleIds.length > 0" class="cf-tags-selected">
+        <!-- ── 标签（仅项目类型） ── -->
+        <div v-if="needsTags" class="form-group">
+          <div class="form-group-label">标签</div>
+
+          <!-- 已选标签 -->
+          <div v-if="selectedTagIds.length > 0" class="chip-row">
             <span
-              v-for="aid in selectedArticleIds"
-              :key="aid"
-              class="cf-tag-chip"
-              style="background: #5db8a6;"
+              v-for="tid in selectedTagIds"
+              :key="tid"
+              class="chip chip-active"
             >
-              {{ allArticles.find(a => a.id === aid)?.title ?? `文章 #${aid}` }}
-              <button type="button" class="cf-tag-remove" :disabled="saving" @click="selectedArticleIds = selectedArticleIds.filter(id => id !== aid)">
-                <Icon name="lucide:x" />
-              </button>
-            </span>
-          </div>
-          <!-- Picker -->
-          <div class="cf-article-picker">
-            <input
-              v-model="articleSearch"
-              type="text"
-              class="cf-input"
-              placeholder="搜索文章…"
-              :disabled="saving"
-              @focus="onArticleFocus"
-              @blur="onArticleBlur"
-            />
-            <div v-if="showArticlePicker && availableArticles.length > 0" class="cf-article-dropdown">
+              {{ allTags.find(t => t.id === tid)?.name ?? `#${tid}` }}
               <button
-                v-for="a in availableArticles.slice(0, 15)"
-                :key="a.id"
                 type="button"
-                class="cf-article-option"
+                class="chip-remove"
                 :disabled="saving"
-                @mousedown.prevent="addArticleId(a.id)"
+                @click="toggleTag(tid)"
               >
-                {{ a.title }}
+                <Icon name="lucide:x" />
               </button>
-            </div>
-            <div v-else-if="showArticlePicker && articleSearch" class="cf-article-dropdown">
-              <span class="cf-hint" style="padding: 8px 12px; display: block;">无匹配文章</span>
-            </div>
+            </span>
           </div>
+
+          <!-- 可选标签池 -->
+          <div v-if="availableTags.length > 0" class="tag-pool">
+            <button
+              v-for="tag in availableTags"
+              :key="tag.id"
+              type="button"
+              class="tag-chip"
+              :disabled="saving"
+              @click="toggleTag(tag.id)"
+            >
+              {{ tag.name }}
+            </button>
+          </div>
+
+          <span v-if="allTags.length === 0 && tagsLoaded" class="hint-text">
+            暂无可用标签，请先在标签管理中创建
+          </span>
         </div>
 
-        <!-- Tags (project) -->
-        <div v-if="needsTags" class="cf-field">
-          <label class="cf-label">标签</label>
-          <div v-if="selectedTagIds.length > 0" class="cf-tags-selected">
+        <!-- ── 关联文章 ── -->
+        <div class="form-group">
+          <div class="form-group-label">关联文章</div>
+
+          <!-- 已选文章 -->
+          <div v-if="selectedArticleIds.length > 0" class="chip-row">
             <span
-              v-for="tid in selectedTagIds"
-              :key="tid"
-              class="cf-tag-chip"
+              v-for="aid in selectedArticleIds"
+              :key="aid"
+              class="chip chip-article"
             >
-              {{ allTags.find(t => t.id === tid)?.name ?? `#${tid}` }}
-              <button type="button" class="cf-tag-remove" :disabled="saving" @click="toggleTag(tid)">
+              {{ allArticles.find(a => a.id === aid)?.title ?? `文章 #${aid}` }}
+              <button
+                type="button"
+                class="chip-remove"
+                :disabled="saving"
+                @click="selectedArticleIds = selectedArticleIds.filter(id => id !== aid)"
+              >
                 <Icon name="lucide:x" />
               </button>
             </span>
           </div>
-          <div v-if="availableTags.length > 0" class="cf-tags-available">
-            <span class="cf-label-sm">可选标签</span>
-            <div class="cf-tags-pool">
+
+          <!-- 文章搜索 -->
+          <div class="article-picker">
+            <div class="article-search-wrap">
+              <Icon name="lucide:search" class="article-search-icon" />
+              <input
+                v-model="articleSearch"
+                type="text"
+                class="field-input"
+                placeholder="搜索文章然后点击添加…"
+                :disabled="saving"
+                @focus="onArticleFocus"
+                @blur="onArticleBlur"
+              />
+            </div>
+            <div v-if="showArticlePicker && availableArticles.length > 0" class="article-dropdown">
               <button
-                v-for="tag in availableTags"
-                :key="tag.id"
+                v-for="a in availableArticles.slice(0, 12)"
+                :key="a.id"
                 type="button"
-                class="cf-tag-option"
+                class="article-option"
                 :disabled="saving"
-                @click="toggleTag(tag.id)"
+                @mousedown.prevent="addArticleId(a.id)"
               >
-                {{ tag.name }}
+                {{ a.title }}
               </button>
             </div>
+            <div
+              v-else-if="showArticlePicker && articleSearch && availableArticles.length === 0"
+              class="article-dropdown"
+            >
+              <span class="article-empty">未找到匹配文章</span>
+            </div>
           </div>
-          <span v-if="allTags.length === 0 && tagsLoaded" class="cf-hint">暂无可用标签，请先在标签管理中创建</span>
         </div>
       </div>
 
       <!-- Footer -->
-      <div class="cf-footer">
-        <button type="button" class="cf-btn cf-btn-cancel" :disabled="saving" @click="emit('update:visible', false)">
+      <div class="form-footer">
+        <button
+          type="button"
+          class="btn btn-secondary"
+          :disabled="saving"
+          @click="emit('update:visible', false)"
+        >
           取消
         </button>
-        <button type="button" class="cf-btn cf-btn-primary" :disabled="saving" @click="onSubmit">
+        <button
+          type="button"
+          class="btn btn-primary"
+          :disabled="saving"
+          @click="onSubmit"
+        >
+          <Icon v-if="saving" name="lucide:loader-2" class="btn-spinner" />
           {{ saving ? '保存中…' : (isEdit ? '保存修改' : '创建卡片') }}
         </button>
       </div>
@@ -542,33 +606,37 @@ async function onSubmit() {
 </template>
 
 <style scoped>
+/* ═══════════════════════════════════════════════════════════════════
+   Card Form — Human-centered redesign
+   ═══════════════════════════════════════════════════════════════════ */
+
 .card-form {
   display: flex;
   flex-direction: column;
-  max-height: 85vh;
   background: var(--color-canvas, #faf9f5);
-  border-radius: 12px;
-  overflow: hidden;
+  border-radius: 16px;
 }
 
-/* ── Header ── */
+/* ── Header ─────────────────────────────────────────────────────── */
 
-.cf-header {
+.form-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 18px 24px 0;
+  padding: 20px 28px 0;
+  flex-shrink: 0;
 }
 
-.cf-title {
+.form-title {
   font-family: var(--font-display);
-  font-size: 18px;
+  font-size: 22px;
   font-weight: 500;
   color: var(--color-ink);
   margin: 0;
+  letter-spacing: -0.3px;
 }
 
-.cf-close {
+.form-close {
   width: 32px;
   height: 32px;
   display: flex;
@@ -581,353 +649,414 @@ async function onSubmit() {
   cursor: pointer;
   transition: all 0.12s ease;
 }
+.form-close :deep(svg) { width: 18px; height: 18px; }
+.form-close:hover { background: var(--color-surface-soft); color: var(--color-ink); }
+.form-close:disabled { opacity: 0.4; cursor: not-allowed; }
 
-.cf-close :deep(svg) { width: 18px; height: 18px; }
-.cf-close:hover { background: var(--color-surface-soft); color: var(--color-ink); }
+/* ── Body ───────────────────────────────────────────────────────── */
 
-/* ── Body ── */
-
-.cf-body {
-  padding: 18px 24px;
+.form-body {
+  padding: 20px 28px;
   display: flex;
   flex-direction: column;
-  gap: 14px;
-  overflow-y: auto;
+  gap: 20px;
 }
 
-.cf-error {
+/* ── Error ──────────────────────────────────────────────────────── */
+
+.form-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   padding: 10px 14px;
-  background: rgba(198, 69, 69, 0.08);
+  background: rgba(198, 69, 69, 0.07);
   color: var(--color-error, #c64545);
-  border-radius: 8px;
+  border-radius: 10px;
   font-size: 13px;
+  font-weight: 500;
 }
+.form-error-icon { width: 16px; height: 16px; flex-shrink: 0; }
 
-.cf-field {
+/* ── Form group ─────────────────────────────────────────────────── */
+
+.form-group {
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 10px;
 }
 
-.cf-label {
+.form-group-label {
   font-size: 13px;
+  font-weight: 600;
+  color: var(--color-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+}
+
+/* ── Type grid ──────────────────────────────────────────────────── */
+
+.type-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.type-grid :last-child:nth-child(4),
+.type-grid :last-child:nth-child(5) {
+  /* Let the last row of 2 items stay 3-column sized */
+}
+
+.type-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  border-radius: 12px;
+  border: 1.5px solid var(--color-hairline);
+  background: var(--color-canvas);
+  cursor: pointer;
+  transition: all 0.18s ease;
+  font-family: var(--font-body);
+}
+.type-card-icon {
+  width: 22px;
+  height: 22px;
+  color: var(--color-muted);
+  flex-shrink: 0;
+  transition: color 0.18s ease;
+}
+.type-card-label {
+  font-size: 14px;
   font-weight: 500;
   color: var(--color-body);
+  transition: color 0.18s ease;
+}
+.type-card:hover {
+  border-color: var(--color-primary);
+  background: rgba(204, 120, 92, 0.04);
+}
+.type-card:hover .type-card-icon,
+.type-card:hover .type-card-label {
+  color: var(--color-primary);
+}
+.type-card.active {
+  border-color: var(--color-primary);
+  background: rgba(204, 120, 92, 0.08);
+  box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.10);
+}
+.type-card.active .type-card-icon,
+.type-card.active .type-card-label {
+  color: var(--color-primary);
+}
+.type-card:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
-.cf-required {
-  color: var(--color-error, #c64545);
-  font-weight: 600;
+/* ── Fields ─────────────────────────────────────────────────────── */
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
 }
 
-.cf-count {
-  font-weight: 400;
-  font-size: 11px;
-  color: var(--color-muted-soft);
-  margin-left: auto;
+.field-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
-.cf-label-sm {
+.field-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-body);
+}
+.field-required {
+  color: var(--color-error, #c64545);
+  font-weight: 600;
+}
+.field-count {
   font-size: 11px;
-  color: var(--color-muted);
-  margin-bottom: 2px;
+  color: var(--color-muted-soft);
 }
 
-.cf-input,
-.cf-select,
-.cf-textarea {
+.field-input,
+.field-select,
+.field-textarea {
   width: 100%;
-  padding: 9px 13px;
+  padding: 10px 14px;
   font-size: 14px;
   color: var(--color-ink);
-  background: var(--color-canvas, #faf9f5);
+  background: var(--color-canvas);
   border: 1px solid var(--color-hairline);
-  border-radius: 8px;
+  border-radius: 10px;
   outline: none;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   font-family: var(--font-body);
+  box-sizing: border-box;
 }
-
-.cf-input:focus,
-.cf-select:focus,
-.cf-textarea:focus {
+.field-input:focus,
+.field-select:focus,
+.field-textarea:focus {
   border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.15);
-}
-
-.cf-input-sm {
-  width: 120px;
+  box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.12);
 }
 
-.cf-select {
+.field-select {
   cursor: pointer;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c6a64' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
-  background-position: right 12px center;
-  padding-right: 36px;
+  background-position: right 14px center;
+  padding-right: 40px;
 }
 
-.cf-textarea {
+.field-textarea {
   resize: vertical;
-  min-height: 70px;
-  padding: 10px 13px;
-  line-height: 1.5;
-}
-
-.cf-hint {
-  font-size: 11px;
-  color: var(--color-muted-soft);
-  line-height: 1.4;
+  min-height: 90px;
+  line-height: 1.6;
 }
 
-/* ── Image upload ── */
+/* ── Image upload ───────────────────────────────────────────────── */
 
-.cf-image-input-row {
+.image-upload-row {
   display: flex;
-  gap: 8px;
-}
-
-.cf-image-input-row .cf-input {
-  flex: 1;
+  gap: 10px;
 }
 
-.cf-upload-btn {
-  width: 40px;
-  height: 40px;
+.image-dropzone {
+  width: 100px;
+  height: 42px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  border: 1px dashed var(--color-hairline);
-  border-radius: 8px;
+  gap: 2px;
+  border: 1.5px dashed var(--color-hairline);
+  border-radius: 10px;
   cursor: pointer;
   color: var(--color-muted);
   transition: all 0.15s ease;
   flex-shrink: 0;
+  background: var(--color-canvas);
 }
-
-.cf-upload-btn :deep(svg) { width: 18px; height: 18px; }
-.cf-upload-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
-.cf-upload-btn.disabled { opacity: 0.5; cursor: not-allowed; }
-
-.cf-image-preview {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  border-radius: 8px;
-  overflow: hidden;
-  background: var(--color-surface-soft);
-  border: 1px solid var(--color-hairline);
-}
-
-.cf-image-preview img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.image-dropzone:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+  background: rgba(204, 120, 92, 0.04);
 }
+.dropzone-icon { width: 20px; height: 20px; }
+.dropzone-text { font-size: 11px; font-weight: 500; }
 
-.cf-image-previews {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
-  gap: 6px;
+.image-upload-row .field-input {
+  flex: 1;
 }
 
-.cf-image-preview--sm {
-  aspect-ratio: 1;
-  border-radius: 6px;
+.image-preview-block {
+  position: relative;
+  border-radius: 10px;
   overflow: hidden;
-  background: var(--color-surface-soft);
   border: 1px solid var(--color-hairline);
+  background: var(--color-surface-soft);
 }
-
-.cf-image-preview--sm img {
+.image-preview-img {
   width: 100%;
-  height: 100%;
+  max-height: 200px;
   object-fit: cover;
+  display: block;
 }
-
-/* ── Aspect ratio presets ── */
-
-.cf-ratio-row {
+.image-preview-clear {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 28px;
+  height: 28px;
   display: flex;
-  gap: 6px;
   align-items: center;
-  flex-wrap: wrap;
-}
-
-.cf-ratio-btn {
-  height: 34px;
-  padding: 0 12px;
-  font-size: 12px;
-  font-weight: 500;
-  border-radius: 8px;
-  border: 1px solid var(--color-hairline);
-  background: var(--color-canvas);
-  color: var(--color-muted);
+  justify-content: center;
+  border: none;
+  background: rgba(20, 20, 19, 0.45);
+  backdrop-filter: blur(6px);
+  border-radius: 50%;
+  color: #fff;
   cursor: pointer;
-  transition: all 0.12s ease;
-}
-
-.cf-ratio-btn:hover {
-  border-color: var(--color-muted);
-  color: var(--color-body);
-}
-
-.cf-ratio-btn.active {
-  border-color: var(--color-primary);
-  background: rgba(204, 120, 92, 0.08);
-  color: var(--color-primary);
-}
-
-.cf-ratio-row .cf-input-sm {
-  width: 80px;
-  height: 34px;
+  transition: background 0.15s;
 }
+.image-preview-clear :deep(svg) { width: 14px; height: 14px; }
+.image-preview-clear:hover { background: rgba(20, 20, 19, 0.7); }
 
-/* ── Type grid ── */
+/* ── Multi-image ────────────────────────────────────────────────── */
 
-.cf-type-grid {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 6px;
-}
-
-.cf-type-btn {
+.multi-image-list {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  padding: 10px 4px;
-  border-radius: 8px;
-  border: 1px solid var(--color-hairline);
-  background: var(--color-canvas);
-  cursor: pointer;
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--color-muted);
-  transition: all 0.15s ease;
-}
-
-.cf-type-btn:hover {
-  border-color: var(--color-muted);
-  color: var(--color-body);
-}
-
-.cf-type-btn.active {
-  border-color: var(--color-primary);
-  background: rgba(204, 120, 92, 0.08);
-  color: var(--color-primary);
-}
-
-.cf-type-icon {
-  width: 18px;
-  height: 18px;
+  gap: 8px;
 }
 
-/* ── Image list ── */
-
-.cf-image-list {
+.multi-image-row {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
+  gap: 8px;
+  align-items: center;
 }
 
-.cf-image-row {
+.multi-image-index {
+  width: 28px;
+  height: 28px;
   display: flex;
-  gap: 6px;
   align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-muted);
+  background: var(--color-surface-soft);
+  border-radius: 8px;
+  flex-shrink: 0;
 }
 
-.cf-image-row .cf-input {
+.multi-image-row .field-input {
   flex: 1;
 }
 
-.cf-image-remove {
-  width: 32px;
-  height: 32px;
+.multi-image-remove {
+  width: 34px;
+  height: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--color-hairline);
   background: var(--color-canvas);
-  border-radius: 6px;
+  border-radius: 8px;
   color: var(--color-muted);
   cursor: pointer;
   flex-shrink: 0;
   transition: all 0.12s ease;
 }
+.multi-image-remove :deep(svg) { width: 15px; height: 15px; }
+.multi-image-remove:hover { border-color: var(--color-error); color: var(--color-error); }
 
-.cf-image-remove :deep(svg) { width: 14px; height: 14px; }
-.cf-image-remove:hover { border-color: var(--color-error); color: var(--color-error); }
-
-.cf-add-btn {
+.add-row-btn {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
-  padding: 6px 12px;
-  font-size: 12px;
+  gap: 6px;
+  padding: 7px 14px;
+  font-size: 13px;
   font-weight: 500;
-  border-radius: 6px;
-  border: 1px dashed var(--color-hairline);
+  border-radius: 8px;
+  border: 1.5px dashed var(--color-hairline);
   background: none;
   color: var(--color-muted);
   cursor: pointer;
   transition: all 0.15s ease;
+  align-self: flex-start;
+}
+.add-row-btn :deep(svg) { width: 15px; height: 15px; }
+.add-row-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
+
+.image-previews-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
+  gap: 6px;
 }
 
-.cf-add-btn :deep(svg) { width: 14px; height: 14px; }
-.cf-add-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
+.image-preview-thumb {
+  aspect-ratio: 1;
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--color-surface-soft);
+  border: 1px solid var(--color-hairline);
+}
+.image-preview-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 
-/* ── Tags ── */
+/* ── Aspect ratio ───────────────────────────────────────────────── */
 
-.cf-tags-selected {
+.ratio-bar {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.ratio-btn {
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  border-radius: 10px;
+  border: 1.5px solid var(--color-hairline);
+  background: var(--color-canvas);
+  color: var(--color-body);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-family: var(--font-body);
+}
+.ratio-btn:hover {
+  border-color: var(--color-muted);
+}
+.ratio-btn.active {
+  border-color: var(--color-primary);
+  background: rgba(204, 120, 92, 0.08);
+  color: var(--color-primary);
+}
+.ratio-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* ── Chips ──────────────────────────────────────────────────────── */
+
+.chip-row {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 }
 
-.cf-tag-chip {
+.chip {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  font-size: 12px;
+  gap: 5px;
+  padding: 5px 12px;
+  font-size: 13px;
   font-weight: 500;
   border-radius: 9999px;
+  border: none;
+}
+
+.chip-active {
   background: var(--color-primary);
-  color: var(--color-on-primary, #fff);
+  color: #fff;
+}
+.chip-article {
+  background: var(--color-accent-teal, #5db8a6);
+  color: #fff;
 }
 
-.cf-tag-remove {
+.chip-remove {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 16px;
   height: 16px;
   border: none;
-  background: rgba(255,255,255,0.2);
+  background: rgba(255, 255, 255, 0.22);
   border-radius: 50%;
   cursor: pointer;
   color: inherit;
   padding: 0;
 }
+.chip-remove :deep(svg) { width: 10px; height: 10px; }
+.chip-remove:hover { background: rgba(255, 255, 255, 0.4); }
 
-.cf-tag-remove :deep(svg) { width: 10px; height: 10px; }
-
-.cf-tags-available {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
+/* ── Tag pool ───────────────────────────────────────────────────── */
 
-.cf-tags-pool {
+.tag-pool {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px;
+  gap: 6px;
 }
 
-.cf-tag-option {
-  padding: 3px 10px;
-  font-size: 12px;
+.tag-chip {
+  padding: 5px 14px;
+  font-size: 13px;
   font-weight: 500;
   border-radius: 9999px;
   border: 1px solid var(--color-hairline);
@@ -935,62 +1064,39 @@ async function onSubmit() {
   color: var(--color-body);
   cursor: pointer;
   transition: all 0.12s ease;
+  font-family: var(--font-body);
 }
-
-.cf-tag-option:hover {
+.tag-chip:hover {
   border-color: var(--color-primary);
   color: var(--color-primary);
+  background: rgba(204, 120, 92, 0.05);
 }
+.tag-chip:disabled { opacity: 0.4; cursor: not-allowed; }
 
-/* ── Footer ── */
-
-.cf-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 14px 24px;
-  border-top: 1px solid var(--color-hairline);
-  background: var(--color-surface-soft);
-}
+/* ── Article picker ─────────────────────────────────────────────── */
 
-.cf-btn {
-  height: 38px;
-  padding: 0 18px;
-  font-size: 14px;
-  font-weight: 500;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
+.article-picker {
+  position: relative;
 }
 
-.cf-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-
-.cf-btn-cancel {
-  color: var(--color-body);
-  background: var(--color-canvas);
-  border: 1px solid var(--color-hairline);
+.article-search-wrap {
+  position: relative;
 }
-
-.cf-btn-cancel:hover:not(:disabled) { background: var(--color-surface-soft); }
-
-.cf-btn-primary {
-  color: var(--color-on-primary, #fff);
-  background: var(--color-primary);
-  border: none;
+.article-search-icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 15px;
+  height: 15px;
+  color: var(--color-muted-soft);
+  pointer-events: none;
 }
-
-.cf-btn-primary:hover:not(:disabled) { background: var(--color-primary-active, #b5654f); }
-
-/* ── Article picker ── */
-
-.cf-article-picker {
-  position: relative;
+.article-search-wrap .field-input {
+  padding-left: 36px;
 }
 
-.cf-article-dropdown {
+.article-dropdown {
   position: absolute;
   top: 100%;
   left: 0;
@@ -998,17 +1104,17 @@ async function onSubmit() {
   margin-top: 4px;
   background: #fff;
   border: 1px solid var(--color-hairline);
-  border-radius: 8px;
+  border-radius: 10px;
   max-height: 200px;
   overflow-y: auto;
   z-index: 10;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 6px 20px rgba(20, 20, 19, 0.10);
 }
 
-.cf-article-option {
+.article-option {
   display: block;
   width: 100%;
-  padding: 8px 14px;
+  padding: 9px 14px;
   border: none;
   background: none;
   font-size: 13px;
@@ -1016,9 +1122,80 @@ async function onSubmit() {
   text-align: left;
   cursor: pointer;
   transition: background 0.1s;
+  font-family: var(--font-body);
+}
+.article-option:hover {
+  background: var(--color-surface-soft);
+}
+
+.article-empty {
+  display: block;
+  padding: 10px 14px;
+  font-size: 13px;
+  color: var(--color-muted);
+}
+
+/* ── Hint ───────────────────────────────────────────────────────── */
+
+.hint-text {
+  font-size: 12px;
+  color: var(--color-muted-soft);
+  line-height: 1.4;
+}
+
+/* ── Footer ─────────────────────────────────────────────────────── */
+
+.form-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 14px 28px;
+  border-top: 1px solid var(--color-hairline);
+  background: var(--color-surface-soft);
+  flex-shrink: 0;
+}
+
+.btn {
+  height: 40px;
+  padding: 0 20px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-body);
+}
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.btn-secondary {
+  color: var(--color-body);
+  background: var(--color-canvas);
+  border: 1px solid var(--color-hairline);
+}
+.btn-secondary:hover:not(:disabled) {
+  background: #fff;
+  border-color: var(--color-muted);
+}
+
+.btn-primary {
+  color: #fff;
+  background: var(--color-primary);
+  border: none;
+}
+.btn-primary:hover:not(:disabled) {
+  background: var(--color-primary-active, #a9583e);
+}
+
+.btn-spinner {
+  animation: spin 0.8s linear infinite;
+  width: 16px;
+  height: 16px;
 }
 
-.cf-article-option:hover {
-  background: #f5f0e8;
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 </style>
diff --git a/app/components/index/WaterfallCard.vue b/app/components/index/WaterfallCard.vue
index 99e395a..dae7790 100644
--- a/app/components/index/WaterfallCard.vue
+++ b/app/components/index/WaterfallCard.vue
@@ -125,7 +125,7 @@ function onImgError() {
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   overflow: hidden;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 }
 
@@ -138,12 +138,12 @@ function onImgError() {
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   overflow: hidden;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
 }
 
 .card-text {
-  padding: 0 16px 16px;
+  padding: 0 18px 20px;
 }
 
 .img-fallback {
diff --git a/app/components/index/WaterfallImageCard.vue b/app/components/index/WaterfallImageCard.vue
index 1db8684..cba7c4f 100644
--- a/app/components/index/WaterfallImageCard.vue
+++ b/app/components/index/WaterfallImageCard.vue
@@ -96,9 +96,9 @@ function onImgError() {
   max-width: calc(100% - 16px);
   background: var(--color-surface-dark);
   color: var(--color-on-dark);
-  font-size: 10px;
+  font-size: 12px;
   font-weight: 500;
-  padding: 4px 8px;
+  padding: 5px 10px;
   border-radius: 5px;
   letter-spacing: 0.03em;
   opacity: 0;
diff --git a/app/components/index/WaterfallPortfolioCard.vue b/app/components/index/WaterfallPortfolioCard.vue
index 812ab95..2cecfd1 100644
--- a/app/components/index/WaterfallPortfolioCard.vue
+++ b/app/components/index/WaterfallPortfolioCard.vue
@@ -140,7 +140,7 @@ const totalImages = computed(() => props.images.length)
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   overflow: hidden;
   display: -webkit-box;
-  -webkit-line-clamp: 1;
+  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
 
@@ -153,7 +153,7 @@ const totalImages = computed(() => props.images.length)
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   overflow: hidden;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 }
 </style>
diff --git a/app/components/index/WaterfallProjectCard.vue b/app/components/index/WaterfallProjectCard.vue
index a2e6dd1..977dc41 100644
--- a/app/components/index/WaterfallProjectCard.vue
+++ b/app/components/index/WaterfallProjectCard.vue
@@ -143,7 +143,7 @@ function onImgError() {
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
   overflow: hidden;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 }
 
@@ -156,12 +156,12 @@ function onImgError() {
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
   overflow: hidden;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
 }
 
 .card-body {
-  padding: 0 16px 16px;
+  padding: 0 18px 20px;
 }
 
 .tags {
diff --git a/app/components/index/WaterfallTextCard.vue b/app/components/index/WaterfallTextCard.vue
index 69baf90..6a06ad7 100644
--- a/app/components/index/WaterfallTextCard.vue
+++ b/app/components/index/WaterfallTextCard.vue
@@ -66,7 +66,7 @@ defineProps<{
   margin: 0;
   overflow: hidden;
   display: -webkit-box;
-  -webkit-line-clamp: 4;
+  -webkit-line-clamp: 8;
   -webkit-box-orient: vertical;
 }
 </style>
diff --git a/app/pages/collect/index.vue b/app/pages/collect/index.vue
index 65228b9..b7a6d55 100644
--- a/app/pages/collect/index.vue
+++ b/app/pages/collect/index.vue
@@ -347,11 +347,12 @@ async function onCatFormSubmit(data: {
 
 const showDetailModal = ref(false)
 const detailCard = ref<CardDetail | null>(null)
+const detailSize = ref<'default' | 'expanded'>('default')
 const showCardFormModal = ref(false)
 const cardFormMode = ref<'create' | 'edit'>('create')
 const cardFormEditData = ref<CardDetail | null>(null)
 
-function onCardClick(card: CardItem) {
+function onCardExpand(card: CardItem) {
   detailCard.value = {
     id: card.id,
     type: card.type,
@@ -364,6 +365,7 @@ function onCardClick(card: CardItem) {
     categoryId: card.categoryId,
     createdAt: card.createdAt,
   }
+  detailSize.value = 'expanded'
   showDetailModal.value = true
 }
 
@@ -418,6 +420,40 @@ function onCardDragStart(e: DragEvent, item: CardItem) {
     e.dataTransfer.effectAllowed = 'move'
     e.dataTransfer.setData('application/x-card-id', String(item.id))
   }
+  const el = e.currentTarget as HTMLElement
+
+  // build a blurred ghost clone for the drag image
+  const MAX_DRAG_WIDTH = 280
+  const ghost = el.cloneNode(true) as HTMLElement
+  const rect = el.getBoundingClientRect()
+  const ratio = rect.width > MAX_DRAG_WIDTH ? MAX_DRAG_WIDTH / rect.width : 1
+
+  ghost.style.position = 'fixed'
+  ghost.style.top = '-9999px'
+  ghost.style.left = '-9999px'
+  ghost.style.width = (ratio < 1 ? MAX_DRAG_WIDTH : rect.width) + 'px'
+  ghost.style.opacity = '0.55'
+  ghost.style.filter = 'blur(4px)'
+  ghost.style.animation = 'none'
+  ghost.style.pointerEvents = 'none'
+  document.body.appendChild(ghost)
+
+  const offsetX = (e.clientX - rect.left) * ratio
+  const offsetY = (e.clientY - rect.top) * ratio
+  e.dataTransfer!.setDragImage(ghost, offsetX, offsetY)
+
+  // fade the original card after browser snaps the drag image
+  requestAnimationFrame(() => {
+    el.classList.add('dragging')
+    // ghost can be removed — browser holds a reference
+    ghost.remove()
+  })
+}
+
+function onCardDragEnd(e: DragEvent) {
+  dragCardId = null
+  const el = e.currentTarget as HTMLElement
+  el.classList.remove('dragging')
 }
 
 async function onCardDropToCategory(categoryId: string | null, categoryName: string) {
@@ -456,9 +492,9 @@ function containerWidth(): number {
 }
 
 function getColumnWidth(): number {
-  const padding = 48
+  const padding = 32
   const w = containerWidth() - padding
-  const gap = 12
+  const gap = 8
   return (w - gap * (columnCount.value - 1)) / columnCount.value
 }
 
@@ -493,9 +529,8 @@ function distributeAll() {
 function decideColumnCount(): number {
   if (isMobile.value) return 1
   const w = containerWidth()
-  if (w < 900) return 2
-  if (w < 1200) return 3
-  return 4
+  if (w < 1100) return 2
+  return 3
 }
 
 let resizeTimer: ReturnType<typeof setTimeout> | null = null
@@ -770,8 +805,8 @@ onUnmounted(() => {
               class="card-reveal"
               :style="{ '--enter-delay': `${ci * 80 + ri * 60}ms` }"
               draggable="true"
-              @click="onCardClick(item)"
               @dragstart="onCardDragStart($event, item)"
+              @dragend="onCardDragEnd($event)"
             >
               <!-- Hover actions -->
               <div class="card-actions">
@@ -787,6 +822,14 @@ onUnmounted(() => {
                 <button
                   type="button"
                   class="card-action-btn"
+                  title="展开"
+                  @click.stop="onCardExpand(item)"
+                >
+                  <Icon name="lucide:maximize-2" />
+                </button>
+                <button
+                  type="button"
+                  class="card-action-btn"
                   title="编辑"
                   @click.stop="onCardEdit({ id: item.id, type: item.type, title: item.title, description: item.description, image: item.image, images: item.images, tags: item.tags, aspectRatio: item.aspectRatio, categoryId: item.categoryId, createdAt: item.createdAt })"
                 >
@@ -895,7 +938,8 @@ onUnmounted(() => {
       :visible="showDetailModal"
       :card="detailCard"
       :categories="categories"
-      @update:visible="(v) => showDetailModal = v"
+      :size="detailSize"
+      @update:visible="(v) => { showDetailModal = v; if (!v) detailSize = 'default' }"
       @favorite-toggled="onDetailFavoriteToggled"
     />
 
@@ -939,7 +983,7 @@ onUnmounted(() => {
   flex: 1;
   min-height: 0;
   display: grid;
-  grid-template-columns: 280px 1fr;
+  grid-template-columns: 240px 1fr;
   align-items: start;
   gap: 0;
 }
@@ -953,7 +997,7 @@ onUnmounted(() => {
 
 .home-main {
   min-width: 0;
-  padding: 16px 24px 48px;
+  padding: 12px 16px 40px;
   display: flex;
   flex-direction: column;
 }
@@ -1090,7 +1134,7 @@ onUnmounted(() => {
 
 .masonry {
   display: flex;
-  gap: 12px;
+  gap: 8px;
   align-items: flex-start;
 }
 
@@ -1099,7 +1143,7 @@ onUnmounted(() => {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
 }
 
 .card-reveal {
@@ -1107,6 +1151,12 @@ onUnmounted(() => {
   animation-delay: var(--enter-delay, 0ms);
   cursor: pointer;
   position: relative;
+  transition: opacity 0.2s ease;
+}
+
+.card-reveal.dragging {
+  opacity: 0.3;
+  pointer-events: none;
 }
 
 .card-actions {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 1d8ce2c..bbf69fa 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -17,8 +17,9 @@ export default defineNuxtConfig({
         { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
         { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
         { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap' },
-      ],
+      ]
     },
+    
   },
 
   css: ['~/assets/css/main.css'],
diff --git a/packages/drizzle-pkg/db.sqlite b/packages/drizzle-pkg/db.sqlite
index 8c16e37..ebc9cb4 100644
Binary files a/packages/drizzle-pkg/db.sqlite and b/packages/drizzle-pkg/db.sqlite differ