Rewrite recipe search page to match original design

- RecipeCard: simple card with name, tags, oil names, price (matching
  original .recipe-card style with hover translateY and warm shadows)
- RecipeDetailOverlay: inline panel (not modal) with editable ingredients
  table, add ingredient row, total cost bar, and card preview section
  matching the original detail-panel + #recipe-card-export layout
- RecipeSearch: simplified layout with search box and grid, detail panel
  appears inline below grid when a card is clicked
- Updated Cypress tests to match new component structure

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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
+    // Check via .recipe-card-price elements which hold the formatted cost
-    cy.get('.card-price').first().invoke('text').then(text => {
+    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)

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*="detail"]').should('be.visible')
-      cy.get('[class*="overlay"], [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('[class*="detail"]').should('be.visible')
-    cy.get('button').contains(/✕|关闭|←/).first().click()
+    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*="detail"] button').should('have.length.gte', 1)
-    cy.get('[class*="overlay"] button, [class*="detail"] button').should('have.length.gte', 1)
   })
 
-  it('shows favorite star', () => {
+  it('shows favorite star on recipe cards', () => {
-    cy.get('.recipe-card').first().click()
+    cy.get('.fav-btn').first().should('exist')
-    cy.wait(500)
-    cy.contains(/★|☆|收藏/).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.wait(500)
-    cy.get('select, input[type="number"], .oil-select, .drops-input').should('exist')
+    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.wait(500)
-    cy.contains(/保存|💾/).should('exist')
+    cy.contains('导出图片').should('exist')
   })
 })

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 class="recipe-card-name">{{ recipe.name }}</div>
-
+    <div v-if="recipe.tags && recipe.tags.length" class="recipe-card-tags">
-    <div v-if="recipe.tags && recipe.tags.length" class="card-tags">
+      <span v-for="tag in recipe.tags" :key="tag" class="tag">{{ tag }}</span>
-      <span v-for="tag in recipe.tags" :key="tag" class="card-tag">{{ tag }}</span>
     </div>
-
+    <div class="recipe-card-oils">{{ oilNames }}</div>
-    <div v-if="recipe.note" class="card-note">{{ recipe.note }}</div>
+    <div class="recipe-card-bottom">
-
+      <div class="recipe-card-price">💰 {{ priceInfo.cost }}</div>
-    <div class="card-ingredients">
+      <button
-      <div v-for="(ing, i) in recipe.ingredients" :key="i" class="card-ing-row">
+        class="fav-btn"
-        <span class="card-oil-name">{{ ing.oil }}</span>
+        :class="{ favorited: isFav }"
-        <span class="card-oil-drops">{{ ing.drops }}滴</span>
+        @click.stop="$emit('toggle-fav', recipe._id)"
-      </div>
+        :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%);
+  background: white;
-  border-radius: 16px;
+  border-radius: 14px;
-  padding: 20px 18px 16px;
+  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);
+  box-shadow: 0 8px 32px rgba(90, 60, 30, 0.15);
-  border-color: #b8d4c0;
+  border-color: #c8ddc9;
 }
 
-.card-name {
+.recipe-card-name {
   font-family: 'Noto Serif SC', serif;
-  font-size: 17px;
+  font-size: 16px;
-  font-weight: 700;
+  font-weight: 600;
-  color: #3e3a44;
+  color: #2c2416;
-  line-height: 1.3;
+  margin-bottom: 8px;
-  padding-right: 28px;
 }
 
-.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;
+  color: #9a8570;
-  background: rgba(201, 168, 76, 0.1);
+  line-height: 1.7;
-  border-radius: 6px;
-  padding: 4px 8px;
-  line-height: 1.4;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
-.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 {
+.recipe-card-price {
-  color: rgba(255, 255, 255, 0.8);
+  font-size: 13px;
-  font-size: 12px;
+  color: #5a7d5e;
-  letter-spacing: 0.5px;
+  font-weight: 600;
 }
 
-.card-total-price {
+.fav-btn {
-  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;
   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;
+  transition: color 0.2s;
-  z-index: 1;
 }
 
-.card-star.favorited {
+.fav-btn.favorited {
   color: #f5a623;
 }
 
-.card-star:hover {
+.fav-btn:hover {
   color: #f5a623;
-  transform: scale(1.15);
 }
 </style>

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
+      <div class="search-label">搜索配方名称或关键词</div>
-        class="search-input"
+      <div class="search-row">
-        v-model="searchQuery"
+        <input
-        placeholder="搜索配方名、精油、标签..."
+          class="search-input"
-        @input="onSearch"
+          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>
+      <div v-if="displayedRecipes.length === 0" class="empty-hint">暂无配方</div>
-      <button class="search-btn" @click="onSearch">🔍</button>
     </div>
 
-    <!-- Personal Section (logged in) -->
+    <!-- Inline Detail Panel -->
-    <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 -->
     <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 favFilter = ref(false)
-const showFavorites = ref(true)
+const detailRef = ref(null)
-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 filteredRecipes = computed(() => {
   let list = recipeStore.recipes
-  if (selectedCategory.value) {
+  if (favFilter.value && auth.isLoggedIn) {
-    list = list.filter(r => r.tags && r.tags.includes(selectedCategory.value))
+    list = list.filter(r => recipeStore.isFavorite(r))
   }
-  return list
+  if (!searchQuery.value.trim()) return list
-})
-
-const fuzzyResults = computed(() => {
-  if (!searchQuery.value.trim()) return []
   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(() => {
+const displayedRecipes = computed(() => filteredRecipes.value)
-  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)
-})
 
 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;
+  flex-wrap: wrap;
-  margin-bottom: 16px;
-  background: #f8f7f5;
-  border-radius: 12px;
-  padding: 4px 8px;
-  border: 1.5px solid #e5e4e7;
 }
 
 .search-input {
   flex: 1;
-  border: none;
+  min-width: 200px;
-  background: transparent;
+  padding: 11px 16px;
-  padding: 10px 8px;
+  border: 1.5px solid #e0d4c0;
-  font-size: 14px;
+  border-radius: 10px;
-  outline: none;
+  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;
+  color: #c4a882;
-}
-
-.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;
 }
 
 .recipe-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  gap: 12px;
+  gap: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 24px;
 }
 
 .empty-hint {
   grid-column: 1 / -1;
   text-align: center;
-  color: #b0aab5;
+  color: #9a8570;
-  font-size: 13px;
+  font-size: 14px;
-  padding: 24px 0;
+  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>