Made changes to CSS and merged together.

web/vue-app/src/assets/edit-forms.css

@@ -4,9 +4,9 @@
 .task-edit-view {
   max-width: 400px;
   margin: 2rem auto;
-  background: #fff;
+  background: var(--form-bg);
   border-radius: 12px;
-  box-shadow: 0 4px 24px #667eea22;
+  box-shadow: 0 4px 24px var(--form-shadow);
   padding: 2rem 2.2rem 1.5rem 2.2rem;
 }
 
@@ -16,7 +16,7 @@
 .task-edit-view h2 {
   text-align: center;
   margin-bottom: 1.5rem;
-  color: #667eea;
+  color: var(--form-heading);
 }
 
 .form-group,
@@ -25,7 +25,7 @@
   display: block;
   margin-bottom: 1.1rem;
   font-weight: 500;
-  color: #444;
+  color: var(--form-label);
   width: 100%;
 }
 
@@ -40,14 +40,14 @@ input[type='number'],
   margin-top: 0.4rem;
   padding: 0.5rem;
   border-radius: 7px;
-  border: 1px solid #cbd5e1;
+  border: 1px solid var(--form-input-border);
   font-size: 1rem;
-  background: #f8fafc;
+  background: var(--form-input-bg);
   box-sizing: border-box;
 }
 
 .loading-message {
   text-align: center;
-  color: #666;
+  color: var(--form-loading);
   margin-bottom: 1.2rem;
 }