/* ============ 炫影电竞 WebApp 全局样式 v2（对齐小程序 V1.2.0 浅色视觉） ============ */
:root {
  --primary: #dc143c;
  --primary-2: #ff2d3a;
  --primary-grad: linear-gradient(135deg, #dc143c, #ff2d3a);
  --price: #ff2d55;
  --bg: #faf6f7;
  --card: #ffffff;
  --line: #f0e8ea;
  --line-2: #f8f8fa;
  --text: #1c1d2b;
  --text-2: #666666;
  --text-3: #999999;
  --text-4: #8b8c9e;
  --green: #22c55e;
  --gold: #e8a93c;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --card-shadow: 0 2px 12px rgba(28, 29, 43, .06), 0 1px 2px rgba(28, 29, 43, .04);
  --card-shadow-sm: 0 1px 6px rgba(28, 29, 43, .05);
  --card-shadow-hover: 0 10px 26px rgba(28, 29, 43, .12), 0 3px 8px rgba(28, 29, 43, .06);
  --cta-shadow: 0 12px 30px rgba(220, 20, 60, .30);
  --tint: #fde8ea;
  --tint-2: #ffe4e8;
  --img-bg: #f5f2f3;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { background: #f2f0f1; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif; font-size: 14px; }
[v-cloak] { display: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { display: block; }

/* 桌面端居中容器 */
#app { max-width: 720px; margin: 0 auto; min-height: 100vh; background: var(--bg); position: relative; box-shadow: 0 0 60px rgba(0, 0, 0, .05); }
@media (min-width: 1024px) { #app { max-width: 1024px; } }

/* ============ 顶部导航（红底白字，对齐原生导航栏） ============ */
.top-nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; height: 44px; padding: 0 8px;
  background: var(--primary-grad); color: #fff; }
.top-nav .nav-back { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; cursor: pointer; border-radius: 8px; }
.top-nav .nav-back:active { opacity: .7; }
.top-nav .nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; letter-spacing: .5px; }
.top-nav .nav-side { width: 34px; }

/* ============ 底部 TabBar（白底 + PNG 图标） ============ */
.tab-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 720px; z-index: 100;
  display: flex; background: #fff; border-top: 1px solid rgba(0, 0, 0, .04); padding-bottom: var(--safe-bottom);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .06); }
.tab-bar .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 0 6px; cursor: pointer; color: #999; font-size: 11px; }
.tab-bar .tab-item .tab-ico { width: 24px; height: 24px; margin-bottom: 3px; }
.tab-bar .tab-item .tab-ico img { width: 100%; height: 100%; object-fit: contain; }
.tab-bar .tab-item:not(.active) .tab-ico { filter: grayscale(100%) brightness(1.4); opacity: .55; }
.tab-bar .tab-item.active { color: var(--primary); }
.tab-bar .tab-item.active .tab-ico { filter: none; opacity: 1; }
.tab-bar .tab-item:active { opacity: .7; }
@media (min-width: 1024px) { .tab-bar { max-width: 1024px; } }

/* ============ 页面容器 ============ */
.page { padding-bottom: calc(64px + var(--safe-bottom)); min-height: 100vh; }
.page.pad { padding-bottom: calc(90px + var(--safe-bottom)); }

/* ============ 通用组件 ============ */
.btn { display: block; width: 100%; border: none; border-radius: 48px; padding: 14px 0; font-size: 16px; font-weight: 600;
  background: var(--primary-grad); color: #fff; cursor: pointer; text-align: center; box-shadow: 0 12px 30px rgba(220, 20, 60, .28); }
.btn:active { opacity: .85; transform: scale(.99); }
.btn:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
.btn.ghost { background: #fff; color: var(--text); border: 1px solid #eee; box-shadow: none; }
.btn.sm { width: auto; padding: 6px 16px; font-size: 13px; border-radius: 24px; display: inline-block; box-shadow: none; }
.btn.outline-red { background: #fff; color: var(--primary); border: 1px solid var(--primary); box-shadow: none; }
.btn.block-cta { position: fixed; bottom: calc(10px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 688px; z-index: 90; }

.card { background: var(--card); border-radius: 24px; padding: 14px; margin: 10px 12px; box-shadow: var(--card-shadow); }
.card.no-m { margin: 0; }
.row { display: flex; align-items: center; }
.sp { flex: 1; }
.tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--tint); color: var(--primary); margin-right: 5px; }
.tag.gray { background: #f0f0f5; color: var(--text-3); }
.tag.gold { background: linear-gradient(135deg, #f7d488, #e8a93c); color: #fff; }
.divider { height: 1px; background: var(--line); margin: 12px 0; }
.muted { color: var(--text-3); font-size: 12px; }
.num { color: var(--primary); font-weight: 700; }
.price { color: var(--price); font-weight: 700; font-size: 17px; }
.price small { font-size: 12px; color: var(--text-3); font-weight: 400; }
.diamond { color: var(--primary); font-weight: 700; }
.mt6 { margin-top: 6px; } .mt10 { margin-top: 10px; } .mt16 { margin-top: 16px; }
.flex { display: flex; align-items: center; } .between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }

/* 区块标题（左红色竖条） */
.section-title { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 8px; }
.section-title .t { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.section-title .t::before { content: ''; width: 8px; height: 30px; background: var(--primary-grad); border-radius: 4px; }
.section-title .more { font-size: 12px; color: var(--text-3); cursor: pointer; }
.sec-label { font-size: 14px; font-weight: 600; margin-bottom: 10px; }

/* ============ 首页 ============ */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #fff; }
.topbar .brand { font-size: 18px; font-weight: 700; }
.topbar .cate-entry { display: flex; align-items: center; gap: 4px; background: var(--tint); color: var(--primary); font-size: 13px; padding: 6px 14px; border-radius: 28px; cursor: pointer; }
.banner-wrap { padding: 10px 12px 0; }
.banner-swiper { height: 150px; border-radius: 20px; overflow: hidden; position: relative; background: #eee; }
.banner-swiper .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.banner-swiper .slide.active { opacity: 1; }
.banner-swiper .slide img { width: 100%; height: 100%; object-fit: cover; }
.banner-swiper .dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; }
.banner-swiper .dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.5); }
.banner-swiper .dots i.on { background: var(--primary); width: 16px; }
.banner-go { position: absolute; right: 12px; bottom: 10px; background: rgba(0,0,0,.45); color: #fff; font-size: 11px; padding: 4px 10px; border-radius: 20px; }

/* Banner 左右切换箭头 */
.banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 22px;
  line-height: 34px;
  text-align: center;
  border: none;
  cursor: pointer;
  z-index: 5;
  transition: background .2s;
}
.banner-arrow:hover { background: rgba(0,0,0,.6); }
.banner-arrow-left { left: 12px; }
.banner-arrow-right { right: 12px; }
/* 移动端箭头略缩小，不隐藏 */
@media (max-width: 720px) {
  .banner-arrow { width: 30px; height: 30px; font-size: 18px; line-height: 28px; }
}

/* 下单须知入口：与 banner 等宽对齐——卡片撑满 .notice-box 内宽（左右 padding 为 0），
   容器边界由 .notice-box 统一管理，与 .banner-wrap 共享同一 12px 水平边距 */
.notice-box { padding: 10px 12px 0; cursor: pointer; }
.notice-card {
  background: linear-gradient(135deg, #ffffff 0%, var(--tint-2) 100%);
  border: 1px solid rgba(220, 20, 60, .06);
  border-radius: 14px;
  padding: 16px 0;
  display: flex; align-items: center; gap: 14px;
  position: relative; overflow: hidden;
  cursor: pointer;
  transition: transform .18s, box-shadow .2s, border-color .2s;
}
.notice-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--primary-grad); border-radius: 14px 0 0 14px;
}
.notice-card:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(220, 20, 60, .12); border-color: rgba(220, 20, 60, .14); }
.notice-card:active { transform: translateY(0); }
.nc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-left: 8px; }
.nc-title { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4; letter-spacing: 0; }
.nc-sub { font-size: 13px; color: var(--muted); line-height: 1.4; }
.nc-cta {
  flex: 0 0 auto;
  padding: 10px 22px;
  margin-right: 4px;
  background: var(--primary-grad); color: #fff;
  border: none; border-radius: 999px;
  font-size: 14px; font-weight: 700;
  font-family: inherit;
  box-shadow: 0 6px 16px rgba(220, 20, 60, .28);
  cursor: pointer;
  transition: transform .15s;
}
.notice-card:active .nc-cta { transform: scale(.96); }

/* 排序栏 */
.sort-bar { display: flex; align-items: center; background: #fff; border-radius: 16px; margin: 10px 12px; padding: 6px; gap: 6px; }
.sort-bar .sort-item { flex: 1; text-align: center; font-size: 13px; color: var(--text-3); padding: 8px 0; cursor: pointer; border-radius: 24px; }
.sort-bar .sort-item.active { color: #fff; background: var(--primary-grad); font-weight: 600; }

/* 商品网格（两列） */
.goods-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 4px 12px 12px; }
.goods-card { background: #fff; border-radius: 18px; overflow: hidden; cursor: pointer; box-shadow: var(--card-shadow-sm); }
.goods-card:active { transform: scale(.98); }
.goods-card .goods-img { position: relative; height: 130px; background: var(--img-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; min-width: 0; }
.goods-card .goods-img .goods-image { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.goods-card .goods-img .img-ph { position: absolute; inset: 0; z-index: 0; }
.goods-card .goods-img .goods-emoji { font-size: 40px; }
.goods-card .goods-tag { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.45); color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 6px; }
.goods-card .goods-info { padding: 10px 12px 12px; }
.goods-card .goods-title { font-size: 13px; color: #1f2330; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; }
.goods-card .goods-sub { font-size: 11px; color: #999; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goods-card .goods-price { display: flex; align-items: baseline; margin-top: 7px; }
.goods-card .price-num { color: var(--price); font-size: 19px; font-weight: 800; }
.goods-card .price-unit { color: var(--primary); font-size: 12px; font-weight: 600; margin-left: 2px; }
.goods-card .price-start { font-size: 11px; color: #999; margin-left: 4px; }
.list-end { text-align: center; color: var(--text-4); font-size: 12px; padding: 20px 0 10px; }

/* 下单须知模态 */
.nm-mask { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 500; display: flex; align-items: center; justify-content: center; }
.nm-modal { width: 86%; max-width: 440px; max-height: 76vh; background: #fff; border-radius: 28px; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.nm-modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--primary-grad); }
.nm-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 6px; }
.nm-title { font-size: 17px; font-weight: 700; }
.nm-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #999; cursor: pointer; }
.nm-sub { font-size: 12px; color: var(--text-3); padding: 0 18px 8px; }
.nm-body { flex: 1; overflow-y: auto; padding: 4px 18px 18px; }
.nm-body .sec-h { color: var(--primary); font-size: 15px; font-weight: 700; margin: 12px 0 6px; }
.nm-body .sec-p { font-size: 13px; color: #444; line-height: 1.8; margin-bottom: 4px; white-space: pre-wrap; }
.nm-end { text-align: center; color: var(--text-4); font-size: 12px; padding: 14px 0 6px; }
.nm-end.ok { color: var(--ok); }
.nm-foot { padding: 10px 18px 18px; flex-shrink: 0; }
.nm-read-btn { width: 100%; padding: 12px 0; border: none; border-radius: 999px;
  background: var(--primary-grad); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
  font-family: inherit; box-shadow: 0 8px 20px rgba(220,20,60,.25); transition: opacity .2s, transform .15s; }
.nm-read-btn:disabled { background: #e4e6ea; color: #a7adb8; box-shadow: none; cursor: not-allowed; }
.nm-read-btn:not(:disabled):active { transform: scale(.97); }

/* ============ 分类页（左栏分类 + 右侧内容） ============ */
.cat-layout { display: flex; min-height: calc(100vh - 44px); }
/* 一级分类页（去嵌套）：顶 tab 横排 + 主区单栏布局 */
.cat-layout-flat { display: flex; flex-direction: column; min-height: calc(100vh - 44px); background: #fff; }
.cat-tabs { display: flex; gap: 4px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--line);
  overflow-x: auto; flex-shrink: 0; -webkit-overflow-scrolling: touch; }
.cat-tab { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px;
  font-size: 13px; color: var(--text-2); cursor: pointer; white-space: nowrap; flex: 0 0 auto; transition: all .15s; }
.cat-tab:hover { background: var(--line-2); }
.cat-tab.on { background: var(--tint); color: var(--primary); font-weight: 600; }
.cat-tab .ct-ico { font-size: 14px; }
.cat-side { width: 88px; background: #f2eeef; flex: 0 0 88px; padding: 8px 0; }
.cat-side-item { display: flex; flex-direction: column; align-items: center; padding: 12px 4px; cursor: pointer; font-size: 12px; color: var(--text-2); position: relative; }
.cat-side-item .csi-ico { font-size: 22px; margin-bottom: 4px; }
.cat-side-item.active { background: #fff; color: var(--primary); font-weight: 600; }
.cat-side-item.active::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 6px; background: var(--primary-grad); border-radius: 4px; }
.cat-main { flex: 1; padding: 10px 12px 20px; min-width: 0; }
.search-bar { display: flex; align-items: center; background: #f2f3f7; border-radius: 34px; padding: 9px 14px; color: var(--text-3); font-size: 13px; margin-bottom: 10px; }
.search-bar .sb-ico { margin-right: 6px; }
/* 搜索热词 chips（分类页）：品牌红描边/淡红底；点击触发已有过滤逻辑 */
.hot-keywords { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.hot-keywords .hk-label { font-size: 12px; color: var(--text-3); margin-right: 2px; }
.hot-keywords .hk-chip { font-size: 12px; color: #dc143c; background: rgba(220, 20, 60, 0.08); border: 1px solid rgba(220, 20, 60, 0.22); padding: 4px 10px; border-radius: 14px; cursor: pointer; transition: background .15s; }
.hot-keywords .hk-chip:hover { background: rgba(220, 20, 60, 0.15); }
.sub-bar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; }
.sub-bar .sub-chip { flex: 0 0 auto; padding: 6px 14px; border-radius: 28px; font-size: 12px; background: var(--tint); color: var(--primary); cursor: pointer; }
.sub-bar .sub-chip.on { background: var(--primary-grad); color: #fff; font-weight: 600; }
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
/* 分类页主区标题（一级类目名） */
.cm-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 4px 2px 12px; }

/* ============ 商品详情 ============ */
/* 详情页设计令牌：统一圆角 / 统一阴影层级 / 品牌色浅调，避免各处硬编码不一致。
   全局小程序单位已统一清理并 token 化（见 :root 设计令牌与文末「全局质感与微交互」优化层）。 */
:root {
  --pd-r: 14px;          /* 卡片圆角 */
  --pd-r-sm: 10px;       /* 内部块圆角 */
  --pd-r-xs: 8px;        /* 标签圆角 */
  --pd-sh-1: 0 1px 2px rgba(28, 29, 43, .03), 0 4px 14px rgba(28, 29, 43, .05);
  --pd-sh-2: 0 8px 28px rgba(28, 29, 43, .08);
  --pd-cta-sh: 0 10px 24px rgba(220, 20, 60, .26);
  --pd-tint: #fff4f5;    /* 主色 5% 底 */
  --pd-tint-2: #ffe4e8;  /* 主色 12% 底 */
  --pd-brand-2: #ff4d4f; /* 渐变亮端 */
}

.p-breadcrumb { display: none; }

/* 主图：统一圆角 + 轻阴影；占位块绝对定位铺满并裁切，杜绝首字溢出 */
.p-main-img { position: relative; height: 210px; overflow: hidden;
  background: linear-gradient(160deg, #faf5f6, #f2eaec);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--pd-r); box-shadow: var(--pd-sh-1); }
.p-main-img img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; background: #fff; }
.p-main-img .img-ph { position: absolute; inset: 0; z-index: 0; overflow: hidden; line-height: 1; }
.p-main-img .p-tag { position: absolute; left: 12px; top: 12px; z-index: 2;
  background: rgba(28, 29, 43, .55); color: #fff; font-size: 11px; font-weight: 500; letter-spacing: .5px;
  padding: 4px 11px; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* 服务承诺条：SVG mask 图标 + 浅色底托，禁止 emoji */
.p-service-promise { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 10px;
  background: #fff; border-radius: var(--pd-r); padding: 14px 14px; box-shadow: var(--pd-sh-1); }
.p-service-promise .sp-item { display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 13px; color: var(--text); line-height: 1.2; }
.p-service-promise .sp-ico-wrap { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--pd-tint); display: inline-flex; align-items: center; justify-content: center; }
.p-service-promise .sp-icon { width: 14px; height: 14px; color: var(--primary); }
.p-service-promise .sp-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* SKU 头：价格区突出金额（¥ 1:1，不再用钻单位），标题紧凑 */
.p-sku-head { background: #fff; padding: 16px; }
.p-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.p-sku-price { color: var(--price); display: flex; align-items: baseline; gap: 3px; line-height: 1; min-width: 0; }
.p-sku-price .pp-num { font-size: 30px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.p-sku-price .pp-unit { font-size: 14px; font-weight: 700; color: var(--primary); }
.p-price-note { flex: 0 1 auto; max-width: 52%; padding-bottom: 3px; font-size: 11px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-sku-title { font-size: 16px; font-weight: 600; margin-top: 10px; line-height: 1.45; color: var(--text); }
.p-sku-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.p-sku-tags .tag { margin-right: 0; border-radius: var(--pd-r-xs); padding: 3px 9px; font-weight: 500; }

/* 页面顶部主标题（整行） */
.p-page-head { margin: 4px 0 14px; }
.p-page-title {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
  word-break: break-word;
}
.p-page-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.p-page-tags .tag { margin-right: 0; border-radius: var(--pd-r-xs); padding: 3px 9px; font-weight: 500; }

.p-section { background: #fff; margin-top: 10px; padding: 14px 16px; }

/* 档位卡片：选中态用纯 CSS 角标（三角 + 勾），不使用任何字符图标 */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tier-card { position: relative; overflow: hidden; cursor: pointer; text-align: center;
  padding: 10px 8px 9px; border: 1px solid var(--line); border-radius: var(--pd-r-sm); background: #fcfbfc;
  transition: border-color .16s, background .16s, box-shadow .16s; }
.tier-card:hover { border-color: rgba(220, 20, 60, .32); background: #fff; }
.tier-card .tier-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tier-card .tier-price { color: var(--price); font-size: 15px; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; }
.tier-card .tier-sub { display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-top: 4px; font-size: 10px; color: var(--text-3); }
.tier-card .tier-sub .ts-node { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tier-card .tier-sub .ts-arrow { flex: 0 0 auto; width: 4px; height: 4px; opacity: .75;
  border-right: 1px solid currentColor; border-top: 1px solid currentColor; transform: rotate(45deg); }
.tier-card.on { border-color: var(--primary); background: var(--pd-tint); box-shadow: 0 4px 14px rgba(220, 20, 60, .13); }
.tier-card.on .tier-name { color: var(--primary); }
.tier-card.on::before { content: ''; position: absolute; right: 0; top: 0; width: 0; height: 0;
  border-top: 22px solid var(--primary); border-left: 22px solid transparent; }
.tier-card.on::after { content: ''; position: absolute; right: 5px; top: 3px; width: 3px; height: 7px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(42deg); }

/* 规格类型化（P1）：档位卡内按规格类型分行展示值 chips；老数据无 specTypes 时不渲染 */
.tier-card .tier-specs { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; padding-top: 7px;
  border-top: 1px dashed var(--line-2); }
.tier-card .ts-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tier-card .ts-label { flex: 0 0 auto; font-size: 10px; color: var(--text-3); }
.tier-card .ts-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--pd-tint);
  border: 1px solid rgba(220, 20, 60, .14); border-radius: 999px; padding: 1px 8px; }
.tier-card.on .ts-chip { color: var(--primary); border-color: rgba(220, 20, 60, .32); }

/* 服务选项 chips */
.opt-group { margin-bottom: 12px; }
.opt-group:last-child { margin-bottom: 0; }
.opt-name { font-size: 12px; color: var(--text-3); margin-bottom: 8px; }
.opt-items { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-chip { padding: 7px 14px; border-radius: 999px; background: #f5f5f7; border: 1px solid transparent;
  font-size: 12px; color: var(--text-2); cursor: pointer; transition: background .16s, color .16s, border-color .16s; }
.opt-chip:hover { background: #eeeef2; }
.opt-chip.on { border-color: var(--primary); color: var(--primary); background: var(--pd-tint); font-weight: 600; }

/* 移动端底部悬浮下单栏 */
.p-bottom-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 720px; z-index: 90;
  display: flex; align-items: center; gap: 12px; background: #fff; padding: 10px 16px calc(10px + var(--safe-bottom));
  box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
.p-bottom-bar.pc-static { display: none; }
.p-bottom-bar .pb-price { color: var(--price); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.p-bottom-bar .pb-price small { font-size: 12px; color: var(--primary); font-weight: 700; margin-left: 2px; }
.p-bottom-bar .pb-btn { flex: 1; border: none; border-radius: 999px; padding: 12px 0; cursor: pointer;
  background: linear-gradient(135deg, var(--pd-brand-2) 0%, var(--primary) 100%); color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: 1px; box-shadow: var(--pd-cta-sh);
  transition: box-shadow .2s, transform .12s; }
.p-bottom-bar .pb-btn:active { transform: translateY(1px); box-shadow: 0 5px 14px rgba(220, 20, 60, .24); }

.p-left-col { display: contents; }

/* 下单按钮（PC 右侧面板内） */
.p-buy-actions .pb-btn.main { display: block; width: 100%; border: none; cursor: pointer; color: #fff;
  padding: 14px 0; font-size: 16px; font-weight: 700; letter-spacing: 1px; border-radius: 12px;
  background: linear-gradient(135deg, var(--pd-brand-2) 0%, var(--primary) 100%);
  box-shadow: var(--pd-cta-sh); transition: transform .12s, box-shadow .2s, filter .2s; }
.p-buy-actions .pb-btn.main:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(220, 20, 60, .34); filter: saturate(1.06); }
.p-buy-actions .pb-btn.main:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(220, 20, 60, .26); }
.p-buy-actions .p-buy-tips { display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 12px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; }
.p-buy-actions .p-buy-tips::before { content: ''; flex: 0 0 auto; width: 4px; height: 4px; border-radius: 50%; background: var(--green); }

/* 服务说明空状态（后台未填写或填成占位值时的缺省展示） */
.p-empty-note { display: flex; align-items: flex-start; gap: 12px; padding: 16px;
  background: linear-gradient(180deg, #fbfafb, #f6f5f6); border-radius: var(--pd-r-sm); }
.p-empty-note .pen-ico { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: #c6bfc1; }
.p-empty-note .pen-body { min-width: 0; }
.p-empty-note .pen-title { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.p-empty-note .pen-sub { margin-top: 5px; font-size: 12.5px; color: var(--text-3); line-height: 1.7; }

/* 服务流程时间轴（纯 CSS 序号 + 连接线） */
.p-flow { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.p-flow .pf-step { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.p-flow .pf-step::after { content: ''; position: absolute; left: 11px; top: 26px; bottom: -14px; width: 1px;
  background: linear-gradient(180deg, var(--pd-tint-2), rgba(255, 228, 232, 0)); }
.p-flow .pf-step:last-child::after { display: none; }
.p-flow .pf-num { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--pd-tint);
  color: var(--primary); font-size: 12px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; }
.p-flow .pf-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.p-flow .pf-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.p-flow .pf-desc { font-size: 12.5px; color: var(--text-3); line-height: 1.65; }

/* 商品详情：Tmall 式 左服务详情 / 右吸顶下单（移动端竖版卡片流） */
.p-detail-wrap { display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 0; }
.p-detail-wrap .p-main-img { order: 1; }
.p-buy-box { order: 2; background: #fff; border-radius: var(--pd-r); padding: 16px; margin-top: 0; box-shadow: var(--pd-sh-1); }
.p-service-promise { order: 3; }
.p-detail-body { order: 4; display: flex; flex-direction: column; gap: 12px; }
.p-detail-body .p-section { margin-top: 0; padding: 16px; border-radius: var(--pd-r); box-shadow: var(--pd-sh-1); }
.p-detail-body .sec-label { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.p-detail-body .sec-icon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--primary); }
.p-buy-box .p-sku-head { background: transparent; padding: 0; margin-top: 0; }
.p-buy-box .p-section { background: transparent; padding: 16px 0 0; margin-top: 16px; border-top: 1px solid var(--line-2); }
.p-buy-box .sec-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 10px; }
.p-buy-box .sec-label::before { content: ''; width: 3px; height: 12px; border-radius: 2px; background: var(--primary-grad); }
.p-buy-box .p-buy-actions { display: none; margin-top: 16px; }

@media (min-width: 1024px) { .p-bottom-bar { max-width: 1024px; } }

/* ============ 下单页 ============
   视觉规范：结算页所有信息块统一为「白卡 + 16px 圆角 + 轻阴影」，卡片之间 12px 间距；
   全站禁止 emoji / 装饰性字符（箭头、勾号等）充当图标，一律使用 SVG mask 图标或纯 CSS 绘制。 */

/* 主体内容容器：移动端左右 12px 留白，PC 端居中放宽（见文件末尾 PC 适配块） */
.o-wrap { padding: 12px 12px 0; }

/* ---- 左右分布骨架 ----
   移动端：.o-layout 为普通块级容器，左列（摘要/账号/支付/备注）与右列（券/陪玩/明细）
   依 DOM 顺序竖排成单列，与改版前的信息顺序一致；实付与确认按钮由底部固定栏承担。
   PC 端（见文件末尾 @media min-width:1024px）：.o-layout 切换为两列 grid，右列吸顶。 */
.o-layout { display: block; }
.o-main-col { min-width: 0; }
.o-side-col { min-width: 0; }
.o-settle { min-width: 0; }
/* 移动端隐藏侧栏内的实付行与确认按钮，避免与底部固定栏重复 */
.o-settle-total { display: none; }
.o-settle-btn { display: none; width: 100%; }

/* ---- 商品摘要卡片 ---- */
.pkg-mini { display: flex; align-items: center; background: #fff; border-radius: 16px; padding: 16px;
  border: 1px solid var(--line); box-shadow: 0 2px 12px rgba(0, 0, 0, .04); }
.o-thumb { position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex: 0 0 64px;
  background: var(--img-bg); display: flex; align-items: center; justify-content: center; }
.o-thumb img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
/* 占位块垫底：真实图片加载成功时覆盖其上，失败时才露出中性占位 */
.o-thumb .img-ph { position: absolute; inset: 0; z-index: 0; font-size: 24px; line-height: 1; }
.o-summary { flex: 1; padding-left: 14px; min-width: 0; }
.o-title { font-size: 16px; font-weight: 700; color: #1a1a1a; line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.o-sub { margin-top: 6px; font-size: 13px; color: var(--text-2); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 规格类型化（P1）：下单页商品摘要内展示所选档位的规格组合 chips */
.o-summary .spec-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.o-summary .spec-row .ts-chip { font-size: 11px; font-weight: 600; color: var(--text-2);
  background: var(--pd-tint); border: 1px solid rgba(220, 20, 60, .14); border-radius: 999px; padding: 2px 9px; }
.o-price { flex: 0 0 auto; padding-left: 12px; color: var(--price); font-size: 18px; font-weight: 800; white-space: nowrap; }

/* ---- 表单分区白卡 ---- */
.o-form-section { background: #fff; border-radius: 16px; margin-top: 12px; padding: 8px 0;
  border: 1px solid var(--line); box-shadow: 0 2px 12px rgba(0, 0, 0, .04); }
.o-section-title { font-size: 13px; font-weight: 600; color: var(--text-2); letter-spacing: .2px;
  padding: 6px 16px 0; margin-bottom: 6px; }

/* ---- 表单行 ---- */
.field { padding: 12px 16px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; }
.o-form-section .field:last-child { border-bottom: none; }
.field label { font-size: 13px; color: var(--text); width: 92px; flex: 0 0 92px; }
.field input, .field textarea { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 14px; text-align: right; font-family: inherit; }
.field textarea { min-height: 56px; resize: none; line-height: 1.6; text-align: left; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
/* 备注行：label 顶对齐，右侧多行输入 */
.field.field-note { align-items: flex-start; }
.field.field-note label { line-height: 1.6; }

/* ---- 支付方式 ---- */
.pay-option { display: flex; align-items: center; margin: 0 8px; padding: 12px 8px; cursor: pointer;
  border: 1px solid transparent; border-radius: 12px; transition: background .18s ease, border-color .18s ease; }
.pay-option .po-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--tint); flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center; margin-right: 12px; }
.pay-option .po-ico .ico { width: 18px; height: 18px; color: var(--primary); }
.pay-option .po-info { min-width: 0; }
.pay-option .po-name { font-size: 14px; font-weight: 600; color: var(--text); }
.pay-option .po-balance { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.pay-option .po-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ddd; flex: 0 0 20px;
  display: flex; align-items: center; justify-content: center; }
.pay-option.on { background: #fff5f6; border-color: rgba(220, 20, 60, .35); }
.pay-option.on .po-check { border-color: var(--primary); background: var(--primary); }
/* 选中勾：纯 CSS 绘制（禁止使用勾号字符或 emoji 充当图标） */
.pay-option.on .po-check::after { content: ''; width: 4px; height: 8px; margin-top: -2px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(43deg); }

/* ---- 优惠券 / 指定陪玩 行 ---- */
.coupon-item { display: flex; align-items: center; padding: 12px 16px; cursor: pointer; }
.coupon-item .ci-label { font-size: 14px; color: var(--text); }
.coupon-item .ci-value { font-size: 13px; color: var(--text); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coupon-item .ci-value.ci-muted { color: var(--text-3); }
.coupon-item .ci-value.ci-num { color: var(--primary); font-weight: 700; }
/* 行尾箭头：SVG mask 图标，替代原先的 › 字符 */
.coupon-item .ci-arrow { width: 16px; height: 16px; flex: 0 0 16px; color: var(--text-3); margin-left: 6px; }

/* ---- 费用明细 ---- */
.price-detail { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; }
.price-detail .pd-label { font-size: 13px; color: var(--text-2); }
.price-detail .pd-value { font-size: 13px; color: var(--text); font-weight: 600; }
.price-detail .pd-value.pd-none { color: var(--text-3); font-weight: 500; }
.price-detail .pd-discount { color: var(--primary); font-size: 13px; font-weight: 600; }
/* 视觉分组：返利与前两项之间加一条虚线分隔（实付金额只在底部栏展示，此处不重复） */
.price-detail.pd-sep { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--line); }

/* ---- 底部固定栏 ---- */
.o-bottom-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 720px; z-index: 90;
  display: flex; align-items: center; gap: 12px; background: #fff; padding: 10px 16px calc(10px + var(--safe-bottom));
  box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
.o-bottom-bar .ob-total { flex: 1; }
.o-bottom-bar .ob-total .ob-label { font-size: 11px; color: var(--text-3); }
.o-bottom-bar .ob-total .ob-price { color: var(--price); font-size: 20px; font-weight: 800; }
.o-bottom-bar .ob-btn { flex: 1; background: var(--primary-grad); color: #fff; border: none; border-radius: 999px; padding: 12px 0; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 12px 30px rgba(220,20,60,.28); }
.o-bottom-bar .ob-btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }

/* 限购规则与状态（P2B·D3）：下单页结算面板内 */
.limit-rule { margin-top: 12px; padding: 8px 12px; font-size: 12px; color: var(--text-2);
  background: var(--tint); border-radius: 8px; line-height: 1.6; }
.limit-warn { margin-top: 8px; padding: 10px 12px; font-size: 12.5px; font-weight: 600;
  color: var(--primary); background: var(--tint-2); border: 1px solid rgba(220, 20, 60, .28);
  border-radius: 8px; line-height: 1.6; }

/* ============ 订单列表 ============ */
.status-tabs { display: flex; gap: 6px; background: #fff; padding: 10px 12px; position: sticky; top: 44px; z-index: 50; overflow-x: auto; }
.status-tabs .st-tab { flex: 1; text-align: center; padding: 8px 0; font-size: 13px; color: var(--text-2); cursor: pointer; border-radius: 28px; white-space: nowrap; }
.status-tabs .st-tab.on { background: var(--primary-grad); color: #fff; font-weight: 600; }
.order-card { background: #fff; border-radius: 24px; padding: 14px; margin: 10px 12px; box-shadow: var(--card-shadow-sm); cursor: pointer; }
.order-card:active { transform: scale(.99); }
.order-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.order-id { font-size: 11px; color: #ccc; }
.order-status { font-size: 13px; font-weight: 600; }
.st-pending { color: var(--primary); } .st-ongoing { color: #ff4500; } .st-completed { color: var(--green); } .st-cancelled { color: #999; }
.order-body { display: flex; align-items: center; padding: 12px 0; }
.order-icon { width: 44px; height: 44px; border-radius: 20px; overflow: hidden; flex: 0 0 44px; background: var(--img-bg); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.order-icon img { width: 100%; height: 100%; object-fit: cover; }
.order-mid { flex: 1; padding-left: 12px; min-width: 0; }
.order-companion-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-game { font-size: 12px; color: var(--text-3); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.service-type-tag { display: inline-block; background: rgba(220,20,60,.1); color: var(--primary); font-size: 10px; padding: 1px 6px; border-radius: 6px; }
.order-price { color: var(--primary); font-size: 18px; font-weight: 700; }
.order-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--line-2); }
.order-time { font-size: 11px; color: #ccc; }
.action-chip { display: inline-block; font-size: 12px; padding: 5px 14px; border-radius: 24px; border: 1px solid #eee; margin-left: 8px; cursor: pointer; }
.action-chip.primary { background: var(--primary-grad); color: #fff; border: none; box-shadow: 0 8px 20px rgba(220,20,60,.2); }
.action-chip.review { border-color: var(--primary); color: var(--primary); }
.action-chip.cancel { color: #999; }
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 70px 0; color: var(--text-3); }
.empty-state .es-ico { font-size: 60px; margin-bottom: 14px; opacity: .4; }
.empty-state .es-tip { font-size: 13px; margin-bottom: 20px; }
.empty-state .es-btn { background: var(--primary-grad); color: #fff; border: none; border-radius: 48px; padding: 10px 36px; font-size: 14px; cursor: pointer; }

/* ============ 订单详情 ============ */
.status-banner { padding: 20px 16px 24px; color: #fff; background: var(--primary-grad); }
.status-banner .sb-main { font-size: 19px; font-weight: 700; }
.status-banner .sb-sub { font-size: 12px; opacity: .85; margin-top: 6px; }
.od-section { background: #fff; margin-top: 10px; padding: 6px 16px; }
.info-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.info-row:last-child { border-bottom: none; }
.info-row .ir-label { color: var(--text-3); width: 92px; flex: 0 0 92px; }
.info-row .ir-value { flex: 1; text-align: right; }
.cashback-tip { background: var(--tint); color: var(--primary); font-size: 12px; padding: 8px 12px; border-radius: 12px; margin: 8px 0; }
.timeline { padding: 6px 0; }
.tl-item { position: relative; padding: 0 0 16px 26px; }
.tl-item::before { content: ''; position: absolute; left: 9px; top: 18px; bottom: -2px; width: 2px; background: #eee; }
.tl-item:last-child::before { display: none; }
.tl-item .tl-dot { position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid #ddd; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.tl-item.on .tl-dot { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 6px rgba(220,20,60,.15); }
.tl-item .tl-title { font-size: 14px; font-weight: 500; }
.tl-item .tl-time { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.od-bottom-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 720px; z-index: 90;
  display: flex; gap: 12px; background: #fff; padding: 10px 16px calc(10px + var(--safe-bottom)); box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
.od-bottom-bar .bar-btn-outline { flex: 1; background: #fff; color: var(--text-2); border: 1px solid #ddd; border-radius: 48px; padding: 12px 0; font-size: 15px; cursor: pointer; }
.od-bottom-bar .bar-btn-primary { flex: 1; background: var(--primary-grad); color: #fff; border: none; border-radius: 48px; padding: 12px 0; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 12px 30px rgba(220,20,60,.28); }
@media (min-width: 1024px) { .od-bottom-bar { max-width: 1024px; } }

/* ============ 我的 ============ */
.profile-header { position: relative; padding: 26px 16px 30px; background: var(--primary-grad); border-radius: 0 0 32px 32px; display: flex; align-items: center; gap: 14px; }
.ph-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.3); color: #fff; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 64px; border: 2px solid rgba(255,255,255,.6); }
.ph-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ph-info { flex: 1; }
.ph-name { color: #fff; font-size: 18px; font-weight: 700; }
.ph-vip { display: inline-block; margin-top: 6px; background: rgba(255,255,255,.2); color: #fff; font-size: 11px; padding: 3px 12px; border-radius: 24px; }
.wallet-card { background: #fff; border-radius: 24px; margin: -16px 12px 0; padding: 14px 16px 16px; position: relative; box-shadow: var(--card-shadow); }
.wallet-card::before { content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 6px; background: var(--primary-grad); border-radius: 0 0 6px 6px; }
.wallet-row { display: flex; align-items: center; }
.wb-amount { color: var(--price); font-size: 30px; font-weight: 800; }
.wb-amount small { font-size: 12px; color: var(--text-3); font-weight: 400; margin-left: 4px; }
.wb-recharge { background: var(--primary-grad); color: #fff; border: none; border-radius: 48px; padding: 8px 22px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 20px rgba(220,20,60,.25); }
.wallet-stats { display: flex; margin-top: 14px; border-top: 1px solid var(--line-2); padding-top: 12px; }
.wallet-stats .ws { flex: 1; text-align: center; }
.wallet-stats .ws .ws-num { font-size: 15px; font-weight: 700; }
.wallet-stats .ws .ws-label { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.order-section { background: #fff; border-radius: 24px; margin: 10px 12px 0; padding: 14px; box-shadow: var(--card-shadow); }
.order-quick { display: flex; padding-top: 6px; }
.order-quick .oq-item { flex: 1; text-align: center; cursor: pointer; position: relative; }
.order-quick .oq-ico { font-size: 24px; }
.order-quick .oq-label { font-size: 11px; color: var(--text-2); margin-top: 4px; }
.order-quick .oq-badge { position: absolute; top: -4px; right: 22%; background: var(--primary); color: #fff; font-size: 10px; padding: 0 6px; border-radius: 20px; min-width: 18px; }
.quick-section { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: #fff; border-radius: 24px; margin: 10px 12px 0; padding: 14px 6px; box-shadow: var(--card-shadow); }
.quick-item { display: flex; flex-direction: column; align-items: center; padding: 8px 0; cursor: pointer; }
.quick-item .qi-ico { width: 40px; height: 40px; border-radius: 14px; background: var(--tint); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 6px; }
.quick-item .qi-label { font-size: 11px; color: var(--text-2); }
.menu-section { background: #fff; border-radius: 24px; margin: 10px 12px 0; box-shadow: var(--card-shadow); overflow: hidden; }
.menu-item { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.menu-item:last-child { border-bottom: none; }
.menu-item .mi-ico { width: 30px; text-align: center; font-size: 17px; margin-right: 12px; }
.menu-item .mi-text { flex: 1; font-size: 14px; }
.menu-item .mi-arrow { color: var(--text-3); font-size: 14px; }
.menu-item.logout .mi-text { color: var(--primary); }
/* 帮助中心展开子菜单（个人中心） */
.menu-sub { background: var(--bg); border-top: 1px solid var(--line-2); }
.menu-sub-item { display: flex; align-items: center; padding: 12px 16px 12px 58px; cursor: pointer;
  font-size: 13px; color: var(--text-2); border-bottom: 1px solid var(--line-2); transition: background .15s; }
.menu-sub-item:last-child { border-bottom: none; }
.menu-sub-item:hover { background: #f7f5f6; }
.menu-sub-item .mi-ico { width: 22px; text-align: center; font-size: 14px; margin-right: 10px; color: var(--text-3); }
.menu-sub-item .mi-arrow-sm { color: var(--text-3); font-size: 12px; margin-left: auto; }

/* ============ 登录 ============ */
.login-hero { background: var(--primary-grad); border-radius: 0 0 50px 50px; padding: 42px 24px 36px; text-align: center; color: #fff; }
.login-hero .logo { width: 70px; height: 70px; border-radius: 20px; margin: 0 auto 14px; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 900; }
.login-hero .app-name { font-size: 22px; font-weight: 700; letter-spacing: 1px; }
.login-hero .slogan { font-size: 12px; opacity: .85; margin-top: 8px; }
.login-panel { background: #fff; border-radius: 28px; margin: -18px 16px 0; padding: 22px 18px; box-shadow: var(--card-shadow); }
.login-input { display: flex; align-items: center; background: #faf6f7; border-radius: 14px; padding: 0 14px; height: 48px; margin-bottom: 14px; }
.login-input input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 15px; }
.login-input .send-code { font-size: 13px; color: var(--primary); cursor: pointer; white-space: nowrap; border: none; background: none; padding: 6px 0 6px 12px; }
.login-input .send-code:disabled { color: var(--text-3); }
.login-btn { width: 100%; background: var(--primary-grad); color: #fff; border: none; border-radius: 48px; padding: 13px 0; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 6px; box-shadow: 0 12px 30px rgba(220,20,60,.28); }
.login-btn:disabled { opacity: .45; box-shadow: none; }
.wx-btn { width: 100%; background: #07c160; color: #fff; border: none; border-radius: 48px; padding: 13px 0; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.wx-btn .wx-ico { font-size: 18px; }
.login-agree { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--text-3); margin-top: 18px; line-height: 1.6; }
.login-agree .agree-check { width: 16px; height: 16px; appearance: none; -webkit-appearance: none; margin: 0 4px 0 0; border: 1.5px solid var(--text-3); border-radius: 4px; background: #fff; cursor: pointer; transition: all .15s; flex: 0 0 auto; vertical-align: middle; position: relative; }
.login-agree .agree-check:checked { background: var(--primary-grad); border-color: var(--primary); }
.login-agree .agree-check:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.login-agree .agree-text { color: var(--text-2); }
.login-agree .link { color: var(--primary); cursor: pointer; }
.login-sms-tip { text-align: center; font-size: 11px; color: var(--text-4); margin-top: 10px; }
/* 登录方式切换（验证码 / 密码） */
.login-methods { display: flex; background: #faf6f7; border-radius: 999px; padding: 3px; margin-bottom: 16px; }
.login-methods button { flex: 1; border: none; background: transparent; padding: 8px 0; font-size: 13px; color: var(--text-2); border-radius: 999px; cursor: pointer; font-family: inherit; transition: all .15s; }
.login-methods button.on { background: #fff; color: var(--primary); font-weight: 600; box-shadow: var(--card-shadow-sm); }
.login-mode-panel { min-height: 118px; }
.pwd-help { display: flex; justify-content: space-between; font-size: 12px; margin: -6px 2px 10px; }
.pwd-help .link { color: var(--primary); cursor: pointer; }
.setpwd-tip { font-size: 12px; color: var(--text-2); background: var(--tint); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
/* 记住登录状态开关 */
.login-remember { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--text-2); margin-top: 14px; cursor: pointer; }
.login-remember input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }

/* ============ 钱包 ============ */
.rc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* ============ 网页充值弹层（抖音式：页面内右侧覆盖） ============ */
.rp-mask { position: fixed; inset: 0; background: rgba(15,18,30,.5); z-index: 600;
  display: flex; align-items: stretch; justify-content: flex-end; }
.rp-panel { width: 100%; max-width: 480px; background: #fff; box-shadow: -8px 0 32px rgba(0,0,0,.2);
  display: flex; flex-direction: column; animation: rp-slide-in .25s ease-out; }
@keyframes rp-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.rp-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
  background: linear-gradient(135deg, #dc143c, #ff2d3a); color: #fff; flex-shrink: 0; }
.rp-title { font-size: 16px; font-weight: 700; letter-spacing: 1px; }
.rp-close { width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(255,255,255,.2);
  color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rp-close:hover { background: rgba(255,255,255,.32); }
.rp-body { flex: 1; overflow-y: auto; padding: 18px; }
.rp-block { margin-bottom: 18px; }
.rp-block:last-child { margin-bottom: 0; }
.rp-block-title { font-size: 13px; color: var(--text-3); margin-bottom: 10px; }
.rp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rp-item { background: #faf6f7; border: 1.5px solid transparent; border-radius: 10px;
  padding: 10px 4px; text-align: center; cursor: pointer; transition: all .15s; }
.rp-item:hover { border-color: rgba(220,20,60,.2); }
.rp-item.on { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(220,20,60,.08); }
.rp-amount { font-size: 15px; font-weight: 600; color: var(--text); }
.rp-amount small { font-size: 11px; font-weight: 400; color: var(--text-3); margin-left: 1px; }
.rp-bonus { font-size: 10px; color: var(--primary); margin-top: 2px; min-height: 14px; }
.rp-agree { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); cursor: pointer; }
.rp-agree input { width: 14px; height: 14px; accent-color: var(--primary); cursor: pointer; }
.rp-agree a { color: var(--primary); }
.rp-pay-block { padding: 14px; background: #faf6f7; border-radius: 12px; }
.rp-pay-title { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; margin-bottom: 12px; }
.rp-pay-amount { font-size: 12px; color: var(--text-3); }
.rp-pay-amount em { color: var(--primary); font-weight: 700; font-style: normal; font-size: 18px; margin-left: 4px; }
.rp-pay-body { display: flex; gap: 16px; }
.rp-qr { width: 140px; height: 140px; flex-shrink: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rp-qr img { width: 100%; height: 100%; object-fit: contain; }
.rp-qr-fallback { padding: 8px; text-align: center; font-size: 11px; color: var(--text-3); line-height: 1.4; }
.rp-qr-fallback .ico { font-size: 24px; color: var(--text-3); opacity: .5; margin-bottom: 4px; }
.rp-qr-line1 { color: var(--text-2); font-weight: 600; }
.rp-pay-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rp-pay-methods { display: flex; flex-direction: column; gap: 6px; }
.rp-method { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.rp-method.on { color: var(--primary); font-weight: 600; }
.rp-method .ico { font-size: 16px; }
.rp-pay-tip { font-size: 11px; color: var(--text-3); line-height: 1.5; padding: 6px 8px; background: #fff; border-radius: 6px; }
.rp-pay-btn { width: 100%; margin-top: 14px; padding: 12px 0; border: none; border-radius: 999px;
  background: linear-gradient(135deg, #dc143c, #ff2d3a); color: #fff; font-size: 14px; font-weight: 600;
  cursor: pointer; box-shadow: 0 8px 20px rgba(220,20,60,.25); font-family: inherit; }
.rp-pay-btn:disabled { background: #e4e6ea; color: #a7adb8; box-shadow: none; cursor: not-allowed; }
/* 自定义金额卡（与普通档位同款，加文字提示） */
.rp-item-custom .rp-amount { font-size: 13px; }
.rp-item-custom .rp-bonus { color: var(--primary); }
/* 自定义金额输入弹层（参考 h5-recharge-v2 modal-input 风格） */
.rp-custom-modal { width: 78%; max-width: 320px; background: #fff; border-radius: 14px;
  padding: 22px 20px 16px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.rp-custom-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; color: var(--text); }
.rp-custom-input { width: 100%; border: 1px solid #e0e0e0; border-radius: 10px; padding: 12px 14px;
  font-size: 20px; font-weight: 600; color: var(--text); outline: none; background: #f7f8fa;
  font-family: inherit; }
.rp-custom-input:focus { border-color: var(--primary); background: #fff; }
.rp-custom-tip { font-size: 11px; color: var(--text-3); margin-top: 8px; }
.rp-custom-actions { display: flex; gap: 10px; margin-top: 14px; }
.rp-custom-cancel, .rp-custom-confirm { flex: 1; padding: 10px 0; border-radius: 999px; border: none;
  font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; }
.rp-custom-cancel { background: #f0f0f0; color: var(--text-2); }
.rp-custom-confirm { background: var(--primary-grad); color: #fff; }
.rp-custom-confirm:disabled { background: #e4e6ea; color: #a7adb8; cursor: not-allowed; }
@media (max-width: 540px) { .rp-mask { justify-content: center; } .rp-panel { max-width: 100%; } }
.rc-item { background: #faf6f7; border: 1px solid var(--line); border-radius: 14px; padding: 12px 6px; text-align: center; cursor: pointer; }
.rc-item:active { border-color: var(--primary); }
.rc-amount { font-size: 17px; font-weight: 700; }

/* ============ 充值协议 / 安全提示 正文弹层（对齐小程序弹全文） ============ */
.agree-doc-mask { position: fixed; inset: 0; background: rgba(15,18,30,.55); z-index: 800;
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.agree-doc-box { width: 100%; max-width: 420px; max-height: 76vh; background: #fff; border-radius: 14px;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.agree-doc-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
  background: linear-gradient(135deg, #dc143c, #ff2d3a); color: #fff; flex-shrink: 0; }
.agree-doc-title { font-size: 16px; font-weight: 700; letter-spacing: 1px; }
.agree-doc-close { width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(255,255,255,.2);
  color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.agree-doc-close:hover { background: rgba(255,255,255,.32); }
.agree-doc-body { flex: 1; overflow-y: auto; padding: 18px; }
.agree-doc-line { font-size: 13px; line-height: 1.7; color: var(--text-2); margin: 0 0 10px; }
.agree-doc-foot { padding: 12px 18px 16px; flex-shrink: 0; }
.agree-doc-ok { width: 100%; padding: 11px 0; border: none; border-radius: 999px;
  background: linear-gradient(135deg, #dc143c, #ff2d3a); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
.rc-amount small { font-size: 11px; font-weight: 400; color: var(--text-3); }
.rc-bonus { font-size: 10px; color: var(--primary); margin-top: 3px; min-height: 14px; }
.rc-get { font-size: 11px; color: var(--text-3); margin-top: 3px; }

/* ============ 消费记录 ============ */
.rec-summary { background: var(--primary-grad); border-radius: 24px; margin: 10px 12px; padding: 18px 16px; color: #fff; display: flex; }
.rec-summary .rs-item { flex: 1; text-align: center; }
.rec-summary .rs-item .rs-num { font-size: 20px; font-weight: 800; }
.rec-summary .rs-item .rs-label { font-size: 11px; opacity: .85; margin-top: 3px; }
.rec-tabs { display: flex; gap: 6px; background: #fff; padding: 10px 12px; margin: 0 12px; border-radius: 20px; }
.rec-tabs .rt { flex: 1; text-align: center; padding: 7px 0; font-size: 13px; color: var(--text-2); cursor: pointer; border-radius: 24px; }
.rec-tabs .rt.on { background: var(--primary-grad); color: #fff; font-weight: 600; }
.rec-item { display: flex; align-items: center; background: #fff; margin: 8px 12px; border-radius: 18px; padding: 12px 14px; }
.rec-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; margin-right: 12px; }
.rec-icon.recharge { background: #e6f0ff; color: #1890ff; }
.rec-icon.spend { background: #ffeaea; color: #ff4d4f; }
.rec-icon.cashback { background: #e9f9ee; color: #52c41a; }
.rec-mid { flex: 1; }
.rec-title { font-size: 14px; }
.rec-time { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.rec-amount { font-size: 15px; font-weight: 700; }
.rec-amount.plus { color: var(--green); }
.rec-amount.minus { color: var(--price); }

/* ============ 优惠券 ============ */
.coupon-card { display: flex; align-items: center; background: #fff; border-radius: 18px; margin: 8px 12px; overflow: hidden; box-shadow: var(--card-shadow-sm); }
.coupon-left { width: 100px; background: var(--primary-grad); color: #fff; text-align: center; padding: 16px 6px; flex: 0 0 100px; display: flex; flex-direction: column; justify-content: center; }
.coupon-left .cp-amt { font-size: 24px; font-weight: 800; }
.coupon-left .cp-amt small { font-size: 11px; font-weight: 400; }
.coupon-left .cp-cond { font-size: 10px; opacity: .85; margin-top: 3px; }
.coupon-mid { flex: 1; padding: 12px 14px; }
.coupon-name { font-size: 15px; font-weight: 700; }
.coupon-expire { font-size: 11px; color: var(--text-3); margin-top: 5px; }
.coupon-use { background: var(--primary-grad); color: #fff; border: none; border-radius: 24px; padding: 7px 18px; font-size: 12px; font-weight: 600; cursor: pointer; margin-right: 12px; }
.coupon-card.used { opacity: .55; }
.coupon-card.used .coupon-left { background: #b9b9b9; }
.coupon-card.used .coupon-use { background: #b9b9b9; box-shadow: none; }
.coupon-tabs { display: flex; gap: 6px; background: #fff; padding: 10px 12px; margin: 0 12px; border-radius: 20px; }
.coupon-tabs .ct { flex: 1; text-align: center; padding: 7px 0; font-size: 13px; color: var(--text-2); cursor: pointer; border-radius: 24px; }
.coupon-tabs .ct.on { background: var(--primary-grad); color: #fff; font-weight: 600; }

/* ============ VIP ============ */
.vip-hero { background: linear-gradient(135deg, #2c0a14, #1a0306); padding: 22px 18px; color: #fff; }
.vh-level { font-size: 32px; font-weight: 900; color: #ffd76a; }
.vh-growth { font-size: 13px; margin-top: 6px; opacity: .9; }
.vh-growth b { color: #ffd76a; }
.vip-progress { height: 6px; background: rgba(255,255,255,.2); border-radius: 3px; overflow: hidden; margin: 12px 0 6px; }
.vip-progress i { display: block; height: 100%; background: linear-gradient(90deg, #f7d488, #e8a93c); border-radius: 3px; }
.vh-next { font-size: 11px; opacity: .7; }
.lv-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 14px; scroll-snap-type: x mandatory; background: var(--bg); }
.lv-card { flex: 0 0 160px; scroll-snap-align: center; background: #fff; border-radius: 24px; padding: 18px 14px; border: 3px solid #f0e8ea; text-align: center; }
.lv-card .lv-num { font-size: 26px; font-weight: 900; background: var(--primary-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.lv-card .lv-min { font-size: 11px; color: var(--text-3); margin-top: 6px; }
.lv-card .lv-benefit { display: inline-block; margin-top: 8px; font-size: 10px; padding: 3px 10px; border-radius: 20px; background: #fff4f6; color: var(--primary); }
.lv-card.cur { border-color: #e8a93c; background: linear-gradient(180deg, #fffdf5, #fff6e0); box-shadow: 0 8px 30px rgba(232,169,60,.25); }
.lv-card.cur .lv-num { color: #e8a93c; }
.lv-card.cur .reach { display: inline-block; margin-top: 8px; font-size: 10px; padding: 3px 10px; border-radius: 20px; background: linear-gradient(135deg, #f7d488, #e8a93c); color: #fff; font-weight: 600; }
.benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 4px 12px; }
.benefit-item { background: #fff; border-radius: 18px; padding: 14px; box-shadow: var(--card-shadow-sm); }
.benefit-item .bi-ico { width: 40px; height: 40px; border-radius: 12px; background: #fff4f6; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.benefit-item .bi-name { font-size: 14px; font-weight: 600; margin-top: 8px; }
.benefit-item .bi-desc { font-size: 11px; color: var(--text-3); margin-top: 4px; line-height: 1.5; }
.benefit-item.locked { opacity: .5; }
.benefit-item .bi-lock { font-size: 10px; color: var(--text-3); margin-top: 6px; }

/* ============ 陪玩 ============ */
.cp-hero { background: linear-gradient(135deg, #2c0a14, #1a0306); padding: 18px 16px 22px; }
.cp-search { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 48px; padding: 9px 14px; }
.cp-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; color: var(--text); }
.cp-search .search-btn { width: 56px; height: 56px; border-radius: 50%; background: var(--primary-grad); border: none; color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.game-tabs { display: flex; gap: 6px; background: #fff; padding: 10px 12px; overflow-x: auto; }
.game-tab { flex: 0 0 auto; padding: 7px 18px; border-radius: 28px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.game-tab.on { background: var(--primary-grad); color: #fff; font-weight: 600; }
.sub-tabs { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; }
.sub-tab { flex: 0 0 auto; padding: 6px 14px; border-radius: 24px; font-size: 12px; background: var(--tint); color: var(--primary); cursor: pointer; }
.sub-tab.on { background: var(--primary-grad); color: #fff; font-weight: 600; }
.cp-sort { display: flex; gap: 6px; padding: 0 12px 8px; }
.cp-sort .cs-item { padding: 6px 14px; border-radius: 24px; border: 1px solid #eee; font-size: 12px; color: var(--text-2); cursor: pointer; }
.cp-sort .cs-item.on { border-color: var(--primary); color: var(--primary); background: var(--tint); }
.cp-list { padding: 4px 12px 12px; }
.companion-card { display: flex; align-items: center; background: #fff; border-radius: 20px; padding: 14px; margin-bottom: 10px; box-shadow: var(--card-shadow-sm); cursor: pointer; }
.cc-avatar { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; flex: 0 0 80px; background: linear-gradient(135deg, #ff9a9e, #fad0c4); display: flex; align-items: center; justify-content: center; font-size: 34px; }
.cc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cc-main { flex: 1; padding-left: 12px; min-width: 0; }
.cc-name { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.cc-online { color: var(--green); font-size: 11px; }
.cc-recommend { font-size: 11px; color: #999; margin-top: 3px; }
.cc-tags { margin-top: 5px; }
.cc-tag { display: inline-block; font-size: 10px; padding: 1px 8px; border-radius: 6px; margin-right: 4px; }
.tag-lv1 { background: #f3e8ff; color: #9333ea; } .tag-lv2 { background: #ede9fe; color: #6d28d9; }
.tag-lv3 { background: #e9d5ff; color: #7e22ce; } .tag-lv4 { background: #6b21a8; color: #f3e8ff; }
.tag-lv5 { background: linear-gradient(135deg, #3b0764, #581c87); color: #ffd76a; }
.cc-right { text-align: right; }
.cc-status { display: inline-block; font-size: 11px; padding: 3px 10px; border-radius: 20px; }
.status-free { background: #ffe1e6; color: var(--primary); }
.status-busy { background: #f3e9eb; color: #999; }
.cc-orders { font-size: 11px; color: #555; margin-top: 6px; }
.cc-rating { color: var(--primary); font-size: 12px; font-weight: 600; margin-top: 2px; }

/* ============ 陪玩详情（黑红主题） ============ */
.cd-page { background: #1a0306; color: #fff; min-height: 100vh; padding-bottom: calc(90px + var(--safe-bottom)); }
.cd-hero { background: linear-gradient(180deg, #2c0a14, #1a0306 80%); padding: 24px 16px 18px; text-align: center; }
.cd-avatar { width: 90px; height: 90px; border-radius: 50%; margin: 0 auto 12px; background: linear-gradient(135deg, #ff9a9e, #fad0c4); display: flex; align-items: center; justify-content: center; font-size: 38px; overflow: hidden; border: 2px solid rgba(255,255,255,.6); }
.cd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cd-name { font-size: 20px; font-weight: 600; }
.cd-rank { margin-top: 8px; }
.cd-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 24px; margin: 10px 12px; padding: 14px 16px; }
.cd-card .cd-label { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: #fff; }
.cd-card .cd-text { font-size: 13px; color: rgba(255,255,255,.8); line-height: 1.7; }
.cd-card .info-row { border-bottom-color: rgba(255,255,255,.08); color: rgba(255,255,255,.75); }
.cd-card .info-row .ir-label { color: rgba(255,255,255,.5); }
.cd-bottom-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 720px; z-index: 90;
  background: rgba(15,5,8,.98); padding: 10px 16px calc(10px + var(--safe-bottom)); }
.cd-bottom-bar .cdb-btn { width: 100%; background: linear-gradient(135deg, #f5b800, #ff7a18); color: #fff; border: none; border-radius: 48px; padding: 13px 0; font-size: 15px; font-weight: 700; cursor: pointer; }
@media (min-width: 1024px) { .cd-bottom-bar { max-width: 1024px; } }

/* ============ 文档页（关于/协议） ============ */
.doc-page { padding: 12px; }
.doc-card { background: #fff; border-radius: 20px; padding: 18px; margin-bottom: 12px; box-shadow: var(--card-shadow); }
.doc-title { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 14px; }
.doc-h { color: var(--primary); font-size: 15px; font-weight: 700; margin: 14px 0 8px; display: flex; align-items: center; gap: 8px; }
.doc-h::before { content: ''; width: 6px; height: 26px; background: var(--primary-grad); border-radius: 3px; }
.doc-p { font-size: 13px; color: #444; line-height: 1.8; margin-bottom: 6px; }
.doc-warn { background: var(--tint); color: var(--primary); border-radius: 12px; padding: 12px; font-size: 13px; line-height: 1.7; margin-top: 10px; }

/* ============ 福利/推荐/入驻 hero ============ */
.hero-card { padding: 34px 20px; text-align: center; color: #fff; background: var(--primary-grad); border-radius: 0 0 40px 40px; }
.hero-card .hc-title { font-size: 22px; font-weight: 700; }
.hero-card .hc-sub { font-size: 12px; opacity: .85; margin-top: 8px; }
.rule-list { font-size: 13px; color: #444; line-height: 1.9; }
.rule-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); margin-right: 8px; }

/* ============ 弹层 ============ */
.sheet-mask { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 400; }
.sheet { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 720px; z-index: 410;
  background: #fff; border-radius: 28px 28px 0 0; padding: 16px 14px calc(16px + var(--safe-bottom)); max-height: 70vh; display: flex; flex-direction: column; }
.sheet .sheet-title { text-align: center; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.sheet .sheet-list { overflow-y: auto; flex: 1; }
.sheet-item { display: flex; align-items: center; justify-content: space-between; padding: 13px 4px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14px; }
.sheet-item.on { color: var(--primary); font-weight: 600; }
.sheet-item:last-child { border-bottom: none; }

/* Toast / Modal */
.toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999;
  background: rgba(0,0,0,.8); color: #fff; padding: 12px 20px; border-radius: 14px; font-size: 14px; max-width: 70%; text-align: center; }
.toast.success { background: rgba(7,193,96,.9); }
.toast.error { background: rgba(220,20,60,.9); }
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 500; display: flex; align-items: center; justify-content: center; }
.modal-box { width: 84%; max-width: 440px; background: #fff; border-radius: 28px; padding: 22px 18px; }
.modal-box .modal-title { font-size: 16px; font-weight: 700; text-align: center; margin-bottom: 12px; }
.modal-box .modal-body { font-size: 14px; color: var(--text-2); line-height: 1.7; max-height: 55vh; overflow-y: auto; text-align: center; }
.modal-box .modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-box .modal-actions .btn { flex: 1; padding: 12px 0; font-size: 15px; border-radius: 48px; }

/* 富文本 */
.rich-text { font-size: 13px; color: var(--text-2); line-height: 1.8; }
.rich-text h3 { color: var(--primary); font-size: 15px; margin: 12px 0 6px; }

/* 骨架屏 */
.skeleton { background: linear-gradient(90deg, #f0ecee 25%, #f7f4f5 50%, #f0ecee 75%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 8px; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* 空态 */
.empty { display: flex; flex-direction: column; align-items: center; padding: 60px 0; color: var(--text-3); }
.empty .empty-ico { font-size: 52px; margin-bottom: 14px; opacity: .4; }
.empty .empty-tip { font-size: 13px; }

/* 滚动条 */
::-webkit-scrollbar { width: 0; height: 0; }

/* ============ 补充样式 ============ */
/* 陪玩等级徽章 */
.rank-lv { display: inline-block; padding: 3px 12px; border-radius: 10px; font-size: 12px; font-weight: 700; color: #fff; }
.tag-lv1 { background: #f3e8ff; color: #9333ea; }
.tag-lv2 { background: #ede9fe; color: #6d28d9; }
.tag-lv3 { background: #e9d5ff; color: #7e22ce; }
.tag-lv4 { background: #6b21a8; color: #f3e8ff; }
.tag-lv5 { background: linear-gradient(135deg, #3b0764, #581c87); color: #ffd76a; }

/* VIP 等级行 */
.level-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.level-row:last-child { border-bottom: none; }
.lv-name { font-weight: 700; font-size: 14px; }
.lv-name.gold { color: var(--gold); }

/* 陪玩详情 info-row 覆盖 */
.cd-card .info-row { border-bottom: 1px solid rgba(255,255,255,.08); padding: 9px 0; font-size: 13px; display: flex; }
.cd-card .info-row .ir-label { color: rgba(255,255,255,.5); width: 92px; flex: 0 0 92px; }
.cd-card .info-row .ir-value { flex: 1; text-align: right; }

/* 用户协议 doc-page 底部留白 */
.doc-page { padding-bottom: 40px; }

/* 表单占位提示（下单页右对齐输入） */
.field input { text-align: right; }
.field textarea { text-align: left; }
/* 抽自小程序 app.wxss 的 SVG mask 图标 */
.ico-wallet {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M3 7l9-4 9 4'/><path d='M3 7v3h18v-3'/><circle cx='17' cy='13' r='1.5'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M3 7l9-4 9 4'/><path d='M3 7v3h18v-3'/><circle cx='17' cy='13' r='1.5'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-coin {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 6v12M9 9h4.5a2 2 0 0 1 0 4H10a2 2 0 0 0 0 4h5'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 6v12M9 9h4.5a2 2 0 0 1 0 4H10a2 2 0 0 0 0 4h5'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-cashback {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12V8a2 2 0 0 0-2-2H5a2 2 0 0 1 0-4h14v4'/><path d='M3 6v12a2 2 0 0 0 2 2h15v-4'/><path d='M16 14h.01M19 14h.01'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12V8a2 2 0 0 0-2-2H5a2 2 0 0 1 0-4h14v4'/><path d='M3 6v12a2 2 0 0 0 2 2h15v-4'/><path d='M16 14h.01M19 14h.01'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-gift {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='13' rx='1'/><path d='M3 12h18M12 8v13M8 8a2 2 0 1 1 4-2 2 2 0 1 1 4 2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='13' rx='1'/><path d='M3 12h18M12 8v13M8 8a2 2 0 1 1 4-2 2 2 0 1 1 4 2'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-recharge {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v16M5 11l7-7 7 7'/><circle cx='12' cy='18' r='2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v16M5 11l7-7 7 7'/><circle cx='12' cy='18' r='2'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-referral {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='12' r='3'/><circle cx='18' cy='6' r='3'/><circle cx='18' cy='18' r='3'/><path d='M9 11l6-3.5M9 13l6 3.5'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='12' r='3'/><circle cx='18' cy='6' r='3'/><circle cx='18' cy='18' r='3'/><path d='M9 11l6-3.5M9 13l6 3.5'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-onboarding {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 9h14a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2v2l-4-2H7a2 2 0 0 1-2-2v-6a2 2 0 0 1 0-2z'/><path d='M9 13v2M15 13v2M12 13v2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 9h14a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2v2l-4-2H7a2 2 0 0 1-2-2v-6a2 2 0 0 1 0-2z'/><path d='M9 13v2M15 13v2M12 13v2'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-records {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='2'/><path d='M8 8h8M8 12h8M8 16h5'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='2'/><path d='M8 8h8M8 12h8M8 16h5'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-tag {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12V4a1 1 0 0 1 1-1h8l9 9-9 9-9-9z'/><circle cx='7' cy='8' r='1.5'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12V4a1 1 0 0 1 1-1h8l9 9-9 9-9-9z'/><circle cx='7' cy='8' r='1.5'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-customer-service {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 13a8 8 0 0 1 16 0M4 13v3a2 2 0 0 0 2 2h1v-7H6a2 2 0 0 0-2 2zM20 13v3a2 2 0 0 1-2 2h-1v-7h1a2 2 0 0 1 2 2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 13a8 8 0 0 1 16 0M4 13v3a2 2 0 0 0 2 2h1v-7H6a2 2 0 0 0-2 2zM20 13v3a2 2 0 0 1-2 2h-1v-7h1a2 2 0 0 1 2 2z'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-user {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 4-7 8-7s8 3 8 7'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 4-7 8-7s8 3 8 7'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-logout {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-vip {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3l2 6h8l2-6M6 9l-2 12h16L18 9M9 14h6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3l2 6h8l2-6M6 9l-2 12h16L18 9M9 14h6'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-wechat {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 4C5.4 4 2 6.7 2 10.2c0 1.9 1.1 3.6 2.8 4.7L4 17l2.5-1.4c.9.3 1.9.4 3 .4.2 0 .5 0 .7-.1-.2-.5-.2-1-.2-1.5 0-3.1 3-5.7 6.7-5.7h.5C16.7 5.6 13.4 4 9.5 4zm-2 3c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm5 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM16 9.7c-3.2 0-5.8 2.2-5.8 4.8 0 2.7 2.6 4.8 5.8 4.8.7 0 1.4-.1 2.1-.3L20 20l-.6-1.6c1.4-.9 2.3-2.3 2.3-3.9 0-2.6-2.6-4.8-5.7-4.8zm-1.7 2.5c.4 0 .8.4.8.8s-.4.8-.8.8-.8-.4-.8-.8.4-.8.8-.8zm3.4 0c.4 0 .8.4.8.8s-.4.8-.8.8-.8-.4-.8-.8.4-.8.8-.8z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 4C5.4 4 2 6.7 2 10.2c0 1.9 1.1 3.6 2.8 4.7L4 17l2.5-1.4c.9.3 1.9.4 3 .4.2 0 .5 0 .7-.1-.2-.5-.2-1-.2-1.5 0-3.1 3-5.7 6.7-5.7h.5C16.7 5.6 13.4 4 9.5 4zm-2 3c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm5 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM16 9.7c-3.2 0-5.8 2.2-5.8 4.8 0 2.7 2.6 4.8 5.8 4.8.7 0 1.4-.1 2.1-.3L20 20l-.6-1.6c1.4-.9 2.3-2.3 2.3-3.9 0-2.6-2.6-4.8-5.7-4.8zm-1.7 2.5c.4 0 .8.4.8.8s-.4.8-.8.8-.8-.4-.8-.8.4-.8.8-.8zm3.4 0c.4 0 .8.4.8.8s-.4.8-.8.8-.8-.4-.8-.8.4-.8.8-.8z'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-wallet-pay {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M3 7l9-4 9 4'/><path d='M3 7v3h18v-3'/><circle cx='17' cy='13' r='1.5'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M3 7l9-4 9 4'/><path d='M3 7v3h18v-3'/><circle cx='17' cy='13' r='1.5'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-wechat-pay {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 4C5.4 4 2 6.7 2 10.2c0 1.9 1.1 3.6 2.8 4.7L4 17l2.5-1.4c.9.3 1.9.4 3 .4.2 0 .5 0 .7-.1-.2-.5-.2-1-.2-1.5 0-3.1 3-5.7 6.7-5.7h.5C16.7 5.6 13.4 4 9.5 4zm-2 3c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm5 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM16 9.7c-3.2 0-5.8 2.2-5.8 4.8 0 2.7 2.6 4.8 5.8 4.8.7 0 1.4-.1 2.1-.3L20 20l-.6-1.6c1.4-.9 2.3-2.3 2.3-3.9 0-2.6-2.6-4.8-5.7-4.8zm-1.7 2.5c.4 0 .8.4.8.8s-.4.8-.8.8-.8-.4-.8-.8.4-.8.8-.8zm3.4 0c.4 0 .8.4.8.8s-.4.8-.8.8-.8-.4-.8-.8.4-.8.8-.8z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 4C5.4 4 2 6.7 2 10.2c0 1.9 1.1 3.6 2.8 4.7L4 17l2.5-1.4c.9.3 1.9.4 3 .4.2 0 .5 0 .7-.1-.2-.5-.2-1-.2-1.5 0-3.1 3-5.7 6.7-5.7h.5C16.7 5.6 13.4 4 9.5 4zm-2 3c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm5 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM16 9.7c-3.2 0-5.8 2.2-5.8 4.8 0 2.7 2.6 4.8 5.8 4.8.7 0 1.4-.1 2.1-.3L20 20l-.6-1.6c1.4-.9 2.3-2.3 2.3-3.9 0-2.6-2.6-4.8-5.7-4.8zm-1.7 2.5c.4 0 .8.4.8.8s-.4.8-.8.8-.8-.4-.8-.8.4-.8.8-.8zm3.4 0c.4 0 .8.4.8.8s-.4.8-.8.8-.8-.4-.8-.8.4-.8.8-.8z'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-status-unpaid {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-status-pending {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9 12h6M12 9v6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9 12h6M12 9v6'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-status-ongoing {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 6l3 3-3 3M9 12l-3 3 3 3'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 6l3 3-3 3M9 12l-3 3 3 3'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-status-completed {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8 12l3 3 5-5'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8 12l3 3 5-5'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-status-cancelled {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8 8l8 8M16 8l-8 8'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8 8l8 8M16 8l-8 8'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-tl-1 {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-tl-2 {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='8' width='16' height='12' rx='2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='8' width='16' height='12' rx='2'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-tl-3 {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16v16H4z' fill='none' stroke='%23dc143c' stroke-width='2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16v16H4z' fill='none' stroke='%23dc143c' stroke-width='2'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-tl-4 {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-tl-cancelled {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-empty-box {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7l9-4 9 4v10l-9 4-9-4z'/><path d='M3 7l9 4 9-4M12 11v10'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7l9-4 9 4v10l-9 4-9-4z'/><path d='M3 7l9 4 9-4M12 11v10'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-promo {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3l7 7-3 3-7-7zM11 6L3 14v7h7l8-8'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3l7 7-3 3-7-7zM11 6L3 14v7h7l8-8'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}.ico-back {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-search {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.5-4.5'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.5-4.5'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-back {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-share {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='18' cy='5' r='3'/><circle cx='6' cy='12' r='3'/><circle cx='18' cy='19' r='3'/><path d='M8.5 13.5l7 4M15.5 6.5l-7 4'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='18' cy='5' r='3'/><circle cx='6' cy='12' r='3'/><circle cx='18' cy='19' r='3'/><path d='M8.5 13.5l7 4M15.5 6.5l-7 4'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-gift {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='13' rx='1'/><path d='M3 12h18M12 8v13M8 8a2 2 0 1 1 4-2 2 2 0 1 1 4 2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='13' rx='1'/><path d='M3 12h18M12 8v13M8 8a2 2 0 1 1 4-2 2 2 0 1 1 4 2'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-action-follow {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-4.5-9-9.5C1.5 7 4 4 7 4c2 0 3.5 1 5 3 1.5-2 3-3 5-3 3 0 5.5 3 4 7.5-2 5-9 9.5-9 9.5z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-4.5-9-9.5C1.5 7 4 4 7 4c2 0 3.5 1 5 3 1.5-2 3-3 5-3 3 0 5.5 3 4 7.5-2 5-9 9.5-9 9.5z'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-action-like {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.3a2 2 0 0 0 2-1.7l1.4-9A2 2 0 0 0 19.7 9H14zM7 22H3a1 1 0 0 1-1-1V12a1 1 0 0 1 1-1h4v11z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.3a2 2 0 0 0 2-1.7l1.4-9A2 2 0 0 0 19.7 9H14zM7 22H3a1 1 0 0 1-1-1V12a1 1 0 0 1 1-1h4v11z'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-back {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-back {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-back {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 18l-6-6 6-6'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
/* ============ 商品详情图标（服务承诺 / 区块标题）============
   规范：全站禁止使用 emoji 或装饰性字符（勾号、闪电、锁、剪贴板、灯泡等）充当图标，
   一律使用下列 SVG mask 图标（.ico + .ico-xxx，颜色跟随 currentColor）。 */
.ico-shield-check {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7.5 3v5.4c0 4.3-3.1 8.1-7.5 9.1-4.4-1-7.5-4.8-7.5-9.1V6L12 3z'/><path d='M9 12.2l2.2 2.2 3.9-4.4'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7.5 3v5.4c0 4.3-3.1 8.1-7.5 9.1-4.4-1-7.5-4.8-7.5-9.1V6L12 3z'/><path d='M9 12.2l2.2 2.2 3.9-4.4'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-bolt {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M13.2 2.5L5 13.2h5.6L10.8 21.5 19 10.8h-5.6l-.2-8.3z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M13.2 2.5L5 13.2h5.6L10.8 21.5 19 10.8h-5.6l-.2-8.3z'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-lock {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4.5' y='10.2' width='15' height='10.3' rx='2.2'/><path d='M8 10.2V7.6a4 4 0 0 1 8 0v2.6'/><path d='M12 14.3v2.3'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4.5' y='10.2' width='15' height='10.3' rx='2.2'/><path d='M8 10.2V7.6a4 4 0 0 1 8 0v2.6'/><path d='M12 14.3v2.3'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-refund {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8.6h9.2a5.6 5.6 0 0 1 0 11.2H7.6'/><path d='M7.8 3.8L3.4 8.6l4.4 4.8'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8.6h9.2a5.6 5.6 0 0 1 0 11.2H7.6'/><path d='M7.8 3.8L3.4 8.6l4.4 4.8'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-doc-text {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7.5A2.5 2.5 0 0 0 5 5.5v13A2.5 2.5 0 0 0 7.5 21h9a2.5 2.5 0 0 0 2.5-2.5V8l-5-5z'/><path d='M14 3v5h5'/><path d='M8.6 13h6.8M8.6 16.6h4.4'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7.5A2.5 2.5 0 0 0 5 5.5v13A2.5 2.5 0 0 0 7.5 21h9a2.5 2.5 0 0 0 2.5-2.5V8l-5-5z'/><path d='M14 3v5h5'/><path d='M8.6 13h6.8M8.6 16.6h4.4'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-info {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11.2v5'/><path d='M12 7.6v.9'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11.2v5'/><path d='M12 7.6v.9'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-flow {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='5.8' r='2.6'/><circle cx='18' cy='18.2' r='2.6'/><path d='M6 8.4v5.2a4 4 0 0 0 4 4h5.4'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='5.8' r='2.6'/><circle cx='18' cy='18.2' r='2.6'/><path d='M6 8.4v5.2a4 4 0 0 0 4 4h5.4'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}

/* 行尾「进入下一级」箭头：替代 › 等装饰字符 */
.ico-chevron-right {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18l6-6-6-6'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}

/* 菜单（汉堡）/ 关闭 图标 */
.ico-menu {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16M4 12h16M4 17h16'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16M4 12h16M4 17h16'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
.ico-close {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: currentColor;
  display: inline-block;
}
/* 补充图标尺寸 */
.cate-entry .ico-menu { width: 14px; height: 14px; }
.nm-close .ico { width: 18px; height: 18px; }
.search-clear .ico { width: 12px; height: 12px; }

/* ============ SVG mask 图标通用尺寸 ============ */
.ico { display: inline-block; vertical-align: middle; }
/* 订单四宫格 24px 红色 */
.oq-ico.ico { width: 24px; height: 24px; color: var(--primary); }
/* 快捷四宫格 28px 红色（粉色底容器内） */
.qi-ico.ico { width: 28px; height: 28px; color: var(--primary); }
/* 菜单左侧 18px 红色 */
.mi-ico.ico { width: 18px; height: 18px; color: var(--primary); }
/* 顶部头像 / TabBar / 其他小图标 */
.tab-ico.ico { width: 22px; height: 22px; }
/* 优惠/福利/记录 等 */
.rec-icon.ico { width: 18px; height: 18px; }
/* 底部操作栏通用 */
.action-icon.ico { width: 20px; height: 20px; }

/* 记录 icon SVG 容器 */
.rec-icon { color: var(--primary); background-color: currentColor; -webkit-mask-image: none; mask-image: none; }
.rec-icon i.ico { width: 18px; height: 18px; background: #fff; }
.rec-icon.recharge { background: #e6f0ff; color: #1890ff; }
.rec-icon.spend { background: #ffeaea; color: #ff4d4f; }
.rec-icon.cashback { background: #e9f9ee; color: #52c41a; }
.rec-icon i.ico { background-color: currentColor; }

/* records 卡片 icon 容器（圆色块 + 内嵌 SVG icon）*/
.rec-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 36px; margin-right: 12px; }
.rec-icon i.ico { width: 18px; height: 18px; }
.rec-icon.recharge { background: #e6f0ff; color: #1890ff; }
.rec-icon.spend { background: #ffeaea; color: #ff4d4f; }
.rec-icon.cashback { background: #e9f9ee; color: #52c41a; }

/* ============ 占位块 / 空态 SVG icon ============ */
.img-ph { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: linear-gradient(135deg, #f7eef0, #f0e6e9); color: #d08a96; font-weight: 600; font-size: 40px; }
.empty-ico.ico { width: 52px; height: 52px; color: #c9bdc1; margin-bottom: 14px; }
.search-icon { display: inline-block; width: 16px; height: 16px; color: var(--text-3); }
.po-ico.ico { width: 18px; height: 18px; color: var(--primary); }
.wx-ico.ico { width: 20px; height: 20px; color: #fff; }
.sb-ico.ico { width: 15px; height: 15px; color: var(--text-3); }
.search-btn .ico { width: 22px; height: 22px; color: #fff; }

/* ============ 评价弹层（P2B T02） ============ */
.rating-sheet { padding: 4px 2px 8px; }
.rating-sheet .rs-label { font-size: 13px; color: var(--text); margin-bottom: 8px; }
.rating-sheet .rs-stars { display: flex; align-items: center; gap: 6px; }
.rating-sheet .rs-star { font-size: 30px; line-height: 1; color: #ddd; cursor: pointer; user-select: none; }
.rating-sheet .rs-star.on { color: #ffb400; }
.rating-sheet .rs-score-text { font-size: 13px; color: var(--primary); margin-left: 6px; }
.rating-sheet .rs-textarea { width: 100%; min-height: 72px; border: 1px solid #eee; border-radius: 12px; padding: 10px 12px; font-size: 14px; font-family: inherit; resize: none; outline: none; box-sizing: border-box; background: #fafafa; }
.rating-sheet .rs-anon { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); margin-top: 12px; cursor: pointer; }
.rating-sheet .rs-content { background: #fafafa; border-radius: 12px; padding: 12px; font-size: 14px; line-height: 1.6; color: var(--text); }
.rating-sheet .rs-empty { background: #fafafa; border-radius: 12px; padding: 12px; font-size: 13px; color: var(--text-3); }
.rating-sheet .rs-time { margin-top: 8px; font-size: 11px; color: var(--text-3); }

/* 分类搜索框（云端 getProducts 不支持 keyword，前端按 title 过滤已加载数据） */
.search-bar .search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 13px; color: var(--text); font-family: inherit; }
.search-bar .search-input::placeholder { color: var(--text-3); }
.search-bar .search-clear { width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; background: #d5d6dc; color: #fff; font-size: 12px; cursor: pointer; margin-left: 4px; }

/* ============ PC / 平板 响应式优化 ============
   原则：<720px 手机端零回归（商品网格仍 2 列、卡片图 130px 高、布局与现在完全一致）；
   720-1023px 平板：商品网格自适应（3 列左右）+ 卡片方形图；
   ≥1024px PC：商品网格 4 列 + 方形图、底部弹层与 #app/底部栏同宽对齐、桌面滚动条。 */
@media (min-width: 720px) {
  /* 商品网格：min 200px 自适应列数（不再固定 2 列横向拉伸）。
     auto-fill 保证卡片宽度稳定（≥200px），列数随容器宽度自动增减：
     - 首页 720px 容器 ≈ 3 列 / 1024px 容器 ≈ 4 列
     - 分类页主区（扣除 88px 侧栏）720px ≈ 2 列 / 1024px ≈ 4 列 */
  .goods-list,
  .cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  /* 卡片图片：固定 130px 高 → 1:1 方形比例（高度随列宽自适应，不拉伸变形） */
  .goods-card .goods-img {
    height: auto;
    aspect-ratio: 1 / 1;
  }
  /* 会员权益卡片：2 列 → 自适应（平板 3 列 / PC 4 列） */
  .benefit-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (min-width: 1024px) {
  /* 底部弹层补齐与 #app / 底部操作栏一致的 1024 宽（原固定 720 会与容器错位） */
  .sheet {
    max-width: 1024px;
  }
  /* 首页 Banner：PC 常规网页全宽（占满 #app 内容宽），网页版 1920×400 规格；
     去居中、去 max-width，max-height 400px 仅作异常图兜底；slide img object-fit:cover 裁切适配 */
  .banner-swiper {
    height: auto;
    aspect-ratio: 1920 / 400;
    max-height: 400px;
    width: 100%;
    margin: 0;
  }
  /* 去掉 banner wrap 左右 padding，让 banner 区贴合内容区边缘（PC 风格） */
  .banner-wrap { padding: 0; }
  /* 商品详情主图：宽屏下限制最大尺寸，避免 logo 被过度拉伸 */
  .p-main-img { height: 420px; }

  /* PC：左服务详情 / 右吸顶下单面板（参考 Tmall） */
  .p-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-3);
    margin-bottom: 18px;
    padding: 0 4px;
  }
  .p-breadcrumb .bc-item { cursor: pointer; transition: color .15s; }
  .p-breadcrumb .bc-item:hover { color: var(--primary); }
  .p-breadcrumb .bc-sep { color: #d5d0d2; }
  .p-breadcrumb .bc-current { color: var(--text); font-weight: 500; }

  /* 页面顶部主标题：PC 与 .p-detail-wrap 共用 640+400+32=1072px 中轴左对齐 */
  .p-page-head { max-width: 1072px; margin: 6px auto 20px; }
  .p-page-title { font-size: 24px; }

  .p-detail-wrap {
    display: grid;
    grid-template-columns: minmax(0, 640px) 400px;
    grid-template-areas: "left box";
    gap: 32px;
    padding: 0;
    justify-content: center;
    align-items: start;
  }
  .p-left-col { grid-area: left; display: flex; flex-direction: column; gap: 16px; }
  .p-left-col .p-main-img { width: 100%; height: 460px; border-radius: 16px; box-shadow: var(--pd-sh-1); }
  .p-left-col .p-detail-body { margin-top: 0; gap: 16px; }

  /* 服务承诺条：PC 单行四列平铺 */
  .p-service-promise {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    border-radius: 16px;
    padding: 16px 20px;
  }
  .p-service-promise .sp-item { font-size: 13px; }
  .p-service-promise .sp-ico-wrap { width: 26px; height: 26px; }
  .p-service-promise .sp-icon { width: 15px; height: 15px; }

  .p-buy-box {
    grid-area: box;
    position: sticky;
    top: 84px;
    align-self: start;
    margin-top: 0;
    border-radius: 16px;
    box-shadow: var(--pd-sh-2);
    border: 1px solid var(--line-2);
    padding: 24px;
  }
  .p-buy-box .p-sku-price .pp-num { font-size: 34px; }
  .p-buy-box .p-sku-price .pp-unit { font-size: 15px; }
  .p-buy-box .p-price-note { font-size: 12px; }
  .p-buy-box .p-sku-title { font-size: 18px; margin-top: 12px; }
  .p-buy-box .p-section { padding: 18px 0 0; margin-top: 18px; }
  .p-buy-box .p-buy-actions { display: block; margin-top: 22px; }

  .p-detail-body .p-section { border-radius: 16px; padding: 22px; box-shadow: var(--pd-sh-1); }
  .p-detail-body .sec-label { font-size: 15px; margin-bottom: 14px; }
  .p-detail-body .sec-icon { width: 17px; height: 17px; }
  .p-flow { gap: 16px; }
  .p-flow .pf-step::after { bottom: -16px; }

  .p-bottom-bar.mobile-only { display: none; }
  /* 桌面端显示细滚动条（移动端保持隐藏；仅 ≥1024px 生效） */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .18);
    border-radius: 4px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* ============ PC 常规网页布局（仅 ≥1024px 生效；<1024px 手机/平板零回归） ============
   目标：PC 下从「手机壳拉宽」变为常规网页 —— 宽容器 1400px 居中 + 顶部导航 + 页脚 + 多列内容 +
   底部操作栏流式化（不再 fixed 悬浮）+ 弹层居中。 */
/* PC 导航/页脚默认隐藏（移动端/平板不渲染视觉） */
.pc-nav { display: none; }
.pc-footer { display: none; }

/* 合规备案公示条：移动端 + PC 均显示（置于页面底部，链接工信部备案系统） */
.site-filing { display: block; background: #fafbfc; border-top: 1px solid var(--line); text-align: center; padding: 10px 14px calc(10px + var(--safe-bottom)); font-size: 12px; color: var(--text-4); line-height: 1.9; }
.site-filing a { color: var(--text-3); text-decoration: none; }
.site-filing a:hover { color: var(--primary); }
.site-filing .filing-sep { margin: 0 6px; color: var(--line); }
/* 移动端：固定 TabBar 高度约 52px，给公示条留出底部间距避免被遮挡 */
@media (max-width: 1023px) { .site-filing { margin-bottom: calc(60px + var(--safe-bottom)); } }

@media (min-width: 1024px) {
  /* 1. 宽容器：手机壳 1024 → 常规网页 1400 居中，去掉手机壳阴影 */
  #app { max-width: 1400px; box-shadow: none; }

  /* 2. PC 顶部导航（品牌红底 sticky 置顶） */
  .pc-nav { display: block; position: sticky; top: 0; z-index: 200;
    background: var(--primary-grad); box-shadow: 0 2px 12px rgba(220,20,60,.25); }
  .pc-nav-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 20px;
    height: 56px; padding: 0 32px; }
  .pc-brand { color: #fff; font-size: 20px; font-weight: 700; letter-spacing: 1px; cursor: pointer; white-space: nowrap; }
  .pc-menu { display: flex; gap: 4px; flex: 1; min-width: 0; }
  .pc-menu a { color: rgba(255,255,255,.85); font-size: 15px; padding: 8px 16px; border-radius: 24px; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
  .pc-menu a:hover { color: #fff; background: rgba(255,255,255,.12); }
  .pc-menu a.active { color: #fff; background: rgba(255,255,255,.22); font-weight: 600; }
  /* 激活态仅用白底胶囊 + 加粗指示（已足够醒目），不再叠加底部下划线 */
  .pc-user { display: flex; align-items: center; gap: 14px; color: #fff; font-size: 14px; white-space: nowrap; }
  .pc-user-price { color: rgba(255,255,255,.95); font-size: 14px; font-weight: 600; cursor: pointer; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.14); transition: background .15s; }
  .pc-user-price:hover { background: rgba(255,255,255,.22); }
  .pc-user-info { display: flex; align-items: center; gap: 8px; color: #fff; cursor: pointer; }
  .pc-user-info:hover .pc-user-name { opacity: .85; }
  .pc-user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.2); }
  .pc-user-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--primary); background: #fff; }
  .pc-user-name { font-weight: 600; }
  .pc-user-logout { color: rgba(255,255,255,.85); cursor: pointer; font-size: 13px; padding: 4px 12px; border: 1px solid rgba(255,255,255,.4); border-radius: 16px; }
  .pc-user-logout:hover { background: rgba(255,255,255,.12); }
  .pc-login-btn { color: #fff; border: 1px solid rgba(255,255,255,.65); padding: 6px 18px; border-radius: 24px; cursor: pointer; }
  .pc-login-btn:hover { background: rgba(255,255,255,.15); }

  /* 3. 手机式顶栏 / 底部 TabBar 在 PC 隐藏（导航已上移到顶部导航） */
  .top-nav { display: none; }
  .tab-bar { display: none; }

  /* 4. PC 页脚（版权 + 合规链接） */
  .pc-footer { display: block; background: #fff; border-top: 1px solid var(--line); }
  .pc-footer-inner { max-width: 1400px; margin: 0 auto; padding: 26px 32px 30px; text-align: center; }
  .pc-footer-brand { font-size: 15px; font-weight: 700; color: var(--text); }
  .pc-footer-links { margin-top: 12px; display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; }
  .pc-footer-links a { font-size: 13px; color: var(--text-3); cursor: pointer; }
  .pc-footer-links a:hover { color: var(--primary); }
  .pc-footer-copy { margin-top: 14px; font-size: 12px; color: var(--text-4); }

  /* 5. 内容区：常规网页左右留白；去掉手机端 fixed 栏占位（底部操作栏已流式化） */
  .page, .cat-layout, .doc-page { padding-left: 28px; padding-right: 28px; padding-bottom: 32px; }
  .page.pad { padding-bottom: 32px; }
  .cd-page { padding-bottom: 32px; }
  .cat-layout { min-height: calc(100vh - 56px); }
  /* 订单状态 Tab：sticky 顶部位移对齐 PC 导航（56px）而非手机 44px 顶栏 */
  .status-tabs { top: 56px; }
  /* 首页手机式品牌顶栏在 PC 冗余（PC 导航已含品牌 + 分类入口），隐藏 */
  .topbar { display: none; }

  /* 6. 底部操作栏：fixed 悬浮 → 页内流式（内容末尾块级，不再贴底悬浮） */
  .p-bottom-bar, .o-bottom-bar, .od-bottom-bar, .cd-bottom-bar, .btn.block-cta {
    position: static;
    left: auto; right: auto; bottom: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin: 18px 0 0;
    border-radius: 14px;
  }
  .p-bottom-bar, .o-bottom-bar, .od-bottom-bar { box-shadow: 0 4px 16px rgba(0,0,0,.06); }

  /* 7. 弹层：底部 sheet → 居中对话框（常规网页习惯，宽度合理） */
  .sheet {
    top: 50%; bottom: auto;
    transform: translate(-50%, -50%);
    max-width: 560px;
    border-radius: 16px;
  }

  /* 8. 下单须知入口：与 banner 等宽对齐；
     去掉之前 PC 的 max-width: 560px（与移动端不一致导致 banner 宽 ≠ notice 宽），
     移动端/PC 统一全宽对齐到 .banner-wrap 同一条左右边 */
  .notice-box {
    margin: 0 auto;
    padding: 10px 12px 0;
  }
}

/* ============ 下单页 PC 适配 ============
   放在文件末尾：需要覆盖上方 PC 通用块里对 `.o-bottom-bar` 的流式化声明。
   PC 采用「左信息 + 右吸顶结算面板」两栏布局（对齐商品详情页的天猫式结构），
   结算动作收敛到右栏，移动端底部固定栏在 PC 下隐藏，避免出现两个确认按钮。 */
@media (min-width: 1024px) {
  /* 容器由 720px 放宽至 1040px，容纳「自适应主列 + 360px 侧栏」 */
  .o-wrap { max-width: 1040px; margin: 0 auto; padding: 4px 0 0; }
  .o-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
  }
  /* 侧栏吸顶：84px = PC 导航 56px + 28px 视觉留白 */
  .o-side-col { position: sticky; top: 84px; }

  /* 结算面板：整体一张白卡，内部分区退化为分段列表（去掉各自的白卡外观） */
  .o-settle {
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .08);
  }
  /* 用 border-top + :first-of-type 而非 border-bottom + :last-of-type：
     .o-settle 的最后一个 div 子元素是 .o-settle-total 而非 .o-form-section，
     :last-of-type 匹配不到末条分区，会在实付虚线上方多出一条实线。 */
  .o-settle .o-form-section {
    margin-top: 0;
    padding: 10px 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--line-2);
  }
  .o-settle .o-form-section:first-of-type { border-top: none; padding-top: 0; }
  /* 面板内左右内边距由 .o-settle 承担，行内再缩 16px 会显得过窄 */
  .o-settle .o-section-title { padding-left: 0; padding-right: 0; }
  .o-settle .coupon-item,
  .o-settle .price-detail { padding-left: 0; padding-right: 0; }

  /* 实付强调行 */
  .o-settle-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
  }
  .o-settle-total .st-label { font-size: 13px; color: var(--text-2); }
  .o-settle-total .st-price { color: var(--price); font-size: 22px; font-weight: 800; }

  /* 侧栏确认按钮：不在 .o-bottom-bar 作用域内，需独立补齐按钮外观 */
  .o-settle-btn {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 13px 0;
    background: var(--primary-grad);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(220, 20, 60, .28);
  }
  .o-settle-btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }

  /* PC 隐藏移动端底部固定栏（结算动作已在右侧面板） */
  .o-bottom-bar { display: none; }

  .pkg-mini { padding: 18px; }
  .o-thumb { width: 72px; height: 72px; flex: 0 0 72px; }
  .o-title { font-size: 17px; }
  .o-price { font-size: 20px; }
  .o-form-section { margin-top: 14px; }
  /* 左列首块（商品摘要）与侧栏顶部对齐，不需要额外上间距 */
  .o-main-col > .pkg-mini:first-child { margin-top: 0; }
}

/* ============ 全局质感与微交互（优化层 · 附加声明，不改动既有规则） ============ */
/* 统一过渡：按钮 / 标签 / 卡片 / 可点击条目 */
.btn, .card, .goods-card, .order-card, .companion-card, .coupon-card, .doc-card,
.tag, .menu-item, .action-chip, .tab-item, .sort-item, .sub-chip, .game-tab,
.sub-tab, .opt-chip, .cp-sort .cs-item, .hot-keywords .hk-chip, .rec-item,
.pay-option, .tier-card, .lv-card, .quick-item, .mi-arrow {
  transition: transform .18s ease, box-shadow .24s ease, background-color .18s ease,
    border-color .18s ease, color .18s ease, filter .18s ease;
}

/* 桌面端 hover 抬升（移动端不触发 hover，避免 sticky 悬停） */
@media (hover: hover) {
  .goods-card:hover,
  .order-card:hover,
  .companion-card:hover,
  .coupon-card:hover,
  .rec-item:hover,
  .lv-card:hover,
  .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover);
  }
  .menu-item:hover { background: var(--bg); }
  .mi-arrow { transform: translateX(2px); }
  .quick-item:hover .qi-ico { filter: brightness(1.04); }
}

/* 商品图 hover 微缩放 */
.goods-card .goods-img .goods-image { transition: transform .45s ease; }
@media (hover: hover) {
  .goods-card:hover .goods-img .goods-image { transform: scale(1.06); }
}

/* 主按钮 hover 增强（桌面） */
@media (hover: hover) {
  .btn:not(:disabled):hover { filter: saturate(1.06); box-shadow: var(--cta-shadow); }
  .btn.outline-red:not(:disabled):hover { background: #fff5f6; }
}

/* 行尾 / 返回 / 轮播箭头：SVG 图标尺寸（替代装饰性字符） */
.menu-item .mi-arrow.ico { width: 14px; height: 14px; color: var(--text-3); }
.top-nav .nav-back .ico-back { width: 22px; height: 22px; }
.banner-arrow { display: flex; align-items: center; justify-content: center; }
.banner-arrow .ico { width: 18px; height: 18px; color: #fff; }
.banner-arrow-left .ico { transform: rotate(180deg); }

/* ===== 陪玩详情页：在线信息 / 游戏标签 / 语音条 ===== */
/* 在线状态徽章 */
.cd-online {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  padding: 2px 10px; border-radius: 20px; margin-left: 6px;
  vertical-align: 3px;
}
.cd-online i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.cd-online.on  { background: rgba(34,197,94,.15); color: #4ade80; }
.cd-online.on  i { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,.8); }
.cd-online.off { background: rgba(148,163,184,.12); color: #94a3b8; }
.cd-online.off i { background: #94a3b8; }

/* 游戏标签（金色徽章风格） */
.cd-gtag {
  display: inline-block;
  font-size: 12px; font-weight: 600;
  padding: 4px 14px; border-radius: 6px;
  background: linear-gradient(135deg, rgba(245,184,0,.18), rgba(255,122,24,.12));
  color: #f5b800;
  border: 1px solid rgba(245,184,0,.35);
}

/* 语音条（自绘播放器） */
.cd-voice-box {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border-radius: 12px; cursor: pointer;
  position: relative;
}
.cd-voice-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #ff5577, #dc143c);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cd-voice-btn.on { background: linear-gradient(135deg, #ff8a3d, #ff5577); }
.cd-vplay {
  width: 0; height: 0;
  border-left: 9px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 2px;
}
.cd-vp { display: flex; gap: 2px; }
.cd-vp::before, .cd-vp::after { content: ""; width: 3px; height: 12px; background: #fff; }
.cd-voice-info { flex: 1; min-width: 0; }
.cd-voice-title { font-size: 13px; font-weight: 600; }
.cd-voice-time { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 2px; }
.cd-voice-bar {
  position: absolute; left: 58px; right: 12px; bottom: 8px;
  height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden;
}
.cd-voice-progress { height: 100%; background: linear-gradient(90deg, #ff5577, #dc143c); width: 0; }