.reset-password-card {
	width: 576px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;

	.reset-password-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		margin-bottom: 32px;
		text-align: center;
		padding: 0 24px;
		width: 100%;

		.reset-password-header-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 8px;
			color: var(--semantic-primary-foreground);
		}

		.reset-password-header-title {
			font-family: Inter, sans-serif;
			font-size: 18px;
			font-weight: 600;
			line-height: 1;
			letter-spacing: 0;
			color: var(--levels-l1-foreground, #eceef2);
			margin: 0 !important;
		}

		.reset-password-header-subtitle {
			font-family: Inter, sans-serif;
			font-size: 13px;
			font-weight: 400;
			line-height: 20px;
			letter-spacing: -0.065px;
			color: var(--semantic-secondary-foreground, #adb4c2);
			margin: 0 !important;
			text-align: center;
		}

		.reset-password-version-badge {
			margin-top: 8px;
			padding: 4px 12px;
			border-radius: 4px;
			background: var(--semantic-secondary-background, #121317);
			border: 1px solid var(--semantic-secondary-border, #23262e);
			font-size: 11px;
			font-weight: 400;
			line-height: 1.45;
			color: var(--semantic-secondary-foreground);
			text-align: center;
		}
	}

	.reset-password-form {
		width: 100%;

		.reset-password-form-container {
			width: 100%;
			background: var(--semantic-secondary-background, #121317);
			border: 1px solid var(--semantic-secondary-border, #23262e);
			border-radius: 4px;
			padding: 24px;

			.reset-password-form-fields {
				width: 100%;
				display: flex;
				flex-direction: column;
				gap: 24px;
			}

			.reset-password-field-container {
				display: flex;
				flex-direction: column;
				gap: 12px;
			}

			.reset-password-form-input {
				height: 32px;
				width: 100%;
				border-radius: 2px;

				&.ant-input,
				&.ant-input-password,
				&.ant-input-affix-wrapper {
					height: 32px;
					border-radius: 2px;
					background: var(--levels-l3-background, #23262e);
					border-color: var(--levels-l3-border, #2c303a);
				}

				&.ant-input-affix-wrapper {
					.ant-input {
						height: auto;
						background: transparent;
					}
				}
			}
		}

		.reset-password-error-callout {
			margin-top: 24px;
			background: rgba(229, 72, 77, 0.1);
			border: 1px solid rgba(229, 72, 77, 0.2);
			border-radius: 4px;
			animation: horizontal-shaking 300ms ease-out;
		}

		.reset-password-form-actions {
			margin-top: 24px;
			display: flex;
			width: 100%;

			.reset-password-submit-button {
				width: 100%;
			}
		}

		.ant-form-item {
			margin-bottom: 0;
		}
	}

	@media (max-width: 768px) {
		width: 100%;
		padding: 0 16px;

		.reset-password-header {
			padding: 0;
		}
	}
}

.lightMode {
	.reset-password-card {
		.reset-password-header {
			.reset-password-header-icon {
				color: var(--text-ink-500);
			}

			.reset-password-header-title {
				color: var(--text-ink-500);
			}

			.reset-password-header-subtitle {
				color: var(--text-neutral-light-200, #80828d);
			}

			.reset-password-version-badge {
				background: var(--bg-vanilla-200, #f5f5f5);
				border: 1px solid var(--bg-vanilla-300, #e9e9e9);
				color: var(--text-neutral-light-200, #80828d);
			}
		}

		.reset-password-form {
			.reset-password-form-container {
				background: var(--bg-base-white, #ffffff);
				border: 1px solid var(--bg-vanilla-300, #e9e9e9);

				.reset-password-form-input {
					&.ant-input,
					&.ant-input-password,
					&.ant-input-affix-wrapper {
						background: var(--bg-vanilla-200, #f5f5f5);
						border-color: var(--bg-vanilla-300, #e9e9e9);
						color: var(--text-ink-500);
					}

					&.ant-input-affix-wrapper {
						.ant-input {
							background: transparent;
							color: var(--text-ink-500);
						}
					}

					&::placeholder {
						color: var(--text-neutral-light-200, #80828d);
					}

					&:focus {
						border-color: var(--semantic-primary-background, #4e74f8);
					}
				}
			}
		}
	}
}

@keyframes horizontal-shaking {
	0% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(5px);
	}
	50% {
		transform: translateX(-5px);
	}
	75% {
		transform: translateX(5px);
	}
	100% {
		transform: translateX(0);
	}
}
