@strands.gg/accui 1.7.1 → 1.7.3

package/dist/accui.css

@@ -218,8 +218,7 @@
 .accui-component-scope img,
 .accui-component-scope picture,
 .accui-component-scope video,
-.accui-component-scope canvas,
-.accui-component-scope svg {
+.accui-component-scope canvas {
   display: block;
   max-width: 100%;
 }
@@ -1380,7 +1379,7 @@ input.pr-10[data-v-1fccfe97] {
   padding: 12px;
 }
 
-.modal-overlay[data-v-d18e28d9] {
+.modal-overlay[data-v-8a7cf999] {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -1391,11 +1390,11 @@ input.pr-10[data-v-1fccfe97] {
 	align-items: center;
 	justify-content: center;
 	padding: 1rem;
-	z-index: 50;
+	z-index: 9999999999;
 	font-family: var(--font-sans);
 	-webkit-font-smoothing: antialiased;
 }
-.modal-container[data-v-d18e28d9] {
+.modal-container[data-v-8a7cf999] {
 	background: white;
 	border-radius: 0.5rem;
 	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
@@ -1405,12 +1404,12 @@ input.pr-10[data-v-1fccfe97] {
 	overflow-y: auto;
 	width: auto;
 }
-.modal-header[data-v-d18e28d9] {
+.modal-header[data-v-8a7cf999] {
 	padding-bottom: 1rem;
 	border-bottom: 1px solid #e5e7eb;
 	margin-bottom: 1.5rem;
 }
-.modal-footer[data-v-d18e28d9] {
+.modal-footer[data-v-8a7cf999] {
 	padding-top: 1rem;
 	border-top: 1px solid #e5e7eb;
 	margin-top: 1.5rem;
@@ -1418,7 +1417,7 @@ input.pr-10[data-v-1fccfe97] {
 
 /* Fullscreen on mobile */
 @media (max-width: 768px) {
-.modal-container-fullscreen-mobile[data-v-d18e28d9] {
+.modal-container-fullscreen-mobile[data-v-8a7cf999] {
 		width: 100vw;
 		height: 100vh;
 		max-width: 100vw;
@@ -1429,18 +1428,18 @@ input.pr-10[data-v-1fccfe97] {
 }
 
 /* Scrollbar styling */
-.modal-container[data-v-d18e28d9]::-webkit-scrollbar {
+.modal-container[data-v-8a7cf999]::-webkit-scrollbar {
 	width: 6px;
 }
-.modal-container[data-v-d18e28d9]::-webkit-scrollbar-track {
+.modal-container[data-v-8a7cf999]::-webkit-scrollbar-track {
 	background: #f1f5f9;
 	border-radius: 3px;
 }
-.modal-container[data-v-d18e28d9]::-webkit-scrollbar-thumb {
+.modal-container[data-v-8a7cf999]::-webkit-scrollbar-thumb {
 	background: #cbd5e1;
 	border-radius: 3px;
 }
-.modal-container[data-v-d18e28d9]::-webkit-scrollbar-thumb:hover {
+.modal-container[data-v-8a7cf999]::-webkit-scrollbar-thumb:hover {
 	background: #94a3b8;
 }
 
@@ -1875,76 +1874,76 @@ input.pr-10[data-v-1fccfe97] {
 }
 
 /* Simple fade transition - gentle and smooth */
-.fade-enter-active[data-v-cf6ed7ab],
-.fade-leave-active[data-v-cf6ed7ab] {
+.fade-enter-active[data-v-6f6cb2ad],
+.fade-leave-active[data-v-6f6cb2ad] {
   transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.fade-enter-from[data-v-cf6ed7ab],
-.fade-leave-to[data-v-cf6ed7ab] {
+.fade-enter-from[data-v-6f6cb2ad],
+.fade-leave-to[data-v-6f6cb2ad] {
   opacity: 0;
 }
 
 /* Smooth height transitions - handled entirely by JavaScript */
-.smooth-height-enter-active[data-v-cf6ed7ab],
-.smooth-height-leave-active[data-v-cf6ed7ab] {
+.smooth-height-enter-active[data-v-6f6cb2ad],
+.smooth-height-leave-active[data-v-6f6cb2ad] {
   /* JavaScript handles all transition logic */
 }
 
 /* Support block transition - gentle fade with subtle scale */
-.support-fade-enter-active[data-v-cf6ed7ab],
-.support-fade-leave-active[data-v-cf6ed7ab] {
+.support-fade-enter-active[data-v-6f6cb2ad],
+.support-fade-leave-active[data-v-6f6cb2ad] {
   transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.support-fade-enter-from[data-v-cf6ed7ab] {
+.support-fade-enter-from[data-v-6f6cb2ad] {
   opacity: 0;
   transform: scale(0.97) translateY(8px);
 }
-.support-fade-leave-to[data-v-cf6ed7ab] {
+.support-fade-leave-to[data-v-6f6cb2ad] {
   opacity: 0;
   transform: scale(0.99) translateY(-4px);
 }
-.support-fade-enter-to[data-v-cf6ed7ab],
-.support-fade-leave-from[data-v-cf6ed7ab] {
+.support-fade-enter-to[data-v-6f6cb2ad],
+.support-fade-leave-from[data-v-6f6cb2ad] {
   opacity: 1;
   transform: scale(1) translateY(0);
 }
 
 /* Expand transition - for alerts using modern height animation */
-.expand-enter-active[data-v-cf6ed7ab],
-.expand-leave-active[data-v-cf6ed7ab] {
+.expand-enter-active[data-v-6f6cb2ad],
+.expand-leave-active[data-v-6f6cb2ad] {
   overflow: hidden;
 }
 
 /* Modern browsers with interpolate-size support for expand */
 @supports (interpolate-size: allow-keywords) {
-.expand-enter-active[data-v-cf6ed7ab],
-  .expand-leave-active[data-v-cf6ed7ab] {
+.expand-enter-active[data-v-6f6cb2ad],
+  .expand-leave-active[data-v-6f6cb2ad] {
     interpolate-size: allow-keywords;
 }
-.expand-enter-active[data-v-cf6ed7ab] {
+.expand-enter-active[data-v-6f6cb2ad] {
     transition: 
       opacity 550ms cubic-bezier(0.16, 1, 0.3, 1),
       height 550ms cubic-bezier(0.16, 1, 0.3, 1),
       transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.expand-leave-active[data-v-cf6ed7ab] {
+.expand-leave-active[data-v-6f6cb2ad] {
     transition: 
       opacity 550ms cubic-bezier(0.16, 1, 0.3, 1),
       height 550ms cubic-bezier(0.16, 1, 0.3, 1),
       transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.expand-enter-from[data-v-cf6ed7ab] {
+.expand-enter-from[data-v-6f6cb2ad] {
     opacity: 0;
     height: 0;
     transform: scale(0.99) translateY(-2px);
 }
-.expand-leave-to[data-v-cf6ed7ab] {
+.expand-leave-to[data-v-6f6cb2ad] {
     opacity: 0;
     height: 0;
     transform: scale(0.997) translateY(1px);
 }
-.expand-enter-to[data-v-cf6ed7ab],
-  .expand-leave-from[data-v-cf6ed7ab] {
+.expand-enter-to[data-v-6f6cb2ad],
+  .expand-leave-from[data-v-6f6cb2ad] {
     opacity: 1;
     height: auto;
     transform: scale(1) translateY(0);
@@ -1953,30 +1952,30 @@ input.pr-10[data-v-1fccfe97] {
 
 /* Fallback for expand in older browsers */
 @supports not (interpolate-size: allow-keywords) {
-.expand-enter-active[data-v-cf6ed7ab] {
+.expand-enter-active[data-v-6f6cb2ad] {
     transition: 
       opacity 550ms cubic-bezier(0.16, 1, 0.3, 1),
       max-height 550ms cubic-bezier(0.16, 1, 0.3, 1),
       transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.expand-leave-active[data-v-cf6ed7ab] {
+.expand-leave-active[data-v-6f6cb2ad] {
     transition: 
       opacity 550ms cubic-bezier(0.16, 1, 0.3, 1),
       max-height 550ms cubic-bezier(0.16, 1, 0.3, 1),
       transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.expand-enter-from[data-v-cf6ed7ab] {
+.expand-enter-from[data-v-6f6cb2ad] {
     opacity: 0;
     max-height: 0;
     transform: scale(0.99) translateY(-2px);
 }
-.expand-leave-to[data-v-cf6ed7ab] {
+.expand-leave-to[data-v-6f6cb2ad] {
     opacity: 0;
     max-height: 0;
     transform: scale(0.997) translateY(1px);
 }
-.expand-enter-to[data-v-cf6ed7ab],
-  .expand-leave-from[data-v-cf6ed7ab] {
+.expand-enter-to[data-v-6f6cb2ad],
+  .expand-leave-from[data-v-6f6cb2ad] {
     opacity: 1;
     max-height: 150px;
     transform: scale(1) translateY(0);
@@ -1984,7 +1983,7 @@ input.pr-10[data-v-1fccfe97] {
 }
 
 /* Loading pulse animation */
-@keyframes pulse-cf6ed7ab {
+@keyframes pulse-6f6cb2ad {
 0%, 100% {
     opacity: 1;
 }
@@ -1992,12 +1991,12 @@ input.pr-10[data-v-1fccfe97] {
     opacity: 0.5;
 }
 }
-.animate-pulse[data-v-cf6ed7ab] {
-  animation: pulse-cf6ed7ab 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+.animate-pulse[data-v-6f6cb2ad] {
+  animation: pulse-6f6cb2ad 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 /* Slide up animation for main container - elegant entrance */
-@keyframes slide-up-cf6ed7ab {
+@keyframes slide-up-6f6cb2ad {
 from {
     opacity: 0;
     transform: translateY(24px) scale(0.96);
@@ -2009,12 +2008,12 @@ to {
     filter: blur(0px);
 }
 }
-.animate-slide-up[data-v-cf6ed7ab] {
-  animation: slide-up-cf6ed7ab 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+.animate-slide-up[data-v-6f6cb2ad] {
+  animation: slide-up-6f6cb2ad 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 /* Fade in animation for alerts - gentle appearance */
-@keyframes fade-in-cf6ed7ab {
+@keyframes fade-in-6f6cb2ad {
 from {
     opacity: 0;
     transform: scale(0.97) translateY(6px);
@@ -2024,41 +2023,41 @@ to {
     transform: scale(1) translateY(0);
 }
 }
-.animate-fade-in[data-v-cf6ed7ab] {
-  animation: fade-in-cf6ed7ab 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+.animate-fade-in[data-v-6f6cb2ad] {
+  animation: fade-in-6f6cb2ad 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 /* Email field spacing animation */
-.email-field-spacing[data-v-cf6ed7ab] {
+.email-field-spacing[data-v-6f6cb2ad] {
   transition: margin-bottom 500ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.email-field-spacing.has-password[data-v-cf6ed7ab] {
+.email-field-spacing.has-password[data-v-6f6cb2ad] {
   margin-bottom: 1rem; /* mb-4 equivalent */
 }
-.email-field-spacing.no-password[data-v-cf6ed7ab] {
+.email-field-spacing.no-password[data-v-6f6cb2ad] {
   margin-bottom: 0;
 }
 
 /* Password field transitions now handled by JavaScript smooth-height system */
 
 /* Auth Container Styles */
-.auth-full-width[data-v-cf6ed7ab] {
+.auth-full-width[data-v-6f6cb2ad] {
   width: 100%;
 }
-.auth-min-width[data-v-cf6ed7ab] {
-  min-width: 100px;
+.auth-min-width[data-v-6f6cb2ad] {
+  min-width: 350px;
 }
-.auth-max-width[data-v-cf6ed7ab] {
+.auth-max-width[data-v-6f6cb2ad] {
   max-width: 28rem;
 }
-.auth-center[data-v-cf6ed7ab] {
+.auth-center[data-v-6f6cb2ad] {
   margin-left: auto;
   margin-right: auto;
 }
-.auth-slide-up[data-v-cf6ed7ab] {
-  animation: slide-up-cf6ed7ab 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+.auth-slide-up[data-v-6f6cb2ad] {
+  animation: slide-up-6f6cb2ad 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
-.auth-card-modern[data-v-cf6ed7ab] {
+.auth-card-modern[data-v-6f6cb2ad] {
   background: white;
   border-radius: 0.5rem;
   padding: 2rem;
@@ -2066,11 +2065,11 @@ to {
 }
 
 /* Header Styles */
-.auth-header[data-v-cf6ed7ab] {
+.auth-header[data-v-6f6cb2ad] {
   text-align: center;
   margin-bottom: 2rem;
 }
-.auth-title[data-v-cf6ed7ab] {
+.auth-title[data-v-6f6cb2ad] {
   font-size: 1.875rem;
   font-weight: 700;
   background: linear-gradient(135deg, #EA00A8 0%, #FF6B9D 100%);
@@ -2079,40 +2078,40 @@ to {
   -webkit-text-fill-color: transparent;
   margin-bottom: 0.5rem;
 }
-.auth-subtitle[data-v-cf6ed7ab] {
+.auth-subtitle[data-v-6f6cb2ad] {
   color: #737373;
 }
 
 /* Tabs Container */
-.auth-tabs-container[data-v-cf6ed7ab] {
+.auth-tabs-container[data-v-6f6cb2ad] {
   margin-bottom: 2rem;
 }
 
 /* OAuth Provider Styles */
-.auth-oauth-providers[data-v-cf6ed7ab] {
+.auth-oauth-providers[data-v-6f6cb2ad] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   margin-bottom: 1.5rem;
 }
-.auth-oauth-button[data-v-cf6ed7ab] {
+.auth-oauth-button[data-v-6f6cb2ad] {
   /* Button styles will be handled by the UiButton component */
 }
-.auth-oauth-icon-container[data-v-cf6ed7ab] {
+.auth-oauth-icon-container[data-v-6f6cb2ad] {
   width: 1.25rem;
   height: 1.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.auth-oauth-icon[data-v-cf6ed7ab] {
+.auth-oauth-icon[data-v-6f6cb2ad] {
   width: 1.25rem;
   height: 1.25rem;
 }
-.auth-oauth-github[data-v-cf6ed7ab] {
+.auth-oauth-github[data-v-6f6cb2ad] {
   fill: currentColor;
 }
-.auth-oauth-generic-icon[data-v-cf6ed7ab] {
+.auth-oauth-generic-icon[data-v-6f6cb2ad] {
   width: 1.25rem;
   height: 1.25rem;
   border-radius: 50%;
@@ -2121,22 +2120,22 @@ to {
   align-items: center;
   justify-content: center;
 }
-.auth-oauth-generic-text[data-v-cf6ed7ab] {
+.auth-oauth-generic-text[data-v-6f6cb2ad] {
   font-size: 0.75rem;
   font-weight: 600;
   color: #525252;
 }
-.auth-oauth-text[data-v-cf6ed7ab] {
+.auth-oauth-text[data-v-6f6cb2ad] {
   font-weight: 500;
 }
 
 /* Divider Styles */
-.auth-divider[data-v-cf6ed7ab] {
+.auth-divider[data-v-6f6cb2ad] {
   position: relative;
   margin: 1.5rem 0;
   text-align: center;
 }
-.auth-divider[data-v-cf6ed7ab]::before {
+.auth-divider[data-v-6f6cb2ad]::before {
   content: '';
   position: absolute;
   top: 50%;
@@ -2145,7 +2144,7 @@ to {
   height: 1px;
   background: #e5e5e5;
 }
-.auth-divider-text[data-v-cf6ed7ab] {
+.auth-divider-text[data-v-6f6cb2ad] {
   background: white;
   padding: 0 1rem;
   color: #737373;
@@ -2155,62 +2154,61 @@ to {
 }
 
 /* Form Styles */
-.auth-form[data-v-cf6ed7ab] {
+.auth-form[data-v-6f6cb2ad] {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
-.auth-password-field[data-v-cf6ed7ab] {
+.auth-password-field[data-v-6f6cb2ad] {
   margin-bottom: 1rem;
 }
-.auth-password-header[data-v-cf6ed7ab] {
+.auth-password-header[data-v-6f6cb2ad] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 0.5rem;
 }
-.auth-password-label[data-v-cf6ed7ab] {
+.auth-password-label[data-v-6f6cb2ad] {
   font-size: 0.875rem;
   font-weight: 500;
   color: #374151;
 }
 
 /* Alert Styles */
-.auth-success-alert[data-v-cf6ed7ab] {
+.auth-success-alert[data-v-6f6cb2ad] {
   margin-top: 1.5rem;
-  animation: fade-in-cf6ed7ab 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  animation: fade-in-6f6cb2ad 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
-.auth-error-alert[data-v-cf6ed7ab] {
+.auth-error-alert[data-v-6f6cb2ad] {
   margin-top: 1.5rem;
-  animation: fade-in-cf6ed7ab 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  animation: fade-in-6f6cb2ad 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 /* Back Link Styles */
-.auth-back-link-container[data-v-cf6ed7ab] {
+.auth-back-link-container[data-v-6f6cb2ad] {
   margin-top: 2rem;
   text-align: center;
 }
-.auth-back-link[data-v-cf6ed7ab] {
+.auth-back-link[data-v-6f6cb2ad] {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
 }
-.auth-back-icon[data-v-cf6ed7ab] {
+.auth-back-icon[data-v-6f6cb2ad] {
   width: 1rem;
   height: 1rem;
 }
 
 /* Support Text */
-.auth-support-text[data-v-cf6ed7ab] {
+.auth-support-text[data-v-6f6cb2ad] {
   color: #a3a3a3;
   font-size: 0.875rem;
 }
 
 /* Modal-specific styles - removes border, radius, background, and padding */
-.auth-container-modal[data-v-cf6ed7ab] {
-  min-width: 400px;
+.auth-container-modal[data-v-6f6cb2ad] {
 }
-.auth-content-modal[data-v-cf6ed7ab] {
+.auth-content-modal[data-v-6f6cb2ad] {
   /* Remove card styling when in modal */
   background: transparent;
   border: none;
@@ -4268,19 +4266,19 @@ to {
 }
 
 /* Container Styles */
-.profile-container-width[data-v-31d6a9db] {
+.profile-container-width[data-v-b880e15b] {
   width: 100%;
 }
-.profile-max-width[data-v-31d6a9db] {
+.profile-max-width[data-v-b880e15b] {
   max-width: 56rem;
 }
-.profile-centered[data-v-31d6a9db] {
+.profile-centered[data-v-b880e15b] {
   margin: 0 auto;
 }
-.profile-animated[data-v-31d6a9db] {
-  animation: slideUp-31d6a9db 0.3s ease-out;
+.profile-animated[data-v-b880e15b] {
+  animation: slideUp-b880e15b 0.3s ease-out;
 }
-@keyframes slideUp-31d6a9db {
+@keyframes slideUp-b880e15b {
 from {
     opacity: 0;
     transform: translateY(20px);
@@ -4290,12 +4288,12 @@ to {
     transform: translateY(0);
 }
 }
-.profile-content-layout[data-v-31d6a9db] {
+.profile-content-layout[data-v-b880e15b] {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
-.profile-card-modern[data-v-31d6a9db] {
+.profile-card-modern[data-v-b880e15b] {
   background: #ffffff;
   border: 1px solid #e5e7eb;
   border-radius: 1rem;
@@ -4304,10 +4302,10 @@ to {
 }
 
 /* Modal-specific styles */
-.profile-container-modal[data-v-31d6a9db] {
+.profile-container-modal[data-v-b880e15b] {
   /* Remove any container-specific styles when in modal */
 }
-.profile-content-modal[data-v-31d6a9db] {
+.profile-content-modal[data-v-b880e15b] {
   /* Remove card styling when in modal */
   background: transparent;
   border: none;
@@ -4317,39 +4315,39 @@ to {
 }
 
 /* Header */
-.profile-header[data-v-31d6a9db] {
+.profile-header[data-v-b880e15b] {
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
-.profile-title[data-v-31d6a9db] {
+.profile-title[data-v-b880e15b] {
   font-size: 1.5rem;
   font-weight: 700;
   color: #EA00A8;
 }
-.profile-subtitle[data-v-31d6a9db] {
+.profile-subtitle[data-v-b880e15b] {
   color: #4b5563;
   font-size: 0.875rem;
 }
 
 /* Profile Image Section */
-.profile-image-section[data-v-31d6a9db] {
+.profile-image-section[data-v-b880e15b] {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-.profile-image-container[data-v-31d6a9db] {
+.profile-image-container[data-v-b880e15b] {
   position: relative;
 }
-.profile-image-wrapper[data-v-31d6a9db] {
+.profile-image-wrapper[data-v-b880e15b] {
   position: relative;
   display: inline-block;
 }
-.profile-image-wrapper:hover .profile-upload-overlay[data-v-31d6a9db] {
+.profile-image-wrapper:hover .profile-upload-overlay[data-v-b880e15b] {
   opacity: 1;
 }
-.profile-progress-ring[data-v-31d6a9db] {
+.profile-progress-ring[data-v-b880e15b] {
   position: absolute;
   z-index: 10;
   top: 50%;
@@ -4357,22 +4355,22 @@ to {
   transform: translate(-50%, -50%);
   pointer-events: none;
 }
-.profile-avatar[data-v-31d6a9db] {
+.profile-avatar[data-v-b880e15b] {
   width: 6rem;
   height: 6rem;
   border-radius: 50%;
   position: relative;
 }
-.profile-avatar-with-image[data-v-31d6a9db] {
+.profile-avatar-with-image[data-v-b880e15b] {
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
   overflow: hidden;
 }
-.profile-avatar-image[data-v-31d6a9db] {
+.profile-avatar-image[data-v-b880e15b] {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.profile-avatar-initials[data-v-31d6a9db] {
+.profile-avatar-initials[data-v-b880e15b] {
   background-color: #EA00A8;
   display: flex;
   align-items: center;
@@ -4383,7 +4381,7 @@ to {
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
   z-index: 10;
 }
-.profile-upload-overlay[data-v-31d6a9db] {
+.profile-upload-overlay[data-v-b880e15b] {
   position: absolute;
   inset: 0;
   border-radius: 50%;
@@ -4397,64 +4395,64 @@ to {
   border: none;
   cursor: pointer;
 }
-.profile-upload-overlay[data-v-31d6a9db]:disabled {
+.profile-upload-overlay[data-v-b880e15b]:disabled {
   cursor: not-allowed;
 }
-.profile-upload-icon[data-v-31d6a9db] {
+.profile-upload-icon[data-v-b880e15b] {
   width: 1.5rem;
   height: 1.5rem;
   color: white;
 }
-.profile-file-input[data-v-31d6a9db] {
+.profile-file-input[data-v-b880e15b] {
   display: none;
 }
 
 /* Profile Form */
-.profile-form[data-v-31d6a9db] {
+.profile-form[data-v-b880e15b] {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
-.profile-form-grid[data-v-31d6a9db] {
+.profile-form-grid[data-v-b880e15b] {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1rem;
 }
 @media (min-width: 768px) {
-.profile-form[data-v-31d6a9db] {
+.profile-form[data-v-b880e15b] {
     gap: 1.5rem;
 }
-.profile-form-grid[data-v-31d6a9db] {
+.profile-form-grid[data-v-b880e15b] {
     grid-template-columns: 1fr 1fr;
     gap: 1.5rem;
 }
-.profile-title[data-v-31d6a9db] {
+.profile-title[data-v-b880e15b] {
     font-size: 1.875rem;
 }
-.profile-subtitle[data-v-31d6a9db] {
+.profile-subtitle[data-v-b880e15b] {
     font-size: 1rem;
 }
 }
 
 /* Section Styles */
-.profile-section[data-v-31d6a9db] {
+.profile-section[data-v-b880e15b] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
 @media (min-width: 768px) {
-.profile-section[data-v-31d6a9db] {
+.profile-section[data-v-b880e15b] {
     gap: 1rem;
 }
 }
-.profile-section-title[data-v-31d6a9db] {
+.profile-section-title[data-v-b880e15b] {
   font-size: 1.125rem;
   font-weight: 600;
   color: #111827;
 }
 
 /* Setting Cards */
-.profile-setting-card[data-v-31d6a9db] {
+.profile-setting-card[data-v-b880e15b] {
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -4462,49 +4460,49 @@ to {
   background-color: #f9fafb;
   border-radius: 0.75rem;
 }
-.profile-setting-header[data-v-31d6a9db] {
+.profile-setting-header[data-v-b880e15b] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
 }
-.profile-setting-title[data-v-31d6a9db] {
+.profile-setting-title[data-v-b880e15b] {
   font-weight: 500;
   color: #111827;
 }
-.profile-setting-subtitle[data-v-31d6a9db] {
+.profile-setting-subtitle[data-v-b880e15b] {
   font-size: 0.875rem;
   color: #4b5563;
 }
 
 /* Transitions */
-.expand-enter-active[data-v-31d6a9db] {
+.expand-enter-active[data-v-b880e15b] {
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
 }
-.expand-leave-active[data-v-31d6a9db] {
+.expand-leave-active[data-v-b880e15b] {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
 }
-.expand-enter-from[data-v-31d6a9db] {
+.expand-enter-from[data-v-b880e15b] {
   max-height: 0;
   opacity: 0;
   transform: translateY(-10px);
 }
-.expand-leave-to[data-v-31d6a9db] {
+.expand-leave-to[data-v-b880e15b] {
   max-height: 0;
   opacity: 0;
   transform: translateY(-10px);
 }
-.expand-enter-to[data-v-31d6a9db],
-.expand-leave-from[data-v-31d6a9db] {
+.expand-enter-to[data-v-b880e15b],
+.expand-leave-from[data-v-b880e15b] {
   max-height: 300px;
   opacity: 1;
   transform: translateY(0);
 }
 
 /* MFA Device Chip */
-.mfa-device-chip[data-v-31d6a9db] {
+.mfa-device-chip[data-v-b880e15b] {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
@@ -4518,13 +4516,13 @@ to {
 
 
 /* New semantic classes for Tailwind conversion */
-.profile-change-form[data-v-31d6a9db] {
+.profile-change-form[data-v-b880e15b] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   overflow: hidden;
 }
-.profile-field-section[data-v-31d6a9db] {
+.profile-field-section[data-v-b880e15b] {
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -4532,76 +4530,76 @@ to {
   background-color: #f9fafb;
   border-radius: 0.75rem;
 }
-.profile-field-header[data-v-31d6a9db] {
+.profile-field-header[data-v-b880e15b] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
 }
-.profile-field-header-vertical[data-v-31d6a9db] {
+.profile-field-header-vertical[data-v-b880e15b] {
   align-items: flex-start;
   gap: 1rem;
 }
-.profile-password-section[data-v-31d6a9db] {
+.profile-password-section[data-v-b880e15b] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
 @media (min-width: 768px) {
-.profile-password-section[data-v-31d6a9db] {
+.profile-password-section[data-v-b880e15b] {
     gap: 1rem;
 }
 }
-.profile-mfa-content[data-v-31d6a9db] {
+.profile-mfa-content[data-v-b880e15b] {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
-.profile-mfa-chips[data-v-31d6a9db] {
+.profile-mfa-chips[data-v-b880e15b] {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
 }
-.profile-actions-section[data-v-31d6a9db] {
+.profile-actions-section[data-v-b880e15b] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   padding-top: 1.5rem;
   border-top: 1px solid #e5e7eb;
-  animation: slideUp-31d6a9db 0.3s ease-out;
+  animation: slideUp-b880e15b 0.3s ease-out;
 }
 @media (min-width: 640px) {
-.profile-actions-section[data-v-31d6a9db] {
+.profile-actions-section[data-v-b880e15b] {
     flex-direction: row;
 }
 }
-.profile-help-item[data-v-31d6a9db] {
+.profile-help-item[data-v-b880e15b] {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
 }
-.profile-help-icon[data-v-31d6a9db] {
+.profile-help-icon[data-v-b880e15b] {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
 }
-.profile-footer-actions[data-v-31d6a9db] {
+.profile-footer-actions[data-v-b880e15b] {
   display: flex;
   gap: 1rem;
   align-items: stretch;
 }
-.profile-action-icon[data-v-31d6a9db] {
+.profile-action-icon[data-v-b880e15b] {
   width: 1rem;
   height: 1rem;
 }
-.profile-footer-text[data-v-31d6a9db] {
+.profile-footer-text[data-v-b880e15b] {
   color: #9ca3af;
   font-size: 0.875rem;
 }
 
 /* Avatar Editor Modal */
-.profile-avatar-modal-overlay[data-v-31d6a9db] {
+.profile-avatar-modal-overlay[data-v-b880e15b] {
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
@@ -4611,7 +4609,7 @@ to {
   z-index: 50;
   padding: 1rem;
 }
-.profile-avatar-modal[data-v-31d6a9db] {
+.profile-avatar-modal[data-v-b880e15b] {
   background-color: #ffffff;
   border-radius: 0.75rem;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
@@ -4620,18 +4618,18 @@ to {
   max-height: 90vh;
   overflow-y: auto;
 }
-.profile-avatar-modal-content[data-v-31d6a9db] {
+.profile-avatar-modal-content[data-v-b880e15b] {
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
-.profile-avatar-modal-header[data-v-31d6a9db] {
+.profile-avatar-modal-header[data-v-b880e15b] {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.profile-avatar-modal-close[data-v-31d6a9db] {
+.profile-avatar-modal-close[data-v-b880e15b] {
   color: #9ca3af;
   transition: color 0.2s ease;
   background: none;
@@ -4640,50 +4638,50 @@ to {
   padding: 0.25rem;
   border-radius: 0.25rem;
 }
-.profile-avatar-modal-close[data-v-31d6a9db]:hover {
+.profile-avatar-modal-close[data-v-b880e15b]:hover {
   color: #4b5563;
 }
-.profile-avatar-modal-close-icon[data-v-31d6a9db] {
+.profile-avatar-modal-close-icon[data-v-b880e15b] {
   width: 1.5rem;
   height: 1.5rem;
 }
 
 /* Profile field styles */
-.profile-field-title[data-v-31d6a9db] {
+.profile-field-title[data-v-b880e15b] {
   font-weight: 500;
   color: #111827;
 }
-.profile-field-subtitle[data-v-31d6a9db] {
+.profile-field-subtitle[data-v-b880e15b] {
   font-size: 0.875rem;
   color: #6b7280;
 }
-.profile-availability-message[data-v-31d6a9db] {
+.profile-availability-message[data-v-b880e15b] {
   font-size: 0.75rem;
 }
-.profile-availability-message.success[data-v-31d6a9db] {
+.profile-availability-message.success[data-v-b880e15b] {
   color: #16a34a;
 }
-.profile-availability-message.error[data-v-31d6a9db] {
+.profile-availability-message.error[data-v-b880e15b] {
   color: #dc2626;
 }
-.profile-toggle-container[data-v-31d6a9db] {
+.profile-toggle-container[data-v-b880e15b] {
   flex-shrink: 0;
 }
-.profile-alert-message[data-v-31d6a9db] {
+.profile-alert-message[data-v-b880e15b] {
   font-weight: 500;
 }
-.profile-modal-title[data-v-31d6a9db] {
+.profile-modal-title[data-v-b880e15b] {
   font-size: 1.25rem;
   font-weight: 700;
   color: #111827;
 }
 
 /* Sign out button styles */
-.profile-sign-out-button[data-v-31d6a9db] {
+.profile-sign-out-button[data-v-b880e15b] {
   width: 100%;
 }
 @media (min-width: 640px) {
-.profile-sign-out-button[data-v-31d6a9db] {
+.profile-sign-out-button[data-v-b880e15b] {
     width: auto;
 }
 }
@@ -5007,11 +5005,11 @@ to {
   gap: 0.75rem;
 }
 
-.signed-in-fallback[data-v-ab5f199f] {
+.signed-in-fallback[data-v-669fa3b4] {
   text-align: center;
   padding: 2rem 0;
 }
-.signed-in-icon-container[data-v-ab5f199f] {
+.signed-in-icon-container[data-v-669fa3b4] {
   width: 4rem;
   height: 4rem;
   margin: 0 auto 1rem;
@@ -5021,22 +5019,22 @@ to {
   align-items: center;
   justify-content: center;
 }
-.signed-in-icon[data-v-ab5f199f] {
+.signed-in-icon[data-v-669fa3b4] {
   width: 2rem;
   height: 2rem;
   color: #a3a3a3;
 }
-.signed-in-title[data-v-ab5f199f] {
+.signed-in-title[data-v-669fa3b4] {
   font-size: 1.125rem;
   font-weight: 600;
   color: #171717;
   margin-bottom: 0.5rem;
 }
-.signed-in-subtitle[data-v-ab5f199f] {
+.signed-in-subtitle[data-v-669fa3b4] {
   color: #525252;
   margin-bottom: 1rem;
 }
-.signed-in-button[data-v-ab5f199f] {
+.signed-in-button[data-v-669fa3b4] {
   background-color: #EA00A8;
   color: white;
   width: auto;
@@ -5047,7 +5045,7 @@ to {
   font-weight: 600;
   transition: background-color 0.2s ease;
 }
-.signed-in-button[data-v-ab5f199f]:hover {
+.signed-in-button[data-v-669fa3b4]:hover {
   background-color: #B8006F;
 }
 
@@ -5097,7 +5095,7 @@ to {
 }
 
 /* User Button */
-.user-button[data-v-5acc4f6e] {
+.user-button[data-v-9e187d2c] {
   position: relative;
   display: flex;
   align-items: center;
@@ -5111,44 +5109,44 @@ to {
   cursor: pointer;
   transition: all 0.15s;
 }
-.user-button[data-v-5acc4f6e]:hover {
+.user-button[data-v-9e187d2c]:hover {
   background-color: #d1d5db;
 }
-.user-button[data-v-5acc4f6e]:focus {
+.user-button[data-v-9e187d2c]:focus {
   outline: none;
   box-shadow: 0 0 0 2px #EA00A8;
 }
-.user-button-content[data-v-5acc4f6e] {
+.user-button-content[data-v-9e187d2c] {
   display: flex;
   align-items: center;
   gap: 0.75rem;
 }
-.user-info[data-v-5acc4f6e] {
+.user-info[data-v-9e187d2c] {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
-.user-name[data-v-5acc4f6e] {
+.user-name[data-v-9e187d2c] {
   font-size: 0.875rem;
   font-weight: 500;
   color: #111827;
 }
-.avatar-container[data-v-5acc4f6e] {
+.avatar-container[data-v-9e187d2c] {
   position: relative;
   flex-shrink: 0;
 }
-.avatar-wrapper[data-v-5acc4f6e] {
+.avatar-wrapper[data-v-9e187d2c] {
   position: relative;
   width: 2rem;
   height: 2rem;
 }
-.avatar-image[data-v-5acc4f6e] {
+.avatar-image[data-v-9e187d2c] {
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
   object-fit: cover;
 }
-.avatar-default[data-v-5acc4f6e] {
+.avatar-default[data-v-9e187d2c] {
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
@@ -5157,27 +5155,24 @@ to {
   align-items: center;
   justify-content: center;
 }
-.avatar-icon[data-v-5acc4f6e] {
+.avatar-icon[data-v-9e187d2c] {
   width: 1.25rem;
   height: 1.25rem;
   color: #6b7280;
 }
-.dropdown-arrow[data-v-5acc4f6e] {
+.dropdown-arrow[data-v-9e187d2c] {
   width: 1rem;
   height: 1rem;
   color: #9ca3af;
   transition: transform 0.15s;
 }
-.dropdown-arrow-open[data-v-5acc4f6e] {
+.dropdown-arrow-open[data-v-9e187d2c] {
   transform: rotate(180deg);
 }
 
 /* Dropdown Menu */
-.dropdown-menu[data-v-5acc4f6e] {
+.dropdown-menu[data-v-9e187d2c] {
   position: absolute;
-  right: 0;
-  top: 100%;
-  margin-top: 0.5rem;
   width: 18rem;
   background: white;
   border-radius: 0.5rem;
@@ -5185,10 +5180,40 @@ to {
   border: 1px solid #e5e7eb;
   z-index: 50;
 }
-.dropdown-content[data-v-5acc4f6e] {
+
+/* Horizontal alignment */
+.dropdown-menu-align-left[data-v-9e187d2c] {
+  left: 0;
+}
+.dropdown-menu-align-right[data-v-9e187d2c] {
+  right: 0;
+}
+.dropdown-menu-align-center[data-v-9e187d2c] {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* Vertical alignment */
+.dropdown-menu-vertical-bottom[data-v-9e187d2c] {
+  top: 100%;
+  margin-top: 0.5rem;
+}
+.dropdown-menu-vertical-top[data-v-9e187d2c] {
+  bottom: 100%;
+  margin-bottom: 0.5rem;
+}
+
+/* Center horizontal alignment needs special handling for transforms */
+.dropdown-menu-align-center.dropdown-menu-vertical-bottom[data-v-9e187d2c] {
+  transform: translateX(-50%);
+}
+.dropdown-menu-align-center.dropdown-menu-vertical-top[data-v-9e187d2c] {
+  transform: translateX(-50%);
+}
+.dropdown-content[data-v-9e187d2c] {
   padding: 0.5rem;
 }
-.dropdown-header[data-v-5acc4f6e] {
+.dropdown-header[data-v-9e187d2c] {
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -5196,10 +5221,10 @@ to {
   border-radius: 0.5rem;
   background-color: #f9fafb;
 }
-.dropdown-avatar-container[data-v-5acc4f6e] {
+.dropdown-avatar-container[data-v-9e187d2c] {
   position: relative;
 }
-.level-progress-overlay[data-v-5acc4f6e] {
+.level-progress-overlay[data-v-9e187d2c] {
   position: absolute;
   z-index: 10;
   top: 50%;
@@ -5207,13 +5232,13 @@ to {
   transform: translate(-50%, -50%);
   pointer-events: none;
 }
-.dropdown-avatar-image[data-v-5acc4f6e] {
+.dropdown-avatar-image[data-v-9e187d2c] {
   width: 3.5rem;
   height: 3.5rem;
   border-radius: 50%;
   object-fit: cover;
 }
-.dropdown-avatar-default[data-v-5acc4f6e] {
+.dropdown-avatar-default[data-v-9e187d2c] {
   width: 3.5rem;
   height: 3.5rem;
   border-radius: 50%;
@@ -5222,17 +5247,17 @@ to {
   align-items: center;
   justify-content: center;
 }
-.dropdown-avatar-icon[data-v-5acc4f6e] {
+.dropdown-avatar-icon[data-v-9e187d2c] {
   width: 1.25rem;
   height: 1.25rem;
   color: #6b7280;
 }
-.dropdown-user-details[data-v-5acc4f6e] {
+.dropdown-user-details[data-v-9e187d2c] {
   flex: 1;
   min-width: 0;
   text-align: left;
 }
-.dropdown-user-name[data-v-5acc4f6e] {
+.dropdown-user-name[data-v-9e187d2c] {
   font-size: 0.875rem;
   font-weight: 500;
   color: #111827;
@@ -5240,24 +5265,24 @@ to {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.dropdown-user-email[data-v-5acc4f6e] {
+.dropdown-user-email[data-v-9e187d2c] {
   font-size: 0.875rem;
   color: #6b7280;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.dropdown-divider[data-v-5acc4f6e] {
+.dropdown-divider[data-v-9e187d2c] {
   height: 1px;
   background-color: #e5e7eb;
   margin: 0.5rem 0;
 }
-.dropdown-menu-items[data-v-5acc4f6e] {
+.dropdown-menu-items[data-v-9e187d2c] {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 }
-.dropdown-menu-item[data-v-5acc4f6e] {
+.dropdown-menu-item[data-v-9e187d2c] {
   width: 100%;
   display: flex;
   align-items: center;
@@ -5272,29 +5297,29 @@ to {
   transition: all 0.15s;
   text-align: left;
 }
-.dropdown-menu-item[data-v-5acc4f6e]:hover,
-.dropdown-menu-item[data-v-5acc4f6e]:focus {
+.dropdown-menu-item[data-v-9e187d2c]:hover,
+.dropdown-menu-item[data-v-9e187d2c]:focus {
   background-color: #f3f4f6;
   outline: none;
 }
-.dropdown-menu-item-danger[data-v-5acc4f6e] {
+.dropdown-menu-item-danger[data-v-9e187d2c] {
   color: #dc2626;
 }
-.dropdown-menu-item-danger[data-v-5acc4f6e]:hover,
-.dropdown-menu-item-danger[data-v-5acc4f6e]:focus {
+.dropdown-menu-item-danger[data-v-9e187d2c]:hover,
+.dropdown-menu-item-danger[data-v-9e187d2c]:focus {
   background-color: #fef2f2;
 }
-.dropdown-menu-icon[data-v-5acc4f6e] {
+.dropdown-menu-icon[data-v-9e187d2c] {
   width: 1rem;
   height: 1rem;
   color: #9ca3af;
 }
-.dropdown-menu-icon-danger[data-v-5acc4f6e] {
+.dropdown-menu-icon-danger[data-v-9e187d2c] {
   color: #ef4444;
 }
 
 /* Sign In Button */
-.sign-in-button[data-v-5acc4f6e] {
+.sign-in-button[data-v-9e187d2c] {
   position: relative;
   display: flex;
   align-items: center;
@@ -5309,30 +5334,30 @@ to {
   cursor: pointer;
   transition: all 0.15s;
 }
-.sign-in-button[data-v-5acc4f6e]:hover {
+.sign-in-button[data-v-9e187d2c]:hover {
   background-color: #B8006F;
 }
-.sign-in-button[data-v-5acc4f6e]:focus {
+.sign-in-button[data-v-9e187d2c]:focus {
   outline: none;
   box-shadow: 0 0 0 2px #EA00A8, 0 0 0 4px white;
 }
-.sign-in-icon[data-v-5acc4f6e] {
+.sign-in-icon[data-v-9e187d2c] {
   width: 1rem;
   height: 1rem;
 }
 
 /* Modal Styles */
-.modal-header[data-v-5acc4f6e] {
+.modal-header[data-v-9e187d2c] {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.modal-title[data-v-5acc4f6e] {
+.modal-title[data-v-9e187d2c] {
   font-size: 1.25rem;
   font-weight: 600;
   color: #111827;
 }
-.modal-close-button[data-v-5acc4f6e] {
+.modal-close-button[data-v-9e187d2c] {
   padding: 0.25rem;
   border-radius: 0.5rem;
   color: #9ca3af;
@@ -5341,37 +5366,61 @@ to {
   cursor: pointer;
   transition: all 0.2s;
 }
-.modal-close-button[data-v-5acc4f6e]:hover {
+.modal-close-button[data-v-9e187d2c]:hover {
   color: #6b7280;
   background-color: #f3f4f6;
 }
-.modal-close-icon[data-v-5acc4f6e] {
+.modal-close-icon[data-v-9e187d2c] {
   width: 1.25rem;
   height: 1.25rem;
 }
 
 /* Transitions */
-.dropdown-enter-active[data-v-5acc4f6e],
-.dropdown-leave-active[data-v-5acc4f6e] {
+.dropdown-enter-active[data-v-9e187d2c],
+.dropdown-leave-active[data-v-9e187d2c] {
   transition: all 0.15s ease;
 }
-.dropdown-enter-from[data-v-5acc4f6e],
-.dropdown-leave-to[data-v-5acc4f6e] {
+.dropdown-enter-from[data-v-9e187d2c],
+.dropdown-leave-to[data-v-9e187d2c] {
   opacity: 0;
-  transform: scale(0.95) translateY(4px);
 }
-.dropdown-enter-to[data-v-5acc4f6e],
-.dropdown-leave-from[data-v-5acc4f6e] {
+.dropdown-enter-to[data-v-9e187d2c],
+.dropdown-leave-from[data-v-9e187d2c] {
   opacity: 1;
+}
+
+/* Transform-based transitions for different alignments */
+.dropdown-menu-align-left.dropdown-enter-from[data-v-9e187d2c],
+.dropdown-menu-align-left.dropdown-leave-to[data-v-9e187d2c] {
+  transform: scale(0.95) translateY(4px);
+}
+.dropdown-menu-align-left.dropdown-enter-to[data-v-9e187d2c],
+.dropdown-menu-align-left.dropdown-leave-from[data-v-9e187d2c] {
   transform: scale(1) translateY(0);
 }
+.dropdown-menu-align-right.dropdown-enter-from[data-v-9e187d2c],
+.dropdown-menu-align-right.dropdown-leave-to[data-v-9e187d2c] {
+  transform: scale(0.95) translateY(4px);
+}
+.dropdown-menu-align-right.dropdown-enter-to[data-v-9e187d2c],
+.dropdown-menu-align-right.dropdown-leave-from[data-v-9e187d2c] {
+  transform: scale(1) translateY(0);
+}
+.dropdown-menu-align-center.dropdown-enter-from[data-v-9e187d2c],
+.dropdown-menu-align-center.dropdown-leave-to[data-v-9e187d2c] {
+  transform: translateX(-50%) scale(0.95) translateY(4px);
+}
+.dropdown-menu-align-center.dropdown-enter-to[data-v-9e187d2c],
+.dropdown-menu-align-center.dropdown-leave-from[data-v-9e187d2c] {
+  transform: translateX(-50%) scale(1) translateY(0);
+}
 
 /* Responsive adjustments */
 @media (max-width: 640px) {
-.dropdown-menu[data-v-5acc4f6e] {
+.dropdown-menu[data-v-9e187d2c] {
     width: 16rem;
 }
-.user-info[data-v-5acc4f6e] {
+.user-info[data-v-9e187d2c] {
     display: none;
 }
 }