/* ==================== 用户功能样式 ==================== */
/* 桌面端和手机端用户按钮样式 */
.user-header-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 1px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.user-header-btn:hover {
    background-color: #f5f5f5;
}

/* 桌面端用户按钮容器 */
.user-btn-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* 手机端用户按钮（链接样式） */
.mobile-login-btn-wrapper .user-header-btn {
    text-decoration: none;
    cursor: pointer;
}

.mobile-login-btn-wrapper .user-header-btn:hover {
    background-color: #f5f5f5;
}

.phrasec {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0;
}

.phrasec .account {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.phrasec .account .portrait img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.phrasec .account .username {
    font-size: 14px;
    color: #333;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phrasec .user-login-link {
    display: none;
}

/* 桌面端登录按钮样式（与手机端一致，粉色系） */
.user-login-btn {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: 41px;
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    color: #ffffff;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
    transition: all 0.3s ease;
}

.user-login-btn:hover {
    background: linear-gradient(135deg, #ff85c0, #ff4580);
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
    transform: translateY(-2px);
    color: #ffffff;
}

.user-login-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(255, 105, 180, 0.3);
}

/* 用户弹窗主体 - 桌面端悬停显示 */
.user-modal-body {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    padding: 15px;
    z-index: 9999;
    display: none;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* 透明桥接区域 - 连接按钮和弹窗 */
.user-btn-wrapper::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 4px;
    pointer-events: auto;
}

/* 悬停时显示弹窗 */
.user-btn-wrapper:hover .user-modal-body {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* 确保鼠标在弹窗和按钮之间时保持hover状态 */
.user-btn-wrapper {
    padding-bottom: 4px;
}

.user-modal-body .user-info {
    display: flex;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
    margin-bottom: 12px;
}

.user-modal-body .user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 12px;
}

.user-modal-body .user-details h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.user-modal-body .user-details p {
    margin: 0;
    font-size: 13px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

.user-modal-body .user-actions {
    list-style: none;
    padding: 0;
    margin: 0;
}

.user-modal-body .user-actions li {
    margin-bottom: 8px;
}

.user-modal-body .user-actions li:last-child {
    margin-bottom: 0;
}

.user-modal-body .user-actions a {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 14px;
}

.user-modal-body .user-actions a:hover {
    background-color: #f5f5f5;
    color: #ef4444;
}

.user-modal-body .user-actions a i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

/* 手机端登录按钮样式（与桌面端一致，粉色系） */
.byb-mobile-login-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    height: 41px;
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    color: #ffffff;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
    transition: all 0.3s ease;
}

.byb-mobile-login-btn:hover {
    background: linear-gradient(135deg, #ff85c0, #ff4580);
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
    transform: translateY(-2px);
    color: #ffffff;
}

.byb-mobile-login-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(255, 105, 180, 0.3);
}

.byb-login-text {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 媒体查询：手机端隐藏桌面端用户按钮 */
@media (max-width: 991px) {
    .user-btn-wrapper .user-header-btn {
        display: none !important;
    }

    .user-btn-wrapper .user-modal-body {
        display: none !important;
    }
}

/* 媒体查询：桌面端隐藏手机端用户按钮 */
@media (min-width: 992px) {
    .mobile-login-btn-wrapper {
        display: none !important;
    }
}