🎨 Refactor delete confirmation modal to use BaseModal component for improved consistency and reusability

code/websites/pokedex.online/src/views/ApiKeyManager.vue

@@ -131,27 +131,25 @@
     </div>
 
     <!-- Delete Confirmation Modal -->
-    <div
-      v-if="showDeleteConfirm"
-      class="modal-overlay"
-      @click="showDeleteConfirm = false"
+    <BaseModal
+      v-model="showDeleteConfirm"
+      title="Delete API Key?"
+      size="small"
+      :close-on-overlay="true"
     >
-      <div class="modal" @click.stop>
-        <h3>Delete API Key?</h3>
       <p>
         Are you sure you want to clear the stored API key? You'll need to
         enter it again to use the tournament tools.
       </p>
-        <div class="modal-buttons">
+      <template #footer>
         <button @click="showDeleteConfirm = false" class="btn btn-secondary">
           Cancel
         </button>
         <button @click="handleDeleteKey" class="btn btn-danger">
           Delete
         </button>
-        </div>
-      </div>
-    </div>
+      </template>
+    </BaseModal>
     <!-- Challonge API Key Guide Modal -->
     <ChallongeApiKeyGuide v-if="showGuide" @close="showGuide = false" />
   </div>