/* ==========================================================================
   QQ 9（QQ NT 手机版）主题层 —— 纯外观皮肤
   用法：在 <link rel="stylesheet" href="css/style.css"> 之后再引入本文件。
   本文件只做「覆盖」，不改动 style.css 里的任何规则。
   ---------------------------------------------------------------------------
   ★ 现在这里是**纯皮肤**：删掉 index.html 里这一行 link，就会回到改造前的外观，
     而所有功能（长按菜单、@ 提醒、应用中心、店铺、下载记录、检查更新…）都不受影响
     —— 那些样式已经搬到 style.css 里了。
   ★ 想换配色/圆角/字号：直接改下面第 0 节的变量即可。
   ========================================================================== */

/* ---------- 0. 设计变量（2026-10-14 视觉重设计：蓝色系 · 现代卡片风） ----------
   只改这里的取值就能换整套配色，不必动下面的规则。 */
:root{
	--brand-blue:#1A84FF;                     /* 主色：更沉稳的现代蓝 */
	--brand-blue-d:#0F6FE6;
	--bg:#F2F4F8;                             /* 页面底色：冷灰，衬托白卡片 */
	--card:#FFFFFF;
	--line:#EEF1F5;                           /* 分隔线：更浅，靠留白分层 */
	--text:#111827;
	--text-2:#6B7280;
	--text-3:#9AA1AC;
	--red:#F04438;
	--tabbar-h:48px;                          /* 导航栏内容区高度（图标+文字 36px，上下留 6px） */
	--bar-bottom-gap:20px;                    /* 底部条（导航栏 / 聊天输入栏）离屏幕底边的留白 */
	--bar-h:calc(var(--tabbar-h) + var(--bar-bottom-gap) + var(--safe-bottom));   /* 底部条统一总高 = 74px */
	--qq-grad:linear-gradient(135deg,#3AA5FF 0%,#0A6BFF 100%);
	--qq-hair:rgba(17,24,39,.06);
	/* 圆角与阴影：统一在这里调，列表 / 卡片 / 弹窗都跟着走 */
	--r-lg:16px;
	--r-md:12px;
	--r-sm:9px;
	--sd-card:0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.05);
	--sd-bar:0 -1px 0 rgba(16,24,40,.05), 0 -6px 18px rgba(16,24,40,.04);
	/* 注：顶部安全距离变量 --safe-top-max 现在定义在 style.css 里（属于通用修复，不跟主题走） */
}

/* ---------- 1. 基础 ---------- */
.ico.solid{fill:currentColor;stroke:none;}
.ico{stroke-width:1.9;}

/* ---------- 2. 顶栏 / 搜索框 ---------- */
.topbar{padding:calc(10px + var(--safe-top-max)) 16px 8px;background:#fff;gap:10px;}
.topbar::after{display:none;}
.topbar .title{font-size:17px;font-weight:600;padding-left:2px;}
.search{height:34px;background:#F2F2F2;border-radius:8px;padding:0 10px;gap:6px;color:#B3B3B3;}
.search .ico{width:16px;height:16px;stroke-width:2;}
.search input{font-size:14.5px;}
.search input::placeholder{color:#B3B3B3;}
.icon-btn{width:32px;height:32px;color:#191919;border-radius:8px;}
.icon-btn:active{background:#F2F2F2;}

/* ---------- 3. 头像：QQ 9 是圆角方形，不是圆 ---------- */
.avatar{width:50px;height:50px;border-radius:9px;font-size:24px;}
.avatar.sm{width:32px;height:32px;font-size:16px;border-radius:7px;}
/* 外圈从 border 改成 box-shadow：border 会把上传的图片往里挤（图片铺不满、看着像“漏边”），
   半透明的边框还会和图片叠在一起显出发灰的一圈。box-shadow 画在盒子外面，图片能顶到最外沿，
   外沿尺寸保持不变（lg：64 + 2.5×2 = 69；xl：58 + 2.5×2 = 63） */
.avatar.lg{width:69px;height:69px;font-size:30px;border-radius:14px;box-shadow:0 0 0 2.5px #fff;}
.avatar.xl{width:63px;height:63px;font-size:27px;border-radius:13px;box-shadow:0 0 0 2.5px rgba(255,255,255,.85);}
.avatar .dot{border-radius:50%;}
.lg-av{border-radius:9px;}
.lg-avatar .avatar,.dlg-avatars .lg-av{border-radius:9px;}
.badge{top:-5px;right:-5px;min-width:18px;height:18px;line-height:18px;font-size:10.5px;border-radius:9px;background:var(--red);}

/* ---------- 4. 会话 / 联系人列表 ---------- */
.list{background:#fff;}
.row{padding:11px 16px;gap:12px;}
.row::after{left:78px;background:#EBEBEB;}
.row:active{background:#F2F2F2;}
.row.pinned{background:#F7F7F7;}
.row-name{font-size:16px;font-weight:500;}
.row-desc{font-size:13.5px;color:#999;margin-top:4px;}
.row-time{font-size:11px;color:#B3B3B3;}
.tag{border-radius:4px;padding:1px 5px;font-size:10px;transform:translateY(-1px);}
.tag.gray{background:#C8C8C8;}

/* ---------- 5. 联系人页：功能入口 4 列网格（8 个入口 = 正好两排） ---------- */
.quick{
	display:grid;grid-template-columns:repeat(4,1fr);
	row-gap:14px;padding:12px 6px;margin-bottom:0;background:#fff;
	border-bottom:1px solid #EBEBEB;      /* 和下方好友分组分开 */
}
.quick-item{
	min-width:0;
	display:flex;flex-direction:column;align-items:center;gap:6px;
	padding:2px;position:relative;text-align:center;
}
.quick-item:active{background:#F2F2F2;border-radius:10px;}
.quick-ico{width:40px;height:40px;border-radius:11px;font-size:19px;flex:0 0 auto;position:relative;}
.quick-txt{
	flex:0 0 auto;font-size:12px;color:#191919;text-align:center;line-height:1.2;
	max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* 字母分组 / 右侧索引条 */
.group-head{padding:6px 16px;font-size:12.5px;color:#999;background:var(--bg);}
.alpha-bar{background:transparent;padding:4px 3px;}
.alpha-bar span{color:var(--brand-blue);font-size:10.5px;font-weight:500;}

/* ---------- 6. 底部导航（标签离底边 26px，下方不留白条） ---------- */
/* 底部这 26px 只加在这里：--safe-bottom 全局是 0px（不影响聊天输入栏、弹层），
   由 tabbar 自己撑开高度，白色底一路画到屏幕最下沿 */
.tabbar{
	background:#fff;border-top:1px solid #EBEBEB;
	height:var(--bar-h);                                   /* = --tabbar-h + 26px + --safe-bottom */
	padding-bottom:calc(var(--bar-bottom-gap) + var(--safe-bottom));
}
.tabbar::before{display:none;}
.tab{
	color:#999;font-size:10px;gap:3px;
	justify-content:flex-end;      /* 图标 + 文字整体靠下 */
	padding-bottom:0;              /* 离底边的距离由 .tabbar 的 26px 提供，这里不重复加 */
}
.tab.active{color:var(--brand-blue);}
.tab .ico{width:23px;height:23px;}
.tab-txt{font-size:10px;line-height:1;display:block;}   /* line-height:1：去掉文字行高造成的下方空隙 */
.tab-badge{top:-3px;right:-8px;min-width:17px;height:17px;line-height:17px;background:var(--red);}

/* ---------- 7. 抽屉 ---------- */
.drawer-head{background:var(--qq-grad);padding:calc(24px + var(--safe-top-max)) 18px 20px;}
.drawer-name{font-size:18px;}
.drawer-bubble{color:rgba(255,255,255,.82);}
.drawer-card{border-radius:12px;box-shadow:0 3px 12px rgba(0,0,0,.06);}
.drawer-item{padding:14px 18px;font-size:16px;}
.drawer-item:active{background:#F2F2F2;}
.drawer-menu .drawer-item + .drawer-item{border-top:1px solid #F2F2F2;}
.drawer-logout{font-size:16px;color:var(--red);border-top:1px solid #EBEBEB;}

/* ---------- 8. 右上角「+」菜单 ---------- */
.plus-menu{top:56px;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.16);padding:2px 0;}
.plus-item{padding:13px 16px;font-size:15px;color:#191919;}
.plus-item + .plus-item{border-top:1px solid #F2F2F2;}
.plus-item:active{background:#F2F2F2;}

/* ---------- 9. 聊天页 ---------- */
/* 面板弹出时整页上抬：bottom 由 JS 直接写内联样式（不依赖本文件是否刷新），
   头部 / 消息区 / 输入栏一起上移、消息区变矮 → 消息被往上挤，不会被面板遮住。
   注意 transition 要和原来那条 transform 一起写，否则会把「从右侧滑入」的动画覆盖掉 */
.chat-page{
	background:#F5F6F8;
	transition:transform .26s cubic-bezier(.32,.72,.28,1), bottom .24s cubic-bezier(.32,.72,.28,1);
}
.chat-head{background:#fff;border-bottom:1px solid #EBEBEB;padding:calc(8px + var(--safe-top-max)) 12px 8px;gap:8px;}
.chat-title span{font-size:17px;}
.chat-title small{font-size:11px;color:#B3B3B3;}
.chat-body{padding:12px 12px 18px;}
.chat-time{font-size:11.5px;color:#B3B3B3;margin:12px 0;}
.msg{gap:10px;margin-bottom:14px;}
.msg .avatar{width:40px;height:40px;font-size:19px;border-radius:9px;}
/* 别人的消息：子项按自身宽度排列。
   默认的 align-items:stretch 会让气泡被"时间行"（时间戳比较长）撑宽，
   短消息后面就出现一大片空白；自己的消息本来就有 flex-end，不受影响 */
.msg-col{max-width:74%;align-items:flex-start;}
.msg-name{font-size:12px;color:#999;}
/* 每条消息的时间行：群聊里是「昵称 + 时间」同一行，单聊只有时间；
   自己的消息整体靠右（.msg-col 本来就是 flex-end 对齐） */
.msg-meta{display:flex;align-items:center;gap:8px;margin:0 2px 4px;}
.msg.me .msg-meta{flex-direction:row-reverse;}      /* 自己的：时间在左、昵称在右（整体贴右边） */
.msg .msg-meta .msg-name{margin:0;}                 /* 去掉旧的 margin，行高由 .msg-meta 控制 */
.msg-time{font-size:11px;color:#B3B3B3;line-height:1.2;white-space:nowrap;}
/* 气泡：小圆角 + 尖角（QQ 9 不是纯圆角矩形） */
.msg-bubble{
	padding:9px 12px;border-radius:6px;font-size:15.5px;line-height:1.45;
	background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.msg-bubble::after{
	content:"";position:absolute;top:11px;left:-5px;width:0;height:0;
	border:5px solid transparent;border-left:0;border-right-color:#fff;
}
.msg.me .msg-bubble{background:var(--qq-grad);color:#fff;box-shadow:0 1px 2px rgba(0,130,255,.22);}
.msg.me .msg-bubble::after{left:auto;right:-5px;border-right:0;border-left-color:#0080FF;}
/* 图片 / 红包气泡是卡片，不挂尖角 */
.msg-bubble.img::after,
.msg-bubble.rp-bubble::after{display:none;}
.msg-bubble.img{background:#fff;border-radius:8px;box-shadow:none;padding:3px;}
.msg-img{border-radius:6px;}
.msg-bubble.rp-bubble{border-radius:8px;}

/* ---------- 10. 聊天输入栏（高度与首页底部导航栏一致；发送按钮：圆形，空输入置灰） ---------- */
/* 高度用同一个 --bar-h（= --tabbar-h + 26px + --safe-bottom = 74px），两边自动保持等高。
   输入框那一行（最高元素 = 输入框 36px）在整条栏里垂直居中：
   (74 - 36) / 2 = 上下各 19px。改 --tabbar-h / --bar-bottom-gap，这里跟着变。 */
.chat-input{
	min-height:var(--bar-h);      /* 一行文字时高度 = 底部导航栏（74px）；文字多了自动长高 */
	padding:8px 10px;
	align-items:center;
	gap:8px;background:#fff;border-top:1px solid #EBEBEB;
}
.chat-input .icon-btn{width:30px;height:30px;color:#191919;border-radius:8px;}
.chat-input .ico{width:23px;height:23px;}
/* 输入框用 textarea：可以换行、随内容长高（最多约 5 行，再多就在框内滚动） */
.chat-input textarea{
	flex:1;min-width:0;
	min-height:36px;max-height:100px;
	background:#F2F2F2;border-radius:8px;padding:8px 12px;
	font-family:inherit;font-size:15px;line-height:1.4;color:inherit;
	border:0;outline:0;resize:none;overflow-y:auto;
}
.chat-input textarea::placeholder{color:#B3B3B3;}
.send-btn{
	width:34px;height:34px;padding:0;border-radius:50%;flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;
	background:var(--brand-blue);color:#fff;
}
.send-btn .ico{width:19px;height:19px;stroke-width:2.4;}
.send-btn:active{background:var(--brand-blue-d);}
.send-btn.idle{background:#D8D8D8;}
/* 评论弹层里的发送按钮仍是文字胶囊，不做圆形 */
.send-btn.text{width:auto;height:32px;padding:0 14px;border-radius:8px;font-size:14px;display:block;}

/* ---------- 11. 聊天功能面板 / 表情面板 ---------- */
.func-panel,.emoji-panel{border-radius:12px 12px 0 0;box-shadow:0 -4px 20px rgba(0,0,0,.08);}
/* 这两个面板不再用暗色遮罩：要像弹出输入法那样 —— 输入栏保持可见、可直接点击打字。
   去掉遮罩后收起方式：再点一次「+」/ 表情按钮、点输入框（自动收面板）、返回键。 */
.func-mask,.emoji-mask{display:none;}
.func-ico{border-radius:12px;background:#F5F6F8;}
.func-item{color:#666;}
.emoji-head{font-size:13px;color:#999;}

/* ---------- 12. 二级页公共头部 ---------- */
.pub-page{background:var(--bg);}
.pub-head{background:#fff;border-bottom:1px solid #EBEBEB;padding:calc(9px + var(--safe-top-max)) 12px 9px;gap:6px;}
.pub-title{font-size:17px;font-weight:600;}
.text-btn{font-size:16px;color:#191919;}
.pub-submit{height:32px;padding:0 16px;border-radius:8px;background:var(--brand-blue);font-size:15px;}
.pub-submit:disabled{background:#D8D8D8;color:#fff;}
.pub-body{padding:12px 12px calc(16px + var(--safe-bottom));}
.head-holder{width:32px;}

/* ---------- 13. 设置类列表（设置 / 群管理 / 钱包明细 / 聊天设置） ---------- */
.set-body{background:var(--bg);padding:0 12px 24px;}
.set-group{background:#fff;border-radius:12px;}
.set-group-title{font-size:13px;color:#999;padding:16px 4px 8px;}
.set-row{padding:15px 16px;font-size:16px;}
.set-row + .set-row::before{left:16px;background:#EBEBEB;}
.set-row:active{background:#F2F2F2;}
.set-label{color:#191919;}
.set-value{color:#999;font-size:14.5px;}
.set-arrow{font-size:17px;color:#C8C8C8;margin-left:6px;}
.gm-danger .set-label{color:var(--red);}

/* ---------- 14. 钱包 / 会员 / 靓号 ---------- */
.wallet-card{border-radius:16px;background:var(--qq-grad);box-shadow:0 8px 20px rgba(0,130,255,.22);}
.wallet-btn{border-radius:10px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.32);}
.wallet-stats .wallet-stat{border-radius:12px;}
.wallet-stat b.in,.wal-amount.in{color:#00B96B;}
.wallet-stat b.out,.wal-amount.out{color:var(--red);}
.wallet-more{border-radius:12px;color:var(--brand-blue);font-size:15px;}
.wal-title{font-size:15.5px;}
.pn-bar{border-radius:16px;background:var(--qq-grad);box-shadow:0 8px 20px rgba(0,130,255,.22);}
.pn-tab{height:32px;line-height:32px;border-radius:8px;background:#fff;border:1px solid #EBEBEB;font-size:13px;}
.pn-tab.active{background:var(--brand-blue);border-color:var(--brand-blue);font-weight:500;}
.pn-item{border-radius:12px;background:#fff;}
.pn-buy{border-radius:8px;background:var(--brand-blue);box-shadow:none;font-size:14px;}
.pn-type{border-radius:6px;}
.vip-card{border-radius:16px;}
.vip-plan,.vip-lv{border-radius:12px;}
.vip-table{border-radius:12px;}
.vip-buy{border-radius:12px;background:linear-gradient(135deg,#F7C85C 0%,#DDA02C 100%);box-shadow:none;}
.vip-tr.head span{background:#FAFAFA;}

/* ---------- 15. 游戏中心 ---------- */
.game-grid{gap:8px;}
.game-card{border-radius:12px;background:#fff;border:0;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.game-card:active{background:#F2F2F2;}
.game-ico{border-radius:10px;background:#F2F6FB;}
.game-name{color:#191919;}
.game-tag{background:#EAF5FF;color:var(--brand-blue);}
.game-play{border-radius:8px;background:var(--brand-blue);box-shadow:none;}

/* ---------- 16. 动态 ---------- */
/* 动态页顶栏是浮在封面图上的：必须把上面通用 .topbar 的白底改回透明，
   否则白色标题「动态」落在白底上会看不见（这里是覆盖，不是重复定义） */
.qz-topbar{background:transparent;padding:calc(10px + var(--safe-top-max)) 16px 8px;}
.qz-topbar::after{display:none;}
.qz-topbar .title{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35);font-size:17px;font-weight:600;}
.qz-cover{background:var(--qq-grad);height:calc(146px + var(--safe-top-max));}   /* 沉浸时封面加上状态栏高度，内容不被挤 */
.cover-user{top:calc(48px + var(--safe-top-max));}
.qz-topbar .icon-btn{border-radius:50%;background:rgba(255,255,255,.22);}
.qz-list{background:var(--bg);}
.qz-list .moment{border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.qz-list .cm-empty{background:#fff;border-radius:12px;}
.moment-list{background:#fff;}
.moment-name{color:#191919;font-weight:600;}
.moment-text{color:#191919;}
.moment-foot .act span{border-radius:8px;}
.moment-foot .act .liked{color:var(--brand-blue);}

/* ---------- 17. 弹窗 / 底部弹层 / 信息卡片 ---------- */
.dlg{border-radius:14px;}
.dlg-title{font-size:17px;}
.dlg-btn{height:44px;border-radius:8px;background:#F2F2F2;color:#191919;font-size:16px;}
.dlg-btn.primary{background:var(--brand-blue);color:#fff;}
.dlg-btn.danger{background:var(--red);color:#fff;}
.dlg-input{border-radius:8px;background:#F5F6F8;height:46px;font-size:15.5px;}
.dlg-label{font-size:12.5px;color:#999;}
.dlg-text{color:#191919;}
.dlg-friends{border-radius:10px;background:#F7F7F7;}
.chat-more-row{border-radius:10px;background:#F5F6F8;font-size:15.5px;}
/* 信息卡片：卡片圆角和里面的 .pc-cover 必须一致，否则封面那两个上角会露出卡片白底
   （左上/右上那条白边就是这么来的）；overflow:hidden 作双保险，以后子元素圆角不一致也不漏 */
.profile-card{border-radius:14px;overflow:hidden;box-shadow:0 16px 44px rgba(0,0,0,.22);}
.pc-cover{border-radius:14px 14px 0 0;}
.pc-name{font-size:18px;}
.pc-no{color:#999;}
.pc-sign{background:#F5F6F8;border-radius:10px;color:#666;}
.pc-btn{border-radius:8px;background:var(--brand-blue);box-shadow:none;}
.pc-btn.ghost{background:#F2F2F2;color:#666;}
.sheet{border-radius:16px 16px 0 0;}
.sheet-head{border-bottom:1px solid #EBEBEB;font-size:16px;font-weight:600;}
.sheet-input input{height:36px;border-radius:8px;background:#F2F2F2;}
.fr-row .avatar{width:44px;height:44px;font-size:21px;}
.fr-name{font-size:16px;}
.fr-sub{color:#999;}
.fr-btn{height:30px;border-radius:8px;background:var(--brand-blue);}
.fr-btn.gray{background:#F2F2F2;color:#666;}
.cm-name{color:#999;}
.cm-text{color:#191919;}
.cm-empty{color:#B3B3B3;}
.nt-title{font-size:16px;}
.nt-text{color:#191919;}
.nt-time{color:#B3B3B3;}
.gj-name{font-size:16px;}
.gj-sub{color:#999;}
.gj-tag{border-radius:8px;background:var(--brand-blue);}
.gj-tag.on{background:#F2F2F2;color:#666;}
.gm-name{font-size:16px;}
.gm-btn{border-radius:8px;background:#F2F2F2;color:#3B5670;}
.gm-btn.danger{background:#FFF0F0;color:var(--red);}
.gm-badge{border-radius:6px;}

/* ---------- 18. 发表动态 ---------- */
.pub-grid{gap:8px;}
.pub-ph,.pub-add{border-radius:8px;}
.pub-add{border:1px dashed #D8D8D8;background:#F7F7F7;color:#C8C8C8;}
.pub-row{border-top:1px solid #EBEBEB;}
.pub-label{color:#191919;}
.pub-value{color:#999;}

/* ---------- 19. Toast / 空态 ---------- */
.toast{border-radius:8px;background:rgba(0,0,0,.76);font-size:14px;padding:10px 16px;}
.empty{color:#B3B3B3;}

/* ---------- 20. 登录 / 注册：QQ 9 白底简洁风 ---------- */
.login-page{background:#fff;}
.lg-bg{display:none;}
.lg-logo{
	width:72px;height:72px;margin:0 auto 14px;border-radius:20px;
	display:flex;align-items:center;justify-content:center;
	background:var(--qq-grad);color:#fff;font-size:40px;font-weight:700;
	box-shadow:0 10px 24px rgba(0,130,255,.28);
}
.login-brand{padding-bottom:30px;}
.login-title{
	font-size:28px;font-weight:700;letter-spacing:1px;
	color:var(--brand-blue);background:none;
	-webkit-background-clip:border-box;background-clip:border-box;
	-webkit-text-fill-color:var(--brand-blue);filter:none;
}
.login-sub{margin-top:6px;font-size:12px;letter-spacing:1px;color:#B3B3B3;}
.login-tabs{background:#F5F6F8;border:0;box-shadow:none;border-radius:9px;padding:3px;margin-bottom:18px;}
.login-tab{height:38px;border-radius:7px;font-size:16px;color:#666;}
.login-tab.active{color:var(--brand-blue);font-weight:600;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.login-input{
	height:48px;margin-top:12px;border-radius:8px;border:0;box-shadow:none;
	background:#F5F6F8;color:#191919;font-size:16px;
}
.login-input::placeholder{color:#B3B3B3;}
.login-input:focus{border:0;background:#fff;box-shadow:inset 0 0 0 1px var(--brand-blue);}
.login-hint{color:#B3B3B3;}
.login-btn{
	height:48px;margin-top:22px;border-radius:8px;font-size:17px;font-weight:500;letter-spacing:0;
	background:var(--brand-blue);box-shadow:none;
}
.login-btn:active{background:var(--brand-blue-d);transform:none;filter:none;box-shadow:none;}
.login-btn:disabled{background:#D8D8D8;color:#fff;box-shadow:none;}
.login-msg{color:var(--red);}
.login-loading{background:rgba(255,255,255,.86);color:#666;}
.lg-spin{border-color:rgba(0,153,255,.2);border-top-color:var(--brand-blue);}
.lg-avatar .avatar{width:56px;height:56px;font-size:26px;box-shadow:none;border-radius:12px;}
.lg-avatar-btn{height:32px;padding:0 14px;border-radius:8px;font-size:13.5px;color:var(--brand-blue);background:#EAF5FF;border:0;}
.login-page .lg-av.active{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--brand-blue);}

/* ---------- 21. 聊天红包 ---------- */
.rp-bubble{border-radius:8px;}
.rp-card{border-radius:16px;}
.rp-field{border-radius:8px;background:#F5F6F8;}
.rp-kind{border-radius:8px;background:#F5F6F8;}
.rp-hero{box-shadow:0 8px 20px rgba(0,0,0,.18);}


/* ---------- 22. 弹窗式面板（新朋友 / 我的群聊 / 官方公告） ---------- */
/* 这三个原来是「从底部升起的抽屉」，改成居中弹窗：
   只加 .popup 类，评论弹层（#cmSheet）仍是底部抽屉，互不影响 */
.sheet.popup{
	left:50%;right:auto;bottom:auto;top:50%;
	width:86%;max-width:340px;max-height:76%;
	border-radius:14px;
	opacity:0;
	transform:translate(-50%,-50%) scale(.94);
	box-shadow:0 18px 50px rgba(0,0,0,.22);
	transition:transform .22s cubic-bezier(.32,.72,.28,1),opacity .22s,visibility .22s;
}
.sheet.popup.open{transform:translate(-50%,-50%) scale(1);opacity:1;}
.sheet.popup .sheet-head{
	border-radius:14px 14px 0 0;
	background:#fff;
}
.sheet.popup .sheet-list{padding:8px 16px 14px;}

/* ==========================================================================
   23. 视觉重设计（2026-10-14）
   —— 蓝色系 · 现代卡片风：冷灰底 + 白卡片 + 极淡投影 + 统一圆角
   --------------------------------------------------------------------------
   本文件在 style.css 之后加载、这些规则又写在文件末尾 → 同优先级下覆盖上面的旧取值。
   只动「颜色 / 圆角 / 阴影 / 间距 / 字重」，不动任何尺寸变量（--bar-h、安全区、封面高度…），
   所以布局约定（docs/ui-conventions.md）全部继续成立。
   ========================================================================== */

/* ---------- 23.1 底色与文字层次 ---------- */
/* ⚠️ 动态页（.qz-list）不在这里面：它要「灰底 + 白卡片」的层次，由第 16 节 / 23.11 负责 */
.view,.list{background:var(--card);}

/* ---------- 23.2 顶栏 / 搜索框：去掉硬线，改用留白与柔和底 ----------
   ⚠️ 必须排除 .qz-topbar（动态页顶栏是浮在封面上的透明栏）：
      两者都是单类选择器、本文件后写的赢，写成 .topbar 会把透明顶栏刷成白底，
      表现为「封面顶部一节白、白色标题看不见」。css 第 7 条坑。 */
.topbar:not(.qz-topbar){padding:calc(12px + var(--safe-top-max)) 16px 10px;background:var(--card);}
.topbar::after{display:none;}
.topbar:not(.qz-topbar) .title{font-size:18px;font-weight:600;letter-spacing:.2px;}
.search{height:36px;border-radius:12px;background:#F4F6FA;padding:0 12px;}
.search:focus-within{background:#EFF4FF;box-shadow:inset 0 0 0 1px rgba(26,132,255,.35);}
.icon-btn{border-radius:10px;}
.icon-btn:active{background:#F1F4F9;}

/* ---------- 23.3 会话 / 联系人列表：行距更松，标题与摘要拉开层次 ---------- */
.row{padding:12px 16px;gap:13px;}
.row::after{left:79px;background:var(--line);}
.row:active{background:#F5F7FB;}
.row.pinned{background:#F8FAFF;}
.row-name{font-size:15.5px;font-weight:600;letter-spacing:.1px;}
.row-desc{font-size:13px;color:var(--text-2);margin-top:5px;}
.row-time{font-size:11px;color:var(--text-3);}
.tag{border-radius:5px;padding:1px 6px;font-size:10px;}
.group-head{padding:8px 16px;background:var(--bg);color:var(--text-2);}

/* ---------- 23.4 底部导航：白底 + 柔和投影；选中项一个淡蓝药丸 ---------- */
.tabbar{background:var(--card);border-top:0;box-shadow:var(--sd-bar);}
.tabbar::before{display:none;}
.tab{color:#98A1AE;font-size:10px;gap:2px;}
.tab.active{color:var(--brand-blue);font-weight:600;}
.tab .tab-ico{padding:3px 11px;border-radius:11px;transition:background .18s;}
.tab.active .tab-ico{background:rgba(26,132,255,.10);}
.tab-badge{background:var(--red);border:1.5px solid #fff;}

/* ---------- 23.5 聊天页：更轻的底 + 统一大圆角气泡 ---------- */
.chat-page{background:#F3F5F9;}
.chat-head{background:var(--card);border-bottom:0;box-shadow:0 1px 0 rgba(16,24,40,.05);}
.chat-title span{font-size:17px;font-weight:600;}
.chat-body{padding:14px 12px 20px;}
.chat-time{color:var(--text-3);}
.msg-bubble{
	padding:10px 13px;border-radius:14px;line-height:1.5;
	background:var(--card);border:1px solid var(--line);box-shadow:0 1px 2px rgba(16,24,40,.04);
}
/* 小尖角：改成旋转 90° 的小方块，和圆角衔接更自然 */
.msg-bubble::after{
	top:14px;left:-5px;width:9px;height:9px;border:0;border-radius:2px;
	background:var(--card);transform:rotate(45deg);
}
.msg.me .msg-bubble{
	background:var(--qq-grad);border-color:transparent;color:#fff;
	box-shadow:0 2px 8px rgba(10,107,255,.24);
}
.msg.me .msg-bubble::after{left:auto;right:-5px;background:#0E74FF;}
.msg-name{color:var(--text-2);}
.msg-time{color:var(--text-3);}
.msg-revoked{color:var(--text-3);}

/* ---------- 23.6 聊天输入栏 ---------- */
.chat-input{background:var(--card);border-top:0;box-shadow:var(--sd-bar);}
.chat-input textarea{background:#F4F6FA;border-radius:12px;padding:9px 14px;}
.chat-input textarea:focus{background:#EFF4FF;box-shadow:inset 0 0 0 1px rgba(26,132,255,.3);}
.send-btn{background:var(--qq-grad);box-shadow:0 2px 8px rgba(10,107,255,.28);}
.send-btn.idle{background:#DCE1E9;box-shadow:none;}

/* ---------- 23.7 二级页 / 设置类分组：分组做成带投影的白卡片 ---------- */
.pub-page{background:var(--bg);}
.pub-head{background:var(--card);border-bottom:0;box-shadow:0 1px 0 rgba(16,24,40,.05);}
.set-body,.pub-body{background:var(--bg);}
.set-group{background:var(--card);border-radius:var(--r-md);box-shadow:var(--sd-card);overflow:hidden;}
.set-group-title{font-size:12.5px;color:var(--text-2);padding:18px 6px 8px;}
.set-row{padding:15px 16px;font-size:15.5px;}
.set-row + .set-row::before{left:16px;background:var(--line);}
.set-row:active{background:#F5F7FB;}
.set-arrow{color:#C7CDD8;}
.pub-submit{border-radius:10px;background:var(--qq-grad);}

/* ---------- 23.8 抽屉 ---------- */
.drawer{background:var(--card);}
.drawer-head{background:var(--qq-grad);padding:calc(26px + var(--safe-top-max)) 18px 22px;}
.drawer-card{border-radius:var(--r-lg);box-shadow:var(--sd-card);}
.drawer-item{padding:15px 18px;}
.drawer-menu .drawer-item + .drawer-item{border-top:1px solid var(--line);}
.drawer-item:active{background:#F5F7FB;}
.drawer-logout{border-top:1px solid var(--line);}

/* ---------- 23.9 登录 / 注册：浅蓝渐变底 + 无边框输入 ---------- */
.login-page{background:linear-gradient(180deg,#E9F2FF 0%,#F5F9FF 44%,#FFFFFF 100%);}
.lg-logo{border-radius:22px;box-shadow:0 12px 26px rgba(10,107,255,.26);}
.login-title{font-size:27px;letter-spacing:3px;}
.login-tabs{background:#E8EEF8;}
.login-input{background:#F4F6FA;border-radius:12px;}
.login-input:focus{background:#fff;box-shadow:inset 0 0 0 1.5px var(--brand-blue);}
.login-btn{border-radius:12px;background:var(--qq-grad);box-shadow:0 8px 20px rgba(10,107,255,.24);}
.login-btn:active{background:var(--brand-blue-d);box-shadow:0 4px 12px rgba(10,107,255,.22);}
.lg-avatar .avatar{width:64px;height:64px;border-radius:18px;}
.lg-avatar-btn{border-radius:10px;background:#EAF2FF;font-weight:600;}

/* ---------- 23.10 弹窗 / 面板 / 卡片：统一圆角与投影 ---------- */
.dlg{border-radius:var(--r-lg);box-shadow:0 18px 48px rgba(16,24,40,.24);}
.dlg-btn{border-radius:10px;}
.dlg-btn.primary{background:var(--qq-grad);}
.dlg-input{border-radius:10px;background:#F4F6FA;}
.plus-menu{border-radius:var(--r-md);box-shadow:0 12px 32px rgba(16,24,40,.18);}
.plus-item:active{background:#F5F7FB;}
.sheet{border-radius:20px 20px 0 0;box-shadow:0 -8px 30px rgba(16,24,40,.14);}
.sheet-head{border-bottom:1px solid var(--line);}
.sheet-input input{border-radius:10px;background:#F4F6FA;}
.profile-card{border-radius:var(--r-lg);box-shadow:0 18px 46px rgba(16,24,40,.24);}
.pc-cover{border-radius:var(--r-lg) var(--r-lg) 0 0;}
.pc-btn{border-radius:10px;background:var(--qq-grad);}
.quick-ico{border-radius:12px;}
.func-panel,.emoji-panel{border-radius:18px 18px 0 0;box-shadow:0 -8px 28px rgba(16,24,40,.12);}
.func-ico{border-radius:14px;background:#F4F6FA;}
.qz-list{background:var(--bg);}
.qz-list .moment{border-radius:var(--r-md);box-shadow:var(--sd-card);}
.game-card,.pn-item,.wallet-stats .wallet-stat{border-radius:var(--r-md);}
.game-card{border:0;box-shadow:var(--sd-card);}
.toast{border-radius:10px;background:rgba(17,24,39,.82);}

/* ==========================================================================
   23.11 「封面类」页面的保护性覆盖（动态页 / 某个人的动态页）
   --------------------------------------------------------------------------
   这两页的顶栏是**浮在封面图上**的透明栏。第 23 节里的通用规则（.topbar / .pub-head）
   会和它们的选择器同级，靠"后写的赢"容易被刷成白底 —— 表现就是「封面顶部一节白、
   白色标题看不见」。这里在**文件最末尾**再用完整选择器钉一次，任何人往上面加通用规则
   都不会再破坏它（对应 docs/ui-conventions.md 第五节第 7 条）。
   ========================================================================== */
.qz-cover{background:var(--qq-grad);}          /* 没设封面图时的默认渐变（设了图走内联 background-image） */
.qz-topbar,
.pub-head.qz-topbar{
	background:transparent;
	border-bottom:0;
	box-shadow:none;
	padding:calc(10px + var(--safe-top-max)) 16px 8px;
}
.qz-topbar .title{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35);font-size:17px;font-weight:600;}
.qz-topbar .icon-btn{border-radius:50%;background:rgba(255,255,255,.22);color:#fff;}
/* 动态列表：灰底 + 白卡片（别被通用的 .list / .moment-list 白底盖掉层次） */
.qz-list{background:var(--bg);}
.qz-list .moment{background:var(--card);}

/* ==========================================================================
   24. 资料卡片（对齐手机 QQ 资料卡）—— 皮肤层
   --------------------------------------------------------------------------
   结构（高度 / 负 margin / 布局）在 style.css 的「资料卡片」一节，
   这里只管配色、圆角、描边、按钮，并**写在文件最末尾**，
   防止第 17 / 23 节的通用规则把新卡片盖回旧样子（同第五节第 7、12 条那两个坑）。
   ========================================================================== */
.profile-card{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 20px 52px rgba(16,24,40,.30);}
.pc-cover{border-radius:var(--r-lg) var(--r-lg) 0 0;}
.pc-loading{color:var(--text-3);}
.pc-name{font-size:18px;}
/* 小标签：普通（泡泡号 / 非好友）灰胶囊，好友是淡蓝胶囊 */
.pc-tag{background:#F1F4F9;color:#6B7280;}
.pc-tag.rel.friend{background:#E8F2FF;color:var(--brand-blue);}
.pc-tag.rel{color:#8A93A6;}
/* 签名区做成一张浅底卡片 */
.pc-sign{background:#F4F6FA;border-radius:12px;color:#5A6070;}
.pc-sign.empty{color:var(--text-3);}
/* 按钮：主按钮蓝渐变，次要按钮浅灰（QQ 资料卡底部就是这种对比） */
.pc-btn{border-radius:10px;background:var(--qq-grad);box-shadow:0 6px 16px rgba(10,107,255,.22);}
.pc-btn:active{filter:brightness(1.05);}
.pc-btn.ghost{background:#F2F4F8;color:#5A6070;box-shadow:none;}
.pc-btn:disabled{opacity:.55;}