diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index f8514c9..08de586 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -24,11 +24,9 @@
     <div v-if="profileData && !initialLoading" class="profile-content">
       <div class="container">
         <div class="profile-layout">
-          
-          <!-- Profile Card Section -->
-          <div class="profile-card-section">
-            <div class="profile-card">
-              <!-- Avatar Section -->
+          <!-- Profile Header Card -->
+          <div class="profile-header-card">
+            <div class="profile-header-content">
               <div class="avatar-section">
                 <div class="avatar-container">
                   <img 
@@ -46,21 +44,26 @@
                     </button>
                   </div>
                 </div>
-                <div class="user-info">
+                
+                <div class="user-meta">
                   <h2 class="user-name">{{ profileData.name || 'Не указано' }}</h2>
                   <p class="user-email">{{ profileData.email }}</p>
                   <div class="user-badges">
                     <span class="badge verified">Подтвержден</span>
                     <span class="badge member-since">С {{ formatShortDate(profileData.createdAt) }}</span>
                   </div>
-                  
-                  <!-- Центрируем кнопку выхода из аккаунта -->
-                  <div class="logout-section">
-                    <button @click="logoutUser" class="logout-btn">
-                      <i class="bi-box-arrow-right"></i>
-                      Выйти из аккаунта
-                    </button>
-                  </div>
+                </div>
+
+                <div class="header-actions">
+                  <button 
+                    class="edit-btn" 
+                    @click="toggleEditMode"
+                    :disabled="profileLoading"
+                  >
+                    <i v-if="!isEditMode" class="bi-pencil"></i>
+                    <i v-else class="bi-check"></i>
+                    {{ isEditMode ? 'Сохранить' : 'Редактировать' }}
+                  </button>
                 </div>
               </div>
 
@@ -97,263 +100,271 @@
             </div>
           </div>
 
-          <!-- Details Section -->
-          <div class="details-section">
-            <!-- Basic Info -->
-            <div class="info-card basic-info-card">
-              <div class="card-header">
-                <h3><i class="bi-person-lines-fill"></i> Основная информация</h3>
-                <div class="header-actions">
-                  <button 
-                    class="edit-btn" 
-                    @click="toggleEditMode"
-                    :disabled="profileLoading"
-                  >
-                    <i v-if="!isEditMode" class="bi-pencil"></i>
-                    <i v-else class="bi-check"></i>
-                    {{ isEditMode ? 'Сохранить' : 'Редактировать' }}
-                  </button>
+          <!-- Content Tabs -->
+          <div class="profile-tabs">
+            <div class="tabs-container">
+              <button class="tab-btn" :class="{ 'active': activeTab === 'info' }" @click="activeTab = 'info'">
+                <i class="bi-person-lines-fill"></i>
+                <span>Информация</span>
+              </button>
+              <button class="tab-btn" :class="{ 'active': activeTab === 'photos' }" @click="activeTab = 'photos'">
+                <i class="bi-images"></i>
+                <span>Фотографии</span>
+                <span class="tab-badge" v-if="profileData.photos?.length">{{ profileData.photos.length }}</span>
+              </button>
+            </div>
+          </div>
+
+          <!-- Tabs Content -->
+          <div class="tabs-content">
+            <!-- Basic Info Tab -->
+            <div v-show="activeTab === 'info'" class="tab-pane">
+              <div class="info-card basic-info-card">
+                <div class="card-header">
+                  <h3><i class="bi-person-lines-fill"></i> Основная информация</h3>
                 </div>
-              </div>
-              <div class="card-content">
-                <!-- Форма с сообщениями -->
-                <div v-if="profileActionError" class="alert error">
-                  <i class="bi-exclamation-circle"></i>
-                  {{ profileActionError }}
-                </div>
-                <div v-if="profileActionSuccess" class="alert success">
-                  <i class="bi-check-circle"></i>
-                  {{ profileActionSuccess }}
-                </div>
-                
-                <!-- Поля данных -->
-                <div class="info-grid">
-                  <div class="info-item">
-                    <label for="editName">Имя</label>
-                    <span v-if="!isEditMode">{{ profileData.name || 'Не указано' }}</span>
-                    <input 
-                      v-else
-                      type="text" 
-                      class="form-input" 
-                      id="editName" 
-                      v-model="editableProfileData.name" 
-                      :disabled="profileLoading"
-                      placeholder="Введите ваше имя" 
-                    />
+                <div class="card-content">
+                  <!-- Форма с сообщениями -->
+                  <div v-if="profileActionError" class="alert error">
+                    <i class="bi-exclamation-circle"></i>
+                    {{ profileActionError }}
                   </div>
-                  <div class="info-item">
-                    <label for="editDateOfBirth">Дата рождения</label>
-                    <span v-if="!isEditMode">{{ profileData.dateOfBirth ? formatDate(profileData.dateOfBirth) : 'Не указана' }}</span>
-                    <input 
-                      v-else
-                      type="date" 
-                      class="form-input" 
-                      id="editDateOfBirth" 
-                      v-model="editableProfileData.dateOfBirth" 
-                      :disabled="profileLoading" 
-                      onfocus="this.showPicker()"
-                    />
+                  <div v-if="profileActionSuccess" class="alert success">
+                    <i class="bi-check-circle"></i>
+                    {{ profileActionSuccess }}
                   </div>
-                  <div class="info-item">
-                    <label for="editGender">Пол</label>
-                    <span v-if="!isEditMode">{{ getGenderText(profileData.gender) }}</span>
-                    <div v-else class="select-wrapper">
+                  
+                  <!-- Поля данных -->
+                  <div class="info-grid">
+                    <div class="info-item">
+                      <label for="editName">Имя</label>
+                      <span v-if="!isEditMode">{{ profileData.name || 'Не указано' }}</span>
                       <input 
+                        v-else
                         type="text" 
                         class="form-input" 
-                        id="editGender" 
-                        v-model="genderSearchQuery" 
-                        placeholder="Выберите пол..." 
-                        @focus="showGenderList = true; filteredGenders = genderOptions"
-                        @input="onGenderSearch"
-                        :disabled="profileLoading" 
-                      />
-                      <button 
-                        type="button"
-                        class="clear-btn" 
-                        @click="clearGenderSelection" 
-                        v-if="editableProfileData.gender"
+                        id="editName" 
+                        v-model="editableProfileData.name" 
                         :disabled="profileLoading"
-                      >
-                        <i class="bi-x"></i>
-                      </button>
-                      <div class="dropdown" v-if="showGenderList && filteredGenders.length > 0">
-                        <div 
-                          v-for="option in filteredGenders"
-                          :key="option.value"
-                          @click="selectGender(option)"
-                          class="dropdown-option"
+                        placeholder="Введите ваше имя" 
+                      />
+                    </div>
+                    <div class="info-item">
+                      <label for="editDateOfBirth">Дата рождения</label>
+                      <span v-if="!isEditMode">{{ profileData.dateOfBirth ? formatDate(profileData.dateOfBirth) : 'Не указана' }}</span>
+                      <input 
+                        v-else
+                        type="date" 
+                        class="form-input" 
+                        id="editDateOfBirth" 
+                        v-model="editableProfileData.dateOfBirth" 
+                        :disabled="profileLoading" 
+                        onfocus="this.showPicker()"
+                      />
+                    </div>
+                    <div class="info-item">
+                      <label for="editGender">Пол</label>
+                      <span v-if="!isEditMode">{{ getGenderText(profileData.gender) }}</span>
+                      <div v-else class="select-wrapper">
+                        <input 
+                          type="text" 
+                          class="form-input" 
+                          id="editGender" 
+                          v-model="genderSearchQuery" 
+                          placeholder="Выберите пол..." 
+                          @focus="showGenderList = true; filteredGenders = genderOptions"
+                          @input="onGenderSearch"
+                          :disabled="profileLoading" 
+                        />
+                        <button 
+                          type="button"
+                          class="clear-btn" 
+                          @click="clearGenderSelection" 
+                          v-if="editableProfileData.gender"
+                          :disabled="profileLoading"
                         >
-                          {{ option.text }}
+                          <i class="bi-x"></i>
+                        </button>
+                        <div class="dropdown" v-if="showGenderList && filteredGenders.length > 0">
+                          <div 
+                            v-for="option in filteredGenders"
+                            :key="option.value"
+                            @click="selectGender(option)"
+                            class="dropdown-option"
+                          >
+                            {{ option.text }}
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                  <div class="info-item">
-                    <label for="editCity">Город</label>
-                    <span v-if="!isEditMode">{{ profileData.location?.city || 'Не указан' }}</span>
-                    <div v-else class="select-wrapper">
-                      <input 
-                        type="text" 
-                        class="form-input" 
-                        id="editCity" 
-                        v-model="citySearchQuery" 
-                        placeholder="Начните вводить название города..." 
-                        @focus="showCityList = true"
-                        @input="onCitySearch"
-                        :disabled="profileLoading" 
-                      />
-                      <button 
-                        type="button"
-                        class="clear-btn" 
-                        @click="clearCitySelection" 
-                        v-if="editableProfileData.location && editableProfileData.location.city"
-                        :disabled="profileLoading"
-                      >
-                        <i class="bi-x"></i>
-                      </button>
-                      <div class="dropdown" v-if="showCityList && filteredCities.length > 0">
-                        <div 
-                          v-for="city in filteredCities" 
-                          :key="city" 
-                          class="dropdown-option"
-                          @click="selectCity(city)"
+                    <div class="info-item">
+                      <label for="editCity">Город</label>
+                      <span v-if="!isEditMode">{{ profileData.location?.city || 'Не указан' }}</span>
+                      <div v-else class="select-wrapper">
+                        <input 
+                          type="text" 
+                          class="form-input" 
+                          id="editCity" 
+                          v-model="citySearchQuery" 
+                          placeholder="Начните вводить название города..." 
+                          @focus="showCityList = true"
+                          @input="onCitySearch"
+                          :disabled="profileLoading" 
+                        />
+                        <button 
+                          type="button"
+                          class="clear-btn" 
+                          @click="clearCitySelection" 
+                          v-if="editableProfileData.location && editableProfileData.location.city"
+                          :disabled="profileLoading"
                         >
-                          {{ city }}
+                          <i class="bi-x"></i>
+                        </button>
+                        <div class="dropdown" v-if="showCityList && filteredCities.length > 0">
+                          <div 
+                            v-for="city in filteredCities" 
+                            :key="city" 
+                            class="dropdown-option"
+                            @click="selectCity(city)"
+                          >
+                            {{ city }}
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                  <div class="info-item full-width">
-                    <label for="editBio">О себе</label>
-                    <span v-if="!isEditMode" class="bio-text">{{ profileData.bio || 'Расскажите о себе...' }}</span>
-                    <textarea 
-                      v-else
-                      class="form-input form-textarea" 
-                      id="editBio" 
-                      rows="4" 
-                      v-model="editableProfileData.bio" 
-                      :disabled="profileLoading"
-                      placeholder="Расскажите немного о себе..."
-                    ></textarea>
+                    <div class="info-item full-width">
+                      <label for="editBio">О себе</label>
+                      <span v-if="!isEditMode" class="bio-text">{{ profileData.bio || 'Расскажите о себе...' }}</span>
+                      <textarea 
+                        v-else
+                        class="form-input form-textarea" 
+                        id="editBio" 
+                        rows="4" 
+                        v-model="editableProfileData.bio" 
+                        :disabled="profileLoading"
+                        placeholder="Расскажите немного о себе..."
+                      ></textarea>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
 
-            <!-- Photos Section -->
-            <div class="info-card photos-card" id="photos-section">              
-              <div class="card-header">
-                <h3><i class="bi-images"></i> Мои фотографии</h3>
-                <div class="header-actions" v-if="profileData.photos && profileData.photos.length > 0">
-                  <button class="add-photo-btn" @click="triggerPhotoUpload" :disabled="photoActionLoading">
-                    <span v-if="photoActionLoading" class="spinner-small"></span>
-                    <i v-else class="bi-plus"></i>
-                    {{ photoActionLoading ? 'Загрузка...' : 'Добавить фото' }}
-                  </button>
-                </div>
-              </div>
-              <div class="card-content">
-                <!-- Photo Grid -->
-                <div v-if="profileData.photos && profileData.photos.length > 0" class="photo-grid">
-                  <div 
-                    v-for="photo in profileData.photos" 
-                    :key="photo.public_id || photo._id" 
-                    class="photo-item"
-                    :class="{ 'main-photo': photo.isProfilePhoto }"
-                  >                    
-                    <img :src="photo.url" :alt="'Фото ' + profileData.name" class="photo-image">
-                    <div v-if="photo.isProfilePhoto" class="main-badge">
-                      <i class="bi-star-fill"></i>
-                      Главное
-                    </div>
-                    <div v-if="isEditMode" class="photo-actions">
-                      <button 
-                        v-if="!photo.isProfilePhoto"
-                        class="action-btn small primary"
-                        @click="setAsMainPhoto(photo._id)"
-                        :disabled="photoActionLoading"
-                        title="Сделать главным"
-                      >
-                        <i class="bi-star"></i>
-                      </button>
-                      <button 
-                        class="action-btn small danger"
-                        @click="confirmDeletePhoto(photo._id)"
-                        :disabled="photoActionLoading"
-                        title="Удалить"
-                      >
-                        <i class="bi-trash"></i>
-                      </button>
-                    </div>
+            <!-- Photos Tab -->
+            <div v-show="activeTab === 'photos'" class="tab-pane" id="photos-section">
+              <div class="info-card photos-card">              
+                <div class="card-header">
+                  <h3><i class="bi-images"></i> Мои фотографии</h3>
+                  <div class="header-actions" v-if="profileData.photos && profileData.photos.length > 0">
+                    <button class="add-photo-btn" @click="triggerPhotoUpload" :disabled="photoActionLoading">
+                      <span v-if="photoActionLoading" class="spinner-small"></span>
+                      <i v-else class="bi-plus"></i>
+                      {{ photoActionLoading ? 'Загрузка...' : 'Добавить фото' }}
+                    </button>
                   </div>
                 </div>
-                
-                <!-- Empty State -->                
-                <div v-else class="empty-photos">
-                  <div class="upload-zone" @click="triggerPhotoUpload" :class="{ 'uploading': photoActionLoading }">
-                    <div class="upload-icon-container">
-                      <div class="upload-icon-bg">
-                        <i v-if="!photoActionLoading" class="bi-camera-fill upload-icon"></i>
-                        <div v-else class="upload-spinner"></div>
+                <div class="card-content">
+                  <!-- Photo Grid -->
+                  <div v-if="profileData.photos && profileData.photos.length > 0" class="photo-grid">
+                    <div 
+                      v-for="photo in profileData.photos" 
+                      :key="photo.public_id || photo._id" 
+                      class="photo-item"
+                      :class="{ 'main-photo': photo.isProfilePhoto }"
+                    >                    
+                      <img :src="photo.url" :alt="'Фото ' + profileData.name" class="photo-image">
+                      <div v-if="photo.isProfilePhoto" class="main-badge">
+                        <i class="bi-star-fill"></i>
+                        Главное
                       </div>
-                      <div class="upload-pulse"></div>
-                    </div>
-                    
-                    <div class="upload-content">
-                      <h3 class="upload-title">
-                        {{ photoActionLoading ? 'Загружаем...' : 'Добавьте первое фото' }}
-                      </h3>
-                      <p class="upload-description">
-                        {{ photoActionLoading ? 'Подождите, фотография обрабатывается' : 'Нажмите или перетащите файлы сюда для загрузки' }}
-                      </p>
-                      
-                      <div class="upload-features">
-                        <div class="feature-item">
-                          <i class="bi-shield-check"></i>
-                          <span>Безопасно</span>
-                        </div>
-                        <div class="feature-item">
-                          <i class="bi-lightning-charge"></i>
-                          <span>Быстро</span>
-                        </div>
-                        <div class="feature-item">
-                          <i class="bi-image"></i>
-                          <span>HD качество</span>
-                        </div>
-                      </div>
-                      
-                      <div class="upload-btn-container">
+                      <div class="photo-actions">
                         <button 
-                          class="upload-btn"
-                          @click.stop="triggerPhotoUpload" 
+                          v-if="!photo.isProfilePhoto"
+                          class="action-btn small primary"
+                          @click="setAsMainPhoto(photo._id)"
                           :disabled="photoActionLoading"
+                          title="Сделать главным"
                         >
-                          <span v-if="photoActionLoading" class="btn-spinner"></span>
-                          <i v-else class="bi-plus-circle-fill"></i>
-                          {{ photoActionLoading ? 'Загрузка...' : 'Выбрать фото' }}
+                          <i class="bi-star"></i>
                         </button>
+                        <button 
+                          class="action-btn small danger"
+                          @click="confirmDeletePhoto(photo._id)"
+                          :disabled="photoActionLoading"
+                          title="Удалить"
+                        >
+                          <i class="bi-trash"></i>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                  
+                  <!-- Empty State -->                
+                  <div v-else class="empty-photos">
+                    <div class="upload-zone" @click="triggerPhotoUpload" :class="{ 'uploading': photoActionLoading }">
+                      <div class="upload-icon-container">
+                        <div class="upload-icon-bg">
+                          <i v-if="!photoActionLoading" class="bi-camera-fill upload-icon"></i>
+                          <div v-else class="upload-spinner"></div>
+                        </div>
+                        <div class="upload-pulse"></div>
+                      </div>
+                      
+                      <div class="upload-content">
+                        <h3 class="upload-title">
+                          {{ photoActionLoading ? 'Загружаем...' : 'Добавьте первое фото' }}
+                        </h3>
+                        <p class="upload-description">
+                          {{ photoActionLoading ? 'Подождите, фотография обрабатывается' : 'Нажмите или перетащите файлы сюда для загрузки' }}
+                        </p>
                         
-                        <div class="upload-hint">
-                          <small>Поддерживаются: JPG, PNG, WebP до 10 МБ</small>
+                        <div class="upload-features">
+                          <div class="feature-item">
+                            <i class="bi-shield-check"></i>
+                            <span>Безопасно</span>
+                          </div>
+                          <div class="feature-item">
+                            <i class="bi-lightning-charge"></i>
+                            <span>Быстро</span>
+                          </div>
+                          <div class="feature-item">
+                            <i class="bi-image"></i>
+                            <span>HD качество</span>
+                          </div>
+                        </div>
+                        
+                        <div class="upload-btn-container">
+                          <button 
+                            class="upload-btn"
+                            @click.stop="triggerPhotoUpload" 
+                            :disabled="photoActionLoading"
+                          >
+                            <span v-if="photoActionLoading" class="btn-spinner"></span>
+                            <i v-else class="bi-plus-circle-fill"></i>
+                            {{ photoActionLoading ? 'Загрузка...' : 'Выбрать фото' }}
+                          </button>
+                          
+                          <div class="upload-hint">
+                            <small>Поддерживаются: JPG, PNG, WebP до 10 МБ</small>
+                          </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
 
-                <!-- Photo Messages -->
-                <div v-if="photoActionError" class="alert error">
-                  <i class="bi-exclamation-circle"></i>
-                  {{ photoActionError }}
-                </div>
-                <div v-if="photoActionSuccess" class="alert success">
-                  <i class="bi-check-circle"></i>
-                  {{ photoActionSuccess }}
-                </div>
-                <div v-if="photoActionLoading" class="alert info">
-                  <div class="spinner-small" style="border-top-color:#667eea"></div>
-                  Загрузка фотографий...
+                  <!-- Photo Messages -->
+                  <div v-if="photoActionError" class="alert error">
+                    <i class="bi-exclamation-circle"></i>
+                    {{ photoActionError }}
+                  </div>
+                  <div v-if="photoActionSuccess" class="alert success">
+                    <i class="bi-check-circle"></i>
+                    {{ photoActionSuccess }}
+                  </div>
+                  <div v-if="photoActionLoading" class="alert info">
+                    <div class="spinner-small" style="border-top-color:#667eea"></div>
+                    Загрузка фотографий...
+                  </div>
                 </div>
               </div>
             </div>
@@ -423,6 +434,7 @@ const loading = ref(true);
 const initialLoading = ref(true);
 const error = ref('');
 const isEditMode = ref(false);
+const activeTab = ref('info'); // Добавляем переключатель вкладок
 let originalProfileData = ''; // Для хранения исходных данных профиля в формате JSON
 
 // Для управления фото
@@ -590,10 +602,16 @@ const toggleEditMode = async () => {
 };
 
 const scrollToPhotos = () => {
-  const photosSection = document.getElementById('photos-section');
-  if (photosSection) {
-    photosSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
-  }
+  // Переключаемся на вкладку с фото
+  activeTab.value = 'photos';
+  
+  // Дополнительно можно прокрутить к секции фото после смены вкладки
+  nextTick(() => {
+    const photosSection = document.getElementById('photos-section');
+    if (photosSection) {
+      photosSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  });
 };
 
 
@@ -1154,6 +1172,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+/* Базовые стили */
 .app-profile-view {
   display: flex;
   flex-direction: column;
@@ -1161,7 +1180,6 @@ onUnmounted(() => {
   width: 100%;
   position: relative;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  /* Убираем overflow: hidden чтобы контент не обрезался */
 }
 
 /* Container */
@@ -1173,72 +1191,244 @@ onUnmounted(() => {
   box-sizing: border-box;
 }
 
-/* Header Section - ИСПРАВЛЕНО */
-.profile-header {
-  background: rgba(33, 33, 60, 0.9);
-  backdrop-filter: blur(10px);
-  padding: 1rem 0;
-  color: white;
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  /* Фиксируем минимальную высоту заголовка */
-  min-height: 80px;
+/* Loading State */
+.loading-section {
+  height: 100vh;
   display: flex;
-  align-items: center;
   justify-content: center;
-  /* Убираем фиксированную высоту которая обрезала контент */
+  align-items: center;
+  color: white;
+}
+
+.loading-spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid rgba(255, 255, 255, 0.3);
+  border-top: 4px solid white;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 1rem;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Error State */
+.error-section {
+  padding: 2rem 0;
+}
+
+.error-card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16px;
+  padding: 2rem;
+  text-align: center;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+}
+
+.error-card i {
+  font-size: 3rem;
+  color: #dc3545;
+  margin-bottom: 1rem;
+}
+
+.retry-btn {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: 25px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 1rem;
+}
+
+.retry-btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
+}
+
+/* Main Content */
+.profile-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem 0;
+  padding-bottom: calc(1rem + var(--nav-height, 60px));
+  -webkit-overflow-scrolling: touch;
+}
+
+.profile-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-height: max-content;
+}
+
+/* Profile Header Card */
+.profile-header-card {
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 1.25rem;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.profile-header-content {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Avatar Section */
+.avatar-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.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;
 }
 
-.header-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.avatar-image {
   width: 100%;
-  position: relative;
-  min-height: 48px;
+  height: 100%;
+  object-fit: cover;
+  display: block;
 }
 
-.profile-title {
+.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;
+  width: 30px;
+  height: 30px;
+}
+
+.change-avatar-btn:hover {
+  background: #5a6abf;
+  transform: scale(1.1);
+}
+
+.user-meta {
   flex: 1;
-  text-align: center;
-  /* Уменьшаем отступы для лучшего баланса */
-  padding: 0 20px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
 }
 
-.section-title {
-  margin: 0;
+.user-name {
   font-size: 1.3rem;
   font-weight: 600;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-  color: white;
-  /* Обеспечиваем видимость заголовка */
-  position: relative;
-  z-index: 1;
+  margin: 0 0 0.2rem;
+  color: #333;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
-.subtitle {
-  margin: 0.25rem 0 0;
+.user-email {
   font-size: 0.85rem;
-  opacity: 0.9;
-  color: rgba(255, 255, 255, 0.8);
+  color: #6c757d;
+  margin: 0 0 0.5rem;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.user-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.badge {
+  padding: 0.25rem 0.6rem;
+  border-radius: 12px;
+  font-size: 0.7rem;
+  font-weight: 500;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+
+.badge.verified {
+  background: linear-gradient(45deg, #28a745, #20c997);
+  color: white;
+}
+
+.badge.member-since {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
 }
 
 .header-actions {
-  /* Убираем абсолютное позиционирование для лучшего отображения */
   display: flex;
   align-items: center;
-  z-index: 2;
+  justify-content: flex-end;
 }
 
-/* Стили для кнопки редактирования в заголовке - ИСПРАВЛЕНО */
+/* Edit Button */
 .edit-btn {
   background: linear-gradient(45deg, #667eea, #764ba2);
   border: 1px solid rgba(102, 126, 234, 0.3);
   color: white;
-  padding: 0.5rem 1rem;
-  border-radius: 25px;
+  padding: 0.4rem 0.8rem;
+  border-radius: 20px;
   font-size: 0.85rem;
   font-weight: 500;
   cursor: pointer;
@@ -1247,28 +1437,598 @@ onUnmounted(() => {
   align-items: center;
   gap: 0.4rem;
   backdrop-filter: blur(10px);
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
 }
 
 .edit-btn:hover {
   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);
+  box-shadow: 0 6px 15px rgba(102, 126, 234, 0.25);
 }
 
 .edit-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
   transform: none;
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
+  box-shadow: none;
 }
 
-/* Центрирование кнопки выхода */
+/* Stats Section */
+.stats-section {
+  display: flex;
+  justify-content: space-between;
+  background: rgba(243, 245, 250, 0.6);
+  border-radius: 12px;
+  padding: 0.8rem;
+  margin-top: 0.8rem;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.stat-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(102, 126, 234, 0.15);
+  color: #667eea;
+}
+
+.stat-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.stat-value {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.stat-label {
+  font-size: 0.75rem;
+  color: #6c757d;
+}
+
+/* Tabs */
+.profile-tabs {
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+}
+
+.tabs-container {
+  display: flex;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.tab-btn {
+  flex: 1;
+  padding: 0.8rem 1rem;
+  text-align: center;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: #6c757d;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+}
+
+.tab-btn.active {
+  color: #667eea;
+  font-weight: 600;
+}
+
+.tab-btn.active:after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  border-radius: 3px 3px 0 0;
+}
+
+.tab-btn:hover {
+  color: #5a6abf;
+  background: rgba(102, 126, 234, 0.05);
+}
+
+.tab-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 0.3rem;
+  border-radius: 9px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  background: #e9ecef;
+  color: #6c757d;
+}
+
+.tab-btn.active .tab-badge {
+  background: #667eea;
+  color: white;
+}
+
+/* Tabs Content */
+.tabs-content {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 16px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  padding: 0;
+}
+
+.tab-pane {
+  min-height: 200px;
+}
+
+/* Info Card */
+.info-card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+  overflow: hidden;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  background: rgba(248, 249, 250, 0.5);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.card-header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #333;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.card-content {
+  padding: 1.25rem;
+}
+
+/* Info Grid */
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.info-item label {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: #6c757d;
+}
+
+.info-item span {
+  font-size: 0.95rem;
+  color: #333;
+}
+
+.info-item.full-width {
+  grid-column: 1 / -1;
+}
+
+.bio-text {
+  line-height: 1.5;
+}
+
+/* Forms */
+.form-input, .form-textarea {
+  width: 100%;
+  padding: 0.6rem 0.8rem;
+  border-radius: 8px;
+  border: 1px solid #ced4da;
+  font-size: 0.9rem;
+  background: white;
+  transition: all 0.3s ease;
+}
+
+.form-input:focus, .form-textarea:focus {
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+  outline: none;
+}
+
+.form-input:disabled, .form-textarea:disabled {
+  background: #f8f9fa;
+  cursor: not-allowed;
+}
+
+.form-textarea {
+  resize: vertical;
+  min-height: 100px;
+}
+
+/* Photo Grid */
+.photo-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 0.8rem;
+}
+
+.photo-item {
+  aspect-ratio: 1/1;
+  position: relative;
+  border-radius: 10px;
+  overflow: hidden;
+  transition: transform 0.3s ease;
+  cursor: pointer;
+}
+
+.photo-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: filter 0.3s ease;
+}
+
+/* Photo Actions */
+.photo-actions {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  gap: 0.4rem;
+  padding: 0.4rem;
+  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.photo-item:hover .photo-actions {
+  opacity: 1;
+}
+
+.photo-item:hover .photo-image {
+  filter: brightness(0.9);
+}
+
+.main-badge {
+  position: absolute;
+  top: 0.4rem;
+  left: 0.4rem;
+  background: rgba(255, 255, 255, 0.85);
+  padding: 0.25rem 0.5rem;
+  border-radius: 8px;
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: #333;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.main-badge i {
+  color: #ffc107;
+}
+
+.action-btn {
+  border: none;
+  border-radius: 6px;
+  padding: 0.35rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.action-btn.small {
+  width: 28px;
+  height: 28px;
+  font-size: 0.8rem;
+}
+
+.action-btn.primary {
+  background: rgba(102, 126, 234, 0.9);
+  color: white;
+}
+
+.action-btn.danger {
+  background: rgba(220, 53, 69, 0.9);
+  color: white;
+}
+
+.action-btn.primary:hover {
+  background: #5a6abf;
+}
+
+.action-btn.danger:hover {
+  background: #c82333;
+}
+
+.action-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Add Photo Button */
+.add-photo-btn {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  border: none;
+  color: white;
+  padding: 0.4rem 0.8rem;
+  border-radius: 8px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.add-photo-btn:hover {
+  background: linear-gradient(45deg, #5a6abf, #6a4190);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
+}
+
+.add-photo-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Empty Photos */
+.empty-photos {
+  padding: 0.5rem 0;
+}
+
+/* Delete Modal */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  backdrop-filter: blur(4px);
+}
+
+.delete-modal {
+  width: 90%;
+  max-width: 400px;
+  background: white;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  animation: modal-in 0.3s ease;
+}
+
+@keyframes modal-in {
+  from { opacity: 0; transform: scale(0.9); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.25rem;
+  background: rgba(248, 249, 250, 0.8);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  padding: 0.3rem;
+  font-size: 1.2rem;
+  color: #6c757d;
+  cursor: pointer;
+  transition: color 0.2s;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-btn:hover {
+  color: #333;
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.modal-content {
+  padding: 1.25rem;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.8rem;
+  padding: 1rem 1.25rem;
+  background: rgba(248, 249, 250, 0.8);
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.action-btn.secondary {
+  background: #f8f9fa;
+  color: #333;
+  border: 1px solid #ced4da;
+  padding: 0.5rem 1rem;
+}
+
+.action-btn.secondary:hover {
+  background: #e9ecef;
+}
+
+.action-btn.danger {
+  background: #dc3545;
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+}
+
+.action-btn.danger:hover {
+  background: #c82333;
+}
+
+/* Alert Messages */
+.alert {
+  padding: 0.8rem 1rem;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-size: 0.9rem;
+  animation: alert-in 0.3s ease;
+}
+
+@keyframes alert-in {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.alert.error {
+  background: rgba(220, 53, 69, 0.1);
+  color: #dc3545;
+  border: 1px solid rgba(220, 53, 69, 0.2);
+}
+
+.alert.success {
+  background: rgba(40, 167, 69, 0.1);
+  color: #28a745;
+  border: 1px solid rgba(40, 167, 69, 0.2);
+}
+
+.alert.info {
+  background: rgba(102, 126, 234, 0.1);
+  color: #667eea;
+  border: 1px solid rgba(102, 126, 234, 0.2);
+}
+
+/* Spinner Small */
+.spinner-small {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top: 2px solid white;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+/* No Data State */
+.no-data-section {
+  padding: 2rem 0;
+}
+
+.no-data-card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16px;
+  padding: 2rem;
+  text-align: center;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+}
+
+.no-data-card i {
+  font-size: 3rem;
+  color: #6c757d;
+  margin-bottom: 1rem;
+}
+
+/* Select Wrapper and Dropdown */
+.select-wrapper {
+  position: relative;
+}
+
+.clear-btn {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: #6c757d;
+  cursor: pointer;
+  font-size: 0.8rem;
+  padding: 0.2rem;
+  border-radius: 50%;
+}
+
+.clear-btn:hover {
+  color: #333;
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  margin-top: 0.3rem;
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 10;
+}
+
+.dropdown-option {
+  padding: 0.6rem 1rem;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.dropdown-option:hover {
+  background: rgba(102, 126, 234, 0.1);
+}
+
+/* Logout Button */
 .logout-section {
   display: flex;
   justify-content: center;
-  margin-top: 0.5rem;
+  margin-top: 1.5rem;
 }
 
 .logout-btn {
@@ -1292,1533 +2052,107 @@ 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);
-}
-
-/* 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);
-}
-
-/* НОВЫЕ СТИЛИ ДЛЯ ПЕРЕРАБОТАННОЙ КНОПКИ ДОБАВЛЕНИЯ ФОТО */
-
-/* Upload Zone - Основная зона загрузки */
+/* Upload Zone */
 .upload-zone {
   position: relative;
-  padding: 3rem 2rem;
-  border: 3px dashed #dee2e6;
-  border-radius: 20px;
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
+  padding: 2rem 1.5rem;
+  border: 2px dashed #dee2e6;
+  border-radius: 16px;
+  background: rgba(248, 249, 250, 0.5);
   cursor: pointer;
-  transition: all 0.4s ease;
-  overflow: hidden;
-  min-height: 300px;
+  transition: all 0.3s ease;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  text-align: center;
 }
 
 .upload-zone:hover {
   border-color: #667eea;
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
-  transform: translateY(-3px);
-  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.2);
+  background: rgba(102, 126, 234, 0.05);
+  transform: translateY(-2px);
 }
 
-.upload-zone.uploading {
-  border-color: #667eea;
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
-  pointer-events: none;
-}
-
-/* Icon Container с анимацией */
 .upload-icon-container {
   position: relative;
-  margin-bottom: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  margin-bottom: 1.5rem;
 }
 
 .upload-icon-bg {
-  width: 100px;
-  height: 100px;
+  width: 70px;
+  height: 70px;
   border-radius: 50%;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   display: flex;
   align-items: center;
   justify-content: center;
+  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
   position: relative;
   z-index: 2;
-  transition: all 0.4s ease;
-  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
-}
-
-.upload-zone:hover .upload-icon-bg {
-  transform: scale(1.1);
-  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4);
 }
 
 .upload-icon {
-  font-size: 2.5rem;
+  font-size: 2rem;
   color: white;
-  transition: all 0.3s ease;
 }
 
-.upload-zone:hover .upload-icon {
-  transform: scale(1.1);
-}
-
-/* Анимированная пульсация */
 .upload-pulse {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 100px;
-  height: 100px;
+  width: 70px;
+  height: 70px;
   border-radius: 50%;
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
-  animation: pulse-upload 2s infinite;
+  background: rgba(102, 126, 234, 0.3);
+  animation: pulse 2s infinite;
   z-index: 1;
 }
 
-@keyframes pulse-upload {
+@keyframes pulse {
   0% {
     transform: translate(-50%, -50%) scale(1);
-    opacity: 1;
+    opacity: 0.8;
   }
   70% {
-    transform: translate(-50%, -50%) scale(1.6);
+    transform: translate(-50%, -50%) scale(1.5);
     opacity: 0;
   }
   100% {
-    transform: translate(-50%, -50%) scale(1.6);
+    transform: translate(-50%, -50%) scale(1.5);
     opacity: 0;
   }
 }
 
-/* Спиннер для загрузки */
 .upload-spinner {
-  width: 2.5rem;
-  height: 2.5rem;
-  border: 4px solid rgba(255, 255,  255, 0.3);
-  border-top: 4px solid white;
+  width: 2rem;
+  height: 2rem;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-top: 3px solid white;
   border-radius: 50%;
-  animation: spin-upload 1s linear infinite;
-}
-
-@keyframes spin-upload {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* Контент загрузки */
-.upload-content {
-  text-align: center;
-  max-width: 400px;
-  width: 100%;
+  animation: spin 0.8s linear infinite;
 }
 
 .upload-title {
-  font-size: 1.5rem;
-  font-weight: 700;
+  font-size: 1.2rem;
+  font-weight: 600;
   color: #333;
-  margin: 0 0 1rem;
-  transition: all 0.3s ease;
-}
-
-.upload-zone:hover .upload-title {
-  color: #667eea;
+  margin: 0 0 0.5rem;
 }
 
 .upload-description {
-  font-size: 1rem;
+  font-size: 0.9rem;
   color: #6c757d;
-  margin: 0 0 2rem;
-  line-height: 1.5;
-  transition: all 0.3s ease;
+  margin: 0 0 1.5rem;
+  max-width: 400px;
 }
 
-.upload-zone:hover .upload-description {
-  color: #495057;
-}
-
-/* Особенности/Преимущества */
 .upload-features {
   display: flex;
   justify-content: center;
-  gap: 2rem;
-  margin-bottom: 2rem;
+  gap: 1.5rem;
+  margin-bottom: 1.5rem;
   flex-wrap: wrap;
 }
 
@@ -2826,279 +2160,303 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
-  transition: all 0.3s ease;
+  gap: 0.3rem;
 }
 
 .feature-item i {
-  font-size: 1.5rem;
+  font-size: 1.2rem;
   color: #667eea;
-  transition: all 0.3s ease;
 }
 
 .feature-item span {
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   color: #6c757d;
-  font-weight: 500;
-  transition: all 0.3s ease;
 }
 
-.upload-zone:hover .feature-item i {
-  color: #5a6abf;
-  transform: scale(1.1);
-}
-
-.upload-zone:hover .feature-item span {
-  color: #495057;
-}
-
-/* Контейнер кнопки */
-.upload-btn-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-}
-
-/* Главная кнопка загрузки */
 .upload-btn {
   background: linear-gradient(45deg, #667eea, #764ba2);
   color: white;
   border: none;
-  padding: 1rem 2.5rem;
-  border-radius: 50px;
-  font-size: 1.1rem;
-  font-weight: 600;
+  padding: 0.75rem 1.5rem;
+  border-radius: 25px;
+  font-size: 0.9rem;
+  font-weight: 500;
   cursor: pointer;
-  transition: all 0.4s ease;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
-  min-height: 56px;
-  position: relative;
-  overflow: hidden;
-}
-
-.upload-btn::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-  transition: left 0.5s;
-}
-
-.upload-btn:hover::before {
-  left: 100%;
+  gap: 0.5rem;
+  transition: all 0.3s ease;
+  box-shadow: 0 6px 15px rgba(102, 126, 234, 0.3);
 }
 
 .upload-btn:hover {
-  background: linear-gradient(45deg, #5a6abf, #6a4190);
-  transform: translateY(-3px) scale(1.05);
-  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
 }
 
 .upload-btn:disabled {
   opacity: 0.7;
   cursor: not-allowed;
-  transform: none !important;
-  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
+  transform: none;
 }
 
-.upload-btn:disabled::before {
-  display: none;
-}
-
-/* Спиннер в кнопке */
 .btn-spinner {
-  width: 20px;
-  height: 20px;
-  border: 3px solid rgba(255, 255, 255, 0.3);
-  border-top: 3px solid white;
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top: 2px solid white;
   border-radius: 50%;
-  animation: spin-upload 0.8s linear infinite;
+  animation: spin 0.8s linear infinite;
 }
 
-/* Подсказка */
-.upload-hint {
-  text-align: center;
+.upload-btn-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.8rem;
 }
 
 .upload-hint small {
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   color: #6c757d;
-  background: rgba(248, 249, 250, 0.8);
-  padding: 0.5rem 1rem;
-  border-radius: 20px;
-  backdrop-filter: blur(5px);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
 }
 
-.upload-zone:hover .upload-hint small {
-  background: rgba(255, 255, 255, 0.9);
-  color: #495057;
-  border-color: rgba(102, 126, 234, 0.2);
+/* Адаптивные стили */
+@media (min-width: 768px) {
+  /* Desktop styles */
+  .profile-header-content {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  
+  .avatar-section {
+    flex: 1;
+    justify-content: flex-start;
+    margin-bottom: 0;
+  }
+  
+  .stats-section {
+    width: 320px;
+    margin-top: 0;
+  }
+  
+  .info-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .photo-grid {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
+  
+  .tabs-content {
+    padding: 0;
+  }
 }
 
-/* Адаптивность для мобильных устройств */
-@media (max-width: 768px) {
-  .upload-zone {
-    padding: 2rem 1.5rem;
-    min-height: 250px;
+@media (max-width: 767px) {
+  /* Tablet and mobile styles */
+  .profile-header-content {
+    flex-direction: column;
+ 
   }
   
-  .upload-icon-container {
-    margin-bottom: 1.5rem;
+  .avatar-section {
+    flex-wrap: wrap;
   }
   
-  .upload-icon-bg {
-    width: 80px;
-    height: 80px;
+  .avatar-container {
+    margin: 0 auto;
   }
   
-  .upload-pulse {
-    width: 80px;
-    height: 80px;
+  .user-meta {
+    text-align: center;
+    width: 100%;
   }
   
-  .upload-icon {
-    font-size: 2rem;
+  .user-badges {
+    justify-content: center;
   }
   
-  .upload-title {
-    font-size: 1.3rem;
+  .header-actions {
+    margin-top: 0.8rem;
+    justify-content: center;
+    width: 100%;
   }
   
-  .upload-description {
-    font-size: 0.9rem;
-    margin-bottom: 1.5rem;
+  .stats-section {
+    flex-wrap: wrap;
+    gap: 0.5rem;
   }
   
-  .upload-features {
-    gap: 1.5rem;
-    margin-bottom: 1.5rem;
+  .stat-item {
+    flex: 1;
+    justify-content: center;
+    min-width: 100px;
   }
   
-  .feature-item i {
-    font-size: 1.3rem;
+  .info-grid {
+    grid-template-columns: 1fr;
   }
   
-  .feature-item span {
-    font-size: 0.8rem;
+  .photo-grid {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   }
   
-  .upload-btn {
-    padding: 0.9rem 2rem;
-    font-size: 1rem;
-    min-height: 50px;
+  .tab-btn span {
+    display: none;
+  }
+  
+  .tab-btn i {
+    font-size: 1.2rem;
   }
 }
 
 @media (max-width: 480px) {
-  .upload-zone {
-    padding: 1.5rem 1rem;
-    min-height: 200px;
+  /* Small mobile styles */
+  .container {
+    padding: 0 0.75rem;
   }
   
-  .upload-icon-bg {
+  .profile-header-card,
+  .profile-tabs,
+  .tabs-content {
+    padding: 1rem;
+    border-radius: 12px;
+  }
+  
+  .card-header,
+  .card-content {
+    padding: 1rem;
+  }
+  
+  .photo-grid {
+    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+    gap: 0.5rem;
+  }
+  
+  .avatar-container {
     width: 70px;
     height: 70px;
   }
   
-  .upload-pulse {
-    width: 70px;
-    height: 70px;
-  }
-  
-  .upload-icon {
-    font-size: 1.8rem;
-  }
-  
-  .upload-title {
+  .user-name {
     font-size: 1.2rem;
   }
   
-  .upload-description {
-    font-size: 0.85rem;
+  .stat-item {
+    min-width: 80px;
   }
   
   .upload-features {
-    flex-direction: column;
     gap: 1rem;
   }
   
-  .upload-btn {
-    padding: 0.8rem 1.5rem;
-    font-size: 0.95rem;
-    width: 100%;
-    justify-content: center;
+  .upload-icon-bg {
+    width: 60px;
+    height: 60px;
   }
   
-  .upload-hint small {
-    font-size: 0.75rem;
-    padding: 0.4rem 0.8rem;
+  .upload-pulse {
+    width: 60px;
+    height: 60px;
+  }
+  
+  .upload-icon {
+    font-size: 1.7rem;
   }
 }
 
-/* Улучшения для состояния загрузки */
-.upload-zone.uploading .upload-pulse {
-  animation: pulse-upload-fast 1s infinite;
-}
-
-@keyframes pulse-upload-fast {
-  0% {
-    transform: translate(-50%, -50%) scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: translate(-50%, -50%) scale(1.3);
-    opacity: 0.5;
-  }
-  100% {
-    transform: translate(-50%, -50%) scale(1);
-    opacity: 1;
-  }
-}
-
-/* Drag and Drop эффекты */
-.upload-zone.drag-over {
-  border-color: #28a745;
-  background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(32, 201, 151, 0.1) 100%);
-  transform: scale(1.02);
-}
-
-.upload-zone.drag-over .upload-icon-bg {
-  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
-  transform: scale(1.15);
-}
-
-/* Темная тема (если понадобится) */
+/* Темная тема */
 @media (prefers-color-scheme: dark) {
-  .upload-zone {
+  .profile-header-card,
+  .profile-tabs,
+  .tabs-content,
+  .info-card {
+    background: rgba(33, 37, 41, 0.9);
+    border-color: rgba(255, 255, 255, 0.05);
+  }
+  
+  .user-name,
+  .stat-value,
+  .tab-btn.active,
+  .card-header h3 {
+    color: #f8f9fa;
+  }
+  
+  .user-email,
+  .stat-label,
+  .tab-btn,
+  .bio-text,
+  .info-item span {
+    color: #adb5bd;
+  }
+  
+  .info-item label {
+    color: #adb5bd;
+  }
+  
+  .card-header,
+  .stats-section {
+    background: rgba(52, 58, 64, 0.5);
+  }
+  
+  .form-input, .form-textarea {
+    background: #343a40;
+    border-color: #495057;
+    color: #f8f9fa;
+  }
+  
+  .form-input:focus, .form-textarea:focus {
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
+  }
+  
+  .form-input:disabled, .form-textarea:disabled {
+    background: #212529;
+  }
+  
+  .upload-zone {
+    background: rgba(52, 58, 64, 0.3);
     border-color: #495057;
-    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
   }
   
   .upload-title {
     color: #f8f9fa;
   }
   
-  .upload-description {
-    color: #adb5bd;
-  }
-  
+  .upload-description,
+  .upload-hint small,
   .feature-item span {
     color: #adb5bd;
   }
   
-  .upload-hint small {
-    background: rgba(33, 37, 41, 0.8);
-    color: #adb5bd;
-    border-color: rgba(255, 255, 255, 0.1);
+  .delete-modal,
+  .dropdown {
+    background: #343a40;
+  }
+  
+  .dropdown-option:hover {
+    background: rgba(102, 126, 234, 0.2);
+  }
+  
+  .modal-header,
+  .modal-actions {
+    background: #212529;
+  }
+  
+  .action-btn.secondary {
+    background: #495057;
+    border-color: #6c757d;
+    color: #f8f9fa;
+  }
+  
+  .action-btn.secondary:hover {
+    background: #6c757d;
+  }
+  
+  .main-badge {
+    background: rgba(52, 58, 64, 0.85);
+    color: #f8f9fa;
   }
 }