.profile-popup {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #1e2433;
border-top: 1px solid rgba(74, 158, 255, 0.1);
border-radius: 20px 20px 0 0;
z-index: 1000;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
max-height: 80vh;
overflow-y: auto;
}

.profile-popup.open {
transform: translateY(0);
opacity: 1;
}

.profile-popup-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(4px);
}

.profile-popup-overlay.show {
opacity: 1;
visibility: visible;
}

.profile-popup-content {
padding: 0;
}

.profile-popup-header {
padding: 20px 20px 16px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
}

.profile-popup-user-info {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
min-width: 0;
}

.profile-popup-avatar {
flex-shrink: 0;
}

.profile-popup-user-details {
flex: 1;
min-width: 0;
}

.profile-popup-username {
font-size: 18px;
font-weight: 600;
color: white;
margin: 0 0 4px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.profile-popup-email {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.profile-popup-close {
background: none;
border: none;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.2s ease;
flex-shrink: 0;
}

.profile-popup-close:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
}

.profile-popup-menu {
padding: 16px 20px 20px 20px;
display: flex;
flex-direction: column;
gap: 4px;
}

.profile-popup-item {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
font-weight: 500;
background: none;
border: none;
width: 100%;
text-align: left;
}

.profile-popup-item:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
transform: translateX(4px);
}

.profile-popup-item:active {
transform: scale(0.98);
}

.profile-popup-item svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}

.profile-popup-item.themes-item {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
border: 2px solid transparent;
background-clip: padding-box;
position: relative;
}

.profile-popup-item.themes-item::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 12px;
padding: 2px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: -1;
}

.profile-popup-item.themes-item:hover {
background: linear-gradient(135deg, #1f1f3a 0%, #1a2847 100%);
transform: translateX(4px);
}

.beta-tag {
margin-left: auto;
background: transparent;
color: #667eea;
font-size: 10px;
font-weight: 800;
padding: 3px 8px;
border-radius: 4px;
letter-spacing: 1px;
text-transform: uppercase;
border: 1.5px solid #667eea;
box-shadow: 0 0 12px rgba(102, 126, 234, 0.5), inset 0 0 8px rgba(102, 126, 234, 0.2);
text-shadow: 0 0 8px rgba(102, 126, 234, 0.8);
}

.profile-popup-logout {
color: #ef4444;
}

.profile-popup-logout:hover {
background: rgba(239, 68, 68, 0.1);
color: #fca5a5;
}

.profile-popup-divider {
height: 1px;
background: rgba(255, 255, 255, 0.1);
margin: 8px 0;
}

@media (min-width: 768px) {
.profile-popup {
display: none;
}

.profile-popup-overlay {
display: none;
}
}