feat: добавлена светлая тема с кнопкой переключения

frontend/admin/admin.css

@@ -29,6 +29,46 @@
     --transition: 0.2s ease;
 }
 
+/* ===== Light Theme ===== */
+[data-theme="light"] {
+    --bg-primary: #e8eaef;
+    --bg-sidebar: rgba(255, 255, 255, 0.88);
+    --bg-card: rgba(255, 255, 255, 0.95);
+    --bg-card-border: rgba(0, 0, 0, 0.22);
+    --bg-input: rgba(0, 0, 0, 0.08);
+    --bg-input-focus: rgba(0, 0, 0, 0.12);
+    --bg-hover: rgba(0, 0, 0, 0.08);
+    --text-primary: #0f172a;
+    --text-secondary: #374151;
+    --text-placeholder: #6b7280;
+    --accent: #6366f1;
+    --accent-hover: #4f46e5;
+    --accent-glow: rgba(99, 102, 241, 0.25);
+    --error: #dc2626;
+    --success: #16a34a;
+    --warning: #d97706;
+}
+
+[data-theme="light"] .form-group select option,
+[data-theme="light"] .filter-row select option {
+    background: #fff;
+    color: #1a1a2e;
+}
+
+[data-theme="light"] .nav-item.active {
+    background: rgba(99, 102, 241, 0.18);
+}
+
+[data-theme="light"] .form-group input,
+[data-theme="light"] .form-group select,
+[data-theme="light"] .filter-row select {
+    border-color: rgba(0, 0, 0, 0.15);
+}
+
+[data-theme="light"] tbody td {
+    border-bottom-color: rgba(0, 0, 0, 0.08);
+}
+
 html {
     font-size: 16px;
     -webkit-font-smoothing: antialiased;
@@ -40,6 +80,7 @@ body {
     color: var(--text-primary);
     min-height: 100vh;
     display: flex;
+    transition: background 0.4s ease, color 0.4s ease;
 }
 
 /* ===== Sidebar ===== */
@@ -55,6 +96,7 @@ body {
     top: 0;
     bottom: 0;
     z-index: 10;
+    transition: background 0.4s ease, border-color 0.4s ease;
 }
 
 .sidebar-header {
@@ -135,12 +177,18 @@ body {
 .topbar {
     padding: 1.5rem 2rem;
     border-bottom: 1px solid var(--bg-card-border);
+    transition: border-color 0.4s ease;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
 }
 
 .topbar h1 {
     font-size: 1.3rem;
     font-weight: 700;
     letter-spacing: -0.02em;
+    flex: 1;
 }
 
 .content {
@@ -156,16 +204,16 @@ body {
     border: 1px solid var(--bg-card-border);
     border-radius: var(--radius-md);
     padding: 1.5rem;
+    transition: background 0.4s ease, border-color 0.4s ease;
 }
 
 .card h2 {
-    font-size: 1rem;
+    font-size: 0.8rem;
     font-weight: 600;
     margin-bottom: 1rem;
     color: var(--text-secondary);
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    font-size: 0.8rem;
 }
 
 /* ===== Create Form ===== */
@@ -462,6 +510,44 @@ tbody tr:hover {
     backdrop-filter: blur(2px);
 }
 
+/* ===== Theme Toggle Button ===== */
+.theme-toggle {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    background: var(--bg-input);
+    border: 1px solid var(--bg-card-border);
+    color: var(--text-primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+    flex-shrink: 0;
+}
+
+.theme-toggle svg {
+    width: 18px;
+    height: 18px;
+    transition: transform 0.4s ease;
+}
+
+.theme-toggle:hover {
+    transform: scale(1.1);
+    box-shadow: 0 4px 16px var(--accent-glow);
+}
+
+.theme-toggle:active {
+    transform: scale(0.95);
+}
+
+.theme-toggle--fixed {
+    position: fixed;
+    top: 1.25rem;
+    right: 1.25rem;
+    z-index: 100;
+}
+
 /* ===== Responsive ===== */
 @media (max-width: 768px) {
     .sidebar {

frontend/admin/index.html

@@ -227,6 +227,7 @@
         </section>
     </main>
 
+    <script src="/theme-toggle.js"></script>
     <script src="admin.js"></script>
 </body>