*{ margin: 0; padding: 0; }
a{ color: #000; text-decoration: none;}
body{
	width:1200px; 
	margin: 0 auto;
	display: grid;
	grid-gap:10px;
	grid-template-columns:1fr 304px;
	/* grid-template-columns:auto auto minmax(1000px,auto) 300px; */
	grid-template-rows:150px auto auto 50px;
	grid-template-areas: "navbar navbar" "intro intro" "main sidebar" "footer footer";

	/* grid-template-rows:150px 200px auto auto 50px; */
	/* grid-template-areas: "navbar navbar" "game game" "intro intro" "main sidebar" "footer footer"; */
	/* grid-template-areas: "navbar navbar" "intro intro" "main sidebar" "footer footer"; */
	overflow: visible;
	font-family: "Segoe UI",Segoe,Tahoma,Arial,Verdana,sans-serif;
}

nav{grid-area:navbar; border-bottom-left-radius:10px; border-bottom-right-radius:10px; 
	background:linear-gradient(to right bottom, #fff 10%,#60a5fa);
	
	-webkit-mask: radial-gradient(circle at left 100px, #0000 5px, red 0), 
					radial-gradient(circle at right 100px, #0000 5px, red 0);
	-webkit-mask-size: 51%;/*避免出现缝隙*/
	-webkit-mask-position: 0, 100%; /*一个居左一个居右*/
	-webkit-mask-repeat: no-repeat;

	}
.top {width: 100%;height: 100px;box-sizing: border-box; padding: 0 10px;
	display:grid; grid-template-columns:500px 1fr;}
	.top_motto{ display: flex; align-items: center; }
	.top_motto > span{ margin-left:10px; font-weight: bold; font-size:1.4em; color:#1563f3; text-shadow: 1px 1px 2px rgb(255, 255, 255); }
/* .top {width: 100%;height: 100px;box-sizing: border-box; padding: 0 10px;
	display:flex; align-items: center;justify-content: flex-end;}
	.top_site{ background-color:gray; align-self:start;justify-content:left; }	 */

	.top_site{ display: flex; align-items: center; justify-content:flex-end; }	
	.top_site > a{ display:inline-block; height:30px; line-height:30px;
		margin:0 5px;
		padding:2px 20px; 
		border-radius:20px; background-color:#ecfccb; }	
	.top_site > a:nth-child(2n){ background:#fef9c3; }

.navbar { height: 50px; line-height: 50px;padding: 0 10px;
	border-top:dashed 1px #fff; 
	box-sizing: border-box; color: #fff;
	display: flex;align-items: center;justify-content: space-between; }
.navbar>.navbar_site{ display:none; }	
.navbar>.navbar_left { display: flex;align-items: center;}		
.navbar>.navbar_left>svg { height:30px; padding-right: 20px; }	
.navbar>.navbar_left>a { margin: 0 10px; text-decoration: none;color: #222;font-weight: bold;
	height:30px; line-height:30px; }	
/* .navbar>.navbar_left> a > svg { width:18px; height:18px;}			 */
.navbar>.navbar_right { display: flex; align-items: center; justify-content: center; }
	.navbar .navbar_input{ box-sizing: border-box; height:35px;
			border:solid 1px #818cf8 ; width:500px;
			padding:0 10px; outline: 0; /* 移除默认的焦点轮廓 */
			border-top-left-radius:10px; border-bottom-left-radius:10px; }
	.navbar .navbar_input:hover{ border:solid 1px #6366f1; }
	.navbar .navbar_input:focus{ border:solid 1px #4f46e5; }
	.navbar .navbar_button{ display: flex; align-items: center; height:35px;
			border:none; padding-left:8px; padding-right:10px; background-color:#818cf8; 
			border-top-right-radius:10px; border-bottom-right-radius:10px; color:#fff; }
	#toggle_sidebar{ display:none; }

main{ grid-area:main; min-height:80vh; width:100%; display:grid; gap:10px;}

	.game{ grid-area:game; min-height:200px; position: relative; }

	.intro{ grid-area:intro; min-height:200px; }

	/* 名言推荐 begin */
	.algorithm{ height:320px; padding-left:10px;
		background: linear-gradient( to right bottom, #a7f3d0,#fff);
		display: grid; grid-gap:10px;
		grid-template-columns:auto 80px;
		border-radius:10px;
		/* align-content: center; */
		/* grid-template-rows:1fr; */
	}
	.algorithm_content{ display:grid; /*grid-template-rows:minmax(100px,250px) auto;*/ }
	.algorithm_content::-webkit-scrollbar{ display: none;}			/* 针对 WebKit 浏览器（如 Chrome, Safari） */
		.algorithm_quote{ max-height:250px; align-self: end; padding-left:10px; 
			line-height:30px; overflow-y:auto; -ms-overflow-style: none; scrollbar-width: none; }
			.algorithm_quote > .algorithm_text{ font-size:18px; }
			.algorithm_quote >.algorithm_explain{ width:100%; border-top:dashed 1px #e1deb7; color:#ea580c; margin-top:5px; padding-top:5px; }
			.algorithm_quote >.algorithm_explain:empty{ border-top:none; }
		.algorithm_info{ margin-top:10px; align-self:start; display: flex; justify-content: flex-end; align-items: center; }
			.algorithm_info > .line { width:100px; height:1px; background-color:#e2e8f0; margin-right:10px; }
			.algorithm_info > .avatar { width:40px; height:40px; border-radius:50%; margin-right:10px;}
			.algorithm_info > .alias { margin-right:10px;}
			.algorithm_info > .brief { margin-right:20px;}
	.algorithm_more{ 
			background-color: #fff;
			border-top: solid 1px #e2e8f0;
			border-right: solid 1px #e2e8f0;
			/* display:flex; flex-direction:column; justify-content: space-between; */
			display: grid; grid-template-rows:1fr 1fr 1fr; grid-gap:10px;
			justify-content: flex-end; align-items: center;
			padding:15px 10px 15px 0; 
			border-radius: 55% 10px 10px 55%; } 
		.algorithm_more > svg{ width:40px; height:40px; }
	/* 名言推荐 end */

	/* 介绍=》人物 begin */
	.info{ box-sizing:border-box; min-height:100px; padding:10px; border-radius:10px; 
			display:grid; grid-template-columns:100px auto; 
			background: linear-gradient( to left bottom, #fb923c 4%,#fff); }
	.info > .info_avatar{ height:80px; width:80px; border-radius:5px; }
	.info > .info_content{ overflow-y:auto; -ms-overflow-style: none; scrollbar-width: none; }
	.info > .info_content::-webkit-scrollbar{ display: none;}
	.info .info_name{ font-weight:bold; font-size:1.2em; margin-right:20px; }
	.info .info_word{ display:inline-block; }
	.info .info_brief{ margin-top:10px; padding-top:10px; border-top:dashed 1px #a8a29e; }
	/* 人物介绍 end */

	/* 人物介绍 begin */
	/* .author{ box-sizing:border-box; min-height:100px; padding:10px; border-radius:10px; 
			display:grid; grid-template-columns:100px auto; 
			background: linear-gradient( to left bottom, #fb923c 4%,#fff); }
	.author > .author_avatar{ height:80px; width:80px; border-radius:5px; }
	.author > .author_info{ overflow-y:auto; -ms-overflow-style: none; scrollbar-width: none; }
	.author > .author_info::-webkit-scrollbar{ display: none;}
	.author .author_alias{ font-weight:bold; font-size:1.2em; margin-right:20px; }
	.author .author_word{ display:inline-block; }
	.author .author_brief{ margin-top:10px; padding-top:10px; border-top:dashed 1px #a8a29e; } */
	/* 人物介绍 end */

	/* 搜索结果=》人物/标签 通用 begin */
	.search{ position:relative; border-radius:10px; border:solid 1px #065f46; }
		.search_list{ padding-bottom:35px; max-height:200px; margin-bottom:35px; padding:10px; 
				overflow-y:auto; -ms-overflow-style: none; scrollbar-width: none; }
		.search_list::-webkit-scrollbar{ display: none;}
			.search_item{ display:inline-flex; margin-right:10px; margin-bottom:10px;
					align-items:center; 
				}
			.search_item > img { width:30px; height:30px; border-radius:50%; }
			.search_item > a { line-height:35px; padding:0 10px 0 5px; }
			.search_warning{ color:red; }

		.search_notice{ position:absolute; right:0; bottom:0; 
			background:linear-gradient(to left top,#059669 20%, rgba(255,255,255,0.1) ); 
			width:200px; height:30px; line-height:30px;
			color:#fff;
			text-align:center; vertical-align:middle;
			border-radius:20px 0 10px 0; }

		.search_tags{ border:solid 1px #0369a1; margin-top:10px; }
		.search_tags .search_notice{ background:linear-gradient(to left top,#0ea5e9 20%, rgba(255,255,255,0.1) );  }
	/* 搜索结果=》人物/标签 通用 begin */
		

	/* 名言列表 begin */
	.quotes{ }
		.quote{ min-height:80px; padding:20px 15px 0 20px; margin-top:10px;
			border-radius:10px; /* color:#fff; */ 
			background:linear-gradient(to left top,#e8ffed,rgba(255,255,255,.1)); 
			/* background:linear-gradient(to right bottom,#e2e8f0,rgba(255,255,255,.1));  */
			display: grid; grid-template-rows:1fr 50px;
		}
		.quote:first-child{ margin-top:0; }
		.quote > .quote_details{ display: flex; flex-direction:column; align-items:flex-start; }
			.quote_details > .quote_content{ } 
			.quote_details > .quote_explain{ width:100%; border-top:dashed 1px #d1d5db; color:#38bdf8; margin-top:10px; padding-top:10px; }
		.quote > .quote_explain:empty{ display:none; }
			/* .quote > .quote_content::-webkit-scrollbar{ display: none;} */		/* 针对 WebKit 浏览器（如 Chrome, Safari） */
		.quote_info{ height:30px; margin-top:10px; display: flex; justify-content: flex-end; align-items: center; }
		.quote_info > .quote_line{ width:100px; height:1px; background-color:#e2e8f0; margin-right:10px; }
		.quote_info > .quote_avatar{ width:30px; height:30px; border-radius:50%; }
		.quote_info > .quote_author{ display: inline-block; padding-left:10px; }
	/* 名言列表 end */

	/* 文案列表 begin */
	.posts{ background: linear-gradient(to right bottom, #fff, #ecfccb ); border-radius: 10px; }
		.posts>.post{ padding:10px; }
		.post_quote_list{ margin:20px 0; }
	/* 文案列表 end */

	/* 图片列表 begin */
	.pictures{ display:flex; flex-wrap: wrap; height:auto; }
		.pictures_item{ width: calc(33.33% - 5px); /* 每个项目的宽度，减去间距 */
				height:auto; margin-right:5px; margin-bottom:5px; text-align:left; padding: 5px 5px 10px 5px; box-sizing: border-box;
				background: linear-gradient(to right bottom, #e9d5ff, #fff); border-radius: 10px; 
				display: flex;
				align-items: center;
					
			}
		.pictures_item > .pictures_img{ width:100%; height: auto; border-radius: 5px; border:solid 1px #e9d5ff; }
		.pictures_item > .pictures_name{ display:block; min-height:100px; max-height:200px; padding-top:5px; padding-bottom:5px; text-align: left; overflow-y:auto; word-break: break-all;}
		.pictures_item > .pictures_name::-webkit-scrollbar{ width:0; }
		.pictures_item > .pictures_name > a{ display: block;font-weight:bold; }
		.pictures_item > .pictures_name > span{ display: block; color:#64748b; font-size:0.8em; }
	/* 图片列表 end */

	/* 著作列表 begin */
	.book{ padding:15px; margin-bottom:10px; border-radius:10px; background:linear-gradient(to right bottom, #fff 10%,#e9d5ff); }
		.book .quote_line{ background:#fff; }
	/* 著作列表 end */

	/* 著作信息 begin */
	.book_info{ padding:15px; border-radius:10px; background:linear-gradient(to right bottom, #fff 10%,#d8b4fe); }
		.book_name{  }
		.book_more{ text-indent:2em; border-top:dashed 1px #fff; padding-top:10px; margin-top:10px; }
			.book_more a{ display:block; }
		.book_author{ display:flex; justify-content: flex-end; align-items: center;  }
			.book_author a{ }
			.book_author img{ margin-left:20px; width:40px; height:40px; border-radius:50%; }
	/* 著作信息 end */

	/* 名言分页 begin */
	/* .pagination { width:100vw; list-style: none; display: flex; justify-content:space-between; } */
	.pagination { margin-top:10px; list-style: none; display: grid; grid-template-columns:40px auto 40px;}
	
	.pages{ display:flex; overflow-x:auto; }
	.pages::-webkit-scrollbar{ display: none;}			/* 针对 WebKit 浏览器（如 Chrome, Safari） */
		
	.pagination .page-item { min-width:24px; height:34px; line-height:34px; flex:0 0 auto;
		text-align:center; margin: 0 4px; border-radius:50px; background:#bae6fd; padding:0 6px; }
	.pagination .page-item:hover { background-color: #60a5fa; }
	.pagination .page-item:hover > .page-link { color:#fff; }
	.pagination .page-link { color: #007bff; text-decoration: none; display: inline-block;  }
	.pagination .active  { background:#a78bfa; }
	.pagination .active .page-link { color: #fff; }
	.pagination .disabled .page-link { color: #ccc; pointer-events: none; }
	/* .pagination .pages .page-item{ padding:0 5px; } */
	/* .pagination .pages .page-item:first-child{ margin-left:10px; }  */

	/* 名言分页 end */
	
	/* 加载按钮 */
	#load{ margin-top:10px; width:100%; height:40px; border-radius:10px; border:none; background-color:#fef9c3; 
			letter-spacing:10px;}

/* aside{ grid-area:sidebar; position:sticky; top:0; } */

/* 侧边栏固定优化 */
aside {
	grid-area: sidebar;
	position: sticky;
	top: 0;      
	align-self: start; 
	max-height: calc(100vh - 40px); 
	overflow-y: auto;
}

.sidebar{ } 

.sidebar_ad{
	width:100%; 
	min-height:200px; 
}

.sidebar_item{ width:100%; min-height:200px; 
		border-top-left-radius:10px; border-top-right-radius:10px;
		/* -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0) -20px; */
		/* -webkit-mask: radial-gradient(circle at left 40px, transparent 8px, red 8px); */
		-webkit-mask: radial-gradient(circle at left 40px, #0000 5px, red 0), 
						radial-gradient(circle at right 40px, #0000 5px, red 0);
		-webkit-mask-size: 51%;/*避免出现缝隙*/
		-webkit-mask-position: 0, 100%; /*一个居左一个居右*/
		-webkit-mask-repeat: no-repeat;
			}
.sidebar_authors{background:linear-gradient(to bottom,#dbeafe,rgba(10,10,10,0));}
.sidebar_tags{background:linear-gradient(to bottom,#fce7f3,rgba(10,10,10,0));}
.sidebar_item > .title{ height:40px; padding-left:10px; line-height:40px; border-bottom:dashed 1px #fff; }
.sidebar_item > .list{ padding:10px; }
.sidebar_item > .list div{ display:inline-flex; min-height:30px; line-height:30px; }
.sidebar_item > .list img{ width:30px; height:30px; border-radius:50%; }
.sidebar_item > .list a{ margin:0 5px; }
.sidebar_tags a{ margin-right:10px; } 


.sidebar_push{ 
	display:flex; align-items: center; justify-content:center;
	text-align:center; width:100%;
	height:40px; line-height:40px; border-radius:20px;color:#fff; 
	background: linear-gradient(to right bottom, #e66465, #9198e5);
	/* background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
		linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
		linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);  */
}

.sidebar_push:nth-of-type(2){
    margin-top: 10px;
    background: #32a4b8; /* 备用颜色 */
    background: -webkit-linear-gradient(to right bottom, #9fe664, #32a4b8); /* Safari */
    background: linear-gradient(to right bottom, #9fe664, #32a4b8);
}

.sidebar_push svg{ margin-right:20px; }
.sidebar_push span{ letter-spacing: 10px; }

footer{ grid-area:footer; min-height:140px; padding:10px;
		border-top-left-radius:10px; border-top-right-radius:10px;
		background:linear-gradient(#d6d3d1,#fff);
		display:grid; grid-template-columns: 320px auto; grid-template-rows: auto 50px;
		}
	.footer_push{ 
		display:flex; 
		flex-direction: column;
		justify-items: center;
		align-items: flex-start; 
		padding-top:1em;
	}
	/* .footer_push > h3{ color:#f85d5d; } */
	/* .footer_push{ display:flex; grid-gap: 10px; } */
	.footer_push_item{ align-items: center;}
	.footer_push_item > div{ color:red; display: none; }
	.footer_push_item > img{ width:150px; height:150px; border-radius:5px; }
	.footer_links{ }
	.footer_links_title{ height:30px; border-bottom: 1px solid #f1f5f9; }
	.footer_links_list{ height:60px; overflow-y: scroll; scrollbar-width: none; }
	.footer_links_list > a{ text-decoration: none; color: #334155; font-size:0.8em; }
	.footer_info{ grid-column:1/3; margin-top:20px; display: flex; align-items: center; justify-content: center; color:#666; gap:10px; }
		
	/* 修改.tips定位和尺寸 */
	.tips {
		position: fixed;
		bottom: 20px;
		/* 精确计算右侧位置 */
		right: calc(50% - 620px);
		z-index: 10;
		/* 内容居中 */
		display: flex;
		align-items: center;
		justify-content: center;
		/* 悬停效果 */
		transform: translateX(20px);
		transition: all 0.3s ease;
		overflow: hidden;
	}

@media(max-width:800px){
	body{ width: 100vw;
		padding:0 10px;
		box-sizing:border-box;
		grid-template-columns:1fr;
		grid-template-rows: 150px auto auto 50px;
		grid-template-areas:"navbar" "intro" "main" "footer";
	}
	
	nav{ -webkit-mask:none; }
	.top{ display:none;}
	.navbar{ border:none; height:100%;
		display:grid; grid-template-columns:1fr; 
		grid-template-rows:auto 1fr 1fr; 
		align-content:center; justify-content:start;
		
	}
	.navbar .navbar_input{ width:auto;}
	.navbar>.navbar_site{ display:flex; height:60px; align-items: center; justify-content:flex-end; 
		font-weight: bold; font-size:1.4em; color:#4515f3; text-shadow: 1px 1px 2px rgb(255, 255, 255);	
		border-radius: 0 0 10px 10px;
    	/* background-color: rgb(0, 0, 0); */
		border:1px solid #fff;

		border-top:none;
		padding-right: 20px;
	}
	.navbar>.navbar_site > .navbar_site_short{ display:none; }
	.navbar>.navbar_site > .navbar_site_long{ display:inline; }

	.navbar>.navbar_site > svg{ margin-left:20px; }

	.navbar>.navbar_site a{ padding:0 10px; border-radius:0 0 10px 10px; background:#ecfccb; }
	.navbar>.navbar_site a:nth-child(2n) { margin-left:10px; background:#fef9c3; }
	.navbar>.navbar_left{ justify-content:space-between; flex-wrap:wrap; }
	.navbar>.navbar_left > svg{ display:none; }
	.navbar>.navbar_left > a { margin: 0; }
	.navbar>.navbar_right{ display:grid; grid-template-columns:1fr auto; align-self:start; }

	.author-image{ display:none; }
	
	.algorithm{ grid-template-columns:auto 60px; }		/* 算法推荐=》右边上下 */			
	.algorithm_info > .line { display:none; }			/* 算法推荐=》左边人物线条 */ 
	.algorithm_info > .avatar{ width:30px; height:30px; }
	.algorithm_more{ padding: 15px 5px 15px 0; }
			
	.pictures_item{ width: calc(50% - 5px); } /* 每个项目的宽度，减去间距 */

	/* aside{ display:none; position: fixed; width: 200px; height: 100%; background-color: grey; display: none; } */

	aside{
		position:fixed;
		width:200px;
		height:100%;
		background-color:grey;
		display:none;
		top:0;
		right:0;
		z-index:100;
	}

	.show{ display: block; }
	#toggle_sidebar{ display:block; }
	
	footer{ grid-template-columns:1fr; grid-template-rows:auto; }
	.footer_push{display:none;}
	.footer_links_list{ max-height:60px; overflow-y:auto; scrollbar-width: none; }
	/* .tips{display:none;} */
}

@media(max-width:500px){
	body{
		grid-template-rows: 150px auto auto 50px;
		grid-template-areas:"navbar" "intro" "main" "footer";
	}

	.navbar_site{ height:70px; display: flex; align-items: center;}
	.navbar>.navbar_site > .navbar_site_short{ display:inline; }
	.navbar>.navbar_site > .navbar_site_long{ display:none; }

	.game{ display: none; }
	.author-image{ display:none; }
}