/* 인증 모달 스타일 */
	.auth-modal {
		display: none;
		position: fixed;
		z-index: 10000;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		align-items: center;
		justify-content: center;
		overflow-y: auto;
		padding: 20px;
	}

	.auth-modal-content {
		position: relative;
		background-color: #fff;
		margin: auto;
		padding: 30px;
		border-radius: 12px;
		width: 90%;
		max-width: 440px;
		max-height: 90vh;
		overflow-y: auto;
		animation: modalFadeIn 0.3s;
	}

	.auth-modal-large {
		max-width: 600px;
	}

	.auth-modal-close {
		position: absolute;
		right: 20px;
		top: 20px;
		font-size: 32px;
		font-weight: bold;
		color: #999;
		cursor: pointer;
		line-height: 1;
		z-index: 10;
		transition: color 0.3s;
	}

	.auth-modal-close:hover,
	.auth-modal-close:focus {
		color: #333;
		text-decoration: none;
	}

	@keyframes modalFadeIn {
		from {
			opacity: 0;
			transform: scale(0.9);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	/* 모달 내부 스타일 */
	.auth-modal-content #login,
	.auth-modal-content #login-box {
		margin: 0;
		padding: 0;
		width: 100%;
	}

	.auth-modal-content .logo {
		text-align: center;
		margin-bottom: 30px;
	}

	.auth-modal-content .logo img {
		max-width: 180px;
		height: auto;
	}

	/* 모달 내부 폼 스타일 */
	.auth-modal-content .required.field {
		margin-bottom: 15px;
	}

	.auth-modal-content .ui.fluid.input input {
		width: 100%;
		padding: 12px 15px;
		border: 1px solid #ddd;
		border-radius: 5px;
		font-size: 14px;
	}

	.auth-modal-content .login-btn,
	.auth-modal-content .join-btn {
		width: 100%;
		padding: 12px;
		margin-top: 10px;
		font-size: 16px;
		font-weight: 500;
		border-radius: 5px;
		cursor: pointer;
		transition: all 0.3s;
	}

	.auth-modal-content .join-input {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.auth-modal-content .join-input li {
		margin-bottom: 20px;
	}

	.auth-modal-content .join-input li strong {
		display: block;
		margin-bottom: 8px;
		font-size: 14px;
		font-weight: 500;
	}

	.auth-modal-content .join-input input,
	.auth-modal-content .join-input select {
		width: 100%;
		padding: 12px;
		border: 1px solid #ddd;
		border-radius: 5px;
		font-size: 14px;
	}

	.auth-modal-content .join-input .flex.li-years {
		display: flex;
		gap: 10px;
	}

	.auth-modal-content .join-input .flex.li-years select {
		flex: 1;
	}

	.auth-modal-content .sex {
		display: flex;
		gap: 15px;
	}

	.auth-modal-content .sex span {
		flex: 1;
	}

	/* 로딩 애니메이션 */
	.loader-circle {
		width: 40px;
		height: 40px;
		border: 4px solid #f3f3f3;
		border-top: 4px solid #f2507e;
		border-radius: 50%;
		margin: 0 auto;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	/* 다크모드 - 인증 모달 - 由统一弹窗样式覆盖 */

	body.dark-mode .loader-circle {
		border-color: #333;
		border-top-color: #f2507e;
	}

	/* 统一所有弹窗样式 */
	/* 基础弹窗遮罩层 */
	.modal {
		display: none;
		position: fixed;
		z-index: 99999999 !important;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		align-items: center;
		justify-content: center;
		overflow-y: auto;
		padding: 20px;
	}
	#main-popup,
	.file-popup,
	.flex-popup,
	.export-popup,
	.auth-modal {
		display: none;
		position: fixed;
		z-index: 10000;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		align-items: center;
		justify-content: center;
		overflow-y: auto;
		padding: 20px;
	}

	/* 兼容原来的 display: block 方式 - 将其转换为 flex */
	.modal[style*="display: block"],
	.modal[style*="display:block"] {
		display: flex !important;
	}

	/* 确保 display: none 能正常工作 */
	.modal[style*="display: none"],
	.modal[style*="display:none"] {
		display: none !important;
	}

	.modal.active {
		display: flex !important;
		z-index: 99999999 !important;
	}
	#main-popup.active,
	.file-popup.active,
	.flex-popup.active,
	.export-popup.active,
	.auth-modal.active {
		display: flex;
	}

	/* 统一弹窗内容框 */
	.modal-content {
		position: relative;
		background-color: #fff;
		margin: auto;
		padding: 30px;
		border-radius: 12px;
		width: 90%;
		max-width: 500px;
		max-height: 90vh;
		overflow-y: auto;
		animation: modalFadeIn 0.3s;
		z-index: 99999999 !important;
	}
	.main-popup-box,
	.file-popup-box,
	.flex-popup-con,
	.export-popup-con,
	.auth-modal-content {
		position: relative;
		background-color: #fff;
		margin: auto;
		padding: 30px;
		border-radius: 12px;
		width: 90%;
		max-width: 500px;
		max-height: 90vh;
		overflow-y: auto;
		animation: modalFadeIn 0.3s;
	}

	.main-popup-box {
		max-width: 640px;
	}

	.file-popup-box {
		max-width: 310px;
	}

	.flex-popup-con,
	.export-popup-con {
		max-width: 500px;
		padding: 0.75rem 24px;
	}

	/* 统一关闭按钮 */
	.close,
	.auth-modal-close,
	.file-close,
	.close-icon {
		position: absolute;
		right: 20px;
		top: 20px;
		font-size: 32px;
		font-weight: bold;
		color: #999;
		cursor: pointer;
		line-height: 1;
		z-index: 10;
		transition: color 0.3s;
		background: none;
		border: none;
		padding: 0;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		user-select: none;
		-webkit-user-select: none;
	}

	/* f-header 内的关闭按钮 */
	.f-header .close {
		position: absolute;
		right: 24px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 28px;
		line-height: 1;
		padding: 0;
		margin: 0;
		cursor: pointer;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}

	/* 兼容原来的 float 定位方式 - 确保关闭按钮可点击 */
	.modal-content {
		position: relative;
	}

	.modal-content .close {
		position: absolute;
		right: 20px;
		top: 20px;
		float: none;
		pointer-events: auto;
		opacity: 1;
		z-index: 10001;
		cursor: pointer;
	}

	/* 确保关闭按钮在 hover 时也有正确的样式 */
	.modal-content .close:hover,
	.modal-content .close:focus {
		color: #333;
		opacity: 1;
	}

	/* 确保 modal-button 按钮可以点击（支持链接形式） */
	.modal-content .modal-button {
		pointer-events: auto !important;
		cursor: pointer !important;
		z-index: 10;
		position: relative;
		display: inline-block;
		text-decoration: none;
		text-align: center;
	}
	
	/* 支持链接形式的关闭按钮 */
	.modal-content .close {
		text-decoration: none;
		color: #aaa;
	}
	
	.modal-content .close:hover {
		color: #333;
		text-decoration: none;
	}

	/* 确保 modal-footer 内的按钮可以点击 */
	.modal-footer {
		position: relative;
		z-index: 10;
	}

	.modal-footer .modal-button {
		pointer-events: auto !important;
		cursor: pointer !important;
	}

	.close:hover,
	.close:focus,
	.auth-modal-close:hover,
	.auth-modal-close:focus,
	.file-close:hover,
	.file-close:focus,
	.close-icon:hover,
	.close-icon:focus {
		color: #333;
		text-decoration: none;
	}

	/* 统一弹窗头部 */
	.modal-header,
	.f-header {
		font-size: 18px;
		font-weight: 700;
		line-height: 24px;
		color: #000;
		display: flex;
		padding: 0;
		align-items: center;
		height: 40px;
		margin-bottom: 20px;
		position: relative;
		justify-content: space-between;
	}

	/* 统一弹窗主体 */
	.modal-body {
		font-size: 15px;
		margin-bottom: 20px;
		color: #333;
		line-height: 1.6;
		word-break: keep-all;
		white-space: pre-line;
	}

	/* Modal 类型样式 */
	.modal.modal-success .modal-header {
		color: #43a047;
	}

	.modal.modal-error .modal-header {
		color: #e53935;
	}

	.modal.modal-warning .modal-header {
		color: #f57c00;
	}

	.modal.modal-info .modal-header {
		color: #2196f3;
	}


	/* 统一弹窗底部 */
	.modal-footer {
		display: flex;
		justify-content: center;
		gap: 10px;
		margin-top: 20px;
	}

	/* 统一弹窗按钮 */
	.modal-button,
	.main-popup-box .btn-group button,
	.file-popup-box div > a {
		padding: 12px 24px;
		font-size: 15px;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		transition: all 0.3s;
		font-weight: 500;
	}

	.modal-button {
		background-color: #f2507e;
		color: #fff;
		pointer-events: auto !important;
		cursor: pointer !important;
		z-index: 10;
		position: relative;
		opacity: 1;
		-webkit-user-select: none;
		user-select: none;
	}

	.modal-button:hover {
		background-color: #e03d6a;
		transform: translateY(-1px);
	}

	.modal-button:active {
		transform: translateY(0);
	}

	.main-popup-box .btn-group button {
		flex: 1;
		height: 48px;
		color: #000;
		border: 1px solid #ddd;
		background: #fff;
	}

	.main-popup-box .btn-group button.btn-close {
		background-color: #f2507e;
		border-color: #f2507e;
		color: #fff;
		margin-left: 10px;
	}

	.main-popup-box .btn-group button.btn-close:hover {
		background-color: #e03d6a;
		border-color: #e03d6a;
	}

	.file-popup-box div > a {
		width: 135px;
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #333;
		border-radius: 8px;
		font-size: 14px;
		margin-top: 15px;
		color: #333;
		text-decoration: none;
	}

	.file-popup-box div > a:hover {
		background-color: #f5f5f5;
	}

	.file-btn a.btn-y {
		background: #f2507e;
		color: #fff;
		border-color: #f2507e !important;
	}

	.file-btn a.btn-y:hover {
		background: #e03d6a;
		border-color: #e03d6a !important;
	}

	/* 深色模式 - 统一弹窗样式 */
	body.dark-mode .modal,
	body.dark-mode #main-popup,
	body.dark-mode .file-popup,
	body.dark-mode .flex-popup,
	body.dark-mode .export-popup,
	body.dark-mode .auth-modal {
		background-color: rgba(0, 0, 0, 0.85);
	}

	body.dark-mode .modal-content,
	body.dark-mode .main-popup-box,
	body.dark-mode .file-popup-box,
	body.dark-mode .flex-popup-con,
	body.dark-mode .export-popup-con,
	body.dark-mode .auth-modal-content {
		background-color: #1a1a1a;
		color: #e0e0e0;
	}

	body.dark-mode .close,
	body.dark-mode .auth-modal-close,
	body.dark-mode .file-close,
	body.dark-mode .close-icon {
		color: #999;
	}

	body.dark-mode .close:hover,
	body.dark-mode .close:focus,
	body.dark-mode .auth-modal-close:hover,
	body.dark-mode .auth-modal-close:focus,
	body.dark-mode .file-close:hover,
	body.dark-mode .file-close:focus,
	body.dark-mode .close-icon:hover,
	body.dark-mode .close-icon:focus {
		color: #fff;
	}


	body.dark-mode .modal-header,
	body.dark-mode .f-header {
		color: #e0e0e0;
	}

	body.dark-mode .modal-body {
		color: #ccc;
	}

	/* 暗模式下的 Modal 类型样式 */
	body.dark-mode .modal.modal-success .modal-header {
		color: #66bb6a;
	}

	body.dark-mode .modal.modal-error .modal-header {
		color: #ef5350;
	}

	body.dark-mode .modal.modal-warning .modal-header {
		color: #ffa726;
	}

	body.dark-mode .modal.modal-info .modal-header {
		color: #42a5f5;
	}

	body.dark-mode .main-popup-box .btn-group button {
		background-color: #2a2a2a;
		border-color: #444;
		color: #e0e0e0;
	}

	body.dark-mode .main-popup-box .btn-group button:hover {
		background-color: #333;
	}

	body.dark-mode .main-popup-box .btn-group button.btn-close {
		background-color: #f2507e;
		border-color: #f2507e;
		color: #fff;
	}

	body.dark-mode .main-popup-box .btn-group button.btn-close:hover {
		background-color: #e03d6a;
		border-color: #e03d6a;
	}

	body.dark-mode .file-popup-box div > a {
		border-color: #444;
		color: #e0e0e0;
	}

	body.dark-mode .file-popup-box div > a:hover {
		background-color: #2a2a2a;
	}

	body.dark-mode .file-title {
		color: #e0e0e0;
		border-bottom-color: #444;
	}

	body.dark-mode .file-con {
		border-color: #444;
		background-color: #2a2a2a;
	}

	body.dark-mode .file-pop i {
		background-color: #f2507e;
		color: #fff;
	}

	/* 弹窗滚动条 */
	.modal-content::-webkit-scrollbar,
	.main-popup-box::-webkit-scrollbar,
	.file-popup-box::-webkit-scrollbar,
	.flex-popup-con::-webkit-scrollbar,
	.export-popup-con::-webkit-scrollbar,
	.auth-modal-content::-webkit-scrollbar {
		width: 6px;
	}

	.modal-content::-webkit-scrollbar-track,
	.main-popup-box::-webkit-scrollbar-track,
	.file-popup-box::-webkit-scrollbar-track,
	.flex-popup-con::-webkit-scrollbar-track,
	.export-popup-con::-webkit-scrollbar-track,
	.auth-modal-content::-webkit-scrollbar-track {
		background: transparent;
	}

	.modal-content::-webkit-scrollbar-thumb,
	.main-popup-box::-webkit-scrollbar-thumb,
	.file-popup-box::-webkit-scrollbar-thumb,
	.flex-popup-con::-webkit-scrollbar-thumb,
	.export-popup-con::-webkit-scrollbar-thumb,
	.auth-modal-content::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 3px;
	}

	body.dark-mode .modal-content::-webkit-scrollbar-thumb,
	body.dark-mode .main-popup-box::-webkit-scrollbar-thumb,
	body.dark-mode .file-popup-box::-webkit-scrollbar-thumb,
	body.dark-mode .flex-popup-con::-webkit-scrollbar-thumb,
	body.dark-mode .export-popup-con::-webkit-scrollbar-thumb,
	body.dark-mode .auth-modal-content::-webkit-scrollbar-thumb {
		background: #555;
	}

	body.dark-mode .modal-content::-webkit-scrollbar-thumb:hover,
	body.dark-mode .main-popup-box::-webkit-scrollbar-thumb:hover,
	body.dark-mode .file-popup-box::-webkit-scrollbar-thumb:hover,
	body.dark-mode .flex-popup-con::-webkit-scrollbar-thumb:hover,
	body.dark-mode .export-popup-con::-webkit-scrollbar-thumb:hover,
	body.dark-mode .auth-modal-content::-webkit-scrollbar-thumb:hover {
		background: #666;
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.modal-content,
		.main-popup-box,
		.file-popup-box,
		.flex-popup-con,
		.export-popup-con,
		.auth-modal-content {
			width: 95%;
			padding: 20px;
			max-height: 85vh;
		}
	}

	/* ========== TOP 랭킹 페이지优化样式 ========== */
	/* 直播光圈动画 - 优雅脉动 */
	@keyframes liveRingPulse {
		0%, 100% {
			transform: scale(1);
			opacity: 0.85;
			box-shadow: 0 0 8px rgba(247, 149, 51, 0.3), 0 0 16px rgba(239, 78, 123, 0.15);
		}
		50% {
			transform: scale(1.03);
			opacity: 1;
			box-shadow: 0 0 12px rgba(80, 115, 184, 0.4), 0 0 24px rgba(16, 152, 173, 0.2);
		}
	}

	/* 渐变色动画 - 更流畅 */
	@keyframes animatedgradient {
		0% { background-position: 0% 50%; }
		25% { background-position: 50% 100%; }
		50% { background-position: 100% 50%; }
		75% { background-position: 50% 0%; }
		100% { background-position: 0% 50%; }
	}

	/* 竖线浮动动画 - 更有节奏感 */
	@keyframes barFloat1 {
		0%, 100% { transform: scaleY(0.5); }
		50% { transform: scaleY(1); }
	}

	@keyframes barFloat2 {
		0%, 100% { transform: scaleY(0.85); }
		50% { transform: scaleY(0.55); }
	}

	@keyframes barFloat3 {
		0%, 100% { transform: scaleY(1); }
		50% { transform: scaleY(0.65); }
	}

	@keyframes barFloat4 {
		0%, 100% { transform: scaleY(0.65); }
		50% { transform: scaleY(0.9); }
	}

	@keyframes barFloat5 {
		0%, 100% { transform: scaleY(0.9); }
		50% { transform: scaleY(0.6); }
	}

	/* LIVE文字闪烁动画 - 柔和版 */
	@keyframes liveTextGlow {
		0%, 100% {
			text-shadow: 0 0 4px rgba(255, 255, 255, 0.6), 0 0 8px rgba(255, 59, 92, 0.4);
		}
		50% {
			text-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 16px rgba(255, 59, 92, 0.6), 0 0 24px rgba(255, 59, 92, 0.3);
		}
	}

	/* 直播容器 */
	.live-avatar-wrapper {
		position: relative;
		display: inline-block;
		transition: transform 0.3s ease;
		width: fit-content;
		overflow: visible;
	}

	.live-avatar-wrapper:hover {
		transform: scale(1.03);
	}

	/* 光圈效果 - 精致边框 */
	.live-ring {
		position: absolute;
		top: -3px;
		left: -3px;
		right: -3px;
		bottom: -3px;
		border-radius: 50%;
		background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
		background-size: 300% 300%;
		animation: animatedgradient 8s ease infinite, liveRingPulse 5s ease-in-out infinite;
		z-index: 0;
		opacity: 0.75;
		aspect-ratio: 1 / 1;
	}

	/* LIVE 标签 - 更立体 */
	.live-badge {
		position: absolute;
		bottom: -8px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(30, 30, 30, 0.95) 100%);
		padding: 4px 10px;
		border-radius: 15px;
		z-index: 2;
		box-shadow: 
			0 4px 15px rgba(0, 0, 0, 0.4),
			0 2px 8px rgba(242, 80, 126, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
		border: 1px solid rgba(242, 80, 126, 0.3);
	}

	/* 浮动竖线容器 */
	.live-bars {
		display: flex;
		align-items: flex-end;
		gap: 1.5px;
		margin-right: 6px;
		height: 9px;
	}

	/* 单个竖线 - 白色 */
	.live-bar {
		width: 0.8px;
		height: 9px;
		background: #ffffff;
		border-radius: 0.5px;
		box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
		transform-origin: bottom;
	}

	.live-bar:nth-child(1) { animation: barFloat1 0.9s ease-in-out infinite; }
	.live-bar:nth-child(2) { animation: barFloat2 1.1s ease-in-out infinite 0.15s; }
	.live-bar:nth-child(3) { animation: barFloat3 0.85s ease-in-out infinite 0.3s; }
	.live-bar:nth-child(4) { animation: barFloat4 1.05s ease-in-out infinite 0.45s; }
	.live-bar:nth-child(5) { animation: barFloat5 1.2s ease-in-out infinite 0.6s; }

	/* LIVE 文字 - 发光效果 */
	.live-text {
		color: #fff;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 1px;
		animation: liveTextGlow 2s ease-in-out infinite;
		text-transform: uppercase;
	}

	/* 图片样式 */
	.live-avatar-wrapper img {
		position: relative;
		z-index: 1;
		display: block;
		border-radius: 50%;
	}

	/* 大尺寸头像优化 */
	.popular-item .live-badge {
		bottom: -10px;
		padding: 5px 12px;
	}

	.popular-item .live-bars {
		height: 10px;
		gap: 2px;
	}

	.popular-item .live-bar {
		width: 1.2px;
		height: 10px;
		box-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
	}

	.popular-item .live-text {
		font-size: 12px;
		letter-spacing: 1.2px;
	}

	.popular-item .live-ring {
		top: -4px;
		left: -4px;
		right: -4px;
		bottom: -4px;
	}

	/* TOP 5 区域 */
	.top-rank-section {
		background-color: #121212;
		border-radius: 10px;
		padding: 20px;
		margin-bottom: 40px;
	}

	body.dark-mode .top-rank-section {
		background-color: #1a1a1a;
		border-color: #333;
	}

	.top-rank-section h2.ui.header {
		color: #fff;
		margin-bottom: 20px;
	}

	body.dark-mode .top-rank-section h2.ui.header {
		color: #e0e0e0;
	}

	/* 排行榜表格区域 */
	.rank-table-section {
		margin-top: 36px;
	}

	.rank-table-section h2.ui.header {
		margin-bottom: 20px;
	}

	body.dark-mode .rank-table-section h2.ui.header {
		color: #e0e0e0;
	}

	/* 表格样式优化 */
	.flx-table {
		width: 100%;
		border-collapse: collapse;
		background-color: #fff;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	body.dark-mode .flx-table {
		background-color: #1a1a1a;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	}

	.flx-table thead {
		background-color: #f0f1f2;
	}

	body.dark-mode .flx-table thead {
		background-color: #2a2a2a;
	}

	.flx-table thead th {
		padding: 15px;
		text-align: center;
		font-size: 14px;
		font-weight: 600;
		color: #666;
		border-bottom: 2px solid #e0e0e0;
	}

	body.dark-mode .flx-table thead th {
		color: #ccc;
		border-bottom-color: #444;
	}

	.flx-table thead th.left {
		text-align: left;
	}

	.flx-table tbody tr {
		border-bottom: 1px solid #f0f0f0;
		transition: background-color 0.3s;
	}

	.flx-table tbody tr:hover {
		background-color: #f8f9fa;
	}

	body.dark-mode .flx-table tbody tr {
		border-bottom-color: #333;
	}

	body.dark-mode .flx-table tbody tr:hover {
		background-color: #2a2a2a;
	}

	.flx-table tbody td {
		padding: 15px;
		vertical-align: middle;
	}

	/* 排名样式 */
	.ranking-number {
		font-size: 30px;
		font-weight: 700;
		color: #333;
		border-bottom: 1px solid #a1a1a1;
		padding-bottom: 5px;
		display: inline-block;
		min-width: 40px;
	}

	body.dark-mode .ranking-number {
		color: #e0e0e0;
		border-bottom-color: #555;
	}

	/* 排行榜头像区域 */
	.rank-avatar-cell {
		padding: 15px 0;
	}

	.rank-avatar-wrapper {
		display: flex;
		align-items: center;
		gap: 20px;
	}

	.rank-avatar-info {
		flex: 1;
		min-width: 0;
		text-align: left;
	}

	.rank-avatar-title {
		color: #000;
		font-size: 18px;
		font-weight: 500;
		margin-bottom: 5px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		transition: color 0.3s;
	}

	.rank-avatar-title:hover {
		color: #f2507e;
	}

	body.dark-mode .rank-avatar-title {
		color: #e0e0e0;
	}

	body.dark-mode .rank-avatar-title:hover {
		color: #f2507e;
	}

	.rank-avatar-subtitle {
		color: #000;
		font-size: 18px;
		font-weight: 500;
	}

	body.dark-mode .rank-avatar-subtitle {
		color: #ccc;
	}

	/* 数据卡片样式 */
	.data-card {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 64px;
		border-radius: 10px;
		flex-direction: column;
		transition: transform 0.3s, box-shadow 0.3s;
	}

	.data-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	body.dark-mode .data-card:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	}

	.data-card-viewer {
		background-color: rgb(233, 243, 251);
	}

	body.dark-mode .data-card-viewer {
		background-color: rgba(233, 243, 251, 0.15);
	}

	.data-card-rank {
		background-color: rgb(235, 247, 242);
	}

	body.dark-mode .data-card-rank {
		background-color: rgba(235, 247, 242, 0.15);
	}

	.data-card-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 21px;
		border-radius: 10px;
		height: 21px;
		margin-bottom: 5px;
	}

	.data-card-icon-viewer {
		background-color: rgb(157, 209, 249);
	}

	body.dark-mode .data-card-icon-viewer {
		background-color: rgba(157, 209, 249, 0.4);
	}

	.data-card-icon-rank {
		background-color: rgb(157, 223, 200);
	}

	body.dark-mode .data-card-icon-rank {
		background-color: rgba(157, 223, 200, 0.4);
	}

	.data-card-icon img {
		width: 12px;
		height: 12px;
	}

	.data-card-value {
		color: rgb(52, 108, 154);
		font-size: 14px;
		font-weight: 500;
	}

	body.dark-mode .data-card-value {
		color: #4a9eff;
	}

	/* TOP 5 卡片样式 */
	.popular-list-item {
		overflow: visible;
	}

	.popular-item {
		overflow: visible;
	}

	.popular-item-card {
		margin: 0 auto 8px;
		font-size: 16px;
		font-weight: 500;
		color: #fff;
		padding-bottom: 8px;
		border-bottom: 1px solid rgb(100, 100, 100);
		min-height: 29px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	body.dark-mode .popular-item-card {
		color: #e0e0e0;
		border-bottom-color: #555;
	}

	.popular-item-info {
		margin: 0 auto;
		text-align: left;
	}

	.popular-item-label {
		font-size: 13px;
		color: #fff;
		padding-right: 5px;
	}

	body.dark-mode .popular-item-label {
		color: #ccc;
	}

	.popular-item-value {
		font-size: 13px;
		float: right;
		color: #fff;
	}

	body.dark-mode .popular-item-value {
		color: #e0e0e0;
	}

	.popular-item-info + .popular-item-info {
		margin-top: 2px;
	}

	/* 排行榜表格包装器 */
	.rank-table-wrapper {
		display: flex;
		flex-direction: row-reverse;
		width: 100%;
	}

	/* 响应式设计 - TOP 랭킹 */
	@media (max-width: 768px) {
		.flx-table {
			font-size: 12px;
		}

		.flx-table thead th,
		.flx-table tbody td {
			padding: 10px 8px;
		}

		.ranking-number {
			font-size: 24px;
		}

		.rank-avatar-title,
		.rank-avatar-subtitle {
			font-size: 14px;
		}

		.rank-avatar-wrapper {
			gap: 15px;
		}

		.data-card {
			height: 56px;
		}

		.data-card-value {
			font-size: 12px;
		}

		.popular-item-card {
			font-size: 14px;
		}

		.popular-item-label,
		.popular-item-value {
			font-size: 12px;
		}
	}

	/* ========== 챗팅 리스트 페이지优化样式 ========== */
	/* 聊天列表容器 */
	.chat-list-container {
		margin-top: 20px;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}

	/* 聊天卡片 */
	.chat-card {
		background-color: #fff;
		overflow: hidden;
		padding: 0;
		border-radius: 8px;
		border: 2px solid #e0e0e0;
		margin-right: 0;
		display: flex;
		transition: all 0.3s;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		min-width: 380px;
		flex: 0 0 calc(33.333% - 9px);
	}

	.chat-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
		border-color: #f2507e;
	}

	body.dark-mode .chat-card {
		background-color: #1a1a1a;
		border-color: #333;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	}

	body.dark-mode .chat-card:hover {
		border-color: #f2507e;
		box-shadow: 0 4px 16px rgba(242, 80, 126, 0.2);
	}

	/* 卡片内容区域 */
	.chat-card-content {
		display: flex;
		width: 100%;
	}

	/* 头像区域 */
	.chat-card-avatar {
		width: 120px;
		height: 150px;
		flex-shrink: 0;
		overflow: hidden;
		border-radius: 8px 0 0 8px;
	}

	.chat-card-avatar img {
		width: 100%;
		height: 150px;
		object-fit: cover;
		display: block;
	}

	/* 信息区域 */
	.chat-card-info {
		width: 200px;
		padding: 10px;
		height: 150px;
		position: relative;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	/* 聊天标题 */
	.chat-card-title {
		font-size: 19px;
		font-weight: bold;
		color: #333;
		margin-bottom: 8px;
		line-height: 1.4;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	body.dark-mode .chat-card-title {
		color: #e0e0e0;
	}

	/* 币种信息 */
	.chat-card-coin {
		position: absolute;
		bottom: 40px;
		left: 10px;
		font-size: 14px;
		color: #666;
		width: calc(100% - 20px);
	}

	body.dark-mode .chat-card-coin {
		color: #999;
	}

	/* 用户信息 */
	.chat-card-user {
		position: absolute;
		bottom: 10px;
		left: 10px;
		font-size: 14px;
		color: #666;
		width: calc(100% - 20px);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	body.dark-mode .chat-card-user {
		color: #999;
	}

	.chat-card-user-name {
		font-weight: 500;
	}

	.chat-card-user-meta {
		float: right;
		text-align: right;
	}

	/* 进入按钮 */
	.chat-card-button {
		width: 60px;
		height: 150px;
		text-align: center;
		line-height: 150px;
		background-color: #333;
		color: #fff;
		border-radius: 0 8px 8px 0;
		cursor: pointer;
		transition: all 0.3s;
		font-weight: 600;
		flex-shrink: 0;
		border: none;
		font-size: 14px;
	}

	.chat-card-button:hover {
		background-color: #f2507e;
		transform: scale(1.05);
	}

	body.dark-mode .chat-card-button {
		background-color: #2a2a2a;
		color: #fff;
	}

	body.dark-mode .chat-card-button:hover {
		background-color: #f2507e;
	}

	/* 响应式设计 */
	@media (max-width: 1200px) {
		.chat-card {
			flex: 0 0 calc(50% - 6px);
			min-width: 320px;
		}
	}

	@media (max-width: 768px) {
		.chat-list-container {
			flex-direction: column;
			gap: 12px;
		}

		.chat-card {
			flex: 1 1 100%;
			min-width: 100%;
		}

		.chat-card-avatar {
			width: 100px;
			height: 130px;
		}

		.chat-card-avatar img {
			height: 130px;
		}

		.chat-card-info {
			width: auto;
			height: 130px;
			padding: 8px;
		}

		.chat-card-title {
			font-size: 16px;
		}

		.chat-card-coin,
		.chat-card-user {
			font-size: 12px;
		}

		.chat-card-button {
			width: 50px;
			height: 130px;
			line-height: 130px;
			font-size: 12px;
		}
	}

	/* ========== 상점(Shop) 페이지优化样式 ========== */
	/* 自定义购买卡片优化 - 覆盖 layout.css 中的旧样式 */
	.flex-pay {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
		padding: 30px !important;
		border-radius: 15px !important;
		box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3) !important;
		margin-bottom: 30px !important;
		margin-top: 0 !important;
		border: none !important;
		display: block !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
	}

	.flex-pay-header {
		text-align: center;
		margin-bottom: 20px;
		width: 100%;
	}

	/* 覆盖 layout.css 中的 flex-pay p 样式 */
	.flex-pay p {
		position: static !important;
		margin: 0 !important;
	}

	.flex-pay p span {
		float: none !important;
		display: inline !important;
		width: auto !important;
		height: auto !important;
		line-height: normal !important;
		position: static !important;
		font-size: inherit !important;
		padding: 0 !important;
	}

	.flex-pay p:first-child::before {
		display: none !important;
	}

	.flex-pay p:first-child span:last-child::after {
		display: none !important;
	}

	.flex-pay p button {
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.flex-pay-avatar {
		width: 70px;
		height: 70px;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 15px;
		backdrop-filter: blur(10px);
		overflow: hidden;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	}

	.flex-pay-avatar img {
		width: 120%;
		height: 120%;
		object-fit: cover;
		display: block;
	}

	.flex-pay-title {
		color: white;
		font-size: 20px;
		font-weight: 600;
		margin: 0 0 8px 0;
	}

	.flex-pay-subtitle {
		color: rgba(255, 255, 255, 0.9);
		font-size: 14px;
		margin: 0;
	}

	.flex-pay-form-group {
		margin-bottom: 20px;
	}

	.flex-pay-input-row {
		display: flex;
		gap: 15px;
		flex-wrap: wrap;
	}

	.flex-pay-input-wrapper {
		flex: 1;
		min-width: 200px;
	}

	.flex-pay-label {
		display: block;
		color: rgba(255, 255, 255, 0.9);
		font-size: 13px;
		margin-bottom: 8px;
		font-weight: 500;
	}

	.flex-pay-label svg {
		width: 16px;
		height: 16px;
		fill: white;
		vertical-align: middle;
		margin-right: 5px;
	}

	.flex-pay-input {
		width: 100% !important;
		padding: 12px 15px !important;
		border: 2px solid rgba(255, 255, 255, 0.3) !important;
		border-radius: 10px !important;
		font-size: 16px !important;
		background: rgba(255, 255, 255, 0.95) !important;
		transition: all 0.3s ease !important;
		box-sizing: border-box !important;
		color: #333 !important;
		height: auto !important;
		line-height: normal !important;
	}

	/* 覆盖 layout.css 中 flex-pay p input 的样式 */
	.flex-pay p input[type="number"] {
		width: 100% !important;
		padding: 12px 15px !important;
		border: 2px solid rgba(255, 255, 255, 0.3) !important;
		border-radius: 10px !important;
		font-size: 16px !important;
		background: rgba(255, 255, 255, 0.95) !important;
		height: auto !important;
		line-height: normal !important;
	}

	.flex-pay-input:focus {
		border-color: white;
		background: white;
		outline: none;
	}

	.flex-pay-input[readonly] {
		background: rgba(255, 255, 255, 0.7);
		color: #666;
		cursor: not-allowed;
	}

	.flex-pay-button {
		width: 100% !important;
		padding: 15px !important;
		background: #f2507e !important;
		color: #fff !important;
		border: none !important;
		border-radius: 12px !important;
		font-size: 18px !important;
		font-weight: 700 !important;
		cursor: pointer !important;
		box-shadow: 0 4px 15px rgba(242, 80, 126, 0.3) !important;
		transition: all 0.3s ease !important;
		position: relative !important;
		overflow: hidden !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;
		margin: 0 !important;
		margin-top: 0 !important;
		margin-left: 0 !important;
		max-width: 100% !important;
		text-align: center !important;
	}

	/* 覆盖 layout.css 中 flex-pay p button 的样式 */
	.flex-pay p button,
	.flex-pay button {
		color: #fff !important;
		margin-top: 0 !important;
		margin-left: 0 !important;
		background: #f2507e !important;
		text-align: center !important;
		display: flex !important;
		border-radius: 12px !important;
		border: none !important;
		padding: 15px !important;
		font-size: 18px !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.flex-pay-button:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(242, 80, 126, 0.4) !important;
		background: #e0406e !important;
	}

	.flex-pay-button svg {
		width: 22px;
		height: 22px;
		fill: #fff;
		flex-shrink: 0;
	}

	body.dark-mode .flex-pay-button svg {
		fill: #fff !important;
	}

	/* 商品列表优化 - 覆盖 layout.css 中的旧样式 */
	.flex-con {
		margin-top: 30px !important;
	}

	.flex-con ul {
		margin-left: -20px !important;
		display: flex !important;
		flex-wrap: wrap !important;
		list-style: none !important;
		padding: 0 !important;
	}

	.flex-con li {
		float: none !important;
		display: flex !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		padding: 18px !important;
		padding-bottom: 70px !important;
		min-height: 305px !important;
		height: auto !important;
		width: calc(33.333% - 20px) !important;
		margin-left: 20px !important;
		margin-bottom: 20px !important;
		box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px, rgba(0, 0, 0, 0.15) 0px 2px 6px 2px !important;
		flex-direction: column !important;
		border-radius: 5px !important;
		position: relative !important;
		background: #fff !important;
		transition: all 0.3s !important;
	}

	.flex-con li:hover {
		transform: translateY(-4px);
		box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 8px 0px, rgba(0, 0, 0, 0.2) 0px 6px 12px 4px !important;
	}

	.flex-con li img {
		width: 96px !important;
		height: 96px !important;
		border-radius: 50% !important;
		margin-bottom: 15px !important;
	}

	.flex-con li > p {
		margin-bottom: 5px !important;
		font-size: 1.125rem !important;
		text-align: center !important;
		font-weight: 400 !important;
		line-height: 1.75rem !important;
		color: #333 !important;
		width: 100% !important;
		position: static !important;
		flex-shrink: 0 !important;
	}

	.flex-con li > p:first-child {
		margin-bottom: 10px !important;
		border-top: none !important;
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	.flex-con li > p:not(:first-child) {
		width: 100% !important;
		border-top: 1px solid #e0e0e0 !important;
		line-height: 1.75rem !important;
		padding-top: 10px !important;
		margin-top: 10px !important;
	}

	.flex-con li > p:last-child {
		margin-bottom: 0 !important;
	}

	.flex-con li > p span {
		color: red !important;
		font-weight: 600 !important;
	}

	.flex-con li > p b {
		color: red !important;
		font-weight: 600 !important;
	}

	.flex-con li > p i {
		color: rgb(170, 170, 170) !important;
		font-size: 0.9em !important;
		font-style: italic !important;
	}

	body.dark-mode .flex-con li {
		background-color: #1a1a1a !important;
		border-color: #333 !important;
	}

	body.dark-mode .flex-con li > p {
		color: #e0e0e0 !important;
	}

	body.dark-mode .flex-con li > p span {
		color: #ff6b9d !important;
	}

	body.dark-mode .flex-con li > p b {
		color: #ff6b9d !important;
	}

	body.dark-mode .flex-con li > p i {
		color: #888 !important;
	}

	body.dark-mode .flex-con li > p:not(:first-child) {
		border-top-color: #444 !important;
	}

	body.dark-mode .flex-con li a {
		background-color: #2a2a2a !important;
		color: #fff !important;
	}

	body.dark-mode .flex-con li a:hover {
		background-color: #f2507e !important;
	}

	.flex-con li a {
		padding: 0.25rem !important;
		display: flex !important;
		position: absolute !important;
		left: 20px !important;
		right: 20px !important;
		bottom: 20px !important;
		height: 40px !important;
		line-height: 40px !important;
		color: #fff !important;
		text-align: center !important;
		width: auto !important;
		background: #222 !important;
		font-size: 15px !important;
		margin: 0 !important;
		border-radius: 3px !important;
		justify-content: center !important;
		align-items: center !important;
		text-decoration: none !important;
		transition: all 0.3s !important;
		z-index: 10 !important;
	}

	.flex-con li a:hover {
		background: #f2507e !important;
		transform: translateY(-2px);
	}

	/* 深色模式 - 自定义购买卡片 */
	body.dark-mode .flex-pay {
		background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%) !important;
		border-color: #444 !important;
	}

	body.dark-mode .flex-pay-title,
	body.dark-mode .flex-pay-subtitle,
	body.dark-mode .flex-pay-label {
		color: rgba(255, 255, 255, 0.9);
	}

	body.dark-mode .flex-pay-input {
		background-color: rgba(42, 42, 42, 0.95);
		border-color: rgba(255, 255, 255, 0.3);
		color: #e0e0e0;
	}

	body.dark-mode .flex-pay-input:focus {
		border-color: white;
		background: #2a2a2a;
	}

	body.dark-mode .flex-pay-input[readonly] {
		background: rgba(42, 42, 42, 0.7);
		color: #999;
	}

	body.dark-mode .flex-pay-input::placeholder {
		color: rgba(255, 255, 255, 0.5);
	}

	/* 弹窗按钮样式 */
	.modal-button-gradient {
		width: 100%;
		padding: 20px 15px;
		margin-bottom: 15px;
		color: white;
		border: none;
		border-radius: 12px;
		font-size: 18px;
		cursor: pointer;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
		gap: 12px;
		font-weight: 600;
	}

	.modal-button-gradient:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	}

	.modal-button-gradient:active {
		transform: translateY(0);
	}

	.modal-button-gradient::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.5s;
	}

	.modal-button-gradient:hover::before {
		left: 100%;
	}

	.modal-button-gradient svg {
		width: 28px;
		height: 28px;
		fill: white;
		flex-shrink: 0;
	}

	.modal-button-gradient .arrow {
		position: absolute;
		right: 20px;
		font-size: 24px;
		opacity: 0.7;
	}

	.modal-button-bank {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
	}

	.modal-button-coin {
		background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
		box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4);
	}

	.modal-button-confirm {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
		padding: 18px;
		gap: 10px;
	}

	/* 弹窗信息卡片 */
	.modal-info-card {
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		padding: 25px;
		border-radius: 15px;
		margin-bottom: 20px;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
	}

	body.dark-mode .modal-info-card {
		background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
	}

	.modal-info-item {
		background: white;
		padding: 15px 20px;
		border-radius: 10px;
		margin-bottom: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	body.dark-mode .modal-info-item {
		background: #1a1a1a;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	}

	.modal-info-item:last-child {
		margin-bottom: 0;
	}

	.modal-info-icon {
		width: 40px;
		height: 40px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
		flex-shrink: 0;
	}

	.modal-info-icon svg {
		width: 24px;
		height: 24px;
		fill: white;
	}

	.modal-info-icon-level {
		background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
	}

	.modal-info-icon-coin {
		background: linear-gradient(135deg, #4facfe, #00f2fe);
	}

	.modal-info-label {
		font-size: 16px;
		font-weight: 500;
		color: #555;
		display: flex;
		align-items: center;
	}

	body.dark-mode .modal-info-label {
		color: #ccc;
	}

	.modal-info-value {
		color: #333;
		font-size: 20px;
		font-weight: 700;
	}

	body.dark-mode .modal-info-value {
		color: #e0e0e0;
	}

	.modal-info-value.primary {
		color: #ff6b6b;
	}

	body.dark-mode .modal-info-value.primary {
		color: #ff6b6b;
	}

	.modal-info-value.secondary {
		color: #4facfe;
	}

	body.dark-mode .modal-info-value.secondary {
		color: #4facfe;
	}

	.modal-info-value-wrapper {
		display: flex;
		align-items: center;
	}

	.modal-info-unit {
		color: #888;
		font-size: 16px;
		font-weight: 500;
		margin-left: 5px;
	}

	body.dark-mode .modal-info-unit {
		color: #999;
	}

	/* 警告框 */
	.modal-warning-box {
		background: #fff3cd;
		border-left: 4px solid #ffc107;
		padding: 12px 15px;
		border-radius: 8px;
		text-align: left;
		margin-bottom: 20px;
	}

	body.dark-mode .modal-warning-box {
		background: rgba(255, 243, 205, 0.1);
		border-left-color: #ffc107;
	}

	.modal-warning-box p {
		font-size: 13px;
		color: #856404;
		margin: 0;
		line-height: 1.6;
	}

	body.dark-mode .modal-warning-box p {
		color: #ffc107;
	}

	.modal-warning-box strong {
		font-weight: 600;
	}

	.modal-warning-box svg {
		width: 16px;
		height: 16px;
		fill: #ffc107;
		vertical-align: middle;
		margin-right: 5px;
	}

	/* 银行信息卡片 */
	.modal-bank-card {
		background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf6 100%);
		padding: 20px;
		border-radius: 12px;
		margin-bottom: 25px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	}

	body.dark-mode .modal-bank-card {
		background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
	}

	.modal-bank-title {
		font-size: 16px;
		color: #667eea;
		font-weight: 600;
		margin: 0 0 15px 0;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	body.dark-mode .modal-bank-title {
		color: #8a9aff;
	}

	.modal-bank-title svg {
		width: 20px;
		height: 20px;
		fill: #667eea;
		flex-shrink: 0;
	}

	body.dark-mode .modal-bank-title svg {
		fill: #8a9aff;
	}

	.modal-bank-info {
		background: white;
		padding: 15px;
		border-radius: 8px;
	}

	body.dark-mode .modal-bank-info {
		background: #1a1a1a;
	}

	.modal-bank-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.modal-bank-row:last-child {
		margin-bottom: 0;
	}

	.modal-bank-label {
		color: #888;
		font-size: 14px;
	}

	body.dark-mode .modal-bank-label {
		color: #999;
	}

	.modal-bank-value {
		color: #333;
		font-size: 16px;
		font-weight: 600;
	}

	body.dark-mode .modal-bank-value {
		color: #e0e0e0;
	}

	.modal-bank-value.primary {
		color: #667eea;
		font-weight: 700;
	}

	body.dark-mode .modal-bank-value.primary {
		color: #8a9aff;
	}

	/* 输入框样式 */
	.modal-input-group {
		margin-bottom: 15px;
	}

	.modal-input-label {
		display: block;
		color: #555;
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 8px;
	}

	body.dark-mode .modal-input-label {
		color: #ccc;
	}

	.modal-input-label svg {
		width: 16px;
		height: 16px;
		fill: #667eea;
		vertical-align: middle;
		margin-right: 5px;
	}

	body.dark-mode .modal-input-label svg {
		fill: #8a9aff;
	}

	.modal-input {
		width: 100%;
		padding: 12px 15px;
		border: 2px solid #e0e0e0;
		border-radius: 8px;
		font-size: 15px;
		transition: all 0.3s;
		box-sizing: border-box;
		background: #fff;
		color: #333;
	}

	.modal-input:focus {
		border-color: #667eea;
		box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
		outline: none;
	}

	body.dark-mode .modal-input {
		background: #1a1a1a;
		border-color: #444;
		color: #e0e0e0;
	}

	body.dark-mode .modal-input:focus {
		border-color: #8a9aff;
		box-shadow: 0 0 0 3px rgba(138, 154, 255, 0.2);
	}

	body.dark-mode .modal-input::placeholder {
		color: #666;
	}

	/* 购买信息卡片 */
	.modal-purchase-info {
		background: #f8f9fa;
		padding: 20px;
		border-radius: 12px;
		margin-bottom: 20px;
	}

	body.dark-mode .modal-purchase-info {
		background: #1a1a1a;
	}

	.modal-purchase-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
	}

	.modal-purchase-row.bordered {
		margin-bottom: 15px;
		padding-bottom: 15px;
		border-bottom: 1px dashed #ddd;
	}

	body.dark-mode .modal-purchase-row.bordered {
		border-bottom-color: #444;
	}

	.modal-purchase-label {
		color: #666;
		font-size: 15px;
	}

	body.dark-mode .modal-purchase-label {
		color: #999;
	}

	.modal-purchase-value {
		color: #333;
		font-size: 16px;
		font-weight: 500;
	}

	body.dark-mode .modal-purchase-value {
		color: #e0e0e0;
	}

	.modal-purchase-total {
		color: #667eea;
		font-size: 16px;
		font-weight: 600;
	}

	body.dark-mode .modal-purchase-total {
		color: #8a9aff;
	}

	.modal-purchase-total-value {
		color: #667eea;
		font-size: 24px;
		font-weight: 700;
	}

	body.dark-mode .modal-purchase-total-value {
		color: #8a9aff;
	}

	.modal-purchase-note {
		color: #999;
		font-size: 13px;
		margin-top: 2px;
	}

	body.dark-mode .modal-purchase-note {
		color: #777;
	}

	/* 响应式设计 */
	/* 大屏幕 (1281px 及以上) - 4列 */
	@media screen and (min-width: 1281px) {
		.flex-con li {
			width: calc(25% - 20px) !important;
		}
	}

	/* 中等大屏幕 (1024px - 1280px) - 3列 */
	@media screen and (min-width: 1024px) and (max-width: 1280px) {
		.flex-con li {
			width: calc(33.333% - 20px) !important;
		}
	}

	/* 中等屏幕 (768px - 1023px) - 2列 */
	@media screen and (min-width: 768px) and (max-width: 1023px) {
		.flex-con li {
			width: calc(50% - 20px) !important;
		}
	}

	/* 移动设备 (768px 以下) - 1列 */
	@media (max-width: 768px) {
		.flex-pay {
			padding: 20px !important;
		}

		.flex-pay-input-row {
			flex-direction: column;
		}

		.flex-pay-input-wrapper {
			min-width: 100%;
		}

		.flex-con ul {
			margin-left: 0 !important;
		}

		.flex-con li {
			width: 100% !important;
			margin-left: 0 !important;
			min-height: 228px !important;
			height: auto !important;
			padding-bottom: 60px !important;
		}

		.flex-con li img {
			width: 56px !important;
			height: 56px !important;
		}

		.flex-con li > p {
			font-size: 14px !important;
			line-height: 1rem !important;
		}

		.flex-con li a {
			width: calc(100% - 20px) !important;
			margin: 10px !important;
			height: 28px !important;
			line-height: 28px !important;
		}
	}

	/* 加载动画样式 */
	.spinner {
		width: 16px;
		height: 16px;
		border: 2px solid rgba(255, 255, 255, 0.3);
		border-top-color: white;
		border-radius: 50%;
		display: inline-block;
		animation: spin 0.8s linear infinite;
		margin-right: 8px;
	}

	.loader-circle {
		width: 50px;
		height: 50px;
		border: 4px solid #f3f3f3;
		border-top: 4px solid #667eea;
		border-radius: 50%;
		margin: 0 auto;
		animation: spin 1s linear infinite;
	}

	body.dark-mode .loader-circle {
		border-color: #333;
		border-top-color: #667eea;
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	/* 消息弹窗样式 */
	.custom-message {
		animation: messageSlideIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}

	@keyframes messageSlideIn {
		from {
			transform: translate(-50%, -50%) scale(0.5);
			opacity: 0;
		}
		to {
			transform: translate(-50%, -50%) scale(1);
			opacity: 1;
		}
	}

	.success-message {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0.5);
		background: white;
		padding: 30px 40px;
		border-radius: 15px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
		z-index: 100000;
		opacity: 0;
		text-align: center;
		min-width: 300px;
	}

	body.dark-mode .success-message {
		background: #1a1a1a;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
	}

	.success-message-icon {
		width: 60px;
		height: 60px;
		background: linear-gradient(135deg, #4CAF50, #45a049);
		border-radius: 50%;
		margin: 0 auto 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.success-message-icon svg {
		width: 35px;
		height: 35px;
		fill: white;
		animation: checkmarkDraw 0.5s ease-in-out 0.3s both;
	}

	@keyframes checkmarkDraw {
		0% { transform: scale(0); }
		50% { transform: scale(1.2); }
		100% { transform: scale(1); }
	}

	.success-message h3 {
		font-size: 20px;
		color: #333;
		margin-bottom: 10px;
		font-weight: 600;
	}

	body.dark-mode .success-message h3 {
		color: #e0e0e0;
	}

	.success-message p {
		font-size: 15px;
		color: #666;
		line-height: 1.6;
		white-space: pre-line;
	}

	body.dark-mode .success-message p {
		color: #ccc;
	}

	.error-message {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0.5);
		background: white;
		padding: 30px 40px;
		border-radius: 15px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
		z-index: 100000;
		opacity: 0;
		text-align: center;
		min-width: 300px;
	}

	body.dark-mode .error-message {
		background: #1a1a1a;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
	}

	.error-message-icon {
		width: 60px;
		height: 60px;
		background: linear-gradient(135deg, #f44336, #e53935);
		border-radius: 50%;
		margin: 0 auto 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		animation: errorShake 0.5s ease-in-out;
	}

	@keyframes errorShake {
		0%, 100% { transform: translateX(0); }
		10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
		20%, 40%, 60%, 80% { transform: translateX(5px); }
	}

	.error-message-icon svg {
		width: 35px;
		height: 35px;
		fill: white;
	}

	.error-message h3 {
		font-size: 20px;
		color: #333;
		margin-bottom: 10px;
		font-weight: 600;
	}

	body.dark-mode .error-message h3 {
		color: #e0e0e0;
	}

	.error-message p {
		font-size: 15px;
		color: #666;
		line-height: 1.6;
		white-space: pre-line;
	}

	body.dark-mode .error-message p {
		color: #ccc;
	}

	.error-message button {
		margin-top: 20px;
		padding: 10px 30px;
		background: #f44336;
		color: white;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		font-size: 14px;
		font-weight: 600;
		transition: all 0.3s;
	}

	.error-message button:hover {
		background: #d32f2f;
		transform: translateY(-2px);
	}

	body.dark-mode .error-message button {
		background: #f44336;
	}

	body.dark-mode .error-message button:hover {
		background: #d32f2f;
	}

	/* 提交进度覆盖层 */
	#submitProgressOverlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99999;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	body.dark-mode #submitProgressOverlay {
		background: rgba(0, 0, 0, 0.85);
	}

	#submitProgressOverlay .progress-content {
		background: white;
		padding: 30px 40px;
		border-radius: 15px;
		text-align: center;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	}

	body.dark-mode #submitProgressOverlay .progress-content {
		background: #1a1a1a;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
	}

	#submitProgressOverlay .progress-content p {
		margin: 20px 0 0 0;
		font-size: 16px;
		color: #333;
	}

	body.dark-mode #submitProgressOverlay .progress-content p {
		color: #e0e0e0;
	}

	#submitProgressOverlay .progress-content p:last-child {
		margin: 5px 0 0 0;
		font-size: 13px;
		color: #999;
	}

	body.dark-mode #submitProgressOverlay .progress-content p:last-child {
		color: #777;
	}

	/* 弹窗标题区域 */
	.modal-title-section {
		text-align: center;
		margin-bottom: 25px;
		padding: 0;
	}

	.modal-icon-large {
		width: 80px;
		height: 80px;
		margin: 0 auto 20px;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
	}

	body.dark-mode .modal-icon-large {
		box-shadow: 0 8px 20px rgba(102, 126, 234, 0.5);
	}

	.modal-icon-large svg {
		width: 45px;
		height: 45px;
		fill: white;
	}

	.modal-title {
		font-size: 22px;
		margin-bottom: 10px;
		color: #333;
		font-weight: 600;
	}

	body.dark-mode .modal-title {
		color: #e0e0e0;
	}

	.modal-subtitle {
		font-size: 14px;
		color: #999;
		margin-bottom: 0;
	}

	body.dark-mode .modal-subtitle {
		color: #999;
	}

	/* flex-popup-con 在 layout.css 中已经有 padding: .75rem 24px */
	/* 覆盖它，让 header 和 main 分别控制各自的 padding */
	.flex-popup-con {
		padding: 0 !important;
	}

	.flex-popup-con .f-header {
		padding: 0 24px !important;
	}

	/* main 区域不需要额外 padding，因为 modal-content-padding 会提供 */
	.flex-popup-con main {
		padding: 0 !important;
	}

	/* flex-popup-con 内的 modal-content-padding 提供内容区域的 padding */
	.flex-popup-con .modal-content-padding {
		padding: 20px 24px !important;
	}

	/* 如果没有在 flex-popup-con 内，则使用默认 padding */
	.modal-content-padding {
		padding: 30px 25px;
	}

	body.dark-mode .flex-popup-con .modal-content-padding {
		padding: 20px 24px !important;
	}

	body.dark-mode .modal-content-padding {
		padding: 30px 25px;
	}

	.modal-input-wrapper {
		margin-bottom: 25px;
	}

	/* ========== Export Handler 样式 ========== */
	/* Export 弹窗动画 */
	@keyframes exportFadeIn {
		from {
			opacity: 0;
			transform: scale(0.9) translateY(-20px);
		}
		to {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
	}

	@keyframes exportSlideUp {
		from {
			opacity: 0;
			transform: translateY(30px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes exportFadeOut {
		from {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
		to {
			opacity: 0;
			transform: scale(0.9) translateY(-20px);
		}
	}

	.export-popup-con {
		animation: exportFadeIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}

	.export-popup-con > * {
		animation: exportSlideUp 0.5s ease-out;
	}

	.export-popup-con .f-header {
		animation-delay: 0.1s;
		opacity: 0;
		animation-fill-mode: forwards;
	}

	.export-popup-con main {
		animation-delay: 0.2s;
		opacity: 0;
		animation-fill-mode: forwards;
	}

	.export-closing {
		animation: exportFadeOut 0.3s ease-in forwards !important;
	}

	/* Export 表单样式 */
	.export-form-group {
		margin-bottom: 25px;
	}

	.export-form-item {
		margin-bottom: 15px;
	}

	.export-form-item:last-child {
		margin-bottom: 0;
	}

	.export-form-label {
		display: block;
		color: #555;
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 8px;
	}

	.export-balance-text {
		color: #999;
		font-size: 13px;
		font-weight: normal;
	}

	.export-form-label svg {
		width: 16px;
		height: 16px;
		fill: #f2507e;
		vertical-align: middle;
		margin-right: 5px;
	}

	.export-form-input,
	.export-form-select {
		width: 100%;
		padding: 12px 15px;
		border: 2px solid #e0e0e0;
		border-radius: 8px;
		font-size: 15px;
		transition: all 0.3s;
		background: white;
		cursor: pointer;
		box-sizing: border-box;
	}

	.export-form-input:focus,
	.export-form-select:focus {
		border-color: #f2507e;
		box-shadow: 0 0 0 3px rgba(242, 80, 126, 0.1);
		outline: none;
	}

	.export-form-input::placeholder {
		color: #999;
	}

	.export-preview-card {
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		padding: 20px;
		border-radius: 12px;
		margin: 20px 0;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.export-preview-label {
		color: #666;
		font-size: 13px;
		margin-bottom: 5px;
	}

	.export-preview-value {
		font-size: 24px;
		font-weight: 700;
		color: #f2507e;
	}

	.export-preview-icon {
		width: 40px;
		height: 40px;
		fill: #f2507e;
		opacity: 0.3;
	}

	.export-warning-box {
		background: linear-gradient(135deg, #fff9e6 0%, #ffe8a3 100%);
		padding: 18px;
		border-radius: 12px;
		margin-bottom: 20px;
		border-left: 4px solid #ffc107;
		display: flex;
		align-items: start;
	}

	.export-warning-icon {
		width: 20px;
		height: 20px;
		fill: #f57c00;
		margin-right: 10px;
		flex-shrink: 0;
		margin-top: 2px;
	}

	.export-warning-title {
		color: #e65100;
		font-weight: 600;
		font-size: 14px;
		margin-bottom: 8px;
	}

	.export-warning-list {
		list-style: none;
		padding: 0;
		margin: 0;
		color: #666;
		font-size: 13px;
		line-height: 1.8;
	}

	.export-warning-list li {
		margin-bottom: 5px;
	}

	.export-warning-list li:last-child {
		margin-bottom: 0;
	}

	.export-submit-button {
		width: 100%;
		padding: 16px;
		background: linear-gradient(135deg, #f2507e 0%, #e0406e 100%);
		color: white;
		font-size: 16px;
		font-weight: 600;
		border: none;
		border-radius: 12px;
		cursor: pointer;
		transition: all 0.3s;
		box-shadow: 0 4px 15px rgba(242, 80, 126, 0.3);
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}

	.export-submit-button:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(242, 80, 126, 0.4);
	}

	.export-submit-button:active {
		transform: translateY(0);
	}

	.export-submit-button:disabled {
		opacity: 0.7;
		cursor: not-allowed;
	}

	.export-submit-button svg {
		width: 18px;
		height: 18px;
		fill: white;
		vertical-align: middle;
	}

	/* 按钮点击涟漪效果 */
	@keyframes ripple {
		0% {
			transform: scale(0);
			opacity: 1;
		}
		100% {
			transform: scale(2);
			opacity: 0;
		}
	}

	.export-submit-button::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.5);
		transform: translate(-50%, -50%);
		transition: width 0.6s, height 0.6s;
	}

	.export-submit-button:active::after {
		width: 300px;
		height: 300px;
		animation: ripple 0.6s ease-out;
	}

	/* 自定义提示框样式 */
	.custom-alert-overlay {
		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: 99999;
		animation: fadeIn 0.3s ease-out;
	}

	.custom-alert-box {
		background: white;
		border-radius: 16px;
		padding: 30px;
		min-width: 320px;
		max-width: 400px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
		animation: alertSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		text-align: center;
	}

	.custom-alert-icon {
		width: 60px;
		height: 60px;
		margin: 0 auto 20px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.custom-alert-icon.warning {
		background: linear-gradient(135deg, #fff9e6 0%, #ffe8a3 100%);
	}

	.custom-alert-icon.error {
		background: linear-gradient(135deg, #ffe8e8 0%, #ffcdd2 100%);
	}

	.custom-alert-icon.success {
		background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
	}

	.custom-alert-icon svg {
		width: 32px;
		height: 32px;
	}

	.custom-alert-message {
		font-size: 16px;
		color: #333;
		line-height: 1.6;
		margin-bottom: 25px;
		word-break: keep-all;
	}

	.custom-alert-button {
		background: linear-gradient(135deg, #f2507e 0%, #e0406e 100%);
		color: white;
		border: none;
		padding: 12px 40px;
		border-radius: 25px;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s;
		box-shadow: 0 4px 15px rgba(242, 80, 126, 0.3);
	}

	.custom-alert-button:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(242, 80, 126, 0.4);
	}

	@keyframes alertSlideIn {
		from {
			opacity: 0;
			transform: scale(0.8) translateY(-20px);
		}
		to {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
	}

	@keyframes alertShake {
		0%, 100% { transform: translateX(0); }
		10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
		20%, 40%, 60%, 80% { transform: translateX(5px); }
	}

	.alert-shake {
		animation: alertShake 0.5s ease-in-out;
	}

	@keyframes spin {
		to { transform: rotate(360deg); }
	}

	/* 暗模式支持 */
	body.dark-mode .export-form-label {
		color: rgba(255, 255, 255, 0.9);
	}

	body.dark-mode .export-form-label svg {
		fill: #f2507e;
	}

	body.dark-mode .export-form-input,
	body.dark-mode .export-form-select {
		background-color: rgba(42, 42, 42, 0.95);
		border-color: rgba(255, 255, 255, 0.3);
		color: #e0e0e0;
	}

	body.dark-mode .export-form-input:focus,
	body.dark-mode .export-form-select:focus {
		border-color: #f2507e;
		box-shadow: 0 0 0 3px rgba(242, 80, 126, 0.2);
		background: #2a2a2a;
	}

	body.dark-mode .export-form-input::placeholder {
		color: rgba(255, 255, 255, 0.5);
	}

	body.dark-mode .export-preview-card {
		background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
	}

	body.dark-mode .export-preview-label {
		color: #999;
	}

	body.dark-mode .export-preview-value {
		color: #f2507e;
	}

	body.dark-mode .export-preview-icon {
		fill: #f2507e;
		opacity: 0.5;
	}

	body.dark-mode .export-warning-box {
		background: linear-gradient(135deg, #3a2a1a 0%, #2a1a0a 100%);
		border-left-color: #ffc107;
	}

	body.dark-mode .export-warning-title {
		color: #ffc107;
	}

	body.dark-mode .export-warning-list {
		color: #ccc;
	}

	body.dark-mode .custom-alert-box {
		background: #1a1a1a;
		color: #e0e0e0;
	}

	body.dark-mode .custom-alert-message {
		color: #e0e0e0;
	}

	body.dark-mode .export-alam-con {
		background: #1a1a1a;
		color: #e0e0e0;
	}

	body.dark-mode .export-alam-con h2 {
		color: #fff;
	}

	body.dark-mode .export-alam-con p {
		color: #ccc;
	}

	/* Export 错误页面样式 */
	.export-error-main {
		background: white;
		padding: 50px 40px;
		border-radius: 15px;
		text-align: center;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	}

	.export-error-icon {
		width: 80px;
		height: 80px;
		background: linear-gradient(135deg, #ffe8e8 0%, #ffcdd2 100%);
		border-radius: 50%;
		margin: 0 auto 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 15px rgba(229, 53, 53, 0.2);
	}

	.export-error-icon svg {
		width: 45px;
		height: 45px;
	}

	.export-error-title {
		color: #e53935;
		font-size: 24px;
		margin-bottom: 15px;
		font-weight: 700;
	}

	.export-error-message {
		color: #666;
		font-size: 15px;
		line-height: 1.8;
		margin-bottom: 30px;
		white-space: pre-line;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}

	body.dark-mode .export-error-main {
		background: #1a1a1a;
	}

	body.dark-mode .export-error-icon {
		background: linear-gradient(135deg, #3a1a1a 0%, #2a0a0a 100%);
	}

	body.dark-mode .export-error-title {
		color: #ff6b6b;
	}

	body.dark-mode .export-error-message {
		color: #ccc;
	}

	/* 确保 img2 本身没有背景 */
	.img2 {
		background: transparent !important;
		background-color: transparent !important;
	}

	/* 暗模式 - img2 SVG 图标 - 使用暗模式专用 SVG（通过 JavaScript 切换 src） */
	body.dark-mode .img2[data-dark-src] {
		filter: none !important;
		opacity: 1;
	}

	/* 暗模式 - m2Button 按钮 */
	body.dark-mode .m2Button button {
		background-color: #2a2a2a !important;
		color: #e0e0e0 !important;
		border-color: #444 !important;
	}

	body.dark-mode .m2Button button:hover {
		background-color: #3a3a3a !important;
		color: #fff !important;
		border-color: #555 !important;
	}

	body.dark-mode .m2Button button:disabled {
		background-color: #1a1a1a !important;
		color: #666 !important;
		border-color: #333 !important;
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.export-preview-card {
			flex-direction: column;
			text-align: center;
			gap: 15px;
		}

		.export-preview-icon {
			display: none;
		}
	}
	
	/* 고객상담 Modal 스타일 */
	.customer-modal-content {
		max-width: 550px;
		width: 90%;
		background-color: #fefefe;
		border-radius: 10px;
	}
	
	.customer-info-item {
		display: flex;
		align-items: center;
		padding: 18px 20px;
		margin: 12px 0;
		background: #fff;
		border-radius: 6px;
		border: 1px solid #e0e0e0;
		box-shadow: 0 2px 6px rgba(0,0,0,0.1);
		transition: all 0.3s ease;
		position: relative;
	}
	
	.customer-info-item:hover {
		box-shadow: 0 3px 8px rgba(0,0,0,0.16);
		border-color: #f2507e;
	}
	
	.customer-info-icon {
		margin-right: 15px;
		width: 48px;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #fff;
		border: 1px solid #e0e0e0;
		flex-shrink: 0;
		overflow: hidden;
	}
	
	.customer-info-icon img {
		width: 140%;
		height: 140%;
		object-fit: contain;
		padding: 8px;
	}
	
	.customer-info-content {
		flex: 1;
		min-width: 0;
	}
	
	.customer-info-label {
		font-weight: 500;
		color: #222;
		font-size: 14px;
		margin-bottom: 6px;
		display: block;
	}
	
	.customer-info-value {
		color: #666;
		font-size: 15px;
		word-break: break-all;
		font-weight: 400;
	}
	
	.customer-copy-btn {
		margin-left: 12px;
		padding: 8px 16px;
		background-color: #000;
		color: white;
		border: none;
		border-radius: 5px;
		font-size: 13px;
		font-weight: 400;
		cursor: pointer;
		transition: all 0.3s ease;
		flex-shrink: 0;
		white-space: nowrap;
	}
	
	.customer-copy-btn:hover {
		background-color: #f2507e;
	}
	
	.customer-copy-btn:active {
		transform: scale(0.98);
	}
	
	.customer-copy-btn.copied {
		background-color: #f2507e;
	}
	
	.customer-info-empty {
		color: #999;
		font-style: italic;
		text-align: center;
		padding: 40px 20px;
	}
	
	/* Dark Mode 스타일 */
	body.dark-mode .customer-modal-content {
		background-color: #1a1a1a;
	}
	
	body.dark-mode .customer-info-item {
		background: #2a2a2a;
		border-color: #333;
	}
	
	body.dark-mode .customer-info-item:hover {
		border-color: #f2507e;
	}
	
	body.dark-mode .customer-info-icon {
		background: #2a2a2a;
		border-color: #333;
	}
	
	body.dark-mode .customer-info-label {
		color: #e0e0e0;
	}
	
	body.dark-mode .customer-info-value {
		color: #ccc;
	}
	
	body.dark-mode .customer-info-empty {
		color: #999;
	}
	
	body.dark-mode #customer-modal h3 {
		color: #e0e0e0 !important;
	}
	
	body.dark-mode #customer-modal button[onclick="closeCustomerModal()"] {
		color: #999 !important;
	}
	
	body.dark-mode #customer-modal button[onclick="closeCustomerModal()"]:hover {
		color: #e0e0e0 !important;
	}