.xtm-upload-surface {
	position: relative;
	border: 1px solid rgba(16, 33, 57, 0.14);
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(217, 84, 30, 0.08), rgba(255, 255, 255, 0.98) 38%, rgba(16, 33, 57, 0.04));
	box-shadow: 0 18px 40px rgba(18, 35, 58, 0.08);
	overflow: hidden;
}

.xtm-upload-surface__frame {
	display: flex;
	align-items: stretch;
	gap: 1rem;
	padding: 1rem;
}

.xtm-upload-surface__visual {
	flex: 0 0 190px;
	max-width: 190px;
	display: flex;
}

.xtm-upload-surface__content {
	flex: 1;
	min-width: 0;
}

.xtm-upload-surface__eyebrow {
	margin-bottom: 0.45rem;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #d9541e;
}

.xtm-upload-surface__title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	color: #102139;
}

.xtm-upload-surface__summary {
	margin: 0.45rem 0 0;
	color: #55647b;
	line-height: 1.6;
}

.xtm-upload-surface__body {
	margin-top: 0.9rem;
}

.xtm-upload-surface__footer {
	margin-top: 0.9rem;
	padding-top: 0.9rem;
	border-top: 1px solid rgba(16, 33, 57, 0.09);
}

.xtm-upload-surface__media-card,
.xtm-upload-surface__token {
	width: 100%;
	min-height: 180px;
	border-radius: 14px;
	border: 1px solid rgba(16, 33, 57, 0.09);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 252, 0.98));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.xtm-upload-surface__media-card {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.xtm-upload-surface__media-card--placeholder {
	padding: 1rem;
	text-align: center;
	background:
		radial-gradient(circle at top, rgba(217, 84, 30, 0.18), rgba(217, 84, 30, 0) 58%),
		linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 252, 0.98));
}

.xtm-upload-surface__placeholder-label {
	display: block;
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #102139;
}

.xtm-upload-surface__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
}

.xtm-upload-surface__token {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	text-align: center;
	background:
		radial-gradient(circle at top, rgba(217, 84, 30, 0.2), rgba(217, 84, 30, 0) 58%),
		linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 252, 0.98));
}

.xtm-upload-surface__token-label {
	display: block;
	font-size: 2.15rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #102139;
}

.xtm-upload-surface__token-detail {
	display: block;
	margin-top: 0.55rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6a778b;
}

.xtm-upload-surface__body .form-label {
	margin-top: 0;
	margin-bottom: 0.45rem;
	font-weight: 700;
}

.xtm-upload-surface__body .form-control {
	margin-bottom: 0;
}

.xtm-upload-surface__body input[type="file"].form-control {
	padding: 0.5rem 0.55rem;
	border-radius: 14px;
	border: 1px solid rgba(16, 33, 57, 0.14);
	background: #fff;
	font-size: 0.95rem;
	line-height: 1.45;
	color: #102139;
}

.xtm-upload-surface__body input[type="file"].form-control::file-selector-button {
	margin-right: 0.85rem;
	padding: 0.7rem 1rem;
	border: 0;
	border-radius: 999px;
	background: #d9541e;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.xtm-upload-surface__body input[type="file"].form-control:hover::file-selector-button,
.xtm-upload-surface__body input[type="file"].form-control:focus::file-selector-button {
	background: #bf4617;
}

.xtm-upload-surface__body .form-text {
	margin-bottom: 0;
	color: #55647b;
}

.xtm-upload-surface__body .invalid-feedback {
	display: block;
}

.xtm-upload-surface--invalid {
	border-color: rgba(220, 53, 69, 0.32);
	box-shadow: 0 18px 40px rgba(220, 53, 69, 0.08);
}

.xtm-upload-surface--invalid .xtm-upload-surface__media-card,
.xtm-upload-surface--invalid .xtm-upload-surface__token,
.xtm-upload-surface--invalid .xtm-upload-surface__body input[type="file"].form-control {
	border-color: rgba(220, 53, 69, 0.24);
}

.ctrl-streaming-upload-surface .xtm-upload-surface__visual {
	flex: 0 0 220px;
	max-width: 220px;
}

.application-upload-surface .xtm-upload-surface__summary {
	max-width: 36rem;
}

@media (max-width: 767.98px) {
	.xtm-upload-surface__frame {
		flex-direction: column;
	}

	.xtm-upload-surface__visual,
	.ctrl-streaming-upload-surface .xtm-upload-surface__visual {
		flex-basis: auto;
		max-width: none;
	}

	.xtm-upload-surface__media-card,
	.xtm-upload-surface__token {
		min-height: 140px;
	}
}