.root {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	padding: 40px;
}

.content {
	width: 100%;
	max-width: 560px;
}

.dropZone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 48px 32px;
	border: 2px dashed variables.$border-default;
	border-radius: variables.$radius-lg;
	background: variables.$bg-surface;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;

	&:hover {
		border-color: variables.$color-primary;
		background: variables.$bg-hover;
	}
}

.dropZoneActive {
	border-color: variables.$color-primary;
	background: rgba(var(--iris-a3), 0.08);
}

.dropZoneUploading {
	cursor: default;
	pointer-events: none;
}

.fileInput {
	display: none;
}

.icon {
	color: variables.$text-tertiary;
	margin-bottom: 4px;
}

.title {
	@include typography.font-body-16(600);
	color: variables.$text-primary;
}

.subtitle {
	@include typography.font-body-14(400);
	color: variables.$text-secondary;
}

.progressTrack {
	width: 100%;
	max-width: 300px;
	height: 6px;
	border-radius: 3px;
	background: variables.$border-subtle;
	overflow: hidden;
	margin-top: 8px;
}

.progressBar {
	height: 100%;
	background: variables.$color-primary;
	border-radius: 3px;
	transition: width 0.2s ease;
}

.progressLabel {
	@include typography.font-body-14(500);
	color: variables.$text-secondary;
	font-variant-numeric: tabular-nums;
}

.error {
	@include typography.font-body-14(500);
	color: variables.$color-danger;
	margin-top: 8px;
}