/* ===== CSS Variables ===== */
:root {
  --primary: #1a6b4a;
  --primary-light: #2d9a6a;
  --primary-dark: #0f4d34;
  --accent: #ff6b35;
  --accent-light: #ff8c5a;
  --bg: #f5f7fa;
  --card: #ffffff;
  --text: #222222;
  --text-secondary: #666666;
  --text-muted: #999999;
  --border: #e8ecf0;
  --shadow: 0 2px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  --radius: 12px;
  --radius-sm: 8px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tab-height: 50px;
  --header-height: 44px;

  /* 沉浸式字体层级 */
  --immersive-display: 900 28px/1.2 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --immersive-title: 800 22px/1.25 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --immersive-headline: 700 18px/1.3 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --immersive-body: 400 15px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --immersive-callout: 500 13px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --immersive-caption: 400 12px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-tap-highlight-color: transparent; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-decoration: none; }
img { max-width: 100%; display: block; }
button { border: none; background: none; font: inherit; cursor: pointer; outline: none; }
input { border: none; outline: none; font: inherit; }
svg { display: block; }

/* ===== Status Bar ===== */
.status-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-height); display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-size: 17px; font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
  transition: background .3s;
}
.status-bar__back {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
}

/* ===== Page Container ===== */
.page-container {
  padding-top: var(--header-height);
  padding-bottom: calc(var(--tab-height) + var(--safe-bottom) + 8px);
  min-height: 100vh;
}
.page {
  display: none;
  padding-bottom: 20px;
}
.page.active {
  display: block;
  animation: pageEnter .35s cubic-bezier(.32, .72, 0, 1) both;
}
.page.page--exit {
  display: block;
  animation: pageExit .28s cubic-bezier(.4, 0, 1, 1) both;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes pageExit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.99);
    filter: blur(2px);
  }
}

/* ===== Tab Bar ===== */
.tab-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  height: calc(var(--tab-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: flex; background: #fff; border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(0,0,0,.04);
}
.tab-bar__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--text-muted); font-size: 10px; transition: color .2s;
  padding: 4px 0;
}
.tab-bar__item svg { fill: currentColor; transition: fill .2s; }
.tab-bar__item.active { color: var(--primary); }

/* ===== Hero ===== */
.hero { position: relative; margin: 12px; border-radius: var(--radius); overflow: hidden; }
.hero__swiper { position: relative; height: 180px; overflow: hidden; border-radius: var(--radius); }
.hero__track { display: flex; height: 100%; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.hero__slide {
  min-width: 100%; height: 100%; display: flex; align-items: flex-end;
  background-size: cover; background-position: center; padding: 16px;
}
.hero__slide::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(transparent, rgba(0,0,0,.5));
}
.hero__slide-title {
  position: relative; z-index: 1; color: #fff; font-size: 18px; font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.hero__dots {
  position: absolute; bottom: 10px; right: 16px; display: flex; gap: 6px; z-index: 2;
}
.hero__dot {
  width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.5);
  transition: all .3s;
}
.hero__dot.active { width: 18px; background: #fff; }

.hero__search {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-radius: 24px; padding: 8px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.hero__search svg { color: var(--text-muted); flex-shrink: 0; }
.hero__search input { flex: 1; background: none; font-size: 14px; color: var(--text); }
.hero__search input::placeholder { color: var(--text-muted); }

/* ===== Home Nav ===== */
.home-nav {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 16px 12px;
}
.home-nav__item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 0;
}
.home-nav__icon {
  width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.home-nav__item span { font-size: 12px; color: var(--text-secondary); }

/* ===== Promo Banner ===== */
.promo-banner {
  margin: 0 12px 4px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  overflow: hidden;
  cursor: pointer;
}
.promo-banner__inner {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: #fff;
}
.promo-banner__tag {
  background: #fff; color: #ee5a24; font-size: 12px; font-weight: 800;
  padding: 2px 10px; border-radius: 4px;
}
.promo-banner__text { flex: 1; font-size: 13px; font-weight: 600; }
.promo-banner__go { font-size: 18px; font-weight: 700; }

/* ===== Section Header ===== */
.section-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 16px; margin-bottom: 12px;
}
.section-header h2 { font-size: 18px; font-weight: 700; }
.section-header__more { font-size: 13px; color: var(--text-muted); }

/* ===== Scenic Grid ===== */
.scenic-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  padding: 0 12px;
}
.scenic-card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: transform .2s;
}
.scenic-card:active { transform: scale(.97); }
.scenic-card__img {
  height: 120px; background-size: cover; background-position: center;
  background-color: #e8e8e8; background-image: linear-gradient(135deg, #eee, #ccc);
  position: relative;
}
.scenic-card__badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px;
}
.scenic-card__info { padding: 10px 12px; }
.scenic-card__name { font-size: 14px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.scenic-card__location { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 2px; }
.scenic-card__price { font-size: 16px; font-weight: 700; color: var(--accent); }
.scenic-card__price span { font-size: 11px; font-weight: 400; color: var(--text-muted); margin-left: 2px; }

/* ===== Group Scroll ===== */
.group-scroll {
  display: flex; gap: 12px; padding: 0 12px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; padding-bottom: 4px;
}
.group-scroll::-webkit-scrollbar { display: none; }
.group-mini-card {
  flex-shrink: 0; width: 200px; background: var(--card);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.group-mini-card__img {
  height: 100px; background-size: cover; background-position: center; position: relative;
}
.group-mini-card__tag {
  position: absolute; top: 6px; left: 6px;
  background: rgba(238,90,36,.9); color: #fff; font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 4px;
}
.group-mini-card__body { padding: 8px 10px; }
.group-mini-card__name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.group-mini-card__meta { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.group-mini-card__price { font-size: 15px; font-weight: 700; color: var(--accent); }
.group-mini-card__price .orig { font-size: 11px; color: var(--text-muted); text-decoration: line-through; font-weight: 400; margin-left: 4px; }

/* ===== Activity List ===== */
.activity-list { padding: 0 12px; display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; }
.activity-card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: transform .2s;
}
.activity-card:active { transform: scale(.98); }
.activity-card__header {
  padding: 20px 16px 16px; position: relative; overflow: hidden;
}
.activity-card__header::before {
  content: ''; position: absolute; top: -30px; right: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.activity-card__icon { font-size: 32px; margin-bottom: 8px; }
.activity-card__badge {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,.25); backdrop-filter: blur(4px);
  color: #fff; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 10px;
}
.activity-card__body { padding: 14px 16px 16px; }
.activity-card__title { font-size: 17px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px; }
.activity-card__subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.activity-card__meta { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.activity-card__type,
.activity-card__count,
.activity-card__valid {
  font-size: 11px; padding: 2px 8px; border-radius: 4px;
  background: rgba(26,107,74,.06); color: var(--primary);
}
.activity-card__highlights {
  display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px;
}
.activity-card__hl {
  font-size: 12px; color: var(--text-secondary);
}
.activity-card__footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid #f0f0f0;
}
.activity-card__prices { display: flex; align-items: baseline; gap: 6px; }
.activity-card__orig { font-size: 12px; color: var(--text-muted); text-decoration: line-through; }
.activity-card__price { font-size: 22px; font-weight: 800; color: var(--accent); }
.btn-sm { padding: 8px 18px; font-size: 13px; border-radius: 20px; white-space: nowrap; }

/* ===== Filter Bar ===== */
.filter-bar {
  display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-btn {
  flex-shrink: 0; padding: 6px 16px; border-radius: 20px;
  background: var(--card); font-size: 13px; color: var(--text-secondary);
  border: 1px solid var(--border); transition: all .2s;
}
.filter-btn.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

/* ===== Product List ===== */
.product-list { padding: 0 12px; display: flex; flex-direction: column; gap: 12px; }
.product-card {
  display: flex; gap: 12px; background: var(--card);
  border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow);
}
.product-card:active { opacity: .85; }
.product-card__img {
  width: 110px; height: 90px; border-radius: var(--radius-sm);
  background-size: cover; background-position: center; flex-shrink: 0;
  position: relative;
}
.product-card__score {
  position: absolute; bottom: 4px; right: 4px;
  background: rgba(0,0,0,.75); color: #fff; font-size: 11px;
  padding: 2px 6px; border-radius: 4px; font-weight: 600;
}
.product-card__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.product-card__name { font-size: 15px; font-weight: 600; }
.product-card__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.product-card__tag {
  font-size: 10px; color: var(--primary); background: rgba(26,107,74,.08);
  padding: 1px 6px; border-radius: 4px;
}
.product-card__footer { display: flex; justify-content: space-between; align-items: flex-end; }
.product-card__sold { font-size: 11px; color: var(--text-muted); }
.product-card__price { font-size: 18px; font-weight: 700; color: var(--accent); }
.product-card__price span { font-size: 11px; font-weight: 400; }

/* ===== Detail Page ===== */
.detail-hero {
  height: 220px; background-size: cover; background-position: center;
  position: relative;
}
.detail-hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
  background: linear-gradient(transparent, var(--bg));
}
.detail-body { padding: 0 16px 80px; margin-top: -20px; position: relative; z-index: 1; }
.detail-name { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.detail-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.detail-tags span {
  font-size: 11px; padding: 2px 8px; border-radius: 4px;
}
.tag-green { background: rgba(26,107,74,.1); color: var(--primary); }
.tag-orange { background: rgba(255,107,53,.1); color: var(--accent); }
.tag-blue { background: rgba(52,120,246,.1); color: #3478f6; }

.detail-coupon-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; margin-bottom: 12px;
  background: rgba(255,107,53,.04); border-radius: var(--radius-sm);
  border: 1px dashed var(--accent);
}
.coupon-mini {
  font-size: 12px; color: var(--accent); font-weight: 600;
}
.coupon-more {
  font-size: 12px; color: var(--text-muted);
}

.detail-price {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 20px;
}
.detail-price__symbol { font-size: 16px; font-weight: 700; color: var(--accent); }
.detail-price__num { font-size: 28px; font-weight: 800; color: var(--accent); }
.detail-price__unit { font-size: 12px; color: var(--text-muted); }

.detail-section { margin-bottom: 20px; }
.detail-section h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.detail-section h3::before { content: ''; width: 3px; height: 16px; background: var(--primary); border-radius: 2px; }
.detail-section p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }

.notice-list { list-style: none; }
.notice-list li {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 13px; color: var(--text-secondary); margin-bottom: 6px;
}
.notice-list li svg { flex-shrink: 0; margin-top: 3px; }

.detail-footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; padding: 8px 16px;
  padding-bottom: calc(8px + var(--safe-bottom));
  background: #fff; box-shadow: 0 -2px 8px rgba(0,0,0,.06);
  gap: 12px;
}
.detail-footer__left { display: flex; align-items: center; gap: 16px; }
.detail-footer__price { font-size: 22px; font-weight: 800; color: var(--accent); }
.detail-price__num2 { font-size: 22px; font-weight: 800; color: var(--accent); }
.detail-footer__share {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; color: var(--text-muted);
}
.detail-footer__share svg { fill: var(--text-secondary); }
.detail-footer .btn-primary { flex: 1; }

/* ===== Groupbuy Page ===== */
.groupbuy-header {
  padding: 24px 16px 16px;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: #fff;
}
.groupbuy-header h2 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.groupbuy-header p { font-size: 13px; opacity: .85; }

.groupbuy-list { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.groupbuy-card {
  display: flex; gap: 12px; background: var(--card);
  border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow);
  border-left: 4px solid var(--accent);
}
.groupbuy-card:active { opacity: .85; }
.groupbuy-card__img {
  width: 120px; height: 100px; border-radius: var(--radius-sm);
  background-size: cover; background-position: center; flex-shrink: 0;
}
.groupbuy-card__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.groupbuy-card__type {
  font-size: 10px; font-weight: 600; color: #fff;
  background: var(--accent); padding: 2px 8px; border-radius: 4px;
  display: inline-block; margin-bottom: 4px;
}
.groupbuy-card__name { font-size: 15px; font-weight: 600; }
.groupbuy-card__desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.groupbuy-card__footer { display: flex; justify-content: space-between; align-items: flex-end; }
.groupbuy-card__people { font-size: 11px; color: var(--text-muted); }
.groupbuy-card__price { font-size: 18px; font-weight: 700; color: var(--accent); }
.groupbuy-card__price .orig { font-size: 11px; color: var(--text-muted); text-decoration: line-through; font-weight: 400; }

/* ===== Groupbuy Detail ===== */
.gb-detail-card {
  margin: 12px; padding: 16px; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.gb-join-section {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  padding: 12px 16px; padding-bottom: calc(12px + var(--safe-bottom));
  background: #fff; box-shadow: 0 -2px 8px rgba(0,0,0,.06);
  display: flex; align-items: center; gap: 12px;
}
.gb-join-section .gb-price { font-size: 22px; font-weight: 800; color: var(--accent); }
.gb-join-section .gb-price .orig { font-size: 13px; color: var(--text-muted); text-decoration: line-through; font-weight: 400; }
.gb-join-section .btn-primary { flex: 1; }

/* ===== Coupon Page ===== */
.coupon-tabs {
  display: flex; gap: 12px; padding: 12px 16px; background: #fff;
  border-bottom: 1px solid var(--border);
}
.coupon-tab {
  font-size: 14px; color: var(--text-secondary); padding: 4px 0;
  border-bottom: 2px solid transparent; transition: all .2s;
}
.coupon-tab.active { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }

.coupon-list, .coupon-mine-list {
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.coupon-mine-header { padding: 16px 16px 8px; }
.coupon-mine-header h3 { font-size: 16px; font-weight: 600; }

.coupon-card {
  display: flex; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.coupon-card__left {
  width: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff; padding: 12px 8px; flex-shrink: 0;
}
.coupon-card__left--green {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
}
.coupon-card__amount { font-size: 28px; font-weight: 800; line-height: 1.1; }
.coupon-card__unit { font-size: 10px; opacity: .85; }
.coupon-card__right { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; }
.coupon-card__name { font-size: 14px; font-weight: 600; }
.coupon-card__cond { font-size: 11px; color: var(--text-muted); }
.coupon-card__time { font-size: 10px; color: var(--text-muted); }
.coupon-card__action {
  display: flex; justify-content: flex-end; margin-top: 4px;
}
.coupon-card__btn {
  font-size: 12px; padding: 4px 14px; border-radius: 14px;
  border: 1px solid var(--accent); color: var(--accent); font-weight: 600;
}
.coupon-card__btn--used {
  border-color: var(--border); color: var(--text-muted);
}

/* ===== Activities / 618 Page ===== */
.activity-hero {
  padding: 32px 16px 24px;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24, #f0932b);
  color: #fff; text-align: center;
}
.activity-hero h1 { font-size: 28px; font-weight: 800; }
.activity-hero p { font-size: 14px; opacity: .85; margin-top: 4px; }

.activity-countdown {
  text-align: center; padding: 16px; background: #fff;
  border-bottom: 1px solid var(--border);
}
.activity-countdown__label { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.activity-countdown__timer { display: flex; justify-content: center; gap: 8px; }
.activity-countdown__block {
  background: var(--text); color: #fff; padding: 6px 10px;
  border-radius: 6px; font-size: 20px; font-weight: 700; min-width: 40px; text-align: center;
}

.activity-products { padding: 12px; display: flex; flex-direction: column; gap: 12px; }

.activity-coupons-section { padding: 16px; }
.activity-coupons-section h3 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }

/* ===== Dining Page ===== */
.dining-header {
  padding: 24px 16px 16px;
  background: linear-gradient(135deg, #f7971e, #ffd200);
  color: #fff;
}
.dining-header h2 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.dining-header p { font-size: 13px; opacity: .85; }

.dining-list { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.dining-card {
  display: flex; gap: 12px; background: var(--card);
  border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow);
}
.dining-card:active { opacity: .85; }
.dining-card__img {
  width: 100px; height: 80px; border-radius: var(--radius-sm);
  background-size: cover; background-position: center; flex-shrink: 0;
}
.dining-card__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.dining-card__type {
  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px;
  display: inline-block; margin-bottom: 4px;
}
.dining-card__type--food { background: rgba(247,151,30,.1); color: #f7971e; }
.dining-card__type--hotel { background: rgba(52,120,246,.1); color: #3478f6; }
.dining-card__type--experience { background: rgba(161,140,209,.1); color: #a18cd1; }
.dining-card__name { font-size: 15px; font-weight: 600; }
.dining-card__desc { font-size: 12px; color: var(--text-muted); }
.dining-card__footer { display: flex; justify-content: space-between; align-items: flex-end; }
.dining-card__consume { font-size: 11px; color: var(--primary); font-weight: 600; }
.dining-card__price { font-size: 16px; font-weight: 700; color: var(--accent); }

/* ===== Distribution Page ===== */
.dist-hero {
  padding: 24px 16px 16px;
  background: linear-gradient(135deg, #11998e, #38ef7d);
  color: #fff;
}
.dist-hero__info h2 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.dist-hero__info p { font-size: 13px; opacity: .85; }
.dist-hero__earnings {
  display: flex; justify-content: space-around; margin-top: 16px;
  background: rgba(255,255,255,.15); border-radius: var(--radius-sm);
  padding: 12px;
}
.dist-earnings__item { text-align: center; }
.dist-earnings__num { font-size: 20px; font-weight: 800; display: block; }
.dist-earnings__label { font-size: 11px; opacity: .8; }

.dist-qr-section { padding: 16px; text-align: center; }
.dist-qr-card {
  display: inline-block; padding: 16px; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.dist-qr-card canvas { margin: 0 auto 8px; }
.dist-qr-card p { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }

.dist-rules-section, .dist-team-section, .dist-orders-section {
  padding: 0 16px 16px;
}
.dist-rules-section h3, .dist-team-section h3, .dist-orders-section h3 {
  font-size: 16px; font-weight: 600; margin-bottom: 12px;
}
.dist-rules-list { list-style: none; }
.dist-rules-list li {
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text-secondary);
  display: flex; align-items: flex-start; gap: 6px;
}
.dist-rules-list li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0; margin-top: 7px;
}

.dist-team-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.dist-team-item__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
}
.dist-team-item__name { flex: 1; font-size: 14px; font-weight: 500; }
.dist-team-item__tag { font-size: 10px; padding: 2px 8px; border-radius: 4px; }
.dist-team-item__tag--direct { background: rgba(26,107,74,.1); color: var(--primary); }
.dist-team-item__tag--team { background: rgba(255,107,53,.1); color: var(--accent); }

.dist-order-item {
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--text-secondary);
  display: flex; justify-content: space-between;
}
.dist-order-item__commission { color: var(--accent); font-weight: 600; }

/* ===== Login Page ===== */
.login-card {
  max-width: 360px; margin: 60px auto 0; padding: 32px 24px;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  text-align: center;
}
.login-card h2 { font-size: 24px; font-weight: 800; color: var(--primary); }
.login-card > p { font-size: 13px; color: var(--text-muted); margin: 4px 0 20px; }
.login-form { text-align: left; }
.sms-field { position: relative; }
.btn-sms {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: #fff; font-weight: 600;
  padding: 5px 10px; border: 1px solid var(--primary); border-radius: 14px;
  white-space: nowrap;
  background: var(--primary);
  box-shadow: 0 2px 6px rgba(26,107,74,.2);
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
}
.btn-sms:disabled {
  opacity: 1;
  background: var(--border); border-color: var(--border); color: var(--text-muted);
  cursor: not-allowed; box-shadow: none;
}
.btn-login { width: 100%; margin-top: 20px; }
.login-tip { font-size: 11px; color: var(--text-muted); margin-top: 12px; text-align: center; line-height: 1.6; }
.login-tip a { color: var(--primary); }
.login-agreement {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0;
  margin-top: 12px; font-size: 12px; color: var(--text-muted);
}
.login-agreement .checkbox-label { display: flex; align-items: flex-start; gap: 6px; }
.login-agreement .checkbox-label input[type="checkbox"] {
  width: 16px; height: 16px; margin-top: 1px; accent-color: var(--primary);
}
.login-agreement .legal-link { color: var(--primary); cursor: pointer; white-space: nowrap; font-size: 12px; }
.login-agreement .legal-and { font-size: 12px; margin: 0 2px; }
.login-modal__content .login-agreement .checkbox-label span,
.login-modal__content .login-agreement .legal-and,
.login-modal__content .login-agreement .legal-link { color: var(--text-muted); }
.login-modal__content .login-agreement .legal-link { color: var(--primary); }
.login-divider {
  display: flex; align-items: center; margin: 20px 0;
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.login-divider span { padding: 0 12px; font-size: 12px; color: var(--text-muted); }
.login-third { text-align: center; }
.btn-wechat {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary);
}

/* ===== Login Modal ===== */
.login-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 300;
  display: none; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
}
.login-modal.show { display: flex; }
.login-modal__content {
  background: #fff; border-radius: var(--radius) var(--radius) 0 0;
  width: 100%; max-width: 420px; padding: 24px 20px calc(24px + var(--safe-bottom));
  position: relative;
}
.login-modal__close {
  position: absolute; top: 12px; right: 16px; font-size: 24px; color: var(--text-muted);
}
.login-modal__content h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; text-align: center; }
.login-modal__content .btn-login { margin-top: 24px; }
.login-modal__content .login-divider { margin: 16px 0; }
.login-modal__content .login-third { margin-bottom: 4px; }
.login-modal__content .login-tip { margin-top: 16px; }

/* ===== Confirm Modal ===== */
.confirm-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 400;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
}
.confirm-modal.show { display: flex; }
.confirm-modal__content {
  background: #fff; border-radius: var(--radius);
  width: min(86vw, 320px); padding: 24px 20px;
  text-align: center; box-shadow: var(--shadow-lg);
}
.confirm-modal__text { font-size: 16px; color: var(--text); line-height: 1.5; margin-bottom: 20px; }
.confirm-modal__actions { display: flex; gap: 12px; justify-content: center; }
.confirm-modal__actions .btn-outline { flex: 1; padding: 10px 0; border-radius: 20px; border: 1px solid var(--border); color: var(--text-secondary); background: #fff; font-size: 14px; font-weight: 600; }
.confirm-modal__actions .btn-primary { flex: 1; padding: 10px 0; border-radius: 20px; font-size: 14px; }

/* ===== Realname Page ===== */
.realname-card {
  margin: 16px; padding: 20px; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.realname-card h2 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.realname-card > p { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.realname-card .btn-primary { width: 100%; margin-top: 16px; }

/* ===== Profile ===== */
.profile-header {
  display: flex; align-items: center; gap: 16px;
  padding: 24px 16px; background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
}
.profile-avatar {
  width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255,255,255,.3);
}
.profile-info { flex: 1; min-width: 0; }
.profile-info h2 { font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-info p { font-size: 13px; opacity: .8; margin-top: 2px; }
.profile-header .btn-outline {
  border-color: rgba(255,255,255,.5); color: #fff; background: rgba(255,255,255,.1);
  flex-shrink: 0;
}
.profile-header .btn-outline:active { background: rgba(255,255,255,.25); }

/* VIP Card - Enhanced */
.profile-vip-card {
  margin: 12px; padding: 16px;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 40%, #3d3d5c 100%);
  border-radius: var(--radius); color: #fff; cursor: pointer;
  position: relative; overflow: hidden; transition: transform .2s;
}
.profile-vip-card:active { transform: scale(.98); }
.profile-vip-card::before {
  content: ''; position: absolute; top: -20px; right: -20px;
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.profile-vip-card::after {
  content: ''; position: absolute; bottom: -10px; left: 30%;
  width: 120px; height: 50px; border-radius: 50%;
  background: rgba(255,255,255,.03);
}
.vip-card__left {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  position: relative; z-index: 1;
}
.vip-card__icon {
  font-size: 28px; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,215,42,.15);
}
.vip-card__level { font-size: 16px; font-weight: 700; color: #ffd32a; }
.vip-card__discount { font-size: 11px; opacity: .7; margin-top: 2px; color: #ffd32a; }
.vip-card__right {
  position: absolute; right: 16px; top: 16px; text-align: center; z-index: 1;
}
.vip-card__points-label { font-size: 10px; opacity: .6; }
.vip-card__points-val { font-size: 24px; font-weight: 800; color: #ffd32a; }
.vip-card__progress-wrap { position: relative; z-index: 1; }
.vip-card__progress-bar {
  height: 4px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden;
}
.vip-card__progress-fill {
  height: 100%; background: linear-gradient(90deg, #ffd32a, #ff6b35);
  border-radius: 2px; transition: width .5s ease;
}
.vip-card__progress-text { font-size: 10px; opacity: .5; margin-top: 4px; }

/* Sign-in Row */
.profile-signin-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 12px 12px; padding: 12px 16px; background: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.signin-info { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.signin-days { font-size: 11px; color: var(--primary); font-weight: 600; margin-left: 4px; }

/* ===== VIP Level Page ===== */
.vip-hero {
  padding: 32px 20px 24px; text-align: center; color: #fff;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 40%, #3d3d5c 100%);
  position: relative; overflow: hidden;
}
.vip-hero::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255,215,42,.08);
}
.vip-hero::after {
  content: ''; position: absolute; bottom: -20px; left: 40%;
  width: 160px; height: 60px; border-radius: 50%;
  background: rgba(255,215,42,.04);
}
.vip-hero__badge {
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; position: relative; z-index: 1;
  background: rgba(255,215,42,.15); border: 2px solid rgba(255,215,42,.3);
}
.vip-hero__name { font-size: 22px; font-weight: 800; color: #ffd32a; position: relative; z-index: 1; }
.vip-hero__level { font-size: 14px; opacity: .7; margin-top: 2px; position: relative; z-index: 1; }
.vip-hero__points-row {
  display: flex; justify-content: center; gap: 40px; margin-top: 20px;
  position: relative; z-index: 1;
}
.vip-hero__points-item { text-align: center; }
.vip-hero__points-num { font-size: 28px; font-weight: 800; color: #ffd32a; display: block; }
.vip-hero__points-label { font-size: 11px; opacity: .6; }
.vip-hero__progress { margin-top: 20px; position: relative; z-index: 1; }
.vip-hero__progress-bar {
  height: 6px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden;
}
.vip-hero__progress-fill {
  height: 100%; background: linear-gradient(90deg, #ffd32a, #ff6b35);
  border-radius: 3px; transition: width .5s ease;
}
.vip-hero__progress-text { font-size: 11px; opacity: .6; margin-top: 6px; }

/* Sign-in Card */
.vip-signin-card {
  margin: 16px; padding: 16px; background: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.vip-signin-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.vip-signin-header h3 { font-size: 16px; font-weight: 600; }
.vip-signin-days { font-size: 12px; color: var(--primary); font-weight: 600; }
.vip-signin-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.vip-signin-dot {
  text-align: center; font-size: 10px; color: var(--text-muted);
}
.vip-signin-dot__circle {
  width: 32px; height: 32px; border-radius: 50%; margin: 0 auto 4px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border); font-size: 12px; font-weight: 600;
  transition: all .3s;
}
.vip-signin-dot--done .vip-signin-dot__circle {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.vip-signin-dot--today .vip-signin-dot__circle {
  border-color: var(--accent); color: var(--accent);
}
.vip-signin-dot--bonus .vip-signin-dot__circle {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* Points Rules */
.vip-points-rules {
  margin: 0 16px 16px; padding: 16px; background: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.vip-points-rules h3 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.vip-rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vip-rule-item {
  text-align: center; padding: 12px 8px;
  background: rgba(26,107,74,.04); border-radius: var(--radius-sm);
}
.vip-rule-item__icon { font-size: 24px; margin-bottom: 6px; }
.vip-rule-item__name { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.vip-rule-item__pts { font-size: 14px; color: var(--accent); font-weight: 700; }

/* Levels Compare */
.vip-levels-compare {
  margin: 0 16px 16px; padding: 16px; background: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.vip-levels-compare h3 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.vip-levels-list { display: flex; flex-direction: column; gap: 10px; }
.vip-level-item {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  transition: all .2s;
}
.vip-level-item--current {
  border-color: var(--accent); background: rgba(255,107,53,.04);
  box-shadow: 0 2px 8px rgba(255,107,53,.1);
}
.vip-level-item__badge {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700;
}
.vip-level-item__info { flex: 1; }
.vip-level-item__name { font-size: 15px; font-weight: 600; }
.vip-level-item__req { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.vip-level-item__disc {
  font-size: 13px; color: var(--accent); font-weight: 700;
}
.vip-level-item__tag {
  font-size: 10px; padding: 2px 8px; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 600;
}

/* Points Detail */
.vip-points-detail {
  margin: 0 16px 16px; padding: 16px; background: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.vip-points-detail h3 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.vip-points-log-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.vip-points-log-item:last-child { border-bottom: none; }
.vip-points-log-left {}
.vip-points-log-action { font-size: 13px; font-weight: 500; }
.vip-points-log-remark { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.vip-points-log-right { text-align: right; }
.vip-points-log-delta { font-size: 15px; font-weight: 700; color: var(--accent); }
.vip-points-log-time { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.profile-quick-actions {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 16px 12px; background: #fff; margin: 0 12px 12px;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.quick-action {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary);
}
.quick-action svg { fill: var(--text-secondary); }

.profile-menu { background: #fff; margin: 12px; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.profile-menu__item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.profile-menu__item:last-child { border-bottom: none; }
.profile-menu__item:active { background: var(--bg); }
.profile-menu__item span { flex: 1; font-size: 15px; }
.profile-menu__item .arrow { fill: #ccc; }
.profile-menu__badge {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  font-weight: 600;
}
.profile-menu__badge--inactive { background: var(--border); color: var(--text-secondary); }
.profile-menu__badge--active { background: rgba(26,107,74,.15); color: var(--primary); }

/* ===== Booking Page ===== */
.booking-card { padding: 16px; }
.booking-product {
  display: flex; gap: 12px; background: rgba(26,107,74,.04);
  border-radius: var(--radius-sm); padding: 12px; margin-bottom: 16px;
}
.booking-product__img {
  width: 72px; height: 72px; border-radius: var(--radius-sm);
  background-size: cover; background-position: center; flex-shrink: 0;
}
.booking-product__info { flex: 1; }
.booking-product__name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.booking-product__date { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.booking-product__price { font-size: 16px; font-weight: 700; color: var(--accent); }

.booking-coupon-select { margin-bottom: 16px; }
.booking-coupon-select h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.booking-coupon-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: var(--card); border-radius: var(--radius-sm);
  border: 1px solid var(--border); margin-bottom: 6px; cursor: pointer;
}
.booking-coupon-item.selected { border-color: var(--accent); background: rgba(255,107,53,.04); }
.booking-coupon-item__info { font-size: 13px; }
.booking-coupon-item__disc { font-size: 13px; color: var(--accent); font-weight: 600; }

.booking-form h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.booking-tip { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }

.ticket-counter {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
.counter { display: flex; align-items: center; gap: 12px; }
.counter__btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--text-secondary); transition: all .2s;
  background: var(--card);
}
.counter__btn:disabled { opacity: .35; background: var(--bg); border-color: var(--border); color: var(--text-muted); }
.counter__btn:not(:disabled):active { background: var(--primary); border-color: var(--primary); color: #fff; }
.counter__num { font-size: 18px; font-weight: 600; min-width: 24px; text-align: center; }

.holder-form {
  background: var(--card); border-radius: var(--radius-sm);
  padding: 12px; margin-bottom: 12px; box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.holder-form__title { font-size: 14px; font-weight: 600; color: var(--primary); margin-bottom: 8px; }

.form-field {
  display: flex; align-items: center; padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.form-field:last-child { border-bottom: none; }
.form-field label { width: 64px; font-size: 13px; color: var(--text-secondary); flex-shrink: 0; }
.form-field input { flex: 1; font-size: 14px; padding: 4px 0; color: var(--text); background: none; }
.form-field input::placeholder { color: var(--text-muted); }
.form-field input:focus { outline: none; border-bottom: 2px solid var(--primary); margin-bottom: -1px; }
.form-field input:focus + .btn-sms { border-color: var(--primary); }
  background: var(--card); border-radius: var(--radius-sm);
  padding: 12px; margin-top: 12px; box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.booking-buyer h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }

.booking-agreement { margin-top: 16px; }
.checkbox-label {
  display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--text-muted);
}
.checkbox-label input[type="checkbox"] {
  width: 16px; height: 16px; margin-top: 1px; accent-color: var(--primary);
}
.checkbox-label a, .legal-link { color: var(--primary); cursor: pointer; }
.booking-agreement {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0;
  font-size: 12px; color: var(--text-muted);
}
.booking-agreement .legal-link { white-space: nowrap; font-size: 12px; }
.booking-agreement .legal-and { font-size: 12px; margin: 0 2px; }

.booking-footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; padding: 10px 16px;
  padding-bottom: calc(10px + var(--safe-bottom));
  background: #fff; box-shadow: 0 -2px 8px rgba(0,0,0,.06);
  gap: 16px;
}
.booking-total { font-size: 13px; color: var(--text-secondary); }
.booking-total__price { font-size: 22px; font-weight: 800; color: var(--accent); }
.booking-footer .btn-primary { flex: 1; }

/* ===== Result Page ===== */
.result-status { text-align: center; padding: 32px 16px 16px; }
.result-status__icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
}
.result-status__icon.success { background: rgba(26,107,74,.12); box-shadow: 0 0 0 1px rgba(26,107,74,.2), 0 4px 12px rgba(26,107,74,.12); }
.result-status__icon.success svg { fill: var(--primary); filter: drop-shadow(0 0 6px rgba(26,107,74,.25)); }
.result-status__icon.fail { background: rgba(255,59,48,.12); box-shadow: 0 0 0 1px rgba(255,59,48,.2), 0 4px 12px rgba(255,59,48,.12); }
.result-status__icon.fail svg { fill: #ff3b30; filter: drop-shadow(0 0 6px rgba(255,59,48,.25)); }
.result-status__title { font-size: 20px; font-weight: 700; }
.result-status__desc { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

.result-order {
  margin: 16px; padding: 16px; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.result-order__row {
  display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px;
}
.result-order__row .label { color: var(--text-muted); }

.result-tickets { margin: 0 16px; }
.ticket-card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 12px; overflow: hidden;
}
.ticket-card__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px dashed var(--border);
}
.ticket-card__name { font-size: 15px; font-weight: 600; }
.ticket-card__status {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: rgba(26,107,74,.1); color: var(--primary);
}
.ticket-card__body { padding: 12px 16px; }
.ticket-card__row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.ticket-card__row .label { color: var(--text-muted); }
.ticket-card__qrcode {
  text-align: center; padding: 12px; cursor: pointer;
}
.ticket-card__qrcode canvas { margin: 0 auto; border: 1px solid var(--border); border-radius: 8px; }

.result-actions { display: flex; gap: 12px; padding: 16px; justify-content: center; }

/* ===== Order Page ===== */
.order-tabs {
  display: flex; padding: 12px 16px; gap: 0;
  background: #fff; border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.order-tabs::-webkit-scrollbar { display: none; }
.order-tab {
  flex-shrink: 0; text-align: center; font-size: 13px; color: var(--text-secondary);
  padding: 6px 10px; position: relative; transition: color .2s; white-space: nowrap;
}
.order-tab.active { color: var(--primary); font-weight: 600; }
.order-tab.active::after {
  content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 2px; background: var(--primary); border-radius: 1px;
}

.order-list { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
/* 通用列表加载（兼容旧 order-list-loading） */
.order-list-loading,
.list-loading {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 48px 0; color: var(--text-secondary); font-size: 14px;
}
.order-list-loading__spinner,
.list-loading__spinner {
  width: 20px; height: 20px; border: 2px solid var(--border);
  border-top-color: var(--primary); border-radius: 50%;
  animation: order-spin .7s linear infinite;
}
@keyframes order-spin { to { transform: rotate(360deg); } }
body.immersive-active .order-list-loading,
body.immersive-active .list-loading { color: rgba(255,255,255,.75); }
body.immersive-active .order-list-loading__spinner,
body.immersive-active .list-loading__spinner { border-color: rgba(255,255,255,.25); border-top-color: #fff; }
.order-card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.order-card__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.order-card__id { font-size: 12px; color: var(--text-muted); }
.order-card__status { font-size: 12px; font-weight: 600; }
.status-ISSUED { color: var(--primary); }
.status-CONSUMED { color: var(--text-muted); }
.status-REFUNDED { color: #ff3b30; }
.status-PENDING { color: #ff9500; }
.status-CANCELLED { color: #999; }
.status-REFUNDING { color: var(--accent); }
.status-ACTIVATED { color: #1a6b4a; }
.status-PAID { color: #3478f6; }

.order-card__body { padding: 12px 16px; }
.order-card__product { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.order-card__meta { font-size: 12px; color: var(--text-muted); }
.order-card__footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--border);
}
.order-card__price { font-size: 16px; font-weight: 700; color: var(--accent); }
.order-card__actions { display: flex; gap: 8px; }

.empty-state { text-align: center; padding: 60px 16px; color: var(--text-muted); }
.empty-state svg {
  margin: 0 auto 16px;
  opacity: .55;
  color: var(--text-muted);
}
.empty-state svg path { fill: currentColor; }
.empty-state p { font-size: 14px; }
body.immersive-active .empty-state { color: rgba(255,255,255,.7); }
body.immersive-active .empty-state svg { color: rgba(255,255,255,.55); }

/* ===== Order Detail ===== */
.od-card {
  margin: 12px; padding: 16px; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.od-card__status { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.od-card__row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; }
.od-card__row .label { color: var(--text-muted); }
/* Order Lifecycle Timeline */
.od-lifecycle { background: var(--card); border-radius: 12px; padding: 16px; margin: 12px 0; }
.od-timeline { position: relative; padding-left: 24px; }
.od-timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.od-timeline__item { position: relative; padding-bottom: 16px; }
.od-timeline__item:last-child { padding-bottom: 0; }
.od-timeline__dot { position: absolute; left: -20px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--primary); background: var(--card); }
.od-timeline__item:last-child .od-timeline__dot { background: var(--primary); }
.od-timeline__time { font-size: 11px; color: var(--text-muted); }
.od-timeline__label { font-size: 13px; font-weight: 600; margin: 2px 0; }
.od-timeline__detail { font-size: 11px; color: var(--text-muted); }
.od-tickets { margin: 0 12px; }
.od-actions { padding: 16px; display: flex; gap: 12px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.countdown-text { flex: 1 1 100%; font-size: 13px; color: var(--accent); font-weight: 600; margin-bottom: 4px; white-space: nowrap; }
.countdown-text:empty { display: none; }

/* ===== Card Intro Page ===== */
.card-intro-hero {
  position: relative;
  padding: 40px 20px 32px;
  background: linear-gradient(135deg, #0f4d34 0%, #1a6b4a 30%, #2d9a6a 70%, #1a6b4a 100%);
  color: #fff;
  overflow: hidden;
}
.card-intro-hero__bg {
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=800&h=500&fit=crop') center/cover;
  opacity: 0.15;
}
.card-intro-hero__badge {
  display: inline-block;
  background: rgba(255,215,42,.2);
  backdrop-filter: blur(4px);
  color: #ffd32a;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 14px;
  margin-bottom: 10px;
  position: relative; z-index: 1;
  border: 1px solid rgba(255,215,42,.25);
}
.card-intro-hero__content { position: relative; z-index: 1; }
.card-intro-hero__content h1 { font-size: 28px; font-weight: 800; margin-bottom: 6px; }
.card-intro-hero__content p { font-size: 16px; opacity: .9; margin-bottom: 2px; }
.card-intro-hero__sub { font-size: 13px; opacity: .7 !important; margin-top: 4px; }
.card-intro-hero::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.card-intro-hero::after {
  content: ''; position: absolute; bottom: -30px; left: -30px;
  width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255,255,255,.04);
}

/* 双卡切换 */
.card-intro-card-switch {
  display: flex; gap: 10px; padding: 14px 14px 0;
}
.card-intro-card-tab {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 12px; border-radius: 12px;
  background: var(--card); box-shadow: var(--shadow);
  border: 2px solid transparent; transition: all .25s;
  cursor: pointer;
}
.card-intro-card-tab.active {
  border-color: var(--primary);
  box-shadow: 0 2px 12px rgba(26,107,74,.18);
}
.card-intro-card-tab__icon {
  font-size: 28px; width: 44px; height: 44px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.card-intro-card-tab[data-card="haitang"] .card-intro-card-tab__icon {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}
.card-intro-card-tab[data-card="jindiao"] .card-intro-card-tab__icon {
  background: linear-gradient(135deg, #f5af19, #f12711);
}
.card-intro-card-tab__info { flex: 1; min-width: 0; }
.card-intro-card-tab__name { font-size: 14px; font-weight: 700; }
.card-intro-card-tab__sub { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.card-intro-card-tab__price { text-align: right; flex-shrink: 0; }
.card-intro-card-tab__orig { font-size: 11px; color: var(--text-muted); text-decoration: line-through; display: block; }
.card-intro-card-tab__now { font-size: 20px; font-weight: 800; color: var(--accent); display: block; }

/* 卡面展示 */
.card-intro-surface-wrap { padding: 14px; text-align: center; overflow: hidden; }
.card-intro-surface-wrap .gg-card3d {
  margin: 0 auto;
  --gg-card-w: min(94vw, 420px);
  --gg-card-h: calc(var(--gg-card-w) * 0.628);
}
.card-intro-surface-wrap .gg-card3d__card { box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.card-intro-surface__inner {
  border-radius: 16px; padding: 24px 20px;
  color: #fff; position: relative; overflow: hidden;
  min-height: 185px; text-align: left;
}
.card-intro-surface__inner--haitang {
  background: linear-gradient(135deg, #0d5c36 0%, #1a6b4a 30%, #2d9a6a 60%, #38da8e 100%);
}
.card-intro-surface__inner--jindiao {
  background: linear-gradient(135deg, #8b2500 0%, #c53d1a 30%, #f56633 60%, #f5af19 100%);
}
.card-intro-surface__inner::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,.07);
}
.card-intro-surface__inner::after {
  content: ''; position: absolute; bottom: -20px; left: 40%;
  width: 140px; height: 60px; border-radius: 50%;
  background: rgba(255,255,255,.04);
}
.card-intro-surface__logo { font-size: 14px; font-weight: 700; opacity: .8; margin-bottom: 10px; position: relative; z-index: 1; }
.card-intro-surface__name { font-size: 22px; font-weight: 800; margin-bottom: 4px; position: relative; z-index: 1; }
.card-intro-surface__tag { font-size: 12px; opacity: .7; margin-bottom: 18px; position: relative; z-index: 1; }
.card-intro-surface__holder { font-size: 14px; font-weight: 600; position: relative; z-index: 1; }
.card-intro-surface__no { font-size: 11px; opacity: .6; margin-top: 6px; position: relative; z-index: 1; letter-spacing: 1px; }
.card-intro-surface__status {
  position: absolute; top: 24px; right: 20px; z-index: 2;
  font-size: 12px; padding: 3px 12px; border-radius: 12px;
  background: rgba(255,255,255,.2); backdrop-filter: blur(4px);
}
.card-intro-surface__tip { font-size: 11px; color: var(--text-muted); margin-top: 8px; }

.smart-entry {},
.guarantee {}

.card-intro-features,
.card-intro-scenic-list,
.card-intro-rules {
  padding: 20px 16px;
}
.card-intro-features h2,
.card-intro-scenic-list h2,
.card-intro-rules h2 {
  font-size: 18px; font-weight: 700; margin-bottom: 14px;
  display: flex; align-items: center; gap: 6px;
}
.card-intro-features h2::before,
.card-intro-scenic-list h2::before,
.card-intro-rules h2::before {
  content: ''; width: 3px; height: 16px; background: var(--primary); border-radius: 2px;
}

.card-intro-features__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.card-intro-feature-item {
  background: var(--card); border-radius: var(--radius-sm);
  padding: 16px 12px; text-align: center; box-shadow: var(--shadow);
}
.card-intro-feature-item__icon {
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 8px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex; align-items: center; justify-content: center;
}
.card-intro-feature-item__icon svg { fill: #fff; }
.card-intro-feature-item__text { font-size: 13px; font-weight: 600; color: var(--text); }
.card-intro-feature-item__sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.card-intro-scenic-list__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.card-intro-scenic-item {
  background: var(--card); border-radius: var(--radius-sm);
  padding: 10px 12px; display: flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow);
}
.card-intro-scenic-item__name { flex: 1; font-size: 13px; font-weight: 500; }
.card-intro-scenic-item__tag {
  font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 600;
}
.card-intro-scenic-item__tag--5a { background: rgba(255,107,53,.1); color: var(--accent); }
.card-intro-scenic-item__tag--4a { background: rgba(52,120,246,.1); color: #3478f6; }

.card-intro-rules__list { list-style: none; }
.card-intro-rules__list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px; color: var(--text-secondary);
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.card-intro-rules__list li:last-child { border-bottom: none; }
.card-intro-rules__list li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0; margin-top: 7px;
}

/* 景区总数标签 */
.card-intro-scenic-list__count {
  font-size: 13px; font-weight: 400; color: var(--text-muted);
  margin-left: 8px;
}
.card-intro-scenic-list__desc {
  font-size: 13px; color: var(--text-secondary);
  margin-bottom: 14px; line-height: 1.6;
}
.card-intro-scenic-list__desc strong { color: var(--accent); }

/* 智慧入园 */
.card-intro-smart-entry { padding: 0 16px 16px; }
.card-intro-smart-entry h2 {
  font-size: 18px; font-weight: 700; margin-bottom: 14px;
  display: flex; align-items: center; gap: 6px;
}
.card-intro-smart-entry h2::before {
  content: ''; width: 3px; height: 16px; background: var(--primary); border-radius: 2px;
}
.card-intro-smart-entry__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.card-intro-smart-item {
  background: var(--card); border-radius: var(--radius-sm);
  padding: 16px 8px; text-align: center; box-shadow: var(--shadow);
}
.card-intro-smart-item__icon { font-size: 28px; margin-bottom: 6px; }
.card-intro-smart-item__text { font-size: 13px; font-weight: 600; color: var(--text); }
.card-intro-smart-item__sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.card-intro-smart-entry__cap {
  text-align: center; margin-top: 12px; font-size: 12px; color: var(--text-muted);
}
.card-intro-smart-entry__cap strong { color: var(--primary); font-weight: 700; }

/* 7天保障 */
.card-intro-guarantee {
  display: flex; align-items: center; gap: 14px;
  margin: 0 16px 16px; padding: 16px;
  background: linear-gradient(135deg, rgba(26,107,74,.04), rgba(45,154,106,.06));
  border-radius: var(--radius); border: 1px solid rgba(26,107,74,.1);
}
.card-intro-guarantee__icon { font-size: 36px; flex-shrink: 0; }
.card-intro-guarantee__title { font-size: 15px; font-weight: 700; color: var(--primary); }
.card-intro-guarantee__desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; line-height: 1.5; }

.card-intro-footer-placeholder { height: 70px; }
.card-intro-footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  padding-bottom: calc(10px + var(--safe-bottom));
  background: #fff; box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
.card-intro-footer__price { display: flex; align-items: baseline; gap: 6px; }
.card-intro-footer__orig { font-size: 13px; color: var(--text-muted); text-decoration: line-through; }
.card-intro-footer__now { font-size: 24px; font-weight: 800; color: var(--accent); }
.btn-lg { padding: 14px 40px; font-size: 16px; border-radius: 26px; }

/* ===== My Card Page ===== */
.my-card-surface {
  margin: 16px;
  border-radius: 16px;
  padding: 24px 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 180px;
}
.my-card-surface--active {
  background: linear-gradient(135deg, #0f4d34 0%, #1a6b4a 40%, #2d9a6a 100%);
}
.my-card-surface--inactive {
  background: linear-gradient(135deg, #555 0%, #888 100%);
}
.my-card-surface::before {
  content: ''; position: absolute; top: -30px; right: -30px;
  width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.my-card-surface::after {
  content: ''; position: absolute; bottom: -20px; left: 40%;
  width: 200px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,.04);
}
.my-card-surface__name { font-size: 20px; font-weight: 700; margin-bottom: 4px; position: relative; z-index: 1; }
.my-card-surface__no { font-size: 12px; opacity: .7; margin-bottom: 20px; position: relative; z-index: 1; letter-spacing: 1px; }
.my-card-surface__holder { font-size: 15px; font-weight: 600; position: relative; z-index: 1; }
.my-card-surface__status {
  position: absolute; top: 24px; right: 20px; z-index: 1;
  font-size: 12px; padding: 3px 12px; border-radius: 12px;
  background: rgba(255,255,255,.2); backdrop-filter: blur(4px);
}

.my-card-3d-wrap { padding: 16px 0; overflow: hidden; }
.my-card-3d-wrap .gg-card3d {
  margin: 0 auto;
  --gg-card-w: min(92vw, 400px);
  --gg-card-h: calc(var(--gg-card-w) * 0.628);
}
.my-card-3d-wrap .gg-card3d__card { box-shadow: 0 20px 50px rgba(0,0,0,.35); }

/* 我的终身卡顶部卡片 - 复用首页终身卡效果 */
.my-card-top { padding: 16px; }
.my-card-top .home-lifetime-card {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  box-shadow: 0 10px 36px rgba(0,0,0,.4);
}
.my-card-top .home-lifetime-card__bg .gg-card3d {
  --gg-card-w: min(132%, 520px);
  --gg-card-h: calc(var(--gg-card-w) * 0.628);
}
.my-card-top .home-lifetime-card__cta--state { display: none; }
.my-card-top .home-lifetime-card__cta--state.active { display: inline-flex; }
.my-card-meta {
  margin: 0 16px 16px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
}
.my-card-meta__name { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.my-card-meta__state { font-size: 13px; margin-bottom: 10px; }
.my-card-meta__state.active { color: #38ef7d; }
.my-card-meta__state.inactive { color: var(--text-muted); }
.my-card-meta__no, .my-card-meta__holder { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.my-card-usage { margin: 0 16px 16px; padding: 16px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.my-card-usage h3 { font-size: 16px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.my-card-usage h3::before { content: ''; width: 3px; height: 14px; background: var(--primary); border-radius: 2px; }
.my-card-usage__item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.my-card-usage__item:last-child { border-bottom: none; }
/* home-card3d-wrap/tip removed - now using home-lifetime-scroll */
.home-card3d-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: -10px 16px 16px;
  padding: 12px 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(26,107,74,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.home-card3d-action:active { transform: scale(.98); box-shadow: 0 2px 6px rgba(26,107,74,.15); }
.home-card3d-action svg { opacity: 1; fill: #fff; }

.my-card-activate { padding: 24px 16px; text-align: center; }
.my-card-activate .btn-primary { width: 100%; padding: 14px 0; font-size: 16px; }

/* ===== Buttons ===== */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: 24px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff; font-size: 15px; font-weight: 600;
  box-shadow: 0 4px 12px rgba(26,107,74,.3);
  transition: transform .15s cubic-bezier(.4,0,.2,1), box-shadow .15s ease, filter .15s ease;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: scale(.96) translateY(0); box-shadow: 0 2px 6px rgba(26,107,74,.2); }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px; border-radius: 20px;
  border: 1px solid var(--primary); color: var(--primary);
  font-size: 13px; font-weight: 500;
  transition: transform .15s cubic-bezier(.4,0,.2,1), background .15s ease, box-shadow .15s ease;
}
.btn-outline:hover { transform: translateY(-1px); }
.btn-outline:active { transform: scale(.96) translateY(0); background: rgba(26,107,74,.05); }

.btn-sm { padding: 6px 14px; font-size: 12px; border-radius: 14px; }
.btn-danger { border-color: #ff3b30; color: #ff3b30; }
.btn-danger:active { background: rgba(255,59,48,.05); }

/* 可点击卡片/列表项的触感反馈 */
.tap-feedback,
.scenic-card,
.product-card,
.groupbuy-card,
.dining-card,
.coupon-card,
.group-mini-card,
.card-intro-card-tab,
.order-card,
.ticket-card,
.quick-action,
.profile-menu__item,
.dist-team-item,
.dist-order-item,
.my-card-usage__item,
.vip-level-item,
.vip-points-log-item,
.vip-rule-item {
  transition: transform .12s cubic-bezier(.4,0,.2,1), opacity .12s ease;
}
.tap-feedback:active,
.scenic-card:active,
.product-card:active,
.groupbuy-card:active,
.dining-card:active,
.coupon-card:active,
.group-mini-card:active,
.card-intro-card-tab:active,
.order-card:active,
.ticket-card:active,
.quick-action:active,
.profile-menu__item:active,
.dist-team-item:active,
.dist-order-item:active,
.my-card-usage__item:active,
.vip-level-item:active,
.vip-points-log-item:active,
.vip-rule-item:active {
  transform: scale(0.97);
  opacity: .92;
}

/* 沉浸式下按压反馈更明显 */
body.immersive-active .scenic-card:active,
body.immersive-active .product-card:active,
body.immersive-active .groupbuy-card:active,
body.immersive-active .dining-card:active,
body.immersive-active .coupon-card:active,
body.immersive-active .group-mini-card:active,
body.immersive-active .card-intro-card-tab:active,
body.immersive-active .ticket-card:active {
  transform: scale(0.96);
  opacity: .95;
}

/* ===== Loading ===== */
.loading-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999;
  display: none; align-items: center; justify-content: center; flex-direction: column; gap: 12px;
  background: rgba(255,255,255,.85); backdrop-filter: blur(4px);
}
.loading-overlay.show { display: flex; }
.loading-spinner {
  width: 36px; height: 36px; border: 3px solid var(--border);
  border-top-color: var(--primary); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
body.immersive-active .loading-overlay {
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.immersive-active .loading-overlay p { color: #fff; }
body.immersive-active .loading-spinner { border-color: rgba(255,255,255,.25); border-top-color: #fff; }

/* ===== Toast ===== */
.toast {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%) translateY(-20px);
  z-index: 1000; padding: 10px 24px; border-radius: 20px;
  background: rgba(0,0,0,.75); color: #fff; font-size: 14px;
  opacity: 0; transition: all .3s; pointer-events: none;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
body.immersive-active .toast {
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.15);
}

/* ===== QRCode Modal ===== */
.qrcode-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
}
.qrcode-modal.show { display: flex; }
.qrcode-content {
  background: #fff; border-radius: var(--radius); width: 280px; overflow: hidden;
}
.qrcode-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.qrcode-header h3 { font-size: 16px; font-weight: 600; }
.qrcode-close {
  font-size: 24px; color: var(--text-muted);
  width: 40px; height: 40px; line-height: 38px; text-align: center;
  border-radius: 50%; background: rgba(0,0,0,.05);
  cursor: pointer; transition: background .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.qrcode-close:active { background: rgba(0,0,0,.1); color: var(--text); }
.qrcode-body { padding: 24px; text-align: center; }
.qrcode-body canvas { margin: 0 auto 12px; border: 6px solid #fff; box-shadow: 0 2px 12px rgba(0,0,0,.1); border-radius: 8px; }
.qrcode-code { font-size: 14px; font-weight: 600; color: var(--text); word-break: break-all; margin-bottom: 6px; }
.qrcode-tip { font-size: 12px; color: var(--text-muted); }
body.immersive-active .qrcode-modal { background: rgba(0, 0, 0, .55); }
body.immersive-active .qrcode-content {
  background: rgba(30, 30, 30, .92);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
}
body.immersive-active .qrcode-header { border-bottom-color: rgba(255,255,255,.12); }
body.immersive-active .qrcode-header h3 { color: #fff; }
body.immersive-active .qrcode-close { color: rgba(255,255,255,.85); background: rgba(255,255,255,.1); }
body.immersive-active .qrcode-close:active { background: rgba(255,255,255,.18); color: #fff; }
body.immersive-active .qrcode-code { color: #fff; }
body.immersive-active .qrcode-tip { color: rgba(255,255,255,.65); }

/* ===== Hide tab bar on detail/sub pages ===== */
.page-detail ~ .tab-bar,
.page-booking ~ .tab-bar,
.page-result ~ .tab-bar,
.page-order-detail ~ .tab-bar,
.page-card-intro ~ .tab-bar,
.page-my-card ~ .tab-bar,
.page-login ~ .tab-bar,
.page-realname ~ .tab-bar,
.page-groupbuy-detail ~ .tab-bar,
.page-distribution ~ .tab-bar,
.page-activities ~ .tab-bar {
  display: none;
}

/* ===== Price Breakdown ===== */
.price-breakdown {
  margin: 16px 0;
  padding: 14px 16px;
  background: rgba(26,107,74,.03);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(26,107,74,.08);
}
.price-breakdown h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
}
.price-label { color: var(--text-secondary); }
.price-val { color: var(--text); font-weight: 500; }
.price-save .price-label,
.price-save .price-val { color: var(--primary); }
.price-final {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 15px;
}
.price-final .price-label { font-weight: 600; color: var(--text); }
.price-final .price-val { color: var(--accent); font-weight: 700; }

/* ===== Booking Coupon Disabled ===== */
.booking-coupon-item.disabled {
  opacity: .45;
  pointer-events: none;
  background: var(--bg);
}
.booking-coupon-item.disabled .booking-coupon-item__disc {
  color: var(--text-muted);
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 0; }

/* ===== Legal Pages ===== */
.page-legal { padding: 0 12px 24px; padding-top: calc(var(--status-bar-h, 44px) + 52px); }
.legal-content {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px 20px; min-height: calc(100vh - 160px);
}
.legal-content h2 {
  font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 4px;
  background: linear-gradient(135deg, var(--primary), #38f9d7);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.legal-update-date {
  font-size: 11px; color: var(--text-muted); text-align: center; margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.legal-content h3 {
  font-size: 16px; font-weight: 600; color: var(--text);
  margin: 24px 0 10px; padding-left: 10px;
  border-left: 3px solid var(--primary);
}
.legal-content h4 {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin: 16px 0 8px;
}
.legal-content p {
  font-size: 14px; color: var(--text-secondary); line-height: 1.8;
  text-align: justify; margin: 8px 0;
}
.legal-content ul, .legal-content ol {
  font-size: 14px; color: var(--text-secondary); line-height: 1.8;
  margin: 8px 0; padding-left: 20px;
}
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li { margin: 4px 0; text-align: justify; }
.legal-content strong { color: var(--primary); font-weight: 600; }

/* ===== 终身卡商品横滑区（全背景覆盖式 + 3D交互） ===== */
.home-lifetime-scroll {
  display: flex;
  gap: 14px;
  padding: 0 16px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.home-lifetime-scroll::-webkit-scrollbar { display: none; }

.home-lifetime-card {
  flex-shrink: 0;
  width: calc(100vw - 52px);
  max-width: 370px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  scroll-snap-align: center;
  animation: fadeUp .4s ease;
  height: 260px;
  cursor: pointer;
  transition: box-shadow .3s;
}
.home-lifetime-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* 底层背景：3D卡片完整展示，保留互动力效 */
.home-lifetime-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, #1a0a00, #3d1800);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.home-lifetime-card__bg .gg-card3d {
  --gg-card-w: min(132%, 520px);
  --gg-card-h: calc(var(--gg-card-w) * 0.628);
  width: var(--gg-card-w);
  height: var(--gg-card-h);
  max-width: 104%;
  max-height: 104%;
  position: relative;
  perspective: 1100px;
  pointer-events: auto;
  transform: translateX(-4%);
}
.home-lifetime-card__bg .gg-card3d__card {
  border-radius: 14px;
  box-shadow: none;
}

/* 海棠卡底层视觉 */
.home-lifetime-card__bg--haitang {
  background: linear-gradient(135deg, #072e1c, #0d5c36);
  overflow: hidden;
}
.home-lifetime-card__haitang-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.home-lifetime-card__haitang-icon {
  font-size: 96px;
  filter: drop-shadow(0 4px 20px rgba(56,218,142,.35));
  animation: haitangPulse 3s ease-in-out infinite;
}
.home-lifetime-card__haitang-art::before {
  content: '';
  position: absolute;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(rgba(56,218,142,.18), transparent 70%);
  animation: haitangPulse 3s ease-in-out infinite;
}
@keyframes haitangPulse {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* 半透明遮罩层——轻量，左侧清晰露出3D卡面纹理 */
.home-lifetime-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(104deg,
    rgba(0,0,0,.04) 0%,
    rgba(0,0,0,.04) 35%,
    rgba(0,0,0,.45) 55%,
    rgba(0,0,0,.72) 100%);
  pointer-events: none;
  transition: background .3s;
}
.home-lifetime-card:hover .home-lifetime-card__overlay {
  background: linear-gradient(104deg,
    rgba(0,0,0,.02) 0%,
    rgba(0,0,0,.04) 35%,
    rgba(0,0,0,.38) 55%,
    rgba(0,0,0,.65) 100%);
}
.home-lifetime-card__overlay--haitang {
  background: linear-gradient(104deg,
    rgba(7,46,28,.04) 0%,
    rgba(7,46,28,.04) 35%,
    rgba(7,46,28,.45) 55%,
    rgba(7,46,28,.70) 100%);
}

/* 内容层 */
.home-lifetime-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 14px 14px 12px 46%;
  color: #fff;
  pointer-events: none;
}
.home-lifetime-card__content button {
  pointer-events: auto;
}

/* 顶部标签行 */
.home-lifetime-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-lifetime-card__badge {
  font-size: 12px;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: 6px;
  background: linear-gradient(135deg, #8b2500, #f5af19);
  color: #fff;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(245,175,25,.3);
}
.home-lifetime-card__badge--green {
  background: linear-gradient(135deg, #0d5c36, #38da8e);
  box-shadow: 0 2px 10px rgba(56,218,142,.3);
}
.home-lifetime-card__tag {
  font-size: 10px;
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.14);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: .5px;
  border: 1px solid rgba(255,255,255,.1);
}

/* 标题区 */
.home-lifetime-card__title {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
  margin-top: 0;
  line-height: 1.1;
  letter-spacing: .5px;
}
.home-lifetime-card__subtitle {
  font-size: 11px;
  color: rgba(255,229,158,.95);
  margin-top: 4px;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
  font-weight: 600;
}

/* 权益清单——2列网格排列更紧凑 */
.home-lifetime-card__perks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 8px;
  margin-top: 8px;
}
.home-lifetime-card__perks--keywords {
  grid-template-columns: repeat(2, auto);
  justify-content: start;
}
.home-lifetime-card__perk {
  font-size: 10.5px;
  color: rgba(255,255,255,.9);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  background: rgba(0,0,0,.22);
  padding: 3px 7px;
  border-radius: 999px;
  backdrop-filter: blur(2px);
}
.home-lifetime-card__perk i {
  font-style: normal;
  font-size: 11px;
}

/* 底部价格+CTA */
.home-lifetime-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 6px;
  gap: 8px;
}
.home-lifetime-card__prices {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.home-lifetime-card__orig {
  font-size: 13px;
  color: rgba(255,255,255,.45);
  text-decoration: line-through;
}
.home-lifetime-card__now {
  font-size: 26px;
  font-weight: 900;
  color: #ffd32a;
  text-shadow: 0 0 16px rgba(255,211,42,.4);
  line-height: 1;
}
.home-lifetime-card__unit {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  margin-left: 3px;
}

.home-lifetime-card__cta {
  padding: 8px 14px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, #8b2500, #f5af19);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(245,175,25,.45);
  transition: all .2s;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  white-space: nowrap;
}
.home-lifetime-card__cta::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation: ctaShine 2.8s ease-in-out infinite;
}
@keyframes ctaShine {
  0% { left: -100%; }
  45%, 100% { left: 100%; }
}
.home-lifetime-card__cta:active {
  transform: scale(.96);
  box-shadow: 0 2px 6px rgba(245,175,25,.2);
}
.home-lifetime-card__cta--green {
  background: linear-gradient(135deg, #0d5c36, #38da8e);
  box-shadow: 0 4px 18px rgba(56,218,142,.45);
}
.home-lifetime-card__cta--green:active {
  box-shadow: 0 2px 6px rgba(56,218,142,.2);
}

/* 沉浸模式适配 */
.page--immersive .home-lifetime-card {
  box-shadow: 0 10px 36px rgba(0,0,0,.4);
}
.activity-list--immersive .home-lifetime-scroll {
  padding: 0 16px 20px;
}

/* ===== 沉浸式字体层级工具类 ===== */
body.immersive-active .immersive-text-display {
  font: var(--immersive-display);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
body.immersive-active .immersive-text-title {
  font: var(--immersive-title);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
body.immersive-active .immersive-text-headline {
  font: var(--immersive-headline);
  color: #fff;
}
body.immersive-active .immersive-text-body {
  font: var(--immersive-body);
  color: rgba(255,255,255,.9);
}
body.immersive-active .immersive-text-callout {
  font: var(--immersive-callout);
  color: rgba(255,255,255,.8);
}
body.immersive-active .immersive-text-caption {
  font: var(--immersive-caption);
  color: rgba(255,255,255,.65);
}

/* 沉浸式页面标题统一应用层级 */
body.immersive-active .page-activities .activity-hero h1 { font: var(--immersive-display); }
body.immersive-active .page-dining .dining-immersive__header h2,
body.immersive-active .page-groupbuy .groupbuy-immersive__header h2,
body.immersive-active .page-distribution .dist-hero__info h2,
body.immersive-active .orders-immersive__header h2,
body.immersive-active .coupons-immersive__header h2,
body.immersive-active .page-vip-level .vip-hero__name { font: var(--immersive-title); }
body.immersive-active .page-card-intro .card-intro-hero__content h1 { font: var(--immersive-display); }
body.immersive-active .page-card-intro .card-intro-features h2,
body.immersive-active .page-card-intro .card-intro-scenic-list h2,
body.immersive-active .page-card-intro .card-intro-smart-entry h2,
body.immersive-active .page-card-intro .card-intro-rules h2,
body.immersive-active .my-card-usage h3,
body.immersive-active .vip-points-rules h3,
body.immersive-active .vip-levels-compare h3,
body.immersive-active .vip-points-detail h3 { font: var(--immersive-headline); }

/* 正文与说明 */
body.immersive-active .page-activities .activity-hero p,
body.immersive-active .page-dining .dining-immersive__header p,
body.immersive-active .page-groupbuy .groupbuy-immersive__header p,
body.immersive-active .page-distribution .dist-hero__info p,
body.immersive-active .page-card-intro .card-intro-hero__sub { font: var(--immersive-callout); }
body.immersive-active .product-card__name,
body.immersive-active .groupbuy-card__name,
body.immersive-active .dining-card__name,
body.immersive-active .order-card__product,
body.immersive-active .ticket-card__name { font: var(--immersive-headline); }
body.immersive-active .product-card__tag,
body.immersive-active .groupbuy-card__type,
body.immersive-active .dining-card__type,
body.immersive-active .order-card__id,
body.immersive-active .order-card__meta,
body.immersive-active .ticket-card__row .label,
body.immersive-active .result-order__row .label { font: var(--immersive-caption); }
body.immersive-active .product-card__sold,
body.immersive-active .groupbuy-card__desc,
body.immersive-active .groupbuy-card__people,
body.immersive-active .dining-card__desc,
body.immersive-active .dining-card__consume,
body.immersive-active .coupon-card__cond,
body.immersive-active .coupon-card__time,
body.immersive-active .empty-state p { font: var(--immersive-callout); }
body.immersive-active .product-card__price,
body.immersive-active .dining-card__price,
body.immersive-active .order-card__price,
body.immersive-active .groupbuy-card__price { font: var(--immersive-headline); }

/* 禁止小字号被浏览器强制放大 */
body.immersive-active { -webkit-text-size-adjust: 100%; }