diff --git a/websiteFunctions/templates/websiteFunctions/WPAddNewPlugin.html b/websiteFunctions/templates/websiteFunctions/WPAddNewPlugin.html
index a8748c129..0b08f673e 100644
--- a/websiteFunctions/templates/websiteFunctions/WPAddNewPlugin.html
+++ b/websiteFunctions/templates/websiteFunctions/WPAddNewPlugin.html
@@ -17,18 +17,18 @@
     }
     
     .plugin-section {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .section-title {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-heading, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -41,12 +41,12 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
     .plugin-description {
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
         font-size: 14px;
         margin-bottom: 25px;
         line-height: 1.5;
@@ -60,7 +60,7 @@
     .form-label {
         font-size: 13px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -70,22 +70,22 @@
     .form-control {
         width: 100%;
         padding: 12px 16px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         font-size: 14px;
-        color: #2f3640;
-        background: white;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-secondary, white);
         transition: all 0.2s ease;
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
         box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
     }
     
     .form-control::placeholder {
-        color: #94a3b8;
+        color: var(--text-secondary, #94a3b8);
         font-size: 13px;
     }
     
@@ -109,8 +109,8 @@
     }
     
     .search-result-item:hover {
-        background: #f8f9ff;
-        color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        color: var(--accent-color, #5b5fcf);
     }
     
     .search-result-item:last-child {
@@ -120,7 +120,7 @@
     .plugin-icon {
         width: 40px;
         height: 40px;
-        background: #e8e9ff;
+        background: var(--border-color, #e8e9ff);
         border-radius: 8px;
         display: flex;
         align-items: center;
@@ -140,13 +140,13 @@
     
     .plugin-desc {
         font-size: 12px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     /* Selected Plugins Section */
     .selected-plugins-section {
-        background: #fafbff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #fafbff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 20px;
         margin-bottom: 25px;
@@ -155,7 +155,7 @@
     .selected-header {
         font-size: 14px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-heading, #2f3640);
         margin-bottom: 15px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
@@ -168,20 +168,20 @@
     }
     
     .selected-plugin {
-        background: white;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-secondary, white);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 10px 16px;
         display: flex;
         align-items: center;
         gap: 8px;
         font-size: 14px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         transition: all 0.2s ease;
     }
     
     .selected-plugin:hover {
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
         box-shadow: 0 2px 8px rgba(91,95,207,0.15);
     }
     
@@ -202,8 +202,8 @@
     
     /* Button Styles */
     .btn-primary {
-        background: #5b5fcf;
-        border: 1px solid #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--accent-color, #5b5fcf);
         color: white;
         padding: 12px 32px;
         border-radius: 8px;
@@ -218,8 +218,8 @@
     }
     
     .btn-primary:hover {
-        background: #4b4fbf;
-        border-color: #4b4fbf;
+        background: var(--accent-hover, #4b4fbf);
+        border-color: var(--accent-hover, #4b4fbf);
         box-shadow: 0 3px 8px rgba(91,95,207,0.3);
         transform: translateY(-1px);
     }
@@ -233,9 +233,9 @@
     }
     
     .btn-secondary {
-        background: white;
-        border: 1px solid #e8e9ff;
-        color: #2f3640;
+        background: var(--bg-secondary, white);
+        border: 1px solid var(--border-color, #e8e9ff);
+        color: var(--text-primary, #2f3640);
         padding: 12px 32px;
         border-radius: 8px;
         font-size: 14px;
@@ -249,9 +249,9 @@
     }
     
     .btn-secondary:hover {
-        background: #f8f9ff;
-        border-color: #5b5fcf;
-        color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        border-color: var(--accent-color, #5b5fcf);
+        color: var(--accent-color, #5b5fcf);
         text-decoration: none;
     }
     
@@ -271,7 +271,7 @@
     .empty-selected {
         text-align: center;
         padding: 40px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
         font-size: 14px;
     }
     
@@ -283,12 +283,12 @@
     
     /* Info Alert */
     .info-alert {
-        background: #f0f9ff;
-        border: 1px solid #bae6fd;
+        background: var(--info-bg, #f0f9ff);
+        border: 1px solid var(--info-border, #bae6fd);
         border-radius: 8px;
         padding: 15px;
         margin-bottom: 20px;
-        color: #0c4a6e;
+        color: var(--info-text, #0c4a6e);
         font-size: 14px;
         display: flex;
         align-items: center;
@@ -296,7 +296,7 @@
     }
     
     .info-alert i {
-        color: #0284c7;
+        color: var(--info-accent, #0284c7);
     }
     
     /* Responsive */
diff --git a/websiteFunctions/templates/websiteFunctions/WPConfigurePlugins.html b/websiteFunctions/templates/websiteFunctions/WPConfigurePlugins.html
index be9fd3975..501d4808f 100644
--- a/websiteFunctions/templates/websiteFunctions/WPConfigurePlugins.html
+++ b/websiteFunctions/templates/websiteFunctions/WPConfigurePlugins.html
@@ -17,18 +17,18 @@
     }
     
     .plugins-section {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .section-title {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-heading, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -41,12 +41,12 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
     .plugins-description {
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
         font-size: 14px;
         margin-bottom: 25px;
         line-height: 1.5;
@@ -62,8 +62,8 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
-        border: 1px solid #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--accent-color, #5b5fcf);
         color: white;
         padding: 10px 20px;
         border-radius: 8px;
@@ -78,8 +78,8 @@
     }
     
     .btn-primary:hover {
-        background: #4b4fbf;
-        border-color: #4b4fbf;
+        background: var(--accent-hover, #4b4fbf);
+        border-color: var(--accent-hover, #4b4fbf);
         box-shadow: 0 3px 8px rgba(91,95,207,0.3);
         transform: translateY(-1px);
         text-decoration: none;
@@ -88,8 +88,8 @@
     
     /* Table Styles */
     .table-container {
-        background: #fafbff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #fafbff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         overflow: hidden;
     }
@@ -97,11 +97,11 @@
     .table {
         width: 100%;
         margin-bottom: 0;
-        background: white;
+        background: var(--bg-secondary, white);
     }
     
     .table thead {
-        background: #fafbff;
+        background: var(--bg-hover, #fafbff);
     }
     
     .table th {
@@ -109,23 +109,23 @@
         padding: 15px;
         font-size: 13px;
         font-weight: 700;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
         text-transform: uppercase;
         letter-spacing: 0.5px;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
     
     .table td {
         border: none;
         padding: 15px;
         font-size: 14px;
-        color: #2f3640;
-        border-bottom: 1px solid #f1f3f5;
+        color: var(--text-primary, #2f3640);
+        border-bottom: 1px solid var(--border-light, #f1f3f5);
         vertical-align: middle;
     }
     
     .table tbody tr:hover {
-        background: #fafbff;
+        background: var(--bg-hover, #fafbff);
     }
     
     .table tbody tr:last-child td {
@@ -151,35 +151,35 @@
     }
     
     .btn-edit {
-        color: #10b981;
-        border-color: #d1fae5;
-        background: #f0fdf4;
+        color: var(--success-accent, #10b981);
+        border-color: var(--success-border, #d1fae5);
+        background: var(--success-light, #f0fdf4);
     }
     
     .btn-edit:hover {
-        background: #10b981;
+        background: var(--success-accent, #10b981);
         color: white;
-        border-color: #10b981;
+        border-color: var(--success-accent, #10b981);
         text-decoration: none;
     }
     
     .btn-delete {
-        color: #ef4444;
-        border-color: #fee2e2;
-        background: #fef2f2;
+        color: var(--danger-accent, #ef4444);
+        border-color: var(--danger-border, #fee2e2);
+        background: var(--danger-light, #fef2f2);
     }
     
     .btn-delete:hover {
-        background: #ef4444;
+        background: var(--danger-accent, #ef4444);
         color: white;
-        border-color: #ef4444;
+        border-color: var(--danger-accent, #ef4444);
     }
     
     /* Empty State */
     .empty-state {
         text-align: center;
         padding: 60px 20px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     .empty-state svg {
@@ -192,7 +192,7 @@
     .empty-state h3 {
         font-size: 18px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-heading, #2f3640);
         margin-bottom: 10px;
     }
     
@@ -204,13 +204,13 @@
     /* Modal Styles */
     .modal-content {
         border-radius: 12px;
-        border: 1px solid #e8e9ff;
-        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+        border: 1px solid var(--border-color, #e8e9ff);
+        box-shadow: 0 10px 40px var(--shadow-color, rgba(0,0,0,0.1));
     }
     
     .modal-header {
-        background: #fafbff;
-        border-bottom: 1px solid #e8e9ff;
+        background: var(--bg-hover, #fafbff);
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
         padding: 20px;
         border-radius: 12px 12px 0 0;
     }
@@ -218,7 +218,7 @@
     .modal-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-heading, #2f3640);
         margin: 0;
     }
     
@@ -227,16 +227,16 @@
     }
     
     .modal-footer {
-        background: #fafbff;
-        border-top: 1px solid #e8e9ff;
+        background: var(--bg-hover, #fafbff);
+        border-top: 1px solid var(--border-color, #e8e9ff);
         padding: 15px 20px;
         border-radius: 0 0 12px 12px;
     }
     
     .btn-default {
-        background: white;
-        border: 1px solid #e8e9ff;
-        color: #2f3640;
+        background: var(--bg-secondary, white);
+        border: 1px solid var(--border-color, #e8e9ff);
+        color: var(--text-primary, #2f3640);
         padding: 8px 20px;
         border-radius: 6px;
         font-size: 14px;
@@ -246,9 +246,9 @@
     }
     
     .btn-default:hover {
-        background: #f8f9ff;
-        border-color: #5b5fcf;
-        color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        border-color: var(--accent-color, #5b5fcf);
+        color: var(--accent-color, #5b5fcf);
     }
     
     .btn-danger {
diff --git a/websiteFunctions/templates/websiteFunctions/WPCreate.html b/websiteFunctions/templates/websiteFunctions/WPCreate.html
index 195b5b6ef..ddf96d534 100644
--- a/websiteFunctions/templates/websiteFunctions/WPCreate.html
+++ b/websiteFunctions/templates/websiteFunctions/WPCreate.html
@@ -18,18 +18,18 @@
     
     /* Page Header */
     .page-header {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 25px;
         margin-bottom: 25px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .page-header h1 {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-heading, #2f3640);
         margin: 0 0 10px 0;
         display: flex;
         align-items: center;
@@ -39,7 +39,7 @@
     .page-header .icon {
         width: 48px;
         height: 48px;
-        background: #5856d6;
+        background: var(--accent-color, #5856d6);
         border-radius: 12px;
         display: flex;
         align-items: center;
@@ -51,7 +51,7 @@
     
     .page-header p {
         font-size: 15px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin: 0;
     }
     
@@ -63,17 +63,17 @@
     }
     
     .wp-section {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 25px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .section-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-heading, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -84,17 +84,17 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5856d6;
+        background: var(--accent-color, #5856d6);
         border-radius: 2px;
     }
     
     /* Sidebar Info */
     .info-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 25px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         height: fit-content;
         position: sticky;
         top: 20px;
@@ -103,7 +103,7 @@
     .info-card h3 {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-heading, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -118,12 +118,12 @@
     
     .feature-list li {
         padding: 12px 0;
-        border-bottom: 1px solid #f0f0ff;
+        border-bottom: 1px solid var(--border-color, #f0f0ff);
         display: flex;
         align-items: center;
         gap: 12px;
         font-size: 14px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
     }
     
     .feature-list li:last-child {
@@ -131,13 +131,13 @@
     }
     
     .feature-list i {
-        color: #5856d6;
+        color: var(--accent-color, #5856d6);
         font-size: 16px;
         flex-shrink: 0;
     }
     
     .stats-box {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         border-radius: 8px;
         padding: 20px;
         margin-top: 20px;
@@ -163,7 +163,7 @@
     .stats-box .stat-value {
         font-size: 24px;
         font-weight: 700;
-        color: #5856d6;
+        color: var(--accent-color, #5856d6);
     }
     
     /* Form Styles */
@@ -174,17 +174,17 @@
     .form-section-title {
         font-size: 15px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-heading, #2f3640);
         margin-bottom: 20px;
         padding-bottom: 10px;
-        border-bottom: 2px solid #f0f0ff;
+        border-bottom: 2px solid var(--border-color, #f0f0ff);
         display: flex;
         align-items: center;
         gap: 10px;
     }
     
     .form-section-title i {
-        color: #5856d6;
+        color: var(--accent-color, #5856d6);
     }
     
     .form-group {
@@ -194,7 +194,7 @@
     .form-label {
         font-size: 14px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
         display: block;
     }
@@ -202,23 +202,23 @@
     .form-control {
         width: 100%;
         padding: 12px 16px;
-        border: 2px solid #e8e9ff;
+        border: 2px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         font-size: 15px;
-        color: #2f3640;
-        background: #f8f9ff;
+        color: var(--text-primary, #2f3640);
+        background: var(--bg-hover, #f8f9ff);
         transition: all 0.3s ease;
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #5856d6;
+        border-color: var(--accent-color, #5856d6);
         box-shadow: 0 0 0 3px rgba(88,86,214,0.1);
-        background: white;
+        background: var(--bg-secondary, white);
     }
     
     .form-control::placeholder {
-        color: #94a3b8;
+        color: var(--text-secondary, #94a3b8);
         font-size: 14px;
     }
     
@@ -250,14 +250,14 @@
     }
     
     select.form-control option {
-        color: #2f3640;
-        background-color: white;
+        color: var(--text-primary, #2f3640);
+        background-color: var(--bg-secondary, white);
         padding: 8px;
     }
     
     select.form-control:focus {
-        color: #2f3640;
-        background-color: white;
+        color: var(--text-primary, #2f3640);
+        background-color: var(--bg-secondary, white);
     }
     
     .input-group {
@@ -275,7 +275,7 @@
     
     .help-text {
         font-size: 13px;
-        color: #94a3b8;
+        color: var(--text-secondary, #94a3b8);
         margin-top: 5px;
         display: flex;
         align-items: center;
@@ -313,7 +313,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: #e8e9ff;
+        background-color: var(--border-color, #e8e9ff);
         transition: .4s;
         border-radius: 26px;
     }
@@ -325,13 +325,13 @@
         width: 18px;
         left: 4px;
         bottom: 4px;
-        background-color: white;
+        background-color: var(--bg-secondary, white);
         transition: .4s;
         border-radius: 50%;
     }
     
     input:checked + .slider {
-        background-color: #5856d6;
+        background-color: var(--accent-color, #5856d6);
     }
     
     input:checked + .slider:before {
@@ -340,7 +340,7 @@
     
     .switch-label {
         font-size: 14px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         font-weight: 500;
     }
     
@@ -360,13 +360,13 @@
     }
     
     .btn-primary {
-        background: #5856d6;
+        background: var(--accent-color, #5856d6);
         color: white;
         box-shadow: 0 2px 8px rgba(88,86,214,0.3);
     }
     
     .btn-primary:hover {
-        background: #4644c0;
+        background: var(--accent-hover, #4644c0);
         transform: translateY(-2px);
         box-shadow: 0 4px 12px rgba(88,86,214,0.4);
     }
@@ -413,18 +413,18 @@
     .progress-icon {
         width: 80px;
         height: 80px;
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 20px;
         font-size: 36px;
-        color: #5856d6;
+        color: var(--accent-color, #5856d6);
     }
     
     .status-message {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         border-radius: 8px;
         padding: 20px;
         margin-bottom: 25px;
@@ -433,21 +433,21 @@
     .status-message h2 {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-heading, #2f3640);
         margin: 0;
     }
     
     .progress {
-        background: #e8e9ff;
+        background: var(--border-color, #e8e9ff);
         border-radius: 50px;
         height: 30px;
         overflow: hidden;
         margin-bottom: 25px;
-        box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
+        box-shadow: inset 0 2px 4px var(--shadow-color, rgba(0,0,0,0.05));
     }
     
     .progress-bar {
-        background: linear-gradient(90deg, #5856d6 0%, #4644c0 100%);
+        background: linear-gradient(90deg, var(--accent-color, #5856d6) 0%, var(--accent-hover, #4644c0) 100%);
         height: 100%;
         transition: width 0.3s ease;
         display: flex;
@@ -477,23 +477,23 @@
     }
     
     .alert-success {
-        background: #d1fae5;
-        color: #065f46;
-        border: 1px solid #a7f3d0;
+        background: var(--success-bg, #d1fae5);
+        color: var(--success-text, #065f46);
+        border: 1px solid var(--success-border, #a7f3d0);
     }
     
     .alert-success i {
-        color: #10b981;
+        color: var(--success-accent, #10b981);
     }
     
     .alert-danger {
-        background: #fee2e2;
-        color: #991b1b;
-        border: 1px solid #fecaca;
+        background: var(--danger-bg, #fee2e2);
+        color: var(--danger-text, #991b1b);
+        border: 1px solid var(--danger-border, #fecaca);
     }
     
     .alert-danger i {
-        color: #ef4444;
+        color: var(--danger-accent, #ef4444);
     }
     
     .loading-spinner {
@@ -503,7 +503,7 @@
     }
     
     .error-text {
-        color: #ef4444;
+        color: var(--danger-text, #ef4444);
         font-size: 13px;
         margin-top: 5px;
     }
diff --git a/websiteFunctions/templates/websiteFunctions/WPEidtPlugin.html b/websiteFunctions/templates/websiteFunctions/WPEidtPlugin.html
index 2cb4ec310..19883dcfe 100644
--- a/websiteFunctions/templates/websiteFunctions/WPEidtPlugin.html
+++ b/websiteFunctions/templates/websiteFunctions/WPEidtPlugin.html
@@ -7,46 +7,50 @@
     {% get_current_language as LANGUAGE_CODE %}
     <!-- Current language: {{ LANGUAGE_CODE }} -->
 
-    <div class="container">
+    <div class="container" style="background: var(--bg-primary, #f0f0ff); padding: 20px; border-radius: 12px;">
         <span id="pluginbID" style="display: none">{{ pluginbID }}</span>
-        <div id="page-title">
-            <h2 id="domainNamePage">{% trans "Edit Plugin Bucket" %}
+        <div id="page-title" style="background: var(--bg-secondary, white); padding: 25px; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08)); border: 1px solid var(--border-color, #e8e9ff);">
+            <h2 id="domainNamePage" style="color: var(--text-heading, #2f3640); margin: 0;">{% trans "Edit Plugin Bucket" %}
 
             </h2>
         </div>
-        <div ng-controller="WPAddNewPlugin" class="panel">
-            <div class="panel-body">
+        <div ng-controller="WPAddNewPlugin" class="panel" style="background: var(--bg-secondary, white); border-radius: 12px; box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08)); border: 1px solid var(--border-color, #e8e9ff);">
+            <div class="panel-body" style="padding: 25px;">
                 <div class="example-box-wrapper">
-                    <h2>{{ BucketName }}</h2>
+                    <h2 style="color: var(--text-heading, #2f3640); margin-bottom: 20px;">{{ BucketName }}</h2>
 
                     <form name="websiteCreationForm" action="/" id="createPackages"
-                          class="form-horizontal bordered-row panel-body">
+                          class="form-horizontal bordered-row panel-body" style="background: var(--bg-hover, #f8f9ff); padding: 20px; border-radius: 8px; border: 1px solid var(--border-color, #e8e9ff);">
 
 
 
 
-                        <label style="margin-bottom: 10px;">{% trans "Search Plugin Name" %}</label>
+                        <label style="margin-bottom: 10px; color: var(--text-primary, #2f3640); font-weight: 600;">{% trans "Search Plugin Name" %}</label>
 
                         <input name="searchcontent" type="text" class="form-control" ng-model="searchcontent"
                                ng-keyup="SearchPluginName('eidt')"
-                               placeholder="{% trans "Search Plugin...." %}" required>
+                               placeholder="{% trans "Search Plugin...." %}" required
+                               style="border: 1px solid var(--border-color, #e8e9ff); background: var(--bg-secondary, white); color: var(--text-primary, #2f3640); padding: 12px 16px; border-radius: 8px;">
 
                         <div id="mysearch" class="col-lg-12" style="display: none; border-top: none!important;
-                                                            border: 1px solid  rgba(90, 91, 92, 0.7);
+                                                            border: 1px solid var(--border-color, rgba(90, 91, 92, 0.7));
                                                             position: absolute; z-index: 1;
-                                                            background-color: #FFFFFF">
+                                                            background-color: var(--bg-secondary, #FFFFFF); border-radius: 8px; box-shadow: 0 4px 12px var(--shadow-color, rgba(0,0,0,0.1));">
                         </div>
 
-                        <h3 style="margin-top: 20px;">Selected Plugin</h3>
-                        <div id="sedplugn" style="  display: flex; flex-direction: row; margin-top: 10px;">
+                        <h3 style="margin-top: 20px; color: var(--text-heading, #2f3640);">Selected Plugin</h3>
+                        <div id="sedplugn" style="display: flex; flex-direction: row; margin-top: 10px; gap: 10px; flex-wrap: wrap;">
                             {% for plugin in Selectedplugins %}
                                 <div id="selplug"
-                                     style="background-color: #12207a; color: #FFFFFF; padding: 5px;  border-radius: 30px">
+                                     style="background-color: var(--accent-color, #12207a); color: #FFFFFF; padding: 8px 12px; border-radius: 30px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500;">
                                     {{ plugin }}
                                     <svg ng-click="deletesPlgin('{{ plugin }}')" xmlns="http://www.w3.org/2000/svg"
                                          aria-hidden="true"
                                          role="img" width="1em" height="1em"
-                                         preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16">
+                                         preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"
+                                         style="cursor: pointer; transition: all 0.2s ease;"
+                                         onmouseover="this.style.transform='scale(1.2)'"
+                                         onmouseout="this.style.transform='scale(1)'">
                                         <path fill="none" stroke="currentColor" stroke-linecap="round"
                                               stroke-linejoin="round"
                                               stroke-width="1.5" d="m11.25 4.75l-6.5 6.5m0-6.5l6.5 6.5"/>
diff --git a/websiteFunctions/templates/websiteFunctions/WPRestoreHome.html b/websiteFunctions/templates/websiteFunctions/WPRestoreHome.html
index de66c2821..92d9a0078 100644
--- a/websiteFunctions/templates/websiteFunctions/WPRestoreHome.html
+++ b/websiteFunctions/templates/websiteFunctions/WPRestoreHome.html
@@ -54,7 +54,7 @@
             margin: 0 auto;
             padding: 20px;
             min-height: 100vh;
-            background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
+            background: linear-gradient(180deg, var(--bg-primary, #f8fafc) 0%, var(--bg-hover, #e2e8f0) 100%);
         }
         
         /* Page Title Section */
@@ -105,10 +105,10 @@
         
         /* Main Panel */
         .panel {
-            background: var(--bg-card);
+            background: var(--bg-secondary, white);
             border-radius: var(--radius-xl);
             box-shadow: var(--shadow-lg);
-            border: 1px solid var(--border-color);
+            border: 1px solid var(--border-color, #e2e8f0);
             overflow: hidden;
             position: relative;
         }
@@ -119,13 +119,13 @@
         
         /* Content Box Header */
         .content-box-header {
-            background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light) 100%);
+            background: linear-gradient(135deg, var(--bg-hover, #eef2ff) 0%, var(--bg-primary, #f8fafc) 100%);
             padding: 25px 30px;
             margin: 0;
             font-size: 20px;
             font-weight: 700;
-            color: var(--text-primary);
-            border-bottom: 1px solid var(--border-color);
+            color: var(--text-heading, #1e293b);
+            border-bottom: 1px solid var(--border-color, #e2e8f0);
             letter-spacing: -0.3px;
             display: flex;
             align-items: center;
@@ -144,10 +144,10 @@
         
         /* Form Styling */
         .form-horizontal {
-            background: var(--bg-light);
+            background: var(--bg-hover, #f8fafc);
             padding: 30px;
             border-radius: var(--radius-lg);
-            border: 1px solid var(--border-color);
+            border: 1px solid var(--border-color, #e2e8f0);
         }
         
         .form-group {
@@ -161,7 +161,7 @@
         
         .control-label {
             font-weight: 600;
-            color: var(--text-primary);
+            color: var(--text-primary, #1e293b);
             margin-bottom: 8px;
             font-size: 14px;
             letter-spacing: 0.3px;
@@ -171,16 +171,16 @@
         }
         
         .form-control {
-            border: 2px solid var(--border-color);
-            border-radius: var(--radius-md);
+            border: 2px solid var(--border-color, #e2e8f0);
+            border-radius: var(--radius-md, 8px);
             padding: 12px 16px;
             font-size: 15px;
             transition: var(--transition-base);
-            background: white;
+            background: var(--bg-secondary, white);
         }
         
         .form-control:focus {
-            border-color: var(--primary-color);
+            border-color: var(--accent-color, #6366f1);
             box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
             outline: none;
         }
@@ -202,21 +202,21 @@
         }
         
         .input-group .form-control {
-            border-radius: var(--radius-md) 0 0 var(--radius-md);
+            border-radius: var(--radius-md, 8px) 0 0 var(--radius-md, 8px);
             border-right: none;
         }
         
         .input-group-addon {
-            background: var(--bg-light);
-            border: 2px solid var(--border-color);
+            background: var(--bg-hover, #f8fafc);
+            border: 2px solid var(--border-color, #e2e8f0);
             border-left: none;
             padding: 12px 16px;
             font-weight: 600;
-            color: var(--text-secondary);
+            color: var(--text-secondary, #64748b);
         }
         
         .input-group-btn input {
-            border-radius: 0 var(--radius-md) var(--radius-md) 0;
+            border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
             border-left: none;
         }
         
@@ -285,11 +285,11 @@
         /* Progress Section */
         .progress {
             height: 12px;
-            border-radius: var(--radius-full);
-            background: var(--border-color);
+            border-radius: var(--radius-full, 9999px);
+            background: var(--border-color, #e2e8f0);
             overflow: hidden;
             margin-top: 15px;
-            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
+            box-shadow: inset 0 1px 3px var(--shadow-color, rgba(0,0,0,0.1));
         }
         
         .progress-bar {
@@ -325,26 +325,26 @@
         }
         
         .alert-success {
-            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
-            color: #065f46;
-            border: 1px solid #6ee7b7;
+            background: linear-gradient(135deg, var(--success-bg, #d1fae5) 0%, var(--success-light, #a7f3d0) 100%);
+            color: var(--success-text, #065f46);
+            border: 1px solid var(--success-border, #6ee7b7);
         }
         
         .alert-danger {
-            background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
-            color: #991b1b;
-            border: 1px solid #fca5a5;
+            background: linear-gradient(135deg, var(--danger-bg, #fee2e2) 0%, var(--danger-light, #fecaca) 100%);
+            color: var(--danger-text, #991b1b);
+            border: 1px solid var(--danger-border, #fca5a5);
         }
         
         /* Form Sections */
         #exinstingsitedivDB,
         #exinstingsitediv,
         #Newsitediv {
-            background: white;
+            background: var(--bg-secondary, white);
             padding: 20px;
-            border-radius: var(--radius-md);
+            border-radius: var(--radius-md, 8px);
             margin-bottom: 20px;
-            border: 1px solid var(--border-color);
+            border: 1px solid var(--border-color, #e2e8f0);
             transition: var(--transition-base);
         }
         
@@ -352,7 +352,7 @@
         #exinstingsitediv:hover,
         #Newsitediv:hover {
             box-shadow: var(--shadow-md);
-            border-color: var(--primary-color);
+            border-color: var(--accent-color, #6366f1);
         }
         
         /* Loading Animation */
diff --git a/websiteFunctions/templates/websiteFunctions/WPsiteHome.html b/websiteFunctions/templates/websiteFunctions/WPsiteHome.html
index d2ce4f3dd..3a3c85d60 100644
--- a/websiteFunctions/templates/websiteFunctions/WPsiteHome.html
+++ b/websiteFunctions/templates/websiteFunctions/WPsiteHome.html
@@ -775,7 +775,7 @@
             padding: 12px 15px;
             font-size: 15px;
             transition: all 0.3s ease;
-            background: white;
+            background: var(--bg-secondary, white);
         }
 
         .form-control:focus {
@@ -815,19 +815,19 @@
         }
 
         .alert-success {
-            background: #d1fae5;
-            color: #065f46;
+            background: var(--success-bg, #d1fae5);
+            color: var(--success-text, #065f46);
         }
 
         .alert-danger {
-            background: #fee2e2;
-            color: #991b1b;
+            background: var(--danger-bg, #fee2e2);
+            color: var(--danger-text, #991b1b);
         }
 
         .alert-warning {
-            background: #fef3c7;
-            color: #92400e;
-            border: 1px solid #fde68a;
+            background: var(--warning-bg, #fef3c7);
+            color: var(--warning-text, #92400e);
+            border: 1px solid var(--warning-border, #fde68a);
         }
 
         /* Labels */
@@ -841,8 +841,8 @@
         }
 
         .label-success {
-            background: #d1fae5;
-            color: #065f46;
+            background: var(--success-bg, #d1fae5);
+            color: var(--success-text, #065f46);
         }
 
         /* Modal Styling */
@@ -1882,7 +1882,7 @@
             line-height: 1.25;
             text-align: center;
             white-space: nowrap;
-            border: 1px solid #ced4da;
+            border: 1px solid var(--border-color, #ced4da);
             border-radius: 0.25rem;
             display: flex;
             align-items: center;
@@ -1895,6 +1895,7 @@
             padding: 0.375rem 0.75rem;
             margin: 0;
             border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
+            background: var(--bg-secondary, white);
         }
     </style>
     
diff --git a/websiteFunctions/templates/websiteFunctions/WPsitesList.html b/websiteFunctions/templates/websiteFunctions/WPsitesList.html
index ffa08606b..014bf68f9 100644
--- a/websiteFunctions/templates/websiteFunctions/WPsitesList.html
+++ b/websiteFunctions/templates/websiteFunctions/WPsitesList.html
@@ -397,18 +397,18 @@
         }
         
         .wp-section {
-            background: white;
+            background: var(--bg-secondary, white);
             border-radius: 12px;
             padding: 25px;
             margin-bottom: 25px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-            border: 1px solid #e8e9ff;
+            box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
+            border: 1px solid var(--border-color, #e8e9ff);
         }
         
         .section-title {
             font-size: 16px;
             font-weight: 700;
-            color: #2f3640;
+            color: var(--text-heading, #2f3640);
             margin-bottom: 20px;
             display: flex;
             align-items: center;
@@ -421,7 +421,7 @@
             content: '';
             width: 4px;
             height: 24px;
-            background: #5b5fcf;
+            background: var(--accent-color, #5b5fcf);
             border-radius: 2px;
         }
         
@@ -433,8 +433,8 @@
         }
         
         .search-bar {
-            background: #fafbff;
-            border: 1px solid #e8e9ff;
+            background: var(--bg-hover, #fafbff);
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 8px;
             padding: 15px;
             margin-bottom: 20px;
@@ -446,17 +446,17 @@
         
         .form-control {
             padding: 12px 16px;
-            border: 1px solid #e8e9ff;
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 8px;
             font-size: 14px;
-            color: #2f3640;
-            background: white;
+            color: var(--text-primary, #2f3640);
+            background: var(--bg-secondary, white);
             transition: all 0.2s ease;
         }
         
         .form-control:focus {
             outline: none;
-            border-color: #5b5fcf;
+            border-color: var(--accent-color, #5b5fcf);
             box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
         }
         
@@ -475,14 +475,14 @@
         }
         
         .btn-primary {
-            background: #5b5fcf;
-            border-color: #5b5fcf;
+            background: var(--accent-color, #5b5fcf);
+            border-color: var(--accent-color, #5b5fcf);
             color: white;
         }
         
         .btn-primary:hover {
-            background: #4b4fbf;
-            border-color: #4b4fbf;
+            background: var(--accent-hover, #4b4fbf);
+            border-color: var(--accent-hover, #4b4fbf);
             box-shadow: 0 3px 8px rgba(91,95,207,0.3);
             transform: translateY(-1px);
         }
@@ -545,8 +545,8 @@
         
         /* WordPress Site Item */
         .wp-site-item {
-            background: white;
-            border: 1px solid #e8e9ff;
+            background: var(--bg-secondary, white);
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 12px;
             margin-bottom: 20px;
             overflow: hidden;
@@ -554,33 +554,33 @@
         }
         
         .wp-site-item:hover {
-            border-color: #5b5fcf;
+            border-color: var(--accent-color, #5b5fcf);
             box-shadow: 0 4px 12px rgba(91,95,207,0.15);
         }
         
         .wp-site-header {
             padding: 20px;
-            background: #fafbff;
-            border-bottom: 1px solid #e8e9ff;
+            background: var(--bg-hover, #fafbff);
+            border-bottom: 1px solid var(--border-color, #e8e9ff);
         }
         
         .wp-site-header h4 {
             margin: 0;
             font-size: 18px;
             font-weight: 700;
-            color: #2f3640;
+            color: var(--text-heading, #2f3640);
             display: flex;
             align-items: center;
         }
         
         .wp-site-content {
             padding: 20px;
-            background: white;
+            background: var(--bg-secondary, white);
         }
         
         .site-preview {
-            background: #fafbff;
-            border: 1px solid #e8e9ff;
+            background: var(--bg-hover, #fafbff);
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 8px;
             padding: 15px;
             text-align: center;
@@ -601,8 +601,8 @@
         }
         
         .info-box {
-            background: #fafbff;
-            border: 1px solid #e8e9ff;
+            background: var(--bg-hover, #fafbff);
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 8px;
             padding: 15px;
             text-align: center;
@@ -611,7 +611,7 @@
         .info-box label {
             display: block;
             font-size: 12px;
-            color: #8893a7;
+            color: var(--text-secondary, #8893a7);
             margin-bottom: 5px;
             text-transform: uppercase;
             letter-spacing: 0.5px;
@@ -620,7 +620,7 @@
         .info-box span {
             font-size: 15px;
             font-weight: 700;
-            color: #2f3640;
+            color: var(--text-primary, #2f3640);
         }
         
         .settings-grid {
@@ -630,8 +630,8 @@
         }
         
         .settings-group {
-            background: #fafbff;
-            border: 1px solid #e8e9ff;
+            background: var(--bg-hover, #fafbff);
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 8px;
             padding: 15px;
         }
@@ -645,7 +645,7 @@
             align-items: center;
             gap: 8px;
             font-size: 14px;
-            color: #2f3640;
+            color: var(--text-primary, #2f3640);
             cursor: pointer;
         }
         
@@ -659,7 +659,7 @@
             display: inline-flex;
             align-items: center;
             gap: 8px;
-            color: #5b5fcf;
+            color: var(--accent-color, #5b5fcf);
             font-size: 14px;
             padding: 0 8px;
         }
@@ -669,8 +669,8 @@
         }
         
         .pagination-info {
-            background: #fafbff;
-            border: 1px solid #e8e9ff;
+            background: var(--bg-hover, #fafbff);
+            border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 8px;
             padding: 15px;
             display: flex;
@@ -682,11 +682,11 @@
         }
         
         .alert-info {
-            background: #e3f2fd;
-            border: 1px solid #bbdefb;
+            background: var(--info-bg, #e3f2fd);
+            border: 1px solid var(--info-border, #bbdefb);
             border-radius: 8px;
             padding: 15px;
-            color: #1976d2;
+            color: var(--info-text, #1976d2);
             font-size: 14px;
             text-align: center;
         }
@@ -694,13 +694,13 @@
         /* Modal Styles */
         .modal-content {
             border-radius: 12px;
-            border: 1px solid #e8e9ff;
-            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+            border: 1px solid var(--border-color, #e8e9ff);
+            box-shadow: 0 10px 40px var(--shadow-color, rgba(0,0,0,0.1));
         }
         
         .modal-header {
-            background: #fafbff;
-            border-bottom: 1px solid #e8e9ff;
+            background: var(--bg-hover, #fafbff);
+            border-bottom: 1px solid var(--border-color, #e8e9ff);
             padding: 20px;
             border-radius: 12px 12px 0 0;
         }
@@ -708,7 +708,7 @@
         .modal-title {
             font-size: 18px;
             font-weight: 700;
-            color: #2f3640;
+            color: var(--text-heading, #2f3640);
             margin: 0;
         }
         
@@ -717,21 +717,21 @@
         }
         
         .modal-footer {
-            background: #fafbff;
-            border-top: 1px solid #e8e9ff;
+            background: var(--bg-hover, #fafbff);
+            border-top: 1px solid var(--border-color, #e8e9ff);
             padding: 15px 20px;
             border-radius: 0 0 12px 12px;
         }
         
         .btn-secondary {
-            background: #64748b;
-            border-color: #64748b;
+            background: var(--text-secondary, #64748b);
+            border-color: var(--text-secondary, #64748b);
             color: white;
         }
         
         .btn-secondary:hover {
-            background: #475569;
-            border-color: #475569;
+            background: var(--text-primary, #475569);
+            border-color: var(--text-primary, #475569);
         }
         
         /* Responsive */
diff --git a/websiteFunctions/templates/websiteFunctions/installWordPress.html b/websiteFunctions/templates/websiteFunctions/installWordPress.html
index 8e0311e70..cc13ae1df 100644
--- a/websiteFunctions/templates/websiteFunctions/installWordPress.html
+++ b/websiteFunctions/templates/websiteFunctions/installWordPress.html
@@ -54,7 +54,7 @@
         margin: 0 auto;
         padding: 20px;
         min-height: 100vh;
-        background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
+        background: linear-gradient(180deg, var(--bg-primary, #f8fafc) 0%, var(--bg-hover, #e2e8f0) 100%);
     }
     
     /* Page Title Section */
@@ -108,10 +108,10 @@
     
     /* Main Panel */
     .panel {
-        background: var(--bg-card);
+        background: var(--bg-secondary, white);
         border-radius: var(--radius-xl);
         box-shadow: var(--shadow-lg);
-        border: 1px solid var(--border-color);
+        border: 1px solid var(--border-color, #e2e8f0);
         overflow: hidden;
         position: relative;
     }
@@ -122,13 +122,13 @@
     
     /* Content Box Header */
     .title-hero {
-        background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light) 100%);
+        background: linear-gradient(135deg, var(--bg-hover, #eef2ff) 0%, var(--bg-primary, #f8fafc) 100%);
         padding: 25px 30px;
         margin: 0;
         font-size: 20px;
         font-weight: 700;
-        color: var(--text-primary);
-        border-bottom: 1px solid var(--border-color);
+        color: var(--text-heading, #2f3640);
+        border-bottom: 1px solid var(--border-color, #e2e8f0);
         letter-spacing: -0.3px;
         display: flex;
         align-items: center;
@@ -141,7 +141,7 @@
     }
     
     .title-hero a {
-        color: var(--primary-color);
+        color: var(--accent-color, #6366f1);
         text-decoration: none;
         font-size: 14px;
         font-weight: 600;
@@ -152,7 +152,7 @@
     }
     
     .title-hero a:hover {
-        color: var(--primary-hover);
+        color: var(--accent-hover, #5558e3);
         text-decoration: underline;
     }
     
@@ -163,10 +163,10 @@
     
     /* Form Styling */
     .form-horizontal {
-        background: var(--bg-light);
+        background: var(--bg-hover, #f8fafc);
         padding: 30px;
         border-radius: var(--radius-lg);
-        border: 1px solid var(--border-color);
+        border: 1px solid var(--border-color, #e2e8f0);
     }
     
     .form-group {
@@ -180,7 +180,7 @@
     
     .control-label {
         font-weight: 600;
-        color: var(--text-primary);
+        color: var(--text-primary, #1e293b);
         margin-bottom: 8px;
         font-size: 14px;
         letter-spacing: 0.3px;
@@ -190,22 +190,22 @@
     }
     
     .form-control {
-        border: 2px solid var(--border-color);
-        border-radius: var(--radius-md);
+        border: 2px solid var(--border-color, #e2e8f0);
+        border-radius: var(--radius-md, 8px);
         padding: 12px 16px;
         font-size: 15px;
         transition: var(--transition-base);
-        background: white;
+        background: var(--bg-secondary, white);
     }
     
     .form-control:focus {
-        border-color: var(--primary-color);
+        border-color: var(--accent-color, #6366f1);
         box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
         outline: none;
     }
     
     .form-control::placeholder {
-        color: var(--text-muted);
+        color: var(--text-secondary, #94a3b8);
         font-size: 14px;
     }
     
@@ -276,11 +276,11 @@
     /* Progress Section */
     .progress {
         height: 12px;
-        border-radius: var(--radius-full);
-        background: var(--border-color);
+        border-radius: var(--radius-full, 9999px);
+        background: var(--border-color, #e2e8f0);
         overflow: hidden;
         margin-top: 15px;
-        box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
+        box-shadow: inset 0 1px 3px var(--shadow-color, rgba(0,0,0,0.1));
     }
     
     .progress-bar {
@@ -316,31 +316,31 @@
     }
     
     .alert-success {
-        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
-        color: #065f46;
-        border: 1px solid #6ee7b7;
+        background: linear-gradient(135deg, var(--success-bg, #d1fae5) 0%, var(--success-light, #a7f3d0) 100%);
+        color: var(--success-text, #065f46);
+        border: 1px solid var(--success-border, #6ee7b7);
     }
     
     .alert-success a {
-        color: #065f46;
+        color: var(--success-text, #065f46);
         font-weight: 600;
         text-decoration: underline;
     }
     
     .alert-danger {
-        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
-        color: #991b1b;
-        border: 1px solid #fca5a5;
+        background: linear-gradient(135deg, var(--danger-bg, #fee2e2) 0%, var(--danger-light, #fecaca) 100%);
+        color: var(--danger-text, #991b1b);
+        border: 1px solid var(--danger-border, #fca5a5);
     }
     
     /* Info Box */
     .info-box {
-        background: linear-gradient(135deg, #e0e7ff 0%, #cdd4f9 100%);
-        border: 1px solid #c7d2fe;
-        border-radius: var(--radius-lg);
+        background: linear-gradient(135deg, var(--info-bg, #e0e7ff) 0%, var(--info-light, #cdd4f9) 100%);
+        border: 1px solid var(--info-border, #c7d2fe);
+        border-radius: var(--radius-lg, 12px);
         padding: 20px;
         margin-bottom: 25px;
-        color: var(--primary-color);
+        color: var(--accent-color, #6366f1);
         font-size: 14px;
         line-height: 1.6;
         display: flex;