Made changes to CSS and merged together.

web/vue-app/src/assets/global.css

@@ -0,0 +1,55 @@
+:root {
+  --primary: #667eea;
+  --secondary: #7257b3;
+  --accent: #cbd5e1;
+  --header-bg: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+  --button-bg: #fff;
+  --button-active-bg: var(--secondary);
+  --button-hover-bg: #e6eaff;
+  --button-text: var(--primary);
+  --button-active-text: #fff;
+  --app-version: var(--accent);
+
+  /* Add these: */
+  --btn-primary: #667eea;
+  --btn-primary-hover: #5a67d8;
+  --btn-secondary: #f3f3f3;
+  --btn-secondary-hover: #e2e8f0;
+  --btn-secondary-text: #666;
+  --btn-danger: #ef4444;
+  --btn-danger-hover: #dc2626;
+  --btn-green: #22c55e;
+  --btn-green-hover: #16a34a;
+
+  --error: #e53e3e;
+  --error-bg: rgba(255, 107, 107, 0.1);
+
+  --form-bg: #fff;
+  --form-shadow: #667eea22;
+  --form-heading: #667eea;
+  --form-label: #444;
+  --form-input-bg: #f8fafc;
+  --form-input-border: #cbd5e1;
+  --form-loading: #666;
+
+  --list-bg: #fff5;
+  --list-item-bg: #f8fafc;
+  --list-item-border-good: #38c172;
+  --list-item-border-bad: #e53e3e;
+  --list-item-bg-good: #f0fff4;
+  --list-item-bg-bad: #fff5f5;
+  --list-image-bg: #eee;
+  --delete-btn-hover-bg: #ffeaea;
+  --delete-btn-hover-shadow: #ef444422;
+  --checkbox-accent: #667eea;
+  --list-loading-color: #888;
+
+  --modal-bg: #fff;
+  --modal-text: #222;
+  --modal-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+  --dialog-message: #444;
+  --dialog-child-name: #667eea;
+  --info-image-bg: #eee;
+  --info-points: #667eea;
+  --loading-color: #fff;
+}