* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 微软雅黑;

	font-size: calc(100vw / 375) * 1rem;
}

@font-face {
	font-family: "京華老宋體";
	/* 改成你字体实际路径 */
	src: url("../../../static/public/js/h5/font/webfonts/jhlst.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

html,
body {
	background: #eaeaea;
	font-size: 13rem;

}

html[data-theme='drak'] {
	--border-color-boundary: #e2e2e2;
	--bg-grey: #f5f6f7;
	--selectColor: #b4b4b4;
	--dialogTitleBg: #052c42;
	--dialogTitleColor: #fff;
}

html[data-theme='light'] {
	--border-color-boundary: #e2e2e2;
	--bg-grey: #f5f6f7;
	--selectColor: #b4b4b4;
	--dialogTitleBg: #000;
	--dialogTitleColor: #fff;
}

/*默认主题色*/
:root {
	--border-color-boundary: #e2e2e2;
	--selectColor: #b4b4b4;
	--bg-grey: #f5f6f7;
	--transparent: transparent;
	--dialogTitleBg: #052c42;
	--dialogTitleColor: #fff;
}

/*输入框*/
.ui-form-item input::placeholder {
	color: #c1c1c1;
}

.activeBg {
	background: var(--activebg);
}

.viewScroll-x {
	overflow-x: auto;
}

.viewScroll-y {
	overflow-y: auto;
}

.viewScroll-y::-webkit-scrollbar {
	background: transparent;
	/* 轨道的背景颜色 */
	border-radius: 3rem;
	/* 轨道的边框半径 */
	width: 0rem;
	height: 0rem;
}

.viewScroll-y::-webkit-scrollbar {
	width: 8rem;
	height: 0rem;
}

.viewScroll-y::-webkit-scrollbar-thumb {
	background: #aaaaaa;
	border-radius: 6rem;
}

.viewScroll-y::-webkit-scrollbar-track {
	background: transparent;
}

.viewScroll {
	overflow-x: auto;
	overflow-y: auto;
	/* overflow: auto; */

}

.viewScroll::-webkit-scrollbar {
	background: transparent;
	/* 轨道的背景颜色 */
	display: none;
	width: 0rem;
	height: 0rem;
}

.viewScroll:hover::-webkit-scrollbar {
	width: 8rem;
	height: 8rem;
}

.viewScroll::-webkit-scrollbar-thumb {
	background: #aaaaaa;
	border-radius: 6rem;
}

.viewScroll::-webkit-scrollbar-track {
	background: transparent;
}

.cursor {
	cursor: pointer;
}

.clearBoth {
	clear: both;
}

.clearfix:after {
	content: ' ';
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}


/* 自定义按钮 */
.customBox {
	width: 110rem;
	height: 30rem;
	line-height: 30rem;
	border-radius: 2rem;
	text-align: center;
}

/* 分页器 */

.page_box {
	width: 100%;
	padding: 8rem;
	background: #edeef2;
	display: flex;
	align-items: center;
	font-size: 14rem;
	box-sizing: border-box;
}

.page_box .go_size {
	width: 48rem;
}

.page_box .go_size .el-input__inner {
	padding-right: 8rem;
}

.page_box .el-select {
	width: 90rem;
	height: 24rem;
	margin-right: 8rem;
}

.page_box .el-input__inner {
	height: 24rem;
	line-height: 24rem;
	padding-left: 8rem;
	padding-right: 20rem;
	color: #000;
}

.page_box .el-input__suffix {
	right: 0;
	position: relative;
}

.page_box .el-input__icon {
	line-height: 24rem;
}

.page_box button {
	width: 24rem;
	height: 24rem;
	padding: 0;
	border-radius: 0;
	line-height: 24rem;
	border: 1rem solid #DEDEDE;
	background: linear-gradient(180deg, #FFFFFF 0%, #F3F3F3 100%);
}

.page_box .currtPage {
	display: inline-block;
	width: 84rem;
	height: 24rem;
	line-height: 22rem;
	border: 1rem solid #DEDEDE;
	border-left: none;
	border-right: none;
	box-sizing: border-box;
	text-align: center;
}

.page_box .sanjiao {
	width: 0rem;
	height: 0rem;
	border-width: 6rem;
	margin-right: 6rem;
	border-style: solid;
	border-color: transparent #000 transparent transparent;
}

.page_box .el-icon-arrow-up::before {
	display: none;
}

.page_box .el-icon-arrow-up {
	width: 0rem;
	height: 0rem;
	border-width: 4rem;
	/* margin-right: 4rem;
    margin-top: 10rem; */
	position: absolute;
	top: 8rem;
	right: 6rem;

	border-style: solid;
	border-color: transparent transparent #000 transparent;
}

.page_box .el-select .el-input .el-select__caret.is-reverse {
	transform: rotate(360deg);
	/* margin-top: 6rem; */
	top: 4rem;
}

.page_box .sanjiao1 {
	width: 0rem;
	height: 0rem;
	border-width: 6rem;
	margin-left: 6rem;
	border-style: solid;
	border-color: transparent transparent transparent #000;
}


.viewMain {
	--vmLabelWidth: 120;
	height: 100%;
	position: relative;
	/* overflow-x: hidden; */
}

.ui-form-item {
	word-wrap: break-word;
	/* padding: 0 15rem; */
	min-height: 30rem;
	box-sizing: border-box;
}

.img-inner-box:hover .img-inner-del-icon {
	display: block;
}

.img-inner-del-icon {
	width: 24rem;
	height: 24rem;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
}

.img-inner-del-icon img {
	width: 100%;
	height: 100%;
	/* display: block; */
}

/* 懒加载样式 */
/* 成功提示 */
/* 失败提示 */
.customClass {
	padding: 8rem;
	width: fit-content;
	top: 48% !important;
	color: #fff;
	min-width: revert;
}


/* 必填 */
.requsetBefore::before {
	content: "*";
	color: #f56c6c;
	margin-right: 4rem;
}

.drawerClass {
	--drawerInnerHeight: 46rem;
}

.el-drawer__header {
	height: 36rem;
	line-height: 36rem;
	background-color: var(--dialogTitleBg);
	border-bottom: 1rem solid #b4b4b4;
	color: var(--dialogTitleColor);
	padding: 0 10rem;
	margin-bottom: 0;
}

.drawerInnerBox-body {
	height: calc(100% - var(--drawerInnerHeight));
}

.drawerInnerBox-btn {
	border-top: 1rem solid #e4e7ed;
	height: var(--drawerInnerHeight);
}

/* 弹窗 */
.customDialog {
	margin: auto !important;
}

.customDialog .el-dialog__header {
	display: none;
}

.customDialog .el-dialog__body {
	padding: 0;
}


.customDialog .customDialogBox {
	width: 100%;
	height: 0;
	padding-bottom: 60%;
	position: relative;
}

.customDialog .customDialogInner {
	position: absolute;
	inset: 0;
}

.customDialog .customDialogHeader {
	height: 36rem;
	line-height: 36rem;
	background-color: var(--dialogTitleBg);
	border-bottom: 1rem solid #b4b4b4;
	color: var(--dialogTitleColor);
	padding: 0 10rem;

}

.customDialog .customDialogHeader .el-icon-close:hover {
	color: red;
}

.customDialog .customDialogBody {
	height: calc(100% - 76rem);
}

.customDialog .customDialogFooter {
	height: 40rem;
	border-top: 1rem solid #e4e7ed;
	color: var(--dialogTitleColor);
	padding: 6rem 10rem;
}

.customDialog .customDialogFooter>div {
	width: fit-content;
	background-color: #00aaff;
	margin: 0 5rem;
	height: 28rem;
	line-height: 28rem;
	padding: 0 10rem;
	font-size: 13rem;
	letter-spacing: 2rem;
	border-radius: 2rem;
}

/* 折叠面板样式 */
.flexTitle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 90%;
	padding: 0rem 5rem;
}

.lineFlow {
	display: flex;
	margin-top: 10rem;
}

.titles {
	width: 90rem;
	text-align: end;
}

.flowContent {
	background-color: #f2f2f2;
	padding: 0rem 10rem;
	border-radius: 2rem;
	border: 1rem solid #ced4da;
	line-height: 27rem;
	width: calc(100% - 100rem);
}

.iconSty {
	width: 10rem;
	height: 10rem;
	border-radius: 50%;
	background-color: #c0c4cc;
	position: absolute;
	top: 7rem;
	left: -6rem;
}

.collapseSty {
	padding: 3rem 10rem;
	margin-left: 10rem;
	position: relative;

}

.flowButton {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 25rem;
}

.buttonSty {
	padding: 0rem;
	width: 55rem;
	height: 25rem;
	text-align: center;
	line-height: 25rem;
}

.resourcesTabs {
	width: 95%;
	/* padding: 10rem; */
	margin: auto;
	/* border: 1rem solid red;
	border-radius: 4px; */
	/* position: relative; */
	border: 1rem solid #f1f1f1;
	border-radius: 4px;
	padding: 4rem;
}

.resourcesTabs_sub {
	background-color: #ededed;
}

.resourcesTabs_subFox {
	background-color: #f1f1f1;
}

/* vant样式修改 */
/* 修改分页按钮的背景色 */
.van-pagination__item {
	background-color: #f0f8ff;
	/* 按钮背景色 */
	color: #333;
	/* 文字颜色 */
}

/* 修改当前激活的分页按钮样式 */
.van-pagination__item--active {
	background-color: rgba(39, 110, 81, 1);
	/* 激活按钮背景色 */
	color: #fff;
	/* 激活按钮文字颜色 */

}

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

/* 验证码组件包装容器样式 */
.verification-code-wrapper {
	width: 100%;
}

/* 验证码行样式 - 独立一行 */
.verification-code-row {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin: 0;
	background: #fff;
}

/* 验证码行内联布局 */
.verification-code-row>.verification-inline {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 8px;
}

.btn-condition-disabled {
	background-color: #dfe1e6 !important;
	color: rgb(255, 255, 255) !important;
	cursor: not-allowed !important;
}


/* ===== 原生输入组件基础样式 ===== */
/* 与 ComponentRenderer.vue 保持一致 */
.native-input {
	width: 100%;
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.2s;
	font-size: 14px;
	line-height: 1.5;
}

.native-input:focus {
	border-color: #409eff;
}

.native-input:disabled {
	background-color: rgb(245, 245, 245) !important;
	cursor: not-allowed;
}

.native-textarea {
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 8px 12px;
	width: 100%;
	box-sizing: border-box;
	outline: none;
	resize: vertical;
	font-family: inherit;
	transition: border-color 0.2s;
	font-size: 14px;
	line-height: 1.5;
	background-color: #fff;
}

.native-textarea:focus {
	border-color: #409eff;
}

.native-textarea:disabled {
	background-color: #f5f5f5;
	cursor: not-allowed;
	opacity: 0.6;
}

/* placeholder 颜色 */
.native-input::placeholder {
	color: var(--placeholder-color) !important;
	opacity: 1 !important;
	/* Firefox 浏览器默认 opacity 较低，这条规则可以修正它 */
}

.capitalLetters {
	text-transform: uppercase;
}



/* ===== 下拉/单选/复选组件原生化样式 ===== */

/* 下拉容器 */
.select-container {
	position: relative;
	width: 100%;
}

/* 下拉触发器 */
.native-select-wrapper {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	box-sizing: border-box;
	cursor: pointer;
	background-color: #fff;
}

/* 多选标签 */
.select-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	flex: 1;
	min-width: 0;
}

.select-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 6px;
	background-color: #f0f2f5;
	border-radius: 4px;
	font-size: 12px;
	color: #606266;
}

.tag-close {
	cursor: pointer;
	color: #909399;
	font-size: 14px;
	line-height: 1;
}

.tag-close:hover {
	color: #f56c6c;
}

/* placeholder 文字 */
.select-placeholder {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--placeholder-color) !important;
	opacity: 1 !important;
}

.select-placeholder.has-value {
	color: #606266;
}

/* 箭头/清除按钮 */
.select-suffix {
	display: flex;
	align-items: center;
	margin-left: 8px;
	flex-shrink: 0;

}

.clear-btn {
	cursor: pointer;
	color: #c0c4cc;
	font-size: 16px;
	margin-right: 4px;
}

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

.arrow-icon {
	font-size: 10px;
	color: var(--placeholder-color) !important;
	opacity: 1 !important;
	transition: transform 0.2s;
}

.arrow-icon.open {
	transform: rotate(180deg);
}

.combox-dropdown-panel {
	box-sizing: border-box;
	background-color: #ffffff;
	border: 1px solid #ebeef5;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	z-index: 20000;
	/* 修复：强制 GPU 渲染，防止 iOS 裁剪 */
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform;
	-webkit-overflow-scrolling: touch;
}

.combox-dropdown-panel .dropdown-search {
	padding: 8px 12px;
	background-color: #ffffff;
	border-bottom: 1px solid #ebeef5;
	box-sizing: border-box;
}

.combox-dropdown-panel .dropdown-search-input {
	width: 100%;
	height: 32px;
	padding: 0 10px;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	font-size: 14px;
	line-height: 32px;
	color: #303133;
	background-color: #ffffff;
	box-sizing: border-box;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.combox-dropdown-panel .dropdown-search-input:focus {
	border-color: #1989fa;
}

.combox-dropdown-panel .dropdown-loading {
	padding: 16px;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
	color: #909399;
	background-color: #ffffff;
}

.combox-dropdown-panel .dropdown-options {
	flex: 1;
	min-height: 0;
	overflow: visible;
	background-color: #ffffff;
	/* 修复：防止 iOS 裁剪 */
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform;
}

.combox-dropdown-panel .dropdown-options::-webkit-scrollbar {
	width: 6px;
}

.combox-dropdown-panel .dropdown-options::-webkit-scrollbar-thumb {
	background-color: #dcdfe6;
	border-radius: 3px;
}

.combox-dropdown-panel .dropdown-option {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	padding: 10px 16px;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: #303133;
	background-color: #ffffff;
	cursor: pointer;
	box-sizing: border-box;
	border: none;
	border-bottom: 1px solid #f5f7fa;
	transition: background-color 0.15s, color 0.15s;
	/* 修复 iOS 渲染 */
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

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

.combox-dropdown-panel .dropdown-option:active {
	background-color: #f5f7fa;
}

.combox-dropdown-panel .dropdown-option.selected {
	color: #1989fa;
	background-color: #ecf5ff;
}

.combox-dropdown-panel .dropdown-option .option-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	color: inherit;
}

.combox-dropdown-panel .dropdown-option .option-check {
	flex-shrink: 0;
	font-size: 14px;
	color: #1989fa;
}

.combox-dropdown-panel .dropdown-option .checkbox-fake {
	width: 16px;
	height: 16px;
	border: 1px solid #dcdfe6;
	border-radius: 2px;
	background-color: #ffffff;
	flex-shrink: 0;
	position: relative;
	box-sizing: border-box;
}

.combox-dropdown-panel .dropdown-option .checkbox-fake.checked {
	background-color: #1989fa;
	border-color: #1989fa;
}

.combox-dropdown-panel .dropdown-option .checkbox-fake.checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 2px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.combox-dropdown-panel .dropdown-empty {
	padding: 24px 16px;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
	color: #909399;
	background-color: #ffffff;
}

/* ===== 原生 radio 样式 ===== */
.radio-group-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.native-radio-label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	color: #606266;
	user-select: none;
}

.native-radio-label.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.native-radio {
	display: none;
}

.radio-fake {
	width: 16px;
	height: 16px;
	border: 1px solid #dcdfe6;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s, background 0.2s;
}

.native-radio:checked+.radio-fake {
	border-color: #1989fa;
	background: #1989fa;
}

.native-radio:checked+.radio-fake::after {
	content: '';
	width: 6px;
	height: 6px;
	background: #fff;
	border-radius: 50%;
}

.native-radio:disabled+.radio-fake {
	background-color: #f5f7fa;
	border-color: #dcdfe6;
}

.radio-text {
	flex: 1;
}

/* ===== 原生 checkbox 样式 ===== */
.checkbox-group-container {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.native-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	color: #606266;
	user-select: none;
}

.native-checkbox-label.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.native-checkbox {
	display: none;
}

.checkbox-fake {
	width: 16px;
	height: 16px;
	border: 1px solid #dcdfe6;
	border-radius: 3px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s, background 0.2s;
	background: #fff;
}

.checkbox-fake.checked {
	border-color: #1989fa;
	background: #1989fa;
}

.checkbox-fake.checked::after {
	content: '✓';
	color: #fff;
	font-size: 10px;
	line-height: 1;
}

.native-checkbox:disabled+.checkbox-fake {
	background-color: rgb(245, 245, 245) !important;
	border-color: #dcdfe6;
}

.checkbox-text {
	flex: 1;
}

/* 禁用态 input */
.combox-disabled-input {
	background-color: rgb(245, 245, 245) !important;
	color: #909399;
}

/* 加载提示 */
.loading-indicator {
	font-size: 12px;
	color: #909399;
	padding: 4px 0;
}



.tree-input-disabled {
	background-color: rgb(245, 245, 245) !important;
	cursor: not-allowed;

}

/* 覆盖 Edge/Chrome 自动填充默认样式（:-internal-autofill-selected / :-webkit-autofill） */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-internal-autofill-selected,
input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
	box-shadow: 0 0 0 1000px #ffffff inset !important;
	-webkit-text-fill-color: #303133 !important;
	caret-color: #303133;
	transition: background-color 99999s ease-out 0s;
}

.combox-disabled-input:-webkit-autofill,
.combox-disabled-input:-internal-autofill-selected,
.combox-disabled-input:autofill,
.tree-input-disabled input:-webkit-autofill,
.tree-input-disabled input:-internal-autofill-selected,
.tree-input-disabled input:autofill {
	-webkit-box-shadow: 0 0 0 1000px #f5f7fa inset !important;
	box-shadow: 0 0 0 1000px #f5f7fa inset !important;
	-webkit-text-fill-color: #909399 !important;
}



.file-upload-component {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
	color: #1f2937;
}

.file-upload-component .file-list {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.file-upload-component .file-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.file-upload-component .file-icon {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: #edf6f8;
	color: #297480;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.file-upload-component .file-icon-image {
	background: #eef7ee;
	color: #2f7d4f;
}

.file-upload-component .file-icon-doc,
.file-upload-component .file-icon-file {
	background: #edf6f8;
	color: #297480;
}

.file-upload-component .file-icon-sheet {
	background: #eff8f2;
	color: #238047;
}

.file-upload-component .file-icon-slide {
	background: #fff4e8;
	color: #bd5b00;
}

.file-upload-component .file-icon-zip {
	background: #f4f1fb;
	color: #6b46a3;
}

.file-upload-component .file-info {
	min-width: 0;
	flex: 1;
}

.file-upload-component .file-name {
	color: #111827;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	word-break: break-all;
	overflow-wrap: anywhere;
}

.file-upload-component .file-meta {
	margin-top: 3px;
	color: #6b7280;
	font-size: 11px;
	line-height: 1.2;
}

/* 下拉菜单 */
.file-upload-component .file-dropdown {
	position: relative;
	flex-shrink: 0;
}

.file-upload-component .dropdown-trigger {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f3f4f6;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.file-upload-component .dropdown-trigger span {
	font-size: 18px;
	font-weight: bold;
	color: #6b7280;
	line-height: 1;
}

.file-upload-component .dropdown-trigger:active {
	background: #e5e7eb;
}

.file-upload-component .dropdown-menu {
	position: absolute;
	right: 0;
	top: 100%;
	margin-top: 4px;
	min-width: 80px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 100;
	overflow: hidden;
}

.file-upload-component .dropdown-item {
	padding: 10px 16px;
	font-size: 14px;
	color: #374151;
	text-align: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.file-upload-component .dropdown-item:active {
	background: #f3f4f6;
}

.file-upload-component .dropdown-item.delete {
	color: #c2413b;
	border-top: 1px solid #f3f4f6;
}

.file-upload-component .dropdown-item.delete:active {
	background: #fef2f2;
}

.file-upload-component .file-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.file-upload-component .action-btn {
	min-width: 56px;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	background: #f8fafc;
	color: #297480;
	border: 1px solid #cfe3e7;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.file-upload-component .action-btn:active {
	background: #e8f3f5;
	transform: scale(0.98);
}

.file-upload-component .action-btn.delete {
	color: #c2413b;
	border-color: #f0c8c5;
	background: #fff8f7;
}

.file-upload-component .action-btn.delete:active {
	background: #fdecea;
}

.file-upload-component .upload-trigger-area {
	width: 100%;
	min-height: 56px;
	padding: 10px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f7fbfc;
	border: 1px dashed #8dbec5;
	border-radius: 8px;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

.file-upload-component .upload-trigger-area.has-files {
	min-height: 48px;
}

.file-upload-component .upload-trigger-area.is-uploading {
	background: #f3f4f6;
	border-color: #d1d5db;
}

.file-upload-component .upload-placeholder {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #297480;
	text-align: left;
}

.file-upload-component .upload-placeholder i {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #e8f3f5;
	font-size: 16px;
}

.file-upload-component .upload-copy {
	min-width: 0;
}

.file-upload-component .upload-text {
	color: #1f5962;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.file-upload-component .upload-hint {
	margin-top: 3px;
	color: #6b7280;
	font-size: 11px;
	line-height: 1.25;
}

.file-upload-component .upload-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	padding: 6px 10px;
	background: #eef7f8;
	color: #297480;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1;
}

.file-upload-component .preview-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background: rgba(17, 24, 39, 0.72);
}

.file-upload-component .preview-modal-content {
	width: 100%;
	max-width: 720px;
	height: min(86vh, 720px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
}

.file-upload-component .preview-modal-header {
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-bottom: 1px solid #e5e7eb;
	background: #fff;
	flex-shrink: 0;
}

.file-upload-component .preview-modal-title {
	min-width: 0;
	color: #111827;
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.file-upload-component .preview-modal-close {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4b5563;
	border-radius: 50%;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.file-upload-component .preview-modal-close:active {
	background: #f3f4f6;
}

.file-upload-component .preview-modal-body {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	background: #f3f4f6;
}

.file-upload-component .preview-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: #4b5563;
	font-size: 14px;
}

.file-upload-component .preview-loading i {
	font-size: 30px;
	color: #297480;
}

.file-upload-component .preview-image {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.file-upload-component .preview-iframe {
	width: 100%;
	height: 100%;
	min-height: 420px;
	border: none;
	background: #fff;
}

.file-upload-component .preview-unsupported {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: #6b7280;
}

.file-upload-component .preview-unsupported i {
	font-size: 48px;
	color: #9ca3af;
}

.file-upload-component .preview-unsupported p {
	margin: 0;
	font-size: 14px;
}

.file-upload-component .preview-download-link {
	color: #297480;
	text-decoration: none;
	font-size: 14px;
	padding: 8px 14px;
	border: 1px solid #8dbec5;
	border-radius: 6px;
}

.file-upload-component .preview-download-link:active {
	background: #e8f3f5;
}

.file-upload-component .preview-empty {
	color: #6b7280;
	font-size: 14px;
}

@media (max-width: 480px) {
	.file-upload-component .file-item {
		padding: 9px;
		gap: 9px;
	}

	.file-upload-component .file-icon {
		width: 36px;
		height: 36px;
		flex-basis: 36px;
	}

	.file-upload-component .action-btn {
		min-width: 54px;
		min-height: 34px;
		padding: 0 10px;
	}

	.file-upload-component .preview-modal-overlay {
		align-items: flex-end;
		padding: 0;
	}

	.file-upload-component .preview-modal-content {
		max-width: none;
		width: 100vw;
		height: 92vh;
		border-radius: 8px 8px 0 0;
	}

	.file-upload-component .preview-iframe {
		min-height: 0;
	}
}

.file-preview-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.preview-btn {
	padding: 4px 8px;
	border: none;
	background: #e6a23c;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
}

.preview-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.preview-modal-content {
	width: 90%;
	height: 80%;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
}

.preview-modal-header {
	height: 44px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #eee;
}

.preview-modal-body {
	height: calc(100% - 44px);
}

.preview-iframe {
	width: 100%;
	height: 100%;
}