@-webkit-keyframes slideIn {
	0% {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		opacity: 0
	}

	to {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		opacity: 1
	}
}

@keyframes slideIn {
	0% {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		opacity: 0
	}

	to {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		opacity: 1
	}
}

@-webkit-keyframes slideOut {
	0% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		opacity: 1
	}

	to {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		opacity: 0
	}
}

@keyframes slideOut {
	0% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		opacity: 1
	}

	to {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		opacity: 0
	}
}

.slideIn {
	-webkit-animation: slideIn .2s forwards;
	animation: slideIn .2s forwards
}

.slideOut {
	-webkit-animation: slideOut .2s forwards;
	animation: slideOut .2s forwards
}

.pageContent {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10rem;
	background: #eee;
	z-index: 3;
	opacity: 0;
}

.popup-box {
	height: calc(100% - 75rem);
	--popup_title_height: 20rem;
	padding-bottom: 10rem
}

.popup-title {
	height: var(--popup_title_height);
	font-size: 15rem;
}

.popup-body {
	height: calc(100% - var(--popup_title_height));
	/* overflow-y:auto; */
	overflow-x: hidden;
}

.popup-foot {
	padding-bottom: 30rem;
}

.popup-foot>div {
	width: 45%;
	height: 45rem;
	line-height: 45rem;
	font-size: 17rem;
	letter-spacing: 2rem;
	border-radius: 6rem
}

.ui-form {
	--textAlgin: right;
	--formLabelAlign: left;
}

.ui-form .ui-form-label {
	width: calc(var(--vmLabelWidth) * 1rem);
	text-align: var(--formLabelAlign);
	padding-right: 12rem;
}

.ui-form .ui-form-item {
	--UIFormLabel_: calc(var(--vmLabelWidth) * 1rem);
	width: calc(100% - var(--UIFormLabel_));
	text-align: var(--textAlgin);
	word-wrap: break-word;
	background-color: #F5F7FA;
	padding: 0 15rem;
	border-radius: 2rem;
	border: 1rem solid #ced4da;
	min-height: 30rem;
	line-height: 28rem;
	box-sizing: border-box;
	position: relative;
}

.ui-form .ui-form-item .el-select {
	width: 100%;

}

.ui-form .ui-form-item_tow {

	background-color: #fff;

}

.ui-form .ui-form-item a {
	text-decoration: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	z-index: 1;
}

.ui-form .ui-form-item .el-input__inner {
	width: 100%;
	border-radius: 2rem;
	border: none;
	height: 30rem;
	line-height: 30rem;
	position: relative;
}

.ui-form .ui-form-item .el-input__suffix .el-input__suffix-inner i {
	line-height: 30rem;
}

.ui-input-inner,
.ui-textarea-inner {
	width: 100%;
	background: #fff;
	border-radius: 4rem;
	padding: 6rem 10rem;
}

.ui-input-inner input,
.ui-textarea-inner textarea {
	border: none;
	background: transparent;
	outline: 0;
	line-height: 30rem;
	font-size: 16rem;
	width: 100%;
}

/* .ui-input-inner_{
	width: 80%;
} */
.ui-combox-inner {
	background: #fff;
	border-radius: 6rem;
	padding: 0 10rem;
}

.ui-combox-inner>div {
	line-height: 50rem;
	height: 50rem;
	border-bottom: 1rem solid #eee;
}

.ui-tree-inner {
	background: #fff;
	border-radius: 6rem;
	padding: 6rem 10rem 6rem 6rem;
}

.ui-tree-inner>div {
	line-height: 30rem;
	border-bottom: 1rem solid #eee;
}

.tree-line-row {
	--treeLineHeight: calc(100% - 30rem);
}

/* .tree-line-row::before{
	width: 1rem;
	content: '';
	position: absolute;
	top:15rem;
	left:0;
	bottom:15rem;
	background:#b4b4b4;
}

.tree-line-row::after{
	height: 1rem;
	content: '';
	position: absolute;
	top:15rem;
	left:-10rem;
	width:18rem;
	background:#b4b4b4;
} */
.tree-line-row::before {
	width: 1rem;
	content: '';
	position: absolute;
	top: -15rem;
	left: -10rem;
	height: 100%;
	background: #b4b4b4;
}

.tree-line-row:last-child::before {
	width: 1rem;
	content: '';
	position: absolute;
	top: -15rem;
	left: -10rem;
	height: 30rem;
	background: #b4b4b4;
}

.tree-line-row::after {
	height: 1rem;
	content: '';
	position: absolute;
	top: 15rem;
	left: -10rem;
	width: 18rem;
	background: #b4b4b4;
}

.tree-input:placeholder-shown {
	color: #212121;
	font-size: 13rem;
}

input::-webkit-input-placeholder {
	color: #212121;
	font-size: 13rem;
}

input::-moz-placeholder {
	color: #212121;
	font-size: 13rem;
}

/* Firefox 18- */
input:-moz-placeholder {
	color: #212121;
	font-size: 13rem;
	/* Firefox 19+ */
}

input:-ms-input-placeholder {
	color: #212121;
	font-size: 13rem;
}

.prop {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: rgba(155, 155, 155, 0.8);
	display: flex;
	justify-content: center;
	align-items: center;
}

.propContent {
	width: 300px;
	background-color: white;
	border-radius: 4px;
}

.propTitle {
	color: #6c6c6c;
	text-align: center;
	font-size: 16px;
	margin: 20px 0px;
}

.propBtn {
	display: flex;
}

.closeBtn {
	width: 50%;
	color: red;
	border: 1px solid #eee;
	border-radius: 0px 0px 0px 4px;
	height: 40px;
	text-align: center;
	line-height: 40px;
}

.subBtn {
	width: 50%;
	color: #007aff;
	border: 1px solid #eee;
	border-radius: 0px 0px 4px 0px;
	height: 40px;
	text-align: center;
	line-height: 40px;
}

/* 列表加载完成后的提示文字 */
.van-list__finished-text {
	text-align: center;
	color: #8C939D;
}

.nativeInp {
	border: none;
	background: #F5F7FA;
	width: 100%;
	padding-left: 15px;
}

.nativeInp_ {
	border: none;
	background: #fff;
	width: 100%;
	padding-left: 15px;
}

.passwordInp {
	border: 1px solid rgb(123 123 123);
	border-radius: 4px;
	background: #fff;
	width: 100%;
	padding-left: 15px;
	height: 30px;
	color: rgb(123 123 123);
}

.promptTitle {
	padding: 5px;
	color: red;
	margin-bottom: 25px;
}

.disableInp {
	/* border: none; */
	background: #e3e3e3;
	width: 100%;
	padding: 0 5px;
	border-radius: 2px;
	border: 1px solid #ced4da;
	min-height: 30px;
	line-height: 28px;
}

.proptable {
	width: 100%;
	height: calc(100vh - 30px);
	background-color: white;
	border-radius: 4px;
	padding: 15px;
	overflow-y: auto;
	z-index: 2;
	position: static;
}

.jsonInp {
	background-color: #fff;
	padding: 0 5px;
	border-radius: 2px;
	width: 100%;
	border: 1px solid #ced4da;
	min-height: 30px;
	line-height: 28px;
}

.value_json {
	--UIFormLabel_: calc(var(--vmLabelWidth) * 1rem);
	width: 100%;

}

.json_box {
	--UIFormLabel_: calc(var(--vmLabelWidth) * 1rem);
	width: calc(100% - var(--UIFormLabel_));
	margin-bottom: 5px;
}

.json_box_ {
	width: 100%;

}

.jsonArr_box {
	--UIFormLabel_: calc(var(--vmLabelWidth) * 1rem);
	width: calc(100% - var(--UIFormLabel_));
	margin-bottom: 5px;
}



.ui-sub-table {
	border-radius: 8px;
	margin-top: 16px;
	position: relative;
}

/* 顶部操作区 */
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0px;
}

.header .label {
	width: calc(var(--vmLabelWidth) * 1rem);
	text-align: var(--formLabelAlign);
	padding-right: 12rem;
}

.mode-select {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	background-color: #fff;
	padding: 4rem;
	justify-content: end;
}

.mode-select .label {
	color: #666;
}

.mode-select select {
	padding: 4px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.add-btn {
	padding: 6px 12px;
	background: #2db7f5;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.2s;
}

.add-btn:hover {
	background: #1890ff;
}

/* 瀑布表模式 */
.mode-waterfall {
	margin-bottom: 16px;
}

.waterfall-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-radius: 4px;
	margin-bottom: 8px;
	transition: border 0.2s;
}

.waterfall-row:hover {
	border-color: #ccc;
}

.row-number {
	text-align: center;
	color: #666;
	font-weight: 500;
}

.field-group {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	min-width: 300px;
}

.field-item {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 120px;
}

.field-item label {
	white-space: nowrap;
	width: calc(var(--vmLabelWidth) * 1rem);
	text-align: var(--formLabelAlign);
	padding-right: 12rem;
}

.field-item input {
	padding: 6px 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	min-width: 150px;
}

.row-actions {
	margin: 10rem 0;
	width: 100%;
	display: flex;
	justify-content: center;
}

.more-btn {
	background: transparent;
	border: none;
	font-size: 18px;
	cursor: pointer;
	color: #999;
	transition: color 0.2s;
}

.more-btn:hover {
	color: #666;
}

/* 二维表模式（滚动核心样式） */
.mode-table {
	padding-top: 16px;
	overflow: auto;
	background-color: #fff;
}

/* 滚动容器 */
.table-container {
	overflow: hidden;
	/* 启用滚动 */
	border: 1px solid #eee;
	border-radius: 4px;
}

/* 表格样式 */
.sub-table {
	width: auto;
	border-collapse: collapse;
	table-layout: fixed;
	/* 固定列宽，避免抖动 */
}

.sub-table th,
.sub-table td {
	min-width: 120rem;
	border: 1px solid #eee;
	padding: 10px;
	text-align: left;
	white-space: nowrap;
	/* 禁止文本换行 */
	overflow: hidden;
	text-overflow: ellipsis;
	/* 超出显示省略号 */
}

.sub-table th {
	background: #f5f5f5;
	color: #333;
	position: sticky;
	/* 表头固定 */
	top: 0;
	z-index: 2;
}

.sub-table input {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-sizing: border-box;
}

/* 滚动条美化 */
.table-container::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.table-container::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 4px;
}

.table-container::-webkit-scrollbar-track {
	background: #f5f5f5;
}

/* 底部按钮 */
.footer-buttons {
	display: flex;
	gap: 12px;
	justify-content: center;
	padding-top: 16px;
}

.btn {
	padding: 8px 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: opacity 0.2s;
}

.btn:hover {
	opacity: 0.9;
}

.btn.draft {
	background: #87d068;
	color: #fff;
}

.btn.continue {
	background: #2db7f5;
	color: #fff;
}

.btn.submit {
	background: #108ee9;
	color: #fff;
}

.btn.cancel {
	background: #f5f5f5;
	color: #666;
}

.btn.confirm {
	background: #ff4d4f;
	color: #fff;
}

/* 行操作菜单 */
.row-menu {
	position: absolute;
	width: 120px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	z-index: 10;
	padding: 8px 0;
}

.menu-item {
	width: 100%;
	padding: 8px 16px;
	text-align: left;
	background: transparent;
	border: none;
	cursor: pointer;
	transition: background 0.2s;
}

.menu-item:hover {
	background: #f5f5f5;
}

.menu-item.delete {
	color: #ff4d4f;
}

.menu-item.cancel {
	color: #666;
}

/* 删除确认弹窗 */
.confirm-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
}

.modal-content {
	width: 300px;
	background: #fff;
	border-radius: 8px;
	padding: 24px;
}

.confirm-text {
	color: #333;
	margin-bottom: 20px;
	text-align: center;
}

.modal-buttons {
	display: flex;
	gap: 12px;
	justify-content: center;
}

/* 仅修改字段布局相关样式，不改变原有逻辑 */
.field-group {
	display: flex;
	flex-direction: column;
	/* 字段垂直排列 */
	gap: 15px;
	/* 字段之间的间距 */
	padding: 10px;
}

.field-item {
	display: flex;
	align-items: center;
	width: 100%;
	/* 每个字段占满一行宽度 */
}

.field-item label {
	min-width: 120px;
	/* 标签固定宽度，保证对齐 */
	margin-right: 10px;
	text-align: right;
}

.field-item input,
.field-item select,
.field-item textarea {
	flex: 1;
	/* 输入框占剩余宽度 */
	padding: 6px 10px;
	box-sizing: border-box;
}

.field-item .specification {
	margin-left: 130px;
	/* 与标签对齐 */
	font-size: 12px;
	color: #666;
	margin-top: 4px;
}

.van-cell {
	background-color: transparent;
}

.ui-list-form .ui-form-datetime .el-input__inner {
	background-color: transparent;
}

.ui-list-form .ui-form-datetime .el-input {
	padding: 10px 0;

}


/* 横向布局 - 核心修复 */
.transverse-layout {
	width: 100%;
	box-sizing: border-box;
}

.transverse-scroll {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	min-height: 48px;
}

.transverse-scroll::-webkit-scrollbar {
	display: none;
}

.transverse-header {
	display: flex;
	padding: 0 8px;
	box-sizing: border-box;
	border-bottom: 1px solid #eee;
}

/* 标签项：必须设置relative，让伪元素相对自己定位 */
.transverse-item {
	position: relative;
	padding: 12px 16px;
	white-space: nowrap;
	cursor: pointer;
	font-size: 14px;
	color: #333;
	transition: color 0.2s ease;
}

/* 激活态伪元素：直接相对标签项定位，无需JS计算 */
/* .transverse-item.active::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 90%;
	height: 2px;
	background-color: #1989fa;
	transition: all 0.3s ease-out;
} */

/* 横向卡片样式 */
.transverse-header.card-tabs {
	border-bottom: none;
	padding: 8px 4px;
	background: #f5f7fa;
}

.transverse-item.card-item {
	margin: 0 4px;
	border-radius: 4px;
	background: #fff;
}

.transverse-item.card-item.active {
	background: #fff;
}

/* 纵向布局（保持原有逻辑，可按需优化） */
.vertical-layout {
	width: 100%;
	box-sizing: border-box;
}

.vertical-header {
	display: flex;
	flex-direction: column;
	padding: 0 8px;
	box-sizing: border-box;
}

.vertical-item {
	padding: 16px 16px;
	text-align: left;
	border-bottom: 1px solid #eee;
	cursor: pointer;
	font-size: 14px;
	color: #333;
	position: relative;
	transition: all 0.2s ease;
}

.vertical-item.active {
	color: #1989fa;
	font-weight: 500;
}

.vertical-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: var(--left);
	width: 100%;
	height: 2px;
	background-color: #1989fa;
	transition: all 0.3s ease-out;
}

.van-dropdown-menu__bar {
	background-color: transparent;
	box-shadow: none;
}

/* ui-tabs 组件样式 */
.ui-tabs {
	/* 默认样式变量 */
	--active_bg_color: #f5f7fa;
	--active_color: #1989fa;
	--active_font_color: #1989fa;
	--active_font_size: 14px;
	--active_font_weight: 500;
	--active_border_color: #1989fa;
	--active_border_width: 2px;
	--active_border_style: solid;
	--active_border_radius: 0px;

	--inactive_bg_color: transparent;
	--inactive_color: #606266;
	--inactive_font_size: 14px;
	--inactive_font_weight: normal;

	--border_color: #eee;
	--border_width: 1px;
	--border_style: solid;
}

/* 横向布局样式 */
.transverse-header {
	border-bottom: var(--border_width) var(--border_style) var(--border_color);
}

.transverse-item {
	background-color: var(--inactive_bg_color);
	color: var(--inactive_color);
	font-size: var(--inactive_font_size);
	font-weight: var(--inactive_font_weight);
	padding: 12px 16px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.transverse-item.active {
	background-color: var(--active_bg_color);
	color: var(--active_font_color);
	font-size: var(--active_font_size);
	font-weight: var(--active_font_weight);
}

/* 纵向布局样式 */
.vertical-header {
	border-right: var(--border_width) var(--border_style) var(--border_color);
}

.vertical-item {
	background-color: var(--inactive_bg_color);
	color: var(--inactive_color);
	font-size: var(--inactive_font_size);
	font-weight: var(--inactive_font_weight);
	padding: 12px 16px;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
}

.vertical-item.active {
	background-color: var(--active_bg_color);
	color: var(--active_font_color);
	font-size: var(--active_font_size);
	font-weight: var(--active_font_weight);
}

/* 卡片样式 */
.card-tabs .transverse-item,
.card-tabs .vertical-item {
	border: var(--border_width) var(--border_style) var(--border_color);
	margin: 2px;
}

.card-tabs .transverse-item.active,
.card-tabs .vertical-item.active {
	border-color: var(--active_border_color);
}

/* 统计数字样式 */
.statistics {
	font-size: 12px;
	opacity: 0.8;
}

/* 图片风格的下拉选择器样式 */
.image-style-dropdown-container {
	position: relative;
}

.image-style-dropdown {
	position: relative;
	background: #fff;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	margin-top: 4px;
}

.dropdown-content {
	max-height: 200px;
	overflow-y: auto;
}

.dropdown-option {
	padding: 8px 12px;
	font-size: 14px;
	color: #606266;
	cursor: pointer;
	transition: background-color 0.3s;
	border-bottom: 1px solid #f0f0f0;
}

.dropdown-option:hover {
	background-color: #f5f7fa;
}

.dropdown-option-selected {
	background-color: #f0f9ff;
	color: #409eff;
	font-weight: 500;
}

.dropdown-option:last-child {
	border-bottom: none;
}

.image-style-loading,
.image-style-empty {
	text-align: center;
	padding: 20px;
	color: #909399;
	background: #fff;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
}

/* 滚动条样式 */
.dropdown-content::-webkit-scrollbar {
	width: 6px;
}

.dropdown-content::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 3px;
}

.dropdown-content::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 3px;
}

.dropdown-content::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}


/* 优化后的表格配套样式 */

:root {
	--table-row-height: 50px;
}

.container {
	width: 100%;
	margin: 0 auto;
	font-family: Arial, sans-serif;
}

.table-wrapper {
	margin-bottom: 20px;
	border-radius: 4px;
	overflow: hidden;
	width: 100%;
	position: relative;
	background: white;
}

.container-table-id .table-container {
	display: flex;
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 200px;
}

.fixed-columns {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 10;
	overflow: hidden;
	background: white;
}

.fixed-left {
	left: 0;
	box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.fixed-right {
	right: 0;
	box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}

.fixed-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

.scroll-area {
	flex: 1;
	overflow: auto;
	width: 100%;
}

.native-table {
	border-collapse: collapse;
	font-size: 14px;
	table-layout: auto;
	white-space: nowrap;
	width: 100%;
	margin: 0;
}

.native-table th,
.native-table td {
	padding: 12px 15px;
	text-align: left;
	height: var(--table-row-height);
	box-sizing: border-box;
	vertical-align: middle;
	line-height: 1.4;
}

.native-table th {
	position: sticky;
	top: 0;
	z-index: 5;
}

.cell-content {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	line-height: 1.4;
}

/* ui-new-table 表头前端排序 */
.th-sort-inner {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
}

.th-sort-label {
	overflow: hidden;
	text-overflow: ellipsis;
}

.th-sort-carets {
	display: inline-flex;
	flex-direction: column;
	line-height: 0.65;
	font-size: 9px;
	color: #c0c4cc;
	flex-shrink: 0;
}

.th-sort-caret {
	display: block;
	transform: scale(0.85);
}

.th-sort-caret.is-active {
	color: #409eff;
	font-weight: bold;
}

.action-buttons {
	display: flex;
	gap: 8px;
	justify-content: flex-start;
}

.action-btn {
	padding: 6px 12px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	transition: all 0.3s;
	white-space: nowrap;
	min-width: 50px;
}

.action-btn:hover {
	opacity: 0.8;
	transform: translateY(-1px);
}

.empty-row {
	height: var(--table-row-height);
}

.empty-cell {
	text-align: center;
	color: #909399;
	font-size: 14px;
	background: white !important;
}

.empty-content {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}

/* 斑马线模板优化 */
.table-wrapper.zebra-stripe {
	border: 1px solid var(--body-border-color);
}

.table-wrapper.zebra-stripe .native-table {
	border: none;
}

.table-wrapper.zebra-stripe .first-row td {
	background-color: var(--first-row-color);
	color: var(--body-text-color);
	border-bottom: 1px solid var(--body-border-color);
}

.table-wrapper.zebra-stripe .second-row td {
	background-color: var(--second-row-color);
	color: var(--body-text-color);
	border-bottom: 1px solid var(--body-border-color);
}

.table-wrapper.zebra-stripe .native-table th {
	background-color: var(--header-bg-color);
	color: var(--header-text-color);
	border-bottom: 2px solid var(--header-border-color);
}



/* 方格模板优化 */
.table-wrapper.grid-square {
	border: none;
	background-color: var(--outer-border-color);
}

.table-wrapper.grid-square .native-table {
	border: none;
	border-collapse: collapse;
	background-color: white;
}

.table-wrapper.grid-square .native-table th {
	border: 1px solid var(--cell-border-color);
	border-bottom: 1px solid var(--outer-border-color);
	background-color: var(--header-bg-color);
	color: var(--header-text-color);
}

.table-wrapper.grid-square .native-table td {
	border: 1px solid var(--cell-border-color);
	background-color: white;
}

.table-wrapper.grid-square .first-row td {
	background-color: var(--first-row-color);
}

.table-wrapper.grid-square .second-row td {
	background-color: var(--second-row-color);
}



/* 滚动条样式优化 */
.scroll-area::-webkit-scrollbar {
	height: 8px;
	width: 8px;
}

.scroll-area::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
}

.scroll-area::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 4px;
}

.scroll-area::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}

/* 分页器样式优化 */
.pagination-container {
	margin-top: 15px;
	text-align: left;
	padding: 10px 0;
}

.pagination-container .el-pagination {
	display: inline-block;
}

.color-sky-blue {
	color: #409EFF;
	cursor: pointer;
	text-decoration: underline;
}

.color-sky-blue:hover {
	color: #66b1ff;
}





.subtitle {
	text-align: center;
	margin-bottom: 30px;
	color: #646566;
	font-size: 1.1rem;
}

.demo-section {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 40px;
	justify-content: center;
}

.demo-card {
	background: #f7f8fa;
	border-radius: 12px;
	padding: 25px;
	flex: 1;
	min-width: 250px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease;
}

.demo-card:hover {
	transform: translateY(-5px);
}

.demo-card h3 {
	margin-bottom: 15px;
	color: #323233;
	font-weight: 500;
}

.result-section {
	background: #f7f8fa;
	border-radius: 10px;
	padding: 20px;
	margin-top: 30px;
	border: 1px solid #ebedf0;
}

.result-section h3 {
	margin-bottom: 10px;
	color: #323233;
}

#selection-result {
	background: white;
	padding: 15px;
	border-radius: 8px;
	min-height: 50px;
	font-family: 'Courier New', monospace;
	color: #1989fa;
	border: 1px solid #e0e0e0;
}

.features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-top: 40px;
}

.feature-card {
	background: white;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	text-align: center;
	border: 1px solid #f0f0f0;
}

.feature-card i {
	font-size: 2rem;
	color: #1989fa;
	margin-bottom: 15px;
}

.feature-card h3 {
	margin-bottom: 10px;
	color: #323233;
	font-weight: 500;
}

.feature-card p {
	color: #646566;
	font-size: 0.9rem;
	line-height: 1.5;
}

.code-example {
	background: #f7f8fa;
	border-radius: 8px;
	padding: 20px;
	margin-top: 30px;
	font-family: 'Courier New', monospace;
	font-size: 14px;
	line-height: 1.5;
	overflow-x: auto;
	border: 1px solid #ebedf0;
}

/* 自定义样式 */
.search-input-container {
	position: relative;
}

.search-input-actions {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	gap: 5px;
}

.search-dropdown-container {
	margin-top: 4px;
}

.search-dropdown-loading {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 4px;
	padding: 8px 12px;
}

.search-dropdown {
	background: white;
	border: 1px solid #e9ecef;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	max-height: 200px;
	overflow-y: auto;
}

.dropdown-options {
	max-height: 200px;
	overflow-y: auto;
}

.dropdown-option {
	padding: 10px 12px;
	font-size: 14px;
	color: #495057;
	cursor: pointer;
	transition: background-color 0.2s;
	border-bottom: 1px solid #f8f9fa;
}

.dropdown-option:hover {
	background-color: #f8f9fa;
}

.dropdown-option-selected {
	background-color: #e6f7ff;
	color: #1890ff;
}

.dropdown-empty {
	padding: 20px;
	text-align: center;
	color: #6c757d;
	font-size: 14px;
}

.error-container {
	border-color: #f56c6c !important;
}

.error-message {
	color: #f56c6c;
	font-size: 12px;
	margin-top: 4px;
	min-height: 18px;
}

@media (max-width: 768px) {
	.demo-section {
		flex-direction: column;
	}

	.demo-card {
		min-width: 100%;
	}

	.features {
		grid-template-columns: 1fr;
	}
}



/* 原生dialog样式增强 */
.native-dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	z-index: 9999;
	border: none;
	border-radius: 8px;
}

/* 对话框背景遮罩 */
.native-dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

/* 兼容不支持::backdrop的浏览器 */
.dialog-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9998;
}

/* 响应式调整 */
@media (max-width: 768px) {
	.native-dialog {
		width: 95% !important;
		height: 90% !important;
		max-width: none !important;
	}
}

/* 按钮组样式 */
.ui-new-button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px;
}

.edit-btn-group {
	display: flex;
	gap: 4px;
	align-items: center;
}

/* 自定义样式 */
.dialog-header {
	padding: 16px;
	border-bottom: 1px solid #f0f0f0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.dialog-footer {
	padding: 10px 16px;
	border-top: 1px solid #f0f0f0;
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	align-items: center;
}

.passwordInp {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
}

.promptTitle {
	color: #f56c6c;
	margin-bottom: 16px;
	font-size: 14px;
}

.fx-center {
	display: flex;
	justify-content: center;
}

.fx-start {
	display: flex;
	align-items: center;
}

.mb-16 {
	margin-bottom: 16px;
}

.mt-40 {
	margin-top: 40px;
}

.wid68 {
	width: 68px;
}

.hei24 {
	height: 24px;
}

.lh24 {
	line-height: 24px;
}

.back-red {
	background: #f56c6c;
}

.back-che-blue {
	background: #409eff;
}

.color-eee {
	color: #eee;
}

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

.p-5 {
	padding: 5px;
}

.border-radius-4 {
	border-radius: 4px;
}

.mr-6 {
	margin-right: 6px;
}

.border-0 {
	border: 0;
}

.inline-flex {
	display: inline-flex;
}

.items-center {
	align-items: center;
}

.gap-2 {
	gap: 8px;
}

.transition-all {
	transition: all 0.3s;
}

.opacity-50 {
	opacity: 0.5;
}

.cursor-not-allowed {
	cursor: not-allowed;
}

.mr-2 {
	margin-right: 8px;
}

.border-2 {
	border-width: 2px;
}

.border-dashed {
	border-style: dashed;
}

.border-current {
	border-color: currentColor;
}

.text-10px {
	font-size: 10px;
}

.px-1 {
	padding-left: 4px;
	padding-right: 4px;
}

.bg-white-30 {
	background: rgba(255, 255, 255, 0.3);
}

.rounded {
	border-radius: 4px;
}

.ml-1 {
	margin-left: 4px;
}

.bg-amber-500 {
	background-color: #f59e0b;
}

.text-white {
	color: white;
}

.hover-bg-amber-600:hover {
	background-color: #d97706;
}

.px-4 {
	padding-left: 16px;
	padding-right: 16px;
}

.py-2 {
	padding-top: 8px;
	padding-bottom: 8px;
}

.qrcode-hover-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s;
	border-radius: 4px;
	pointer-events: none;
}

.zoom-button {
	background: rgba(255, 255, 255, 0.9);
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
	pointer-events: auto;
}

.zoom-button:hover {
	background: white;
	transform: scale(1.1);
}

.close-button:hover {
	background: rgba(0, 0, 0, 0.05);
	color: #333;
}

.download-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
}

/* 确保表单回显字段显示为黑色 */
.ui-form-edit .van-field__control,
.ui-form-edit .van-field__value,
.ui-form-edit .form-display-text,
.ui-form-edit .ui-form-combox,
.ui-form-edit .ui-form-datetime,
.ui-form-edit .ui-form-textarea {
	color: #000000 !important;
}

/* 回显文本的特殊样式 */
.reverberation-text {
	color: #000000 !important;
	font-size: 14px;
	margin-top: 4px;
	padding: 4px 8px;
	background: #f8f9fa;
	border-radius: 4px;
}

.van-field--disabled .van-field__control:disabled {
	-webkit-text-fill-color: #999;
}

.disabled_color .van-field__control:disabled {
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}

.el-input__inner {
	background-color: transparent !important;
}

.disabled_color.input__inner {
	color: #000 !important;
}

.disabled_color .el-input__inner {
	color: #000 !important;
}



.el-radio-button__inner,
.el-radio-group {
	display: flex !important;
	flex-wrap: wrap !important;
	color: #000 !important;
}

.el-checkbox {
	color: #000 !important;
}

.el-radio {
	color: #000 !important;
}

.el-checkbox-group {
	display: flex !important;
	flex-wrap: wrap !important;
}

.ui-form-item.noBgc {
	background-color: transparent !important;
	border: none !important;
}

/* .van-field--disabled .van-field__control:disabled {
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
} */



/* 树形控件样式 */
.ui-from-tree {
	width: 100%;
	position: relative;
}


.tree-input {
	display: flex;
	align-items: center;
	padding: 10px 12px;
	cursor: pointer;
	min-height: 40px;
	text-align: left;
}

.tree-input:hover {
	border-color: #c0c4cc;
}

.tree-input-disabled {
	background-color: #f5f7fa;
	cursor: not-allowed;
}

.tree-input-content {
	flex: 1;
	color: #606266;
	font-size: 14px;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tree-input-placeholder {
	color: #c0c4cc;
}

.tree-input-actions {
	display: flex;
	align-items: center;
	margin-left: 8px;
}

.tree-clear {
	color: #c0c4cc;
	font-size: 16px;
	cursor: pointer;
	padding: 2px;
}

.tree-clear:hover {
	color: #909399;
}

.tree-disabled-icon {
	color: #c0c4cc;
	font-size: 14px;
}

.tree-arrow {
	color: #c0c4cc;
	font-size: 12px;
	transition: transform 0.3s;
}

.tree-disabled-text {
	color: #f56c6c;
	font-size: 12px;
	margin-top: 4px;
}

/* 弹出框样式 */
.tree-popup {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tree-popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px;
	border-bottom: 1px solid #f0f0f0;
}

.tree-popup-title {
	font-size: 16px;
	font-weight: 500;
	color: #303133;
}

.tree-popup-close {
	font-size: 20px;
	color: #909399;
	cursor: pointer;
	padding: 4px;
}

.tree-popup-close:hover {
	color: #303133;
}

.tree-popup-content {
	flex: 1;
	overflow-y: auto;
	padding: 8px 0;
}

/* 树节点样式 */
.tree-node {
	cursor: pointer;
	transition: background-color 0.2s;
}

.tree-node:hover {
	background-color: #f5f7fa;
}

.tree-node-disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.tree-node-disabled:hover {
	background-color: transparent;
}

.tree-node-selected {
	background-color: #ecf5ff;
	color: #409eff;
}

.tree-node-content {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	min-height: 36px;
}

.tree-node-icon {
	margin-right: 6px;
	font-size: 14px;
}

.tree-node-text {
	flex: 1;
	font-size: 14px;
	line-height: 1.4;
}

.tree-node-check {
	color: #409eff;
	font-weight: bold;
	margin-left: 6px;
}

.tree-empty {
	text-align: center;
	color: #909399;
	padding: 20px;
	font-size: 14px;
}

.tree-popup-footer {
	padding: 12px 15px;
	border-top: 1px solid #f0f0f0;
	background: #fff;
}


.qr-code-modal .van-dialog__message {
	overflow: hidden;
}


.mytext .show_text {
	text-align: var(--formLabelAlign);
}



.custom-time-picker {
	background: #fff;
	border-radius: 20px 20px 0 0;
	overflow: hidden;
}

.time-picker-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	border-bottom: 1px solid #ebedf0;
}

.time-picker-cancel,
.time-picker-confirm {
	font-size: 16px;
	color: #1989fa;
	cursor: pointer;
}

.time-picker-title {
	font-size: 16px;
	color: #323233;
	font-weight: 500;
}

.time-picker-body {
	position: relative;
	height: 220px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.time-column {
	flex: 1;
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.time-scroll-container {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: 88px 0;
}

.time-item {
	height: 44px;
	line-height: 44px;
	text-align: center;
	font-size: 18px;
	color: #969799;
	user-select: none;
}

.time-item.active {
	color: #323233;
	font-weight: 500;
}

.time-label {
	position: absolute;
	bottom: 20px;
	font-size: 14px;
	color: #969799;
}

.time-highlight {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 44px;
	margin-top: -22px;
	border-top: 1px solid #ebedf0;
	border-bottom: 1px solid #ebedf0;
	pointer-events: none;
	z-index: 1;
}

/* 隐藏滚动条 */
.time-scroll-container::-webkit-scrollbar {
	display: none;
}

.time-scroll-container {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

input.capitalLetters {
	text-transform: uppercase;
}

.van-field.capitalLetters input {
	text-transform: uppercase;
}

.img-preview-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	z-index: 100000 !important;
	/* 大幅提升并强制生效 */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 其余内部样式可保持不变，确保内部元素在遮罩层之上 */
.img-preview-container {
	position: relative;
	width: 100%;
	height: 100%;
}

.img-preview-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	color: #fff;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 100001;
	/* 比遮罩层稍高 */
}

.img-preview-main {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.img-preview-image {
	max-width: 90%;
	max-height: 90%;
	object-fit: contain;
}

.img-preview-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 28px;
	cursor: pointer;
	z-index: 100001;
}

.img-preview-arrow.left {
	left: 20px;
}

.img-preview-arrow.right {
	right: 20px;
}

.img-preview-index {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	background: rgba(0, 0, 0, 0.5);
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 14px;
	z-index: 100001;
}

.cursor-pointer {
	cursor: pointer;
}