/* ===== Auth pages (OTP login) ===== */
.auth-section {
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: 110px 0 50px;
	background:
		radial-gradient(60rem 40rem at 90% -10%, rgba(124, 58, 237, .10), transparent 60%),
		radial-gradient(50rem 40rem at -10% 110%, rgba(236, 72, 153, .08), transparent 60%),
		var(--surface, #f8fafc);
}

.auth-shell {
	border-radius: var(--radius, 16px);
	overflow: hidden;
	background: #fff;
}

/* Brand panel (desktop) */
.auth-brand {
	position: relative;
	background: var(--gradient, linear-gradient(150deg, #4f46e5, #7c3aed 55%, #ec4899));
	overflow: hidden;
}
.auth-brand::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(24rem 24rem at 120% 0%, rgba(255, 255, 255, .18), transparent 60%),
		radial-gradient(18rem 18rem at -10% 120%, rgba(255, 255, 255, .12), transparent 60%);
	pointer-events: none;
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-points i { color: rgba(255, 255, 255, .95); }
.text-white-75 { color: rgba(255, 255, 255, .78) !important; }

/* Form panel */
.auth-form .input-group-text {
	background: var(--surface, #f8fafc);
	border-color: var(--surface-border, #e2e8f0);
	color: var(--muted, #64748b);
}
.auth-form .form-control {
	padding-top: .7rem;
	padding-bottom: .7rem;
}
.auth-form .form-control:focus {
	border-color: var(--primary, #4f46e5);
	box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .15);
}
.fk-mobile-group .form-control {
	font-weight: 600;
	letter-spacing: 1px;
}

/* OTP boxes */
.fk-otp {
	width: 3.25rem;
	height: 3.5rem;
	padding: 0;
	font-size: 1.5rem;
	border-radius: 12px;
	border: 1.5px solid var(--surface-border, #e2e8f0);
}
.fk-otp:focus {
	border-color: var(--primary, #4f46e5);
	box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .15);
}
@media (max-width: 380px) {
	.fk-otp { width: 2.75rem; height: 3rem; font-size: 1.25rem; }
}

.text-gradient {
	background: var(--gradient, linear-gradient(135deg, #4f46e5, #7c3aed));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Wrong-code feedback */
@keyframes fkShake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-6px); }
	40%, 80% { transform: translateX(6px); }
}
.fk-shake { animation: fkShake .4s ease; }