fix: replace confirm() with modal for passkey deletion, add missing toast styles

- Replace browser confirm() dialog with the app's custom modal
- Add .toast-info and .toast-warning CSS classes (were missing)
- Passkey info toasts now have proper background/border/color

Author: ddrayko

public/css/style.css

@@ -1228,6 +1228,18 @@ tbody tr:hover {
   color: var(--accent-red);
 }
 
+.toast-info {
+  background: rgba(56, 132, 255, 0.15);
+  border: 1px solid rgba(56, 132, 255, 0.3);
+  color: var(--accent-1);
+}
+
+.toast-warning {
+  background: rgba(251, 191, 36, 0.15);
+  border: 1px solid rgba(251, 191, 36, 0.3);
+  color: var(--accent-yellow);
+}
+
 @keyframes slideUp {
   from { opacity: 0; transform: translateY(20px); }
   to { opacity: 1; transform: translateY(0); }

public/js/app.js

@@ -2455,18 +2455,37 @@ async function handleRegisterPasskey() {
 }
 
 async function handleDeletePasskey(id) {
-  if (!confirm('Delete this passkey? You will no longer be able to use it to sign in.')) return;
-  try {
-    await api(`/auth/passkeys/${id}`, { method: 'DELETE' });
-    showToast('Passkey deleted', 'info');
-    loadPasskeys();
-  } catch (err) {
-    const status = $('#passkey-status');
-    if (status) {
-      status.textContent = err.message;
-      status.style.color = 'var(--accent-red)';
+  const overlay = $('#modal-overlay');
+  const content = $('#modal-content');
+  content.innerHTML = html`
+    <div class="modal-title">Delete Passkey</div>
+    <p style="color:var(--text-secondary);line-height:1.6;margin-bottom:16px">
+      Are you sure you want to delete this passkey? You will no longer be able to use it to sign in.
+    </p>
+    <div class="modal-actions">
+      <button class="btn btn-ghost btn-full modal-cancel-btn">Cancel</button>
+      <button class="btn btn-danger btn-full" id="confirm-delete-passkey-btn">Delete</button>
+    </div>
+  `;
+  overlay.classList.add('open');
+
+  const confirmBtn = $('#confirm-delete-passkey-btn');
+  const newBtn = confirmBtn.cloneNode(true);
+  confirmBtn.replaceWith(newBtn);
+  newBtn.addEventListener('click', async () => {
+    overlay.classList.remove('open');
+    try {
+      await api(`/auth/passkeys/${id}`, { method: 'DELETE' });
+      showToast('Passkey deleted', 'info');
+      loadPasskeys();
+    } catch (err) {
+      const status = $('#passkey-status');
+      if (status) {
+        status.textContent = err.message;
+        status.style.color = 'var(--accent-red)';
+      }
     }
-  }
+  });
 }
 
 function formatDate(d) {