.auth-page {
	--auth-footer-h: 45px;
	align-items: center;
	background-color: #f5f7f8;
	background-image: linear-gradient(
		rgba(245, 247, 248, 0.35),
		rgba(245, 247, 248, 0.35)
	), url("../../images/login_background.jpg");
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	justify-content: center;
	min-height: calc(100vh - var(--auth-footer-h));
	padding: 16px;
	padding-bottom: calc(24px + var(--auth-footer-h));
}

@supports (height: 100dvh) {
	.auth-page {
		min-height: calc(100dvh - var(--auth-footer-h));
	}
}

.auth-shell {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 auto;
	max-width: 480px;
	width: 100%;
}

.auth-header,
.auth-panel {
	background: #ffffff;
	border: 1px solid rgba(16, 68, 92, 0.12);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(16, 68, 92, 0.06);
}

.auth-header {
	padding: 16px;
}

.auth-header h1,
.auth-section-title {
	color: var(--titles, #10445c);
	font-weight: 700;
	margin: 0;
}

.auth-header h1 {
	font-size: 24px;
}

.auth-kicker {
	color: var(--primary, #0b6f8a);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 4px;
	text-transform: uppercase;
}

.auth-meta,
.auth-muted {
	color: #5d6f79;
	font-size: 15px;
	margin: 8px 0 0;
}

.auth-alert {
	background: #fdeceb;
	border: 1px solid rgba(210, 109, 96, 0.35);
	border-radius: 10px;
	color: #9b2c27;
	font-size: 15px;
	margin: 0;
	padding: 12px 16px;
}

.auth-panel {
	padding: 16px;
}

.auth-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.auth-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.auth-field span {
	color: #647782;
	font-size: 12px;
	font-weight: 700;
}

.auth-field input {
	background: #ffffff;
	border: 1px solid rgba(16, 68, 92, 0.16);
	border-radius: 8px;
	color: #1d2d35;
	font-size: 15px;
	min-height: 44px;
	padding: 8px 12px;
	width: 100%;
}

.auth-field input:focus {
	border-color: var(--primary, #0b6f8a);
	box-shadow: 0 0 0 3px rgba(11, 111, 138, 0.10);
	outline: none;
}

.auth-btn {
	align-items: center;
	border-radius: 10px;
	border: 1px solid transparent;
	cursor: pointer;
	display: inline-flex;
	font-size: 15px;
	font-weight: 700;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	text-decoration: none;
	width: 100%;
}

.auth-btn--primary {
	background: var(--primary, #0b6f8a);
	border-color: var(--primary, #0b6f8a);
	color: #ffffff;
}

.auth-btn--secondary {
	background: #ffffff;
	border-color: rgba(16, 68, 92, 0.24);
	color: var(--titles, #10445c);
}

.auth-link-row {
	margin: 8px 0 0;
	text-align: center;
}

.auth-link-row a {
	color: var(--primary, #0b6f8a);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

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

@media (min-width: 768px) {
	.auth-header h1 {
		font-size: 28px;
	}
}