.preview-container {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 56px);
	background-color: #F2F2F2;
	position: relative;

	/* 预览区域样式 */
	.preview-area {
		flex: 1;
		background-color: #F2F2F2;
		width: 100%;
		padding: 12px;
		box-sizing: border-box;
		margin-bottom: 80px;
		margin-top: 64px;
		height: calc(100vh - 56px - 80px - 64px);
		overflow-y: auto;

		.preview-content {
			.preview-section {
				background-color: #ffffff;
				border-radius: 8px;
				padding: 16px;
				margin-bottom: 12px;

				.section-title {
					font-size: 16px;
					font-weight: 500;
					color: #171a1d;
					margin-bottom: 12px;
					position: relative;
					padding-left: 12px;

					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: 3px;
						height: 16px;
						width: 4px;
						background-color: #1a6fb8;
						border-radius: 2px;
					}
				}

				.section-content {
					.info-item {
						display: flex;
						margin-bottom: 12px;
						font-size: 14px;
						line-height: 22px;

						&:last-child {
							margin-bottom: 0;
						}

						.info-label {
							color: #86909c;
							min-width: 110px;
							margin-right: 12px;
						}

						.info-value {
							color: #171a1d;
							flex: 1;
						}
					}

					.text-content {
						font-size: 14px;
						line-height: 22px;
						color: #171a1d;
						word-break: break-word;
					}
				}
			}
		}
	}

	/* 底栏按钮区域样式 */
	.button-area {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		z-index: 100;
		padding: 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 68px;
		background-color: #ffffff;
		box-sizing: border-box;
		box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.08);

		.edit-button {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 28px;
			font-size: 14px;
			color: #171a1d;
			margin-right: 8px;
			gap: 2px;
		}

		.self-handle-button {
			width: 116px;
			height: 44px;
			background-color: #ffffff;
			color: #1a6fb8;
			border: 1px solid #1a6fb8;
			border-radius: 8px;
			font-size: 16px;
			font-weight: 500;
			margin: 0 8px;
		}

		.submit-button {
			flex: 1;
			height: 44px;
			background-color: #1a6fb8;
			color: #ffffff;
			border: none;
			border-radius: 8px;
			font-size: 16px;
			font-weight: 500;
			margin: 0 8px;

			&:last-child {
				margin-right: 0;
			}
		}
	}
}

.preview-tab {
	background-color: #fff;
	border-radius: 8px;
	padding: 8px 12px;
	position: fixed;
	top: 44px;
	left: 0;
	width: 100vw;
	z-index: 99;
	box-sizing: border-box;
}

.preview-tab-bar {
	display: flex;
	background: #5fa6d4;
	overflow: hidden;
}

.preview-tab-item {
	flex: 1;
	text-align: center;
	padding: 12px 0;
	color: #fff;
	background: #5fa6d4;
	font-size: 14px;
	cursor: pointer;
}

.preview-tab-item-active {
	background: #1a6fb8;
	color: #e6f7ff;
}