diff --git a/frontend/src/views/OilReference.vue b/frontend/src/views/OilReference.vue
index 7a98caa..d54d8a4 100644
--- a/frontend/src/views/OilReference.vue
+++ b/frontend/src/views/OilReference.vue
@@ -90,15 +90,19 @@
 
     <!-- Search + View Toggle + Add + PDF -->
     <div style="display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap">
-      <div class="search-box" style="flex:1;min-width:180px;margin-bottom:0">
+      <div class="search-box" style="flex:1;min-width:140px;margin-bottom:0">
         <input class="search-input" v-model="searchQuery" placeholder="搜索精油名称…" style="width:100%" />
       </div>
       <div style="display:flex;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;flex-shrink:0">
         <button @click="viewMode = 'bottle'" :style="viewMode === 'bottle' ? 'background:var(--sage);color:white' : 'background:white;color:var(--text-mid)'" style="border:none;border-radius:0;font-size:12px;padding:6px 12px;cursor:pointer">每瓶价</button>
         <button @click="viewMode = 'drop'" :style="viewMode === 'drop' ? 'background:var(--sage);color:white' : 'background:white;color:var(--text-mid)'" style="border:none;border-radius:0;font-size:12px;padding:6px 12px;cursor:pointer">每滴价</button>
       </div>
-      <button v-if="auth.canEdit" class="btn btn-primary btn-sm" @click="showAddForm = !showAddForm">{{ showAddForm ? '收起' : '＋ 新增' }}</button>
-      <button v-if="auth.isAdmin" class="btn btn-gold btn-sm" @click="exportPDF" style="font-size:12px">📥 导出PDF</button>
+      <!-- Desktop: text buttons -->
+      <button v-if="auth.canEdit" class="toolbar-btn-text" @click="showAddForm = !showAddForm">{{ showAddForm ? '收起' : '＋ 新增' }}</button>
+      <button v-if="auth.isAdmin" class="toolbar-btn-text" @click="exportPDF">📥 导出PDF</button>
+      <!-- Mobile: emoji-only buttons -->
+      <button v-if="auth.canEdit" class="toolbar-btn-icon" @click="showAddForm = !showAddForm" title="新增精油">➕</button>
+      <button v-if="auth.isAdmin" class="toolbar-btn-icon" @click="exportPDF" title="导出PDF">📄</button>
     </div>
 
     <!-- Add Oil Form (toggleable) -->
@@ -1245,6 +1249,28 @@ async function saveCardImage(name) {
   text-decoration: line-through;
   white-space: nowrap;
 }
+/* Desktop: show text buttons, hide icon buttons */
+.toolbar-btn-text {
+  padding: 7px 14px;
+  border-radius: 8px;
+  font-size: 12px;
+  cursor: pointer;
+  font-family: inherit;
+  border: 1.5px solid var(--sage);
+  background: white;
+  color: var(--sage-dark);
+  white-space: nowrap;
+}
+.toolbar-btn-text:hover { background: var(--sage-mist); }
+.toolbar-btn-icon {
+  display: none;
+  background: none;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 4px;
+}
+
 @media (max-width: 480px) {
   .oil-name-line { font-size: 13px; }
   .oil-en-line { font-size: 9px; }
@@ -1252,6 +1278,8 @@ async function saveCardImage(name) {
   .oil-retail-line { font-size: 10px; }
   .oils-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
   .oil-chip { padding: 10px 12px; }
+  .toolbar-btn-text { display: none; }
+  .toolbar-btn-icon { display: inline-block; }
 }
 
 .oil-chip-actions {