/* ============================================================
   新陪玩系统 · H5 样式（原创实现，粉紫双主色风）
   版权：坏蛋网络  www.55591.cn
   ============================================================ */
/* 布局基准单位：--u = 容器宽度的 1%（设计稿 750px）
   移动端 1vw；桌面端锁定为 7.5px，保证宽屏下字号/间距不再被 vw 放大 */
:root {
  --u: 1vw;
  --edge: 0px;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { font-size: 16px; }
html { background: #f5f4f8; }
body {
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  background: #f5f4f8; color: #211d2b;
  max-width: 750px; margin: 0 auto;
  padding-bottom: calc(50px + env(safe-area-inset-bottom));
  position: relative;
}
img { display: block; border: 0; }
a { text-decoration: none; color: inherit; }
input, textarea, select, button { font-family: inherit; outline: none; border: 0; }
ul, li { list-style: none; }

/* ---------- 公共 ---------- */
.page { min-height: 100vh; padding-bottom: 16px; }
.card { background: #fff; border-radius: 12px; margin: 0 12px; box-shadow: 0 2px 8px rgba(24, 20, 32, .05); }
.hr { height: 8px; }
button.pink-btn, button.purple-btn, button.gray-btn {
  display: block; width: 100%; padding: calc(3.2 * var(--u)) 0; border-radius: calc(5.6 * var(--u));
  color: #fff; font-size: calc(4.2 * var(--u)); text-align: center; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
button.pink-btn:active, button.purple-btn:active, button.gray-btn:active { transform: scale(.965); filter: brightness(.96); }
.pink-btn { background: linear-gradient(135deg, #e8496a 0%, #cf2f4e 100%); box-shadow: 0 4px 14px rgba(207, 47, 78, .22); font-weight: 600; }
.purple-btn { background: linear-gradient(180deg, #ddd6ee, #c7bde0); box-shadow: none; }
.gray-btn { background: #f5f4f8; color: #837d8f; }
.nomore { text-align: center; color: #aba5b7; font-size: calc(3.1 * var(--u)); padding: calc(3 * var(--u)) 0 calc(5 * var(--u)); }
/* 原先的 ~ 波浪装饰去掉，改为两端细线，观感更克制 */
.nomore::before, .nomore::after { content: ""; display: inline-block; width: calc(6 * var(--u)); height: 1px; background: #e6e3ed; vertical-align: middle; margin: 0 calc(2 * var(--u)); }
/* 空状态 */
.empty { text-align: center; padding: calc(8 * var(--u)) 0 calc(10 * var(--u)); color: #aba5b7; }
.empty .eico { font-size: calc(10 * var(--u)); display: block; margin-bottom: calc(2.4 * var(--u)); filter: grayscale(.3); opacity: .55; animation: floaty 3s ease-in-out infinite; }
.empty p { font-size: calc(3 * var(--u)); line-height: 1.7; }
/* 骨架屏 */
.skel { border-radius: calc(2.4 * var(--u)); background: #fff; padding: calc(3 * var(--u)); margin-bottom: calc(2.6 * var(--u)); display: flex; gap: calc(2.8 * var(--u)); align-items: center; }
.skel .sk-ava { width: calc(21 * var(--u)); height: calc(21 * var(--u)); border-radius: 50%; flex-shrink: 0; }
.skel .sk-lines { flex: 1; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.skel .sk-line { height: calc(3.6 * var(--u)); border-radius: calc(2 * var(--u)); }
.skel .sk-line.w60 { width: 60%; } .skel .sk-line.w80 { width: 80%; } .skel .sk-line.w40 { width: 40%; }
.sk-ava, .sk-line { background: linear-gradient(100deg, #eae7f0 30%, #f7f5fb 50%, #eae7f0 70%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
/* 页面切换进场 */
#app.page-enter { animation: pageIn .28s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(calc(1.6 * var(--u))); } to { opacity: 1; transform: none; } }
/* 卡片逐条进场 */
.dianyuan, .dtcard, .xdcard, .rwcard, .ocard, .phcard, .lycard, .rcard { animation: cardIn .38s ease both; }
.tjlist .dianyuan:nth-child(1) { animation-delay: .02s; } .tjlist .dianyuan:nth-child(2) { animation-delay: .07s; }
.tjlist .dianyuan:nth-child(3) { animation-delay: .12s; } .tjlist .dianyuan:nth-child(4) { animation-delay: .17s; }
.tjlist .dianyuan:nth-child(5) { animation-delay: .22s; } .tjlist .dianyuan:nth-child(6) { animation-delay: .27s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(calc(2.4 * var(--u))) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1.6 * var(--u))); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 新增：类目横滚筛选 ---------- */
.cat-scroll { display: flex; gap: calc(2 * var(--u)); overflow-x: auto; margin-bottom: calc(3 * var(--u)); padding-bottom: calc(1 * var(--u)); }
.cat-scroll::-webkit-scrollbar { display: none; }
.cat-scroll .fpill { flex-shrink: 0; }

/* ---------- 新增：点赞按钮 ---------- */
.zanbtn { cursor: pointer; transition: transform .15s ease; }
.zanbtn:active { transform: scale(1.18); }
.zanbtn.on { animation: pop .3s ease; }
.xdcard .xdsimilar .zan.on { color: #de3b5a; font-weight: bold; }

/* ---------- 新增：加载更多 ---------- */
.loadmore { width: calc(44 * var(--u)); margin: calc(1.2 * var(--u)) auto calc(4 * var(--u)); text-align: center; padding: calc(2.2 * var(--u)) 0; border-radius: calc(6 * var(--u)); font-size: calc(3 * var(--u)); color: #de3b5a; background: #fff; box-shadow: 0 4px 12px rgba(222, 59, 90, .14); cursor: pointer; transition: transform .15s ease; }
.loadmore:active { transform: scale(.96); }

/* ---------- 新增：轮播圆点可点击 ---------- */
.swiper-dots i { cursor: pointer; }

/* ---------- 新增：评价头像图片 ---------- */
.evarow img.evava { object-fit: cover; cursor: pointer; }

/* ---------- 新增：客服悬浮按钮 ---------- */
.kefu-fab {
  position: fixed; right: calc(var(--edge) + 4 * var(--u)); bottom: calc(64px + 5 * var(--u) + env(safe-area-inset-bottom)); z-index: 40;
  width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: 50%;
  background: linear-gradient(135deg, #f06c86, #6c5ca8); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(.4 * var(--u));
  box-shadow: 0 8px 20px rgba(222, 59, 90, .38); cursor: pointer;
  transition: transform .15s ease; animation: floaty 3.4s ease-in-out infinite;
}
.kefu-fab:active { transform: scale(.9); }
.kefu-fab .kfico { font-size: calc(5.4 * var(--u)); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); }
.kefu-fab .kftxt { font-size: calc(2.3 * var(--u)); opacity: .95; }

/* ---------- 新增：首页搜索历史 ---------- */
.kwlog { display: flex; align-items: center; gap: calc(1.6 * var(--u)); margin-top: calc(2.6 * var(--u)); overflow-x: auto; }
.kwlog::-webkit-scrollbar { display: none; }
.kwlog .kwlbl { font-size: calc(2.6 * var(--u)); color: #a0576f; flex-shrink: 0; }
.kwlog .kwchip { flex-shrink: 0; background: rgba(255, 255, 255, .92); color: #514b5e; font-size: calc(2.6 * var(--u)); padding: calc(1.1 * var(--u)) calc(3 * var(--u)); border-radius: calc(3 * var(--u)); cursor: pointer; transition: transform .15s ease; }
.kwlog .kwchip:active { transform: scale(.92); background: #fff; }
.kwlog .kwdel { flex-shrink: 0; font-size: calc(2.6 * var(--u)); color: #b06a82; cursor: pointer; }

/* ---------- 新增：随机下单加载与入场 ---------- */
.randloading { padding: calc(8 * var(--u)) 0 calc(10 * var(--u)); text-align: center; color: #837d8f; font-size: calc(3.2 * var(--u)); }
.randloading .disc { width: calc(15 * var(--u)); height: calc(15 * var(--u)); margin: 0 auto calc(3.4 * var(--u)); border-radius: 50%; border: calc(1 * var(--u)) solid #fce7ec; border-top-color: #de3b5a; border-right-color: #8a7bc0; animation: spin .8s linear infinite; }
.randcard { animation: randIn .5s cubic-bezier(.34, 1.4, .5, 1) both; }
@keyframes randIn { 0% { opacity: 0; transform: scale(.72) rotate(-3deg); } 60% { transform: scale(1.04) rotate(.5deg); } 100% { opacity: 1; transform: none; } }

/* ---------- 新增：店员详情图集（大图 + 缩略图导航） ---------- */
.clerk-swiper .gallery { position: relative; background: #171520; }
.gallery .gtrack { position: relative; height: calc(104 * var(--u)); }
.gallery .gtrack > img { width: 100%; height: calc(104 * var(--u)); object-fit: cover; display: block; animation: fadeIn .3s ease; }
.gallery .gtrack > img.gfit { object-fit: contain; background: #f3f1f7; }
/* 未上传图集时主图收矮，避免大片留白 */
.clerk-swiper.nomedia .gtrack,
.clerk-swiper.nomedia .gtrack > img { height: calc(68 * var(--u)); }
.garrow { position: absolute; top: 50%; transform: translateY(-50%); width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: rgba(24, 20, 32, .30); color: #fff; font-size: calc(6 * var(--u)); line-height: calc(8.2 * var(--u)); text-align: center; cursor: pointer; z-index: 3; transition: background .15s ease; }
.garrow:active { background: rgba(24, 20, 32, .55); }
.garrow.gl { left: calc(2.4 * var(--u)); }
.garrow.gr { right: calc(2.4 * var(--u)); }
.gcount { position: absolute; right: calc(3 * var(--u)); bottom: calc(19 * var(--u)); background: rgba(24, 20, 32, .40); color: #fff; font-size: calc(2.6 * var(--u)); padding: calc(.8 * var(--u)) calc(2.4 * var(--u)); border-radius: calc(3 * var(--u)); z-index: 3; }
/* 缩略图导航条：白色卡片上移叠压大图，每格标注“照片/视频” */
.gthumbs { position: relative; z-index: 4; display: flex; gap: calc(1.6 * var(--u)); overflow-x: auto; width: fit-content; max-width: calc(100% - 7.2 * var(--u)); margin: calc(-14 * var(--u)) 0 0 calc(3.6 * var(--u)); padding: calc(1.6 * var(--u)); background: #fff; border-radius: calc(2.4 * var(--u)); box-shadow: 0 calc(.6 * var(--u)) calc(3 * var(--u)) rgba(24, 20, 32, .13); }
.gthumbs::-webkit-scrollbar { display: none; }
.gthumb { position: relative; flex-shrink: 0; width: calc(19 * var(--u)); height: calc(19 * var(--u)); border-radius: calc(1.6 * var(--u)); overflow: hidden; cursor: pointer; background: #f3f1f7; box-shadow: 0 0 0 2px transparent; transition: box-shadow .15s ease, transform .15s ease; }
.gthumb:active { transform: scale(.96); }
.gthumb.on { box-shadow: 0 0 0 2px #de3b5a; }
.gthumb img, .gthumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gthumb .gtag { position: absolute; left: 0; top: 0; font-style: normal; font-size: calc(2.2 * var(--u)); line-height: 1.65; color: #fff; background: rgba(24, 20, 32, .62); padding: 0 calc(1.2 * var(--u)); border-radius: 0 0 calc(1.2 * var(--u)) 0; }
.gthumb .gtag.vid { background: rgba(151, 129, 202, .95); }
.gthumb .gplayico { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(5.4 * var(--u)); height: calc(5.4 * var(--u)); border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; font-size: calc(2.4 * var(--u)); display: flex; align-items: center; justify-content: center; padding-left: calc(.4 * var(--u)); }
/* 主图左上角类型标注（照片 / 视频介绍） */
.gtype { position: absolute; left: calc(3 * var(--u)); top: calc(3 * var(--u)); background: rgba(24, 20, 32, .62); color: #fff; font-size: calc(2.6 * var(--u)); padding: calc(.9 * var(--u)) calc(2.4 * var(--u)); border-radius: calc(3 * var(--u)); z-index: 3; pointer-events: none; }
.gtype.vid { background: rgba(151, 129, 202, .95); }
/* 视频无封面时的占位（避免缩略图黑块） */
.gvcover { width: 100%; height: 100%; background: linear-gradient(135deg, #221e2d, #3a3050); display: flex; align-items: center; justify-content: center; font-size: calc(4.6 * var(--u)); color: #fff; }
/* 未上传图集时的提示 */
.gempty-tip { margin: calc(1.6 * var(--u)) calc(3.6 * var(--u)) 0; text-align: center; font-size: calc(2.6 * var(--u)); color: #aba5b7; background: #fff; border-radius: calc(1.6 * var(--u)); padding: calc(1.6 * var(--u)) 0; }
/* 视频封面 + 大播放按钮 */
.gposter { width: 100%; height: 100%; object-fit: cover; display: block; }
.gvideobox .gbigplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: 50%; background: rgba(0, 0, 0, .42); border: 2px solid rgba(255, 255, 255, .85); color: #fff; font-size: calc(6 * var(--u)); display: flex; align-items: center; justify-content: center; padding-left: calc(1.2 * var(--u)); z-index: 2; }
.gvideobox .gplaytip { position: absolute; left: 0; right: 0; top: 50%; margin-top: calc(11 * var(--u)); text-align: center; font-size: calc(2.6 * var(--u)); color: rgba(255, 255, 255, .92); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); z-index: 2; }
/* 图集全屏预览 */
/* overflow:hidden 必须加：不加的话 5 张图横向撑出文档宽度，手指滑动变成滚动页面，切图手势永远触发不了。
   touch-action:pan-y 让浏览器别接管横向手势（微信里横向拖动会被当成「侧滑返回」） */
.pvbox { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .94); display: flex; flex-direction: column; overflow: hidden; touch-action: pan-y; animation: fadeIn .2s ease; }
.pvhead { position: absolute; left: 0; right: 0; top: 0; padding: calc(4 * var(--u)); text-align: center; z-index: 3; }
.pvcount { color: #fff; font-size: calc(3.2 * var(--u)); opacity: .9; }
.pvclose { position: absolute; right: calc(4 * var(--u)); top: calc(3.6 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: calc(4.6 * var(--u)); display: flex; align-items: center; justify-content: center; z-index: 3; cursor: pointer; }
.pvtrack { flex: 1; display: flex; transition: transform .28s ease; }
.pvitem { width: 100%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pvitem img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pvnav { position: absolute; top: 50%; transform: translateY(-50%); width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; background: rgba(0, 0, 0, .34); color: #fff; font-size: calc(6.4 * var(--u)); display: flex; align-items: center; justify-content: center; z-index: 3; cursor: pointer; box-shadow: 0 1px 6px rgba(0, 0, 0, .28); }
.pvnav:active { background: rgba(255, 255, 255, .3); }
.pvnav.prev { left: calc(3 * var(--u)); }
.pvnav.next { right: calc(3 * var(--u)); }

/* ---------- 新增：底部导航选中弹跳 ---------- */
.titem.on .ticon { animation: pop .32s ease; }

/* ---------- 新增：登录页气泡装饰 ---------- */
.loginw { position: relative; overflow: hidden; }.loginw::before, .loginw::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.loginw::before { width: calc(40 * var(--u)); height: calc(40 * var(--u)); right: calc(-14 * var(--u)); top: calc(6 * var(--u)); background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 70%); animation: floaty 5s ease-in-out infinite; }
.loginw::after { width: calc(26 * var(--u)); height: calc(26 * var(--u)); left: calc(-10 * var(--u)); top: calc(34 * var(--u)); background: radial-gradient(circle, rgba(255, 255, 255, .25), transparent 70%); animation: floaty 6s ease-in-out infinite reverse; }
.loginw .logo { animation: floaty 3.6s ease-in-out infinite; position: relative; z-index: 2; }
.loginw h1, .loginw p, .loginw .phonelogin, .loginw button, .loginw .uptip { position: relative; z-index: 2; }
/* 客服信息行 */
.kefu-row { display: flex; justify-content: space-between; align-items: center; padding: calc(2.6 * var(--u)) 0; border-bottom: 1px dashed #f5f4f8; font-size: calc(3.4 * var(--u)); }
.kefu-row label { color: #837d8f; flex-shrink: 0; }
.kefu-row b { color: #211d2b; word-break: break-all; text-align: right; }
/* 可点卡片按压反馈 */
.dianyuan:active, .ocard:active, .rwcard:active, .xdcard:active, .phcard:active, .lycard:active, .rcard:active, .pricerow:active, .payitem:active, .topupgrid .titem:active, .moitem:active, .ositem:active { transform: scale(.98); }
.dianyuan, .ocard, .rwcard, .xdcard, .phcard, .lycard, .rcard, .pricerow, .payitem, .topupgrid .titem, .moitem, .ositem { transition: transform .15s ease; }

/* ---------- 顶部粉色头图 ---------- */
.top-bg {
  /* 上下留白压到 3.6u/2.4u：页面头只放一行标题，粉色区域矮一点，
     首屏能多露出内容，也不再显得「头顶一大块红」 */
  position: relative; padding: calc(3.6 * var(--u)) calc(4 * var(--u)) calc(2.4 * var(--u));
  /* 浅粉渐变 + 右上角柔光团，和参考图一致：顶部是柔和的渐变粉，往下渐白，
     不再是一大块深玫红 */
  background:
    radial-gradient(120% 150% at 82% -40%, rgba(255, 105, 158, .6) 0%, rgba(255, 105, 158, 0) 62%),
    linear-gradient(180deg, #ff9fc2 0%, #ffb3cc 52%, #ffd9e6 82%, #ffffff 100%);
  background-size: 100% 100%;
  overflow: hidden;
}
/* 去掉原先的漂浮光斑装饰：大面积粉渐变 + 浮动光晕是最主要的「廉价感」来源 */
.top-bg::before, .top-bg::after { display: none; }

/* 首页顶部：只装一条搜索框，高度压到最小。
   没有白色大标题要衬托，渐变可以做得更浅更柔，末段收到接近页面的暖白，衔接不生硬 */
.top-bg.tb-index {
  padding: calc(4.4 * var(--u)) calc(4 * var(--u)) calc(3.2 * var(--u));
  background:
    radial-gradient(95% 130% at 78% -20%, rgba(255, 116, 165, .5) 0%, rgba(255, 116, 165, 0) 60%),
    linear-gradient(180deg, #ffb2cd 0%, #ffd0e0 52%, #ffedf4 100%);
}
.top-bg.tb-index .search-bar form {
  box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(150, 40, 70, .13);   /* 在粉底上托一点层次 */
}
.top-bg.tb-index .search-bar .sicon { color: #ee6f8c; }   /* 放大镜跟随主题粉，比深灰更协调 */
.index-title { font-size: calc(4.8 * var(--u)); color: #fff; font-weight: 600; letter-spacing: .2px; margin-bottom: calc(3 * var(--u)); }
.back-title { display: flex; align-items: center; font-size: calc(4.8 * var(--u)); color: #fff; font-weight: 600; letter-spacing: .2px; margin-bottom: calc(1 * var(--u)); text-shadow: 0 calc(.2 * var(--u)) calc(1.2 * var(--u)) rgba(155, 35, 75, .42), 0 0 calc(6 * var(--u)) rgba(155, 35, 75, .16); }
.back-title .back { margin-right: calc(3 * var(--u)); font-size: calc(5.2 * var(--u)); cursor: pointer; padding: 0 calc(1.6 * var(--u)) 0 0; width: calc(8 * var(--u)); color: #b5325a; text-shadow: none; transition: transform .15s ease; }
.back-title .back:active { transform: translateX(calc(-1 * var(--u))); }
.back-title > span:not(.back):not(.topvoice) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 头部右上角语音试听：店员详情页用，标题行右侧常驻一个小胶囊 */
.back-title .topvoice {
  flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; gap: calc(1 * var(--u));
  font-size: calc(2.9 * var(--u)); font-weight: 600; color: #c22b47; letter-spacing: 0; text-shadow: none;
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .92);
  padding: calc(1.1 * var(--u)) calc(2.8 * var(--u)); border-radius: calc(4 * var(--u));
  cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.back-title .topvoice.playing { background: #fff; }
.back-title .topvoice.off { background: rgba(255, 255, 255, .34); border-style: dashed; opacity: .78; }
.back-title .topvoice:active { transform: scale(.94); }

/* 搜索条 */
.search-bar { display: flex; align-items: center; gap: calc(3 * var(--u)); }
.search-bar .stitle { color: #fff; font-size: calc(6.26 * var(--u)); font-weight: bold; white-space: nowrap; }
.search-bar form { flex: 1; display: flex; background: #fff; border-radius: calc(4.4 * var(--u)); padding: calc(2 * var(--u)) calc(3.4 * var(--u)); align-items: center; }
.search-bar input { flex: 1; font-size: calc(3.4 * var(--u)); color: #211d2b; }
.search-bar .sicon { color: #cf2f4e; font-size: calc(4 * var(--u)); margin-right: calc(1.6 * var(--u)); cursor: pointer; padding: calc(1.6 * var(--u)) calc(1 * var(--u)); }

/* ---------- 轮播 ---------- */
.swipwrap { margin: 0 calc(3.6 * var(--u)); border-radius: 9px; overflow: hidden; box-shadow: 0 8px 22px rgba(151, 129, 202, .25); }
.swipwrap .swiper-item { display: none; }
.swipwrap .swiper-item.on { display: block; animation: fadeIn .5s ease; }
.swipwrap img { width: 100%; height: calc(35 * var(--u)); object-fit: cover; border-radius: 9px; }
.swiper-dots { display: flex; justify-content: center; gap: calc(1.4 * var(--u)); margin-top: calc(1.6 * var(--u)); }
.swiper-dots i { width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); border-radius: 50%; background: #ddd6de; transition: all .3s ease; }
.swiper-dots i.on { background: linear-gradient(90deg, #f06c86, #de3b5a); width: calc(4 * var(--u)); border-radius: calc(1 * var(--u)); box-shadow: 0 2px 6px rgba(222, 59, 90, .4); }
@keyframes fadeIn { from { opacity: .2; } to { opacity: 1; } }

/* ---------- 礼物播报条 ---------- */
.giftwrap { margin: calc(3.4 * var(--u)) calc(3.6 * var(--u)) 0; border-radius: 9px; overflow: hidden; background: linear-gradient(90deg, #f4eef9, #f0f1f8); display: flex; }
.giftwrap .gtitle { flex-shrink: 0; background: linear-gradient(90deg, #8a7bc0, #6c5ca8); color: #fff; font-size: calc(3 * var(--u)); padding: calc(2.6 * var(--u)) calc(3 * var(--u)); border-radius: 9px calc(2 * var(--u)) calc(2 * var(--u)) 9px; display: flex; align-items: center; gap: calc(1 * var(--u)); }
.giftwrap .gnotice { flex: 1; overflow: hidden; height: calc(9 * var(--u)); line-height: calc(9 * var(--u)); position: relative; }
.giftwrap .gnlist { position: absolute; white-space: nowrap; font-size: calc(3 * var(--u)); color: #e29a2e; animation: notice 40s linear infinite; padding-left: calc(3 * var(--u)); will-change: transform; }
.giftwrap:active .gnlist { animation-play-state: paused; }
@keyframes notice { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---------- 人气店员 ---------- */
.renqiw { margin-top: calc(4 * var(--u)); padding: 0 calc(3.6 * var(--u)); }
.renqiw .rtitle { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(2.4 * var(--u)); }
.renqiw .rtitle b { font-size: calc(4.4 * var(--u)); color: #211d2b; }
.renqiw .rtitle span { font-size: calc(3 * var(--u)); color: #c96a46; }
.renqiw .rscroll { display: flex; gap: calc(2.6 * var(--u)); overflow-x: auto; padding-bottom: calc(2 * var(--u)); }
.renqiw .rscroll::-webkit-scrollbar { display: none; }
.renqiw .rcard { flex-shrink: 0; width: calc(20.8 * var(--u)); border-radius: calc(2.4 * var(--u)); overflow: hidden; background: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(151, 129, 202, .18); position: relative; }
.renqiw .rcard::before { content: "👑"; position: absolute; top: calc(1 * var(--u)); left: calc(1 * var(--u)); font-size: calc(3.4 * var(--u)); z-index: 2; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.renqiw .rcard img { width: calc(20.8 * var(--u)); height: calc(20.8 * var(--u)); object-fit: cover; }
.renqiw .rcard .rname { text-align: center; font-size: calc(3 * var(--u)); color: #fff; padding: calc(1.6 * var(--u)) 0; background: linear-gradient(180deg, rgba(205, 189, 242, .56), #6c5ca8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.renqiw .rcard .rframe { position: absolute; top: calc(1 * var(--u)); right: calc(1 * var(--u)); font-size: calc(3.4 * var(--u)); z-index: 2; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
/* 人气卡右上角的语音试听：半透明深色圆底，压在头像上仍然看得清 */
.renqiw .rcard .rvoice {
  position: absolute; top: calc(1 * var(--u)); right: calc(1 * var(--u)); z-index: 3;
  width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(2.6 * var(--u)); color: #fff; line-height: 1;
  background: rgba(24, 20, 32, .42); box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
  transition: background .15s ease, transform .15s ease;
}
.renqiw .rcard .rvoice:active { background: rgba(24, 20, 32, .68); transform: scale(.9); }
.renqiw .rcard .rvoice.off { background: rgba(24, 20, 32, .22); opacity: .8; }
.renqiw .rcard .rvoice.playing { background: rgba(240, 108, 134, .92); animation: voicePulse 1.1s ease-in-out infinite; }
@keyframes voicePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 108, 134, .55); } 50% { box-shadow: 0 0 0 calc(1.6 * var(--u)) rgba(240, 108, 134, 0); } }
/* 同时有装饰框时，框标左移给播放按钮让位 */
.renqiw .rcard .rframe.shift { right: calc(7 * var(--u)); }
.renqiw .rcard .rname i { font-style: normal; font-size: calc(2 * var(--u)); color: #fff; padding: calc(.3 * var(--u)) calc(1.4 * var(--u)); border-radius: calc(1.6 * var(--u)); margin-left: calc(1.2 * var(--u)); vertical-align: middle; }

/* ---------- 筛选 ---------- */
.tuijianw { margin: calc(4 * var(--u)) calc(3.6 * var(--u)) 0; }
.tuijianw .filters { display: flex; gap: calc(2.4 * var(--u)); margin-bottom: calc(3 * var(--u)); align-items: center; }
.tuijianw .filters .fpill { padding: calc(1.6 * var(--u)) calc(4 * var(--u)); border-radius: calc(5 * var(--u)); font-size: calc(3.3 * var(--u)); background: #fff; color: #211d2b; cursor: pointer; border: 1px solid #eae7f0; }
.tuijianw .filters .fpill.on { background: linear-gradient(90deg, #f06c86, #de3b5a); color: #fff; border-color: transparent; }
.tuijianw .filters select { padding: calc(1.6 * var(--u)) calc(3 * var(--u)); border-radius: calc(5 * var(--u)); font-size: calc(3.3 * var(--u)); background: #fff; color: #211d2b; border: 1px solid #eae7f0; }

/* ---------- 店员卡片（横排列表式） ---------- */
.tjlist { display: flex; flex-direction: column; gap: calc(2.6 * var(--u)); }
.dianyuan { display: flex; align-items: center; gap: calc(2.8 * var(--u)); background: #fff; border-radius: calc(2.4 * var(--u)); padding: calc(3 * var(--u)); position: relative; box-shadow: 0 2px 8px rgba(24, 20, 32, .05); cursor: pointer; }
.dianyuan .davatar { position: relative; width: calc(21 * var(--u)); height: calc(21 * var(--u)); flex-shrink: 0; }
.dianyuan .davatar img { width: calc(21 * var(--u)); height: calc(21 * var(--u)); border-radius: 50%; object-fit: cover; border: 1px solid #fce7ec; box-shadow: 0 3px 10px rgba(24, 20, 32, .10); }
.dianyuan .davatar .frame { position: absolute; top: calc(-1.4 * var(--u)); right: calc(-1.4 * var(--u)); font-size: calc(4.6 * var(--u)); }
.dianyuan .voice { position: absolute; bottom: calc(-.4 * var(--u)); left: 50%; transform: translateX(-50%); width: calc(8.6 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(3 * var(--u)); color: #fff; font-size: calc(2.6 * var(--u)); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(24, 20, 32, .14); }
.dianyuan .voice.nv { background: #f7a8b8; }
.dianyuan .voice.nan { background: #93a6cf; }
.dianyuan .voice:active { transform: translateX(-50%) scale(.9); }
.dianyuan .online { position: absolute; top: calc(-.8 * var(--u)); right: calc(-.8 * var(--u)); font-size: calc(2.2 * var(--u)); color: #fff; padding: calc(.5 * var(--u)) calc(1.4 * var(--u)); border-radius: calc(3 * var(--u)); background: #f06c86; white-space: nowrap; box-shadow: 0 2px 5px rgba(255, 147, 187, .4); }
.dianyuan .online.nan { background: #7c92c9; }
.dianyuan .online i { display: inline-block; width: calc(1.2 * var(--u)); height: calc(1.2 * var(--u)); border-radius: 50%; background: #7fc9a1; margin-right: calc(.6 * var(--u)); animation: blink 1.6s ease-in-out infinite; }
.dianyuan .online.off i { animation: none; background: #f5f4f8; }
.dianyuan .online.off { background: #aba5b7; box-shadow: none; }
.dianyuan .dmain { flex: 1; min-width: 0; }
.dianyuan .dline1 { display: flex; align-items: center; gap: calc(1.6 * var(--u)); }
.dianyuan .dline1 b { font-size: calc(4 * var(--u)); color: #211d2b; max-width: calc(22 * var(--u)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dianyuan .level { font-size: calc(2.4 * var(--u)); color: #fff; padding: calc(.5 * var(--u)) calc(1.6 * var(--u)); border-radius: calc(2 * var(--u)); flex-shrink: 0; }
.dianyuan .gender { display: inline-flex; align-items: center; color: #fff; font-size: calc(2.4 * var(--u)); padding: calc(.4 * var(--u)) calc(1.4 * var(--u)); border-radius: calc(2 * var(--u)); flex-shrink: 0; }
.dianyuan .gender.nv { background: #f7a8b8; }
.dianyuan .gender.nan { background: #7c92c9; }
.dianyuan .dserv { display: flex; align-items: center; gap: calc(1.4 * var(--u)); margin-top: calc(1.6 * var(--u)); flex-wrap: nowrap; overflow: hidden; }
.dianyuan .dserv span { font-size: calc(2.7 * var(--u)); color: #6c5ca8; background: #f7f5fb; border-radius: calc(1.4 * var(--u)); padding: calc(.6 * var(--u)) calc(1.8 * var(--u)); white-space: nowrap; }
.dianyuan .dserv .diqu { color: #c96a46; background: #fdf6f2; max-width: calc(16 * var(--u)); overflow: hidden; text-overflow: ellipsis; }
.dianyuan .utags { display: flex; gap: calc(1.2 * var(--u)); margin-top: calc(1.6 * var(--u)); flex-wrap: wrap; }
.dianyuan .utags .serv { font-size: calc(2.4 * var(--u)); color: #837d8f; border: 1px solid #e6e3ed; border-radius: calc(3 * var(--u)); padding: calc(.5 * var(--u)) calc(2 * var(--u)); background: #fff; white-space: nowrap; }
.dianyuan .dsign { font-size: calc(2.8 * var(--u)); color: #aba5b7; margin-top: calc(1.4 * var(--u)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dianyuan .dright { display: flex; flex-direction: column; align-items: flex-end; gap: calc(1.8 * var(--u)); flex-shrink: 0; }
.dianyuan .dright .ordern { font-style: normal; font-size: calc(2.5 * var(--u)); color: #aba5b7; white-space: nowrap; }
.dianyuan .follow { font-size: calc(2.9 * var(--u)); color: #de3b5a; border: 1px solid #f9c2cf; border-radius: calc(4 * var(--u)); padding: calc(1 * var(--u)) calc(2.8 * var(--u)); white-space: nowrap; cursor: pointer; }
.dianyuan .follow.on { background: linear-gradient(90deg, #f06c86, #de3b5a); color: #fff; border-color: transparent; }

/* ---------- 底部导航 ---------- */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: calc(50px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; display: flex; max-width: 750px; margin: 0 auto; z-index: 90; box-shadow: 0 -2px 10px rgba(24, 20, 32, .06); }
.tabbar .titem { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #837d8f; font-size: 11px; cursor: pointer; position: relative; }
.tabbar .titem .ticon { line-height: 1; font-style: normal; display: block; }
.tabbar .titem .ticon svg { width: 24px; height: 24px; display: block; }
.tabbar .titem.on { color: #cf2f4e; font-weight: 600; }
.tabbar .titem.on::before { content: ""; position: absolute; top: 0; width: 20px; height: 3px; border-radius: 0 0 3px 3px; background: #cf2f4e; }

/* ---------- 首单引导弹层 ---------- */
.firsto { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 95; display: flex; align-items: center; justify-content: center; }
.firsto .fcard { width: calc(76 * var(--u)); background: #fff; border-radius: calc(3 * var(--u)); padding: calc(6 * var(--u)) calc(5 * var(--u)); text-align: center; position: relative; }
.firsto .fcard h3 { font-size: calc(4.6 * var(--u)); color: #211d2b; margin-bottom: calc(2 * var(--u)); }
.firsto .fcard h3 em { color: #de3b5a; font-style: normal; }
.firsto .fcard p { font-size: calc(3.2 * var(--u)); color: #837d8f; margin-bottom: calc(5 * var(--u)); line-height: 1.7; }
.firsto .fclose { position: absolute; top: calc(-9 * var(--u)); right: 0; color: #fff; font-size: calc(6 * var(--u)); cursor: pointer; }

/* ---------- 子页面 ---------- */
.subpage .top-bg { padding-bottom: calc(3 * var(--u)); }
.listwrap { margin-top: calc(3.4 * var(--u)); padding: 0 calc(3.6 * var(--u)); }

/* ---------- 心动墙 ---------- */
.sec-title { font-size: calc(4 * var(--u)); color: #211d2b; font-weight: bold; margin-bottom: calc(2.6 * var(--u)); }
.rwcard { display: flex; align-items: center; background: linear-gradient(135deg, #fff, #fdf4f6); border-radius: calc(3 * var(--u)); padding: calc(3.4 * var(--u)) calc(2.6 * var(--u)); margin-bottom: calc(2.6 * var(--u)); box-shadow: 0 2px 8px rgba(24, 20, 32, .05); }
.rwcard .rwside { width: calc(17 * var(--u)); text-align: center; flex-shrink: 0; }
.rwcard .rwside img { width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%; object-fit: cover; border: 1px solid #fce7ec; margin: 0 auto; }
.rwcard .rwside b { display: block; font-size: calc(2.7 * var(--u)); color: #211d2b; margin-top: calc(1.2 * var(--u)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rwcard .rwmid { flex: 1; min-width: 0; text-align: center; position: relative; padding: 0 calc(1 * var(--u)); }
.rwcard .ecg { display: block; width: 100%; height: calc(5.4 * var(--u)); }
.rwcard .ecg path { fill: none; stroke: #f06c86; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rwcard .rwheart { position: absolute; top: calc(-.6 * var(--u)); left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, #f06c86, #de3b5a); color: #fff; font-size: calc(2.5 * var(--u)); padding: calc(.8 * var(--u)) calc(2.4 * var(--u)); border-radius: calc(4 * var(--u)); white-space: nowrap; box-shadow: 0 2px 6px rgba(222, 59, 90, .35); }
.rwcard .rwheart em { font-style: normal; font-weight: bold; }
.rwcard .rwdesc { display: block; font-size: calc(2.8 * var(--u)); color: #837d8f; margin-top: calc(1.6 * var(--u)); }
.xdcard { background: #fff; border-radius: calc(2.4 * var(--u)); padding: calc(3.4 * var(--u)); margin-bottom: calc(2.6 * var(--u)); display: flex; gap: calc(3 * var(--u)); box-shadow: 0 2px 8px rgba(24, 20, 32, .05); }
.xdcard img { width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.xdcard .xdavatar { width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; background: linear-gradient(135deg, #fce7ec, #8a7bc0); display: flex; align-items: center; justify-content: center; font-size: calc(4 * var(--u)); color: #fff; flex-shrink: 0; }
.xdcard .xdmain { flex: 1; min-width: 0; }
.xdcard .xdhead { display: flex; align-items: center; gap: calc(2 * var(--u)); }
.xdcard .xdhead b { font-size: calc(3.6 * var(--u)); color: #211d2b; }
.xdcard .xdhead .gender { font-size: calc(2.2 * var(--u)); color: #fff; padding: calc(.4 * var(--u)) calc(1.4 * var(--u)); border-radius: calc(1.6 * var(--u)); }
.xdcard .xdhead .gender.nv { background: #f7a8b8; }
.xdcard .xdhead .gender.nan { background: #7c92c9; }
.xdcard .xdtime { font-size: calc(2.6 * var(--u)); color: #aba5b7; margin-left: auto; }
.xdcard .xdcon { font-size: calc(3.4 * var(--u)); color: #211d2b; margin-top: calc(2 * var(--u)); line-height: 1.6; }
.xdcard .xdsimilar { display: flex; align-items: center; justify-content: space-between; margin-top: calc(2.6 * var(--u)); }
.xdcard .xdsimilar .zan { color: #f06c86; font-size: calc(2.8 * var(--u)); }
.dtcard .zanbtn .znum { font-size: calc(3.2 * var(--u)); }

/* ---------- 随机下单 ---------- */
.randcard { background: #fff; border-radius: calc(3 * var(--u)); padding: calc(6 * var(--u)) calc(4 * var(--u)); text-align: center; }
.randcard .ava-box { position: relative; width: calc(42 * var(--u)); margin: 0 auto calc(3 * var(--u)); }
.randcard img.avatar { width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%; object-fit: cover; border: calc(1 * var(--u)) solid #fce7ec; }
.randcard .avaframe { position: absolute; top: calc(-2 * var(--u)); right: calc(-3 * var(--u)); font-size: calc(6 * var(--u)); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2)); animation: floaty 3.4s ease-in-out infinite; }
.randcard .rndbtn { margin: calc(5 * var(--u)) calc(8 * var(--u)) 0; }

/* ---------- 动态广场 ---------- */
.dtcard { background: #fff; border-radius: calc(2.4 * var(--u)); padding: calc(3.4 * var(--u)); margin-bottom: calc(2.6 * var(--u)); box-shadow: 0 2px 8px rgba(24, 20, 32, .05); }
.dtcard .dthead { display: flex; align-items: center; gap: calc(2.4 * var(--u)); }
.dtcard .dthead img { width: calc(9.6 * var(--u)); height: calc(9.6 * var(--u)); border-radius: 50%; object-fit: cover; }
.dtcard .dthead b { font-size: calc(3.6 * var(--u)); color: #211d2b; }
.dtcard .dttime { font-size: calc(2.6 * var(--u)); color: #aba5b7; margin-left: auto; }
.dtcard .dtcon { font-size: calc(3.4 * var(--u)); color: #211d2b; margin: calc(2.6 * var(--u)) 0; line-height: 1.6; }
.dtcard .dtimgs { display: flex; gap: calc(2 * var(--u)); flex-wrap: wrap; }
.dtcard .dtimgs img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(1.6 * var(--u)); object-fit: cover; }
.dtcard .dtimgs img.single { width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
.dtcard .dtfoot { display: flex; justify-content: space-between; margin-top: calc(2.6 * var(--u)); }
.dtcard .zanbtn { color: #837d8f; font-size: calc(3.2 * var(--u)); display: flex; align-items: center; gap: calc(1.2 * var(--u)); cursor: pointer; }
.dtcard .zanbtn.on { color: #f06c86; }

/* ---------- 个人中心 ---------- */
.userinfo { display: flex; align-items: center; padding: calc(2 * var(--u)) calc(4 * var(--u)); }
.userinfo > img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.userinfo .unick { margin-left: calc(3.4 * var(--u)); flex: 1; min-width: 0; }
.userinfo .unick b { display: flex; align-items: center; gap: calc(1.6 * var(--u)); font-size: calc(4.4 * var(--u)); color: #7a2442; }
.userinfo .unick b .uvc { font-size: calc(2.6 * var(--u)); background: rgba(255, 255, 255, .94); color: #c22b47; font-weight: 600; padding: calc(.4 * var(--u)) calc(1.6 * var(--u)); border-radius: calc(2 * var(--u)); }
.userinfo .unick p { font-size: calc(2.8 * var(--u)); color: #a0576f; margin-top: calc(1.2 * var(--u)); }
.userinfo .editbtn { background: rgba(255, 255, 255, .62); color: #c22b47; font-size: calc(2.8 * var(--u)); padding: calc(1.4 * var(--u)) calc(3 * var(--u)); border-radius: calc(4 * var(--u)); cursor: pointer; }
.userinfo .worksw { display: flex; align-items: center; gap: calc(1.6 * var(--u)); color: #7a2442; font-size: calc(2.9 * var(--u)); }
.userinfo .worksw .sw { width: calc(10 * var(--u)); height: calc(5.4 * var(--u)); border-radius: calc(3 * var(--u)); background: #d9d5e2; position: relative; cursor: pointer; transition: .2s; }
.userinfo .worksw .sw i { position: absolute; top: calc(.5 * var(--u)); left: calc(.5 * var(--u)); width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); border-radius: 50%; background: #fff; transition: .2s; }
.userinfo .worksw .sw.on { background: #8fc47f; }
.userinfo .worksw .sw.on i { left: calc(5.1 * var(--u)); }

/* 余额卡 */
.yue { margin: calc(3 * var(--u)) calc(4 * var(--u)) 0; background: linear-gradient(135deg, #f06c86, #8a7bc0); border-radius: calc(4.8 * var(--u)); padding: calc(5 * var(--u)); color: #fff; display: flex; align-items: center; position: relative; overflow: hidden; box-shadow: 0 8px 22px rgba(168, 155, 255, .35); }
.yue::before { content: ""; position: absolute; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .16); right: calc(-8 * var(--u)); top: calc(-10 * var(--u)); pointer-events: none; }
.yue::after { content: ""; position: absolute; width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .12); left: 30%; bottom: calc(-6 * var(--u)); pointer-events: none; }
.yue .ynum { flex: 1; }
.yue .ynum span { font-size: calc(2.9 * var(--u)); opacity: .9; }
.yue .ynum b { display: block; font-size: calc(7.6 * var(--u)); margin-top: calc(1.2 * var(--u)); text-shadow: 0 2px 6px rgba(24, 20, 32, .14); }
.yue .ybtns { display: flex; gap: calc(2.4 * var(--u)); position: relative; z-index: 1; }
.yue .ybtns button { background: rgba(255, 255, 255, .28); color: #fff; font-size: calc(3.2 * var(--u)); padding: calc(1.8 * var(--u)) calc(5 * var(--u)); border-radius: calc(5 * var(--u)); cursor: pointer; font-weight: bold; }
.yue .ybtns button:active { transform: scale(.94); }

/* 我的订单四宫格（彩色图标底） */
.myorders { background: #fff; margin: calc(3.4 * var(--u)) calc(3.6 * var(--u)) 0; border-radius: calc(2.4 * var(--u)) calc(2.4 * var(--u)) 0 0; padding: calc(4 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u)); display: flex; }
.myorders .moitem { flex: 1; text-align: center; cursor: pointer; }
.myorders .moitem i { font-style: normal; font-size: calc(5.4 * var(--u)); display: flex; align-items: center; justify-content: center; width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin: 0 auto calc(1.4 * var(--u)); border-radius: calc(3.4 * var(--u)); transition: transform .15s ease; }
.myorders .moitem:active i { transform: scale(.88); }
.myorders .moitem span { font-size: calc(3 * var(--u)); color: #211d2b; }
.myorders .moitem:nth-child(4n+1) i { background: linear-gradient(135deg, #fce7ec, #fbd0da); }
.myorders .moitem:nth-child(4n+2) i { background: linear-gradient(135deg, #f1eff9, #e9edf7); }
.myorders .moitem:nth-child(4n+3) i { background: linear-gradient(135deg, #fdf6ea, #fbeed8); }
.myorders .moitem:nth-child(4n) i { background: linear-gradient(135deg, #eef8f2, #d8efe3); }
.otherserv .ositem i { font-style: normal; font-size: calc(5.4 * var(--u)); display: flex; align-items: center; justify-content: center; width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin: 0 auto calc(1.4 * var(--u)); border-radius: calc(3.4 * var(--u)); transition: transform .15s ease; }
.otherserv .ositem:active i { transform: scale(.88); }
.otherserv .ositem:nth-child(4n+1) i { background: linear-gradient(135deg, #fce7ec, #fbd0da); }
.otherserv .ositem:nth-child(4n+2) i { background: linear-gradient(135deg, #f1eff9, #e9edf7); }
.otherserv .ositem:nth-child(4n+3) i { background: linear-gradient(135deg, #fdf6ea, #fbeed8); }
.otherserv .ositem:nth-child(4n) i { background: linear-gradient(135deg, #eef8f2, #d8efe3); }

/* 其它服务宫格 */
.otherserv { background: #fff; margin: 0 calc(3.6 * var(--u)); padding: calc(2 * var(--u)) calc(2 * var(--u)) calc(3 * var(--u)); display: flex; flex-wrap: wrap; border-radius: 0 0 calc(2.4 * var(--u)) calc(2.4 * var(--u)); }
.otherserv .ositem { width: 25%; text-align: center; padding: calc(2.6 * var(--u)) 0; cursor: pointer; }
.otherserv .ositem span { font-size: calc(3 * var(--u)); color: #211d2b; }
.copyright { text-align: center; color: #aba5b7; font-size: calc(2.8 * var(--u)); padding: calc(6 * var(--u)) 0 calc(2 * var(--u)); line-height: 1.8; }
.copyright a { color: #aba5b7; }

/* ---------- 表单 ---------- */
.formcard { background: #fff; border-radius: calc(2.4 * var(--u)); padding: 0 calc(4 * var(--u)); margin-bottom: calc(3 * var(--u)); }
.formcard .frow { display: flex; align-items: center; padding: calc(3.4 * var(--u)) 0; border-bottom: 1px dashed #e6e3ed; gap: calc(3 * var(--u)); }
.formcard .frow:last-child { border-bottom: 0; }
.formcard .frow label { width: calc(22 * var(--u)); font-size: calc(3.6 * var(--u)); color: #211d2b; flex-shrink: 0; }
.formcard .frow input, .formcard .frow select, .formcard .frow textarea { flex: 1; font-size: calc(3.6 * var(--u)); color: #211d2b; background: transparent; }
.formcard .frow textarea { min-height: calc(20 * var(--u)); line-height: 1.6; resize: none; }
.formcard .frow input::placeholder, .formcard .frow textarea::placeholder { color: #aba5b7; }
.formcard .frow .genderpick { display: flex; gap: calc(3 * var(--u)); }
.formcard .frow .genderpick span { font-size: calc(3.3 * var(--u)); color: #837d8f; border: 1px solid #e6e3ed; border-radius: calc(5 * var(--u)); padding: calc(1.4 * var(--u)) calc(4 * var(--u)); cursor: pointer; }
.formcard .frow .genderpick span.on { background: #8a7bc0; color: #fff; border-color: #8a7bc0; }
.formcard .frow .tagpick { display: flex; flex-wrap: wrap; gap: calc(2 * var(--u)); }
.formcard .frow .tagpick span { font-size: calc(3 * var(--u)); color: #837d8f; border: 1px solid #e6e3ed; border-radius: calc(4 * var(--u)); padding: calc(1.2 * var(--u)) calc(3 * var(--u)); cursor: pointer; margin-bottom: calc(1.4 * var(--u)); }
.formcard .frow .tagpick span.on { background: #8a7bc0; color: #fff; border-color: #8a7bc0; }
.agreelink { text-align: center; font-size: calc(3 * var(--u)); color: #5b4fb0; margin: calc(2 * var(--u)) 0 calc(3 * var(--u)); cursor: pointer; }

/* ---------- 店员详情 ---------- */
.clerk-swiper { background: #fff; overflow: hidden; position: relative; }
.clerk-swiper .cinfo { position: relative; margin: calc(2.4 * var(--u)) calc(3.6 * var(--u)) 0; padding: calc(2.6 * var(--u)) calc(3 * var(--u)); background: #fff; border-radius: calc(2.4 * var(--u)); box-shadow: 0 2px 8px rgba(24, 20, 32, .05); color: #211d2b; display: flex; align-items: center; }
.clerk-swiper .cinfo .cava-box { position: relative; flex-shrink: 0; }
.clerk-swiper .cinfo .cframe { position: absolute; top: calc(-2 * var(--u)); right: calc(-2.4 * var(--u)); font-size: calc(4.4 * var(--u)); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); animation: floaty 3.4s ease-in-out infinite; }
.clerk-swiper .cinfo img.cavatar { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; border: 2px solid #fff; object-fit: cover; box-shadow: 0 2px 10px rgba(222, 59, 90, .16); }
.clerk-swiper .cinfo .cn { margin-left: calc(3 * var(--u)); flex: 1; }
.clerk-swiper .cinfo .cn b { font-size: calc(4.6 * var(--u)); display: flex; align-items: center; gap: calc(2 * var(--u)); color: #211d2b; }
.clerk-swiper .cinfo .cn p { font-size: calc(3 * var(--u)); color: #837d8f; margin-top: calc(1 * var(--u)); }
.clerk-swiper .voicebtn { position: absolute; top: calc(3 * var(--u)); right: calc(3 * var(--u)); background: rgba(0, 0, 0, .35); color: #fff; font-size: calc(2.9 * var(--u)); padding: calc(1.6 * var(--u)) calc(3 * var(--u)); border-radius: calc(5 * var(--u)); cursor: pointer; }
.voiceplay { position: fixed; left: 50%; bottom: 15vh; transform: translateX(-50%); background: rgba(24, 20, 32, .78); color: #fff; font-size: calc(3.2 * var(--u)); padding: calc(2.4 * var(--u)) calc(5 * var(--u)); border-radius: calc(5 * var(--u)); z-index: 99; }

.clerk-card { background: #fff; border-radius: calc(2.4 * var(--u)); margin: calc(3 * var(--u)) calc(3.6 * var(--u)) 0; padding: calc(3.4 * var(--u)) calc(4 * var(--u)); }
.clerk-card .crow { display: flex; padding: calc(1.8 * var(--u)) 0; font-size: calc(3.4 * var(--u)); }
.clerk-card .crow label { color: #837d8f; width: calc(18 * var(--u)); flex-shrink: 0; }
.clerk-card .crow span { color: #211d2b; flex: 1; }
.clerk-card .crow .cvpill { display: inline-flex; align-items: center; color: #fff; font-size: calc(2.6 * var(--u)); padding: calc(.4 * var(--u)) calc(1.8 * var(--u)); border-radius: calc(2 * var(--u)); margin-right: calc(1.6 * var(--u)); }
.clerk-card .crow .cvpill.nv { background: #fce7ec; color: #c22b47; }
.clerk-card .crow .cvpill.nan { background: #e9edf7; color: #45598a; }

/* 服务价格 */
.servw { background: #fff; border-radius: calc(2.4 * var(--u)); margin: calc(3 * var(--u)) calc(3.6 * var(--u)) 0; padding: calc(3.4 * var(--u)) calc(4 * var(--u)); }
.servw h4 { font-size: calc(3.8 * var(--u)); color: #211d2b; margin-bottom: calc(2.6 * var(--u)); display: flex; align-items: center; gap: calc(1.6 * var(--u)); }
.servw h4::before { content: ""; width: calc(1 * var(--u)); height: calc(4 * var(--u)); background: linear-gradient(180deg, #f06c86, #de3b5a); border-radius: calc(1 * var(--u)); }
.servw .cattabs { display: flex; gap: calc(2 * var(--u)); margin-bottom: calc(3 * var(--u)); flex-wrap: wrap; }
.servw .cattabs span { font-size: calc(3.2 * var(--u)); color: #837d8f; border: 1px solid #e6e3ed; border-radius: calc(4 * var(--u)); padding: calc(1.4 * var(--u)) calc(3.4 * var(--u)); cursor: pointer; }
.servw .cattabs span.on { background: linear-gradient(90deg, #f06c86, #de3b5a); color: #fff; border-color: transparent; }
.pricerow { display: flex; align-items: center; padding: calc(2.8 * var(--u)) 0; border-bottom: 1px dashed #eae7f0; cursor: pointer; }
.pricerow:last-child { border-bottom: 0; }
.pricerow .pname { flex: 1; font-size: calc(3.6 * var(--u)); color: #211d2b; }
.pricerow .pname p { font-size: calc(2.8 * var(--u)); color: #aba5b7; margin-top: calc(1 * var(--u)); }
.pricerow .pmoney { font-size: calc(4 * var(--u)); color: #de3b5a; font-weight: bold; }
.pricerow .pmoney em { font-style: normal; font-size: calc(2.6 * var(--u)); font-weight: normal; }

/* 评价 */
.evarow { display: flex; padding: calc(2.6 * var(--u)) 0; border-bottom: 1px solid #f3f1f7; }
.evarow .evava { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: linear-gradient(135deg, #fce7ec, #8a7bc0); flex-shrink: 0; }
.evarow .evmain { flex: 1; margin-left: calc(2.6 * var(--u)); }
.evarow .evhead { display: flex; align-items: center; gap: calc(2 * var(--u)); }
.evarow .evhead b { font-size: calc(3.3 * var(--u)); color: #211d2b; }
.evarow .evhead .stars { color: #e29a2e; font-size: calc(2.8 * var(--u)); }
.evarow .evhead time { margin-left: auto; font-size: calc(2.5 * var(--u)); color: #aba5b7; }
.evarow .evcon { font-size: calc(3.2 * var(--u)); color: #514b5e; margin-top: calc(1.4 * var(--u)); line-height: 1.6; }

/* 详情底部操作条 */
.doobar { position: fixed; bottom: 0; left: 0; right: 0; max-width: 750px; margin: 0 auto; background: #fff; padding: calc(2 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u) + env(safe-area-inset-bottom)); display: flex; gap: calc(3 * var(--u)); z-index: 80; box-shadow: 0 -2px 10px rgba(24, 20, 32, .06); }
.doobar .favbtn { width: calc(16 * var(--u)); text-align: center; font-size: calc(2.8 * var(--u)); color: #837d8f; cursor: pointer; padding-top: calc(1 * var(--u)); }
.doobar .favbtn i { font-style: normal; display: block; font-size: calc(5.4 * var(--u)); color: #aba5b7; }
.doobar .favbtn.on i { color: #f06c86; }
.doobar .favbtn.on { color: #f06c86; font-weight: bold; }
.doobar button { flex: 1; border-radius: calc(5.6 * var(--u)); color: #fff; font-size: calc(4 * var(--u)); font-weight: 600; cursor: pointer; }
/* 次要操作（打赏）用描边，主要操作（下单）用实色：层级分明，比两个彩色渐变按钮更专业 */
.doobar .b1 { background: #fff; color: #c22b47; border: 1px solid #f2c6d1; }
.doobar .b2 { background: linear-gradient(135deg, #e8496a, #cf2f4e); box-shadow: 0 4px 12px rgba(207, 47, 78, .22); }

/* ---------- 排行榜 ---------- */
.phcard { display: flex; align-items: center; background: #fff; border-radius: calc(2.4 * var(--u)); padding: calc(3.4 * var(--u)); margin-bottom: calc(2.6 * var(--u)); }
.phcard .rank { width: calc(10 * var(--u)); text-align: center; font-size: calc(4.6 * var(--u)); font-weight: bold; color: #aba5b7; }
.phcard .rank.r1 { color: #e29a2e; }
.phcard .rank.r2 { color: #8f9cb0; }
.phcard .rank.r3 { color: #c08a5e; }
.phcard img { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; object-fit: cover; margin: 0 calc(3 * var(--u)); }
.phcard .phmain { flex: 1; min-width: 0; }
.phcard .phmain b { font-size: calc(3.8 * var(--u)); color: #211d2b; }
.phcard .phmain p { font-size: calc(2.8 * var(--u)); color: #837d8f; margin-top: calc(1 * var(--u)); }
.phcard .phnum { text-align: right; font-size: calc(2.8 * var(--u)); color: #c96a46; }
.phcard .phnum b { display: block; font-size: calc(4.2 * var(--u)); color: #de3b5a; }

/* ---------- 订单 ---------- */
.tabs { display: flex; background: #fff; padding: 0 calc(2 * var(--u)); border-bottom: 1px solid #f3f1f7; }
.tabs .tab { flex: 1; text-align: center; font-size: calc(3.3 * var(--u)); color: #837d8f; padding: calc(3 * var(--u)) 0; cursor: pointer; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs .tab.on { color: #de3b5a; font-weight: bold; }
.tabs .tab.on::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(6 * var(--u)); height: calc(.8 * var(--u)); border-radius: calc(.8 * var(--u)); background: linear-gradient(90deg, #f06c86, #de3b5a); }
.ocard { background: #fff; border-radius: calc(2.4 * var(--u)); padding: calc(3.4 * var(--u)); margin-bottom: calc(2.6 * var(--u)); cursor: pointer; }
.ocard .ohead { display: flex; align-items: center; }
.ocard .ohead .oava { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: linear-gradient(135deg, #fce7ec, #8a7bc0); }
.ocard .ohead .oname { flex: 1; margin-left: calc(3 * var(--u)); }
.ocard .ohead .oname b { font-size: calc(3.8 * var(--u)); color: #211d2b; display: block; }
.ocard .ohead .oname p { font-size: calc(2.8 * var(--u)); color: #837d8f; margin-top: calc(1.2 * var(--u)); }
.ocard .ohead .ostatus { font-size: calc(3.2 * var(--u)); color: #f06c86; font-weight: bold; }
.ocard .ohead .ostatus.done { color: #2e9e6b; }
.ocard .ohead .ostatus.dashang { color: #8a7bc0; }
.ocard .ofoot { display: flex; align-items: center; margin-top: calc(2.6 * var(--u)); padding-top: calc(2.6 * var(--u)); border-top: 1px dashed #f2f0f6; }
.ocard .ofoot .onum { flex: 1; font-size: calc(2.8 * var(--u)); color: #aba5b7; }
.ocard .ofoot .oprice { font-size: calc(4 * var(--u)); color: #de3b5a; font-weight: bold; }
.ocard .ofoot .oprice em { font-style: normal; font-size: calc(2.6 * var(--u)); font-weight: normal; }

/* ---------- 弹窗 ---------- */
.modal-mask { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 96; }
.modal-mask.on { display: block; }
.modal { display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(84 * var(--u)); background: #fff; border-radius: calc(3 * var(--u)); padding: calc(5 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)); z-index: 97; max-height: 82vh; overflow-y: auto; }
.modal.on { display: block; }
.modal h3 { font-size: calc(4.2 * var(--u)); color: #211d2b; text-align: center; margin-bottom: calc(4 * var(--u)); }
.modal .mrow { margin-bottom: calc(3 * var(--u)); }
.modal .mrow label { display: block; font-size: calc(3.2 * var(--u)); color: #837d8f; margin-bottom: calc(1.6 * var(--u)); }
.modal .mrow .minput { border: 1px solid #eae7f0; border-radius: calc(2.4 * var(--u)); padding: calc(2.4 * var(--u)) calc(3 * var(--u)); font-size: calc(3.6 * var(--u)); width: 100%; background: #faf9fc; }
.modal .mrow textarea.minput { min-height: calc(18 * var(--u)); resize: none; line-height: 1.6; }
.modal .mclose { text-align: center; font-size: calc(3.4 * var(--u)); color: #837d8f; padding: calc(2.4 * var(--u)) 0 0; cursor: pointer; }
/* 接单模式选择：每行一个模式，标题 + 一行说明，当前项整行高亮并标「当前」 */
.modal .wmlist { margin: calc(2 * var(--u)) 0 0; }
.modal .wmrow { position: relative; display: flex; flex-direction: column; gap: calc(.6 * var(--u)); padding: calc(2.4 * var(--u)) calc(3 * var(--u)); border-radius: calc(2.4 * var(--u)); background: #f7f5fa; margin-bottom: calc(1.6 * var(--u)); }
.modal .wmrow:last-child { margin-bottom: 0; }
.modal .wmrow b { font-size: calc(3.4 * var(--u)); color: #211d2b; font-weight: 600; }
.modal .wmrow span { font-size: calc(2.8 * var(--u)); color: #7c7589; }
.modal .wmrow em { position: absolute; right: calc(3 * var(--u)); top: 50%; transform: translateY(-50%); font-style: normal; font-size: calc(2.8 * var(--u)); color: #d2557a; }
.modal .wmrow.on { background: #ffeef3; box-shadow: inset 0 0 0 1px #f6b8c9; }
.modal .wmrow.on b { color: #c9426b; }
.modal .wmrow:active { opacity: .75; }
.modal .stars { display: flex; gap: calc(2 * var(--u)); font-size: calc(6 * var(--u)); color: #e6e3ed; }
.modal .stars i { font-style: normal; cursor: pointer; }
.modal .stars i.on { color: #e29a2e; }
.giftgrid { display: flex; flex-wrap: wrap; gap: calc(2.6 * var(--u)); }
.giftgrid .gitem { width: 22%; text-align: center; border: 1px solid #f2f0f6; border-radius: calc(2 * var(--u)); padding: calc(2 * var(--u)) 0; cursor: pointer; }
.giftgrid .gitem i { font-style: normal; font-size: calc(7 * var(--u)); display: block; }
.giftgrid .gitem span { font-size: calc(2.6 * var(--u)); color: #211d2b; display: block; margin-top: calc(1 * var(--u)); }
.giftgrid .gitem em { font-style: normal; font-size: calc(2.4 * var(--u)); color: #de3b5a; display: block; margin-top: calc(.6 * var(--u)); }
.giftgrid .gitem.on { border-color: #f06c86; background: #fdf4f6; }
.amountinput input { width: 100%; border: 1px solid #eae7f0; border-radius: calc(2.4 * var(--u)); padding: calc(2.4 * var(--u)) calc(3 * var(--u)); font-size: calc(3.6 * var(--u)); }
/* 动态发布配图上传 */
.dtuplist { display: flex; gap: calc(2 * var(--u)); flex-wrap: wrap; margin-bottom: calc(2 * var(--u)); }
.dtupitem { position: relative; width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.dtupitem img { width: calc(20 * var(--u)); height: calc(20 * var(--u)); object-fit: cover; border-radius: calc(1.6 * var(--u)); }
.dtupitem i { position: absolute; top: calc(-1.4 * var(--u)); right: calc(-1.4 * var(--u)); width: calc(5 * var(--u)); height: calc(5 * var(--u)); background: rgba(24, 20, 32, .75); color: #fff; border-radius: 50%; font-style: normal; font-size: calc(3 * var(--u)); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dtupbtns { display: flex; align-items: center; }
.dtupadd { display: inline-block; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border: 1px dashed #e3e0ea; border-radius: calc(1.6 * var(--u)); color: #aba5b7; font-size: calc(3.2 * var(--u)); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.nick { display: flex; justify-content: center; align-items: center; gap: calc(1.6 * var(--u)); }

/* 充值档位 */
.topupgrid { display: flex; flex-wrap: wrap; gap: calc(2.4 * var(--u)); margin-top: calc(2 * var(--u)); }
.topupgrid .titem { width: 30%; text-align: center; border: 1px solid #eae7f0; border-radius: calc(2 * var(--u)); padding: calc(3 * var(--u)) 0; cursor: pointer; }
.topupgrid .titem b { font-size: calc(4 * var(--u)); color: #211d2b; display: block; }
.topupgrid .titem span { font-size: calc(2.8 * var(--u)); color: #aba5b7; display: block; margin-top: calc(1 * var(--u)); }
.topupgrid .titem em { font-style: normal; font-size: calc(3 * var(--u)); color: #de3b5a; display: block; margin-top: calc(1 * var(--u)); font-weight: bold; }
.topupgrid .titem.on { border-color: #f06c86; background: #fdf4f6; }

/* ---------- Toast ---------- */
.toast { display: none; position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); background: rgba(24, 20, 32, .80); color: #fff; font-size: calc(3.4 * var(--u)); padding: calc(2.6 * var(--u)) calc(5 * var(--u)); border-radius: calc(2.6 * var(--u)); z-index: 99; max-width: calc(80 * var(--u)); text-align: center; }
.toast.on { display: block; }

/* ---------- 登录页 ---------- */
.loginw { min-height: 100vh; background: linear-gradient(180deg, #fce7ec, #f7a8b8 45%, #f5f4f8); padding: calc(16 * var(--u)) calc(8 * var(--u)) 0; text-align: center; }
.loginw .logo { font-size: calc(12 * var(--u)); margin-bottom: calc(2 * var(--u)); }
.loginw h1 { font-size: calc(6.4 * var(--u)); color: #fff; margin-bottom: calc(2 * var(--u)); }
.loginw p { font-size: calc(3.2 * var(--u)); color: rgba(255, 255, 255, .85); margin-bottom: calc(12 * var(--u)); }
.loginw .wxlogin { background: linear-gradient(90deg, #3fae7c, #2e9e6b); color: #fff; margin-bottom: calc(4 * var(--u)); }
.loginw .demologin { background: rgba(255, 255, 255, .8); color: #8a7bc0; }
.loginw .uptip { font-size: calc(2.8 * var(--u)); color: rgba(255, 255, 255, .75); margin-top: calc(10 * var(--u)); line-height: 1.8; }
.phonelogin { background: rgba(255, 255, 255, .92); border-radius: calc(3.6 * var(--u)); padding: calc(5 * var(--u)) calc(4.6 * var(--u)) calc(4 * var(--u)); margin-bottom: calc(4 * var(--u)); box-shadow: 0 4px 16px rgba(24, 20, 32, .07); }
.phonelogin .plrow { display: flex; align-items: center; background: #f7f5fb; border-radius: calc(2.6 * var(--u)); margin-bottom: calc(2.6 * var(--u)); }
.phonelogin .plrow input { flex: 1; background: transparent; border: 0; font-size: calc(3.6 * var(--u)); padding: calc(2.6 * var(--u)) calc(3 * var(--u)); color: #211d2b; }
.phonelogin .plrow .codebtn { flex-shrink: 0; background: linear-gradient(90deg, #f06c86, #de3b5a); color: #fff; font-size: calc(3 * var(--u)); padding: calc(1.6 * var(--u)) calc(3 * var(--u)); border-radius: calc(2.6 * var(--u)); margin-right: calc(.8 * var(--u)); cursor: pointer; }
.phonelogin .plrow .codebtn:disabled { background: #e3e0ea; }
.phonelogin button.purple-btn { margin-bottom: 0; }

/* 钱包/提现 */
.wbalcard { margin: calc(3 * var(--u)) calc(3.6 * var(--u)) 0; background: linear-gradient(135deg, #c7bde0, #8a7bc0); border-radius: calc(4 * var(--u)); padding: calc(4.6 * var(--u)) calc(5 * var(--u)); color: #fff; }
.wbalcard .wbrow { display: flex; align-items: center; justify-content: space-between; }
.wbalcard .wbrow span { font-size: calc(3.1 * var(--u)); opacity: .92; }
.wbalcard .wbrow .wbtn { font-size: calc(2.8 * var(--u)); background: rgba(255, 255, 255, .25); padding: calc(1.2 * var(--u)) calc(3 * var(--u)); border-radius: calc(4 * var(--u)); cursor: pointer; }
.wbalcard b { display: block; font-size: calc(8.4 * var(--u)); margin-top: calc(2 * var(--u)); }
.wbalcard .wspend { font-size: calc(2.7 * var(--u)); opacity: .78; margin-top: calc(1.4 * var(--u)); }
.walletop { display: flex; gap: calc(3 * var(--u)); }
.walletop .wcard { flex: 1; background: #fff; border-radius: calc(2.4 * var(--u)); padding: calc(4 * var(--u)); text-align: center; }
.walletop .wcard i { font-style: normal; font-size: calc(7 * var(--u)); display: block; margin-bottom: calc(1.6 * var(--u)); }
.walletop .wcard b { font-size: calc(4.6 * var(--u)); color: #211d2b; display: block; }
.walletop .wcard span { font-size: calc(2.8 * var(--u)); color: #837d8f; display: block; margin-top: calc(1.2 * var(--u)); }
.paytip { font-style: normal; font-size: calc(2.6 * var(--u)); color: #aba5b7; font-weight: normal; margin-left: calc(1 * var(--u)); }
.paylist { display: flex; flex-direction: column; gap: calc(2.4 * var(--u)); }
.payitem { display: flex; align-items: center; gap: calc(2.4 * var(--u)); border: 1px solid #eae7f0; border-radius: calc(2.4 * var(--u)); padding: calc(3.2 * var(--u)) calc(3.4 * var(--u)); font-size: calc(3.6 * var(--u)); color: #211d2b; cursor: pointer; position: relative; }
.payitem .pico { font-style: normal; font-size: calc(5 * var(--u)); }
.payitem.wx .pico { color: #2e9e6b; }
.payitem.zfb .pico { color: #2f6fd0; }
.payitem .pchk { font-style: normal; margin-left: auto; width: calc(5.6 * var(--u)); height: calc(5.6 * var(--u)); border-radius: 50%; border: 1px solid #e6e3ed; color: transparent; font-size: calc(3.4 * var(--u)); display: flex; align-items: center; justify-content: center; }
.payitem.on { border-color: #7fc9a1; background: #f2f9f5; }
.payitem.on .pchk { background: #2e9e6b; border-color: #2e9e6b; color: #fff; }
.guarantee { margin-top: calc(5 * var(--u)); background: #faf9fc; border-radius: calc(2.4 * var(--u)); padding: calc(3.4 * var(--u)); }
.guarantee b { font-size: calc(3.1 * var(--u)); color: #514b5e; }
.guarantee p { font-size: calc(2.8 * var(--u)); color: #837d8f; line-height: 1.8; margin-top: calc(1.6 * var(--u)); }
.topupgrid .titem b { position: relative; font-size: calc(4.4 * var(--u)); }
.topupgrid .titem b .give { position: absolute; top: calc(-3 * var(--u)); right: calc(-3 * var(--u)); font-style: normal; font-size: calc(2 * var(--u)); color: #fff; background: #de3b5a; border-radius: calc(2 * var(--u)); padding: calc(.3 * var(--u)) calc(1.2 * var(--u)); }
.topupgrid .titem .price { font-style: normal; font-size: calc(3.2 * var(--u)); color: #211d2b; display: block; margin-top: calc(1.2 * var(--u)); font-weight: bold; }

/* 留言 */
.lycard { background: #fff; border-radius: calc(2.4 * var(--u)); padding: calc(3.4 * var(--u)); margin-bottom: calc(2.6 * var(--u)); }
.lycard .lyhead { display: flex; align-items: center; gap: calc(2 * var(--u)); }
.lycard .lyhead b { font-size: calc(3.6 * var(--u)); color: #211d2b; }
.lycard .lyhead time { margin-left: auto; font-size: calc(2.6 * var(--u)); color: #aba5b7; }
.lycard .lycon { font-size: calc(3.4 * var(--u)); color: #211d2b; margin-top: calc(2 * var(--u)); line-height: 1.6; }
.lycard .lyreply { margin-top: calc(2.4 * var(--u)); background: #f7f5fb; border-radius: calc(1.6 * var(--u)); padding: calc(2.4 * var(--u)); font-size: calc(3.2 * var(--u)); color: #514b5e; }
.lycard .lyreply b { color: #8a7bc0; }

/* ---------- 新增：订单详情状态卡与流程时间线 ---------- */
.ostat-card { margin: calc(3 * var(--u)) calc(3.6 * var(--u)) 0; border-radius: calc(3 * var(--u)); padding: calc(4.4 * var(--u)); display: flex; align-items: center; color: #fff; background: linear-gradient(90deg, #f06c86, #de3b5a); box-shadow: 0 6px 18px rgba(222, 59, 90, .25); animation: cardIn .38s ease both; }
.ostat-card.done { background: linear-gradient(90deg, #3fae7c, #2e9e6b); box-shadow: 0 6px 18px rgba(56, 193, 114, .25); }
.ostat-card.dashang { background: linear-gradient(90deg, #8a7bc0, #8a7bc0); box-shadow: 0 6px 18px rgba(108, 92, 168, 0.24); }
.ostat-card .osc-l { flex: 1; }
.ostat-card .osc-l b { font-size: calc(4.6 * var(--u)); display: block; }
.ostat-card .osc-l span { font-size: calc(2.8 * var(--u)); opacity: .88; display: block; margin-top: calc(1.2 * var(--u)); }
.ostat-card em { font-style: normal; font-size: calc(6 * var(--u)); font-weight: bold; text-shadow: 0 2px 6px rgba(24, 20, 32, .13); }
.ostat-card em i { font-style: normal; font-size: calc(2.6 * var(--u)); font-weight: normal; opacity: .85; margin-left: calc(.6 * var(--u)); }
.otimeline { background: #fff; margin: calc(2.6 * var(--u)) calc(3.6 * var(--u)) 0; border-radius: calc(2.4 * var(--u)); padding: calc(4 * var(--u)); }
.ostep { display: flex; align-items: flex-start; gap: calc(2.6 * var(--u)); position: relative; padding-bottom: calc(4 * var(--u)); }
.ostep:last-child { padding-bottom: 0; }
.ostep::before { content: ""; position: absolute; left: calc(4.4 * var(--u)); top: calc(9.4 * var(--u)); bottom: 0; width: calc(.6 * var(--u)); border-radius: calc(.6 * var(--u)); background: #f4f2f7; }
.ostep:last-child::before { display: none; }
.ostep i { font-style: normal; width: calc(8.8 * var(--u)); height: calc(8.8 * var(--u)); border-radius: 50%; background: #f3f1f7; display: flex; align-items: center; justify-content: center; font-size: calc(4 * var(--u)); flex-shrink: 0; z-index: 1; }
.ostep.on i { background: linear-gradient(135deg, #f06c86, #de3b5a); box-shadow: 0 3px 8px rgba(222, 59, 90, .3); }
.ostep .ostepmain { padding-top: calc(.6 * var(--u)); }
.ostep b { font-size: calc(3.3 * var(--u)); color: #211d2b; display: block; }
.ostep.on b { color: #de3b5a; }
.ostep span { font-size: calc(2.6 * var(--u)); color: #aba5b7; display: block; margin-top: calc(.8 * var(--u)); }
.orow { display: flex; align-items: center; padding-bottom: calc(3 * var(--u)); margin-bottom: calc(2 * var(--u)); border-bottom: 1px dashed #f2f0f6; }
.orow .orava { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; object-fit: cover; }
.orow .oright { margin-left: calc(3 * var(--u)); }
.orow .oright b { font-size: calc(3.8 * var(--u)); color: #211d2b; }
.orow .oright p { font-size: calc(2.8 * var(--u)); color: #837d8f; margin-top: calc(1 * var(--u)); }

/* ---------- 新增：店员工作台 ---------- */
.ccstats { display: flex; gap: calc(1.6 * var(--u)); margin: calc(3 * var(--u)) calc(3.6 * var(--u)) calc(2.6 * var(--u)); background: linear-gradient(135deg, #8a7bc0, #6c5ca8); border-radius: calc(3 * var(--u)); padding: calc(3.6 * var(--u)) calc(2.4 * var(--u)); box-shadow: 0 8px 22px rgba(151, 129, 202, .3); }
.ccstats .ccs { flex: 1; text-align: center; color: #fff; border-radius: calc(2 * var(--u)); padding: calc(1 * var(--u)) 0; }
.ccstats .ccs b { font-size: calc(4.4 * var(--u)); display: block; text-shadow: 0 1px 4px rgba(24, 20, 32, .14); }
.ccstats .ccs span { font-size: calc(2.2 * var(--u)); opacity: .88; display: block; margin-top: calc(.8 * var(--u)); white-space: nowrap; }
.ccstats .ccs.hot { background: rgba(222, 59, 90, .4); }
.ccreq { font-size: calc(3 * var(--u)); color: #514b5e; background: #f8f7fb; border-radius: calc(1.6 * var(--u)); padding: calc(2 * var(--u)) calc(2.6 * var(--u)); margin-top: calc(2.4 * var(--u)); line-height: 1.6; }
.ccwx { font-size: calc(2.6 * var(--u)); color: #837d8f; margin-top: calc(2 * var(--u)); }
.ccwx b { color: #de3b5a; }

/* ---------- 新增：收益明细页 ---------- */
.ecstats { display: flex; gap: calc(1.6 * var(--u)); margin: calc(3 * var(--u)) calc(3.6 * var(--u)) calc(2.6 * var(--u)); background: linear-gradient(135deg, #f0c894, #c96a46); border-radius: calc(3 * var(--u)); padding: calc(3.6 * var(--u)) calc(2.4 * var(--u)); box-shadow: 0 8px 22px rgba(255, 154, 118, .3); }
.ecstats .ecs { flex: 1; text-align: center; color: #fff; border-radius: calc(2 * var(--u)); padding: calc(1 * var(--u)) 0; }
.ecstats .ecs b { font-size: calc(4.6 * var(--u)); display: block; text-shadow: 0 1px 4px rgba(24, 20, 32, .14); }
.ecstats .ecs span { font-size: calc(2.2 * var(--u)); opacity: .9; display: block; margin-top: calc(.8 * var(--u)); white-space: nowrap; }
.ecstats .ecs.hot { background: rgba(222, 59, 90, .32); }
.ecrow { display: flex; align-items: center; gap: calc(2.6 * var(--u)); background: #fff; border-radius: calc(2 * var(--u)); padding: calc(3 * var(--u)); margin-bottom: calc(2 * var(--u)); }
.ec-ico { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(2.6 * var(--u)); display: flex; align-items: center; justify-content: center; font-size: calc(4.6 * var(--u)); flex-shrink: 0; }
.ec-ico.order { background: linear-gradient(135deg, #fce7ec, #fbd0da); }
.ec-ico.reward { background: linear-gradient(135deg, #f1eff9, #e9edf7); }
.ec-ico.tixian { background: linear-gradient(135deg, #fdf6ea, #fbeed8); }
.ec-main { flex: 1; min-width: 0; }
.ec-main b { font-size: calc(3 * var(--u)); color: #211d2b; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-main span { font-size: calc(2.4 * var(--u)); color: #aba5b7; display: block; margin-top: calc(1 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-amt { font-size: calc(4.2 * var(--u)); font-weight: bold; flex-shrink: 0; }
.ec-amt.in { color: #2e9e6b; }
.ec-amt.out { color: #de3b5a; }

/* ---------- 新增：下拉刷新指示器 ---------- */
#ptr { position: fixed; top: 0; left: 50%; transform: translate(-50%, -100%); z-index: 90; width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(151, 129, 202, .3); display: flex; align-items: center; justify-content: center; transition: transform .22s ease; }
#ptr .ptr-ico { font-style: normal; font-size: calc(5.6 * var(--u)); color: #6c5ca8; display: inline-block; transition: transform .2s ease; }
#ptr.ready .ptr-ico { transform: rotate(180deg); color: #de3b5a; }
#ptr.loading .ptr-ico { animation: spin .8s linear infinite; }

/* ---------- 新增：店员详情图集视频（第3格） ---------- */
.gvideobox { position: relative; width: 100%; height: calc(104 * var(--u)); background: #171520; overflow: hidden; animation: fadeIn .3s ease; }
.gvideobox .gvideo { width: 100%; height: 100%; object-fit: contain; display: block; outline: none; }
/* 视频播放态：缩略图条取消叠压（系统播放控件是原生层，z-index 压不住），计数与类型标签让位 */
.clerk-swiper .gthumbs { transition: margin-top .2s ease; }
.clerk-swiper.vplaying .gthumbs { margin-top: calc(1.6 * var(--u)); }
.clerk-swiper.vplaying .gcount,
.clerk-swiper.vplaying .gtype.vid { display: none; }
.gvbadge { position: absolute; left: calc(3 * var(--u)); top: calc(3 * var(--u)); background: rgba(24, 20, 32, .50); color: #fff; font-size: calc(2.6 * var(--u)); padding: calc(1 * var(--u)) calc(2.6 * var(--u)); border-radius: calc(3 * var(--u)); pointer-events: none; z-index: 2; }
/* 申请/编辑页：照片×2 + 视频（第3格）上传区 */
/* 3 列自动换行：后台把数量调到 9 张时能排成 3 行，不会像 flex 单行那样把格子挤成一条针 */
.upgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(2.4 * var(--u)); }
.upcell { position: relative; flex: 1; height: calc(28 * var(--u)); border-radius: calc(2 * var(--u)); background: #f7f5fb; border: 1px dashed #e3e0ea; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.upcell em { font-style: normal; font-size: calc(6 * var(--u)); color: #b8b3c4; line-height: 1; }
.upcell span { font-size: calc(2.4 * var(--u)); color: #aba5b7; margin-top: calc(1.4 * var(--u)); }
.upcell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.upcell i { position: absolute; top: calc(1 * var(--u)); right: calc(1 * var(--u)); width: calc(5.6 * var(--u)); height: calc(5.6 * var(--u)); border-radius: 50%; background: rgba(24, 20, 32, .68); color: #fff; font-style: normal; font-size: calc(3 * var(--u)); display: flex; align-items: center; justify-content: center; z-index: 2; }
.upcell.video.on { border: 1px solid #c7bde0; background: #f7f5fb; }
.upcell.video.on em { color: #6c5ca8; z-index: 2; }
.upcell.video.on span { color: #6c5ca8; z-index: 2; }
/* 上传格子的类型标注（照片1 / 照片2 / 视频），与详情页图集标注一致 */
.upcell.add { background: #fbfaff; border-color: #d8d2e6; }
.upcell.add em { color: #b9a9d6; }
.upcell.add span { color: #a99cc4; }
.upcell .utag { position: absolute; left: 0; top: 0; font-style: normal; font-size: calc(2.2 * var(--u)); line-height: 1.65; color: #fff; background: rgba(24, 20, 32, .62); padding: 0 calc(1.2 * var(--u)); border-radius: 0 0 calc(1.2 * var(--u)) 0; z-index: 3; }
.upcell .utag.vid { background: rgba(151, 129, 202, .95); }
.uptip2 { font-size: calc(2.5 * var(--u)); color: #aba5b7; margin-top: calc(2.4 * var(--u)); line-height: 1.7; }
/* 语音介绍上传/试听（店员申请与编辑资料） */
.voiceup { display: flex; align-items: center; flex-wrap: wrap; gap: calc(2.4 * var(--u)); margin-top: calc(2.4 * var(--u)); }
.voiceup .vubtn { font-size: calc(3 * var(--u)); color: #6c5ca8; background: #f7f5fb; border: 1px dashed #c7bde0; border-radius: calc(5 * var(--u)); padding: calc(1.6 * var(--u)) calc(4 * var(--u)); cursor: pointer; }
.voiceup .vubtn.pink { color: #de3b5a; background: #fdf4f6; border-color: #f9c2cf; }
.voiceup .vubtn.play { color: #fff; background: linear-gradient(90deg, #f06c86, #de3b5a); border: 0; }
.voiceup .vubtn.play.playing { filter: brightness(1.06); box-shadow: 0 0 0 calc(1.4 * var(--u)) rgba(240, 108, 134, .18); }
.voiceup .vdel { font-size: calc(2.8 * var(--u)); color: #aba5b7; cursor: pointer; padding: calc(1.2 * var(--u)); }
/* 模态内视频预览（兼容主流浏览器） */
.apvideo { width: 100%; max-height: 56vh; border-radius: calc(2 * var(--u)); background: #000; display: block; }

/* ============================================================
   桌面端（PC / 平板横屏）自适应
   宽屏下按 750px 设计稿 1:1 等比呈现并居中，
   避免 vw 随视口放大导致文字巨大、搜索框与列表溢出
   ============================================================ */
@media (min-width: 751px) {
  :root {
    --u: 7.5px;                        /* 750px 设计稿的 1% */
    --edge: calc((100% - 750px) / 2);  /* 居中后两侧的留白 */
  }
  html {
    min-height: 100%;
    background:
      radial-gradient(1100px 560px at 8% -8%, #fce7ec 0%, rgba(255, 227, 238, 0) 62%),
      radial-gradient(900px 520px at 94% 2%, #eeebf8 0%, rgba(231, 226, 255, 0) 60%),
      #f4f2f7;
    background-attachment: fixed;
  }
  /* 页面主体呈现为居中的画布 */
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
    box-shadow: 0 0 0 1px rgba(24, 20, 32, .05), 0 22px 60px rgba(24, 20, 32, .10);
  }
  /* 桌面端滚动条 */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #dddae6; border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: #b8b3c4; }

  /* 客服悬浮球：不越出页面容器，尺寸改为桌面尺度 */
  .kefu-fab {
    width: 84px; height: 84px; gap: 2px;
    right: calc(var(--edge) + 24px);
    bottom: calc(76px + env(safe-area-inset-bottom));
    animation: none;
  }
  .kefu-fab .kfico { font-size: 30px; }
  .kefu-fab .kftxt { font-size: 11px; }
  .kefu-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(222, 59, 90, .45); }

  /* 店员详情主图：宽屏下按视口高度收敛，避免图片过高把信息挤出首屏 */
  .gallery .gtrack,
  .gallery .gtrack > img,
  .gvideobox { height: min(calc(104 * var(--u)), 46vh); }
  .clerk-swiper.nomedia .gtrack,
  .clerk-swiper.nomedia .gtrack > img { height: min(calc(68 * var(--u)), 34vh); }

  /* 弹窗与提示条在宽屏下限制宽度，避免过于扁宽 */
  .modal { width: min(560px, calc(84 * var(--u))); max-height: min(720px, 82vh); }
  .toast { max-width: 520px; }
  .voiceplay { max-width: 520px; }

  /* 底部导航在桌面端略作加高，避免与放大后的内容比例失调 */
  .tabbar { height: calc(56px + env(safe-area-inset-bottom)); }
  .tabbar .titem { font-size: 12px; }
}

/* 鼠标设备：补齐悬停反馈（触屏不生效） */
@media (hover: hover) and (pointer: fine) {
  button.pink-btn:hover, button.purple-btn:hover, button.gray-btn:hover { filter: brightness(1.05); }
  .tabbar .titem:hover { color: #9b6fc4; }
  .zanbtn:hover { transform: scale(1.12); }
  .kwlog .kwchip:hover { background: #fff; transform: translateY(-1px); }
  .tuijianw .filters .fpill:hover, .servw .cattabs span:hover, .formcard .frow .genderpick span:hover { border-color: #fbd0da; color: #de3b5a; }
  .dianyuan:hover, .ocard:hover, .rwcard:hover, .xdcard:hover, .phcard:hover, .lycard:hover, .rcard:hover, .dtcard:hover, .payitem:hover {
    box-shadow: 0 8px 22px rgba(151, 129, 202, .22);
  }
  .dianyuan:hover .follow { background: #fdf4f6; }
  .gthumb:hover { box-shadow: 0 0 0 2px rgba(222, 59, 90, .5); }
  .gthumb.on:hover { box-shadow: 0 0 0 2px #de3b5a; }
  .giftgrid .gitem:hover, .topupgrid .titem:hover { border-color: #fbd0da; }
}