UI redisign

backend/public/css/style.css

@@ -39,30 +39,59 @@ td {
 }
 
 button {
-    background: #3b82f6;
+    background: #2563eb;
     color: white;
-    border: none;
-    border-radius: 4px;
-    padding: 6px 10px;
+    border: 1px solid #2563eb;
+    border-radius: 8px;
+    padding: 7px 12px;
     margin: 2px;
     cursor: pointer;
+    font-weight: 600;
+    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
 }
 
 button:hover {
     background: #1e40af;
+    border-color: #1e40af;
+    transform: translateY(-1px);
 }
 
 button.btn-small{
     font-size:11px;
     padding:4px 8px;
+    border-radius:999px;
+}
+
+button.btn-secondary{
+    background:#e2e8f0;
+    color:#0f172a;
+    border-color:#cbd5e1;
+}
+
+button.btn-secondary:hover{
+    background:#cbd5e1;
+    border-color:#94a3b8;
 }
 
 button.btn-danger{
     background:#dc2626;
+    border-color:#dc2626;
 }
 
 button.btn-danger:hover{
     background:#b91c1c;
+    border-color:#b91c1c;
+}
+
+button.btn-ghost{
+    background:transparent;
+    color:#1e3a8a;
+    border-color:#bfdbfe;
+}
+
+button.btn-ghost:hover{
+    background:#dbeafe;
+    border-color:#93c5fd;
 }
 
 input, textarea {
@@ -346,6 +375,39 @@ body.dark .modal-meta{
     color:#94a3b8;
 }
 
+body.dark button{
+    background:#2563eb;
+    border-color:#2563eb;
+    color:white;
+}
+
+body.dark button:hover{
+    background:#1d4ed8;
+    border-color:#1d4ed8;
+}
+
+body.dark button.btn-secondary{
+    background:#334155;
+    color:#e5e7eb;
+    border-color:#475569;
+}
+
+body.dark button.btn-secondary:hover{
+    background:#475569;
+    border-color:#64748b;
+}
+
+body.dark button.btn-ghost{
+    background:transparent;
+    color:#bfdbfe;
+    border-color:#334155;
+}
+
+body.dark button.btn-ghost:hover{
+    background:#1e293b;
+    border-color:#475569;
+}
+
 body.dark .domain-name,
 body.dark .subdomain-name{
     color:#f8fafc;