:root{
--bg:linear-gradient(160deg,#eaf0ff 0%,#f6f0ff 55%,#fff4f8 100%);
--panel:#ffffff; --panel2:#f1f4fb; --line:#e3e8f2;
--text:#1f2533; --sub:#8a93a8; --brand:#7c5cff; --brand2:#ff5a8a;
--ok:#22c55e; --green:#12b886; --red:#ff4d4f;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
font-size:15px;max-width:480px;margin:0 auto;}
#app{position:relative;min-height:100vh;background:var(--bg);overflow-x:hidden}
.view{min-height:100vh}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer;border:none;outline:none}
input{font-family:inherit;outline:none}
/* ===== 登录/注册 ===== */
/* ===== 登录/注册（任务六十二：轻奢版）===== */
.view-auth{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px 22px;
min-height:100vh;
background:
radial-gradient(120% 70% at 50% -10%,#fdf6ea 0%,rgba(253,246,234,0) 62%),
radial-gradient(90% 60% at 100% 100%,#f6efe4 0%,rgba(246,239,228,0) 58%),
linear-gradient(180deg,#fbf7f0 0%,#f9f5ee 55%,#faf8f4 100%)}
.auth-brand{text-align:center;margin-bottom:24px}
.auth-logo{font-size:40px;font-weight:700;letter-spacing:8px;font-family:"Didot","Times New Roman",Georgia,"Songti SC",serif;
background:linear-gradient(118deg,#b98b4e 0%,#e8cfa8 42%,#c9a063 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;text-indent:8px}
.auth-sub{color:#a99e8f;margin:9px 0 0;font-size:11.5px;letter-spacing:.24em}
.auth-card{width:100%;max-width:390px;background:#fff;border:1px solid #ece4d8;border-radius:22px;
padding:20px 18px 16px;box-sizing:border-box;
box-shadow:0 26px 60px -34px rgba(41,35,26,.42),0 1px 0 rgba(255,255,255,.9) inset}
.auth-tabs{display:flex;gap:4px;padding:4px;margin-bottom:16px;background:#f7f2ea;border-radius:12px}
.atab{flex:1;padding:9px;border:none;border-radius:9px;background:transparent;color:#a99e8f;font-weight:600;
font-size:14px;letter-spacing:.06em;font-family:inherit;transition:background .18s,color .18s}
.atab.active{background:#fff;color:#2b2c32;box-shadow:0 2px 8px -4px rgba(41,35,26,.4)}
.auth-form{display:flex;flex-direction:column;gap:10px}
.auth-form input{padding:0 14px;height:48px;border-radius:12px;border:1px solid #e8e0d4;background:#fbf8f3;
color:#2b2c32;font-size:15px;font-family:inherit;transition:border-color .16s,background .16s,box-shadow .16s}
.auth-form input::placeholder{color:#b6ac9f}
.auth-form input:focus{outline:none;border-color:#d8bc8c;background:#fff;box-shadow:0 0 0 3px rgba(201,160,99,.14)}
.btn-primary{margin-top:6px;height:50px;border:none;border-radius:12px;color:#f2e2c4;font-weight:700;font-size:15.5px;
letter-spacing:.18em;text-indent:.18em;font-family:inherit;
background:linear-gradient(135deg,#3a3b43 0%,#202127 55%,#141519 100%);
box-shadow:0 14px 26px -16px rgba(20,21,25,.85);transition:transform .14s,opacity .14s}
.btn-primary:active{transform:translateY(1px);opacity:.92}
/* 其他登录方式 */
.auth-alt{margin-top:18px}
.auth-alt-line{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.auth-alt-line i{flex:1;height:1px;background:linear-gradient(90deg,rgba(232,224,212,0),#e8e0d4,rgba(232,224,212,0))}
.auth-alt-line span{font-size:10px;letter-spacing:.18em;color:#b6ac9f;white-space:nowrap}
.auth-ways{display:flex;gap:8px}
.auth-way{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;
padding:12px 4px 10px;border-radius:14px;border:1px solid #eee6da;background:#fdfbf7;
font-family:inherit;color:#3a3b43;transition:border-color .16s,background .16s,transform .14s}
.auth-way:active{transform:translateY(1px)}
.auth-way .aw-ico{width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.auth-way .aw-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round}
.auth-way .aw-txt{font-size:12.5px;font-weight:600;letter-spacing:.02em}
.auth-way .aw-sub{font-size:9.5px;color:#b6ac9f;letter-spacing:.04em}
.aw-card{color:#a9803f;border-color:#e7d5b4;background:linear-gradient(160deg,#fffdf8,#f9f2e5)}
.aw-wx{color:#12855a;border-color:#cfe8da;background:linear-gradient(160deg,#fafefb,#eef9f2)}
.aw-guest{color:#7d7566;border-color:#e8e2d6;background:linear-gradient(160deg,#fdfcfa,#f7f4ee)}
.auth-msg{margin-top:12px;color:var(--red);font-size:12.5px;text-align:center;min-height:15px;line-height:1.5}
.auth-foot{margin-top:18px;font-size:9.5px;letter-spacing:.16em;color:#c0b5a5;text-align:center}
/* [任务六十四] 注册表单下的「身份卡一键注册」 */
.auth-fast{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;margin-top:12px}
.auth-fast span{font-size:11px;color:#b6ac9f;letter-spacing:.02em}
.auth-fast button{background:none;border:none;padding:2px;font-family:inherit;font-size:11.5px;font-weight:600;
color:#a9803f;letter-spacing:.01em;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.auth-fast button:active{opacity:.7}
@media (max-width:360px){
.auth-logo{font-size:34px}
.auth-way{padding:10px 2px 8px;border-radius:12px}
.auth-way .aw-sub{display:none}
.auth-way .aw-txt{font-size:11.5px}
}
/* ===== 顶栏 ===== */
.topbar{position:sticky;top:0;z-index:5;height:50px;display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);font-weight:800;letter-spacing:1px}
.topbar-back{position:absolute;left:10px;font-size:26px;color:var(--sub);background:none;width:34px}
.page{padding:12px 12px 70px;min-height:calc(100vh - 50px)}
/* ===== 轮播 ===== */
/* 统一规格：390 × 220（比例 1 : 0.5641），首页「活动轮播」用这一套。
.banner-wrap 负责限宽 390px + 水平居中；.banner 用 padding-bottom 百分比撑出高度。
padding 百分比按「包含块宽度」计算 → 外层已限宽，所以 390:220 精确等比、任何分辨率图片都
缩放到这个规格显示（图片再用 object-fit:cover 居中裁切填满，不变形）。
兼容安卓 WebView / Chrome 86 —— 不能用 aspect-ratio（与 .cat-item-cover 同一处理方式）。 */
.banner-wrap{width:100%;max-width:390px;margin:0 auto 12px}
.banner-wrap.top{margin-bottom:10px}
.banner{width:100%;height:0;padding-bottom:56.410256%;border-radius:14px;overflow:hidden;position:relative;background:#e9edf6}
/* 历史上 .banner.big=300px / .banner.top=180px 的高度差已取消，统一走上面的 390×220 等比 */
.banner.big,.banner.top{height:0}
.banner-slide{position:absolute;left:0;top:0;right:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;font-weight:800;text-align:center;padding:10px}
/* [任务六十七] 首页轮播改「可左右滑动的轨道」：.bs-track 横向排开，translate3d 跟手位移。
touch-action:pan-y 让横向手势归轮播、竖向仍然是页面滚动（否则手机上滑不动页面） */
.banner.bs{touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}
.banner.bs:active{cursor:grabbing}
.bs-track{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;will-change:transform}
.bs-item{flex:0 0 100%;width:100%;height:100%;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
color:#fff;font-size:20px;font-weight:800;text-align:center;padding:10px}
.bs-item img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;border:0;-webkit-user-drag:none}
/* 有跳转地址的图片给个右下角小箭头，暗示可点 */
.bs-item.bs-link::after{content:'';position:absolute;right:10px;bottom:10px;width:22px;height:22px;border-radius:50%;
background:rgba(0,0,0,.42);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
background-size:14px 14px;background-position:center;background-repeat:no-repeat;pointer-events:none}
/* 圆点：当前页拉长成小胶囊 */
.bs-dots{position:absolute;left:0;right:0;bottom:9px;display:flex;align-items:center;justify-content:center;gap:5px;z-index:3}
.bs-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.5);box-shadow:0 1px 3px rgba(0,0,0,.18);cursor:pointer;
transition:width .2s ease,background .2s ease}
.bs-dots i.on{width:16px;background:#fff}
/* 轮播图片（旧结构兜底，保留给缓存页面的样式引用） */
.banner-img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;
background:#e9edf6;display:flex;align-items:flex-end}
.banner-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;border:0}
.banner-cap{background:linear-gradient(transparent,rgba(0,0,0,.55));color:#fff;font-size:18px;font-weight:800;padding:10px 14px;width:100%;text-align:left}
/* FAQ 快捷按钮（客服页） */
.svc-faq{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px;background:var(--panel);border-top:1px solid var(--line)}
.faq-chip{background:rgba(255,90,138,.14);color:var(--brand2);border:1px solid rgba(255,90,138,.35);border-radius:14px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer}
.faq-chip:active{background:rgba(255,90,60,.25)}
/* 房间页 & 客服页布局修复：最后一条消息不被底部 composer 遮挡 */
#page-room{display:flex;flex-direction:column;padding:0;height:calc(100vh - 56px);min-height:calc(100vh - 56px);overflow:hidden}
#page-room .room-head{padding:8px 12px 12px;border-bottom:1px solid var(--line);flex:0 0 auto}
#page-room .room-info{flex:0 0 auto}
#page-room .msgs{height:auto;flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 12px 20px}
#page-room .composer{position:static;left:auto;right:auto;bottom:auto;max-width:none;margin:0;border-top:1px solid var(--line);z-index:auto}
#page-service{display:flex;flex-direction:column;padding:0;height:calc(100vh - 106px);min-height:calc(100vh - 106px);overflow:hidden}
#page-service .room-head{padding:8px 12px 12px;border-bottom:1px solid var(--line);flex:0 0 auto}
#page-service .msgs{height:auto;flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 12px}
#page-service .svc-faq{flex:0 0 auto;max-height:none;overflow:visible;border-top:1px solid var(--line);background:var(--panel)}
#page-service .composer{position:static;left:auto;right:auto;bottom:auto;max-width:none;margin:0;border-top:1px solid var(--line);z-index:auto}
/* 充值金额预设 */
.rg-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 12px}
.rg-preset{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 0;color:var(--text);font-weight:800;font-size:14px;cursor:pointer}
.rg-preset:active{background:var(--line)}
.rg-actions{display:flex;gap:10px;margin-top:4px}
.rg-actions .btn-primary,.rg-actions .btn-ghost{flex:1}
/* ===== 首页：Hero（标题 + 红包面板） ===== */
.hero{display:flex;gap:10px;margin-bottom:10px;align-items:stretch}
.hero-left{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;padding:6px 4px}
.hero-title{font-size:28px;font-weight:900;background:linear-gradient(135deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
.hero-sub{color:var(--sub);font-size:12px;margin-top:4px;letter-spacing:1px}
.hero-packet{flex:1;background:linear-gradient(135deg,#ff6b6b,#ff3d6e);border:1px solid #c0392b;border-radius:12px;padding:10px 12px;color:#fde2a8;position:relative;overflow:hidden}
.hero-packet::before{content:"";position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:radial-gradient(circle,rgba(255,200,80,.2),transparent 70%);border-radius:50%}
.hero-packet-title{text-align:center;font-weight:900;font-size:14px;color:#ffd86b;letter-spacing:1px;margin-bottom:6px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.hero-packet-row{display:flex;justify-content:space-between;font-size:13px;padding:2px 4px;color:#fff}
.hero-packet-row b{color:#ffd86b}
.hero-packet-foot{text-align:center;font-size:10px;color:#c9884d;margin-top:4px}
/* ===== 顶部公告条 ===== */
.top-announce{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:10px;font-size:13px}
.ta-badge{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;flex-shrink:0}
.ta-text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;color:var(--sub);position:relative}
.ta-text.ta-marquee{display:block}
.ta-track{display:inline-block;white-space:nowrap;animation:ta-scroll linear infinite;will-change:transform}
.ta-copy{display:inline-block;padding-right:60px}
@keyframes ta-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ta-close{background:none;color:var(--sub);font-size:20px;width:24px;height:24px;line-height:1;flex-shrink:0}
/* ===== 用户信息条 ===== */
.user-bar{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.ub-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.ub-avatar .av{width:42px;height:42px}
.ub-info{min-width:0}
.ub-welcome{font-size:13px;color:var(--sub)}
.ub-welcome b{color:var(--text)}
.ub-balance{font-size:15px;font-weight:800;color:var(--brand2);margin-top:2px}
.ub-actions{display:flex;gap:6px;flex-shrink:0}
.ub-btn{padding:7px 11px;border-radius:8px;background:var(--panel2);color:var(--text);border:1px solid var(--line);font-size:12px;font-weight:700}
.ub-btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-color:transparent}
/* ===== qh003 主题：隐藏顶部用户信息条 =====
该主题首页已有 4 个圆形快捷入口（我要充值 / 我要提现 / 公告中心 / 下载App），
顶部「头像 + 欢迎 + 元宝 + 主题 + 充值 + 提款」与之重复，隐藏后页面更清爽。
注：经典模板没有快捷入口，必须保留该条，否则会丢失充值/提款入口。 */
body.qh003 .user-bar{display:none!important}
/* ===== 首页主体：左分类 + 右房间 ===== */
.home-body{display:flex;gap:6px;margin-top:4px;min-height:60vh}
.cat-side{width:96px;flex-shrink:0;display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:80vh;padding-right:0}
.cat-item{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:5px;display:flex;flex-direction:column;align-items:center;gap:0;cursor:pointer;position:relative;overflow:hidden}
.cat-item.active{border-color:var(--brand);box-shadow:0 0 0 2px rgba(255,90,60,.2)}
/* 分类封面：正方形 1:1。用 padding-bottom:100% 撑高，兼容安卓 WebView / Chrome 86 —— 不能用 aspect-ratio */
.cat-item-cover{width:100%;height:0;padding-bottom:100%;border-radius:8px;background:var(--cover,linear-gradient(135deg,#c9d6ff,#e2d1ff));background-size:cover;background-position:center;position:relative;overflow:hidden}
/* 分类图片：铺满整个正方形封面并居中裁切，不拉伸变形（object-fit 在 Chrome 86 可用） */
.cat-item-cover.has-img{background:#eef2fb}
.cat-item-cover img{position:absolute;left:0;top:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:8px}
/* 默认官方版：首页分类「只显示图片」，不显示分类名（PK / PC28 / SSC / 六合彩）。
如需恢复文字，删掉下面这一行即可；分类未配图时会退回上面的渐变方块。 */
.cat-item-name{display:none!important}
.cat-empty{padding:20px 8px;color:var(--sub);font-size:12px;text-align:center}
.room-side{flex:1;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:5px;align-content:start;overflow-y:auto;max-height:80vh;padding-right:0}
.room-empty{padding:30px 8px;color:var(--sub);font-size:13px;text-align:center;grid-column:span 2}
.rc{background:transparent;border:none;border-radius:0;padding:0;display:flex;flex-direction:column;gap:4px;position:relative}
.rc-img{position:relative;border-radius:10px;overflow:hidden;height:126px;cursor:pointer;background:#eef2fb;box-shadow:0 1px 4px rgba(20,30,60,.10)}
.rc-img:active{opacity:.85}
.room-cover{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,.4);background-size:cover;background-position:center}
/* 房间名 + 在线人数：叠加在封面图左上角内（带顶部暗色渐变，保证任何底图下都清晰） */
.rc-head{position:absolute;left:0;top:0;right:0;z-index:2;padding:7px 9px 14px;
display:flex;flex-direction:column;align-items:flex-start;gap:2px;pointer-events:none;
background:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,.30) 55%,rgba(0,0,0,0) 100%)}
.rc-head .rc-name{font-size:13px;font-weight:800;color:#fff;text-align:left;line-height:1.25;
max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
text-shadow:0 1px 3px rgba(0,0,0,.65)}
.rc-head .rc-online{font-size:11px;font-weight:700;color:#9bf6b4;text-align:left;
text-shadow:0 1px 3px rgba(0,0,0,.7)}
/* 兼容：若被别处单独使用，仍保留居中样式 */
.rc-online{font-size:11px;color:var(--green);text-align:center;font-weight:700}
.rc-name{font-size:13px;font-weight:800;color:var(--text);text-align:center}
.rc-rule{background:rgba(255,90,138,.14);color:var(--brand2);border:1px solid rgba(255,90,138,.35);border-radius:8px;padding:5px 4px;font-size:11px;font-weight:700;cursor:pointer}
.rc-rule:active{background:rgba(255,176,0,.25)}
/* 默认官方版：房间卡「只显示封面图」——隐藏封面上的房间名（在线数由后台「启用虚假在线人数」开关控制）。
如需恢复房间名，删掉下面这一行即可。 */
.rc-head .rc-name{display:none!important}
/* ===== 钱包条 ===== */
.wallet-bar{display:flex;align-items:center;gap:10px;margin:12px 0}
.wb-btn{padding:9px 16px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-weight:800}
.wb-btn.ghost{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
.wb-bal{margin-left:auto;color:var(--sub)}
.wb-bal b{color:var(--brand2)}
/* ===== 分类/房间 ===== */
.cat-list{display:flex;flex-direction:column;gap:16px}
.cat{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cat-head{padding:12px 14px;font-weight:800;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.cat-dot{width:10px;height:10px;border-radius:50%}
.room-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
.room-card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;position:relative}
.room-name{font-weight:800}
.room-desc{color:var(--sub);font-size:12px;margin:6px 0 10px;min-height:32px}
.room-online{font-size:12px;color:var(--green)}
/* ===== 聊天室 ===== */
.room-head{display:flex;align-items:center;gap:8px;padding:8px 0 12px;border-bottom:1px solid var(--line)}
.back{font-size:26px;color:var(--sub);background:none;width:34px}
.room-title{font-weight:800;font-size:17px}
/* 客服连接状态指示灯 */
.svc-status{margin-left:auto;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:5px}
.svc-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.svc-status.pending{color:#b8860b;background:rgba(184,134,11,.12)}
.svc-status.reconnecting{color:#c0392b;background:rgba(192,57,43,.12);animation:pulseDot 1.2s infinite}
.svc-status.ok{color:#1e8e3e;background:rgba(30,142,62,.12)}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
.msgs{flex:1;overflow-y:auto;padding:14px 4px;display:flex;flex-direction:column;gap:12px;height:calc(100vh - 220px)}
.msg{max-width:82%;align-self:flex-start;background:var(--panel2);padding:9px 12px;border-radius:12px}
.msg.me{align-self:flex-end;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.msg-row{display:flex;gap:8px;align-items:flex-start}
.msg.me .msg-row{flex-direction:row-reverse}
.av-wrap{flex:0 0 auto;margin-top:2px}
.av{width:30px;height:30px;border-radius:50%;object-fit:cover;display:block}
.av-text{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px}
.msg-main{min-width:0}
.msg-name{font-size:11px;color:#E6B422;margin-bottom:3px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.msg.me .msg-name{color:#E6B422;text-align:right}
.msg-text{word-break:break-word;line-height:1.45;white-space:pre-wrap}
.msg-time{font-size:10px;color:var(--sub);margin-top:4px;text-align:right}
/* 已撤回消息占位 */
.msg.recall{align-self:center;background:transparent;padding:0}
.msg-recall{font-size:12px;color:var(--sub);background:rgba(128,128,128,.12);padding:4px 12px;border-radius:10px;text-align:center;font-style:italic}
/* 头像（通用） */
.av{width:36px;height:36px;border-radius:50%;object-fit:cover}
.av-text{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.composer{position:fixed;bottom:56px;left:0;right:0;max-width:480px;margin:0 auto;display:flex;gap:8px;padding:10px 12px;background:var(--panel);border-top:1px solid var(--line)}
.composer input{flex:1;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--text)}
.send{padding:0 18px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-weight:800}
/* ===== 房间卡片头像 ===== */
.room-card{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;position:relative}
.room-av{flex:0 0 auto}
.room-av .av{width:42px;height:42px}
.room-info{min-width:0;flex:1}
.room-name{font-weight:800}
.room-desc{color:var(--sub);font-size:12px;margin:6px 0 10px;min-height:32px}
.room-online{font-size:12px;color:var(--green)}
/* ===== 充值页 ===== */
.recharge-methods{display:flex;gap:8px;margin:14px 0}
.rm-tab{flex:1;padding:11px;border-radius:10px;background:var(--panel2);color:var(--sub);font-weight:800;border:1px solid var(--line)}
.rm-tab.active{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-color:transparent}
.recharge-body{padding:6px 2px}
.rg-field{margin-bottom:12px}
.rg-field input{padding:13px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--text);width:100%;font-size:15px}
.rg-tip{color:var(--sub);font-size:13px;margin:12px 0;line-height:1.6}
.rg-result{margin-top:16px;text-align:center}
.rg-qr{width:200px;height:200px;border-radius:12px;background:#fff;padding:8px;margin:8px auto}
.rg-status{margin-top:10px;color:var(--brand2);font-weight:700}
/* USDT 应用内收款面板 */
.usdt-pay{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;margin-top:4px}
.usdt-title{font-weight:800;font-size:15px;margin-bottom:8px}
.usdt-amt{font-size:16px;margin-bottom:2px}.usdt-amt b{color:var(--brand2);font-size:22px}
.usdt-cny{color:var(--sub);font-size:13px;margin-bottom:10px}
.usdt-addr-label{color:var(--sub);font-size:12px;margin:10px 0 4px}
.usdt-addr{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:12px;word-break:break-all;color:var(--text);cursor:pointer}
.usdt-order{margin-top:10px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-weight:800;font-size:13px;padding:9px 10px;border-radius:10px;word-break:break-all;text-align:center}
/* ===== 福利（任务六十六：按排序往下排，图片 390×200 固定） ===== */
.welfare-list{display:flex;flex-direction:column;gap:14px;margin-top:14px;padding-bottom:4px}
.wf-item{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 13px 14px}
.wf-head{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.wf-no{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.06em;color:#a9803f;background:#fbf4e8;
border:1px solid #f0e2cc;border-radius:6px;padding:2px 6px;line-height:1.5}
.wf-name{font-weight:800;font-size:16px;color:var(--text);line-height:1.4}
.wf-desc{color:var(--sub);font-size:13px;line-height:1.65;margin:0 0 10px}
/* 图片容器：竖排、居中；每张固定 390×200（窄屏按 100% 宽等比不变形，靠 object-fit:cover 裁切）
负外边距抵掉卡片左右 padding，让图片区可用宽度 = 整卡宽，390px 才不会被挤成 378 */
.wf-imgs{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 -13px}
.wf-pic{position:relative;width:390px;max-width:100%;height:200px;border-radius:12px;overflow:hidden;
background:var(--panel2);border:1px solid var(--line)}
.wf-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;border:0;-webkit-user-drag:none}
.wf-pic-link{cursor:pointer}
.wf-pic-link:active img{opacity:.9}
.wf-pic-tip{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.46);color:#fff;font-size:11px;font-weight:600;
letter-spacing:.02em;padding:3px 9px;border-radius:20px;pointer-events:none}
.wf-pic-bad{display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:13px}
.wf-ph{width:390px;max-width:100%;height:200px;border-radius:12px;border:1px dashed var(--line);background:var(--panel2);
display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:13px}
.welfare-note{color:var(--sub);font-size:13px;margin-top:14px;line-height:1.6;padding:0 4px}
/* ===== 推广 ===== */
.promo-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;margin-top:6px}
.promo-title{font-weight:800;margin-bottom:12px}
.promo-link{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px;font-size:12px;word-break:break-all;color:var(--text);margin-bottom:12px}
.promo-tip{color:var(--sub);font-size:12px;margin:12px 0}
.promo-qr{margin:16px 0;text-align:center}
.promo-qr-title{color:var(--sub);font-size:13px;margin-bottom:10px}
.promo-qr img{width:200px;height:200px;background:#fff;border-radius:12px;padding:8px}
/* 推广页人数块（任务六十一：只显示人数，名单移到「我的 → 下级会员」） */
.promo-stat{margin-top:16px;padding:17px 18px 15px;border-radius:18px;text-align:center;
background:linear-gradient(152deg,#fffdf9 0%,#faf6ee 100%);
border:1px solid #ece4d8;box-shadow:0 14px 30px -30px rgba(28,29,33,.9)}
.promo-stat-label{font-size:10.5px;letter-spacing:.22em;color:#b09a7d}
.promo-stat-num{display:flex;align-items:baseline;justify-content:center;gap:5px;margin-top:3px}
.promo-stat-num b{font-size:32px;line-height:1.15;font-weight:400;letter-spacing:-.01em;
font-family:"Didot","Bodoni MT","Times New Roman",Georgia,serif;color:#a3814f;
font-variant-numeric:tabular-nums}
.promo-stat-num span{font-size:11.5px;letter-spacing:.18em;color:#b3a795}
.promo-stat-tip{margin-top:8px;padding-top:9px;border-top:1px solid #f0e9de;
font-size:11px;color:#bdaf9b;letter-spacing:.02em}
/* ===== 我的（旧版样式已于任务六十清理，只剩钱包列表公用部分）===== */
.wallet-list{display:flex;flex-direction:column;gap:8px}
.wallet-item{display:flex;justify-content:space-between;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.wallet-item .amt{font-weight:800} .wallet-item .amt.in{color:var(--green)} .wallet-item .amt.out{color:var(--red)}
.wallet-item .note{color:var(--sub);font-size:12px}
.btn-ghost{padding:11px;border-radius:10px;background:var(--panel2);color:var(--text);border:1px solid var(--line);font-weight:700}
/* ===================================================================
我的页面（任务六十：轻奢版 —— 暖米纸 + 深墨 + 香槟金）
设计要点：低饱和暖底 / 深墨金卡承载余额 / 金色细线分隔 / 衬线数字
=================================================================== */
.me-page{--lux-gold:#c9a063;--lux-gold-l:#e8cfa4;--lux-line:#ece4d8;
--lux-txt:#1c1d21;--lux-sub:#989187;
background:linear-gradient(180deg,#f7f3ec 0%,#faf8f4 40%,#faf8f4 100%);
padding:14px 16px 92px;min-height:calc(100vh - 50px)}
/* 深墨金卡 */
.me-hero{position:relative;overflow:hidden;padding:20px 20px 18px;border-radius:24px;color:#fff;
background:
radial-gradient(140% 105% at 10% -8%,rgba(201,160,99,.16) 0%,rgba(201,160,99,0) 58%),
linear-gradient(152deg,#272932 0%,#17181e 52%,#0e0f13 100%);
box-shadow:0 22px 46px -24px rgba(16,17,22,.62),inset 0 1px 0 rgba(255,255,255,.05)}
.me-hero::before{content:'';position:absolute;left:26px;right:26px;top:0;height:1px;z-index:2;
background:linear-gradient(90deg,transparent,rgba(232,207,164,.85),transparent)}
.me-hero::after{content:'';position:absolute;right:-60px;bottom:-92px;width:210px;height:210px;border-radius:50%;z-index:0;
background:radial-gradient(circle,rgba(201,160,99,.26) 0%,rgba(201,160,99,0) 68%)}
.me-hero-ring{position:absolute;right:-34px;top:-54px;width:152px;height:152px;border-radius:50%;z-index:0;
border:1px solid rgba(232,207,164,.16)}
.me-hero-ring.r2{right:-6px;top:-26px;width:96px;height:96px;border-color:rgba(232,207,164,.09)}
.me-hero-top{position:relative;z-index:1;display:flex;align-items:center;gap:14px}
.me-hero-av{width:56px;height:56px;flex:0 0 auto;border-radius:50%;overflow:hidden;padding:2px;
background:linear-gradient(150deg,#f3e2c6,#c9a063 55%,#8d6a3c);
box-shadow:0 0 0 5px rgba(201,160,99,.10)}
.me-hero-av .av,.me-hero-av .av-text{width:100%;height:100%;border-radius:50%;object-fit:cover;
display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;color:#fff}
.me-hero-idbox{min-width:0;flex:1}
.me-hero-name{font-size:19px;font-weight:600;letter-spacing:.02em;line-height:1.3;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-hero-meta{display:flex;align-items:center;gap:9px;margin-top:7px}
.me-chip{font-size:10px;letter-spacing:.12em;padding:3px 9px;border-radius:999px;color:#e8cfa4;
border:1px solid rgba(232,207,164,.34);background:rgba(232,207,164,.08)}
.me-hero-no{font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.44)}
.me-hero-no b{font-weight:500;color:rgba(255,255,255,.74);margin-left:3px;font-variant-numeric:tabular-nums}
.me-bal-label{position:relative;z-index:1;margin-top:21px;font-size:10px;letter-spacing:.22em;
color:rgba(232,207,164,.62)}
.me-bal{position:relative;z-index:1;display:flex;align-items:baseline;gap:6px;margin-top:1px;
font-variant-numeric:tabular-nums}
.me-bal-cur{font-size:16px;color:#c9a063;transform:translateY(-7px)}
.me-bal b{font-size:38px;line-height:1.12;font-weight:400;letter-spacing:-.02em;
font-family:"Didot","Bodoni MT","Times New Roman",Georgia,serif;
background:linear-gradient(180deg,#fdf3e2 0%,#e6cba1 46%,#bd8f55 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.me-hero-btns{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.me-btn{height:42px;border-radius:999px;font-size:13.5px;letter-spacing:.16em;font-weight:600;
transition:transform .16s ease,opacity .16s ease}
.me-btn:active{transform:scale(.975);opacity:.92}
.me-btn-gold{color:#211c14;background:linear-gradient(135deg,#f0dcbb 0%,#dbbd8b 45%,#c39a61 100%);
box-shadow:0 10px 22px -12px rgba(201,160,99,.9)}
.me-btn-line{color:#e8cfa4;background:rgba(232,207,164,.06);border:1px solid rgba(232,207,164,.34)}
/* 快捷入口 */
.me-quick{display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px;padding:17px 2px 14px;
background:#fff;border:1px solid var(--lux-line);border-radius:20px;
box-shadow:0 14px 30px -28px rgba(28,29,33,.85)}
.me-q{display:flex;flex-direction:column;align-items:center;gap:9px;background:none;border:0;padding:0}
.me-q-ico{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:radial-gradient(120% 120% at 30% 20%,#ffffff 0%,#f6efe3 100%);
border:1px solid rgba(201,160,99,.30);transition:transform .16s ease}
.me-q:active .me-q-ico{transform:scale(.93)}
.me-q-ico svg{width:20px;height:20px;fill:none;stroke:#ab8657;stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round}
.me-q-txt{font-size:11.5px;color:#4a4740;letter-spacing:.02em}
/* 分组标题 + 卡片 */
.me-sec-title{display:flex;align-items:center;gap:9px;margin:21px 2px 10px;
font-size:11px;font-weight:600;letter-spacing:.2em;color:#a3814f}
.me-sec-title::before{content:'';width:16px;height:1px;background:linear-gradient(90deg,#c9a063,transparent)}
.me-card{display:block;background:#fff;border:1px solid var(--lux-line);border-radius:18px;overflow:hidden;
box-shadow:0 16px 36px -34px rgba(28,29,33,.95)}
.me-li{display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box;padding:15px;
background:none;border:0;border-bottom:1px solid #f5f0e7;font-size:14.5px;color:var(--lux-txt);
text-align:left;font-family:inherit;line-height:1.25}
.me-card>*:last-child{border-bottom:none}
.me-li-ico{width:26px;height:26px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.me-li-ico svg{width:18px;height:18px;fill:none;stroke:#bc9a6c;stroke-width:1.35;
stroke-linecap:round;stroke-linejoin:round}
.me-li-t{flex:1;min-width:0;font-weight:500}
.me-li-v{font-size:13px;color:#8f887d;font-variant-numeric:tabular-nums}
.me-li-v b{color:#1c1d21;font-weight:600;letter-spacing:.02em}
.me-arrow{width:6px;height:6px;flex:0 0 auto;margin-right:3px;
border-top:1px solid #cfc0aa;border-right:1px solid #cfc0aa;transform:rotate(45deg)}
/* 折叠：资料与密码 */
.me-detail{display:block;border-bottom:1px solid #f5f0e7}
.me-detail summary{list-style:none;cursor:pointer}
.me-detail summary::-webkit-details-marker{display:none}
.me-detail summary::marker{content:''}
.me-detail summary .me-arrow{transition:transform .22s ease}
.me-detail[open] summary .me-arrow{transform:rotate(-45deg)}
.me-detail-body{padding:2px 15px 16px;display:flex;flex-direction:column;gap:10px}
.me-detail-body input{padding:11px 12px;border-radius:11px;border:1px solid #eae2d6;background:#fdfbf7;
color:#1c1d21;font-size:14px;width:100%;box-sizing:border-box}
.me-detail-body input:focus{border-color:rgba(201,160,99,.7);background:#fff}
.me-detail-row{display:flex;gap:9px}
.me-detail-row .btn-ghost{flex:1}
.me-detail-sep{display:flex;align-items:center;gap:10px;margin:5px 0 1px;font-size:10.5px;
letter-spacing:.16em;color:#b3a795}
.me-detail-sep::after{content:'';flex:1;height:1px;background:#f0e9de}
.me-detail-body .btn-ghost{margin:0;padding:11px;border-radius:11px;background:#fbf8f2;
border:1px solid #eae2d6;color:#5b5548;font-size:13.5px;font-weight:600;letter-spacing:.04em}
/* 退出 */
.me-logout{display:block;width:100%;margin:22px 0 0;padding:14px;background:#fff;
border:1px solid var(--lux-line);border-radius:16px;color:#a08c78;font-size:13px;
letter-spacing:.18em;font-weight:500}
.me-logout:active{background:#fdfbf7}
.me-foot{margin:16px 0 4px;text-align:center;font-size:9.5px;letter-spacing:.34em;color:#d3c9bb}
/* 窄屏（iPhone SE / 小屏安卓）余额字号收紧，避免长金额顶破卡片 */
@media (max-width:380px){
.me-bal b{font-size:33px}
.me-hero-name{font-size:17.5px}
.me-hero{padding:18px 17px 16px;border-radius:22px}
.me-q-txt{font-size:11px}
.me-q-ico{width:40px;height:40px}
}
@media (max-width:340px){
.me-bal b{font-size:28px}
.me-bal-cur{font-size:14px;transform:translateY(-5px)}
.me-btn{height:38px;font-size:12.5px;letter-spacing:.1em}
.me-hero-meta{gap:6px}
}
/* ===================================================================
下级会员页（任务六十一：从「我的」进入的独立页面，与轻奢同款）
与「我的」共用一套色板；人数用深墨卡 + 金色衬线数字，名单用白卡细线
=================================================================== */
.dl-page{--lux-gold:#c9a063;--lux-gold-l:#e8cfa4;--lux-line:#ece4d8;
--lux-txt:#1c1d21;--lux-sub:#989187;
background:linear-gradient(180deg,#f7f3ec 0%,#faf8f4 42%,#faf8f4 100%);
padding:0 16px 92px;min-height:calc(100vh - 50px)}
/* 头部：圆形细边返回键 + 标题（副标题小字距，压住「贵感」） */
.dl-head{display:flex;align-items:center;gap:11px;padding:14px 0 15px}
.dl-back{width:34px;height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
font-size:24px;line-height:1;color:#8a7355;background:#fff;border:1px solid var(--lux-line);
border-radius:50%;padding:0 0 3px;font-family:inherit}
.dl-back:active{background:#fdfbf7}
.dl-head-title{font-size:16px;font-weight:600;letter-spacing:.05em;color:var(--lux-txt)}
.dl-head-sub{font-size:9px;letter-spacing:.3em;color:#c6b8a3;margin-top:4px}
/* 人数卡：与「我的」余额卡同源（深墨 + 顶部金线 + 右下金晕） */
.dl-hero{position:relative;overflow:hidden;padding:20px 20px 17px;border-radius:24px;color:#fff;
background:
radial-gradient(140% 105% at 12% -10%,rgba(201,160,99,.16) 0%,rgba(201,160,99,0) 58%),
linear-gradient(152deg,#272932 0%,#17181e 52%,#0e0f13 100%);
box-shadow:0 22px 46px -26px rgba(16,17,22,.6),inset 0 1px 0 rgba(255,255,255,.05)}
.dl-hero::before{content:'';position:absolute;left:26px;right:26px;top:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(232,207,164,.85),transparent)}
.dl-hero::after{content:'';position:absolute;right:-58px;bottom:-88px;width:196px;height:196px;
border-radius:50%;background:radial-gradient(circle,rgba(201,160,99,.24) 0%,rgba(201,160,99,0) 68%)}
.dl-hero-label{position:relative;z-index:1;font-size:10px;letter-spacing:.22em;color:rgba(232,207,164,.62)}
.dl-hero-num{position:relative;z-index:1;display:flex;align-items:baseline;gap:6px;margin-top:2px}
.dl-hero-num b{font-size:42px;line-height:1.1;font-weight:400;letter-spacing:-.02em;
font-family:"Didot","Bodoni MT","Times New Roman",Georgia,serif;
background:linear-gradient(180deg,#fdf3e2 0%,#e6cba1 46%,#bd8f55 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.dl-hero-num span{font-size:12px;letter-spacing:.2em;color:rgba(232,207,164,.66)}
.dl-hero-meta{position:relative;z-index:1;margin-top:13px;padding-top:12px;font-size:11.5px;
line-height:1.7;color:rgba(255,255,255,.46);border-top:1px solid rgba(255,255,255,.07)}
.dl-hero-meta b{color:#e8cfa4;font-weight:500;font-variant-numeric:tabular-nums;margin:0 1px}
/* 分段不换行：窄屏只在「·」处折行，日期不会被劈成两行 */
.dl-meta-seg{display:inline-block;white-space:nowrap}
.dl-meta-seg+.dl-meta-seg::before{content:'·';margin:0 6px;color:rgba(255,255,255,.2)}
/* 分组标题 */
.dl-sec-title{display:flex;align-items:center;gap:9px;margin:21px 2px 10px;
font-size:11px;font-weight:600;letter-spacing:.2em;color:#a3814f}
.dl-sec-title::before{content:'';width:16px;height:1px;
background:linear-gradient(90deg,#c9a063,transparent)}
.dl-sec-title span{margin-left:auto;font-size:10.5px;font-weight:500;letter-spacing:.08em;color:#b3a795}
/* 会员卡：白底 + 暖金细边 + 几乎不可见的阴影（列表靠间距而非分隔线） */
.dl-list{display:flex;flex-direction:column;gap:9px}
.dl-item{display:flex;align-items:center;gap:12px;padding:13px 14px;background:#fff;
border:1px solid var(--lux-line);border-radius:16px;
box-shadow:0 14px 30px -30px rgba(28,29,33,.9)}
.dl-item-av{width:42px;height:42px;flex:0 0 auto;border-radius:50%;overflow:hidden;
box-shadow:0 0 0 1px rgba(201,160,99,.20)}
.dl-item-av .av,.dl-item-av .av-text{width:100%;height:100%;border-radius:50%;object-fit:cover;
display:flex;align-items:center;justify-content:center;font-size:15px}
.dl-item-main{flex:1;min-width:0}
.dl-item-name{font-size:14.5px;font-weight:600;color:var(--lux-txt);line-height:1.3;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-item-user{font-size:11px;font-weight:400;color:#b9ad9b;margin-left:5px;letter-spacing:.02em}
.dl-item-sub{font-size:11.5px;color:#a9a093;margin-top:4px;letter-spacing:.01em}
.dl-item-right{flex:0 0 auto}
.dl-tag{display:inline-block;font-size:10px;letter-spacing:.08em;padding:3px 9px;border-radius:999px;
color:#a3814f;border:1px solid rgba(201,160,99,.3);background:#fdf8ef}
.dl-tag.none{color:#c6bcac;border-color:#efe8dc;background:#fbf9f5}
.dl-empty{padding:44px 0;text-align:center;font-size:12.5px;color:#b3a795;letter-spacing:.06em}
.dl-note{margin:18px 6px 0;text-align:center;font-size:10.5px;line-height:1.8;
color:#c2b6a3;letter-spacing:.03em}
@media (max-width:380px){
.dl-hero-num b{font-size:36px}
.dl-hero{padding:18px 17px 15px;border-radius:22px}
.dl-item{padding:12px;gap:10px}
.dl-item-av{width:38px;height:38px}
}
/* 320 级小屏：统计行必然折行，去掉「·」避免行首出现孤立分隔点 */
@media (max-width:340px){
.dl-hero-meta{font-size:11px}
.dl-meta-seg+.dl-meta-seg::before{content:'';margin:0 7px}
}
/* ===== 公告 ===== */
.announce-content{color:var(--text);font-size:14px;line-height:1.7;white-space:pre-wrap}
/* ===== Tab ===== */
.tabbar{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;height:56px;display:flex;
background:rgba(255,255,255,.96);border-top:1px solid var(--line);z-index:6}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;color:var(--sub);font-size:11px}
.tab span{font-size:18px}
.tab.active{color:var(--brand2)}
/* ===== Modal/Toast ===== */
.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(40,30,70,.42);display:flex;align-items:center;justify-content:center;z-index:20}
.modal-box{width:84%;max-width:340px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.modal-title{font-weight:800;margin-bottom:12px}
.modal-body{display:flex;flex-direction:column;gap:10px}
.modal-body input{padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--text)}
.modal-actions{display:flex;gap:10px;margin-top:14px}
.modal-actions button{flex:1;padding:11px;border-radius:10px;font-weight:700}
.modal-actions .ok{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.modal-actions .cancel{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;padding:10px 16px;border-radius:20px;font-size:13px;z-index:30}
/* ===== Tab ===== */
.tabbar{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;height:56px;display:flex;
background:rgba(255,255,255,.96);border-top:1px solid var(--line);z-index:6}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;color:var(--sub);font-size:11px}
.tab span{font-size:18px}
.tab.active{color:var(--brand2)}
/* ===== Modal/Toast ===== */
.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(40,30,70,.42);display:flex;align-items:center;justify-content:center;z-index:20}
.modal-box{width:84%;max-width:340px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.modal-title{font-weight:800;margin-bottom:12px}
.modal-body{display:flex;flex-direction:column;gap:10px}
.modal-body input{padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--text)}
.modal-actions{display:flex;gap:10px;margin-top:14px}
.modal-actions button{flex:1;padding:11px;border-radius:10px;font-weight:700}
.modal-actions .ok{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.modal-actions .cancel{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;padding:10px 16px;border-radius:20px;font-size:13px;z-index:30}
/* ===== 图片消息 ===== */
.chat-img{width:40px;flex:0 0 auto;background:var(--panel2);border:1px solid var(--line);border-radius:12px;color:var(--text);font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center}
.chat-img:active{background:var(--panel)}
.msg-img-wrap{margin:2px 0}
.msg-img{max-width:180px;max-height:220px;border-radius:12px;display:block;cursor:zoom-in;background:var(--panel2)}
.msg.me .msg-img{margin-left:auto}
/* 图片网页内放大灯箱：点击遮罩或图片本身关闭，不跳转、不关网页 */
#yl-lightbox{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(20,16,40,.88);backdrop-filter:blur(2px);padding:24px;cursor:zoom-out}
#yl-lightbox.show{display:flex}
#yl-lightbox img{max-width:92vw;max-height:88vh;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.5);cursor:zoom-out;object-fit:contain}
#yl-lightbox:active{background:rgba(20,16,40,.94)}
/* ===== 主题模板 qh003（渐变卡版：分类/房间/介绍胶囊） ===== */
/* 仅在 body.qh003 主题下生效，避免污染默认主题 */
/* 非 qh003 主题（默认官方版）下彻底隐藏 qh003 容器，避免残留空白块 */
body:not(.qh003) #qh003-home, body:not(.qh003) #qh003-cat { display: none !important; }
body.qh003 .cat-side, body.qh003 .room-side { display: none !important; }
body.qh003 #qh003-home { display: block; padding: 0 0 80px; }
body.qh003:not(.qh003) #qh003-home { display: none; }
body.qh003 #qh003-cat { display: none; }
body.qh003.qh003-page-cat #qh003-home { display: none; }
/* 进入分类页时隐藏「整个首页」（轮播/公告条/用户信息条/游客横幅），否则这些内容会把房间挤到屏幕下方，出现「点进去空白、要滚动才看到房间」 */
body.qh003.qh003-page-cat #page-home { display: none !important; }
body.qh003.qh003-page-cat #qh003-cat { display: block; padding: 0 0 74px; }
/* 4 个圆形蓝色快捷入口 */
.qh-quick-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 11px 12px; background: #fff; margin: 0 0 10px; }
.qh-quick { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; padding: 0; }
.qh-quick-icon { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #4a8cff, #2473ff); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 4px 12px rgba(36,115,255,.25); }
.qh-quick-label { font-size: 12px; color: #1f2533; font-weight: 600; }
/* 分类大卡（王者荣耀/和平精英风格） */
.qh-cat-card { position: relative; margin: 10px 12px; border-radius: 16px; overflow: hidden; height: 134px; box-shadow: 0 5px 15px rgba(80,60,160,.18); cursor: pointer; background: linear-gradient(135deg, #7b8df0 0%, #a16bd0 50%, #c768b0 100%); }
.qh-cat-card .qh-card-sky { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(180,160,230,.55) 0%, rgba(120,100,180,.35) 55%, rgba(80,60,140,.85) 100%); pointer-events: none; }
.qh-cat-card .qh-card-buildings { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: url("data:image/svg+xml;utf8,") repeat-x bottom; background-size: 400px 80px; opacity: .8; pointer-events: none; }
.qh-cat-card .qh-card-art { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; pointer-events: none; }
.qh-cat-card .qh-card-art::after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(15,8,40,.38) 0%, rgba(15,8,40,.05) 34%, rgba(15,8,40,.05) 66%, rgba(15,8,40,.62) 100%); }
.qh-cat-card .qh-card-title { position: absolute; left: 16px; top: 13px; font-size: 23px; font-weight: 900; color: #fff; letter-spacing: 2px; text-shadow: 0 2px 8px rgba(0,0,0,.3); z-index: 2; }
.qh-cat-card .qh-card-intro { position: absolute; right: 12px; bottom: 11px; padding: 6px 13px; border-radius: 20px; background: rgba(40,30,70,.75); color: #fff; font-size: 13px; font-weight: 700; backdrop-filter: blur(4px); z-index: 3; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
/* 房间卡（qh003 分类内）—— 紧凑版：减少空白、卡片间距收紧 */
.qh-room-card { position: relative; margin: 8px 12px; border-radius: 14px; overflow: hidden; height: 118px; box-shadow: 0 4px 12px rgba(80,60,160,.15); cursor: pointer; background: linear-gradient(135deg, #7b8df0 0%, #a16bd0 50%, #c768b0 100%); }
.qh-room-card .qh-card-sky { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(180,160,230,.55) 0%, rgba(120,100,180,.35) 55%, rgba(80,60,140,.85) 100%); pointer-events: none; }
.qh-room-card .qh-card-buildings { position: absolute; left: 0; right: 0; bottom: 0; height: 62px; background: url("data:image/svg+xml;utf8,") repeat-x bottom; background-size: 400px 80px; opacity: .8; pointer-events: none; }
.qh-room-card .qh-card-art { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; pointer-events: none; }
.qh-room-card .qh-card-art::after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(15,8,40,.38) 0%, rgba(15,8,40,.05) 34%, rgba(15,8,40,.05) 66%, rgba(15,8,40,.62) 100%); }
.qh-room-card .qh-card-title { position: absolute; left: 15px; top: 12px; font-size: 20px; font-weight: 900; color: #fff; letter-spacing: 2px; text-shadow: 0 2px 8px rgba(0,0,0,.3); z-index: 2; }
.qh-room-card .qh-card-intro { position: absolute; right: 10px; bottom: 10px; padding: 6px 13px; border-radius: 17px; background: rgba(40,30,70,.75); color: #fff; font-size: 12px; font-weight: 700; backdrop-filter: blur(4px); z-index: 3; }
.qh-room-card .qh-card-online { position: absolute; left: 15px; bottom: 10px; color: #fff; font-size: 12px; opacity: .85; z-index: 2; }
/* qh003 分类详情页：顶部头 */
.qh-cat-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: center; height: 50px; background: rgba(255,255,255,.95); backdrop-filter: blur(6px); border-bottom: 1px solid #eee; font-weight: 800; letter-spacing: 1px; }
.qh-cat-head .qh-cat-back { position: absolute; left: 12px; font-size: 24px; color: #555; background: none; }
.qh-cat-head .qh-cat-title { font-size: 17px; }
/* 公告/通知条（qh003 紫色背景） */
.qh-notice { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin: 10px 12px; border-radius: 10px; background: linear-gradient(90deg, rgba(155,140,220,.18), rgba(180,140,220,.12)); color: #5a3e9a; font-size: 13px; }
.qh-notice .qh-notice-icon { font-size: 16px; }
/* qh003 模式下隐藏默认左右双栏，给 .home-body 加 padding 调整 */
body.qh003 .home-body { display: none !important; }
/* qh003 分类页底部：房间号一览（默认在卡片下方，需下拉查看） */
.qh-roomno-wrap { margin: 16px 12px 34px; background: #fff; border-radius: 14px; padding: 2px 14px 4px; box-shadow: 0 3px 12px rgba(80,60,160,.08); }
.qh-roomno-head { font-size: 13px; font-weight: 800; color: #6b6f80; padding: 12px 2px 9px; letter-spacing: 1px; border-bottom: 1px dashed #ececf3; }
.qh-roomno-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 2px; border-bottom: 1px solid #f3f3f8; }
.qh-roomno-row:last-child { border-bottom: none; }
.qh-roomno-name { font-size: 14px; color: #333; font-weight: 600; }
.qh-roomno-num { font-size: 14px; font-weight: 800; color: var(--brand); letter-spacing: 1px; }
/* ===== 公告中心（列表页 + 详情，替代直接弹窗） ===== */
.ann-count { font-size: 12px; color: var(--sub); margin: 4px 2px 10px; }
.ann-item { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; cursor: pointer; }
.ann-item:active { background: var(--panel2); }
.ann-item-main { flex: 1; min-width: 0; }
.ann-item-title { font-weight: 700; font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-item-time { font-size: 12px; color: var(--sub); margin-top: 4px; }
.ann-item-arrow { color: var(--sub); font-size: 20px; flex: 0 0 auto; }
.ann-empty { text-align: center; color: var(--sub); padding: 48px 0; }
.ann-detail-title { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.4; }
.ann-detail-time { font-size: 12px; color: var(--sub); margin: 8px 0 16px; }
.ann-detail-content { font-size: 15px; line-height: 1.75; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.ann-detail-back { margin-top: 26px; width: 100%; padding: 12px; border-radius: 10px; background: var(--panel2); color: var(--text); font-weight: 700; border: 1px solid var(--line); }
/* ===== 房间顶部「用户信息框」：头像 / 昵称 / 余额（风格 A/B/C/D/E，由后台 roomInfoStyle 控制；off 时不显示） ===== */
.room-info { margin: 8px 10px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(31,37,51,.06); }
.room-info.hidden { display: none !important; }
.room-info .ri-av { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden; }
.room-info .ri-av .av, .room-info .ri-av .av-text { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.room-info .ri-mid { flex: 1; min-width: 0; }
.room-info .ri-l1 { display: flex; align-items: center; gap: 6px; }
.room-info .ri-nick { font-size: 14.5px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-info .ri-tag { font-size: 10px; font-weight: 700; color: #fff; padding: 2px 6px; border-radius: 6px; background: linear-gradient(135deg,var(--brand),var(--brand2)); flex-shrink: 0; }
.room-info .ri-bal { margin-top: 3px; font-size: 14.5px; font-weight: 800; color: var(--brand2); }
.room-info .ri-bal small { font-size: 11px; font-weight: 600; color: var(--sub); margin-left: 4px; }
.room-info .ri-btn { margin-left: auto; background: linear-gradient(135deg,var(--brand),var(--brand2)); color: #fff; border: none; border-radius: 9px; padding: 7px 12px; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.room-info .ri-link { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--brand); flex-shrink: 0; }
/* B 紫蓝渐变卡 */
.room-info.ri-B { background: linear-gradient(120deg,#4f7bff 0%,#7c5cff 55%,#9a5cff 100%); box-shadow: 0 6px 16px rgba(92,110,255,.28); color: #fff; position: relative; overflow: hidden; }
.room-info.ri-B:after { content: ""; position: absolute; right: -24px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.13); }
.room-info.ri-B .ri-tag { color: #4a3b8f; background: #ffe9a8; }
.room-info.ri-B .ri-bal { color: var(--gold); }
.room-info.ri-B .ri-bal small { color: rgba(255,255,255,.75); }
.room-info.ri-B .ri-btn { background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.5); position: relative; z-index: 1; }
.room-info.ri-B .ri-av-ring { padding: 2px; background: rgba(255,255,255,.85); }
.room-info.ri-B .ri-av-ring .av, .room-info.ri-B .ri-av-ring .av-text { border-radius: 50%; }
/* C 毛玻璃 */
.room-info.ri-C { background: rgba(255,255,255,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 4px 14px rgba(80,90,140,.12); }
.room-info.ri-C .ri-av-glow { box-shadow: 0 0 0 3px rgba(124,92,255,.18), 0 4px 10px rgba(124,92,255,.3); }
.room-info.ri-C .ri-tag { color: #7c5cff; background: rgba(124,92,255,.12); }
.room-info.ri-C .ri-btn { background: rgba(255,255,255,.85); border: 1px solid var(--line); color: var(--brand); }
/* D 紧凑条 */
.room-info.ri-D { margin: 6px 10px; padding: 6px 10px; background: #f7f8fd; border: 1px solid var(--line); gap: 9px; }
.room-info.ri-D .ri-av-sm { width: 34px; height: 34px; }
.room-info.ri-D .ri-nick { font-size: 12.5px; line-height: 1.3; }
.room-info.ri-D .ri-bal { font-size: 12.5px; line-height: 1.3; }
.room-info.ri-D .ri-bal small { font-size: 10.5px; }
/* E VIP 金卡（背景改透明 + 昵称金黄色）
原本是深紫渐变底 #2c2545→#3d3357（看着像黑），昵称/余额都是白字，浅色背景下发闷。
改：框底透明、昵称金黄；余额与按钮同步换成深金，保证透明底上仍清晰可读。
注：原 .ri-bal{color:var(--gold)} 里的 --gold 全项目未定义，实际是继承的白色，一并修正。 */
.room-info.ri-E { background: transparent; border: 1px solid rgba(212,160,23,.55); box-shadow: 0 2px 10px rgba(212,160,23,.12); color: var(--text); }
.room-info.ri-E .ri-nick { color: #D9A21B; }
.room-info.ri-E .ri-tag { color: #fff; background: linear-gradient(135deg,#D9A21B,#B8860B); }
.room-info.ri-E .ri-bal { color: #B8860B; }
.room-info.ri-E .ri-bal small { color: var(--sub); }
.room-info.ri-E .ri-av-gold { padding: 2px; background: linear-gradient(135deg,#D9A21B,#B8860B); }
.room-info.ri-E .ri-av-gold .av, .room-info.ri-E .ri-av-gold .av-text { border-radius: 50%; }
.room-info.ri-E .ri-acts { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.room-info.ri-E .ri-acts button { font-size: 11.5px; font-weight: 700; padding: 6px 10px; border-radius: 8px; background: rgba(212,160,23,.1); border: 1px solid rgba(212,160,23,.5); color: #B8860B; }
.room-info.ri-E .ri-acts button.solid { background: linear-gradient(135deg,#D9A21B,#B8860B); color: #fff; border-color: transparent; }
/* ===== [任务四十五~四十八] 房间信息框下：期号 / 封盘倒计时 / 最新开奖号（刮奖）
两行式：第一行 = 期号+倒计时（左） / 最新开奖期号（右）；第二行 = 号码（颜色同走势图）+ 刮奖按钮。
[任务四十七] 开奖后号码直接显示，只有封盘等开奖时才藏成「?」。
[任务四十八] 刮奖按钮挪到号码后面的空白处，且始终可点（封盘时点开卡里提示「正在开奖中」）。 */
.room-live { margin: 0 10px 8px; display: block; box-sizing: border-box; flex: 0 0 auto;
padding: 8px 12px 9px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(31,37,51,.06);
overflow: hidden; }
.room-live.hidden { display: none !important; }
.room-info.hidden + .room-live { margin-top: 8px; }
.room-live .rl-top { display: flex; align-items: center; gap: 10px; }
.room-live .rl-l { flex: 0 0 auto; min-width: 0; }
.room-live .rl-issue { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--sub);
line-height: 1.25; white-space: nowrap; }
.room-live .rl-issue b { font-size: 12.5px; font-weight: 800; color: var(--text); letter-spacing: .2px;
font-variant-numeric: tabular-nums; }
.room-live .rl-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: #c9d0de; }
.room-live.rl-s-betting .rl-dot { background: #22c55e; animation: rlPulse 1.6s infinite; }
.room-live.rl-s-closed .rl-dot { background: #f0a13a; }
.room-live .rl-cd { margin-top: 3px; font-size: 11.5px; color: var(--sub); line-height: 1.2; white-space: nowrap; }
.room-live .rl-cd b { margin: 0 2px; font-size: 15px; font-weight: 800; color: var(--brand);
font-variant-numeric: tabular-nums; }
.room-live .rl-cd.rl-warn b { color: #f0a13a; }
.room-live .rl-cd.rl-urgent b { color: #e23b3b; }
.room-live .rl-cd.rl-urgent { animation: rlBlink 1s infinite; }
.room-live .rl-r { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
justify-content: flex-end; padding-left: 9px; border-left: 1px solid #e6ebf4;
cursor: pointer; -webkit-tap-highlight-color: transparent; }
.room-live .rl-tag { font-size: 10.5px; color: var(--sub); white-space: nowrap; }
.room-live .rl-tag-iss { font-style: normal; font-size: 10.5px; font-weight: 700; color: #98a1b3;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* [任务四十八] 号码行：号码占满剩余宽度（放不下就在自己区域里左右滑），按钮固定贴在后面 */
.room-live .rl-nrow { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.room-live .rl-nums { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; gap: 3px; overflow-x: auto;
padding-bottom: 1px; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: pointer; }
.room-live .rl-nums::-webkit-scrollbar { display: none; }
/* 「刮奖」小按钮：一直可点，封盘时点开卡里提示「正在开奖中…」 */
.room-live .rl-sc-btn { flex: 0 0 auto; padding: 2px 7px; border-radius: 10px;
font-size: 10px; font-weight: 800; letter-spacing: .3px; color: #8a5a00; white-space: nowrap;
background: linear-gradient(135deg,#ffe08a,#f5b942); box-shadow: 0 1px 4px rgba(240,161,58,.32);
animation: rlGift 1.9s ease-in-out infinite; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@keyframes rlGift { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
/* 号码块：默认方形（十车道 b1~b10 / PC28 骰子），.rl-round 是圆形（六合彩波色 / 五车道蓝球）
底色与字色由 JS 按 chart.py 的规则写在 style 上，保证和「走势」那张图一致 */
.room-live .rl-num { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; display: flex;
align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; box-sizing: border-box;
font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: -.2px;
font-variant-numeric: tabular-nums; color: #3a4358; background: #f1f4fa; border: 1px solid #e4e9f3; }
.room-live .rl-num.rl-round { border-radius: 50%; }
.room-live .rl-num.rl-num-sp { box-shadow: 0 0 0 2px #f3c73f; } /* 六合彩特码：金边 */
.room-live .rl-num.rl-num-q { background: #eef1f7; border: 1px dashed #d5dbe6; color: #b3bccb; }
/* [任务五十四] 冠亚和徽标：赛车类号码后面显示 冠军+亚军 = 和13 */
.room-live .rl-cysum { flex: 0 0 auto; height: 22px; padding: 0 7px; border-radius: 6px; display: flex;
align-items: center; justify-content: center; white-space: nowrap; box-sizing: border-box;
font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .2px;
font-variant-numeric: tabular-nums; color: #8a5a00;
background: linear-gradient(135deg,#fff3d1,#ffe0a3); border: 1px solid #f2cd7c; }
.room-live .rl-empty { font-size: 11px; color: #b6bdcc; }
@keyframes rlPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,.18); } 50% { box-shadow: 0 0 0 5px rgba(34,197,94,.04); } }
@keyframes rlBlink { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
/* ===== [任务四十六] 刮奖浮层（盖住开奖信息 → 用手指刮开才看到号码） ===== */
.scr-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 120;
display: flex; align-items: center; justify-content: center; padding: 18px;
background: rgba(10,14,24,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
animation: scrFade .18s ease-out; }
@keyframes scrFade { from { opacity: 0; } to { opacity: 1; } }
.scr-card { position: relative; width: 100%; max-width: 340px; box-sizing: border-box;
border-radius: 18px; padding: 15px 16px 13px;
background: linear-gradient(160deg,#fffdf6 0%,#fff6e3 58%,#ffefd0 100%);
border: 1px solid rgba(212,160,23,.45); box-shadow: 0 18px 50px rgba(0,0,0,.45);
animation: scrUp .22s ease-out; }
@keyframes scrUp { from { transform: translateY(18px) scale(.97); opacity: .5; } to { transform: none; opacity: 1; } }
.scr-top { display: flex; align-items: center; justify-content: space-between; }
.scr-title { font-size: 15px; font-weight: 800; color: #8a5a00; letter-spacing: .5px; }
.scr-x { width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%;
background: rgba(120,130,160,.13); color: #8a93a8; font-size: 17px; line-height: 1; font-family: inherit; }
.scr-sub { margin-top: 2px; font-size: 12px; font-weight: 700; color: #a8834a;
font-variant-numeric: tabular-nums; }
.scr-tip { margin: 10px 0 8px; text-align: center; font-size: 13.5px; font-weight: 800;
color: #c0392b; line-height: 1.35; }
.scr-tip-hot { background: linear-gradient(90deg,#ff6b6b,#f5a623,#ff6b6b);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.scr-tip-wait { color: #8a93a8; font-weight: 700; }
.scr-tip-win { color: #d0021b; font-size: 16px; }
.scr-stage { position: relative; display: flex; align-items: center; justify-content: center;
min-height: 84px; border-radius: 14px; overflow: hidden;
background: radial-gradient(circle at 50% 0%, #fff8e6, #ffeec7);
border: 1px dashed rgba(212,160,23,.45); }
.scr-stage-wait { background: #f7f9fc; border: 1px dashed #dfe5ef; }
.scr-prize { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; justify-content: center;
padding: 16px 4px; }
.scr-prize .rl-num { width: 25px; height: 25px; border-radius: 7px; font-size: 11.5px; }
.scr-prize .rl-num.rl-round { border-radius: 50%; }
.scr-canvas { position: absolute; left: 0; top: 0; touch-action: none; cursor: crosshair; }
.scr-foot { margin-top: 8px; text-align: center; font-size: 11px; color: #b09a72; }
.scr-wait { display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 14px; color: #8a93a8; font-size: 12.5px; }
.scr-wait em { font-style: normal; }
.scr-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #dbe2ee;
border-top-color: #5a6273; animation: scrSpin .8s linear infinite; }
@keyframes scrSpin { to { transform: rotate(360deg); } }
/* ===== 房间「快捷报账」按钮 + 面板（按钮/金额由后台按房间配置） ===== */
.chat-quick{height:34px;padding:0 13px;border-radius:17px;border:none;flex-shrink:0;font-size:13px;font-weight:700;
color:#5a3d00;background:linear-gradient(135deg,#ffd76a,#f0a13a);box-shadow:0 2px 8px rgba(240,161,58,.35);
font-family:inherit;letter-spacing:.5px}
.qp{position:fixed;top:0;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:flex-end;justify-content:center}
.qp.hidden{display:none!important}
.qp-mask{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45)}
.qp-card{position:relative;width:100%;max-width:480px;box-sizing:border-box;background:#fff;border-radius:16px 16px 0 0;
padding:14px 14px 22px;box-shadow:0 -6px 24px rgba(0,0,0,.2);animation:qpUp .18s ease-out;max-height:78vh;overflow-y:auto}
@keyframes qpUp{from{transform:translateY(36px);opacity:.5}to{transform:translateY(0);opacity:1}}
.qp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.qp-title{font-size:15px;font-weight:800;color:#1f2533}
.qp-close{background:none;border:none;font-size:24px;line-height:1;color:#a5adbd;padding:0 6px}
.qp-tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.qp-tab{padding:7px 18px;border-radius:8px;border:1px solid #dfe4ee;background:#f6f7fa;font-size:14px;font-weight:700;color:#5a6273;font-family:inherit}
.qp-tab.active{background:#2f7bff;border-color:#2f7bff;color:#fff}
.qp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.qp-item{padding:15px 4px;border:1px solid #e3e8f2;border-radius:8px;background:#fff;font-size:14px;font-weight:600;
color:#1f2533;text-align:center;word-break:break-all;font-family:inherit;line-height:1.3}
.qp-item.active{background:#2f7bff;border-color:#2f7bff;color:#fff}
.qp-item:active{transform:scale(.97)}
.qp-amounts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.qp-item.active{background:#2f7bff;border-color:#2f7bff;color:#fff;box-shadow:0 3px 9px rgba(47,123,255,.3)}
.qp-sel{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:#2f5fd0;background:#eef3ff;border-radius:8px;padding:7px 10px;margin-bottom:10px;line-height:1.6}
.qp-sel.hidden{display:none!important}
.qp-sel-clear{border:none;background:none;color:#e23b3b;font-size:12.5px;font-weight:700;font-family:inherit;text-decoration:underline;padding:0;cursor:pointer}
.qp-sel-tip{color:#8a93a8}
.qp-amt{width:52px;height:52px;border-radius:50%;border:none;color:#fff;font-size:16px;font-weight:800;
display:flex;align-items:center;justify-content:center;font-family:inherit;flex-shrink:0}
.qp-amt:active{transform:scale(.94)}
.qp-amt.c0{background:linear-gradient(135deg,#ff6b6b,#ee3b3b);box-shadow:0 3px 9px rgba(238,59,59,.3)}
.qp-amt.c1{background:linear-gradient(135deg,#4fa3ff,#1e7cff);box-shadow:0 3px 9px rgba(30,124,255,.3)}
.qp-amt.c2{background:linear-gradient(135deg,#3ecf8e,#12b886);box-shadow:0 3px 9px rgba(18,184,134,.3)}
.qp-tip{margin-top:14px;text-align:center;font-size:12px;color:#a5adbd;line-height:1.5}
/* 报账输入行（品种/金额点选后拼接在这里，可编辑，点发送一次性发出） */
.qp-inputrow{display:flex;gap:8px;margin-bottom:14px}
.qp-input{flex:1;min-width:0;box-sizing:border-box;padding:11px 12px;border:1px solid #dfe4ee;border-radius:10px;
font-size:15px;font-family:inherit;color:#1f2533;background:#fff}
.qp-input:focus{outline:none;border-color:#2f7bff;box-shadow:0 0 0 3px rgba(47,123,255,.12)}
.qp-send{padding:0 20px;border-radius:10px;border:1px solid #cfd6e4;background:#eef1f6;font-size:15px;font-weight:700;
color:#1f2533;font-family:inherit;flex-shrink:0}
.qp-send:active{transform:scale(.97)}
/* ===== 流水记录（我的 → 流水记录）：一行一彩种 ===== */
.fr-wrap{padding:12px 14px 24px}
.fr-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;
box-shadow:0 1px 6px rgba(20,40,80,.06)}
.fr-table th,.fr-table td{padding:12px 14px;font-size:14px;border-bottom:1px solid #eef1f6;text-align:left}
.fr-table thead th{background:#f6f8fc;color:#5a6478;font-weight:600;font-size:13px}
.fr-table tbody tr:last-child td{border-bottom:none}
.fr-r,.fr-flow{text-align:right}
.fr-name{color:#1f2533}
.fr-flow{color:#f39c12;font-weight:700}
.fr-empty{text-align:center;color:#9aa3b5;padding:26px 0}
.fr-table tfoot td{background:#f8fafd;font-weight:700;color:#1f2533;border-top:1px solid #e6ebf3;border-bottom:none}
.fr-table tfoot .fr-r{color:#f39c12}
/* ===== [任务三十九 · 2026-10-17] 弹窗固定外框 + 内容区滚动 =====
问题：.modal-box 原本不限高、.modal-body 不滚动，
「玩法说明」这类 200~700 字的文案会把弹窗撑到屏幕之外，
底部「知道了」按钮被顶出可视区，手机上根本点不到关闭。
方案：弹窗最高 82vh（dvh 优先，规避 iOS 地址栏抖动），
标题栏与按钮栏固定可见，只有正文区域滚动；
另加右上角 × 关闭按钮（配合 JS 的遮罩点击 / ESC 关闭）。 */
.modal{padding:14px;box-sizing:border-box}
.modal-box{position:relative;display:flex;flex-direction:column;box-sizing:border-box;
max-height:82vh;max-height:82dvh;overflow:hidden}
.modal-title{flex:0 0 auto;padding-right:26px}
.modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
text-align:left;word-break:break-word;padding-right:2px}
.modal-actions{flex:0 0 auto}
/* 正文里的块（长文案 / 表单）保持自然高度，由外框滚动，避免被 flex 压扁 */
.modal-body>*{flex-shrink:0}
.modal-body::-webkit-scrollbar{width:5px}
.modal-body::-webkit-scrollbar-track{background:transparent}
.modal-body::-webkit-scrollbar-thumb{background:rgba(80,90,120,.26);border-radius:3px}
.modal-x{position:absolute;top:8px;right:8px;z-index:2;width:26px;height:26px;padding:0;
display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;
background:rgba(120,130,160,.13);color:var(--sub);font-size:17px;line-height:1;font-family:inherit;cursor:pointer}
.modal-x:active{background:rgba(120,130,160,.26)}
/* 玩法说明 / 游戏介绍 正文：行距略收紧，长列表更好读 */
.y-rule-body{color:var(--text);line-height:1.62;font-size:14px;white-space:pre-wrap}
/* ================= [任务四十一] 房间右侧圆形工具：走势 / 查询 / 赔率 =================
目的：玩家想看走势图、自己的未结算注单、本房间赔率时，点一下就能看，
不用再往群里发 3 / 4 / 1 —— 群里少一堆消息，服务器也少生成好几次图。
位置：房间页右侧悬浮，贴着输入框上方；不遮挡消息（消息区右侧留出 58px）。 */
#page-room{position:relative}
.room-tools{position:absolute;right:6px;bottom:74px;z-index:7;display:flex;flex-direction:column;gap:10px;align-items:center}
.rt-btn{width:48px;height:48px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.55);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
background:linear-gradient(135deg,rgba(124,92,255,.95),rgba(255,90,138,.95));color:#fff;
font-size:12px;font-weight:800;letter-spacing:1px;line-height:1.15;
box-shadow:0 4px 14px rgba(90,60,160,.3);transition:transform .12s ease,filter .12s ease}
.rt-btn .rt-ico{font-size:12px;line-height:1;margin-bottom:1px;opacity:.95}
.rt-btn:active{transform:scale(.93);filter:brightness(.94)}
.rt-btn:focus-visible{outline:2px solid var(--brand2);outline-offset:2px}
#page-room .msgs{padding-right:60px}
@media (max-width:360px){
.rt-btn{width:44px;height:44px;font-size:11px}
.room-tools{right:4px;bottom:70px;gap:8px}
#page-room .msgs{padding-right:56px}
}
/* ---- 三个浮层共用样式（走势图 / 注单 / 赔率）---- */
.modal-box.wide{width:92%;max-width:420px}
.rt-loading{display:flex;align-items:center;justify-content:center;gap:9px;padding:28px 0;color:var(--sub);font-size:13px}
.rt-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--brand);animation:rtspin .8s linear infinite;flex:0 0 auto}
@keyframes rtspin{to{transform:rotate(360deg)}}
.rt-chart-img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--line);background:#fff}
.rt-imgwrap{position:relative;min-height:150px}
.rt-imgload{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:8px;
background:var(--panel2);border:1px dashed var(--line);border-radius:10px;color:var(--sub);font-size:13px;text-align:center;padding:10px}
.rt-sub{font-size:12px;color:var(--sub);text-align:center;line-height:1.5}
.rt-pre{margin:0;font-family:inherit;font-size:13px;line-height:1.75;white-space:pre-wrap;word-break:break-word;
color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.rt-sum{display:flex;align-items:center;justify-content:space-between;gap:10px;
background:linear-gradient(135deg,rgba(124,92,255,.09),rgba(255,90,138,.09));
border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;
position:sticky;top:0;z-index:1;backdrop-filter:blur(2px)}
.rt-sum b{font-size:16px;color:var(--brand2)}
.rt-sum em{font-style:normal;color:var(--sub);font-size:12px}
.rt-group{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rt-ghead{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;
background:var(--panel2);font-size:12.5px;font-weight:800;color:var(--text)}
.rt-ghead span{font-weight:600;color:var(--sub);font-size:11.5px}
.rt-item{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:9px 10px;border-top:1px solid var(--line)}
.rt-item:first-child{border-top:none}
.rt-item .rt-l{min-width:0;flex:1;font-size:13.5px;word-break:break-word;line-height:1.45}
.rt-item .rt-l em{display:block;font-style:normal;font-size:11px;color:var(--sub);margin-top:2px}
.rt-item .rt-amt{flex:0 0 auto;font-weight:800;color:var(--brand);font-size:14px}
.rt-empty{text-align:center;color:var(--sub);font-size:13px;padding:26px 6px;line-height:1.7}
/* ===== 身份卡（任务六十二）：生成 / 保存 / 相册识别 / 扫码 ===== */
.idcard-stage{display:flex;justify-content:center;padding:2px 0 10px}
.idcard-stage img{width:100%;max-width:290px;border-radius:16px;display:block;
box-shadow:0 22px 44px -26px rgba(20,21,25,.75),0 0 0 1px rgba(232,224,212,.9)}
.idcard-tip{font-size:12px;line-height:1.7;color:#9a9083;text-align:center;margin:2px 2px 12px}
.idcard-tip b{color:#a9803f;font-weight:600}
.idcard-tip.sub{font-size:11px;color:#b6ac9f;margin:10px 4px 0;line-height:1.65}
.idcard-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.idcard-btn{height:44px;border-radius:12px;border:1px solid #e8e0d4;background:#fbf8f3;color:#3a3b43;
font-family:inherit;font-size:13.5px;font-weight:600;letter-spacing:.02em;transition:transform .14s,opacity .14s}
.idcard-btn:active{transform:translateY(1px);opacity:.92}
.idcard-btn.main{background:linear-gradient(135deg,#3a3b43 0%,#202127 55%,#141519 100%);
color:#f2e2c4;border-color:transparent;box-shadow:0 12px 24px -18px rgba(20,21,25,.9);
animation:idcardBreath 2.4s ease-in-out 1}
@keyframes idcardBreath{0%,100%{box-shadow:0 12px 24px -18px rgba(20,21,25,.9)}
50%{box-shadow:0 10px 26px -12px rgba(201,160,99,.55),0 0 0 3px rgba(201,160,99,.12)}}
.idcard-btn.ghost{grid-column:1/-1;height:38px;background:transparent;border-style:dashed;color:#a99e8f;font-size:12.5px}
/* [任务六十四] 刚生成完：保存按钮呼吸 3 次，提醒「这一步还没做」 */
.idcard-btn.main.pulse{animation:idcardBreath 1.7s ease-in-out 3}
/* [任务六十三] 一键生成：加载态 + 自动转正提示 */
.idcard-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
min-height:220px;color:#9a9083;font-size:13px}
.idcard-loading i{width:30px;height:30px;border-radius:50%;border:2px solid #ece4d8;border-top-color:#c9a063;
animation:idcardSpin .8s linear infinite}
@keyframes idcardSpin{to{transform:rotate(360deg)}}
.idcard-done{display:flex;flex-direction:column;align-items:center;gap:3px;margin:0 0 12px;padding:10px 12px;
border-radius:14px;background:linear-gradient(135deg,#fdf6e9,#faf0dc);border:1px solid #eddfc4}
.idcard-done b{font-size:13px;font-weight:700;color:#8a6222;letter-spacing:.02em}
.idcard-done span{font-size:11px;color:#a98f63;letter-spacing:.02em}
/* 相册识别 / 扫码登录 */
.cs-tip{font-size:12.5px;line-height:1.7;color:#8f8577;margin-bottom:12px}
.cs-tip b{color:#a9803f;font-weight:600}
.cs-drop{display:flex;flex-direction:column;align-items:center;gap:5px;padding:24px 14px;
border:1px dashed #dccfb9;border-radius:16px;background:linear-gradient(180deg,#fdfaf4,#faf6ee);cursor:pointer}
.cs-drop:active{background:#f8f2e6}
.cs-ico{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#b08b52}
.cs-ico svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cs-drop-t{font-size:14px;font-weight:600;color:#3a3b43}
.cs-drop-s{font-size:10.5px;color:#b6ac9f;letter-spacing:.04em}
.cs-or{display:flex;align-items:center;gap:10px;margin:12px 0}
.cs-or i{flex:1;height:1px;background:#eee6da}
.cs-or span{font-size:10px;color:#b6ac9f;letter-spacing:.16em}
.cs-msg{margin-top:10px;font-size:12.5px;color:#8f8577;text-align:center;min-height:16px}
.cs-msg.bad{color:#d4574e}
.cs-cam{position:relative;margin-top:10px;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:3/4}
.cs-cam video{width:100%;height:100%;object-fit:cover;display:block}
.cs-cam-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cs-cam-frame i{width:64%;aspect-ratio:1;border:2px solid rgba(232,207,168,.92);border-radius:16px;
box-shadow:0 0 0 9999px rgba(0,0,0,.34)}