/* 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; }

/* 快捷按钮样式 */
.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;
  height: 21rem !important;
  min-height: 15rem;
  margin-top: 0.7rem !important;
  margin-bottom: 1.7rem !important;
  margin: 0 1rem;
  background-color: #fff;
  border-radius: 1rem !important;
  border: 1px solid #eee !important;
  box-shadow: 0 0.1rem 0.5rem rgba(0,0,0,0.05) !important;
  display: flex;
  overflow: hidden;
  cursor: pointer;
}
.card img {
  width: 40% !important;
  height: 15rem !important;
  min-height: 12rem;
  margin-top: 2.9rem !important;
  margin: 0 1rem;
  border-radius: 0.8rem !important;
  object-fit: fill !important;
  display: block;
}
.card-content {
  flex: 1;
  padding: 1.2rem 0.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.card-title {
  display: block !important;
  color: #030303 !important;
  font-size: 2.6rem !important;
  font-weight: bold !important;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
  margin-left: 0.8rem !important;
  margin-right: 0.8rem !important;
  text-align: left !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-desc {
  display: block !important;
  color: #5E5D5D !important;
  font-size: 1.9rem !important;
  margin: 0.5rem 0.8rem !important;
  text-align: left !important;
  line-height: 1.4 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-buttons-row {
  position: absolute;
  bottom: 1.5rem;
  left: 1.2rem;
  right: 1.2rem;
  display: flex;
  gap: 0.8rem;
}
.card-button {
  height: 4.9rem !important;
  line-height: 4.9rem !important;
  font-size: 1.7rem !important;
  font-weight: bold !important;
  color: #f8f7f6 !important;
  text-align: center;
  border-radius: 0.8rem !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform 0.2s ease;
  flex: 1;
}
/* 卡片按钮颜色 */
.card-buttons-row :nth-child(1) { background-color: #FF9500 !important; }
.card-buttons-row :nth-child(2) { background-color: #FFC837 !important; }
.card-button:active { transform: scale(0.9) !important; }
.card-content { position: relative; padding-bottom: 6rem; }
.card-time {
  display: block !important;
  color: #CFCBCB !important;
  font-size: 1.7rem !important;
  margin-top: 3rem !important;
  margin-bottom: 1rem !important;
  margin-left: 0.8rem !important;
  text-align: left !important;
  line-height: 1 !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; }
}