From b0baf472548f6128d66febc0e5e0afb6e9eb1b93 Mon Sep 17 00:00:00 2001
From: usmannasir <usman@cyberpersons.com>
Date: Fri, 29 Aug 2025 23:07:30 +0500
Subject: [PATCH] bug fix: font issues

---
 .../templates/databases/mysqlmanager.html     |  30 +-
 ftp/templates/ftp/createFTPAccount.html       |  26 +-
 .../templates/managePHP/editPHPConfig.html    |  28 +-
 .../managePHP/installExtensions.html          |  26 +-
 .../templates/serverStatus/topProcesses.html  |  28 +-
 .../templates/userManagment/listUsers.html    |  30 +-
 .../websiteFunctions/WPsiteHome.html          | 521 ++++++++++++------
 7 files changed, 448 insertions(+), 241 deletions(-)

diff --git a/databases/templates/databases/mysqlmanager.html b/databases/templates/databases/mysqlmanager.html
index f158ae5cc..d88200dcd 100644
--- a/databases/templates/databases/mysqlmanager.html
+++ b/databases/templates/databases/mysqlmanager.html
@@ -152,7 +152,7 @@
         align-items: center;
         gap: 0.5rem;
         text-decoration: none;
-        font-size: 0.875rem;
+        font-size: 1rem;
     }
     
     .btn-primary:hover {
@@ -175,7 +175,7 @@
         align-items: center;
         gap: 0.5rem;
         text-decoration: none;
-        font-size: 0.875rem;
+        font-size: 1rem;
     }
     
     .btn-secondary:hover {
@@ -232,7 +232,7 @@
     }
     
     .stat-title {
-        font-size: 1rem;
+        font-size: 1.125rem;
         font-weight: 600;
         color: var(--text-secondary);
         text-transform: uppercase;
@@ -260,7 +260,7 @@
     }
     
     .stat-label {
-        font-size: 0.875rem;
+        font-size: 1rem;
         color: var(--text-secondary);
         margin-top: 0.5rem;
     }
@@ -285,7 +285,7 @@
     }
     
     .card-title {
-        font-size: 1.25rem;
+        font-size: 1.5rem;
         font-weight: 600;
         color: var(--text-primary);
         margin: 0;
@@ -312,17 +312,17 @@
         text-align: left;
         font-weight: 600;
         color: var(--text-primary);
-        font-size: 0.875rem;
+        font-size: 1rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
         border-bottom: 2px solid var(--border-color);
         white-space: nowrap;
     }
-    
+
     .processes-table td {
         padding: 1rem;
         color: var(--text-secondary);
-        font-size: 0.875rem;
+        font-size: 1rem;
         border-bottom: 1px solid var(--border-light);
     }
     
@@ -358,7 +358,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 0.75rem;
+        font-size: 0.875rem;
         color: var(--accent-color);
     }
     
@@ -367,7 +367,7 @@
         color: var(--text-primary);
         padding: 0.25rem 0.75rem;
         border-radius: 6px;
-        font-size: 0.75rem;
+        font-size: 0.875rem;
         font-weight: 500;
         font-family: monospace;
     }
@@ -377,14 +377,14 @@
         color: var(--warning-text);
         padding: 0.25rem 0.75rem;
         border-radius: 6px;
-        font-size: 0.75rem;
+        font-size: 0.875rem;
         font-weight: 500;
     }
     
     .state-badge {
         padding: 0.25rem 0.75rem;
         border-radius: 6px;
-        font-size: 0.75rem;
+        font-size: 0.875rem;
         font-weight: 500;
     }
     
@@ -404,7 +404,7 @@
         text-overflow: ellipsis;
         white-space: nowrap;
         font-family: monospace;
-        font-size: 0.825rem;
+        font-size: 1rem;
     }
     
     .progress-bar {
@@ -444,7 +444,7 @@
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
-        font-size: 0.825rem;
+        font-size: 1rem;
     }
     
     .refresh-btn:hover {
@@ -516,7 +516,7 @@
         }
         
         .processes-table {
-            font-size: 0.75rem;
+            font-size: 1rem;
         }
         
         .processes-table th,
diff --git a/ftp/templates/ftp/createFTPAccount.html b/ftp/templates/ftp/createFTPAccount.html
index f24ab3a64..f10fdbd0d 100644
--- a/ftp/templates/ftp/createFTPAccount.html
+++ b/ftp/templates/ftp/createFTPAccount.html
@@ -21,7 +21,7 @@
         }
         
         .page-title {
-            font-size: 2.5rem;
+            font-size: 3rem;
             font-weight: 700;
             color: var(--text-primary, #1e293b);
             margin-bottom: 0.5rem;
@@ -30,9 +30,9 @@
             justify-content: center;
             gap: 1rem;
         }
-        
+
         .page-subtitle {
-            font-size: 1.125rem;
+            font-size: 1.375rem;
             color: var(--text-secondary, #64748b);
             margin-bottom: 0;
         }
@@ -53,7 +53,7 @@
         }
         
         .card-title {
-            font-size: 1.25rem;
+            font-size: 1.5rem;
             font-weight: 600;
             color: var(--text-primary, #1e293b);
             margin: 0;
@@ -76,7 +76,7 @@
             border-radius: 8px;
             color: var(--accent-color, #5b5fcf);
             text-decoration: none;
-            font-size: 0.875rem;
+            font-size: 1rem;
             transition: all 0.3s ease;
             margin-left: auto;
         }
@@ -101,15 +101,15 @@
             margin-bottom: 0.5rem;
             font-weight: 500;
             color: var(--text-primary, #1e293b);
-            font-size: 0.875rem;
+            font-size: 1rem;
         }
-        
+
         .form-control {
             width: 100%;
             padding: 0.75rem 1rem;
             border: 1px solid var(--border-color, #e8e9ff);
             border-radius: 8px;
-            font-size: 0.875rem;
+            font-size: 1rem;
             transition: all 0.3s ease;
             background: var(--bg-secondary, #fff);
         }
@@ -234,7 +234,7 @@
         
         .account-details h3 {
             color: var(--text-primary, #1e293b);
-            font-size: 1.125rem;
+            font-size: 1.375rem;
             font-weight: 600;
             margin-bottom: 1.5rem;
             display: flex;
@@ -276,7 +276,7 @@
             border-radius: 8px;
             padding: 1rem 1.5rem;
             margin-bottom: 1.5rem;
-            font-size: 0.875rem;
+            font-size: 1rem;
             color: var(--info-text-dark, #3730a3);
         }
         
@@ -337,7 +337,7 @@
             padding: 0.75rem 1rem !important;
             border: 1px solid var(--border-color, #e8e9ff) !important;
             border-radius: 8px !important;
-            font-size: 0.875rem !important;
+            font-size: 1rem !important;
             background: var(--bg-secondary, #fff) !important;
         }
         
@@ -432,7 +432,7 @@
                                                    ng-model="ftpUserName" placeholder="john_ftp" required>
                                             <span class="username-suffix">{{ OwnerFTP }}_{$ ftpUserName $}</span>
                                         </div>
-                                        <small style="color: var(--text-secondary, #64748b); margin-top: 0.5rem; display: block; font-size: 0.875rem;">
+                                        <small style="color: var(--text-secondary, #64748b); margin-top: 0.5rem; display: block; font-size: 1rem;">
                                             <i class="fas fa-info-circle"></i>
                                             {% trans "Your FTP username will be prefixed with the owner username" %}
                                         </small>
@@ -467,7 +467,7 @@
                                                 {% trans "Use This Password" %}
                                             </button>
                                         </div>
-                                        <small style="color: var(--text-secondary, #64748b); margin-top: 0.5rem; display: block; font-size: 0.875rem;">
+                                        <small style="color: var(--text-secondary, #64748b); margin-top: 0.5rem; display: block; font-size: 1rem;">
                                             <i class="fas fa-info-circle"></i>
                                             {% trans "Make sure to save this password in a secure location" %}
                                         </small>
diff --git a/managePHP/templates/managePHP/editPHPConfig.html b/managePHP/templates/managePHP/editPHPConfig.html
index 8992ab474..095a436e5 100644
--- a/managePHP/templates/managePHP/editPHPConfig.html
+++ b/managePHP/templates/managePHP/editPHPConfig.html
@@ -105,7 +105,7 @@
         border-radius: 20px;
         color: white;
         text-decoration: none;
-        font-size: 0.875rem;
+        font-size: 1rem;
         transition: all 0.3s ease;
     }
     
@@ -271,7 +271,7 @@
         background: var(--border-color, #e8e9ff);
         padding: 0.25rem 0.5rem;
         border-radius: 4px;
-        font-size: 0.95rem;
+        font-size: 1rem;
         color: var(--accent-color, #667eea);
     }
     
@@ -334,7 +334,7 @@
     }
     
     .switch-label {
-        font-size: 0.875rem;
+        font-size: 1rem;
         font-weight: 500;
         color: var(--text-secondary, #64748b);
         text-transform: uppercase;
@@ -456,7 +456,7 @@
         border: none;
         padding: 0.375rem 0.75rem;
         border-radius: 6px;
-        font-size: 0.875rem;
+        font-size: 1rem;
         cursor: pointer;
         transition: all 0.2s ease;
     }
@@ -471,7 +471,7 @@
         background: transparent;
         color: var(--success-color, #10b981);
         font-family: 'Monaco', 'Consolas', monospace;
-        font-size: 0.95rem;
+        font-size: 1rem;
         border: none;
         outline: none;
         resize: vertical;
@@ -594,7 +594,7 @@
                     <div class="setting-item">
                         <div class="setting-label">
                             <code>display_errors</code>
-                            <span style="font-size: 0.95rem;">{% trans "Show PHP errors to visitors" %}</span>
+                            <span style="font-size: 1rem;">{% trans "Show PHP errors to visitors" %}</span>
                         </div>
                         <div class="setting-control">
                             <div class="switch-wrapper">
@@ -611,7 +611,7 @@
                     <div class="setting-item">
                         <div class="setting-label">
                             <code>file_uploads</code>
-                            <span style="font-size: 0.95rem;">{% trans "Allow file uploads" %}</span>
+                            <span style="font-size: 1rem;">{% trans "Allow file uploads" %}</span>
                         </div>
                         <div class="setting-control">
                             <div class="switch-wrapper">
@@ -628,7 +628,7 @@
                     <div class="setting-item">
                         <div class="setting-label">
                             <code>allow_url_fopen</code>
-                            <span style="font-size: 0.95rem;">{% trans "Allow opening URLs as files" %}</span>
+                            <span style="font-size: 1rem;">{% trans "Allow opening URLs as files" %}</span>
                         </div>
                         <div class="setting-control">
                             <div class="switch-wrapper">
@@ -645,7 +645,7 @@
                     <div class="setting-item">
                         <div class="setting-label">
                             <code>allow_url_include</code>
-                            <span style="font-size: 0.95rem;">{% trans "Allow including URLs" %}</span>
+                            <span style="font-size: 1rem;">{% trans "Allow including URLs" %}</span>
                         </div>
                         <div class="setting-control">
                             <div class="switch-wrapper">
@@ -663,7 +663,7 @@
                     <div class="setting-item">
                         <div class="setting-label">
                             <code>memory_limit</code>
-                            <span style="font-size: 0.95rem;">{% trans "Maximum memory per script" %}</span>
+                            <span style="font-size: 1rem;">{% trans "Maximum memory per script" %}</span>
                         </div>
                         <div class="setting-control">
                             <input ng-model="memory_limit" type="text" class="form-control" 
@@ -674,7 +674,7 @@
                     <div class="setting-item">
                         <div class="setting-label">
                             <code>max_execution_time</code>
-                            <span style="font-size: 0.95rem;">{% trans "Maximum execution time (seconds)" %}</span>
+                            <span style="font-size: 1rem;">{% trans "Maximum execution time (seconds)" %}</span>
                         </div>
                         <div class="setting-control">
                             <input ng-model="max_execution_time" type="text" class="form-control" 
@@ -685,7 +685,7 @@
                     <div class="setting-item">
                         <div class="setting-label">
                             <code>upload_max_filesize</code>
-                            <span style="font-size: 0.95rem;">{% trans "Maximum upload file size" %}</span>
+                            <span style="font-size: 1rem;">{% trans "Maximum upload file size" %}</span>
                         </div>
                         <div class="setting-control">
                             <input ng-model="upload_max_filesize" type="text" class="form-control" 
@@ -696,7 +696,7 @@
                     <div class="setting-item">
                         <div class="setting-label">
                             <code>post_max_size</code>
-                            <span style="font-size: 0.95rem;">{% trans "Maximum POST data size" %}</span>
+                            <span style="font-size: 1rem;">{% trans "Maximum POST data size" %}</span>
                         </div>
                         <div class="setting-control">
                             <input ng-model="post_max_size" type="text" class="form-control" 
@@ -707,7 +707,7 @@
                     <div class="setting-item">
                         <div class="setting-label">
                             <code>max_input_time</code>
-                            <span style="font-size: 0.95rem;">{% trans "Maximum input parsing time (seconds)" %}</span>
+                            <span style="font-size: 1rem;">{% trans "Maximum input parsing time (seconds)" %}</span>
                         </div>
                         <div class="setting-control">
                             <input ng-model="max_input_time" type="text" class="form-control" 
diff --git a/managePHP/templates/managePHP/installExtensions.html b/managePHP/templates/managePHP/installExtensions.html
index 851e9327a..43d095069 100644
--- a/managePHP/templates/managePHP/installExtensions.html
+++ b/managePHP/templates/managePHP/installExtensions.html
@@ -105,7 +105,7 @@
         border-radius: 20px;
         color: var(--text-primary, white);
         text-decoration: none;
-        font-size: 0.875rem;
+        font-size: 1rem;
         transition: all 0.3s ease;
     }
     
@@ -163,7 +163,7 @@
     .form-label {
         font-weight: 500;
         color: var(--text-secondary, #475569);
-        font-size: 0.875rem;
+        font-size: 1rem;
         margin-bottom: 0.5rem;
         display: block;
     }
@@ -173,7 +173,7 @@
         padding: 0.75rem 1rem;
         border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
-        font-size: 0.875rem;
+        font-size: 1rem;
         transition: all 0.3s ease;
         background: var(--bg-secondary, #fff);
     }
@@ -197,7 +197,7 @@
         padding: 0.75rem 1.5rem;
         border-radius: 8px;
         font-weight: 500;
-        font-size: 0.875rem;
+        font-size: 1rem;
         cursor: pointer;
         transition: all 0.3s ease;
         border: none;
@@ -248,7 +248,7 @@
         padding: 0.75rem 1rem 0.75rem 2.5rem;
         border: 1px solid var(--border-color, #e8e9ff);
         border-radius: 8px;
-        font-size: 0.875rem;
+        font-size: 1rem;
         transition: all 0.3s ease;
         background: var(--bg-secondary, white);
         color: var(--text-primary, inherit);
@@ -282,17 +282,17 @@
         text-align: left;
         font-weight: 600;
         color: var(--text-secondary, #475569);
-        font-size: 0.75rem;
+        font-size: 1rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
         border-bottom: 1px solid var(--border-color, #e8e9ff);
     }
-    
+
     .extensions-table td {
         padding: 1rem;
         border-bottom: 1px solid var(--border-light, #f1f5f9);
         color: var(--text-primary, #334155);
-        font-size: 0.875rem;
+        font-size: 1rem;
     }
     
     .extensions-table tbody tr {
@@ -310,7 +310,7 @@
     
     .php-version-badge {
         font-family: 'Monaco', 'Consolas', monospace;
-        font-size: 0.75rem;
+        font-size: 0.875rem;
         background: var(--accent-bg, #e0e7ff);
         color: var(--accent-color, #4c1d95);
         padding: 0.25rem 0.5rem;
@@ -321,7 +321,7 @@
     .status-badge {
         padding: 0.25rem 0.75rem;
         border-radius: 20px;
-        font-size: 0.75rem;
+        font-size: 0.875rem;
         font-weight: 500;
         display: inline-flex;
         align-items: center;
@@ -340,7 +340,7 @@
     
     .btn-sm {
         padding: 0.5rem 1rem;
-        font-size: 0.75rem;
+        font-size: 0.875rem;
     }
     
     .btn-install {
@@ -473,7 +473,7 @@
         }
         
         .extensions-table {
-            font-size: 0.75rem;
+            font-size: 1rem;
         }
         
         .extensions-table th,
@@ -483,7 +483,7 @@
         
         .btn-sm {
             padding: 0.375rem 0.75rem;
-            font-size: 0.7rem;
+            font-size: 0.875rem;
         }
     }
 </style>
diff --git a/serverStatus/templates/serverStatus/topProcesses.html b/serverStatus/templates/serverStatus/topProcesses.html
index f0fe81585..edc6afcda 100644
--- a/serverStatus/templates/serverStatus/topProcesses.html
+++ b/serverStatus/templates/serverStatus/topProcesses.html
@@ -191,7 +191,7 @@
         background: rgba(255, 255, 255, 0.2);
         padding: 0.5rem 1rem;
         border-radius: 20px;
-        font-size: 0.875rem;
+        font-size: 1rem;
         margin-top: 1rem;
     }
     
@@ -245,7 +245,7 @@
     }
     
     .stat-title {
-        font-size: 0.875rem;
+        font-size: 1rem;
         color: var(--text-muted);
         font-weight: 500;
         display: flex;
@@ -284,7 +284,7 @@
     }
     
     .stat-label {
-        font-size: 0.75rem;
+        font-size: 0.875rem;
         color: var(--text-muted);
     }
     
@@ -325,7 +325,7 @@
         padding: 0.5rem 1rem 0.5rem 2.5rem;
         border: none;
         border-radius: 8px;
-        font-size: 0.875rem;
+        font-size: 1rem;
         background: rgba(255, 255, 255, 0.2);
         color: white;
         placeholder-color: rgba(255, 255, 255, 0.7);
@@ -372,15 +372,15 @@
         text-align: left;
         font-weight: 600;
         color: var(--text-secondary);
-        font-size: 0.875rem;
+        font-size: 1rem;
         text-transform: uppercase;
         letter-spacing: 0.05em;
         border-bottom: 1px solid var(--border-color);
     }
-    
+
     .modern-table td {
         padding: 1rem;
-        font-size: 0.875rem;
+        font-size: 1rem;
         color: var(--text-primary);
         border-bottom: 1px solid var(--border-light);
     }
@@ -407,7 +407,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 0.75rem;
+        font-size: 0.875rem;
         font-weight: 600;
         color: var(--accent-color);
     }
@@ -416,7 +416,7 @@
         display: inline-flex;
         padding: 0.25rem 0.75rem;
         border-radius: 6px;
-        font-size: 0.75rem;
+        font-size: 0.875rem;
         font-weight: 500;
     }
     
@@ -463,7 +463,7 @@
     
     .command-text {
         font-family: 'Monaco', 'Consolas', monospace;
-        font-size: 0.75rem;
+        font-size: 0.875rem;
         background: var(--command-bg);
         padding: 0.25rem 0.5rem;
         border-radius: 4px;
@@ -479,7 +479,7 @@
         background: var(--danger-accent);
         color: white;
         border: none;
-        font-size: 0.75rem;
+        font-size: 0.875rem;
         font-weight: 500;
         cursor: pointer;
         transition: all 0.3s ease;
@@ -523,7 +523,7 @@
         padding: 0.25rem 0.5rem;
         background: var(--bg-light);
         border-radius: 4px;
-        font-size: 0.75rem;
+        font-size: 0.875rem;
         gap: 0.25rem;
     }
     
@@ -595,7 +595,7 @@
         }
         
         .table-container {
-            font-size: 0.75rem;
+            font-size: 0.875rem;
         }
         
         .command-text {
@@ -651,7 +651,7 @@
                 </div>
             </div>
             <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e8e9ff;">
-                <div style="font-size: 0.75rem; color: var(--text-muted);">
+                <div style="font-size: 0.875rem; color: var(--text-muted);">
                     <strong>{% trans "Model:" %}</strong> {$ modelName || '-' $}<br>
                     <strong>{% trans "Cache:" %}</strong> {$ cacheSize || '-' $}
                 </div>
diff --git a/userManagment/templates/userManagment/listUsers.html b/userManagment/templates/userManagment/listUsers.html
index 5fd47dc76..8443ab182 100644
--- a/userManagment/templates/userManagment/listUsers.html
+++ b/userManagment/templates/userManagment/listUsers.html
@@ -34,7 +34,7 @@
             border-bottom: 3px solid var(--accent-color, #5b5fcf);
         }
         .section-title {
-            font-size: 2rem;
+            font-size: 2.5rem;
             font-weight: 700;
             color: var(--text-primary, #1a1a2e);
             text-transform: uppercase;
@@ -52,7 +52,7 @@
             border-radius: 8px;
             padding: 0.625rem 1.5rem;
             font-weight: 600;
-            font-size: 0.875rem;
+            font-size: 1rem;
             text-transform: uppercase;
             letter-spacing: 0.5px;
             transition: all 0.3s ease;
@@ -77,7 +77,7 @@
             color: var(--text-primary, #1a1a2e);
             font-weight: 700;
             text-transform: uppercase;
-            font-size: 0.875rem;
+            font-size: 1rem;
             letter-spacing: 0.75px;
             padding: 1.25rem 1rem;
             border: none;
@@ -88,7 +88,7 @@
             padding: 1.25rem 1rem;
             vertical-align: middle;
             color: var(--text-primary, #2f3640);
-            font-size: 0.9375rem;
+            font-size: 1.125rem;
             border-bottom: 1px solid var(--border-color, #f0f0ff);
             line-height: 1.5;
         }
@@ -101,7 +101,7 @@
         }
         .btn-action {
             padding: 0.5rem 0.875rem;
-            font-size: 0.875rem;
+            font-size: 1rem;
             border-radius: 6px;
             font-weight: 600;
             transition: all 0.3s ease;
@@ -159,7 +159,7 @@
         .state-badge {
             padding: 0.375rem 0.875rem;
             border-radius: 20px;
-            font-size: 0.875rem;
+            font-size: 1rem;
             font-weight: 600;
             letter-spacing: 0.3px;
         }
@@ -192,7 +192,7 @@
         .modal-title {
             font-weight: 700;
             color: var(--text-primary, #1a1a2e);
-            font-size: 1.25rem;
+            font-size: 1.5rem;
         }
         .modal-body {
             padding: 2rem;
@@ -200,7 +200,7 @@
         .form-label {
             color: var(--text-primary, #1a1a2e);
             font-weight: 600;
-            font-size: 0.9375rem;
+            font-size: 1.125rem;
             margin-bottom: 0.5rem;
             display: block;
             letter-spacing: 0.3px;
@@ -225,7 +225,7 @@
         .danger-text {
             color: var(--danger-text, #dc2626);
             font-weight: 600;
-            font-size: 1rem;
+            font-size: 1.25rem;
             margin-bottom: 1rem;
             line-height: 1.5;
         }
@@ -257,7 +257,7 @@
                 float: none;
                 text-align: center;
                 margin-bottom: 1rem;
-                font-size: 1.5rem;
+                font-size: 1.875rem;
             }
             .header-actions {
                 float: none;
@@ -265,23 +265,23 @@
                 margin-top: 0;
             }
             .table {
-                font-size: 0.875rem;
+                font-size: 1rem;
             }
             .table thead th {
-                font-size: 0.8125rem;
+                font-size: 0.9375rem;
                 padding: 0.875rem 0.625rem;
             }
             .table tbody td {
                 padding: 0.875rem 0.625rem;
-                font-size: 0.875rem;
+                font-size: 1rem;
             }
             .btn-action {
                 padding: 0.375rem 0.625rem;
-                font-size: 0.8125rem;
+                font-size: 0.9375rem;
                 margin: 0.125rem;
             }
             .state-badge {
-                font-size: 0.8125rem;
+                font-size: 0.9375rem;
                 padding: 0.25rem 0.625rem;
             }
         }
diff --git a/websiteFunctions/templates/websiteFunctions/WPsiteHome.html b/websiteFunctions/templates/websiteFunctions/WPsiteHome.html
index dc39a6861..4e4b1c93f 100644
--- a/websiteFunctions/templates/websiteFunctions/WPsiteHome.html
+++ b/websiteFunctions/templates/websiteFunctions/WPsiteHome.html
@@ -57,21 +57,37 @@
             margin: 0 auto;
             padding: 20px;
             min-height: 100vh;
-            background: var(--bg-primary, linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%));
+            background: var(--bg-primary, linear-gradient(135deg, #f8fafc 0%, #e8f2ff 25%, #f0f9ff 50%, #f8fafc 100%));
+            position: relative;
+        }
+
+        .container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
+                radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.05) 0%, transparent 50%),
+                radial-gradient(circle at 40% 40%, rgba(16, 185, 129, 0.03) 0%, transparent 50%);
+            pointer-events: none;
         }
 
         /* Page Title Section */
         #page-title {
-            background: var(--bg-gradient);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
             color: var(--text-on-primary, white);
-            padding: 40px;
+            padding: 50px 40px;
             border-radius: var(--radius-xl);
-            margin-bottom: 30px;
-            box-shadow: var(--shadow-xl);
+            margin-bottom: 40px;
+            box-shadow: 0 20px 40px rgba(102, 126, 234, 0.25);
             position: relative;
             overflow: hidden;
+            border: 1px solid rgba(255, 255, 255, 0.2);
         }
-        
+
         #page-title::before {
             content: '';
             position: absolute;
@@ -79,72 +95,120 @@
             right: -50%;
             width: 200%;
             height: 200%;
-            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
-            animation: pulse 4s ease-in-out infinite;
+            background:
+                radial-gradient(circle at 30% 70%, rgba(255,255,255,0.15) 0%, transparent 40%),
+                radial-gradient(circle at 70% 30%, rgba(255,255,255,0.1) 0%, transparent 40%);
+            animation: pulse 6s ease-in-out infinite;
         }
-        
+
         @keyframes pulse {
-            0%, 100% { transform: scale(1); opacity: 0.5; }
-            50% { transform: scale(1.1); opacity: 0.3; }
+            0%, 100% {
+                transform: scale(1) rotate(0deg);
+                opacity: 0.6;
+            }
+            33% {
+                transform: scale(1.05) rotate(1deg);
+                opacity: 0.4;
+            }
+            66% {
+                transform: scale(0.98) rotate(-1deg);
+                opacity: 0.5;
+            }
         }
 
         #page-title h2 {
-            font-size: 32px;
-            font-weight: 700;
-            margin-bottom: 10px;
-            letter-spacing: -0.5px;
+            font-size: 36px;
+            font-weight: 800;
+            margin-bottom: 12px;
+            letter-spacing: -0.8px;
             position: relative;
             z-index: 1;
-            background: linear-gradient(to right, #ffffff 0%, #e0e7ff 100%);
+            background: linear-gradient(to right, #ffffff 0%, #f0f8ff 30%, #e6f3ff 70%, #ffffff 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
 
         #page-title p {
-            font-size: 16px;
+            font-size: 18px;
             opacity: 0.95;
             margin: 0;
             position: relative;
             z-index: 1;
             display: flex;
             align-items: center;
-            gap: 10px;
+            gap: 12px;
+            font-weight: 500;
         }
         
         .status-badge {
             display: inline-flex;
             align-items: center;
-            gap: 6px;
-            background: rgba(255, 255, 255, 0.2);
-            padding: 4px 12px;
-            border-radius: var(--radius-full);
-            font-size: 12px;
+            gap: 8px;
+            background: rgba(255, 255, 255, 0.25);
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 13px;
             font-weight: 600;
-            backdrop-filter: blur(10px);
+            letter-spacing: 0.4px;
+            backdrop-filter: blur(15px);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s ease;
         }
-        
+
+        .status-badge:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+        }
+
         .status-badge::before {
             content: '';
-            width: 8px;
-            height: 8px;
-            background: var(--success-color, #10b981);
+            width: 10px;
+            height: 10px;
+            background: linear-gradient(135deg, #10b981, #34d399);
             border-radius: 50%;
             animation: statusPulse 2s ease-in-out infinite;
+            box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
         }
-        
+
         @keyframes statusPulse {
-            0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
-            50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
+            0%, 100% {
+                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
+                transform: scale(1);
+            }
+            50% {
+                box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);
+                transform: scale(1.1);
+            }
         }
 
         /* Main Panel */
         .panel {
-            background: var(--bg-card);
+            background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
             border-radius: var(--radius-lg);
-            box-shadow: var(--shadow-sm);
-            border: 1px solid var(--border-color);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
+            border: 1px solid rgba(226, 232, 240, 0.8);
             overflow: hidden;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .panel:hover {
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
+            transform: translateY(-2px);
+        }
+
+        .panel::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: linear-gradient(90deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
+            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
         }
 
         .panel-body {
@@ -153,24 +217,48 @@
 
         /* Content Box Header */
         .content-box-header {
-            background: var(--bg-light);
-            padding: 20px 30px;
+            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+            padding: 24px 32px;
             margin: 0;
-            font-size: 20px;
-            font-weight: 600;
+            font-size: 22px;
+            font-weight: 700;
             color: var(--text-primary);
-            border-bottom: 1px solid var(--border-color);
-            letter-spacing: 0.3px;
+            border-bottom: 1px solid rgba(226, 232, 240, 0.8);
+            letter-spacing: 0.4px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .content-box-header::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c, #4facfe);
+            opacity: 0.3;
         }
 
         /* Nav Tabs */
         .nav-tabs {
-            background: var(--bg-light);
-            padding: 15px 30px 0;
+            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+            padding: 20px 32px 0;
             border: none;
             display: flex;
-            gap: 10px;
+            gap: 8px;
             flex-wrap: wrap;
+            position: relative;
+        }
+
+        .nav-tabs::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 32px;
+            right: 32px;
+            height: 1px;
+            background: linear-gradient(90deg, rgba(226, 232, 240, 0.5), rgba(148, 163, 184, 0.3), rgba(226, 232, 240, 0.5));
         }
 
         .nav-tabs li {
@@ -181,153 +269,249 @@
             background: transparent;
             border: none;
             border-radius: var(--radius-md) var(--radius-md) 0 0;
-            padding: 12px 24px;
+            padding: 14px 26px;
             color: var(--text-secondary);
-            font-weight: 500;
-            transition: all 0.3s ease;
+            font-weight: 600;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             font-size: 15px;
-            letter-spacing: 0.3px;
+            letter-spacing: 0.4px;
             display: flex;
             align-items: center;
-            gap: 8px;
+            gap: 10px;
+            position: relative;
+            overflow: hidden;
         }
-        
+
+        .nav-tabs li a::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(248,250,252,0.6));
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
         .nav-tabs li a i {
-            font-size: 14px;
+            font-size: 16px;
+            transition: all 0.3s ease;
         }
 
         .nav-tabs li.active a,
         .nav-tabs li a:hover {
-            background: var(--bg-card);
+            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
             color: var(--primary-color);
-            box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
+            box-shadow: 0 -3px 12px rgba(102, 126, 234, 0.15), 0 2px 8px rgba(0,0,0,0.05);
+            transform: translateY(-1px);
+        }
+
+        .nav-tabs li.active a::before,
+        .nav-tabs li a:hover::before {
+            opacity: 1;
+        }
+
+        .nav-tabs li.active a i,
+        .nav-tabs li a:hover i {
+            color: var(--primary-color);
+            transform: scale(1.1);
         }
 
         /* Tab Content */
         .tab-content {
-            padding: 30px;
-            background: var(--bg-card);
+            padding: 40px;
+            background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
             min-height: 400px;
+            position: relative;
+        }
+
+        .tab-content::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background:
+                radial-gradient(circle at 20% 20%, rgba(102, 126, 234, 0.02) 0%, transparent 50%),
+                radial-gradient(circle at 80% 80%, rgba(240, 147, 251, 0.02) 0%, transparent 50%);
+            pointer-events: none;
         }
 
         .tab-pane {
-            animation: fadeIn 0.3s ease;
-        }
-        
-        /* Fix spacing for info sections */
-        .tab-pane .row {
-            background: var(--bg-light);
-            padding: 20px;
-            border-radius: var(--radius-md);
-            margin-bottom: 20px;
+            animation: fadeInUp 0.4s ease;
+            position: relative;
+            z-index: 1;
         }
 
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
+        /* Fix spacing for info sections */
+        .tab-pane .row {
+            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+            padding: 24px;
+            border-radius: var(--radius-lg);
+            margin-bottom: 24px;
+            border: 1px solid rgba(226, 232, 240, 0.6);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+            transition: all 0.3s ease;
+        }
+
+        .tab-pane .row:hover {
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+            transform: translateY(-1px);
+        }
+
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
 
         /* Enhanced Action Links */
         .action-card {
-            background: var(--bg-light);
-            border-radius: var(--radius-lg);
-            padding: 24px;
-            margin-bottom: 30px;
-            box-shadow: var(--shadow-sm);
-            transition: all var(--transition-base);
+            background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+            border-radius: var(--radius-xl);
+            padding: 32px;
+            margin-bottom: 32px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
+            border: 1px solid rgba(226, 232, 240, 0.8);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
         }
-        
+
+        .action-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c, #4facfe);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
         .action-card:hover {
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-md);
+            transform: translateY(-8px) scale(1.02);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);
         }
-        
+
+        .action-card:hover::before {
+            opacity: 0.8;
+        }
+
         .action-card-title {
-            font-size: 18px;
-            font-weight: 600;
+            font-size: 20px;
+            font-weight: 700;
             color: var(--text-primary);
-            margin-bottom: 16px;
+            margin-bottom: 20px;
             display: flex;
             align-items: center;
-            gap: 10px;
+            gap: 12px;
+            letter-spacing: 0.3px;
         }
-        
+
         .action-card-title i {
             color: var(--primary-color);
+            font-size: 24px;
+            transition: all 0.3s ease;
+        }
+
+        .action-card:hover .action-card-title i {
+            transform: rotate(360deg) scale(1.1);
+            color: linear-gradient(135deg, #667eea, #764ba2);
         }
 
         /* Quick Stats Section */
         .quick-stats {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-            gap: 20px;
-            margin-bottom: 30px;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 24px;
+            margin-bottom: 40px;
         }
-        
+
         .stat-card {
-            background: var(--bg-card);
-            border-radius: var(--radius-lg);
-            padding: 25px;
+            background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+            border-radius: var(--radius-xl);
+            padding: 32px;
             position: relative;
             overflow: hidden;
-            transition: var(--transition-base);
-            border: 1px solid var(--border-color);
-            box-shadow: var(--shadow-sm);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            border: 1px solid rgba(226, 232, 240, 0.8);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
         }
-        
+
         .stat-card::before {
             content: '';
             position: absolute;
-            top: -50%;
-            right: -30%;
-            width: 150px;
-            height: 150px;
-            background: var(--bg-gradient);
-            opacity: 0.1;
+            top: -30%;
+            right: -20%;
+            width: 120px;
+            height: 120px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+            opacity: 0.08;
             border-radius: 50%;
-            transition: var(--transition-base);
+            transition: all 0.4s ease;
         }
-        
+
         .stat-card:hover {
-            transform: translateY(-5px);
-            box-shadow: var(--shadow-lg);
-            border-color: var(--primary-color);
+            transform: translateY(-8px) scale(1.02);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);
+            border-color: rgba(102, 126, 234, 0.4);
         }
-        
+
         .stat-card:hover::before {
-            transform: scale(1.2);
-            opacity: 0.15;
+            transform: scale(1.3) rotate(10deg);
+            opacity: 0.12;
         }
         
         .stat-icon {
-            width: 50px;
-            height: 50px;
-            background: var(--bg-gradient);
-            border-radius: var(--radius-md);
+            width: 60px;
+            height: 60px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+            border-radius: var(--radius-lg);
             display: flex;
             align-items: center;
             justify-content: center;
-            margin-bottom: 15px;
-            font-size: 24px;
-            color: var(--text-on-primary, white);
-            box-shadow: var(--shadow-md);
-        }
-        
-        .stat-value {
+            margin-bottom: 20px;
             font-size: 28px;
-            font-weight: 700;
-            color: var(--text-primary);
-            margin: 0 0 5px 0;
-            line-height: 1;
+            color: var(--text-on-primary, white);
+            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
+            transition: all 0.3s ease;
         }
-        
+
+        .stat-card:hover .stat-icon {
+            transform: scale(1.1) rotate(5deg);
+            box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
+        }
+
+        .stat-value {
+            font-size: 36px;
+            font-weight: 800;
+            color: var(--text-primary);
+            margin: 0 0 8px 0;
+            line-height: 1;
+            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            letter-spacing: -0.5px;
+        }
+
         .stat-label {
-            font-size: 14px;
+            font-size: 15px;
             color: var(--text-secondary);
             margin: 0;
-            font-weight: 500;
+            font-weight: 600;
             text-transform: uppercase;
-            letter-spacing: 0.5px;
+            letter-spacing: 0.8px;
+            opacity: 0.8;
         }
         
         #WPVersion {
@@ -509,23 +693,24 @@
 
         /* Enhanced Buttons */
         .btn {
-            padding: 12px 28px;
-            border-radius: var(--radius-md);
-            font-weight: 600;
-            transition: all var(--transition-base);
+            padding: 14px 32px;
+            border-radius: var(--radius-lg);
+            font-weight: 700;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
             border: none;
-            font-size: 14px;
-            letter-spacing: 0.3px;
+            font-size: 15px;
+            letter-spacing: 0.5px;
             display: inline-flex;
             align-items: center;
             justify-content: center;
-            gap: 10px;
+            gap: 12px;
             position: relative;
             overflow: hidden;
             cursor: pointer;
             text-decoration: none;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
         }
-        
+
         .btn::before {
             content: '';
             position: absolute;
@@ -534,80 +719,102 @@
             width: 0;
             height: 0;
             border-radius: 50%;
-            background: rgba(255, 255, 255, 0.2);
+            background: rgba(255, 255, 255, 0.25);
             transform: translate(-50%, -50%);
-            transition: width 0.6s, height 0.6s;
+            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+            z-index: 0;
         }
-        
+
         .btn:active::before {
-            width: 300px;
-            height: 300px;
+            width: 400px;
+            height: 400px;
         }
-        
+
         .btn i {
-            font-size: 16px;
-            transition: var(--transition-base);
+            font-size: 18px;
+            transition: all 0.3s ease;
+            position: relative;
+            z-index: 1;
+        }
+
+        .btn span {
+            position: relative;
+            z-index: 1;
         }
 
         .btn-primary {
-            background: var(--bg-gradient);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
             color: var(--text-on-primary, white);
-            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
+            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
+            border: 1px solid rgba(255, 255, 255, 0.2);
         }
 
         .btn-primary:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
+            transform: translateY(-4px) scale(1.05);
+            box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5);
+            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 25%, #d53f8c 50%, #e53e3e 75%, #3182ce 100%);
             color: var(--text-on-primary, white);
         }
-        
+
         .btn-primary:hover i {
-            transform: rotate(360deg);
+            transform: rotate(360deg) scale(1.2);
         }
 
         .btn-danger {
-            background: var(--danger-color);
+            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
             color: var(--text-on-primary, white);
+            box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
         }
 
         .btn-danger:hover {
-            background: var(--danger-color, #dc2626);
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-md);
+            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+            transform: translateY(-3px) scale(1.02);
+            box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
+            color: var(--text-on-primary, white);
         }
 
         .btn-default {
-            background: var(--bg-light);
+            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
             color: var(--text-primary);
-            border: 1px solid var(--border-color);
+            border: 1px solid rgba(226, 232, 240, 0.8);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
         }
 
         .btn-default:hover {
-            background: var(--bg-primary, white);
-            box-shadow: var(--shadow-sm);
+            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
             transform: translateY(-2px);
+            border-color: rgba(102, 126, 234, 0.3);
         }
 
         .btn-outline-primary {
             background: transparent;
             color: var(--primary-color);
             border: 2px solid var(--primary-color);
+            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
         }
 
         .btn-outline-primary:hover {
-            background: var(--primary-color);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: var(--text-on-primary, white);
+            border-color: transparent;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
         }
 
         .btn-outline-danger {
             background: transparent;
             color: var(--danger-color);
             border: 2px solid var(--danger-color);
+            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
         }
 
         .btn-outline-danger:hover {
-            background: var(--danger-color);
+            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
             color: var(--text-on-primary, white);
+            border-color: transparent;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
         }
 
         /* Site Settings Section */