migrate remaining dialogs to Vue Transition, remove old keyframes

src/views/Settings.vue

@@ -471,12 +471,13 @@
     </div>
 
     <!-- Clear Data Confirmation Dialog -->
+    <Transition name="modal">
     <div
       v-if="showClearDataDialog"
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="showClearDataDialog = false"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6 animate-modal-enter">
+      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Clear All Data</h2>
         <p class="text-[0.75rem] text-text-secondary mb-4">
           Are you sure? This action cannot be undone.
@@ -500,6 +501,7 @@
         </div>
       </div>
     </div>
+    </Transition>
   </div>
 </template>