* {
 	padding: 0px;
 	margin: 0px;
 }

 header {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	padding: 10px 10%;
 	background-color: #fff;
 	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 }

 .logo {
 	display: flex;
 	align-items: center;
 }

 .logo img {
 	height: 40px;
 	margin-right: 5px;
 }

 .logo .slogan {
 	font-size: 14px;
 	color: #999;
 }

 nav a {
 	margin-right: 15px;
 	text-decoration: none;
 	color: #333;
 }

 nav a:hover {
 	color: #f60;
 }

 form {
 	display: flex;
 	align-items: center;
 }

 form input {
 	padding: 5px 10px;
 	border: 1px solid #ccc;
 	border-radius: 3px 0 0 3px;
 	outline: none;
 }

 form button {
 	padding: 5px 15px;
 	border: 1px solid #f60;
 	background-color: #f60;
 	color: #fff;
 	border-radius: 0 3px 3px 0;
 	cursor: pointer;
 }

 h1,
 h6 {
 	padding: 0px;
 	margin: 0px;
 }

 .user-auth a {
 	margin-left: 15px;
 	text-decoration: none;
 	color: #333;
 }

 .header-left {
 	display: flex;
 	width: 300px;
 }

 .header-right {
 	flex: 1;
 }

 /* 商品展示区域 - 语义化section标签 */
 section.products {
 	/* margin: 20px 0; */

 	padding: 20px;
 }

 /* 推荐阅读模块 */
 .products {

 	width: 72.6%;
 	margin: 30px auto;
 	padding: 0 20px;
 }

 .products h2 {
 	font-size: 1.6rem;
 	font-weight: bold;
 	color: #222;
 	margin-bottom: 20px;
 	border-left: 5px solid #007bff;
 	padding-left: 10px;
 }

 /* 核心：左右布局容器 */
 .reading-list {
 	display: flex;

 	flex-direction: column;
 	/* align-items: center; */
 	gap: 30px;
 	/* 上下间距 */
 }

 /* 单个推荐项：图片左 + 文字右 */
 .article-link {
 	display: flex;
 	width: 72.6%;
 	/* 开启flex布局 */
 	align-items: flex-start;
 	/* 图片和文字顶部对齐 */
 	text-decoration: none;
 	color: inherit;
 	background-color: #fff;
 	border-radius: 8px;
 	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 	overflow: hidden;
 	transition: box-shadow 0.3s ease;
 }

 .article-link:hover {
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

 /* 图片容器：固定宽度，适配不同内容 */
 .article-img {
 	width: 30%;
 	/* 占40%宽度，可调整 */
 	height: 200px;
 	object-fit: cover;
 	/* 保持图片比例 */
 }

 /* 文字内容容器：占剩余宽度 */
 .article-content {
 	flex: 1;
 	/* 自动填充剩余空间 */
 	padding: 20px;
 	/* 内边距 */
 }

 /* h3标题样式 - 关键：添加hover颜色变化 */
 .article-content h3 {
 	font-size: 1.25rem;
 	margin-bottom: 10px;
 	color: #222;
 	/* 默认颜色 */
 	line-height: 1.3;
 	transition: color 0.3s ease;
 	/* 平滑过渡效果 */
 }

 /* 核心：鼠标悬停时h3变为#f60颜色 */
 .article-link:hover .article-content h3 {
 	color: #f60;
 	/* 橙色 */
 }

 .article-content time {
 	font-size: 0.9rem;
 	color: #777;
 	display: block;
 	margin-bottom: 10px;
 }

 /* 分页组件（可选） */
 .pagination {
 	display: flex;
 	justify-content: center;
 	gap: 8px;
 	margin-top: 30px;
 }

 .pagination a,
 .pagination span {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
 	width: 36px;
 	height: 36px;
 	border-radius: 4px;
 	text-decoration: none;
 	color: #333;
 	font-size: 14px;
 	border: 1px solid #ddd;
 }

 .pagination span.current {
 	background-color: #007bff;
 	color: white;
 	border: none;
 }

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

 /* 响应式适配：小屏幕回归单列 */
 @media (max-width: 768px) {
 	.article-link {
 		flex-direction: column;
 		/* 小屏幕垂直排列 */
 	}

 	.article-img {
 		width: 100%;
 		/* 图片占满宽度 */
 		height: auto;
 	}
 }

 .Description {
 	font-size: 14px;
 	color: #C0C4CC;
 	box-sizing: border-box;
 	margin-top: 10px;
 }