phase iv -ii

static/css/main.css

@@ -2677,28 +2677,37 @@ html {
    Info Modal - Modern Glassmorphism Design
    ======================================== */
 
+/* Native <dialog> element - centered by default, no positioning needed */
 .info-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    border: none;
+    border-radius: 24px;
+    padding: 0;
+    max-width: 500px;
+    width: calc(100% - 2rem);
+    background: transparent;
+}
+
+/* Native ::backdrop pseudo-element replaces manual backdrop div */
+.info-modal::backdrop {
     background: rgba(0, 0, 0, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.3s ease, visibility 0.3s ease;
-    padding: 1rem;
 }
 
-.info-modal.active {
-    opacity: 1;
-    visibility: visible;
+/* Dialog opening animation - native dialog uses [open] attribute */
+.info-modal[open] {
+    animation: modalFadeIn 0.3s ease;
+}
+
+@keyframes modalFadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9) translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
 }
 
 .info-modal-content {
@@ -2707,19 +2716,12 @@ html {
     -webkit-backdrop-filter: blur(20px);
     border-radius: 24px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 100px rgba(39, 174, 96, 0.1);
-    max-width: 500px;
     width: 100%;
     padding: 2.5rem;
     position: relative;
-    transform: scale(0.9) translateY(20px);
-    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
     border: 1px solid rgba(255, 255, 255, 0.8);
 }
 
-.info-modal.active .info-modal-content {
-    transform: scale(1) translateY(0);
-}
-
 .info-modal-close {
     position: absolute;
     top: 1rem;