@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

/* Info post - category selection (modern layout) */

#fenlei2.post-select-layout{
	/* 覆盖 post.css 里对 #fenlei2 的固定 padding/max-width/背景 */
	padding:0 !important;
	background:transparent !important;
	max-width:none !important;
	width:100% !important;
	margin:0 !important;
	text-align:left !important;
	overflow:visible !important;
}

#fenlei2.post-select-layout::before{
	content:"" !important;
	display:none !important;
}

.post-hero{
	display:flex;
	align-items:center;
	gap:14px;
	margin:18px auto 14px;
	padding:16px 18px;
	max-width:1200px;
	background:rgba(255,255,255,0.08);
	border:1px solid rgba(255,255,255,0.18);
	border-radius:18px;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow:0 20px 60px rgba(15,82,187,0.10);
}
.post-hero__icon{
	width:52px;
	height:52px;
	border-radius:18px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:linear-gradient(135deg,#53b4db 0%,#1c5fb5 100%);
	color:#fff;
	box-shadow:0 18px 55px rgba(83,180,219,0.30);
	flex:0 0 auto;
}
.post-hero__icon i{font-size:20px}
.post-hero__title{
	font-size:22px;
	font-weight:1000;
	color:#0f172a;
	letter-spacing:-0.02em;
}
.post-hero__subtitle{
	margin-top:4px;
	font-size:13px;
	font-weight:900;
	color:rgba(15,23,42,0.65);
}

.post-select-layout{
	display:grid;
	grid-template-columns: 330px 1fr;
	gap:16px;
	align-items:start;
	max-width:1200px;
	margin:0 auto;
	padding:0 0 10px;
}

.post-select-sidebar{
	min-width:0;
}

/* 侧边菜单容器卡片化 */
#ymenu-side{
	background:rgba(255,255,255,0.06);
	border:1px solid rgba(255,255,255,0.20);
	border-radius:18px;
	padding:12px;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow:0 20px 60px rgba(15,82,187,0.08);
	position:relative;
}
#ymenu-side::before{
	content:"";
	position:absolute;
	inset:-1px;
	border-radius:18px;
	background:linear-gradient(135deg, rgba(83,180,219,0.20), rgba(28,95,181,0.08), rgba(124,58,237,0.10));
	opacity:0.9;
	pointer-events:none;
	z-index:0;
}
#ymenu-side > *{
	position:relative;
	z-index:1;
}

/* 右侧内容区 */
.post-select-content{
	display:flex;
	flex-direction:column;
	gap:14px;
}

.post-right-grid{
	position:relative;
	width:100%;
	min-height:220px; /* 保证浮层不会挤压布局 */
}

/* 让主卡片右侧留出空间给右上角浮层 */
.post-tip-card{
	padding-right:270px;
}

.post-hot-card{
	position:absolute;
	right:0;
	top:52px;
	width:260px;
	transform:rotate(-1deg);
}

.post-hot-card{
	background:rgba(255,255,255,0.08);
	border:1px solid rgba(255,255,255,0.20);
	border-radius:18px;
	padding:16px;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow:0 20px 60px rgba(15,82,187,0.08);
}
.post-hot-card__title{
	font-size:16px;
	font-weight:1000;
	color:#0f172a;
	margin-bottom:10px;
}
.post-hot-card__tags{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
.post-tag{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:34px;
	padding:0 12px;
	border-radius:999px;
	text-decoration:none !important;
	font-weight:1000;
	font-size:13px;
	color:rgba(13,66,153,0.95) !important;
	background:rgba(255,255,255,0.92);
	border:1px solid rgba(83,180,219,0.35);
	transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.post-tag:hover{
	transform:translateY(-2px);
	border-color:rgba(83,180,219,0.75);
	box-shadow:0 18px 55px rgba(83,180,219,0.18);
}
.post-hot-card__note{
	margin-top:10px;
	font-size:12px;
	font-weight:900;
	color:rgba(15,23,42,0.55);
	line-height:1.5;
}

.post-search-card,
.post-tip-card{
	background:rgba(255,255,255,0.08);
	border:1px solid rgba(255,255,255,0.20);
	border-radius:18px;
	padding:16px;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow:0 20px 60px rgba(15,82,187,0.08);
}

/* 覆盖 post.css 的搜索条外观（把红色风格改成蓝色） */
.post-search-card .psearch{
	background:transparent !important;
	max-width:none !important;
	margin:0 !important;
	box-shadow:none !important;
	border:none !important;
	padding:0 !important;
}
.post-search-card .psearch::before{
	display:none;
}
.post-search-card .pshead{
	padding:0 !important;
}
.post-search-card .pstxt{
	border:2px solid rgba(225,232,237,1) !important;
	border-right:none !important;
	border-radius:14px 0 0 14px !important;
	padding:15px 20px !important;
	height:auto !important;
	line-height:normal !important;
	font-size:16px !important;
	background:#fff !important;
}
.post-search-card .pstxt:focus{
	outline:none;
	border-color:#53b4db !important;
	box-shadow:0 0 0 3px rgba(83,180,219,0.18) !important;
}
.post-search-card .psbtn{
	background:linear-gradient(135deg,#53b4db 0%,#1c5fb5 100%) !important;
	border-radius:0 14px 14px 0 !important;
	width:160px !important;
	height:54px !important;
	line-height:54px !important;
	font-weight:800 !important;
}
.post-search-card .psbtn:hover{
	box-shadow:0 12px 35px rgba(15,82,187,0.30) !important;
}

.post-tip-card__title{
	font-size:16px;
	font-weight:1000;
	color:#0f172a;
	margin-bottom:10px;
}
.post-tip-card__list{
	margin:0;
	padding:0 0 0 18px;
}
.post-tip-card__list li{
	margin:8px 0;
	color:rgba(15,23,42,0.75);
	font-weight:900;
	font-size:13px;
	line-height:1.6;
}

@media (max-width: 980px){
	.post-select-layout{
		grid-template-columns:1fr;
	}
	.post-hero{
		margin-left:12px;
		margin-right:12px;
	}
	.post-right-grid{
		min-height:auto;
	}
	.post-tip-card{
		padding-right:0;
	}
	.post-hot-card{
		position:static;
		width:auto;
		transform:none;
	}
}

/* === Blue theme overrides for original post.css step bar (fix red) === */
.step1 span.cur,
.step2 span.cur,
.step3 span.cur{
	background:linear-gradient(135deg,#53b4db 0%, #1c5fb5 100%) !important;
	border-color:rgba(83,180,219,0.55) !important;
	box-shadow:0 18px 50px rgba(83,180,219,0.25) !important;
	color:#fff !important;
}

.step1 span,
.step2 span,
.step3 span{
	background:rgba(255,255,255,0.08) !important;
	border-color:rgba(255,255,255,0.18) !important;
	color:rgba(15,23,42,0.72) !important;
}

.step1 span font.number,
.step1 span font.number{
	color:#0d4299 !important;
}

/* === Blue theme overrides for left menu hover (fix red) === */
#ymenu-side .ym-mainmnu .ym-tab:hover{
	border-color:rgba(83,180,219,0.85) !important;
}

#ymenu-side .ym-mainmnu .ym-tab:hover > a.black,
#ymenu-side .ym-mainmnu .ym-tab:hover > a{
	color:#0d4299 !important;
	background:rgba(83,180,219,0.08) !important;
}

#ymenu-side .ym-submnu li a:hover{
	color:#0d4299 !important;
	padding-left:25px !important;
	transform:translateX(5px) !important;
}