fix: 保存按钮移到卡片外面，截图时不包含按钮

配方卡片能正常弹分享面板是因为按钮不在截图区域内。
现在稀释比例/使用禁忌/知识卡的保存按钮也移到 modal-overlay
层级（卡片 div 外面），html2canvas 截图时不会受按钮影响。
generateImageFromRef 也不再需要隐藏/恢复按钮的逻辑。

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

frontend/src/views/OilReference.vue

@@ -36,11 +36,9 @@
           <div style="margin-top:16px;padding:12px;background:#e8f5e9;border-radius:10px;font-size:12px;color:#2e7d32;text-align:center">
             💡 稀释比例 = 1滴精油 : N滴椰子油<br>比例越大越温和，新手建议从高稀释比例开始
           </div>
-          <div style="text-align:center;margin-top:12px">
-            <button @click="saveDilutionImage" style="padding:8px 16px;border-radius:10px;border:1.5px solid var(--sage);background:white;color:var(--sage-dark);cursor:pointer;font-size:13px;font-family:inherit">💾 保存图片</button>
-          </div>
         </div>
       </div>
+      <button @click="saveDilutionImage" style="margin-top:12px;padding:8px 20px;border-radius:20px;border:none;background:rgba(255,255,255,0.9);color:#2e7d32;cursor:pointer;font-size:13px;font-family:inherit;font-weight:600;z-index:2">💾 保存图片</button>
     </div>
 
     <!-- Safety Cautions Modal -->
@@ -77,11 +75,9 @@
             <span style="font-size:20px;flex-shrink:0">💧</span>
             <div><div style="font-weight:600;color:var(--text-dark)">少量多次，多喝水</div><div style="font-size:12px;color:var(--text-light);margin-top:2px">使用精油后多补充水分，帮助身体代谢</div></div>
           </div>
-          <div style="text-align:center;margin-top:12px">
-            <button @click="saveContraImage" style="padding:8px 16px;border-radius:10px;border:1.5px solid #e65100;background:white;color:#e65100;cursor:pointer;font-size:13px;font-family:inherit">💾 保存图片</button>
-          </div>
         </div>
       </div>
+      <button @click="saveContraImage" style="margin-top:12px;padding:8px 20px;border-radius:20px;border:none;background:rgba(255,255,255,0.9);color:#e65100;cursor:pointer;font-size:13px;font-family:inherit;font-weight:600;z-index:2">💾 保存图片</button>
     </div>
 
     <!-- Search + View Toggle + Add + PDF -->
@@ -207,11 +203,9 @@
             <h4 class="oil-card-caution-title">⚠️ 注意事项</h4>
             <p>{{ activeCard.caution }}</p>
           </div>
-          <div style="text-align:center;padding-top:12px">
-            <button class="btn btn-outline btn-sm" @click="saveCardImage(activeCardName)">💾 保存图片</button>
-          </div>
         </div>
       </div>
+      <button @click="saveCardImage(activeCardName)" style="margin-top:12px;padding:8px 20px;border-radius:20px;border:none;background:rgba(255,255,255,0.9);color:var(--sage-dark);cursor:pointer;font-size:13px;font-family:inherit;font-weight:600;z-index:2">💾 保存图片</button>
     </div>
 
     <!-- Simple Oil Detail Panel (for oils without a knowledge card) -->
@@ -738,12 +732,10 @@ const oilCardImageUrl = ref(null)
 async function generateImageFromRef(elRef, imageUrlRef) {
   const el = elRef.value || elRef
   if (!el) return
-  // Hide buttons during capture
-  const btns = el.querySelectorAll('button')
-  btns.forEach(b => { b._d = b.style.display; b.style.display = 'none' })
   await nextTick()
   await new Promise(r => setTimeout(r, 100))
   try {
+    // Same params as RecipeDetailOverlay.generateCardImage
     const canvas = await html2canvas(el, {
       backgroundColor: null,
       scale: 3,
@@ -753,8 +745,6 @@ async function generateImageFromRef(elRef, imageUrlRef) {
     imageUrlRef.value = canvas.toDataURL('image/png')
   } catch (e) {
     console.error('generateImage failed:', e)
-  } finally {
-    btns.forEach(b => b.style.display = b._d || '')
   }
 }