/* 页面布局样式 */
.page-container { 
	min-height: 100vh; 
	display: flex; 
	flex-direction: column; 
	overflow: visible; /* 确保页面容器不会产生滚动条 */
  }
  .main-content { 
	flex: 1; 
	display: flex; 
	min-height: 80vh; 
	overflow: visible; /* 确保主内容区域不会产生滚动条 */
  }
  .left-panel {  
	width: 320px;
	min-width: 320px;
	background: #f8f9fa; 
	border-right: 1px solid #dee2e6; 
	display: flex; 
	flex-direction: column; 
	padding: 20px;
	overflow-y: auto; /* 左侧面板可以独立滚动 */
  }
  .center-panel {
	flex: 1;
	background: #fff;
	display: flex;
	flex-direction: column;
	padding: 20px;
	overflow: visible; /* 移除独立滚动条 */
	min-width: 0; /* 允许收缩 */
  }
  .right-panel {
	width: 320px;
	min-width: 320px;
	background: #f8f9fa;
	border-left: 1px solid #dee2e6;
	display: flex;
	flex-direction: column;
	padding: 12px;
	overflow-y: auto; /* 右侧面板可以独立滚动 */
  }
  
  .card { 
	border-radius: 8px; 
	box-shadow: 0 1px 3px rgba(0,0,0,0.08); 
	border: 1px solid #e8e8e8; 
	margin-bottom: 20px; 
	overflow: visible;
  }
  .card-header { 
	background: #f8f9fa; 
	color: #495057; 
	border-radius: 8px 8px 0 0; 
	font-weight: 600; 
	font-size: 1rem; 
	padding: 12px 16px;
	border-bottom: 1px solid #e8e8e8;
  }
  .card-body { 
	background: #fff; 
	border-radius: 0 0 8px 8px; 
	padding: 16px;
	overflow: visible;
  }
  
  .usage-tips { 
	background: #e7f3ff; 
	border: 1px solid #b3d9ff; 
	border-radius: 4px; 
	padding: 10px; 
	margin-bottom: 10px; 
	font-size: 13px; 
  }
  .form-group {
	margin-bottom: 15px !important;
	display: block !important;
  }
  .form-control {
	width: 100% !important;
	box-sizing: border-box !important;
  }
  
  .btn {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
	z-index: 10 !important;
	cursor: pointer !important;
  }
  
  /* 保存按钮默认隐藏样式 */
  #saveBtn {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
  }
  
  /* 编辑模式下保存按钮显示样式 */
  #saveBtn.edit-mode-visible {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
  }
  .btn-primary {
	background-color: #007bff !important;
	border-color: #007bff !important;
	color: white !important;
  }
  .btn-success {
	background-color: #28a745 !important;
	border-color: #28a745 !important;
	color: white !important;
  }
  .btn-info {
	background-color: #17a2b8 !important;
	border-color: #17a2b8 !important;
	color: white !important;
  }
  .btn-warning {
	background-color: #ffc107 !important;
	border-color: #ffc107 !important;
	color: #212529 !important;
  }
  .btn-danger {
	background-color: #dc3545 !important;
	border-color: #dc3545 !important;
	color: white !important;
  }
  .btn-secondary {
	background-color: #6c757d !important;
	border-color: #6c757d !important;
	color: white !important;
  }
  .btn-light {
	background-color: #f8f9fa !important;
	border-color: #f8f9fa !important;
	color: #212529 !important;
  }
  .btn-dark {
	background-color: #343a40 !important;
	border-color: #343a40 !important;
	color: white !important;
  }
  .btn-outline-primary {
	color: #007bff !important;
	border-color: #007bff !important;
	background-color: transparent !important;
  }
  .btn-outline-secondary {
	color: #6c757d !important;
	border-color: #6c757d !important;
	background-color: transparent !important;
  }
  .btn-outline-success {
	color: #28a745 !important;
	border-color: #28a745 !important;
	background-color: transparent !important;
  }
  .btn-outline-danger {
	color: #dc3545 !important;
	border-color: #dc3545 !important;
	background-color: transparent !important;
  }
  .btn-outline-warning {
	color: #ffc107 !important;
	border-color: #ffc107 !important;
	background-color: transparent !important;
  }
  .btn-outline-info {
	color: #17a2b8 !important;
	border-color: #17a2b8 !important;
	background-color: transparent !important;
  }
  .btn-outline-light {
	color: #f8f9fa !important;
	border-color: #f8f9fa !important;
	background-color: transparent !important;
  }
  .btn-outline-dark {
	color: #343a40 !important;
	border-color: #343a40 !important;
	background-color: transparent !important;
  }
  .btn-sm {
	padding: 0.25rem 0.5rem !important;
	font-size: 0.875rem !important;
	line-height: 1.5 !important;
	border-radius: 0.2rem !important;
  }
  .btn-xs {
	padding: 0.125rem 0.25rem !important;
	font-size: 0.75rem !important;
	line-height: 1.2 !important;
	border-radius: 0.15rem !important;
  }
  .btn-block {
	display: block !important;
	width: 100% !important;
  }
  .btn-link {
	font-weight: 400 !important;
	color: #007bff !important;
	text-decoration: none !important;
	background-color: transparent !important;
	border: 0 !important;
  }
  
  .table-preview-container { 
	width: 100%; 
	background: #fafbfc; 
	border-radius: 12px; 
	box-shadow: 0 2px 8px rgba(66,165,245,0.06); 
	padding: 20px; 
	box-sizing: border-box; 
	overflow-x: auto; /* 只保留水平滚动条，处理表格过宽的情况 */
	overflow-y: visible; /* 移除垂直滚动条 */
  }
  .inner_table { 
	border-collapse: collapse; 
	width: 100%; 
	font-size: 1rem; 
	font-family: Arial,sans-serif; 
	box-sizing: border-box; 
  }
  .inner_table th, .inner_table td { 
	border: 1px solid #b3d9ff; 
	padding: 8px 12px; 
	text-align: left; 
	font-size: 1rem; 
	box-sizing: border-box; 
  }
  .inner_table th { 
	color: #fff; 
	font-weight: bold; 
	text-align: center; 
  }
  .inner_table tr:nth-child(even) { 
	background: #f9f9f9; 
  }
  
  /* 返回链接样式 */
  .back-to-tools-link {
	color: #42a5f5;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 6px;
	margin-bottom: 20px;
  }
  .back-to-tools-link:hover {
	color: #1976d2;
	background: rgba(66, 165, 245, 0.1);
	text-decoration: none; 
	transform: translateX(-2px);
  }
  .back-to-tools-link i {
	margin-right: 6px;
	transition: transform 0.3s ease;
  }
  .back-to-tools-link:hover i {
	transform: translateX(-2px);
  }
  
  /* 确保图标正确显示 */
  .fa {
	display: inline-block !important;
	font-family: FontAwesome !important;
	font-style: normal !important;
	font-weight: normal !important;
	line-height: 1 !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
  }
  
  /* 图标备用方案 */
  .icon-fallback {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
  }
  
  .icon-table { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2342a5f5"><path d="M3 3h18v18H3V3zm2 2v14h14V5H5zm2 2h10v2H7V7zm0 4h10v2H7v-2zm0 4h10v2H7v-2z"/></svg>'); }
  .icon-edit { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2342a5f5"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>'); }
  .icon-magic { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2342a5f5"><path d="M7.5 5.6L5 7l1.4-2.5L5 2l2.5 1.4L10 2l-1.4 2.5L10 7 7.5 5.6zM19.5 15.4L17 14l1.4 2.5L17 19l2.5-1.4L22 19l-1.4-2.5L22 14l-2.5 1.4zM22 2l-2.5 1.4L17 2l1.4 2.5L17 7l2.5-1.4L22 7l-1.4-2.5L22 2zM7.5 18.4L5 17l1.4 2.5L5 22l2.5-1.4L10 22l-1.4-2.5L10 17 7.5 18.4zM13 13l-2.5 1.4L8 13l1.4 2.5L8 18l2.5-1.4L13 18l-1.4-2.5L13 13z"/></svg>'); }
  .icon-paint-brush { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2342a5f5"><path d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37-1.34-1.34c-.39-.39-1.02-.39-1.41 0L9 12.25 11.75 15l8.96-8.96c.39-.39.39-1.02 0-1.41z"/></svg>'); }
  .icon-save { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2342a5f5"><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>'); }
  .icon-copy { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2342a5f5"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>'); }
  .icon-download { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2342a5f5"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>'); }
  .icon-check-square { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2342a5f5"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>'); }
  .icon-arrow-left { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2342a5f5"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>'); }
  
  /* 输入功能按钮样式 */
  .input-function-buttons {
	  display: flex;
	  flex-direction: column;
	  gap: 12px;
  }
  
  .input-function-btn {
	  position: relative;
	  display: flex;
	  align-items: center;
	  justify-content: flex-start;
	  padding: 16px 20px;
	  font-size: 14px;
	  font-weight: 500;
	  border-radius: 6px;
	  border: 1px solid #e0e0e0;
	  transition: all 0.2s ease;
	  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	  text-align: left;
	  min-height: 52px;
	  width: 100%;
	  background: #ffffff;
	  color: #333333;
  }
  
  .input-function-btn:hover {
	  transform: translateY(-1px);
	  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
	  border-color: #42a5f5;
	  background: #f8f9ff;
  }
  
  .input-function-btn:active {
	  transform: translateY(0);
	  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  
  /* 按钮图标样式 */
  .input-function-btn i {
	  font-size: 18px;
	  margin-right: 12px;
	  color: #42a5f5;
	  width: 20px;
	  text-align: center;
  }
  
  /* 按钮文字样式 */
  .input-function-btn span {
	  flex: 1;
	  line-height: 1.4;
  }
  
  /* 移除不同按钮的颜色主题，使用统一的专业样式 */
  .input-function-btn[data-type="search-ai"] i { color: #2196F3; }
  .input-function-btn[data-type="json-organize"] i { color: #FF9800; }
  .input-function-btn[data-type="text-to-table"] i { color: #4CAF50; }
  .input-function-btn[data-type="image-recognition"] i { color: #9C27B0; }
  .input-function-btn[data-type="industry-data"] i { color: #607D8B; }
  
  /* 弹窗样式 */
  .modal-overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: rgba(0, 0, 0, 0.5);
	  display: none;
	  justify-content: center;
	  align-items: center;
	  z-index: 10000;
  }
  
  .modal-content {
	  background: white;
	  border-radius: 12px;
	  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	  max-width: 500px;
	  width: 90%;
	  max-height: 80vh;
	  overflow-y: auto;
	  animation: modalSlideIn 0.3s ease;
  }
  
  @keyframes modalSlideIn {
	  from {
		  opacity: 0;
		  transform: translateY(-50px);
	  }
	  to {
		  opacity: 1;
		  transform: translateY(0);
	  }
  }
  
  .modal-header {
	  background: linear-gradient(90deg,#42a5f5,#26c6da);
	  color: white;
	  padding: 15px 20px;
	  border-radius: 12px 12px 0 0;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
  }
  
  .modal-header h5 {
	  margin: 0;
	  font-weight: 700;
	  font-size: 1.1rem;
  }
  
  .modal-close {
	  background: none;
	  border: none;
	  color: white;
	  font-size: 20px;
	  cursor: pointer;
	  padding: 0;
	  width: 30px;
	  height: 30px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border-radius: 50%;
	  transition: background-color 0.3s;
  }
  
  .modal-close:hover {
	  background: rgba(255, 255, 255, 0.2);
  }
  
  .modal-body {
	  padding: 20px;
  }
  
  /* 颜色选择器样式 */
  input[type="color"] {
	  width: 40px !important;
	  height: 40px !important;
	  padding: 2px !important;
	  border: 2px solid #ddd !important;
	  border-radius: 6px !important;
	  cursor: pointer !important;
	  background: none !important;
  }
  
  input[type="color"]:hover {
	  border-color: #42a5f5 !important;
	  transform: scale(1.05);
	  transition: all 0.2s ease;
  }
  
  input[type="color"]::-webkit-color-swatch-wrapper {
	  padding: 0 !important;
  }
  
  input[type="color"]::-webkit-color-swatch {
	  border: none !important;
	  border-radius: 4px !important;
  }
  
  input[type="color"]::-moz-color-swatch {
	  border: none !important;
	  border-radius: 4px !important;
  }
  
  /* 表格操作按钮样式 */
  .table-actions {
	  background: #f8f9fa;
	  border: 1px solid #dee2e6;
	  border-radius: 8px;
	  padding: 15px;
	  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }
  
  .table-actions .btn {
	  margin-right: 8px;
	  margin-bottom: 5px;
	  font-size: 13px;
	  padding: 6px 12px;
  }
  
  /* 消息提示样式 */
  .message-toast {
	  position: fixed;
	  top: 20px;
	  right: 20px;
	  padding: 12px 20px;
	  border-radius: 6px;
	  color: white;
	  font-weight: 500;
	  z-index: 10001;
	  animation: slideInRight 0.3s ease;
	  max-width: 300px;
  }
  
  .message-toast.success {
	  background: #28a745;
  }
  
  .message-toast.error {
	  background: #dc3545;
  }
  
  .message-toast.info {
	  background: #17a2b8;
  }
  
  @keyframes slideInRight {
	  from {
		  transform: translateX(100%);
		  opacity: 0;
	  }
	  to {
		  transform: translateX(0);
		  opacity: 1;
	  }
  }
  
  /* 现代输入框样式 */
  .modal-body .form-control:focus {
	  border-color: #42a5f5 !important;
	  box-shadow: 0 0 0 0.2rem rgba(66, 165, 245, 0.25) !important;
	  outline: none !important;
  }
  
  .modal-body input[type="text"]:focus {
	  border-color: #42a5f5 !important;
	  box-shadow: 0 0 0 0.2rem rgba(66, 165, 245, 0.25) !important;
  }
  
  .modal-body textarea:focus {
	  border-color: #42a5f5 !important;
	  box-shadow: 0 0 0 0.2rem rgba(66, 165, 245, 0.25) !important;
  }
  
  /* 现代按钮悬停效果 */
  .modal-body .btn-success:hover {
	  transform: translateY(-1px);
	  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
	  transition: all 0.3s ease;
  }
  
  .modal-body .btn-light:hover {
	  background-color: #f8f9fa;
	  border-color: #42a5f5;
	  transform: translateY(-1px);
	  transition: all 0.3s ease;
  }
  
  /* 表格宽度设置 */
  .row.g-2.mb-2:nth-child(1) {
	  margin-bottom: 1rem !important;
  }
  
  /* 标题字体设置 */
  .row.g-2.mb-2:nth-child(2) {
	  margin-bottom: 1rem !important;
  }
  
  /* 标题字体大小设置 */
  .row.g-2.mb-2:nth-child(3) {
	  margin-bottom: 1rem !important;
  }
  
  /* 标题颜色设置 */
  .row.g-2.mb-2:nth-child(4) {
	  margin-bottom: 1rem !important;
  }
  
  /* 表头字体设置 */
  .row.g-2.mb-2:nth-child(5) {
	  margin-bottom: 1rem !important;
  }
  
  /* 表头字体大小设置 */
  .row.g-2.mb-2:nth-child(6) {
	  margin-bottom: 1rem !important;
  }
  
  /* 表头背景色设置 */
  .row.g-2.mb-2:nth-child(7) {
	  margin-bottom: 1rem !important;
  }
  
  /* 表头文字色设置 */
  .row.g-2.mb-2:nth-child(8) {
	  margin-bottom: 1rem !important;
  }
  
  /* 表格内容字体设置 */
  .row.g-2.mb-2:nth-child(9) {
	  margin-bottom: 1rem !important;
  }
  
  /* 内容字体大小设置 */
  .row.g-2.mb-2:nth-child(10) {
	  margin-bottom: 1rem !important;
  }
  
  /* 内容颜色设置 */
  .row.g-2.mb-2:nth-child(11) {
	  margin-bottom: 1rem !important;
  }
  
  /* 背景颜色设置 */
  .row.g-2.mb-3:nth-child(12) {
	  margin-bottom: 1rem !important;
  }
  
  /* 样式设置面板样式 */
  .style-section {
	  margin-bottom: 15px;
	  padding: 12px;
	  background: #f8f9fa;
	  border-radius: 8px;
	  border: 1px solid #e9ecef;
	  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
	  position: relative;
  }
  
  .style-section:last-of-type {
	  margin-bottom: 15px;
  }
  
  .section-title {
	  font-weight: 600;
	  font-size: 13px;
	  color: #2c3e50;
	  margin-bottom: 12px;
	  padding-bottom: 6px;
	  border-bottom: 2px solid #42a5f5;
	  display: flex;
	  align-items: center;
	  gap: 6px;
	  text-transform: uppercase;
	  letter-spacing: 0.3px;
  }
  
  .section-title i {
	  color: #42a5f5;
	  font-size: 14px;
	  background: rgba(66, 165, 245, 0.1);
	  padding: 4px;
	  border-radius: 4px;
	  width: 24px;
	  height: 24px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
  }
  
  /* 不同区域的特殊样式 */
  .style-section:nth-child(2) .section-title {
	  border-bottom-color: #e74c3c;
  }
  
  .style-section:nth-child(2) .section-title i {
	  color: #e74c3c;
	  background: rgba(231, 76, 60, 0.1);
  }
  
  .style-section:nth-child(3) .section-title {
	  border-bottom-color: #f39c12;
  }
  
  .style-section:nth-child(3) .section-title i {
	  color: #f39c12;
	  background: rgba(243, 156, 18, 0.1);
  }
  
  .style-section:nth-child(4) .section-title {
	  border-bottom-color: #27ae60;
  }
  
  .style-section:nth-child(4) .section-title i {
	  color: #27ae60;
	  background: rgba(39, 174, 96, 0.1);
  }
  
  /* 减少表单项间距 */
  .style-section .row.g-2.mb-2 {
	  margin-bottom: 8px !important;
  }
  
  .style-section .row.g-2.mb-3 {
	  margin-bottom: 10px !important;
  }
  
  /* 调整标签和输入框大小 */
  .style-section .form-label.small {
	  font-size: 12px !important;
	  margin-bottom: 2px !important;
	  line-height: 1.2 !important;
	  font-weight: 500 !important;
  }
  
  .style-section .form-control-sm {
	  padding: 4px 6px;
	  font-size: 12px;
	  height: 28px;
	  min-height: 28px;
  }
  
  /* 调整颜色选择器大小 */
  .style-section input[type="color"] {
	  width: 32px !important;
	  height: 28px !important;
	  padding: 1px !important;
	  border: 1px solid #ddd !important;
  }
  
  .style-section .form-group {
	  margin-bottom: 10px !important;
  }
  
  .style-section .form-control {
	  width: 100% !important;
	  box-sizing: border-box !important;
  }
  
  .style-section .btn {
	  display: inline-block !important;
	  visibility: visible !important;
	  opacity: 1 !important;
	  position: relative !important;
	  z-index: 10 !important;
	  cursor: pointer !important;
  }
  
  .style-section .btn-primary {
	  background: linear-gradient(90deg,#42a5f5,#26c6da) !important;
	  border: none !important;
	  border-radius: 8px !important;
	  color: white !important;
	  font-weight: 700 !important;
  }
  
  .style-section .btn-primary:hover {
	  background: linear-gradient(90deg,#1976d2,#42a5f5) !important;
	  color: white !important;
  }
  
  .style-section .btn-warning {
	  background: #ffc107 !important;
	  border: none !important;
	  border-radius: 8px !important;
	  color: white !important;
	  font-weight: 700 !important;
  }
  
  .style-section .btn-info {
	  background: #17a2b8 !important;
	  border: none !important;
	  border-radius: 8px !important;
	  color: white !important;
	  font-weight: 700 !important;
  }
  
  .style-section .btn-secondary {
	  background: #6c757d !important;
	  border: none !important;
	  border-radius: 8px !important;
	  color: white !important;
	  font-weight: 700 !important;
  }
  
  .style-section .btn-sm {
	  font-size: 13px !important;
	  padding: 6px 12px !important;
  }
  
  .style-section .form-label {
	  font-weight: bold;
	  margin-bottom: 5px;
  }
  
  .style-section .form-label small {
	  font-weight: normal;
	  margin-left: 5px;
  }
  
  .style-section .form-control:focus {
	  border-color: #42a5f5 !important;
	  box-shadow: 0 0 0 0.2rem rgba(66, 165, 245, 0.25) !important;
	  outline: none !important;
  }
  
  .style-section .form-control:focus + .btn-primary {
	  border-color: #42a5f5 !important;
  }
  
  .style-section .form-control:focus + .btn-warning {
	  border-color: #ffc107 !important;
  }
  
  .style-section .form-control:focus + .btn-info {
	  border-color: #17a2b8 !important;
  }
  
  .style-section .form-control:focus + .btn-secondary {
	  border-color: #6c757d !important;
  }
  
  .style-section .form-control:focus + .btn-sm {
	  border-color: #42a5f5 !important;
  }
  
  .style-section .form-control:focus + .btn-primary:hover {
	  background: linear-gradient(90deg,#1976d2,#42a5f5) !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-warning:hover {
	  background: #ffc107 !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-info:hover {
	  background: #17a2b8 !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-secondary:hover {
	  background: #6c757d !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-sm:hover {
	  background: #42a5f5 !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-primary:active {
	  background: linear-gradient(90deg,#1976d2,#42a5f5) !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-warning:active {
	  background: #ffc107 !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-info:active {
	  background: #17a2b8 !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-secondary:active {
	  background: #6c757d !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-sm:active {
	  background: #42a5f5 !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-primary:focus {
	  background: linear-gradient(90deg,#1976d2,#42a5f5) !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-warning:focus {
	  background: #ffc107 !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-info:focus {
	  background: #17a2b8 !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-secondary:focus {
	  background: #6c757d !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-sm:focus {
	  background: #42a5f5 !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-primary:hover:focus {
	  background: linear-gradient(90deg,#1976d2,#42a5f5) !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-warning:hover:focus {
	  background: #ffc107 !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-info:hover:focus {
	  background: #17a2b8 !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-secondary:hover:focus {
	  background: #6c757d !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-sm:hover:focus {
	  background: #42a5f5 !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-primary:active:focus {
	  background: linear-gradient(90deg,#1976d2,#42a5f5) !important;
	  color: white !important;
  }
  
  .style-section .form-control:focus + .btn-warning:active:focus {
	  background: #ffc107 !important;
	  color: white !important;
  }
  
  /* 调整标签和输入框大小 */
  .style-section .form-label.small {
	  font-size: 12px !important;
	  margin-bottom: 2px !important;
	  line-height: 1.2 !important;
	  font-weight: 500 !important;
  }
  
  /* 确保所有标签都使用相同样式 */
  .style-section label.form-label {
	  font-size: 12px !important;
	  margin-bottom: 2px !important;
	  line-height: 1.2 !important;
	  font-weight: 500 !important;
  }
  
  .style-section .form-control-sm {
	  padding: 4px 6px;
	  font-size: 12px;
	  height: 28px;
	  min-height: 28px;
  }
  
  /* 调整颜色选择器大小 */
  .style-section input[type="color"] {
	  width: 32px !important;
	  height: 28px !important;
	  padding: 1px !important;
	  border: 1px solid #ddd !important;
  }
  
  /* 减少行间距 */
  .style-section .row.g-2.mb-2 {
	  margin-bottom: 8px !important;
  }
  
  .style-section .row.g-2.mb-3 {
	  margin-bottom: 10px !important;
  }
  
  /* 确保数字输入框不会太宽 */
  .style-section input[type="number"] {
	  min-width: 0;
	  width: 100%;
  }
  
  /* 预设样式搭配 */
  .preset-styles-container {
	  margin-bottom: 10px;
  }
  
  .preset-styles-row {
	  display: flex;
	  gap: 2px;
	  margin-bottom: 8px;
	  align-items: center;
	  justify-content: center;
	  flex-wrap: wrap;
  }
  
  .preset-style-item {
	  flex: 0 0 auto;
	  padding: 2px;
	  border: 2px solid #e0e0e0;
	  border-radius: 6px;
	  cursor: pointer;
	  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	  background: #ffffff;
	  text-align: center;
	  width: 32px;
	  height: 30px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  
  .preset-style-item:hover {
	  border-color: #42a5f5;
	  transform: translateY(-2px);
	  box-shadow: 0 4px 12px rgba(66, 165, 245, 0.2), 0 2px 4px rgba(66, 165, 245, 0.1);
  }
  
  .preset-style-item.selected {
	  border-color: #42a5f5;
	  box-shadow: 0 0 0 2px rgba(66, 165, 245, 0.2), 0 2px 8px rgba(66, 165, 245, 0.15);
  }
  
  .preset-preview {
	  width: 100%;
	  height: 20px;
	  border-radius: 4px;
	  border: 1px solid #e0e0e0;
	  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
  }
  
  .preset-name {
	  font-size: 11px;
	  color: #666;
	  font-weight: 500;
	  line-height: 1.2;
  }
  
  .preset-toggle {
	  margin-left: 6px;
	  display: flex;
	  align-items: center;
  }
  
  .preset-toggle button {
	  background: linear-gradient(145deg, #ffffff, #f0f0f0);
	  border: 1px solid #e0e0e0;
	  color: #666;
	  font-size: 11px;
	  padding: 0;
	  border-radius: 12px;
	  cursor: pointer;
	  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	  width: 24px;
	  height: 24px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  box-shadow: 
		  0 2px 4px rgba(0,0,0,0.06),
		  0 1px 2px rgba(0,0,0,0.04),
		  inset 0 1px 0 rgba(255,255,255,0.8);
	  position: relative;
	  overflow: hidden;
	  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  }
  
  .preset-toggle button::before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background: linear-gradient(145deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
	  border-radius: 12px;
	  pointer-events: none;
	  opacity: 0;
	  transition: opacity 0.3s ease;
  }
  
  .preset-toggle button:hover {
	  border-color: #42a5f5;
	  color: #42a5f5;
	  background: linear-gradient(145deg, #e8f4fd, #d1e9fb);
	  transform: translateY(-1px) scale(1.05);
	  box-shadow: 
		  0 4px 12px rgba(66, 165, 245, 0.3),
		  0 2px 6px rgba(66, 165, 245, 0.2),
		  inset 0 1px 0 rgba(255,255,255,0.9);
  }
  
  .preset-toggle button:hover::before {
	  opacity: 1;
  }
  
  .preset-toggle button:active {
	  transform: translateY(0) scale(1);
	  box-shadow: 
		  0 2px 4px rgba(0,0,0,0.06),
		  0 1px 2px rgba(0,0,0,0.04),
		  inset 0 1px 0 rgba(255,255,255,0.8);
  }
  
  .preset-toggle button:focus {
	  outline: none;
	  box-shadow: 
		  0 0 0 2px rgba(66, 165, 245, 0.2),
		  0 2px 4px rgba(0,0,0,0.06),
		  0 1px 2px rgba(0,0,0,0.04);
  }
  
  .preset-toggle button i {
	  font-size: 9px;
	  line-height: 1;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 100%;
	  height: 100%;
	  position: relative;
	  z-index: 1;
	  font-weight: 600;
  }
  
  /* 优化emoji显示 */
  .preset-toggle button {
	  font-size: 10px;
	  line-height: 1;
	  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
  
  /* 表格样式类 */
  .table-container {
	background-color: #ffffff;
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(66,165,245,0.06);
	margin: 0 auto;
	overflow: visible; /* 确保表格容器不会产生独立滚动条 */
  }
  
  .table-title {
	margin-bottom: 16px;
	text-align: center;
	font-weight: bold;
  }
  
  .table-stats {
	margin-bottom: 16px;
	text-align: center;
	color: #666;
	font-size: 14px;
  }
  
  .table-wrapper {
	background-color: transparent;
	width: 100%;
	margin: 0 auto;
  }
  
  .data-table {
	width: 100%;
	border-collapse: collapse;
  }
  
  .table-header {
	background-color: #42a5f5;
	color: #ffffff;
	font-weight: bold;
  }
  
  .table-header th {
	padding: 10px;
	border: 1px solid #ddd;
	text-align: center;
  }
  
  .table-row {
	color: #000000;
  }
  
  .table-cell {
	padding: 10px;
	border: 1px solid #ddd;
	text-align: left;
  }
  
  /* 响应式表格 */
  @media (max-width: 768px) {
	.table-container {
	  padding: 10px;
	}
	
	.table-header th,
	.table-cell {
	  padding: 5px;
	  font-size: 0.9rem;
	}
  }
  
  /* 表格历史记录样式 */
  .table-history-list {
	max-height: 300px;
	overflow-y: auto;
  }
  
  .table-history-item {
	display: flex;
	align-items: center;
	padding: 10px;
	margin-bottom: 8px;
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
  }
  
  .table-history-item:hover {
	background: #e9ecef;
	border-color: #42a5f5;
	transform: translateX(2px);
  }
  
  .table-history-item.active {
	background: #e3f2fd;
	border-color: #42a5f5;
	box-shadow: 0 2px 4px rgba(66, 165, 245, 0.2);
  }
  
  .table-history-icon {
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, #42a5f5, #26c6da);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 14px;
	margin-right: 10px;
	flex-shrink: 0;
  }
  
  .table-history-content {
	flex: 1;
	min-width: 0;
  }
  
  .table-history-title {
	font-weight: 600;
	font-size: 14px;
	color: #333;
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
  }
  
  .table-history-info {
	font-size: 12px;
	color: #666;
	display: flex;
	align-items: center;
	gap: 8px;
  }
  
  .table-history-time {
	color: #999;
  }
  
  .table-history-actions {
	display: flex;
	gap: 4px;
	margin-left: 8px;
  }
  
  .table-history-action {
	width: 24px;
	height: 24px;
	border: none;
	background: rgba(66, 165, 245, 0.1);
	color: #42a5f5;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 12px;
  }
  
  .table-history-action:hover {
	background: #42a5f5;
	color: white;
  }
  
  .table-history-empty {
	text-align: center;
	padding: 20px;
	color: #999;
  }
  
  .table-history-loading {
	text-align: center;
	padding: 20px;
	color: #666;
  }
  
  .table-history-loading i {
	animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
  }
  
  /* 表格编辑功能样式 */
  .editable-table {
	  position: relative;
  }
  
  .editable-title {
	  cursor: pointer;
	  border: 1px dashed transparent;
	  padding: 5px;
	  border-radius: 4px;
	  transition: all 0.3s ease;
  }
  
  .editable-title:hover {
	  border-color: #42a5f5;
	  background-color: rgba(66, 165, 245, 0.1);
  }
  
  .editable-title:focus {
	  outline: none;
	  border-color: #42a5f5;
	  background-color: rgba(66, 165, 245, 0.1);
	  box-shadow: 0 0 0 2px rgba(66, 165, 245, 0.2);
  }
  
  .editable-header {
	  cursor: pointer;
	  position: relative;
	  border: 1px dashed transparent;
	  transition: all 0.3s ease;
  }
  
  .editable-header:hover {
	  border-color: #42a5f5;
	  background-color: rgba(66, 165, 245, 0.1);
  }
  
  .editable-header:focus {
	  outline: none;
	  border-color: #42a5f5;
	  background-color: rgba(66, 165, 245, 0.1);
	  box-shadow: 0 0 0 2px rgba(66, 165, 245, 0.2);
  }
  
  .editable-cell {
	  cursor: pointer;
	  border: 1px dashed transparent;
	  transition: all 0.3s ease;
  }
  
  .editable-cell:hover {
	  border-color: #42a5f5;
	  background-color: rgba(66, 165, 245, 0.05);
  }
  
  .editable-cell:focus {
	  outline: none;
	  border-color: #42a5f5;
	  background-color: rgba(66, 165, 245, 0.1);
	  box-shadow: 0 0 0 2px rgba(66, 165, 245, 0.2);
  }
  
  /* 删除按钮样式 */
  .delete-column-btn,
  .delete-row-btn {
	  position: absolute;
	  top: 2px;
	  right: 2px;
	  width: 16px;
	  height: 16px;
	  border: none;
	  background-color: #f44336;
	  color: white;
	  border-radius: 50%;
	  font-size: 10px;
	  line-height: 1;
	  cursor: pointer;
	  opacity: 0;
	  transition: opacity 0.3s ease;
	  z-index: 10;
  }
  
  .delete-column-btn:hover,
  .delete-row-btn:hover {
	  background-color: #d32f2f;
	  opacity: 1;
  }
  
  .editable-header:hover .delete-column-btn,
  .editable-cell:hover .delete-row-btn {
	  opacity: 1;
  }
  
  /* 新增行按钮样式 */
  .new-row-btn {
	  margin-top: 10px;
	  width: 100%;
  }
  
  /* 编辑模式下的表格样式调整 */
  .editable-table th,
  .editable-table td {
	  position: relative;
	  min-height: 20px;
  }
  
  .editable-table th {
	  padding-right: 25px;
  }
  
  .editable-table td:first-child {
	  padding-right: 25px;
  }
  
  /* 文本→表格弹窗样式增强 */
  #textToTableInput:focus {
	  border-color: #42a5f5 !important;
	  box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.1) !important;
	  outline: none;
  }
  
  #textToTableInput {
	  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
	  line-height: 1.5;
  }
  
  /* 示例按钮悬停效果 */
  .btn-outline-secondary.btn-xs:hover {
	  background-color: #42a5f5;
	  border-color: #42a5f5;
	  color: white;
	  transform: translateY(-1px);
	  box-shadow: 0 2px 4px rgba(66, 165, 245, 0.2);
  }
  
  /* 转换按钮悬停效果 */
  #convertTextToTableBtn:hover:not(:disabled) {
	  transform: translateY(-2px);
	  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
  }
  
  #convertTextToTableBtn:disabled {
	  opacity: 0.7;
	  cursor: not-allowed;
  }
  
  /* 确保删除按钮不影响单元格编辑 */
  .delete-row-btn {
	  pointer-events: auto;
	  width: 18px;
	  height: 18px;
	  font-size: 12px;
	  font-weight: bold;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  background-color: #f44336;
	  border: 1px solid #d32f2f;
  }
  
  .delete-row-btn:hover {
	  background-color: #d32f2f;
	  transform: scale(1.1);
  }
  
  .editable-cell {
	  position: relative;
  }
  
  /* 优化编辑单元格的样式 */
  .editable-cell {
	  position: relative;
	  min-height: 20px;
	  padding: 8px 12px;
	  cursor: text;
  }
  
  .editable-cell:focus {
	  outline: none;
	  border-color: #42a5f5;
	  background-color: rgba(66, 165, 245, 0.1);
	  box-shadow: 0 0 0 2px rgba(66, 165, 245, 0.2);
  }
  
  /* 删除按钮列样式 */
  .delete-cell {
	  width: 40px !important;
	  text-align: center;
	  vertical-align: middle;
	  padding: 4px !important;
	  border: none !important;
	  background: transparent !important;
  }
  
  .delete-cell:hover {
	  background-color: rgba(244, 67, 54, 0.1) !important;
  }