/* 友链页 */
.joe_friend {
	margin: 18px 0 20px;
}

.joe_friend__hero {
	display: flex;
	gap: 18px;
	margin-bottom: 16px;
	padding: 18px;
	align-items: stretch;
	justify-content: space-between;
	border: 1px solid rgba(148, 163, 184, .2);
	border-radius: 8px;
	background:
		linear-gradient(135deg, rgba(248, 252, 255, .96), rgba(240, 247, 255, .9));
	box-shadow: 0 16px 36px rgba(15, 23, 42, .06);
}

.joe_friend__hero-copy {
	min-width: 0;
}

.joe_friend__eyebrow {
	display: inline-flex;
	margin-bottom: 8px;
	color: #1683f7;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0;
}

.joe_friend__hero h2,
.friend_submit__head h2 {
	margin: 0;
	color: var(--main);
	font-size: 24px;
	font-weight: 850;
	line-height: 1.3;
}

.joe_friend__hero p,
.friend_submit__head p {
	max-width: 560px;
	margin: 8px 0 0;
	color: var(--routine);
	font-size: 14px;
	line-height: 1.7;
}

.joe_friend__stats {
	display: grid;
	min-width: 270px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.joe_friend__stat {
	display: flex;
	min-width: 0;
	padding: 12px 10px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border: 1px solid rgba(22, 131, 247, .1);
	border-radius: 8px;
	background: rgba(255, 255, 255, .72);
}

.joe_friend__stat strong {
	color: #0b78e3;
	font-size: 18px;
	font-weight: 850;
	line-height: 1.1;
}

.joe_friend__stat span {
	margin-top: 5px;
	color: var(--minor);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.joe_detail__friends {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 18px;
}

.joe_detail__friends-item {
	min-width: 0;
}

.joe_friend__card {
	position: relative;
	display: flex;
	min-height: 116px;
	height: 100%;
	padding: 16px 14px;
	align-items: center;
	gap: 12px;
	color: var(--main);
	border: 1px solid rgba(148, 163, 184, .18);
	border-radius: 8px;
	background: rgba(255, 255, 255, .78);
	box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
	overflow: hidden;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.joe_friend__card::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: #1683f7;
	opacity: 0;
	transition: opacity .22s ease;
}

.joe_friend__card:hover {
	color: var(--main);
	border-color: rgba(22, 131, 247, .28);
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 22px 44px rgba(15, 23, 42, .1);
	transform: translateY(-4px);
}

.joe_friend__card:hover::before {
	opacity: 1;
}

.joe_friend__avatar {
	display: inline-flex;
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(148, 163, 184, .22);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
	overflow: hidden;
}

.joe_friend__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.joe_friend__card-body {
	display: grid;
	min-width: 0;
	gap: 4px;
	flex: 1;
}

.joe_friend__name,
.joe_friend__desc,
.joe_friend__domain {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.joe_friend__name {
	color: var(--main);
	font-size: 15px;
	font-weight: 850;
	line-height: 1.35;
}

.joe_friend__desc {
	color: var(--routine);
	font-size: 13px;
	line-height: 1.45;
}

.joe_friend__domain {
	color: #1683f7;
	font-size: 12px;
	font-weight: 750;
	line-height: 1.35;
}

.joe_friend__visit {
	display: inline-flex;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	align-items: center;
	justify-content: center;
	color: #8ea0b8;
	border-radius: 50%;
	background: rgba(226, 238, 252, .78);
	transition: color .22s ease, background .22s ease, transform .22s ease;
}

.joe_friend__card:hover .joe_friend__visit {
	color: #fff;
	background: #1683f7;
	transform: translateX(2px);
}

.joe_friend__empty {
	display: grid;
	place-items: center;
	gap: 8px;
	margin-bottom: 18px;
	padding: 34px 18px;
	text-align: center;
	color: var(--routine);
	border: 1px dashed rgba(148, 163, 184, .4);
	border-radius: 8px;
	background: rgba(248, 250, 252, .78);
}

.joe_friend__empty i {
	display: inline-flex;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	color: #1683f7;
	border-radius: 50%;
	background: rgba(22, 131, 247, .12);
}

.joe_friend__empty strong {
	color: var(--main);
	font-size: 16px;
}

.friend_submit {
	margin: 22px 0 25px;
	padding: 18px;
	border: 1px solid rgba(148, 163, 184, .2);
	border-radius: 8px;
	background: rgba(255, 255, 255, .78);
	box-shadow: 0 16px 36px rgba(15, 23, 42, .06);
}

.friend_submit__head {
	margin-bottom: 16px;
}

.friend_submit__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.friend_submit .input {
	display: grid;
	min-width: 0;
	gap: 7px;
	margin: 0;
}

.friend_submit .input-label {
	color: var(--main);
	font-size: 13px;
	font-weight: 760;
}

.friend_submit input {
	width: 100%;
	height: 42px;
	min-width: 0;
	padding: 0 13px;
	color: var(--main);
	border: 1px solid rgba(148, 163, 184, .28);
	border-radius: 8px;
	background: rgba(248, 250, 252, .9);
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.friend_submit input:focus {
	border-color: rgba(22, 131, 247, .58);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(22, 131, 247, .1);
}

.friend_submit .input--captcha {
	grid-column: 1 / -1;
}

.friend_submit__captcha {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 110px;
	gap: 10px;
}

.friend_submit__captcha img {
	width: 110px;
	height: 42px;
	object-fit: cover;
	border: 1px solid rgba(148, 163, 184, .28);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
}

.friend_submit .button {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.friend_submit .button>button {
	display: inline-flex;
	height: 42px;
	padding: 0 18px;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 780;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.friend_submit .button>button:active {
	transform: scale(.98);
}

.friend_submit .button>.submit {
	color: #fff;
	background: #1683f7;
	box-shadow: 0 12px 24px rgba(22, 131, 247, .22);
}

.friend_submit .button>.submit:hover {
	background: #0b78e3;
	box-shadow: 0 16px 30px rgba(22, 131, 247, .28);
}

.friend_submit .button>.reset {
	color: var(--routine);
	background: rgba(226, 232, 240, .78);
}

.friend_submit .button>.reset:hover {
	color: var(--main);
	background: rgba(203, 213, 225, .82);
}

.dark-mode .joe_friend__hero,
body.dark-mode .joe_friend__hero {
	border-color: rgba(148, 163, 184, .14);
	background: linear-gradient(135deg, rgba(15, 23, 42, .88), rgba(20, 31, 48, .86));
	box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
}

.dark-mode .joe_friend__stat,
body.dark-mode .joe_friend__stat,
.dark-mode .joe_friend__card,
body.dark-mode .joe_friend__card,
.dark-mode .friend_submit,
body.dark-mode .friend_submit {
	border-color: rgba(148, 163, 184, .14);
	background: rgba(15, 23, 42, .62);
	box-shadow: 0 16px 36px rgba(0, 0, 0, .2);
}

.dark-mode .joe_friend__card:hover,
body.dark-mode .joe_friend__card:hover {
	background: rgba(15, 23, 42, .82);
}

.dark-mode .joe_friend__hero h2,
body.dark-mode .joe_friend__hero h2,
.dark-mode .friend_submit__head h2,
body.dark-mode .friend_submit__head h2,
.dark-mode .joe_friend__name,
body.dark-mode .joe_friend__name,
.dark-mode .friend_submit .input-label,
body.dark-mode .friend_submit .input-label {
	color: #edf5ff;
}

.dark-mode .joe_friend__hero p,
body.dark-mode .joe_friend__hero p,
.dark-mode .friend_submit__head p,
body.dark-mode .friend_submit__head p,
.dark-mode .joe_friend__desc,
body.dark-mode .joe_friend__desc {
	color: #aebdd2;
}

.dark-mode .joe_friend__stat strong,
body.dark-mode .joe_friend__stat strong,
.dark-mode .joe_friend__domain,
body.dark-mode .joe_friend__domain,
.dark-mode .joe_friend__eyebrow,
body.dark-mode .joe_friend__eyebrow {
	color: #7bc2ff;
}

.dark-mode .joe_friend__stat span,
body.dark-mode .joe_friend__stat span {
	color: #95a3b8;
}

.dark-mode .joe_friend__avatar,
body.dark-mode .joe_friend__avatar,
.dark-mode .friend_submit__captcha img,
body.dark-mode .friend_submit__captcha img {
	border-color: rgba(148, 163, 184, .18);
	background: #0f172a;
}

.dark-mode .joe_friend__visit,
body.dark-mode .joe_friend__visit {
	color: #9fb2cc;
	background: rgba(80, 160, 255, .12);
}

.dark-mode .joe_friend__empty,
body.dark-mode .joe_friend__empty {
	border-color: rgba(148, 163, 184, .18);
	background: rgba(15, 23, 42, .48);
}

.dark-mode .friend_submit input,
body.dark-mode .friend_submit input {
	color: #edf5ff;
	border-color: rgba(148, 163, 184, .18);
	background: rgba(2, 6, 23, .36);
}

.dark-mode .friend_submit input:focus,
body.dark-mode .friend_submit input:focus {
	border-color: rgba(123, 194, 255, .56);
	background: rgba(2, 6, 23, .56);
	box-shadow: 0 0 0 4px rgba(80, 160, 255, .14);
}

@media (max-width: 1200px) {
	.joe_detail__friends {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.joe_friend__hero {
		flex-direction: column;
	}

	.joe_friend__stats {
		width: 100%;
		min-width: 0;
	}
}

@media (max-width: 768px) {
	.joe_friend {
		margin-top: 14px;
	}

	.joe_friend__hero,
	.friend_submit {
		padding: 15px;
	}

	.joe_friend__hero h2,
	.friend_submit__head h2 {
		font-size: 20px;
	}

	.friend_submit__grid,
	.joe_detail__friends {
		grid-template-columns: 1fr;
	}

	.joe_friend__stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
	}

	.joe_friend__stat {
		padding: 9px 6px;
	}

	.joe_friend__stat strong {
		font-size: 16px;
	}

	.joe_friend__stat span {
		font-size: 11px;
	}

	.joe_friend__card {
		min-height: 104px;
		padding: 14px 12px;
	}

	.joe_friend__avatar {
		flex-basis: 48px;
		width: 48px;
		height: 48px;
	}

	.joe_friend__visit {
		width: 28px;
		height: 28px;
		flex-basis: 28px;
	}

	.friend_submit__captcha {
		grid-template-columns: minmax(0, 1fr) 98px;
	}

	.friend_submit__captcha img {
		width: 98px;
	}

	.friend_submit .button>button {
		flex: 1;
	}
}