/* 边距类 */
.m-10 { margin: 10rpx; }
.m-20 { margin: 20rpx; }
.mt-10 { margin-top: 10rpx; }
.mt-20 { margin-top: 20rpx; }
.mb-10 { margin-bottom: 10rpx; }
.mb-20 { margin-bottom: 20rpx; }
.ml-10 { margin-left: 10rpx; }
.ml-20 { margin-left: 20rpx; }
.mr-10 { margin-right: 10rpx; }
.mr-20 { margin-right: 20rpx; }

.p-10 { padding: 10rpx; }
.p-20 { padding: 20rpx; }
.pt-10 { padding-top: 10rpx; }
.pt-20 { padding-top: 20rpx; }
.pb-10 { padding-bottom: 10rpx; }
.pb-20 { padding-bottom: 20rpx; }
.pl-10 { padding-left: 10rpx; }
.pl-20 { padding-left: 20rpx; }
.pr-10 { padding-right: 10rpx; }
.pr-20 { padding-right: 20rpx; }

/* 文本类 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-bold { font-weight: bold; }
.text-small { font-size: 24rpx; }
.text-normal { font-size: 28rpx; }
.text-large { font-size: 32rpx; }
.text-xl { font-size: 36rpx; }
.text-xxl { font-size: 40rpx; }

/* 颜色类 */
.text-primary { color: #07C160; }
.text-danger { color: #FA5151; }
.text-warning { color: #FFC300; }
.text-info { color: #10AEFF; }
.text-dark { color: #333333; }
.text-muted { color: #999999; }
.text-white { color: #FFFFFF; }

.bg-primary { background-color: #07C160; }
.bg-danger { background-color: #FA5151; }
.bg-warning { background-color: #FFC300; }
.bg-info { background-color: #10AEFF; }
.bg-light { background-color: #F7F7F7; }
.bg-white { background-color: #FFFFFF; }
.bg-dark { background-color: #333333; }

/* 边框类 */
.border { border: 1rpx solid #EEEEEE; }
.border-top { border-top: 1rpx solid #EEEEEE; }
.border-bottom { border-bottom: 1rpx solid #EEEEEE; }
.radius { border-radius: 8rpx; }
.radius-circle { border-radius: 50%; }

/* 阴影类 */
.shadow { box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); }