/* ============================================
   狼窝电竞俱乐部 - 移动端 H5 设计系统
   主强调色黄 #FFE600 / 白底 / 粉红渐变 Banner / 圆角卡片
   ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 100px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: #f5f5f5;
  color: #333;
  font-size: .14rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ===== 桌面端/宽屏：按手机竖版居中展示 ===== */
@media (min-width: 481px) {
  html { background: #e4e6eb; }
  body {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    box-shadow: 0 0 40px rgba(0, 0, 0, .18);
  }
  /* 固定定位的底部栏与弹层同样限制在手机列宽内并居中 */
  .tabbar, .buybar, .chat-input, .mask {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 480px;
  }
}
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
button { border: none; outline: none; background: none; cursor: pointer; font-family: inherit; }
input, textarea { outline: none; font-family: inherit; border: none; background: none; }

/* rem 适配：以 375 设计稿为基准（root font-size 由 app.js 设置） */

/* 顶部导航栏 */
.navbar {
  position: sticky; top: 0; z-index: 20;
  height: .44rem; line-height: .44rem;
  background: #fff; color: #333;
  display: flex; align-items: center; justify-content: center;
  font-size: .17rem; font-weight: 600;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.navbar .nb-back { position: absolute; left: .05rem; top: 0; width: .44rem; height: .44rem; display: flex; align-items: center; justify-content: center; color: #333; }
.navbar .nb-title { }

/* 页面容器（主页面含底部 tab 需留出 padding） */
.page { padding-bottom: .9rem; min-height: 100vh; }

/* 卡片 */
.card { background: #fff; border-radius: .12rem; box-shadow: 0 2px 12px rgba(0,0,0,.05); overflow: hidden; }
.panel { background: #fff; border-radius: .12rem; margin: .1rem .12rem; box-shadow: 0 2px 12px rgba(0,0,0,.04); overflow: hidden; }
.panel .panel-hd { display: flex; align-items: center; justify-content: space-between; padding: .12rem .14rem; font-weight: 600; }
.panel .panel-more { font-size: .12rem; color: #999; font-weight: 400; }

/* 首页 Banner 轮播 */
.banner { display: block; margin: .1rem .12rem; border-radius: .14rem; overflow: hidden; position: relative; height: 1.6rem; }
.banner .b-item { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; display: flex; align-items: center; padding: .15rem .18rem; }
.banner .b-item.active { opacity: 1; }
.banner .b-item.pink { background: linear-gradient(135deg, #ffb3c8, #ff7fb0); }
.banner .b-item.orange { background: linear-gradient(135deg, #ffd36b, #ff9f43); }
.banner .b-item .b-txt { flex: 1; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.banner .b-item .b-main { font-size: .24rem; font-weight: 800; margin-bottom: .06rem; }
.banner .b-item .b-sub { font-size: .12rem; opacity: .95; }
.banner .b-dots { position: absolute; bottom: .08rem; left: 0; right: 0; display: flex; justify-content: center; gap: .05rem; }
.banner .b-dots i { width: .06rem; height: .06rem; border-radius: 50%; background: rgba(255,255,255,.5); }
.banner .b-dots i.on { background: #fff; width: .16rem; border-radius: .03rem; }

/* 公告滚条 */
.notice { background: linear-gradient(90deg, #ffe100, #ffc400); color: #5a3d00; display: flex; align-items: center; height: .32rem; margin: .08rem .12rem; border-radius: .06rem; overflow: hidden; }
.notice .n-icon { width: .3rem; text-align: center; font-size: .16rem; flex-shrink: 0; }
.notice .n-scroll { flex: 1; overflow: hidden; white-space: nowrap; }
.notice .n-scroll span { display: inline-block; padding-left: 100%; animation: marquee 18s linear infinite; font-size: .12rem; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* 首页游戏分类 */
.games { display: flex; padding: .14rem .06rem; justify-content: space-around; }
.games .game { width: .6rem; text-align: center; }
.games .game .g-icon { width: .52rem; height: .52rem; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .24rem; color: #fff; }
.games .game.g-on .g-icon { box-shadow: 0 4px 10px rgba(255,230,0,.6); }
.games .game .g-name { margin-top: .06rem; font-size: .12rem; padding: .02rem .06rem; border-radius: .04rem; }
.games .game.g-on .g-name { background: #ffe100; font-weight: 700; color: #333; }

/* 福利分类横滑 */
.welfare-scroll { display: flex; gap: .08rem; overflow-x: auto; padding: .04rem .12rem .14rem; -webkit-overflow-scrolling: touch; }
.welfare-scroll::-webkit-scrollbar { display: none; }
.wn-item { flex-shrink: 0; width: .66rem; text-align: center; border: 1px solid #1e90ff; border-radius: .08rem; padding: .08rem 0; background: #fff; }
.wn-item .wn-t { font-size: .12rem; font-weight: 700; color: #1e90ff; }
.wn-item .wn-s { font-size: .1rem; color: #888; margin-top: .02rem; }
.wn-item.wn-more { display: flex; flex-direction: column; align-items: center; justify-content: center; border-style: dashed; width: .5rem; color: #1e90ff; }

/* 通用商品网格/卡片 */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem; padding: 0 .12rem; }
.goods-card { background: #fff; border-radius: .12rem; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.05); border-top: 3px solid #ffe100; }
.goods-card .gc-thumb { height: 1.5rem; position: relative; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.goods-card .gc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.goods-card .gc-tag { position: absolute; top: .05rem; left: .05rem; font-size: .1rem; color: #fff; background: #ff4444; padding: .01rem .05rem; border-radius: .03rem; }
.goods-card .gc-body { padding: .1rem .1rem .12rem; }
.goods-card .gc-title { font-size: .13rem; font-weight: 600; line-height: 1.35; height: .36rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.goods-card .gc-sub { font-size: .11rem; color: #999; margin-top: .04rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goods-card .gc-tags { margin-top: .06rem; display: flex; gap: .04rem; flex-wrap: wrap; }
.goods-card .gc-tags em { font-style: normal; font-size: .09rem; color: #d5482f; border: 1px solid #ff9b88; background: #fff3f0; padding: 0 .04rem; border-radius: .02rem; }
.goods-card .gc-ft { display: flex; align-items: center; justify-content: space-between; margin-top: .08rem; }
.goods-card .gc-price { color: #ff3b30; font-weight: 800; font-size: .16rem; }
.goods-card .gc-price small { font-size: .11rem; }
.goods-card .gc-ori { color: #bbb; text-decoration: line-through; font-size: .1rem; margin-left: .03rem; font-weight: 400; }
.goods-card .gc-btn { background: linear-gradient(90deg,#ffe100,#ffc400); color: #333; font-size: .11rem; font-weight: 700; padding: .04rem .1rem; border-radius: .14rem; }

/* 商品卡图上的促销横幅（商品列表/搜索结果共用） */
.gl-banner { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.66)); color: #fff; font-size: .1rem; line-height: 1.4; padding: .16rem .06rem .06rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.gl-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .5rem; }
.gl-ft { display: flex; align-items: center; gap: .05rem; margin-top: .06rem; color: #bbb; font-size: .1rem; }

/* 底部 TabBar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: .5rem; background: #fff;
  border-top: 1px solid #eee;
  display: flex; align-items: stretch;
}
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #999; font-size: .1rem; gap: .02rem; }
.tabbar a .tb-ic { width: .24rem; height: .24rem; }
.tabbar a.on { color: #333; }
.tabbar a.on .tb-ic { color: #e6b800; }

/* 分类页 */
.cat-wrap { display: flex; margin-top: 0; }
.cat-left { width: .92rem; flex-shrink: 0; background: #f5f5f5; }
.cat-left li { padding: .14rem .05rem; font-size: .12rem; text-align: center; color: #555; cursor: pointer; }
.cat-left li.on { background: #ffe100; color: #1a1a1a; font-weight: 700; }
.cat-right { flex: 1; background: #fff; min-height: 4rem; }
/* 右列海报式商品条目（对应设计稿：标题 + 宣传大图，每页为该分类及之后的商品） */
.cg-card { display: block; padding: .12rem .12rem .14rem; border-bottom: .08rem solid #f5f5f5; }
.cg-card:last-child { border-bottom: none; }
.cg-hd { display: flex; align-items: center; gap: .06rem; margin-bottom: .08rem; }
.cg-title { flex: 1; min-width: 0; font-size: .14rem; font-weight: 700; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-tag { flex-shrink: 0; font-size: .09rem; color: #fff; background: #ff4444; border-radius: .03rem; padding: .01rem .05rem; }
.cg-poster { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: .08rem; overflow: hidden; border: 1px solid #f0f0f0; background: #fafafa; }
.cg-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 无图占位：渐变底 + emoji + 蓝色横幅标题（模拟宣传图） */
.cg-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .56rem; }
.cg-banner { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(30,144,255,.92), rgba(64,169,255,.92)); color: #fff; text-align: center; font-size: .14rem; font-weight: 700; padding: .09rem .06rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
/* 价格信息栏（海报下方：大号红价 + 划线原价 + 销量 + 购买钮） */
.cg-info { display: flex; align-items: center; gap: .08rem; margin-top: .1rem; padding: 0 .02rem; }
.cg-price { display: flex; align-items: baseline; color: #ff3b30; font-weight: 800; font-size: .22rem; line-height: 1; letter-spacing: -.01rem; }
.cg-price i { font-style: normal; font-size: .13rem; font-weight: 700; margin-right: .02rem; }
.cg-price .cg-ori { color: #bbb; font-size: .1rem; font-weight: 400; text-decoration: line-through; margin-left: .05rem; letter-spacing: 0; }
.cg-info .cg-sales { font-size: .1rem; color: #bbb; flex: 1; }
.cg-buy { flex-shrink: 0; background: linear-gradient(90deg, #ffe100, #ffc400); border: 1px solid #1a1a1a; color: #1a1a1a; font-size: .12rem; font-weight: 800; padding: .07rem .18rem; border-radius: .17rem; box-shadow: 0 2px 6px rgba(255, 200, 0, .35); }
.cg-footer { padding: .18rem 0 .22rem; text-align: center; color: #c8c8c8; font-size: .1rem; line-height: 1.7; }
/* 旧版小图行条目（保留兼容） */
.cat-item { padding: .12rem; border-bottom: 1px solid #f2f2f2; }
.cat-item .ci-h { font-size: .13rem; font-weight: 700; margin-bottom: .08rem; color: #333; }
.cat-item .ci-row { display: flex; padding-bottom: .1rem; }
.cat-item .ci-thumb { width: .72rem; height: .72rem; border: 2px solid #1e90ff; border-radius: .06rem; position: relative; margin-right: .1rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #1e90ff; font-weight: 700; }
.cat-item .ci-thumb em { position: absolute; left: 0; top: 0; background: #1e90ff; color: #fff; font-style: normal; font-size: .09rem; padding: .01rem .04rem; border-radius: 0 .04rem .04rem 0; }
.cat-item .ci-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.cat-item .ci-p { font-weight: 800; color: #ff3b30; font-size: .15rem; }
.cat-item .ci-btns { display: flex; gap: .06rem; }
.cat-item .ci-btn { font-size: .1rem; padding: .03rem .08rem; border-radius: .12rem; }
.cat-item .ci-btn.b-ghost { border: 1px solid #1e90ff; color: #1e90ff; }
.cat-item .ci-btn.b-solid { background: linear-gradient(90deg,#ffe100,#ffc400); color: #333; font-weight: 700; }

/* 横向顶部 Tab（首页游戏/聊天状态/图标宫格共用） */
.h-tabs { display: flex; background: #fff; margin: .1rem .12rem; border-radius: .1rem; padding: 0 .06rem; overflow-x: auto; }
.h-tabs::-webkit-scrollbar { display: none; }
.h-tabs .ht { flex-shrink: 0; padding: .11rem .12rem; font-size: .13rem; color: #555; position: relative; white-space: nowrap; }
.h-tabs .ht.on { color: #333; font-weight: 700; }
.h-tabs .ht.on::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: .04rem; height: .03rem; background: #ffe100; border-radius: .02rem; }

/* 纯文字订单状态 Tab（无背景容器，选中下划线） */
.plain-tabs { display: flex; overflow-x: auto; padding: .06rem .06rem 0; }
.plain-tabs::-webkit-scrollbar { display: none; }
.plain-tabs .pt { flex-shrink: 0; padding: .08rem .14rem; font-size: .13rem; color: #999; position: relative; white-space: nowrap; }
.plain-tabs .pt.on { color: #1a1a1a; font-weight: 700; }
.plain-tabs .pt.on::after { content: ''; position: absolute; left: .18rem; right: .18rem; bottom: .02rem; height: .025rem; background: #1a1a1a; }

/* 咨询中/全部 胶囊分段切换 */
.seg-toggle { display: flex; justify-content: center; margin: .12rem auto .02rem; }
.seg-toggle .seg { display: flex; border: 1px solid #1a1a1a; border-radius: .9rem; overflow: hidden; }
.seg-toggle .seg span { padding: .05rem .32rem; font-size: .13rem; color: #1a1a1a; }
.seg-toggle .seg span.on { background: #ffe100; color: #1a1a1a; font-weight: 700; }

/* 我的页 */
.mine-hd { padding: .14rem .14rem .1rem; display: flex; align-items: flex-start; }
.m-left { display: flex; flex-direction: column; align-items: center; }
.mine-avatar { width: .64rem; height: .64rem; border-radius: 50%; background: #ececec; display: flex; align-items: center; justify-content: center; font-size: .32rem; position: relative; }
.mine-avatar .mk { position: absolute; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.mine-avatar .mk.mk-crown { top: -.12rem; left: .02rem; font-size: .2rem; }
.mine-avatar .mk.mk-star { top: -.08rem; right: .08rem; font-size: .16rem; }
.mine-avatar .mk.mk-heart { left: -.12rem; top: .02rem; font-size: .15rem; }
.mine-avatar .mk.mk-heart2 { right: -.12rem; bottom: .1rem; font-size: .14rem; }
.mine-avatar .mk.mk-planet { bottom: -.1rem; left: -.02rem; font-size: .18rem; }
.m-id { font-size: .1rem; color: #999; margin-top: .12rem; }
.mine-info { margin-left: .14rem; flex: 1; }
.mi-name-row { display: flex; align-items: center; font-size: .17rem; font-weight: 700; }
.mi-name-row .mi-star { font-size: .13rem; margin-left: .04rem; }
.mi-level { font-size: .1rem; color: #1c8a3d; background: #d7f5e0; border: 1px solid #6fce8a; border-radius: .08rem; padding: .01rem .05rem; margin-left: .04rem; }
.mi-name-row .mi-vip { font-size: .14rem; margin-left: .05rem; }
.mg-capsule { margin-top: .1rem; border: 1px solid #1a1a1a; border-radius: .18rem; padding: .04rem .1rem; display: flex; justify-content: space-between; align-items: center; }
.mg-capsule > span { font-size: .1rem; color: #1a1a1a; }
.mg-capsule .m-rights { color: #1a1a1a; white-space: nowrap; }

.mine-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.mine-grid a { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .14rem 0; color: #333; font-size: .11rem; position: relative; }
.mine-grid a i { font-style: normal; font-size: .2rem; line-height: 1; }
.mine-grid a .mg-num { position: absolute; top: .06rem; left: 58%; background: #ff3b30; color: #fff; font-size: .09rem; min-width: .16rem; height: .16rem; line-height: .16rem; border-radius: .08rem; text-align: center; padding: 0 .03rem; }

/* 余额（白卡 + 黑描边 + 黄色充值钮） */
.bc-card { background: #fff; border: 1px solid #1a1a1a; border-radius: .14rem; margin: .1rem .12rem; padding: .16rem; }
.bc-card .bc-hd { display: flex; justify-content: space-between; align-items: center; font-size: .13rem; }
.bc-card .bc-money { font-size: .34rem; font-weight: 800; margin-top: .08rem; }
.bc-card .bc-btn { background: #ffe100; border: 1px solid #1a1a1a; font-size: .13rem; font-weight: 700; padding: .05rem .2rem; border-radius: .18rem; }

/* 商品详情 */
.gd-hero { height: 2.4rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .28rem; font-weight: 800; background: linear-gradient(135deg,#ffd7e0,#ff8fb5); overflow: hidden; }
.gd-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gd-info { background: #fff; margin: .1rem .12rem; border-radius: .12rem; padding: .14rem; }
.gd-price { color: #ff3b30; font-weight: 800; font-size: .24rem; display: flex; align-items: baseline; gap: .06rem; }
.gd-ori { color: #bbb; text-decoration: line-through; font-size: .12rem; font-weight: 400; }
.gd-title { font-size: .16rem; font-weight: 700; margin-top: .06rem; }
.gd-sub { color: #888; font-size: .12rem; margin-top: .04rem; }
.gd-tags { display: flex; gap: .05rem; margin-top: .08rem; flex-wrap: wrap; }
.gd-tags em { font-style: normal; font-size: .1rem; color: #d5482f; border: 1px solid #ff9b88; background: #fff3f0; padding: .01rem .05rem; border-radius: .03rem; }

/* 下单支付条 */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid #eee; display: flex; align-items: center; padding: .08rem .12rem; gap: .08rem; }
.buybar .bb-price { flex: 1; }
.buybar a { display: inline-block; text-align: center; padding: .08rem .2rem; border-radius: .18rem; font-size: .13rem; font-weight: 700; }
.buybar .bb-balance { background: linear-gradient(90deg,#ffe100,#ffc400); color: #333; }
.buybar .bb-wechat { background: #07c160; color: #fff; }

/* 支付弹层 */
.mask { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40; display: none; align-items: center; justify-content: center; }
.mask.show { display: flex; }
.mask .sheet { width: 3.1rem; background: #fff; border-radius: .14rem; padding: .2rem; }
.mask .sheet h3 { text-align: center; font-size: .16rem; margin-bottom: .12rem; }
.mask .sheet input { width: 100%; border: 1px solid #ddd; border-radius: .08rem; height: .44rem; padding: 0 .12rem; font-size: .15rem; text-align: center; }
.mask .sheet .sh-row { display: flex; gap: .1rem; margin-top: .16rem; }
.mask .sheet button { flex: 1; height: .42rem; border-radius: .08rem; font-size: .14rem; font-weight: 600; }
.mask .sheet .ok { background: linear-gradient(90deg,#ffe100,#ffc400); color: #333; }
.mask .sheet .no { background: #f2f2f2; color: #666; }

/* 通用按钮 */
.btn { display: block; width: 100%; text-align: center; padding: .12rem; border-radius: .08rem; font-size: .15rem; font-weight: 700; }
.btn-yellow { background: linear-gradient(90deg,#ffe100,#ffc400); color: #333; }
.btn-gray { background: #eee; color: #666; }

/* 表单 */
.form { background: #fff; margin: .1rem .12rem; border-radius: .12rem; padding: .04rem .14rem; }
.form .f-row { display: flex; align-items: center; padding: .14rem 0; border-bottom: 1px solid #f2f2f2; }
.form .f-row:last-child { border-bottom: none; }
.form label { width: .8rem; color: #333; font-size: .14rem; }
.form input, .form .f-input { flex: 1; font-size: .14rem; }

/* 空状态 */
.empty { text-align: center; color: #aaa; padding: .5rem 0; }
.empty .e-ic { font-size: .5rem; margin-bottom: .1rem; opacity: .6; }
.empty .e-t { font-size: .13rem; }

/* 会话/聊天 */
.conv-card { display: flex; align-items: center; padding: .14rem; background: #fff; margin: .08rem .12rem; border-radius: .12rem; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.conv-avatar { width: .46rem; height: .46rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .22rem; color: #fff; flex-shrink: 0; }
.conv-body { flex: 1; margin-left: .1rem; overflow: hidden; }
.conv-title { font-size: .14rem; font-weight: 600; }
.conv-sub { font-size: .11rem; color: #999; margin-top: .02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-extra { text-align: right; flex-shrink: 0; margin-left: .08rem; }
.conv-badge { background: #ff3b30; color: #fff; font-size: .1rem; min-width: .16rem; height: .16rem; line-height: .16rem; border-radius: .08rem; padding: 0 .04rem; display: inline-block; }

/* 聊天气泡 */
.chat-box { padding: .1rem .12rem .6rem; }
.msg { display: flex; margin: .12rem 0; }
.msg.mine { flex-direction: row-reverse; }
.msg .m-av { width: .36rem; height: .36rem; border-radius: 50%; font-size: .18rem; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.msg .m-bubble { max-width: 2.2rem; padding: .09rem .12rem; border-radius: .1rem; font-size: .13rem; word-break: break-all; }
.msg .m-other { margin-left: .08rem; background: #fff; border-top-left-radius: 2px; }
.msg .m-mine { margin-right: .08rem; background: #ffe100; border-top-right-radius: 2px; }
.chat-input { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid #eee; display: flex; align-items: center; padding: .08rem .1rem; gap: .08rem; }
.chat-input input { flex: 1; border: 1px solid #eee; border-radius: .18rem; height: .38rem; padding: 0 .12rem; font-size: .14rem; background: #f7f7f7; }
.chat-input button { background: linear-gradient(90deg,#ffe100,#ffc400); color: #333; border-radius: .18rem; padding: .06rem .16rem; font-size: .13rem; font-weight: 700; }

/* 转盘 */
.wheel { width: 2.8rem; height: 2.8rem; margin: .2rem auto; border-radius: 50%; position: relative; overflow: hidden; border: 6px solid #ffe100; box-shadow: 0 8px 24px rgba(0,0,0,.15); transition: transform 4s cubic-bezier(.17,.67,.12,.99); }
.wheel-seg { position: absolute; width: 50%; height: 50%; left: 50%; top: 50%; transform-origin: 0 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.6); }
.wheel-seg .seg-txt { transform: rotate(90deg) translateY(.3rem); white-space: nowrap; font-size: .1rem; color: #fff; font-weight: 700; }
.wheel-arrow { position: absolute; top: -.04rem; left: 50%; transform: translateX(-50%); font-size: .3rem; z-index: 2; }
.wheel-btn { display: block; margin: 0 auto .2rem; width: 1.6rem; height: .44rem; line-height: .44rem; text-align: center; background: linear-gradient(90deg,#ffe100,#ffc400); border-radius: .22rem; font-weight: 800; color: #333; font-size: .16rem; box-shadow: 0 6px 12px rgba(255,200,0,.4); }

.hide { display: none !important; }
.mt10 { margin-top: .1rem; }
.center { text-align: center; }
.section-title { padding: .14rem .12rem .06rem; font-size: .15rem; font-weight: 700; color: #333; }

/* ============ 2026-08-20 新增：搜索/设置/明细/地址等页面 ============ */

/* 顶部搜索条（首页入口 / 搜索页） */
.searchbar { display: flex; align-items: center; gap: .08rem; padding: .08rem .12rem; }
.searchbar .sb-box { flex: 1; display: flex; align-items: center; background: #f2f2f2; border: 1px solid #1a1a1a; border-radius: .18rem; height: .36rem; padding: 0 .12rem; }
.searchbar .sb-box input { flex: 1; border: none; background: transparent; font-size: .13rem; outline: none; }
.searchbar .sb-ic { margin-right: .05rem; font-size: .14rem; }
.searchbar .sb-cancel { font-size: .14rem; color: #333; flex-shrink: 0; }

/* 搜索历史/热门词条 */
.kw-sec { padding: .12rem .14rem 0; }
.kw-sec .kw-hd { display: flex; justify-content: space-between; align-items: center; font-size: .13rem; font-weight: 700; color: #333; }
.kw-sec .kw-hd .kw-clear { font-weight: 400; color: #999; font-size: .12rem; }
.kw-wrap { display: flex; flex-wrap: wrap; gap: .08rem; margin-top: .1rem; }
.kw-chip { font-size: .12rem; color: #333; background: #f2f2f2; border: 1px solid #ddd; border-radius: .16rem; padding: .04rem .12rem; }
.kw-chip.hot { color: #d5482f; border-color: #ff9b88; background: #fff3f0; }

/* 菜单单元格列表（设置页/我的功能菜单） */
.cell-list { background: #fff; margin: .1rem .12rem; border-radius: .12rem; overflow: hidden; }
.cell-list .cell { display: flex; align-items: center; padding: .14rem; border-bottom: 1px solid #f2f2f2; color: #333; font-size: .14rem; position: relative; }
.cell-list .cell:last-child { border-bottom: none; }
.cell-list .cell .c-ic { width: .3rem; font-size: .17rem; font-style: normal; }
.cell-list .cell .c-val { margin-left: auto; color: #999; font-size: .12rem; max-width: 1.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-list .cell .c-arrow { color: #ccc; margin-left: .06rem; font-size: .12rem; }
.cell-list .cell-danger { color: #ff3b30; }

/* 账户明细 */
.log-row { display: flex; align-items: center; background: #fff; margin: .08rem .12rem; border-radius: .12rem; padding: .13rem .14rem; }
.log-row .lg-body { flex: 1; overflow: hidden; }
.log-row .lg-t { font-size: .14rem; font-weight: 600; color: #333; }
.log-row .lg-s { font-size: .11rem; color: #999; margin-top: .03rem; }
.log-row .lg-amt { font-size: .16rem; font-weight: 800; flex-shrink: 0; }
.log-row .lg-amt.in { color: #1c8a3d; }
.log-row .lg-amt.out { color: #ff3b30; }

/* 收货地址 */
.addr-card { background: #fff; border: 1px solid #eee; border-radius: .12rem; margin: .1rem .12rem; padding: .14rem; }
.addr-card.ac-default { border-color: #1a1a1a; }
.addr-card .ac-hd { display: flex; align-items: center; gap: .06rem; }
.addr-card .ac-name { font-size: .15rem; font-weight: 700; }
.addr-card .ac-mobile { font-size: .12rem; color: #666; }
.addr-card .ac-default { font-size: .1rem; color: #333; background: #ffe100; border: 1px solid #1a1a1a; border-radius: .04rem; padding: 0 .04rem; }
.addr-card .ac-game { font-size: .11rem; color: #1e90ff; margin-top: .05rem; }
.addr-card .ac-addr { font-size: .13rem; color: #333; margin-top: .06rem; line-height: 1.5; }
.addr-card .ac-ft { display: flex; justify-content: flex-end; gap: .1rem; margin-top: .1rem; padding-top: .1rem; border-top: 1px dashed #eee; }
.addr-card .ac-btn { font-size: .12rem; padding: .04rem .14rem; border-radius: .14rem; border: 1px solid #ddd; color: #666; }
.addr-card .ac-btn.primary { border-color: #1a1a1a; background: #ffe100; color: #333; font-weight: 600; }

/* 底部固定操作钮容器 */
.fixed-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid #eee; padding: .08rem .12rem; }

/* 头像选择行 */
.avatar-choose { display: flex; align-items: center; justify-content: space-between; padding: .14rem 0; border-bottom: 1px solid #f2f2f2; }
.avatar-choose .av-preview { width: .56rem; height: .56rem; border-radius: 50%; background: #ececec; display: flex; align-items: center; justify-content: center; font-size: .3rem; }
.avatar-choose .av-pool { display: flex; gap: .08rem; flex-wrap: wrap; }
.avatar-choose .av-opt { width: .4rem; height: .4rem; border-radius: 50%; background: #f5f5f5; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; font-size: .22rem; }
.avatar-choose .av-opt.on { border-color: #ffe100; background: #fffbe6; }

/* 关于我们 */
.about-card { background: #fff; border: 1px solid #1a1a1a; border-radius: .14rem; margin: .16rem .12rem; padding: .24rem .16rem; text-align: center; }
.about-card .ab-logo { font-size: .6rem; }
.about-card .ab-name { font-size: .2rem; font-weight: 800; margin-top: .08rem; }
.about-card .ab-slogan { font-size: .12rem; color: #666; margin-top: .06rem; }
.about-card .ab-ver { font-size: .11rem; color: #999; margin-top: .14rem; }