/* ================= 三角洲接单平台 紫色主题 ================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary: #7c3aed;
  --primary-dark: #6d28d9;
  --primary-light: #ede9fe;
  --bg: #f4f3fa;
  --sidebar-bg: #1e1b2e;
  --sidebar-active: #7c3aed;
  --text: #2d2a3a;
  --text-light: #8b88a0;
  --border: #e8e6f2;
  --green: #10b981;
  --red: #ef4444;
  --orange: #f59e0b;
  --blue: #3b82f6;
  --radius: 12px;
  --shadow: 0 4px 20px rgba(124, 58, 237, .08);
}
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
button { cursor: pointer; font-family: inherit; border: none; outline: none; }
input, select, textarea {
  font-family: inherit; font-size: 14px; outline: none;
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 10px 12px; width: 100%; background: #fff; color: var(--text);
  transition: border-color .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); }
textarea { resize: vertical; min-height: 72px; }

/* ---------------- 按钮 ---------------- */
.btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; border-radius: 10px; font-size: 13px; transition: all .2s; background: #f0eefb; color: var(--primary-dark); }
.btn:hover { background: var(--primary-light); }
.btn-primary { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; box-shadow: 0 4px 12px rgba(124,58,237,.3); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-danger { background: #fef2f2; color: var(--red); }
.btn-danger:hover { background: #fee2e2; }
.btn-success { background: #ecfdf5; color: var(--green); }
.btn-success:hover { background: #d1fae5; }
.btn-warn { background: #fffbeb; color: var(--orange); }
.btn-warn:hover { background: #fef3c7; }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn-block { width: 100%; padding: 12px; font-size: 15px; justify-content: center; }
.btn-ghost { background: transparent; color: var(--text-light); padding: 6px 12px; border-radius: 8px; }
.btn-ghost:hover { background: rgba(124,58,237,.08); color: var(--primary); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------- 登录页 ---------------- */
.login-page {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 45%, #a855f7 100%);
  overflow: hidden;
}
.login-bg .bubble { position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
.bubble.b1 { width: 340px; height: 340px; top: -120px; left: -100px; }
.bubble.b2 { width: 220px; height: 220px; bottom: -60px; right: -40px; }
.bubble.b3 { width: 140px; height: 140px; top: 20%; right: 12%; background: rgba(255,255,255,.06); }
.bubble.b4 { width: 80px; height: 80px; bottom: 22%; left: 14%; background: rgba(255,255,255,.1); }
.login-box {
  position: relative; z-index: 2; width: 380px; max-width: calc(100vw - 40px);
  background: rgba(255,255,255,.97); border-radius: 22px; padding: 36px 34px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25); text-align: center;
}
.login-logo { font-size: 46px; line-height: 1; }
.login-box h1 { font-size: 23px; margin-top: 10px; background: linear-gradient(135deg,#7c3aed,#a855f7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.login-sub { color: var(--text-light); font-size: 13px; margin: 8px 0 24px; }
.login-form { text-align: left; }
.login-form label { display: block; font-size: 13px; color: var(--text-light); margin: 12px 0 6px; }
.login-form input { padding: 12px 14px; font-size: 15px; }
.login-form .btn { margin-top: 22px; }
.form-switch { text-align: center; font-size: 13px; color: var(--text-light); margin-top: 14px; }
.form-switch a { color: var(--primary); font-weight: 600; text-decoration: none; }
.form-switch a:hover { text-decoration: underline; }
.role-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.role-opt {
  text-align: center; padding: 10px 6px; border: 2px solid var(--border); border-radius: 10px;
  font-size: 13px; cursor: pointer; transition: all .15s; background: #fff; color: var(--text);
}
.role-opt:hover { border-color: var(--primary); }
.role-opt.sel { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); font-weight: 700; }

/* 大厅订单被抢走时的淡出动画（SSE 实时移除） */
.order-card { transition: opacity .3s ease, transform .3s ease; }
.order-card.removing { opacity: 0; transform: translateX(40px); pointer-events: none; }
.login-tips { margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--border); }
.login-tips p { font-size: 12px; color: var(--text-light); margin-bottom: 8px; }
.tip-accounts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tip-accounts span {
  font-size: 12px; padding: 5px 12px; border-radius: 20px; background: var(--primary-light);
  color: var(--primary-dark); cursor: pointer; transition: all .2s;
}
.tip-accounts span:hover { background: var(--primary); color: #fff; }

/* ---------------- 主框架 ---------------- */
.app-page { display: flex; min-height: 100vh; }
.sidebar {
  width: 220px; background: var(--sidebar-bg); color: #cfcbe4;
  display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 100;
}
.logo { padding: 20px 18px; font-size: 17px; font-weight: 700; color: #fff; white-space: nowrap; }
.logo-icon { margin-right: 4px; }
.menu { flex: 1; overflow-y: auto; padding: 6px 10px; }
.menu-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px;
  cursor: pointer; margin-bottom: 4px; font-size: 14px; transition: all .18s; white-space: nowrap;
}
.menu-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.menu-item.active { background: linear-gradient(135deg,#8b5cf6,#7c3aed); color: #fff; box-shadow: 0 4px 12px rgba(124,58,237,.4); }
.menu-item .icon { font-size: 16px; width: 20px; text-align: center; }
.sidebar-footer { padding: 14px; font-size: 11px; color: #5b5778; text-align: center; }

.main { flex: 1; margin-left: 220px; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 60px; background: #fff; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 22px; gap: 14px;
  position: sticky; top: 0; z-index: 50;
}
.page-title { font-size: 17px; font-weight: 700; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.balance-pill { background: linear-gradient(135deg,#fef3c7,#fde68a); color: #92400e; padding: 6px 14px; border-radius: 20px; font-size: 13px; }
.user-info { display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#8b5cf6,#7c3aed); color: #fff; font-weight: 700; font-size: 15px;
}
.user-meta { display: flex; flex-direction: column; line-height: 1.3; }
.user-meta #userNickname { font-size: 13px; font-weight: 600; }
.role-tag { font-size: 11px; color: var(--primary); background: var(--primary-light); padding: 1px 8px; border-radius: 10px; align-self: flex-start; }
.menu-toggle { display: none; background: none; font-size: 22px; color: var(--text); }
.sidebar-mask { display: none; }

.content { padding: 22px; flex: 1; }

/* ---------------- 卡片/统计 ---------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat-card {
  background: #fff; border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 14px; border: 1px solid rgba(124,58,237,.05);
}
.stat-card .stat-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--primary-light); }
.stat-card .stat-val { font-size: 22px; font-weight: 800; color: var(--primary-dark); }
.stat-card .stat-label { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.stat-card .stat-label .adjust-hint { font-size: 11px; margin-left: 2px; opacity: .7; }
/* 可点击的数据概览卡片 */
.stat-card.clickable { cursor: pointer; transition: transform .15s, box-shadow .2s, border-color .2s; }
.stat-card.clickable:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(124,58,237,.15); border-color: var(--primary); }
.stat-card.clickable .stat-arrow { margin-left: auto; font-size: 24px; color: var(--primary); opacity: .6; transition: transform .2s, opacity .2s; }
.stat-card.clickable:hover .stat-arrow { opacity: 1; transform: translateX(3px); }

/* 数据概览页版本条（点击复制版本号） */
.version-bar { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, #f5f0ff, #fdfbff); border: 1px dashed var(--primary); border-radius: 10px; padding: 10px 16px; margin-bottom: 16px; cursor: pointer; user-select: none; transition: background .2s, box-shadow .2s; }
.version-bar:hover { background: linear-gradient(90deg, #ede4ff, #f8f4ff); box-shadow: 0 4px 14px rgba(124,58,237,.12); }
.version-bar .vb-label { font-size: 13px; color: var(--text-light); }
.version-bar .vb-num { font-size: 15px; font-weight: 800; color: var(--primary-dark); letter-spacing: .5px; }
.version-bar .vb-copy { margin-left: auto; font-size: 12px; color: var(--primary); opacity: .75; }
.version-bar:hover .vb-copy { opacity: 1; }

.panel { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 20px; }
.panel-title { font-size: 15px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.panel-title .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------------- 表格 ---------------- */
.table-wrap { overflow-x: auto; border-radius: 10px; }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; white-space: nowrap; }
th { background: #faf9ff; color: var(--text-light); font-weight: 600; font-size: 12px; }
tr:hover td { background: #fcfbff; }
td .btn { margin-right: 6px; }
.cell-main { font-weight: 600; }
.cell-sub { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.empty { text-align: center; padding: 46px 0; color: var(--text-light); }
.empty .icon { font-size: 40px; display: block; margin-bottom: 10px; }

/* ---------------- 状态标签 ---------------- */
.tag { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.tag-gray { background: #f1f0f6; color: #8b88a0; }
.tag-blue { background: #dbeafe; color: #2563eb; }
.tag-orange { background: #fef3c7; color: #d97706; }
.tag-green { background: #d1fae5; color: #059669; }
.tag-red { background: #fee2e2; color: #dc2626; }
.tag-purple { background: var(--primary-light); color: var(--primary-dark); }

/* ---------------- 筛选栏/分页 ---------------- */
.filter-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filter-bar input, .filter-bar select { width: auto; padding: 8px 12px; }
.filter-bar .grow { flex: 1; min-width: 140px; }
.pagination { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--text-light); }
.pagination button { padding: 6px 12px; border-radius: 8px; background: #f0eefb; color: var(--primary-dark); }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }

/* ---------------- 游戏卡片/服务 ---------------- */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.game-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.game-card-head {
  padding: 16px 18px; color: #fff; display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg,#7c3aed,#9333ea); font-size: 16px; font-weight: 700;
}
/* 游戏封面顶图（有 cover 时替换 game-card-head） */
.game-card-cover {
  position: relative; height: 120px; background-size: cover; background-position: center;
}
.game-card-cover-mask {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.65) 100%);
}
.game-card-head-inner {
  position: absolute; left: 16px; right: 16px; bottom: 12px;
  display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 16px;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.game-card-icon { font-size: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.game-card-head .off-badge { margin-left: auto; font-size: 11px; background: rgba(0,0,0,.25); padding: 2px 10px; border-radius: 20px; }
.svc-list { padding: 8px 0; }
.svc-item { padding: 12px 14px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #f6f5fb; transition: background .15s; }
.svc-item:hover { background: #faf8ff; }
.svc-item:last-child { border-bottom: none; }
/* 服务项目封面图 */
.svc-cover-wrap {
  flex-shrink: 0; width: 72px; height: 72px; border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(124,58,237,.15); background: #f3f4f6;
}
.svc-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-cover-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.svc-info { flex: 1; min-width: 0; }
.svc-name { font-weight: 600; font-size: 14px; color: #1f2937; }
.svc-desc { font-size: 12px; color: var(--text-light); margin-top: 4px; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svc-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.svc-price { color: var(--red); font-weight: 800; font-size: 18px; line-height: 1; }
.svc-price small { font-size: 11px; color: var(--text-light); font-weight: 400; }

/* ---------------- 老板商城（游戏下单页 · 竞品风大封面） ---------------- */
.boss-shop { display: flex; flex-direction: column; gap: 16px; }
/* 四宫格快捷入口 */
.shop-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sq-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 12px 4px 10px; border-radius: 14px; color: #fff; text-align: center;
  font-size: 13px; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.10);
  cursor: pointer; user-select: none; transition: transform .12s ease;
}
.sq-item:active { transform: scale(.94); }
.sq-item .sq-ico { font-size: 24px; line-height: 1.1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.sq-item small { font-size: 10px; font-weight: 400; opacity: .92; }
/* 游戏分类吸顶导航 */
.game-tabs {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px;
  position: sticky; top: 60px; z-index: 40; background: var(--bg);
  scrollbar-width: none;
}
.game-tabs::-webkit-scrollbar { display: none; }
.gt-item {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 10px 7px; min-width: 66px; border: none; background: #fff; border-radius: 14px;
  font-size: 12px; font-weight: 600; color: #4b5563; box-shadow: var(--shadow); cursor: pointer;
  transition: transform .12s ease;
}
.gt-item:active { transform: scale(.94); }
.gt-item .gt-ico {
  width: 42px; height: 42px; border-radius: 12px; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#ede9fe,#fce7f3);
}
.gt-item.active {
  color: #fff; background: linear-gradient(135deg,var(--primary),#a855f7);
  box-shadow: 0 6px 14px rgba(124,58,237,.35);
}
.gt-item.active .gt-ico { background: rgba(255,255,255,.22); }
/* 分区标题与锚点间距（防止滚动定位被吸顶栏遮挡） */
.shop-sec { scroll-margin-top: 128px; }
.shop-sec-head { display: flex; align-items: baseline; gap: 10px; margin: 2px 2px 10px; flex-wrap: wrap; }
.shop-sec-head h3 { font-size: 17px; font-weight: 800; color: #1f2937; }
.shop-sec-head span { font-size: 12px; color: var(--text-light); }
/* 游戏分区大封面头 */
.shop-game-cover {
  position: relative; height: 96px; border-radius: 16px; overflow: hidden;
  background-size: cover; background-position: center; margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.sgc-mask { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 70%,rgba(0,0,0,.05)); }
.sgc-inner {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 16px;
  color: #fff; font-size: 18px; font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.sgc-icon { font-size: 26px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.sgc-count {
  margin-left: auto; font-size: 11px; font-weight: 500; padding: 4px 10px;
  background: rgba(255,255,255,.22); border-radius: 20px; backdrop-filter: blur(4px); text-shadow: none;
}
/* 双列大封面服务卡片 */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.svc-card {
  background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease;
}
.svc-card:active { transform: scale(.98); }
.sc-cover { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.sc-cover img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-fb-emoji {
  position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center;
  font-size: 52px;
}
.sc-mask { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.8) 100%); }
.sc-badge {
  position: absolute; top: 8px; left: 8px; z-index: 3; font-size: 10px; font-weight: 600;
  color: #fff; background: rgba(0,0,0,.38); padding: 3px 8px; border-radius: 20px; backdrop-filter: blur(4px);
}
.sc-badge.hot { background: linear-gradient(135deg,#f59e0b,#ef4444); backdrop-filter: none; }
.sc-name {
  position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 3; color: #fff;
  font-size: 14px; font-weight: 700; line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,.55);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sc-desc {
  font-size: 11px; color: var(--text-light); line-height: 1.45; min-height: 32px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-hot { font-size: 11px; font-weight: 600; color: #f97316; white-space: nowrap; }
.sc-price { color: var(--red); font-weight: 800; font-size: 17px; line-height: 1; white-space: nowrap; }
.sc-price small { font-size: 10px; color: var(--text-light); font-weight: 400; }
.sc-buy { width: 100%; border-radius: 10px; padding: 9px 0; font-size: 13px; font-weight: 700; margin-top: auto; }
.svc-grid-empty { grid-column: 1 / -1; color: var(--text-light); font-size: 13px; padding: 18px 0; text-align: center; }
/* 转盘入口横滑条 */
.wheel-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.wheel-strip::-webkit-scrollbar { display: none; }
.ws-card {
  flex: 0 0 172px; background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow); cursor: pointer; transition: transform .12s ease;
}
.ws-card:active { transform: scale(.96); }
.ws-cover { position: relative; height: 118px; overflow: hidden; background: linear-gradient(135deg,#ef4444,#f59e0b); }
.ws-cover img { width: 100%; height: 100%; object-fit: cover; }
.ws-cover-mask { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.5)); }
.ws-cover-txt {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; color: #fff; text-align: center; padding: 8px;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.ws-ico { font-size: 38px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.ws-cover-txt b { font-size: 15px; font-weight: 800; }
.ws-body { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ws-price { color: var(--red); font-size: 16px; font-weight: 800; }
.ws-price small { font-size: 11px; color: var(--text-light); font-weight: 400; }
.ws-go { font-size: 12px; font-weight: 600; color: var(--primary); white-space: nowrap; }

/* 管理员配色选择器（游戏/服务编辑弹窗） */
.theme-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tp-swatch {
  width: 54px; height: 34px; border-radius: 8px; border: 2px solid transparent; cursor: pointer;
  padding: 0; transition: transform .1s ease, border-color .1s ease;
}
.tp-swatch:active { transform: scale(.92); }
.tp-swatch.active { border-color: #111827; box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px rgba(124,58,237,.5); }
.tp-swatch.tp-auto { background: #e5e7eb !important; color: #6b7280; font-size: 11px; font-weight: 700; }
.theme-custom { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: #6b7280; flex-wrap: wrap; }
.theme-custom input[type="color"] {
  width: 40px; height: 30px; padding: 0; border: 1px solid #d1d5db; border-radius: 6px;
  background: none; cursor: pointer;
}
.tc-using { color: var(--primary); font-weight: 600; }
.theme-dot {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px;
  vertical-align: -1px; box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}

/* 支付确认视图（下单二次确认防误触） */
.pay-confirm { padding: 4px 2px; }
.pc-amount-box {
  background: linear-gradient(135deg,#fff7ed,#fef3c7); border: 1px solid #fcd34d;
  border-radius: 14px; padding: 16px; text-align: center; margin: 12px 0;
}
.pc-amount-box .pc-amt { font-size: 32px; font-weight: 800; color: #dc2626; line-height: 1.1; }
.pc-amount-box .pc-amt small { font-size: 14px; font-weight: 500; }
.pc-amount-box .pc-note { font-size: 12px; color: #92400e; margin-top: 6px; }
.pc-detail-box {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  margin-bottom: 12px; max-height: 180px; overflow-y: auto; font-size: 13px; color: #374151;
  white-space: pre-wrap; word-break: break-all; line-height: 1.6;
}
.btn-pay-confirm {
  background: linear-gradient(135deg,#f97316,#dc2626) !important; color: #fff !important;
  box-shadow: 0 4px 12px rgba(220,38,38,.35);
}
.btn-pay-confirm:hover { filter: brightness(1.06); }

/* 图标选择器（游戏/服务编辑弹窗：emoji 预设 + 上传图片） */
.icon-picker { display: flex; gap: 12px; align-items: flex-start; margin-top: 6px; }
.ip-preview {
  width: 56px; height: 56px; flex: none; border: 1px solid var(--border); border-radius: 12px;
  background: #f9fafb; display: flex; align-items: center; justify-content: center;
  font-size: 30px; overflow: hidden;
}
.ip-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ip-emojis { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-em {
  width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: #fff;
  cursor: pointer; font-size: 18px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center; transition: border-color .1s ease, background .1s ease;
}
.ip-em:hover { border-color: var(--primary); }
.ip-em.active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(124,58,237,.25); background: #f5f3ff; }
.ip-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ip-upload-btn { cursor: pointer; padding: 6px 12px; font-size: 13px; }
.ip-hint { font-size: 11px; color: #9ca3af; }

/* 自定义图片图标：各展示位尺寸（emoji 文本时无此类名，不受影响） */
.icon-img { object-fit: cover; border-radius: 6px; display: inline-block; }
.gt-ico .icon-img { width: 28px; height: 28px; border-radius: 8px; }
.sgc-icon .icon-img { width: 30px; height: 30px; border-radius: 8px; }
.sc-fb-emoji .icon-img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.ws-ico .icon-img { width: 40px; height: 40px; border-radius: 10px; }
.wsc-icon .icon-img { width: 28px; height: 28px; border-radius: 7px; vertical-align: middle; }
.wac-icon .icon-img { width: 40px; height: 40px; border-radius: 10px; }
.wsc-seg-img .icon-img, .wac-seg-img .icon-img { width: 26px; height: 26px; border-radius: 7px; }
.wac-seg-img .icon-img { width: 32px; height: 32px; }
.hall-game-badge .icon-img { width: 36px; height: 36px; border-radius: 10px; }
.game-card-head .icon-img { width: 26px; height: 26px; border-radius: 7px; }
.ip-preview .icon-img { width: 100%; height: 100%; border-radius: 12px; }

/* ---------------- 订单卡片(大厅) ---------------- */
.order-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px;
  margin-bottom: 14px; border-left: 4px solid var(--primary);
}
.order-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.order-card-title { font-weight: 700; font-size: 15px; }
.order-card-no { font-size: 12px; color: var(--text-light); margin-top: 4px; }
.order-card-detail { color: #555; font-size: 13px; margin: 10px 0; background: #faf9ff; padding: 10px 12px; border-radius: 8px; white-space: normal; }
.order-card-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }

/* ---------------- 接单大厅（新版卡片） ---------------- */
.hall-hero {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff; border-radius: var(--radius); padding: 18px 22px; margin-bottom: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  box-shadow: 0 10px 30px rgba(124, 58, 237, .25);
}
.hall-hero-title { font-size: 18px; font-weight: 800; letter-spacing: .5px; }
.hall-hero-sub { font-size: 12.5px; opacity: .92; margin-top: 6px; }
.hall-hero-sub b { font-size: 16px; color: #fde68a; font-weight: 800; }
.hall-hero-rate {
  background: rgba(255, 255, 255, .18); border-radius: 12px; padding: 10px 18px;
  text-align: center; font-size: 12px; backdrop-filter: blur(4px);
}
.hall-hero-rate b { font-size: 20px; font-weight: 800; display: block; line-height: 1.2; }
.hall-hero-rate span { opacity: .85; font-size: 11px; }

.hall-card {
  padding: 16px 18px; border: 1.5px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hall-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(124, 58, 237, .15); border-color: var(--primary-light); }
.hall-card.is-designated { border-color: #fcd34d; background: linear-gradient(180deg, #fffdf2, #fff); }
.hall-card.is-designated:hover { border-color: var(--orange); box-shadow: 0 10px 26px rgba(245, 158, 11, .18); }
.hall-card-top { display: flex; gap: 14px; align-items: center; }
.hall-game-badge {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.hall-card.is-designated .hall-game-badge { background: #fef3c7; }
.hall-card-info { flex: 1; min-width: 0; }
.hall-card-title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hall-card-meta { font-size: 12px; color: var(--text-light); margin-top: 7px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hall-boss { color: var(--text); font-weight: 600; }
.hall-dot { opacity: .45; }
.hall-orderno { font-family: ui-monospace, Consolas, monospace; }
.hall-card-reward { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; flex-shrink: 0; }
.reward-row { text-align: right; }
.reward-price { font-size: 21px; font-weight: 800; color: var(--red); white-space: nowrap; line-height: 1.1; }
.reward-price .reward-label { font-size: 11px; color: var(--text-light); font-weight: 400; margin-right: 5px; }
.reward-income { font-size: 12px; color: var(--green); font-weight: 600; margin-top: 3px; white-space: nowrap; }
.reward-income b { font-size: 14px; }
.reward-income em { font-style: normal; color: var(--text-light); font-weight: 400; margin-left: 5px; }
.btn-grab { padding: 9px 22px; font-size: 14px; font-weight: 700; border-radius: 10px; }
.hall-card-detail {
  margin-top: 12px; color: #555; font-size: 13px; white-space: normal;
  background: #faf9ff; border: 1px dashed var(--border); padding: 10px 12px; border-radius: 10px; line-height: 1.6;
}
.hall-card.is-designated .hall-card-detail { background: #fffbeb; border-color: #fde68a; }
@media (max-width: 640px) {
  .hall-card-top { flex-wrap: wrap; }
  .hall-card-reward { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .reward-row { text-align: left; }
}

/* ---------------- 充值/钱包 ---------------- */
.wallet-hero {
  background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff; border-radius: var(--radius);
  padding: 26px; box-shadow: 0 10px 30px rgba(124,58,237,.3); margin-bottom: 20px;
}
.wallet-hero .label { font-size: 13px; opacity: .85; }
.wallet-hero .amount { font-size: 36px; font-weight: 800; margin: 6px 0 14px; }
.wallet-hero .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wallet-hero .btn { background: rgba(255,255,255,.2); color: #fff; }
.wallet-hero .btn:hover { background: rgba(255,255,255,.32); }
.quick-amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px,1fr)); gap: 10px; margin: 12px 0; }
.quick-amount { padding: 14px; text-align: center; border: 2px solid var(--border); border-radius: 10px; cursor: pointer; font-weight: 700; color: var(--primary-dark); transition: all .15s; background: #fff; }
.quick-amount:hover, .quick-amount.sel { border-color: var(--primary); background: var(--primary-light); }

/* ---------------- 进度时间线 ---------------- */
.timeline { margin: 10px 0; padding-left: 6px; }
.timeline-item { position: relative; padding: 0 0 18px 22px; border-left: 2px solid var(--border); }
.timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-item::before {
  content: ''; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--primary); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--primary-light);
}
.timeline-time { font-size: 12px; color: var(--text-light); }
.timeline-content { font-size: 13px; margin-top: 4px; white-space: normal; }

/* ---------------- 弹窗 ---------------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(30,27,46,.55); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-mask.show { display: flex; }
.modal {
  background: #fff; border-radius: 16px; width: 520px; max-width: 100%; max-height: 88vh;
  display: flex; flex-direction: column; animation: pop .2s ease;
}
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-header {
  padding: 16px 20px; font-size: 16px; font-weight: 700; display: flex; justify-content: space-between;
  align-items: center; border-bottom: 1px solid var(--border);
}
.modal-close { background: none; font-size: 24px; color: var(--text-light); line-height: 1; }
.modal-close:hover { color: var(--red); }
.modal-body { padding: 20px; overflow-y: auto; }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 13px; color: var(--text-light); margin-bottom: 6px; }
.form-row label .req { color: var(--red); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.switch-row { display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;margin:4px 0; }
.switch-row input[type=checkbox] { width:16px; height:16px; cursor:pointer; }

/* 指定单强提示弹窗 */
.designated-pop { background:linear-gradient(135deg,#fffbeb,#fef3c7); border:2px solid #f59e0b; border-radius:16px; padding:22px 18px; box-shadow:0 8px 30px rgba(245,158,11,.25); }
.dp-crown { font-size:48px; animation:dpBounce 1s ease infinite; }
@keyframes dpBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* 客服介入私聊的平台提示条 */
.cm-staff { text-align:center; margin:10px auto; max-width:85%; }
.cm-staff .cm-staff-bubble { display:inline-block; background:linear-gradient(135deg,#fef3c7,#fde68a); border:1.5px solid #f59e0b; color:#92400e; border-radius:12px; padding:8px 14px; font-size:13px; line-height:1.6; box-shadow:0 2px 8px rgba(245,158,11,.18); }
.cm-staff .cm-staff-tag { display:inline-block; background:#f59e0b; color:#fff; font-size:11px; font-weight:700; border-radius:6px; padding:1px 7px; margin-right:6px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.detail-list { display: grid; grid-template-columns: 90px 1fr; gap: 10px 12px; font-size: 13px; }
.detail-list dt { color: var(--text-light); }
.detail-list dd { white-space: normal; word-break: break-all; }
.money-in { color: var(--green); font-weight: 700; }
.money-out { color: var(--red); font-weight: 700; }

/* ---------------- 公告 ---------------- */
.notice-item { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 14px; border-left: 4px solid var(--orange); }
.notice-title { font-weight: 700; font-size: 15px; }
.notice-time { font-size: 12px; color: var(--text-light); margin: 6px 0 8px; }
.notice-content { font-size: 13px; color: #555; line-height: 1.7; white-space: normal; }

/* ---------------- Toast ---------------- */
.toast {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-80px);
  background: #2d2a3a; color: #fff; padding: 11px 24px; border-radius: 10px; font-size: 14px;
  z-index: 300; opacity: 0; transition: all .3s; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: 90vw;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.ok { background: #059669; }
.toast.err { background: #dc2626; }

/* ---------------- 聊天室页面（左侧菜单进入） ---------------- */
.chat-page {
  display: flex; height: calc(100vh - 150px); min-height: 480px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.chat-page-list { width: 300px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.chat-page-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.chat-page-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center; color: var(--text-light); background: #faf9ff; z-index: 0;
}
.chat-page .chat-header { position: relative; z-index: 1; flex-shrink: 0; }
.chat-page .chat-chat { position: relative; z-index: 1; flex: 1; min-height: 0; display: none; }
.chat-page.in-chat .chat-chat { display: flex; }
.chat-page.in-chat .chat-page-empty { display: none; }
.chat-head-left { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.chat-head-left #chatTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-header {
  padding: 12px 14px; background: linear-gradient(135deg,#7c3aed,#9333ea); color: #fff;
  display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 15px;
}
.chat-head-actions { display: flex; gap: 4px; }
.chat-icon-btn {
  background: rgba(255,255,255,.18); color: #fff; width: 28px; height: 28px; border-radius: 8px;
  font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.chat-icon-btn:hover { background: rgba(255,255,255,.32); }
/* 菜单未读红点 */
.menu-badge {
  margin-left: auto; background: var(--red); color: #fff; border-radius: 10px;
  min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.chat-tabs { display: flex; border-bottom: 1px solid var(--border); }
.chat-tab { flex: 1; padding: 10px; background: none; color: var(--text-light); font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; }
.chat-tab.sel { color: var(--primary-dark); border-bottom-color: var(--primary); background: #faf9ff; }
.chat-body { flex: 1; overflow-y: auto; }
.chat-list-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer;
  border-bottom: 1px solid #f4f3fa; transition: background .12s;
}
.chat-list-item:hover { background: #faf9ff; }
.chat-list-item .cli-main { flex: 1; min-width: 0; }
.chat-list-item .cli-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.chat-list-item .cli-last { font-size: 12px; color: var(--text-light); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-item .cli-time { font-size: 11px; color: var(--text-light); white-space: nowrap; }
.chat-unread { background: var(--red); color: #fff; border-radius: 10px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.chat-section-title { padding: 10px 14px 4px; font-size: 12px; color: var(--text-light); font-weight: 600; }

.chat-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 14px; background: #f6f5fb; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { display: flex; gap: 8px; max-width: 86%; }
.chat-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg .cm-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#8b5cf6,#7c3aed); color: #fff; font-size: 14px; font-weight: 700; }
.chat-msg.me .cm-avatar { background: linear-gradient(135deg,#10b981,#059669); }
.chat-msg .cm-body { min-width: 0; }
.chat-msg .cm-name { font-size: 11px; color: var(--text-light); margin-bottom: 3px; }
.chat-msg.me .cm-name { text-align: right; }
.chat-msg .cm-bubble { background: #fff; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.chat-msg.me .cm-bubble { background: var(--primary); color: #fff; }
.chat-msg .cm-time { font-size: 10px; color: var(--text-light); margin-top: 3px; }
.chat-msg.me .cm-time { text-align: right; }
.chat-msg.sys { align-self: center; max-width: 100%; }
.chat-msg.sys .cm-bubble { background: rgba(0,0,0,.08); color: var(--text-light); font-size: 11px; padding: 3px 10px; border-radius: 10px; box-shadow: none; }
.chat-msg .chat-report-btn { background: none; border: none; font-size: 12px; opacity: .35; cursor: pointer; margin-left: 6px; padding: 2px 4px; border-radius: 6px; transition: opacity .2s; vertical-align: middle; }
.chat-msg .chat-report-btn:hover { opacity: 1; background: rgba(255,80,80,.12); }
.chat-input-bar { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); background: #fff; }
.chat-input-bar input { flex: 1; padding: 9px 12px; }
.chat-room-notice { background: #fffbeb; color: #92400e; font-size: 12px; padding: 8px 12px; border-bottom: 1px solid #fde68a; white-space: normal; }
.chat-members-bar { padding: 6px 12px; font-size: 11px; color: var(--text-light); background: #faf9ff; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* 在线绿点 */
.online-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; display: inline-block; flex-shrink: 0; }
.online-dot.on { background: var(--green); box-shadow: 0 0 0 2px rgba(16,185,129,.18); }
.avatar-wrap { position: relative; flex-shrink: 0; }
.avatar-wrap .online-dot { position: absolute; right: -1px; bottom: -1px; border: 2px solid #fff; }

/* 等级徽章 */
.level-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px; background: linear-gradient(135deg,#f59e0b,#f97316); color: #fff; }
.level-badge.lv1 { background: linear-gradient(135deg,#94a3b8,#64748b); }
.level-badge.lv2 { background: linear-gradient(135deg,#22c55e,#16a34a); }
.level-badge.lv3 { background: linear-gradient(135deg,#3b82f6,#2563eb); }
.level-badge.lv4 { background: linear-gradient(135deg,#a855f7,#7c3aed); }
.level-badge.lv5 { background: linear-gradient(135deg,#f59e0b,#ef4444); }

/* 指定单标签 */
.tag-designated { background: linear-gradient(135deg,#f59e0b,#ef4444); color: #fff; }
.order-card.designated { border-left-color: var(--orange); background: linear-gradient(180deg,#fffdf5,#fff); }
.income-hint { font-size: 12px; color: var(--green); font-weight: 600; }
.commission-hint { font-size: 11px; color: var(--text-light); }

/* 在线打手卡片 */
.player-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.player-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px;
  display: flex; flex-direction: column; gap: 10px; border: 1px solid rgba(124,58,237,.06);
}
.player-card.offline { opacity: .75; }
.player-card-head { display: flex; align-items: center; gap: 12px; }
.player-card-head .avatar { width: 48px; height: 48px; font-size: 22px; }
.player-card-head .pc-name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.player-card-head .pc-sub { font-size: 12px; color: var(--text-light); margin-top:3px; display:flex; align-items:center; gap:6px; }
.player-card-stats { display: flex; gap: 14px; font-size: 12px; color: var(--text-light); }
.player-card-stats b { color: var(--primary-dark); font-size: 15px; }
.player-card-actions { display: flex; gap: 8px; margin-top: auto; }
.player-card-actions .btn { flex: 1; justify-content: center; }

/* 头像选择器 */
.avatar-preview { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#8b5cf6,#7c3aed); color: #fff; font-size: 30px; font-weight: 700; }
.emoji-picker { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin: 8px 0; }
.emoji-picker span {
  text-align: center; font-size: 20px; padding: 6px 0; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--border); background: #fff; transition: all .12s;
}
.emoji-picker span:hover, .emoji-picker span.sel { border-color: var(--primary); background: var(--primary-light); }

/* ---------------- 图片头像（圆形容器内铺满） ---------------- */
.avatar img, .cm-avatar img, .avatar-preview img, .plaza-avatar img, .avatar-img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}

/* ---------------- 个人资料 · 头像编辑 ---------------- */
.avatar-edit-wrap { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.avatar-edit-wrap .avatar-preview { margin: 0; width: 72px; height: 72px; flex: none; overflow: hidden; }
.avatar-edit-body { flex: 1; min-width: 0; }
.avatar-edit-body .form-row label { margin-bottom: 4px; }
.emoji-quick { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin: 6px 0 8px; }
.emoji-quick .emoji-q {
  text-align: center; font-size: 18px; padding: 4px 0; border-radius: 7px; cursor: pointer;
  border: 1.5px solid var(--border); background: #fff; transition: all .12s; line-height: 1.2;
}
.emoji-quick .emoji-q:hover { border-color: var(--primary); background: var(--primary-light); transform: scale(1.12); }
.avatar-upload-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.avatar-upload-row .btn { white-space: nowrap; }
.avatar-tip { font-size: 11px; color: var(--text-light); }

/* 平台设置 */
.settings-hero { background: linear-gradient(135deg,#4c1d95,#7c3aed); color:#fff; border-radius: var(--radius); padding: 22px 24px; margin-bottom: 18px; box-shadow: 0 10px 30px rgba(124,58,237,.25); }
.settings-hero h3 { font-size: 18px; margin-bottom: 6px; }
.settings-hero p { font-size: 13px; opacity: .85; }
.level-edit-row { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: center; margin-bottom: 8px; }

/* 下单指定打手 */
.designate-banner {
  background: linear-gradient(135deg,#fef3c7,#fde68a); color: #92400e; border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 14px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 10px;
}

/* ---------------- 移动端适配 ---------------- */
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s; width: 240px; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-mask.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 90; }
  .main { margin-left: 0; }
  .menu-toggle { display: block; }
  .content { padding: 14px; }
  .topbar { padding: 0 14px; gap: 8px; }
  .user-meta { display: none; }
  .balance-pill { font-size: 12px; padding: 5px 10px; }
  #logoutBtn { padding: 6px 8px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-card .stat-val { font-size: 18px; }
  .game-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .modal { width: 100%; }
  th, td { padding: 10px 12px; }
  /* 聊天室：手机上单栏（列表/会话切换，显示返回按钮） */
  .chat-page { flex-direction: column; height: calc(100vh - 130px); min-height: 400px; }
  .chat-page-list { width: 100%; border-right: none; }
  .chat-page-main { display: none; }
  .chat-page.in-chat .chat-page-main { display: flex; }
  .chat-page.in-chat .chat-page-list { display: none; }
  .emoji-picker { grid-template-columns: repeat(6, 1fr); }
}
/* 桌面端双栏常驻，不需要返回按钮 */
@media (min-width: 861px) {
  #chatBack { display: none !important; }
}

/* ================= 通知铃铛 / 通知中心 ================= */
.notice-bell { position: relative; background: transparent; border: none; font-size: 18px; cursor: pointer; padding: 6px 8px; border-radius: 10px; line-height: 1; }
.notice-bell:hover { background: var(--primary-light); }
.notice-dot { position: absolute; top: -2px; right: -6px; background: var(--red); color: #fff; font-size: 10px; font-style: normal; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; font-weight: 700; }
.ntf-row { display: flex; gap: 12px; padding: 12px 8px; border-bottom: 1px solid var(--border); }
.ntf-row:last-child { border-bottom: none; }
.ntf-row.read { opacity: .55; }
.ntf-ic { font-size: 20px; flex-shrink: 0; width: 34px; height: 34px; background: var(--primary-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ntf-body { flex: 1; min-width: 0; }
.ntf-title { font-weight: 700; font-size: 13px; }
.ntf-text { font-size: 13px; color: var(--text); margin: 3px 0; white-space: normal; }
.ntf-time { font-size: 11px; color: var(--text-light); }
.ntf-unread { background: var(--red); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 8px; margin-left: 6px; font-weight: 400; }

/* ================= 星级 / 评价 ================= */
.stars { letter-spacing: 1px; }
.star-off { filter: grayscale(1); opacity: .35; }
.star-pick { font-size: 30px; letter-spacing: 6px; user-select: none; }
.star-opt { cursor: pointer; opacity: .35; filter: grayscale(1); transition: all .15s; display: inline-block; }
.star-opt.active { opacity: 1; filter: none; transform: scale(1.1); }
.review-card { padding: 14px 16px; }
.review-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review-head .stars { margin-left: auto; }
.review-time { color: var(--text-light); font-size: 12px; }
.review-order { font-size: 12px; color: var(--text-light); margin: 6px 0; }
.review-content { font-size: 13px; white-space: normal; margin: 4px 0; }
.review-mini { padding: 10px 12px; background: var(--bg); border-radius: 10px; margin-bottom: 8px; font-size: 13px; }

/* ================= 打手榜单 ================= */
.rank-list { display: flex; flex-direction: column; gap: 10px; }
.rank-item { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 18px; cursor: pointer; transition: all .15s; }
.rank-item:hover { transform: translateX(4px); box-shadow: 0 6px 18px rgba(124,58,237,.15); }
.rank-no { width: 34px; text-align: center; font-size: 15px; font-weight: 800; color: var(--text-light); flex-shrink: 0; }
.rank-no.top { font-size: 26px; }
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-weight: 700; }
.rank-sub { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.rank-done { font-size: 13px; color: var(--text-light); white-space: nowrap; }
.rank-done b { color: var(--primary-dark); font-size: 16px; }

/* ================= 图片上传 / 截图 ================= */
.img-uploader { margin-top: 4px; }
.img-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.img-thumb { position: relative; width: 72px; height: 72px; }
.img-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.img-del { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; background: var(--red); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; line-height: 1; }
.img-add { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 16px; border: 1.5px dashed var(--primary); border-radius: 10px; color: var(--primary-dark); font-size: 13px; cursor: pointer; background: var(--primary-light); }
.img-add:hover { background: #e2dcfb; }
.shot-img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); margin: 4px 4px 0 0; }
.proof-imgs { display: flex; flex-wrap: wrap; margin-top: 6px; }
.chat-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; max-width: 220px; }
.chat-img { width: 100px; height: 100px; object-fit: cover; border-radius: 10px; cursor: zoom-in; display: block; }
.chat-input-bar .chat-icon-btn { background: var(--primary-light); color: var(--primary-dark); width: 36px; height: 36px; flex-shrink: 0; cursor: pointer; border: none; }
.chat-input-bar .chat-icon-btn:hover { background: #e2dcfb; }

/* ================= 优惠券 ================= */
.coupon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.coupon-card { display: flex; align-items: center; gap: 12px; border: 1.5px dashed var(--primary); border-radius: 12px; padding: 14px; background: linear-gradient(135deg, #faf7ff, #f4efff); position: relative; overflow: hidden; }
.coupon-card.disabled, .coupon-card.owned { opacity: .6; border-color: var(--border); background: var(--bg); }
.coupon-amount { text-align: center; flex-shrink: 0; min-width: 74px; color: var(--red); }
.coupon-amount b { font-size: 24px; font-weight: 800; }
.coupon-amount span { display: block; font-size: 11px; color: var(--text-light); }
.coupon-info { flex: 1; min-width: 0; }
.coupon-name { font-weight: 700; font-size: 14px; }
.coupon-sub { font-size: 12px; color: var(--text-light); margin-top: 3px; }
.coupon-card .btn { flex-shrink: 0; }

/* ================= Banner 轮播 ================= */
.banner-carousel { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 14px; scroll-snap-type: x mandatory; }
.banner-slide { flex: 0 0 320px; max-width: 100%; scroll-snap-align: start; border-radius: 14px; padding: 18px 20px; color: #fff; display: flex; align-items: center; gap: 14px; min-height: 86px; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.banner-icon { font-size: 34px; }
.banner-txt b { font-size: 16px; display: block; }
.banner-txt small { font-size: 12px; opacity: .9; }

/* ================= 趋势图 ================= */
.trend-chart { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding: 10px 4px 0; border-bottom: 1px solid var(--border); }
.trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.trend-bar { width: 70%; max-width: 22px; background: linear-gradient(180deg, var(--primary), var(--primary-light)); border-radius: 4px 4px 0 0; min-height: 2px; transition: height .3s; }
.trend-val { font-size: 10px; color: var(--text-light); margin-top: 3px; }
.trend-label { font-size: 9px; color: var(--text-light); transform: scale(.9); white-space: nowrap; }
.trend-sum { font-size: 13px; color: var(--text-light); margin-top: 10px; }
.trend-sum b { color: var(--primary-dark); }

/* ================= 提现账户 / 打赏 ================= */
.pay-bound { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; }

/* ================= 聊天红包 ================= */
.cm-redpacket {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; min-width: 220px; max-width: 300px;
  background: linear-gradient(135deg, #dc2626, #f59e0b); color: #fff; border-radius: 12px;
  box-shadow: 0 4px 14px rgba(220,38,38,.3); cursor: pointer; transition: transform .15s, filter .2s, opacity .2s;
  border: 2px solid rgba(255,255,255,.2);
}
.cm-redpacket:hover { transform: translateY(-2px); }
.cm-redpacket .rp-left { font-size: 28px; width: 48px; height: 48px; background: rgba(255,255,255,.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; position: relative; }
.cm-redpacket .rp-right { flex: 1; min-width: 0; }
.cm-redpacket .rp-title { font-weight: 700; font-size: 14px; }
.cm-redpacket .rp-sub { font-size: 12px; opacity: .9; margin-top: 2px; }
.cm-redpacket .rp-arrow { font-size: 22px; opacity: .7; }

/* —— 红包卡片状态：抢前 vs 抢后长得不一样 —— */
/* 待拆（默认，亮金红渐变 + 脉冲呼吸） */
.cm-redpacket.rp-state-pending,
.cm-redpacket.rp-state-active {
  background: linear-gradient(135deg, #dc2626, #f59e0b);
  animation: rpCardBreath 2s infinite;
}
@keyframes rpCardBreath { 0%,100% { box-shadow: 0 4px 14px rgba(220,38,38,.3); } 50% { box-shadow: 0 6px 22px rgba(245,158,11,.55); } }
.cm-redpacket.rp-state-active .rp-left { background: rgba(255,255,255,.3); }

/* 我发的红包（金色边框高亮） */
.cm-redpacket.rp-state-mine {
  background: linear-gradient(135deg, #b45309, #f59e0b);
  border-color: #fde68a;
}

/* 已抢过（变灰，不脉冲，加 ✓ 标记） */
.cm-redpacket.rp-state-grabbed {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  filter: none; animation: none; box-shadow: 0 2px 8px rgba(107,114,128,.25);
}
.cm-redpacket.rp-state-grabbed .rp-left { background: rgba(255,255,255,.25); }
.cm-redpacket.rp-state-grabbed .rp-left::after { content: '✓'; position: absolute; right: -4px; bottom: -4px; font-size: 14px; background: #10b981; color: #fff; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-weight: 800; border: 2px solid #fff; }

/* 已抢完（更灰，无阴影） */
.cm-redpacket.rp-state-done {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  animation: none; box-shadow: 0 1px 4px rgba(0,0,0,.15); opacity: .85;
}
.cm-redpacket.rp-state-done .rp-left { background: rgba(255,255,255,.15); }

/* 已过期（最暗，灰色 + 删除线感） */
.cm-redpacket.rp-state-expired {
  background: linear-gradient(135deg, #4b5563, #374151);
  animation: none; box-shadow: 0 1px 3px rgba(0,0,0,.12); opacity: .65;
}
.cm-redpacket.rp-state-expired .rp-left { background: rgba(255,255,255,.1); filter: grayscale(.5); }
.cm-redpacket.rp-state-expired .rp-title { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.4); }

/* 发红包表单 */
.rp-form { padding: 4px 0; }
.rp-type-pick { display: flex; gap: 10px; margin-bottom: 14px; }
.rp-type-pick label { flex: 1; cursor: pointer; position: relative; }
.rp-type-pick label input { display: none; }
.rp-type-pick label span.rp-tick { position: absolute; top: 8px; left: 10px; width: 18px; height: 18px; border: 2px solid #e8e6f2; border-radius: 50%; }
.rp-type-pick label input:checked + span.rp-tick { border-color: var(--primary); background: var(--primary); }
.rp-type-pick label { display: block; padding: 14px 14px 14px 40px; border: 1.5px solid var(--border); border-radius: 10px; font-weight: 600; font-size: 14px; }
.rp-type-pick label small { display: block; font-weight: 400; font-size: 12px; color: var(--text-light); margin-top: 3px; }
.rp-type-pick label input:checked ~ small { color: var(--primary); }
.rp-type-pick label:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.rp-preview { margin-top: 8px; }
.rp-preview-card { background: #fef3c7; color: #92400e; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; border: 1px dashed #fbbf24; }

/* 抢红包动画 */
.rp-open-wrap { text-align: center; padding: 20px 0; }
.rp-envelope {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 240px; height: 300px; border-radius: 18px;
  background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 12px 36px rgba(220,38,38,.4); cursor: pointer;
  transition: transform .2s;
}
.rp-envelope:hover { transform: scale(1.02); }
.rp-envelope-flap { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); font-size: 60px; }
.rp-envelope-body { text-align: center; z-index: 2; }
.rp-envelope-msg { font-size: 14px; opacity: .9; margin-bottom: 20px; }
.rp-envelope-open {
  background: #fff; color: #dc2626; font-weight: 800; font-size: 16px;
  padding: 10px 40px; border-radius: 24px; box-shadow: 0 6px 18px rgba(0,0,0,.2);
  animation: rpPulse 1.4s infinite;
}
.rp-envelope-float { position: absolute; font-size: 40px; opacity: .3; bottom: 14px; right: 14px; }
@keyframes rpPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* 抢到红包结果 */
.rp-grab-result { text-align: center; padding: 20px 0 10px; }
.rp-grab-amount { font-size: 48px; font-weight: 800; color: #dc2626; line-height: 1.2; }
.rp-grab-label { font-size: 18px; font-weight: 600; margin-top: 6px; }
.rp-grab-sub { font-size: 13px; color: var(--text-light); margin-top: 8px; }
.rp-claim-list { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; max-height: 220px; overflow-y: auto; }
.rp-claim-row { display: flex; justify-content: space-between; padding: 6px 14px; font-size: 13px; border-radius: 6px; }
.rp-claim-row:nth-child(odd) { background: var(--bg); }

/* ---------------- 动态广场 ---------------- */
.plaza-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.plaza-top h2 { margin: 0; }
.plaza-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.plaza-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px; transition: transform .15s, box-shadow .2s; }
.plaza-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124,58,237,.08); }
.plaza-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.plaza-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.plaza-nick { font-weight: 600; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.plaza-time { font-size: 12px; color: var(--text-light); }
.plaza-title { font-size: 15px; font-weight: 600; margin: 8px 0 4px; color: var(--primary-dark); }
.plaza-content { font-size: 14px; color: #333; line-height: 1.6; white-space: pre-wrap; word-break: break-word; margin: 4px 0; }
.plaza-imgs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.plaza-imgs img { width: 100px; height: 100px; border-radius: 8px; object-fit: cover; cursor: zoom-in; }
.plaza-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.plaza-foot .btn { padding: 4px 10px; font-size: 12px; }
.auto-tag { background: linear-gradient(135deg,#f0fdf4,#dcfce7); color: #166534; font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
.pz-img-item { position: relative; display: inline-block; margin: 4px; }
.pz-img-item img { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; }
.pz-img-item button { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--danger,#ef4444); color: #fff; border: none; font-size: 14px; line-height: 1; cursor: pointer; }
.pz-img-add { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border: 2px dashed var(--border); border-radius: 8px; color: var(--text-light); font-size: 13px; cursor: pointer; margin: 4px; }
.pz-img-add:hover { border-color: var(--primary); color: var(--primary); }

/* ---------------- 打手标签 bubble ---------------- */
.tag-bubble { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-right: 4px; margin-top: 2px; font-weight: 500; }
.tag-bubble.auto { background: linear-gradient(135deg,#fef3c7,#fde68a); color: #92400e; }
.tag-bubble.manual { background: linear-gradient(135deg,#dbeafe,#bfdbfe); color: #1e40af; }
.tag-bubble.critical { background: linear-gradient(135deg,#fee2e2,#fecaca); color: #991b1b; }

/* ---------------- 动态广场 ---------------- */
.plaza-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.plaza-top h2 { margin: 0; }
.plaza-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.plaza-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px; transition: transform .15s, box-shadow .2s; }
.plaza-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124,58,237,.08); }
.plaza-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.plaza-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.plaza-nick { font-weight: 600; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.plaza-time { font-size: 12px; color: var(--text-light); }
.plaza-title { font-size: 15px; font-weight: 600; margin: 8px 0 4px; color: var(--primary-dark); }
.plaza-content { font-size: 14px; color: #333; line-height: 1.6; white-space: pre-wrap; word-break: break-word; margin: 4px 0; }
.plaza-imgs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.plaza-imgs img { width: 100px; height: 100px; border-radius: 8px; object-fit: cover; cursor: zoom-in; }
.plaza-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.plaza-foot .btn { padding: 4px 10px; font-size: 12px; }
.auto-tag { background: linear-gradient(135deg,#f0fdf4,#dcfce7); color: #166534; font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
.pz-img-item { position: relative; display: inline-block; margin: 4px; }
.pz-img-item img { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; }
.pz-img-item button { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--danger,#ef4444); color: #fff; border: none; font-size: 14px; line-height: 1; cursor: pointer; }
.pz-img-add { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border: 2px dashed var(--border); border-radius: 8px; color: var(--text-light); font-size: 13px; cursor: pointer; margin: 4px; }
.pz-img-add:hover { border-color: var(--primary); color: var(--primary); }

/* ---------------- 打手标签 bubble ---------------- */
.tag-bubble { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-right: 4px; margin-top: 2px; font-weight: 500; }
.tag-bubble.auto { background: linear-gradient(135deg,#fef3c7,#fde68a); color: #92400e; }
.tag-bubble.manual { background: linear-gradient(135deg,#dbeafe,#bfdbfe); color: #1e40af; }
.tag-bubble.critical { background: linear-gradient(135deg,#fee2e2,#fecaca); color: #991b1b; }

/* ================ 网站风格主题（粒子层 z-index:9999 浮在内容之上，不挡交互） ================ */
.theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 14px; }
.theme-card { border: 2px solid var(--border); border-radius: 14px; padding: 18px 14px; text-align: center; cursor: pointer; transition: all .2s; background: #fff; }
.theme-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124,58,237,.1); }
.theme-card.sel { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.theme-card-icon { font-size: 32px; margin-bottom: 8px; }
.theme-card-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.theme-card-desc { font-size: 11px; color: var(--text-light); line-height: 1.4; }

/* 粒子层：fixed 全屏，z-index 9999 浮在所有内容之上，pointer-events:none 不挡点击 */
.theme-fx { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.theme-fx .particle { position: absolute; top: -20px; animation: fall linear infinite; opacity: .9; user-select: none; }
@keyframes fall { 0%{transform:translateY(-20px) translateX(0) rotate(0deg);opacity:0} 10%{opacity:.9} 90%{opacity:.9} 100%{transform:translateY(100vh) translateX(40px) rotate(360deg);opacity:0} }
@keyframes twinkle { 0%,100%{opacity:.2;transform:scale(.8)} 50%{opacity:1;transform:scale(1.4)} }
@keyframes rise { 0%{transform:translateY(100vh) scale(.5);opacity:0} 10%{opacity:.7} 90%{opacity:.7} 100%{transform:translateY(-20px) scale(1.2);opacity:0} }

/* —— 冰天雪地：白蓝渐变 + 雪白发光雪花 —— */
body[data-theme="snow"] { background: linear-gradient(180deg,#c7d2fe 0%,#e0e7ff 50%,#dbeafe 100%); }
body[data-theme="snow"] .login-page { background: linear-gradient(180deg,#a5b4fc 0%,#c7d2fe 50%,#e0e7ff 100%); }
body[data-theme="snow"] .sidebar { background: linear-gradient(180deg,#1e293b 0%,#312e81 100%); }
body[data-theme="snow"] .theme-fx .particle { color: #fff; text-shadow: 0 0 4px rgba(255,255,255,.95), 0 0 12px rgba(199,210,254,.8), 0 0 20px rgba(99,102,241,.5); animation-name: fall; font-weight: 700; }

/* —— 元气森林：清新绿 + 翠绿叶子 —— */
body[data-theme="forest"] { background: linear-gradient(180deg,#d1fae5 0%,#ecfdf5 50%,#a7f3d0 100%); }
body[data-theme="forest"] .login-page { background: linear-gradient(180deg,#6ee7b7 0%,#d1fae5 50%,#ecfdf5 100%); }
body[data-theme="forest"] .sidebar { background: linear-gradient(180deg,#064e3b 0%,#065f46 100%); }
body[data-theme="forest"] .theme-fx .particle { color: #15803d; text-shadow: 0 0 6px rgba(34,197,94,.6); animation-name: fall; }

/* —— 星空璀璨：深色背景 + 金色闪烁星 —— */
body[data-theme="starry"] { background: linear-gradient(180deg,#0f172a 0%,#1e1b4b 50%,#312e81 100%); color: #e2e8f0; }
body[data-theme="starry"] .login-page { background: linear-gradient(180deg,#0f172a 0%,#1e1b4b 100%); }
body[data-theme="starry"] .login-box { background: rgba(30,27,75,.85); border: 1px solid rgba(124,58,237,.3); }
body[data-theme="starry"] .login-box input { background: rgba(15,23,42,.6); color: #e2e8f0; border-color: rgba(124,58,237,.3); }
body[data-theme="starry"] .sidebar { background: linear-gradient(180deg,#0f172a 0%,#1e1b4b 100%); }
body[data-theme="starry"] .panel { background: rgba(30,27,75,.8); border-color: rgba(124,58,237,.2); }
body[data-theme="starry"] .panel input, body[data-theme="starry"] .panel select, body[data-theme="starry"] .panel textarea { background: rgba(15,23,42,.6); color: #e2e8f0; }
body[data-theme="starry"] .topbar { background: rgba(30,27,75,.9); border-color: rgba(124,58,237,.2); }
body[data-theme="starry"] .content { background: transparent; }
body[data-theme="starry"] .plaza-card { background: rgba(30,27,75,.7); border-color: rgba(124,58,237,.2); }
body[data-theme="starry"] .theme-fx .particle { color: #fbbf24; text-shadow: 0 0 6px rgba(251,191,36,.9), 0 0 14px rgba(251,191,36,.5); animation-name: twinkle; }

/* —— 碧海蓝天：海洋蓝 + 升腾气泡 —— */
body[data-theme="ocean"] { background: linear-gradient(180deg,#bae6fd 0%,#e0f2fe 50%,#dbeafe 100%); }
body[data-theme="ocean"] .login-page { background: linear-gradient(180deg,#38bdf8 0%,#bae6fd 50%,#e0f2fe 100%); }
body[data-theme="ocean"] .sidebar { background: linear-gradient(180deg,#0c4a6e 0%,#075985 100%); }
body[data-theme="ocean"] .theme-fx .particle { color: rgba(14,165,233,.75); text-shadow: 0 0 6px rgba(56,189,248,.5); animation-name: rise; }

/* ================= 三大布局风格主题 ================= */

/* —— 暗黑电竞风：深色背景 + 霓虹紫/青 —— */
body[data-theme="dark"] {
  --bg: #0f0f17;
  --sidebar-bg: #0a0a12;
  --sidebar-active: #a855f7;
  --text: #e2e8f0;
  --text-light: #94a3b8;
  --border: #1e1e2e;
  --primary: #a855f7;
  --primary-dark: #9333ea;
  --primary-light: rgba(168,85,247,.15);
  --shadow: 0 4px 20px rgba(168,85,247,.15);
  --radius: 10px;
}
body[data-theme="dark"] .login-page { background: linear-gradient(135deg,#0f0f17 0%,#1a1a2e 50%,#16132a 100%); }
body[data-theme="dark"] .login-box { background: rgba(20,20,35,.92); border: 1px solid rgba(168,85,247,.25); box-shadow: 0 0 40px rgba(168,85,247,.12); }
body[data-theme="dark"] .login-box input { background: rgba(15,15,25,.7); color: #e2e8f0; border-color: rgba(168,85,247,.2); }
body[data-theme="dark"] .login-box input::placeholder { color: #64748b; }
body[data-theme="dark"] .sidebar { background: linear-gradient(180deg,#0a0a12 0%,#12101f 100%); border-right: 1px solid rgba(168,85,247,.12); }
body[data-theme="dark"] .sidebar .menu-item.active { background: rgba(168,85,247,.18); border-left: 3px solid #a855f7; }
body[data-theme="dark"] .sidebar .menu-item:hover { background: rgba(168,85,247,.08); }
body[data-theme="dark"] .topbar { background: rgba(15,15,23,.92); border-color: rgba(168,85,247,.12); }
body[data-theme="dark"] .content { background: transparent; }
body[data-theme="dark"] .panel { background: rgba(22,22,38,.88); border: 1px solid rgba(168,85,247,.1); }
body[data-theme="dark"] .stat-card { background: rgba(22,22,38,.88); border-color: rgba(168,85,247,.1); }
body[data-theme="dark"] .stat-card .stat-icon { background: rgba(168,85,247,.15); }
body[data-theme="dark"] .stat-card .stat-val { color: #c4b5fd; }
body[data-theme="dark"] input, body[data-theme="dark"] select, body[data-theme="dark"] textarea { background: rgba(15,15,25,.8); color: #e2e8f0; border-color: rgba(168,85,247,.15); }
body[data-theme="dark"] input:focus, body[data-theme="dark"] select:focus, body[data-theme="dark"] textarea:focus { border-color: #a855f7; }
body[data-theme="dark"] th { background: rgba(168,85,247,.06); }
body[data-theme="dark"] tr:hover td { background: rgba(168,85,247,.04); }
body[data-theme="dark"] .btn-primary { background: linear-gradient(135deg,#a855f7,#7c3aed); box-shadow: 0 0 12px rgba(168,85,247,.3); }
body[data-theme="dark"] .btn-primary:hover { box-shadow: 0 0 20px rgba(168,85,247,.5); }
body[data-theme="dark"] .version-bar { background: rgba(168,85,247,.08); border-color: rgba(168,85,247,.4); }
body[data-theme="dark"] .version-bar:hover { background: rgba(168,85,247,.15); }
body[data-theme="dark"] .hall-card { background: rgba(22,22,38,.88); border-color: rgba(168,85,247,.1); }
body[data-theme="dark"] .hall-card:hover { border-color: rgba(168,85,247,.3); box-shadow: 0 8px 28px rgba(168,85,247,.15); }
body[data-theme="dark"] .modal { background: rgba(15,15,23,.85); }
body[data-theme="dark"] .modal-box { background: rgba(22,22,38,.96); border: 1px solid rgba(168,85,247,.15); }
body[data-theme="dark"] .plaza-card { background: rgba(22,22,38,.88); border-color: rgba(168,85,247,.1); }
body[data-theme="dark"] .tag-gray { background: rgba(168,85,247,.08); color: #94a3b8; }

/* —— 蓝金尊享风：蓝金配色 + 圆润大圆角 —— */
body[data-theme="bluegold"] {
  --bg: #f0f6ff;
  --sidebar-bg: #0c1e3e;
  --sidebar-active: #2563eb;
  --text: #1e293b;
  --text-light: #64748b;
  --border: #d4e4ff;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #dbeafe;
  --green: #059669;
  --orange: #d97706;
  --shadow: 0 6px 24px rgba(37,99,235,.1);
  --radius: 16px;
}
body[data-theme="bluegold"] .login-page { background: linear-gradient(135deg,#0c1e3e 0%,#1e3a5f 50%,#2563eb 100%); }
body[data-theme="bluegold"] .login-box { border: 2px solid rgba(251,191,36,.3); box-shadow: 0 12px 40px rgba(37,99,235,.2); }
body[data-theme="bluegold"] .sidebar { background: linear-gradient(180deg,#0c1e3e 0%,#172554 100%); border-right: 2px solid rgba(251,191,36,.15); }
body[data-theme="bluegold"] .sidebar .menu-item.active { background: linear-gradient(90deg,rgba(37,99,235,.2),transparent); border-left: 3px solid #fbbf24; }
body[data-theme="bluegold"] .sidebar .menu-item.active .menu-text { color: #fbbf24; }
body[data-theme="bluegold"] .topbar { background: #fff; border-bottom: 2px solid #d4e4ff; }
body[data-theme="bluegold"] .panel { border: 1.5px solid #d4e4ff; }
body[data-theme="bluegold"] .stat-card { border: 1.5px solid #d4e4ff; }
body[data-theme="bluegold"] .stat-card .stat-icon { background: #dbeafe; }
body[data-theme="bluegold"] .stat-card .stat-val { color: #1d4ed8; }
body[data-theme="bluegold"] .btn-primary { background: linear-gradient(135deg,#2563eb,#1d4ed8); }
body[data-theme="bluegold"] .btn-primary:hover { background: linear-gradient(135deg,#1d4ed8,#1e40af); box-shadow: 0 4px 16px rgba(37,99,235,.3); }
body[data-theme="bluegold"] .version-bar { background: linear-gradient(90deg,#eff6ff,#fef3c7); border-color: #fbbf24; }
body[data-theme="bluegold"] .version-bar .vb-num { color: #1d4ed8; }
body[data-theme="bluegold"] .hall-card { border: 1.5px solid #d4e4ff; }
body[data-theme="bluegold"] .hall-card:hover { border-color: #2563eb; box-shadow: 0 8px 28px rgba(37,99,235,.12); }
body[data-theme="bluegold"] .modal-box { border: 2px solid #d4e4ff; }
body[data-theme="bluegold"] .tag-green { background: #d1fae5; color: #059669; }

/* —— 紧凑高效风：小字号小圆角密排列 —— */
body[data-theme="compact"] {
  --radius: 8px;
  --shadow: 0 2px 10px rgba(124,58,237,.06);
}
body[data-theme="compact"] { font-size: 13px; }
body[data-theme="compact"] .sidebar { width: 180px; }
body[data-theme="compact"] .sidebar .menu-item { padding: 7px 12px; font-size: 13px; }
body[data-theme="compact"] .sidebar .menu-item .menu-text { font-size: 13px; }
body[data-theme="compact"] .sidebar .sidebar-header { padding: 10px 12px; }
body[data-theme="compact"] .sidebar .sidebar-header img { width: 32px; height: 32px; }
body[data-theme="compact"] .topbar { padding: 0 14px; height: 46px; }
body[data-theme="compact"] .topbar .topbar-title { font-size: 15px; }
body[data-theme="compact"] .content { padding: 12px; }
body[data-theme="compact"] .panel { padding: 12px; margin-bottom: 12px; }
body[data-theme="compact"] .panel-title { font-size: 13px; margin-bottom: 10px; }
body[data-theme="compact"] .stat-grid { grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 8px; }
body[data-theme="compact"] .stat-card { padding: 10px; }
body[data-theme="compact"] .stat-card .stat-icon { width: 36px; height: 36px; font-size: 18px; border-radius: 8px; }
body[data-theme="compact"] .stat-card .stat-val { font-size: 18px; }
body[data-theme="compact"] .stat-card .stat-label { font-size: 11px; }
body[data-theme="compact"] th, body[data-theme="compact"] td { padding: 7px 10px; font-size: 12px; }
body[data-theme="compact"] .btn { padding: 5px 12px; font-size: 12px; }
body[data-theme="compact"] .hall-list { gap: 8px; }
body[data-theme="compact"] .hall-card { padding: 10px; }
body[data-theme="compact"] .modal-box { border-radius: 10px; }
body[data-theme="compact"] .modal-body { padding: 14px; }
body[data-theme="compact"] input, body[data-theme="compact"] select, body[data-theme="compact"] textarea { padding: 7px 10px; border-radius: 6px; font-size: 13px; }
body[data-theme="compact"] .version-bar { padding: 6px 12px; margin-bottom: 10px; }
body[data-theme="compact"] .version-bar .vb-num { font-size: 13px; }
body[data-theme="compact"] .trend-chart { gap: 3px; }
body[data-theme="compact"] .trend-bar { width: 18px; }
body[data-theme="compact"] .trend-col { width: 18px; }
body[data-theme="compact"] .trend-val { font-size: 10px; }
body[data-theme="compact"] .trend-label { font-size: 9px; }

/* ================= 转盘单功能（管理设置 / 老板转盘 / 大厅展示） ================= */
.tag-wheel { background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; font-weight:700; }
.hall-card.wheel-card { border:1.5px solid #fcd34d; box-shadow:0 6px 22px rgba(245,158,11,.18); }

/* ---- 管理员：转盘设置列表 ---- */
.wheel-admin-list { display:flex; flex-direction:column; gap:14px; }
.wheel-admin-card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; border:1px solid var(--border); }
.wheel-admin-card.off { opacity:.65; }
.wac-head { display:flex; align-items:center; gap:14px; }
.wac-cover { width:72px; height:72px; border-radius:12px; overflow:hidden; flex:none; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#7c3aed,#a855f7); }
.wac-cover img { width:100%; height:100%; object-fit:cover; }
.wac-icon { font-size:34px; }
.wac-meta { flex:1; min-width:0; }
.wac-name { font-size:16px; font-weight:800; display:flex; align-items:center; gap:8px; }
.wac-sub { font-size:12.5px; color:var(--text-light); margin-top:5px; }
.wac-ops { display:flex; gap:6px; flex:none; }
.wac-segs { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--border); }
.wac-seg { width:86px; text-align:center; }
.wac-seg-img { width:56px; height:56px; margin:0 auto 6px; border-radius:10px; overflow:hidden; background:var(--primary-light);
  display:flex; align-items:center; justify-content:center; font-size:26px; }
.wac-seg-img img { width:100%; height:100%; object-fit:cover; }
.wac-seg-name { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wac-seg-pct { font-size:12px; color:var(--orange); font-weight:700; margin-top:2px; }

/* ---- 管理员：方格编辑行 ---- */
.wseg-edit-head { display:flex; align-items:center; justify-content:space-between; margin:16px 0 10px; }
.wseg-edit-head label { font-weight:700; font-size:13.5px; }
.wseg-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.wseg-imgbox { width:52px; height:52px; flex:none; border-radius:10px; border:2px dashed #d1d5db; overflow:hidden; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:#f9fafb; }
.wseg-img-preview { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }

/* ================= 充值：步骤条（补充） ================= */
.steps { display: flex; align-items: flex-start; margin: 6px 0 18px; }
.step { flex: 0 0 auto; width: 64px; text-align: center; font-size: 12px; color: var(--text-light); }
.step b { display: flex; width: 26px; height: 26px; margin: 0 auto 6px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary-dark); align-items: center; justify-content: center; font-size: 13px; }
.step-line { flex: 1; height: 2px; background: var(--border); margin-top: 12px; min-width: 16px; }

/* 暗色主题：充值相关浅底块（收款码/付款码图片保持白底以便扫码） */
body[data-theme="dark"] .rc-paypane { background: rgba(168,85,247,.06); border-color: rgba(168,85,247,.15); }
body[data-theme="dark"] .bank-row { background: transparent; border-color: rgba(168,85,247,.15); }
body[data-theme="dark"] .qr-channel { background: rgba(22,22,38,.6); }
body[data-theme="dark"] .qr-channel.on { background: rgba(124,58,237,.12); }
body[data-theme="dark"] .qr-preview,
body[data-theme="dark"] .uv-thumb { background: rgba(15,15,25,.6); border-color: rgba(168,85,247,.25); }
body[data-theme="dark"] .rc-detail .voucher-box { background: rgba(168,85,247,.06); border-color: rgba(168,85,247,.2); }
.wseg-img-preview img { width:100%; height:100%; object-fit:cover; }

/* ================= 数据概览：导出 / 清理 + 顶栏返回按钮 ================= */
.btn-back { flex:none; width:30px; height:30px; margin-right:8px; border-radius:8px;
  border:1px solid var(--border); background:var(--primary-light, #ede9fe); color:var(--primary-dark);
  font-size:15px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.btn-back:hover { filter: brightness(.96); }

.dash-tools { display:flex; justify-content:flex-end; gap:10px; margin:-6px 0 14px; }

.export-list { display:flex; flex-direction:column; gap:10px; }
.export-item { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px !important; border:1px solid var(--border) !important; border-radius:10px;
  background:var(--bg); font-size:14px !important; text-align:left; }
.export-item:hover { border-color:var(--primary) !important; background:var(--primary-light) !important; }
.export-sub { color:var(--text-light); font-size:11px; }

.clean-warn { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; border-radius:10px;
  padding:10px 12px; font-size:12px; margin-bottom:12px; }
.clean-list { display:flex; flex-direction:column; gap:8px; max-height:46vh; overflow-y:auto; }
.clean-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--border);
  border-radius:10px; cursor:pointer; }
.clean-item:hover { border-color:var(--primary); }
.clean-item input { width:16px; height:16px; accent-color:var(--red); flex:none; }
.clean-main { display:flex; flex-direction:column; gap:2px; flex:1; font-size:13px; }
.clean-sub { color:var(--text-light); font-size:11px; }
.clean-count { color:var(--text-light); font-size:12px; flex:none; }

/* 暗色主题适配 */
body[data-theme="dark"] .btn-back { background:rgba(124,58,237,.18); border-color:rgba(168,85,247,.3); color:#c4b5fd; }
body[data-theme="dark"] .export-item { background:rgba(22,22,38,.6); }
body[data-theme="dark"] .clean-warn { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); color:#fca5a5; }
body[data-theme="dark"] .clean-item { background:rgba(22,22,38,.6); }
.wseg-img-emoji { font-size:24px; color:#9ca3af; }

/* ================= 充值功能（人工审核收款码模式） ================= */
/* ---- 老板端：充值中心 ---- */
.rc-panel { border-top:3px solid var(--primary); }
.rc-promise { float:right; font-size:11.5px; font-weight:600; color:var(--orange); background:#fff7ed; border:1px solid #fed7aa; border-radius:999px; padding:2px 10px; }
.rc-label { display:block; font-weight:700; font-size:13.5px; margin:14px 0 8px; }
.rc-quick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; }
.rc-quick { text-align:center; padding:10px 4px; border:1.5px solid var(--border); border-radius:10px; font-size:15px; font-weight:700; cursor:pointer;
  background:#fff; transition:all .15s; user-select:none; }
.rc-quick:hover { border-color:var(--primary); }
.rc-quick.sel { border-color:var(--primary); background:var(--primary-light); color:var(--primary-dark); box-shadow:0 0 0 2px rgba(124,58,237,.12); }
.pay-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.pay-tab { padding:8px 18px; border:1.5px solid var(--border); border-radius:999px; font-size:13.5px; cursor:pointer; background:#fff;
  display:flex; align-items:center; gap:6px; transition:all .15s; user-select:none; }
.pay-tab:hover { border-color:var(--primary); }
.pay-tab.active { border-color:var(--primary); background:var(--primary-light); color:var(--primary-dark); font-weight:700; }
.rc-paypane { margin-top:12px; border:1.5px solid var(--border); border-radius:var(--radius); padding:16px; background:#faf9fe; }
.qr-pay-box { display:flex; flex-direction:column; align-items:center; gap:8px; }
.qr-pay-img { width:180px; height:180px; object-fit:cover; border-radius:12px; border:1px solid var(--border); background:#fff; cursor:zoom-in; }
.qr-pay-amount { font-size:13.5px; color:var(--text-light); }
.qr-pay-amount b { font-size:20px; color:var(--red); margin:0 4px; }
.qr-payee { text-align:center; font-size:13px; margin-top:6px; }
.rc-tip-text { font-size:12.5px; color:var(--text-light); margin-top:10px; line-height:1.6; }
.rc-amount-inline { color:var(--red); }
.rc-amount-echo { font-size:12.5px; color:var(--text-light); margin-top:4px; }
.upload-voucher { display:inline-block; cursor:pointer; }
.uv-thumb { width:110px; height:110px; border:2px dashed #d1d5db; border-radius:12px; background:#f9fafb; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; transition:border-color .15s; }
.upload-voucher:hover .uv-thumb { border-color:var(--primary); }
.uv-thumb img { width:100%; height:100%; object-fit:cover; }
.uv-plus { font-size:26px; color:#c4b5fd; font-weight:300; line-height:1; }
.uv-text { font-size:11px; color:#9ca3af; }
.rc-submit { width:100%; margin-top:16px; padding:11px; font-size:15px; }
.rc-history { margin-top:4px; }
.bank-pay-info { display:flex; flex-direction:column; gap:8px; }
.bank-row { display:flex; align-items:center; gap:10px; font-size:13.5px; background:#fff; border:1px solid var(--border); border-radius:10px; padding:9px 12px; }
.bank-row span { width:70px; flex:none; color:var(--text-light); font-size:12.5px; }
.bank-row b { font-family:Consolas, monospace; letter-spacing:.5px; }
.voucher-thumb { width:44px; height:44px; object-fit:cover; border-radius:6px; border:1px solid var(--border); cursor:zoom-in; }

/* ---- 管理员：平台设置 · 收款码配置 ---- */
.qr-config-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; margin-top:12px; }
.qr-channel { border:1.5px solid var(--border); border-radius:var(--radius); padding:12px 14px; transition:all .2s; background:#fff; }
.qr-channel.on { border-color:var(--primary); background:#faf9fe; }
.qr-toggle { font-size:13.5px; }
.qr-toggle b { flex:1; }
.qr-status { font-size:11.5px; color:var(--text-light); }
.qr-channel.on .qr-status { color:var(--primary); font-weight:700; }
.qr-channel-body { display:flex; gap:12px; margin-top:10px; align-items:flex-start; }
.qr-preview { width:110px; height:110px; flex:none; border:2px dashed #d1d5db; border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:#f9fafb; }
.qr-preview img { width:100%; height:100%; object-fit:cover; }
.qr-empty { font-size:11px; color:#9ca3af; text-align:center; line-height:1.5; }
.qr-fields { display:flex; flex-direction:column; gap:8px; flex:1; min-width:0; }
.qr-fields input { padding:7px 10px; border:1px solid var(--border); border-radius:8px; font-size:13px; width:100%; }
.qr-btns { display:flex; gap:8px; }
.qr-hint { font-size:11px; color:var(--text-light); }
.bank-fields { flex-direction:column; align-items:stretch; }
.bank-fields input { width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:8px; font-size:13px; }

/* ---- 客服/管理员：充值审核详情弹窗 ---- */
.rc-detail { min-width:520px; max-width:640px; }
.rc-detail .detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin-bottom:14px; }
.rc-detail .detail-item { display:flex; flex-direction:column; gap:2px; }
.rc-detail .detail-item .dl { font-size:11.5px; color:var(--text-light); }
.rc-detail .detail-item b { font-size:13.5px; word-break:break-all; }
.rc-detail .voucher-box { border:1px dashed var(--border); border-radius:var(--radius); padding:12px; text-align:center; background:#faf9fe; }
.rc-detail .voucher-label { font-size:12px; color:var(--text-light); margin-bottom:8px; }
.rc-detail .voucher-large { max-width:100%; max-height:320px; border-radius:8px; cursor:zoom-in; }
.wseg-icon { width:54px; flex:none; text-align:center; }
.wseg-name { flex:1; min-width:0; }
.wseg-weight { width:86px; flex:none; }
.wseg-pct { width:50px; flex:none; text-align:center; font-size:12.5px; font-weight:700; color:var(--orange); }
.wseg-del { flex:none; }

/* ---- 老板端：转盘商店 ---- */
.wheel-hero { background:linear-gradient(135deg,#4c1d95 0%,#7c3aed 55%,#f59e0b 160%); border-radius:16px; padding:26px 24px; color:#fff; margin-bottom:18px;
  box-shadow:0 8px 26px rgba(124,58,237,.3); }
.wheel-hero-title { font-size:22px; font-weight:800; }
.wheel-hero-sub { font-size:13px; opacity:.92; margin-top:8px; line-height:1.7; }
.wheel-shop { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; }
.wheel-shop-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border);
  display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
.wheel-shop-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(124,58,237,.18); }
.wsc-cover { position:relative; height:130px; background:linear-gradient(135deg,#7c3aed,#f59e0b); overflow:hidden; }
.wsc-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wsc-cover-mask { position:absolute; inset:0; background:linear-gradient(180deg,rgba(30,27,46,.15) 0%,rgba(30,27,46,.72) 100%); }
.wsc-cover-txt { position:absolute; left:16px; bottom:12px; right:16px; color:#fff; }
.wsc-cover-txt b { font-size:18px; font-weight:800; display:block; }
.wsc-cover-txt small { font-size:11.5px; opacity:.85; }
.wsc-icon { font-size:26px; margin-right:6px; }
.wsc-segs { display:flex; flex-wrap:wrap; gap:8px; padding:14px; flex:1; align-content:flex-start; }
.wsc-seg { width:60px; text-align:center; font-size:11px; color:var(--text-light); }
.wsc-seg-img { width:46px; height:46px; border-radius:10px; background:var(--primary-light); margin:0 auto 4px;
  display:flex; align-items:center; justify-content:center; font-size:22px; overflow:hidden; }
.wsc-seg-img img { width:100%; height:100%; object-fit:cover; }
.wsc-seg span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wsc-seg.more { display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:10px;
  border:1.5px dashed var(--border); color:var(--text-light); font-weight:700; }
.wsc-foot { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-top:1px solid var(--border); }
.wsc-price b { font-size:20px; color:var(--orange); margin:0 2px; }
.wsc-price small { display:block; font-size:11px; color:var(--text-light); }

/* ---- 老板端：转盘动画弹窗 ---- */
.modal.wheel-modal { width:440px; }
.wheel-stage { position:relative; width:min(360px,82vw); height:min(360px,82vw); margin:6px auto 0; }
.wheel-disk { width:100%; height:100%; border-radius:50%; position:relative;
  box-shadow:0 0 0 7px #f59e0b, 0 0 0 11px #fde68a, 0 14px 34px rgba(124,58,237,.4);
  will-change:transform; }
.wheel-disk canvas { width:100%; height:100%; display:block; border-radius:50%; }
.wheel-pointer { position:absolute; top:-8px; left:50%; transform:translateX(-50%); z-index:6;
  border-left:13px solid transparent; border-right:13px solid transparent; border-top:28px solid #ef4444;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.3)); }
.wheel-hub { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5;
  width:86px; height:86px; border-radius:50%; border:4px solid #fff; line-height:1.25; font-size:12.5px; color:#7c2d12;
  background:radial-gradient(circle at 35% 28%,#fef3c7,#f59e0b 70%); font-weight:800;
  box-shadow:0 5px 16px rgba(0,0,0,.35); transition:filter .2s; }
.wheel-hub b { font-size:15px; }
.wheel-hub:hover:not(:disabled) { filter:brightness(1.06); }
.wheel-stage-tip { text-align:center; font-size:12.5px; color:var(--text-light); margin:14px 0 4px; }
.wheel-result { display:none; margin-top:10px; }
.wheel-result-pop { text-align:center; background:linear-gradient(180deg,#fffbeb,#fff); border:1.5px solid #fcd34d;
  border-radius:14px; padding:18px 16px; animation:pop .3s ease; }
.wrp-title { font-size:16px; font-weight:800; color:#b45309; }
.wrp-img { width:88px; height:88px; margin:12px auto; border-radius:16px; overflow:hidden; background:var(--primary-light);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(245,158,11,.3); }
.wrp-img img { width:100%; height:100%; object-fit:cover; }
.wrp-emoji { font-size:48px; }
.wrp-name { font-size:20px; font-weight:800; margin-bottom:8px; }
.wrp-desc { font-size:12.5px; color:var(--text-light); line-height:1.7; }
.wrp-ops { display:flex; gap:10px; justify-content:center; margin-top:14px; }

/* ---- 大厅 / 订单卡片：转盘结果条 ---- */
.hall-wheel-result, .my-wheel-result { display:flex; align-items:center; gap:10px; margin-top:10px;
  padding:9px 12px; border-radius:10px; background:linear-gradient(90deg,#fffbeb,#fef3c7);
  border:1px solid #fde68a; font-size:13px; }
.hwr-label { color:#b45309; font-weight:700; flex:none; }
.hwr-img { width:34px; height:34px; border-radius:8px; overflow:hidden; background:#fff; flex:none;
  display:inline-flex; align-items:center; justify-content:center; font-size:18px; }
.hwr-img img { width:100%; height:100%; object-fit:cover; }
.hwr-img.sm { width:26px; height:26px; font-size:15px; vertical-align:middle; }
.hall-wheel-result b { color:#92400e; }
.wheel-result-chip { display:inline-flex; align-items:center; gap:8px; }
.wheel-result-chip img { width:34px; height:34px; border-radius:8px; object-fit:cover; border:1px solid var(--border); }