@import '@/styles/morandi.scss';

.auth-page {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: $morandi-bg-page;
}

.auth-hero {
	flex-shrink: 0;
	min-height: 320rpx;
	padding: 80rpx 48rpx 100rpx;
	background: linear-gradient(145deg, #3d9b6e 0%, #22c55e 42%, #86efac 100%);
}

.auth-hero__app {
	display: block;
	font-size: 40rpx;
	font-weight: 700;
	color: #fff;
}

.auth-hero__welcome {
	display: block;
	margin-top: 12rpx;
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
}

.auth-body {
	flex: 1;
	margin-top: -60rpx;
	padding: 0 32rpx 48rpx;
}

.auth-card {
	padding: 40rpx 32rpx 32rpx;
	background: #fff;
	border-radius: 24rpx;
	box-shadow: 0 8rpx 32rpx rgba(46, 125, 50, 0.08);
}

.auth-card__title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
}

.auth-card__sub {
	display: block;
	margin-top: 8rpx;
	margin-bottom: 32rpx;
	font-size: 24rpx;
	color: #999;
}

.auth-closed {
	padding: 48rpx 0;
	text-align: center;
	font-size: 28rpx;
	color: #999;
}

.auth-field {
	margin-bottom: 24rpx;
}

.auth-field__box {
	display: flex;
	align-items: center;
	height: 88rpx;
	padding: 0 24rpx;
	background: #f5faf6;
	border: 1rpx solid #e0e0e0;
	border-radius: 16rpx;
}

.auth-field__input {
	flex: 1;
	margin-left: 16rpx;
	font-size: 28rpx;
	color: #333;
}

.auth-field__placeholder {
	color: #bbb;
}

.auth-btn {
	margin-top: 32rpx;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%);
	border-radius: 44rpx;
}

.auth-btn--loading {
	opacity: 0.7;
}

.auth-btn__txt {
	font-size: 32rpx;
	color: #fff;
	font-weight: 500;
	letter-spacing: 4rpx;
}

.auth-switch {
	margin-top: 32rpx;
	text-align: center;
	font-size: 26rpx;
	color: #999;
}

.auth-switch__link {
	margin-left: 8rpx;
	color: #2e7d32;
}
