diff --git "a/app.py" "b/app.py"
--- "a/app.py"
+++ "b/app.py"
@@ -1,4 +1,4 @@
-from flask import Flask, render_template_string, request, redirect, url_for, flash, send_file
+from flask import Flask, render_template_string, request, redirect, url_for, send_file, flash
 import json
 import os
 import logging
@@ -8,14 +8,12 @@ from datetime import datetime
 from huggingface_hub import HfApi, hf_hub_download
 from huggingface_hub.utils import RepositoryNotFoundError
 from werkzeug.utils import secure_filename
-import uuid
-import html
 import random
+import uuid
 
 app = Flask(__name__)
-app.secret_key = os.getenv("FLASK_SECRET_KEY", "zzirix_secret_key_for_cart")
+app.secret_key = os.getenv("FLASK_SECRET_KEY", "zzirix_secret_key_for_cart_and_flashes")
 DATA_FILE = 'data_zzirix.json'
-
 REPO_ID = "Kgshop/clients"
 HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
 HF_TOKEN_READ = os.getenv("HF_TOKEN_READ") or HF_TOKEN_WRITE
@@ -32,9 +30,6 @@ def initialize_data_structure(data):
     data.setdefault('products', [])
     data.setdefault('orders', {})
 
-    if any(p.get('category') == 'Без категории' for p in data['products']) and 'Без категории' not in data['categories']:
-        data['categories'].append('Без категории')
-
     for product in data['products']:
         if 'id' not in product:
             product['id'] = str(uuid.uuid4())
@@ -45,40 +40,49 @@ def initialize_data_structure(data):
         product.setdefault('price', 0.0)
         product.setdefault('colors', [])
         product.setdefault('models', [])
-        product.setdefault('photos', [])
-        product.setdefault('in_stock', True)
-        product.setdefault('is_top', False)
-        
-        if not product['photos'] and 'media' in product and product['media']:
-            product['photos'] = [m['filename'] for m in product['media'] if m['type'] == 'photo']
-        
+
+        if 'photos' not in product:
+            if 'media' in product:
+                product['photos'] = [item['filename'] for item in product['media'] if item['type'] == 'photo']
+                del product['media']
+            else:
+                product['photos'] = []
+        if not isinstance(product['photos'], list):
+            product['photos'] = []
+            
         if 'media' in product:
             del product['media']
+            
+        product.pop('in_stock', None)
+        product.pop('is_top', None)
 
-    data['categories'] = sorted(list(set(data['categories'])), key=lambda x: (x != 'Без категории', x))
-    
     return data
 
 def load_data():
     try:
-        if not os.path.exists(DATA_FILE) or os.path.getsize(DATA_FILE) == 0:
-            logging.info(f"{DATA_FILE} не найден или пуст, попытка загрузки с HF.")
+        try:
             download_db_from_hf()
+        except RepositoryNotFoundError:
+            logging.warning("Hugging Face repository not found or inaccessible. Proceeding with local data or empty structure.")
+            if not os.path.exists(DATA_FILE):
+                with open(DATA_FILE, 'w', encoding='utf-8') as f:
+                    json.dump(initialize_data_structure({}), f)
+        except Exception as e:
+            logging.error(f"Error during initial HF download: {e}. Proceeding with local data or empty structure.")
+            if not os.path.exists(DATA_FILE):
+                with open(DATA_FILE, 'w', encoding='utf-8') as f:
+                    json.dump(initialize_data_structure({}), f)
 
         if os.path.exists(DATA_FILE) and os.path.getsize(DATA_FILE) > 0:
             with open(DATA_FILE, 'r', encoding='utf-8') as file:
                 data = json.load(file)
-            logging.info("Данные успешно загружены из JSON.")
+                logging.info("Данные успешно загружены из JSON.")
         else:
             data = {'products': [], 'categories': [], 'orders': {}}
-            logging.warning("Файл базы данных пуст или не существует после всех попыток, создается пустая структура.")
-            
+        
         return initialize_data_structure(data)
-    except (json.JSONDecodeError, FileNotFoundError) as e:
-        logging.error(f"Ошибка при чтении {DATA_FILE}: {e}. Создается пустая структура.")
-        return initialize_data_structure({})
-    except RepositoryNotFoundError as e:
-        logging.error(f"Репозиторий HF не найден: {e}. Создается локальная база данных.")
+    except (json.JSONDecodeError, FileNotFoundError):
+        logging.error(f"Ошибка при чтении {DATA_FILE}. Создается пустая структура.")
         return initialize_data_structure({})
     except Exception as e:
         logging.error(f"Ошибка при загрузке данных: {e}")
@@ -90,8 +94,8 @@ def save_data(data):
         with open(temp_file, 'w', encoding='utf-8') as file:
             json.dump(data, file, ensure_ascii=False, indent=4)
         os.replace(temp_file, DATA_FILE)
+        logging.info("Данные успешно сохранены в JSON.")
         upload_db_to_hf()
-        logging.info("Данные сохранены и выгружены в HF")
     except Exception as e:
         logging.error(f"Ошибка при сохранении данных: {e}")
         if os.path.exists(temp_file):
@@ -110,11 +114,11 @@ def upload_db_to_hf():
             repo_id=REPO_ID,
             repo_type="dataset",
             token=HF_TOKEN_WRITE,
-            commit_message=f"Резервная копия {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
+            commit_message=f"Автоматическое резервное копирование базы данных {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
         )
-        logging.info("База данных выгружена в Hugging Face")
+        logging.info("Резервная копия JSON базы успешно загружена на Hugging Face.")
     except Exception as e:
-        logging.error(f"Ошибка при выгрузке базы данных: {e}")
+        logging.error(f"Ошибка при загрузке резервной копии: {e}")
 
 def download_db_from_hf():
     if not HF_TOKEN_READ:
@@ -133,1560 +137,1005 @@ def download_db_from_hf():
             local_dir_use_symlinks=False,
             force_download=True
         )
-        logging.info("База данных загружена с Hugging Face")
-    except RepositoryNotFoundError:
-        logging.error(f"Репозиторий {REPO_ID} не найден. Пропускаем загрузку.")
-        if not os.path.exists(DATA_FILE):
-            logging.info("Создается пустой файл базы данных, так как загрузка не удалась и файл не существует.")
-            with open(DATA_FILE, 'w', encoding='utf-8') as f:
-                json.dump(initialize_data_structure({}), f)
+        logging.info("JSON база успешно скачана из Hugging Face.")
+    except RepositoryNotFoundError as e:
+        logging.error(f"Репозиторий не найден: {e}. Пропускаем скачивание.")
+        raise
     except Exception as e:
-        logging.error(f"Ошибка при загрузке базы данных: {e}")
-        if not os.path.exists(DATA_FILE):
-            logging.info("Создается пустой файл базы данных, так как загрузка не удалась и файл не существует.")
-            with open(DATA_FILE, 'w', encoding='utf-8') as f:
-                json.dump(initialize_data_structure({}), f)
+        logging.error(f"Ошибка при скачивании JSON базы: {e}. Пропускаем скачивание.")
+        raise
 
 def periodic_backup():
     while True:
-        time.sleep(3600)
-        logging.info("Запуск периодического резервного копирования.")
         try:
-            data = load_data()
-            save_data(data)
+            upload_db_to_hf()
         except Exception as e:
-            logging.error(f"Ошибка во время периодического резервного копирования: {e}")
+            logging.error(f"Ошибка при выполнении периодического резервного копирования: {e}")
+        time.sleep(3600) # Backup every 1 hour
 
 def allowed_file(filename):
     return '.' in filename and \
-           filename.rsplit('.', 1)[1].lower() in {'png', 'jpg', 'jpeg', 'gif', 'webp', 'mp4', 'mov', 'webm'}
-
-BASE_STYLE = '''
-:root {
-    --primary-color: #3B82F6;
-    --primary-dark-color: #2563eb;
-    --accent-color: #10b981;
-    --accent-dark-color: #059669;
-    --danger-color: #ef4444;
-    --danger-dark-color: #dc2626;
-    --background-light: linear-gradient(135deg, #f0f2f5, #e0e5ec);
-    --background-dark: linear-gradient(135deg, #1f2937, #374151);
-    --card-background-light: #ffffff;
-    --card-background-dark: #2d3748;
-    --text-color-light: #2d3748;
-    --text-color-dark: #e2e8f0;
-    --secondary-text-color-light: #718096;
-    --secondary-text-color-dark: #a0aec0;
-    --border-color-light: #e2e8f0;
-    --border-color-dark: #4a5568;
-    --shadow-light: 0 8px 25px rgba(0, 0, 0, 0.1);
-    --shadow-hover-light: 0 12px 35px rgba(0, 0, 0, 0.18);
-    --shadow-dark: 0 8px 25px rgba(0, 0, 0, 0.35);
-    --shadow-hover-dark: 0 12px 35px rgba(0, 0, 0, 0.5);
-    --border-radius-large: 22px;
-    --border-radius-medium: 12px;
-    --border-radius-small: 8px;
-}
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-body {
-    font-family: 'Roboto', sans-serif;
-    background: var(--background-light);
-    color: var(--text-color-light);
-    line-height: 1.6;
-    transition: background 0.3s, color 0.3s;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
-body.dark-mode {
-    background: var(--background-dark);
-    color: var(--text-color-dark);
-}
-.container {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 30px;
-    flex-grow: 1;
-}
-.header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px 30px;
-    border-bottom: none;
-    margin-bottom: 30px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-    border-radius: var(--border-radius-large);
-    background: var(--card-background-light);
-}
-body.dark-mode .header {
-    border-bottom-color: var(--border-color-dark);
-    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
-    background: var(--card-background-dark);
-}
-.header-info {
-    display: flex;
-    align-items: center;
-}
-.header-logo {
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-    object-fit: cover;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    margin-right: 15px;
-}
-.header-logo:hover {
-    transform: scale(1.08);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
-}
-.header h1 {
-    font-size: 2rem;
-    font-weight: 800;
-    color: var(--primary-color);
-}
-.theme-toggle {
-    background: none;
-    border: none;
-    font-size: 1.8rem;
-    cursor: pointer;
-    color: var(--secondary-text-color-light);
-    transition: color 0.3s ease, transform 0.2s ease;
-    padding: 5px;
-}
-body.dark-mode .theme-toggle {
-    color: var(--secondary-text-color-dark);
-}
-.theme-toggle:hover {
-    color: var(--accent-color);
-    transform: rotate(30deg);
-}
-
-.flash {
-    padding: 18px;
-    margin-bottom: 25px;
-    border-radius: var(--border-radius-medium);
-    font-weight: 500;
-    border: 1px solid transparent;
-    font-size: 1.1rem;
-}
-.flash.success {
-    background-color: var(--accent-color);
-    color: white;
-    border-color: var(--accent-dark-color);
-}
-.flash.error {
-    background-color: var(--danger-color);
-    color: white;
-    border-color: var(--danger-dark-color);
-}
-
-.filters-container {
-    margin: 30px 0;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 15px;
-    justify-content: center;
-}
-.search-container {
-    margin: 25px 0;
-    text-align: center;
-}
-#search-input {
-    width: 90%;
-    max-width: 600px;
-    padding: 14px 22px;
-    font-size: 1rem;
-    border: none;
-    border-radius: var(--border-radius-medium);
-    outline: none;
-    box-shadow: var(--shadow-light);
-    transition: all 0.3s ease;
-    background-color: var(--card-background-light);
-    color: var(--text-color-light);
-}
-body.dark-mode #search-input {
-    border-color: var(--border-color-dark);
-    background-color: var(--card-background-dark);
-    color: var(--text-color-dark);
-    box-shadow: var(--shadow-dark);
-}
-#search-input:focus {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
-}
-.category-filter {
-    padding: 12px 25px;
-    border: none;
-    border-radius: var(--border-radius-medium);
-    background-color: var(--card-background-light);
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    font-size: 1rem;
-    font-weight: 500;
-    color: var(--text-color-light);
-    box-shadow: var(--shadow-light);
-}
-body.dark-mode .category-filter {
-    border-color: var(--border-color-dark);
-    background-color: var(--card-background-dark);
-    color: var(--text-color-dark);
-    box-shadow: var(--shadow-dark);
-}
-.category-filter.active, .category-filter:hover {
-    background-color: var(--primary-color);
-    color: white;
-    border-color: var(--primary-color);
-    box-shadow: var(--shadow-hover-light);
-}
-body.dark-mode .category-filter.active, body.dark-mode .category-filter:hover {
-    background-color: var(--primary-color);
-    border-color: var(--primary-color);
-    box-shadow: var(--shadow-hover-dark);
-}
-
-.products-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: 25px;
-    padding: 15px;
-}
-.product {
-    background: var(--card-background-light);
-    border-radius: var(--border-radius-large);
-    padding: 20px;
-    box-shadow: var(--shadow-light);
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-body.dark-mode .product {
-    background: var(--card-background-dark);
-    box-shadow: var(--shadow-dark);
-}
-.product:hover {
-    transform: translateY(-10px) scale(1.03);
-    box-shadow: var(--shadow-hover-light);
-}
-body.dark-mode .product:hover {
-    box-shadow: var(--shadow-hover-dark);
-}
-.product-image {
-    width: 100%;
-    aspect-ratio: 1;
-    background-color: #f7f7f7;
-    border-radius: var(--border-radius-medium);
-    overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 15px;
-    cursor: pointer;
-}
-body.dark-mode .product-image {
-    background-color: #343e4d;
-}
-.product-image img, .product-image video {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-    transition: transform 0.3s ease;
-    border-radius: var(--border-radius-medium);
-}
-.product-image img:hover, .product-image video:hover {
-    transform: scale(1.05);
-}
-.product h2 {
-    font-size: 1.2rem;
-    font-weight: 700;
-    margin: 8px 0;
-    text-align: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: var(--text-color-light);
-}
-body.dark-mode .product h2 {
-    color: var(--text-color-dark);
-}
-.product-price {
-    font-size: 1.3rem;
-    color: var(--danger-color);
-    font-weight: 700;
-    text-align: center;
-    margin: 8px 0 12px;
-}
-.product-description {
-    font-size: 0.9rem;
-    color: var(--secondary-text-color-light);
-    text-align: center;
-    margin-bottom: 20px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-body.dark-mode .product-description {
-    color: var(--secondary-text-color-dark);
-}
-.product-actions {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    margin-top: auto;
-}
-.product-button {
-    display: block;
-    width: 100%;
-    padding: 12px;
-    border: none;
-    border-radius: var(--border-radius-medium);
-    background-color: var(--primary-color);
-    color: white;
-    font-size: 1rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    text-align: center;
-    text-decoration: none;
-    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-}
-.product-button:hover {
-    background-color: var(--primary-dark-color);
-    box-shadow: 0 6px 15px rgba(59, 130, 246, 0.4);
-    transform: translateY(-2px);
-}
-.add-to-cart {
-    background-color: var(--accent-color);
-    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.2);
-}
-.add-to-cart:hover {
-    background-color: var(--accent-dark-color);
-    box-shadow: 0 6px 15px rgba(16, 185, 129, 0.4);
-}
-#cart-button {
-    position: fixed;
-    bottom: 30px;
-    right: 30px;
-    background-color: var(--danger-color);
-    color: white;
-    border: none;
-    border-radius: 50%;
-    width: 60px;
-    height: 60px;
-    font-size: 1.5rem;
-    cursor: pointer;
-    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-#cart-button:hover {
-    background-color: var(--danger-dark-color);
-    transform: translateY(-5px) scale(1.08);
-    box-shadow: 0 12px 35px rgba(239, 68, 68, 0.5);
-}
-.cart-count {
-    position: absolute;
-    top: -5px;
-    right: -5px;
-    background-color: var(--accent-color);
-    color: white;
-    border-radius: 50%;
-    padding: 4px 8px;
-    font-size: 0.8rem;
-    min-width: 22px;
-    text-align: center;
-    font-weight: 600;
-}
-
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1001;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0,0,0,0.6);
-    backdrop-filter: blur(8px);
-    overflow-y: auto;
-    padding: 20px;
-}
-.modal-content {
-    background: var(--card-background-light);
-    margin: 50px auto;
-    padding: 40px;
-    border-radius: var(--border-radius-large);
-    width: 95%;
-    max-width: 750px;
-    box-shadow: var(--shadow-hover-light);
-    animation: fadeInScale 0.3s ease-out;
-    max-height: 90vh; 
-    overflow-y: auto; 
-    -webkit-overflow-scrolling: touch;
-    position: relative;
-}
-body.dark-mode .modal-content {
-    background: var(--card-background-dark);
-    color: var(--text-color-dark);
-    box-shadow: var(--shadow-hover-dark);
-}
-@keyframes fadeInScale {
-    from { opacity: 0; transform: translateY(-30px) scale(0.95); }
-    to { opacity: 1; transform: translateY(0) scale(1); }
-}
-.close {
-    position: absolute;
-    top: 20px;
-    right: 25px;
-    font-size: 2rem;
-    color: var(--secondary-text-color-light);
-    cursor: pointer;
-    transition: color 0.3s, transform 0.2s;
-}
-.close:hover {
-    color: var(--danger-color);
-    transform: rotate(90deg);
-}
-body.dark-mode .close {
-    color: var(--secondary-text-color-dark);
-}
-body.dark-mode .close:hover {
-    color: var(--danger-color);
-}
-
-.modal h2 {
-    font-size: 1.8rem;
-    font-weight: 700;
-    margin-bottom: 25px;
-    text-align: center;
-}
-.cart-item {
-    display: flex;
-    align-items: center;
-    padding: 18px 0;
-    border-bottom: 1px solid var(--border-color-light);
-}
-body.dark-mode .cart-item {
-    border-bottom-color: var(--border-color-dark);
-}
-.cart-item:last-child {
-    border-bottom: none;
-}
-.cart-item img {
-    width: 70px;
-    height: 70px;
-    object-fit: contain;
-    border-radius: var(--border-radius-small);
-    margin-right: 20px;
-    background-color: #f7f7f7;
-}
-body.dark-mode .cart-item img {
-    background-color: #343e4d;
-}
-.cart-item-details {
-    flex-grow: 1;
-}
-.cart-item-details strong {
-    font-size: 1.2rem;
-    font-weight: 600;
-}
-.cart-item-details p {
-    font-size: 0.95rem;
-    color: var(--secondary-text-color-light);
-}
-body.dark-mode .cart-item-details p {
-    color: var(--secondary-text-color-dark);
-}
-.cart-item-total {
-    font-size: 1.1rem;
-    font-weight: 700;
-    color: var(--danger-color);
-}
-.quantity-input, .color-select, .model-select {
-    width: 100%;
-    padding: 12px;
-    border: 1px solid var(--border-color-light);
-    border-radius: var(--border-radius-medium);
-    font-size: 1rem;
-    margin: 10px 0;
-    background-color: var(--card-background-light);
-    color: var(--text-color-light);
-    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
-}
-body.dark-mode .quantity-input, body.dark-mode .color-select, body.dark-mode .model-select {
-    border-color: var(--border-color-dark);
-    background-color: var(--card-background-dark);
-    color: var(--text-color-dark);
-    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
-}
-.modal-buttons {
-    margin-top: 30px;
-    display: flex;
-    justify-content: flex-end;
-    gap: 15px;
-}
-.modal-buttons .product-button {
-    width: auto;
-    padding: 12px 25px;
-}
-.clear-cart {
-    background-color: var(--danger-color);
-}
-.clear-cart:hover {
-    background-color: var(--danger-dark-color);
-    box-shadow: 0 6px 15px rgba(239, 68, 68, 0.4);
-}
-.order-button {
-    background-color: var(--accent-color);
-}
-.order-button:hover {
-    background-color: var(--accent-dark-color);
-    box-shadow: 0 6px 15px rgba(16, 185, 129, 0.4);
-}
-
-.swiper-container {
-    max-width: 500px;
-    margin: 0 auto 30px;
-    border-radius: var(--border-radius-large);
-    overflow: hidden;
-    box-shadow: var(--shadow-light);
-}
-body.dark-mode .swiper-container {
-    box-shadow: var(--shadow-dark);
-}
-.swiper-slide {
-    background-color: #f7f7f7;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 300px;
-}
-body.dark-mode .swiper-slide {
-    background-color: #343e4d;
-}
-.swiper-slide img, .swiper-slide video {
-    max-width: 100%;
-    max-height: 350px;
-    object-fit: contain;
-}
-.swiper-button-next, .swiper-button-prev {
-    color: var(--primary-color) !important;
-    background-color: rgba(255,255,255,0.9);
-    border-radius: 50%;
-    width: 45px;
-    height: 45px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.3s;
-    font-size: 1.8rem;
-}
-.swiper-button-next:hover, .swiper-button-prev:hover {
-    background-color: #fff;
-}
-body.dark-mode .swiper-button-next, body.dark-mode .swiper-button-prev {
-    background-color: rgba(45, 55, 72, 0.9);
-}
-body.dark-mode .swiper-button-next:hover, body.dark-mode .swiper-button-prev:hover {
-    background-color: #2d3748;
-}
-.swiper-pagination-bullet {
-    background-color: var(--primary-color) !important;
-}
-
-.product-detail-modal-inner {
-    background: transparent;
-    padding: 0;
-    margin: 0;
-    box-shadow: none;
-    position: static;
-}
-body.dark-mode .product-detail-modal-inner {
-    background: transparent;
-    box-shadow: none;
-}
-.product-detail-modal-inner h2 {
-    font-size: 2.2rem;
-    font-weight: 700;
-    margin-bottom: 25px;
-    text-align: center;
-    color: var(--text-color-light);
-}
-body.dark-mode .product-detail-modal-inner h2 {
-    color: var(--text-color-dark);
-}
-.product-detail-modal-inner p {
-    margin-bottom: 10px;
-    font-size: 1rem;
-}
-.product-detail-modal-inner p strong {
-    color: var(--text-color-light);
-}
-body.dark-mode .product-detail-modal-inner p strong {
-    color: var(--text-color-dark);
-}
-.product-detail-modal-inner .price {
-    font-size: 1.8rem;
-    color: var(--danger-color);
-    font-weight: 700;
-    margin-bottom: 20px;
-    text-align: center;
-}
-.product-detail-modal-inner .description {
-    margin-bottom: 20px;
-    white-space: pre-wrap;
-}
-.product-detail-modal-actions {
-    display: flex;
-    justify-content: center;
-    gap: 15px;
-    margin-top: 30px;
-}
-.product-detail-modal-actions .product-button {
-    width: auto;
-    padding: 12px 25px;
-}
-
-@media (max-width: 768px) {
-    .container {
-        padding: 15px;
-    }
-    .header h1 {
-        font-size: 1.6rem;
-    }
-    .category-filter {
-        font-size: 0.85rem;
-        padding: 8px 15px;
-    }
-    .products-grid {
-        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-        gap: 18px;
-    }
-    .product h2 {
-        font-size: 1.05rem;
-    }
-    .product-price {
-        font-size: 1.15rem;
-    }
-    .product-description {
-        font-size: 0.8rem;
-    }
-    .product-button {
-        font-size: 0.9rem;
-        padding: 10px;
-    }
-    #cart-button {
-        width: 50px;
-        height: 50px;
-        font-size: 1.2rem;
-        bottom: 20px;
-        right: 20px;
-    }
-    .modal-content {
-        margin: 20px auto;
-        padding: 25px;
-        max-height: 95vh;
-    }
-    .close {
-        font-size: 1.6rem;
-        top: 15px;
-        right: 18px;
-    }
-    .modal h2 {
-        font-size: 1.6rem;
-    }
-    .cart-item img {
-        width: 55px;
-        height: 55px;
-    }
-    .product-detail-modal-inner h2 {
-        font-size: 2rem;
-    }
-    .product-detail-modal-inner .price {
-        font-size: 1.6rem;
-    }
-    .product-detail-modal-actions {
-        flex-direction: column;
-        gap: 10px;
-    }
-}
-'''
+           filename.rsplit('.', 1)[1].lower() in {'png', 'jpg', 'jpeg', 'gif', 'webp'}
 
 @app.route('/')
 def catalog():
     data = load_data()
-    products = data.get('products', [])
-    categories = data.get('categories', [])
-
-    products.sort(key=lambda p: p['name'].lower())
-
-    return render_template_string('''
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ZZIRIX - сотовые аксессуары оптом</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
-    <style>''' + BASE_STYLE + '''</style>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <div class="header-info">
-                <img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
-                <h1>Каталог ZZIRIX</h1>
-            </div>
-            <button class="theme-toggle" onclick="toggleTheme()">
-                <i class="fas fa-moon"></i>
-            </button>
-        </div>
-        {% with messages = get_flashed_messages(with_categories=true) %}
-          {% if messages %}
-            {% for category, message in messages %}
-              <div class="flash {{ category }}">{{ message }}</div>
-            {% endfor %}
-          {% endif %}
-        {% endwith %}
-        <div class="filters-container">
-            <button class="category-filter active" data-category="all">Все категории</button>
-            {% for category in categories %}
-            <button class="category-filter" data-category="{{ category | lower }}">{{ category }}</button>
-            {% endfor %}
-        </div>
-        <div class="search-container">
-            <input type="text" id="search-input" placeholder="Поиск товаров...">
-        </div>
-        <div class="products-grid" id="products-grid">
-            {% for product in products %}
-            <div class="product" 
-                 data-name="{{ product['name']|lower }}" 
-                 data-description="{{ product['description']|lower }}"
-                 data-category="{{ product.get('category', 'Без категории')|lower }}">
-                <a href="javascript:void(0)" onclick="openProductDetailModal('{{ product.id }}')" class="product-image">
-                    {% if product.get('photos') and product['photos']|length > 0 %}
-                    {% set filename = product['photos'][0] %}
-                    {% if filename.endswith(('.mp4', '.mov', '.webm')) %}
-                        <video preload="metadata" muted loop autoplay playsinline><source src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ filename }}" type="video/mp4"></video>
-                    {% else %}
-                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ filename }}" 
-                             alt="{{ product['name'] }}" 
-                             loading="lazy">
-                    {% endif %}
-                    {% else %}
-                    <img src="https://via.placeholder.com/200x200?text=No+Image" 
-                         alt="Нет изображения" 
-                         loading="lazy">
-                    {% endif %}
-                </a>
-                <h2>{{ product['name'] }}</h2>
-                <div class="product-price">{{ "%.2f"|format(product['price']) }} с</div>
-                <p class="product-description">{{ product['description'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p>
-                <div class="product-actions">
-                    <button class="product-button" onclick="openProductDetailModal('{{ product.id }}')">Подробнее</button>
-                    <button class="product-button add-to-cart" onclick="openQuantityModal('{{ product.id }}')">В корзину</button>
-                </div>
-            </div>
-            {% else %}
-            <p style="grid-column: 1 / -1; text-align: center; padding: 40px 0;">Товаров пока нет. Загляните позже!</p>
-            {% endfor %}
-        </div>
-    </div>
-
-    <div id="quantityModal" class="modal">
-        <div class="modal-content">
-            <span class="close" onclick="closeModal('quantityModal')">×</span>
-            <h2>Укажите количество, цвет и модель</h2>
-            <input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
-            <select id="colorSelect" class="color-select"></select>
-            <select id="modelSelect" class="model-select"></select>
-            <div class="modal-buttons">
-                <button class="product-button order-button" onclick="confirmAddToCart()">Добавить</button>
-            </div>
-        </div>
-    </div>
+    products = data['products']
+    categories = data['categories']
+    
+    catalog_html = '''
+    <!DOCTYPE html>
+    <html lang="ru">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>ZZIRIX - сотовые аксессуары оптом </title>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
+        <style>
+            :root {
+                --primary-color: #3B82F6;
+                --primary-dark-color: #2563eb;
+                --accent-color: #10b981;
+                --accent-dark-color: #059669;
+                --danger-color: #ef4444;
+                --danger-dark-color: #dc2626;
+                --background-light: linear-gradient(135deg, #f8f9fa, #e9ecef);
+                --background-dark: linear-gradient(135deg, #1a202c, #2d3748);
+                --card-background-light: #ffffff;
+                --card-background-dark: #2d3748;
+                --text-color-light: #2d3748;
+                --text-color-dark: #e2e8f0;
+                --secondary-text-color-light: #718096;
+                --secondary-text-color-dark: #a0aec0;
+                --border-color-light: #e2e8f0;
+                --border-color-dark: #4a5568;
+                --shadow-light: 0 6px 20px rgba(0, 0, 0, 0.08);
+                --shadow-hover-light: 0 10px 30px rgba(0, 0, 0, 0.15);
+                --shadow-dark: 0 6px 20px rgba(0, 0, 0, 0.25);
+                --shadow-hover-dark: 0 10px 30px rgba(0, 0, 0, 0.4);
+            }
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+            body {
+                font-family: 'Roboto', sans-serif;
+                background: var(--background-light);
+                color: var(--text-color-light);
+                line-height: 1.6;
+                transition: background 0.3s, color 0.3s;
+                min-height: 100vh;
+                display: flex;
+                flex-direction: column;
+            }
+            body.dark-mode {
+                background: var(--background-dark);
+                color: var(--text-color-dark);
+            }
+            .container {
+                max-width: 1300px;
+                margin: 0 auto;
+                padding: 20px;
+                flex-grow: 1;
+            }
+            .header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 15px 0;
+                border-bottom: 1px solid var(--border-color-light);
+                margin-bottom: 20px;
+            }
+            body.dark-mode .header {
+                border-bottom-color: var(--border-color-dark);
+            }
+            .header-info {
+                display: flex;
+                align-items: center;
+            }
+            .header-logo {
+                width: 50px;
+                height: 50px;
+                border-radius: 50%;
+                object-fit: cover;
+                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+                transition: transform 0.3s ease, box-shadow 0.3s ease;
+            }
+            .header-logo:hover {
+                transform: scale(1.05);
+                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+            }
+            .header h1 {
+                font-size: 1.7rem;
+                font-weight: 700;
+                margin-left: 15px;
+            }
+            .theme-toggle {
+                background: none;
+                border: none;
+                font-size: 1.6rem;
+                cursor: pointer;
+                color: var(--secondary-text-color-light);
+                transition: color 0.3s ease, transform 0.2s ease;
+                padding: 5px;
+            }
+            body.dark-mode .theme-toggle {
+                color: var(--secondary-text-color-dark);
+            }
+            .theme-toggle:hover {
+                color: var(--primary-color);
+                transform: rotate(15deg);
+            }
 
-    <div id="cartModal" class="modal">
-        <div class="modal-content">
-            <span class="close" onclick="closeModal('cartModal')">×</span>
-            <h2>Корзина</h2>
-            <div id="cartContent"></div>
-            <div style="margin-top: 20px; text-align: right;">
-                <strong style="font-size: 1.2rem;">Итого: <span id="cartTotal">0</span> с</strong>
-                <div class="modal-buttons">
-                    <button class="product-button clear-cart" onclick="clearCart()">Очистить</button>
-                    <button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button>
-                </div>
-            </div>
-        </div>
-    </div>
+            .flash {
+                padding: 15px;
+                margin-bottom: 20px;
+                border-radius: 8px;
+                font-weight: 500;
+                border: 1px solid transparent;
+            }
+            .flash.success { 
+                background-color: #d1fae5;
+                color: #065f46;
+                border-color: #34d399;
+            }
+            .flash.error {
+                background-color: #fee2e2;
+                color: #991b1b;
+                border-color: #ef4444;
+            }
 
-    <div id="productDetailModal" class="modal">
-        <div class="modal-content">
-            <span class="close" onclick="closeModal('productDetailModal')">×</span>
-            <div class="product-detail-modal-inner">
-                <h2 id="detailProductName"></h2>
-                <div class="swiper-container" style="max-width: 500px; margin: 0 auto 30px;">
-                    <div class="swiper-wrapper" id="detailProductMedia">
-                    </div>
-                    <div class="swiper-pagination"></div>
-                    <div class="swiper-button-next"></div>
-                    <div class="swiper-button-prev"></div>
-                </div>
-                <p><strong>Категория:</strong> <span id="detailProductCategory" style="color: var(--primary-color);"></span></p>
-                <p class="price" id="detailProductPrice"></p>
-                <p class="description"><strong>Описание:</strong> <span id="detailProductDescription"></span></p>
-                <p><strong>Доступные цвета:</strong> <span id="detailProductColors" style="color: var(--secondary-text-color-light);"></span></p>
-                <p><strong>Доступные модели:</strong> <span id="detailProductModels" style="color: var(--secondary-text-color-light);"></span></p>
-                <div class="product-detail-modal-actions">
-                    <button class="product-button add-to-cart" id="detailAddToCartButton">В корзину</button>
-                </div>
-            </div>
-        </div>
-    </div>
+            .filters-container {
+                margin: 20px 0;
+                display: flex;
+                flex-wrap: wrap;
+                gap: 10px;
+                justify-content: center;
+            }
+            .search-container {
+                margin: 20px 0;
+                text-align: center;
+            }
+            #search-input {
+                width: 90%;
+                max-width: 600px;
+                padding: 12px 18px;
+                font-size: 1rem;
+                border: 1px solid var(--border-color-light);
+                border-radius: 25px;
+                outline: none;
+                box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
+                transition: all 0.3s ease;
+                background-color: var(--card-background-light);
+                color: var(--text-color-light);
+            }
+            body.dark-mode #search-input {
+                border-color: var(--border-color-dark);
+                background-color: var(--card-background-dark);
+                color: var(--text-color-dark);
+            }
+            #search-input:focus {
+                border-color: var(--primary-color);
+                box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
+            }
+            .category-filter {
+                padding: 10px 20px;
+                border: 1px solid var(--border-color-light);
+                border-radius: 25px;
+                background-color: var(--card-background-light);
+                cursor: pointer;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                font-size: 0.95rem;
+                font-weight: 500;
+                color: var(--text-color-light);
+                box-shadow: var(--shadow-light);
+            }
+            body.dark-mode .category-filter {
+                border-color: var(--border-color-dark);
+                background-color: var(--card-background-dark);
+                color: var(--text-color-dark);
+                box-shadow: var(--shadow-dark);
+            }
+            .category-filter.active, .category-filter:hover {
+                background-color: var(--primary-color);
+                color: white;
+                border-color: var(--primary-color);
+                box-shadow: var(--shadow-hover-light);
+            }
+            body.dark-mode .category-filter.active, body.dark-mode .category-filter:hover {
+                background-color: var(--primary-color);
+                border-color: var(--primary-color);
+                box-shadow: var(--shadow-hover-dark);
+            }
 
-    <button id="cart-button" onclick="openCartModal()">
-        <i class="fas fa-shopping-cart"></i>
-        <span id="cart-count" class="cart-count">0</span>
-    </button>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
-    <script>
-        const products = {{ products|tojson }};
-        let selectedProductId = null;
-        let detailSwiperInstance = null;
-
-        function toggleTheme() {
-            document.body.classList.toggle('dark-mode');
-            const icon = document.querySelector('.theme-toggle i');
-            icon.classList.toggle('fa-moon');
-            icon.classList.toggle('fa-sun');
-            localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
-        }
-
-        if (localStorage.getItem('theme') === 'dark') {
-            document.body.classList.add('dark-mode');
-            const icon = document.querySelector('.theme-toggle i');
-            if (icon) icon.classList.replace('fa-moon', 'fa-sun');
-        } else {
-            const icon = document.querySelector('.theme-toggle i');
-            if (icon) icon.classList.replace('fa-sun', 'fa-moon');
-        }
-
-        function closeModal(modalId) {
-            document.getElementById(modalId).style.display = "none";
-            if (modalId === 'productDetailModal' && detailSwiperInstance) {
-                detailSwiperInstance.destroy(true, true);
-                detailSwiperInstance = null;
-            }
-        }
-
-        function openQuantityModal(productId) {
-            selectedProductId = productId;
-            const product = products.find(p => p.id === productId);
-            if (!product) {
-                alert('Ошибка: Товар не найден.');
-                return;
+            .products-grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+                gap: 20px;
+                padding: 10px;
             }
-            
-            const colorSelect = document.getElementById('colorSelect');
-            colorSelect.innerHTML = '';
-            if (product.colors && product.colors.length > 0) {
-                product.colors.forEach(color => {
-                    const option = document.createElement('option');
-                    option.value = color;
-                    option.text = color;
-                    colorSelect.appendChild(option);
-                });
-            } else {
-                const option = document.createElement('option');
-                option.value = 'Не указан';
-                option.text = 'Цвет не указан';
-                colorSelect.appendChild(option);
+            .product {
+                background: var(--card-background-light);
+                border-radius: 18px;
+                padding: 15px;
+                box-shadow: var(--shadow-light);
+                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
+                overflow: hidden;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+            }
+            body.dark-mode .product {
+                background: var(--card-background-dark);
+                box-shadow: var(--shadow-dark);
+            }
+            .product:hover {
+                transform: translateY(-8px) scale(1.02);
+                box-shadow: var(--shadow-hover-light);
+            }
+            body.dark-mode .product:hover {
+                box-shadow: var(--shadow-hover-dark);
+            }
+            .product-image {
+                width: 100%;
+                aspect-ratio: 1;
+                background-color: #f0f0f0;
+                border-radius: 12px;
+                overflow: hidden;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin-bottom: 10px;
+            }
+            body.dark-mode .product-image {
+                background-color: #3a4250;
+            }
+            .product-image img {
+                max-width: 100%;
+                max-height: 100%;
+                object-fit: contain;
+                transition: transform 0.3s ease;
+            }
+            .product-image img:hover {
+                transform: scale(1.05);
+            }
+            .product h2 {
+                font-size: 1.05rem;
+                font-weight: 600;
+                margin: 5px 0;
+                text-align: center;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                color: var(--text-color-light);
+            }
+            body.dark-mode .product h2 {
+                color: var(--text-color-dark);
+            }
+            .product-price {
+                font-size: 1.15rem;
+                color: var(--danger-color);
+                font-weight: 700;
+                text-align: center;
+                margin: 5px 0 10px;
+            }
+            .product-description {
+                font-size: 0.85rem;
+                color: var(--secondary-text-color-light);
+                text-align: center;
+                margin-bottom: 15px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            body.dark-mode .product-description {
+                color: var(--secondary-text-color-dark);
+            }
+            .product-actions {
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+                margin-top: auto;
+            }
+            .product-button {
+                display: block;
+                width: 100%;
+                padding: 10px;
+                border: none;
+                border-radius: 10px;
+                background-color: var(--primary-color);
+                color: white;
+                font-size: 0.9rem;
+                font-weight: 500;
+                cursor: pointer;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                text-align: center;
+                text-decoration: none;
+            }
+            .product-button:hover {
+                background-color: var(--primary-dark-color);
+                box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
+            }
+            .add-to-cart {
+                background-color: var(--accent-color);
+            }
+            .add-to-cart:hover {
+                background-color: var(--accent-dark-color);
+                box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
+            }
+            #cart-button {
+                position: fixed;
+                bottom: 25px;
+                right: 25px;
+                background-color: var(--danger-color);
+                color: white;
+                border: none;
+                border-radius: 50%;
+                width: 55px;
+                height: 55px;
+                font-size: 1.3rem;
+                cursor: pointer;
+                display: none;
+                box-shadow: 0 5px 20px rgba(239, 68, 68, 0.4);
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                z-index: 1000;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            #cart-button:hover {
+                background-color: var(--danger-dark-color);
+                transform: translateY(-3px) scale(1.05);
+                box-shadow: 0 8px 25px rgba(239, 68, 68, 0.6);
+            }
+            .cart-count {
+                position: absolute;
+                top: -5px;
+                right: -5px;
+                background-color: var(--accent-color);
+                color: white;
+                border-radius: 50%;
+                padding: 3px 7px;
+                font-size: 0.75rem;
+                min-width: 20px;
+                text-align: center;
+                font-weight: 600;
             }
 
-            const modelSelect = document.getElementById('modelSelect');
-            modelSelect.innerHTML = '';
-            if (product.models && product.models.length > 0) {
-                product.models.forEach(model => {
-                    const option = document.createElement('option');
-                    option.value = model;
-                    option.text = model;
-                    modelSelect.appendChild(option);
-                });
-            } else {
-                const option = document.createElement('option');
-                option.value = 'Не указана';
-                option.text = 'Модель не указана';
-                modelSelect.appendChild(option);
-            }
-
-            document.getElementById('quantityModal').style.display = 'block';
-            document.getElementById('quantityInput').value = 1;
-        }
-
-        function confirmAddToCart() {
-            if (selectedProductId === null) return;
-            const quantityInput = document.getElementById('quantityInput');
-            const quantity = parseInt(quantityInput.value) || 1;
-            const color = document.getElementById('colorSelect').value;
-            const model = document.getElementById('modelSelect').value;
-            
-            if (quantity <= 0) {
-                alert("Укажите количество больше 0.");
-                quantityInput.focus();
-                return;
+            .modal {
+                display: none;
+                position: fixed;
+                z-index: 1001;
+                left: 0;
+                top: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0,0,0,0.6);
+                backdrop-filter: blur(8px);
+                overflow-y: auto;
+                padding: 20px;
+            }
+            .modal-content {
+                background: var(--card-background-light);
+                margin: 50px auto;
+                padding: 30px;
+                border-radius: 20px;
+                width: 95%;
+                max-width: 750px;
+                box-shadow: 0 15px 40px rgba(0,0,0,0.3);
+                animation: fadeInScale 0.3s ease-out;
+                max-height: calc(100vh - 100px); 
+                overflow-y: auto; 
+                -webkit-overflow-scrolling: touch;
+                position: relative;
+            }
+            body.dark-mode .modal-content {
+                background: var(--card-background-dark);
+                color: var(--text-color-dark);
+                box-shadow: 0 15px 40px rgba(0,0,0,0.5);
+            }
+            @keyframes fadeInScale {
+                from { opacity: 0; transform: translateY(-30px) scale(0.95); }
+                to { opacity: 1; transform: translateY(0) scale(1); }
+            }
+            .close {
+                position: absolute;
+                top: 15px;
+                right: 20px;
+                font-size: 1.8rem;
+                color: var(--secondary-text-color-light);
+                cursor: pointer;
+                transition: color 0.3s, transform 0.2s;
+            }
+            .close:hover {
+                color: var(--danger-color);
+                transform: rotate(90deg);
+            }
+            body.dark-mode .close {
+                color: var(--secondary-text-color-dark);
+            }
+            body.dark-mode .close:hover {
+                color: var(--danger-color);
             }
             
-            let cart = JSON.parse(localStorage.getItem('cart') || '[]');
-            const product = products.find(p => p.id === selectedProductId);
-
-            const cartItemId = `${product.id}-${color}-${model}`; 
-            const existingItem = cart.find(item => item.cartId === cartItemId);
-
-            if (existingItem) {
-                existingItem.quantity += quantity;
-            } else {
-                cart.push({
-                    cartId: cartItemId,
-                    productId: product.id,
-                    name: product.name,
-                    price: product.price,
-                    photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
-                    quantity: quantity,
-                    color: color,
-                    model: model
-                });
+            .modal h2 {
+                font-size: 1.6rem;
+                font-weight: 700;
+                margin-bottom: 20px;
+                text-align: center;
             }
-
-            localStorage.setItem('cart', JSON.stringify(cart));
-            closeModal('quantityModal');
-            updateCartButton();
-            alert(`"${product.name}" добавлен в корзину.`);
-        }
-
-        function updateCartButton() {
-            const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-            const cartCount = cart.reduce((sum, item) => sum + item.quantity, 0);
-            document.getElementById('cart-count').textContent = cartCount;
-            document.getElementById('cart-button').style.display = cartCount > 0 ? 'flex' : 'none';
-        }
-
-        function openCartModal() {
-            const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-            const cartContent = document.getElementById('cartContent');
-            let total = 0;
-
-            cartContent.innerHTML = cart.length === 0 ? '<p style="text-align: center; color: var(--secondary-text-color-light);">Корзина пуста</p>' : cart.map((item, index) => {
-                const itemTotal = item.price * item.quantity;
-                total += itemTotal;
-                const photoSrc = item.photo ? `https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}` : 'https://via.placeholder.com/60x60?text=No+Image';
-                return `
-                    <div class="cart-item">
-                        <img src="${photoSrc}" alt="${item.name}">
-                        <div class="cart-item-details">
-                            <strong>${item.name}</strong>
-                            <p>${item.price.toFixed(2)} с × ${item.quantity} (Цвет: ${item.color}, Модель: ${item.model})</p>
-                        </div>
-                        <span class="cart-item-total">${itemTotal.toFixed(2)} с</span>
-                    </div>
-                `;
-            }).join('');
-
-            document.getElementById('cartTotal').textContent = total.toFixed(2);
-            document.getElementById('cartModal').style.display = 'block';
-        }
-
-        function orderViaWhatsApp() {
-            const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-            if (cart.length === 0) {
-                alert("Корзина пуста!");
-                return;
-            }
-            let total = 0;
-            let orderText = "Здравствуйте, меня интересует заказ:%0A%0A";
-            cart.forEach((item, index) => {
-                const itemTotal = item.price * item.quantity;
-                total += itemTotal;
-                orderText += `${index + 1}. ${item.name}%0AКол��чество: ${item.quantity}%0AЦена: ${item.price.toFixed(2)} с%0AЦвет: ${item.color}%0AМодель: ${item.model}%0A--%0A`;
-            });
-            orderText += `*Итого к оплате: ${total.toFixed(2)} с*%0A%0AЖду подтверждения заказа.`;
-            window.open(`https://api.whatsapp.com/send?phone=996705665777&text=${orderText}`, '_blank');
-            clearCart();
-        }
-
-        function clearCart() {
-            localStorage.removeItem('cart');
-            openCartModal();
-            updateCartButton();
-        }
-
-        window.onclick = function(event) {
-            if (event.target.classList.contains('modal')) {
-                event.target.style.display = "none";
-                if (detailSwiperInstance) {
-                    detailSwiperInstance.destroy(true, true);
-                    detailSwiperInstance = null;
-                }
+            .cart-item {
+                display: flex;
+                align-items: center;
+                padding: 15px 0;
+                border-bottom: 1px solid var(--border-color-light);
+            }
+            body.dark-mode .cart-item {
+                border-bottom-color: var(--border-color-dark);
+            }
+            .cart-item:last-child {
+                border-bottom: none;
+            }
+            .cart-item img {
+                width: 60px;
+                height: 60px;
+                object-fit: contain;
+                border-radius: 10px;
+                margin-right: 15px;
+                background-color: #f0f0f0;
+            }
+            body.dark-mode .cart-item img {
+                background-color: #3a4250;
+            }
+            .cart-item-details {
+                flex-grow: 1;
+            }
+            .cart-item-details strong {
+                font-size: 1.1rem;
+                font-weight: 600;
+            }
+            .cart-item-details p {
+                font-size: 0.9rem;
+                color: var(--secondary-text-color-light);
+            }
+            body.dark-mode .cart-item-details p {
+                color: var(--secondary-text-color-dark);
+            }
+            .cart-item-total {
+                font-size: 1rem;
+                font-weight: 700;
+                color: var(--danger-color);
+            }
+            .quantity-input, .color-select, .model-select {
+                width: 100%;
+                padding: 10px;
+                border: 1px solid var(--border-color-light);
+                border-radius: 8px;
+                font-size: 1rem;
+                margin: 8px 0;
+                background-color: var(--card-background-light);
+                color: var(--text-color-light);
+            }
+            body.dark-mode .quantity-input, body.dark-mode .color-select, body.dark-mode .model-select {
+                border-color: var(--border-color-dark);
+                background-color: var(--card-background-dark);
+                color: var(--text-color-dark);
+            }
+            .modal-buttons {
+                margin-top: 20px;
+                display: flex;
+                justify-content: flex-end;
+                gap: 10px;
+            }
+            .modal-buttons .product-button {
+                width: auto;
+                padding: 10px 20px;
+            }
+            .clear-cart {
+                background-color: var(--danger-color);
+            }
+            .clear-cart:hover {
+                background-color: var(--danger-dark-color);
+                box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
+            }
+            .order-button {
+                background-color: var(--accent-color);
+            }
+            .order-button:hover {
+                background-color: var(--accent-dark-color);
+                box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
             }
-        }
 
-        document.getElementById('search-input').addEventListener('input', filterProducts);
-        document.querySelectorAll('.filters-container .category-filter').forEach(filter => {
-            filter.addEventListener('click', function() {
-                document.querySelectorAll('.filters-container .category-filter').forEach(f => f.classList.remove('active'));
-                this.classList.add('active');
-                filterProducts();
-            });
-        });
-
-        function filterProducts() {
-            const searchTerm = document.getElementById('search-input').value.toLowerCase().trim();
-            const activeCategory = document.querySelector('.category-filter.active').dataset.category.toLowerCase();
-            document.querySelectorAll('.product').forEach(product => {
-                const name = product.getAttribute('data-name');
-                const description = product.getAttribute('data-description');
-                const category = product.getAttribute('data-category');
-                
-                const matchesSearch = (name && name.includes(searchTerm)) || (description && description.includes(searchTerm));
-                const matchesCategory = activeCategory === 'all' || category === activeCategory;
-                
-                product.style.display = matchesSearch && matchesCategory ? 'flex' : 'none';
-            });
-        }
-
-        function openProductDetailModal(productId) {
-            selectedProductId = productId;
-            const product = products.find(p => p.id === productId);
-            if (!product) {
-                alert('Ошибка: Товар не найден.');
-                return;
-            }
-
-            document.getElementById('detailProductName').textContent = product.name;
-            document.getElementById('detailProductCategory').textContent = product.category || 'Без категории';
-            document.getElementById('detailProductPrice').textContent = `${product.price.toFixed(2)} с`;
-            document.getElementById('detailProductDescription').textContent = product.description;
-            document.getElementById('detailProductColors').textContent = product.colors && product.colors.length > 0 ? product.colors.join(', ') : 'Нет цветов';
-            document.getElementById('detailProductModels').textContent = product.models && product.models.length > 0 ? product.models.join(', ') : 'Нет моделей';
-            document.getElementById('detailAddToCartButton').onclick = () => openQuantityModal(product.id);
-
-            const mediaContainer = document.getElementById('detailProductMedia');
-            mediaContainer.innerHTML = '';
-            if (product.photos && product.photos.length > 0) {
-                product.photos.forEach(filename => {
-                    const slide = document.createElement('div');
-                    slide.className = 'swiper-slide swiper-zoom-container';
-                    slide.style = "display: flex; justify-content: center; align-items: center; border-radius: 10px;";
-                    
-                    const mediaUrl = `https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${filename}`;
-                    if (filename.endsWith(('.mp4', '.mov', '.webm'))) {
-                        slide.innerHTML = `<video controls preload="metadata" style="max-width: 100%; max-height: 350px; object-fit: contain;"><source src="${mediaUrl}" type="video/mp4"></video>`;
-                    } else {
-                        slide.innerHTML = `<img src="${mediaUrl}" alt="${product.name}" style="max-width: 100%; max-height: 350px; object-fit: contain;">`;
-                    }
-                    mediaContainer.appendChild(slide);
-                });
-            } else {
-                const slide = document.createElement('div');
-                slide.className = 'swiper-slide swiper-zoom-container';
-                slide.style = "display: flex; justify-content: center; align-items: center; border-radius: 10px;";
-                slide.innerHTML = `<img src="https://via.placeholder.com/300x300?text=No+Image" alt="No Image">`;
-                mediaContainer.appendChild(slide);
+            .swiper-container {
+                max-width: 400px;
+                margin: 0 auto 20px;
+                border-radius: 15px;
+                overflow: hidden;
+                box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+            }
+            body.dark-mode .swiper-container {
+                box-shadow: 0 5px 20px rgba(0,0,0,0.3);
+            }
+            .swiper-slide {
+                background-color: #f0f0f0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                min-height: 250px;
+            }
+            body.dark-mode .swiper-slide {
+                background-color: #3a4250;
+            }
+            .swiper-slide img {
+                max-width: 100%;
+                max-height: 300px;
+                object-fit: contain;
+            }
+            .swiper-button-next, .swiper-button-prev {
+                color: var(--primary-color) !important;
+                background-color: rgba(255,255,255,0.8);
+                border-radius: 50%;
+                width: 40px;
+                height: 40px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: background-color 0.3s;
+            }
+            .swiper-button-next:hover, .swiper-button-prev:hover {
+                background-color: rgba(255,255,255,1);
+            }
+            body.dark-mode .swiper-button-next, body.dark-mode .swiper-button-prev {
+                background-color: rgba(45, 55, 72, 0.8);
+            }
+            body.dark-mode .swiper-button-next:hover, body.dark-mode .swiper-button-prev:hover {
+                background-color: rgba(45, 55, 72, 1);
+            }
+            .swiper-pagination-bullet {
+                background-color: var(--primary-color) !important;
             }
             
-            document.getElementById('productDetailModal').style.display = 'block';
-            
-            if (detailSwiperInstance) {
-                detailSwiperInstance.destroy(true, true);
-            }
-            detailSwiperInstance = new Swiper('#productDetailModal .swiper-container', {
-                slidesPerView: 1,
-                spaceBetween: 20,
-                loop: true,
-                grabCursor: true,
-                pagination: { el: '#productDetailModal .swiper-pagination', clickable: true },
-                navigation: { nextEl: '#productDetailModal .swiper-button-next', prevEl: '#productDetailModal .swiper-button-prev' },
-                zoom: { maxRatio: 3 },
-                on: {
-                    init: function () {
-                        this.slides.forEach(slide => {
-                            const img = slide.querySelector('img');
-                            if (img && !img.complete) {
-                                img.onload = () => detailSwiperInstance.update();
-                            }
-                            const video = slide.querySelector('video');
-                            if (video) {
-                                video.onloadedmetadata = () => detailSwiperInstance.update();
-                            }
-                        });
-                    },
-                    resize: function() {
-                        this.update();
-                    }
+            @media (max-width: 768px) {
+                .header h1 {
+                    font-size: 1.4rem;
                 }
-            });
-            detailSwiperInstance.update();
-        }
-
-        updateCartButton();
-    </script>
-</body>
-</html>
-    ''',
-    products=products,
-    categories=categories,
-    repo_id=REPO_ID,
-    LOGO_URL=LOGO_URL
-    )
-
-@app.route('/category/<category_name>')
-def catalog_by_category(category_name):
-    data = load_data()
-    products_all = data.get('products', [])
-    categories = data.get('categories', [])
-    
-    products = [p for p in products_all if p.get('category', '').lower() == category_name.lower()]
-    products.sort(key=lambda p: p['name'].lower())
-
-    return render_template_string('''
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ category_name }} - ZZIRIX</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
-    <style>''' + BASE_STYLE + '''</style>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <div class="header-info">
-                <img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
-                <h1>Каталог ZZIRIX</h1>
+                .category-filter {
+                    font-size: 0.85rem;
+                    padding: 8px 15px;
+                }
+                .products-grid {
+                    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+                    gap: 15px;
+                }
+                .product h2 {
+                    font-size: 0.95rem;
+                }
+                .product-price {
+                    font-size: 1.05rem;
+                }
+                .product-description {
+                    font-size: 0.75rem;
+                }
+                .product-button {
+                    font-size: 0.85rem;
+                    padding: 8px;
+                }
+                #cart-button {
+                    width: 45px;
+                    height: 45px;
+                    font-size: 1.1rem;
+                    bottom: 15px;
+                    right: 15px;
+                }
+                .modal-content {
+                    margin: 20px auto;
+                    padding: 20px;
+                    max-height: calc(100vh - 40px);
+                }
+                .close {
+                    font-size: 1.5rem;
+                    top: 10px;
+                    right: 15px;
+                }
+                .modal h2 {
+                    font-size: 1.4rem;
+                }
+                .cart-item img {
+                    width: 45px;
+                    height: 45px;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <div class="header">
+                <div class="header-info">
+                    <img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
+                    <h1>Каталог ZZIRIX</h1>
+                </div>
+                <button class="theme-toggle" onclick="toggleTheme()">
+                    <i class="fas fa-moon"></i>
+                </button>
             </div>
-            <button class="theme-toggle" onclick="toggleTheme()">
-                <i class="fas fa-moon"></i>
-            </button>
-        </div>
-        {% with messages = get_flashed_messages(with_categories=true) %}
-          {% if messages %}
-            {% for category, message in messages %}
-              <div class="flash {{ category }}">{{ message }}</div>
-            {% endfor %}
-          {% endif %}
-        {% endwith %}
-        <div class="filters-container">
-            <button class="category-filter" data-category="all" onclick="window.location.href='{{ url_for('catalog') }}'">Все категории</button>
-            {% for cat in categories %}
-            <button class="category-filter {% if cat | lower == category_name | lower %}active{% endif %}" data-category="{{ cat | lower }}" onclick="window.location.href='{{ url_for('catalog_by_category', category_name=cat | lower) }}'">{{ cat }}</button>
-            {% endfor %}
-        </div>
-        <div class="search-container">
-            <input type="text" id="search-input" placeholder="Поиск товаров...">
-        </div>
-        <div class="products-grid" id="products-grid">
-            {% for product in products %}
-            <div class="product" 
-                 data-name="{{ product['name']|lower }}" 
-                 data-description="{{ product['description']|lower }}"
-                 data-category="{{ product.get('category', 'Без категории')|lower }}">
-                <a href="javascript:void(0)" onclick="openProductDetailModal('{{ product.id }}')" class="product-image">
+            {% with messages = get_flashed_messages(with_categories=true) %}
+                {% if messages %}
+                    {% for category, message in messages %}
+                        <div class="flash {{ category }}">{{ message }}</div>
+                    {% endfor %}
+                {% endif %}
+            {% endwith %}
+            <div class="filters-container">
+                <button class="category-filter active" data-category="all">Все категории</button>
+                {% for category in categories %}
+                <button class="category-filter" data-category="{{ category | escape }}">{{ category | escape }}</button>
+                {% endfor %}
+            </div>
+            <div class="search-container">
+                <input type="text" id="search-input" placeholder="Поиск товаров...">
+            </div>
+            <div class="products-grid" id="products-grid">
+                {% for product in products %}
+                <div class="product" 
+                     data-name="{{ product['name']|lower }}" 
+                     data-description="{{ product['description']|lower }}"
+                     data-category="{{ product.get('category', 'Без категории')|lower }}">
                     {% if product.get('photos') and product['photos']|length > 0 %}
-                    {% set filename = product['photos'][0] %}
-                    {% if filename.endswith(('.mp4', '.mov', '.webm')) %}
-                        <video preload="metadata" muted loop autoplay playsinline><source src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ filename }}" type="video/mp4"></video>
-                    {% else %}
-                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ filename }}" 
+                    <div class="product-image">
+                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}?r={{ random.randint(1,1000) }}" 
                              alt="{{ product['name'] }}" 
                              loading="lazy">
-                    {% endif %}
+                    </div>
                     {% else %}
-                    <img src="https://via.placeholder.com/200x200?text=No+Image" 
-                         alt="Нет изображения" 
-                         loading="lazy">
+                    <div class="product-image">
+                        <img src="https://via.placeholder.com/200x200?text=No+Image" 
+                             alt="Нет изображения" 
+                             loading="lazy">
+                    </div>
                     {% endif %}
-                </a>
-                <h2>{{ product['name'] }}</h2>
-                <div class="product-price">{{ "%.2f"|format(product['price']) }} с</div>
-                <p class="product-description">{{ product['description'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p>
-                <div class="product-actions">
-                    <button class="product-button" onclick="openProductDetailModal('{{ product.id }}')">Подробнее</button>
-                    <button class="product-button add-to-cart" onclick="openQuantityModal('{{ product.id }}')">В корзину</button>
+                    <h2>{{ product['name'] | escape }}</h2>
+                    <div class="product-price">{{ "%.2f"|format(product['price']) }} с</div>
+                    <p class="product-description">{{ product['description'][:50] | escape }}{% if product['description']|length > 50 %}...{% endif %}</p>
+                    <div class="product-actions">
+                        <button class="product-button" onclick="openModal('productModal', {{ loop.index0 }})">Подробнее</button>
+                        <button class="product-button add-to-cart" onclick="openModal('quantityModal', {{ loop.index0 }})">В корзину</button>
+                    </div>
                 </div>
+                {% endfor %}
             </div>
-            {% else %}
-            <p style="grid-column: 1 / -1; text-align: center; padding: 40px 0;">В этой категории пока нет товаров.</p>
-            {% endfor %}
         </div>
-    </div>
 
-    <div id="quantityModal" class="modal">
-        <div class="modal-content">
-            <span class="close" onclick="closeModal('quantityModal')">×</span>
-            <h2>Укажите количество, цвет и модель</h2>
-            <input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
-            <select id="colorSelect" class="color-select"></select>
-            <select id="modelSelect" class="model-select"></select>
-            <div class="modal-buttons">
-                <button class="product-button order-button" onclick="confirmAddToCart()">Добавить</button>
+        <div id="productModal" class="modal">
+            <div class="modal-content">
+                <span class="close" onclick="closeModal('productModal')">×</span>
+                <div id="modalContent"></div>
             </div>
         </div>
-    </div>
 
-    <div id="cartModal" class="modal">
-        <div class="modal-content">
-            <span class="close" onclick="closeModal('cartModal')">×</span>
-            <h2>Корзина</h2>
-            <div id="cartContent"></div>
-            <div style="margin-top: 20px; text-align: right;">
-                <strong style="font-size: 1.2rem;">Итого: <span id="cartTotal">0</span> с</strong>
+        <div id="quantityModal" class="modal">
+            <div class="modal-content">
+                <span class="close" onclick="closeModal('quantityModal')">×</span>
+                <h2>Укажите количество, цвет и модель</h2>
+                <input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
+                <select id="colorSelect" class="color-select"></select>
+                <select id="modelSelect" class="model-select"></select>
                 <div class="modal-buttons">
-                    <button class="product-button clear-cart" onclick="clearCart()">Очистить</button>
-                    <button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button>
+                    <button class="product-button order-button" onclick="confirmAddToCart()">Добавить</button>
                 </div>
             </div>
         </div>
-    </div>
 
-    <div id="productDetailModal" class="modal">
-        <div class="modal-content">
-            <span class="close" onclick="closeModal('productDetailModal')">×</span>
-            <div class="product-detail-modal-inner">
-                <h2 id="detailProductName"></h2>
-                <div class="swiper-container" style="max-width: 500px; margin: 0 auto 30px;">
-                    <div class="swiper-wrapper" id="detailProductMedia">
+        <div id="cartModal" class="modal">
+            <div class="modal-content">
+                <span class="close" onclick="closeModal('cartModal')">×</span>
+                <h2>Корзина</h2>
+                <div id="cartContent"></div>
+                <div style="margin-top: 20px; text-align: right;">
+                    <strong style="font-size: 1.2rem;">Итого: <span id="cartTotal">0</span> с</strong>
+                    <div class="modal-buttons">
+                        <button class="product-button clear-cart" onclick="clearCart()">Очистить</button>
+                        <button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button>
                     </div>
-                    <div class="swiper-pagination"></div>
-                    <div class="swiper-button-next"></div>
-                    <div class="swiper-button-prev"></div>
-                </div>
-                <p><strong>Категория:</strong> <span id="detailProductCategory" style="color: var(--primary-color);"></span></p>
-                <p class="price" id="detailProductPrice"></p>
-                <p class="description"><strong>Описание:</strong> <span id="detailProductDescription"></span></p>
-                <p><strong>Доступные цвета:</strong> <span id="detailProductColors" style="color: var(--secondary-text-color-light);"></span></p>
-                <p><strong>Доступные модели:</strong> <span id="detailProductModels" style="color: var(--secondary-text-color-light);"></span></p>
-                <div class="product-detail-modal-actions">
-                    <button class="product-button add-to-cart" id="detailAddToCartButton">В корзину</button>
                 </div>
             </div>
         </div>
-    </div>
 
-    <button id="cart-button" onclick="openCartModal()">
-        <i class="fas fa-shopping-cart"></i>
-        <span id="cart-count" class="cart-count">0</span>
-    </button>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
-    <script>
-        const products = {{ products_all|tojson }};
-        let selectedProductId = null;
-        let detailSwiperInstance = null;
-
-        function toggleTheme() {
-            document.body.classList.toggle('dark-mode');
-            const icon = document.querySelector('.theme-toggle i');
-            icon.classList.toggle('fa-moon');
-            icon.classList.toggle('fa-sun');
-            localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
-        }
-
-        if (localStorage.getItem('theme') === 'dark') {
-            document.body.classList.add('dark-mode');
-            const icon = document.querySelector('.theme-toggle i');
-            if (icon) icon.classList.replace('fa-moon', 'fa-sun');
-        } else {
-            const icon = document.querySelector('.theme-toggle i');
-            if (icon) icon.classList.replace('fa-sun', 'fa-moon');
-        }
-
-        function closeModal(modalId) {
-            document.getElementById(modalId).style.display = "none";
-            if (modalId === 'productDetailModal' && detailSwiperInstance) {
-                detailSwiperInstance.destroy(true, true);
-                detailSwiperInstance = null;
-            }
-        }
-
-        function openQuantityModal(productId) {
-            selectedProductId = productId;
-            const product = products.find(p => p.id === productId);
-            if (!product) {
-                alert('Ошибка: Товар не найден.');
-                return;
+        <button id="cart-button" onclick="openCartModal()">
+            <i class="fas fa-shopping-cart"></i>
+            <span id="cart-count" class="cart-count">0</span>
+        </button>
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
+        <script>
+            const products = {{ products|tojson }};
+            let selectedProductIndex = null;
+
+            function toggleTheme() {
+                document.body.classList.toggle('dark-mode');
+                const icon = document.querySelector('.theme-toggle i');
+                icon.classList.toggle('fa-moon');
+                icon.classList.toggle('fa-sun');
+                localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
             }
-            
-            const colorSelect = document.getElementById('colorSelect');
-            colorSelect.innerHTML = '';
-            if (product.colors && product.colors.length > 0) {
-                product.colors.forEach(color => {
-                    const option = document.createElement('option');
-                    option.value = color;
-                    option.text = color;
-                    colorSelect.appendChild(option);
-                });
+
+            if (localStorage.getItem('theme') === 'dark') {
+                document.body.classList.add('dark-mode');
+                document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun');
             } else {
-                const option = document.createElement('option');
-                option.value = 'Не указан';
-                option.text = 'Цвет не указан';
-                colorSelect.appendChild(option);
+                document.querySelector('.theme-toggle i').classList.replace('fa-sun', 'fa-moon');
             }
 
-            const modelSelect = document.getElementById('modelSelect');
-            modelSelect.innerHTML = '';
-            if (product.models && product.models.length > 0) {
-                product.models.forEach(model => {
-                    const option = document.createElement('option');
-                    option.value = model;
-                    option.text = model;
-                    modelSelect.appendChild(option);
+            function openModal(modalId, index) {
+                if (modalId === 'productModal') {
+                    selectedProductIndex = index;
+                    loadProductDetails(index);
+                } else if (modalId === 'quantityModal') {
+                    selectedProductIndex = index;
+                    populateQuantityModal(index);
+                }
+                document.getElementById(modalId).style.display = "block";
+            }
+
+            function closeModal(modalId) {
+                document.getElementById(modalId).style.display = "none";
+            }
+
+            function loadProductDetails(index) {
+                fetch('/product_modal_content/' + index)
+                    .then(response => response.text())
+                    .then(data => {
+                        document.getElementById('modalContent').innerHTML = data;
+                        initializeSwiper();
+                    })
+                    .catch(error => console.error('Ошибка при загрузке деталей продукта:', error));
+            }
+
+            function initializeSwiper() {
+                const swiper = new Swiper('.swiper-container', {
+                    slidesPerView: 1,
+                    spaceBetween: 20,
+                    loop: true,
+                    grabCursor: true,
+                    pagination: { el: '.swiper-pagination', clickable: true },
+                    navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
+                    zoom: { maxRatio: 3 },
+                    on: {
+                        init: function () {
+                            this.slides.forEach(slide => {
+                                const img = slide.querySelector('img');
+                                if (img && !img.complete) {
+                                    img.onload = () => swiper.update();
+                                }
+                            });
+                        },
+                        resize: function() {
+                            this.update();
+                        }
+                    }
                 });
-            } else {
-                const option = document.createElement('option');
-                option.value = 'Не указана';
-                option.text = 'Модель не указана';
-                modelSelect.appendChild(option);
-            }
-
-            document.getElementById('quantityModal').style.display = 'block';
-            document.getElementById('quantityInput').value = 1;
-        }
-
-        function confirmAddToCart() {
-            if (selectedProductId === null) return;
-            const quantityInput = document.getElementById('quantityInput');
-            const quantity = parseInt(quantityInput.value) || 1;
-            const color = document.getElementById('colorSelect').value;
-            const model = document.getElementById('modelSelect').value;
-            
-            if (quantity <= 0) {
-                alert("Укажите количество больше 0.");
-                quantityInput.focus();
-                return;
             }
-            
-            let cart = JSON.parse(localStorage.getItem('cart') || '[]');
-            const product = products.find(p => p.id === selectedProductId);
 
-            const cartItemId = `${product.id}-${color}-${model}`; 
-            const existingItem = cart.find(item => item.cartId === cartItemId);
+            function populateQuantityModal(index) {
+                selectedProductIndex = index;
+                const product = products[index];
+                
+                const colorSelect = document.getElementById('colorSelect');
+                colorSelect.innerHTML = '';
+                if (product.colors && product.colors.length > 0) {
+                    product.colors.forEach(color => {
+                        const option = document.createElement('option');
+                        option.value = color;
+                        option.text = color;
+                        colorSelect.appendChild(option);
+                    });
+                } else {
+                    const option = document.createElement('option');
+                    option.value = 'Не указан';
+                    option.text = 'Цвет не указан';
+                    colorSelect.appendChild(option);
+                }
+
+                const modelSelect = document.getElementById('modelSelect');
+                modelSelect.innerHTML = '';
+                if (product.models && product.models.length > 0) {
+                    product.models.forEach(model => {
+                        const option = document.createElement('option');
+                        option.value = model;
+                        option.text = model;
+                        modelSelect.appendChild(option);
+                    });
+                } else {
+                    const option = document.createElement('option');
+                    option.value = 'Не указана';
+                    option.text = 'Модель не указана';
+                    modelSelect.appendChild(option);
+                }
 
-            if (existingItem) {
-                existingItem.quantity += quantity;
-            } else {
-                cart.push({
-                    cartId: cartItemId,
-                    productId: product.id,
-                    name: product.name,
-                    price: product.price,
-                    photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
-                    quantity: quantity,
-                    color: color,
-                    model: model
-                });
+                document.getElementById('quantityInput').value = 1;
             }
 
-            localStorage.setItem('cart', JSON.stringify(cart));
-            closeModal('quantityModal');
-            updateCartButton();
-            alert(`"${product.name}" добавлен в корзину.`);
-        }
-
-        function updateCartButton() {
-            const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-            const cartCount = cart.reduce((sum, item) => sum + item.quantity, 0);
-            document.getElementById('cart-count').textContent = cartCount;
-            document.getElementById('cart-button').style.display = cartCount > 0 ? 'flex' : 'none';
-        }
-
-        function openCartModal() {
-            const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-            const cartContent = document.getElementById('cartContent');
-            let total = 0;
-
-            cartContent.innerHTML = cart.length === 0 ? '<p style="text-align: center; color: var(--secondary-text-color-light);">Корзина пуста</p>' : cart.map((item, index) => {
-                const itemTotal = item.price * item.quantity;
-                total += itemTotal;
-                const photoSrc = item.photo ? `https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}` : 'https://via.placeholder.com/60x60?text=No+Image';
-                return `
-                    <div class="cart-item">
-                        <img src="${photoSrc}" alt="${item.name}">
-                        <div class="cart-item-details">
-                            <strong>${item.name}</strong>
-                            <p>${item.price.toFixed(2)} с × ${item.quantity} (Цвет: ${item.color}, Модель: ${item.model})</p>
+            function confirmAddToCart() {
+                if (selectedProductIndex === null) return;
+                const quantityInput = document.getElementById('quantityInput');
+                const quantity = parseInt(quantityInput.value) || 1;
+                const color = document.getElementById('colorSelect').value;
+                const model = document.getElementById('modelSelect').value;
+                
+                if (quantity <= 0) {
+                    alert("Укажите количество больше 0.");
+                    quantityInput.focus();
+                    return;
+                }
+                
+                let cart = JSON.parse(localStorage.getItem('cart') || '[]');
+                const product = products[selectedProductIndex];
+                const cartItemId = `${product.id}-${color}-${model}`; // Use product ID for better uniqueness
+                const existingItem = cart.find(item => item.id === cartItemId);
+
+                if (existingItem) {
+                    existingItem.quantity += quantity;
+                } else {
+                    cart.push({
+                        id: cartItemId,
+                        product_id: product.id, // Store original product ID
+                        name: product.name,
+                        price: product.price,
+                        photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
+                        quantity: quantity,
+                        color: color,
+                        model: model
+                    });
+                }
+
+                localStorage.setItem('cart', JSON.stringify(cart));
+                closeModal('quantityModal');
+                updateCartButton();
+            }
+
+            function updateCartButton() {
+                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
+                const cartCount = cart.reduce((sum, item) => sum + item.quantity, 0);
+                document.getElementById('cart-count').textContent = cartCount;
+                document.getElementById('cart-button').style.display = cartCount > 0 ? 'flex' : 'none';
+            }
+
+            function openCartModal() {
+                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
+                const cartContent = document.getElementById('cartContent');
+                let total = 0;
+
+                cartContent.innerHTML = cart.length === 0 ? '<p style="text-align: center; color: var(--secondary-text-color-light);">Корзина пуста</p>' : cart.map(item => {
+                    const itemTotal = item.price * item.quantity;
+                    total += itemTotal;
+                    const photoSrc = item.photo ? `https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}` : 'https://via.placeholder.com/60x60?text=No+Image';
+                    return `
+                        <div class="cart-item">
+                            <img src="${photoSrc}" alt="${item.name}">
+                            <div class="cart-item-details">
+                                <strong>${item.name}</strong>
+                                <p>${item.price} с × ${item.quantity} (Цвет: ${item.color}, Модель: ${item.model})</p>
+                            </div>
+                            <span class="cart-item-total">${itemTotal} с</span>
                         </div>
-                        <span class="cart-item-total">${itemTotal.toFixed(2)} с</span>
-                    </div>
-                `;
-            }).join('');
-
-            document.getElementById('cartTotal').textContent = total.toFixed(2);
-            document.getElementById('cartModal').style.display = 'block';
-        }
-
-        function orderViaWhatsApp() {
-            const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-            if (cart.length === 0) {
-                alert("Корзина пуста!");
-                return;
-            }
-            let total = 0;
-            let orderText = "Здравствуйте, меня интересует заказ:%0A%0A";
-            cart.forEach((item, index) => {
-                const itemTotal = item.price * item.quantity;
-                total += itemTotal;
-                orderText += `${index + 1}. ${item.name}%0AКоличество: ${item.quantity}%0AЦена: ${item.price.toFixed(2)} с%0AЦвет: ${item.color}%0AМодель: ${item.model}%0A--%0A`;
-            });
-            orderText += `*Итого к оплате: ${total.toFixed(2)} с*%0A%0AЖду подтверждения заказа.`;
-            window.open(`https://api.whatsapp.com/send?phone=996705665777&text=${orderText}`, '_blank');
-            clearCart();
-        }
-
-        function clearCart() {
-            localStorage.removeItem('cart');
-            openCartModal();
-            updateCartButton();
-        }
-
-        window.onclick = function(event) {
-            if (event.target.classList.contains('modal')) {
-                event.target.style.display = "none";
-                if (detailSwiperInstance) {
-                    detailSwiperInstance.destroy(true, true);
-                    detailSwiperInstance = null;
+                    `;
+                }).join('');
+
+                document.getElementById('cartTotal').textContent = total.toFixed(2);
+                document.getElementById('cartModal').style.display = 'block';
+            }
+
+            function orderViaWhatsApp() {
+                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
+                if (cart.length === 0) {
+                    alert("Корзина пуста!");
+                    return;
                 }
+                let total = 0;
+                let orderText = "Здравствуйте, меня интересует заказ:%0A%0A";
+                cart.forEach((item, index) => {
+                    const itemTotal = item.price * item.quantity;
+                    total += itemTotal;
+                    orderText += `${index + 1}. ${item.name}%0AКоличество: ${item.quantity}%0AЦена: ${item.price} с%0AЦвет: ${item.color}%0AМодель: ${item.model}%0A--%0A`;
+                });
+                orderText += `*Итого к оплате: ${total.toFixed(2)} с*%0A%0AЖду подтверждения заказа.`;
+                window.open(`https://api.whatsapp.com/send?phone=996705665777&text=${orderText}`, '_blank');
             }
-        }
 
-        document.getElementById('search-input').addEventListener('input', filterProducts);
+            function clearCart() {
+                localStorage.removeItem('cart');
+                openCartModal();
+                updateCartButton();
+            }
 
-        function filterProducts() {
-            const searchTerm = document.getElementById('search-input').value.toLowerCase().trim();
-            const activeCategory = "{{ category_name | lower }}";
-            
-            document.querySelectorAll('.product').forEach(product => {
-                const name = product.getAttribute('data-name');
-                const description = product.getAttribute('data-description');
-                
-                const matchesSearch = (name && name.includes(searchTerm)) || (description && description.includes(searchTerm));
-                
-                product.style.display = matchesSearch ? 'flex' : 'none';
+            window.onclick = function(event) {
+                if (event.target.classList.contains('modal')) {
+                    event.target.style.display = "none";
+                }
+            }
+
+            document.getElementById('search-input').addEventListener('input', filterProducts);
+            document.querySelectorAll('.category-filter').forEach(filter => {
+                filter.addEventListener('click', function() {
+                    document.querySelectorAll('.category-filter').forEach(f => f.classList.remove('active'));
+                    this.classList.add('active');
+                    filterProducts();
+                });
             });
-        }
-
-        function openProductDetailModal(productId) {
-            selectedProductId = productId;
-            const product = products.find(p => p.id === productId);
-            if (!product) {
-                alert('Ошибка: Товар не найден.');
-                return;
-            }
-
-            document.getElementById('detailProductName').textContent = product.name;
-            document.getElementById('detailProductCategory').textContent = product.category || 'Без категории';
-            document.getElementById('detailProductPrice').textContent = `${product.price.toFixed(2)} с`;
-            document.getElementById('detailProductDescription').textContent = product.description;
-            document.getElementById('detailProductColors').textContent = product.colors && product.colors.length > 0 ? product.colors.join(', ') : 'Нет цветов';
-            document.getElementById('detailProductModels').textContent = product.models && product.models.length > 0 ? product.models.join(', ') : 'Нет моделей';
-            document.getElementById('detailAddToCartButton').onclick = () => openQuantityModal(product.id);
-
-            const mediaContainer = document.getElementById('detailProductMedia');
-            mediaContainer.innerHTML = '';
-            if (product.photos && product.photos.length > 0) {
-                product.photos.forEach(filename => {
-                    const slide = document.createElement('div');
-                    slide.className = 'swiper-slide swiper-zoom-container';
-                    slide.style = "display: flex; justify-content: center; align-items: center; border-radius: 10px;";
+
+            function filterProducts() {
+                const searchTerm = document.getElementById('search-input').value.toLowerCase().trim();
+                const activeCategory = document.querySelector('.category-filter.active').dataset.category.toLowerCase();
+                document.querySelectorAll('.product').forEach(product => {
+                    const name = product.getAttribute('data-name');
+                    const description = product.getAttribute('data-description');
+                    const category = product.getAttribute('data-category');
                     
-                    const mediaUrl = `https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${filename}`;
-                    if (filename.endsWith(('.mp4', '.mov', '.webm'))) {
-                        slide.innerHTML = `<video controls preload="metadata" style="max-width: 100%; max-height: 350px; object-fit: contain;"><source src="${mediaUrl}" type="video/mp4"></video>`;
-                    } else {
-                        slide.innerHTML = `<img src="${mediaUrl}" alt="${product.name}" style="max-width: 100%; max-height: 350px; object-fit: contain;">`;
-                    }
-                    mediaContainer.appendChild(slide);
+                    const matchesSearch = (name && name.includes(searchTerm)) || (description && description.includes(searchTerm));
+                    const matchesCategory = activeCategory === 'all' || category === activeCategory;
+                    
+                    product.style.display = matchesSearch && matchesCategory ? 'flex' : 'none';
                 });
-            } else {
-                const slide = document.createElement('div');
-                slide.className = 'swiper-slide swiper-zoom-container';
-                slide.style = "display: flex; justify-content: center; align-items: center; border-radius: 10px;";
-                slide.innerHTML = `<img src="https://via.placeholder.com/300x300?text=No+Image" alt="No Image">`;
-                mediaContainer.appendChild(slide);
             }
-            
-            document.getElementById('productDetailModal').style.display = 'block';
-            
-            if (detailSwiperInstance) {
-                detailSwiperInstance.destroy(true, true);
-            }
-            detailSwiperInstance = new Swiper('#productDetailModal .swiper-container', {
-                slidesPerView: 1,
-                spaceBetween: 20,
-                loop: true,
-                grabCursor: true,
-                pagination: { el: '#productDetailModal .swiper-pagination', clickable: true },
-                navigation: { nextEl: '#productDetailModal .swiper-button-next', prevEl: '#productDetailModal .swiper-button-prev' },
-                zoom: { maxRatio: 3 },
-                on: {
-                    init: function () {
-                        this.slides.forEach(slide => {
-                            const img = slide.querySelector('img');
-                            if (img && !img.complete) {
-                                img.onload = () => detailSwiperInstance.update();
-                            }
-                            const video = slide.querySelector('video');
-                            if (video) {
-                                video.onloadedmetadata = () => detailSwiperInstance.update();
-                            }
-                        });
-                    },
-                    resize: function() {
-                        this.update();
-                    }
-                }
-            });
-            detailSwiperInstance.update();
-        }
-
-        updateCartButton();
-    </script>
-</body>
-</html>
-    ''',
-    products=products,
-    categories=categories,
-    category_name=category_name,
-    products_all=products_all,
-    repo_id=REPO_ID,
-    LOGO_URL=LOGO_URL
-    )
+
+            updateCartButton();
+        </script>
+    </body>
+    </html>
+    '''
+    return render_template_string(catalog_html, products=products, categories=categories, repo_id=REPO_ID, LOGO_URL=LOGO_URL, random=random)
+
+@app.route('/product_modal_content/<int:index>')
+def product_modal_content(index):
+    data = load_data()
+    products = data['products']
+    try:
+        product = products[index]
+    except IndexError:
+        return "Продукт не найден", 404
+    detail_html = '''
+    <div class="product-detail-modal" style="padding: 20px;">
+        <h2 style="font-size: 1.8rem; font-weight: 700; margin-bottom: 25px; text-align: center;">{{ product['name'] | escape }}</h2>
+        <div class="swiper-container" style="max-width: 450px; margin: 0 auto 30px;">
+            <div class="swiper-wrapper">
+                {% if product.get('photos') %}
+                {% for photo in product['photos'] %}
+                <div class="swiper-slide swiper-zoom-container" style="background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; border-radius: 10px;">
+                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}?r={{ random.randint(1,1000) }}" 
+                             alt="{{ product['name'] | escape }}" 
+                             style="max-width: 100%; max-height: 300px; object-fit: contain;">
+                </div>
+                {% endfor %}
+                {% else %}
+                <div class="swiper-slide swiper-zoom-container" style="background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; border-radius: 10px;">
+                    <img src="https://via.placeholder.com/300x300?text=No+Image" alt="No Image">
+                </div>
+                {% endif %}
+            </div>
+            <div class="swiper-pagination"></div>
+            <div class="swiper-button-next"></div>
+            <div class="swiper-button-prev"></div>
+        </div>
+        <p style="margin-bottom: 10px; font-size: 1rem;"><strong>Категория:</strong> <span style="color: var(--primary-color);">{{ product.get('category', 'Без категории') | escape }}</span></p>
+        <p style="margin-bottom: 10px; font-size: 1.1rem;"><strong>Цена:</strong> <span style="color: var(--danger-color); font-weight: 700;">{{ "%.2f"|format(product['price']) }} с</span></p>
+        <p style="margin-bottom: 15px; font-size: 1rem;"><strong>Описание:</strong> {{ product['description'] | escape }}</p>
+        <p style="margin-bottom: 10px; font-size: 0.95rem;"><strong>Доступные цвета:</strong> <span style="color: var(--secondary-text-color-light);">{{ product.get('colors', ['Нет цветов'])|join(', ') | escape }}</span></p>
+        <p style="margin-bottom: 10px; font-size: 0.95rem;"><strong>Доступные модели:</strong> <span style="color: var(--secondary-text-color-light);">{{ product.get('models', ['Нет моделей'])|join(', ') | escape }}</span></p>
+    </div>
+    '''
+    return render_template_string(detail_html, product=product, repo_id=REPO_ID, random=random)
 
 @app.route('/admin', methods=['GET', 'POST'])
 def admin():
     data = load_data()
-    products = data.get('products', [])
-    categories = data.get('categories', [])
+    products = data['products']
+    categories = data['categories']
 
     if request.method == 'POST':
         action = request.form.get('action')
-        api = HfApi()
-
+        
         if action == 'add_category':
             category_name = request.form.get('category_name', '').strip()
             if category_name and category_name not in categories:
@@ -1698,14 +1147,19 @@ def admin():
             return redirect(url_for('admin'))
 
         elif action == 'delete_category':
-            category_name_to_delete = request.form.get('category_name')
-            if category_name_to_delete in categories:
-                categories.remove(category_name_to_delete)
+            try:
+                category_index = int(request.form.get('category_index'))
+            except (TypeError, ValueError):
+                flash('Ошибка: Неверный индекс категории.', 'error')
+                return redirect(url_for('admin'))
+
+            if 0 <= category_index < len(categories):
+                deleted_category = categories.pop(category_index)
                 for product in products:
-                    if product.get('category') == category_name_to_delete:
+                    if product.get('category') == deleted_category:
                         product['category'] = 'Без категории'
                 save_data(data)
-                flash('Категория удалена. Связанные товары теперь в категории "Без категории".', 'success')
+                flash('Категория удалена.', 'success')
                 return redirect(url_for('admin'))
             flash('Ошибка: Категория не найдена.', 'error')
             return redirect(url_for('admin'))
@@ -1718,6 +1172,7 @@ def admin():
             photos_files = request.files.getlist('photos')
             colors = [c.strip() for c in request.form.getlist('colors') if c.strip()]
             models = [m.strip() for m in request.form.getlist('models') if m.strip()]
+            photos_list = []
             
             if not name or not price or not description:
                 flash('Ошибка: Заполните все обязательные поля (Название, Цена, Описание).', 'error')
@@ -1729,12 +1184,12 @@ def admin():
                 flash('Ошибка: Неверный формат цены.', 'error')
                 return redirect(url_for('admin'))
 
-            photos_list = []
             if photos_files and any(f.filename for f in photos_files):
                 uploads_dir = 'uploads'
                 os.makedirs(uploads_dir, exist_ok=True)
+                api = HfApi()
                 for i, photo in enumerate(photos_files[:10]):
-                    if photo and allowed_file(photo.filename):
+                    if photo and photo.filename and allowed_file(photo.filename):
                         base, extension = os.path.splitext(photo.filename)
                         unique_filename = secure_filename(f"{name.replace(' ','_')}_{int(time.time())}_{i}{extension}")
                         temp_path = os.path.join(uploads_dir, unique_filename)
@@ -1764,9 +1219,7 @@ def admin():
                 'category': category if category in categories else 'Без категории',
                 'photos': photos_list,
                 'colors': colors,
-                'models': models,
-                'in_stock': True,
-                'is_top': False
+                'models': models
             }
             products.append(new_product)
             save_data(data)
@@ -1774,10 +1227,13 @@ def admin():
             return redirect(url_for('admin'))
                 
         elif action == 'edit':
-            product_id = request.form.get('product_id')
-            product_to_edit = next((p for p in products if p.get('id') == product_id), None)
+            try:
+                index = int(request.form.get('index'))
+            except (TypeError, ValueError):
+                flash('Ошибка: Неверный индекс товара для редактирования.', 'error')
+                return redirect(url_for('admin'))
 
-            if not product_to_edit:
+            if not (0 <= index < len(products)):
                 flash('Ошибка: Товар не найден для редактирования.', 'error')
                 return redirect(url_for('admin'))
 
@@ -1799,27 +1255,20 @@ def admin():
                 flash('Ошибка: Неверный формат цены при редактировании.', 'error')
                 return redirect(url_for('admin'))
 
-            product_to_edit['name'] = name
-            product_to_edit['price'] = price
-            product_to_edit['description'] = description
-            product_to_edit['category'] = category if category in categories else 'Без категории'
-            product_to_edit['colors'] = colors
-            product_to_edit['models'] = models
+            products[index]['name'] = name
+            products[index]['price'] = price
+            products[index]['description'] = description
+            products[index]['category'] = category if category in categories else 'Без категории'
+            products[index]['colors'] = colors
+            products[index]['models'] = models
 
             if photos_files and any(f.filename for f in photos_files):
                 new_photos_list = []
                 uploads_dir = 'uploads'
                 os.makedirs(uploads_dir, exist_ok=True)
-                
-                for old_filename in product_to_edit.get('photos', []):
-                    try:
-                        api.delete_file(path_in_repo=f"photos/{old_filename}", repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN_WRITE)
-                        logging.info(f"Старое фото {old_filename} удалено из HF.")
-                    except Exception as e:
-                        logging.error(f"Не удалось удалить старое фото {old_filename} из HF: {e}")
-
+                api = HfApi()
                 for i, photo in enumerate(photos_files[:10]):
-                    if photo and allowed_file(photo.filename):
+                    if photo and photo.filename and allowed_file(photo.filename):
                         base, extension = os.path.splitext(photo.filename)
                         unique_filename = secure_filename(f"{name.replace(' ','_')}_{int(time.time())}_{i}{extension}")
                         temp_path = os.path.join(uploads_dir, unique_filename)
@@ -1836,39 +1285,33 @@ def admin():
                             new_photos_list.append(unique_filename)
                         except Exception as e:
                             logging.error(f"Ошибка при загрузке нового фото {unique_filename}: {e}")
-                            flash(f'Ошибка при загрузке нового фото {photo.filename}: {e}', 'error')
+                            flash(f'Ошибка при загрузке фото {photo.filename}: {e}', 'error')
                         finally:
                             if os.path.exists(temp_path):
                                 os.remove(temp_path)
-                
-                product_to_edit['photos'] = new_photos_list
+                if new_photos_list:
+                    products[index]['photos'] = new_photos_list
             
             save_data(data)
-            flash('Товар успешно отредактирован.', 'success')
+            flash('Товар успешно обновлен.', 'success')
             return redirect(url_for('admin'))
             
         elif action == 'delete':
-            product_id = request.form.get('product_id')
-            product_to_delete = next((p for p in products if p.get('id') == product_id), None)
-            
-            if product_to_delete:
-                for filename in product_to_delete.get('photos', []):
-                    try:
-                        api.delete_file(path_in_repo=f"photos/{filename}", repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN_WRITE)
-                        logging.info(f"Фото {filename} удалено из HF.")
-                    except Exception as e:
-                        logging.error(f"Не удалось удалить фото {filename} из HF: {e}")
-
-                data['products'] = [p for p in products if p.get('id') != product_id]
+            try:
+                index = int(request.form.get('index'))
+            except (TypeError, ValueError):
+                flash('Ошибка: Неверный индекс товара для удаления.', 'error')
+                return redirect(url_for('admin'))
+
+            if 0 <= index < len(products):
+                del products[index]
                 save_data(data)
                 flash('Товар удален.', 'success')
                 return redirect(url_for('admin'))
             flash('Ошибка: Товар не найден для удаления.', 'error')
             return redirect(url_for('admin'))
     
-    products.sort(key=lambda p: p['name'].lower())
-
-    return render_template_string('''
+    admin_html = '''
     <!DOCTYPE html>
     <html lang="ru">
     <head>
@@ -1876,7 +1319,29 @@ def admin():
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Админ-панель ZZIRIX</title>
         <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
-        <style>''' + BASE_STYLE + '''
+        <style>
+            :root {
+                --primary-color: #3B82F6;
+                --primary-dark-color: #2563eb;
+                --accent-color: #10b981;
+                --accent-dark-color: #059669;
+                --danger-color: #ef4444;
+                --danger-dark-color: #dc2626;
+                --background-light: linear-gradient(135deg, #f8f9fa, #e9ecef);
+                --background-dark: linear-gradient(135deg, #1a202c, #2d3748);
+                --card-background-light: #ffffff;
+                --card-background-dark: #2d3748;
+                --text-color-light: #2d3748;
+                --text-color-dark: #e2e8f0;
+                --secondary-text-color-light: #718096;
+                --secondary-text-color-dark: #a0aec0;
+                --border-color-light: #e2e8f0;
+                --border-color-dark: #4a5568;
+                --shadow-light: 0 6px 20px rgba(0, 0, 0, 0.08);
+                --shadow-hover-light: 0 10px 30px rgba(0, 0, 0, 0.15);
+                --shadow-dark: 0 6px 20px rgba(0, 0, 0, 0.25);
+                --shadow-hover-dark: 0 10px 30px rgba(0, 0, 0, 0.4);
+            }
             body {
                 font-family: 'Roboto', sans-serif;
                 background: var(--background-light);
@@ -1920,7 +1385,7 @@ def admin():
             form {
                 background: var(--card-background-light);
                 padding: 30px;
-                border-radius: var(--border-radius-large);
+                border-radius: 20px;
                 box-shadow: var(--shadow-light);
                 margin-bottom: 30px;
                 transition: background 0.3s, box-shadow 0.3s;
@@ -1944,7 +1409,7 @@ def admin():
                 padding: 12px;
                 margin-bottom: 10px;
                 border: 1px solid var(--border-color-light);
-                border-radius: var(--border-radius-medium);
+                border-radius: 10px;
                 font-size: 1rem;
                 transition: all 0.3s ease;
                 background-color: var(--card-background-light);
@@ -1963,7 +1428,7 @@ def admin():
             button {
                 padding: 12px 22px;
                 border: none;
-                border-radius: var(--border-radius-medium);
+                border-radius: 10px;
                 background-color: var(--primary-color);
                 color: white;
                 font-weight: 500;
@@ -1992,7 +1457,7 @@ def admin():
             .product-item, .category-item {
                 background: var(--card-background-light);
                 padding: 20px;
-                border-radius: var(--border-radius-large);
+                border-radius: 18px;
                 box-shadow: var(--shadow-light);
                 transition: background 0.3s, box-shadow 0.3s;
             }
@@ -2021,7 +1486,7 @@ def admin():
                 margin-top: 20px;
                 padding: 20px;
                 background: var(--background-light);
-                border-radius: var(--border-radius-medium);
+                border-radius: 15px;
                 box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
             }
             body.dark-mode .edit-form {
@@ -2042,7 +1507,7 @@ def admin():
                 background-color: #ccc;
                 color: #555;
                 padding: 8px 12px;
-                border-radius: var(--border-radius-small);
+                border-radius: 8px;
                 font-size: 0.8rem;
                 margin-top: 0;
                 flex-shrink: 0;
@@ -2069,14 +1534,14 @@ def admin():
                 margin-top: 10px;
                 margin-bottom: 15px;
             }
-            .product-photos-preview img, .product-photos-preview video {
+            .product-photos-preview img {
                 max-width: 90px;
                 height: auto;
-                border-radius: var(--border-radius-small);
+                border-radius: 8px;
                 border: 1px solid var(--border-color-light);
                 box-shadow: 0 2px 8px rgba(0,0,0,0.05);
             }
-            body.dark-mode .product-photos-preview img, body.dark-mode .product-photos-preview video {
+            body.dark-mode .product-photos-preview img {
                 border-color: var(--border-color-dark);
                 box-shadow: 0 2px 8px rgba(0,0,0,0.15);
             }
@@ -2103,12 +1568,24 @@ def admin():
                 width: 100%;
                 max-width: 400px;
                 margin-left: 0;
-                border: 1px solid var(--border-color-light);
-                box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
             }
-            body.dark-mode #admin-search-input {
-                border-color: var(--border-color-dark);
-                box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
+
+            .flash {
+                padding: 15px;
+                margin-bottom: 20px;
+                border-radius: 8px;
+                font-weight: 500;
+                border: 1px solid transparent;
+            }
+            .flash.success { 
+                background-color: #d1fae5;
+                color: #065f46;
+                border-color: #34d399;
+            }
+            .flash.error {
+                background-color: #fee2e2;
+                color: #991b1b;
+                border-color: #ef4444;
             }
         </style>
     </head>
@@ -2119,9 +1596,7 @@ def admin():
                     <img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
                     <h1>Админ-панель</h1>
                 </div>
-                <a href="{{ url_for('catalog') }}" style="text-decoration: none;" class="product-button">Перейти в каталог</a>
             </div>
-
             {% with messages = get_flashed_messages(with_categories=true) %}
                 {% if messages %}
                     {% for category, message in messages %}
@@ -2143,11 +1618,11 @@ def admin():
                 <select name="category">
                     <option value="Без категории">Без категории</option>
                     {% for category in categories %}
-                    <option value="{{ category }}">{{ category }}</option>
+                    <option value="{{ category | escape }}">{{ category | escape }}</option>
                     {% endfor %}
                 </select>
-                <label>Фотографии и видео (до 10):</label>
-                <input type="file" name="photos" accept="image/*,video/*" multiple>
+                <label>Фотографии (до 10):</label>
+                <input type="file" name="photos" accept="image/*" multiple>
                 <label>Цвета:</label>
                 <div id="color-inputs">
                     <div class="color-input-group">
@@ -2179,10 +1654,10 @@ def admin():
             <div class="category-list">
                 {% for category in categories %}
                 <div class="category-item">
-                    <h3>{{ category }}</h3>
+                    <h3>{{ category | escape }}</h3>
                     <form method="POST" style="display: inline;">
                         <input type="hidden" name="action" value="delete_category">
-                        <input type="hidden" name="category_name" value="{{ category }}">
+                        <input type="hidden" name="category_index" value="{{ loop.index0 }}">
                         <button type="submit" class="delete-button">Удалить</button>
                     </form>
                 </div>
@@ -2209,28 +1684,18 @@ def admin():
                      data-name="{{ product['name']|lower }}" 
                      data-description="{{ product['description']|lower }}"
                      data-category="{{ product.get('category', 'без категории')|lower }}">
-                    <h3>{{ product['name'] }}</h3>
-                    <p><strong>ID:</strong> {{ product.id }}</p>
-                    <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
+                    <h3>{{ product['name'] | escape }}</h3>
+                    <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') | escape }}</p>
                     <p><strong>Цена:</strong> {{ "%.2f"|format(product['price']) }} с</p>
-                    <p><strong>Описание:</strong> {{ product['description'] }}</p>
-                    <p><strong>Цвета:</strong> {{ product.get('colors', ['Нет цветов'])|join(', ') }}</p>
-                    <p><strong>Модели:</strong> {{ product.get('models', ['Нет моделей'])|join(', ') }}</p>
+                    <p><strong>Описание:</strong> {{ product['description'] | escape }}</p>
+                    <p><strong>Цвета:</strong> {{ product.get('colors', ['Нет цветов'])|join(', ') | escape }}</p>
+                    <p><strong>Модели:</strong> {{ product.get('models', ['Нет моделей'])|join(', ') | escape }}</p>
                     {% if product.get('photos') and product['photos']|length > 0 %}
                     <div class="product-photos-preview">
                         {% for photo in product['photos'] %}
-                        {% if photo.endswith(('.mp4', '.mov', '.webm')) %}
-                            <video src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}?r={{ random.randint(1,1000) }}"
-                                   alt="{{ product['name'] }}"
-                                   loading="lazy"
-                                   controls
-                                   style="max-width: 90px; height: auto; border-radius: var(--border-radius-small); border: 1px solid var(--border-color-light); box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
-                            </video>
-                        {% else %}
-                            <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}?r={{ random.randint(1,1000) }}"
-                                 alt="{{ product['name'] }}"
-                                 loading="lazy">
-                        {% endif %}
+                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}?r={{ random.randint(1,1000) }}"
+                             alt="{{ product['name'] | escape }}"
+                             loading="lazy">
                         {% endfor %}
                     </div>
                     {% endif %}
@@ -2238,27 +1703,27 @@ def admin():
                         <summary style="font-weight: 500; cursor: pointer; color: var(--primary-color); margin-top: 15px;">Редактировать</summary>
                         <form method="POST" enctype="multipart/form-data" class="edit-form">
                             <input type="hidden" name="action" value="edit">
-                            <input type="hidden" name="product_id" value="{{ product.id }}">
+                            <input type="hidden" name="index" value="{{ loop.index0 }}">
                             <label>Название:</label>
-                            <input type="text" name="name" value="{{ product['name'] }}" required>
+                            <input type="text" name="name" value="{{ product['name'] | escape }}" required>
                             <label>Цена:</label>
-                            <input type="number" name="price" step="0.01" value="{{ "%.2f"|format(product['price']) }}" required>
+                            <input type="number" name="price" step="0.01" value="{{ product['price'] }}" required>
                             <label>Описание:</label>
-                            <textarea name="description" rows="4" required>{{ product['description'] }}</textarea>
+                            <textarea name="description" rows="4" required>{{ product['description'] | escape }}</textarea>
                             <label>Категория:</label>
                             <select name="category">
                                 <option value="Без категории" {% if product.get('category', 'Без категори��') == 'Без категории' %}selected{% endif %}>Без категории</option>
                                 {% for category in categories %}
-                                <option value="{{ category }}" {% if product.get('category') == category %}selected{% endif %}>{{ category }}</option>
+                                <option value="{{ category | escape }}" {% if product.get('category') == category %}selected{% endif %}>{{ category | escape }}</option>
                                 {% endfor %}
                             </select>
-                            <label>Фотографии и видео (заменят существующие, до 10):</label>
-                            <input type="file" name="photos" accept="image/*,video/*" multiple>
+                            <label>Фотографии (заменят существующие, до 10):</label>
+                            <input type="file" name="photos" accept="image/*" multiple>
                             <label>Цвета:</label>
-                            <div id="edit-color-inputs-{{ product.id }}">
+                            <div id="edit-color-inputs-{{ loop.index0 }}">
                                 {% for color in product.get('colors', []) %}
                                 <div class="color-input-group">
-                                    <input type="text" name="colors" value="{{ color }}">
+                                    <input type="text" name="colors" value="{{ color | escape }}">
                                     <button type="button" class="remove-input-btn" onclick="this.parentNode.remove()">X</button>
                                 </div>
                                 {% endfor %}
@@ -2267,12 +1732,12 @@ def admin():
                                     <button type="button" class="remove-input-btn" onclick="this.parentNode.remove()">X</button>
                                 </div>
                             </div>
-                            <button type="button" class="add-color-btn" onclick="addInput('edit-color-inputs-{{ product.id }}', 'colors', 'Цвет')">Добавить цвет</button>
+                            <button type="button" class="add-color-btn" onclick="addInput('edit-color-inputs-{{ loop.index0 }}', 'colors', 'Цвет')">Добавить цвет</button>
                             <label>Модели телефона:</label>
-                            <div id="edit-model-inputs-{{ product.id }}">
+                            <div id="edit-model-inputs-{{ loop.index0 }}">
                                 {% for model in product.get('models', []) %}
                                 <div class="model-input-group">
-                                    <input type="text" name="models" value="{{ model }}">
+                                    <input type="text" name="models" value="{{ model | escape }}">
                                     <button type="button" class="remove-input-btn" onclick="this.parentNode.remove()">X</button>
                                 </div>
                                 {% endfor %}
@@ -2281,13 +1746,13 @@ def admin():
                                     <button type="button" class="remove-input-btn" onclick="this.parentNode.remove()">X</button>
                                 </div>
                             </div>
-                            <button type="button" class="add-model-btn" onclick="addInput('edit-model-inputs-{{ product.id }}', 'models', 'Модель')">Добавить модель</button>
+                            <button type="button" class="add-model-btn" onclick="addInput('edit-model-inputs-{{ loop.index0 }}', 'models', 'Модель')">Добавить модель</button>
                             <button type="submit">Сохранить</button>
                         </form>
                     </details>
                     <form method="POST" style="margin-top: 15px;">
                         <input type="hidden" name="action" value="delete">
-                        <input type="hidden" name="product_id" value="{{ product.id }}">
+                        <input type="hidden" name="index" value="{{ loop.index0 }}">
                         <button type="submit" class="delete-button">Удалить товар</button>
                     </form>
                 </div>
@@ -2325,19 +1790,13 @@ def admin():
         </script>
     </body>
     </html>
-    ''',
-    products=products,
-    categories=categories,
-    repo_id=REPO_ID,
-    LOGO_URL=LOGO_URL,
-    random=random
-    )
+    '''
+    return render_template_string(admin_html, products=products, categories=categories, repo_id=REPO_ID, LOGO_URL=LOGO_URL, random=random)
 
 @app.route('/backup', methods=['POST'])
 def backup():
     try:
-        data = load_data()
-        save_data(data)
+        upload_db_to_hf()
         flash('Резервная копия успешно создана и загружена.', 'success')
         return redirect(url_for('admin'))
     except Exception as e: