/* ========================================== */
/* 内联样式迁移 - 表单与布局类 */
/* ========================================== */

/* Flex 布局类 */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-items-center {
  /* display: flex; */
  align-items: center;
  justify-content: center;
}

.flex-gap-8 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flex-gap-10 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flex-gap-12 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* 文本对齐 */
.text-center {
  text-align: center;
}

/* 字体大小 */
.text-xs {
  font-size: 11px;
}

.text-sm {
  font-size: 12px;
}

.text-base {
  font-size: 13px;
}

.text-md {
  font-size: 14px;
}

.text-lg {
  font-size: 15px;
}

.text-xl {
  font-size: 18px;
}

.text-2xl {
  font-size: 20px;
}

.text-3xl {
  font-size: 24px;
}

.text-4xl {
  font-size: 32px;
}

.text-5xl {
  font-size: 70px;
}

/* 字体粗细 */
.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

/* 颜色 */
.text-red {
  color: var(--red);
}

.text-gold {
  color: var(--gold);
}

.text-gold-light {
  color: var(--gold-light);
}

.text-mid {
  color: var(--text-mid);
}

.text-muted {
  color: var(--text-muted);
}

.text-dark {
  color: var(--text-dark);
}

.text-green {
  color: #06C755;
}

.text-red-dark {
  color: #C0392B;
}

.text-white {
  color: white;
}

/* 背景色 */
.bg-red {
  background: #E8472A;
}

.bg-green {
  background: #06C755;
}

.bg-blue {
  background: #4A90D9;
}

.bg-parchment {
  background: var(--parchment);
}

.bg-overlay {
  background: rgba(0, 0, 0, 0.75);
}

.bg-card {
  background: rgba(255, 255, 255, 0.05);
}

.bg-warning {
  background: rgba(192, 57, 43, 0.06);
}

/* 边框 */
.border-white {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.border-red {
  border: 1px solid rgba(232, 71, 42, 0.3);
}

.border-warning {
  border: 1px solid rgba(192, 57, 43, 0.25);
}

/* 圆角 */
.rounded-6 {
  border-radius: 6px;
}

.rounded-8 {
  border-radius: 8px;
}

.rounded-12 {
  border-radius: 12px;
}

.rounded-16 {
  border-radius: 16px;
}

.rounded-t-24 {
  border-radius: 24px 24px 0 0;
}

/* 间距 */
.mt-4 {
  margin-top: 4px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-12 {
  margin-top: 12px;
}

.mt-14 {
  margin-top: 14px;
}

.mt-18 {
  margin-top: 18px;
}

.mb-8 {
  margin-bottom: 8px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-30 {
  margin-bottom: 30px;
}

.p-6 {
  padding: 6px;
}

.p-10 {
  padding: 10px;
}

.p-12 {
  padding: 12px;
}

.p-14 {
  padding: 14px;
}

.p-18 {
  padding: 18px;
}

.p-24 {
  padding: 24px;
}

.p-32 {
  padding: 32px;
}

.px-10 {
  padding-left: 10px;
  padding-right: 10px;
}

/* 位置 */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.inset-0 {
  inset: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.top-0 {
  top: 0;
}

.z-999 {
  z-index: 999;
}

.z-9000 {
  z-index: 9000;
}

/* 溢出 */
.overflow-hidden {
  overflow: hidden;
}

/* 光标 */
.cursor-pointer {
  cursor: pointer;
}

/* 透明度 */
.opacity-70 {
  opacity: 0.7;
}

.opacity-90 {
  opacity: 0.9;
}

/* 行高 */
.leading-2 {
  line-height: 2;
}

.leading-18 {
  line-height: 1.8;
}

/* 最小宽度 */
.min-w-36 {
  min-width: 36px;
}

/* 宽度 */
.w-full {
  width: 100%;
}

.max-w-480 {
  max-width: 480px;
}

/* 高度 */
.h-80 {
  height: 80px;
}

/* 渐变 */
.gradient-gold {
  background: linear-gradient(135deg, rgba(232, 71, 42, 0.15), rgba(108, 61, 200, 0.15));
}

.gradient-mask {
  background: linear-gradient(transparent, var(--parchment));
}

/* 特殊组件样式 */
.countdown-box {
  background: #E8472A;
  color: white;
  font-size: 20px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  min-width: 36px;
  text-align: center;
}

.badge-green {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #06C755;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  letter-spacing: 0.5px;
}

.badge-blue {
  background: #4A90D9;
  color: white;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 4px;
}

/* 隐藏 */
.hidden {
  display: none;
}

/* Noto Serif 字体 */
.font-serif {
  font-family: 'Noto Serif TC', serif;
}


/* 额外工具类 */
.flex-1 { flex: 1; }
.min-w-0 { min-width: 0; }
.h-80 { height: 80px; }
.bg-gradient-mask { background: linear-gradient(transparent, var(--parchment)); }
.bg-card-light { background: rgba(255, 255, 255, 0.05); }
.border-white-light { border: 1px solid rgba(255, 255, 255, 0.1); }
/* 更多工具类 */

/* 尺寸 */
.w-6 { width: 6px; }
.h-6 { height: 6px; }
.w-8 { width: 8px; }
.h-8 { height: 8px; }
.w-54 { width: 54px; }
.h-54 { height: 54px; }

/* 布局 */
.flex-col { flex-direction: column; }
.gap-6 { gap: 6px; }

/* 边框 */
.border-l-red-dark { border-left: 3px solid #C0392B; }

/* 颜色 */
.bg-red-dark { background: #C0392B; }
.bg-white-60 { background: rgba(255, 255, 255, 0.6); }
.text-brown { color: #9C7050; }
.text-dark-brown { color: #2C1810; }
.text-gray-600 { color: #666; }

/* 动画 */
.animate-live-pulse { animation: livePulse 1.5s ease-in-out infinite; }

/* 效果 */
.blur-sm { filter: blur(4px); }

/* 间距 */
.mb-2 { margin-bottom: 2px; }
.mb-6 { margin-bottom: 6px; }

/* 其他 */
.object-cover { object-fit: cover; }
.tracking-wider { letter-spacing: 2px; }