/**
 * صفحه‌ی ورود/ثبت‌نام بیتفا — /panel/login
 * استایل مستقل و اسکوپ‌شده زیر .lgx-stage (فقط کلاس‌های hidden/flex-center از تیلویند سایت می‌آیند).
 */

.lgx-stage {
	--lgx-gold: #f7a01d;
	--lgx-gold-d: #e08b06;
	--lgx-ink: #131722;
	--lgx-text: #2a2f3a;
	--lgx-muted: #7c8494;
	--lgx-border: #e6e9ef;
	--lgx-bg: #f4f6f9;
	position: relative;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 68px 16px 40px;
	background-color: var(--lgx-bg);
	background-image: radial-gradient(rgba(19, 23, 34, 0.075) 1px, transparent 1px);
	background-size: 22px 22px;
	color: var(--lgx-text);
}

.lgx-back {
	position: absolute;
	top: 20px;
	inset-inline-start: 24px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--lgx-muted);
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 99px;
	border: 1px solid var(--lgx-border);
	background: #fff;
	transition: color .18s, border-color .18s, box-shadow .18s;
}
.lgx-back:hover { color: var(--lgx-ink); border-color: #d4d9e2; box-shadow: 0 4px 14px rgba(19, 23, 34, .06); }
.lgx-back svg { transform: scaleX(-1); }

/* ---------- کارت دوتکه ---------- */
.lgx-card {
	width: min(1060px, 100%);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	border-radius: 26px;
	background: #fff;
	box-shadow: 0 30px 80px rgba(19, 23, 34, .12), 0 2px 8px rgba(19, 23, 34, .05);
	overflow: hidden;
}

/* ---------- سمت فرم ---------- */
.lgx-pane {
	padding: 48px 52px 34px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
/* لوگوی سمت فرم فقط وقتی سمت برند دیده نمی‌شود (موبایل) لازم است */
.lgx-logo-m { display: none; height: 30px; width: auto; object-fit: contain; margin-bottom: 26px; }

.lgx-tabs {
	display: flex;
	width: min(300px, 100%);
	padding: 5px;
	border-radius: 99px;
	background: #eef1f6;
	margin-bottom: 26px;
}
.lgx-tab { flex: 1; display: flex; }
.lgx-tab a {
	flex: 1;
	text-align: center;
	padding: 9px 10px;
	border-radius: 99px;
	font-size: 14px;
	font-weight: 700;
	color: var(--lgx-muted);
	text-decoration: none;
	transition: color .18s, background .18s, box-shadow .18s;
}
.lgx-tab.is-active a {
	color: var(--lgx-ink);
	background: #fff;
	box-shadow: 0 3px 10px rgba(19, 23, 34, .1);
}

.lgx-title { margin: 0 0 8px; font-size: 21px; font-weight: 800; color: var(--lgx-ink); text-align: center; }
.lgx-sub { margin: 0 0 26px; font-size: 13px; color: var(--lgx-muted); text-align: center; line-height: 2; }

.lgx-form { width: 100%; display: flex; flex-direction: column; }
.lgx-form.hidden { display: none; }

.lgx-label { font-size: 12.5px; font-weight: 700; color: var(--lgx-text); margin-bottom: 8px; }

.lgx-field { position: relative; display: flex; align-items: center; margin-bottom: 16px; }
.lgx-field__ico {
	position: absolute;
	inset-inline-start: 14px;
	display: inline-flex;
	color: #aeb6c4;
	pointer-events: none;
}
.lgx-input {
	width: 100%;
	height: 54px;
	border: 1.5px solid var(--lgx-border);
	border-radius: 14px;
	background: #fafbfd;
	padding: 0 16px;
	padding-inline-start: 44px;
	font-size: 14px;
	font-weight: 600;
	color: var(--lgx-ink);
	outline: none;
	text-align: left;
	transition: border-color .18s, box-shadow .18s, background .18s;
}
.lgx-input::placeholder { color: #b6bdc9; font-weight: 500; }
.lgx-input:focus { border-color: var(--lgx-gold); background: #fff; box-shadow: 0 0 0 4px rgba(247, 160, 29, .14); }
.lgx-input.error { border-color: #ef4056; box-shadow: 0 0 0 4px rgba(239, 64, 86, .12); }

/* دکمه‌ی اصلی */
.lgx-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 54px;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(135deg, #ffc45c 0%, var(--lgx-gold) 45%, var(--lgx-gold-d) 100%);
	color: #1d1503;
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(247, 160, 29, .35);
	transition: transform .15s, box-shadow .15s, filter .15s;
}
.lgx-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(247, 160, 29, .42); }
.lgx-btn:active:not(:disabled) { transform: translateY(0); }
.lgx-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; filter: saturate(.7); }
.lgx-btn.loading { color: transparent !important; pointer-events: none; }
.lgx-btn.loading * { visibility: hidden; }
.lgx-btn.loading::after {
	content: '';
	position: absolute;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2.5px solid rgba(29, 21, 3, .25);
	border-top-color: #1d1503;
	animation: lgx-spin .7s linear infinite;
}
@keyframes lgx-spin { to { transform: rotate(360deg); } }

/* ---------- مرحله‌ی کد تایید ---------- */
.lgx-otp-head { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--lgx-ink); text-align: center; line-height: 2; }
.lgx-otp-user {
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 99px;
	background: #f2f4f8;
	border: 1px dashed #cfd5e0;
	color: var(--lgx-ink);
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	margin-bottom: 18px;
	transition: border-color .18s, color .18s;
}
.lgx-otp-user:hover { border-color: var(--lgx-gold); }
.lgx-otp-user svg { color: var(--lgx-gold-d); }
.lgx-otp-hint { margin: 0 0 12px; text-align: center; font-size: 12.5px; color: var(--lgx-muted); }
.lgx-otp-row { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; }
.lgx-otp {
	width: 56px;
	height: 60px;
	border: 1.5px solid var(--lgx-border);
	border-radius: 14px;
	background: #fafbfd;
	text-align: center;
	font-size: 22px;
	font-weight: 800;
	color: var(--lgx-ink);
	outline: none;
	transition: border-color .18s, box-shadow .18s;
}
.lgx-otp:focus { border-color: var(--lgx-gold); background: #fff; box-shadow: 0 0 0 4px rgba(247, 160, 29, .14); }
.lgx-otp.error { border-color: #ef4056; }
.lgx-counter {
	display: flex;
	justify-content: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--lgx-muted);
	margin-bottom: 16px;
}
.lgx-counter b { color: var(--lgx-gold-d); font-weight: 800; }
.lgx-counter.hidden { display: none; }
.lgx-resend {
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--lgx-gold-d);
	cursor: pointer;
	margin-bottom: 16px;
}
.lgx-resend:hover { text-decoration: underline; }
.lgx-resend.hidden { display: none; }

/* ---------- جداکننده و گوگل ---------- */
.lgx-or {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 22px 0;
	color: #aab1bf;
	font-size: 12px;
	font-weight: 600;
}
.lgx-or::before,
.lgx-or::after { content: ''; flex: 1; height: 1px; background: var(--lgx-border); }

.lgx-google {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 52px;
	border: 1.5px solid var(--lgx-border);
	border-radius: 14px;
	background: #fff;
	color: var(--lgx-text);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	transition: border-color .18s, box-shadow .18s, transform .15s;
}
.lgx-google:hover { border-color: #cdd3de; box-shadow: 0 6px 18px rgba(19, 23, 34, .07); transform: translateY(-1px); color: var(--lgx-ink); }
.lgx-google.loading { color: transparent; pointer-events: none; }
.lgx-google.loading svg { visibility: hidden; }
.lgx-google.loading::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2.5px solid rgba(19, 23, 34, .15);
	border-top-color: var(--lgx-ink);
	animation: lgx-spin .7s linear infinite;
}

.lgx-swap { margin-top: 20px; font-size: 13px; color: var(--lgx-muted); display: flex; gap: 6px; justify-content: center; }
.lgx-swap.hidden { display: none; }
.lgx-swap a { color: var(--lgx-gold-d); font-weight: 800; text-decoration: none; }
.lgx-swap a:hover { text-decoration: underline; }

.lgx-terms { margin: 18px 0 0; font-size: 11.5px; color: #a3aab8; text-align: center; line-height: 2.1; }
.lgx-terms a { color: var(--lgx-muted); font-weight: 700; text-decoration: none; border-bottom: 1px dotted currentColor; }
.lgx-terms a:hover { color: var(--lgx-gold-d); }

/* ---------- سمت معرفی بیتفا ---------- */
.lgx-brand {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(90% 70% at 15% 0%, #1b2337 0%, transparent 60%),
		linear-gradient(160deg, #10151f 0%, #0b0f18 100%);
	color: #fff;
	padding: 52px 48px 30px;
	display: flex;
	flex-direction: column;
}
.lgx-brand__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 34px 34px;
	mask-image: radial-gradient(85% 70% at 50% 30%, #000 30%, transparent 100%);
	pointer-events: none;
}
.lgx-brand__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
}
.lgx-brand__glow--1 { width: 300px; height: 300px; background: rgba(247, 160, 29, .22); top: -110px; inset-inline-end: -80px; }
.lgx-brand__glow--2 { width: 260px; height: 260px; background: rgba(64, 106, 255, .14); bottom: -90px; inset-inline-start: -70px; }

.lgx-brand__logo { position: relative; height: 34px; width: auto; object-fit: contain; align-self: flex-start; margin-bottom: 28px; }
.lgx-brand__title {
	position: relative;
	margin: 0 0 12px;
	font-size: 27px;
	font-weight: 900;
	line-height: 1.7;
}
.lgx-brand__title em {
	font-style: normal;
	background: linear-gradient(90deg, #ffd794, var(--lgx-gold) 60%, #ffb84d);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.lgx-brand__desc {
	position: relative;
	margin: 0 0 28px;
	font-size: 13.5px;
	line-height: 2.2;
	color: #aab3c5;
	max-width: 40ch;
}

.lgx-feats {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.lgx-feat {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 14px;
	border-radius: 15px;
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(255, 255, 255, .07);
	backdrop-filter: blur(6px);
	transition: background .2s, border-color .2s, transform .2s;
}
.lgx-feat:hover { background: rgba(255, 255, 255, .075); border-color: rgba(247, 160, 29, .35); transform: translateY(-2px); }
.lgx-feat__ico {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.lgx-feat__ico.is-gold { background: rgba(247, 160, 29, .16); color: #ffc45c; }
.lgx-feat__ico.is-red { background: rgba(244, 82, 95, .16); color: #ff8b95; }
.lgx-feat__ico.is-blue { background: rgba(77, 124, 254, .17); color: #93b1ff; }
.lgx-feat__ico.is-green { background: rgba(34, 192, 122, .15); color: #5fdca6; }
.lgx-feat__ico.is-purple { background: rgba(151, 93, 247, .17); color: #c3a1ff; }
.lgx-feat__ico.is-cyan { background: rgba(41, 190, 213, .15); color: #7fdeed; }
.lgx-feat__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lgx-feat__txt strong { font-size: 13px; font-weight: 800; }
.lgx-feat__txt small { font-size: 11px; color: #8d97ab; line-height: 1.8; }

.lgx-brand__foot {
	position: relative;
	margin-top: auto;
	padding-top: 26px;
	font-size: 11.5px;
	color: #6b7488;
	text-align: center;
}

/* ---------- ریسپانسیو ---------- */
@media (max-width: 920px) {
	.lgx-stage { padding: 64px 12px 28px; }
	.lgx-card { grid-template-columns: 1fr; border-radius: 22px; }
	.lgx-pane { order: 1; padding: 34px 22px 26px; }
	.lgx-brand { order: 2; padding: 34px 22px 24px; }
	.lgx-brand__logo { display: none; }
	.lgx-logo-m { display: block; }
	.lgx-brand__title { font-size: 21px; }
	.lgx-brand__desc { margin-bottom: 20px; }
	.lgx-otp { width: 50px; height: 54px; }
}
@media (max-width: 480px) {
	.lgx-feats { grid-template-columns: 1fr; }
	.lgx-back { top: 14px; inset-inline-start: 14px; }
	.lgx-pane { padding-top: 30px; }
	.lgx-title { font-size: 19px; }
}

/* ---------- بازیابی رمز (forgot / reset) — کارت تکی ---------- */
.lgx-card--solo { grid-template-columns: 1fr; width: min(460px, 100%); }
.lgx-card--solo .lgx-pane { padding: 42px 40px 34px; }
.lgx-logo-solo { height: 30px; width: auto; object-fit: contain; margin-bottom: 22px; }
.lgx-key-ico {
	width: 58px;
	height: 58px;
	border-radius: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(247, 160, 29, .13);
	color: var(--lgx-gold-d);
	margin-bottom: 18px;
}
.lgx-alert {
	width: 100%;
	border-radius: 13px;
	padding: 13px 16px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 2.1;
	margin-bottom: 18px;
}
.lgx-alert--ok { background: rgba(31, 174, 116, .1); color: #157a54; border: 1px solid rgba(31, 174, 116, .3); }
.lgx-alert--err { background: rgba(239, 64, 86, .08); color: #cf2f42; border: 1px solid rgba(239, 64, 86, .25); }
.lgx-card--solo .lgx-btn { text-decoration: none; }
.lgx-eye {
	position: absolute;
	inset-inline-start: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: #aeb6c4;
	cursor: pointer;
	z-index: 1;
}
.lgx-eye:hover, .lgx-eye.is-on { color: var(--lgx-gold-d); }
.lgx-input--pw { padding-inline-start: 48px; }
@media (max-width: 480px) {
	.lgx-card--solo .lgx-pane { padding: 32px 22px 26px; }
}