From 4abba83f969a950d7d9d5f7a26814ddd88f32008 Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Sat, 2 Aug 2025 16:19:28 +0500
Subject: [PATCH] dark mode

---
 .../websiteFunctions/assignPackage.html       |   6 +-
 .../websiteFunctions/createWebsite.html       |  96 ++---
 .../websiteFunctions/deleteWebsite.html       | 110 +++---
 .../websiteFunctions/installJoomla.html       | 153 ++++++++
 .../websiteFunctions/installMagento.html      | 182 ++++++++++
 .../websiteFunctions/installMautic.html       |  99 ++---
 .../websiteFunctions/installPrestaShop.html   |  84 ++---
 .../websiteFunctions/modifyWebsite.html       |  96 ++---
 .../websiteFunctions/suspendWebsite.html      | 120 +++----
 .../templates/websiteFunctions/website.html   | 338 +++++++++---------
 10 files changed, 813 insertions(+), 471 deletions(-)

diff --git a/websiteFunctions/templates/websiteFunctions/assignPackage.html b/websiteFunctions/templates/websiteFunctions/assignPackage.html
index 984abd993..38d157c81 100644
--- a/websiteFunctions/templates/websiteFunctions/assignPackage.html
+++ b/websiteFunctions/templates/websiteFunctions/assignPackage.html
@@ -430,11 +430,11 @@ function deleteAssignment(url) {
                 </button>
             </div>
             <div class="modal-body">
-                <p style="font-size: 14px; color: #2f3640;">
-                    <i class="fas fa-exclamation-triangle" style="color: #ff9800; margin-right: 8px;"></i>
+                <p style="font-size: 14px; color: var(--text-primary, #2f3640);">
+                    <i class="fas fa-exclamation-triangle" style="color: var(--warning-color, #ff9800); margin-right: 8px;"></i>
                     {% trans "Are you sure you want to delete this package assignment?" %}
                 </p>
-                <p style="font-size: 13px; color: #8893a7; margin-top: 10px;">
+                <p style="font-size: 13px; color: var(--text-secondary, #8893a7); margin-top: 10px;">
                     {% trans "The user will no longer have access to this Docker package." %}
                 </p>
             </div>
diff --git a/websiteFunctions/templates/websiteFunctions/createWebsite.html b/websiteFunctions/templates/websiteFunctions/createWebsite.html
index 3b1fd1dc6..df7733882 100644
--- a/websiteFunctions/templates/websiteFunctions/createWebsite.html
+++ b/websiteFunctions/templates/websiteFunctions/createWebsite.html
@@ -22,29 +22,29 @@
     .page-title {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
     .page-subtitle {
         font-size: 14px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     /* Card styles */
     .content-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 30px;
-        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);
         margin-bottom: 25px;
     }
     
     .card-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 25px;
         display: flex;
         align-items: center;
@@ -55,7 +55,7 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
@@ -77,21 +77,21 @@
     .form-control {
         width: 100%;
         padding: 10px 14px;
-        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:hover {
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     .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);
     }
     
@@ -113,8 +113,8 @@
     /* Windows-specific fixes */
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         select.form-control {
-            color: #2f3640 !important;
-            background-color: white !important;
+            color: var(--text-primary, #2f3640) !important;
+            background-color: var(--bg-secondary, white) !important;
         }
     }
     
@@ -124,14 +124,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);
     }
     
     /* Checkbox styles */
@@ -144,15 +144,15 @@
         align-items: center;
         gap: 10px;
         padding: 12px 16px;
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         transition: all 0.2s ease;
         cursor: pointer;
     }
     
     .checkbox-wrapper:hover {
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
         background: #f0f1ff;
     }
     
@@ -161,12 +161,12 @@
         height: 18px;
         border-radius: 4px;
         cursor: pointer;
-        accent-color: #5b5fcf;
+        accent-color: var(--accent-color, #5b5fcf);
     }
     
     .checkbox-label {
         font-size: 14px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         font-weight: 500;
         cursor: pointer;
         user-select: none;
@@ -174,7 +174,7 @@
     }
     
     .checkbox-label a {
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
         text-decoration: none;
         font-weight: 600;
     }
@@ -199,12 +199,12 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         color: white;
     }
     
     .btn-primary:hover {
-        background: #4a4fc4;
+        background: var(--accent-hover, #4a4fc4);
         box-shadow: 0 4px 12px rgba(91,95,207,0.3);
         transform: translateY(-1px);
     }
@@ -217,25 +217,25 @@
     }
     
     .btn-secondary {
-        background: #f8f9ff;
-        color: #5b5fcf;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        color: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .btn-secondary:hover {
         background: #eef0ff;
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     .btn-secondary:disabled {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         color: #ccc;
         cursor: not-allowed;
     }
     
     /* Progress section */
     .progress-section {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         border-radius: 10px;
         padding: 25px;
         margin-top: 20px;
@@ -244,13 +244,13 @@
     .progress-status {
         font-size: 16px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         text-align: center;
         margin-bottom: 20px;
     }
     
     .progress-bar-container {
-        background: #e8e9ff;
+        background: var(--border-color, #e8e9ff);
         height: 8px;
         border-radius: 4px;
         overflow: hidden;
@@ -258,7 +258,7 @@
     }
     
     .progress-bar-fill {
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         height: 100%;
         border-radius: 4px;
         transition: width 0.3s ease;
@@ -275,21 +275,21 @@
     }
     
     .alert-info {
-        background: #e3f2fd;
-        border: 1px solid #bbdefb;
-        color: #1565c0;
+        background: var(--info-bg, #e3f2fd);
+        border: 1px solid var(--info-border, #bbdefb);
+        color: var(--info-text, #1565c0);
     }
     
     .alert-success {
-        background: #e8f5e9;
-        border: 1px solid #c8e6c9;
-        color: #2e7d32;
+        background: var(--success-bg, #e8f5e9);
+        border: 1px solid var(--success-border, #c8e6c9);
+        color: var(--success-text, #2e7d32);
     }
     
     .alert-danger {
-        background: #ffebee;
-        border: 1px solid #ffcdd2;
-        color: #c62828;
+        background: var(--danger-bg, #ffebee);
+        border: 1px solid var(--danger-border, #ffcdd2);
+        color: var(--danger-text, #c62828);
     }
     
     /* Loading spinner */
@@ -298,7 +298,7 @@
         width: 16px;
         height: 16px;
         border: 2px solid #f3f3f3;
-        border-top: 2px solid #5b5fcf;
+        border-top: 2px solid var(--accent-color, #5b5fcf);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         margin-left: 10px;
@@ -319,7 +319,7 @@
     /* Error message */
     .field-error {
         font-size: 12px;
-        color: #dc3545;
+        color: var(--danger-text, #dc3545);
         margin-top: 5px;
     }
     
@@ -425,7 +425,7 @@
                                 <input ng-model="apacheBackend" type="checkbox" id="apacheBackend">
                                 <label for="apacheBackend" class="checkbox-label">
                                     OpenLiteSpeed + Apache (Backend)
-                                    <small style="display: block; color: #8893a7; font-weight: normal; margin-top: 4px;">
+                                    <small style="display: block; color: var(--text-secondary, #8893a7); font-weight: normal; margin-top: 4px;">
                                         {% trans "For Ubuntu 22, AlmaLinux 8 and AlmaLinux 9" %}
                                     </small>
                                 </label>
@@ -437,7 +437,7 @@
                                         Premium Feature
                                         <i class="fas fa-external-link-alt" style="font-size: 10px;"></i>
                                     </a>
-                                    <small style="display: block; color: #8893a7; font-weight: normal; margin-top: 4px;">
+                                    <small style="display: block; color: var(--text-secondary, #8893a7); font-weight: normal; margin-top: 4px;">
                                         {% trans "For Ubuntu 22, AlmaLinux 8 and AlmaLinux 9" %}
                                     </small>
                                 </label>
diff --git a/websiteFunctions/templates/websiteFunctions/deleteWebsite.html b/websiteFunctions/templates/websiteFunctions/deleteWebsite.html
index 8aec3b21d..6d290f40c 100644
--- a/websiteFunctions/templates/websiteFunctions/deleteWebsite.html
+++ b/websiteFunctions/templates/websiteFunctions/deleteWebsite.html
@@ -22,29 +22,29 @@
     .page-title {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
     .page-subtitle {
         font-size: 14px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     /* Card styles */
     .content-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 30px;
-        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);
         margin-bottom: 25px;
     }
     
     .card-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 25px;
         display: flex;
         align-items: center;
@@ -55,7 +55,7 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #dc3545;
+        background: var(--danger-color, #dc3545);
         border-radius: 2px;
     }
     
@@ -77,11 +77,11 @@
     .form-control {
         width: 100%;
         padding: 10px 14px;
-        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;
     }
     
@@ -90,13 +90,13 @@
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
-        background-color: white;
+        background-color: var(--bg-secondary, white);
         background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
         background-repeat: no-repeat;
         background-position: right 10px center;
         background-size: 20px;
         padding-right: 40px;
-        color: #2f3640 !important;
+        color: var(--text-primary, #2f3640) !important;
         font-size: 14px !important;
         line-height: 1.5;
         height: auto;
@@ -105,8 +105,8 @@
     
     /* Ensure option text is visible */
     select.form-control option {
-        color: #2f3640;
-        background-color: white;
+        color: var(--text-primary, #2f3640);
+        background-color: var(--bg-secondary, white);
         padding: 8px;
         font-size: 14px;
     }
@@ -117,31 +117,31 @@
             border: 2px solid;
         }
         select.form-control option {
-            background: white;
-            color: black;
+            background: var(--bg-secondary, white);
+            color: var(--text-primary, black);
         }
     }
     
     .form-control:hover {
-        border-color: #dc3545;
+        border-color: var(--danger-color, #dc3545);
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #dc3545;
+        border-color: var(--danger-color, #dc3545);
         box-shadow: 0 0 0 3px rgba(220,53,69,0.1);
     }
     
     /* Specific focus styles for select */
     select.form-control:focus {
-        background-color: white;
-        color: #2f3640;
+        background-color: var(--bg-secondary, white);
+        color: var(--text-primary, #2f3640);
     }
     
     /* Website selector card */
     .website-selector-card {
-        background: #fff5f5;
-        border: 1px solid #ffdddd;
+        background: var(--danger-bg-light, #fff5f5);
+        border: 1px solid var(--danger-border-light, #ffdddd);
         border-radius: 10px;
         padding: 20px;
         margin-bottom: 25px;
@@ -158,8 +158,8 @@
     
     /* Website details card */
     .website-details-card {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         padding: 20px;
         margin-bottom: 25px;
@@ -171,7 +171,7 @@
         justify-content: space-between;
         align-items: center;
         padding: 12px 0;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
     
     .detail-row:last-child {
@@ -186,14 +186,14 @@
     
     .detail-value {
         font-size: 14px;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         font-weight: 600;
     }
     
     /* Warning box */
     .warning-box {
-        background: #fff3e0;
-        border: 1px solid #ffe0b2;
+        background: var(--warning-bg, #fff3e0);
+        border: 1px solid var(--warning-border, #ffe0b2);
         border-radius: 10px;
         padding: 20px;
         margin-bottom: 25px;
@@ -203,7 +203,7 @@
     }
     
     .warning-icon {
-        color: #ff9800;
+        color: var(--warning-color, #ff9800);
         font-size: 24px;
         flex-shrink: 0;
     }
@@ -215,7 +215,7 @@
     .warning-title {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
@@ -252,12 +252,12 @@
     }
     
     .btn-danger {
-        background: #dc3545;
+        background: var(--danger-color, #dc3545);
         color: white;
     }
     
     .btn-danger:hover {
-        background: #c82333;
+        background: var(--danger-hover, #c82333);
         box-shadow: 0 4px 12px rgba(220,53,69,0.3);
         transform: translateY(-1px);
     }
@@ -270,20 +270,20 @@
     }
     
     .btn-secondary {
-        background: #f8f9ff;
-        color: #5b5fcf;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        color: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .btn-secondary:hover {
         background: #eef0ff;
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     /* Confirmation section */
     .confirmation-section {
-        background: #ffebee;
-        border: 1px solid #ffcdd2;
+        background: var(--danger-bg, #ffebee);
+        border: 1px solid var(--danger-border, #ffcdd2);
         border-radius: 10px;
         padding: 25px;
         margin-top: 25px;
@@ -293,14 +293,14 @@
     
     .confirmation-icon {
         font-size: 48px;
-        color: #dc3545;
+        color: var(--danger-color, #dc3545);
         margin-bottom: 15px;
     }
     
     .confirmation-title {
         font-size: 20px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 10px;
     }
     
@@ -313,7 +313,7 @@
     .confirmation-website {
         font-size: 18px;
         font-weight: 700;
-        color: #dc3545;
+        color: var(--danger-color, #dc3545);
         margin-bottom: 25px;
     }
     
@@ -340,15 +340,15 @@
     }
     
     .alert-danger {
-        background: #ffebee;
-        border: 1px solid #ffcdd2;
-        color: #c62828;
+        background: var(--danger-bg, #ffebee);
+        border: 1px solid var(--danger-border, #ffcdd2);
+        color: var(--danger-text, #c62828);
     }
     
     .alert-success {
-        background: #e8f5e9;
-        border: 1px solid #c8e6c9;
-        color: #2e7d32;
+        background: var(--success-bg, #e8f5e9);
+        border: 1px solid var(--success-border, #c8e6c9);
+        color: var(--success-text, #2e7d32);
     }
     
     /* Loading spinner */
@@ -357,7 +357,7 @@
         width: 16px;
         height: 16px;
         border: 2px solid #f3f3f3;
-        border-top: 2px solid #dc3545;
+        border-top: 2px solid var(--danger-color, #dc3545);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         margin-left: 10px;
@@ -372,7 +372,7 @@
     .button-container {
         margin-top: 30px;
         padding-top: 30px;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-color, #e8e9ff);
     }
     
     /* Hide elements by default */
@@ -396,28 +396,28 @@
     @supports (-ms-ime-align: auto) {
         /* Edge/IE specific styles */
         select.form-control {
-            color: #2f3640 !important;
-            background-color: white !important;
+            color: var(--text-primary, #2f3640) !important;
+            background-color: var(--bg-secondary, white) !important;
         }
     }
     
     /* Fix for Firefox on Windows */
     @-moz-document url-prefix() {
         select.form-control {
-            color: #2f3640 !important;
+            color: var(--text-primary, #2f3640) !important;
             text-shadow: none;
         }
     }
     
     /* Ensure selected option is always visible */
     select.form-control::-ms-value {
-        color: #2f3640;
-        background-color: white;
+        color: var(--text-primary, #2f3640);
+        background-color: var(--bg-secondary, white);
     }
     
     /* Fix for Chrome on Windows */
     select.form-control:not(:focus):not(:hover) {
-        color: #2f3640 !important;
+        color: var(--text-primary, #2f3640) !important;
     }
     
     @media (max-width: 768px) {
diff --git a/websiteFunctions/templates/websiteFunctions/installJoomla.html b/websiteFunctions/templates/websiteFunctions/installJoomla.html
index 314a129b8..bf105f89e 100644
--- a/websiteFunctions/templates/websiteFunctions/installJoomla.html
+++ b/websiteFunctions/templates/websiteFunctions/installJoomla.html
@@ -7,6 +7,159 @@
 {% get_current_language as LANGUAGE_CODE %}
 <!-- Current language: {{ LANGUAGE_CODE }} -->
 
+<style>
+/* Joomla Installation Page Styles */
+.container {
+    background: var(--bg-primary, #f0f0ff);
+    min-height: 100vh;
+    padding: 20px;
+}
+
+#page-title {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+#page-title h2 {
+    color: var(--text-primary, #2f3640);
+    font-size: 32px;
+    font-weight: 700;
+    margin-bottom: 10px;
+}
+
+#page-title p {
+    color: var(--text-secondary, #8893a7);
+    font-size: 16px;
+}
+
+.panel {
+    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);
+    margin: 0 auto;
+    max-width: 800px;
+}
+
+.panel-body {
+    padding: 30px;
+}
+
+.title-hero {
+    color: var(--text-primary, #2f3640);
+    font-size: 24px;
+    font-weight: 700;
+    margin-bottom: 30px;
+    text-align: center;
+}
+
+.example-box-wrapper {
+    background: transparent;
+}
+
+.form-horizontal.bordered-row {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    margin: 0;
+}
+
+.form-group {
+    margin-bottom: 25px;
+}
+
+.control-label {
+    font-weight: 600;
+    color: var(--text-primary, #2f3640);
+    font-size: 14px;
+    margin-bottom: 8px;
+}
+
+.form-control {
+    background: var(--bg-secondary, white);
+    border: 1px solid var(--border-color, #e8e9ff);
+    border-radius: 8px;
+    padding: 12px 16px;
+    font-size: 14px;
+    color: var(--text-primary, #2f3640);
+    transition: all 0.2s ease;
+}
+
+.form-control:focus {
+    outline: none;
+    border-color: var(--accent-color, #5b5fcf);
+    box-shadow: 0 0 0 3px var(--accent-focus, rgba(91,95,207,0.1));
+}
+
+.btn {
+    border-radius: 8px;
+    font-weight: 600;
+    transition: all 0.2s ease;
+}
+
+.btn-primary {
+    background: var(--accent-color, #5b5fcf);
+    border: 1px solid var(--accent-color, #5b5fcf);
+    color: var(--text-on-accent, white);
+}
+
+.btn-primary:hover {
+    background: var(--accent-hover, #4b4fbf);
+    border-color: var(--accent-hover, #4b4fbf);
+    color: var(--text-on-accent, white);
+    box-shadow: 0 2px 4px var(--accent-shadow, rgba(91,95,207,0.3));
+}
+
+.btn-lg {
+    padding: 12px 24px;
+    font-size: 16px;
+}
+
+.progress {
+    background: var(--border-color, #e8e9ff);
+    border-radius: 8px;
+    height: 12px;
+    margin-bottom: 20px;
+}
+
+.progress-bar {
+    background: var(--accent-color, #5b5fcf);
+    border-radius: 8px;
+    color: var(--text-on-accent, white);
+    font-size: 10px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: width 0.4s ease;
+}
+
+.alert {
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.alert-success {
+    background: var(--success-bg, #f0f9ff);
+    border: 1px solid var(--success-border, #bae6fd);
+    color: var(--success-text, #0c4a6e);
+}
+
+.alert-danger {
+    background: var(--danger-bg, #fef2f2);
+    border: 1px solid var(--danger-border, #fecaca);
+    color: var(--danger-text, #991b1b);
+}
+
+.text-center {
+    text-align: center;
+}
+</style>
+
 <div class="container">
 <div id="page-title">
    <h2>{% trans "Install Joomla" %}</h2>
diff --git a/websiteFunctions/templates/websiteFunctions/installMagento.html b/websiteFunctions/templates/websiteFunctions/installMagento.html
index b25f1dc56..5a63fa34a 100644
--- a/websiteFunctions/templates/websiteFunctions/installMagento.html
+++ b/websiteFunctions/templates/websiteFunctions/installMagento.html
@@ -7,6 +7,188 @@
     {% get_current_language as LANGUAGE_CODE %}
     <!-- Current language: {{ LANGUAGE_CODE }} -->
 
+<style>
+/* Magento Installation Page Styles */
+.container {
+    background: var(--bg-primary, #f0f0ff);
+    min-height: 100vh;
+    padding: 20px;
+}
+
+#page-title {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+#page-title h2 {
+    color: var(--text-primary, #2f3640);
+    font-size: 32px;
+    font-weight: 700;
+    margin-bottom: 10px;
+}
+
+#page-title p {
+    color: var(--text-secondary, #8893a7);
+    font-size: 16px;
+}
+
+.panel {
+    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);
+    margin: 0 auto;
+    max-width: 800px;
+}
+
+.panel-body {
+    padding: 30px;
+}
+
+.title-hero {
+    color: var(--text-primary, #2f3640);
+    font-size: 24px;
+    font-weight: 700;
+    margin-bottom: 30px;
+    text-align: center;
+}
+
+.example-box-wrapper {
+    background: transparent;
+}
+
+.form-horizontal.bordered-row {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    margin: 0;
+}
+
+.form-group {
+    margin-bottom: 25px;
+}
+
+.control-label {
+    font-weight: 600;
+    color: var(--text-primary, #2f3640);
+    font-size: 14px;
+    margin-bottom: 8px;
+}
+
+.form-control {
+    background: var(--bg-secondary, white);
+    border: 1px solid var(--border-color, #e8e9ff);
+    border-radius: 8px;
+    padding: 12px 16px;
+    font-size: 14px;
+    color: var(--text-primary, #2f3640);
+    transition: all 0.2s ease;
+}
+
+.form-control:focus {
+    outline: none;
+    border-color: var(--accent-color, #5b5fcf);
+    box-shadow: 0 0 0 3px var(--accent-focus, rgba(91,95,207,0.1));
+}
+
+.checkbox {
+    margin-bottom: 10px;
+}
+
+.checkbox label {
+    color: var(--text-primary, #2f3640);
+    font-weight: 500;
+    margin-bottom: 0;
+}
+
+.checkbox input[type="checkbox"] {
+    margin-right: 8px;
+}
+
+.btn {
+    border-radius: 8px;
+    font-weight: 600;
+    transition: all 0.2s ease;
+}
+
+.btn-primary {
+    background: var(--accent-color, #5b5fcf);
+    border: 1px solid var(--accent-color, #5b5fcf);
+    color: var(--text-on-accent, white);
+}
+
+.btn-primary:hover {
+    background: var(--accent-hover, #4b4fbf);
+    border-color: var(--accent-hover, #4b4fbf);
+    color: var(--text-on-accent, white);
+    box-shadow: 0 2px 4px var(--accent-shadow, rgba(91,95,207,0.3));
+}
+
+.btn-lg {
+    padding: 12px 24px;
+    font-size: 16px;
+}
+
+.progress {
+    background: var(--border-color, #e8e9ff);
+    border-radius: 8px;
+    height: 12px;
+    margin-bottom: 20px;
+}
+
+.progress-bar {
+    background: var(--accent-color, #5b5fcf);
+    border-radius: 8px;
+    color: var(--text-on-accent, white);
+    font-size: 10px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: width 0.4s ease;
+}
+
+.alert {
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.alert-success {
+    background: var(--success-bg, #f0f9ff);
+    border: 1px solid var(--success-border, #bae6fd);
+    color: var(--success-text, #0c4a6e);
+}
+
+.alert-danger {
+    background: var(--danger-bg, #fef2f2);
+    border: 1px solid var(--danger-border, #fecaca);
+    color: var(--danger-text, #991b1b);
+}
+
+.alert-warning {
+    background: var(--warning-bg, #fffbeb);
+    border: 1px solid var(--warning-border, #fed7aa);
+    color: var(--warning-text, #92400e);
+}
+
+.alert a {
+    color: var(--accent-color, #5b5fcf);
+    text-decoration: underline;
+}
+
+.alert a:hover {
+    color: var(--accent-hover, #4b4fbf);
+}
+
+.text-center {
+    text-align: center;
+}
+</style>
+
     <div class="container">
         <div id="page-title">
             <h2>{% trans "Install Magento" %}</h2>
diff --git a/websiteFunctions/templates/websiteFunctions/installMautic.html b/websiteFunctions/templates/websiteFunctions/installMautic.html
index d7e5dab4f..46baea7ba 100644
--- a/websiteFunctions/templates/websiteFunctions/installMautic.html
+++ b/websiteFunctions/templates/websiteFunctions/installMautic.html
@@ -8,36 +8,36 @@
 <!-- Current language: {{ LANGUAGE_CODE }} -->
 
 <style>
-    /* Ultra-Modern CyberPanel Design System */
-    :root {
-        --primary-color: #6366f1;
-        --primary-hover: #5558e3;
-        --primary-light: #eef2ff;
-        --secondary-color: #8b5cf6;
-        --accent-color: #ec4899;
-        --success-color: #10b981;
-        --danger-color: #ef4444;
-        --warning-color: #f59e0b;
-        --info-color: #3b82f6;
+    /* Mautic Installation Page Styles with Dark Mode Support */
+    .mautic-installer {
+        --primary-color: var(--accent-color, #6366f1);
+        --primary-hover: var(--accent-hover, #5558e3);
+        --primary-light: var(--accent-bg, #eef2ff);
+        --secondary-color: var(--purple-color, #8b5cf6);
+        --accent-color-local: var(--accent-color, #ec4899);
+        --success-color-local: var(--success-color, #10b981);
+        --danger-color-local: var(--danger-color, #ef4444);
+        --warning-color-local: var(--warning-color, #f59e0b);
+        --info-color-local: var(--info-color, #3b82f6);
         
-        --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        --bg-gradient: linear-gradient(135deg, var(--accent-color, #667eea) 0%, var(--purple-color, #764ba2) 100%);
         --bg-gradient-alt: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-        --bg-gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+        --bg-gradient-success: linear-gradient(135deg, var(--success-color, #11998e) 0%, #38ef7d 100%);
         
-        --bg-light: #f8fafc;
-        --bg-card: #ffffff;
-        --bg-hover: #f1f5f9;
-        --border-color: #e2e8f0;
-        --border-light: #f1f5f9;
+        --bg-light-local: var(--bg-hover, #f8fafc);
+        --bg-card-local: var(--bg-secondary, #ffffff);
+        --bg-hover-local: var(--bg-hover, #f1f5f9);
+        --border-color-local: var(--border-color, #e2e8f0);
+        --border-light-local: var(--border-light, #f1f5f9);
         
-        --text-primary: #1e293b;
-        --text-secondary: #64748b;
-        --text-muted: #94a3b8;
+        --text-primary-local: var(--text-primary, #1e293b);
+        --text-secondary-local: var(--text-secondary, #64748b);
+        --text-muted-local: var(--text-muted, #94a3b8);
         
-        --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
-        --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
-        --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
-        --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
+        --shadow-sm: 0 1px 3px var(--shadow-color, rgba(0,0,0,0.12)), 0 1px 2px var(--shadow-color, rgba(0,0,0,0.06));
+        --shadow-md: 0 4px 6px -1px var(--shadow-color, rgba(0,0,0,0.1)), 0 2px 4px -1px var(--shadow-color, rgba(0,0,0,0.06));
+        --shadow-lg: 0 10px 15px -3px var(--shadow-color, rgba(0,0,0,0.1)), 0 4px 6px -2px var(--shadow-color, rgba(0,0,0,0.05));
+        --shadow-xl: 0 20px 25px -5px var(--shadow-color, rgba(0,0,0,0.1)), 0 10px 10px -5px var(--shadow-color, rgba(0,0,0,0.04));
         
         --radius-sm: 6px;
         --radius-md: 8px;
@@ -49,16 +49,16 @@
     }
     
     /* Container Styling */
-    .container {
+    .mautic-installer .container {
         max-width: 1200px;
         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(--border-color, #e2e8f0) 100%);
     }
     
     /* Page Title Section */
-    #page-title {
+    .mautic-installer #page-title {
         background: var(--bg-gradient);
         color: white;
         padding: 40px;
@@ -107,28 +107,28 @@
     }
     
     /* Main Panel */
-    .panel {
-        background: var(--bg-card);
+    .mautic-installer .panel {
+        background: var(--bg-card-local);
         border-radius: var(--radius-xl);
         box-shadow: var(--shadow-lg);
-        border: 1px solid var(--border-color);
+        border: 1px solid var(--border-color-local);
         overflow: hidden;
         position: relative;
     }
     
-    .panel-body {
+    .mautic-installer .panel-body {
         padding: 0;
     }
     
     /* Content Box Header */
-    .title-hero {
-        background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light) 100%);
+    .mautic-installer .title-hero {
+        background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light-local) 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-primary-local);
+        border-bottom: 1px solid var(--border-color-local);
         letter-spacing: -0.3px;
         display: flex;
         align-items: center;
@@ -141,19 +141,19 @@
     }
     
     /* Form Wrapper */
-    .example-box-wrapper {
+    .mautic-installer .example-box-wrapper {
         padding: 30px;
     }
     
     /* Form Styling */
-    .form-horizontal {
-        background: var(--bg-light);
+    .mautic-installer .form-horizontal {
+        background: var(--bg-light-local);
         padding: 30px;
         border-radius: var(--radius-lg);
-        border: 1px solid var(--border-color);
+        border: 1px solid var(--border-color-local);
     }
     
-    .form-group {
+    .mautic-installer .form-group {
         margin-bottom: 25px;
         transition: var(--transition-base);
     }
@@ -162,9 +162,9 @@
         transform: translateX(5px);
     }
     
-    .control-label {
+    .mautic-installer .control-label {
         font-weight: 600;
-        color: var(--text-primary);
+        color: var(--text-primary-local);
         margin-bottom: 8px;
         font-size: 14px;
         letter-spacing: 0.3px;
@@ -173,13 +173,14 @@
         gap: 8px;
     }
     
-    .form-control {
-        border: 2px solid var(--border-color);
+    .mautic-installer .form-control {
+        border: 2px solid var(--border-color-local);
         border-radius: var(--radius-md);
         padding: 12px 16px;
         font-size: 15px;
         transition: var(--transition-base);
-        background: white;
+        background: var(--bg-secondary, white);
+        color: var(--text-primary-local);
     }
     
     .form-control:focus {
@@ -188,8 +189,8 @@
         outline: none;
     }
     
-    .form-control::placeholder {
-        color: var(--text-muted);
+    .mautic-installer .form-control::placeholder {
+        color: var(--text-muted-local);
         font-size: 14px;
     }
     
@@ -435,6 +436,7 @@
     }
 </style>
 
+<div class="mautic-installer">
 <div class="container">
     <div id="page-title">
         <h2>
@@ -598,5 +600,6 @@
     </div>
 
 </div>
+</div>
 
 {% endblock %}
\ No newline at end of file
diff --git a/websiteFunctions/templates/websiteFunctions/installPrestaShop.html b/websiteFunctions/templates/websiteFunctions/installPrestaShop.html
index 50c7fb157..89af93225 100644
--- a/websiteFunctions/templates/websiteFunctions/installPrestaShop.html
+++ b/websiteFunctions/templates/websiteFunctions/installPrestaShop.html
@@ -8,36 +8,36 @@
 <!-- Current language: {{ LANGUAGE_CODE }} -->
 
 <style>
-    /* Ultra-Modern CyberPanel Design System */
-    :root {
-        --primary-color: #6366f1;
-        --primary-hover: #5558e3;
-        --primary-light: #eef2ff;
-        --secondary-color: #8b5cf6;
-        --accent-color: #ec4899;
-        --success-color: #10b981;
-        --danger-color: #ef4444;
-        --warning-color: #f59e0b;
-        --info-color: #3b82f6;
+    /* PrestaShop Installation Page Styles with Dark Mode Support */
+    .prestashop-installer {
+        --primary-color: var(--accent-color, #6366f1);
+        --primary-hover: var(--accent-hover, #5558e3);
+        --primary-light: var(--accent-bg, #eef2ff);
+        --secondary-color: var(--purple-color, #8b5cf6);
+        --accent-color-local: var(--accent-color, #ec4899);
+        --success-color-local: var(--success-color, #10b981);
+        --danger-color-local: var(--danger-color, #ef4444);
+        --warning-color-local: var(--warning-color, #f59e0b);
+        --info-color-local: var(--info-color, #3b82f6);
         
-        --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        --bg-gradient: linear-gradient(135deg, var(--accent-color, #667eea) 0%, var(--purple-color, #764ba2) 100%);
         --bg-gradient-alt: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-        --bg-gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+        --bg-gradient-success: linear-gradient(135deg, var(--success-color, #11998e) 0%, #38ef7d 100%);
         
-        --bg-light: #f8fafc;
-        --bg-card: #ffffff;
-        --bg-hover: #f1f5f9;
-        --border-color: #e2e8f0;
-        --border-light: #f1f5f9;
+        --bg-light-local: var(--bg-hover, #f8fafc);
+        --bg-card-local: var(--bg-secondary, #ffffff);
+        --bg-hover-local: var(--bg-hover, #f1f5f9);
+        --border-color-local: var(--border-color, #e2e8f0);
+        --border-light-local: var(--border-light, #f1f5f9);
         
-        --text-primary: #1e293b;
-        --text-secondary: #64748b;
-        --text-muted: #94a3b8;
+        --text-primary-local: var(--text-primary, #1e293b);
+        --text-secondary-local: var(--text-secondary, #64748b);
+        --text-muted-local: var(--text-muted, #94a3b8);
         
-        --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
-        --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
-        --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
-        --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
+        --shadow-sm: 0 1px 3px var(--shadow-color, rgba(0,0,0,0.12)), 0 1px 2px var(--shadow-color, rgba(0,0,0,0.06));
+        --shadow-md: 0 4px 6px -1px var(--shadow-color, rgba(0,0,0,0.1)), 0 2px 4px -1px var(--shadow-color, rgba(0,0,0,0.06));
+        --shadow-lg: 0 10px 15px -3px var(--shadow-color, rgba(0,0,0,0.1)), 0 4px 6px -2px var(--shadow-color, rgba(0,0,0,0.05));
+        --shadow-xl: 0 20px 25px -5px var(--shadow-color, rgba(0,0,0,0.1)), 0 10px 10px -5px var(--shadow-color, rgba(0,0,0,0.04));
         
         --radius-sm: 6px;
         --radius-md: 8px;
@@ -49,16 +49,16 @@
     }
     
     /* Container Styling */
-    .container {
+    .prestashop-installer .container {
         max-width: 1200px;
         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(--border-color, #e2e8f0) 100%);
     }
     
     /* Page Title Section */
-    #page-title {
+    .prestashop-installer #page-title {
         background: var(--bg-gradient);
         color: white;
         padding: 40px;
@@ -107,28 +107,28 @@
     }
     
     /* Main Panel */
-    .panel {
-        background: var(--bg-card);
+    .prestashop-installer .panel {
+        background: var(--bg-card-local);
         border-radius: var(--radius-xl);
         box-shadow: var(--shadow-lg);
-        border: 1px solid var(--border-color);
+        border: 1px solid var(--border-color-local);
         overflow: hidden;
         position: relative;
     }
     
-    .panel-body {
+    .prestashop-installer .panel-body {
         padding: 0;
     }
     
     /* Content Box Header */
-    .title-hero {
-        background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light) 100%);
+    .prestashop-installer .title-hero {
+        background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-light-local) 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-primary-local);
+        border-bottom: 1px solid var(--border-color-local);
         letter-spacing: -0.3px;
         display: flex;
         align-items: center;
@@ -141,19 +141,19 @@
     }
     
     /* Form Wrapper */
-    .example-box-wrapper {
+    .prestashop-installer .example-box-wrapper {
         padding: 30px;
     }
     
     /* Form Styling */
-    .form-horizontal {
-        background: var(--bg-light);
+    .prestashop-installer .form-horizontal {
+        background: var(--bg-light-local);
         padding: 30px;
         border-radius: var(--radius-lg);
-        border: 1px solid var(--border-color);
+        border: 1px solid var(--border-color-local);
     }
     
-    .form-group {
+    .prestashop-installer .form-group {
         margin-bottom: 25px;
         transition: var(--transition-base);
     }
@@ -415,6 +415,7 @@
     }
 </style>
 
+<div class="prestashop-installer">
 <div class="container">
     <div id="page-title">
         <h2>
@@ -608,5 +609,6 @@
     </div>
 
 </div>
+</div>
 
 {% endblock %}
\ No newline at end of file
diff --git a/websiteFunctions/templates/websiteFunctions/modifyWebsite.html b/websiteFunctions/templates/websiteFunctions/modifyWebsite.html
index 841780f1d..7769b4340 100644
--- a/websiteFunctions/templates/websiteFunctions/modifyWebsite.html
+++ b/websiteFunctions/templates/websiteFunctions/modifyWebsite.html
@@ -22,29 +22,29 @@
     .page-title {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
     .page-subtitle {
         font-size: 14px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     /* Card styles */
     .content-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 30px;
-        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);
         margin-bottom: 25px;
     }
     
     .card-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 25px;
         display: flex;
         align-items: center;
@@ -55,7 +55,7 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
@@ -77,11 +77,11 @@
     .form-control {
         width: 100%;
         padding: 10px 14px;
-        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;
     }
     
@@ -90,13 +90,13 @@
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
-        background-color: white;
+        background-color: var(--bg-secondary, white);
         background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b5fcf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
         background-repeat: no-repeat;
         background-position: right 10px center;
         background-size: 20px;
         padding-right: 40px;
-        color: #2f3640 !important;
+        color: var(--text-primary, #2f3640) !important;
         font-size: 14px !important;
         line-height: 1.5;
         height: auto;
@@ -105,8 +105,8 @@
     
     /* Ensure option text is visible */
     select.form-control option {
-        color: #2f3640;
-        background-color: white;
+        color: var(--text-primary, #2f3640);
+        background-color: var(--bg-secondary, white);
         padding: 8px;
         font-size: 14px;
     }
@@ -117,25 +117,25 @@
             border: 2px solid;
         }
         select.form-control option {
-            background: white;
-            color: black;
+            background: var(--bg-secondary, white);
+            color: var(--text-primary, black);
         }
     }
     
     .form-control:hover {
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     .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);
     }
     
     /* Specific focus styles for select */
     select.form-control:focus {
-        background-color: white;
-        color: #2f3640;
+        background-color: var(--bg-secondary, white);
+        color: var(--text-primary, #2f3640);
     }
     
     /* Current value display */
@@ -143,10 +143,10 @@
         display: inline-block;
         margin-top: 8px;
         padding: 6px 12px;
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         border-radius: 6px;
         font-size: 13px;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
         font-weight: 600;
     }
     
@@ -171,12 +171,12 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         color: white;
     }
     
     .btn-primary:hover {
-        background: #4a4fc4;
+        background: var(--accent-hover, #4a4fc4);
         box-shadow: 0 4px 12px rgba(91,95,207,0.3);
         transform: translateY(-1px);
     }
@@ -205,21 +205,21 @@
     }
     
     .alert-info {
-        background: #e3f2fd;
-        border: 1px solid #bbdefb;
-        color: #1565c0;
+        background: var(--info-bg, #e3f2fd);
+        border: 1px solid var(--info-border, #bbdefb);
+        color: var(--info-text, #1565c0);
     }
     
     .alert-success {
-        background: #e8f5e9;
-        border: 1px solid #c8e6c9;
-        color: #2e7d32;
+        background: var(--success-bg, #e8f5e9);
+        border: 1px solid var(--success-border, #c8e6c9);
+        color: var(--success-text, #2e7d32);
     }
     
     .alert-danger {
-        background: #ffebee;
-        border: 1px solid #ffcdd2;
-        color: #c62828;
+        background: var(--danger-bg, #ffebee);
+        border: 1px solid var(--danger-border, #ffcdd2);
+        color: var(--danger-text, #c62828);
     }
     
     /* Loading spinner */
@@ -228,7 +228,7 @@
         width: 16px;
         height: 16px;
         border: 2px solid #f3f3f3;
-        border-top: 2px solid #5b5fcf;
+        border-top: 2px solid var(--accent-color, #5b5fcf);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         margin-left: 10px;
@@ -241,8 +241,8 @@
     
     /* Website selection card */
     .website-selector-card {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         padding: 20px;
         margin-bottom: 25px;
@@ -267,14 +267,14 @@
     /* Divider */
     .form-divider {
         height: 1px;
-        background: #e8e9ff;
+        background: var(--border-color, #e8e9ff);
         margin: 30px 0;
     }
     
     /* Info box */
     .info-box {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 16px;
         margin-bottom: 20px;
@@ -284,7 +284,7 @@
     }
     
     .info-box i {
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
         font-size: 18px;
     }
     
@@ -295,7 +295,7 @@
     .info-box-title {
         font-size: 13px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 4px;
     }
     
@@ -309,7 +309,7 @@
     .button-container {
         margin-top: 30px;
         padding-top: 30px;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-color, #e8e9ff);
     }
     
     /* Modification details section */
@@ -340,28 +340,28 @@
     @supports (-ms-ime-align: auto) {
         /* Edge/IE specific styles */
         select.form-control {
-            color: #2f3640 !important;
-            background-color: white !important;
+            color: var(--text-primary, #2f3640) !important;
+            background-color: var(--bg-secondary, white) !important;
         }
     }
     
     /* Fix for Firefox on Windows */
     @-moz-document url-prefix() {
         select.form-control {
-            color: #2f3640 !important;
+            color: var(--text-primary, #2f3640) !important;
             text-shadow: none;
         }
     }
     
     /* Ensure selected option is always visible */
     select.form-control::-ms-value {
-        color: #2f3640;
-        background-color: white;
+        color: var(--text-primary, #2f3640);
+        background-color: var(--bg-secondary, white);
     }
     
     /* Fix for Chrome on Windows */
     select.form-control:not(:focus):not(:hover) {
-        color: #2f3640 !important;
+        color: var(--text-primary, #2f3640) !important;
     }
     
     @media (max-width: 768px) {
diff --git a/websiteFunctions/templates/websiteFunctions/suspendWebsite.html b/websiteFunctions/templates/websiteFunctions/suspendWebsite.html
index 3d551abc8..1dfd79cb6 100644
--- a/websiteFunctions/templates/websiteFunctions/suspendWebsite.html
+++ b/websiteFunctions/templates/websiteFunctions/suspendWebsite.html
@@ -22,29 +22,29 @@
     .page-title {
         font-size: 28px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
     .page-subtitle {
         font-size: 14px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     /* Card styles */
     .content-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
         padding: 30px;
-        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);
         margin-bottom: 25px;
     }
     
     .card-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 25px;
         display: flex;
         align-items: center;
@@ -55,7 +55,7 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
@@ -77,11 +77,11 @@
     .form-control {
         width: 100%;
         padding: 10px 14px;
-        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;
     }
     
@@ -90,13 +90,13 @@
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
-        background-color: white;
+        background-color: var(--bg-secondary, white);
         background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b5fcf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
         background-repeat: no-repeat;
         background-position: right 10px center;
         background-size: 20px;
         padding-right: 40px;
-        color: #2f3640 !important;
+        color: var(--text-primary, #2f3640) !important;
         font-size: 14px !important;
         line-height: 1.5;
         height: auto;
@@ -105,8 +105,8 @@
     
     /* Ensure option text is visible */
     select.form-control option {
-        color: #2f3640;
-        background-color: white;
+        color: var(--text-primary, #2f3640);
+        background-color: var(--bg-secondary, white);
         padding: 8px;
         font-size: 14px;
     }
@@ -117,31 +117,31 @@
             border: 2px solid;
         }
         select.form-control option {
-            background: white;
-            color: black;
+            background: var(--bg-secondary, white);
+            color: var(--text-primary, black);
         }
     }
     
     .form-control:hover {
-        border-color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
     }
     
     .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);
     }
     
     /* Specific focus styles for select */
     select.form-control:focus {
-        background-color: white;
-        color: #2f3640;
+        background-color: var(--bg-secondary, white);
+        color: var(--text-primary, #2f3640);
     }
     
     /* Website selector card */
     .website-selector-card {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         padding: 20px;
         margin-bottom: 25px;
@@ -169,15 +169,15 @@
     }
     
     .state-badge.active {
-        background: #e8f5e9;
-        color: #2e7d32;
-        border: 1px solid #c8e6c9;
+        background: var(--success-bg, #e8f5e9);
+        color: var(--success-text, #2e7d32);
+        border: 1px solid var(--success-border, #c8e6c9);
     }
     
     .state-badge.suspended {
-        background: #ffebee;
-        color: #c62828;
-        border: 1px solid #ffcdd2;
+        background: var(--danger-bg, #ffebee);
+        color: var(--danger-text, #c62828);
+        border: 1px solid var(--danger-border, #ffcdd2);
     }
     
     /* State selection */
@@ -190,22 +190,22 @@
     .state-option {
         flex: 1;
         padding: 20px;
-        border: 2px solid #e8e9ff;
+        border: 2px solid var(--border-color, #e8e9ff);
         border-radius: 10px;
         text-align: center;
         cursor: pointer;
         transition: all 0.2s ease;
-        background: white;
+        background: var(--bg-secondary, white);
     }
     
     .state-option:hover {
-        border-color: #5b5fcf;
-        background: #f8f9ff;
+        border-color: var(--accent-color, #5b5fcf);
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .state-option.selected {
-        border-color: #5b5fcf;
-        background: #f8f9ff;
+        border-color: var(--accent-color, #5b5fcf);
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .state-option.suspend {
@@ -244,13 +244,13 @@
     .state-option-title {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 5px;
     }
     
     .state-option-desc {
         font-size: 12px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
     }
     
     /* Button styles */
@@ -269,12 +269,12 @@
     }
     
     .btn-primary {
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         color: white;
     }
     
     .btn-primary:hover {
-        background: #4a4fc4;
+        background: var(--accent-hover, #4a4fc4);
         box-shadow: 0 4px 12px rgba(91,95,207,0.3);
         transform: translateY(-1px);
     }
@@ -325,21 +325,21 @@
     }
     
     .alert-danger {
-        background: #ffebee;
-        border: 1px solid #ffcdd2;
-        color: #c62828;
+        background: var(--danger-bg, #ffebee);
+        border: 1px solid var(--danger-border, #ffcdd2);
+        color: var(--danger-text, #c62828);
     }
     
     .alert-success {
-        background: #e8f5e9;
-        border: 1px solid #c8e6c9;
-        color: #2e7d32;
+        background: var(--success-bg, #e8f5e9);
+        border: 1px solid var(--success-border, #c8e6c9);
+        color: var(--success-text, #2e7d32);
     }
     
     .alert-warning {
-        background: #fff3e0;
-        border: 1px solid #ffe0b2;
-        color: #f57c00;
+        background: var(--warning-bg, #fff3e0);
+        border: 1px solid var(--warning-border, #ffe0b2);
+        color: var(--warning-text, #f57c00);
     }
     
     /* Loading spinner */
@@ -348,7 +348,7 @@
         width: 16px;
         height: 16px;
         border: 2px solid #f3f3f3;
-        border-top: 2px solid #5b5fcf;
+        border-top: 2px solid var(--accent-color, #5b5fcf);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         margin-left: 10px;
@@ -361,8 +361,8 @@
     
     /* Info box */
     .info-box {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         padding: 16px;
         margin-bottom: 20px;
@@ -372,7 +372,7 @@
     }
     
     .info-box i {
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
         font-size: 18px;
     }
     
@@ -383,7 +383,7 @@
     .info-box-title {
         font-size: 13px;
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 4px;
     }
     
@@ -401,7 +401,7 @@
     }
     
     .current-state strong {
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         font-weight: 600;
     }
     
@@ -409,7 +409,7 @@
     .button-container {
         margin-top: 30px;
         padding-top: 30px;
-        border-top: 1px solid #e8e9ff;
+        border-top: 1px solid var(--border-color, #e8e9ff);
     }
     
     
@@ -417,28 +417,28 @@
     @supports (-ms-ime-align: auto) {
         /* Edge/IE specific styles */
         select.form-control {
-            color: #2f3640 !important;
-            background-color: white !important;
+            color: var(--text-primary, #2f3640) !important;
+            background-color: var(--bg-secondary, white) !important;
         }
     }
     
     /* Fix for Firefox on Windows */
     @-moz-document url-prefix() {
         select.form-control {
-            color: #2f3640 !important;
+            color: var(--text-primary, #2f3640) !important;
             text-shadow: none;
         }
     }
     
     /* Ensure selected option is always visible */
     select.form-control::-ms-value {
-        color: #2f3640;
-        background-color: white;
+        color: var(--text-primary, #2f3640);
+        background-color: var(--bg-secondary, white);
     }
     
     /* Fix for Chrome on Windows */
     select.form-control:not(:focus):not(:hover) {
-        color: #2f3640 !important;
+        color: var(--text-primary, #2f3640) !important;
     }
     
     @media (max-width: 768px) {
diff --git a/websiteFunctions/templates/websiteFunctions/website.html b/websiteFunctions/templates/websiteFunctions/website.html
index 590fb901c..5ebbe1c25 100644
--- a/websiteFunctions/templates/websiteFunctions/website.html
+++ b/websiteFunctions/templates/websiteFunctions/website.html
@@ -49,23 +49,23 @@
     }
     
     .cyberpanel-website-page .cyber-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
-        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);
         margin-bottom: 25px;
         padding: 25px;
         transition: box-shadow 0.2s;
     }
     
     .cyberpanel-website-page .cyber-card:hover {
-        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+        box-shadow: 0 4px 16px var(--shadow-color-hover, rgba(0,0,0,0.12));
     }
     
     .cyberpanel-website-page .cyber-section-title {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -78,14 +78,14 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
     .cyberpanel-website-page .cyber-btn {
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
-        color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
+        color: var(--accent-color, #5b5fcf);
         padding: 8px 16px;
         border-radius: 8px;
         font-size: 13px;
@@ -99,55 +99,55 @@
     }
     
     .cyberpanel-website-page .cyber-btn:hover {
-        background: #5b5fcf;
-        color: white;
-        border-color: #5b5fcf;
-        box-shadow: 0 2px 4px rgba(91,95,207,0.3);
+        background: var(--accent-color, #5b5fcf);
+        color: var(--text-on-accent, white);
+        border-color: var(--accent-color, #5b5fcf);
+        box-shadow: 0 2px 4px var(--accent-shadow, rgba(91,95,207,0.3));
         text-decoration: none;
     }
     
     .cyberpanel-website-page .cyber-btn.blue { 
-        background: #f0f9ff; 
-        color: #0ea5e9; 
-        border-color: #bae6fd; 
+        background: var(--info-bg, #f0f9ff); 
+        color: var(--info-color, #0ea5e9); 
+        border-color: var(--info-border, #bae6fd); 
     }
     
     .cyberpanel-website-page .cyber-btn.orange { 
-        background: #fff7ed; 
-        color: #ea580c; 
-        border-color: #fed7aa; 
+        background: var(--warning-bg, #fff7ed); 
+        color: var(--warning-color, #ea580c); 
+        border-color: var(--warning-border, #fed7aa); 
     }
     
     .cyberpanel-website-page .cyber-btn.green { 
-        background: #f0fdf4; 
-        color: #16a34a; 
-        border-color: #bbf7d0; 
+        background: var(--success-bg, #f0fdf4); 
+        color: var(--success-color, #16a34a); 
+        border-color: var(--success-border, #bbf7d0); 
     }
     
     .cyberpanel-website-page .cyber-btn.purple { 
-        background: #faf5ff; 
-        color: #9333ea; 
-        border-color: #e9d5ff; 
+        background: var(--purple-bg, #faf5ff); 
+        color: var(--purple-color, #9333ea); 
+        border-color: var(--purple-border, #e9d5ff); 
     }
     
     .cyberpanel-website-page .cyber-table {
         width: 100%;
         border-radius: 8px;
         overflow: hidden;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .cyberpanel-website-page .cyber-table th, 
     .cyberpanel-website-page .cyber-table td {
         padding: 12px 16px;
-        border-bottom: 1px solid #f0f0ff;
+        border-bottom: 1px solid var(--border-light, #f0f0ff);
         font-size: 14px;
     }
     
     .cyberpanel-website-page .cyber-table th {
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         font-weight: 700;
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         border-top: none;
         font-size: 11px;
         text-transform: uppercase;
@@ -159,11 +159,11 @@
     }
     
     .cyberpanel-website-page .cyber-table tr:hover {
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
     }
     
     .cyberpanel-website-page .cyber-progress {
-        background: #e8e9ff;
+        background: var(--border-color, #e8e9ff);
         border-radius: 8px;
         height: 12px;
         width: 100%;
@@ -172,10 +172,10 @@
     }
     
     .cyberpanel-website-page .cyber-progress-bar {
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         height: 100%;
         border-radius: 8px;
-        color: white;
+        color: var(--text-on-accent, white);
         font-size: 10px;
         font-weight: 600;
         display: flex;
@@ -186,14 +186,14 @@
     }
     
     .cyberpanel-website-page .cyber-ssl-box {
-        background: #f0f9ff;
-        color: #0c4a6e;
+        background: var(--info-bg, #f0f9ff);
+        color: var(--info-text, #0c4a6e);
         border-radius: 8px;
         padding: 15px;
         margin-bottom: 15px;
         font-size: 13px;
         font-weight: 500;
-        border: 1px solid #bae6fd;
+        border: 1px solid var(--info-border, #bae6fd);
     }
     
     .cyberpanel-website-page .cyber-resource-row {
@@ -212,10 +212,10 @@
     
     /* Legacy panel styles for old sections */
     .example-box-wrapper {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
-        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);
         margin-bottom: 25px;
     }
     
@@ -232,7 +232,7 @@
     .content-box-header {
         font-size: 16px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 20px;
         display: flex;
         align-items: center;
@@ -245,14 +245,14 @@
         content: '';
         width: 4px;
         height: 24px;
-        background: #5b5fcf;
+        background: var(--accent-color, #5b5fcf);
         border-radius: 2px;
     }
     
     .btn {
-        background: #5b5fcf;
-        border: 1px solid #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        border: 1px solid var(--accent-color, #5b5fcf);
+        color: var(--text-on-accent, white);
         padding: 8px 16px;
         border-radius: 6px;
         font-size: 13px;
@@ -261,20 +261,20 @@
     }
     
     .btn:hover {
-        background: #4b4fbf;
-        border-color: #4b4fbf;
-        color: white;
-        box-shadow: 0 2px 4px rgba(91,95,207,0.3);
+        background: var(--accent-hover, #4b4fbf);
+        border-color: var(--accent-hover, #4b4fbf);
+        color: var(--text-on-accent, white);
+        box-shadow: 0 2px 4px var(--accent-shadow, rgba(91,95,207,0.3));
     }
     
     .btn-success {
-        background: #16a34a;
-        border-color: #16a34a;
+        background: var(--success-color, #16a34a);
+        border-color: var(--success-color, #16a34a);
     }
     
     .btn-success:hover {
-        background: #15803d;
-        border-color: #15803d;
+        background: var(--success-hover, #15803d);
+        border-color: var(--success-hover, #15803d);
     }
     
     .alert {
@@ -286,35 +286,37 @@
     }
     
     .alert-success {
-        background: #f0f9ff;
-        border: 1px solid #bae6fd;
-        color: #0c4a6e;
+        background: var(--success-bg, #f0f9ff);
+        border: 1px solid var(--success-border, #bae6fd);
+        color: var(--success-text, #0c4a6e);
     }
     
     .alert-danger {
-        background: #fef2f2;
-        border: 1px solid #fecaca;
-        color: #991b1b;
+        background: var(--danger-bg, #fef2f2);
+        border: 1px solid var(--danger-border, #fecaca);
+        color: var(--danger-text, #991b1b);
     }
     
     .alert-warning {
-        background: #fffbeb;
-        border: 1px solid #fed7aa;
-        color: #92400e;
+        background: var(--warning-bg, #fffbeb);
+        border: 1px solid var(--warning-border, #fed7aa);
+        color: var(--warning-text, #92400e);
     }
     
     .form-control {
         padding: 8px 12px;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 6px;
         font-size: 14px;
+        background: var(--bg-secondary, white);
+        color: var(--text-primary, #2f3640);
         transition: all 0.2s ease;
     }
     
     .form-control:focus {
         outline: none;
-        border-color: #5b5fcf;
-        box-shadow: 0 0 0 3px rgba(91,95,207,0.1);
+        border-color: var(--accent-color, #5b5fcf);
+        box-shadow: 0 0 0 3px var(--accent-focus, rgba(91,95,207,0.1));
     }
     
     /* General select Windows fix for ALL selectboxes */
@@ -367,22 +369,22 @@
     }
     
     .modal-content {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 12px;
-        border: 1px solid #e8e9ff;
-        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+        border: 1px solid var(--border-color, #e8e9ff);
+        box-shadow: 0 4px 20px var(--modal-shadow, rgba(0,0,0,0.15));
     }
     
     .modal-header {
         padding: 20px 25px 15px;
-        border-bottom: 1px solid #e8e9ff;
+        border-bottom: 1px solid var(--border-color, #e8e9ff);
         border-radius: 12px 12px 0 0;
     }
     
     .modal-title {
         font-size: 18px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin: 0;
     }
     
@@ -394,14 +396,14 @@
         background: none;
         border: none;
         font-size: 24px;
-        color: #8893a7;
+        color: var(--text-secondary, #8893a7);
         cursor: pointer;
         float: right;
         margin-top: -5px;
     }
     
     .close:hover {
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
     }
     
     /* Grid layout for items in sections */
@@ -452,23 +454,23 @@
         align-items: center;
         text-align: left;
         padding: 15px;
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         text-decoration: none;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         transition: all 0.2s ease;
         min-height: 80px;
         gap: 12px;
     }
     
     .panel-body a:hover {
-        background: #e8e9ff;
-        border-color: #5b5fcf;
+        background: var(--border-color, #e8e9ff);
+        border-color: var(--accent-color, #5b5fcf);
         text-decoration: none;
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(91,95,207,0.15);
+        box-shadow: 0 4px 12px var(--accent-shadow-light, rgba(91,95,207,0.15));
     }
     
     .panel-body a img {
@@ -519,24 +521,24 @@
         align-items: center;
         gap: 12px;
         padding: 15px;
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         cursor: pointer;
         transition: all 0.2s ease;
         min-height: 70px;
         text-decoration: none;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         width: 100%;
     }
     
     .content-box-wrapper .row .col-md-3 > a:hover,
     .content-box-wrapper .row .col-md-4 > a:hover,
     .content-box-wrapper .row .col-md-6 > div:hover {
-        background: #e8e9ff;
-        border-color: #5b5fcf;
+        background: var(--border-color, #e8e9ff);
+        border-color: var(--accent-color, #5b5fcf);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(91,95,207,0.15);
+        box-shadow: 0 4px 12px var(--accent-shadow-light, rgba(91,95,207,0.15));
         text-decoration: none;
     }
     
@@ -546,8 +548,8 @@
         align-items: center;
         gap: 12px;
         padding: 15px;
-        background: #f8f9ff;
-        border: 1px solid #e8e9ff;
+        background: var(--bg-hover, #f8f9ff);
+        border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
         cursor: pointer;
         transition: all 0.2s ease;
@@ -556,10 +558,10 @@
     }
     
     .content-box-wrapper .row .col-md-6 .clickable-log:hover {
-        background: #e8e9ff;
-        border-color: #5b5fcf;
+        background: var(--border-color, #e8e9ff);
+        border-color: var(--accent-color, #5b5fcf);
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(91,95,207,0.15);
+        box-shadow: 0 4px 12px var(--accent-shadow-light, rgba(91,95,207,0.15));
     }
     
     /* Icon styling */
@@ -575,13 +577,13 @@
         margin: 0 !important;
         font-size: 14px !important;
         font-weight: 600 !important;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         line-height: 1.2;
     }
     
     .content-box-wrapper .row a:hover .h4,
     .content-box-wrapper .row .clickable-log:hover .h4 {
-        color: #5b5fcf;
+        color: var(--accent-color, #5b5fcf);
     }
     
     @media (max-width: 900px) {
@@ -629,33 +631,33 @@
     
     /* Modal and Form Modal Styling for Rewrite Rules */
     .form-horizontal.bordered-row {
-        background: white;
+        background: var(--bg-secondary, white);
         padding: 30px;
         border-radius: 16px;
-        box-shadow: 0 10px 40px rgba(0,0,0,0.08);
-        border: 1px solid #e8e9ff;
+        box-shadow: 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
+        border: 1px solid var(--border-color, #e8e9ff);
         margin: 20px 0;
     }
     
     /* Rewrite Rules Specific Styling */
     textarea[ng-model="rewriteRules"],
     textarea[ng-model="configData"] {
-        background: #f8fafc;
-        border: 2px solid #e2e8f0;
+        background: var(--bg-code, #f8fafc);
+        border: 2px solid var(--border-color, #e2e8f0);
         border-radius: 12px;
         padding: 16px;
         font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
         font-size: 14px;
         line-height: 1.6;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         min-height: 300px;
     }
     
     textarea[ng-model="rewriteRules"]:focus,
     textarea[ng-model="configData"]:focus {
-        background: white;
-        border-color: #5b5fcf;
-        box-shadow: 0 0 0 4px rgba(91, 95, 207, 0.1);
+        background: var(--bg-secondary, white);
+        border-color: var(--accent-color, #5b5fcf);
+        box-shadow: 0 0 0 4px var(--accent-focus, rgba(91, 95, 207, 0.1));
     }
     
     /* Form group spacing in modal */
@@ -676,22 +678,22 @@
         font-size: 16px;
         font-weight: 600;
         border-radius: 8px;
-        box-shadow: 0 4px 15px rgba(91, 95, 207, 0.2);
+        box-shadow: 0 4px 15px var(--accent-shadow, rgba(91, 95, 207, 0.2));
     }
     
     .btn-primary.btn-lg:hover {
         transform: translateY(-3px);
-        box-shadow: 0 8px 25px rgba(91, 95, 207, 0.3);
+        box-shadow: 0 8px 25px var(--accent-shadow, rgba(91, 95, 207, 0.3));
     }
     
     /* Style for template dropdown */
     .form-horizontal.bordered-row select.form-control {
-        background: #f8fafc;
-        border: 2px solid #e2e8f0;
+        background: var(--bg-code, #f8fafc);
+        border: 2px solid var(--border-color, #e2e8f0);
         border-radius: 8px;
         padding: 12px 16px;
         font-size: 14px;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
@@ -707,8 +709,8 @@
     /* Windows-specific fixes */
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         .form-horizontal.bordered-row select.form-control {
-            color: #1e293b !important;
-            background-color: #f8fafc !important;
+            color: var(--text-primary, #1e293b) !important;
+            background-color: var(--bg-code, #f8fafc) !important;
         }
     }
     
@@ -718,16 +720,16 @@
     }
     
     .form-horizontal.bordered-row select.form-control:focus {
-        background: white;
-        border-color: #5b5fcf;
-        box-shadow: 0 0 0 4px rgba(91, 95, 207, 0.1);
-        color: #1e293b;
+        background: var(--bg-secondary, white);
+        border-color: var(--accent-color, #5b5fcf);
+        box-shadow: 0 0 0 4px var(--accent-focus, rgba(91, 95, 207, 0.1));
+        color: var(--text-primary, #1e293b);
     }
     
     /* Style for label */
     .form-horizontal.bordered-row .control-label {
         font-weight: 600;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         font-size: 14px;
         margin-bottom: 8px;
     }
@@ -846,11 +848,11 @@
     
     /* Quick Actions Bar */
     .quick-actions {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 16px;
         padding: 20px;
         margin-bottom: 30px;
-        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+        box-shadow: 0 4px 20px var(--shadow-color, rgba(0,0,0,0.08));
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -869,14 +871,14 @@
         align-items: center;
         gap: 8px;
         padding: 10px 20px;
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         border: 2px solid transparent;
         border-radius: 10px;
         font-weight: 600;
         font-size: 14px;
         transition: all 0.3s ease;
         text-decoration: none;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         position: relative;
         overflow: hidden;
     }
@@ -909,43 +911,43 @@
     }
     
     .action-btn.git {
-        border-color: #ff6b6b;
-        color: #ff6b6b;
+        border-color: var(--git-color, #ff6b6b);
+        color: var(--git-color, #ff6b6b);
     }
     
     .action-btn.git:hover {
-        background: #ff6b6b;
-        color: white;
+        background: var(--git-color, #ff6b6b);
+        color: var(--text-on-accent, white);
     }
     
     .action-btn.staging {
-        border-color: #4ecdc4;
-        color: #4ecdc4;
+        border-color: var(--staging-color, #4ecdc4);
+        color: var(--staging-color, #4ecdc4);
     }
     
     .action-btn.staging:hover {
-        background: #4ecdc4;
-        color: white;
+        background: var(--staging-color, #4ecdc4);
+        color: var(--text-on-accent, white);
     }
     
     .action-btn.ssh {
-        border-color: #5b5fcf;
-        color: #5b5fcf;
+        border-color: var(--accent-color, #5b5fcf);
+        color: var(--accent-color, #5b5fcf);
     }
     
     .action-btn.ssh:hover {
-        background: #5b5fcf;
-        color: white;
+        background: var(--accent-color, #5b5fcf);
+        color: var(--text-on-accent, white);
     }
     
     .action-btn.stress {
-        border-color: #f39c12;
-        color: #f39c12;
+        border-color: var(--stress-color, #f39c12);
+        color: var(--stress-color, #f39c12);
     }
     
     .action-btn.stress:hover {
-        background: #f39c12;
-        color: white;
+        background: var(--stress-color, #f39c12);
+        color: var(--text-on-accent, white);
     }
     
     /* Modern Resource Cards */
@@ -968,10 +970,10 @@
     }
     
     .resource-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 16px;
         padding: 25px;
-        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+        box-shadow: 0 4px 20px var(--shadow-color, rgba(0,0,0,0.08));
         transition: all 0.3s ease;
         position: relative;
         overflow: hidden;
@@ -989,13 +991,13 @@
     
     .resource-card:hover {
         transform: translateY(-5px);
-        box-shadow: 0 8px 30px rgba(0,0,0,0.12);
+        box-shadow: 0 8px 30px var(--shadow-color-hover, rgba(0,0,0,0.12));
     }
     
     .resource-icon {
         width: 50px;
         height: 50px;
-        background: #f8f9ff;
+        background: var(--bg-hover, #f8f9ff);
         border-radius: 12px;
         display: flex;
         align-items: center;
@@ -1005,28 +1007,28 @@
     }
     
     .resource-card.disk .resource-icon {
-        background: #e8f5ff;
-        color: #2196f3;
+        background: var(--info-bg, #e8f5ff);
+        color: var(--info-color, #2196f3);
     }
     
     .resource-card.bandwidth .resource-icon {
-        background: #f3e5f5;
-        color: #9c27b0;
+        background: var(--purple-bg, #f3e5f5);
+        color: var(--purple-color, #9c27b0);
     }
     
     .resource-card.database .resource-icon {
-        background: #e8f5e9;
-        color: #4caf50;
+        background: var(--success-bg, #e8f5e9);
+        color: var(--success-color, #4caf50);
     }
     
     .resource-card.ftp .resource-icon {
-        background: #fff3e0;
-        color: #ff9800;
+        background: var(--warning-bg, #fff3e0);
+        color: var(--warning-color, #ff9800);
     }
     
     .resource-card.ssl .resource-icon {
-        background: #f0fdf4;
-        color: #10b981;
+        background: var(--success-bg, #f0fdf4);
+        color: var(--success-color, #10b981);
     }
     
     /* SSL Card Special Styling */
@@ -1041,7 +1043,7 @@
     
     .resource-title {
         font-size: 14px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 10px;
         font-weight: 600;
         text-transform: uppercase;
@@ -1051,17 +1053,17 @@
     .resource-value {
         font-size: 28px;
         font-weight: 800;
-        color: #1e293b;
+        color: var(--text-primary, #1e293b);
         margin-bottom: 15px;
     }
     
     .resource-limit {
         font-size: 14px;
-        color: #94a3b8;
+        color: var(--text-muted, #94a3b8);
     }
     
     .resource-progress {
-        background: #f1f5f9;
+        background: var(--border-light, #f1f5f9);
         height: 8px;
         border-radius: 10px;
         overflow: hidden;
@@ -1133,7 +1135,7 @@
     }
     
     .app-card {
-        background: white;
+        background: var(--bg-secondary, white);
         border-radius: 16px;
         padding: 30px;
         text-align: center;
@@ -1143,7 +1145,7 @@
         color: inherit;
         position: relative;
         overflow: hidden;
-        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+        box-shadow: 0 4px 20px var(--shadow-color, rgba(0,0,0,0.1));
     }
     
     .app-card::before {
@@ -1161,7 +1163,7 @@
     
     .app-card:hover {
         transform: translateY(-8px);
-        box-shadow: 0 12px 40px rgba(0,0,0,0.15);
+        box-shadow: 0 12px 40px var(--shadow-color-hover, rgba(0,0,0,0.15));
     }
     
     .app-card:hover::before {
@@ -1214,13 +1216,13 @@
     .app-name {
         font-size: 20px;
         font-weight: 700;
-        color: #2f3640;
+        color: var(--text-primary, #2f3640);
         margin-bottom: 8px;
     }
     
     .app-description {
         font-size: 14px;
-        color: #64748b;
+        color: var(--text-secondary, #64748b);
         margin-bottom: 20px;
         min-height: 40px;
     }
@@ -1234,8 +1236,8 @@
     }
     
     .feature-tag {
-        background: #f0f4ff;
-        color: #5b5fcf;
+        background: var(--accent-bg, #f0f4ff);
+        color: var(--accent-color, #5b5fcf);
         padding: 4px 12px;
         border-radius: 20px;
         font-size: 12px;
@@ -1247,21 +1249,21 @@
         align-items: center;
         gap: 8px;
         padding: 10px 24px;
-        background: #f8f9ff;
-        color: #5b5fcf;
+        background: var(--bg-hover, #f8f9ff);
+        color: var(--accent-color, #5b5fcf);
         border-radius: 8px;
         font-weight: 600;
         font-size: 14px;
         transition: all 0.3s ease;
-        border: 1px solid #e8e9ff;
+        border: 1px solid var(--border-color, #e8e9ff);
     }
     
     .quick-badge {
         position: absolute;
         top: 15px;
         right: 15px;
-        background: #10b981;
-        color: white;
+        background: var(--success-color, #10b981);
+        color: var(--text-on-accent, white);
         padding: 4px 8px;
         border-radius: 6px;
         font-size: 11px;
@@ -1343,18 +1345,18 @@
                             </div>
                             {% endif %}
                             {% if not has_addons %}
-                            <div style="background: #fff3cd; color: #856404; border: 1px solid #ffeeba; border-radius: 8px; padding: 18px; margin-bottom: 18px; text-align: center;">
+                            <div style="background: var(--warning-bg, #fff3cd); color: var(--warning-text, #856404); border: 1px solid var(--warning-border, #ffeeba); border-radius: 8px; padding: 18px; margin-bottom: 18px; text-align: center;">
                                 <strong>This feature requires the CyberPanel Add-ons bundle.</strong><br>
                                 <a href="https://cyberpanel.net/cyberpanel-addons" target="_blank" style="color: #2563eb; text-decoration: underline; font-weight: 600;">Learn more & upgrade</a>
                             </div>
                             <div style="position: relative; width: 100%; height: 400px;">
-                                <div id="xterm-container" style="width:100%;height:400px;background:#000;"></div>
-                                <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; z-index: 10; border-radius: 8px; font-size: 1.2em; color: #888; font-weight: 600;">
+                                <div id="xterm-container" style="width:100%;height:400px;background:var(--terminal-bg, #000);"></div>
+                                <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--overlay-bg, rgba(255,255,255,0.85)); display: flex; align-items: center; justify-content: center; z-index: 10; border-radius: 8px; font-size: 1.2em; color: var(--text-muted, #888); font-weight: 600;">
                                     Web Terminal is disabled. Please upgrade to CyberPanel Add-ons to enable this feature.
                                 </div>
                             </div>
                             {% else %}
-                            <div id="xterm-container" style="width:100%;height:400px;background:#000;"></div>
+                            <div id="xterm-container" style="width:100%;height:400px;background:var(--terminal-bg, #000);"></div>
                             {% endif %}
                         </div>
                     </div>
@@ -1564,7 +1566,7 @@
                                         </a>
                                     </div>
                                     <div class="col-sm-12">
-                                        <table class="table">
+                                        <table class="table cyber-table">
                                             <thead>
                                             <tr>
                                                 <th>Type</th>
@@ -1832,7 +1834,7 @@
 
 
                                     <div class="col-sm-12">
-                                        <table class="table">
+                                        <table class="table cyber-table">
                                             <thead>
                                             <tr>
                                                 <th>Domain</th>