From eab985e228a047516a4dd3cc8e1ac25ce957da72 Mon Sep 17 00:00:00 2001
From: Professional <Professional@DENIIS-PC>
Date: Sat, 24 May 2025 00:27:15 +0700
Subject: [PATCH] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ProfileView.vue | 1146 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 1133 insertions(+), 13 deletions(-)

diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 1bf128b..01da86a 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -1204,10 +1204,10 @@ onUnmounted(() => {
   z-index: 2;
 }
 
-/* Стили для кнопки редактирования в заголовке */
+/* Стили для кнопки редактирования в заголовке - ИСПРАВЛЕНО */
 .edit-btn {
-  background: rgba(255, 255, 255, 0.2);
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  border: 1px solid rgba(102, 126, 234, 0.3);
   color: white;
   padding: 0.5rem 1rem;
   border-radius: 25px;
@@ -1219,18 +1219,21 @@ onUnmounted(() => {
   align-items: center;
   gap: 0.4rem;
   backdrop-filter: blur(10px);
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
 }
 
 .edit-btn:hover {
-  background: rgba(255, 255, 255, 0.3);
-  border-color: rgba(255, 255, 255, 0.5);
-  transform: translateY(-1px);
+  background: linear-gradient(45deg, #5a6abf, #6a4190);
+  border-color: rgba(102, 126, 234, 0.5);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
 }
 
 .edit-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
   transform: none;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
 }
 
 /* Центрирование кнопки выхода */
@@ -1433,6 +1436,1054 @@ onUnmounted(() => {
   border-color: rgba(220, 53, 69, 0.2);
 }
 
+/* Main Content - ИСПРАВЛЕНО */
+.profile-content {
+  flex: 1;
+  overflow-y: auto;
+  /* Добавляем правильные отступы с учетом заголовка и навигации */
+  padding: 1.5rem 0;
+  padding-bottom: calc(1.5rem + var(--nav-height, 60px));
+  -webkit-overflow-scrolling: touch;
+  /* Убираем отрицательные отступы которые могли вызывать наложение */
+}
+
+.profile-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  /* Добавляем минимальную высоту для предотвращения схлопывания */
+  min-height: max-content;
+}
+
+/* Profile Card - ИСПРАВЛЕНО */
+.profile-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 1.5rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  /* Предотвращаем наложение */
+  position: relative;
+  z-index: 1;
+}
+
+.avatar-section {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.avatar-container {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 3px solid rgba(102, 126, 234, 0.3);
+  flex-shrink: 0;
+}
+
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(102, 126, 234, 0.1);
+  color: #667eea;
+  font-size: 2rem;
+}
+
+.avatar-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  transition: opacity 0.3s;
+  border-radius: 50%;
+}
+
+.avatar-container:hover .avatar-overlay {
+  opacity: 1;
+}
+
+.change-avatar-btn {
+  background: #667eea;
+  color: white;
+  border: none;
+  padding: 0.5rem;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.change-avatar-btn:hover {
+  background: #5a6abf;
+  transform: scale(1.1);
+}
+
+.user-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.user-name {
+  font-size: 1.4rem;
+  font-weight: 600;
+  margin: 0 0 0.3rem;
+  color: #333;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.user-email {
+  font-size: 0.9rem;
+  color: #6c757d;
+  margin: 0 0 0.8rem;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.user-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.8rem;
+}
+
+.badge {
+  padding: 0.25rem 0.6rem;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.badge.verified {
+  background: linear-gradient(45deg, #28a745, #20c997);
+  color: white;
+}
+
+.badge.member-since {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+}
+
+.logout-btn {
+  background: none;
+  border: none;
+  color: #dc3545;
+  cursor: pointer;
+  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.5rem 1rem;
+  border-radius: 25px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+}
+
+.logout-btn:hover {
+  color: #c82333;
+  background: rgba(220, 53, 69, 0.1);
+  border-color: rgba(220, 53, 69, 0.2);
+}
+
+/* Main Content - ИСПРАВЛЕНО */
+.profile-content {
+  flex: 1;
+  overflow-y: auto;
+  /* Добавляем правильные отступы с учетом заголовка и навигации */
+  padding: 1.5rem 0;
+  padding-bottom: calc(1.5rem + var(--nav-height, 60px));
+  -webkit-overflow-scrolling: touch;
+  /* Убираем отрицательные отступы которые могли вызывать наложение */
+}
+
+.profile-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  /* Добавляем минимальную высоту для предотвращения схлопывания */
+  min-height: max-content;
+}
+
+/* Profile Card - ИСПРАВЛЕНО */
+.profile-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 1.5rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  /* Предотвращаем наложение */
+  position: relative;
+  z-index: 1;
+}
+
+.avatar-section {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.avatar-container {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 3px solid rgba(102, 126, 234, 0.3);
+  flex-shrink: 0;
+}
+
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(102, 126, 234, 0.1);
+  color: #667eea;
+  font-size: 2rem;
+}
+
+.avatar-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  transition: opacity 0.3s;
+  border-radius: 50%;
+}
+
+.avatar-container:hover .avatar-overlay {
+  opacity: 1;
+}
+
+.change-avatar-btn {
+  background: #667eea;
+  color: white;
+  border: none;
+  padding: 0.5rem;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.change-avatar-btn:hover {
+  background: #5a6abf;
+  transform: scale(1.1);
+}
+
+.user-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.user-name {
+  font-size: 1.4rem;
+  font-weight: 600;
+  margin: 0 0 0.3rem;
+  color: #333;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.user-email {
+  font-size: 0.9rem;
+  color: #6c757d;
+  margin: 0 0 0.8rem;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.user-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.8rem;
+}
+
+.badge {
+  padding: 0.25rem 0.6rem;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.badge.verified {
+  background: linear-gradient(45deg, #28a745, #20c997);
+  color: white;
+}
+
+.badge.member-since {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+}
+
+.logout-btn {
+  background: none;
+  border: none;
+  color: #dc3545;
+  cursor: pointer;
+  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.5rem 1rem;
+  border-radius: 25px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+}
+
+.logout-btn:hover {
+  color: #c82333;
+  background: rgba(220, 53, 69, 0.1);
+  border-color: rgba(220, 53, 69, 0.2);
+}
+
+/* Main Content - ИСПРАВЛЕНО */
+.profile-content {
+  flex: 1;
+  overflow-y: auto;
+  /* Добавляем правильные отступы с учетом заголовка и навигации */
+  padding: 1.5rem 0;
+  padding-bottom: calc(1.5rem + var(--nav-height, 60px));
+  -webkit-overflow-scrolling: touch;
+  /* Убираем отрицательные отступы которые могли вызывать наложение */
+}
+
+.profile-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  /* Добавляем минимальную высоту для предотвращения схлопывания */
+  min-height: max-content;
+}
+
+/* Profile Card - ИСПРАВЛЕНО */
+.profile-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 1.5rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  /* Предотвращаем наложение */
+  position: relative;
+  z-index: 1;
+}
+
+.avatar-section {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.avatar-container {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 3px solid rgba(102, 126, 234, 0.3);
+  flex-shrink: 0;
+}
+
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(102, 126, 234, 0.1);
+  color: #667eea;
+  font-size: 2rem;
+}
+
+.avatar-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  transition: opacity 0.3s;
+  border-radius: 50%;
+}
+
+.avatar-container:hover .avatar-overlay {
+  opacity: 1;
+}
+
+.change-avatar-btn {
+  background: #667eea;
+  color: white;
+  border: none;
+  padding: 0.5rem;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.change-avatar-btn:hover {
+  background: #5a6abf;
+  transform: scale(1.1);
+}
+
+.user-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.user-name {
+  font-size: 1.4rem;
+  font-weight: 600;
+  margin: 0 0 0.3rem;
+  color: #333;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.user-email {
+  font-size: 0.9rem;
+  color: #6c757d;
+  margin: 0 0 0.8rem;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.user-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.8rem;
+}
+
+.badge {
+  padding: 0.25rem 0.6rem;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.badge.verified {
+  background: linear-gradient(45deg, #28a745, #20c997);
+  color: white;
+}
+
+.badge.member-since {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+}
+
+.logout-btn {
+  background: none;
+  border: none;
+  color: #dc3545;
+  cursor: pointer;
+  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.5rem 1rem;
+  border-radius: 25px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+}
+
+.logout-btn:hover {
+  color: #c82333;
+  background: rgba(220, 53, 69, 0.1);
+  border-color: rgba(220, 53, 69, 0.2);
+}
+
+/* Main Content - ИСПРАВЛЕНО */
+.profile-content {
+  flex: 1;
+  overflow-y: auto;
+  /* Добавляем правильные отступы с учетом заголовка и навигации */
+  padding: 1.5rem 0;
+  padding-bottom: calc(1.5rem + var(--nav-height, 60px));
+  -webkit-overflow-scrolling: touch;
+  /* Убираем отрицательные отступы которые могли вызывать наложение */
+}
+
+.profile-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  /* Добавляем минимальную высоту для предотвращения схлопывания */
+  min-height: max-content;
+}
+
+/* Profile Card - ИСПРАВЛЕНО */
+.profile-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 1.5rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  /* Предотвращаем наложение */
+  position: relative;
+  z-index: 1;
+}
+
+.avatar-section {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.avatar-container {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 3px solid rgba(102, 126, 234, 0.3);
+  flex-shrink: 0;
+}
+
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(102, 126, 234, 0.1);
+  color: #667eea;
+  font-size: 2rem;
+}
+
+.avatar-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  transition: opacity 0.3s;
+  border-radius: 50%;
+}
+
+.avatar-container:hover .avatar-overlay {
+  opacity: 1;
+}
+
+.change-avatar-btn {
+  background: #667eea;
+  color: white;
+  border: none;
+  padding: 0.5rem;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.change-avatar-btn:hover {
+  background: #5a6abf;
+  transform: scale(1.1);
+}
+
+.user-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.user-name {
+  font-size: 1.4rem;
+  font-weight: 600;
+  margin: 0 0 0.3rem;
+  color: #333;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.user-email {
+  font-size: 0.9rem;
+  color: #6c757d;
+  margin: 0 0 0.8rem;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.user-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.8rem;
+}
+
+.badge {
+  padding: 0.25rem 0.6rem;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.badge.verified {
+  background: linear-gradient(45deg, #28a745, #20c997);
+  color: white;
+}
+
+.badge.member-since {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+}
+
+.logout-btn {
+  background: none;
+  border: none;
+  color: #dc3545;
+  cursor: pointer;
+  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.5rem 1rem;
+  border-radius: 25px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+}
+
+.logout-btn:hover {
+  color: #c82333;
+  background: rgba(220, 53, 69, 0.1);
+  border-color: rgba(220, 53, 69, 0.2);
+}
+
+/* Main Content - ИСПРАВЛЕНО */
+.profile-content {
+  flex: 1;
+  overflow-y: auto;
+  /* Добавляем правильные отступы с учетом заголовка и навигации */
+  padding: 1.5rem 0;
+  padding-bottom: calc(1.5rem + var(--nav-height, 60px));
+  -webkit-overflow-scrolling: touch;
+  /* Убираем отрицательные отступы которые могли вызывать наложение */
+}
+
+.profile-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  /* Добавляем минимальную высоту для предотвращения схлопывания */
+  min-height: max-content;
+}
+
+/* Profile Card - ИСПРАВЛЕНО */
+.profile-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 1.5rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  /* Предотвращаем наложение */
+  position: relative;
+  z-index: 1;
+}
+
+.avatar-section {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.avatar-container {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 3px solid rgba(102, 126, 234, 0.3);
+  flex-shrink: 0;
+}
+
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(102, 126, 234, 0.1);
+  color: #667eea;
+  font-size: 2rem;
+}
+
+.avatar-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  transition: opacity 0.3s;
+  border-radius: 50%;
+}
+
+.avatar-container:hover .avatar-overlay {
+  opacity: 1;
+}
+
+.change-avatar-btn {
+  background: #667eea;
+  color: white;
+  border: none;
+  padding: 0.5rem;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.change-avatar-btn:hover {
+  background: #5a6abf;
+  transform: scale(1.1);
+}
+
+.user-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.user-name {
+  font-size: 1.4rem;
+  font-weight: 600;
+  margin: 0 0 0.3rem;
+  color: #333;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.user-email {
+  font-size: 0.9rem;
+  color: #6c757d;
+  margin: 0 0 0.8rem;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.user-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.8rem;
+}
+
+.badge {
+  padding: 0.25rem 0.6rem;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.badge.verified {
+  background: linear-gradient(45deg, #28a745, #20c997);
+  color: white;
+}
+
+.badge.member-since {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+}
+
+.logout-btn {
+  background: none;
+  border: none;
+  color: #dc3545;
+  cursor: pointer;
+  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.5rem 1rem;
+  border-radius: 25px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+}
+
+.logout-btn:hover {
+  color: #c82333;
+  background: rgba(220, 53, 69, 0.1);
+  border-color: rgba(220, 53, 69, 0.2);
+}
+
+/* Main Content - ИСПРАВЛЕНО */
+.profile-content {
+  flex: 1;
+  overflow-y: auto;
+  /* Добавляем правильные отступы с учетом заголовка и навигации */
+  padding: 1.5rem 0;
+  padding-bottom: calc(1.5rem + var(--nav-height, 60px));
+  -webkit-overflow-scrolling: touch;
+  /* Убираем отрицательные отступы которые могли вызывать наложение */
+}
+
+.profile-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  /* Добавляем минимальную высоту для предотвращения схлопывания */
+  min-height: max-content;
+}
+
+/* Profile Card - ИСПРАВЛЕНО */
+.profile-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 1.5rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  /* Предотвращаем наложение */
+  position: relative;
+  z-index: 1;
+}
+
+.avatar-section {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.avatar-container {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 3px solid rgba(102, 126, 234, 0.3);
+  flex-shrink: 0;
+}
+
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(102, 126, 234, 0.1);
+  color: #667eea;
+  font-size: 2rem;
+}
+
+.avatar-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.6);
+  opacity: 0;
+  transition: opacity 0.3s;
+  border-radius: 50%;
+}
+
+.avatar-container:hover .avatar-overlay {
+  opacity: 1;
+}
+
+.change-avatar-btn {
+  background: #667eea;
+  color: white;
+  border: none;
+  padding: 0.5rem;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.change-avatar-btn:hover {
+  background: #5a6abf;
+  transform: scale(1.1);
+}
+
+.user-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.user-name {
+  font-size: 1.4rem;
+  font-weight: 600;
+  margin: 0 0 0.3rem;
+  color: #333;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.user-email {
+  font-size: 0.9rem;
+  color: #6c757d;
+  margin: 0 0 0.8rem;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.user-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.8rem;
+}
+
+.badge {
+  padding: 0.25rem 0.6rem;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.badge.verified {
+  background: linear-gradient(45deg, #28a745, #20c997);
+  color: white;
+}
+
+.badge.member-since {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+}
+
+.logout-btn {
+  background: none;
+  border: none;
+  color: #dc3545;
+  cursor: pointer;
+  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.5rem 1rem;
+  border-radius: 25px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+}
+
+.logout-btn:hover {
+  color: #c82333;
+  background: rgba(220, 53, 69, 0.1);
+  border-color: rgba(220, 53, 69, 0.2);
+}
+
+/* Details Section с увеличенными отступами */
+.details-section {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem; /* Увеличиваем отступ между блоками */
+}
+
+/* Дополнительные отступы для конкретных блоков */
+.basic-info-card {
+  margin-bottom: 3rem !important;
+}
+
+.photos-card {
+  margin-top: 3rem !important;
+}
+
 /* Stats Section */
 .stats-section {
   display: grid;
@@ -1521,6 +2572,7 @@ onUnmounted(() => {
   align-items: center;
   gap: 0.5rem;
   color: #333;
+
 }
 
 .card-header h3 i {
@@ -1668,7 +2720,6 @@ onUnmounted(() => {
   transition: all 0.3s ease;
   text-decoration: none;
   white-space: nowrap;
-  box-sizing: border-box;
 }
 
 .action-btn.primary {
@@ -1677,8 +2728,9 @@ onUnmounted(() => {
 }
 
 .action-btn.primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+  background: linear-gradient(45deg, #5a6abf, #6a4190);
+  transform: translateY(-1px) scale(1.05);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
 }
 
 .action-btn.secondary {
@@ -1699,7 +2751,8 @@ onUnmounted(() => {
 
 .action-btn.danger:hover {
   background: #c82333;
-  transform: translateY(-2px);
+  transform: translateY(-1px) scale(1.05);
+  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
 }
 
 .action-btn.small {
@@ -1732,6 +2785,28 @@ onUnmounted(() => {
   box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
 }
 
+/* Empty State - исправление кнопки добавления фото */
+.empty-photos .action-btn.primary {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+  border: none;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+  font-weight: 600;
+}
+
+.empty-photos .action-btn.primary:hover {
+  background: linear-gradient(45deg, #5a6abf, #6a4190);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
+}
+
+.empty-photos .action-btn.primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
+}
+
 /* Photo Grid */
 .photo-grid {
   display: grid;
@@ -1792,8 +2867,53 @@ onUnmounted(() => {
   z-index: 3;
 }
 
-.photo-item:hover .photo-actions {
-  opacity: 1;
+/* Исправление центрирования иконок в кнопках действий с фотографиями */
+.photo-actions .action-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  min-width: auto;
+  font-size: 0.9rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.photo-actions .action-btn.small {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+}
+
+.photo-actions .action-btn i {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.photo-actions .action-btn.danger {
+  background: #dc3545;
+  color: white;
+}
+
+.photo-actions .action-btn.danger:hover {
+  background: #c82333;
+  transform: translateY(-1px) scale(1.05);
+  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
+}
+
+.photo-actions .action-btn.primary {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+}
+
+.photo-actions .action-btn.primary:hover {
+  background: linear-gradient(45deg, #5a6abf, #6a4190);
+  transform: translateY(-1px) scale(1.05);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
 }
 
 /* Empty States */
@@ -1887,7 +3007,7 @@ onUnmounted(() => {
 .spinner {
   width: 50px;
   height: 50px;
-  border: 4px solid rgba(255, 255, 255, 0.3);
+  border: 4px solid rgba(255, 255,  255, 0.3);
   border-left: 4px solid white;
   border-radius: 50%;
   animation: spin 1s linear infinite;