: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:0 26px;min-height:100vh;
background:radial-gradient(120% 80% at 50% 0%,#fff0f6 0%,#eef1f8 60%)}
.auth-logo{font-size:46px;font-weight:900;letter-spacing:4px;
background:linear-gradient(135deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-sub{color:var(--sub);margin:8px 0 26px;letter-spacing:1px}
.auth-card{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.auth-tabs{display:flex;gap:8px;margin-bottom:14px}
.atab{flex:1;padding:10px;border-radius:10px;background:var(--panel2);color:var(--sub);font-weight:700}
.atab.active{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-form input{padding:13px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--text);font-size:15px}
.btn-primary{margin-top:6px;padding:13px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-weight:800;font-size:16px}
.btn-wechat{margin-top:14px;width:100%;padding:12px;border-radius:10px;background:#07c160;color:#fff;font-weight:700}
.auth-msg{margin-top:12px;color:var(--red);font-size:13px;text-align:center;min-height:16px}
/* ===== 顶栏 ===== */
.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)}
/* ===== 轮播 ===== */
.banner{height:150px;border-radius:14px;overflow:hidden;position:relative;margin-bottom:12px}
.banner.big{height:300px}
.banner.top{height:180px;margin-bottom:10px}
.banner-slide{height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;font-weight:800;text-align:center;padding:10px}
/* 轮播图片 */
/* 轮播图片：绝对定位铺满整张横幅（不受 .banner-slide 的 padding 影响），
图片内容用 object-fit:cover 裁切填满 —— 左右不留白边。
注意：用 top/left/right/bottom 而非 inset（inset 需 Chrome 87+） */
.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)}
/* ===== 钱包条 ===== */
.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}
/* ===== 福利 ===== */
.welfare-list{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.welfare-item{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.welfare-name{font-weight:800;font-size:16px}
.welfare-desc{color:var(--sub);font-size:13px;margin:6px 0 10px}
.welfare-imgs{position:relative;height:180px;overflow:hidden;border-radius:10px;border:1px solid var(--line);background:var(--panel2)}
.welfare-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;opacity:0;transition:opacity .8s ease;display:block}
.welfare-img.w-active{opacity:1}
.welfare-img-ph{position:absolute;inset:0;height:auto;width:auto;display:flex;align-items:center;justify-content:center;color:var(--sub);background:var(--panel2);opacity:1}
.welfare-dots{position:absolute;right:8px;bottom:6px;display:flex;gap:5px}
.welfare-dots span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.4)}
.welfare-dots span.wd-on{background:#fff}
.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:14px;font-weight:700}
.promo-stat b{color:var(--brand2)}
.promo-subs{margin-top:12px;display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.promo-sub{display:flex;align-items:center;gap:12px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.promo-sub-av{flex:0 0 auto;border-radius:50%;overflow:hidden;width:40px;height:40px}
.promo-sub-av .av{width:40px;height:40px}
.promo-sub-main{flex:1;min-width:0}
.promo-sub-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.promo-sub-user{color:var(--sub);font-weight:500;font-size:12px;margin-left:4px}
.promo-sub-sub{color:var(--sub);font-size:12px;margin-top:3px}
/* ===== 我的 ===== */
.me-card{display:flex;flex-direction:column;align-items:center;background:linear-gradient(135deg,#fff4ef 0%,#eef3ff 100%);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px}
.me-avatar{margin-bottom:8px}
.me-avatar .av{width:64px;height:64px}
.me-avatar .av-text{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}
.me-name{font-size:20px;font-weight:900}
.me-bal{margin:8px 0;color:var(--sub)} .me-bal b{color:var(--brand2);font-size:18px}
.me-row{color:var(--sub);font-size:13px;margin-top:4px} .me-row b{color:var(--text)}
.me-section{font-weight:800;margin:6px 4px 10px;color:var(--sub)}
.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}
.me-actions{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.me-actions input{padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--text)}
.me-pwd{display:flex;flex-direction:column;gap:10px}
.btn-ghost{padding:11px;border-radius:10px;background:var(--panel2);color:var(--text);border:1px solid var(--line);font-weight:700}
/* ===== 我的页面（新版：蓝渐变用户卡 + 圆形快捷入口 + 圆角列表）===== */
.me-page{background:#f4f6fb}
/* 顶部蓝色渐变用户卡 */
.me-hero{display:flex;align-items:center;gap:14px;padding:18px 16px;border-radius:16px;background:linear-gradient(135deg,#55a2ff 0%,#2f7bff 100%);box-shadow:0 8px 20px rgba(47,123,255,.25);color:#fff;margin-bottom:12px}
.me-hero-av{width:58px;height:58px;border-radius:50%;overflow:hidden;flex-shrink:0;background:rgba(255,255,255,.28)}
.me-hero-av .av,.me-hero-av .av-text{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:22px}
.me-hero-txt{min-width:0;flex:1}
.me-hero-name{font-size:19px;font-weight:800;line-height:1.25}
.me-hero-id{font-size:13px;opacity:.92;margin-top:3px}
.me-hero-bal{font-size:14px;font-weight:700;margin-top:6px}
/* 4 个圆形快捷入口 */
.me-quick{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:14px;padding:14px 4px;box-shadow:0 2px 10px rgba(31,37,51,.05);margin-bottom:12px}
.me-q{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;padding:0}
.me-q-ico{width:44px;height:44px;border-radius:14px;background:#eef4ff;color:#2f7bff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800}
.me-q-txt{font-size:12px;font-weight:600;color:#1f2533}
/* 功能列表 */
.me-list{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(31,37,51,.05)}
.me-li{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;padding:15px 16px;background:none;border:none;border-bottom:1px solid #f2f3f7;font-size:15px;color:#1f2533;text-align:left;cursor:pointer;font-family:inherit}
.me-list>*:last-child.me-li{border-bottom:none}
.me-li-t{font-weight:600}
.me-li-v{font-size:13px;color:#8a93a8;transition:transform .18s}
.me-li-v b{color:#1f2533}
.me-li-danger .me-li-t{color:#ff4d4f}
/* 折叠块（账号设置 / 钱包记录）*/
.me-detail{border-bottom:1px solid #f2f3f7}
.me-detail summary{list-style:none;cursor:pointer}
.me-detail summary::-webkit-details-marker{display:none}
.me-detail[open]>summary .me-li-v{transform:rotate(90deg)}
.me-detail-body{padding:2px 16px 16px;display:flex;flex-direction:column;gap:9px}
.me-detail-body input{padding:11px 12px;border-radius:10px;border:1px solid #e3e8f2;background:#fff;color:#1f2533;font-size:14px;width:100%;box-sizing:border-box}
.me-detail-body .btn-ghost{margin:0}
/* ===== 公告 ===== */
.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; }
/* ===== 房间「快捷报账」按钮 + 面板（按钮/金额由后台按房间配置） ===== */
.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)}