/* ==========================================================
   点单端 · Q77 电竞 UI 主题（1:1 复刻 Q77 电竞）
   视觉要素（对照参考站截图与原站 CSS）：
     - 浅灰底 #F5F5F5 + 奶油渐变顶栏
     - 白色搜索胶囊（灰字占位）+ 右侧圆形 LOGO
     - 彩色规则横幅（蓝底彩字，复刻「Q77电竞俱乐部补偿机制」卡）
     - 圆形分类图标行（白底圆 + 投影 + 底部文字）
     - 胶囊筛选条（白底，选中黑底白字）
     - 双列白卡商品流（红色价格 + 已售）
     - 毛玻璃底部导航（Q77 svg 图标）
   主题色通过 --th 等 CSS 变量与后台配色联动。
   ========================================================== */
.q77-theme {
  --q77-bg: #F5F5F5;
  --q77-card: #FFFFFF;
  --q77-red: #F53F3F;
  --q77-text: #262626;
  --q77-text2: #8C8C8C;
  --q77-line: rgba(0, 0, 0, .06);
  --q77-blue: #3D7EF2;
}

/* ---------- 整体容器 ---------- */
.q77-wrap {
  /* 作为 .page（flex column）的唯一子元素时，自行承担滚动容器职责 */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box;
  background: var(--q77-bg);
  color: var(--q77-text);
  padding-bottom: 16px;
}

/* ---------- 顶栏：奶油渐变 + 搜索胶囊 + 圆形 LOGO ---------- */
.q77-top {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 12px;
  background: linear-gradient(180deg, #FEF9EC 0%, #FDF6E4 14%, #F8F5EC 38%, #F0EEEA 68%, #F5F5F5 100%);
}
.q77-search {
  flex: 1; min-width: 0; height: 36px;
  display: flex; align-items: center; gap: 6px;
  background: #fff; border-radius: 999px;
  padding: 0 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  color: #B8B2A6; font-size: 14px;
  cursor: pointer;
}
.q77-search-ico { width: 18px; height: 18px; flex: none; }
.q77-search svg { width: 16px; height: 16px; flex: none; }
.q77-side {
  width: 36px; height: 36px; flex: none;
  border-radius: 50%; overflow: hidden;
  background: #111; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.q77-side img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 页标题（消息 / 我的） ---------- */
.q77-pagetitle {
  padding: 14px 14px 4px;
  font-size: 19px; font-weight: 800;
  background: linear-gradient(180deg, #FEF9EC 0%, #F5F5F5 100%);
}

/* ---------- 规则横幅 ---------- */
/* 首页轮播图（后台轮播图自动轮播） */
.q77-swiper { position: relative; margin: 0 12px 10px; height: 132px; border-radius: 12px; overflow: hidden; cursor: pointer; background: #EFEFEF; }
.q77-swiper img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation-name: q77sw; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes q77sw { 0% { opacity: 0 } 4% { opacity: 1 } 25% { opacity: 1 } 32% { opacity: 0 } 100% { opacity: 0 } }
.q77-sw-dots { position: absolute; right: 10px; bottom: 8px; display: flex; gap: 5px; z-index: 2; }
.q77-sw-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55); transition: all .25s; }
.q77-sw-dots i.on { background: #fff; width: 14px; border-radius: 4px; }

.q77-banner { margin: 0 12px 10px; border-radius: 10px; overflow: hidden; cursor: pointer; }
.q77-banner img { width: 100%; display: block; }
.q77-banner-txt {
  background: linear-gradient(160deg, #4D8DF7 0%, #3D6EE8 100%);
  padding: 12px 14px;
  box-shadow: 0 4px 14px rgba(61, 110, 232, .25);
}
.q77-banner-txt b {
  display: block; text-align: center;
  color: #FFE24D; font-size: 17px; font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  margin-bottom: 6px;
}
.q77-banner-txt span {
  display: block; color: #fff; font-size: 12px; font-weight: 700;
  line-height: 1.7;
}
.q77-banner-txt span:nth-child(odd) { color: #BFF0FF; }

/* ---------- 圆形分类图标行 ---------- */
.q77-cats {
  display: flex; gap: 4px; overflow-x: auto;
  padding: 2px 10px 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.q77-cats::-webkit-scrollbar { display: none; }
.q77-cat {
  flex: none; width: 64px;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
}
.q77-cat-ic {
  width: 52px; height: 52px; border-radius: 50%;
  background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .07);
  transition: transform .18s ease;
}
.q77-cat-ic img { width: 100%; height: 100%; object-fit: cover; }
.q77-cat:active .q77-cat-ic { transform: scale(.93); }
.q77-cat b {
  margin-top: 5px; font-size: 11px; color: #444; font-weight: 600;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.q77-cat.on .q77-cat-ic { box-shadow: 0 0 0 2px var(--th, #FF7A1A), 0 3px 10px rgba(0, 0, 0, .1); }
.q77-cat.on b { color: var(--th, #FF7A1A); }

/* ---------- 胶囊筛选条 ---------- */
.q77-pills {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 12px 10px;
  overflow-x: auto; white-space: nowrap;
  scrollbar-width: none;
}
.q77-pills::-webkit-scrollbar { display: none; }
.q77-pill {
  flex: none; height: 30px; line-height: 30px;
  padding: 0 15px; border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .04);
  font-size: 13px; color: #444; font-weight: 600;
  cursor: pointer;
}
.q77-pill.on {
  background: #111; color: #fff;
  box-shadow: none;
}
.q77-pill-menu {
  flex: none; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .05);
  cursor: pointer;
}
.q77-pill-menu svg { width: 16px; height: 16px; }

/* ---------- 双列商品流 ---------- */
.q77-goods {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; padding: 0 12px;
}
.q77-card {
  background: var(--q77-card); border-radius: 10px; overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .04);
}
.q77-card-cover { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #F0F0F0; }
.q77-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q77-card-bad, .q77-card-seckill, .q77-card-out {
  position: absolute; top: 6px; left: 6px;
  padding: 2px 7px; border-radius: 4px;
  font-size: 10px; font-weight: 800; color: #fff;
}
.q77-card-bad { background: linear-gradient(135deg, #FF9D2E, #FF6A00); }
.q77-card-seckill { background: linear-gradient(135deg, #FF4D4F, #E02020); }
.q77-card-out { background: rgba(0, 0, 0, .62); }
.q77-card-body { padding: 8px 9px 10px; }
.q77-card-name {
  font-size: 13px; font-weight: 700; color: var(--q77-text);
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.q77-card-desc {
  margin-top: 3px; font-size: 11px; color: var(--q77-text2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.q77-card-foot { margin-top: 7px; display: flex; align-items: baseline; gap: 5px; }
.q77-card-price { color: var(--q77-red); font-size: 16px; font-weight: 900; }
.q77-card-price i { font-style: normal; font-size: 11px; font-weight: 800; margin-right: 1px; }
.q77-card-old { color: #BFBFBF; font-size: 11px; text-decoration: line-through; }
.q77-card-old i { font-style: normal; }
.q77-card-sold { margin-left: auto; font-size: 10px; color: #B5B5B5; }
.q77-card-sold.out { color: var(--q77-red); font-weight: 700; }
.q77-empty { grid-column: 1 / -1; text-align: center; color: #B5B5B5; font-size: 13px; padding: 40px 0; }

/* ---------- 我的页 ---------- */
.q77-mine { margin: 10px 12px 0; }
.q77-mine-user {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(160deg, #FEF9EC 0%, #fff 70%);
  border-radius: 14px; padding: 16px 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}
.q77-mine-ava {
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
  background: #EEE; flex: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}
.q77-mine-name { font-size: 17px; font-weight: 800; }
.q77-mine-id { font-size: 11.5px; color: var(--q77-text2); margin-top: 3px; }
.q77-mine-bal { margin-left: auto; text-align: right; cursor: pointer; }
.q77-mine-bal b { color: var(--q77-red); font-size: 19px; font-weight: 900; }
.q77-mine-bal span { display: block; font-size: 11px; color: var(--q77-text2); }
.q77-mine-card {
  margin-top: 10px; background: #fff; border-radius: 14px;
  padding: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}
.q77-mine-card-t { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.q77-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px; margin-top: 10px;
}
.q77-mine-card:last-child .q77-grid { grid-template-columns: repeat(4, 1fr); }
.q77-grid-item { text-align: center; cursor: pointer; }
.q77-grid-item img { width: 27px; height: 27px; object-fit: contain; }
.q77-grid-item span { display: block; font-size: 10.5px; color: #595959; margin-top: 4px; }
.q77-grid-item:active { transform: scale(.94); }

/* ---------- 消息页 ---------- */
.q77-msg {
  margin: 10px 12px 0; background: #fff; border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05); overflow: hidden;
}
.q77-msg-row {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; border-bottom: 1px solid var(--q77-line);
  cursor: pointer;
}
.q77-msg-row:last-child { border-bottom: none; }
.q77-msg-row img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.q77-msg-row b { font-size: 14px; }
.q77-msg-row span { display: block; font-size: 11.5px; color: var(--q77-text2); margin-top: 2px; }
.q77-msg-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--q77-red); color: #fff;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
}

/* ---------- 底部导航（Q77 液态玻璃胶囊 · 参考站 1:1） ---------- */
body.q77-on #tabbar {
  position: fixed; left: 14px; right: 14px; bottom: 10px; z-index: 1200;
  display: block; background: transparent; border-top: 0; padding: 0;
  box-shadow: none; pointer-events: none;
}
body.q77-on .q77-wrap { padding-bottom: 92px !important; }
/* touch-action:none —— 必须由 JS 全权处理横向拖拽，
   否则浏览器判定为"水平滚动"会立刻派发 pointercancel，手势直接失效 */
.ql-bar { position: relative; width: 100%; height: 62px; pointer-events: auto; touch-action: none; }
.ql-glass {
  position: absolute; inset: 0; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(14px) saturate(1.9) brightness(1.06);
  backdrop-filter: blur(14px) saturate(1.9) brightness(1.06);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.25), inset 0 .5px 0 rgba(255,255,255,.85),
    0 8px 24px -8px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.06);
}
.ql-glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90px 60px at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.35), rgba(255,255,255,0) 70%);
  opacity: .9; transition: opacity .3s ease;
}
.ql-tabs {
  position: absolute; inset: 4px; z-index: 2;
  display: grid; grid-template-columns: repeat(var(--ql-n, 5), 1fr);
}
.ql-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10px; font-weight: 500; color: #8a8a8a; line-height: 1.15;
  -webkit-tap-highlight-color: transparent; transition: transform .25s cubic-bezier(.22,1,.36,1), color .25s ease;
}
.ql-tab.on { color: var(--q77-gold, #e6b422); font-weight: 700; transform: scale(1.08); }
.ql-tab .q77-tab-ic { width: 21px; height: 21px; display: block; }
.ql-tab .tab-badge {
  position: absolute; top: 6px; margin-left: 18px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px; background: #ef4444; color: #fff; font-size: 9px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(255,255,255,.95);
}
.ql-lens {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; z-index: 1; border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,246,214,.65));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9), inset 0 -1px 1px rgba(230,180,34,.18), 0 6px 18px -6px rgba(230,180,34,.35);
  transition: left .45s cubic-bezier(.22,1,.36,1), width .45s cubic-bezier(.22,1,.36,1);
  pointer-events: none; will-change: left, width;
}
.ql-lens::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.15) 35%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 65%, rgba(255,255,255,.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) exclude, linear-gradient(#000 0 0);
  opacity: .9;
}
body.q77-on #tabbar.hidden { display: none; }
body.q77-on #tabbar .tab { display: none; }
body.q77-on #tabbar .shop-pick-slot { display: none; }

/* 「更多」面板（Q77） */
.q77-sheet-mask {
  position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,.35);
  opacity: 0; transition: opacity .25s ease; pointer-events: auto;
}
.q77-sheet-mask.show { opacity: 1; }
.q77-sheet {
  position: fixed; left: 14px; right: 14px; bottom: 84px; z-index: 1301;
  background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%); border-radius: 22px; padding: 16px 14px 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18), inset 0 .5px 0 rgba(255,255,255,.9);
  transform: translateY(16px); opacity: 0; transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.q77-sheet.show { transform: translateY(0); opacity: 1; }
.q77-sheet-t { font-size: 13px; font-weight: 800; color: #2B2B2B; padding: 0 4px 10px; }
.q77-sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 2px; }
.q77-sheet-it { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 2px; border-radius: 14px; }
.q77-sheet-it:active { background: rgba(0,0,0,.05); }
.q77-sheet-it img { width: 34px; height: 34px; border-radius: 9px; display: block; object-fit: cover; }
.q77-sheet-it span { font-size: 10.5px; color: #4a4a4a; }
.q77-sheet-x { width: 100%; height: 40px; margin-top: 6px; border: 0; border-radius: 14px; background: rgba(0,0,0,.05); color: #666; font-size: 13px; }

/* ---------- Q77 我的页（参考站 1:1：米黄底 + 黄丝带卡） ---------- */
.q77-my { background: #f5f5f5; min-height: 100%; padding-bottom: 100px; }
.q77-my-hd {
  padding: 20px 16px 26px;
  background: linear-gradient(180deg, #fef9ec, #fdf6e4 22%, #f9f4e6 46%, #f2f0e9 72%, #f5f5f5);
}
.q77-my-user { display: flex; align-items: center; padding: 4px 4px 6px; }
.q77-my-ava {
  width: 78px; height: 78px; border-radius: 50%; object-fit: cover; margin-right: 12px;
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.08); flex-shrink: 0;
}
.q77-my-name { font-size: 20px; font-weight: 800; color: #111; line-height: 1.35; }
.q77-my-id { font-size: 11.5px; color: #8a8578; margin-top: 3px; }
.q77-my-login { color: #cfa018; }
.q77-my-card {
  position: relative; margin: 0 12px 12px; background: #fff; border-radius: 18px;
  padding: 22px 14px 14px; box-shadow: 0 2px 12px rgba(160,158,200,.12);
}
.q77-ribbon {
  position: absolute; top: -2px; left: 14px; height: 22px; padding: 0 12px 0 8px;
  background: linear-gradient(135deg, #ffd75e, #f5c518);
  color: #4a3b0c; font-size: 12.5px; font-weight: 800; letter-spacing: .08em;
  display: flex; align-items: center; border-radius: 6px 2px 8px 2px;
  filter: drop-shadow(0 1px 3px rgba(207,160,24,.35));
}
.q77-ribbon::after {
  content: ""; position: absolute; right: -6px; top: 0; bottom: 0; width: 7px;
  background: linear-gradient(135deg, #f5c518, #e0af10);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 45% 50%);
}
.q77-ribbon-r { position: absolute; top: 10px; right: 14px; font-size: 11.5px; color: #9a958a; }
.q77-my-acts { display: flex; justify-content: space-between; padding: 2px 4px; }
.q77-my-act { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 20%; }
.q77-my-act img { width: 34px; height: 34px; display: block; object-fit: contain; }
.q77-my-act span { font-size: 11px; color: #555; }
.q77-my-act em { font-style: normal; position: absolute; transform: translate(14px, -3px); min-width: 15px; height: 15px; padding: 0 4px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; }
.q77-my-act { position: relative; }
.q77-my-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 12px 12px; }
.q77-my-duo-card {
  position: relative; background: #fff; border-radius: 16px; padding: 12px 12px 12px 14px;
  display: flex; align-items: center; gap: 9px; box-shadow: 0 2px 12px rgba(160,158,200,.12);
}
.q77-my-duo-ic { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.q77-my-duo-ic img { width: 38px; height: 38px; object-fit: contain; display: block; }
.q77-my-duo-ic.bal { background: linear-gradient(135deg, #ffe9e0, #ffd0bd); }
.q77-my-duo-ic.kefu { background: linear-gradient(135deg, #e3f0ff, #c9e2ff); }
.q77-my-duo b { display: block; font-size: 13.5px; color: #222; font-weight: 800; }
.q77-my-duo span { display: block; font-size: 10.5px; color: #9a958a; margin-top: 2px; }
.q77-my-duo .num { font-size: 15px; font-weight: 800; color: #222; }
.q77-my-duo-arrow { margin-left: auto; color: #c9c4b8; font-size: 14px; }
.q77-my-ft { text-align: center; padding: 22px 0 26px; font-size: 10px; color: #c9c4b8; line-height: 1.9; letter-spacing: .04em; }

/* ---------- Q77「更多」= 打手列表（参考站 more 1:1） ---------- */
.qm-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 92px !important; }
.qm-search {
  display: flex; align-items: center; gap: 8px; margin: 4px 14px 10px; padding: 9px 14px;
  background: rgba(255,255,255,.85); border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.qm-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.qm-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; color: #333; }
.qm-tabs { display: flex; gap: 8px; padding: 0 14px 10px; }
.qm-tab {
  padding: 7px 22px; border-radius: 12px; background: rgba(255,255,255,.8); font-size: 13px; color: #555; font-weight: 600;
}
.qm-tab.on { background: #2b2b2b; color: #fff; }
.qm-list { display: flex; flex-direction: column; gap: 10px; padding: 0 12px; }
.qm-card {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 13px 12px 13px 16px;
  background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.qm-strip { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.qm-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #f3e3e8; }
.qm-info { flex: 1; min-width: 0; }
.qm-row1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qm-row1 b { font-size: 14.5px; font-weight: 800; color: #232323; }
.qm-sex { font-size: 10px; padding: 2px 8px; border-radius: 999px; }
.qm-sex.m { color: #4aa3f0; background: rgba(74,163,240,.12); }
.qm-sex.f { color: #f26ba5; background: rgba(242,107,165,.12); }
.qm-score { font-size: 12px; color: #f5a623; font-weight: 700; margin-left: auto; }
.qm-row2 { margin-top: 5px; }
.qm-lv { font-size: 11px; color: #f5a623; font-weight: 700; }
.qm-sign { font-size: 11.5px; color: #999; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-state { font-size: 12px; font-weight: 700; color: #16a34a; flex-shrink: 0; }
.qm-state { margin-left: auto; }
.qm-buy {
  border: 0; border-radius: 999px; padding: 8px 16px; font-size: 12.5px; font-weight: 800; color: #fff; flex-shrink: 0; margin-left: 8px;
  background: linear-gradient(135deg, #ffd75e, #f5c518); color: #4a3b0c;
  box-shadow: 0 3px 10px rgba(230,180,34,.35);
}
.qm-buy:active { transform: scale(.93); }

/* ---------- 商户助手端液态玻璃导航（liquid-mode） ---------- */
.tabbar.liquid-mode {
  position: fixed; left: 14px; right: 14px; bottom: 10px; z-index: 1200;
  display: block; background: transparent; border-top: 0; padding: 0; box-shadow: none;
  pointer-events: none;
}
.tabbar.liquid-mode .ql-tabs { pointer-events: auto; }
.tabbar.liquid-mode .shop-pick-slot { pointer-events: auto; }
body.has-liquid-tabbar .scroll { padding-bottom: 86px; }
body.has-liquid-tabbar .page > .scroll:last-child { padding-bottom: 86px; }
.ql-tab .tabic { width: 21px; height: 21px; display: block; background-color: currentColor; }

/* 我的页头像接单横幅（参考站同款） */
.q77-my-ava-wrap { position: relative; width: 72px; height: 72px; margin-right: 12px; flex-shrink: 0; }
.q77-my-ava-wrap .q77-my-ava { margin-right: 0; }
.q77-my-ava-badge {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0 3px; overflow: hidden;
  background: linear-gradient(180deg, rgba(22,163,74,0), rgba(22,163,74,.92) 38%, #15803d);
  border-radius: 0 0 50% 50%; text-align: center;
}
.q77-my-ava-badge span { font-size: 9px; font-weight: 600; color: #fff; letter-spacing: .03em; }

/* 修复：img 默认可拖拽 → 浏览器原生 DnD 抢占指针并派发 pointercancel，
   导致液态玻璃导航拖拽手势失效。全部禁掉。 */
.ql-tab, .ql-tab img, .ql-tab .tabic {
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.ql-tab img[draggable] { pointer-events: none; }

/* Q77 我的页：退出按钮 + 版本水印（水印在按钮下方，参考站同款留白） */
.q77-my .sh-logout {
  min-width: 200px; height: 44px; padding: 0 34px; border: 0; border-radius: 999px;
  background: #fff; color: #8a8578; font-size: 14px; font-weight: 600;
  box-shadow: 0 2px 12px rgba(160,158,200,.14);
}
.q77-my .sh-logout:active { transform: scale(.97); }

/* ---------- Q77 我的页 v2（参考站 2100 1:1：会员胶囊 + 4 列彩色网格） ---------- */
.q77-my-vip {
  display: inline-flex; align-items: center; gap: 0; margin-top: 7px;
  border-radius: 999px; overflow: hidden; font-size: 10px; line-height: 1;
  box-shadow: 0 1px 4px rgba(207,160,24,.25);
}
.q77-my-vip i {
  font-style: normal; background: linear-gradient(135deg, #f5c518, #e0af10);
  color: #4a3b0c; font-weight: 800; padding: 4px 7px; letter-spacing: .04em;
}
.q77-my-vip em {
  font-style: normal; background: #fff; color: #cfa018; font-weight: 700;
  padding: 4px 9px;
}
/* 4 列彩色网格 */
.q77-my-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  row-gap: 20px; padding: 10px 4px 4px;
}
.q77-my-gi {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer;
}
.q77-my-gi:active { transform: scale(.94); }
.q77-my-gic {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
}
.q77-my-gic img { width: 42px; height: 42px; object-fit: contain; display: block; }
.q77-my-gi > span:last-child { font-size: 11.5px; color: #4a4a4a; margin-top: 2px; }

/* ---------- 修复：商户助手端液态导航图标（.ql-tab 不在 .tab 内，补齐 mask 渲染） ---------- */
.tabbar .ql-tab .tabic {
  width: 26px; height: 26px; display: block; background-color: #9BA3AF;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: transform .12s ease;
}
.tabbar .ql-tab.on .tabic { background: var(--th-grad, linear-gradient(135deg,#FF9D45,#FF6A00)); }
.tabbar .ql-tab.on { font-weight: 600; }