/* Tailwind自定义工具类 */
@layer utilities {
  .content-auto { content-visibility: auto; }
  .scrollbar-thin { scrollbar-width: thin; }
  .text-shadow { text-shadow: 0 1px 2px rgba(0,0,0,0.1); }
  .card-shadow { box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
  .touch-active { -webkit-tap-highlight-color: transparent; }
  .btn-touch { transition: transform 0.2s ease; }
  .btn-touch:active { transform: scale(0.98); }
}

/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html { font-size: calc(100vw / 375 * 7); }
body {
  background-color: #f5f5f5;
  color: #333;
  font-size: 1.4rem;
  overflow-x: hidden;
  padding-bottom: 7rem;
}
body.popup-open { overflow: hidden; position: fixed; width: 100%; }

/* 头部样式 */
.header {
  height: 6.5rem;
  line-height: 6.5rem;
  text-align: center;
  font-size: 1.8rem;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  position: relative;
}
.back-btn {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  background: url('data:image/svg+xml;utf8,<svg fill="%23333" viewBox="0 0 1024 1024" width="16" height="16"><path d="M328.448 512l339.712 339.712c10.24 10.24 10.24 26.624 0 36.864s-26.624 10.24-36.864 0L291.136 548.864c-10.24-10.24-10.24-26.624 0-36.864l339.136-339.712c10.24-10.24 26.624-10.24 36.864 0s10.24 26.624 0 36.864L328.448 512z"/></svg>') no-repeat center;
}

/* 轮播图样式 */
.banner-swiper {
  width: 96%;
  height: 23rem;
  margin: 1.7rem auto !important;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
}
.banner-slide { width: 100%; height: 100%; display: none; }
.banner-slide.active { display: block; }
.banner-swiper img { width: 100% !important; height: 100% !important; object-fit: fill !important; }

/* 滚动通知条整体容器样式 */
.scroll-notice {
  width: 96%; /* 容器宽度占父元素96%，留出左右边距 */
  height: 4rem; /* 容器固定高度，控制通知条显示区域 */
  margin: 0.8rem auto 1.5rem; /* 上下外边距：上0.8rem、下1.5rem；左右auto实现水平居中 */
  background-color: #fff; /* 容器背景色为白色，提升清爽感 */
  border-radius: 0.6rem; /* 圆角设计，弱化直角生硬感 */
  overflow: hidden; /* 隐藏超出容器的内容，避免滚动时内容溢出 */
  position: relative; /* 相对定位，作为内部绝对定位元素的参考点 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* 轻微阴影，增强容器层次感，不突兀 */
}

/* 滚动内容的外层容器样式 */
.scroll-content {
  position: absolute; /* 绝对定位，脱离文档流，便于控制滚动位置 */
  white-space: nowrap; /* 强制内容不换行，确保文字在同一行水平滚动 */
  height: 100%; /* 高度与父容器一致，确保内容垂直居中 */
  animation: scrollLeft 20s linear infinite; /* 绑定滚动动画：动画名scrollLeft、20秒完成一次、线性速度、无限循环 */
}

/* 滚动内容中的文本标签样式 */
.scroll-content span {
  color: #FF7D00; /* 文本颜色为橙色，突出通知内容 */
  font-size: 1.8rem; /* 字体大小，适配移动端或大尺寸显示 */
  line-height: 4rem; /* 行高与父容器高度一致，实现文本垂直居中 */
  display: inline-block; /* 转为行内块元素，确保line-height生效（纯inline元素line-height无效） */
}

/* 定义向左滚动的动画关键帧 - 优化为无缝循环 */
@keyframes scrollLeft {
  0% {
    transform: translateX(0); /* 动画起始状态：内容从容器左侧开始 */
  }
  100% {
    transform: translateX(-50%); /* 动画结束状态：内容向左移动一半长度，配合多份文本实现无缝循环 */
  }
}

/* 快捷按钮样式 */
.button-container {
  display: flex;
  margin: 3rem 3rem;
  gap: 1.7rem;
  box-sizing: border-box;
  justify-content: center;
  padding: 0 0.5rem;
}
.btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 11.5rem !important;
  min-width: 11.5rem !important;
  max-width: none !important;
  height: 14.4rem;
  border: none;
  border-radius: 10px;
  background-color: #fdfdfd;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  text-decoration: none;
  color: #333;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  -webkit-transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.btn:hover { transform: none !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important; }
.btn:active { transform: scale(0.9) !important; -webkit-transform: scale(0.9) !important; }
.btn-icon {
  display: inline-block;
  width: 7rem;
  height: 7rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  overflow: hidden;
}
.btn-icon img { width: 100%; height: 100%; object-fit: cover; }
.meituan-icon { background-color: #ffffff; }
.eleme-icon { background-color: #ffffff; }
.shangou-icon { background-color: #ffffff; }
.miaosong-icon { background-color: #ffffff; }
.btn-text { font-size: 2rem; text-align: center; }

/* 美团按钮弹跳动画 */
@keyframes meituanBounce {
  0% { transform: translateY(0); }
  20% { transform: translateY(-8px); }
  40% { transform: translateY(0); }
  60% { transform: translateY(-6px); }
  80% { transform: translateY(0); }
  100% { transform: translateY(0); }
}
.meituan-btn-bounce { animation: meituanBounce 2s ease forwards; animation-delay: 0.3s; }

/* 标签栏样式 */
.button-bar-container {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 2rem;
  margin-left: 2%;
  margin-right: 2%;
  border-radius: 1rem;
  overflow: hidden;
}
.button-bar {
  left: 0;
  right: 0;
  width: auto;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  padding: 1rem 1rem 1rem;
  height: 7.5rem;
  box-sizing: border-box;
  white-space: nowrap;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
}
.button-bar.fixed {
  position: fixed;
  z-index: 999;
  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.1);
  top: 0;
}
.button-bar-placeholder { width: 100%; }
.button-item {
  flex: 1;
  display: inline-block;
  padding: 1rem 1;
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  margin: 0 0.5rem;
  border-radius: 1rem;
  background-color: #f5f5f4;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
  text-align: center;
  max-width: 20%;
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-item.active { font-weight: bold; box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.2); }
/* 各标签激活状态样式 */
.button-item[data-tab="tab1"].active, .button-item[data-tab="tab1"]:active { background-color: #F5CA20; color: #ffffff; transform: scale(0.96); }
.button-item[data-tab="tab2"].active, .button-item[data-tab="tab2"]:active { background-color: #27AAE2; color: #ffffff; transform: scale(0.96); }
.button-item[data-tab="tab3"].active, .button-item[data-tab="tab3"]:active { background-color: #E16942; color: #ffffff; transform: scale(0.96); }
.button-item[data-tab="tab4"].active, .button-item[data-tab="tab4"]:active { background-color: #be0e17; color: #ffffff; transform: scale(0.96); }
.button-item[data-tab="tab5"].active, .button-item[data-tab="tab5"]:active { background-color: #e92d34; color: #ffffff; transform: scale(0.96); }

/* 卡片整体样式 */
.card {
  width: 96% !important; /* 卡片宽度占父容器96%（!important强制覆盖样式） */
  height: 18.8rem !important; /* 卡片固定高度（!important强制覆盖样式） */
  min-height: 15rem; /* 卡片最小高度，防止内容过少时高度异常 */
  margin-top: 0.7rem !important; /* 上外边距（!important强制覆盖样式） */
  margin-bottom: 1.7rem !important; /* 下外边距（!important强制覆盖样式） */
  margin: 0 1rem; /* 左右外边距1rem，控制水平间距 */
  background-color: #fff; /* 卡片背景色为白色 */
  border-radius: 1rem !important; /* 卡片圆角1rem（!important强制覆盖样式） */
  border: 1px solid #eee !important; /* 卡片边框为浅灰色（!important强制覆盖样式） */
  box-shadow: 0 0.1rem 0.5rem rgba(0,0,0,0.05) !important; /* 轻微阴影增强层次感（!important强制覆盖样式） */
  display: flex; /* 启用flex布局，使图片和内容横向排列 */
  overflow: hidden; /* 隐藏超出卡片的内容 */
  cursor: pointer; /* 鼠标悬停时显示手型光标，提示可点击 */
}

/* 卡片内图片样式 */
.card img {
  width: 40% !important; /* 图片宽度占卡片40%（!important强制覆盖样式） */
  height: 13rem !important; /* 图片固定高度（!important强制覆盖样式） */
  min-height: 13rem; /* 图片最小高度 */
  margin-top: 2.8rem !important; /* 图片上外边距，控制垂直位置（!important强制覆盖样式） */
  margin: 0 1rem; /* 图片左右外边距1rem */
  border-radius: 0.8rem !important; /* 图片圆角（!important强制覆盖样式） */
  object-fit: fill !important; /* 图片拉伸填充容器（!important强制覆盖样式） */
  display: block; /* 转为块级元素，消除默认inline间隙 */
}

/* 卡片内容容器样式 */
.card-content {
  flex: 1; /* 占据卡片剩余宽度 */
  padding: 1.2rem 0.5rem; /* 内边距，控制内容与边框距离 */
  display: flex; /* 启用flex布局 */
  flex-direction: column; /* 子元素垂直排列 */
  position: relative; /* 相对定位，作为内部绝对定位元素的参考 */
}

/* 卡片标题样式 */
.card-title {
  display: block !important; /* 块级显示（!important强制覆盖样式） */
  color: #030303 !important; /* 标题文字为深黑色（!important强制覆盖样式） */
  font-size: 2.6rem !important; /* 标题字体大小（!important强制覆盖样式） */
  font-weight: bold !important; /* 标题文字加粗（!important强制覆盖样式） */
  margin-top: 1rem !important; /* 标题上外边距（!important强制覆盖样式） */
  margin-bottom: 0.5rem !important; /* 标题下外边距（!important强制覆盖样式） */
  margin-left: 0.8rem !important; /* 标题左外边距（!important强制覆盖样式） */
  margin-right: 0.8rem !important; /* 标题右外边距（!important强制覆盖样式） */
  text-align: left !important; /* 标题左对齐（!important强制覆盖样式） */
  line-height: 1.2 !important; /* 标题行高（!important强制覆盖样式） */
  white-space: nowrap; /* 文字不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

/* 卡片描述文字样式 */
.card-desc {
  display: block !important; /* 块级显示（!important强制覆盖样式） */
  color: #5E5D5D !important; /* 描述文字为中灰色（!important强制覆盖样式） */
  font-size: 1.9rem !important; /* 描述文字大小（!important强制覆盖样式） */
  margin: 0.5rem 0.8rem !important; /* 描述文字外边距（!important强制覆盖样式） */
  text-align: left !important; /* 描述文字左对齐（!important强制覆盖样式） */
  line-height: 1.4 !important; /* 描述文字行高（!important强制覆盖样式） */
  display: -webkit-box; /* 启用webkit盒模型（用于多行省略） */
  -webkit-line-clamp: 2; /* 最多显示2行 */
  -webkit-box-orient: vertical; /* 垂直方向排列 */
  overflow: hidden; /* 超出部分隐藏 */
}

/* 卡片底部按钮行容器样式 */
.card-buttons-row {
  position: absolute; /* 绝对定位，固定在内容底部 */
  bottom: 1.5rem; /* 距离底部1.5rem */
  left: 1.2rem; /* 距离左侧1.2rem */
  right: 1.2rem; /* 距离右侧1.2rem */
  display: flex; /* 启用flex布局，按钮横向排列 */
  gap: 0.8rem; /* 按钮之间的间距 */
}

/* 卡片按钮基础样式 */
.card-button {
  height: 4.9rem !important; /* 按钮高度（!important强制覆盖样式） */
  line-height: 4.9rem !important; /* 行高与高度一致，实现垂直居中（!important强制覆盖样式） */
  font-size: 1.7rem !important; /* 按钮文字大小（!important强制覆盖样式） */
  font-weight: bold !important; /* 按钮文字加粗（!important强制覆盖样式） */
  color: #f8f7f6 !important; /* 按钮文字为近白色（!important强制覆盖样式） */
  text-align: center; /* 文字居中 */
  border-radius: 0.8rem !important; /* 按钮圆角（!important强制覆盖样式） */
  cursor: pointer; /* 手型光标，提示可点击 */
  -webkit-tap-highlight-color: transparent !important; /* 去除移动端点击高亮（!important强制覆盖样式） */
  transition: transform 0.2s ease; /* 点击时的缩放过渡动画 */
  flex: 1; /* 按钮平均分配父容器宽度 */
}

/* 卡片按钮颜色设置 */
.card-buttons-row :nth-child(1) { background-color: #FF9500 !important; } /* 第一个按钮为橙色（!important强制覆盖） */
.card-buttons-row :nth-child(2) { background-color: #FFC837 !important; } /* 第二个按钮为浅橙色（!important强制覆盖） */

/* 卡片按钮点击效果 */
.card-button:active { transform: scale(0.9) !important; } /* 点击时缩小至90%（!important强制覆盖） */

/* 调整卡片内容容器样式（补充） */
.card-content { 
  position: relative; /* 重申相对定位 */
  padding-bottom: 6rem; /* 底部内边距，避免内容被按钮遮挡 */
}

/* 卡片内日期/时间文字样式 */
.card-time {
  display: block !important; /* 块级显示（!important强制覆盖样式） */
  color: #CFCBCB !important; /* 日期文字为浅灰色（!important强制覆盖样式） */
  font-size: 1.7rem !important; /* 日期文字大小（!important强制覆盖样式，调整此值可改变日期大小） */
  margin-top: 1rem !important; /* 日期上外边距（!important强制覆盖样式） */
  margin-bottom: 1rem !important; /* 日期下外边距（!important强制覆盖样式） */
  margin-left: 0.8rem !important; /* 日期左外边距（!important强制覆盖样式） */
  text-align: left !important; /* 日期左对齐（!important强制覆盖样式） */
  line-height: 1 !important; /* 日期行高（!important强制覆盖样式） */
}

/* 链接弹窗样式 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  display: none;
  justify-content: center;
  align-items: center;
}
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90% !important;
  max-width: 500px;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.15);
  z-index: 999;
  padding: 2rem;
  box-sizing: border-box;
  max-height: 90vh;
  overflow-y: auto;
}
.popup-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  line-height: 2.8rem;
  text-align: center;
  font-size: 2rem;
  color: #999;
  border-radius: 50%;
  background-color: #f5f5f5;
  cursor: pointer;
}
.popup-close:active { background-color: #e0e0e0; }
.popup-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 1.5rem;
  padding-top: 0.5rem;
}
.link-container {
  width: 100%;
  background-color: #FFF9E6;
  border-radius: 0.8rem;
  padding: 1.5rem;
  box-sizing: border-box;
  margin-bottom: 1.5rem;
  border: 1px solid #FFE8A3;
}
.link-text {
  font-size: 1.4rem;
  color: #333;
  word-break: break-all;
  line-height: 1.5;
}
.popup-desc-container {
  width: 100%;
  margin-bottom: 1.5rem;
}
.popup-desc {
  font-size: 1.3rem;
  color: #666;
  text-align: left;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}
.copy-btn {
  width: 100%;
  height: 5rem;
  line-height: 5rem;
  text-align: center;
  background-color: #FF7D00;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  border-radius: 0.8rem;
  box-shadow: 0 0.2rem 0 #E06A00;
  margin-top: 0.5rem;
  border: none;
  cursor: pointer;
}
.copy-btn:active {
  background-color: #E06A00;
  box-shadow: 0 0.1rem 0 #C05A00;
  transform: translateY(0.1rem);
}

/* 更多提示样式 */
.more_hint {
  align-items: center;
  color: rgb(94, 92, 92);
  display: flex;
  font-size: 1.4rem;
  justify-content: center;
  margin-top: 2rem;
  padding: 0.5rem;
}

/* 底部导航样式 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7.7rem;
  display: flex;
  background-color: #fff;
  border-top: 1px solid #eee;
  z-index: 9999;
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 2rem;
  color: #666;
  position: relative;
  cursor: pointer;
  min-height: 48px;
}
.nav-icon {
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.5rem;
  object-fit: contain;
}
.nav-item.active { color: #FF7D00; }
.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3rem;
  height: 0.4rem;
  background-color: #FF7D00;
  border-radius: 0.2rem;
}

/* 内容容器样式 */
.content-container { padding-bottom: 1rem; }
.tutorial-content {
  padding: 1rem 0.5rem;
  background-color: #f5f5f5;
  min-height: calc(100vh - 7rem);
  box-sizing: border-box;
}

/* 通知区域样式 */
.notice {
  background-color: #fff;
  border-radius: 10px;
  margin: 15px;
  padding: 15px;
}
.notice h2 {
  color: #ff0000;
  margin-top: 0;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 23px;
  font-weight: bold;
}
.notice h2 .more {
  font-size: 14px;
  color: #999;
  font-weight: normal;
  cursor: pointer;
}
.notice .divider {
  height: 1px;
  background-color: #eee;
  margin-bottom: 15px;
}
.notice .scroll-container {
  max-height: 300px;
  overflow-y: auto;
}
.notice ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}


#latestNoticeList li {
  white-space: pre-wrap; /* 保留文本中的空格和换行 */
  line-height: 1.6;
  margin: 8px 0;
}



.notice li {
  margin-bottom: 15px;
  font-size: 16px;
  cursor: pointer;
}

/* 教程提示样式 */
.tips {
  background-color: #f5f5f5;
  padding: 0 15px 70px;
}
.tips h3 {
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: bold;
}
.tips h3 .icon {
  width: 24px;
  height: 24px;
  background-color: #ffcc00;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  color: #fff;
  font-weight: bold;
}
.tips ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.tips li {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.tips li .link-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.tips li .text-content {
  z-index: 2;
  font-size: 13px;
  color: #999;
}
.tips li .arrow {
  color: #999;
  z-index: 2;
}

/* 标签/页面内容显示控制 */
.tab-content, .page-content { display: none; }
.tab-content.active, .page-content.active { display: block; }

/* 提示框样式 */
.toast {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 2rem;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s;
}
.toast.show { opacity: 1; }

/* 轮播图点击效果 */
.banner-slide:active { opacity: 0.7; }

/* 更多通知页面样式 */
#more-notice-page {
  display: none;
  min-height: calc(100vh - 7.7rem);
  padding: 1.5rem;
  background-color: #f5f5f5;
}
#more-notice-page.active { display: block; }
.notice-header {
  height: 6.5rem;
  line-height: 6.5rem;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  position: relative;
  padding-left: 4rem;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  border-radius: 0.8rem;
  cursor: pointer;
  user-select: none;
}
.notice-back-btn {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  pointer-events: none;
  background: url('data:image/svg+xml;utf8,<svg fill="%23333" viewBox="0 0 1024 1024" width="16" height="16"><path d="M328.448 512l339.712 339.712c10.24 10.24 10.24 26.624 0 36.864s-26.624 10.24-36.864 0L291.136 548.864c-10.24-10.24-10.24-26.624 0-36.864l339.136-339.712c10.24-10.24 26.624-10.24 36.864 0s10.24 26.624 0 36.864L328.448 512z"/></svg>') no-repeat center;
}

/* 优惠券弹窗样式 */
.coupon-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  box-sizing: border-box;
  overflow: hidden;
}
.coupon-popup.show { display: flex; }
.coupon-popup-content {
  background-color: #fff;
  border-radius: 1.2rem;
  width: 100%;
  max-width: 400px;
  padding: 3rem 2rem;
  position: relative;
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.15);
  max-height: 80vh;
  overflow-y: auto;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.coupon-popup-close {
  position: sticky;
  top: 0.1rem;
  right: 1.5rem;
  font-size: 5rem;
  color: #999;
  cursor: pointer;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-left: auto;
  background-color: #fff;
  z-index: 10;
}
.coupon-popup-details {
  font-size: 2.2rem;
  color: #333;
  line-height: 1.8;
  white-space: pre-line;
  margin-top: 1rem;
}

/* 保留换行符样式 */
.keep-line-break { white-space: pre-line; }

/* 加载动画样式 */
.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.loading-spinner::after {
  content: "";
  width: 3rem;
  height: 3rem;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 渐变加载动画 */
.loading-gradient {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: gradientMove 1.5s ease infinite;
  height: 100px;
  border-radius: 4px;
}

@keyframes gradientMove {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}