/* ================= 基础 ================= */
:root{
	--brand-blue:#12B7F5;
	--brand-blue-d:#0AA5E0;
	--bg:#F2F3F5;
	--card:#FFFFFF;
	--line:#EDEEF0;
	--text:#1A1A1A;
	--text-2:#8A8F99;
	--text-3:#B8BDC7;
	--red:#FA5151;
	--tabbar-h:56px;
	/* 沉浸式全屏：状态栏 / 底部导航栏高度（CSS px），由 JS 写入 */
	--safe-top:0px;
	--safe-bottom:0px;
	--app-h:auto;         /* 键盘弹出时由 JS 写入固定高度，平时 auto 跟随视口 */
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

/* 禁止系统自带的长按选择 / 长按弹出菜单（输入框除外，否则粘贴、选词会失效） */
html,body{
	-webkit-user-select:none;user-select:none;
	-webkit-touch-callout:none;
}
input,textarea{
	-webkit-user-select:text;user-select:text;
	-webkit-touch-callout:default;
}
html,body{height:100%;}
body{
	font-family:-apple-system,"PingFang SC","Helvetica Neue",Roboto,"Microsoft YaHei",sans-serif;
	background:var(--bg);color:var(--text);font-size:15px;line-height:1.4;
	overflow:hidden;-webkit-font-smoothing:antialiased;
}
button{font-family:inherit;border:0;background:none;color:inherit;cursor:pointer;}
input{font-family:inherit;border:0;outline:0;background:none;color:inherit;}
::-webkit-scrollbar{width:0;height:0;}

.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block;}

/* ================= 布局 ================= */
/* 高度默认跟随视口（inset:0）；只在键盘弹出时由 JS 写入 --app-h 冻住高度，
   这样启动/沉浸切换时不会有「高度变化 → 底部导航跳一下」的现象 */
.app{
	position:fixed;inset:0;height:var(--app-h);
	display:flex;flex-direction:column;overflow:hidden;
	/* z-index:1：把整个 App（含页签滑轨这个合成层）收进一个低层级，
	   保证遮罩(.mask 90) / 抽屉(100) / 聊天页(200) / 各种弹窗一定盖在它上面。
	   不写的话 .app 是 z-index:auto，滑轨上的 transform+will-change 会让列表变成
	   独立的合成层，个别 WebView 会把它画到遮罩之上 → 侧边栏开着还能点穿到列表。 */
	z-index:1;
}
/* 页签滑轨：三个视图横向并排，切页只改这里的 translate3d。
   只动合成层（transform）→ 不触发重排/重绘，跟手滑动也不会掉帧。
   ⚠️ 滑轨上有 transform，会成为 fixed 子元素的参照物：.view 里不要再放 position:fixed 的元素
      （遮罩 / 抽屉 / 聊天页 / 各种弹窗都在 .app 外面，不受影响）。 */
.tab-pager{
	flex:1;min-height:0;width:100%;
	display:flex;align-items:stretch;
	transform:translate3d(0,0,0);
	backface-visibility:hidden;
	will-change:transform;
	transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
/* 拖动跟手阶段：不要过渡，否则位移会被"吃掉" */
.tab-pager.dragging{transition:none;}
/* 每个视图是 flex 列：顶栏固定，列表区域自己滚动；宽度 = 滑轨宽度（一屏一个） */
.view{
	flex:0 0 100%;min-width:0;min-height:0;
	display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.view.active{display:flex;}

/* ================= 顶栏 ================= */
.topbar{
	flex:0 0 auto;display:flex;align-items:center;gap:10px;
	padding:calc(9px + var(--safe-top)) 12px 9px;background:var(--card);position:relative;z-index:5;
}
.topbar::after{
	content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
	background:var(--line);transform:scaleY(.6);
}
.topbar .title{flex:1;font-size:17px;font-weight:600;padding-left:4px;}
.search{
	flex:1;height:34px;background:#F3F4F6;border-radius:17px;
	display:flex;align-items:center;gap:6px;padding:0 12px;color:var(--text-3);
}
.search.wide{flex:1;}
.search .ico{width:16px;height:16px;stroke-width:2;}
.search input{flex:1;font-size:14px;color:var(--text);}
.search input::placeholder{color:var(--text-3);}
.icon-btn{
	width:34px;height:34px;display:flex;align-items:center;justify-content:center;
	color:var(--text-2);flex:0 0 auto;border-radius:50%;
}
.icon-btn:active{background:#F0F1F3;}

/* ================= 头像 ================= */
.avatar{
	width:46px;height:46px;border-radius:50%;flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;
	font-size:22px;color:#fff;position:relative;
	background:#DDE1E6;
}
/* 系统账号头像里的 SVG 图标（泡泡服务通知 = 铃铛 / 泡泡支付 = 卡片）：
   白色描边、尺寸跟着头像大小走（sm / lg / xl 都自适应） */
.avatar .av-sys-ico{
	width:56%;height:56%;
	fill:none;stroke:#fff;stroke-width:1.7;
	stroke-linecap:round;stroke-linejoin:round;
	pointer-events:none;
}
/* 换头像弹窗里的「从相册选图 / 恢复 emoji」按钮 */
.av-up{display:flex;gap:8px;margin-bottom:10px;}
.av-up-btn{
	flex:1;height:38px;border-radius:10px;background:#EAF6FF;color:#0A7FE0;
	font-size:13.5px;font-weight:600;
}
.av-up-btn.ghost{background:#F5F6F8;color:var(--text-3);}
.av-up-btn:active{filter:brightness(.96);}

/* 自定义头像图片：外面套一层「裁切层」铺满整个圆，图片再放大 3% 把边缘顶出裁切圆 ——
   这样圆边上不会露出一丝底色（"漏边"），图片比例和容器不完全一致时也不会在圆内露底。
   ⚠️ 不要给 .avatar 直接加 overflow:hidden：未读气泡 .badge（右上角外面）
      和在线点 .dot（右下角外面）都是绝对定位挂在容器边角上的，会被一起切掉。
      所以裁切放在独立的 .av-clip 这一层，气泡仍然在裁切层外面。 */
.avatar .av-clip{
	position:absolute;left:0;top:0;right:0;bottom:0;
	display:block;overflow:hidden;border-radius:inherit;
}
.avatar .av-img{
	display:block;width:100%;height:100%;
	object-fit:cover;object-position:center;
	border-radius:inherit;
	transform:scale(1.03);        /* 轻微外扩：消掉圆边那 1px 的底色缝（漏边） */
}
/* 图片加载失败（文件被删 / 断网 / 换域名）→ 隐藏破图，回落到 emoji，不留空白圆 */
.avatar.av-fail .av-clip{display:none;}
.avatar.av-fail::after{
	content:attr(data-emoji);
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	font-size:inherit;line-height:1;color:#fff;
}
.avatar.sm{width:34px;height:34px;font-size:17px;}
/* 头像外圈不用 border：border 会把图片往里挤、半透明时还会和图片叠在一起看着像漏边；
   改用 box-shadow 画在盒子外面，外沿尺寸和以前完全一致（62 + 2×2 = 66） */
.avatar.lg{width:66px;height:66px;font-size:28px;box-shadow:0 0 0 2px #fff;}
.avatar.xl{width:62px;height:62px;font-size:26px;box-shadow:0 0 0 2px rgba(255,255,255,.85);}
.avatar .dot{
	position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;
	background:#33D64B;border:2px solid #fff;
}
.badge{
	position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;
	background:var(--red);color:#fff;font-size:11px;line-height:19px;text-align:center;
	border-radius:10px;font-weight:500;box-sizing:border-box;
}

/* ================= 列表 ================= */
.list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.row{
	display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--card);
	position:relative;
}
.row:active{background:#F6F7F9;}
.row::after{
	content:"";position:absolute;left:72px;right:0;bottom:0;height:1px;
	background:var(--line);transform:scaleY(.6);
}
.row:last-child::after{display:none;}
.row.pinned{background:#FAFBFC;}
.row-main{flex:1;min-width:0;}
.row-top{display:flex;align-items:baseline;gap:6px;}
.row-name{
	font-size:16px;font-weight:500;color:var(--text);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.row-time{font-size:11px;color:var(--text-3);margin-left:auto;flex:0 0 auto;}
.row-desc{
	font-size:13px;color:var(--text-2);margin-top:3px;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tag{
	font-size:10px;color:#fff;background:var(--brand-blue);border-radius:3px;
	padding:1px 4px;flex:0 0 auto;transform:translateY(-1px);
}
.tag.gray{background:#C7CCD4;}

/* 联系人快捷入口 */
.quick{
	display:grid;grid-template-columns:repeat(4,1fr);gap:14px 0;
	padding:14px 8px;background:var(--card);margin-bottom:8px;flex:0 0 auto;
}
.quick-item{display:flex;flex-direction:column;align-items:center;gap:6px;}
.quick-ico{
	width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
	font-size:22px;color:#fff;position:relative;
}
.quick-txt{font-size:12px;color:var(--text-2);}

/* 字母分组标题：只要字母，不要整条灰色底，也不吸顶悬浮 */
.group-head{
	padding:5px 14px;font-size:12px;color:var(--text-2);background:transparent;
}

/* 字母索引条：只要字母，不要背后的圆角灰底条 */
.alpha-bar{
	position:fixed;right:3px;top:50%;transform:translateY(-50%);
	display:none;flex-direction:column;align-items:center;z-index:20;
	padding:0;border-radius:0;background:transparent;
}
.alpha-bar.show{display:flex;}
/* 字母不加发光/描边（以前那层白色 text-shadow 是为了压在复杂底图上，
   现在看着像"发光字"） */
.alpha-bar span{font-size:12px;color:var(--text-2);line-height:1.3;padding:0 1px;text-shadow:none;}

/* ================= 动态（QQ空间风） ================= */
/* 封面：大图 + 底部压暗 + 顶栏浮在上面
   ⚠️ 高度要带上安全区（--safe-top）：沉浸式下顶栏会被状态栏顶高，
   如果封面高度和内容位置写死，头像/名称就会和顶栏的标题叠在一起。 */
.qz-cover{
	position:relative;height:calc(170px + var(--safe-top));flex:0 0 auto;overflow:hidden;
	background:linear-gradient(135deg,#12B7F5 0%,#5B8DEF 52%,#7A6CF5 100%);
}
.qz-cover::before{
	content:"";position:absolute;left:-40px;top:-60px;width:230px;height:230px;border-radius:50%;
	background:radial-gradient(circle,rgba(255,255,255,.34),transparent 70%);
}
.qz-cover::after{
	content:"";position:absolute;left:0;right:0;bottom:0;height:70px;
	background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.30));
}
.qz-topbar{position:absolute;left:0;right:0;top:0;background:transparent;z-index:6;border-bottom:0;}
.qz-topbar::after{display:none;}
/* 「某个人的动态」页顶栏用的是 .pub-head（它自带 border-bottom:1px），
   而 .pub-head 在样式表里位置更靠后、优先级又相同，单写 .qz-topbar 压不住它 ——
   这里用「两个类名」提高优先级，否则该页封面会一直横着一条线。 */
.pub-head.qz-topbar{border-bottom:0;}
.qz-topbar .title{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35);}
.qz-topbar .icon-btn{color:#fff;background:rgba(255,255,255,.20);}
.qz-topbar .icon-btn:active{background:rgba(255,255,255,.34);}
/* 封面正中：头像在上、名称在下，整体水平居中
   top 同样要加安全区，否则会被「被状态栏顶高」的顶栏压住 */
.cover-user{
	position:absolute;left:0;right:0;top:calc(64px + var(--safe-top));bottom:8px;z-index:2;
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.cover-name{
	color:#fff;font-size:15.5px;font-weight:600;
	text-shadow:0 1px 6px rgba(0,0,0,.35);
	display:flex;align-items:center;justify-content:center;gap:5px;
}
/* 封面换成自定义图片后：铺满 + 居中裁切（光斑去掉，免得花） */
.qz-cover.has-img{background-size:cover;background-position:center;background-repeat:no-repeat;}
.qz-cover.has-img::before{display:none;}
/* 封面右下角「更改封面」（小胶囊；以前是 🖼️ 图标，改成文字更直白） */
.cover-edit{
	position:absolute;right:12px;bottom:10px;z-index:4;
	height:30px;padding:0 12px;border-radius:15px;
	background:rgba(0,0,0,.32);color:#fff;font-size:12.5px;line-height:1;
	display:flex;align-items:center;justify-content:center;
	text-shadow:0 1px 4px rgba(0,0,0,.28);
}
.cover-edit:active{background:rgba(0,0,0,.52);}
/* 别人的动态页：封面高度按「头像 + 签名」算（昵称不画在封面里 —— 顶栏标题已经写了）
   64(顶栏让位) + 66(头像) + 6(间距) + 18(签名) + 22(余量) ≈ 176px（同样含安全区） */
.up-cover{height:calc(176px + var(--safe-top));}
.up-cover .cover-user{top:calc(64px + var(--safe-top));}
.cover-sign{
	color:rgba(255,255,255,.88);font-size:12.5px;max-width:82%;text-align:center;
	text-shadow:0 1px 6px rgba(0,0,0,.35);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 封面里的顶栏标题也要是白的（pub-head 的标题） */
.qz-topbar .pub-title{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35);}
#userPage .moment-list.plain{padding-top:10px;}

/* 说说列表：浅灰底 + 白色圆角卡片 */
.moment-list{background:var(--card);padding-top:34px;}
.qz-list{background:var(--bg);padding:10px 0 4px;}
.qz-list .moment{
	background:var(--card);border-radius:12px;margin:0 10px 10px;padding:12px;
	display:flex;gap:10px;position:relative;
	box-shadow:0 2px 10px rgba(20,40,80,.05);
}
.qz-list .moment::after{display:none;}      /* 卡片之间不需要分隔线 */
.qz-list .cm-empty{background:var(--card);border-radius:12px;margin:0 10px;padding:34px 0;}
.moment{padding:14px;display:flex;gap:10px;position:relative;}
.moment::after{content:"";position:absolute;left:70px;right:0;bottom:0;height:1px;background:var(--line);transform:scaleY(.6);}
.moment:last-child::after{display:none;}
.moment-main{flex:1;min-width:0;}
.moment-name{font-size:15px;font-weight:500;color:#3A66A8;margin-bottom:5px;}
.moment-text{font-size:14.5px;color:var(--text);line-height:1.5;white-space:pre-wrap;}
.moment-imgs{display:grid;gap:5px;margin-top:8px;}
.moment-imgs.g1{grid-template-columns:1fr;max-width:56%;}
.moment-imgs.g2{grid-template-columns:repeat(2,1fr);max-width:66%;}
.moment-imgs.g3{grid-template-columns:repeat(3,1fr);max-width:100%;}
.moment-imgs .ph{
	aspect-ratio:1/1;border-radius:6px;overflow:hidden;position:relative;
	background:linear-gradient(135deg,#DCE6F2,#C6D4E8);
	display:flex;align-items:center;justify-content:center;font-size:26px;
}
.moment-imgs.g1 .ph{aspect-ratio:4/3;}
.moment-foot{
	display:flex;align-items:center;gap:14px;margin-top:8px;font-size:12px;color:var(--text-3);
}
.moment-foot .act{margin-left:auto;display:flex;gap:14px;color:var(--text-3);font-size:12px;}
.moment-foot .act span{display:flex;align-items:center;gap:3px;padding:2px 4px;border-radius:6px;}
.moment-foot .act span:active{background:#F0F1F3;}
.moment-foot .act .liked{color:var(--brand-blue);}
.moment-foot .act .del{color:var(--red);}
.moment-list.plain{padding-top:0;}
.ph img{width:100%;height:100%;object-fit:cover;display:block;}

/* 群搜索（加群弹窗） */
.gj-tip{margin:10px 2px 4px;font-size:12px;color:var(--text-3);}
.gj-list:empty{display:none;}
.gj-item{
	display:flex;align-items:center;gap:10px;padding:9px 2px;
	border-top:1px solid var(--line);
}
.gj-item:active{background:#F6F8FA;}
.gj-main{flex:1;min-width:0;}
.gj-name{font-size:15px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gj-sub{margin-top:2px;font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gj-tag{
	flex:0 0 auto;height:28px;line-height:28px;padding:0 12px;border-radius:14px;
	background:var(--brand-blue);color:#fff;font-size:13px;
}
.gj-tag.on{background:#EFF1F4;color:var(--text-2);}

/* 群管理 */
.gm-row{
	display:flex;align-items:center;gap:10px;padding:10px 14px;
	border-bottom:1px solid var(--line);
}
.gm-row:last-child{border-bottom:0;}
.gm-main{flex:1;min-width:0;}
.gm-name{display:flex;align-items:center;gap:6px;font-size:15px;}
.gm-sub{margin-top:2px;font-size:12px;color:var(--text-2);}
.gm-badge{
	font-style:normal;font-size:10px;padding:1px 6px;border-radius:8px;
	background:#EAF3FF;color:#3A66A8;
}
.gm-badge.mute{background:#FFEFEF;color:#C93B3B;}
.gm-ops{display:flex;gap:8px;flex:0 0 auto;}
.gm-btn{height:28px;padding:0 10px;border-radius:14px;font-size:12.5px;background:#F1F3F5;color:var(--text);}
.gm-btn.danger{background:#FFF0F0;color:var(--red);}
.gm-btn:active{opacity:.7;}
.gm-danger .set-label{color:var(--red);}

/* ================= 会员标识（红名 VIP / 金名 SVIP） ================= */
.vip-tag{
	display:inline-block;margin-left:5px;padding:0 5px;border-radius:7px;
	font-size:9.5px;font-style:normal;line-height:15px;vertical-align:1px;
	color:#fff;background:#E8455F;
}
.vip-tag.svip{background:linear-gradient(135deg,#E8B33A,#C8901A);}

/* 会员昵称颜色：VIP 红 / SVIP 金（动态、聊天、联系人、好友申请、群成员、评论、侧边栏 全局生效） */
.moment-name.vip,
.msg-name.vip,
.row-name.vip,
.fr-name.vip,
.gm-name.vip,
.cm-name.vip{color:#E8455F;}
.moment-name.svip,
.msg-name.svip,
.row-name.svip,
.fr-name.svip,
.gm-name.svip,
.cm-name.svip{color:#C8901A;}
.msg-name .vip-tag,
.gm-name .vip-tag{margin-left:4px;}

/* 蓝色渐变头部（侧边栏 / 动态封面）的昵称也跟着会员等级变色 */
.drawer-name.vip, .cover-name.vip{color:#FFC2CE;text-shadow:0 1px 6px rgba(0,0,0,.3);}
.drawer-name.svip, .cover-name.svip{color:#FFD98A;text-shadow:0 1px 6px rgba(0,0,0,.3);}
.drawer-name{display:flex;align-items:center;}
.drawer-name .vip-tag{margin-left:6px;}
.cover-name{display:flex;align-items:center;justify-content:flex-end;gap:6px;}

/* 快捷入口上的小圆点（有未读公告时显示） */
.quick-ico .dot-badge{
	position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;
	background:var(--red);box-shadow:0 0 0 2px #fff;
}

/* 官方公告列表 */
.nt-item{padding:12px 2px;border-bottom:1px solid var(--line);}
.nt-item:last-child{border-bottom:0;}
.nt-head{display:flex;align-items:center;gap:6px;}
.nt-title{font-size:15px;font-weight:600;flex:1;min-width:0;}
.nt-pin{
	font-style:normal;font-size:10.5px;color:#fff;background:var(--red);
	border-radius:8px;padding:1px 6px;flex:0 0 auto;
}
.nt-time{font-size:11.5px;color:var(--text-3);flex:0 0 auto;}
.nt-text{
	margin-top:6px;font-size:14px;color:var(--text);line-height:1.6;
	white-space:pre-wrap;word-break:break-word;
}

/* ================= 靓号中心 ================= */
.pn-bar{
	display:flex;align-items:center;gap:10px;margin-top:14px;padding:14px 16px;border-radius:14px;color:#fff;
	background:var(--qq-grad);
	box-shadow:0 10px 24px rgba(48,120,255,.26);
}
.pn-bar-main{flex:1;min-width:0;}
.pn-bar span{font-size:11.5px;opacity:.86;display:block;}
.pn-bar b{font-size:17px;letter-spacing:1px;font-weight:600;}
.pn-bar-coin{text-align:right;flex:0 0 auto;}
.pn-bar-coin b{font-size:19px;}

.pn-tabs{display:flex;gap:8px;overflow-x:auto;padding:14px 0 10px;-webkit-overflow-scrolling:touch;}
.pn-tab{
	flex:0 0 auto;height:30px;line-height:30px;padding:0 12px;border-radius:15px;
	font-size:12.5px;color:var(--text-2);background:var(--card);border:1px solid var(--line);
}
.pn-tab.active{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);font-weight:500;}

.pn-list{display:flex;flex-direction:column;gap:10px;}
.pn-item{
	position:relative;background:var(--card);border-radius:12px;padding:14px 14px 12px;
	display:flex;flex-direction:column;gap:6px;
}
.pn-no{
	font-size:20px;font-weight:700;letter-spacing:1px;color:var(--text);
	font-variant-numeric:tabular-nums;
}
.pn-meta{display:flex;align-items:center;gap:10px;font-size:12px;}
.pn-type{color:#B98A2F;background:#FFF9EC;border-radius:8px;padding:1px 8px;}
.pn-price{color:var(--brand-blue);font-weight:600;}
.pn-buy{
	position:absolute;right:12px;top:50%;transform:translateY(-50%);
	height:32px;padding:0 16px;border-radius:16px;font-size:13.5px;color:#fff;font-weight:500;
	background:var(--qq-grad);
	box-shadow:0 6px 14px rgba(48,120,255,.28);
}
.pn-buy:active{filter:brightness(1.06);}

/* ================= 泡泡钱包 ================= */
.wallet-card{
	margin-top:14px;padding:18px;border-radius:14px;color:#fff;
	background:var(--qq-grad);
	box-shadow:0 10px 24px rgba(48,120,255,.28);
}
.wallet-label{font-size:12px;opacity:.88;letter-spacing:1px;}
.wallet-balance{font-size:34px;font-weight:700;line-height:1.25;margin-top:2px;}
.wallet-note{font-size:11px;opacity:.82;margin-top:2px;}
.wallet-ops{display:flex;gap:10px;margin-top:14px;}
.wallet-btn{
	flex:1;height:36px;border-radius:18px;font-size:14px;font-weight:500;
	background:rgba(255,255,255,.22);color:#fff;border:1px solid rgba(255,255,255,.35);
}
.wallet-btn:active{background:rgba(255,255,255,.34);}
.wallet-btn.ghost{background:transparent;}
.wallet-stats{display:flex;gap:10px;margin-top:10px;}
.wallet-stat{
	flex:1;background:var(--card);border-radius:12px;padding:12px 14px;
	display:flex;flex-direction:column;gap:2px;
}
.wallet-stat b{font-size:18px;}
.wallet-stat b.in{color:#2FA36B;}
.wallet-stat b.out{color:var(--red);}
.wallet-stat span{font-size:12px;color:var(--text-2);}
.wallet-more{
	display:block;width:100%;height:40px;margin:12px 0 4px;border-radius:10px;
	background:var(--card);color:var(--brand-blue);font-size:14px;
}
.wal-log{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);}
.wal-log:last-child{border-bottom:0;}
.wal-main{flex:1;min-width:0;}
.wal-title{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wal-time{font-size:11.5px;color:var(--text-3);margin-top:2px;}
.wal-amount{font-size:16px;flex:0 0 auto;}
.wal-amount.in{color:#2FA36B;}
.wal-amount.out{color:var(--red);}

/* ================= 充值方式 / 微信扫码充值 ================= */
/* 钱包里点「充值」弹出来的两行选择（兑换码 / 微信扫码） */
.rc-way{
	display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;
	background:var(--card);
}
.rc-way + .rc-way{margin-top:10px;}
.rc-way:active{filter:brightness(.96);}
.rc-ico{
	flex:0 0 auto;width:40px;height:40px;border-radius:12px;font-size:20px;
	display:flex;align-items:center;justify-content:center;background:#EEF4FF;
}
.rc-ico.wx{background:#E7F8EC;}
.rc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left;}
.rc-txt b{font-size:15px;font-weight:600;color:var(--text);}
.rc-txt i{font-style:normal;font-size:12px;color:var(--text-2);}
.rc-arrow{font-style:normal;color:var(--text-3);font-size:18px;}

/* 微信扫码充值页：白底二维码卡片（深色主题也保持白底，扫码才认得出） */
#wxPayPage{z-index:236;}
.wxp-tip{margin:16px 18px 12px;font-size:13.5px;color:var(--text-2);text-align:center;}
.wxp-card{
	margin:0 16px;padding:16px 16px 12px;border-radius:18px;background:#fff;
	box-shadow:0 8px 26px rgba(0,0,0,.08);
	display:flex;flex-direction:column;align-items:center;
}
html[data-theme="dark"] .wxp-card{background:#fff;}
.wxp-qr{
	display:none;width:232px;height:232px;object-fit:contain;background:#fff;border-radius:10px;
	-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto;
}
.wxp-qr.show{display:block;}
.wxp-qr-holder{
	width:232px;height:232px;display:flex;align-items:center;justify-content:center;
	font-size:13px;color:#9AA1AC;
}
.wxp-qr-holder.hide{display:none;}
.wxp-empty{
	display:none;width:232px;height:232px;border:1px dashed #D7DCE4;border-radius:12px;
	flex-direction:column;align-items:center;justify-content:center;
	text-align:center;font-size:13px;line-height:1.7;color:#9AA1AC;padding:0 18px;
}
.wxp-empty.show{display:flex;}
.wxp-brand{margin-top:10px;font-size:12px;color:#AAB0B9;letter-spacing:.5px;}
.wxp-ops{display:flex;gap:10px;margin:16px 16px 0;}
.wxp-btn{
	flex:1;height:44px;border-radius:22px;font-size:15px;font-weight:600;
	background:var(--brand-blue);color:#fff;
}
.wxp-btn:active{filter:brightness(.95);}
.wxp-btn.ghost{background:transparent;color:var(--brand-blue);border:1px solid var(--brand-blue);}
.wxp-btn[disabled]{opacity:.5;}
.wxp-steps{margin:18px 18px 0;display:flex;flex-direction:column;gap:10px;}
.wxp-step{display:flex;gap:10px;font-size:13px;color:var(--text-2);line-height:1.5;}
.wxp-step b{
	flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:#EEF4FF;color:var(--brand-blue);
	font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;
}
.wxp-notice{
	margin:16px 18px 34px;padding:12px 14px;border-radius:12px;background:var(--card);
	font-size:13px;line-height:1.75;color:var(--text-2);white-space:pre-wrap;
}

/* ================= 提现 ================= */
#withdrawPage{z-index:237;}
.wd-hero{
	margin:14px 14px 0;padding:16px 18px;border-radius:16px;color:#fff;
	background:linear-gradient(135deg,#4EA8FF,#2E86E0 62%,#1F6FD0);
	box-shadow:0 8px 22px rgba(46,134,224,.24);
}
.wd-hero-label{font-size:12px;opacity:.9;}
.wd-hero-bal{display:flex;align-items:baseline;gap:8px;margin-top:4px;}
.wd-hero-bal b{font-size:30px;font-weight:700;line-height:1.2;}
.wd-hero-bal span{font-size:13px;opacity:.9;}
.wd-hero-tip{margin-top:8px;font-size:11.5px;line-height:1.6;opacity:.88;}

/* 收款方式：两行卡片（左二维码缩略图 / 中间说明 / 右上传按钮） */
.wd-acc{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);}
.wd-acc:last-child{border-bottom:0;}
.wd-acc.on{background:rgba(78,168,255,.07);}   /* 当前选中的收款方式 */
.wd-acc-qr{
	flex:0 0 auto;width:52px;height:52px;border-radius:10px;background:#F4F6F9;
	display:flex;align-items:center;justify-content:center;overflow:hidden;
	font-size:22px;color:var(--text-3);border:1px dashed var(--line);
}
.wd-acc-qr img{width:100%;height:100%;object-fit:contain;background:#fff;}
.wd-acc-qr.has{border-style:solid;border-color:transparent;background:#fff;}
.wd-acc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.wd-acc-main b{font-size:14.5px;font-weight:600;}
.wd-acc-main i{font-style:normal;font-size:11.5px;color:var(--text-3);line-height:1.4;}
.wd-acc-btn{
	flex:0 0 auto;height:30px;line-height:30px;padding:0 14px;border-radius:15px;
	font-size:13px;color:var(--brand-blue);background:rgba(78,168,255,.12);
}
.wd-acc-btn:active{filter:brightness(.95);}

/* 金额区 */
.wd-form{padding:4px 14px 14px;display:block;}
.wd-amount-row{display:flex;align-items:center;gap:6px;padding:10px 0 6px;border-bottom:1px solid var(--line);}
.wd-unit{font-size:22px;font-weight:600;color:var(--text);}
.wd-amount-row input{
	flex:1;min-width:0;font-size:30px;font-weight:700;letter-spacing:.5px;background:transparent;
}
.wd-amount-row input::placeholder{color:#C7CCD4;font-weight:400;}
.wd-all{flex:0 0 auto;height:28px;line-height:28px;padding:0 12px;border-radius:14px;
	font-size:12.5px;color:var(--brand-blue);background:rgba(78,168,255,.12);}
.wd-quick{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.wd-quick span{
	padding:0 14px;height:32px;line-height:32px;border-radius:16px;font-size:13px;
	background:var(--card);color:var(--text-2);
}
.wd-quick span.on{background:rgba(78,168,255,.14);color:var(--brand-blue);font-weight:600;}
.wd-sum{margin-top:14px;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--text-2);}
.wd-sum > div{display:flex;justify-content:space-between;align-items:center;}
.wd-sum b{font-weight:600;color:var(--text);}
.wd-sum b.in{color:#2FA36B;font-size:15px;}
.wd-rules{margin-top:12px;font-size:12px;line-height:1.7;color:var(--text-3);white-space:pre-wrap;}
.wd-submit{
	width:100%;height:46px;border-radius:23px;margin-top:16px;
	font-size:16px;font-weight:600;color:#fff;background:var(--brand-blue);
	box-shadow:0 8px 20px rgba(46,134,224,.28);
}
.wd-submit:active{filter:brightness(.96);}
.wd-submit[disabled]{opacity:.5;box-shadow:none;}

/* 提现记录 */
.wd-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);}
.wd-item:last-child{border-bottom:0;}
.wd-item-main{flex:1;min-width:0;}
.wd-item-title{font-size:14px;}
.wd-item-time{font-size:11.5px;color:var(--text-3);margin-top:3px;}
.wd-item-amt{font-size:15px;font-weight:600;flex:0 0 auto;text-align:right;}
.wd-item-amt small{display:block;font-weight:400;font-size:11px;color:var(--text-3);margin-top:3px;}
.wd-tag{font-style:normal;font-size:11px;padding:1px 6px;border-radius:8px;margin-left:6px;}
.wd-tag.s0{background:rgba(240,160,32,.15);color:#C98A12;}
.wd-tag.s1{background:rgba(47,163,107,.14);color:#2FA36B;}
.wd-tag.s2{background:rgba(250,81,81,.13);color:var(--red);}
.wd-tag.s3{background:#EDEFF2;color:var(--text-3);}
.wd-cancel{flex:0 0 auto;font-size:12.5px;color:var(--red);padding:4px 8px;}
.wd-voucher{display:inline-block;margin-top:6px;font-size:12.5px;color:var(--brand-blue);}
.wd-voucher:active{opacity:.7;}
/* 提现记录里的「手续费 x%（¥y）· 实际到账 ¥z」 */
.wd-item-fee{margin-top:4px;font-size:11.5px;color:var(--text-3);}

/* ================= 骰子比大小（聊天卡片 + 房间页） ================= */
/* 聊天里的游戏卡片 */
/* 游戏卡片（骰子 / 猜拳）：比普通气泡宽 —— 普通消息列只有 72% 屏宽，装不下整行状态 */
.msg-col.game-col{max-width:calc(100% - 46px);}

.dice-bubble{
	display:flex;align-items:center;gap:10px;
	/* 固定尺寸：状态文字可能是「等待中 / 对战中 / ⏳ 0:42」，长度会变，
	   卡片不能跟着一会长一会短；超出部分用省略号 */
	width:272px;max-width:100%;height:70px;overflow:hidden;
	background:linear-gradient(135deg,#FFF3E0,#FFE6C7) !important;color:#7A4A12 !important;
	border-radius:12px;padding:10px 12px;
}
html[data-theme="dark"] .dice-bubble{background:linear-gradient(135deg,#3A2E1F,#2C2419) !important;color:#FFD9A0 !important;}
.dice-bubble:active{filter:brightness(.97);}
.dice-card-ico{font-size:24px;line-height:1;flex:0 0 auto;}
.dice-card-txt{flex:1;min-width:0;overflow:hidden;}
.dice-card-title{
	font-size:15px;font-weight:600;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dice-card-sub{
	font-size:11px;opacity:.8;margin-top:3px;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dice-card-tag{
	flex:0 0 auto;max-width:76px;font-size:11px;padding:3px 8px;border-radius:10px;
	background:rgba(255,255,255,.6);color:#8A5A0B;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-theme="dark"] .dice-card-tag{background:rgba(255,255,255,.12);color:#FFD9A0;}

/* 房间页 */
#dicePage{z-index:238;}
.dice-body{padding:14px;display:flex;flex-direction:column;}
.dice-pot{
	align-self:center;font-size:12.5px;color:var(--text-2);
	background:var(--card);padding:6px 14px;border-radius:14px;
}
.dice-arena{display:flex;align-items:center;justify-content:space-between;margin-top:18px;gap:6px;}
.dice-side{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;}
.dice-av{
	width:56px;height:56px;border-radius:50%;overflow:hidden;background:#EEF2F7;
	display:flex;align-items:center;justify-content:center;font-size:24px;
}
.dice-av img{width:100%;height:100%;object-fit:cover;}
.dice-name{font-size:13px;font-weight:600;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dice-cubes{display:flex;gap:4px;height:38px;align-items:center;}
.dice-cubes i{
	font-style:normal;font-size:34px;line-height:1;color:#3C4350;
	display:inline-block;
}
html[data-theme="dark"] .dice-cubes i{color:#E6E9EF;}
.dice-cubes.rolling i{animation:diceShake .28s linear infinite;}
.dice-cubes.dim i{opacity:.22;}          /* 还没摇：显示三颗灰骰子占位 */
@keyframes diceShake{
	0%{transform:translateY(0) rotate(-8deg);}
	50%{transform:translateY(-6px) rotate(8deg);}
	100%{transform:translateY(0) rotate(-8deg);}
}
.dice-sum{font-size:12.5px;color:var(--text-2);}
.dice-vs{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--text-3);}
.dice-status{margin-top:18px;text-align:center;font-size:14px;font-weight:600;}
.dice-status.win{color:#2FA36B;}
.dice-status.lose{color:var(--red);}
.dice-tip{margin-top:8px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;padding:0 8px;}
.dice-ops{margin-top:auto;display:flex;gap:10px;padding-top:18px;}
/* 第二行：关闭房间 / 退出房间 —— 也是按钮样式（不是文字链接） */
.dice-ops2{margin-top:10px;display:flex;gap:10px;padding-bottom:6px;}
.dice-btn2{
	flex:1;height:40px;border-radius:20px;font-size:14px;font-weight:500;
	background:var(--card);color:var(--text-2);border:1px solid var(--line);
}
.dice-btn2:active{filter:brightness(.96);}
.dice-btn2.danger{
	background:rgba(250,81,81,.09);color:var(--red);border-color:rgba(250,81,81,.32);
}
.dice-btn2.danger:active{background:rgba(250,81,81,.16);}

/* ================= 猜拳 ================= */
#rpsPage{z-index:239;}
.rps-hand{
	height:54px;display:flex;align-items:center;justify-content:center;
	font-size:42px;line-height:1;
}
.rps-hand.dim{opacity:.28;}
.rps-picks{display:flex;gap:10px;margin-top:16px;}
.rps-pick{
	flex:1;height:78px;border-radius:16px;background:var(--card);border:1px solid var(--line);
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
}
.rps-pick span{font-size:28px;line-height:1;}
.rps-pick i{font-style:normal;font-size:11.5px;color:var(--text-2);}
.rps-pick:active{filter:brightness(.95);}
.rps-pick.on{border-color:var(--brand-blue);background:rgba(78,168,255,.10);}
.rps-pick[disabled]{opacity:.5;}
/* 聊天里的猜拳卡片（和骰子卡片同尺寸，换个蓝底色） */
.rps-bubble{background:linear-gradient(135deg,#E7F6FF,#D5EBFF) !important;color:#1F5A8A !important;}
html[data-theme="dark"] .rps-bubble{background:linear-gradient(135deg,#1D2B3A,#16222E) !important;color:#B8DCF7 !important;}
.rps-bubble .dice-card-tag{background:rgba(255,255,255,.65);color:#1F6FA8;}
html[data-theme="dark"] .rps-bubble .dice-card-tag{background:rgba(255,255,255,.12);color:#B8DCF7;}
.dice-btn{
	flex:1;height:46px;border-radius:23px;font-size:15.5px;font-weight:600;
	background:var(--brand-blue);color:#fff;
}
.dice-btn:active{filter:brightness(.96);}
.dice-btn.ghost{background:transparent;color:var(--text-2);border:1px solid var(--line);}
.dice-btn[disabled]{opacity:.5;}
/* 游戏列表里的一行 */
.game-row{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;background:var(--card);}
.game-row + .game-row{margin-top:10px;}
.game-row:active{filter:brightness(.96);}
.game-row .g-ico{
	width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
	font-size:22px;background:#FFF3E0;
}
.game-row .g-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.game-row .g-txt b{font-size:15px;}
.game-row .g-txt i{font-style:normal;font-size:11.5px;color:var(--text-2);}
.game-row.off{opacity:.55;}
.game-row .g-tag{font-size:11px;color:var(--text-3);}
.vip-plan{
	flex:1;position:relative;background:var(--card);border-radius:12px;padding:16px 8px 14px;
	text-align:center;border:1.5px solid transparent;transition:.2s;
}
.vip-plan.active{
	border-color:var(--lvc);background:linear-gradient(180deg,#FFFFFF,#FFFDF7);
	box-shadow:0 4px 14px rgba(0,0,0,.1);
}
.vip-plan.owned{border-color:#E4E7EB;background:#FAFBFC;}
.vip-plan-desc{margin-top:6px;font-size:11px;color:var(--text-2);line-height:1.45;}
.vip-plan-note.gray{background:#C7CCD4;}
.vip-plan-name{font-size:14px;font-weight:600;}
.vip-plan-coins{margin-top:4px;font-size:19px;font-weight:700;color:#B98A2F;}
.vip-plan-coins i{font-size:11px;font-style:normal;font-weight:400;margin-left:1px;}
.vip-plan-days{font-size:11.5px;color:var(--text-2);margin-top:2px;}
.vip-plan-note{
	position:absolute;top:-8px;right:6px;font-style:normal;font-size:10px;color:#fff;
	background:var(--red);border-radius:8px;padding:1px 6px;
}
.vip-balance{text-align:center;font-size:13px;color:var(--text-2);margin:18px 0 10px;}
.vip-balance b{color:var(--brand-blue);font-size:15px;}
.vip-buy{
	width:100%;height:48px;border-radius:24px;font-size:16px;font-weight:600;color:#fff;
	background:linear-gradient(120deg,#8A6BFF 0%,#B98A2F 140%);
	box-shadow:0 10px 24px rgba(120,80,200,.26);
}
.vip-buy:active{filter:brightness(1.05);}

/* ============================================================
   会员中心 v2（2026-10-18 重做）
   · 顶部会员卡按状态换色：未开通=深灰 / VIP=红 / SVIP=金
   · 特权改成两列小卡片（升级时把当前值划掉做对比）
   · 购买区改成**吸底栏**：左边价格 + 余额，右边按钮
   ============================================================ */
.vip-body{padding:14px 14px 0;}
.vip-hero{
	position:relative;overflow:hidden;border-radius:18px;padding:16px 16px 13px;color:#fff;
	background:linear-gradient(135deg,#3C424E,#232830);
	box-shadow:0 10px 26px rgba(20,24,32,.22);
	transition:background .25s;
}
.vip-hero.is-vip { background:linear-gradient(135deg,#E8455F,#8E1729 96%); }
.vip-hero.is-svip{ background:linear-gradient(135deg,#FFD24B,#C08100 94%); color:#3A2600; }
.vip-hero::after{
	content:"";position:absolute;right:-46px;top:-64px;width:170px;height:170px;border-radius:50%;
	background:rgba(255,255,255,.16);pointer-events:none;
}
.vh-row{display:flex;align-items:center;gap:12px;position:relative;z-index:1;}
.vh-crown{
	width:42px;height:42px;border-radius:13px;flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);
}
.vh-crown .ico{width:24px;height:24px;stroke-width:1.7;}
.vh-main{flex:1;min-width:0;}
.vh-title{font-size:17px;font-weight:700;}
.vh-sub{margin-top:4px;font-size:11.5px;opacity:.86;}
.vh-tag{
	flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.5px;
	padding:3px 8px;border-radius:8px;background:rgba(0,0,0,.2);
}
.vip-hero.is-svip .vh-tag{background:rgba(255,255,255,.4);color:#3A2600;}
.vh-foot{
	display:flex;align-items:center;justify-content:space-between;
	margin-top:14px;font-size:11.5px;opacity:.92;position:relative;z-index:1;
}
.vh-bal b{font-size:14px;}

/* 特权网格：两列小卡 */
.vip-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.vip-feat{background:var(--card);border-radius:12px;padding:12px 12px 11px;}
.vf-name{font-size:12px;color:var(--text-2);}
.vf-val{margin-top:5px;font-size:16px;font-weight:700;color:var(--text);}
.vf-up{
	margin-left:6px;font-size:11px;font-weight:400;color:var(--text-3);
	text-decoration:line-through;
}

/* 吸底购买栏 */
.vip-buybar{
	position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:12px;
	margin:16px -14px 0;padding:10px 14px calc(10px + var(--safe-bottom));
	background:var(--card);box-shadow:0 -6px 18px rgba(16,24,40,.08);
}
.vbb-left{flex:1;min-width:0;}
.vbb-price{font-size:17px;font-weight:700;color:#C08100;}
.vbb-tip{font-size:11.5px;color:var(--text-2);margin-top:2px;}
.vbb-tip b{color:var(--brand-blue);}
.vbb-btn{
	flex:0 0 auto;min-width:130px;height:44px;padding:0 18px;border-radius:22px;
	font-size:15px;font-weight:600;color:#fff;
	background:linear-gradient(120deg,#F2BC3C,#C08100);
	box-shadow:0 8px 20px rgba(192,129,0,.28);
}
.vbb-btn:active{filter:brightness(1.05);}
.vbb-btn:disabled{background:#D8DEE6;color:var(--text-3);box-shadow:none;}
/* 会员等级选择卡 */
.vip-levels{display:flex;gap:10px;}
.vip-lv{
	flex:1;background:var(--card);border-radius:12px;padding:14px 10px;
	border:1.5px solid transparent;transition:.2s;
}
.vip-lv.active{
	border-color:var(--lvc);box-shadow:0 4px 16px rgba(0,0,0,.09);
	background:linear-gradient(180deg,#FFFFFF,#FFFDF7);
}
.vip-lv-name{font-size:16px;font-weight:700;letter-spacing:1px;}
.vip-lv-desc{margin-top:5px;font-size:11.5px;color:var(--text-2);line-height:1.5;}

/* 权益对比表 */
.vip-table{background:var(--card);border-radius:12px;overflow:hidden;}
.vip-tr{display:flex;align-items:center;border-top:1px solid var(--line);}
.vip-tr:first-child{border-top:0;}
.vip-tr span{
	flex:1;padding:10px 4px;text-align:center;font-size:12.5px;color:var(--text);
}
.vip-tr span:first-child{flex:1.25;text-align:left;padding-left:14px;color:var(--text-2);}
.vip-tr.head span{font-weight:600;background:#FAFBFC;padding:11px 4px;}
.vip-tr.head span:first-child{color:var(--text);}
.vip-tr span.cur{font-weight:700;}

/* ================= 底部导航 ================= */
.tabbar{
	flex:0 0 auto;height:calc(var(--tabbar-h) + var(--safe-bottom));display:flex;background:var(--card);
	position:relative;z-index:30;border-top:1px solid var(--line);
	padding-bottom:var(--safe-bottom);
}
.tabbar::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--line);}
.tab{
	flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
	color:var(--text-3);font-size:11px;
}
.tab.active{color:var(--brand-blue);}
.tab .ico{width:24px;height:24px;}
.tab-txt{font-size:11px;}
.tab-ico{position:relative;display:block;}
.tab-badge{
	position:absolute;top:-4px;right:-10px;min-width:17px;height:17px;padding:0 5px;
	background:var(--red);color:#fff;font-size:10px;line-height:17px;text-align:center;
	border-radius:9px;font-style:normal;
}

/* ================= 抽屉 ================= */
.mask{
	position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;visibility:hidden;
	/* 遮罩淡入淡出放慢一点，和抽屉同步收尾 → 不会"啪"一下变暗 */
	transition:opacity .42s cubic-bezier(.16,.84,.28,1);z-index:90;
}
.mask.show{opacity:1;visibility:visible;}
.drawer{
	position:fixed;top:0;bottom:0;left:0;width:78%;max-width:320px;
	background:var(--bg);z-index:100;transform:translateX(-100%);
	/* 滑出/收回：0.42s，起步快、收尾长（iOS 那种自然的减速感）；阴影也一起渐变 */
	transition:transform .42s cubic-bezier(.16,.84,.28,1), box-shadow .42s ease;
	display:flex;flex-direction:column;overflow-y:auto;
	will-change:transform;
}
.drawer.open{transform:translateX(0);box-shadow:2px 0 18px rgba(0,0,0,.18);}
.drawer-head{
	display:flex;align-items:center;gap:12px;flex-wrap:wrap;
	padding:calc(26px + var(--safe-top)) 18px 18px;
	background:var(--qq-grad);
}
.drawer-info{min-width:0;}
.drawer-name{color:#fff;font-size:17px;font-weight:600;}
.drawer-bubble{color:rgba(255,255,255,.85);font-size:12px;margin-top:3px;}
.drawer-card{
	display:flex;margin:12px 14px 0;background:var(--card);border-radius:10px;
	box-shadow:0 2px 10px rgba(0,0,0,.07);padding:12px 0;position:relative;z-index:2;
}
.drawer-card-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;}
.drawer-card-item b{font-size:16px;}
.drawer-card-item span{font-size:11px;color:var(--text-2);}
.drawer-menu{margin-top:14px;}
.drawer-item{
	display:flex;align-items:center;gap:12px;padding:13px 18px;font-size:15px;
}
.drawer-item:active{background:var(--card);}
/* 侧边栏菜单图标（原 emoji → SVG）：左边一个圆角色块 + 描边图标。
   每个菜单一个色，**默认主题一套**（这里）、**深色主题一套**（theme.css 第 12 节）。
   图标本身走 currentColor（= --qi-fg），所以只换这两个变量就够。 */
.drawer-item .qi{
	width:30px;height:30px;border-radius:9px;flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;
	background:var(--qi-bg,#EEF0F3);color:var(--qi-fg,#5A6069);
}
.drawer-item .qi .ico{width:18px;height:18px;stroke-width:1.8;}
.drawer-item[data-icon="wallet"]  .qi{--qi-bg:#E8F2FF;--qi-fg:#2E86E0;}   /* 钱包：蓝 */
.drawer-item[data-icon="pretty"]  .qi{--qi-bg:#FFF4DE;--qi-fg:#C98A12;}   /* 靓号：金 */
.drawer-item[data-icon="vip"]     .qi{--qi-bg:#FFE9E4;--qi-fg:#E0503A;}   /* 会员：红 */
.drawer-item[data-icon="music"]   .qi{--qi-bg:#E4F7FF;--qi-fg:#0EA5D9;}   /* 音乐：青蓝 */
.drawer-item[data-icon="acc"]     .qi{--qi-bg:#E6F7F1;--qi-fg:#12A870;}   /* 账号：绿 */
.drawer-item[data-icon="theme"]   .qi{--qi-bg:#EEEBFF;--qi-fg:#6C5CE7;}   /* 主题：紫 */
.drawer-item[data-icon="settings"].qi{--qi-bg:#EDEFF2;--qi-fg:#5A6069;}   /* 设置：灰 */

/* 抽屉底部：退出登录 */
.drawer-logout{
	margin-top:12px;padding:15px 18px calc(26px + var(--safe-bottom));text-align:center;
	font-size:15px;color:var(--red);border-top:1px solid var(--line);
}
.drawer-logout:active{background:#FFF5F5;}

/* ================= 右上角「+」菜单 ================= */
.menu-mask{position:fixed;inset:0;z-index:110;display:none;}
.menu-mask.show{display:block;}
.plus-menu{
	position:fixed;top:60px;right:10px;min-width:160px;background:var(--card);
	border-radius:10px;box-shadow:0 6px 26px rgba(0,0,0,.18);padding:4px 0;z-index:120;
	opacity:0;visibility:hidden;transform:translateY(-8px) scale(.94);
	transform-origin:top right;transition:opacity .16s,transform .16s,visibility .16s;
}
.plus-menu.show{opacity:1;visibility:visible;transform:none;}
.plus-menu::before{
	content:"";position:absolute;top:-5px;right:15px;width:12px;height:12px;
	background:var(--card);transform:rotate(45deg);border-radius:2px;
}
.plus-item{
	display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:15px;color:var(--text);
	position:relative;z-index:1;
}
.plus-item + .plus-item{border-top:1px solid var(--line);}
.plus-item:active{background:#F2F3F5;}
.plus-item .qi{width:22px;text-align:center;font-size:16px;}

/* ================= 发表动态 ================= */
.pub-page{
	position:fixed;inset:0;z-index:210;background:var(--card);
	display:flex;flex-direction:column;visibility:hidden;
	overflow:hidden;                     /* 页面本身不滚动：滚动交给 .pub-body，横向一律锁死 */
	transform:translateX(100%);transition:transform .26s cubic-bezier(.32,.72,.28,1);
}
.pub-page.open{transform:none;visibility:visible;}
/* 卖家主页 / 市场搜索页：要盖在「商品详情(210)」「聊天页(215)」之上，
   否则从商品详情点卖家头像/在店铺聊天里点头像时，会被这两层盖住 → 看着"弹不出来" */
#mktSellerPage,
#mktCatePage,
#mktSearchPage{z-index:218;}
.pub-head{
	flex:0 0 auto;display:flex;align-items:center;gap:8px;
	padding:calc(8px + var(--safe-top)) 12px 8px;border-bottom:1px solid var(--line);
	position:relative;                    /* 标题绝对居中（见下面 .pub-title） */
}
/* ⚠️ 标题要**真正居中**：以前是 flex:1 + text-align:center，
   但左右两边元素宽度不一样（返回键 40px、右侧「发布」54px / 「提交」62px / 空占位 34px），
   标题盒子就被推偏了，看起来"所有标题都不居中"。
   改成绝对定位铺满整行、左右各留 66px 给按钮，中间按整行宽度居中。 */
.pub-title{
	position:absolute;left:0;right:0;top:0;bottom:0;
	padding:calc(8px + var(--safe-top)) 66px 8px;
	display:flex;align-items:center;justify-content:center;
	font-size:16px;font-weight:600;text-align:center;
	white-space:nowrap;overflow:hidden;
	pointer-events:none;                 /* 别挡住两边的按钮 */
}
/* 标题右边那个元素靠右（标题已不占 flex 位置） */
.pub-head > .pub-title + *{margin-left:auto;}
.text-btn{font-size:15px;color:var(--text-2);padding:6px 2px;}
.pub-submit{
	height:32px;padding:0 16px;border-radius:16px;background:var(--brand-blue);
	color:#fff;font-size:14px;flex:0 0 auto;
}
.pub-submit:disabled{background:#C9D6E0;}
.pub-body{
	flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
	padding:14px 14px calc(14px + var(--safe-bottom));
}
/* ⚠️ 只写 overflow-y:auto 时，overflow-x 会按规范变成 auto ——
   页面里只要有一个"比屏幕宽"的元素（气泡图案是绝对定位、能放到气泡外面，x 到 -50%~150%），
   整个内容区就能被手指左右拖着走（打包成 App 后尤其明显）。
   所以所有二级页 / 列表滚动容器都要显式 overflow-x:hidden；
   内部需要横滑的组件（.ts-hero / .ts-chips / .pn-tabs）自己有 overflow-x:auto，不受影响。 */
#pubText{
	width:100%;min-height:110px;font-size:16px;line-height:1.55;
	resize:none;border:0;outline:0;background:none;color:var(--text);
}
#pubText::placeholder{color:var(--text-3);}
/* 提示行：左边「还可以发 N 张图片」、右边「还可以写 N 字」。
   剩 20 字内变橙、写满变红；图片满了也变红（class 由 app.js 控制） */
.pub-meta{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	margin-top:4px;
}
.pub-count{
	font-size:12px;line-height:1.5;color:var(--text-3);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pub-count.warn{color:#E8A33D;}
.pub-count.full{color:#E0503A;}
.pub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:6px;}
/* 图片格子：不用 aspect-ratio（老内核不支持会高度塌陷），
   用 padding-bottom:100% 撑正方形，内容绝对定位居中 */
.pub-ph, .pub-add{
	position:relative;height:0;padding-bottom:100%;
	border-radius:8px;overflow:hidden;
}
.pub-ph{background:linear-gradient(135deg,#DCE6F2,#C6D4E8);}
.pub-ph img{
	position:absolute;left:0;top:0;width:100%;height:100%;
	object-fit:cover;display:block;
}
.pub-ph .ph-in{
	position:absolute;left:0;top:0;width:100%;height:100%;
	display:flex;align-items:center;justify-content:center;
	font-size:32px;color:var(--text);
}
.pub-ph .up-txt{font-size:11px;color:var(--text-3);}
.pub-ph .del{
	position:absolute;top:4px;right:4px;z-index:2;
	width:20px;height:20px;line-height:20px;border-radius:50%;text-align:center;
	background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-style:normal;
	box-shadow:0 0 0 1.5px rgba(255,255,255,.85);
}
.pub-ph.loading{background:#E7EAF0;}
.pub-add{
	border:1px dashed #C8CDD6;background:#FAFBFC;font-size:26px;color:var(--text-3);
}
.pub-add span{
	position:absolute;left:0;top:0;width:100%;height:100%;
	display:flex;align-items:center;justify-content:center;
}
.pub-add:active{background:#F0F1F3;}
.pub-row{
	display:flex;align-items:center;gap:6px;padding:14px 2px;font-size:15px;
	border-top:1px solid var(--line);margin-top:16px;
}
.pub-row + .pub-row{margin-top:0;}
.pub-label{flex:1;color:var(--text);}
.pub-value{color:var(--text-2);font-size:14px;}
.pub-arrow{width:15px;height:15px;color:var(--text-3);stroke-width:2;}

/* ================= 聊天页 ================= */
.chat-page{
	position:fixed;inset:0;z-index:200;
	/* 背景渐变画在下面的 ::before 固定层上（它不随键盘压缩），
	   但这里必须再垫一层**纯色兜底**：
	   键盘 ↔ 面板切换会改聊天页的高度，重绘时偶尔有一帧只画了内容、背景层还没跟上，
	   于是从缝隙里**透出下面的会话列表**（看着像闪了一下列表）。
	   元素自身的 background-color 跟元素同一个生命周期，不会单独漏绘，垫在下面正好兜住。
	   ⚠️ 只能是纯色，不能是渐变 —— 渐变会随高度拉伸，就是另一个"背景上抬"的问题。 */
	background-color:#F2F3F5;
	display:flex;flex-direction:column;
	transform:translateX(100%);
	/* 只给滑入/滑出做过渡。
	   ⚠️ 不要给 height 加过渡：键盘弹起时高度若平滑动画，消息区一边变矮、滚动位置一边跟不上，
	      会出现「下方先留白、再猛地滚到底」的闪动。高度瞬间变 + JS 同帧把消息贴回底部更稳。 */
	transition:transform .34s cubic-bezier(.22,.61,.36,1);
	visibility:hidden;
	/* 建立层叠上下文，让 ::before 的 z-index:-1 有效（.open 时会把 transform 去掉，靠它顶上） */
	isolation:isolate;
}
/* ⚠️ 打开状态下**不要留 transform**。
   translateX(0) 也是 transform，会让整个聊天页常驻一个全屏合成层；
   键盘 ↔ 面板切换会改它的高度，这一层就要重新栅格化 ——
   栅格化需要时间，期间下层（会话列表）就透上来了。
   改成 none 之后聊天页退回普通绘制，跟着页面一起画，不会再"整层重建"。
   过渡仍然正常：none → translateX(100%) 浏览器按 translateX(0) 插值。 */
.chat-page.open{transform:none;visibility:visible;}
/* 深色主题的兜底底色（同上面 .chat-page 的说明） */
html[data-theme="dark"] .chat-page{background-color:#111214;}
/* 聊天背景「固定层」：键盘弹起时 .chat-page 会变矮（让输入栏贴着键盘），
   但背景要始终铺满整屏、不跟着压缩 / 上抬 —— 所以背景单独画在一层上，
   高度用 --chat-full-h（= 键盘没弹时的整屏高度，由 app.js 记下，键盘弹起也不改）。
   ⚠️ 别把背景再写回 .chat-page 本身，否则会随高度变化重绘 → 就是"背景往上抬"。
   .chat-page 有 transform（建立层叠上下文），所以这里用 z-index:-1 就能垫在所有内容下方。 */
.chat-page::before{
	content:"";position:absolute;top:0;left:0;right:0;
	height:var(--chat-full-h,100vh);
	background:var(--chat-bg,#EDEFF2);
	pointer-events:none;z-index:-1;
}
.chat-head{
	flex:0 0 auto;display:flex;align-items:center;gap:6px;
	padding:calc(8px + var(--safe-top)) 8px 8px 4px;
	background:var(--chat-head-bg,var(--card));border-bottom:1px solid var(--line);
}
.chat-title{flex:1;display:flex;flex-direction:column;align-items:center;line-height:1.2;}
.chat-title span{
	font-size:16px;font-weight:600;
	display:flex;align-items:center;justify-content:center;gap:5px;
}
.chat-title span.vip{color:#E8455F;}      /* 单聊顶部：对方的会员颜色 */
.chat-title span.svip{color:#C8901A;}
.chat-title small{font-size:11px;color:var(--text-3);margin-top:2px;}
/* 市场店铺聊天：顶栏名字前的「店铺」标签（拼多多/闲鱼式） */
.chat-shop-tag{
	font-style:normal;font-size:10px;line-height:1;padding:2px 4px;border-radius:4px;
	background:rgba(255,106,0,.12);color:#FF6A00;flex:0 0 auto;transform:translateY(-1px);
}
/* 市场店铺聊天：顶部「正在咨询的商品」条（拼多多/闲鱼式，点它进商品详情） */
.chat-shop-bar{
	flex:0 0 auto;display:flex;align-items:center;gap:9px;
	margin:6px 10px 0;padding:7px 8px;
	background:var(--card);border-radius:12px;
	box-shadow:0 1px 4px rgba(16,24,40,.06);
	cursor:pointer;position:relative;z-index:1;
}
.chat-shop-bar:active{background:#F7F8FA;}
.csb-cover{
	width:44px;height:44px;border-radius:9px;flex:0 0 auto;overflow:hidden;
	display:flex;align-items:center;justify-content:center;
	background:#F2F3F5;color:#B8BDC7;font-size:20px;
}
.csb-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.csb-main{flex:1;min-width:0;}
.csb-title{
	font-size:13px;color:var(--text);font-weight:500;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.csb-price{margin-top:3px;font-size:12px;color:#FF6A00;font-weight:600;}
.csb-go{
	flex:0 0 auto;font-size:12px;color:#FF6A00;font-weight:600;
	border:1px solid rgba(255,106,0,.35);border-radius:11px;padding:3px 9px;
	background:rgba(255,106,0,.06);
}
.chat-body{
	flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 12px 16px;
	background:var(--chat-body-bg,transparent);
	overscroll-behavior-y:contain;      /* 滚到底时不要把滚动传给外层页面（少一层联动重绘） */
}
/* ⚠️ 上面故意去掉了 -webkit-overflow-scrolling:touch。
   它会让消息区变成一个"独立的滚动合成层"：高度一变就得重建这一层，
   重建的空档里下面的会话列表会透出来（就是那次闪烁）。
   现在的安卓 WebView 默认就有惯性滚动，去掉它不影响手感。 */
/* ===== 市场店铺聊天：整体电商化皮肤（.chat-page.shop-chat） =====
   呼应泡泡市场主色 #FF6A00：发送按钮、自己这边的气泡用橙色系，
   顶栏副标题、商品条也统一。好友聊天不受影响（只有加了 shop-chat 类才生效）。 */
.chat-page.shop-chat .send-btn{background:#FF6A00;}
.chat-page.shop-chat .send-btn:active{background:#E85D00;}
.chat-page.shop-chat .chat-input{background:#FFF3EA;border-top-color:#FFE0CC;}
.chat-page.shop-chat .chat-input input,
.chat-page.shop-chat .chat-input textarea{background:#FFFFFF;}
.chat-page.shop-chat .msg.me .msg-bubble:not(.rp-bubble):not(.call):not(.img):not(.mkt-bubble):not(.dice-bubble){
	background:#FF6A00;color:#fff;
}
.chat-page.shop-chat .chat-head{border-bottom-color:#FFE0CC;}
/* 进聊天页时内容跟着滑入动画一起淡入 —— 衔接更自然，不会"啪"地一下出现 */
.chat-page.open .chat-body{animation:chatBodyIn .32s ease-out;}
@keyframes chatBodyIn{from{opacity:.4}to{opacity:1;}}
.chat-time{text-align:center;font-size:11px;color:var(--text-3);margin:10px 0;}
.msg{display:flex;gap:8px;margin-bottom:12px;align-items:flex-start;}
.msg .avatar{width:38px;height:38px;font-size:18px;}
.msg-col{display:flex;flex-direction:column;max-width:72%;}
.msg.me .msg-col{align-items:flex-end;}
.msg-name{font-size:11px;color:var(--text-3);margin:0 0 3px 2px;}
.msg.me .msg-name{margin:0 2px 3px 0;text-align:right;}
.msg-bubble{
	max-width:100%;padding:9px 12px;border-radius:var(--bubble-radius,10px);font-size:15px;line-height:1.45;
	/* ⚠️ 气泡文字用**独立变量** --bubble-fg，不跟 --text:
	   主题里的「字体颜色」只该改界面文字（列表/标题/设置…），不能把聊天气泡的文字也染色，
	   否则浅底白字 / 深底深字会看不清。自己的气泡另由 --bubble-me-color 决定（见下一条）。 */
	background:var(--bsender-bg,var(--card));color:var(--bubble-fg,#1A1A1A);word-break:break-word;position:relative;
}
html[data-theme="dark"] .msg-bubble{color:var(--bubble-fg,#E9ECF1);}
.msg.me{flex-direction:row-reverse;}
.msg.me .msg-bubble{background:var(--bubble-me-bg,var(--brand-blue));color:var(--bubble-me-color,#fff);}
/* 自定义气泡图案可能画到气泡外面（上方 / 下方）：
   --pat-top        = 图案高出气泡顶部的像素 → 加在**气泡自身**的 margin-top 上
                      （加在 .msg-col 上会让时间和气泡一起下移，图案照样盖住时间）
   --pat-bot        = 图案低于气泡底部的像素 → 加到消息底部
   --pat-next-top   = **下一条消息**图案高出它气泡顶部的像素（相邻图案要错开，否则两条图案会贴在一起）
   三个变量都由 fixPatSpace() / syncPatGap() 用真实 DOM 尺寸量出来。 */
.msg .msg-bubble{margin-top:var(--pat-top,0px);}
.msg{margin-bottom:calc(12px + var(--pat-bot,0px) + var(--pat-next-top,0px));}
/* 同一个人连发的后续消息：不重复头像与昵称，气泡自动和上一条对齐（微信那种）
   —— 头像用 visibility:hidden 保留占位，所以左右两种气泡的对齐都不会乱 */
.msg.same-sender > .avatar{visibility:hidden;}
.msg.same-sender .msg-meta{display:none;}
.chat-input{
	flex:0 0 auto;display:flex;align-items:center;gap:6px;
	padding:8px 10px calc(8px + var(--safe-bottom));
	background:var(--chat-input-bg,var(--card));border-top:1px solid var(--line);
	position:relative;      /* 「回到底部」胶囊的定位父级（胶囊 absolute + bottom:100%） */
}
.chat-input .icon-btn{width:32px;height:32px;color:var(--text-2);}
.chat-input .ico{width:24px;height:24px;}
.chat-input input{
	flex:1;height:38px;background:#F3F4F6;border-radius:19px;padding:0 14px;font-size:15px;
}
.send-btn{
	height:32px;padding:0 14px;border-radius:16px;background:var(--brand-blue);color:#fff;
	font-size:14px;flex:0 0 auto;
}
.send-btn:active{background:var(--brand-blue-d);}

/* ---- 聊天页右下角「回到最新处」圆形悬浮钮（QQ 那种） ----
   往上翻聊天记录时出现在输入栏右上方；有新消息进来时右上角挂红底数字角标（>99 显示 99+，
   文案由 JS 写）；点一下平滑滚到最新一条。
   挂在输入栏里（.chat-input 是定位父级），键盘 / ＋面板把输入栏顶起来时跟着一起动。
   默认 display:none，靠 JS 加 .show 才出现；有新消息再加 .has-new 露出角标 */
.chat-newmsg{
	position:absolute;right:12px;bottom:calc(100% + 10px);
	width:34px;height:34px;border-radius:50%;
	display:none;align-items:center;justify-content:center;
	background:var(--card);color:var(--text-2);
	box-shadow:0 2px 8px rgba(0,0,0,.16);
	opacity:0;pointer-events:none;z-index:12;
	transform:translateY(6px);
	transition:opacity .18s ease,transform .18s cubic-bezier(.32,.72,.28,1);
}
.chat-newmsg.show{display:flex;opacity:1;pointer-events:auto;transform:translateY(0);}
.chat-newmsg:active{transform:translateY(0) scale(.92);}
.chat-input .chat-newmsg .ico{width:18px;height:18px;stroke-width:2.2;}
.chat-newmsg .cnm-badge{
	display:none;position:absolute;top:-4px;right:-4px;
	min-width:16px;height:16px;padding:0 4px;border-radius:8px;
	background:#FF3B30;color:#fff;font-size:10px;line-height:16px;font-weight:600;
	text-align:center;font-style:normal;
	box-shadow:0 0 0 1.5px var(--card);
}
.chat-newmsg.has-new .cnm-badge{display:block;}

/* 「以下为 N 条新消息」分割线：新消息进来时插在第一条未读前面 */
.chat-newline{display:flex;align-items:center;margin:10px 2px 12px;}
.chat-newline::before,.chat-newline::after{content:"";flex:1;height:1px;background:rgba(232,69,95,.3);}
.chat-newline span{font-size:11px;color:#E8455F;padding:0 8px;white-space:nowrap;}

.empty{
	display:none;position:absolute;left:0;right:0;top:36%;
	text-align:center;color:var(--text-3);font-size:13px;
}
.empty.show{display:block;}

/* ================= Toast ================= */
.toast{
	position:fixed;left:50%;bottom:90px;transform:translate(-50%,10px);
	background:rgba(0,0,0,.78);color:#fff;font-size:13px;padding:9px 16px;border-radius:8px;
	z-index:500;opacity:0;transition:.22s;pointer-events:none;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ================= 登录 / 注册（科技风） ================= */
.login-page{
	position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;overflow:hidden;
	background:
		radial-gradient(120% 65% at 10% -6%,rgba(18,183,245,.16) 0%,rgba(18,183,245,0) 60%),
		radial-gradient(115% 65% at 96% 4%,rgba(122,92,255,.14) 0%,rgba(122,92,255,0) 62%),
		linear-gradient(180deg,#F7FBFF 0%,#EFF6FF 48%,#E8F1FF 100%);
	transition:opacity .25s,visibility .25s;
}
.login-page.hide{opacity:0;visibility:hidden;}
/* 切换登录页时用：跳过 0.25s 淡入淡出（淡入淡出会透出下面正在清空/渲染的 App 界面 → 看着"闪一下"） */
.login-page.no-anim{transition:none !important;}
/* 默认是「登录」模式：注册专属的表单元素**首帧就隐藏**。
   ⚠️ 以前靠 JS 的 setMode() 去设 inline display，而 app.js 在最后才执行 →
      浏览器已经把「注册」那一屏先画出来了一帧（昵称/手机号/头像/密码全在）→ 闪一下注册页。
   用 CSS 按 .reg 类判，纯样式生效，跟脚本执行时机无关。 */
.login-page:not(.reg) .lg-avatar,
.login-page:not(.reg) #lgNick,
.login-page:not(.reg) #lgPhone,
.login-page:not(.reg) #lgPass{display:none !important;}
/* 注册模式下：登录专属的「忘记密码」也不显示（同样首帧兜底） */
.login-page.reg .login-forgot{display:none !important;}
/* 访客体验按钮：只在「登录」模式显示；注册模式下藏掉（注册页本来就是来建正式号的） */
.login-page.reg .login-guest{display:none !important;}
.login-guest{
	display:block;width:100%;margin-top:10px;height:40px;border-radius:20px;
	background:transparent;border:1px solid rgba(18,183,245,.42);
	color:#2E86E0;font-size:13.5px;font-family:inherit;font-weight:500;
}
.login-guest:active{background:rgba(18,183,245,.12);}
.login-guest:disabled{opacity:.6;}
/* 本地已有登录态：首屏就不显示登录页（避免打开 App 时闪一下登录/注册界面） */
html.logged-in .login-page{visibility:hidden;opacity:0;}

/* 背景：两团光斑 */
.lg-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.lg-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.45;}
.lg-glow.g1{width:280px;height:280px;left:-90px;top:6%;background:#7FD8FF;animation:lgFloat 9s ease-in-out infinite;}
.lg-glow.g2{width:300px;height:300px;right:-110px;top:40%;background:#C6B8FF;animation:lgFloat 11s ease-in-out infinite reverse;}
@keyframes lgFloat{
	0%,100%{transform:translate3d(0,0,0);}
	50%{transform:translate3d(0,-22px,0);}
}

/* 表单：全屏，内容居中（限制最大宽度，平板/横屏也好看） */
.login-card{
	position:relative;z-index:1;width:100%;max-width:440px;flex:1;margin:0 auto;
	padding:calc(34px + var(--safe-top)) 24px calc(30px + var(--safe-bottom));
	display:flex;flex-direction:column;
	overflow-y:auto;-webkit-overflow-scrolling:touch;
}
/* 固定各元素高度：键盘弹出可视高度变小时不被压扁 */
.login-card > *{flex:0 0 auto;}
/* ⚠️ 登录 / 注册 切换时页面不能上下跳（2026-10 需求）：
   以前是 .login-brand{margin-top:auto} + .login-msg{margin-bottom:auto} 把整块表单**垂直居中**，
   两种模式字段数不同 → 内容高度不同 → 居中位置变 → 整页上下跳。
   现在改成：上半部分（logo / 切换条）**贴顶固定**，中间字段区自然增减，
   主按钮那一组由 .lg-gap 的 auto margin **贴底固定** —— 切换时只有中间的高度变，页面不跳。 */
.login-brand{text-align:center;padding-bottom:26px;margin-top:0;}
.login-title{
	font-size:34px;font-weight:700;letter-spacing:6px;
	background:linear-gradient(120deg,#0AA5E0 0%,#3B6BFF 50%,#7A5CFF 100%);
	-webkit-background-clip:text;background-clip:text;color:transparent;
	filter:drop-shadow(0 2px 14px rgba(58,140,255,.28));
}
.login-sub{margin-top:8px;font-size:11px;letter-spacing:3px;color:rgba(96,130,175,.72);}

/* 登录 / 注册 分段切换 */
.login-tabs{
	display:flex;gap:4px;padding:4px;margin-bottom:20px;border-radius:14px;
	background:rgba(255,255,255,.72);border:1px solid rgba(18,150,220,.16);
	box-shadow:0 6px 18px rgba(56,130,255,.08);
}
.login-tab{
	flex:1;height:40px;border-radius:10px;font-size:15px;
	color:#6C8199;transition:.22s;
}
.login-tab.active{
	color:#0A72C8;font-weight:600;
	background:linear-gradient(135deg,rgba(18,183,245,.16),rgba(122,92,255,.14));
	box-shadow:0 0 0 1px rgba(18,183,245,.34),0 6px 16px rgba(56,130,255,.16);
}
.login-input{
	width:100%;height:50px;margin-top:12px;border-radius:12px;padding:0 16px;
	font-size:15px;color:var(--text);background:#fff;
	border:1px solid rgba(18,150,220,.18);box-shadow:0 2px 8px rgba(56,130,255,.05);
	transition:border-color .2s,box-shadow .2s;
}
/* 登录页「最近登录的账号」：本机记住过的账号，点一下直接切过去（不用再输密码） */
.lg-accounts{margin:-6px 0 14px;}
.lga-item{
	display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;
	background:rgba(255,255,255,.72);border:1px solid rgba(18,150,220,.14);
	transition:background .18s,transform .15s;
}
.lga-item + .lga-item{margin-top:8px;}
.lga-item:active{transform:translateY(1px);background:#F2F7FF;}
.lga-main{flex:1;min-width:0;}
.lga-name{font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lga-no{font-size:11px;color:#8FA3B8;margin-top:2px;}
.lga-go{font-size:17px;color:#B9C7D6;line-height:1;}
.login-input::placeholder{color:#9AAEC2;}
.login-input:focus{
	border-color:var(--brand-blue);
	box-shadow:0 0 0 3px rgba(18,183,245,.14),0 6px 18px rgba(56,130,255,.12);
}
/* 账号栏下方的自动识别提示（泡泡号 / 手机号） */
.login-hint{
	min-height:16px;margin-top:8px;padding:0 4px;
	font-size:12px;line-height:16px;color:#8FA3B8;
	transition:color .2s;
}
.login-hint.ok{color:#1FA463;}
.login-hint.err{color:#E8455F;}
.login-btn{
	width:100%;height:50px;margin-top:22px;border-radius:12px;
	font-size:16px;font-weight:600;letter-spacing:1px;color:#fff;
	background:var(--qq-grad);
	box-shadow:0 10px 24px rgba(48,120,255,.28),inset 0 1px 0 rgba(255,255,255,.3);
	transition:transform .15s,filter .2s,box-shadow .2s;
}
.login-btn:active{transform:translateY(1px);filter:brightness(1.05);box-shadow:0 6px 16px rgba(48,120,255,.24);}
.login-btn:disabled{background:#D3DEE9;color:#8898A8;box-shadow:none;}
.login-msg{
	min-height:18px;margin-top:12px;margin-bottom:0;      /* 不再用 auto（会让整块表单居中 → 切换模式时上下跳） */
	text-align:center;font-size:13px;color:#E8455F;
}
/* 弹性占位：吸收剩余空间，把主按钮那一组压到卡片底部（高度不够时自动收成 22px 间距） */
.lg-gap{margin-top:auto;height:22px;flex:0 0 auto;}
.login-loading{
	position:absolute;inset:0;z-index:2;display:none;align-items:center;justify-content:center;gap:10px;
	font-size:15px;letter-spacing:2px;color:var(--text);background:rgba(247,251,255,.82);
}
.lg-spin{
	width:16px;height:16px;border-radius:50%;
	border:2px solid rgba(18,183,245,.22);border-top-color:var(--brand-blue);
	animation:lgSpin .8s linear infinite;
}
@keyframes lgSpin{to{transform:rotate(360deg);}}
.login-page.checking .login-card{visibility:hidden;}
.login-page.checking .login-loading{display:flex;}

/* 注册时的头像选择（只在注册 tab 显示） */
.lg-avatar{display:none;align-items:center;gap:12px;padding:4px 0 2px;margin-bottom:2px;}
.login-page.reg .lg-avatar{display:flex;}
.lg-avatar .avatar{
	width:52px;height:52px;font-size:25px;border:0;
	box-shadow:0 0 0 1px rgba(18,150,220,.22),0 6px 16px rgba(56,130,255,.14);
}
.lg-avatar-btn{
	height:32px;padding:0 14px;border-radius:16px;font-size:13px;
	color:var(--brand-blue);background:rgba(18,183,245,.10);
	border:1px solid rgba(18,183,245,.28);transition:.2s;
}
.lg-avatar-btn:active{background:rgba(18,183,245,.18);}
.lg-av{
	width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
	justify-content:center;font-size:16px;color:#fff;
}
.lg-av.active{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--brand-blue);}
.login-page .lg-av.active{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--brand-blue),0 0 10px rgba(18,183,245,.45);}
.dlg-avatars{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;padding:4px 0;}
.dlg-avatars .lg-av{width:38px;height:38px;font-size:20px;}

/* 好友申请行 */
.fr-row{display:flex;align-items:center;gap:10px;padding:10px 0;}
.fr-row .avatar{width:42px;height:42px;font-size:20px;}
.fr-main{flex:1;min-width:0;}
.fr-name{font-size:15px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fr-sub{font-size:12px;color:var(--text-2);margin-top:2px;}
.fr-btn{
	height:30px;padding:0 14px;border-radius:15px;background:var(--brand-blue);
	color:#fff;font-size:13px;flex:0 0 auto;
}
.fr-btn.gray{background:#F2F3F5;color:var(--text-2);}
.fr-btn:active{opacity:.82;}

/* ================= 评论弹层 ================= */
.sheet-mask{
	position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:300;
	opacity:0;visibility:hidden;transition:.22s;
}
.sheet-mask.show{opacity:1;visibility:visible;}
.sheet{
	position:fixed;left:0;right:0;bottom:0;z-index:310;background:var(--card);
	border-radius:14px 14px 0 0;display:flex;flex-direction:column;
	padding-bottom:var(--safe-bottom);
	max-height:70%;transform:translateY(100%);transition:transform .26s cubic-bezier(.32,.72,.28,1);
	visibility:hidden;
}
.sheet.open{transform:none;visibility:visible;}
.sheet-head{
	display:flex;align-items:center;padding:10px 10px 10px 16px;
	border-bottom:1px solid var(--line);font-size:15px;font-weight:600;
}
.sheet-head span{flex:1;}
.sheet-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 16px;min-height:80px;}
.cm-row{display:flex;gap:9px;padding:9px 0;}
.cm-row .avatar{width:32px;height:32px;font-size:15px;}
.cm-main{flex:1;min-width:0;}
.cm-name{font-size:12px;color:var(--text-3);}
.cm-text{font-size:14.5px;color:var(--text);margin-top:2px;word-break:break-word;}
.sheet-input{
	display:flex;align-items:center;gap:8px;padding:9px 12px;
	border-top:1px solid var(--line);
}
.sheet-input input{
	flex:1;height:38px;background:#F3F4F6;border-radius:19px;padding:0 14px;font-size:15px;
}
.cm-empty{text-align:center;color:var(--text-3);font-size:13px;padding:26px 0;}

/* ================= 通用弹窗 ================= */
.dlg-mask{
	position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:450;
	opacity:0;visibility:hidden;transition:.2s;
}
.dlg-mask.show{opacity:1;visibility:visible;}
.dlg{
	position:fixed;left:50%;top:50%;z-index:460;width:86%;max-width:340px;
	background:var(--card);border-radius:14px;padding:18px 16px 14px;
	transform:translate(-50%,-50%) scale(.94);opacity:0;visibility:hidden;
	transition:.2s;max-height:80%;display:flex;flex-direction:column;
}
.dlg.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible;}
.dlg-title{font-size:16px;font-weight:600;text-align:center;margin-bottom:14px;}
.dlg-body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
.dlg-input{
	width:100%;height:44px;background:#F4F5F7;border-radius:10px;
	padding:0 14px;font-size:15px;
}
.dlg-input::placeholder{color:var(--text-3);}
/* 注销账号弹窗（设置 › 危险操作）：警示块 + 三次密码输入 */
.dlg-warn{
	background:#FFF5F5;border-radius:10px;padding:10px 12px;margin-bottom:12px;
	font-size:12.5px;line-height:1.7;color:#C0392B;
}
.dlg-warn b{font-weight:600;}
.dlg-warn ul{margin:6px 0 0;padding-left:16px;}
.dlg-warn li{margin:2px 0;}
.dlg-warn .dlg-warn-tip{margin-top:8px;font-size:12px;color:var(--text-2);}
.dlg-input.dgap{margin-top:10px;}
html[data-theme="dark"] .dlg-warn{background:#2A1C1E;color:#FF9A9A;}
.dlg-label{font-size:12px;color:var(--text-2);margin:14px 2px 6px;}
.dlg-friends{max-height:210px;overflow-y:auto;border-radius:10px;background:#FAFBFC;padding:4px;}
.dlg-friend{display:flex;align-items:center;gap:10px;padding:8px;font-size:15px;}
.dlg-friend input{width:18px;height:18px;accent-color:var(--brand-blue);}
.dlg-friend .avatar{width:32px;height:32px;font-size:15px;}
.dlg-foot{display:flex;gap:10px;margin-top:16px;}
/* 藏掉底部按钮的弹窗（见 openDialog 的 noFoot 参数） */
.dlg.no-foot .dlg-foot{display:none;}
.dlg.no-foot .av-up{margin-bottom:0;}
.dlg-btn{
	flex:1;height:42px;border-radius:21px;background:#F2F3F5;color:var(--text-2);font-size:15px;
}
.dlg-btn.primary{background:var(--brand-blue);color:#fff;}
.dlg-btn.primary:disabled{background:#B9CBD8;}
.dlg-btn.danger{background:var(--red);color:#fff;}
.dlg-text{text-align:center;font-size:15px;color:var(--text);padding:8px 0 4px;line-height:1.5;}

/* ---------------- 「编辑资料」弹窗：高级卡片式 ----------------
   头像居中 + 相机角标 + 更换按钮；资料 / 封面做成浅底卡片。 */
.ep-hero{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0 2px;}
.ep-avatar{position:relative;width:76px;height:76px;}
.ep-avatar .avatar{width:76px;height:76px;font-size:32px;box-shadow:0 6px 18px rgba(20,40,80,.16);}
.ep-cam{
	position:absolute;right:-3px;bottom:-3px;width:26px;height:26px;border-radius:50%;
	background:var(--qq-grad);border:2px solid #fff;color:#fff;
	display:flex;align-items:center;justify-content:center;
}
.ep-cam .ico{width:13px;height:13px;stroke-width:2;}
.ep-avatar-btn{
	height:34px;padding:0 20px;border-radius:17px;font-size:13.5px;font-weight:600;color:#fff;
	background:var(--qq-grad);box-shadow:0 8px 18px rgba(48,120,255,.24);
}
.ep-avatar-btn:active{filter:brightness(1.05);}

.ep-sec{margin-top:18px;}
.ep-sec:first-child{margin-top:0;}
.ep-sec-title{font-size:12.5px;color:var(--text-3);margin:0 2px 9px;font-weight:600;}
.ep-field{
	display:flex;align-items:center;gap:12px;
	background:var(--bg);border:1px solid var(--line);border-radius:12px;
	padding:2px 14px;margin-bottom:10px;
}
.ep-field-label{flex:0 0 auto;font-size:13px;color:var(--text-2);}
.ep-field input{flex:1;height:40px;font-size:15px;background:transparent;border:0;outline:0;color:var(--text);}

.ep-cover-card{
	display:flex;align-items:center;gap:12px;
	background:var(--bg);border:1px solid var(--line);border-radius:12px;
	padding:10px 12px;margin-bottom:10px;
}
.ep-cover-card:active{background:var(--card);}
.ep-thumb{
	width:66px;height:42px;border-radius:8px;flex:0 0 auto;
	box-shadow:inset 0 0 0 1px rgba(20,40,80,.08);
}
.ep-cover-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.ep-cover-name{font-size:15px;color:var(--text);font-weight:500;}
.ep-cover-sub{font-size:12px;color:var(--text-3);}
.ep-clear{
	flex:0 0 auto;height:26px;padding:0 12px;border-radius:13px;font-size:12px;
	background:var(--card);color:var(--text-2);border:1px solid var(--line);
}
.ep-clear:active{background:#EEF2F7;}
.ep-arrow{font-style:normal;font-size:18px;color:var(--text-3);margin-left:-2px;}
.ep-tip{margin:4px 2px 0;font-size:12px;color:var(--text-3);line-height:1.6;}


/* ================= 关闭动画期间禁止点击 =================
   遮罩/弹层的 transition 写在「所有属性」上，visibility 属于离散动画，
   要到动画结束才真正变成 hidden，所以「刚关掉」的那 200ms 内它仍然可点。
   双击空白处就会连点两次：第二次把下一层界面也弹掉了
   （典型：点红包 → 双击空白 → 红包面板和聊天页一起被弹掉，闪回消息列表）。
   这里给所有「未打开」的遮罩/弹层关掉点击，从根上避免连点误伤。 */
.mask:not(.show),
.menu-mask:not(.show),
.dlg-mask:not(.show),
.card-mask:not(.show),
.sheet-mask:not(.show),
.func-mask:not(.show),
.emoji-mask:not(.show),
.rp-sheet:not(.open),
.plus-menu:not(.show),
.dlg:not(.open),
.profile-card:not(.open),
.sheet:not(.open),
.func-panel:not(.show),
.emoji-panel:not(.show),
.viewer:not(.show){pointer-events:none;}

/* ================= 网络状态条 ================= */
.net-bar{
	position:fixed;left:50%;top:calc(var(--safe-top) + 8px);
	transform:translate(-50%,-160%);
	max-width:88vw;padding:7px 16px;border-radius:16px;
	background:rgba(0,0,0,.78);color:#fff;font-size:12.5px;line-height:1.4;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
	z-index:520;pointer-events:none;
	transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .24s;
	opacity:0;
}
.net-bar.show{transform:translate(-50%,0);opacity:1;}
/* 图片加载失败（断网 / 图片没了）：显示灰底占位，不再裂图 */
img.img-fail{background:#F1F3F7;object-fit:cover;}
html[data-theme="dark"] img.img-fail{background:#22262E;}

/* 单聊「更多设置」里的功能行 */
.chat-more-row{
	display:flex;align-items:center;gap:8px;padding:13px 12px;border-radius:10px;
	background:#F6F7F9;font-size:15px;color:var(--text);
}
.chat-more-row:active{background:#EDEFF2;}

/* 「关于泡泡」弹窗内容 */
.about-box{text-align:left;}

.about-desc{font-size:13.5px;color:var(--text);line-height:1.75;margin-bottom:10px;}
.about-list{
	font-size:12.5px;color:var(--text-2);line-height:1.9;
	background:#F7F9FC;border-radius:10px;padding:10px 12px;
}
.about-list b{color:var(--text);}
.about-foot{margin-top:10px;text-align:center;font-size:12px;color:var(--text-3);}
.dlg-btn:active{opacity:.82;}

/* ================= 资料卡片（点头像弹出） =================
   结构（对齐手机 QQ 的资料卡）：
     顶部「个人封面」→ 头像压在封面下沿（白描边）
     → 昵称 + 一行小标签（泡泡号可点复制 / 好友关系）→ 签名卡 → 动作按钮。
   封面用的是 user.card_cover（个人封面），和动态页顶部的 cover 是两张图。 */
.card-mask{
	position:fixed;inset:0;z-index:430;background:rgba(0,0,0,.35);
	opacity:0;visibility:hidden;transition:.2s;
}
.card-mask.show{opacity:1;visibility:visible;}
.profile-card{
	position:fixed;left:50%;top:50%;z-index:440;width:84%;max-width:330px;
	background:var(--card);border-radius:16px;overflow:hidden;
	transform:translate(-50%,-50%) scale(.94);opacity:0;visibility:hidden;
	transition:.2s;box-shadow:0 18px 50px rgba(0,0,0,.3);
}
.profile-card.open{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible;}
.pc-loading{padding:44px 0;text-align:center;color:var(--text-3);font-size:14px;}
.pc-cover{position:relative;height:150px;}
/* 设了「个人封面」时：铺满 + 居中裁切 */
.pc-cover.has-img{background-size:cover;background-position:center;background-repeat:no-repeat;}
/* （封面上的「✕」和「更换封面」按钮、以及原来那层底部暗角都已删掉：
     关卡片点遮罩 / 按返回键就行，封面保持原色更好看） */

/* 头像压在封面下沿（竖向居中排布）：
   头像在中间压住封面下沿，昵称在头像**下方**居中、泡泡号那行再往下居中。
   ⚠️ 顺序是「头像 → 昵称」从上到下，所以昵称天然落在封面下沿之下，永远不会和封面重叠
      （头像 76px、上移 34px → 头像底边在封面下 42px，昵称从那里开始）。 */
.pc-body{padding:0 18px 18px;}
.pc-head{
	display:flex;flex-direction:column;align-items:center;gap:10px;
	margin-top:-34px;position:relative;z-index:2;
}
.pc-avatar{flex:0 0 auto;}
/* 卡片头像：显式带上 .xl（QQ 主题层是后加载的，同权重会覆盖，所以这里提高一级权重），
   外圈用 box-shadow 画成一个白色描边（不要用 border —— 会把图片往里挤、看着像漏边） */
.pc-avatar .avatar,
.pc-avatar .avatar.xl{width:76px;height:76px;font-size:32px;box-shadow:0 0 0 3px var(--card),0 6px 16px rgba(20,40,80,.16);}
/* 昵称：在头像下方居中（整行占满，flex 居中 → 带 VIP 标识时也是整体居中）
   ⚠️ 昵称文本包在 .pc-n 里由它自己出省略号 —— 以前长昵称会把后面的等级星星
      挤出卡片 / 压成看不见；现在昵称再长也只在自己那一行省略 */
.pc-name{
	width:100%;min-width:0;
	font-size:18px;font-weight:700;
	display:flex;align-items:center;justify-content:center;gap:5px;
	overflow:hidden;
}
.pc-name .pc-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 等级星星：单独一行，不跟昵称抢宽度（和上面昵称的 10px gap 抵消一点，看着不空） */
.pc-lv{
	display:flex;align-items:center;justify-content:center;
	margin-top:-4px;min-height:14px;
}
/* 昵称下面那行小标签：泡泡号（点一下复制）+ 好友关系；整行居中 */
.pc-tags{
	display:flex;align-items:center;justify-content:center;
	gap:6px;margin-top:10px;flex-wrap:wrap;
}
.pc-tag{
	font-size:11.5px;line-height:1;padding:4px 8px;border-radius:7px;
	background:#F1F4F9;color:var(--text-2);max-width:100%;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pc-tag.no:active{background:#E4EAF3;}
.pc-sign{
	margin-top:12px;font-size:13px;color:#4A5468;line-height:1.65;text-align:center;
	background:#F6F8FB;border-radius:10px;padding:9px 12px;word-break:break-word;
}
.pc-sign.empty{color:var(--text-3);}
.pc-actions{display:flex;gap:10px;margin-top:14px;}
.pc-btn{
	flex:1;height:40px;border-radius:20px;font-size:15px;font-weight:500;color:#fff;
	background:var(--qq-grad);
	box-shadow:0 8px 18px rgba(48,120,255,.25);
}
.pc-btn:active{filter:brightness(1.06);}
.pc-btn.ghost{background:#F2F4F7;color:var(--text);box-shadow:none;}
.pc-btn:disabled{opacity:.6;}


/* ================= 设置页 ================= */
.head-holder{width:34px;flex:0 0 auto;}
.set-body{background:var(--bg);padding:0 12px 24px;}
.set-group-title{font-size:12px;color:var(--text-2);padding:16px 4px 7px;}
.set-group{background:var(--card);border-radius:10px;overflow:hidden;}
.set-row{position:relative;display:flex;align-items:center;padding:14px;font-size:15px;}
.set-row + .set-row::before{
	content:"";position:absolute;left:14px;right:0;top:0;height:1px;
	background:var(--line);transform:scaleY(.6);
}
.set-row:active{background:#F6F7F9;}
.set-label{flex:1;color:var(--text);}
/* 危险操作行（注销账号）：红字，点进去还有三次密码 + 警示弹窗 */
.set-label.danger{color:var(--red);}
.set-value{color:var(--text-2);font-size:14px;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.set-arrow{font-style:normal;font-size:18px;color:var(--text-3);margin-left:6px;line-height:1;}
.dlg-input + .dlg-input{margin-top:10px;}

/* ---- 登录设备管理（设置 › 账号与安全） ---- */
.dev-item{display:flex;align-items:center;gap:11px;padding:13px 14px;position:relative;}
.dev-item + .dev-item::before{
	content:"";position:absolute;left:14px;right:0;top:0;height:1px;
	background:var(--line);transform:scaleY(.6);
}
.dev-ico{
	width:38px;height:38px;border-radius:11px;flex:0 0 auto;
	background:#EEF3FF;color:#2E7CF6;
	display:flex;align-items:center;justify-content:center;font-size:19px;
}
.dev-main{flex:1;min-width:0;}
.dev-name{display:flex;align-items:center;gap:6px;font-size:15px;color:var(--text);overflow:hidden;}
.dev-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dev-cur{
	flex:0 0 auto;font-size:11px;line-height:1;color:#fff;background:#2E7CF6;
	border-radius:4px;padding:3px 5px;
}
.dev-sub{font-size:12px;color:var(--text-2);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dev-kick{
	flex:0 0 auto;font-size:13px;color:var(--red);padding:7px 9px;border-radius:8px;
}
.dev-kick:active{background:rgba(250,81,81,.1);}
.dev-tip{font-size:12px;color:var(--text-2);line-height:1.8;padding:12px 4px 0;}
.dev-actions{padding:18px 2px 8px;}
.dev-btn{
	width:100%;height:44px;border-radius:12px;background:var(--card);
	font-size:15px;color:var(--text);
}
.dev-btn.danger{color:var(--red);}
.dev-btn:active{filter:brightness(.97);}

/* ---- 账号管理（多账号切换，抽屉 / 设置都能进） ---- */
.acc-item{display:flex;align-items:center;gap:11px;padding:12px 14px;position:relative;}
.acc-item + .acc-item::before{
	content:"";position:absolute;left:14px;right:0;top:0;height:1px;
	background:var(--line);transform:scaleY(.6);
}
.acc-item:active{background:#F6F7F9;}
.acc-av{flex:0 0 auto;line-height:0;}
.acc-del{
	flex:0 0 auto;font-size:13px;color:var(--text-2);padding:7px 9px;border-radius:8px;
}
.acc-del:active{background:rgba(0,0,0,.05);color:var(--red);}

/* （.pub-ph 的图片/加载样式已合并到上面「发表动态」区块，这里不再重复定义） */

/* ================= 看大图 ================
   手势：双击放大 / 双指捏合（1~4x）/ 放大后单指拖动 / 单击关闭 / 长按存相册。
   ⚠️ touch-action:none —— 不让浏览器自己接管双指缩放和页面滚动，全部交给 JS；
      缩放只改 img 的 transform（合成层，不重排），所以放大时也不会掉帧。 */
.viewer{
	position:fixed;inset:0;z-index:460;
	/* 纯黑不透明：以前是 rgba(0,0,0,.94)，大图还没解码时会透出下面聊天页的浅色，
	   看着像"白屏"；换成 #000 后未加载的部分是纯黑（2026-10-27） */
	background:#000;
	display:flex;align-items:center;justify-content:center;
	opacity:0;visibility:hidden;transition:.2s;
	touch-action:none;
}
.viewer.show{opacity:1;visibility:visible;}
/* 缩略图垫底：把聊天里那张**已缓存的小图**放大模糊铺满整屏（background-size:cover），
   原图没下完时看到的是"整屏模糊大图 + 转圈"，而不是一大块纯黑。
   inset 用负值把画布撑出屏幕外，否则 blur 会把四条边糊成透明黑边。
   地址由 js/app.js 的 openViewer 写进 style.backgroundImage，关闭查看器时清空 */
.viewer-bg{
	position:absolute;inset:-14%;z-index:0;
	background-position:center center;
	background-size:cover;
	background-repeat:no-repeat;
	filter:blur(20px) brightness(.78) saturate(1.05);
	opacity:0;transition:opacity .2s ease;
	pointer-events:none;
	will-change:opacity;
}
.viewer.loading .viewer-bg{opacity:1;}
.viewer img{
	position:relative;z-index:1;
	max-width:100%;max-height:100%;object-fit:contain;
	transform-origin:center center;will-change:transform;
	-webkit-user-select:none;user-select:none;-webkit-user-drag:none;
	transition:opacity .16s ease;
}
/* 原图还在下载/解码：前景图先藏起来（缩略图已经由 .viewer-bg 模糊铺满了），
   中间转圈 + 「正在加载原图」；原图首帧到了再淡入，全程看不到黑屏。 */
.viewer.loading img{opacity:0;}
/* 没有缩略图可用（外部图 / gif）时也别纯黑，给个深灰底色兜着 */
.viewer.loading{background:#0f1115;}
.viewer.loading::after{
	content:"";
	position:absolute;left:50%;top:50%;
	width:26px;height:26px;margin:-13px 0 0 -13px;
	border-radius:50%;
	border:2.5px solid rgba(255,255,255,.28);
	border-top-color:#fff;
	animation:vwSpin .8s linear infinite;
	pointer-events:none;z-index:3;
}
.viewer.loading::before{
	content:"正在加载原图";
	position:absolute;left:50%;top:50%;
	transform:translate(-50%,24px);
	color:#fff;font-size:12.5px;letter-spacing:.5px;
	text-shadow:0 1px 6px rgba(0,0,0,.75);
	pointer-events:none;z-index:3;white-space:nowrap;
}
@keyframes vwSpin{to{transform:rotate(360deg);}}
/* 看大图的操作提示：打开时出现，2.6 秒后自动淡出；点一下也会提前消失。
   ⚠️ pointer-events:none —— 不能挡住图片的手势（长按 / 双击 / 捏合） */
.viewer-tip{
	position:absolute;left:50%;bottom:calc(34px + var(--safe-bottom));
	transform:translateX(-50%);
	padding:9px 18px;border-radius:20px;
	background:rgba(0,0,0,.58);color:#fff;font-size:13px;line-height:1;
	white-space:nowrap;pointer-events:none;
	opacity:0;transition:opacity .24s;
	z-index:2;
}
.viewer-tip.show{opacity:1;}

/* ================= 游戏中心 ================= */
.game-grid{display:flex;flex-direction:column;gap:10px;}
.game-card{
	display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;
	background:linear-gradient(135deg,#F7FBFF,#EEF4FF);
	border:1px solid rgba(18,150,220,.14);
	box-shadow:0 4px 14px rgba(56,130,255,.07);
}
.game-card:active{background:#E7F0FF;}
.game-ico{
	width:46px;height:46px;border-radius:12px;flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;font-size:24px;
	background:linear-gradient(135deg,#DFF1FF,#E7E9FF);
}
.game-info{flex:1;min-width:0;}
.game-name{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:#22303F;}
.game-tag{
	font-style:normal;font-size:11px;font-weight:400;color:#0A72C8;
	background:rgba(18,183,245,.14);border-radius:8px;padding:1px 6px;
}
.game-desc{
	margin-top:3px;font-size:12px;color:var(--text-2);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 应用卡片里「一项一行」的信息行，行距收紧一点，不然卡片太高 */
.game-info .game-desc{margin-top:2px;line-height:1.35;}
/* 应用介绍：最多显示 2 行，超出用省略号（-webkit-line-clamp） */
.game-info .game-descr{
	margin-top:5px;font-size:11.5px;line-height:1.55;color:var(--text-2);
	white-space:normal;word-break:break-word;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
}
.game-play{
	flex:0 0 auto;height:30px;padding:0 14px;border-radius:15px;font-size:13px;color:#fff;
	background:var(--qq-grad);
	box-shadow:0 6px 14px rgba(48,120,255,.22);
}
.game-play:active{filter:brightness(1.06);}
/* 应用中心复用这套卡片时补的几个细节 */
.game-play.pay{background:linear-gradient(135deg,#FFB020,#FF7A18);box-shadow:0 6px 14px rgba(255,150,32,.22);}
.game-play:disabled{opacity:.7;}
/* 图标：⚠️ 必须 overflow:hidden —— 让容器把图片裁成圆角，
   否则图片自己的圆角和容器背景之间那 1px 会露出底色（就是"四个角漏了"）。
   名次徽章改成贴在图标**内侧**的左上角，这样不用把 overflow 打开。 */
.game-ico{position:relative;overflow:hidden;}
.game-ico img{width:100%;height:100%;border-radius:0;object-fit:cover;display:block;}
.game-ico > span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
/* 卡片里的一排截图（点开看大图） */
.game-info .as-shots{margin-top:7px;}
.game-info .as-shots img{width:58px;height:58px;border-radius:7px;}
/* 卡片里的上下架 / 删除 */
.game-info .as-ops{margin-top:6px;display:flex;gap:14px;}
.game-info .as-off{margin-top:5px;font-size:11.5px;color:#E8455F;line-height:1.5;}

/* 玩游戏：iframe 铺满，不额外留白 */
.game-frame{flex:1;width:100%;height:100%;border:0;background:#fff;display:block;}

/* ================= 聊天功能面板（输入栏「+」，微信那种底部面板） ================= */
/* 微信的面板打开时**聊天区不会变暗**（只有一层看不见的点击层）。
   以前这里是 rgba(0,0,0,.28)，面板一开整页压暗一档，观感上就像"闪了一下"。 */
.func-mask{
	position:fixed;inset:0;z-index:205;background:transparent;
	opacity:0;visibility:hidden;transition:.2s;
}
.func-mask.show{opacity:1;visibility:visible;}
.func-panel{
	position:fixed;left:0;right:0;bottom:0;z-index:210;background:var(--card);
	border-radius:0;padding:20px 10px calc(20px + var(--safe-bottom));
	/* ⚠️ 高度必须和表情面板用同一个变量（= 键盘高度）：
	   否则「＋」面板按内容只有约 210px，而聊天页是按键盘高度（约 300px）上抬的，
	   两者差出来的那 90px 会先露出一道缝（看着像"输入栏和面板分开了"）。 */
	height:var(--panel-face-h,auto);
	box-sizing:border-box;
	overflow-y:auto;
	/* ⚠️ 不要 transition：面板出现/消失必须同帧到位。
	   有过渡的话它会自己去"追"键盘收起的节奏，追不上就和输入栏错位 → 那一下闪。
	   位置由 js/app.js 的 lockPanelGeom() 钉死，和聊天页高度用同一个数。 */
	transform:translateY(100%);
	box-shadow:0 -6px 24px rgba(0,0,0,.12);
}
/* 「＋」面板 / 表情面板都要**直角**（2026-10-16 按需求改）。
   ⚠️ 必须带 ID 写：qq-theme.css 里有两版 `.func-panel,.emoji-panel{border-radius:…}`
      （12px、18px，后加载且同优先级，默认 18px 生效），
      只改下面的基础规则压不住 → 这两个 ID 选择器优先级更高，与文件顺序无关。 */
#funcPanel,
#emojiPanel{border-radius:0;}
.func-panel.show{transform:translateY(0);}
.func-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 6px;}
.func-item{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12px;color:var(--text-2);}
.func-ico{
	width:52px;height:52px;border-radius:14px;background:var(--bg);
	display:flex;align-items:center;justify-content:center;font-size:26px;
}
/* 面板图标是 SVG 描边图（不再是 emoji）：52px 方块里放 26px 的图标，
   颜色走 currentColor（继承 .func-item 的色，深浅主题都自动跟着变） */
.func-ico .ico{width:26px;height:26px;stroke-width:1.7;}
.func-item:active .func-ico{background:rgba(0,0,0,.06);}
/* ================= 表情面板（图片来自服务器 qq/bqb 目录） ================= */
/* 遮罩透明，理由同上面的 .func-mask */
.emoji-mask{position:fixed;inset:0;z-index:205;background:transparent;opacity:0;visibility:hidden;transition:.2s;}
.emoji-mask.show{opacity:1;visibility:visible;}
.emoji-panel{
	position:fixed;left:0;right:0;bottom:0;z-index:210;background:var(--card);
	/* 高度 = 键盘高度（--panel-face-h 由 app.js 量出来），两个面板来回切时高度完全一致、不跳；
	   量不到时退回 46vh。⚠️ 别再写回 min-height：那会让两个面板在小屏 / 大字号下差出一截。 */
	height:var(--panel-face-h,46vh);min-height:0;display:flex;flex-direction:column;
	border-radius:0;box-shadow:0 -6px 24px rgba(0,0,0,.12);   /* 直角，同「＋」面板 */
	/* 同「＋」面板：不要 transition，位置由 lockPanelGeom() 钉死 */
	transform:translateY(100%);
}
.emoji-panel.show{transform:translateY(0);}
.emoji-head{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:12px 16px 4px;font-size:13px;color:var(--text-2);}
.emoji-head b{font-weight:400;font-size:12px;color:var(--text-3);}
.emoji-grid{
	flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
	display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
	align-content:start;padding:10px 12px calc(16px + var(--safe-bottom));
}
/* 每个表情一个小格子：图片等比缩放到格子内，不裁切、不拉伸，小图也不放大 */
.emoji-cell{height:74px;display:flex;align-items:center;justify-content:center;}
.emoji-img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:10px;}
.emoji-img:active{opacity:.7;}
.emoji-tip{grid-column:1/-1;text-align:center;color:var(--text-3);font-size:13px;padding:30px 10px;line-height:1.6;}

/* 图片 / 表情消息气泡（图片本身是内容，气泡不铺底色；等比缩放不裁切）
   ⚠️ 这条 .msg-img 的 max-width/max-height 是**图片不撑大**的关键：
      少了它，图片会按原始分辨率显示（一张手机截图能撑满整屏）。 */
.msg-bubble.img{padding:3px;background:#fff;max-width:100%;}
.msg.me .msg-bubble.img{background:#fff;}
.msg-img{display:block;width:auto;height:auto;max-width:150px;max-height:150px;border-radius:8px;}

/* 表情包（服务器 bqb 素材）：像表情一样**直接贴图** —— 没有图片那种白底卡片、
   圆角和阴影，也不铺装扮气泡的底色；比图片小一点，不裁切。
   保留了 .img 类（见 js/app.js 的 bubbleHTML），所以 :not(.img) 那批装扮规则不会命中它。
   它用的是 .msg-emoji 而不是 .msg-img → 点一下不会打开大图查看器（表情不是图片）。 */
.msg-bubble.img.emoji-pic,
.msg.me .msg-bubble.img.emoji-pic{
	padding:0;background:transparent;box-shadow:none;border-radius:0;
}
.msg-emoji{display:block;width:auto;height:auto;max-width:140px;max-height:140px;border-radius:0;}

/* ================= 文件消息（type=4） =================
   卡片式：左边后缀小方块（颜色按后缀自动识别）+ 右边文件名 / 体积；点一下下载 + 系统应用打开。
   ⚠️ 文件卡片是**独立卡片，不套任何装扮气泡**（底色 / 渐变 / 扫光 / 四角图案 / 小尖角 / 圆角都不跟）。
      但压住它们需要足够高的特异性：app.js 注入的 ensureBubbleCSS() 用的是
        .msg.bd-c.bd-c .msg-bubble:not(.img):not(.rp-bubble):not(.tr-bubble)  → (0,7,1) + !important
        .msg.bubble-c.sweep …::before（原来的扫光，已删除）                          → 已无此规则
      所以下面把 .file-bubble 写两遍、再加 3 个 :not() 顶到 (0,8,1)，才真的压得住。
      改这些选择器时**别降低特异性**，否则装扮气泡又会套到文件卡片上。 */
.msg.msg .msg-bubble.file-bubble.file-bubble:not(.img):not(.rp-bubble):not(.tr-bubble){
	display:flex;align-items:center;gap:10px;
	width:250px;max-width:100%;padding:10px 12px;
	/* ⚠️ 固定白底 + 固定深色文字：**不跟深色主题走**（用户要求"统一白底，自己看也是白底"）。
	   所以这里不能用 var(--card)/var(--text)——深色主题下它们会变成深色底 + 浅色字。 */
	background:#fff !important;
	color:#1A1A1A !important;
	border:1px solid rgba(0,0,0,.08) !important;
	border-radius:12px !important;                 /* 不跟装扮气泡的圆角走 */
	box-shadow:0 1px 2px rgba(16,24,40,.05) !important;
	animation:none !important;
	background-size:auto !important;               /* 压掉「渐变 220%」那套流动动画的残留 */
}
/* 扫光（::before）、四角图案 / 小尖角（::after）全部不要：文件卡片是独立卡片，不是气泡 */
.msg.msg .msg-bubble.file-bubble.file-bubble:not(.img):not(.rp-bubble):not(.tr-bubble)::before,
.msg.msg .msg-bubble.file-bubble.file-bubble:not(.img):not(.rp-bubble):not(.tr-bubble)::after{
	content:none !important;
	display:none !important;
	animation:none !important;
	background:none !important;
	opacity:0 !important;
}
/* 自定义气泡的四角图案是真实 <img>（不在伪元素里），一起藏掉 */
.msg .msg-bubble.file-bubble .bd-pat{display:none !important;}
/* 按下反馈：用 filter 而不是 background —— 卡片背景是内联 !important 写死的，改 background 压不住 */
.msg.msg .msg-bubble.file-bubble.file-bubble:not(.img):not(.rp-bubble):not(.tr-bubble):active{
	filter:brightness(.965);
}
/* 图标方块：颜色由 JS 按后缀自动识别后写到 --fb-c / --fb-bg 上（见 fileKind） */
.fb-ico{
	flex:0 0 auto;width:36px;height:36px;border-radius:9px;
	background:var(--fb-bg,rgba(46,123,224,.12));color:var(--fb-c,#2E7BE0);
	display:flex;align-items:center;justify-content:center;
}
.fb-ico i{
	font-style:normal;font-size:10px;font-weight:700;letter-spacing:.3px;line-height:1;
	max-width:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fb-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
/* 卡片固定白底 → 文件名/体积也用固定的深色系，不要 var(--text)（深色主题下会变浅色、在白底上看不清） */
.fb-name{
	font-size:14px;color:inherit;line-height:1.35;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fb-size{font-size:11.5px;color:#8A8F99;line-height:1.2;}
/* 卡片右侧「下载 / 下载中 / 打开」圆形按钮 */
.fb-dl{
	flex:0 0 auto;width:30px;height:30px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:#EAF1FF;color:#2E7BE0;
}
.fb-dl .ico{width:16px;height:16px;stroke-width:2;}
.fb-dl:active{background:#DCE9FF;}
.fb-dl .fb-i-open{display:none;}
.fb-dl[data-s="done"]{background:#E9F7EE;color:#2FA84F;}
.fb-dl[data-s="done"] .fb-i-dl{display:none;}
.fb-dl[data-s="done"] .fb-i-open{display:block;}
.fb-dl[data-s="ing"]{background:#EAF1FF;}
.fb-dl[data-s="ing"] .fb-i-dl{display:none;}
.fb-dl[data-s="ing"]::after{
	content:"";width:14px;height:14px;border-radius:50%;
	border:2px solid rgba(46,123,224,.25);border-top-color:#2E7BE0;
	animation:upSpin .8s linear infinite;
}
/* 进度条默认收起：上传中的占位卡片、下载中才显示 */
.msg-bubble.file-bubble .fb-bar{display:none;}
.msg-bubble.file-bubble.uploading .fb-bar{display:block;}
/* 上传进度条：只在占位卡片里出现（真气泡没有 .fb-bar） */
.fb-bar{
	display:block;height:3px;margin-top:5px;border-radius:2px;
	background:rgba(0,0,0,.08);overflow:hidden;
}
.fb-bar i{
	display:block;height:100%;width:0;border-radius:2px;
	background:#2E7BE0;transition:width .18s linear;
}
/* 上传中：小方块里的后缀换成转圈（upSpin 关键帧见上面图片占位气泡） */
.msg-bubble.file-bubble.uploading{opacity:.72;}
.msg-bubble.file-bubble.uploading .fb-ico{position:relative;}
.msg-bubble.file-bubble.uploading .fb-ico i{display:none;}
.msg-bubble.file-bubble.uploading .fb-ico::after{
	content:"";width:16px;height:16px;border-radius:50%;
	border:2px solid rgba(46,123,224,.22);border-top-color:#2E7BE0;
	animation:upSpin .8s linear infinite;
}
/* 图标底色用「主色 14% 透明」、进度条轨道用半透明黑 —— 都是按白底调的，深色主题下也不用覆盖
   （卡片本身就是固定白底，见上面那条） */

/* 「泡泡服务通知 / 泡泡支付」是只读会话（.svc-chat）：
   顶栏的功能按钮 + **整条输入栏**全部隐藏 —— 语音、输入框、表情、＋、发送都不给。
   头像也不给点（点了不会弹资料卡）。
   ⚠️ 用 !important：之前 JS 给这些元素写过内联 display，靠普通规则压不住。 */
.chat-page.svc-chat #chatCall,
.chat-page.svc-chat #chatMore,
.chat-page.svc-chat #emojiBtn,
.chat-page.svc-chat #chatPlusBtn,
.chat-page.svc-chat #chatBar,
.chat-page.svc-chat .chat-input{display:none !important;}
.chat-page.svc-chat .msg .avatar,
.chat-page.svc-chat .chat-head .avatar,
.chat-page.svc-chat .chat-title{pointer-events:none;}

/* 在线音乐「刷新」时让箭头转起来（music.js 会加/去 .spin） */
#musicRefresh.spin .ico{animation:mrSpin .8s linear infinite;}
@keyframes mrSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* 文件消息「5 分钟自动销毁」：剩余时间提示 + 已销毁态 */
.fb-count{
	font-style:normal;font-weight:600;color:#FF7A18;font-size:11.5px;
	white-space:nowrap;
}
.file-bubble.gone{opacity:.75;}
.file-bubble.gone .fb-ico{filter:grayscale(1);opacity:.7;}
.file-bubble.gone .fb-size{color:#E8455F;}
.file-bubble.gone:active{opacity:.75;}

/* 点「+」时输入栏跟着面板一起上移（微信那种效果） */
.chat-input{transition:transform .24s cubic-bezier(.32,.72,.28,1);}

/* ================= 聊天红包（发的是泡泡币） ================= */

/* 红包卡片（橙色，纯文字两行：祝福语 + 类型/状态）
   ⚠️ 不挂 emoji 图标；和转账卡片**等宽等高**（长度写死 200px，文案过长用省略号）
   ⚠️ border:0 + box-shadow:none 不能省：qq-theme 后半段又给普通气泡加了一版
      「1px 边框 + 阴影」，.msg.me 那档还挂了一枚蓝色阴影 —— 不在这里压掉，
      「自己发的」卡片会带蓝光/透明边框、「对方发的」是灰边灰影，两张卡就不一样了
      （深色主题里 html[data-theme="dark"] .msg-bubble 还会再插一脚）。 */
.msg-bubble.rp-bubble{
	display:flex;align-items:center;gap:9px;width:200px;max-width:100%;
	background:linear-gradient(135deg,#FBAA4E 0%,#F0821F 100%);color:#fff;padding:10px 12px;
	border:0;box-shadow:none;
}
.msg.me .msg-bubble.rp-bubble{
	background:linear-gradient(135deg,#FBAA4E 0%,#F0821F 100%);
	border:0;box-shadow:none;
}
.rp-bubble:active{filter:brightness(.95);}
.rp-bubble .rp-txt{flex:1;min-width:0;}
.rp-bubble .rp-greet{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rp-bubble .rp-state{font-size:11px;opacity:.88;margin-top:3px;}

/* ================= 聊天转账（免费；2 小时未领取自动退回） ================= */

/* 转账卡片（绿色，纯文字两行：泡泡转账 + 金额·状态）
   ⚠️ 不挂 emoji 图标；和红包卡片**等宽等高**（长度同样写死 200px）
   ⚠️ border:0 + box-shadow:none 见上面红包卡片的说明（两张卡片必须完全一致） */
.msg-bubble.tr-bubble{
	display:flex;align-items:center;gap:9px;width:200px;max-width:100%;
	background:linear-gradient(135deg,#48D287 0%,#17A85D 100%);color:#fff;padding:10px 12px;
	border:0;box-shadow:none;
}
.msg.me .msg-bubble.tr-bubble{
	background:linear-gradient(135deg,#48D287 0%,#17A85D 100%);
	border:0;box-shadow:none;
}
.tr-bubble:active{filter:brightness(.95);}          /* 按下反馈和红包一致 */
.tr-bubble .tr-txt{flex:1;min-width:0;}
.tr-bubble .tr-title{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 第二行：金额 · 备注 · 状态（和红包的 .rp-state 同字号） */
.tr-bubble .tr-state{
	font-size:11px;opacity:.88;margin-top:3px;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tr-bubble .tr-state .tr-note,
.tr-bubble .tr-state .tr-st{font-style:normal;font-weight:400;}
.tr-bubble .tr-btn{
	flex:0 0 auto;height:28px;padding:0 12px;border:0;border-radius:14px;
	background:#fff;color:#17A85D;font-size:13px;font-weight:600;    /* 白底绿字，跟卡片同色系 */
}
.tr-bubble .tr-btn:active{opacity:.85;}
/* 已领取 / 已退回 → 卡片压暗一点，一眼看出不能再点 */
.msg-bubble.tr-bubble[data-status="1"],
.msg-bubble.tr-bubble[data-status="2"]{filter:grayscale(.4);opacity:.92;}

/* 转账弹窗里「转给：xxx」那一行 */
.tr-to{font-size:13.5px;color:var(--text-2,#5A6069);margin:2px 2px 8px;}
.tr-to b{color:var(--text,#1B1F24);}

/* 红包面板（点气泡弹出）—— 微信同款：深红卡片 + 顶部金色封口弧 + 金色圆钮「開」 */
.rp-sheet{
	position:fixed;inset:0;z-index:470;display:flex;align-items:center;justify-content:center;
	padding:0 26px;background:rgba(0,0,0,.72);
	opacity:0;visibility:hidden;transition:.22s;
}
.rp-sheet.open{opacity:1;visibility:visible;}
.rp-card{
	position:relative;
	width:100%;max-width:330px;max-height:84%;overflow-y:auto;-webkit-overflow-scrolling:touch;
	border-radius:14px;padding:20px 16px 14px;text-align:center;color:#fff;
	background:
		radial-gradient(ellipse 120% 55% at 50% -8%, rgba(255,214,150,.26), transparent 62%),
		linear-gradient(180deg,#D9564A 0%,#C0392B 48%,#A93226 100%);
	box-shadow:0 22px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.16);
	transform:translateY(12px) scale(.95);transition:.24s;
}
.rp-sheet.open .rp-card{transform:none;}
/* 顶部那层金色封口弧（微信红包的「袋口」） */
.rp-card::before{
	content:"";position:absolute;left:0;right:0;top:0;height:78px;pointer-events:none;
	background:linear-gradient(180deg, rgba(255,236,190,.20), rgba(255,236,190,0));
	border-radius:14px 14px 50% 50% / 14px 14px 30px 30px;
}
.rp-loading{padding:40px 0;font-size:14px;opacity:.9;}
.rp-top{position:relative;z-index:1;display:flex;align-items:center;gap:10px;text-align:left;}
.rp-top .avatar{width:40px;height:40px;font-size:18px;box-shadow:0 0 0 1.5px rgba(255,225,170,.7);}
.rp-from{min-width:0;}
.rp-from-name{font-size:15px;font-weight:600;display:flex;align-items:center;gap:4px;color:#FFE9C2;}
.rp-from-name.vip{color:#FFE08A;}     /* 红底上会员名字用金色更清楚 */
.rp-from-name.svip{color:#FFD24D;}
.rp-from-sub{font-size:11px;color:rgba(255,235,205,.72);margin-top:2px;}

/* 金色圆钮：微信那种带外圈金环的「開」 */
.rp-hero{
	position:relative;z-index:1;
	width:108px;height:108px;border-radius:50%;margin:18px auto 14px;flex:0 0 auto;
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	background:radial-gradient(circle at 50% 30%, #FFEFC4 0%, #F7D98B 44%, #E6B44F 100%);
	color:#8C4A0A;font-size:30px;font-weight:800;letter-spacing:.04em;
	border:1px solid rgba(255,255,255,.62);
	box-shadow:
		0 10px 22px rgba(110,36,18,.42),
		inset 0 -6px 14px rgba(160,100,10,.26),
		inset 0 3px 8px rgba(255,248,220,.9);
	transition:transform .18s ease;
}
.rp-hero::after{
	content:"";position:absolute;inset:-7px;border-radius:50%;pointer-events:none;
	border:2px solid rgba(255,224,160,.45);
	box-shadow:0 0 16px rgba(255,210,120,.3);
}
.rp-hero.open{animation:rpBreath 1.8s ease-in-out infinite;}
@keyframes rpBreath{
	0%,100%{transform:scale(1);}
	50%{transform:scale(1.045);}
}
.rp-hero.open:active{transform:scale(.95);}
/* 点开的一瞬间：金币转一圈，然后金额「啪」地出来 */
.rp-hero.spin{animation:rpSpin .9s cubic-bezier(.45,.05,.3,1) forwards;}
@keyframes rpSpin{
	0%{transform:rotateY(0deg) scale(1);}
	50%{transform:rotateY(180deg) scale(1.12);}
	100%{transform:rotateY(360deg) scale(1);}
}
.rp-hero.got{
	animation:rpPop .34s cubic-bezier(.2,.9,.3,1.2);
	background:radial-gradient(circle at 50% 30%, #FFF6D8 0%, #F8DE9C 44%, #EBBE5F 100%);
}
@keyframes rpPop{
	from{transform:scale(.72);opacity:.35;}
	to{transform:scale(1);opacity:1;}
}
.rp-hero.over{background:rgba(255,255,255,.16);color:#fff;font-size:16px;font-weight:600;box-shadow:none;}
.rp-hero.over::after{display:none;}
.rp-hero.got b{font-size:34px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.rp-hero.got i{font-size:12px;font-style:normal;opacity:.75;margin-top:3px;}
.rp-hero.got span{font-size:11.5px;margin-top:6px;opacity:.9;}
.rp-greet-line{position:relative;z-index:1;font-size:15px;font-weight:600;color:#FFE9C2;}
/* 底部品牌小字（微信红包底部那行） */
.rp-brand{margin-top:14px;font-size:11px;letter-spacing:.12em;color:rgba(255,235,205,.55);}
.rp-meta{font-size:11.5px;opacity:.85;margin-top:6px;}
.rp-recs{margin-top:14px;background:rgba(255,255,255,.12);border-radius:12px;padding:4px 10px;text-align:left;}
.rp-rec{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12);}
.rp-rec:last-child{border-bottom:0;}
.rp-rec .avatar{width:30px;height:30px;font-size:14px;}
.rp-rec-main{flex:1;min-width:0;}
.rp-rec-name{font-size:13.5px;display:flex;align-items:center;gap:4px;}
.rp-rec-name.vip{color:#FFE08A;}
.rp-rec-name.svip{color:#FFD24D;}
.rp-rec-time{font-size:11px;opacity:.7;margin-top:2px;}
.rp-rec-amount{font-size:14px;font-weight:600;flex:0 0 auto;}
.rp-best{font-style:normal;font-size:10px;color:#8A4B00;background:#F7D470;border-radius:6px;padding:1px 5px;}
.rp-empty{font-size:12.5px;opacity:.8;padding:12px 0;}
.rp-close{
	width:100%;height:40px;border-radius:20px;margin-top:16px;
	background:rgba(255,255,255,.92);color:#C33C24;font-size:15px;font-weight:600;
}
.rp-close:active{background:#fff;}

/* 发红包弹窗（借用通用弹窗） */
.rp-form{display:flex;flex-direction:column;gap:10px;}
.rp-field{display:flex;align-items:center;gap:8px;height:46px;background:#F4F5F7;border-radius:10px;padding:0 14px;}
.rp-field span{font-size:13px;color:var(--text-2);flex:0 0 auto;}
.rp-field input{flex:1;min-width:0;font-size:17px;font-weight:600;}
.rp-field i{font-style:normal;font-size:13px;color:var(--text-2);}
.rp-kinds{display:flex;gap:8px;}
.rp-kind{
	flex:1;height:38px;border-radius:10px;background:#F4F5F7;color:var(--text-2);
	font-size:13.5px;border:1px solid transparent;
}
.rp-kind.active{background:#FFF3E6;color:#E0700F;border-color:#F7C48A;font-weight:600;}


/* ==========================================================================
   以下 = 功能样式 + 通用修复（原先混在 css/qq9.css 主题层里，现搬到基础样式）
   为什么要搬：主题层是"外观皮肤"，可以整层删掉回退旧外观；
   而这些样式是功能/修复必需的，放在这里才不会跟着主题一起消失。
   ========================================================================== */

/* 顶部安全距离：JS 量到的状态栏高度 与 CSS 安全区取较大者
   （这样即使 JS 没量到、或个别 ROM 把状态栏高度报成 0，摄像头挖孔也不会遮住内容） */
:root{
	--safe-top-max:max(var(--safe-top, 0px), env(safe-area-inset-top, 0px));
}

/* ---------- 长按消息：操作菜单 / 引用条 / 引用块 / 撤回提示 ---------- */
/* 菜单：深色小浮层，贴着气泡弹出 */
.msg-menu-mask{position:fixed;inset:0;z-index:420;display:none;}
.msg-menu-mask.show{display:block;}
.msg-menu{
	position:fixed;z-index:430;min-width:132px;
	background:#2B2B2B;border-radius:10px;padding:4px 0;
	box-shadow:0 10px 28px rgba(0,0,0,.3);
	opacity:0;visibility:hidden;transform:scale(.92);
	transition:opacity .14s,transform .14s,visibility .14s;
}
.msg-menu.show{opacity:1;visibility:visible;transform:none;}
.msg-menu-item{padding:10px 18px;font-size:15px;color:#fff;text-align:center;white-space:nowrap;}
.msg-menu-item:active{background:rgba(255,255,255,.14);}
.msg-menu-item.danger{color:#FF6B6B;}

/* 长按的「按住反馈」：按下瞬间气泡轻微缩小（手上有响应，菜单出来前不觉得卡）
   ⚠️ 只改 transform / filter，不碰布局；松手/取消立刻移除 */
.msg-bubble.msg-press{
	transform:scale(.97);
	filter:brightness(.94);
	transition:transform .07s ease-out, filter .07s ease-out;
}

/* 引用条：出现在输入栏上方，可点 ✕ 取消 */
.quote-bar{
	display:none;flex:0 0 auto;align-items:center;gap:8px;
	padding:8px 12px;background:#F7F8FA;border-top:1px solid var(--line);
}
.quote-bar.show{display:flex;}
.quote-bar-name{flex:0 0 auto;font-size:12.5px;font-weight:500;color:var(--brand-blue);}
.quote-bar-text{
	flex:1;min-width:0;font-size:12.5px;color:var(--text-2);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.quote-bar-x{flex:0 0 auto;width:26px;height:26px;border-radius:50%;font-size:14px;color:var(--text-3);}
.quote-bar-x:active{background:#EBEDF0;}

/* 引用块：气泡上方的灰色小卡片（左侧一条竖线，像引用原文） */
.msg-quote{
	display:flex;flex-direction:column;gap:2px;
	margin:0 0 4px;padding:6px 9px;max-width:100%;
	background:#F0F1F3;border-left:3px solid #C8C8C8;border-radius:6px;
}
.msg-quote .mq-name{font-size:11.5px;color:var(--brand-blue);}
.msg-quote .mq-text{
	font-size:12.5px;color:var(--text-2);max-width:100%;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* 撤回提示：居中一行灰字 */
.msg-revoked{text-align:center;font-size:12px;color:var(--text-3);margin:10px 0;}

/* ---------- @ 提醒（长按头像 @ 人 / 正文高亮 / 会话列表与底部标签标记） ---------- */
.msg-at{color:#0099FF;font-weight:500;}
.msg.me .msg-at{color:#BFE6FF;font-weight:500;}   /* 自己的蓝底气泡上用浅蓝，保证可读 */
.row-at{color:var(--red);font-weight:500;margin-right:2px;}

/* 「选择复制」弹窗里的文本框：可长按拖选 */
.sel-copy{
	width:100%;height:150px;margin-top:2px;padding:9px 10px;
	border:1px solid #E6E8EB;border-radius:9px;background:#FCFCFD;
	font-size:14px;line-height:1.6;color:#1B1F24;
	resize:none;outline:none;
	-webkit-user-select:text;user-select:text;
}

/* 正文里的网址（点它 → 应用内打开，像微信那样不跳出 App） */
.msg-link{color:#1E7BE8;text-decoration:underline;word-break:break-all;cursor:pointer;}
.msg.me .msg-link{color:#CDE7FF;}                    /* 自己蓝底气泡上用浅色，保证可读 */
.msg-link:active{opacity:.75;}
/* 底部「消息」标签：有人@我时，图标左上角显示红色「@」小标（右上角仍是未读数） */
.tab-at{
	position:absolute;top:-4px;left:-12px;
	min-width:16px;height:16px;line-height:16px;padding:0 3px;
	background:var(--red);color:#fff;font-size:10px;font-style:normal;font-weight:600;
	border-radius:8px;text-align:center;display:none;
}

/* ---------- 发图片时的占位气泡（上传中，灰底转圈） ---------- */
.msg-bubble.img.uploading,
.msg.me .msg-bubble.img.uploading{
	width:160px;height:160px;padding:0;
	background:#F0F1F3;box-shadow:none;
	display:flex;align-items:center;justify-content:center;
}
.up-spin{
	display:block;width:22px;height:22px;border-radius:50%;
	border:2px solid rgba(0,0,0,.10);border-top-color:#0099FF;
	animation:upSpin .8s linear infinite;
}
@keyframes upSpin{to{transform:rotate(360deg);}}

/* ---------- 设置项弹窗里的快捷列表（如「下载保存位置」） ---------- */
.jump-list{margin:-4px 0;}
.jump-row{
	display:flex;align-items:center;gap:10px;
	padding:13px 4px;border-bottom:1px solid #F2F2F2;
}
.jump-row:last-child{border-bottom:0;}
.jump-row:active{background:#F7F7F7;}
/* 「后台消息通知」里三档模式的勾（当前生效的那档才显示） */
.jump-row .bg-ck{
	margin-left:auto;flex:0 0 auto;font-size:15px;font-weight:600;color:var(--brand-blue);
	visibility:hidden;
}
.jump-row.active .bg-ck{visibility:visible;}
/* 图标位：原来是 emoji（font-size:18px），现在放内联 SVG ——
   改成 flex 居中 + 给 svg 定尺寸；颜色走 --text-2（深浅主题自动跟着变） */
.jump-row .jr-ico{
	width:24px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
	color:var(--text-2);
}
.jump-row .jr-ico .ico{width:19px;height:19px;stroke-width:1.8;}
.jump-row .jr-txt{flex:1;font-size:15.5px;color:var(--text);}
.jump-row .set-arrow{color:var(--text-3);}

/* ---------- 应用中心（列表复用 game-card 样式，这里是详情页） ---------- */
.app-top{
	display:flex;align-items:center;gap:14px;
	padding:14px;border-radius:14px;background:var(--card);
}
.app-ico{
	width:64px;height:64px;border-radius:16px;flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;
	background:linear-gradient(135deg,#4EA8FF,#2C7BFF);
}
.app-top-main{flex:1;min-width:0;}
.app-name{font-size:18px;font-weight:600;color:var(--text);}
.app-meta{margin-top:4px;font-size:12.5px;color:var(--text-2);}
.app-tagline{
	margin-top:6px;font-size:13px;color:var(--text-2);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.app-btn{
	display:block;width:100%;height:46px;margin-top:14px;border-radius:12px;
	background:var(--brand-blue);color:#fff;font-size:16px;font-weight:500;
}
.app-btn:active{filter:brightness(.94);}
.app-btn:disabled{background:#D8D8D8;color:#fff;}
.app-btn.busy{background:#7FBEF5;}
.app-detail{
	background:var(--card);border-radius:12px;padding:14px;
	font-size:14px;line-height:1.7;color:var(--text);
	white-space:pre-wrap;word-break:break-word;
}

/* ---------- 下载进度条 & 下载记录 ---------- */
/* 进度条：从 0% 平滑爬到 100%（位置在按钮下方，百分比在条子右上角） */
.app-progress{
	position:relative;display:none;height:6px;margin-top:26px;
	border-radius:3px;background:#EBEDF0;overflow:visible;
}
.app-progress.show{display:block;}
.app-progress i{
	display:block;height:100%;width:0;border-radius:3px;
	background:linear-gradient(90deg,#00B5FF,#0099FF);
	transition:width .2s linear;
}
.app-progress-txt{
	position:absolute;right:0;top:-21px;font-size:12px;color:var(--text-2);
	font-variant-numeric:tabular-nums;
}
/* 应用中心顶部的「我的下载记录」入口 */
.app-tool{
	display:flex;align-items:center;gap:10px;width:100%;
	padding:12px 14px;margin-bottom:4px;border-radius:12px;background:var(--card);
	font-size:15px;color:var(--text);text-align:left;
}
.app-tool:active{background:#F7F7F7;}
.app-tool-ico{font-size:17px;width:22px;text-align:center;}
.app-tool-txt{flex:1;}
.app-tool .set-arrow{color:var(--text-3);}
/* 检查更新弹窗里的更新说明 */
.up-log{
	margin-top:8px;padding:9px 11px;border-radius:8px;background:#F5F6F8;
	font-size:13px;color:var(--text-2);line-height:1.65;
	white-space:pre-wrap;word-break:break-word;
	max-height:180px;overflow-y:auto;
}

/* ---------- 官方群聊 / 官方客服 列表（在弹窗里） ---------- */
.of-row{
	display:flex;align-items:center;gap:10px;
	padding:10px 0;border-bottom:1px solid #F2F2F2;
}
.of-row:last-child{border-bottom:0;}
.of-row:active{background:#F7F7F7;}
.of-ico{
	width:40px;height:40px;border-radius:11px;flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;
	background:linear-gradient(135deg,#38B6FF,#2C7BFF);
}
.of-main{flex:1;min-width:0;}
.of-name{
	font-size:15.5px;font-weight:500;color:var(--text);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.of-sub{
	margin-top:3px;font-size:12.5px;color:var(--text-2);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.of-btn{
	flex:0 0 auto;height:28px;line-height:28px;padding:0 12px;border-radius:8px;
	background:var(--brand-blue);color:#fff;font-size:13px;
}
.of-btn.gray{background:#EFF1F4;color:var(--text-2);}

/* ---------- 官方店铺（商品列表 / 详情） ---------- */
.shop-bar{
	display:flex;align-items:center;gap:10px;
	margin-top:4px;padding:14px 16px;border-radius:14px;color:#fff;
	background:linear-gradient(135deg,#FFB03A 0%,#FF7A45 100%);
	box-shadow:0 8px 20px rgba(255,140,60,.25);
}
.shop-bar-label{font-size:12.5px;opacity:.9;}
.shop-bar-num{flex:1;font-size:24px;font-weight:700;}
.shop-bar-btn{
	flex:0 0 auto;height:32px;padding:0 16px;border-radius:10px;
	background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);
	color:#fff;font-size:13.5px;
}
.shop-bar-btn:active{background:rgba(255,255,255,.34);}
.shop-price{
	flex:0 0 auto;font-size:19px;font-weight:700;color:#FF7A45;
	font-variant-numeric:tabular-nums;
}
.shop-price i{font-size:11px;font-style:normal;font-weight:400;margin-left:1px;color:#B98A2F;}
.shop-balance-line{margin-top:10px;text-align:center;font-size:12.5px;color:var(--text-2);}
.shop-balance-line b{color:#FF7A45;font-size:14px;}
.game-tag.gray{background:#EFF1F4;color:var(--text-3);}     /* 商品「已售罄」等灰色标签 */

/* ---------- 我的订单 / 下载记录 的通用行样式 ---------- */
.mo-row{
	display:flex;align-items:center;gap:10px;
	padding:13px 14px;border-bottom:1px solid #F2F2F2;
}
.mo-row:last-child{border-bottom:0;}
.mo-main{flex:1;min-width:0;}
.mo-name{
	font-size:15px;color:var(--text);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mo-badge{
	font-style:normal;margin-left:5px;padding:1px 6px;border-radius:7px;
	font-size:10.5px;background:#EAF5FF;color:var(--brand-blue);vertical-align:1px;
}
.mo-badge.gray{background:#EFF1F4;color:var(--text-3);}
.mo-sub{margin-top:3px;font-size:12px;color:var(--text-2);}
.mo-state{flex:0 0 auto;font-size:12px;padding:2px 8px;border-radius:8px;}
.mo-state.on{background:#E8F7EE;color:#1F9254;}
.mo-state.wait{background:#FFF3E6;color:#E0700F;}
.mo-state.gray{background:#EFF1F4;color:var(--text-3);}

/* ---------- 钱包页层级 ---------- */
/* 钱包是从「商品详情 / 靓号中心 / 会员中心」点「去充值」压上来的（pushLayer），
   但它在 index.html 里比这些页面靠前、z-index 又一样，会被来源页盖住 —— 单独抬一层 */
#walletPage{z-index:230;}

/* ---------- 图标是图片时铺满图标框 ---------- */
/* 后台可以给应用/商品/官方入口传图片当图标；.ico-img 让它填满原图标框（继承圆角） */
.ico-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;}

/* ⚠️ 功能入口的图标必须**严格铺满**那个圆角方块：
   flex 容器 + align-items:center 时，部分 WebView 对子元素 height:100% 解析失败，
   图片会退回「固有尺寸」（比如 24×24），四周露出一圈底色 —— 深色主题下就是一圈"白边"。
   这里改成绝对定位铺满，和 flex 的尺寸计算彻底解耦。
   ⚠️ 注意这里**不要**给 .quick-ico 加 overflow:hidden：
      未读小红点（.dot-badge）贴在右上角、描边还会往外扩 2px，
      一加 overflow 就被裁掉半圈，看起来像"缩进图标里"了。
      图片铺满靠自己的 border-radius:inherit 就够了，不需要容器裁。 */
.quick-ico .ico-img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}

/* ---------- 登录页顶部也让开安全区 ---------- */
.login-card{padding-top:calc(34px + var(--safe-top-max));}



/* ==========================================================================
   官方商城 · 购物平台风格（红主色 + 搜索栏 + 分类 tab + 两列瀑布流 + 底部导航）
   ========================================================================== */
/* 顶部：返回 + 搜索框 + 刷新（自带状态栏留白） */
.mall-top{
	flex:0 0 auto;display:flex;align-items:center;gap:8px;
	padding:calc(8px + var(--safe-top)) 12px 8px;background:#fff;
}
.mall-search{
	flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:36px;
	padding:0 11px;border-radius:18px;background:#F5F6F8;
}
.mall-search .ico{flex:0 0 auto;width:16px;height:16px;stroke:#B3B3B3;stroke-width:2;}
.mall-search input{flex:1;min-width:0;font-size:14px;color:var(--text);}
.mall-search-x{
	flex:0 0 auto;display:none;align-items:center;justify-content:center;
	width:17px;height:17px;border-radius:50%;background:#C9CCD1;color:#fff;font-size:10px;
}

/* 商城 / 个人中心两个面板：各自内部滚动，底部导航始终可见 */
.mall-pane{flex:1;min-height:0;display:none;flex-direction:column;background:#F5F6F8;}
.mall-pane.active{display:flex;}
.mall-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.mall-body{padding:12px 12px 20px;}      /* 面板内容留白（游戏中心 / 应用中心用） */

/* 分类标签栏（吸在搜索栏下面） */
.mall-cate{flex:0 0 auto;background:#fff;padding:2px 12px 9px;}
.pdd-tabs{display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.pdd-tabs::-webkit-scrollbar{height:0;}
.pdd-tab{
	flex:0 0 auto;height:30px;padding:0 15px;border-radius:15px;
	background:#F5F6F8;color:#444;font-size:13.5px;
	/* ⚠️ 必须加 flex 居中：只写 height 的话文字会贴在顶部（行盒按基线排，不垂直居中） */
	display:inline-flex;align-items:center;justify-content:center;
	white-space:nowrap;
}
.pdd-tab.active{background:#E02E24;color:#fff;font-weight:600;}

/* 底部导航：商城 / 个人中心 */
.mall-tabbar{
	flex:0 0 auto;display:flex;background:#fff;
	border-top:1px solid #EBEBEB;padding-bottom:var(--safe-bottom);
}
.mall-tab{
	flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
	padding:8px 0 7px;color:var(--text-3);font-size:11.5px;
}
.mall-tab .ico{width:23px;height:23px;}
.mall-tab.active{color:#E02E24;font-weight:600;}

/* 个人中心 */
.mall-me-head{display:flex;align-items:center;gap:12px;padding:16px 14px;background:#fff;}
.mall-me-info{flex:1;min-width:0;}
.mall-me-name{display:flex;align-items:center;gap:4px;font-size:17px;font-weight:600;color:var(--text);}
.mall-me-no{margin-top:4px;font-size:12.5px;color:var(--text-3);}
.mall-wallet{
	margin:10px 12px 0;padding:16px 14px;border-radius:12px;
	background:linear-gradient(120deg,#FF5A4E 0%,#E02E24 100%);color:#fff;
}
.mall-wallet-top{display:flex;align-items:baseline;gap:8px;font-size:12.5px;opacity:.92;}
.mall-wallet-top b{font-size:30px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;}
.mall-wallet-ops{display:flex;gap:10px;margin-top:14px;}
.mall-w-btn{
	flex:1;height:34px;border-radius:17px;background:#fff;color:#E02E24;
	font-size:14px;font-weight:600;
}
.mall-w-btn.ghost{background:rgba(255,255,255,.22);color:#fff;}
.mall-w-btn:active{filter:brightness(.95);}
#shopMePane .set-group-title{margin:0 12px;}
#shopMePane .set-group{margin:0 12px;}
.mall-me-tip{padding:20px 0 24px;text-align:center;font-size:11.5px;color:var(--text-3);}

/* ---------------- 市场 · 我的店铺（编辑 / 管理自己发布的商品） ---------------- */
.msh-fans{flex:0 0 auto;font-size:12.5px;color:#9AA0A6;}
.msh-stats{display:flex;gap:8px;padding:10px 0 4px;}
.msh-stat{flex:1;background:#fff;border-radius:10px;padding:10px 0;text-align:center;}
.msh-stat b{display:block;font-size:18px;color:#1A1A1A;font-variant-numeric:tabular-nums;}
.msh-stat span{font-size:11.5px;color:#9AA0A6;}
.msh-tabs{display:flex;gap:7px;padding:10px 0 4px;}
.msh-tab{height:30px;line-height:30px;padding:0 15px;border-radius:15px;background:#fff;color:#6B7280;font-size:13.5px;}
.msh-tab.on{background:#FF6A00;color:#fff;font-weight:600;}
.msh-list{padding:6px 0 18px;}
.msh-item{display:flex;gap:10px;padding:10px;background:#fff;border-radius:10px;margin-bottom:8px;}
.msh-cover{flex:0 0 auto;width:74px;height:74px;border-radius:8px;overflow:hidden;background:#F4F5F7;}
.msh-cover img{width:100%;height:100%;object-fit:cover;}
.msh-cover .mkt-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.msh-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.msh-title{font-size:14px;color:#1A1A1A;font-weight:600;line-height:1.35;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.msh-price{display:flex;align-items:baseline;gap:6px;font-size:16px;font-weight:700;color:#FF3B30;}
.msh-price i{font-style:normal;font-size:11px;}
.msh-st{font-style:normal;font-size:10.5px;font-weight:500;padding:1px 5px;border-radius:4px;
	background:rgba(255,106,0,.1);color:#FF6A00;}
.msh-st.off{background:#F0F1F3;color:#9AA0A6;}
.msh-meta{font-size:11px;color:#9AA0A6;font-weight:400;}
.msh-ops{display:flex;gap:8px;margin-top:auto;}
.msh-op{height:28px;padding:0 12px;border-radius:14px;border:1px solid #E0E3E8;background:#fff;
	color:#6B7280;font-size:12.5px;}
.msh-op.danger{color:#FF3B30;border-color:rgba(255,59,48,.35);}
.msh-op:active{opacity:.85;}

/* 两列瀑布流 */
.pdd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:8px 10px 4px;}
.pdd-item{background:#fff;border-radius:10px;overflow:hidden;}
.pdd-item:active{opacity:.94;}
.pdd-pic{position:relative;height:0;padding-bottom:100%;background:#F2F3F5;}
.pdd-pic-in{
	position:absolute;left:0;top:0;width:100%;height:100%;
	display:flex;align-items:center;justify-content:center;
	font-size:52px;color:#fff;line-height:1;
}
.pdd-corner{
	position:absolute;left:0;top:0;padding:2px 7px;border-radius:0 0 8px 0;
	background:rgba(224,46,36,.92);color:#fff;font-size:10.5px;
}
.pdd-sold{
	position:absolute;left:0;top:0;width:100%;height:100%;
	background:rgba(0,0,0,.42);color:#fff;
	display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;
}
.pdd-info{padding:8px 9px 10px;}
.pdd-name{
	font-size:13.5px;line-height:1.35;color:var(--text);font-weight:500;
	height:37px;overflow:hidden;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.pdd-foot{display:flex;align-items:flex-end;gap:6px;margin-top:7px;}
.pdd-price{flex:1;min-width:0;font-size:20px;font-weight:700;color:#E02E24;line-height:1;font-variant-numeric:tabular-nums;}
.pdd-price span{font-size:11px;font-weight:400;color:var(--text-3);margin-left:2px;}
.pdd-buy{
	flex:0 0 auto;height:28px;padding:0 12px;border-radius:14px;
	background:linear-gradient(120deg,#FF5A4E 0%,#E02E24 100%);
	color:#fff;font-size:12.5px;font-weight:600;
}
.pdd-buy:active{filter:brightness(.94);}
.pdd-buy:disabled{background:#D8D8D8;color:#fff;}
.pdd-sale{margin-top:5px;font-size:11px;color:var(--text-3);}
.pdd-count{padding:8px 0 14px;text-align:center;font-size:12px;color:var(--text-3);}

/* 商品详情（拼多多式：大图 + 红价 + 底部固定购买栏） */
.pdd-detail{padding:0 0 84px;background:#F5F6F8;}
.pdd-hero{
	position:relative;height:230px;overflow:hidden;background:#F2F3F5;
	display:flex;align-items:center;justify-content:center;
	font-size:92px;line-height:1;color:#fff;
}
.pdd-hero .ico-img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}
.pdd-dcard{background:#fff;padding:14px 14px 16px;}
.pdd-dprice{display:flex;align-items:baseline;gap:5px;}
.pdd-dprice b{font-size:30px;font-weight:700;color:#E02E24;line-height:1;font-variant-numeric:tabular-nums;}
.pdd-dprice span{font-size:13px;color:#E02E24;}
.pdd-dprice i{margin-left:auto;font-style:normal;font-size:12px;color:var(--text-3);}
.pdd-dname{margin-top:9px;font-size:17px;font-weight:600;line-height:1.4;color:var(--text);}
.pdd-dtags{margin-top:8px;font-size:12px;color:var(--text-3);line-height:1.6;}
.pdd-bar{
	position:fixed;left:0;right:0;bottom:0;z-index:8;
	display:flex;align-items:center;gap:10px;
	padding:9px 12px calc(9px + var(--safe-bottom));
	background:#fff;border-top:1px solid #EBEBEB;
}
.pdd-bar-bal{flex:1;min-width:0;font-size:12.5px;color:var(--text-3);}
.pdd-bar-bal b{color:#E02E24;font-size:15px;}
.pdd-bar-buy{
	flex:0 0 auto;height:40px;padding:0 26px;border-radius:20px;
	background:linear-gradient(120deg,#FF5A4E 0%,#E02E24 100%);
	color:#fff;font-size:15.5px;font-weight:600;
}
.pdd-bar-buy:active{filter:brightness(.94);}
.pdd-bar-buy:disabled{background:#D8D8D8;color:#fff;}

/* ================= 头像裁剪（选图后弹出） ================= */
#cropPage{z-index:480;}                    /* 要盖在通用弹窗（450–460）之上，所以单独抬层级 */
.crop-page{background:#111;}               /* 暗底更适合看裁剪区域 */
.crop-page .pub-head{border-bottom-color:rgba(255,255,255,.08);}
.crop-page .pub-title{color:#fff;}
.crop-page .text-btn{color:#B9C0CC;}
.crop-body{
	flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:20px;
	padding:0 20px calc(18px + var(--safe-bottom));
}
.crop-stage{
	position:relative;flex:1;min-height:0;width:100%;
	display:flex;align-items:center;justify-content:center;
	overflow:hidden;touch-action:none;        /* 拖动图片时不要连带滚动页面 */
}
.crop-box{
	position:relative;overflow:hidden;border-radius:14px;background:#000;
	box-shadow:0 0 0 2px rgba(255,255,255,.85), 0 0 0 9999px rgba(0,0,0,.55);
}
/* 裁剪框尺寸由 JS 按裁剪比例算：头像 1:1（加 .round 就是圆的）、个人封面 16:9 的矩形 */
.crop-box.round{border-radius:50%;}
.crop-img{position:absolute;left:0;top:0;max-width:none;user-select:none;-webkit-user-drag:none;}
.crop-zoom{display:flex;align-items:center;gap:12px;width:100%;max-width:360px;flex:0 0 auto;}
.crop-zoom input[type=range]{
	flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;
	background:rgba(255,255,255,.25);outline:none;
}
.crop-zoom input[type=range]::-webkit-slider-thumb{
	-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;
	box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.crop-zoom input[type=range]::-moz-range-thumb{
	width:22px;height:22px;border:0;border-radius:50%;background:#fff;
}
.cz-ico{color:rgba(255,255,255,.6);font-size:15px;line-height:1;}
.crop-tip{margin:0;font-size:12.5px;color:rgba(255,255,255,.5);text-align:center;}

/* 往上翻历史时顶部那条提示（正在加载 / 没有更早的了） */
.his-tip{margin:8px auto;text-align:center;font-size:12px;color:var(--text-3);}

/* ==========================================================================
   会话列表：向左滑动 → 露出「置顶 / 删除」
   （原来的「长按删除」已去掉，对齐 QQ 的交互）
   --------------------------------------------------------------------------
   结构：<div class="swipe-row"> 里放「按钮层 .swipe-acts」+「内容层 .row」，
   内容层滑动时整体左移，露出下面那层按钮。竖向滚动用 touch-action:pan-y 放行。
   ========================================================================== */
.swipe-row{position:relative;overflow:hidden;background:var(--card);}
.swipe-acts{position:absolute;top:0;right:0;bottom:0;width:222px;display:flex;z-index:0;}
.swipe-act{
	flex:1;display:flex;align-items:center;justify-content:center;
	font-size:14px;color:#fff;background:#C6CBD4;font-weight:500;
}
.swipe-act.pin{background:#8E97A6;}
.swipe-act.del{background:var(--red);}
.swipe-act.read{background:var(--brand-blue);}
.swipe-act:active{filter:brightness(.94);}
/* 内容层：必须**自带不透明背景** —— 它下面就是「置顶/删除」按钮，
   只要背景露一点缝，按钮就会透出来。
   ⚠️ 同样注意：:active 等状态也必须是**不透明**色（换背景＝把这一层换掉，
      半透明会直接让按钮透出来，深色主题就踩过这个坑）。 */
.swipe-row > .row{
	position:relative;z-index:1;will-change:transform;
	background:var(--card);
	touch-action:pan-y;                 /* 横向拖动交给我们，竖向滚动交给浏览器 */
}
.swipe-row > .row.swiped{box-shadow:-6px 0 16px rgba(16,24,40,.08);}
/* ⚠️ .row 现在不是 .list 的直接子元素了，`.row:last-child::after` 会把所有分隔线都去掉，
   所以这里显式恢复，只对「最后一行」隐藏（选择器更具体，优先级高于上面那条） */
.swipe-row > .row::after{display:block;}
.swipe-row:last-child > .row::after{display:none;}

/* ==========================================================================
   开关（聊天设置 / 群管理里的「消息免打扰」）
   ========================================================================== */
.switch{
	width:46px;height:27px;border-radius:14px;background:#E3E6EB;position:relative;
	display:inline-block;margin-left:auto;flex:0 0 auto;transition:background .18s;
}
.switch i{
	position:absolute;top:2px;left:2px;width:23px;height:23px;border-radius:50%;
	background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s;
}
.switch.on{background:var(--brand-blue);}
.switch.on i{transform:translateX(19px);}

/* 免打扰：未读角标显示灰色（不再用红色强调），会话行上带一个小标记 */
.badge.mute,.tab-badge.mute{background:#B6BCC7;}
.tag.mute-tag{background:#EDF0F4;color:var(--text-3);}

/* 从「查找聊天记录」定位过来的那条消息，闪一下高亮 */
.msg-flash .msg-bubble{animation:msgFlash 1.8s ease-out;}
@keyframes msgFlash{
	0%,55%{box-shadow:0 0 0 2px rgba(0,153,255,.55);}
	100%{box-shadow:0 1px 2px rgba(0,0,0,.05);}
}

/* ==========================================================================
   查找聊天记录（群管理 / 聊天设置里的入口）
   ========================================================================== */
#searchPage{z-index:220;}                    /* 压在来源页（群管理 / 聊天设置）上面 */
#searchPage .mall-top{background:var(--card);}
/* 清空按钮在商城页是「有输入才显示」，这里一直显示（输入框里常年有内容） */
#searchPage .mall-search-x{display:flex;}
.srch-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--card);}
.srch-count{padding:12px 16px 6px;font-size:12.5px;color:var(--text-3);}
.srch-row{display:flex;gap:12px;padding:12px 16px;align-items:flex-start;position:relative;}
.srch-row:active{background:#F6F7F9;}
.srch-row + .srch-row::before{
	content:"";position:absolute;left:62px;right:0;top:0;height:1px;
	background:var(--line);transform:scaleY(.6);
}
.srch-main{flex:1;min-width:0;}
.srch-top{display:flex;align-items:baseline;gap:8px;}
.srch-name{font-size:14.5px;font-weight:500;color:var(--text);}
.srch-time{font-size:11px;color:var(--text-3);margin-left:auto;flex:0 0 auto;}
.srch-text{
	margin-top:4px;font-size:14px;line-height:1.45;color:var(--text-2);word-break:break-all;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.srch-hit{font-style:normal;color:var(--brand-blue);font-weight:600;}

/* 注册页头像占位（还没选图时显示「＋」，图片头像必填） */
.avatar.empty{background:#F2F4F7;color:#C2C8D2;box-shadow:none;}
.lg-av-plus{font-size:26px;line-height:1;color:#C2C8D2;}

/* ==========================================================================
   群功能（2026-10-15）：管理员 / 邀请好友 / 全员禁言 / 入群欢迎
   ========================================================================== */
/* 角色徽章：群主沿用 .gm-badge，管理员用淡蓝，已禁言用淡红（.gm-badge.mute） */
.gm-badge.admin{background:#E9F3FF;color:#1A6FD4;}
/* 「设为管理」按钮：蓝色系，和「禁言」的灰、「踢出」的红区分开 */
.gm-btn.blue{background:#E9F3FF;color:#1A6FD4;}
/* 群主的成员行有 3 个按钮（禁言/设为管理/踢出）→ 允许换行，别把昵称挤没 */
.gm-ops{flex-wrap:wrap;justify-content:flex-end;}

/* 邀请好友弹窗：已在群里的好友置灰不可选，右侧标「已在群里」 */
.dlg-friend.off{opacity:.5;}
.dlg-friend .friend-off{font-style:normal;font-size:11px;color:var(--text-3);margin-left:auto;}

/* 「＋」面板里按条件显示的两项（群聊才有：邀请好友 / @全体成员） */
.func-item.hide{display:none;}

/* 全员禁言：输入栏禁用态（提示文案由 JS 写进 placeholder） */
.chat-input.muted textarea{background:#F1F2F5;color:var(--text-2);}
.chat-input.muted textarea::placeholder{color:var(--text-3);}

/* ==========================================================================
   官方群标记（2026-10-15）：蓝底白勾的认证徽章 + 品牌蓝「官方」标签
   --------------------------------------------------------------------------
   数据来源：official 表（kind='group' 且 enabled=1 时 target = 群号）。
   chats.php / messages.php / group_info.php 都会带上 official 标记，前端才渲染。
   ========================================================================== */
.vfy{
	display:inline-flex;align-items:center;justify-content:center;
	width:15px;height:15px;flex:0 0 auto;color:var(--brand-blue);
	vertical-align:-2px;
}
.vfy svg{width:100%;height:100%;display:block;}
/* 昵称/标题里的徽章跟文字同高，列表里稍微小一点更清爽 */
.row-name .vfy{width:14px;height:14px;margin-left:2px;}
.chat-title .vfy{width:16px;height:16px;margin-left:2px;}
.set-value .vfy,.gm-name .vfy{width:14px;height:14px;margin-left:4px;}
/* 其它列表里的（官方入口 / 搜索结果 / 新朋友 / 消息昵称 / 资料卡片） */
.of-name .vfy,.gj-name .vfy,.fr-name .vfy{width:14px;height:14px;margin-left:3px;}
.msg-name .vfy{width:13px;height:13px;margin-left:3px;}
.pc-name .vfy{width:15px;height:15px;margin-left:3px;}

/* 官方标签：品牌蓝底白字（普通群是灰色标签，好友是主色标签） */
.tag.official{background:var(--brand-blue);color:#fff;}

/* ==========================================================================
   消息列表（#chatList）：每行之间留出空白分隔（卡片式）
   --------------------------------------------------------------------------
   原来是「白底整片 + 一条灰色细分隔线」，行与行贴在一起；现在改成：
   整片用页面灰底，每一行是一张白色圆角卡片、行间留 10px 空白，去掉分隔线。
   ⚠️ 只作用于消息页的会话列表（#contactList 联系人列表保持原来的分组贴行样式）。
   ========================================================================== */
#chatList{background:var(--bg);padding:10px 0 6px;}
#chatList .swipe-row{
	background:var(--card);
	margin:0 12px 10px;                  /* 左右留白 + 行与行之间的空白分隔 */
	border-radius:14px;                  /* 卡片圆角（overflow:hidden 会把左滑按钮一起裁圆） */
	box-shadow:0 1px 2px rgba(16,24,40,.05);
}
#chatList .swipe-acts{overflow:hidden;border-radius:14px;}   /* 左滑按钮层也裁圆：红色「删除」按钮别在圆角处漏一条红边 */
#chatList .swipe-row:last-child{margin-bottom:6px;}
#chatList .row{background:var(--card);border-radius:14px;}
#chatList .row:active{background:#F7F9FC;}
#chatList .row.pinned{background:#F8FAFF;}
/* 去掉行内那条分隔线 —— 空白本身就是分隔（选择器比 .swipe-row > .row::after 更具体，压得住） */
#chatList .swipe-row > .row::after{display:none;}
/* 空列表提示在灰底上要看得清 */
#chatList + .empty,#chatEmpty{color:var(--text-2);}

/* ==========================================================================
   联系人列表（#contactList）：和消息列表一致的卡片式 —— 整片灰底 + 每行白色圆角卡片
   --------------------------------------------------------------------------
   区别：联系人行的 DOM 就是 .row（没有 .swipe-row 包裹），所以圆角/留白直接写在 .row 上；
   字母分组标题（.group-head）跟着卡片的左边距对齐。
   ========================================================================== */
#contactList{background:var(--bg);padding:10px 0 6px;}
#contactList .row{
	background:var(--card);
	margin:0 12px 10px;                  /* 左右留白 + 行与行之间的空白分隔 */
	border-radius:14px;
	box-shadow:0 1px 2px rgba(16,24,40,.05);
}
#contactList .row:active{background:#F7F9FC;}
/* 去掉行内分隔线（空白本身就是分隔） */
#contactList .row::after{display:none;}
/* 字母分组标题 / 「搜索结果」小标题：左边距跟卡片对齐；只要字母，不要灰色底条 */
#contactList .group-head{
	padding:10px 16px 6px 18px;
	background:transparent;
	color:var(--text-2);
}
/* 「还没有好友」/「没有找到相关联系人」这类空态在灰底上也要清楚 */
#contactList .cm-empty{color:var(--text-2);}

/* ==========================================================================
   动态互动（2026-10-15）：点赞/评论统计、互动角标、评论回复
   ========================================================================== */

/* ---------- 1. 每条动态底部的点赞 / 评论统计 ---------- */
/* 胶囊外观沿用 .moment-foot .act span（已有 padding / 圆角 / 按下反馈），
   这里只补图标与数字的排布 */
.moment-foot .act .stat{font-variant-numeric:tabular-nums;}
.moment-foot .act .stat .stat-ico{font-style:normal;font-size:12.5px;line-height:1;}
.moment-foot .act .stat.liked{color:var(--brand-blue);font-weight:600;}
.moment-time{flex:0 0 auto;}

/* ---------- 2. 个人动态页 / 动态页顶部的统计条（动态 / 获赞 / 评论） ---------- */
.up-stats{
	display:flex;align-items:center;flex:0 0 auto;
	margin:10px 12px 10px;position:relative;z-index:3;
	background:var(--card);border-radius:14px;padding:10px 0;
	box-shadow:0 2px 10px rgba(16,24,40,.06);
}
.up-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;}
.up-stat b{font-size:16px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
.up-stat span{font-size:11.5px;color:var(--text-2);}
/* 三栏之间的细分隔线 */
.up-stat + .up-stat{border-left:1px solid var(--line);}

/* ---------- 3. 评论里的「回复」 ---------- */
.cm-count{font-size:12px;color:var(--text-3);font-weight:400;}
.cm-name .cm-to{color:var(--brand-blue);}
/* 每条评论右侧的「回复」按钮 */
.cm-reply-btn{
	flex:0 0 auto;align-self:flex-start;
	font-size:12px;line-height:1;padding:5px 9px;border-radius:8px;
	color:var(--brand-blue);background:#EAF2FF;
}
.cm-reply-btn:active{background:#DBE9FF;}
/* 输入框上方的「回复 XXX」条 */
.cm-reply{
	display:flex;align-items:center;gap:6px;
	padding:8px 14px;background:#F5F7FB;border-top:1px solid var(--line);
	font-size:12.5px;color:var(--text-2);
}
.cm-reply b{color:var(--brand-blue);font-weight:600;}
.cm-reply .icon-btn{margin-left:auto;width:26px;height:26px;color:var(--text-3);}

/* ---------- 4. 动态标签的互动角标 ---------- */
/* 复用 .tab-badge，只把它明确成红点样式（元素默认 display:none，由 JS 写具体值） */
#momentBadge{background:var(--red);}

/* ==========================================================================
   动态互动加强（2026-10-15）：新互动提示条 / 互动消息页 / 评论 @ 与删除
   ========================================================================== */

/* ---------- 动态页封面下方的「你有 N 条新互动」提示条 ---------- */
.notice-bar{
	flex:0 0 auto;display:flex;align-items:center;gap:8px;
	margin:10px 12px 0;padding:11px 14px;border-radius:12px;
	background:linear-gradient(135deg,#EAF2FF 0%,#F3F8FF 100%);
	color:#1A6FD4;font-size:13.5px;
}
.notice-bar:active{filter:brightness(.97);}
.notice-bar .nb-ico{font-size:15px;line-height:1;}
.notice-bar .nb-txt{flex:1;min-width:0;font-weight:500;}
.notice-bar .nb-arrow{font-style:normal;font-size:16px;color:#8FB6EA;}

/* ---------- 互动消息页（谁赞了 / 评论了 / 回复了 / @了我） ---------- */
#noticePage .list{background:var(--bg);padding:8px 0 6px;}
.nc-row{
	display:flex;align-items:center;gap:12px;
	margin:0 12px 10px;padding:12px 14px;
	background:var(--card);border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.05);
	position:relative;
}
.nc-row:active{background:#F7F9FC;}
.nc-main{flex:1;min-width:0;}
.nc-top{display:flex;align-items:baseline;gap:8px;}
.nc-name{font-size:14.5px;font-weight:600;color:var(--text);}
.nc-time{font-size:11px;color:var(--text-3);margin-left:auto;flex:0 0 auto;}
.nc-text{margin-top:4px;font-size:13.5px;color:var(--text-2);line-height:1.45;word-break:break-word;}
.nc-text b{color:var(--text);font-weight:600;}
.nc-quote{
	margin-top:6px;padding:7px 10px;border-radius:8px;background:#F4F6FA;
	font-size:12.5px;color:var(--text-2);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nc-arrow{font-style:normal;font-size:16px;color:var(--text-3);flex:0 0 auto;}

/* ---------- 评论：@ 选人条 / 删除按钮 / @高亮 ---------- */
/* 评论行右侧的操作（回复 / 删除） */
.cm-ops{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;align-self:flex-start;}
.cm-del-btn{
	font-size:12px;line-height:1;padding:5px 9px;border-radius:8px;
	color:var(--red);background:#FFF0F0;
}
.cm-del-btn:active{background:#FFE2E2;}
/* 评论正文里的 @昵称 */
.cm-at-hit{color:var(--brand-blue);font-weight:500;}
/* 点「@」展开的选人条 */
.cm-at{
	display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
	padding:9px 14px;background:#F5F7FB;border-top:1px solid var(--line);
}
.cm-at::-webkit-scrollbar{height:0;}
.cm-at-chip{
	flex:0 0 auto;font-size:12.5px;line-height:1;padding:6px 10px;border-radius:14px;
	background:#fff;color:var(--brand-blue);border:1px solid #DCE8F8;
}
.cm-at-chip:active{background:#EAF2FF;}
/* 输入框左侧的「@」按钮 */
.cm-at-btn{
	flex:0 0 auto;width:34px;height:34px;border-radius:50%;
	background:#EAF2FF;color:var(--brand-blue);font-size:17px;font-weight:600;line-height:1;
}
.cm-at-btn:active{background:#DBE9FF;}

/* ---------- 从互动消息跳过来时，那条动态闪一下 ---------- */
.moment-flash{animation:momentFlash 1.8s ease-out;}
@keyframes momentFlash{
	0%,55%{box-shadow:0 0 0 2px rgba(26,132,255,.55);}
	100%{box-shadow:0 2px 10px rgba(20,40,80,.05);}
}

/* ==========================================================================
   扫码支付（我的收款码 / 扫一扫付款）
   · 收款码：钱包页弹窗（.sheet.popup），二维码内容 = "BUBBLEPAY:<token>"
   · 付款页：#payPage，从钱包页 pushLayer 压上来 → z-index 要高于 #walletPage(230)
   ========================================================================== */

/* 钱包页按钮从 2 个变 4 个（分两行），第二行别跟着第一行的大间距 */
.wallet-ops + .wallet-ops{margin-top:8px;}

/* ---------- 我的收款码弹窗 ---------- */
.pq-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px 16px 18px;}
.pq-user{display:flex;align-items:center;gap:10px;width:100%;}
.pq-info{min-width:0;}
.pq-name{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pq-no{font-size:12px;color:var(--text-2);margin-top:2px;}
.pq-qr{
	width:210px;height:210px;box-sizing:border-box;padding:10px;border-radius:14px;
	background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.10);
	display:flex;align-items:center;justify-content:center;
}
.pq-qr img{display:block;width:100%;height:100%;object-fit:contain;}
.pq-loading{font-size:12.5px;line-height:1.6;color:var(--text-3);text-align:center;}
.pq-tip{font-size:12px;line-height:1.65;color:var(--text-2);text-align:center;}
.pq-save{
	width:100%;height:42px;border-radius:21px;font-size:14.5px;font-weight:500;
	background:var(--brand-blue);color:#fff;
}
.pq-save:active{filter:brightness(1.06);}

/* ---------- 扫码付款页 ---------- */
#payPage{z-index:240;}
.pay-to{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 0 8px;}
.pay-to .avatar{width:64px;height:64px;font-size:28px;}
.pay-name{font-size:16px;font-weight:600;color:var(--text);}
.pay-no{font-size:12px;color:var(--text-2);}
.pay-amount{
	display:flex;align-items:center;justify-content:center;gap:8px;
	margin:16px 4px 6px;border-bottom:2px solid var(--line);
}
.pay-unit{font-size:14px;color:var(--text-2);flex:0 0 auto;}
#payCoins{
	flex:1 1 auto;min-width:0;border:0;outline:none;background:transparent;
	text-align:center;font-size:34px;font-weight:700;color:var(--text);
}
.pay-quick{display:flex;gap:10px;margin:14px 4px 4px;}
.pay-quick button{
	flex:1;height:38px;border-radius:10px;font-size:14px;font-weight:500;
	background:var(--card);color:var(--brand-blue);
}
.pay-quick button:active{background:#EFF4FF;}
.pay-balance{text-align:center;font-size:13px;color:var(--text-2);margin-top:18px;}
.pay-balance b{font-size:15px;color:var(--brand-blue);}
.pay-note{text-align:center;font-size:11.5px;line-height:1.6;color:var(--text-3);margin-top:6px;}
.pay-submit{
	width:100%;height:48px;margin-top:20px;border-radius:24px;
	font-size:16px;font-weight:600;color:#fff;
	background:var(--qq-grad);
	box-shadow:0 10px 24px rgba(48,120,255,.26);
}
.pay-submit:active{filter:brightness(1.05);}
.pay-submit:disabled{opacity:.55;box-shadow:none;}

/* ---------- 动态付款码（倒计时刷新） ---------- */
.pc-bar{
	display:flex;align-items:center;gap:6px;
	font-size:12px;color:var(--text-2);
}
.pc-bar b{font-size:13px;color:var(--red);min-width:18px;text-align:center;}
.pc-dot{
	width:7px;height:7px;border-radius:50%;background:#2FA36B;flex:0 0 auto;
	animation:pcPulse 1s ease-in-out infinite;
}
@keyframes pcPulse{0%,100%{opacity:1;}50%{opacity:.25;}}

/* ==========================================================================
   内置扫码（竖屏）
   —— 原生 scan.scan() 的界面被锁成横屏且改不了，所以这里用
      getUserMedia + jsQR 在页面里自己扫，方向完全由网页控制（竖屏）。
   z-index 400：要高过所有二级页（210）/ 钱包页（230）/ 付款页（240）。
   ========================================================================== */
#scanPage{z-index:400;background:#000;}
.scan-top{
	position:absolute;left:0;right:0;top:0;z-index:2;
	display:flex;align-items:center;gap:8px;
	padding:calc(10px + var(--safe-top-max)) 12px 10px;
}
.scan-title{flex:1;text-align:center;color:#fff;font-size:16px;font-weight:600;}
.scan-back{color:#fff;background:rgba(255,255,255,.14);}
.scan-back.on{background:var(--brand-blue);}
.scan-stage{position:absolute;inset:0;overflow:hidden;background:#000;}
#scanVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.scan-overlay{
	position:absolute;inset:0;display:flex;flex-direction:column;
	align-items:center;justify-content:center;gap:20px;
}
.scan-frame{
	position:relative;width:66vw;height:66vw;max-width:280px;max-height:280px;
	box-shadow:0 0 0 4000px rgba(0,0,0,.42);
}
.scan-frame i{position:absolute;width:26px;height:26px;border:3px solid var(--brand-blue);border-radius:4px;}
.scan-frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;}
.scan-frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;}
.scan-frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;}
.scan-frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;}
.scan-tip{
	max-width:320px;padding:0 22px;box-sizing:border-box;
	text-align:center;color:#fff;font-size:13px;line-height:1.65;
	text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.scan-foot{
	position:absolute;left:0;right:0;bottom:calc(26px + var(--safe-bottom));z-index:2;
	display:flex;justify-content:center;
}
.scan-alt{
	height:40px;padding:0 22px;border-radius:20px;font-size:14px;color:#fff;
	background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
}
.scan-alt:active{background:rgba(255,255,255,.26);}

/* ==========================================================================
   交易账单页（钱包页「全部账单」进来）
   ========================================================================== */
/* 钱包页「最近明细」标题行：右边加一个「全部账单 ›」入口 */
.wal-more-title{display:flex;align-items:center;}
.wal-more-title > span:first-child{flex:1;}
.wal-all{font-size:12.5px;font-weight:400;color:var(--brand-blue);}

/* 账单页：要压在钱包页（230）之上 */
#billPage{z-index:235;}
.bill-balance{
	margin-bottom:4px;padding:16px 18px;border-radius:14px;color:#fff;
	background:var(--qq-grad);
	box-shadow:0 10px 24px rgba(48,120,255,.26);
}
.bill-bal-label{font-size:12px;opacity:.86;}
.bill-bal-num{font-size:30px;font-weight:700;line-height:1.25;margin-top:2px;}
.bill-bal-sum{display:flex;gap:20px;margin-top:8px;font-size:12px;opacity:.92;}
.bill-bal-sum b{font-weight:600;margin-left:2px;}
.bill-bal-sum .in b{color:#C8FFE4;}
.bill-bal-sum .out b{color:#FFD7D7;}

.bill-tabs{display:flex;gap:8px;margin:14px 0 2px;}
.bill-tab{
	padding:6px 15px;border-radius:15px;font-size:13px;font-weight:500;
	background:var(--card);color:var(--text-2);
}
.bill-tab:active{background:#EFF4FF;}
.bill-tab.active{background:var(--brand-blue);color:#fff;}

.bill-list{background:var(--card);border-radius:12px;margin-top:10px;overflow:hidden;}
.bill-list .cm-empty{background:transparent;padding:22px 0;}
.bill-day{
	padding:8px 14px;font-size:12px;color:var(--text-2);
	background:var(--bg);                 /* 跟随主题（原来写死 #F7F8FA，自定义/深色主题下会突兀） */
}
.bill-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);}
.bill-row:last-child{border-bottom:0;}
.bill-row:active{background:#F7F9FC;}
.bill-row .wal-main{flex:1;min-width:0;}

/* 账单详情弹窗 */
.bd-amount{font-size:26px;font-weight:700;text-align:center;margin-bottom:12px;}
.bd-amount.in{color:#2FA36B;}
.bd-amount.out{color:var(--red);}
.bd-row{display:flex;gap:10px;padding:8px 0;font-size:13.5px;border-bottom:1px solid var(--line);}
.bd-row:last-child{border-bottom:0;}
.bd-row span{flex:0 0 56px;color:var(--text-2);}
.bd-row b{flex:1;min-width:0;font-weight:500;text-align:right;color:var(--text);word-break:break-all;}

/* ---------- 账单页：筛选条 / 月份 / 导出 ---------- */
.bill-bar{display:flex;align-items:center;gap:8px;margin:14px 0 0;}
.bill-bar .bill-tabs{display:flex;gap:8px;margin:0;flex:1;min-width:0;}
.bill-month{
	flex:0 0 auto;height:30px;padding:0 12px;border-radius:15px;font-size:12.5px;font-weight:500;
	background:var(--card);color:var(--brand-blue);border:1px solid #DCE9FB;
}
.bill-month:active{background:#EFF4FF;}
.bill-month-x{
	flex:0 0 auto;width:30px;height:30px;border-radius:50%;font-size:12px;
	background:var(--card);color:var(--text-2);border:1px solid var(--line);
}
.bill-month-x:active{background:#F2F4F8;}
/* 真身是个 <input type="month">：藏起来，靠 showPicker() 弹系统选择器 */
.bill-month-input{
	position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;
}
.bill-tools{display:flex;align-items:center;gap:8px;margin:10px 2px 0;}
.bill-count{flex:1;min-width:0;font-size:12px;color:var(--text-2);}
.bill-export{
	flex:0 0 auto;height:30px;padding:0 14px;border-radius:15px;font-size:12.5px;font-weight:500;
	background:var(--brand-blue);color:#fff;
}
.bill-export:active{filter:brightness(1.06);}
.bill-export:disabled{opacity:.6;}

/* ---------- 付款页：备注 ---------- */
.pay-note-row{
	display:flex;align-items:center;gap:8px;
	margin:14px 4px 0;padding:0 14px;height:44px;border-radius:12px;background:#F4F6FA;
}
.pay-note-ico{font-size:13px;flex:0 0 auto;}
.pay-note-row input{
	flex:1;min-width:0;border:0;outline:none;background:transparent;
	font-size:14px;color:var(--text);
}

/* ==========================================================================
   语音消息（按住说话 + 语音条）
   ========================================================================== */
/* 按住说话：平时隐藏，语音模式下顶替文本框的位置 */
.voice-hold{
	display:none;flex:1;min-width:0;height:38px;line-height:38px;text-align:center;
	border-radius:8px;background:#F3F4F6;color:var(--text);font-size:14.5px;
	user-select:none;-webkit-user-select:none;touch-action:none;
}
.voice-hold:active{background:#E6E8EC;}
#chatBar.voice-mode .voice-hold{display:block;}
#chatBar.voice-mode #chatInput,
#chatBar.voice-mode #sendBtn{display:none;}
.icon-btn.on{color:var(--brand-blue);}

/* 录音浮层 */
.voice-rec{
	position:fixed;left:50%;top:50%;z-index:480;width:184px;padding:20px 16px 16px;
	border-radius:18px;text-align:center;color:#fff;background:rgba(24,28,34,.92);
	transform:translate(-50%,-50%) scale(.9);opacity:0;visibility:hidden;transition:.18s;
}
.voice-rec.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);}
.voice-rec.cancel{background:rgba(200,50,50,.94);}
.vr-mic{
	width:52px;height:52px;margin:0 auto;border-radius:50%;background:rgba(255,255,255,.16);
	display:flex;align-items:center;justify-content:center;
}
.vr-mic .ico{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;}
.vr-bars{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:26px;margin:10px 0 6px;}
.vr-bars i{width:3px;height:8px;border-radius:2px;background:rgba(255,255,255,.75);animation:vrBar .9s ease-in-out infinite;}
.vr-bars i:nth-child(2){animation-delay:.12s;}
.vr-bars i:nth-child(3){animation-delay:.24s;}
.vr-bars i:nth-child(4){animation-delay:.36s;}
.vr-bars i:nth-child(5){animation-delay:.48s;}
.vr-bars i:nth-child(6){animation-delay:.6s;}
.vr-bars i:nth-child(7){animation-delay:.72s;}
@keyframes vrBar{0%,100%{height:7px;}50%{height:22px;}}
.voice-rec.cancel .vr-bars{display:none;}
.vr-time{font-size:20px;font-weight:700;letter-spacing:1px;}
.vr-hint{margin-top:4px;font-size:12px;opacity:.86;}

/* 语音条 */
.msg-bubble.voice{display:flex;align-items:center;gap:9px;padding:10px 14px;}
.msg-bubble.voice .vc-ico{display:inline-flex;align-items:flex-end;gap:2px;flex:0 0 auto;height:16px;}
.msg-bubble.voice .vc-ico i{display:block;width:3px;border-radius:2px;background:currentColor;opacity:.85;}
.msg-bubble.voice .vc-ico i:nth-child(1){height:8px;}
.msg-bubble.voice .vc-ico i:nth-child(2){height:15px;}
.msg-bubble.voice .vc-ico i:nth-child(3){height:10px;}
.msg-bubble.voice .vc-dur{font-size:13.5px;flex:0 0 auto;margin-left:auto;}
.msg-bubble.voice.playing .vc-ico i{animation:vcBar .8s ease-in-out infinite;}
.msg-bubble.voice.playing .vc-ico i:nth-child(2){animation-delay:.15s;}
.msg-bubble.voice.playing .vc-ico i:nth-child(3){animation-delay:.3s;}
@keyframes vcBar{0%,100%{height:6px;}50%{height:16px;}}

/* ==========================================================================
   语音通话（WebRTC）—— 来电 / 呼叫中 / 通话中 三态共用 #callPage
   z-index 450：压在聊天页、所有二级页之上（但低于 Toast 500）
   ========================================================================== */
#callPage{
	z-index:450;
	background:linear-gradient(160deg,#2B3A55 0%,#1E2733 55%,#141A22 100%);
	align-items:center;
}
.call-main{
	flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:14px;padding:0 24px;
}
.call-main .avatar{width:104px;height:104px;font-size:44px;box-shadow:0 12px 32px rgba(0,0,0,.35);}
.call-name{color:#fff;font-size:22px;font-weight:600;letter-spacing:.5px;}
.call-state{color:rgba(255,255,255,.72);font-size:14px;letter-spacing:.5px;min-height:20px;}

.call-ops{
	flex:0 0 auto;display:flex;align-items:flex-start;justify-content:center;gap:44px;
	padding:0 24px calc(52px + var(--safe-bottom));
}
.call-op{
	display:flex;flex-direction:column;align-items:center;gap:8px;
	background:none;border:0;color:rgba(255,255,255,.85);font-size:12.5px;
}
.call-op .co-ico{
	width:62px;height:62px;border-radius:50%;font-size:26px;line-height:62px;text-align:center;
	background:rgba(255,255,255,.14);
}
.call-op:active .co-ico{filter:brightness(1.25);}
.call-op.danger .co-ico{background:#E5484D;}
.call-op.ok .co-ico{background:#22A06B;}
.call-op.on .co-ico{background:rgba(255,255,255,.34);}

/* ==========================================================================
   群头像（和个人头像同一套机制：都是用户上传的图片）
   · 建群时必须上传（弹窗里的 .ga-pick）
   · 群管理页「群头像」行，只有群主能点（.gm-av）
   · 聊天页顶栏群名前面的小头像（.ct-av）
   颜色全走 CSS 变量，深色主题自动适配，不需要单独写覆盖。
   ========================================================================== */
/* 建群弹窗：选/换群头像 */
/* 建群弹窗：选/换群头像
   ⚠️ 居中这里**完全不用 flex**（flex 在不同 WebView / 不同渲染阶段算出来的位置会飘，
      表现为"头像卡在左侧或中间，传完图才归位"）。
      改用最经典、最可靠的两招：
        · 头像块 display:block + margin:0 auto   → 水平居中
        · "＋"号用 line-height + text-align      → 在 72×72 里居中
      这样跟 flex 一点关系都没有，任何渲染阶段位置都一样。 */
.ga-pick{text-align:center;padding:2px 0 10px;}
.ga-preview{
	display:block;margin:0 auto;
	width:72px;height:72px;border-radius:16px;overflow:hidden;cursor:pointer;
	background:var(--bg);color:var(--text-3);font-size:26px;
	line-height:72px;text-align:center;     /* "＋"号居中（不用 flex） */
}
.ga-tip{display:block;margin-top:6px;font-size:12px;color:var(--text-2);text-align:center;}
.ga-preview.empty{border:1px dashed var(--text-3);}
.ga-preview:active{filter:brightness(.95);}
.ga-preview img{display:block;width:100%;height:100%;object-fit:cover;}
.ga-tip{font-size:12px;color:var(--text-2);}

/* 群管理页：「群头像」行右侧的缩略图 */
.gm-av{display:flex;align-items:center;justify-content:flex-end;}
.gm-av-img{display:block;width:34px;height:34px;border-radius:8px;object-fit:cover;}

/* 聊天页顶栏：群名前面的小头像（.chat-title span 本来就是 flex，直接并排即可） */
.chat-title .ct-av{flex:0 0 auto;width:22px;height:22px;border-radius:5px;object-fit:cover;}

/* ==========================================================================
   私聊的「在线 / 离线」标识（类似 QQ）
   · 消息列表：单聊头像右下角的绿点（复用 .avatar .dot，avatarHTML 的 online 参数）
   · 聊天页顶部：名字后面的小圆点 + 副标题的「在线 / 离线」文字
   「在线」= 实时通道（Socket.IO）连着，所以是真实时状态；掉线会自动变灰。
   ========================================================================== */
.chat-title .presence{
	flex:0 0 auto;width:8px;height:8px;border-radius:50%;
	background:var(--text-3);                       /* 离线：灰点（两种主题自适应） */
}
.chat-title .presence.on{background:#33D64B;}      /* 在线：绿点 */
.chat-title small.on{color:#2FA36B;}               /* 副标题「在线」用绿色 */

/* ==========================================================================
   通话记录（和普通消息一样是气泡：有头像、有时间；点一下回拨）
   底色用**中性灰**，不跟「自己 / 对方」的气泡配色走 —— 它是一条"记录"，
   不是谁发给谁的消息，所以左右两边长得一样（微信的观感）。
   ========================================================================== */
.msg-bubble.call,
.msg.me .msg-bubble.call{
	display:flex;align-items:center;gap:7px;
	background:#EFF1F4;color:var(--text-2);font-size:13.5px;
}
.msg-bubble.call .mc-ico{font-size:15px;}
.msg-bubble.call:active{opacity:.7;}
/* ⚠️ 气泡那个小尖角的颜色是单独写死的（默认白 / 蓝），
   换底色时不一起改，角上就会露出一个白三角 */
.msg-bubble.call::after,
.msg.me .msg-bubble.call::after{border-right-color:#EFF1F4;border-left-color:#EFF1F4;}

/* 深色主题：同样要写全（.msg.me 那条优先级较高，只写通用选择器盖不住） */
html[data-theme="dark"] .msg-bubble.call,
html[data-theme="dark"] .msg.me .msg-bubble.call{background:#252C34;color:var(--text-2);}
html[data-theme="dark"] .msg-bubble.call::after,
html[data-theme="dark"] .msg.me .msg-bubble.call::after{border-right-color:#252C34;border-left-color:#252C34;}

/* ==========================================================================
   收款码卡片（JS 用 canvas 合成的**整张图**：推荐使用泡泡支付 + 二维码 + 我的名字）
   弹窗里显示的是它，保存到相册的也是它 —— 所见即所得，和微信收款码一样。
   ========================================================================== */
.pq-card{
	display:flex;align-items:center;justify-content:center;
	width:100%;max-width:260px;min-height:110px;
	border-radius:14px;overflow:hidden;
	background:#fff;                                   /* 二维码必须白底 */
	box-shadow:0 4px 18px rgba(0,0,0,.10);
}
.pq-card img{display:block;width:100%;height:auto;}

/* ==========================================================================
   动态列表底部的加载提示（滚到底部自动翻页）
   ========================================================================== */
.list-foot{
	text-align:center;font-size:12.5px;color:var(--text-3);
	padding:20px 0 calc(22px + var(--safe-bottom));
}

/* ==========================================================================
   创建群聊（独立二级页 #newGroupPage，2026-10-16）
   —— 以前是 openDialog 弹窗：.dlg 自身是「标题 + flex:1 滚动区 + 底部按钮」的三段式，
      塞进「固定的群头像 + 群名输入 + 一长串好友勾选」时滚动区高度算不稳定，
      安卓下会看到弹窗错位、叠在好友列表上面。
      现在改成和「发表动态」同款的 .pub-page 二级页，走普通文档流，定位稳定。
   ⚠️ 下面的选择器都带 #newGroupPage：靠 ID 优先级压过 qq-theme.css / theme.css
      （那两层皮肤是后加载的，纯类选择器会被盖掉）
   ========================================================================== */
/* 群头像：不用大「＋」预览块（居中块在老内核里位置会飘），
   改成设置行 —— 左标题 + 右缩略图，点整行就选图（和群管理页的「群头像」行一致） */
#newGroupPage .set-group{margin-bottom:12px;}
#newGroupPage .ng-req{
	font-style:normal;font-size:11px;color:var(--brand-blue);
	margin-left:6px;vertical-align:1px;
}
/* 群名称输入框：弹窗里的灰底在灰页面上没有层次，改白卡片 */
#newGroupPage .dlg-input{
	height:50px;background:var(--card);border-radius:12px;
}
#newGroupPage .dlg-label{margin:16px 4px 8px;}
/* 好友列表：跟着整页滚，列表自己**不再**滚动
   （弹窗里那个 max-height + overflow-y 就是错位的元凶） */
#newGroupPage .dlg-friends{
	max-height:none;overflow:visible;
	background:none;border-radius:0;padding:0;
}
#newGroupPage .dlg-friend{
	height:56px;padding:0 14px;background:var(--card);
	border-radius:12px;margin-bottom:8px;
}
#newGroupPage .dlg-friend:active{background:#F5F7FB;}
html[data-theme="dark"] #newGroupPage .dlg-friend:active{background:#2A313A;}
/* 名字过长省略，不要顶开勾选框 */
#newGroupPage .dlg-friend > span{
	flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ==========================================================================
   添加好友 / 添加群聊（独立二级页 #addFriendPage / #addGroupPage，2026-10-16）
   —— 从 openDialog 弹窗迁过来：弹窗是「标题 + flex:1 滚动区 + 底部按钮」的三段式，
      搜索结果列表一长，滚动区高度就算不稳，安卓下会错位（和建群弹窗同一个毛病）。
      搜索结果排成「白卡片 + 右侧动作按钮」，和建群页的好友列表一个观感。
   ⚠️ 选择器都带页面 ID：靠 ID 优先级压过 qq-theme.css / theme.css 两层皮肤
   ========================================================================== */
/* 搜索框：白卡片（弹窗里的灰底在灰页面上没层次） */
#addFriendPage .dlg-input,
#addGroupPage .dlg-input{
	height:50px;background:var(--card);border-radius:12px;
}
/* 结果条数 / 出错提示 */
#addFriendPage .gj-tip,
#addGroupPage .gj-tip{margin:12px 4px 8px;font-size:12px;color:var(--text-2);}
/* 结果行：整页滚动，一行一张白卡片（去掉弹窗里的通栏分隔线） */
#addFriendPage .gj-item,
#addGroupPage .gj-item{
	padding:10px 14px;background:var(--card);
	border-top:0;border-radius:12px;margin-bottom:8px;
}
#addFriendPage .gj-item:active,
#addGroupPage .gj-item:active{background:#F5F7FB;}
html[data-theme="dark"] #addFriendPage .gj-item:active,
html[data-theme="dark"] #addGroupPage .gj-item:active{background:#2A313A;}

/* ==========================================================================
   emoji 图标 → SVG（2026-10-16，A 组一次性替换）
   emoji 靠 font-size 撑大小、靠行高对齐；换成 <svg> 后要显式给尺寸并让容器 flex 居中。
   颜色一律走 currentColor（继承各自的文字色），所以深浅主题自动适配，不用再补深色规则。
   涉及：右上角「＋」菜单 / 动态互动提示条 / 动态统计条 / 付款备注 / 通话页 / 通话记录气泡
        / 应用详情占位图标 / 商品详情占位图标 / 会员页标题
   ========================================================================== */
/* 右上角「＋」下拉菜单 */
.plus-item .qi{display:flex;align-items:center;justify-content:center;}
.plus-item .qi .ico{width:18px;height:18px;stroke-width:1.8;}
/* 动态页「你有 N 条新互动」提示条 */
.notice-bar .nb-ico{display:flex;align-items:center;}
.notice-bar .nb-ico .ico{width:15px;height:15px;stroke-width:1.9;}
/* 动态底部统计条：👍 / ❤️ / 💬 */
.moment-foot .act .stat .stat-ico{display:inline-flex;align-items:center;}
.moment-foot .act .stat .stat-ico .ico{width:13px;height:13px;stroke-width:1.9;}
/* 付款备注的 ✏️ */
.pay-note-ico{display:flex;align-items:center;}
.pay-note-ico .ico{width:14px;height:14px;stroke-width:1.8;}
/* 通话页三个圆形按钮里的图标（🎙️📵📞）：原来靠 line-height 居中，现在靠 flex */
.call-op .co-ico{display:flex;align-items:center;justify-content:center;}
.call-op .co-ico .ico{width:26px;height:26px;stroke-width:1.7;color:#fff;}
/* 通话记录气泡里的 📞（和文字并排，要跟基线对齐） */
.msg-bubble.call .mc-ico{display:inline-flex;align-items:center;vertical-align:-2px;}
.msg-bubble.call .mc-ico .ico{width:15px;height:15px;stroke-width:1.9;}
/* 应用详情 / 商品详情的大占位图标（📦🎁）：容器背景是渐变，图标走白色 */
.app-ico .ico{width:34px;height:34px;stroke-width:1.6;}
.pdd-hero .ico{width:96px;height:96px;stroke-width:1.3;}
/* 会员页标题「👑 我的会员」：图标和文字同一行，微调垂直位置 */
.vip-name .ico{width:18px;height:18px;stroke-width:1.8;display:inline-block;vertical-align:-3px;}
/* 「从相册选一张」按钮里的相机图标（原 📷 emoji）：和按钮文字一行，微调垂直位置 */
.av-up-btn .ico{width:16px;height:16px;stroke-width:1.8;display:inline-block;vertical-align:-3px;}

/* ==========================================================================
   忘记密码 / 重置支付密码（2026-10-16）
   ========================================================================== */
/* 「忘记密码？」链接（登录卡片里，在密码输入框下方右侧） */
.login-forgot{display:flex;justify-content:flex-end;margin:-4px 2px 0;}
.login-forgot span{font-size:13px;color:#5A8FD8;padding:4px 2px;}
.login-forgot span:active{opacity:.7;}

/* 找回密码是独立页，但登录页 z-index 是 400（比二级页的 210 高），
   所以这里要单独抬到 400 以上，否则会被登录页盖住（450 起是通用弹窗，别越界） */
#forgotPage{z-index:420;}
#forgotPage .pub-body{padding-bottom:12px;}
/* 页面上连着放的输入框要自己留间距（弹窗里是 .rp-form/.dlg-body 的 gap 撑的） */
#forgotPage .dlg-input{margin-bottom:10px;}
/* 账号 / 绑定手机号 的值可能比较长，右侧省略号收尾 */
#forgotPage .set-group .set-value{max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 底部主按钮固定在页面最下方（和登录按钮同款） */
.fp-foot{flex:0 0 auto;padding:10px 18px calc(18px + var(--safe-bottom));background:var(--card);}
.fp-foot .login-btn{margin-top:0;}
.fp-copy{margin:14px 2px 0;text-align:center;font-size:13px;color:var(--brand-blue);}
.fp-copy:active{opacity:.7;}

/* 修改支付密码弹窗里的「忘了支付密码？」 */
.pp-forget{margin-top:12px;text-align:center;font-size:13px;color:var(--brand-blue);}
.pp-forget:active{opacity:.7;}

/* ==========================================================================
   图形验证码（注册时显示，2026-10-16 防刷号）
   ========================================================================== */
.lg-captcha{display:flex;align-items:center;gap:10px;margin-top:12px;}
.lg-captcha .login-input{margin-top:0;flex:1;min-width:0;}
.lg-cap-img{
	width:124px;height:44px;border-radius:8px;flex:0 0 auto;
	background:#F5F6F8;cursor:pointer;object-fit:cover;
}
.lg-cap-img:active{filter:brightness(.94);}

/* 找回密码页中间那个「验证答案/拿重置码」按钮：
   只调尺寸和间距 —— 配色（品牌蓝底 + **白字**）沿用主按钮 .login-btn，
   这样它和底部「重置密码」长得一模一样，不会出现两种蓝。 */
.fp-mid-btn{margin-top:12px;height:46px;font-size:15.5px;}

/* 忘记密码页的「联系客服」条：点一下跳手机 QQ 找客服（后台可配 QQ 号 / 自定义链接 / 在线时段） */
.fp-cs{
	display:flex;align-items:center;gap:10px;margin-bottom:14px;
	background:#EAF2FF;border-radius:12px;padding:12px 14px;
}
.fp-cs-ico{font-size:18px;line-height:1;flex:0 0 auto;}
.fp-cs-main{flex:1;min-width:0;}
.fp-cs-txt{font-size:13.5px;color:#1A6FD4;font-weight:600;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fp-cs-sub{margin-top:3px;font-size:11.5px;color:#6b86a8;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fp-cs-sub.on{color:#1F9254;}       /* 现在在线 */
.fp-cs-sub.off{color:#B8791A;}      /* 现在不在线 */
.fp-cs-go{flex:0 0 auto;font-size:12.5px;font-weight:600;color:#0FA9F0;}
.fp-cs:active{background:#DCE9FF;}

/* 找回密码页：答案提示（用户自己设的，帮他想起答案是什么；不是答案本身） */
.fp-hint{
	margin:-4px 2px 8px;font-size:12.5px;color:#8A6D1B;
	background:#FFF8E6;border-radius:8px;padding:7px 10px;
}

/* 找回密码页的「规则提示」（几次错误后要等多久）：淡黄底 + 琥珀字，提醒但不刺眼 */
.fp-warn{
	margin:8px 0 0;padding:8px 11px;border-radius:9px;
	background:#FFF8E6;color:#8A6D1B;font-size:12px;line-height:1.7;
}
.fp-warn b{color:#B8791A;}

/* ==========================================================================
   群管理 · 群成员（折叠面板 + 搜索）
   成员多的时候默认只显示前 20 个 + 一行「展开全部成员」，上面给个搜索框按昵称/泡泡号过滤。
   ========================================================================== */
.gm-search{
	display:flex;align-items:center;gap:8px;margin:0 0 8px;
	background:var(--card);border-radius:12px;padding:0 12px;height:42px;
}
.gm-search .ico{width:16px;height:16px;stroke-width:2;color:var(--text-3);flex:0 0 auto;}
.gm-search input{flex:1;min-width:0;height:42px;font-size:14.5px;color:var(--text);}
.gm-search input::placeholder{color:var(--text-3);}
.gm-search-x{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--line);
	color:var(--text-2);font-size:12px;line-height:22px;text-align:center;}
.gm-search-x:active{filter:brightness(.94);}

/* 列表底部那一行「展开全部成员 / 收起」 */
.gm-more{
	display:flex;align-items:center;justify-content:center;gap:6px;
	padding:13px 14px;font-size:14px;color:var(--brand-blue);
	border-top:1px solid var(--line);border-radius:0 0 10px 10px;
}
.gm-more:active{background:#F5F7FB;}
.gm-more-arrow{font-style:normal;font-size:15px;transform:rotate(90deg);transition:transform .18s;}
.gm-more-arrow.up{transform:rotate(-90deg);}
html[data-theme="dark"] .gm-more:active{background:#2A313A;}

/* ==========================================================================
   群成员行的「更多 ›」按钮 + 成员操作面板里的动作行
   ========================================================================== */
.gm-more-btn{
	flex:0 0 auto;height:30px;padding:0 12px;border-radius:15px;
	background:#EEF2F8;color:var(--text-2);font-size:12.5px;
}
.gm-more-btn:active{background:#E1E8F3;}

/* 操作面板：头像是成员信息，下面一列动作 */
.gm-sheet-head{
	display:flex;align-items:center;gap:10px;padding:2px 2px 12px;
	border-bottom:1px solid var(--line);margin-bottom:10px;
}
.gm-sheet-head .gm-main{flex:1;min-width:0;}
.gm-acts{display:flex;flex-direction:column;}
.gm-act{
	padding:13px 4px;font-size:15px;color:var(--text);
	border-bottom:1px solid var(--line);
}
.gm-act:last-child{border-bottom:0;}
.gm-act:active{background:#F5F7FB;}
.gm-act.danger{color:var(--red);}
html[data-theme="dark"] .gm-act:active{background:#2A313A;}
html[data-theme="dark"] .gm-more-btn{background:#2A313A;color:var(--text-2);}

/* 群成员筛选标签（全部 / 群主·管理 / 已禁言）：点「已禁言」就是禁言列表 */
.gm-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px;}
.gm-chip{
	font-size:12.5px;padding:6px 13px;border-radius:15px;
	background:var(--card);color:var(--text-2);
}
.gm-chip.on{background:var(--brand-blue);color:#fff;font-weight:600;}
.gm-chip.off{opacity:.45;}          /* 没有被禁言的人 → 置灰不可点 */
.gm-chip:not(.on):not(.off):active{filter:brightness(.96);}

/* ==========================================================================
   群资料卡（「添加群聊」点搜索结果弹出）：头像 + 群名 + 群号 + 详细信息 + 加入按钮
   ========================================================================== */
.gc-head{text-align:center;padding:4px 0 14px;}
.gc-head .avatar{display:block;margin:0 auto 10px;}      /* 居中不用 flex（见 ga-preview 的踩坑说明） */
.gc-name{font-size:17px;font-weight:600;color:var(--text);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gc-sub{margin-top:5px;font-size:12.5px;color:var(--text-2);}
.gc-tag{
	display:inline-block;font-size:11px;padding:1px 7px;border-radius:7px;
	background:#EAF2FF;color:#1A6FD4;margin-left:4px;
}
.gc-btn{margin-top:2px;height:46px;font-size:15.5px;}

/* ================= 个性装扮（全局主题） ================= */
.deco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:6px 2px;}
.deco-card{border-radius:12px;overflow:hidden;background:var(--card);box-shadow:0 1px 3px rgba(16,24,40,.08);}
.deco-card:active{opacity:.85;}
.deco-card .dc-prev{height:64px;position:relative;overflow:hidden;}
.deco-card .dc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.deco-card .dc-body{padding:8px 6px 10px;}
.deco-card .dc-name{font-size:13px;color:var(--text);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.deco-card .dc-state{font-size:11px;color:var(--text-3);text-align:center;margin-top:3px;}
.deco-card.using{box-shadow:0 0 0 2px var(--brand-blue);}
.deco-card.using .dc-state{color:var(--brand-blue);font-weight:600;}
.deco-card.locked .dc-name{color:var(--text-3);}
/* ---- 主题「应用」弹窗：顶部一条配色预览 + 每行下面的小字说明 ---- */
.dap-prev{height:46px;border-radius:10px;margin:2px 0 10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);}
.jump-row .jr-sub{display:block;font-style:normal;font-size:11.5px;color:var(--text-3);margin-top:2px;}

/* ---- 主题商店卡片：预览上挂 VIP/SVIP 徽章，底部是价格 / 状态 ---- */
.shop-card .dc-prev{height:74px;}
.shop-badge{
	position:absolute;right:5px;top:5px;z-index:2;font-style:normal;
	font-size:9.5px;line-height:1;font-weight:700;color:#fff;
	padding:3px 5px;border-radius:5px;
}
.shop-badge.vip { background:linear-gradient(135deg,#F8626F,#C2263C); }   /* VIP：红 */
.shop-badge.svip{ background:linear-gradient(135deg,#FFD24B,#E8A200); }   /* SVIP：金 */
.shop-card .dc-price{
	margin-top:3px;text-align:center;font-size:12px;font-weight:700;color:#E8455F;
}
.shop-card.owned .dc-price{color:#12A870;}          /* 已解锁：绿 */
.shop-card.using .dc-price{color:var(--brand-blue);}

/* 「主题配套」小标（气泡 tab 里，当前主题对应的那款气泡） */
.dc-pair{
	position:absolute;left:5px;top:5px;z-index:2;font-style:normal;
	font-size:9.5px;line-height:1;color:#fff;background:rgba(0,0,0,.42);
	padding:3px 5px;border-radius:6px;backdrop-filter:blur(2px);
}
.deco-foot{margin-top:14px;font-size:12px;color:var(--text-3);text-align:center;}

/* 装扮分组（免费 / VIP 专享 / SVIP 专享）：标题是网格子元素，grid-column 横跨三列 */
.deco-sec{grid-column:1/-1;display:flex;align-items:center;gap:7px;padding:10px 2px 0;}
.deco-sec:first-child{padding-top:2px;}
.deco-sec .dsec-name{font-size:14px;font-weight:600;color:var(--text);}
.deco-sec.lv0 .dsec-name{color:#12A870;}                  /* 免费：绿 */
.deco-sec.lv1 .dsec-name{color:#E8455F;}                  /* VIP：红（和会员标识同色） */
.deco-sec.lv2 .dsec-name{color:#D4A017;}                  /* SVIP：金（和会员标识同色） */
.deco-sec .dsec-tag{
	font-size:10px;line-height:1;font-weight:700;color:#fff;border-radius:5px;padding:3px 5px;
	background:linear-gradient(135deg,#F8626F,#C2263C);      /* VIP：红 */
}
.deco-sec.lv2 .dsec-tag{background:linear-gradient(135deg,#FFD24B,#E8A200);}   /* SVIP：金 */
.deco-sec .dsec-n{margin-left:auto;font-size:11px;color:var(--text-3);}

/* 装扮中心 tab 切换 */
.deco-tabs{display:flex;margin:2px 0 4px;background:var(--bg);border-radius:10px;padding:3px;}
/* 分类栏：放在 .pub-body **外面**（页面是 flex 列，body 自己滚动）→ 固定在顶部不跟着滚 */
.deco-tabbar{flex:0 0 auto;padding:6px 12px 8px;background:transparent;}
.deco-tabbar .deco-tabs{margin:0;}
.deco-tab{flex:1;text-align:center;font-size:14px;color:var(--text-2);padding:7px 0;border-radius:8px;}
.deco-tab.on{background:var(--card);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(16,24,40,.08);}

/* ================= 自定义主题表单 ================= */
.cs-swatches{display:flex;flex-wrap:wrap;gap:10px;padding:4px 2px 10px;}
.cs-dot{width:28px;height:28px;border-radius:50%;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
.cs-dot.on{box-shadow:0 0 0 2px var(--brand-blue),inset 0 0 0 2px #fff;}
.cs-field{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:12px;padding:10px 14px;margin-bottom:10px;box-shadow:0 1px 2px rgba(16,24,40,.04);min-width:0;}
/* 开关式的一行（侧边栏分割线）：整行可点 */
.cs-switch-row{cursor:pointer;}
.cs-switch-row:active{background:var(--bg);}
.cs-switch-name{flex:1;min-width:0;font-size:14px;color:var(--text);}
/* ⚠️ .cs-field span{flex:1} 会把开关也拉长 —— 这里按固定尺寸钉住 */
.cs-switch-row .switch{flex:0 0 46px;width:46px;height:27px;margin-left:0;pointer-events:none;}
.cs-field span{flex:1;min-width:0;font-size:14px;color:var(--text);}
.cs-field input[type="color"]{width:44px;height:30px;border:1px solid var(--line);border-radius:8px;background:none;padding:2px;cursor:pointer;}
.cs-seg{display:flex;gap:8px;margin-bottom:10px;}
.cs-segbtn{flex:1;height:36px;border-radius:10px;font-size:13.5px;color:var(--text-2);background:var(--card);border:1px solid var(--line);}
.cs-segbtn.on{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);font-weight:600;}
.cs-upload{width:100%;height:40px;border-radius:10px;background:var(--bg);border:1px dashed var(--line);color:var(--brand-blue);font-size:14px;font-weight:600;margin-bottom:10px;}
.cs-bgprev{width:100%;height:110px;border-radius:12px;margin-bottom:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);}
.cs-save{width:100%;height:46px;border-radius:23px;background:var(--qq-grad);color:#fff;font-size:16px;font-weight:600;margin-top:16px;box-shadow:0 8px 20px rgba(48,120,255,.24);}
.cs-save:active{filter:brightness(1.05);}
/* ---- 自定义主题：渐变编辑器（多色 + 角度 + 预览） ---- */
.cs-grad{margin-bottom:4px;}
.cs-grad-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;}
.cs-grad-row{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:10px;padding:8px 12px;}
.cs-grad-n{width:16px;font-size:12px;color:var(--text-3);}
.cs-grad-row input[type="color"]{flex:1;height:32px;border:1px solid var(--line);border-radius:8px;background:none;padding:2px;cursor:pointer;}
.cs-grad-del{width:26px;height:26px;border-radius:8px;color:var(--text-3);font-size:13px;}
.cs-grad-del:active{background:rgba(0,0,0,.05);color:var(--red);}
.cs-grad-add{
	width:100%;height:36px;border-radius:10px;margin-bottom:8px;
	background:var(--card);border:1px dashed var(--line);color:var(--brand-blue);font-size:13.5px;
}
.cs-grad-prev{height:56px;border-radius:12px;margin-bottom:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);}
.cs-dirs{display:flex;gap:8px;margin:0 0 10px;}
.cs-dir{
	flex:1;height:34px;border-radius:10px;background:var(--card);border:1px solid var(--line);
	font-size:15px;color:var(--text-2);
}
.cs-dir:active{background:var(--bg);}
.cs-reset{
	display:block;width:100%;height:34px;border-radius:10px;margin:-2px 0 10px;
	background:transparent;color:var(--text-3);font-size:12.5px;text-align:left;padding-left:2px;
}
.cs-reset:active{color:var(--brand-blue);}
/* 主题商店 · 玩家分享：工具条 / 价格角标 / 状态行 */
.pub-bar{display:flex;align-items:center;gap:6px;margin:6px 2px 8px;grid-column:1/-1;}
.pub-kw{
	flex:1;min-width:0;height:32px;border-radius:16px;padding:0 12px;font-size:13px;
	background:var(--card);border:1px solid var(--line);color:var(--text);
}
.pub-tab{
	flex:0 0 auto;height:32px;padding:0 10px;border-radius:16px;font-size:12.5px;
	background:var(--card);color:var(--text-2);border:1px solid var(--line);
}
.pub-tab.on{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);font-weight:600;}
.pub-price, .pub-own{
	position:absolute;left:5px;top:5px;z-index:2;font-style:normal;
	font-size:9.5px;line-height:1;font-weight:700;color:#fff;
	padding:3px 5px;border-radius:5px;
}
.pub-price{background:linear-gradient(135deg,#F2BC3C,#C08100);}   /* 售价：金 */
.pub-own{background:#12A870;}                                     /* 已购买：绿 */
.pub-price-line{
	margin-top:2px;text-align:center;font-size:10.5px;font-weight:600;color:#C08100;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pub-card .pub-meta{padding-right:0;}
/* ---- 自定义主题：主题设计 / 气泡设计 两个分类 ---- */
.cs-subseg{display:flex;gap:8px;margin:2px 0 12px;}
.cs-subbtn{
	flex:1;height:40px;border-radius:12px;font-size:14.5px;font-weight:600;
	background:var(--card);color:var(--text-2);border:1px solid var(--line);
}
.cs-subbtn.on{
	background:linear-gradient(135deg,rgba(18,183,245,.14),rgba(122,92,255,.12));
	color:var(--brand-blue);border-color:var(--brand-blue);
}
/* 气泡设计：表情选择 + 预览 */
.cs-emos{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 10px;}
.cs-emo{
	width:40px;height:40px;border-radius:12px;font-size:19px;line-height:1;
	background:var(--card);border:1px solid var(--line);
}
.cs-emo.on{border-color:var(--brand-blue);box-shadow:0 0 0 2px rgba(18,183,245,.18);}
.cs-bprev{
	display:flex;align-items:center;justify-content:flex-end;
	/* 上下留出图案溢出的空间，预览看上去就像真实聊天里的一条消息 */
	padding:56px 18px 42px;
	min-height:210px;
	border-radius:14px;background:var(--bg);margin-bottom:4px;
	/* 图案是绝对定位、可以放到气泡外面 → 这里必须裁掉，
	   否则预览会把内容撑宽，整个自定义页就能左右拖动 */
	overflow:hidden;
}
.cs-bprev-b{
	position:relative;max-width:86%;padding:11px 15px;border-radius:14px 14px 4px 14px;
	font-size:14.5px;line-height:1.45;background:var(--brand-blue);color:#fff;
	box-shadow:0 2px 8px rgba(10,107,255,.22);
}
.cs-bprev-emo{
	position:absolute;right:-7px;top:-11px;font-style:normal;font-size:15px;line-height:1;
	filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));
}
/* ---- 气泡设计：图案列表（每个图案：预览 + 位置/大小滑杆） + 预览上的扫光 ---- */
.cs-pat{background:var(--card);border-radius:12px;padding:10px 12px 2px;margin-bottom:10px;}
.cs-pat-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.cs-pat-pv{
	width:34px;height:34px;border-radius:9px;flex:0 0 auto;background:var(--bg);
	box-shadow:inset 0 0 0 1px var(--line);background-size:contain;background-repeat:no-repeat;background-position:center;
}
.cs-pat-n{flex:1;font-size:13.5px;color:var(--text);}
.cs-pat-del{
	flex:0 0 auto;height:30px;padding:0 10px;border-radius:15px;font-size:12.5px;color:var(--red);
	background:transparent;box-shadow:inset 0 0 0 1px var(--line);
}
.cs-pat .cs-field{margin-bottom:8px;}
.cs-pv-btn{
	float:right;margin-top:-4px;height:24px;padding:0 10px;border-radius:12px;
	font-size:11.5px;color:var(--brand-blue);background:transparent;box-shadow:inset 0 0 0 1px var(--line);
}
.cs-bprev-b{overflow:visible;}                       /* 图案放到气泡外面也不能被裁 */
/* 气泡预览里的「扫光」已下线（.cs-bprev-sweep 规则已删除） */
/* 气泡四角图案上传行 */
.cs-corner{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:12px;padding:9px 12px;margin-bottom:8px;}
.cs-corner-n{flex:1;font-size:14px;color:var(--text);}
.cs-corner-pv{
	width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
	font-size:16px;color:var(--text-3);background:var(--bg);
	box-shadow:inset 0 0 0 1px var(--line);
}
.cs-corner-up{
	flex:0 0 auto;height:32px;padding:0 12px;border-radius:16px;font-size:13px;
	background:var(--brand-blue);color:#fff;font-weight:600;
}
.cs-corner-cl{
	flex:0 0 auto;height:32px;padding:0 10px;border-radius:16px;font-size:13px;
	background:transparent;color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line);
}

.cs-publish{
	width:100%;height:42px;border-radius:21px;margin-top:14px;
	background:var(--card);color:var(--brand-blue);font-size:15px;font-weight:600;
	box-shadow:inset 0 0 0 1px var(--brand-blue);
}
.cs-publish:active{filter:brightness(.98);}
.pub-card .dc-prev{height:74px;}
.pub-mine{
	position:absolute;right:5px;top:5px;z-index:2;font-style:normal;
	font-size:9.5px;line-height:1;font-weight:700;color:#fff;
	padding:3px 5px;border-radius:5px;background:rgba(0,0,0,.42);
}
.pub-meta{
	margin-top:3px;text-align:center;font-size:10.5px;color:var(--text-2);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ==========================================================================
   主题商店 v2（像手机主题中心）
   —— 商店 tab 给 #decoGrid 挂 .storev2：不再用三列小网格，
      改成「精选横滑大卡 + 分区标题 + 双列竖版大预览」。
      主题 / 气泡 / 自定义 三个 tab 不受影响。
   ========================================================================== */
.deco-grid.storev2{display:block;padding:2px 0 4px;}

/* 分区标题：精选推荐 / 官方主题 / 玩家分享 */
.ts-sec{display:flex;align-items:baseline;gap:8px;margin:18px 2px 10px;}
.ts-sec:first-child{margin-top:2px;}
.ts-sec .ts-title{font-size:16.5px;font-weight:700;color:var(--text);letter-spacing:.3px;}
.ts-sec .ts-sub{font-size:11.5px;color:var(--text-3);}
.ts-sec .ts-more{margin-left:auto;font-size:11.5px;color:var(--text-3);}

/* ---- 精选：横滑大卡（scroll-snap 对齐，一屏一张多） ---- */
.ts-hero{
	display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;
	scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
	padding:2px 2px 8px;margin:0 -2px;
}
.ts-hero::-webkit-scrollbar{display:none;}
.ts-hero-card{
	flex:0 0 auto;width:80%;max-width:320px;border-radius:16px;overflow:hidden;
	scroll-snap-align:start;background:var(--card);box-shadow:0 8px 22px rgba(16,24,40,.14);
}
.ts-hero-card:active{opacity:.92;}
.ts-hero-prev{position:relative;height:158px;overflow:hidden;}
.ts-hero-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.ts-hero-mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.62));}
.ts-hero-txt{position:absolute;left:13px;right:13px;bottom:11px;z-index:2;color:#fff;}
.ts-hero-name{
	font-size:15.5px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.35);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ts-hero-sub{margin-top:3px;font-size:11.5px;opacity:.9;}

/* ---- 双列竖版大预览卡（3:4，用 padding-top 撑高度，老 WebView 也稳） ---- */
.ts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.ts-card{border-radius:14px;overflow:hidden;}
.ts-card:active{opacity:.9;}
.ts-card .ts-prev{position:relative;padding-top:132%;overflow:hidden;}
.ts-card .ts-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.ts-card .ts-body{padding:8px 9px 10px;}
.ts-card .ts-name{
	font-size:13px;font-weight:600;color:var(--text);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ts-card .ts-author{
	margin-top:2px;font-size:10.5px;color:var(--text-3);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ts-card .ts-price{margin-top:4px;font-size:12px;font-weight:700;color:#E8455F;}
.ts-card.owned .ts-price{color:#12A870;}            /* 已拥有 / 已购：绿 */
.ts-card.using .ts-price{color:var(--brand-blue);}

/* ---- 角标：价格（金）/ 已拥有（绿）/ 使用中（蓝）/ 我的（黑） ---- */
.ts-flag{
	position:absolute;right:6px;top:6px;z-index:3;font-style:normal;
	font-size:9.5px;line-height:1;font-weight:700;color:#fff;
	padding:3px 6px;border-radius:7px;background:rgba(0,0,0,.42);
	-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.ts-flag.gold {background:linear-gradient(135deg,#F2BC3C,#C08100);}
.ts-flag.owned{background:#12A870;}
.ts-flag.using{background:var(--brand-blue);}
.ts-flag.off  {background:#8A8F98;}

/* ---- 没封面图时画的「手机主题」小样：顶栏 + 两行卡片 + 一条自己的气泡 ---- */
.ts-mock{position:absolute;inset:0;padding:13px 12px;display:flex;flex-direction:column;gap:6px;}
.ts-mock i{display:block;border-radius:5px;background:rgba(255,255,255,.82);}
.ts-mock-bar{height:9px;width:56%;}
.ts-mock-row{height:15px;border-radius:7px;opacity:.9;}
.ts-mock-bub{
	margin-top:auto;align-self:flex-end;width:62%;height:17px;
	border-radius:9px 9px 3px 9px;background:rgba(255,255,255,.94);
	box-shadow:0 2px 6px rgba(0,0,0,.12);
}

/* ---- 玩家分享：胶囊搜索框 + 筛选 chips ---- */
.ts-search-row{margin:0 2px 8px;}
.ts-search{
	width:100%;height:36px;border-radius:18px;padding:0 14px;font-size:13px;
	background:var(--card);border:1px solid var(--line);color:var(--text);
	box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.ts-search::placeholder{color:var(--text-3);}
.ts-chips{display:flex;gap:8px;overflow-x:auto;padding:0 2px 2px;margin-bottom:12px;}
.ts-chips::-webkit-scrollbar{display:none;}
.ts-chip{
	flex:0 0 auto;height:28px;padding:0 13px;border-radius:14px;font-size:12.5px;
	background:var(--card);color:var(--text-2);border:1px solid var(--line);
}
.ts-chip.on{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);font-weight:600;}

/* ---- 商店顶部固定条：搜索框 + 分类（全部主题 / 个人中心） ----
   它和 .deco-tabbar 一样在 .pub-body 外面，所以天然固定、不跟列表滚动，
   也不会因为列表重绘而让搜索框失焦。 */
.store-head{flex:0 0 auto;padding:0 12px 8px;background:transparent;}
.store-head .ts-search-row{margin:0 0 8px;}
.ts-cats{display:flex;gap:8px;}
.ts-cat{
	flex:1;height:34px;border-radius:17px;font-size:13.5px;font-weight:600;
	background:var(--card);color:var(--text-2);border:1px solid var(--line);
	transition:background .16s,color .16s,box-shadow .16s;
}
.ts-cat.on{
	background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);
	box-shadow:0 4px 12px rgba(18,183,245,.26);
}

/* 个人中心的说明条 */
.ts-hint{
	margin:0 2px 12px;padding:9px 11px;border-radius:10px;line-height:1.6;
	background:rgba(18,183,245,.08);color:var(--text-2);font-size:11.5px;
}

/* 个人中心卡片上的「下架 / 上架 / 删除」 */
.ts-acts{display:flex;gap:8px;margin-top:8px;}
.ts-act{
	flex:1;height:28px;border-radius:14px;font-size:12px;
	background:var(--bg);color:var(--text-2);border:1px solid var(--line);
}
.ts-act:active{filter:brightness(.96);}
.ts-act.danger{color:#E8455F;border-color:rgba(232,69,95,.36);background:rgba(232,69,95,.06);}
.ts-act[disabled]{opacity:.55;}
/* 已下架：预览整体压暗一点 */
.ts-card.off .ts-prev{filter:grayscale(.75);opacity:.62;}

/* 个人中心里的次级分区标题（我购买的 / 我发布的） */
.ts-sec.sm{margin:16px 2px 9px;}
.ts-sec.sm .ts-title{font-size:14.5px;}
/* 「使用」按钮：主按钮（蓝） */
.ts-act.main{
	background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);font-weight:600;
}

/* ---- 商店主题使用中：自定义页整体锁住（只读，不能二次更改） ---- */
.cs-lock{
	margin:8px 2px 0;padding:26px 18px;border-radius:16px;text-align:center;
	background:var(--card);box-shadow:0 1px 3px rgba(16,24,40,.08);
}
.cs-lock-ic{font-size:34px;line-height:1;}
.cs-lock-t{margin-top:12px;font-size:15.5px;font-weight:700;color:var(--text);}
.cs-lock-s{
	margin-top:10px;font-size:12.5px;line-height:1.7;color:var(--text-2);
}
.cs-lock-btn{
	margin-top:18px;width:100%;height:44px;border-radius:22px;
	background:var(--brand-blue);color:#fff;font-size:15px;font-weight:600;
	box-shadow:0 8px 20px rgba(18,183,245,.26);
}
.cs-lock-tip{margin-top:10px;font-size:11.5px;color:var(--text-3);}
.cs-lock-btn.ghost{
	margin-top:10px;background:var(--bg);color:var(--brand-blue);
	box-shadow:inset 0 0 0 1px var(--brand-blue);
}

/* ================= 主题详情（商店卡片点开） ================= */
.pd-hero{position:relative;height:150px;border-radius:14px;overflow:hidden;margin:2px 0 12px;}
.pd-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.pd-hero-mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.6));}
.pd-hero-txt{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;color:#fff;}
.pd-hero-name{
	font-size:17px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.35);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pd-hero-sub{margin-top:3px;font-size:11.5px;opacity:.92;}
.pd-sec{
	display:flex;align-items:baseline;gap:6px;margin:2px 2px 8px;
	font-size:13.5px;font-weight:700;color:var(--text);
}
.pd-sec-tip{font-size:11px;font-weight:400;color:var(--text-3);}
/* 气泡预览区：上「对方」下「自己」 */
.pd-bbox{display:flex;flex-direction:column;gap:9px;padding:14px 12px;border-radius:12px;background:var(--bg);}
.pd-brow{display:flex;align-items:flex-end;gap:8px;}
.pd-brow.me{justify-content:flex-end;}
.pd-bav{
	width:26px;height:26px;border-radius:50%;flex:0 0 auto;font-size:11px;
	display:flex;align-items:center;justify-content:center;
	background:var(--card);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line);
}
.pd-bub{
	position:relative;max-width:74%;padding:8px 12px;font-size:13.5px;line-height:1.45;
	background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(16,24,40,.12);
}
.pd-bub.other{border-radius:14px 14px 14px 4px;}
.pd-bub.me{border-radius:14px 14px 4px 14px;overflow:visible;}   /* 图案可以放到气泡外面 */
.pd-meta{
	display:flex;justify-content:space-between;gap:8px;
	margin:10px 2px 2px;font-size:11.5px;color:var(--text-3);
}
.pd-acts{display:flex;gap:10px;margin-top:12px;}
.pd-btn{
	flex:1;height:40px;border-radius:20px;font-size:14px;
	background:var(--bg);color:var(--text-2);border:1px solid var(--line);
}
.pd-btn.main{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);font-weight:600;}
.pd-btn.danger{color:#E8455F;border-color:rgba(232,69,95,.36);background:rgba(232,69,95,.06);}
.cs-tip{margin-top:10px;font-size:12px;color:var(--text-3);line-height:1.6;text-align:center;}

/* 自定义主题：不透明度滑块 */
.cs-field input[type="range"]{flex:1;min-width:0;max-width:150px;height:4px;-webkit-appearance:none;appearance:none;background:var(--line);border-radius:2px;outline:none;}
.cs-field input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--brand-blue);box-shadow:0 1px 4px rgba(0,0,0,.2);}
.cs-field b{font-size:13px;color:var(--text-2);min-width:42px;text-align:right;}

/* 聊天列表「置顶 / 删除」按钮：静止时隐藏，左滑（.swiping）时才显示 ——
   这样卡片才能做成半透明（否则红/灰按钮会从卡片底下透出来） */
.swipe-acts{opacity:0;transition:opacity .12s;}
.swipe-row.swiping .swipe-acts{opacity:1;}

/* ==========================================================================
   全局：纵向滚动容器一律禁止「横向滚动」
   —— 只写 overflow-y:auto 时，overflow-x 会按 CSS 规范自动变成 auto；
      一旦容器里有个超宽元素（气泡图案是绝对定位、能放到气泡外面，x 可到
      -50%~150%；还有长文本 / 渐变条），整块内容就能被手指左右拖着走，
      打包成 App 后特别明显（滑透明度时整个页面跟着平移）。
   需要横滑的组件自己带 overflow-x:auto，不受影响：
      .ts-hero（精选横滑）/ .ts-chips（筛选项）/ .pn-tabs / .cs-swatches
   ========================================================================== */
.list,
.list-body,
.set-body,
.sheet-list,
.mall-scroll,
.srch-body,
.qz-list,
.pub-body,
.chat-body,
.dlg-body,
.cs-bprev{ overflow-x: hidden; }

/* ==========================================================================
   进会话的骨架占位（不闪）
   —— 数据没回来之前先画几行灰泡泡；数据到达后在同一帧内整块替换，
      所以既不会出现"加载中→消息"的闪动，也不会看到空白聊天区。
   动画只用 opacity，开销很低（列表滚动时也不会掉帧）。
   ========================================================================== */
.chat-skeleton{padding:2px 0;}
.cs-skel-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:14px;}
.cs-skel-row.me{flex-direction:row-reverse;}
.cs-skel-av{
	width:38px;height:38px;border-radius:50%;flex:0 0 auto;
	background:var(--line);
	animation:csSkelPulse 1.15s ease-in-out infinite;
}
.cs-skel-bub{
	height:38px;border-radius:14px;flex:0 1 auto;background:var(--line);
	animation:csSkelPulse 1.15s ease-in-out infinite;
}
.cs-skel-bub.s1{width:42%;}
.cs-skel-bub.s2{width:56%;}
.cs-skel-bub.s3{width:66%;}
.cs-skel-row.me .cs-skel-bub{border-radius:14px 14px 4px 14px;}
@keyframes csSkelPulse{
	0%,100%{opacity:.30;}
	50%    {opacity:.62;}
}

/* ==========================================================================
   资料卡片骨架（点开头像时先用本地资料占位，避免"加载中…"文字闪一下）
   ========================================================================== */
.pc-cover.pc-skel{background:linear-gradient(135deg,var(--line),var(--bg));}
.pc-av-skel{
	display:block;width:100%;height:100%;border-radius:16px;
	background:var(--line);
}
.pc-name-skel{
	display:inline-block;height:15px;border-radius:8px;background:var(--line);
	vertical-align:middle;
}

/* 长按头像的按下反馈（长按 @ 用）：以前头像按下没有任何变化，
   380ms 后突然插入 @ 并弹起键盘，看着像"闪一下" */
.avatar.avatar-press{
	transform:scale(.92);
	filter:brightness(.92);
	transition:transform .07s ease-out, filter .07s ease-out;
}

/* ==========================================================================
   主题详情里的「聊天页模拟」
   —— 按主题配置画：顶栏 / 聊天背景 / 对方白气泡 / 自己的主题气泡 / 输入栏
     气泡用和聊天里同一套算法（底色、文字色、图案、扫光），做到"买前即所见"。
   ========================================================================== */
.pd-chat{
	border-radius:14px;overflow:hidden;
	box-shadow:inset 0 0 0 1px rgba(16,24,40,.08), 0 6px 18px rgba(16,24,40,.08);
}
.pd-chat-head{
	position:relative;display:flex;align-items:center;justify-content:center;
	height:34px;font-size:12.5px;font-weight:600;color:#fff;
	background:rgba(0,0,0,.18);text-shadow:0 1px 2px rgba(0,0,0,.22);
}
.pd-chat-head span{
	position:absolute;right:10px;font-size:11px;font-weight:400;opacity:.85;
}
.pd-chat-body{
	padding:14px 12px 16px;display:flex;flex-direction:column;gap:10px;
	min-height:132px;
}
/* 居中的时间条（真实聊天的 .chat-time 用的就是 --text-3，这里跟主题正文色走） */
.pd-chat-time{text-align:center;font-size:10.5px;line-height:1;opacity:.55;}
.pd-chat-row{display:flex;align-items:flex-start;gap:7px;}
.pd-chat-row.me{flex-direction:row-reverse;}
.pd-chat-av{
	width:26px;height:26px;border-radius:50%;flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;
	font-size:10.5px;font-style:normal;color:#fff;background:#8A93A6;
	box-shadow:0 1px 3px rgba(0,0,0,.14);
}
.pd-chat-bub{
	position:relative;max-width:72%;padding:7px 11px;font-size:12.5px;line-height:1.45;
	background:#fff;color:#2B2F36;border-radius:14px 14px 14px 4px;   /* 和聊天里的圆角一致 */
	box-shadow:0 1px 3px rgba(0,0,0,.1);
}
.pd-chat-bub.me{border-radius:14px 14px 4px 14px;overflow:visible;}   /* 图案可以露出气泡 */
.pd-chat-input{
	display:flex;align-items:center;gap:8px;padding:7px 10px;
	background:rgba(255,255,255,.92);border-top:1px solid rgba(16,24,40,.06);
}
.pd-chat-input span{
	flex:1;min-width:0;height:26px;line-height:26px;padding:0 10px;border-radius:13px;
	font-size:12px;color:#8A93A6;background:rgba(16,24,40,.05);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pd-chat-input b{
	flex:0 0 auto;font-size:12px;font-weight:600;color:#fff;
	padding:4px 11px;border-radius:13px;background:#12B7F5;
}

/* ================= 自定义主题：非会员的开通引导（方案 A） =================
   自定义主题 / 自定义气泡从 2026-10-26 起是会员专属（VIP 起）；
   非会员点「自定义」分类时显示这张卡，不再渲染编辑器。 */
.deco-lock{
	display:flex;flex-direction:column;align-items:center;gap:10px;
	margin:26px auto 44px;padding:26px 20px;max-width:360px;text-align:center;
	background:var(--card);border:1px solid var(--line);border-radius:16px;
	box-shadow:0 8px 24px rgba(16,32,64,.06);
}
/* .dl-ico（原来那个皇冠大图标）已按需求删除；这里只留标题 / 说明 / 按钮 */
.deco-lock .dl-t{font-size:16px;font-weight:700;}
.deco-lock .dl-d{font-size:12.5px;color:var(--text-2);line-height:1.8;}
.deco-lock .dl-d b{color:var(--brand-blue);}
.deco-lock .dl-btn{
	width:100%;height:44px;margin-top:4px;border:0;border-radius:12px;cursor:pointer;
	background:linear-gradient(120deg,#FFC22E,#F5A917);color:#4A3200;
	font-size:15px;font-weight:700;
}
.deco-lock .dl-btn:active{transform:scale(.98);}

/* ================= 强制更新（旧版必须升级） =================
   后台勾了「强制更新」时，旧版 App 启动后弹这一层：全屏、关不掉、只能点「立即更新」。
   z-index 要高过所有页面（.pub-page 210 / .dlg 450 / toast 500）。 */
.force-up{
	position:fixed;inset:0;z-index:9990;
	display:flex;align-items:center;justify-content:center;padding:24px;
	background:linear-gradient(160deg,#0e1422,#1b2740 60%,#0e1422);
}
.force-up .fu-card{
	width:100%;max-width:360px;text-align:center;
	background:#fff;border-radius:20px;padding:28px 22px 22px;
	box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.force-up .fu-ico{font-size:44px;line-height:1;margin-bottom:6px;}
.force-up .fu-t{font-size:15px;color:#8A8F99;letter-spacing:.14em;}
.force-up .fu-v{
	font-size:26px;font-weight:800;color:#1A1A1A;margin:2px 0 10px;
	letter-spacing:.02em;
}
.force-up .fu-d{font-size:14px;color:#FA5151;font-weight:600;line-height:1.6;}
.force-up .fu-log{
	margin-top:12px;padding:12px 14px;max-height:150px;overflow:auto;text-align:left;
	background:#F5F7FB;border-radius:12px;
	font-size:12.5px;color:#5A6069;line-height:1.75;white-space:pre-wrap;word-break:break-word;
}
.force-up .fu-btn{
	width:100%;height:46px;margin-top:18px;border:0;border-radius:13px;cursor:pointer;
	background:linear-gradient(120deg,#12B7F5,#5B7CFF);color:#fff;
	font-size:16px;font-weight:700;
}
.force-up .fu-btn:active{transform:scale(.985);}
.force-up .fu-btn:disabled{opacity:.7;}
.force-up .fu-tip{margin-top:10px;font-size:12px;color:#8A8F99;line-height:1.6;}
html[data-theme="dark"] .force-up .fu-card{background:#1C232C;}
html[data-theme="dark"] .force-up .fu-v{color:#F2F4F8;}
html[data-theme="dark"] .force-up .fu-log{background:#232B36;color:#B9C1CE;}

/* ================= 登录页：输入手机号 → 列出该手机号下的账号 =================
   一个手机号最多绑 5 个账号（2026-10-26）。选中的账号高亮，再输密码登录。 */
.lg-acc-pick{margin:10px 0 2px;display:flex;flex-direction:column;gap:8px;}
.lg-acc-pick .lap-t{font-size:12px;color:#8A8F99;line-height:1.6;}
.lg-acc-pick .lap-item{
	display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;
	background:#fff;border:1.5px solid #E6EBF2;border-radius:12px;
	transition:border-color .15s,background .15s;
}
.lg-acc-pick .lap-item:active{background:#F5F8FC;}
.lg-acc-pick .lap-item.on{border-color:#12B7F5;background:rgba(18,183,245,.08);}
.lg-acc-pick .lap-av{
	width:36px;height:36px;border-radius:50%;overflow:hidden;flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;
}
.lg-acc-pick .lap-av img{width:100%;height:100%;object-fit:cover;display:block;}
.lg-acc-pick .lap-main{flex:1;min-width:0;}
.lg-acc-pick .lap-n{
	font-size:14px;font-weight:600;color:#1A1A1A;
	display:flex;align-items:center;gap:5px;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lg-acc-pick .lap-no{font-size:11.5px;color:#8A8F99;margin-top:2px;letter-spacing:.02em;}
.lg-acc-pick .lap-go{color:#C3CBD6;font-size:18px;flex:0 0 auto;}
html[data-theme="dark"] .lg-acc-pick .lap-item{background:#1C232C;border-color:#2A333F;}
html[data-theme="dark"] .lg-acc-pick .lap-n{color:#F2F4F8;}

/* ================= 登录第二步：输入密码（独立页） =================
   z-index：登录页 400 / 找回密码 420 → 这一页 430（450 起是通用弹窗，别越界） */
#loginPassPage{z-index:430;}
#loginPassPage .lp-body{padding-top:18px;}
#loginPassPage .lp-acc{
	display:flex;align-items:center;gap:12px;padding:14px;
	border-radius:14px;background:#fff;border:1px solid #E8EEF7;
	box-shadow:0 2px 10px rgba(16,32,64,.05);
}
#loginPassPage .lp-av{
	width:46px;height:46px;border-radius:50%;overflow:hidden;flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;
}
#loginPassPage .lp-av img{width:100%;height:100%;object-fit:cover;display:block;}
#loginPassPage .lp-info{flex:1;min-width:0;}
#loginPassPage .lp-name{
	font-size:16px;font-weight:600;color:#1A1A1A;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#loginPassPage .lp-sub{font-size:12px;color:#8A8F99;margin-top:3px;letter-spacing:.02em;}
#loginPassPage .lp-pass{margin-top:14px;}
#loginPassPage .lp-hint{min-height:18px;font-size:12.5px;color:#FA5151;padding:6px 2px 0;}
#loginPassPage .login-btn{margin-top:6px;}
#loginPassPage .lp-tip{margin-top:14px;text-align:center;font-size:12px;color:#9AA4B2;}
html[data-theme="dark"] #loginPassPage .lp-acc{background:#1C232C;border-color:#2A333F;}
html[data-theme="dark"] #loginPassPage .lp-name{color:#F2F4F8;}

/* ================= 靓号 · 我的购买记录 + 使用方式 ================= */
.pn-buys{margin:10px 0 6px;}
.pn-buys .pnb-title{font-size:12.5px;color:var(--text-2);padding:2px 4px 8px;}
.pn-buys .pnb-row{
	display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;
	background:var(--card);border:1px solid var(--line);border-radius:12px;
}
.pn-buys .pnb-main{flex:1;min-width:0;}
.pn-buys .pnb-no{font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--text);}
.pn-buys .pnb-meta{font-size:11.5px;color:var(--text-3);margin-top:3px;}
.pn-buys .pnb-go{
	flex:0 0 auto;height:32px;padding:0 14px;border:0;border-radius:16px;cursor:pointer;
	background:var(--brand-blue);color:#fff;font-size:13px;font-weight:600;
}
.pn-buys .pnb-go:active{filter:brightness(.95);}

/* 使用方式（弹窗里两行：创建新号 / 覆盖旧号） */
.pu-row{
	display:flex;flex-direction:column;gap:4px;padding:12px 14px;margin-bottom:10px;
	border:1.5px solid var(--line);border-radius:12px;background:#FAFBFD;cursor:pointer;
}
.pu-row:active{background:#F2F6FC;}
.pu-row b{font-size:14.5px;color:var(--text);}
.pu-row i{font-style:normal;font-size:12.5px;color:var(--text-2);line-height:1.7;}
.pu-row i b{font-size:12.5px;color:#FA5151;font-weight:700;}
.pu-row.danger{border-color:rgba(250,81,81,.35);background:rgba(250,81,81,.05);}
html[data-theme="dark"] .pu-row{background:#1C232C;border-color:#2A333F;}
html[data-theme="dark"] .pn-buys .pnb-row{background:#1C232C;border-color:#2A333F;}
html[data-theme="dark"] .pn-buys .pnb-no{color:#F2F4F8;}

/* ================= 靓号 · 购买记录子页 + 入口 ================= */
/* 靓号列表上方的入口行 */
.pn-mybuys{
	display:flex;align-items:center;gap:8px;width:100%;margin:2px 0 10px;
	padding:11px 14px;border:1px solid var(--line);border-radius:12px;
	background:var(--card);color:var(--text);font-size:14px;font-weight:600;cursor:pointer;
}
.pn-mybuys:active{background:#F2F6FC;}
.pn-mybuys span{flex:1;text-align:left;}
.pn-mybuys i{font-style:normal;color:#C3CBD6;font-size:18px;}
.pn-mybuys .pnb-badge{
	min-width:20px;height:20px;line-height:20px;padding:0 6px;border-radius:20px;
	background:#FA5151;color:#fff;font-size:11.5px;font-weight:700;text-align:center;
}

/* 子页 */
.pnb-tip{font-size:12px;color:var(--text-3);padding:2px 4px 12px;line-height:1.7;}
.pnb-list .pnb-item{
	display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:10px;
	background:var(--card);border:1px solid var(--line);border-radius:12px;
}
.pnb-list .pnb-main{flex:1;min-width:0;}
.pnb-list .pnb-no{
	display:flex;align-items:center;gap:8px;flex-wrap:wrap;
	font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--text);
}
.pnb-list .pnb-st{
	font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:8px;
}
.pnb-list .pnb-st.wait{background:rgba(18,183,245,.14);color:#0A84C8;}
.pnb-list .pnb-st.done{background:rgba(31,146,84,.14);color:#1F9254;}
.pnb-list .pnb-meta{font-size:11.5px;color:var(--text-3);margin-top:4px;line-height:1.6;}
.pnb-list .pnb-extra{font-size:12px;color:var(--text-2);margin-top:3px;}
.pnb-list .pnb-go{
	flex:0 0 auto;height:32px;padding:0 14px;border:0;border-radius:16px;cursor:pointer;
	background:var(--brand-blue);color:#fff;font-size:13px;font-weight:600;
}
.pnb-list .pnb-go:active{filter:brightness(.95);}
html[data-theme="dark"] .pn-mybuys,
html[data-theme="dark"] .pnb-list .pnb-item{background:#1C232C;border-color:#2A333F;color:#F2F4F8;}
html[data-theme="dark"] .pnb-list .pnb-no{color:#F2F4F8;}

/* 创建新号弹窗里的「上传头像」（必填） */
.pu-av-row{display:flex;align-items:center;gap:12px;margin:6px 0 4px;}
.pu-av{
	width:62px;height:62px;border-radius:50%;overflow:hidden;flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;
	font-size:26px;color:#fff;background:linear-gradient(135deg,#4EA8FF,#2D7BE0);
	border:1px solid rgba(18,150,220,.18);
}
.pu-av img{width:100%;height:100%;object-fit:cover;display:block;}
.pu-av.has{background:#EAF1FA;}
.pu-av-btn{
	flex:1;height:40px;border:1.5px dashed rgba(18,150,220,.5);border-radius:10px;
	background:rgba(18,183,245,.06);color:var(--brand-blue);
	font-size:13.5px;font-weight:600;cursor:pointer;
}
.pu-av-btn:active{background:rgba(18,183,245,.14);}
html[data-theme="dark"] .pu-av-btn{background:rgba(18,183,245,.12);}

/* ================= 音乐助手 =================
   结构：#musicPage（.pub-page 固定全屏，flex 列）
            ├ .pub-head    标题栏
            ├ .music-head  搜索 + 风格（固定不滚动）
            ├ .pub-body    列表（自己滚动）
            └ .music-bar   底部播放条（固定）
   颜色**只用变量**，深色主题自动适配（少数硬编码在 theme.css 末尾覆盖）。 */
/* 顶栏高度跟首页对齐：
   首页 .topbar 是 12px + safe-top / 10px（见 qq-theme.css 第 431 行），
   通用 .pub-head 是 9px / 9px，差 4px —— 只对音乐页补齐，别动其它二级页。
   用 ID 选择器，优先级高于 qq-theme.css 的 .pub-head 规则。 */
#musicPage .pub-head{
	padding:calc(12px + var(--safe-top-max)) 16px 10px;
}

/* 音乐页高度锁在「键盘未弹起时的视口高度」（JS 写入 --music-h，见 music.js 的 syncMusicHeight）。
   键盘弹起时 WebView 的可视高度会变矮，但容器高度不变 →
   底部「播放条 / 底部标签」留在物理屏幕最底部（被键盘自然遮住），
   不会被顶到键盘上方，也不会"消失一下又出现"。
   ⚠️ bottom:auto 必须写：.pub-page 的 inset:0 同时给了 top / bottom，不写 height 会被忽略。 */
#musicPage{height:var(--music-h,100%);bottom:auto;}

.music-head{
	flex:0 0 auto;padding:10px 14px 8px;
	border-bottom:1px solid var(--line);background:var(--card);
}
.music-search{
	display:flex;align-items:center;gap:8px;
	height:36px;padding:0 12px;border-radius:18px;background:var(--bg);
}
.music-search .ico{width:16px;height:16px;flex:0 0 auto;color:var(--text-3);}
.music-search input{
	flex:1;min-width:0;border:0;outline:0;background:none;
	font-size:14px;color:var(--text);
}
.music-search input::placeholder{color:var(--text-3);}
/* 搜索框自带的清除叉号会顶破圆角，去掉 */
.music-search input::-webkit-search-cancel-button{-webkit-appearance:none;}

/* 风格栏：横向滑动，不换行（避免把搜索框挤下去） */
.music-tags{
	display:flex;gap:8px;margin-top:8px;padding-bottom:2px;
	overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
}
.music-tags::-webkit-scrollbar{display:none;}
.music-tag{
	flex:0 0 auto;padding:5px 12px;border-radius:14px;
	background:var(--bg);color:var(--text-2);
	font-size:12.5px;white-space:nowrap;
}
.music-tag.on{background:var(--brand-blue);color:#fff;}

/* 列表区：播放条和底部标签是 flex 项（不是 fixed），不会再盖住最后一行，
   所以这里只需要一点点底部内边距 */
.music-body{padding-bottom:12px;}
.music-pane{min-height:100%;}

.music-list{display:flex;flex-direction:column;gap:2px;}
.music-item{
	display:flex;align-items:center;gap:10px;
	padding:10px 6px;border-radius:10px;
	/* 背景写在这里做兜底：不依赖「.music-swipe 后代」这条选择器也一定生效，
	   保证每一行都是独立的一张白卡片（深色主题下自动变卡片色） */
	background:var(--card);
}
.music-item:active{background:var(--press,#F2F3F5);}
.music-item.playing .music-item-title{color:var(--brand-blue);}
/* 列表左侧图标可点击（播放/暂停） */
.music-item-art{
	flex:0 0 auto;width:40px;height:40px;border-radius:10px;
	display:flex;align-items:center;justify-content:center;
	background:linear-gradient(135deg,#DCE8FA,#C7D8F2);
	color:#2E86E0;font-size:17px;
	cursor:pointer;
}
.music-item.playing .music-item-art{
	background:linear-gradient(135deg,#12B7F5,#4EA8FF);color:#fff;
}
.music-item-main{flex:1;min-width:0;}
.music-item-title{
	font-size:14.5px;font-weight:500;color:var(--text);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.music-item-sub{
	margin-top:3px;font-size:12px;color:var(--text-3);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.music-like{
	flex:0 0 auto;width:36px;height:36px;border-radius:50%;
	font-size:17px;line-height:1;color:var(--text-3);background:none;
}
.music-like.on{color:#FF5A7A;}

/* CC 协议署名（合规要求，别删） */
.music-credit{
	margin:18px 0 6px;text-align:center;
	font-size:11.5px;line-height:1.6;color:var(--text-3);
}

/* ---- 底部播放条 ---- */
.music-bar{
	flex:0 0 auto;display:flex;align-items:center;gap:10px;
	padding:8px 12px calc(8px + var(--safe-bottom));
	border-top:1px solid var(--line);background:var(--card);
}
/* 播放条：现在贴在底部标签**上方**，不直接挨着屏幕底，
   所以高度里不再带安全区（安全区由下面的 .music-tabbar 承担），
   用「标签内容高度 + 8px」保持和标签同一套变量。 */
#musicPage .music-bar{
	height:calc(var(--tabbar-h, 48px) + 8px);
	padding:0 12px;
}

/* ---- 底部标签：和聊天首页同一个高度算法 ---- */
.music-tabbar{
	flex:0 0 auto;display:flex;
	height:calc(var(--tabbar-h, 48px) + var(--bar-bottom-gap, 26px) + var(--safe-bottom));
	padding-bottom:calc(var(--bar-bottom-gap, 26px) + var(--safe-bottom));
	background:var(--card);
	border-top:1px solid var(--line);
}
.music-tab{
	flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
	color:var(--text-3);font-size:11px;
}
.music-tab .ico{width:22px;height:22px;}
.music-tab.on{color:var(--brand-blue);}
.music-tab:active{opacity:.7;}
.music-bar-art{
	flex:0 0 auto;width:40px;height:40px;border-radius:10px;
	display:flex;align-items:center;justify-content:center;
	background:linear-gradient(135deg,#12B7F5,#4EA8FF);
	color:#fff;font-size:17px;
}
.music-bar-info{flex:1;min-width:0;}
.music-bar-title{
	font-size:13.5px;font-weight:600;color:var(--text);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.music-bar-sub{
	margin-top:2px;font-size:11.5px;color:var(--text-3);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.music-bar-ctrl{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.mb-btn{
	width:32px;height:32px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
}
.mb-btn .ico{width:18px;height:18px;color:var(--text-2);}
.mb-play{
	width:38px;height:38px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:var(--brand-blue);
}
/* 播放/暂停是实心图形：全局 .ico 默认 fill:none，这里单独填白 */
.mb-play .ico{width:19px;height:19px;color:#fff;fill:#fff;stroke:#fff;}

/* ---- 本地音乐：当前目录栏 ---- */
.music-dirbar{display:flex;align-items:center;gap:8px;margin-top:8px;padding:0 2px;}
.music-dir{
	flex:1;min-width:0;font-size:12px;color:var(--text-3);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.music-dirbtn{
	flex:0 0 auto;height:28px;padding:0 12px;border-radius:14px;
	background:var(--brand-blue);color:#fff;font-size:12.5px;
}
.music-dirbtn:active{opacity:.85;}

/* ================= 全屏播放页 =================
   点底部播放条进入；深色渐变是播放器的通用风格（浅色主题下也有层次）。
   从**底部**滑上来（通用 .pub-page 是从右边），更像音乐 App。 */
.player-page{
	/* 2026-10 按需求：播放页**纯黑背景**（原来是深色渐变，配色随歌曲色相变） */
	background:#000;
	color:#fff;z-index:215;
	transform:translateY(100%);
}
.player-page.open{transform:none;}

.player-head{
	position:relative;z-index:2;      /* 盖在科技感背景之上 */
	flex:0 0 auto;display:flex;align-items:center;gap:10px;
	padding:calc(12px + var(--safe-top-max)) 14px 10px;
}
.player-down{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);}
.player-down .ico{width:24px;height:24px;}
.player-head-info{flex:1;min-width:0;text-align:center;}
.player-head-title{
	font-size:14px;font-weight:600;color:#fff;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.player-head-sub{
	margin-top:2px;font-size:11.5px;color:rgba(255,255,255,.5);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.player-head-holder{width:34px;flex:0 0 auto;}

/* ================= 播放页科技感背景 =================
   **背景 = 粒子特效**（canvas #plFx，由 js/music.js 绘制；颜色跟歌曲色相走），
   下面只保留一层很淡的透视网格做底纹（不是扫光，静止+缓慢前移）。
   ⚠️ 上下扫描光带、歌词左右扫光都已按需求删除。 */
.player-page{ isolation:isolate; }
.player-page::before{
	content:"";position:absolute;left:-10%;right:-10%;top:-12%;bottom:-12%;
	z-index:0;pointer-events:none;opacity:.26;
	background-image:
		linear-gradient(rgba(120,225,255,.16) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120,225,255,.16) 1px, transparent 1px);
	background-size:44px 44px, 44px 44px;
	transform:perspective(460px) rotateX(56deg);
	transform-origin:50% 100%;
	animation:plGrid 22s linear infinite;
	-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 72%,transparent 100%);
	mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 72%,transparent 100%);
	transition:opacity .5s ease;
}
@keyframes plGrid{
	from { background-position:0 0, 0 0; }
	to   { background-position:0 88px, 88px 0; }
}
/* 播放时底纹稍微亮一点（.beat 由 js 的节拍心跳切换） */
.player-page.beat::before{ opacity:.34; }

/* 粒子画布：铺满、在内容之下、不吃点击 */
.pl-fx{
	position:absolute;inset:0;z-index:0;display:block;
	width:100%;height:100%;pointer-events:none;
	opacity:.95;
}
@media (prefers-reduced-motion: reduce){
	.player-page::before{ animation:none; }
	.pl-fx{ display:none; }        /* 系统要求减少动效时干脆不画粒子 */
}

.player-main{
	position:relative;z-index:2;        /* 盖在科技感背景之上 */
	flex:1;display:flex;flex-direction:column;justify-content:center;
	padding:0 28px calc(28px + var(--safe-bottom));
	overflow:hidden;
}

/* ---- 唱片：播放时旋转 ---- */
.player-disc{
	width:min(64vw,230px);height:min(64vw,230px);border-radius:50%;
	margin:0 auto;flex:0 0 auto;
	background:radial-gradient(circle at 50% 42%,#3C4A5E 0%,#222C39 55%,#10161E 100%);
	box-shadow:0 20px 44px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.07);
	display:flex;align-items:center;justify-content:center;
	animation:plSpin 20s linear infinite;
	animation-play-state:paused;
}
.player-disc.playing{animation-play-state:running;}
@keyframes plSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.player-disc-inner{
	width:34%;height:34%;border-radius:50%;
	background:linear-gradient(135deg,#3D9BFF,#12B7F5);
	display:flex;align-items:center;justify-content:center;
	font-size:30px;color:#fff;
	box-shadow:0 6px 18px rgba(18,183,245,.4);
}

.player-info{margin-top:28px;text-align:center;}
.player-name{
	font-size:19px;font-weight:600;color:#fff;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.player-artist{
	margin-top:6px;font-size:13px;color:rgba(255,255,255,.55);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---- 进度条：整条可点可拖 ---- */
.player-seek-row{
	display:flex;justify-content:space-between;
	margin-top:26px;font-size:11.5px;color:rgba(255,255,255,.45);
}
.player-seek{
	position:relative;height:22px;margin-top:2px;
	display:flex;align-items:center;touch-action:none;
}
.player-seek-bg{
	position:absolute;left:0;right:0;height:3px;border-radius:2px;
	background:rgba(255,255,255,.16);
}
.player-seek-bar{
	position:absolute;left:0;height:3px;border-radius:2px;width:0;
	background:linear-gradient(90deg,#4FD1EF,#3D9BFF);
}
.player-seek-dot{
	position:absolute;left:0;width:11px;height:11px;border-radius:50%;
	background:#fff;transform:translateX(-50%);
	box-shadow:0 2px 6px rgba(0,0,0,.45);
}

/* ---- 控制按钮 ---- */
.player-ctrl{
	display:flex;align-items:center;justify-content:space-between;
	margin-top:20px;padding:0 2px;
}
.pl-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.72);}
.pl-btn .ico{width:22px;height:22px;}
.pl-btn.pl-big .ico{width:26px;height:26px;color:rgba(255,255,255,.9);}
/* 播放模式：单曲循环（数字 1）/ 随机 时高亮 */
.pl-btn.on{color:#4FD1EF;}
.pl-mode-tip{
	position:absolute;left:50%;bottom:calc(96px + var(--safe-bottom));
	transform:translateX(-50%);
	padding:6px 14px;border-radius:14px;
	background:rgba(0,0,0,.55);color:#fff;font-size:12px;
	opacity:0;transition:opacity .2s;pointer-events:none;
}
.pl-mode-tip.show{opacity:1;}

.pl-play{
	width:64px;height:64px;border-radius:50%;background:#fff;
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.pl-play .ico{width:26px;height:26px;color:#151A22;fill:#151A22;stroke:#151A22;}

/* 播放条本身可点击（提示一下） */
.music-bar{cursor:pointer;}

/* 空状态里的「选择音乐文件夹」大按钮 */
.music-pickbig{
	display:inline-block;margin-top:14px;height:38px;padding:0 22px;border-radius:19px;
	background:var(--brand-blue);color:#fff;font-size:14px;
	box-shadow:0 6px 16px rgba(18,183,245,.3);
}
.music-pickbig:active{opacity:.85;}

/* ---- 个人中心：顶部分类切换（我的分享 / 我的收藏 / 最近在听） ---- */
.mine-tabs{
	display:flex;gap:4px;margin:0 0 12px;padding:3px;
	background:var(--bg);border-radius:11px;
}
.mine-tab{
	flex:1;display:flex;align-items:center;justify-content:center;gap:2px;
	padding:8px 0;border-radius:9px;
	font-size:13px;color:var(--text-2);
	transition:background .16s,color .16s;
}
.mine-tab.on{
	background:var(--card);color:var(--text);font-weight:600;
	box-shadow:0 1px 3px rgba(16,24,40,.08);
}
.mine-num{font-size:11px;font-weight:400;color:var(--text-3);}
.mine-tab.on .mine-num{color:var(--brand-blue);}

.mine-pane{display:flex;flex-direction:column;gap:2px;}
.mine-empty{
	padding:22px 10px;text-align:center;line-height:1.7;
	font-size:13px;color:var(--text-3);
	background:var(--bg);border-radius:10px;
}

/* ================= 本地音乐 · 左滑操作 =================
   结构：.music-swipe > (.music-actions 按钮 | .music-item 内容)
   按钮常驻在底层，.music-item 左移才露出来。SWIPE_W=144px 要和 music.js 里一致 */
.music-swipe{position:relative;overflow:hidden;border-radius:10px;
	/* 横向手势交给 JS（竖着滑仍然是滚列表）：
	   否则浏览器可能把「斜着滑」判定成滚动 → 直接发 touchcancel，
	   行停在半路、按钮永远出不来 */
	touch-action:pan-y;}
.music-actions{
	position:absolute;right:0;top:0;bottom:0;
	/* 默认 display:none —— 只要不滑开，按钮在物理上不可能显示出来 */
	display:none;align-items:stretch;z-index:0;
}
.music-swipe.sw-open .music-actions{display:flex;}
/* 按钮宽度写死、不允许被 flex 压缩：滑开距离 = 按钮个数 × 72px，必须真实 */
.music-actions .ma-btn{flex:0 0 72px;width:72px;}
.ma-btn{
	width:72px;display:flex;align-items:center;justify-content:center;
	border:0;color:#fff;font-size:13px;
}
.ma-share{background:var(--brand-blue);}
.ma-rename{background:#5B8DEF;}
.ma-del{background:#E0503A;}
.ma-btn:active{opacity:.85;}

/* 内容层要盖住按钮，且必须有不透明背景，否则按钮会透出来 */
.music-swipe .music-item{
	position:relative;z-index:1;background:var(--card);
	transition:transform .24s cubic-bezier(.32,.72,.28,1);
}
html[data-theme="dark"] .music-swipe .music-item{background:var(--card);}

/* ---- 共享音乐列表 ---- */
.share-list{display:flex;flex-direction:column;gap:2px;}
/* 搜索结果淡入：从「搜索中」切到结果时不要"啪"地硬切 */
.share-list.fade-in{animation:shareFadeIn .2s ease;}
@keyframes shareFadeIn{from{opacity:.3}to{opacity:1}}

/* 搜索框下面的「正在搜索…」：请求期间显示，结果回来才隐藏 */
.share-tip{
	display:flex;align-items:center;gap:6px;
	margin-top:6px;font-size:12px;color:var(--text-3);
}
.share-tip[hidden]{display:none;}
.share-tip i{
	width:6px;height:6px;border-radius:50%;background:var(--brand-blue);
	animation:shareTipBlink 1s ease-in-out infinite;
}
@keyframes shareTipBlink{0%,100%{opacity:.25;}50%{opacity:1;}}

/* ---- 二次确认框（删本地文件 / 共享上传前） ---- */
.ms-ask{
	position:fixed;inset:0;z-index:300;
	display:none;align-items:center;justify-content:center;
	padding:0 34px;background:rgba(0,0,0,.45);
}
.ms-ask.open{display:flex;}
/* 带输入框的确认弹窗（重命名）：靠上摆放 —— 键盘弹起时输入框不会被挡住 */
.ms-ask.top{align-items:flex-start;padding-top:calc(14vh + var(--safe-top));}
.ms-ask-box{
	width:100%;max-width:320px;border-radius:14px;
	background:var(--card);overflow:hidden;
	box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.ms-ask-title{padding:20px 20px 0;font-size:16px;font-weight:600;color:var(--text);}
.ms-ask-msg{
	padding:10px 20px 18px;font-size:13.5px;line-height:1.65;
	color:var(--text-2);word-break:break-all;
}
.ms-ask-msg b{color:var(--text);}
.ms-ask-btns{display:flex;border-top:1px solid var(--line);}
.ms-ask-btns button{flex:1;height:46px;font-size:15px;color:var(--text-2);background:none;}
.ms-ask-btns button + button{border-left:1px solid var(--line);}
.ms-ask-ok{color:#E0503A;font-weight:600;}

/* 个人中心：取消收藏是中性操作，用灰蓝，不用危险红 */
.ma-unfav{background:#8A93A6;}

/* 我的共享：下架（橙）/ 重新共享（绿） */
.ma-off{background:#F5A623;}
.ma-on{background:#12B7A0;}

/* 已下架的条目：只用「已下架」小标签标识（不再动 .music-item 本身，
   避免任何额外样式/属性影响手势） */
.ms-off-tag{
	display:inline-block;margin-left:6px;padding:0 5px;
	border-radius:4px;font-size:10px;line-height:15px;
	color:var(--text-3);background:var(--bg);vertical-align:1px;
}

/* 违规下架：警告图标 / 官方「下架」按钮 / 通知计数 */
.music-item-art.warn{
	background:linear-gradient(135deg,#FFE3DC,#FFC9BC);
	color:#D9402A;font-weight:700;
}
html[data-theme="dark"] .music-item-art.warn{
	background:linear-gradient(135deg,#3A211D,#2E1A17);
	color:#FF8A73;
}
.music-offbtn{
	flex:0 0 auto;height:28px;padding:0 12px;border-radius:14px;
	background:#FDEDE9;color:#D9402A;font-size:12.5px;
}
html[data-theme="dark"] .music-offbtn{background:#3A211D;color:#FF8A73;}
.music-offbtn:active{opacity:.8;}

/* 音乐页标题区：标题 + 副标题（只有「共享音乐」有副标题） */
.music-headtitle{
	flex:1;min-width:0;text-align:center;
}
/* ⚠️ 这里的标题必须恢复成**普通流布局**：
   全局 .pub-title 为了整行居中改成了绝对定位（position:absolute + padding 66px），
   直接套在「标题 + 副标题」两行结构里，标题会脱离文档流盖住副标题（看起来就是"重叠"）。 */
.music-headtitle .pub-title{
	position:static;left:auto;right:auto;top:auto;bottom:auto;
	display:block;transform:none;padding:0;
	width:auto;height:auto;pointer-events:auto;
	font-size:16px;font-weight:600;line-height:1.2;text-align:center;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.music-subtitle{
	margin-top:1px;font-size:10.5px;line-height:1.3;
	color:var(--text-3);font-weight:400;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 刷新按钮在非「本地音乐」标签下用 visibility:hidden 占位，
   保证左右两侧宽度一致、标题始终真正居中（display:none 会让标题偏右 17px） */
#musicPage .pub-head .icon-btn{flex:0 0 auto;}

/* ================= 共享音乐 · 上传设置弹窗 ================= */
.ms-form{padding:14px 20px 18px;}
.ms-field{margin-bottom:12px;}
.ms-field label{display:block;margin-bottom:6px;font-size:12.5px;color:var(--text-3);}
.ms-field input{
	width:100%;height:38px;padding:0 12px;border-radius:9px;
	background:var(--bg);border:1px solid transparent;
	font-size:14px;color:var(--text);
}
.ms-field input:focus{outline:0;border-color:var(--brand-blue);background:var(--card);}

/* 下载方式：三选一 */
.ms-dl-opts{display:flex;gap:6px;}
.ms-dl-opt{
	flex:1;text-align:center;padding:8px 0;border-radius:9px;
	background:var(--bg);color:var(--text-2);font-size:12.5px;
}
.ms-dl-opt.on{background:var(--brand-blue);color:#fff;font-weight:600;}

.ms-tip{
	margin-top:2px;font-size:11.5px;line-height:1.6;color:var(--text-3);
}

/* 上传进度 */
.ms-prog{margin-top:12px;display:flex;align-items:center;gap:8px;}
.ms-prog-bar{
	flex:1;height:5px;border-radius:3px;background:var(--bg);overflow:hidden;
}
.ms-prog-bar i{
	display:block;height:100%;width:0;border-radius:3px;
	background:linear-gradient(90deg,#4FD1EF,#3D9BFF);
	transition:width .2s;
}
.ms-prog-txt{flex:0 0 auto;font-size:11.5px;color:var(--text-3);min-width:34px;text-align:right;}

.ms-ask-ok.ok-blue{color:var(--brand-blue);}

/* 共享列表：下载信息小字 + 下载按钮 */
.music-item-tag{
	margin-top:3px;font-size:10.5px;color:var(--text-3);
}
.music-item-tag.paid{color:#E8A33D;}
.music-item-tag.owned{color:#12A870;}
.ma-dl{background:#12A870;}

/* 上传进度：还没收到真实进度时用「流动」动画，避免进度条看着像卡住不动 */
.ms-prog.indeterminate .ms-prog-bar i{
	width:100% !important;
	background:linear-gradient(90deg,#CFE9F8,#4FD1EF,#3D9BFF,#4FD1EF,#CFE9F8);
	background-size:200% 100%;
	animation:msFlow 1.1s linear infinite;
}
@keyframes msFlow{from{background-position:0 0;}to{background-position:-200% 0;}}

/* 共享音乐：作者设了「不允许下载」→ 按钮锁住（灰色），点了提示 */
.ma-lock{background:#8A93A6;}

/* ==========================================================================
   泡泡市场（C2C）—— 列表 / 详情 / 发布 / 订单 / 地址
   颜色全走主题变量，深浅主题自动适配
   ========================================================================== */

/* ---------------- 列表页 ---------------- */
.mkt-head{
	flex:0 0 auto;padding:10px 14px 8px;background:var(--card);
	border-bottom:1px solid var(--line);
}
.mkt-cats{
	display:flex;gap:8px;margin-top:8px;padding-bottom:2px;
	overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
}
.mkt-cats::-webkit-scrollbar{display:none;}
.mkt-cat{
	flex:0 0 auto;padding:5px 12px;border-radius:14px;
	background:var(--bg);color:var(--text-2);font-size:12.5px;white-space:nowrap;
}
.mkt-cat.on{background:var(--brand-blue);color:#fff;font-weight:600;}
.mkt-body{padding-bottom:16px;}

/* 闲鱼式瀑布流：两列、图片按原比例（不等高），用 CSS 多列布局实现 */
.mkt-grid{
	column-count:2;column-gap:8px;
	display:block;
}
/* 网格里的空状态：column 布局下默认只占第一栏会偏左 → 跨两栏 + 居中 */
.mkt-grid .cm-empty{
	column-span:all;-webkit-column-span:all;
	text-align:center;padding:60px 0;
}
/* ⚠️ 只有 1~2 件商品时，多列布局（column-count）会"分不出栏"——
   内容高度不够撑满，两件全堆在第一栏里竖着排（安卓 WebView 上尤其明显）。
   这时候换成固定两栏 grid，两件商品左右并排；只剩一件时也是半屏宽，和瀑布流一致。
   class 由 market.js 的 renderList / renderCateList / openSeller 按条数切换。 */
.mkt-grid.mkt-grid-few{
	display:grid;column-count:auto;
	grid-template-columns:repeat(2,1fr);gap:8px;align-items:start;
}
.mkt-grid.mkt-grid-few > .mkt-card{margin-bottom:0;}
.mkt-card{
	display:inline-block;width:100%;margin-bottom:8px;
	break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
	background:var(--card);border-radius:10px;overflow:hidden;
}
.mkt-card:active{opacity:.92;}
.mkt-cover{
	position:relative;width:100%;background:var(--bg);line-height:0;
}
.mkt-cover img{width:100%;height:auto;display:block;}
.mkt-info{padding:7px 8px 9px;}
.mkt-title{
	font-size:13px;line-height:1.36;color:var(--text);
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* 标签行（成色 / 虚拟 / 已售完 / 已下架） */
.mkt-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px;}
.mkt-tag{
	font-size:10px;line-height:15px;padding:0 5px;border-radius:4px;
	color:#FF6A00;background:rgba(255,106,0,.10);
}
.mkt-tag.virtual{color:#12B7F5;background:rgba(18,183,245,.10);}
.mkt-tag.sold{color:#E0503A;background:rgba(224,80,58,.12);}
.mkt-tag.off{color:var(--text-3);background:var(--bg);}
/* 价格行：红色大号 + 右侧「N人想要」 */
.mkt-price-row{
	display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-top:4px;
}
.mkt-price{
	font-size:16.5px;font-weight:800;color:#FF4400;line-height:1.1;
	font-variant-numeric:tabular-nums;
}
.mkt-price i{font-style:normal;font-size:11px;font-weight:600;margin-right:1px;}
.mkt-want{font-size:10.5px;color:var(--text-3);white-space:nowrap;}
.mkt-user{
	margin-top:6px;display:flex;align-items:center;gap:4px;
	font-size:11px;color:var(--text-3);
}
.mkt-user .avatar{width:16px;height:16px;font-size:9px;border-radius:50%;}
.mkt-user span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mkt-user em{font-style:normal;flex:0 0 auto;font-size:10px;color:var(--text-3);}

/* ---------------- 详情页 ---------------- */
.mi-body{padding:0 0 12px;}
.mi-imgs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:10px 12px;background:var(--card);}
.mi-imgs::-webkit-scrollbar{display:none;}
.mi-imgs img{
	width:78%;max-width:280px;aspect-ratio:1/1;object-fit:cover;border-radius:12px;flex:0 0 auto;
	background:var(--bg);
}
.mi-main{padding:12px 14px;}
.mi-price{display:flex;align-items:baseline;gap:4px;}
.mi-price b{font-size:26px;font-weight:800;color:#FF5A32;line-height:1;}
.mi-price span{font-size:11px;color:#FF5A32;}
.mi-price i{
	margin-left:auto;font-style:normal;font-size:11px;color:var(--text-2);
	background:var(--bg);padding:3px 8px;border-radius:8px;
}
.mi-title{margin-top:8px;font-size:16px;font-weight:600;line-height:1.4;color:var(--text);}
.mi-meta{margin-top:8px;font-size:12px;color:var(--text-3);display:flex;gap:10px;flex-wrap:wrap;}
.mi-seller{
	margin-top:12px;display:flex;align-items:center;gap:10px;padding:10px 12px;
	background:var(--card);border-radius:12px;
}
/* 卖家头像可点 → 进对方店铺主页 */
.mi-seller .mi-seller-av{flex:0 0 auto;display:flex;}
#miSellerAv{cursor:pointer;}
#miSellerAv:active{opacity:.75;}
.mi-seller .avatar{width:38px;height:38px;font-size:17px;}
.mi-seller-main{flex:1;min-width:0;}
.mi-seller-name{font-size:14px;font-weight:600;color:var(--text);}
.mi-seller-sub{font-size:11px;color:var(--text-3);margin-top:2px;}
.mi-seller-go{font-size:12px;color:var(--brand-blue);}
.mi-desc{
	margin-top:12px;padding:12px;background:var(--card);border-radius:12px;
	font-size:14px;line-height:1.7;color:var(--text);white-space:pre-wrap;word-break:break-word;
}
.mi-tip{margin-top:12px;font-size:11.5px;color:var(--text-3);text-align:center;}
.mi-bar{
	flex:0 0 auto;display:flex;gap:10px;padding:8px 12px calc(8px + var(--safe-bottom));
	border-top:1px solid var(--line);background:var(--card);
}
.mi-chat{
	flex:0 0 auto;padding:0 18px;height:44px;border-radius:22px;
	background:var(--bg);color:var(--text-2);font-size:14px;
}
.mi-buy{
	flex:1;height:44px;border-radius:22px;background:#FF5A32;color:#fff;font-size:15px;font-weight:600;
}
.mi-buy:disabled{background:#C9D6E0;}

/* ---------------- 发布页 ---------------- */
.mp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.mp-ph,.mp-add{position:relative;height:0;padding-bottom:100%;border-radius:8px;overflow:hidden;}
.mp-ph{background:var(--bg);}
.mp-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.mp-ph .del{
	position:absolute;top:4px;right:4px;width:20px;height:20px;line-height:20px;text-align:center;
	border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-style:normal;
}
.mp-add{border:1px dashed #C8CDD6;background:var(--bg);}
.mp-add span{
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	font-size:26px;color:var(--text-3);
}
.mp-hint{margin:8px 2px 12px;font-size:11.5px;color:var(--text-3);}
.mp-input{
	width:100%;height:44px;border-radius:10px;background:var(--bg);
	padding:0 14px;font-size:14.5px;margin-bottom:10px;color:var(--text);border:0;outline:0;
}
.mp-textarea{
	width:100%;min-height:100px;border-radius:10px;background:var(--bg);
	padding:12px 14px;font-size:14px;line-height:1.6;color:var(--text);
	border:0;outline:0;resize:none;margin-bottom:10px;
}
.mp-row{
	display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;
	background:var(--bg);border-radius:10px;margin-bottom:10px;
}
.mp-row span{font-size:14px;color:var(--text-2);flex:0 0 auto;}
.mp-row input{flex:1;min-width:0;font-size:16px;font-weight:600;color:var(--text);border:0;outline:0;background:none;}
.mp-row i{font-style:normal;font-size:12px;color:var(--text-3);}
.mp-sec{margin:14px 2px 8px;font-size:12.5px;color:var(--text-2);}
.mp-chips{display:flex;gap:8px;flex-wrap:wrap;}
/* 成色 / 分类 / 类型 / 交易方式的选项：每个都要有描边（未选中灰边、选中主色边） */
.mp-chip{
	padding:7px 14px;border-radius:16px;background:var(--bg);color:var(--text-2);font-size:13px;
	border:1px solid var(--line);
}
.mp-chip.on{
	background:rgba(61,155,255,.10);color:var(--brand-blue);font-weight:600;
	border-color:var(--brand-blue);
}
.mp-tip{margin:16px 2px 8px;font-size:11.5px;color:var(--text-3);text-align:center;}

/* ---------------- 订单 ---------------- */
.mo-item{background:var(--card);border-radius:12px;padding:12px;margin-bottom:10px;}
.mo-top{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3);}
.mo-st{margin-left:auto;font-weight:600;color:var(--brand-blue);}
.mo-st.warn{color:#FF5A32;}
.mo-st.ok{color:#12A870;}
.mo-body{display:flex;gap:10px;margin-top:10px;}
.mo-cover{width:64px;height:64px;border-radius:8px;object-fit:cover;background:var(--bg);flex:0 0 auto;}
.mo-main{flex:1;min-width:0;}
.mo-title{font-size:14px;color:var(--text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mo-price{margin-top:4px;font-size:14px;font-weight:700;color:#FF5A32;}
.mo-sub{margin-top:4px;font-size:11.5px;color:var(--text-3);}
.mo-ops{display:flex;gap:8px;margin-top:10px;justify-content:flex-end;flex-wrap:wrap;}
.mo-btn{
	padding:7px 14px;border-radius:16px;background:var(--bg);color:var(--text-2);font-size:13px;
}
.mo-btn.primary{background:#FF5A32;color:#fff;font-weight:600;}
.mo-btn.line{border:1px solid var(--line);}

/* ---------------- 地址 ---------------- */
.ma-item{
	background:var(--card);border-radius:12px;padding:12px 14px;margin-bottom:10px;
}
.ma-line1{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);}
.ma-line1 b{font-weight:600;}
.ma-line1 span{font-size:12.5px;color:var(--text-2);}
.ma-tag{
	font-size:10px;padding:1px 6px;border-radius:6px;color:#0A7FE0;background:rgba(18,183,245,.12);
}
.ma-text{margin-top:6px;font-size:13px;color:var(--text-2);line-height:1.5;}
.ma-ops{display:flex;gap:14px;margin-top:8px;font-size:12px;color:var(--text-3);}
.ma-ops i{font-style:normal;}

/* ---------------- 市场 · 想要 / 评价 / 举报 ---------------- */
.mi-want{
	flex:0 0 auto;padding:0 14px;height:44px;border-radius:22px;
	background:var(--bg);color:var(--text-2);font-size:13.5px;
}
.mi-want.on{background:rgba(255,90,50,.12);color:#FF5A32;font-weight:600;}
.mi-report{
	margin-top:14px;text-align:center;font-size:12px;color:var(--text-3);
	text-decoration:underline;
}
.mi-comments{margin-top:12px;}
.mi-cm-head{
	display:flex;align-items:center;gap:8px;margin:0 2px 8px;
	font-size:13px;font-weight:600;color:var(--text);
}
.mi-cm-head span{font-size:12px;font-weight:400;color:var(--text-3);}
.mi-cm{
	background:var(--card);border-radius:12px;padding:10px 12px;margin-bottom:8px;
}
.mi-cm-top{display:flex;align-items:center;gap:8px;}
.mi-cm-top .avatar{width:24px;height:24px;font-size:12px;}
.mi-cm-name{font-size:12.5px;color:var(--text);}
.mi-cm-star{margin-left:auto;font-size:11px;color:#FFB300;letter-spacing:1px;}
.mi-cm-text{margin-top:6px;font-size:13px;line-height:1.6;color:var(--text-2);word-break:break-word;}
.mi-cm-time{margin-top:4px;font-size:11px;color:var(--text-3);}
/* ===== 商品评价（拼多多式）：评分汇总 + 分档条 + 筛选 chips ===== */
.mi-cm-loading,.cm-loading{text-align:center;color:var(--text-3);font-size:12px;padding:20px 0;}
.mi-cm-empty{text-align:center;color:var(--text-3);font-size:12.5px;padding:18px 0;}
.mi-cm-summary{
	display:flex;gap:16px;align-items:center;
	background:var(--card);border-radius:12px;padding:14px 16px;margin-bottom:10px;
}
.mi-cm-score{flex:0 0 auto;text-align:center;min-width:88px;}
.mi-cm-score b{font-size:30px;font-weight:700;color:#FF6A00;line-height:1;}
.mi-cm-score-sub{margin:4px 0 5px;font-size:11.5px;color:var(--text-3);}
.mi-cm-score-sub i{color:#FF6A00;font-style:normal;font-weight:600;}
.mi-cm-score .mi-cm-star{margin:0 auto;justify-content:center;}
.mi-cm-bars{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.mi-cm-bar-row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-3);}
.mi-cm-bar-row > span{flex:0 0 auto;width:28px;}
.mi-cm-bar{flex:1;height:6px;border-radius:3px;background:#F0F1F3;overflow:hidden;}
.mi-cm-bar > b{display:block;height:100%;border-radius:3px;}
.mi-cm-bar > b.good{background:#FF6A00;}
.mi-cm-bar > b.mid{background:#FFB020;}
.mi-cm-bar > b.bad{background:#B8BDC7;}
.mi-cm-bar-row > em{flex:0 0 auto;width:32px;text-align:right;font-style:normal;}
.mi-cm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 2px 10px;}
.mi-cm-chip{
	padding:5px 12px;border-radius:14px;font-size:12.5px;
	background:var(--card);color:var(--text-2);border:1px solid transparent;
}
.mi-cm-chip.on{background:rgba(255,106,0,.1);color:#FF6A00;border-color:rgba(255,106,0,.35);font-weight:600;}
.mi-cm-notext{color:var(--text-3);font-style:italic;}
/* 评价折叠「查看全部 / 收起」按钮 */
.mi-cm-more{
	display:flex;align-items:center;justify-content:center;gap:4px;
	width:100%;margin-top:4px;height:40px;border-radius:12px;
	background:var(--card);color:#FF6A00;font-size:13px;font-weight:500;border:0;
}
.mi-cm-more:active{background:rgba(255,106,0,.08);}
.mi-cm-more i{font-style:normal;transform:rotate(90deg);transition:transform .2s;}
.mi-cm-more i.up{transform:rotate(-90deg);}
/* ===== 商品评价独立页（#mktCmPage）：要盖在商品详情(210)之上 =====
   （游客态商品详情被 JS 抬到 440，评价页再由 JS 顶到 450） */
#mktCmPage{z-index:218;}
/* 右上角当前档位文字（按 A 方案：筛选只靠页面里的 chips，不做弹窗） */
.mcp-cm-cur{
	flex:0 0 auto;min-width:38px;padding:6px 2px;text-align:right;
	font-size:13px;color:var(--text-3);
}
/* 分档 chips：滚到顶部后吸住；左右补回 .pub-body 的 14px 内边距，整行铺满 */
#mcpCmChips{
	position:sticky;top:0;z-index:2;
	margin:0 -14px 10px;padding:8px 14px 6px;
	background:var(--card);
}
/* 评价星级选择 */
.mo-stars{display:flex;gap:10px;justify-content:center;padding:6px 0 2px;}
.mo-star{font-size:28px;line-height:1;color:#D8DDE3;}
.mo-star.on{color:#FFB300;}

/* ---------------- 市场 · 底部导航（闲鱼式） ---------------- */
.mkt-pane{flex:1;min-height:0;display:none;flex-direction:column;}
.mkt-pane.active{display:flex;}
/* 首页里的滚动区继续用 .pub-body（flex:1 + 自己滚） */
.mkt-pane > .pub-body{flex:1;min-height:0;}

.mkt-tabbar{
	flex:0 0 auto;position:relative;
	display:flex;align-items:flex-end;
	/* 和首页聊天界面的底部导航栏完全一致：
	   总高 = --bar-h（内容 48 + 离底留白 26 + 安全区），内容整体"往上抬" */
	height:var(--bar-h, calc(var(--tabbar-h, 48px) + 26px + var(--safe-bottom)));
	padding:0 4px calc(var(--bar-bottom-gap, 26px) + var(--safe-bottom));
	background:var(--card);border-top:1px solid var(--line);
}
.mkt-tab{
	flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;
	padding:0 0 2px;position:relative;color:var(--text-3);
}
.mkt-tab .ico{width:23px;height:23px;stroke-width:1.8;}
.mkt-tab span{font-size:10px;line-height:1;}
.mkt-tab.on{color:var(--brand-blue);}
.mkt-tab.on span{font-weight:600;}
.mkt-dot{
	position:absolute;top:2px;right:calc(50% - 18px);
	width:7px;height:7px;border-radius:50%;background:#FF3B30;
}
/* 中间凸起的发布按钮 */
.mkt-pub{
	flex:0 0 auto;width:52px;height:52px;margin:0 6px 0;
	align-self:flex-end;                     /* 贴住导航栏内容底边，顶部自然凸出 */
	border-radius:50%;background:linear-gradient(135deg,#FFB020,#FF7A18);
	color:#fff;display:flex;align-items:center;justify-content:center;
	box-shadow:0 6px 16px rgba(255,122,24,.42);
}
.mkt-pub .ico{width:26px;height:26px;stroke-width:2.4;color:#fff;}
.mkt-pub:active{transform:scale(.94);}

/* 分类宫格（3 列，图标在上、名字在下；分类多了也不会太高） */
.mkt-cate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:6px 0 4px;}
.mkt-cate-card{
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
	padding:12px 6px;background:var(--card);border-radius:14px;
}
.mkt-cate-card:active{transform:scale(.985);}
.mkt-cate-ico{
	width:36px;height:36px;border-radius:12px;flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;
	background:var(--bg);
}
.mkt-cate-name{font-size:12.5px;font-weight:600;color:var(--text);text-align:center;line-height:1.2;}
.mkt-cate-tip{margin:14px 2px 0;font-size:11.5px;color:var(--text-3);text-align:center;}

/* 我的：三格统计 */
.mkt-me-stats{display:flex;margin:12px 0 0;background:var(--card);border-radius:12px;padding:12px 0;}
.mkt-me-stat{flex:1;text-align:center;}
.mkt-me-stat b{display:block;font-size:17px;color:var(--text);}
.mkt-me-stat span{font-size:11.5px;color:var(--text-3);}
.mkt-me-stat + .mkt-me-stat{border-left:1px solid var(--line);}
.mkt-me-stat:active{opacity:.7;}

/* 消息待办卡 */
.mkt-msg-card{
	display:flex;align-items:center;gap:12px;padding:14px;
	background:var(--card);border-radius:14px;margin-bottom:10px;
}
.mkt-msg-ico{
	width:40px;height:40px;border-radius:12px;flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;font-size:19px;background:var(--bg);
}
.mkt-msg-main{flex:1;min-width:0;}
.mkt-msg-title{font-size:14px;font-weight:600;color:var(--text);}
.mkt-msg-sub{font-size:11.5px;color:var(--text-3);margin-top:3px;}
.mkt-msg-n{
	flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
	background:#FF3B30;color:#fff;font-size:11.5px;line-height:20px;text-align:center;
}

/* 市场图标统一尺寸（SVG，不用 emoji） */
.mkt-cate-ico svg{width:20px;height:20px;color:var(--brand-blue);}
.mkt-msg-ico svg{width:20px;height:20px;color:var(--text-2);}
.mkt-noimg{
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	color:var(--text-3);
}
.mkt-noimg svg{width:30px;height:30px;}

/* 市场 · SVG 图标尺寸（想要爱心 / 评价星星） */
.mi-want{display:inline-flex;align-items:center;gap:4px;}
.mi-want svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;}
.mi-want.on svg{fill:currentColor;}
.mi-cm-star{display:inline-flex;align-items:center;gap:1px;margin-left:auto;}
.mi-cm-star svg{width:11px;height:11px;fill:none;stroke:#FFB300;stroke-width:1.6;}
.mi-cm-star svg.on{fill:#FFB300;}
.mo-star{display:inline-flex;align-items:center;justify-content:center;color:#D8DDE3;}
.mo-star svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;}
.mo-star.on{color:#FFB300;}
.mo-star.on svg{fill:#FFB300;}

/* ---------------- 市场 · 排序 / 价格区间 / 搜索历史 ---------------- */
.mkt-sorts{
	display:flex;gap:6px;margin-top:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.mkt-sorts::-webkit-scrollbar{display:none;}
.mkt-sort{
	flex:0 0 auto;padding:5px 11px;border-radius:12px;
	background:transparent;color:var(--text-3);font-size:12px;white-space:nowrap;
	border:1px solid var(--line);
}
.mkt-sort.on{background:rgba(18,183,245,.12);color:var(--brand-blue);border-color:rgba(18,183,245,.35);font-weight:600;}
.mkt-hist{
	display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;padding-top:8px;
	border-top:1px dashed var(--line);
}
.mkt-hist-chip{
	padding:4px 10px;border-radius:11px;background:var(--bg);color:var(--text-2);font-size:12px;
	max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mkt-hist-clear{color:var(--text-3);font-size:12px;padding:4px 6px;text-decoration:underline;}

/* ---------------- 聊天内商品卡片 / 发送到聊天 ---------------- */
.mkt-card-thumb{
	width:46px;height:46px;border-radius:8px;object-fit:cover;flex:0 0 auto;
	background:var(--bg);
}
.mkt-bubble .dice-card-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mkt-share-list{max-height:44vh;overflow-y:auto;margin:-4px 0 0;}
.mkt-share-row{
	display:flex;align-items:center;gap:10px;padding:11px 2px;
	border-bottom:1px solid var(--line);
}
.mkt-share-row:last-child{border-bottom:0;}
.mkt-share-name{flex:1;min-width:0;font-size:14px;color:var(--text);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mkt-share-go{font-size:12px;color:var(--brand-blue);flex:0 0 auto;}

/* ---------------- 市场 · 搜索页 / 批量管理 / 复制 ---------------- */
.mkt-search-entry{cursor:pointer;}
.mkt-search-entry span{flex:1;min-width:0;font-size:14px;color:var(--text-3);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ms-sec{margin-bottom:22px;}
.ms-head{display:flex;align-items:center;justify-content:space-between;
	font-size:13px;font-weight:600;color:var(--text);}
.ms-clear{font-size:12px;font-weight:400;color:var(--text-3);text-decoration:underline;}
.ms-hot{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:10px;}
.ms-hot-card{background:var(--card);border-radius:12px;overflow:hidden;}
.ms-hot-card img{width:100%;height:0;padding-bottom:100%;object-fit:cover;display:block;background:var(--bg);}
.ms-hot-noimg{position:relative;width:100%;height:90px;display:flex;align-items:center;justify-content:center;color:var(--text-3);background:var(--bg);}
.ms-hot-noimg svg{width:28px;height:28px;}
.ms-hot-title{margin:6px 8px 0;font-size:12.5px;color:var(--text);line-height:1.35;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ms-hot-price{margin:4px 8px 8px;font-size:13px;font-weight:700;color:#FF5A32;}

/* 我发布的：工具条 + 批量 */
.mkt-own-bar{
	display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:8px 12px;
	background:var(--card);border-radius:10px;
}
.mkt-own-tip{flex:1;font-size:12.5px;color:var(--text-2);}
.mkt-own-btn{
	padding:6px 12px;border-radius:14px;background:var(--bg);color:var(--text-2);font-size:12.5px;
}
.mkt-chk{
	position:absolute;right:6px;top:6px;z-index:2;
	width:20px;height:20px;border-radius:50%;
	background:rgba(255,255,255,.85);border:1.5px solid rgba(0,0,0,.25);
}
.mkt-chk.on{background:#12B7F5;border-color:#12B7F5;}
.mkt-chk.on::after{
	content:"";position:absolute;left:6px;top:2.5px;width:5px;height:10px;
	border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}
.mkt-card.sel{box-shadow:0 0 0 2px #12B7F5;}
.mkt-batchbar{
	position:fixed;left:0;right:0;z-index:260;
	bottom:var(--bar-h, calc(var(--tabbar-h, 48px) + 26px + var(--safe-bottom)));  /* 停在底部导航上方 */
	display:flex;gap:8px;padding:10px 12px;
	background:var(--card);border-top:1px solid var(--line);
}
.mkt-batch-btn{
	flex:1;height:38px;border-radius:19px;background:var(--bg);color:var(--text-2);font-size:13px;
}
.mkt-batch-btn.danger{background:rgba(224,80,58,.12);color:#E0503A;}
/* 订单里的「复制」小字 */
.mo-copy{color:var(--brand-blue);text-decoration:underline;margin-left:4px;}

/* ---------------- 闲鱼式 · 我的页订单五宫格 ---------------- */
.mkt-order-card{background:var(--card);border-radius:12px;margin-top:12px;padding:12px 6px 14px;}
.mkt-order-head{
	display:flex;align-items:center;justify-content:space-between;
	padding:0 10px 10px;font-size:14px;font-weight:600;color:var(--text);
	border-bottom:1px solid var(--line);margin-bottom:10px;
}
.mkt-order-all{font-size:12px;font-weight:400;color:var(--text-3);}
.mkt-order-grid{display:flex;}
.mkt-order-cell{
	flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
	padding:4px 0;
}
.mkt-order-cell:active{opacity:.7;}
.mkt-oc-ico{color:var(--text-2);line-height:0;}
.mkt-oc-ico svg{width:24px;height:24px;stroke-width:1.6;}
.mkt-oc-txt{font-size:11px;color:var(--text-2);}
.mkt-oc-n{
	position:absolute;top:-2px;right:calc(50% - 22px);
	min-width:16px;height:16px;padding:0 4px;border-radius:8px;
	background:#FF3B30;color:#fff;font-size:10.5px;line-height:16px;text-align:center;
	font-style:normal;display:none;
}
.mkt-oc-n.show{display:block;}

/* 详情页：闲鱼式价格区 */
.mi-price i.cur{font-style:normal;font-size:15px;font-weight:700;color:#FF4400;margin-right:1px;}
.mi-price b{color:#FF4400;}
.mi-want-line{margin-top:6px;font-size:12px;color:var(--text-3);}
.mi-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.mi-tag{
	font-size:11px;line-height:18px;padding:0 7px;border-radius:5px;
	color:#FF6A00;background:rgba(255,106,0,.10);
}
.mi-tag.gray{color:var(--text-2);background:var(--bg);}

/* ---------------- 闲鱼式 · 首页推荐/最新 + 卖家主页 + 包邮标签 ---------------- */
.mkt-feed-tabs{display:flex;gap:20px;margin-top:10px;padding-left:2px;}
.mkt-feed-tab{
	font-size:15px;color:var(--text-3);padding-bottom:2px;position:relative;
}
.mkt-feed-tab.on{color:var(--text);font-weight:700;}
.mkt-feed-tab.on::after{
	content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;
	width:16px;height:3px;border-radius:2px;background:#FF6A00;
}
.mkt-tag.free{color:#12A870;background:rgba(18,168,112,.12);}
.mkt-tag.gray{color:var(--text-3);background:var(--bg);}

/* 卖家主页 */
.mkt-seller-head{
	display:flex;align-items:center;gap:12px;padding:14px 4px 10px;
}
.mkt-seller-head .avatar{width:52px;height:52px;font-size:24px;}
.mkt-seller-info{flex:1;min-width:0;}
.mkt-seller-name{font-size:16px;font-weight:600;color:var(--text);}
.mkt-seller-meta{margin-top:4px;font-size:12px;color:var(--text-3);}
.mkt-seller-chat{
	flex:0 0 auto;padding:7px 14px;border-radius:16px;
	background:var(--bg);color:var(--text-2);font-size:12.5px;
}
.mkt-seller-stats{
	display:flex;background:var(--card);border-radius:12px;padding:12px 0;
}
.mkt-seller-stat{flex:1;text-align:center;}
.mkt-seller-stat b{display:block;font-size:16px;color:var(--text);}
.mkt-seller-stat span{font-size:11px;color:var(--text-3);}
.mkt-seller-stat + .mkt-seller-stat{border-left:1px solid var(--line);}

/* ---------------- 市场 · 留言 / 原价划线 / 图片排序 ---------------- */
.mi-origin{
	margin-left:8px;font-style:normal;font-size:13px;font-weight:400;
	color:var(--text-3);text-decoration:line-through;
}
.mkt-origin{
	display:block;font-style:normal;font-size:10.5px;font-weight:400;
	color:var(--text-3);text-decoration:line-through;line-height:1.2;
}
/* 留言区 */
.mi-msgs{margin-top:14px;}
.mi-msg{
	background:var(--card);border-radius:10px;padding:9px 11px;margin-bottom:8px;
}
.mi-msg-name{font-size:12.5px;color:var(--text);font-weight:500;}
.mi-msg-tag{
	font-style:normal;font-size:9.5px;margin-left:4px;padding:0 4px;border-radius:4px;
	color:#FF6A00;background:rgba(255,106,0,.12);vertical-align:1px;
}
.mi-msg-time{float:right;font-size:11px;color:var(--text-3);}
.mi-msg-text{margin-top:4px;font-size:13px;line-height:1.6;color:var(--text-2);word-break:break-word;}
.mi-msg-input{
	display:flex;gap:8px;align-items:center;margin-top:8px;
}
.mi-msg-input input{
	flex:1;min-width:0;height:38px;border-radius:19px;background:var(--bg);
	padding:0 14px;font-size:13.5px;color:var(--text);border:0;outline:0;
}
.mi-msg-send{
	flex:0 0 auto;height:38px;padding:0 16px;border-radius:19px;
	background:var(--brand-blue);color:#fff;font-size:13.5px;
}
/* 发布页图片左右移动 */
.mp-ph .mv{
	position:absolute;bottom:4px;width:20px;height:20px;line-height:18px;text-align:center;
	border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-style:normal;
}
.mp-ph .mv.l{left:4px;}
.mp-ph .mv.r{right:4px;}

/* 市场 · 卖家主页「关注」按钮 */
.mkt-seller-follow{
	flex:0 0 auto;padding:7px 14px;border-radius:16px;
	background:linear-gradient(135deg,#FF8A3D,#FF5A2E);color:#fff;font-size:12.5px;font-weight:600;
}
.mkt-seller-follow.on{background:var(--bg);color:var(--text-3);font-weight:400;}
.mkt-seller-follow:active{opacity:.9;}

/* ==========================================================================
   泡泡市场 · 独立配色（不跟随基础主题 / 深色主题 / 装扮主题 / 自定义主题）
   --------------------------------------------------------------------------
   做法和游戏页一致：
     ① 在 .mkt-theme 上把全局主题变量重置成「闲鱼风」固定值（浅灰底 + 橙色主色）
        —— 这样所有用 var(--card/--bg/--text/--brand-blue) 的组件自动变成市场配色
     ② 主题里直接写死颜色的地方（深色主题顶栏、自定义主题的半透明卡片…）
        用「.pub-page.mkt-theme 后代」+ !important 压回去
        （类数 3 > 主题规则的 1~2，且都带 !important 时按优先级决胜）
   ========================================================================== */
.pub-page.mkt-theme{
	--bg:#F4F5F7;
	--card:#FFFFFF;
	--line:#EDEEF0;
	--press:#F2F3F5;
	--text:#1A1A1A;
	--text-2:#6B7280;
	--text-3:#9AA0A6;
	--brand-blue:#FF6A00;
	--brand-blue-d:#E85D00;
	--qq-grad:linear-gradient(135deg,#FF8A3D,#FF5A2E);
	--red:#FF3B30;
	/* 聊天 / 气泡类变量也压住，避免零星元素透出主题色 */
	--chat-bg:#F4F5F7;
	--chat-head-bg:#FFFFFF;
	--chat-body-bg:transparent;
	--bsender-bg:#FF6A00;
	--bsender-fg:#FFFFFF;
	--bd-bg:#FFFFFF;
	--bd-fg:#1A1A1A;

	background:#F4F5F7 !important;
	color:var(--text);
	font-family:-apple-system,"PingFang SC","Helvetica Neue",Roboto,"Microsoft YaHei",sans-serif;
}
/* 顶栏 / 正文 / 标题 / 按钮：主题写死的颜色在这里统一压回亮色 */
.pub-page.mkt-theme .pub-head{
	background:#FFFFFF !important;
	border-bottom-color:#EDEEF0 !important;
}
.pub-page.mkt-theme .pub-head::after{background:#EDEEF0 !important;}
.pub-page.mkt-theme .pub-title{color:#1A1A1A !important;}
.pub-page.mkt-theme .icon-btn{color:#6B7280 !important;}
.pub-page.mkt-theme .icon-btn:active{background:#F2F3F5 !important;}
.pub-page.mkt-theme .text-btn{color:#6B7280 !important;}
.pub-page.mkt-theme .pub-submit{background:#FF6A00 !important;color:#FFFFFF !important;}
.pub-page.mkt-theme .pub-submit:disabled{background:#FFC7A8 !important;}
.pub-page.mkt-theme .pub-body{background:transparent !important;}
/* 卡片 / 列表行 / 订单 tab / 搜索框 */
.pub-page.mkt-theme .set-group{background:#FFFFFF !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
.pub-page.mkt-theme .set-row{background:transparent !important;}
.pub-page.mkt-theme .set-label{color:#1A1A1A !important;}
.pub-page.mkt-theme .set-value{color:#9AA0A6 !important;}
.pub-page.mkt-theme .set-arrow{color:#C4C9D0 !important;}
.pub-page.mkt-theme .cm-empty{color:#9AA0A6 !important;}
.pub-page.mkt-theme .mine-tabs{background:#F4F5F7 !important;}
.pub-page.mkt-theme .mine-tab{color:#6B7280 !important;}
.pub-page.mkt-theme .mine-tab.on{background:#FFFFFF !important;color:#1A1A1A !important;box-shadow:0 1px 3px rgba(16,24,40,.08) !important;}
.pub-page.mkt-theme .mine-tab.on .mine-num{color:#FF6A00 !important;}
.pub-page.mkt-theme .music-search{background:#F4F5F7 !important;}
.pub-page.mkt-theme .music-search span,
.pub-page.mkt-theme .music-search input{color:#9AA0A6 !important;}
.pub-page.mkt-theme .ms-head{color:#1A1A1A !important;}
.pub-page.mkt-theme .ms-clear{color:#9AA0A6 !important;}
/* 市场所有输入框统一描边（搜索 / 发布商品 / 商品留言） */
.pub-page.mkt-theme .music-search,
.pub-page.mkt-theme .mp-input,
.pub-page.mkt-theme .mp-textarea,
.pub-page.mkt-theme .mp-row,
.pub-page.mkt-theme .mi-msg-input input{
	border:1px solid #D8DCE2;
}
/* 市场自己的弹窗（挂在 body 下，不在 .pub-page 里，单独钉住） */
#mktDlg .ms-ask-box{background:#FFFFFF !important;color:#1A1A1A !important;}
#mktDlg .ms-ask-title{color:#1A1A1A !important;}
#mktDlg .ms-tip{color:#9AA0A6 !important;}
#mktDlg .ms-field label{color:#6B7280 !important;}
#mktDlg .ms-field input{background:#F4F5F7 !important;color:#1A1A1A !important;border-color:#D8DCE2 !important;}
#mktDlg .ms-ask-cancel{background:#F4F5F7 !important;color:#6B7280 !important;}
#mktDlg .ms-ask-ok{color:#FF6A00 !important;}
/* 批量操作条（fixed 在 body 下） */
#mktBatchBar{background:#FFFFFF !important;border-top-color:#EDEEF0 !important;}
#mktBatchBar .mkt-batch-btn{background:#F4F5F7 !important;color:#6B7280 !important;}
#mktBatchBar .mkt-batch-btn.danger{background:rgba(255,59,48,.10) !important;color:#FF3B30 !important;}

/* ---------------- 市场 · 消息页（聊天会话列表） ---------------- */
.mkt-chat-list{display:flex;flex-direction:column;}
/* 左滑删除：外层 .mkt-swipe 裁切，行在上面（白底）滑开露出右侧红色「删除」 */
.mkt-swipe{position:relative;overflow:hidden;background:#F4F5F7;}
.mkt-chat-row{
	display:flex;align-items:center;gap:10px;padding:11px 4px;
	border-bottom:1px solid #F0F1F3;
	position:relative;z-index:1;background:#F4F5F7;   /* 白/底色盖住下面的删除按钮 */
	will-change:transform;
}
.mkt-swipe-del{
	position:absolute;top:0;right:0;bottom:0;width:84px;z-index:0;
	display:flex;align-items:center;justify-content:center;
	background:#FF3B30;color:#fff;font-size:14px;font-weight:500;
	border:0;border-bottom:1px solid #F0F1F3;
}
.mkt-swipe-del:active{background:#E5342B;}
.mkt-chat-row:active{background:#F7F8FA;}
.mkt-chat-row .avatar{width:44px;height:44px;font-size:20px;}
.mkt-chat-main{flex:1;min-width:0;}
.mkt-chat-top{display:flex;align-items:center;gap:6px;}
.mkt-chat-name{
	flex:1;min-width:0;font-size:14.5px;color:#1A1A1A;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mkt-chat-n{
	min-width:17px;height:17px;padding:0 5px;border-radius:9px;flex:0 0 auto;
	background:#FF3B30;color:#fff;font-size:10.5px;line-height:17px;text-align:center;font-style:normal;
}
.mkt-chat-time{flex:0 0 auto;font-size:11px;color:#9AA0A6;font-style:normal;}
.mkt-chat-desc{
	margin-top:3px;font-size:12.5px;color:#9AA0A6;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------------- 市场 · 售后（拼多多式） ---------------- */
/* 售后类型选择：两张卡片（仅退款 / 退货退款） */
.as-kinds{display:flex;gap:8px;margin:2px 0 4px;}
.as-kind{
	flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;
	padding:10px 12px;border-radius:12px;background:var(--card);
	border:1px solid transparent;
}
.as-kind b{font-size:13.5px;font-weight:600;color:var(--text);}
.as-kind em{font-style:normal;font-size:11px;color:var(--text-3);line-height:1.4;}
.as-kind.on{background:rgba(255,106,0,.08);border-color:rgba(255,106,0,.38);}
.as-kind.on b{color:#FF6A00;}
.as-kind.off{opacity:.45;}

/* 凭证图：3 列小方图 + 加号 */
.as-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.as-ph,.as-add{position:relative;height:0;padding-bottom:100%;border-radius:9px;overflow:hidden;}
.as-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.as-ph .del{
	position:absolute;top:3px;right:3px;width:19px;height:19px;line-height:19px;text-align:center;
	border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-style:normal;
}
.as-add{
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
	background:var(--bg);border:1px dashed #C8CDD6;color:var(--text-3);font-size:16px;
}
.as-add span{font-size:10.5px;}
.as-tip{margin-top:12px;font-size:11.5px;line-height:1.7;color:var(--text-3);}

/* 售后详情：顶部状态条 */
.as-head{border-radius:14px;padding:14px 16px;background:var(--card);margin-bottom:10px;}
.as-head-st{font-size:17px;font-weight:700;color:var(--text);}
.as-head-tip{margin-top:5px;font-size:12.5px;line-height:1.6;color:var(--text-2);}
.as-head.as-ok{background:linear-gradient(135deg,rgba(47,184,110,.14),rgba(47,184,110,.05));}
.as-head.as-ok .as-head-st{color:#2FB86E;}
.as-head.as-warn{background:linear-gradient(135deg,rgba(255,106,0,.13),rgba(255,106,0,.04));}
.as-head.as-warn .as-head-st{color:#FF6A00;}
.as-head.as-off .as-head-st{color:var(--text-2);}

/* 售后信息行 */
.as-info{margin-top:10px;background:var(--card);border-radius:12px;padding:4px 14px;}
.as-row{
	display:flex;align-items:flex-start;gap:12px;padding:10px 0;font-size:13px;
	border-bottom:1px solid var(--line);
}
.as-row:last-child{border-bottom:0;}
.as-row > span{flex:0 0 auto;color:var(--text-3);}
.as-row > b{flex:1;min-width:0;text-align:right;font-weight:500;color:var(--text);word-break:break-word;}

/* 售后进度时间线 */
.as-tl-title{margin:16px 2px 8px;font-size:13px;font-weight:600;color:var(--text);}
.as-tl{background:var(--card);border-radius:12px;padding:12px 14px 4px;}
.as-tl-row{position:relative;display:flex;gap:10px;padding:0 0 14px;}
.as-tl-row:last-child{padding-bottom:10px;}
.as-tl-dot{
	position:relative;flex:0 0 auto;width:8px;height:8px;margin-top:5px;border-radius:50%;
	background:#FF6A00;
}
/* 竖线（最后一行不画） */
.as-tl-row:not(:last-child) .as-tl-dot::after{
	content:"";position:absolute;left:3px;top:12px;width:1px;height:calc(100% + 8px);
	background:var(--line);
}
.as-tl-main{flex:1;min-width:0;}
.as-tl-text{font-size:13px;line-height:1.55;color:var(--text-2);word-break:break-word;}
.as-tl-time{margin-top:3px;font-size:11px;color:var(--text-3);}
/* 售后里的商品卡（复用订单卡样式，去掉外边距） */
#asOrder .mo-body{padding:0;}

/* 售后三个页面：给个比 .pub-page(210) 高的默认层级兜底
   （真正打开时 JS 还会按 aboveZ() 再往上抬，这里防止"被订单页盖住"） */
#mktAsListPage{z-index:216;}
#mktAsPage{z-index:217;}
#mktAsDetailPage{z-index:217;}

/* ===== 服务通知 / 泡泡支付：微信「服务通知」那种卡片（不是普通文字气泡） ===== */
/* 卡片占满可用宽度（头像那点之外），不再受 72% 气泡宽度限制 */
.msg.svc-msg .msg-col{max-width:100%;flex:1;min-width:0;align-items:stretch;}
.svc-card{
	width:100%;max-width:100%;
	padding:0;overflow:hidden;
	border:1px solid var(--line);border-radius:12px;
	background:var(--card);color:var(--text);
	box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.svc-head{
	display:flex;align-items:center;gap:6px;
	padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--line);
}
.svc-ico{display:flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--brand-blue);}
.svc-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.svc-name{font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:.2px;}
.svc-time{margin-left:auto;font-size:11px;color:var(--text-3);}
.svc-body{padding:10px 12px 12px;}
.svc-title{font-size:14px;font-weight:600;color:var(--text);line-height:1.4;margin-bottom:6px;}
.svc-line{font-size:13px;line-height:1.65;color:var(--text-2);word-break:break-word;}
.svc-line + .svc-line{margin-top:2px;}
/* 明细超过 4 行 → 默认只显示前 4 行，点卡片展开 */
.svc-card:not(.open) .svc-body .svc-line:nth-child(n+5){display:none;}
.svc-foot{padding:0 12px 10px;font-size:12px;color:var(--brand-blue);}
.svc-foot:active{opacity:.7;}

/* ===== 表情面板：三个分类 tab（小黄脸 / 官方表情 / 我的表情） ===== */
.emoji-tabs{display:flex;gap:6px;padding:10px 12px 0;flex:0 0 auto;overflow-x:auto;}
.emoji-tabs::-webkit-scrollbar{display:none;}
.emoji-tab{
	flex:0 0 auto;padding:5px 12px;border-radius:14px;font-size:12.5px;
	color:var(--text-2);background:var(--bg);white-space:nowrap;
}
.emoji-tab.on{background:rgba(61,155,255,.12);color:var(--brand-blue);font-weight:600;}
.emoji-tab i{font-style:normal;margin-left:4px;font-size:11px;color:var(--text-3);}
/* 小黄脸：一行 8 个文字表情 */
.emoji-grid.faces{grid-template-columns:repeat(8,1fr);gap:2px;padding-top:8px;}
.emoji-cell.face{height:40px;font-size:24px;line-height:1;cursor:pointer;}
.emoji-cell.face:active{transform:scale(.9);}
/* 我的表情：右上角删除按钮 + 末尾「＋ 添加」 */
.emoji-cell.mine{position:relative;}
.emoji-cell.mine .del{
	position:absolute;top:-3px;right:-3px;width:18px;height:18px;line-height:17px;text-align:center;
	border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-style:normal;
}
.emoji-cell.add{
	flex-direction:column;gap:2px;border-radius:10px;cursor:pointer;
	background:var(--bg);border:1px dashed #C8CDD6;color:var(--text-3);font-size:20px;
}
.emoji-cell.add span{font-size:10px;}

/* ================= 共享应用（应用中心 → 用户上传分享） ================= */
/* 共享应用：分区标题（官方应用 / 用户分享） */
.as-sec{margin:2px 2px 8px;font-size:12.5px;color:var(--text-2);font-weight:600;}
/* 官方应用卡片（置顶） */
.as-page{z-index:216;display:flex;flex-direction:column;}
/* 首页 / 我的 两个视图（只有一个显示） */
.as-view{flex:1;display:flex;flex-direction:column;min-height:0;}
/* 首页顶部分类：全部 / 最新 / 热门 */
.as-search{
	display:flex;align-items:center;gap:7px;flex:0 0 auto;
	margin:10px 14px 0;padding:0 12px;height:38px;
	background:var(--bg);border-radius:19px;
}
.as-search .ico{width:17px;height:17px;flex:0 0 auto;color:var(--text-3);stroke-width:2;}
.as-search input{
	flex:1;min-width:0;height:100%;border:0;background:none;outline:0;
	font-size:14px;color:var(--text);
}
.as-search input::placeholder{color:var(--text-3);}
.as-kw-x{
	flex:0 0 auto;width:18px;height:18px;border-radius:9px;
	background:rgba(0,0,0,.18);color:#fff;font-style:normal;
	font-size:11px;line-height:18px;text-align:center;
}
.as-cats{
	display:flex;align-items:center;gap:8px;flex:0 0 auto;
	padding:10px 14px 8px;border-bottom:1px solid var(--line);
}
.as-cat{
	padding:6px 15px;border-radius:16px;font-size:13.5px;
	background:var(--bg);color:var(--text-2);
}
.as-cat.on{background:var(--brand-blue);color:#fff;font-weight:600;}
/* 底部标签栏：首页 / 我的 */
.as-tabbar{
	flex:0 0 auto;display:flex;height:54px;
	background:var(--card);border-top:1px solid var(--line);
	padding-bottom:var(--safe-bottom);
}
.as-tb{
	flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
	background:none;border:0;color:var(--text-3);font-size:11px;
}
.as-tb .ico{width:22px;height:22px;stroke-width:1.7;}
.as-tb.on{color:var(--brand-blue);}
.as-tb.on .ico{stroke-width:2;}
/* 应用卡片 */
.as-card{
	display:flex;gap:12px;padding:14px;margin-bottom:10px;
	background:var(--card);border-radius:14px;
}
.as-ico{
	width:54px;height:54px;border-radius:14px;flex:0 0 auto;overflow:visible;
	display:flex;align-items:center;justify-content:center;
	font-size:26px;color:#fff;position:relative;
}
/* ⚠️ 图标本身要在内层裁圆角 —— 外层 overflow 改成 visible 了（要给名次徽章留位置） */
.as-ico > img,
.as-ico > span{
	width:100%;height:100%;border-radius:14px;object-fit:cover;
	display:flex;align-items:center;justify-content:center;overflow:hidden;
}
/* 下载排行徽章（前三名）：贴在图标左上角**内侧**（图标 overflow:hidden，不能伸出去） */
.as-rank{
	position:absolute;left:0;top:0;z-index:2;
	font-style:normal;font-size:11px;font-weight:700;line-height:1;
	min-width:20px;height:20px;padding:0 5px;border-radius:0 0 8px 0;
	display:flex;align-items:center;justify-content:center;
	color:#fff;letter-spacing:.2px;
	box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.as-rank.r1{background:linear-gradient(135deg,#FFD24A,#F0A020);}   /* 金 */
.as-rank.r2{background:linear-gradient(135deg,#CBD5E1,#95A3B6);}   /* 银 */
.as-rank.r3{background:linear-gradient(135deg,#E8A97A,#C97B45);}   /* 铜 */
.as-main{flex:1;min-width:0;}
.as-name{font-size:15px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px;}
.as-tag{
	font-style:normal;font-size:10px;font-weight:400;padding:1px 6px;border-radius:5px;
	color:var(--text-3);background:var(--bg);
}
.as-sub{margin-top:3px;font-size:11.5px;color:var(--text-3);}
.as-desc{margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--text-2);word-break:break-word;}
.as-foot{display:flex;align-items:center;gap:10px;margin-top:9px;}
.as-num{font-size:11.5px;color:var(--text-3);margin-right:auto;}
.as-btn{
	height:32px;padding:0 16px;border-radius:16px;border:0;
	background:var(--brand-blue);color:#fff;font-size:13px;font-weight:600;
}
.as-btn.pay{background:linear-gradient(120deg,#FFB020,#FF7A18);}
.as-btn.ghost{background:var(--bg);color:var(--text-3);font-weight:400;}
.as-btn:disabled{opacity:.7;}

/* ---- 「我的」页顶部：我要分享 ---- */
.as-share{
	display:flex;align-items:center;gap:12px;
	padding:14px;margin-bottom:14px;border-radius:14px;
	background:linear-gradient(135deg,#EAF3FF,#F3F8FF);
	border:1px solid rgba(18,150,220,.16);
}
.as-share:active{background:#E2EDFF;}
.as-share-ico{
	width:42px;height:42px;border-radius:12px;flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;
	background:var(--brand-blue);color:#fff;
}
.as-share-ico .ico{width:22px;height:22px;stroke-width:2.3;}
.as-share-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.as-share-main b{font-size:15px;font-weight:600;color:#22303F;}
.as-share-main i{font-style:normal;font-size:11.5px;line-height:1.45;color:var(--text-2);
	overflow:hidden;text-overflow:ellipsis;}
.as-share-go{
	flex:0 0 auto;height:29px;padding:0 14px;border-radius:15px;
	display:flex;align-items:center;
	background:var(--qq-grad);color:#fff;font-size:13px;
}

/* ---- 上传页：应用截图（最多 3 张） ---- */
.as-shot-row{display:flex;gap:8px;margin-top:8px;}
.as-shot{
	width:78px;height:78px;border-radius:10px;flex:0 0 auto;
	background:var(--bg);border:1px dashed #D5DAE2;
	display:flex;align-items:center;justify-content:center;
	position:relative;overflow:hidden;
}
.as-shot.add{color:var(--text-3);font-size:26px;font-weight:300;}
.as-shot.add:active{background:#EDF1F6;}
.as-shot.has{border:0;}
.as-shot img{width:100%;height:100%;object-fit:cover;display:block;}
.as-shot-x{
	position:absolute;right:3px;top:3px;width:18px;height:18px;
	border-radius:9px;background:rgba(0,0,0,.55);color:#fff;
	font-style:normal;font-size:11px;line-height:18px;text-align:center;
}
.as-shot-tip{margin-top:7px;font-size:11.5px;line-height:1.5;color:var(--text-3);}

/* ---- 卡片里展示的应用截图（点一下看大图） ---- */
.as-shots{display:flex;gap:6px;margin-top:8px;}
.as-shots img{
	width:66px;height:66px;border-radius:8px;object-fit:cover;
	background:var(--bg);display:block;
}
.as-shots img:active{opacity:.8;}
.as-ops{display:flex;gap:14px;margin-top:8px;font-size:12px;color:var(--text-3);}
.as-op{text-decoration:underline;}
.as-op.danger{color:#E0503A;}
.as-off{margin-top:6px;font-size:11.5px;color:#E0503A;}
/* 上传页 */
.as-pick{
	margin-top:6px;padding:22px 14px;border-radius:14px;text-align:center;
	background:var(--bg);border:1px dashed #C8CDD6;
}
.as-pick b{display:block;font-size:14px;color:var(--text);}
.as-pick span{display:block;margin-top:4px;font-size:11.5px;color:var(--text-3);}
.as-field{margin-top:12px;}
.as-field label{display:block;margin-bottom:5px;font-size:12.5px;color:var(--text-3);}
.as-field input{
	width:100%;height:44px;padding:0 12px;border-radius:10px;
	background:var(--bg);border:1px solid var(--line);color:var(--text);font-size:14px;
}
.as-sec{margin:16px 2px 8px;font-size:12.5px;color:var(--text-2);}
.as-chips{display:flex;gap:8px;flex-wrap:wrap;}
.as-chip{
	padding:7px 14px;border-radius:16px;font-size:13px;
	background:var(--bg);color:var(--text-2);border:1px solid var(--line);
}
.as-chip.on{background:rgba(61,155,255,.10);color:var(--brand-blue);border-color:var(--brand-blue);font-weight:600;}
.as-tip{margin-top:16px;font-size:11.5px;line-height:1.7;color:var(--text-3);}

/* 共享应用 · 详情弹层（点卡片打开） */
.as-mask{
	position:fixed;inset:0;z-index:255;background:rgba(0,0,0,.42);
	opacity:0;visibility:hidden;transition:opacity .2s;
}
.as-mask.show{opacity:1;visibility:visible;}
.as-sheet{
	position:fixed;left:0;right:0;bottom:0;z-index:256;max-height:80vh;overflow-y:auto;
	background:var(--card);border-radius:18px 18px 0 0;
	padding:18px 16px calc(18px + var(--safe-bottom));
	transform:translateY(102%);transition:transform .26s cubic-bezier(.32,.72,.28,1);
}
.as-sheet.show{transform:none;}
.as-sheet-head{display:flex;align-items:center;gap:12px;}
.as-sheet-name{
	flex:1;min-width:0;font-size:17px;font-weight:700;color:var(--text);
	display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.as-sheet-x{
	width:30px;height:30px;border-radius:50%;flex:0 0 auto;
	background:var(--bg);color:var(--text-3);font-size:14px;
}
.as-sheet-info{margin-top:14px;}
.as-sheet-row{
	display:flex;gap:12px;padding:9px 0;font-size:13px;
	border-bottom:1px solid var(--line);
}
.as-sheet-row:last-child{border-bottom:0;}
.as-sheet-row span{flex:0 0 76px;color:var(--text-3);}
.as-sheet-row b{flex:1;min-width:0;font-weight:500;color:var(--text);word-break:break-word;}
.as-sheet-desc{margin-top:8px;font-size:13px;line-height:1.7;color:var(--text-2);word-break:break-word;white-space:pre-wrap;}
.as-sheet-sec{margin:16px 2px 0;font-size:12.5px;font-weight:600;color:var(--text-2);}
.as-sheet-btns{display:flex;gap:10px;margin-top:18px;}
.as-sheet-btns .as-btn{flex:1;height:44px;border-radius:22px;font-size:15px;}
/* 付费应用（还没买）：详情页里说明「不提供试用」，只能先购买 */
.as-pay-tip{
	margin-top:14px;padding:9px 12px;border-radius:10px;
	background:rgba(255,171,64,.12);color:#C97B12;
	font-size:12.5px;line-height:1.6;
}
html[data-theme="dark"] .as-pay-tip{background:rgba(255,171,64,.14);color:#F0B45E;}

/* 共享应用 · 上传页「应用介绍」多行输入 + 剩余字数 */
.as-textarea{
	width:100%;min-height:92px;padding:10px 12px;border-radius:10px;
	background:var(--bg);border:1px solid var(--line);color:var(--text);
	font-size:14px;line-height:1.6;font-family:inherit;resize:none;outline:0;
}
.as-textarea::placeholder{color:var(--text-3);}
.as-count{margin-top:5px;font-size:11.5px;color:var(--text-3);text-align:right;}
.as-count.warn{color:#E8A33D;}
.as-count.full{color:#E0503A;}
/* 列表卡片里的介绍最多两行（详情页才是全文） */
.as-desc{
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* 共享应用 · 上传页「应用图标」选择 */
.as-icon-pick{
	display:flex;align-items:center;gap:12px;padding:10px;
	border-radius:12px;background:var(--bg);border:1px dashed #C8CDD6;
}
.as-icon-pick:active{opacity:.85;}
.as-icon-box{
	width:54px;height:54px;border-radius:14px;flex:0 0 auto;overflow:hidden;
	display:flex;align-items:center;justify-content:center;
	background:#4EA8FF;color:#fff;font-size:26px;
}
.as-icon-box img{width:100%;height:100%;object-fit:cover;}
.as-icon-tip{flex:1;min-width:0;font-size:12px;line-height:1.5;color:var(--text-3);}

/* 共享应用 · 上传页顶部的每日额度提示 */
.as-quota{
	margin:0 2px 10px;font-size:12.5px;line-height:1.6;color:var(--text-3);
}
.as-quota.full{color:#E0503A;}

/* 共享应用 · 上传进度条 */
.as-prog{
	position:relative;margin-top:14px;height:26px;border-radius:13px;overflow:hidden;
	background:var(--bg);border:1px solid var(--line);
}
.as-prog > i{
	position:absolute;left:0;top:0;bottom:0;width:0;
	background:linear-gradient(90deg,#37B6FF,#2E8BFF);
	transition:width .18s linear;
}
.as-prog > span{
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	font-size:12px;color:var(--text);font-weight:600;
}
/* 「我的」：下载保存位置行 + 下载记录 */
.as-row{
	display:flex;align-items:center;gap:8px;padding:14px;margin-bottom:10px;
	background:var(--card);border-radius:12px;font-size:14px;
}
.as-row > span{flex:1;color:var(--text);}
.as-row > b{font-weight:400;font-size:12.5px;color:var(--text-3);max-width:58%;text-align:right;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.as-row > i{font-style:normal;color:var(--text-3);}
.as-row:active{opacity:.85;}
.as-sec2{
	display:flex;align-items:center;justify-content:space-between;
	margin:16px 2px 8px;font-size:12.5px;font-weight:600;color:var(--text-2);
}
.as-clear{font-weight:400;font-size:12px;color:var(--text-3);text-decoration:underline;}
.as-rec{
	padding:11px 12px;margin-bottom:8px;border-radius:10px;
	background:var(--card);display:flex;align-items:center;gap:10px;
}
.as-rec-name{flex:1;min-width:0;font-size:13px;color:var(--text);display:flex;align-items:center;gap:6px;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.as-rec-time{flex:0 0 auto;font-size:11.5px;color:var(--text-3);}

/* 共享应用 · 居中弹窗（下载目录选择用，不从底部弹） */
.as-dialog{
	position:fixed;left:50%;top:50%;z-index:256;
	width:calc(100% - 56px);max-width:400px;
	transform:translate(-50%,-46%);opacity:0;visibility:hidden;
	background:var(--card);border-radius:16px;padding:18px 16px;
	box-shadow:0 24px 64px rgba(0,0,0,.26);
	transition:transform .2s cubic-bezier(.32,.72,.28,1),opacity .2s,visibility .2s;
}
.as-dialog.show{transform:translate(-50%,-50%);opacity:1;visibility:visible;}
.as-dlg-title{font-size:16px;font-weight:700;color:var(--text);text-align:center;}
.as-dlg-cur{margin-top:8px;font-size:12.5px;color:var(--text-3);text-align:center;line-height:1.5;word-break:break-all;}
.as-dlg-btns{display:flex;flex-direction:column;gap:9px;margin-top:16px;}
.as-dlg-btn{
	height:44px;border-radius:12px;border:0;cursor:pointer;
	background:var(--brand-blue);color:#fff;font-size:14px;font-weight:600;font-family:inherit;
}
.as-dlg-btn.ghost{background:var(--bg);color:var(--text-2);font-weight:400;border:1px solid var(--line);}
.as-dlg-btn:active{opacity:.88;}
/* 下载记录里的实时进度条 */
.as-mini{
	margin-top:7px;height:6px;border-radius:3px;background:var(--bg);
	overflow:hidden;
}
.as-mini > i{
	display:block;height:100%;width:0;
	background:linear-gradient(90deg,#37B6FF,#2E8BFF);
	transition:width .2s linear;
}

/* 共享应用 · 下载记录条目（名称/时间 + 安装按钮） */
.as-rec-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.as-rec-btn{
	flex:0 0 auto;height:30px;padding:0 14px;border-radius:15px;border:0;
	background:var(--brand-blue);color:#fff;font-size:12.5px;font-weight:600;
}
.as-rec-btn:active{opacity:.85;}
/* 下载记录条目里的名称不要拉伸（父级是 column 布局） */
.as-rec-main .as-rec-name{flex:none;}
.as-rec-main .as-rec-time{flex:none;}

/* 引用块可点：图片 → 看大图；文字 → 跳到原消息并高亮 */
.msg-quote{cursor:pointer;transition:background .15s;}
.msg-quote:active{background:#E6E9EE;}
[data-theme="dark"] .msg-quote:active{background:#232A36;}

/* ==========================================================================
   音乐播放页 · 旋律可视化（背景柱状频谱 + 节拍光晕 + 随歌换色）
   —— 音频是原生播放，WebView 拿不到真实频谱，所以用多路相位的波形模拟"跟着旋律跳"
   —— 颜色由 js/music.js 按歌曲算一个色相，写进 --pl-h，整页跟着变
   ========================================================================== */
.player-page{
	overflow:hidden;
	/* 纯黑背景（不再是随歌换色的径向渐变） */
	background:#000;
}
.player-main{position:relative;}

/* ---- 歌词区：3 行窗口，当前行高亮并滚到中间，上下淡出 ---- */
.pl-lyrics{
	position:relative;z-index:1;flex:0 0 auto;
	height:96px;margin-top:22px;overflow:hidden;
	-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 76%,transparent 100%);
	mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 76%,transparent 100%);
}
.pl-lyr-inner{transition:transform .28s ease;will-change:transform;}
.pl-lyr-line{
	position:relative;
	height:32px;line-height:32px;text-align:center;
	font-size:13.5px;color:rgba(255,255,255,.36);
	overflow:hidden;white-space:nowrap;
	transition:color .22s ease, font-size .22s ease, opacity .22s ease, letter-spacing .22s ease;
}
/* 当前行：**放大 + 变白 + 微光**（行级；不加左右扫光） */
.pl-lyr-line.on{
	color:#FFFFFF;
	font-size:17px;
	font-weight:600;
	letter-spacing:.4px;
	text-shadow:0 0 12px hsla(var(--pl-h,200),100%,74%,.45);
}
.pl-lyr-line.empty{color:rgba(255,255,255,.34);font-size:13px;line-height:96px;}

/* 矮屏（小手机 / 分屏）：唱片缩小、歌词只留 2 行，别把底部控制键挤出屏幕 */
@media (max-height:680px){
	.player-disc{width:min(52vw,180px);height:min(52vw,180px);}
	.player-info{margin-top:18px;}
	.pl-lyrics{height:64px;margin-top:14px;}
	.pl-lyr-line.empty{line-height:64px;}
	.player-seek-row{margin-top:16px;}
}

/* 底部那条「跳动的彩色柱状频谱」已按需求删除（.pl-vis 规则一并移除） */
/* 唱片后面的呼吸光晕 */
.pl-glow{
	position:absolute;left:50%;top:34%;
	width:74vw;height:74vw;max-width:380px;max-height:380px;
	transform:translate(-50%,-50%);border-radius:50%;
	background:radial-gradient(circle, hsla(var(--pl-h,200), 90%, 62%, .5) 0%, transparent 62%);
	filter:blur(20px);opacity:.7;pointer-events:none;z-index:0;
	transition:opacity .35s;
}
.pl-glow.beat{opacity:1;}

/* 上面这些之外的内容都盖在可视化之上 */
.player-disc,.player-info,.pl-lyrics,.player-seek-row,.player-seek,.player-ctrl{position:relative;z-index:1;}

/* 唱片 / 中间圆点 / 播放键 / 进度条都跟着主题色发光 */
.player-disc{
	box-shadow:0 20px 44px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.07),
		0 0 60px hsla(var(--pl-h,200), 90%, 60%, .22);
}
.player-disc-inner{
	background:linear-gradient(135deg,
		hsl(var(--pl-h,200) 92% 62%),
		hsl(calc(var(--pl-h,200) + 40) 88% 56%));
	box-shadow:0 6px 18px hsla(var(--pl-h,200), 88%, 55%, .45);
}
.pl-play{background:linear-gradient(135deg,#fff, hsl(var(--pl-h,200) 90% 92%));}
.player-seek-bar{
	background:linear-gradient(90deg,
		hsl(var(--pl-h,200) 92% 66%),
		hsl(calc(var(--pl-h,200) + 50) 90% 60%));
}
.player-seek-dot{box-shadow:0 2px 8px hsla(var(--pl-h,200), 90%, 60%, .6);}

/* ===== 市场底部导航 · 数字角标（消息未读 / 我的待办） ===== */
.mkt-tab .mkt-num{
	position:absolute;top:-2px;right:calc(50% - 24px);
	min-width:16px;height:16px;padding:0 4px;border-radius:8px;box-sizing:border-box;
	background:#FF3B30;color:#fff;font-size:10.5px;line-height:16px;
	font-style:normal;font-weight:600;text-align:center;
	box-shadow:0 1px 4px rgba(255,59,48,.45);
}

/* 共享应用 · 购买弹窗里的支付密码输入框 */
.as-dlg-input{
	width:100%;height:44px;margin-top:14px;padding:0 14px;border-radius:12px;box-sizing:border-box;
	background:var(--bg);border:1px solid var(--line);color:var(--text);
	font-size:16px;letter-spacing:4px;text-align:center;font-family:inherit;
}
.as-dlg-input::placeholder{letter-spacing:0;font-size:13px;color:var(--text-3);}

/* ===== 充值方式图标：SVG（票券 = 兑换码，二维码 = 微信扫码） ===== */
.rc-ico{color:#FF8A00;background:#FFF4E6;}
.rc-ico.wx{color:#07C160;background:#E7F8EC;}
.rc-ico .ico{
	width:22px;height:22px;
	fill:none;stroke:currentColor;stroke-width:1.8;
	stroke-linecap:round;stroke-linejoin:round;
}

/* 提现账户图标配色：微信绿 / 支付宝蓝（SVG 线条，走 currentColor） */
.rc-ico.alipay{color:#1677FF;background:#EAF1FF;}
/* ================= 在线音乐（music.js 新增 tab） =================
   榜单切换 chips + 提示小字。列表行复用 .music-item / .share-list 的样式，
   只是**不带 .music-swipe** —— 在线列表没有左滑操作，别误触手势。 */
.ol-chips{
	display:flex;gap:8px;padding:2px 10px 6px;
	overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.ol-chips::-webkit-scrollbar{display:none;}
.ol-chip{
	flex:0 0 auto;padding:6px 14px;border:1px solid var(--line);border-radius:999px;
	background:var(--card);color:var(--text-2);font-size:12.5px;font-family:inherit;
}
.ol-chip.on{background:var(--brand-blue);border-color:transparent;color:#fff;}
.ol-chip:active{opacity:.75;}
.ol-tip{
	padding:0 12px 6px;font-size:12px;color:var(--text-3);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#onlineList{display:flex;flex-direction:column;gap:2px;padding-bottom:8px;}
#onlineList .music-item{cursor:pointer;}

/* ================= 泡泡签到 / 等级（星 → 月 → 日 → 冠） =================
   侧边栏顶部那一条 + 签到卡弹窗。逻辑见 js/sign.js。 */
/* 侧边栏签到条：独占抽屉顶部一整行（flex 换行 → flex:0 0 100%），
   以前塞在 .drawer-info 里只有 ~90px 宽，「今天已签到 · 连续 N 天」会被省略号吃掉。 */
.sign-bar{
	flex:0 0 100%;display:flex;align-items:center;gap:10px;
	padding:9px 11px;border-radius:12px;
	background:rgba(255,255,255,.10);
}
.sign-bar:active{background:rgba(255,255,255,.16);}
.sb-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.sb-lv{display:flex;align-items:center;gap:5px;font-size:13px;color:#fff;}
.sb-lv b{font-weight:600;}
.sb-tip{font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.72);word-break:break-word;}
.sb-go{
	flex:0 0 auto;height:26px;padding:0 12px;border-radius:13px;
	display:flex;align-items:center;font-size:12px;font-weight:600;
	background:#12B7F5;color:#fff;
}
.sb-go.done{background:rgba(255,255,255,.18);color:rgba(255,255,255,.75);}
.sign-icon{font-size:14px;letter-spacing:-1px;}

/* 遮罩 */
.sign-mask{
	position:fixed;inset:0;z-index:560;background:rgba(10,16,28,.5);
	opacity:0;visibility:hidden;transition:.24s;
}
.sign-mask.show{opacity:1;visibility:visible;}

/* 卡片本体 */
.sign-card{
	position:fixed;left:50%;top:50%;z-index:561;
	width:88%;max-width:340px;padding:0;
	border-radius:22px;background:var(--card);overflow:hidden;
	transform:translate(-50%,-50%) scale(.94);
	opacity:0;visibility:hidden;transition:.24s cubic-bezier(.2,.9,.3,1.06);
	box-shadow:0 22px 54px rgba(8,20,40,.32);
}
.sign-card.show{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible;}

/* ---------- 主卡：顶部渐变英雄区 ---------- */
.sc-hero{
	position:relative;overflow:hidden;padding:14px 16px 26px;color:#fff;
	background:linear-gradient(135deg,#18C0F2 0%,#3D7DFF 58%,#7A5CFF 100%);
}
.sc-hero::after{
	content:"";position:absolute;right:-36px;top:-48px;width:136px;height:136px;border-radius:50%;
	background:radial-gradient(circle,rgba(255,255,255,.34),rgba(255,255,255,0) 70%);
	pointer-events:none;
}
.sc-hero::before{
	content:"";position:absolute;left:-30px;bottom:-58px;width:124px;height:124px;border-radius:50%;
	background:rgba(255,255,255,.10);pointer-events:none;
}
.sc-hero-top{position:relative;z-index:1;display:flex;align-items:center;gap:8px;}
.sc-hero-title{flex:1;min-width:0;font-size:15px;font-weight:600;letter-spacing:.3px;}
.sc-help{
	flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;
	height:26px;padding:0 11px;border-radius:13px;
	border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.16);
	color:#fff;font-size:12px;font-family:inherit;line-height:1;
}
.sc-help:active{background:rgba(255,255,255,.32);}
.sc-help i{font-style:normal;font-size:12px;opacity:.9;}
.sc-x{
	flex:0 0 auto;width:26px;height:26px;border:0;border-radius:13px;
	background:none;color:rgba(255,255,255,.85);font-size:15px;line-height:1;
}
.sc-x:active{background:rgba(255,255,255,.18);}
/* 等级 + 星星：星星单独占一行（和资料卡一致），不再用大图标块 */
.sc-hero-main{
	position:relative;z-index:1;
	display:flex;flex-direction:column;align-items:flex-start;gap:4px;
	padding:12px 2px 0;
}
.sc-lvnum{
	font-size:26px;font-weight:700;line-height:1.1;letter-spacing:.4px;
	text-shadow:0 2px 8px rgba(0,0,0,.12);
}
.sc-lvnum em{font-style:normal;font-size:15px;font-weight:600;opacity:.85;margin-right:2px;}
.sc-stars{display:flex;align-items:center;min-height:17px;}
.sc-stars .sign-icon{font-size:16px;letter-spacing:-2px;line-height:1;}
.sc-vip{
	display:inline-block;margin-top:2px;padding:4px 8px;border-radius:8px;
	background:rgba(255,255,255,.20);color:#fff;
	font-size:11px;line-height:1;
}

/* ---------- 主体 ---------- */
.sc-body{position:relative;z-index:2;margin-top:-16px;padding:0 14px 14px;}

/* 悬浮进度卡 */
.sc-prog{
	padding:12px 14px;border-radius:16px;
	background:var(--card);border:1px solid var(--line);
	box-shadow:0 8px 20px rgba(17,40,80,.10);
}
.sc-nums{
	display:flex;justify-content:space-between;align-items:baseline;gap:8px;
	font-size:12px;color:var(--text-3);
}
.sc-nums b{color:var(--text);font-size:14px;}
.sc-bar{margin:8px 0 7px;height:8px;border-radius:5px;overflow:hidden;background:var(--bg);}
.sc-bar i{
	display:block;height:100%;border-radius:5px;
	background:linear-gradient(90deg,#12B7F5,#5B7CFF);
	box-shadow:0 0 8px rgba(24,150,255,.45);
	transition:width .35s ease;
}
.sc-next{text-align:center;font-size:11.5px;color:var(--text-3);}
.sc-next b{color:var(--brand-blue);}

/* 三格数据 */
.sc-stat{display:flex;gap:8px;margin-top:12px;}
.sc-stat-i{flex:1;padding:9px 2px;border-radius:13px;background:var(--bg);text-align:center;}
.sc-stat-i b{display:block;font-size:16px;font-weight:700;line-height:1.2;color:var(--text);}
.sc-stat-i span{display:block;margin-top:3px;font-size:11px;color:var(--text-3);}

/* 底部动作 */
.sc-act{margin-top:13px;}
.sc-gain{
	display:flex;align-items:center;justify-content:center;gap:6px;
	margin-bottom:10px;font-size:12.5px;color:var(--text-2);
}
.sc-gain b{color:var(--brand-blue);font-size:15px;}
.sc-gain i{
	font-style:normal;padding:3px 7px;border-radius:8px;
	background:rgba(255,122,24,.12);color:#FF7A18;font-size:11px;
}
.sc-btn{
	display:block;width:100%;height:46px;border:0;border-radius:23px;
	background:linear-gradient(135deg,#18C0F2,#3D7DFF);
	color:#fff;font-size:15.5px;font-weight:600;font-family:inherit;
	box-shadow:0 10px 22px rgba(56,124,255,.32);
	transition:transform .15s ease;
}
.sc-btn:active{transform:scale(.985);}
.sc-btn:disabled{opacity:.7;box-shadow:none;transform:none;}
.sc-done{
	display:flex;align-items:center;justify-content:center;gap:6px;
	height:46px;border-radius:23px;background:var(--bg);
	color:#2FA84F;font-size:14px;font-weight:500;
}

/* ---------- 规则说明页 ---------- */
.sc-rulehead{
	display:flex;align-items:center;gap:8px;
	padding:14px 14px 16px;color:#fff;
	background:linear-gradient(135deg,#18C0F2,#3D7DFF 70%);
}
.sc-rulehead .sc-rt{flex:1;min-width:0;font-size:15px;font-weight:600;}
.sc-back{
	flex:0 0 auto;display:inline-flex;align-items:center;height:26px;padding:0 10px;
	border-radius:13px;border:1px solid rgba(255,255,255,.34);
	background:rgba(255,255,255,.16);color:#fff;font-size:12px;font-family:inherit;line-height:1;
}
.sc-back:active{background:rgba(255,255,255,.32);}
.sc-rule{
	max-height:min(66vh,470px);overflow-y:auto;-webkit-overflow-scrolling:touch;
	padding:14px 16px 16px;font-size:13px;line-height:1.7;color:var(--text-2);
}
.sc-sec{padding:12px 13px;border-radius:14px;background:var(--bg);margin-bottom:10px;}
.sc-sec:last-child{margin-bottom:0;}
.sc-sec h4{margin:0 0 7px;font-size:13.5px;font-weight:600;color:var(--text);}
.sc-rule p{margin:0 0 6px;}
.sc-rule p:last-child{margin-bottom:0;}
.sc-rule b{color:var(--text);font-weight:600;}
.sc-rule .muted{color:var(--text-3);font-size:12.5px;}
.sc-kv{
	display:flex;justify-content:space-between;align-items:baseline;gap:10px;
	padding:4px 0;font-size:12.5px;
}
.sc-kv + .sc-kv{border-top:1px dashed var(--line);}
.sc-kv b{color:var(--brand-blue);font-weight:600;}
.sc-icons{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0;}
.sc-icons span{
	padding:4px 8px;border-radius:8px;background:var(--card);
	color:var(--text-2);font-size:12px;
}
.sc-lvtab{width:100%;border-collapse:collapse;margin-top:4px;font-size:12.5px;}
.sc-lvtab th{
	text-align:left;padding:5px 6px;border-bottom:1px solid var(--line);
	font-weight:500;color:var(--text-3);
}
.sc-lvtab td{padding:5px 6px;border-bottom:1px dashed var(--line);color:var(--text-2);}
.sc-lvtab td:first-child{color:var(--text);font-weight:600;}
.sc-lvtab tr:last-child td{border-bottom:0;}
.sc-lvtab tr.on td{background:rgba(18,183,245,.10);}
html[data-theme="dark"] .sc-prog{box-shadow:0 8px 20px rgba(0,0,0,.42);}


/* 签到等级小图标（星月日冠）：跟在昵称后面，字号收一点、别把行高撑开 */
.lv-badge{
	font-style:normal;display:inline-flex;align-items:center;
	font-size:11px;line-height:1;letter-spacing:-1px;
	margin-left:4px;vertical-align:middle;
	opacity:.95;
}
.chat-title .lv-badge,
.pc-lv .lv-badge{font-size:14px;margin-left:0;letter-spacing:-1px;}
.msg-name .lv-badge{font-size:10.5px;margin-left:3px;}

/* ==========================================================================
   音乐模块（本地音乐 / 共享 / 在线 / 个人中心 + 全屏播放页）
   **不受「装扮主题」和「自定义主题」影响**（2026-10 需求）
   ---------------------------------------------------------------------------
   为什么需要：自定义主题会往 :root 写 --brand-blue / --text* 等变量（带 !important），
   还会给 .pub-page 铺背景（图片 / 渐变）、给 .pub-head 加毛玻璃 —— 结果音乐页
   被染成用户的主题配色，图片背景透过列表也糊得看不清。
   做法：在 #musicPage / #playerPage 作用域里把这一套变量**重新定死**
   （ID 选择器 + !important，优先级高于 :root 的 !important 变量和 .pub-page 规则）。
   ⚠️ 只保留「深色模式」这一个全局外观开关（那是系统级偏好，不是装扮）；
      以后音乐页要加颜色，请直接用下面这几个变量，别再引用别的主题变量。
   ========================================================================== */
#musicPage, #playerPage{
	--brand-blue:#12B7F5;
	--brand-blue-d:#0AA5E0;
	--qq-grad:linear-gradient(135deg,#12B7F5,#0AA5E0);
	--bg:#F2F3F5;
	--card:#FFFFFF;
	--line:#EDEEF0;
	--text:#1A1A1A;
	--text-2:#8A8F99;
	--text-3:#B8BDC7;
}
/* 深色模式仍然生效 */
html[data-theme="dark"] #musicPage,
html[data-theme="dark"] #playerPage{
	--brand-blue:#3D9BFF;
	--brand-blue-d:#2E86E0;
	--bg:#0E1116;
	--card:#171B21;
	--line:#262C35;
	--text:#CFD4DB;
	--text-2:#98A0AB;
	--text-3:#6D7580;
}
/* 背景定死：音乐列表页用纯色底（不铺自定义背景图 / 渐变），播放页纯黑 */
html #musicPage.pub-page{background:var(--bg,#F2F3F5) !important;}
html #playerPage.pub-page{background:#000 !important;}

/* 自定义主题的「毛玻璃 / 半透明」也别加到音乐页的栏上 */
html #musicPage .pub-head,
html #musicPage .music-head,
html #musicPage .music-bar,
html #musicPage .music-tabbar{
	backdrop-filter:none !important;
	-webkit-backdrop-filter:none !important;
}
html #musicPage .pub-head{background:var(--card,#fff) !important;}
html #musicPage .music-head{background:var(--card,#fff) !important;border-bottom:1px solid var(--line) !important;}
html #musicPage .music-bar{background:var(--card,#fff) !important;}
html #musicPage .music-tabbar{background:var(--card,#fff) !important;}