.joe_dropdown {
	position: relative
}

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

.joe_dropdown__link-icon {
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	transition: transform 0.35s, -webkit-transform 0.35s
}

.joe_dropdown__menu {
	position: absolute;
	left: 50%;
	visibility: hidden;
	z-index: 999;
	border-top: 3px solid var(--theme);
	-webkit-transform-origin: top;
	transform-origin: top;
	background: var(--background);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
	border-radius: 0 0 var(--radius-inner) var(--radius-inner);
	padding: 10px 0;
	opacity: 0;
	-webkit-transform: translateX(-50%) perspective(600px) rotateX(-45deg);
	transform: translateX(-50%) perspective(600px) rotateX(-45deg);
	transition: opacity 0.35s, visibility 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, visibility 0.35s, transform 0.35s;
	transition: opacity 0.35s, visibility 0.35s, transform 0.35s, -webkit-transform 0.35s;
	will-change: transform, opacity;
}

.joe_dropdown__menu::before {
	content: '';
	position: absolute;
	top: -10px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid var(--theme)
}

.joe_dropdown.active .joe_dropdown__link-icon {
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg)
}

.joe_dropdown.active .joe_dropdown__menu {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateX(-50%) perspective(600px) rotateX(0);
	transform: translateX(-50%) perspective(600px) rotateX(0)
}

.joe_header {
	position: fixed;
	width: 100vw;
	top: 0;
	z-index: 1000;
	background: var(--background);
	transition: top 0.35s
}

.joe_header:target,
.joe_header.active {
	top: -60px;
}

.body-scroll .joe_header {
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

.joe_header.active .joe_header__below {
	border-top: none
}

.joe_header.active.current .joe_header__below-title {
	display: block
}

.joe_header.active.current .joe_header__below-class {
	display: none
}

.joe_header__above {
	position: relative;
	z-index: 999;
	background: var(--background);
}

.joe_header__above>div {
	align-items: center;
}

.joe_header__above-logo {
	position: relative;
	display: flex;
	align-items: center;
	/* height: 60px; */
	padding-right: 15px;
	margin-right: 15px
}

.joe_header__above-logo img {
	max-width: 150px;
	max-height: 35px;
	-o-object-fit: cover;
	object-fit: cover
}

.joe_header__above-logo>.dark {
	display: none
}

.joe_header__above-nav {
	display: flex;
	align-items: center
}

.joe_header__above-nav .item {
	position: relative;
	height: 60px;
	line-height: 60px;
	font-size: 15px;
	padding: 0 8px;
	margin-right: 15px;
	transition: color 0.35s;
	white-space: nowrap;
	color: var(--main)
}

.joe_header__above-nav .item:last-child {
	margin-right: 0
}

.joe_header__above-nav .item::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	transition: opacity 0.5s, -webkit-transform 0.5s;
	transition: opacity 0.5s, transform 0.5s;
	transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
	border-radius: 6px 6px 0 0;
	opacity: 0;
	-webkit-transform: scaleX(0.25);
	transform: scaleX(0.25);
	background: var(--theme);
}

.joe_header__above-nav .item.active,
.joe_header__above-nav .item:hover {
	color: var(--theme)
}

.joe_header__above-nav .item.active::after,
.joe_header__above-nav .item:hover::after {
	opacity: 1;
	-webkit-transform: scaleX(1);
	transform: scaleX(1)
}

.joe_header__above-nav .joe_dropdown__link a {
	height: 50px;
	line-height: 50px;
	font-size: 15px;
	padding-left: 8px;
	padding-right: 3px;
	transition: color 0.35s;
	white-space: nowrap;
	color: var(--main)
}

.joe_header__above-nav .joe_dropdown__menu {
	width: 110px;
	text-align: center
}

.joe_header__above-nav .joe_dropdown__menu a {
	display: block;
	line-height: 34px;
	height: 34px;
	transition: color 0.35s, background 0.35s;
	color: var(--minor);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 15px;
	margin: 0;
}

.joe_header__above-nav .joe_dropdown__menu a:hover,
.joe_header__above-nav .joe_dropdown__menu a.active {
	color: var(--theme);
	background: var(--classD)
}

.joe_header__above-search {
	position: relative;
	margin-left: auto;
	display: flex;
	align-items: center
}

.joe_header__above-search .input {
	background: transparent;
	width: 170px;
	height: 34px;
	border: 2px solid var(--classB);
	border-right: none;
	padding: 0 18px;
	color: var(--routine);
	transition: border-color 0.35s, padding-right 0.35s;
	border-radius: 17px 0 0 17px
}

.joe_header__above-search .input:focus {
	border-color: var(--theme);
	padding-right: 28px
}

.joe_header__above-search .input:focus~.icon {
	-webkit-transform: translate3d(0, -50%, 0) rotateY(180deg);
	transform: translate3d(0, -50%, 0) rotateY(180deg)
}

/*PC端搜索按钮*/
.joe_header__above-search .submit {
	position: relative;
	z-index: 1;
	height: 34px;
	border: none;
	background: var(--theme);
	color: #fff;
	border-radius: 0 17px 17px 0;
	padding: 0 10px;
	white-space: nowrap;
}

.joe_header__above-search .icon {
	position: absolute;
	top: 50%;
	left: 145px;
	width: 28px;
	height: 38px;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAmCAYAAADX7PtfAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAHKElEQVRYw93Xe3DNdxrH8ecXiSK7i1qWFWW3rekiE2x3VEemtkkVVbWy4jY6atma2YpS6rJoozvbpRF1qW1EEYIk5xZE5EKE3CQi0SB30VwEIeeWnDi3nPf+kUNTE1R3mNn945n5nZkz8zrP53y/39/3EUCeZsn/HCgi80Rky1MDn/H2vjB6SpBVRMb9V6CI+InIBhE58bOez5b9xm9E0wu//0NTr/4+9SKyX0TGicjiP320kpBd+xCRv/0kUFEUf49OnfJGBwWzWn3UcfCGSa8xO1zxFoi3gLbJyZb8S/QeOIhRb0/hiA1GvjkREfF9bFBEQv0C3ySyrIaEO5DjaCXFYkdttKEyWFEbrKiNNjRmBztLrrIqVsfAYb507tJVryjKi48FisiK8Qs/IL4FVEYbOTY7l3FSjJNCp4PDpnZoOzi+BSKKq+j3wostiqK8/KPBv27+6pja9H03uXYHl3FwyeWgGCcFTscPwXalMdnZU1VPn4GDTCLS90eB2ibHHpXRhtpgRWWwkmqxU4yTEpwcvaUno7kZ7f1dtitds4tVcYcRkZMiskhRlCEPBdUG2/a7oNpoQ2Oyc8zUwrsp+QREp7CxpA6N0YbaaENtvBtrW2lMdsIy8xn00u/4aPly9h04QEBgICKy+oGgymiNUBltaN2xflxwlUmqdArKvyX0RBZf1ejbge5y/zi10cbg4SO4Ul3N8dRUqmprcQETJ01CUZQxHXdotH+jMtpYdLact9RniMzOxX6rDAzlrEzOIKLO+EPMXRqTnbCs88yePQuA18aOpWuPXuyIiKCouBgROfQA0Bq1tqiGsPRsMFbiaigBfQXoy1mZnMnOa6YOMBsHb7ewKbuAWTNnAhAQGEjPPn3JyMmh2W5HUZScDkGd0b5/RuoFqmtLiNj8GSLCxcwEMFTw95RM/l1ruBepxtTW2YKMYiYdPouuycHg4SOpqa8nTqPhclkZDuBcYSEiEtMxaLZHByXmU1qUiYeHByLCsZhIMFayPfMs/yy9TrzZQZzByqeX6pigzSLqbB5z4k+jNTvYcCqbvj4++i/Cwi7kFZxvidq/3+UzYAAi8l6HYLzZfiAoIZfoiHBEBBGhNDcZ9BXkln5LoCaLoMR8punOsCM7j8b6EjBWsDjxDHtuNKE1O9h95RrT14QyJngm01at48u8IkTktPtg6da9e/dffb8PTXbVVG0mqRva4pw8PgBMV6CxHBrLuVhZRMO1Ypw3LrPt8zXYrl8CfTmrUzL5ut2C0jY50TW3om1yEm+B/oNf0rvBYfPff//59pEefUd9BtKPU5oQS+vtMmgsx3W7DJf7GfNV5kyfgoiQpNoNxko+Tsog8u6Cuu8wiLfAb/2Gt7hBRUR6tAdTpmozQV/etjrbYXfBxspzKEpb3MU5x8FYwUxdOirDfXvTvT+1TU569vt17YP+w+RJ0ae4WdUWlcsdJfqKtmd9BWcSDiIijHvdH8xVVFdfYmpiPjqznQP1BmIamu6dRBqTnfCcQkQkukPQPyZdNToqzfZWaLKzuvwiGCpoLcrAnqS917G1/iKfL5iLMUkH3xWiK8hnWX4Vhy0uJi9ayqpYHRqzo+1stbgIePc9u4i83iE4O7128cvRp1mRZ2Hy+qRWQ25aW2d1RW0x3+04/zScTITcNJYmZxFxzcj+2lsM8vUjrrHlXrRR1Q107tLlYodnqaIo2iHDhlp8g+bzaSkcqbO0xiXn80boCdbtOkXuuUJuVRdjqbuI42YxNXmpLFkwh6FvTOCoDdeYP09nVazOpWtuRW20oWtu5Z0PlyMiwR2CIrJbG7WNyPD1DBrxCoEh61snhEYwcc1WXvnLelffgOX6gcE7VN1+3sM2cuwfEU9PRCRtftgWQnbupVf/AQSvXMta3TE0ZgeHbprx7tGz6oGvJxHx8vDyOr35sxWYrp4n8VAEsZGbiNsVTvy+7TzXr0+j+3sHRkx4G1GUnc90885bGhWDh4dHlqIo10Xk9oqDanQWF/M3bUVEPnjo+/CTEkJeXbgOX9+h/GPlIrR7t3I8difHYiLp3evZanf03iIyQkR6iKcXnl6dTymK0lVRFD8RmTpj7XqO2mDIq/6ISM+HgicbnPM+r4TVhS1M26IhYNlGxixcg4hiFpHnOrjd/fL+z8P8XyPmtoVOXl6Zj7xinLrpnLux3EXaDQff1ED4dxD8ZRwisvYxbuHquf8KR0Q2PRJcdcm5JL3BwR2blRablVZg1KhRLkVRej8GOFg6dUJEFj0S3F3NYpPVRrPNSovDweGEBERkx0+YNWYoivL8I8E7Tue8O04nFrsdBzDG3x8R8Xli01NISMiSrdu2kZGTzd7oaERk7xMd12ZFJC0b/8nX9Brsh4ikiUj3Jwpes/Ph3qzLeHb7RbGIeD7xgfRIQsIyH5/+RkVR+j+VCXjkyJHdFEXx/r+b8f8DZyW8Jd6/P38AAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDItMjBUMTE6NTI6MjQrMDA6MDA4bfPmAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTAyLTIwVDExOjUyOjI0KzAwOjAwSTBLWgAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAASUVORK5CYII=);
	background-size: 100% 100%;
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	transition: transform 0.35s, -webkit-transform 0.35s;
	-webkit-transform: translate3d(100%, -50%, 0) rotateY(180deg);
	transform: translate3d(100%, -50%, 0) rotateY(180deg)
}

.joe_header__above-search .result {
	position: absolute;
	z-index: 2;
	top: 60px;
	left: 0;
	right: 0;
	background: var(--background);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
	border-radius: var(--radius-inner);
	visibility: hidden;
	opacity: 0;
	transition: visibility 0.35s, opacity 0.35s, -webkit-transform 0.35s;
	transition: visibility 0.35s, opacity 0.35s, transform 0.35s;
	transition: visibility 0.35s, opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
	-webkit-transform: translate3d(0, 15px, 0);
	transform: translate3d(0, 15px, 0)
}

.joe_header__above-search .result.active {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity: 1;
	visibility: visible
}

.joe_header__above-search .result .item {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid var(--classD);
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 0 10px;
	transition: background 0.35s
}

.joe_header__above-search .result .item:last-child {
	border-bottom: none
}

.joe_header__above-search .result .item:nth-child(1) .sort {
	background: #fe2d46
}

.joe_header__above-search .result .item:nth-child(2) .sort {
	background: #f60
}

.joe_header__above-search .result .item:nth-child(3) .sort {
	background: #faa90e
}

.joe_header__above-search .result .item:hover {
	background: var(--classD)
}

.joe_header__above-search .result .item .sort {
	color: #fff;
	background: #7f7f8c;
	width: 18px;
	height: 18px;
	line-height: 18px;
	border-radius: 2px;
	text-align: center;
	margin-right: 8px;
	font-weight: 500
}

.joe_header__above-search .result .item .text {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--routine);
	font-size: 12px
}

.joe_header__above-search .result .item .views {
	color: var(--seat);
	font-size: 12px;
	margin-left: 5px
}

.joe_header__above-slideicon>i::after,
.joe_header__above-slideicon>i::before,
.joe_header__above-slideicon>i>i {
	content: '';
	position: absolute;
	width: 1em;
	height: 2px;
	background: var(--main-color);
	left: 0;
	right: 0;
	transition: .4s;
	border-radius: 2px;
	bottom: .45em
}

.joe_header__above-slideicon>i>i {
	right: .1em;
	width: .9em
}

.joe_header__above-slideicon>i::before {
	bottom: .8em;
	right: .2em;
	width: .8em;
}

.joe_header__above-slideicon>i::after {
	bottom: .1em
}

.joe_header__above-searchicon,
.joe_header__above-slideicon {
	display: none;
	/* width: 20px; */
	/* height: 20px; */
	/* fill: var(--routine); */
	cursor: pointer;
	color: var(--main-color);
}

@media (max-width: 768px) {
	.mobile-navbar-show .joe_header__above-slideicon .i-menu::before {
		right: 0;
		width: calc(1em + 1px);
		transform: rotate(-45deg);
		transform-origin: top right;
	}

	.mobile-navbar-show .joe_header__above-slideicon .i-menu>i {
		opacity: 0;
	}

	.mobile-navbar-show .joe_header__above-slideicon .i-menu::after {
		transform: rotate(45deg);
		width: calc(1em + 1px);
		transform-origin: bottom right;
	}
}

.joe_header__above-searchicon {
	margin-left: auto
}

.joe_header__below {
	position: relative;
	border-top: 1px solid var(--classC);
	height: 40px
}

.joe_header__below-title {
	max-width: 450px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: none;
	line-height: 40px;
	font-size: 17px;
	font-weight: 700;
	color: var(--main);
	-webkit-animation: showHeaderTitle 0.35s;
	animation: showHeaderTitle 0.35s
}

.joe_header__below-class {
	display: flex
}

.joe_header__below-class .item {
	margin-right: 15px;
	color: var(--minor);
	height: 40px;
	line-height: 40px;
	transition: color 0.35s;
	white-space: nowrap
}

.joe_header__below-class .item:hover,
.joe_header__below-class .item.active {
	color: var(--theme)
}

.joe_header__below-class .joe_dropdown {
	margin-right: 15px
}

.joe_header__below-class .joe_dropdown__link .item {
	margin-right: 3px
}

.joe_header__below-class .joe_dropdown__menu {
	width: 110px;
	text-align: center
}

.joe_header__below-class .joe_dropdown__menu a {
	display: block;
	height: 34px;
	line-height: 34px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--minor);
	transition: color 0.35s, background 0.35s
}

.joe_header__below-class .joe_dropdown__menu a:hover,
.joe_header__below-class .joe_dropdown__menu a.active {
	color: var(--theme);
	background: var(--classD)
}

.joe_header__below-sign {
	margin-left: auto
}

.joe_header__below-sign .joe_dropdown__link {
	display: flex;
	align-items: center;
	height: 45px;
	color: var(--minor);
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: color 0.35s
}

.joe_header__below-sign .joe_dropdown__link .icon {
	fill: var(--minor);
	margin-right: 3px;
	transition: fill 0.35s
}

.joe_header__below-sign .joe_dropdown__link:hover {
	color: var(--theme)
}

.joe_header__below-sign .joe_dropdown__link:hover .icon {
	fill: var(--theme)
}

.joe_header__below-sign .joe_dropdown__menu {
	width: 110px;
	text-align: center
}

.joe_header__below-sign .joe_dropdown__menu a {
	display: block;
	height: 34px;
	line-height: 34px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--minor);
	transition: color 0.35s, background 0.35s
}

.joe_header__below-sign .joe_dropdown__menu a:hover,
.joe_header__below-sign .joe_dropdown__menu a.active {
	color: var(--theme);
	background: var(--classD)
}

.joe_header__below-sign .item {
	display: flex;
	align-items: center;
	height: 40px;
	color: var(--minor);
}

.joe_header__below-sign .item .icon {
	fill: var(--minor);
	margin-right: 5px
}

.joe_header__below-sign .item a {
	color: var(--minor);
	transition: color 0.25s
}

.joe_header__below-sign .item a:hover {
	color: var(--theme)
}

.joe_header__below-sign .item .split {
	margin: 0 5px
}

.joe_header__searchout {
	position: absolute;
	top: 51px;
	left: 0;
	right: 0;
	z-index: 890;
	background: var(--background);
	border-top: 2px solid var(--classC);
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
	transition: visibility 0.35s, -webkit-transform 0.35s;
	transition: transform 0.35s, visibility 0.35s;
	transition: transform 0.35s, visibility 0.35s, -webkit-transform 0.35s;
	visibility: hidden
}

.joe_header__searchout.active {
	visibility: visible;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}

.joe_header__searchout-inner {
	padding: 15px 0;
	width: 100%
}

.joe_header__searchout-inner .search {
	width: 100%;
	display: flex;
	align-items: center
}

.joe_header__searchout-inner .search input {
	flex: 1;
	height: 36px;
	padding: 0 10px;
	border: 1.5px solid var(--classB);
	border-right: none;
	border-radius: 2px 0 0 2px;
	color: var(--routine);
	background: transparent;
	transition: 0.15s;
}

.joe_header__searchout-inner .search input:focus {
	border-color: var(--theme);
}

.joe_header__searchout-inner .search button {
	padding: 0 10px;
	height: 36px;
	border: none;
	background: var(--theme);
	color: #fff;
	border-radius: 0 2px 2px 0
}

.joe_header__searchout-inner .title {
	color: var(--routine);
	padding: 15px 0 10px;
	font-size: 16px;
	display: flex;
	align-items: center
}

.joe_header__searchout-inner .title .icon {
	width: 22px;
	height: 22px;
	fill: var(--routine);
	margin-right: 5px
}

.joe_header__searchout-inner .cloud {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -5px -5px
}

.joe_header__searchout-inner .cloud .item {
	padding: 5px
}

.joe_header__searchout-inner .cloud .item a {
	display: block;
	padding: 0 10px;
	height: 24px;
	line-height: 24px;
	border-radius: 2px;
	font-size: 12px;
	color: #fff
}

.joe_header__slideout {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 80%;
	z-index: 1020;
	background: var(--classD);
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	visibility: hidden;
	transition: visibility 0.35s, -webkit-transform 0.35s;
	transition: transform 0.35s, visibility 0.35s;
	transition: transform 0.35s, visibility 0.35s, -webkit-transform 0.35s;
	overflow-y: auto;
	padding: 10vh 15px 15px;
	/* height: calc(var(--vh, 1vh)* 100); */
}

.joe_header__slideout::-webkit-scrollbar {
	display: none
}

.joe_header__slideout.active {
	visibility: visible;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}

.joe_header__slideout-image {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% + 1px);
	-o-object-fit: cover;
	object-fit: cover;
	z-index: -1
}

.joe_header__slideout-author {
	display: flex;
	margin-bottom: 15px;
	border-radius: var(--radius-wrap);
	padding: 15px;
	box-shadow: var(--box-shadow)
}

.joe_header__slideout-author .avatar {
	width: 50px;
	height: 50px;
	margin-right: 10px;
	border-radius: 50%;
	/* 禁止收缩 */
	flex-shrink: 0;
}

.joe_header__slideout-author .info {
	/* 强制占满剩余空间 + 允许收缩 */
	flex: 1;
	/* 突破 Flex 项默认最小宽度限制 */
	min-width: 0;
	overflow: hidden;
	line-height: 25px
}

.joe_header__slideout-author .info .link,
.joe_header__slideout-author .info .motto {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden
}

.joe_header__slideout-author .info .link {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: var(--main)
}

.joe_header__slideout-author .info .motto {
	font-size: 12px;
	color: var(--routine)
}

.joe_header__slideout-count {
	border-radius: var(--radius-wrap);
	padding: 10px 15px;
	box-shadow: var(--box-shadow);
	margin-bottom: 15px
}

.joe_header__slideout-count .item {
	display: flex;
	align-items: center;
	color: var(--routine);
	padding: 5px 0
}

.joe_header__slideout-count .item .icon {
	width: 15px;
	height: 15px;
	fill: var(--routine);
	margin-right: 5px
}

.joe_header__slideout-count .item strong {
	font-weight: 500;
	color: var(--theme)
}

.joe_header__slideout-menu {
	padding: 10px 15px;
	border-radius: var(--radius-wrap);
	overflow: hidden;
	box-shadow: var(--box-shadow)
}

.joe_header__slideout-menu .link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	color: var(--main);
	transition: color 0.15s
}

.joe_header__slideout-menu .link a {
	transition: color 0.15s;
	color: var(--routine)
}

.joe_header__slideout-menu .link .icon {
	width: 13px;
	height: 13px;
	fill: var(--minor);
	transition: fill 0.15s, -webkit-transform 0.15s;
	transition: transform 0.15s, fill 0.15s;
	transition: transform 0.15s, fill 0.15s, -webkit-transform 0.15s
}

.joe_header__slideout-menu .link.in {
	color: var(--theme)
}

.joe_header__slideout-menu .link.in a {
	color: var(--theme)
}

.joe_header__slideout-menu .link.in .icon {
	fill: var(--theme);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg)
}

.joe_header__slideout-menu .current a {
	color: var(--theme);
	font-weight: 500;
	font-size: 15px
}

.joe_header__slideout-menu .slides {
	display: none;
	/* border-left: 1px solid var(--classC); */
	padding-left: 15px
}

.joe_header__slideout-menu .slides .link {
	color: var(--routine)
}

.joe_header__slideout-menu .slides .current {
	color: var(--theme);
	font-weight: 500;
	font-size: 15px
}

.joe_header__slideout-author,
.joe_header__slideout-count,
.joe_header__slideout-menu {
	background: var(--back-trn-75);
}

.joe_header__mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.65);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	opacity: 0;
	visibility: hidden;
	transition: visibility 0.35s, opacity 0.35s;
	z-index: 880
}

.joe_header__mask.active {
	visibility: visible;
	opacity: 1
}

.joe_header__mask.slideout {
	z-index: 1010
}

.joe_aside {
	width: 311px;
	margin-left: 15px;
	padding-bottom: 20px;
}

.joe_aside__item {
	/* position: relative; */
	width: 311px;
	margin-bottom: 20px;
	border-radius: var(--radius-inner);
	/* overflow: hidden */
}

.joe_aside__item:last-child {
	position: -webkit-sticky;
	position: sticky;
	margin-bottom: 0;
	transition: top 0.35s
}

.joe_aside__item-title {
	padding: 15px;
	padding-top: 0;
}

.joe_aside__item-title>.text {
	position: relative;
	padding-left: 1.2em;
	font-size: 15px;
	color: var(--main-color);
}

.joe_aside__item-title>.text:before {
	position: absolute;
	content: '';
	width: 4px;
	background: var(--theme);
	top: 10%;
	left: 2px;
	bottom: 10%;
	border-radius: 5px;
	box-shadow: 1px 1px 3px -1px var(--theme);
}

.joe_aside__item-title .icon {
	width: 18px;
	height: 18px;
	margin-right: 8px;
	fill: var(--main)
}

.joe_aside__item-title .line {
	width: 10px;
	height: 1px;
	background: #54b5db;
	margin-left: 12px
}

.joe_aside__item-contain {
	position: relative;
	overflow: auto;
	clear: both;
	background: var(--background);
	padding: 15px;
	box-shadow: 0 0 10px var(--main-shadow);
	border-radius: var(--main-radius);
	margin-bottom: 20px;
}

.joe_aside__item.timelife .item {
	margin-bottom: 15px
}

.joe_aside__item.timelife .item:last-child {
	margin-bottom: 0
}

.joe_aside__item.timelife .item .title {
	font-size: 12px;
	color: var(--minor);
	margin-bottom: 5px;
	display: flex;
	align-items: center
}

.joe_aside__item.timelife .item .title .text {
	color: var(--theme);
	font-weight: 500;
	font-size: 14px;
	margin: 0 5px
}

.joe_aside__item.timelife .item .progress {
	display: flex;
	align-items: center;
	position: unset;
}

.joe_aside__item.timelife .item .progress-bar {
	height: 10px;
	border-radius: 5px;
	overflow: hidden;
	background: var(--classC);
	width: 0;
	min-width: 0;
	flex: 1;
	margin-right: 5px
}

.joe_aside__item.timelife .item .progress-bar-inner {
	width: 0;
	height: 100%;
	border-radius: 5px;
	transition: width 0.35s;
	-webkit-animation: progress 750ms linear infinite;
	animation: progress 750ms linear infinite
}

.joe_aside__item.timelife .item .progress-bar-inner-0 {
	background: #bde6ff;
	background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
	background-size: 30px 30px
}

.joe_aside__item.timelife .item .progress-bar-inner-1 {
	background: #ffd980;
	background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
	background-size: 30px 30px
}

.joe_aside__item.timelife .item .progress-bar-inner-2 {
	background: #ffa9a9;
	background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
	background-size: 30px 30px
}

.joe_aside__item.timelife .item .progress-bar-inner-3 {
	background: #67c23a;
	background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
	background-size: 30px 30px
}

.joe_aside__item.timelife .item .progress-percentage {
	color: var(--minor)
}

.joe_aside__item.weather {
	background: var(--background)
}

.joe_aside__item.weather .joe_aside__item-contain {
	min-height: 300px
}

.joe_aside__item.hot .empty {
	text-align: center;
	color: var(--routine)
}

.joe_aside__item.hot .item {
	margin-bottom: 15px
}

.joe_aside__item.hot .item:last-child {
	margin-bottom: 0
}

.joe_aside__item.hot .item:nth-child(1) .link .sort {
	background: #ff183e
}

.joe_aside__item.hot .item:nth-child(2) .link .sort {
	background: #ff5c38
}

.joe_aside__item.hot .item:nth-child(3) .link .sort {
	background: #ffb821
}

.joe_aside__item.hot .item .link {
	position: relative;
	display: block;
	border-radius: var(--radius-inner);
	overflow: hidden
}

.joe_aside__item.hot .item .link:hover .image {
	-webkit-transform: scale(1.2);
	transform: scale(1.2)
}

.joe_aside__item.hot .item .link .sort {
	position: absolute;
	top: 5px;
	right: -20px;
	background: #7f7f8c;
	color: #fff;
	width: 65px;
	text-align: center;
	font-size: 12px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	font-weight: 500;
	z-index: 1;
	font-style: normal
}

.joe_aside__item.hot .item .link .image {
	width: 100%;
	height: 130px;
	-o-object-fit: cover;
	object-fit: cover;
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	transition: transform 0.35s, -webkit-transform 0.35s
}

/* 热门文章的封面是整站截图，底色本来就有白的。
   原来只从 describe 顶边开始拉黑渐变（0 → 0.75），标题那一行正好落在 0.1~0.3 的区间，
   白字压在白底上直接看不见 —— 用户截图里圈的就是这条「白带」。
   现在渐变提前 24px 起（靠 padding-top 把 describe 撑高），
   并且 45% 处就压到 0.45，保证不管封面多亮，标题下面都是深底。 */
.joe_aside__item.hot .item .link .describe {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 34px 10px 10px;
	/* 封面上半段保持原样，下半段快速压黑：
	   标题那一行（describe 的 35% 左右）必须已经有 0.6 以上的黑度，
	   不然遇到白底截图就是白字压白底。 */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 24%, rgba(0, 0, 0, 0.9) 62%, rgba(0, 0, 0, 0.94));
	font-size: 12px;
	color: rgba(255, 255, 255, 0.72)
}

.joe_aside__item.hot .item .link .describe h6 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
	line-height: 24px;
	font-size: 14px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5)
}

.joe_aside__item.today .joe_aside__item-contain .item {
	position: relative
}

.joe_aside__item.today .joe_aside__item-contain .item .tail {
	position: absolute;
	left: 6px;
	top: 0;
	height: 100%;
	border-left: 1px solid var(--classC)
}

.joe_aside__item.today .joe_aside__item-contain .item .head {
	position: absolute;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--background)
}

.joe_aside__item.today .joe_aside__item-contain .item .desc {
	position: relative;
	top: -2px;
	padding-left: 24px;
	padding-bottom: 15px
}

.joe_aside__item.today .joe_aside__item-contain .item .desc time {
	display: block;
	font-weight: 600;
	margin-bottom: 7px
}

.joe_aside__item.today .joe_aside__item-contain .item .desc a {
	display: block;
	color: var(--routine);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.25s;
	font-size: 13px
}

.joe_aside__item.today .joe_aside__item-contain .item .desc a:hover {
	color: var(--theme)
}

.joe_aside__item.today .joe_aside__item-contain .item:nth-child(even) .head {
	border: 1px solid #f48b29
}

.joe_aside__item.today .joe_aside__item-contain .item:nth-child(even) .desc {
	color: #f48b29
}

.joe_aside__item.today .joe_aside__item-contain .item:nth-child(odd) .head {
	border: 1px solid #f05454
}

.joe_aside__item.today .joe_aside__item-contain .item:nth-child(odd) .desc {
	color: #f05454
}

.joe_aside__item.today .joe_aside__item-contain .item:last-child .desc {
	padding-bottom: 0
}

.joe_aside__item.newreply .empty {
	text-align: center;
	color: var(--routine)
}

.joe_aside__item.newreply .item {
	margin-bottom: 15px;
	border-bottom: 1px dashed var(--classC);
	padding-bottom: 15px
}

.joe_aside__item.newreply .item:last-child {
	margin-bottom: 0;
	border-bottom-color: transparent;
	padding-bottom: 0
}

.joe_aside__item.newreply .item .user {
	display: flex;
	margin-bottom: 12px
}

.joe_aside__item.newreply .item .user .avatar {
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	margin-right: 12px;
	border-radius: 50%;
	border: 1px solid var(--classA);
	padding: 3px
}

.joe_aside__item.newreply .item .user .info {
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

.joe_aside__item.newreply .item .user .info .author {
	color: var(--main);
	font-weight: 600;
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.joe_aside__item.newreply .item .user .info .date {
	font-size: 12px;
	color: var(--minor)
}

.joe_aside__item.newreply .item .reply {
	position: relative;
	background: var(--body-bg-color);
	border-radius: 6px;
	padding: 5px 10px
}

.joe_aside__item.newreply .item .reply::before {
	content: '';
	width: 0;
	height: 0;
	border-bottom: 6px solid var(--body-bg-color);
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	position: absolute;
	left: 15px;
	bottom: 100%
}

.joe_aside__item.newreply .item .reply .link {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	/*! autoprefixer: off */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
	color: var(--minor);
	font-size: 13px;
	font-weight: 500;
	line-height: 24px;
	transition: all 0.35s;
	max-height: 48px
}

.joe_aside__item.newreply .item .reply .link:hover {
	color: var(--theme)
}

.joe_aside__item.newreply .item .reply .link .owo_image {
	height: 18px;
	vertical-align: -5px
}

.joe_aside__item.advert {
	display: block
}

.joe_aside__item.advert img {
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover
}

.joe_aside__item.advert .icon {
	position: absolute;
	z-index: 1;
	top: 10px;
	right: 10px;
	font-size: 12px;
	background: rgba(0, 0, 0, 0.25);
	padding: 2px 5px;
	border-radius: 2px;
	color: #ebebeb;
	pointer-events: none
}

.joe_aside__item.tags .empty {
	text-align: center;
	color: var(--routine)
}

.joe_aside__item.flatterer .content {
	border-style: solid;
	border-color: var(--classC);
	padding: 15px;
	line-height: 1.8;
	background: var(--classD);
	color: var(--routine);
	margin-bottom: 15px
}

.joe_aside__item.flatterer .content mark {
	background-color: transparent;
	background-image: linear-gradient(#ffe21d, #ffe21d);
	background-position: 0 85%;
	background-size: 100% 25%;
	background-repeat: no-repeat;
	color: var(--routine)
}

.joe_aside__item.flatterer .content.type1 {
	border-bottom-left-radius: 15px 255px;
	border-bottom-right-radius: 225px 15px;
	border-top-left-radius: 255px 15px;
	border-top-right-radius: 15px 225px
}

.joe_aside__item.flatterer .content.type2 {
	border-bottom-left-radius: 185px 25px;
	border-bottom-right-radius: 20px 205px;
	border-top-left-radius: 125px 25px;
	border-top-right-radius: 10px 205px
}

.joe_aside__item.flatterer .content.type3 {
	border-bottom-left-radius: 225px 15px;
	border-bottom-right-radius: 15px 255px;
	border-top-left-radius: 15px 225px;
	border-top-right-radius: 255px 15px
}

.joe_aside__item.flatterer .content.type4 {
	border-bottom-left-radius: 25px 115px;
	border-bottom-right-radius: 155px 25px;
	border-top-left-radius: 15px 225px;
	border-top-right-radius: 25px 150px
}

.joe_aside__item.flatterer .content.type5 {
	border-bottom-left-radius: 20px 115px;
	border-bottom-right-radius: 115px 20px;
	border-top-left-radius: 250px 15px;
	border-top-right-radius: 25px 80px
}

.joe_aside__item.flatterer .content.type6 {
	border-bottom-left-radius: 15px 225px;
	border-bottom-right-radius: 20px 205px;
	border-top-left-radius: 28px 125px;
	border-top-right-radius: 100px 30px
}

.joe_aside__item.flatterer .change {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin: 0 auto;
	cursor: pointer;
	border: 2px solid var(--classC)
}

.joe_aside__item.flatterer .change .icon {
	fill: var(--routine)
}

.joe_list__item {
	position: relative;
	width: 100%;
	padding: 20px;
	background: var(--background);
	margin-bottom: 15px;
	box-shadow: 0 0 10px var(--main-shadow);
	transition: .3s;
	border-radius: var(--radius-inner);
}

.joe_list__item:hover {
	transform: translateY(-1px);
}

.joe_list__item:last-child {
	border-bottom: none
}

.joe_list__item .information .title {
	padding-bottom: 2px;
	margin-bottom: 3px;
	position: relative;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	/*! autoprefixer: off */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
	color: var(--key-color);
	font-size: 18px;
	line-height: 24px;
	max-height: 50px;
	transition: color 0.35s
}

.joe_list__item.single .information .title {
	padding-bottom: 2px;
	margin-bottom: 10px;
}

.joe_list__item .information .title::after {
	content: '';
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--theme);
	transition: all 0.35s
}

.joe_list__item .information .title:hover {
	color: var(--theme)
}

.joe_list__item .information .title:hover::after {
	width: 100%
}

.joe_list__item .information .title .badge {
	display: inline-block;
	height: 20px;
	line-height: 20px;
	background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
	color: #fff;
	font-size: 12px;
	margin-right: 5px;
	border-radius: 2px;
	padding: 0 8px;
	white-space: nowrap;
	vertical-align: 2px
}

.joe_list__item .information .abstract {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	/*! autoprefixer: off */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--muted-color);
	word-break: break-word;
	line-height: 22px;
	max-height: 44px;
}

.joe_list__item.default .information .abstract {
	-webkit-line-clamp: 1;
	max-height: 22px;
	margin-bottom: 6px;
}

.joe_list__item.none .information .abstract {
	margin-bottom: 6px;
}

.joe_list__item.default .line {
	position: absolute;
	z-index: 1;
	top: 20px;
	left: 8px;
	width: 4px;
	height: 30px;
	border-radius: 2px;
	background: var(--theme);
	box-shadow: 1px 1px 3px -1px var(--theme);
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	transition: transform 0.35s, -webkit-transform 0.35s
}

.joe_list__item .item-tags a {
	font-size: 11px;
	padding: 2px 5px;
	margin-right: 5px;
}

.joe_list__item .item-tags a .fa {
	font-size: 1em;
}

.joe_list__item .item-meta item {
	margin-right: 8px;
	font-size: 13px;
	white-space: nowrap;
}

.joe_list__item .item-meta a,
.posts-mini .item-meta a {
	color: inherit;
}

.item-meta .avatar-mini {
	transform: translateY(-1px);
}

.joe_list__item .item-meta a,
.posts-mini .item-meta a {
	color: inherit;
}

.joe_list__item.default:hover .line {
	-webkit-transform: scaleY(1);
	transform: scaleY(1)
}

.joe_list__item.default {
	display: flex;
	position: relative;
}

.joe_list__item.default:hover .thumbnail img {
	opacity: 0.8
}

.joe_list__item.default:hover .thumbnail time {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}

.joe_list__item.default .thumbnail {
	flex-shrink: 0;
	position: relative;
	width: 190px;
	height: 133px;
	margin-right: 20px;
	overflow: hidden
}

.joe_list__item.default .thumbnail img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: var(--radius-inner);
	transition: opacity 0.35s
}

.joe_list__item.default .thumbnail time {
	position: absolute;
	z-index: 1;
	top: 5px;
	right: 5px;
	background: var(--theme);
	height: 20px;
	line-height: 20px;
	padding: 0 8px;
	color: #fff;
	font-size: 12px;
	border-radius: 10px;
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	transition: transform 0.35s, -webkit-transform 0.35s;
	-webkit-transform: translate3d(120%, 0, 0);
	transform: translate3d(120%, 0, 0)
}

.joe_list__item.default .thumbnail svg {
	position: absolute;
	z-index: 1;
	top: 5px;
	left: 5px;
	width: 20px;
	height: 20px;
	fill: #fff
}

.joe_list__item.default .information {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	justify-content: space-between;
}

.joe_list__item.single:hover .thumbnail img {
	opacity: 0.8
}

.joe_list__item.single:hover .thumbnail time {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0)
}

.joe_list__item.single .information {
	margin-bottom: 10px
}

.joe_list__item.single .thumbnail {
	display: block;
	position: relative;
	width: 100%;
	height: 280px;
	overflow: hidden;
	margin-bottom: 10px
}

.joe_list__item.single .thumbnail img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: var(--radius-inner);
	transition: opacity 0.35s
}

.joe_list__item.single .thumbnail time {
	position: absolute;
	z-index: 1;
	top: 10px;
	right: 10px;
	background: var(--theme);
	height: 20px;
	line-height: 20px;
	padding: 0 8px;
	color: #fff;
	font-size: 12px;
	border-radius: 10px;
	transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	transition: transform 0.35s, -webkit-transform 0.35s;
	-webkit-transform: translate3d(120%, 0, 0);
	transform: translate3d(120%, 0, 0)
}

.joe_list__item.single .thumbnail svg {
	position: absolute;
	z-index: 1;
	top: 10px;
	left: 10px;
	width: 20px;
	height: 20px;
	fill: #fff
}

.joe_list__item.multiple .information {
	margin-bottom: 15px
}

.joe_list__item.multiple .thumbnail {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 180px;
	gap: 15px;
	margin-bottom: 15px
}

.joe_list__item.multiple .thumbnail img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: transform 0.35s, opacity 0.35s;
	transition: transform 0.35s, opacity 0.35s, -webkit-transform 0.35s;
	border-radius: var(--radius-inner)
}

.joe_list__item.multiple .thumbnail img:hover {
	-webkit-transform: scale(1.025);
	transform: scale(1.025);
	opacity: 0.85
}

.joe_list__item.none .information {
	display: flex;
	flex-direction: column;
	height: 140px;
	justify-content: space-between;
}

.joe_list__loading .item {
	display: flex;
	/* position: relative; */
	width: 100%;
	padding: 15px;
	margin-bottom: 15px;
	background: var(--background);
}

.joe_list__loading .item:last-child {
	border-bottom: none
}

.joe_list__loading .item .thumbnail {
	/* flex-shrink: 0; */
	/* position: relative; */
	width: 190px;
	height: 133px;
	margin-right: 20px;
	background: var(--body-bg-color);
	-webkit-animation: list_thumbnail_loading 0.5s infinite alternate;
	animation: list_thumbnail_loading 0.5s infinite alternate;
	border-radius: var(--radius-inner)
}

.joe_list__loading .item .information {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.joe_list__loading .item .information>* {
	border-radius: var(--radius-inner);
	background: var(--body-bg-color);
}

.joe_list__loading .item .information .title {
	height: 26px;
	-webkit-animation: list_title_loading 0.75s infinite alternate;
	animation: list_title_loading 0.75s infinite alternate;
	margin-bottom: 15px
}

.joe_list__loading .item .information p {
	height: 20px;
	margin-bottom: 0px;
	-webkit-animation: list_abstract_loading 0.8s infinite alternate;
	animation: list_abstract_loading 0.8s infinite alternate
}

.joe_load_box {
	text-align: center;
	margin-top: 25px;
	margin-bottom: 10px;
}

.joe_load {
	border-radius: 30px;
	padding: 5px 15px;
	color: var(--muted-color);
	opacity: .6;
	cursor: pointer;
	user-select: none;
}

.joe_load:hover,
.joe_load:focus {
	background: var(--main-border-color);
	opacity: 1;
	color: var(--muted-color);
}

.joe_load>.fa {
	margin-right: 15px;
	transition: .3s;
}

.joe_load:hover>.fa,
.joe_load:focus>.fa {
	margin-right: 8px;
}

.joe_load:active {
	-webkit-transform: scale(0.75);
	transform: scale(0.75)
}

.joe_detail {
	background: var(--background);
	border-radius: var(--main-radius);
	padding: 15px 20px;
	box-shadow: 0 0 10px var(--main-shadow);
	margin-bottom: 15px
}

.joe_detail__category {
	display: flex;
	align-items: center;
	margin-bottom: 15px
}

.joe_detail__category .item {
	color: #fff;
	font-size: 12px;
	padding: 3px 8px;
	margin-right: 5px;
	border-radius: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 120px;
	transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: transform 0.35s, opacity 0.35s;
	transition: transform 0.35s, opacity 0.35s, -webkit-transform 0.35s
}

.joe_detail__category .item:hover {
	opacity: 0.85;
	-webkit-transform: translate3d(0, -3px, 0);
	transform: translate3d(0, -3px, 0)
}

.joe_detail__category .item:last-child {
	margin-right: 0
}

.joe_detail__category .item-0 {
	/*background: #0396ff*/
	background: var(--back-line-right);
}

.joe_detail__category .item-1 {
	background: #ea5455
}

.joe_detail__category .item-2 {
	background: #7367f0
}

.joe_detail__category .item-3 {
	background: #28c76f
}

.joe_detail__category .item-4 {
	background: #9f44d3
}

.joe_detail__category .edit {
	color: var(--minor);
	margin-left: auto
}

.joe_detail__category .edit:hover {
	color: var(--theme)
}

.joe_detail__title {
	font-size: 22px;
	color: var(--main-color);
	margin-bottom: 15px;
	word-break: break-word;
	font-weight: 700;
	line-height: 1.4;
}

.joe_detail__count {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.joe_detail__count-information {
	display: flex;
	align-items: center;
}

.joe_detail__count-information .avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	margin-right: 10px;
	/* border: 1px solid var(--classA); */
	/* padding: 3px; */
	-o-object-fit: cover;
	object-fit: cover
}

.joe_detail__count-information .meta {
	display: flex;
	flex-direction: column;
	height: 35px;
	justify-content: space-between;
	font-size: 12px
}

.joe_detail__count-information .meta .author .link {
	font-weight: 500;
	color: var(--main-color);
	font-size: 14px;
	transition: 0.3s;
}

.joe_detail__count-information .meta .author .link:hover {
	color: var(--theme);
}

.joe_detail__count-information .meta .item {
	display: flex;
	align-items: center;
	color: var(--muted-2-color);
	line-height: 20px;
	font-size: 14px;
}

.joe_detail__count-information .meta .item .line {
	color: var(--seat);
	margin: 0 7px;
	vertical-align: middle
}

.joe_main>.joe_detail>.relative {
	margin-top: 20px;
	position: relative;
	-webkit-backdrop-filter: unset !important;
	backdrop-filter: unset !important;
	font-size: 14px;
}

.line-form-line,
.line-form-line:before {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1px;
	width: 100%;
	transition: .8s;
	background: var(--main-border-color);
}

.line-form-line:before {
	content: '';
	width: 0;
	background: var(--theme);
}

.joe_main .joe_detail .single-metabox {
	display: flex;
	right: 0;
	--meta-color: var(--muted-color);
	align-items: center;
	-webkit-backdrop-filter: unset !important;
	backdrop-filter: unset !important;
	position: absolute;
	top: 50%;
	right: 0px;
	transform: translateY(-50%);
	z-index: 1;
	font-size: 15px;
}

.joe_main .joe_detail .single-metabox .post-metas {
	background: var(--body-bg-color);
	right: 0;
	padding: 2px 6px;
	border-radius: 100px;
	color: var(--meta-color);
}

.joe_main .joe_detail .single-metabox .post-metas item {
	margin: 0 4px;
}

.joe_main .joe_detail .single-metabox .post-metas item a {
	color: inherit;
}

/* .joe_main .joe_detail .single-metabox .post-metas item .fa, */
.joe_main .joe_detail .single-metabox .post-metas item .icon {
	width: 1em;
	height: 1em;
	vertical-align: -.15em;
	fill: currentColor;
	overflow: hidden;
}

.joe_main .joe_detail .single-metabox .clearfix {
	margin-left: 6px;
}

.joe_main .joe_detail .single-metabox .clearfix>a {
	background: var(--body-bg-color);
	--this-size: 1.73em;
	--this-color: var(--meta-color);
	--this-bg: var(--body-bg-color);
	padding: 0;
	border-radius: 5em;
	--this-size: 1.8em;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: var(--this-size);
	min-width: var(--this-size);
	border: 1px solid var(--this-border);
	vertical-align: middle;
	text-align: center;
	font-weight: 400;
	color: var(--this-color);
	--main-color: var(--this-color);
}

.joe_main .joe_detail .single-metabox .clearfix>a:hover {
	opacity: .8;
	color: var(--this-color);
}

.joe_main .joe_detail .single-metabox .clearfix svg {
	width: 1em;
	height: 1em;
	vertical-align: -.15em;
	fill: currentColor;
	overflow: hidden;
}

.joe_detail__overdue {
	padding-top: 20px
}

.joe_detail__overdue-wrapper {
	background: #fffcef;
	border-radius: var(--radius-inner);
	padding: 15px;
	color: #db7c22;
	border: 1px solid #ffbb76;
	-webkit-animation: overdue 1.5s ease-in-out;
	animation: overdue 1.5s ease-in-out
}

.joe_detail__overdue-wrapper .title {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: 500
}

.joe_detail__overdue-wrapper .title .icon {
	width: 20px;
	height: 20px;
	margin-right: 8px
}

.joe_detail__overdue-wrapper .content {
	padding-left: 28px
}

.joe_detail__overdue-wrapper:hover {
	-webkit-clip-path: circle(75%);
	clip-path: circle(75%)
}

.joe_detail__article .owo_image {
	max-height: 26px;
	vertical-align: top
}

.joe_detail__article-video {
	margin-bottom: 15px
}

.joe_detail__article-protected {
	display: flex;
	justify-content: center;
	background: repeating-linear-gradient(145deg, var(--classB), var(--classB) 15px, var(--background) 0, var(--background) 30px);
	padding: 20px 0;
	margin-bottom: 18px
}

.joe_detail__article-protected .contain {
	position: relative;
	box-shadow: var(--box-shadow);
	border-radius: 20px;
	overflow: hidden
}

.joe_detail__article-protected .contain .icon {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 15px
}

.joe_detail__article-protected .contain .password {
	width: 250px;
	height: 40px;
	border: none;
	color: var(--routine);
	padding-left: 50px;
	background: var(--background)
}

.joe_detail__article-protected .contain .submit {
	position: absolute;
	top: 50%;
	right: 15px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	color: var(--main);
	border: none;
	background: none
}

.joe_detail>.separator {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 15px;
	margin-bottom: 20px;
	font-size: .9em;
	color: var(--muted-3-color);
}

.joe_detail>.separator::after,
.joe_detail>.separator::before {
	content: '';
	background: var(--main-border-color);
	max-width: 20%;
	height: 1px;
	margin: 0 1em;
	flex: 1;
}

.joe_detail .article-tags {
	margin-bottom: 20px;
}

.joe_detail .article-tags a {
	font-size: 12px;
	margin: 3px;
}

.joe_detail .post-actions {
	padding-bottom: 15px;
	text-align: center;
}

.joe_detail .post-actions .action {
	width: 80px;
	padding: 10px 0;
	display: inline-block;
	opacity: .7;
	vertical-align: top;
	transition: color .2s, background .3s, opacity .3s, box-shadow .3s, transform .3s;
}

.joe_detail .post-actions .action.active {
	opacity: .9
}

.joe_detail .post-actions .action.active>svg,
.joe_detail .post-actions .action.active>text,
.joe_detail .post-actions .action.active>count {
	color: var(--theme);
}

.joe_detail .post-actions .action:focus>svg,
.joe_detail .post-actions .action:focus>text,
.joe_detail .post-actions .action:focus>count {
	color: var(--theme);
	text-decoration: none;
}

.joe_detail .post-actions .action:hover {
	color: inherit;
	opacity: 1;
}

.joe_detail .post-actions .action .icon {
	height: 1em;
	vertical-align: -.15em;
	fill: currentColor;
	overflow: hidden;
	color: var(--main-color);
	font-size: 24px;
	width: 100%;
	margin: 5px 0;
}

.joe_detail .post-actions .action count,
.joe_detail .post-actions .action text {
	opacity: .7;
	font-size: .9em;
	color: var(--main-color);
}

.joe_detail .post-actions .action-share {
	position: relative;
	cursor: pointer;
	transition: .3s;
	z-index: 90;
}

.joe_detail .post-actions .hover-show:hover .hover-show-con,
.joe_detail .post-actions .hover-show:hover~.hover-show-con,
.joe_detail .post-actions .hover-show:hover~.sub-menu {
	opacity: 1 !important;
	transform: translateY(0) !important;
	visibility: unset !important;
	backdrop-filter: unset !important;
}

.joe_detail .post-actions .action .dropdown-menu {
	opacity: 0;
	float: left;
	margin: 2px 0 0;
	font-size: 14px;
	text-align: left;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: var(--radius-inner);
	padding: 15px;
	clear: both;
	z-index: 992;
	list-style: none !important;
	margin-top: 6px;
	display: block;
	min-width: 100px;
	box-shadow: 0 0 10px 8px var(--main-shadow);
	color: var(--this-color);
	--this-color: var(--main-color);
	background: var(--background);
	border-color: transparent;
	width: 130px;
	margin-bottom: -10px !important;
	left: -24px;
	backdrop-filter: unset !important;
	-webkit-backdrop-filter: unset !important;
	top: auto;
	transition: 0.4s;
	position: absolute;
	visibility: hidden;
	bottom: 100%;
	margin-bottom: 6px;
	transform: translateY(-6px);
}

.joe_detail .post-actions .action .dropdown-menu::before,
.private-content::before {
	border-radius: 2px;
	transform: rotate(45deg);
	position: absolute;
	background: var(--background);
	content: ' ';
	display: inline-block;
	width: 9px;
	height: 9px;
	bottom: -4px;
	top: auto;
	left: 59px;
}

.joe_detail .post-actions .action .share-button .share-btn {
	display: flex;
	align-items: center;
	transition: color .2s, background .3s, opacity .3s, box-shadow .3s, transform .3s;
}

.joe_detail .post-actions .action .share-button .share-btn+.share-btn {
	margin-top: 10px;
}

.joe_detail .post-actions .action .share-button .share-btn:hover {
	opacity: .8;
}

.joe_detail .post-actions .action .share-button .share-btn:hover>text {
	transition: color .2s, background .3s, opacity .3s, box-shadow .3s, transform .3s;
	color: var(--theme);
}

.joe_detail .post-actions .action .share-button .share-btn icon {
	margin-right: 10px;
}

.joe_detail .post-actions .action .dropdown-menu .drop-newadd icon,
.joe_detail .post-actions .action .dropdown-menu .share-btn icon {
	width: 36px;
	height: 36px;
	display: inline-flex;
	border-radius: 100%;
	background: var(--main-border-color);
	justify-content: center;
	align-items: center;
	font-size: 22px;
	flex-shrink: 0;
	margin-right: 10px;
}

.joe_detail .post-actions .action .share-button .share-btn .icon {
	width: 1em;
	font-size: inherit;
	margin: auto;
	overflow: hidden;
	height: 1em;
	vertical-align: -.15em;
	fill: currentColor;
}

.joe_detail .post-actions .action .dropdown-menu .article .action count,
.joe_detail .post-actions .action .dropdown-menu .article .action text {
	opacity: .7;
	font-size: .9em;
}

.action-like .loading {
	content: '';
	width: .7em;
	height: .7em;
	display: inline-block;
	border: .1em solid transparent;
	border-radius: 50%;
	border-top-color: var(--theme);
	border-bottom-color: var(--theme);
	-webkit-animation: huan-rotate 1s cubic-bezier(.7, .1, .31, .9) infinite;
	animation: huan-rotate 1s cubic-bezier(.7, .1, .31, .9) infinite
}

.action-like .loading.zts {
	--this-color: var(--theme);
}

.joe_detail__copyright .content {
	padding: 15px 0;
	padding-top: 0;
}

.joe_detail__copyright .content .item {
	color: var(--muted-2-color);
	margin-bottom: 5px;
	word-break: break-word;
	line-height: 22px
}

.joe_detail__copyright .content .item:last-child {
	margin-bottom: 0
}

.joe_detail__copyright .content .item .icon {
	width: 18px;
	height: 18px;
	margin-right: 3px;
	vertical-align: -4px
}

.joe_detail__copyright .content .item .link {
	color: var(--muted-2-color);
}

.joe_detail__copyright .content .item .link:hover {
	color: var(--theme)
}

.joe_detail__related {
	margin-bottom: 15px;
}

.joe_detail__related-title {
	margin-bottom: 15px;
}

.joe_detail__related-content {
	clear: both;
	background: var(--main-bg-color);
	padding: 15px;
	box-shadow: 0 0 10px var(--main-shadow);
	border-radius: var(--main-radius);
	margin-bottom: 20px;
}

.yiyan-box {
	padding: 15px 15px;
	min-height: 40px;
	margin-bottom: 20px;
	border-radius: var(--radius-inner);
	background: var(--background);
	box-shadow: 0 0 10px var(--main-shadow);
	transition: box-shadow .3s;
	text-align: center;
}

.yiyan-box>.joe_motto {
	font-size: .8em;
	opacity: .8;
	color: var(--main-color);
}

/* 上下篇：左「上一篇」右「下一篇」，只有一条时铺满。
   原来写成 width:calc(50% - 7px) + inline-block，遇到文末是第一篇
   或最后一篇（只有单边）的时候，那半边只剩一半宽，右边空一大块，
   手机上看就是一张窄卡片顶在左边。改成 flex 让仅剩的一条自动撑满。 */
.article-nav {
	display: flex;
	align-items: stretch;
	gap: 14px;
}

.article-nav .box-body {
	width: auto;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	display: block;
	padding: 15px;
	border-radius: var(--main-radius);
	background: var(--background);
	box-shadow: 0 0 10px var(--main-shadow);
	transition: box-shadow .3s;
}

.article-nav .box-body+.box-body {
	margin-right: 0;
	float: none;
	text-align: right;
}

.article-nav .box-body>a {
	transition: color .2s, background .3s, opacity .3s, box-shadow .3s, transform .3s;
	color: var(--main-color);
}

.article-nav .box-body>a:hover {
	color: var(--theme);
}

.article-nav .box-body>a>p {
	color: var(--muted-2-color);
	margin: 0 0 10px;
}

.article-nav .box-body>a>p>i {
	font-size: 1.2em;
}

.article-nav .box-body>a>div {
	height: 2.8em;
	-webkit-line-clamp: 2;
	line-height: 1.4em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	white-space: normal;
}

.joe_detail__leaving {
	padding-top: 15px
}

.joe_detail__leaving-none {
	padding: 15px 0;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: var(--minor)
}

.joe_detail__leaving-list {
	position: relative;
	height: 500px
}

.joe_detail__leaving-list .item {
	display: none;
	position: absolute;
	width: 200px;
	overflow: hidden;
	box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	opacity: 0.88
}

.joe_detail__leaving-list .item .user {
	display: flex;
	align-items: center;
	padding: 0 10px;
	color: #fff;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.85);
	height: 40px;
	cursor: move
}

.joe_detail__leaving-list .item .user .avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%
}

.joe_detail__leaving-list .item .user .nickname {
	min-width: 0;
	flex: 1;
	margin: 0 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.joe_detail__leaving-list .item .user .nickname a {
	color: #fff
}

.joe_detail__leaving-list .item .user .date {
	margin-left: auto
}

.joe_detail__leaving-list .item .wrapper {
	padding: 10px
}

.joe_detail__leaving-list .item .wrapper .content {
	height: 140px;
	overflow-y: auto;
	word-break: break-word;
	line-height: 24px;
	color: #fff
}

.joe_detail__leaving-list .item .wrapper .content .draw_image {
	max-width: 100%
}

.joe_detail__leaving-list .item .wrapper .content .owo_image {
	max-height: 24px
}

.joe_footer {
	border-top: 1px solid var(--classB);
	color: var(--minor)
}

.joe_footer .joe_container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 65px
}

.joe_footer .joe_container .run {
	margin: 0 auto 0 10px
}

.joe_footer .joe_container a {
	color: var(--minor);
	transition: all 0.35s
}

.joe_footer .joe_container a:hover {
	color: var(--theme)
}

.joe_pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 0;
}

.joe_pagination li {
	margin-left: 5px
}

.joe_pagination li:first-child {
	margin-left: 0px;
}

.joe_pagination li a {
	padding: 6px 9px 5px;
	color: var(--muted-color);
	display: inline-block;
	border-radius: 3px;
	background-color: var(--main-border-color);
	margin: 3px;
	min-width: 31px;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.joe_pagination li.active a {
	background: var(--theme);
	color: #fff;
	font-weight: 500;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
}

.joe_pagination li a[href]:hover {
	opacity: .7;
}

.joe_pagination li a:hover .icon {
	fill: #fff
}

.joe_pagination li a .icon {
	width: 12px;
	height: 12px;
	fill: var(--routine);
}

.joe_pagination li a .icon-next {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg)
}

.joe_action {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 98
}

.joe_action_item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--float-btn-bg);
	border-radius: 8px;
	cursor: pointer;
	margin-top: 6px;
	transition: 0.3s;
	/* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.2) */
}

.joe_action_item:hover {
	opacity: 0.8;
}

.joe_action_item i {
	font-size: 18px;
	color: var(--muted-2-color);
	/* position: absolute;
	width: 25px;
	height: 25px;
	fill: var(--theme) */
}

.joe_action_item.scroll {
	visibility: hidden;
	-webkit-transform: scale(0);
	transform: scale(0);
	transition: 0.35s;
}

.joe_action_item.scroll.active {
	visibility: visible;
	-webkit-transform: scale(1);
	transform: scale(1)
}

.joe_action_item.mode i {
	position: absolute;
	/* display: none; */
	-webkit-transform: scale(0);
	transform: scale(0);
	opacity: 0;
	transition: opacity 0.85s, -webkit-transform 0.85s;
	transition: transform 0.85s, opacity 0.85s;
	transition: transform 0.85s, opacity 0.85s, -webkit-transform 0.85s
}

.joe_action_item.mode i.active {
	/* display: block; */
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1
}

.joe_comment {
	background: var(--background);
	border-radius: var(--radius-inner);
	box-shadow: var(--box-shadow);
	padding: 15px
}

.joe_comment .loading-module {
	text-align: center;
}

.joe_comment .loading-module>.loading {
	color: var(--theme);
}

.joe_comment__title {
	/* margin-bottom: 15px; */
}

.joe_comment__close {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--routine)
}

.joe_comment__close-icon {
	fill: var(--routine);
	margin-right: 5px
}

.joe_comment__respond-type {
	display: flex;
	align-items: center;
	/* justify-content: flex-end */
}

.joe_comment__respond-type .item {
	background: var(--body-bg-color);
	padding: 0 15px;
	height: 32px;
	color: var(--main);
	border: none;
	transition: 0.1s;
}

.joe_comment__respond-type .item:first-child {
	border-top-left-radius: var(--radius-inner)
}

.joe_comment__respond-type .item:last-child {
	border-top-right-radius: var(--radius-inner)
}

.joe_comment__respond-type .item.active {
	color: #2997f7;
	background: rgba(41, 151, 247, 0.1);
}

.joe_comment__respond-form {
	border-radius: 0px 6px 6px 6px;
	background: var(--body-bg-color)
}

.joe_comment__respond-form .head {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--classA)
}

.joe_comment__respond-form .head .list {
	flex: 1
}

.joe_comment__respond-form .head .list input {
	width: 100%;
	border: none;
	background: transparent;
	padding: 0 15px;
	height: 40px;
	color: var(--routine)
}

.joe_comment__respond-form .head .list:nth-child(2) {
	position: relative
}

.joe_comment__respond-form .head .list:nth-child(2)::after,
.joe_comment__respond-form .head .list:nth-child(2)::before {
	content: '';
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 1px;
	height: 15px;
	background: var(--classA)
}

.joe_comment__respond-form .head .list:nth-child(2)::before {
	left: 0
}

.joe_comment__respond-form .head .list:nth-child(2)::after {
	right: 0
}

.joe_comment__respond-form .body {
	padding: 15px;
}

.joe_comment__respond-form .body .text {
	width: 100%;
	height: 100px;
	border: none;
	resize: none;
	vertical-align: middle;
	color: var(--routine);
	background: transparent
}

.joe_comment__respond-form .body .draw {
	position: relative;
	width: 100%
}

.joe_comment__respond-form .body .draw .line {
	display: flex;
	align-items: center;
	position: absolute;
	top: 10px;
	left: 10px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.joe_comment__respond-form .body .draw .line li {
	cursor: pointer;
	margin-right: 10px;
	color: var(--main);
	transition: color 0.35s
}

.joe_comment__respond-form .body .draw .line li.active {
	color: var(--theme)
}

.joe_comment__respond-form .body .draw .color {
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 10px;
	left: 10px
}

.joe_comment__respond-form .body .draw .color li {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin: 0 5px;
	cursor: pointer;
	transition: box-shadow 0.35s
}

.joe_comment__respond-form .body .draw .color li.active {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35)
}

.joe_comment__respond-form .body .draw .color li:nth-child(1) {
	background: #303133
}

.joe_comment__respond-form .body .draw .color li:nth-child(2) {
	background: #67c23a
}

.joe_comment__respond-form .body .draw .color li:nth-child(3) {
	background: #e6a23c
}

.joe_comment__respond-form .body .draw .color li:nth-child(4) {
	background: #f56c6c
}

.joe_comment__respond-form .body .draw .icon {
	position: absolute;
	right: 10px;
	cursor: pointer;
	fill: var(--minor);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.joe_comment__respond-form .body .draw .icon-undo {
	top: 10px
}

.joe_comment__respond-form .body .draw .icon-animate {
	bottom: 10px
}

.joe_comment__respond-form .body .draw canvas {
	background: var(--background);
	border-radius: var(--radius-inner)
}

.joe_comment__respond-form .foot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px 15px
}

.joe_comment__respond-form .foot .owo {
	min-height: 32px;
	padding-top: 3px;
	overflow: auto;
}

.joe_comment__respond-form .foot .owo .seat {
	text-align: center;
	color: var(--routine);
	height: 26px;
	line-height: 26px;
	background: var(--background);
	opacity: 0.85;
	border-radius: 13px;
	width: 70px
}

.joe_comment__respond-form .foot .submit {
	position: absolute;
	top: 0;
	right: 15px;
	white-space: nowrap
}

.joe_comment__respond-form .foot .submit .cancle {
	display: none;
	color: var(--main);
	cursor: pointer;
	margin-right: 10px;
	transition: color 0.35s
}

.joe_comment__respond-form .foot .submit .cancle:hover {
	color: var(--theme)
}

.joe_comment__respond-form .foot .submit button,
.joe_comment__respond-form .foot .submit a {
	border-radius: var(--main-radius);
	height: 32px;
	padding: 0 15px;
	border: none;
	background: var(--theme);
	color: #fff;
	font-size: 14px;
	box-shadow: 1px 1px 3px -1px var(--theme);
	transition: 0.3s;
}

.joe_comment__respond-form .foot .submit a {
	display: inline-block;
	line-height: 32px;
	font-family: unset;
}

.joe_comment__respond-form .foot .submit button:hover {
	opacity: 0.8;
}

.joe_comment__respond-form .foot .submit a:hover {
	opacity: 0.8;
}

.joe_comment .comment-list {
	padding-top: 15px
}

.joe_comment .comment-list__item-contain .term {
	display: flex;
	margin-bottom: 15px
}

.joe_comment .comment-list__item-contain .term .avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	margin-right: 15px;
	padding: 3px;
	border: 1px solid var(--classD);
	-o-object-fit: cover;
	object-fit: cover;
	margin-top: 10px;
}

.joe_comment .comment-list__item-contain .term .content {
	min-width: 0;
	flex: 1;
	/* border-bottom: 1px solid var(--classC); */
	/* padding-bottom: 10px; */
}

.joe_comment .comment-list__item-contain .term .content .user {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	line-height: 20px;
	color: var(--main)
}

.joe_comment .comment-list__item-contain .term .content .user .nickname {
	display: flex;
	align-items: center;
}

.joe_comment .comment-list__item-contain .term .content .user .author {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.joe_comment .comment-list__item-contain .term .content .user .author a,
.joe_comment .comment-list__item-contain .term .content .substance .mobile-author a {
	color: #409eff
}

.joe_comment .comment-list__item-contain .term .content .user .owner {
	flex-shrink: 0;
	background: var(--theme);
	color: #fff;
	padding: 2px 2px;
	border-radius: 2px;
	font-style: normal;
	font-size: 10px;
	line-height: 10px;
	margin-left: 5px;
}

.joe_comment .comment-list__item-contain .term .content .user .agent {
	display: flex;
	align-items: center;
}

.joe_comment .comment-list__item-contain .term .content .user .agent img:first-child {
	margin-right: 5px;
}

.joe_comment .comment-list__item-contain .term .content .user .agent img {
	width: 14px;
	height: 14px;
}

.joe_comment .comment-list__item-contain .term .content .waiting {
	color: #e6a23c;
	font-style: normal
}

.joe_comment .comment-list__item-contain .term .content .substance {
	width: 100%;
	background: var(--body-bg-color);
	padding: 10px;
	border-radius: var(--radius-inner);
	color: var(--main-color);
	margin-bottom: 5px;
	word-break: break-word;
	line-height: 24px;
	transition: 0.2s;
}

.joe_comment .comment-list__item-contain .term .content .substance:focus {
	opacity: 0.8;
}

.joe_comment .comment-list__item-contain .term .content .substance .mobile-author {
	display: none;
}

.joe_comment .comment-list__item-contain .term .content .substance>p {
	display: inline;
	margin-bottom: 0;
}

.joe_comment .comment-list__item-contain .term .content .substance .parent {
	color: var(--key-color);
	font-weight: 500
}

.joe_comment .comment-list__item-contain .term .content .substance .owo_image {
	height: 22px;
	vertical-align: middle;
}

.joe_comment .comment-list__item-contain .term .content .substance .draw_image {
	max-width: 100%
}

.joe_comment .comment-list__item-contain .term .content .handle {
	display: flex;
	align-items: center;
	color: var(--minor);
	margin-left: auto;
}

.joe_comment .comment-list__item-contain .term .content .mobile-handle {
	display: none;
}

.joe_comment .comment-list__item-contain .term .content .handle .reply {
	display: flex;
	align-items: center;
	color: var(--main);
	font-size: 13px;
	cursor: pointer;
	transition: color 0.35s
}

.joe_comment .comment-list__item-contain .term .content .handle .reply .icon {
	margin-right: 3px
}

.joe_comment .comment-list__item-contain .term .content .handle .reply:hover {
	color: var(--theme)
}

.joe_comment .comment-list__item-contain .term .content .handle .reply:hover .icon {
	fill: var(--theme)
}

.joe_comment .comment-list__item-children {
	padding-left: 30px
}

.joe_comment .comment-list__item-children .comment-list__item-children {
	padding-left: 0
}

.joe_comment .comment-list__item .joe_comment__respond {
	margin-left: 63px;
	margin-bottom: 15px;
	-webkit-animation: showComment 0.5s;
	animation: showComment 0.5s
}

.joe_comment .comment-list .comment-list {
	padding-top: 0
}

.joe_comment .joe_pagination {
	padding: 5px 0;
}

.joe_run__day,
.joe_run__hour,
.joe_run__minute,
.joe_run__second {
	font-weight: 500;
	color: var(--theme);
}

.joe_owo__contain {
	position: relative
}

.joe_owo__contain .seat {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer
}

.joe_owo__contain .box {
	width: 100%;
	display: none;
	background: var(--background);
	border-radius: var(--radius-inner);
	overflow: hidden;
	margin-top: 15px
}

.joe_owo__contain .box .scroll {
	display: none;
	max-height: 200px;
	overflow-y: auto;
	-ms-scroll-chaining: none;
	overscroll-behavior: none;
	padding: 5px
}

.joe_owo__contain .box .scroll .item {
	text-align: center;
	width: calc(100% / 16);
	display: inline-block;
	padding: 5px;
	cursor: pointer;
	border-radius: var(--radius-inner);
	user-select: none;
	transition: background 0.05s
}

.joe_owo__contain .box .scroll .item img {
	max-width: 100%;
	max-height: 100%
}

.joe_owo__contain .box .scroll .item:hover {
	background: var(--classD)
}

.joe_owo__contain .box .scroll:nth-child(2) .item {
	font-size: 24px;
	line-height: 1;
}

.joe_owo__contain .box .scroll:nth-child(5) .item {
	color: var(--routine);
	width: calc(100% / 4);
	white-space: nowrap;
}

.joe_owo__contain .box .bar {
	display: flex;
	align-items: center;
	border-top: 1px solid var(--classC);
	overflow: auto;
}

.joe_owo__contain .box .bar .item {
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
	color: var(--routine);
	transition: 0.15s;
	white-space: nowrap;
}

.joe_owo__contain .box .bar .item.active,
.joe_owo__contain .box .bar .item:hover {
	color: #fff;
	background: var(--theme)
}

.profile-color-modes-illu-frame {
	opacity: 0
}

.profile-color-modes-illu-red {
	stroke: #da3633
}

.profile-color-modes-illu-orange {
	stroke: #f0883e
}

.profile-color-modes-illu-purple {
	stroke: #8957e5
}

.profile-color-modes-illu-green {
	stroke: #3fb950
}

.profile-color-modes-illu-blue {
	stroke: #388bfd
}

.profile-color-modes-illu-group {
	-webkit-animation: profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards;
	animation: profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards
}

.profile-color-modes-illu-frame {
	-webkit-animation: profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards;
	animation: profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards
}

.profile-color-modes-illu-frame:first-child {
	opacity: 1;
	-webkit-animation: profile-color-modes-illu-anim-frame-hide 0s forwards;
	animation: profile-color-modes-illu-anim-frame-hide 0s forwards
}

.profile-color-modes-illu-frame:nth-child(8) {
	-webkit-animation: profile-color-modes-illu-anim-frame-show 0s forwards;
	animation: profile-color-modes-illu-anim-frame-show 0s forwards
}

.profile-color-modes-illu-red {
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
	-webkit-animation-duration: 0.1s;
	animation-duration: 0.1s
}

.profile-color-modes-illu-orange {
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
	-webkit-animation-duration: 0.1s;
	animation-duration: 0.1s
}

.profile-color-modes-illu-purple {
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
	-webkit-animation-duration: 0.1s;
	animation-duration: 0.1s
}

.profile-color-modes-illu-blue {
	-webkit-animation-delay: 0.7s;
	animation-delay: 0.7s;
	-webkit-animation-duration: 0.1s;
	animation-duration: 0.1s
}

.profile-color-modes-illu-green {
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
	-webkit-animation-duration: 0.2s;
	animation-duration: 0.2s;
	-webkit-animation-timing-function: cubic-bezier(0.47, 2.92, 0.84, -1.5);
	animation-timing-function: cubic-bezier(0.47, 2.92, 0.84, -1.5)
}

.profile-color-modes-illu-frame:first-child {
	-webkit-animation-delay: 1.8s;
	animation-delay: 1.8s
}

.profile-color-modes-illu-frame:nth-child(2) {
	-webkit-animation-delay: 1.8s, 2.58s;
	animation-delay: 1.8s, 2.58s
}

.profile-color-modes-illu-frame:nth-child(3) {
	-webkit-animation-delay: 2.58s, 2.66s;
	animation-delay: 2.58s, 2.66s
}

.profile-color-modes-illu-frame:nth-child(4) {
	-webkit-animation-delay: 2.66s, 2.78s;
	animation-delay: 2.66s, 2.78s
}

.profile-color-modes-illu-frame:nth-child(5) {
	-webkit-animation-delay: 2.78s, 2.84s;
	animation-delay: 2.78s, 2.84s
}

.profile-color-modes-illu-frame:nth-child(6) {
	-webkit-animation-delay: 2.84s, 3.44s;
	animation-delay: 2.84s, 3.44s
}

.profile-color-modes-illu-frame:nth-child(7) {
	-webkit-animation-delay: 3.44s, 3.56s;
	animation-delay: 3.44s, 3.56s
}

.profile-color-modes-illu-frame:nth-child(8) {
	-webkit-animation-delay: 3.56s;
	animation-delay: 3.56s
}

.profile-color-modes-illu-frame:nth-child(9),
.profile-color-modes-illu-frame:nth-child(10) {
	-webkit-animation: none;
	animation: none
}

html .aplayer {
	margin: 0;
}

html .aplayer .aplayer-lrc {
	margin-left: 5px;
}

@-webkit-keyframes showComment {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.3);
		transform: scale(0.3)
	}

	50% {
		opacity: 1;
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}

	70% {
		-webkit-transform: scale(0.9);
		transform: scale(0.9)
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes showComment {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.3);
		transform: scale(0.3)
	}

	50% {
		opacity: 1;
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}

	70% {
		-webkit-transform: scale(0.9);
		transform: scale(0.9)
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

/* 
@keyframes box_shadow {
	0% {
		box-shadow: 0 0 0 0 #f56c6c
	}
} */

@keyframes progress {
	0% {
		background-position: 0 0
	}

	100% {
		background-position: 30px 0
	}
}

@keyframes list_thumbnail_loading {
	0% {
		-webkit-transform: scale(0.95);
		transform: scale(0.95)
	}

	100% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes list_title_loading {
	0% {
		width: 80%
	}

	100% {
		width: 95%
	}
}

@keyframes list_abstract_loading {
	0% {
		width: 60%
	}

	100% {
		width: 80%
	}
}

@keyframes profile-color-modes-illu-anim {
	0% {
		stroke: #666
	}
}

@keyframes profile-color-modes-illu-anim-frame-show {
	0% {
		opacity: 0;
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out
	}

	to {
		opacity: 1
	}
}

@keyframes profile-color-modes-illu-anim-frame-hide {
	0% {
		opacity: 1;
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in
	}

	to {
		opacity: 0
	}
}

@keyframes overdue {
	0% {
		-webkit-clip-path: circle(0 at 0 0);
		clip-path: circle(0 at 0 0)
	}

	100% {
		-webkit-clip-path: circle(100%);
		clip-path: circle(100%)
	}
}

@keyframes showHeaderTitle {
	0% {
		opacity: 0.25;
		-webkit-transform: scale(0.25);
		transform: scale(0.25)
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}


/*首页、文章页顶部大图*/
.HeaderImg {
	position: relative;
	width: 100%;
	height: 50rem;
	display: flex;
	margin-top: -6.5rem;
	justify-content: center;
	align-items: center;
	flex-direction: column
}

.HeaderImg.minImg {
	max-width: 83rem;
	height: 25rem;
	margin: auto
}

.HeaderImg.minImg .infomation .desctitle {
	font-size: 1.5rem
}

.HeaderImg img {
	-o-object-fit: cover;
	object-fit: cover
}

.HeaderImg .infomation {
	position: absolute;
	line-height: 2
}

.HeaderImg .infomation .title {
	font-size: 2rem;
	font-weight: 700;
	color: #fff;
	text-align: center;
	text-shadow: 0 .1875rem .3125rem #1c1f21;
	letter-spacing: .3rem
}

.HeaderImg .infomation .desctitle {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #f3f3f3;
	font-size: 1rem;
	padding: 0 1rem;
	text-shadow: 0 .1875rem .3125rem #1c1f21
}

.HeaderImg .HeaderImg_bottom {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: -5px
}

.HeaderImg .HeaderImg_bottom .waves-svg {
	width: 100%;
	height: 3rem
}

.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use {
	-webkit-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
	animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite
}

.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use:first-child {
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
	-webkit-animation-duration: 7s;
	animation-duration: 7s;
	fill: var(--back-trn-6);
	opacity: .9
}

.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use:nth-child(2) {
	-webkit-animation-delay: -3s;
	animation-delay: -3s;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
	fill: var(--back-trn-85);
}

.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use:nth-child(3) {
	-webkit-animation-delay: -4s;
	animation-delay: -4s;
	-webkit-animation-duration: 13s;
	animation-duration: 13s;
	fill: var(--back-trn-85);
}

.HeaderImg .HeaderImg_bottom .waves-svg .parallax>use:nth-child(4) {
	-webkit-animation-delay: -5s;
	animation-delay: -5s;
	-webkit-animation-duration: 20s;
	animation-duration: 20s;
	fill: var(--back-trn-6)
}

@-webkit-keyframes move-forever {
	0% {
		transform: translate3d(-90px, 0, 0)
	}

	to {
		transform: translate3d(85px, 0, 0)
	}
}

@keyframes move-forever {
	0% {
		transform: translate3d(-90px, 0, 0)
	}

	to {
		transform: translate3d(85px, 0, 0)
	}
}

.HeaderImg:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=)
}

@media(max-width: 768px) {
	.HeaderImg {
		height: 15rem;
		margin-top: 0
	}

	.HeaderImg.minImg {
		width: 100%;
		height: 15rem
	}

	.HeaderImg .infomation .title {
		font-size: 1.2rem
	}

	.HeaderImg .infomation .desctitle {
		font-size: .875rem
	}

	.HeaderImg .HeaderImg_bottom .waves-svg {
		height: 3rem
	}
}

.joe_aside.inactive {
	display: none
}

.joe_main {
	/* position: relative; */
}

.joe_main.animate__animated {
	--animate-duration: 0.6s;
	transform: translateZ(0);
	backface-visibility: hidden;
}

.joe_main.animate__slideInRight {
	-webkit-animation-name: slideInRight20;
	animation-name: slideInRight20
}

@keyframes slideInRight20 {
	0% {
		-webkit-transform: translate3d(20%, 0, 0);
		transform: translate3d(20%, 0, 0);
		visibility: visible;
	}

	to {
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}

.joe_main.animate__slideInLeft {
	-webkit-animation-name: slideInLeft20;
	animation-name: slideInLeft20
}

@keyframes slideInLeft20 {
	0% {
		-webkit-transform: translate3d(-20%, 0, 0);
		transform: translate3d(-20%, 0, 0);
		visibility: visible
	}

	to {
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}

@media(max-width: 768px) {
	.joe-stretch {
		display: none
	}
}

.joe-stretch {
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	padding: 40px 0
}

.joe-stretch .contain {
	position: -webkit-sticky;
	position: sticky;
	transition: top .5s;
	-webkit-animation: swingIconSet 2s infinite linear alternate;
	animation: swingIconSet 2s infinite linear alternate;
	z-index: 333
}

@-webkit-keyframes swingIconSet {
	0% {
		transform: rotate(-30deg)
	}

	100% {
		transform: rotate(30deg)
	}
}

@keyframes swingIconSet {
	0% {
		transform: rotate(-30deg)
	}

	100% {
		transform: rotate(30deg)
	}
}

.joe-stretch .contain::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 25px;
	border-top: 2px solid var(--minor);
	border-right: 2px solid var(--minor);
	transition: border .35s
}

.joe-stretch .contain svg {
	position: absolute;
	top: 25px;
	left: -3px;
	width: 24px;
	height: 24px;
	fill: var(--minor);
	cursor: pointer;
	transition: fill .35s
}

.joe-stretch .contain:hover {
	-webkit-animation-play-state: paused;
	animation-play-state: paused
}

.joe-stretch .contain:hover svg {
	fill: var(--theme)
}

.joe-stretch .contain:hover::before {
	border-color: var(--theme)
}

.joe-stretch.active {
	display: block
}

.joe_action_item.read_book {
	visibility: hidden;
	transform: scale(0)
}

.joe_action_item.read_book.active {
	visibility: visible;
	transform: scale(1)
}

.joe_action_item.read_book svg {
	transform: scale(0);
	opacity: 0;
	transition: transform .85s, opacity .85s
}

.joe_action_item.read_book svg.active {
	transform: scale(1);
	opacity: 1
}

.toggle-radius {
	background: var(--this-bg);
	width: 29px;
	height: 29px;
	display: inline-block;
	text-align: center;
	border-radius: 100%;
	position: relative;
	vertical-align: text-top;
	--this-bg: var(--main-border-color);
}

.footer {
	color: var(--muted-2-color);
	background: var(--main-bg-color);
	padding: 30px;
	font-size: 13px;
}

.container-fluid {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

.container-footer,
.container-header {
	max-width: 1380px;
	max-width: calc(var(--mian-max-width) + 180px);
}

@media (min-width: 992px) {

	.container-footer,
	.container-header {
		padding-right: 0;
		padding-left: 0;
	}
}

.list-inline {
	margin-left: 0;
}

.list-inline>li {
	display: inline-block;
	padding-right: 5px;
	padding-left: 5px;
}

.list-inline>li {
	vertical-align: middle;
}

.container-footer>.list-inline.flex {
	justify-content: space-between;
	align-items: center;
}

.footer .list-inline>li {
	margin: 5px 15px;
}

.footer .list-inline>li:last-child {
	float: right;
}

.footer a:not(.but):not(.focus-color) {
	color: var(--muted-2-color);
}

.footer a.toggle-radius:hover {
	color: var(--muted-2-color);
}

.ajax-option .option-items>a+a:before,
.fcode-links>a+a:before,
.icon-spot:before {
	content: '';
	width: 4px;
	height: 4px;
	margin: 0 .5em;
	border-radius: 50%;
	display: inline-block;
	vertical-align: middle;
	background: var(--main-color);
	opacity: .3;
	vertical-align: .2em;
}

.footer-miniimg {
	width: 90px;
	margin: 0 10px;
	text-align: center;
	vertical-align: text-top;
	display: inline-block;
}

.footer .footer-logo>.dark {
	display: none;
}

.footer-contact>a {
	font-size: 20px;
	margin: 5px;
	width: 35px;
	height: 35px;
}

.footer-contact>a:hover {
	color: var(--muted-2-color);
}

.footer-contact>a>.icon {
	right: 8px;
}

.footer-wechat-img {
	width: 140px;
	bottom: 90%;
	left: -55px;
	padding-bottom: 20px;
}

.popover {
	background: var(--main-bg-color);
	box-shadow: 0 0 10px 5px var(--main-shadow);
	padding: 0
}

.popover-title {
	background: var(--muted-border-color);
	border: 0 !important
}

.popover.top>.arrow:after {
	border-top-color: var(--main-bg-color) !important
}

.popover.right>.arrow::after {
	border-right-color: var(--main-bg-color) !important
}

.popover.bottom>.arrow::after {
	border-bottom-color: var(--main-bg-color) !important
}

.popover.left>.arrow::after {
	border-left-color: var(--main-bg-color) !important
}

.links-widget>.links-box>a {
	color: var(--main-color);
}

.links-widget>.links-box>a:hover {
	color: var(--theme);
}

.container {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

.container {
	position: relative;
}

@media (min-width: 768px) {
	.container {
		width: 750px;
	}
}

@media (min-width: 992px) {
	.container {
		width: 970px;
	}
}

@media (min-width: 1200px) {
	.container {
		width: 1170px;
	}
}

@media (min-width: 1240px) {
	.container {
		max-width: var(--mian-max-width);
		width: auto;
	}
}

.joe_scan_light {
	overflow: hidden;
	position: relative;
}

.joe_scan_light::before {
	content: '';
	position: absolute;
	inset: -20%;
	background: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%);
	animation: JoeScanLight 2s infinite;
	transform: translateX(-100%);
	z-index: 10;
}

@keyframes JoeScanLight {
	to {
		transform: translateX(100%);
	}
}

.featured-video-episode {
	margin-bottom: 0;
	line-height: 1.4;
	font-size: 14px;
}

.featured-video-episode .switch-video {
	line-height: 1.6;
	border-radius: 4px;
	padding: 6px 20px;
	text-align: center;
	background: rgba(136, 136, 136, .1);
	--main-color: var(--muted-color);
	display: inline-block;
	margin: 4px 4px 0;
	min-width: calc(20% - 12px);
	color: var(--main-color);
}

.featured-video-episode .switch-video:hover {
	color: var(--theme);
}

.switch-video.active {
	color: var(--theme);
}

.featured-video-episode .badg.badg-sm {
	min-width: 19px;
}

.switch-video.active .badg {
	background: var(--theme);
	color: #fff;
}

.switch-video .episode-active-icon {
	display: inline-block;
	width: 0;
	height: 1.2em;
	vertical-align: middle;
	margin-right: 0;
	transition: .6s;
}

.switch-video.active .episode-active-icon {
	background-image: url('../images/playing.svg');
	width: 1em;
	margin-right: 6px;
}

@media (max-width: 640px) {
	.featured-video-episode .switch-video {
		width: calc(50% - 6.5px);
		padding: 6px 10px;
		margin: 2px 2px 0;
	}
}

.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 160px;
	padding: 5px 0;
	margin: 2px 0 0;
	font-size: 14px;
	text-align: left;
	list-style: none;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 4px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.dropdown-menu {
	border-color: transparent;
	background: var(--main-bg-color);
	--this-color: var(--main-color);
	color: var(--this-color);
	box-shadow: 0 0 10px 8px var(--main-shadow);
	min-width: 100px;
	opacity: 0;
	transform: translateY(6px);
	transition: .3s;
	display: block;
	margin-top: 6px;
	visibility: hidden;
	list-style: none !important;
	z-index: 992;
}

.hover-show .hover-show-con,
.navbar-top .sub-menu,
.theme-popover {
	opacity: 0;
	transform: translateY(6px);
	transition: .4s;
}

.hover-show .hover-show-con {
	position: absolute;
	visibility: hidden;
}

.dropdown-menu::before,
.private-content::before {
	content: ' ';
	display: inline-block;
	width: 9px;
	height: 9px;
	background: var(--main-bg-color);
	position: absolute;
	top: 12px;
	transform: rotate(45deg);
	left: -4px;
	border-radius: 2px;
}

.dropdown .dropdown-menu::before {
	top: -4px;
	left: 12px;
}

.navbar-collapse .dropdown-menu .search-input {
	background: 0 0;
	padding: 10px;
	width: 460px;
}

.header .dropdown-menu a,
.header .sub-menu a,
.header .sub-menu svg {
	color: var(--main-color);
}

.hover-show:hover .hover-show-con,
.hover-show:hover~.hover-show-con,
.hover-show:hover~.sub-menu,
.navbar-top li:hover>.sub-menu {
	opacity: 1;
	transform: translateY(0);
}

.hover-show:hover .hover-show-con,
.hover-show:hover~.hover-show-con,
.hover-show:hover~.sub-menu {
	visibility: unset;
}

.author-tag a .fa,
.author-tag a .icon,
.author-tag>span .fa,
.author-tag>span .icon,
.item-meta item .icon {
	margin-right: 2px;
}

.author-tag .badg,
.author-tag .but {
	margin-right: 5px;
	margin: 2px;
	padding: .15em .4em;
	font-size: 12px;
	font-weight: 400
}

.widget-tag-cloud.author-tag .but {
	font-size: 13px
}

.turbolinks-progress-bar {
	visibility: hidden;
}

html #nprogress .bar {
	background: var(--theme);
	box-shadow: 0px 2px 5px 0px var(--theme);
}

html #nprogress .peg {
	box-shadow: 0 0 10px var(--theme), 0 0 5px var(--theme);
}

html #nprogress .spinner-icon {
	border-top-color: var(--theme);
	border-left-color: var(--theme);
}

.comment-list .popover-content a {
	color: var(--theme);
}

.user-card {
	padding: 0;
	overflow: hidden
}

.user-card .user-cover {
	border-radius: var(--main-radius) var(--main-radius) 0 0;
}

.user-card .card-content {
	padding: 15px
}

.user-card name .display-name {
	font-size: 1.1em;
	font-weight: 700
}

.user-card.widget .user-cover+.card-content {
	margin-top: -55px
}

.user-card.widget .user-avatar,
.user-card.widget .user-info {
	text-align: center
}

.user-card.widget .user-name name {
	justify-content: center
}

.user-card.widget .more-posts-mini {
	margin: 20px -5px 0 -5px
}

.user-card.widget .more-posts {
	margin-top: 20px
}

.user-card .more-posts-mini a {
	display: block;
	color: var(--muted-2-color);
	padding: 3px 0
}

.user-card.author .card-content,
.user-card.author .user-content {
	display: flex;
	align-items: center
}

.user-card.author .card-content>div {
	width: 50%
}

.user-card.author .user-info {
	margin: 0 20px;
	overflow: hidden
}

html .tooltip {
	z-index: 99;
}

#statistics strong {
	color: var(--theme);
	font-weight: 500;
}
/* 源码湾：主行动按钮统一品牌青绿（替换主题默认蓝色渐变） */
.jb-blue,
.jb-blue:hover {
	--this-bg: linear-gradient(135deg, #2CC7C7 10%, #128C8C 100%);
}

/* ===== 源码湾信息页 ===== */
/* 文档式排版：单列、无卡片、无装饰色块，靠字号与分隔线分层。 */

.ymw-container--full .joe_main {
	max-width: 100%;
}

.ymw-page {
	max-width: 720px;
	margin: 0 auto;
	padding: 10px 0 56px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--routine);
	overflow-wrap: break-word;
}

.ymw-page h1 {
	margin: 0 0 10px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0;
	color: var(--main);
}

.ymw-page .ymw-lead {
	margin: 0;
	font-size: 14px;
	line-height: 1.85;
	color: var(--minor);
}

.ymw-page h2 {
	margin: 44px 0 14px;
	padding: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--main);
	border: 0;
	background: none;
}

.ymw-page p {
	margin: 0 0 12px;
}

.ymw-page ul,
.ymw-page ol {
	margin: 0 0 14px;
	padding-left: 1.5em;
}

/* 主题全局把列表符号去掉了，这里显式加回来 */
.ymw-page ul {
	list-style: disc outside;
}

.ymw-page ol {
	list-style: decimal outside;
}

.ymw-page li {
	margin: 6px 0;
	/* 主题 normalize 里有一条 li{list-style:none}，这里覆盖回来 */
	list-style: inherit;
}

.ymw-page li::marker {
	color: var(--minor);
}

.ymw-page a {
	color: var(--theme);
	text-decoration: none;
}

.ymw-page a:hover {
	text-decoration: underline;
}

ul.ymw-cols2 a,
ul.ymw-rows a,
.ymw-tb a {
	color: inherit;
}

ul.ymw-cols2 a:hover,
ul.ymw-rows a:hover,
.ymw-tb a:hover {
	color: var(--theme);
	text-decoration: underline;
}

.ymw-tb--site th:first-child,
.ymw-tb--site td:first-child {
	width: 9em;
}

.ymw-page b,
.ymw-page strong {
	font-weight: 600;
	color: var(--main);
}

.ymw-kv {
	margin: 0 0 10px;
	font-size: 14px;
}

.ymw-kv b {
	display: inline-block;
	/* 现在只有「QQ」「邮箱」两个两字标签，5.5em 会留一个 49px 的空洞，
	   看着像漏了一列。3.5em 够放下两个汉字，又不会把值推太远。 */
	min-width: 3.5em;
	font-weight: 400;
	color: var(--minor);
}

.ymw-tb {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 10px;
	font-size: 14px;
}

.ymw-tb th,
.ymw-tb td {
	padding: 8px 12px 8px 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--classB);
}

.ymw-tb th {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--minor);
}

.ymw-tb td:last-child,
.ymw-tb th:last-child {
	padding-right: 0;
}

.ymw-tb__n {
	width: 3.5em;
	text-align: right;
	color: var(--minor);
	font-variant-numeric: tabular-nums;
}

.ymw-tb__date {
	width: 6.5em;
	text-align: right;
	color: var(--minor);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ymw-tb .is-empty {
	color: var(--minor);
}

.ymw-page pre {
	margin: 0 0 12px;
	padding: 14px 16px;
	font-size: 13px;
	line-height: 1.85;
	color: var(--routine);
	background: light-dark(#f7f8f9, #1b222a);
	border: 1px solid var(--classB);
	border-radius: 3px;
	overflow-x: auto;
}

.ymw-note {
	font-size: 14px;
	color: var(--minor);
}

.ymw-inline {
	margin: 0 0 12px;
	font-size: 14px;
}

.ymw-inline a + a::before {
	content: '·';
	margin: 0 10px;
	color: var(--minor);
}

ul.ymw-cols2 {
	list-style: none;
	column-count: 2;
	column-gap: 40px;
	margin: 0 0 14px;
	padding-left: 0;
	list-style: none;
}

ul.ymw-cols2 li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--classB);
	break-inside: avoid;
	font-size: 14px;
}

ul.ymw-cols2 li.is-empty {
	color: var(--minor);
}

ul.ymw-cols2 .ymw-n {
	color: var(--minor);
	font-variant-numeric: tabular-nums;
}

ul.ymw-rows {
	list-style: none;
	margin: 0 0 14px;
	padding-left: 0;
	list-style: none;
}

ul.ymw-rows li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 7px 0;
	border-bottom: 1px solid var(--classB);
	font-size: 14px;
}

.ymw-rows time {
	flex: none;
	color: var(--minor);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

.ymw-user {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 6px;
	padding: 14px 0;
	border-top: 1px solid var(--classB);
	border-bottom: 1px solid var(--classB);
}

.ymw-user img {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.ymw-user__name {
	font-size: 15px;
	font-weight: 600;
	color: var(--main);
}

.ymw-user__meta {
	font-size: 13px;
	color: var(--minor);
}

/* —— 表单（投稿 / 友链申请） —— */

.ymw-form {
	margin: 0 0 6px;
}

.ymw-form[hidden],
.ymw-done[hidden],
.ymw-msg[hidden] {
	display: none !important;
}

.ymw-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 28px;
}

.ymw-field {
	position: relative;
	margin: 0 0 18px;
}

.ymw-field>label,
.ymw-field>.ymw-label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--minor);
}

.ymw-field>label i {
	font-style: normal;
	font-size: 12px;
	color: var(--seat);
}

/* 密码框也要算进来：主题给 input[type=password] 单独定过宽度（170px），
   不进这个列表的话登录表单里它只有别人一半宽。 */
.ymw-field input[type="text"],
.ymw-field input[type="url"],
.ymw-field input[type="password"],
.ymw-field input[type="email"],
.ymw-field select,
.ymw-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	color: var(--routine);
	background: light-dark(#fff, #171d24);
	border: 1px solid var(--classB);
	border-radius: 3px;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ymw-field input::placeholder,
.ymw-field textarea::placeholder {
	color: var(--seat);
}

.ymw-field input[type="text"]:focus,
.ymw-field input[type="url"]:focus,
.ymw-field input[type="password"]:focus,
.ymw-field input[type="email"]:focus,
.ymw-field select:focus,
.ymw-field textarea:focus {
	border-color: var(--theme);
	box-shadow: 0 0 0 3px light-dark(rgba(23, 183, 183, 0.12), rgba(44, 199, 199, 0.16));
}

.ymw-field textarea {
	min-height: 108px;
	resize: vertical;
}

.ymw-field.is-error input,
.ymw-field.is-error select,
.ymw-field.is-error textarea {
	border-color: #d9534f;
}

.ymw-tip {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--seat);
}

.ymw-radios {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 22px;
	padding-top: 5px;
}

.ymw-radios label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: var(--routine);
	cursor: pointer;
}

.ymw-radios input {
	/* 主题 normalize 里有一条 input{-webkit-appearance:none}，会把单选圆点整个抹掉 */
	-webkit-appearance: auto;
	appearance: auto;
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--theme);
	cursor: pointer;
}

.ymw-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.ymw-count {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--seat);
	font-variant-numeric: tabular-nums;
}

.ymw-count.is-full {
	color: #d9534f;
}

.ymw-form__foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin: 2px 0 0;
}

.ymw-btn {
	padding: 10px 24px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	background: var(--theme);
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ymw-btn:hover {
	background: light-dark(#129e9e, #23b3b3);
}

/* ★`<a>` 做成按钮时，主题那条 `a:focus, a:hover { color: var(--theme) }`
   特异性 (0,1,1) 压过 `.ymw-btn` 的 (0,1,0) —— 实心青绿底上文字被染成同色，
   鼠标一移上去字就"消失"。这里给 a 版按钮补回白字，特异性 (0,2,1)。 */
a.ymw-btn,
a.ymw-btn:hover,
a.ymw-btn:focus {
	color: #fff;
}

/* 幽灵按钮是描边款，不能跟着上白字 */
a.ymw-btn--ghost,
a.ymw-btn--ghost:hover {
	color: var(--routine);
}

a.ymw-btn--ghost:hover {
	color: var(--theme);
}

.ymw-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.ymw-msg {
	margin: 0;
	font-size: 13px;
	color: #d9534f;
}

.ymw-done {
	margin: 4px 0 22px;
	padding: 18px 20px;
	background: light-dark(#f5f9f9, #1a2129);
	border: 1px solid var(--classB);
	border-radius: 3px;
}

.ymw-done p {
	margin: 0 0 6px;
	font-size: 14px;
}

.ymw-done p:last-child {
	margin-bottom: 0;
}

.ymw-done__t {
	font-size: 15px;
	font-weight: 600;
	color: var(--main);
}

.ymw-done--err .ymw-done__t {
	color: #d9534f;
}

/* —— 状态标记 —— */

.ymw-pill {
	display: inline-block;
	padding: 0 8px;
	font-size: 12px;
	line-height: 20px;
	border: 1px solid transparent;
	border-radius: 3px;
	white-space: nowrap;
}

.ymw-pill--pending {
	color: #8a5c00;
	background: light-dark(#fdf4e1, #3a2f16);
	border-color: light-dark(#efdcae, #57471f);
}

.ymw-pill--approved {
	color: #0f7355;
	background: light-dark(#e8f6f0, #13291f);
	border-color: light-dark(#bfe4d5, #1f4636);
}

.ymw-pill--rejected {
	color: #7d838c;
	background: light-dark(#f3f4f6, #262b31);
	border-color: light-dark(#e2e5ea, #3a4048);
}

/* —— 投稿箱：状态筛选 —— */

.ymw-inbox-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.ymw-inbox-tabs a,
.ymw-inbox-tabs a:hover {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 32px;
	padding: 0 13px;
	font-size: 13.5px;
	line-height: 1;
	color: var(--routine);
	text-decoration: none !important;
	background: var(--main-bg-color);
	border: 1px solid var(--classB);
	border-radius: 4px;
}

.ymw-inbox-tabs a:hover {
	color: var(--theme);
	border-color: var(--theme);
}

.ymw-inbox-tabs a.is-on {
	color: #fff;
	background: var(--theme);
	border-color: var(--theme);
}

.ymw-inbox-tabs a i {
	font-style: normal;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}

.ymw-inbox-tabs a.is-on i {
	opacity: 0.9;
}

/* —— 投稿箱：条目卡片 —— */

.ymw-inbox-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ymw-sub {
	padding: 0 18px 14px;
	background: var(--main-bg-color);
	border: 1px solid var(--classB);
	border-radius: 6px;
}

.ymw-sub__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 0 12px;
	border-bottom: 1px solid var(--classB);
}

.ymw-sub__title {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--main);
}

.ymw-sub__logo {
	width: 22px;
	height: 22px;
	object-fit: cover;
	border: 1px solid var(--classB);
	border-radius: 3px;
}

.ymw-sub__meta {
	margin-left: auto;
	font-size: 12.5px;
	color: var(--minor);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ymw-sub__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 28px;
	margin-top: 12px;
}

.ymw-sub__cell {
	display: flex;
	gap: 10px;
	min-width: 0;
	font-size: 14px;
	line-height: 1.8;
}

.ymw-sub__cell--wide {
	grid-column: 1 / -1;
}

.ymw-sub__k {
	flex: 0 0 3em;
	color: var(--minor);
}

.ymw-sub__v {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--routine);
	overflow-wrap: anywhere;
}

.ymw-sub__url,
.ymw-sub__url:hover {
	color: var(--theme);
	text-decoration: none;
}

.ymw-sub__url:hover {
	text-decoration: underline;
}

.ymw-sub__v--note {
	color: var(--minor);
}

.ymw-sub__acts {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--classB);
}

.ymw-sub__acts>form:first-of-type {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 8px;
}

.ymw-sub__acts>form:last-of-type {
	display: flex;
	margin-left: auto;
}

.ymw-sub__btns {
	display: flex;
	gap: 8px;
}

.ymw-mini {
	padding: 4px 12px;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.6;
	color: var(--routine);
	background: transparent;
	border: 1px solid var(--classB);
	border-radius: 3px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ymw-mini:hover {
	border-color: var(--theme);
	color: var(--theme);
}

.ymw-mini--ok {
	color: #15805e;
	border-color: light-dark(#b9e2d2, #245043);
}

.ymw-mini--ok:hover {
	color: #15805e;
	border-color: #15805e;
}

.ymw-mini--no:hover,
.ymw-mini--danger:hover {
	border-color: #d9534f;
	color: #d9534f;
}

/* —— 投稿箱：空态 —— */

.ymw-inbox-empty {
	padding: 48px 24px;
	text-align: center;
	background: var(--main-bg-color);
	border: 1px dashed var(--classB);
	border-radius: 6px;
}

.ymw-inbox-empty b {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--main);
}

.ymw-inbox-empty p {
	max-width: 30em;
	margin: 8px auto 16px;
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--minor);
}

.ymw-inbox-empty .ymw-btn {
	display: inline-block;
	color: #fff;
	text-decoration: none;
}

@media screen and (max-width:768px) {
	.ymw-inbox-tabs {
		gap: 6px;
		margin-bottom: 12px;
	}

	.ymw-inbox-tabs a {
		height: 30px;
		padding: 0 10px;
		font-size: 13px;
	}

	.ymw-sub {
		padding: 0 13px 12px;
	}

	.ymw-sub__head {
		gap: 6px;
		padding: 12px 0 10px;
	}

	.ymw-sub__title {
		font-size: 15px;
	}

	.ymw-sub__meta {
		flex: 0 0 100%;
		margin-left: 0;
		white-space: normal;
	}

	.ymw-sub__grid {
		grid-template-columns: 1fr;
		gap: 2px;
		margin-top: 10px;
	}

	.ymw-sub__cell {
		font-size: 13.5px;
		line-height: 1.7;
	}

	.ymw-sub__acts {
		gap: 6px;
		margin-top: 12px;
		padding-top: 10px;
	}

	.ymw-sub__acts>form:first-of-type {
		flex: 1 1 100%;
	}

	.ymw-sub__acts>form:last-of-type {
		margin-left: auto;
	}

	.ymw-sub__btns {
		gap: 6px;
	}

	.ymw-note-input {
		flex: 1 1 100%;
		width: 100%;
	}

	.ymw-inbox-empty {
		padding: 34px 18px;
	}
}

.ymw-note-input {
	flex: 0 1 220px;
	width: 14em;
	min-width: 0;
	padding: 4px 8px;
	font-family: inherit;
	font-size: 13px;
	color: var(--routine);
	background: light-dark(#fff, #171d24);
	border: 1px solid var(--classB);
	border-radius: 3px;
	outline: none;
}

.ymw-note-input:focus {
	border-color: var(--theme);
}

@media screen and (max-width:768px) {

	.ymw-page {
		padding: 12px 2px 40px;
		font-size: 14.5px;
		line-height: 1.85;
	}

	.ymw-page h1 {
		font-size: 21px;
	}

	.ymw-page h2 {
		margin-top: 34px;
		font-size: 15px;
	}

	ul.ymw-cols2 {
		column-count: 1;
	}

	.ymw-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.ymw-field {
		margin-bottom: 16px;
	}

	.ymw-btn {
		width: 100%;
	}

	.ymw-form__foot {
		gap: 10px;
	}

	.ymw-msg {
		font-size: 13px;
	}

	.ymw-kv b {
		min-width: 3.5em;
	}

	.ymw-tb th,
	.ymw-tb td {
		padding-right: 8px;
	}
}

/* ===== 源码湾页脚 ===== */
/* 结构：左侧品牌（logo + 一句话定位 + 联系方式），右侧三列链接贴着右边。
   之前三列是 `repeat(3, 1fr)`，每列 280px 却只有五六个字的链接，
   于是整块右边全是空隙、列与列之间飘着一大片白 —— 重排成「内容多宽就多宽」。 */
.ymw-ft {
	margin-top: 56px;
	border-top: 1px solid light-dark(#e3e7ea, #232b34);
	background-color: light-dark(#eef1f4, #151b22);
	color: light-dark(#4a5763, #aab6c1);
}

.ymw-ft__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px 64px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 46px 24px 36px;
}

.ymw-ft__brand {
	flex: 0 1 360px;
	min-width: 0;
}

.ymw-ft__logo {
	display: inline-block;
	line-height: 0;
}

.ymw-ft__logo>img {
	display: block;
	width: auto;
	height: 28px;
}

.ymw-ft__desc {
	margin: 15px 0 0;
	max-width: 32em;
	font-size: 13px;
	line-height: 1.95;
	color: light-dark(#65717c, #8f9ca8);
}

/* 联系列：跟其它列一样竖排、一项一行，链接样式直接吃 .ymw-ft__col a */
.ymw-ft__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

/* 四列（站内 / 频道 / 订阅 / 联系）各自按内容宽，再 space-between 顶到两头：
   等分 1fr 的话最后一列内容短，右端会留一截不齐；纯 flex 又会让整块挤到最右边、
   中间空出四百多像素。 */
.ymw-ft__nav {
	display: grid;
	grid-template-columns: repeat(4, max-content);
	justify-content: space-between;
	flex: 0 1 620px;
	gap: 0 40px;
}

.ymw-ft__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.ymw-ft__label {
	display: block;
	margin-bottom: 13px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .08em;
	color: light-dark(#8b969f, #6d7b87);
}

.ymw-ft__col a {
	width: fit-content;
	max-width: 100%;
	padding: 4px 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: light-dark(#3f4c56, #b9c4ce);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color .16s ease;
}

.ymw-ft__col a:hover {
	color: var(--theme);
}

.ymw-ft__bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 24px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 15px 24px 22px;
	border-top: 1px solid light-dark(#e0e5e9, #222a33);
	font-size: 12px;
	line-height: 1.7;
	color: light-dark(#7f8a93, #76828d);
}

.ymw-ft__bar a {
	color: inherit;
	text-decoration: none;
	transition: color .16s ease;
}

.ymw-ft__bar a:hover {
	color: var(--theme);
}

.ymw-ft__meta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
}

.ymw-ft__meta>*:not(:first-child)::before {
	content: '·';
	margin: 0 9px;
	color: light-dark(#b6bfc6, #4a5661);
}

.ymw-ft__meta b {
	font-weight: 500;
	color: light-dark(#5a6771, #93a0ab);
	font-variant-numeric: tabular-nums;
}

.ymw-ft__clock {
	font-variant-numeric: tabular-nums;
}

@media screen and (max-width: 900px) {
	.ymw-ft__inner {
		flex-direction: column;
		gap: 32px;
		padding: 38px 24px 32px;
	}

	.ymw-ft__brand {
		flex: none;
		max-width: none;
	}

	.ymw-ft__nav {
		/* 四列在窄屏排成 2×2，比挤成一排好读 */
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		/* 纵向排列时 flex-basis 会变成「高度」，不重置的话这块会撑出 600px */
		flex: none;
		gap: 26px 24px;
		width: 100%;
	}
}

@media screen and (max-width: 768px) {
	.ymw-ft {
		margin-top: 34px;
	}

	.ymw-ft__inner {
		padding: 30px 18px 26px;
		gap: 26px;
	}

	.ymw-ft__logo>img {
		height: 26px;
	}

	.ymw-ft__desc {
		margin-top: 12px;
		font-size: 12.5px;
		line-height: 1.9;
	}

	.ymw-ft__label {
		margin-bottom: 9px;
	}

	.ymw-ft__col a {
		font-size: 13px;
		padding: 3px 0;
	}

	.ymw-ft__bar {
		padding: 13px 18px 18px;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}

/* ===== 源码湾 SEO：语义化 h1（视觉零变化） ===== */
/* 首页的 h1 由 logo 承担。display:contents 让 h1 不生成盒子，<a> 仍按
   .navbar-brand 的直接子元素参与布局，因此排版与改前逐像素一致；
   后面几条是为了在极少数不支持 display:contents 的旧内核里也不跑版。 */
.ymw-logo-h1 {
	display: contents;
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* 归档页（分类 / 标签 / 搜索 / 作者 / 日期）的主标题由 div 升为 h1。
   原本的字号与字重都是从 .joe_archive__title 继承来的，所以这里 inherit 回去，
   只额外中和 h1 自带的 margin。 */
h1.joe_archive__title-title {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* 首页横幅站名升为 h1 后，只需中和浏览器给的默认外边距（字号 / 字重 / 行高
   本来就写在 .HeaderImg .infomation .title 里）。 */
.HeaderImg .infomation h1.title {
	margin: 0;
}

/* ===== 源码湾 资源信息卡（文章页标题下方） ===== */
/* 文章字段 resVersion / resLicense / panUrl 这些原来是只写不读的，
   读者得滚到文末才知道去哪下载。这张卡把规格和入口提到正文前面。
   配色跟随主题的 light-dark()，暗色模式不用另写一套。 */
.ymw-resbox {
	margin: 22px 0 26px;
	padding: 20px 22px 18px;
	border: 1px solid light-dark(#dbe8f2, #3c3d40);
	border-radius: 12px;
	background: light-dark(#f6fbfe, #2e2f32);
}

.ymw-resbox__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}

.ymw-resbox__tag {
	flex-shrink: 0;
	padding: 2px 9px;
	border-radius: 5px;
	background: var(--theme);
	color: #fff;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: .5px;
}

.ymw-resbox__note {
	font-size: 13px;
	line-height: 1.7;
	color: var(--minor);
}

/* 规格区：四列等宽网格，标签在上、值在下。
   中间试过两种都不行 ——
   · 「标签 值」横排 + 细竖线：按内容宽度排，四列挤在左边，
     卡越宽右边越空，看着像没写完；强行 1fr 拉满的话，
     标签之间的距离又大得离谱，一行里四个孤岛。
   · 「标签列 + 值列」两栏定义表：值都顶在同一条竖线上是整齐了，
     但值本身很短，右半张卡全空。
   四列等分、标签压在上方，两条基线（标签基线 / 值基线）贯穿整行，
   既铺满宽度又有网格感 —— 这是唯一同时站得住的排法。 */
.ymw-resbox__specs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 18px;
	row-gap: 14px;
	margin: 0;
}

/* 多一个「数据库」字段就是 5 条，五列；否则第 5 条会孤零零掉到第二行，
   右边留三个空格子，比不排还难看。 */
.ymw-resbox__specs:has(> .ymw-resbox__spec:nth-child(5)) {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ymw-resbox__spec {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	min-width: 0;
}

.ymw-resbox__spec dt {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	letter-spacing: .4px;
	color: var(--minor);
	white-space: nowrap;
}

.ymw-resbox__spec dd {
	margin: 0;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--main);
	overflow-wrap: anywhere;
}

/* 规格铺满一行在上，下载条单独一行在下 —— 两段的左端、右端都顶到
   卡片的内边距，中间只用 18px 留白分隔，不出现任何悬在中间的元素。 */
.ymw-resbox__body {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-top: 16px;
	border-top: 1px solid light-dark(#e6eff6, #3a3b3e);
}

/* 下载条通宽：内容撑开的那点宽度撑不住 700px 的卡，
   一宽就露出右手边一大片空白，像被人剪掉一截。
   下载条是 .ymw-resbox__body 里紧跟规格网格的兄弟节点，间距直接写在它身上。 */
#resbox .ymw-dl {
	width: 100%;
	margin-top: 18px;
}

/* 把剩余宽度留给文字块，箭头才会被顶到最右端 */
#resbox .ymw-dl__body {
	flex: 1 1 auto;
}

/* ===== 下载按钮：一家网盘一个样，直角，不用圆角 =====
   全站按钮都是圆角胶囊，再加一个胶囊等于没有视觉重量 ——
   读者根本分不清哪个是「下载」哪个是「点赞」。
   这里刻意做成直角方块：左边一竖条品牌色当图标底，
   右边两行字（网盘名 + 提取码），最右一个细箭头。
   网盘配色由 PHP 端按域名判定后以 --pan-color 传进来，
   所以百度是深蓝、阿里是紫、夸克是亮蓝，一眼能分出是哪家。
   圆角一律 0：这条是设计要求，不是忘了写。
   **没有任何 hover 动效**：不位移、不加阴影、箭头不滑。
   这类「浮起来 + 投个彩色影子」的反馈是模板站的味道，
   放在一个正儿八经的资源下载入口上显得轻浮。
   按钮长什么样就是什么样，点下去才有效果。 */
.ymw-dl {
	--pan-color: #0e8f96;
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	height: 46px;
	/* 暗色下描边收到中性灰：#1E6BFF 那圈亮蓝压在深灰底上
	   像被选中/聚焦的框，倒不像个按钮边框。品牌色留给左侧色块。 */
	border: 1px solid light-dark(var(--pan-color), #4b5058);
	border-radius: 0;
	background: light-dark(#fff, #34363b);
	text-decoration: none;
	overflow: hidden;
	/* 正文里的卡片会被 .joe_detail__article a 那条全局过渡命中
	   （color/background/opacity/box-shadow/transform 各 0.2~0.3s），
	   这里显式关掉，否则以后任何一处 hover 改动又会带出动画。 */
	transition: none;
}

/* 上面那句单写在 .ymw-dl 里压不住：
   .joe_detail__article a 是（0,1,1），比 .ymw-dl（0,1,0）高一级，
   而且 joe.article.css 排在 joe.global.css 之后加载，同权重也让不过去。
   所以这里按两处实际容器各抬一级权重，确保 transition 真的归零。 */
#resbox a.ymw-dl,
.joe_detail__article a.ymw-dl,
.ymw-dl-wrap a.ymw-dl {
	transition: none;
}

.ymw-dl__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	flex: 0 0 44px;
	background: var(--pan-color);
	color: #fff;
}

/* 网盘名和「无提取码」并成一行 —— 原来上下两行，320 宽时整条要占两个
   文字行才放得下，右边就没地方留给「下载」了。 */
.ymw-dl__body {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
	flex: 1 1 auto;
	padding: 0 12px 0 11px;
	line-height: 1.25;
}

/* 网盘名在浅色下用品牌色，暗色下必须转成近白 ——
   #1E6BFF 这种亮蓝压在 #34363b 上对比度只有 3:1 出头，
   暗色模式下几乎糊成一片，截图里那句「夸克网盘」就是这么消失的。 */
.ymw-dl__name {
	color: light-dark(var(--pan-color), #eef3fa);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .3px;
	white-space: nowrap;
	flex: 0 0 auto;
}

.ymw-dl__hint {
	min-width: 0;
	overflow: hidden;
	color: light-dark(#5f7183, #97a1b0);
	font-size: 12px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 箭头和 CTA 说的是同一件事，留一个就够；箭头那 30px 让给网盘名 */
.ymw-dl__arrow {
	display: none;
}

/* 额度用完时按钮变灰并改成登录入口，不给「假装还能点」的错觉。
   灰色用 #5f6469 而不是 #8a9099：后者当 15px 粗体的字压在白底上
   只有 2.9:1，读起来是「已禁用」那种发虚的观感。 */
.ymw-dl--locked {
	--pan-color: #5f6469;
	border-style: dashed;
}

/* ===== 实色条：把「信息行」变回「按钮」 =====
   白底 + 一圈细描边 + 品牌色文字，摆在规格网格正下方，
   读者扫过去会当成表格的又一行 —— 这就是「有的白痴不知道点击就能下载」
   的来源。整条铺满品牌色、白字，颜色本身就是最直接的「这里能点」，
   既不用加圆角，也不用加 hover 浮动。
   色值压深 12%（color-mix）：夸克蓝压白字 4.6:1 勉强及格，
   蓝奏云 / 123 云盘那种浅蓝只有 3:1 上下，不压深白字会糊。 */
#resbox a.ymw-dl:not(.ymw-dl--locked),
.ymw-dl-wrap a.ymw-dl:not(.ymw-dl--locked) {
	background: color-mix(in srgb, var(--pan-color) 88%, #000);
	border-color: transparent;
}

#resbox a.ymw-dl:not(.ymw-dl--locked) .ymw-dl__icon,
.ymw-dl-wrap a.ymw-dl:not(.ymw-dl--locked) .ymw-dl__icon {
	background: rgba(0, 0, 0, .18);
	color: #fff;
}

#resbox a.ymw-dl:not(.ymw-dl--locked) .ymw-dl__name,
.ymw-dl-wrap a.ymw-dl:not(.ymw-dl--locked) .ymw-dl__name {
	color: #fff;
}

#resbox a.ymw-dl:not(.ymw-dl--locked) .ymw-dl__hint,
.ymw-dl-wrap a.ymw-dl:not(.ymw-dl--locked) .ymw-dl__hint {
	color: rgba(255, 255, 255, .84);
}

#resbox a.ymw-dl:not(.ymw-dl--locked) .ymw-dl__arrow,
.ymw-dl-wrap a.ymw-dl:not(.ymw-dl--locked) .ymw-dl__arrow {
	color: #fff;
	opacity: 1;
}

/* 正文里的下载条（{cloud} 短代码 → joe-cloud 元素）。
   三轮改下来定在这版：通宽 + 右侧「免费下载」CTA。
   ① 214 的小胶囊：用户说「小气」；
   ② 420 的方块：用户说「右边你留着睡觉吗」——
      774 的正文栏里右边空出 350px，看着就是个没做完的表格；
   ③ 现在是 100% 通宽，但空的那一半用一句 CTA 填上，
      左边「谁 / 怎么取」、右边「点这里拿走」，中间不留空跑道。
   和顶部资源卡的那条下载条完全同构：同样 64 高、同样图标块、同样右端收在解析线上。 */
.ymw-dl-wrap {
	display: block;
	margin: 26px 0 30px;
}

.ymw-dl-wrap .ymw-dl {
	width: 100%;
	max-width: 100%;
	height: 46px;
}

.ymw-dl-wrap .ymw-dl__icon {
	flex: 0 0 44px;
	width: 44px;
}

.ymw-dl-wrap .ymw-dl__body {
	flex: 1 1 auto;
	padding: 0 12px 0 11px;
}

.ymw-dl-wrap .ymw-dl__name {
	font-size: 15px;
}

.ymw-dl-wrap .ymw-dl__hint {
	font-size: 12px;
}

/* 右端的 CTA。资源卡和正文两条都用，侧栏卡不用（它自己有一个整宽按钮）。
   和箭头之间用一条半透明白竖线隔开 —— 不是装饰，是把「这句话」
   和「这个箭头」圈成同一个点击区，让人一眼看出这里是按钮不是标签。 */
.ymw-dl__cta {
	display: none;
}

#resbox a.ymw-dl .ymw-dl__cta,
.ymw-dl-wrap a.ymw-dl .ymw-dl__cta {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin-left: auto;
	padding: 0 14px 0 12px;
	border-left: 1px solid light-dark(var(--classB), #4a4d54);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0;
	white-space: nowrap;
	/* 下载条本身已经改成白底细描边，白字压上去等于没有字。
	   文案改用网盘身份色，暗色下混一点白保住对比度。 */
	color: light-dark(var(--pan-color), color-mix(in srgb, var(--pan-color) 55%, #fff));
}

/* 额度用完那条是灰底虚线，白字看不见，单独退回正文色 */
#resbox a.ymw-dl--locked .ymw-dl__cta,
.ymw-dl-wrap a.ymw-dl--locked .ymw-dl__cta {
	padding-left: 16px;
	border-left-color: light-dark(#d7dee6, #4a4d54);
	font-weight: 600;
	color: var(--main);
}

.ymw-dl-wrap .ymw-dl__arrow {
	padding-right: 20px;
}

/* ===== 侧栏 / 悬浮面板里的下载卡 =====
   原来这一块是「一个 56px 的通栏色块 + 右边一个小箭头」，
   下面接两行字号一样、颜色一样的灰字。看截图就是一张图配一行说明，
   既不像卡，也不像个能点的东西 —— 用户给的评语是「不好看」。
   现在拆成三层，每层只干一件事：
     ① 身份行：小色块 logo + 网盘名 + 提取码（右对齐）
     ② 规格行：v7.1.3 · 35.7 MB · GPL-2.0，一行小字，超长省略
     ③ 整宽实心按钮「前往夸克网盘下载 ↓」+ 下方一行统计
   按钮实心、无圆角、无 hover：点得动这件事靠颜色和文字说清楚，
   不靠浮起来那一下。 */
.ymw-side {
	display: block;
}

.ymw-side__head {
	display: flex;
	align-items: center;
	min-width: 0;
}

/* logo 用 24px 小色块，不铺满整行高度 —— 侧栏一栏只 300 宽，
   大色块会把「网盘名」挤成配角。 */
.ymw-side__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	margin-right: 8px;
	background: var(--pan-color);
	color: #fff;
}

.ymw-side__title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--main);
}

.ymw-side__code {
	flex: 0 0 auto;
	margin-left: 8px;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--minor);
	white-space: nowrap;
}

.ymw-side__meta {
	margin: 7px 0 0;
	overflow: hidden;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--minor);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 色值统一压深 12%：夸克那个 #1E6BFF 上面压白字只有 4.6:1，
   蓝奏云 / 123 云盘那种更浅的蓝连 3:1 都不到，白字会糊。
   color-mix 在这里比手算一版深色表省事，也不用为每家网盘再维护一个色号。 */
.joe_aside .ymw-side__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 38px;
	margin-top: 11px;
	padding: 0 12px 0 14px;
	background: color-mix(in srgb, var(--pan-color) 88%, #000);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .3px;
	text-decoration: none;
	border-radius: 0;
	transition: none;
}

.joe_aside .ymw-side__btn svg {
	flex: 0 0 auto;
	opacity: .92;
}

/* 额度用完：侧栏这个按钮变成登录入口。
   保持实色（灰的），不做成虚线灰块 —— 它仍然是个「点了会发生事」的按钮，
   只是事情从「去下载」变成了「去登录」。 */
.joe_aside .ymw-side__btn--locked {
	background: light-dark(#5f6469, #3f434a);
	color: #fff;
}

.ymw-side__stat {
	margin: 9px 0 0;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--minor);
	font-variant-numeric: tabular-nums;
}

.ymw-side__stat b {
	color: var(--main);
	font-weight: 600;
}

/* ===== 悬浮副本：目录 + 资源下载 =====
   主题本来就有「悬浮目录」：aside 末尾留一个空 .posts-nav-box 副本，
   .joe_aside__item:last-child 挂了 position:sticky，JS 一开始 hide() 掉，
   滚过侧栏全部内容（h > asideHeight）之后 fadeIn。
   这里把副本升级成一个面板：目录 + 下载条，一起淡入淡出，
   所以不用再自己写 sticky —— :last-child 那条规则和 JS 设的 top 都还生效。
   注意：不要在这里写 display:none，否则 JS 量不到高度，asideHeight 会算错。 */
.ymw-float-panel .posts-nav-box {
	width: 100%;
}

/* 悬浮面板里这块自带一圈白底，是为了和上面的目录块在视觉上分开
   （目录是主题的，底色跟 aside 一样）。里面用的还是同一套 .ymw-side，
   不再单写一套尺寸 —— 两份尺寸各自漂移过一次，很难对齐。 */
.ymw-float-dl {
	margin-top: 12px;
	padding: 14px 15px 14px;
	background: light-dark(#fff, #323335);
	border-radius: var(--radius-inner);
}

/* 下载量这一行从按钮内部挪到了按钮下方（2026-10），
   所以这里不再需要竖细线，改成行内圆点分隔。
   竖线用 height + border-left 限制高度，不能让它跟整条等高 ——
   那样会把 54px 的条子切成两半，像表格的单元格。 */
/* 统计从按钮里搬出来，落在按钮下面当一行小字。
   挂在 <a> 里面的时候，它和网盘名一起把 64px 挤满，
   整条看着像表格的一行；现在按钮里只剩「谁 / 怎么取 / 点此下载」。 */
.ymw-resbox__stats {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
	color: var(--minor);
}

/* 原来每一项左边一条竖线，三根细线并排像表格，
   换成行内的中圆点分隔，读起来是一句话而不是三列数据。 */
.ymw-resbox__stat {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}

.ymw-resbox__stat + .ymw-resbox__stat::before {
	content: '·';
	margin: 0 9px;
	color: light-dark(#b7c6d3, #5a5f68);
	font-weight: 700;
}

.ymw-resbox__stat b {
	color: var(--main);
	font-size: 13.5px;
	font-weight: 600;
}

.ymw-resbox__stat--ok {
	color: var(--theme);
}

/* 额度提示：原来是一条 3px 橙色竖条 + 淡黄底，看着像 Notion 的 callout 模板，
   也是用户说「太 AI 了」的那条竖杠。现在改成整圈 1px 细描边，
   颜色强度全压在边线和文字上，形状上不再有任何装饰性色块。 */
.ymw-resbox__alert {
	margin: 0 0 14px;
	padding: 10px 13px;
	border: 1px solid light-dark(#eed9b4, #57483a);
	background: light-dark(#fffaf2, #332c24);
	color: light-dark(#7d4f08, #f0c98f);
	font-size: 13px;
	line-height: 1.7;
}

.ymw-resbox__code {
	font-size: 13px;
	color: var(--minor);
}

.ymw-resbox__code b {
	color: var(--main);
	font-weight: 600;
	letter-spacing: .5px;
}

/* 窄屏：下载条改两行 —— 上行网盘身份 + 箭头，下行下载量。
   统计不能再挂在右侧，390 宽度下三组计数跟网盘名抢不到 300px。 */
@media (max-width: 700px) {
	.ymw-dl {
		width: 100%;
	}

	/* 统计搬出按钮之后就再也不需要折行了（原来折行是为了把三组计数
	   甩到第二行）。这里必须显式 nowrap，否则 360 宽的机器上
	   flex-wrap 会把箭头挤到下一行，条子变 110 高。 */
	#resbox .ymw-dl {
		height: 46px;
		flex-wrap: nowrap;
		align-items: center;
	}

	#resbox .ymw-dl__icon {
		height: 44px;
	}

	/* 窄屏保留 CTA：整条已经窄到只剩「网盘名 + 一句 CTA」，
	   这时候「点此下载」四个字就是唯一的说明，比箭头有用。
	   代价是文字块要能被压缩，否则 nowrap 会把它顶出屏幕外。 */
	#resbox .ymw-dl__body {
		min-width: 0;
	}

	#resbox .ymw-dl__name,
	#resbox .ymw-dl__hint {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#resbox a.ymw-dl .ymw-dl__cta {
		padding-left: 12px;
		padding-right: 8px;
		font-size: 13px;
	}

	#resbox .ymw-dl__arrow {
		height: 44px;
	}
}

@media (max-width: 480px) {
	.ymw-resbox {
		padding: 14px 16px;
	}

	#resbox .ymw-dl__body {
		padding: 0 10px;
		gap: 6px;
	}

	#resbox .ymw-dl__name {
		font-size: 14px;
	}

	#resbox .ymw-dl__hint {
		font-size: 11.5px;
	}

	/* 320 这种窄机上三组计数加起来 229px + 两组「·」36px，超过卡片内宽
	   236px，第三组被挤到第二行、看着像被截断。缩字号 + 收窄分隔间距。 */
	.ymw-resbox__stats {
		font-size: 11.5px;
	}

	.ymw-resbox__stat + .ymw-resbox__stat::before {
		margin: 0 6px;
	}

	/* 手机上规格排两列。横着排会折成「版本 v2.0.3 | 授权」
	   这种半个字段被截断的样子；排成一列又要占掉四行、
	   把下载按钮推到屏幕外去。两列刚好一行两条，竖线去掉。
	   ⚠ 上面那条五列规则用了 :has()，权重比单类高一级，
	   media query 不加权重，所以这里必须把 :has() 那条原样再写一遍，否则压不住。 */
	.ymw-resbox__specs,
	.ymw-resbox__specs:has(> .ymw-resbox__spec:nth-child(5)) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 10px;
		column-gap: 10px;
	}

	.ymw-resbox__spec {
		padding: 0;
		border-left: 0;
	}

	.ymw-resbox__spec dt {
		min-width: 0;
	}
}

/* 源码湾：正文里的 {gird column="2"} 双列网格，手机上强制单列。
   grid-template-columns 是短代码 JS 写在元素 style 上的内联样式，
   外部 CSS 不加 !important 根本压不住 —— 别以为是选择器权重不够。 */
@media (max-width: 640px) {
	.joe_gird {
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}

	.joe_gird__item {
		line-height: 24px;
	}
}

/* ============================================================
   源码湾修复：锚点跳转后标题被固定头部盖住
   .joe_header 是 position:fixed（桌面 68px / 手机 52px），
   浏览器原生的 #hash 跳转只把目标顶到视口最上沿，
   结果标题正正好好躲在头部后面 —— 从站外点带锚点的分享链接、
   或在正文里点交叉引用，看到的就是「文字上部分被盖住」。
   主题自己的目录 JS 是手动算 offset 的，所以点侧边目录反而没事，
   这就是「有时候」才复现的原因。用 scroll-padding 兜住原生跳转。
   ============================================================ */
html {
	scroll-padding-top: 88px;
}

.joe_detail__article h2,
.joe_detail__article h3,
.joe_detail__article h4,
.joe_detail__article h5,
.joe_detail__article h6 {
	scroll-margin-top: 88px;
}

@media (max-width: 768px) {
	html {
		scroll-padding-top: 72px;
	}

	.joe_detail__article h2,
	.joe_detail__article h3,
	.joe_detail__article h4,
	.joe_detail__article h5,
	.joe_detail__article h6 {
		scroll-margin-top: 72px;
	}
}

/* 说明：手机端列表标题 scrollHeight 66 > clientHeight 45 并不是 bug，
   那是 -webkit-line-clamp: 2 的固有表现（第 3 行被省略号截掉），
   别拿这个数字当「文字被裁」的证据。 */

/* ===== 源码湾：文末实测声明 =====
   原来这句话是正文最后一段，跟正文一样的字号，读者当成正文的一部分。
   抽出来做成一条注释块：左边一道细竖线、灰底、字号小一号，
   读的时候眼睛会自动归到"元信息"而不是"内容"。 */
/* 文末实测说明。
   原来做的是「左侧一条竖色条 + 浅底 + 圆角」那种 tip 块 —— 这套组件
   是模板和 AI 生成页面的通用长相，放在一篇自己要人信的实测文末尾，
   反而像贴了张便签。现在按脚注处理：上面一条通栏细线，标签加粗，
   正文小一号压成次要色，不加底色不加竖线。 */
.ymw-labnote {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 32px 0 6px;
	padding-top: 14px;
	border-top: 1px solid light-dark(#e6eff6, #383a3e);
}

.ymw-labnote__tag {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.75;
	letter-spacing: .6px;
	color: var(--main);
}

.ymw-labnote__text {
	margin: 0;
	font-size: 13px;
	line-height: 1.75;
	color: var(--minor);
}

@media (max-width: 480px) {
	.ymw-labnote {
		flex-direction: column;
		gap: 2px;
	}
}

/* ===== 头部搜索联想面板 =====
   空输入时是「热门文章 5 条 + 最近更新 4 条」，敲字后切成实时联想。
   结构在 module/header/custom.php，逻辑在 assets/js/ymw.search.js。 */
.navbar-form.hover-show:focus-within .hover-show-con {
	opacity: 1;
	transform: translateY(0);
	visibility: unset;
}

/* 输入框的 196px 不是谁定的，是它从没被定过宽度：桌面端 .form-control
   是 width:auto，浏览器就按默认 20 字符算。于是面板怎么调都跟它对不上。
   现在反过来 —— 宽度由 --ymw-sg-w 一处决定，输入框吃它，面板靠
   left:0/right:0 继承同一个盒子，两者左右边缘恒等，任何视口都不会错位。
   阶梯值按实测余量取：1200px 视口下头部只剩 21px 空隙，不能加宽；
   1280 起有 60px，1366 起有 187px。 */
.navbar-form.navbar-left {
	--ymw-sg-w: 196px;
}

@media (min-width: 1280px) {
	.navbar-form.navbar-left {
		--ymw-sg-w: 280px;
	}
}

@media (min-width: 1366px) {
	.navbar-form.navbar-left {
		--ymw-sg-w: 340px;
	}
}

@media (min-width: 768px) {
	.navbar-form.navbar-left .search-input {
		width: var(--ymw-sg-w);
	}
}

.navbar-form [lazyload-action="ias"] {
	position: relative;
}

.ymw-sg {
	left: 0;
	right: 0;
	width: auto;
	padding: 0;
	overflow: hidden;
	/* 暗色下面板原本是 #323335，页面是 #292A2D —— 只差 9 级，加 10% 透明
	   边框等于没加，整块浮不起来。往上提 8% 白，亮色仍是纯白，不偏色。 */
	background: color-mix(in srgb, var(--main-bg-color) 92%, #fff);
	border: 1px solid color-mix(in srgb, var(--main) 10%, transparent);
	border-radius: var(--main-radius);
	box-shadow: 0 12px 30px light-dark(rgba(15, 23, 42, .13), rgba(0, 0, 0, .42));
}

.ymw-sg [hidden] {
	display: none !important;
}

/* 主题给 .dropdown-menu 挂了个 9px 菱形小尖，本来是指向菜单触发器的。
   面板现在跟输入框等宽、又加了 overflow:hidden，这半个菱形被裁成一块
   贴在左上角的碎片；它用的还是旧的 --main-bg-color，暗色下跟新底色对不上。
   宽度已经对齐了，尖角没有存在意义，去掉。 */
.ymw-sg::before {
	display: none;
}

.ymw-sg__idle {
	padding: 17px 18px 0;
}

.ymw-sg__block + .ymw-sg__block {
	margin-top: 17px;
}

.ymw-sg__label {
	display: flex;
	align-items: center;
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .1em;
	color: var(--minor);
}

/* 标题前一根品牌色小竖条，比纯文字标题更容易被眼睛抓到 */
.ymw-sg__label::before {
	content: '';
	flex: 0 0 3px;
	width: 3px;
	height: 11px;
	margin-right: 7px;
	border-radius: 1px;
	background: var(--theme);
}

.ymw-sg__hot {
	margin: 0 -8px;
}

.header .ymw-sg .ymw-sg__hotitem {
	display: flex;
	align-items: baseline;
	gap: 8px;
	height: 32px;
	padding: 0 8px;
	border-radius: 5px;
	font-size: 13px;
	line-height: 32px;
	color: var(--main);
	text-decoration: none;
}

.header .ymw-sg .ymw-sg__hotitem:hover {
	background: color-mix(in srgb, var(--theme) 8%, transparent);
}

.ymw-sg__hotitem > b {
	flex: 0 0 17px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	color: var(--theme);
	opacity: .5;
	font-variant-numeric: tabular-nums;
}

.header .ymw-sg .ymw-sg__hotitem:hover > b {
	opacity: 1;
}

.ymw-sg__hotmain {
	/* 主名按内容宽度走，不参与收缩；否则 flex 会把「Halo 建站系统」也压成省略号。
	   上限 46% 是防超长主名一个人吃光整行。 */
	flex: 0 0 auto;
	max-width: 46%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	color: var(--main);
}

.header .ymw-sg .ymw-sg__hotitem:hover .ymw-sg__hotmain {
	color: var(--theme);
}

.ymw-sg__hotdesc {
	/* basis 0：只吃主名剩下的空间，不跟主名抢 */
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12.5px;
	color: var(--minor);
}

.ymw-sg__recent {
	margin: 0 -8px;
}

.header .ymw-sg .ymw-sg__recentitem {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	height: 28px;
	padding: 0 8px;
	border-radius: 5px;
	/* 比热门那栏低半档：热门是主推，最近更新只是顺手看一眼，
	   字号一样大的话两块会互相抢视线。 */
	font-size: 12.5px;
	line-height: 28px;
	color: var(--main);
	text-decoration: none;
}

.header .ymw-sg .ymw-sg__recentitem:hover {
	background: color-mix(in srgb, var(--theme) 8%, transparent);
}

.header .ymw-sg .ymw-sg__recentitem:hover .ymw-sg__rcname {
	color: var(--theme);
}

.ymw-sg__rcname {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ymw-sg__rcdate {
	flex: 0 0 auto;
	font-style: normal;
	font-size: 11px;
	color: var(--minor);
	font-variant-numeric: tabular-nums;
}

.ymw-sg__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* 原来是实心灰底胶囊，暗色下 12 个挤在一起像一堵墙。
   改成细描边、透明底，靠边框交代可点性。 */
.header .ymw-sg .ymw-sg__tag {
	display: inline-block;
	padding: 2px 9px;
	border: 1px solid var(--main-border-color);
	border-radius: 4px;
	background: none;
	font-size: 12px;
	line-height: 1.7;
	color: var(--routine);
	text-decoration: none;
}

.header .ymw-sg .ymw-sg__tag:hover {
	border-color: var(--theme);
	background: color-mix(in srgb, var(--theme) 9%, transparent);
	color: var(--theme);
}

.header .ymw-sg .ymw-sg__more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 17px -18px 0;
	padding: 12px 18px;
	border-top: 1px solid var(--main-border-color);
	background: color-mix(in srgb, var(--main) 7%, transparent);
	font-size: 12.5px;
	color: var(--minor);
	text-decoration: none;
}

.header .ymw-sg .ymw-sg__more:hover {
	background: color-mix(in srgb, var(--theme) 6%, transparent);
}

.ymw-sg__more > b {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--theme);
}

.ymw-sg__panel {
	padding: 8px;
}

.header .ymw-sg .ymw-sg__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 5px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--main);
	text-decoration: none;
}

/* 结果之间加一道极淡的线：原来四条全靠留白分，暗色下会糊成一片 */
.header .ymw-sg .ymw-sg__item + .ymw-sg__item {
	border-top: 1px solid color-mix(in srgb, var(--main) 8%, transparent);
}

.header .ymw-sg .ymw-sg__item.is-active,
.header .ymw-sg .ymw-sg__item:hover {
	background: color-mix(in srgb, var(--theme) 9%, transparent);
	color: var(--main);
}

.ymw-sg__t {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ymw-sg__t mark {
	padding: 0;
	background: none;
	font-weight: 700;
	color: var(--theme);
}

.ymw-sg__m {
	flex: 0 0 auto;
	font-style: normal;
	font-size: 11px;
	letter-spacing: .02em;
	color: var(--minor);
	white-space: nowrap;
}

.ymw-sg__empty {
	margin: 0;
	padding: 22px 12px 24px;
	text-align: center;
	font-size: 13px;
	line-height: 1.6;
	color: var(--main);
}

.ymw-sg__empty > em {
	display: block;
	margin-top: 5px;
	font-style: normal;
	font-size: 12px;
	color: var(--minor);
}

.ymw-sg__empty kbd {
	display: inline-block;
	padding: 0 5px;
	margin: 0 1px;
	border: 1px solid var(--main-border-color);
	border-radius: 3px;
	font-family: inherit;
	font-size: 11px;
	line-height: 1.7;
	color: var(--minor);
}

.header .ymw-sg .ymw-sg__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 6px -8px -8px;
	padding: 11px 18px;
	border-top: 1px solid var(--main-border-color);
	background: color-mix(in srgb, var(--main) 7%, transparent);
	font-size: 12.5px;
	color: var(--minor);
	text-decoration: none;
}

.header .ymw-sg .ymw-sg__all:hover {
	background: color-mix(in srgb, var(--theme) 6%, transparent);
}

.ymw-sg__all > b {
	font-weight: 600;
	color: var(--theme);
}

/* 面板跟输入框等宽后，1366px 以下只有 196~280px 可用。这个宽度塞不下
   「主名 + 一句描述」两段，硬塞就是两个省略号并排；收成单行只留主名，
   反而干净。底部那行的长句同理，窄的时候让位给「高级搜索」。 */
@media (max-width: 1365px) {
	.ymw-sg__hotdesc {
		display: none;
	}

	.ymw-sg__hotmain {
		max-width: 100%;
	}
}

@media (max-width: 1279px) {
	.ymw-sg__more > span {
		display: none;
	}

	/* 196px 的面板只剩 160px 内容宽，13px 的名字连着日期会把
	   「Next 主题 8.29.0 实测」切掉尾巴，降 1px 刚好全部放下。 */
	.header .ymw-sg .ymw-sg__recentitem {
		font-size: 12px;
	}

	/* 这一档宽度连标题都不够用，右侧的语言标签也撤掉，
	   把最后 20px 让给标题 —— 认得出是哪个资源比知道它是 Go 更要紧。 */
	.ymw-sg__m {
		display: none;
	}
}

/* ==========================================================================
   侧栏：资源站模块（源码湾）
   主题自带侧栏是博客模板（登录卡 / 热门文章大图 / 两个标签云 / 空的最新回复），
   换成四块找东西用得上的：分类、最新收录、浏览排行、标签。
   强调色一律用 var(--theme)，别用 --main-color —— 那个是深灰文字色，不是品牌色。
   ========================================================================== */

/* 分类：两列，名字撑满，篇数靠右 */
.ymw-sa-cats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* 列距要留够：两列各自把数字顶到右边，间距太小会读成「5 属于下一列的名字」 */
	column-gap: 16px;
}

.ymw-sa-cats a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 8px 6px;
	font-size: 13px;
	line-height: 1;
	color: var(--main);
	border-radius: 0;
}

.ymw-sa-cats a:hover {
	color: var(--theme);
	background: color-mix(in srgb, var(--theme) 8%, transparent);
}

.ymw-sa-cats span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ymw-sa-cats i {
	flex: 0 0 auto;
	font-style: normal;
	font-size: 12px;
	color: var(--minor);
}

.ymw-sa-cats a:hover i {
	color: var(--theme);
}

/* 列表行：标题占满 + 右侧一个数字/日期。
   .t 必须是 flex:1 1 0 + min-width:0，否则长标题会把右侧数字挤出卡片。 */
.ymw-sa-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ymw-sa-rows li + li {
	border-top: 1px solid var(--muted-border-color);
}

.ymw-sa-rows a {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 0;
}

.ymw-sa-rows .t {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	color: var(--main);
}

.ymw-sa-rows a:hover .t {
	color: var(--theme);
}

.ymw-sa-rows .m {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--seat);
	font-variant-numeric: tabular-nums;
}

/* 排行序号：前三名用品牌色，其余灰 */
.ymw-sa-rows .n {
	flex: 0 0 14px;
	font-style: normal;
	font-size: 12px;
	color: var(--seat);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.ymw-sa-rows li:nth-child(-n + 3) .n {
	color: var(--theme);
	font-weight: 600;
}

/* 标签：统一淡底，不要主题那种一屏彩虹色 */
.ymw-sa-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ymw-sa-tags a {
	padding: 4px 9px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--minor);
	background: color-mix(in srgb, var(--main) 6%, transparent);
	border-radius: 2px;
}

.ymw-sa-tags a:hover {
	color: #fff;
	background: var(--theme);
}

/* 列表页侧栏跟着滚。
   首页正文近 4000px、侧栏不到 1000px，不跟着滚就是右边一大片空白。
   top 由 ymw.aside.js 现算：内容装得下一屏就顶到头部下面，
   装不下就把 top 算成负值贴底，保证最下面那块也能看见。
   这里给 84px 只是 JS 没跑到时的兜底。 */
.ymw-aside--list .ymw-aside-stick {
	position: sticky;
	top: 84px;
	will-change: top;
}

/* 悬浮容器里最后一块不留底边距 —— 那 20px 会白白算进高度，
   侧栏正好卡在「一屏装不下」的临界点上 */
.ymw-aside-stick > :last-child {
	margin-bottom: 0;
}

/* ===== 源码湾账号体系（收藏 / 签到 / 积分 / 等级） =====
   这套东西的视觉分寸：它是个附带的记账本，不是会员中心。
   所以不用渐变、不用大色块、不用进度环，跟站内其它信息页一个调子：
   1px 描边 + 小圆角 + 品牌色只出现在数字和按钮上。 */

/* —— 操作结果提示 ——
   普通表单提交（JS 没跑到）会 303 回跳带 ?ymw=ok|err，
   提示条要能自己站在页面上，不能只靠 JS 弹窗。 */
.ymw-flash {
	margin: 0 0 22px;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.7;
	color: #15805e;
	background: light-dark(#e9f7f1, #12261e);
	border-left: 2px solid #15805e;
}

.ymw-flash--err {
	color: #b03a36;
	background: light-dark(#fdf0ef, #2a1716);
	border-left-color: #b03a36;
}

/* —— 账号卡 —— */

.ymw-me {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin: 0 0 16px;
	padding: 18px 20px;
	border: 1px solid var(--classB);
	border-radius: 3px;
}

.ymw-me__avatar {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: light-dark(#eef1f4, #1d242b);
	object-fit: cover;
}

.ymw-me__body {
	flex: 1 1 0;
	min-width: 0;
}

.ymw-me__name {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--main);
}

.ymw-lv {
	padding: 0 7px;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--theme);
	background: light-dark(rgba(23, 183, 183, 0.1), rgba(44, 199, 199, 0.14));
	border-radius: 2px;
	white-space: nowrap;
}

.ymw-me__meta {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--minor);
	overflow-wrap: anywhere;
}

.ymw-me__points {
	margin: 10px 0 8px;
	font-size: 13px;
	color: var(--minor);
}

.ymw-me__points b {
	margin-right: 2px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	color: var(--theme);
	font-variant-numeric: tabular-nums;
}

.ymw-me__next {
	margin-left: 8px;
	font-size: 12.5px;
	color: var(--seat);
}

/* 进度条：2px 太细看不清，6px 又像游戏血条，4px 刚好 */
.ymw-bar {
	height: 4px;
	background: light-dark(#eef1f4, #1d242b);
	overflow: hidden;
}

.ymw-bar i {
	display: block;
	height: 100%;
	background: var(--theme);
}

/* —— 签到条 —— */

.ymw-sign {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border: 1px solid var(--classB);
	border-radius: 3px;
}

.ymw-sign__info {
	flex: 1 1 0;
	min-width: 0;
}

.ymw-sign__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--main);
}

.ymw-sign__meta {
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--minor);
}

.ymw-sign__meta b {
	font-weight: 600;
	color: var(--routine);
}

.ymw-sign__form {
	margin: 0;
	flex: 0 0 auto;
}

.ymw-sign__btn {
	display: inline-block;
	padding: 8px 20px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.6;
	color: #fff;
	background: var(--theme);
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.ymw-sign__btn:hover {
	background: light-dark(#129e9e, #23b3b3);
}

/* 已签到不是按钮，是状态 —— 去掉实心底，别让人反复点。
   但纯浅灰底在亮色下几乎看不见（截图里像少了一块），所以补一道描边。 */
.ymw-sign__btn.is-done {
	color: var(--minor);
	background: transparent;
	border: 1px solid var(--classB);
	cursor: default;
}

/* —— 收藏列表 —— */

.ymw-favs {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.ymw-favs li {
	display: flex;
	gap: 12px;
	align-items: baseline;
	margin: 0;
	padding: 9px 0;
	list-style: none;
	border-bottom: 1px solid var(--classB);
}

.ymw-favs li:first-child {
	border-top: 1px solid var(--classB);
}

.ymw-favs li > a {
	flex: 1 1 0;
	min-width: 0;
	color: var(--routine);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ymw-favs li > a:hover {
	color: var(--theme);
	text-decoration: none;
}

.ymw-favs__date {
	flex: 0 0 auto;
	font-size: 12.5px;
	color: var(--seat);
	font-variant-numeric: tabular-nums;
}

.ymw-favs__del {
	flex: 0 0 auto;
	margin: 0;
}

.ymw-favs__del button {
	padding: 0;
	font-family: inherit;
	font-size: 12.5px;
	color: var(--seat);
	background: none;
	border: 0;
	cursor: pointer;
}

.ymw-favs__del button:hover {
	color: #b03a36;
}

/* —— 积分流水 —— */

.ymw-tb__num {
	width: 5em;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.ymw-tb--log td.ymw-tb__num {
	font-weight: 600;
}

/* 加分用品牌色、扣分用中性灰 —— 别用红绿，绿在中文语境里是跌 */
.ymw-tb__num.is-plus {
	color: var(--theme);
}

.ymw-tb__num.is-minus {
	color: var(--minor);
}

/* —— 投稿加急勾选（投稿中心用） —— */

.ymw-rush {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid var(--classB);
	border-radius: 3px;
}

/* 勾选框得自己画：joe.normalize.css 里有一条 `input, textarea { appearance: none }`，
   原生方框被抹掉了，不画就是一个透明的 16px 空格子（单选按钮没被这条命中，所以还是原生的）。
   形状跟站内其它控件对齐：16px、2px 圆角、选中填品牌色。 */
.ymw-rush input[type="checkbox"] {
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 4px 0 0;
	background: light-dark(#fff, #171d24);
	border: 1px solid var(--muted-border-color, #d6d9dd);
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ymw-rush input[type="checkbox"]:checked {
	background: var(--theme);
	border-color: var(--theme);
}

.ymw-rush input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(42deg);
}

.ymw-rush input[type="checkbox"]:focus-visible {
	outline: 2px solid light-dark(rgba(23, 183, 183, 0.45), rgba(44, 199, 199, 0.5));
	outline-offset: 2px;
}

/* 不可用态：别用 opacity —— 浅灰底 + 半透明边框在亮色下等于消失。
   改成描一道深一点的边，看得见「这里本来有个框，只是现在勾不了」。 */
.ymw-rush input[type="checkbox"]:disabled {
	background: transparent;
	border-color: var(--seat);
	cursor: default;
}

.ymw-rush label {
	font-size: 14px;
	line-height: 1.7;
	color: var(--routine);
	cursor: pointer;
}

.ymw-rush label b {
	color: var(--theme);
}

.ymw-rush .ymw-tip {
	display: block;
	margin-top: 2px;
}

.ymw-rush.is-off {
	color: var(--minor);
	background: light-dark(#fafbfc, #191f26);
}

.ymw-rush.is-off label {
	color: var(--minor);
	cursor: default;
}

/* 投稿箱里的「加急」标记：品牌色，跟待审核的琥珀色区分开 */
.ymw-pill--rush {
	color: var(--theme);
	background: light-dark(rgba(23, 183, 183, 0.1), rgba(44, 199, 199, 0.14));
}

/* ===== 导航大下拉（源码湾） =====
   参考阿里云那种：hover 导航项，整条面板从头部底下铺开，
   左边是带图标的分类格子，右边一条浅色侧栏放「最新收录」。

   两个必须知道的点：
   1) 面板要铺满整条导航，就不能相对 <li> 定位。把 <li> 设成 position:static，
      让面板挂到最近的定位祖先（.navbar-collapse）上，left/right 拉满即可。
   2) 主题的 .navbar-nav>li:before 是个绝对定位的青色小条（hover 指示），
      <li> 一旦 static 它就会横跨整条导航。所以这里把它关掉，
      改挂到 <a> 上，位置和形状照抄原版。 */

/* 大下拉要左右满铺，一点白边都不留。
   原来面板挂的是 .navbar-collapse，那一层是限宽的（max-width 1380 居中，
   1440 视口下 x=30、宽 1380），所以面板左右各空 30px。
   改成挂 .header —— 它本身就是满视口宽（x=0、width 100%），
   把 .navbar-collapse 的 relative 撤掉，面板就会认 .header 当定位祖先，
   left/right: 0 直接贴到浏览器两边。 */
.header {
	position: relative;
}

/* .navbar 自己也是 relative（bootstrap 默认），它夹在 .header 和面板之间，
   面板会认它当定位祖先 —— 那层还留了 21px 的边，等于白边还在。
   这里一并撤掉，面板才能贴到浏览器两边。
   只对桌面生效：手机上 .navbar 里那个汉堡按钮是 absolute，改 static 会让它
   改认 .header 定位，虽然位置一样，但没必要冒险。 */
.header .navbar-collapse {
	position: static;
}

@media (min-width: 992px) {
	.header .navbar {
		position: static;
	}
}

.navbar-nav>li.ymw-mega {
	position: static;
	max-height: none;
}

.navbar-nav>li.ymw-mega:before {
	display: none;
}

/* 原版那个 overflow:hidden 是为了裁 hover 背景，大下拉的 <a> 不用它，
   而且会裁掉上面那条指示条 */
.navbar-top .nav>li.ymw-mega>a {
	overflow: visible !important;
}

.ymw-mega>a::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	height: 5px;
	background: var(--theme);
	border-radius: 0 0 15px 15px;
	opacity: 0;
	transition: .3s;
}

.ymw-mega:hover>a::before,
.ymw-mega.current-menu-item>a::before {
	opacity: 1;
}

/* 原版是 hover 时把箭头转 -90 度（竖过来），大下拉应该是转 180 度朝上 */
.navbar-top li.ymw-mega:hover>a .fa-angle-down {
	transform: rotate(180deg);
}

.ymw-mega__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 120;
}

/* 桥接区：鼠标从导航往下移的那 10px 不能断。
   原来是把面板往下推 10px（padding-top），面板既然要贴着导航底边铺满，
   那 10px 就得改成往上探出去的一条透明带，视觉上没有缝、悬停也接得住。 */
.ymw-mega__panel::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 10px;
}

.ymw-mega:hover .ymw-mega__panel,
.ymw-mega:focus-within .ymw-mega__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ymw-mega__inner {
	display: flex;
	align-items: stretch;
	/* 底色必须跟头部一模一样。原来暗色掺了 8% 白把面板抬到 rgb(66,67,69)，
	   而头部是 rgba(50,51,53,.8)（叠在页面底上约 rgb(48,49,51)）——
	   两者差 16 级，导航和面板之间就是一道明显的色带。
	   亮色本来就是纯白，两边一致。 */
	background: var(--main-bg-color);
	/* 顶部不画线：面板是导航往下延伸出来的一块，中间有线就成了两块拼起来的东西。
	   底部留线 + 投影，和下面的正文分开。 */
	border-bottom: 1px solid var(--classB);
	/* 不用 box-shadow：面板顶边和头部底边齐平，阴影会往上糊 20px，
	   正好压在导航最后 20px 上 —— 实测亮色那边被压成 rgb(249,250,250)，
	   接缝就是一道"导航偏灰、面板纯白"的色差。改用下面那条只向下的渐变。 */
	overflow: hidden;
}

/* 只往下的投影：贴在面板底边外侧，从面板底色淡出到透明，
   不经过头部，也就不会在导航底部压出色带。 */
.ymw-mega__panel::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 26px;
	background: linear-gradient(to bottom,
			light-dark(rgba(15, 35, 45, .10), rgba(0, 0, 0, .34)),
			light-dark(rgba(15, 35, 45, 0), rgba(0, 0, 0, 0)));
	pointer-events: none;
}

/* 左右内边距补在 main / side 上，而不是给 inner 加 padding ——
   给 inner 加的话，右侧栏那层灰底就铺不到浏览器右边缘，会留一道白。 */
.ymw-mega__main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 20px 26px 26px 30px;
}

/* 行高自己撑满 —— 列数由模板按「两行铺满」倒推后写在 data-cols 上
   （12 格 → 6 列、8 格 → 4 列、5 格 → 3 列）。原来固定 4 列，
   12 个分类只占三行、每列 280px 宽，文字只填左半截，面板看着一片白。
   撑满之后几个面板一样高（高度由右侧栏决定），切换菜单不会忽高忽低。
   注意用 grid-auto-rows:1fr 而不是 align-content:stretch —— 实测 Chrome 里
   align-content:stretch 并不会把剩余空间分给 auto 行，量出来还是 50px 一格。 */
.ymw-mega__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 6px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--classB);
}

.ymw-mega__kicker {
	font-size: 14px;
	font-weight: 600;
	color: var(--main);
	letter-spacing: .02em;
}

.ymw-mega__meta {
	font-size: 12.5px;
	color: var(--minor);
	font-variant-numeric: tabular-nums;
}

.ymw-mega__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 4px;
	flex: 1 1 auto;
}

.ymw-mega__grid[data-cols="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ymw-mega__grid[data-cols="3"] {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ymw-mega__grid[data-cols="5"] {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ymw-mega__grid[data-cols="6"] {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* 面板里的链接不受「导航项最高 50px」那条限制。
   注意选择器不能只写 .ymw-mega__panel a —— 主题里有一条
   `.navbar-nav li, .navbar-nav li a { max-height: 50px }`，特异性 (0,2,1)
   比 (0,1,1) 高，压得住。表现是行高怎么设都不生效，格子恒为 50px。
   这里加到 (0,3,1)，稳稳盖过去。 */
.navbar-nav .ymw-mega .ymw-mega__panel a {
	max-height: none;
}

.ymw-mega__cell {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 6px;
	text-decoration: none;
	transition: background-color .15s ease;
}

.ymw-mega__cell:hover {
	background: light-dark(#f2f6f7, #2a3037);
	text-decoration: none;
}

.ymw-mega__ic {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	/* 图标本身是彩色的一套，风格还不统一（实心、描边、三个点都有）。
	   外面套一层统一的浅色底托之后，视觉上先成一个方块阵列，
	   颜色差异反倒变成点缀，不再显得杂。 */
	background: light-dark(#f3f5f7, #2f353b);
	color: var(--theme);
}

/* 没有图标的格子（语言那几项）别留一个空底托 —— 会变成一排灰色空格子 */
.ymw-mega__ic:empty {
	display: none;
}

.ymw-mega__ic svg,
.ymw-mega__ic .svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
	color: inherit;
}

.ymw-mega__tx {
	flex: 1 1 0;
	min-width: 0;
	display: block;
	line-height: 1.35;
}

.ymw-mega__tx b {
	display: block;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--main);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ymw-mega__tx em {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	font-style: normal;
	/* 原来写的是 --seat（#c0c4cc），11.5px 的字在纯白底上对比度只有 1.8:1，
	   截图里「10 个资源」几乎看不见。--routine 是 #606266，6:1，能读。 */
	color: var(--routine);
	font-variant-numeric: tabular-nums;
}

/* 格子第三行：这一类里最新的几个，或者功能入口的一句说明。
   没有它就是「建站CMS / 5 个资源」两行字浮在 280px 宽的格子里，一整块面板全是白。 */
.ymw-mega__desc {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-style: normal;
	line-height: 1.4;
	color: var(--minor);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ymw-mega__cell:hover .ymw-mega__tx b {
	color: var(--theme);
}

/* 纯文字的动作链接（查看全部源码之类）—— 只有在没有「最新收录」可推、
   侧栏整块不出现时才会用到，跟下面的 __all 同样要压过 .header a:not(.but) */
.ymw-mega__feet {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--classB);
}

.header .ymw-mega .ymw-mega__foot {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: var(--theme);
	text-decoration: none;
}

.ymw-mega__foot i {
	font-style: normal;
	transition: transform .15s ease;
}

.ymw-mega__foot:hover i {
	transform: translateX(3px);
}

/* —— 右侧栏 —— */

.ymw-mega__side {
	flex: 0 0 320px;
	display: flex;
	flex-direction: column;
	padding: 20px 30px 24px 26px;
	/* 跟面板主体的差别拉太开：原来亮色 #f7f8f9 / 暗色 #23272c 都比面板深一截，
	   右侧像焊上去的另一块。现在两边各收 3~6 级。 */
	background: light-dark(#fafbfb, #2c3034);
	border-left: 1px solid var(--classB);
}

.ymw-mega__sidehead {
	margin: 0 0 14px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--minor);
}

.ymw-mega__new {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 9px 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--routine);
	text-decoration: none;
}

.ymw-mega__new span {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ymw-mega__new em {
	flex: 0 0 auto;
	font-style: normal;
	font-size: 11.5px;
	color: var(--minor);
	font-variant-numeric: tabular-nums;
}

.ymw-mega__new:hover span {
	color: var(--theme);
}

/* 侧栏底部那个动作按钮（查看全部源码 / 高级搜索）。
   原来是白底 + 1px 描边，跟上面三条最新收录长得一模一样 —— 截图里它读起来
   就是「第 4 条最新收录」，没人看得出能点。改成整条淡品牌色块：
   形状上一眼是按钮，又不像实心品牌色那么抢（面板里最重的应该是分类格子）。
   选择器要写成 .header .ymw-mega .ymw-mega__all —— 主题里有一条
   `.header a:not(.but) { color: var(--main-color) }`，特异性 (0,2,1)，
   单写 .ymw-mega__all 只有 (0,1,0)，青色会被改成正文灰，
   淡色块配灰字就看不出是按钮了。 */
.header .ymw-mega .ymw-mega__all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: auto;
	padding: 0 14px;
	height: 40px;
	font-size: 13.5px;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	background: var(--theme);
	border-radius: 6px;
	/* 不加投影。整条实心品牌色已经够重，再带一层同色光晕会往外糊，
	   暗色下尤其像发光的塑料片。要区分主按钮，靠色块本身就行。 */
	transition: background-color .15s ease;
}

.header .ymw-mega .ymw-mega__all:hover {
	background: light-dark(#129e9e, #23b3b3);
	color: #fff;
	text-decoration: none;
}

.ymw-mega__all i {
	font-style: normal;
}

/* 视口窄下来列数要收：6 列在 1100 出头每列只剩 140px，
   「小程序开发」加图标就顶到边了。 */
@media (max-width: 1200px) {

	.ymw-mega__grid[data-cols="5"],
	.ymw-mega__grid[data-cols="6"] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* 窄屏时容器的左边距缩到 21px，面板跟着缩，格子才跟 logo 对上 */
	.ymw-mega__main {
		padding: 18px 18px 18px 21px;
	}

	.ymw-mega__side {
		flex-basis: 272px;
		padding: 18px 21px 20px 20px;
	}
}

@media (max-width: 1050px) {

	.ymw-mega__grid[data-cols="4"],
	.ymw-mega__grid[data-cols="5"],
	.ymw-mega__grid[data-cols="6"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* —— 内容区宽度（只对列表页）——
   原来 ≥1400 时 .joe_container 只给 1200，1440 视口下内容实际 1170 宽，
   左右各空 135px。头部容器是 1380、hero 是满宽、导航面板也满宽，
   就内容区缩在中间一窄条，整页看着没铺开。
   这里把列表页内容区拉到跟头部容器同宽：外层 1410（含 15px 内边距）→ 内容
   正好 1380，左边缘落在 x=30，和头部的盒子完全对齐。
   窄屏用 100vw-30px 平滑收，不做断点跳变。

   **只给有 .joe_list 的列表页**：文章页正文要是也拉到 1380，正文栏会变成
   1054 宽、一行六十多个字，读起来累。散文保持原来的 1200。 */
@media (min-width: 1200px) {
	.joe_container:has(.joe_list) {
		max-width: min(1410px, calc(100vw - 30px));
	}
}

/* —— 侧栏粘住（只对列表页）——
   列表页侧栏 4 个卡片加起来 732px，主栏（12 篇）2642px，右边下面空出近 1900px，
   比左右留白更浪费。让整个侧栏跟着滚，把那片空白变成一直在视野里的导航。
   align-self 必须写 flex-start，否则它在 flex 里被拉伸到撑满主栏高度，
   sticky 就没有可移动的余量了。

   两个必须注意的点：
   1. **top 要避开固定头部**。外层 .joe_header 是 position:fixed、高 68px、
      body 的 padding-top 是 88。写 top:20 的话侧栏第一块卡片的标题会被压在
      头部底下，截图里就是「按语言找」那行字直接消失。
   2. **侧栏比视口高时要能自己滚**。900 高的屏幕上侧栏 832px + 68px 头部刚好顶满，
      768 的笔记本能溢出 130px，不限制的话「热门标签」永远看不到。
      max-height + overflow-y 兜住，内容不超高时不会出现滚动条。
   3. **限定在列表页**：文章页侧栏有 6 个卡片、1382px 高，粘住会把下面 500px
      顶出屏幕。判据用 :has(.joe_list) —— 列表页有、文章页没有。 */
@media (min-width: 992px) {
	.joe_container:has(.joe_list) > .joe_aside {
		align-self: flex-start;
		position: -webkit-sticky;
		position: sticky;
		top: 78px;
		max-height: calc(100vh - 84px);
		overflow-y: auto;
		overscroll-behavior: contain;
		/* 不要看见滚动条：卡片之间的间距收到 12px 之后，1440×900 下侧栏 808px
		   正好塞进 810px 的可用高度，本来就不出条。这里再把条本身藏掉是给
		   768 那种矮屏兜底 —— 那时还是会溢出，但至少不会在右边挂一条灰杠。
		   滚动条只占位不显示，内容照样能滚。 */
		scrollbar-width: none;
	}

	.joe_container:has(.joe_list) > .joe_aside::-webkit-scrollbar {
		display: none;
	}

	/* 卡片间距 20 → 10，再砍掉容器自身的 20px 底部内边距：
	   四个卡片 731 + 三处间距 + 内边距 = 832，正好比 900 高屏能给的 810 多 22px，
	   差这一点就冒滚动条。收到 806 之后不出条。 */
	.joe_container:has(.joe_list) > .joe_aside .joe_aside__item {
		margin-bottom: 10px;
	}

	.joe_container:has(.joe_list) > .joe_aside {
		padding: 0;
	}
}

/* ===== 用户中心（独立面板） =====
   左栏账号卡 + 分区导航，右栏按 ?tab= 换内容。
   原来是一篇长文档，看「我的投稿」要滚过账号卡、签到、收藏才到。 */

/* 面板也要吃满宽：账号页没有 .joe_list，默认容器还是 1170，
   跟首页那种 1380 的排法不是一套。这里把它一起放开。 */
@media (min-width: 1200px) {
	.joe_container:has(.ymw-uc) {
		max-width: min(1410px, calc(100vw - 30px));
	}
}

.ymw-uc {
	display: grid;
	grid-template-columns: 236px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
	padding: 28px 0 48px;
}

/* —— 左栏 —— */
.ymw-uc__side {
	position: sticky;
	top: 88px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ymw-uc__me {
	padding: 16px;
	background: var(--main-bg-color);
	border: 1px solid var(--classB);
	border-radius: 6px;
}

.ymw-uc__ava {
	float: left;
	width: 44px;
	height: 44px;
	margin-right: 10px;
	border-radius: 50%;
	object-fit: cover;
}

.ymw-uc__who {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding-top: 2px;
}

.ymw-uc__name {
	font-size: 15px;
	font-weight: 600;
	color: var(--main);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 等级徽章跟名字一行，卡片窄，别撑破 */
.ymw-uc__who .ymw-lv {
	align-self: flex-start;
}

.ymw-uc__pts {
	clear: both;
	margin-top: 14px;
	font-size: 12px;
	color: var(--minor);
}

.ymw-uc__pts b {
	margin-right: 3px;
	font-size: 22px;
	font-weight: 600;
	color: var(--main);
	font-variant-numeric: tabular-nums;
}

.ymw-uc__bar {
	margin-top: 8px;
}

.ymw-uc__next {
	margin-top: 6px;
	font-size: 11.5px;
	color: var(--minor);
}

/* 分区导航 */
.ymw-uc__nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px;
	background: var(--main-bg-color);
	border: 1px solid var(--classB);
	border-radius: 6px;
}

.ymw-uc__tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 10px;
	font-size: 13.5px;
	color: var(--routine);
	text-decoration: none;
	border-radius: 4px;
	transition: background-color .15s ease, color .15s ease;
}

.ymw-uc__tab:hover {
	background: color-mix(in srgb, var(--theme) 8%, transparent);
	color: var(--theme);
	text-decoration: none;
}

.ymw-uc__tab.is-on {
	background: color-mix(in srgb, var(--theme) 11%, transparent);
	color: var(--theme);
	font-weight: 500;
}

.ymw-uc__tab b {
	flex: 0 0 auto;
	min-width: 20px;
	padding: 1px 6px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	color: var(--minor);
	background: light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .08));
	border-radius: 20px;
	font-variant-numeric: tabular-nums;
}

.ymw-uc__tab.is-on b {
	color: var(--theme);
	background: color-mix(in srgb, var(--theme) 14%, transparent);
}

/* 待审数量用警示色，别让人错过 */
.ymw-uc__tab b.is-hot {
	color: #fff;
	background: #e6a23c;
}

.ymw-uc__tab--admin {
	margin-top: 4px;
	border-top: 1px dashed var(--classB);
	border-radius: 0 0 4px 4px;
}

.ymw-uc__out {
	padding: 9px 10px;
	font-size: 13px;
	text-align: center;
	color: var(--minor);
	text-decoration: none;
	border: 1px solid var(--classB);
	border-radius: 6px;
	background: var(--main-bg-color);
	transition: color .15s ease, border-color .15s ease;
}

.ymw-uc__out:hover {
	color: #d9534f;
	border-color: color-mix(in srgb, #d9534f 40%, var(--classB));
	text-decoration: none;
}

/* —— 右栏 —— */
.ymw-uc__main {
	min-width: 0;
}

.ymw-uc__head {
	margin-bottom: 18px;
}

.ymw-uc__head h1 {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 600;
	color: var(--main);
}

.ymw-uc__head p {
	margin: 0;
	font-size: 13px;
	color: var(--minor);
}

.ymw-uc__head b {
	color: var(--main);
	font-variant-numeric: tabular-nums;
}

/* 签到条 */
.ymw-uc__sign {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 18px;
	margin-bottom: 16px;
	background: color-mix(in srgb, var(--theme) 6%, var(--main-bg-color));
	border: 1px solid color-mix(in srgb, var(--theme) 22%, var(--classB));
	border-radius: 6px;
}

.ymw-uc__signtitle {
	font-size: 15px;
	font-weight: 600;
	color: var(--main);
}

.ymw-uc__signmeta {
	margin-top: 5px;
	font-size: 12.5px;
	color: var(--minor);
}

.ymw-uc__signmeta b {
	color: var(--main);
	font-variant-numeric: tabular-nums;
}

/* 四格统计 */
.ymw-uc__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 16px;
}

.ymw-uc__stat {
	display: block;
	padding: 14px 16px;
	text-decoration: none;
	background: var(--main-bg-color);
	border: 1px solid var(--classB);
	border-radius: 6px;
	transition: border-color .15s ease;
}

a.ymw-uc__stat:hover {
	border-color: color-mix(in srgb, var(--theme) 45%, var(--classB));
	text-decoration: none;
}

.ymw-uc__stat b {
	display: block;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--main);
	font-variant-numeric: tabular-nums;
}

.ymw-uc__stat span {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--minor);
}

/* 卡片 */
.ymw-uc__box {
	padding: 16px 18px;
	margin-bottom: 16px;
	background: var(--main-bg-color);
	border: 1px solid var(--classB);
	border-radius: 6px;
}

.ymw-uc__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.ymw-uc__cols .ymw-uc__box {
	margin-bottom: 16px;
}

/* 快捷操作这类横条内容撑不满一列，占满整行 */
.ymw-uc__cols .ymw-uc__box--wide {
	grid-column: 1 / -1;
}

.ymw-uc__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ymw-uc__quick a,
.ymw-uc__quick a:hover {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 16px;
	font-size: 13.5px;
	color: var(--routine);
	text-decoration: none;
	background: light-dark(#f7f9fb, #2b2c30);
	border: 1px solid var(--classB);
	border-radius: 4px;
}

.ymw-uc__quick a:hover {
	color: var(--theme);
	border-color: var(--theme);
}

.ymw-uc__boxhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.ymw-uc__boxhead h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--main);
}

.ymw-uc__boxhead a,
.ymw-uc__boxhead .ymw-uc__price {
	font-size: 12px;
	color: var(--minor);
	text-decoration: none;
}

.ymw-uc__boxhead a:hover {
	color: var(--theme);
}

.ymw-uc__boxdesc {
	margin: 0 0 12px;
	font-size: 12.5px;
	color: var(--minor);
}

/* 概览里的两栏小列表 */
.ymw-uc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ymw-uc__list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 0;
	font-size: 13px;
	color: var(--routine);
	border-bottom: 1px solid light-dark(rgba(0, 0, 0, .04), rgba(255, 255, 255, .05));
}

.ymw-uc__list li:last-child {
	border-bottom: 0;
}

.ymw-uc__list a {
	color: var(--routine);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ymw-uc__list a:hover {
	color: var(--theme);
}

.ymw-uc__list time {
	flex: 0 0 auto;
	font-size: 11.5px;
	color: var(--minor);
}

/* 积分动态 */
.ymw-uc__feed {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ymw-uc__feed li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 0;
	font-size: 13px;
	color: var(--routine);
	border-bottom: 1px solid light-dark(rgba(0, 0, 0, .04), rgba(255, 255, 255, .05));
}

.ymw-uc__feed li:last-child {
	border-bottom: 0;
}

.ymw-uc__feed em {
	flex: 0 0 auto;
	font-style: normal;
	font-variant-numeric: tabular-nums;
}

.ymw-uc__feed time {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 11.5px;
	color: var(--minor);
}

.ymw-uc__feed .is-plus {
	color: #e6a23c;
}

.ymw-uc__feed .is-minus {
	color: var(--minor);
}

/* 收藏夹网格 */
.ymw-uc__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.ymw-uc__fav {
	display: flex;
	flex-direction: column;
	padding: 14px 16px;
	background: var(--main-bg-color);
	border: 1px solid var(--classB);
	border-radius: 6px;
	transition: border-color .15s ease, transform .15s ease;
}

.ymw-uc__fav:hover {
	border-color: color-mix(in srgb, var(--theme) 40%, var(--classB));
}

.ymw-uc__favt {
	font-size: 14px;
	font-weight: 600;
	color: var(--main);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ymw-uc__favt:hover {
	color: var(--theme);
}

.ymw-uc__favd {
	display: -webkit-box;
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.55;
	color: var(--minor);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ymw-uc__favf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 10px;
}

.ymw-uc__favf time {
	font-size: 11.5px;
	color: var(--minor);
	font-variant-numeric: tabular-nums;
}

.ymw-uc__favf .ymw-favs__del button {
	padding: 0;
	font-family: inherit;
	font-size: 11.5px;
	color: var(--minor);
	background: none;
	border: 0;
	cursor: pointer;
}

.ymw-uc__favf .ymw-favs__del button:hover {
	color: #d9534f;
}

/* 空态 */
.ymw-uc__empty {
	margin: 0;
	padding: 10px 0;
	font-size: 13px;
	color: var(--minor);
}

.ymw-uc__empty--big {
	padding: 44px 20px;
	text-align: center;
	background: var(--main-bg-color);
	border: 1px dashed var(--classB);
	border-radius: 6px;
}

.ymw-uc__empty a {
	color: var(--theme);
}

/* 表格在面板里别顶到边 */
.ymw-uc__tb {
	margin-bottom: 16px;
}

/* 设置页的账号信息 */
.ymw-uc__kv {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr);
	gap: 10px 16px;
	margin: 0 0 12px;
	font-size: 13px;
}

.ymw-uc__kv dt {
	color: var(--minor);
}

.ymw-uc__kv dd {
	margin: 0;
	color: var(--routine);
	word-break: break-all;
}

/* 等级表 */
.ymw-uc__lvlist {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.ymw-uc__lvlist li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 10px;
	font-size: 13px;
	color: var(--routine);
	border-radius: 4px;
}

.ymw-uc__lvlist li.is-now {
	background: color-mix(in srgb, var(--theme) 9%, transparent);
	color: var(--main);
}

.ymw-uc__lvlist b {
	font-weight: 500;
}

.ymw-uc__lvlist span {
	font-size: 11.5px;
	color: var(--minor);
}

.ymw-uc__nolist {
	margin: 0;
	padding-left: 18px;
	font-size: 13px;
	line-height: 2;
	color: var(--routine);
}

.ymw-uc__outrow {
	margin: 4px 0 0;
}

/* 幽灵按钮（注册、退出这类次要操作）
   hover 原来写的是 #d9534f 红 —— 那是给「退出登录」用的，
   放到「注册新账号」上就是一句红字，看着像警告。改成品牌色的普通描边态。 */
.ymw-btn--ghost {
	color: var(--routine);
	background: transparent;
	border: 1px solid var(--classB);
}

.ymw-btn--ghost:hover {
	color: var(--theme);
	background: transparent;
	border-color: var(--theme);
}

/* —— 未登录：左边登录表单，右边注册说明 ——
   原来是一张 460px 的居中卡片（标题 + 一句说明 + 两个按钮），四周全是空白，
   像模板生成的空状态。现在跟登录后同一套骨架铺满内容区，左边直接能登录，
   不用再跳到登录页。 */
.ymw-uc--guest {
	display: block;
	padding: 28px 0 48px;
}

.ymw-auth {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	align-items: stretch;
	/* 登录块不需要铺满 1380 —— 表单本身只有 360 宽，撑满只会空出一大片。
	   收到 900 居中，宽度够放下表单和右边的注册说明。 */
	max-width: 900px;
	margin: 0 auto;
	background: var(--main-bg-color);
	border: 1px solid var(--classB);
	border-radius: 6px;
	overflow: hidden;
}

.ymw-auth__main {
	min-width: 0;
	padding: 28px 32px 30px;
}

.ymw-auth__main .ymw-uc__head {
	margin-bottom: 20px;
}

.ymw-login__form {
	max-width: 360px;
}

.ymw-auth__side {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px 26px;
	background: light-dark(#fafbfb, #2c3034);
	border-left: 1px solid var(--classB);
}

.ymw-auth__t {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--main);
}

.ymw-auth__d {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--minor);
}

.ymw-auth__side .ymw-btn {
	align-self: flex-start;
	margin-top: 4px;
}

.ymw-auth__n {
	margin: auto 0 0;
	padding-top: 14px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--minor);
}

/* 窄屏：左栏改成横向滚动条 */
@media (max-width: 900px) {
	.ymw-uc {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 18px 0 36px;
	}

	.ymw-uc__side {
		position: static;
	}

	.ymw-uc__me {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 0 10px;
	}

	.ymw-uc__pts {
		margin-top: 0;
		margin-left: auto;
	}

	.ymw-uc__bar,
	.ymw-uc__next {
		flex: 1 0 100%;
	}

	.ymw-uc__nav {
		flex-direction: row;
		overflow-x: auto;
		scrollbar-width: none;
		/* 右边留一道淡出，提示这排标签可以横着滑（投稿箱在屏幕外） */
		-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
		mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
	}

	.ymw-uc__nav::-webkit-scrollbar {
		display: none;
	}

	.ymw-uc__tab {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	/* 原来这条在手机上是 display:none —— 也就是说手机上根本没有退出入口，
	   登进来就出不去了。改成窄屏下缩成一个右对齐的小按钮，跟在分区导航后面。 */
	.ymw-uc__out {
		display: block;
		align-self: flex-end;
		margin-top: -6px;
		padding: 5px 14px;
		font-size: 12.5px;
		border-radius: 4px;
	}

	.ymw-uc__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ymw-uc__cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.ymw-uc__sign {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* 页头里的小链接（投稿中心 →） */
.ymw-uc__headlink {
	margin-left: 6px;
	color: var(--theme);
	text-decoration: none;
	white-space: nowrap;
}

.ymw-uc__headlink:hover {
	text-decoration: underline;
}

/* 分区切换的加载态：内容稍微压一下，避免「点了没反应」的错觉。
   本地几十毫秒就回来了，所以只做透明度，不加转圈 —— 一闪而过的转圈更烦。 */
.ymw-uc__main.is-busy {
	opacity: .55;
	transition: opacity .15s ease;
}

.ymw-uc__tab {
	cursor: pointer;
}

/* 登录块窄屏：一列排，注册说明挪到表单下面。
   上面那条 900 的断点只改了 .ymw-uc 的栅格，.ymw-auth 自己还是「1fr + 300px」，
   390 宽下左边被挤成 90px —— 表单全压成竖排一行一个字。 */
@media (max-width: 760px) {
	.ymw-auth {
		grid-template-columns: minmax(0, 1fr);
	}

	.ymw-auth__main {
		padding: 22px 20px 24px;
	}

	.ymw-auth__side {
		padding: 20px;
		border-left: 0;
		border-top: 1px solid var(--classB);
	}

	.ymw-auth__n {
		margin-top: 4px;
	}
}

/* —— 悬浮登录框 ——
   需要登录的操作（收藏、加急）不再把人甩到登录页，
   在当前页弹一层，登录完原地刷新。 */
.ymw-modal[hidden] {
	display: none !important;
}

.ymw-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ymw-modal__mask {
	position: absolute;
	inset: 0;
	/* 压暗到 .58：.45 的时候底下的正文清清楚楚，弹框浮不起来 */
	background: rgba(16, 21, 27, .58);
}

.ymw-modal__box {
	position: relative;
	width: 100%;
	max-width: 380px;
	padding: 26px 24px 20px;
	background: var(--main-bg-color);
	border: 1px solid var(--classB);
	border-radius: 8px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

.ymw-modal__box h2 {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 600;
	color: var(--main);
}

.ymw-modal__d {
	margin: 0 0 18px;
	font-size: 13px;
	color: var(--minor);
}

.ymw-modal__x {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 30px;
	height: 30px;
	font-size: 20px;
	line-height: 1;
	color: var(--minor);
	background: none;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease;
}

.ymw-modal__x:hover {
	color: var(--main);
	background: light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .08));
}

.ymw-modal__f {
	margin: 14px 0 0;
	font-size: 12.5px;
	color: var(--minor);
}

.ymw-modal__f a {
	color: var(--theme);
}

body.ymw-modal-open {
	overflow: hidden;
}

/* autolog 默认 `top: 20px`，弹出来正好压在固定头部的导航和搜索框上。
   往下挪到头部底边之外（68 + 10），保持在顶部、但不再盖住任何东西。 */
#autolog {
	top: 78px;
	height: auto;
}

/* 视觉隐藏但保留给读屏软件。404 的主标题用它——
   页面要有 h1，但不该在「大图 + 搜索框」的版式里多占一行。
   用 clip 而不是 display:none：display:none 的内容读屏软件也读不到。 */
.ymw-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ===== 2026-10 下载入口去「广告感」 =====
   原来整条铺网盘品牌色，在侧栏里就是一块亮蓝广告。
   改成中性底 + 细边框 + 左侧品牌色竖线：仍然是按钮，但先像资源信息。
   文字用正文色，图标和箭头用主题青绿，品牌色只留在 24px 网盘小图标上。 */
#resbox a.ymw-dl:not(.ymw-dl--locked),
.ymw-dl-wrap a.ymw-dl:not(.ymw-dl--locked) {
	background: var(--body-bg-color);
	border: 1px solid var(--classA);
}

#resbox a.ymw-dl:not(.ymw-dl--locked) .ymw-dl__icon,
.ymw-dl-wrap a.ymw-dl:not(.ymw-dl--locked) .ymw-dl__icon {
	width: 48px;
	flex-basis: 48px;
	background: transparent;
	color: var(--theme);
}

#resbox a.ymw-dl:not(.ymw-dl--locked) .ymw-dl__name,
.ymw-dl-wrap a.ymw-dl:not(.ymw-dl--locked) .ymw-dl__name {
	color: var(--main);
}

#resbox a.ymw-dl:not(.ymw-dl--locked) .ymw-dl__hint,
.ymw-dl-wrap a.ymw-dl:not(.ymw-dl--locked) .ymw-dl__hint {
	color: var(--minor);
}

#resbox a.ymw-dl:not(.ymw-dl--locked) .ymw-dl__arrow,
.ymw-dl-wrap a.ymw-dl:not(.ymw-dl--locked) .ymw-dl__arrow {
	color: var(--theme);
	opacity: 1;
}

/* 侧栏：不再整条实色，改成描边条目；网盘 logo 也收成线框 */
.joe_aside .ymw-side__logo {
	background: transparent !important;
	border: 1px solid var(--classA);
	color: var(--pan-color);
}

.joe_aside .ymw-side__btn {
	background: transparent;
	color: var(--main);
	border: 1px solid var(--classA);
	font-weight: 500;
}

.joe_aside .ymw-side__btn svg {
	color: var(--theme);
}

.joe_aside .ymw-side__btn:hover {
	border-color: var(--theme);
	color: var(--theme);
}

/* —— 邮件队列：可编辑的主题/正文 —— */
.ymw-mail__row {
	margin-top: 12px;
}

.ymw-mail__row label {
	display: block;
	margin-bottom: 6px;
	font-size: 12.5px;
	color: var(--minor);
}

.ymw-mail__input,
.ymw-mail__body {
	display: block;
	width: 100%;
	padding: 8px 10px;
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--routine);
	background: light-dark(#fff, #171d24);
	border: 1px solid var(--classB);
	border-radius: 4px;
	outline: none;
	box-sizing: border-box;
}

.ymw-mail__body {
	min-height: 190px;
	resize: vertical;
}

.ymw-mail__input:focus,
.ymw-mail__body:focus {
	border-color: var(--theme);
}

.ymw-mail__hint {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.7;
	color: var(--minor);
}

.ymw-mail__hint code {
	padding: 1px 4px;
	font-size: 11.5px;
	color: var(--theme);
	background: color-mix(in srgb, var(--theme) 10%, transparent);
	border-radius: 3px;
}

/* —— 首屏副标题 ——
   一行一言（JMotto 随机取一条，原来的位置，样式不动），
   下面再压一行事实说明（收录多少套、怎么来的），字号更小、更淡。
   一言没配时 span 为空，用 :empty 隐藏，不会留一条空行。 */
.HeaderImg .infomation .desctitle {
	flex-wrap: wrap;
	flex-direction: column;
	gap: 8px;
}

.HeaderImg .infomation .desctitle .joe_motto {
	max-width: 100%;
	font-size: 1.05rem;
	line-height: 1.6;
}

.HeaderImg .infomation .desctitle .joe_motto:empty {
	display: none;
}

.HeaderImg .infomation .desctitle .ymw-hero__lede {
	max-width: 100%;
	font-size: .82rem;
	line-height: 1.7;
	letter-spacing: .3px;
	opacity: .78;
}

@media screen and (max-width: 768px) {
	.HeaderImg .infomation .desctitle {
		gap: 6px;
	}

	.HeaderImg .infomation .desctitle .joe_motto {
		font-size: .92rem;
		line-height: 1.6;
	}

	.HeaderImg .infomation .desctitle .ymw-hero__lede {
		font-size: .72rem;
		line-height: 1.6;
	}
}

/* —— 语言图标（按语言查找面板）——
   语言那几格不用 .ymw-mega__ic 的灰底托，换成品牌色方块：
   各家标志本来也是「彩底 + 反白」的画法。灰底托会把两种图标压死 ——
   JS 的黄在浅灰上等于没有，Electron 那种细线在 20px 下会碎成噪点。 */
.ymw-mega__ic:has(> .ymw-langic) {
	background: transparent;
}

.ymw-langic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	/* 底色和字色由 PHP 写在行内（module/lang-icon.php），
	   这里只负责形状和尺寸。 */
}

.ymw-mega__ic .ymw-langic svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}

/* Java 的杯子：杯身填充，杯柄和蒸汽描边。
   .ymw-mega__ic svg 上的 fill 会被子元素继承，这里把带 stroke 的改回只描边。 */
.ymw-langic svg [stroke] {
	fill: none;
	stroke: currentColor;
}

/* 认不出的语言：中性灰方块 + 尖括号，跟品牌色并排也不抢眼 */
.ymw-langic--muted {
	background: light-dark(#eef1f4, #2f353b);
	color: light-dark(#6b7280, #aab3c0);
}