/* =========================================================
   熊王帝国 · 设计系统（画布 375px，整体等比缩放）
   ========================================================= */
:root {
  --bg: #0b0e12;
  --bg-2: #0e1318;
  --card: rgba(255, 255, 255, .055);
  --card-2: rgba(255, 255, 255, .085);
  --line: rgba(255, 255, 255, .085);
  --line-2: rgba(255, 255, 255, .14);
  --txt: #f3f6f8;
  --txt-2: #a3adb8;
  --txt-3: #6b7683;
  --amber: #ffb02e;
  --amber-2: #ff7a2b;
  --green: #57e08a;
  --violet: #a983ff;
  --blue: #5aa9ff;
  --radius: 20px;
  --nav-h: 62px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: #05070a;
  overflow: hidden;
  color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, li { list-style: none; }
img { display: block; }
em, i { font-style: normal; }

#app { position: fixed; inset: 0; overflow: hidden; }

.phone {
  position: absolute;
  top: 0; left: 50%;
  width: 375px;
  height: var(--vh, 812px);
  transform: translateX(-50%) scale(var(--s, 1));
  transform-origin: top center;
  background:
    radial-gradient(120% 55% at 78% -8%, rgba(255, 160, 40, .16) 0%, rgba(11, 14, 18, 0) 62%),
    radial-gradient(90% 45% at 6% 4%, rgba(90, 160, 255, .10) 0%, rgba(11, 14, 18, 0) 60%),
    var(--bg);
  overflow: hidden;
  border-radius: 0;
}

/* ---------------- 页面 ---------------- */
.page {
  position: absolute; inset: 0;
  display: none;
  overflow: hidden;
}
.page.on { display: block; }

.scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 96px;
  scrollbar-width: none;
}
.scroll::-webkit-scrollbar { display: none; }

/* =========================================================
   首页
   ========================================================= */
.hero {
  position: relative;
  height: 268px;
  overflow: hidden;
}
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
  transform: scale(1.02);
}
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 11, 16, .86) 0%, rgba(8, 11, 16, .28) 26%, rgba(8, 11, 16, 0) 52%),
    linear-gradient(0deg, #0b0e12 0%, rgba(11, 14, 18, .55) 12%, rgba(11, 14, 18, 0) 36%);
}
.hero-top {
  position: relative;
  padding: 16px 18px 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-logo {
  width: 40px; height: 40px; border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.brand-txt h1 {
  font-size: 18.5px; font-weight: 800; letter-spacing: .6px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  line-height: 1.15;
}
.brand-txt p {
  margin-top: 3px;
  font-size: 10px; letter-spacing: 1.6px;
  color: rgba(255, 255, 255, .58);
}
.user-chip {
  display: flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px 0 4px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 11.5px; color: #fff;
  transition: transform .18s ease, background .18s ease;
}
.user-chip:active { transform: scale(.96); background: rgba(255, 255, 255, .2); }
.user-chip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }

/* ---- 资产卡 ---- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.asset-card {
  position: relative;
  margin: -52px 16px 0;
  padding: 16px 16px 14px;
  background: linear-gradient(160deg, rgba(46, 34, 22, .82) 0%, rgba(24, 27, 33, .88) 58%, rgba(20, 24, 30, .9) 100%);
  border-color: rgba(255, 190, 110, .18);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 210, 150, .16);
}
.asset-row { display: flex; align-items: center; }
.asset { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.asset-num {
  font-size: 19px; font-weight: 800; letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 30%, #ffd79a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.asset-lb { font-size: 10.5px; color: var(--txt-3); letter-spacing: .3px; }
.asset-sep { width: 1px; height: 26px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .14), transparent); }

.btn-sign {
  margin-top: 13px;
  width: 100%; height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #b6ef7c 0%, #8ce05a 46%, #62d94e 100%);
  color: #16300a;
  font-size: 13px; font-weight: 800; letter-spacing: .5px;
  box-shadow: 0 8px 20px rgba(98, 217, 78, .24), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .16s ease, filter .16s ease;
}
.btn-sign:active { transform: scale(.985); filter: brightness(1.06); }
.btn-sign.done {
  background: rgba(255, 255, 255, .08);
  color: var(--green);
  box-shadow: inset 0 0 0 1px rgba(87, 224, 138, .35);
}

/* ---- 快捷入口 ---- */
.quick {
  margin: 20px 12px 0;
  display: flex;
}
.quick li { flex: 1; }
.quick a {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 4px 0 2px;
  transition: transform .16s ease;
}
.quick a:active { transform: scale(.93); }
.q-ic {
  width: 50px; height: 50px;
  border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.q-ic::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.q-ic img { width: 30px; height: 30px; object-fit: contain; }
.q1 { background: linear-gradient(150deg, rgba(70, 130, 235, .30), rgba(40, 80, 160, .12)); }
.q2 { background: linear-gradient(150deg, rgba(255, 130, 60, .30), rgba(160, 60, 20, .12)); }
.q3 { background: linear-gradient(150deg, rgba(180, 110, 255, .30), rgba(110, 50, 190, .12)); }
.q4 { background: linear-gradient(150deg, rgba(60, 200, 170, .28), rgba(20, 120, 110, .12)); }
.quick span { font-size: 11.5px; color: #cfd6de; letter-spacing: .2px; }

/* ---- 主推卡 ---- */
.feature {
  position: relative;
  margin: 20px 16px 0;
  height: 152px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, .09);
}
.feature-bg { position: absolute; right: 0; top: 0; width: 64%; height: 100%; object-fit: cover; object-position: 42% 40%; }
.feature-shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6, 14, 12, .96) 0%, rgba(6, 14, 12, .88) 30%, rgba(6, 14, 12, .42) 52%, rgba(6, 14, 12, 0) 70%);
}
.feature-body { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); }
.pill {
  display: inline-block;
  padding: 3px 9px; border-radius: 8px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .6px;
  color: #17340f;
  background: linear-gradient(135deg, #b6f08a, #6fdc6f);
  box-shadow: 0 4px 12px rgba(110, 220, 110, .25);
}
.feature-body h2 { margin-top: 8px; font-size: 21px; font-weight: 800; letter-spacing: 1px; }
.feature-body p { margin-top: 5px; font-size: 11px; color: rgba(255, 255, 255, .66); }
.btn-ghost {
  margin-top: 12px;
  height: 30px; padding: 0 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  font-size: 11.5px; font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .16s ease, background .16s ease;
}
.btn-ghost:active { transform: scale(.95); background: rgba(255, 255, 255, .24); }

/* ---- 双卡 ---- */
.duo { margin: 12px 16px 0; display: flex; gap: 10px; }
.mini {
  position: relative;
  flex: 1;
  height: 104px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  transition: transform .16s ease;
}
.mini:active { transform: scale(.97); }
.mini-bg { position: absolute; right: 0; top: 0; width: 60%; height: 100%; object-fit: cover; object-position: 52% 50%; }
.mini::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 8, 20, .95) 0%, rgba(10, 8, 20, .85) 32%, rgba(10, 8, 20, .35) 56%, rgba(10, 8, 20, 0) 72%);
}
.mini-txt { position: absolute; left: 14px; bottom: 14px; z-index: 2; }
.mini-txt h3 { font-size: 15px; font-weight: 700; letter-spacing: .4px; }
.mini-txt p { margin-top: 4px; font-size: 10.5px; color: rgba(255, 255, 255, .6); }

/* ---- 公告 ---- */
.notice {
  margin: 14px 16px 0;
  height: 40px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  overflow: hidden;
}
.notice-tag {
  flex: 0 0 auto;
  font-size: 9.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 6px;
  color: #ffd08a;
  background: rgba(255, 160, 50, .16);
  border: 1px solid rgba(255, 170, 70, .22);
}
.notice-view { flex: 1; overflow: hidden; height: 16px; position: relative; }
.notice-track {
  position: absolute; white-space: nowrap;
  font-size: 11.5px; color: var(--txt-2);
  animation: marquee 18s linear infinite;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- 推荐商品 ---- */
.sec-head {
  margin: 22px 16px 10px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.sec-head h3 { font-size: 16px; font-weight: 800; letter-spacing: .4px; }
.sec-more { font-size: 11px; color: var(--txt-3); }
.sec-more em { font-size: 13px; }

.goods { margin: 0 16px; display: flex; gap: 10px; }
.good {
  flex: 1;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .16s ease;
}
.good:active { transform: scale(.98); }
.good-img {
  height: 132px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.good-img img { width: 100%; height: 100%; object-fit: cover; }
.good h4 {
  padding: 9px 10px 0;
  font-size: 11.5px; font-weight: 500; line-height: 1.45;
  color: #dfe4e9;
  height: 43px;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.good-foot {
  padding: 6px 10px 11px;
  display: flex; align-items: center; justify-content: space-between;
}
.price { font-size: 16px; font-weight: 800; color: #ff9a4d; letter-spacing: -.2px; }
.price i { font-size: 10.5px; font-weight: 600; margin-right: 1px; }
.price small { font-size: 10.5px; font-weight: 700; }
.tags { display: flex; gap: 3px; }
.tags img { height: 11px; width: auto; }

.foot-note {
  margin: 24px 0 10px;
  text-align: center;
  font-size: 10px; letter-spacing: 1px;
  color: #414a55;
}

/* =========================================================
   我的
   ========================================================= */
.mine-hero {
  position: relative;
  padding: 16px 18px 0;
  height: 168px;
}
.mine-glow {
  position: absolute; inset: -70px -30% auto -30%;
  height: 260px;
  background:
    radial-gradient(52% 46% at 82% 6%, rgba(255, 168, 66, .17) 0%, rgba(11, 14, 18, 0) 70%),
    radial-gradient(46% 40% at 12% 2%, rgba(96, 150, 255, .09) 0%, rgba(11, 14, 18, 0) 72%);
  pointer-events: none;
}
.mine-bar { position: relative; display: flex; justify-content: flex-end; gap: 10px; }
.round-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #d8dee5;
  transition: transform .16s ease, background .16s ease;
}
.round-btn:active { transform: scale(.92); background: rgba(255, 255, 255, .18); }
.round-btn svg { width: 17px; height: 17px; }

.profile {
  position: relative;
  margin-top: 14px;
  display: flex; align-items: center; gap: 13px;
}
.p-avatar-wrap { position: relative; flex: 0 0 auto; }
.p-avatar {
  width: 62px; height: 62px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
}
.p-lv {
  position: absolute; right: -6px; bottom: -2px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9.5px; font-weight: 800;
  color: #2a1503;
  background: linear-gradient(135deg, #ffd37a, #ff9b3d);
  border: 1.5px solid #12161b;
}
.p-info { flex: 1; min-width: 0; }
.p-info h2 {
  font-size: 19px; font-weight: 800;
  letter-spacing: .3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.p-info p { margin-top: 5px; font-size: 11px; color: var(--txt-3); }
.btn-login {
  flex: 0 0 auto;
  height: 32px; padding: 0 16px;
  border-radius: 16px;
  font-size: 12px; font-weight: 700;
  color: #2a1503;
  background: linear-gradient(135deg, #b6ef7c 0%, #8ce05a 46%, #62d94e 100%);
  box-shadow: 0 6px 18px rgba(98, 217, 78, .24);
  transition: transform .16s ease;
}
.btn-login:active { transform: scale(.94); }
.btn-login.hide { display: none; }

/* ---- 资产面板 ---- */
.wallet-card {
  position: relative;
  margin: 2px 16px 0;
  padding: 0;
  display: flex; align-items: stretch;
  background: linear-gradient(150deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .04) 100%);
  overflow: hidden;
}
.w-col {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 16px 0 15px;
  border-radius: 14px;
  transition: background .16s ease, transform .16s ease;
}
.w-col:active { background: rgba(255, 255, 255, .07); transform: scale(.97); }
.w-num { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.w-lb { font-size: 10.5px; color: var(--txt-3); }
.w-arrow {
  position: absolute; right: 0; top: 0;
  height: 34px; padding: 0 11px;
  font-size: 9.5px; color: var(--txt-3);
  border-radius: 0 14px 0 10px;
  transition: background .16s ease, color .16s ease;
}
.w-arrow:active { background: rgba(255, 255, 255, .08); color: #fff; }

/* ---- 订单 ---- */
.order-card { margin: 12px 16px 0; padding: 14px 14px 16px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px;
}
.card-head h3 { font-size: 15px; font-weight: 800; letter-spacing: .3px; }
.head-more { font-size: 11px; color: var(--txt-3); }
.head-more em { font-size: 13px; }
.order-row { margin-top: 12px; display: flex; align-items: stretch; }
.o-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 8px;
  padding: 6px 0 2px;
  border-radius: 12px;
  transition: background .16s ease, transform .16s ease;
}
.o-item:active { background: rgba(255, 255, 255, .06); transform: scale(.95); }
.o-ic { position: relative; width: 42px; height: 42px; display: block; }
.o-ic img { width: 42px; height: 42px; object-fit: contain; }
.o-badge {
  position: absolute; top: -5px; right: -7px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff6a5a, #ff3d3d);
  color: #fff; font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 60, 60, .45);
  border: 1.5px solid #14181d;
}
.o-item span { font-size: 11px; color: #c3cbd4; }

/* ---- 松鼠横幅 ---- */
.mine-banner {
  position: relative;
  display: block; width: auto;
  margin: 12px 16px 0;
  height: 92px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  text-align: left;
  transition: transform .16s ease;
}
.mine-banner:active { transform: scale(.985); }
.mine-banner img { position: absolute; right: 0; top: 0; width: 56%; height: 100%; object-fit: cover; object-position: 46% 48%; }
.mine-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 8, 20, .96) 0%, rgba(10, 8, 20, .86) 34%, rgba(10, 8, 20, .35) 56%, rgba(10, 8, 20, 0) 72%);
}
.mb-txt { position: absolute; left: 15px; bottom: 13px; z-index: 2; }
.mb-txt h3 { font-size: 14.5px; font-weight: 800; letter-spacing: .4px; }
.mb-txt p { margin-top: 4px; font-size: 10.5px; color: rgba(255, 255, 255, .62); }
.mb-txt p b { color: var(--amber); font-size: 12px; font-weight: 800; }
.btn-mini {
  display: inline-block; margin-top: 7px;
  padding: 2px 8px; border-radius: 7px;
  font-size: 9.5px; color: #d7f0c6;
  background: rgba(120, 200, 90, .22);
  border: 1px solid rgba(140, 210, 110, .3);
}

/* ---- 我的双卡 ---- */
.mini.small {
  height: 76px;
  background: var(--card);
  border: 1px solid var(--line);
}
.mini.small::after { display: none; }
.mini.small .mini-txt { left: 14px; top: 50%; bottom: auto; transform: translateY(-50%); }
.mini.small .mini-txt h3 { font-size: 13.5px; }
.mini.small .mini-txt p { margin-top: 5px; font-size: 10px; color: var(--txt-3); }
.mini-ic { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; object-fit: contain; z-index: 2; }
.pill-sm {
  display: inline-block; margin-top: 6px;
  padding: 1.5px 8px; border-radius: 8px;
  font-size: 9.5px; font-weight: 600; color: #fff;
  background: linear-gradient(90deg, #5aa9ff, #b07cf6);
}

/* ---- 常用功能 ---- */
.func-card { margin: 12px 16px 0; padding: 14px 10px 12px; }
.func-grid { margin-top: 10px; display: flex; flex-wrap: wrap; }
.func-grid button {
  width: 25%;
  height: 66px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  transition: transform .16s ease;
}
.func-grid button:active { transform: scale(.92); }
.func-grid img, .func-grid svg { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.func-grid span { font-size: 10.5px; color: #b6bfc9; }


/* =========================================================
   占位页
   ========================================================= */
.ph { display: none; }
.ph.on { display: flex; }
.ph-inner {
  margin: auto;
  width: 100%;
  padding: 0 34px calc(var(--nav-h) + 10px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.ph-art {
  width: 100%; height: 186px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--shadow);
}
.ph-art img { width: 100%; height: 100%; object-fit: cover; }
.ph-pill {
  margin-top: 22px;
  padding: 3px 10px; border-radius: 8px;
  font-size: 9px; font-weight: 800; letter-spacing: 1.6px;
  color: #ffd08a;
  background: rgba(255, 160, 50, .12);
  border: 1px solid rgba(255, 170, 70, .22);
}
.ph-inner h2 { margin-top: 12px; font-size: 23px; font-weight: 800; letter-spacing: 1px; }
.ph-inner p {
  margin-top: 10px;
  font-size: 12px; line-height: 1.9; color: var(--txt-3);
}
.btn-primary {
  margin-top: 24px;
  height: 44px; padding: 0 34px;
  border-radius: 14px;
  font-size: 13.5px; font-weight: 800;
  color: #2a1503;
  background: linear-gradient(135deg, #b6ef7c 0%, #8ce05a 46%, #62d94e 100%);
  box-shadow: 0 10px 24px rgba(98, 217, 78, .26), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .16s ease, filter .16s ease;
}
.btn-primary:active { transform: scale(.97); filter: brightness(1.05); }
.btn-primary.wide { width: 100%; margin-top: 6px; }

/* =========================================================
   底部导航
   ========================================================= */
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--nav-h);
  padding: 7px 6px 0;
  display: flex;
  background: linear-gradient(180deg, rgba(13, 16, 21, .72) 0%, rgba(11, 14, 18, .98) 42%);
  border-top: 1px solid rgba(255, 255, 255, .06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 30;
}
.tabbar a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding-top: 3px;
  transition: transform .16s ease;
}
.tabbar a:active { transform: scale(.92); }
.tb-ico { position: relative; width: 22px; height: 22px; display: block; }
.tb-ico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tb-ico .on { display: none; }
.tabbar a.on .tb-ico .off { display: none; }
.tabbar a.on .tb-ico .on { display: block; }
.tabbar em { font-size: 9.5px; color: #7b8593; letter-spacing: .2px; }
.tabbar a.on em { color: #fff; font-weight: 700; }
.tabbar a.on .tb-ico { filter: drop-shadow(0 2px 8px rgba(255, 190, 90, .35)); }

/* =========================================================
   浮层 / 抽屉
   ========================================================= */
/* ---- 表单 ---- */
.form { margin-top: 18px; }
.field {
  display: block;
  margin-bottom: 12px;
  padding: 10px 14px 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color .2s ease, background .2s ease;
}
.field:focus-within { border-color: rgba(255, 178, 90, .45); background: rgba(255, 178, 90, .06); }
.field > span {
  display: block;
  font-size: 10px; letter-spacing: .6px; color: var(--txt-3);
  margin-bottom: 4px;
}
.field > span em { margin-left: 5px; color: #5c6673; font-size: 9.5px; }
.field input {
  width: 100%;
  background: none; border: 0; outline: none;
  color: var(--txt);
  font-size: 15px; font-weight: 600; letter-spacing: .4px;
}
.field input::placeholder { color: #47505c; font-weight: 400; font-size: 13px; }
.link-btn {
  display: block; width: 100%;
  margin-top: 14px;
  font-size: 12px; color: var(--amber);
  text-align: center;
}
.agree { margin-top: 16px; text-align: center; font-size: 9.5px; color: #4a535f; }

/* ---- 分段 tabs ---- */
.tabs {
  margin: 14px 0 6px;
  display: flex; gap: 4px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .06);
}
.tabs button {
  flex: 1;
  height: 30px;
  border-radius: 9px;
  font-size: 11.5px; color: #8d97a3;
  transition: background .2s ease, color .2s ease;
}
.tabs button.on {
  background: rgba(255, 255, 255, .12);
  color: #fff; font-weight: 700;
}

/* ---- 订单列表 ---- */
.order-list { margin-top: 8px; }
.o-card {
  padding: 13px 14px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
}
.o-card-top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; color: var(--txt-3);
}
.o-status { font-size: 11px; font-weight: 700; color: var(--amber); }
.o-status.s3 { color: var(--green); }
.o-status.s0 { color: #ff8a8a; }
.o-card-body { margin-top: 10px; display: flex; gap: 10px; align-items: center; }
.o-thumb {
  width: 54px; height: 54px; border-radius: 10px;
  background: #fff; overflow: hidden; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.o-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.o-info { flex: 1; min-width: 0; }
.o-info h4 {
  font-size: 12px; font-weight: 500; line-height: 1.4;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.o-info p { margin-top: 5px; font-size: 10px; color: var(--txt-3); }
.o-card-foot {
  margin-top: 11px; padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  display: flex; align-items: center; justify-content: space-between;
}
.o-amount { font-size: 13.5px; font-weight: 800; color: #ff9a4d; }
.o-amount i { font-size: 10px; font-weight: 600; }
.btn-o {
  height: 28px; padding: 0 14px;
  border-radius: 9px;
  font-size: 11px; font-weight: 700;
  color: #2a1503;
  background: linear-gradient(135deg, #b6ef7c 0%, #8ce05a 46%, #62d94e 100%);
}
.empty-state {
  padding: 42px 0 30px;
  text-align: center;
}
.empty-state img { width: 88px; height: 88px; margin: 0 auto 12px; object-fit: contain; opacity: .5; }
.empty-state p { font-size: 11.5px; color: var(--txt-3); }

/* ---- 流水 ---- */
.tx-list { margin-top: 8px; }
.tx {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.tx:last-child { border-bottom: 0; }
.tx-dot {
  width: 32px; height: 32px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  flex: 0 0 auto;
}
.tx-dot.in { background: rgba(87, 224, 138, .12); color: var(--green); }
.tx-dot.out { background: rgba(255, 120, 100, .12); color: #ff8a72; }
.tx-mid { flex: 1; min-width: 0; }
.tx-mid h4 { font-size: 12.5px; font-weight: 500; }
.tx-mid p { margin-top: 4px; font-size: 10px; color: var(--txt-3); }
.tx-val { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tx-val.in { color: var(--green); }
.tx-val.out { color: #ff8a72; }

/* ---- 邀请 ---- */
.invite-card {
  margin-top: 16px;
  padding: 20px 18px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(150deg, rgba(255, 178, 70, .14), rgba(255, 110, 60, .06));
  border: 1px solid rgba(255, 180, 90, .22);
}
.invite-lb { font-size: 10.5px; color: var(--txt-3); letter-spacing: 1px; }
.invite-card strong {
  display: block;
  margin: 8px 0 14px;
  font-size: 30px; font-weight: 800; letter-spacing: 6px;
  color: #ffd08a;
  font-variant-numeric: tabular-nums;
}
.invite-stats {
  margin-top: 14px;
  display: flex;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  padding: 14px 0;
}
.invite-stats div { flex: 1; text-align: center; }
.invite-stats b { display: block; font-size: 19px; font-weight: 800; }
.invite-stats span { display: block; margin-top: 4px; font-size: 10px; color: var(--txt-3); }
.invite-list { margin-top: 10px; }
.invite-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  font-size: 12px;
}
.invite-row span { color: var(--txt-3); font-size: 10px; }

/* ---- 文字面板 ---- */
.text-body { padding: 14px 0 6px; font-size: 12.5px; line-height: 1.85; color: var(--txt-2); }
.text-body b { color: #fff; }
.text-body .kv {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  font-size: 12px;
}
.text-body .kv span { color: var(--txt-3); }

/* ---- Toast ---- */
.toast {
  position: absolute;
  left: 50%; bottom: calc(var(--nav-h) + 26px);
  transform: translate(-50%, 12px);
  max-width: 280px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 12px; font-weight: 500;
  color: #fff;
  background: rgba(28, 34, 42, .96);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 90;
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { color: #b8ffcd; border-color: rgba(87, 224, 138, .3); }
.toast.err { color: #ffc0b8; border-color: rgba(255, 110, 90, .3); }

/* ---- 加载骨架 ---- */
.skeleton { position: relative; overflow: hidden; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ---- 入场动画 ---- */
.page.on .scroll > * {
  animation: rise .34s cubic-bezier(.22, .9, .3, 1) both;
}
.page.on .scroll > *:nth-child(1) { animation-delay: .01s; }
.page.on .scroll > *:nth-child(2) { animation-delay: .04s; }
.page.on .scroll > *:nth-child(3) { animation-delay: .07s; }
.page.on .scroll > *:nth-child(4) { animation-delay: .1s; }
.page.on .scroll > *:nth-child(5) { animation-delay: .13s; }
.page.on .scroll > *:nth-child(6) { animation-delay: .16s; }
.page.on .scroll > *:nth-child(n+7) { animation-delay: .18s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .page.on .scroll > *, .notice-track { animation: none !important; }
}


/* =========================================================
   二级页面（订单 / 钱包 / 邀请）
   ========================================================= */
.page.sub {
  z-index: 25;
  background: var(--bg);
  animation: subin .26s cubic-bezier(.22, .9, .3, 1) both;
}
@keyframes subin {
  from { opacity: .4; transform: translateX(22px); }
  to { opacity: 1; transform: none; }
}

.subbar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 56px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  background: rgba(13, 16, 21, .92);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 2;
}
.subbar .back {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #dfe4e9;
  background: rgba(255, 255, 255, .07);
  transition: background .16s ease, transform .16s ease;
}
.subbar .back:active { background: rgba(255, 255, 255, .16); transform: scale(.92); }
.subbar .back svg { width: 19px; height: 19px; }
.subbar-txt { flex: 1; min-width: 0; }
.subbar-txt h1 { font-size: 16px; font-weight: 800; letter-spacing: .3px; }
.subbar-txt p { margin-top: 2px; font-size: 10.5px; color: var(--txt-3); }

.sub-body {
  position: absolute; left: 0; right: 0; top: 56px; bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  scrollbar-width: none;
}
.sub-body::-webkit-scrollbar { display: none; }

/* 底部导航在二级页隐藏 */
#tabbar.hide { display: none; }

/* 钱包页顶部金额 */
.balance-hero {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 16px 20px;
  margin-bottom: 14px;
  border-radius: 18px;
  background:
    radial-gradient(70% 90% at 82% 0%, rgba(255, 172, 60, .18) 0%, rgba(11, 14, 18, 0) 70%),
    linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 190, 110, .18);
  box-shadow: inset 0 1px 0 rgba(255, 210, 150, .12);
}
.bh-lb { font-size: 11px; color: var(--txt-3); letter-spacing: .4px; }
.bh-num {
  font-size: 32px; font-weight: 800; letter-spacing: -.6px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 35%, #ffd79a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bh-tip { font-size: 10.5px; color: var(--txt-3); }


/* =========================================================
   整页：登录/注册、信息页
   ========================================================= */
.page.sub.auth-page, .page.sub.info-page { z-index: 60; }

.auth-body { padding-top: 22px; }

.auth-hero {
  display: flex; align-items: center; gap: 13px;
  padding: 4px 2px 22px;
}
.auth-logo {
  width: 54px; height: 54px; border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.auth-hero-txt h2 {
  font-size: 19px; font-weight: 800; letter-spacing: .6px;
}
.auth-hero-txt p {
  margin-top: 4px; font-size: 10.5px; letter-spacing: 1.4px; color: var(--txt-3);
}

/* 信息页正文 */
.info-page .text-body { padding: 4px 2px 20px; }

/* 设置页内的退出按钮 */
.btn-logout-inline {
  display: block;
  width: 100%;
  margin-top: 26px;
  height: 44px;
  border-radius: 14px;
  font-size: 13px; font-weight: 600;
  color: #ff8f8f;
  background: rgba(255, 90, 90, .08);
  border: 1px solid rgba(255, 90, 90, .2);
  transition: transform .16s ease, background .16s ease;
}
.btn-logout-inline:active {
  transform: scale(.985);
  background: rgba(255, 90, 90, .18);
}

/* 等级中心：进度条 */
.lv-bar {
  position: relative;
  height: 6px;
  margin: 18px 0 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.lv-bar i {
  display: block; height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #57e08a, #7cd267);
  box-shadow: 0 0 12px rgba(87, 224, 138, .45);
  transition: width .5s cubic-bezier(.22,.9,.3,1);
}
.lv-tip {
  font-size: 11px; line-height: 1.8; color: var(--txt-3);
}

/* =========================================================
   设置页（分组列表）
   ========================================================= */
.subbar.center { justify-content: center; position: relative; }
.subbar.center .back { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }
.subbar.center .subbar-txt {
  text-align: center;
  flex: 1;
  padding: 0 52px;   /* 避开左侧返回键，保证真正居中 */
  min-width: 0;
}
.subbar.center .subbar-txt h1 { font-size: 16.5px; }
.subbar.center .subbar-txt p {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.settings-page .sub-body { padding-top: 16px; }

.set-card {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 14px;
}

.set-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 0 15px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  transition: background .16s ease;
}
.set-row:last-child { border-bottom: 0; }
.set-row:not(.static):active { background: rgba(255, 255, 255, .07); }
.set-row.static { cursor: default; }

.set-lb {
  flex: 1;
  font-size: 14.5px; font-weight: 600;
  color: #f0f3f6;
  letter-spacing: .2px;
}
.set-val {
  font-size: 13px;
  color: #8b939d;
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.set-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(235, 197, 126, .55);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 10px rgba(236, 180, 86, .18);
}
.set-row[data-set="avatar"]:active .set-avatar { filter: brightness(1.12); }
.chev {
  width: 15px; height: 15px;
  flex: 0 0 auto;
  color: #636c78;
}

/* 退出登录（绿色，参照原生 App） */
.btn-logout-big {
  display: block;
  width: 100%;
  margin-top: 18px;
  height: 50px;
  border-radius: 14px;
  font-size: 15px; font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(135deg, #a5ef73 0%, #57d84f 100%);
  box-shadow: 0 10px 24px rgba(87, 216, 79, .28), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .16s ease, filter .16s ease;
}
.btn-logout-big:active { transform: scale(.98); filter: brightness(1.06); }

/* 注销警示 */
.danger-box {
  padding: 18px;
  border-radius: 16px;
  margin-bottom: 16px;
  background: rgba(255, 90, 90, .07);
  border: 1px solid rgba(255, 90, 90, .22);
}
.danger-box h3 {
  font-size: 14px; font-weight: 700; color: #ff9b9b;
  margin-bottom: 10px;
}
.danger-box ul { padding-left: 18px; }
.danger-box li {
  font-size: 12px; line-height: 2; color: #b7bfc8;
  list-style: disc;
}

.btn-danger-big {
  display: block;
  width: 100%;
  margin-top: 6px;
  height: 48px;
  border-radius: 14px;
  font-size: 14.5px; font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #ff6b6b, #e03131);
  box-shadow: 0 10px 24px rgba(224, 49, 49, .28);
  transition: transform .16s ease, filter .16s ease, opacity .16s ease;
}
.btn-danger-big:active { transform: scale(.98); filter: brightness(1.05); }
.btn-danger-big[disabled] {
  opacity: .35;
  box-shadow: none;
  cursor: not-allowed;
}

/* =========================================================
   我的团队
   ========================================================= */
.subbar-right {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  height: 30px; padding: 0 8px;
  font-size: 12.5px; color: #9aa3ad;
  border-radius: 8px;
  transition: color .16s ease, background .16s ease;
}
.subbar-right:active { color: #fff; background: rgba(255, 255, 255, .09); }
.team-page .subbar.center .subbar-txt { padding: 0 76px; }

.team-card {
  border-radius: 18px;
  padding: 18px 16px 0;
  background: linear-gradient(165deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .085);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.team-top {
  display: flex; align-items: center; gap: 6px;
}
.lv-box {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  display: flex; flex-direction: column; align-items: center;
}
.lv-box .lv-txt { top: 0; }
.lv-hex { width: 58px; height: 58px; }
.lv-txt {
  position: absolute; top: 0; left: 0; right: 0;
  height: 58px; display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; letter-spacing: .5px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.lv-cap {
  margin-top: 6px;
  font-size: 12px; color: #cfd5dc; font-weight: 600;
}

.perf-cols {
  flex: 1;
  display: flex; align-items: center;
}
.perf-col {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.perf-col span { font-size: 12px; color: #b3bac2; }
.perf-col b {
  font-size: 21px; font-weight: 800;
  color: #a8e063;
  font-variant-numeric: tabular-nums;
}
.perf-sep {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .14), transparent);
}

.team-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  overflow: hidden;
}
.tg-cell {
  padding: 16px 0 14px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.tg-cell:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .07); }
.tg-cell:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.tg-cell b {
  font-size: 21px; font-weight: 800;
  color: #a8e063;
  font-variant-numeric: tabular-nums;
}
.tg-cell span { font-size: 11.5px; color: #a6aeb8; }

.team-foot {
  margin: 0 -16px;
  padding: 15px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 13.5px; font-weight: 600; color: #d8dee5;
}
.team-foot b {
  color: #a8e063; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* 直推好友 */
.team-sec-head { margin: 22px 2px 10px; }
.team-sec-head h3 {
  font-size: 16px; font-weight: 800; letter-spacing: .3px;
  display: inline-block;
  position: relative;
  padding-bottom: 8px;
}
.team-sec-head h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 26px; height: 3px; border-radius: 2px;
  background: #8fd05a;
}

.team-search {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .075);
  margin-bottom: 12px;
}
.team-search:focus-within { border-color: rgba(143, 208, 90, .45); }
.team-search input {
  flex: 1; background: none; border: 0; outline: none;
  font-size: 13px; color: #eef2f6;
}
.team-search input::placeholder { color: #59626e; }
.team-search svg { width: 17px; height: 17px; color: #7a838f; flex: 0 0 auto; }

.team-list { display: flex; flex-direction: column; gap: 12px; }

.member {
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .07);
}
.member-top { display: flex; align-items: center; gap: 11px; }
.member-av {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .16);
  background: #2a3038;
}
.member-mid { flex: 1; min-width: 0; }
.member-mid h4 {
  font-size: 14.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.member-id {
  margin-top: 5px;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #98a1ac;
  font-variant-numeric: tabular-nums;
}
.copy-btn {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px;
  color: #7d8792;
  transition: color .16s, background .16s;
}
.copy-btn:active { color: #fff; background: rgba(255, 255, 255, .1); }
.copy-btn svg { width: 13px; height: 13px; }

.member-lv { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.member-lv { position: relative; }
.member-lv .lv-hex { width: 38px; height: 38px; }
.member-lv .lv-txt { height: 38px; font-size: 12.5px; }
.member-lv span {
  font-size: 10px; color: #98a1ac;
}

.member-stats {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  display: flex;
}
.member-stats div {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.member-stats div + div { border-left: 1px solid rgba(255, 255, 255, .06); }
.member-stats span { font-size: 11px; color: #a6aeb8; }
.member-stats b {
  font-size: 17px; font-weight: 800; color: #a8e063;
  font-variant-numeric: tabular-nums;
}

.team-empty {
  padding: 40px 0 26px;
  text-align: center;
}
.team-empty img { width: 84px; height: 84px; margin: 0 auto 12px; opacity: .42; }
.team-empty p { font-size: 12px; color: #7d8792; }

/* =========================================================
   会员等级
   ========================================================= */
.level-page .sub-body { padding-top: 16px; }

.lv-hero {
  position: relative;
  height: 148px;
  border-radius: 18px;
  overflow: hidden;
  padding: 0 20px;
  display: flex; align-items: center;
  background:
    radial-gradient(120% 130% at 88% 0%, rgba(150, 165, 185, .26) 0%, rgba(30, 34, 40, 0) 62%),
    linear-gradient(150deg, #3a4250 0%, #232830 46%, #1a1f26 100%);
  border: 1px solid rgba(180, 195, 215, .16);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.lv-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}
.lv-hero-txt { position: relative; z-index: 2; }
.lv-hero-txt h2 {
  font-size: 25px; font-weight: 800; letter-spacing: .5px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.lv-hero-txt p {
  margin-top: 16px;
  font-size: 15px; font-weight: 600;
  color: #e4e9ef;
}
.lv-hero-txt p b {
  font-size: 22px; font-weight: 800; color: #ffa53d;
  font-variant-numeric: tabular-nums;
  margin: 0 2px;
}
.lv-hero-txt p i { font-style: normal; font-size: 15px; font-weight: 700; color: #ffa53d; }

.lv-hero-badge {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 132px; height: 132px;
  z-index: 1;
}
.lv-hex-big { width: 100%; height: 100%; }
.lv-hero-txt-badge {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 800; letter-spacing: 1px;
  color: #f2f5f9;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .65), 0 0 22px rgba(255, 255, 255, .18);
  pointer-events: none;
}

.cond-head { margin: 24px 2px 12px; }
.cond-head h3 { font-size: 18px; font-weight: 800; letter-spacing: .3px; }
.cond-head p { margin-top: 8px; font-size: 12.5px; color: #8a929c; }

.cond-list { display: flex; flex-direction: column; gap: 12px; }

.cond-item {
  padding: 16px 15px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .07);
}
.cond-top { display: flex; align-items: center; gap: 12px; }
.cond-ic {
  width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .08);
  color: #c6ced8;
}
.cond-ic svg { width: 23px; height: 23px; }
.cond-mid { flex: 1; min-width: 0; }
.cond-mid h4 { font-size: 14.5px; font-weight: 700; }
.cond-mid .cond-num {
  margin-top: 8px;
  font-size: 15px; font-weight: 800;
  color: #8fd05a;
  font-variant-numeric: tabular-nums;
}
.cond-mid .cond-num span { color: #6c7580; font-weight: 600; }
.cond-state {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: #8a929c;
}
.cond-state svg { width: 15px; height: 15px; }
.cond-state.ok { color: #8fd05a; }
.cond-state.ok svg { color: #8fd05a; }

.cond-bar {
  margin-top: 13px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.cond-bar i {
  display: block; height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #8fd05a, #b6e87a);
  transition: width .5s cubic-bezier(.22, .9, .3, 1);
}

.lv-foot-note {
  margin-top: 22px;
  text-align: center;
  font-size: 11.5px;
  color: #6a7280;
  line-height: 1.8;
}

/* =========================================================
   邀请好友 · 海报分享
   ========================================================= */
.invite-page .sub-body { padding: 14px 16px 28px; }

.poster {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  background: #1a1410;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
.poster-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.poster-brand {
  position: absolute; left: 0; right: 0; top: 3.2%;
  text-align: center;
  z-index: 2;
  line-height: 1.15;
  display: flex; flex-direction: column; gap: 2px;
}
.poster-brand h2 {
  font-size: 30px; font-weight: 900; letter-spacing: 3px;
  color: #fff8ea;
  text-shadow:
    0 0 18px rgba(255, 176, 60, .85),
    0 3px 0 rgba(120, 52, 0, .9),
    0 5px 14px rgba(0, 0, 0, .6);
}
.poster-brand h3 {
  margin-top: 0;
  font-size: 24px; font-weight: 900; letter-spacing: 3px;
  color: #ffe9a8;
  text-shadow:
    0 0 16px rgba(255, 150, 30, .9),
    0 3px 0 rgba(120, 52, 0, .9),
    0 5px 14px rgba(0, 0, 0, .6);
}

.poster-card {
  position: absolute;
  left: 4.4%; right: 4.4%; bottom: 4.2%;
  background: #fff;
  border-radius: 12px;
  padding: 12px 13px;
  display: flex; align-items: center; gap: 10px;
  z-index: 3;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.pc-left { flex: 1; min-width: 0; }
.pc-logo {
  float: left;
  width: 34px; height: 34px;
  border-radius: 9px;
  object-fit: contain;
  margin-right: 9px;
}
.pc-brand { overflow: hidden; }
.pc-brand b {
  display: block;
  font-size: 14px; font-weight: 800; color: #1b1f24;
  letter-spacing: .3px;
}
.pc-brand span {
  display: block;
  margin-top: 2px;
  font-size: 9px; color: #9aa2ab;
  letter-spacing: .5px;
}
.pc-code-row {
  clear: both;
  margin-top: 9px;
  padding: 7px 9px;
  border-radius: 8px;
  background: linear-gradient(90deg, #fff3cc, #ffe79a);
  display: flex; align-items: center; gap: 8px;
  overflow: hidden;
}
.pc-code {
  font-size: 11px; color: #8a6a1e; font-weight: 700;
  white-space: nowrap;
}
.pc-code b {
  font-size: 13px; font-weight: 900; color: #b8860b;
  letter-spacing: .6px;
}
.pc-slogan {
  font-size: 9.5px; color: #a08334;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-qr {
  flex: 0 0 auto;
  width: 62px; height: 62px;
  border-radius: 4px;
  image-rendering: pixelated;
  background: #fff;
}

/* 统计 */
.invite-page .invite-stats {
  margin-top: 14px;
  padding: 15px 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .07);
}
.invite-page .invite-stats b {
  display: block;
  font-size: 22px; font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.invite-page .invite-stats span {
  display: block; margin-top: 5px;
  font-size: 11px; color: #8f98a3;
}

/* 按钮 */
.invite-actions {
  margin-top: 14px;
  display: flex; gap: 10px;
}
.btn-save, .btn-share {
  flex: 1;
  height: 50px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 700; letter-spacing: .5px;
  color: #1d2b12;
  background: linear-gradient(135deg, #b6ef7c 0%, #62d94e 100%);
  box-shadow: 0 10px 24px rgba(98, 217, 78, .26), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .16s ease, filter .16s ease;
}
.btn-save svg, .btn-share svg { width: 18px; height: 18px; }
.btn-save:active, .btn-share:active { transform: scale(.98); filter: brightness(1.06); }
.btn-say { }

/* =========================================================
   社交信息
   ========================================================= */
.social-head { margin: 6px 2px 18px; }
.social-head h2 {
  font-size: 20px; font-weight: 800; letter-spacing: .3px;
}
.social-head p { margin-top: 8px; font-size: 12px; color: #8a929c; }

.social-field {
  display: flex; align-items: center; gap: 12px;
  height: 70px;
  padding: 0 18px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .075);
  transition: border-color .18s ease, background .18s ease;
}
.social-field:focus-within {
  border-color: rgba(143, 208, 90, .45);
  background: rgba(143, 208, 90, .04);
}
.sf-icon {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 7px;
}
.social-field input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  font-size: 15px; color: #eef2f6;
}
.social-field input::placeholder { color: #59626e; font-size: 14.5px; }

.btn-save-social {
  display: block;
  width: 100%;
  margin-top: 22px;
  height: 50px;
  border-radius: 14px;
  font-size: 15px; font-weight: 700;
  letter-spacing: 1px;
  color: #1d2b12;
  background: linear-gradient(135deg, #b6ef7c 0%, #62d94e 100%);
  box-shadow: 0 10px 24px rgba(98, 217, 78, .26), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .16s ease, filter .16s ease;
}
.btn-save-social:active { transform: scale(.98); filter: brightness(1.06); }

/* =========================================================
   联系客服
   ========================================================= */
.sv-card {
  border-radius: 16px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .07);
  overflow: hidden;
}
.sv-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  font-size: 14px;
}
.sv-row:last-child { border-bottom: 0; }
.sv-lb { color: #a6aeb8; flex: 0 0 auto; }
.sv-val {
  color: #fff; font-weight: 700;
  display: flex; align-items: center; gap: 7px;
  font-size: 14px;
  text-align: right;
}
.sv-val.copyable {
  padding: 6px 8px; margin-right: -8px;
  border-radius: 8px;
  transition: background .16s ease;
}
.sv-val.copyable:active { background: rgba(255, 255, 255, .1); }
.sv-val svg { width: 13px; height: 13px; color: #7d8792; flex: 0 0 auto; }

.btn-online {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  margin-top: 20px;
  height: 50px;
  border-radius: 14px;
  font-size: 15px; font-weight: 700; letter-spacing: .5px;
  color: #1d2b12;
  background: linear-gradient(135deg, #b6ef7c 0%, #62d94e 100%);
  box-shadow: 0 10px 24px rgba(98, 217, 78, .26), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .16s ease, filter .16s ease;
}
.btn-online:active { transform: scale(.985); filter: brightness(1.06); }
.btn-online svg { width: 19px; height: 19px; }

/* =========================================================
   专属客服（聊天）
   ========================================================= */
#page-chat.chat-page { background: #f4f5f7; }
#page-chat .chat-body { background: #f4f5f7; }
#page-chat .subbar {
  background: #fff;
  border-bottom: 1px solid #e8eaed;
}
#page-chat .subbar .back {
  background: #f1f2f4;
  color: #2b3038;
}
#page-chat .subbar .back:active { background: #e4e6e9; }
#page-chat .subbar-txt h1 { color: #1d2128; }
#page-chat .subbar { box-shadow: none; }

.chat-body {
  position: absolute;
  left: 0; right: 0; top: 56px; bottom: 74px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px 12px;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-body::-webkit-scrollbar { display: none; }

.chat-time {
  text-align: center;
  font-size: 12px;
  color: #9aa1aa;
  margin: 2px 0 6px;
}

.msg { display: flex; align-items: flex-start; gap: 9px; }
.msg.me { flex-direction: row-reverse; }

.msg-av {
  width: 34px; height: 34px;
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: cover;
  background: #e7e9ec;
}
.msg-av.agent {
  display: flex; align-items: center; justify-content: center;
  background: #dfe2e6;
  color: #7c848e;
}
.msg-av.agent svg { width: 19px; height: 19px; }

.msg-bubble {
  max-width: 76%;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.62;
  word-break: break-word;
  white-space: pre-wrap;
}
.msg.agent .msg-bubble {
  background: #fff;
  color: #1d2128;
  border-top-left-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.msg.me .msg-bubble {
  background: linear-gradient(135deg, #a8e86a 0%, #6fd94f 100%);
  color: #16300a;
  border-top-right-radius: 5px;
  box-shadow: 0 2px 8px rgba(111, 217, 79, .28);
}

.chat-inputbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 74px;
  padding: 10px 12px 14px;
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border-top: 1px solid #e8eaed;
}
.chat-input {
  flex: 1;
  height: 44px;
  display: flex; align-items: center;
  padding: 0 14px;
  border-radius: 22px;
  background: #f2f3f5;
  border: 1px solid #e8eaed;
}
.chat-input:focus-within { border-color: #b9dd9a; background: #f7f9f4; }
.chat-input input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  font-size: 14.5px; color: #1d2128;
}
.chat-input input::placeholder { color: #a3aab3; font-size: 14px; }

.chat-send {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #b6ef7c 0%, #62d94e 100%);
  box-shadow: 0 6px 16px rgba(98, 217, 78, .3);
  transition: transform .16s ease, opacity .16s ease;
}
.chat-send:active { transform: scale(.94); }
.chat-send svg { width: 20px; height: 20px; }
.chat-send[disabled] { opacity: .45; }

/* =========================================================
   登录页（参考图版式）
   ========================================================= */
#page-auth { background: #0a0c0f; }
#page-auth .sub-body.no-topbar {
  top: 0;
  padding: 56px 22px 30px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 品牌 */
.auth-brand {
  display: flex; align-items: center; gap: 13px;
  padding: 0 0 92px;
}
.auth-brand-logo {
  width: 56px; height: 56px;
  border-radius: 15px;
  flex: 0 0 auto;
  object-fit: contain;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
}
.auth-brand-txt h2 {
  font-size: 25px; font-weight: 900; letter-spacing: 2px;
  color: #fff;
  line-height: 1.1;
}
.auth-brand-txt p {
  margin-top: 7px;
  font-size: 11.5px; letter-spacing: 2.4px;
  color: #7f8792;
}

/* 当前登录方式大标题 */
.auth-tabs {
  display: block;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  margin-bottom: 26px;
}
.auth-tabs .at {
  position: relative;
  display: none;
  align-items: center; gap: 9px;
  padding: 0 0 18px;
  font-size: 26px; font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}
.auth-tabs .at svg { width: 25px; height: 25px; }
.auth-tabs .at.on { display: flex; }
.auth-tabs .at.on::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 128px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #a8e063, #6fdc5a);
}

/* 输入框 */
.auth-form { display: flex; flex-direction: column; gap: 14px; }

.auth-input {
  display: flex; align-items: center; gap: 14px;
  height: 60px;
  padding: 0 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .085);
  transition: border-color .18s ease, background .18s ease;
}
.auth-input:focus-within {
  border-color: rgba(143, 208, 90, .5);
  background: rgba(143, 208, 90, .045);
}
.ai-lb {
  flex: 0 0 auto;
  font-size: 16px; font-weight: 700;
  color: #fff;
  letter-spacing: .3px;
}
.auth-input input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  font-size: 15.5px; color: #eef2f6;
}
.auth-input input::placeholder { color: #545d68; font-size: 14.5px; }

.sms-wrap { padding-right: 8px; }
.btn-sms {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  color: #a8e063;
  background: rgba(143, 208, 90, .1);
  border: 1px solid rgba(143, 208, 90, .28);
  transition: opacity .16s ease;
}
.btn-sms[disabled] { opacity: .45; }

.invite-field { margin-top: 2px; }

.sms-hint {
  margin-top: -4px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 12px; line-height: 1.6;
  color: #cfd6a0;
  background: rgba(200, 220, 110, .07);
  border: 1px dashed rgba(200, 220, 110, .26);
}
.sms-hint b { color: #d9f08a; font-size: 14px; letter-spacing: 2px; }

/* 登录按钮 */
.btn-auth-submit {
  margin-top: 12px;
  height: 56px;
  border-radius: 14px;
  font-size: 17px; font-weight: 700;
  letter-spacing: 4px;
  color: #16300a;
  background: linear-gradient(120deg, #b6ef7c 0%, #8ce05a 46%, #62d94e 100%);
  box-shadow: 0 6px 16px rgba(98, 217, 78, .20), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .16s ease, filter .16s ease, opacity .16s ease;
}
.btn-auth-submit:active { transform: scale(.985); filter: brightness(1.05); }
.btn-auth-submit[disabled] {
  color: #6f7680;
  background: rgba(255, 255, 255, .075);
  box-shadow: none;
  cursor: not-allowed;
}

/* 忘记密码 / 立即注册 */
.auth-actions {
  margin-top: 22px;
  display: flex; align-items: center; justify-content: space-between;
}
.link-forgot {
  font-size: 13.5px;
  color: #8b939d;
  letter-spacing: .3px;
}
.link-forgot:active { color: #c9d1da; }
.btn-register {
  height: 42px;
  padding: 0 26px;
  border-radius: 8px;
  font-size: 14.5px; font-weight: 700;
  letter-spacing: 1px;
  color: #a8e063;
  background: transparent;
  border: 1px solid rgba(143, 208, 90, .42);
  transition: background .16s ease, transform .16s ease;
}
.btn-register:active { background: rgba(143, 208, 90, .1); transform: scale(.97); }

/* 切换登录方式 */
.link-switch-mode {
  display: block;
  width: 100%;
  margin-top: 34px;
  font-size: 15px; font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  text-align: center;
}

/* 协议 */
.auth-agree {
  display: flex; align-items: center; gap: 10px;
  margin-top: 30px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 12px;
  color: #6f7883;
  line-height: 1.5;
}
.auth-agree input { position: absolute; opacity: 0; pointer-events: none; }
.auth-agree .dot {
  flex: 0 0 auto;
  width: 21px; height: 21px;
  border-radius: 50%;
  border: 1.8px solid #6b7480;
  position: relative;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.auth-agree:active .dot { transform: scale(.92); }
.auth-agree input:checked + .dot {
  border-color: #57c93f;
  background: linear-gradient(145deg, #6ddc52 0%, #4cc23a 100%);
  box-shadow: 0 0 0 3px rgba(87, 201, 63, .16);
}
.auth-agree input:checked + .dot::after {
  content: "";
  position: absolute; left: 6px; top: 3px;
  width: 5px; height: 9px;
  border: solid #ffffff;
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg);
}
.auth-agree span em {
  font-style: normal;
  color: #9ee26a;
}

/* 邀请码必填标记 */
.must-tag {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 13px; font-weight: 700;
  color: #a8e063;
  letter-spacing: .5px;
}

/* 注册模式下的输入框紧凑一些 */
#page-auth .auth-input { height: 58px; }

/* =========================================================
   忘记密码
   ========================================================= */
.reset-page .sub-body { padding: 0 22px 26px; }

.reset-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 16px 0 13px;
  margin-bottom: 24px;
  font-size: 17px; font-weight: 800;
  color: #fff;
  letter-spacing: .4px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.reset-tab svg { width: 19px; height: 19px; }
.reset-tab::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 96px; height: 2.5px; border-radius: 2px;
  background: linear-gradient(90deg, #a8e063, #6fdc5a);
}

.reset-form { display: flex; flex-direction: column; gap: 14px; }

.btn-reset-submit {
  display: block;
  width: 100%;
  margin-top: 26px;
  height: 54px;
  border-radius: 12px;
  font-size: 17px; font-weight: 700;
  letter-spacing: 4px;
  color: #1d2b12;
  background: linear-gradient(135deg, #b6ef7c 0%, #62d94e 100%);
  box-shadow: 0 12px 28px rgba(98, 217, 78, .28), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .16s ease, filter .16s ease, opacity .16s ease;
}
.btn-reset-submit:active { transform: scale(.985); filter: brightness(1.06); }
.btn-reset-submit[disabled] { opacity: .45; }

/* 注册模式标题 */
.auth-reg-head { padding-bottom: 22px; }
.auth-reg-head h2 {
  font-size: 26px; font-weight: 800; letter-spacing: 1px; color: #fff;
}
.auth-reg-head p {
  margin-top: 9px;
  font-size: 12px; color: #7f8792; letter-spacing: .4px;
}

/* 仅无障碍/测试可见的标题节点 */
#page-auth > #authTitle,
#page-auth > #authSub,
#page-auth #authTitle,
#page-auth #authSub {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* =========================================================
   积分交易大厅（原松鼠乐园 tab）
   ========================================================= */
.tx-page .scroll { padding-bottom: 96px; }

/* 积分交易大厅 · 标题栏（与首页/对战/抢购/我的 同一规格，无插画） */
.tx-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  height: 78px;
  padding: 9px 16px 0;
}
.tx-head-txt { padding-top: 6px; min-width: 0; }
.tx-head-txt h1 {
  font-size: 25px; font-weight: 900; letter-spacing: .5px;
  background: linear-gradient(180deg, #FDF4E3 22%, #E0C9A2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.tx-head-txt p {
  margin-top: 9px;
  font-size: 11.5px; letter-spacing: 1.2px; color: #C0AE93;
}
.tx-head-av {
  width: 41px; height: 41px;
  border-radius: 50%;
  margin-top: 1px;
  flex: 0 0 auto;
}
.tx-head-av img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.tx-head-av img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* 市场概览 */
.tx-mkt {
  margin: 0 16px;
  padding: 13px 15px 0;
  border-radius: 19px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(52,46,40,.94) 0%, rgba(30,28,28,.96) 60%, rgba(22,22,24,.98) 100%);
  border: 1px solid rgba(255,200,120,.16);
  box-shadow: 0 12px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,220,160,.12);
}
.tx-mkt-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.tx-mkt-head h3 { font-size: 16px; font-weight: 800; letter-spacing: .3px; }
.tx-mkt-head span { font-size: 15px; color: #6f7783; }

.tx-mkt-nums { display: flex; padding: 11px 0 4px; }
.tx-mkt-cell { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.tx-mkt-cell span { font-size: 10.5px; color: #8d939d; }
.tx-mkt-cell b {
  font-size: 19px; font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.tx-mkt-cell b.up { color: #4ADE80; }

.tx-chart { margin: 0 -15px; height: 58px; }
.tx-chart svg { width: 100%; height: 100%; display: block; }

/* 盘口 */
.tx-ob {
  margin: 12px 16px 0;
  border-radius: 19px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
}
.tx-ob-tabs { padding: 4px; display: flex; }
.tx-ob-tab {
  flex: 1;
  height: 38px;
  border-radius: 15px;
  font-size: 15px; font-weight: 800;
  color: #7d848f;
  letter-spacing: .4px;
}
.tx-ob-tab.on {
  color: #3A2A10;
  background: linear-gradient(180deg, #FFE8B4 0%, #F5C871 100%);
  box-shadow: 0 4px 14px rgba(240,190,90,.28);
}

.tx-ob-cols {
  display: flex;
  padding: 7px 16px 4px 76px;
  font-size: 10px;
  color: #6b727d;
}
.tx-ob-cols span { flex: 1; }
.tx-ob-cols span:last-child { text-align: right; }

.tx-ob-row {
  position: relative;
  display: flex; align-items: center;
  height: 44px;
  margin: 5px 9px;
  padding: 0 11px;
  border-radius: 13px;
  background: rgba(255,255,255,.04);
}
.tx-ob-row.hot {
  background: linear-gradient(90deg, rgba(122,80,26,.62) 0%, rgba(74,52,26,.36) 52%, rgba(40,36,32,.2) 100%);
  border: 1px solid rgba(255,190,90,.24);
  box-shadow: inset 0 1px 0 rgba(255,210,140,.14);
}
.tx-ob-tag {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 25px;
  border-radius: 7px;
  font-size: 11px; font-weight: 700;
}
.tx-ob-tag.buy {
  color: #fff;
  background: linear-gradient(180deg, #4E9C6A 0%, #2F7A4C 100%);
}
.tx-ob-tag.sell { color: #e8ecf3; background: rgba(255,255,255,.12); }
.tx-ob-hand {
  margin-left: 10px;
  flex: 1;
  font-size: 15px; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums;
}
.tx-ob-price, .tx-ob-qty {
  font-size: 16px; font-weight: 700;
  color: #F5D9A8;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tx-ob-price { width: 70px; }
.tx-ob-qty { width: 56px; color: #E8E2D6; }

/* 买入/卖出 */
.tx-actions {
  margin: 12px 16px 0;
  padding: 11px;
  display: flex; gap: 11px;
  border-radius: 21px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
}
.tx-buy, .tx-sell {
  flex: 1;
  height: 54px;
  border-radius: 30px;
  font-size: 19px; font-weight: 800;
  letter-spacing: 3px;
  color: #fff;
  transition: transform .16s ease, filter .16s ease;
}
.tx-buy {
  background: linear-gradient(180deg, #3E8DF5 0%, #1E63D8 100%);
  box-shadow: 0 9px 22px rgba(46,120,230,.3), inset 0 1px 0 rgba(255,255,255,.3);
}
.tx-sell {
  background: linear-gradient(180deg, #FF9A3D 0%, #EC6A12 100%);
  box-shadow: 0 9px 22px rgba(236,106,18,.3), inset 0 1px 0 rgba(255,255,255,.3);
}
.tx-buy:active, .tx-sell:active { transform: scale(.975); filter: brightness(1.05); }

/* =========================================================
   悬浮胶囊导航（覆盖原 tabbar）
   ========================================================= */
.tabbar.pill-nav {
  left: 0; right: 0; bottom: 0;
  height: calc(68px + env(safe-area-inset-bottom, 0px));
  padding: 0 6px env(safe-area-inset-bottom, 0px);
  border-radius: 22px 22px 0 0;
  background: rgba(20, 19, 22, .98);
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .5);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  align-items: center;
  overflow: visible;
}
.tabbar.pill-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  height: 100%;
  color: #7C8189;
  position: relative;
}
.tabbar.pill-nav a svg {
  width: 22px; height: 22px;
  filter: none;
  flex: 0 0 auto;
}
.tabbar.pill-nav a em {
  font-size: 9.5px;
  letter-spacing: .3px;
  white-space: nowrap;
  color: inherit;
  font-weight: 400;
}
.tabbar.pill-nav a.on { color: #FFFFFF; }
.tabbar.pill-nav a.on em { font-weight: 700; }

.tabbar.pill-nav a.trade { flex: 0 0 72px; }
.tabbar.pill-nav .coin-btn {
  position: absolute;
  z-index: 1;
  left: 50%; top: -22px;
  transform: translateX(-50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 28%, #FFF0C2 0%, #E8B547 42%, #B4760E 100%);
  box-shadow:
    0 8px 22px rgba(214, 158, 45, .45),
    0 0 0 4px rgba(24, 22, 24, .96),
    0 0 0 5px rgba(255, 214, 130, .3),
    inset 0 2px 3px rgba(255, 255, 255, .5);
}
.tabbar.pill-nav .coin-btn svg { width: 54px; height: 54px; }
.tabbar.pill-nav a.trade em { margin-top: 25px; font-size: 9.5px; }
.tabbar.pill-nav a.trade.on .coin-btn {
  box-shadow:
    0 10px 26px rgba(214, 158, 45, .62),
    0 0 0 4px rgba(24, 22, 24, .96),
    0 0 0 5px rgba(255, 214, 130, .45),
    inset 0 2px 3px rgba(255, 255, 255, .5);
}


/* =========================================================
   对战中心（原商城 tab）
   ========================================================= */
.pk-page .scroll { padding-bottom: 96px; }

.pk-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 9px 16px 0;
  height: 78px;
}
.pk-head-txt { padding-top: 6px; }
.pk-head-txt h1 {
  font-size: 23px; font-weight: 900; letter-spacing: .5px;
  background: linear-gradient(180deg, #FDF4E3 22%, #E0C9A2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pk-head-txt p {
  margin-top: 9px;
  font-size: 11.5px; letter-spacing: 1.2px; color: #C0AE93;
}
.pk-head-av {
  width: 46px; height: 46px;
  border-radius: 50%;
  margin-top: 2px;
  flex: 0 0 auto;
}
.pk-head-av img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.pk-head-av img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* 主视觉 */
.pk-hero {
  margin: 0 -6px;
  padding: 0;
  position: relative;
}
.pk-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* 阵营标签 */








/* 数据条 */
.pk-room-card {
  position: relative;
  z-index: 2;
  margin: -58px 16px 0;
  border-radius: 20px;
  background: linear-gradient(170deg, rgba(44,40,35,.97) 0%, rgba(26,24,22,.99) 62%, rgba(22,21,20,1) 100%);
  border: 1px solid rgba(214, 184, 136, .22);
  box-shadow: 0 14px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(240,215,170,.09);
  overflow: hidden;
}
.pr-card-head {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 18px 8px;
  border-bottom: 1px solid rgba(255, 220, 170, .09);
  color: #F0E1C6;
}
.pr-card-head svg { width: 17px; height: 17px; }
.pr-card-head span { font-size: 14.5px; font-weight: 700; letter-spacing: .6px; }
.pr-card-head .pr-arrow {
  width: 17px; height: 17px;
  margin-left: auto;
  color: #8A8478;
}
.pk-stats {
  padding: 11px 8px 14px;
  display: flex; align-items: center;
}
.pk-stat {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.pk-stat span { font-size: 9.8px; color: #A79B8A; letter-spacing: .2px; line-height: 14px; }
.pk-stat b {
  font-size: 20px; font-weight: 700; line-height: 24px;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.pk-stats > i {
  width: 1px; height: 30px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.12), transparent);
}

/* 四宫格 */












/* =========================================================
   首页 · 熊宝集市
   ========================================================= */
#page-home .scroll { padding-bottom: 96px; }

.hm-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 4px 16px 0;
  height: 74px;
}
.hm-head-txt { padding-top: 5px; }
.hm-head-txt h1 {
  font-size: 27px; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(180deg, #FFFFFF 34%, #D5C9B8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hm-head-txt p {
  margin-top: 7px;
  font-size: 11.5px; letter-spacing: 1.7px; color: #8b9099;
}
.hm-head-av {
  width: 46px; height: 46px;
  border-radius: 50%;
  margin-top: 2px;
  flex: 0 0 auto;
}
.hm-head-av img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.hm-head-av img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* 主视觉：按原始比例铺满，无上下空档 */
.hm-hero {
  margin: 0 0 6px;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.hm-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* 资产条 */
.hm-assets {
  margin: 0 16px;
  padding: 16px 8px;
  display: flex; align-items: center;
  border-radius: 19px;
  background: linear-gradient(160deg, rgba(48,42,44,.96) 0%, rgba(28,26,30,.98) 100%);
  border: 1px solid rgba(255,210,150,.16);
  box-shadow: 0 12px 30px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,220,170,.1);
}
.hm-asset {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hm-asset b {
  font-size: 23px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
  letter-spacing: -.3px;
}
.hm-asset span { font-size: 11.5px; color: #9BA1AA; }
.hm-assets > i {
  width: 1px; height: 34px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.13), transparent);
}

/* 四宫格 */
.hm-grid {
  margin: 14px 16px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hm-card {
  position: relative;
  height: 118px;
  border-radius: 19px;
  overflow: hidden;
  display: flex; align-items: center;
  padding: 0 16px;
  text-align: left;
  transition: transform .16s ease, filter .16s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.16);
}
.hm-card:active { transform: scale(.975); filter: brightness(1.06); }
.hm-card-txt b {
  position: relative; z-index: 2;
  font-size: 19px; font-weight: 800; letter-spacing: .6px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.hm-card img {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 88px; height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.38));
}

.hm-card.c-blue {
  background: linear-gradient(150deg, #3D7DD1 0%, #2A5D9E 54%, #1E457A 100%);
  border: 1px solid rgba(160,200,255,.26);
}
.hm-card.c-orange {
  background: linear-gradient(150deg, #CC6B25 0%, #9E4E13 54%, #743609 100%);
  border: 1px solid rgba(255,180,120,.24);
}
.hm-card.c-purple {
  background: linear-gradient(150deg, #6B3FC0 0%, #4E2A92 54%, #371C68 100%);
  border: 1px solid rgba(190,160,255,.24);
}
.hm-card.c-green {
  background: linear-gradient(150deg, #23694A 0%, #174A31 54%, #0E3222 100%);
  border: 1px solid rgba(130,210,170,.22);
}


/* =========================================================
   首页 v2 · 熊宝集市（棕熊暗金）
   ========================================================= */
#page-home .scroll { padding-bottom: 96px; }

.hm-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 6px 18px 0;
  height: 76px;
}
.hm-head-txt { padding-top: 4px; }
.hm-head-txt h1 {
  font-size: 27px; font-weight: 900; letter-spacing: 1.5px;
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
.hm-head-txt p {
  margin-top: 8px;
  font-size: 11.5px; letter-spacing: 1.8px; color: #8C8578;
}
.hm-head-av {
  width: 44px; height: 44px;
  border-radius: 50%;
  padding: 0;
  margin-top: 2px;
  border: 0;
  background: none;
  overflow: hidden;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
}
.hm-head-av img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* 主视觉 */
/* 主视觉：按原始比例，不留上下空档 */
.hm-hero {
  margin: 0 0 6px;
  height: auto;
  overflow: hidden;
}
.hm-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* 资产卡 */
.hm-wallet {
  margin: 2px 16px 0;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(38, 33, 28, .97) 0%, rgba(24, 21, 19, .98) 100%);
  border: 1px solid rgba(200, 165, 105, .22);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(230, 200, 150, .12);
}
.hm-wallet-main {
  padding: 14px 18px 12px;
  display: flex; align-items: baseline; gap: 9px;
  border-bottom: 1px solid rgba(200, 165, 105, .14);
}
.hm-wallet-main b {
  font-size: 27px; font-weight: 900; letter-spacing: -.8px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFFFF 28%, #E3C99A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hm-wallet-main span { font-size: 12px; color: #9C9488; }

.hm-wallet-row {
  display: flex;
  padding: 12px 0;
}
.hm-wallet-cell {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  position: relative;
}
.hm-wallet-cell + .hm-wallet-cell::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(200,165,105,.18), transparent);
}
.hm-wallet-cell b {
  font-size: 19px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFFFF 30%, #DCC49B 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hm-wallet-cell span { font-size: 11px; color: #948C80; }

/* 双卡 */
.hm-duo {
  margin: 11px 16px 0;
  display: flex; gap: 11px;
}
.hm-tile {
  position: relative;
  flex: 1;
  height: 96px;
  border-radius: 17px;
  overflow: hidden;
  padding: 14px 13px;
  display: flex;
  text-align: left;
  transition: transform .16s ease, filter .16s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
}
.hm-tile:active { transform: scale(.975); filter: brightness(1.07); }
.ht-txt {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 9px;
}
.ht-txt b {
  font-size: 17px; font-weight: 800; letter-spacing: .5px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.ht-pill {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 9px;
  font-size: 9.5px; font-weight: 600;
  color: #E8D4AE;
  background: rgba(255, 205, 130, .13);
  border: 1px solid rgba(255, 205, 130, .22);
  white-space: nowrap;
}
.hm-tile img {
  position: absolute; right: 4px; bottom: 6px;
  width: 78px; height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.4));
}
.t-game {
  background: linear-gradient(155deg, #24382A 0%, #182118 55%, #101610 100%);
  border: 1px solid rgba(140, 190, 130, .18);
}
.t-hb {
  background: linear-gradient(155deg, #3A2118 0%, #2A1710 55%, #1C0F0A 100%);
  border: 1px solid rgba(255, 150, 110, .2);
}

/* 小熊乐园横幅 */
.hm-park {
  position: relative;
  display: block;
  width: calc(100% - 32px);
  margin: 11px 16px 0;
  padding: 0;
  aspect-ratio: 489 / 114;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .16s ease;
  box-shadow: 0 10px 26px rgba(0,0,0,.44);
}
.hm-park:active { transform: scale(.985); }
.hm-park img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}



/* =========================================================
   一币暴富 v2
   ========================================================= */
.fl-page .scroll { padding-bottom: 76px; }

.fl-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 6px 18px 0;
  height: 76px;
}
.fl-head-txt { padding-top: 4px; }
.fl-head-txt h1 {
  font-size: 26px; font-weight: 900; letter-spacing: 1.2px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.fl-head-txt p {
  margin-top: 8px;
  font-size: 11.5px; letter-spacing: 1.8px; color: #8C8578;
}
.fl-head-av {
  width: 44px; height: 44px;
  border-radius: 50%;
  padding: 0; border: 0;
  margin-top: 2px;
  background: none;
  overflow: hidden;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
}
.fl-head-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* 主视觉：按图片原始比例铺满，不留上下空档 */
.fl-hero {
  margin: -6px 0 0;
  height: 108px;
  overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
.fl-hero img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom;
  display: block;
}

/* 商品宝主卡 */
.fl-product {
  margin: 2px 16px 0;
  padding: 8px 12px 9px;
  border-radius: 19px;
  background: linear-gradient(165deg, rgba(46,42,38,.97) 0%, rgba(28,26,24,.98) 62%, rgba(22,20,19,.99) 100%);
  border: 1px solid rgba(200, 170, 115, .18);
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(230,205,155,.1);
  position: relative;
  z-index: 2;
}
.fp-tag {
  display: flex; align-items: center; gap: 7px;
  color: #E8D9BE;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  transition: opacity .16s ease;
}
.fp-tag:active { opacity: .65; }
/* 右侧指示箭头，暗示可点开 */
.fp-tag-arrow {
  width: 6px; height: 6px;
  margin-left: 2px;
  border-top: 1.5px solid rgba(232, 217, 190, .5);
  border-right: 1.5px solid rgba(232, 217, 190, .5);
  transform: rotate(45deg);
}
.fp-tag svg { width: 16px; height: 16px; }
.fp-tag span { font-size: 14px; font-weight: 800; letter-spacing: .4px; }

/* 宝箱：关闭 / 充能 / 开启 三态 */
.fp-img {
  position: relative;
  height: 96px;
  display: flex; align-items: flex-end; justify-content: center;
  margin: 2px 0;
}
.fp-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.55));
  transition: transform .35s cubic-bezier(.34,1.4,.64,1), filter .35s ease;
}
/* 集满瞬间：轻微弹跳 */
.fp-img[data-charge="done"] img { transform: translateY(-4px) scale(1.03); }

/* 充能光晕 */
.fp-glow {
  position: absolute;
  left: 50%; top: 52%;
  width: 124px; height: 124px;
  margin: -62px 0 0 -62px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .45s ease;
  background: radial-gradient(circle,
    rgba(255, 214, 130, .55) 0%,
    rgba(255, 186, 80, .26) 38%,
    rgba(255, 170, 60, 0) 70%);
}
.fp-img[data-charge="charging"] .fp-glow { opacity: .75; }
.fp-img[data-charge="done"] .fp-glow { opacity: 1; }

/* 开箱金币飞出 */
.fp-coins { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.fp-coin {
  position: absolute;
  left: 50%; top: 56%;
  width: 20px; height: 20px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle at 34% 28%, #FFF6DF 0%, #F0D9A4 42%, #C8A566 100%);
  box-shadow: 0 2px 8px rgba(180,140,60,.55);
}
.fp-img[data-charge="done"] .fp-coin { animation: fpCoinFly 1.05s ease-out forwards; }
.fp-img[data-charge="done"] .c1 { --tx: -92px; --ty: -104px; animation-delay: .05s; }
.fp-img[data-charge="done"] .c2 { --tx:  86px; --ty: -112px; animation-delay: .12s; }
.fp-img[data-charge="done"] .c3 { --tx: -58px; --ty: -142px; animation-delay: .18s; }
.fp-img[data-charge="done"] .c4 { --tx: 120px; --ty: -74px;  animation-delay: .10s; }
.fp-img[data-charge="done"] .c5 { --tx: -128px; --ty: -62px; animation-delay: .22s; }
.fp-img[data-charge="done"] .c6 { --tx:  34px; --ty: -150px; animation-delay: .28s; }
@keyframes fpCoinFly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.15); }
}

/* 充能按钮 */
.fp-charge {
  display: block;
  width: 100%;
  height: 34px;
  margin-top: 8px;
  border-radius: 11px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .4px;
  color: #2A1C08;
  background: linear-gradient(180deg, #FFF0CC 0%, #F3C871 52%, #DCA84E 100%);
  box-shadow: 0 8px 20px rgba(226, 170, 70, .3), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .16s ease, filter .16s ease;
}
.fp-charge:active { transform: scale(.98); filter: brightness(1.05); }
.fp-charge.done {
  color: #E9C98C;
  background: rgba(255, 205, 130, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 140, .34);
}
.fp-charge:disabled { opacity: .9; }

.fp-foot { padding-top: 0; }
.fp-price { margin-top: 2px; }
.fp-price {
  display: flex; align-items: baseline; gap: 2px;
  flex-wrap: nowrap;
}
.fp-price i {
  font-style: normal;
  font-size: 14px; font-weight: 700; color: #F2D9A8;
  margin-right: 1px;
}
.fp-price b {
  font-size: 26px; font-weight: 900; letter-spacing: -.8px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFFFF 26%, #E8CFA2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fp-price small { font-size: 14px; font-weight: 800; color: #E8CFA2; }
.fp-badge {
  margin-left: 8px;
  padding: 2.5px 7px;
  border-radius: 6px;
  font-size: 10.5px; font-weight: 700;
  color: #E8D3AE;
  background: rgba(255, 205, 130, .15);
  border: 1px solid rgba(255, 205, 130, .26);
  align-self: center;
  white-space: nowrap;
}
.fp-sold {
  margin-left: auto;
  font-size: 12px; color: #B9BEC6;
  white-space: nowrap;
}
.fp-sold { font-size: 11.5px; }
.fp-sold em { font-style: normal; color: #E8D3AE; font-weight: 800; }

.fp-bar {
  overflow: hidden;
  margin-top: 9px;
  height: 7px;
  border-radius: 4px;
  background: rgba(255,255,255,.09);
}
.fp-bar i {
  display: block; height: 100%;
  border-radius: 4px;
  transition: width .5s cubic-bezier(.3,.9,.4,1);
  background: linear-gradient(90deg, #E8C98C, #FFF0CB);
  box-shadow: 0 0 12px rgba(255,215,150,.55);
}

/* 两张横卡 */
.fl-row {
  position: relative;
  display: block;
  width: calc(100% - 32px);
  margin: 10px 16px 0;
  height: 86px;
  border-radius: 17px;
  overflow: hidden;
  text-align: left;
  padding: 0;
  background: linear-gradient(160deg, rgba(38,34,30,.96) 0%, rgba(24,22,20,.98) 100%);
  border: 1px solid rgba(200, 170, 115, .14);
  box-shadow: 0 10px 24px rgba(0,0,0,.42), inset 0 1px 0 rgba(230,205,155,.08);
  transition: transform .16s ease, filter .16s ease;
}
.fl-row:active { transform: scale(.98); filter: brightness(1.06); }
.fr-txt {
  position: absolute; left: 17px; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.fr-txt b {
  display: block;
  font-size: 18px; font-weight: 800; letter-spacing: .5px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.fr-txt span {
  display: block;
  margin-top: 9px;
  font-size: 11px; color: #8E877B;
  letter-spacing: .3px;
}
.fl-row img {
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 108px; height: 108px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}


/* 各页顶部头像统一：圆形、干净阴影（与对战页一致） */
.hm-head-av,
.fl-head-av,
.tx-head-av,
.pk-head-av {
  width: 41px; height: 41px;
  border-radius: 50%;
  padding: 0; border: 0; background: none;
  margin-top: 1px; flex: 0 0 auto;
  overflow: hidden;
  filter: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .42);
}
.hm-head-av img,
.fl-head-av img,
.tx-head-av img,
.pk-head-av img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  filter: none;
}

/* =========================================================
   对战中心 v2 + 导航 v3
   ========================================================= */
.pk-head-av {
  width: 41px; height: 41px;
  border-radius: 50%;
  padding: 0; border: 0; background: none;
  margin-top: 1px; flex: 0 0 auto;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.42);
}
.pk-head-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* 主视觉：完整场景铺满整宽；房间卡压在其下沿，合成一张卡 */
.pk-hero {
  margin: -6px 0 0;
  position: relative;
}
.pk-hero img {
  width: 100%; height: auto;
  display: block;
}

/* 底部导航：通栏贴底（不悬浮）+ 金币凸起 */
.tabbar.pill-nav {
  left: 0; right: 0; bottom: 0;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding: 0 2px env(safe-area-inset-bottom, 0px);
  border-radius: 0;
  background: #191920;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 -10px 26px rgba(0, 0, 0, .42);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
  align-items: center;
}

.tabbar.pill-nav a {
  flex: 1;
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding-bottom: 0;
  gap: 4px;
  color: #6E7076;
  position: relative;
}
.tabbar.pill-nav a .tb-ic {
  display: flex; align-items: center; justify-content: center;
  width: 21px; height: 21px;
}
.tabbar.pill-nav a .tb-ic svg { width: 21px; height: 21px; display: block; }
.tabbar.pill-nav a em {
  font-size: 9.5px;
  letter-spacing: .3px;
  color: #8A8F98;
  font-weight: 400;
  white-space: nowrap;
  line-height: 12px;
}
/* 选中态：图标金色、文字白色加粗 */
.tabbar.pill-nav a.on { color: #EFD09A; }
.tabbar.pill-nav a.on em { color: #FFFFFF; font-weight: 700; }

/* 中间金币：从导航上沿凸起，托座与导航同色（不可见） */
.tabbar.pill-nav a.trade { flex: 0 0 74px; }
.tabbar.pill-nav a.trade::before { display: none; }
.tabbar.pill-nav .coin-btn {
  position: absolute;
  z-index: 1;
  left: 50%; top: -21px;
  transform: translateX(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 34% 26%, #FFF7E3 0%, #F0D9A4 36%, #CBA96C 74%, #A98A50 100%);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, .55),
    0 2px 6px rgba(0, 0, 0, .4),
    0 0 0 1.5px rgba(232, 212, 176, .45);
}
.tabbar.pill-nav .coin-btn svg { width: 41px; height: 41px; }
/* 给金币留出图标位，让「积分交易」文字与其它标签基线对齐 */
.tabbar.pill-nav a.trade::after {
  content: "";
  display: block;
  width: 21px; height: 21px;
  order: 0;
}
.tabbar.pill-nav a.trade em {
  order: 1;              /* 文字排在占位图标之后，与其它标签基线对齐 */
  margin-top: 0;         /* 清掉旧版为金币留的 25px */
  color: #FFFFFF;
  font-weight: 600;
}
/* 中间项选中时保持同样的金币样式，不沿用旧版橙色光圈 */
.tabbar.pill-nav a.trade.on .coin-btn {
  box-shadow:
    0 8px 18px rgba(0, 0, 0, .55),
    0 2px 6px rgba(0, 0, 0, .4),
    0 0 0 1.5px rgba(232, 212, 176, .45);
}

/* 通栏导航已是实底，不再需要上方的黑色渐变遮罩 */
.nav-scrim { display: none; }

/* 对战：3 张横卡 */
.pk-list {
  margin: 16px 16px 0;
  display: flex; flex-direction: column; gap: 11px;
}
.pk-row {
  position: relative;
  display: block;
  width: 100%;
  height: 70px;
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  padding: 0;
  background: linear-gradient(160deg, rgba(34,34,42,.97) 0%, rgba(22,22,28,.99) 100%);
  border: 1px solid rgba(140, 160, 200, .14);
  box-shadow: 0 10px 24px rgba(0,0,0,.42), inset 0 1px 0 rgba(180,200,240,.08);
  transition: transform .16s ease, filter .16s ease;
}
.pk-row:active { transform: scale(.98); filter: brightness(1.06); }

/* 卡面色调 */
.pk-row::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 88% 50%, rgba(80,120,255,.22) 0%, rgba(80,120,255,0) 62%);
  pointer-events: none;
}
.pk-row.gold::before {
  background: radial-gradient(90% 120% at 88% 50%, rgba(230,150,50,.24) 0%, rgba(230,150,50,0) 62%);
}
.pk-row.gold {
  background: linear-gradient(160deg, rgba(42,34,26,.97) 0%, rgba(24,20,16,.99) 100%);
  border-color: rgba(220, 175, 110, .18);
}
.pk-row.green::before {
  background: radial-gradient(90% 120% at 88% 50%, rgba(90,200,120,.20) 0%, rgba(90,200,120,0) 62%);
}
.pk-row.green {
  background: linear-gradient(160deg, rgba(28,40,32,.97) 0%, rgba(18,24,20,.99) 100%);
  border-color: rgba(130, 200, 150, .16);
}

.pr-txt {
  position: absolute; left: 18px; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.pr-txt b {
  display: block;
  font-size: 15.5px; font-weight: 700; letter-spacing: .3px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.pr-txt span {
  display: block;
  margin-top: 5px;
  font-size: 9.5px; color: #8E9099;
  letter-spacing: .3px;
}
.pk-row img {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 96px; height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}

/* 短屏（iPhone SE / 8 等 667 高）压缩纵向尺寸，保证三张卡全部露出在导航之上 */
@media (max-height: 700px) {
  .pk-head { height: 66px; }
  .pk-head-av { width: 41px; height: 41px; }
}

/* =========================================================
   我的 · 与首页/对战等页统一规格（去掉松鼠相关内容）
   ========================================================= */
.mine-page .scroll { padding-bottom: 96px; }

.mine-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 4px 16px 0;
  height: 74px;
}
.mine-head-txt { padding-top: 5px; }
.mine-head-txt h1 {
  font-size: 27px; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(180deg, #FFFFFF 34%, #D5C9B8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mine-head-txt p {
  margin-top: 7px;
  font-size: 11.5px; letter-spacing: 1.7px; color: #8b9099;
}
.mine-head-actions { display: flex; gap: 9px; margin-top: 6px; }
.mine-head-actions .round-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  color: #D9DEE5;
  transition: transform .16s ease, background .16s ease;
}
.mine-head-actions .round-btn:active { transform: scale(.93); background: rgba(255,255,255,.14); }
.mine-head-actions .round-btn svg { width: 17px; height: 17px; }

/* 个人卡 */
/* 卡内顶栏：头像 + 昵称 + 等级 + 登录按钮 */
.mine-profile {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 13px;
  border-bottom: 1px solid rgba(200, 165, 105, .14);
}
.mp-avatar {
  width: 50px; height: 50px; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.42);
}
.mp-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.mp-info { flex: 1; min-width: 0; }
.mp-info h2 { font-size: 18px; font-weight: 800; letter-spacing: .4px; color: #FFFFFF; }
.mp-info p {
  margin-top: 5px; font-size: 10.5px; color: #948C80; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mine-profile .btn-login {
  flex: 0 0 auto;
  height: 34px; padding: 0 17px; border-radius: 17px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .5px;
  color: #2A1C08;
  background: linear-gradient(180deg, #FFE9B8 0%, #E7C27E 52%, #C59A4F 100%);
  box-shadow: 0 6px 16px rgba(190,150,70,.32), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .16s ease, filter .16s ease;
}
.mine-profile .btn-login:active { transform: scale(.95); filter: brightness(1.05); }
.mine-profile .btn-login.hide { display: none; }

/* 资产卡：复用首页 hm-wallet，补一个等级徽章 */
.mine-wallet { margin-top: 12px; }
.mine-lv {
  margin-left: auto;
  padding: 3px 9px; border-radius: 9px;
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  color: #E8D4AE;
  background: rgba(255, 205, 130, .13);
  border: 1px solid rgba(255, 205, 130, .22);
}
.mine-wallet .hm-wallet-cell {
  background: none; border: 0; padding: 0; font: inherit;
  color: inherit; cursor: pointer;
  transition: opacity .16s ease;
}
.mine-wallet .hm-wallet-cell:active { opacity: .68; }

/* 通用卡片：与首页/对战同一套暖色卡面 */
.mine-card {
  margin: 12px 16px 0;
  padding: 14px 14px 16px;
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(38,33,28,.97) 0%, rgba(24,21,19,.98) 100%);
  border: 1px solid rgba(200,165,105,.20);
  box-shadow: 0 14px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(230,200,150,.10);
}
.mine-card .card-head { padding: 0 2px; }
.mine-card .card-head h3 { font-size: 15px; font-weight: 800; letter-spacing: .4px; color: #F1E6D2; }
.mine-card .head-more { font-size: 11px; color: #A79B8A; }
.mine-card .head-more em { font-size: 13px; }
.mine-card .o-item span { color: #C9C0B2; }
.mine-card .o-badge { border-color: #241F1A; }

.mine-card .func-grid { margin-top: 12px; }

/* 团队长数据入口按钮（仅团队长可见，默认 hidden）—— 暗金描边会员卡风 */
.mine-page .teamleader-entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 32px);
  margin: 14px 16px 0;
  padding: 11px 14px 11px 12px;
  border: 1px solid rgba(214, 176, 110, .42);
  border-radius: 16px;
  text-align: left;
  overflow: hidden;
  background:
    radial-gradient(140% 150% at 6% 0%, rgba(255, 214, 138, .18), rgba(255, 214, 138, 0) 46%),
    linear-gradient(158deg, #2b241a 0%, #1b1610 52%, #14100b 100%);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 228, 176, .16),
    inset 0 0 0 1px rgba(120, 88, 44, .28);
  transition: transform .16s ease, filter .16s ease;
}
/* 斜向高光扫过 */
.mine-page .teamleader-entry::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 243, 214, .14) 50%, rgba(255, 255, 255, 0) 60%);
}
.mine-page .teamleader-entry:active { transform: scale(.975); filter: brightness(1.06); }
.teamleader-entry[hidden] { display: none; }

.tl-emblem {
  position: relative; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #3a2205;
  background: radial-gradient(circle at 50% 32%, #fce9be 0%, #e7ba66 44%, #a7711f 100%);
  box-shadow:
    0 4px 12px rgba(160, 104, 30, .5),
    inset 0 1px 1px rgba(255, 255, 255, .75),
    inset 0 -3px 5px rgba(90, 55, 10, .55);
}
.tl-emblem svg { width: 23px; height: 23px; }

.tl-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tl-txt b {
  font-size: 15px; font-weight: 800; letter-spacing: .8px; line-height: 1.15;
  background: linear-gradient(180deg, #fff6dc 0%, #f4cd80 58%, #cf9433 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tl-txt i {
  font-style: normal; font-size: 11px; letter-spacing: .8px; color: #a89a80;
}

.tl-go {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: #f0cd88;
  background: rgba(214, 176, 110, .12);
  border: 1px solid rgba(214, 176, 110, .38);
}
.tl-go svg { width: 15px; height: 15px; }

/* 双卡 */
.mine-duo { margin-top: 12px; }
.t-group {
  background: linear-gradient(155deg, #2A2438 0%, #1C1828 55%, #14101C 100%);
  border: 1px solid rgba(170, 150, 255, .18);
}
.t-income {
  background: linear-gradient(155deg, #3A2A18 0%, #2A1D10 55%, #1C130A 100%);
  border: 1px solid rgba(255, 180, 110, .20);
}
.mine-duo .hm-tile { padding: 14px 13px; }
.mine-duo .ht-txt { gap: 9px; }

/* 常用功能：4 列图标宫格（去重后 8 项，两行） */
.mine-page .func-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 6px;
}
.mine-page .func-grid button {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 8px;
  padding: 0;
  background: none; border: 0; border-radius: 12px;
  transition: transform .16s ease, opacity .16s ease;
}
.mine-page .func-grid button:active { transform: scale(.92); opacity: .8; }
/* 图标统一放进柔和圆角底，和彩色立体图标拉开层次又不冲突 */
.mine-page .func-grid img,
.mine-page .func-grid svg {
  width: 21px; height: 21px; object-fit: contain;
  flex: 0 0 auto;
  box-sizing: content-box;
  padding: 11px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(200, 165, 105, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.mine-page .func-grid span {
  font-size: 10.5px; color: #C9C1B3; letter-spacing: .2px;
  white-space: nowrap; line-height: 13px;
}

.mine-page .foot-note { color: #6E6A62; }

/* =========================================================
   五个 Tab 页标题栏统一规格
   （高度 / 内边距 / 标题字号 / 副标题字号 全部一致）
   ========================================================= */
.hm-head,
.fl-head,
.tx-head,
.pk-head,
.mine-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 6px 16px 0;
  height: 76px;
  position: relative;
}
.hm-head-txt,
.fl-head-txt,
.tx-head-txt,
.pk-head-txt,
.mine-head-txt { padding-top: 4px; min-width: 0; }

.hm-head-txt h1,
.fl-head-txt h1,
.tx-head-txt h1,
.pk-head-txt h1,
.mine-head-txt h1 {
  font-size: 26px; font-weight: 900; letter-spacing: .6px; line-height: 34px;
  background: linear-gradient(180deg, #FDF4E3 20%, #E0C9A2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.hm-head-txt p,
.fl-head-txt p,
.tx-head-txt p,
.pk-head-txt p,
.mine-head-txt p {
  margin-top: 6px;
  font-size: 11.5px; letter-spacing: 1.2px; line-height: 16px;
  color: #C0AE93;
}

/* 右上头像位置统一 */
.hm-head-av,
.fl-head-av,
.tx-head-av,
.pk-head-av { margin-top: 1px; }

/* 积分交易大厅 · 标题右侧的熊与宝箱装饰（独立于标题文字，不遮挡） */
.tx-head-bear {
  position: absolute;
  right: 62px;
  top: 0;
  width: 126px;
  height: auto;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5));
}
.tx-head-txt { position: relative; z-index: 2; }

/* 个人卡：昵称与等级同行 */
.mp-name-row { display: flex; align-items: center; gap: 8px; }
.mp-name-row h2 { font-size: 18px; font-weight: 800; letter-spacing: .4px; color: #FFFFFF; }
.mp-name-row .mine-lv { margin-left: 0; }
/* 资产卡那行不再需要右侧徽章占位 */
.mine-wallet .hm-wallet-main { gap: 9px; }

/* 我的页双卡：图标收进卡片内 */
.mine-duo .hm-tile img {
  right: 8px; bottom: 10px;
  width: 58px; height: 58px;
}
.mine-duo .ht-txt b { font-size: 16px; }
.mine-duo .ht-txt { gap: 8px; }

/* 抢购页：熊币暴富 / 实物暴富 分类切换 */
/* 分类切换：独立悬浮胶囊（浮在内容之上，不与卡片连体） */
.fl-tabs {
  position: relative;
  z-index: 5;
  display: flex;
  gap: 10px;
  margin: -8px 16px 0;
  padding: 4px;
  border-radius: 16px;
  background: rgba(18, 17, 20, .92);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.fl-tab {
  position: relative;
  flex: 1;
  height: 42px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  gap: 7px;
  font-size: 14px; font-weight: 700; letter-spacing: .8px;
  color: #8E887C;
  background: transparent;
  border: 1px solid transparent;
  transition: transform .18s ease, background .22s ease, color .22s ease, box-shadow .22s ease;
}
.fl-tab svg { width: 16px; height: 16px; flex: 0 0 auto; }
.fl-tab:active { transform: scale(.97); }
.fl-tab.on {
  color: #2A1C08;
  background: linear-gradient(180deg, #FFF0CC 0%, #F3C871 52%, #DCA84E 100%);
  border-color: rgba(255, 232, 180, .55);
  box-shadow:
    0 6px 16px rgba(226, 170, 70, .34),
    inset 0 1px 0 rgba(255, 255, 255, .65),
    inset 0 -1px 0 rgba(160, 110, 30, .25);
}
/* 选中项底部一道细光，增强立体感 */
.fl-tab.on::after {
  content: "";
  position: absolute; left: 22%; right: 22%; bottom: 4px;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
}

/* =========================================================
   抢购页：两个面板（熊币暴富 / 实物暴富）
   ========================================================= */
.fl-panel { display: none; }
.fl-panel.on { display: block; }

/* 实物暴富 · 商品列表 */
.fl-goods {
  margin: 12px 16px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.fg-item {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border-radius: 17px;
  background: linear-gradient(165deg, rgba(46,42,38,.97) 0%, rgba(28,26,24,.98) 68%, rgba(22,20,19,.99) 100%);
  border: 1px solid rgba(200, 170, 115, .18);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(230,205,155,.1);
  transition: transform .16s ease, filter .16s ease;
}
.fg-item:active { transform: scale(.985); filter: brightness(1.06); }
.fg-thumb {
  flex: 0 0 auto;
  width: 74px; height: 74px;
  border-radius: 13px;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(200, 170, 115, .14);
}
.fg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-info { flex: 1; min-width: 0; }
.fg-info > b {
  display: block;
  font-size: 13.5px; font-weight: 700; color: #F1E6D2; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fg-desc {
  display: block; margin-top: 4px;
  font-size: 10.5px; color: #948C80; letter-spacing: .2px;
}
.fg-price {
  margin-top: 7px;
  display: flex; align-items: baseline; gap: 1px;
}
.fg-price i { font-style: normal; font-size: 12px; font-weight: 700; color: #F2D9A8; }
.fg-price b {
  font-size: 19px; font-weight: 900; letter-spacing: -.4px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFFFF 26%, #E8CFA2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fg-price small { font-size: 11.5px; font-weight: 800; color: #E8CFA2; }
.fg-origin {
  margin-left: 7px;
  font-size: 10.5px; color: #7E766A;
  text-decoration: line-through;
}
.fg-btn {
  flex: 0 0 auto;
  align-self: center;
  padding: 7px 13px;
  border-radius: 13px;
  font-size: 12px; font-weight: 800; letter-spacing: .3px;
  color: #2A1C08;
  background: linear-gradient(180deg, #FFE8B4 0%, #F5C871 100%);
  box-shadow: 0 6px 14px rgba(240, 190, 90, .26), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* 熊币暴富面板里的商品卡上间距 */
.fl-panel[data-flp="coin"] .fl-product { margin-top: 10px; }

/* 「1 熊币参与」价格样式 */
.fp-price .fp-cost {
  font-size: 22px; font-weight: 900; letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFFFF 26%, #E8CFA2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fp-price .fp-unit {
  margin-left: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  color: #E8CFA2;
  align-self: baseline;
}

/* 活动说明弹窗内的规则条目 */
.text-body .rule-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}
.text-body .rule-item:last-child { border-bottom: 0; padding-bottom: 4px; }
.text-body .rule-item > i {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  font-size: 11px; font-weight: 800; line-height: 20px;
  text-align: center; font-style: normal;
  color: #2A1C08;
  background: linear-gradient(180deg, #FFE8B4, #D9B475);
  box-shadow: 0 3px 8px rgba(200, 160, 80, .3);
}
.text-body .rule-item > div { flex: 1; min-width: 0; }
.text-body .rule-item h4 {
  font-size: 13.5px; font-weight: 700; color: #F1E6D2; letter-spacing: .3px;
}
.text-body .rule-item p {
  margin-top: 5px;
  font-size: 12px; line-height: 19px; color: #929AA5;
}

/* 档位卡：与主卡完全同规格，仅纵向堆叠 */
.tier-card { margin-top: 10px; }
.tier-card.gold {
  background: linear-gradient(165deg, rgba(56,44,26,.97) 0%, rgba(30,24,16,.99) 62%, rgba(24,19,13,1) 100%);
  border-color: rgba(255, 205, 130, .24);
}
.fp-tag.static { pointer-events: none; }
.fp-tag.static .fp-tag-arrow { display: none; }
.tier-card .fp-sold { color: #948C80; font-weight: 600; letter-spacing: .2px; }

/* 实物暴富 · 商品抢购进度条 */
.fg-progress {
  margin-top: 8px;
  display: flex; align-items: center; gap: 9px;
}
.fg-bar {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.fg-bar i {
  display: block; height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #E8C98C, #FFF0CB);
  box-shadow: 0 0 10px rgba(255, 215, 150, .5);
  transition: width .5s cubic-bezier(.3,.9,.4,1);
}
.fg-pct {
  flex: 0 0 auto;
  font-size: 10px; color: #948C80; letter-spacing: .2px;
  white-space: nowrap;
}
.fg-pct em {
  font-style: normal; font-weight: 800;
  color: #F0D9A4;
}

/* =========================================================
   一币暴富 · 卡片精修
   ========================================================= */
.fp-card {
  position: relative;
  padding: 0;
  border-radius: 22px;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 196, 110, .13) 0%, rgba(255, 196, 110, 0) 62%),
    linear-gradient(170deg, #2C2621 0%, #1D1915 46%, #151210 100%);
  border: 1px solid rgba(228, 190, 128, .22);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .58),
    0 1px 0 rgba(255, 232, 190, .10) inset,
    0 -1px 0 rgba(0, 0, 0, .5) inset;
  overflow: hidden;
}
/* 右上角暖光装饰 */
.fp-card-deco {
  position: absolute;
  right: -46px; top: -56px;
  width: 170px; height: 170px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 200, 120, .16) 0%, rgba(255, 200, 120, 0) 68%);
}
.fp-card.tier-card.gold {
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 200, 110, .20) 0%, rgba(255, 200, 110, 0) 62%),
    linear-gradient(170deg, #3A2C1A 0%, #251D12 46%, #1A140D 100%);
  border-color: rgba(255, 208, 138, .34);
}

/* 卡片头：说明 */
.fp-head {
  position: relative;
  z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 15px 0;
}
/* 左上角：档位价格 */
.fp-head-cost {
  display: flex; align-items: baseline; gap: 4px;
}
.fp-head-cost b {
  font-size: 22px; font-weight: 900; letter-spacing: -.4px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFFFF 22%, #F0D5A4 62%, #C9A469 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(255, 190, 90, .28));
}
.fp-head-cost span {
  font-size: 12px; font-weight: 800; letter-spacing: .3px;
  color: #E8CFA2;
}

/* 宝箱区：光晕 + 底座 */
.fp-img {
  position: relative;
  height: 96px;
  display: flex; align-items: flex-end; justify-content: center;
  margin: 2px 0 0;
  padding-bottom: 2px;
}
.fp-halo {
  position: absolute;
  left: 50%; top: 54%;
  width: 170px; height: 170px;
  margin: -85px 0 0 -85px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(255, 208, 130, .22) 0%,
    rgba(255, 190, 90, .08) 40%,
    rgba(255, 180, 70, 0) 68%);
}
.fp-pedestal {
  position: absolute;
  left: 50%; bottom: 2px;
  width: 128px; height: 16px;
  margin-left: -64px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 210, 140, .26) 0%, rgba(255, 190, 90, 0) 72%);
  filter: blur(3px);
}
.fp-img img {
  position: relative;
  z-index: 2;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .6));
  transition: transform .35s cubic-bezier(.34,1.4,.64,1), filter .35s ease;
}
.fp-img[data-charge="done"] img { transform: translateY(-3px) scale(1.04); }

/* 价格行：左价格 / 右倒计时，中间细分隔线 */
.fp-foot {
  position: relative;
  z-index: 3;
  padding: 0 15px 11px;
}
.fp-row {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0 4px;
}
/* 左侧：累计投入熊币 */
.fp-total {
  display: flex; align-items: baseline; gap: 3px;
  font-size: 10.5px; color: #948C80; letter-spacing: .2px;
  white-space: nowrap;
}
.fp-total b {
  font-size: 14px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFFFF 24%, #E8CFA2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fp-cost-wrap { display: flex; align-items: baseline; gap: 5px; }
.fp-cost-wrap .fp-cost {
  font-size: 23px; font-weight: 900; letter-spacing: -.4px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFFFF 22%, #F0D5A4 62%, #C9A469 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(255, 190, 90, .25));
}
.fp-cost-wrap .fp-unit {
  font-size: 13px; font-weight: 800; letter-spacing: .3px;
  color: #E8CFA2;
}
.fp-cost-wrap .fp-unit-sub {
  margin-left: 3px;
  font-size: 10px; color: #8C8478; letter-spacing: .2px;
}

.fp-time {
  display: flex; align-items: center; gap: 5px;
  color: #C8A874;
}
.fp-time svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .85; }
.fp-time .fp-cd {
  font-style: normal;
  font-size: 12px; font-weight: 700; letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
  color: #F0DCB8;
}

/* 按钮：双层金边 + 立体渐变 */
.fp-charge {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 0;
  border-radius: 14px;
  font-size: 13.5px; font-weight: 800; letter-spacing: .8px;
  color: #3A2408;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #FFEDBE 0%, #F0C677 46%, #D69E46 100%);
  box-shadow:
    0 8px 20px rgba(220, 160, 60, .30),
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 -1px 0 rgba(150, 100, 30, .35) inset;
  transition: transform .16s ease, filter .16s ease;
}
.fp-charge:active { transform: scale(.98); filter: brightness(1.06); }
.fp-charge.done {
  color: #D8BE93;
  background: rgba(255, 205, 130, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 140, .26);
}

/* 档位卡间距 */
.tier-card { margin-top: 12px; }

/* =========================================================
   一币暴富 · 最终配色覆盖（主卡提亮 / 三档配色区分）
   ========================================================= */

/* 主档（1 熊币）：暖金卡面 + 金色辉光 */
.fp-card {
  background:
    radial-gradient(120% 60% at 50% -6%, rgba(255, 196, 110, .26) 0%, rgba(255, 196, 110, 0) 60%),
    radial-gradient(90% 55% at 50% 100%, rgba(255, 180, 90, .10) 0%, rgba(255, 180, 90, 0) 62%),
    linear-gradient(170deg, #3B2E22 0%, #2A2018 44%, #1B1512 100%);
  border: 1.5px solid rgba(255, 208, 140, .42);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, .62),
    0 0 0 1px rgba(255, 220, 160, .10),
    0 1px 0 rgba(255, 236, 200, .18) inset,
    0 -1px 0 rgba(0, 0, 0, .55) inset,
    0 0 34px rgba(255, 175, 70, .13);
}
/* 10 熊币档：青玉 */
.fp-card.tier-card:not(.gold) {
  background:
    radial-gradient(120% 60% at 50% -6%, rgba(120, 235, 190, .16) 0%, rgba(120, 235, 190, 0) 60%),
    linear-gradient(170deg, #22322B 0%, #1A2521 46%, #121A17 100%);
  border: 1.5px solid rgba(150, 230, 195, .30);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .58),
    0 1px 0 rgba(200, 255, 230, .12) inset,
    0 0 26px rgba(60, 200, 150, .10);
}
/* 100 熊币档：紫金 */
.fp-card.tier-card.gold {
  background:
    radial-gradient(120% 60% at 50% -6%, rgba(214, 140, 255, .22) 0%, rgba(214, 140, 255, 0) 60%),
    linear-gradient(170deg, #32253C 0%, #221A2B 46%, #171020 100%);
  border: 1.5px solid rgba(216, 160, 255, .38);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .58),
    0 1px 0 rgba(240, 210, 255, .14) inset,
    0 0 30px rgba(180, 90, 230, .14);
}

/* 按钮：三档明显区分 */
.fp-charge {
  position: relative;
  display: block;
  width: 100%;
  height: 36px;
  margin-top: 8px;
  border-radius: 12px;
  font-size: 13px; font-weight: 800; letter-spacing: .6px;
  color: #3D2408;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 236, 190, .55);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .12) 44%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #FFF4D6 0%, #F6D492 38%, #E6B25F 72%, #C98F3C 100%);
  box-shadow:
    0 10px 24px rgba(214, 155, 55, .34),
    0 2px 0 rgba(255, 255, 255, .55) inset,
    0 -2px 6px rgba(140, 92, 20, .30) inset;
  overflow: hidden;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.fp-charge::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  animation: fpShine 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fpShine {
  0%, 62% { left: -60%; }
  88%, 100% { left: 120%; }
}
.fp-charge:active { transform: scale(.98); filter: brightness(1.06); }
.fp-charge.done {
  color: #D8BE93;
  background: rgba(255, 205, 130, .07);
  border-color: rgba(255, 214, 140, .26);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 140, .26);
  text-shadow: none;
}
.fp-charge.done::after { display: none; }

/* 10 熊币档按钮：青玉绿 */
.tier-card:not(.gold) .fp-charge {
  color: #06301E;
  border-color: rgba(190, 255, 226, .5);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .10) 44%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #D9FBEA 0%, #86DCB4 34%, #43B582 72%, #268C60 100%);
  box-shadow:
    0 10px 24px rgba(38, 150, 105, .38),
    0 2px 0 rgba(255, 255, 255, .55) inset,
    0 -2px 6px rgba(10, 90, 60, .35) inset;
}
/* 100 熊币档按钮：紫金 */
.tier-card.gold .fp-charge {
  color: #2E0B3A;
  border-color: rgba(246, 200, 255, .55);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .10) 44%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #FAE0FF 0%, #DB9DF0 34%, #B25FD6 72%, #8330AC 100%);
  box-shadow:
    0 10px 26px rgba(150, 60, 190, .42),
    0 2px 0 rgba(255, 255, 255, .5) inset,
    0 -2px 6px rgba(70, 15, 100, .38) inset;
}

/* 主档价格辉光 */
.fp-card:not(.tier-card) .fp-cost-wrap .fp-cost {
  filter: drop-shadow(0 3px 12px rgba(255, 190, 90, .40));
}

/* 实物商品：价格 / 按钮 / 进度条对比度加强 */
.fg-price b {
  font-size: 22px; font-weight: 900; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFF6DF 18%, #FFD98A 52%, #E0A94F 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(255, 185, 80, .45));
}
.fg-origin {
  margin-left: 7px;
  font-size: 10px; color: #5E574C;
  text-decoration: line-through;
  text-decoration-color: rgba(120, 110, 95, .8);
}
.fg-btn {
  flex: 0 0 auto;
  align-self: center;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 12.5px; font-weight: 900; letter-spacing: .2px;
  white-space: nowrap;
  color: #3A1F04;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 235, 185, .65);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .08) 44%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #FFEFC4 0%, #F8CB72 44%, #E39F42 100%);
  box-shadow:
    0 8px 20px rgba(226, 155, 50, .42),
    0 2px 0 rgba(255, 255, 255, .6) inset,
    0 -2px 5px rgba(150, 95, 20, .28) inset;
}
.fg-info > b {
  display: block;
  font-size: 13.5px; font-weight: 700; color: #F1E6D2; letter-spacing: .2px;
  line-height: 18px;
}
.fg-bar { flex: 1; height: 7px; border-radius: 4px; overflow: hidden;
  background: rgba(255,255,255,.09); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.fg-pct em {
  font-style: normal; font-weight: 900; font-size: 11.5px;
  color: #FFD98A;
  text-shadow: 0 0 8px rgba(255, 190, 90, .42);
}

/* =========================================================
   实物暴富 · 每件商品独立配色
   （进度条 + 立即抢按钮，按 data-goods 区分）
   ========================================================= */

/* ① 勇闯天涯 SuperX —— 冰蓝（啤酒清爽感） */
.fg-item[data-goods="superx"] .fg-bar i {
  background: linear-gradient(90deg, #6FB6F5, #BFE3FF);
  box-shadow: 0 0 12px rgba(110, 180, 245, .55);
}
.fg-item[data-goods="superx"] .fg-pct em {
  color: #9BD2FF;
  text-shadow: 0 0 10px rgba(90, 170, 245, .5);
}
.fg-item[data-goods="superx"] .fg-btn {
  color: #06263F;
  border-color: rgba(190, 226, 255, .65);
  background:
    linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.08) 44%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #E4F4FF 0%, #9CCBF2 42%, #4E93D6 100%);
  box-shadow:
    0 8px 20px rgba(60, 130, 210, .42),
    0 2px 0 rgba(255, 255, 255, .6) inset,
    0 -2px 5px rgba(20, 70, 130, .3) inset;
}

/* ② 可比克 番茄味薯片 —— 番茄红（暖辣感） */
.fg-item[data-goods="capico"] .fg-bar i {
  background: linear-gradient(90deg, #F79A5B, #FFD0A8);
  box-shadow: 0 0 12px rgba(245, 140, 75, .55);
}
.fg-item[data-goods="capico"] .fg-pct em {
  color: #FFB98A;
  text-shadow: 0 0 10px rgba(245, 130, 70, .5);
}
.fg-item[data-goods="capico"] .fg-btn {
  color: #3F1406;
  border-color: rgba(255, 200, 170, .65);
  background:
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 44%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #FFE3CE 0%, #F9A96F 42%, #E06A2E 100%);
  box-shadow:
    0 8px 20px rgba(220, 100, 40, .42),
    0 2px 0 rgba(255, 255, 255, .58) inset,
    0 -2px 5px rgba(130, 45, 10, .3) inset;
}

/* =========================================================
   随机矿机（追加块 · 2026-11-04 v2 · 按参考图重做）
   ========================================================= */
#page-mining { background: #100e14; color: #f3ede3; }
#page-mining .mining-body {
  top: 0;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 0 calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  background:
    radial-gradient(120% 46% at 50% -6%, rgba(86, 48, 140, .28) 0%, rgba(16, 14, 20, 0) 62%),
    radial-gradient(90% 40% at 96% 30%, rgba(255, 176, 46, .06) 0%, rgba(16, 14, 20, 0) 58%),
    #100e14;
}
#page-mining .rm-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(420px 260px at 14% 30%, rgba(90, 60, 160, .16), transparent 70%),
    radial-gradient(420px 260px at 88% 44%, rgba(120, 70, 180, .12), transparent 70%);
}
#page-mining .rm-bg i { position: absolute; display: block; border-radius: 50%; background: #fff; opacity: 0; animation: rmTw 3.4s ease-in-out infinite; }
@keyframes rmTw { 0%, 100% { opacity: 0; } 50% { opacity: .5; } }

#page-mining .rm-top,
#page-mining .rm-balance-row,
#page-mining .rm-tabs,
#page-mining .rm-panel,
#page-mining .rm-foot-pad { position: relative; z-index: 1; }

/* 顶部标题 + 头像 */
#page-mining .rm-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 18px; }
#page-mining .rm-top-left h1 {
  font-size: 30px; font-weight: 900; letter-spacing: 1px; line-height: 1.15;
  background: linear-gradient(180deg, #FFF8EA 4%, #F3DCA9 46%, #C79A55 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 12px rgba(220, 170, 80, .22));
}
#page-mining .rm-top-left p { margin-top: 6px; font-size: 12.5px; color: rgba(243, 237, 227, .55); letter-spacing: .3px; }
#page-mining .rm-av {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; padding: 0; overflow: hidden;
  background: radial-gradient(circle at 50% 34%, #4a3a2a, #1d1712);
  border: 2px solid rgba(240, 200, 130, .55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(0, 0, 0, .35);
}
#page-mining .rm-av img { width: 100%; height: 100%; object-fit: cover; }
#page-mining .rm-av:active { transform: scale(.94); }

/* 余额胶囊 */
#page-mining .rm-balance-row { display: flex; justify-content: flex-end; padding: 10px 18px 0; }
#page-mining .rm-balance {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 8px;
  border-radius: 999px; background: rgba(24, 22, 28, .82);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
#page-mining .rm-coin {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 34% 30%, #FFF3CF 0%, #F6D488 34%, #D8A54E 70%, #A8762C 100%);
  box-shadow: inset 0 0 0 1px rgba(120, 74, 16, .35);
  position: relative;
}
#page-mining .rm-coin::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  border: 1.4px solid rgba(255, 246, 214, .75);
}
#page-mining .rm-balance span { font-size: 11.5px; color: rgba(243, 237, 227, .55); }
#page-mining .rm-balance b { font-size: 14px; font-weight: 800; color: #F3D08A; letter-spacing: .4px; }

/* 标签页 */
#page-mining .rm-tabs { display: flex; align-items: center; gap: 6px; padding: 14px 18px 10px; }
#page-mining .rm-tab {
  padding: 9px 20px; border-radius: 13px; font-size: 15px; font-weight: 800; letter-spacing: .5px;
  color: rgba(243, 237, 227, .58); background: transparent; transition: all .18s ease;
}
#page-mining .rm-tab.on {
  color: #43280B;
  background: linear-gradient(180deg, #FBE1AC 0%, #F0C57B 42%, #D9A452 100%);
  box-shadow: 0 6px 16px rgba(210, 160, 70, .35), inset 0 1px 0 rgba(255, 255, 255, .65);
}

/* 面板切换 */
#page-mining .rm-panel { display: none; }
#page-mining .rm-panel.on { display: block; }

/* 宝箱网格 */
#page-mining .rm-chests {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 4px;
  padding: 2px 8px 0;
}
#page-mining .rm-chest { position: relative; padding: 0 2px 2px; background: none; border: 0; }
#page-mining .rm-chest::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 26%; bottom: 10%; border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 80, 200, .22), transparent 68%);
  pointer-events: none;
}
#page-mining .rm-chest span {
  position: relative; display: block; text-align: center; margin-bottom: -2px;
  font-size: 12.5px; font-weight: 700; color: #EFE0C2; letter-spacing: .5px;
}
#page-mining .rm-chest img {
  position: relative; display: block; width: 100%; height: auto;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .55));
}
#page-mining .rm-chest.hit::before { background: radial-gradient(circle, rgba(255, 210, 120, .5), transparent 70%); }
#page-mining .rm-chest.hit img { animation: rmChestPop .5s ease; }
@keyframes rmChestPop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

#page-mining .rm-dots { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 8px 0 14px; }
#page-mining .rm-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
#page-mining .rm-dots i.on { width: 16px; border-radius: 3px; background: linear-gradient(90deg, #F3D08A, #C9985A); }

/* 选择档位卡 */
#page-mining .rm-tier-card {
  margin: 0 16px 12px; padding: 15px 14px 16px; border-radius: 22px;
  background: linear-gradient(180deg, #1c1a20 0%, #141218 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
}
#page-mining .rm-tier-card h3 { font-size: 17px; font-weight: 800; color: #F4ECDF; letter-spacing: .5px; margin-bottom: 12px; }
#page-mining .rm-tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#page-mining .rm-tier {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 9px 4px 8px; border-radius: 13px; line-height: 1.1;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .07);
  transition: all .16s ease;
}
#page-mining .rm-tier .tt { font-size: 14.5px; font-weight: 800; color: #EBD3A4; }
#page-mining .rm-tier .tp { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: rgba(243, 237, 227, .6); }
#page-mining .rm-coin.sm { width: 12px; height: 12px; }
#page-mining .rm-coin.sm::after { inset: 2.6px; border-width: 1px; }
#page-mining .rm-tier.on {
  background: linear-gradient(180deg, #FBE1AC 0%, #F0C57B 44%, #D9A452 100%);
  border-color: rgba(255, 236, 190, .85);
  box-shadow: 0 8px 20px rgba(210, 160, 70, .38), inset 0 1px 0 rgba(255, 255, 255, .7);
}
#page-mining .rm-tier.on .tt { color: #43280B; }
#page-mining .rm-tier.on .tp { color: rgba(67, 40, 11, .78); }
#page-mining .rm-draw-btn {
  flex: 0 0 auto; width: 128px; height: 64px; align-self: center;
  border-radius: 999px; font-size: 16px; font-weight: 900; letter-spacing: .5px; color: #4A2E0C;
  background: linear-gradient(180deg, #FFE9BC 0%, #F6CF88 38%, #E2A957 74%, #C68F40 100%);
  box-shadow: 0 12px 26px rgba(225, 170, 80, .4), inset 0 2px 0 rgba(255, 255, 255, .72), inset 0 -3px 8px rgba(140, 90, 20, .28);
  position: relative; overflow: hidden;
}
#page-mining .rm-draw-btn::after {
  content: ''; position: absolute; top: -30%; left: -60%; width: 40%; height: 160%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: rotate(12deg); animation: rmSheen 3s ease-in-out infinite;
}
@keyframes rmSheen { 0% { left: -60%; } 60%, 100% { left: 130%; } }
#page-mining .rm-draw-btn:active { transform: scale(.97); }
#page-mining .rm-draw-btn:disabled { opacity: .65; }

/* 最近开奖 */
#page-mining .rm-record-card {
  margin: 0 16px; padding: 14px 12px 8px; border-radius: 22px;
  background: linear-gradient(180deg, #1b191f 0%, #141218 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
#page-mining .rm-record-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 6px; }
#page-mining .rm-record-head h3 { font-size: 16px; font-weight: 800; color: #F4ECDF; }
#page-mining .rm-record-more { font-size: 20px; color: rgba(255, 255, 255, .25); line-height: 1; }
#page-mining .rm-record-list { display: flex; flex-direction: column; }
#page-mining .rm-record-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 12px; }
#page-mining .rm-record-row:active { background: rgba(255, 255, 255, .04); }
#page-mining .rm-record-av {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  background: #2a2119; border: 1.5px solid rgba(240, 200, 130, .4);
}
#page-mining .rm-record-av img { width: 100%; height: 100%; object-fit: cover; }
#page-mining .rm-record-txt { flex: 1; min-width: 0; font-size: 12.5px; color: rgba(243, 237, 227, .62); }
#page-mining .rm-record-txt b { color: #F3D08A; font-weight: 700; }
#page-mining .rm-record-chev { flex: 0 0 auto; font-size: 17px; color: rgba(255, 255, 255, .18); }
#page-mining .rm-record-empty { padding: 18px 0 20px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .3); }

/* 我的矿机 */
#page-mining .rm-mine-topbar { display: flex; align-items: center; justify-content: space-between; padding: 2px 18px 10px; }
#page-mining .rm-mine-hint { font-size: 11px; color: rgba(243, 237, 227, .42); }
#page-mining .rm-comm-entry {
  padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #F3D08A;
  background: rgba(255, 215, 130, .08); border: 1px solid rgba(255, 215, 130, .28);
}
#page-mining .rm-comm-entry:active { transform: scale(.95); }

#page-mining .rm-claim-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 16px 12px; padding: 13px 14px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(0, 230, 118, .12), rgba(0, 180, 90, .04));
  border: 1px solid rgba(0, 230, 118, .24);
}
#page-mining .rm-claim-txt span { display: block; font-size: 10.5px; color: rgba(255, 255, 255, .55); letter-spacing: .5px; }
#page-mining .rm-claim-txt b { display: block; margin-top: 3px; font-size: 11px; color: #8affc9; }
#page-mining .rm-claim-txt em { font-size: 19px; font-weight: 900; color: #52e6a0; }
#page-mining .rm-claim-btn {
  flex-shrink: 0; padding: 10px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 900; letter-spacing: 1px;
  color: #04220f; background: linear-gradient(135deg, #00e676, #00b06e);
  box-shadow: 0 7px 18px -6px rgba(0, 200, 110, .55);
}
#page-mining .rm-claim-btn:active { transform: scale(.95); }

#page-mining .rm-mine-list { display: flex; flex-direction: column; gap: 10px; margin: 0 16px; }
#page-mining .rm-empty { padding: 26px 0; text-align: center; font-size: 12px; line-height: 1.8; color: rgba(255, 255, 255, .35); }
#page-mining .rm-empty span { font-size: 10.5px; color: rgba(255, 255, 255, .24); }
#page-mining .rm-mine {
  position: relative; display: flex; gap: 10px; padding: 12px; border-radius: 18px;
  background: linear-gradient(180deg, #1b191f 0%, #141218 100%);
  border: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
#page-mining .rm-mine-thumb { flex: 0 0 70px; width: 70px; align-self: center; }
#page-mining .rm-mine-thumb img { width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
#page-mining .rm-mine-main { flex: 1; min-width: 0; }
#page-mining .rm-mine-title { display: flex; align-items: baseline; gap: 6px; }
#page-mining .rm-mine-title b { font-size: 14px; font-weight: 800; color: #F3D08A; }
#page-mining .rm-mine-title span { font-size: 10px; color: rgba(243, 237, 227, .42); }
#page-mining .rm-mine-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
#page-mining .rm-mine-stats .st { padding: 5px 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
#page-mining .rm-mine-stats .st span { display: block; font-size: 8.5px; color: rgba(255, 255, 255, .4); }
#page-mining .rm-mine-stats .st b { display: block; margin-top: 1px; font-size: 13px; font-weight: 900; }
#page-mining .rm-mine-stats .st b.k { color: #F3D08A; }
#page-mining .rm-mine-stats .st b.g { color: #52e6a0; }
#page-mining .rm-bar { height: 4px; margin-top: 8px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .08); }
#page-mining .rm-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #F3D08A, #00e676); transition: width .5s ease; }
#page-mining .rm-mine-foot { display: flex; justify-content: space-between; margin-top: 5px; font-size: 9.5px; color: rgba(255, 255, 255, .35); }
#page-mining .rm-mine-pend { margin-top: 6px; padding: 5px 8px; border-radius: 8px; font-size: 10.5px; color: #8affc9; background: linear-gradient(135deg, rgba(0, 230, 118, .12), rgba(0, 180, 90, .05)); border: 1px solid rgba(0, 230, 118, .22); }
#page-mining .rm-mine-pend b { font-size: 12px; color: #52e6a0; }
#page-mining .rm-foot-pad { height: calc(28px + env(safe-area-inset-bottom, 0px)); }

/* 开箱结果整屏 */
#rmResultMask {
  position: fixed; inset: 0; z-index: 99998; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(120% 52% at 50% 8%, rgba(80, 54, 140, .45) 0%, rgba(16, 14, 20, 0) 62%),
    radial-gradient(70% 40% at 84% 34%, rgba(70, 130, 160, .16) 0%, rgba(16, 14, 20, 0) 60%),
    #0d0b11;
  animation: rmFade .22s ease;
}
#rmResultMask .rs-page {
  position: relative; min-height: 100%;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 18px calc(20px + env(safe-area-inset-bottom, 0px));
}
#rmResultMask .rs-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#rmResultMask .rs-title {
  font-size: 30px; font-weight: 900; letter-spacing: 1px; line-height: 1.15;
  background: linear-gradient(180deg, #FFF8EA 4%, #F3DCA9 46%, #C79A55 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 12px rgba(220, 170, 80, .22));
}
#rmResultMask .rs-sub { margin-top: 6px; font-size: 12.5px; color: rgba(243, 237, 227, .55); }
#rmResultMask .rs-av {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; padding: 0; overflow: hidden;
  background: radial-gradient(circle at 50% 34%, #4a3a2a, #1d1712);
  border: 2px solid rgba(240, 200, 130, .55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(0, 0, 0, .35);
}
#rmResultMask .rs-av img { width: 100%; height: 100%; object-fit: cover; }
#rmResultMask .rs-balrow { display: flex; justify-content: flex-end; margin-top: 10px; }
#rmResultMask .rs-bal {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 8px;
  border-radius: 999px; background: rgba(24, 22, 28, .82);
  border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
#rmResultMask .rs-bal span { font-size: 11.5px; color: rgba(243, 237, 227, .55); }
#rmResultMask .rs-bal b { font-size: 14px; font-weight: 800; color: #F3D08A; letter-spacing: .4px; }

#rmResultMask .rs-chest { position: relative; width: 88%; max-width: 356px; margin: 0 auto -6px; }
#rmResultMask .rs-chest > img { display: block; width: 100%; height: auto; }
#rmResultMask .rs-badge { position: absolute; right: 2px; bottom: 19%; width: 30%; max-width: 94px; transform: rotate(6deg); }
#rmResultMask .rs-badge img { display: block; width: 100%; height: auto; }

#rmResultMask .rs-divider { display: flex; align-items: center; gap: 12px; margin: 2px 6px 6px; }
#rmResultMask .rs-divider i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(243, 208, 138, .75), transparent); }
#rmResultMask .rs-divider span { flex: 0 0 auto; font-size: 16px; font-weight: 800; letter-spacing: 2px; color: #F4E7CB; }

#rmResultMask .rs-mini { display: block; width: 31%; max-width: 128px; margin: 0 auto 2px; filter: drop-shadow(0 10px 22px rgba(255, 170, 60, .22)); }

#rmResultMask .rs-card {
  position: relative; margin: 4px 2px 0; padding: 14px 10px 16px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(46, 36, 28, .55), rgba(24, 20, 20, .55));
  border: 1px solid rgba(214, 170, 100, .35);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
}
#rmResultMask .rs-name { text-align: center; font-size: 17px; font-weight: 800; color: #F4E7CB; letter-spacing: 1px; }
#rmResultMask .rs-stats { display: flex; margin-top: 14px; }
#rmResultMask .rs-stats > div { flex: 1; text-align: center; position: relative; }
#rmResultMask .rs-stats > div + div::before {
  content: ''; position: absolute; left: 0; top: 10%; height: 80%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(243, 208, 138, .22), transparent);
}
#rmResultMask .rs-stats span { display: block; font-size: 11.5px; color: rgba(243, 237, 227, .5); letter-spacing: .5px; }
#rmResultMask .rs-stats b { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 6px; font-size: 16px; font-weight: 900; color: #F4E7CB; }
#rmResultMask .rs-stats b small { font-size: 11px; font-weight: 700; color: rgba(243, 237, 227, .6); }
#rmResultMask .rs-stats .num { color: #F3D08A; }

#rmResultMask .rs-btn {
  display: block; width: 100%; margin: 18px 2px 0; padding: 15px 0; border-radius: 999px;
  font-size: 18px; font-weight: 900; letter-spacing: 4px; color: #4A2E0C;
  background: linear-gradient(180deg, #FFE9BC 0%, #F6CF88 38%, #E2A957 74%, #C68F40 100%);
  box-shadow: 0 14px 30px rgba(225, 170, 80, .42), inset 0 2px 0 rgba(255, 255, 255, .72), inset 0 -3px 8px rgba(140, 90, 20, .28);
}
#rmResultMask .rs-btn:active { transform: scale(.98); }
#rmResultMask .rs-hint { margin: 12px 0 4px; text-align: center; font-size: 11px; color: rgba(243, 237, 227, .4); letter-spacing: .3px; }

/* =========================================================
   随机矿机 · 我的矿机（追加覆盖块 · 2026-11-04 v3）
   ========================================================= */

/* 星云金尘背景 */
#page-mining .mining-body {
  background:
    radial-gradient(58% 32% at 80% 20%, rgba(228, 178, 104, .17) 0%, rgba(16, 14, 19, 0) 62%),
    radial-gradient(40% 22% at 86% 40%, rgba(180, 140, 90, .10) 0%, rgba(16, 14, 19, 0) 66%),
    radial-gradient(46% 24% at 10% 74%, rgba(110, 170, 175, .09) 0%, rgba(16, 14, 19, 0) 66%),
    radial-gradient(86% 26% at 46% 103%, rgba(232, 180, 100, .20) 0%, rgba(16, 14, 19, 0) 70%),
    linear-gradient(180deg, #100e13 0%, #141118 58%, #1a1410 100%);
}
#page-mining .rm-bg { background: none; }
#page-mining .rm-bg i { background: #F5D9A2; box-shadow: 0 0 6px rgba(245, 217, 162, .85); }

/* 余额胶囊：金边 + 小熊金币 */
#page-mining .rm-balance {
  height: 34px; padding: 0 15px 0 10px; gap: 8px;
  background: linear-gradient(180deg, rgba(38, 36, 40, .92), rgba(22, 21, 25, .92));
  border: 1px solid rgba(228, 185, 112, .42);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
}
#page-mining .rm-balance span { color: rgba(243, 237, 227, .6); font-size: 12px; }
#page-mining .rm-balance b { color: #F6E3BD; font-size: 15px; }
#page-mining .rm-balance-ic {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; overflow: hidden;
  border: 1.5px solid rgba(245, 214, 160, .75);
  box-shadow: 0 0 8px rgba(240, 200, 130, .35), inset 0 0 0 1px rgba(0, 0, 0, .25);
  background: #241c14;
}
#page-mining .rm-balance-ic img { width: 100%; height: 100%; object-fit: cover; }

/* 标签：暗底 + 金描边（选中发光） */
#page-mining .rm-tabs { padding: 14px 18px 8px; gap: 12px; }
#page-mining .rm-tab {
  padding: 10px 24px; border-radius: 999px; font-size: 16px; font-weight: 800; letter-spacing: 1px;
  color: rgba(226, 214, 196, .62);
  background: linear-gradient(180deg, rgba(44, 41, 44, .55), rgba(24, 22, 25, .55));
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
#page-mining .rm-tab.on {
  color: #F7E3B8;
  background: linear-gradient(180deg, rgba(62, 48, 30, .78), rgba(30, 24, 20, .78));
  border: 1.5px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 1.5px rgba(240, 197, 123, .95),
    0 0 16px rgba(238, 186, 100, .55),
    inset 0 0 14px rgba(238, 186, 100, .18),
    inset 0 1px 0 rgba(255, 240, 210, .25);
}

/* 提示行 + 佣金按钮 */
#page-mining .rm-mine-topbar { padding: 6px 18px 12px; }
#page-mining .rm-mine-hint { font-size: 12.5px; color: rgba(226, 214, 196, .55); }
#page-mining .rm-comm-entry {
  height: 36px; padding: 0 16px; border-radius: 999px; font-size: 13.5px; font-weight: 800; color: #F6E3BD;
  background: linear-gradient(180deg, rgba(48, 42, 34, .8), rgba(26, 23, 20, .8));
  border: 1px solid rgba(228, 185, 112, .45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .07);
  display: inline-flex; align-items: center; gap: 6px;
}

/* 待领取卡：金边 */
#page-mining .rm-claim-card {
  margin: 0 16px 14px; padding: 16px 14px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(40, 37, 40, .78), rgba(22, 21, 24, .82));
  border: 1px solid rgba(228, 185, 112, .38);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 22px rgba(226, 178, 104, .07);
}
#page-mining .rm-claim-txt span { font-size: 12px; color: rgba(226, 214, 196, .6); }
#page-mining .rm-claim-txt b { margin-top: 6px; font-size: 12px; color: #3FE089; }
#page-mining .rm-claim-txt em { font-size: 26px; font-weight: 900; color: #3FE089; text-shadow: 0 0 16px rgba(63, 224, 137, .45); }
#page-mining .rm-claim-btn {
  padding: 12px 24px; font-size: 16px; letter-spacing: 1px; color: #EFFFF4;
  background: linear-gradient(180deg, #4BEB95 0%, #22CE74 48%, #12A85C 100%);
  box-shadow: 0 8px 22px rgba(30, 200, 110, .45), inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 8px rgba(0, 80, 40, .3);
  text-shadow: 0 1px 2px rgba(0, 70, 35, .45);
}

/* 矿机卡：金渐变边框 + 新布局 */
#page-mining .rm-mine-list { gap: 14px; }
#page-mining .rm-mine {
  display: block; padding: 1.5px; border-radius: 20px; border: 0;
  background: linear-gradient(140deg, #6A5227 0%, #E9C582 26%, #8B6B34 52%, #F3DCA6 78%, #745A2C 100%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55), 0 0 18px rgba(226, 178, 104, .10);
  overflow: hidden;
}
#page-mining .rm-mine-in {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px 12px 6px; border-radius: 18.5px;
  background: linear-gradient(180deg, #232126 0%, #1A191D 100%);
}
#page-mining .rm-mine-thumb { flex: 0 0 96px; width: 96px; }
#page-mining .rm-mine-thumb img {
  width: 100%; height: auto;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)) drop-shadow(0 0 10px rgba(120, 220, 220, .22));
}
#page-mining .rm-mine-main { flex: 1; min-width: 0; }
#page-mining .rm-mine-title { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
#page-mining .rm-mine-title b { font-size: 17px; font-weight: 900; color: #F3D08A; letter-spacing: .5px; }
#page-mining .rm-mine-title span { font-size: 12.5px; color: rgba(226, 214, 196, .55); }
#page-mining .rm-mine-cost {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: rgba(226, 214, 196, .62); white-space: nowrap;
}
#page-mining .rm-mine-cost i {
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFF3CF 0%, #F6D488 36%, #D8A54E 72%, #A8762C 100%);
  box-shadow: inset 0 0 0 1px rgba(120, 74, 16, .35);
  position: relative; flex: 0 0 15px;
}
#page-mining .rm-mine-cost i::after {
  content: ''; position: absolute; inset: 3.2px; border-radius: 50%;
  border: 1px solid rgba(255, 246, 214, .8);
}
#page-mining .rm-mine-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
#page-mining .rm-mine-stats .st {
  padding: 8px 10px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .07);
}
#page-mining .rm-mine-stats .st span { font-size: 10.5px; color: rgba(226, 214, 196, .55); letter-spacing: .5px; }
#page-mining .rm-mine-stats .st b { display: block; margin-top: 3px; font-size: 17px; font-weight: 900; letter-spacing: .3px; }
#page-mining .rm-mine-stats .st b small { font-size: 11px; font-weight: 700; margin-left: 2px; }
#page-mining .rm-mine-stats .st b.k { color: #F6DFAE; }
#page-mining .rm-mine-stats .st b.g { color: #4FE79A; text-shadow: 0 0 12px rgba(79, 231, 154, .35); }

#page-mining .rm-bar {
  position: relative; height: 6px; margin-top: 12px; border-radius: 999px; overflow: visible;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .06));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45);
}
#page-mining .rm-bar i {
  position: relative; display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #C79E58 0%, #E9C97F 34%, #7FD9A8 72%, #4FE79A 100%);
  box-shadow: 0 0 10px rgba(120, 220, 160, .45);
}
#page-mining .rm-bar i::after {
  content: ''; position: absolute; right: -3px; top: 50%; width: 11px; height: 11px;
  transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0%, #CFFBE3 45%, rgba(200, 245, 220, .2) 72%, transparent 100%);
  box-shadow: 0 0 10px rgba(190, 250, 220, .85);
}
#page-mining .rm-mine-foot { margin-top: 7px; font-size: 12px; color: rgba(226, 214, 196, .5); }
#page-mining .rm-mine-foot b { color: rgba(240, 226, 200, .82); font-weight: 700; }
#page-mining .rm-mine-pend {
  margin-top: 8px; padding: 6px 9px; border-radius: 9px; font-size: 11px; color: #8affc9;
  background: linear-gradient(135deg, rgba(0, 230, 118, .12), rgba(0, 180, 90, .05));
  border: 1px solid rgba(0, 230, 118, .22);
}
#page-mining .rm-mine-pend b { font-size: 12.5px; color: #52e6a0; }

/* 空状态 */
#page-mining .rm-empty { font-size: 12.5px; color: rgba(226, 214, 196, .42); }
#page-mining .rm-empty span { color: rgba(226, 214, 196, .28); }

/* =========================================================
   矿机玩法弹窗（黑金 3D 风格 · 2026-11-04 v4）
   ========================================================= */
#rmLogMask {
  position: fixed; inset: 0; z-index: 99998;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background: rgba(4, 3, 7, .82);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  animation: rmFade .2s ease;
}
@keyframes rmFade { from { opacity: 0; } to { opacity: 1; } }

#rmLogMask .rm-pop {
  position: relative;
  width: 100%; max-width: 358px; max-height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 26px; padding: 1.6px;
  background: linear-gradient(150deg, #7C6231 0%, #EACD8E 22%, #6C5527 50%, #F2DFAE 76%, #6E5730 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .8), 0 0 34px rgba(226, 178, 104, .16);
  animation: rmPop .32s cubic-bezier(.2, 1.2, .3, 1);
}
@keyframes rmPop { from { transform: scale(.86) translateY(18px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

#rmLogMask .rm-pop-in {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  border-radius: 24.4px;
  background:
    radial-gradient(90% 46% at 50% 0%, rgba(72, 58, 46, .5) 0%, rgba(16, 14, 18, 0) 64%),
    linear-gradient(180deg, #14121A 0%, #0F0E13 100%);
}

/* 头部 */
#rmLogMask .rm-pop-head {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 16px 13px;
}
#rmLogMask .rm-pop-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238, 196, 128, .28), transparent);
}
#rmLogMask .rm-pop-head img { width: 28px; height: 28px; margin-top: -2px; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .7)) drop-shadow(0 0 8px rgba(230, 190, 120, .25)); }
#rmLogMask .rm-pop-head span {
  font-size: 19px; font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(180deg, #FFF6E4 6%, #F3DCA9 48%, #CFA45F 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(226, 178, 104, .3));
}
#rmLogMask .rm-pop-close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1; color: #E7C68E;
  background: transparent; transition: color .16s ease, background .16s ease;
}
#rmLogMask .rm-pop-close:active { color: #FFF3D8; background: rgba(255, 255, 255, .08); }

/* 分栏 */
#rmLogMask .rm-pop-tabs { display: flex; gap: 8px; padding: 13px 14px 4px; }
#rmLogMask .rm-pop-tab {
  flex: 1; height: 48px; border-radius: 999px;
  font-size: 16px; font-weight: 800; letter-spacing: 1px;
  color: rgba(226, 214, 196, .72);
  background: linear-gradient(180deg, rgba(44, 41, 47, .9), rgba(24, 22, 27, .9));
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: all .18s ease;
}
#rmLogMask .rm-pop-tab.on {
  color: #3D2708;
  border-color: rgba(255, 240, 206, .9);
  background: linear-gradient(180deg, #FFEDBE 0%, #F5D18E 42%, #DDB066 100%);
  box-shadow:
    0 8px 22px rgba(226, 178, 104, .38),
    inset 0 2px 0 rgba(255, 255, 255, .8),
    0 0 20px rgba(238, 186, 100, .45);
}

#rmLogMask .rm-pop-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 14px 14px 18px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#rmLogMask .rm-pop-body::-webkit-scrollbar { display: none; }

/* 记录行 */
#rmLogMask .rm-rec {
  position: relative; display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px; padding: 11px 14px 11px 11px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(48, 45, 52, .55), rgba(24, 22, 27, .62));
  border: 1px solid rgba(255, 255, 255, .075);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .045);
}
#rmLogMask .rm-rec.top {
  border-color: rgba(238, 196, 128, .55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 20px rgba(226, 178, 104, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
}
#rmLogMask .rm-rec .ri {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px; overflow: hidden;
  background: #221E26; box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
#rmLogMask .rm-rec .ri img { width: 100%; height: 100%; object-fit: cover; display: block; }
#rmLogMask .rm-rec .rn { flex: 1; min-width: 0; }
#rmLogMask .rm-rec .t1 { font-size: 16px; font-weight: 800; color: #FAF3E6; letter-spacing: .3px; }
#rmLogMask .rm-rec .t2 { margin-top: 3px; font-size: 12px; color: rgba(226, 214, 196, .42); letter-spacing: .2px; }
#rmLogMask .rm-rec .rv { flex: 0 0 auto; font-size: 17px; font-weight: 900; letter-spacing: .3px; }
#rmLogMask .rm-rec .rv.in { color: #4FE79A; text-shadow: 0 0 14px rgba(79, 231, 154, .45); }
#rmLogMask .rm-rec .rv.out { color: #F7DFAE; }

/* 玩法说明 */
#rmLogMask .rm-rule { display: flex; flex-direction: column; gap: 10px; }
#rmLogMask .rule-it {
  display: flex; gap: 11px; padding: 12px 13px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(48, 45, 52, .5), rgba(24, 22, 27, .58));
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .04);
}
#rmLogMask .rule-n {
  width: 27px; height: 27px; flex: 0 0 27px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; color: #FBE9C2;
  background: linear-gradient(180deg, #6B5329 0%, #3B2D17 100%);
  border: 1px solid rgba(238, 196, 128, .75);
  box-shadow: 0 0 10px rgba(226, 178, 104, .3), inset 0 1px 0 rgba(255, 240, 200, .28);
}
#rmLogMask .rule-t { font-size: 15px; font-weight: 800; color: #FAF3E6; letter-spacing: .4px; }
#rmLogMask .rule-d { margin-top: 5px; font-size: 12.5px; line-height: 1.72; color: rgba(226, 214, 196, .55); }
#rmLogMask .rule-d b { color: #F7DFAE; font-weight: 800; }

/* 佣金 */
#rmLogMask .rm-comm-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 12px; }
#rmLogMask .rm-comm-card {
  padding: 13px 5px 11px; border-radius: 16px; text-align: center;
  background: linear-gradient(180deg, rgba(48, 45, 52, .55), rgba(24, 22, 27, .62));
  border: 1px solid rgba(255, 255, 255, .075);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .3);
}
#rmLogMask .rm-comm-card span { display: block; font-size: 12px; color: rgba(226, 214, 196, .62); }
#rmLogMask .rm-comm-card b {
  display: block; margin-top: 6px; font-size: 19px; font-weight: 900; color: #F7DFAE;
}
#rmLogMask .rm-comm-card b small { font-size: 10px; font-weight: 700; color: rgba(226, 214, 196, .6); }
#rmLogMask .rm-comm-card.lv2 b { color: #FF9BCB; }
#rmLogMask .rm-comm-card.lv3 b { color: #C9A0FF; }
#rmLogMask .rm-comm-card em { display: block; margin-top: 5px; font-size: 11px; color: #7FE9A8; font-style: normal; }

#rmLogMask .rm-comm-claim {
  position: relative; margin-bottom: 14px; padding: 18px 14px 16px; border-radius: 18px; text-align: center;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(30, 200, 120, .18) 0%, rgba(10, 40, 26, 0) 70%),
    linear-gradient(180deg, rgba(20, 46, 34, .8), rgba(12, 24, 18, .85));
  border: 1px solid rgba(60, 200, 130, .38);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45), inset 0 0 24px rgba(40, 200, 120, .08);
}
#rmLogMask .rm-comm-claim div { font-size: 14px; color: rgba(232, 245, 236, .78); }
#rmLogMask .rm-comm-claim div b { font-size: 21px; color: #4FE79A; text-shadow: 0 0 16px rgba(79, 231, 154, .5); }
#rmLogMask .rm-claim-comm {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 12px; padding: 11px 30px; border-radius: 999px;
  font-size: 16px; font-weight: 900; letter-spacing: 1px; color: #EFFFF4;
  background: linear-gradient(180deg, #4BEB95 0%, #22CE74 46%, #12A85C 100%);
  box-shadow:
    0 0 0 1.5px rgba(238, 196, 128, .9),
    0 10px 24px rgba(30, 200, 110, .45),
    inset 0 2px 0 rgba(255, 255, 255, .55),
    inset 0 -3px 8px rgba(0, 80, 40, .3);
  text-shadow: 0 1px 2px rgba(0, 70, 35, .45);
}
#rmLogMask .rm-claim-comm:active { transform: scale(.96); }
#rmLogMask .rm-claim-comm.dis { opacity: .58; pointer-events: none; box-shadow: 0 0 0 1.5px rgba(238, 196, 128, .5), 0 6px 16px rgba(20, 140, 80, .28); }
#rmLogMask .rm-claim-comm .bag { width: 21px; height: 21px; flex: 0 0 21px; display: block; filter: drop-shadow(0 1px 2px rgba(0, 60, 30, .5)); }

#rmLogMask .rm-comm-hd { margin: 2px 0 9px; font-size: 12px; color: rgba(226, 214, 196, .45); letter-spacing: .5px; }
#rmLogMask .rm-rec.lv1 .ri { background: rgba(238, 196, 128, .14); }
#rmLogMask .rm-rec.lv2 .ri { background: rgba(255, 105, 180, .14); }
#rmLogMask .rm-rec.lv3 .ri { background: rgba(200, 107, 255, .16); }
#rmLogMask .rm-rec .ri.lv-txt { display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; color: #FAF3E6; }

#rmLogMask .rm-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 26px 10px 30px; text-align: center; font-size: 14px; color: rgba(226, 214, 196, .5);
}
#rmLogMask .rm-empty span { font-size: 12px; color: rgba(226, 214, 196, .3); }

/* =========================================================
   随机矿机 · 抽取页（黑金舞台版 v5 · 2026-11-04）
   ========================================================= */

/* 顶栏：返回按钮 + 标题 + 头像 */
#page-mining .rm-top { align-items: flex-start; gap: 10px; padding: 0 16px 0 14px; }
#page-mining .rm-back {
  flex: 0 0 40px; width: 40px; height: 40px; margin-top: 6px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #F3D79E;
  background: linear-gradient(180deg, rgba(48, 42, 34, .9), rgba(22, 20, 18, .9));
  border: 1.5px solid rgba(238, 196, 128, .72);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5), 0 0 14px rgba(226, 178, 104, .22), inset 0 1px 0 rgba(255, 255, 255, .1);
}
#page-mining .rm-back svg { width: 19px; height: 19px; }
#page-mining .rm-back:active { transform: scale(.94); }
#page-mining .rm-top-left { flex: 1; min-width: 0; }
#page-mining .rm-top-left h1 { font-size: 31px; letter-spacing: .5px; }
#page-mining .rm-av { width: 44px; height: 44px; border-width: 2px; border-color: rgba(240, 205, 140, .8); }

/* 余额胶囊 */
#page-mining .rm-balance-row { padding: 12px 16px 0; }
#page-mining .rm-balance { height: 38px; padding: 0 16px 0 9px; gap: 8px; border-radius: 999px; }
#page-mining .rm-balance-ic { width: 24px; height: 24px; flex: 0 0 24px; border-color: rgba(245, 214, 160, .85); }
#page-mining .rm-balance span { font-size: 13px; }
#page-mining .rm-balance b { font-size: 17px; color: #FBEBC8; }

/* 分栏 */
#page-mining .rm-tabs { padding: 16px 16px 10px; gap: 8px; }
#page-mining .rm-tab { height: 46px; padding: 0 26px; border-radius: 999px; font-size: 17px; }

/* ===== 宝箱舞台 ===== */
#page-mining .rm-stage {
  position: relative; margin: 2px 0 0; padding: 4px 0 30px;
}
#page-mining .rm-stage::before {
  content: ''; position: absolute; left: -6%; right: -6%; top: -14%; bottom: 4%;
  pointer-events: none;
  background:
    radial-gradient(52% 40% at 50% 44%, rgba(96, 118, 170, .16) 0%, rgba(16, 14, 19, 0) 68%),
    radial-gradient(36% 30% at 12% 40%, rgba(80, 160, 220, .13) 0%, rgba(16, 14, 19, 0) 70%),
    radial-gradient(34% 28% at 88% 44%, rgba(70, 120, 200, .13) 0%, rgba(16, 14, 19, 0) 70%);
}
/* 大展台 */
#page-mining .rm-stage-ring {
  position: absolute; left: 2%; right: 2%; bottom: 6px; height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255, 214, 140, .16) 0%, rgba(255, 190, 100, .05) 52%, transparent 74%),
    radial-gradient(ellipse at 50% 88%, rgba(255, 208, 130, .22) 0%, transparent 62%);
  box-shadow: 0 34px 60px -30px rgba(255, 190, 100, .5);
  pointer-events: none;
}
#page-mining .rm-stage-ring::after {
  content: ''; position: absolute; left: 6%; right: 6%; bottom: 16px; height: 1.5px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 148, .55), transparent);
  filter: blur(.6px);
}

/* 漂浮金币 */
#page-mining .rm-coins { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
#page-mining .rm-coins i {
  position: absolute; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFF6D8 0%, #F3D083 38%, #C8952F 74%, #8E6420 100%);
  box-shadow: 0 0 10px rgba(255, 205, 110, .6), inset 0 0 0 1px rgba(140, 90, 20, .35);
  opacity: .9; animation: rmCoinFloat 7s ease-in-out infinite;
}
#page-mining .rm-coins i::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  border: 1px solid rgba(255, 246, 214, .7);
}
#page-mining .rm-coins .c1 { left: 1%;  top: 20%; animation-delay: 0s;   }
#page-mining .rm-coins .c2 { right: 2%; top: 14%; width: 15px; height: 15px; animation-delay: -1.6s; }
#page-mining .rm-coins .c3 { left: -1%; top: 56%; width: 11px; height: 11px; animation-delay: -3.1s; }
#page-mining .rm-coins .c4 { right: 0%; top: 52%; width: 17px; height: 17px; animation-delay: -2.2s; }
#page-mining .rm-coins .c5 { left: 46%; top: -2%; width: 10px; height: 10px; animation-delay: -4.4s; }
#page-mining .rm-coins .c6 { right: 26%; bottom: 2%; width: 14px; height: 14px; animation-delay: -5.2s; }
@keyframes rmCoinFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); opacity: .85; }
  50% { transform: translateY(-13px) rotate(8deg); opacity: 1; }
}

/* 宝箱网格 */
#page-mining .rm-chests {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 0;
  padding: 2px 8px 0;
}
#page-mining .rm-chest { padding: 0 0 8px; }
#page-mining .rm-chest span {
  position: relative; z-index: 2; margin-bottom: -1px;
  font-size: 13px; font-weight: 700; color: #F2E4C8; letter-spacing: .6px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}
#page-mining .rm-chest img {
  position: relative; z-index: 2; width: 100%;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .65));
}
/* 每箱彩色光晕 */
#page-mining .rm-chest::before {
  content: ''; position: absolute; left: 6%; right: 6%; top: 18%; bottom: 18%;
  border-radius: 50%; z-index: 0; pointer-events: none;
  filter: blur(6px);
  background: radial-gradient(circle, rgba(120, 90, 200, .26), transparent 68%);
}
#page-mining .rm-chest[data-chest="chest-1"]::before { background: radial-gradient(circle, rgba(80, 175, 235, .38), transparent 68%); }
#page-mining .rm-chest[data-chest="chest-2"]::before { background: radial-gradient(circle, rgba(170, 90, 255, .40), transparent 68%); }
#page-mining .rm-chest[data-chest="chest-3"]::before { background: radial-gradient(circle, rgba(150, 80, 230, .36), transparent 68%); }
#page-mining .rm-chest[data-chest="chest-4"]::before { background: radial-gradient(circle, rgba(255, 140, 60, .40), transparent 68%); }
#page-mining .rm-chest[data-chest="chest-5"]::before { background: radial-gradient(circle, rgba(255, 205, 90, .42), transparent 68%); }
#page-mining .rm-chest[data-chest="chest-6"]::before { background: radial-gradient(circle, rgba(70, 145, 225, .36), transparent 68%); }
/* 每箱光台 */
#page-mining .rm-chest::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 8px; height: 16px;
  border-radius: 50%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 232, 180, .5) 0%, rgba(255, 196, 110, .16) 48%, transparent 72%);
  box-shadow: 0 0 18px rgba(255, 205, 130, .42);
}
#page-mining .rm-chest[data-chest="chest-1"]::after { background: radial-gradient(ellipse at 50% 42%, rgba(170, 230, 255, .48) 0%, rgba(90, 175, 235, .16) 50%, transparent 74%); box-shadow: 0 0 18px rgba(100, 190, 240, .45); }
#page-mining .rm-chest[data-chest="chest-2"]::after,
#page-mining .rm-chest[data-chest="chest-3"]::after { background: radial-gradient(ellipse at 50% 42%, rgba(215, 175, 255, .48) 0%, rgba(160, 90, 240, .16) 50%, transparent 74%); box-shadow: 0 0 18px rgba(170, 110, 240, .45); }
#page-mining .rm-chest[data-chest="chest-4"]::after { background: radial-gradient(ellipse at 50% 42%, rgba(255, 200, 160, .5) 0%, rgba(255, 130, 60, .18) 50%, transparent 74%); box-shadow: 0 0 18px rgba(255, 140, 70, .45); }
#page-mining .rm-chest[data-chest="chest-6"]::after { background: radial-gradient(ellipse at 50% 42%, rgba(175, 220, 255, .46) 0%, rgba(70, 140, 220, .16) 50%, transparent 74%); box-shadow: 0 0 18px rgba(80, 150, 230, .42); }

/* 分页圆点 */
#page-mining .rm-dots { padding: 2px 0 12px; }
#page-mining .rm-dots i.on { width: 18px; background: linear-gradient(90deg, #F7DFAE, #DDB066); box-shadow: 0 0 10px rgba(240, 200, 120, .55); }

/* ===== 选择档位卡（金边） ===== */
#page-mining .rm-tier-card {
  margin: 0 16px 14px; padding: 16px 14px 18px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(34, 32, 37, .92), rgba(18, 17, 21, .95));
  border: 1px solid rgba(228, 185, 112, .42);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 24px rgba(226, 178, 104, .06);
}
#page-mining .rm-tier-card h3 { font-size: 19px; margin-bottom: 14px; color: #F8EEDC; }
#page-mining .rm-tier { padding: 11px 4px 10px; border-radius: 14px; }
#page-mining .rm-tier .tt { font-size: 16px; }
#page-mining .rm-tier .tp { font-size: 12px; margin-top: 2px; }
#page-mining .rm-tier .tp .rm-coin.sm,
#page-mining .rm-tier .tp i { width: 14px; height: 14px; flex: 0 0 14px; }
#page-mining .rm-tier.on {
  background: linear-gradient(180deg, #FFF0C8 0%, #F7D493 40%, #E5B66B 100%);
  border-color: rgba(255, 244, 214, .95);
  box-shadow: 0 10px 24px rgba(226, 178, 104, .42), inset 0 2px 0 rgba(255, 255, 255, .85);
}
#page-mining .rm-tier.on .tp { color: rgba(72, 44, 10, .82); }
#page-mining .rm-tier.on .tp i { box-shadow: inset 0 0 0 1px rgba(120, 74, 16, .45); }

#page-mining .rm-draw-btn {
  width: 132px; height: 84px; font-size: 19px; letter-spacing: 1px; border-radius: 999px;
  background: linear-gradient(180deg, #FFF1CB 0%, #F8D795 34%, #E7B96D 68%, #C99A4B 100%);
  box-shadow:
    0 0 0 1.5px rgba(255, 240, 200, .8),
    0 16px 34px rgba(226, 178, 104, .45),
    0 0 30px rgba(240, 195, 110, .4),
    inset 0 3px 0 rgba(255, 255, 255, .85),
    inset 0 -4px 10px rgba(150, 100, 30, .28);
}
#page-mining .rm-draw-btn::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent); }

/* ===== 最近开奖记录（金边） ===== */
#page-mining .rm-record-card {
  margin: 0 16px; padding: 16px 12px 10px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(36, 33, 38, .9), rgba(18, 17, 21, .94));
  border: 1px solid rgba(228, 185, 112, .38);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .05);
}
#page-mining .rm-record-head h3 { font-size: 17px; color: #F8EEDC; }
#page-mining .rm-record-row { padding: 9px 6px; }
#page-mining .rm-record-av { width: 34px; height: 34px; border-color: rgba(240, 200, 130, .55); }
#page-mining .rm-record-txt { font-size: 13.5px; color: rgba(240, 230, 212, .72); }
#page-mining .rm-record-txt b { color: #F3D08A; }
#page-mining .rm-record-chev { font-size: 19px; color: rgba(255, 255, 255, .22); }

/* 余额胶囊图标（补齐） */
#page-mining .rm-balance-ic {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; overflow: hidden;
  display: block; border: 1.5px solid rgba(245, 214, 160, .8);
  box-shadow: 0 0 8px rgba(240, 200, 130, .35), inset 0 0 0 1px rgba(0, 0, 0, .25);
  background: #241c14;
}
#page-mining .rm-balance-ic img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 抽取页 · 金色展台（v5 补） */
#page-mining .rm-stage-ring {
  left: 8%; right: 8%; bottom: 6px; height: 108px;
  background:
    radial-gradient(ellipse 62% 44% at 50% 50%, rgba(255, 214, 140, .14) 0%, rgba(255, 190, 100, .05) 54%, transparent 76%),
    radial-gradient(ellipse 84% 40% at 50% 86%, rgba(255, 208, 130, .26) 0%, rgba(255, 190, 110, .05) 60%, transparent 76%);
}
#page-mining .rm-stage-ring::before {
  content: ''; position: absolute; left: 3%; right: 3%; bottom: 22px; height: 54px;
  border-radius: 50%;
  border: 1.2px solid rgba(255, 208, 140, .38);
  box-shadow: 0 0 22px rgba(255, 200, 110, .3), inset 0 0 20px rgba(255, 200, 110, .12);
}
#page-mining .rm-dots {
  position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(24, 22, 26, .55); border: 1px solid rgba(255, 255, 255, .07);
}
#page-mining .rm-dots-wrap { display: flex; justify-content: center; margin: -6px 0 14px; }

/* 开箱结果页 · 余额胶囊（修正图标尺寸，2026-11-04） */
#rmResultMask .rs-balrow { position: relative; z-index: 3; padding: 0 16px; margin-top: 12px; }
#rmResultMask .rs-bal {
  height: 38px; padding: 0 16px 0 9px; gap: 8px; overflow: hidden;
  background: linear-gradient(180deg, rgba(38, 36, 40, .94), rgba(22, 21, 25, .94));
  border: 1px solid rgba(228, 185, 112, .45);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
}
#rmResultMask .rs-bal > .rm-balance-ic {
  width: 24px; height: 24px; flex: 0 0 24px; display: block;
  border-radius: 50%; overflow: hidden; background: #241c14;
  border: 1.5px solid rgba(245, 214, 160, .8);
  box-shadow: 0 0 8px rgba(240, 200, 130, .35), inset 0 0 0 1px rgba(0, 0, 0, .25);
}
#rmResultMask .rs-bal > .rm-balance-ic img { display: block; width: 100%; height: 100%; object-fit: cover; }
#rmResultMask .rs-bal > span:not(.rm-balance-ic) { font-size: 13px; color: rgba(243, 237, 227, .6); }
#rmResultMask .rs-bal > b { font-size: 17px; color: #FBEBC8; }
#rmResultMask .rs-top { position: relative; z-index: 3; padding: 0 16px; }
#rmResultMask .rs-av { width: 44px; height: 44px; }
#rmResultMask .rs-av img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   红包雨（页面骨架 · 2026-11-04）
   ========================================================= */
#page-hongbao { background: #14070A; }
#page-hongbao .hb-body {
  top: 0; padding: calc(14px + env(safe-area-inset-top, 0px)) 0 calc(22px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  background:
    radial-gradient(120% 44% at 50% -6%, rgba(200, 40, 50, .34) 0%, rgba(20, 7, 10, 0) 60%),
    radial-gradient(80% 38% at 88% 26%, rgba(255, 176, 90, .10) 0%, rgba(20, 7, 10, 0) 62%),
    linear-gradient(180deg, #1A0A0E 0%, #14070A 55%, #1C0A0C 100%);
}
#page-hongbao .hb-sky { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
#page-hongbao .hb-glow { position: absolute; display: block; border-radius: 50%; filter: blur(34px); }
#page-hongbao .hb-glow.g1 { width: 220px; height: 220px; left: -60px; top: 60px; background: rgba(220, 50, 60, .30); }
#page-hongbao .hb-glow.g2 { width: 200px; height: 200px; right: -70px; top: 180px; background: rgba(255, 140, 60, .18); }
#page-hongbao .hb-glow.g3 { width: 240px; height: 160px; left: 30%; bottom: 30px; background: rgba(255, 190, 90, .14); }

#page-hongbao .hb-top,
#page-hongbao .hb-stage,
#page-hongbao .hb-tips,
#page-hongbao .hb-start,
#page-hongbao .hb-hint { position: relative; z-index: 2; }

/* 顶栏 */
#page-hongbao .hb-top { display: flex; align-items: center; gap: 10px; padding: 0 16px 0 14px; }
#page-hongbao .hb-back {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #FFD9A0;
  background: linear-gradient(180deg, rgba(60, 26, 26, .9), rgba(30, 12, 14, .9));
  border: 1.5px solid rgba(240, 170, 110, .6);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5), 0 0 14px rgba(230, 120, 80, .2);
}
#page-hongbao .hb-back svg { width: 19px; height: 19px; }
#page-hongbao .hb-back:active { transform: scale(.94); }
#page-hongbao .hb-top-txt { flex: 1; min-width: 0; }
#page-hongbao .hb-top-txt h1 {
  font-size: 23px; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(180deg, #FFF3DC 6%, #F6C987 52%, #D98A4B 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#page-hongbao .hb-top-txt p { margin-top: 3px; font-size: 11.5px; color: rgba(255, 226, 210, .5); }
#page-hongbao .hb-bal {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px;
  border-radius: 999px; background: rgba(40, 18, 20, .85);
  border: 1px solid rgba(240, 170, 110, .38);
}
#page-hongbao .hb-coini {
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 16px;
  background: radial-gradient(circle at 34% 30%, #FFF6D8 0%, #F3D083 38%, #C8952F 74%, #8E6420 100%);
  box-shadow: inset 0 0 0 1px rgba(140, 90, 20, .35);
}
#page-hongbao .hb-bal b { font-size: 13px; font-weight: 800; color: #FBE0B4; }

/* 舞台 */
#page-hongbao .hb-stage {
  position: relative; height: 62vh; min-height: 330px; margin: 8px 0 0; overflow: hidden;
}
#page-hongbao .hb-ring {
  position: absolute; left: 50%; top: 46%; width: 250px; height: 250px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1.5px solid rgba(255, 170, 110, .22);
  box-shadow: 0 0 60px rgba(220, 60, 60, .28), inset 0 0 60px rgba(220, 60, 60, .18);
}
#page-hongbao .hb-ring::after {
  content: ''; position: absolute; inset: 26px; border-radius: 50%;
  border: 1px dashed rgba(255, 190, 130, .18);
}
#page-hongbao .hb-center { position: absolute; left: 0; right: 0; top: 44%; transform: translateY(-50%); text-align: center; z-index: 1; pointer-events: none; }
#page-hongbao .hb-logo {
  display: block; width: 104px; height: auto; margin: 0 auto;
  filter: drop-shadow(0 10px 24px rgba(230, 60, 50, .55));
  animation: hbFloat 3.2s ease-in-out infinite;
}
@keyframes hbFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(3deg); } }
#page-hongbao .hb-center h2 {
  margin-top: 10px; font-size: 26px; font-weight: 900; letter-spacing: 4px;
  background: linear-gradient(180deg, #FFF3DC 0%, #FFC98A 46%, #E0743F 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#page-hongbao .hb-center p { margin-top: 8px; font-size: 12.5px; color: rgba(255, 226, 210, .55); letter-spacing: .5px; }

/* 落下的红包 */
#page-hongbao .hb-pkt {
  position: absolute; top: -96px; z-index: 5; width: 46px; height: 58px; border-radius: 9px;
  background: linear-gradient(160deg, #FF5A4E 0%, #E8342C 46%, #B71E1B 100%);
  box-shadow: 0 8px 20px rgba(150, 20, 20, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
  display: flex; align-items: center; justify-content: center;
  will-change: transform, opacity; cursor: pointer;
}
#page-hongbao .hb-pkt::before {
  content: ''; position: absolute; left: -3%; right: -3%; top: -2%; height: 40%;
  border-radius: 9px 9px 50% 50% / 9px 9px 60% 60%;
  background: linear-gradient(180deg, #FF7B62 0%, #EE3B2F 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
#page-hongbao .hb-pkt::after {
  content: '¥'; position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%);
  width: 21px; height: 21px; border-radius: 50%; font-size: 12px; font-weight: 900; color: #9B6A1E;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 34% 30%, #FFF3C9 0%, #F0CB7C 42%, #C79A45 100%);
  box-shadow: 0 2px 6px rgba(120, 20, 20, .45), inset 0 0 0 1px rgba(255, 240, 200, .7);
}
@keyframes hbFall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translate3d(var(--drift, 12px), 78vh, 0) rotate(var(--spin, 70deg)); opacity: .95; }
}
#page-hongbao .hb-pkt.tapped { animation: none; transition: transform .28s ease, opacity .28s ease; transform: scale(1.25) translateY(-8px); opacity: 0; }

/* 要点 */
#page-hongbao .hb-tips { display: flex; gap: 8px; padding: 0 16px; }
#page-hongbao .hb-tip {
  flex: 1; padding: 10px 4px; border-radius: 14px; text-align: center;
  background: rgba(60, 22, 24, .45); border: 1px solid rgba(240, 170, 110, .2);
}
#page-hongbao .hb-tip b { display: block; font-size: 15px; color: #FFCB8A; }
#page-hongbao .hb-tip span { display: block; margin-top: 3px; font-size: 10.5px; color: rgba(255, 226, 210, .45); }

#page-hongbao .hb-start {
  display: block; width: calc(100% - 32px); margin: 14px 16px 0; padding: 16px 0; border-radius: 999px;
  font-size: 20px; font-weight: 900; letter-spacing: 6px; color: #5A1A0C;
  background: linear-gradient(180deg, #FFF0C4 0%, #F8C878 34%, #E88F45 72%, #C46A2A 100%);
  box-shadow: 0 14px 30px rgba(226, 130, 60, .45), inset 0 2px 0 rgba(255, 255, 255, .8), inset 0 -3px 8px rgba(130, 50, 10, .3);
}
#page-hongbao .hb-start:active { transform: scale(.98); }
#page-hongbao .hb-hint { margin: 10px 0 0; text-align: center; font-size: 11px; color: rgba(255, 226, 210, .35); }

/* =========================================================
   红包雨 · 点击特效（2026-11-04）
   ========================================================= */
#page-hongbao .hb-fx { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
#page-hongbao .hb-fx-node { position: absolute; will-change: transform, opacity; }

/* 金色光点爆开 */
#page-hongbao .hb-spark {
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFF9E2 0%, #FBDD8C 46%, #D89A2E 100%);
  box-shadow: 0 0 10px rgba(255, 214, 130, .95);
  animation: hbSpark var(--dur, .62s) cubic-bezier(.16, .74, .3, 1) forwards;
}
@keyframes hbSpark {
  0% { transform: translate(-50%, -50%) scale(.45); opacity: 1; }
  62% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.12); opacity: 0; }
}

/* 红色纸屑 */
#page-hongbao .hb-shard {
  width: 9px; height: 6px; border-radius: 1.5px;
  background: linear-gradient(160deg, #FF7A62, #E0302B 60%, #A81A18);
  box-shadow: 0 1px 4px rgba(120, 10, 10, .55);
  animation: hbShard var(--dur, .78s) cubic-bezier(.2, .7, .35, 1) forwards;
}
@keyframes hbShard {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(.6); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot)) scale(.9); opacity: 0; }
}

/* 冲击光环（双环：白芯 + 金光） */
#page-hongbao .hb-shock {
  width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid #FFF3D2;
  box-shadow: 0 0 18px rgba(255, 226, 160, .95), 0 0 40px rgba(255, 190, 90, .65);
  animation: hbShock .46s cubic-bezier(.08, .82, .28, 1) forwards;
}
#page-hongbao .hb-shock.delay {
  border-color: rgba(255, 205, 120, .95);
  border-width: 2px;
  animation-duration: .62s;
  animation-delay: .07s;
}
@keyframes hbShock {
  0% { transform: translate(-50%, -50%) scale(.18); opacity: 1; }
  60% { opacity: .85; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

/* 中央闪光 */
#page-hongbao .hb-flash {
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 252, 240, .98) 0%, rgba(255, 232, 175, .7) 26%, rgba(255, 190, 100, .28) 48%, transparent 74%);
  animation: hbFlash .34s ease-out forwards;
}
@keyframes hbFlash {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.75); opacity: 0; }
}

/* 飘字金额 */
#page-hongbao .hb-float {
  font-size: 21px; font-weight: 900; letter-spacing: .5px; white-space: nowrap;
  color: #FFE6A8;
  text-shadow: 0 0 14px rgba(255, 190, 90, .9), 0 2px 6px rgba(90, 20, 0, .85);
  animation: hbFloatUp .95s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes hbFloatUp {
  0% { transform: translate(-50%, -50%) scale(.65); opacity: 0; }
  18% { transform: translate(-50%, -64%) scale(1.14); opacity: 1; }
  38% { transform: translate(-50%, -74%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -180%) scale(1); opacity: 0; }
}

/* 点中时红包的弹跳 */
#page-hongbao .hb-pkt.tapped {
  animation: none !important;
  transition: transform .26s cubic-bezier(.2, 1.5, .4, 1), opacity .26s ease;
  transform: scale(1.35) rotate(-8deg);
  opacity: 0;
}

/* =========================================================
   对战中心（新设计 · 2026-11-04）
   ========================================================= */
#page-mall { background: #0E0D11; }
#page-mall .scroll {
  background:
    radial-gradient(80% 30% at 50% 0%, rgba(60, 40, 90, .22) 0%, rgba(14, 13, 17, 0) 66%),
    linear-gradient(180deg, #121116 0%, #0E0D11 46%, #100E13 100%);
}

/* 头图全出血 */
#page-mall .pk7-hero {
  margin: 0; padding: 0; border-radius: 0; overflow: hidden;
  background: none; box-shadow: none;
}
#page-mall .pk7-hero img { display: block; width: 100%; height: auto; }
#page-mall .pk7-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 46px;
  background: linear-gradient(180deg, rgba(14, 13, 17, 0) 0%, rgba(14, 13, 17, .85) 62%, #0E0D11 100%);
  pointer-events: none;
}

/* 入口卡列表 */
#page-mall .pk7-list { display: flex; flex-direction: column; gap: 14px; padding: 2px 16px 26px; }

#page-mall .pk7-card {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px;
  padding: 2px 14px 2px 0; min-height: 128px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(36, 33, 40, .92), rgba(20, 18, 23, .95));
  border: 1px solid rgba(232, 196, 128, .42);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 24px rgba(226, 178, 104, .06);
  text-align: left;
}
#page-mall .pk7-card:active { transform: scale(.985); }
#page-mall .pk7-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 120% at 6% 50%, rgba(255, 90, 90, .16) 0%, rgba(90, 60, 190, .10) 38%, transparent 66%);
}
#page-mall .pk7-card-escape::before {
  background:
    radial-gradient(66% 120% at 8% 52%, rgba(255, 130, 70, .18) 0%, transparent 62%),
    linear-gradient(90deg, rgba(30, 40, 34, .35) 0%, rgba(20, 18, 23, 0) 70%);
}

#page-mall .pk7-art { flex: 0 0 118px; width: 118px; display: flex; align-items: center; justify-content: center; }
#page-mall .pk7-art img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6));
}
#page-mall .pk7-card-escape .pk7-art { flex: 0 0 108px; width: 108px; }
#page-mall .pk7-card-escape .pk7-art img { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .65)) saturate(1.05); }

#page-mall .pk7-txt { flex: 1; min-width: 0; position: relative; z-index: 2; }
#page-mall .pk7-txt b {
  display: block; font-size: 25px; font-weight: 900; letter-spacing: 1.5px; color: #FAF1E0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}
#page-mall .pk7-txt span {
  display: block; margin-top: 8px; font-size: 13.5px; color: rgba(236, 226, 210, .62); letter-spacing: .5px;
}

#page-mall .pk7-go {
  position: relative; z-index: 2; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #F3D79E;
  background: linear-gradient(180deg, rgba(58, 50, 40, .92), rgba(28, 24, 22, .92));
  border: 1.4px solid rgba(238, 196, 128, .7);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5), 0 0 14px rgba(226, 178, 104, .2);
}
#page-mall .pk7-go svg { width: 18px; height: 18px; }

/* =========================================================
   红蓝对抗 / 大逃杀（2026-11-04）
   ========================================================= */
#page-redblue, #page-escape { background: #0D0B11; }
#page-redblue .rb-body, #page-escape .es-body {
  top: 0; overflow-x: hidden;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 0 calc(24px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(100% 40% at 50% -6%, rgba(70, 44, 120, .30) 0%, rgba(13, 11, 17, 0) 62%),
    linear-gradient(180deg, #12101A 0%, #0D0B11 52%, #141018 100%);
}
#page-escape .es-body {
  background:
    radial-gradient(100% 38% at 50% -6%, rgba(120, 46, 40, .26) 0%, rgba(13, 11, 17, 0) 60%),
    linear-gradient(180deg, #15100F 0%, #0D0B11 52%, #161010 100%);
}
.rb-aura, .es-aura { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.rb-aura i, .es-aura i { position: absolute; display: block; border-radius: 50%; filter: blur(38px); }
.rb-aura .a1 { width: 200px; height: 200px; left: -70px; top: 90px; background: rgba(220, 50, 60, .22); }
.rb-aura .a2 { width: 210px; height: 210px; right: -80px; top: 110px; background: rgba(50, 110, 230, .22); }
.es-aura .a1 { width: 220px; height: 180px; left: -80px; top: 80px; background: rgba(230, 110, 60, .18); }
.es-aura .a2 { width: 200px; height: 180px; right: -80px; top: 200px; background: rgba(120, 70, 200, .18); }

/* 顶栏 */
.rb-top, .es-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 0 16px 0 14px; }
.rb-back, .es-back {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #F3D79E;
  background: linear-gradient(180deg, rgba(48, 42, 34, .9), rgba(22, 20, 18, .9));
  border: 1.5px solid rgba(238, 196, 128, .7);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5), 0 0 14px rgba(226, 178, 104, .2);
}
.rb-back svg, .es-back svg { width: 19px; height: 19px; }
.rb-back:active, .es-back:active { transform: scale(.94); }
.rb-top-txt, .es-top-txt { flex: 1; min-width: 0; }
.rb-top-txt h1, .es-top-txt h1 {
  font-size: 24px; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(180deg, #FFF6E4 6%, #F3DCA9 50%, #C79A55 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.rb-top-txt p, .es-top-txt p { margin-top: 3px; font-size: 11.5px; color: rgba(236, 226, 210, .5); }
.rb-bal, .es-bal {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px;
  border-radius: 999px; background: rgba(30, 27, 33, .85); border: 1px solid rgba(232, 196, 128, .38);
}
.rb-bal b, .es-bal b { font-size: 14px; font-weight: 800; color: #FBEBC8; }
.rb-pcoin {
  width: 17px; height: 17px; border-radius: 50%; flex: 0 0 17px; position: relative;
  background: radial-gradient(circle at 34% 30%, #FFF6D8 0%, #F3D083 38%, #C8952F 74%, #8E6420 100%);
  box-shadow: inset 0 0 0 1px rgba(140, 90, 20, .35);
}
.rb-pcoin::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid rgba(255, 246, 214, .75); }
.rb-pcoin.sm { width: 13px; height: 13px; flex: 0 0 13px; }
.rb-pcoin.sm::after { inset: 3px; border-width: .8px; }

/* 倒计时 */
.rb-timer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 6px; }
.rb-timer-ring { position: relative; width: 74px; height: 74px; flex: 0 0 74px; }
.rb-timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rb-timer-ring circle { fill: none; stroke-width: 7; }
.rb-timer-ring .track { stroke: rgba(255, 255, 255, .1); }
.rb-timer-ring .bar { stroke: #F3D08A; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 0; transition: stroke-dashoffset .9s linear; filter: drop-shadow(0 0 6px rgba(243, 208, 138, .55)); }
.rb-timer-ring b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 23px; font-weight: 900; color: #FBEBC8;
}
.rb-timer-txt span { display: block; font-size: 13px; color: rgba(236, 226, 210, .66); }
.rb-timer-txt span b { color: #F3D08A; font-size: 15px; }
.rb-timer-txt em { display: block; margin-top: 3px; font-size: 10.5px; font-style: normal; color: rgba(236, 226, 210, .34); }

/* 红蓝对决 */
.rb-arena { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 16px 4px; }
.rb-side {
  position: relative; flex: 1; padding: 16px 6px 14px; border-radius: 20px; text-align: center; overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, rgba(58, 26, 30, .78), rgba(24, 18, 22, .86));
  transition: all .18s ease;
}
.rb-side.blue { background: linear-gradient(180deg, rgba(24, 40, 74, .78), rgba(18, 20, 26, .86)); }
.rb-side-glow { position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(70% 60% at 50% 20%, rgba(255, 80, 80, .3), transparent 70%); }
.rb-side.blue .rb-side-glow { background: radial-gradient(70% 60% at 50% 20%, rgba(80, 140, 255, .3), transparent 70%); }
.rb-side-badge { position: relative; font-size: 30px; line-height: 1; }
.rb-side b { position: relative; display: block; margin-top: 6px; font-size: 19px; font-weight: 900; color: #FFD9D2; letter-spacing: 1px; }
.rb-side.blue b { color: #CFE4FF; }
.rb-side-total { position: relative; display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 13px; color: rgba(255, 255, 255, .62); }
.rb-side.on { border-color: rgba(243, 208, 138, .85); box-shadow: 0 0 0 1px rgba(243, 208, 138, .35), 0 12px 26px rgba(0, 0, 0, .45), 0 0 24px rgba(243, 208, 138, .25); }
.rb-side.on .rb-side-glow { opacity: .85; }
.rb-vs {
  flex: 0 0 auto; font-size: 15px; font-weight: 900; letter-spacing: 1px; color: #F3D08A;
  text-shadow: 0 0 12px rgba(243, 208, 138, .6);
}

/* 筹码 */
.rb-chips, .es-chips { position: relative; z-index: 2; display: flex; gap: 8px; padding: 12px 16px 0; }
.rb-chip {
  flex: 1; height: 42px; border-radius: 13px; font-size: 15px; font-weight: 800; color: rgba(236, 226, 210, .68);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09);
}
.rb-chip.on {
  color: #43280B; border-color: rgba(255, 240, 206, .9);
  background: linear-gradient(180deg, #FFEDBE 0%, #F5D18E 44%, #DDB066 100%);
  box-shadow: 0 8px 20px rgba(226, 178, 104, .32);
}

/* 主按钮 */
.rb-bet-btn, .es-bet-btn {
  position: relative; z-index: 2; display: block; width: calc(100% - 32px); margin: 14px 16px 0; padding: 16px 0;
  border-radius: 999px; font-size: 19px; font-weight: 900; letter-spacing: 3px; color: #4A2E0C;
  background: linear-gradient(180deg, #FFF0C4 0%, #F8C878 34%, #E88F45 72%, #C46A2A 100%);
  box-shadow: 0 14px 30px rgba(226, 150, 70, .42), inset 0 2px 0 rgba(255, 255, 255, .8), inset 0 -3px 8px rgba(130, 60, 10, .28);
}
.rb-bet-btn:active, .es-bet-btn:active { transform: scale(.98); }
.rb-bet-btn:disabled, .es-bet-btn:disabled { opacity: .6; }
.rb-hint, .es-hint { position: relative; z-index: 2; margin: 10px 0 0; text-align: center; font-size: 11px; color: rgba(236, 226, 210, .35); }

/* 卡片 */
.rb-card, .es-card {
  position: relative; z-index: 2; margin: 16px 16px 0; padding: 14px 12px 10px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(34, 31, 38, .9), rgba(18, 17, 21, .94));
  border: 1px solid rgba(232, 196, 128, .26);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.rb-card-head, .es-card-head { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 8px; }
.rb-card-head h3, .es-card-head h3 { font-size: 15.5px; font-weight: 800; color: #F6EEDF; }
.rb-card-head span, .es-card-head span { font-size: 11.5px; color: rgba(236, 226, 210, .45); }
.rb-empty { padding: 20px 0; text-align: center; font-size: 12px; color: rgba(236, 226, 210, .35); }

.rb-list, .es-list { display: flex; flex-direction: column; gap: 7px; }
.rb-row, .es-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 13px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06);
}
.rb-row .dot, .es-row .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.rb-row .dot.red { background: #FF5A4E; box-shadow: 0 0 8px rgba(255, 90, 78, .8); }
.rb-row .dot.blue { background: #5A9BFF; box-shadow: 0 0 8px rgba(90, 155, 255, .8); }
.rb-row .nm, .es-row .nm { flex: 1; min-width: 0; font-size: 13px; color: #F2EADB; }
.rb-row .nm em, .es-row .nm em { display: block; margin-top: 2px; font-size: 10px; font-style: normal; color: rgba(236, 226, 210, .36); }
.rb-row .val, .es-row .val { font-size: 13.5px; font-weight: 900; }
.rb-row .val.win, .es-row .val.win { color: #4FE79A; }
.rb-row .val.lose, .es-row .val.lose { color: rgba(236, 226, 210, .45); }
.rb-row .val.wait, .es-row .val.wait { color: #F3D08A; }

.rb-history, .es-history { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 6px 6px; }
.rb-hchip, .es-hchip {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800;
}
.rb-hchip.red { color: #FFB9AE; background: rgba(255, 90, 78, .14); border: 1px solid rgba(255, 90, 78, .3); }
.rb-hchip.blue { color: #B7D4FF; background: rgba(90, 155, 255, .14); border: 1px solid rgba(90, 155, 255, .3); }
.es-hchip { color: #F3D08A; background: rgba(243, 208, 138, .12); border: 1px solid rgba(243, 208, 138, .28); }

/* ===== 大逃杀 ===== */
.es-timer {
  position: relative; z-index: 2; display: flex; align-items: baseline; justify-content: center; gap: 7px;
  margin: 14px 0 10px; font-size: 12.5px; color: rgba(236, 226, 210, .55);
}
.es-timer b { font-size: 17px; color: #F3D08A; font-weight: 900; }
.es-timer em { font-size: 11px; font-style: normal; color: rgba(236, 226, 210, .35); }

.es-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px; }
.es-door {
  position: relative; padding: 14px 4px 12px; border-radius: 18px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, rgba(44, 34, 30, .86), rgba(22, 18, 18, .92));
  border: 1.5px solid rgba(255, 255, 255, .09);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: all .16s ease;
}
.es-door::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 18%, rgba(255, 160, 80, .16), transparent 70%);
}
.es-door .num { position: relative; font-size: 11px; color: rgba(236, 226, 210, .45); letter-spacing: 1px; }
.es-door .ic { position: relative; display: block; margin-top: 3px; font-size: 27px; line-height: 1.2; }
.es-door .tot { position: relative; display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 11.5px; color: rgba(236, 226, 210, .55); }
.es-door.on { border-color: rgba(243, 208, 138, .85); box-shadow: 0 0 0 1px rgba(243, 208, 138, .4), 0 12px 26px rgba(0, 0, 0, .45), 0 0 22px rgba(243, 208, 138, .25); }
.es-door.on::before { background: radial-gradient(70% 60% at 50% 18%, rgba(255, 208, 130, .3), transparent 72%); }
.es-door.dead { opacity: .45; filter: grayscale(.7); }
.es-door.alive { border-color: rgba(79, 231, 154, .85); box-shadow: 0 0 0 1px rgba(79, 231, 154, .4), 0 0 24px rgba(79, 231, 154, .3); }
.es-door .mark { position: absolute; right: 7px; top: 7px; font-size: 15px; }

/* =========================================================
   红包雨 · 设计图版（2026-11-04）
   底图 1031x1895（比例 0.5441），运行时按 cover 计算实际盒尺寸，
   所有叠加层用百分比贴着底图定位，保证文字不被拉伸。
   ========================================================= */
#page-hongbao { background: #0A0507; }
#page-hongbao .hb2-wrap { position: absolute; inset: 0; overflow: hidden; }
/* 铺满：宽度拉满，留出刘海高度，其余交给拉伸（底图内容四边都贴边，contain 会留大黑边） */
#page-hongbao .hb2-artbox {
  position: absolute; left: 0; right: 0;
  top: env(safe-area-inset-top, 0px); bottom: 0;
  overflow: hidden;
}
#page-hongbao .hb2-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; display: block; user-select: none; -webkit-user-drag: none;
}

/* 落红包层 */
#page-hongbao .hb2-rain {
  position: absolute; inset: 0; z-index: 3; overflow: hidden;
  /* 顶部（标题区）淡出，红包从标题下方渐显，别糊住"红包雨"三个字 */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 17%, #000 31%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 17%, #000 31%);
}

/* 交互层 */
#page-hongbao .hb2-ui { position: absolute; inset: 0; z-index: 5; }
#page-hongbao .hb2-hot {
  position: absolute; border: 0; padding: 0; background: transparent;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
#page-hongbao .hb2-hot:active { background: rgba(255, 236, 208, .07); }

/* 返回 */
#page-hongbao .hb2-back { left: 5.33%; top: 2.11%; width: 8.24%; height: 4.49%; border-radius: 50%; }

/* 余额：底图数字已抹掉，这里放实时数字 */
#page-hongbao .hb2-wallet { left: 72.2%; top: 2.9%; width: 21.4%; height: 4.3%; border-radius: 999px; }
#page-hongbao .hb2-bal-num {
  position: absolute; left: 79.1%; top: 3.45%; width: 13.8%; height: 3.9%;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
#page-hongbao .hb2-bal-num b {
  font-size: calc(var(--artw, 393px) * .0465);
  font-weight: 700; color: #FFF3DE; letter-spacing: 0; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 0 8px rgba(255, 214, 150, .25);
  transform-origin: center center;
}

/* 中央红包（底图上的那只） */
#page-hongbao .hb2-packet { left: 39.6%; top: 37.4%; width: 23.5%; height: 17.2%; border-radius: 6%; }

/* 抢红包大按钮：透明热点，按下给一层金光 */
#page-hongbao .hb2-start { left: 4.36%; top: 85.91%; width: 91.17%; height: 8.55%; border-radius: 999px; }
#page-hongbao .hb2-start { z-index: 6; }

/* 旧版 .page.sub 的进场动画会留下 transform，导致内部 fixed 层错位，这里关掉 */
#page-hongbao.page.sub { animation: none; }
#page-hongbao .hb2-start:active {
  background: radial-gradient(60% 120% at 50% 40%, rgba(255, 248, 226, .38), rgba(255, 206, 130, .16) 60%, transparent 84%);
  box-shadow: 0 0 26px rgba(255, 190, 100, .5);
}

/* 落下的红包：跟设计图同一套质感（红漆金边 + 福印） */
#page-hongbao .hb2-rain .hb-pkt {
  top: -90px; width: 42px; height: 54px; border-radius: 8px;
  background: linear-gradient(160deg, #F2544A 0%, #C81F22 52%, #8E1116 100%);
  border: 1px solid rgba(233, 186, 113, .55);
  box-shadow: 0 8px 18px rgba(90, 5, 8, .6), inset 0 1px 0 rgba(255, 220, 190, .35);
  animation-name: hb2Fall;
}
#page-hongbao .hb2-rain .hb-pkt::before {
  height: 42%;
  background: linear-gradient(180deg, #FF8A72 0%, #E0382F 64%, #C0231F 100%);
  border-bottom: 1px solid rgba(240, 200, 130, .28);
}
#page-hongbao .hb2-rain .hb-pkt::after {
  content: '福'; width: 20px; height: 20px; border-radius: 50%;
  font-size: 11.5px; font-weight: 800; color: #8C2015;
  background: radial-gradient(circle at 34% 30%, #FFF2C8 0%, #EFC983 44%, #C08A36 100%);
  box-shadow: 0 1px 5px rgba(90, 10, 8, .55), inset 0 0 0 1px rgba(255, 240, 200, .8);
}
@keyframes hb2Fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate3d(var(--drift, 14px), var(--fall, 76vh), 0) rotate(var(--spin, 60deg)); opacity: .96; }
}

/* =========================================================
   对战中心 v8（2026-11-06）：整幅主视觉 + 设计图图标
   ========================================================= */
#page-mall .pk8-hero { margin-top: 0; }
#page-mall .pk8-hero img { width: 100%; height: auto; display: block; }
#page-mall .pk8-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 54px;
  background: linear-gradient(180deg, rgba(14, 13, 17, 0) 0%, rgba(14, 13, 17, .55) 46%, #0E0D11 100%);
  pointer-events: none;
}
#page-mall .pk8-list { gap: 17px; padding: 0 18px 26px; margin-top: -4px; }
#page-mall .pk8-list .pk7-card { min-height: 112px; border-radius: 18px; padding-right: 14px; }
#page-mall .pk8-list .pk7-art { flex: 0 0 120px; width: 120px; }
#page-mall .pk8-list .pk7-card-escape .pk7-art { flex: 0 0 114px; width: 114px; }
#page-mall .pk8-list .pk7-txt b { font-size: 25px; letter-spacing: 1.2px; }
#page-mall .pk8-list .pk7-txt span { margin-top: 7px; font-size: 13.5px; color: rgba(238, 228, 212, .66); }
/* v8 微调：图标略收，卡片更贴近设计图比例 */
#page-mall .pk8-list { gap: 16px; margin-top: -8px; }
#page-mall .pk8-list .pk7-card { min-height: 112px; }
#page-mall .pk8-list .pk7-art { flex: 0 0 110px; width: 110px; }
#page-mall .pk8-list .pk7-card-escape .pk7-art { flex: 0 0 104px; width: 104px; }

/* =========================================================
   我的页 v2（2026-11-06）：金冠头像 + 四格资产 + 金色图标
   ========================================================= */
.mine-wallet2 {
  margin: 12px 16px 0;
  padding: 0;
  border-radius: 18px;
  border: 1.5px solid rgba(233, 196, 130, .55);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 22px rgba(226, 178, 104, .10),
              inset 0 1px 0 rgba(255, 246, 220, .10);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(38, 31, 24, .96), rgba(22, 18, 14, .97));
}
.mine-wallet2 .mine-profile {
  border-bottom: 1px solid rgba(226, 186, 116, .28);
  padding: 16px 16px 15px;
}
.mine-wallet2 .mp-avatar {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: visible;
  box-shadow: 0 6px 16px rgba(0,0,0,.5);
}
.mine-wallet2 .mp-avatar::before {
  content: ''; position: absolute; inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, #8f6b2c, #f7e1aa, #b9832c, #ffeec4, #8f6b2c);
  -webkit-mask: radial-gradient(circle, transparent 0 93%, #000 93.5%);
          mask: radial-gradient(circle, transparent 0 93%, #000 93.5%);
}
.mine-wallet2 .mp-avatar img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: #2a2119;
  object-fit: cover;
}
.mine-wallet2 .mp-crown {
  position: absolute; left: 50%; top: -13px; z-index: 2;
  width: 34px; height: 19px;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.75));
}
.mine-wallet2 .mp-info h2 { font-size: 19px; color: #FFF6E4; }
.mine-wallet2 .mine-lv {
  color: #3A2708;
  background: linear-gradient(180deg, #FFE7AE, #DDAF5C);
  border: 1px solid rgba(255, 236, 186, .8);
  font-weight: 800;
}
.mine-wallet2 .mp-info p { color: #9E968A; }

.mine-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; padding: 12px 12px 14px;
}
.mine-stats .ms-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  padding: 16px 2px 13px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(44, 37, 28, .92), rgba(26, 21, 16, .94));
  border: 1px solid rgba(226, 186, 116, .38);
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .10), 0 6px 16px rgba(0,0,0,.35);
  transition: transform .15s ease, border-color .15s ease;
}
.mine-stats .ms-tile::before {
  content: ''; position: absolute; left: 50%; top: -5px;
  width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, #FFF0C6, #C08A34);
  border: 1px solid rgba(90, 56, 14, .6);
  box-shadow: 0 0 8px rgba(255, 190, 100, .55);
}
.mine-stats .ms-tile:active { transform: scale(.96); border-color: rgba(255, 220, 150, .7); }
.mine-stats .ms-tile b {
  font-size: 19px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFF7DC 0%, #FFDC8B 44%, #DCA94E 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(56, 32, 4, .85));
}
.mine-stats .ms-tile span { font-size: 10.5px; color: #A79C8B; letter-spacing: .2px; white-space: nowrap; }

/* 我的订单图标：金色圆章 + 金色线性图标 */
.mine-page .o-ic {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(70% 70% at 50% 34%, rgba(255, 238, 196, .22), rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, #6B5426 0%, #4A3A1A 48%, #2A2110 100%);
  border: 1.6px solid rgba(240, 203, 134, .85);
  box-shadow: 0 0 0 2px rgba(60, 40, 12, .5), inset 0 1px 0 rgba(255, 244, 210, .35),
              0 6px 14px rgba(0, 0, 0, .45);
}
.mine-page .o-ic img {
  width: 23px; height: 23px; object-fit: contain;
  filter: brightness(1.55) saturate(0) sepia(1) saturate(4.5) hue-rotate(-12deg) brightness(1.12)
          drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
}
.mine-page .o-badge { top: -2px; right: -2px; }

/* 常用功能：金色描边圆角方块 + 金色线性图标 */
.mine-page .func-grid button > img,
.mine-page .func-grid button > svg {
  width: 22px; height: 22px;
  padding: 13px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(58, 48, 32, .55), rgba(26, 21, 15, .72));
  border: 1.4px solid rgba(226, 186, 116, .55);
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .12), 0 6px 14px rgba(0, 0, 0, .35);
  filter: sepia(1) saturate(3.2) hue-rotate(-12deg) brightness(1.12);
}
.mine-page .func-grid button > svg { stroke: #EBC98A; filter: drop-shadow(0 0 4px rgba(255, 200, 110, .35)); }
.mine-page .func-grid span { color: #D8CBB4; }

/* ===== 随机矿机：三箱轮播 + 金色标题（2026-11-06） ===== */
#page-mining .rm-chests {
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 10px;
  padding: 2px 10px 0;
}
#page-mining .rm-chest img { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .65)); }
#page-mining .rm-stage-title {
  position: relative; z-index: 2;
  margin: 2px auto 0; width: 74%; padding: 7px 0 9px;
  text-align: center;
  font-family: "Songti SC", "STSong", serif;
  font-size: 21px; font-weight: 900; letter-spacing: .34em; text-indent: .34em;
  background: linear-gradient(180deg, #FFF8E1 0%, #FFDF9C 40%, #E0AC50 74%, #B27C24 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(50, 28, 0, .85)) drop-shadow(0 0 14px rgba(255, 190, 90, .35));
}
#page-mining .rm-stage-title::before,
#page-mining .rm-stage-title::after {
  content: ''; position: absolute; top: 50%; width: 18%; height: 1px;
  background: linear-gradient(90deg, rgba(240, 205, 140, 0), rgba(240, 205, 140, .85));
}
#page-mining .rm-stage-title::before { left: 2%; }
#page-mining .rm-stage-title::after { right: 2%; transform: scaleX(-1); }
#page-mining .rm-dots i { cursor: pointer; transition: width .2s, background .2s; }

/* 我的页 v2.1：图标金色化（保留细节）+ 底部留白 */
.mine-page .o-ic img {
  filter: grayscale(1) sepia(1) saturate(3.4) hue-rotate(-12deg) brightness(.92) contrast(1.25)
          drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}
.mine-page .func-grid button > img {
  filter: grayscale(1) sepia(1) saturate(4.2) hue-rotate(-10deg) brightness(1.06) contrast(1.1)
          drop-shadow(0 0 4px rgba(255, 200, 110, .30));
}
.mine-page .func-grid button > svg {
  stroke: #EBC98A;
  filter: drop-shadow(0 0 4px rgba(255, 200, 110, .35));
}
.mine-page .func-grid button > svg [stroke="#7cd267"] { stroke: #EBC98A; }
.mine-page .scroll { padding-bottom: 150px; }
/* 团购/收益中心图标：保留原配色，只加投影 */
.mine-duo .t-group img { filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)) saturate(1.06); }
.mine-duo .t-income img { filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)) saturate(1.08); }

/* 我的页 v3（2026-11-06）：设计图抠出的实拍金色素材 */
.mine-wallet2 .mp-avatar {
  width: 70px; height: 79px; border-radius: 0; overflow: visible; box-shadow: none;
  margin-top: 2px;
}
.mine-wallet2 .mp-avatar::before { display: none; }
.mine-wallet2 .mp-avatar img {
  width: 100%; height: 100%; border-radius: 0; background: none; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
}
.mine-wallet2 .mp-crown { display: none; }

/* 「我的」头像：点击更换（2026-11-09） */
.mine-wallet2 .mp-avatar {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, filter .15s ease;
}
.mine-wallet2 .mp-avatar:active { transform: scale(.94); }
.mine-wallet2 .mp-avatar:focus-visible {
  outline: 2px solid rgba(255, 218, 150, .85);
  outline-offset: 4px;
  border-radius: 14px;
}
.mine-wallet2 .mp-av-edit {
  position: absolute; right: -2px; bottom: 2px; z-index: 3;
  width: 21px; height: 21px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #4A3008; pointer-events: none;
  background: linear-gradient(180deg, #FFE9B8, #DCA94E);
  border: 1.5px solid rgba(255, 243, 210, .9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.mine-wallet2 .mp-av-edit svg { width: 12px; height: 12px; display: block; }

/* 用户上传的头像：圆形裁切 + 金环（默认金冠熊抠图自带金框，不用这套） */
.mine-wallet2 .mp-avatar.photo {
  width: 64px; height: 64px; border-radius: 50%;
}
.mine-wallet2 .mp-avatar.photo::before {
  display: block; content: ''; position: absolute; inset: -2.5px;
  border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 200deg, #8f6b2c, #f7e1aa, #b9832c, #ffeec4, #8f6b2c);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 89%, #000 90%);
          mask: radial-gradient(circle closest-side, transparent 0 89%, #000 90%);
  filter: drop-shadow(0 0 6px rgba(255, 200, 110, .35));
}
.mine-wallet2 .mp-avatar.photo img {
  width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
  background: #2a2119; filter: none;
}
.mine-wallet2 .mp-avatar.photo .mp-av-edit { right: -3px; bottom: -3px; }

/* 订单：直接用设计图金章 */
.mine-page .o-ic {
  width: 48px; height: 48px; border-radius: 0; background: none; border: 0; box-shadow: none;
}
.mine-page .o-ic img {
  width: 100%; height: 100%; object-fit: contain; filter: none;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45));
}
.mine-page .o-badge { top: -1px; right: -1px; }

/* 常用功能：直接用设计图金框图标 */
.mine-page .func-grid button > img,
.mine-page .func-grid button > svg {
  width: 46px; height: 42px;
  padding: 0; border-radius: 0; background: none; border: 0; box-shadow: none;
  filter: drop-shadow(0 5px 11px rgba(0, 0, 0, .42));
}
.mine-page .func-grid button > svg { display: none; }
.mine-page .func-grid span { color: #D9CBB2; }

/* 双卡插画 */
.mine-duo .hm-tile img { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); }
.mine-duo .t-group img { width: 84px; height: 86px; object-fit: contain; }
.mine-duo .t-income img { width: 104px; height: 73px; object-fit: contain; }

/* 随机矿机 v3（2026-11-06）：6 个宝箱一次展示 + 设计图标题 */
#page-mining .rm-stage { padding: 2px 0 14px; }
#page-mining .rm-chests {
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 12px;
  padding: 0 12px;
}
#page-mining .rm-chest span { font-size: 12px; margin-bottom: 0; }
#page-mining .rm-chest img {
  width: 88%; margin: 0 auto;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .6));
}
#page-mining .rm-stage-title { margin-top: 4px; width: 78%; }
#page-mining .rm-stage-ring { bottom: 2px; height: 64px; opacity: .75; }
#page-mining .rm-tier-card { margin-top: 6px; }

/* ===== 随机矿机 v4（2026-11-06）：设计稿美工素材 ===== */
#page-mining .rm-stage {
  position: relative; margin: 4px 0 0; padding: 0 0 18px;
}
#page-mining .rm-stage::before { display: none; }
#page-mining .rm-chests {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px 4px; padding: 0 10px;
}
#page-mining .rm-chest {
  display: flex; flex-direction: column; align-items: center;
  padding: 0; background: none; border: 0;
}
#page-mining .rm-chest::before { display: none; }
#page-mining .rm-chest span {
  position: relative; z-index: 2;
  margin-bottom: -4px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  background: linear-gradient(180deg, #FFF7E2 0%, #FFE0A6 44%, #D9A54E 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(44, 24, 0, .9));
}
#page-mining .rm-chest img {
  position: relative; z-index: 1;
  width: 82%; height: auto; display: block;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .62));
}
/* 弧形金色台沿：压在宝箱下方 */
#page-mining .rm-arc {
  position: relative; z-index: 1;
  display: block; width: 104%; margin: -12% 0 2px -2%;
  pointer-events: none;
  opacity: .9;
}
/* 「神秘宝箱」金字贴图（6 箱布局下不再使用） */
#page-mining .rm-stage-title-art { display: none; }
#page-mining .rm-stage-ring { display: none; }
#page-mining .rm-tier-card { margin-top: 10px; }

/* =========================================================
   一币暴富 v2（2026-11-06）：设计图整幅主视觉 + 胶囊 tab
   ========================================================= */
#page-group.fl2-page, #page-group.fl2-page .scroll { background: #0d0b10; }
#page-group .fl2-hero { margin: 0; padding: 0; line-height: 0; }
#page-group .fl2-hero img { width: 100%; height: auto; display: block; }

#page-group .fl2-tabs {
  display: flex; gap: 8px; margin: 14px 16px 0; padding: 5px;
  border-radius: 999px; position: relative; z-index: 2;
  background: linear-gradient(180deg, rgba(32, 28, 24, .96), rgba(16, 14, 12, .97));
  border: 1px solid rgba(226, 186, 116, .42);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 240, 205, .08);
}
#page-group .fl2-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 44px; border-radius: 999px; background: none; border: 0;
  font-size: 15px; font-weight: 800; letter-spacing: .04em; color: #9A9184;
  transition: background .2s, color .2s, box-shadow .2s;
}
#page-group .fl2-tab svg { width: 17px; height: 17px; }
#page-group .fl2-tab.on {
  color: #3A2306;
  background: linear-gradient(180deg, #FFEFC4 0%, #F0CE86 46%, #D9AC5C 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 4px 12px rgba(210, 160, 70, .30);
}

#page-group .fl2-list { display: flex; flex-direction: column; gap: 10px; padding: 8px 14px 0; }
#page-group .fl2-card {
  position: relative; padding: 7px 13px 8px; border-radius: 18px;
  background:
    radial-gradient(70% 60% at 50% 34%, rgba(255, 200, 120, .08), rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, rgba(30, 26, 23, .96), rgba(16, 13, 11, .97));
  border: 1.4px solid rgba(226, 186, 116, .38);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 243, 214, .08);
}
#page-group .fl2-head { display: flex; align-items: center; justify-content: space-between; }
#page-group .fl2-cost { display: flex; align-items: baseline; gap: 6px; }
#page-group .fl2-cost b {
  font-size: 22px; font-weight: 900; line-height: 1;
  background: linear-gradient(180deg, #FFF9E4 0%, #FFDE9A 44%, #E0AC52 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(50, 28, 0, .9));
}
#page-group .fl2-cost span { font-size: 12px; color: #C6AE83; font-weight: 700; }
#page-group .fl2-rules {
  display: flex; align-items: center; gap: 4px; padding: 0; background: none; border: 0;
  font-size: 12.5px; font-weight: 700; color: #D9C6A2;
}
#page-group .fl2-rules svg { width: 15px; height: 15px; opacity: .9; }
#page-group .fl2-rules i { font-style: normal; color: #8C8073; font-size: 15px; margin-left: 1px; }

#page-group .fl2-art { display: flex; justify-content: center; padding: 0; }
#page-group .fl2-art img {
  width: 56%; max-width: 200px; height: auto; display: block;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .7));
}

#page-group .fl2-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: #9C9184; letter-spacing: .02em;
}
#page-group .fl2-pool { white-space: nowrap; }
#page-group .fl2-pool b {
  color: #FFDDA0; font-weight: 800; font-size: 14px; margin: 0 2px;
  font-variant-numeric: tabular-nums;
}
#page-group .fl2-cd { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 11px; }
#page-group .fl2-cd .dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  border: 1.4px solid rgba(214, 200, 176, .55);
  position: relative;
}
#page-group .fl2-cd .dot::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 1.2px; height: 4px;
  background: rgba(214, 200, 176, .7); transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(0deg);
}
#page-group .fl2-cd b {
  color: #FFDDA0; font-weight: 800; font-size: 13px; margin: 0 2px;
  font-variant-numeric: tabular-nums;
}

/* 三档配色（2026-11-07）：金 / 冰蓝 / 赤红
   —— 宝箱按序号取图（JS），卡片底与按钮用设计稿抠出的皮肤图
   （assets/fl2/btn_gold|btn_blue|btn_red.webp，838×136，含金色描边与大理石填充） */
#page-group .fl2-btn {
  width: 100%;
  height: auto;
  aspect-ratio: 832 / 125;
  margin-top: 6px;
  border: 0;
  border-radius: 0;
  background: url(../assets/fl2/btn_gold.webp) center / 100% 100% no-repeat;
  box-shadow: none;
  font-family: inherit;
  font-size: 17px; font-weight: 900; letter-spacing: .10em;
  color: #FFEFC8;
  -webkit-text-stroke: .6px rgba(66, 36, 4, .92);
  text-shadow:
    0 1px 0 rgba(255, 246, 222, .9),
    0 2px 2px rgba(48, 26, 0, .9),
    0 0 10px rgba(255, 196, 96, .55);
  transition: transform .12s ease, filter .12s ease;
}
#page-group .fl2-btn:active { transform: scale(.985); filter: brightness(1.06); }
#page-group .fl2-btn:disabled { opacity: .7; }

#page-group .fl2-card:nth-child(3n+2) {
  border-color: rgba(120, 178, 240, .34);
  background:
    radial-gradient(70% 60% at 50% 34%, rgba(90, 165, 255, .10), rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, rgba(26, 30, 40, .96), rgba(14, 16, 22, .97));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(196, 226, 255, .10);
}
#page-group .fl2-card:nth-child(3n+2) .fl2-btn {
  background-image: url(../assets/fl2/btn_blue.webp);
  text-shadow:
    0 1px 0 rgba(226, 242, 255, .9),
    0 2px 2px rgba(0, 14, 40, .9),
    0 0 10px rgba(120, 190, 255, .55);
}
#page-group .fl2-card:nth-child(3n) {
  border-color: rgba(240, 130, 110, .36);
  background:
    radial-gradient(70% 60% at 50% 34%, rgba(255, 100, 70, .10), rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, rgba(38, 24, 22, .96), rgba(22, 13, 12, .97));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 208, 196, .10);
}
#page-group .fl2-card:nth-child(3n) .fl2-btn {
  background-image: url(../assets/fl2/btn_red.webp);
  text-shadow:
    0 1px 0 rgba(255, 230, 222, .9),
    0 2px 2px rgba(40, 0, 0, .9),
    0 0 10px rgba(255, 140, 110, .55);
}

#page-group .fl2-empty {
  padding: 40px 0; text-align: center; font-size: 13.5px; color: #8C8175;
}
#page-group .fl2-empty span { display: block; margin-top: 8px; font-size: 11.5px; color: #635B52; }

/* 一币暴富：分类面板显隐（2026-11-07 修复）
   旧版只写了 .fl-panel 的隐藏规则，v2 结构改成了 .fl2-panel 却没补规则，
   结果「熊币暴富 / 实物暴富」两个面板同时渲染，点 tab 只亮不切内容。 */
#page-group .fl2-panel { display: none; }
#page-group .fl2-panel.on { display: block; }

/* 实物暴富占位：做成卡片，切换过来不会像"页面空了" */
/* 实物暴富商品卡（后台可上传图片） */
#page-group .fg-list { gap: 12px; padding: 12px 14px 0; }
#page-group .fg-card {
  display: flex; gap: 12px; padding: 10px;
  border-radius: 16px;
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(255, 200, 120, .07), rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, rgba(30, 26, 23, .96), rgba(16, 13, 11, .97));
  border: 1.4px solid rgba(226, 186, 116, .34);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 243, 214, .07);
}
#page-group .fg-pic {
  position: relative; flex: 0 0 100px; width: 100px; height: 100px;
  border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .05);
}
#page-group .fg-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
#page-group .fg-noimg {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #7A7166;
}
#page-group .fg-sold {
  position: absolute; inset: auto 0 0 0; padding: 3px 0; text-align: center;
  font-size: 11px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .62);
}
#page-group .fg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
#page-group .fg-name {
  font-size: 14.5px; font-weight: 800; color: #F4E3C2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 实物暴富：参与说明 / 上期中奖者（一行小字，超长省略） */
#page-group .fg-sub {
  margin: 3px 0 0;
  font-size: 10.5px; color: #B8A98F;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#page-group .fg-bar {
  height: 6px; margin: 6px 0 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); overflow: hidden;
}
#page-group .fg-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #FFD98C, #E8A33C);
  box-shadow: 0 0 8px rgba(255, 180, 70, .5);
}
#page-group .fg-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: #9C9184;
}
#page-group .fg-buy {
  margin-top: 8px; width: 100%; height: 36px; border: 0; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 900; letter-spacing: .04em;
  color: #3B2405;
  background: linear-gradient(180deg, #FFF0C2 0%, #F3D080 22%, #DCA64A 56%, #B9802C 100%);
  box-shadow: 0 0 0 2px rgba(120, 82, 24, .45), inset 0 2px 0 rgba(255, 255, 255, .7),
             inset 0 -3px 8px rgba(120, 70, 10, .35);
  text-shadow: 0 1px 0 rgba(255, 240, 200, .6);
  transition: transform .12s ease, filter .12s ease;
}
#page-group .fg-buy:active { transform: scale(.98); filter: brightness(1.05); }
#page-group .fg-buy:disabled { opacity: .55; }
#page-group .fg-card.sold { opacity: .72; }

#page-group .fl2-panel[data-flp="real"] > .fl2-empty {
  margin: 16px;
  padding: 46px 20px;
  border-radius: 18px;
  font-size: 14px;
  color: #B8A98F;
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(255, 200, 120, .07), rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, rgba(30, 26, 23, .96), rgba(16, 13, 11, .97));
  border: 1.4px solid rgba(226, 186, 116, .34);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 243, 214, .07);
}
#page-group .fl2-panel[data-flp="real"] > .fl2-empty span {
  margin-top: 10px;
  font-size: 12.5px;
  color: #8A7E6C;
}

/* 玩法弹窗条目 */
.fl2-rule-list { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.fl2-rule-item {
  padding: 11px 13px; border-radius: 10px; font-size: 13px; line-height: 1.62;
  color: #F2E3C4; text-align: left;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(226, 186, 116, .16);
}
.fl2-rule-item .no { color: #FFD071; font-weight: 900; margin-right: 6px; }
.fl2-rule-item b { color: #FFD071; }

/* 红包雨：底图抹掉旧副标题后，用 HTML 补一行（跟随底图宽度缩放） */
.hb2-artbox .hb2-sub {
  position: absolute; left: 0; right: 0; top: 21.6%;
  text-align: center; pointer-events: none;
  font-family: "Songti SC", "STSong", serif;
  font-size: calc(var(--artw, 393px) * .036);
  font-weight: 700; letter-spacing: .10em;
  color: #E8D6BE;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .85), 0 0 14px rgba(255, 150, 60, .30);
}

/* =========================================================
   随机矿机 v5（2026-11-06）：设计图 6 命名宝箱
   ========================================================= */
#page-mining .mining-body { padding-top: 0; }
#page-mining .rm-hero { position: relative; margin: 0; line-height: 0; }
#page-mining .rm-hero img { width: 100%; height: auto; display: block; }
#page-mining .rm-back2 {
  position: absolute; left: 3.4%; top: 10%;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(60% 60% at 50% 36%, rgba(70, 55, 32, .8), rgba(10, 9, 7, .85) 78%);
  border: 1.5px solid rgba(238, 200, 132, .75);
  box-shadow: 0 0 0 2px rgba(60, 40, 12, .5), 0 6px 16px rgba(0, 0, 0, .6);
  color: #F7E1B0;
}
#page-mining .rm-back2 svg { width: 20px; height: 20px; }
#page-mining .rm-av2 {
  position: absolute; right: 3.4%; top: 9%;
  width: 54px; height: 54px; border-radius: 50%;
  overflow: hidden; border: 2px solid rgba(238, 200, 132, .8);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .6), 0 0 16px rgba(255, 190, 90, .28);
  background: #1a1410;
}
#page-mining .rm-av2 img { width: 100%; height: 100%; object-fit: cover; }

#page-mining .rm-balrow2 { display: flex; justify-content: flex-end; padding: 8px 16px 2px; margin-top: -18px; position: relative; z-index: 3; }
#page-mining .rm-bal2 {
  display: flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 16px 0 8px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(34, 29, 23, .96), rgba(16, 13, 11, .97));
  border: 1px solid rgba(226, 186, 116, .5);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 240, 205, .10);
}
#page-mining .rm-bal2 .ic { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none; }
#page-mining .rm-bal2 .ic img { width: 100%; height: 100%; object-fit: cover; }
#page-mining .rm-bal2 > span { font-size: 13px; color: #CBBCA4; }
#page-mining .rm-bal2 b { font-size: 19px; font-weight: 900; color: #FFE9BC; font-variant-numeric: tabular-nums; }

/* 胶囊 tab */
#page-mining .rm-tabs2 { display: flex; gap: 12px; padding: 10px 16px 4px; }
#page-mining .rm-tabs2 .rm-tab {
  flex: 1; height: 52px; border-radius: 999px;
  font-size: 17px; font-weight: 800; letter-spacing: .04em;
  color: #9C9184; background: linear-gradient(180deg, rgba(30, 26, 22, .85), rgba(14, 12, 10, .9));
  border: 1.4px solid rgba(226, 186, 116, .22);
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .05);
}
#page-mining .rm-tabs2 .rm-tab.on {
  color: #FFE7B0;
  background: linear-gradient(180deg, rgba(46, 36, 24, .95), rgba(22, 17, 12, .96));
  border-color: rgba(247, 214, 150, .85);
  box-shadow: 0 0 0 1px rgba(90, 62, 20, .6), inset 0 0 18px rgba(255, 190, 90, .18),
              0 0 18px rgba(255, 175, 70, .35);
}

/* 6 宝箱舞台 */
#page-mining .rm-stage2 {
  position: relative; padding: 6px 10px 4px;
  background:
    radial-gradient(70% 50% at 50% 20%, rgba(120, 92, 48, .22), rgba(10, 9, 12, 0) 70%),
    linear-gradient(180deg, #0d0b0f 0%, #0a090c 60%, #0d0b0f 100%);
  overflow: hidden;
}
#page-mining .rm-six {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px 2px;
}
#page-mining .rm-six .rm-chest {
  display: flex; flex-direction: column; align-items: center;
  padding: 0; background: none; border: 0;
}
#page-mining .rm-six .rm-chest::before { display: none; }
#page-mining .rm-six .rm-chest img {
  width: 92%; height: auto; display: block;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .7));
}
#page-mining .rm-six .rm-chest span {
  margin-top: 2px;
  font-size: 13px; font-weight: 800; letter-spacing: .04em;
  color: #F2E3C4; text-shadow: 0 2px 8px rgba(0, 0, 0, .9), 0 0 12px rgba(255, 170, 60, .2);
}
#page-mining .rm-six .rm-chest.hit img { animation: rmChestPop .5s ease; }

/* 档位卡 / 记录卡：贴近设计图 */
#page-mining .rm-tier-card { margin: 14px 16px 0; }
#page-mining .rm-record-card { margin: 14px 16px 0; }

/* =========================================================
   设置页 v2（2026-11-06）：设计图金色主题
   ========================================================= */
#page-settings.settings-page { background: #0a0809; }
#page-settings .subbar {
  position: relative;
  background:
    radial-gradient(70% 160% at 50% -40%, rgba(255, 190, 90, .22), rgba(10, 8, 9, 0) 72%),
    linear-gradient(180deg, #191310 0%, #0d0a0a 100%);
  border-bottom: 1px solid rgba(226, 186, 116, .18);
}
#page-settings .subbar-txt h1 {
  font-family: "Songti SC", "STSong", serif;
  font-size: 23px; font-weight: 900; letter-spacing: .18em; text-indent: .18em;
  background: linear-gradient(180deg, #FFF6D8 0%, #FFE1A0 40%, #E6B45C 72%, #B47C2A 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(46, 26, 0, .9)) drop-shadow(0 0 12px rgba(255, 190, 90, .3));
}
#page-settings .subbar .back {
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 34%, rgba(74, 58, 34, .92), rgba(12, 10, 8, .95) 80%);
  border: 1.6px solid rgba(240, 203, 134, .85);
  box-shadow: 0 0 0 2px rgba(60, 40, 12, .5), 0 6px 16px rgba(0, 0, 0, .6),
              0 0 16px rgba(255, 180, 70, .22);
  color: #FFE7B4;
}
#page-settings .subbar .back svg { width: 20px; height: 20px; }

#page-settings .sub-body {
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(70, 52, 30, .30), rgba(10, 8, 9, 0) 70%),
    #0a0809;
  min-height: calc(100% - 60px);
}
#page-settings .set-card {
  background: linear-gradient(180deg, rgba(34, 29, 24, .96), rgba(19, 16, 13, .97));
  border: 1.3px solid rgba(226, 186, 116, .42);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 243, 214, .07);
  overflow: hidden;
}
#page-settings .set-row { border-bottom: 1px solid rgba(226, 186, 116, .16); }
#page-settings .set-row:not(.static):active { background: rgba(255, 200, 120, .08); }
#page-settings .set-lb {
  font-family: "Songti SC", "STSong", serif;
  font-size: 16px; font-weight: 900; letter-spacing: .04em;
  color: #F6E6C6;
}
#page-settings .set-val { font-size: 14px; color: #C9B995; }
#page-settings .set-avatar {
  width: 44px; height: 44px;
  border: 2px solid rgba(240, 203, 134, .8);
  box-shadow: 0 0 12px rgba(255, 180, 70, .3);
}
#page-settings .chev { color: #E9C57F; width: 17px; height: 17px; }

/* 退出登录：红色描边胶囊 */
#page-settings .btn-logout-big {
  height: 56px; border-radius: 999px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 19px; font-weight: 900; letter-spacing: .16em; text-indent: .16em;
  color: #FF8A72;
  background: linear-gradient(180deg, rgba(34, 16, 12, .96), rgba(14, 8, 7, .97));
  border: 1.6px solid rgba(242, 132, 96, .78);
  box-shadow: 0 0 0 2px rgba(70, 24, 12, .55), inset 0 0 22px rgba(255, 90, 60, .14),
              0 10px 24px rgba(0, 0, 0, .5);
  text-shadow: 0 0 12px rgba(255, 110, 70, .45);
}
#page-settings .btn-logout-big:active { filter: brightness(1.1); }

/* =========================================================
   底部导航 v2（2026-11-06）：设计图金色风格
   ========================================================= */
.tabbar.pill-nav {
  height: calc(68px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(70% 120% at 50% 120%, rgba(80, 60, 32, .55), rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, #14110f 0%, #0d0b0a 100%);
  border-top: 1px solid rgba(226, 186, 116, .22);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .65);
}
.tabbar.pill-nav a { color: #7B7268; gap: 5px; }
.tabbar.pill-nav a .tb-ic { width: 23px; height: 23px; }
.tabbar.pill-nav a .tb-ic svg { width: 23px; height: 23px; }
.tabbar.pill-nav a em {
  font-size: 10px; letter-spacing: .04em; color: #8C8377; font-weight: 500;
}
.tabbar.pill-nav a.on { color: #F0CD8A; }
.tabbar.pill-nav a.on em { color: #FFE7B6; font-weight: 800; }
.tabbar.pill-nav a.on .tb-ic {
  filter: drop-shadow(0 0 8px rgba(255, 190, 90, .55));
}
/* 选中项：顶部一道金色小光条 */
.tabbar.pill-nav a.on::before {
  content: ''; position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 214, 140, 0), #FFD98C, rgba(255, 214, 140, 0));
  box-shadow: 0 0 10px rgba(255, 190, 90, .8);
}
/* 中间金币：金色立体 + 光环 */
.tabbar.pill-nav .coin-btn {
  width: 54px; height: 54px; top: -26px;
  background:
    radial-gradient(circle at 34% 26%, #FFFDF0 0%, #FFF0C4 18%, #F2CE7A 42%, #CD9F45 70%, #9A6E22 100%);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, .62),
    0 0 0 2px rgba(255, 240, 200, .55),
    0 0 22px rgba(255, 190, 90, .45);
}
.tabbar.pill-nav .coin-btn svg { width: 47px; height: 47px; }
.tabbar.pill-nav a.trade em { color: #FFE7B6; font-weight: 800; }
.tabbar.pill-nav a.trade ::before,
.tabbar.pill-nav a.trade::before { display: none; }

/* 底部导航：图标金色（未选中偏灰金，选中亮金） */
.tabbar.pill-nav a .tb-ic svg [fill="currentColor"] { fill: currentColor; }
.tabbar.pill-nav a .tb-ic svg path[stroke="currentColor"] { stroke: currentColor; }

/* =========================================================
   底部导航 v3（2026-11-06）：设计图金色版
   ========================================================= */
.tabbar.pill-nav {
  height: calc(72px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #17130f 0%, #0e0b09 100%);
  border-top: 0;
  box-shadow: 0 -14px 34px rgba(0, 0, 0, .7);
}
/* 顶部金线（中间被凸台打断） */
.tabbar.pill-nav::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg,
    rgba(226, 186, 116, 0) 0%,
    rgba(226, 186, 116, .55) 12%,
    rgba(245, 214, 150, .9) 50%,
    rgba(226, 186, 116, .55) 88%,
    rgba(226, 186, 116, 0) 100%);
}
/* 中间凸台：包住金币的半圆 */
.tabbar.pill-nav .nav-bump {
  position: absolute; left: 50%; top: -30px;
  transform: translateX(-50%);
  width: 76px; height: 40px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, #17130f 0%, #0e0b09 100%);
  border: 1.4px solid rgba(240, 205, 140, .75);
  border-bottom: 0;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 240, 205, .16);
  z-index: 1;
  pointer-events: none;
}
.tabbar.pill-nav a { z-index: 2; }
.tabbar.pill-nav a .tb-ic { width: 26px; height: 26px; }
.tabbar.pill-nav a .tb-ic svg { width: 26px; height: 26px; }
.tabbar.pill-nav a em {
  font-family: "Songti SC", "STSong", serif;
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  color: #C8A868;
}
.tabbar.pill-nav a.on em { color: #FFE3AB; }
.tabbar.pill-nav a.on::before { display: none; }

/* 中间金币：更大更亮，坐在凸台里 */
.tabbar.pill-nav a.trade { flex: 0 0 84px; }
.tabbar.pill-nav .coin-btn {
  width: 70px; height: 70px; top: -32px;
  background: none;
  box-shadow: none;
}
.tabbar.pill-nav .coin-btn svg {
  width: 70px; height: 70px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .6)) drop-shadow(0 0 14px rgba(255, 190, 90, .40));
}
.tabbar.pill-nav a.trade::after { width: 26px; height: 26px; }

/* =========================================================
   我的钱包 v2（2026-11-06）：设计图金色版
   ========================================================= */
/* 注意：不能无条件 display:flex，否则未激活时会盖住整个应用（2026-11-06 修复） */
#page-wallet.wallet-page2 { background: #0a0808; }
#page-wallet.wallet-page2.on { display: flex; flex-direction: column; }
#page-wallet .wl-head {
  position: relative; flex: none;
  height: 108px; padding: 0 16px;
  display: flex; align-items: center;
  background:
    radial-gradient(60% 120% at 50% -10%, rgba(255, 200, 110, .30), rgba(10, 8, 8, 0) 66%),
    radial-gradient(70% 90% at 20% 0%, rgba(255, 180, 80, .14), rgba(10, 8, 8, 0) 70%),
    linear-gradient(180deg, #1a1310 0%, #0d0a09 100%);
  border-bottom: 1px solid rgba(226, 186, 116, .18);
}
#page-wallet .wl-back {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(60% 60% at 50% 34%, rgba(60, 48, 30, .8), rgba(10, 8, 7, .9) 80%);
  border: 1.4px solid rgba(240, 205, 140, .6);
  color: #FFE7B4;
}
#page-wallet .wl-back svg { width: 19px; height: 19px; }
#page-wallet .wl-head h1 {
  position: absolute; left: 0; right: 0; text-align: center;
  font-family: "Songti SC", "STSong", serif;
  font-size: 25px; font-weight: 900; letter-spacing: .10em; text-indent: .10em;
  background: linear-gradient(180deg, #FFFBE9 0%, #FFE2A4 36%, #E9B558 68%, #B27B24 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(50, 28, 0, .9)) drop-shadow(0 0 14px rgba(255, 190, 90, .35));
  pointer-events: none;
}
#page-wallet .wl-body {
  flex: 1; overflow-y: auto;
  padding: 14px 16px 24px;
  background:
    radial-gradient(80% 30% at 50% 0%, rgba(64, 46, 26, .28), rgba(10, 8, 8, 0) 70%),
    #0a0808;
}

/* 金熊大卡 */
#page-wallet .wl-hero {
  position: relative;
  display: flex; align-items: center;
  min-height: 118px;
  padding: 12px 16px 12px 8px;
  border-radius: 20px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, #221d18 0%, #14100d 100%) padding-box,
    linear-gradient(150deg, #6d5020 0%, #e9c57f 18%, #8f6b2c 36%, #f7e1aa 56%, #8f6b2c 78%, #6d5020 100%) border-box;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 243, 214, .08);
}
#page-wallet .wl-bear {
  width: 96px; height: 106px; flex: none;
  object-fit: contain; display: block;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .65));
}
#page-wallet .wl-hero-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
}
#page-wallet .wl-num {
  font-size: 46px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFBE9 0%, #FFE3A6 34%, #EFBE63 66%, #B87E28 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(52, 30, 0, .9)) drop-shadow(0 0 18px rgba(255, 190, 90, .35));
}
#page-wallet .wl-meta {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  width: 100%; font-size: 13px; color: #EFE0C4;
}
#page-wallet .wl-meta > span { white-space: nowrap; }
#page-wallet .wl-tip {
  color: #EFD39A;
  font-variant-numeric: tabular-nums;
}

/* 金框胶囊 tab */
#page-wallet .wl-tabs {
  display: flex; margin: 16px 0 4px; gap: 6px;
  padding: 5px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(28, 24, 20, .95), rgba(15, 12, 10, .96));
  border: 1px solid rgba(226, 186, 116, .26);
}
#page-wallet .wl-tabs button {
  flex: 1; height: 46px; border-radius: 999px; border: 1.4px solid transparent;
  font-family: "Songti SC", "STSong", serif;
  font-size: 16.5px; font-weight: 900; letter-spacing: .06em;
  color: #9A9184; background: none;
  transition: color .2s, background .2s, border-color .2s;
}
#page-wallet .wl-tabs button.on {
  color: #FFEBC0;
  background: linear-gradient(180deg, rgba(52, 42, 28, .9), rgba(24, 19, 14, .95));
  border-color: rgba(247, 214, 150, .88);
  box-shadow: 0 0 0 1px rgba(90, 62, 20, .55), inset 0 0 16px rgba(255, 190, 90, .16),
              0 0 16px rgba(255, 175, 70, .28);
}

/* 交易行 */
#page-wallet .wl-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
#page-wallet .wl-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(30, 26, 22, .96), rgba(17, 14, 11, .97));
  border: 1px solid rgba(226, 186, 116, .26);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 243, 214, .05);
}
#page-wallet .wl-coin {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background:
    radial-gradient(circle at 36% 30%, #FFF4CC 0%, #F2D189 34%, #D2A24A 66%, #9C6E22 100%);
  border: 2px solid rgba(120, 82, 24, .55);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .55);
  position: relative;
}
#page-wallet .wl-coin svg {
  position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px);
}
#page-wallet .wl-mid { flex: 1; min-width: 0; }
#page-wallet .wl-mid h4 {
  font-size: 16px; font-weight: 900; color: #F7E9CC;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .01em;
}
#page-wallet .wl-mid p {
  margin-top: 5px; font-size: 12.5px; color: #8E8375;
  font-variant-numeric: tabular-nums;
}
#page-wallet .wl-val {
  flex: none; font-size: 19px; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
#page-wallet .wl-val.in { color: #FFD583; text-shadow: 0 0 12px rgba(255, 190, 90, .45); }
#page-wallet .wl-val.out { color: #FF7A63; text-shadow: 0 0 10px rgba(255, 100, 70, .35); }

#page-wallet .wl-sub { display: none; }

/* =========================================================
   我的团队 v2（2026-11-06）：设计图金色版
   ========================================================= */
#page-team.team-page { background: #0a0808; }
#page-team .subbar {
  background:
    radial-gradient(70% 150% at 50% -50%, rgba(255, 190, 90, .26), rgba(10, 8, 8, 0) 70%),
    linear-gradient(180deg, #181210 0%, #0c0a09 100%);
  border-bottom: 1px solid rgba(226, 186, 116, .18);
}
#page-team .subbar-txt h1 {
  font-family: "Songti SC", "STSong", serif;
  font-size: 23px; font-weight: 900; letter-spacing: .14em; text-indent: .14em;
  background: linear-gradient(180deg, #FFF6D8 0%, #FFE1A0 40%, #E6B45C 72%, #B47C2A 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(46, 26, 0, .9)) drop-shadow(0 0 12px rgba(255, 190, 90, .3));
}
#page-team .subbar .back {
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 34%, rgba(74, 58, 34, .92), rgba(12, 10, 8, .95) 80%);
  border: 1.6px solid rgba(240, 203, 134, .85);
  box-shadow: 0 0 0 2px rgba(60, 40, 12, .5), 0 6px 16px rgba(0, 0, 0, .6),
              0 0 16px rgba(255, 180, 70, .22);
  color: #FFE7B4;
}
#page-team .subbar .back svg { width: 20px; height: 20px; }
#page-team .subbar-right { color: #E3C98F; font-weight: 700; }
#page-team .sub-body {
  background:
    radial-gradient(90% 30% at 50% 0%, rgba(72, 52, 28, .28), rgba(10, 8, 8, 0) 70%),
    #0a0808;
}
/* 顶部主卡 */
#page-team .team-card {
  position: relative; overflow: hidden;
  border-radius: 20px;
  padding: 20px 16px 0;
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, #201b16 0%, #12100d 100%) padding-box,
    linear-gradient(150deg, #6d5020 0%, #e9c57f 18%, #8f6b2c 36%, #f7e1aa 56%, #8f6b2c 78%, #6d5020 100%) border-box;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 243, 214, .08);
}
/* 背景暗纹双熊 */
#page-team .team-card-bg {
  position: absolute; inset: auto 0 0 0; height: 62%;
  pointer-events: none; opacity: .07;
  background:
    radial-gradient(28% 60% at 18% 70%, #FFE0A6, transparent 70%),
    radial-gradient(28% 60% at 82% 70%, #FFE0A6, transparent 70%);
}
#page-team .team-top { position: relative; z-index: 1; }
#page-team .lv-hex { width: 84px; height: 84px; }
#page-team .lv-txt {
  position: absolute; top: 0; left: 0; right: 0;
  height: 84px; display: flex; align-items: center; justify-content: center;
  font-size: 27px; font-weight: 900; letter-spacing: .5px;
  color: #FFE2A6;
  text-shadow: 0 1px 0 rgba(40, 22, 0, .9);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
#page-team .lv-crown {
  position: absolute; left: 50%; top: -12px; transform: translateX(-50%);
  width: 44px; height: 22px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .7));
}
#page-team .lv-crown svg { width: 100%; height: 100%; display: block; }
#page-team .lv-box { width: 104px; }
#page-team .lv-cap { margin-top: 8px; font-size: 13px; color: #E4D2AE; font-weight: 700; }

#page-team .perf-col span { font-size: 13.5px; color: #E4D2AE; font-weight: 600; }
#page-team .perf-col b {
  font-size: 27px; font-weight: 900;
  background: linear-gradient(180deg, #FFF6D8 0%, #FFDD96 46%, #DCA84E 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(50, 28, 0, .9));
  font-variant-numeric: tabular-nums;
}
#page-team .perf-sep {
  background: linear-gradient(180deg, transparent, rgba(226, 186, 116, .45), transparent);
}

#page-team .team-grid {
  position: relative; z-index: 1;
  margin-top: 18px;
  border: 1px solid rgba(226, 186, 116, .30);
  border-radius: 14px;
  background: rgba(255, 220, 160, .02);
}
#page-team .tg-cell { padding: 18px 0 16px; }
#page-team .tg-cell:nth-child(odd) { border-right: 1px solid rgba(226, 186, 116, .22); }
#page-team .tg-cell:nth-child(-n+2) { border-bottom: 1px solid rgba(226, 186, 116, .22); }
#page-team .tg-cell b {
  font-size: 25px; font-weight: 900;
  background: linear-gradient(180deg, #FFF6D8 0%, #FFDD96 46%, #DCA84E 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(50, 28, 0, .9));
  font-variant-numeric: tabular-nums;
}
#page-team .tg-cell span { font-size: 12px; color: #CDBB9C; }

#page-team .team-foot {
  position: relative; z-index: 1;
  margin: 0 -16px; padding: 16px;
  border-top: 1px solid rgba(226, 186, 116, .24);
  font-size: 14.5px; font-weight: 800; color: #F2E2C2;
}
#page-team .team-foot b {
  font-size: 17px; font-weight: 900;
  background: linear-gradient(180deg, #FFF6D8 0%, #FFDD96 46%, #DCA84E 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(50, 28, 0, .9));
}

/* 直推好友 */
#page-team .team-sec-head { margin: 24px 2px 12px; }
#page-team .team-sec-head h3 {
  font-family: "Songti SC", "STSong", serif;
  font-size: 19px; font-weight: 900; letter-spacing: .04em;
  color: #F6E6C6;
}
#page-team .team-sec-head h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 34px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #FFE0A0, #C9974A);
  box-shadow: 0 0 8px rgba(255, 190, 90, .5);
}

#page-team .team-search {
  height: 46px; border-radius: 13px;
  background: rgba(28, 24, 19, .9);
  border: 1px solid rgba(226, 186, 116, .34);
}
#page-team .team-search:focus-within { border-color: rgba(247, 214, 150, .8); }
#page-team .team-search input { font-size: 14px; color: #F2E2C2; }
#page-team .team-search input::placeholder { color: #7C7264; }
#page-team .team-search svg { color: #C9A867; }

/* 好友卡片 */
#page-team .member {
  padding: 16px 16px 4px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(30, 26, 22, .96), rgba(17, 14, 11, .97));
  border: 1px solid rgba(226, 186, 116, .30);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 243, 214, .05);
}
#page-team .member-av {
  width: 54px; height: 54px;
  border: 2px solid rgba(240, 203, 134, .85);
  box-shadow: 0 0 12px rgba(255, 180, 70, .28);
  background: #1d1814;
}
#page-team .member-mid h4 { font-size: 17px; font-weight: 900; color: #F6E6C6; }
#page-team .member-id { color: #A2947F; }
#page-team .copy-btn { color: #C9A867; }
#page-team .member-lv .lv-hex { width: 46px; height: 46px; display: block; }
#page-team .member-lv .lv-txt {
  position: absolute; left: 0; right: 0; top: 0;
  height: 46px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #FFE2A6;
  text-shadow: 0 1px 0 rgba(40, 22, 0, .9);
  pointer-events: none; transform: none;
}
#page-team .member-lv span { font-size: 11px; color: #B7A68B; }

/* 团队好友卡：佣金行金色（第三列「全游戏佣金」保留绿色高亮，与设计图一致） */
#page-team .member-stats {
  margin-top: 14px; padding-top: 15px;
  border-top: 1px solid rgba(226, 186, 116, .22);
}
#page-team .member-stats div + div { border-left: 1px solid rgba(226, 186, 116, .18); }
#page-team .member-stats span { font-size: 12.5px; color: #CDBB9C; }
#page-team .member-stats b {
  font-size: 21px; font-weight: 900;
  background: linear-gradient(180deg, #FFF6D8 0%, #FFDD96 46%, #DCA84E 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(50, 28, 0, .9));
  font-variant-numeric: tabular-nums;
}
/* 全游戏佣金保持绿色（设计图里只有它是绿色） */
#page-team .member-stats div:nth-child(3) b {
  background: none; -webkit-text-fill-color: #7DDD5E; color: #7DDD5E;
  filter: drop-shadow(0 0 8px rgba(110, 230, 90, .35));
}


/* 我的邀请人：整幅设计图页（2026-11-06） */
#page-inviter.inviter-page2 {
  background: #08070a;
  overflow: hidden;
}
#page-inviter .iv2-scroll {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
#page-inviter .iv2-full {
  display: block; width: 100%; height: auto;
  pointer-events: none;
}
/* 返回热区：对应设计图左上角圆形返回键 */
#page-inviter .iv2-back {
  position: absolute; left: 3.4%; top: 0.75%;
  width: 10.6%; aspect-ratio: 1; height: auto;
  border: 0; background: transparent; border-radius: 50%;
  z-index: 3; -webkit-tap-highlight-color: transparent;
}
#page-inviter .iv2-back:active { background: rgba(255, 210, 140, .14); }

/* =========================================================
   我的团队 v3（2026-11-06）：设计图美工级素材
   ========================================================= */
#page-team .team-top {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 4px;
  padding: 6px 0 0;
}
#page-team .lv-box {
  width: auto; position: relative;
  display: flex; flex-direction: column; align-items: center;
}
#page-team .lv-throne {
  position: relative;
  width: 124px; height: 138px;
  display: flex; align-items: center; justify-content: center;
}
#page-team .lv-throne-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .7));
}
#page-team .lv-throne .lv-txt {
  position: absolute; left: 50%; top: 53%;
  transform: translate(-50%, -50%);
  height: auto;
  font-size: 27px; font-weight: 900; letter-spacing: .5px;
  color: #FFE7B4;
  text-shadow: 0 2px 0 rgba(30, 18, 2, .95), 0 0 12px rgba(255, 190, 90, .5);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
#page-team .lv-cap {
  margin-top: -26px; position: relative; z-index: 2;
  font-family: "Songti SC", "STSong", serif;
  font-size: 13.5px; font-weight: 800; color: #EFDCB4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

/* 左右业绩金板 */
#page-team .perf-plate {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 128px; justify-self: center;
  aspect-ratio: 158 / 130;
}
#page-team .perf-plate img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .65));
}
#page-team .pp-inner {
  position: absolute; left: 0; right: 0; top: 52%;
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
}
#page-team .pp-inner span {
  font-family: "Songti SC", "STSong", serif;
  font-size: 14.5px; font-weight: 900; letter-spacing: .04em;
  color: #5B3A0C;
  text-shadow: 0 1px 0 rgba(255, 240, 200, .75);
}
#page-team .pp-inner b {
  font-family: "Songti SC", "STSong", serif;
  font-size: 30px; font-weight: 900; line-height: 1;
  background: linear-gradient(180deg, #FFF6D2 0%, #FFE3A2 40%, #DCA94E 74%, #A9701F 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1.5px 0 rgba(70, 40, 4, .9)) drop-shadow(0 0 8px rgba(255, 200, 110, .35));
  font-variant-numeric: tabular-nums;
}
/* 卡片里的暗纹熊（设计稿两角） */
#page-team .team-card-bg {
  position: absolute; left: 0; right: 0; top: 0; height: 42%;
  pointer-events: none; display: flex; justify-content: space-between;
  padding: 3.5% 2.5% 0; opacity: .85;
}
#page-team .team-card-bg img {
  width: 20%; max-width: 84px; height: auto; object-fit: contain;
  filter: none;
}
#page-team .team-grid { margin-top: 14px; }

/* =========================================================
   邀请好友 v2（2026-11-06）：三张设计图 · 低消耗轮播
   —— 整页只有 img + 邀请码文字 + 透明热区，无 subbar / 无 canvas 背景重绘
   ========================================================= */
#page-invite.invite2 {
  background: #08070b;
  overflow: hidden;
}
#page-invite .iv2-track {
  display: flex;
  height: 100%;
  width: 300%;
  transform: translateX(0);
  transition: transform .32s cubic-bezier(.22, .9, .3, 1);
  will-change: transform;
}
#page-invite .iv2-track.drag { transition: none; }

#page-invite .ivs {
  position: relative;
  flex: 0 0 33.3333%;
  width: 33.3333%;
  height: 100%;
  overflow: hidden;
  touch-action: pan-y;      /* 横向手势交给我们，纵向留给浏览器（否则 touchmove 被收走） */
}
#page-invite .ivs > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;              /* 和矿脉探索/红包雨一致：满版美术铺满 */
  pointer-events: none;
  -webkit-user-drag: none;
}

/* 邀请码（真数据，叠在抹空的胶囊里） */
#page-invite .ivs-code {
  position: absolute;
  left: 26.75%;
  top: 78.73%;
  transform: translateY(-50%);
  transform-origin: left center;   /* scaleX 校正字宽时以左边为锚点 */
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  font-weight: 700;
  font-size: 18.2px;
  line-height: 1;
  letter-spacing: .2px;
  white-space: nowrap;
  color: #fde093;
  background: linear-gradient(180deg, #fff0b8 0%, #fbd98f 55%, #edbf70 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(66, 32, 0, .85)) drop-shadow(0 0 8px rgba(255, 176, 60, .35));
  pointer-events: none;
  z-index: 2;
}
#page-invite .ivs2 .ivs-code { left: 26.38%; top: 77.26%; font-size: 18.7px; }
#page-invite .ivs3 .ivs-code { left: 26.93%; top: 73.94%; font-size: 20.6px; }

/* 透明热区：返回 / 保存 / 分享（位置按各张设计图实测） */
#page-invite .ivs-back {
  position: absolute; z-index: 3;
  border: 0; background: transparent; border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
#page-invite .ivs-back:active { background: rgba(255, 210, 140, .14); }
#page-invite .ivs1 .ivs-back { left: 2.76%; top: 2.55%; width: 9.74%; height: 5.34%; }
#page-invite .ivs2 .ivs-back { left: 3.40%; top: 1.54%; width: 9.28%; height: 5.05%; }
#page-invite .ivs3 .ivs-back { left: 3.40%; top: 1.59%; width: 9.56%; height: 5.14%; }

#page-invite .ivs-hit {
  position: absolute; z-index: 3;
  border: 0; background: transparent; border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s ease;
}
#page-invite .ivs-hit:active { background: rgba(255, 230, 170, .10); }

#page-invite .ivs1 [data-inv-save]  { left: 4.87%; top: 88.61%; width: 43.57%; height: 6.68%; }
#page-invite .ivs1 [data-inv-share] { left: 52.39%; top: 88.61%; width: 43.01%; height: 6.63%; }
#page-invite .ivs2 [data-inv-save]  { left: 7.17%; top: 85.96%; width: 41.54%; height: 6.11%; }
#page-invite .ivs2 [data-inv-share] { left: 53.13%; top: 85.96%; width: 40.26%; height: 6.11%; }
#page-invite .ivs3 [data-inv-save]  { left: 7.45%; top: 81.11%; width: 40.99%; height: 6.54%; }
#page-invite .ivs3 [data-inv-share] { left: 52.48%; top: 81.11%; width: 40.72%; height: 6.54%; }

/* 轮播圆点 */
#page-invite .iv2-dots {
  position: absolute; left: 0; right: 0; bottom: 1.4%;
  display: flex; justify-content: center; gap: 6px;
  z-index: 4; pointer-events: none;
}
#page-invite .iv2-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 226, 172, .30);
  transition: width .22s ease, background .22s ease;
}
#page-invite .iv2-dots i.on {
  width: 14px; border-radius: 3px;
  background: linear-gradient(90deg, #ffe9ae, #e8b463);
}

/* =========================================================
   社交信息 v2（2026-11-06）：整幅设计图 + 输入框热区 + 金色保存按钮热区
   —— 低消耗：无 subbar、无列表卡片，1 张图 + 2 个 input + 2 个透明热区
   ========================================================= */
#page-social.social2 {
  background: #07070a;
  overflow: hidden;
  animation: none;                 /* 去掉 .page.sub 的 translateX 进场，避免 fixed/百分比漂移 */
}
#page-social .soc2-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  touch-action: manipulation;
}
#page-social .soc2-art > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;                /* 满版美术：和邀请/红包雨同一套铺满策略 */
  pointer-events: none;
  -webkit-user-drag: none;
}

/* 返回：设计图左上角圆形返回键（实测 7,0-218,192 → 取圆形本体） */
#page-social .soc2-back {
  position: absolute; z-index: 3;
  left: 3.0%; top: 0.8%;
  width: 11.5%; aspect-ratio: 1; height: auto;
  border: 0; background: transparent; border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
#page-social .soc2-back:active { background: rgba(255, 210, 140, .14); }

/* 两个输入框：透明 label 盖在金色框上，里面的 input 透明无边框 */
#page-social .soc2-hit {
  position: absolute; z-index: 4;
  display: block;
  border-radius: 3.2vw;
}
/* 设计图实测：框 1 = x45..1042, y414..616；框 2 = x45..1042, y657..859（1088×2048） */
#page-social .soc2-hit1 { left: 4.14%; top: 20.21%; width: 91.64%; height: 9.86%; }
#page-social .soc2-hit2 { left: 4.14%; top: 32.08%; width: 91.64%; height: 9.86%; }

#page-social .soc2-hit input {
  width: 100%; height: 100%;
  padding: 0 5% 0 17.6%;             /* 左边留出图标宽度（设计稿文字起点 x=221） */
  border: 0; outline: 0;
  background: transparent;
  font-size: 5.3vw;                  /* 设计稿数字高 38px / 2048 → 15.8px @852 屏 */
  font-weight: 500;
  letter-spacing: -.012em;           /* 设计稿是窄体字，默认字体略宽，轻微收一下 */
  color: #fff;
  caret-color: #ffd98a;
}
#page-social .soc2-hit2 input { font-size: 4.45vw; }   /* QQ 那行数字高 32px，比第一行小 */
#page-social .soc2-hit input::placeholder {
  color: rgba(255, 255, 255, .34);
  font-weight: 500;
  font-size: 3.6vw;
}

/* 保存按钮：设计图实测 x45..1042, y922..1066 */
#page-social .soc2-save {
  position: absolute; z-index: 4;
  left: 4.14%; top: 45.02%;
  width: 91.64%; height: 7.03%;
  border: 0; background: transparent; border-radius: 3.4vw;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, filter .14s ease;
}
#page-social .soc2-save:active { transform: scale(.985); filter: brightness(1.07); }

/* ---------------------------------------------------------
   邀请好友轮播：改用原生横向滚动 + scroll-snap（2026-11-06 二次修复）
   —— 之前用 transform 自算位移，微信 X5 / 部分安卓 WebView 上滑不动
   --------------------------------------------------------- */
#page-invite .iv2-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  transform: none !important;              /* 覆盖旧的 translateX 方案 */
  transition: none !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;          /* 不触发浏览器的左右返回手势 */
  touch-action: pan-x;
  scrollbar-width: none;
}
#page-invite .iv2-track::-webkit-scrollbar { display: none; }
#page-invite .iv2-track.drag { scroll-snap-type: none; }

#page-invite .ivs {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  touch-action: pan-x;                     /* 横向交给原生滚动，纵向页面本来就不滚 */
}

/* 圆点：真机必须可点（父层是 pointer-events:none） */
#page-invite .iv2-dots { pointer-events: none; }
#page-invite .iv2-dots i {
  pointer-events: auto;
  position: relative;
  cursor: pointer;
}
#page-invite .iv2-dots i::after {          /* 扩大点击热区到 26px，视觉仍是 5px 小点 */
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 26px;
  transform: translate(-50%, -50%);
}

/* =========================================================
   官方社群（2026-11-06）：数据来自后台，金框卡片动态渲染
   —— 顶部主视觉从设计稿裁出；卡片/按钮用 CSS 还原金色质感
   ========================================================= */
#page-groups.groups-page {
  background: #23221e;
  overflow: hidden;
  animation: none;                 /* 去掉 .page.sub 的 translateX 进场 */
}
#page-groups .gq-scroll {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(120% 42% at 50% 0%, #302b24 0%, #23221e 58%, #1b1916 100%);
  padding-top: env(safe-area-inset-top, 0px);
  scrollbar-width: none;
}
#page-groups .gq-scroll::-webkit-scrollbar { display: none; }
#page-groups .gq-hero {
  position: relative;
  width: 100%;
}
#page-groups .gq-hero > img {
  display: block;
  width: 100%; height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}
#page-groups .gq-back {
  position: absolute;
  left: 2.0%; top: 6.0%;
  width: 10.2%; aspect-ratio: 1; height: auto;
  border: 0; border-radius: 50%;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
#page-groups .gq-back:active { background: rgba(255, 226, 170, .16); }

#page-groups .gq-list {
  padding: 2px 13px 120px;
}
#page-groups .gq-empty {
  padding: 46px 0;
  text-align: center;
  font-size: 13px;
  color: #8f8474;
}

/* 卡片：外层金边 + 内层暗金线 + 深色渐变底 */
#page-groups .gq-card {
  position: relative;
  margin-bottom: 13px;
  padding: 14px 13px 13px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 235, 195, .08) 0%, rgba(255, 235, 195, 0) 26%),
    linear-gradient(180deg, #2b2721 0%, #1c1916 55%, #24201b 100%);
  box-shadow:
    0 0 0 1.4px rgba(226, 184, 112, .78),
    inset 0 0 0 4px rgba(8, 6, 4, .55),
    inset 0 0 0 5px rgba(226, 184, 112, .26),
    0 9px 22px rgba(0, 0, 0, .46);
}
#page-groups .gq-card.full {
  box-shadow:
    0 0 0 1.4px rgba(180, 160, 128, .55),
    inset 0 0 0 4px rgba(8, 6, 4, .55),
    inset 0 0 0 5px rgba(180, 160, 128, .18),
    0 9px 22px rgba(0, 0, 0, .42);
}
#page-groups .gq-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
#page-groups .gq-avatar {
  flex: 0 0 62px;
  width: 62px; height: 62px;
  border-radius: 50%;
  overflow: hidden;
  background: #17130f;
  box-shadow:
    0 0 0 1.5px rgba(232, 190, 120, .92),
    0 0 10px rgba(255, 178, 74, .30);
}
#page-groups .gq-avatar img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
#page-groups .gq-name-row {
  flex: 1; min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px;
}
#page-groups .gq-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1.28;
  background: linear-gradient(180deg, #fff6da 0%, #edc982 52%, #b7823b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5));
}
#page-groups .gq-card.full .gq-name {
  background: linear-gradient(180deg, #ece5d6 0%, #c9bca5 58%, #94866f 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
#page-groups .gq-name-row .gq-full {
  font-size: 12.5px;
  color: #8c8983;
  font-weight: 600;
}
#page-groups .gq-body {
  margin-top: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border-radius: 8px;
  background: linear-gradient(180deg, #221f1a 0%, #191612 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 0 0 1px rgba(210, 170, 105, .20);
}
#page-groups .gq-qq {
  flex: 1; min-width: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .4px;
  color: #f3d69b;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 9px rgba(255, 178, 74, .25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#page-groups .gq-actions {
  display: flex;
  gap: 7px;
  flex: 0 0 auto;
}
#page-groups .gq-copy,
#page-groups .gq-join {
  height: 32px;
  padding: 0 11px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .12s ease;
}
#page-groups .gq-copy {
  color: #efd19a;
  background: linear-gradient(180deg, #3b342a 0%, #241f19 100%);
  border: 1px solid rgba(226, 184, 112, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
#page-groups .gq-join {
  color: #3a2205;
  background: linear-gradient(180deg, #ffedb8 0%, #f2c36b 52%, #c88d36 100%);
  border: 1px solid #f7d99d;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}
#page-groups .gq-card.full .gq-copy {
  filter: grayscale(1);
  opacity: .62;
}
#page-groups .gq-copy:active,
#page-groups .gq-join:active {
  transform: scale(.96);
  filter: brightness(.96);
}

/* =========================================================
   会员等级 v2（2026-11-06）：整幅设计图 + 叠加动态数字（低消耗）
   —— 设计稿 1216×2080；金色卡片/六边形/图标全是美术，只有数字与进度条是 HTML
   ========================================================= */
#page-level.level2 {
  background: #0b0908;
  overflow: hidden;
  animation: none;                 /* 去掉 .page.sub 的 translateX 进场，避免百分比漂移 */
}
#page-level .lv2-scroll {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #0b0908;
  scrollbar-width: none;
}
#page-level .lv2-scroll::-webkit-scrollbar { display: none; }
#page-level .lv2-art { position: relative; width: 100%; }
#page-level .lv2-art > img {
  display: block; width: 100%; height: auto;
  pointer-events: none; -webkit-user-drag: none;
}

#page-level .lv2-back {
  position: absolute; z-index: 4;
  left: 3.62%; top: 1.78%;
  width: 9.13%; aspect-ratio: 1; height: auto;
  border: 0; background: transparent; border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
#page-level .lv2-back:active { background: rgba(255, 214, 150, .13); }

/* 我的等级（卡片左上）：数值和位置由 build/calibrate 脚本按设计稿反推 */
#page-level .lv2-name {
  position: absolute; z-index: 3;
  left: 8.55%; top: 16.06%;
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  font-weight: 900;
  font-size: 11.32vw;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
  transform-origin: left top;
  transform: scaleX(0.663);
  background: linear-gradient(180deg, #fff6d6 0%, #f5d78d 42%, #d9a94b 72%, #b8832c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(60, 30, 0, .85)) drop-shadow(0 0 12px rgba(255, 190, 80, .45));
}

/* 等级权益百分比 */
#page-level .lv2-rate {
  position: absolute; z-index: 3;
  left: 39.88%; top: 23.54%;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 9.80vw;
  line-height: 1;
  white-space: nowrap;
  transform-origin: left top;
  transform: scaleX(0.591);
  background: linear-gradient(180deg, #fff3c4 0%, #f6d583 45%, #d9a63f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(60, 30, 0, .8)) drop-shadow(0 0 10px rgba(255, 180, 70, .4));
}

/* 六边形内的等级：银白渐变字 */
#page-level .lv2-hex {
  position: absolute; z-index: 3;
  left: 68.42%; top: 19.28%;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: 14.89vw;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  transform-origin: left top;
  transform: scaleX(0.600);
  background: linear-gradient(180deg, #ffffff 0%, #e6e9ec 38%, #a8b0b8 62%, #f4f7fa 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .75)) drop-shadow(0 0 8px rgba(255, 255, 255, .25));
}

/* 「当前 / 目标」数字行 */
#page-level .lv2-num {
  position: absolute; z-index: 3;
  display: flex; align-items: baseline;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  transform-origin: left top;
  transform: scaleX(.897);
}
#page-level .lv2-num b,
#page-level .lv2-num em {
  font-style: normal;
  background: linear-gradient(180deg, #d6f7b4 0%, #86e04f 55%, #59b52c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(20, 50, 10, .55));
}
#page-level .lv2-num i {
  font-style: normal;
  padding: 0 .10em;
  color: #8b9096;
}
#page-level .lv2-num1 { left: 24.10%; top: 55.32%; font-size: 4.20vw; }
#page-level .lv2-num2 { left: 24.10%; top: 72.87%; font-size: 4.20vw; }

/* 达标状态 */
#page-level .lv2-state {
  position: absolute; z-index: 3;
  left: 76.97%; top: 53.22%;
  font-size: 3.2vw;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: #9aa0a6;
  display: flex; align-items: center; justify-content: flex-end;
}
#page-level .lv2-state > b { font-weight: 600; }
#page-level .lv2-state > i {
  width: 1em; height: 1em;
  flex: 0 0 auto;
  margin-right: .32em;
  border-radius: 50%;
  border: 1.4px solid currentColor;
  position: relative;
}
#page-level .lv2-state > i::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 52%; height: 1.4px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
#page-level .lv2-state > i::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 52%; height: 1.4px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
}
#page-level .lv2-state.ok { color: #7fe055; }
#page-level .lv2-state.ok > i::before { display: none; }
#page-level .lv2-state.ok > i::after {
  width: 26%; height: 48%;
  background: none;
  border: solid currentColor;
  border-width: 0 1.6px 1.6px 0;
  transform: translate(-50%, -62%) rotate(45deg);
}
#page-level .lv2-state2 { top: 70.9%; }

/* 进度条：整条用 CSS 重画（美术里的示意进度已抹掉） */
#page-level .lv2-bar {
  position: absolute; z-index: 3;
  left: 7.89%; width: 84.70%;
  height: 1.55%;
  border-radius: 999px;
  background: #1b1917;
  box-shadow: inset 0 0 0 1px rgba(120, 96, 60, .22);
  overflow: hidden;
}
#page-level .lv2-bar1 { top: 59.72%; }
#page-level .lv2-bar2 { top: 77.40%; }
#page-level .lv2-bar > i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b8842f 0%, #f0c766 55%, #fff0b8 100%);
  box-shadow: 0 0 10px rgba(255, 196, 90, .5);
  transition: width .45s cubic-bezier(.22, .9, .3, 1);
}
/* 没达标时条是空的 */
#page-level .lv2-bar.zero > i { box-shadow: none; }

/* =========================================================
   收益中心（2026-11-06）：整幅设计图 + 叠加数字（低消耗）
   —— 设计稿 1056×2336，裁掉手机状态栏后 1056×2248
   ========================================================= */
#page-income.income-page2 {
  background: #171512;
  overflow: hidden;
  animation: none;                 /* 去掉 .page.sub 的 translateX 进场，避免百分比漂移 */
}
#page-income .inc2-scroll {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #171512;
  scrollbar-width: none;
}
#page-income .inc2-scroll::-webkit-scrollbar { display: none; }
/* 关键：包裹层和图片同宽同高（等比），所有百分比才对得上底图 */
#page-income .inc2-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1056 / 2248;
  overflow: hidden;
}
#page-income .inc2-wrap > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; -webkit-user-drag: none;
}

/* 透明热区 */
#page-income .inc2-hit {
  position: absolute; z-index: 3;
  border: 0; background: transparent; border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s ease;
}
#page-income .inc2-hit:active { background: rgba(255, 226, 170, .12); }
#page-income .inc2-back { left: 3.60%; top: 1.07%; width: 8.14%; height: 3.91%; border-radius: 50%; }
#page-income .inc2-rules { left: 81.63%; top: 1.51%; width: 14.58%; height: 3.02%; }
#page-income .inc2-allrec { left: 72.16%; top: 40.84%; width: 24.24%; height: 4.09%; }

/* 4 个数字：今日贡献(绿) / 昨日贡献(紫) / 总收益(绿) / 今日收益(紫)
   —— 字号用 px（画布 375），不用 vw：.phone 有 scale(--s)，
      vw 会再被乘一次 s，字体在宽屏上被放大约 5~15% */
#page-income .inc2-num {
  position: absolute; z-index: 3;
  display: block;
  width: 41%;                        /* 单侧格子宽度，用来做溢出收缩 */
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  transform-origin: left center;
}
#page-income .inc2-num1 { left: 9.09%; top: 15.30%; font-size: 27px; }
#page-income .inc2-num2 { left: 54.92%; top: 15.16%; font-size: 27px; }
#page-income .inc2-num3 { left: 9.09%; top: 31.86%; font-size: 27px; }
#page-income .inc2-num4 { left: 54.92%; top: 31.72%; font-size: 27px; }

.inc2-g {                      /* 绿色（今日贡献 / 总收益） */
  background: linear-gradient(180deg, #f4ffe0 0%, #b6f36b 42%, #6fd82a 76%, #4ea61c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 9px rgba(140, 235, 70, .5));
}
.inc2-p {                      /* 紫色（昨日贡献 / 今日收益） */
  background: linear-gradient(180deg, #ffe6ff 0%, #f0a6f5 42%, #c05ad8 76%, #8e35a8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 9px rgba(210, 110, 240, .5));
}

/* 结算记录列表（有数据时盖住空状态插画） */
#page-income .inc2-list {
  position: absolute; z-index: 2;
  left: 3.4%; right: 3.4%;
  top: 47.24%; bottom: 1.5%;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 6px;
  background: #171512;
  border-radius: 12px;
}
#page-income .inc2-list::-webkit-scrollbar { display: none; }
#page-income .inc2-list[hidden] { display: none; }

#page-income .inc2-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 13px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(190, 152, 92, .18);
}
#page-income .inc2-row .rl { flex: 1; min-width: 0; display: block; }
#page-income .inc2-row .rl > b {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #f2e7cf;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#page-income .inc2-row .rl > span {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: #8a8378;
}
#page-income .inc2-row em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 16px;
  font-weight: 800;
  color: #a8ee6c;
  text-shadow: 0 0 10px rgba(140, 235, 70, .4);
}

/* 规则弹窗 */
.inc2-mask {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0, 0, 0, .66);
  display: flex; align-items: center; justify-content: center;
  padding: 0 26px;
}
.inc2-mask[hidden] { display: none; }
.inc2-modal {
  width: 100%;
  max-width: 340px;
  border-radius: 16px;
  padding: 20px 18px 16px;
  background: linear-gradient(180deg, #241f18, #171310);
  border: 1px solid rgba(214, 176, 108, .45);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 226, 170, .16);
}
.inc2-modal h3 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: center;
  background: linear-gradient(180deg, #fff4d4, #dcb168);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(50, 24, 0, .8));
}
.inc2-modal-body { margin: 14px 0 16px; }
.inc2-modal-body p {
  font-size: 13px;
  line-height: 1.75;
  color: #cfc6b4;
}
.inc2-modal-btn {
  display: block; width: 100%;
  height: 44px;
  border-radius: 999px;
  font-size: 15px; font-weight: 800;
  letter-spacing: .08em;
  color: #3a2a10;
  background: linear-gradient(180deg, #ffe8a8, #d9a94b);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.inc2-modal-btn:active { transform: scale(.985); filter: brightness(1.06); }

/* =========================================================
   邀请好友 v3（2026-11-06）：熊王帝国三张设计图 · 低消耗
   —— 底图 1088×2080；头像 / 昵称 / 邀请码数字是 HTML（图里已抹掉）
   ========================================================= */
#page-invite.invite3 {
  background: #0a0806;
  overflow: hidden;
  animation: none;
}
#page-invite.invite3 .iv3-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  transform: none !important;
  transition: none !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
}
#page-invite.invite3 .iv3-track::-webkit-scrollbar { display: none; }
#page-invite.invite3 .iv3-track.drag { scroll-snap-type: none; }

#page-invite.invite3 .ivs {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  touch-action: pan-x;
}
#page-invite.invite3 .ivs > img:first-child {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* 头像（图里已抹掉，这里放真实头像） */
#page-invite.invite3 .ivs-av {
  position: absolute; z-index: 2;
  left: 12.68%; top: 69.47%;
  width: 10.39%;
  aspect-ratio: 1;
  height: auto;
  border-radius: 22%;
  object-fit: cover;
  pointer-events: none;
  background: #1a1712;
}

/* 昵称 */
#page-invite.invite3 .ivs-nick {
  position: absolute; z-index: 2;
  left: 25.92%; top: 69.10%;
  width: 60%;
  font-size: 4.35vw;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .01em;
  color: #fdfaf2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
  pointer-events: none;
}

/* 副标题（图里烘焙的文字已抹掉，这里放 HTML，导出时用同参数写 canvas）
   设计稿：字号 34px、横向压缩 .86、墨迹左上 (283,1517) */
#page-invite.invite3 .ivs-slogan {
  position: absolute; z-index: 2;
  left: 26.01%; top: 73.05%;
  font-size: 3.13vw;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: #e6e1d8;
  white-space: pre;
  transform: scaleX(.86);
  transform-origin: left top;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  pointer-events: none;
}

/* 邀请码数字（「邀请码」三个字保留在图里） */
#page-invite.invite3 .ivs-code {
  position: absolute; z-index: 2;
  left: 26.45%; top: 77.75%;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 800;
  font-size: 4.05vw;
  line-height: 1;
  letter-spacing: .01em;
  transform-origin: left top;
  transform: scaleX(.855);
  white-space: nowrap;
  color: #f7d98d;
  background: linear-gradient(180deg, #fff3c8 0%, #f2cd76 55%, #dba746 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(56, 26, 0, .85)) drop-shadow(0 0 8px rgba(255, 186, 70, .35));
  pointer-events: none;
}

/* 二维码：白底盖板压住设计稿里烘焙的假码，里面叠真码（js/qrgen.js 生成）
   设计稿里假码白卡是 (767,1456)-(960,1659)，盖板四边各外扩 8px，
   画布铺满盖板，只留 3 个模块的白边当静区，视觉上真码贴着白框 */
#page-invite.invite3 .ivs-qrbox {
  position: absolute; z-index: 2;
  left: 69.76%; top: 69.62%;
  width: 19.30%; height: 10.53%;
  background: #fff;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
#page-invite.invite3 .ivs-qr {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  display: block;
}

/* 返回键：三张统一在左上（第 2、3 张图里烘焙的右上圈已抹掉，改用叠图） */
#page-invite.invite3 .ivs-backimg {
  position: absolute; z-index: 4;
  left: 2.21%; top: 2.40%;          /* 圆盘中心 (82,108) 半径 58 → 1088×2080 */
  width: 10.66%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
}
#page-invite.invite3 .ivs-backimg[hidden] { display: none; }
#page-invite.invite3 .ivs-back {
  position: absolute; z-index: 5;
  left: 1.75%; top: 2.10%;
  width: 11.60%; aspect-ratio: 1; height: auto;
  border: 0; background: transparent; border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
#page-invite.invite3 .ivs-back:active { background: rgba(255, 214, 150, .16); }

/* 保存 / 分享 */
#page-invite.invite3 .ivs-hit {
  position: absolute; z-index: 4;
  border: 0; background: transparent; border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s ease;
}
#page-invite.invite3 .ivs-hit:active { background: rgba(255, 230, 170, .10); }
#page-invite.invite3 .ivs1 [data-inv-save]  { left: 4.87%; top: 88.94%; width: 43.57%; height: 6.39%; }
#page-invite.invite3 .ivs1 [data-inv-share] { left: 52.39%; top: 88.94%; width: 43.11%; height: 6.39%; }
#page-invite.invite3 .ivs2 [data-inv-save]  { left: 4.78%; top: 88.94%; width: 43.66%; height: 6.35%; }
#page-invite.invite3 .ivs2 [data-inv-share] { left: 52.39%; top: 88.94%; width: 43.01%; height: 6.35%; }
#page-invite.invite3 .ivs3 [data-inv-save]  { left: 4.96%; top: 88.94%; width: 43.57%; height: 6.35%; }
#page-invite.invite3 .ivs3 [data-inv-share] { left: 52.48%; top: 88.94%; width: 42.92%; height: 6.39%; }

/* =========================================================
   对战中心 v9（2026-11-06）：整幅设计图 + 两个透明热区（低消耗）
   —— 设计稿 1216×2048，裁掉底部导航 → 1216×1775
   ========================================================= */
#page-mall.pk9-page {
  background: #08070a;
  overflow: hidden;
}
#page-mall .pk9-scroll {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* 图比屏短，底部用同色舞台渐变延续，避免出现一块纯黑空洞 */
  background:
    radial-gradient(120% 42% at 50% 62%, rgba(60, 44, 34, .34) 0%, rgba(8, 7, 10, 0) 68%),
    linear-gradient(180deg, #08070a 0%, #0a0809 70%, #090708 100%);
  scrollbar-width: none;
}
#page-mall .pk9-scroll::-webkit-scrollbar { display: none; }
#page-mall .pk9-art { position: relative; width: 100%; }
#page-mall .pk9-art > img {
  display: block; width: 100%; height: auto;
  pointer-events: none; -webkit-user-drag: none;
}
#page-mall .pk9-hit {
  position: absolute; z-index: 3;
  border: 0; background: transparent;
  border-radius: 20px;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s ease, transform .14s ease;
}
#page-mall .pk9-hit:active { background: rgba(255, 226, 170, .09); transform: scale(.994); }
#page-mall .pk9-card1 { left: 3.29%; top: 56.42%; width: 93.42%; height: 22.28%; }
#page-mall .pk9-card2 { left: 3.29%; top: 81.31%; width: 93.42%; height: 18.58%; }

/* =========================================================
   一币暴富 v3（2026-11-06）：新设计图主视觉 + 宝箱素材
   ========================================================= */
#page-group .fl3-hero img { display: block; width: 100%; height: auto; }
/* 宝箱高度压缩：宽度收窄 → 高度同比变矮，卡片不再一屏只放得下一张 */
#page-group .fl2-card .fl2-art img {
  width: 100%; max-width: 96px; height: auto; object-fit: contain;
}

/* =========================================================
   我的订单 v2（2026-11-06）：金色切角卡 + 深色头部
   —— 设计稿 1056×2080，卡片 (37,369)-(1025,788)，间距 28px
   ========================================================= */
#page-orders {
  background: #0d0b09;
}
#page-orders .subbar {
  height: 92px;
  background:
    linear-gradient(180deg, rgba(24, 21, 17, .96), rgba(13, 11, 9, .96));
  border-bottom: 1px solid rgba(190, 152, 92, .28);
  padding: 0 16px;
}
#page-orders .subbar::after {
  content: '';
  position: absolute; left: 12%; right: 12%; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 200, 120, .5) 22%, rgba(255, 226, 160, .9) 50%, rgba(240, 200, 120, .5) 78%, transparent);
}
#page-orders .subbar .back {
  width: 38px; height: 38px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(216, 178, 112, .35);
  color: #f0e2c4;
}
#page-orders .subbar-txt { text-align: center; padding-right: 38px; }
#page-orders .subbar-txt h1 {
  font-size: 5.2vw;
  font-weight: 900;
  letter-spacing: .06em;
  background: linear-gradient(180deg, #fffaf0 0%, #f4e2bb 55%, #d9b979 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55));
}
#page-orders .subbar-txt p {
  margin-top: 3px;
  font-size: 3.3vw;
  color: #b9ad99;
}
#page-orders .sub-body {
  top: 92px;
  padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(80% 30% at 50% 0%, rgba(70, 55, 38, .22) 0%, rgba(13, 11, 9, 0) 62%),
    #0d0b09;
}

/* 顶部 tab：一个整体金边胶囊，选中项是金框切角块 */
#page-orders .tabs {
  position: sticky; top: 0; z-index: 5;
  margin: 3.4vw 3.5vw 3.2vw;
  padding: 0;
  display: flex;
  gap: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(196, 158, 96, .38);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  overflow: hidden;
}
#page-orders .tabs button {
  flex: 1;
  height: 42px;
  border-radius: 11px;
  font-size: 3.75vw;
  font-weight: 700;
  letter-spacing: .02em;
  color: #b3a894;
  background: transparent;
  border: 1px solid transparent;
  transition: color .16s ease, background .16s ease;
}
#page-orders .tabs button.on {
  color: #3a2a10;
  background: linear-gradient(180deg, #ffeab4 0%, #e5c076 55%, #c99b46 100%);
  border-color: rgba(255, 236, 180, .85);
  box-shadow: 0 0 14px rgba(230, 180, 90, .38), inset 0 1px 0 rgba(255, 255, 255, .55);
}
#page-orders .tabs button:not(.on):active { background: rgba(255, 226, 170, .08); }

/* 卡片：切角 + 金边（两层 clip-path 形成双线） */
#page-orders .order-list { padding: 0 3.5vw; }
#page-orders .o-card {
  position: relative;
  margin-bottom: 2.7vw;
  padding: 1.6vw 0 0;
  background: linear-gradient(160deg, rgba(228, 190, 120, .55), rgba(120, 92, 50, .18) 42%, rgba(228, 190, 120, .45));
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  border-radius: 0;
}
#page-orders .o-card::before {
  content: '';
  position: absolute; inset: 1px;
  background: linear-gradient(180deg, #221f1a 0%, #171513 100%);
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  z-index: 0;
}
#page-orders .o-card > * { position: relative; z-index: 1; }

#page-orders .o-card-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 0;
  font-size: 3.2vw;
  color: #8d8578;
}
#page-orders .o-status {
  font-size: 3.6vw;
  font-weight: 800;
  color: #f0c56a;
}
#page-orders .o-status.s3 { color: #5fd94b; }
#page-orders .o-status.s0 { color: #ff5a4d; }

#page-orders .o-card-body {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 14px 0;
}
#page-orders .o-thumb {
  position: relative;
  width: 64px; height: 64px; flex: 0 0 auto;
  border-radius: 12px;
  background: #f5f1e8;
  overflow: hidden;
  box-shadow: 0 0 0 1.5px rgba(240, 200, 130, .85), 0 0 12px rgba(200, 150, 70, .3);
}
#page-orders .o-thumb img { width: 100%; height: 100%; object-fit: cover; padding: 2px; }
#page-orders .o-info { flex: 1; min-width: 0; }
#page-orders .o-info h4 {
  font-size: 4vw;
  font-weight: 800;
  line-height: 1.3;
  color: #fbf5e9;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
#page-orders .o-info p {
  margin-top: 6px;
  font-size: 3.15vw;
  color: #8d8578;
}
#page-orders .o-card-foot {
  margin: 12px 14px 0;
  padding: 11px 0 13px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  display: flex; align-items: center; justify-content: space-between;
  min-height: 34px;
}
#page-orders .o-amount {
  font-size: 4.5vw;
  font-weight: 900;
  color: #ffb043;
  text-shadow: 0 0 12px rgba(255, 150, 40, .32);
}
#page-orders .o-amount i { font-size: 3.4vw; font-weight: 700; }
#page-orders .btn-o {
  height: 34px;
  padding: 0 16px;
  border-radius: 9px;
  font-size: 3.5vw;
  font-weight: 800;
  color: #123006;
  background: linear-gradient(180deg, #a6f07a 0%, #6fd84b 52%, #4db52f 100%);
  box-shadow: 0 0 14px rgba(110, 220, 70, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
}
#page-orders .btn-o:active { transform: scale(.97); filter: brightness(1.06); }
#page-orders .empty-state { padding: 60px 0 30px; color: #7d7568; }

/* =========================================================
   登录/注册页 v2（2026-11-06）：金色主题（设计稿 1280×1920）
   —— 品牌改「熊王帝国」金冠熊徽章；输入框金边；按钮金色渐变
   ========================================================= */
#page-auth.auth-page {
  background:
    radial-gradient(70% 42% at 4% 2%, rgba(40, 58, 104, .42) 0%, rgba(13, 12, 12, 0) 64%),
    radial-gradient(80% 50% at 98% 76%, rgba(112, 78, 30, .34) 0%, rgba(13, 12, 12, 0) 66%),
    linear-gradient(180deg, #0d0c0c 0%, #12100f 58%, #191410 100%);
}
#page-auth .auth-body {
  padding: 30px 22px calc(30px + env(safe-area-inset-bottom, 0px));
}

/* 品牌 */
#page-auth .auth-brand {
  display: flex; align-items: center; gap: 14px;
  margin: 6px 0 0;
}
#page-auth .auth-brand-logo {
  width: 74px; height: 80px;
  object-fit: contain;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .6));
}
#page-auth .auth-brand-txt h2 {
  font-size: 8.2vw;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.05;
  background: linear-gradient(180deg, #fff8e2 0%, #f3d894 38%, #d5a94b 68%, #a5761f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(52, 26, 0, .75)) drop-shadow(0 0 14px rgba(220, 168, 80, .35));
}
#page-auth .auth-brand-txt p {
  margin-top: 7px;
  font-size: 3.7vw;
  letter-spacing: .12em;
  color: #c9a866;
}

/* 登录方式 tab：文字 + 金色下划线 */
#page-auth .auth-tabs {
  margin: 12vw 0 0;
  display: flex;
  gap: 0;
  border: 0;
  background: none;
  padding: 0;
  position: relative;
}
#page-auth .auth-tabs::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, .12);
}
#page-auth .auth-tabs .at {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 7px;
  padding: 0 0 12px;
  margin-right: 8vw;
  font-size: 5.6vw;
  font-weight: 800;
  letter-spacing: .04em;
  color: #7d7a74;
  background: none;
  border-radius: 0;
  position: relative;
  z-index: 1;
}
#page-auth .auth-tabs .at svg { width: 5.6vw; height: 5.6vw; }
#page-auth .auth-tabs .at.on {
  color: #fdfaf3;
  display: flex;
}
#page-auth .auth-tabs .at.on::after {
  content: '';
  position: absolute; left: 0; bottom: -1px;
  width: 100%; height: 2.6px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 231, 168, 0) 0%, #f2d188 22%, #ffeab4 78%, rgba(255, 231, 168, 0) 100%);
  box-shadow: 0 0 10px rgba(240, 200, 120, .55);
}

/* 表单 */
#page-auth .auth-form { margin-top: 7vw; gap: 3.6vw; }
#page-auth .auth-input {
  height: 13.4vw;
  padding: 0 4.4vw;
  border-radius: 3vw;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(206, 170, 112, .55);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .12), 0 4px 14px rgba(0, 0, 0, .3);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
#page-auth .auth-input:focus-within {
  border-color: rgba(246, 208, 138, .95);
  background: rgba(255, 226, 170, .05);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .18), 0 0 0 2px rgba(230, 180, 90, .18), 0 4px 16px rgba(0, 0, 0, .35);
}
#page-auth .ai-lb {
  font-size: 4.1vw;
  font-weight: 800;
  color: #fbf6ea;
  margin-right: 4.2vw;
  letter-spacing: .02em;
}
#page-auth .auth-input input {
  font-size: 4.1vw;
  color: #fbf6ea;
  background: none;
}
#page-auth .auth-input input::placeholder { color: #6f6c66; font-size: 3.9vw; }
#page-auth .btn-sms {
  height: 8.6vw;
  padding: 0 3.4vw;
  border-radius: 2.2vw;
  font-size: 3.5vw;
  font-weight: 700;
  color: #f0cf8b;
  background: rgba(230, 180, 90, .10);
  border: 1px solid rgba(206, 170, 112, .55);
}

/* 主按钮：金色渐变 */
#page-auth .btn-auth-submit {
  margin-top: 5.6vw;
  height: 13.6vw;
  border-radius: 3vw;
  font-size: 5.2vw;
  font-weight: 800;
  letter-spacing: .12em;
  color: #40280a;
  background: linear-gradient(180deg, #f6e0ad 0%, #e6c27a 32%, #c99f52 68%, #a87c34 100%);
  border: 1px solid rgba(255, 236, 190, .55);
  box-shadow: 0 10px 26px rgba(150, 100, 30, .34), inset 0 1px 0 rgba(255, 255, 255, .6);
}
#page-auth .btn-auth-submit:active { transform: scale(.985); filter: brightness(1.06); }
#page-auth .btn-auth-submit[disabled] {
  color: #8d8377;
  background: linear-gradient(180deg, #36322c, #26231f);
  border-color: rgba(150, 130, 100, .3);
  box-shadow: none;
  opacity: 1;
}

/* 底部动作 */
#page-auth .auth-actions { margin-top: 7.5vw; }
#page-auth .link-forgot {
  font-size: 3.85vw;
  color: #8e8a83;
}
#page-auth .btn-register {
  height: 9.6vw;
  padding: 0 5.4vw;
  border-radius: 2.6vw;
  font-size: 4vw;
  font-weight: 800;
  color: #f4d792;
  background: transparent;
  border: 1px solid rgba(206, 170, 112, .7);
}
#page-auth .btn-register:active { background: rgba(230, 180, 90, .10); }

#page-auth .link-switch-mode {
  margin-top: 6.5vw;
  font-size: 4vw;
  font-weight: 800;
  color: #fbf6ea;
}
#page-auth .link-switch-mode:active { color: #f2d188; }

/* 协议 */
#page-auth .auth-agree {
  margin-top: 8vw;
  font-size: 3.42vw;          /* 宽屏（430）也不换行：430px 下约 14.7px */
  color: #8e8a83;
  white-space: nowrap;
  letter-spacing: -.01em;
}
#page-auth .auth-agree .dot {
  width: 4.6vw; height: 4.6vw;
  border: 1.4px solid rgba(180, 168, 150, .7);
  background: transparent;
}
#page-auth .auth-agree input:checked + .dot {
  background: linear-gradient(180deg, #f6e0ad, #c99f52);
  border-color: rgba(255, 236, 190, .9);
}
/* 勾选图标颜色跟着金色主题走（基类写死绿色，会和整体冲突） */
#page-auth .auth-agree input:checked + .dot::after {
  border-color: #3a2a10;
}
#page-auth .auth-agree em { color: #b9986a; font-style: normal; }
#page-auth .auth-reg-head h2 { font-size: 6vw; font-weight: 900; color: #fbf6ea; }
#page-auth .auth-reg-head p { margin-top: 6px; font-size: 3.5vw; color: #8e8a83; }
#page-auth .sms-hint { font-size: 3.3vw; color: #b9986a; }

/* =========================================================
   服务商（熊币商人列表）v2（2026-11-06）：素材全部取自设计稿
   —— 设计稿 1056 宽 → 375 画布，换算系数 k = 375/1056 ≈ 0.3551
   —— 全部用 px（.phone 是固定 375 画布 + scale，用 vw 会被二次放大）
   ========================================================= */
#page-provider.prov-page {
  background:
    radial-gradient(80% 34% at 50% 0%, rgba(74, 55, 32, .18) 0%, rgba(12, 11, 10, 0) 62%),
    #0c0b0a;
  animation: none;
}
#page-provider .prov-bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 43px;
  display: flex; align-items: center;
  background: linear-gradient(180deg, rgba(22, 20, 17, .97), rgba(12, 11, 10, .97));
  border-bottom: 1px solid rgba(190, 152, 92, .2);
  padding: 0 15px;
}
#page-provider .prov-bar .back {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  color: #e8e0d0;
}
#page-provider .prov-bar .subbar-txt { text-align: center; padding-right: 32px; }
#page-provider .prov-bar h1 {
  font-size: 18.5px;
  font-weight: 800;
  letter-spacing: .05em;
  color: #f6f1e6;
}
#page-provider .prov-body {
  top: 43px;
  /* 设计稿：标题栏底(200) → 主视觉上沿(303) = 38.3 CSS */
  padding: 38px 15px calc(26px + env(safe-area-inset-bottom, 0px));
  background: none;
}

/* 主视觉：底图 + 皇冠溢出层（底图自带圆角，溢出层不受裁剪） */
#page-provider .prov-hero {
  position: relative;
  line-height: 0;
}
#page-provider .prov-hero-bg {
  display: block;
  width: 100%; height: auto;
  border-radius: 21px;
  /* 设计稿里卡片有一圈细金边 */
  box-shadow: inset 0 0 0 1px rgba(206, 168, 104, .55), 0 8px 22px rgba(0, 0, 0, .5);
}
#page-provider .prov-hero-bear {
  position: absolute;
  left: 56.62%;                 /* (596-44)/975 */
  top: -12.29%;                 /* (232-304)/586 */
  width: 43.08%;                /* 420/975 */
  height: auto;
  pointer-events: none;
}

/* ---- 商家卡片 ---- */
#page-provider .prov-list { margin-top: 29px; }   /* 主视觉→首卡 28.7 CSS */
#page-provider .prov-card {
  position: relative;
  margin-bottom: 12px;
  padding: 17px 17px 28px;
  border-radius: 18px;
  background: linear-gradient(160deg, #211d18 0%, #17140f 100%);
  box-shadow: 0 0 0 1px rgba(198, 160, 98, .5), inset 0 1px 0 rgba(255, 236, 190, .06);
}
#page-provider .prov-top { display: flex; align-items: flex-start; gap: 10px; }
#page-provider .prov-av {
  width: 39px; height: 39px; flex: 0 0 auto;
  margin-top: 1px;
  border-radius: 50%;
  overflow: hidden;
  background: #26221c;
  box-shadow: 0 0 0 1px rgba(216, 178, 112, .35);
}
#page-provider .prov-av img { width: 100%; height: 100%; object-fit: cover; }
#page-provider .prov-meta { flex: 1; min-width: 0; }
#page-provider .prov-name-row {
  display: flex; align-items: center; gap: 9px;
  min-width: 0; height: 22px;
}
#page-provider .prov-name {
  font-size: 16.6px;
  font-weight: 800;
  letter-spacing: 0;
  color: #fdfaf3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
#page-provider .prov-badge {
  flex: 0 0 auto;
  height: 17.9px; width: auto;    /* 设计稿 166×48 → 61.8×17.9 */
  display: block;
  pointer-events: none;
}
#page-provider .prov-id {
  margin-top: 7px;
  display: flex; align-items: center; gap: 6px;
  font-size: 14px;
  line-height: 1;
  color: #a8a196;
  white-space: nowrap;
}
#page-provider .prov-copy-mini {
  width: 14.5px; height: 14.5px;   /* 设计稿 39×36 */
  flex: 0 0 auto;
  border: 0; background: none; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
#page-provider .prov-copy-mini img { width: 100%; height: 100%; display: block; }
#page-provider .prov-copy-mini:active { opacity: .6; }

/* 微信 / QQ 胶囊 */
#page-provider .prov-contacts {
  display: flex; gap: 9px;
  margin-top: 16px;
}
#page-provider .prov-pill {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 7px;
  height: 33px;
  padding: 0 6px 0 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .028);
  box-shadow: inset 0 0 0 1px rgba(198, 160, 98, .26);
}
#page-provider .prov-ico {
  width: 20px; height: 20px;      /* 设计稿 54×44 / 68×66 → 等比取 20px 高 */
  flex: 0 0 auto;
  object-fit: contain;
  pointer-events: none;
}
#page-provider .prov-val {
  flex: 1; min-width: 0;
  font-size: 16.2px;
  font-weight: 700;
  color: #f6f1e6;
  letter-spacing: -.1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#page-provider .prov-copy {
  flex: 0 0 auto;
  width: 29px; height: 29px;      /* 设计稿 90×88 → 33.5，减去 1px 白边视觉重量 */
  border: 0; background: none; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
#page-provider .prov-copy img { width: 100%; height: 100%; display: block; }
#page-provider .prov-copy:active { transform: scale(.92); }

#page-provider .prov-empty {
  padding: 42px 0;
  text-align: center;
  font-size: 14px;
  color: #7d7568;
}

/* =========================================================
   小熊卡（后台可配）
   ========================================================= */
#page-card { background: #0f0d10; color: #f4ecdf; }
#page-card .subbar { background: rgba(15, 13, 16, .94); border-bottom-color: rgba(233, 196, 128, .14); }
#page-card .subbar-txt h1 { color: #f6e7c8; }
#page-card .subbar-txt p { color: #9e937f; }
#page-card .sub-body { padding: 14px 16px calc(30px + env(safe-area-inset-bottom, 0px)); }

#page-card .cd-hero { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 150% at 88% 0%, rgba(255, 198, 96, .22), rgba(30, 22, 14, 0) 62%), linear-gradient(155deg, #2c2116, #191410 62%, #120f0c);
  border: 1px solid rgba(238, 199, 124, .32); box-shadow: inset 0 1px 0 rgba(255, 228, 170, .16), 0 12px 28px rgba(0, 0, 0, .34); }
#page-card .cd-tag { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 10px; color: #f0d19a; background: rgba(255, 205, 130, .14); border: 1px solid rgba(255, 205, 130, .24); }
#page-card .cd-hero-txt { flex: 1; min-width: 0; }
#page-card .cd-hero-txt h2 { margin-top: 7px; font-size: 21px; font-weight: 800; letter-spacing: .6px; color: #fff3da; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
#page-card .cd-hero-txt p { margin-top: 5px; font-size: 12px; color: #b8a98e; }
#page-card .cd-hero-total { margin-top: 8px; font-size: 11.5px; color: #8f8470; }
#page-card .cd-hero-total b { font-size: 14px; color: #ffd98f; }
#page-card .cd-hero-price { flex: 0 0 auto; text-align: right; padding-left: 8px; }
#page-card .cd-hero-price b { display: block; font-size: 30px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff6dc, #f2c46d 62%, #c98c2e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#page-card .cd-hero-price span { display: block; margin-top: 6px; font-size: 10.5px; color: #9c8a6c; }

#page-card .cd-sum { display: flex; margin-top: 12px; padding: 13px 6px; border-radius: 16px; background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .024)); border: 1px solid rgba(233, 196, 128, .14); }
#page-card .cd-sum-cell { position: relative; flex: 1; text-align: center; }
#page-card .cd-sum-cell + .cd-sum-cell::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 22px; transform: translateY(-50%); background: rgba(255, 255, 255, .08); }
#page-card .cd-sum-cell b { display: block; font-size: 17px; font-weight: 800; color: #ffe0a6; font-variant-numeric: tabular-nums; }
#page-card .cd-sum-cell span { display: block; margin-top: 3px; font-size: 10.5px; color: #948a77; }

#page-card .cd-balrow { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 0 4px; font-size: 12px; color: #91876f; }
#page-card .cd-balrow b { display: flex; align-items: center; gap: 5px; font-size: 15px; color: #f6e5c2; font-variant-numeric: tabular-nums; }
#page-card .cd-coin { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c8, #f0c064 55%, #a8741f); box-shadow: inset 0 0 0 1.5px rgba(120, 76, 18, .5); }

#page-card .cd-buy { display: block; width: 100%; margin-top: 14px; height: 48px; border-radius: 24px; font-size: 16px; font-weight: 800; letter-spacing: 1px; color: #5a3a12;
  background: linear-gradient(180deg, #ffedc0, #f3c76f 52%, #d79a3b); box-shadow: 0 10px 22px rgba(196, 140, 48, .32), inset 0 1px 0 rgba(255, 255, 255, .7); border: 0; }
#page-card .cd-buy:active { transform: scale(.985); filter: brightness(1.05); }
#page-card .cd-buy[disabled] { opacity: .55; filter: saturate(.6); }
#page-card .cd-buy-tip { margin-top: 8px; text-align: center; font-size: 10.5px; color: #8d8270; }

#page-card .cd-claim { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 14px 15px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 205, 120, .1), rgba(255, 255, 255, .025)); border: 1px solid rgba(240, 200, 124, .22); }
#page-card .cd-claim-txt span { display: block; font-size: 11px; color: #9b907b; }
#page-card .cd-claim-txt b { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 20px; color: #ffd98f; font-variant-numeric: tabular-nums; }
#page-card .cd-claim-btn { height: 36px; padding: 0 17px; border-radius: 18px; font-size: 13px; font-weight: 700; color: #4d3410;
  background: linear-gradient(180deg, #ffe9b8, #eab963); border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 14px rgba(190, 140, 60, .28); }
#page-card .cd-claim-btn:active { transform: scale(.96); }
#page-card .cd-claim-btn[disabled] { opacity: .5; }

#page-card .cd-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 10px; }
#page-card .cd-sec-head h3 { font-size: 14px; font-weight: 800; color: #f0e2c6; letter-spacing: .4px; }
#page-card .cd-sec-head span { font-size: 11px; color: #8f8572; }

#page-card .cd-list { display: flex; flex-direction: column; gap: 10px; }
#page-card .cd-item { padding: 13px 14px; border-radius: 15px; background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .022)); border: 1px solid rgba(235, 199, 128, .16); }
#page-card .cd-item-top { display: flex; align-items: center; justify-content: space-between; }
#page-card .cd-item-top b { font-size: 13.5px; color: #f4e6ca; }
#page-card .cd-item-top span { font-size: 10.5px; color: #8e8471; }
#page-card .cd-item-top .cd-done { color: #7fd06a; }
#page-card .cd-prog { margin-top: 10px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
#page-card .cd-prog i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #f7d493, #d9a64f); }
#page-card .cd-item-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 10.5px; color: #9a907d; }
#page-card .cd-item-meta b { color: #ffd98f; font-size: 12px; }
#page-card .cd-empty { padding: 28px 10px; text-align: center; font-size: 13px; color: #a79b85; border-radius: 15px; border: 1px dashed rgba(235, 199, 128, .2); }
#page-card .cd-empty span { display: block; margin-top: 6px; font-size: 11px; color: #7f7666; }

#page-card .cd-rule-head { margin-top: 18px; }
#page-card .cd-rules { padding: 14px 15px; border-radius: 15px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .07);
  font-size: 12px; line-height: 1.85; color: #c9bea8; }
#page-card .cd-rules b { color: #ffd98f; font-weight: 700; }
#page-card .cd-rules p { margin: 0; }
#page-card .cd-foot-pad { height: 26px; }

/* 首页 · 小熊卡入口 */
.hm-wallet-cell[data-hm] { cursor: pointer; }
.hm-card-entry { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 11px 16px 0; padding: 13px 15px;
  border-radius: 16px; text-align: left; font: inherit; color: #f3e7cf;
  background: radial-gradient(120% 160% at 10% 0%, rgba(255, 196, 92, .16), rgba(20, 17, 14, 0) 60%), linear-gradient(160deg, #2a2118, #17130f);
  border: 1px solid rgba(233, 190, 108, .34);
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, .14), 0 8px 22px rgba(0, 0, 0, .28);
  transition: transform .16s ease, filter .16s ease; }
.hm-card-entry:active { transform: scale(.985); filter: brightness(1.06); }
.hm-card-entry .hce-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #5b3a12;
  background: linear-gradient(160deg, #ffe9b8, #e9b95f 55%, #b77f2a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 10px rgba(190, 140, 60, .35); }
.hm-card-entry .hce-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hm-card-entry .hce-txt b { font-size: 15px; letter-spacing: .4px; color: #f6e7c8; }
.hm-card-entry .hce-txt span { font-size: 11.5px; color: #a99a83; }
.hm-card-entry .hce-arrow { font-size: 20px; color: #c9a86a; line-height: 1; }

/* 首页：小熊卡移到资产卡原位置（2026-11-09） */
#page-home .hm-card-entry { margin: 2px 16px 0; }

/* 首页 · 小熊卡大卡版（2026-11-09） */
#page-home .hm-card-entry {
  position: relative; display: block;
  width: calc(100% - 32px); height: 108px;
  margin: 2px 16px 0; padding: 15px 16px;
  border-radius: 18px; overflow: hidden;
  text-align: left; font: inherit; color: #f3e7cf;
  background:
    radial-gradient(120% 150% at 86% 46%, rgba(255, 196, 92, .22), rgba(20, 17, 14, 0) 60%),
    linear-gradient(160deg, #2C2319 0%, #191410 58%, #120F0C 100%);
  border: 1px solid rgba(233, 190, 108, .34);
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, .16), 0 10px 26px rgba(0, 0, 0, .42);
}
#page-home .hm-card-entry:active { transform: scale(.985); filter: brightness(1.06); }

#page-home .hm-card-entry .hce-txt {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 0;
  width: 56%; min-width: 0;
}
#page-home .hm-card-entry .hce-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px; color: #C9B08A;
}
#page-home .hm-card-entry .hce-price {
  display: flex; align-items: baseline; gap: 5px;
  margin-top: 7px;
}
#page-home .hm-card-entry .hce-price b {
  font-size: 29px; font-weight: 900; line-height: 1; letter-spacing: -.8px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFF6E0 20%, #FFD07A 62%, #D99A34 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
#page-home .hm-card-entry .hce-price i {
  font-style: normal; font-size: 11.5px; font-weight: 600; color: #A08D6E;
}
#page-home .hm-card-entry .hce-sub {
  margin-top: 9px; font-size: 11.5px; color: #A0957F; white-space: nowrap;
}
#page-home .hm-card-entry .hce-sub em { font-style: normal; color: #E4CB9C; font-weight: 700; }
#page-home .hm-card-entry .hce-sub b { color: #FFD07A; font-weight: 800; }

#page-home .hm-card-entry .hce-art {
  position: absolute; right: -10px; bottom: -8px;
  height: 112px; width: auto;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .45));
}
#page-home .hm-card-entry .hce-arrow {
  position: absolute; z-index: 3; top: 14px; right: 14px;
  font-size: 18px; line-height: 1; color: rgba(226, 190, 126, .75);
}

/* 首页 · 小熊卡：插画尺寸与箭头微调（2026-11-09） */
#page-home .hm-card-entry .hce-txt { width: 58%; }
#page-home .hm-card-entry .hce-art {
  right: -6px; bottom: -4px; height: 97px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)) saturate(1.02);
}
#page-home .hm-card-entry .hce-arrow {
  position: static; font-style: normal; font-size: 13px;
  margin-left: 3px; color: #C9A86A;
}

/* ===== 我的卡包（2026-11-09）：卡片列表 / 赠送 / 使用 / 赠送记录 ===== */
.cardpack-page { background: radial-gradient(120% 70% at 50% 0%, #1d1811 0%, #0d0f11 62%, #0a0c0e 100%); }

#page-cardpack .sub-body { padding-top: 14px; }

#page-cardpack .cp-sum {
  display: flex; padding: 13px 6px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .022));
  border: 1px solid rgba(233, 196, 128, .16);
}
#page-cardpack .cp-sum-cell { position: relative; flex: 1; text-align: center; }
#page-cardpack .cp-sum-cell + .cp-sum-cell::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 22px;
  transform: translateY(-50%); background: rgba(255, 255, 255, .08);
}
#page-cardpack .cp-sum-cell b {
  display: block; font-size: 17px; font-weight: 800; color: #ffe0a6;
  font-variant-numeric: tabular-nums;
}
#page-cardpack .cp-sum-cell span { display: block; margin-top: 3px; font-size: 10.5px; color: #948a77; }

#page-cardpack .cp-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 18px 2px 10px;
}
#page-cardpack .cp-sec-head h3 { font-size: 14px; font-weight: 800; color: #f0e2c6; letter-spacing: .4px; }
#page-cardpack .cp-sec-head span { font-size: 11px; color: #8f8572; }

#page-cardpack .cp-list { display: flex; flex-direction: column; gap: 10px; }
#page-cardpack .cp-item {
  padding: 13px 14px; border-radius: 15px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .022));
  border: 1px solid rgba(235, 199, 128, .16);
}
#page-cardpack .cp-item.cp-wait {
  border-color: rgba(255, 205, 130, .42);
  background: linear-gradient(160deg, rgba(255, 198, 110, .14), rgba(255, 255, 255, .02));
  box-shadow: 0 0 0 1px rgba(255, 205, 130, .08) inset, 0 8px 20px rgba(0, 0, 0, .28);
}
#page-cardpack .cp-item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* 待使用卡（有提示文案 + 操作按钮）不显示中央徽记，避免压住按钮 */
#page-cardpack .cp-item:has(.cp-wait-tip)::after { display: none; }
/* 展开后的子卡不加凹槽与徽记 */
#page-cardpack .cp-group-items .cp-item::before,
#page-cardpack .cp-group-items .cp-item::after { display: none; }
#page-cardpack .cp-group-items .cp-item { padding: 12px; }

#page-cardpack .cp-item-top b { font-size: 13.5px; color: #f4e6ca; }
#page-cardpack .cp-tag {
  flex: 0 0 auto; padding: 2px 7px; border-radius: 8px; font-size: 10px;
  color: #a9a08d; background: rgba(255, 255, 255, .06);
}
#page-cardpack .cp-tag-wait { color: #ffd98f; background: rgba(255, 205, 130, .14); border: 1px solid rgba(255, 205, 130, .26); }
#page-cardpack .cp-tag-done { color: #7fd06a; background: rgba(127, 208, 106, .12); }
#page-cardpack .cp-prog { margin-top: 10px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
#page-cardpack .cp-prog i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #f7d493, #d9a64f); }
#page-cardpack .cp-item-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; font-size: 10.5px; color: #9a907d;
}
#page-cardpack .cp-item-meta b { color: #ffd98f; font-size: 12px; }
#page-cardpack .cp-from { margin-top: 6px; font-size: 10.5px; color: #c6a978; }
#page-cardpack .cp-wait-tip { margin-top: 9px; font-size: 11px; color: #b2a58d; }
#page-cardpack .cp-item-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
#page-cardpack .cp-mini-use {
  height: 30px; padding: 0 16px; border-radius: 15px;
  font-size: 12px; font-weight: 700; color: #4d3410;
  background: linear-gradient(180deg, #ffe2a6, #e0ac50);
  border: 1px solid rgba(255, 226, 166, .55);
}
#page-cardpack .cp-mini-use:active { transform: scale(.95); }

#page-cardpack .cp-empty {
  padding: 26px 10px; text-align: center; font-size: 13px; color: #a79b85;
  border-radius: 15px; border: 1px dashed rgba(235, 199, 128, .22);
}
#page-cardpack .cp-empty span { display: block; margin-top: 6px; font-size: 11px; color: #7f7666; }

#page-cardpack .cp-actions { display: flex; gap: 10px; margin-top: 14px; }
#page-cardpack .cp-act {
  flex: 1; height: 44px; border-radius: 22px; font-size: 14px; font-weight: 800; letter-spacing: .5px;
}
#page-cardpack .cp-act-gift {
  color: #4d3410; background: linear-gradient(180deg, #ffe2a6, #dda64a);
  border: 1px solid rgba(255, 226, 166, .5);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}
#page-cardpack .cp-act-use {
  color: #f0d49c; background: linear-gradient(180deg, rgba(58, 48, 32, .75), rgba(26, 21, 15, .85));
  border: 1.2px solid rgba(226, 186, 116, .45);
}
#page-cardpack .cp-act:active { transform: scale(.98); }
#page-cardpack .cp-act[disabled] { opacity: .5; }

#page-cardpack .cp-tabs {
  display: flex; gap: 8px; margin-bottom: 10px; padding: 4px;
  border-radius: 12px; background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .06);
}
#page-cardpack .cp-tabs button {
  flex: 1; height: 32px; border-radius: 9px; font-size: 12px; font-weight: 700; color: #93886f;
}
#page-cardpack .cp-tabs button.on {
  color: #3c2a0c; background: linear-gradient(180deg, #f7d493, #d8a44d);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
}

#page-cardpack .cp-gift-list { display: flex; flex-direction: column; gap: 8px; }
#page-cardpack .cp-gitem {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
}
#page-cardpack .cp-gitem-main { min-width: 0; }
#page-cardpack .cp-gitem-main b { display: block; font-size: 12.5px; color: #efe0c2; }
#page-cardpack .cp-gitem-main span { display: block; margin-top: 4px; font-size: 10.5px; color: #93886f; }
#page-cardpack .cp-gitem time { flex: 0 0 auto; font-size: 10px; color: #7c7362; }

#page-cardpack .cp-foot-pad { height: 30px; }

/* 赠送 / 使用 弹层 */
#page-cardpack .cp-sheet { position: absolute; inset: 0; z-index: 40; }
#page-cardpack .cp-sheet.hide { display: none; }
#page-cardpack .cp-sheet-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); }
#page-cardpack .cp-sheet-box {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, #221c14 0%, #14120f 100%);
  border-top: 1px solid rgba(235, 199, 128, .25);
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .55);
  animation: cpup .22s cubic-bezier(.22, .9, .3, 1) both;
}
@keyframes cpup { from { transform: translateY(60px); opacity: .5; } to { transform: none; opacity: 1; } }
#page-cardpack .cp-sheet-box h3 { font-size: 16px; font-weight: 800; color: #f6e6c8; }
#page-cardpack .cp-sheet-tip { margin-top: 6px; font-size: 11px; line-height: 1.6; color: #9c917b; }

#page-cardpack .cp-pick { display: flex; flex-direction: column; gap: 8px; max-height: 210px; overflow-y: auto; margin-top: 12px; }
#page-cardpack .cp-pick-empty { padding: 18px 10px; text-align: center; font-size: 12px; color: #9a8f79; border-radius: 12px; border: 1px dashed rgba(235, 199, 128, .2); }
#page-cardpack .cp-pick-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border-radius: 12px; text-align: left;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .08);
}
#page-cardpack .cp-pick-item b { font-size: 12.5px; color: #efe0c2; font-weight: 700; }
#page-cardpack .cp-pick-item span { display: block; margin-top: 3px; font-size: 10px; color: #92876f; }
#page-cardpack .cp-pick-item i {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(226, 186, 116, .5);
}
#page-cardpack .cp-pick-item.on {
  border-color: rgba(255, 205, 130, .6);
  background: rgba(255, 198, 110, .12);
}
#page-cardpack .cp-pick-item.on i {
  border-color: #ffd98f;
  background: radial-gradient(circle at 50% 50%, #ffd98f 0 45%, transparent 50%);
}

#page-cardpack .cp-uid { display: block; margin-top: 15px; }
#page-cardpack .cp-uid span { display: block; font-size: 11px; color: #9c917b; margin-bottom: 6px; }
#page-cardpack .cp-uid input {
  width: 100%; height: 42px; padding: 0 13px; border-radius: 12px;
  font-size: 14px; color: #f4e6ca; letter-spacing: .5px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .12);
}
#page-cardpack .cp-uid input::placeholder { color: #6f6757; }
#page-cardpack .cp-uid.hide { display: none; }

#page-cardpack .cp-sheet-btns { display: flex; gap: 10px; margin-top: 16px; }
#page-cardpack .cp-sheet-btns button { flex: 1; height: 44px; border-radius: 22px; font-size: 14px; font-weight: 800; }
#page-cardpack .cp-cancel {
  color: #c9bda3; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
}
#page-cardpack .cp-ok {
  color: #4d3410; background: linear-gradient(180deg, #ffe2a6, #dda64a);
  border: 1px solid rgba(255, 226, 166, .5);
}
#page-cardpack .cp-ok:active, #page-cardpack .cp-cancel:active { transform: scale(.98); }
#page-cardpack .cp-ok[disabled] { opacity: .5; }

/* ============ 话费兑换：鎏金机甲皮肤（2026-11-09） ============ */
.t-phone { background: linear-gradient(155deg, #3A2E1C 0%, #2A2115 55%, #1A150E 100%); border: 1px solid rgba(233, 190, 108, .22); }

#page-phonebill, #page-pbrecords {
  color: #F4E9D2;
  background:
    radial-gradient(140% 46% at 50% -6%, rgba(214, 164, 84, .16), rgba(0, 0, 0, 0) 62%),
    radial-gradient(120% 40% at 50% 104%, rgba(150, 104, 46, .12), rgba(0, 0, 0, 0) 66%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .016) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .34) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    linear-gradient(180deg, #161310 0%, #100E0C 44%, #0A0908 100%);
}
#page-phonebill .pb-subbar, #page-pbrecords .pb-subbar {
  height: 62px;
  background:
    radial-gradient(80% 160% at 50% 0%, rgba(224, 178, 96, .14), rgba(0, 0, 0, 0) 64%),
    linear-gradient(180deg, rgba(23, 19, 14, .98), rgba(14, 12, 10, .98));
  border-bottom: 1px solid rgba(210, 170, 100, .34);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 6px 18px rgba(0, 0, 0, .35);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
#page-phonebill .pb-subbar::after, #page-pbrecords .pb-subbar::after {
  content: ""; position: absolute; left: 28%; right: 28%; bottom: 5px; height: 1px;
  background: linear-gradient(90deg, rgba(232, 202, 140, 0), rgba(232, 202, 140, .6), rgba(232, 202, 140, 0));
}
#page-phonebill .pb-subbar .back, #page-pbrecords .pb-subbar .back {
  width: 36px; height: 36px; color: #EBCE93;
  background: radial-gradient(circle at 36% 28%, #2E2517 0%, #191410 52%, #100D0A 100%);
  border: 1px solid rgba(210, 170, 100, .55);
  box-shadow: inset 0 0 0 3px rgba(8, 7, 6, .9), inset 0 0 0 4px rgba(210, 170, 100, .16), 0 5px 12px rgba(0, 0, 0, .55);
}
#page-phonebill .pb-subbar .back:active, #page-pbrecords .pb-subbar .back:active { background: radial-gradient(circle at 36% 28%, #3A2E1B 0%, #1D1711 60%); transform: translateY(-50%) scale(.94); }
#page-phonebill .subbar-txt h1, #page-pbrecords .subbar-txt h1 {
  font-size: 18.5px; font-weight: 800; letter-spacing: 4px; text-indent: 4px;
  background: linear-gradient(180deg, #FFF4D9 8%, #F3D493 48%, #C99B4F 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(58, 36, 6, .85));
}
#page-phonebill .subbar-txt p, #page-pbrecords .subbar-txt p { margin-top: 3px; font-size: 10.5px; color: #A78B5E; letter-spacing: .4px; }
#page-phonebill .pb-body { top: 62px; padding: 12px 14px 0; }
#page-pbrecords .pb-rec-body { top: 62px; padding: 14px 14px 0; }

#page-phonebill .pb-balrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 2px 4px 14px; font-size: 13px; color: #A08C6A; letter-spacing: .4px;
}
/* 左：当前余额 + 金额（贴在一起）；右：我的兑换记录入口 */
#page-phonebill .pb-bal-l {
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
}
#page-phonebill .pb-bal-l > span { flex: 0 0 auto; font-size: 13px; }
#page-phonebill .pb-balrow b {
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  font-size: 22px; font-weight: 700; letter-spacing: .3px; font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: linear-gradient(180deg, #FFF5DE 6%, #F5D692 52%, #D2A354 98%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(58, 36, 6, .8));
}
#page-phonebill .pb-balrow b i {
  font-style: normal; font-size: 11.5px; font-weight: 600; color: #B08D58;
  -webkit-text-fill-color: #B08D58;
}
#page-phonebill .pb-rec-link {
  flex: 0 0 auto; display: flex; align-items: center; gap: 2px;
  padding: 5px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .3px; color: #CBAD77;
  background: linear-gradient(180deg, rgba(255, 226, 168, .07), rgba(255, 255, 255, .02));
  border: 1px solid rgba(206, 168, 102, .38);
  white-space: nowrap;
}
#page-phonebill .pb-rec-link em { font-style: normal; font-size: 13px; color: #E4C892; }
#page-phonebill .pb-rec-link:active { background: rgba(255, 226, 168, .14); transform: scale(.97); }

#page-phonebill .pb-card {
  padding: 16px 15px 18px;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    linear-gradient(170deg, #1D1712 0%, #15110E 60%, #0D0B09 100%);
  border: 1px solid rgba(214, 176, 108, .35);
  box-shadow: inset 0 1px 0 rgba(255, 226, 168, .12), 0 10px 24px rgba(0, 0, 0, .4);
}
#page-phonebill .pb-label { font-size: 12px; font-weight: 700; letter-spacing: .8px; color: #C9AE7C; }

#page-phonebill .pb-carriers { display: flex; gap: 9px; margin-top: 10px; }
#page-phonebill .pb-carriers button {
  flex: 1; height: 42px; border-radius: 12px; font-size: 13px; font-weight: 600;
  color: #BEA478; background: linear-gradient(180deg, rgba(255, 226, 168, .06), rgba(255, 255, 255, .02));
  border: 1px solid rgba(206, 168, 102, .34);
  transition: all .16s ease;
}
#page-phonebill .pb-carriers button.on {
  color: #3A2408; font-weight: 800;
  background: linear-gradient(180deg, #FFF0C7 0%, #F2CE86 44%, #D7A955 100%);
  border-color: rgba(255, 240, 200, .85);
  box-shadow: 0 0 0 2px rgba(8, 7, 6, .85), 0 6px 14px rgba(190, 145, 70, .28), inset 0 1px 0 rgba(255, 255, 255, .65);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}

#page-phonebill .pb-carriers.locked button { cursor: default; }
#page-phonebill .pb-inputwrap { margin-top: 10px; }
#page-phonebill .pb-inputwrap input {
  width: 100%; height: 48px; padding: 0 14px; border-radius: 13px;
  font-size: 16px; letter-spacing: .8px; color: #F6E9CE;
  font-variant-numeric: tabular-nums;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #1D1813, #100D0B) padding-box,
    linear-gradient(180deg, #F0D59E 0%, #C79A52 44%, #7A5626 100%) border-box;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .55), 0 0 0 2px rgba(8, 7, 6, .8), 0 4px 10px rgba(0, 0, 0, .3);
  outline: 0;
}
#page-phonebill .pb-inputwrap input::placeholder { color: #8A7C63; font-size: 13px; letter-spacing: 0; }
#page-phonebill .pb-inputwrap input:focus {
  background:
    linear-gradient(180deg, #241D15, #14100C) padding-box,
    linear-gradient(180deg, #FFE9B8 0%, #E5B96C 44%, #A07535 100%) border-box;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .55), 0 0 0 2px rgba(8, 7, 6, .8), 0 0 14px rgba(210, 165, 90, .25);
}
#page-phonebill #pbName { letter-spacing: .5px; }

#page-phonebill .pb-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 10px; }
#page-phonebill .pb-plans button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 62px; transition: all .16s ease;
  background: rgba(255, 226, 168, .045); border: 1px solid rgba(206, 168, 102, .26);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
#page-phonebill .pb-plans button b { font-size: 18px; font-weight: 900; color: #F2E3C4; font-variant-numeric: tabular-nums; }
#page-phonebill .pb-plans button b i { font-style: normal; font-size: 11px; font-weight: 600; margin-left: 1px; color: #A08D6E; }
#page-phonebill .pb-plans button span { font-size: 10.5px; color: #9A8F79; }
#page-phonebill .pb-plans button.on {
  background: linear-gradient(160deg, rgba(255, 205, 120, .16), rgba(255, 205, 120, .05));
  border-color: rgba(230, 194, 128, .75);
  box-shadow: inset 0 0 0 2px rgba(12, 9, 6, .9), inset 0 0 0 3px rgba(216, 181, 116, .3);
}
#page-phonebill .pb-plans button.on b { color: #F5D791; }

#page-phonebill .pb-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(226, 190, 126, .22);
  font-size: 12px; color: #9A8F79;
}
#page-phonebill .pb-total b { font-size: 22px; font-weight: 900; color: #F5D791; font-variant-numeric: tabular-nums; }
#page-phonebill .pb-total b i { font-style: normal; font-size: 11px; font-weight: 600; color: #A08D6E; }

#page-phonebill .pb-submit {
  width: 100%; height: 50px; margin-top: 14px; border-radius: 0;
  font-size: 16.5px; font-weight: 800; letter-spacing: 6px; text-indent: 6px; color: #42280A;
  clip-path: polygon(17px 0, calc(100% - 17px) 0, 100% 50%, calc(100% - 17px) 100%, 17px 100%, 0 50%);
  background: linear-gradient(180deg, #FFF3CE 0%, #F5D28B 42%, #DCA858 74%, #C08C3E 100%);
  border: 1px solid rgba(255, 244, 210, .8);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(132, 90, 34, .35), 0 0 0 2px rgba(8, 7, 6, .9), 0 10px 22px rgba(0, 0, 0, .5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
#page-phonebill .pb-submit:active { transform: scale(.985); filter: brightness(1.08); }
#page-phonebill .pb-submit[disabled] { opacity: .5; filter: saturate(.6); }
#page-phonebill .pb-tip { margin-top: 10px; font-size: 10.5px; line-height: 1.6; color: #8C8068; text-align: center; }

#page-phonebill .pb-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 2px 10px; }
#page-phonebill .pb-sec-head h3 { font-size: 16px; font-weight: 800; color: #F3DCA8; letter-spacing: 1px; text-shadow: 0 1px 0 rgba(0, 0, 0, .7); }
#page-phonebill .pb-sec-head span { font-size: 11.5px; color: #A98D5E; letter-spacing: .3px; }

#page-phonebill .pb-orders, #page-pbrecords .pb-orders { display: flex; flex-direction: column; gap: 10px; }
#page-phonebill .pb-order, #page-pbrecords .pb-order {
  padding: 13px 14px; border-radius: 16px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .014) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    radial-gradient(120% 90% at 12% 0%, rgba(226, 180, 104, .10), rgba(0, 0, 0, 0) 55%),
    linear-gradient(180deg, #191410 0%, #100D0A 100%);
  border: 1px solid rgba(206, 168, 102, .32);
  box-shadow: inset 0 1px 0 rgba(255, 232, 180, .07), 0 8px 18px rgba(0, 0, 0, .42);
}
#page-phonebill .pbo-top, #page-pbrecords .pbo-top { display: flex; align-items: center; justify-content: space-between; }
#page-phonebill .pbo-top b, #page-pbrecords .pbo-top b { font-size: 14px; font-weight: 700; color: #F5E7C4; letter-spacing: .3px; }
#page-phonebill .pbo-st, #page-pbrecords .pbo-st { font-size: 11px; font-weight: 700; padding: 2.5px 9px; border-radius: 10px; letter-spacing: .3px; }
#page-phonebill .pbo-st.wait, #page-pbrecords .pbo-st.wait { color: #F0CF92; background: rgba(198, 152, 74, .10); border: 1px solid rgba(222, 188, 124, .58); }
#page-phonebill .pbo-st.ok, #page-pbrecords .pbo-st.ok { color: #8FD37C; background: rgba(110, 190, 90, .08); border: 1px solid rgba(110, 190, 90, .35); }
#page-phonebill .pbo-st.bad, #page-pbrecords .pbo-st.bad { color: #FF8B7B; background: rgba(220, 90, 70, .08); border: 1px solid rgba(220, 90, 70, .35); }
#page-phonebill .pbo-mid, #page-pbrecords .pbo-mid { margin-top: 8px; font-size: 13px; color: #CBB996; letter-spacing: .8px; font-variant-numeric: tabular-nums; }
#page-phonebill .pbo-bot, #page-pbrecords .pbo-bot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 10.5px; color: #92805F; }
#page-phonebill .pbo-bot span:last-child, #page-pbrecords .pbo-bot span:last-child { color: #E8C078; font-weight: 700; }
#page-phonebill .pbo-note, #page-pbrecords .pbo-note { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(226, 190, 126, .18); font-size: 10.5px; color: #B49B72; }
#page-phonebill .pb-empty, #page-pbrecords .pb-empty {
  padding: 26px 10px; text-align: center; font-size: 13px; color: #A79B85;
  border-radius: 16px; border: 1px dashed rgba(222, 188, 124, .35);
}
#page-phonebill .pb-empty span, #page-pbrecords .pb-empty span { display: block; margin-top: 6px; font-size: 11px; color: #82775F; }
#page-phonebill .pb-foot-pad, #page-pbrecords .pb-foot-pad { height: 26px; }

/* ============ 我的兑换记录（独立页 · 鎏金机甲） ============ */
#page-pbrecords {
  background:
    radial-gradient(130% 34% at 50% 0%, rgba(226, 178, 96, .17), rgba(0, 0, 0, 0) 62%),
    radial-gradient(120% 30% at 50% 100%, rgba(150, 106, 48, .13), rgba(0, 0, 0, 0) 66%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .020) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .44) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    linear-gradient(180deg, #14110E 0%, #0B0A09 58%, #060505 100%);
}
#page-pbrecords .pb-rec-body { padding: 16px 15px 0; }

/* 页面四角机甲角件：上、下各一组（固定，不随列表滚动） */
#page-pbrecords::before,
#page-pbrecords::after {
  content: ""; position: absolute; left: 13px; right: 13px; height: 40px;
  z-index: 0; pointer-events: none;
  --ln: rgba(226, 188, 124, .92);
  background-image:
    /* 横线 / 竖线（四个角） */
    linear-gradient(var(--ln), var(--ln)), linear-gradient(var(--ln), var(--ln)),
    linear-gradient(var(--ln), var(--ln)), linear-gradient(var(--ln), var(--ln)),
    /* 角点小方块 */
    linear-gradient(var(--ln), var(--ln)), linear-gradient(var(--ln), var(--ln)),
    linear-gradient(var(--ln), var(--ln)), linear-gradient(var(--ln), var(--ln)),
    linear-gradient(rgba(160, 120, 62, .75), rgba(160, 120, 62, .75)),
    linear-gradient(rgba(160, 120, 62, .75), rgba(160, 120, 62, .75)),
    linear-gradient(rgba(160, 120, 62, .75), rgba(160, 120, 62, .75)),
    linear-gradient(rgba(160, 120, 62, .75), rgba(160, 120, 62, .75));
  background-size:
    40px 1.6px, 1.6px 40px, 40px 1.6px, 1.6px 40px,
    7px 7px, 7px 7px, 7px 7px, 7px 7px,
    26px 1.2px, 1.2px 26px, 26px 1.2px, 1.2px 26px;
  background-position:
    0 0, 0 0, 100% 0, 100% 0,
    0 0, 0 0, 100% 0, 100% 0,
    0 6px, 6px 0, 100% 6px, calc(100% - 6px) 0;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 6px rgba(200, 152, 74, .35));
  opacity: .9;
}
#page-pbrecords::before { top: 68px; }
#page-pbrecords::after {
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  transform: scaleY(-1);
}

/* 记录卡：鎏金渐变描边 + 切角 + 碳纤维斜纹 */
#page-pbrecords .pb-orders { gap: 14px; }
#page-pbrecords .pb-order {
  position: relative;
  padding: 16px 15px 15px;
  border: 2.4px solid transparent;
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
  background-image:
    /* 四角 L 形金压条（8 条） */
    linear-gradient(#F1D3A2, #F1D3A2), linear-gradient(#F1D3A2, #F1D3A2),
    linear-gradient(#F1D3A2, #F1D3A2), linear-gradient(#F1D3A2, #F1D3A2),
    linear-gradient(#F1D3A2, #F1D3A2), linear-gradient(#F1D3A2, #F1D3A2),
    linear-gradient(#F1D3A2, #F1D3A2), linear-gradient(#F1D3A2, #F1D3A2),
    /* 碳纤维 / 斜纹面板 */
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .40) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    radial-gradient(120% 80% at 12% 0%, rgba(226, 180, 104, .10), rgba(0, 0, 0, 0) 58%),
    linear-gradient(180deg, #1B1712 0%, #100D0A 100%),
    /* 鎏金描边（画在 border 区） */
    linear-gradient(168deg, #FFF8E2 0%, #F0CF95 8%, #C79A55 24%, #8F662C 38%, #EFD6A4 54%, #A87C38 70%, #F5DCAE 86%, #FFF8E2 100%);
  background-size:
    14px 1.5px, 1.5px 14px, 14px 1.5px, 1.5px 14px,
    14px 1.5px, 1.5px 14px, 14px 1.5px, 1.5px 14px,
    auto, auto, auto, auto, auto;
  background-position:
    11px 11px, 11px 11px, calc(100% - 11px) 11px, calc(100% - 11px) 11px,
    11px calc(100% - 11px), 11px calc(100% - 11px), calc(100% - 11px) calc(100% - 11px), calc(100% - 11px) calc(100% - 11px),
    0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat,
    repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-clip:
    padding-box, padding-box, padding-box, padding-box,
    padding-box, padding-box, padding-box, padding-box,
    padding-box, padding-box, padding-box, padding-box, border-box;
  box-shadow:
    inset 0 0 0 1px rgba(6, 5, 4, .85),
    inset 0 0 0 2.6px rgba(232, 194, 128, .26),
    0 12px 26px rgba(0, 0, 0, .62),
    0 0 22px rgba(200, 152, 76, .14);
  filter: drop-shadow(0 0 8px rgba(186, 138, 66, .16));
}

/* 标题：三段金渐变 */
#page-pbrecords .pbo-top b {
  font-size: 17px; font-weight: 800; letter-spacing: .6px;
  background: linear-gradient(180deg, #FFF4D9 6%, #F0CE8E 52%, #C3954A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(40, 24, 4, .85));
}

/* 状态胶囊 */
#page-pbrecords .pbo-st {
  flex: 0 0 auto; padding: 4px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .6px;
}
#page-pbrecords .pbo-st.wait {
  color: #F6DCA6;
  background: rgba(24, 19, 12, .9);
  border: 1.4px solid rgba(226, 186, 116, .85);
  box-shadow: inset 0 0 0 1.5px rgba(8, 7, 6, .9), 0 0 12px rgba(200, 156, 82, .22);
}
#page-pbrecords .pbo-st.ok {
  color: #93DE7C;
  background: rgba(18, 24, 14, .9);
  border: 1.4px solid rgba(126, 205, 100, .8);
  box-shadow: inset 0 0 0 1.5px rgba(8, 10, 6, .9), 0 0 12px rgba(110, 190, 90, .22);
}
#page-pbrecords .pbo-st.bad {
  color: #FF9482;
  background: rgba(26, 16, 13, .9);
  border: 1.4px solid rgba(226, 122, 96, .8);
  box-shadow: inset 0 0 0 1.5px rgba(10, 7, 6, .9), 0 0 12px rgba(200, 92, 70, .2);
}

#page-pbrecords .pbo-mid { margin-top: 10px; font-size: 13.5px; color: #EDE1CB; letter-spacing: .6px; }
#page-pbrecords .pbo-bot { margin-top: 10px; font-size: 11px; color: #9C8D71; }
#page-pbrecords .pbo-bot span:last-child {
  font-size: 15px; font-weight: 800; letter-spacing: .2px;
  background: linear-gradient(180deg, #FFF6DE 8%, #F2D396 54%, #CB9C4E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(40, 24, 4, .8));
}
#page-pbrecords .pb-empty {
  border-radius: 0;
  padding: 34px 12px;
  border: 1.6px dashed rgba(214, 176, 108, .42);
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
  background: linear-gradient(180deg, rgba(26, 22, 17, .9), rgba(12, 10, 8, .9));
}

/* ============ 话费兑换：鎏金商品卡（1 行 2 列）+ 兑换弹窗 ============ */
#page-phonebill .pb-goods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* 外框层：只做点击态承载，卡面本身是圆角深色卡 */
/* 外层：鎏金机甲边框（切角 + 中段金属暗口 + 面板压线） */
#page-phonebill .pb-goods-cell {
  padding: 5px;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  background:
    /* 四边中段的金属接缝（分段板甲感） */
    linear-gradient(#080706, #080706) no-repeat 50% 0 / 24px 2.5px,
    linear-gradient(#080706, #080706) no-repeat 50% 100% / 24px 2.5px,
    linear-gradient(#080706, #080706) no-repeat 0 50% / 2.5px 24px,
    linear-gradient(#080706, #080706) no-repeat 100% 50% / 2.5px 24px,
    /* 鎏金主框（外亮 → 中暗 → 内亮的金属条纹） */
    linear-gradient(148deg, #FFF3D0 0%, #D9AF68 10%, #8E6529 22%, #F2DCA8 34%, #A87C38 48%, #6B4618 62%, #DCBB7B 76%, #8D6428 88%, #FFEDC6 100%);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 250, 232, .5);
  transition: transform .16s ease, filter .16s ease;
}
#page-phonebill .pb-goods-cell:active { transform: scale(.985); filter: brightness(1.07); }

#page-phonebill .pb-goods-item {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  width: 100%; height: 100%; margin: 0; padding: 15px 10px 11px; text-align: center; font: inherit;
  border: 0; appearance: none;
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
  /* 8 条角件 + 斜纹底 */
  background-image:
    linear-gradient(#F2D6A4, #F2D6A4),
    linear-gradient(#F2D6A4, #F2D6A4),
    linear-gradient(#F2D6A4, #F2D6A4),
    linear-gradient(#F2D6A4, #F2D6A4),
    linear-gradient(#F2D6A4, #F2D6A4),
    linear-gradient(#F2D6A4, #F2D6A4),
    linear-gradient(#F2D6A4, #F2D6A4),
    linear-gradient(#F2D6A4, #F2D6A4),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .34) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    radial-gradient(120% 70% at 50% 0%, rgba(255, 206, 128, .12), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #1E1811 0%, #14100C 52%, #0A0807 100%);
  background-size:
    13px 1.6px, 1.6px 13px,
    13px 1.6px, 1.6px 13px,
    13px 1.6px, 1.6px 13px,
    13px 1.6px, 1.6px 13px,
    auto, auto, auto, auto;
  background-position:
    10px 10px, 10px 10px,
    calc(100% - 10px) 10px, calc(100% - 10px) 10px,
    10px calc(100% - 10px), 10px calc(100% - 10px),
    calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px),
    0 0, 0 0, 0 0, 0 0;
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat,
    repeat, repeat, no-repeat, no-repeat;
  /* 内凹双线：亮金发丝 → 深色凹槽 → 暗金细线 */
  box-shadow:
    inset 0 0 0 1px rgba(255, 243, 210, .55),
    inset 0 0 0 3.5px rgba(6, 5, 4, .92),
    inset 0 0 0 4.5px rgba(226, 186, 116, .55),
    inset 0 1px 0 rgba(255, 236, 196, .12);
}
#page-phonebill .pb-goods-item > *:not(.pb-goods-frame) { position: relative; z-index: 1; }

/* 角件已在卡片背景里绘制，这层只留一层极淡内框 */
#page-phonebill .pb-goods-frame { display: none; }

#page-phonebill .pb-goods-thumb {
  flex: 0 0 auto; width: 86px; height: 86px; margin: 1px auto 7px; padding: 8px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #FBFAF7;
  border: 1px solid rgba(255, 240, 205, .38);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .10), inset 0 2px 6px rgba(0, 0, 0, .05);
}
#page-phonebill .pb-goods-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 6px; }
#page-phonebill .pb-goods-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
#page-phonebill .pb-goods-info > b {
  font-size: 16px; font-weight: 800; letter-spacing: .6px; white-space: nowrap;
  background: linear-gradient(180deg, #FFF6DE 8%, #F2D396 54%, #CB9C4E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(46, 28, 4, .8));
}
#page-phonebill .pb-goods-desc { font-size: 10.5px; color: #9C8A6D; letter-spacing: .2px; white-space: nowrap; }
#page-phonebill .pb-goods-price { margin-top: 1px; display: flex; align-items: baseline; justify-content: center; gap: 3px; }
#page-phonebill .pb-goods-price b {
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFEFC6 4%, #F0CD84 46%, #C99A4C 98%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(46, 28, 4, .85));
}
#page-phonebill .pb-goods-price i { font-style: normal; font-size: 12.5px; font-weight: 700; color: #C49A5C; letter-spacing: .5px; }
/* 卡片按钮：深色底 + 双层鎏金描边（参考图里的板甲按钮） */
#page-phonebill .pb-goods-btn {
  flex: 0 0 auto; width: 100%; margin-top: 11px; padding: 9px 0;
  font-size: 13.5px; font-weight: 800; letter-spacing: 3px; text-indent: 3px; text-align: center;
  color: #F6DFAE;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
  background:
    linear-gradient(180deg, rgba(255, 226, 168, .10) 0%, rgba(0, 0, 0, 0) 46%),
    linear-gradient(180deg, #2C2316 0%, #171209 52%, #0B0906 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(244, 210, 148, .95),
    inset 0 0 0 4px rgba(7, 6, 5, .95),
    inset 0 0 0 5px rgba(222, 182, 112, .38),
    0 5px 12px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .85), 0 0 10px rgba(255, 205, 130, .18);
}

/* 第一个区块标题贴近余额行 */
#page-phonebill .pb-body > .pb-sec-head:first-of-type { margin-top: 4px; }

/* 兑换弹窗 */
#page-phonebill .pb-mask {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .66);
}
#page-phonebill .pb-mask[hidden] { display: none; }
/* 弹窗：外层精工金框 + 内层深色斜纹面板 */
#page-phonebill .pb-sheet {
  position: relative; width: 100%; padding: 5px;
  border-radius: 18px 18px 0 0;
  background:
    linear-gradient(#080706, #080706) no-repeat 50% 0 / 26px 3px,
    linear-gradient(#080706, #080706) no-repeat 0 50% / 3px 26px,
    linear-gradient(#080706, #080706) no-repeat 100% 50% / 3px 26px,
    linear-gradient(160deg, #FFEFC6 0%, #D2A55C 9%, #7C5522 20%, #EDD29A 33%, #A67934 48%, #5E3F16 63%, #D8B777 78%, #8A6026 90%, #FFEAC0 100%);
  box-shadow: 0 -18px 42px rgba(0, 0, 0, .72), inset 0 1px 0 rgba(255, 250, 232, .55), inset 0 -2px 0 rgba(56, 36, 12, .6);
  animation: pbSheetUp .24s ease;
}
/* 左上 / 右上 装饰角 */
#page-phonebill .pb-sheet::before,
#page-phonebill .pb-sheet::after {
  content: ""; position: absolute; top: 8px; width: 24px; height: 20px; z-index: 2; pointer-events: none;
  border: 1.5px solid rgba(244, 222, 172, .5);
  filter: drop-shadow(0 1px 0 rgba(46, 30, 8, .85));
}
#page-phonebill .pb-sheet::before { left: 8px; border-right: 0; border-bottom: 0; border-radius: 7px 0 0 0; }
#page-phonebill .pb-sheet::after { right: 8px; border-left: 0; border-bottom: 0; border-radius: 0 7px 0 0; }

#page-phonebill .pb-sheet-in {
  padding: 17px 15px calc(20px + env(safe-area-inset-bottom, 0px));
  border-radius: 14px 14px 0 0;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .016) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .32) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    radial-gradient(110% 58% at 50% 0%, rgba(220, 172, 92, .14), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #1B1510 0%, #12100C 60%, #0C0A08 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 243, 210, .5),
    inset 0 0 0 3.5px rgba(6, 5, 4, .9),
    inset 0 0 0 4.5px rgba(226, 186, 116, .5),
    inset 0 1px 0 rgba(255, 232, 180, .10);
}
@keyframes pbSheetUp {
  from { transform: translateY(26px); opacity: .55; }
  to   { transform: none; opacity: 1; }
}
#page-phonebill .pb-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
#page-phonebill .pb-sheet-head h3 {
  font-size: 18px; font-weight: 800; letter-spacing: 3px; text-indent: 3px;
  background: linear-gradient(180deg, #FFF4D9 8%, #F3D493 50%, #C99B4F 98%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(58, 36, 6, .85));
}
#page-phonebill .pb-sheet-x {
  width: 32px; height: 32px; border-radius: 50%; line-height: 1;
  font-size: 19px; color: #F0D49B;
  background: radial-gradient(circle at 38% 30%, #3C2E19 0%, #1A140D 62%, #0D0A07 100%);
  border: 1px solid rgba(232, 198, 134, .85);
  box-shadow: 0 0 0 2px rgba(8, 7, 6, .85), inset 0 0 0 2px rgba(232, 198, 134, .18), 0 4px 10px rgba(0, 0, 0, .5);
}
#page-phonebill .pb-sheet-prod {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 13px; margin-bottom: 14px; border-radius: 14px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    linear-gradient(180deg, #221B14 0%, #16120D 100%);
  border: 1px solid rgba(226, 190, 126, .42);
  box-shadow: inset 0 1px 0 rgba(255, 232, 180, .08), 0 4px 10px rgba(0, 0, 0, .35);
}
#page-phonebill .pb-sheet-prod img { width: 44px; height: 44px; object-fit: contain; }
#page-phonebill .pb-sheet-prod b { display: block; font-size: 15.5px; font-weight: 800; color: #F7E4BC; letter-spacing: .4px; }
#page-phonebill .pb-sheet-prod span { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 700; color: #F0CE8B; letter-spacing: .3px; }
#page-phonebill .pb-sheet .pb-submit { margin-top: 16px; }
#page-phonebill .pb-sheet .pb-tip { margin-top: 10px; }

/* =========================================================
   熊王商城 + 收货地址（2026-11-09）
   ========================================================= */
.shop-page {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 176, 92, .12), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #14100c 0%, #0b0e12 46%, #080a0d 100%);
}

.shop-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 10px;
}
.shop-head-txt { flex: 1; min-width: 0; }
.shop-head-txt h1 {
  font-size: 22px; font-weight: 900; letter-spacing: .5px;
  background: linear-gradient(180deg, #FFF6DC 0%, #FFDF9C 46%, #DCA64A 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(255, 180, 70, .25));
}
.shop-head-txt p { margin-top: 4px; font-size: 11.5px; color: #9A8F7C; letter-spacing: .4px; }

.shop-bal {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding: 8px 13px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(58, 46, 30, .8), rgba(24, 19, 14, .9));
  border: 1px solid rgba(226, 186, 116, .34);
}
.shop-bal span { font-size: 10px; color: #A5967C; }
.shop-bal b { font-size: 15px; font-weight: 800; color: #FFD98F; font-variant-numeric: tabular-nums; }
.shop-bal:active { transform: scale(.97); }

.shop-banner {
  position: relative; display: flex; align-items: center; gap: 10px;
  margin: 4px 16px 0; padding: 14px 16px; border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(90% 120% at 82% 20%, rgba(255, 196, 112, .22), rgba(0, 0, 0, 0) 62%),
    linear-gradient(135deg, #2A2118 0%, #1A1510 60%, #12100D 100%);
  border: 1px solid rgba(226, 186, 116, .26);
}
.shop-banner .sb-txt { flex: 1; min-width: 0; }
.shop-banner .sb-txt b {
  display: block; font-size: 15px; font-weight: 900; color: #FBE7BE; letter-spacing: .5px;
}
.shop-banner .sb-txt span {
  display: block; margin-top: 5px; font-size: 10.5px; line-height: 1.5; color: #9A8E7A;
}
.shop-banner img {
  flex: 0 0 auto; width: 74px; height: 74px; object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5));
}

.shop-tabs {
  display: flex; gap: 8px; margin: 14px 16px 0; padding: 4px;
  border-radius: 14px; background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .06);
}
.shop-tabs button {
  flex: 1; height: 34px; border-radius: 10px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: #93886F;
}
.shop-tabs button.on {
  color: #3C2A0C;
  background: linear-gradient(180deg, #F7D493, #D8A44D);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .32);
}

.shop-panel { display: none; padding: 14px 16px 0; }
.shop-panel.on { display: block; }

.shop-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.shop-card {
  display: flex; flex-direction: column;
  padding: 9px 9px 10px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(34, 29, 24, .96), rgba(16, 14, 12, .97));
  border: 1.2px solid rgba(226, 186, 116, .26);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 243, 214, .06);
}
.shop-card.sold { opacity: .68; }
.shop-pic {
  position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
  background: rgba(255, 255, 255, .05);
}
.shop-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-noimg {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #7A7166;
}
.shop-sold {
  position: absolute; inset: auto 0 0 0; padding: 3px 0; text-align: center;
  font-size: 10.5px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .62);
}
.shop-name {
  margin-top: 8px; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: #F1E2C6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 33px;
}
.shop-price { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; }
.shop-price i {
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF3C8, #F0C064 55%, #A8741F);
  box-shadow: inset 0 0 0 1.4px rgba(120, 76, 18, .45);
  transform: translateY(-1px);
}
.shop-price b { font-size: 16px; font-weight: 900; color: #FFD98F; font-variant-numeric: tabular-nums; }
.shop-price span { font-size: 10px; color: #9A8E7A; }
.shop-stock { margin-top: 3px; font-size: 10px; color: #8A8070; }
.shop-buy {
  margin-top: 9px; width: 100%; height: 32px; border: 0; border-radius: 999px;
  font-family: inherit; font-size: 12.5px; font-weight: 900; letter-spacing: .04em;
  color: #3B2405;
  background: linear-gradient(180deg, #FFF0C2 0%, #F3D080 22%, #DCA64A 56%, #B9802C 100%);
  box-shadow: 0 0 0 2px rgba(120, 82, 24, .35), inset 0 2px 0 rgba(255, 255, 255, .65),
             inset 0 -3px 8px rgba(120, 70, 10, .3);
  transition: transform .12s ease, filter .12s ease;
}
.shop-buy:active { transform: scale(.97); filter: brightness(1.05); }
.shop-buy[disabled] { opacity: .55; }

.shop-empty {
  grid-column: 1 / -1;
  padding: 40px 10px; text-align: center; font-size: 12.5px; color: #A79B85;
  border-radius: 16px; border: 1px dashed rgba(235, 199, 128, .2);
}
.shop-empty span { display: block; margin-top: 6px; font-size: 11px; color: #7F7666; }

/* 兑换记录 */
.shop-orders { display: flex; flex-direction: column; gap: 9px; }
.shop-ocard {
  padding: 12px 13px; border-radius: 15px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(235, 199, 128, .16);
}
.shop-ocard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shop-ocard-top span { font-size: 13px; font-weight: 700; color: #F1E2C6; }
.shop-ocard-top b { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; }
.shop-ocard-top b.s1 { color: #FFD98F; }
.shop-ocard-top b.s2 { color: #8AB4FF; }
.shop-ocard-top b.s3 { color: #7FD06A; }
.shop-ocard-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 7px; font-size: 10.5px; color: #92876F;
}
.shop-ocard-meta em { font-style: normal; font-weight: 800; color: #FFD98F; }
.shop-ocard-addr { margin-top: 6px; font-size: 10.5px; color: #8A8070; line-height: 1.5; }
.shop-ocard-foot { display: flex; justify-content: flex-end; margin-top: 9px; }
.shop-o-btn {
  height: 30px; padding: 0 15px; border-radius: 15px;
  font-family: inherit; font-size: 12px; font-weight: 800; color: #4D3410;
  background: linear-gradient(180deg, #FFE2A6, #E0AC50);
  border: 1px solid rgba(255, 226, 166, .55);
}
.shop-o-btn:active { transform: scale(.95); }

/* 兑换弹层：商品小卡 */
.shop-goods-mini {
  display: flex; gap: 11px; margin-top: 12px; padding: 10px;
  border-radius: 14px; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
}
.shop-goods-mini .sgm-pic {
  flex: 0 0 62px; width: 62px; height: 62px; border-radius: 10px; overflow: hidden;
  background: rgba(255, 255, 255, .06);
}
.shop-goods-mini .sgm-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-goods-mini .sgm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.shop-goods-mini .sgm-txt b { font-size: 13px; color: #F1E2C6; }
.shop-goods-mini .sgm-txt span { font-size: 11px; color: #FFD98F; }
.shop-goods-mini .sgm-txt em { font-style: normal; font-size: 10.5px; color: #8A8070; }

/* ========= 通用底部弹层（商城 / 地址） ========= */
.mk-sheet { position: absolute; inset: 0; z-index: 70; }
.mk-sheet.hide { display: none; }
.mk-sheet.mk-global { position: fixed; }
.mk-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .66); }
.mk-box {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88%; overflow-y: auto;
  padding: 18px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, #221C14 0%, #14120F 100%);
  border-top: 1px solid rgba(235, 199, 128, .25);
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .6);
  animation: mkup .22s cubic-bezier(.22, .9, .3, 1) both;
}
@keyframes mkup { from { transform: translateY(60px); opacity: .5; } to { transform: none; opacity: 1; } }
.mk-box h3 { font-size: 16px; font-weight: 800; color: #F6E6C8; }

.mk-field { margin-top: 14px; }
.mk-field > span { display: block; font-size: 11px; color: #9C917B; margin-bottom: 7px; }
.mk-addrs { display: flex; flex-direction: column; gap: 8px; max-height: 172px; overflow-y: auto; }
.mk-addr-empty {
  padding: 15px 10px; text-align: center; font-size: 11.5px; color: #9A8F79;
  border-radius: 12px; border: 1px dashed rgba(235, 199, 128, .22);
}
.mk-addr {
  padding: 10px 12px; border-radius: 12px; text-align: left;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .08);
}
.mk-addr.on { border-color: rgba(255, 205, 130, .6); background: rgba(255, 198, 110, .12); }
.mk-addr-t { display: flex; align-items: center; gap: 8px; }
.mk-addr-t b { font-size: 12.5px; color: #F1E2C6; }
.mk-addr-t span { font-size: 11px; color: #9A8F79; }
.mk-addr-t i {
  font-style: normal; font-size: 9.5px; padding: 1px 6px; border-radius: 7px;
  color: #FFD98F; background: rgba(255, 205, 130, .14);
  border: 1px solid rgba(255, 205, 130, .26);
}
.mk-addr p { margin-top: 5px; font-size: 10.5px; line-height: 1.5; color: #8A8070; }
.mk-link {
  margin-top: 9px; height: 30px; padding: 0 13px; border-radius: 15px;
  font-family: inherit; font-size: 11.5px; font-weight: 700; color: #EBC98A;
  background: rgba(255, 255, 255, .05);
  border: 1px dashed rgba(226, 186, 116, .45);
}
.mk-qty { display: flex; align-items: center; gap: 10px; }
.mk-qty button {
  width: 34px; height: 34px; border-radius: 10px; font-size: 17px; font-weight: 700;
  color: #EBC98A; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
}
.mk-qty button:active { transform: scale(.93); }
.mk-qty input {
  width: 64px; height: 34px; text-align: center; border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 700; color: #F4E6CA;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  -moz-appearance: textfield;
}
.mk-qty input::-webkit-outer-spin-button,
.mk-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mk-total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, .08);
}
.mk-total span { font-size: 12px; color: #9C917B; }
.mk-total b { font-size: 18px; font-weight: 900; color: #FFD98F; font-variant-numeric: tabular-nums; }
.mk-total b i { font-style: normal; }

.mk-btns { display: flex; gap: 10px; margin-top: 16px; }
.mk-btns button { flex: 1; height: 44px; border-radius: 22px; font-family: inherit; font-size: 14px; font-weight: 800; }
.mk-cancel { color: #C9BDA3; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.mk-ok { color: #4D3410; background: linear-gradient(180deg, #FFE2A6, #DDA64A); border: 1px solid rgba(255, 226, 166, .5); }
.mk-ok:active, .mk-cancel:active { transform: scale(.98); }
.mk-ok[disabled] { opacity: .5; }

.mk-input { display: block; margin-top: 13px; }
.mk-input > span { display: block; font-size: 11px; color: #9C917B; margin-bottom: 6px; }
.mk-input input, .mk-input textarea {
  width: 100%; padding: 11px 13px; border-radius: 12px; resize: none;
  font-family: inherit; font-size: 13.5px; color: #F4E6CA; line-height: 1.5;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .12);
}
.mk-input input { height: 42px; }
.mk-input input::placeholder, .mk-input textarea::placeholder { color: #6F6757; }
.mk-check { display: flex; align-items: center; gap: 8px; margin-top: 13px; }
.mk-check input { width: 17px; height: 17px; accent-color: #DCA64A; }
.mk-check span { font-size: 12px; color: #B6A98F; }

/* ========= 收货地址页 ========= */
.addr-page { background: linear-gradient(180deg, #14100C 0%, #0B0E12 60%, #080A0D 100%); }
.addr-page .sub-body { padding-top: 14px; }
.addr-list { display: flex; flex-direction: column; gap: 10px; }
.addr-item {
  padding: 13px 14px; border-radius: 15px;
  background: linear-gradient(180deg, rgba(34, 29, 24, .9), rgba(18, 16, 13, .95));
  border: 1.2px solid rgba(226, 186, 116, .22);
}
.addr-item.def { border-color: rgba(255, 205, 130, .45); }
.addr-top { display: flex; align-items: center; gap: 9px; }
.addr-top b { font-size: 13.5px; color: #F1E2C6; }
.addr-top span { font-size: 11.5px; color: #9A8F79; }
.addr-top i {
  font-style: normal; font-size: 9.5px; padding: 1px 6px; border-radius: 7px;
  color: #FFD98F; background: rgba(255, 205, 130, .14);
  border: 1px solid rgba(255, 205, 130, .26);
}
.addr-item p { margin-top: 7px; font-size: 11.5px; line-height: 1.55; color: #A0937C; }
.addr-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.addr-acts button {
  height: 28px; padding: 0 12px; border-radius: 14px;
  font-family: inherit; font-size: 11px; font-weight: 700; color: #D9CBB2;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
}
.addr-acts button.del { color: #FFB1B1; border-color: rgba(255, 107, 107, .25); background: rgba(255, 107, 107, .08); }
.addr-acts button:active { transform: scale(.95); }
.addr-add {
  width: 100%; height: 46px; margin-top: 14px; border-radius: 23px;
  font-family: inherit; font-size: 14.5px; font-weight: 800; letter-spacing: .5px;
  color: #4D3410;
  background: linear-gradient(180deg, #FFE2A6, #DDA64A);
  border: 1px solid rgba(255, 226, 166, .5);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}
.addr-add:active { transform: scale(.98); }
.addr-foot-pad { height: 28px; }

/* 我的 · 商品交易卡（跳熊王商城） */
.t-trade {
  background: linear-gradient(155deg, #3A2E1C 0%, #2A2115 55%, #1A150E 100%);
  border: 1px solid rgba(233, 190, 108, .22);
}
.mine-duo .t-trade img { width: 84px; height: 86px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }

/* ============ 商品交易（交易大厅风格） ============ */
.t-trade { background: linear-gradient(155deg, #2E2618 0%, #221C12 55%, #15110B 100%); border: 1px solid rgba(233, 190, 108, .22); }

#page-trade { background: #0D0F12; color: #f2ece1; }
#page-trade .ptx-head {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  height: 78px; padding: 12px 16px 0;
  background: rgba(13, 15, 18, .96);
  border-bottom: 1px solid rgba(233, 196, 128, .12);
}
#page-trade .ptx-head .back {
  flex: 0 0 auto; width: 30px; height: 30px; margin-top: 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #E8CFA2;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
}
#page-trade .ptx-head .back svg { width: 16px; height: 16px; }
#page-trade .ptx-head-txt { flex: 1; min-width: 0; padding-top: 4px; }
#page-trade .ptx-head-txt h1 {
  font-size: 23px; font-weight: 900; letter-spacing: .5px;
  background: linear-gradient(180deg, #FDF4E3 22%, #E0C9A2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
#page-trade .ptx-head-txt p { margin-top: 6px; font-size: 11px; letter-spacing: 1px; color: #9C917E; }
#page-trade .ptx-head-av { flex: 0 0 auto; width: 38px; height: 38px; }
#page-trade .ptx-head-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

#page-trade .ptx-scroll { padding: 12px 0 0; }
#page-trade .ptx-mkt { margin: 0 16px; }
#page-trade .ptx-mkt .tx-mkt-cell b { font-size: 18px; }

#page-trade .ptx-goods { margin: 12px 16px 0; padding-bottom: 8px; }
#page-trade .ptx-goods-head {
  display: flex; align-items: center; padding: 11px 14px 5px;
  font-size: 10px; color: #6B727D;
}
#page-trade .ptx-goods-head span:nth-child(1) { flex: 1; }
#page-trade .ptx-goods-head span:nth-child(2) { width: 46px; text-align: right; }
#page-trade .ptx-goods-head span:nth-child(3) { width: 48px; text-align: right; }
#page-trade .ptx-goods-head span:nth-child(4) { width: 52px; text-align: right; }

#page-trade .ptx-row {
  display: flex; align-items: center; gap: 7px;
  margin: 5px 8px; padding: 8px 10px; border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid transparent;
}
#page-trade .ptx-row:active { background: rgba(255, 255, 255, .07); }
#page-trade .ptx-row.off { opacity: .55; }
#page-trade .ptx-row-pic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; overflow: hidden; background: rgba(255,255,255,.05); }
#page-trade .ptx-row-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
#page-trade .ptx-row-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#page-trade .ptx-row-name b { font-size: 13.5px; font-weight: 700; color: #F1E6D2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-trade .ptx-row-name em { font-style: normal; font-size: 10px; color: #8C8474; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-trade .ptx-row-price {
  width: 46px; text-align: right; font-size: 15.5px; font-weight: 800; color: #F5D9A8;
  font-variant-numeric: tabular-nums;
}
#page-trade .ptx-row-stock { width: 48px; text-align: right; font-size: 10px; color: #9A917F; }
#page-trade .ptx-row-act { width: 52px; display: flex; justify-content: flex-end; }
#page-trade .ptx-buy {
  padding: 6px 9px; border-radius: 11px; font-size: 11px; font-weight: 800; color: #2A1C08;
  background: linear-gradient(180deg, #FFE8B4 0%, #F5C871 100%);
  box-shadow: 0 5px 12px rgba(240, 190, 90, .24), inset 0 1px 0 rgba(255, 255, 255, .5);
}
#page-trade .ptx-buy.off { color: #9A9286; background: rgba(255,255,255,.08); box-shadow: none; }

#page-trade .ptx-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 18px 9px; }
#page-trade .ptx-sec-head h3 { font-size: 14px; font-weight: 800; color: #F0E2C6; letter-spacing: .4px; }
#page-trade .ptx-sec-head span { font-size: 10.5px; color: #8F8572; }

#page-trade .ptx-orders { display: flex; flex-direction: column; gap: 9px; margin: 0 16px; }
#page-trade .ptx-order {
  padding: 12px 13px; border-radius: 15px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  border: 1px solid rgba(235, 199, 128, .14);
}
#page-trade .pbo-top { display: flex; align-items: center; justify-content: space-between; }
#page-trade .pbo-top b { font-size: 13px; color: #F4E6CA; }
#page-trade .pbo-st { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 9px; }
#page-trade .pbo-st.wait { color: #FFD07A; background: rgba(255, 205, 130, .13); border: 1px solid rgba(255, 205, 130, .26); }
#page-trade .pbo-st.ship { color: #7FC3FF; background: rgba(90, 170, 255, .13); border: 1px solid rgba(90, 170, 255, .26); }
#page-trade .pbo-st.ok { color: #7FD06A; background: rgba(110, 210, 90, .12); border: 1px solid rgba(110, 210, 90, .26); }
#page-trade .pbo-st.bad { color: #FF7A6B; background: rgba(255, 110, 90, .12); border: 1px solid rgba(255, 110, 90, .26); }
#page-trade .pbo-mid { margin-top: 6px; font-size: 12px; color: #D6C7AA; }
#page-trade .pbo-note { margin-top: 5px; font-size: 10.5px; line-height: 1.6; color: #97907F; }
#page-trade .pbo-bot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-size: 10px; color: #8E8471; }
#page-trade .pbo-bot span:last-child { color: #E7B86A; font-weight: 700; }

#page-trade .ptx-empty {
  margin: 4px 8px 8px; padding: 24px 10px; text-align: center;
  font-size: 12.5px; color: #A79B85; border-radius: 14px; border: 1px dashed rgba(235, 199, 128, .18);
}
#page-trade .ptx-empty span { display: block; margin-top: 6px; font-size: 10.5px; color: #7F7666; }
#page-trade .ptx-foot-pad { height: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* 购买弹窗内的数量与地址 */
#page-trade .ptx-qty { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
#page-trade .ptx-qty button {
  width: 38px; height: 38px; border-radius: 11px; font-size: 18px; font-weight: 700; color: #E8CFA2;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(233, 190, 108, .22);
}
#page-trade .ptx-qty input {
  flex: 1; height: 38px; text-align: center; border-radius: 11px;
  font-size: 15px; font-weight: 700; color: #F6E9CE;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(233, 190, 108, .22); outline: 0;
}
#page-trade .ptx-addrs { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-height: 148px; overflow-y: auto; }
#page-trade .ptx-addr {
  padding: 10px 12px; border-radius: 12px; text-align: left; font: inherit;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(233, 190, 108, .16);
}
#page-trade .ptx-addr.on { border-color: rgba(255, 208, 122, .7); background: linear-gradient(160deg, rgba(255, 205, 120, .16), rgba(255, 205, 120, .05)); }
#page-trade .ptx-addr-t { display: flex; align-items: center; gap: 8px; }
#page-trade .ptx-addr-t b { font-size: 12.5px; color: #F2E4C8; }
#page-trade .ptx-addr-t span { font-size: 11px; color: #A79B85; }
#page-trade .ptx-addr-t i { font-style: normal; font-size: 9.5px; padding: 1px 6px; border-radius: 6px; color: #FFD07A; background: rgba(255, 205, 130, .15); }
#page-trade .ptx-addr p { margin-top: 5px; font-size: 10.5px; line-height: 1.55; color: #948C7B; }
#page-trade .ptx-addr-empty { padding: 16px 10px; text-align: center; font-size: 11.5px; color: #9A907D; border-radius: 12px; border: 1px dashed rgba(235, 199, 128, .2); }
#page-trade .ptx-addr-new { margin-top: 8px; font-size: 11.5px; color: #E8CFA2; }

/* =========================================================
   首页 v4（2026-11-09）：设计图整幅底图 + 动态数字
   画布：设计稿 1088 × 1983（已裁掉底部导航），按宽度等比
   ========================================================= */
.hm3-page { background: #141318; }
.hm3-page .scroll {
  padding: 0 0 90px;
  background: #141318;
}

.hm3 {
  position: relative;
  width: 100%;
  aspect-ratio: 1088 / 1922;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
.hm3-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/* 透明热区 */
.hm3-hot {
  position: absolute;
  padding: 0; border: 0; background: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, filter .14s ease;
}
.hm3-hot:active { transform: scale(.985); filter: brightness(1.06); }

.hm3-crest {
  left: 85.29%; top: 1.87%; width: 10.66%; height: 5.41%;
  border-radius: 50%;
}
.hm3-crest img {
  width: 100%; height: 100%;
  object-fit: contain; border-radius: 50%;
  background: rgba(0, 0, 0, .2);
}

.hm3-card { left: 3.676%; top: 41.21%; width: 92.65%; height: 20.40%; border-radius: 4.5%/9%; }
.hm3-game { left: 3.676%; top: 62.23%; width: 45.40%; height: 13.32%; border-radius: 5%/12%; }
.hm3-mine { left: 51.84%; top: 62.84%; width: 44.49%; height: 13.84%; border-radius: 6%/16%; }

/* 首页 · 熊王矿机卡（文字 + 齿轮宝箱） */
.hm3-mine-txt {
  position: absolute;
  left: 55.1%; top: 64.6%;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.hm3-mine-txt b {
  font-size: 17px; font-weight: 900; letter-spacing: .6px;
  color: #FBF0DA;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .65);
}
.hm3-mine-txt span {
  display: inline-flex; align-items: center;
  width: fit-content;
  padding: 3px 10px; border-radius: 999px;
  font-size: 10px; color: #E2CBA3;
  background: rgba(60, 44, 26, .55);
  border: 1px solid rgba(226, 186, 116, .34);
}
.hm3-mine-txt em { font-style: normal; color: #FFD98F; font-weight: 800; margin: 0 2px; }
.hm3-mine-art {
  position: absolute;
  right: 4.6%; top: 66.1%;
  width: 15.5%; height: auto;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55));
}
.hm3-park { left: 3.676%; top: 79.50%; width: 92.65%; height: 11.34%; border-radius: 3%/14%; }

/* ---- 小熊卡：价格 ---- */
.hm3-price {
  position: absolute;
  right: 65.07%; top: 50.26%;
  transform: translateY(-50%);
  display: block;
  pointer-events: none;
  line-height: 1;
}
.hm3-price b {
  display: block;
  transform: scaleX(.82);
  transform-origin: right center;   /* 设计稿数字偏窄体，横向压缩对齐右缘 */
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -1.8px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFF6DA 0%, #FFE7AE 26%, #F2C063 58%, #C68A2C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(90, 52, 0, .55)) drop-shadow(0 6px 14px rgba(255, 180, 70, .28));
}

/* 价格位数多时降字号（4 位 / 5 位以上） */
.hm3-price.lg b { font-size: 34px; letter-spacing: -1.2px; }
.hm3-price.xl b { font-size: 29px; letter-spacing: -1px; }

/* ---- 小熊卡：左侧「每日领取 / N天」徽标 ---- */
.hm3-badge {
  position: absolute;
  left: 5.88%; top: 46.93%; width: 10.85%; height: 7.60%;
  display: flex; flex-direction: column;
  pointer-events: none;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .55));
}
/* 牌面：上方两角切角，模拟设计稿的盾形描边 */
.hm3-badge .hb-t {
  position: relative;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 10px; line-height: 1.12; font-weight: 800;
  letter-spacing: .4px;
  color: #F7DFB2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
  background: linear-gradient(180deg, rgba(46, 36, 24, .96), rgba(20, 16, 12, .96));
  clip-path: polygon(16% 0, 84% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
}
.hm3-badge .hb-t::before {
  content: "";
  position: absolute; inset: 0;
  clip-path: polygon(16% 0, 84% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
  border: 1px solid rgba(240, 202, 132, .75);
  box-sizing: border-box;
  pointer-events: none;
}
/* 金色横带：比牌面略宽，两端微微出头 */
.hm3-badge .hb-d {
  flex: 0 0 34%;
  width: 112%; margin-left: -6%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
  font-size: 9.5px; font-weight: 900;
  color: #4A2E05;
  background: linear-gradient(180deg, #FFEFC0 0%, #F0C877 34%, #C99341 100%);
  box-shadow: inset 0 1px 0 rgba(255, 248, 220, .85), inset 0 -1px 2px rgba(120, 76, 18, .45),
              0 0 0 1px rgba(120, 82, 24, .5);
  text-shadow: 0 1px 0 rgba(255, 244, 214, .55);
}
.hm3-badge .hb-d em { font-style: normal; font-variant-numeric: tabular-nums; }

/* ---- 小熊卡：底部胶囊 ---- */
.hm3-pill {
  position: absolute;
  left: 8.09%; top: 54.63%; height: 4.27%;
  display: flex; align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(226, 186, 116, .38);
  background: linear-gradient(180deg, rgba(64, 50, 30, .55), rgba(24, 19, 14, .72));
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .1);
  font-size: 12px; font-weight: 600;
  color: #E9D5AE;
  white-space: nowrap;
  pointer-events: none;
}
.hm3-pill b {
  font-size: 13.5px; font-weight: 900;
  color: #FFE0A6;
  font-variant-numeric: tabular-nums;
  margin: 0 2px;
}
.hm3-pill em {
  font-style: normal;
  margin-left: 5px;
  font-size: 13px;
  color: #C6A468;
}

/* ============ 小熊卡 · 5 个卡槽（2026-11-09） ============ */
#page-card .cd-slots { display: grid; gap: 8px; margin: 0 2px 12px; }
#page-card .cd-slot {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; height: 62px; border-radius: 13px;
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(235, 199, 128, .26);
}
#page-card .cd-slot b {
  font-size: 12px; font-weight: 900; color: #7E7666; line-height: 1;
}
#page-card .cd-slot em { font-style: normal; font-size: 10px; color: #7E7666; line-height: 1.2; }
#page-card .cd-slot span { font-size: 9px; color: #6A6357; line-height: 1.1; }
#page-card .cd-slot.on {
  border-style: solid;
  background: linear-gradient(160deg, rgba(255, 208, 122, .16), rgba(255, 255, 255, .03));
  border-color: rgba(255, 208, 122, .5);
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, .18);
}
#page-card .cd-slot.on b { color: #FFD07A; }
#page-card .cd-slot.on em { color: #E8CFA2; font-weight: 700; }
#page-card .cd-slot.on span { color: #A8997F; }
#page-card .cd-slot.active {
  background: linear-gradient(160deg, rgba(126, 214, 106, .18), rgba(255, 255, 255, .03));
  border-color: rgba(126, 214, 106, .5);
}
#page-card .cd-slot.active b { color: #9FE07F; }
#page-card .cd-slot.active em { color: #B9E8A4; }

#page-card .cd-ended-head {
  margin: 16px 2px 8px; font-size: 11.5px; font-weight: 700; color: #8F8470; letter-spacing: .3px;
}
#page-card .cd-ended { display: flex; flex-direction: column; gap: 6px; }
#page-card .cd-ended-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-radius: 11px;
  background: rgba(255, 255, 255, .028);
  border: 1px solid rgba(255, 255, 255, .06);
}
#page-card .cd-ended-item b { font-size: 11.5px; font-weight: 700; color: #8E8573; }
#page-card .cd-ended-item span { font-size: 10px; color: #7A7264; }

/* =========================================================
   商品交易 v2（2026-11-09）：设计图整幅底图 + HTML 商品卡/记录
   底图：assets/ptx2/top.webp 1088×975（行情数字已从图里抹掉）
        assets/ptx2/bottom.webp 1088×546（记录标题 + 空态框）
   ========================================================= */
#page-trade { background: #0E0E10; color: #F2ECE1; }
#page-trade .ptx2-scroll {
  padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px));
  background: #0E0E10;
}

.ptx2-top { position: relative; width: 100%; aspect-ratio: 1088 / 975; }
.ptx2-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: fill;
  pointer-events: none; user-select: none;
}
.ptx2-back {
  position: absolute; left: 2.6%; top: 4.4%; width: 9.6%; height: 10.5%;
  border-radius: 50%; background: transparent;
}

/* 行情数字：贴着设计稿的坐标，居中/右对齐都能跟着位数自适应 */
.ptx2-stat {
  position: absolute; top: 92.9%;
  transform: translate(-50%, -50%);
  line-height: 1; pointer-events: none; white-space: nowrap;
}
.ptx2-stat.s1 { left: 35.66%; }
.ptx2-stat.s2 { left: 56.30%; }
.ptx2-stat.s3 { left: auto; right: 6.43%; transform: translateY(-50%); }
.ptx2-stat b {
  font-size: 18px; font-weight: 800; letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
  color: #F6F3EC;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .65);
}
.ptx2-stat.s2 b { color: #38D64E; text-shadow: 0 0 10px rgba(56, 214, 78, .35); }

/* 中部：商品面板 */
.ptx2-body { background: linear-gradient(180deg, #0E0E10 0%, #111113 26%, #0F0F11 100%); }
.ptx2-panel {
  margin: 5px 5.51% 0; padding: 9px 6px 11px; border-radius: 18px;
  background: linear-gradient(180deg, #1C1B1F 0%, #19181B 55%, #151417 100%);
  border: 1px solid rgba(255, 255, 255, .045);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.ptx2-panel > h3 {
  margin: 2px 6px 9px;
  font-size: 15px; font-weight: 900; letter-spacing: .6px;
  background: linear-gradient(180deg, #FFF7E3 20%, #E6C98C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(140, 90, 20, .35));
}
.ptx2-list { display: flex; flex-direction: column; gap: 3px; }

/* 商品卡：外层金线 + 内层深色玻璃 + 45° 切角 */
.ptx2-card {
  position: relative;
  display: flex; align-items: center; gap: 4px;
  min-height: 84px; padding: 4px 8px 4px 4px;
  background: linear-gradient(150deg, #EBD2A1 0%, #8E6A33 26%, #F3E0B4 52%, #7E5B27 78%, #D7B77E 100%);
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px),
                     calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
}
.ptx2-card::before {
  content: '';
  position: absolute; inset: 1px;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px),
                     calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .055) 0 14%, rgba(255, 255, 255, 0) 14% 76%, rgba(255, 255, 255, .04) 76% 100%),
    linear-gradient(158deg, #27262D 0%, #18171C 48%, #101014 100%);
}
.ptx2-card > * { position: relative; z-index: 1; }
.ptx2-card.off { opacity: .6; }
.ptx2-card:active { filter: brightness(1.06); }

.ptx2-thumb {
  flex: 0 0 58px; height: 76px;
  display: flex; align-items: center; justify-content: center;
}
.ptx2-thumb img { width: 58px; height: 76px; object-fit: contain; display: block; }

.ptx2-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ptx2-info b {
  font-size: 14px; font-weight: 800; color: #F3E8D2; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ptx2-info em {
  font-style: normal; font-size: 10px; color: #8E8778;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ptx2-price {
  flex: 0 0 auto; min-width: 40px; text-align: right;
  font-size: 20px; font-weight: 900; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFF8E6 24%, #EFCE92 62%, #D3A45C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(90, 52, 0, .5));
}
.ptx2-stock { flex: 0 0 44px; text-align: right; font-size: 10.5px; color: #9C9384; }
.ptx2-act { flex: 0 0 52px; display: flex; justify-content: flex-end; }
.ptx2-buy {
  width: 52px; height: 32px; border-radius: 10px;
  font-size: 12px; font-weight: 800; letter-spacing: .3px; color: #2A1C08;
  background: linear-gradient(180deg, #FFEFC4 0%, #F0C065 55%, #D79B36 100%);
  box-shadow: 0 6px 14px rgba(235, 170, 60, .28), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.ptx2-buy.off { background: rgba(255, 255, 255, .08); color: #9A9286; box-shadow: none; }

.ptx2-empty {
  margin: 4px 6px 2px; padding: 22px 10px; text-align: center;
  border-radius: 14px; border: 1px dashed rgba(230, 190, 120, .22);
  font-size: 12.5px; color: #A79B85;
}
.ptx2-empty span { display: block; margin-top: 6px; font-size: 10.5px; color: #7F7666; }

/* 底部：记录标题 + 空态框（有记录时列表盖在框内并滚动） */
.ptx2-bottom { position: relative; width: 100%; aspect-ratio: 1088 / 546; margin-top: 4px; }
.ptx2-bottom::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 18px;
  background: linear-gradient(180deg, #0F0F11 0%, rgba(15, 15, 17, 0) 100%);
  z-index: 1; pointer-events: none;
}
.ptx2-orders {
  position: absolute; left: 3.2%; right: 3.2%; top: 28.6%; bottom: 5%;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px; overflow-y: auto;
  background: #1B1A1B; border-radius: 12px;
  border: 1px solid rgba(235, 199, 128, .16);
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.ptx2-orders::-webkit-scrollbar { display: none; }
.ptx2-orders.is-empty { display: none; }
.ptx2-orders .ptx2-order {
  padding: 9px 10px; border-radius: 11px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(235, 199, 128, .14);
}
.ptx2-orders .ptx2-order .pbo-top b { font-size: 12.5px; }
.ptx2-orders .ptx2-order .pbo-mid { font-size: 11.5px; }
.ptx2-orders .ptx2-order .pbo-note { font-size: 10px; }

/* 行情栏 Tab（底图里的文字/选中态已抹掉，这里用 HTML 重画）
   设计稿坐标 → 375 画布：图 1088×975 ⇒ 375×336.04
   胶囊：x 34..1068 / y 765..873；标签中心 x 165.5 / 415 / 662.5 / 905，y 817.5 */
.ptx2-tabs {
  position: absolute; left: 11.7px; top: 263.7px; width: 356.4px; height: 37.2px;
}
.ptx2-tab {
  position: absolute; top: 50%; width: 23%; height: 100%;
  transform: translate(-50%, -50%);
  font-size: 11.7px; font-weight: 800; letter-spacing: .3px;
  color: #B0A89A; white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
  transition: color .22s;
}
.ptx2-tab.t0 { left: 12.71%; }
.ptx2-tab.t1 { left: 36.84%; }
.ptx2-tab.t2 { left: 60.76%; }
.ptx2-tab.t3 { left: 84.23%; }
.ptx2-tab.on {
  background: linear-gradient(180deg, #FFF7E0 0%, #F7DFA9 46%, #E2B565 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 7px rgba(255, 190, 90, .5));
  text-shadow: none;
}
.ptx2-tab:active { opacity: .75; }
.ptx2-ind {
  position: absolute; top: 35.4px; left: 12.71%;
  width: 68.9px; height: 2px; border-radius: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(255, 208, 122, 0) 0%, #FFE3AC 26%, #FFDB93 52%, rgba(255, 208, 122, 0) 100%);
  box-shadow: 0 0 10px rgba(255, 190, 80, .85), 0 0 24px rgba(255, 160, 40, .5);
  transition: left .26s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.ptx2-ind.i1 { left: 36.84%; }
.ptx2-ind.i2 { left: 60.76%; }
.ptx2-ind.i3 { left: 84.23%; }

/* Tab 面板 */
.ptx2-view { display: none; }
.ptx2-view.on { display: block; }

/* Tab2：累计成交汇总 */
.ptx2-sum {
  display: flex; margin: 4px 6px 12px;
  border-radius: 14px; overflow: hidden;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(235, 199, 128, .14);
}
.ptx2-sum > div {
  flex: 1; padding: 11px 4px 10px; text-align: center; position: relative;
}
.ptx2-sum > div + div::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
  background: rgba(235, 199, 128, .16);
}
.ptx2-sum span { display: block; font-size: 10px; color: #9A917F; letter-spacing: .3px; }
.ptx2-sum b {
  display: inline-block; margin-top: 5px; font-size: 17px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFF8E2 0%, #F6DEA6 50%, #E0AE58 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ptx2-sum em { font-size: 9.5px; color: #8B8272; margin-left: 2px; }

/* Tab2：成交记录（普通流式卡片，不用底图空态框） */
.ptx2-orders2 { display: flex; flex-direction: column; gap: 6px; }
.ptx2-orders2 .ptx2-order {
  padding: 10px 11px; border-radius: 11px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(235, 199, 128, .13);
}
.ptx2-orders2 .ptx2-order .pbo-top b { font-size: 12.5px; }
.ptx2-orders2 .ptx2-order .pbo-mid { font-size: 11.5px; }
.ptx2-orders2 .ptx2-order .pbo-note { font-size: 10px; }

/* Tab3：我的余额 */
.ptx2-bal {
  margin: 5px 5.51% 0; padding: 16px 16px 15px; border-radius: 18px;
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(255, 200, 110, .1) 0%, rgba(255, 200, 110, 0) 58%),
    linear-gradient(180deg, #1C1B1F 0%, #17161A 100%);
  border: 1px solid rgba(255, 255, 255, .05);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.ptx2-bal > span { display: block; font-size: 11px; color: #A79C87; letter-spacing: .6px; }
.ptx2-bal > b {
  display: block; margin-top: 6px;
  font-size: 30px; font-weight: 900; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFF8E2 0%, #F8E2B0 46%, #E3B463 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255, 185, 80, .3));
}
.ptx2-bal > em { display: block; margin-top: 7px; font-size: 10px; line-height: 1.6; color: #83796A; }

/* Tab3：余额明细 */
.ptx2-wallet { display: flex; flex-direction: column; }
.ptx2-wrow {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 2px;
}
.ptx2-wrow + .ptx2-wrow { border-top: 1px dashed rgba(255, 255, 255, .07); }
.ptx2-wdot {
  flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%;
}
.ptx2-wdot.in { background: #FFD583; box-shadow: 0 0 9px rgba(255, 190, 90, .6); }
.ptx2-wdot.out { background: #FF7A63; box-shadow: 0 0 9px rgba(255, 110, 70, .5); }
.ptx2-wmid { flex: 1; min-width: 0; }
.ptx2-wmid b {
  display: block; font-size: 12px; font-weight: 700; color: #E8DCC4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ptx2-wmid em { display: block; margin-top: 3px; font-size: 10px; color: #7E7564; }
.ptx2-wval { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ptx2-wval.in { color: #FFD583; }
.ptx2-wval.out { color: #FF8770; }

/* 首页卡片：卡槽上移后的间距（2026-11-09） */
#page-card .cd-sum-holder { display: none; }
#page-card .cd-sec-head.cd-slot-head { margin: 14px 2px 9px; }
#page-card .cd-sec-head + .cd-slots { margin-top: 0; }
#page-card .cd-slots + .cd-balrow { margin-top: 14px; }

/* =========================================================
   小熊卡页 v3（2026-11-09）：设计稿顶部主视觉 + DOM 列表
   画布 896 宽（设计稿），页面按 375 画布换算
   ========================================================= */
.card3-page {
  background:
    radial-gradient(120% 46% at 50% 0%, #4A3A28 0%, #2A231D 42%, #14120F 78%, #0D0C0B 100%);
}
.cd3-scroll {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.cd3-scroll::-webkit-scrollbar { display: none; }

/* ---------- 顶部主视觉 ---------- */
.cd3-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 896 / 860;
}
.cd3-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; object-fit: cover;
  pointer-events: none; user-select: none;
}
.cd3-back {
  position: absolute;
  left: 4.69%; top: 3.55%; width: 7.81%; height: 8.27%;
  border-radius: 50%;
  padding: 0; border: 0; background: none;
}
.cd3-back:active { background: rgba(255, 255, 255, .08); }

.cd3-headprice {
  position: absolute;
  right: 4.6%; top: 3.55%;
  display: flex; align-items: center; gap: 4px;
  pointer-events: none;
}
.cd3-headprice i {
  width: 15px; height: 15px;
  transform: rotate(45deg);
  border-radius: 3px;
  background: linear-gradient(135deg, #FFF6DA, #F2C063 52%, #B07C24);
  box-shadow: inset 0 0 0 1.5px rgba(120, 76, 18, .45);
}
.cd3-headprice b {
  font-size: 22px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFF6DA 0%, #FFE7AE 40%, #E7B667 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}

/* 卡面内部文字区（坐标按设计稿 1608×1241 换算到 375 宽）
   设计稿 x*0.23321 = CSS x；y*0.23321 + 72.42 = CSS y */
.cd3-body {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cd3-line1 {
  position: absolute;
  inset: 0;
}
.cd3-line1 h2 {
  /* 标题「小熊卡」直接用设计稿烘焙的像素（美工级抠图），DOM 只保留占位与无障碍文本 */
  position: absolute;
  left: 19.8px; top: 170.5px;
  font-size: 26px; line-height: 1; font-weight: 900; letter-spacing: -1px;
  color: transparent;
  text-shadow: none;
}
.cd3-big {
  position: absolute;
  right: 23.4px; top: 155.5px;
  transform-origin: right top;
  transform: scale(1.028, 1);
}
.cd3-big b {
  /* 设计稿是「奶油白面 + 金边 + 深棕描边 + 下沉投影」的浮雕字，用三层质感逼近 */
  display: block;
  font-size: 42px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  background: linear-gradient(133deg, #FFFFFF 0%, #FFFEF7 34%, #FFF3CC 66%, #F2C97E 88%, #DCA24A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #BA8437;
  filter: drop-shadow(0 1px 0 #6A3B08) drop-shadow(0 3px 5px rgba(0, 0, 0, .5));
}
.cd3-line2 {
  position: absolute;
  left: 27.5px; right: 21.6px; top: 208.7px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.cd3-desc { font-size: 11.1px; line-height: 1; color: #FFF9EA; letter-spacing: 0;
  font-weight: 700; -webkit-text-stroke: .45px #C79A55;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6); }
.cd3-per { font-size: 10.6px; line-height: 1; color: transparent; }
.cd3-line3 {
  position: absolute;
  left: 26.8px; top: 232.4px;
  font-size: 10.2px; line-height: 1; color: #FFF6E0;
  font-weight: 700; -webkit-text-stroke: .45px #C79A55;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}
.cd3-line3 b {
  font-size: 12.5px; color: #FFF8E0; font-weight: 900;
  -webkit-text-stroke: .4px #C79A55;
  font-variant-numeric: tabular-nums;
}
.cd3-meta {
  /* 圆点由设计稿烘焙（美工级抠图），这里只排文字：左列 x=127、右列 x=869（设计稿像素） */
  position: absolute;
  left: 29.6px; right: 18.4px; top: 274.5px;
  display: grid; grid-template-columns: 173px minmax(0, 1fr);
  gap: 9.5px 0;
  padding: 0;
  border: 0;
}
.cd3-meta span {
  display: flex; align-items: center; gap: 4.5px;
  font-size: 10.05px; line-height: 1.2; color: #FFF7E6;
  font-weight: 700; -webkit-text-stroke: .4px #C1934F;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
  white-space: nowrap;
}
.cd3-meta i { display: none; }
.cd3-meta b { color: #FFF8E2; font-weight: 800; font-variant-numeric: tabular-nums;
  -webkit-text-stroke: .35px #C79A55; }

/* ---------- 统计胶囊 ---------- */
.cd3-pills {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 14px 0;
}
.cd3-pill {
  height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(46, 40, 33, .92), rgba(22, 19, 16, .95));
  border: 1.2px solid rgba(226, 186, 116, .34);
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .1), 0 6px 14px rgba(0, 0, 0, .35);
}
.cd3-pill b {
  font-size: 17px; font-weight: 900; line-height: 1.05;
  color: #F3E2C2; font-variant-numeric: tabular-nums;
}
.cd3-pill span { margin-top: 3px; font-size: 9.5px; color: #9A8D76; }
.cd3-pill.on {
  border-color: rgba(255, 214, 140, .85);
  background: linear-gradient(180deg, rgba(74, 58, 34, .95), rgba(32, 26, 18, .97));
  box-shadow: 0 0 0 1px rgba(255, 214, 140, .35), 0 0 16px rgba(255, 190, 90, .38),
              inset 0 1px 0 rgba(255, 244, 214, .25);
}
.cd3-pill.on b {
  background: linear-gradient(180deg, #FFF6DA, #FFD98F 60%, #D8A44D);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 待领取胶囊：靠「金环 + 金色文字 + ›」表达可点；有收益时整颗点亮成金按钮 */
.cd3-pill-claim { cursor: pointer; }
@keyframes cd3claim {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(255, 239, 196, .85), 0 0 14px rgba(255, 190, 90, .6),
                         inset 0 1px 0 rgba(255, 255, 240, .8); }
  50%      { box-shadow: 0 0 0 2px rgba(255, 249, 224, .98), 0 0 26px rgba(255, 200, 100, .95),
                         inset 0 1px 0 rgba(255, 255, 255, .95); }
}

/* ---------- 区块标题 ---------- */
.cd3-sec {
  display: flex; align-items: center; justify-content: space-between;
  margin: 16px 16px 9px;
}
.cd3-sec h3 { font-size: 15px; font-weight: 900; color: #F3E4C6; letter-spacing: .4px; }
.cd3-sec span { font-size: 11px; color: #91866F; font-variant-numeric: tabular-nums; }

/* ---------- 卡槽 ---------- */
.cd3-slots {
  display: grid; gap: 6px;
  margin: 0 14px;
}
.cd3-slotcell { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cd3-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.06;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(44, 40, 36, .96), rgba(20, 18, 16, .98));
  border: 1.2px solid rgba(226, 186, 116, .38);
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .08), 0 6px 14px rgba(0, 0, 0, .4);
  display: flex; align-items: center; justify-content: center;
}
.cd3-slot img { width: 88%; height: 88%; object-fit: contain; }
.cd3-slot img.cd3-slot-card { width: auto; height: 95%; }
.cd3-slot.empty { border-style: dashed; border-color: rgba(226, 186, 116, .22); }
.cd3-slot-empty { font-size: 15px; color: #6E6656; }
.cd3-slot.active {
  border-color: rgba(255, 214, 140, .9);
  box-shadow: 0 0 0 1px rgba(255, 214, 140, .4), 0 0 18px rgba(255, 190, 90, .45),
              inset 0 1px 0 rgba(255, 244, 214, .22);
}
.cd3-slot.wait { border-color: rgba(255, 205, 130, .62); }
.cd3-slot-lb { font-size: 9.5px; color: #9A8D76; white-space: nowrap; }
.cd3-slot-lb.on { color: #FFD98F; font-weight: 800; }

/* ---------- 余额 ---------- */
.cd3-balrow {
  display: flex; align-items: center; justify-content: space-between;
  margin: 14px 16px 0;
  font-size: 12px; color: #A2937A;
}
.cd3-balrow b {
  display: flex; align-items: center; gap: 5px;
  font-size: 17px; font-weight: 900; color: #FFE0A6;
  font-variant-numeric: tabular-nums;
}
.cd3-coin {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF6D8, #F0C064 55%, #A8741F);
  box-shadow: inset 0 0 0 1.4px rgba(120, 76, 18, .5);
}
.cd3-balrow em { font-style: normal; }

/* ---------- 申购按钮（底图为设计稿金色长条） ---------- */
.cd3-buy {
  position: relative;
  display: block;
  width: calc(100% - 28px);
  margin: 10px 14px 0;
  aspect-ratio: 846 / 160;
  padding: 0; border: 0; background: url("../assets/card3/buy.webp") center / 100% 100% no-repeat;
  font-family: inherit;
  transition: transform .12s ease, filter .12s ease;
}
.cd3-buy > span {
  position: absolute;
  left: 0; right: 0; top: 44%;
  transform: translateY(-50%);
  display: block;
  font-size: 17px; font-weight: 900; letter-spacing: 1px;
  color: #5A3708;
  text-shadow: 0 1px 0 rgba(255, 236, 180, .55);
}
.cd3-buy:active { transform: scale(.985); filter: brightness(1.04); }
.cd3-buy[disabled] { filter: grayscale(.55) brightness(.78); }
.cd3-buy-tip {
  margin: 8px 16px 0;
  text-align: center;
  font-size: 10px; color: #8D8270;
}

/* ---------- 卡片详情 ---------- */
.cd3-list { display: flex; flex-direction: column; gap: 9px; margin: 0 14px; }
.cd3-item {
  padding: 12px 14px 13px;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(40, 36, 31, .94), rgba(22, 20, 17, .96));
  border: 1.2px solid rgba(226, 186, 116, .26);
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .06);
}
.cd3-item-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cd3-item-top b { font-size: 13px; font-weight: 800; color: #F3E4C6; }
.cd3-item-top span { font-size: 10.5px; color: #A79A82; }
.cd3-item-top .done { color: #7FD06A; }
.cd3-item-top .wait { color: #FFD98F; }
.cd3-item-sub {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 6px;
  font-size: 10.5px; color: #9A8D76;
}
.cd3-item-sub b { color: #FFD98F; font-variant-numeric: tabular-nums; }
.cd3-prog {
  margin-top: 9px; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, .09); overflow: hidden;
}
.cd3-prog i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #FFE0A6, #D8A44D);
  box-shadow: 0 0 8px rgba(255, 190, 90, .45);
}
.cd3-item-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px;
  font-size: 10.5px; color: #8E8370;
}
.cd3-use {
  height: 30px; padding: 0 18px; border-radius: 15px;
  font-family: inherit; font-size: 12px; font-weight: 900;
  color: #4A2E05;
  background: linear-gradient(180deg, #FFF0C2, #F3D080 40%, #DCA64A);
  border: 1px solid rgba(255, 226, 166, .6);
  box-shadow: 0 4px 12px rgba(255, 180, 70, .3);
}
.cd3-use:active { transform: scale(.95); }
.cd3-empty {
  padding: 26px 10px; text-align: center; font-size: 12.5px; color: #A79B85;
  border-radius: 15px; border: 1px dashed rgba(235, 199, 128, .22);
}
.cd3-empty span { display: block; margin-top: 6px; font-size: 11px; color: #7F7666; }
.cd3-ended-head {
  margin: 12px 2px 7px; font-size: 11px; color: #8E8370;
}
.cd3-ended { display: flex; flex-direction: column; gap: 6px; }
.cd3-ended-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  font-size: 11px; color: #8E8370;
}
.cd3-ended-item b { color: #C4B79E; font-size: 11.5px; }

/* ---------- 规则 ---------- */
.cd3-rules {
  margin: 0 14px;
  padding: 13px 15px 15px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  font-size: 11.5px; line-height: 1.85; color: #A99E8B;
}
.cd3-rules b { color: #FFD98F; font-weight: 800; }
.cd3-rules p { margin: 0 0 2px; }
.cd3-pad { height: 26px; }

/* =========================================================
   首页红包雨（hb2）2026-11-09
   ========================================================= */
/* 顶部最右侧：红包雨开关（红色小图标），位于参与记录与头像徽标之间 */
.hb2-entry {
  position: absolute; right: 64px; top: calc(13px + env(safe-area-inset-top, 0px));
  z-index: 46; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 34%, #FF6A5E 0%, #D22C2C 62%, #9C1B1B 100%);
  border: 1.5px solid rgba(255, 214, 130, .85);
  box-shadow: 0 6px 16px rgba(150, 20, 20, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.hb2-entry svg { width: 19px; height: 19px; display: block; }
.hb2-entry.hide { display: none; }
.hb2-entry.is-on::after {
  content: '×'; position: absolute; right: -3px; top: -3px;
  width: 14px; height: 14px; border-radius: 50%;
  font-size: 10px; line-height: 13px; color: #FFE9C8; text-align: center;
  background: rgba(30, 10, 8, .92); border: 1px solid rgba(255, 214, 130, .6);
}

/* 用户端只显示「落红包」本体（2026-11-09）：
   标题/奖池、参与记录、座位、提示与关闭按钮一律不在前端展示；
   开关交给右下角小圆钮（再点一下即关闭，下次进首页不再自动弹） */
.hb2-head, .hb2-seats, .hb2-foot { display: none !important; }

/* 浮在首页之上：整层透明、不吃点击，只有红包可点 */
.hb2-mask {
  position: absolute; inset: 0; z-index: 60;
  background: transparent;
  pointer-events: none;
}
.hb2-mask[hidden] { display: none; }
.hb2-sheet {
  position: absolute; inset: 0;
  background: none;
  pointer-events: none;
}

.hb2-head {
  position: absolute; right: 8px; top: calc(58px + env(safe-area-inset-top, 0px)); z-index: 6;
  display: flex; align-items: center; gap: 6px;
  pointer-events: auto;
}
.hb2-ttl {
  font-size: 15px; font-weight: 900; letter-spacing: .6px;
  background: linear-gradient(180deg, #FFF7E6 18%, #FFD98A 60%, #E8A93F 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
}
.hb2-pool {
  font-size: 10.5px; font-weight: 700; color: #FFD9A0;
  padding: 2px 8px; border-radius: 8px;
  background: rgba(20, 8, 6, .62); border: 1px solid rgba(255, 200, 120, .38);
}
.hb2-kill {
  margin-left: auto; width: 24px; height: 24px; border-radius: 50%;
  line-height: 1; font-size: 15px; color: #FFC9C0;
  background: rgba(20, 8, 6, .66); border: 1px solid rgba(255, 255, 255, .22);
}

.hb2-recs {
  /* 居中在「标题」和「右上角头像」之间的空白区，而不是整屏正中 */
  position: absolute; left: 35%; right: 13%;
  top: calc(14px + env(safe-area-inset-top, 0px)); z-index: 6;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: auto;
}
.hb2-recs-h {
  display: flex; align-items: center; gap: 3px;
  height: 26px; padding: 0 9px 0 11px; border-radius: 13px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px; color: #FFE4BE;
  background: rgba(22, 10, 8, .84); border: 1px solid rgba(255, 210, 140, .42);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  backdrop-filter: blur(2px);
  white-space: nowrap;
}
.hb2-recs-h svg { width: 12px; height: 12px; }
.hb2-recs-h:active { transform: scale(.96); }

/* 红包雨 · 我的参与记录（独立整页 · 暗金机械风，2026-11-10） */
#page-hb2records .subbar { height: 88px; }
#page-hb2records .sub-body { top: 88px; padding: 16px 14px calc(26px + env(safe-area-inset-bottom, 0px)); }

/* 标题下的三个筛选标签（对照设计稿：全部 | 命中 | 未中） */
.hb2r-tabs { display: flex; align-items: center; gap: 0; margin-top: 8px; }
.hb2r-tabs button {
  position: relative; padding: 0 14px 8px;
  font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: .04em;
  color: #8C8172; background: none; border: 0;
}
.hb2r-tabs button:first-child { padding-left: 0; }
/* 标签之间的竖线分隔 */
.hb2r-tabs button + button::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 1px; height: 12px;
  background: rgba(226, 186, 116, .3);
}
.hb2r-tabs button.on { color: #FFE3A6; }
.hb2r-tabs button.on::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 22px; height: 2px;
  border-radius: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(255, 214, 140, 0), #FFD98C, rgba(255, 214, 140, 0));
  box-shadow: 0 0 8px rgba(255, 200, 110, .8);
}
.hb2r-tabs button:first-child.on::after { left: 11px; transform: none; }

/* 三块钢板：参与 / 中奖期数 / 胜率 */
.hb2r-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
  margin: 0 0 15px;
}
.hb2r-stats > div {
  position: relative; padding: 15px 4px 12px; border-radius: 12px;
  border: 1px solid transparent; text-align: center;
  background-image:
    linear-gradient(180deg, rgba(40, 35, 28, .96) 0%, rgba(16, 13, 10, .98) 100%),
    linear-gradient(160deg, rgba(233, 196, 128, .52) 0%, rgba(96, 68, 28, .45) 52%, rgba(233, 196, 128, .32) 100%);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 240, 205, .07);
}
.hb2r-stats > div::before {
  content: ""; position: absolute; inset: 5px; border-radius: 8px;
  border: 1px solid rgba(255, 232, 176, .08); pointer-events: none;
}
.hb2r-stats b {
  display: block; font-size: 24px; font-weight: 900; line-height: 1.1;
  background: linear-gradient(180deg, #FFFAE8 0%, #F8DFA8 52%, #D7A451 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(58, 32, 0, .9));
  font-variant-numeric: tabular-nums;
}
.hb2r-stats span { display: block; margin-top: 6px; font-size: 11px; color: #B4A488; letter-spacing: .02em; }

/* 表头 */
.hb2r-tablehead {
  display: grid; grid-template-columns: 1.15fr 1fr 1.3fr 1.05fr;
  align-items: center; gap: 6px;
  padding: 11px 13px; margin-bottom: 10px; border-radius: 11px;
  border: 1px solid transparent; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: #E8CE9A;
  background-image:
    linear-gradient(180deg, rgba(34, 29, 23, .96) 0%, rgba(14, 12, 9, .98) 100%),
    linear-gradient(160deg, rgba(233, 196, 128, .42) 0%, rgba(90, 63, 25, .35) 55%, rgba(233, 196, 128, .24) 100%);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  text-align: center;
}
.hb2r-tablehead span:first-child { text-align: left; }
.hb2r-tablehead span:last-child { text-align: right; }

/* 记录行：每条一张小钢板 */
.hb2r-list { display: flex; flex-direction: column; gap: 9px; }
.hb2r-row {
  display: grid; grid-template-columns: 1.15fr 1fr 1.3fr 1.05fr;
  align-items: center; gap: 6px;
  padding: 15px 13px; border-radius: 12px; border: 1px solid transparent;
  background-image:
    linear-gradient(180deg, rgba(30, 25, 20, .94) 0%, rgba(14, 11, 9, .97) 100%),
    linear-gradient(155deg, rgba(233, 196, 128, .44) 0%, rgba(92, 64, 26, .34) 55%, rgba(233, 196, 128, .26) 100%);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 240, 205, .05);
  font-size: 12.5px; text-align: center;
}
.hb2r-row > span:first-child {
  text-align: left; font-weight: 800; color: #F0D9A8; font-variant-numeric: tabular-nums;
}
.hb2r-row .hb2r-bet { color: #D8CFC0; font-variant-numeric: tabular-nums; }
.hb2r-row .hb2r-pnl { font-weight: 800; font-variant-numeric: tabular-nums; }
.hb2r-row .hb2r-pnl.win { color: #FFD98A; }
.hb2r-row .hb2r-pnl.lose { color: #8C8172; font-weight: 700; }
.hb2r-row time { text-align: right; font-size: 11px; color: #7E7466; white-space: nowrap; }

.hb2r-empty {
  padding: 46px 18px; border-radius: 16px; text-align: center;
  font-size: 12.5px; line-height: 1.9; color: #9A8D79;
  border: 1px dashed rgba(233, 196, 128, .28);
  background: rgba(16, 13, 10, .52);
}

.hb2r-page .hbr-pad { height: 24px; }

.hb2-stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hb2-seats {
  position: absolute; left: 0; right: 0; z-index: 6;
  bottom: calc(var(--nav-h, 62px) + 116px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center; gap: 5px; padding: 0 8px;
  pointer-events: none;
}
.hb2-seat {
  flex: 0 0 auto; width: 46px; padding: 4px 3px 4px; border-radius: 9px; text-align: center;
  background: rgba(18, 10, 8, .55); border: 1px dashed rgba(255, 255, 255, .28);
  font-size: 9px; color: #D6C6B2;
  backdrop-filter: blur(2px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.hb2-seat.filled {
  border-style: solid; border-color: rgba(255, 205, 120, .62);
  background: rgba(46, 24, 8, .72); color: #FFE6BC;
}
.hb2-seat.me { border-color: #FFD98A; box-shadow: 0 0 0 1px rgba(255, 217, 138, .55); }
.hb2-seat i { font-style: normal; display: block; font-size: 12px; font-weight: 800; color: #FFD98A; }
.hb2-seat em { font-style: normal; display: block; margin-top: 1px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }

.hb2-rain { position: absolute; inset: 0 0 calc(var(--nav-h, 62px) + env(safe-area-inset-bottom, 0px)) 0; z-index: 2; pointer-events: none; overflow: hidden; }

/* 红包皮肤：设计稿里那只金边红包（pkt.webp），面额烫金印在纸面中央 */
.hb2-pkt {
  position: absolute; top: -96px; width: 50px; height: 74px;
  background: url("../assets/hb2/pkt.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 12px rgba(70, 6, 6, .5));
  pointer-events: auto; cursor: pointer;
}
/* 面额：数字居中、单位在下方，整块落在金扣(≤30%)与底部花纹(≥81%)之间的留白带；
   画稿带透视，纸面中心约在 48% 而非 50%，这里一并左移校正 */
.hb2-pkt-amt {
  position: absolute; left: 48%; top: 56%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  white-space: nowrap;
}
/* 数字：金色渐变 + 暗红描边 + 暖光投影，字号跟着红包宽度缩放 */
.hb2-pkt-num {
  display: block; line-height: .96; font-weight: 900;
  font-family: "DIN Alternate", "Bahnschrift", "Arial Black", "Franklin Gothic Heavy", Arial, sans-serif;
  font-size: calc(var(--pkt-w, 50px) * var(--pkt-num-k, .42));
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #FFFCE9 0%, #FFEEB8 28%, #FFD36E 56%, #E89A2B 82%, #B96A12 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: calc(var(--pkt-w, 50px) * .015) rgba(94, 18, 7, .5);
  filter: drop-shadow(0 1px 1.5px rgba(76, 10, 5, .85)) drop-shadow(0 0 3px rgba(255, 198, 100, .45));
}
/* 「熊币」小标：同色系细金，居中排在数字下方；text-indent 抵消字距的尾部留白 */
.hb2-pkt-unit {
  display: block; font-style: normal; line-height: 1;
  margin-top: calc(var(--pkt-w, 50px) * .05);
  font-size: calc(var(--pkt-w, 50px) * .14);
  font-weight: 800; letter-spacing: .1em; text-indent: .1em;
  color: #FFE7AE;
  text-shadow: 0 1px 1px rgba(80, 10, 5, .9), 0 0 4px rgba(255, 182, 72, .35);
}
.hb2-pkt.tapped { pointer-events: none; animation: hb2pop .3s ease forwards; }
@keyframes hb2pop { to { transform: scale(1.35); opacity: 0; } }

/* 点红包成功的爆炸特效（源视频黑底压平 → screen 叠加，约 125KB）
   挂在 body 上做 fixed 定位，才能和页面真实像素做混合 */
.hb2-boom {
  position: fixed; z-index: 96;
  width: 230px; height: 230px;
  margin-left: -115px; margin-top: -115px;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  will-change: opacity;
}
.hb2-boom.on { animation: hb2BoomFade 1.9s ease-out forwards; }
.hb2-boom-v {
  width: 100%; height: 100%; display: block;
  object-fit: contain; background: transparent;
  filter: brightness(1.06) saturate(1.02);
}
/* 极端情况下视频播不动：退回一层渐进光晕，至少有点反馈 */
.hb2-boom.no-video::after {
  content: ''; position: absolute; inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 176, .85) 0%, rgba(255, 170, 60, .5) 34%, rgba(255, 120, 40, 0) 70%);
  animation: hb2BoomGlow .9s ease-out forwards;
}
@keyframes hb2BoomGlow { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@keyframes hb2BoomFade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  78%  { opacity: 1; }
  100% { opacity: 0; }
}

.hb2-result {
  position: absolute; left: 50%; top: calc(74px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  z-index: 7; max-width: 80%; padding: 7px 14px; border-radius: 999px;
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  background: linear-gradient(160deg, rgba(52, 20, 18, .92), rgba(26, 10, 10, .95));
  border: 1px solid rgba(255, 205, 120, .5);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  pointer-events: none;
  animation: hb2ResultIn .26s ease;
}
@keyframes hb2ResultIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.hb2-result[hidden] { display: none; }
.hb2-result b { font-size: 12.5px; font-weight: 900; color: #FFD98A; letter-spacing: .3px; }
.hb2-result span { font-size: 11px; color: #D6C3AB; }
.hb2-result em { font-style: normal; font-size: 13px; font-weight: 900; color: #FFE6B4; }

.hb2-foot {
  position: absolute; left: 0; right: 0; z-index: 5;
  bottom: calc(var(--nav-h, 62px) + 34px + env(safe-area-inset-bottom, 0px));
  padding: 6px 16px 8px; text-align: center;
  background: linear-gradient(0deg, rgba(8, 5, 5, .62) 0%, rgba(8, 5, 5, .22) 58%, rgba(8, 5, 5, 0) 100%);
  pointer-events: auto;
}
.hb2-tip { font-size: 10.5px; color: #E0CEB8; line-height: 1.5; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.hb2-close {
  margin-top: 6px; width: 62%; max-width: 220px; height: 38px; border-radius: 19px;
  font-size: 13.5px; font-weight: 800; letter-spacing: 1px; color: #5A2310;
  background: linear-gradient(180deg, #FFEFC6, #EAB963 62%, #C08B36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 18px rgba(150, 90, 20, .3);
}
.hb2-close:active { transform: scale(.985); }

@keyframes hb2Fall {
  from { transform: translateY(0) rotate(0deg); opacity: 0; }
  6%   { opacity: 1; }
  92%  { opacity: 1; }
  to   { transform: translateY(var(--fall, 640px)) rotate(var(--spin, 12deg)); opacity: 0; }
}

/* =========================================================
   对战中心 v10（2026-11-09）：顶部主视觉裁图 + 三个房间卡
   设计稿 1216 宽，hero 裁到 y=1005（第一张卡上沿）
   ========================================================= */
#page-mall.pk10-page {
  background: #08070a;
  overflow: hidden;
}
#page-mall .pk10-scroll {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(120% 40% at 50% 52%, rgba(60, 44, 34, .30) 0%, rgba(8, 7, 10, 0) 70%),
    linear-gradient(180deg, #08070a 0%, #0a0809 62%, #090708 100%);
  scrollbar-width: none;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
#page-mall .pk10-scroll::-webkit-scrollbar { display: none; }

#page-mall .pk10-hero { position: relative; width: 100%; }
#page-mall .pk10-hero img {
  display: block; width: 100%; height: auto;
  pointer-events: none; -webkit-user-drag: none;
  /* 底边淡出：切在舞台前缘高光处，直接硬切会留一条横线 */
  -webkit-mask-image: linear-gradient(180deg, #000 88%, rgba(0, 0, 0, .35) 97%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 88%, rgba(0, 0, 0, .35) 97%, transparent 100%);
}

/* ---------- 房间卡（与设计稿同款：深色圆角 + 金色描边） ---------- */
#page-mall .pk10-rooms {
  display: flex; flex-direction: column; gap: 12px;
  padding: 10px 12px 0;
}
#page-mall .pk10-room {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 96px;
  padding: 12px 14px;
  border-radius: 18px;
  text-align: left;
  font-family: inherit;
  background:
    radial-gradient(90% 120% at 26% 50%, rgba(255, 190, 110, .10), rgba(0, 0, 0, 0) 62%),
    linear-gradient(160deg, #1B1920 0%, #141220 52%, #0E0D13 100%);
  border: 1.4px solid rgba(214, 176, 112, .45);
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .08), 0 10px 24px rgba(0, 0, 0, .45);
  transition: transform .14s ease, filter .14s ease;
}
#page-mall .pk10-room:active { transform: scale(.988); filter: brightness(1.06); }

#page-mall .pk10-ic {
  flex: 0 0 auto;
  width: 74px; height: 74px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, .28);
}
#page-mall .pk10-ic img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
}
#page-mall .pk10-ic.hb { background: rgba(120, 24, 20, .30); }
#page-mall .pk10-ic.hb img { width: 84%; height: 84%; }

#page-mall .pk10-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
#page-mall .pk10-txt b {
  font-size: 20px; font-weight: 900; letter-spacing: .5px;
  color: #F6EAD3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}
#page-mall .pk10-txt em {
  font-style: normal;
  font-size: 12px; color: #9D9284;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 大逃杀「开发中」角标（后台 → 大逃杀 → 入口开关；关闭后角标消失、可正常进入） */
#page-mall .pk10-room.dev .pk10-txt b::after {
  content: "开发中";
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  color: #2A1A08;
  background: linear-gradient(180deg, #F7DFAC, #D8AC68);
  border: 1px solid rgba(255, 240, 205, .5);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
  vertical-align: 3px;
}
#page-mall .pk10-room.dev .pk10-ic { filter: grayscale(.5) brightness(.85); }
#page-mall .pk10-room.dev .pk10-txt em { color: #857B6D; }

#page-mall .pk10-arrow {
  flex: 0 0 auto;
  position: relative;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.2px solid rgba(214, 176, 112, .55);
  background: rgba(255, 255, 255, .04);
}
/* 红包雨房间：直接用设计稿整卡（含红包、标题、开奖角标、箭头） */
#page-mall .pk10-room-hb {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("../assets/pk10/card-hb.webp") center / 100% 100% no-repeat;
  aspect-ratio: 1048 / 332;
  box-shadow: none;
  overflow: visible;
}
#page-mall .pk10-room-hb:active { transform: scale(.985); filter: brightness(1.04); }

#page-mall .pk10-arrow::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px;
  border-top: 1.8px solid #D9BC86;
  border-right: 1.8px solid #D9BC86;
  transform: translate(-60%, -50%) rotate(45deg);
}

/* =========================================================
   红包雨 · 房间玩法（2026-11-09）
   列表：三档房间卡；房间：10 个座位 + 奖池 + 历史
   ========================================================= */
.hbr-page {
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(190, 46, 40, .16), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #17100F 0%, #0C0B0C 52%, #090809 100%);
}
.hbr-page .subbar { background: rgba(20, 14, 13, .94); border-bottom: 1px solid rgba(233, 196, 128, .14); }
.hbr-mine {
  flex: 0 0 auto; height: 30px; padding: 0 12px; border-radius: 15px;
  font-family: inherit; font-size: 11.5px; font-weight: 700; color: #F0D49C;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(226, 186, 116, .38);
}
.hbr-mine:active { transform: scale(.95); }
.hbr-page .sub-body { padding-top: 14px; }

.hbr-list { display: flex; flex-direction: column; gap: 12px; }
.hbr-room {
  display: block; width: 100%; text-align: left;
  padding: 14px 15px 13px;
  border-radius: 18px;
  font-family: inherit;
  background:
    radial-gradient(80% 120% at 88% 0%, rgba(255, 120, 90, .16), rgba(0, 0, 0, 0) 62%),
    linear-gradient(160deg, #2A1A18 0%, #1A1214 58%, #120D0F 100%);
  border: 1.4px solid rgba(226, 132, 112, .38);
  box-shadow: inset 0 1px 0 rgba(255, 220, 205, .08), 0 10px 24px rgba(0, 0, 0, .45);
  transition: transform .14s ease, filter .14s ease;
}
.hbr-room:active { transform: scale(.988); filter: brightness(1.05); }
.hbr-room.off { opacity: .6; }

.hbr-room-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hbr-room-top b {
  font-size: 18px; font-weight: 900; letter-spacing: .6px; color: #FBE9D2;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}
.hbr-stake {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 800; color: #FFD08A;
}
.hbr-stake i {
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF3C8, #F0C064 55%, #A8741F);
  box-shadow: inset 0 0 0 1.3px rgba(120, 76, 18, .45);
}
.hbr-room-mid {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 9px; font-size: 11px; color: #A0907F;
}
.hbr-room-mid b { color: #FFD98F; font-variant-numeric: tabular-nums; }
.hbr-prog {
  margin-top: 8px; height: 6px; border-radius: 3px;
  background: rgba(255, 255, 255, .08); overflow: hidden;
}
.hbr-prog i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #FFD08A, #E0553C);
  box-shadow: 0 0 8px rgba(255, 120, 80, .45);
}
.hbr-room-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 9px; font-size: 10.5px; color: #8E8172;
}
.hbr-room-foot em { font-style: normal; font-weight: 800; color: #E9C58D; white-space: nowrap; }

.hbr-rules {
  margin-top: 14px; padding: 13px 15px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  font-size: 11px; line-height: 1.8; color: #A29787;
}
.hbr-rules b { color: #FFD98F; font-weight: 800; }
.hbr-rules p { margin: 0 0 2px; }

.hbr-empty {
  padding: 26px 10px; text-align: center; font-size: 12.5px; color: #A79B85;
  border-radius: 15px; border: 1px dashed rgba(235, 199, 128, .22);
}
.hbr-pad { height: 26px; }

/* ---------- 房间页 ---------- */
.hbr-head {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 12px 6px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid rgba(233, 196, 128, .16);
}
.hbr-head-cell { position: relative; text-align: center; }
.hbr-head-cell + .hbr-head-cell::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 22px;
  transform: translateY(-50%); background: rgba(255, 255, 255, .08);
}
.hbr-head-cell span { display: block; font-size: 10px; color: #94897A; }
.hbr-head-cell b {
  display: block; margin-top: 4px;
  font-size: 16px; font-weight: 900; color: #FFE0A6;
  font-variant-numeric: tabular-nums;
}

.hbr-tip {
  margin: 12px 2px 0; text-align: center;
  font-size: 11px; color: #9A8D7B;
}

.hbr-seats {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px; margin-top: 12px;
}
.hbr-seat {
  position: relative;
  aspect-ratio: 1 / 1.15;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 3px;
  border-radius: 13px;
  font-family: inherit;
  background: linear-gradient(170deg, rgba(44, 34, 32, .96), rgba(20, 16, 16, .98));
  border: 1.2px solid rgba(226, 186, 116, .22);
  overflow: hidden;
}
.hbr-seat-no {
  font-size: 13px; font-weight: 900; color: #C9B79A;
  font-variant-numeric: tabular-nums;
}
.hbr-seat-name {
  font-style: normal; font-size: 9px; color: #9A8D7B;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hbr-badge {
  font-style: normal; font-size: 8.5px; font-weight: 800;
  padding: 1px 5px; border-radius: 8px;
}
.hbr-badge.empty { color: #7E7364; background: rgba(255, 255, 255, .05); }
.hbr-badge.seat { color: #A8A093; background: rgba(255, 255, 255, .06); }
.hbr-badge.win {
  color: #4A2E05; background: linear-gradient(180deg, #FFE7AE, #E7B667);
}
.hbr-badge.share {
  color: #FFD98F; background: rgba(255, 205, 130, .16);
  border: 1px solid rgba(255, 205, 130, .3);
}

.hbr-seat.free { border-style: dashed; }
.hbr-seat.free .hbr-seat-no { color: #6E6557; }
.hbr-seat.picked {
  border-color: rgba(255, 214, 140, .95);
  border-style: solid;
  background: linear-gradient(170deg, rgba(96, 70, 32, .95), rgba(40, 28, 16, .98));
  box-shadow: 0 0 0 1px rgba(255, 214, 140, .35), 0 0 16px rgba(255, 190, 90, .45);
}
.hbr-seat.robot { opacity: .92; border-color: rgba(150, 140, 128, .28); }
.hbr-seat.robot .hbr-seat-name { color: #8D8478; }
.hbr-seat.mine {
  border-color: rgba(120, 200, 255, .55);
  background: linear-gradient(170deg, rgba(30, 52, 72, .95), rgba(14, 24, 34, .98));
}
.hbr-seat.mine .hbr-seat-name { color: #8FC6EE; }
.hbr-seat.winner {
  border-color: rgba(255, 214, 140, .9);
  background: linear-gradient(170deg, rgba(104, 74, 30, .96), rgba(44, 30, 12, .98));
  box-shadow: 0 0 0 1px rgba(255, 214, 140, .4), 0 0 18px rgba(255, 190, 90, .5);
}
.hbr-seat.share { border-color: rgba(255, 205, 130, .5); }

.hbr-result {
  margin-top: 12px; padding: 13px 15px;
  border-radius: 15px;
  background: linear-gradient(160deg, rgba(96, 66, 26, .5), rgba(30, 22, 14, .7));
  border: 1px solid rgba(255, 205, 130, .35);
}
.hbr-result.hide { display: none; }
.hbr-res-head { font-size: 11px; color: #C0A882; letter-spacing: .5px; }
.hbr-res-main { margin-top: 6px; font-size: 13px; color: #EFDDBC; }
.hbr-res-main span { color: #FFD98F; font-weight: 900; }
.hbr-res-main b { font-size: 17px; color: #FFE7AE; font-variant-numeric: tabular-nums; }
.hbr-res-sub { margin-top: 5px; font-size: 10.5px; color: #9A8D7B; }

.hbr-join {
  width: 100%; height: 48px; margin-top: 14px;
  border: 0; border-radius: 24px;
  font-family: inherit; font-size: 16px; font-weight: 900; letter-spacing: .6px;
  color: #4A2E05;
  background: linear-gradient(180deg, #FFF0C2 0%, #F3D080 26%, #DCA64A 62%, #B9802C 100%);
  box-shadow: 0 0 0 2px rgba(120, 82, 24, .32), inset 0 2px 0 rgba(255, 255, 255, .6),
             inset 0 -3px 10px rgba(120, 70, 10, .3), 0 10px 22px rgba(0, 0, 0, .4);
}
.hbr-join:active { transform: scale(.985); filter: brightness(1.04); }
.hbr-join[disabled] { filter: grayscale(.45) brightness(.8); }
.hbr-note {
  margin-top: 8px; text-align: center;
  font-size: 10.5px; color: #8D8172;
}

.hbr-sec { margin: 18px 2px 9px; }
.hbr-sec h3 { font-size: 14px; font-weight: 800; color: #F0E2C6; letter-spacing: .4px; }

.hbr-history { display: flex; flex-direction: column; gap: 7px; }
.hbr-hrow {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 13px; border-radius: 13px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  font-size: 11px; color: #9A8D7B;
}
.hbr-hrow b { color: #FFD98F; font-variant-numeric: tabular-nums; }
.hbr-hrow b.win { color: #FFC24D; }
.hbr-hrow b.share { color: #7FD06A; }
.hbr-hrow b.lose { color: #8A8072; }
.hbr-hrow b.wait { color: #8AB4FF; }
.hbr-hrow time { flex: 0 0 auto; font-size: 10px; color: #7C7362; }

/* 小熊卡 · 未解锁卡槽（2026-11-09） */
#page-card .cd3-slotcell.locked { cursor: pointer; }
#page-card .cd3-slot.locked {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  background: rgba(255, 255, 255, .03) !important;
  border: 1px dashed rgba(226, 186, 116, .34) !important;
  border-radius: 12px !important;
}
#page-card .cd3-slot-lock { font-size: 15px; line-height: 1; opacity: .72; }
#page-card .cd3-slot-req {
  font-size: 8.5px; line-height: 1.25; text-align: center;
  color: #B79A6A; letter-spacing: .2px;
  padding: 0 3px;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
#page-card .cd3-slotcell.locked .cd3-slot-lb { color: #C9A86A; font-weight: 700; }

/* ========= 小熊卡 · 解锁卡槽弹窗（2026-11-09） ========= */
#page-card .cdu-mask {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 0 26px;
  background: rgba(6, 5, 8, .74);
  backdrop-filter: blur(2px);
  animation: cduFade .18s ease both;
}
#page-card .cdu-mask[hidden] { display: none; }
@keyframes cduFade { from { opacity: 0; } to { opacity: 1; } }

/* 外层金色渐变 = 描边；内层内缩 1.5px 深色玻璃 = 卡面 */
#page-card .cdu-frame {
  position: relative;
  width: 100%; max-width: 320px;
  padding: 1.5px;
  background: linear-gradient(150deg, #F6E3B4 0%, #A47A34 22%, #FFEFC8 46%, #8C6626 70%, #E3C48C 100%);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px),
                     calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .68)) drop-shadow(0 0 18px rgba(255, 186, 84, .16));
  animation: cduUp .24s cubic-bezier(.22, .9, .3, 1) both;
}
@keyframes cduUp {
  from { transform: translateY(16px) scale(.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}
#page-card .cdu-box {
  position: relative;
  padding: 26px 20px 18px;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px),
                     calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 196, 96, .16), rgba(0, 0, 0, 0) 62%),
    linear-gradient(165deg, #2A2319 0%, #191510 58%, #110F0C 100%);
}

/* 顶部徽章 */
#page-card .cdu-badge {
  position: relative;
  width: 54px; height: 54px; margin: -40px auto 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #FFE9BD 0%, #E2B159 52%, #9C6C22 100%);
  box-shadow: inset 0 1px 0 rgba(255, 248, 220, .75), 0 8px 18px rgba(0, 0, 0, .55),
              0 0 22px rgba(255, 186, 84, .35);
  border: 2px solid rgba(255, 240, 205, .55);
}
#page-card .cdu-badge span { font-size: 22px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(90, 50, 0, .5)); }

#page-card .cdu-title {
  margin-top: 12px; text-align: center;
  font-size: 17px; font-weight: 900; letter-spacing: .6px;
  color: #FFEBC4;
  text-shadow: 0 1px 0 rgba(90, 50, 0, .85), 0 2px 10px rgba(255, 180, 70, .3);
}
#page-card .cdu-title b { font-size: 20px; color: #FFD07A; }
#page-card .cdu-sub {
  margin-top: 6px; text-align: center;
  font-size: 10.5px; color: #A2937C; letter-spacing: .3px;
}

/* 条件行 */
#page-card .cdu-reqs {
  display: flex; flex-direction: column; gap: 9px;
  margin-top: 16px;
}
#page-card .cdu-req {
  padding: 10px 12px 11px; border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(235, 199, 128, .16);
}
#page-card .cdu-req.ok { border-color: rgba(126, 214, 106, .38); background: rgba(110, 210, 90, .075); }
#page-card .cdu-req.no { border-color: rgba(255, 122, 90, .34); background: rgba(255, 110, 90, .06); }
#page-card .cdu-req-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#page-card .cdu-req-top span { font-size: 11.5px; color: #B8A98E; }
#page-card .cdu-req-top b { font-size: 15px; font-weight: 900; color: #FFD07A; font-variant-numeric: tabular-nums; }
#page-card .cdu-req-top b small { font-size: 9.5px; font-weight: 600; color: #9C917B; margin-left: 2px; }
#page-card .cdu-req-bar {
  margin-top: 8px; height: 5px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, .075);
}
#page-card .cdu-req-bar i {
  display: block; height: 100%; border-radius: 3px; width: 0;
  background: linear-gradient(90deg, #F6D493, #D9A64F);
  transition: width .45s cubic-bezier(.22, .9, .3, 1);
}
#page-card .cdu-req.ok .cdu-req-bar i { background: linear-gradient(90deg, #9BE07F, #4FBF4A); }
#page-card .cdu-req-met {
  margin-top: 6px; display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; color: #8F8572;
}
#page-card .cdu-req-met em { font-style: normal; }
#page-card .cdu-req.ok .cdu-req-met em { color: #93D97C; }
#page-card .cdu-req.no .cdu-req-met em { color: #FF8E7C; }

#page-card .cdu-note {
  margin-top: 11px; text-align: center;
  font-size: 9.5px; line-height: 1.6; color: #7E7565;
}

/* 申购确认弹窗：明细行（复用解锁弹窗的金色窗口外壳） */
#page-card .cdb-rows {
  display: flex; flex-direction: column; gap: 8px; margin-top: 16px;
}
#page-card .cdb-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(235, 199, 128, .16);
}
#page-card .cdb-row span { font-size: 11.5px; color: #B8A98E; }
#page-card .cdb-row b {
  font-size: 14px; font-weight: 900; color: #FFD07A;
  font-variant-numeric: tabular-nums; text-align: right;
}
#page-card .cdb-row.gold b { color: #FFE08F; }
#page-card .cdb-row.ok b { color: #93D97C; }
#page-card .cdb-row.no { border-color: rgba(255, 122, 90, .34); background: rgba(255, 110, 90, .06); }
#page-card .cdb-row.no b { color: #FF8E7C; }

#page-card .cdu-btns { display: flex; gap: 10px; margin-top: 15px; }
#page-card .cdu-btns button {
  flex: 1; height: 42px; border-radius: 21px;
  font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: .5px;
}
#page-card .cdu-cancel {
  color: #C9BDA3; background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .1);
}
#page-card .cdu-ok {
  color: #4D3410;
  background: linear-gradient(180deg, #FFEFC6 0%, #EAB963 62%, #C08B36 100%);
  border: 1px solid rgba(255, 226, 166, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 18px rgba(190, 140, 60, .32);
}
#page-card .cdu-ok:active, #page-card .cdu-cancel:active { transform: scale(.98); }
#page-card .cdu-ok[disabled] {
  color: #8A7C64;
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: none;
}

/* 关闭按钮 */
#page-card .cdu-x {
  position: absolute; top: 10px; right: 12px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; color: #A2937C;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
}

/* 卡槽区：整条 5 格设计稿底图（v3） */
/* 四个统计胶囊：用设计稿壳体 */
#page-card .cd3-pill {
  position: relative !important;
  height: auto !important;
  aspect-ratio: 172 / 94;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("../assets/card3/pill.webp") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  overflow: visible;
}
#page-card .cd3-pill.on {
  background: url("../assets/card3/pill-on.webp") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}
#page-card .cd3-pill b {
  margin-top: 2px; font-size: 17px; color: #EEDDBC;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .65);
}
#page-card .cd3-pill.on b {
  font-size: 23px; font-weight: 900;
  color: #FFFDF2; -webkit-text-fill-color: #FFFDF2; background: none;
  text-shadow: 0 1px 0 rgba(120, 66, 0, .95), 0 2px 8px rgba(255, 170, 40, .85), 0 0 16px rgba(255, 150, 20, .55);
}
#page-card .cd3-pill.on span { color: #FFDFA8; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
#page-card .cd3-pill span { font-size: 10px; color: #A99B84; }

/* 待领取：常驻金环 + 金色文字（区别于其余三个纯展示胶囊） */
#page-card .cd3-pill-claim { cursor: pointer; }
#page-card .cd3-pill-claim::before {
  content: ''; position: absolute; inset: 1.5px; border-radius: 999px;
  background:
    radial-gradient(92% 140% at 50% -12%, rgba(255, 206, 112, .62), rgba(255, 172, 60, .26) 56%, rgba(255, 168, 56, .12) 100%);
  pointer-events: none;
}
#page-card .cd3-pill-claim::after {
  content: ''; position: absolute; inset: -1.5px; border-radius: 999px;
  border: 2px solid rgba(255, 221, 156, .98);
  box-shadow: inset 0 0 14px rgba(255, 190, 82, .5), 0 0 18px rgba(255, 182, 76, .62);
  pointer-events: none;
}
#page-card .cd3-pill-claim b { color: #FFF1D2 !important; text-shadow: 0 1px 3px rgba(90, 48, 0, .6) !important; }
#page-card .cd3-pill-claim span { color: #FFE3B2 !important; font-weight: 900;
  text-shadow: 0 1px 2px rgba(90, 48, 0, .55); }
#page-card .cd3-pill-claim span::after {
  content: '›'; margin-left: 1px; font-size: 12px; font-weight: 900; vertical-align: -1.5px;
}

/* 有收益：整颗换成实心金按钮（深色字），外加呼吸光 */
#page-card .cd3-pill-claim.claimable {
  border-radius: 999px !important;
  background: linear-gradient(180deg, #FFF7DC 0%, #FFD98F 42%, #F0BE62 74%, #D8973A 100%) !important;
  box-shadow: 0 0 0 1.5px #FFEFC4, 0 0 22px rgba(255, 190, 90, .9),
              inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 14px rgba(0, 0, 0, .35) !important;
  animation: cd3claim 1.5s ease-in-out infinite;
}
#page-card .cd3-pill-claim.claimable::after { border-color: rgba(255, 249, 224, .95); }
#page-card .cd3-pill-claim.claimable::before { background: none; }
#page-card .cd3-pill-claim.claimable b {
  color: #4A2804 !important; -webkit-text-fill-color: #4A2804;
  text-shadow: 0 1px 0 rgba(255, 250, 232, .75) !important;
}
#page-card .cd3-pill-claim.claimable span {
  color: #5E3406 !important; text-shadow: 0 1px 0 rgba(255, 250, 232, .6) !important;
}


/* 卡槽区：整条 5 格设计稿底图（含金色连接件与第 3 格光效） */
#page-card .cd3-slots {
  position: relative !important;
  display: block !important;
  margin: 0 12px !important;
  padding: 0 !important;
  gap: 0 !important;
  aspect-ratio: 840 / 190;
  background: url("../assets/card3/slots-row2.webp") center / 100% 100% no-repeat !important;
}
#page-card .cd3-slotcell {
  position: absolute !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0 !important;
  padding: 0 !important;
}
/* 5 格等宽：底图 slots-row2.webp 已去掉第 3 格烘焙高亮，格子按 136/840 等分 */
#page-card .cd3-slotcell:nth-child(1) { left: 3.33%;  top: 12.63%; width: 16.19%; height: 83.16%; }
#page-card .cd3-slotcell:nth-child(2) { left: 22.62%; top: 12.63%; width: 16.19%; height: 83.16%; }
#page-card .cd3-slotcell:nth-child(3) { left: 41.90%; top: 12.63%; width: 16.19%; height: 83.16%; }
#page-card .cd3-slotcell:nth-child(4) { left: 61.19%; top: 12.63%; width: 16.19%; height: 83.16%; }
#page-card .cd3-slotcell:nth-child(5) { left: 80.48%; top: 12.63%; width: 16.19%; height: 83.16%; }
#page-card .cd3-slotcell:nth-child(n+6) { display: none !important; }

#page-card .cd3-slot,
#page-card .cd3-slot.empty,
#page-card .cd3-slot.wait,
#page-card .cd3-slot.active {
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; aspect-ratio: auto !important;
  width: 100% !important; height: 100% !important; overflow: visible !important;
}
#page-card .cd3-slot > img { width: 58% !important; height: 58% !important; object-fit: contain; margin-bottom: 12% !important; }
#page-card .cd3-slot.active > img { width: 54% !important; height: 54% !important; }
#page-card .cd3-slot.active > img.cd3-slot-card { width: auto !important; height: 84% !important; margin-bottom: 5% !important; }
#page-card .cd3-slot-empty {
  font-size: 13px; color: #6E655A; letter-spacing: 3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55); margin-bottom: 14%;
}
#page-card .cd3-slot-lb {
  position: absolute; left: 0; right: 0; bottom: 7%;
  font-size: 9.5px; color: #8B8069; text-align: center; letter-spacing: .5px;
}
#page-card .cd3-slot-lb.on { color: #FFD98F; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* 小熊卡 · 未解锁卡槽（card-slot-unlock） */
#page-card .cd3-slotcell.locked { cursor: pointer; }
#page-card .cd3-slot.locked {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  background: rgba(255, 255, 255, .03) !important;
  border: 1px dashed rgba(226, 186, 116, .34) !important;
  border-radius: 12px !important;
}
#page-card .cd3-slot-lock { font-size: 15px; line-height: 1; opacity: .72; }
#page-card .cd3-slot-req {
  font-size: 8.5px; line-height: 1.25; text-align: center;
  color: #B79A6A; letter-spacing: .2px; padding: 0 3px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
#page-card .cd3-slotcell.locked .cd3-slot-lb { color: #C9A86A; font-weight: 700; }

/* 解锁弹窗：固定宽度（cdu-size） */
#page-card .cdu-frame {
  flex: 0 0 auto;
  width: 300px !important;
  max-width: calc(100% - 8px) !important;
}
#page-card .cdu-box { padding: 28px 18px 18px; }

/* 解锁弹窗：按钮不折行（cdu-nowrap） */
#page-card .cdu-btns button { white-space: nowrap; font-size: 13.5px; }
#page-card .cdu-ok[disabled] { letter-spacing: 0; }


/* 首页右上角头像 = 红包雨开关（2026-11-09） */
.hm3-crest.hb2-on img {
  box-shadow: 0 0 0 2px rgba(255, 214, 130, .85), 0 0 14px rgba(255, 150, 60, .55);
}
.hm3-crest.hb2-on::after {
  content: '×'; position: absolute; right: -2px; top: -2px;
  width: 15px; height: 15px; border-radius: 50%;
  font-size: 10px; line-height: 14px; color: #FFE9C8; text-align: center;
  background: rgba(30, 10, 8, .92); border: 1px solid rgba(255, 214, 130, .7);
}

/* =========================================================
   熊王矿机（2026-11-09）：8 档配置 + 我的矿机 + 佣金
   ========================================================= */
.mine8-page {
  background:
    radial-gradient(120% 46% at 50% 0%, rgba(210, 132, 40, .16), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #17120D 0%, #0C0B0A 54%, #08090A 100%);
}
.mine8-page .subbar.m8-bar {
  height: 70px;
  background: linear-gradient(180deg, rgba(28, 21, 14, .96), rgba(16, 12, 9, .94));
  border-bottom: 1px solid rgba(233, 196, 128, .12);
}
.mine8-page .m8-bar .back { background: rgba(255, 255, 255, .06); }
.mine8-page .m8-bar-txt { text-align: center; padding-right: 34px; }
.mine8-page .m8-bar-txt p { margin-top: 3px; font-size: 11px; color: #9B8C74; letter-spacing: .4px; }
.mine8-page .m8-bar-txt h1 {
  font-size: 20px; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(180deg, #FFF6DC 0%, #FFDF9C 46%, #D9A64F 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(255, 180, 70, .22));
}
.mine8-page .sub-body { padding: 18px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }

/* ---------- 顶部余额 ---------- */
.m8-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 18px; border-radius: 20px;
  background:
    radial-gradient(90% 130% at 78% 16%, rgba(255, 176, 80, .20), rgba(0, 0, 0, 0) 62%),
    linear-gradient(150deg, #2C2015 0%, #1A1410 58%, #12100D 100%);
  border: 1px solid rgba(233, 190, 108, .28);
  box-shadow: inset 0 1px 0 rgba(255, 226, 180, .1);
}
.m8-hero img {
  flex: 0 0 auto; width: 82px; height: 82px; object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6));
}
.m8-hero-txt { flex: 1; min-width: 0; }
.m8-hero-txt > span { font-size: 12px; color: #A08F76; letter-spacing: .3px; }
.m8-hero-txt > b {
  display: block; margin-top: 3px;
  font-size: 30px; font-weight: 900; line-height: 1.12;
  color: #FFD98F; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(255, 180, 70, .28);
}
.m8-hero-row { display: flex; gap: 18px; margin-top: 8px; font-size: 11.5px; color: #9A8D7B; }
.m8-hero-row em { font-style: normal; color: #E9CFA2; font-weight: 800; margin-left: 3px; }

/* ---------- 两个领取卡（左右并排，按钮通栏） ---------- */
.m8-claims { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.m8-claim-cell {
  padding: 13px 14px 12px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid rgba(233, 196, 128, .16);
}
.m8-claim-cell > span { display: block; font-size: 11px; color: #97896F; }
.m8-claim-cell > b {
  display: flex; align-items: center; gap: 5px;
  margin-top: 6px; font-size: 19px; font-weight: 900; color: #FFE0A6;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.m8-claim-cell > b i {
  flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF6D8, #F0C064 55%, #A8741F);
  box-shadow: inset 0 0 0 1.3px rgba(120, 76, 18, .5);
}
.m8-claim-cell > b em { font-style: normal; }
.m8-claim-cell > button {
  width: 100%; height: 34px; margin-top: 11px; border-radius: 17px;
  font-family: inherit; font-size: 13px; font-weight: 800; color: #4A2E05;
  background: linear-gradient(180deg, #FFE9B8, #DFA94D);
  border: 1px solid rgba(255, 226, 166, .5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .26);
}
.m8-claim-cell > button:active { transform: scale(.97); }
.m8-claim-cell > button[disabled] { opacity: .42; box-shadow: none; }

/* ---------- 区块标题 ---------- */
.m8-sec {
  display: flex; align-items: center; justify-content: space-between;
  margin: 22px 2px 12px;
}
.m8-sec h3 { font-size: 15.5px; font-weight: 900; color: #F0E2C6; letter-spacing: .5px; }
.m8-sec span { font-size: 11px; color: #8F8572; }

/* ---------- 轮播 ---------- */
.m8-carousel { position: relative; }
.m8-track {
  display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.m8-track::-webkit-scrollbar { display: none; }

.m8-slide {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  scroll-snap-align: center;
  display: flex; flex-direction: column;
  padding: 16px 16px 15px;
  border-radius: 20px;
  background:
    radial-gradient(110% 74% at 24% 34%, rgba(255, 176, 84, .16), rgba(0, 0, 0, 0) 62%),
    linear-gradient(160deg, #251C13 0%, #171310 56%, #100D0B 100%);
  border: 1.4px solid rgba(226, 186, 116, .34);
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .08), 0 12px 28px rgba(0, 0, 0, .45);
  overflow: hidden;
}

/* 名称（左） + 价格（右） */
.m8-slide-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.m8-slide-name {
  font-size: 19px; font-weight: 900; letter-spacing: .8px; color: #F8E9CC;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}
.m8-slide-price {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 17px; font-weight: 900; color: #FFD98F;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.m8-slide-price i {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF3C8, #E8B65E 58%, #9A6C1F);
  box-shadow: inset 0 0 0 1.2px rgba(120, 76, 18, .45);
}

/* 宝箱（左） + 三行数据（右） */
.m8-slide-body {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px;
  min-height: 168px;
}
.m8-slide-pic {
  flex: 0 0 46%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.m8-slide-pic img {
  width: 100%; max-width: 170px; height: auto; object-fit: contain;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .62));
}
.m8-slide-stats { flex: 1; min-width: 0; }
.m8-slide-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 9px 0;
  font-size: 12px; color: #96897A;
}
.m8-slide-row + .m8-slide-row { border-top: 1px solid rgba(255, 255, 255, .05); }
.m8-slide-row b {
  font-size: 15px; font-weight: 800; color: #E2D3B6;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.m8-slide-row b.hl { color: #FFD98F; font-size: 16.5px; font-weight: 900; }

/* 直推 / 间推 */
.m8-slide-comm {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed rgba(226, 186, 116, .24);
  font-size: 12px; color: #9A8D7B;
}
.m8-slide-comm b { color: #FFD98F; font-weight: 900; font-size: 13.5px; margin-left: 2px; }

.m8-buy {
  width: 100%; height: 46px; margin-top: 12px;
  border: 0; border-radius: 23px;
  font-family: inherit; font-size: 18px; font-weight: 900; letter-spacing: 2px;
  color: #4A2E05;
  background: linear-gradient(180deg, #FFF0C2 0%, #F3D080 26%, #DCA64A 62%, #B9802C 100%);
  box-shadow: 0 0 0 2px rgba(120, 82, 24, .3), inset 0 2px 0 rgba(255, 255, 255, .6),
              inset 0 -3px 10px rgba(120, 70, 10, .3), 0 10px 22px rgba(0, 0, 0, .4);
}
.m8-buy:active { transform: scale(.985); filter: brightness(1.04); }

/* 左右箭头 */
.m8-arrow {
  position: absolute; top: 44%;
  width: 26px; height: 26px;
  margin-top: -13px;
  border: 0; padding: 0;
  border-radius: 50%;
  background: rgba(12, 10, 8, .55);
  opacity: .85;
  z-index: 3;
}
.m8-arrow::before {
  content: ""; position: absolute; left: 6px; top: 7px;
  width: 11px; height: 11px;
  border-top: 2px solid #E6CB9C;
  border-right: 2px solid #E6CB9C;
}
.m8-arrow.prev { left: -6px; }
.m8-arrow.prev::before { transform: rotate(-135deg); left: 9px; }
.m8-arrow.next { right: -6px; }
.m8-arrow.next::before { transform: rotate(45deg); }
.m8-arrow:active { opacity: 1; }

/* 圆点 */
.m8-dots {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 14px; min-height: 8px;
}
.m8-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  transition: width .2s ease, background .2s ease;
}
.m8-dots i.on {
  width: 16px; border-radius: 3px;
  background: linear-gradient(90deg, #FFE0A6, #D8A44D);
  box-shadow: 0 0 8px rgba(255, 190, 90, .55);
}

/* ---------- 我的矿机 / 佣金（分段 tab） ---------- */
.m8-tabs {
  display: flex; gap: 8px; margin-top: 20px;
  padding: 7px 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .06);
}
.m8-tabs button {
  flex: 1; height: 34px; border-radius: 10px;
  font-family: inherit; font-size: 13px; font-weight: 800; color: #94886F;
  background: none;
}
.m8-tabs button.on {
  color: #3C2A0C;
  background: linear-gradient(180deg, #F7D493, #D8A44D);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.m8-pane { display: none; margin-top: 12px; }
.m8-pane.on { display: block; }

.m8-list { display: flex; flex-direction: column; gap: 11px; }
.m8-item {
  padding: 15px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(38, 33, 27, .94), rgba(18, 16, 13, .96));
  border: 1.2px solid rgba(226, 186, 116, .2);
}
.m8-item-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.m8-item-top b { font-size: 13.5px; color: #F2E3C6; font-weight: 800; letter-spacing: .2px; }
.m8-item-top span { font-size: 11px; color: #A3947B; }
.m8-item-top span.done { color: #7FD06A; }
.m8-prog {
  margin-top: 11px; height: 6px; border-radius: 3px;
  background: rgba(255, 255, 255, .09); overflow: hidden;
}
.m8-prog i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #FFE0A6, #D8A44D);
  box-shadow: 0 0 8px rgba(255, 190, 90, .4);
}
.m8-item-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 9px; font-size: 11px; color: #94886F;
}
.m8-item-meta b { color: #FFD98F; font-variant-numeric: tabular-nums; }

/* ---------- 规则 ---------- */
.m8-rules {
  padding: 15px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  font-size: 11.5px; line-height: 1.9; color: #A29787;
}
.m8-rules b { color: #FFD98F; font-weight: 800; }
.m8-rules p { margin: 0 0 3px; }

.m8-empty {
  padding: 32px 12px; text-align: center; font-size: 12.5px; color: #A79B85;
  border-radius: 16px; border: 1px dashed rgba(235, 199, 128, .22);
}
.m8-empty span { display: block; margin-top: 7px; font-size: 11px; color: #7F7666; }
.m8-pad { height: calc(40px + env(safe-area-inset-bottom, 0px)); }

/* 购买弹层里的档位摘要 */
.m8-buy-card {
  margin-top: 12px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
}

/* ========= 红包雨房间（设计稿 51 · 低消耗） ========= */
.hbr2-page { background: #0B0709; }
.hbr2-page .hbr2-scroll {
  position: absolute; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.hbr2-page .hbr2-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1088 / 1520;
  background: #0B0709;
}
.hbr2-page .hbr2-art > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: 100% 100%;
  pointer-events: none; user-select: none;
}

/* 透明热区 */
.hbr2-page .hbr2-hit {
  position: absolute; z-index: 3;
  padding: 0; border: 0; background: none;
  border-radius: 10px;
}
.hbr2-page .hbr2-hit:active { background: rgba(255, 255, 255, .07); }
.hbr2-page .hbr2-back { left: 5.0%;  top: 2.2%; width: 8.0%; height: 3.4%; }
.hbr2-page .hbr2-mine {
  left: 79.4%; top: 2.2%; width: 17.5%; height: 3.5%; border-radius: 18px;
  color: transparent; font-size: 0; overflow: hidden;
}
.hbr2-page .hbr2-room .hbr2-enter { pointer-events: auto; }
.hbr2-page .hbr2-enter[data-hbrjoin="0"] { left: 77.4%; top: 40.8%; width: 17.6%; height: 4.6%; }
.hbr2-page .hbr2-enter[data-hbrjoin="1"] { left: 77.4%; top: 68.5%; width: 17.6%; height: 4.6%; }
.hbr2-page .hbr2-enter[data-hbrjoin="2"] { left: 77.4%; top: 96.3%; width: 17.6%; height: 4.6%; }

/* 房间卡的动态数据（本体全在图里，这里只放数字） */
.hbr2-page .hbr2-room {
  position: absolute; inset: 0;
  z-index: 2; pointer-events: none;
}
.hbr2-page .hbr2-room.off { opacity: .5; }

.hbr2-page .hbr2-stake {
  position: absolute; left: 78.6%;
  font-size: 15px; font-weight: 800; line-height: 1;
  color: #FFD98F;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .8);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hbr2-page .hbr2-seats {
  position: absolute; left: 84.2%;
  font-size: 14px; font-weight: 700; line-height: 1;
  color: #E6D2B4;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .8);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* 进度条：轨道在图里，这里只画填充段 */
.hbr2-page .hbr2-bar {
  position: absolute; left: 8.82%; width: 83.82%; height: 2.4%;
  display: block; border-radius: 999px; overflow: hidden;
}
.hbr2-page .hbr2-bar i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #C98A46, #FFC671 62%, #C9832F);
  box-shadow: 0 0 8px rgba(255, 170, 70, .5);
  transition: width .5s cubic-bezier(.22, .9, .3, 1);
}

/* 三张卡的纵向坐标（设计稿实测 / 1520） */
.hbr2-page .hbr2-room[data-room="0"] .hbr2-stake { top: 27.24%; }
.hbr2-page .hbr2-room[data-room="0"] .hbr2-seats { top: 32.37%; }
.hbr2-page .hbr2-room[data-room="0"] .hbr2-bar   { top: 37.30%; }

.hbr2-page .hbr2-room[data-room="1"] .hbr2-stake { top: 54.55%; }
.hbr2-page .hbr2-room[data-room="1"] .hbr2-seats { top: 60.40%; }
.hbr2-page .hbr2-room[data-room="1"] .hbr2-bar   { top: 64.20%; }

.hbr2-page .hbr2-room[data-room="2"] .hbr2-stake { top: 82.95%; left: 76.0%; }
.hbr2-page .hbr2-room[data-room="2"] .hbr2-seats { top: 87.60%; }
.hbr2-page .hbr2-room[data-room="2"] .hbr2-bar   { top: 92.70%; }

/* 规则：底图之外，用 CSS 重建圆角框 */
.hbr2-page .hbr2-rules {
  margin: 14px 14px 0;
  padding: 14px 16px 15px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  font-size: 11.5px; line-height: 1.85; color: #BFB1A0;
}
.hbr2-page .hbr2-rules p { margin: 0 0 6px; }
.hbr2-page .hbr2-rules p:last-child { margin-bottom: 0; }
.hbr2-page .hbr2-rules b { color: #FFD98F; font-weight: 800; }
.hbr2-page .hbr2-pad { height: calc(26px + env(safe-area-inset-bottom, 0px)); }

/* ========= 红包雨座位页（设计稿 52/53/54 · 低消耗） ========= */
.hbr3-page { background: #0B0709; }
.hbr3-page .hbr3-scroll {
  position: absolute; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.hbr3-page .hbr3-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1088 / 2048;
  background: #0B0709;
}
.hbr3-page .hbr3-art[data-roomkey="mid"] { aspect-ratio: 1088 / 2080; }
.hbr3-page .hbr3-art > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; object-fit: 100% 100%;
  pointer-events: none; user-select: none;
}

/* 透明热区 */
.hbr3-page .hbr3-hit {
  position: absolute; z-index: 4;
  padding: 0; border: 0; background: none; border-radius: 12px;
}
.hbr3-page .hbr3-hit:active { background: rgba(255, 255, 255, .07); }
.hbr3-page .hbr3-back { left: 4.4%; top: 1.7%; width: 8.0%; height: 3.4%; }
.hbr3-page .hbr3-refresh {
  left: 84.4%; top: 1.6%; width: 12.9%; height: 3.5%; border-radius: 22px;
  color: transparent; font-size: 0; overflow: hidden;
}
.hbr3-page .hbr3-join {
  position: absolute; left: 4.0%; top: 49.1%; width: 92.0%; height: 4.9%;
  z-index: 4;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; border-radius: 26px;
  font-family: inherit; font-size: 16px; font-weight: 900; letter-spacing: 1.5px;
  color: #4A2E08;
  text-shadow: 0 1px 0 rgba(255, 246, 214, .55);
}
.hbr3-page .hbr3-join:active { filter: brightness(1.05); }
.hbr3-page .hbr3-join[disabled] { color: #6E5636; text-shadow: none; }

/* 顶部三项统计（底图已抹掉数字） */
.hbr3-page .hbr3-stat {
  position: absolute; z-index: 2;
  font-size: 17px; font-weight: 900; line-height: 1;
  color: #FFE7B4;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8), 0 0 12px rgba(255, 186, 84, .45);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 第一格：余额长度不固定，按「标签墨迹中心 20.6%」居中，长数字自然向左展开 */
.hbr3-page .hbr3-stat1 { left: 8.4%; width: 24.4%; text-align: center; top: 14.6%; }
.hbr3-page .hbr3-stat3 { left: 71.8%; top: 14.6%; }

/* 十个座位的覆盖层（空位不渲染，座位号与宝石由底图提供） */
.hbr3-page .hbr3-seats {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
}
.hbr3-page .hbr3-seat {
  position: absolute;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 0 4.4%;
  border: 0; background: none;
  pointer-events: auto;
}
.hbr3-page .hbr3-seat.picked { border-radius: 12px; box-shadow: 0 0 0 2px rgba(255, 214, 140, .8) inset; }

/* 覆盖「空位」的胶囊 */
.hbr3-page .hbr3-badge {
  display: block; max-width: 100%;
  padding: 3px 9px; border-radius: 999px;
  font-style: normal; font-size: 9.5px; font-weight: 800; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(16, 10, 10, .92);
  border: 1px solid rgba(226, 186, 116, .35);
  color: #E9D2AC;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}
.hbr3-page .hbr3-badge.mine,
.hbr3-page .hbr3-seat.mine .hbr3-badge { color: #9AD3F2; border-color: rgba(140, 200, 240, .5); }
.hbr3-page .hbr3-badge.share { color: #FFD98F; border-color: rgba(255, 205, 130, .6); }
.hbr3-page .hbr3-badge.win {
  color: #402808;
  background: linear-gradient(180deg, #FFE8B4, #E9B95F);
  border-color: rgba(255, 236, 190, .8);
  box-shadow: 0 3px 10px rgba(240, 180, 70, .45);
}
.hbr3-page .hbr3-badge.pick { color: #FFD98F; border-color: rgba(255, 205, 130, .7); }

/* 开奖结果 */
.hbr3-page .hbr3-result {
  position: absolute; left: 5%; right: 5%; top: 55.5%;
  z-index: 5;
  padding: 11px 13px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(58, 30, 22, .96), rgba(26, 14, 12, .97));
  border: 1px solid rgba(235, 160, 110, .38);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .6);
  font-size: 11px; color: #E6D2B4;
}
.hbr3-page .hbr3-result.hide { display: none; }
.hbr3-page .hbr3-res-head { font-size: 11.5px; font-weight: 800; color: #FFCB8A; }
.hbr3-page .hbr3-res-main { margin-top: 5px; font-size: 12.5px; }
.hbr3-page .hbr3-res-main b { color: #FFD98F; font-size: 15px; }
.hbr3-page .hbr3-res-sub { margin-top: 4px; font-size: 10px; color: #A99880; }

/* 历史开奖覆盖层（底图里的占位字与虚线框已擦掉，这里自绘面板） */
.hbr3-page .hbr3-history {
  position: absolute; left: 4%; right: 4%; top: 62.6%; bottom: 2.4%;
  z-index: 3;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 9px 9px 10px;
  border-radius: 16px;
  border: 1px dashed rgba(214, 168, 104, .34);
  background: rgba(10, 6, 4, .62);
}
.hbr3-page .hbr3-history.hide { display: none; }

/* 今日累计输赢 */
.hbr3-page .hbr3-hist-sum {
  flex: 0 0 auto;
  padding: 10px 12px 11px;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(70, 44, 16, .78), rgba(34, 21, 10, .78));
  border: 1px solid rgba(224, 176, 108, .34);
  box-shadow: inset 0 1px 0 rgba(255, 226, 172, .16);
}
.hbr3-page .hbr3-hs-main {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.hbr3-page .hbr3-hs-main > span { font-size: 11.5px; color: #CBAA7E; letter-spacing: .5px; }
.hbr3-page .hbr3-hs-net {
  font-size: 21px; font-weight: 900; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: #E8D3AE;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.hbr3-page .hbr3-hs-net.win { color: #FFD166; text-shadow: 0 2px 8px rgba(255, 176, 66, .45); }
.hbr3-page .hbr3-hs-net.lose { color: #FF9A86; text-shadow: 0 2px 8px rgba(255, 96, 72, .35); }
.hbr3-page .hbr3-hs-sub {
  display: flex; gap: 12px; margin-top: 7px;
  font-size: 10.5px; color: #A68C6B;
}
.hbr3-page .hbr3-hs-sub span { font-variant-numeric: tabular-nums; }

/* 当天开奖记录（放大字号与行高） */
.hbr3-page .hbr3-hrow {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 9px;
  padding: 12px 13px; border-radius: 13px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .075);
  font-size: 12.5px; color: #B4A088;
}
.hbr3-page .hbr3-hr-id { flex: 0 0 auto; color: #C9AE86; }
.hbr3-page .hbr3-hr-main { flex: 1 1 auto; min-width: 0; }
.hbr3-page .hbr3-hrow b {
  color: #FFD98F; font-weight: 900; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.hbr3-page .hbr3-hrow time {
  flex: 0 0 auto; font-size: 11px; color: #8C7F6C;
  font-variant-numeric: tabular-nums;
}
.hbr3-page .hbr3-hist-empty {
  flex: 0 0 auto;
  padding: 26px 0; text-align: center;
  font-size: 12px; color: #8F836F;
}

/* 十个座位的百分比位置（按各自设计稿实测） */
#page-hbroom .hbr3-art[data-roomkey="normal"] .hbr3-seat:nth-child(1) { left: 4.23%; top: 24.32%; width: 16.54%; height: 9.96%; }
#page-hbroom .hbr3-art[data-roomkey="normal"] .hbr3-seat:nth-child(2) { left: 21.32%; top: 24.32%; width: 17.65%; height: 9.96%; }
#page-hbroom .hbr3-art[data-roomkey="normal"] .hbr3-seat:nth-child(3) { left: 40.44%; top: 24.32%; width: 17.65%; height: 9.96%; }
#page-hbroom .hbr3-art[data-roomkey="normal"] .hbr3-seat:nth-child(4) { left: 59.56%; top: 24.32%; width: 17.65%; height: 9.96%; }
#page-hbroom .hbr3-art[data-roomkey="normal"] .hbr3-seat:nth-child(5) { left: 78.68%; top: 24.32%; width: 17.65%; height: 9.96%; }
#page-hbroom .hbr3-art[data-roomkey="normal"] .hbr3-seat:nth-child(6) { left: 4.23%; top: 35.45%; width: 16.54%; height: 9.96%; }
#page-hbroom .hbr3-art[data-roomkey="normal"] .hbr3-seat:nth-child(7) { left: 21.32%; top: 35.45%; width: 17.65%; height: 9.96%; }
#page-hbroom .hbr3-art[data-roomkey="normal"] .hbr3-seat:nth-child(8) { left: 40.44%; top: 35.45%; width: 17.65%; height: 9.96%; }
#page-hbroom .hbr3-art[data-roomkey="normal"] .hbr3-seat:nth-child(9) { left: 59.56%; top: 35.45%; width: 17.65%; height: 9.96%; }
#page-hbroom .hbr3-art[data-roomkey="normal"] .hbr3-seat:nth-child(10) { left: 78.68%; top: 35.45%; width: 17.65%; height: 9.96%; }
#page-hbroom .hbr3-art[data-roomkey="mid"] .hbr3-seat:nth-child(1) { left: 4.04%; top: 24.23%; width: 16.82%; height: 10.19%; }
#page-hbroom .hbr3-art[data-roomkey="mid"] .hbr3-seat:nth-child(2) { left: 21.14%; top: 24.23%; width: 17.83%; height: 10.19%; }
#page-hbroom .hbr3-art[data-roomkey="mid"] .hbr3-seat:nth-child(3) { left: 40.26%; top: 24.23%; width: 17.83%; height: 10.19%; }
#page-hbroom .hbr3-art[data-roomkey="mid"] .hbr3-seat:nth-child(4) { left: 59.38%; top: 24.23%; width: 17.83%; height: 10.19%; }
#page-hbroom .hbr3-art[data-roomkey="mid"] .hbr3-seat:nth-child(5) { left: 78.49%; top: 24.23%; width: 17.83%; height: 10.19%; }
#page-hbroom .hbr3-art[data-roomkey="mid"] .hbr3-seat:nth-child(6) { left: 4.04%; top: 35.19%; width: 16.82%; height: 10.19%; }
#page-hbroom .hbr3-art[data-roomkey="mid"] .hbr3-seat:nth-child(7) { left: 21.14%; top: 35.19%; width: 17.83%; height: 10.19%; }
#page-hbroom .hbr3-art[data-roomkey="mid"] .hbr3-seat:nth-child(8) { left: 40.26%; top: 35.19%; width: 17.83%; height: 10.19%; }
#page-hbroom .hbr3-art[data-roomkey="mid"] .hbr3-seat:nth-child(9) { left: 59.38%; top: 35.19%; width: 17.83%; height: 10.19%; }
#page-hbroom .hbr3-art[data-roomkey="mid"] .hbr3-seat:nth-child(10) { left: 78.49%; top: 35.19%; width: 17.83%; height: 10.19%; }
#page-hbroom .hbr3-art[data-roomkey="high"] .hbr3-seat:nth-child(1) { left: 4.04%; top: 22.95%; width: 18.84%; height: 11.43%; }
#page-hbroom .hbr3-art[data-roomkey="high"] .hbr3-seat:nth-child(2) { left: 23.16%; top: 22.95%; width: 15.81%; height: 11.43%; }
#page-hbroom .hbr3-art[data-roomkey="high"] .hbr3-seat:nth-child(3) { left: 40.44%; top: 22.95%; width: 17.65%; height: 11.43%; }
#page-hbroom .hbr3-art[data-roomkey="high"] .hbr3-seat:nth-child(4) { left: 59.56%; top: 22.95%; width: 17.65%; height: 11.43%; }
#page-hbroom .hbr3-art[data-roomkey="high"] .hbr3-seat:nth-child(5) { left: 78.68%; top: 22.95%; width: 17.65%; height: 11.43%; }
#page-hbroom .hbr3-art[data-roomkey="high"] .hbr3-seat:nth-child(6) { left: 4.04%; top: 35.45%; width: 18.84%; height: 10.64%; }
#page-hbroom .hbr3-art[data-roomkey="high"] .hbr3-seat:nth-child(7) { left: 23.16%; top: 35.45%; width: 15.81%; height: 10.64%; }
#page-hbroom .hbr3-art[data-roomkey="high"] .hbr3-seat:nth-child(8) { left: 40.44%; top: 35.45%; width: 17.65%; height: 10.64%; }
#page-hbroom .hbr3-art[data-roomkey="high"] .hbr3-seat:nth-child(9) { left: 59.56%; top: 35.45%; width: 17.65%; height: 10.64%; }
#page-hbroom .hbr3-art[data-roomkey="high"] .hbr3-seat:nth-child(10) { left: 78.68%; top: 35.45%; width: 17.65%; height: 10.64%; }
/* 座位内胶囊：垂直位置对齐底图「空位」 */
#page-hbroom .hbr3-seat .hbr3-badge { margin-bottom: 0; }

/* =========================================================
   熊王矿机 · 购买弹层 v2（设计稿：大卡 + 三图标块 + 支付条）
   ========================================================= */
#m8Sheet .m8-sheet-box {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 92%; overflow-y: auto;
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, #17120E 0%, #0C0A09 100%);
  border-top: 1.4px solid rgba(226, 186, 116, .38);
  box-shadow: 0 -18px 44px rgba(0, 0, 0, .7);
  animation: cpup .22s cubic-bezier(.22, .9, .3, 1) both;
}
#m8Sheet .m8-sheet-box::-webkit-scrollbar { display: none; }

/* 上半部：一张大矿机卡 */
#m8Sheet .m8-sheet-card {
  position: relative;
  padding: 14px 14px 16px;
  border-radius: 20px;
  background:
    radial-gradient(110% 70% at 50% 34%, rgba(255, 178, 84, .20), rgba(0, 0, 0, 0) 64%),
    linear-gradient(160deg, #241B13 0%, #16120F 58%, #0F0C0A 100%);
  border: 1.4px solid rgba(226, 186, 116, .42);
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .1), 0 12px 28px rgba(0, 0, 0, .5);
}
#m8Sheet .m8-sheet-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
#m8Sheet .m8-sheet-head b {
  font-size: 19px; font-weight: 900; letter-spacing: .8px; color: #F8E9CC;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
#m8Sheet .m8-sheet-price {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 18px; font-weight: 900; color: #FFD98F;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#m8Sheet .m8-sheet-price em { font-style: normal; }
#m8Sheet .m8-sheet-price i {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF3C8, #E8B65E 58%, #9A6C1F);
  box-shadow: inset 0 0 0 1.2px rgba(120, 76, 18, .45);
}
#m8Sheet .m8-sheet-pic {
  display: flex; align-items: center; justify-content: center;
  height: 186px; margin: 8px 0 6px;
  overflow: hidden;
}
#m8Sheet .m8-sheet-pic img {
  max-width: 82%; max-height: 176px; object-fit: contain;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .68)) drop-shadow(0 0 24px rgba(255, 170, 60, .16));
}

/* 三个图标块 */
#m8Sheet .m8-sheet-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 8px;
}
#m8Sheet .m8-tile {
  display: flex; flex-direction: column; align-items: center;
  padding: 11px 4px 10px;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(30, 26, 21, .95), rgba(16, 14, 12, .96));
  border: 1px solid rgba(226, 186, 116, .26);
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .06);
}
#m8Sheet .m8-tile-ic {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  color: #FFC873;
  filter: drop-shadow(0 0 7px rgba(255, 180, 70, .45));
}
#m8Sheet .m8-tile-ic svg { width: 100%; height: 100%; }
#m8Sheet .m8-tile em {
  margin-top: 7px; font-style: normal;
  font-size: 10.5px; color: #9C8F7B; letter-spacing: .2px;
}
#m8Sheet .m8-tile b {
  margin-top: 4px;
  font-size: 12.5px; font-weight: 900; color: #FFE0A6;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* 下半部：支付条 */
#m8Sheet .m8-sheet-pay {
  margin-top: 12px; padding: 14px 14px 4px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(26, 21, 16, .96), rgba(14, 12, 10, .98));
  border: 1px solid rgba(226, 186, 116, .26);
}
#m8Sheet .m8-sheet-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
#m8Sheet .m8-sheet-total span { font-size: 14px; font-weight: 700; color: #C3B49A; }
#m8Sheet .m8-sheet-total b {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 21px; font-weight: 900; color: #FFD98F;
  font-variant-numeric: tabular-nums;
}
#m8Sheet .m8-sheet-total b i {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF6D8, #F0C064 55%, #A8741F);
  box-shadow: inset 0 0 0 1.4px rgba(120, 76, 18, .5);
}
#m8Sheet .m8-sheet-total b em { font-style: normal; }

#m8Sheet .m8-sheet-btns {
  display: flex; gap: 10px; margin-top: 14px;
  padding-bottom: 10px;
}
#m8Sheet .m8-sheet-btns button {
  flex: 1; height: 46px; border-radius: 23px;
  font-family: inherit; font-size: 15.5px; font-weight: 900; letter-spacing: 1px;
}
#m8Sheet .m8-sheet-cancel {
  color: #D9CBB2;
  background: linear-gradient(180deg, rgba(38, 34, 29, .95), rgba(20, 18, 15, .96));
  border: 1px solid rgba(226, 186, 116, .3);
}
#m8Sheet .m8-sheet-ok {
  color: #4A2E05;
  background: linear-gradient(180deg, #FFF0C2 0%, #F3D080 26%, #DCA64A 62%, #B9802C 100%);
  border: 1.6px solid rgba(255, 90, 60, .75);
  box-shadow: 0 0 0 1px rgba(255, 120, 80, .25), inset 0 2px 0 rgba(255, 255, 255, .6),
              0 8px 20px rgba(0, 0, 0, .45);
}
#m8Sheet .m8-sheet-ok:active,
#m8Sheet .m8-sheet-cancel:active { transform: scale(.975); }
#m8Sheet .m8-sheet-ok[disabled] { opacity: .55; }

/* ============ 商品交易：购买弹层（复用 pb-* 视觉，2026-11-09） ============ */
/* trade-dlg-fix-20261109 */
/* 说明：#page-phonebill 的 pb-mask/pb-sheet 是页面作用域样式，交易页复用同一套 DOM
   类名时必须补一份 #page-trade 版本，否则弹层是 static/透明、被 .page overflow 裁掉 */
#page-trade .pb-mask {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .62);
}
#page-trade .pb-mask[hidden] { display: none; }
#page-trade .pb-sheet {
  width: 100%; max-height: 88vh; overflow-y: auto;
  padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px 22px 0 0;
  background: linear-gradient(160deg, #241D15 0%, #171310 60%, #12100C 100%);
  border-top: 1px solid rgba(233, 190, 108, .32);
  box-shadow: 0 -14px 34px rgba(0, 0, 0, .6);
  animation: pbSheetUp .24s ease;
}
#page-trade .pb-sheet::-webkit-scrollbar { display: none; }
#page-trade .pb-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
#page-trade .pb-sheet-head h3 { font-size: 16px; font-weight: 800; letter-spacing: .4px; color: #F6E7C8; }
#page-trade .pb-sheet-x {
  width: 30px; height: 30px; border-radius: 50%; line-height: 1;
  font-size: 18px; color: #B7A98E;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
}
#page-trade .pb-sheet-prod {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 13px; margin-bottom: 14px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 205, 120, .12), rgba(255, 255, 255, .025));
  border: 1px solid rgba(240, 200, 124, .22);
}
#page-trade .pb-sheet-prod img { width: 42px; height: 42px; object-fit: contain; }
#page-trade .pb-sheet-prod b { display: block; font-size: 15px; font-weight: 800; color: #F6E9CE; }
#page-trade .pb-sheet-prod span { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; color: #FFD07A; }
#page-trade .pb-label { font-size: 12px; font-weight: 700; letter-spacing: .6px; color: #C9B08A; }
#page-trade .pb-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(233, 190, 108, .2);
  font-size: 12px; color: #9A8F79;
}
#page-trade .pb-total b { font-size: 22px; font-weight: 900; color: #FFD07A; font-variant-numeric: tabular-nums; }
#page-trade .pb-total b i { font-style: normal; font-size: 11px; font-weight: 600; color: #A08D6E; }
#page-trade .pb-submit {
  width: 100%; height: 48px; margin-top: 14px; border-radius: 24px;
  font-size: 16px; font-weight: 800; letter-spacing: 1px; color: #5A3A12;
  background: linear-gradient(180deg, #FFEFC6, #EAB963 62%, #C08B36);
  border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 18px rgba(190, 140, 60, .3);
}
#page-trade .pb-submit:active { transform: scale(.985); filter: brightness(1.05); }
#page-trade .pb-submit[disabled] { opacity: .55; filter: saturate(.7); }
#page-trade .pb-tip { margin-top: 10px; font-size: 10.5px; line-height: 1.6; color: #7F7666; text-align: center; }
#page-trade .pb-sheet .pb-submit { margin-top: 16px; }
#page-trade .pb-sheet .pb-tip { margin-top: 10px; }


/* =========================================================
   熊王商城 · 空状态改版（2026-11-09）
   ========================================================= */
.shop-head { padding: 18px 16px 8px; gap: 10px; }
.shop-head-txt p { margin-top: 5px; font-size: 12px; color: #A7997F; }

.shop-bal {
  flex-direction: row; align-items: center; gap: 9px;
  padding: 7px 14px 7px 10px; border-radius: 18px;
  background:
    radial-gradient(120% 140% at 82% 12%, rgba(255, 198, 112, .18), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, rgba(48, 38, 26, .92), rgba(15, 12, 9, .96));
  border: 1px solid rgba(230, 190, 122, .44);
  box-shadow: inset 0 1px 0 rgba(255, 240, 204, .1), 0 8px 18px rgba(0, 0, 0, .34);
}
.shop-coin {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 34% 28%, #FFF6CC 0%, #F8D786 34%, #E3A93E 62%, #96600F 100%);
  box-shadow: inset 0 0 0 2px rgba(120, 78, 18, .32),
              inset 0 2px 4px rgba(255, 255, 255, .7),
              0 2px 6px rgba(0, 0, 0, .45);
}
.shop-coin::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  border: 1px solid rgba(120, 78, 18, .45);
}
.shop-bal-txt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.shop-bal-txt em {
  font-style: normal; font-size: 9.5px; letter-spacing: .14em; color: #B9A480;
}
.shop-bal-txt b {
  font-size: 17px; font-weight: 900; line-height: 1; color: #FFDF9B;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(255, 180, 70, .28);
}

.shop-rule {
  margin: 18px 16px 0; font-size: 12px; line-height: 1.6;
  color: #C3B193; letter-spacing: .02em;
}

.shop-tabs {
  gap: 10px; margin: 16px 16px 0; padding: 0;
  background: none; border: 0; border-radius: 0;
}
.shop-tabs button {
  height: 40px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: .06em; color: #C8AE84;
  border: 1px solid rgba(230, 190, 122, .34);
  background: linear-gradient(180deg, rgba(56, 44, 30, .55) 0%, rgba(14, 11, 8, .8) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 240, 204, .06);
}
.shop-tabs button.on {
  color: #3E2A0B;
  background: linear-gradient(180deg, #FCE6B1 0%, #EFC97D 46%, #DAA64E 100%);
  border-color: rgba(255, 233, 182, .2);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5),
              inset 0 -4px 9px rgba(146, 92, 18, .32),
              0 8px 18px rgba(0, 0, 0, .38);
}

.shop-panel { padding-top: 18px; }

.shop-stage {
  grid-column: 1 / -1;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(230, 190, 122, .3);
  background: linear-gradient(180deg, #1A1510 0%, #0E0B08 100%);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 240, 204, .05);
}
.shop-stage img { display: block; width: 100%; height: auto; }
.shop-stage .st-txt {
  padding: 18px 12px 22px; text-align: center;
  border-top: 1px solid rgba(230, 190, 122, .34);
  background: linear-gradient(180deg, rgba(28, 23, 17, .92), rgba(13, 11, 8, .98));
}
.shop-stage .st-txt b {
  display: block; font-size: 15px; font-weight: 700; letter-spacing: .08em; color: #EAD9B7;
}
.shop-stage .st-txt span {
  display: block; margin-top: 11px; font-size: 13px; letter-spacing: .06em; color: #9C8D72;
}
.shop-page {
  background:
    radial-gradient(120% 56% at 50% 0%, rgba(255, 176, 92, .14), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, #171109 0%, #0d0b09 48%, #070604 100%);
}

/* =========================================================
   商品交易：购买弹窗 v2（设计稿：金属包边 · 红圈确认键）2026-11-09
   marker: ptx-dlg2-20261109
   ========================================================= */
#page-trade .pb-mask {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .62);
}
#page-trade .pb-mask[hidden] { display: none; }

/* 外框：金色金属包边 */
#page-trade .ptx-sheet {
  position: relative;
  width: calc(100% - 12px); max-height: 92vh;
  display: flex; flex-direction: column;
  margin: 0 6px; padding: 7px;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  background:
    linear-gradient(180deg,
      #FBEBBE 0%, #D3A85F 7%, #8C6228 24%, #E5C286 40%,
      #A77838 60%, #F3DCA9 82%, #97672C 100%);
  box-shadow:
    0 0 0 1px rgba(46, 26, 4, .9),
    0 -16px 36px rgba(0, 0, 0, .65),
    inset 0 1px 0 rgba(255, 246, 214, .7);
  animation: pbSheetUp .24s ease;
}

/* 内板：深色底面 + 金色细内线 */
#page-trade .ptx-sheet-body {
  position: relative; flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 15px 13px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 10px 10px 0 0;
  background:
    radial-gradient(120% 48% at 50% 0%, rgba(255, 206, 122, .08) 0%, rgba(255, 206, 122, 0) 62%),
    linear-gradient(180deg, #221C15 0%, #191510 52%, #12100C 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 219, 158, .32),
    inset 0 3px 14px rgba(0, 0, 0, .55);
  scrollbar-width: none;
}
#page-trade .ptx-sheet-body::-webkit-scrollbar { display: none; }

/* 四角铆钉 */
#page-trade .ptx-screw {
  position: absolute; z-index: 2; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #FFF6D8 0%, #E0BA74 38%, #9A6F32 72%, #5A3B12 100%);
  box-shadow: 0 0 0 1px rgba(48, 28, 5, .85), 0 1px 2px rgba(0, 0, 0, .5);
}
#page-trade .ptx-screw.tl { left: 6px; top: 6px; }
#page-trade .ptx-screw.tr { right: 6px; top: 6px; }
#page-trade .ptx-screw.bl { left: 6px; bottom: 6px; }
#page-trade .ptx-screw.br { right: 6px; bottom: 6px; }

/* 边框菱形钉 */
#page-trade .ptx-stud {
  position: absolute; z-index: 2; width: 5px; height: 5px;
  transform: rotate(45deg);
  background: linear-gradient(180deg, #FFF2CE, #C89656);
  box-shadow: 0 0 0 1px rgba(48, 28, 5, .7);
}
#page-trade .ptx-stud.s1 { top: 1px; left: 33%; }
#page-trade .ptx-stud.s2 { top: 1px; right: 33%; }
#page-trade .ptx-stud.sl1 { left: 1px; top: 30%; }
#page-trade .ptx-stud.sl2 { left: 1px; top: 68%; }
#page-trade .ptx-stud.sr1 { right: 1px; top: 30%; }
#page-trade .ptx-stud.sr2 { right: 1px; top: 68%; }

/* 标题 */
#page-trade .pb-sheet-head { margin-bottom: 14px; }
#page-trade .pb-sheet-head h3 {
  font-size: 22px; font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(180deg, #FFF6DC 6%, #F1CE8C 52%, #C08F46 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 2px rgba(60, 32, 0, .55));
}
#page-trade .pb-sheet-x {
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 19px; line-height: 1; color: #E9D9B8;
  background: radial-gradient(circle at 38% 30%, #3A332A 0%, #241F19 70%, #1A1612 100%);
  border: 1px solid rgba(214, 170, 100, .5);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .14), 0 2px 6px rgba(0, 0, 0, .45);
}

/* 商品摘要 */
#page-trade .pb-sheet-prod {
  align-items: center; gap: 13px;
  padding: 13px 14px; margin-bottom: 16px; border-radius: 13px;
  background: linear-gradient(165deg, #2A241D 0%, #201B15 55%, #191511 100%);
  border: 1px solid rgba(214, 175, 110, .38);
  box-shadow: inset 0 1px 0 rgba(255, 235, 195, .10), 0 6px 16px rgba(0, 0, 0, .35);
}
#page-trade .pb-sheet-prod img {
  width: 52px; height: 52px; flex: 0 0 52px;
  filter: drop-shadow(0 4px 10px rgba(255, 190, 90, .25));
}
#page-trade .pb-sheet-prod b { font-size: 16px; }
#page-trade .pb-sheet-prod span { font-size: 13px; margin-top: 4px; }

/* 标签 */
#page-trade .pb-label { font-size: 13px; font-weight: 800; letter-spacing: .5px; color: #E4CBA0; }

/* 数量：左圆环空心 + 右金色实心 */
#page-trade .ptx-qty { gap: 10px; margin-top: 10px; }
#page-trade .ptx-qty button {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  font-size: 22px; font-weight: 700; line-height: 1; color: #F4DA9E;
  background: linear-gradient(180deg, #322B22 0%, #201B15 60%, #17130F 100%);
  border: 1.5px solid #B78A48;
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .18), 0 3px 8px rgba(0, 0, 0, .5);
}
#page-trade .ptx-qty button:last-child {
  color: #3A2408;
  background: linear-gradient(180deg, #FFEDB8 0%, #EFC168 52%, #BE8234 100%);
  border-color: #FFDFA2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 4px 10px rgba(200, 140, 50, .38);
}
#page-trade .ptx-qty input {
  height: 40px; border-radius: 13px;
  font-size: 17px; font-weight: 800; color: #FBF0D8;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  border: 1px solid rgba(214, 175, 110, .5);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4);
}

/* 收货地址 */
#page-trade .ptx-addrs { margin-top: 10px; }
#page-trade .ptx-addr-empty {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 20px 12px; border-radius: 13px;
  border: 1px dashed rgba(214, 175, 110, .5);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .12));
  color: #CFC3AC; font-size: 12.5px;
}
#page-trade .ptx-addr-empty::before {
  content: ''; flex: 0 0 17px; width: 17px; height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8B77E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.8-7-11a7 7 0 1 1 14 0c0 5.2-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity: .95;
}
#page-trade .ptx-addr-new {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 11px; padding: 7px 14px; border-radius: 10px;
  font-size: 12px; font-weight: 700; color: #F0D198; letter-spacing: .3px;
  background: linear-gradient(180deg, rgba(255, 215, 150, .12), rgba(255, 215, 150, .03));
  border: 1px solid rgba(214, 175, 110, .6);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .16);
}
#page-trade .ptx-addr {
  background: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  border: 1px solid rgba(214, 175, 110, .28);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .08);
}
#page-trade .ptx-addr.on {
  border-color: rgba(255, 208, 122, .75);
  background: linear-gradient(160deg, rgba(255, 205, 120, .17), rgba(255, 205, 120, .05));
  box-shadow: inset 0 0 0 1px rgba(255, 220, 150, .18), 0 4px 12px rgba(180, 120, 40, .2);
}

/* 合计 */
#page-trade .pb-total {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(214, 175, 110, .3);
  font-size: 13px; color: #BDB19B;
}
#page-trade .pb-total b {
  font-size: 26px; font-weight: 900; letter-spacing: -.3px;
  background: linear-gradient(180deg, #FFF4D2 12%, #EFC778 58%, #CE9A4C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 2px rgba(70, 38, 0, .5));
}
#page-trade .pb-total b i {
  font-size: 13px; font-weight: 700; color: #E9C687;
  -webkit-text-fill-color: #E9C687;
}

/* 确认按钮：金面 + 红圈 */
#page-trade .pb-submit {
  height: 52px; margin-top: 16px; border-radius: 26px;
  font-size: 17px; font-weight: 900; letter-spacing: 3px; color: #3B2407;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .16) 45%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #FFE9B2 0%, #F1C369 52%, #D0923B 100%);
  border: 2px solid #C43A28;
  box-shadow:
    0 0 0 1px rgba(32, 12, 4, .6),
    0 10px 24px rgba(190, 62, 30, .28),
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -2px 4px rgba(150, 90, 20, .35);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}
#page-trade .pb-submit:active { transform: scale(.985); filter: brightness(1.05); }
#page-trade .pb-submit[disabled] { opacity: .55; filter: saturate(.7); }

#page-trade .pb-tip {
  margin-top: 11px; font-size: 10.5px; line-height: 1.65; color: #8E8168;
}


/* =========================================================
   我的兑换 · 空状态卡片（2026-11-09）
   ========================================================= */
.shop-panel { padding-top: 20px; }

.shop-empty-card {
  position: relative; width: 100%;
  aspect-ratio: 930 / 1042;
  border-radius: 14px; overflow: hidden;
  background: url(../assets/mine/shop_empty_card.webp) center / 100% 100% no-repeat;
}
.shop-empty-card .ec-body {
  position: absolute; left: 0; right: 0; top: 55.1%;
  transform: translateY(-50%); text-align: center;
}
.shop-empty-card .ec-body b {
  display: block; font-size: 16px; font-weight: 800; line-height: 1; letter-spacing: 0;
  background: linear-gradient(180deg, #FFF5DA 0%, #F4DDB0 55%, #DDB874 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255, 190, 90, .2));
}
.shop-empty-card .ec-body span {
  display: block; margin-top: 11px; font-size: 11.5px; font-weight: 500; line-height: 1;
  letter-spacing: .03em; color: #C6B597;
}
.shop-page .foot-note { color: #77726A; }

/* =========================================================
   收货地址 · 黑金科技版（覆盖块 · 只追加不删除）
   ========================================================= */
.addr-page {
  background: #05060A url(../assets/addr-tech-bg.webp) center top / cover no-repeat;
}
.addr-page .subbar {
  height: 62px;
  background: linear-gradient(180deg, rgba(5, 6, 9, .9) 0%, rgba(5, 6, 9, .55) 62%, rgba(5, 6, 9, 0) 100%);
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.addr-page .subbar .back {
  width: 36px; height: 36px;
  color: #F2D393;
  background: radial-gradient(circle at 50% 32%, rgba(255, 214, 150, .16), rgba(255, 255, 255, .02) 78%);
  border: 1px solid rgba(235, 197, 126, .38);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .22), 0 4px 14px rgba(0, 0, 0, .5);
}
.addr-page .subbar .back:active { background: rgba(255, 214, 150, .22); }
.addr-page .subbar .back svg { width: 18px; height: 18px; }
.addr-page .subbar-txt h1 {
  font-size: 19px; letter-spacing: 1.2px; font-weight: 800;
  background: linear-gradient(180deg, #FFF8E6 0%, #F6DEA6 44%, #D9A957 78%, #B98A3C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(190, 130, 40, .32));
}
.addr-page .subbar-txt p {
  margin-top: 3px; font-size: 10.5px; letter-spacing: .6px; color: #9C8B6F;
}
.addr-page .sub-body { top: 62px; padding: 12px 16px 28px; }

.addr-page .addr-empty {
  min-height: clamp(150px, 27vh, 214px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px; text-align: center;
  border-radius: 18px;
  border: 1px dashed rgba(214, 178, 112, .24);
  background:
    radial-gradient(92% 78% at 50% 0%, rgba(255, 196, 110, .05), rgba(0, 0, 0, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .012), rgba(0, 0, 0, 0));
  font-size: 14px; font-weight: 600; letter-spacing: .8px; color: #F1E5CC;
  text-shadow: 0 1px 10px rgba(255, 190, 90, .12);
}
.addr-page .addr-empty span {
  display: block; margin-top: 12px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .5px; color: #A79A82;
}

.addr-page .addr-add {
  height: 52px; margin-top: 16px; border-radius: 999px;
  font-size: 15.5px; font-weight: 800; letter-spacing: 2px;
  color: #3E2A0A;
  background: linear-gradient(180deg, #FFF3CF 0%, #F5D89B 22%, #E0B263 52%, #C08F3F 82%, #E4BC74 100%);
  border: 1px solid rgba(255, 236, 186, .78);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, .55),
    0 0 24px rgba(236, 180, 86, .26),
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -2px 7px rgba(120, 80, 20, .32);
  text-shadow: 0 1px 0 rgba(255, 250, 230, .5);
}
.addr-page .addr-add:active { transform: scale(.985); filter: brightness(1.04); }
.addr-page .addr-foot-pad { height: 22px; }

/* ---------- 地址弹层：金框科技面板 ---------- */
#addrSheet .mk-mask { background: rgba(0, 0, 0, .74); }
#addrSheet .mk-box.addr-box {
  left: 6px; right: 6px;
  padding: 1.5px;
  border: 0; border-radius: 0;
  background: linear-gradient(150deg, #F7E7BC 0%, #9C7431 16%, #FFEFC9 36%, #8A6325 58%, #E8CB93 76%, #A57B36 100%);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  box-shadow: 0 -18px 44px rgba(0, 0, 0, .62), 0 0 34px rgba(230, 175, 80, .12);
}
#addrSheet .addr-frame-in {
  position: relative;
  padding: 22px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
  background:
    radial-gradient(120% 72% at 50% 0%, rgba(255, 196, 110, .1), rgba(0, 0, 0, 0) 62%),
    linear-gradient(170deg, #1D1A14 0%, #131210 55%, #0C0C0E 100%);
  box-shadow: inset 0 0 0 1px rgba(233, 197, 126, .18);
}
#addrSheet .addr-frame-in::before {
  content: ''; position: absolute; inset: 7px; pointer-events: none;
  background-repeat: no-repeat; background-size: 7px 7px;
  background-image:
    radial-gradient(circle, #FFF3D6 0 1.2px, #C69B55 1.3px 2.5px, rgba(90, 66, 26, .9) 2.6px 3.2px, transparent 3.3px),
    radial-gradient(circle, #FFF3D6 0 1.2px, #C69B55 1.3px 2.5px, rgba(90, 66, 26, .9) 2.6px 3.2px, transparent 3.3px),
    radial-gradient(circle, #FFF3D6 0 1.2px, #C69B55 1.3px 2.5px, rgba(90, 66, 26, .9) 2.6px 3.2px, transparent 3.3px),
    radial-gradient(circle, #FFF3D6 0 1.2px, #C69B55 1.3px 2.5px, rgba(90, 66, 26, .9) 2.6px 3.2px, transparent 3.3px);
  background-position: left 0 top 0, right 0 top 0, left 0 bottom 0, right 0 bottom 0;
}
#addrSheet .addr-box h3 {
  position: relative;
  font-size: 19px; font-weight: 800; letter-spacing: 1.2px;
  background: linear-gradient(180deg, #FFF8E6 0%, #F3D9A0 48%, #CFA255 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(200, 140, 50, .3));
}

#addrSheet .mk-input { position: relative; display: block; margin-top: 17px; }
#addrSheet .mk-input > span {
  display: block; margin-bottom: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .8px; color: #CBB182;
}
#addrSheet .addr-inp { position: relative; }
#addrSheet .addr-inp input,
#addrSheet .addr-inp textarea {
  display: block; width: 100%; border-radius: 10px;
  font-family: inherit; font-size: 14px; line-height: 1.55; color: #F6E9CE;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012)),
    linear-gradient(180deg, #121110, #0B0B0C);
  border: 1px solid rgba(224, 182, 110, .55);
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 160, .05),
    inset 0 2px 10px rgba(0, 0, 0, .5);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
#addrSheet .addr-inp input { height: 46px; padding: 0 14px; }
#addrSheet .addr-inp textarea { min-height: 78px; padding: 11px 14px; resize: none; }
#addrSheet .addr-inp input::placeholder,
#addrSheet .addr-inp textarea::placeholder { color: #756A57; }
#addrSheet .addr-inp input:focus,
#addrSheet .addr-inp textarea:focus {
  border-color: rgba(255, 216, 154, .88);
  box-shadow:
    0 0 0 3px rgba(230, 180, 90, .1),
    0 0 16px rgba(235, 180, 90, .12),
    inset 0 2px 10px rgba(0, 0, 0, .5);
}
#addrSheet .addr-inp .fc {
  position: absolute; width: 6px; height: 6px; pointer-events: none;
  background: linear-gradient(135deg, #FFF7E0, #E3B96D 55%, #8E6A2C);
  transform: rotate(45deg);
  box-shadow: 0 0 7px rgba(255, 206, 130, .55);
}
#addrSheet .addr-inp .fc:nth-of-type(1) { left: -3px; top: -3px; }
#addrSheet .addr-inp .fc:nth-of-type(2) { right: -3px; top: -3px; }
#addrSheet .addr-inp .fc:nth-of-type(3) { left: -3px; bottom: -3px; }
#addrSheet .addr-inp .fc:nth-of-type(4) { right: -3px; bottom: -3px; }

/* 默认地址开关 */
#addrSheet .addr-switch-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 20px; padding: 0 2px;
}
#addrSheet .sw-lb {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: .6px; color: #D8C298;
}
#addrSheet .sw-lb i {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #FFE9BC 0%, #D9AE62 45%, #9A7430 78%, #6E5018 100%);
  border: 1px solid rgba(255, 232, 176, .45);
  box-shadow: 0 0 10px rgba(240, 185, 95, .32), inset 0 1px 0 rgba(255, 250, 230, .5);
}
#addrSheet .addr-switch-row input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
#addrSheet .sw {
  position: relative; flex: 0 0 auto;
  width: 48px; height: 27px; border-radius: 999px;
  background: linear-gradient(180deg, #2A2419, #17140F);
  border: 1px solid rgba(224, 182, 110, .42);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .62);
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#addrSheet .sw::after {
  content: ''; position: absolute; top: 2.5px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #FFF9E8, #D7CBB2 58%, #A69A80);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .62);
  transition: transform .22s cubic-bezier(.22, .9, .3, 1), background .2s ease;
}
#addrSheet .addr-switch-row input:checked + .sw {
  background: linear-gradient(180deg, #FFE8B0 0%, #E5B968 42%, #C08F3F 100%);
  border-color: rgba(255, 232, 176, .82);
  box-shadow: 0 0 16px rgba(240, 185, 95, .45), inset 0 1px 0 rgba(255, 250, 230, .6);
}
#addrSheet .addr-switch-row input:checked + .sw::after {
  transform: translateX(21px);
  background: radial-gradient(circle at 40% 34%, #FFFFFF, #FFF4D6 55%, #EDD9AE);
}

/* 底部按钮 */
#addrSheet .mk-btns { gap: 12px; margin-top: 22px; }
#addrSheet .mk-btns button {
  height: 46px; border-radius: 999px;
  font-size: 15px; font-weight: 800; letter-spacing: 1.6px;
}
#addrSheet .mk-cancel {
  color: #E3C183;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .28));
  border: 1px solid rgba(224, 182, 110, .44);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .12);
}
#addrSheet .mk-ok {
  color: #3E2A0A;
  background: linear-gradient(180deg, #FFF3CF 0%, #F6DA9E 24%, #E2B566 55%, #C3923F 82%, #E7C078 100%);
  border: 1px solid rgba(255, 236, 186, .82);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .5),
    0 0 18px rgba(236, 180, 86, .3),
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -2px 6px rgba(120, 80, 20, .3);
  text-shadow: 0 1px 0 rgba(255, 250, 230, .45);
}

/* 地址弹层：遮罩加深 + 顶沿光晕（微调） */
#addrSheet .mk-mask {
  background:
    radial-gradient(120% 50% at 50% 96%, rgba(255, 186, 90, .07), rgba(0, 0, 0, 0) 70%),
    rgba(0, 0, 0, .86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
#addrSheet .mk-box.addr-box {
  box-shadow:
    0 -22px 50px rgba(0, 0, 0, .72),
    0 -2px 26px rgba(236, 180, 86, .18),
    0 0 0 1px rgba(255, 226, 166, .1);
}

/* =========================================================
   账号管理 · 黑金科技版（覆盖块 · 只追加不删除）
   ========================================================= */
#page-account.acct-page {
  background:
    radial-gradient(72% 26% at 50% 3%, rgba(255, 178, 74, .14), rgba(0, 0, 0, 0) 72%),
    #05060A url(../assets/acct-tech-bg.webp) center top / cover no-repeat;
}
.acct-page .subbar {
  height: 62px;
  background: linear-gradient(180deg, rgba(5, 6, 9, .94) 0%, rgba(5, 6, 9, .78) 52%, rgba(5, 6, 9, 0) 100%);
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.acct-page .subbar .back {
  width: 36px; height: 36px;
  color: #F2D393;
  background: radial-gradient(circle at 50% 32%, rgba(255, 214, 150, .16), rgba(255, 255, 255, .02) 78%);
  border: 1px solid rgba(235, 197, 126, .38);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .22), 0 4px 14px rgba(0, 0, 0, .5);
}
.acct-page .subbar .back:active { background: rgba(255, 214, 150, .22); }
.acct-page .subbar .back svg { width: 18px; height: 18px; }
.acct-page .subbar.center .subbar-txt { padding: 0 64px; }
.acct-page .subbar-txt h1 {
  font-size: 18px; letter-spacing: 1.4px; font-weight: 800;
  background: linear-gradient(180deg, #FFF8E6 0%, #F6DEA6 44%, #D9A957 78%, #B98A3C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(190, 130, 40, .32));
}
.acct-page .subbar-txt p {
  margin-top: 3px; font-size: 10.5px; letter-spacing: .8px; color: #9C8B6F;
}
.acct-page .sub-body { top: 62px; padding: 16px 9px 30px; }

/* ---------- 金框卡片 ---------- */
.acct-wrap { position: relative; }

/* 卡片上方金色光晕 */
.acct-wrap::before {
  content: ''; position: absolute; left: 6%; right: 6%; top: -30px; height: 74px;
  background: radial-gradient(58% 100% at 50% 82%, rgba(255, 203, 116, .5), rgba(255, 175, 70, .16) 52%, rgba(0, 0, 0, 0) 76%);
  filter: blur(9px);
  pointer-events: none;
}

.acct-frame {
  position: relative;
  padding: 1.5px;
  background: linear-gradient(150deg, #F7E7BC 0%, #9C7431 16%, #FFEFC9 36%, #8A6325 58%, #E8CB93 76%, #A57B36 100%);
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  box-shadow:
    0 -2px 22px rgba(255, 198, 104, .30),
    0 18px 42px rgba(0, 0, 0, .58),
    0 0 34px rgba(230, 175, 80, .12);
}
.acct-frame-in {
  position: relative;
  padding: 7px 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  background:
    radial-gradient(128% 68% at 50% 0%, rgba(255, 196, 110, .17), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, #241E15 0%, #191510 46%, #0F0D0B 100%);
  box-shadow: inset 0 0 0 1px rgba(233, 197, 126, .16);
}
/* 顶沿高光线 */
.acct-frame-in::after {
  content: ''; position: absolute; left: 16px; right: 16px; top: 1px; height: 1px;
  background: linear-gradient(90deg, rgba(255, 231, 176, 0), rgba(255, 231, 176, .85) 24%, rgba(255, 244, 208, 1) 50%, rgba(255, 231, 176, .85) 76%, rgba(255, 231, 176, 0));
  box-shadow: 0 0 8px rgba(255, 210, 130, .6);
  pointer-events: none;
}
/* 四角铆钉 */
.acct-frame-in::before {
  content: ''; position: absolute; inset: 6px; pointer-events: none; z-index: 2;
  background-repeat: no-repeat; background-size: 6px 6px;
  background-image:
    radial-gradient(circle, #FFF3D6 0 1.1px, #C69B55 1.2px 2.2px, rgba(90, 66, 26, .9) 2.3px 3px, transparent 3.1px),
    radial-gradient(circle, #FFF3D6 0 1.1px, #C69B55 1.2px 2.2px, rgba(90, 66, 26, .9) 2.3px 3px, transparent 3.1px),
    radial-gradient(circle, #FFF3D6 0 1.1px, #C69B55 1.2px 2.2px, rgba(90, 66, 26, .9) 2.3px 3px, transparent 3.1px),
    radial-gradient(circle, #FFF3D6 0 1.1px, #C69B55 1.2px 2.2px, rgba(90, 66, 26, .9) 2.3px 3px, transparent 3.1px);
  background-position: left 0 top 0, right 0 top 0, left 0 bottom 0, right 0 bottom 0;
}

/* 角括号 */
.acct-fc { position: absolute; width: 17px; height: 17px; pointer-events: none; z-index: 2; }
.acct-fc::before, .acct-fc::after { content: ''; position: absolute; }
.acct-fc::before {
  left: 0; top: 0; width: 100%; height: 1.5px;
  background: linear-gradient(90deg, #FFEDC2 0%, #D9A64E 58%, rgba(217, 166, 78, 0) 100%);
}
.acct-fc::after {
  left: 0; top: 0; width: 1.5px; height: 100%;
  background: linear-gradient(180deg, #FFEDC2 0%, #D9A64E 58%, rgba(217, 166, 78, 0) 100%);
}
.acct-fc.f1 { left: 7px; top: 7px; }
.acct-fc.f2 { right: 7px; top: 7px; transform: rotate(90deg); }
.acct-fc.f3 { right: 7px; bottom: 7px; transform: rotate(180deg); }
.acct-fc.f4 { left: 7px; bottom: 7px; transform: rotate(270deg); }

/* ---------- 数据行 ---------- */
.acct-row {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: 0 19px;
}
.acct-row + .acct-row::before {
  content: ''; position: absolute; left: 16px; right: 16px; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(233, 197, 126, .04), rgba(240, 205, 135, .62) 20%, rgba(255, 226, 162, .82) 50%, rgba(240, 205, 135, .62) 80%, rgba(233, 197, 126, .04));
  box-shadow: 0 0 6px rgba(240, 190, 100, .3);
}
.acct-row span {
  font-size: 12.5px; font-weight: 500; letter-spacing: .5px; color: #B7A98E;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.acct-row b {
  font-size: 13px; font-weight: 800; letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFF8E2 0%, #F6DEA6 46%, #DFAE58 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 6px rgba(255, 190, 90, .38));
}

/* =========================================================
   设置子页 · 黑金科技版（修改昵称 / 注销账号 / 用户协议）
   覆盖块 · 只追加不删除
   ========================================================= */

/* ---------- 共用：背景 + 顶栏 ---------- */
.tech-page {
  background:
    radial-gradient(74% 24% at 50% 2%, rgba(255, 178, 74, .16), rgba(0, 0, 0, 0) 70%),
    #05060A url(../assets/acct-tech-bg.webp) center top / cover no-repeat;
}
.tech-page .subbar {
  height: 62px;
  background: linear-gradient(180deg, rgba(5, 6, 9, .92) 0%, rgba(5, 6, 9, .62) 56%, rgba(5, 6, 9, 0) 100%);
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* 顶栏下沿金线 */
.tech-page .subbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: linear-gradient(90deg, rgba(255, 214, 140, 0), rgba(255, 214, 140, .72) 24%, rgba(255, 240, 200, .95) 50%, rgba(255, 214, 140, .72) 76%, rgba(255, 214, 140, 0));
  box-shadow: 0 0 10px rgba(255, 200, 110, .45);
  pointer-events: none;
}
.tech-page .subbar .back {
  width: 36px; height: 36px;
  color: #F2D393;
  background: radial-gradient(circle at 50% 32%, rgba(255, 214, 150, .16), rgba(255, 255, 255, .02) 78%);
  border: 1px solid rgba(235, 197, 126, .38);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .22), 0 4px 14px rgba(0, 0, 0, .5);
}
.tech-page .subbar .back:active { background: rgba(255, 214, 150, .22); }
.tech-page .subbar .back svg { width: 18px; height: 18px; }
.tech-page .subbar.center .subbar-txt { padding: 0 64px; }
.tech-page .subbar-txt h1 {
  font-size: 19px; letter-spacing: 1.6px; font-weight: 800;
  background: linear-gradient(180deg, #FFF8E6 0%, #F6DEA6 44%, #D9A957 78%, #B98A3C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(190, 130, 40, .32));
}
.tech-page .subbar-txt p {
  margin-top: 3px; font-size: 10.5px; letter-spacing: .8px; color: #9C8B6F;
}
.tech-page .sub-body { top: 62px; padding: 20px 16px calc(30px + env(safe-area-inset-bottom, 0px)); }

/* ---------- 金框输入卡 ---------- */
.tech-page .gold-field {
  margin-bottom: 0;
  padding: 11px 16px 12px;
  border-radius: 15px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, #17140F 0%, #0C0B0A 100%) padding-box,
    linear-gradient(150deg, #F7E7BC 0%, #9C7431 18%, #FFEFC9 38%, #8A6325 60%, #E8CB93 78%, #A57B36 100%) border-box;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .5),
    0 0 20px rgba(230, 175, 80, .08);
  transition: box-shadow .18s ease;
}
.tech-page .gold-field > span {
  margin-bottom: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .8px; color: #CDB487;
}
.tech-page .gold-field > span em {
  margin-left: 8px; font-size: 11px; font-weight: 500; letter-spacing: .6px; color: #8B7C62;
}
.tech-page .gold-field input {
  font-size: 19px; font-weight: 800; letter-spacing: .5px; color: #F7EBD3;
}
.tech-page .gold-field input::placeholder { color: #6E6350; font-weight: 600; font-size: 15px; }
.tech-page .gold-field:focus-within {
  background:
    linear-gradient(180deg, #1B1712 0%, #0D0C0B 100%) padding-box,
    linear-gradient(150deg, #FFE9BC 0%, #A87F38 18%, #FFF4D4 38%, #95702D 60%, #F1D9A4 78%, #B98F49 100%) border-box;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .5),
    0 0 0 3px rgba(230, 180, 90, .1),
    0 0 22px rgba(235, 180, 90, .16);
}

/* ---------- 金色主按钮（保存） ---------- */
.nick-page .btn-primary {
  margin-top: 20px;
  height: 50px;
  padding: 0;
  border-radius: 14px;
  font-size: 17px; font-weight: 800; letter-spacing: 3px;
  color: #3B2707;
  background: linear-gradient(180deg, #FFF6DA 0%, #F4D79A 20%, #E2B563 48%, #BF8C3D 76%, #E7C078 100%);
  border: 1px solid rgba(255, 236, 186, .8);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, .55),
    0 10px 30px rgba(216, 66, 38, .30),
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -3px 8px rgba(120, 80, 20, .30);
  text-shadow: 0 1px 0 rgba(255, 250, 230, .5);
}
.nick-page .btn-primary:active { transform: scale(.985); filter: brightness(1.05); }
.nick-page .agree {
  margin-top: 20px;
  font-size: 12px; letter-spacing: .3px; color: #8C8170;
}

/* ---------- 注销账号：红金警示面板 ---------- */
.del-page .sub-body { padding-top: 20px; }
.del-page .danger-box {
  position: relative;
  margin-bottom: 18px;
  padding: 19px 18px 20px;
  border-radius: 16px;
  border: 1.5px solid transparent;
  background:
    radial-gradient(120% 92% at 96% 100%, rgba(214, 56, 34, .26), rgba(0, 0, 0, 0) 58%) padding-box,
    radial-gradient(100% 70% at 50% 0%, rgba(255, 196, 110, .06), rgba(0, 0, 0, 0) 66%) padding-box,
    linear-gradient(180deg, #1A1510 0%, #0D0B0A 100%) padding-box,
    linear-gradient(150deg, #D9B87E 0%, #7A5B28 22%, #E9CF9C 44%, #6E5224 68%, #C7A467 100%) border-box;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, .55),
    0 0 26px rgba(200, 46, 30, .16);
}
/* 内衬细线 */
.del-page .danger-box::before {
  content: ''; position: absolute; inset: 5px; border-radius: 12px;
  border: 1px solid rgba(224, 186, 120, .16);
  pointer-events: none;
}
/* 四角铆钉 */
.del-page .danger-box::after {
  content: ''; position: absolute; inset: 8px; pointer-events: none;
  background-repeat: no-repeat; background-size: 5px 5px;
  background-image:
    radial-gradient(circle, #FFF3D6 0 1px, #C69B55 1.1px 2px, rgba(90, 66, 26, .9) 2.1px 2.7px, transparent 2.8px),
    radial-gradient(circle, #FFF3D6 0 1px, #C69B55 1.1px 2px, rgba(90, 66, 26, .9) 2.1px 2.7px, transparent 2.8px),
    radial-gradient(circle, #FFF3D6 0 1px, #C69B55 1.1px 2px, rgba(90, 66, 26, .9) 2.1px 2.7px, transparent 2.8px),
    radial-gradient(circle, #FFF3D6 0 1px, #C69B55 1.1px 2px, rgba(90, 66, 26, .9) 2.1px 2.7px, transparent 2.8px);
  background-position: left 0 top 0, right 0 top 0, left 0 bottom 0, right 0 bottom 0;
}
.del-page .danger-box h3 {
  position: relative; z-index: 1;
  margin-bottom: 12px;
  font-size: 17px; font-weight: 800; letter-spacing: 1.2px;
  background: linear-gradient(180deg, #FFE0B0 0%, #F9A66B 42%, #E4552F 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(200, 60, 30, .32));
}
.del-page .danger-box ul { padding-left: 0; list-style: none; }
.del-page .danger-box li {
  position: relative;
  padding-left: 17px;
  font-size: 13.5px; line-height: 2.05; letter-spacing: .2px; color: #C9BFAC;
  list-style: none;
}
.del-page .danger-box li::before {
  content: ''; position: absolute; left: 3px; top: 12px;
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFEBC2, #C79A52 70%);
  box-shadow: 0 0 6px rgba(255, 205, 130, .5);
}

/* ---------- 注销账号：红色确认按钮 ---------- */
.del-page .btn-danger-big {
  margin-top: 20px;
  height: 50px;
  border-radius: 14px;
  font-size: 17px; font-weight: 800; letter-spacing: 3px;
  color: #F1C893;
  background: linear-gradient(180deg, #8A2114 0%, #A92E1B 42%, #8C2113 74%, #6B160C 100%);
  border: 1.5px solid rgba(216, 152, 84, .62);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .55),
    0 0 24px rgba(208, 52, 30, .38),
    inset 0 1px 0 rgba(255, 222, 172, .25),
    inset 0 -3px 10px rgba(60, 8, 4, .5);
  text-shadow: 0 1px 8px rgba(255, 170, 110, .3);
}
.del-page .btn-danger-big:active { transform: scale(.985); filter: brightness(1.14); }
.del-page .btn-danger-big[disabled] {
  opacity: .55;
  box-shadow: inset 0 0 0 1px rgba(60, 20, 10, .4);
  cursor: not-allowed;
}

/* ---------- 用户协议：金框长面板 ---------- */
.doc-tech .sub-body { top: 62px; padding: 12px 11px 0; }
.doc-tech .text-body {
  position: relative;
  min-height: calc(100% - 16px);
  margin: 0;
  padding: 24px 20px 28px;
  border-radius: 18px;
  border: 1.5px solid transparent;
  background:
    radial-gradient(120% 34% at 50% 0%, rgba(255, 196, 110, .08), rgba(0, 0, 0, 0) 62%) padding-box,
    linear-gradient(180deg, #14110D 0%, #0C0B0A 58%, #090808 100%) padding-box,
    linear-gradient(160deg, #E7CD97 0%, #7E5F2B 16%, #F3DDAE 38%, #6F5223 62%, #D8B87D 82%, #8F6C31 100%) border-box;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .55),
    0 0 30px rgba(220, 170, 80, .10);
  font-size: 14.5px; line-height: 1.9; color: #D8CEBB;
}
.doc-tech .text-body::before {
  content: ''; position: absolute; inset: 7px; border-radius: 12px;
  border: 1px solid rgba(224, 186, 120, .16);
  pointer-events: none;
}
.doc-tech .text-body::after {
  content: ''; position: absolute; inset: 10px; pointer-events: none;
  background-repeat: no-repeat; background-size: 5px 5px;
  background-image:
    radial-gradient(circle, #FFF3D6 0 1px, #C69B55 1.1px 2px, rgba(90, 66, 26, .9) 2.1px 2.7px, transparent 2.8px),
    radial-gradient(circle, #FFF3D6 0 1px, #C69B55 1.1px 2px, rgba(90, 66, 26, .9) 2.1px 2.7px, transparent 2.8px),
    radial-gradient(circle, #FFF3D6 0 1px, #C69B55 1.1px 2px, rgba(90, 66, 26, .9) 2.1px 2.7px, transparent 2.8px),
    radial-gradient(circle, #FFF3D6 0 1px, #C69B55 1.1px 2px, rgba(90, 66, 26, .9) 2.1px 2.7px, transparent 2.8px);
  background-position: left 0 top 0, right 0 top 0, left 0 bottom 0, right 0 bottom 0;
}
.doc-tech .text-body > p {
  position: relative; z-index: 1;
  font-size: 14.5px; line-height: 1.95; letter-spacing: .2px; color: #E6DAC2;
}
.doc-tech .text-body .kv {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid transparent;
  font-size: 15px; letter-spacing: .4px;
}
.doc-tech .text-body .kv::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(240, 205, 135, .04), rgba(240, 205, 135, .5) 18%, rgba(255, 226, 162, .68) 50%, rgba(240, 205, 135, .5) 82%, rgba(240, 205, 135, .04));
  box-shadow: 0 0 6px rgba(240, 190, 100, .22);
}
.doc-tech .text-body .kv span { color: #B9AB90; font-weight: 500; }
.doc-tech .text-body .kv b {
  color: #F7EBD2; font-weight: 800;
  text-shadow: 0 1px 8px rgba(255, 190, 90, .28);
}
.doc-tech .text-body .kv:last-of-type::after {
  background: linear-gradient(90deg, rgba(240, 205, 135, .04), rgba(240, 205, 135, .5) 18%, rgba(255, 226, 162, .68) 50%, rgba(240, 205, 135, .5) 82%, rgba(240, 205, 135, .04));
}
.doc-tech .text-body .lv-tip {
  position: relative; z-index: 1;
  margin-top: 22px !important;
  font-size: 13.5px; line-height: 1.9; color: #A6987F;
}

/* ---------- 微调：注销页排版与按钮光晕 ---------- */
.del-page .gold-field > span { color: #D9CFC0; font-weight: 600; }
.del-page .gold-field input::placeholder { color: #8A7F6E; }
.del-page .danger-box li {
  font-size: 14px; line-height: 1.95; color: #D2C8B6;
  margin-top: 6px;
}
.del-page .danger-box li:first-child { margin-top: 0; }
.del-page .danger-box li::before { top: 11px; }
.del-page .btn-danger-big {
  position: relative;
  color: #E8B985;
  background: linear-gradient(180deg, #93261A 0%, #B23320 38%, #922516 72%, #711A0E 100%);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, .58),
    0 6px 26px rgba(214, 58, 32, .42),
    inset 0 1px 0 rgba(255, 226, 180, .3),
    inset 0 -4px 12px rgba(58, 8, 4, .55);
}
/* 按钮下方红色辉光 */
.del-page .btn-danger-big::after {
  content: ''; position: absolute; left: 8%; right: 8%; bottom: -18px; height: 34px;
  background: radial-gradient(52% 100% at 50% 0%, rgba(255, 92, 52, .38), rgba(0, 0, 0, 0) 74%);
  filter: blur(6px);
  pointer-events: none;
}

/* 未输入确认词时：保持红色质感，仅压暗高光（与设计图一致，不做半透明） */
.del-page .btn-danger-big[disabled] {
  opacity: 1;
  color: #C99A6C;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .55),
    0 0 18px rgba(208, 52, 30, .26),
    inset 0 1px 0 rgba(255, 222, 172, .18),
    inset 0 -3px 10px rgba(60, 8, 4, .5);
  cursor: not-allowed;
}
.del-page .btn-danger-big[disabled]::after { opacity: .45; }

/* 我的卡包 · 分组合并 + 顶部筛选（cp-group） */
#page-cardpack .cp-sum-cell {
  position: relative; flex: 1; text-align: center; cursor: pointer;
  padding: 2px 0 4px; border-radius: 10px;
  transition: background .18s, transform .12s;
}
#page-cardpack .cp-sum-cell.on {
  background: linear-gradient(180deg, rgba(255, 214, 140, .16), rgba(255, 214, 140, .05));
  box-shadow: 0 0 0 1px rgba(240, 200, 130, .28) inset;
}
#page-cardpack .cp-sum-cell.on b { color: #ffcf7d; text-shadow: 0 0 10px rgba(255, 196, 110, .35); }
#page-cardpack .cp-sum-cell.on span { color: #cfae78; }
#page-cardpack .cp-sum-cell:active { transform: scale(.96); }
#page-cardpack .cp-item.cp-group { padding-bottom: 12px; }
#page-cardpack .cp-ids { font-style: normal; font-weight: 500; font-size: 10.5px; color: #9a8f79; margin-left: 2px; }
#page-cardpack .cp-item-actions { gap: 8px; align-items: center; }
#page-cardpack .cp-more {
  height: 28px; padding: 0 12px; border-radius: 14px;
  font-size: 11.5px; font-weight: 700; color: #d8c29a;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(235, 199, 128, .28);
}
#page-cardpack .cp-more:active { transform: scale(.95); }
#page-cardpack .cp-locktip { font-size: 11px; color: #C9A86A; }
#page-cardpack .cp-group-items {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed rgba(235, 199, 128, .2);
}
#page-cardpack .cp-group-items .cp-item { padding: 11px 12px; border-radius: 12px; }

/* 小熊卡页 · 胶囊可点 + 卡片合并（cd3-group） */
#page-card .cd3-pill { cursor: pointer; }
#page-card .cd3-pill:active { transform: scale(.96); }
#page-card .cd3-meta span[data-cd-meta] { cursor: pointer; }

/* 卡片详情 · 合并分组 */
#page-card .cd3-group { padding-bottom: 12px; }
#page-card .cd3-ids { font-style: normal; font-weight: 500; font-size: 10px; color: #A08F70; margin-left: 2px; }
#page-card .cd3-item-foot { gap: 8px; }
#page-card .cd3-more {
  height: 26px; padding: 0 12px; border-radius: 13px;
  font-size: 11px; font-weight: 700; color: #D8C29A;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(235, 199, 128, .3);
}
#page-card .cd3-more.sm { height: 22px; padding: 0 10px; font-size: 10.5px; }
#page-card .cd3-more:active { transform: scale(.95); }
#page-card .cd3-group-items {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed rgba(235, 199, 128, .2);
}
#page-card .cd3-group-items .cd3-item { padding: 10px 11px; border-radius: 12px; }

/* =========================================================
   我的卡包 · 黑金科技版（覆盖块 · 只追加不删除）
   ========================================================= */
#page-cardpack.cardpack-page {
  background:
    radial-gradient(70% 18% at 42% 0%, rgba(255, 178, 74, .16), rgba(0, 0, 0, 0) 72%),
    #05060A url(../assets/cp-tech-bg.webp) center top / cover no-repeat;
}
#page-cardpack .subbar-txt h1 { font-size: 20px; letter-spacing: 1.8px; }
#page-cardpack .subbar-txt p { margin-top: 4px; font-size: 12px; letter-spacing: 1.2px; color: #A2917A; }

/* ---------- 顶部统计：金框切角面板 ---------- */
#page-cardpack .cp-sum {
  padding: 16px 8px 14px;
  border-radius: 0;
  border: 1.5px solid transparent;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 196, 110, .14), rgba(0, 0, 0, 0) 68%) padding-box,
    linear-gradient(180deg, #1D1812 0%, #121110 58%, #0C0C0C 100%) padding-box,
    linear-gradient(150deg, #F7E7BC 0%, #9C7431 18%, #FFEFC9 38%, #8A6325 60%, #E8CB93 80%, #A57B36 100%) border-box;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .5);
}
#page-cardpack .cp-sum-cell { padding: 4px 0 2px; border-radius: 0; transition: transform .12s; }
#page-cardpack .cp-sum-cell.on { background: none; box-shadow: none; }
#page-cardpack .cp-sum-cell + .cp-sum-cell::before {
  width: 1px; height: 44px;
  background: linear-gradient(180deg, rgba(240, 205, 135, 0), rgba(240, 205, 135, .55) 22%, rgba(255, 226, 162, .7) 50%, rgba(240, 205, 135, .55) 78%, rgba(240, 205, 135, 0));
  box-shadow: 0 0 8px rgba(240, 190, 100, .3);
}
/* 分隔线中点的小菱形节点 */
#page-cardpack .cp-sum-cell + .cp-sum-cell::after {
  content: ''; position: absolute; left: -4px; top: 50%;
  width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #17130F 0 34%, #E3BE7C 40%, #A4762F 72%, #F3DDAE 100%);
  box-shadow: 0 0 9px rgba(255, 206, 130, .6);
}
#page-cardpack .cp-sum-cell b {
  font-size: 27px; font-weight: 800; letter-spacing: .5px;
  background: linear-gradient(180deg, #FFF8E6 0%, #F6DEA6 48%, #DCA855 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(255, 190, 90, .3));
}
#page-cardpack .cp-sum-cell.on b { color: #FFE0A6; }
#page-cardpack .cp-sum-cell span {
  margin-top: 5px; font-size: 12.5px; letter-spacing: .8px; color: #C9B89A;
}
#page-cardpack .cp-sum-cell.on span { color: #E4D2B2; }

/* ---------- 小节标题 ---------- */
#page-cardpack .cp-sec-head { margin: 22px 2px 12px; }
#page-cardpack .cp-sec-head h3 {
  font-size: 17px; font-weight: 800; letter-spacing: 1px;
  background: linear-gradient(180deg, #FFF8E6 0%, #F6DEA6 46%, #D9A957 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(190, 130, 40, .28));
}
#page-cardpack .cp-sec-head span { font-size: 13px; letter-spacing: .6px; color: #A99A80; }

/* ---------- 卡片：金框切角 + 顶部凹槽 + 中央六角徽记 ---------- */
#page-cardpack .cp-list { gap: 16px; }
#page-cardpack .cp-item {
  position: relative;
  padding: 18px 16px 13px;
  border-radius: 0;
  border: 1.5px solid transparent;
  background:
    radial-gradient(circle, #FFF3D6 0 1px, #C69B55 1.1px 2.1px, rgba(90, 66, 26, .9) 2.2px 2.9px, transparent 3px) left 10px top 10px / 6px 6px no-repeat padding-box,
    radial-gradient(circle, #FFF3D6 0 1px, #C69B55 1.1px 2.1px, rgba(90, 66, 26, .9) 2.2px 2.9px, transparent 3px) right 10px top 10px / 6px 6px no-repeat padding-box,
    radial-gradient(circle, #FFF3D6 0 1px, #C69B55 1.1px 2.1px, rgba(90, 66, 26, .9) 2.2px 2.9px, transparent 3px) left 10px bottom 10px / 6px 6px no-repeat padding-box,
    radial-gradient(circle, #FFF3D6 0 1px, #C69B55 1.1px 2.1px, rgba(90, 66, 26, .9) 2.2px 2.9px, transparent 3px) right 10px bottom 10px / 6px 6px no-repeat padding-box,
    radial-gradient(110% 60% at 50% 0%, rgba(255, 196, 110, .10), rgba(0, 0, 0, 0) 66%) padding-box,
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .014) 0 1px, rgba(0, 0, 0, 0) 1px 9px) padding-box,
    linear-gradient(180deg, #1C1813 0%, #131110 58%, #0C0C0C 100%) padding-box,
    linear-gradient(150deg, #F7E7BC 0%, #9C7431 16%, #FFEFC9 36%, #8A6325 58%, #E8CB93 78%, #A57B36 100%) border-box;
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, .55),
    inset 0 0 0 3px rgba(233, 197, 126, .10);
}
#page-cardpack .cp-item.cp-wait {
  background:
    radial-gradient(circle, #FFF3D6 0 1px, #C69B55 1.1px 2.1px, rgba(90, 66, 26, .9) 2.2px 2.9px, transparent 3px) left 10px top 10px / 6px 6px no-repeat padding-box,
    radial-gradient(circle, #FFF3D6 0 1px, #C69B55 1.1px 2.1px, rgba(90, 66, 26, .9) 2.2px 2.9px, transparent 3px) right 10px top 10px / 6px 6px no-repeat padding-box,
    radial-gradient(circle, #FFF3D6 0 1px, #C69B55 1.1px 2.1px, rgba(90, 66, 26, .9) 2.2px 2.9px, transparent 3px) left 10px bottom 10px / 6px 6px no-repeat padding-box,
    radial-gradient(circle, #FFF3D6 0 1px, #C69B55 1.1px 2.1px, rgba(90, 66, 26, .9) 2.2px 2.9px, transparent 3px) right 10px bottom 10px / 6px 6px no-repeat padding-box,
    radial-gradient(110% 60% at 50% 0%, rgba(255, 196, 110, .18), rgba(0, 0, 0, 0) 68%) padding-box,
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .014) 0 1px, rgba(0, 0, 0, 0) 1px 9px) padding-box,
    linear-gradient(180deg, #241D14 0%, #161210 58%, #0D0C0B 100%) padding-box,
    linear-gradient(150deg, #FFEFC9 0%, #A57B36 16%, #FFF6DC 36%, #98702C 58%, #F1D9A4 78%, #B98F49 100%) border-box;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .55),
    0 0 24px rgba(230, 175, 80, .14),
    inset 0 0 0 3px rgba(233, 197, 126, .12);
}
/* 顶沿中央凹槽 */
#page-cardpack .cp-item::before {
  content: ''; position: absolute; left: 50%; top: 0;
  width: 42%; height: 9px; transform: translate(-50%, -58%);
  background: linear-gradient(180deg, #2B2418 0%, #17130F 100%);
  border: 1px solid rgba(233, 197, 126, .55);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 236, 190, .18);
  pointer-events: none;
}
/* 中央六角徽记（SVG 描边：切角边缘不会被 clip-path 吃掉） */
#page-cardpack .cp-item::after {
  content: ''; position: absolute; left: 50%; top: 72%; transform: translate(-50%, -50%);
  width: 30px; height: 34px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 34'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFF6E0'/%3E%3Cstop offset='.42' stop-color='%23E3BE7C'/%3E%3Cstop offset='.72' stop-color='%23A4762F'/%3E%3Cstop offset='1' stop-color='%23DDB97A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='15,1.6 28.2,9 28.2,24 15,31.4 1.8,24 1.8,9' fill='%2313100D' stroke='url(%23g)' stroke-width='2'/%3E%3Cpolygon points='15,7 22.6,11.4 22.6,21.6 15,26 7.4,21.6 7.4,11.4' fill='none' stroke='%23C79A52' stroke-width='1' opacity='.55'/%3E%3Ccircle cx='15' cy='16.5' r='2' fill='%23E8C079' opacity='.8'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(240, 190, 100, .35));
  pointer-events: none;
}
#page-cardpack .cp-item-top b {
  font-size: 16px; font-weight: 800; letter-spacing: .3px;
  background: linear-gradient(180deg, #FFF8E6 0%, #F6DEA6 52%, #DFAE58 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 6px rgba(255, 190, 90, .3));
}
#page-cardpack .cp-tag {
  padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; letter-spacing: .5px; color: #E6C79A;
  background: linear-gradient(180deg, rgba(96, 34, 22, .92), rgba(56, 18, 12, .96));
  border: 1px solid rgba(232, 190, 126, .55);
  box-shadow: inset 0 1px 0 rgba(255, 226, 180, .18), 0 2px 8px rgba(0, 0, 0, .4);
}
#page-cardpack .cp-tag-wait {
  color: #FFE0A8;
  background: linear-gradient(180deg, rgba(120, 82, 26, .9), rgba(66, 44, 14, .96));
  border-color: rgba(255, 216, 150, .6);
}
#page-cardpack .cp-tag-done {
  color: #9FD98C;
  background: linear-gradient(180deg, rgba(30, 62, 30, .85), rgba(16, 36, 16, .95));
  border-color: rgba(140, 200, 120, .45);
}
/* 进度条：暗槽 + 金色填充 + 左端红点 */
#page-cardpack .cp-prog {
  position: relative;
  margin-top: 14px; height: 7px; border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .70), rgba(0, 0, 0, .46)),
    linear-gradient(90deg, rgba(255, 214, 148, .30) 0%, rgba(255, 214, 148, .16) 62%, rgba(255, 214, 148, .26) 100%);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, .8),
    inset 0 0 0 1px rgba(233, 197, 126, .22),
    0 0 0 1px rgba(233, 197, 126, .10);
}
#page-cardpack .cp-prog::before {
  content: ''; position: absolute; left: -5px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFB9A0, #E23F1E 58%, #94190A 100%);
  box-shadow: 0 0 9px rgba(255, 90, 46, .75);
  z-index: 2;
}
#page-cardpack .cp-prog i {
  border-radius: 4px;
  background: linear-gradient(90deg, #B8402A 0%, #E9C177 22%, #F6DDA6 60%, #D9A64F 100%);
  box-shadow: 0 0 10px rgba(240, 190, 100, .35);
}
#page-cardpack .cp-item-meta {
  margin-top: 12px; font-size: 13px; letter-spacing: .3px; color: #C4B69C;
}
#page-cardpack .cp-item-meta b {
  font-size: 15px; font-weight: 800;
  background: linear-gradient(180deg, #FFF8E6 0%, #F6DEA6 50%, #DFAE58 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 6px rgba(255, 190, 90, .3));
}
#page-cardpack .cp-item-meta + .cp-item-meta { margin-top: 30px; }
#page-cardpack .cp-from { margin-top: 8px; font-size: 12.5px; color: #D6AE72; }
#page-cardpack .cp-wait-tip { margin-top: 10px; font-size: 12.5px; color: #BCAE95; }
#page-cardpack .cp-item-actions { margin-top: 12px; }
#page-cardpack .cp-mini-use {
  height: 34px; padding: 0 20px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: 1px;
  color: #3B2707;
  background: linear-gradient(180deg, #FFF3CF 0%, #F5D89B 24%, #E0B263 56%, #C08F3F 82%, #E4BC74 100%);
  border: 1px solid rgba(255, 236, 186, .8);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .7);
}
#page-cardpack .cp-more {
  height: 32px; padding: 0 15px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: #EBD5AC;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .3));
  border: 1px solid rgba(224, 182, 110, .42);
}
#page-cardpack .cp-locktip { color: #D6AE72; font-size: 12.5px; }
#page-cardpack .cp-ids { color: #A99A80; font-size: 11.5px; }

/* ---------- 双按钮：金色 / 暗底红金边 ---------- */
#page-cardpack .cp-actions { gap: 12px; margin-top: 20px; }
#page-cardpack .cp-act {
  height: 52px; border-radius: 999px;
  font-size: 17px; font-weight: 800; letter-spacing: 2px;
}
#page-cardpack .cp-act-gift {
  color: #3B2707;
  background: linear-gradient(180deg, #FFF6DA 0%, #F4D79A 20%, #E2B563 48%, #BF8C3D 76%, #E7C078 100%);
  border: 1.5px solid rgba(255, 236, 186, .82);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, .5),
    0 0 22px rgba(236, 180, 86, .26),
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -3px 8px rgba(120, 80, 20, .3);
  text-shadow: 0 1px 0 rgba(255, 250, 230, .5);
}
#page-cardpack .cp-act-use {
  color: #F3D8A6;
  background:
    radial-gradient(120% 140% at 50% 120%, rgba(196, 46, 26, .45), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #1E1A14 0%, #100E0C 100%);
  border: 1.5px solid rgba(226, 156, 96, .62);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, .55),
    0 0 22px rgba(206, 52, 30, .3),
    inset 0 1px 0 rgba(255, 222, 172, .16);
  text-shadow: 0 1px 8px rgba(255, 170, 110, .28);
}
#page-cardpack .cp-act[disabled] { opacity: .55; }

/* ---------- 赠送记录：分段胶囊 tab ---------- */
#page-cardpack .cp-tabs {
  gap: 4px; padding: 4px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(0, 0, 0, .32));
  border: 1px solid rgba(224, 182, 110, .28);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .5);
}
#page-cardpack .cp-tabs button {
  height: 38px; border-radius: 999px;
  font-size: 14.5px; font-weight: 800; letter-spacing: 1px; color: #A99A80;
}
#page-cardpack .cp-tabs button.on {
  color: #3B2707;
  background: linear-gradient(180deg, #FFF3CF 0%, #F5D89B 26%, #E0B263 58%, #C08F3F 84%, #E4BC74 100%);
  border: 1px solid rgba(255, 236, 186, .7);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
}
#page-cardpack .cp-empty {
  padding: 30px 12px; border-radius: 16px;
  font-size: 14.5px; letter-spacing: .8px; color: #C7B79A;
  border: 1px dashed rgba(214, 178, 112, .34);
  background:
    radial-gradient(90% 74% at 50% 0%, rgba(255, 196, 110, .05), rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .016), rgba(0, 0, 0, .22));
}
#page-cardpack .cp-empty span { color: #8E8270; }
#page-cardpack .cp-gitem {
  padding: 14px 15px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  border: 1px solid rgba(235, 199, 128, .2);
}
#page-cardpack .cp-gitem-main b { color: #F1E3C6; font-size: 13.5px; }
#page-cardpack .cp-gitem-main span { color: #A2947B; }
#page-cardpack .cp-gitem time { color: #8B7F6B; }
#page-cardpack .cp-group-items { border-top-color: rgba(235, 199, 128, .24); }

/* =========================================================
   我的页 v3（2026-11-09）：设计图整幅抠图 + 热区
   assets/mine/v3/duo.webp  (940×324，帧区 14..918 / 47..313)
   assets/mine/v3/func.webp (928×584，帧区 12..916)
   ========================================================= */
.mine-page .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- 双卡：整幅图 + 左右热区 ---- */
.mine-page .mine-duo3 {
  position: relative;
  margin: 0;
  background: #0A0D10;
}
.mine-page .duo3-art {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
/* 与页面底色过渡（抠图背景比页面略亮） */
.mine-page .mine-duo3::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 26px;
  background: linear-gradient(180deg, #0A0D10 0%, rgba(10, 13, 16, .72) 34%, rgba(10, 13, 16, 0) 100%);
  pointer-events: none; z-index: 1;
}
.mine-page .duo3-hot {
  position: absolute;
  background: none; border: 0; padding: 0;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}
.mine-page .duo3-hot:active { box-shadow: inset 0 0 0 2px rgba(255, 220, 150, .35); }
.mine-page .duo3-hot-l { left: 3.13%; top: 14.86%; width: 45.83%; height: 77.14%; }
.mine-page .duo3-hot-r { left: 51.46%; top: 14.86%; width: 45.83%; height: 77.14%; }

/* ---- 常用功能：整幅图 + 8 热区 ---- */
.mine-page .func3 {
  position: relative;
  margin: 0;
  background: #0A0D10;
}
.mine-page .func3-art {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.mine-page .func3-hot {
  position: absolute;
  background: none; border: 0; padding: 0;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.mine-page .func3-hot:active { box-shadow: 0 0 0 2px rgba(255, 220, 150, .30) inset; }
.mine-page .f3-1 { left: 10.00%; top: 19.93%; width: 15.83%; height: 33.01%; }
.mine-page .f3-2 { left: 31.67%; top: 19.93%; width: 16.04%; height: 33.01%; }
.mine-page .f3-3 { left: 53.33%; top: 19.93%; width: 16.25%; height: 33.01%; }
.mine-page .f3-4 { left: 75.00%; top: 19.93%; width: 16.04%; height: 33.01%; }
.mine-page .f3-5 { left: 10.00%; top: 56.05%; width: 15.83%; height: 33.17%; }
.mine-page .f3-6 { left: 31.67%; top: 56.05%; width: 16.04%; height: 33.17%; }
.mine-page .f3-7 { left: 53.33%; top: 56.05%; width: 16.25%; height: 33.17%; }
.mine-page .f3-8 { left: 75.00%; top: 56.05%; width: 16.04%; height: 33.17%; }


/* =========================================================
   我的卡包 · 设计稿还原 v2（素材来自 蓝熊输的 (89).png）
   —— 框体/按钮/胶囊用真素材，进度条与空态用 CSS
   ========================================================= */
#page-cardpack.cardpack-page {
  background-color: #050505;
  background-image:
    url(../assets/cardpack/cp-rail-l.webp),
    url(../assets/cardpack/cp-rail-r.webp),
    radial-gradient(56% 9% at 50% 0%, rgba(255, 178, 88, .34), rgba(255, 150, 60, .10) 46%, rgba(0, 0, 0, 0) 78%),
    linear-gradient(180deg, #12100D 0%, #151310 12%, #141210 26%, #121110 40%,
      #0E0D0B 54%, #0B0B09 68%, #090907 78%, #060606 90%, #020202 100%);
  background-position: left top, right top, center top, center top;
  /* 素材 44x1733(2x) → CSS 22x866.5；固定尺寸，避免侧轨装饰被纵向拉伸变形 */
  background-size: 22px 866.5px, 22px 866.5px, 100% 190px, 100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
#page-cardpack .sub-body { padding: 6px 16px 30px; }
#page-cardpack .subbar-txt h1 { font-size: 21px; letter-spacing: 2px; }
#page-cardpack .subbar-txt p { margin-top: 4px; font-size: 12.5px; letter-spacing: 1.4px; color: #A8967C; }

/* ---------- 顶部统计面板：真素材四边 ---------- */
#page-cardpack .cp-sum {
  margin-top: 4px;
  padding: 17px 2px 15px;
  border: 0; border-radius: 0; clip-path: none;
  background-color: transparent;
  background-image:
    url(../assets/cardpack/cp-panel-top.webp),
    url(../assets/cardpack/cp-panel-bottom.webp),
    url(../assets/cardpack/cp-panel-side.webp),
    url(../assets/cardpack/cp-panel-side-r.webp),
    linear-gradient(180deg, #241E15 0%, #1B1611 42%, #14110D 100%);
  background-position: left top, left bottom, left top, right top, center;
  background-size: 100% 22px, 100% 21px, 10px 19px, 10px 19px, auto;
  background-repeat: no-repeat, no-repeat, repeat-y, repeat-y, no-repeat;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .55);
}
#page-cardpack .cp-sum-cell { padding: 0 0 1px; }
#page-cardpack .cp-sum-cell.on { background: none; box-shadow: none; }
#page-cardpack .cp-sum-cell + .cp-sum-cell::before {
  top: 8%; height: 44%; width: 1px;
  background: linear-gradient(180deg, rgba(255, 226, 162, 0) 0%, rgba(255, 226, 162, .55) 45%, rgba(255, 226, 162, 0) 100%);
  box-shadow: 0 0 6px rgba(240, 190, 100, .3);
}
#page-cardpack .cp-sum-cell + .cp-sum-cell::after {
  top: 52%; left: -3.5px;
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #0E0C09 0 30%, #F7E3B6 36%, #C08F3F 74%, #6E5224 100%);
  box-shadow: 0 0 9px rgba(255, 206, 130, .55);
}
#page-cardpack .cp-sum-cell b {
  font-size: 33px; font-weight: 800; line-height: 1.04; letter-spacing: .5px;
  background: linear-gradient(180deg, #FFF9E9 0%, #F7E0AA 46%, #D49E48 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 7px rgba(255, 180, 70, .45));
}
#page-cardpack .cp-sum-cell span {
  margin-top: 8px; font-size: 14px; letter-spacing: 1.2px; color: #BFAE92;
}

/* ---------- 小节标题 ---------- */
#page-cardpack .cp-sec-head { margin: 24px 2px 12px; align-items: baseline; }
#page-cardpack .cp-sec-head h3 {
  font-size: 23px; font-weight: 800; letter-spacing: 1.8px;
  background: linear-gradient(180deg, #FFF8E6 0%, #F6DEA6 44%, #D49E48 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(190, 130, 40, .4));
}
#page-cardpack .cp-sec-head span { font-size: 15px; letter-spacing: .9px; color: #B6A489; }
#page-cardpack .cp-sec-head h3::after,
#page-cardpack .cp-sec-head:has(+ .cp-tabs) h3::after {
  content: none; display: none; background: none; box-shadow: none;
}

/* ---------- 卡片：真素材顶/底/侧 + 中央铭牌 + 六角 ---------- */
#page-cardpack .cp-list { gap: 15px; }
#page-cardpack .cp-item,
#page-cardpack .cp-item.cp-wait {
  position: relative;
  padding: 24px 16px 15px;
  border: 0; border-radius: 0; clip-path: none;
  background-color: transparent;
  background-image:
    url(../assets/cardpack/cp-card-top.webp),
    url(../assets/cardpack/cp-card-bottom.webp),
    url(../assets/cardpack/cp-card-side.webp),
    url(../assets/cardpack/cp-card-side-r.webp),
    linear-gradient(180deg, #1F1B15 0%, #161410 44%, #100F0D 100%);
  background-position: left top, left bottom, left top, right top, center;
  background-size: 100% 20.5px, 100% 23.5px, 10.5px 19px, 10.5px 19px, auto;
  background-repeat: no-repeat, no-repeat, repeat-y, repeat-y, no-repeat;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .6);
}
#page-cardpack .cp-item.cp-wait { box-shadow: 0 14px 34px rgba(0, 0, 0, .62), 0 0 22px rgba(230, 175, 80, .10); }
/* 顶沿凹槽：设计稿已烘进顶带素材，旧块的 ::before 关掉 */
#page-cardpack .cp-item::before { content: none; display: none; background: none; }

/* 中央六角徽记 */
#page-cardpack .cp-item::after {
  content: ''; position: absolute; left: 50%; top: 68%;
  width: 38.5px; height: 38.5px; transform: translate(-50%, -50%);
  background: url(../assets/cardpack/cp-hex.webp) center / contain no-repeat;
  pointer-events: none;
}
#page-cardpack .cp-item:has(.cp-wait-tip)::after { display: none; }
/* 展开后的子卡：简化框体 */
#page-cardpack .cp-group-items .cp-item,
#page-cardpack .cp-group-items .cp-item.cp-wait {
  padding: 15px 14px 14px;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .014)),
    linear-gradient(180deg, #17140F, #100F0D);
  background-size: auto, auto;
  background-repeat: no-repeat, no-repeat;
  border: 1px solid rgba(210, 172, 108, .32);
  border-radius: 12px;
  box-shadow: none;
}
#page-cardpack .cp-group-items .cp-item::before,
#page-cardpack .cp-group-items .cp-item::after { display: none; }

/* 卡片文字 */
#page-cardpack .cp-item-top b {
  font-size: 21px; font-weight: 800; letter-spacing: .3px;
  background: linear-gradient(180deg, #FFF9EA 0%, #F6DEA6 50%, #DEAC56 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 6px rgba(255, 190, 90, .35));
}
#page-cardpack .cp-ids { color: #C4A778; font-size: 14px; }
#page-cardpack .cp-item-meta { margin-top: 13px; font-size: 16px; color: #CBBFA8; letter-spacing: .2px; }
#page-cardpack .cp-item-meta + .cp-item-meta { margin-top: 30px; }
#page-cardpack .cp-item-meta b {
  font-size: 20px; font-weight: 800;
  background: linear-gradient(180deg, #FFFEFA 0%, #FFF1D2 50%, #E9C98C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 6px rgba(255, 200, 120, .4));
}
#page-cardpack .cp-from { margin-top: 9px; font-size: 14px; color: #D2AB74; }
#page-cardpack .cp-wait-tip { margin-top: 13px; font-size: 16px; color: #C7B79C; }

/* ---------- 状态胶囊：真素材三段 ---------- */
#page-cardpack .cp-tag {
  height: 27px; line-height: 27px; padding: 0 15px;
  border: 0; border-radius: 0;
  font-size: 14.5px; font-weight: 700; letter-spacing: .7px; color: #F8E2B8;
  background-color: transparent;
  background-image:
    url(../assets/cardpack/cp-tag-gold-l.webp),
    url(../assets/cardpack/cp-tag-gold-r.webp),
    url(../assets/cardpack/cp-tag-gold-m.webp),
    linear-gradient(180deg, #6E5224 0%, #3A2A12 100%);
  background-position: left top, right top, 13px top, center;
  background-size: 13.8px 27px, 13.8px 27px, 6.4px 27px, auto;
  background-repeat: no-repeat, no-repeat, repeat-x, no-repeat;
  box-shadow: none;
  text-shadow: 0 1px 4px rgba(255, 190, 90, .5);
}
/* 运行中 → 暗红胶囊（:not 排除待使用/已结束） */
#page-cardpack .cp-tag:not(.cp-tag-wait):not(.cp-tag-done) {
  color: #FFD9AE;
  background-image:
    url(../assets/cardpack/cp-tag-red-l.webp),
    url(../assets/cardpack/cp-tag-red-r.webp),
    url(../assets/cardpack/cp-tag-red-m.webp),
    linear-gradient(180deg, #6B1A0C 0%, #3A1109 100%);
  background-position: left top, right top, 12.5px top, center;
  background-size: 13.2px 26.5px, 13.2px 26.5px, 6.4px 26.5px, auto;
  text-shadow: 0 1px 4px rgba(255, 140, 80, .55);
}
#page-cardpack .cp-tag-done {
  color: #B9E39F;
  background-image: linear-gradient(180deg, rgba(38, 66, 34, .92), rgba(18, 34, 16, .96));
  border: 1px solid rgba(140, 200, 120, .5);
  border-radius: 999px;
}

/* ---------- 进度条：CSS 重建（素材文字无法干净抹除） ---------- */
#page-cardpack .cp-prog {
  position: relative;
  margin-top: 14px; height: 12px; border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 226, 170, .55) 0 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(0deg, rgba(255, 226, 170, .42) 0 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(180deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .52));
  box-shadow:
    inset 0 0 0 1px rgba(233, 197, 126, .16),
    0 0 10px rgba(0, 0, 0, .6);
}
#page-cardpack .cp-prog::before {
  content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 42% 34%, #FFFFFF 0 14%, #FFCE9E 38%, #F0521F 70%, #8C1505 100%);
  box-shadow: 0 0 11px rgba(255, 96, 48, .9);
  z-index: 2;
}
#page-cardpack .cp-prog i {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, rgba(220, 84, 40, .95) 0%, #D9AE6A 18%, #F9E9C6 56%, #C69445 100%);
  box-shadow: 0 0 10px rgba(240, 190, 100, .5);
}

/* ---------- 「展开 N 张」：CSS 金边胶囊 ---------- */
#page-cardpack .cp-more {
  height: 37px; padding: 0 18px; border-radius: 999px;
  font-size: 14px; font-weight: 800; letter-spacing: 1px; color: #F6E1B8;
  background:
    radial-gradient(120% 160% at 50% 120%, rgba(196, 60, 26, .34), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #1E1A14 0%, #12100D 100%);
  border: 1.5px solid rgba(226, 186, 118, .62);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 236, 190, .16);
  text-shadow: 0 1px 5px rgba(255, 200, 120, .4);
}
#page-cardpack .cp-more:active { transform: scale(.96); filter: brightness(1.1); }
#page-cardpack .cp-locktip { color: #D6AE72; font-size: 13px; }
#page-cardpack .cp-item-actions { margin-top: 8px; gap: 10px; }

/* ---------- 双按钮：真素材 ---------- */
#page-cardpack .cp-actions { gap: 15px; margin-top: 22px; }
#page-cardpack .cp-act {
  height: 54.5px; border: 0; border-radius: 999px;
  font-size: 21px; font-weight: 800; letter-spacing: 3.5px;
}
#page-cardpack .cp-act-gift {
  color: #3A2A0C;
  background: url(../assets/cardpack/cp-btn-gold.webp) center / 100% 100% no-repeat;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .5), 0 0 26px rgba(236, 180, 86, .32);
  text-shadow: 0 1px 0 rgba(255, 250, 230, .55);
}
#page-cardpack .cp-act-use {
  color: #F8E2B8;
  background: url(../assets/cardpack/cp-btn-dark.webp) center / 100% 100% no-repeat;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .58), 0 0 24px rgba(206, 52, 30, .3);
  text-shadow: 0 1px 8px rgba(255, 180, 120, .45);
}
#page-cardpack .cp-act:active { transform: scale(.985); filter: brightness(1.06); }
#page-cardpack .cp-act[disabled] { opacity: .55; }

/* ---------- 记录 tab：真素材 rail + 金胶囊 ---------- */
#page-cardpack .cp-tabs {
  gap: 0; padding: 0; border: 0; border-radius: 0;
  height: 47.5px; background-color: transparent;
  background-image: url(../assets/cardpack/cp-tab-rail.webp);
  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
  box-shadow: none;
}
#page-cardpack .cp-tabs button {
  flex: 1; height: 47.5px; border: 0; border-radius: 0;
  font-size: 19px; font-weight: 800; letter-spacing: 2px;
  color: #B6A68B; background: none; box-shadow: none;
}
#page-cardpack .cp-tabs button.on {
  color: #3A2A0C;
  border: 0;
  background: url(../assets/cardpack/cp-tab-gold.webp) center / 100% 100% no-repeat;
  box-shadow: none;
  text-shadow: 0 1px 0 rgba(255, 250, 230, .5);
}

/* ---------- 空态 / 记录项 ---------- */
#page-cardpack .cp-empty {
  padding: 35px 12px; border-radius: 14px;
  font-size: 16px; letter-spacing: 1.2px; color: #DCC9A6;
  border: 1px dashed rgba(190, 158, 104, .45);
  background: linear-gradient(180deg, rgba(255, 255, 255, .012), rgba(0, 0, 0, .25));
}
#page-cardpack .cp-empty span { color: #93866F; }
#page-cardpack .cp-gitem {
  padding: 14px 15px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  border: 1px solid rgba(235, 199, 128, .2);
}
#page-cardpack .cp-gitem-main b { color: #F1E3C6; font-size: 14px; }
#page-cardpack .cp-gitem-main span { color: #A2947B; }
#page-cardpack .cp-gitem time { color: #8B7F6B; }
#page-cardpack .cp-group-items { border-top-color: rgba(235, 199, 128, .24); }

/* =========================================================
   我的卡包 · 四胶囊导航 + 卡片合并大金框（2026-11-09）
   —— 覆盖块 · 只追加不删除
   ========================================================= */
#page-cardpack .cp-nav {
  display: flex; gap: 6px; margin: 0 0 16px;
}
#page-cardpack .cp-nav button {
  flex: 1 1 0; min-width: 0;
  height: 33px; padding: 0 4px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .2px;
  color: #D8C39C; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(0, 0, 0, .34));
  border: 1px solid rgba(224, 182, 110, .38);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .10);
  transition: transform .12s;
}
#page-cardpack .cp-nav button.on {
  color: #3A2A0C;
  background: linear-gradient(180deg, #FFF6DA 0%, #F4D79A 22%, #E2B563 50%, #BF8C3D 78%, #E7C078 100%);
  border-color: rgba(255, 236, 186, .8);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, .45),
    0 0 18px rgba(236, 180, 86, .28),
    inset 0 1px 0 rgba(255, 255, 255, .65);
  text-shadow: 0 1px 0 rgba(255, 250, 230, .5);
}
#page-cardpack .cp-nav button:active { transform: scale(.97); }

/* 面板切换：我的小熊卡 / 赠送记录 / 收入记录 */
#page-cardpack .cp-pane { display: none; }
#page-cardpack .cp-pane.on { display: block; }
#page-cardpack #cpPaneRecords { padding-top: 2px; }

/* ---------- 卡片区：合成为一个大金框（组与组之间用分隔线） ---------- */
#page-cardpack .cp-list {
  display: flex; flex-direction: column; gap: 0;
  padding: 12px 10px 10px;
  border: 0; border-radius: 0;
  background-color: transparent;
  background-image:
    url(../assets/cardpack/cp-card-top.webp),
    url(../assets/cardpack/cp-card-bottom.webp),
    url(../assets/cardpack/cp-card-side.webp),
    url(../assets/cardpack/cp-card-side-r.webp),
    linear-gradient(180deg, #1F1B15 0%, #161410 44%, #100F0D 100%);
  background-position: left top, left bottom, left top, right top, center;
  background-size: 100% 20.5px, 100% 23.5px, 10.5px 19px, 10.5px 19px, auto;
  background-repeat: no-repeat, no-repeat, repeat-y, repeat-y, no-repeat;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .6);
}
#page-cardpack .cp-list > .cp-item,
#page-cardpack .cp-list > .cp-item.cp-wait {
  padding: 18px 6px 16px;
  background: none; box-shadow: none;
}
#page-cardpack .cp-list > .cp-item::before { content: none; display: none; }
#page-cardpack .cp-list > .cp-item + .cp-item {
  border-top: 1px solid rgba(233, 197, 126, .16);
}
#page-cardpack .cp-list > .cp-item:last-child { padding-bottom: 8px; }
#page-cardpack .cp-list > .cp-empty {
  margin: 4px 4px 2px; padding: 26px 10px;
  border-color: rgba(190, 158, 104, .3);
}

/* 产出 / 待领 行：窄屏自动换行，不粘连 */
#page-cardpack .cp-item-meta { flex-wrap: wrap; gap: 3px 10px; }
#page-cardpack .cp-item-meta > span { white-space: nowrap; }
#page-cardpack .cp-item-meta > span:last-child { margin-left: auto; }

/* 赠送弹层 · 同类卡合并后的数量输入（2026-11-09） */
#page-cardpack .cp-qty { display: block; margin-top: 15px; }
#page-cardpack .cp-qty.hide { display: none; }
#page-cardpack .cp-qty > span {
  display: block; margin-bottom: 6px; font-size: 11px; color: #9C917B;
}
#page-cardpack .cp-qty-box { display: flex; align-items: center; gap: 8px; }
#page-cardpack .cp-qty-step {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px;
  font-size: 19px; font-weight: 800; line-height: 1;
  color: #EBD5AC;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .36));
  border: 1px solid rgba(224, 182, 110, .45);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .12);
}
#page-cardpack .cp-qty-step:active { transform: scale(.94); filter: brightness(1.1); }
#page-cardpack .cp-qty-box input {
  width: 86px; height: 36px; flex: 0 0 auto;
  text-align: center; font-size: 15px; font-weight: 800; color: #FFE0A6;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .32));
  border: 1px solid rgba(224, 182, 110, .42);
  border-radius: 11px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
  outline: none;
}
#page-cardpack .cp-qty-box input:focus { border-color: rgba(255, 220, 150, .75); }
#page-cardpack .cp-qty-box em {
  font-style: normal; font-size: 11.5px; color: #A99A80; white-space: nowrap;
}

/* =========================================================
   协议页（隐私政策 / 用户协议）· 黑金科技版 v2
   覆盖块 · 只追加不删除
   背景换机械侧轨 + 顶部华盖；顶栏改中央铭牌；正文改直角金框 + 四角托架
   ========================================================= */

/* ---------- 背景 ---------- */
#page-info.doc-tech {
  background:
    radial-gradient(70% 20% at 42% 0%, rgba(255, 178, 74, .14), rgba(0, 0, 0, 0) 72%),
    #05060A url(../assets/cp-tech-bg.webp) center top / cover no-repeat;
}

/* ---------- 顶栏 ---------- */
#page-info.doc-tech .subbar {
  height: 66px;
  background: linear-gradient(180deg, rgba(5, 6, 9, .82) 0%, rgba(5, 6, 9, .3) 64%, rgba(5, 6, 9, 0) 100%);
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#page-info.doc-tech .subbar::after { display: none; }
#page-info.doc-tech .subbar .back {
  width: 34px; height: 34px;
  color: #F2D393;
  background: radial-gradient(circle at 50% 32%, rgba(255, 214, 150, .18), rgba(16, 13, 9, .5) 78%);
  border: 1px solid rgba(235, 197, 126, .42);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .22), 0 4px 14px rgba(0, 0, 0, .5);
}
#page-info.doc-tech .subbar .back:active { background: rgba(255, 214, 150, .22); }
#page-info.doc-tech .subbar .back svg { width: 17px; height: 17px; }

/* ---------- 中央铭牌（复用 .subbar-txt，不加节点） ---------- */
#page-info.doc-tech .subbar.center .subbar-txt {
  position: relative;
  flex: 0 0 auto;
  width: 47%;
  min-width: 172px;
  max-width: 216px;
  padding: 6px 10px 7px;
  border: 1.5px solid transparent;
  border-radius: 0;
  background:
    radial-gradient(120% 92% at 50% 0%, rgba(255, 196, 110, .14), rgba(0, 0, 0, 0) 70%) padding-box,
    linear-gradient(180deg, rgba(27, 22, 15, .96) 0%, rgba(12, 11, 9, .96) 100%) padding-box,
    linear-gradient(150deg, #F7E7BC 0%, #9C7431 18%, #FFEFC9 38%, #8A6325 60%, #E8CB93 82%, #A57B36 100%) border-box;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, calc(100% - 9px) 100%, 9px 100%, 0 13px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 0 18px rgba(230, 175, 80, .10);
}
#page-info.doc-tech .subbar.center .subbar-txt::before {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid rgba(224, 186, 120, .2);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, calc(100% - 7px) 100%, 7px 100%, 0 10px);
  pointer-events: none;
}
#page-info.doc-tech .subbar-txt h1 {
  font-size: 18px; letter-spacing: 2px; font-weight: 800;
  background: linear-gradient(180deg, #FFF8E6 0%, #F6DEA6 44%, #D9A957 78%, #B98A3C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(190, 130, 40, .34));
}
#page-info.doc-tech .subbar-txt p {
  margin-top: 3px; font-size: 10px; letter-spacing: 1.1px; color: #C5AC7E;
}

/* ---------- 正文：直角金框 ---------- */
#page-info.doc-tech .sub-body {
  top: 58px;
  padding: 0 26px calc(22px + env(safe-area-inset-bottom, 0px));
  background: none;
}
#page-info.doc-tech .sub-body::after {
  content: ''; position: absolute; left: 16%; right: 16%; bottom: 0; height: 68px;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255, 190, 100, .2), rgba(0, 0, 0, 0) 74%);
  filter: blur(7px);
  pointer-events: none;
}
#page-info.doc-tech .text-body {
  position: relative;
  min-height: 0;
  margin: 0;
  padding: 24px 20px 62px;
  border-radius: 0;
  border: 1.5px solid transparent;
  background:
    radial-gradient(120% 26% at 50% 0%, rgba(255, 196, 110, .07), rgba(0, 0, 0, 0) 60%) padding-box,
    linear-gradient(180deg, rgba(18, 15, 10, .97) 0%, rgba(11, 10, 8, .97) 62%, rgba(8, 7, 6, .97) 100%) padding-box,
    linear-gradient(160deg, #E7CD97 0%, #7E5F2B 16%, #F3DDAE 38%, #6F5223 62%, #D8B87D 82%, #8F6C31 100%) border-box;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .55),
    0 0 30px rgba(220, 170, 80, .10),
    0 26px 54px -14px rgba(255, 182, 92, .30);
  font-size: 14.5px; line-height: 1.95; color: #E3D7BF;
}
/* 内衬细线 */
#page-info.doc-tech .text-body::before {
  content: ''; position: absolute; inset: 6px;
  border: 1px solid rgba(224, 186, 120, .16);
  pointer-events: none;
}
/* 四角托架：每角两条短线（共 8 层背景） */
#page-info.doc-tech .text-body::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(90deg, #FFEFC9, #C79A52), linear-gradient(180deg, #FFEFC9, #C79A52),
    linear-gradient(270deg, #FFEFC9, #C79A52), linear-gradient(180deg, #FFEFC9, #C79A52),
    linear-gradient(90deg, #FFEFC9, #C79A52), linear-gradient(0deg, #FFEFC9, #C79A52),
    linear-gradient(270deg, #FFEFC9, #C79A52), linear-gradient(0deg, #FFEFC9, #C79A52);
  background-size:
    16px 1.5px, 1.5px 16px,
    16px 1.5px, 1.5px 16px,
    16px 1.5px, 1.5px 16px,
    16px 1.5px, 1.5px 16px;
  background-position:
    left 5px top 5px, left 5px top 5px,
    right 5px top 5px, right 5px top 5px,
    left 5px bottom 5px, left 5px bottom 5px,
    right 5px bottom 5px, right 5px bottom 5px;
}

/* ---------- 正文排版 ---------- */
#page-info.doc-tech .text-body > p {
  position: relative; z-index: 1;
  font-size: 14.5px; line-height: 1.95; letter-spacing: .2px; color: #EFE3CB;
}
#page-info.doc-tech .text-body .kv { padding: 18px 0; }
#page-info.doc-tech .text-body .kv span {
  font-size: 14.5px; letter-spacing: .4px; color: #B39F7C;
}
#page-info.doc-tech .text-body .kv b {
  font-size: 14.5px; font-weight: 800; letter-spacing: .3px;
  background: linear-gradient(180deg, #FFF8E2 0%, #F6DEA6 46%, #DFAE58 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 6px rgba(255, 190, 90, .38));
}
#page-info.doc-tech .text-body .lv-tip {
  position: relative; z-index: 1;
  margin-top: 30px !important;
  font-size: 13.5px; line-height: 1.9; color: #A6987F;
}

/* =========================================================
   我的卡包 · 侧轨尾部淡出（修「底部残影/模糊」）+ 赠送弹层金框皮肤
   2026-11-09
   ========================================================= */

/* ---------- 侧轨：从页面背景里拆出来，单独一层并按底部渐隐 ----------
   原来 rails 直接挂在页面 background-image 上、固定 866.5px，
   图片尾部的金色圆弧 / 虚线圆环被硬切在页面中间，看起来像一块一块的模糊残影。
   现在拆到 ::before，末端 30% 渐隐，不留断口。 */
#page-cardpack.cardpack-page {
  background-color: #050505;
  background-image:
    radial-gradient(56% 9% at 50% 0%, rgba(255, 178, 88, .34), rgba(255, 150, 60, .10) 46%, rgba(0, 0, 0, 0) 78%),
    linear-gradient(180deg, #12100D 0%, #151310 12%, #141210 26%, #121110 40%,
      #0E0D0B 54%, #0B0B09 68%, #090907 78%, #060606 90%, #020202 100%);
  background-position: center top, center top;
  background-size: 100% 190px, 100% 100%;
  background-repeat: no-repeat, no-repeat;
}
#page-cardpack.cardpack-page::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: 866.5px;
  background:
    url(../assets/cardpack/cp-rail-l.webp) left top / 22px 866.5px no-repeat,
    url(../assets/cardpack/cp-rail-r.webp) right top / 22px 866.5px no-repeat;
/* 端帽 30% 淡出 → 66% 全透明：装饰圆弧在内容结束后不再留残影 */
  -webkit-mask-image: linear-gradient(180deg, #000 0 34%, rgba(0, 0, 0, .45) 50%, rgba(0, 0, 0, 0) 64%);
  mask-image: linear-gradient(180deg, #000 0 34%, rgba(0, 0, 0, .45) 50%, rgba(0, 0, 0, 0) 64%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- 赠送弹层：黑金切角金框 ---------- */
#page-cardpack .cp-sheet-mask { background: rgba(0, 0, 0, .72); }

#page-cardpack .cp-sheet-box {
  padding: 26px 18px calc(24px + env(safe-area-inset-bottom, 0px));
  border: 2px solid transparent;
  border-radius: 26px 26px 0 0;
  background:
    radial-gradient(120% 42% at 50% 0%, rgba(255, 196, 112, .22), rgba(255, 196, 112, .05) 46%, rgba(0, 0, 0, 0) 72%) padding-box,
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 1px, rgba(0, 0, 0, 0) 1px 8px) padding-box,
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .30) 0 1px, rgba(0, 0, 0, 0) 1px 8px) padding-box,
    linear-gradient(180deg, #261F16 0%, #1A1510 38%, #14110E 72%, #0E0C0A 100%) padding-box,
    linear-gradient(150deg, #FFF2D2 0%, #C79A4E 17%, #FFEFC9 37%, #A57B36 59%, #F2DCAE 79%, #B98F49 100%) border-box;
  box-shadow: inset 0 0 0 1px rgba(255, 226, 166, .22);
  filter:
    drop-shadow(0 -12px 30px rgba(0, 0, 0, .8))
    drop-shadow(0 0 20px rgba(240, 180, 90, .26));
  animation: cpup .22s cubic-bezier(.22, .9, .3, 1) both;
}
/* 顶沿中央高光（设计稿顶部那道亮线） */
#page-cardpack .cp-sheet-box::after {
  content: ''; position: absolute; left: 16%; right: 16%; top: 1px; height: 2px;
  background: linear-gradient(90deg, rgba(255, 240, 205, 0), #FFF8E8 50%, rgba(255, 240, 205, 0));
  filter: drop-shadow(0 0 8px rgba(255, 214, 150, .9));
  pointer-events: none;
}

#page-cardpack .cp-sheet-box h3 {
  font-size: 20px; font-weight: 800; letter-spacing: 1.2px;
  background: linear-gradient(180deg, #FFF9EA 0%, #F4DCA8 50%, #D9A957 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 7px rgba(190, 130, 40, .32));
}
#page-cardpack .cp-sheet-tip { margin-top: 9px; font-size: 12px; line-height: 1.65; color: #A99A80; }

/* ---------- 选卡列表 ---------- */
#page-cardpack .cp-pick { gap: 10px; margin-top: 15px; max-height: 240px; }
#page-cardpack .cp-pick-item {
  padding: 14px 15px; border-radius: 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .014));
  border: 1px solid rgba(222, 184, 118, .34);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .08);
}
#page-cardpack .cp-pick-item b { font-size: 15.5px; color: #F4E4C4; letter-spacing: .3px; }
#page-cardpack .cp-pick-item span { margin-top: 5px; font-size: 11.5px; color: #A2947B; }
#page-cardpack .cp-pick-item i {
  width: 22px; height: 22px; border-width: 1.5px;
  border-color: rgba(226, 186, 116, .55);
}
#page-cardpack .cp-pick-item.on {
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(255, 196, 110, .16), rgba(0, 0, 0, 0) 68%),
    linear-gradient(180deg, #2C2418 0%, #17130F 100%);
  border-color: rgba(255, 226, 162, .85);
  box-shadow:
    0 0 0 1px rgba(255, 214, 150, .22),
    0 0 18px rgba(240, 180, 90, .26),
    inset 0 1px 0 rgba(255, 244, 214, .2);
}
#page-cardpack .cp-pick-item.on i {
  border-color: #FFD98F;
  background: radial-gradient(circle at 50% 50%, #FFD98F 0 42%, rgba(255, 217, 143, 0) 52%);
  box-shadow: 0 0 10px rgba(255, 196, 110, .6);
}
#page-cardpack .cp-pick-empty {
  padding: 22px 10px; border-radius: 14px; font-size: 13px; color: #9A8F79;
  border: 1px dashed rgba(214, 178, 112, .28);
}

/* ---------- 数量 ---------- */
#page-cardpack .cp-qty > span { font-size: 12px; color: #A99A80; }
#page-cardpack .cp-qty-step { width: 42px; height: 42px; border-radius: 13px; font-size: 20px; }
#page-cardpack .cp-qty-box input { width: 96px; height: 42px; border-radius: 21px; font-size: 16px; }
#page-cardpack .cp-qty-box em { font-size: 12px; }

/* ---------- 收卡人 ID ---------- */
#page-cardpack .cp-uid { margin-top: 16px; }
#page-cardpack .cp-uid span { font-size: 12px; color: #A99A80; margin-bottom: 7px; }
#page-cardpack .cp-uid input {
  height: 46px; border-radius: 14px; font-size: 14.5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .28));
  border: 1px solid rgba(222, 184, 118, .38);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .08);
}
#page-cardpack .cp-uid input:focus { border-color: rgba(255, 220, 150, .72); }

/* ---------- 底部双按钮：深底 + 金描边（确认带外发光） ---------- */
#page-cardpack .cp-sheet-btns { gap: 13px; margin-top: 20px; }
#page-cardpack .cp-sheet-btns button {
  flex: 1; height: 50px; border-radius: 999px;
  font-size: 17px; font-weight: 800; letter-spacing: 2.2px;
}
#page-cardpack .cp-cancel {
  color: #E8D3A9;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(0, 0, 0, .34));
  border: 1px solid rgba(214, 178, 112, .32);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .10);
  text-shadow: 0 1px 6px rgba(255, 190, 110, .2);
}
#page-cardpack .cp-ok {
  color: #F9E4BC;
  background:
    radial-gradient(120% 150% at 50% 118%, rgba(255, 196, 110, .18), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #241E15 0%, #12100D 100%);
  border: 1.5px solid rgba(255, 224, 160, .88);
  box-shadow:
    0 0 0 1px rgba(255, 205, 130, .18),
    0 10px 22px rgba(0, 0, 0, .5),
    0 0 24px rgba(240, 180, 90, .30),
    inset 0 1px 0 rgba(255, 244, 214, .28);
  text-shadow: 0 1px 9px rgba(255, 190, 110, .5);
}

/* =========================================================
   熊王商城 · 机械黑金版 v2（列表页 + 兑换弹层）2026-11-09
   覆盖块 · 只追加不删除
   素材：v2/assets/shop/*（设计原图抠：铭牌 / 余额面板 / tab / 卡框 / 齿轮舱 / 金按钮 / 信息面板）
   ========================================================= */

/* ---------- 页面底：暗金属 + 边缘光 ---------- */
#page-shop.shop-page {
  background:
    radial-gradient(64% 24% at 50% 0%, rgba(255, 178, 74, .10), rgba(0, 0, 0, 0) 70%),
    radial-gradient(40% 30% at 100% 32%, rgba(120, 150, 190, .07), rgba(0, 0, 0, 0) 72%),
    radial-gradient(34% 26% at 0% 42%, rgba(255, 176, 90, .06), rgba(0, 0, 0, 0) 74%),
    linear-gradient(180deg, #12100D 0%, #0A0908 46%, #080706 100%);
}
#page-shop .scroll { position: relative; z-index: 1; }

/* ---------- 顶部：铭牌 + 余额面板 ---------- */
#page-shop .shop-head {
  display: flex; align-items: flex-start;
  padding: 4px 0 0 2px; gap: 0;
}
#page-shop .shop-head-txt {
  flex: 0 0 auto;
  width: 155px; height: 85px;
  padding: 14px 0 0 15px;
  background: url(../assets/shop/hdr-left.webp) 0 0 / 100% 100% no-repeat;
}
#page-shop .shop-head-txt h1 {
  font-size: 25px; font-weight: 900; letter-spacing: .5px; line-height: 1;
  background: linear-gradient(180deg, #FFF4D2 0%, #F0CE8B 44%, #C99A4E 78%, #A9752F 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 3px rgba(40, 20, 0, .75));
}
#page-shop .shop-head-txt p {
  margin-top: 7px; font-size: 11px; letter-spacing: .8px; color: #C4AE8A;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
#page-shop .shop-bal {
  position: relative;
  flex: 0 0 auto;
  width: 152px; height: 72px;
  margin: 6px 14px 0 auto;
  padding: 0 9px 4px 34px;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: 1px;
  background: url(../assets/shop/hdr-bal.webp) 0 0 / 100% 100% no-repeat;
  border: 0; border-radius: 0; box-shadow: none;
}
#page-shop .shop-bal .shop-coin { display: none; }
#page-shop .shop-bal-txt {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0;
  width: 100%; min-width: 0;
}
#page-shop .shop-bal-txt em {
  font-style: normal; font-size: 10px; letter-spacing: .1em; color: #C9AE7C;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
#page-shop .shop-bal-txt b {
  font-size: 15px; font-weight: 900; line-height: 1.15; letter-spacing: -.4px; color: #FFE7B0;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 0 12px rgba(255, 186, 76, .55), 0 2px 3px rgba(60, 30, 0, .8);
}
#page-shop .shop-bal:active { transform: scale(.98); }

#page-shop .shop-rule {
  margin: 4px 12px 0; font-size: 11.5px; line-height: 1.6;
  color: #BCA88B; letter-spacing: .3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}

/* ---------- Tab：机械斜切面板 ---------- */
#page-shop .shop-tabs {
  display: flex; gap: 4px;
  margin: 9px 11px 0; padding: 0;
  background: none; border: 0; border-radius: 0; height: 47.5px;
}
#page-shop .shop-tabs button {
  flex: 1; height: 47.5px; border: 0; border-radius: 0;
  background: url(../assets/shop/tab-off.webp) center / 100% 100% no-repeat;
  font-size: 15px; font-weight: 800; letter-spacing: 1.4px; color: #A98F65;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
  box-shadow: none;
  filter: brightness(.72) saturate(.9);
}
#page-shop .shop-tabs button.on {
  background-image: url(../assets/shop/tab-on.webp);
  color: #FFEFC4;
  text-shadow: 0 0 10px rgba(255, 190, 90, .75), 0 1px 3px rgba(0, 0, 0, .9);
  filter: none;
}

/* ---------- 商品网格 ---------- */
#page-shop .shop-panel { padding: 21px 11px 0; }
#page-shop .shop-grid { gap: 6px 8px; }

#page-shop .shop-card {
  position: relative;
  display: block;
  padding: 0;
  aspect-ratio: 342 / 604;
  border: 0; border-radius: 0;
  background: url(../assets/shop/card.webp) center / 100% 100% no-repeat;
  box-shadow: none;
  overflow: visible;
}
#page-shop .shop-card.sold { opacity: .62; }

/* 商品图：嵌在齿轮舱镂空圆里 */
#page-shop .shop-pic {
  position: absolute; left: 50%; top: 5.45%;
  width: 78.9%; aspect-ratio: 1 / 1;
  margin-left: -39.45%;
  border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #4A3417 0%, #241A0E 62%, #14100A 100%);
}
#page-shop .shop-pic img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  color: transparent; font-size: 0;                 /* 破图时不显示 alt 文字 */
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
}
#page-shop .shop-noimg {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; color: #7A6A50;
}
#page-shop .shop-sold {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  padding: 2px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; color: #FFE0A8;
  background: rgba(20, 14, 8, .82); border: 1px solid rgba(230, 190, 122, .5);
}

/* 名称 / 价格 / 库存 */
#page-shop .shop-name {
  position: absolute; left: 13.5%; right: 8%; top: 53.6%;
  display: block;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 15px; font-weight: 800; letter-spacing: .3px;
  background: linear-gradient(180deg, #FFF6DC 0%, #F3D79C 50%, #D3A453 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .9));
}
#page-shop .shop-price {
  position: absolute; left: 8.9%; top: 66.8%;
  display: flex; align-items: baseline; gap: 5px; margin: 0;
}
#page-shop .shop-price i {
  width: 13px; height: 13px; border-radius: 50%;
  background: url(../assets/shop/coin.webp) center / contain no-repeat;
  box-shadow: none; transform: translateY(-1px);
}
#page-shop .shop-price b {
  font-size: 17px; font-weight: 900; color: #FFE0A2;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(255, 186, 76, .5), 0 1px 3px rgba(50, 26, 0, .9);
}
#page-shop .shop-price span { font-size: 11px; color: #C0AC8C; }
#page-shop .shop-stock {
  position: absolute; left: 10.3%; top: 73.4%;
  margin: 0; font-size: 11px; letter-spacing: .2px; color: #A2937C;
}

/* 立即兑换：底图已在卡框里，这里只放文字 */
#page-shop .shop-buy {
  position: absolute; left: 8.8%; right: 8.8%; top: 80.5%;
  width: auto; height: 9.3%; min-height: 26px;
  margin: 0; padding: 0;
  border: 0; border-radius: 999px;
  background: none; box-shadow: none;
  font-size: 14.5px; font-weight: 900; letter-spacing: 2.5px; color: #3E2708;
  text-shadow: 0 1px 0 rgba(255, 248, 226, .45);
  transition: transform .12s ease, filter .12s ease;
}
#page-shop .shop-buy:active { transform: scale(.97); filter: brightness(1.06); }
#page-shop .shop-buy[disabled] { opacity: .55; color: #6A5230; }

#page-shop .shop-empty {
  grid-column: 1 / -1;
  padding: 40px 10px; font-size: 12.5px; color: #A79B85;
  border-radius: 16px; border: 1px dashed rgba(235, 199, 128, .2);
}
#page-shop .shop-stage { border-radius: 16px; border-color: rgba(230, 190, 122, .26); }

/* =========================================================
   兑换弹层 · 机械黑金版
   ========================================================= */
#page-shop .shop-sheet-box {
  padding: 14px 10px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 16px 16px 0 0;
  background:
    radial-gradient(90% 30% at 50% 0%, rgba(255, 196, 110, .10), rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, #221B12 0%, #14110C 52%, #0C0A08 100%);
  border-top: 1.5px solid rgba(236, 200, 136, .55);
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .68), 0 -2px 20px rgba(226, 170, 80, .18);
  max-height: 90%;
}
#page-shop .shop-sheet-box h3 {
  margin-bottom: 6px;
  font-size: 17px; font-weight: 900; letter-spacing: 1.6px;
  background: linear-gradient(180deg, #FFF6DC 0%, #F1CE8C 52%, #C08F46 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .85));
}

/* 商品摘要：齿轮舱 + 信息面板 */
#page-shop .sheet-prod { position: relative; display: flex; align-items: center; }
#page-shop .sp-ring {
  position: relative; flex: 0 0 auto;
  width: 167px; height: 153.6px;
  background: url(../assets/shop/ring.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .6));
  z-index: 1;
}
#page-shop .sp-pic {
  position: absolute; left: 50%; top: 9.15%;
  width: 80.8%; aspect-ratio: 1 / 1;
  margin-left: -40.4%;
  border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #4A3417 0%, #241A0E 62%, #14100A 100%);
}
#page-shop .sp-pic img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  color: transparent; font-size: 0;
}
#page-shop .sp-plate {
  flex: 1 1 auto; min-width: 0;
  min-height: 153.6px;
  margin-left: -12px;
  padding: 34px 18px 12px 32px;
  background: url(../assets/shop/sheet-plate.webp) 0 0 / 100% 100% no-repeat;
}
#page-shop .sp-name {
  display: block; font-size: 19px; font-weight: 900; letter-spacing: .5px;
  background: linear-gradient(180deg, #FFF6DC 0%, #F1CE8C 52%, #C08F46 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .85));
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
#page-shop .sp-price {
  display: block; margin-top: 6px;
  font-size: 16px; font-weight: 800; letter-spacing: .4px; color: #F0D8A6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
#page-shop .sp-stock {
  display: flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 12.5px; letter-spacing: .3px; color: #C0B39C;
  white-space: nowrap;
}
#page-shop .sp-coin {
  flex: 0 0 auto; width: 19px; height: 19px;
  background: url(../assets/shop/coin.webp) center / contain no-repeat;
}

/* 收货地址：金框卡片 */
#page-shop .addr-field { margin-top: 14px; }
#page-shop .addr-field > span {
  margin-bottom: 7px; font-size: 13px; font-weight: 800; letter-spacing: 1px; color: #E8D2A8;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
#page-shop .addr-card {
  position: relative;
  padding: 11px 12px 12px;
  border-radius: 15px;
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(255, 196, 110, .10), rgba(0, 0, 0, 0) 66%),
    linear-gradient(180deg, #33271A 0%, #241A11 58%, #1A130C 100%);
  border: 1.5px solid rgba(226, 186, 118, .42);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .10), 0 10px 24px rgba(0, 0, 0, .45);
}
#page-shop .addr-card .mk-addrs { gap: 0; max-height: 132px; }
#page-shop .addr-card .mk-addr {
  padding: 2px 0 6px; border: 0; border-radius: 0; background: none;
}
#page-shop .addr-card .mk-addr.on { background: none; border: 0; }
#page-shop .addr-card .mk-addr + .mk-addr {
  padding-top: 9px; border-top: 1px solid rgba(226, 186, 118, .16);
}
#page-shop .addr-card .mk-addr-t b { font-size: 15px; font-weight: 800; color: #F6E7C6; }
#page-shop .addr-card .mk-addr-t span { font-size: 14px; color: #EADBBE; }
#page-shop .addr-card .mk-addr-t i {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  color: #E7C288; background: rgba(120, 84, 36, .5);
  border: 1px solid rgba(226, 186, 118, .42);
}
#page-shop .addr-card .mk-addr p { margin-top: 4px; font-size: 12.5px; color: #A2937C; }
#page-shop .addr-card .mk-addr-empty { border: 0; padding: 4px 0 8px; text-align: left; font-size: 12px; }

#page-shop .addr-card .mk-link {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin: 8px 0 0; height: 34px; width: 172px; padding: 0;
  border: 0; border-radius: 999px;
  background: url(../assets/shop/btn-gold.webp) center / 100% 100% no-repeat;
  font-size: 14px; font-weight: 900; letter-spacing: 1px; color: #3E2708;
  text-shadow: 0 1px 0 rgba(255, 248, 226, .45);
}
#page-shop .addr-card .mk-link i { font-style: normal; font-size: 15px; }
#page-shop .addr-card .mk-link:active { transform: scale(.98); }

/* 数量：机械方块步进器 */
#page-shop .mk-field { margin-top: 13px; }
#page-shop .mk-field > span { font-size: 13px; font-weight: 800; letter-spacing: 1px; color: #E8D2A8; }
#page-shop .mk-qty { gap: 9px; }
#page-shop .mk-qty button,
#page-shop .mk-qty input {
  height: 34px; border-radius: 9px;
  background: linear-gradient(180deg, #2C2B29 0%, #1B1A18 100%);
  border: 1px solid rgba(226, 186, 118, .34);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .08);
  color: #E4C89A;
}
#page-shop .mk-qty button { width: 34px; font-size: 18px; font-weight: 700; }
#page-shop .mk-qty input { width: 67px; font-size: 16px; font-weight: 800; color: #F6E7C6; }
#page-shop .mk-qty .qty-plus {
  width: 34px; color: #3E2708;
  background: linear-gradient(180deg, #FFF0C2 0%, #F0CB84 40%, #C89A4E 100%);
  border-color: rgba(255, 236, 190, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 12px rgba(200, 140, 50, .3);
}

/* 数量行：左步进器 / 右合计 */
#page-shop .qty-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
#page-shop .mk-total {
  flex: 0 0 auto; margin: 0 0 0 auto; padding: 0 12px;
  display: flex; align-items: center; gap: 8px;
  height: 34px; border-top: 0;
  border: 1px solid rgba(226, 186, 118, .34); border-radius: 999px;
  background: linear-gradient(180deg, #2A2724 0%, #171513 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .08);
}
#page-shop .mk-total span { font-size: 12.5px; color: #C2B096; white-space: nowrap; }
#page-shop .mk-total b { font-size: 16.5px; font-weight: 900; color: #FFE0A2; white-space: nowrap; }

/* 底部：取消 + 确认兑换 */
#page-shop .mk-foot {
  display: flex; align-items: center; gap: 9px;
  margin-top: 15px; padding-top: 13px;
  border-top: 1px solid rgba(226, 186, 118, .16);
}
#page-shop .mk-foot .mk-cancel {
  flex: 0 0 92px; height: 36px; border-radius: 999px;
  font-size: 14.5px; font-weight: 800; letter-spacing: 2px; color: #DCC49A;
  background: linear-gradient(180deg, #2A2724 0%, #171513 100%);
  border: 1px solid rgba(226, 186, 118, .38);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .08);
}
#page-shop .mk-foot .mk-cancel:active { transform: scale(.98); background: #241f1b; }
#page-shop .mk-foot .mk-ok {
  flex: 1 1 auto; height: 36px; border-radius: 999px;
  font-size: 14.5px; font-weight: 900; letter-spacing: 2px; color: #3E2708;
  background: url(../assets/shop/btn-gold.webp) center / 100% 100% no-repeat;
  border: 0; box-shadow: none;
  text-shadow: 0 1px 0 rgba(255, 248, 226, .45);
}
#page-shop .mk-foot .mk-ok[disabled] { opacity: .6; }

/* 小熊卡 · 空卡槽可直接申购 */
#page-card .cd3-slotcell[data-cd-buy-slot] { cursor: pointer; }
#page-card .cd3-slot.empty { flex-direction: column; gap: 2px; }
#page-card .cd3-slot-price { font-size: 9.5px; color: #B79A6A; letter-spacing: .2px; line-height: 1; }
#page-card .cdu-note2 { margin-top: 10px; font-size: 11px; color: #C6B597; text-align: center; line-height: 1.6; }

/* =========================================================
   赠送熊币（2026-11-10）：钱包入口 + 赠送页
   ========================================================= */
#page-wallet .wl-gift-entry {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: none;
  width: 100%;
  height: 32px; padding: 0 15px;
  border-radius: 999px;
  border: 1px solid rgba(247, 214, 150, .72);
  background: linear-gradient(180deg, rgba(66, 51, 30, .92), rgba(30, 23, 15, .96));
  color: #FFE3A6; font-size: 13px; font-weight: 800; letter-spacing: .04em;
  box-shadow: 0 0 12px rgba(255, 185, 80, .22), inset 0 1px 0 rgba(255, 243, 214, .18);
  cursor: pointer;
}
#page-wallet .wl-gift-entry svg { width: 15px; height: 15px; flex: none; }
#page-wallet .wl-gift-entry:active { transform: scale(.985); }

/* 兜底：若客户端仍在使用旧结构（按钮嵌在 .wl-meta 里），也强制独占一行 */
#page-wallet .wl-meta { flex-wrap: wrap; }
#page-wallet .wl-meta > .wl-gift-entry {
  flex: 0 0 100%;
  margin-top: 2px;
}

/* 赠送熊币 / 赠送记录 两页共用外观 —— 暗金机械风 */
#page-coingift, #page-cgrecds, #page-hb2records {
  background:
    radial-gradient(86% 30% at 50% -6%, rgba(255, 198, 104, .17) 0%, rgba(10, 8, 7, 0) 68%),
    radial-gradient(70% 24% at 50% 106%, rgba(255, 168, 60, .08) 0%, rgba(10, 8, 7, 0) 72%),
    linear-gradient(45deg, rgba(255, 226, 176, .03) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 226, 176, .03) 50%, rgba(255, 226, 176, .03) 75%, rgba(0, 0, 0, 0) 75%) 0 0 / 8px 8px,
    linear-gradient(-45deg, rgba(0, 0, 0, .2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .2) 75%, rgba(0, 0, 0, 0) 75%) 0 0 / 8px 8px,
    linear-gradient(rgba(9, 7, 6, .5), rgba(9, 7, 6, .74)),
    #0a0807;
  background-size: auto, auto, 8px 8px, 8px 8px, auto, auto;
}

/* 装饰层：齿轮 + 外框 + 金尘（不参与交互，不随内容滚动） */
#page-coingift .cg-deco, #page-cgrecds .cg-deco, #page-hb2records .cg-deco {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.cg-deco .cg-gear {
  position: absolute;
  background: url("../assets/coingift/gear.png") center / contain no-repeat;
  opacity: .42;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55)) saturate(.9);
}
.cg-deco .g1 { width: 188px; height: 188px; left: -66px; top: -54px; transform: rotate(12deg); }
.cg-deco .g2 { width: 88px; height: 88px; right: -24px; top: 92px; transform: rotate(-16deg); opacity: .3; }
.cg-deco .g3 { width: 244px; height: 244px; left: -94px; bottom: -88px; transform: rotate(-10deg); opacity: .5; }
.cg-deco .g4 { width: 148px; height: 148px; right: -54px; bottom: -18px; transform: rotate(22deg); opacity: .36; }
.cg-deco .g5 { width: 64px; height: 64px; left: -16px; top: 54%; transform: rotate(34deg); opacity: .22; }
.cg-deco .cg-frame {
  position: absolute; inset: 6px; border-radius: 16px;
  border: 1px solid rgba(214, 168, 100, .3);
  box-shadow: inset 0 0 0 1px rgba(214, 168, 100, .08), inset 0 0 46px rgba(0, 0, 0, .4);
}
.cg-deco::after {
  content: ""; position: absolute; inset: 0; opacity: .55;
  background:
    radial-gradient(circle, rgba(255, 224, 160, .95) 0 1px, rgba(255, 224, 160, 0) 2px) 12% 16% / 6px 6px no-repeat,
    radial-gradient(circle, rgba(255, 214, 140, .8) 0 1px, rgba(255, 214, 140, 0) 2px) 78% 9% / 5px 5px no-repeat,
    radial-gradient(circle, rgba(255, 232, 180, .75) 0 1px, rgba(255, 232, 180, 0) 2px) 91% 42% / 7px 7px no-repeat,
    radial-gradient(circle, rgba(255, 214, 140, .65) 0 1px, rgba(255, 214, 140, 0) 2px) 6% 68% / 5px 5px no-repeat,
    radial-gradient(circle, rgba(255, 226, 170, .7) 0 1px, rgba(255, 226, 170, 0) 2px) 66% 88% / 6px 6px no-repeat,
    radial-gradient(circle, rgba(255, 214, 140, .6) 0 1px, rgba(255, 214, 140, 0) 2px) 33% 96% / 5px 5px no-repeat;
}

/* 顶栏 */
#page-coingift .subbar, #page-cgrecds .subbar, #page-hb2records .subbar {
  height: 66px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(16, 13, 10, .97) 0%, rgba(11, 9, 7, .92) 100%);
  border-bottom: 0;
}
#page-coingift .subbar::before, #page-cgrecds .subbar::before, #page-hb2records .subbar::before {
  content: ""; position: absolute; left: 50%; bottom: -3px; width: 7px; height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, #FFF6DC 0%, #EBCB92 50%, #B98B42 100%);
  box-shadow: 0 0 8px rgba(255, 226, 160, .7);
}
#page-coingift .subbar::after, #page-cgrecds .subbar::after, #page-hb2records .subbar::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(233, 196, 128, 0) 0%, rgba(233, 196, 128, .38) 16%, rgba(255, 232, 176, .9) 50%, rgba(233, 196, 128, .38) 84%, rgba(233, 196, 128, 0) 100%);
}
#page-coingift .subbar .back, #page-cgrecds .subbar .back, #page-hb2records .subbar .back {
  color: #F4DDA8;
  background: radial-gradient(circle at 50% 28%, #2c2318 0%, #140f0a 78%);
  border: 1px solid rgba(233, 196, 128, .42);
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .18), 0 3px 9px rgba(0, 0, 0, .55);
}
#page-coingift .subbar-txt h1, #page-cgrecds .subbar-txt h1, #page-hb2records .subbar-txt h1 {
  font-size: 18px; font-weight: 900; letter-spacing: .05em;
  background: linear-gradient(180deg, #FFFAEC 6%, #F8DFA8 52%, #D7A451 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(58, 32, 0, .9));
}
#page-coingift .subbar-txt p, #page-cgrecds .subbar-txt p {
  margin-top: 3px; font-size: 10px; letter-spacing: .02em; color: #A98D5F;
}
#page-coingift .subbar { padding-right: 70px; }
#page-coingift .cg-crest {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 50px; height: 56px; object-fit: contain;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .7)) drop-shadow(0 0 14px rgba(240, 190, 100, .22));
}

#page-coingift .cg-body, #page-cgrecds .cg-body {
  top: 66px;
  padding: 16px 16px calc(26px + env(safe-area-inset-bottom, 0px));
  background: none;
}

/* 余额牌 + 记录入口 */
#page-coingift .cg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 14px;
}
#page-coingift .cg-head-bal {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  flex: 0 1 auto; min-width: 0; white-space: nowrap;
  height: 40px; padding: 0 10px;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  background: linear-gradient(158deg, #F6E2B2 0%, #C99B4D 34%, #7A531D 62%, #EBD3A0 100%);
}
#page-coingift .cg-head-bal::after {
  content: ""; position: absolute; inset: 1.5px; z-index: 0;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  background:
    radial-gradient(120% 150% at 22% 0%, rgba(255, 214, 150, .13) 0%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #241C13 0%, #14100B 58%, #0C0906 100%);
  box-shadow: inset 0 1px 0 rgba(255, 238, 200, .16), inset 0 0 12px rgba(0, 0, 0, .55);
}
#page-coingift .cg-head-bal > * { position: relative; z-index: 1; }
#page-coingift .cg-head-bal .lb { font-size: 10px; color: #C6A875; letter-spacing: .04em; }
#page-coingift .cg-head-bal em {
  font-style: normal; font-size: 18.5px; font-weight: 900; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  background: linear-gradient(180deg, #FFFBEF 0%, #FFE6AE 44%, #EFBE63 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(52, 30, 0, .9));
}
#page-coingift .cg-head-bal small { font-size: 9.5px; color: #C9AE7C; }
#page-coingift .cg-coin {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFF6D2 0%, #F2D189 34%, #D2A24A 66%, #9C6E22 100%);
  border: 1.5px solid rgba(120, 82, 24, .55);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
  display: inline-block; align-self: center;
}
#page-coingift .cg-head-rec {
  display: inline-flex; align-items: center; gap: 1px;
  flex: 0 0 auto; white-space: nowrap;
  height: 38px; padding: 0 8px 0 11px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 900; letter-spacing: .01em;
  color: #F3D79B;
  background:
    linear-gradient(180deg, rgba(42, 33, 22, .96), rgba(15, 11, 7, .98)) padding-box,
    linear-gradient(150deg, #F0D49C 0%, #B4843C 42%, #7A5419 70%, #E4C68C 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 240, 205, .12);
}
#page-coingift .cg-head-rec:active { transform: scale(.97); }
#page-coingift .cg-head-rec-arrow { font-style: normal; font-size: 15px; line-height: 1; color: #C9A96C; margin-top: -1px; }

/* 表单面板 */
#page-coingift .cg-card {
  position: relative;
  margin-top: 0; padding: 18px 15px 17px;
  border-radius: 20px; border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, rgba(28, 23, 18, .95), rgba(14, 11, 8, .97)) padding-box,
    linear-gradient(155deg, #E8CD93 0%, #A87934 28%, #6E4A17 55%, #D9BB80 82%, #8C6227 100%) border-box;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 240, 205, .08), inset 0 0 40px rgba(0, 0, 0, .35);
}
#page-coingift .cg-card::before {
  content: ""; position: absolute; inset: 5px; border-radius: 15px;
  border: 1px solid rgba(240, 210, 150, .1); pointer-events: none;
}
#page-coingift .cg-field { display: block; margin-bottom: 15px; }
#page-coingift .cg-field > span {
  display: block; margin-bottom: 9px;
  font-size: 13px; font-weight: 700; color: #E3C892; letter-spacing: .04em;
}
#page-coingift .cg-field input {
  width: 100%; height: 48px; padding: 0 14px;
  border-radius: 13px; color: #F6E8C9; font-size: 15px;
  background: linear-gradient(180deg, rgba(255, 240, 205, .09) 0%, rgba(255, 240, 205, .02) 26%, rgba(0, 0, 0, .42) 56%, rgba(0, 0, 0, .52) 100%);
  border: 1px solid rgba(233, 196, 128, .38);
  box-shadow: inset 0 1px 0 rgba(255, 244, 215, .1), inset 0 -10px 18px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .35);
  outline: none;
}
#page-coingift .cg-field input:focus {
  border-color: rgba(255, 224, 160, .9);
  box-shadow: 0 0 0 3px rgba(240, 190, 90, .12), 0 0 14px rgba(240, 190, 90, .18), inset 0 -10px 18px rgba(0, 0, 0, .28);
}
#page-coingift .cg-field input::placeholder { color: #8A7B63; }
#page-coingift .cg-idrow { display: flex; gap: 9px; }
#page-coingift .cg-idrow input { flex: 1; min-width: 0; }
#page-coingift .cg-idrow button {
  flex: 0 0 76px; height: 48px; border-radius: 12px;
  font-size: 14.5px; font-weight: 900; letter-spacing: .1em; color: #3A2306;
  background: linear-gradient(180deg, #FFF0C7 0%, #F7D28B 34%, #D9A64E 62%, #B37F2C 100%);
  border: 1px solid rgba(255, 240, 200, .75);
  box-shadow: 0 5px 14px rgba(190, 130, 40, .32), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -3px 6px rgba(120, 70, 10, .35);
}
#page-coingift .cg-idrow button:active { transform: scale(.97); }
#page-coingift .cg-idrow button[disabled] { opacity: .55; }

#page-coingift .cg-user {
  margin: -4px 0 16px; padding: 9px 12px; border-radius: 10px;
  font-size: 12px; line-height: 1.5; color: #B9A47F;
  background: rgba(0, 0, 0, .34);
  border: 1px solid rgba(233, 196, 128, .2);
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .04);
}
#page-coingift .cg-user.ok {
  color: #F0DCB6; border-style: solid;
  border-color: rgba(120, 200, 140, .38);
  background: rgba(60, 120, 78, .14);
}
#page-coingift .cg-user b { color: #FFE3A6; }
#page-coingift .cg-user span { color: #9C907E; }

/* 手续费 / 合计扣除 */
#page-coingift .cg-fee { display: flex; gap: 9px; margin: 2px 0 9px; }
#page-coingift .cg-fee > div {
  position: relative; flex: 1; padding: 10px 12px 11px; border-radius: 11px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(24, 19, 14, .98), rgba(10, 8, 6, .98)) padding-box,
    linear-gradient(160deg, #D9BB80 0%, #7C551E 45%, #B58A48 75%, #6B4614 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .08), 0 4px 12px rgba(0, 0, 0, .35);
}
#page-coingift .cg-fee span { display: block; font-size: 11px; color: #A78E62; margin-bottom: 5px; letter-spacing: .04em; }
#page-coingift .cg-fee b {
  font-size: 16px; font-weight: 900; color: #F7D391; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(50, 28, 0, .8);
}

#page-coingift .cg-rate { font-size: 11px; color: #9C855C; line-height: 1.55; margin-bottom: 15px; letter-spacing: .02em; }

/* 主按钮 */
#page-coingift .cg-submit {
  position: relative; overflow: hidden;
  width: 100%; height: 56px; border-radius: 999px;
  font-size: 19px; font-weight: 900; letter-spacing: .16em; color: #3B2406;
  background: linear-gradient(180deg, #FFF3D2 0%, #F9D68F 26%, #E9B65C 52%, #C98C33 78%, #A96F22 100%);
  border: 1px solid rgba(255, 240, 200, .85);
  box-shadow: 0 12px 26px rgba(214, 150, 50, .35), 0 0 34px rgba(240, 180, 80, .24), inset 0 1.5px 0 rgba(255, 255, 255, .75), inset 0 -4px 8px rgba(120, 70, 10, .28);
}
#page-coingift .cg-submit::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 2px; height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  pointer-events: none;
}
#page-coingift .cg-submit:active { transform: scale(.985); }
#page-coingift .cg-submit[disabled] { opacity: .5; }

/* 记录列表 */
#page-coingift .cg-list, #page-cgrecds .cg-list { display: flex; flex-direction: column; gap: 10px; }
#page-coingift .cg-row, #page-cgrecds .cg-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: 14px; border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(28, 23, 18, .95), rgba(13, 10, 8, .97)) padding-box,
    linear-gradient(160deg, rgba(233, 196, 128, .55) 0%, rgba(110, 74, 23, .5) 50%, rgba(233, 196, 128, .35) 100%) border-box;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 240, 205, .06);
}
#page-coingift .cg-row-ic, #page-cgrecds .cg-row-ic {
  width: 34px; height: 34px; border-radius: 50%; flex: none; position: relative;
  background: radial-gradient(circle at 36% 30%, #FFF4CC 0%, #F2D189 34%, #D2A24A 66%, #9C6E22 100%);
  border: 2px solid rgba(120, 82, 24, .55);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .55);
}
#page-coingift .cg-row-ic svg, #page-cgrecds .cg-row-ic svg { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
/* 赠送记录行：左头像换成熊头图（保留金圈） */
#page-cgrecds .cg-row-av {
  overflow: hidden;
  background: radial-gradient(circle at 36% 30%, #4B3A22 0%, #211A12 62%, #0E0B08 100%);
}
#page-cgrecds .cg-row-av img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; transform: scale(1.04);
}
#page-cgrecds .cg-row-mid h4 .cg-row-id {
  font-style: normal; font-size: 13px; font-weight: 900;
  color: #FFD98E; letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
#page-coingift .cg-row-mid, #page-cgrecds .cg-row-mid { flex: 1; min-width: 0; }
#page-coingift .cg-row-mid h4, #page-cgrecds .cg-row-mid h4 {
  font-size: 14.5px; font-weight: 800; color: #F7E9CC;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#page-coingift .cg-row-mid h4 em, #page-cgrecds .cg-row-mid h4 em { font-style: normal; font-size: 11.5px; color: #8E8375; font-weight: 600; }
#page-coingift .cg-row-mid p, #page-cgrecds .cg-row-mid p { margin-top: 5px; font-size: 11.5px; color: #8E8375; font-variant-numeric: tabular-nums; }
#page-coingift .cg-row-val, #page-cgrecds .cg-row-val { flex: none; font-size: 16px; font-weight: 900; color: #FF9A7A; font-variant-numeric: tabular-nums; }

/* 空状态：双线金框 + 熊 + 金色文案 */
#page-cgrecds .cg-body { display: flex; flex-direction: column; }
#page-cgrecds .cg-empty {
  position: relative; flex: 0 0 auto;
  min-height: 372px; padding: 34px 22px 30px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  border-radius: 24px; border: 2px solid transparent;
  background-image:
    radial-gradient(72% 52% at 50% 40%, rgba(255, 196, 110, .09) 0%, rgba(255, 196, 110, 0) 70%),
    linear-gradient(180deg, #14110D 0%, #0C0A07 100%),
    linear-gradient(150deg, #F8ECC6 0%, #C1913F 20%, #6E4A17 46%, #E9CC92 66%, #8A5E23 88%, #EED9AC 100%);
  background-origin: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 30px rgba(233, 170, 70, .15), 0 22px 48px rgba(0, 0, 0, .55), inset 0 0 46px rgba(0, 0, 0, .55);
  overflow: hidden;
}
#page-cgrecds .cg-empty::before {
  content: ""; position: absolute; inset: 7px; border-radius: 18px;
  border: 1px solid rgba(244, 220, 170, .24);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .5), inset 0 0 22px rgba(255, 200, 110, .05);
  pointer-events: none;
}
#page-cgrecds .cg-empty::after {
  content: ""; position: absolute; left: 50%; top: 44%; width: 264px; height: 244px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 190, 90, .17), rgba(255, 190, 90, 0) 72%);
  pointer-events: none;
}
#page-cgrecds .cg-empty-art {
  position: relative; z-index: 1; width: 212px; margin-top: 6px;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .6)) drop-shadow(0 0 22px rgba(255, 190, 90, .12));
}
#page-cgrecds .cg-empty p {
  position: relative; z-index: 1;
  font-size: 15.5px; font-weight: 900; letter-spacing: .16em; text-align: center;
  background: linear-gradient(180deg, #FFF8E4 0%, #F5D69B 55%, #D8A653 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(58, 32, 0, .85));
}
#page-cgrecds .cg-empty.is-plain {
  min-height: 200px; font-size: 13px; color: #8E8375;
  letter-spacing: .02em;
}
#page-coingift .cg-pad, #page-cgrecds .cg-pad { height: 18px; }

/* =========================================================
   赠送熊币 · 确认弹窗（替代 window.confirm）
   金色切角描边 + 内嵌深色玻璃，视觉与赠送页 cg-* 一套
   ========================================================= */
.cgc-mask {
  position: fixed; inset: 0; z-index: 89;
  display: flex; align-items: center; justify-content: center;
  padding: 0 22px;
  background: rgba(5, 4, 3, .74);
  backdrop-filter: blur(3px);
  animation: cgcFade .16s ease both;
}
.cgc-mask[hidden] { display: none; }
@keyframes cgcFade { from { opacity: 0; } to { opacity: 1; } }

/* 外层金色渐变 = 描边；内层深色 = 卡面 */
.cgc-frame {
  position: relative;
  width: 100%; max-width: 306px;
  padding: 1.5px;
  background: linear-gradient(150deg, #F8E6B8 0%, #A87C35 20%, #FFEFC8 48%, #8A6426 74%, #E5C68E 100%);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px),
                     calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  filter: drop-shadow(0 20px 46px rgba(0, 0, 0, .7)) drop-shadow(0 0 22px rgba(255, 186, 84, .18));
  animation: cgcUp .26s cubic-bezier(.22, .9, .3, 1) both;
}
@keyframes cgcUp {
  from { transform: translateY(16px) scale(.95); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.cgc-box {
  position: relative;
  padding-bottom: 18px;
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px),
                     calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 196, 96, .14), rgba(0, 0, 0, 0) 60%),
    linear-gradient(170deg, #2A2419 0%, #191510 55%, #100E0B 100%);
}
.cgc-box::before {
  content: ""; position: absolute; inset: 5px;
  clip-path: inherit;
  border: 1px solid rgba(240, 210, 150, .13);
  pointer-events: none;
}

/* 标题栏 + 底部分隔线 */
.cgc-head {
  position: relative;
  padding: 20px 0 13px;
  text-align: center;
}
.cgc-head::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(233, 196, 128, 0), rgba(233, 196, 128, .72), rgba(233, 196, 128, 0));
}
.cgc-title {
  font-size: 18px; font-weight: 900; letter-spacing: .12em; text-indent: .12em;
  background: linear-gradient(180deg, #FFFBEF 0%, #FFE1A0 42%, #E9B257 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(52, 30, 0, .9));
}
.cgc-crest {
  position: absolute; top: 11px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 226, 166, .7);
  background: #0E0B08;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .6), 0 0 12px rgba(255, 186, 84, .28);
}

/* 信息行 */
.cgc-rows { padding: 15px 20px 2px; }
.cgc-row {
  display: flex; align-items: baseline; gap: 9px;
  margin-bottom: 13px;
  font-size: 15px; line-height: 1.35; color: #EBDFC6;
}
.cgc-row:last-child { margin-bottom: 0; }
.cgc-k { flex: 0 0 auto; font-weight: 700; color: #F2E2BF; }
/* 用户 ID / 赠送金额：金色小铭牌 */
.cgc-k.hl {
  padding: 2px 9px 3px;
  border-radius: 6px;
  font-size: 13.5px; font-weight: 900; color: #3A2306;
  background: linear-gradient(180deg, #FFEFC4 0%, #E7B968 58%, #C9913B 100%);
  border: 1px solid rgba(255, 240, 200, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 6px rgba(0, 0, 0, .38);
}
.cgc-row b {
  font-weight: 900; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFEFC2 0%, #F5C877 55%, #D89A3F 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(52, 30, 0, .7));
}
.cgc-row b small { font-size: 12px; font-weight: 700; letter-spacing: 0; }
.cgc-row-amt b { font-size: 20px; }

/* 按钮 */
.cgc-btns { display: flex; gap: 14px; padding: 16px 20px 0; }
.cgc-btns button {
  flex: 1; height: 44px; border-radius: 999px;
  font-family: inherit; font-size: 15.5px; font-weight: 900; letter-spacing: .14em; text-indent: .14em;
}
.cgc-cancel {
  color: #E4D5B6;
  background: rgba(255, 255, 255, .045);
  border: 1.5px solid rgba(233, 196, 128, .42);
}
.cgc-ok {
  position: relative; color: #3B2406;
  background: linear-gradient(180deg, #FFF3D2 0%, #F9D68F 26%, #E9B65C 52%, #C98C33 78%, #A96F22 100%);
  border: 1px solid rgba(255, 240, 200, .85);
  box-shadow: 0 8px 20px rgba(214, 150, 50, .35), 0 0 22px rgba(240, 180, 80, .22),
              inset 0 1.5px 0 rgba(255, 255, 255, .75), inset 0 -3px 7px rgba(120, 70, 10, .28);
}
.cgc-ok:active, .cgc-cancel:active { transform: scale(.97); }
.cgc-ok[disabled] { opacity: .55; }

/* =========================================================
   团队长数据 · 暗金数据面板（2026-11-10）
   #page-teamleader.tl-page：金描边大面板 + 2×2 金数字格 + 齿轮装饰
   ========================================================= */
#page-teamleader.tl-page { background: #0b0d12; }
#page-teamleader .subbar {
  background:
    radial-gradient(80% 160% at 50% -60%, rgba(255, 190, 90, .24), rgba(11, 13, 18, 0) 70%),
    linear-gradient(180deg, #14161d 0%, #0c0e13 100%);
  border-bottom: 1px solid rgba(226, 186, 116, .16);
}
#page-teamleader .subbar::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
  width: 54px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 138, .9), transparent);
  box-shadow: 0 0 10px rgba(255, 190, 90, .6);
}
#page-teamleader .subbar-txt h1 {
  font-family: "Songti SC", "STSong", serif;
  font-size: 22px; font-weight: 900; letter-spacing: .12em; text-indent: .12em;
  background: linear-gradient(180deg, #FFF6D8 0%, #FFE1A0 40%, #E6B45C 72%, #B47C2A 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(46, 26, 0, .9)) drop-shadow(0 0 12px rgba(255, 190, 90, .3));
}
#page-teamleader .subbar .back {
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 34%, rgba(74, 58, 34, .92), rgba(12, 10, 8, .95) 80%);
  border: 1.6px solid rgba(240, 203, 134, .85);
  box-shadow: 0 0 0 2px rgba(60, 40, 12, .5), 0 6px 16px rgba(0, 0, 0, .6),
              0 0 16px rgba(255, 180, 70, .22);
  color: #FFE7B4;
}
#page-teamleader .subbar .back svg { width: 20px; height: 20px; }
#page-teamleader .sub-body {
  background:
    radial-gradient(120% 46% at 50% 0%, rgba(64, 55, 38, .30), rgba(11, 13, 18, 0) 62%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .014) 0 2px, rgba(0, 0, 0, 0) 2px 11px),
    #0b0d12;
}

/* 舞台：承载齿轮 + 面板 */
#page-teamleader .tl-stage { position: relative; padding: 10px 2px 40px; }
#page-teamleader .tl-gear {
  position: absolute; z-index: 0; pointer-events: none;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .55));
}
#page-teamleader .tl-gear-1 { top: -30px; right: -26px; width: 124px; transform: rotate(16deg); opacity: .92; }
#page-teamleader .tl-gear-2 { left: -34px; bottom: 6px; width: 116px; transform: rotate(-20deg); opacity: .72; }
#page-teamleader .tl-gear-3 { right: -20px; bottom: -22px; width: 96px; transform: rotate(22deg); opacity: .8; }

/* 金描边大面板 */
#page-teamleader .tl-board {
  position: relative; z-index: 1;
  border-radius: 24px;
  padding: 18px;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #191b22 0%, #0f1116 100%) padding-box,
    linear-gradient(150deg, #6d5020 0%, #e9c57f 16%, #8f6b2c 34%, #f7e1aa 52%, #8f6b2c 72%, #6d5020 100%) border-box;
  box-shadow: 0 20px 42px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 243, 214, .07);
}
/* 内层细金线 */
#page-teamleader .tl-board::after {
  content: ""; position: absolute; inset: 7px; border-radius: 17px;
  border: 1px solid rgba(240, 203, 134, .26); pointer-events: none;
}

/* 2×2 网格 */
#page-teamleader .tl-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px;
}
/* 只剩「团队游戏消耗」一项时：单列整行，数字更大 */
#page-teamleader .tl-grid-single { grid-template-columns: minmax(0, 1fr); }
#page-teamleader .tl-grid-single .tl-cell { padding: 32px 10px 26px; gap: 18px; }
#page-teamleader .tl-grid-single .tl-cell b { font-size: 68px; }
#page-teamleader .tl-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  min-width: 0; overflow: hidden;
  padding: 20px 6px 16px;
  border-radius: 15px;
  border: 1px solid rgba(226, 186, 116, .28);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .018) 0 2px, rgba(0, 0, 0, 0) 2px 10px),
    linear-gradient(180deg, #171a20 0%, #101218 100%);
  box-shadow: inset 0 1px 0 rgba(255, 243, 214, .05), inset 0 0 24px rgba(0, 0, 0, .35);
}
#page-teamleader .tl-num { width: 100%; min-width: 0; text-align: center; }
/* 3D 金色数字 */
#page-teamleader .tl-cell b {
  display: inline-block; text-align: center; white-space: nowrap;
  font-size: 50px; line-height: 1; font-weight: 900; letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFAE6 0%, #FFE7A6 38%, #E4AE52 70%, #B5761F 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(64, 34, 0, .85)) drop-shadow(0 9px 12px rgba(0, 0, 0, .5));
}
/* 奶油金胶囊标签 */
#page-teamleader .tl-cell span {
  display: inline-block; max-width: 100%;
  padding: 6px 6px; border-radius: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 0; color: #3a2408;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, #FDF3D4 0%, #F3D99A 52%, #E0BA6C 100%);
  border: 1px solid rgba(255, 238, 190, .7);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4), inset 0 1px 1px rgba(255, 255, 255, .8);
}

/* ===== 团队长 · 按 ID 查团队某条线的消耗 ===== */
#page-teamleader .tl-search-wrap { position: relative; z-index: 1; margin: 4px 2px 14px; }
#page-teamleader .tl-search {
  display: flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 6px 0 14px;
  border-radius: 13px;
  background: rgba(28, 24, 19, .9);
  border: 1px solid rgba(226, 186, 116, .34);
}
#page-teamleader .tl-search:focus-within { border-color: rgba(247, 214, 150, .8); }
#page-teamleader .tl-search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  font-size: 14px; color: #F2E2C2;
}
#page-teamleader .tl-search input::placeholder { color: #7C7264; }
#page-teamleader .tl-search-btn {
  flex: 0 0 auto; height: 34px; padding: 0 14px;
  border: 0; border-radius: 9px; cursor: pointer;
  font-size: 12.5px; font-weight: 900; color: #2a1a04;
  background: linear-gradient(180deg, #FFE9B5 0%, #E7B55A 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
#page-teamleader .tl-search-btn:active { transform: scale(.96); }
#page-teamleader .tl-search-btn[disabled] { opacity: .6; }
#page-teamleader .tl-search-err { margin: 8px 2px 0; font-size: 11.5px; color: #FF9A8A; }

#page-teamleader .tl-search-card {
  margin-top: 10px; padding: 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(226, 186, 116, .3);
  background: linear-gradient(180deg, #171a21 0%, #0f1116 100%);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 243, 214, .05);
}
#page-teamleader .tl-sc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
#page-teamleader .tl-sc-id { min-width: 0; }
#page-teamleader .tl-sc-id b {
  display: block; font-size: 13.5px; font-weight: 900; color: #F3E4C2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#page-teamleader .tl-sc-close {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
  border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(226, 186, 116, .3);
  background: rgba(255, 255, 255, .04); color: #C9A867;
  font-size: 15px; line-height: 1;
}
#page-teamleader .tl-sc-nums {
  display: grid; gap: 7px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#page-teamleader .tl-sc-kv {
  min-width: 0; overflow: hidden; text-align: center; padding: 9px 4px;
  border-radius: 11px;
  border: 1px solid rgba(226, 186, 116, .16);
  background: linear-gradient(180deg, #181b22 0%, #101218 100%);
}
#page-teamleader .tl-sc-kv-main { grid-column: 1 / -1; padding: 12px 6px 11px; }
#page-teamleader .tl-sc-kv span { display: block; font-size: 10px; color: #9a8a6c; margin-bottom: 5px; }
#page-teamleader .tl-sc-kv b {
  display: inline-block; max-width: 100%;
  font-size: 16px; line-height: 1.15; font-weight: 900; color: #FFE7B4;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#page-teamleader .tl-sc-kv b.neg { color: #FF9A8A; }
#page-teamleader .tl-sc-kv-main b {
  font-size: 26px;
  background: linear-gradient(180deg, #FFFAE6 0%, #FFE7A6 38%, #E4AE52 70%, #B5761F 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(64, 34, 0, .7));
}
#page-teamleader .tl-sc-kv-main b.neg {
  background: none; -webkit-text-fill-color: #FF9A8A; filter: none;
}

/* ===== 团队消耗奖励（昨日净消耗 × 奖励比例，次日 0 点后领取） ===== */
#page-teamleader .tl-reward {
  position: relative; z-index: 1;
  margin: 4px 2px 22px;
  padding: 16px 13px 13px;
  border-radius: 20px;
  border: 1px solid rgba(226, 186, 116, .28);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .016) 0 2px, rgba(0, 0, 0, 0) 2px 11px),
    linear-gradient(180deg, #151820 0%, #0d0f14 100%);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 243, 214, .05);
}
#page-teamleader .tl-reward-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
#page-teamleader .tl-reward-title { min-width: 0; }
#page-teamleader .tl-reward-title h3 {
  margin: 0; font-size: 17px; font-weight: 900; letter-spacing: .04em;
  color: #FFE7B4;
  background: linear-gradient(180deg, #FFF6D8 0%, #FFE1A0 42%, #E6B45C 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#page-teamleader .tl-reward-yday { flex: 0 0 auto; min-width: 0; text-align: right; }
#page-teamleader .tl-reward-yday span { display: block; font-size: 10.5px; color: #9a8a6c; }
#page-teamleader .tl-reward-yday b {
  display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis;
  font-size: 24px; line-height: 1.15; font-weight: 900; color: #FFD98E;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(64, 34, 0, .55);
}
#page-teamleader .tl-reward-yday b.neg { color: #FF9A8A; }
#page-teamleader .tl-reward-yday i { display: block; font-style: normal; font-size: 10px; color: #7d7059; }

/* 单条件：比例 + 可领金额（上）/ 领取按钮（下整行） */
#page-teamleader .tl-reward-main {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 12px 12px; border-radius: 14px;
  border: 1px solid rgba(226, 186, 116, .26);
  background: linear-gradient(180deg, #181b22 0%, #101218 100%);
  box-shadow: inset 0 1px 0 rgba(255, 243, 214, .05);
}
#page-teamleader .tl-reward-kvs {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
}
/* 前端只展示「可领熊币」一项：整行居中 */
#page-teamleader .tl-reward-kvs-amt { justify-content: center; }
#page-teamleader .tl-reward-kvs-amt .tl-reward-kv-amt { width: 100%; text-align: center; }
#page-teamleader .tl-reward-kv { min-width: 0; }
#page-teamleader .tl-reward-kv span { display: block; font-size: 10.5px; color: #9a8a6c; margin-bottom: 4px; }
#page-teamleader .tl-reward-kv b {
  display: inline-block; max-width: 100%;
  font-size: 19px; line-height: 1.1; font-weight: 900; color: #FFE7B4;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#page-teamleader .tl-reward-kv-amt { min-width: 0; text-align: right; }
#page-teamleader .tl-reward-kv-amt b {
  max-width: 100%; overflow: hidden;
  font-size: 30px;
  background: linear-gradient(180deg, #FFFAE6 0%, #FFE7A6 38%, #E4AE52 70%, #B5761F 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(64, 34, 0, .7));
}
#page-teamleader .tl-reward-kv-amt b.zero { filter: none; -webkit-text-fill-color: #6d6455; }
#page-teamleader .tl-reward-btn {
  display: block; width: 100%; height: 44px; padding: 0 14px;
  border: 0; border-radius: 12px; cursor: pointer;
  font-size: 14px; font-weight: 900; white-space: nowrap; color: #2a1a04;
  background: linear-gradient(180deg, #FFE9B5 0%, #E7B55A 100%);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .7);
}
#page-teamleader .tl-reward-btn:active { transform: scale(.98); }
#page-teamleader .tl-reward-btn.wait,
#page-teamleader .tl-reward-btn.done {
  background: #2a2d35; color: #8c9099; box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .06);
  cursor: default;
}

/* ===== 随机矿机：档位在上、开启抽奖在下（2026-11-10） ===== */
#page-mining .rm-tier-grid { margin-bottom: 14px; }
#page-mining .rm-draw-btn {
  display: block;
  width: 100%;
  height: 62px;
  margin: 0;
  font-size: 19px;
  letter-spacing: 2px;
}
/* 3 列在 280px 以上都放得下；只有极窄屏才回退 2 列 */
@media (max-width: 280px) {
  #page-mining .rm-tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== 服务商 · 申请商人按钮（主视觉左下角） ===== */
#page-provider .prov-apply {
  position: absolute;
  left: 22px;
  bottom: 40px;
  height: 36px;
  min-width: 92px;
  padding: 0 15px;
  border: 0;
  border-radius: 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #3b240c;
  background: linear-gradient(180deg, #ffe49a 0%, #f2c463 46%, #c9922f 100%);
  box-shadow: 0 2px 0 rgba(116, 70, 10, .6), 0 0 16px rgba(255, 196, 80, .3), inset 0 1px 0 rgba(255, 255, 255, .6);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  z-index: 2;
}
#page-provider .prov-apply:active { transform: translateY(1px); filter: brightness(.96); }
#page-provider .prov-apply.is-on,
#page-provider .prov-apply[disabled] {
  color: #d9c9a6;
  background: linear-gradient(180deg, #4a4032 0%, #332b21 100%);
  box-shadow: inset 0 0 0 1px rgba(214, 178, 112, .45);
  cursor: default;
}
/* 申请说明弹窗补充文案 */
.pam-tip {
  margin: 10px 20px 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #b7ab95;
  text-align: left;
}
.pam-err {
  margin: 8px 20px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #ff9d8c;
  text-align: left;
}
.pam-err[hidden] { display: none; }

/* ---- 服务商 · 我的商人状态条（申请退回保证金 / 撤销申请） ---- */
#page-provider .prov-mine {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, #211d18 0%, #17140f 100%);
  box-shadow: 0 0 0 1px rgba(198, 160, 98, .45), inset 0 1px 0 rgba(255, 236, 190, .05);
}
#page-provider .prov-mine[hidden] { display: none; }
#page-provider .prov-mine-txt { flex: 1; min-width: 0; }
#page-provider .prov-mine-txt b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #f6f1e6;
}
#page-provider .prov-mine-txt span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #a8a196;
}
#page-provider .prov-mine.is-pending .prov-mine-txt b { color: #f2c463; }
#page-provider .prov-mine-btn {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 13px;
  border: 0;
  border-radius: 16px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: #3b240c;
  background: linear-gradient(180deg, #ffe49a 0%, #f2c463 46%, #c9922f 100%);
  box-shadow: 0 1px 0 rgba(116, 70, 10, .55), inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
#page-provider .prov-mine-btn:active { transform: translateY(1px); filter: brightness(.96); }
#page-provider .prov-mine-btn.is-cancel {
  color: #e8e0d0;
  background: linear-gradient(180deg, #3a332a 0%, #26211a 100%);
  box-shadow: inset 0 0 0 1px rgba(214, 178, 112, .5);
}
/* 状态条出现后，列表与状态条之间的间距收紧 */
#page-provider .prov-mine:not([hidden]) + .prov-list { margin-top: 12px; }

/* =========================================================
   实名认证（2026-11-10）
   —— 页面复用 .tech-page 的黑金底与 .gold-field 输入卡，
      这里只补状态卡、间距和未实名提示弹窗，全部为追加块
   ========================================================= */
.rn-page .sub-body { padding: 18px 16px calc(34px + env(safe-area-inset-bottom, 0px)); }

/* ---------- 认证说明 ---------- */
.rn-page .rn-tip {
  margin-bottom: 16px;
  padding: 14px 15px 15px;
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 196, 110, .12), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, rgba(35, 29, 20, .92) 0%, rgba(14, 12, 10, .92) 100%);
  border: 1px solid rgba(214, 178, 112, .28);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .12);
}
.rn-page .rn-tip b {
  display: block;
  margin-bottom: 7px;
  font-size: 13px; font-weight: 800; letter-spacing: 1px;
  color: #EFD6A2;
}
.rn-page .rn-tip p {
  margin: 0;
  font-size: 12px; line-height: 1.75; letter-spacing: .2px; color: #9B8F7C;
}

/* ---------- 表单 ---------- */
.rn-page .rn-field { margin-top: 14px; }
.rn-page .rn-field input { text-transform: uppercase; }
.rn-page .rn-submit {
  margin-top: 22px;
  height: 50px;
  padding: 0;
  border-radius: 14px;
  font-size: 16.5px; font-weight: 800; letter-spacing: 3px;
  color: #3B2707;
  background: linear-gradient(180deg, #FFF6DA 0%, #F4D79A 20%, #E2B563 48%, #BF8C3D 76%, #E7C078 100%);
  border: 1px solid rgba(255, 236, 186, .8);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, .55),
    0 8px 24px rgba(196, 132, 44, .34),
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -3px 8px rgba(120, 80, 20, .30);
  text-shadow: 0 1px 0 rgba(255, 250, 230, .5);
  -webkit-tap-highlight-color: transparent;
}
.rn-page .rn-submit:active { transform: scale(.985); filter: brightness(1.05); }
.rn-page .rn-submit:disabled { opacity: .62; filter: saturate(.6); }
.rn-page .agree {
  margin-top: 16px;
  text-align: left;
  font-size: 11.5px; line-height: 1.7; letter-spacing: .2px; color: #857A67;
}

/* ---------- 已认证 / 已取消 状态卡 ---------- */
.rn-page .rn-state {
  position: relative;
  margin-bottom: 18px;
  padding: 22px 18px 19px;
  text-align: center;
  border-radius: 16px;
  border: 1.5px solid transparent;
  background:
    radial-gradient(100% 78% at 50% 0%, rgba(255, 200, 116, .14), rgba(0, 0, 0, 0) 66%) padding-box,
    linear-gradient(180deg, #1A1510 0%, #0C0B0A 100%) padding-box,
    linear-gradient(150deg, #F7E7BC 0%, #9C7431 18%, #FFEFC9 38%, #8A6325 60%, #E8CB93 78%, #A57B36 100%) border-box;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .5), 0 0 22px rgba(230, 175, 80, .10);
}
.rn-page .rn-state-ico {
  width: 52px; height: 52px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #6BE39A;
  background: radial-gradient(circle at 50% 34%, rgba(107, 227, 154, .22), rgba(0, 0, 0, 0) 74%);
  border: 1px solid rgba(107, 227, 154, .42);
  box-shadow: 0 0 18px rgba(80, 214, 134, .28), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.rn-page .rn-state-ico svg { width: 27px; height: 27px; }
.rn-page .rn-state-ico.revoked {
  color: #F08A72;
  background: radial-gradient(circle at 50% 34%, rgba(240, 138, 114, .22), rgba(0, 0, 0, 0) 74%);
  border-color: rgba(240, 138, 114, .42);
  box-shadow: 0 0 18px rgba(214, 76, 48, .28), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.rn-page .rn-state h2 {
  margin: 0 0 8px;
  font-size: 17px; font-weight: 800; letter-spacing: 1.6px;
  background: linear-gradient(180deg, #FFF8E6 0%, #F6DEA6 44%, #D9A957 78%, #B98A3C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(190, 130, 40, .3));
}
.rn-page .rn-state p {
  margin: 0;
  font-size: 12.5px; line-height: 1.7; letter-spacing: .3px; color: #A8997F;
  font-variant-numeric: tabular-nums;
}
.rn-page .rn-state-time { margin-top: 7px !important; font-size: 11.5px !important; color: #7C7160 !important; }

/* ---------- 未实名提示弹窗 ---------- */
.rn-mask {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  background: rgba(2, 2, 3, .78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.rn-mask[hidden] { display: none; }
.rn-ask {
  position: relative;
  width: 100%; max-width: 320px;
  padding: 24px 20px 18px;
  text-align: center;
  border-radius: 18px;
  border: 1.5px solid transparent;
  background:
    radial-gradient(100% 74% at 50% 0%, rgba(255, 200, 116, .16), rgba(0, 0, 0, 0) 68%) padding-box,
    linear-gradient(180deg, #221C14 0%, #0C0B0A 100%) padding-box,
    linear-gradient(150deg, #F7E7BC 0%, #9C7431 18%, #FFEFC9 38%, #8A6325 60%, #E8CB93 78%, #A57B36 100%) border-box;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 30px rgba(230, 175, 80, .12);
  animation: rnAskIn .22s ease-out both;
}
@keyframes rnAskIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.rn-ask-crest {
  width: 56px; height: 56px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #F3D79C;
  background: radial-gradient(circle at 50% 32%, rgba(255, 214, 150, .22), rgba(0, 0, 0, 0) 76%);
  border: 1px solid rgba(235, 197, 126, .45);
  box-shadow: 0 0 20px rgba(240, 190, 100, .26), inset 0 1px 0 rgba(255, 236, 190, .24);
}
.rn-ask-crest svg { width: 29px; height: 29px; }
.rn-ask h3 {
  margin: 0 0 10px;
  font-size: 18px; font-weight: 800; letter-spacing: 1.6px;
  background: linear-gradient(180deg, #FFF8E6 0%, #F6DEA6 44%, #D9A957 78%, #B98A3C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(190, 130, 40, .32));
}
.rn-ask p {
  margin: 0 0 20px;
  font-size: 12.5px; line-height: 1.78; letter-spacing: .2px; color: #A2967F;
}
.rn-ask-btns { display: flex; gap: 10px; }
.rn-ask-btns button {
  flex: 1; height: 44px;
  border: 0; border-radius: 12px;
  font-family: inherit; font-size: 14.5px; font-weight: 800; letter-spacing: 1.2px;
  -webkit-tap-highlight-color: transparent;
}
.rn-ask-later {
  color: #C9B89A;
  background: linear-gradient(180deg, #2E2820 0%, #1B1713 100%);
  box-shadow: inset 0 0 0 1px rgba(214, 178, 112, .34);
}
.rn-ask-go {
  color: #3B2707;
  background: linear-gradient(180deg, #FFF6DA 0%, #F4D79A 20%, #E2B563 52%, #BF8C3D 80%, #E7C078 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.rn-ask-btns button:active { transform: translateY(1px); filter: brightness(.97); }

/* =========================================================
   实名认证提示弹窗 v2（2026-11-10）：按设计图重做
   —— 框体 / 熊头徽章 / 标题 / 正文直接用设计图（1307×1122），
      两个烘焙按钮已从图里抹掉，只留一个居中金色 CTA
   ========================================================= */
.rn-mask {
  padding: 16px;
  background: rgba(2, 2, 3, .80);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.rn-ask {
  position: relative;
  width: 318px;
  height: 273px;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: 0 26px 68px rgba(0, 0, 0, .72);
  animation: rnAskIn .22s ease-out both;
}
.rn-ask-art {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
/* 单个金色 CTA：位置/尺寸/倒角都按设计图量出来的比例 */
.rn-ask .rn-ask-go {
  position: absolute;
  left: 23.9px;
  right: 23.9px;
  bottom: 25.8px;
  height: 41.6px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  clip-path: polygon(8.8px 0, calc(100% - 8.8px) 0, 100% 8.8px, 100% calc(100% - 8.8px),
                     calc(100% - 8.8px) 100%, 8.8px 100%, 0 calc(100% - 8.8px), 0 8.8px);
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  text-indent: 2px;
  color: #40280e;
  /* 渐变按设计图右按钮逐行实测值取点：上偏白 → 中段琥珀 → 70% 最深 → 底部亮边 */
  background:
    linear-gradient(180deg,
      #F5E1C8 0%, #FDFEEE 10%, #FCFBD9 20%, #FBE6AC 30%,
      #F2C77F 40%, #D2A058 50%, #B78541 60%, #B17F3C 70%,
      #C8954B 80%, #FDF7C7 90%, #E8C085 96%, #C79A55 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .95),
    inset 0 0 0 1px rgba(58, 33, 6, .38),
    inset 0 -3px 4px rgba(120, 70, 14, .40);
  /* 细暗描边 + 落影：clip-path 会裁掉外阴影，用两层 drop-shadow 模拟 */
  filter: drop-shadow(0 0 .6px rgba(24, 13, 2, .95)) drop-shadow(0 3px 6px rgba(0, 0, 0, .5));
  text-shadow: 0 1px 0 rgba(255, 250, 228, .55);
  -webkit-tap-highlight-color: transparent;
}
.rn-ask .rn-ask-go:active { filter: brightness(1.04) saturate(1.02); transform: translateY(.5px); }
/* === rn-ask v2 end === */
/* =========================================================
   忘记密码 · 黑金版（2026-11-10）
   —— 与登录页同一套金冠熊徽章 / 金框输入 / 金色主按钮
   —— 只追加覆盖，不动原 .reset-* 基础块
   ========================================================= */
#page-reset.reset-page {
  background:
    radial-gradient(58% 36% at 94% 6%, rgba(46, 60, 104, .30) 0%, rgba(7, 7, 8, 0) 62%),
    radial-gradient(96% 46% at 50% 106%, rgba(198, 142, 54, .30) 0%, rgba(7, 7, 8, 0) 68%),
    linear-gradient(180deg, #070708 0%, #0b0a09 48%, #14100b 100%);
}
#page-reset .reset-body {
  top: 0;
  padding: calc(11.5vw + env(safe-area-inset-top, 0px)) 5.9vw calc(9vw + env(safe-area-inset-bottom, 0px));
  text-align: center;
}

/* 左上角金色圆形返回键 */
#page-reset .reset-back {
  position: absolute;
  top: calc(3.4vw + env(safe-area-inset-top, 0px));
  left: 3.9vw;
  width: 8.8vw; height: 8.8vw;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #f2d393;
  background: radial-gradient(circle at 50% 32%, rgba(255, 214, 150, .14), rgba(255, 255, 255, .02) 78%);
  border: 1px solid rgba(235, 197, 126, .55);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .22), 0 4px 14px rgba(0, 0, 0, .55);
  z-index: 3;
}
#page-reset .reset-back:active { background: rgba(255, 214, 150, .22); transform: scale(.94); }
#page-reset .reset-back svg { width: 4.6vw; height: 4.6vw; }

/* 品牌：徽章 + 标题竖排居中 */
#page-reset .reset-brand {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 0;
}
#page-reset .reset-brand-logo {
  width: 19.7vw; height: 21.3vw;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .7)) drop-shadow(0 0 18px rgba(220, 168, 80, .20));
}
#page-reset .reset-brand-name {
  margin-top: 2.4vw;
  font-size: 8.2vw; font-weight: 900;
  letter-spacing: .06em; line-height: 1.05;
  background: linear-gradient(180deg, #fff8e2 0%, #f3d894 38%, #d5a94b 68%, #a5761f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(52, 26, 0, .75)) drop-shadow(0 0 14px rgba(220, 168, 80, .35));
}
#page-reset .reset-brand-sub {
  margin-top: 1.8vw;
  font-size: 3.7vw;
  letter-spacing: .12em;
  color: #c9a866;
}

/* 表单 */
#page-reset .reset-form {
  display: flex; flex-direction: column;
  gap: 5.2vw;
  margin-top: 13vw;
  text-align: left;
}

/* 金框输入条 */
#page-reset .reset-field {
  position: relative;
  display: flex; align-items: center;
  gap: 4vw;
  height: 15.6vw;
  padding: 0 4.4vw;
  border-radius: 3vw;
  border: 1.4px solid transparent;
  background:
    linear-gradient(180deg, rgba(32, 28, 23, .94) 0%, rgba(16, 14, 12, .94) 100%) padding-box,
    linear-gradient(150deg, #c4a76d 0%, #6f5730 20%, #dcc28b 40%, #7d6236 62%, #c1a46d 82%, #7a5f33 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, .10),
    0 4px 14px rgba(0, 0, 0, .32);
  transition: border-color .18s ease, box-shadow .18s ease;
}
/* 碳纤斜纹（只铺内层，不吃文字点击） */
#page-reset .reset-field::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 1px, rgba(0, 0, 0, 0) 1px 6px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .22) 0 1px, rgba(0, 0, 0, 0) 1px 6px);
}
#page-reset .reset-field:focus-within {
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(38, 33, 27, .96) 0%, rgba(19, 16, 13, .96) 100%) padding-box,
    linear-gradient(150deg, #ffe9bc 0%, #a87f38 18%, #fff4d4 38%, #95702d 60%, #f1d9a4 78%, #b98f49 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, .18),
    0 0 0 2px rgba(230, 180, 90, .12),
    0 4px 16px rgba(0, 0, 0, .36);
}

#page-reset .reset-lb {
  flex: 0 0 auto;
  font-size: 4.1vw; font-weight: 800;
  letter-spacing: .02em;
  color: #f8f1e1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
#page-reset .reset-field input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  background: none; border: 0; outline: none;
  font-size: 4.1vw; font-weight: 600;
  color: #fbf6ea;
  caret-color: #f2d188;
  text-align: left;
}
#page-reset .reset-field input::placeholder {
  color: #6f6c66; font-weight: 400; font-size: 3.9vw;
}

/* 密码两行：标签在上、输入在下 */
#page-reset .reset-field.col {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.2vw;
  padding: 2vw 4.4vw;
}
#page-reset .reset-field.col .reset-lb { font-size: 3.9vw; }

/* 获取验证码 */
#page-reset .reset-sms {
  flex: 0 0 auto;
  height: 7.8vw;
  padding: 0 3.2vw;
  border-radius: 2.2vw;
  font-size: 3.4vw; font-weight: 700;
  color: #f0cf8b;
  background: rgba(230, 180, 90, .10);
  border: 1px solid rgba(206, 170, 112, .55);
  transition: opacity .16s ease;
}
#page-reset .reset-sms[disabled] { opacity: .45; }

/* 提示 */
#page-reset .reset-hint {
  margin-top: 0;
  border-radius: 2.6vw;
  font-size: 3.4vw;
  color: #b9986a;
  background: rgba(230, 180, 90, .06);
  border: 1px dashed rgba(206, 170, 112, .3);
}
#page-reset .reset-hint b { color: #f7d98f; }

/* 确定：金色胶囊主按钮 */
#page-reset .btn-reset-submit {
  display: block;
  width: 100%;
  margin-top: 16vw;
  height: 13.8vw;
  border-radius: 999px;
  font-size: 5.2vw; font-weight: 900;
  letter-spacing: .14em; text-indent: .14em;
  color: #3f2708;
  background: linear-gradient(180deg, #f9e6b4 0%, #ecc97f 24%, #d8ab5c 48%, #b8863a 70%, #d9b163 88%, #f3dca2 100%);
  border: 1px solid rgba(255, 236, 190, .60);
  box-shadow:
    0 12px 30px rgba(214, 160, 60, .40),
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -3px 7px rgba(120, 70, 12, .35);
  text-shadow: 0 1px 0 rgba(255, 250, 228, .55);
  transition: transform .16s ease, filter .16s ease, opacity .16s ease;
}
#page-reset .btn-reset-submit:active { transform: scale(.985); filter: brightness(1.06); }
#page-reset .btn-reset-submit[disabled] {
  color: #8d8377;
  background: linear-gradient(180deg, #36322c, #26231f);
  border-color: rgba(150, 130, 100, .3);
  box-shadow: none;
  opacity: 1;
}

/* 返回登录 */
#page-reset .reset-backlogin {
  display: block;
  margin: 5.5vw auto 0;
  padding: 2vw 3vw;
  font-size: 3.85vw; font-weight: 600;
  letter-spacing: .06em;
  color: #c9a866;
}
#page-reset .reset-backlogin:active { color: #f2d188; }

/* ===== 实物暴富卡片右上角说明（fgtip-20261110） ===== */
#page-group .fg-top { display: flex; align-items: center; gap: 8px; }
#page-group .fg-top .fg-name { flex: 1 1 auto; min-width: 0; }
#page-group .fg-tip {
  flex: 0 0 auto; max-width: 52%;
  font-size: 10.5px; font-weight: 800; line-height: 1.6;
  color: #F3D080;
  background: rgba(226, 186, 116, .12);
  border: 1px solid rgba(226, 186, 116, .42);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== 实物暴富卡片「说明」入口（fgrules-20261110） ===== */
#page-group .fg-top .fg-rules { flex: 0 0 auto; }
#page-group .fg-top .fg-rules svg { width: 14px; height: 14px; }

/* ---------- 卡槽点击反馈（2026-11-10）：空槽 / 有卡槽都可点 ---------- */
#page-card .cd3-slotcell[data-cd-slot-empty],
#page-card .cd3-slotcell[data-cd-slot-card] { cursor: pointer; }