:root {
	/* === COLORS === */

	--ui-primary: #896EFF;
	--ui-primary-hover: #603CFF;
	--ui-primary-light: rgba(137, 110, 255, .12);

	--ui-purple-mid: #6F4287;
	--ui-purple-dark: #34187F;

	--ui-heading: #1F2471;
	--ui-text-dark: #14212B;
	--ui-text: #757F95;
	--ui-text-muted: #999999;

	--ui-bg: #FFFFFF;
	--ui-bg-soft: #F8F9FF;
	--ui-bg-muted: #F2F3F5;

	--ui-border: #E8E8E8;
	--ui-border-light: #EEEEEE;
	--ui-border-focus: rgba(137, 110, 255, .55);

	--ui-danger: #DC3545;
	--ui-danger-dark: #A61E2C;
	--ui-danger-bg: #FFF2F3;
	--ui-danger-border: #F3C5CA;

	--ui-gradient: linear-gradient(
		135deg,
		#6F4287 0%,
		#34187F 100%
	);

	--ui-shadow:
		0 18px 55px rgba(31, 36, 113, .10);

	--ui-shadow-hover:
		0 14px 34px rgba(52, 24, 127, .22);
}

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

body {
	margin: 0;
	background: var(--ui-bg-soft);
	font-family: "Roboto", Arial, sans-serif;
	color: var(--ui-text);
}

/* === PAGE BACKGROUND === */

.auth-page {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 42px 16px;
	overflow: hidden;

	background:
		radial-gradient(
			circle at 10% 10%,
			rgba(137, 110, 255, .15),
			transparent 34%
		),
		radial-gradient(
			circle at 90% 15%,
			rgba(111, 66, 135, .11),
			transparent 30%
		),
		radial-gradient(
			circle at 85% 90%,
			rgba(52, 24, 127, .08),
			transparent 32%
		),
		var(--ui-bg-soft);
}

.auth-page::before,
.auth-page::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.auth-page::before {
	width: 360px;
	height: 360px;
	top: -220px;
	right: -120px;
	border: 70px solid rgba(137, 110, 255, .06);
}

.auth-page::after {
	width: 280px;
	height: 280px;
	bottom: -190px;
	left: -100px;
	border: 55px solid rgba(52, 24, 127, .045);
}

/* === HEADER === */

.auth-logo-wrap {
	position: relative;
	z-index: 1;
	text-align: center;
	margin-bottom: 26px;
}

.auth-logo-wrap img {
	max-width: 190px;
	max-height: 72px;
	object-fit: contain;
}

.auth-brand {
	margin-top: 14px;
	font-family: "Barlow", "Roboto", Arial, sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .01em;
	color: var(--ui-heading);
}

/* === CARD === */

.auth-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 560px;
	padding: 34px;
	border-radius: 18px;

	background: rgba(255, 255, 255, .97);
	border: 1px solid rgba(137, 110, 255, .11);

	box-shadow:
		var(--ui-shadow),
		0 2px 8px rgba(31, 36, 113, .04);

	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.auth-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 34px;
	right: 34px;
	height: 3px;
	border-radius: 0 0 20px 20px;
	background: var(--ui-gradient);
	opacity: .9;
}

/* === TELEGRAM BUTTON === */

.btn-telegram {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 48px;
	padding: 11px 28px;

	background: linear-gradient(
		135deg,
		#2AABEE 0%,
		#229ED9 100%
	);

	color: #FFFFFF;
	border: 0;
	border-radius: 50px;

	font-family: "Roboto", Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;

	box-shadow:
		0 9px 24px rgba(34, 158, 217, .22);

	transition:
		transform .2s ease,
		box-shadow .2s ease,
		filter .2s ease;
}

.btn-telegram:hover,
.btn-telegram:focus {
	color: #FFFFFF;
	filter: brightness(1.04);
	transform: translateY(-1px);

	box-shadow:
		0 13px 30px rgba(34, 158, 217, .29);
}

.btn-telegram:active {
	transform: translateY(0);
	box-shadow:
		0 6px 18px rgba(34, 158, 217, .22);
}

.btn-telegram i {
	margin-right: 8px;
	font-size: 20px;
	line-height: 1;
}

/* === DIVIDER === */

.auth-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 28px 0;
	color: var(--ui-text-muted);
}

.auth-divider::before,
.auth-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ui-border);
}

.auth-divider span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	padding: 7px 17px;

	background: var(--ui-bg);
	border: 1px solid var(--ui-border);
	border-radius: 50px;

	color: var(--ui-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;

	box-shadow:
		0 3px 12px rgba(31, 36, 113, .04);
}

/* === TABS === */

.auth-tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 26px;
	padding: 5px;

	background: var(--ui-bg-soft);
	border: 1px solid var(--ui-border-light);
	border-radius: 50px;
}

.auth-tab {
	min-height: 46px;
	padding: 10px 16px;

	background: transparent;
	border: 1px solid transparent;
	border-radius: 50px;

	color: var(--ui-text);
	font-family: "Roboto", Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;

	transition:
		color .2s ease,
		background-color .2s ease,
		border-color .2s ease,
		box-shadow .2s ease,
		transform .2s ease;
}

.auth-tab:hover {
	color: var(--ui-heading);
	background: rgba(255, 255, 255, .8);
	border-color: rgba(137, 110, 255, .10);
}

.auth-tab.active {
	background: var(--ui-gradient);
	color: #FFFFFF;
	border-color: transparent;
	font-weight: 700;

	box-shadow:
		0 7px 20px rgba(52, 24, 127, .20);
}

/* === FORMS === */

.auth-form {
	display: none;
}

.auth-form.active {
	display: block;
	animation: auth-form-show .25s ease;
}

@keyframes auth-form-show {
	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* === INPUTS === */

.form-label {
	display: inline-block;
	margin-bottom: 8px;

	color: var(--ui-heading);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.auth-input {
	width: 100%;
	height: 56px;
	padding: 0 18px;

	background: #FFFFFF;
	border: 1px solid var(--ui-border);
	border-radius: 12px;

	color: var(--ui-text-dark);
	font-family: "Roboto", Arial, sans-serif;
	font-size: 16px;

	box-shadow:
		0 3px 12px rgba(31, 36, 113, .025);

	transition:
		background-color .2s ease,
		border-color .2s ease,
		box-shadow .2s ease;
}

.auth-input::placeholder {
	color: var(--ui-text-muted);
	opacity: .8;
}

.auth-input:hover {
	border-color: rgba(137, 110, 255, .34);
}

.auth-input:focus {
	background: #FFFFFF;
	border-color: var(--ui-primary);
	color: var(--ui-text-dark);
	outline: 0;

	box-shadow:
		0 0 0 .22rem rgba(137, 110, 255, .13),
		0 8px 22px rgba(31, 36, 113, .05);
}

.auth-input:disabled,
.auth-input[readonly] {
	background: var(--ui-bg-muted);
	color: var(--ui-text);
	cursor: not-allowed;
	opacity: .85;
}

/* === VALIDATION === */

.auth-input.is-valid,
.was-validated .auth-input:valid {
	border-color: #36A269;
}

.auth-input.is-invalid,
.was-validated .auth-input:invalid {
	border-color: var(--ui-danger);
}

.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ui-text-dark);
	-webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
	transition: background-color 9999s ease-in-out 0s;
}

/* === PRIMARY BUTTON === */

.btn-auth {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 50px;
	margin-top: 4px;
	padding: 11px 24px;

	background: var(--ui-gradient);
	color: #FFFFFF;
	border: 0;
	border-radius: 50px;

	font-family: "Roboto", Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;

	box-shadow:
		0 10px 28px rgba(52, 24, 127, .22);

	transition:
		transform .2s ease,
		box-shadow .2s ease,
		filter .2s ease;
}

.btn-auth:hover,
.btn-auth:focus {
	color: #FFFFFF;
	filter: brightness(1.08);
	transform: translateY(-1px);

	box-shadow:
		var(--ui-shadow-hover);
}

.btn-auth:active {
	transform: translateY(0);
	filter: brightness(.98);

	box-shadow:
		0 6px 18px rgba(52, 24, 127, .20);
}

.btn-auth:disabled {
	opacity: .6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* === LINKS === */

.auth-link {
	padding: 0;
	background: transparent;
	border: 0;

	color: var(--ui-primary);
	font-family: "Roboto", Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;

	transition: color .2s ease;
}

.auth-link:hover,
.auth-link:focus {
	color: var(--ui-primary-hover);
}

.auth-link:focus-visible,
.auth-tab:focus-visible,
.btn-auth:focus-visible,
.btn-telegram:focus-visible {
	outline: 3px solid rgba(137, 110, 255, .22);
	outline-offset: 3px;
}

/* === TEXT === */

.auth-note,
.auth-help-text {
	color: var(--ui-text);
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
}

.auth-note {
	margin-top: 18px;
}

.auth-help-text {
	margin-bottom: 24px;
}

.auth-note a,
.auth-help-text a {
	color: var(--ui-primary);
	font-weight: 500;
}

.auth-note a:hover,
.auth-help-text a:hover {
	color: var(--ui-primary-hover);
}

/* === ALERTS === */

.auth-alert {
	position: relative;
	margin-bottom: 22px;
	padding: 14px 42px 14px 16px;

	background: var(--ui-bg-soft);
	border: 1px solid var(--ui-border);
	border-radius: 12px;

	color: var(--ui-text-dark);
	font-size: 14px;
	line-height: 1.5;
}

.auth-alert.alert-danger {
	background: var(--ui-danger-bg);
	color: var(--ui-danger-dark);
	border-color: var(--ui-danger-border);
}

.auth-alert.alert-success {
	background: #F0FAF5;
	color: #20784B;
	border-color: #BFE4D0;
}

.auth-alert.alert-warning {
	background: #FFF9EB;
	color: #806000;
	border-color: #F2DDA5;
}

.auth-alert.alert-info {
	background: rgba(137, 110, 255, .08);
	color: var(--ui-heading);
	border-color: rgba(137, 110, 255, .22);
}

.auth-alert .btn-close {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);

	width: 18px;
	height: 18px;
	padding: 0;

	filter: none;
	opacity: .45;
}

.auth-alert .btn-close:hover {
	opacity: .8;
}

/* === MOBILE === */

@media (max-width: 575px) {
	.auth-page {
		justify-content: flex-start;
		padding: 28px 14px;
	}

	.auth-logo-wrap {
		margin-bottom: 20px;
	}

	.auth-brand {
		font-size: 26px;
	}

	.auth-card {
		padding: 28px 18px 24px;
		border-radius: 16px;
	}

	.auth-card::before {
		left: 18px;
		right: 18px;
	}

	.btn-telegram {
		width: 100%;
		font-size: 15px;
	}

	.auth-tabs {
		gap: 5px;
		padding: 4px;
	}

	.auth-tab {
		min-height: 43px;
		padding: 9px 10px;
		font-size: 15px;
	}

	.auth-input {
		height: 53px;
		padding: 0 15px;
	}

	.auth-divider {
		gap: 10px;
		margin: 24px 0;
	}

	.auth-divider span {
		padding: 7px 14px;
	}
}

@media (max-width: 380px) {
	.auth-card {
		padding-right: 15px;
		padding-left: 15px;
	}

	.auth-tab {
		font-size: 14px;
	}

	.auth-divider span {
		font-size: 13px;
	}
}

/* === REDUCED MOTION === */

@media (prefers-reduced-motion: reduce) {
	.auth-tab,
	.auth-input,
	.btn-auth,
	.btn-telegram,
	.auth-link {
		transition: none;
	}

	.auth-form.active {
		animation: none;
	}
}