:root {
	--blue: #106ebe;
	--blue-dark: #0b599b;
	--mint: #0ffcbe;
	--background: #f2f6f8;
	--surface: #ffffff;
	--text: #1e2a32;
	--muted: #687780;
	--border: #dce5ea;
}


* {
	box-sizing: border-box;
}


body {
	margin: 0;

	font-family:
		Arial,
		Helvetica,
		sans-serif;

	background:
		linear-gradient(
			135deg,
			#edf5fa,
			#f5fffc
		);

	color:
		var(--text);
}


.reset-page {
	min-height: 100vh;

	display: flex;

	align-items: center;
	justify-content: center;

	padding: 25px;
}


.reset-card {
	width: 100%;
	max-width: 440px;

	padding: 34px;

	background:
		rgba(255, 255, 255, .96);

	border:
		1px solid
		var(--border);

	border-radius: 16px;

	box-shadow:
		0 15px 40px
		rgba(20, 55, 75, .12);
}


.brand {
	margin-bottom: 30px;

	text-align: center;
}


.brand h1 {
	margin:
		0 0 5px;

	color:
		var(--blue);

	font-size: 25px;
}


.brand p {
	margin: 0;

	color:
		var(--muted);

	font-size: 12px;
	font-style: italic;
}


.reset-card h2 {
	margin:
		0 0 10px;

	font-size: 21px;
}


.instructions {
	margin:
		0 0 24px;

	color:
		var(--muted);

	font-size: 13px;

	line-height: 1.55;
}


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


.form-field label {
	display: block;

	margin-bottom: 6px;

	font-size: 12px;
	font-weight: 700;
}


.form-field input {
	width: 100%;

	padding:
		12px 13px;

	border:
		1px solid
		var(--border);

	border-radius: 8px;

	font-size: 15px;

	outline: none;
}


.form-field input:focus {
	border-color:
		var(--blue);

	box-shadow:
		0 0 0 3px
		rgba(16, 110, 190, .10);
}


.primary-button {
	display: block;

	width: 100%;

	padding:
		12px 16px;

	border: 0;

	border-radius: 8px;

	background:
		var(--blue);

	color:
		#fff;

	font-size: 14px;
	font-weight: 700;

	text-align: center;

	cursor: pointer;
}


.primary-button:hover {
	background:
		var(--blue-dark);
}


.button-link {
	text-decoration: none;
}


.message {
	margin-bottom: 20px;

	padding:
		12px 14px;

	border-radius: 8px;

	font-size: 13px;

	line-height: 1.45;
}


.message.success {
	background:
		#e9fff8;

	border:
		1px solid
		#b8efdd;

	color:
		#087159;
}


.message.error {
	background:
		#fff0f0;

	border:
		1px solid
		#efc5c5;

	color:
		#963737;
}


.back-login {
	margin-top: 20px;

	text-align: center;
}


.back-login a {
	color:
		var(--blue);

	font-size: 12px;
	font-weight: 700;

	text-decoration: none;
}


@media (max-width: 520px) {

	.reset-page {
		padding: 15px;
	}


	.reset-card {
		padding:
			27px 20px;
	}

}