@strands.gg/accui 1.7.2 → 1.8.0

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%;
 }
@@ -1444,23 +1443,23 @@ input.pr-10[data-v-1fccfe97] {
 	background: #94a3b8;
 }
 
-.secured-footer[data-v-5202ff4e] {
+.secured-footer[data-v-6dfcdb8c] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding-top: 1rem;
   border-top: 1px solid #e5e7eb;
 }
-.secured-footer-with-content[data-v-5202ff4e] {
+.secured-footer-with-content[data-v-6dfcdb8c] {
   justify-content: space-between;
 }
-.secured-footer-centered[data-v-5202ff4e] {
+.secured-footer-centered[data-v-6dfcdb8c] {
   justify-content: center;
 }
-.secured-logo[data-v-5202ff4e] {
+.secured-logo[data-v-6dfcdb8c] {
   flex-shrink: 0;
 }
-.secured-logo-image[data-v-5202ff4e] {
+.secured-logo-image[data-v-6dfcdb8c] {
   height: 2rem;
 }
 
@@ -1875,76 +1874,76 @@ input.pr-10[data-v-1fccfe97] {
 }
 
 /* Simple fade transition - gentle and smooth */
-.fade-enter-active[data-v-6f6cb2ad],
-.fade-leave-active[data-v-6f6cb2ad] {
+.fade-enter-active[data-v-ba0feb8a],
+.fade-leave-active[data-v-ba0feb8a] {
   transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.fade-enter-from[data-v-6f6cb2ad],
-.fade-leave-to[data-v-6f6cb2ad] {
+.fade-enter-from[data-v-ba0feb8a],
+.fade-leave-to[data-v-ba0feb8a] {
   opacity: 0;
 }
 
 /* Smooth height transitions - handled entirely by JavaScript */
-.smooth-height-enter-active[data-v-6f6cb2ad],
-.smooth-height-leave-active[data-v-6f6cb2ad] {
+.smooth-height-enter-active[data-v-ba0feb8a],
+.smooth-height-leave-active[data-v-ba0feb8a] {
   /* JavaScript handles all transition logic */
 }
 
 /* Support block transition - gentle fade with subtle scale */
-.support-fade-enter-active[data-v-6f6cb2ad],
-.support-fade-leave-active[data-v-6f6cb2ad] {
+.support-fade-enter-active[data-v-ba0feb8a],
+.support-fade-leave-active[data-v-ba0feb8a] {
   transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.support-fade-enter-from[data-v-6f6cb2ad] {
+.support-fade-enter-from[data-v-ba0feb8a] {
   opacity: 0;
   transform: scale(0.97) translateY(8px);
 }
-.support-fade-leave-to[data-v-6f6cb2ad] {
+.support-fade-leave-to[data-v-ba0feb8a] {
   opacity: 0;
   transform: scale(0.99) translateY(-4px);
 }
-.support-fade-enter-to[data-v-6f6cb2ad],
-.support-fade-leave-from[data-v-6f6cb2ad] {
+.support-fade-enter-to[data-v-ba0feb8a],
+.support-fade-leave-from[data-v-ba0feb8a] {
   opacity: 1;
   transform: scale(1) translateY(0);
 }
 
 /* Expand transition - for alerts using modern height animation */
-.expand-enter-active[data-v-6f6cb2ad],
-.expand-leave-active[data-v-6f6cb2ad] {
+.expand-enter-active[data-v-ba0feb8a],
+.expand-leave-active[data-v-ba0feb8a] {
   overflow: hidden;
 }
 
 /* Modern browsers with interpolate-size support for expand */
 @supports (interpolate-size: allow-keywords) {
-.expand-enter-active[data-v-6f6cb2ad],
-  .expand-leave-active[data-v-6f6cb2ad] {
+.expand-enter-active[data-v-ba0feb8a],
+  .expand-leave-active[data-v-ba0feb8a] {
     interpolate-size: allow-keywords;
 }
-.expand-enter-active[data-v-6f6cb2ad] {
+.expand-enter-active[data-v-ba0feb8a] {
     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-6f6cb2ad] {
+.expand-leave-active[data-v-ba0feb8a] {
     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-6f6cb2ad] {
+.expand-enter-from[data-v-ba0feb8a] {
     opacity: 0;
     height: 0;
     transform: scale(0.99) translateY(-2px);
 }
-.expand-leave-to[data-v-6f6cb2ad] {
+.expand-leave-to[data-v-ba0feb8a] {
     opacity: 0;
     height: 0;
     transform: scale(0.997) translateY(1px);
 }
-.expand-enter-to[data-v-6f6cb2ad],
-  .expand-leave-from[data-v-6f6cb2ad] {
+.expand-enter-to[data-v-ba0feb8a],
+  .expand-leave-from[data-v-ba0feb8a] {
     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-6f6cb2ad] {
+.expand-enter-active[data-v-ba0feb8a] {
     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-6f6cb2ad] {
+.expand-leave-active[data-v-ba0feb8a] {
     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-6f6cb2ad] {
+.expand-enter-from[data-v-ba0feb8a] {
     opacity: 0;
     max-height: 0;
     transform: scale(0.99) translateY(-2px);
 }
-.expand-leave-to[data-v-6f6cb2ad] {
+.expand-leave-to[data-v-ba0feb8a] {
     opacity: 0;
     max-height: 0;
     transform: scale(0.997) translateY(1px);
 }
-.expand-enter-to[data-v-6f6cb2ad],
-  .expand-leave-from[data-v-6f6cb2ad] {
+.expand-enter-to[data-v-ba0feb8a],
+  .expand-leave-from[data-v-ba0feb8a] {
     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-6f6cb2ad {
+@keyframes pulse-ba0feb8a {
 0%, 100% {
     opacity: 1;
 }
@@ -1992,12 +1991,12 @@ input.pr-10[data-v-1fccfe97] {
     opacity: 0.5;
 }
 }
-.animate-pulse[data-v-6f6cb2ad] {
-  animation: pulse-6f6cb2ad 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+.animate-pulse[data-v-ba0feb8a] {
+  animation: pulse-ba0feb8a 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 /* Slide up animation for main container - elegant entrance */
-@keyframes slide-up-6f6cb2ad {
+@keyframes slide-up-ba0feb8a {
 from {
     opacity: 0;
     transform: translateY(24px) scale(0.96);
@@ -2009,12 +2008,12 @@ to {
     filter: blur(0px);
 }
 }
-.animate-slide-up[data-v-6f6cb2ad] {
-  animation: slide-up-6f6cb2ad 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+.animate-slide-up[data-v-ba0feb8a] {
+  animation: slide-up-ba0feb8a 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 /* Fade in animation for alerts - gentle appearance */
-@keyframes fade-in-6f6cb2ad {
+@keyframes fade-in-ba0feb8a {
 from {
     opacity: 0;
     transform: scale(0.97) translateY(6px);
@@ -2024,41 +2023,41 @@ to {
     transform: scale(1) translateY(0);
 }
 }
-.animate-fade-in[data-v-6f6cb2ad] {
-  animation: fade-in-6f6cb2ad 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+.animate-fade-in[data-v-ba0feb8a] {
+  animation: fade-in-ba0feb8a 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 /* Email field spacing animation */
-.email-field-spacing[data-v-6f6cb2ad] {
+.email-field-spacing[data-v-ba0feb8a] {
   transition: margin-bottom 500ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.email-field-spacing.has-password[data-v-6f6cb2ad] {
+.email-field-spacing.has-password[data-v-ba0feb8a] {
   margin-bottom: 1rem; /* mb-4 equivalent */
 }
-.email-field-spacing.no-password[data-v-6f6cb2ad] {
+.email-field-spacing.no-password[data-v-ba0feb8a] {
   margin-bottom: 0;
 }
 
 /* Password field transitions now handled by JavaScript smooth-height system */
 
 /* Auth Container Styles */
-.auth-full-width[data-v-6f6cb2ad] {
+.auth-full-width[data-v-ba0feb8a] {
   width: 100%;
 }
-.auth-min-width[data-v-6f6cb2ad] {
-  min-width: 350px;
+.auth-min-width[data-v-ba0feb8a] {
+  min-width: 420px;
 }
-.auth-max-width[data-v-6f6cb2ad] {
+.auth-max-width[data-v-ba0feb8a] {
   max-width: 28rem;
 }
-.auth-center[data-v-6f6cb2ad] {
+.auth-center[data-v-ba0feb8a] {
   margin-left: auto;
   margin-right: auto;
 }
-.auth-slide-up[data-v-6f6cb2ad] {
-  animation: slide-up-6f6cb2ad 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+.auth-slide-up[data-v-ba0feb8a] {
+  animation: slide-up-ba0feb8a 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
-.auth-card-modern[data-v-6f6cb2ad] {
+.auth-card-modern[data-v-ba0feb8a] {
   background: white;
   border-radius: 0.5rem;
   padding: 2rem;
@@ -2066,11 +2065,11 @@ to {
 }
 
 /* Header Styles */
-.auth-header[data-v-6f6cb2ad] {
+.auth-header[data-v-ba0feb8a] {
   text-align: center;
   margin-bottom: 2rem;
 }
-.auth-title[data-v-6f6cb2ad] {
+.auth-title[data-v-ba0feb8a] {
   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-6f6cb2ad] {
+.auth-subtitle[data-v-ba0feb8a] {
   color: #737373;
 }
 
 /* Tabs Container */
-.auth-tabs-container[data-v-6f6cb2ad] {
+.auth-tabs-container[data-v-ba0feb8a] {
   margin-bottom: 2rem;
 }
 
 /* OAuth Provider Styles */
-.auth-oauth-providers[data-v-6f6cb2ad] {
+.auth-oauth-providers[data-v-ba0feb8a] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   margin-bottom: 1.5rem;
 }
-.auth-oauth-button[data-v-6f6cb2ad] {
+.auth-oauth-button[data-v-ba0feb8a] {
   /* Button styles will be handled by the UiButton component */
 }
-.auth-oauth-icon-container[data-v-6f6cb2ad] {
+.auth-oauth-icon-container[data-v-ba0feb8a] {
   width: 1.25rem;
   height: 1.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.auth-oauth-icon[data-v-6f6cb2ad] {
+.auth-oauth-icon[data-v-ba0feb8a] {
   width: 1.25rem;
   height: 1.25rem;
 }
-.auth-oauth-github[data-v-6f6cb2ad] {
+.auth-oauth-github[data-v-ba0feb8a] {
   fill: currentColor;
 }
-.auth-oauth-generic-icon[data-v-6f6cb2ad] {
+.auth-oauth-generic-icon[data-v-ba0feb8a] {
   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-6f6cb2ad] {
+.auth-oauth-generic-text[data-v-ba0feb8a] {
   font-size: 0.75rem;
   font-weight: 600;
   color: #525252;
 }
-.auth-oauth-text[data-v-6f6cb2ad] {
+.auth-oauth-text[data-v-ba0feb8a] {
   font-weight: 500;
 }
 
 /* Divider Styles */
-.auth-divider[data-v-6f6cb2ad] {
+.auth-divider[data-v-ba0feb8a] {
   position: relative;
   margin: 1.5rem 0;
   text-align: center;
 }
-.auth-divider[data-v-6f6cb2ad]::before {
+.auth-divider[data-v-ba0feb8a]::before {
   content: '';
   position: absolute;
   top: 50%;
@@ -2145,7 +2144,7 @@ to {
   height: 1px;
   background: #e5e5e5;
 }
-.auth-divider-text[data-v-6f6cb2ad] {
+.auth-divider-text[data-v-ba0feb8a] {
   background: white;
   padding: 0 1rem;
   color: #737373;
@@ -2155,61 +2154,61 @@ to {
 }
 
 /* Form Styles */
-.auth-form[data-v-6f6cb2ad] {
+.auth-form[data-v-ba0feb8a] {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
-.auth-password-field[data-v-6f6cb2ad] {
+.auth-password-field[data-v-ba0feb8a] {
   margin-bottom: 1rem;
 }
-.auth-password-header[data-v-6f6cb2ad] {
+.auth-password-header[data-v-ba0feb8a] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 0.5rem;
 }
-.auth-password-label[data-v-6f6cb2ad] {
+.auth-password-label[data-v-ba0feb8a] {
   font-size: 0.875rem;
   font-weight: 500;
   color: #374151;
 }
 
 /* Alert Styles */
-.auth-success-alert[data-v-6f6cb2ad] {
+.auth-success-alert[data-v-ba0feb8a] {
   margin-top: 1.5rem;
-  animation: fade-in-6f6cb2ad 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  animation: fade-in-ba0feb8a 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
-.auth-error-alert[data-v-6f6cb2ad] {
+.auth-error-alert[data-v-ba0feb8a] {
   margin-top: 1.5rem;
-  animation: fade-in-6f6cb2ad 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  animation: fade-in-ba0feb8a 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 /* Back Link Styles */
-.auth-back-link-container[data-v-6f6cb2ad] {
+.auth-back-link-container[data-v-ba0feb8a] {
   margin-top: 2rem;
   text-align: center;
 }
-.auth-back-link[data-v-6f6cb2ad] {
+.auth-back-link[data-v-ba0feb8a] {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
 }
-.auth-back-icon[data-v-6f6cb2ad] {
+.auth-back-icon[data-v-ba0feb8a] {
   width: 1rem;
   height: 1rem;
 }
 
 /* Support Text */
-.auth-support-text[data-v-6f6cb2ad] {
+.auth-support-text[data-v-ba0feb8a] {
   color: #a3a3a3;
   font-size: 0.875rem;
 }
 
 /* Modal-specific styles - removes border, radius, background, and padding */
-.auth-container-modal[data-v-6f6cb2ad] {
+.auth-container-modal[data-v-ba0feb8a] {
 }
-.auth-content-modal[data-v-6f6cb2ad] {
+.auth-content-modal[data-v-ba0feb8a] {
   /* Remove card styling when in modal */
   background: transparent;
   border: none;
@@ -4266,20 +4265,245 @@ to {
   max-width: 32rem;
 }
 
+/* Modal Header */
+.modal-header-content[data-v-60345e8c] {
+  text-align: center;
+}
+.modal-title[data-v-60345e8c] {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #111827;
+  margin: 0 0 0.5rem 0;
+}
+.modal-subtitle[data-v-60345e8c] {
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin: 0;
+}
+.strands-sessions-modal[data-v-60345e8c] {
+  max-width: 42rem;
+  min-width: 32rem;
+}
+
+/* Loading State */
+.sessions-loading[data-v-60345e8c] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  gap: 1rem;
+}
+.loading-text[data-v-60345e8c] {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+/* Empty State */
+.sessions-empty[data-v-60345e8c] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  text-align: center;
+}
+.empty-icon[data-v-60345e8c] {
+  color: #d1d5db;
+  margin-bottom: 1rem;
+}
+.empty-title[data-v-60345e8c] {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 0.5rem;
+}
+.empty-description[data-v-60345e8c] {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+/* Session Statistics */
+.session-stats[data-v-60345e8c] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  padding: 1rem;
+  background-color: #f9fafb;
+  border-radius: 0.5rem;
+}
+.stat-card[data-v-60345e8c] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.stat-label[data-v-60345e8c] {
+  font-size: 0.75rem;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.stat-value[data-v-60345e8c] {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+/* Sessions List */
+.sessions-list[data-v-60345e8c] {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.session-card[data-v-60345e8c] {
+  padding: 1rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  background: white;
+  transition: all 0.15s ease;
+}
+.session-card[data-v-60345e8c]:hover {
+  border-color: #d1d5db;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+.session-card.current-session[data-v-60345e8c] {
+  border-color: #a7f3d0;
+  background-color: #f0fdf9;
+}
+
+/* Session Header */
+.session-header[data-v-60345e8c] {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 0.75rem;
+}
+.session-device[data-v-60345e8c] {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+  flex: 1;
+}
+.device-icon[data-v-60345e8c] {
+  padding: 0.5rem;
+  background-color: #f3f4f6;
+  border-radius: 0.375rem;
+  color: #6b7280;
+}
+.current-session .device-icon[data-v-60345e8c] {
+  background-color: #dcfce7;
+  color: #16a34a;
+}
+.device-info[data-v-60345e8c] {
+  flex: 1;
+}
+.device-name[data-v-60345e8c] {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #111827;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.current-badge[data-v-60345e8c] {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  background-color: #dcfce7;
+  color: #15803d;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 9999px;
+  border: 1px solid #bbf7d0;
+}
+.device-type[data-v-60345e8c] {
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin-top: 0.125rem;
+  text-transform: capitalize;
+}
+
+/* Session Details */
+.session-details[data-v-60345e8c] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-left: 3rem;
+}
+.detail-row[data-v-60345e8c] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: #6b7280;
+}
+.detail-icon[data-v-60345e8c] {
+  display: flex;
+  align-items: center;
+  color: #9ca3af;
+}
+.detail-text[data-v-60345e8c] {
+  flex: 1;
+}
+
+/* Bulk Actions */
+.bulk-actions[data-v-60345e8c] {
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+.bulk-actions-hint[data-v-60345e8c] {
+  font-size: 0.75rem;
+  color: #6b7280;
+  text-align: center;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+.strands-sessions-modal[data-v-60345e8c] {
+    min-width: unset;
+    width: 100%;
+}
+.session-stats[data-v-60345e8c] {
+    grid-template-columns: 1fr 1fr;
+}
+.session-details[data-v-60345e8c] {
+    padding-left: 0;
+    margin-top: 0.75rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid #f3f4f6;
+}
+}
+
+/* Current Session Button Styling */
+.current-session-button[data-v-60345e8c] {
+  border-color: #dc2626 !important;
+  color: #dc2626 !important;
+}
+.current-session-button[data-v-60345e8c]:hover {
+  background-color: #dc2626 !important;
+  color: white !important;
+}
+
 /* Container Styles */
-.profile-container-width[data-v-31d6a9db] {
+.profile-container-width[data-v-dcc0db9b] {
   width: 100%;
 }
-.profile-max-width[data-v-31d6a9db] {
+.profile-max-width[data-v-dcc0db9b] {
   max-width: 56rem;
 }
-.profile-centered[data-v-31d6a9db] {
+.profile-centered[data-v-dcc0db9b] {
   margin: 0 auto;
 }
-.profile-animated[data-v-31d6a9db] {
-  animation: slideUp-31d6a9db 0.3s ease-out;
+.profile-animated[data-v-dcc0db9b] {
+  animation: slideUp-dcc0db9b 0.3s ease-out;
 }
-@keyframes slideUp-31d6a9db {
+@keyframes slideUp-dcc0db9b {
 from {
     opacity: 0;
     transform: translateY(20px);
@@ -4289,12 +4513,12 @@ to {
     transform: translateY(0);
 }
 }
-.profile-content-layout[data-v-31d6a9db] {
+.profile-content-layout[data-v-dcc0db9b] {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
-.profile-card-modern[data-v-31d6a9db] {
+.profile-card-modern[data-v-dcc0db9b] {
   background: #ffffff;
   border: 1px solid #e5e7eb;
   border-radius: 1rem;
@@ -4303,10 +4527,10 @@ to {
 }
 
 /* Modal-specific styles */
-.profile-container-modal[data-v-31d6a9db] {
+.profile-container-modal[data-v-dcc0db9b] {
   /* Remove any container-specific styles when in modal */
 }
-.profile-content-modal[data-v-31d6a9db] {
+.profile-content-modal[data-v-dcc0db9b] {
   /* Remove card styling when in modal */
   background: transparent;
   border: none;
@@ -4316,39 +4540,39 @@ to {
 }
 
 /* Header */
-.profile-header[data-v-31d6a9db] {
+.profile-header[data-v-dcc0db9b] {
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
-.profile-title[data-v-31d6a9db] {
+.profile-title[data-v-dcc0db9b] {
   font-size: 1.5rem;
   font-weight: 700;
   color: #EA00A8;
 }
-.profile-subtitle[data-v-31d6a9db] {
+.profile-subtitle[data-v-dcc0db9b] {
   color: #4b5563;
   font-size: 0.875rem;
 }
 
 /* Profile Image Section */
-.profile-image-section[data-v-31d6a9db] {
+.profile-image-section[data-v-dcc0db9b] {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-.profile-image-container[data-v-31d6a9db] {
+.profile-image-container[data-v-dcc0db9b] {
   position: relative;
 }
-.profile-image-wrapper[data-v-31d6a9db] {
+.profile-image-wrapper[data-v-dcc0db9b] {
   position: relative;
   display: inline-block;
 }
-.profile-image-wrapper:hover .profile-upload-overlay[data-v-31d6a9db] {
+.profile-image-wrapper:hover .profile-upload-overlay[data-v-dcc0db9b] {
   opacity: 1;
 }
-.profile-progress-ring[data-v-31d6a9db] {
+.profile-progress-ring[data-v-dcc0db9b] {
   position: absolute;
   z-index: 10;
   top: 50%;
@@ -4356,22 +4580,22 @@ to {
   transform: translate(-50%, -50%);
   pointer-events: none;
 }
-.profile-avatar[data-v-31d6a9db] {
+.profile-avatar[data-v-dcc0db9b] {
   width: 6rem;
   height: 6rem;
   border-radius: 50%;
   position: relative;
 }
-.profile-avatar-with-image[data-v-31d6a9db] {
+.profile-avatar-with-image[data-v-dcc0db9b] {
   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-dcc0db9b] {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.profile-avatar-initials[data-v-31d6a9db] {
+.profile-avatar-initials[data-v-dcc0db9b] {
   background-color: #EA00A8;
   display: flex;
   align-items: center;
@@ -4382,7 +4606,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-dcc0db9b] {
   position: absolute;
   inset: 0;
   border-radius: 50%;
@@ -4396,64 +4620,64 @@ to {
   border: none;
   cursor: pointer;
 }
-.profile-upload-overlay[data-v-31d6a9db]:disabled {
+.profile-upload-overlay[data-v-dcc0db9b]:disabled {
   cursor: not-allowed;
 }
-.profile-upload-icon[data-v-31d6a9db] {
+.profile-upload-icon[data-v-dcc0db9b] {
   width: 1.5rem;
   height: 1.5rem;
   color: white;
 }
-.profile-file-input[data-v-31d6a9db] {
+.profile-file-input[data-v-dcc0db9b] {
   display: none;
 }
 
 /* Profile Form */
-.profile-form[data-v-31d6a9db] {
+.profile-form[data-v-dcc0db9b] {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
-.profile-form-grid[data-v-31d6a9db] {
+.profile-form-grid[data-v-dcc0db9b] {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1rem;
 }
 @media (min-width: 768px) {
-.profile-form[data-v-31d6a9db] {
+.profile-form[data-v-dcc0db9b] {
     gap: 1.5rem;
 }
-.profile-form-grid[data-v-31d6a9db] {
+.profile-form-grid[data-v-dcc0db9b] {
     grid-template-columns: 1fr 1fr;
     gap: 1.5rem;
 }
-.profile-title[data-v-31d6a9db] {
+.profile-title[data-v-dcc0db9b] {
     font-size: 1.875rem;
 }
-.profile-subtitle[data-v-31d6a9db] {
+.profile-subtitle[data-v-dcc0db9b] {
     font-size: 1rem;
 }
 }
 
 /* Section Styles */
-.profile-section[data-v-31d6a9db] {
+.profile-section[data-v-dcc0db9b] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
 @media (min-width: 768px) {
-.profile-section[data-v-31d6a9db] {
+.profile-section[data-v-dcc0db9b] {
     gap: 1rem;
 }
 }
-.profile-section-title[data-v-31d6a9db] {
+.profile-section-title[data-v-dcc0db9b] {
   font-size: 1.125rem;
   font-weight: 600;
   color: #111827;
 }
 
 /* Setting Cards */
-.profile-setting-card[data-v-31d6a9db] {
+.profile-setting-card[data-v-dcc0db9b] {
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -4461,49 +4685,49 @@ to {
   background-color: #f9fafb;
   border-radius: 0.75rem;
 }
-.profile-setting-header[data-v-31d6a9db] {
+.profile-setting-header[data-v-dcc0db9b] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
 }
-.profile-setting-title[data-v-31d6a9db] {
+.profile-setting-title[data-v-dcc0db9b] {
   font-weight: 500;
   color: #111827;
 }
-.profile-setting-subtitle[data-v-31d6a9db] {
+.profile-setting-subtitle[data-v-dcc0db9b] {
   font-size: 0.875rem;
   color: #4b5563;
 }
 
 /* Transitions */
-.expand-enter-active[data-v-31d6a9db] {
+.expand-enter-active[data-v-dcc0db9b] {
   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-dcc0db9b] {
   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-dcc0db9b] {
   max-height: 0;
   opacity: 0;
   transform: translateY(-10px);
 }
-.expand-leave-to[data-v-31d6a9db] {
+.expand-leave-to[data-v-dcc0db9b] {
   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-dcc0db9b],
+.expand-leave-from[data-v-dcc0db9b] {
   max-height: 300px;
   opacity: 1;
   transform: translateY(0);
 }
 
 /* MFA Device Chip */
-.mfa-device-chip[data-v-31d6a9db] {
+.mfa-device-chip[data-v-dcc0db9b] {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
@@ -4515,15 +4739,32 @@ to {
   transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
 }
 
+/* MFA Chip Color Variants */
+.mfa-device-chip.chip-blue[data-v-dcc0db9b] {
+  background-color: #eff6ff;
+  color: #1d4ed8;
+  border-color: #bfdbfe;
+}
+.mfa-device-chip.chip-green[data-v-dcc0db9b] {
+  background-color: #f0fdf4;
+  color: #15803d;
+  border-color: #bbf7d0;
+}
+.mfa-device-chip.chip-purple[data-v-dcc0db9b] {
+  background-color: #faf5ff;
+  color: #7c3aed;
+  border-color: #e9d5ff;
+}
+
 
 /* New semantic classes for Tailwind conversion */
-.profile-change-form[data-v-31d6a9db] {
+.profile-change-form[data-v-dcc0db9b] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   overflow: hidden;
 }
-.profile-field-section[data-v-31d6a9db] {
+.profile-field-section[data-v-dcc0db9b] {
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -4531,76 +4772,76 @@ to {
   background-color: #f9fafb;
   border-radius: 0.75rem;
 }
-.profile-field-header[data-v-31d6a9db] {
+.profile-field-header[data-v-dcc0db9b] {
   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-dcc0db9b] {
   align-items: flex-start;
   gap: 1rem;
 }
-.profile-password-section[data-v-31d6a9db] {
+.profile-password-section[data-v-dcc0db9b] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
 @media (min-width: 768px) {
-.profile-password-section[data-v-31d6a9db] {
+.profile-password-section[data-v-dcc0db9b] {
     gap: 1rem;
 }
 }
-.profile-mfa-content[data-v-31d6a9db] {
+.profile-mfa-content[data-v-dcc0db9b] {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
-.profile-mfa-chips[data-v-31d6a9db] {
+.profile-mfa-chips[data-v-dcc0db9b] {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
 }
-.profile-actions-section[data-v-31d6a9db] {
+.profile-actions-section[data-v-dcc0db9b] {
   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-dcc0db9b 0.3s ease-out;
 }
 @media (min-width: 640px) {
-.profile-actions-section[data-v-31d6a9db] {
+.profile-actions-section[data-v-dcc0db9b] {
     flex-direction: row;
 }
 }
-.profile-help-item[data-v-31d6a9db] {
+.profile-help-item[data-v-dcc0db9b] {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
 }
-.profile-help-icon[data-v-31d6a9db] {
+.profile-help-icon[data-v-dcc0db9b] {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
 }
-.profile-footer-actions[data-v-31d6a9db] {
+.profile-footer-actions[data-v-dcc0db9b] {
   display: flex;
   gap: 1rem;
   align-items: stretch;
 }
-.profile-action-icon[data-v-31d6a9db] {
+.profile-action-icon[data-v-dcc0db9b] {
   width: 1rem;
   height: 1rem;
 }
-.profile-footer-text[data-v-31d6a9db] {
+.profile-footer-text[data-v-dcc0db9b] {
   color: #9ca3af;
   font-size: 0.875rem;
 }
 
 /* Avatar Editor Modal */
-.profile-avatar-modal-overlay[data-v-31d6a9db] {
+.profile-avatar-modal-overlay[data-v-dcc0db9b] {
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
@@ -4610,7 +4851,7 @@ to {
   z-index: 50;
   padding: 1rem;
 }
-.profile-avatar-modal[data-v-31d6a9db] {
+.profile-avatar-modal[data-v-dcc0db9b] {
   background-color: #ffffff;
   border-radius: 0.75rem;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
@@ -4619,18 +4860,18 @@ to {
   max-height: 90vh;
   overflow-y: auto;
 }
-.profile-avatar-modal-content[data-v-31d6a9db] {
+.profile-avatar-modal-content[data-v-dcc0db9b] {
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
-.profile-avatar-modal-header[data-v-31d6a9db] {
+.profile-avatar-modal-header[data-v-dcc0db9b] {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.profile-avatar-modal-close[data-v-31d6a9db] {
+.profile-avatar-modal-close[data-v-dcc0db9b] {
   color: #9ca3af;
   transition: color 0.2s ease;
   background: none;
@@ -4639,54 +4880,188 @@ to {
   padding: 0.25rem;
   border-radius: 0.25rem;
 }
-.profile-avatar-modal-close[data-v-31d6a9db]:hover {
+.profile-avatar-modal-close[data-v-dcc0db9b]:hover {
   color: #4b5563;
 }
-.profile-avatar-modal-close-icon[data-v-31d6a9db] {
+.profile-avatar-modal-close-icon[data-v-dcc0db9b] {
   width: 1.5rem;
   height: 1.5rem;
 }
 
 /* Profile field styles */
-.profile-field-title[data-v-31d6a9db] {
+.profile-field-title[data-v-dcc0db9b] {
   font-weight: 500;
   color: #111827;
 }
-.profile-field-subtitle[data-v-31d6a9db] {
+.profile-field-subtitle[data-v-dcc0db9b] {
   font-size: 0.875rem;
   color: #6b7280;
 }
-.profile-availability-message[data-v-31d6a9db] {
+.profile-availability-message[data-v-dcc0db9b] {
   font-size: 0.75rem;
 }
-.profile-availability-message.success[data-v-31d6a9db] {
+.profile-availability-message.success[data-v-dcc0db9b] {
   color: #16a34a;
 }
-.profile-availability-message.error[data-v-31d6a9db] {
+.profile-availability-message.error[data-v-dcc0db9b] {
   color: #dc2626;
 }
-.profile-toggle-container[data-v-31d6a9db] {
+.profile-toggle-container[data-v-dcc0db9b] {
   flex-shrink: 0;
 }
-.profile-alert-message[data-v-31d6a9db] {
+.profile-alert-message[data-v-dcc0db9b] {
   font-weight: 500;
 }
-.profile-modal-title[data-v-31d6a9db] {
+.profile-modal-title[data-v-dcc0db9b] {
   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-dcc0db9b] {
   width: 100%;
 }
 @media (min-width: 640px) {
-.profile-sign-out-button[data-v-31d6a9db] {
+.profile-sign-out-button[data-v-dcc0db9b] {
     width: auto;
 }
 }
 
+/* Sessions Modal Styles */
+.sessions-modal[data-v-dcc0db9b] {
+  min-width: 32rem;
+  max-width: 48rem;
+}
+.session-current-badge[data-v-dcc0db9b] {
+  background-color: #dcfdf7;
+  color: #065f46;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  border: 1px solid #a7f3d0;
+}
+.modal-header[data-v-dcc0db9b] {
+  margin-bottom: 1.5rem;
+}
+.modal-title[data-v-dcc0db9b] {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 0.5rem;
+}
+.modal-subtitle[data-v-dcc0db9b] {
+  color: #6b7280;
+}
+.sessions-content[data-v-dcc0db9b] {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.session-stats[data-v-dcc0db9b] {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  background-color: #f9fafb;
+  border-radius: 0.5rem;
+}
+.stat-item[data-v-dcc0db9b] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+.stat-label[data-v-dcc0db9b] {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+.stat-value[data-v-dcc0db9b] {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #111827;
+}
+.sessions-list[data-v-dcc0db9b] {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.sessions-loading[data-v-dcc0db9b] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 2rem;
+  justify-content: center;
+  color: #6b7280;
+}
+.sessions-empty[data-v-dcc0db9b] {
+  text-align: center;
+  padding: 2rem;
+  color: #6b7280;
+}
+.session-card[data-v-dcc0db9b] {
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  background-color: #ffffff;
+}
+.session-card-header[data-v-dcc0db9b] {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 0.75rem;
+}
+.session-device-info[data-v-dcc0db9b] {
+  flex: 1;
+}
+.session-device-name[data-v-dcc0db9b] {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 0.25rem;
+}
+.session-card-details[data-v-dcc0db9b] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.session-detail-row[data-v-dcc0db9b] {
+  display: flex;
+  gap: 0.5rem;
+}
+.detail-label[data-v-dcc0db9b] {
+  font-weight: 500;
+  color: #6b7280;
+  min-width: 6rem;
+}
+.detail-value[data-v-dcc0db9b] {
+  color: #111827;
+}
+.session-actions[data-v-dcc0db9b] {
+  display: flex;
+  justify-content: center;
+  padding-top: 1rem;
+  border-top: 1px solid #e5e7eb;
+}
+@media (max-width: 640px) {
+.sessions-modal[data-v-dcc0db9b] {
+    min-width: auto;
+    width: 100%;
+    margin: 1rem;
+}
+.session-stats[data-v-dcc0db9b] {
+    flex-direction: column;
+    gap: 0.5rem;
+}
+.session-card-header[data-v-dcc0db9b] {
+    flex-direction: column;
+    gap: 0.75rem;
+}
+.detail-label[data-v-dcc0db9b] {
+    min-width: 5rem;
+}
+}
+
 /* Override accui- prefixed Tailwind classes with CSS properties */
 .accui-w-full[data-v-0943ff6b] {
   width: 100%;
@@ -5006,11 +5381,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;
@@ -5020,22 +5395,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;
@@ -5046,7 +5421,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;
 }
 
@@ -5096,7 +5471,7 @@ to {
 }
 
 /* User Button */
-.user-button[data-v-5acc4f6e] {
+.user-button[data-v-9e187d2c] {
   position: relative;
   display: flex;
   align-items: center;
@@ -5110,44 +5485,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%;
@@ -5156,27 +5531,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;
@@ -5184,10 +5556,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;
@@ -5195,10 +5597,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%;
@@ -5206,13 +5608,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%;
@@ -5221,17 +5623,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;
@@ -5239,24 +5641,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;
@@ -5271,29 +5673,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;
@@ -5308,30 +5710,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;
@@ -5340,37 +5742,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;
 }
 }