:root {
	--login-accent: var(--infintrix-login-accent, #171717);
	--login-accent-strong: color-mix(in srgb, var(--login-accent) 76%, #111827);
	--login-ink: #121a2c;
	--login-muted: #677080;
	--login-border: #dfe3ea;
	--login-page-padding: clamp(38px, 6.2vw, 104px);
}

* { box-sizing: border-box; }

body.infintrix-login {
	margin: 0;
	min-width: 320px;
	color: var(--login-ink);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.login-page {
	position: relative;
	display: grid;
	min-height: 100vh;
	overflow: hidden;
	padding: var(--login-page-padding);
	place-items: center;
	background: var(--bg-color, #f7f7f7);
}

body.infintrix-login.has-login-background .login-page {
	background: linear-gradient(rgba(247, 249, 252, .58), rgba(247, 249, 252, .58)), var(--infintrix-login-background) center / cover;
}

.login-shell {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
	width: min(960px, 100%);
	min-height: min(600px, calc(100vh - (var(--login-page-padding) * 2)));
	overflow: hidden;
	border: 1px solid rgba(209, 216, 226, .84);
	border-radius: 19px;
	background: #fff;
	box-shadow: 0 19px 42px rgba(31, 63, 99, .15), 0 3px 9px rgba(31, 63, 99, .06);
	backdrop-filter: blur(8px);
}

.login-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 47px 55px 0;
	background:
		linear-gradient(155deg, rgba(255, 255, 255, .95) 0%, color-mix(in srgb, var(--login-accent) 3%, #fff) 55%, color-mix(in srgb, var(--login-accent) 10%, #fff) 100%),
		var(--infintrix-login-background, none) center / cover;
}

.login-hero::before {
	position: absolute;
	right: -86px;
	bottom: 65px;
	left: -90px;
	height: 190px;
	border-radius: 50% 50% 0 0 / 38% 38% 0 0;
	background:
		radial-gradient(ellipse at 75% 70%, color-mix(in srgb, var(--login-accent) 32%, transparent) 0 1px, transparent 2px) 0 0 / 12px 12px,
		linear-gradient(154deg, transparent 0 30%, color-mix(in srgb, var(--login-accent) 15%, transparent) 30.2% 47%, transparent 47.2%),
		linear-gradient(166deg, transparent 0 47%, color-mix(in srgb, var(--login-accent) 12%, transparent) 47.2% 66%, transparent 66.2%);
	content: "";
	pointer-events: none;
	z-index: 0;
}

.login-hero-content { position: relative; z-index: 3; max-width: 390px; }
.login-hero h1 { margin: 0; color: #0f172a; font-size: clamp(27px, 2.15vw, 32px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.login-hero-lead { margin: 10px 0 19px; color: #4b5565; font-size: 15px; line-height: 1.5; }

.login-feature-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.login-feature-list li { display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 45px; }
.feature-icon { display: grid; width: 45px; height: 45px; place-items: center; border: 1px solid color-mix(in srgb, var(--login-accent) 18%, transparent); border-radius: 14px; background: rgba(255, 255, 255, .9); box-shadow: 0 6px 18px color-mix(in srgb, var(--login-accent) 10%, transparent); color: var(--login-accent); }
.feature-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.login-feature-list strong { display: block; margin-bottom: 2px; color: var(--login-accent-strong); font-size: 14px; font-weight: 750; line-height: 1.25; }
.login-feature-list small { display: block; color: #1f2937; font-size: 12px; line-height: 1.35; }

.login-scene { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 255px; overflow: hidden; pointer-events: none; }
.login-scene-image { position: relative; z-index: 1; display: block; width: 160%; max-width: none; height: 135%; margin: 0 0 0 -30%; object-fit: contain; object-position: center bottom; transform: translateY(-20px); filter: drop-shadow(0 15px 17px rgba(35, 65, 91, .18)); }
.scene-desk { position: absolute; right: -22px; bottom: 0; left: -22px; height: 72px; background: linear-gradient(165deg, rgba(255, 255, 255, .78), rgba(204, 226, 241, .6)); box-shadow: 0 -10px 25px rgba(224, 240, 251, .38); }
.scene-files { position: absolute; bottom: 43px; left: 52px; width: 124px; height: 55px; transform: skewY(-9deg); border-radius: 5px; background: #1e83e9; box-shadow: 0 9px 11px rgba(50, 94, 134, .18); }.scene-files::before, .scene-files::after, .scene-files i { position: absolute; left: 11px; width: 99px; height: 12px; border-radius: 2px; background: #e7f2fb; content: ""; }.scene-files::before { top: 9px; }.scene-files::after { top: 25px; }.scene-files i { top: 41px; background: #176cc8; }
.scene-calculator { position: absolute; bottom: 17px; left: 47px; display: grid; width: 115px; height: 67px; padding: 13px; grid-template-columns: repeat(3, 1fr); gap: 5px; transform: rotate(-9deg); border-radius: 7px; background: #394a58; box-shadow: 0 8px 10px rgba(22, 37, 48, .25); }.scene-calculator::before { position: absolute; top: 8px; right: 11px; left: 11px; height: 10px; border-radius: 2px; background: #d8e9e8; content: ""; }.scene-calculator i { display: block; margin-top: 12px; border-radius: 2px; background: #d9e1e7; }.scene-calculator i:nth-child(3n) { background: #f29c40; }
.scene-laptop { position: absolute; bottom: 27px; left: 188px; width: 294px; height: 170px; transform: perspective(520px) rotateX(5deg) rotateZ(-5deg); transform-origin: left bottom; border: 8px solid #2b3742; border-bottom-width: 13px; border-radius: 10px 10px 5px 5px; background: #ecf7ff; box-shadow: 0 18px 21px rgba(24, 45, 62, .24); }.scene-laptop::after { position: absolute; right: -30px; bottom: -24px; left: -30px; height: 15px; border-radius: 2px 2px 14px 14px; background: #aebbc6; content: ""; }.scene-laptop span { position: absolute; inset: 13px; border: 1px solid #d4e3ee; background: linear-gradient(90deg, #eff7fb 0 21%, #fff 21%); }.scene-laptop span::before { position: absolute; top: 13px; left: 11px; width: 29px; height: 6px; border-radius: 2px; background: #1885ef; box-shadow: 0 15px 0 #d8e2eb, 0 30px 0 #d8e2eb, 0 45px 0 #d8e2eb; content: ""; }.scene-laptop b { position: absolute; right: 30px; bottom: 25px; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(#167ee8 0 45%, #cfe6fb 45% 73%, #5ab6fb 73%); }.scene-laptop em { position: absolute; right: 101px; bottom: 29px; width: 65px; height: 65px; border-bottom: 7px solid #53a9f8; border-left: 7px solid transparent; transform: skewY(-10deg); }
.scene-plant { position: absolute; right: 19px; bottom: 22px; width: 75px; height: 123px; }.scene-plant b { position: absolute; bottom: 0; left: 13px; width: 49px; height: 57px; border-radius: 5px 5px 16px 16px; background: linear-gradient(90deg, #cdd4d9, #f9fbfb); box-shadow: 0 9px 12px rgba(39, 76, 99, .13); }.scene-plant i { position: absolute; bottom: 49px; left: 34px; width: 18px; height: 54px; transform-origin: bottom; border-radius: 100% 0 100% 0; background: linear-gradient(135deg, #a7d77d, #4c9c61); }.scene-plant i:nth-child(1) { transform: rotate(-47deg); }.scene-plant i:nth-child(2) { transform: rotate(7deg); }.scene-plant i:nth-child(3) { transform: rotate(52deg); }

.login-pane { display: grid; grid-template-rows: 1fr auto; min-width: 0; background: #fff; border-left: 1px solid #e6e9ef; }
.login-form-area { display: grid; align-content: center; width: min(100%, 430px); margin: 0 auto; padding: 40px 34px 30px; }
.login-route { display: none; }.login-route.for-login { display: block; }
.login-form-head { margin-bottom: 27px; text-align: center; }.login-form-logo { display: block; width: 68px; height: 45px; margin: 0 auto 12px; background: var(--infintrix-login-logo) center / contain no-repeat; }.login-form-head h2 { margin: 0; color: #17191e; font-size: 31px; font-weight: 750; letter-spacing: -.04em; line-height: 1.12; }.login-form-head p { margin: 8px 0 0; color: #717783; font-size: 14px; line-height: 1.45; }
.login-content { width: 100%; }.form-group { margin-bottom: 17px; }.form-group label { display: block; margin-bottom: 7px; color: #383d47; font-size: 13px; font-weight: 600; }
.login-input { position: relative; display: flex; align-items: center; height: 52px; border: 1px solid var(--login-border); border-radius: 9px; background: #fff; transition: border-color .18s ease, box-shadow .18s ease; }.login-input:focus-within { border-color: color-mix(in srgb, var(--login-accent) 70%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--login-accent) 13%, transparent); }.login-input svg { width: 19px; height: 19px; flex: 0 0 auto; margin: 0 11px 0 14px; stroke: #939ba9; stroke-width: 1.65; fill: none; }.login-input .form-control { width: 100%; height: 100%; min-width: 0; padding: 0 12px 0 0; border: 0; outline: 0; background: transparent; color: #212735; font: inherit; font-size: 14px; }.login-input .form-control::placeholder { color: #a6adb9; }.toggle-password { flex: 0 0 auto; margin: 0 12px; padding: 4px; border: 0; background: transparent; color: #7e8795; cursor: pointer; font: inherit; font-size: 12px; font-weight: 650; }
.login-actions { display: grid; gap: 20px; margin-top: 4px; }.login-actions > a { justify-self: end; color: var(--login-accent-strong); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }.login-actions > a:hover { color: color-mix(in srgb, var(--login-accent) 70%, #000); }.btn.btn-login, .btn.btn-forgot { --btn-primary: var(--login-accent); --icon-fill-bg: var(--login-accent); width: 100%; min-height: 54px; border: 0; border-radius: 8px; background-color: var(--login-accent); box-shadow: 0 8px 15px color-mix(in srgb, var(--login-accent) 20%, transparent); color: #fff; cursor: pointer; font: inherit; font-size: 16px; font-weight: 750; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }.btn.btn-login:hover, .btn.btn-forgot:hover, .btn.btn-login:focus, .btn.btn-forgot:focus { transform: translateY(-1px); background-color: color-mix(in srgb, var(--login-accent) 86%, #000); box-shadow: 0 11px 19px color-mix(in srgb, var(--login-accent) 27%, transparent); color: #fff; }.btn.btn-login:active, .btn.btn-forgot:active { background-color: color-mix(in srgb, var(--login-accent) 78%, #000) !important; }.back-to-login { justify-self: center !important; }
.login-terms { margin: 20px 0 0; color: #878d97; font-size: 12px; line-height: 1.45; text-align: center; }.login-terms a { color: var(--login-accent-strong); text-decoration: none; }.login-terms a:hover { text-decoration: underline; }
.form-verify { display: grid; gap: 18px; color: var(--login-ink); }.form-verify .page-card-head { margin: 0; font-size: 16px; font-weight: 700; text-align: center; }.form-verify .indicator { color: var(--login-accent); }.form-verify #otp_div { color: var(--login-muted); font-size: 14px; line-height: 1.5; text-align: center; }.form-verify .form-control { width: 100%; height: 54px; padding: 0 16px; border: 1px solid var(--login-border); border-radius: 9px; color: var(--login-ink); font: inherit; outline: 0; }.form-verify .form-control:focus { border-color: var(--login-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--login-accent) 16%, transparent); }.form-verify .btn-primary { min-height: 52px; border: 0; border-radius: 8px; background: var(--login-accent); color: #fff; font: inherit; font-weight: 750; }
.invalid .login-input { border-color: #d94b4b; }.invalid-login { animation: login-shake .35s ease; }@keyframes login-shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.login-footer { padding: 20px 34px; border-top: 1px solid #eef0f3; color: #969ba5; font-size: 12px; text-align: center; }

@media (max-height: 800px) and (min-width: 1021px) { :root { --login-page-padding: 30px; }.login-hero { padding: 32px 45px; }.login-hero h1 { font-size: 27px; }.login-hero-lead { margin: 6px 0 11px; font-size: 13px; }.login-feature-list { gap: 5px; }.login-feature-list li { min-height: 43px; }.feature-icon { width: 42px; height: 42px; }.feature-icon svg { width: 21px; height: 21px; }.login-feature-list strong { margin-bottom: 1px; font-size: 13px; }.login-feature-list small { font-size: 11px; }.login-scene { height: 204px; }.scene-laptop { transform: scale(.8) perspective(520px) rotateX(5deg) rotateZ(-5deg); }.scene-files, .scene-calculator, .scene-plant { transform: scale(.8); transform-origin: left bottom; }.scene-plant { transform-origin: right bottom; }.login-form-head { margin-bottom: 22px; }.login-form-logo { margin-bottom: 8px; }.login-form-head h2 { font-size: 29px; }.form-group { margin-bottom: 14px; }.login-actions { gap: 14px; }.login-terms { margin-top: 14px; } }
@media (max-width: 1020px) { :root { --login-page-padding: 24px; }.login-page::before, .login-page::after { display: none; }.login-shell { grid-template-columns: 1fr; width: min(620px, 100%); min-height: min(690px, calc(100vh - (var(--login-page-padding) * 2))); }.login-hero { display: none; }.login-pane { min-height: 100%; border-left: 0; }.login-form-area { padding-top: 46px; } }
@media (max-width: 520px) { :root { --login-page-padding: 0px; }.login-shell { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }.login-form-area { padding: 42px 25px 30px; }.login-form-head { margin-bottom: 28px; }.login-form-head h2 { font-size: 30px; }.login-footer { padding: 18px; }.login-input { height: 53px; } }