@font-face {
	font-family: "NeueSansBold";
	src: url("../../asset/font/NeueSans-Bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--login-green: #25a862;
	--login-green-dark: #147d4d;
	--login-green-soft: #eaf9ee;
	--login-green-border: #d5efe0;
	--login-text: #354457;
	--login-muted: #768397;
	--login-line: #dde5ea;
	--login-shadow: 0 30px 70px rgba(47, 81, 66, 0.12);
}

*,
*:before,
*:after {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
}

body.login-modern-body {
	margin: 0;
	color: var(--login-text);
	font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	background:
		radial-gradient(circle at 20% 18%, rgba(223, 247, 233, 0.7), transparent 14%),
		radial-gradient(circle at 50% 50%, rgba(232, 248, 238, 0.55), transparent 34%),
		linear-gradient(180deg, #f8fcfa 0%, #f9fcfb 44%, #f5fbf8 100%);
	overflow-x: hidden;
}

.login-modern-page {
	position: relative;
	min-height: 100vh;
	padding: 34px 20px 44px;
	overflow: hidden;
}

.login-modern-layout {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 900px;
	margin: 0 auto;
}

.login-decor,
.login-dots,
.login-vine {
	position: absolute;
	pointer-events: none;
}

.login-decor--top-left {
	top: -46px;
	left: -76px;
	width: 246px;
	height: 196px;
	border-radius: 0 0 140px 0;
	background:
		radial-gradient(circle at 75% 22%, rgba(196, 236, 197, 0.82), transparent 56%),
		linear-gradient(180deg, rgba(194, 235, 196, 0.72), rgba(227, 246, 232, 0.28));
	filter: blur(0.2px);
}

.login-decor--bottom-left {
	left: -24px;
	bottom: -16px;
	width: 300px;
	height: 286px;
	border-radius: 52% 48% 0 0;
	background:
		radial-gradient(circle at 34% 28%, rgba(184, 236, 176, 0.72), rgba(132, 220, 142, 0.36) 42%, transparent 74%),
		linear-gradient(180deg, rgba(210, 245, 214, 0.82), rgba(157, 223, 166, 0.42));
}

.login-decor--bottom-right {
	right: -84px;
	bottom: -80px;
	width: 360px;
	height: 220px;
	border-radius: 54% 0 0 0;
	background:
		radial-gradient(circle at 40% 40%, rgba(219, 242, 231, 0.72), transparent 44%),
		linear-gradient(180deg, rgba(222, 244, 232, 0.74), rgba(209, 236, 224, 0.3));
}

.login-decor-leaf {
	position: absolute;
	display: block;
	border-radius: 100% 12% 100% 12%;
	background: linear-gradient(180deg, #7dd88b 0%, #2c9b5f 100%);
	box-shadow: inset 0 -10px 18px rgba(18, 94, 56, 0.16);
}

.login-decor-leaf.is-a {
	left: 12px;
	bottom: 92px;
	width: 44px;
	height: 104px;
	transform: rotate(-22deg);
}

.login-decor-leaf.is-b {
	left: 50px;
	bottom: 42px;
	width: 54px;
	height: 126px;
	transform: rotate(12deg);
}

.login-decor-leaf.is-c {
	left: 108px;
	bottom: 24px;
	width: 64px;
	height: 140px;
	transform: rotate(22deg);
}

.login-decor-leaf.is-d {
	left: 164px;
	bottom: 64px;
	width: 42px;
	height: 92px;
	transform: rotate(42deg);
}

.login-dots {
	width: 76px;
	height: 160px;
	background-image: radial-gradient(circle, rgba(168, 219, 191, 0.7) 0, rgba(168, 219, 191, 0.7) 2px, transparent 2.4px);
	background-size: 24px 24px;
	opacity: 0.72;
}

.login-dots--left {
	top: 304px;
	left: 28px;
}

.login-dots--right {
	right: 40px;
	bottom: 208px;
}

.login-vine {
	top: -18px;
	right: -14px;
	width: 250px;
	height: 210px;
}

.login-vine-stem {
	position: absolute;
	top: -12px;
	right: 24px;
	width: 196px;
	height: 116px;
	border-top: 5px solid rgba(78, 168, 96, 0.7);
	border-right: 5px solid rgba(78, 168, 96, 0.7);
	border-radius: 0 120px 0 0;
	transform: rotate(10deg);
}

.login-vine-leaf {
	position: absolute;
	display: block;
	border-radius: 100% 8% 100% 8%;
	background: linear-gradient(180deg, rgba(153, 232, 161, 0.94) 0%, rgba(70, 188, 107, 0.88) 100%);
	box-shadow: inset 0 -10px 18px rgba(32, 116, 61, 0.15);
}

.login-vine-leaf:after {
	position: absolute;
	top: 8%;
	bottom: 8%;
	left: 49%;
	width: 2px;
	background: rgba(255, 255, 255, 0.42);
	transform: translateX(-50%);
	content: "";
}

.login-vine-leaf.is-a {
	top: 42px;
	right: 110px;
	width: 54px;
	height: 88px;
	transform: rotate(68deg);
}

.login-vine-leaf.is-b {
	top: 58px;
	right: 44px;
	width: 58px;
	height: 102px;
	transform: rotate(22deg);
}

.login-vine-leaf.is-c {
	top: 92px;
	right: 144px;
	width: 46px;
	height: 78px;
	transform: rotate(84deg);
}

.login-vine-leaf.is-d {
	top: 96px;
	right: -2px;
	width: 48px;
	height: 90px;
	transform: rotate(-4deg);
}

.login-brand {
	width: 100%;
	max-width: 680px;
	margin-bottom: 28px;
}

.login-brand-image-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.login-brand-image {
	display: block;
	width: 100%;
	max-width: 660px;
	max-height: 148px;
	object-fit: contain;
}

.login-card {
	position: relative;
	width: 100%;
	max-width: 712px;
	border-radius: 42px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.65) inset,
		var(--login-shadow);
	overflow: hidden;
}

.login-card:before {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.66), transparent 26%),
		radial-gradient(circle at 80% 72%, rgba(215, 245, 223, 0.58), transparent 24%);
	content: "";
	pointer-events: none;
}

.login-card-hero,
.login-card-body {
	position: relative;
	z-index: 1;
}

.login-card-hero {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 34px 40px 28px;
	isolation: isolate;
	background:
		linear-gradient(120deg, rgba(245, 255, 248, 0.98) 0%, rgba(237, 251, 241, 0.98) 32%, rgba(226, 247, 229, 0.88) 100%);
}

.login-card-hero:after {
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
	content: "";
	pointer-events: none;
}

.login-card-hero-visual {
	position: relative;
	flex: 0 0 208px;
	width: 208px;
	height: 160px;
	z-index: 1;
}

.login-card-spark {
	position: absolute;
	display: block;
	width: 14px;
	height: 14px;
	background: linear-gradient(180deg, #efe37a 0%, #cfd86f 100%);
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
	opacity: 0.78;
}

.login-card-spark.is-a {
	top: 14px;
	left: 38px;
}

.login-card-spark.is-b {
	top: 58px;
	left: 18px;
	transform: scale(0.82);
}

.login-card-spark.is-c {
	top: 30px;
	right: 16px;
	transform: scale(0.78);
}

.login-card-spark.is-d {
	top: 72px;
	right: 24px;
	transform: scale(0.72);
}

.login-card-orb {
	position: absolute;
	top: 6px;
	left: 40px;
	width: 144px;
	height: 144px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 48% 32%, rgba(255, 255, 255, 0.96) 0%, rgba(242, 255, 247, 0.92) 48%, rgba(219, 246, 226, 0.82) 100%);
	box-shadow:
		0 22px 32px rgba(97, 198, 120, 0.12),
		inset 0 -10px 16px rgba(157, 228, 174, 0.28);
}

.login-card-platform {
	position: absolute;
	left: 30px;
	right: 28px;
	bottom: 12px;
	height: 48px;
}

.login-card-platform-ring {
	position: absolute;
	left: 20px;
	right: 20px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(180deg, rgba(232, 254, 236, 0.96), rgba(193, 237, 203, 0.94));
	box-shadow: 0 12px 22px rgba(98, 198, 122, 0.14);
}

.login-card-platform-ring.is-back {
	bottom: 2px;
	left: 28px;
	right: 28px;
	height: 22px;
	opacity: 0.78;
}

.login-card-platform-ring.is-front {
	bottom: 10px;
}

.login-card-lock {
	position: absolute;
	top: 30px;
	left: 86px;
	width: 54px;
	height: 80px;
}

.login-card-lock-shackle {
	position: absolute;
	top: 0;
	left: 9px;
	width: 36px;
	height: 34px;
	border: 8px solid #44ae69;
	border-bottom: 0;
	border-radius: 22px 22px 0 0;
	background: linear-gradient(180deg, rgba(117, 213, 138, 0.2), rgba(117, 213, 138, 0));
	box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.45);
}

.login-card-lock-body {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 54px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(180deg, #6bc87e 0%, #1e995d 100%);
	box-shadow:
		inset 0 -12px 16px rgba(19, 106, 64, 0.2),
		0 14px 18px rgba(73, 176, 104, 0.18);
}

.login-card-lock-keyhole {
	position: absolute;
	left: 50%;
	bottom: 14px;
	width: 12px;
	height: 18px;
	border-radius: 10px 10px 9px 9px;
	background: #f1f8f2;
	transform: translateX(-50%);
}

.login-card-lock-keyhole:before {
	position: absolute;
	top: -6px;
	left: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #f1f8f2;
	transform: translateX(-50%);
	content: "";
}

.login-card-leaf-cluster {
	position: absolute;
	bottom: 28px;
	display: flex;
	gap: 6px;
}

.login-card-leaf-cluster.is-left {
	left: 28px;
}

.login-card-leaf-cluster.is-right {
	right: 20px;
}

.login-card-leaf-cluster span {
	display: block;
	width: 22px;
	height: 42px;
	border-radius: 100% 10% 100% 10%;
	background: linear-gradient(180deg, rgba(123, 225, 137, 0.94), rgba(52, 177, 93, 0.94));
	box-shadow: inset 0 -8px 14px rgba(31, 118, 65, 0.12);
}

.login-card-leaf-cluster.is-left span:first-child {
	transform: rotate(-28deg);
}

.login-card-leaf-cluster.is-left span:last-child {
	transform: rotate(18deg);
}

.login-card-leaf-cluster.is-right span:first-child {
	transform: rotate(-12deg);
}

.login-card-leaf-cluster.is-right span:last-child {
	transform: rotate(32deg);
}

.login-card-hero-copy {
	position: relative;
	flex: 1 1 auto;
	max-width: 330px;
	z-index: 2;
}

.login-card-hero-copy h2 {
	margin: 0 0 12px;
	color: var(--login-green-dark);
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.03em;
	white-space: nowrap;
}

.login-card-hero-copy p {
	margin: 0;
	color: #47576a;
	font-size: 17px;
	line-height: 1.5;
}

.login-card-body {
	padding: 30px 40px 34px;
	border-radius: 38px 38px 42px 42px;
	background: rgba(255, 255, 255, 0.98);
}

.login-role-switch {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 28px;
}

.login-role-switch-label {
	color: #69768a;
	font-size: 17px;
	font-weight: 500;
}

.login-role-switch-tabs {
	display: inline-flex;
	align-items: center;
	padding: 4px;
	border-radius: 999px;
	background: #f0f2f1;
	box-shadow: inset 0 1px 2px rgba(30, 62, 44, 0.05);
}

.login-role-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 126px;
	height: 48px;
	padding: 0 20px;
	border-radius: 999px;
	color: #778395;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.login-role-tab:hover,
.login-role-tab:focus {
	color: var(--login-green-dark);
	text-decoration: none;
}

.login-role-tab.is-active {
	background: linear-gradient(180deg, #f6fff8 0%, #eaf8ef 100%);
	box-shadow: 0 8px 20px rgba(45, 138, 79, 0.08);
	color: var(--login-green-dark);
}

.login-alert {
	margin-bottom: 18px;
	padding: 14px 16px;
	border: 1px solid rgba(235, 112, 112, 0.24);
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(255, 244, 244, 0.98), rgba(255, 249, 249, 0.98));
	color: #cb4e4e;
}

.login-alert p {
	margin: 0;
	font-size: 13px;
	line-height: 1.46;
}

.login-alert p + p {
	margin-top: 4px;
}

.login-form-modern {
	margin: 0;
}

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

.login-field-shell {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 86px;
	padding: 0 18px 0 22px;
	border: 1px solid var(--login-line);
	border-radius: 24px;
	background: #ffffff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-field-shell:focus-within {
	border-color: rgba(53, 168, 99, 0.48);
	box-shadow:
		0 0 0 4px rgba(37, 168, 98, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.login-field.has-error .login-field-shell {
	border-color: rgba(221, 96, 96, 0.45);
}

.login-field-icon,
.login-field-action {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #7b8797;
}

.login-field-icon {
	color: #2fa466;
}

.login-field-icon-svg,
.login-field-action-icon {
	display: block;
	width: 22px;
	height: 22px;
}

.login-field-input {
	flex: 1 1 auto;
	width: 100%;
	height: 60px;
	border: 0;
	outline: 0;
	background: transparent;
	color: #445365;
	font-size: 18px;
	font-weight: 500;
}

.login-field-input::placeholder {
	color: #8390a1;
}

.login-field-action.is-static {
	cursor: default;
}

.login-field-action--button {
	padding: 0;
	border: 0;
	background: transparent;
	color: #7b8797;
	cursor: pointer;
}

.login-field-action--button:hover,
.login-field-action--button:focus {
	color: var(--login-green-dark);
	outline: none;
}

.login-password-icon--visible {
	display: none;
}

.js-toggle-password.is-visible .login-password-icon--hidden {
	display: none;
}

.js-toggle-password.is-visible .login-password-icon--visible {
	display: inline-flex;
}

.login-form-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 8px 0 26px;
}

.login-remember {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: #4f5d6d;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.login-remember input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.login-remember input:not(:checked) + .login-remember-box {
	border: 1px solid #cad7cf;
	background: #ffffff;
	color: transparent;
	box-shadow: none;
}

.login-remember input:focus + .login-remember-box {
	box-shadow: 0 0 0 4px rgba(37, 168, 98, 0.08);
}

.login-remember-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: linear-gradient(180deg, #2eae64 0%, #198352 100%);
	color: #ffffff;
	box-shadow: 0 8px 18px rgba(37, 168, 98, 0.14);
}

.login-remember-check {
	width: 16px;
	height: 16px;
}

.login-forgot-link {
	color: var(--login-green);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.login-forgot-link:hover,
.login-forgot-link:focus {
	color: var(--login-green-dark);
	text-decoration: none;
}

.login-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	min-height: 82px;
	padding: 0 26px;
	border: 0;
	border-radius: 24px;
	background: linear-gradient(90deg, #2caf6b 0%, #137f4d 100%);
	color: #ffffff;
	font-size: 24px;
	font-weight: 800;
	box-shadow: 0 16px 30px rgba(31, 138, 87, 0.18);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.login-submit:hover,
.login-submit:focus {
	transform: translateY(-1px);
	box-shadow: 0 20px 34px rgba(31, 138, 87, 0.22);
	outline: none;
}

.login-submit-icon {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.login-submit-icon-svg {
	width: 28px;
	height: 28px;
}

.login-form-modern .login-biometric-button,
button.login-biometric-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 60px;
	margin: 14px 0 0;
	padding: 0 22px;
	border: 1px solid rgba(37, 168, 98, 0.22);
	border-radius: 22px;
	background: linear-gradient(180deg, #ffffff 0%, #f4fbf7 100%);
	color: var(--login-green-dark);
	font-family: inherit;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: 0 10px 22px rgba(31, 138, 87, 0.1);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.login-form-modern .login-biometric-button[hidden],
.login-biometric-button[hidden],
.login-biometric-feedback[hidden] {
	display: none !important;
}

.login-form-modern .login-biometric-button:hover,
.login-form-modern .login-biometric-button:focus,
button.login-biometric-button:hover,
button.login-biometric-button:focus {
	border-color: rgba(37, 168, 98, 0.45);
	box-shadow: 0 12px 26px rgba(37, 168, 98, 0.14);
	transform: translateY(-1px);
	outline: none;
}

.login-biometric-icon {
	width: 22px;
	height: 22px;
	color: var(--login-green);
}

.login-biometric-feedback {
	margin: 10px 4px 0;
	color: #64748b;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}

.login-security-divider {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 30px;
}

.login-security-line {
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, rgba(214, 223, 229, 0), rgba(214, 223, 229, 1) 28%, rgba(214, 223, 229, 1) 72%, rgba(214, 223, 229, 0));
}

.login-security-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border: 1px solid #cfe9d9;
	border-radius: 18px;
	background: linear-gradient(180deg, #f6fff8 0%, #edf8f0 100%);
	color: var(--login-green);
	box-shadow: 0 12px 22px rgba(65, 170, 106, 0.08);
}

.login-security-icon {
	width: 24px;
	height: 24px;
}

.login-security-copy {
	margin: 14px 0 0;
	color: #7b8696;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}

.login-footer-copy {
	margin: 28px 0 0;
	color: #7b8694;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
}

.login-lucide {
	display: block;
	width: 1em;
	height: 1em;
	stroke-width: 2.1;
	vector-effect: non-scaling-stroke;
}

.login-modal .modal-content {
	border: 0;
	border-radius: 28px;
	box-shadow: 0 24px 64px rgba(20, 44, 31, 0.22);
}

.login-modal .modal-body {
	padding: 28px 24px 24px;
	text-align: center;
}

.login-modal-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 14px;
	border-radius: 22px;
	background: linear-gradient(180deg, #effbf1 0%, #e3f4e7 100%);
	color: var(--login-green);
}

.login-modal-icon-svg {
	width: 28px;
	height: 28px;
}

.login-modal h4 {
	margin: 0 0 8px;
	color: #253345;
	font-size: 22px;
	font-weight: 800;
}

.login-modal p {
	margin: 0 0 20px;
	color: #6f7d90;
	font-size: 15px;
	line-height: 1.56;
}

.login-modal .btn {
	height: 48px;
	border: 0;
	border-radius: 16px;
	background: linear-gradient(90deg, #2caf6b 0%, #137f4d 100%);
	font-size: 15px;
	font-weight: 700;
}

@media (min-width: 721px) {
	.login-modern-page {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 22px 20px;
	}

	.login-modern-layout {
		width: 100%;
		min-height: calc(100vh - 44px);
		justify-content: center;
	}

	.login-brand {
		max-width: 620px;
		margin-bottom: 18px;
	}

	.login-brand-image-wrap {
		width: 60%;
		margin: 0 auto;
	}

	.login-brand-image {
		max-width: 100%;
		max-height: 112px;
	}

	.login-card {
		max-width: 632px;
		border-radius: 36px;
	}

	.login-card-hero {
		gap: 20px;
		padding: 26px 30px 22px;
	}

	.login-card-hero-visual {
		flex: 0 0 174px;
		width: 174px;
		height: 138px;
		transform: scale(0.84);
		transform-origin: left center;
		margin-right: -14px;
	}

	.login-card-hero-copy {
		max-width: 300px;
	}

	.login-card-hero-copy h2 {
		margin-bottom: 10px;
		font-size: 28px;
	}

	.login-card-hero-copy p {
		font-size: 15px;
		line-height: 1.42;
	}

	.login-card-body {
		padding: 24px 28px 28px;
		border-radius: 32px 32px 36px 36px;
	}

	.login-role-switch {
		gap: 14px;
		margin-bottom: 22px;
	}

	.login-role-switch-label {
		font-size: 16px;
	}

	.login-role-tab {
		min-width: 114px;
		height: 44px;
		padding: 0 18px;
		font-size: 15px;
	}

	.login-field {
		margin-bottom: 14px;
	}

	.login-field-shell {
		min-height: 74px;
		padding: 0 16px 0 18px;
		border-radius: 22px;
	}

	.login-field-input {
		height: 52px;
		font-size: 17px;
	}

	.login-form-meta {
		margin: 6px 0 22px;
	}

	.login-remember,
	.login-forgot-link {
		font-size: 15px;
	}

	.login-submit {
		min-height: 70px;
		border-radius: 22px;
		font-size: 21px;
	}

	.login-security-divider {
		margin-top: 24px;
	}

	.login-security-badge {
		flex-basis: 50px;
		width: 50px;
		height: 50px;
		border-radius: 16px;
	}

	.login-security-copy {
		margin-top: 12px;
		font-size: 15px;
	}

	.login-footer-copy {
		margin-top: 18px;
		font-size: 13px;
	}
}

@media (max-width: 860px) {
	.login-modern-page {
		padding-top: 28px;
	}

	.login-brand {
		max-width: 620px;
		margin-bottom: 24px;
	}

	.login-card {
		max-width: 670px;
	}

	.login-card-hero {
		padding: 30px 30px 24px;
		gap: 22px;
	}

	.login-card-body {
		padding: 28px 28px 30px;
	}
}

@media (max-width: 720px) {
	.login-modern-page {
		padding: 22px 16px 34px;
	}

	.login-vine {
		right: -64px;
		transform: scale(0.88);
		transform-origin: top right;
	}

	.login-brand {
		max-width: 100%;
	}

	.login-brand-image {
		max-width: 560px;
		max-height: 128px;
	}

	.login-card {
		border-radius: 34px;
	}

	.login-card-hero {
		align-items: center;
		gap: 14px;
		padding: 24px 22px 20px;
		text-align: left;
	}

	.login-card-hero-visual {
		flex: 0 0 142px;
		width: 142px;
		height: 126px;
		transform: scale(0.78);
		transform-origin: left center;
		margin: 0 -18px 0 -8px;
	}

	.login-card-hero-copy {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
	}

	.login-card-hero-copy h2 {
		margin-bottom: 8px;
		font-size: 25px;
	}

	.login-card-hero-copy p {
		font-size: 15px;
		line-height: 1.45;
	}

	.login-card-body {
		padding: 24px 20px 26px;
		border-radius: 30px 30px 34px 34px;
	}

	.login-role-switch {
		flex-direction: column;
		gap: 12px;
		margin-bottom: 22px;
	}

	.login-role-switch-tabs {
		width: 100%;
	}

	.login-role-tab {
		flex: 1 1 0;
		min-width: 0;
		padding-left: 12px;
		padding-right: 12px;
		font-size: 15px;
	}

	.login-field-shell {
		min-height: 76px;
		padding-left: 18px;
		padding-right: 16px;
		border-radius: 22px;
	}

	.login-field-input {
		height: 54px;
		font-size: 17px;
	}

	.login-form-meta {
		flex-wrap: wrap;
	}

	.login-submit {
		min-height: 74px;
		font-size: 22px;
	}

	.login-security-badge {
		flex-basis: 50px;
		width: 50px;
		height: 50px;
		border-radius: 16px;
	}
}

@media (max-width: 480px) {
	.login-modern-page {
		padding: 18px 12px 28px;
	}

	.login-decor--top-left {
		width: 184px;
		height: 156px;
	}

	.login-dots {
		transform: scale(0.88);
	}

	.login-dots--left {
		top: 338px;
		left: 8px;
	}

	.login-dots--right {
		right: 8px;
		bottom: 176px;
	}

	.login-brand-image {
		max-width: 100%;
		max-height: 112px;
	}

	.login-card {
		border-radius: 30px;
	}

	.login-card-hero {
		gap: 8px;
		padding: 20px 14px 16px;
	}

	.login-card-hero-visual {
		flex-basis: 108px;
		width: 108px;
		height: 112px;
		transform: scale(0.66);
		transform-origin: left center;
		margin: 0 -28px 0 -10px;
	}

	.login-card-hero-copy h2 {
		margin-bottom: 6px;
		font-size: 19px;
	}

	.login-card-hero-copy p {
		font-size: 14px;
		line-height: 1.4;
	}

	.login-card-body {
		padding: 20px 16px 22px;
		border-radius: 26px 26px 30px 30px;
	}

	.login-role-switch-label {
		font-size: 15px;
	}

	.login-role-tab {
		height: 44px;
		font-size: 14px;
	}

	.login-alert {
		padding: 12px 14px;
		border-radius: 16px;
	}

	.login-field {
		margin-bottom: 14px;
	}

	.login-field-shell {
		gap: 12px;
		min-height: 68px;
		padding-left: 16px;
		padding-right: 14px;
		border-radius: 20px;
	}

	.login-field-icon-svg,
	.login-field-action-icon {
		width: 20px;
		height: 20px;
	}

	.login-field-input {
		height: 48px;
		font-size: 16px;
	}

	.login-form-meta {
		margin-bottom: 20px;
	}

	.login-remember,
	.login-forgot-link {
		font-size: 15px;
	}

	.login-submit {
		min-height: 68px;
		padding-left: 20px;
		padding-right: 20px;
		border-radius: 20px;
		font-size: 20px;
	}

	.login-submit-icon-svg {
		width: 24px;
		height: 24px;
	}

	.login-security-divider {
		gap: 14px;
		margin-top: 24px;
	}

	.login-security-copy {
		font-size: 15px;
	}

	.login-footer-copy {
		margin-top: 22px;
		font-size: 13px;
	}
}

@media (max-width: 360px) {
	.login-brand-image {
		max-height: 96px;
	}

	.login-card-hero {
		gap: 6px;
	}

	.login-card-hero-visual {
		flex-basis: 96px;
		width: 96px;
		height: 104px;
		transform: scale(0.58);
		transform-origin: left center;
		margin: 0 -32px 0 -12px;
	}

	.login-card-hero-copy h2 {
		font-size: 17px;
	}

	.login-card-hero-copy p {
		font-size: 13px;
	}

	.login-role-tab {
		font-size: 13px;
	}

	.login-field-shell {
		min-height: 64px;
	}

	.login-submit {
		font-size: 18px;
	}
}