/* 重置浏览器默认样式 */
*{ margin: 0; padding: 0; box-sizing: border-box; }
a{ color: #000; text-decoration: none;}

body{
	width:1200px;
	margin: 0 auto;
	display: grid;
	row-gap:10px;
	grid-template-columns:1fr 300px;
	grid-template-areas:
		"navbar navbar"
		"intro intro"
		"main sidebar"
		"footer footer";

	/* 修改行高定义：用minmax和fr替代auto */
	grid-template-rows: 120px 200px minmax(80vh, 1fr) 200px; 

	min-height: 100vh; /* 新增：确保网格容器撑满视口 */
	font-family: "Segoe UI",Segoe,Tahoma,Arial,Verdana,sans-serif;

	display: -ms-grid;
	-ms-grid-columns: 1fr 300px;
	-ms-grid-rows: 120px 200px 1fr 50px;


	/* grid-gap:5px; */
	/* grid-template-rows: 120px 200px 1fr 200px;  */
	/* grid-template-rows: 120px 200px 1fr 50px;  */
	/* overflow: visible; */
}

nav{
	grid-area:navbar;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px; 
	background:linear-gradient(to right bottom, #fff 10%,#fa9360);
	-webkit-mask: 
		radial-gradient(circle at left 150px, #0000 5px, red 0), 
		radial-gradient(circle at right 150px, #0000 5px, red 0);
	-webkit-mask-size:51%;
	-webkit-mask-position:0, 100%;
	-webkit-mask-repeat: no-repeat;
}

.top {
	width:100%;
	height:70px;
	padding:0 10px;
	display:grid;
	
	grid-template-columns: 1fr auto; /* 左边自适应，右边根据内容宽度 */
	align-items: center; /* 垂直居中 */
}


.top_main{
	left: 0px;
	border-radius: 0 0 10px 0;
	display: flex;
}
/* .top_my{ border-left: solid 2px red; margin-left:10px; } */
.top_main_info{ display: block; }
.top_main_info > a{ display: block; margin-left:10px; font-weight: bold; }
.top_main_info > a:nth-child(1){
	font-size:24px;
	/* font-size:36px; */
	color:#000; 
	/* color:#d4237a;  */
}
.top_main_info > a:nth-child(2){
	padding: 2px 8px;
	border-radius: 4px;
	font-size:15px;
	background-color: #7a7a7a;
	color:#fff;
}

.top_site{
	text-align:right;
}

.top_site > a{
	display:inline-block;
	height: 35px;
	line-height: 30px;
	padding:3px 8px;
	font-weight: bold;
	color:#d74b4b;;
}

.top_site > span{ color:#fff; }
.top_site > span:nth-child(1){
	display: none;
}

.top_motto{ display: none; padding-top:28px; text-align:right; vertical-align:middle; }

.navbar {
  height:50px;
  line-height:50px;
  padding:0 10px;
  border-top:dashed 1px #fff;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position: sticky; /* 新增：粘性定位 */
  top: 0;          /* 新增：距离顶部0时固定 */
  z-index: 10;     /* 新增：确保悬浮在内容上方 */
}

/* 小屏幕时显示 */
.navbar>.nav_smalll{ display:none; }

.navbar>.navbar_left { display:flex; align-items:center; }	
.navbar>.navbar_left>a {
	margin:0 10px;
	color:#222;
	height:30px;
	line-height:30px;
	display: inline-flex;
	font-weight:bold;
}

/* 中小屏幕才显示单独的搜索链接 */
.navbar>.navbar_left>.navbar_left_search {
	display: none;
}

.navbar>.navbar_right {
	display:flex;
	align-items:center;
	justify-content:center;
}

.navbar .navbar_input{
	height:35px;
	border:solid 1px #d8511c;
	min-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:0 10px;
	background-color:#d8511c;
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
	color:#fff;
	cursor: pointer;
}

#toggle_sidebar{ display:none; }

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

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

.algorithm{
	height:250px;
	padding-left:10px;
	background:linear-gradient(to right bottom, #a7f3d0,#fff);
	display:grid;
	grid-gap:10px;
	grid-template-columns:auto 80px;
	border-radius:10px;
	margin-bottom:10px;
}

.algorithm_content{ display:grid; }
.algorithm_content::-webkit-scrollbar{ display:none; }

.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,
.algorithm_info > .brief { margin-right:20px; }

.algorithm_more{
	background-color:#fff;
	border-top:solid 1px #e2e8f0;
	border-right:solid 1px #e2e8f0;
	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; cursor: pointer; }

.info{
	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;
}

.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)); }

.category_info{
	margin-bottom:10px;
	display:flex;
	align-items:center;
}

.category_info > .category_name{
	white-space:nowrap;
	border-radius:20px;
	padding:1px 12px;
	background-color:rgb(255, 165, 111);
	color:#ffffff;
}

.category_info > .category_line{
	flex-grow:1;
	height:1px;
	background-color:#e2e8f0;
	margin-left:10px;
}

.quotes{ }

.quote{
	min-height:80px;
	padding:20px 40px 0 20px;
	margin-top:10px;
	border-radius:10px;
	background:linear-gradient(to left top,#fff2e8,rgba(255,255,255,.1));
	display:grid;
	grid-template-rows:1fr 50px;
	position:relative;
}

.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_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:#e3e9f0;
	margin-right:10px;
}

.quote_info > .quote_avatar{
	width:30px;
	height:30px;
	border-radius:50%;
}

.quote_info > .quote_author{ display:inline-block; padding-left:10px; }
.quote_info .quote_sep{ color:#d2d8df; }
.quote_like{ position:absolute; top:10px; right:10px; }

.posts{
	background:linear-gradient(to right bottom, #fff, #ecfccb);
	border-radius:10px;
}

.posts>.post{ padding:10px; }
.post_quote_list{ margin:20px 0; }

.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;
	background:linear-gradient(to right bottom, #e9d5ff, #fff);
	border-radius:10px;
}

.pictures_item > .pictures_img{
	width:100%;
	height:auto;
	border-radius:5px;
	border:solid 1px #e9d5ff;
}

.pictures_item > .pictures_name{
	display:block;
	min-height:16px;
	max-height:42px;
	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; }

.book{
	padding:15px;
	margin-bottom:10px;
	border-radius:10px;
	background:linear-gradient(to right bottom, #fff 10%,#e9d5ff);
}

.book .quote_line{ background:#fff; }

.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 img{
	margin-left:20px;
	width:40px;
	height:40px;
	border-radius:50%;
}

.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; }

/* 分页 begin */
.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:34px; 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; }
/* 分页 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;      
	align-self: start; 
	max-height: calc(100vh - 40px); 
	overflow-y: auto; 
}

.sidebar_item{
	width:100%;
	min-height:200px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	-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_user{ display: flex; flex-direction:row;  justify-content:space-between; padding:0 10px;  min-height:3em; line-height:3em; margin-bottom:10px; border-radius:10px;
	text-align: center; background:linear-gradient(to left bottom,#baffe5,rgba(10,10,10,0));  }
	.sidebar_user a {
		font-weight: bold;
		color:#e6519b;
	}

	/* 如果你需要特别调整SVG图标的垂直对齐 */
	.sidebar_user svg.icon {
		display: inline-block;
		vertical-align: middle; /* 额外的垂直对齐保障 */
	}

.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; } 

/* 修改.tips定位和尺寸 */
.tips {
    position: fixed;
    bottom: 20px;
    /* 精确计算右侧位置 */
    right: calc(50% - 620px);
    /* 固定宽高 */
    width: 40px;
    height: 40px;
	padding-top:5px;
    /* 样式调整 */
    background-color: rgb(185, 185, 185);
    border-radius: 10px; /* 圆形设计 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    /* 内容居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 悬停效果 */
    transform: translateX(20px);
    transition: all 0.3s ease;
    overflow: hidden;
}

.tips:hover{
    background-color: rgb(129, 129, 129);
}

footer{
	grid-area:footer;
	-ms-grid-row: 4; /* 兼容旧版Edge */
  	-webkit-align-self: end; /* Chrome/Safari适配 */

	min-height:100px;
	padding:10px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	background:linear-gradient(#d6d3d1,#fff);
	display:grid;
	grid-template-columns:220px auto;
	grid-template-rows:auto 50px;

	background-color: #ff3d3d;
}



.footer_push{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
}

.footer_pumd5sh_item{ display:flex; flex-direction:column; align-items:center; }
.footer_push_item > div{ color:red; display:none; }
.footer_push_item > img{
	width:100px;
	height:100px;
	border-radius:5px;
}

.footer_links{  }

.footer_links_title{
	color:#504e4e;
	padding-left:4px;
	height:30px;
	border-bottom:1px solid #f1f5f9;
}


.footer_links_list{
	max-height:60px;
	display:flex;
	flex-wrap:wrap;

	overflow-y: scroll;		/* 推荐的综合解决方案 */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE 10+ */
}
.footer_links_list::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.footer_links_list > a{
	text-decoration:none;
	color:#6d727c;
	font-size:0.8em;
	line-height: 1.6em;
	display:inline-block;
	margin:0 5px;
}


.footer_info{
	grid-column:1/3;
	margin-top:10px;
	text-align:center;
	color:#b4b4b4;
}

.footer_info > a{
	display:inline-block;
	color:#b4b4b4;
	margin:0 5px;
}

/* 响应式设计 */
@media(max-width:800px){
	body{
		width:100%;
		padding:0 10px;
		grid-template-columns:1fr;
		
		grid-template-rows:110px auto;
	}
	
	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;
	}

	.top_main{ display: none; }

	/* 小屏幕时显示 */
	.navbar>.nav_smalll{ margin-top:20px; display: flex; justify-content: space-between; 
		align-items: center; height:50px; overflow-x: hidden; border-bottom:dashed 1px #fff;}

	/* 上方小屏幕搜索 begin */
	.navbar_find{ display: flex; }
	.navbar_find > .navbar_input{ 
		flex-grow: 1;  /* 自动填充剩余空间 */
		overflow: hidden; /* 防止内容溢出 */
		min-width: 0;    /* 允许收缩到小于内容宽度 */
	}
	.navbar_find > button {
		flex: 0 0 40px; /* 固定宽度 30px（flex: grow shrink basis） */
		overflow: hidden; /* 可选：防止内容溢出 */
	}
	/* 上方小屏幕搜索 end */
	
	.navbar_slogan{ display: flex; font-weight: bold; align-items: center; 
		/* height:30px; line-height:30px; */
	}
	.navbar_slogan_info{ }
	.navbar_slogan_info > a{ display: block; margin-left:10px; font-weight: bold; line-height: 20px; }
	.navbar_slogan_info > a:nth-child(1){
		font-size:1.2em;
		color:#000; 
		/* color:#d4237a;  */
	}
	.navbar_slogan_info > a:nth-child(2){
		padding: 0 8px;
		border-radius: 4px;
		font-size:0.6em;
		background-color: #7a7a7a;
		color:#fff;
	}

	

	/* 系统推广链接 */
	.navbar_site {
		/* display: flex; */
    	display:none;
		align-items: center;  /* 新增：子元素垂直居中 */
		flex-shrink: 1;         /* 允许缩小（默认值，可省略）*/
		min-width: 0;           /* 关键：覆盖默认的 min-width: auto */
		overflow: hidden;       /* 可选：防止内容溢出 */
	}
	.navbar_site a {
		height:30px;
		line-height:30px;
		margin-left:10px;
		padding:0 8px;
		border-radius:10px;
		background-color: #fff;
		white-space: nowrap;    /* 防止链接文字换行 */
		overflow: hidden;       /* 隐藏溢出内容 */
		text-overflow: ellipsis; /* 可选：显示省略号 */
		flex-shrink: 1;         /* 允许链接缩小 */
	}


	/* 中小屏幕才显示 */
	.navbar>.top_small{ display: flex;}
	
	.navbar>.navbar_left{
		justify-content:space-between;
		flex-wrap:wrap;
		margin-top: 5px;
	}

	.navbar>.navbar_left > a {
		display: inline-flex; /* 或 flex */
		align-items: center; /* 垂直居中 */ 
	}

	/* 中小屏幕才显示单独的搜索链接 */
	.navbar>.navbar_left>.navbar_left_search {
		display:flex;
		align-items:center;
		height:30px;
		border:none;
		padding:0 10px;
		background-color:#d8511c;
		border-radius:10px;
		color:#fff;		
	}

	.navbar>.navbar_right{
		display:grid;
		grid-template-columns:1fr auto;
		align-self:start;
	}

	.navbar>.navbar_right{
		display: none;
	}

	.navbar .navbar_input{
		min-width:auto;
	}
	
	.author-image{ display:none; }
	.algorithm{ grid-template-columns:auto 60px; }
	.algorithm_info > .line { display:none; }
	.algorithm_info .separator { color:#d2d8df; }
	.algorithm_info > .avatar{ width:30px; height:30px; }
	.algorithm_more{ padding:15px 5px 15px 0; }
	.pictures_item{ width:calc(50% - 5px); }

	main{
		padding-right: 0;
	}
	
	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; }
}

@media(max-width:500px){
	body{
		grid-template-columns:1fr;
	}
	
	.game{ display:none; }
	.author-image{ display:none; }

	
	/* 小屏幕时显示 */
	.navbar>.nav_smalll{ display:flex; }

	.nav_smalll .navbar_slogan_url{ display: none; }

	.navbar_site{ display: none; }

	.footer_info{ margin-top:20px; text-align:left; }
	.footer_info > a{  }
	.tips {right: 30px;}
}