:root {
	--login-ink: #17243d;
	--login-muted: #68748a;
	--login-navy: #10213f;
	--login-blue: #1267a8;
	--login-cyan: #20a9c9;
	--login-gold: #e8b85a;
	--login-line: #dce4ee;
}

body.login-page {
	min-height: 100vh;
	padding: 0;
	margin: 0;
	background:
		radial-gradient(circle at 8% 12%, rgba(32, 169, 201, 0.2), transparent 27%),
		linear-gradient(135deg, #0b1930 0%, #153d68 48%, #e9f2f7 48%, #f7fafc 100%);
	color: var(--login-ink);
	font-family: "Trebuchet MS", "Gill Sans", sans-serif;
}

.login-shell {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(29rem, 0.92fr);
	width: min(1120px, calc(100% - 3rem));
	min-height: 690px;
	margin: max(2rem, 6vh) auto;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 28px;
	box-shadow: 0 35px 90px rgba(6, 20, 42, 0.3);
}

.login-brand {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(3rem, 6vw, 5.5rem);
	overflow: hidden;
	background:
		linear-gradient(145deg, rgba(16, 33, 63, 0.95), rgba(13, 89, 139, 0.91)),
		repeating-linear-gradient(45deg, transparent 0 18px, rgba(255, 255, 255, 0.04) 18px 19px);
	color: #fff;
}

.login-brand::before,
.login-brand::after {
	position: absolute;
	content: "";
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 50%;
}

.login-brand::before { width: 390px; height: 390px; right: -210px; top: -135px; }
.login-brand::after { width: 270px; height: 270px; left: -150px; bottom: -120px; }

.brand-mark {
	display: grid;
	place-items: center;
	width: 70px;
	height: 70px;
	margin-bottom: 2.2rem;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.25);
	font-size: 2rem;
	color: var(--login-gold);
}

.brand-kicker,
.login-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.18em;
}

.brand-kicker { color: #9ed9e7; }
.login-brand h1 { max-width: 470px; margin: 0; font-family: Georgia, serif; font-size: clamp(2.7rem, 5vw, 4.6rem); line-height: 0.98; letter-spacing: -0.045em; }
.brand-copy { max-width: 450px; margin: 1.6rem 0 2.4rem; color: #c9d9e8; font-size: 1.05rem; line-height: 1.75; }

.brand-features { display: grid; gap: 0.9rem; }
.brand-features div { display: flex; align-items: center; gap: 0.8rem; color: #e8f1f7; font-size: 0.92rem; }
.brand-features i { color: var(--login-gold); font-size: 1.1rem; }
.brand-footnote { position: absolute; bottom: 2rem; margin: 0; color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; }
.brand-footnote span { margin-left: 0.55rem; color: #86c8dc; font-weight: 600; }

.login-panel { display: flex; align-items: center; padding: clamp(2.5rem, 5vw, 5rem); background: rgba(255, 255, 255, 0.98); }
.login-content { width: 100%; max-width: 390px; margin: 0 auto; }
.mobile-brand { display: none; }
.login-eyebrow { color: var(--login-blue); }
.login-content h2 { margin: 0; font-family: Georgia, serif; font-size: 2.5rem; letter-spacing: -0.035em; }
.login-intro { margin: 0.7rem 0 2rem; color: var(--login-muted); }

.login-alert { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1rem; padding: 0.85rem 1rem; border-radius: 12px; font-size: 0.85rem; line-height: 1.45; }
.login-alert-danger { background: #fff0f0; color: #9e2e34; border: 1px solid #f4c9cc; }
.login-alert-success { background: #edf9f3; color: #176444; border: 1px solid #bfe4d1; }
.login-alert i { margin-top: 0.1rem; }

.login-form { display: grid; gap: 1.15rem; }
.login-field label { display: block; margin-bottom: 0.45rem; color: #33425a; font-size: 0.82rem; font-weight: 800; }
.field-control { position: relative; }
.field-control > i { position: absolute; z-index: 2; left: 1rem; top: 26px; transform: translateY(-50%); color: #8390a4; font-size: 1rem; pointer-events: none; }
.field-control .form-control { height: 52px; padding: 0.7rem 1rem 0.7rem 2.8rem; border: 1px solid var(--login-line); border-radius: 12px; background: #f8fafc; color: var(--login-ink); box-shadow: none; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.field-control .form-control:focus { border-color: var(--login-cyan); background: #fff; box-shadow: 0 0 0 4px rgba(32, 169, 201, 0.12); }
.field-control .form-control.is-valid,
.field-control .form-control.is-invalid { background-position: right 0.9rem center; padding-right: 2.5rem; }
.field-control .invalid-feedback { margin-top: 0.4rem; }

.login-button { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 0.45rem; padding: 0.9rem 1.1rem 0.9rem 1.3rem; border: 0; border-radius: 12px; background: linear-gradient(110deg, var(--login-navy), var(--login-blue)); color: #fff; font-weight: 800; box-shadow: 0 12px 24px rgba(16, 66, 111, 0.22); transition: transform 160ms ease, box-shadow 160ms ease; }
.login-button:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(16, 66, 111, 0.28); }
.login-button i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, 0.14); }
.login-security { margin: 1.5rem 0 0; color: #8590a1; font-size: 0.75rem; text-align: center; }
.login-security i { margin-right: 0.3rem; color: var(--login-blue); }

@media (max-width: 900px) {
	body.login-page { background: linear-gradient(145deg, #0d2648, #1686b5); }
	.login-shell { grid-template-columns: 1fr; width: min(520px, calc(100% - 2rem)); min-height: 0; margin: 2rem auto; }
	.login-brand { display: none; }
	.login-panel { display: block; padding: 2rem clamp(1.4rem, 7vw, 3.5rem) 2.5rem; }
	.mobile-brand { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 3rem; color: var(--login-navy); font-family: Georgia, serif; font-size: 1.4rem; font-weight: 700; }
	.mobile-brand i { color: var(--login-blue); }
}

@media (max-width: 480px) {
	.login-shell { width: 100%; margin: 0; min-height: 100vh; border-radius: 0; }
	.login-panel { padding-top: 1.5rem; }
	.mobile-brand { margin-bottom: 2.5rem; }
	.login-content h2 { font-size: 2.15rem; }
}