:root {
	--ip-blue: #1a6dff;
	--ip-blue-dark: #0b5be0;
	--ip-navy: #0b1d4a;
	--ip-muted: #5b6785;
	--ip-border: #dfe6f3;
	--ip-field: #f6f8fc;
	--ip-danger: #dc3545;
}

* {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	box-sizing: border-box;
}

/* Whole page fits the screen: no scrolling */
html, body {
	height: 100%;
	margin: 0;
	overflow: hidden;
	color: var(--ip-navy);
	background: radial-gradient(circle at 0% 0%, #dbe9ff 0, transparent 35%), radial-gradient(circle at 100% 100%, #e3eeff 0, transparent 40%), #f0f5ff;
}

body {
	height: 100dvh;
}

#form1 {
	height: 100%;
}

.page {
	height: 100%;
	display: flex;
	align-items: center;
	padding: clamp(12px, 2.5vh, 40px) clamp(12px, 3vw, 48px);
}

/* ---------- Brand ---------- */
.brand-icon {
	width: clamp(40px, 5vh, 52px);
	aspect-ratio: 1;
	border-radius: 14px;
	background: linear-gradient(135deg, #3b8bff, var(--ip-blue-dark));
	box-shadow: 0 10px 24px rgba(26, 109, 255, .3);
	display: grid;
	place-items: center;
	color: #fff;
	font-size: clamp(1.1rem, 2.4vh, 1.7rem);
	flex-shrink: 0;
	overflow: hidden;
}

	.brand-icon img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		padding: 6px;
		background: #fff;
	}

.brand-name {
	font-weight: 700;
	letter-spacing: -.01em;
}

.brand-tag {
	color: var(--ip-muted);
	font-size: clamp(.75rem, 1.4vh, .9rem);
}

/* ---------- Hero (desktop) ---------- */
.hero-title {
	font-size: clamp(1.6rem, 4vh, 3.1rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.03em;
	margin: 0;
}

	.hero-title .accent {
		color: var(--ip-blue);
	}

.hero-text {
	color: var(--ip-muted);
	font-size: clamp(.85rem, 1.9vh, 1.02rem);
	line-height: 1.55;
	max-width: 520px;
	margin: 0;
}

/* ---------- Illustration ---------- */
.illustration {
	height: clamp(120px, 34vh, 320px);
	width: auto;
	max-width: 100%;
}

/* ---------- Features ---------- */
.feature {
	display: flex;
	align-items: center;
	gap: .55rem;
}

	.feature i {
		font-size: clamp(1.1rem, 2.4vh, 1.5rem);
		color: var(--ip-blue);
	}

	.feature strong {
		display: block;
		font-size: clamp(.8rem, 1.6vh, .95rem);
	}

	.feature span {
		font-size: clamp(.7rem, 1.3vh, .8rem);
		color: var(--ip-muted);
	}

.feature-divider {
	width: 1px;
	background: var(--ip-border);
	align-self: stretch;
}

/* ---------- Login card ---------- */
.login-card {
	width: 100%;
	max-width: 440px;
	background: #fff;
	border-radius: 24px;
	padding: clamp(1.2rem, 3.5vh, 2.3rem) clamp(1.2rem, 3vw, 2.2rem);
	box-shadow: 0 30px 60px -20px rgba(11, 29, 74, .18);
}

	.login-card h2 {
		font-weight: 800;
		letter-spacing: -.02em;
		font-size: clamp(1.3rem, 3.2vh, 1.75rem);
		margin-bottom: .2rem;
	}

	.login-card .subtitle {
		color: var(--ip-muted);
		font-size: clamp(.8rem, 1.8vh, .95rem);
	}

.form-label {
	display: block;
	font-weight: 600;
	font-size: .88rem;
	margin-bottom: .3rem;
}

.input-wrap {
	display: flex;
	align-items: center;
	background: var(--ip-field);
	border: 1.5px solid var(--ip-border);
	border-radius: 12px;
	transition: border-color .2s, box-shadow .2s, background .2s;
}

	.input-wrap:focus-within {
		border-color: var(--ip-blue);
		box-shadow: 0 0 0 4px rgba(26, 109, 255, .15);
		background: #fff;
	}

	.input-wrap.is-invalid {
		border-color: var(--ip-danger);
		box-shadow: 0 0 0 4px rgba(220, 53, 69, .12);
	}

	.input-wrap .input-icon {
		color: #7a86a3;
		padding-left: 1rem;
		font-size: 1.05rem;
	}

	.input-wrap input {
		flex: 1;
		min-width: 0;
		border: 0;
		background: transparent;
		box-shadow: none !important;
		outline: none;
		padding: clamp(.6rem, 1.4vh, .85rem) .9rem clamp(.6rem, 1.4vh, .85rem) .6rem;
		color: var(--ip-navy);
		font-size: .95rem;
	}

		.input-wrap input::placeholder {
			color: #9aa5bf;
		}

	.input-wrap .toggle-pass {
		border: 0;
		background: transparent;
		color: #7a86a3;
		padding: 0 1rem;
		font-size: 1.05rem;
	}

		.input-wrap .toggle-pass:hover {
			color: var(--ip-blue);
		}

.toggle-pass:focus-visible {
	outline: 2px solid var(--ip-blue);
	outline-offset: -2px;
	border-radius: 8px;
}

.invalid-msg {
	display: none;
	color: var(--ip-danger);
	font-size: .8rem;
	margin-top: .3rem;
}

	.invalid-msg.show {
		display: block;
	}

/* Server-side error from code-behind */
.alert-msg {
	display: none;
	padding: .6rem .8rem;
	border-radius: 12px;
	font-size: .88rem;
	background: #fdecee;
	color: #b02a37;
	border: 1px solid #f5c2c7;
	margin-bottom: .9rem;
	text-align: center;
}

	.alert-msg.show {
		display: block;
	}

.form-check-input:checked {
	background-color: var(--ip-blue);
	border-color: var(--ip-blue);
}

.form-check-input:focus {
	box-shadow: 0 0 0 .2rem rgba(26, 109, 255, .2);
}

.form-check-label {
	font-size: .9rem;
}

.forgot {
	color: var(--ip-blue);
	font-weight: 600;
	text-decoration: none;
	font-size: .88rem;
}

	.forgot:hover {
		text-decoration: underline;
	}

.btn-signin {
	display: block;
	width: 100%;
	background: linear-gradient(90deg, #2a7bff, var(--ip-blue-dark));
	border: 0;
	border-radius: 12px;
	padding: clamp(.65rem, 1.6vh, .9rem);
	font-weight: 700;
	font-size: 1rem;
	color: #fff;
	box-shadow: 0 12px 24px -10px rgba(26, 109, 255, .7);
	cursor: pointer;
	transition: transform .15s, box-shadow .2s, filter .2s, opacity .2s;
}

	.btn-signin:hover {
		color: #fff;
		filter: brightness(1.05);
		transform: translateY(-1px);
	}

	.btn-signin:active {
		transform: translateY(0);
	}

	.btn-signin:focus-visible {
		outline: 3px solid rgba(26, 109, 255, .35);
		outline-offset: 3px;
	}

	.btn-signin:disabled {
		opacity: .8;
		cursor: wait;
		transform: none;
	}

.or-line {
	display: flex;
	align-items: center;
	gap: .8rem;
	color: #9aa5bf;
	font-size: .82rem;
}

	.or-line::before,
	.or-line::after {
		content: "";
		flex: 1;
		height: 1px;
		background: var(--ip-border);
	}

.signup-box {
	background: var(--ip-field);
	border-radius: 12px;
	padding: .7rem;
	text-align: center;
	color: var(--ip-muted);
	font-size: .88rem;
}

	.signup-box a {
		color: var(--ip-blue);
		font-weight: 600;
		text-decoration: none;
	}

		.signup-box a:hover {
			text-decoration: underline;
		}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px), (max-height: 620px) {
	.page {
		align-items: center;
	}
}

@media (max-width: 767.98px) {
	.hero-block,
	.illustration-block,
	.features-row {
		display: none !important;
	}
}

@media (max-width: 575.98px) {
	.login-card {
		border-radius: 20px;
	}

	.or-line {
		margin: .7rem 0 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}