:root {
	--blue-deep: #123a78;
	--blue-bright: #17498f;
	--ink: #202a39;
	--surface: #f0f2f5;
	--field: #fafbfc;
	--lime: #64d315;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: "Trebuchet MS", "Segoe UI", sans-serif;
	color: var(--ink);
}

.login-page { min-height: 100vh; min-height: 100svh; background: #112b50; }

.login-shell {
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: 24px 16px;
	overflow: hidden;
	position: relative;
	/*background:
		linear-gradient(160deg, rgba(18, 38, 72, .82), rgba(7, 18, 35, .92)),
		linear-gradient(125deg, transparent 0 28%, #192d4c 28% 38%, transparent 38% 54%, #243b5b 54% 66%, transparent 66%),
		#132b4c;*/
}

.login-shell::before,
.login-shell::after {
	content: "";
	position: absolute;
	bottom: -8vh;
	width: 55vw;
	height: 62vh;
	opacity: .45;
	background: linear-gradient(145deg, transparent 0 35%, #1d3557 35% 50%, transparent 50%), linear-gradient(35deg, transparent 0 42%, #0c1e37 42% 57%, transparent 57%);
}

.login-shell::before { left: -18vw; }
.login-shell::after { right: -18vw; transform: scaleX(-1); }

.login-card {
	width: min(100%, 420px);
	position: relative;
	z-index: 1;
	overflow: hidden;
	/*border: 1px solid rgba(255, 255, 255, .55);*/
	border-radius: 23px;
	box-shadow: 0 24px 50px rgba(5, 15, 30, .3);
}

.login-intro {
	padding: 24px 20px 22px;
	text-align: center;
	color: #fff;
	background: linear-gradient(160deg, var(--blue-deep), var(--blue-bright));
}

.login-intro img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: contain;
	margin: 0 auto 12px;
}

.login-intro h1 {
	margin: 0;
	font-size: clamp(25px, 7vw, 31px);
	line-height: 1.08;
	font-weight: 800;
}

.login-intro p { margin: 8px 0 0; font-size: 14px; line-height: 1.4; font-weight: 600; }

.login-form { padding: 24px 20px 20px; background: var(--surface); }
.field-group + .field-group { margin-top: 18px; }
.field-group label, .remember-me, .form-options a { font-size: 14px; font-weight: 700; }
.field-group > label { display: block; margin: 0 0 7px; }
.input-wrap { position: relative; }

.input-icon {
	position: absolute;
	top: 50%;
	left: 16px;
	color: #1260b4;
	font-size: 16px;
	line-height: 1;
	transform: translateY(-50%);
}

.input-wrap input {
	width: 100%;
	height: 48px;
	border: 0;
	border-radius: 12px;
	outline: 0;
	padding: 0 14px 0 43px;
	color: var(--ink);
	background: var(--field);
	font: inherit;
	font-size: 16px;
}

.input-wrap input::placeholder { color: #8c9098; }
.input-wrap input:focus { box-shadow: 0 0 0 2px rgba(23, 73, 143, .3); }

.form-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 20px; }
.remember-me { display: flex; align-items: center; gap: 7px; font-weight: 400; }
.remember-me input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue-bright); }
.form-options a { color: #0752a1; text-decoration: none; }
.form-options a:hover { text-decoration: underline; }

.login-form button {
	width: 100%;
	height: 48px;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	color: #fff;
	background: linear-gradient(100deg, #4dbb0b, var(--lime));
	font: inherit;
	font-size: 16px;
	font-weight: 800;
}

.login-form button:hover { filter: brightness(1.06); }
.login-form button:active { transform: translateY(1px); }
.login-form button:disabled { cursor: wait; opacity: .8; }

@media (max-width: 380px) {
	.login-shell { padding: 18px 12px; }
	.login-form { padding: 20px 16px 18px; }
	.form-options { justify-content: flex-start; }
}

@media (min-width: 480px) {
	.login-shell { padding: 32px 24px; }
	.login-intro { padding: 30px 24px 26px; }
	.login-intro img { width: 80px; height: 80px; margin-bottom: 16px; }
	.login-form { padding: 28px 26px 24px; }
}