changes

src/styles/components.css

@@ -863,13 +863,14 @@ textarea {
 .modal-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(15, 23, 42, 0.6);
-  backdrop-filter: blur(2px);
+  background: rgba(15, 23, 42, 0.55); /* slightly lighter and cleaner */
+  backdrop-filter: blur(3px);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   padding: 20px;
+  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.12); /* subtle primary tint */
 }
 
 .modal {
@@ -882,7 +883,7 @@ textarea {
   flex-direction: column;
   border-radius: 14px;
   box-shadow: var(--shadow-lg);
-  border: 1px solid rgba(148, 163, 184, 0.25);
+  border: 1px solid rgba(99, 102, 241, 0.25); /* subtle primary border */
   overflow: hidden; /* clip internal scrolling */
 }
 
@@ -891,8 +892,9 @@ textarea {
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
-  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
-  background: linear-gradient(180deg, rgba(30,41,59,0.6), rgba(2,6,23,0.4));
+  border-bottom: 1px solid rgba(99, 102, 241, 0.35);
+  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
+  color: #fff;
   flex-shrink: 0; /* keep header visible */
 }
 
@@ -920,3 +922,13 @@ textarea {
 .modal .form-header {
   display: none; /* header handled by modal */
 }
+
+/* Modal Header button contrast on primary background */
+.modal-header .btn-outline {
+  border-color: rgba(255, 255, 255, 0.9);
+  color: #ffffff;
+}
+.modal-header .btn-outline:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-1px);
+}