/* ================= 基础 ================= */
: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;
}
/* 每个视图是 flex 列：顶栏固定，列表区域自己滚动 */
.view{
	flex:1;min-height:0;display:none;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:#4A4F57;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;
}
/* 换头像弹窗里的「从相册选图 / 恢复 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:#8A8F99;}
.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 的底色缝（漏边） */
}
.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:#5A6069;}

/* 字母分组 */
.group-head{
	padding:5px 14px;font-size:12px;color:var(--text-2);background:var(--bg);
	position:sticky;top:0;z-index:3;
}

/* 字母索引条 */
.alpha-bar{
	position:fixed;right:3px;top:50%;transform:translateY(-50%);
	display:none;flex-direction:column;align-items:center;z-index:20;
	padding:6px 5px;border-radius:14px;background:rgba(255,255,255,.6);
}
.alpha-bar.show{display:flex;}
.alpha-bar span{font-size:10px;color:var(--text-2);line-height:1.25;padding:0 1px;}

/* ================= 动态（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:#2B2F36;line-height:1.5;white-space:pre-wrap;}
.moment-imgs{display:grid;gap:5px;margin-top:8px;}
.moment-imgs.g1{grid-template-columns:1fr;width:160px;max-width:100%;}
.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:auto;min-height:160px;max-height:320px;}
/* 单图动态小图：默认宽 160px，高度随比例在 160~320 之间；横图/超长图居中裁切，小图放大到 160。
   单图且宽高比超过 1.2:1（横屏截图）或 1:1.2（竖屏截图）时，JS 会给容器加 wide 类，宽度放宽到 320px。*/
.moment-imgs.g1 .ph img{width:160px;max-width:100%;height:auto;min-height:160px;max-height:320px;object-fit:cover;display:block;}
.moment-imgs.g1.wide-h{width:320px;}
.moment-imgs.g1.wide-v{width:fit-content;max-width:100%;}
.moment-imgs.g1.wide-h .ph,
.moment-imgs.g1.wide-v .ph{min-height:0;max-height:none;}
.moment-imgs.g1.wide-h .ph img{width:320px;height:auto;min-height:0;max-height:320px;object-fit:contain;}
.moment-imgs.g1.wide-v .ph img{width:auto;height:320px;min-height:0;max-height:320px;object-fit:contain;}
.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:#8A8F99;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:#3B5670;}
.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:#2B2F36;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:linear-gradient(135deg,#12B7F5 0%,#5B7CFF 55%,#8A6BFF 100%);
	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:#5A6069;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:#2B2F36;
	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:linear-gradient(120deg,#12B7F5,#5B7CFF);
	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:linear-gradient(135deg,#12B7F5 0%,#4F7BFF 55%,#8A6BFF 100%);
	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);}
.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);}
/* 会员等级选择卡 */
.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:#9AA0A8;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 .25s;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(--card);z-index:100;transform:translateX(-100%);
	transition:transform .28s cubic-bezier(.32,.72,.28,1);
	display:flex;flex-direction:column;overflow-y:auto;
}
.drawer.open{transform:translateX(0);box-shadow:2px 0 18px rgba(0,0,0,.18);}
.drawer-head{
	display:flex;align-items:center;gap:12px;
	padding:calc(26px + var(--safe-top)) 18px 18px;
	background:linear-gradient(135deg,#12B7F5,#4E8CF7);
}
.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:-14px 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:#F6F7F9;}
.drawer-item .qi{font-size:18px;width:24px;text-align:center;}

/* 抽屉底部：退出登录 */
.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:#2B2F36;
	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;
	transform:translateX(100%);transition:transform .26s cubic-bezier(.32,.72,.28,1);
}
.pub-page.open{transform:none;visibility:visible;}
.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);
}
.pub-title{flex:1;text-align:center;font-size:16px;font-weight:600;}
.text-btn{font-size:15px;color:#4A4F57;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;-webkit-overflow-scrolling:touch;padding:14px 14px calc(14px + var(--safe-bottom));}
#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);}
.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:#8A8F99;}
.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:#2B2F36;}
.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;background:#EDEFF2;
	display:flex;flex-direction:column;
	transform:translateX(100%);transition:transform .26s cubic-bezier(.32,.72,.28,1);
	visibility:hidden;
}
/* 键盘弹出时（.kb-mode 由 JS 添加）：页面高度被压到可视区高度，
   flex 布局自动保持顶部标题栏在最上方不动、输入栏紧贴键盘上方，
   高度过渡让上浮过程顺滑 */
.chat-page.kb-mode{
	transition:transform .26s cubic-bezier(.32,.72,.28,1), height .22s ease-out, top .22s ease-out;
}
.chat-page.open{transform:translateX(0);visibility:visible;}
.chat-head{
	flex:0 0 auto;display:flex;align-items:center;gap:6px;
	padding:calc(8px + var(--safe-top)) 8px 8px 4px;
	background:var(--card);border-bottom:1px solid var(--line);
	position:relative;   /* 让 .chat-title 能相对头部绝对居中 */
}
/* 右侧按钮组：靠右（配合名字绝对居中） */
.chat-head-right{margin-left:auto;display:flex;align-items:center;gap:6px;flex:0 0 auto;}
/* 返回键未读角标：他人在我聊天时发来的新消息数 */
#chatBack{position:relative;}
.back-badge{
	position:absolute;top:-3px;right:-4px;min-width:17px;height:17px;padding:0 4px;
	background:var(--red);color:#fff;font-size:10.5px;line-height:17px;text-align:center;
	border-radius:9px;font-style:normal;font-weight:500;box-sizing:border-box;
	box-shadow:0 0 0 1.5px var(--card);pointer-events:none;
}
.chat-title{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;line-height:1.2;max-width:58%;}
.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{position:absolute;left:100%;margin-left:6px;white-space:nowrap;font-size:11px;color:var(--text-3);}
.chat-body{
	flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 12px 16px;
}
.chat-time{text-align:center;font-size:11px;color:#9AA0A8;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:#9AA0A8;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:10px;font-size:15px;line-height:1.45;
	background:var(--card);color:var(--text);word-break:break-word;position:relative;
}
.msg.me{flex-direction:row-reverse;}
.msg.me .msg-bubble{background:var(--brand-blue);color:#fff;}
.chat-input{
	flex:0 0 auto;display:flex;align-items:center;gap:6px;
	padding:8px 10px calc(8px + var(--safe-bottom));
	background:var(--card);border-top:1px solid var(--line);
}
.chat-input .icon-btn{width:32px;height:32px;color:#6B7178;}
.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);}

.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;}
/* 本地已有登录态：首屏就不显示登录页（避免打开 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;}
.login-brand{text-align:center;padding-bottom:26px;margin-top:auto;}
.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:#1C2A3A;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;
}
.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:linear-gradient(120deg,#12B7F5 0%,#4F7BFF 52%,#8A6BFF 100%);
	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:auto;
	text-align:center;font-size:13px;color:#E8455F;
}
.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:#3B5670;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:#5A6069;}
.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:opacity .22s ease, visibility 0s .26s;   /* 关闭：等抽屉滑下去(0.26s)再隐藏 */
}
.sheet-mask.show{
	opacity:1;visibility:visible;
	transition:opacity .22s ease, visibility 0s;         /* 打开：立刻显示 */
}
.sheet{
	position:fixed;left:0;right:0;top: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);
	transform:translateY(100%);
	transition:transform .26s cubic-bezier(.32,.72,.28,1), visibility 0s .26s;  /* visibility 延到动画结束 */
	visibility:hidden;
}
.sheet.open{
	transform:none;
	visibility:visible;
	transition:transform .26s cubic-bezier(.32,.72,.28,1), visibility 0s;       /* 打开时立即 visible */
}
.sheet-head{
	display:flex;align-items:center;padding:calc(10px + var(--safe-top)) 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:#8A8F99;}
.cm-text{font-size:14.5px;color:#2B2F36;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.dlg-up{top:44%;}
.dlg-body{flex:1;overflow-y:auto;-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-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:#4A4F57;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:#2B2F36;padding:8px 0 4px;line-height:1.5;}

/* ---------------- 「编辑资料」弹窗：分区（头像 / 资料 / 封面） ----------------
   以前是「一排按钮 + emoji 网格 + 两个输入框」堆在一起，看不出层次；
   现在按 ep-block 分块，每块一个小标题，封面用「设置行 + 小缩略图」的样子。 */
.ep-block + .ep-block{border-top:1px solid var(--line);margin-top:14px;padding-top:12px;}
.ep-title{font-size:12px;color:var(--text-2);margin:0 2px 8px;}
.ep-row{
	display:flex;align-items:center;gap:10px;height:48px;padding:0 2px;
	border-radius:10px;
}
.ep-row:active{background:#F6F7F9;}
.ep-row-label{flex:1;font-size:15px;color:#2B2F36;}
.ep-thumb{
	width:46px;height:30px;border-radius:7px;flex:0 0 auto;
	box-shadow:inset 0 0 0 1px rgba(20,40,80,.06);
}
.ep-clear{
	flex:0 0 auto;height:26px;padding:0 10px;border-radius:13px;font-size:12.5px;
	background:#F2F3F5;color:#5A6069;
}
.ep-clear:active{background:#E9EBEF;}
.ep-tip{margin:6px 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;}

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

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

.about-desc{font-size:13.5px;color:#2B2F36;line-height:1.75;margin-bottom:10px;}
.about-list{
	font-size:12.5px;color:#5A6069;line-height:1.9;
	background:#F7F9FC;border-radius:10px;padding:10px 12px;
}
.about-list b{color:#2B2F36;}
.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-name{
	width:100%;min-width:0;
	font-size:18px;font-weight:700;
	display:flex;align-items:center;justify-content:center;gap:5px;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 昵称下面那行小标签：泡泡号（点一下复制）+ 好友关系；整行居中 */
.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:#6B7280;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:linear-gradient(120deg,#12B7F5,#5B7CFF);
	box-shadow:0 8px 18px rgba(48,120,255,.25);
}
.pc-btn:active{filter:brightness(1.06);}
.pc-btn.ghost{background:#F2F4F7;color:#3B5670;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:#2B2F36;}
.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;}

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

/* ================= 看大图 ================ */
.viewer{
	position:fixed;inset:0;z-index:460;background:rgba(0,0,0,.94);
	display:flex;align-items:center;justify-content:center;
	opacity:0;visibility:hidden;transition:.2s;
}
.viewer.show{opacity:1;visibility:visible;}
.viewer img{max-width:100%;max-height:100%;object-fit:contain;}

/* ================= 游戏中心 ================= */
.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-play{
	flex:0 0 auto;height:30px;padding:0 14px;border-radius:15px;font-size:13px;color:#fff;
	background:linear-gradient(120deg,#12B7F5,#4F7BFF);
	box-shadow:0 6px 14px rgba(48,120,255,.22);
}
.game-play:active{filter:brightness(1.06);}

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

/* ================= 聊天功能面板（输入栏「+」，微信那种底部面板） ================= */
.func-mask{
	position:fixed;inset:0;z-index:205;background:rgba(0,0,0,.28);
	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:16px 16px 0 0;padding:20px 10px calc(20px + var(--safe-bottom));
	transform:translateY(100%);transition:transform .24s cubic-bezier(.32,.72,.28,1);
	box-shadow:0 -6px 24px rgba(0,0,0,.12);
}
.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:#F4F5F7;
	display:flex;align-items:center;justify-content:center;font-size:26px;
}
.func-item:active .func-ico{background:#EBEDF0;}
/* 加号面板 SVG 矢量图标：微信风格线性描边，颜色跟随 func-ico 当前色 */
.func-ico .fico{
	width:27px;height:27px;display:block;
	fill:none;stroke:currentColor;stroke-width:1.6;
	stroke-linecap:round;stroke-linejoin:round;
}
/* ================= 表情面板（图片来自服务器 qq/bqb 目录） ================= */
.emoji-mask{position:fixed;inset:0;z-index:205;background:rgba(0,0,0,.18);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);
	height:46vh;min-height:220px;display:flex;flex-direction:column;
	border-radius:16px 16px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.12);
	transform:translateY(100%);transition:transform .24s cubic-bezier(.32,.72,.28,1);
}
.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;}

/* 图片 / 表情消息气泡（图片本身是内容，气泡不铺底色）
   图片显示与动态单图同规则：默认宽 150、最低高 150、最高 320，横图/超长图居中裁切；
   宽高比超过 1.2:1 或 1:1.2 时 JS 加 wide 类，宽度放宽到 320px */
.msg-bubble.img{padding:3px;background:#fff;max-width:100%;}
.msg.me .msg-bubble.img{background:#fff;}
.msg-img{display:block;width:160px;max-width:100%;height:auto;min-height:160px;max-height:320px;object-fit:cover;border-radius:8px;}
.msg-img.wide-h{width:320px;min-height:0;max-height:320px;object-fit:contain;}
.msg-img.wide-v{width:auto;height:320px;min-height:0;max-height:320px;object-fit:contain;}

/* 发图前确认弹窗：大图预览所选图片（等比完整显示不裁切） */
.img-confirm{display:flex;align-items:center;justify-content:center;max-height:56vh;overflow:hidden;border-radius:8px;background:#F0F1F3;}
.img-confirm img{display:block;max-width:100%;max-height:56vh;object-fit:contain;border-radius:8px;}

/* 系统通知卡片（泡泡团队发送，type=10）：白底圆角居左卡片，不走普通气泡底色，时间在卡片外 */
.msg.sys{justify-content:center;}                    /* 系统卡片整行居中 */
.msg.sys .msg-col{width:86%;max-width:86%;align-items:stretch;}   /* 固定宽度：宽度不随文字变，只变高度 */
.msg.sys .msg-meta{justify-content:center;}          /* 时间行居中 */
.msg.sys .msg-row{width:100%;justify-content:center;}
.msg-bubble.sys-notice-wrap{padding:0;background:transparent;box-shadow:none;max-width:100%;width:100%;}
.msg-bubble.sys-notice-wrap::after{display:none;}    /* 去掉气泡小尾巴 */
.msg.me .msg-bubble.sys-notice-wrap{background:transparent;}
.sys-notice{background:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 2px 8px rgba(0,0,0,.08);width:100%;}
.sn-from{font-size:12px;color:#999;margin-bottom:8px;}
.sn-title{font-size:16px;font-weight:700;color:#111;}
.sn-divider{height:1px;background:#eee;margin:10px 0;}
.sn-body{font-size:14px;color:#222;line-height:1.6;word-break:break-all;white-space:pre-wrap;}
.vfy.red{color:#E8455F;}   /* 官方群聊的红色对勾 */

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

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

/* 红包气泡（橙色小卡片） */
.msg-bubble.rp-bubble{
	display:flex;align-items:center;gap:9px;min-width:166px;
	background:linear-gradient(135deg,#FBAA4E 0%,#F0821F 100%);color:#fff;padding:10px 12px;
}
.msg.me .msg-bubble.rp-bubble{background:linear-gradient(135deg,#FBAA4E 0%,#F0821F 100%);}
.rp-bubble:active{filter:brightness(.95);}
.rp-bubble .rp-ico{font-size:28px;line-height:1;flex:0 0 auto;}
.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 小时未领取自动退回） ================= */

/* 转账气泡（蓝色小卡片，收款人那侧带「领取」按钮） */
.msg-bubble.tr-bubble{
	display:flex;align-items:center;gap:9px;min-width:170px;
	background:linear-gradient(135deg,#4EA8FF 0%,#2F7FE0 100%);color:#fff;padding:10px 12px;
}
.msg.me .msg-bubble.tr-bubble{background:linear-gradient(135deg,#4EA8FF 0%,#2F7FE0 100%);}
.tr-bubble .tr-ico{font-size:26px;line-height:1;flex:0 0 auto;}
.tr-bubble .tr-txt{flex:1;min-width:0;}
.tr-bubble .tr-coins{font-size:16px;font-weight:600;}
.tr-bubble .tr-coins i{font-size:11px;font-weight:400;font-style:normal;opacity:.9;}
.tr-bubble .tr-note{font-size:12px;opacity:.92;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tr-bubble .tr-state{font-size:11px;opacity:.88;margin-top:3px;}
.tr-bubble .tr-btn{
	flex:0 0 auto;height:28px;padding:0 12px;border:0;border-radius:14px;
	background:#fff;color:#2F7FE0;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(24,16,8,.5);
	opacity:0;visibility:hidden;transition:.22s;
}
.rp-sheet.open{opacity:1;visibility:visible;}
.rp-card{
	width:100%;max-width:322px;max-height:82%;overflow-y:auto;-webkit-overflow-scrolling:touch;
	border-radius:16px;padding:18px 16px 16px;text-align:center;color:#fff;
	background:linear-gradient(180deg,#F2634A 0%,#D8452B 100%);
	box-shadow:0 20px 44px rgba(0,0,0,.34);
	transform:translateY(12px) scale(.95);transition:.24s;
}
.rp-sheet.open .rp-card{transform:none;}
.rp-loading{padding:40px 0;font-size:14px;opacity:.9;}
.rp-top{display:flex;align-items:center;gap:10px;text-align:left;}
.rp-top .avatar{width:39px;height:39px;font-size:17px;box-shadow:0 0 0 1.5px rgba(255,255,255,.55);}
.rp-from{min-width:0;}
.rp-from-name{font-size:15px;font-weight:600;display:flex;align-items:center;gap:4px;}
.rp-from-name.vip{color:#FFE08A;}     /* 红底上会员名字用金色更清楚 */
.rp-from-name.svip{color:#FFD24D;}
.rp-from-sub{font-size:11px;opacity:.85;margin-top:2px;}
.rp-hero{
	width:106px;height:106px;border-radius:50%;margin:16px auto 12px;
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	background:radial-gradient(circle at 50% 34%,#FFE9B8,#F2C15E 70%);
	color:#8A4B00;font-size:26px;font-weight:700;
	box-shadow:0 8px 20px rgba(0,0,0,.18),inset 0 -3px 8px rgba(160,90,0,.18);
}
.rp-hero.open{
	font-size:34px;letter-spacing:1px;
	background:radial-gradient(circle at 50% 34%,#FFF4CE,#F0B93F 72%);
	animation:rpPulse 1.6s ease-in-out infinite;
}
.rp-hero.open:active{transform:scale(.96);}
@keyframes rpPulse{
	0%,100%{box-shadow:0 8px 20px rgba(0,0,0,.18),inset 0 -3px 8px rgba(160,90,0,.18),0 0 0 0 rgba(255,232,150,.55);}
	50%    {box-shadow:0 8px 20px rgba(0,0,0,.18),inset 0 -3px 8px rgba(160,90,0,.18),0 0 0 12px rgba(255,232,150,0);}
}
.rp-hero.over{background:rgba(255,255,255,.16);color:#fff;font-size:16px;font-weight:600;box-shadow:none;}
.rp-hero.got b{font-size:32px;line-height:1;}
.rp-hero.got i{font-size:11px;font-style:normal;opacity:.85;margin-top:2px;}
.rp-hero.got span{font-size:11px;margin-top:5px;}
.rp-greet-line{font-size:15px;font-weight:600;}
.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:#5A6069;
	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;}

/* 引用条：出现在输入栏上方，可点 ✕ 取消 */
.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;}
/* 撤回后的「重新编辑」：蓝色可点，点击把原文带回输入框（3 分钟内有效） */
.reedit-btn{color:var(--brand-blue);cursor:pointer;font-weight:500;}
.reedit-btn:active{opacity:.6;}

/* ---------- @ 提醒（长按头像 @ 人 / 正文高亮 / 会话列表与底部标签标记） ---------- */
.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;}
.jump-row .jr-ico{width:24px;text-align:center;font-size:18px;flex:0 0 auto;}
.jump-row .jr-txt{flex:1;font-size:15.5px;color:var(--text);}
.jump-row .set-arrow{color:#C8C8C8;}

/* ---------- 应用中心（列表复用 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:#666;
	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:#333;
	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:#C8C8C8;}
/* 检查更新弹窗里的更新说明 */
.up-log{
	margin-top:8px;padding:9px 11px;border-radius:8px;background:#F5F6F8;
	font-size:13px;color:#666;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:#666;}

/* ---------- 官方店铺（商品列表 / 详情） ---------- */
.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:#8A93A6;}     /* 商品「已售罄」等灰色标签 */

/* ---------- 我的订单 / 下载记录 的通用行样式 ---------- */
.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:#8A93A6;}
.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:#8A93A6;}

/* ---------- 钱包页层级 ---------- */
/* 钱包是从「商品详情 / 靓号中心 / 会员中心」点「去充值」压上来的（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:#191919;}
.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;
}
.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:#8A8F99;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:#191919;}
.mall-me-no{margin-top:4px;font-size:12.5px;color:#8A8F99;}
.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:#B3B3B3;}

/* 两列瀑布流 */
.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:#191919;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:#999;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:#B3B3B3;}
.pdd-count{padding:8px 0 14px;text-align:center;font-size:12px;color:#B3B3B3;}

/* 商品详情（拼多多式：大图 + 红价 + 底部固定购买栏） */
.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:#999;}
.pdd-dname{margin-top:9px;font-size:17px;font-weight:600;line-height:1.4;color:#191919;}
.pdd-dtags{margin-top:8px;font-size:12px;color:#8A8F99;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:#8A8F99;}
.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:148px;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: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:#98A1AE;}

/* 从「查找聊天记录」定位过来的那条消息，闪一下高亮 */
.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:#5A6070;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;}
/* 服务器管理员认证：黄色对勾（官方账号为默认蓝色） */
.vfy.admin{color:#F5A623;}

/* 资料卡封面右上角的认证角标：官方蓝色 / 管理员黄色 */
.pc-cert{position:absolute;top:10px;right:10px;z-index:2;padding:3px 9px;border-radius:20px;
	background:rgba(18,183,245,.92);color:#fff;font-size:11px;font-weight:600;letter-spacing:1px;
	box-shadow:0 2px 8px rgba(0,0,0,.18);}
.pc-cert.admin{background:rgba(245,166,35,.95);}
/* 个人主页封面上的认证行 */
.up-cert{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:2px 10px;border-radius:20px;
	background:rgba(18,183,245,.92);color:#fff;font-size:12px;font-weight:600;}
.up-cert.admin{background:rgba(245,166,35,.95);}
/* 昵称/标题里的徽章跟文字同高，列表里稍微小一点更清爽 */
.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-row:last-child{margin-bottom:6px;}
#chatList .row{background:var(--card);}
#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:#5A6070;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:#C7CDD8;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:linear-gradient(120deg,#12B7F5,#4F7BFF);
	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:linear-gradient(135deg,#12B7F5 0%,#4F7BFF 55%,#8A6BFF 100%);
	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:#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 居中；里面再给 margin:0 auto，
     万一某些 WebView 对 flex 的 align-items 解析异常，也不会缩到左边去） */
.ga-pick{
	display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
	text-align:center;width:100%;margin:0 auto;
	gap:6px;padding:2px 0 10px;
}
.ga-preview{
	width:72px;height:72px;border-radius:16px;overflow:hidden;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	margin:0 auto;                 /* ← 保险：即使外面的 flex 没生效也居中 */
	background:var(--bg);color:var(--text-3);font-size:26px;
}
.ga-tip{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:#6B7178;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;}

/* 验证码区域 */
.captcha-row{display:none;align-items:center;gap:8px;margin-bottom:8px;}
.captcha-svg{flex:0 0 auto;height:40px;border-radius:6px;overflow:hidden;background:#f0f2f5;}
.captcha-svg svg{display:block;height:40px;}
.captcha-input{flex:1;min-width:0;}
.captcha-refresh{flex:0 0 auto;height:32px;padding:0 10px;border-radius:6px;font-size:12px;color:#12B7F5;background:rgba(18,183,245,.08);border:1px solid rgba(18,183,245,.2);cursor:pointer;white-space:nowrap;}
.code-row{display:none;align-items:center;gap:8px;margin-bottom:8px;}
.code-input{flex:1;min-width:0;}
.code-btn{flex:0 0 auto;height:40px;padding:0 14px;border-radius:8px;font-size:13px;color:#fff;background:linear-gradient(135deg,#12B7F5,#0D8ED9);border:0;cursor:pointer;white-space:nowrap;}
.code-btn:disabled{opacity:.5;cursor:not-allowed;}

/* 更换邮箱界面：输入框更大更显眼、按钮加厚 */
#emSheet .dlg-input{height:52px;font-size:17px;}
#emSheet .code-input{height:52px;font-size:18px;letter-spacing:3px;text-align:center;font-weight:600;}
#emSheet .code-btn{height:52px;padding:0 18px;font-size:15px;}
#emSheet .dlg-btn{height:50px;border-radius:12px;font-size:16px;font-weight:600;}
/* 更换邮箱·返回上一步：一行红色文字，点击返回第一步 */
.em-back{text-align:center;color:#FA5151;font-size:15px;padding:12px 0 6px;cursor:pointer;user-select:none;}
.em-back:active{opacity:.6;}

/* 创建群聊抽屉：创建按钮与「获取验证码」同款大小配色，整行显示 */
#cgSheet #cgOk{width:100%;height:44px;font-size:14px;}

/* 入群申请审批：申请行与同意/拒绝按钮 */
.gr-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-top:1px solid var(--line);}
.gr-row:first-child{border-top:0;}
.gr-main{flex:1;min-width:0;}
.gr-name{font-size:15px;font-weight:600;display:flex;align-items:center;gap:3px;}
.gr-sub{font-size:12px;color:var(--text-3);margin-top:2px;}
.gr-btn{flex:0 0 auto;height:32px;padding:0 14px;border-radius:16px;font-size:13px;border:0;cursor:pointer;}
.gr-btn.ok{color:#fff;background:linear-gradient(135deg,#12B7F5,#0D8ED9);}
.gr-btn.no{color:#FA5151;background:#FFF0F0;}
.gr-btn:disabled{opacity:.5;cursor:not-allowed;}
/* 入口图标上的待审红点 */
.gr-dot{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
	background:#FA5151;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;font-style:normal;}
/* 已处理记录：分隔条与结果标识 */
.gr-sep{padding:10px 2px 4px;font-size:12px;color:var(--text-3);border-top:1px solid var(--line);margin-top:6px;}
.gr-row.done{opacity:.75;}
.gr-res{flex:0 0 auto;font-size:12px;font-weight:600;}
.gr-res.ok{color:#3ECF8E;}
.gr-res.no{color:#FA5151;}

/* 人机验证弹窗 */
.captcha-dlg{display:none;position:fixed;inset:0;z-index:600;align-items:center;justify-content:center;}
.captcha-dlg.show{display:flex;}
.captcha-dlg-mask{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.captcha-dlg-card{position:relative;background:#fff;border-radius:14px;padding:24px;width:300px;box-shadow:0 8px 32px rgba(0,0,0,.18);text-align:center;}
.captcha-dlg-title{font-size:16px;font-weight:600;color:#333;margin-bottom:16px;}
.captcha-dlg-svg{margin-bottom:12px;display:flex;justify-content:center;}
.captcha-dlg-svg svg{border-radius:6px;border:1px solid #e0e0e0;}
.captcha-dlg-btns{display:flex;gap:10px;margin-top:12px;}
.captcha-dlg-refresh{flex:1;height:38px;border-radius:8px;font-size:13px;color:#12B7F5;background:#f0f7ff;border:1px solid #cce5ff;cursor:pointer;}
.captcha-dlg-ok{flex:1;height:38px;border-radius:8px;font-size:13px;color:#fff;background:linear-gradient(135deg,#12B7F5,#0D8ED9);border:0;cursor:pointer;}

.login-page.reg .code-row{display:flex !important;}


/* ============================================================
 *  登录 / 注册页 · 大肥鱼风格重构（柔和灰蓝 + 白色圆角卡片）
 * ============================================================ */
.login-page{
	background:linear-gradient(165deg,#eef2f7 0%,#e6ebf2 45%,#f4f2f6 100%);
}
/* 去掉科技风光斑 */
.login-page .lg-bg{display:none;}

/* 整体容器：品牌在上，卡片在下，垂直居中 */
.auth-shell{
	flex:1;width:100%;max-width:420px;margin:0 auto;
	display:flex;flex-direction:column;justify-content:center;
	padding:calc(28px + var(--safe-top)) 20px calc(22px + var(--safe-bottom));
}

/* 品牌区 */
.auth-brand{text-align:center;padding-bottom:24px;}
.auth-logo{
	width:72px;height:72px;margin:0 auto 14px;
	border-radius:20px;
	overflow:hidden;
	box-shadow:0 10px 24px rgba(70,90,120,.20);
	display:flex;align-items:center;justify-content:center;
}
.auth-logo img{width:100%;height:100%;object-fit:cover;display:block;}
.auth-name{font-size:26px;font-weight:800;letter-spacing:3px;color:#1c2833;margin:0;}
.auth-slogan{margin-top:6px;font-size:11px;letter-spacing:2px;color:#8a9aa8;}

/* 白色卡片 */
.auth-card{
	flex:0 0 auto;
	background:#ffffff;
	border-radius:24px;
	box-shadow:0 14px 44px rgba(70,90,120,.14);
	padding:24px 22px 22px;
}
.auth-card > *{flex:0 0 auto;}

.auth-fields{display:flex;flex-direction:column;}

.login-tabs{
	display:flex;gap:4px;padding:4px;margin-bottom:20px;border-radius:14px;
	background:#eef1f4;border:0;box-shadow:none;
}
.login-tab{
	flex:1;height:40px;border-radius:10px;font-size:15px;
	color:#7a8998;background:transparent;transition:.22s;
}
.login-tab.active{
	color:#1c2833;font-weight:600;
	background:#ffffff;
	box-shadow:0 2px 8px rgba(70,90,120,.12);
}

.login-input{
	width:100%;height:50px;margin-top:12px;border-radius:14px;padding:0 16px;
	font-size:15px;color:#1c2833;
	background:#f5f7fa;border:1.5px solid #e3e9ef;
	box-shadow:none;transition:border-color .2s,box-shadow .2s,background .2s;
}
.login-input::placeholder{color:#a9b7c5;}
.login-input:focus{
	border-color:#8fa8bc;background:#ffffff;
	box-shadow:0 0 0 3px rgba(143,168,188,.16);
}

.login-hint{color:#9aa8b6;}
.login-hint.ok{color:#3cae7a;}
.login-hint.err{color:#e0566b;}

.login-btn{
	width:100%;height:50px;margin-top:22px;border-radius:25px;
	font-size:16px;font-weight:700;letter-spacing:0;color:#fff;
	background:#6b7f8f;
	box-shadow:0 10px 24px rgba(107,127,143,.30);
	transition:transform .15s,box-shadow .2s;
}
.login-btn:active{transform:scale(.98);box-shadow:0 6px 16px rgba(107,127,143,.26);}
.login-btn:disabled{background:#dbe2e9;color:#9aa8b6;box-shadow:none;}

.login-msg{
	min-height:18px;margin-top:12px;margin-bottom:0;
	text-align:center;font-size:13px;color:#e0566b;
}

/* 头像 */
.lg-avatar{gap:12px;padding:4px 0 4px;margin-bottom:4px;}
.lg-avatar .avatar{
	width:54px;height:54px;font-size:26px;border:0;
	background:#f0f3f7;
	box-shadow:0 0 0 1px #e3e9ef,0 6px 16px rgba(70,90,120,.12);
}
.lg-avatar-btn{
	height:34px;padding:0 16px;border-radius:17px;font-size:13px;
	color:#4a5d6e;background:#eef1f4;border:1px solid #e3e9ef;transition:.2s;
}
.lg-avatar-btn:active{background:#e2e8ee;}

/* 验证码 */
.code-row{display:none;align-items:center;gap:8px;margin-bottom:0;}
.login-page.reg .code-row{display:flex !important;}
.code-btn{
	flex:0 0 auto;height:44px;padding:0 16px;border-radius:22px;
	font-size:13px;color:#fff;background:#6b7f8f;border:0;cursor:pointer;white-space:nowrap;
}
.code-btn:disabled{opacity:.5;cursor:not-allowed;}

/* 加载中 */
.login-loading{color:#3b5670;background:rgba(246,249,252,.86);}
.lg-spin{border:2px solid rgba(107,127,143,.22);border-top-color:#6b7f8f;}


/* ============================================================
 *  大肥鱼风格 · 底部导航 / 快捷入口图标 / 加号菜单图标
 * ============================================================ */
/* 底部导航：白色 + 顶部圆角 + 柔和阴影 */
.tabbar{
	background:#ffffff;
	border-top:0;
	border-radius:20px 20px 0 0;
	box-shadow:0 -4px 20px rgba(70,90,120,.08);
}
.tabbar::before{display:none;}
.tab{color:#9aa6b4;}
.tab.active{color:#6b7f8f;}
.tab .ico{width:24px;height:24px;}
.tab-ico{display:flex;align-items:center;justify-content:center;}
.tab-ico svg{width:24px;height:24px;display:block;}

/* 快捷入口图标（SVG 尺寸） */
.quick-ico svg{width:22px;height:22px;}

/* 加号菜单图标（SVG 尺寸） */
.plus-item .qi{display:flex;align-items:center;justify-content:center;width:24px;height:24px;}
.plus-item .qi svg{width:20px;height:20px;}


/* ============================================================
 *  页面切换动画 + 大肥鱼果冻导航栏
 * ============================================================ */
.view.active {
	animation: viewIn .28s cubic-bezier(.22,1,.36,1);
}
@keyframes viewIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* 果冻导航栏（用 #bottomNav 提高优先级，压过 qq-theme.css 里 .tabbar 的 74px+26px 白底，白色高度对齐大肥鱼 56px） */
#bottomNav {
	--tab-height: 56px;
	position: relative; z-index: 30;
	height: calc(var(--tab-height) + var(--safe-bottom, 0px));
	background: transparent; border-top: 0; box-shadow: none; border-radius: 0;
	padding-bottom: 0;
}
#bottomNav::before { display: none; }
.nav-goo { position: absolute; left: 0; right: 0; bottom: var(--safe-bottom, 0px); height: var(--tab-height); filter: url(#navGoo); pointer-events: none; }
.nav-bar-bg { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: #ffffff; border-radius: 20px 20px 0 0; }
.nav-blob { position: absolute; bottom: 10px; left: 0; width: 60px; height: 60px; border-radius: 50%; background: #ffffff; }
.nav-hl-goo { position: absolute; left: 0; right: 0; bottom: var(--safe-bottom, 0px); height: var(--tab-height); z-index: 2; pointer-events: none; filter: url(#navGoo); }
.nav-hl { position: absolute; bottom: 16px; left: 0; width: 48px; height: 48px; border-radius: 50%; background: #6b7f8f; }
.nav-merge { position: absolute; bottom: 16px; left: 0; width: 48px; height: 48px; border-radius: 50%; background: #6b7f8f; opacity: 0; }
.nav-icons { position: absolute; left: 0; right: 0; bottom: var(--safe-bottom, 0px); height: var(--tab-height); display: flex; z-index: 3; padding-top: 6px; }
.nav-icons .tab { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: none; background: none; padding: 0; }
.nav-icons .tab .tab-ico { color: #9aa6b4; display: flex; align-items: center; justify-content: center; position: relative; }
.nav-icons .tab .tab-ico svg { width: 24px; height: 24px; display: block; }
.nav-icons .tab.active .tab-ico { color: #ffffff; }

/* 好友验证拦截：消息左侧红色感叹号 */
.msg-row{display:flex;align-items:center;gap:6px;justify-content:flex-start;}
.msg.me .msg-row{justify-content:flex-end;}
/* 图片/语音/红包等气泡在弹性行内保持固有尺寸，避免被压缩塌缩成碎图 */
.msg-row > .msg-bubble{flex:0 0 auto;min-width:0;}
.msg-row .msg-img{flex:none;}
.msg-blocked{flex:none;width:18px;height:18px;border-radius:50%;background:#FA5151;color:#fff;font-size:12px;font-weight:700;line-height:18px;text-align:center;cursor:default;}

/* 群聊消息：发送者身份头衔（群主黄 / 管理蓝） */
.msg-role{display:inline-block;margin-left:4px;padding:0 5px;border-radius:4px;font-size:10px;font-weight:700;line-height:16px;vertical-align:1px;}
.msg-role.owner{background:#FFE9B8;color:#B8860B;}
.msg-role.admin{background:#D6E8FF;color:#2F7FE0;}

/* ---------- 弹层列表统一成「通知消息」卡片间隔 ----------
   适用：新朋友 / 我的群聊 / 入群申请 / 官方群聊 / 官方客服 / 官方公告
   原来是紧挨着的行（像一条消息），改成每行独立白卡片 + 10px 间隔，和互动消息页(.nc-row)一致 */
.sheet .fr-row,
.sheet .gr-row,
.sheet .of-row,
.sheet .nt-item{
	margin:0 0 10px;
	padding:12px 14px;
	background:var(--card);
	border-radius:12px;
	box-shadow:0 1px 2px rgba(16,24,40,.05);
	border:0;
}
.sheet .fr-row:last-child,
.sheet .gr-row:last-child,
.sheet .of-row:last-child,
.sheet .nt-item:last-child{ margin-bottom:0; }
.sheet .fr-row:active,
.sheet .gr-row:active,
.sheet .of-row:active,
.sheet .nt-item:active{ background:#F7F9FC; }

/* ============================================================
 *  联系人页 → 各入口弹层：灰底 + 白卡片（和「互动消息」页一致）
 *  适用：新朋友(frSheet) / 我的群聊(gpSheet) / 入群申请(grSheet)
 *        / 官方公告(ntSheet) / 官方群聊(ogSheet) / 官方客服(osSheet)
 *  说明：这些弹层原来整块都是白色，里面的白卡片看不出层次；
 *        改成和互动消息页（.pub-page 灰底 + .nc-row 白卡片）一样的观感。
 *  用 id 选择器是为了优先级压过 theme.css 里的 `.sheet{background:var(--card)}`，
 *  深色主题下自动跟着 var(--bg) 变深，不需要再写一遍覆盖。
 * ============================================================ */
#frSheet, #gpSheet, #grSheet, #ntSheet, #ogSheet, #osSheet{
	background: var(--bg);
}
#frSheet .sheet-list, #gpSheet .sheet-list, #grSheet .sheet-list,
#ntSheet .sheet-list, #ogSheet .sheet-list, #osSheet .sheet-list{
	padding: 12px 12px calc(12px + var(--safe-bottom));
}