* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
	line-height: 1.6;
	color: #333;
	background: #f8f9fa;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}

header {
	background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
	color: white;
	padding: 30px 0;
	text-align: center;
}

.logo {
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 10px;
}

.tagline {
	font-size: 16px;
	opacity: 0.8;
}

nav {
	background: white;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	position: sticky;
	top: 0;
	z-index: 100;
}

	nav ul {
		display: flex;
		list-style: none;
		justify-content: center;
		flex-wrap: wrap;
	}

	nav li {
		padding: 15px 25px;
		position: relative;
	}

		nav li:after {
			content: '';
			position: absolute;
			right: 0;
			top: 15px;
			height: 20px;
			width: 1px;
			background: #eee;
		}

		nav li:last-child:after {
			display: none;
		}

	nav a {
		color: #333;
		text-decoration: none;
		font-weight: 500;
		transition: color 0.3s;
	}

		nav a:hover {
			color: #6a11cb;
		}
		nav a.active {
			color: #6a11cb;
		}

.article-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 25px;
	margin: 30px 0;
}

.card {
	background: white;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 3px 10px rgba(0,0,0,0.1);
	transition: transform 0.3s;
}

	.card:hover {
		transform: translateY(-5px);
	}

	.card a{
		text-decoration: none;
	}
.card-img {
	height: 180px;
	background: #ddd;
	overflow: hidden;
	position: relative;
}

	.card-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.card-content {
	padding: 20px;
}

.card h3 {
	margin-bottom: 10px;
	color: #333;
	font-size: 18px;
}

.card p {
	color: #666;
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 15px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-meta {
	display: flex;
	justify-content: space-between;
	color: #999;
	font-size: 12px;
}

footer {
	background: #333;
	color: white;
	text-align: center;
	padding: 30px 0;
	margin-top: 40px;
}
footer a{
	color: #fff;
	text-decoration: none;
}
.footer-links {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

	.footer-links a {
		color: #aaa;
		margin: 0 15px;
		text-decoration: none;
	}

		.footer-links a:hover {
			color: white;
		}

@media (max-width: 768px) {
	nav li {
		padding: 10px 15px;
	}

	.article-grid {
		grid-template-columns: 1fr;
	}
}

/*详情页*/
.article-detail {
	background: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	margin: 15px 0;
}

	.article-detail h1 {
		font-size: 22px;
		color: #333;
		margin-bottom: 12px;
		line-height: 1.4;
	}

.article-meta {
	color: #666;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
	font-size: 12px;
}

	.article-meta span {
		display: inline-block;
		margin-right: 10px;
	}

.article-content {
	line-height: 1.8;
	font-size: 16px;
}

	.article-content p {
		margin-bottom: 15px;
		text-align: justify;
	}

	.article-content img {
		max-width: 100%;
		height: auto;
		display: block;
		margin: 10px auto;
		border-radius: 4px;
	}

.article-tags {
	margin-top: 20px;
	padding-top: 10px;
	border-top: 1px solid #eee;
	font-size: 14px;
}

	.article-tags a {
		display: inline-block;
		padding: 3px 8px;
		background: #f0f0f0;
		color: #666;
		border-radius: 3px;
		margin-right: 5px;
		text-decoration: none;
		font-size: 12px;
	}

/* 平板及以上设备样式 */
@media (min-width: 768px) {
	
	.article-detail {
		padding: 30px;
	}

		.article-detail h1 {
			font-size: 26px;
		}

	.article-meta {
		font-size: 14px;
	}
}

/* PC端样式 */
@media (min-width: 992px) {
	

	.article-detail h1 {
		font-size: 28px;
	}
}

/*分页条*/
.pagination {
	display: flex;
	justify-content: center;
	margin: 40px 0;
}

	.pagination ul {
		display: flex;
		list-style: none;
	}

	.pagination li {
		margin: 0 5px;
	}

	.pagination a, .pagination span {
		display: block;
		padding: 8px 15px;
		background: white;
		border-radius: 4px;
		text-decoration: none;
		color: #333;
		border: 1px solid #ddd;
	}

		.pagination li.active span {
			background: #6a11cb;
			color: white;
			border-color: #6a11cb;
		}

/*404页*/
.error-container {
	padding: 100px 0;
	text-align: center;
}

.error-code {
	font-size: 120px;
	color: #6a11cb;
	font-weight: bold;
	margin-bottom: 20px;
}

.error-message {
	font-size: 24px;
	color: #333;
	margin-bottom: 30px;
}

.home-link {
	display: inline-block;
	padding: 12px 30px;
	background: #6a11cb;
	color: white;
	text-decoration: none;
	border-radius: 5px;
	transition: background 0.3s;
}

	.home-link:hover {
		background: #2575fc;
	}

/*标签页*/
.tag-header {
	margin-bottom: 30px;
	padding-bottom: 15px;
	border-bottom: 1px solid #eee;
}

	.tag-header h1 {
		font-size: 28px;
		margin-top: 10px;
	}
	
@media screen and (max-width: 768px) {
   .logo {
       font-size: 16px;
   }
}
	
.bp-header{max-width:1200px;margin:0 auto;padding:12px 16px;background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);position:relative;overflow:hidden;border-radius:8px;}
.bp-header::before{content:'';position:absolute;top:-30%;right:-10%;width:120px;height:120px;background:rgba(255,255,255,0.1);border-radius:50%;}
.bp-header::after{content:'';position:absolute;bottom:-20%;left:-5%;width:80px;height:80px;background:rgba(147,112,219,0.2);border-radius:50%;}
.bp-main{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1;}
.bp-left{display:flex;align-items:center;gap:10px;}
.bp-ring{width:28px;height:28px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 2s linear infinite;display:flex;align-items:center;justify-content:center;}
@keyframes spin{to{transform:rotate(360deg);}}
.bp-ring::before{content:'';width:16px;height:16px;background:#fff;border-radius:50%;opacity:0.9;}
.bp-title{font-size:16px;font-weight:700;color:#fff;letter-spacing:0.5px;}
.bp-more{display:flex;align-items:center;gap:4px;padding:6px 12px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);border-radius:16px;font-size:12px;color:#fff;text-decoration:none;backdrop-filter:blur(10px);transition:all .3s;font-weight:500;}
.bp-more:active{background:rgba(255,255,255,0.25);}
.bp-arr{width:12px;height:12px;}
@media(min-width:768px){
    .bp-header{padding:14px 24px;border-radius:10px;}
    .bp-left{gap:12px;}
    .bp-ring{width:32px;height:32px;}
    .bp-ring::before{width:18px;height:18px;}
    .bp-title{font-size:18px;}
    .bp-more{padding:8px 16px;font-size:13px;}
    .bp-arr{width:14px;height:14px;}
}
.foer{display: flex;justify-content: space-evenly;font-size: 13px;}

 .pretty-button{background-color:#007bff;color:#fff;border:none;padding:12px 24px;font-size:16px;font-weight:bold;cursor:pointer;outline:none;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:background-color .3s,transform .3s}.pretty-button:hover{background-color:#0056b3;transform:scale(1.05)}.pretty-button:active{transform:scale(.95);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.dbc{width: 100%; margin-bottom: 20px; text-align: center;}
.ydc{width: 100%;padding-top: 30px;padding-bottom: 30px;text-align: center;}