/* SW 包网 商户后台 · 预览专属 v3 皮肤（仅 preview.html 引用）。叠加在 merchant-ui-v2.css 之上。 */
html body.mui {
color: #1f1840;
background:
linear-gradient(135deg, #f6f4ff 0%, #eef1ff 45%, #f4ecff 100%) fixed;
-webkit-font-smoothing: antialiased;
}
/* ---------- 共用装饰 ---------- */
html body.mui .mui-ribbon { filter: none; background: none; z-index: 0; pointer-events: none; }
html body.mui .mui-gem, html body.mui .mui-gem-sm {
flex: none; color: transparent; font-size: 0; box-shadow: none; border-radius: 0;
background: url(/preview-v3/logo-s.svg) center / contain no-repeat;
filter: drop-shadow(0 8px 14px rgba(99, 102, 241, .22));
}
/* 小尺寸用折面合并的简化版，避免糊成一团 */
/* 侧栏品牌：按设计稿 02 的缎带折叠版（含 390 展开菜单） */
html body.mui .mui-gem-sm { background-image: url(/preview-v3/logo-s-ribbon.svg); filter: drop-shadow(0 3px 6px rgba(99, 102, 241, .16)); }
/* ---------- 登录页 ---------- */
html body.mui .login {
overflow: hidden;
background: url(/preview-v3/ribbons-login.svg) center / cover no-repeat;
padding: 40px 56px;
}
html body.mui .login .mui-ribbon.a,
html body.mui .login .mui-ribbon.b {
position: absolute; display: block; filter: drop-shadow(0 10px 18px rgba(124, 92, 246, .25));
background: url(/preview-v3/crystal-small.svg) center / contain no-repeat;
}
html body.mui .login .mui-ribbon.a { top: 22%; left: calc(50% - 30px); right: auto; width: 54px; height: 64px; transform: rotate(-18deg); }
html body.mui .login .mui-ribbon.b { bottom: 14%; top: auto; left: calc(50% + 70px); width: 40px; height: 48px; transform: rotate(14deg); }
html body.mui .login .mui-ribbon.c {
display: block; position: absolute; top: calc(50% - 110px); left: calc(50% - 170px);
width: 190px; height: 300px;
background: url(/preview-v3/crystal-cluster.svg) center / contain no-repeat;
filter: drop-shadow(0 26px 34px rgba(99, 102, 241, .30));
}
html body.mui .mui-login { width: min(1200px, 100%); grid-template-columns: minmax(0, 1fr) minmax(400px, 500px); gap: 80px; }
html body.mui .mui-hero { align-self: center; margin-top: -60px; }
html body.mui .mui-mark { gap: 22px; font-size: 46px; line-height: 1; font-weight: 800; letter-spacing: 1px;
background: linear-gradient(90deg, #4f6bff, #7c5cf6 60%, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; }
html body.mui .mui-gem { width: 80px; height: 118px; }
html body.mui .mui-hero h1 { margin: 30px 0 14px; font-size: 54px; font-weight: 800; letter-spacing: 4px; color: #120d2e; }
html body.mui .mui-hero p { font-size: 20px; letter-spacing: 2px; color: #5c5676; }
html body.mui .mui-panel {
position: relative;
background: rgba(255, 255, 255, .52);
-webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
border: 1px solid rgba(255, 255, 255, .9);
border-radius: 24px;
padding: 48px 46px 30px;
box-shadow: 0 30px 60px rgba(91, 70, 232, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
}
html body.mui .mui-panel h2 { font-size: 32px; font-weight: 800; color: #120d2e; letter-spacing: .5px; }
html body.mui .mui-panel .sub { margin: 10px 0 34px; font-size: 17px; letter-spacing: 2px; color: #6b6487; }
html body.mui .mui-field { margin-bottom: 22px; }
html body.mui .mui-field label { margin: 0 0 10px; font-size: 14px; font-weight: 650; color: #1f1840; }
html body.mui .mui-input > i { left: 16px; top: 17px; width: 20px; height: 20px; color: #6b6487; }
html body.mui .mui-input > i svg { width: 20px; height: 20px; stroke-width: 1.7; }
html body.mui .mui-field input {
height: 54px; border-radius: 10px; font-size: 15px; padding: 0 16px 0 48px;
background: rgba(255, 255, 255, .88); border: 1px solid rgba(203, 196, 236, .9);
transition: border-color .15s, box-shadow .15s;
}
html body.mui .mui-field input::placeholder { color: #9a94b3; }
html body.mui .mui-field input:focus { outline: none; border-color: #8b7cf6; box-shadow: 0 0 0 4px rgba(139, 124, 246, .16); background: #fff; }
html body.mui .mui-pass input { padding-right: 52px; }
html body.mui .mui-pass .eye {
top: 13px; right: 12px; width: 28px; height: 28px; padding: 0; font-size: 0; color: transparent;
background: url(/preview-v3/eye.svg) center / 20px no-repeat;
}
html body.mui #login-pass[type="text"] ~ .eye { background-image: url(/preview-v3/eye-off.svg); }
html body.mui .mui-login .primary.full {
height: 54px; margin-top: 12px; border-radius: 10px; font-size: 17px; font-weight: 650; letter-spacing: 2px;
display: flex; align-items: center; justify-content: center; gap: 12px;
background: linear-gradient(90deg, #5b7cfa 0%, #7c6cf6 55%, #8b5cf6 100%);
box-shadow: 0 12px 24px rgba(108, 92, 246, .24);
}
html body.mui .mui-login .primary.full:hover { filter: brightness(1.05); }
html body.mui .mui-arrow { width: 20px; height: 20px; display: inline-block; background: url(/preview-v3/arrow.svg) center / contain no-repeat; }
html body.mui .mui-panel .msg { margin: 0; min-height: 0; }
html body.mui .mui-panel .msg:not(:empty) { margin: -6px 0 6px; color: #e5484d; font-size: 13px; }
html body.mui .mui-foot {
display: flex; align-items: center; gap: 14px; margin: 22px 0 4px;
color: #8a84a3; font-size: 12px; letter-spacing: .5px;
}
html body.mui .mui-foot::before, html body.mui .mui-foot::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #d9d3ee); }
html body.mui .mui-foot::after { background: linear-gradient(90deg, #d9d3ee, transparent); }
html body.mui .manage { margin-top: 4px; font-size: 12px; color: #8a84a3; }
html body.mui .manage:hover { color: #6d5efc; }
/* ---------- 后台框架 ---------- */
html body.mui .app { grid-template-columns: 252px minmax(0, 1fr); background: transparent; }
html body.mui .app > .mui-ribbon { position: fixed; display: block; }
html body.mui .app > .mui-ribbon.a { top: -30px; right: -40px; left: auto; bottom: auto; width: 720px; height: 260px; background: url(/preview-v3/ribbon-corner.svg) center / contain no-repeat; opacity: .9; }
html body.mui .app > .mui-ribbon.b { bottom: -40px; left: -60px; top: auto; right: auto; width: 520px; height: 200px; background: url(/preview-v3/ribbon-corner.svg) center / contain no-repeat; transform: scaleX(-1) rotate(160deg); opacity: .75; }
html body.mui .app > .mui-ribbon.c { display: none; }
html body.mui .app > aside {
margin: 16px 0 16px 16px; height: calc(100vh - 32px); top: 16px;
background: rgba(255, 255, 255, .58);
-webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
border: 1px solid rgba(255, 255, 255, .9); border-radius: 20px;
box-shadow: 0 18px 40px rgba(91, 70, 232, .08);
padding: 22px 12px 14px; z-index: 2;
}
html body.mui .brand-lockup { gap: 20px; align-items: center; padding: 2px 12px 20px; }
html body.mui .mui-gem-sm { width: 39px; height: 57px; }
html body.mui .brand-name { font-size: 21px; line-height: 1; font-weight: 800; letter-spacing: .5px; color: #1f1840; }
html body.mui nav { gap: 4px; }
html body.mui .nav-btn { position: relative; padding: 11px 14px; font-size: 15px; color: #2e2650; border-radius: 12px; transition: background .15s; }
html body.mui .nav-btn:hover { background: rgba(124, 108, 246, .07); }
html body.mui .mui-nav { gap: 12px; }
html body.mui .mui-ico { width: 19px; height: 19px; stroke-width: 1.7; color: #4b4470; }
html body.mui .nav-btn.active { background: linear-gradient(90deg, rgba(124, 108, 246, .16), rgba(124, 108, 246, .06)); color: #4c3fd6; font-weight: 700; }
html body.mui .nav-btn.mui-nav.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #5b7cfa, #8b5cf6); }
html body.mui .nav-btn.active .mui-ico { color: #5b46e8; }
html body.mui .nav-drop { padding-left: 30px; display: flex; flex-direction: column; gap: 2px; }
html body.mui .nav-drop .nav-btn { padding: 8px 12px; font-size: 13.5px; color: #5c5678; }
html body.mui .nav-drop .nav-btn.active { background: rgba(124, 108, 246, .1); }
html body.mui #logout { color: #6b6487; }
html body.mui .main { position: relative; z-index: 1; padding: 0 32px 40px 28px; }
html body.mui header { position: absolute; top: 26px; right: 32px; height: auto; z-index: 3; }
html body.mui .who {
gap: 10px; padding: 6px 14px 6px 8px; border-radius: 16px;
background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .95);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
box-shadow: 0 8px 22px rgba(91, 70, 232, .08);
}
html body.mui .purse { gap: 6px; margin-right: 4px; font-size: 12px; color: #6b6487; }
html body.mui .purse span { display: inline-flex; align-items: baseline; gap: 4px; padding: 5px 10px; border-radius: 10px; background: rgba(124, 108, 246, .08); }
html body.mui .purse b { color: #1f1840; font-size: 14px; margin-left: 0; font-weight: 750; }
html body.mui .avatar { width: 32px; height: 32px; font-size: 14px; background: linear-gradient(145deg, #a5b4fc, #7c5cf6); }
html body.mui .who > div:last-child b { font-size: 14px; }
html body.mui .workspace.single { padding-top: 30px; }
/* 页面标题 */
html body.mui .mui-page-head { min-height: 64px; padding-right: 380px; }
html body.mui .mui-page-head h1 { font-size: 34px; font-weight: 800; letter-spacing: 1px; color: #120d2e; }
html body.mui .mui-page-head p { margin-top: 10px; font-size: 14.5px; color: #5c5676; }
/* 玻璃卡统一层级 */
html body.mui .mui-stat, html body.mui .mui-block, html body.mui .mui-room, html body.mui .card, html body.mui .stat {
background: rgba(255, 255, 255, .62);
-webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
border: 1px solid rgba(255, 255, 255, .95);
border-radius: 18px;
box-shadow: 0 14px 34px rgba(91, 70, 232, .07), inset 0 1px 0 rgba(255, 255, 255, .9);
}
/* ---------- 总览 ---------- */
html body.mui .mui-stats { gap: 18px; margin-top: 24px; }
html body.mui .mui-stat { position: relative; overflow: hidden; min-height: 150px; padding: 20px 22px; }
html body.mui .mui-stat::after { content: ""; position: absolute; right: 0; bottom: 0; width: 62%; height: 64%; background: url(/preview-v3/stat-wave.svg) right bottom / 100% 100% no-repeat; pointer-events: none; }
html body.mui .mui-stat:nth-child(1)::after { filter: hue-rotate(-60deg); }
html body.mui .mui-stat:nth-child(3)::after { filter: hue-rotate(40deg); }
html body.mui .mui-stat:nth-child(4)::after { filter: hue-rotate(-30deg); }
html body.mui .mui-stat > * { position: relative; z-index: 1; }
html body.mui .mui-stat-top { gap: 14px; }
html body.mui .dot { width: 46px; height: 46px; border-radius: 14px; background: center / contain no-repeat; box-shadow: 0 8px 16px rgba(91, 70, 232, .10); }
html body.mui .dot.a { background-image: url(/preview-v3/ico-usdt.svg); }
html body.mui .dot.b { background-image: url(/preview-v3/ico-quota.svg); }
html body.mui .dot.c { background-image: url(/preview-v3/ico-trade.svg); }
html body.mui .dot.d { background-image: url(/preview-v3/ico-member.svg); }
html body.mui .mui-stat-top span { font-size: 15px; font-weight: 700; color: #1f1840; }
html body.mui .mui-stat b { margin-top: 16px; font-size: 30px; font-weight: 800; letter-spacing: .3px; color: #120d2e; }
html body.mui .mui-stat small { margin-top: 8px; font-size: 13px; color: #6b6487; }
html body.mui .mui-split { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 18px; margin-top: 18px; }
html body.mui .mui-block { padding: 20px 22px; margin-top: 18px; }
html body.mui .mui-block h3 { font-size: 17px; font-weight: 800; color: #1f1840; }
html body.mui .mui-block-head { margin-bottom: 14px; }
html body.mui .mui-block-head .hint { padding: 3px 10px; border-radius: 8px; font-size: 12px; color: #8a84a3; background: rgba(124, 108, 246, .07); margin: 0; }
html body.mui .mui-split .mui-block { min-height: 300px; }
html body.mui .mui-empty {
height: 226px; border-radius: 12px; color: #8a84a3; font-size: 13px;
background:
repeating-linear-gradient(180deg, transparent 0 44px, rgba(124, 108, 246, .09) 44px 45px);
}
html body.mui .mui-ops { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
html body.mui .mui-ops li {
align-items: center; padding: 10px 14px 10px 12px; border: 0; border-radius: 14px;
background: rgba(246, 244, 255, .8); font-size: 14px; color: #2e2650;
}
html body.mui .mui-ops li span { display: inline-flex; align-items: center; gap: 14px; }
html body.mui .mui-ops li span::before { content: ""; width: 40px; height: 40px; flex: none; background: center / contain no-repeat; }
html body.mui .mui-ops li:nth-child(1) span::before { background-image: url(/preview-v3/ico-game.svg); }
html body.mui .mui-ops li:nth-child(2) span::before { background-image: url(/preview-v3/ico-ledger.svg); }
html body.mui .mui-ops li:nth-child(3) span::before { background-image: url(/preview-v3/ico-lottery.svg); }
html body.mui .mui-ops li:nth-child(4) span::before { background-image: url(/preview-v3/ico-tag.svg); }
html body.mui .mui-ops li b { font-size: 16px; font-weight: 800; color: #120d2e; }
html body.mui .mui-stats ~ .mui-block > .hint { margin: 0; padding: 28px 0; text-align: center; color: #8a84a3; }
/* 表格 */
html body.mui .mui-block table { border-collapse: separate; border-spacing: 0; }
html body.mui .mui-block thead th { background: rgba(240, 237, 255, .85); color: #5c5676; font-size: 13px; font-weight: 600; padding: 11px 14px; border: 0; }
html body.mui .mui-block thead th:first-child { border-radius: 10px 0 0 10px; }
html body.mui .mui-block thead th:last-child { border-radius: 0 10px 10px 0; }
html body.mui .mui-block td { padding: 13px 14px; font-size: 14px; color: #2e2650; border-bottom: 1px solid rgba(124, 108, 246, .08); }
html body.mui .mui-block tbody tr:last-child td { border-bottom: 0; }
html body.mui .mui-block tbody tr:hover td { background: rgba(124, 108, 246, .035); }
html body.mui .mui-block td[colspan] { text-align: center; color: #8a84a3; padding: 26px 0; }
/* 状态胶囊：总览动态(第 2 列类型、第 6 列状态)、彩票接口(第 4 列) */
html body.mui .mui-stats ~ .mui-block td:nth-child(2):not([colspan]),
html body.mui .mui-stats ~ .mui-block td:nth-child(6),
html body.mui .mui-rooms ~ .mui-block td:nth-child(4) {
white-space: nowrap;
}
html body.mui .mui-stats ~ .mui-block td:nth-child(6)::before,
html body.mui .mui-rooms ~ .mui-block td:nth-child(4)::before {
content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; vertical-align: middle;
background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .16);
}
html body.mui .mui-stats ~ .mui-block td:nth-child(6) { color: #15803d; font-size: 13px; }
/* 接口表状态取自房间状态（投注中/封盘/已开奖），CSS 无法按值着色，故用中性紫色圆点 */
html body.mui .mui-rooms ~ .mui-block td:nth-child(4) { color: #4c3fd6; font-size: 13px; }
html body.mui .mui-rooms ~ .mui-block td:nth-child(4)::before { background: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, .16); }
/* ---------- 游戏 / 彩票 ---------- */
html body.mui .mui-page-head + .mui-tabs { margin: 22px 0 18px; }
html body.mui .mui-tabs {
display: inline-flex; gap: 4px; padding: 5px; border-radius: 16px;
background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .95);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
box-shadow: 0 8px 22px rgba(91, 70, 232, .06);
}
html body.mui .mui-tabs button { position: relative; padding: 11px 34px; font-size: 15px; font-weight: 600; color: #4b4470; border-radius: 12px; cursor: pointer; }
html body.mui .mui-tabs button.on { background: #fff; color: #4c3fd6; font-weight: 750; box-shadow: 0 6px 16px rgba(91, 70, 232, .12); }
html body.mui .mui-tabs button.on::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 3px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #5b7cfa, #8b5cf6); }
html body.mui .mui-rooms { gap: 18px; }
html body.mui .mui-room { position: relative; overflow: hidden; gap: 12px; padding: 20px 18px 18px; cursor: pointer; transition: transform .15s, box-shadow .15s; font: inherit; }
html body.mui .mui-room:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(91, 70, 232, .12); }
html body.mui .mui-room h3 { order: -1; font-size: 19px; font-weight: 800; color: #120d2e; letter-spacing: .3px; }
html body.mui .mui-crystal { display: block; height: 116px; margin: -4px -6px 2px; border-radius: 0; background: url(/preview-v3/room-1.svg) center / contain no-repeat; filter: drop-shadow(0 12px 16px rgba(99, 102, 241, .18)); }
html body.mui .mui-room:nth-child(2) .mui-crystal { background-image: url(/preview-v3/room-2.svg); }
html body.mui .mui-room:nth-child(3) .mui-crystal { background-image: url(/preview-v3/room-3.svg); }
html body.mui .mui-room:nth-child(4n) .mui-crystal { background-image: url(/preview-v3/room-4.svg); }
html body.mui .mui-room-line { align-items: center; font-size: 13px; color: #5c5676; }
html body.mui .mui-room-line > span { flex: none; white-space: nowrap; }
html body.mui .mui-room-line b { font-weight: 600; color: #2e2650; }
html body.mui .mui-room-line b[data-st] { flex: 1; max-width: 65%; padding: 4px 10px; border-radius: 8px; font-size: 12.5px; color: #15803d; background: rgba(34, 197, 94, .09); display: inline-flex; align-items: center; gap: 6px; }
html body.mui .mui-room-line b[data-st]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
html body.mui .mui-room-line b[data-st="sealed"] { color: #b45309; background: rgba(245, 158, 11, .12); }
html body.mui .mui-room-line b[data-st="sealed"]::before { background: #f59e0b; }
html body.mui .mui-room-line b[data-st="drawn"] { color: #1d4ed8; background: rgba(59, 130, 246, .1); }
html body.mui .mui-room-line b[data-st="drawn"]::before { background: #3b82f6; }
html body.mui .mui-balls { display: inline-flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 3px; min-width: 0; }
html body.mui .mui-balls i { font-style: normal; min-width: 21px; height: 21px; padding: 0 3px; border-radius: 11px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #2e2650; background: #fff; border: 1px solid #e4def6; box-shadow: 0 2px 5px rgba(91, 70, 232, .08); }
html body.mui .mui-balls i.sum, html body.mui .mui-balls i.sp { color: #fff; border-color: transparent; background: linear-gradient(145deg, #7c8cfa, #8b5cf6); }
html body.mui .mui-balls em { font-style: normal; color: #8a84a3; font-size: 11px; margin: 0; }
html body.mui .mui-room-go {
display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; padding: 10px 12px;
border-radius: 999px; border: 1px solid rgba(203, 196, 236, .9); background: rgba(246, 244, 255, .7);
color: #4c3fd6; font-size: 14px; font-weight: 600;
}
html body.mui .mui-room-go::after { content: ""; width: 14px; height: 14px; background: url(/preview-v3/arrow-v.svg) center / contain no-repeat; }
html body.mui .mui-block-head .ghost { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #4c3fd6; font-weight: 600; padding: 6px 4px; }
html body.mui .mui-block-head .ghost::after { content: ""; width: 14px; height: 14px; background: url(/preview-v3/arrow-v.svg) center / contain no-repeat; }
html body.mui .mui-rooms ~ .mui-block > .hint { margin: -6px 0 12px; font-size: 12.5px; color: #8a84a3; }
html body.mui .ghost { border-radius: 10px; }
html body.mui .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
/* ---------- 移动端 ≤800px ---------- */
@media (max-width: 800px) {
html body.mui .login { padding: 28px 16px 32px; display: block; background-size: cover; background-position: 35% 60%; }
html body.mui .login .mui-ribbon.a, html body.mui .login .mui-ribbon.b { display: none; }
html body.mui .login .mui-ribbon.c { top: 18px; right: 18px; left: auto; width: 64px; height: 100px; opacity: .85; }
html body.mui .mui-login { grid-template-columns: 1fr !important; gap: 22px; width: 100%; }
html body.mui .mui-hero { margin-top: 6px; }
html body.mui .mui-mark { font-size: 28px; gap: 14px; }
html body.mui .mui-gem { width: 38px; height: 56px; background-image: url(/preview-v3/logo-s-sm.svg); }
html body.mui .mui-hero h1 { font-size: 30px; letter-spacing: 2px; margin: 16px 0 8px; }
html body.mui .mui-hero p { font-size: 15px; letter-spacing: 1px; }
html body.mui .mui-panel { padding: 28px 20px 18px; border-radius: 20px; }
html body.mui .mui-panel h2 { font-size: 24px; }
html body.mui .mui-panel .sub { margin: 6px 0 22px; font-size: 14px; }
html body.mui .mui-field { margin-bottom: 16px; }
html body.mui .mui-field input { height: 50px; font-size: 16px; }
html body.mui .mui-input > i { top: 15px; }
html body.mui .mui-pass .eye { top: 11px; }
html body.mui .app > .mui-ribbon.a { width: 420px; height: 150px; right: -120px; }
html body.mui .app > .mui-ribbon.b { display: none; }
html body.mui .app > aside { margin: 0; top: 0; height: 100vh !important; border-radius: 0 20px 20px 0; background: rgba(255, 255, 255, .92); z-index: 30; transition: transform .2s; }
html body.mui .app > aside.open { box-shadow: 0 0 0 100vmax rgba(31, 24, 64, .28); }
html body.mui .main { padding: 0 14px 28px; }
html body.mui header { position: sticky; top: 0; right: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 0 8px; margin: 0 -2px; }
html body.mui .mui-menu {
width: 42px; height: 42px; padding: 0; border-radius: 12px; font-size: 0; color: transparent; flex: none;
background: rgba(255, 255, 255, .75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c3fd6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10'/%3E%3C/svg%3E") center / 22px no-repeat;
border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 6px 16px rgba(91, 70, 232, .08);
}
html body.mui .who { padding: 4px 8px 4px 6px; gap: 6px; min-width: 0; }
html body.mui .purse { gap: 4px; margin-right: 0; }
html body.mui .purse span { padding: 4px 7px; font-size: 11px; }
html body.mui .purse b { font-size: 13px; }
html body.mui .avatar { width: 28px; height: 28px; }
html body.mui .who > div:last-child { display: none; }
html body.mui .workspace.single { padding-top: 8px; }
html body.mui .mui-page-head { padding-right: 0; min-height: 0; }
html body.mui .mui-page-head h1 { font-size: 26px; }
html body.mui .mui-page-head p { font-size: 13px; margin-top: 6px; }
html body.mui .mui-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; margin-top: 16px; }
html body.mui .mui-stat { min-height: 0; padding: 14px; border-radius: 16px; }
html body.mui .mui-stat-top { gap: 8px; }
html body.mui .dot { width: 34px; height: 34px; border-radius: 10px; }
html body.mui .mui-stat-top span { font-size: 13px; }
html body.mui .mui-stat b { margin-top: 12px; font-size: 22px; }
html body.mui .mui-stat small { font-size: 11.5px; }
html body.mui .mui-split { gap: 12px; margin-top: 12px; }
html body.mui .mui-split .mui-block { min-height: 0; }
html body.mui .mui-block { padding: 16px 14px; margin-top: 12px; border-radius: 16px; }
html body.mui .mui-empty { height: 120px; }
html body.mui .mui-ops li span::before { width: 34px; height: 34px; }
html body.mui .mui-block table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
html body.mui .mui-page-head + .mui-tabs { display: flex; margin: 16px 0 14px; }
html body.mui .mui-tabs button { flex: 1; padding: 10px 12px; }
html body.mui .mui-rooms { gap: 12px; }
html body.mui .mui-room { display: grid; grid-template-columns: minmax(0, 1fr) 120px; grid-template-rows: auto auto auto auto; column-gap: 10px; row-gap: 10px; padding: 16px 14px 14px; }
html body.mui .mui-room h3 { grid-column: 1; grid-row: 1; font-size: 17px; }
html body.mui .mui-crystal { grid-column: 2; grid-row: 1 / span 2; height: auto; min-height: 84px; margin: 0; }
html body.mui .mui-room-line { grid-column: 1; }
html body.mui .mui-room-line b[data-st] { max-width: none; flex: none; }
html body.mui .mui-room-go { grid-column: 1 / -1; margin-top: 2px; padding: 9px 12px; }
html body.mui .mui-room-line:last-of-type { grid-column: 1 / -1; }
html body.mui .fields { grid-template-columns: 1fr !important; }
html body.mui input, html body.mui select { font-size: 16px; }
}
@media (min-width: 801px) and (max-width: 1180px) {
html body.mui .mui-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html body.mui .mui-page-head { padding-right: 0; padding-top: 56px; }
}
/* ---------- 会员列表：参考紧凑表格排版（仅 .mui-members；只读，无写操作） ---------- */
html body.mui .workspace > div:has(> .mui-members) > h2.title { display: none; }
html body.mui nav.mui-crumb { flex-direction: row; overflow: visible; gap: 0; }
html body.mui .mui-crumb { display: flex; align-items: center; min-height: 22px; margin: 4px 0 14px; padding-right: 380px; font-size: 13px; color: #8a84a3; }
html body.mui .mui-crumb::before { content: ""; width: 14px; height: 14px; margin-right: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a84a3' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7v9H4z'/%3E%3C/svg%3E") center / contain no-repeat; }
html body.mui .mui-crumb span + span::before { content: "/"; margin: 0 8px; color: #c4bfd8; }
html body.mui .mui-crumb span:last-child { color: #2e2650; font-weight: 600; }
html body.mui .mui-mcount { margin: 0 0 10px; font-size: 13px; color: #606266; }
html body.mui .mui-mcount b { margin: 0 3px; font-weight: 800; color: #1f1840; }
html body.mui .mui-msel { margin-left: 14px; }
html body.mui .mui-mpage .mui-ttools { position: relative; }
html body.mui .mui-ticon.on { color: #7c6cf6; border-color: #cfc8fb; background: #f4f2ff; }
html body.mui .mui-ticon:disabled { opacity: .5; cursor: wait; }
html body.mui .mui-mcols { position: absolute; top: 34px; right: 0; z-index: 20; display: flex; flex-direction: column; gap: 6px; min-width: 150px; padding: 10px 12px; background: #fff; border: 1px solid #e4e6ef; border-radius: 6px; box-shadow: 0 8px 24px rgba(31, 24, 64, .12); font-size: 13px; color: #303133; }
html body.mui .mui-mcols p { margin: 0 0 2px; font-size: 12px; color: #909399; }
html body.mui .mui-mcols label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 400; color: #303133; cursor: pointer; white-space: nowrap; }
html body.mui .mui-mcols button { height: 26px; min-height: 26px; margin-top: 4px; padding: 0 10px; font-size: 12px; }
html body.mui .mui-mpage input[type="checkbox"] { width: 14px; height: 14px; min-height: 0; margin: 0; padding: 0; accent-color: #7c6cf6; box-shadow: none; cursor: pointer; }
html body.mui .mui-tlist .mui-mchk { width: 36px; padding-right: 0; }
html body.mui .mui-tlist tbody tr.picked td { background: rgba(124, 108, 246, .06); }
html body.mui .mui-mswitch { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 3px 0 8px; border-radius: 10px; background: #c0c4cc; color: #fff; font-size: 12px; line-height: 1; cursor: default; user-select: none; }
html body.mui .mui-mswitch em { font-style: normal; }
html body.mui .mui-mswitch i { width: 14px; height: 14px; border-radius: 50%; background: #fff; }
html body.mui .mui-mswitch:not(.on) { flex-direction: row-reverse; padding: 0 8px 0 3px; }
html body.mui .mui-mswitch.on { background: #7c6cf6; }
html body.mui .mui-mops { white-space: nowrap; }
html body.mui .mui-mlink { height: auto; min-height: 0; margin: 0 12px 0 0; padding: 0; border: 0; background: none; box-shadow: none; color: #6a5af0; font-size: 12px; font-weight: 500; cursor: pointer; }
html body.mui .mui-mlink:hover { color: #4a39d8; text-decoration: underline; }
html body.mui .mui-tpager select { width: auto; height: 28px; min-height: 28px; padding: 0 8px; border: 1px solid #e4e6ef; border-radius: 4px; background: #fff; font-size: 12px; color: #606266; }
html body.mui .mui-bfilter { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 13px; color: #606266; }
html body.mui .mui-bfilter button { height: 26px; min-height: 26px; padding: 0 10px; font-size: 12px; }
@media (max-width: 800px) {
html body.mui .mui-crumb { padding-right: 0; margin: 2px 0 10px; font-size: 12px; }
html body.mui .mui-tbar { flex-wrap: wrap; }
html body.mui .mui-tpager { flex-wrap: wrap; }
}
/* ---------- 转账记录：参考图排版（仅 .mui-transfers；字段以现有 /games/playlist 为准） ---------- */
html body.mui .mui-tlist { margin-top: 0; padding: 16px 20px 14px; }
html body.mui .mui-tlist > h3 { margin: 0 0 14px; padding-bottom: 12px; font-size: 16px; font-weight: 700; border-bottom: 1px solid rgba(124, 108, 246, .1); }
html body.mui .mui-tfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
html body.mui .mui-tfilter input { width: 220px; height: 32px; padding: 0 10px; border: 1px solid #e4e6ef; border-radius: 4px; background: #f5f6fa; font-size: 13px; color: #303133; box-shadow: none; }
html body.mui .mui-tfilter input:focus { outline: none; border-color: #7c6cf6; background: #fff; }
html body.mui .mui-tf-actions { display: flex; gap: 8px; margin-left: auto; }
html body.mui .mui-tf-actions button { height: 32px; min-height: 32px; padding: 0 16px; font-size: 13px; border-radius: 4px; }
html body.mui .mui-tbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
html body.mui .mui-tbar .mui-mcount { margin: 0; }
html body.mui .mui-ttools { display: flex; gap: 6px; }
html body.mui .mui-ticon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; min-height: 28px; padding: 0; border: 1px solid #e4e6ef; border-radius: 4px; background: #fff; color: #606266; box-shadow: none; cursor: pointer; }
html body.mui .mui-ticon:hover { color: #7c6cf6; border-color: #cfc8fb; }
html body.mui .mui-twrap { overflow-x: auto; }
html body.mui .mui-tlist table { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 13px; }
html body.mui .mui-tlist thead th {
height: 38px; padding: 0 12px; border-radius: 0 !important; border: 0; border-bottom: 1px solid #ebeef5;
background: rgba(245, 246, 250, .95); color: #4b4470; font-size: 13px; font-weight: 600; text-align: left; vertical-align: middle; white-space: nowrap;
}
html body.mui .mui-tlist tbody td { height: 36px; padding: 0 12px; font-size: 13px; line-height: 1.3; color: #303133; vertical-align: middle; border-bottom: 1px solid #eef0f5; background: transparent; white-space: nowrap; }
html body.mui .mui-tlist tbody tr:hover td { background: rgba(245, 247, 250, .9); }
html body.mui .mui-tlist .mui-tseq { width: 64px; color: #606266; }
html body.mui .mui-tlist td.mui-tid { max-width: 170px; }
html body.mui .mui-tlist td.mui-tid span { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.mui .mui-tlist td.mui-tnum { font-variant-numeric: tabular-nums; }
html body.mui .mui-tlist tbody td[colspan] { height: 72px; text-align: center; color: #909399; }
html body.mui .mui-tpager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; font-size: 13px; color: #606266; }
html body.mui .mui-tpager button { height: 28px; min-height: 28px; padding: 0 12px; font-size: 12px; border-radius: 4px; }
@media (max-width: 800px) {
html body.mui .mui-tlist { padding: 14px 12px 10px; }
html body.mui .mui-tlist > h3 { font-size: 15px; margin-bottom: 10px; padding-bottom: 10px; }
html body.mui .mui-tfilter input { width: 100%; flex: 1 1 100%; }
html body.mui .mui-tf-actions { margin-left: 0; }
html body.mui .mui-tlist thead th, html body.mui .mui-tlist tbody td { padding: 0 10px; }
html body.mui .mui-tlist .mui-tseq { width: 44px; }
}