/* ========== 云梦电竞 H5 · 白色底浅色主题 ========== */
:root {
  --bg: #ffffff;
  --card: #ffffff;
  --card2: #f3f5f9;
  --line: #e6e9f0;
  --text: #1c2434;
  --sub: #61708b;
  --dim: #9aa5b8;
  --gold: #d97706;
  --blue: #2563eb;
  --cyan: #0891b2;
  --green: #059669;
  --red: #dc2626;
  --purple: #7c3aed;
  --grad: linear-gradient(135deg, #3d7bff, #22d3ee);
  --grad-gold: linear-gradient(135deg, #f5b942, #ff8a3d);
  --radius: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: #eef1f6;
  color: var(--text);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  box-shadow: 0 0 40px rgba(30, 41, 59, .12);
}
#page { padding-bottom: 84px; min-height: calc(100vh - 64px); }

input, textarea, select, button { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
input, textarea, select {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
  color: var(--text);
}
input:focus, textarea:focus { border-color: var(--blue); }
::placeholder { color: var(--dim); }

/* ---------- 通用 ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700;
  padding: 18px 16px 10px;
}
.section-title .bar { width: 4px; height: 16px; border-radius: 2px; background: var(--grad); }
.section-title .more { margin-left: auto; font-size: 12px; color: var(--sub); font-weight: 400; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 10px; padding: 10px 18px;
  font-weight: 600; font-size: 14px;
  transition: opacity .15s, transform .1s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; }
.btn-primary { background: var(--grad); color: #fff; }
.btn-gold { background: var(--grad-gold); color: #231a05; }
.btn-line { border: 1px solid var(--line); color: var(--text); background: var(--card2); }
.btn-danger { background: rgba(248, 113, 113, .12); color: var(--red); border: 1px solid rgba(248, 113, 113, .35); }
.btn-green { background: rgba(52, 211, 153, .12); color: var(--green); border: 1px solid rgba(52, 211, 153, .4); }
.btn-block { width: 100%; padding: 13px; border-radius: 12px; font-size: 15px; }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }

.tag {
  display: inline-flex; align-items: center;
  font-size: 11px; padding: 2px 8px; border-radius: 6px;
  background: rgba(37, 99, 235, .1); color: #2563eb;
}
.tag.gold { background: rgba(245, 185, 66, .14); color: var(--gold); }
.tag.green { background: rgba(52, 211, 153, .14); color: var(--green); }
.tag.red { background: rgba(248, 113, 113, .14); color: var(--red); }
.tag.purple { background: rgba(167, 139, 250, .16); color: var(--purple); }
.tag.gray { background: rgba(139, 150, 179, .14); color: var(--sub); }

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: 700; flex: none;
}

.empty { text-align: center; color: var(--dim); padding: 48px 0; font-size: 13px; }
.empty .big { font-size: 34px; margin-bottom: 8px; opacity: .6; }

/* ---------- 底部导航 ---------- */
#tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  display: flex; align-items: flex-end; justify-content: space-around;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
  z-index: 50;
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--dim); font-size: 11px; position: relative; padding: 4px 0;
  cursor: pointer;
}
.tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab.active { color: var(--cyan); }
.tab .badge {
  position: absolute; top: 0; right: 50%; margin-right: -20px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--red); color: #fff; border-radius: 8px;
  font-size: 10px; font-style: normal; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tab.pub { margin-top: -22px; }
.pub-btn {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--grad-gold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(245, 185, 66, .35);
  margin-bottom: 2px;
}
.pub-btn svg { width: 24px; height: 24px; stroke: #231a05; stroke-width: 2.6; }
.tab.pub span { color: var(--gold); }
.tab.pub.active span { color: var(--gold); }

/* ---------- 页面头 ---------- */
.page-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 10px;
}
.page-head .logo { font-size: 19px; font-weight: 800; letter-spacing: .5px; }
.page-head .logo b { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.page-head .sub { font-size: 12px; color: var(--sub); }
.page-head .right { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ---------- 首页 ---------- */
.banner { position: relative; margin: 4px 16px 0; border-radius: var(--radius); overflow: hidden; height: 150px; }
.banner-track { display: flex; height: 100%; transition: transform .5s ease; }
.banner-item {
  flex: none; width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 20px 22px; position: relative; overflow: hidden;
}
.banner-item::after {
  content: ""; position: absolute; right: -30px; top: -30px;
  width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.banner-item::before {
  content: ""; position: absolute; right: 30px; bottom: -46px;
  width: 110px; height: 110px; border-radius: 50%;
  background: rgba(255, 255, 255, .06);
}
.banner-item h2 { font-size: 19px; font-weight: 800; margin-bottom: 6px; position: relative; z-index: 1; }
.banner-item p { font-size: 12px; color: rgba(255, 255, 255, .82); position: relative; z-index: 1; }
.banner-dots {
  position: absolute; bottom: 10px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px; z-index: 2;
}
.banner-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .35); transition: all .3s; }
.banner-dots i.on { width: 16px; background: #fff; }

.notice-bar {
  margin: 12px 16px 0; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; overflow: hidden; font-size: 12px; color: var(--sub);
}
.notice-bar .horn { color: var(--gold); font-weight: 700; flex: none; }
.notice-bar .viewport { overflow: hidden; flex: 1; white-space: nowrap; }
.notice-bar .roll { display: inline-block; white-space: nowrap; animation: roll 18s linear infinite; }
@keyframes roll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

.game-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 4px 16px; }
.game-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 6px; text-align: center; cursor: pointer; transition: border-color .2s;
}
.game-item:hover { border-color: var(--blue); }
.game-item.disabled { opacity: .5; cursor: default; }
.game-icon {
  width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.game-icon.nzw { background: linear-gradient(135deg, #12245e, #2f6bff); }
.game-icon.nzw svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 1.8; }
.game-icon.ph { background: var(--card2); color: var(--dim); font-size: 20px; }
.game-item .name { font-size: 12px; font-weight: 600; }
.game-item .hot-tag { font-size: 10px; color: var(--gold); margin-top: 2px; }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); margin: 4px 16px; gap: 8px; }
.stat-item { background: var(--card); border: 1px solid var(--line); border-radius: 12px; text-align: center; padding: 12px 4px; }
.stat-item .num { font-size: 17px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-item .lab { font-size: 10px; color: var(--sub); margin-top: 2px; }

.hot-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 4px 16px 8px; scrollbar-width: none; }
.hot-scroll::-webkit-scrollbar { display: none; }
.hot-card {
  flex: none; width: 210px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; cursor: pointer;
}
.hot-card .t { font-size: 13px; font-weight: 700; height: 38px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hot-card .meta { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--sub); }
.hot-card .price-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; }
.price { color: var(--gold); font-weight: 800; }
.price i { font-style: normal; font-size: 12px; }
.price b { font-size: 18px; }

.dynamic-list { margin: 0 16px; overflow: hidden; }
.dynamic-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; font-size: 12px; color: var(--sub);
  border-top: 1px solid rgba(0, 0, 0, .06);
}
.dynamic-item:first-child { border-top: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-top: 5px; flex: none; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); } 50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); } }
.dynamic-item .time { margin-left: auto; flex: none; color: var(--dim); font-size: 11px; }

/* ---------- 接单大厅 ---------- */
.filter-bar { display: flex; gap: 8px; padding: 4px 16px; overflow-x: auto; scrollbar-width: none; }
.filter-bar::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 7px 14px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 12px; color: var(--sub); cursor: pointer;
}
.chip.on { background: rgba(61, 123, 255, .16); border-color: var(--blue); color: #7ea6ff; font-weight: 600; }
.sort-row { display: flex; gap: 14px; padding: 10px 16px 4px; font-size: 12px; color: var(--dim); }
.sort-row span { cursor: pointer; display: flex; align-items: center; gap: 2px; }
.sort-row span.on { color: var(--cyan); font-weight: 600; }

.order-list { padding: 8px 16px; display: flex; flex-direction: column; gap: 10px; }
.order-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; cursor: pointer; transition: border-color .2s; }
.order-card:active { border-color: var(--blue); }
.order-card .head { display: flex; align-items: center; gap: 8px; }
.order-card .title { font-size: 14px; font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-card .desc { font-size: 12px; color: var(--sub); margin-top: 6px; height: 18px; overflow: hidden; }
.order-card .foot { display: flex; align-items: center; margin-top: 10px; gap: 8px; }
.order-card .user { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--sub); }
.order-card .escrow-tag { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--green); }
.order-card .btn { margin-left: auto; }

/* ---------- 发布订单向导 ---------- */
.wizard { padding: 0 16px; }
.steps { display: flex; align-items: center; gap: 4px; padding: 6px 16px 14px; }
.steps .st { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--dim); }
.steps .st i {
  width: 18px; height: 18px; border-radius: 50%; font-style: normal;
  background: var(--card2); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px;
}
.steps .st.on { color: var(--cyan); }
.steps .st.on i { background: var(--grad); border: none; color: #fff; font-weight: 700; }
.steps .ln { flex: 1; height: 1px; background: var(--line); }
.wz-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.pick-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.pick-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; cursor: pointer; transition: border-color .15s;
}
.pick-item.on { border-color: var(--gold); background: rgba(245, 185, 66, .06); }
.pick-item .ic {
  width: 42px; height: 42px; border-radius: 10px; flex: none;
  background: var(--card2); display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.pick-item .nm { font-weight: 700; font-size: 14px; }
.pick-item .ds { font-size: 12px; color: var(--sub); margin-top: 2px; }
.pick-item .pr { margin-left: auto; color: var(--gold); font-weight: 700; font-size: 13px; flex: none; }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 13px; color: var(--sub); margin-bottom: 6px; }
.stepper { display: flex; align-items: center; gap: 0; width: 150px; }
.stepper button {
  width: 40px; height: 40px; background: var(--card2); border: 1px solid var(--line);
  color: var(--text); font-size: 18px; border-radius: 10px;
}
.stepper input { width: 70px; text-align: center; border-radius: 0; border-left: none; border-right: none; height: 40px; padding: 0; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px; }
.check-row .chip.on { background: rgba(245, 185, 66, .14); border-color: var(--gold); color: var(--gold); }
.summary { padding: 4px 0; }
.summary .row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed rgba(0, 0, 0, .1); font-size: 13px; }
.summary .row b { font-weight: 600; }
.summary .row .k { color: var(--sub); }
.wz-foot { display: flex; gap: 10px; padding: 16px 0 8px; }

/* ---------- 消息 ---------- */
.seg-tabs { display: flex; background: var(--card); border-radius: 12px; margin: 4px 16px 10px; padding: 4px; border: 1px solid var(--line); }
.seg-tabs .seg {
  flex: 1; text-align: center; padding: 8px 0; border-radius: 9px;
  font-size: 13px; color: var(--sub); cursor: pointer; position: relative;
}
.seg-tabs .seg.on { background: var(--grad); color: #fff; font-weight: 700; }
.seg-tabs .seg .dot { position: absolute; top: 6px; right: 24%; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.msg-list { padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.msg-item { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; cursor: pointer; }
.msg-item .mi-icon {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.msg-item .mi-icon.sys { background: rgba(61, 123, 255, .15); }
.msg-item .mi-icon.ord { background: rgba(245, 185, 66, .15); }
.msg-item .t { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.msg-item .unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }
.msg-item .c { font-size: 12px; color: var(--sub); margin-top: 3px; height: 18px; overflow: hidden; }
.msg-item .time { margin-left: auto; font-size: 11px; color: var(--dim); flex: none; }

/* 聊天 */
.chat-wrap {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg);
  max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column;
}
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .95); }
.chat-head .back { font-size: 20px; color: var(--sub); padding: 2px 8px; cursor: pointer; }
.chat-head .nm { font-weight: 700; }
.chat-head .order-ref { margin-left: auto; font-size: 11px; color: var(--sub); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.chat-msg { display: flex; gap: 8px; max-width: 86%; }
.chat-msg.mine { margin-left: auto; flex-direction: row-reverse; }
.chat-msg .bubble {
  background: var(--card2); border: 1px solid var(--line);
  padding: 9px 12px; border-radius: 12px; font-size: 13px; word-break: break-all;
}
.chat-msg.mine .bubble { background: rgba(61, 123, 255, .2); border-color: rgba(61, 123, 255, .4); }
.chat-input { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255, 255, 255, .95); }
.chat-input input { flex: 1; }
.chat-input .btn { flex: none; }

/* ---------- 我的 ---------- */
.mine-head {
  margin: 8px 16px 0; padding: 20px 16px;
  background: linear-gradient(135deg, #eef4ff, #f8fafc);
  border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; gap: 14px; align-items: center;
}
.mine-head .info .nm { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.mine-head .info .meta { font-size: 11px; color: var(--sub); margin-top: 4px; display: flex; gap: 10px; }
.mine-head .edit { margin-left: auto; color: var(--sub); font-size: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; cursor: pointer; }

.wallet-card { margin: 12px 16px 0; padding: 16px; display: flex; align-items: center; }
.wallet-card .bal .lab { font-size: 11px; color: var(--sub); }
.wallet-card .bal .num { font-size: 26px; font-weight: 800; color: var(--gold); }
.wallet-card .ops { margin-left: auto; display: flex; gap: 8px; }
.mini-stats { display: flex; margin: 0 16px; margin-top: 12px; }
.mini-stats .ms { flex: 1; text-align: center; background: var(--card); border: 1px solid var(--line); padding: 12px 4px; }
.mini-stats .ms:first-child { border-radius: 12px 0 0 12px; }
.mini-stats .ms:last-child { border-radius: 0 12px 12px 0; }
.mini-stats .ms + .ms { border-left: none; }
.mini-stats .v { font-size: 18px; font-weight: 800; }
.mini-stats .k { font-size: 11px; color: var(--sub); margin-top: 2px; }

.cell-group { margin: 12px 16px 0; overflow: hidden; }
.cell {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; cursor: pointer; background: var(--card);
  border-bottom: 1px solid rgba(0, 0, 0, .06); font-size: 14px;
}
.cell:last-child { border-bottom: none; }
.cell .ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.cell .arrow { margin-left: auto; color: var(--dim); }
.cell .val { margin-left: auto; font-size: 12px; color: var(--sub); }
.cell .arrow + .val, .cell .val + .arrow { margin-left: 8px; }

.my-order-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; }
.my-order-card .head { display: flex; align-items: center; gap: 8px; }
.my-order-card .title { flex: 1; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-order-card .info { font-size: 12px; color: var(--sub); margin-top: 8px; }
.my-order-card .ops { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
  z-index: 100; display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn .18s ease;
}
.modal-mask.center { align-items: center; padding: 20px; }
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  width: 100%; max-width: 480px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  max-height: 88vh; overflow-y: auto;
  animation: slideUp .22s ease;
}
.modal-mask.center .modal { border-radius: 16px; max-width: 400px; }
@keyframes slideUp { from { transform: translateY(40px); opacity: .4; } }
.modal-head { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid rgba(0, 0, 0, .06); position: sticky; top: 0; background: var(--card); z-index: 2; }
.modal-head .t { font-size: 15px; font-weight: 800; }
.modal-head .close { margin-left: auto; color: var(--sub); font-size: 20px; padding: 0 4px; cursor: pointer; }
.modal-body { padding: 16px; }

/* 订单详情 */
.od-status { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.od-price { font-size: 24px; font-weight: 800; color: var(--gold); }
.od-kv { display: flex; flex-direction: column; gap: 8px; font-size: 13px; margin: 12px 0; }
.od-kv .r { display: flex; gap: 10px; }
.od-kv .k { color: var(--dim); flex: none; width: 74px; }
.od-kv .v { color: var(--text); word-break: break-all; }

.escrow-steps { margin: 14px 0 6px; background: var(--card2); border-radius: 12px; padding: 14px 12px; }
.escrow-steps .t { font-size: 12px; font-weight: 700; color: var(--green); display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.es-row { display: flex; }
.es-item { flex: 1; text-align: center; position: relative; font-size: 10px; color: var(--dim); }
.es-item i {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 5px; font-style: normal; font-size: 11px; color: var(--dim); position: relative; z-index: 1;
}
.es-item.done i { background: var(--grad); border: none; color: #fff; }
.es-item.done { color: var(--sub); }
.es-item:not(:last-child)::after {
  content: ""; position: absolute; top: 11px; left: calc(50% + 12px); width: calc(100% - 24px); height: 1px; background: var(--line);
}
.es-item.done:not(:last-child)::after { background: var(--blue); }

/* 支付弹窗 */
.pay-panel { text-align: center; padding: 8px 0; }
.pay-panel .amt { font-size: 32px; font-weight: 800; margin: 8px 0 2px; }
.pay-panel .amt i { font-style: normal; font-size: 16px; }
.pay-channel {
  display: flex; align-items: center; gap: 10px;
  background: var(--card2); border: 1px solid var(--green);
  border-radius: 12px; padding: 13px; margin: 16px 0;
}
.pay-channel .wx-ic { width: 30px; height: 30px; border-radius: 8px; background: #2bae46; display: flex; align-items: center; justify-content: center; }
.pay-channel .wx-ic svg { width: 20px; height: 20px; fill: #fff; }
.pay-channel .nm { font-weight: 700; font-size: 14px; }
.pay-channel .sub { font-size: 11px; color: var(--sub); }
.pay-channel .ck { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #04120b; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.mock-qr {
  width: 150px; height: 150px; margin: 14px auto;
  border-radius: 12px; padding: 10px; background: #fff;
  border: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px;
}
.mock-qr i { background: #111; border-radius: 1px; }
.mock-qr i.o { background: #fff; }
.pay-tip { font-size: 11px; color: var(--dim); margin: 10px 0 14px; line-height: 1.7; }
.pay-success-ic { width: 64px; height: 64px; border-radius: 50%; background: rgba(52, 211, 153, .15); color: var(--green); font-size: 30px; display: flex; align-items: center; justify-content: center; margin: 10px auto; }

/* ---------- 登录页（全屏跳转） ---------- */
.login-wrap {
  position: fixed; inset: 0; z-index: 95;
  background: var(--bg);
  max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column;
}
.login-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.login-head .back { font-size: 22px; color: var(--sub); cursor: pointer; padding: 0 6px; }
.login-head .t { font-weight: 700; }
.login-body { padding: 30px 26px; }
.login-logo { font-size: 24px; font-weight: 800; text-align: center; }
.login-logo b { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.login-sub { text-align: center; color: var(--sub); font-size: 12px; margin: 6px 0 26px; }

/* ---------- 登录 ---------- */
.auth-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.auth-tabs .at { flex: 1; text-align: center; padding: 10px; color: var(--sub); cursor: pointer; font-weight: 600; border-bottom: 2px solid transparent; }
.auth-tabs .at.on { color: var(--text); border-color: var(--gold); }
.role-pick { display: flex; gap: 10px; }
.role-pick .rp {
  flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: center; cursor: pointer;
  background: var(--card2);
}
.role-pick .rp.on { border-color: var(--gold); background: rgba(245, 185, 66, .08); }
.role-pick .rp .t { font-weight: 700; font-size: 13px; }
.role-pick .rp .d { font-size: 11px; color: var(--sub); margin-top: 3px; }
.auth-demo { font-size: 11px; color: var(--dim); text-align: center; margin-top: 12px; line-height: 1.8; }

/* ---------- Toast ---------- */
#toast-root { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 60px; pointer-events: none; }
.toast {
  background: rgba(19, 26, 43, .96); border: 1px solid var(--line);
  color: var(--text); padding: 10px 18px; border-radius: 12px;
  font-size: 13px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
  animation: toastIn .22s ease; max-width: 80vw; text-align: center;
}
.toast.err { border-color: rgba(248, 113, 113, .5); color: #ffb4b4; }
.toast.ok { border-color: rgba(52, 211, 153, .5); color: #a7f3d0; }
@keyframes toastIn { from { transform: translateY(-12px); opacity: 0; } }

.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(0, 0, 0, .12); border-top-color: var(--cyan); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.link { color: var(--cyan); cursor: pointer; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }

/* ---------- 微信内打开引导 ---------- */
.wx-banner {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; font-size: 12px;
  background: linear-gradient(90deg, #fff7e0, #ffeccc);
  color: #8a5a00; border-bottom: 1px solid rgba(240, 180, 41, .45);
}
.wx-banner .wx-bt { flex: 1; cursor: pointer; text-decoration: underline dotted; }
.wx-banner .wx-close { flex: none; width: 24px; height: 24px; line-height: 24px; text-align: center; color: #a97a1d; font-size: 13px; cursor: pointer; }
body.wx-on #page { padding-top: 46px; }
.wx-guide-tip { font-size: 13px; color: var(--sub); margin: 2px 0 10px; text-align: center; }
.wx-guide-steps { display: flex; flex-direction: column; gap: 10px; background: var(--card2); border-radius: 12px; padding: 12px; margin-bottom: 14px; font-size: 13px; }
.wx-guide-steps .ws { display: flex; align-items: center; gap: 10px; }
.wx-guide-steps .ws i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--grad-gold); color: #fff; font-style: normal; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.wx-guide-steps .ws b { color: var(--gold); }

/* ---------- 打手推荐 / 打手排行 ---------- */
.booster-list { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.booster-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
}
.booster-card .medal {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-style: normal;
  background: var(--card2); color: var(--dim);
}
.booster-card .medal.top0 { background: linear-gradient(135deg, #ffd76a, #f5a623); color: #fff; }
.booster-card .medal.top1 { background: linear-gradient(135deg, #e6ebf3, #a8b3c6); color: #fff; }
.booster-card .medal.top2 { background: linear-gradient(135deg, #e8a06b, #c67b3f); color: #fff; }
.booster-card .b-info { flex: 1; min-width: 0; }
.booster-card .nm { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booster-card .ds { font-size: 11px; color: var(--sub); margin-top: 2px; }
.booster-card .b-amt { flex: none; text-align: right; line-height: 1.3; }
.booster-card .b-amt i { font-style: normal; font-size: 11px; color: var(--gold); }
.booster-card .b-amt b { font-size: 16px; color: var(--gold); }
.booster-card .b-amt span { display: block; font-size: 10px; color: var(--dim); }