.articleManagerContainer {
            display: flex;
            height: calc(100vh - 76px);
            width: 100%;
            max-width: 100%;
            background-color: #1e1e1e;
        }

        .articleManagerSidebar {
            width: 350px;
            color: #e0e0e0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .articleManagerMainContent {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
			max-width: calc(100% - 350px);
        }
		
		.articleManagerHeader_cass {
            background: linear-gradient(135deg, #5656568f 0%, #171519a8 100%);
			padding: 20px; /* 增加内边距以适应卡片效果 */
			border-radius: 15px;
			box-shadow: 0 2px 10px rgb(102 89 89 / 30%);
			margin-bottom: 20px;
        }
		
		.articleManagerHeader_cass:hover {
             background: linear-gradient(135deg, #513e3e8f 0%, #37323ca8 100%);
        }
		

        .articleManagerHeader {
            color: #ffffff; /* 白色文字以适应渐变背景 */
			margin: 0px 0px 15px 0px; /* 上 右 下 左 */
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }

        .articleManagerList {
            flex: 1;
            overflow-y: auto;
            padding: 10px 10px 10px 0px; /* 上 右 下 左 */
            height: 0;
        }
        
        /* 滚动条美化 */
        .articleManagerList::-webkit-scrollbar {
            width: 5px;
        }
        
        .articleManagerList::-webkit-scrollbar-track {
            background: #2d2d30;
        }
        
        .articleManagerList::-webkit-scrollbar-thumb {
            background: #454545;
            border-radius: 4px;
        }
        
        .articleManagerList::-webkit-scrollbar-thumb:hover {
            background: #5a5a5a;
        }

        .articleManagerItem {
            background: linear-gradient(135deg, #2f2f3291 0%, #4d4d5399 100%);
            border-radius: 12px;
            padding: 18px;
            margin-bottom: 18px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: flex-start;
            position: relative;
            overflow: hidden;
        }

        .articleManagerItem::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #546474b8, #241818);
            opacity: 0.8;
        }

        .articleManagerItem:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 122, 204, 0.2);
            background: linear-gradient(135deg, #864a4a91 0%, #13222c99 100%);
        }

        .articleManagerItem.active {
            background: linear-gradient(135deg, #58414191 0%, #1f354599 100%);
            box-shadow: 0 2px 10px rgb(125 125 125 / 59%), 0 0 2px rgb(139 2 176 / 51%);
            border-color: rgb(245 245 245 / 43%);
        }

        .articleManagerCover {
            width: 65px;
            height: 80px;
            border-radius: 8px;
            object-fit: cover;
            margin-right: 15px;
            flex-shrink: 0;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        .articleManagerContentWrapper {
            flex: 1;
			max-width: 70%;
        }

        .articleManagerTitle {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #d4d4d4;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
			white-space: nowrap;      /* 禁止换行 */
			overflow: hidden;         /* 隐藏超出部分 */
			text-overflow: ellipsis;  /* 超出部分显示省略号 */
        }

        .articleManagerMeta {
            display: flex;
            justify-content: space-between;
            color: #9e9e9e;
            font-size: 12px;
            margin-bottom: 10px;
        }

        .articleManagerPreview {
            color: #bcbcbc;
            font-size: 13px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .articleManagerDisplay {
            flex: 1;
			padding: 30px 30px 20px 30px; /* 上 右 下 左 */
            height: 0;
            display: flex;
            flex-direction: column;
        }

        .articleManagerArticleHeader {
            margin-bottom: 10px;
            flex-shrink: 0;
        }

        .articleManagerDisplay h1 {
            font-size: 28px;
            color: #d4d4d4;
            margin-bottom: 10px;
        }

        .articleManagerDisplay .meta {
            color: #9e9e9e;
            font-size: 14px;
            margin-bottom: 15px;
        }

        .articleManagerContent {
            flex: 1;
            overflow-y: auto;
            height: 0;
            color: #d4d4d4;
			padding: 0px 10px 0px 10px; /* 上 右 下 左 */
        }
        
        /* 滚动条美化 */
        .articleManagerContent::-webkit-scrollbar {
            width: 5px;
        }
        
        .articleManagerContent::-webkit-scrollbar-track {
            background: #2d2d30;
        }
        
        .articleManagerContent::-webkit-scrollbar-thumb {
            background: #454545;
            border-radius: 4px;
        }
        
        .articleManagerContent::-webkit-scrollbar-thumb:hover {
            background: #5a5a5a;
        }

        .articleManagerContent img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 15px 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        }

        .articleManagerContent p {
            margin-bottom: 15px;
            line-height: 1.7;
        }

        .articleManagerAddButton {
             background: linear-gradient(135deg, #5c5f6f8f 0%, #453556a8 100%);
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 20px;
            flex-shrink: 0;
            transition: background-color 0.3s;
        }

        .articleManagerAddButton:hover {
             background: linear-gradient(135deg, #4a4e648f 0%, #5a486da8 100%);
        }

        .articleManagerNoArticle {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            color: #9e9e9e;
            font-size: 18px;
        }

        .articleManagerEmptyState {
            text-align: center;
            padding: 40px;
            color: #9e9e9e;
        }

        .articleManagerEmptyState .icon {
            font-size: 48px;
            margin-bottom: 15px;
            color: #5a5a5a;
        }

        .articleManagerSearchBox {
            width: 100%;
            padding: 12px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background-color: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            margin-bottom: 0;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }
        
        .articleManagerSearchBox:focus {
            outline: none;
            border-color: rgba(255, 255, 255, 0.4);
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
        }
        
        /* 分页按钮样式 */
        .articleManagerPaginationControls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-top: 15px;
        }
        
        .articleManagerPageButton {
            padding: 8px 15px;
            background-color: #62916b;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        
        .articleManagerPageButton:hover:not(:disabled) {
            background-color: #737d75;
        }
        
        .articleManagerPageButton:disabled {
            background-color: #454545;
            cursor: not-allowed;
        }
        
        .articleManagerPageInfo {
            font-size: 14px;
            color: #9e9e9e;
        }
        
        .articleManagerPageContent {
            display: none;
        }
        
        .articleManagerPageContent.active {
            display: block;
        }
		
        .articleManager-container {
            display: flex;
            overflow-x: auto;
            gap: 12px;
            border-radius: 8px;
            cursor: grab;
			padding: 5px 0px 5px 0px; /* 上 右 下 左 */
        }
        
        .articleManager-container:active {
            cursor: grabbing;
        }
        
        /* 滚动条美化 */
        .articleManager-container::-webkit-scrollbar {
            height: 3px;
        }
        
        .articleManager-container::-webkit-scrollbar-track {
            background: #2d2d30;
        }
        
        .articleManager-container::-webkit-scrollbar-thumb {
            background: #454545;
            border-radius: 4px;
        }
        
        .articleManager-container::-webkit-scrollbar-thumb:hover {
            background: #5a5a5a;
        }

        .articleManager-person {
            display: flex;
            flex-shrink: 0;
            align-items: center;
            padding: 3px 10px 3px 5px; /* 上 右 下 左 */
            background-color: #2d2d2d;
            border-radius: 100px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .articleManager-person:hover {
            background-color: #3a3a3a;
        }
        
        .articleManager-person.selected {
            background-color: #252525;
        }

        .articleManager-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 8px;
            object-fit: cover;
            padding: 2px; /* 为边框创造空间 */
            background-clip: padding-box; /* 确保内容在边框内 */
			box-sizing: border-box;
			border: 2px solid transparent; /* 预留边框位置，初始透明 */
            transition: all 0.3s ease;
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* IE10+/Edge */
            user-select: none; /* 标准语法 */
        }
        
        .articleManager-person:hover .articleManager-avatar {
            border: 2px solid #00bcd4; /* 悬停时的青色边框 */
        }
        
		
		.articleManager-avatar:hover,
		.articleManager-avatar.active {
			border-color: #00bcd4; /* 只改颜色，不新增边框 */
		}
		
		

        .articleManager-name {
            color: white;
            font-size: 14px;
            margin-right: 8px;
            transition: all 0.3s ease;
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* IE10+/Edge */
            user-select: none; /* 标准语法 */
        }

        .articleManager-person:hover .articleManager-name {
            color: #00bcd4; /* 悬停时的青色文字 */
        }
        
        .articleManager-name:hover {
            color: #00bcd4;
        }
        
        .articleManager-name.active {
            color: #00bcd4; /* 激活状态的颜色，类似图片中的青色 */
        }