UI: 知识卡片宽度收窄(380px)，使用方式按钮选中态更醒目

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

frontend/src/views/OilReference.vue

@@ -313,8 +313,10 @@
               <div style="display:flex;gap:6px;flex-wrap:wrap">
                 <button
                   v-for="m in methodOptions" :key="m.value"
-                  :style="editCardMethodSet.has(m.value) ? 'background:' + m.bg + ';color:' + m.color + ';border-color:' + m.color : ''"
-                  style="padding:6px 14px;border-radius:16px;font-size:12px;border:1.5px solid var(--border);background:white;cursor:pointer;font-family:inherit;transition:all 0.15s"
+                  :style="editCardMethodSet.has(m.value)
+                    ? 'background:' + m.color + ';color:white;border-color:' + m.color + ';font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,0.15)'
+                    : 'background:white;color:#999;border-color:#ddd'"
+                  style="padding:7px 16px;border-radius:20px;font-size:13px;border:2px solid;cursor:pointer;font-family:inherit;transition:all 0.15s"
                   @click="toggleMethod(m.value)"
                 >{{ m.label }}</button>
               </div>
@@ -1205,8 +1207,8 @@ function saveCardImage(name) { saveModalImage(name + '_精油知识卡') }
 .oil-card-modal {
   background: #fff;
   border-radius: 16px;
-  max-width: 480px;
-  width: 100%;
+  max-width: 380px;
+  width: 92%;
   max-height: 85vh;
   overflow-y: auto;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);