From d3fda0be37a4e95163487438b3e1816415de8b23 Mon Sep 17 00:00:00 2001
From: Nicolai <47388378+Ph0en1XXX@users.noreply.github.com>
Date: Sun, 8 Mar 2026 23:31:54 +0300
Subject: [PATCH] StudentProfile new design

---
 frontend/src/pages/StudentProfile.vue | 951 +++++++++++++++-----------
 1 file changed, 569 insertions(+), 382 deletions(-)

diff --git a/frontend/src/pages/StudentProfile.vue b/frontend/src/pages/StudentProfile.vue
index 2a70c6c2..0dcd013b 100644
--- a/frontend/src/pages/StudentProfile.vue
+++ b/frontend/src/pages/StudentProfile.vue
@@ -1,50 +1,43 @@
 <template>
-  <div class="min-h-screen bg-white">
+  <div class="student-profile-page">
     <NoPermission v-if="!$user.data" />
 
-    <div v-else-if="profile.error" class="p-6">
-      <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-sm p-6 border border-red-200">
-        <p class="text-red-500 text-lg font-medium">{{__('Error loading profile:')}} {{ profile.error.message }}</p>
+    <div v-else-if="profile.error" class="p-5">
+      <div class="max-w-4xl mx-auto bg-white rounded-lg shadow p-5 border border-red-200">
+        <p class="text-red-500 font-medium">{{__('Error loading profile:')}} {{ profile.error.message }}</p>
       </div>
     </div>
 
     <div v-else-if="profile.data">
-      <header class="sticky top-0 z-10 flex items-center justify-between bg-white px-6 py-4">
-        <Breadcrumbs class="h-7" :items="breadcrumbs" />
+      <header class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5">
+        <Breadcrumbs :items="breadcrumbs" />
       </header>
 
-      <div class="mx-auto max-w-6xl px-4 py-6">
-        <!-- Profile Header -->
-        <div v-if="!schoolProfileNotFound" class="bg-gradient-to-r from-teal-100 to-teal-600 rounded-2xl shadow-sm border border-gray-200 p-6 -mt-4 relative">
-          <div class="flex flex-col md:flex-row md:items-center gap-6">
-            <div class="flex-1">
-              <h2 class="text-3xl font-bold text-gray-900">{{ displayName }}</h2>
-              <div
-								v-if="profile.data.bio"
-								v-html="
-									DOMPurify.sanitize(decodeEntities(profile.data.bio), {
-										ALLOWED_TAGS: [
-											'b',
-											'i',
-											'em',
-											'strong',
-											'a',
-											'p',
-											'br',
-											'ul',
-											'ol',
-											'li',
-											'img',
-										],
-										ALLOWED_ATTR: ['href', 'target', 'rel', 'src'],
-									})
-								"
-								class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal"
-							></div>
+      <div class="profile-content">
+        <!-- ===== HERO CARD ===== -->
+        <div v-if="!schoolProfileNotFound" class="hero-card">
+          <div class="hero-body">
+            <div class="hero-avatar">
+              {{ displayName ? displayName.charAt(0).toUpperCase() : '?' }}
             </div>
-
-            <div v-if="$user.data && isSessionUser() && !schoolProfileNotFound" class="md:ml-auto">
-              <Button @click="toggleEdit()" class="bg-white hover:bg-gray-100 px-5 py-2.5 rounded-lg transition-colors duration-200">
+            <div class="hero-info">
+              <h1 class="hero-name">{{ displayName }}</h1>
+              <div
+                v-if="profile.data.bio"
+                v-html="
+                  DOMPurify.sanitize(decodeEntities(profile.data.bio), {
+                    ALLOWED_TAGS: ['b','i','em','strong','a','p','br','ul','ol','li','img'],
+                    ALLOWED_ATTR: ['href', 'target', 'rel', 'src'],
+                  })
+                "
+                class="hero-bio prose prose-sm max-w-none !whitespace-normal"
+              ></div>
+              <p v-if="schoolProfile.data && schoolProfile.data.school" class="hero-subtitle">
+                {{ schoolProfile.data.school }}
+              </p>
+            </div>
+            <div v-if="$user.data && isSessionUser() && !schoolProfileNotFound" class="hero-actions">
+              <Button variant="subtle" @click="toggleEdit()">
                 <template #prefix>
                   <Edit class="w-4 h-4 stroke-1.5" />
                 </template>
@@ -54,408 +47,307 @@
           </div>
         </div>
 
-				<!-- VIEW MODE -->
-				<div v-if="!editMode" class="mt-6">
-					<!-- Пустой профиль -->
-					<div v-if="schoolProfileNotFound" class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
-						<div class="p-8 text-center">
-							<div class="max-w-md mx-auto">
-								<div class="mx-auto w-20 h-20 bg-teal-100 rounded-full flex items-center justify-center mb-6">
-									<svg class="w-10 h-10 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-									</svg>
-								</div>
-
-								<h3 class="text-2xl font-bold text-gray-900 mb-3">Профиль студента еще не заполнен</h3>
-
-								<p class="text-gray-600 mb-6">
-									Чтобы получить доступ ко всем возможностям платформы, заполните информацию о себе.
-									Это поможет наставникам лучше понять ваши интересы и цели.
-								</p>
-
-								<div class="bg-teal-50 border border-teal-100 rounded-lg p-5 mb-6 text-left">
-									<h4 class="font-semibold text-teal-800 mb-3 flex items-center gap-2">
-										<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-											<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
-										</svg>
-										Заполнив профиль, вы получите:
-									</h4>
-									<ul class="space-y-2 text-sm text-gray-700">
-										<li class="flex items-start gap-2">
-											<svg class="w-4 h-4 text-teal-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
-												<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-											</svg>
-											<span>Персонализированные рекомендации по обучению</span>
-										</li>
-										<li class="flex items-start gap-2">
-											<svg class="w-4 h-4 text-teal-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
-												<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-											</svg>
-											<span>Подбор наставников по вашим интересам</span>
-										</li>
-										<li class="flex items-start gap-2">
-											<svg class="w-4 h-4 text-teal-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
-												<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-											</svg>
-											<span>Доступ к закрытым мероприятиям и курсам</span>
-										</li>
-									</ul>
-								</div>
-
-								<Button
-									@click="toggleEdit()"
-									class="bg-teal-600 hover:bg-teal-700 text-white px-8 py-3 rounded-lg font-medium transition-colors duration-200 shadow-sm hover:shadow-md"
-								>
-									<template #prefix>
-										<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-										</svg>
-									</template>
-									Заполнить профиль студента
-								</Button>
-							</div>
-						</div>
-					</div>
-
-					<!-- Загружающийся профиль -->
-					<div v-else-if="schoolProfile.loading" class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
-						<div class="flex items-center justify-center py-12">
-							<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
-						</div>
-					</div>
-
-					<!-- Ошибка загрузки (кроме DoesNotExistError) -->
-					<div v-else-if="schoolProfile.error && !schoolProfileNotFound" class="bg-white rounded-2xl shadow-sm border border-red-200 p-6">
-						<p class="text-red-500 text-lg font-medium">{{__('Error loading student data:')}} {{ schoolProfile.error.message }}</p>
-					</div>
-
-					<!-- Загруженный профиль -->
-					<div v-else-if="schoolProfile.data && !schoolProfileNotFound" class="space-y-6">
-            <!-- Основная информация -->
-            <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
-              <div class="px-6 py-4 border-b border-gray-100 bg-teal-400">
-                <h3 class="text-xl font-semibold text-white">{{__('Basic Information')}}</h3>
+				        <!-- VIEW MODE -->
+        <div v-if="!editMode" class="section-grid">
+          <!-- Empty profile -->
+          <div v-if="schoolProfileNotFound" class="empty-card">
+            <div class="empty-card-inner">
+              <div class="empty-icon-circle">
+                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                </svg>
               </div>
-              <div class="p-6">
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                  <div class="space-y-4">
-                    <div class="flex items-start">
-                      <span class="inline-block w-40 text-gray-700 font-medium">{{__('Last name:')}}:</span>
-                      <span class="text-gray-900">{{ schoolProfile.data.last_name || '—' }}</span>
-                    </div>
-                    <div class="flex items-start">
-                      <span class="inline-block w-40 text-gray-700 font-medium">{{__('Name:')}}:</span>
-                      <span class="text-gray-900">{{ schoolProfile.data.first_name || '—' }}</span>
-                    </div>
-                    <div class="flex items-start">
-                      <span class="inline-block w-40 text-gray-700 font-medium">{{__('Middle name:')}}</span>
-                      <span class="text-gray-900">{{ schoolProfile.data.middle_name || '—' }}</span>
-                    </div>
-                    <div class="flex items-start">
-                      <span class="inline-block w-40 text-gray-700 font-medium">{{__('Date of birth:')}}</span>
-                      <span class="text-gray-900">{{ formattedDate(schoolProfile.data.birth_date) || '—' }}</span>
-                    </div>
-                    <div class="flex items-start">
-                      <span class="inline-block w-40 text-gray-700 font-medium">{{__('Phone:')}}</span>
-                      <span class="text-gray-900 font-mono">{{ maskPrivate(schoolProfile.data.phone) }}</span>
-                    </div>
-                    <div class="flex items-start">
-                      <span class="inline-block w-40 text-gray-700 font-medium">Email:</span>
-                      <span class="text-gray-900 font-mono">{{ maskPrivate(schoolProfile.data.email_private) }}</span>
-                    </div>
-                    <div class="flex items-start">
-                      <span class="inline-block w-40 text-gray-700 font-medium">Telegram:</span>
-                      <div class="flex-1">
-                        <a v-if="schoolProfile.data.telegram"
-                           :href="formatTelegram(schoolProfile.data.telegram)"
-                           target="_blank"
-                           class="inline-flex items-center gap-2 text-primary-600 hover:text-primary-700 font-medium transition-colors">
-                          <span>@{{ schoolProfile.data.telegram.replace('@', '') }}</span>
-													<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-														<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69.01-.03.01-.14-.06-.2-.07-.06-.17-.04-.24-.02-.1.02-1.69 1.09-4.78 3.2-.45.31-.86.46-1.23.45-.41-.01-1.2-.23-1.79-.42-.72-.23-1.29-.36-1.24-.76.03-.24.37-.48 1.01-.74 3.97-1.67 6.62-2.77 7.94-3.31 3.26-1.33 3.94-1.56 4.38-1.56.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z"/>
-													</svg>
-                        </a>
-                        <span v-else class="text-gray-500">—</span>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div class="space-y-4">
-                    <div class="flex items-start">
-                      <span class="inline-block w-40 text-gray-700 font-medium">{{__('University:')}}</span>
-                      <span class="text-gray-900">{{ schoolProfile.data.school || '—' }}</span>
-                    </div>
-                    <div class="flex items-start">
-                      <span class="inline-block w-40 text-gray-700 font-medium">{{__('Education level:')}}</span>
-                      <span class="text-gray-900">{{ schoolProfile.data.education_level || '—' }}</span>
-                    </div>
-                    <div class="flex items-start">
-                      <span class="inline-block w-40 text-gray-700 font-medium">{{__('The direction of training:')}}</span>
-                      <span class="text-gray-900">{{ schoolProfile.data.major || '—' }}</span>
-                    </div>
-                    <div class="flex items-start">
-                      <span class="inline-block w-40 text-gray-700 font-medium">{{__('Educational program:')}}</span>
-                      <span class="text-gray-900">{{ schoolProfile.data.program || '—' }}</span>
-                    </div>
-                    <div class="flex items-start">
-                      <span class="inline-block w-40 text-gray-700 font-medium">{{__('Course:')}}</span>
-                      <span class="text-gray-900">{{ schoolProfile.data.course || '—' }}</span>
-                    </div>
-                    <div class="flex items-start">
-                      <span class="inline-block w-40 text-gray-700 font-medium">{{__('The head of the group:')}}</span>
-                      <span class="text-gray-900">
-                        <span :class="schoolProfile.data.group_leader === 'Да' ? 'text-green-600' : 'text-gray-600'">
-                          {{ schoolProfile.data.group_leader || '—' }}
-                        </span>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- О себе -->
-            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-              <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden lg:col-span-2">
-                <div class="px-6 py-4 border-b border-gray-100 bg-teal-400">
-                  <h3 class="text-xl font-semibold text-white">{{__('Briefly about your interests')}}</h3>
-                </div>
-                <div class="p-6">
-                  <p class="text-gray-700 leading-relaxed whitespace-pre-line">{{ schoolProfile.data.interests || __('No information is provided') }}</p>
-                </div>
-              </div>
-
-              <div class="space-y-6">
-                <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
-                  <div class="px-6 py-4 border-b border-gray-100 bg-teal-400">
-                    <h3 class="text-xl font-semibold text-white">{{__('About me')}}</h3>
-                  </div>
-                  <div class="p-6">
-                    <p class="text-gray-700 leading-relaxed whitespace-pre-line">{{ schoolProfile.data.about_me || __('No information is provided') }}</p>
-                  </div>
-                </div>
-
-                <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
-                  <div class="px-6 py-4 border-b border-gray-100 bg-teal-400">
-                    <h3 class="text-xl font-semibold text-white">{{__('About dreams')}}</h3>
-                  </div>
-                  <div class="p-6">
-                    <p class="text-gray-700 leading-relaxed whitespace-pre-line">{{ schoolProfile.data.dreams || __('No information is provided') }}</p>
-                  </div>
+              <h3 class="empty-title">Профиль студента еще не заполнен</h3>
+              <p class="empty-desc">
+                Заполните информацию о себе, чтобы получить доступ ко всем возможностям платформы
+                и помочь наставникам лучше понять ваши интересы.
+              </p>
+              <div class="empty-benefits">
+                <div class="benefit-item">
+                  <span class="benefit-dot"></span>
+                  Персонализированные рекомендации по обучению
+                </div>
+                <div class="benefit-item">
+                  <span class="benefit-dot"></span>
+                  Подбор наставников по вашим интересам
+                </div>
+                <div class="benefit-item">
+                  <span class="benefit-dot"></span>
+                  Доступ к закрытым мероприятиям и курсам
                 </div>
               </div>
+              <Button variant="solid" @click="toggleEdit()" class="empty-btn">
+                <template #prefix>
+                  <Edit class="w-4 h-4 stroke-1.5" />
+                </template>
+                Заполнить профиль студента
+              </Button>
             </div>
           </div>
 
-          <div v-else class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
-            <div class="text-center py-12">
-              <div class="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
-                <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+          <!-- Loading -->
+          <div v-else-if="schoolProfile.loading" class="info-card" style="grid-column: 1 / -1">
+            <div class="flex items-center justify-center py-16">
+              <div class="animate-spin rounded-full h-10 w-10 border-2 border-gray-200 border-t-gray-600"></div>
+            </div>
+          </div>
+
+          <!-- Error -->
+          <div v-else-if="schoolProfile.error && !schoolProfileNotFound" class="info-card border-red-200" style="grid-column: 1 / -1">
+            <p class="text-red-500 font-medium p-5">{{__('Error loading student data:')}} {{ schoolProfile.error.message }}</p>
+          </div>
+
+          <!-- Loaded profile -->
+          <template v-else-if="schoolProfile.data && !schoolProfileNotFound">
+            <!-- Personal Info Card -->
+            <div class="info-card">
+              <div class="card-header">
+                <svg class="card-header-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
+                <h3 class="card-header-title">{{__('Personal information')}}</h3>
+              </div>
+              <div class="card-body">
+                <div class="info-row">
+                  <span class="info-label">{{__('Last name:')}}</span>
+                  <span class="info-value">{{ schoolProfile.data.last_name || '—' }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="info-label">{{__('Name:')}}</span>
+                  <span class="info-value">{{ schoolProfile.data.first_name || '—' }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="info-label">{{__('Middle name:')}}</span>
+                  <span class="info-value">{{ schoolProfile.data.middle_name || '—' }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="info-label">{{__('Date of birth:')}}</span>
+                  <span class="info-value">{{ formattedDate(schoolProfile.data.birth_date) || '—' }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="info-label">{{__('Phone:')}}</span>
+                  <span class="info-value font-mono text-sm">{{ maskPrivate(schoolProfile.data.phone) }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="info-label">Email</span>
+                  <span class="info-value font-mono text-sm">{{ maskPrivate(schoolProfile.data.email_private) }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="info-label">Telegram</span>
+                  <span class="info-value">
+                    <a v-if="schoolProfile.data.telegram"
+                       :href="formatTelegram(schoolProfile.data.telegram)"
+                       target="_blank"
+                       class="tg-link">
+                      <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69.01-.03.01-.14-.06-.2-.07-.06-.17-.04-.24-.02-.1.02-1.69 1.09-4.78 3.2-.45.31-.86.46-1.23.45-.41-.01-1.2-.23-1.79-.42-.72-.23-1.29-.36-1.24-.76.03-.24.37-.48 1.01-.74 3.97-1.67 6.62-2.77 7.94-3.31 3.26-1.33 3.94-1.56 4.38-1.56.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z"/></svg>
+                      @{{ schoolProfile.data.telegram.replace('@', '') }}
+                    </a>
+                    <span v-else class="text-gray-400">—</span>
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Education Card -->
+            <div class="info-card">
+              <div class="card-header">
+                <svg class="card-header-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 14l9-5-9-5-9 5 9 5z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/></svg>
+                <h3 class="card-header-title">Образование</h3>
+              </div>
+              <div class="card-body">
+                <div class="info-row">
+                  <span class="info-label">{{__('University:')}}</span>
+                  <span class="info-value">{{ schoolProfile.data.school || '—' }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="info-label">{{__('Education level:')}}</span>
+                  <span class="info-value">{{ schoolProfile.data.education_level || '—' }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="info-label">{{__('The direction of training:')}}</span>
+                  <span class="info-value">{{ schoolProfile.data.major || '—' }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="info-label">{{__('Educational program:')}}</span>
+                  <span class="info-value">{{ schoolProfile.data.program || '—' }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="info-label">{{__('Course:')}}</span>
+                  <span class="info-value">{{ schoolProfile.data.course || '—' }}</span>
+                </div>
+                <div class="info-row">
+                  <span class="info-label">{{__('The head of the group:')}}</span>
+                  <span class="info-value">
+                    <span :class="schoolProfile.data.group_leader === 'Да' ? 'badge-yes' : 'badge-no'">
+                      {{ schoolProfile.data.group_leader || '—' }}
+                    </span>
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Interests Card -->
+            <div class="info-card full-width">
+              <div class="card-header">
+                <svg class="card-header-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
+                <h3 class="card-header-title">{{__('Briefly about your interests')}}</h3>
+              </div>
+              <div class="card-body">
+                <p class="text-body">{{ schoolProfile.data.interests || __('No information is provided') }}</p>
+              </div>
+            </div>
+
+            <!-- About Me & Dreams — side by side on desktop -->
+            <div class="info-card">
+              <div class="card-header">
+                <svg class="card-header-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
+                <h3 class="card-header-title">{{__('About me')}}</h3>
+              </div>
+              <div class="card-body">
+                <p class="text-body">{{ schoolProfile.data.about_me || __('No information is provided') }}</p>
+              </div>
+            </div>
+
+            <div class="info-card">
+              <div class="card-header">
+                <svg class="card-header-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>
+                <h3 class="card-header-title">{{__('About dreams')}}</h3>
+              </div>
+              <div class="card-body">
+                <p class="text-body">{{ schoolProfile.data.dreams || __('No information is provided') }}</p>
+              </div>
+            </div>
+          </template>
+
+          <!-- Fallback: no data -->
+          <div v-else class="info-card full-width">
+            <div class="flex flex-col items-center justify-center py-16 text-center">
+              <div class="empty-icon-circle mb-4" style="width:56px;height:56px">
+                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                 </svg>
               </div>
-              <h3 class="text-xl font-semibold text-gray-900 mb-2">{{__('Profile data was not found')}}</h3>
-              <p class="text-gray-600">{{__('There is no information about the student')}}</p>
+              <h3 class="text-lg font-semibold text-gray-900 mb-1">{{__('Profile data was not found')}}</h3>
+              <p class="text-sm text-gray-500">{{__('There is no information about the student')}}</p>
             </div>
           </div>
         </div>
 
         <!-- EDIT MODE -->
-        <div v-else class="mt-6">
-          <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
-            <div class="px-6 py-4 border-b border-gray-100 bg-teal-400">
-              <h3 class="text-xl font-semibold text-white">{{__('Profile Editing')}}</h3>
-              <p class="text-sm text-gray-200 mt-1">{{__('Fill in the information about yourself')}}</p>
+        <div v-else class="edit-section">
+          <div class="edit-card">
+            <div class="card-header">
+              <svg class="card-header-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
+              <div>
+                <h3 class="card-header-title">{{__('Profile Editing')}}</h3>
+                <p class="text-xs text-gray-400 mt-0.5">{{__('Fill in the information about yourself')}}</p>
+              </div>
             </div>
 
-            <div class="p-6">
-              <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                <!-- Левая колонка -->
-                <div class="space-y-6">
-                  <h4 class="text-lg font-semibold text-gray-900 border-b pb-2">{{__('Personal information')}}</h4>
-
-                  <Input
-                    v-model="form.last_name"
-                    :label="__('Last name:')"
-                    class="bg-gray-50 border-gray-300 focus:border-primary-500 focus:ring-primary-500"
-                  />
-
-                  <Input
-                    v-model="form.first_name"
-                    :label="__('Name:')"
-                    class="bg-gray-50 border-gray-300 focus:border-primary-500 focus:ring-primary-500"
-                  />
-
-                  <Input
-                    v-model="form.middle_name"
-                    :label="__('Middle name:')"
-                    class="bg-gray-50 border-gray-300 focus:border-primary-500 focus:ring-primary-500"
-                  />
-
+            <div class="card-body">
+              <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <!-- Left column -->
+                <div class="space-y-5">
+                  <h4 class="edit-section-title">{{__('Personal information')}}</h4>
+                  <Input v-model="form.last_name" :label="__('Last name:')" />
+                  <Input v-model="form.first_name" :label="__('Name:')" />
+                  <Input v-model="form.middle_name" :label="__('Middle name:')" />
                   <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">{{__('Date of birth:')}}</label>
-                    <DatePicker
-                      v-model="form.birth_date"
-                      class="w-full bg-gray-50 border-gray-300 rounded-lg focus:border-primary-500 focus:ring-primary-500"
-                    />
+                    <label class="block text-sm font-medium text-gray-700 mb-1.5">{{__('Date of birth:')}}</label>
+                    <DatePicker v-model="form.birth_date" class="w-full" />
                   </div>
-
-                  <Input
-                    v-model="form.phone"
-                    :label="__('Phone:')"
-                    placeholder="+7 (XXX) XXX-XX-XX"
-                    class="bg-gray-50 border-gray-300 focus:border-primary-500 focus:ring-primary-500"
-                  />
-
-                  <Input
-                    v-model="form.email_private"
-                    label="Email:"
-                    type="email"
-                    placeholder="example@email.com"
-                    class="bg-gray-50 border-gray-300 focus:border-primary-500 focus:ring-primary-500"
-                  />
-
-                  <Input
-                    v-model="form.telegram"
-                    label="Telegram:"
-                    placeholder="username или t.me/username"
-                    class="bg-gray-50 border-gray-300 focus:border-primary-500 focus:ring-primary-500"
-                  />
+                  <Input v-model="form.phone" :label="__('Phone:')" placeholder="+7 (XXX) XXX-XX-XX" />
+                  <Input v-model="form.email_private" label="Email:" type="email" placeholder="example@email.com" />
+                  <Input v-model="form.telegram" label="Telegram:" placeholder="username или t.me/username" />
                 </div>
 
-                <!-- Правая колонка -->
-                <div class="space-y-6">
-                  <h4 class="text-lg font-semibold text-gray-900 border-b pb-2">Образование</h4>
-
+                <!-- Right column -->
+                <div class="space-y-5">
+                  <h4 class="edit-section-title">Образование</h4>
                   <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">{{__('University:')}}</label>
+                    <label class="block text-sm font-medium text-gray-700 mb-1.5">{{__('University:')}}</label>
                     <input
                       type="text"
                       v-model="schoolQuery"
                       @input="debouncedSearchSchool"
-                      class="w-full bg-gray-50 border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors"
+                      class="edit-input"
                       placeholder="Начните вводить название университета"
                     />
-                    <div v-if="schoolResults.length" class="mt-2 border border-gray-300 rounded-lg overflow-hidden shadow-lg bg-white">
+                    <div v-if="schoolResults.length" class="dropdown-list">
                       <div
                         v-for="s in schoolResults"
                         :key="s.school"
-                        class="p-3 cursor-pointer hover:bg-primary-50 border-b border-gray-100 last:border-b-0 transition-colors"
+                        class="dropdown-item"
                         @click="selectSchool(s)"
                       >
                         <div class="font-medium text-gray-900">{{ s.school }}</div>
-                        <div class="text-xs text-gray-500 mt-1">{{ s.adress }}</div>
+                        <div class="text-xs text-gray-400 mt-0.5">{{ s.adress }}</div>
                       </div>
                     </div>
-                    <div v-if="form.school_name && !schoolResults.length" class="mt-2 text-sm text-gray-600">
+                    <div v-if="form.school_name && !schoolResults.length" class="mt-1.5 text-sm text-gray-500">
                       <span class="font-medium">Выбрана:</span> {{ form.school }}
                     </div>
                   </div>
 
                   <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">{{__('Education level:')}}</label>
+                    <label class="block text-sm font-medium text-gray-700 mb-1.5">{{__('Education level:')}}</label>
                     <Select
                       v-model="form.education_level"
                       :options="['Бакалавриат','Магистратура','Аспирантура','Базовое высшее образование','Специализированное высшее образование','Профессиональная переподготовка','Повышение квалификации']"
-                      class="bg-gray-50 border-gray-300 focus:border-primary-500 focus:ring-primary-500"
                     />
                   </div>
 
                   <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-2">{{__('Educational program:')}}</label>
+                    <label class="block text-sm font-medium text-gray-700 mb-1.5">{{__('Educational program:')}}</label>
                     <input
                       type="text"
                       v-model="majorQuery"
                       @input="debouncedSearchMajor"
-                      class="w-full bg-gray-50 border border-gray-300 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors"
+                      class="edit-input"
                       placeholder="Начните вводить название направления"
                     />
-                    <div v-if="majorResults.length" class="mt-2 border border-gray-300 rounded-lg overflow-hidden shadow-lg bg-white">
+                    <div v-if="majorResults.length" class="dropdown-list">
                       <div
                         v-for="m in majorResults"
                         :key="m.major"
-                        class="p-3 cursor-pointer hover:bg-primary-50 border-b border-gray-100 last:border-b-0 transition-colors"
+                        class="dropdown-item"
                         @click="selectMajor(m)"
                       >
                         <div class="font-medium text-gray-900">{{ m.major_name }}</div>
                       </div>
                     </div>
-                    <div v-if="form.major_name && !majorResults.length" class="mt-2 text-sm text-gray-600">
+                    <div v-if="form.major_name && !majorResults.length" class="mt-1.5 text-sm text-gray-500">
                       <span class="font-medium">Выбрано:</span> {{ form.major_name }}
                     </div>
                   </div>
 
-                  <Input
-                    v-model="form.program"
-                    label="Образовательная программа"
-                    class="bg-gray-50 border-gray-300 focus:border-primary-500 focus:ring-primary-500"
-                  />
+                  <Input v-model="form.program" label="Образовательная программа" />
 
                   <div class="grid grid-cols-2 gap-4">
                     <div>
-                      <label class="block text-sm font-medium text-gray-700 mb-2">{{__('Course:')}}</label>
-                      <Select
-                        v-model="form.course"
-                        :options="['1','2','3','4','5','6']"
-                        class="bg-gray-50 border-gray-300 focus:border-primary-500 focus:ring-primary-500 w-full"
-                      />
+                      <label class="block text-sm font-medium text-gray-700 mb-1.5">{{__('Course:')}}</label>
+                      <Select v-model="form.course" :options="['1','2','3','4','5','6']" class="w-full" />
                     </div>
                     <div>
-                      <label class="block text-sm font-medium text-gray-700 mb-2">{{__('The head of the group:')}}</label>
-                      <Select
-                        v-model="form.group_leader"
-                        :options="['Да','Нет']"
-                        class="bg-gray-50 border-gray-300 focus:border-primary-500 focus:ring-primary-500 w-full"
-                      />
+                      <label class="block text-sm font-medium text-gray-700 mb-1.5">{{__('The head of the group:')}}</label>
+                      <Select v-model="form.group_leader" :options="['Да','Нет']" class="w-full" />
                     </div>
                   </div>
                 </div>
               </div>
 
-              <!-- Текстовые поля -->
-              <div class="mt-8 space-y-6">
-                <h4 class="text-lg font-semibold text-gray-900 border-b pb-2">Дополнительная информация</h4>
-
-                <Textarea
-                  v-model="form.interests"
-                  label="Коротко о своих интересах (2-3 предложения)"
-                  rows="4"
-                  class="bg-gray-50 border-gray-300 focus:border-primary-500 focus:ring-primary-500"
-                />
-
-                <Textarea
-                  v-model="form.about_me"
-                  label="Коротко о себе"
-                  rows="4"
-                  class="bg-gray-50 border-gray-300 focus:border-primary-500 focus:ring-primary-500"
-                />
-
-                <Textarea
-                  v-model="form.dreams"
-                  label="Коротко о своих мечтах"
-                  rows="4"
-                  class="bg-gray-50 border-gray-300 focus:border-primary-500 focus:ring-primary-500"
-                />
+              <!-- Text fields -->
+              <div class="mt-8 space-y-5">
+                <h4 class="edit-section-title">Дополнительная информация</h4>
+                <Textarea v-model="form.interests" label="Коротко о своих интересах (2-3 предложения)" rows="3" />
+                <Textarea v-model="form.about_me" label="Коротко о себе" rows="3" />
+                <Textarea v-model="form.dreams" label="Коротко о своих мечтах" rows="3" />
               </div>
 
-              <!-- Кнопки действий -->
-              <div class="mt-8 pt-6 border-t border-gray-200 flex gap-3">
-                <Button
-                  @click="saveProfile"
-                  :loading="saving"
-                  class="bg-teal-400 hover:bg-teal-700 text-white px-8 py-3 rounded-lg font-medium transition-colors duration-200 flex items-center gap-2"
-                >
-                  <!-- <svg v-if="!saving" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
-                  </svg> -->
+              <!-- Action buttons -->
+              <div class="mt-8 pt-5 border-t border-gray-100 flex flex-wrap gap-3">
+                <Button @click="saveProfile" :loading="saving" variant="solid">
                   {{ saving ? 'Сохранение...' : 'Сохранить изменения' }}
                 </Button>
-
-                <Button
-                  variant="outline"
-                  @click="toggleEdit()"
-                  class="border-gray-300 text-gray-700 hover:bg-gray-50 px-6 py-3 rounded-lg font-medium transition-colors duration-200"
-                >
+                <Button variant="outline" @click="toggleEdit()">
                   Отмена
                 </Button>
               </div>
@@ -465,43 +357,338 @@
       </div>
     </div>
 
-    <div v-else class="flex items-center justify-center min-h-screen">
+    <div v-else class="flex items-center justify-center min-h-[60vh]">
       <div class="text-center">
-        <div class="animate-spin rounded-full h-16 w-16 border-b-2 border-primary-600 mx-auto"></div>
-        <p class="mt-4 text-lg text-gray-600">Загрузка профиля...</p>
+        <div class="animate-spin rounded-full h-10 w-10 border-2 border-gray-200 border-t-gray-600 mx-auto"></div>
+        <p class="mt-3 text-sm text-gray-500">Загрузка профиля...</p>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-/* Плавные переходы для интерактивных элементов */
-.border-gray-300 {
-  transition: border-color 0.2s ease;
+/* ===== PAGE ===== */
+.student-profile-page {
+  min-height: 100vh;
+  background: #f8f9fa;
+}
+.profile-content {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 20px 16px 40px;
+}
+@media (min-width: 640px) {
+  .profile-content { padding: 24px 24px 48px; }
 }
 
-.bg-primary-50 {
-  background-color: rgba(59, 130, 246, 0.05);
+/* ===== HERO CARD ===== */
+.hero-card {
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+.hero-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px 20px;
+  text-align: center;
+  gap: 12px;
+}
+@media (min-width: 768px) {
+  .hero-body {
+    flex-direction: row;
+    align-items: center;
+    text-align: left;
+    gap: 20px;
+    padding: 24px 28px;
+  }
+}
+.hero-avatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #f97316, #f59e0b);
+  color: #fff;
+  font-size: 26px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25);
+}
+.hero-info {
+  flex: 1;
+  min-width: 0;
+}
+.hero-name {
+  font-size: 20px;
+  font-weight: 700;
+  color: #111827;
+  line-height: 1.3;
+}
+.hero-subtitle {
+  font-size: 13px;
+  color: #6b7280;
+  margin-top: 2px;
+}
+.hero-bio {
+  margin-top: 4px;
+  font-size: 13px;
+  color: #4b5563;
+}
+.hero-actions {
+  flex-shrink: 0;
 }
 
-/* Стилизация скроллбара для выпадающих списков */
-.overflow-auto::-webkit-scrollbar {
+
+/* ===== SECTION GRID ===== */
+.section-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+@media (min-width: 768px) {
+  .section-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+  }
+}
+.full-width {
+  grid-column: 1 / -1;
+}
+
+/* ===== INFO CARDS ===== */
+.info-card {
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  transition: box-shadow 0.15s ease;
+}
+.info-card:hover {
+  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 18px;
+  border-bottom: 1px solid #f3f4f6;
+  background: #fafafa;
+  border-radius: 8px 8px 0 0;
+}
+.card-header-icon {
+  width: 20px;
+  height: 20px;
+  color: #f97316;
+  flex-shrink: 0;
+}
+.card-header-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #111827;
+}
+.card-body {
+  padding: 16px 18px;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+.text-body {
+  font-size: 14px;
+  color: #374151;
+  line-height: 1.65;
+  white-space: pre-line;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+/* ===== INFO ROWS ===== */
+.info-row {
+  display: flex;
+  align-items: baseline;
+  padding: 7px 0;
+  border-bottom: 1px solid #f9fafb;
+  gap: 8px;
+}
+.info-row:last-child {
+  border-bottom: none;
+}
+.info-label {
+  width: 130px;
+  flex-shrink: 0;
+  font-size: 13px;
+  color: #6b7280;
+  font-weight: 500;
+}
+@media (max-width: 639px) {
+  .info-row { flex-direction: column; gap: 2px; }
+  .info-label { width: auto; }
+}
+.info-value {
+  font-size: 14px;
+  color: #111827;
+  word-break: break-word;
+}
+.text-body {
+  font-size: 14px;
+  color: #374151;
+  line-height: 1.65;
+  white-space: pre-line;
+}
+
+/* ===== TELEGRAM LINK ===== */
+.tg-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #2563eb;
+  font-weight: 500;
+  font-size: 14px;
+  transition: color 0.15s;
+}
+.tg-link:hover { color: #1d4ed8; }
+
+/* ===== BADGES ===== */
+.badge-yes {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: #ecfdf5;
+  color: #059669;
+  font-size: 12px;
+  font-weight: 600;
+}
+.badge-no {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: #f3f4f6;
+  color: #6b7280;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* ===== EMPTY CARD ===== */
+.empty-card {
+  grid-column: 1 / -1;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.empty-card-inner {
+  padding: 48px 24px;
+  max-width: 420px;
+  margin: 0 auto;
+  text-align: center;
+}
+.empty-icon-circle {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #fff7ed, #ffedd5);
+  color: #f97316;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 20px;
+}
+.empty-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 8px;
+}
+.empty-desc {
+  font-size: 14px;
+  color: #6b7280;
+  line-height: 1.6;
+  margin-bottom: 20px;
+}
+.empty-benefits {
+  text-align: left;
+  background: #fafafa;
+  border: 1px solid #f3f4f6;
+  border-radius: 6px;
+  padding: 14px 16px;
+  margin-bottom: 24px;
+}
+.benefit-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  color: #374151;
+  padding: 5px 0;
+}
+.benefit-dot {
   width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #f97316;
+  flex-shrink: 0;
 }
 
-.overflow-auto::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 3px;
+/* ===== EDIT MODE ===== */
+.edit-section {
+  margin-top: 0;
 }
+.edit-card {
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.edit-section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f3f4f6;
+  margin-bottom: 4px;
+}
+.edit-input {
+  width: 100%;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-size: 14px;
+  color: #111827;
+  background: #fff;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.edit-input:focus {
+  border-color: #f97316;
+  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
+}
+.dropdown-list {
+  margin-top: 4px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
+  background: #fff;
+  max-height: 220px;
+  overflow-y: auto;
+}
+.dropdown-item {
+  padding: 10px 14px;
+  cursor: pointer;
+  border-bottom: 1px solid #f9fafb;
+  transition: background 0.1s;
+}
+.dropdown-item:last-child { border-bottom: none; }
+.dropdown-item:hover { background: #fff7ed; }
 
-.overflow-auto::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 3px;
-}
-
-.overflow-auto::-webkit-scrollbar-thumb:hover {
-  background: #a1a1a1;
-}
+/* ===== SCROLLBAR ===== */
+.dropdown-list::-webkit-scrollbar { width: 5px; }
+.dropdown-list::-webkit-scrollbar-track { background: #f9fafb; }
+.dropdown-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
+.dropdown-list::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
 </style>
 
 <script setup>