Alabuga colors update

Изменения:

- Добавлен --accent-dark: #005dac для градиентов

- Обновились цвета с фиолетовых на синие:
.card border: rgba(106, 207, 246, 0.2)
.admin-form input border: rgba(106, 207, 246, 0.3)
.badge background: rgba(106, 207, 246, 0.15)
.secondary border: rgba(106, 207, 246, 0.4)

- Градиент кнопки изменился: var(--accent) → var(--accent-dark)

- Добавились новые компоненты:
Стили для чекбоксов
Сообщения успеха/ошибки (alert)
Варианты бэджей (success/error)
Анимации при наведении

- Улучшенный UX:
Фокус-стили для полей ввода
Плавные переходы
Эффекты при наведении

frontend/src/styles/globals.css

@@ -2,11 +2,12 @@
   color-scheme: dark;
   --bg: #080b1a;
   --bg-panel: #111633;
-  --accent: #6c5ce7;
+  --accent: #00AEEF;
-  --accent-light: #a29bfe;
+  --accent-light: #6ACFF6;
+  --accent-dark: #005dac;
   --text: #f5f6fa;
   --text-muted: #b2bec3;
-  --success: #00b894;
+  --success: #00B894;
   --error: #ff7675;
   font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }
@@ -14,9 +15,11 @@
 body {
   margin: 0;
   padding: 0;
-  background: radial-gradient(circle at 20% 20%, rgba(108, 92, 231, 0.2), transparent),
+  background: radial-gradient(circle at 20% 30%, rgba(106, 207, 246, 0.15), transparent 40%),
-    radial-gradient(circle at 80% 0%, rgba(0, 184, 148, 0.2), transparent),
+              radial-gradient(circle at 80% 20%, rgba(0, 174, 239, 0.1), transparent 30%),
-    var(--bg);
+              radial-gradient(circle at 40% 80%, rgba(0, 93, 172, 0.08), transparent 35%),
+              linear-gradient(135deg, #1a2a75 0%, #004a8c 50%, #1a2a75 100%),
+              var(--bg);
   color: var(--text);
   min-height: 100vh;
   position: relative;
@@ -50,7 +53,7 @@ main {
 
 .card {
   background: rgba(17, 22, 51, 0.85);
-  border: 1px solid rgba(162, 155, 254, 0.2);
+  border: 1px solid rgba(106, 207, 246, 0.2);
   border-radius: 16px;
   padding: 1.5rem;
   backdrop-filter: blur(10px);
@@ -59,7 +62,7 @@ main {
 
 .admin-form {
   display: grid;
-  gap: 1rem;
+  gap: 1.5rem;
 }
 
 .admin-form label {
@@ -67,17 +70,28 @@ main {
   flex-direction: column;
   gap: 0.5rem;
   font-size: 0.9rem;
+  color: var(--accent-light);
 }
 
 .admin-form input,
 .admin-form textarea,
 .admin-form select {
   border-radius: 12px;
-  border: 1px solid rgba(162, 155, 254, 0.3);
+  border: 1px solid rgba(106, 207, 246, 0.3);
   background: rgba(8, 11, 26, 0.6);
   padding: 0.75rem;
   color: var(--text);
   width: 100%;
+  font-family: inherit;
+  transition: all 0.3s ease;
+}
+
+.admin-form input:focus,
+.admin-form textarea:focus,
+.admin-form select:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.2);
 }
 
 .admin-form textarea {
@@ -89,6 +103,16 @@ main {
   flex-direction: row;
   align-items: center;
   gap: 0.5rem;
+  cursor: pointer;
+}
+
+.admin-form .checkbox input[type="checkbox"] {
+  width: auto;
+  accent-color: var(--accent);
+}
+
+.admin-form .checkbox span {
+  color: var(--text);
 }
 
 .grid {
@@ -98,36 +122,86 @@ main {
 }
 
 .badge {
-  background: rgba(162, 155, 254, 0.15);
+  background: rgba(106, 207, 246, 0.15);
   border-radius: 9999px;
   padding: 0.25rem 0.75rem;
   font-size: 0.75rem;
   color: var(--accent-light);
   text-transform: uppercase;
   letter-spacing: 0.08em;
+  display: inline-block;
+  border: 1px solid rgba(106, 207, 246, 0.2);
+}
+
+.badge.success {
+  background: rgba(0, 184, 148, 0.15);
+  color: var(--success);
+  border-color: rgba(0, 184, 148, 0.3);
+}
+
+.badge.error {
+  background: rgba(255, 118, 117, 0.15);
+  color: var(--error);
+  border-color: rgba(255, 118, 117, 0.3);
 }
 
 .primary {
   padding: 0.75rem 1.5rem;
   border-radius: 12px;
   border: none;
-  background: linear-gradient(135deg, var(--accent), #00b894);
+  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
   color: white;
   font-weight: 600;
   cursor: pointer;
+  font-family: inherit;
+  transition: all 0.3s ease;
+}
+
+.primary:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(0, 174, 239, 0.3);
 }
 
 .primary:disabled {
   opacity: 0.4;
   cursor: not-allowed;
+  transform: none !important;
+  box-shadow: none !important;
 }
 
 .secondary {
   padding: 0.75rem 1.5rem;
   border-radius: 12px;
-  border: 1px solid rgba(162, 155, 254, 0.4);
+  border: 1px solid rgba(106, 207, 246, 0.4);
   background: transparent;
   color: var(--text-muted);
   font-weight: 500;
   cursor: pointer;
+  font-family: inherit;
+  transition: all 0.3s ease;
+}
+
+.secondary:hover {
+  border-color: var(--accent-light);
+  color: var(--accent-light);
+  background: rgba(106, 207, 246, 0.1);
+}
+
+.alert {
+  padding: 1rem;
+  border-radius: 12px;
+  margin: 1rem 0;
+  border: 1px solid;
+}
+
+.alert.success {
+  background: rgba(0, 184, 148, 0.1);
+  border-color: rgba(0, 184, 148, 0.3);
+  color: var(--success);
+}
+
+.alert.error {
+  background: rgba(255, 118, 117, 0.1);
+  border-color: rgba(255, 118, 117, 0.3);
+  color: var(--error);
 }