/* ==================== Vue3 Uni-app X 全局样式 ==================== */
/* 基于Vue2项目样式系统完整迁移 */

/* ⚠️⚠️⚠️ 重要通知 ⚠️⚠️⚠️ 
 * 
 * 此文件将逐步废弃，已被新的模块化样式系统替代
 * 
 * 新样式系统位置：common/styles/index.css（及其模块文件）
 * 迁移指南：docs/样式迁移快速指南.md
 * 
 * 新代码请使用新样式系统，旧代码可继续使用（向后兼容）
 * 
 * 备份文件：global.css.backup
 * 更新时间：2025-12-10
 * 
 * ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️
 */

/* ==================== 基础重置 ==================== */
page {
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: 28rpx;
  color: #333333;
  line-height: 1.5;
}

view, text, image {
  box-sizing: border-box;
}

/* ==================== Flex布局工具类 ==================== */
.flex-row { display: flex; flex-direction: row; }
.flex-column { display: flex; flex-direction: column; }
.flex-center { justify-content: center; }
.flex-start { justify-content: flex-start; }
.flex-end { justify-content: flex-end; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-4 { flex: 4; }

/* ==================== 内边距 - Padding Top ==================== */
.pt-6 { padding-top: 6rpx; }
.pt-10 { padding-top: 10rpx; }
.pt-12 { padding-top: 12rpx; }
.pt-14 { padding-top: 14rpx; }
.pt-16 { padding-top: 16rpx; }
.pt-20 { padding-top: 20rpx; }
.pt-24 { padding-top: 24rpx; }
.pt-26 { padding-top: 26rpx; }
.pt-28 { padding-top: 28rpx; }
.pt-30 { padding-top: 30rpx; }
.pt-32 { padding-top: 32rpx; }
.pt-36 { padding-top: 36rpx; }
.pt-40 { padding-top: 40rpx; }
.pt-48 { padding-top: 48rpx; }
.pt-76 { padding-top: 76rpx; }

/* ==================== 内边距 - Padding Right ==================== */
.pr-12 { padding-right: 12rpx; }
.pr-16 { padding-right: 16rpx; }
.pr-20 { padding-right: 20rpx; }
.pr-24 { padding-right: 24rpx; }
.pr-28 { padding-right: 28rpx; }
.pr-32 { padding-right: 32rpx; }
.pr-48 { padding-right: 48rpx; }

/* ==================== 内边距 - Padding Bottom ==================== */
.pb-2 { padding-bottom: 2rpx; }
.pb-4 { padding-bottom: 4rpx; }
.pb-6 { padding-bottom: 6rpx; }
.pb-8 { padding-bottom: 8rpx; }
.pb-12 { padding-bottom: 12rpx; }
.pb-18 { padding-bottom: 18rpx; }
.pb-20 { padding-bottom: 20rpx; }
.pb-22 { padding-bottom: 22rpx; }
.pb-24 { padding-bottom: 24rpx; }
.pb-28 { padding-bottom: 28rpx; }
.pb-32 { padding-bottom: 32rpx; }
.pb-40 { padding-bottom: 40rpx; }
.pb-48 { padding-bottom: 48rpx; }

/* ==================== 内边距 - Padding Left ==================== */
.pl-16 { padding-left: 16rpx; }
.pl-20 { padding-left: 20rpx; }
.pl-24 { padding-left: 24rpx; }
.pl-26 { padding-left: 26rpx; }
.pl-28 { padding-left: 28rpx; }
.pl-32 { padding-left: 32rpx; }

/* ==================== 内边距 - 组合 ==================== */
.p-10 { padding: 10rpx; }
.p-12 { padding: 12rpx; }
.p-24 { padding: 24rpx; }

.plr-10 { padding-left: 10rpx; padding-right: 10rpx; }
.plr-12 { padding-left: 12rpx; padding-right: 12rpx; }
.plr-14 { padding-left: 14rpx; padding-right: 14rpx; }
.plr-18 { padding-left: 18rpx; padding-right: 18rpx; }
.plr-20 { padding-left: 20rpx; padding-right: 20rpx; }
.plr-22 { padding-left: 22rpx; padding-right: 22rpx; }
.plr-24 { padding-left: 24rpx; padding-right: 24rpx; }
.plr-28 { padding-left: 28rpx; padding-right: 28rpx; }
.plr-32 { padding-left: 32rpx; padding-right: 32rpx; }
.plr-36 { padding-left: 36rpx; padding-right: 36rpx; }
.plr-40 { padding-left: 40rpx; padding-right: 40rpx; }
.plr-48 { padding-left: 48rpx; padding-right: 48rpx; }
.plr-60 { padding-left: 60rpx; padding-right: 60rpx; }
.plr-128 { padding-left: 128rpx; padding-right: 128rpx; }

.ptb-2 { padding-top: 2rpx; padding-bottom: 2rpx; }
.ptb-6 { padding-top: 6rpx; padding-bottom: 6rpx; }
.ptb-8 { padding-top: 8rpx; padding-bottom: 8rpx; }
.ptb-10 { padding-top: 10rpx; padding-bottom: 10rpx; }
.ptb-12 { padding-top: 12rpx; padding-bottom: 12rpx; }
.ptb-14 { padding-top: 14rpx; padding-bottom: 14rpx; }
.ptb-16 { padding-top: 16rpx; padding-bottom: 16rpx; }
.ptb-20 { padding-top: 20rpx; padding-bottom: 20rpx; }
.ptb-24 { padding-top: 24rpx; padding-bottom: 24rpx; }
.ptb-28 { padding-top: 28rpx; padding-bottom: 28rpx; }
.ptb-30 { padding-top: 30rpx; padding-bottom: 30rpx; }
.ptb-32 { padding-top: 32rpx; padding-bottom: 32rpx; }
.ptb-42 { padding-top: 42rpx; padding-bottom: 42rpx; }
.ptb-48 { padding-top: 48rpx; padding-bottom: 48rpx; }
.ptb-64 { padding-top: 64rpx; padding-bottom: 64rpx; }

/* ==================== 外边距 - Margin Top ==================== */
.mt-4 { margin-top: 4rpx; }
.mt-6 { margin-top: 6rpx; }
.mt-8 { margin-top: 8rpx; }
.mt-10 { margin-top: 10rpx; }
.mt-12 { margin-top: 12rpx; }
.mt-16 { margin-top: 16rpx; }
.mt-18 { margin-top: 18rpx; }
.mt-20 { margin-top: 20rpx; }
.mt-22 { margin-top: 22rpx; }
.mt-24 { margin-top: 24rpx; }
.mt-26 { margin-top: 26rpx; }
.mt-28 { margin-top: 28rpx; }
.mt-30 { margin-top: 30rpx; }
.mt-32 { margin-top: 32rpx; }
.mt-36 { margin-top: 36rpx; }
.mt-40 { margin-top: 40rpx; }
.mt-44 { margin-top: 44rpx; }
.mt-48 { margin-top: 48rpx; }
.mt-60 { margin-top: 60rpx; }
.mt-64 { margin-top: 64rpx; }
.mt-94 { margin-top: 94rpx; }
.mt-128 { margin-top: 128rpx; }

/* ==================== 外边距 - Margin Bottom ==================== */
.mb-6 { margin-bottom: 6rpx; }
.mb-10 { margin-bottom: 10rpx; }
.mb-12 { margin-bottom: 12rpx; }
.mb-15 { margin-bottom: 15rpx; }
.mb-16 { margin-bottom: 16rpx; }
.mb-18 { margin-bottom: 18rpx; }
.mb-20 { margin-bottom: 20rpx; }
.mb-24 { margin-bottom: 24rpx; }
.mb-28 { margin-bottom: 28rpx; }
.mb-32 { margin-bottom: 32rpx; }
.mb-48 { margin-bottom: 48rpx; }

/* ==================== 外边距 - Margin Left ==================== */
.ml-6 { margin-left: 6rpx; }
.ml-8 { margin-left: 8rpx; }
.ml-10 { margin-left: 10rpx; }
.ml-12 { margin-left: 12rpx; }
.ml-14 { margin-left: 14rpx; }
.ml-16 { margin-left: 16rpx; }
.ml-18 { margin-left: 18rpx; }
.ml-20 { margin-left: 20rpx; }
.ml-22 { margin-left: 22rpx; }
.ml-24 { margin-left: 24rpx; }
.ml-26 { margin-left: 26rpx; }
.ml-28 { margin-left: 28rpx; }
.ml-32 { margin-left: 32rpx; }
.ml-36 { margin-left: 36rpx; }
.ml-40 { margin-left: 40rpx; }
.ml-48 { margin-left: 48rpx; }
.ml-64 { margin-left: 64rpx; }

/* ==================== 外边距 - Margin Right ==================== */
.mr-8 { margin-right: 8rpx; }
.mr-10 { margin-right: 10rpx; }
.mr-12 { margin-right: 12rpx; }
.mr-15 { margin-right: 15rpx; }
.mr-16 { margin-right: 16rpx; }
.mr-18 { margin-right: 18rpx; }
.mr-20 { margin-right: 20rpx; }
.mr-24 { margin-right: 24rpx; }
.mr-32 { margin-right: 32rpx; }
.mr-40 { margin-right: 40rpx; }
.mr-48 { margin-right: 48rpx; }

/* ==================== 外边距 - 组合 ==================== */
.mlr-24 { margin-left: 24rpx; margin-right: 24rpx; }
.mlr-28 { margin-left: 28rpx; margin-right: 28rpx; }
.mlr-40 { margin-left: 40rpx; margin-right: 40rpx; }

/* ==================== 尺寸 ==================== */
.w100 { width: 100%; }
.h100 { height: 100%; }

/* ==================== 圆角 ==================== */
.border-radius-16 { border-radius: 16rpx; }
.border-radius-24 { border-radius: 24rpx; }
.border-radius-26 { border-radius: 26rpx; }
.border-radius-35 { border-radius: 35rpx; }
.border-radius-100 { border-radius: 100%; }
.br-blr-24 { border-bottom-left-radius: 24rpx; border-bottom-right-radius: 24rpx; }
.no-br { border-radius: 0px !important; }
.br-tl-35 { border-top-left-radius: 35rpx; }
.br-tr-35 { border-top-right-radius: 35rpx; }

/* ==================== 文本溢出 ==================== */
.content_1 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.content_2 {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

.content_3 {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

/* ==================== 字体 ==================== */
.font-bold { font-weight: bold; }
.font-500 { font-weight: 400; }
.font-base { font-weight: 400; }
.text-center { text-align: center; }

/* ==================== 字体颜色 ==================== */
.red { color: #F83535; }
.green { color: #22AA76 !important; }
.light-green { color: #3ABA6E; }
.pink { color: #FA5251; }
.ligth-white { color: #DEDDDD; }
.white { color: #FFFFFF !important; }
.gray { color: #999999; }
.dark-gray { color: #7B7B7B; }
.light-theme { color: #F83535; }
.theme { color: #DC3825; }
.base-color { color: #555555; }
.light-black { color: #666666; }
.title-font { color: #333333; }
.orange { color: #FA6400; }
.hint { color: #F83535; }
.blue { color: #3ABCF8; }
.dark-blue { color: #596C96; }
.light-blue { color: #2EAEF2; }
.purple { color: #565AD9; }
.grey { color: #999999; }

/* ==================== 背景颜色 ==================== */
.bg-hint { background-color: #F83535; }
.bg-white { background-color: #FFFFFF; }
.bg-light-gray { background-color: #E5E5E5; }
.bg-light-base { background-color: #EEEEEE; }
.bg-base { background-color: #EDEDED; }
.bg-F2 { background-color: #F2F2F2; }
.bg-transparent { background-color: transparent !important; }
.bg-mask { background: rgba(0,0,0,.35); }
.bg-light-pink { background-color: #fde3f5; }
.bg-light-blue { background-color: #C6EBFF; }
.bg-green { background-color: #22AA76 !important; }
.bg-light-green { background-color: #2CE465; }
.bg-yellow { background-color: #FFC300; }
.bg-pink { background-color: #FA5251 !important; }
.bg-light-black { background-color: #666666; }

/* ==================== 字体大小 ==================== */
.fs-18 { font-size: 18rpx; }
.fs-19 { font-size: 19rpx; }
.fs-20 { font-size: 20rpx; }
.fs-22 { font-size: 22rpx !important; }
.fs-24 { font-size: 24rpx; }
.fs-25 { font-size: 25rpx; }
.fs-26 { font-size: 26rpx; }
.fs-28 { font-size: 28rpx; }
.fs-29 { font-size: 29rpx; }
.fs-30 { font-size: 30rpx; }
.fs-32 { font-size: 32rpx; }
.fs-33 { font-size: 33rpx; }
.fs-35 { font-size: 35rpx; }
.fs-36 { font-size: 36rpx; }
.fs-38 { font-size: 38rpx; }
.fs-40 { font-size: 40rpx; }
.fs-48 { font-size: 48rpx; }
.fs-54 { font-size: 54rpx; }
.fs-64 { font-size: 64rpx; }

/* ==================== 定位 ==================== */
.relative { position: relative; }
.absolute { position: absolute; }

/* ==================== 分割线 ==================== */
.dashed {
  border: none;
  border-bottom: 2rpx dashed #EEEEEE;
}
