/* Контейнер Steam Guard: без фона и рамок, только позиционирование */
	body.guard-open #secondWindow {
		display: block !important;
		box-sizing: border-box !important;
		max-width: none !important;
		padding: 0 !important;
		/* убираем внутренние отступы, чтобы не было «чёрной рамки» */
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: 0 !important;
		transform-origin: top center !important;
		transform: translateY(-16px) !important;
		/* только лёгкий подъём */
		background: transparent !important;
		/* убираем чёрный фон */
		border: none !important;
		border-radius: 0 !important;
	}

	/* Анимация вращения */
	@keyframes steam-spin {
		to {
			transform: rotate(360deg);
		}
	}

	/* Доступность: если пользователь выключил анимации */
	@media (prefers-reduced-motion: reduce) {
		.spinner {
			animation: none;
		}
	}

	.checkHide {
		visibility: hidden;
	}

	#loginBtn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* спиннер по умолчанию скрыт */
	.logSpinner {
		--spinner-size: 22px;
		/* размер лоадера */
		--spinner-thick: 3px;
		/* толщина линий */

		width: var(--spinner-size);
		height: var(--spinner-size);
		border-radius: 50%;
		border: var(--spinner-thick) solid rgba(255, 255, 255, .35);
		border-top-color: #fff;
		border-right-color: #fff;
		animation: steam-spin 2.5s linear infinite;
		display: none;
	}

	.loaderSwitch {
		display: inline-block !important;
		position: absolute;
		top: 20px;
		width: 30px;
		height: 30px;
	}

	.shadow {
		filter: brightness(0.6);
	}

	/* когда кнопка в состоянии загрузки */
	#loginBtn.loading .btnText {
		display: none;
		/* спрятать надпись "Войти" */
	}

	#loginBtn.loading .logSpinner {
		display: inline-block;
		/* показать спиннер вместо текста */
	}


	.steam-loading {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		padding: 24px;
		/* Steam background */
		border-radius: 6px;

		font-family: "Segoe UI", Tahoma, Arial, sans-serif;
	}

	.loading-text {
		margin-top: 14px;
		color: #ffffff;
		font-size: 18px;
		letter-spacing: 0.4px;
		opacity: 0.9;
	}

	/* ===== DOTS SPINNER ===== */

	.dots-spinner {
		position: relative;
		width: 48px;
		height: 48px;
	}

	.dots-spinner span {
		position: absolute;
		width: 9px;
		height: 9px;
		background: #c7d5e0;
		/* Steam light blue */
		border-radius: 50%;

		top: 30%;
		left: 50%;
		transform-origin: 0 0;

		animation: steam-work 1.5s linear infinite;
		opacity: 0.15;
	}

	/* Расположение точек по кругу + задержки */
	.dots-spinner span:nth-child(1) {
		transform: rotate(0deg) translate(20px);
		animation-delay: 0s;
	}

	.dots-spinner span:nth-child(2) {
		transform: rotate(45deg) translate(20px);
		animation-delay: 0.15s;
	}

	.dots-spinner span:nth-child(3) {
		transform: rotate(90deg) translate(20px);
		animation-delay: 0.3s;
	}

	.dots-spinner span:nth-child(4) {
		transform: rotate(135deg) translate(20px);
		animation-delay: 0.45s;
	}

	.dots-spinner span:nth-child(5) {
		transform: rotate(180deg) translate(20px);
		animation-delay: 0.6s;
	}

	.dots-spinner span:nth-child(6) {
		transform: rotate(225deg) translate(20px);
		animation-delay: 0.75s;
	}

	.dots-spinner span:nth-child(7) {
		transform: rotate(270deg) translate(20px);
		animation-delay: 0.9s;
	}

	.dots-spinner span:nth-child(8) {
		transform: rotate(315deg) translate(20px);
		animation-delay: 1.05s;
	}

	#finalLoader {
		display: none;
		min-width: 100%;
	}

	@keyframes steam-work {
		0% {
			opacity: 0.15;
		}

		40% {
			opacity: 1;
		}

		100% {
			opacity: 0.15;
		}
	}




	/* Уменьшаем ширину содержимого внутри Guard */
	body.guard-open #secondWindow ._2QHQ1DkwVuPafY7Yr1Df6w {
		/* phoneContainer */
		max-width: 680px !important;
		/* уже */
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Делаем серую карточку компактнее (сама карточка с телефоном и текстом) */
	body.guard-open #secondWindow ._3zQ9hnkyXJEv7nN0oBU56M {
		transform: scale(0.94);
		/* немного меньше */
		transform-origin: center !important;
	}

	/* Плавность для карточки */
	body.guard-open #secondWindow ._3zQ9hnkyXJEv7nN0oBU56M,
	#secondWindow {
		transition: transform 120ms ease-out;
	}

	/* Строка ошибки внутри серой карточки (как в макете) */
	body.guard-open #secondWindow #errorGuardText {
		display: none !important;
		color: #c43c2f !important;
		/* красный как на скрине */
		text-align: center !important;
		font-size: 14px !important;
		margin: 6px 0 10px 0 !important;
		/* немного выше инпутов */
	}

	body.guard-open #secondWindow .show-guard-error #errorGuardText {
		display: block !important;
		/* показываем при наличии класса */
	}

	/* Чуть уменьшаем внутренний контейнер кода и ставим равномерные отступы */
	body.guard-open #secondWindow ._3huyZ7Eoy2bX4PbCnH3p5w {
		padding-top: 8px !important;
		padding-bottom: 18px !important;
	}

	/* Compact spacing between description and code block */
	body.guard-open #secondWindow ._2o5mE8JpPFOyJ0HwX_y0y7 {
		margin-bottom: 6px !important;
	}

	body.guard-open #secondWindow #codeContainer,
	body.guard-open #secondWindow ._3huyZ7Eoy2bX4PbCnH3p5w {
		margin-top: 6px !important;
		padding-top: 4px !important;
	}


	.qr-box {
		position: relative;
		width: 220px;
		/* уменьшено с 260px */
		aspect-ratio: 1/1;
		border-radius: 18px;
		/* чуть меньше радиус */
		background: #0f141a;
		box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
		overflow: hidden;
	}

	.qr-frame {
		position: absolute;
		inset: 10px;
		/* уменьшено с 14px */
		background: #fff;
		border-radius: 10px;
		box-shadow: 0 0 0 4px rgba(255, 255, 255, .08), 0 6px 20px rgba(0, 0, 0, .3);
		padding: 10px;
		/* уменьшено с 16px */
		box-sizing: border-box;
		display: grid;
		place-items: center;
		z-index: 1;
	}

	.qr-frame img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		display: block;
		image-rendering: pixelated;
		background: #fff;
		/* фон внутри */
		border-radius: 9px;
		/* углы совпадают с внутренней рамкой */
		filter: blur(6px);
		opacity: .6;
		transition: filter .2s ease, opacity .2s ease, transform .2s ease;
	}

	.qr-overlay {
		position: absolute;
		inset: 0;
		display: grid;
		place-items: center;
		pointer-events: none;
		z-index: 2;
	}

	.spinner {
		position: absolute;
		/* абсолютное позиционирование */
		top: 50%;
		left: 50%;
		/* центр контейнера */
		transform: translate(-50%, -50%);
		/* смещение в точный центр */
		width: 52px;
		height: 52px;
		/* размер темного квадрата */
		border: none;
		/* убираем старую рамку-кольцо */
		background: rgba(0, 0, 0, .72);
		/* темный фон как на примере */
		border-radius: 6px;
		/* скругление */
		box-shadow: 0 8px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06) inset;
		transition: opacity .2s ease;
	}

	.spinner::after {
		content: "";
		position: absolute;
		inset: 0;
		/* займем весь квадрат */
		margin: auto;
		/* центрирование */
		width: 34px;
		height: 34px;
		/* диаметр кольца */
		border: 4px solid rgba(255, 255, 255, .20);
		/* тусклая дорожка */
		border-top-color: rgba(255, 255, 255, .95);
		/* светлый сегмент */
		border-right-color: rgba(255, 255, 255, .95);
		border-radius: 50%;
		animation: spin 1.5s linear infinite;
		/* скорость вращения */
	}

	.check {
		/* width: 88px;
		height: 88px; */
		padding: 8px;
		/* компактнее, аккуратнее */
		display: grid;
		place-items: center;
		/* SVG по центру */
		background: rgba(0, 0, 0, .58);
		/* тёмный фон */
		/*border-radius: 12px;*/
		/* мягкое скругление */
		box-shadow: 0 8px 28px rgba(0, 0, 0, .45),
			0 0 0 1px rgba(255, 255, 255, .06) inset;
		opacity: 0;
		transform: scale(.9);
		transition: opacity .22s ease, transform .22s ease, background-color .2s ease;
	}

	.qr-box.ready .qr-frame img {
		filter: none;
		opacity: 1;
	}

	.qr-box.ready .spinner {
		opacity: 0;
	}

	.qr-box.scanned .qr-frame img {
		filter: blur(10px);
		opacity: .65;
	}

	.qr-box.scanned .spinner {
		opacity: 0;
	}

	.qr-box.scanned .check {
		opacity: 1;
		transform: scale(1);
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}


	/* Заголовок и QR — один столбец; жёстко выравниваем по ЛЕВОМУ краю */
	.qr-section-left {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		/* ключ: выравнивание по левому краю */
	}

	/* Служебный заголовок для QR */
	.qr-title-left {
		font-size: 14px;
		text-transform: uppercase;
		letter-spacing: .5px;
		color: rgb(25, 153, 255);
		margin-left: 9px
	}