.xinghe-login .page-content-wrapper {
	padding: 0;
}

.xinghe-login .page-content-wrapper > main {
	max-width: none;
	padding: 0;
}

.xinghe-login-layout {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	min-height: 100svh;
}

.xinghe-brand {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: radial-gradient(ellipse at 52% 46%, #262234 0%, #151727 46%, #0d0d1a 100%);
	color: #f5f2e9;
	padding: 2rem;
}

.xinghe-brand::before {
	content: "";
	position: absolute;
	inset: 10% -10%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(circle at 23% 30%, #d4a843 0 1px, transparent 2px),
		radial-gradient(circle at 73% 19%, #f5f2e9 0 1px, transparent 2px),
		radial-gradient(circle at 83% 65%, #d4a843 0 1px, transparent 2px),
		radial-gradient(circle at 29% 76%, #9a9ab0 0 1px, transparent 2px);
}

.xinghe-brand-identity {
	display: grid;
	justify-items: center;
	text-align: center;
}

.xinghe-brand-logo {
	display: block;
	width: clamp(10rem, 21vw, 18rem);
	height: auto;
}

.xinghe-brand-wordmark {
	margin: 0;
	color: #e8c979;
	font-size: .8rem;
	letter-spacing: .32em;
}

.xinghe-brand-product {
	margin: .8rem 0 0;
	color: #ccc8d4;
	font-size: .875rem;
	letter-spacing: .1em;
}

.xinghe-login-form {
	display: grid;
	place-items: center;
	min-width: 0;
	padding: clamp(1.25rem, 5vw, 4rem);
	background: #f8f6f1;
}

.xinghe-login-form > div {
	width: min(100%, 27rem);
}

.xinghe-login .xinghe-login-form .page-card {
	min-height: auto;
	max-width: none;
	padding: clamp(1.25rem, 3vw, 2.75rem);
	border: 1px solid #e9e2d5;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 12px 36px rgb(28 22 36 / 7%);
}

.xinghe-login-form .page-card-head .app-logo {
	display: none;
}

.xinghe-login .xinghe-login-form .page-card-body .form-control {
	min-height: 2.5rem;
}

.xinghe-login-form .es-button[data-variant="solid"]:not(:disabled) {
	min-height: 2.5rem;
	background: #d4a843;
	color: #171321;
}

.xinghe-login-form .es-button[data-variant="solid"]:not(:disabled):hover {
	background: #e3ba5c;
}

.xinghe-login-form :is(a, button, input):focus-visible {
	outline: 2px solid #86601c;
	outline-offset: 2px;
}

@media (max-width: 700px) {
	.xinghe-login-layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
	}

	.xinghe-brand {
		padding: .75rem 1.25rem;
	}

	.xinghe-brand-identity {
		grid-template-columns: 5.5rem auto;
		align-items: center;
		gap: .75rem;
		text-align: left;
	}

	.xinghe-brand-logo {
		width: 100%;
	}

	.xinghe-brand-product {
		margin-top: .35rem;
	}

	.xinghe-login-form {
		align-items: start;
		padding: 1.25rem;
	}

	.xinghe-login .xinghe-login-form .page-card-body .form-control {
		font-size: 16px;
	}
}

@media (prefers-color-scheme: dark) {
	.xinghe-login-form {
		background: var(--surface-base);
	}

	.xinghe-login .xinghe-login-form .page-card {
		background: var(--surface-base);
		border-color: var(--outline-gray-2);
	}
}