.sm-login-shell {
			--sm-blue: #416EAF;
			--sm-blue-dark: #355D99;
			--sm-cream: #FBF8F1;
			--sm-white: #FFFFFF;
			--sm-text: #24324A;
			--sm-border: #DDE4EE;
			--sm-label: #4B5870;
			--sm-error: #B42318;
			--sm-error-bg: #FFF1F0;
			--sm-success: #256C3B;
			--sm-success-bg: #EFFAF2;

			position: relative;
			width: 100vw;
			min-height: 100svh;
			min-height: 100dvh;
			margin-left: calc(50% - 50vw);
			display: grid;
			place-items: center;
			padding: 24px 16px;
			overflow: hidden;
			background: var(--sm-cream);
			direction: ltr;
			font-family: inherit;
		}

		.sm-login-shell,
		.sm-login-shell * {
			box-sizing: border-box;
		}

		.sm-login-shell::before {
			position: absolute;
			inset: 0 0 auto -5%;
			width: 110%;
			height: clamp(220px, 40vh, 330px);
			content: "";
			background: var(--sm-blue);
			border-radius: 0 0 50% 50% / 0 0 8% 8%;
		}

		.sm-login-shell::after {
			position: absolute;
			top: -330px;
			right: -160px;
			width: 500px;
			height: 500px;
			content: "";
			border: 1px solid rgba(255, 255, 255, 0.13);
			border-radius: 50%;
			box-shadow:
				0 0 0 42px rgba(255, 255, 255, 0.035),
				0 0 0 84px rgba(255, 255, 255, 0.02);
			pointer-events: none;
		}

		.sm-login-card {
			position: relative;
			z-index: 1;
			width: min(100%, 405px);
			padding: 30px 32px 32px;
			border: 1px solid rgba(221, 228, 238, 0.95);
			border-radius: 20px;
			background: var(--sm-white);
			box-shadow: 0 18px 48px rgba(30, 50, 81, 0.14);
		}

		.sm-login-brand {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
		}

		.sm-login-logo {
			width: 62px;
			height: 62px;
			overflow: hidden;
			border-radius: 50%;
			background: #FFFFFF;
			box-shadow: 0 6px 16px rgba(65, 110, 175, 0.17);
		}

		.sm-login-logo img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.sm-login-name {
			margin: 12px 0 0;
			color: var(--sm-blue);
			font-size: 25px;
			font-weight: 700;
			line-height: 1.15;
			letter-spacing: 0;
		}

		.sm-login-divider {
			height: 1px;
			margin: 22px 0 19px;
			background: #EDF1F5;
		}

		.sm-welcome {
			margin: 0 0 21px;
			color: var(--sm-text);
			font-size: 22px;
			font-weight: 650;
			line-height: 1.25;
			text-align: center;
		}

		.sm-login-notice {
			margin: 0 0 16px;
			padding: 11px 12px;
			border-radius: 10px;
			font-size: 13px;
			font-weight: 600;
			line-height: 1.35;
			text-align: center;
		}

		.sm-login-notice.is-error {
			color: var(--sm-error);
			background: var(--sm-error-bg);
		}

		.sm-login-notice.is-success {
			color: var(--sm-success);
			background: var(--sm-success-bg);
		}

		.sm-login-form {
			margin: 0;
			text-align: left;
		}

		.sm-field-block {
			margin-bottom: 16px;
		}

		.sm-custom-label {
			display: block;
			margin: 0 0 7px;
			color: var(--sm-label);
			font-size: 13px;
			font-weight: 600;
			line-height: 1.3;
		}

		.sm-login-form input[type="text"],
		.sm-login-form input[type="password"] {
			width: 100%;
			min-height: 50px;
			margin: 0;
			padding: 12px 14px;
			border: 1px solid var(--sm-border);
			border-radius: 10px;
			color: var(--sm-text);
			font-size: 14px;
			line-height: 1.2;
			text-align: left;
			background: #FFFFFF;
			box-shadow: none;
			transition: border-color 0.18s ease, box-shadow 0.18s ease;
			appearance: none;
		}

		.sm-login-form input[type="text"]:focus,
		.sm-login-form input[type="password"]:focus {
			border-color: var(--sm-blue);
			outline: 0;
			box-shadow: 0 0 0 3px rgba(65, 110, 175, 0.12);
		}

		.sm-login-button {
			width: 100%;
			min-height: 50px;
			margin-top: 4px;
			padding: 12px 14px;
			border: 0;
			border-radius: 10px;
			color: #FFFFFF;
			font-size: 14px;
			font-weight: 700;
			line-height: 1.2;
			text-transform: none;
			background: var(--sm-blue);
			box-shadow: none;
			cursor: pointer;
			transition: background 0.18s ease, transform 0.18s ease;
		}

		.sm-login-button:hover,
		.sm-login-button:focus {
			background: var(--sm-blue-dark);
			transform: translateY(-1px);
		}

		.sm-login-help {
			margin-top: 16px;
			color: var(--sm-label);
			font-size: 13px;
			font-weight: 500;
			line-height: 1.45;
			text-align: center;
		}

		.sm-login-help strong {
			color: var(--sm-blue);
			font-weight: 650;
		}

		@media (max-width: 520px) {
			.sm-login-shell {
				padding: 18px 14px;
			}

			.sm-login-shell::before {
				height: 225px;
			}

			.sm-login-shell::after {
				top: -300px;
				right: -205px;
				width: 420px;
				height: 420px;
			}

			.sm-login-card {
				padding: 25px 21px 26px;
				border-radius: 16px;
			}

			.sm-login-logo {
				width: 56px;
				height: 56px;
			}

			.sm-login-name {
				margin-top: 10px;
				font-size: 23px;
			}

			.sm-login-divider {
				margin: 20px 0 18px;
			}

			.sm-welcome {
				margin-bottom: 19px;
				font-size: 20px;
			}

			.sm-login-form input[type="text"],
			.sm-login-form input[type="password"],
			.sm-login-button {
				min-height: 48px;
			}
		}