diff --git a/frontend/cypress/e2e/price-display.cy.js b/frontend/cypress/e2e/price-display.cy.js
index 6c2a21a..f9e9d94 100644
--- a/frontend/cypress/e2e/price-display.cy.js
+++ b/frontend/cypress/e2e/price-display.cy.js
@@ -4,8 +4,8 @@ describe('Price Display Regression', () => {
     cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
     cy.wait(2000) // wait for oils store to load and re-render
 
-    // Check via .card-price elements which hold the formatted cost
-    cy.get('.card-price').first().invoke('text').then(text => {
+    // Check via .recipe-card-price elements which hold the formatted cost
+    cy.get('.recipe-card-price').first().invoke('text').then(text => {
       const match = text.match(/¥\s*(\d+\.?\d*)/)
       expect(match, 'Card price should contain ¥').to.not.be.null
       expect(parseFloat(match[1]), 'Price should be > 0').to.be.gt(0)
diff --git a/frontend/cypress/e2e/recipe-detail.cy.js b/frontend/cypress/e2e/recipe-detail.cy.js
index 1761508..bdda469 100644
--- a/frontend/cypress/e2e/recipe-detail.cy.js
+++ b/frontend/cypress/e2e/recipe-detail.cy.js
@@ -4,18 +4,16 @@ describe('Recipe Detail', () => {
     cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
   })
 
-  it('opens detail overlay when clicking a recipe card', () => {
+  it('opens detail panel when clicking a recipe card', () => {
     cy.get('.recipe-card').first().click()
-    cy.get('[class*="overlay"], [class*="detail"]').should('be.visible')
+    cy.get('[class*="detail"]').should('be.visible')
   })
 
   it('shows recipe name in detail view', () => {
-    // Get recipe name from card, however it's structured
     cy.get('.recipe-card').first().invoke('text').then(cardText => {
       cy.get('.recipe-card').first().click()
       cy.wait(500)
-      // The detail view should show some text from the card
-      cy.get('[class*="overlay"], [class*="detail"]').should('be.visible')
+      cy.get('[class*="detail"]').should('be.visible')
     })
   })
 
@@ -31,24 +29,21 @@ describe('Recipe Detail', () => {
     cy.contains('¥').should('exist')
   })
 
-  it('closes detail overlay when clicking close button', () => {
+  it('closes detail panel when clicking close button', () => {
     cy.get('.recipe-card').first().click()
-    cy.get('[class*="overlay"], [class*="detail"]').should('be.visible')
-    cy.get('button').contains(/✕|关闭|←/).first().click()
+    cy.get('[class*="detail"]').should('be.visible')
+    cy.get('button').contains(/✕|关闭/).first().click()
     cy.get('.recipe-card').should('be.visible')
   })
 
   it('shows action buttons in detail', () => {
     cy.get('.recipe-card').first().click()
     cy.wait(500)
-    // Should have at least one action button
-    cy.get('[class*="overlay"] button, [class*="detail"] button').should('have.length.gte', 1)
+    cy.get('[class*="detail"] button').should('have.length.gte', 1)
   })
 
-  it('shows favorite star', () => {
-    cy.get('.recipe-card').first().click()
-    cy.wait(500)
-    cy.contains(/★|☆|收藏/).should('exist')
+  it('shows favorite star on recipe cards', () => {
+    cy.get('.fav-btn').first().should('exist')
   })
 })
 
@@ -64,21 +59,21 @@ describe('Recipe Detail - Editor (Admin)', () => {
     cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
   })
 
-  it('shows edit button for admin', () => {
+  it('shows editable ingredients table directly', () => {
     cy.get('.recipe-card').first().click()
     cy.wait(500)
-    cy.contains(/编辑|✏/).should('exist')
+    cy.get('.oil-select, .drops-input').should('exist')
   })
 
-  it('can switch to editor view', () => {
+  it('shows add ingredient button', () => {
     cy.get('.recipe-card').first().click()
-    cy.contains(/编辑|✏/).first().click()
-    cy.get('select, input[type="number"], .oil-select, .drops-input').should('exist')
+    cy.wait(500)
+    cy.contains('加精油').should('exist')
   })
 
-  it('editor shows save button', () => {
+  it('shows export image button', () => {
     cy.get('.recipe-card').first().click()
-    cy.contains(/编辑|✏/).first().click()
-    cy.contains(/保存|💾/).should('exist')
+    cy.wait(500)
+    cy.contains('导出图片').should('exist')
   })
 })
diff --git a/frontend/src/components/RecipeCard.vue b/frontend/src/components/RecipeCard.vue
index 354a13b..c38e193 100644
--- a/frontend/src/components/RecipeCard.vue
+++ b/frontend/src/components/RecipeCard.vue
@@ -1,36 +1,19 @@
 <template>
   <div class="recipe-card" @click="$emit('click', index)">
-    <div class="card-name">{{ recipe.name }}</div>
-
-    <div v-if="recipe.tags && recipe.tags.length" class="card-tags">
-      <span v-for="tag in recipe.tags" :key="tag" class="card-tag">{{ tag }}</span>
+    <div class="recipe-card-name">{{ recipe.name }}</div>
+    <div v-if="recipe.tags && recipe.tags.length" class="recipe-card-tags">
+      <span v-for="tag in recipe.tags" :key="tag" class="tag">{{ tag }}</span>
     </div>
-
-    <div v-if="recipe.note" class="card-note">{{ recipe.note }}</div>
-
-    <div class="card-ingredients">
-      <div v-for="(ing, i) in recipe.ingredients" :key="i" class="card-ing-row">
-        <span class="card-oil-name">{{ ing.oil }}</span>
-        <span class="card-oil-drops">{{ ing.drops }}滴</span>
-      </div>
+    <div class="recipe-card-oils">{{ oilNames }}</div>
+    <div class="recipe-card-bottom">
+      <div class="recipe-card-price">💰 {{ priceInfo.cost }}</div>
+      <button
+        class="fav-btn"
+        :class="{ favorited: isFav }"
+        @click.stop="$emit('toggle-fav', recipe._id)"
+        :title="isFav ? '取消收藏' : '收藏'"
+      >{{ isFav ? '★' : '☆' }}</button>
     </div>
-
-    <div class="card-total">
-      <div class="card-total-inner">
-        <span class="card-total-label">成本</span>
-        <span class="card-total-price">{{ priceInfo.cost }}</span>
-      </div>
-      <span v-if="priceInfo.hasRetail" class="card-retail">零售 {{ priceInfo.retail }}</span>
-    </div>
-
-    <button
-      class="card-star"
-      :class="{ favorited: isFav }"
-      @click.stop="$emit('toggle-fav', recipe._id)"
-      :title="isFav ? '取消收藏' : '收藏'"
-    >
-      {{ isFav ? '★' : '☆' }}
-    </button>
   </div>
 </template>
 
@@ -49,165 +32,88 @@ defineEmits(['click', 'toggle-fav'])
 const oilsStore = useOilsStore()
 const recipesStore = useRecipesStore()
 
+const oilNames = computed(() =>
+  props.recipe.ingredients.map(i => i.oil).join('、')
+)
 const priceInfo = computed(() => oilsStore.fmtCostWithRetail(props.recipe.ingredients))
 const isFav = computed(() => recipesStore.isFavorite(props.recipe))
 </script>
 
 <style scoped>
 .recipe-card {
-  background: linear-gradient(145deg, #faf7f0 0%, #f5ede0 100%);
-  border-radius: 16px;
-  padding: 20px 18px 16px;
+  background: white;
+  border-radius: 14px;
+  padding: 18px;
   cursor: pointer;
+  box-shadow: 0 4px 20px rgba(90, 60, 30, 0.08);
   border: 2px solid transparent;
   transition: all 0.2s;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  position: relative;
-  overflow: hidden;
-}
-
-.recipe-card::before {
-  content: '';
-  position: absolute;
-  top: -30px;
-  right: -30px;
-  width: 120px;
-  height: 120px;
-  background: radial-gradient(circle, rgba(122, 158, 126, 0.12) 0%, transparent 70%);
-  border-radius: 50%;
-  pointer-events: none;
 }
 
 .recipe-card:hover {
   transform: translateY(-3px);
-  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
-  border-color: #b8d4c0;
+  box-shadow: 0 8px 32px rgba(90, 60, 30, 0.15);
+  border-color: #c8ddc9;
 }
 
-.card-name {
+.recipe-card-name {
   font-family: 'Noto Serif SC', serif;
-  font-size: 17px;
-  font-weight: 700;
-  color: #3e3a44;
-  line-height: 1.3;
-  padding-right: 28px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #2c2416;
+  margin-bottom: 8px;
 }
 
-.card-tags {
+.recipe-card-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
-  margin-bottom: 2px;
+  margin-bottom: 6px;
 }
 
-.card-tag {
+.tag {
   font-size: 11px;
-  padding: 2px 9px;
+  padding: 2px 8px;
   border-radius: 8px;
-  background: rgba(122, 158, 126, 0.15);
+  background: #eef4ee;
   color: #5a7d5e;
-  font-weight: 500;
 }
 
-.card-note {
+.recipe-card-oils {
   font-size: 12px;
-  color: #8a7e6b;
-  background: rgba(201, 168, 76, 0.1);
-  border-radius: 6px;
-  padding: 4px 8px;
-  line-height: 1.4;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  color: #9a8570;
+  line-height: 1.7;
 }
 
-.card-ingredients {
+.recipe-card-bottom {
   display: flex;
-  flex-direction: column;
-  gap: 0;
-  margin: 4px 0;
-}
-
-.card-ing-row {
-  display: flex;
-  align-items: center;
-  padding: 6px 0;
-  border-bottom: 1px solid rgba(180, 150, 100, 0.15);
-  font-size: 13px;
-}
-
-.card-ing-row:last-child {
-  border-bottom: none;
-}
-
-.card-oil-name {
-  flex: 1;
-  color: #3e3a44;
-  font-weight: 500;
-}
-
-.card-oil-drops {
-  color: #5a7d5e;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.card-total {
-  background: linear-gradient(135deg, #7ec6a4, #4a9d7e);
-  border-radius: 10px;
-  padding: 10px 14px;
-  display: flex;
-  align-items: center;
   justify-content: space-between;
-  margin-top: 4px;
-}
-
-.card-total-inner {
-  display: flex;
   align-items: center;
-  gap: 8px;
+  margin-top: 8px;
 }
 
-.card-total-label {
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 12px;
-  letter-spacing: 0.5px;
+.recipe-card-price {
+  font-size: 13px;
+  color: #5a7d5e;
+  font-weight: 600;
 }
 
-.card-total-price {
-  color: #fff;
-  font-size: 17px;
-  font-weight: 700;
-}
-
-.card-retail {
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.75);
-}
-
-.card-star {
-  position: absolute;
-  top: 14px;
-  right: 12px;
+.fav-btn {
   background: none;
   border: none;
-  font-size: 22px;
+  font-size: 20px;
   cursor: pointer;
   color: #d4cfc7;
-  padding: 2px;
+  padding: 2px 4px;
   line-height: 1;
-  transition: color 0.2s, transform 0.15s;
-  z-index: 1;
+  transition: color 0.2s;
 }
 
-.card-star.favorited {
+.fav-btn.favorited {
   color: #f5a623;
 }
 
-.card-star:hover {
+.fav-btn:hover {
   color: #f5a623;
-  transform: scale(1.15);
 }
 </style>
diff --git a/frontend/src/components/RecipeDetailOverlay.vue b/frontend/src/components/RecipeDetailOverlay.vue
index 20a4d26..9437b7c 100644
--- a/frontend/src/components/RecipeDetailOverlay.vue
+++ b/frontend/src/components/RecipeDetailOverlay.vue
@@ -1,155 +1,94 @@
 <template>
-  <div class="detail-overlay" @click.self="$emit('close')">
+  <div class="detail-wrapper">
+    <!-- Detail Panel -->
     <div class="detail-panel">
-      <!-- Mode toggle -->
-      <div class="detail-mode-tabs">
-        <button
-          class="mode-tab"
-          :class="{ active: viewMode === 'card' }"
-          @click="viewMode = 'card'"
-        >卡片预览</button>
-        <button
-          class="mode-tab"
-          :class="{ active: viewMode === 'editor' }"
-          @click="viewMode = 'editor'"
-        >编辑</button>
-        <button class="detail-close-btn" @click="$emit('close')">✕</button>
-      </div>
-
-      <!-- Card View -->
-      <div v-if="viewMode === 'card'" class="detail-card-view">
-        <div ref="cardRef" class="export-card">
-          <div class="export-card-name">{{ recipe.name }}</div>
-          <div v-if="recipe.tags && recipe.tags.length" class="export-card-tags">
-            <span v-for="tag in recipe.tags" :key="tag" class="export-card-tag">{{ tag }}</span>
-          </div>
-          <table class="export-card-table">
-            <thead>
-              <tr>
-                <th>精油</th>
-                <th>滴数</th>
-                <th>成本</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(ing, i) in recipe.ingredients" :key="i">
-                <td>{{ ing.oil }}</td>
-                <td>{{ ing.drops }}</td>
-                <td>{{ oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * ing.drops) }}</td>
-              </tr>
-            </tbody>
-            <tfoot>
-              <tr>
-                <td colspan="2" style="text-align:right;font-weight:600">总计</td>
-                <td style="font-weight:600">{{ priceInfo.cost }}</td>
-              </tr>
-              <tr v-if="priceInfo.hasRetail">
-                <td colspan="2" style="text-align:right;color:#999">零售价</td>
-                <td style="color:#999">{{ priceInfo.retail }}</td>
-              </tr>
-            </tfoot>
-          </table>
-          <div v-if="recipe.note" class="export-card-note">{{ recipe.note }}</div>
+      <div class="detail-header">
+        <div>
+          <div class="detail-title">{{ recipe.name }}</div>
+          <div v-if="recipe.note" class="detail-note">📝 {{ recipe.note }}</div>
         </div>
-
-        <div class="detail-card-actions">
-          <button class="action-btn" @click="exportImage">📤 导出图片</button>
-          <button class="action-btn" @click="$emit('close')">关闭</button>
+        <div class="detail-actions">
+          <button class="btn btn-primary btn-sm" @click="showAddRow = true">＋ 加精油</button>
+          <button class="btn btn-gold btn-sm" @click="exportCard">📷 导出图片</button>
+          <button class="btn btn-outline btn-sm" @click="$emit('close')">✕ 关闭</button>
         </div>
       </div>
 
-      <!-- Editor View -->
-      <div v-if="viewMode === 'editor'" class="detail-editor-view">
-        <div class="editor-section">
-          <label class="editor-label">配方名称</label>
-          <input v-model="editName" type="text" class="editor-input" />
-        </div>
+      <!-- Ingredients Table -->
+      <table class="ingredients-table">
+        <thead>
+          <tr>
+            <th>精油</th>
+            <th>滴数</th>
+            <th>单价/滴</th>
+            <th>小计</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(ing, i) in editIngredients" :key="i">
+            <td>
+              <select class="oil-select" :value="ing.oil" @change="changeOil(i, $event.target.value)">
+                <option value="">选择精油</option>
+                <option v-for="name in oilsStore.oilNames" :key="name" :value="name">{{ name }}</option>
+              </select>
+            </td>
+            <td>
+              <input
+                type="number"
+                class="drops-input"
+                :value="ing.drops"
+                min="0.5"
+                step="0.5"
+                @change="changeDrops(i, $event.target.value)"
+              />
+            </td>
+            <td class="price-cell">{{ ing.oil ? '¥' + oilsStore.pricePerDrop(ing.oil).toFixed(2) : '—' }}</td>
+            <td class="subtotal-cell">{{ ing.oil ? oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * (ing.drops || 0)) : '—' }}</td>
+            <td><button class="remove-btn" @click="removeIng(i)">×</button></td>
+          </tr>
+        </tbody>
+      </table>
 
-        <div class="editor-section">
-          <label class="editor-label">备注</label>
-          <textarea v-model="editNote" class="editor-textarea" rows="2"></textarea>
-        </div>
-
-        <div class="editor-section">
-          <label class="editor-label">标签</label>
-          <div class="editor-tags">
-            <span v-for="tag in editTags" :key="tag" class="editor-tag">
-              {{ tag }}
-              <span class="tag-remove" @click="removeTag(tag)">×</span>
-            </span>
-            <button class="tag-add-btn" @click="showTagPicker = true">+ 标签</button>
-          </div>
-        </div>
-
-        <div class="editor-section">
-          <label class="editor-label">成分</label>
-          <table class="editor-table">
-            <thead>
-              <tr>
-                <th>精油</th>
-                <th>滴数</th>
-                <th>成本</th>
-                <th></th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(ing, i) in editIngredients" :key="i">
-                <td>
-                  <select v-model="ing.oil" class="editor-select">
-                    <option value="">选择精油</option>
-                    <option v-for="name in oilsStore.oilNames" :key="name" :value="name">{{ name }}</option>
-                  </select>
-                </td>
-                <td>
-                  <input v-model.number="ing.drops" type="number" min="1" class="editor-drops" />
-                </td>
-                <td class="ing-cost">
-                  {{ ing.oil ? oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * (ing.drops || 0)) : '-' }}
-                </td>
-                <td>
-                  <button class="remove-row-btn" @click="removeIngredient(i)">✕</button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <button class="add-row-btn" @click="addIngredient">+ 添加精油</button>
-        </div>
-
-        <div class="editor-section">
-          <label class="editor-label">容量</label>
-          <div class="volume-controls">
-            <button
-              v-for="(drops, ml) in volumeOptions"
-              :key="ml"
-              class="volume-btn"
-              :class="{ active: selectedVolume === ml }"
-              @click="selectedVolume = ml"
-            >{{ ml }}ml</button>
-          </div>
-        </div>
-
-        <div class="editor-total">
-          总计: {{ editPriceInfo.cost }}
-          <span v-if="editPriceInfo.hasRetail" style="color:#999;font-size:13px;margin-left:8px">
-            零售 {{ editPriceInfo.retail }}
-          </span>
-        </div>
-
-        <div class="editor-actions">
-          <button class="action-btn" @click="$emit('close')">取消</button>
-          <button class="action-btn action-btn-primary" @click="saveRecipe">保存</button>
-        </div>
+      <!-- Add Ingredient Row -->
+      <div v-if="showAddRow" class="add-ingredient-row">
+        <select v-model="newOil" class="form-control" style="max-width:180px">
+          <option value="">— 选择精油 —</option>
+          <option v-for="name in oilsStore.oilNames" :key="name" :value="name">{{ name }}</option>
+        </select>
+        <input v-model.number="newDrops" type="number" placeholder="滴数" style="width:90px" class="form-control" min="0.5" step="0.5" />
+        <button class="btn btn-primary btn-sm" @click="confirmAdd">确认添加</button>
+        <button class="btn btn-outline btn-sm" @click="showAddRow = false">取消</button>
       </div>
 
-      <!-- Tag Picker -->
-      <TagPicker
-        v-if="showTagPicker"
-        :name="editName"
-        :current-tags="editTags"
-        :all-tags="recipesStore.allTags"
-        @save="onTagsSaved"
-        @close="showTagPicker = false"
-      />
+      <!-- Total Row -->
+      <div class="total-row">
+        <div class="total-label">配方总成本</div>
+        <div class="total-price">{{ totalCost }}</div>
+      </div>
+    </div>
+
+    <!-- Card Preview -->
+    <div class="card-preview-wrapper">
+      <div class="preview-title">📋 配方卡片预览</div>
+      <div ref="cardRef" class="card-export">
+        <div class="card-brand">DOTERRA · 精油配方</div>
+        <div class="card-title">{{ recipe.name }}</div>
+        <div class="card-divider"></div>
+        <div v-if="recipe.note" class="card-note">{{ recipe.note }}</div>
+        <ul class="card-ingredients">
+          <li v-for="(ing, i) in editIngredients" :key="i">
+            <span class="card-oil-name">{{ ing.oil }}</span>
+            <span class="card-oil-drops">{{ ing.drops }} 滴</span>
+            <span class="card-oil-cost">{{ ing.oil ? oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * (ing.drops || 0)) : '' }}</span>
+          </li>
+        </ul>
+        <div class="card-total">
+          <div class="card-total-label">配方总成本</div>
+          <div class="card-total-price">{{ totalCost }}</div>
+        </div>
+        <div class="card-footer">制作日期：{{ todayStr }}</div>
+      </div>
     </div>
   </div>
 </template>
@@ -157,10 +96,9 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import html2canvas from 'html2canvas'
-import { useOilsStore, VOLUME_DROPS } from '../stores/oils'
+import { useOilsStore } from '../stores/oils'
 import { useRecipesStore } from '../stores/recipes'
 import { useUiStore } from '../stores/ui'
-import TagPicker from './TagPicker.vue'
 
 const props = defineProps({
   recipeIndex: { type: Number, required: true },
@@ -172,465 +110,450 @@ const oilsStore = useOilsStore()
 const recipesStore = useRecipesStore()
 const ui = useUiStore()
 
-const viewMode = ref('card')
 const cardRef = ref(null)
-const showTagPicker = ref(false)
-const selectedVolume = ref('5')
+const showAddRow = ref(false)
+const newOil = ref('')
+const newDrops = ref(null)
 
-const volumeOptions = VOLUME_DROPS
-
-// Source recipe
 const recipe = computed(() => recipesStore.recipes[props.recipeIndex] || { name: '', ingredients: [], tags: [], note: '' })
-const priceInfo = computed(() => oilsStore.fmtCostWithRetail(recipe.value.ingredients))
 
-// Editable copies
-const editName = ref('')
-const editNote = ref('')
-const editTags = ref([])
 const editIngredients = ref([])
 
-const editPriceInfo = computed(() => oilsStore.fmtCostWithRetail(editIngredients.value.filter(i => i.oil)))
-
 onMounted(() => {
-  const r = recipe.value
-  editName.value = r.name
-  editNote.value = r.note || ''
-  editTags.value = [...(r.tags || [])]
-  editIngredients.value = (r.ingredients || []).map(i => ({ oil: i.oil, drops: i.drops }))
+  editIngredients.value = (recipe.value.ingredients || []).map(i => ({ oil: i.oil, drops: i.drops }))
 })
 
-function addIngredient() {
-  editIngredients.value.push({ oil: '', drops: 1 })
+const totalCost = computed(() => oilsStore.fmtPrice(oilsStore.calcCost(editIngredients.value.filter(i => i.oil))))
+
+const todayStr = new Date().toLocaleDateString('zh-CN')
+
+function changeOil(i, val) {
+  editIngredients.value[i].oil = val
 }
 
-function removeIngredient(index) {
-  editIngredients.value.splice(index, 1)
+function changeDrops(i, val) {
+  editIngredients.value[i].drops = parseFloat(val) || 0
 }
 
-function removeTag(tag) {
-  editTags.value = editTags.value.filter(t => t !== tag)
+function removeIng(i) {
+  editIngredients.value.splice(i, 1)
 }
 
-function onTagsSaved(tags) {
-  editTags.value = tags
-  showTagPicker.value = false
-}
-
-async function saveRecipe() {
-  const ingredients = editIngredients.value.filter(i => i.oil && i.drops > 0)
-  if (!editName.value.trim()) {
-    ui.showToast('请输入配方名称')
+function confirmAdd() {
+  if (!newOil.value || !newDrops.value || newDrops.value <= 0) {
+    ui.showToast('请选择精油并输入滴数')
     return
   }
-  if (ingredients.length === 0) {
-    ui.showToast('请至少添加一种精油')
-    return
-  }
-
-  try {
-    const payload = {
-      ...recipe.value,
-      name: editName.value.trim(),
-      note: editNote.value.trim(),
-      tags: editTags.value,
-      ingredients,
-    }
-    await recipesStore.saveRecipe(payload)
-    ui.showToast('保存成功')
-    emit('close')
-  } catch (e) {
-    ui.showToast('保存失败: ' + (e?.message || '未知错误'))
-  }
+  editIngredients.value.push({ oil: newOil.value, drops: newDrops.value })
+  newOil.value = ''
+  newDrops.value = null
+  showAddRow.value = false
 }
 
-async function exportImage() {
+async function exportCard() {
   if (!cardRef.value) return
   try {
-    const canvas = await html2canvas(cardRef.value, {
-      backgroundColor: '#fff',
-      scale: 2,
-    })
+    const canvas = await html2canvas(cardRef.value, { scale: 3, backgroundColor: null, useCORS: true })
     const link = document.createElement('a')
-    link.download = `${recipe.value.name || '配方'}.png`
+    link.download = `${recipe.value.name || '配方'}_配方卡.png`
     link.href = canvas.toDataURL('image/png')
     link.click()
     ui.showToast('已导出图片')
-  } catch (e) {
+  } catch {
     ui.showToast('导出失败')
   }
 }
 </script>
 
 <style scoped>
-.detail-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: 5500;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
+.detail-wrapper {
+  margin-top: 20px;
 }
 
 .detail-panel {
-  background: #fff;
-  border-radius: 18px;
-  width: 520px;
-  max-width: 100%;
-  max-height: 85vh;
-  overflow-y: auto;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
-  position: relative;
+  background: white;
+  border-radius: 16px;
+  padding: 28px;
+  box-shadow: 0 4px 20px rgba(90, 60, 30, 0.08);
+  margin-bottom: 24px;
 }
 
-.detail-mode-tabs {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #eee;
-  padding: 0 16px;
-  gap: 4px;
-}
-
-.mode-tab {
-  padding: 14px 16px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #999;
-  cursor: pointer;
-  border: none;
-  background: none;
-  border-bottom: 2px solid transparent;
-  font-family: inherit;
-  transition: color 0.2s;
-}
-
-.mode-tab.active {
-  color: #4a9d7e;
-  border-bottom-color: #4a9d7e;
-}
-
-.detail-close-btn {
-  margin-left: auto;
-  background: none;
-  border: none;
-  font-size: 18px;
-  color: #999;
-  cursor: pointer;
-  padding: 8px;
-}
-
-.detail-close-btn:hover {
-  color: #333;
-}
-
-/* Card View */
-.detail-card-view {
-  padding: 20px;
-}
-
-.export-card {
-  background: #fefdfb;
-  border: 1px solid #eee;
-  border-radius: 12px;
-  padding: 24px 20px;
-}
-
-.export-card-name {
-  font-family: 'Noto Serif SC', serif;
-  font-size: 20px;
-  font-weight: 700;
-  color: #3e3a44;
-  margin-bottom: 10px;
-}
-
-.export-card-tags {
+.detail-header {
   display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 24px;
   flex-wrap: wrap;
-  gap: 6px;
-  margin-bottom: 14px;
+  gap: 12px;
 }
 
-.export-card-tag {
-  font-size: 11px;
-  padding: 2px 10px;
-  border-radius: 8px;
-  background: #f0ece4;
-  color: #8a7e6b;
+.detail-title {
+  font-family: 'Noto Serif SC', serif;
+  font-size: 22px;
+  font-weight: 700;
+  color: #2c2416;
 }
 
-.export-card-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
-  margin-bottom: 12px;
-}
-
-.export-card-table th {
-  text-align: left;
-  font-weight: 500;
-  color: #999;
-  border-bottom: 1px solid #eee;
-  padding: 8px 6px;
-  font-size: 12px;
-}
-
-.export-card-table td {
-  padding: 7px 6px;
-  color: #3e3a44;
-  border-bottom: 1px solid #f5f5f3;
-}
-
-.export-card-table tfoot td {
-  border-bottom: none;
-  padding-top: 10px;
-}
-
-.export-card-note {
+.detail-note {
   font-size: 13px;
-  color: #999;
-  margin-top: 8px;
-  line-height: 1.5;
-  white-space: pre-wrap;
+  color: #9a8570;
+  background: #f0e4c0;
+  border-radius: 8px;
+  padding: 6px 12px;
+  margin-top: 6px;
+  display: inline-block;
 }
 
-.detail-card-actions {
+.detail-actions {
   display: flex;
   gap: 10px;
-  justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+/* Ingredients Table */
+.ingredients-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 20px;
+}
+
+.ingredients-table th {
+  text-align: left;
+  padding: 10px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #9a8570;
+  letter-spacing: 0.5px;
+  border-bottom: 2px solid #e0d4c0;
+}
+
+.ingredients-table td {
+  padding: 12px 14px;
+  border-bottom: 1px solid #e0d4c0;
+  font-size: 14px;
+  vertical-align: middle;
+}
+
+.ingredients-table tr:last-child td {
+  border-bottom: none;
+}
+
+.ingredients-table tr:hover td {
+  background: #eef4ee;
+}
+
+.oil-select {
+  padding: 6px 10px;
+  border: 1.5px solid #e0d4c0;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  background: white;
+  outline: none;
+  max-width: 160px;
+}
+
+.oil-select:focus {
+  border-color: #7a9e7e;
+}
+
+.drops-input {
+  width: 70px;
+  padding: 6px 10px;
+  border: 1.5px solid #e0d4c0;
+  border-radius: 8px;
+  font-size: 14px;
+  font-family: inherit;
+  text-align: center;
+  outline: none;
+}
+
+.drops-input:focus {
+  border-color: #7a9e7e;
+}
+
+.price-cell {
+  color: #9a8570;
+  font-size: 13px;
+}
+
+.subtotal-cell {
+  font-weight: 600;
+  color: #5a7d5e;
+}
+
+.remove-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #c0392b;
+  font-size: 18px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: background 0.2s;
+}
+
+.remove-btn:hover {
+  background: #fdf0ee;
+}
+
+/* Add Ingredient Row */
+.add-ingredient-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-top: 12px;
+  flex-wrap: wrap;
+}
+
+.form-control {
+  padding: 8px 12px;
+  border: 1.5px solid #e0d4c0;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+}
+
+.form-control:focus {
+  border-color: #7a9e7e;
+}
+
+/* Total Row */
+.total-row {
+  background: #eef4ee;
+  border-radius: 12px;
+  padding: 16px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-top: 16px;
 }
 
-/* Editor View */
-.detail-editor-view {
-  padding: 20px;
-}
-
-.editor-section {
-  margin-bottom: 18px;
-}
-
-.editor-label {
-  display: block;
-  font-size: 13px;
+.total-label {
+  font-size: 14px;
+  color: #5a4a35;
   font-weight: 500;
-  color: #999;
-  margin-bottom: 6px;
 }
 
-.editor-input {
-  width: 100%;
-  padding: 10px 14px;
-  border: 1.5px solid #d4cfc7;
-  border-radius: 10px;
-  font-size: 14px;
-  outline: none;
-  font-family: inherit;
-  box-sizing: border-box;
+.total-price {
+  font-size: 22px;
+  font-weight: 700;
+  color: #5a7d5e;
 }
 
-.editor-input:focus {
-  border-color: #4a9d7e;
+/* Card Preview */
+.card-preview-wrapper {
+  margin-top: 20px;
 }
 
-.editor-textarea {
-  width: 100%;
-  padding: 10px 14px;
-  border: 1.5px solid #d4cfc7;
-  border-radius: 10px;
-  font-size: 14px;
-  outline: none;
-  font-family: inherit;
-  box-sizing: border-box;
-  resize: vertical;
-}
-
-.editor-textarea:focus {
-  border-color: #4a9d7e;
-}
-
-.editor-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  align-items: center;
-}
-
-.editor-tag {
-  font-size: 12px;
-  padding: 4px 10px;
-  border-radius: 10px;
-  background: #4a9d7e;
-  color: #fff;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.tag-remove {
-  cursor: pointer;
-  font-size: 14px;
-  opacity: 0.7;
-}
-
-.tag-remove:hover {
-  opacity: 1;
-}
-
-.tag-add-btn {
-  font-size: 12px;
-  padding: 4px 12px;
-  border-radius: 10px;
-  border: 1.5px dashed #ccc;
-  background: none;
-  color: #999;
-  cursor: pointer;
-  font-family: inherit;
-}
-
-.tag-add-btn:hover {
-  border-color: #4a9d7e;
-  color: #4a9d7e;
-}
-
-.editor-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-
-.editor-table th {
-  text-align: left;
-  font-weight: 500;
-  color: #999;
-  padding: 6px 4px;
-  font-size: 12px;
-  border-bottom: 1px solid #eee;
-}
-
-.editor-table td {
-  padding: 5px 4px;
-}
-
-.editor-select {
-  width: 100%;
-  padding: 7px 8px;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  font-size: 13px;
-  font-family: inherit;
-  background: #fff;
-}
-
-.editor-drops {
-  width: 60px;
-  padding: 7px 8px;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  font-size: 13px;
-  text-align: center;
-  font-family: inherit;
-}
-
-.ing-cost {
-  font-size: 12px;
-  color: #4a9d7e;
-  white-space: nowrap;
-}
-
-.remove-row-btn {
-  background: none;
-  border: none;
-  color: #ccc;
-  font-size: 14px;
-  cursor: pointer;
-  padding: 4px;
-}
-
-.remove-row-btn:hover {
-  color: #d9534f;
-}
-
-.add-row-btn {
-  margin-top: 8px;
-  background: none;
-  border: 1.5px dashed #ccc;
-  border-radius: 8px;
-  padding: 8px 16px;
-  font-size: 13px;
-  color: #999;
-  cursor: pointer;
-  font-family: inherit;
-  width: 100%;
-}
-
-.add-row-btn:hover {
-  border-color: #4a9d7e;
-  color: #4a9d7e;
-}
-
-.volume-controls {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.volume-btn {
-  padding: 6px 16px;
-  border: 1.5px solid #d4cfc7;
-  border-radius: 10px;
-  background: #fff;
-  font-size: 13px;
-  cursor: pointer;
-  font-family: inherit;
-  transition: all 0.15s;
-}
-
-.volume-btn.active {
-  background: #4a9d7e;
-  color: #fff;
-  border-color: #4a9d7e;
-}
-
-.editor-total {
-  font-size: 16px;
+.preview-title {
+  font-size: 15px;
   font-weight: 600;
-  color: #4a9d7e;
-  padding: 12px 0;
-  border-top: 1px solid #eee;
-  margin-bottom: 4px;
+  color: #2c2416;
+  margin-bottom: 12px;
 }
 
-.editor-actions {
+.card-export {
+  background: linear-gradient(145deg, #faf7f0 0%, #f5ede0 100%);
+  border-radius: 20px;
+  padding: 36px;
+  font-family: 'Noto Serif SC', serif;
+  max-width: 480px;
+  border: 1px solid #e0ccaa;
+  position: relative;
+  overflow: hidden;
+}
+
+.card-export::before {
+  content: '';
+  position: absolute;
+  top: -40px;
+  right: -40px;
+  width: 180px;
+  height: 180px;
+  background: radial-gradient(circle, rgba(122, 158, 126, 0.15) 0%, transparent 70%);
+  border-radius: 50%;
+}
+
+.card-export::after {
+  content: '';
+  position: absolute;
+  bottom: -30px;
+  left: -30px;
+  width: 140px;
+  height: 140px;
+  background: radial-gradient(circle, rgba(201, 168, 76, 0.12) 0%, transparent 70%);
+  border-radius: 50%;
+}
+
+.card-brand {
+  font-size: 11px;
+  letter-spacing: 3px;
+  color: #7a9e7e;
+  text-transform: uppercase;
+  margin-bottom: 8px;
+  position: relative;
+}
+
+.card-title {
+  font-size: 26px;
+  font-weight: 700;
+  color: #2c2416;
+  margin-bottom: 6px;
+  line-height: 1.3;
+  position: relative;
+}
+
+.card-divider {
+  width: 48px;
+  height: 2px;
+  background: linear-gradient(90deg, #7a9e7e, #c9a84c);
+  border-radius: 2px;
+  margin: 14px 0;
+}
+
+.card-note {
+  font-size: 12px;
+  color: #c4a882;
+  margin-bottom: 18px;
+  position: relative;
+}
+
+.card-ingredients {
+  list-style: none;
+  margin-bottom: 20px;
+  padding: 0;
+  position: relative;
+}
+
+.card-ingredients li {
   display: flex;
-  gap: 10px;
-  justify-content: flex-end;
-}
-
-/* Shared action buttons */
-.action-btn {
-  padding: 9px 22px;
-  border: 1.5px solid #d4cfc7;
-  border-radius: 10px;
-  background: #fff;
+  align-items: center;
+  padding: 9px 0;
+  border-bottom: 1px solid rgba(180, 150, 100, 0.15);
+  font-size: 14px;
+}
+
+.card-ingredients li:last-child {
+  border-bottom: none;
+}
+
+.card-oil-name {
+  flex: 1;
+  color: #2c2416;
+  font-weight: 500;
+}
+
+.card-oil-drops {
+  width: 60px;
+  text-align: right;
+  color: #5a7d5e;
+  font-size: 13px;
+}
+
+.card-oil-cost {
+  width: 70px;
+  text-align: right;
+  color: #9a8570;
+  font-size: 12px;
+}
+
+.card-total {
+  background: linear-gradient(135deg, #7a9e7e, #5a7d5e);
+  border-radius: 12px;
+  padding: 14px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+  position: relative;
+}
+
+.card-total-label {
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 13px;
+  letter-spacing: 1px;
+}
+
+.card-total-price {
+  color: white;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.card-footer {
+  margin-top: 16px;
+  text-align: center;
+  font-size: 11px;
+  color: #9a8570;
+  letter-spacing: 1px;
+  position: relative;
+}
+
+/* Buttons */
+.btn {
+  padding: 11px 22px;
+  border-radius: 10px;
   font-size: 14px;
-  cursor: pointer;
   font-family: inherit;
-  color: #6b6375;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s;
+  font-weight: 500;
 }
 
-.action-btn:hover {
-  background: #f8f7f5;
+.btn-sm {
+  padding: 7px 14px;
+  font-size: 13px;
 }
 
-.action-btn-primary {
-  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
-  color: #fff;
-  border-color: transparent;
+.btn-primary {
+  background: #7a9e7e;
+  color: white;
 }
 
-.action-btn-primary:hover {
-  opacity: 0.9;
-  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
+.btn-primary:hover {
+  background: #5a7d5e;
+  transform: translateY(-1px);
+}
+
+.btn-gold {
+  background: #c9a84c;
+  color: white;
+}
+
+.btn-gold:hover {
+  background: #b8973e;
+}
+
+.btn-outline {
+  background: transparent;
+  border: 1.5px solid #7a9e7e;
+  color: #5a7d5e;
+}
+
+.btn-outline:hover {
+  background: #eef4ee;
+}
+
+@media (max-width: 600px) {
+  .detail-panel {
+    padding: 16px;
+  }
+
+  .detail-header {
+    flex-direction: column;
+  }
+
+  .ingredients-table th,
+  .ingredients-table td {
+    padding: 8px 6px;
+    font-size: 12px;
+  }
+
+  .card-export {
+    padding: 24px;
+  }
 }
 </style>
diff --git a/frontend/src/views/RecipeSearch.vue b/frontend/src/views/RecipeSearch.vue
index 8156170..d4ede12 100644
--- a/frontend/src/views/RecipeSearch.vue
+++ b/frontend/src/views/RecipeSearch.vue
@@ -1,121 +1,43 @@
 <template>
   <div class="recipe-search">
-    <!-- Category Carousel (full-width image slides) -->
-    <div class="cat-wrap" v-if="categories.length && !selectedCategory">
-      <div class="cat-track" :style="{ transform: `translateX(-${catIdx * 100}%)` }">
-        <div
-          v-for="cat in categories"
-          :key="cat.name"
-          class="cat-card"
-          :style="{ backgroundImage: cat.bg_image ? `url(${cat.bg_image})` : `linear-gradient(135deg, ${cat.color_from || '#7a9e7e'}, ${cat.color_to || '#5a7d5e'})` }"
-          @click="selectCategory(cat)"
-        >
-          <div class="cat-inner">
-            <div class="cat-icon">{{ cat.icon || '🌿' }}</div>
-            <div class="cat-name">{{ cat.name }}</div>
-            <div v-if="cat.subtitle" class="cat-sub">{{ cat.subtitle }}</div>
-          </div>
-        </div>
-      </div>
-      <button class="cat-arrow left" @click="slideCat(-1)">‹</button>
-      <button class="cat-arrow right" @click="slideCat(1)">›</button>
-    </div>
-    <div class="cat-dots" v-if="categories.length > 1 && !selectedCategory">
-      <span
-        v-for="(cat, i) in categories"
-        :key="i"
-        class="cat-dot"
-        :class="{ active: catIdx === i }"
-        @click="catIdx = i"
-      ></span>
-    </div>
-    <!-- Category filter active banner -->
-    <div v-if="selectedCategory" class="cat-filter-bar">
-      <span>📂 {{ selectedCategory }}</span>
-      <button @click="selectedCategory = null; catIdx = 0" class="btn-sm btn-outline">✕ 返回全部</button>
-    </div>
-
     <!-- Search Box -->
     <div class="search-box">
-      <input
-        class="search-input"
-        v-model="searchQuery"
-        placeholder="搜索配方名、精油、标签..."
-        @input="onSearch"
+      <div class="search-label">搜索配方名称或关键词</div>
+      <div class="search-row">
+        <input
+          class="search-input"
+          v-model="searchQuery"
+          placeholder="输入配方名称，如：白发转黑、痘痘、一夜好眠…"
+          @input="onSearch"
+        />
+        <button v-if="searchQuery" class="btn btn-outline" @click="clearSearch">清除</button>
+        <button
+          v-if="auth.isLoggedIn"
+          class="btn btn-outline"
+          :class="{ active: favFilter }"
+          @click="favFilter = !favFilter"
+        >{{ favFilter ? '★ 收藏中' : '☆ 收藏' }}</button>
+      </div>
+    </div>
+
+    <!-- Recipe Grid -->
+    <div class="recipe-grid">
+      <RecipeCard
+        v-for="r in displayedRecipes"
+        :key="r._id"
+        :recipe="r"
+        :index="findGlobalIndex(r)"
+        :class="{ selected: selectedRecipeIndex === findGlobalIndex(r) }"
+        @click="selectRecipe(findGlobalIndex(r))"
+        @toggle-fav="handleToggleFav(r)"
       />
-      <button v-if="searchQuery" class="search-clear-btn" @click="clearSearch">✕</button>
-      <button class="search-btn" @click="onSearch">🔍</button>
+      <div v-if="displayedRecipes.length === 0" class="empty-hint">暂无配方</div>
     </div>
 
-    <!-- Personal Section (logged in) -->
-    <div v-if="auth.isLoggedIn" class="personal-section">
-      <div class="section-header" @click="showMyRecipes = !showMyRecipes">
-        <span>📖 我的配方</span>
-        <span class="toggle-icon">{{ showMyRecipes ? '▾' : '▸' }}</span>
-      </div>
-      <div v-if="showMyRecipes" class="recipe-grid">
-        <RecipeCard
-          v-for="(r, i) in myRecipesPreview"
-          :key="r._id"
-          :recipe="r"
-          :index="findGlobalIndex(r)"
-          @click="openDetail(findGlobalIndex(r))"
-          @toggle-fav="handleToggleFav(r)"
-        />
-        <div v-if="myRecipesPreview.length === 0" class="empty-hint">暂无个人配方</div>
-      </div>
-
-      <div class="section-header" @click="showFavorites = !showFavorites">
-        <span>⭐ 收藏配方</span>
-        <span class="toggle-icon">{{ showFavorites ? '▾' : '▸' }}</span>
-      </div>
-      <div v-if="showFavorites" class="recipe-grid">
-        <RecipeCard
-          v-for="(r, i) in favoritesPreview"
-          :key="r._id"
-          :recipe="r"
-          :index="findGlobalIndex(r)"
-          @click="openDetail(findGlobalIndex(r))"
-          @toggle-fav="handleToggleFav(r)"
-        />
-        <div v-if="favoritesPreview.length === 0" class="empty-hint">暂无收藏配方</div>
-      </div>
-    </div>
-
-    <!-- Fuzzy Search Results -->
-    <div v-if="searchQuery && fuzzyResults.length" class="search-results-section">
-      <div class="section-label">🔍 搜索结果 ({{ fuzzyResults.length }})</div>
-      <div class="recipe-grid">
-        <RecipeCard
-          v-for="(r, i) in fuzzyResults"
-          :key="r._id"
-          :recipe="r"
-          :index="findGlobalIndex(r)"
-          @click="openDetail(findGlobalIndex(r))"
-          @toggle-fav="handleToggleFav(r)"
-        />
-      </div>
-    </div>
-
-    <!-- Public Recipe Grid -->
-    <div v-if="!searchQuery || fuzzyResults.length === 0">
-      <div class="section-label">🌿 公共配方库 ({{ filteredRecipes.length }})</div>
-      <div class="recipe-grid">
-        <RecipeCard
-          v-for="(r, i) in filteredRecipes"
-          :key="r._id"
-          :recipe="r"
-          :index="findGlobalIndex(r)"
-          @click="openDetail(findGlobalIndex(r))"
-          @toggle-fav="handleToggleFav(r)"
-        />
-        <div v-if="filteredRecipes.length === 0" class="empty-hint">暂无配方</div>
-      </div>
-    </div>
-
-    <!-- Recipe Detail Overlay -->
+    <!-- Inline Detail Panel -->
     <RecipeDetailOverlay
       v-if="selectedRecipeIndex !== null"
+      ref="detailRef"
       :recipeIndex="selectedRecipeIndex"
       @close="selectedRecipeIndex = null"
     />
@@ -123,12 +45,11 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, nextTick } from 'vue'
+import { ref, computed, nextTick } from 'vue'
 import { useAuthStore } from '../stores/auth'
 import { useOilsStore } from '../stores/oils'
 import { useRecipesStore } from '../stores/recipes'
 import { useUiStore } from '../stores/ui'
-import { api } from '../composables/useApi'
 import RecipeCard from '../components/RecipeCard.vue'
 import RecipeDetailOverlay from '../components/RecipeDetailOverlay.vue'
 
@@ -138,45 +59,18 @@ const recipeStore = useRecipesStore()
 const ui = useUiStore()
 
 const searchQuery = ref('')
-const selectedCategory = ref(null)
-const categories = ref([])
 const selectedRecipeIndex = ref(null)
-const showMyRecipes = ref(true)
-const showFavorites = ref(true)
-const catIdx = ref(0)
-
-onMounted(async () => {
-  try {
-    const res = await api('/api/categories')
-    if (res.ok) {
-      categories.value = await res.json()
-    }
-  } catch {
-    // category modules are optional
-  }
-})
-
-function selectCategory(cat) {
-  selectedCategory.value = cat.tag_name || cat.name
-}
-
-function slideCat(dir) {
-  const len = categories.value.length
-  catIdx.value = (catIdx.value + dir + len) % len
-}
+const favFilter = ref(false)
+const detailRef = ref(null)
 
 const filteredRecipes = computed(() => {
   let list = recipeStore.recipes
-  if (selectedCategory.value) {
-    list = list.filter(r => r.tags && r.tags.includes(selectedCategory.value))
+  if (favFilter.value && auth.isLoggedIn) {
+    list = list.filter(r => recipeStore.isFavorite(r))
   }
-  return list
-})
-
-const fuzzyResults = computed(() => {
-  if (!searchQuery.value.trim()) return []
+  if (!searchQuery.value.trim()) return list
   const q = searchQuery.value.trim().toLowerCase()
-  return recipeStore.recipes.filter(r => {
+  return list.filter(r => {
     const nameMatch = r.name.toLowerCase().includes(q)
     const oilMatch = r.ingredients.some(ing => ing.oil.toLowerCase().includes(q))
     const tagMatch = r.tags && r.tags.some(t => t.toLowerCase().includes(q))
@@ -184,27 +78,19 @@ const fuzzyResults = computed(() => {
   })
 })
 
-const myRecipesPreview = computed(() => {
-  if (!auth.isLoggedIn) return []
-  return recipeStore.recipes
-    .filter(r => r._owner_id === auth.user.id)
-    .slice(0, 6)
-})
-
-const favoritesPreview = computed(() => {
-  if (!auth.isLoggedIn) return []
-  return recipeStore.recipes
-    .filter(r => recipeStore.isFavorite(r))
-    .slice(0, 6)
-})
+const displayedRecipes = computed(() => filteredRecipes.value)
 
 function findGlobalIndex(recipe) {
   return recipeStore.recipes.findIndex(r => r._id === recipe._id)
 }
 
-function openDetail(index) {
+async function selectRecipe(index) {
   if (index >= 0) {
     selectedRecipeIndex.value = index
+    await nextTick()
+    // Scroll detail panel into view
+    const el = document.querySelector('.detail-wrapper')
+    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
   }
 }
 
@@ -217,12 +103,12 @@ async function handleToggleFav(recipe) {
 }
 
 function onSearch() {
-  // fuzzyResults computed handles the filtering reactively
+  // reactive filtering via computed
 }
 
 function clearSearch() {
   searchQuery.value = ''
-  selectedCategory.value = null
+  favFilter.value = false
 }
 </script>
 
@@ -231,248 +117,101 @@ function clearSearch() {
   padding: 0 12px 24px;
 }
 
-.cat-wrap {
-  position: relative;
-  margin: 0 -12px 20px;
-  overflow: hidden;
-}
-
-.cat-track {
-  display: flex;
-  transition: transform 0.4s ease;
-  will-change: transform;
-}
-
-.cat-card {
-  flex: 0 0 100%;
-  min-height: 200px;
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-  background-size: cover;
-  background-position: center;
-}
-
-.cat-card::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25));
-}
-
-.cat-inner {
-  position: relative;
-  z-index: 1;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 36px 24px;
-  color: white;
-  text-align: center;
-}
-
-.cat-icon {
-  font-size: 48px;
-  margin-bottom: 10px;
-  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
-}
-
-.cat-name {
-  font-family: 'Noto Serif SC', serif;
-  font-size: 24px;
-  font-weight: 700;
-  letter-spacing: 3px;
-  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
-}
-
-.cat-sub {
-  font-size: 13px;
-  margin-top: 6px;
-  opacity: 0.9;
-  letter-spacing: 1px;
-}
-
-.cat-arrow {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 2;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background: rgba(255,255,255,0.25);
-  border: none;
-  color: white;
-  font-size: 18px;
-  cursor: pointer;
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 0.2s;
-}
-.cat-arrow:hover { background: rgba(255,255,255,0.45); }
-.cat-arrow.left { left: 12px; }
-.cat-arrow.right { right: 12px; }
-
-.cat-dots {
-  display: flex;
-  justify-content: center;
-  gap: 8px;
-  margin-bottom: 14px;
-}
-.cat-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--border, #e0d4c0);
-  cursor: pointer;
-  transition: all 0.25s;
-}
-.cat-dot.active {
-  background: var(--sage, #7a9e7e);
-  width: 22px;
-  border-radius: 4px;
-}
-
-.cat-filter-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: var(--sage-mist, #eef4ee);
-  border-radius: 10px;
-  padding: 10px 16px;
-  margin-bottom: 16px;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--sage-dark, #5a7d5e);
-}
-
-.cat-label {
-  font-size: 12px;
-}
-
-.cat-arrow {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  border: 1.5px solid #d4cfc7;
-  background: #fff;
-  cursor: pointer;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: #6b6375;
-}
-
-.cat-arrow:disabled {
-  opacity: 0.3;
-  cursor: default;
-}
-
 .search-box {
+  background: white;
+  border-radius: 16px;
+  padding: 20px 24px;
+  box-shadow: 0 4px 20px rgba(90, 60, 30, 0.08);
+  margin-bottom: 20px;
+}
+
+.search-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #9a8570;
+  margin-bottom: 10px;
+}
+
+.search-row {
   display: flex;
+  gap: 10px;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 16px;
-  background: #f8f7f5;
-  border-radius: 12px;
-  padding: 4px 8px;
-  border: 1.5px solid #e5e4e7;
+  flex-wrap: wrap;
 }
 
 .search-input {
   flex: 1;
-  border: none;
-  background: transparent;
-  padding: 10px 8px;
-  font-size: 14px;
-  outline: none;
+  min-width: 200px;
+  padding: 11px 16px;
+  border: 1.5px solid #e0d4c0;
+  border-radius: 10px;
+  font-size: 15px;
   font-family: inherit;
-  color: #3e3a44;
+  outline: none;
+  color: #2c2416;
+  background: white;
+  transition: border-color 0.2s;
+}
+
+.search-input:focus {
+  border-color: #7a9e7e;
 }
 
 .search-input::placeholder {
-  color: #b0aab5;
-}
-
-.search-btn,
-.search-clear-btn {
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  font-size: 16px;
-  padding: 6px 8px;
-  border-radius: 8px;
-  color: #6b6375;
-}
-
-.search-clear-btn:hover,
-.search-btn:hover {
-  background: #eae8e5;
-}
-
-.personal-section {
-  margin-bottom: 20px;
-}
-
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 12px;
-  background: #f8f7f5;
-  border-radius: 10px;
-  cursor: pointer;
-  margin-bottom: 10px;
-  font-size: 14px;
-  font-weight: 600;
-  color: #3e3a44;
-}
-
-.section-header:hover {
-  background: #f0eeeb;
-}
-
-.toggle-icon {
-  font-size: 12px;
-  color: #999;
-}
-
-.section-label {
-  font-size: 14px;
-  font-weight: 600;
-  color: #3e3a44;
-  padding: 8px 4px;
-  margin-bottom: 8px;
-}
-
-.search-results-section {
-  margin-bottom: 20px;
+  color: #c4a882;
 }
 
 .recipe-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 12px;
-  margin-bottom: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
 }
 
 .empty-hint {
   grid-column: 1 / -1;
   text-align: center;
-  color: #b0aab5;
-  font-size: 13px;
-  padding: 24px 0;
+  color: #9a8570;
+  font-size: 14px;
+  padding: 40px 0;
+}
+
+/* Buttons */
+.btn {
+  padding: 11px 22px;
+  border-radius: 10px;
+  font-size: 14px;
+  font-family: inherit;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.btn-outline {
+  background: transparent;
+  border: 1.5px solid #7a9e7e;
+  color: #5a7d5e;
+}
+
+.btn-outline:hover {
+  background: #eef4ee;
+}
+
+.btn-outline.active {
+  background: #eef4ee;
+  border-color: #5a7d5e;
+  font-weight: 600;
 }
 
 @media (max-width: 600px) {
   .recipe-grid {
     grid-template-columns: 1fr;
   }
+
+  .search-box {
+    padding: 14px 16px;
+  }
 }
 </style>