/* Global visual tokens follow the supplied page-by-page reference. */
.mini-page {
  --primary: #2a1a12;
  --primary-deep: #17100c;
  --primary-mid: #4a2e1e;
  --primary-soft: #6b4a2f;
  --gold: #d6ae67;
  --gold-deep: #a9762e;
  --gold-light: #f0dca6;
  --gold-soft: #ead9b4;
  --cream: #f7f1e1;
  --bg: #f6f0e4;
  --bg-cream: #f6f0e4;
  --card: #fffdf7;
  --text: #2c2119;
  --text-secondary: #7c6a55;
  --red: #a33a28;
  --tag-bg: #efdfc0;
  --line: rgba(138, 90, 40, 0.18);
  --shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(62, 43, 23, 0.1);
  background: var(--bg);
  color: var(--text);
  font-size: calc(28 * var(--rpx));
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
}

.home,
.ticket,
.study,
.strategy,
.service {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

.guide,
.shop,
.mine,
.more {
  min-height: 100vh;
  background: #17100c;
  color: #f3e7cf;
}

.serif {
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
}

/* ---------- 自定义导航栏 ---------- */
.ui-nav {
  position: relative;
  background: transparent;
}
.ui-nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ui-nav-title {
  color: #4a2e1e;
  font-size: calc(34 * var(--rpx));
  font-weight: 600;
  letter-spacing: calc(2 * var(--rpx));
  text-shadow: none;
}
.ui-nav-title::after {
  content: "";
  display: block;
  width: calc(40 * var(--rpx));
  height: calc(2 * var(--rpx));
  margin: calc(8 * var(--rpx)) auto 0;
  background: var(--gold);
}
.ui-nav-back {
  position: absolute;
  left: calc(20 * var(--rpx));
  top: 50%;
  transform: translateY(-50%);
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  line-height: calc(54 * var(--rpx));
  text-align: center;
  color: #6b4a2f;
  font-size: calc(46 * var(--rpx));
}
.ui-nav-cream {
  background: transparent;
}
.ui-nav-cream .ui-nav-title {
  color: #4a2e1e;
}
.ui-nav-cream .ui-nav-back {
  color: #6b4a2f;
}
.ui-nav-clear {
  background: transparent;
}

.page-body {
  min-height: 100vh;
  padding-bottom: calc(40 * var(--rpx));
}

/* 自定义 tabBar 为 fixed 定位，tab 页预留底部高度 */
.page-body.has-tabbar {
  padding-bottom: calc(calc(140 * var(--rpx)) + env(safe-area-inset-bottom));
}

/* ---------- 卡片 ---------- */
.ui-card {
  margin: 0 calc(24 * var(--rpx)) calc(24 * var(--rpx));
  padding: calc(28 * var(--rpx));
  background: var(--card);
  color: var(--text);
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(18 * var(--rpx));
  box-shadow: var(--shadow);
}
.card {
  margin: calc(20 * var(--rpx));
  padding: calc(24 * var(--rpx));
  background: var(--card);
  color: var(--text);
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(18 * var(--rpx));
  box-shadow: var(--shadow);
}

/* 深棕鎏金主视觉卡 */
.ui-hero {
  position: relative;
  margin: 0 calc(24 * var(--rpx)) calc(24 * var(--rpx));
  padding: calc(40 * var(--rpx)) calc(32 * var(--rpx));
  border-radius: calc(28 * var(--rpx));
  border: calc(2 * var(--rpx)) solid rgba(214, 174, 103, 0.75);
  overflow: hidden;
  color: var(--gold-light);
  background:
    linear-gradient(135deg, rgba(23, 16, 12, 0.94) 0%, rgba(74, 46, 30, 0.9) 58%, rgba(42, 26, 18, 0.96) 100%);
}
.ui-hero::before {
  content: "";
  position: absolute;
  right: calc(-120 * var(--rpx));
  top: calc(-140 * var(--rpx));
  width: calc(360 * var(--rpx));
  height: calc(360 * var(--rpx));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 174, 103, 0.3), rgba(214, 174, 103, 0) 68%);
}
.ui-hero::after {
  content: "";
  position: absolute;
  left: calc(24 * var(--rpx));
  right: calc(24 * var(--rpx));
  top: calc(16 * var(--rpx));
  bottom: calc(16 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(240, 220, 166, 0.28);
  border-radius: calc(22 * var(--rpx));
  pointer-events: none;
}
.ui-hero-title {
  position: relative;
  display: block;
  font-size: calc(46 * var(--rpx));
  font-weight: 700;
  letter-spacing: calc(2 * var(--rpx));
  color: var(--gold-light);
  text-shadow: 0 calc(2 * var(--rpx)) calc(12 * var(--rpx)) rgba(0, 0, 0, 0.45);
}
.ui-hero-sub {
  position: relative;
  display: block;
  margin-top: calc(12 * var(--rpx));
  font-size: calc(26 * var(--rpx));
  color: rgba(247, 241, 225, 0.82);
  letter-spacing: calc(2 * var(--rpx));
}

/* ---------- 区块标题 ---------- */
.ui-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(28 * var(--rpx)) calc(28 * var(--rpx)) calc(16 * var(--rpx));
}
.ui-section-title {
  font-size: calc(34 * var(--rpx));
  font-weight: 700;
  color: #4a2e1e;
}
.ui-section-title::before {
  content: "";
  display: inline-block;
  width: calc(6 * var(--rpx));
  height: calc(30 * var(--rpx));
  margin-right: calc(14 * var(--rpx));
  background: var(--gold);
  border-radius: calc(3 * var(--rpx));
  vertical-align: calc(-4 * var(--rpx));
}
.ui-section-more {
  font-size: calc(24 * var(--rpx));
  color: #8a5a28;
}

.guide .ui-nav-title,
.shop .ui-nav-title,
.mine .ui-nav-title,
.more .ui-nav-title,
.guide .ui-nav-back,
.shop .ui-nav-back,
.mine .ui-nav-back,
.more .ui-nav-back {
  color: var(--gold-light);
  text-shadow: 0 calc(2 * var(--rpx)) calc(10 * var(--rpx)) rgba(0, 0, 0, 0.5);
}

.guide .ui-section-title,
.mine .ui-section-title,
.more .ui-section-title {
  color: var(--gold-light);
}

.guide .ui-section-more,
.mine .ui-section-more,
.more .ui-section-more {
  color: rgba(214, 174, 103, 0.9);
}

/* ---------- 按钮 ---------- */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(64 * var(--rpx));
  padding: 0 calc(36 * var(--rpx));
  border-radius: calc(36 * var(--rpx));
  background: rgba(42, 26, 18, 0.9);
  color: var(--gold-light);
  font-size: calc(26 * var(--rpx));
  border: calc(1 * var(--rpx)) solid var(--gold);
}
.ui-btn-gold {
  background: linear-gradient(135deg, #ecd49c 0%, #d6ae67 46%, #b9873f 100%);
  color: #3b2a12;
  border: calc(1 * var(--rpx)) solid rgba(240, 220, 166, 0.8);
  font-weight: 600;
  box-shadow: 0 calc(6 * var(--rpx)) calc(18 * var(--rpx)) rgba(0, 0, 0, 0.28);
}
.ui-btn-red {
  background: linear-gradient(135deg, #b84833 0%, #993424 100%);
  color: #f9edd2;
  border: calc(1 * var(--rpx)) solid rgba(240, 220, 166, 0.35);
  font-weight: 600;
}
.ui-btn-ghost {
  background: rgba(23, 16, 12, 0.28);
  color: var(--gold-light);
  border: calc(1 * var(--rpx)) solid rgba(214, 174, 103, 0.8);
}
.ui-btn-block {
  display: flex;
  width: 100%;
}
.ui-btn-sm {
  height: calc(56 * var(--rpx));
  padding: 0 calc(28 * var(--rpx));
  font-size: calc(24 * var(--rpx));
}
/* 原生 button 复位（open-type 场景） */
.ui-btn-reset {
  margin: 0;
  padding: 0;
  line-height: normal;
  background: transparent;
  border: none;
}
.ui-btn-reset::after {
  border: none;
}

/* ---------- 标签 / 分类 ---------- */
.ui-tabs {
  display: flex;
  align-items: center;
  padding: 0 calc(24 * var(--rpx));
  margin-bottom: calc(10 * var(--rpx));
}
.ui-tab {
  position: relative;
  margin-right: calc(44 * var(--rpx));
  padding: calc(10 * var(--rpx)) 0 calc(16 * var(--rpx));
  font-size: calc(30 * var(--rpx));
  color: #7c6a55;
}
.ui-tab.active {
  color: #4a2e1e;
  font-weight: 700;
}
.ui-tab.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(2 * var(--rpx));
  transform: translateX(-50%);
  width: calc(36 * var(--rpx));
  height: calc(4 * var(--rpx));
  border-radius: calc(2 * var(--rpx));
  background: var(--red);
}
.tag {
  display: inline-block;
  padding: calc(8 * var(--rpx)) calc(24 * var(--rpx));
  margin: calc(8 * var(--rpx)) calc(12 * var(--rpx)) calc(8 * var(--rpx)) 0;
  border-radius: calc(28 * var(--rpx));
  background: rgba(214, 174, 103, 0.14);
  color: var(--gold-light);
  font-size: calc(24 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(214, 174, 103, 0.4);
}
.tag.active {
  background: var(--gold);
  color: #3b2a12;
  border-color: var(--gold);
}
.tag-gold {
  background: rgba(214, 174, 103, 0.18);
  color: var(--gold-deep);
}

/* ---------- 八宫格 ---------- */
.ui-grid {
  display: flex;
  flex-wrap: wrap;
}
.ui-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
  padding: calc(18 * var(--rpx)) 0;
}
.ui-grid-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(92 * var(--rpx));
  height: calc(92 * var(--rpx));
  margin-bottom: calc(10 * var(--rpx));
  border-radius: 50%;
  border: calc(1 * var(--rpx)) solid rgba(214, 174, 103, 0.45);
}
.ui-grid-icon .mini-image {
  width: calc(54 * var(--rpx));
  height: calc(54 * var(--rpx));
}
.ui-grid-span {
  font-size: calc(24 * var(--rpx));
  color: var(--text);
}
.tone-0 {
  background: #f6ecd6;
}
.tone-1 {
  background: #f1e2c2;
}
.tone-2 {
  background: #f8f0df;
}
.tone-3 {
  background: #efe0c4;
}

/* ---------- 横向列表卡 ---------- */
.ui-list {
  display: flex;
  margin: 0 calc(24 * var(--rpx)) calc(20 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background: var(--card);
  color: var(--text);
  border: calc(1 * var(--rpx)) solid var(--line);
  border-radius: calc(18 * var(--rpx));
  box-shadow: var(--shadow);
}
.ui-list-thumb {
  flex: none;
  width: calc(180 * var(--rpx));
  height: calc(180 * var(--rpx));
  border-radius: calc(18 * var(--rpx));
  overflow: hidden;
  background: var(--gold-soft);
}
.ui-list-thumb .mini-image {
  width: 100%;
  height: 100%;
}
.ui-list-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  margin-left: calc(22 * var(--rpx));
}
.ui-list-title {
  font-size: calc(32 * var(--rpx));
  font-weight: 700;
  color: var(--text);
}
.ui-list-desc {
  margin-top: calc(10 * var(--rpx));
  font-size: calc(25 * var(--rpx));
  line-height: 1.55;
  color: var(--text-secondary);
}
.ui-list-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.ui-chip {
  display: inline-block;
  padding: calc(4 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
  font-size: calc(22 * var(--rpx));
  color: #8a5a28;
  background: #efdfc0;
}
.ui-chip-gold {
  background: rgba(214, 174, 103, 0.18);
  color: var(--gold-deep);
  border: calc(1 * var(--rpx)) solid rgba(214, 174, 103, 0.4);
}
.ui-empty {
  padding: calc(80 * var(--rpx)) 0;
  text-align: center;
  font-size: calc(26 * var(--rpx));
  color: var(--text-secondary);
}

/* ---------- 兼容旧类（详情页等） ---------- */
.section-title {
  padding: calc(20 * var(--rpx)) calc(24 * var(--rpx)) calc(8 * var(--rpx));
  font-size: calc(32 * var(--rpx));
  font-weight: 700;
  color: #4a2e1e;
}
.btn-primary {
  border-radius: calc(40 * var(--rpx));
  background: linear-gradient(135deg, #ecd49c 0%, #d6ae67 46%, #b9873f 100%);
  color: #3b2a12;
  border: calc(1 * var(--rpx)) solid rgba(240, 220, 166, 0.8);
  font-size: calc(28 * var(--rpx));
  font-weight: 600;
  box-shadow: 0 calc(6 * var(--rpx)) calc(18 * var(--rpx)) rgba(0, 0, 0, 0.24);
}
.btn-primary[disabled] {
  background: #8a7a68;
  color: #ffffff;
}
.placeholder-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(320 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
  background: linear-gradient(135deg, #3a2517, #241811);
  color: var(--gold);
  font-size: calc(24 * var(--rpx));
  letter-spacing: calc(2 * var(--rpx));
}
.placeholder-img .mini-image {
  width: 100%;
  height: 100%;
  border-radius: calc(16 * var(--rpx));
}