Refactor admin modals: replace backdrop divs with native <dialog> elements for improved accessibility and functionality

styles.css

@@ -785,47 +785,54 @@ button.status-badge:disabled {
   }
 }
 /* ---------- admin modal dialogs ---------- */
-.admin-modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(15, 12, 10, 0.8);
-  backdrop-filter: blur(0.25rem);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 1.5rem;
-  opacity: 0;
-  pointer-events: none;
-  visibility: hidden;
-  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
-}
-
-.admin-modal-backdrop.is-open {
-  opacity: 1;
-  pointer-events: auto;
-  visibility: visible;
-  transition: opacity 0.2s ease, visibility 0s;
-}
-
+/* Native <dialog> modals. The browser handles the overlay (::backdrop),
+   focus trapping, inertness of the page behind, and Esc. A closed dialog
+   is display: none, so its fields can't hold focus or trigger autofill.
+   Open/close fades rely on @starting-style for the entry and
+   allow-discrete to keep display and overlay alive through the exit. */
 .admin-modal {
   background: var(--surface);
+  color: inherit;
   border: 1px solid var(--rule);
   border-radius: 0.25rem;
-  width: 100%;
+  width: calc(100% - 3rem);
   max-width: 36rem;
   max-height: 90vh;
+  margin: auto;
   overflow-y: auto;
   padding: 2rem;
   box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.6);
+  opacity: 0;
   transform: translateY(0.75rem);
-  transition: transform 0.2s ease;
+  transition: opacity 0.2s ease, transform 0.2s ease, overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete;
 }
 
-.admin-modal-backdrop.is-open .admin-modal {
+.admin-modal[open] {
+  opacity: 1;
   transform: translateY(0);
 }
 
+.admin-modal::backdrop {
+  background-color: rgba(15, 12, 10, 0);
+  backdrop-filter: blur(0);
+  transition: background-color 0.2s ease, backdrop-filter 0.2s ease, overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete;
+}
+
+.admin-modal[open]::backdrop {
+  background-color: rgba(15, 12, 10, 0.8);
+  backdrop-filter: blur(0.25rem);
+}
+
+@starting-style {
+  .admin-modal[open] {
+    opacity: 0;
+    transform: translateY(0.75rem);
+  }
+  .admin-modal[open]::backdrop {
+    background-color: rgba(15, 12, 10, 0);
+    backdrop-filter: blur(0);
+  }
+}
 .modal-header {
   display: flex;
   justify-content: space-between;