/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 基础样式变量 */
:root {
    --primary-color: #1890ff;
    --primary-hover: #40a9ff;
    --text-color: #333;
    --text-secondary: #666;
    --text-light: #999;
    --bg-primary: #ffffff;
    --bg-secondary: #f5f7fa;
    --border-color: #f0f0f0;
    --shadow-light: 0 1px 6px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 5px 20px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 3px 12px rgba(24, 144, 255, 0.15);
    --transition-fast: all 0.3s ease;
    --border-radius: 8px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
}



/* 容器样式 */
.container {
    max-width: 1580px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 头部导航栏 */
.header {
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}
.navbar-nav,.navbar-opt,.navbar-icon {
	display: flex;
	justify-content: flex-start;
	align-items: center;
 }
 
.navbar-nav a { text-decoration: none; color: #000000;}
.navbar-nav a:hover { color: #007bff;}
 
.navbar-logo {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

.navbar-logo:hover {
    color: #007bff;
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links li {
    margin-left: 30px;
}

.nav-links a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
	font-weight: bold;
    transition: color 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: #007bff;
}

.search-form {
    display: flex;
    align-items: center;
	margin-right: 20px;
}

.search-input {
    padding: 7px 15px;
    border: 1px solid #ddd;
    border-radius: 20px 0 0 20px;
    outline: none;
    transition: border-color 0.3s ease;
}

.search-input:focus {
    border-color: #007bff;
}

.search-btn {
    padding: 8px 15px;
    background-color: #007bff;
    border: none;
    color: white;
    border-radius: 0 20px 20px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-btn:hover {
    background-color: #0056b3;
}

.login-btn { padding: 5px 5px; cursor: pointer;}
.navbar-icon { display: none;}

/* 导航栏悬浮效果 */
.navbar-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* 面包屑导航 */
.breadcrumb {
    padding: 15px 0;
    background-color: transparent;
    margin: 0;
    font-size: 14px;
    color: #666;
}

.breadcrumb a {
    color: #007bff;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span {
    margin: 0 5px;
    color: #999;
}
.qianduange-mask { width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; background-color: rgba(0,0,0,0.1);}
/* 主要内容区域 */
.main-content {
    padding: 20px 0;
}

/* 首页样式 */
.home-page {
    display: flex;
}


.news,.hot,.ranking {
	text-decoration: none; color: #333;
}
.news:hover,.hot:hover,.ranking:hover { color: #007bff;}

/* 卡片样式 */
.card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 20px;
}

.card-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.card-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
}

.card-title a {
	text-decoration: none;
	color: #333;
}

.card-title a:hover {
	color: #007bff;
}

.card-title i {
    margin-right: 8px;
    color: #007bff;
}

/* 最近更新模块 */
.recent-updates {
    list-style: none;
}

.recent-updates .recent-update-item {
	display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.3s ease;
}

.recent-updates .recent-update-item .placeholder-img {
	margin-right: 15px;
}

.recent-update-item:hover {
    background-color: #f9f9f9;
}

.recent-update-item:last-child {
    border-bottom: none;
}

.update-title {
    font-size: 16px;
    margin-bottom: 5px;
}

.update-title a {
    color: #333;
	font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.update-title a:hover {
    color: #007bff;
}

.update-meta {
    font-size: 14px;
    color: #666;
}

.update-meta span {
    margin-right: 15px;
}

/* 推荐模块 */
.recommend-grid {
    display: grid;
	grid-template-columns: repeat(4,1fr);
    /* grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); */
    gap: 20px;
}

.recommend-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.recommend-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.recommend-img {
    width: 100%;
    height: 160px;
	overflow: hidden;
    object-fit: cover;
}

.recommend-img img {
	width: 100%;
	height: 100%;
	opacity: 0.8;
}

.recommend-content {
    padding: 15px;
}

.recommend-content h4 {
    margin-bottom: 10px;
    font-size: 16px;
    color: #333;
}

.recommend-content p {
	width: 100%;
	height: auto;
	max-height: 44px;
	line-height: 22px;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.recommend-meta {
    font-size: 13px;
    color: #999;
}

.recommend-meta span { display: inline-block; margin-right: 5px;}

/* 排行榜样式 */
.ranking-list {
    list-style: none;
}

.ranking-item {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease;
}

.ranking-item:hover {
    background-color: #f9f9f9;
}

.ranking-item:last-child {
    border-bottom: none;
}

.ranking-index {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    font-size: 14px;
    margin-right: 10px;
    flex-shrink: 0;
}

.ranking-item:nth-child(1) .ranking-index {
    background-color: #ff6b6b;
}

.ranking-item:nth-child(2) .ranking-index {
    background-color: #4ecdc4;
}

.ranking-item:nth-child(3) .ranking-index {
    background-color: #ffe66d;
    color: #333;
}

.ranking-item a {
    color: #333;
    text-decoration: none;
    flex: 1;
    transition: color 0.3s ease;
    font-size: 14px;
}

.ranking-item a:hover {
    color: #007bff;
}

.ranking-count {
    font-size: 13px;
    color: #999;
    flex-shrink: 0;
}

/* 友情链接 */
.links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.link-item {
    padding: 5px 15px;
    background-color: #f5f5f5;
    border-radius: 15px;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
}

.link-item:hover {
    background-color: #007bff;
    color: white;
}

/* 广告位样式 */
.commercial-section {
	width: 100%;
	height: 80px;
    margin-bottom: 20px;
	overflow: hidden;
}

.text-commercial { height: auto; margin-bottom: 20px;}

.commercial-item {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
    position: relative;
}

.commercial-item:hover {
    transform: scale(1.02);
}

.commercial-img {
    width: 100%;
    display: block;
}

.commercial-banner {
    /* height: 120px; */
	height: auto;
    background-color: #f0f0f0;
    display: block;
    /* align-items: center; */
    /* justify-content: center; */
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
}

.commercial-banner img {
    /* width: 100%;
    height: 100%; */
	display: block;
    object-fit: cover;
}

.commercial-text {
    padding: 15px;
    background-color: #f8f9fa;
    border-left: 4px solid #007bff;
    border-radius: 0 8px 8px 0;
    margin-bottom: 15px;
}

.commercial-text h4 {
    color: #007bff;
    margin-bottom: 5px;
    font-size: 16px;
}

.commercial-text p {
    color: #666;
    font-size: 14px;
    margin: 0;
}
.dropdown {
	height: 38.4px;
	position: relative;
}

.dropdown:hover .user-infos { display: block; }

.dropdown .user-infos { display: none; width: 120px; height: auto; position: absolute; right: 0px; top: 38px;  padding-top: 15px;}

.dropdown .user-infos .dropdown-menu {
    display: block;
    width: 120px;
    position: absolute;
    background-color: #FFFFFF;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.dropdown .user-infos .dropdown-menu li,.dropdown .user-infos .dropdown-menu ul {
    list-style-type: none;
}
.dropdown .user-infos .dropdown-menu a,.dropdown .user-infos .dropdown-menu .user-name {
	line-height: 27px;
	font-size: 14px;
    font-weight: 400;
    color: #444;
    padding: 5px 15px;
    padding-bottom: 10px;
}
.dropdown .user-infos .dropdown-menu a i {
    margin-right: 8px;
}
.dropdown .user-infos .dropdown-menu a:hover { color: #0056b3; }

.dropdown-toggle {
    height: 60px;
    line-height: 27px;
    font-size: 14px;
    color: #555;
    padding-top: 16px;
    padding-bottom: 16px;
	cursor: pointer;
}

.dropdown-toggle .avatar-img {
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height: 30px;
    box-sizing: content-box;
    color: #fff;
    text-align: center;
    font-weight: normal;
}

.dropdown-toggle .avatar-img img {
    border-radius: 30px;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.visible-xs-inline-block { display: none; }


/*返回顶部*/
/*asid_share*/
.relative{position:relative;top:0;left:0;}
.pb6{padding-bottom:6px;}

.asid_share{position:fixed;width:40px;bottom:25%;right:0;z-index:890;}
*html #asid_share{position:absolute;top:expression(documentElement.scrollTop + "px");margin:300px 0 0 0;}

.asid_share .asid_share_box{width:100%;font-size: 14px; margin-bottom:3px;background:#d9d9d9;text-align:center;border-radius: 4px; position: relative;}
.asid_share .asid_share_box .num-msg { display: none; width: 24px; height: 24px;line-height: 24px; font-size: 65%; color: #FFFFFF; text-align: center; background-color: #ff6b6b; position: absolute; left: -10px; top: -10px; border-radius: 50% 50%; }
.asid_share .asid_share_box a{display:block;height:35px;padding:2.5px 2.5px;}
.asid_share .asid_share_box a:hover{background:#6576ff;text-decoration:none; cursor: pointer;}
.asid_share .asid_share_box a:hover .asid_title,.asid_share .asid_share_box .asid_title{color:#fff;font-size:12px;display:block;padding-left:6px;line-height:16px;width:30px;margin-top:-2px;}
.asid_share .red_bag{background:#6576ff;text-decoration:none;}
.asid_share .asid_sha_layer{border:1px solid #ccc;background:#fff;position:absolute;right:47px;bottom:-44px;}

.sweep_img{padding:10px;}
.asid_share_box .asid_help_list li{line-height:26px;height:26px;background:url(../images/dian.png) no-repeat 6px 12px;}
.asid_share_box .asid_help_list li a{line-height:26px;height:26px;padding:0 0 0 14px;text-align:left;}
.asid_help_list li a:hover{color:#fff;}

.asid_share_triangle{width:12px;height:40px;position:absolute;right:45px;bottom:-12px;z-index:100;}
.border_sj,.con_sj{display:block;width:18px;height:28px;font-size:18px;overflow:hidden;font-family: SimSun;}
.border_sj{color:#ccc;font-style:normal;}
.con_sj{color:white;margin:-14px -2px 0 0;margin:-28px 0 0 -2px;}

/* 文章列表页样式 */
.article-list-page,.search-result-container {
    display: flex;
    
}

.article-filters {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.filter-tabs {
    display: flex;
    list-style: none;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 10px;
}

.filter-tab {
    padding: 8px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.filter-tab a { text-decoration: none; color: #333;}

.filter-tab a:hover,.filter-tab.active,
.filter-tab.active a {
    color: #007bff;
    border-bottom-color: #007bff;
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.filter-btn {
	text-decoration: none;
    padding: 5px 15px;
    background-color: #f5f5f5;
    border: none;
    border-radius: 15px;
	color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.filter-btn:hover,
.filter-btn.active {
    background-color: #007bff;
    color: white;
}

/* 文章列表项 */
.article-list {
    list-style: none;
}

.article-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.article-with-thumbnail {
    display: flex;
    gap: 20px;
}

.article-thumbnail {
    width: 180px;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.article-content {
    flex: 1;
}

.article-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.article-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.article-title a:hover {
    color: #007bff;
}

.article-excerpt {
	height: auto;
	max-height: 44px;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
    color: #999999;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 22px;
}

.article-meta {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #999;
    flex-wrap: wrap;
    gap: 15px;
}

.article-meta span {
    display: flex;
    align-items: center;
}

.article-meta i {
    margin-right: 5px;
}

.article-meta .tags a { text-decoration: none; color: #999999; margin-right: 5px;}
.article-meta .tags a:hover { color: #007bff;}

/* 分页控件 */
.pagination {
    display: flex;
    justify-content: center;
    margin: 30px 0;
    list-style: none;
}

.pagination li {
    margin: 0 5px;
}

.pagination a {
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.pagination a:hover {
    background-color: #f5f5f5;
    border-color: #007bff;
    color: #007bff;
}

.pagination .active a {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

/* 文章详情页样式 */
.article-detail-page {
    display: flex;
}
.left-section,.left-search-section {flex: 1;min-width: 0; padding-right: 20px;}
.right-section,.right-sidebar {flex: 0 0 340px; }
.article-detail {
    flex: 3;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.article-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.article-title-detail a {
	font-size: 28px;
	font-weight: bold;
	text-decoration: none;
	color: #333;
	margin-bottom: 20px;
	line-height: 1.3;
}

.article-detail-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.3;
}

.article-detail-meta {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
    flex-wrap: wrap;
    gap: 20px;
}

.article-meta-detail {margin: 10px 0px;}

.article-meta-detail div {
	display: flex;
	align-items: center;
	font-size: 13px;
	color: #999999;
	flex-wrap: wrap;
	gap: 20px;
}

.article-meta-detail div a {
	text-decoration: none;
	color: #999999;
}

.article-meta-detail div a:hover {
	color: #007bff;
}



.article-meta-detail .article-tag {
	margin: 15px 0px 20px 0px;
	gap: 0px;
}

.article-meta-detail .article-tag .item-tag {
	margin-right: 4px;
	    font-size: 14px;
	    color: #006fff;
	    padding: 0 4px;
	    border-radius: 4px;
	
}

.article-meta-detail .article-tag .item-tag:hover {
	background: rgba(0, 111, 255, 0.102);
}

.article-meta-detail .article-tag .item-tag:before {
	display: inline-block;
	content: "#";
	color: #007bff;
}


.sourcecode-meta-detail {margin: 10px 0px;}

.sourcecode-meta-detail div {
	display: flex;
	align-items: center;
	font-size: 13px;
	color: #999999;
	flex-wrap: wrap;
	gap: 20px;
}

.sourcecode-meta-detail div a {
	text-decoration: none;
	color: #999999;
}

.sourcecode-meta-detail div a:hover {
	color: #007bff;
}

.sourcecode-meta-detail .article-tag {
	margin: 15px 0px 20px 0px;
	gap: 0px;
}

.sourcecode-meta-detail .article-tag .item-tag {
	margin-right: 4px;
	    font-size: 14px;
	    color: #006fff;
	    padding: 0 4px;
	    border-radius: 4px;
	
}

.sourcecode-meta-detail .article-tag .item-tag:hover {
	background: rgba(0, 111, 255, 0.102);
}

.sourcecode-meta-detail .article-tag .item-tag:before {
	display: inline-block;
	content: "#";
	color: #007bff;
}




.article-content-description {
	height: auto;
	margin-bottom: 20px;
}

.article-content-description .content-description-text {
	padding: 15px;
	text-indent: 2rem;
	line-height: 22px;
	font-size: 14px;
	color: #666666;
	background-color: #f8f9fa;
	border-left: 4px solid #007bff;
	border-radius: 0 8px 8px 0;
	margin-bottom: 15px;
}

.article-detail-meta span {
    display: flex;
    align-items: center;
}

.article-detail-meta i {
    margin-right: 5px;
}

.article-detail-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 30px;
}

.article-detail-content p {
    margin-bottom: 15px;
}

.article-detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 15px 0;
}

.article-detail-content h2 {
    margin: 25px 0 15px;
    font-size: 24px;
    color: #333;
}

.article-detail-content h3 {
    margin: 20px 0 15px;
    font-size: 20px;
    color: #333;
}

/* 代码块样式 */
.article-detail-content pre {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 15px;
    margin: 15px 0;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
}

.article-detail-content code {
    background-color: #f8f9fa;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    color: #e83e8c;
}

.article-detail-content pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
}

.article-content-detail {
	position: relative;
}

.article-content-detail p,.article-content-detail h3,.article-content-detail h4,.article-content-detail h5,.article-content-detail h6 {
	margin: 1em 0px;
}

.article-content-detail img { width: 100%; max-width: 100%;}

div.hide-article-box {
    width: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(70%, #fff));
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 70%);
    padding-bottom: 32px;
}

.text-center,.column-mask {
    text-align: center;
}
.hide-article-pos {
    position: relative;
    z-index: 996;
    padding-top: 160px;
    bottom: -1px;
    margin-top: -220px;
}

.column-mask .lock-text, .read-column-mask .lock-text {
    display: inline-block;
    /* width: 167px; */
	padding: 0px 15px;
    height: 40px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(252, 85, 49, 0.2);
    box-shadow: 0 2px 4px 0 rgba(252, 85, 49, 0.2);
    border-radius: 20px;
    border: 1px solid #fc5531;
    font-size: 14px;
    font-weight: 500;
    color: #fc5531;
    line-height: 40px;
    text-align: center;
    position: relative;
}

.column-mask .lock-text .fa-lock {
	margin-right: 7px;
}

pre { font-size: 14px!important; line-height: 22px!important; background:#282c34 !important;margin:0px 0px;padding:33px 0.5rem 0.5rem 0.5rem!important;border-radius:5px 5px!important;word-break:break-all;word-wrap:break-word;font-family: Consolas, Inconsolata, Courier, monospace; position: relative;}
li.L1, li.L3, li.L5, li.L7, li.L9 { background: transparent !important;}
pre.set-code-height {width:100%;height:410px;padding-bottom:40px;overflow:hidden; position: relative;ransition: height 5s ease-out;}
pre .opt-box {display:-webkit-box; color: #fff; border-top-left-radius:5px; border-top-right-radius: 5px; display:-ms-flexbox;display:flex;position:absolute;width:100%;top:0;left:0;content:'';height:31px;padding:0 16px;line-height:18px;background-color:inherit; border-bottom:1px solid #e5e5e5;}
pre .opt-box  * {word-wrap:normal;word-break:break-all;}
pre .opt-box .code-language {position:absolute;top:7px;left:16px;font-size:14px;font-weight:600;}
pre .opt-box .hljs-button { width: 58px; height: 30px; line-height: 30px; font-size: 14px; color: #FFFFFF; position: absolute; right: 0px; top: 0px; cursor: pointer;}
.set-code-height code { height: 100%; overflow: hidden;}
pre .hide-preCode-box { width: 100%; position: absolute; left: 0px; bottom: 0px; background: linear-gradient(180deg, rgba(26, 26, 26, 0) 0%, rgba(26, 26, 26, 0.84) 49.52%, #1a1a1a 100%) !important;}
pre .hide-preCode-box .hide-preCode-bt {display:flex;width:unset;height:40px;line-height:40px;font-size:14px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;}
pre .hide-preCode-box .hide-preCode-bt:before { display: block; content: "展开"; color: #b2b2b2;}
pre .hide-preCode-box .hide-preCode-bt .fa { font-size: 18px; color: #b2b2b2; margin-left: 5px;}
pre.code-height-auto { height: auto; ransition: height 5s ease-out; }
.code-height-auto .hide-preCode-box .hide-preCode-bt .fa {transition: transform 0.5s ease; transform-origin: center; transform: rotate(180deg);}
.code-height-auto .hide-preCode-box .hide-preCode-bt:before { content: "收起";}
pre code {font-family: Consolas, Inconsolata, Courier, monospace;}
pre code td.hljs-ln-numbers {width: 48px; font-size: 16px; text-align:right;color:#f8f8f2;border-right:1px solid #c5c5c5;vertical-align:top;padding-left:0.5rem;padding-right:0.8rem; }
pre code td.hljs-ln-code {padding-left:1rem;border:none;}
.qdg-table {border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all;margin-top:0;margin-bottom:16px;}
.qdg-table thead tr,.qdg-table  thead tr {background-color:#F8F8F8;border-top:1px solid #ccc;}
.qdg-table td,.qdg-table th {padding:6px 13px;border:1px solid #ddd;}
.qdg-table th {font-weight:700;}
.set-code-height .linenums { width: 100%; height: 100%; overflow: hidden;}


/* 文章操作按钮 */
.article-actions {
    display: flex;
	justify-content: space-between;
    gap: 20px;
    padding: 10px 20px;
    /* border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 30px; */
	box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.06);
	margin: 20px -20px;
}

.article-actions .article-actions-author {
    display: flex;
	justify-content: space-between;
    align-items: center;
	gap: 5px;
}

.article-actions .article-actions-author img {
	width: 32px;
	height: 32px;
	border-radius: 50% 50%;
}

.article-actions .article-actions-author a {
	color: #333333;
	text-decoration: none;
	font-weight: bolder;
}

.article-actions .article-actions-author a:hover {
	color: #007bff;
}

.article-actions .article-actions-author .follow-author {
	display: flex;
	padding: 3px 20px;
	border: 1px solid #ddd;
	font-size: 14px;
	border-radius: 15px 15px;
	margin-left: 8px;
	cursor: pointer;
}

.article-actions .article-actions-author .follow-author:hover {
	background-color: #007bff;
	color: #FFFFFF;
	border: 1px solid #007bff;
}

.action-btn {
    /* display: flex; */
    align-items: center;
	border: none;
    /* padding: 10px 20px; */
    /* border: 1px solid #ddd;
    border-radius: 25px; */
    background-color: #fff;
    color: #999999;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 14px;
	margin-top: 15px;
	margin-left: 5px;
}

.action-btn:hover {
    background-color: #f8f9fa;
    border-color: #007bff;
    color: #007bff;
}

/* .action-btn i {
    margin-right: 2px;
}
.action-btn .count { margin-left: 2px;} */
.action-btn.liked,
.actions-likes.liked,
.action-btn.recommended {
    /* background-color: #e7f3ff;
    border-color: #007bff; */
    color: #007bff;
}

.actions-btn { cursor: pointer;}

.share-btn { position: relative;}
.action-share { display: none; width: 200px; height: 400px; position: absolute; left: -75px; top: -400px; padding-bottom: 16px;}
.action-share::after {
    content: '';
    position: absolute;
    bottom: 16px;
    right: 93px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #fff;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
.share-model { width: 100%; height: 100%; background-color: #FFFFFF; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15); border-radius: 4px 4px; padding: 10px 0px; }
.share-btn:hover .action-share { display: block; }

.related-articles { background-color: #FFFFFF; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); padding: 20px 20px; margin-top: 10px;}

.related-articles ul, .related-articles ul li { list-style: none; }
.related-articles .related-item { padding: 5px 0px; border-bottom: 1px solid #f7f7fc; }
.related-articles .related-item:last-child { border: none; }
.related-articles .related-item .related-content .related-article-title {  width: 100%; height: 22px; line-height: 22px; padding-right: 200px; position: relative;}
.related-articles .related-item .related-content .related-article-title .article-title-style { width: 100%; height: 22px; line-height: 22px; white-space:nowrap;  overflow:hidden;  text-overflow:ellipsis; font-size: 16px; margin-bottom: 0px; font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif; -webkit-font-smoothing: antialiased;}
.related-articles .related-item .related-content .related-article-title .article-title-style a { text-decoration: none; color: #282b31; }
.related-articles .related-item .related-content .related-article-title .article-title-style a:hover { color: #fc5531;}
.related-articles .related-item .related-content .related-article-title .article-title-style a .highlight { color: #fc5531;}
.related-articles .related-item .related-content .related-article-title .related-article-author { display: flex; width: 200px; height: 22px; line-height: 22px; position: absolute; right: 0px; top: 0px; justify-content: end; gap: 10px; }
.related-articles .related-item .related-content .related-article-title .related-article-author a { text-decoration: none; color: #999aaa; font-size: 13px;}
.related-articles .related-item .related-content .related-article-title .related-article-author a:hover { color: #fc5531;}
.related-articles .related-item .related-content .related-article-title .related-article-author span { color: #999aaa; font-size: 13px;}
.related-articles .related-item .related-content .related-description { width: 100%; height: 22px; line-height: 22px; font-size: 13px; color: #999aaa; white-space:nowrap;  overflow:hidden;  text-overflow:ellipsis;}
.related-articles .related-item .related-content .related-description .highlight,.container .breadcrumb .highlight,.search-result-content .search-result-panel .search-result-item .highlight { color: #fc5531;} 
/* 作者信息 */
.author-info {
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 30px;
}

.author-profile {
	width: 100%;
	height: auto;
}

.author-profile .author-profile-info {
	display: flex;
	gap: 15px;
}
.author-profile .author-profile-info .author-avatar-large {
	display: flex;
	width: 60px;
	height: 60px;
	border-radius: 50% 50%;
}

.author-profile .author-profile-info .author-name-large a {
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
	color: #333333;
}

.author-profile .author-profile-info .author-title-large {
	font-size: 13px;
}

.author-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
}

.author-details {
    flex: 1;
}

.author-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.author-bio {
	margin-top: 10px;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.follow-btn {
    padding: 6px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.follow-btn:hover {
    background-color: #0056b3;
}

/* 相关文章 */
.related-articles {
    margin-bottom: 30px;
}

.related-article-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.related-article-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-article-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.related-article-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.related-article-content {
    padding: 15px;
}

.related-article-content h4 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #333;
}

.related-article-content h4 a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.related-article-content h4 a:hover {
    color: #007bff;
}

.related-article-meta {
    font-size: 13px;
    color: #999;
}
/* 评论区 */
/* .comments-section {
    margin-bottom: 30px;
}

.comment-form {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.comment-input-wrapper {
    margin-bottom: 15px;
}

.comment-textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
}

.comment-textarea:focus {
    border-color: #007bff;
}

.comment-submit {
    padding: 10px 30px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.comment-submit:hover {
    background-color: #0056b3;
}

.comment-list {
    list-style: none;
}

.comment-item {
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.3s ease;
}

.comment-item:hover {
    background-color: #f9f9f9;
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-author {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.comment-time {
    font-size: 13px;
    color: #999;
    margin-bottom: 10px;
}

.comment-content {
    color: #333;
    line-height: 1.6;
} */


/*评论区*/
.drawer {
  position: fixed;
  top: 0;
  right: -700px;
  height: 100vh;
  width: 600px; /* 可以根据需要调整宽度 */
  background-color: #fff;
  box-shadow: 2px 0 5px rgba(0,0,0,0.5);
  transition: transform 0.3s ease;
  padding-top: 50px;
  z-index: 1002;
}
.drawer .drawer-header {
	display: flex;
	width: 100%;
	height: 50px;
	position: absolute;
	left: 0px;
	top: 0px;
	border-bottom: 1px solid #dcdcdc;
	padding: 0px 15px;
	justify-content: space-between;
	align-items: center;
}

.drawer .drawer-header strong {
	color: #ff5351;
	font-weight: 500;
}

.drawer .drawer-header i {
	cursor: pointer;
}

.drawer .drawer-header i:hover {
	color: #007bff;
}

.drawer .drawer-body {
	width: 100%;
	height: 100%;
	overflow-x: auto;
}


.comment-msk { display: none; width: 100%; height: 100%; background-color: rgba(000, 000, 000, 0.4); position: fixed; left: 0px; top: 0px; z-index: 1001;}


.panel {margin-bottom:17px;background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05);}
.panel-default > .panel-body {position:relative;padding:15px 0;}
.panel-default {border:none;padding:0 15px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:2px;-webkit-background-clip:padding-box;-moz-border-radius:2px;-moz-background-clip:padding;border-radius:2px;background-clip:padding-box;}
.panel-default > .panel-heading {position:relative;padding:15px 0;background:#fff;border-bottom:1px solid #f5f5f5;}
.panel-default > .panel-heading {color:#333333;border-color:#ddd;}
.panel-default > .panel-heading .panel-title {font-size:16px;}
.panel-title {margin-top:0;margin-bottom:0;font-size:14px;color:inherit;}
.panel-default > .panel-heading small {font-weight:normal;color:#999;font-size:13px;}

#comment-container #commentlist dl {position:relative;border-bottom:1px solid #eee;clear:both;padding:10px 0;margin-bottom:5px;}
#comment-container #commentlist dl dt {float:left;margin-right:10px;width:44px;height:44px;display:block;position:absolute;}
#comment-container #commentlist dl dt img {width:40px;height:40px;border-radius:50%;}
#comment-container #commentlist dl dd {padding-left:55px;float:left;width:100%;}
#comment-container #commentlist dl dd cite a {color:#007bff;}
#comment-container #commentlist dl dd small {color:#999;margin:0 0 0 3px;height:20px;line-height:20px;font-size:10px;}
.father-parent small a {display:none; margin-left: 10px; }
.father-parent:hover small a { display: inline-block; color: #007bff; }
.reply-parent small a {display:none; margin-left: 10px; cursor: pointer;}
.reply-parent:hover small a { display: inline-block; color: #007bff; }
#comment-container #commentlist dl dd dl {margin:0px;border-top:1px solid #eee;border-bottom:none;padding-top:15px;padding-bottom:0;}
/*#comment-container #commentlist dl dd dl dd {width:550px;}*/
#comment-container #commentlist dl dd p {margin-top:5px;margin-bottom:10px;line-height:24px;}
#comment-container #commentlist dl dd p em {font-style:normal;display:inline-block;padding:0 5px;height:22px;line-height:22px;font-weight:400;font-size:13px;text-align:center;color:#007bff;background:#e5f2ff;border-radius:2px;}
#comment-container #commentlist cite {font-style:normal; color: #333333;}
#comment-container h3 {position:relative;font-size:16px;padding:15px 0;background:#fff;margin-top: 17px; margin-bottom: 8.5px;}
#comment-container h3 a {display:none;}
#comment-container h4 { font-size: 15px; margin: 5px 0px; }
#comment-container #postcomment .form-group { display: flex; justify-content: end;margin-bottom:10px; gap: 10px;}
#comment-container #postcomment .form-group a { text-decoration: none; }
#comment-container #postcomment label {font-weight:normal;}
#comment-container #postcomment a small {display:inline !important;}
#comment-container #postcomment .form-control {min-height: 100px; border-radius:2px;box-shadow:none;border-color:#eeeeee;}
#comment-container #postcomment .form-control img {display:inline-block;width:16px;height:18px;margin:0px 2px;}

.clearfix:before {content: " "; display: table;}
.clearfix:after {content: " "; display: table;clear: both;}
.text-center {text-align:center;}
.commentPage {display:inline-block;padding-left:0;margin:17px 0;border-radius:3px;}
.commentPage > li {display:inline;}
.commentPage > li:first-child > a,.commentPage > li:first-child > span {margin-left:0;border-bottom-left-radius:3px;border-top-left-radius:3px;}
.commentPage > li > a,.commentPage > li > span {position:relative;float:left;padding:6px 12px;line-height:1.42857143;text-decoration:none;color:#2c3e50;background-color:#fff;border:1px solid #ddd;margin-left:-1px;}
.commentPage > .active > span {z-index:3;color:#fff;background-color:#2c3e50;border-color:#2c3e50;cursor:default;position:relative;float:left;padding:6px 12px;line-height:1.42857143;text-decoration:none;margin-left:-1px;}
#comment-container #postcomment textarea.form-control {border-radius:2px;box-shadow:none;border-color:#eeeeee;}
.form-control[disabled],fieldset[disabled] .form-control {cursor:not-allowed;}
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control {background-color:#eeeeee;opacity:1;}
.form-control {height:auto;}
.form-control {font-size:13px;}
.form-control {display:block;width:100%;padding:6px 12px;font-size:12px;line-height:1.42857143;color:#555555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:3px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;}
.form-control:focus {border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6);}


.btn {font-size:13px;}
.btn-primary {color:#fff;background-color:#2c3e50;border-color:#2c3e50;}
.btn {display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:12px;line-height:1.42857143;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.btn-primary {color:#fff;background-color:#007bff;border-color:#007bff;}
.btn-outline-primary {color:#007bff;background-color:transparent;background-image:none;border-color:#007bff;}
.btn-outline-primary:hover {color:#fff;background-color:#007bff;border-color:#007bff;}
.btn-right { min-height: 31px; position: relative; }
.btn-right .btn-primary { position: absolute; right: 0px; top: 0px; }
.btn-right .comment_face_panel { width: 100%; height: 31px; }
.btn-right .comment_face_panel .icon-face { height: 31px; padding-left: 12px; position: relative; }
.btn-right .comment_face_panel .icon-face .icon-emoji-smile { font-size: 18px; cursor: pointer; }
.btn-right .comment_face_panel .icon-face:hover .icon-emoji-smile { color: #007bff; }
.btn-right .comment_face_panel .icon-face .emoji-list { display: none; width: 100%; height: auto; background-color: #FFFFFF; border: 1px solid #eeeeee; border-radius: 4px 4px; position: absolute; left: 0px; top: 33px; z-index: 9;}
.btn-right .comment_face_panel .icon-face .emoji-list:after {display: block;content: ""; width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #eeeeee; position: absolute; left: 12px; top: -10px; }
.btn-right .comment_face_panel .icon-face .emoji-list:before {display: block;content: ""; width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #FFFFFF; position: absolute; left: 12px; top: -9px; z-index: 2; }
.btn-right .comment_face_panel .icon-face .emoji-list .emoji {display:inline-block;width:18px;height:18px;font-size:18px;margin:6px 4px;cursor:pointer;}
.btn-right .comment_face_panel .icon-face:hover .emoji-list { display: block; }
.publish:hover { opacity: 0.7; }
.reply-parent cite i { font-size: 12px; color: #999999; margin-left: 3px; margin-right: 10px; }
.commnet-tips { color: #ff5351; font-size: 10px; margin-left: 20px;}


.article-donate {padding:20px 0;text-align:center;}
.article-donate a {min-width:120px;-webkit-border-radius:3px;-webkit-background-clip:padding-box;-moz-border-radius:3px;-moz-background-clip:padding;border-radius:3px;background-clip:padding-box;padding:10px 16px;}
.btn-success {color:#fff;background-color:#18bc9c;border-color:#18bc9c;}
.isshang {display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; border: 1px solid #007bff; border-radius: 50% 50%; font-style: normal; }
.isshang:before { display: block; content: "赏"; font-size: 10px; }
.btn-outline-primary:hover .isshang { border-color: #FFFFFF; color: #FFFFFF; }

.shang {display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; border: 1px solid #007bff; border-radius: 50% 50%; font-style: normal; }
.shang:before { display: block; content: "赏"; font-size: 10px; }
.btn-outline-primary:hover .shang { border-color: #FFFFFF; color: #FFFFFF; }

/* 源码列表页样式 */
.sourcecode-list-page {
    display: flex;
    gap: 20px;
}

.sourcecode-list {
    list-style: none;
}

.sourcecode-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sourcecode-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.sourcecode-with-thumbnail {
    display: flex;
    gap: 20px;
}

.sourcecode-thumbnail {
    width: 180px;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.sourcecode-content {
    flex: 1;
}

.sourcecode-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.sourcecode-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.sourcecode-title a:hover {
    color: #007bff;
}

.sourcecode-excerpt {
    color: #666;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.6;
}

.sourcecode-meta {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #999;
    flex-wrap: wrap;
    gap: 15px;
}

.sourcecode-meta span {
    display: flex;
    align-items: center;
}

.sourcecode-meta i {
    margin-right: 5px;
}

/* 源码详情页样式 */
.sourcecode-detail-page {
    display: flex;
    gap: 20px;
}

.sourcecode-detail {
    flex: 3;
    background-color: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.sourcecode-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.sourcecode-detail-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.3;
}

.sourcecode-detail-meta {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
    flex-wrap: wrap;
    gap: 20px;
}

.sourcecode-detail-meta span {
    display: flex;
    align-items: center;
}

.sourcecode-detail-meta i {
    margin-right: 5px;
}

.sourcecode-download-btn {
    padding: 12px 30px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-top: 15px;
}

.sourcecode-download-btn:hover {
    background-color: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.sourcecode-download-btn i {
    margin-right: 8px;
}

.sourcecode-detail-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 30px;
}

.sourcecode-detail-content p {
    margin-bottom: 15px;
}

.sourcecode-detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 15px 0;
}

.sourcecode-detail-content h2 {
    margin: 25px 0 15px;
    font-size: 24px;
    color: #333;
}

.sourcecode-detail-content h3 {
    margin: 20px 0 15px;
    font-size: 20px;
    color: #333;
}

.sourcecode-info-card {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}

.sourcecode-info-card h3 {
    margin-bottom: 15px;
    color: #333;
}

.sourcecode-info-list {
    list-style: none;
}

.sourcecode-info-list li {
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e0e0e0;
}

.sourcecode-info-list li:last-child {
    border-bottom: none;
}

.info-label {
    color: #666;
}

.info-value {
    color: #333;
    font-weight: 500;
}

/* 源码下载页样式 */
.download-page {
    padding: 40px 0;
}

.download-panel {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 30px;
    margin-bottom: 30px;
}

.download-countdown {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 30px;
}

.download-countdown h3 {
    color: #333;
    margin-bottom: 20px;
}

.countdown-timer {
    font-size: 24px;
    font-weight: bold;
    color: #007bff;
    margin: 20px 0;
}

.download-button {
    display: block;
    text-align: center;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 20px;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border: none;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,123,255,0.3);
}

.download-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,123,255,0.4);
    color: white;
}

.direct-download {
    display: none;
}

.direct-download.show {
    display: block;
}

.sourcecode-summary {
    margin-bottom: 30px;
}

.sourcecode-summary h3 {
    margin-bottom: 15px;
    color: #333;
}

.download-instructions {
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}

.download-instructions h3 {
    color: #0056b3;
    margin-bottom: 15px;
}

.download-tips {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}

.download-tips h3 {
    color: #856404;
    margin-bottom: 15px;
}

.download-options {
    margin-bottom: 30px;
}

.download-option {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.download-option:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0,123,255,0.2);
}

.download-option h4 {
    margin-bottom: 10px;
    color: #333;
}

.download-stats {
    display: flex;
    justify-content: space-around;
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 28px;
    font-weight: bold;
    color: #007bff;
}

.stat-label {
    color: #666;
    margin-top: 5px;
}

.report-problem {
    text-align: center;
    margin-top: 30px;
}


/* 登录弹窗 */
.login-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.login-modal.show {
    display: flex;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.login-modal-content {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    width: 90%;
    max-width: 400px;
    position: relative;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.login-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    transition: color 0.3s ease;
}

.login-close:hover {
    color: #333;
}

.login-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

/* 登录方式切换样式 */
.login-tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px;
}

.login-tab {
    flex: 1;
    padding: 10px 0;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    transition: all 0.3s ease;
    position: relative;
}

.login-tab.active {
    color: #007bff;
    font-weight: 500;
}

.login-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background-color: #007bff;
}

.login-tab-content {
    display: none;
}

.login-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.login-form {
    margin-top: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 500;
}

.form-input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    outline: none;
}

.form-input:focus {
    border-color: #007bff;
}

.login-submit {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.login-submit:hover {
    background-color: #0056b3;
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
}

.login-options a {
    color: #007bff;
    text-decoration: none;
}

.login-options a:hover {
    text-decoration: underline;
}

/* 二维码登录样式 */
.qrcode-login {
    text-align: center;
}

.qrcode-container {
    display: inline-block;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fff;
    margin-bottom: 20px;
}

.qrcode-image {
    width: 200px;
    height: 200px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #999;
}

.qrcode-tips {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
}

.refresh-qrcode {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 16px;
    background-color: #f5f5f5;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.refresh-qrcode:hover {
    background-color: #e0e0e0;
    color: #333;
}

.social-login {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.social-login-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

.social-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.social-btn:hover {
    transform: translateY(-3px);
}

.social-wechat {
    background-color: #07C160;
}

.social-weibo {
    background-color: #E6162D;
}

.social-github {
    background-color: #333;
}

/* 底部样式 */
.footer {
    background-color: #333;
    color: #fff;
    padding: 40px 0 20px;
    margin-top: 50px;
}

.footer-content {
    max-width: 1580px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;
}

.footer-column {
    flex: 1;
    min-width: 250px;
}

.footer-column h3 {
    font-size: 18px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #555;
}

.footer-column p {
    color: #ccc;
    line-height: 1.6;
    font-size: 14px;
}

.footer-column ul {
    list-style: none;
}

.footer-column li {
    margin-bottom: 10px;
}

.footer-column a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.footer-column a:hover {
    color: #007bff;
}

.footer-column i {
    margin-right: 8px;
}

.footer-bottom {
    background-color: #222;
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid #444;
}

.footer-bottom p {
    margin: 5px 0;
    font-size: 14px;
    color: #999;
}

.footer-bottom a {
    color: #999;
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.footer-bottom a:hover {
    color: #007bff;
}

/* 回到顶部按钮 */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,123,255,0.3);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    z-index: 999;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: #0056b3;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,123,255,0.4);
    color: white;
}

/* 标签云 */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.tag-item {
    padding: 6px 15px;
    background-color: #f5f5f5;
    border-radius: 15px;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
}

.tag-item:hover {
    background-color: #007bff;
    color: white;
}

.tag-item.hot {
    background-color: #ffeaa7;
    color: #856404;
}

.tag-item.hot:hover {
    background-color: #ffd700;
    color: #333;
}

/* 推荐作者 */
.author-list {
    list-style: none;
}

.author-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.3s ease;
}

.author-pages .author-list .author-item { font-size: 14px;}

.author-item .fa { margin-right: 8px; }
.author-item.zan .fa { color: #E05454;}
.author-item.comment .fa { color: #457AD6;}
.author-item.bookmark .fa { color: #F2B52E;}
.author-item.star .fa { color: #FF421A;}
.author-item a {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.author-item .number { color: #fc5531;}

.author-item:hover {
    background-color: #f9f9f9;
}

.author-item:last-child {
    border-bottom: none;
}

.author-avatar-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.author-info-small {
    flex: 1;
}

.author-name-small {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 2px;
}

.author-stats-small {
	font-size: 12px;
	color: #999;
}

.author-stats {
    display: flex;
	height: 76px;
	margin-top: 16px;
	border-radius: 2px;
	background: #fafafa;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.author-stats .author-stats-numer {
	flex: 1;
	text-align: center;
}
.author-stats .author-stats-numer span {
	display: block;
	color: #222226;
	font-size: 15px;
	font-weight: 500 !important;
}

.author-stats .author-stats-numer .number-format {
	margin-top: 4px;
	color: #555666;
	font-size: 13px;
	font-weight: 400;
}

.profile-intro-name-boxOpration {
	padding: 8px 16px 10px 16px;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-top: 8px;
}

.profile-intro-name-boxOpration button,.profile-intro-name-boxOpration a {
	padding: 7px 15px;
	width: 120px;
	font-size: 12px;
	color: white;
	border-radius: 18px;
	text-align: center;
	border: none;
	cursor: pointer;
	border: 1px solid #007bff;
 }
 
.profile-intro-name-boxOpration .whisper-btn {
	border: 1px solid #ccccd8;
	color: #555666;
}
.profile-intro-name-boxOpration .whisper-btn:hover {
	border: 1px solid #555666;
}


/* 动画效果 */
.fade-in {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* 响应式设计 */


@media (max-width: 1580px) {
	.container {
	    max-width: 1440px;
	}
}


@media (max-width: 1440px) {
	.container {
	    max-width: 1360px;
	}
}

@media (max-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .home-page,
    .article-list-page,
    .article-detail-page,
    .sourcecode-list-page,
    .sourcecode-detail-page {
        flex-direction: column;
    }
    
    .right-section {
        order: 1;
    }
}

@media (max-width: 992px) {
    .container {
		padding: 0px 0px;
        max-width: 960px;
    }
    
	.navbar-logo { font-size: 18px;}
	
    .navbar {
        /* flex-direction: column; */
        padding: 8px 10px;
    }
	/* .navbar-nav { position: relative; } */
    
    .nav-links {
		display: none;
        margin-top: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
	
    
    .nav-links li {
        margin: 5px 15px;
    }
    
    .search-form {
        margin-top: 15px;
        width: 100%;
        max-width: 400px;
    }
    
    .search-input {
        flex: 1;
		width: 100%;
    }
	.search-input:focus { width: 100% !important;}
    
    .article-with-thumbnail,
    .sourcecode-with-thumbnail {
        flex-direction: column;
    }
    
    .article-thumbnail,
    .sourcecode-thumbnail {
        width: 100%;
        height: 200px;
    }
	
	.search-form,.login-btn { display: none; }
	
	
	.nav-moble { width: 100vw; height: auto; display: block; padding: 5px 18px; position: absolute; left: 0px; top: 49px; background-color: #FFFFFF; margin-top: 0px; }
	.search-moble { width: 100vw; max-width: 100%; height: auto; display: block; padding: 10px 61px 10px 18px; position: absolute; left: 0px; top: 49px; background-color: #FFFFFF; margin-top: 0px; }
	.search-moble .search-btn { position: absolute; right: 18px;}
	.navbar-icon { display: flex;}
	.navbar-icon i { cursor: pointer;}
	.navbar-icon .navbar-th-list,.navbar-icon .navbar-search  { margin-right: 15px;}
	.active { color: #007bff;}
	.nav-links li { margin: 10px 0px;}
	.footer { margin: 0px 0px; padding: 0px 0px;}
	.footer-content { display: none; }
	.right-section {flex: 1;}
	.dropdown { display: none;}
	
}

@media (max-width: 768px) {
    .container {
        max-width: 720px;
        padding: 0 15px;
    }
    
    
    
    .article-detail-title,
    .sourcecode-detail-title {
        font-size: 24px;
    }
    
    .footer-row {
        flex-direction: column;
        gap: 20px;
    }
    
    .footer-column {
        min-width: auto;
    }
    
    .article-actions {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .action-btn {
        flex: 1;
        min-width: 120px;
    }
    
    .author-info {
        flex-direction: column;
        text-align: center;
    }
    
    .author-avatar {
        margin-right: 0;
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .container {
        max-width: 540px;
        padding: 0 10px;
    }
    
    .navbar-logo {
        font-size: 20px;
    }
    
    .nav-links {
        flex-direction: column;
        align-items: center;
    }
	
    
    .article-detail-title,
    .sourcecode-detail-title {
        font-size: 20px;
    }
    
    .article-detail,
    .sourcecode-detail {
        padding: 20px;
    }
    
    .article-meta,
    .sourcecode-meta {
        /* flex-direction: column; */
        align-items: flex-start;
        gap: 5px;
    }
    
    .back-to-top {
        width: 40px;
        height: 40px;
        bottom: 20px;
        right: 20px;
        font-size: 16px;
    }
    
    .login-modal-content {
        margin: 20px;
        width: calc(100% - 40px);
    }
}

/* 打印样式 */
@media print {
    .navbar,
    .sidebar,
    .article-actions,
    .comments-section,
    .footer,
    .ad-section,
    .back-to-top,
    .pagination {
        display: none !important;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
    
    .article-detail,
    .sourcecode-detail {
        box-shadow: none;
        padding: 0;
    }
    
    a {
        text-decoration: none;
        color: #000;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    body {
        background-color: #fff;
        color: #000;
    }
    
    .card {
        border: 2px solid #000;
    }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 焦点样式 */
/* button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
} */

.search-input:focus{ width: 300px;}

/* 隐藏滚动条但允许滚动（webkit浏览器） */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}


        .chat-container {display:flex;width:100%;height:100%;background-color:#fff;margin:20px auto auto auto;}
@media (max-width:768px) {.chat-container {height:calc(100vh - 70px);}
.sidebar {width:100%;position:absolute;left:0;top:0;z-index:10;height:100%;transition:transform 0.3s ease;}
.chat-content {width:100%;transform:translateX(0);position:relative;z-index:5;transition:transform 0.3s ease;}
.chat-mode .sidebar {transform:translateX(-100%);}
.chat-mode .chat-content {transform:translateX(0);}
.chat-header .back-button {display:flex;margin-right:12px;}
.chat-avatar img {width:40px;height:40px;}
.user-avatar {width:44px;height:44px;font-size:18px;}
.messages-container {padding:12px;}
.message-input-area {padding:12px;}
.message-input {min-height:36px;font-size:15px;}
.send-button {padding:5px 16px;font-size:14px;}
;}
@media (min-width:769px) {
	.chat-container {border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.1); max-width: 1360px; height: calc(100vh - 100px);}
	.sidebar {width:320px;}
;}
.sidebar {border-right:1px solid #e0e0e0;display:flex;flex-direction:column;}
.user-header {padding:16px;display:flex;align-items:center;border-bottom:1px solid #e0e0e0;}
.user-avatar {width:48px;height:48px;border-radius:50%;background-color:#1890ff;display:flex;align-items:center;justify-content:center;color:white;font-size:20px;margin-right:12px;}
.user-avatar img {width:48px;height:48px;border-radius:50%;object-fit:cover;}
.user-info h3 {font-size:16px;font-weight:500;color:#333;}
.header-actions {margin-left:auto;display:flex;gap:16px;color:#999;}
.header-actions i {font-size:18px;cursor:pointer;}
.chat-list {flex:1;overflow-y:auto;padding:8px 0;-ms-overflow-style:none;scrollbar-width:none;}
.chat-list::-webkit-scrollbar {display:none;}
.chat-item {padding:12px 16px;display:flex;align-items:center;cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color 0.2s;}
.chat-item:hover {background-color:#f5f5f5;}
.chat-item.active {background-color:#e6f7ff;}
.chat-avatar {position:relative;margin-right:12px;}
.chat-avatar img {width:44px;height:44px;border-radius:50%;object-fit:cover;}
.status-indicator {position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50%;border:2px solid white;}
.status-online {background-color:#52c41a;}
.chat-info {flex:1;min-width:0;}
.chat-name {display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.chat-name h4 {font-size:15px;font-weight:500;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-time {font-size:12px;color:#999;}
.chat-message {font-size:13px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-message img { display: inline-block; width: 16px; height: 16px; margin: 0px 3px;}
.chat-content {flex:1;display:flex;flex-direction:column;min-width:0;}
.chat-header {padding:16px 20px;display:flex;align-items:center;border-bottom:1px solid #e0e0e0;}
.chat-header .back-button {display:none;font-size:18px;color:#333;cursor:pointer;}
.current-chat-info {flex:1;}
.current-chat-info h3 {font-size:16px;font-weight:500;color:#333;margin-bottom:4px;}
.status-text {font-size:13px;color:#52c41a;}
.status-text-online {font-size:13px;color:#999;}
.chat-actions {display:flex;gap:20px;color:#999;}
.chat-actions i {font-size:18px;cursor:pointer;}
.messages-container {flex:1;overflow-y:auto;padding:20px;background-color:#f5f5f5;}
.message-input-area {padding:16px 20px;border-top:1px solid #e0e0e0;background-color:white;}
.input-actions {display:flex;gap:16px;margin-bottom:12px;color:#999;}
.input-actions i {font-size:18px;cursor:pointer;}
.input-actions i:hover {color:#1890ff;}
.message-input-wrapper {position:relative;}
.message-input {width:100%;padding:10px 16px;border:1px solid #e0e0e0;border-radius:20px;font-size:14px;resize:none;min-height:40px;max-height:120px;outline:none;}
.message-input:focus {border-color:#1890ff;}
.message-input img { width: 18px; height: 18px; margin: 0px 3px;}
.input-bottom {display:flex;justify-content:space-between;align-items:center;margin-top:8px;}
.char-count {font-size:12px;color:#999;}
.send-button {padding:6px 20px;background-color:#1890ff;color:white;border:none;border-radius:16px;font-size:14px;cursor:pointer;transition:background-color 0.2s;}
.send-button:hover {background-color:#40a9ff;}
.send-button:disabled {background-color:#d9d9d9;cursor:not-allowed;}
.messages-container::-webkit-scrollbar,.message-input::-webkit-scrollbar {width:6px;height:6px;}
.messages-container::-webkit-scrollbar-track,.message-input::-webkit-scrollbar-track {background:transparent;}
.messages-container::-webkit-scrollbar-thumb,.message-input::-webkit-scrollbar-thumb {background:#ccc;border-radius:3px;}
.messages-container::-webkit-scrollbar-thumb:hover,.message-input::-webkit-scrollbar-thumb:hover {background:#999;}
.official-badge {display:inline-block;padding:2px 6px;background-color:#e6f7ff;color:#1890ff;border-radius:2px;font-size:10px;margin-left:4px;vertical-align:middle;}
.following-badge {display:inline-block;padding:2px 6px;background-color:#f6ffed;color:#52c41a;border-radius:2px;font-size:10px;margin-left:4px;vertical-align:middle;}
.empty-chat {display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#999;}
.empty-chat i {font-size:48px;margin-bottom:16px;opacity:0.5;}
.empty-chat p {font-size:14px;}

.message {display:flex;margin-bottom:16px;animation:fadeIn 0.3s ease;}
@keyframes fadeIn {from {opacity:0;transform:translateY(10px);}
to {opacity:1;transform:translateY(0);}
;}
.message.other {flex-direction:row;}
.message.other .message-avatar {width:36px;border-radius:50%;margin:0 8px;flex-shrink:0; position: relative;}
.message.other .message-avatar  img {display: block; width:36px;height:36px;object-fit:cover; position: absolute; bottom: 0px; border-radius: 50% 50%;}
.message.self {flex-direction:row-reverse;}
.message.self .message-avatar {width:36px;border-radius:50%;margin:0 8px;flex-shrink:0; position: relative;}
.message.self .message-avatar img {display: block; width:36px;height:36px;object-fit:cover; position: absolute; bottom: 0px; border-radius: 50% 50%;}
.message-content {max-width:70%;display:flex;flex-direction:column;}
.message.other .message-content {align-items:flex-start;}
.message.self .message-content {align-items:flex-end;}
.message-bubble {padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.5;word-wrap:break-word;word-break:break-word; position: relative;}
.message-bubble .emoji { display: inline-block; width: 16px; height: 16px; margin: 0px 3px; }
.message-bubble .message-info {display:flex; position: absolute; left: -30px; top: 0; bottom: 0; margin: auto auto; align-items: center;}
.message-bubble .message-info .message-loading { width: 24px; height: 24px;}
.message.other .message-bubble {background-color:white;border-bottom-left-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,0.1);}
.message .message-bubble {max-width: 100%; background-color:#1890ff;color:white;border-bottom-right-radius:6px;position: relative;}
.message .message-bubble .img-message { width: auto; max-width: 100%;}
.message.other .message-bubble::after {content:'';display:block;width:0;height:0;border-right:15px solid white;border-top:10px solid transparent;border-bottom:5px solid transparent;position:absolute; bottom: 0px;left:-8px;border-bottom-left-radius: 110%;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);}
.message.self .message-bubble::after {content:'';display:block;width:0;height:0;border-left:15px solid #1890ff;border-top:10px solid transparent;border-bottom:5px solid transparent;position:absolute; bottom: 0px;right:-8px;border-bottom-right-radius: 110%;}
.message-time {font-size:11px;color:#999;margin-top:4px;padding:0 6px;}
.message.system {justify-content:center;margin:16px 0;}
.message.system .message-bubble {background-color:rgba(0,0,0,0.05);color:#999;padding:4px 12px;border-radius:10px;font-size:12px;}
.message.official {flex-direction:row;}
.message.official .message-bubble {background-color:#f0f9ff;color:#1890ff;border:1px solid #bae7ff;}
.expired-notice {color:#ff4d4f;font-size:12px;margin-top:4px;margin-bottom:8px;}
.warning-text {font-size:12px;color:#faad14;margin-top:4px;}
.emoji-panel {position:absolute;bottom:100%;left:0;/* width:320px; */max-height:240px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,0.1);margin-bottom:1px;overflow-y:auto;display:none;z-index:100;}
.emoji-panel.show {display:block;}
.emoji-grid {display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:8px;}
.emoji-item {display:flex;align-items:center;justify-content:center;width:36px;height:36px;cursor:pointer;border-radius:4px;transition:background-color 0.2s;}
.emoji-item:hover {background-color:#f0f0f0;}
.emoji-item img {width:28px;height:28px;object-fit:contain;}
.message-emoji {width:24px;height:24px;vertical-align:middle;margin:0 2px;}
.message-input-area {position:relative;}
#file-images-label { cursor: pointer;}
#file-images-label:hover { color: #1890ff;}
@media (max-width:768px) {.emoji-panel {width:calc(100vw - 40px);max-height:200px;}
.emoji-grid {grid-template-columns:repeat(6,1fr);gap:3px;padding:6px;}
.emoji-item {width:32px;height:32px;}
.emoji-item img {width:24px;height:24px;}
;}


.receive_status_offline,.receive_status_launch {border:none !important; background-color: transparent !important;}
.layui-layer-dialog.receive_status_offline .layui-layer-content {padding: 0px 0px; color: #EF0000; font-weight: bolder; text-align: center;}
.layui-layer-dialog.receive_status_launch .layui-layer-content {padding: 0px 0px; color: #52c41a; font-weight: bolder; text-align: center;}




/* 源码幻灯片样式 */
.sourcecode-slideshow {
    width: 100%;
    margin: 30px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.slideshow-container {
    position: relative;
    width: 100%;
    height: 400px;
    background-color: #f5f5f5;
}

.slideshow-track {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-item.active {
    opacity: 1;
    position: relative;
}

.slideshow-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.slide-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

.slideshow-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.indicator.active {
    background-color: white;
    transform: scale(1.2);
}

.slideshow-counter {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 10;
}

/* 图片预览模态框 */
.preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.preview-modal.active {
    display: flex;
}

.preview-content {
    /* position: relative; */
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.preview-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.preview-controls {
    display: flex;
    gap: 20px;
    margin-top: 20px;
	position: absolute;
	bottom: 0px;
	z-index: 99;
}

.preview-btn {
    padding: 10px 20px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.preview-btn:hover {
    background-color: #555;
}

.close-preview {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background-color: transparent;
    color: white;
    border: none;
    font-size: 30px;
    cursor: pointer;
    transition: color 0.3s ease;
	z-index: 99;
}

.close-preview:hover {
    color: #ccc;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .slideshow-container {
        height: 300px;
    }
    
    .slide-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .preview-controls {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .close-preview {
        right: 0;
    }
}
.related-sourcecodes {
    /* margin-top: 40px; */
    padding-top: 30px;
    /* border-top: 1px solid #e0e0e0; */
}

.related-title {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.related-title::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, #007bff, transparent);
    margin-left: 15px;
}

/* .related-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
} */

.related-item {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.related-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.related-item a {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.related-img {
    width: 100%;
    height: 160px;
    overflow: hidden;
    position: relative;
}

.related-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.related-item:hover .related-img img {
    transform: scale(1.05);
}

.related-content {
    padding: 15px;
}

.related-sourcecode-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.4;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.related-item:hover .related-sourcecode-title {
    color: #007bff;
}

.related-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #999;
}

.related-meta span {
    display: flex;
    align-items: center;
}

.related-meta i {
    margin-right: 5px;
    color: #007bff;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .related-list {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
    }
    
    .related-img {
        height: 120px;
    }
    
    .related-sourcecode-title {
        font-size: 15px;
    }
}

/* 焦点样式 */
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* 隐藏滚动条但允许滚动（webkit浏览器） */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}


        
        /* 下载地址模块样式 */
        .download-links-container {
            padding: 15px 0px;
        }
        
        .download-item {
            display: flex;
            align-items: center;
            padding: 12px;
            margin-bottom: 10px;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #007bff;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .download-item:last-child {
            margin-bottom: 0;
        }
        
        .download-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .download-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-right: 12px;
            flex-shrink: 0;
        }
        
        .download-details-info {
            flex: 1;
        }
        
        .download-name {
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
            font-size: 14px;
        }
        
        .download-size,
        .download-code {
            font-size: 12px;
            color: #666;
        }
        
        .download-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #007bff;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }
        
        .download-btn:hover {
            background: #0056b3;
            transform: scale(1.1);
        }
        
        /* 各个网盘独特样式 */
        .download-item.direct-download {
            border-left-color: #28a745;
        }
        
        .direct-download .download-icon {
            background: #28a745;
            color: white;
        }
        
        .direct-download .download-btn {
            background: #28a745;
        }
        
        .direct-download .download-btn:hover {
            background: #218838;
        }
        
        .download-item.baidu-pan {
            border-left-color: #1890ff;
        }
        
        .baidu-pan .download-icon {
            background: #1890ff;
            color: white;
        }
        
        .baidu-pan .download-btn {
            background: #1890ff;
        }
        
        .baidu-pan .download-btn:hover {
            background: #096dd9;
        }
        
        .download-item.lanzou-pan {
            border-left-color: #ff6b6b;
        }
        
        .lanzou-pan .download-icon {
            background: #ff6b6b;
            color: white;
        }
        
        .lanzou-pan .download-btn {
            background: #ff6b6b;
        }
        
        .lanzou-pan .download-btn:hover {
            background: #ee5a5a;
        }
        
        .download-item.kuaike-pan {
            border-left-color: #ff9800;
        }
        
        .kuaike-pan .download-icon {
            background: #ff9800;
            color: white;
        }
        
        .kuaike-pan .download-btn {
            background: #ff9800;
        }
        
        .kuaike-pan .download-btn:hover {
            background: #e68900;
        }
        
        .download-item.aliyun-pan {
            border-left-color: #00b42a;
        }
        
        .aliyun-pan .download-icon {
            background: #00b42a;
            color: white;
        }
        
        .aliyun-pan .download-btn {
            background: #00b42a;
        }
        
        .aliyun-pan .download-btn:hover {
            background: #009a25;
        }
        
        .download-item.yiyun-pan {
            border-left-color: #722ed1;
        }
        
        .yiyun-pan .download-icon {
            background: #722ed1;
            color: white;
        }
        
        .yiyun-pan .download-btn {
            background: #722ed1;
        }
        
        .yiyun-pan .download-btn:hover {
            background: #6225cc;
        }
        
        .download-item.weiyun-pan {
            border-left-color: #07c160;
        }
        
        .weiyun-pan .download-icon {
            background: #07c160;
            color: white;
        }
        
        .weiyun-pan .download-btn {
            background: #07c160;
        }
        
        .weiyun-pan .download-btn:hover {
            background: #06ad56;
        }
        
        .download-item.xunlei-pan {
            border-left-color: #ff4500;
        }
        
        .xunlei-pan .download-icon {
            background: #ff4500;
            color: white;
        }
        
        .xunlei-pan .download-btn {
            background: #ff4500;
        }
        
        .xunlei-pan .download-btn:hover {
            background: #e34000;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .download-item {
                padding: 10px;
            }
            
            .download-icon {
                width: 36px;
                height: 36px;
                font-size: 16px;
            }
            
            .download-name {
                font-size: 13px;
            }
            
            .download-size,
            .download-code {
                font-size: 11px;
            }
        }
/* 下载跳转页面样式 */
        .download-redirect-container {
            max-width: 960px;
            margin: 30px auto;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .download-header {
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .download-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .download-description {
            font-size: 16px;
            opacity: 0.9;
        }

        .download-section {
            padding: 40px;
            transition: all 0.3s ease;
        }

        .hidden {
            display: none;
        }

        /* 开放下载样式 */
        .countdown-container {
            text-align: center;
            max-width: 500px;
            margin: 0 auto;
        }

        .countdown-circle {
            position: relative;
            width: 180px;
            height: 180px;
            margin: 0 auto 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .countdown-circle::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 8px solid #f0f0f0;
            border-top: 8px solid #007bff;
            border-radius: 50%;
            animation: spin 3s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .countdown-number {
            font-size: 64px;
            font-weight: bold;
            color: #007bff;
            line-height: 1;
        }

        .countdown-text {
            font-size: 18px;
            color: #666;
            margin-top: 10px;
        }

        .download-hint {
            font-size: 16px;
            color: #666;
            margin-bottom: 30px;
        }

        /* 登录下载样式 */
        .login-prompt {
            text-align: center;
            max-width: 500px;
            margin: 0 auto;
        }

        .login-prompt .fa-user-circle-o {
            color: #007bff;
            margin-bottom: 20px;
        }

        .login-prompt h3 {
            font-size: 24px;
            color: #333;
            margin-bottom: 15px;
        }

        .login-prompt p {
            font-size: 16px;
            color: #666;
            margin-bottom: 30px;
        }

        /* 观看广告样式 */
        .ad-qrcode-section {
            text-align: center;
            max-width: 600px;
            margin: 0 auto;
        }

        .ad-qrcode-section h3 {
            font-size: 24px;
            color: #333;
            margin-bottom: 30px;
        }

        .qrcode-container {
            margin-bottom: 30px;
        }

        .qrcode-image {
            width: 200px;
            height: 200px;
            border: 1px solid #ddd;
            padding: 10px;
            background: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
        }

        .qrcode-hint {
            font-size: 16px;
            color: #666;
        }

        /* 点击广告样式 */
        .downloadad-banner-section {
            text-align: center;
            max-width: 700px;
            margin: 0 auto;
        }

        .downloadad-banner-section h3 {
            font-size: 24px;
            color: #333;
            margin-bottom: 30px;
        }

        .downloadad-banner {
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            transition: box-shadow 0.3s ease;
        }

        .downloadad-banner:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        }

        .downloadad-link {
            display: block;
            text-decoration: none;
        }

        .downloadad-image {
            width: 100%;
            height: auto;
            max-height: 300px;
            display: block;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .downloadad-image:hover {
            transform: scale(1.02);
        }

        .downloadad-hint {
			color: #007bff;
            font-size: 16px;
            margin-top: 15px;
        }

        /* 返回按钮区域 */
        .back-section {
            text-align: center;
            padding: 20px;
            background: #f8f9fa;
            border-top: 1px solid #eee;
        }

        .back-btn {
            display: inline-flex;
            align-items: center;
            padding: 10px 20px;
            background: #fff;
            color: #666;
            text-decoration: none;
            border: 1px solid #ddd;
            border-radius: 4px;
            transition: all 0.3s ease;
            font-size: 14px;
        }

        .back-btn:hover {
            background: #007bff;
            color: white;
            border-color: #007bff;
        }

        /* 登录弹窗样式 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            position: relative;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            width: 100%;
            max-width: 400px;
            overflow: hidden;
            animation: modalSlide 0.3s ease-out;
        }

        @keyframes modalSlide {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: #007bff;
            color: white;
        }

        .modal-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
        }

        .close-btn {
            background: none;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background 0.3s ease;
        }

        .close-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .modal-body {
            padding: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: border 0.3s ease;
        }

        .form-group input:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
        }

        /* 按钮样式 */
        .primary-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 30px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            min-width: 150px;
        }
        
        /* 下载信息区域样式 */
        .download-info {
            margin-top: 30px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e9ecef;
            animation: fadeIn 0.5s ease-in;
        }
        
        .download-details h4 {
            margin-bottom: 15px;
            color: #333;
            font-size: 18px;
        }
        
        .link-container,
        .password-container {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            background-color: #fff;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .download-url {
            flex: 1;
            padding: 0px 15px;
            color: #007bff;
            text-decoration: none;
            word-break: break-all;
            font-size: 14px;
			height: 40px;
			line-height: 40px;
        }
        
        .download-url:hover {
            color: #0056b3;
            text-decoration: underline;
        }
        
        .download-password {
            flex: 1;
            padding: 0px 15px;
            font-size: 16px;
            font-weight: 500;
            color: #333;
            user-select: all;
			text-align: left;
        }
        
        .copy-btn {
            padding: 10px 15px;
            background-color: #28a745;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        
        .copy-btn:hover {
            background-color: #218838;
        }
        
        .copy-btn.copied {
            background-color: #17a2b8;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .primary-btn:hover {
            background: #0056b3;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
        }

        .primary-btn:active {
            transform: translateY(0);
        }

        .primary-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .download-redirect-container {
                margin: 15px;
            }

            .download-header {
                padding: 20px;
            }

            .download-title {
                font-size: 16px;
            }

            .download-section {
                padding: 30px 20px;
            }

            .countdown-circle {
                width: 150px;
                height: 150px;
            }

            .countdown-number {
                font-size: 48px;
            }

            .modal-content {
                margin: 20px;
            }
        }

        @media (max-width: 480px) {
            .download-section {
                padding: 20px;
            }

            .countdown-circle {
                width: 120px;
                height: 120px;
            }

            .countdown-number {
                font-size: 36px;
            }

            .countdown-text {
                font-size: 16px;
            }

            .primary-btn {
                padding: 10px 20px;
                font-size: 14px;
                min-width: 120px;
            }
        }
		
/*作者主页*/
.user-profile-head {
    background-repeat: no-repeat;
    background-position: top;
    background-size: 1920px 100px;
}
.user-profile-head-banner {
	padding-top: 16px;
	width: 1320px;
	margin: auto;
	height: 100px;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
}

.user-profile-head-info {
	padding-left: 16px;
	padding-right: 24px;
	background: #fff;
	margin: 0 auto;
	border-radius: 2px;
}
.user-profile-head-info-t {
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: PingFang SC, Hiragino Sans GB, Arial, Microsoft YaHei, Verdana, Roboto, Noto, Helvetica Neue, sans-serif;
}
.user-profile-head-info-l {
	display: flex ;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}
.user-profile-head-info-ll {
	position: relative;
	width: 102px;
	height: 90px;
}
.user-profile-head-info-ll .user-profile-avatar {
	position: absolute;
	top: -12px;
	width: 102px;
	height: 102px;
	border: 4px solid #f0f0f2;
	border-radius: 50%;
	background: #fff;
}
.user-profile-head-info-ll .user-profile-avatar img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
}
.user-profile-head-info-rr {
	-webkit-box-flex: 1;
	flex: 1;
	margin-left: 16px;
}
.user-profile-head-info-rr .user-profile-head-info-r-t {
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-top: 16px;
}
.user-profile-head-info-rr .user-profile-head-info-r-t .user-profile-head-name {
	color: #222226;
	font-size: 22px;
	font-weight: 500;
	line-height: 24px;
	display: -webkit-box;
	display: -ms-flexbox;
	word-break: break-all;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.user-profile-head-info-rr .user-profile-head-info-r-t .person-code-age {
	height: 16px;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border-radius: 8px;
	margin-left: 4px;
	margin-top: 4px;
	-webkit-box-flex: inherit;
	-ms-flex: inherit;
	flex: inherit;
	background-color: #EBCDFF;
	color: #622BD0;
}

.user-profile-head-info-rr .user-profile-head-info-r-t .person-code-age img {
	width: 22px;
	height: 22px;
	display: block;
}
.user-profile-head-info-rr .user-profile-head-info-r-t .person-code-age .code-age {
	padding: 0 6px 0 4px;
	font-size: 12px;
	display: block;
	height: 16px;
	line-height: 16px;
	text-align: center;
}
.user-profile-head-info-r {
	align-self: flex-start;
	margin-left: auto;
}
.user-profile-head-info-r .user-profile-operate-btn {
	position: relative;
	font-size: 0;
	float: right;
	display: flex
	;
}
.user-profile-head-info-r .user-profile-operate-btn .user-profile-black-btn {
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	font-size: 14px;
	width: 96px;
	text-align: center;
	height: 32px;
	border-radius: 20px;
	margin-left: 16px;
	border: 1px solid #ccccd8;
	color: #555666;
	text-decoration: none;
}
.user-profile-head-info-r .user-profile-operate-btn .user-profile-black-btn .fa {
	font-size: 16px;
	margin-right: 4px;
}
.user-profile-head-info-r-c {
	margin-top: 10px;
}
.user-profile-head-info-ul {
	display: flex ;
	padding: 0;
	margin: 0;
	list-style-type: none;
	list-style: none;
}
.user-profile-head-info-ul .user-profile-head-info-li {
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: relative;
}
.user-profile-head-info-ul .user-profile-head-info-li .el-popover__reference-wrapper {
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.user-profile-head-info-ul .user-profile-head-info-li .el-popover__reference-wrapper .user-profile-statistics-num {
	color: #222226;
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	margin-right: 4px;
}
.user-profile-head-info-ul .user-profile-head-info-li .el-popover__reference-wrapper .user-profile-statistics-name {
	color: #555666;
	font-size: 14px;
	line-height: 16px;
	margin-top: 2px;
	white-space: nowrap;
}
.user-profile-head-info-ul .user-profile-head-info-li .user-profile-statistics-bar {
	width: 1px;
	height: 16px;
	background: #e8e8ed;
	margin: 0 16px;
}
.user-profile-head-info-b {
	padding-left: 118px;
}
.user-profile-head-box {
	display: flex;
}
.user-profile-head-box .user-profile-head-address {
	margin-right: 32px;
	font-size: 14px;
	color: #555666;
	line-height: 20px;
	margin-bottom: 10px;
}
.user-profile-head-box .user-general-info-join-csdn-active {
	margin-right: 32px;
	font-size: 14px;
	color: #555666;
	line-height: 20px;
	margin-bottom: 10px;
}
.user-profile-head-info-b-r {
	color: #555666;
	padding-bottom: 7px;
}
.user-general-info {
	margin-bottom: 10px;
}
.user-profile-wrapper-box {
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: 10px;
}
.user-profile-wrapper-box span {
	font-size: 14px;
	line-height: 22px;
}
.user-profile-wrapper-box .user-profile-title{
	
	color: #555666;
	font-weight: 400;
	word-break: break-all;
}
.author-pages,.newest-pages { display: flex; margin-top: 10px; }
.author-pages .author-left,.newest-pages .newest-left {
	flex: 0 0 340px;
}

.author-pages .author-right,.newest-pages .newest-right {
	flex: 1;
	min-width: 0;
	padding-left: 10px;
}
.author-card,.newest-card {
	background-color: #fff;
	padding: 20px;
	margin-bottom: 20px;
}
.author-content,.newest-content { width: 100%; height: auto; background-color: #FFFFFF;}
.author-tab,.newest-tab,.panel-tab  { width: 100%; height: 47px; border-bottom: 1px solid #f0f0f2; }
.author-tab a,.newest-tab a { display: inline-block; line-height: 47px; padding: 0px 15px; text-decoration: none; font-size: 16px; color: #555666; }
.author-tab .active,.newest-tab .active { position: relative; }
.author-tab .active::after,.newest-tab .active::after { display: block; content: ""; width: 50%; height: 2px; background-color: #222226; position: absolute; left: 0px; bottom: 0px; right: 0px; margin: auto auto;}
.author-filter,.newest-filter { width: 100%; height: 38px; line-height: 38px; padding: 0px 15px; }
.author-filter .author-filter-box,.newest-filter .newest-filter-box { width: 100%; height: 38px; border-bottom: 1px solid #f0f0f2; }
.author-filter .filter,.newest-filter .filter { display: inline-block; font-size: 14px;  padding: 0px 15px; }
.author-filter .filter a,.newest-filter .filter a {color: #555666; text-decoration: none;}
.author-filter .filter .fa,.newest-filter .filter .fa {color: #ccccd8; margin-left: 3px;}
.author-filter .active a,.author-filter .active .fa,.newest-filter .active a,.newest-filter .active .fa  { color: #fc5531!important;}
.content-list { width: 100%; height: auto; }
.content-list ul,.content-list ul li { list-style: none; }
.content-list ul li { width: 100%; height: auto;}
.content-list ul li .content-a {
	display: flex;
	padding: 24px 0;
	margin: 0 24px;
	border-bottom: 1px solid #f0f0f2;
	text-decoration: none;
}
.content-img-box {
	position: relative;
	margin-right: 16px;
}
.content-img-box img {
	width: 178px;
	height: 100px;
	border-radius: 2px;
	-o-object-fit: cover;
	object-fit: cover;
	display: block;
	border: 1px solid #f5f6f7;
}
.content-info {
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 100%;
}
.content-info .titles {
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	font-size: 17px;
	color: #222226;
	font-weight: 400;
}
.content-info .description {
	font-size: 13px;
	color: #555666;
	margin-top: 4px;
	line-height: 19px;
	overflow: hidden;
	white-space: normal;
	word-break: break-word;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-weight: 400;
}
.content-info .stats {
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 400;
}
.content-info .stats .view-num {
	margin-right: 15px;
	color: #555666;
}
.content-info .stats .view-edit {
	margin-left: auto;
	display: none;
	color: #555666;
}
.content-list ul li .content-a:hover .content-info .stats .view-edit  { display: inline-block;}
.empty { padding: 15px 0px; justify-content: center; }
.empty .nodata { font-size: 14px; color: #999aaa; text-align: center;}


.message-section {
					background-color: #fff;
					border-radius: 8px;
					box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
					padding: 30px;
					margin-bottom: 30px;
				}
				
				.message-section h2 {
					color: #333;
					font-size: 24px;
					margin-bottom: 20px;
					padding-bottom: 10px;
					border-bottom: 1px solid #f0f0f0;
				}
				
				.message-section h2 span {
					font-size: 14px;
					color: #ff6b6b;
				}
				.message-form { justify-content: end;}
				
				
				
				.form-group label {
					display: block;
					margin-bottom: 5px;
					font-weight: 500;
					color: #666;
				}
				
				.form-control {
					width: 100%;
					padding: 10px 15px;
					border: 1px solid #d9d9d9;
					border-radius: 4px;
					font-size: 16px;
					transition: all 0.3s;
				}
				
				.form-control:focus {
					border-color: #40a9ff;
					box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
					outline: none;
				}
				
				textarea.form-control {
					min-height: 150px;
					resize: vertical;
				}
				
				.btn {
					display: inline-block;
					padding: 10px 24px;
					border: none;
					border-radius: 4px;
					font-size: 16px;
					cursor: pointer;
					transition: all 0.3s;
					text-align: center;
				}
				
				.btn-primary {
					background-color: #1890ff;
					color: white;
				}
				
				.btn-primary:hover {
					background-color: #40a9ff;
				}
				
				.message-list {
					margin-top: 20px;
				}
				
				.message-item {
					padding: 25px;
					border: 1px solid #e8e8e8;
					border-radius: 8px;
					margin-bottom: 20px;
					background-color: #fff;
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
					transition: all 0.3s ease;
					position: relative;
					overflow: hidden;
				}
				
				.message-item::before {
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					height: 100%;
					width: 4px;
					background: linear-gradient(to bottom, #40a9ff, #1890ff);
				}
				
				.message-item:hover {
					background-color: #fafafa;
					transform: translateY(-2px);
					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
				}
				
				.message-item .message-reply { padding-left: 30px; margin-top: 15px; }
				
				.message-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 15px;
					padding-bottom: 10px;
					border-bottom: 1px dashed #f0f0f0;
				}
				
				.message-author-wrapper {
					display: flex;
					align-items: center;
				}
				
				.message-avatar {
					width: 40px;
					height: 40px;
					border-radius: 50%;
					background-color: #40a9ff;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 12px;
					color: white;
					font-weight: 500;
					font-size: 16px;
				}
				
				.message-avatar img {
					width: 40px;
					height: 40px;
					border-radius: 50%;
				}
				
				.message-author {
					font-weight: 600;
					color: #333;
					font-size: 16px;
				}
				
				.message-time {
					color: #999;
					font-size: 13px;
					font-family: 'Helvetica Neue', Arial, sans-serif;
				}
				
				.message-content {
					color: #666;
					line-height: 1.7;
					font-size: 15px;
					padding-left: 52px;
					position: relative;
				}
				
				.message-content::before {
					content: '"';
					position: absolute;
					left: 0;
					top: 0;
					font-size: 32px;
					color: #f0f0f0;
					font-family: Georgia, serif;
					line-height: 1;
				}
				
				/* 留言数量统计样式 */
				.message-count-badge {
					display: inline-block;
					padding: 2px 8px;
					background-color: #1890ff;
					color: white;
					border-radius: 10px;
					font-size: 12px;
					margin-left: 8px;
				}
				
				.no-messages {
					text-align: center;
					padding: 40px 0;
					color: #999;
				}
				
				.alert {
					padding: 15px;
					margin-bottom: 20px;
					border: 1px solid transparent;
					border-radius: 4px;
				}
				
				.alert-success {
					color: #52c41a;
					background-color: #f6ffed;
					border-color: #b7eb8f;
				}
				
				.alert-error {
					color: #ff4d4f;
					background-color: #fff2f0;
					border-color: #ffccc7;
				}
				
				@media (max-width: 768px) {
					.message-section {
						padding: 20px;
					}
					
					.message-header {
						flex-direction: column;
						gap: 5px;
					}
				}