/* 导入 Tailwind 的基础样式 */
@tailwind base;
/* 导入 Tailwind 的组件类 */
@tailwind components;
/* 导入 Tailwind 的工具类 */
@tailwind utilities;

/* 自定义组件样式 */
@layer components {
	/* 表单卡片样式：用于可拖拽元素和表单项 */
	.form-card {
		@apply p-4 rounded-lg shadow-sm border border-gray-200 hover:border-gray-300 transition-colors;
	}

	/* 表单输入框样式 */
	.form-input {
		@apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
	}

	/* 表单标签样式 */
	.form-label {
		@apply block text-sm font-medium text-gray-700 mb-1;
	}

	/* 表单按钮样式 */
	.form-button {
		@apply px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors;
	}

	/* 表单拖放区域样式 */
	.form-area {
		@apply min-h-[200px] p-6 border-2 border-dashed rounded-lg transition-colors;
	}
}
