/* ---------------- auth pages (login / register) -------------------- */

body.auth-page {
	background: radial-gradient(37.53% 147.33% at 5.39% 8.57%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #26282a 0%, #212325 100%);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

body.auth-page header {
	position: static;
	width: 90%;
	margin: 0 auto;
}

.auth-main {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
}

.auth-card {
	width: 100%;
	max-width: 440px;
	background-image: linear-gradient(166deg, #2c2d2f 0% 100%), linear-gradient(166deg, #525A63 0%, #2E353C 50%, #616972 50%, #3E464F 100%);
	background-size: auto auto, 200% 200%;
	background-clip: padding-box, border-box;
	background-origin: padding-box, border-box;
	border: 1px solid transparent;
	border-radius: 16px;
	box-shadow: 8px 8px 22px rgba(21, 22, 24, 0.38), -4px -2px 16px rgba(195, 200, 205, 0.08);
	padding: 40px;
	color: #fff;
}

.auth-card .auth-logo {
	display: block;
	margin: 0 auto 24px;
	max-width: 140px;
}

.auth-card h2 {
	font-size: 28px;
	padding: 0 0 6px;
	text-align: center;
}

.auth-card .auth-sub {
	text-align: center;
	margin-bottom: 28px;
}

.auth-field {
	margin-bottom: 18px;
}

.auth-field label {
	display: block;
	font-size: 13px;
	color: #a0a1ac;
	margin-bottom: 8px;
}

.auth-field .form-control {
	width: 100%;
	padding: 14px 16px;
	font-size: 14px;
}

.auth-field .form-control:focus {
	border-color: #e16623;
}

.auth-error {
	display: none;
	font-size: 12px;
	color: #ff7a5c;
	margin-top: 6px;
}

.auth-field.invalid .auth-error {
	display: block;
}

.auth-field.invalid .form-control {
	border-color: #ff7a5c;
}

.auth-card .btn {
	width: 100%;
	margin-top: 8px;
}

.auth-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: #a0a1ac;
	line-height: 18px;
	margin: 6px 0 18px;
}

.auth-check input {
	margin-top: 3px;
	accent-color: #e16623;
}

.auth-switch {
	text-align: center;
	margin-top: 24px;
	font-size: 13px;
	color: #a0a1ac;
}

.auth-switch a {
	color: #e16623;
}

.auth-switch a:hover {
	text-decoration: underline;
}

@media screen and (max-width: 520px) {
	.auth-card {
		padding: 28px 22px;
	}
}