.vizion-topbar {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 14px;
	min-height: 30px;
	margin-bottom: 12px;
	color: #8d8998;
	font-size: 12px
}

.sign-out-button, .sign-in-button, .admin-sign-out {
	border: 1px solid #ebeaf0;
	border-radius: 999px;
	background: #fff;
	color: #5541ee;
	padding: 8px 13px;
	font: 600 12px inherit;
	cursor: pointer;
	text-decoration: none
}

	.sign-out-button:hover, .sign-in-button:hover {
		background: #f0eeff
	}

.admin-topbar {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 16px;
	margin: -30px 0 26px;
	color: #777486;
	font-size: 12px
}

.admin-sign-out {
	color: #fff;
	background: #201d2b;
	border-color: #201d2b
}

	.admin-sign-out:hover {
		background: #342f45
	}

.frontend-login-overlay {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: grid;
	place-items: center;
	padding: 24px;
	background: #17131f66;
	backdrop-filter: blur(5px)
}

	.frontend-login-overlay > div {
		width: min(460px,100%);
		max-height: calc(100vh - 48px);
		overflow: auto
	}

.vizion-main {
	width: calc(100% - 104px);
	margin-left: 104px;
	padding-top: 18px
}

.vizion-sidebar {
	width: 104px
}

	.vizion-sidebar nav a, .vizion-admin-link {
		white-space: nowrap
	}

		.vizion-sidebar nav a span, .vizion-admin-link span {
			font-size: 9px;
			letter-spacing: -.15px
		}

@media(max-width:800px) {
	.vizion-main {
		width: calc(100% - 68px);
		margin-left: 68px;
		padding-top: 28px
	}

	.vizion-sidebar {
		width: 68px
	}

		.vizion-sidebar nav a span, .vizion-admin-link span {
			font-size: 10px
		}
}

.upload-zone {
	transition: border-color .2s ease,background .2s ease
}

	.upload-zone.has-files {
		border-color: #5541ee;
		background: #f7f5ff
	}

.upload-summary {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: -8px 0 10px;
	color: #5541ee;
	font-size: 12px
}

	.upload-summary i {
		font-size: 14px
	}

.clear-upload {
	margin-left: auto;
	border: 0;
	background: transparent;
	color: #8d8998;
	font: 600 11px inherit;
	cursor: pointer
}

	.clear-upload:hover {
		color: #5541ee
	}

.upload-file-list {
	list-style: none;
	padding: 0;
	margin: 0 0 14px;
	display: flex;
	flex-direction: column;
	gap: 6px
}

	.upload-file-list li {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 7px 9px;
		border-radius: 9px;
		background: #fafafd;
		color: #777486;
		font-size: 11px
	}

		.upload-file-list li i {
			color: #5541ee
		}

		.upload-file-list li span {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap
		}

		.upload-file-list li small {
			margin-left: auto;
			color: #aaa7b3;
			white-space: nowrap
		}

.optional-label {
	font-weight: 400;
	color: #aaa7b3;
	margin-left: 5px
}

.topbar-profile-link {
	color: #4f4a60;
	font-weight: 700;
	text-decoration: none
}

	.topbar-profile-link:hover {
		color: #5541ee;
		text-decoration: underline;
		text-underline-offset: 3px
	}

.profile-section {
	display: grid;
	gap: 12px;
	margin-top: 28px;
	padding-top: 26px;
	border-top: 1px solid #ebeaf0
}

	.profile-section h3 {
		font-size: 17px
	}

	.profile-section .primary-button {
		margin-top: 0
	}

	.profile-section .secondary-button {
		white-space: nowrap
	}

.frontend-login-page-overlay {
	position: fixed;
	inset: 0;
	z-index: 35;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(245,245,248,.68);
	backdrop-filter: blur(9px)
}

	.frontend-login-page-overlay > .frontend-auth-card {
		width: min(460px,100%);
		max-height: calc(100vh - 48px);
		overflow: auto
	}

.upload-thumbnails {
	display: grid;
	grid-template-columns: repeat(4,minmax(0,1fr));
	gap: 8px;
	margin: 10px 0 16px
}

.upload-thumbnail {
	min-width: 0
}

	.upload-thumbnail img {
		display: block;
		width: 100%;
		aspect-ratio: 1;
		border-radius: 10px;
		object-fit: cover;
		border: 1px solid #e4e2eb
	}

	.upload-thumbnail span {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #777486;
		font-size: 10px;
		margin-top: 4px
	}

.creation-toolbar {
	display: grid;
	grid-template-columns: 220px minmax(0,1fr) auto;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px
}

	.creation-toolbar .form-control, .creation-toolbar .form-select {
		min-width: 0
	}

.creation-list {
	display: grid;
	gap: 12px
}

.creation-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 12px 14px;
	border: 1px solid #ebeaf0;
	border-radius: 16px;
	background: #fafafd
}

	.creation-item strong {
		color: #34313f
	}

	.creation-item p {
		display: -webkit-box;
		overflow: hidden;
		margin: 7px 0 0;
		color: #85838f;
		font-size: 13px;
		line-height: 1.45;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3
	}

.creation-status {
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 7px 10px;
	background: #f0eeff;
	color: #5541ee;
	font-size: 11px;
	font-weight: 600
}

	.creation-status.failed {
		background: #fff0f2;
		color: #c03955
	}

	.creation-status.succeeded {
		background: #e9faf3;
		color: #1a9a72
	}

	.creation-status.order-pending {
		border-color: #f2d58d;
		background: #fff8e5;
		color: #8a5b00
	}

	.creation-status.order-paid {
		border-color: #abe4cf;
		background: #e9faf3;
		color: #157a5b
	}

	.creation-status.order-failed {
		border-color: #f1bac5;
		background: #fff0f2;
		color: #b52d49
	}

	.creation-status.order-refunded {
		border-color: #bfd2f5;
		background: #eef4ff;
		color: #315f9f
	}

.order-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 20px
}

	.order-pagination button {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		border: 1px solid #dedbea;
		border-radius: 999px;
		background: #fff;
		color: #5541ee;
		padding: 9px 15px;
		font: 600 12px inherit;
		cursor: pointer;
		transition: border-color .2s ease,background .2s ease,color .2s ease
	}

		.order-pagination button:hover:not(:disabled) {
			border-color: #c8c1f5;
			background: #f5f3ff
		}

		.order-pagination button:disabled {
			color: #aaa7b3;
			background: #f7f7f9;
			cursor: not-allowed
		}

	.order-pagination span {
		color: #777486;
		font-size: 12px
	}

		.order-pagination span strong {
			color: #34313f
		}

		.order-pagination span small {
			margin-left: 6px;
			color: #aaa7b3
		}

@media(max-width:560px) {
	.order-pagination {
		gap: 8px
	}

		.order-pagination button {
			padding: 8px 11px
		}

		.order-pagination span small {
			display: none
		}
}

.records-tabs {
	display: inline-flex;
	gap: 4px;
	margin-bottom: 22px;
	padding: 4px;
	border: 1px solid #e7e4ef;
	border-radius: 12px;
	background: #f7f6fa
}

	.records-tabs button {
		display: flex;
		align-items: center;
		gap: 7px;
		border: 0;
		border-radius: 8px;
		padding: 9px 14px;
		background: transparent;
		color: #85818f;
		font: 600 12px inherit;
		cursor: pointer
	}

		.records-tabs button.active {
			background: #fff;
			color: #5541ee;
			box-shadow: 0 3px 10px #29223512
		}

.records-empty {
	min-height: 420px
}

.credit-activity-list {
	display: grid;
	gap: 10px
}

.credit-activity-item {
	display: grid;
	grid-template-columns: 38px minmax(0,1fr) auto;
	align-items: center;
	gap: 13px;
	padding: 13px 15px;
	border: 1px solid #ebeaf0;
	border-radius: 14px;
	background: #fafafd
}

.credit-activity-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	font-size: 13px
}

	.credit-activity-icon.positive {
		background: #e9faf3;
		color: #16845f
	}

	.credit-activity-icon.negative {
		background: #fff0f2;
		color: #bc3a52
	}

.credit-activity-copy {
	min-width: 0
}

	.credit-activity-copy strong, .credit-activity-copy p {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}

	.credit-activity-copy strong {
		color: #34313f;
		font-size: 13px
	}

	.credit-activity-copy p {
		margin: 5px 0 0;
		color: #92909c;
		font-size: 11px
	}

.credit-activity-values {
	display: grid;
	justify-items: end;
	gap: 4px
}

	.credit-activity-values strong {
		font-size: 14px
	}

		.credit-activity-values strong.positive {
			color: #16845f
		}

		.credit-activity-values strong.negative {
			color: #bc3a52
		}

	.credit-activity-values span {
		color: #9995a2;
		font-size: 10px;
		white-space: nowrap
	}

@media(max-width:560px) {
	.records-tabs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%
	}

		.records-tabs button {
			justify-content: center;
			padding-inline: 8px
		}

	.credit-activity-item {
		grid-template-columns: 34px minmax(0,1fr);
		padding: 12px
	}

	.credit-activity-icon {
		width: 34px;
		height: 34px
	}

	.credit-activity-values {
		grid-column: 2;
		grid-template-columns: auto auto;
		justify-content: space-between;
		justify-items: start;
		width: 100%
	}
}

.creation-error {
	display: block;
	margin-top: 6px;
	color: #c03955;
	font-size: 11px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.creation-media {
	display: flex;
	gap: 6px;
	flex: none
}

	.creation-media img {
		width: 52px;
		height: 52px;
		object-fit: cover;
		border-radius: 10px;
		border: 1px solid #e4e2eb
	}

.creation-copy {
	min-width: 0;
	flex: 1
}

.creation-item-main.creation-button {
	display: flex;
	align-items: center;
	gap: 14px;
	width: auto;
	min-width: 0;
	flex: 1;
	border: 0;
	background: transparent;
	padding: 4px;
	text-align: left
}

.creation-item-side {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
	min-width: 176px
}

.creation-side-info {
	display: grid;
	justify-items: end;
	gap: 3px;
	min-width: 0
}

	.creation-side-info small {
		max-width: 176px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #9995a3;
		font-size: 10px
	}

		.creation-side-info small span {
			color: #b0acb8;
			margin-right: 3px
		}

.creation-delete-button, .creation-delete-confirm-button, .creation-delete-cancel {
	border: 0;
	border-radius: 9px;
	padding: 7px 9px;
	font: 600 11px inherit;
	cursor: pointer
}

.creation-delete-button {
	width: 32px;
	height: 32px;
	background: #fff0f2;
	color: #c03955
}

	.creation-delete-button:hover:not(:disabled), .creation-delete-confirm-button:hover:not(:disabled) {
		background: #c03955;
		color: #fff
	}

	.creation-delete-button:disabled, .creation-delete-confirm-button:disabled {
		opacity: .45;
		cursor: not-allowed
	}

.creation-delete-confirm {
	display: flex;
	gap: 5px
}

.creation-delete-confirm-button {
	background: #c03955;
	color: #fff
}

.creation-delete-cancel {
	background: #efedf5;
	color: #655f70
}

.danger-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: 12px;
	padding: 13px 16px;
	background: #fff0f2;
	color: #c03955;
	font: 600 13px inherit;
	cursor: pointer
}

	.danger-button:disabled {
		opacity: .5;
		cursor: not-allowed
	}
/* 支付收银台 */
.checkout-open {
	overflow: hidden;
}

.checkout-overlay {
	position: fixed;
	inset: 0;
	z-index: 5000;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(20, 16, 45, .46);
	backdrop-filter: blur(10px);
}

.checkout-dialog {
	width: min(920px, 96vw);
	height: min(760px, 90vh);
	display: grid;
	grid-template-rows: auto 1fr auto;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 26px;
	background: #fff;
	box-shadow: 0 32px 100px rgba(29, 21, 74, .32);
}

	.checkout-dialog header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18px 22px;
		border-bottom: 1px solid #eceaf6;
		background: linear-gradient(135deg, #faf9ff, #fff);
	}

		.checkout-dialog header div {
			display: grid;
			gap: 3px;
		}

		.checkout-dialog header span {
			color: #5740ee;
			font-size: 10px;
			font-weight: 800;
			letter-spacing: .15em;
		}

		.checkout-dialog header strong {
			font-size: 18px;
		}

		.checkout-dialog header button {
			width: 36px;
			height: 36px;
			border: 0;
			border-radius: 50%;
			background: #f0eef8;
			color: #514b63;
			font-size: 25px;
			cursor: pointer;
		}

	.checkout-dialog iframe {
		width: 100%;
		height: 100%;
		border: 0;
		background: #f8f7fc;
	}

	.checkout-dialog.external {
		grid-template-rows: auto 1fr auto;
	}

.checkout-launch {
	display: grid;
	place-content: center;
	gap: 10px;
	padding: 42px;
	text-align: center;
	color: #716b80;
	background: #f8f7fc;
}

	.checkout-launch strong {
		color: #29233f;
		font-size: 18px;
	}

	.checkout-launch span {
		font-size: 13px;
	}

.checkout-dialog footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 14px 22px;
	border-top: 1px solid #eceaf6;
	font-size: 12px;
}

	.checkout-dialog footer a {
		color: #5740ee;
		font-weight: 700;
		text-decoration: none;
	}

.checkout-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #716b80;
}

	.checkout-status i {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #f5a524;
		box-shadow: 0 0 0 5px rgba(245, 165, 36, .12);
	}

	.checkout-status.paid {
		color: #168257;
	}

		.checkout-status.paid i {
			background: #20a66f;
		}

	.checkout-status.failed {
		color: #c73c50;
	}

		.checkout-status.failed i {
			background: #d9485f;
		}

@media (max-width: 640px) {
	.checkout-overlay {
		padding: 10px;
	}

	.checkout-dialog {
		width: 100%;
		height: 92vh;
		border-radius: 20px;
	}

		.checkout-dialog footer {
			align-items: flex-start;
			flex-direction: column;
		}
}

/* 生成工作台 */
.imported-creation {
	display: grid;
	grid-template-columns: 46px 1fr auto;
	align-items: center;
	gap: 10px;
	margin: 16px 0 -6px;
	padding: 9px;
	border: 1px solid #dcd7ff;
	border-radius: 13px;
	background: #f7f5ff;
}

	.imported-creation img {
		width: 46px;
		height: 46px;
		border-radius: 9px;
		object-fit: cover;
	}

	.imported-creation div {
		min-width: 0;
	}

	.imported-creation span, .imported-creation strong {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.imported-creation span {
		color: #5541ee;
		font-size: 9px;
		font-weight: 800;
		letter-spacing: .08em;
	}

	.imported-creation strong {
		margin-top: 3px;
		color: #595568;
		font-size: 11px;
	}

	.imported-creation button {
		width: 30px;
		height: 30px;
		border: 0;
		border-radius: 50%;
		background: #ece8ff;
		color: #6b5ce8;
		cursor: pointer;
	}

.card-title > div {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.preview-job-id {
	color: #aaa7b3;
	font-size: 11px;
}

.icon-button.enabled {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #f0eeff;
	color: #5541ee;
	text-decoration: none;
}

.preview-result {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	min-height: 580px;
	margin-top: 22px;
	overflow: hidden;
	border-radius: 18px;
	background: linear-gradient(145deg, #f8f7fc, #efedf7);
}

	.preview-result > img {
		width: 100%;
		height: 100%;
		max-height: 530px;
		object-fit: contain;
	}

.preview-result-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 18px;
	background: rgba(255, 255, 255, .92);
	border-top: 1px solid #e7e4ee;
}

	.preview-result-meta strong, .preview-result-meta span {
		display: block;
	}

	.preview-result-meta strong {
		color: #34313f;
		font-size: 13px;
	}

	.preview-result-meta span {
		margin-top: 3px;
		color: #92909c;
		font-size: 11px;
	}

	.preview-result-meta a {
		color: #5541ee;
		font-size: 12px;
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
	}

.preview-progress-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 570px;
	padding: 40px;
	text-align: center;
}

	.preview-progress-state h3 {
		max-width: 480px;
		margin: 12px 0 8px;
		color: #34313f;
		font-size: 23px;
	}

	.preview-progress-state p {
		max-width: 460px;
		margin: 0;
		color: #92909c;
		font-size: 13px;
		line-height: 1.6;
	}

.generation-orbit {
	display: grid;
	place-items: center;
	width: 82px;
	height: 82px;
	margin-bottom: 24px;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(145deg, #5541ee, #8a78ff);
	box-shadow: 0 18px 40px rgba(85, 65, 238, .28);
	animation: generation-pulse 1.8s ease-in-out infinite;
}

	.generation-orbit i {
		font-size: 27px;
	}

.preview-progress-state.failed .generation-orbit, .preview-progress-state.canceled .generation-orbit {
	background: linear-gradient(145deg, #c03955, #ee7188);
	box-shadow: 0 18px 40px rgba(192, 57, 85, .22);
	animation: none;
}

.generation-progress {
	width: min(360px, 86%);
	height: 7px;
	margin-top: 28px;
	overflow: hidden;
	border-radius: 999px;
	background: #eceaf2;
}

	.generation-progress span {
		display: block;
		height: 100%;
		border-radius: inherit;
		background: linear-gradient(90deg, #5541ee, #988aff);
		transition: width .35s ease;
	}

.preview-progress-state.running .generation-progress span {
	animation: generation-progress 1.8s ease-in-out infinite;
}

.preview-progress-state small {
	margin-top: 9px;
	color: #9d9aa7;
	font-size: 10px;
}

@keyframes generation-pulse {
	50% {
		transform: translateY(-4px) scale(1.04);
		box-shadow: 0 24px 48px rgba(85, 65, 238, .34);
	}
}

@keyframes generation-progress {
	50% {
		filter: brightness(1.18);
	}
}

/* 创作详情 */
.creation-button {
	width: 100%;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

	.creation-button:hover {
		transform: translateY(-1px);
		border-color: #cbc4f8;
		background: #fff;
		box-shadow: 0 10px 26px rgba(54, 45, 105, .08);
	}

	.creation-button:focus-visible {
		outline: 3px solid rgba(85, 65, 238, .2);
		border-color: #5541ee;
	}

.creation-chevron {
	color: #c1beca;
	font-size: 11px;
}

.creation-detail-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 28px;
	background: rgba(23, 19, 36, .52);
	backdrop-filter: blur(9px);
}

.creation-detail-dialog {
	width: min(1160px, 96vw);
	max-height: 92vh;
	overflow: auto;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 26px;
	background: #fff;
	box-shadow: 0 35px 110px rgba(26, 18, 65, .32);
}

	.creation-detail-dialog > header {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 24px;
		border-bottom: 1px solid #eceaf2;
		background: rgba(255, 255, 255, .94);
		backdrop-filter: blur(12px);
	}

	.creation-detail-dialog header h2 {
		margin-top: 4px;
		font-size: 21px;
	}

.detail-close {
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: #f2f0f7;
	color: #625e6c;
	cursor: pointer;
}

.creation-detail-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
	min-height: 590px;
}

.creation-detail-stage {
	display: grid;
	place-items: center;
	min-height: 590px;
	padding: 28px;
	background: radial-gradient(circle at 50% 20%, #fff 0, #f3f1f8 72%);
}

	.creation-detail-stage img, .creation-detail-stage video {
		display: block;
		max-width: 100%;
		max-height: 650px;
		border-radius: 16px;
		box-shadow: 0 20px 55px rgba(36, 29, 73, .16);
	}

.detail-no-media {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	max-width: 390px;
	color: #92909c;
	text-align: center;
}

	.detail-no-media i {
		margin-bottom: 5px;
		color: #c3bfcd;
		font-size: 45px;
	}

	.detail-no-media strong {
		color: #504c59;
		font-size: 18px;
	}

	.detail-no-media span {
		font-size: 12px;
		line-height: 1.6;
	}

.creation-detail-info {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 28px;
	border-left: 1px solid #eceaf2;
}

.detail-status-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: #aaa7b3;
	font-size: 11px;
}

.detail-section label {
	display: block;
	margin-bottom: 8px;
	color: #5541ee;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.detail-section p {
	margin: 0;
	color: #4b4755;
	font-size: 13px;
	line-height: 1.7;
}

.detail-parameters {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
}

	.detail-parameters div {
		min-width: 0;
		padding: 11px 12px;
		border-radius: 11px;
		background: #f7f6fa;
	}

	.detail-parameters span, .detail-parameters strong {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.detail-parameters span {
		color: #9995a3;
		font-size: 9px;
		text-transform: uppercase;
	}

	.detail-parameters strong {
		margin-top: 4px;
		color: #484451;
		font-size: 11px;
	}

.detail-actions {
	display: grid;
	gap: 9px;
	margin-top: auto;
}

	.detail-actions a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin: 0;
		text-decoration: none;
	}

.detail-download {
	width: 100%;
}

/* 视频复用入口 */
.video-source-workspace {
	display: grid;
	grid-template-columns: minmax(280px, .8fr) minmax(320px, 1fr);
	gap: 34px;
	align-items: center;
}

.video-keyframe {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 460px;
	padding: 20px;
	overflow: hidden;
	border-radius: 20px;
	background: #f2f0f7;
}

	.video-keyframe img {
		display: block;
		max-width: 100%;
		max-height: 430px;
		border-radius: 13px;
		box-shadow: 0 18px 50px rgba(31, 23, 69, .18);
	}

	.video-keyframe span {
		position: absolute;
		left: 16px;
		bottom: 16px;
		padding: 8px 11px;
		border-radius: 999px;
		color: #14785a;
		background: rgba(233, 250, 243, .94);
		font-size: 10px;
		font-weight: 700;
	}

.video-source-controls h2 {
	margin: 10px 0 8px;
	font-size: 25px;
}

.video-source-controls > p {
	max-width: 520px;
	color: #85838f;
	font-size: 13px;
	line-height: 1.7;
}

.video-source-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
}

	.video-source-actions a {
		text-decoration: none;
		white-space: nowrap;
	}

	.video-source-actions .primary-button {
		margin-top: 0;
	}

@media (max-width: 900px) {
	.creation-detail-grid, .video-source-workspace {
		grid-template-columns: 1fr;
	}

	.creation-detail-stage {
		min-height: 380px;
	}

	.creation-detail-info {
		border-top: 1px solid #eceaf2;
		border-left: 0;
	}
}

@media(max-width:800px) {
	.vizion-main {
		width: 100%;
		margin-left: 0
	}

	.vizion-sidebar {
		width: min(280px,84vw);
		padding: 16px;
		align-items: stretch;
		transform: translateX(-100%);
		transition: transform .2s ease;
		box-shadow: 12px 0 30px #24202d18
	}

		.vizion-sidebar.is-open {
			transform: translateX(0)
		}

		.vizion-sidebar .vizion-brand {
			align-self: flex-start
		}

		.vizion-sidebar nav {
			margin-top: 28px
		}

			.vizion-sidebar nav a, .vizion-admin-link {
				flex-direction: row;
				justify-content: flex-start;
				gap: 12px;
				padding: 12px 14px;
				font-size: 12px
			}

				.vizion-sidebar nav a span, .vizion-admin-link span {
					display: inline;
					font-size: 12px;
					letter-spacing: 0
				}
}

@media (max-width: 640px) {
	.creation-detail-overlay {
		padding: 8px;
	}

	.creation-detail-dialog {
		width: 100%;
		max-height: 96vh;
		border-radius: 19px;
	}

		.creation-detail-dialog > header, .creation-detail-info {
			padding: 18px;
		}

	.creation-item {
		gap: 10px;
		padding: 13px;
	}

	.creation-status {
		padding: 6px 8px;
		font-size: 9px;
	}

	.creation-chevron {
		display: none;
	}

	.preview-result, .preview-progress-state {
		min-height: 330px;
	}

	.video-source-actions {
		align-items: stretch;
		flex-direction: column;
	}

		.video-source-actions a, .video-source-actions button {
			width: 100%;
			text-align: center;
		}
}

@media (max-width: 640px) {
	.creation-toolbar {
		grid-template-columns: 1fr;
		align-items: stretch;
	}

		.creation-toolbar .secondary-button {
			justify-self: start;
		}

	.creation-item {
		align-items: flex-start;
	}

	.creation-item-side {
		align-items: flex-end;
		flex-direction: column;
		gap: 7px;
		min-width: 0;
	}

	.creation-side-info {
		justify-items: end;
	}

	.creation-status {
		text-align: center;
	}
}