/* ========================================
   全局设计系统 (Design Tokens)
   情侣小程序统一视觉规范
   ======================================== */
page {
  /* 主色板 */
  --primary: #B74768;          /* 主色：玫瑰粉 */
  --primary-deep: #943C58;     /* 深玫红 */
  --primary-light: #F4E2E3;    /* 浅粉底 */
  --primary-gradient: linear-gradient(135deg, #B74768 0%, #D5A6AE 100%);
  --primary-gradient-deep: linear-gradient(135deg, #943C58 0%, #B74768 100%);

  /* 辅助色 */
  --gold: #FFB84D;             /* 金色：成就/倒计时 */
  --gold-light: #FFF3DF;
  --success: #2ECC71;          /* 成功 */
  --success-light: #E8F9EF;

  /* 中性色 */
  --text-main: #333333;
  --text-sub: #888888;
  --text-light: #BBBBBB;
  --bg: #FAF5EE;
  --bg-soft: #F3EBE1;
  --white: #FFFFFF;

  /* 圆角 */
  --radius-sm: 12rpx;
  --radius-md: 20rpx;
  --radius-lg: 32rpx;
  --radius-full: 999rpx;

  /* 阴影 */
  --shadow-sm: 0 4rpx 16rpx rgba(0,0,0,0.05);
  --shadow-md: 0 8rpx 30rpx rgba(255,107,129,0.10);
  --shadow-lg: 0 16rpx 48rpx rgba(255,107,129,0.18);

  /* 间距 */
  --gap-sm: 16rpx;
  --gap-md: 24rpx;
  --gap-lg: 32rpx;

  /* 过渡 */
  --transition: all 0.3s ease;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 28rpx;
  color: var(--text-main);
  background-color: var(--bg);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

/* 隐藏所有滚动条 */
::-webkit-scrollbar { display: none; }
scroll-view ::-webkit-scrollbar { display: none; }


/* 通用容器 */
.container {
  padding: 30rpx;
}

/* 卡片样式 */
.card {
  background: var(--white);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

/* 按钮样式 */
.btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: var(--white);
  border: none;
  border-radius: 50rpx;
  padding: 24rpx 60rpx;
  font-size: 28rpx;
}

.btn-outline {
  background: transparent;
  color: var(--primary-color);
  border: 2rpx solid var(--primary-color);
  border-radius: 50rpx;
  padding: 22rpx 60rpx;
  font-size: 28rpx;
}

/* 输入框 */
.input-group {
  margin-bottom: 30rpx;
}

.input-group label {
  display: block;
  font-size: 26rpx;
  color: var(--text-light);
  margin-bottom: 10rpx;
}

.input-group input {
  width: 100%;
  padding: 24rpx;
  border: 2rpx solid #eee;
  border-radius: 16rpx;
  font-size: 28rpx;
}

/* Flex布局 */
.flex {
  display: flex;
}

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

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

.flex-col {
  display: flex;
  flex-direction: column;
}

/* 文字 */
.text-center {
  text-align: center;
}

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

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

/* 间距 */
.mt-20 {
  margin-top: 20rpx;
}

.mt-40 {
  margin-top: 40rpx;
}

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

.mb-40 {
  margin-bottom: 40rpx;
}

/* ========================================
   公共卡片类（设计系统）
   ======================================== */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--gap-lg);
  box-shadow: var(--shadow-sm);
}

.card-primary {
  background: var(--primary-gradient);
  border-radius: var(--radius-lg);
  padding: var(--gap-lg);
  box-shadow: var(--shadow-md);
  color: var(--white);
}

/* 渐变文字 */
.text-gradient {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 胶囊标签 */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 6rpx 20rpx;
  border-radius: var(--radius-full);
  font-size: 22rpx;
  background: var(--primary-light);
  color: var(--primary);
}

/* 图标圆底 */
.icon-bubble {
  width: 96rpx;
  height: 96rpx;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44rpx;
}

/* ========================================
   动效类（设计系统）
   ======================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30rpx); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12rpx); }
}

.anim-fade-up { animation: fadeUp 0.5s ease both; }
.anim-fade-in { animation: fadeIn 0.6s ease both; }
.anim-pulse   { animation: pulse 2s ease-in-out infinite; }
.anim-floaty  { animation: floaty 3s ease-in-out infinite; }

/* 错峰入场：配合 .anim-fade-up 使用 */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }

/* 按压反馈 */
.press {
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.press:active {
  transform: scale(0.96);
  opacity: 0.85;
}

/* ========================================
   空状态（设计系统）
   ======================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 40rpx;
}
.empty-illustration {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72rpx;
  margin-bottom: var(--gap-md);
}
.empty-title {
  font-size: 30rpx;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 12rpx;
}
.empty-desc {
  font-size: 26rpx;
  color: var(--text-sub);
  margin-bottom: var(--gap-lg);
  text-align: center;
}
.empty-btn {
  background: var(--primary-gradient);
  color: var(--white);
  font-size: 28rpx;
  border-radius: var(--radius-full);
  padding: 20rpx 64rpx;
  border: none;
}
.empty-btn::after { border: none; }