/* ==================== ТЕМНАЯ ТЕМА ==================== */

body.dark-theme {
  background: 
    /* Декоративные круги и точки */
    radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(124, 58, 237, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 60%),
    /* Тонкая сетка */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(139, 92, 246, 0.03) 2px,
      rgba(139, 92, 246, 0.03) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(124, 58, 237, 0.03) 2px,
      rgba(124, 58, 237, 0.03) 4px
    ),
    /* Радиальные градиенты для глубины */
    radial-gradient(ellipse at top left, rgba(67, 56, 202, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at top right, rgba(139, 92, 246, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(124, 58, 237, 0.25) 0%, transparent 50%),
    /* Основной градиент */
    linear-gradient(135deg, #1e1b4b 0%, #312e81 20%, #1e1b4b 40%, #4c1d95 60%, #312e81 80%, #1e1b4b 100%) !important;
  background-size: 
    100% 100%,
    100% 100%,
    100% 100%,
    40px 40px,
    40px 40px,
    200% 200%,
    200% 200%,
    200% 200%,
    200% 200%,
    200% 200%;
  animation: gradientShift 20s ease infinite;
  color: #e0e7ff !important;
  position: relative;
}

/* Добавляем декоративные элементы через псевдоэлемент на .app */
body.dark-theme .app::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    /* Декоративные световые пятна с размытием */
    radial-gradient(circle at 10% 20%, rgba(167, 139, 250, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(196, 181, 253, 0.1) 0%, transparent 35%),
    radial-gradient(circle at 50% 10%, rgba(139, 92, 246, 0.08) 0%, transparent 30%),
    radial-gradient(circle at 30% 60%, rgba(124, 58, 237, 0.06) 0%, transparent 25%),
    radial-gradient(circle at 70% 40%, rgba(99, 102, 241, 0.05) 0%, transparent 20%);
  pointer-events: none;
  z-index: -1;
  animation: float 30s ease-in-out infinite;
  filter: blur(40px);
}

body.dark-theme .app::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    /* Тонкие линии для текстуры */
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 100px,
      rgba(167, 139, 250, 0.02) 100px,
      rgba(167, 139, 250, 0.02) 101px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 100px,
      rgba(139, 92, 246, 0.02) 100px,
      rgba(139, 92, 246, 0.02) 101px
    );
  pointer-events: none;
  z-index: -1;
  animation: slideLines 40s linear infinite;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  25% {
    transform: translate(30px, -40px) scale(1.15);
    opacity: 0.85;
  }
  50% {
    transform: translate(-20px, 30px) scale(0.95);
    opacity: 0.9;
  }
  75% {
    transform: translate(15px, 20px) scale(1.05);
    opacity: 0.88;
  }
}

@keyframes slideLines {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(100px, 100px);
  }
}

/* Основной контент и страницы */
body.dark-theme .content {
  background: transparent !important;
}

body.dark-theme .page {
  background: transparent !important;
}

body.dark-theme .page-content {
  background: transparent !important;
  color: #e0e7ff !important;
}

body.dark-theme .page-content h2 {
  color: #e0e7ff !important;
}

body.dark-theme .page-content p {
  color: #a5b4fc !important;
}

body.dark-theme .app-header {
  background: 
    linear-gradient(135deg, 
      rgba(30, 27, 75, 0.95) 0%, 
      rgba(49, 46, 129, 0.92) 50%,
      rgba(30, 27, 75, 0.9) 100%
    ) !important;
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 
    0 4px 20px rgba(67, 56, 202, 0.4),
    0 2px 8px rgba(139, 92, 246, 0.3),
    inset 0 1px 0 rgba(167, 139, 250, 0.1);
  border-bottom: 1px solid rgba(167, 139, 250, 0.2);
  position: relative;
  z-index: 10;
  background-size: 100% 100% !important;
  animation: none !important;
}

body.dark-theme .app-header::before {
  display: none !important;
  animation: none !important;
}

body.dark-theme .brand {
  background: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 25%, #818cf8 50%, #c4b5fd 75%, #a78bfa 100%) !important;
  background-size: 200% auto;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gradientFlow 4s ease infinite;
  filter: drop-shadow(0 2px 8px rgba(167, 139, 250, 0.5));
  color: transparent !important;
}

body.dark-theme .brand::after {
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.6), transparent) !important;
}

body.dark-theme .subtitle {
  color: #c7d2fe !important;
}

/* Фильтр и поиск */
body.dark-theme .filter-toggle {
  background: linear-gradient(135deg, rgba(49, 46, 129, 0.9), rgba(30, 27, 75, 0.85)) !important;
  background-size: 100% 100% !important;
  border-color: rgba(167, 139, 250, 0.5) !important;
  color: #c4b5fd !important;
  box-shadow: 0 2px 8px rgba(67, 56, 202, 0.4) !important;
  animation: none !important;
}

body.dark-theme .filter-toggle:hover {
  background: linear-gradient(135deg, rgba(49, 46, 129, 1), rgba(30, 27, 75, 0.95)) !important;
  border-color: rgba(196, 181, 253, 0.7) !important;
  box-shadow: 
    0 6px 20px rgba(139, 92, 246, 0.4),
    0 3px 10px rgba(167, 139, 250, 0.3) !important;
}

body.dark-theme .filter-label {
  background: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #c4b5fd 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gradientFlow 4s ease infinite !important;
}

body.dark-theme .filter-dropdown {
  background: transparent !important;
}

body.dark-theme .search-box,
body.dark-theme .search-container .search-box {
  background: rgba(49, 46, 129, 0.7) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  /* Явно переопределяем box-shadow без inset теней */
  box-shadow: 0 2px 8px rgba(67, 56, 202, 0.3) !important;
  -webkit-box-shadow: 0 2px 8px rgba(67, 56, 202, 0.3) !important;
  /* Убираем все возможные inset тени */
  filter: none !important;
}

body.dark-theme .search-box:focus-within,
body.dark-theme .search-container .search-box:focus-within {
  border-color: rgba(167, 139, 250, 0.6) !important;
  /* Явно переопределяем box-shadow без inset теней */
  box-shadow: 0 4px 12px rgba(67, 56, 202, 0.4) !important;
  -webkit-box-shadow: 0 4px 12px rgba(67, 56, 202, 0.4) !important;
  /* Убираем все возможные inset тени */
  filter: none !important;
}

/* Убираем все псевдоэлементы, которые могут создавать тени */
body.dark-theme .search-box::before,
body.dark-theme .search-box::after {
  display: none !important;
  content: none !important;
  box-shadow: none !important;
}

body.dark-theme .search-input {
  color: #e0e7ff !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

body.dark-theme .search-input::placeholder {
  color: #818cf8 !important;
}

body.dark-theme .search-input:focus {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
}

body.dark-theme .search-icon {
  color: #c4b5fd !important;
}

body.dark-theme .search-clear {
  background: rgba(167, 139, 250, 0.2) !important;
  color: #c4b5fd !important;
}

/* Категории и чипсы */
body.dark-theme .category-tabs {
  background: linear-gradient(135deg, rgba(49, 46, 129, 0.85), rgba(30, 27, 75, 0.8)) !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
  box-shadow: 
    0 2px 12px rgba(67, 56, 202, 0.4),
    inset 0 1px 2px rgba(167, 139, 250, 0.1) !important;
}

body.dark-theme .category-tabs::before {
  background: linear-gradient(135deg, #6366f1 0%, #818cf8 50%, #a78bfa 100%) !important;
  box-shadow: 
    0 2px 8px rgba(99, 102, 241, 0.4),
    0 0 12px rgba(129, 140, 248, 0.3),
    inset 0 1px 0 rgba(167, 139, 250, 0.2) !important;
}

body.dark-theme .category-tab {
  color: #818cf8 !important;
}

body.dark-theme .category-tab.is-active {
  color: #e0e7ff !important;
  background: rgba(167, 139, 250, 0.3) !important;
}

body.dark-theme .chip {
  background: rgba(49, 46, 129, 0.8) !important;
  border-color: rgba(167, 139, 250, 0.5) !important;
  color: #c7d2fe !important;
}

body.dark-theme .chip.is-active {
  background: rgba(167, 139, 250, 0.4) !important;
  color: #e0e7ff !important;
  border-color: rgba(196, 181, 253, 0.7) !important;
}

/* Админские фильтры */
body.dark-theme .admin-filters {
  background: linear-gradient(135deg, rgba(49, 46, 129, 0.7), rgba(30, 27, 75, 0.6)) !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
}

body.dark-theme .admin-filters-label {
  color: #a5b4fc !important;
}

body.dark-theme .admin-filter-btn {
  background: rgba(49, 46, 129, 0.8) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  color: #c7d2fe !important;
}

body.dark-theme .admin-filter-btn:hover {
  background: rgba(49, 46, 129, 1) !important;
  border-color: rgba(196, 181, 253, 0.7) !important;
}

body.dark-theme .admin-filter-btn.is-active {
  background: rgba(167, 139, 250, 0.3) !important;
  border-color: rgba(196, 181, 253, 0.7) !important;
  color: #e0e7ff !important;
}

/* Карточки товаров */
body.dark-theme .product-card {
  background: 
    linear-gradient(135deg, rgba(49, 46, 129, 0.9) 0%, rgba(30, 27, 75, 0.85) 100%) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  box-shadow: 
    0 2px 12px rgba(67, 56, 202, 0.4), 
    0 1px 3px rgba(139, 92, 246, 0.3),
    inset 0 1px 0 rgba(167, 139, 250, 0.1) !important;
}

body.dark-theme .product-card::before {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), rgba(139, 92, 246, 0.2)) !important;
}

body.dark-theme .product-card:hover {
  box-shadow: 
    0 8px 32px rgba(67, 56, 202, 0.5), 
    0 4px 16px rgba(167, 139, 250, 0.4),
    0 2px 8px rgba(139, 92, 246, 0.3),
    inset 0 2px 4px rgba(196, 181, 253, 0.15),
    0 0 20px rgba(167, 139, 250, 0.3) !important;
  border-color: rgba(196, 181, 253, 0.6) !important;
}

body.dark-theme .product-thumb {
  background: rgba(30, 27, 75, 0.6) !important;
}

body.dark-theme .product-name {
  color: #e0e7ff !important;
}

body.dark-theme .product-desc {
  color: #a5b4fc !important;
}

body.dark-theme .product-meta {
  color: #c7d2fe !important;
}

body.dark-theme .price {
  color: #c4b5fd !important;
}

body.dark-theme .tag {
  background: rgba(167, 139, 250, 0.25) !important;
  color: #c7d2fe !important;
}

body.dark-theme .qty-controls {
  background: rgba(30, 27, 75, 0.6) !important;
}

body.dark-theme .add-to-cart-btn {
  background: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #6366f1 100%) !important;
  box-shadow: 
    0 4px 12px rgba(67, 56, 202, 0.5),
    0 2px 6px rgba(167, 139, 250, 0.4) !important;
}

body.dark-theme .qty-btn {
  background: linear-gradient(135deg, rgba(49, 46, 129, 0.9), rgba(30, 27, 75, 0.85)) !important;
  color: #c4b5fd !important;
  border-color: rgba(167, 139, 250, 0.5) !important;
  box-shadow: 0 2px 4px rgba(67, 56, 202, 0.4) !important;
}

body.dark-theme .qty-btn:hover {
  background: linear-gradient(135deg, rgba(49, 46, 129, 1), rgba(30, 27, 75, 0.95)) !important;
  border-color: rgba(196, 181, 253, 0.7) !important;
}

body.dark-theme .qty-value {
  color: #e0e7ff !important;
}

/* Карточка добавления товара */
body.dark-theme .add-product-card {
  background: 
    linear-gradient(135deg, rgba(49, 46, 129, 0.5) 0%, rgba(30, 27, 75, 0.6) 100%) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
}

body.dark-theme .add-product-card:hover {
  background: 
    linear-gradient(135deg, rgba(49, 46, 129, 0.7) 0%, rgba(30, 27, 75, 0.8) 100%) !important;
  border-color: rgba(196, 181, 253, 0.7) !important;
}

body.dark-theme .add-product-icon {
  background: rgba(167, 139, 250, 0.2) !important;
}

body.dark-theme .add-product-icon svg {
  color: rgba(196, 181, 253, 0.7) !important;
}

body.dark-theme .add-product-text {
  color: rgba(196, 181, 253, 0.8) !important;
}

/* Модальное окно товара */
body.dark-theme .product-modal-backdrop {
  background: rgba(0, 0, 0, 0.9) !important;
}

body.dark-theme .product-modal-content {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.98), rgba(49, 46, 129, 0.95)) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  box-shadow: 
    0 8px 32px rgba(67, 56, 202, 0.6),
    0 4px 16px rgba(139, 92, 246, 0.5) !important;
}

body.dark-theme .product-modal-image-container {
  background: rgba(30, 27, 75, 0.8) !important;
}

body.dark-theme .product-modal-back {
  background: rgba(49, 46, 129, 0.9) !important;
  color: #c4b5fd !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
}

body.dark-theme .product-modal-edit {
  background: rgba(49, 46, 129, 0.9) !important;
  color: #c4b5fd !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
}

body.dark-theme .product-modal-name {
  color: #e0e7ff !important;
}

body.dark-theme .product-modal-price {
  color: #c4b5fd !important;
}

body.dark-theme .product-modal-description {
  color: #a5b4fc !important;
}

body.dark-theme .product-modal-badge {
  background: rgba(167, 139, 250, 0.3) !important;
  color: #c7d2fe !important;
}

body.dark-theme .product-modal-qty-btn {
  background: rgba(49, 46, 129, 0.9) !important;
  color: #c4b5fd !important;
  border-color: rgba(167, 139, 250, 0.5) !important;
}

body.dark-theme .product-modal-qty-value {
  color: #e0e7ff !important;
  background: transparent !important;
  border: none !important;
}

body.dark-theme .product-modal-qty-value:focus {
  outline: 2px solid #6366f1 !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
  background: rgba(49, 46, 129, 0.3) !important;
}

body.dark-theme .product-modal-add-btn {
  background: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #6366f1 100%) !important;
}

body.dark-theme .product-modal-cart-btn {
  background: rgba(49, 46, 129, 0.9) !important;
  color: #c4b5fd !important;
  border-color: rgba(167, 139, 250, 0.5) !important;
}

/* Модальное окно редактирования */
body.dark-theme .product-edit-modal {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.98), rgba(49, 46, 129, 0.95)) !important;
  backdrop-filter: blur(20px);
}

body.dark-theme .product-edit-modal-content {
  background: transparent !important;
}

body.dark-theme .product-edit-modal-header {
  background: rgba(30, 27, 75, 0.95) !important;
  border-bottom-color: rgba(167, 139, 250, 0.3) !important;
}

body.dark-theme .product-edit-modal-header h2 {
  color: #e0e7ff !important;
}

body.dark-theme .product-edit-modal-close {
  background: rgba(49, 46, 129, 0.9) !important;
  color: #c4b5fd !important;
  box-shadow: 0 2px 8px rgba(67, 56, 202, 0.4) !important;
}

body.dark-theme .product-edit-modal-close:hover {
  background: rgba(49, 46, 129, 1) !important;
}

body.dark-theme .product-edit-form {
  background: rgba(30, 27, 75, 0.95) !important;
}

body.dark-theme .form-group label {
  color: #c7d2fe !important;
}

body.dark-theme .form-group input,
body.dark-theme .form-group textarea,
body.dark-theme .form-group select {
  background: rgba(49, 46, 129, 0.7) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  color: #e0e7ff !important;
}

body.dark-theme .form-group input:focus,
body.dark-theme .form-group textarea:focus,
body.dark-theme .form-group select:focus {
  background: rgba(49, 46, 129, 0.9) !important;
  border-color: rgba(196, 181, 253, 0.7) !important;
}

body.dark-theme .form-group input::placeholder,
body.dark-theme .form-group textarea::placeholder {
  color: #818cf8 !important;
}

body.dark-theme #edit-image-preview {
  border-color: rgba(167, 139, 250, 0.4) !important;
}

body.dark-theme .image-upload-label {
  background: rgba(49, 46, 129, 0.6) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  color: #c4b5fd !important;
}

body.dark-theme .image-upload-label:hover {
  background: rgba(49, 46, 129, 0.8) !important;
  border-color: rgba(196, 181, 253, 0.7) !important;
}

body.dark-theme .status-option {
  background: rgba(49, 46, 129, 0.7) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  color: #c7d2fe !important;
}

body.dark-theme .status-option:hover {
  background: rgba(49, 46, 129, 0.9) !important;
  border-color: rgba(196, 181, 253, 0.7) !important;
}

body.dark-theme .status-option input[type="radio"]:checked + span {
  color: #c4b5fd !important;
}

body.dark-theme .form-actions {
  border-top-color: rgba(167, 139, 250, 0.3) !important;
}

body.dark-theme .btn-cancel {
  background: rgba(49, 46, 129, 0.9) !important;
  color: #c4b5fd !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
}

body.dark-theme .btn-cancel:hover {
  background: rgba(49, 46, 129, 1) !important;
  border-color: rgba(196, 181, 253, 0.7) !important;
}

body.dark-theme .btn-save {
  background: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #6366f1 100%) !important;
  box-shadow: 
    0 4px 12px rgba(67, 56, 202, 0.5),
    inset 0 1px 0 rgba(196, 181, 253, 0.2) !important;
}

body.dark-theme .btn-delete {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #ef4444 100%) !important;
  color: #ffffff !important;
  box-shadow: 
    0 4px 12px rgba(239, 68, 68, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

body.dark-theme .btn-delete:hover {
  box-shadow: 
    0 6px 16px rgba(239, 68, 68, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Корзина */

body.dark-theme .cart-header {
  border-bottom-color: rgba(167, 139, 250, 0.3) !important;
  position: relative;
  z-index: 2 !important;
}

body.dark-theme .cart-header h2 {
  color: #e0e7ff !important;
}


body.dark-theme .cart-item {
  background: rgba(49, 46, 129, 0.7) !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
}

body.dark-theme .cart-item-name {
  color: #e0e7ff !important;
}

body.dark-theme .cart-item-price {
  color: #a5b4fc !important;
}

body.dark-theme .cart-item-delete {
  background: rgba(49, 46, 129, 0.9) !important;
  color: #f87171 !important;
}

body.dark-theme .cart-footer {
  background: linear-gradient(to top, rgba(30, 27, 75, 0.98), rgba(49, 46, 129, 0.95)) !important;
  border-top-color: rgba(167, 139, 250, 0.3) !important;
}

body.dark-theme .cart-total {
  background: linear-gradient(135deg, rgba(49, 46, 129, 0.95) 0%, rgba(67, 56, 202, 0.9) 100%) !important;
  border: 1px solid rgba(167, 139, 250, 0.3) !important;
}

body.dark-theme .cart-total-label {
  color: #e0e7ff !important;
}

body.dark-theme .cart-total-price {
  color: #fbbf24 !important;
}

body.dark-theme .cart-checkout-btn {
  background: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #6366f1 100%) !important;
}

body.dark-theme .cart-empty-text {
  color: #a5b4fc !important;
}

body.dark-theme .cart-empty-subtext {
  color: #818cf8 !important;
}

/* Пагинация */
body.dark-theme .pagination-btn {
  background: rgba(49, 46, 129, 0.7) !important;
  color: #c7d2fe !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
}

body.dark-theme .pagination-btn:hover:not(:disabled) {
  background: rgba(49, 46, 129, 0.9) !important;
  border-color: rgba(196, 181, 253, 0.7) !important;
}

body.dark-theme .pagination-btn.is-active {
  background: rgba(167, 139, 250, 0.3) !important;
  color: #e0e7ff !important;
}

body.dark-theme .pagination-dots {
  color: #818cf8 !important;
}

/* Нижняя навигация */
body.dark-theme .bottom-nav {
  background: 
    linear-gradient(to top, 
      rgba(30, 27, 75, 0.98) 0%,
      rgba(49, 46, 129, 0.96) 50%,
      rgba(30, 27, 75, 0.94) 100%
    ) !important;
  border-top-color: rgba(167, 139, 250, 0.3) !important;
  box-shadow: 
    0 -4px 20px rgba(67, 56, 202, 0.4),
    0 -2px 10px rgba(139, 92, 246, 0.3),
    inset 0 1px 0 rgba(167, 139, 250, 0.1) !important;
  position: relative;
  z-index: 100;
}

body.dark-theme .nav-btn {
  color: #818cf8 !important;
}

body.dark-theme .nav-btn.is-active {
  color: #c4b5fd !important;
}

body.dark-theme .bottom-nav::after {
  background: linear-gradient(90deg, #818cf8 0%, #a78bfa 25%, #6366f1 50%, #a78bfa 75%, #818cf8 100%) !important;
  background-size: 200% auto;
  animation: gradientFlow 3s ease infinite;
  box-shadow: 
    0 -4px 16px rgba(167, 139, 250, 0.6),
    0 -2px 8px rgba(139, 92, 246, 0.5),
    0 0 20px rgba(167, 139, 250, 0.4),
    0 0 40px rgba(167, 139, 250, 0.2) !important;
}

body.dark-theme .cart-badge {
  background: linear-gradient(135deg, #818cf8, #a78bfa) !important;
  color: #1e1b4b !important;
}

/* Профиль */
body.dark-theme .profile-header {
  background: 
    linear-gradient(135deg, rgba(49, 46, 129, 0.95) 0%, rgba(30, 27, 75, 0.92) 100%) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  box-shadow: 
    0 4px 16px rgba(67, 56, 202, 0.4),
    0 2px 8px rgba(139, 92, 246, 0.3),
    inset 0 1px 0 rgba(167, 139, 250, 0.1) !important;
}

body.dark-theme .profile-avatar {
  background: 
    linear-gradient(135deg, rgba(167, 139, 250, 0.3) 0%, rgba(139, 92, 246, 0.4) 100%) !important;
  border-color: rgba(49, 46, 129, 0.9) !important;
  box-shadow: 
    0 4px 16px rgba(67, 56, 202, 0.4),
    inset 0 2px 4px rgba(196, 181, 253, 0.1) !important;
}

body.dark-theme .profile-avatar svg {
  color: rgba(196, 181, 253, 0.6) !important;
}

body.dark-theme .profile-name {
  background: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #c4b5fd 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

body.dark-theme .profile-info-section {
  background: 
    linear-gradient(135deg, rgba(49, 46, 129, 0.95) 0%, rgba(30, 27, 75, 0.92) 100%) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  box-shadow: 
    0 2px 12px rgba(67, 56, 202, 0.4),
    0 1px 6px rgba(139, 92, 246, 0.3),
    inset 0 1px 0 rgba(167, 139, 250, 0.1) !important;
}

body.dark-theme .profile-info-section h3 {
  color: #c4b5fd !important;
}

body.dark-theme .profile-info-item {
  border-bottom-color: rgba(167, 139, 250, 0.2) !important;
}

body.dark-theme .info-label {
  color: #a5b4fc !important;
}

body.dark-theme .info-value {
  color: #e0e7ff !important;
}

body.dark-theme .info-value.no-username {
  color: #f87171 !important;
}

body.dark-theme .theme-toggle-label {
  color: #e0e7ff !important;
}

body.dark-theme .theme-icon {
  color: #a78bfa !important;
}

body.dark-theme .theme-toggle-btn {
  background: linear-gradient(135deg, rgba(49, 46, 129, 0.9), rgba(30, 27, 75, 0.85)) !important;
  border-color: rgba(167, 139, 250, 0.5) !important;
  box-shadow: 0 2px 8px rgba(67, 56, 202, 0.4) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
}

body.dark-theme .theme-toggle-btn:hover {
  border-color: rgba(196, 181, 253, 0.7) !important;
  box-shadow: 
    0 4px 16px rgba(67, 56, 202, 0.4),
    0 2px 8px rgba(167, 139, 250, 0.3) !important;
}

body.dark-theme .theme-toggle-btn:active {
  transform: translateY(0) !important;
}

body.dark-theme .theme-toggle-text {
  color: #a78bfa !important;
}

body.dark-theme .theme-toggle-container {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
}

body.dark-theme .theme-toggle-label {
  pointer-events: none !important;
}

body.dark-theme .theme-toggle-track,
body.dark-theme .theme-toggle-thumb {
  pointer-events: none !important;
}

body.dark-theme .theme-toggle-btn.dark-mode .theme-toggle-track {
  background: linear-gradient(135deg, #6366f1, #818cf8) !important;
}

body.dark-theme .theme-toggle-btn.dark-mode .theme-toggle-thumb {
  background: linear-gradient(135deg, #1e1b4b, #312e81) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4) !important;
}

/* Пустое состояние */
body.dark-theme .empty-state {
  color: #a5b4fc !important;
}

/* Дополнительные стили для всех элементов */
body.dark-theme .app {
  background: transparent !important;
  position: relative;
  z-index: 1;
}



body.dark-theme .cart-header h2 {
  color: #e0e7ff !important;
}

body.dark-theme .cart-empty {
  background: transparent !important;
}

body.dark-theme .cart-empty-icon {
  color: #818cf8 !important;
}

body.dark-theme .cart-empty-text {
  color: #a5b4fc !important;
}

body.dark-theme .cart-empty-subtext {
  color: #818cf8 !important;
}

/* Убеждаемся, что все текстовые элементы темные */
body.dark-theme * {
  border-color: rgba(167, 139, 250, 0.3) !important;
}

body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select {
  background-color: rgba(30, 41, 59, 0.8) !important;
  color: #f1f5f9 !important;
}

body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
  color: #64748b !important;
}

/* Модальные окна - полная темнота */
body.dark-theme .product-modal {
  background: rgba(0, 0, 0, 0.95) !important;
}

body.dark-theme .product-modal-content {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.98), rgba(49, 46, 129, 0.95)) !important;
}

body.dark-theme .product-modal-info {
  background: transparent !important;
}

body.dark-theme .product-modal-header-buttons {
  background: transparent !important;
}

/* Формы - темные */
body.dark-theme .form-group input[type="text"],
body.dark-theme .form-group input[type="number"],
body.dark-theme .form-group textarea,
body.dark-theme .form-group select {
  background: rgba(49, 46, 129, 0.8) !important;
  border-color: rgba(167, 139, 250, 0.5) !important;
  color: #e0e7ff !important;
}

body.dark-theme .form-group input[type="text"]:focus,
body.dark-theme .form-group input[type="number"]:focus,
body.dark-theme .form-group textarea:focus,
body.dark-theme .form-group select:focus {
  background: rgba(49, 46, 129, 1) !important;
  border-color: rgba(196, 181, 253, 0.7) !important;
}

/* Страница "О нас" */
body.dark-theme .page-profile.is-active {
  overflow: visible !important;
  min-height: calc(100vh - 160px) !important;
  padding-bottom: 80px !important;
}

body.dark-theme .page-chat {
  background: transparent !important;
}

body.dark-theme .page-chat.is-active {
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

body.dark-theme .page-chat.is-active {
  height: calc(100vh - 80px) !important;
  max-height: calc(100vh - 80px) !important;
  min-height: calc(100vh - 80px) !important;
}

body.dark-theme .bottom-nav.hidden {
  transform: translateY(100%) !important;
}

body.dark-theme .chat-container {
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
}

body.dark-theme .chat-container.show {
  height: 100% !important;
}

body.dark-theme .chat-messages {
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
}

body.dark-theme .chat-attach-btn {
  background: rgba(167, 139, 250, 0.2) !important;
  color: #a78bfa !important;
}

body.dark-theme .chat-attach-btn:hover {
  background: rgba(167, 139, 250, 0.3) !important;
}

body.dark-theme .chat-header {
  background: linear-gradient(135deg, rgba(49, 46, 129, 0.95) 0%, rgba(30, 27, 75, 0.92) 100%) !important;
  border-bottom-color: rgba(167, 139, 250, 0.3) !important;
}

body.dark-theme .chat-back-btn {
  background: rgba(167, 139, 250, 0.2) !important;
  color: #a78bfa !important;
}

body.dark-theme .chat-back-btn:hover {
  background: rgba(167, 139, 250, 0.3) !important;
}

body.dark-theme .chat-header h2 {
  color: #e0e7ff !important;
}

body.dark-theme .chat-messages {
  background: transparent !important;
}

body.dark-theme .chat-message.received .chat-message-bubble {
  background: linear-gradient(135deg, rgba(49, 46, 129, 0.9), rgba(30, 27, 75, 0.85)) !important;
  color: #e0e7ff !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
}

body.dark-theme .chat-message.sent .chat-message-bubble {
  background: linear-gradient(135deg, #6366f1, #818cf8) !important;
  color: white !important;
}

body.dark-theme .chat-message-time {
  color: #818cf8 !important;
}

body.dark-theme .chat-input-container {
  background: linear-gradient(135deg, rgba(49, 46, 129, 0.95) 0%, rgba(30, 27, 75, 0.92) 100%) !important;
  border-top-color: rgba(167, 139, 250, 0.3) !important;
}

body.dark-theme .chat-input {
  background: rgba(49, 46, 129, 0.7) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  color: #e0e7ff !important;
}

body.dark-theme .chat-input::placeholder {
  color: #818cf8 !important;
}

body.dark-theme .chat-send-btn {
  background: linear-gradient(135deg, #6366f1, #818cf8) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4) !important;
}

body.dark-theme .user-item {
  background: linear-gradient(135deg, rgba(49, 46, 129, 0.9), rgba(30, 27, 75, 0.85)) !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
}

body.dark-theme .user-item:hover {
  border-color: rgba(167, 139, 250, 0.5) !important;
  box-shadow: 0 4px 12px rgba(67, 56, 202, 0.3) !important;
}

body.dark-theme .user-item-name {
  color: #e0e7ff !important;
}

body.dark-theme .user-item-info {
  color: #a5b4fc !important;
}

/* Убираем все белые фоны */
body.dark-theme [style*="background"] {
  background-color: rgba(49, 46, 129, 0.9) !important;
}

body.dark-theme [style*="background-color: white"],
body.dark-theme [style*="background-color: #fff"],
body.dark-theme [style*="background-color: #ffffff"],
body.dark-theme [style*="background-color: rgb(255"] {
  background-color: rgba(49, 46, 129, 0.9) !important;
}

/* Splash Screen для темной темы */
body.dark-theme .splash-background {
  background: 
    radial-gradient(ellipse at center, rgba(139, 92, 246, 0.2) 0%, transparent 70%),
    radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(124, 58, 237, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse at top left, rgba(67, 56, 202, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at top right, rgba(139, 92, 246, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(124, 58, 237, 0.25) 0%, transparent 50%),
    linear-gradient(135deg, #1e1b4b 0%, #312e81 20%, #1e1b4b 40%, #4c1d95 60%, #312e81 80%, #1e1b4b 100%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%;
  animation: gradientShift 20s ease infinite;
}