/* 云信 H5 样式 —— 还原设计稿 iOS 风格 */
:root{
  --primary:#2B6CF6;
  --bg:#F4F6F9;
  --card:#FFFFFF;
  --text:#161A20;
  --sub:#8B93A1;
  --muted:#B6BDC8;
  --line:#EEF1F5;
  --field:#F4F6F9;
  --danger:#D26A6A;
  --online:#2FB170;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;}
body{
  font-family:"Helvetica Neue",-apple-system,"PingFang SC","Microsoft YaHei","Inter",sans-serif;
  -webkit-font-smoothing:antialiased;background:#E9EDF2;color:var(--text);
  /* 视口容器：不缩放、不滚动，负责裁剪外框。
     窄屏（手机）左上锚定——外框渲染宽高恒 ≤ 视口，从 left:0 起绘，绝不右溢出；
     宽屏（桌面浏览器）留白充足才居中。 */
  display:flex;justify-content:flex-start;align-items:flex-start;
}
@media (min-width:480px){ body{ justify-content:center; } }
::-webkit-scrollbar{display:none;}
button{font-family:inherit;}
img{display:block;}

/* 手机外框 + 全局缩放：
   --gs 由「通用」滑块控制（默认 1）。zoom 等比缩放字体/图标/间距；
   宽高用 min() 反向补偿并夹取——渲染尺寸恒 ≤ 视口，永不向右/向下溢出。 */
#app{
  --gs:1;zoom:var(--gs);flex:0 0 auto;margin:0;
  width:min(100%, calc(100% / var(--gs)));
  max-width:calc(440px / var(--gs));
  height:min(100%, calc(100% / var(--gs)));
  background:var(--bg);
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 0 40px rgba(0,0,0,.08);
}
#app.mode-switching{transition:max-width .44s cubic-bezier(.4,.6,.1,1),width .44s cubic-bezier(.4,.6,.1,1),height .44s cubic-bezier(.4,.6,.1,1),margin .44s cubic-bezier(.4,.6,.1,1),border-radius .44s ease;animation:modeFade .44s ease;}
@keyframes modeFade{0%{opacity:.5;}60%{opacity:.85;}100%{opacity:1;}}
.view{position:absolute;inset:0;display:none;flex-direction:column;background:var(--bg);}
.view.active{display:flex;}
.hidden{display:none !important;}

/* ============ 电脑模式（我的 → 通用 开启，左右分栏适配电脑） ============ */
html.yx-desktop body{background:#DCE1E9;}
html.yx-desktop #app{
  width:min(96%, calc(96% / var(--gs)));
  max-width:calc(1180px / var(--gs));
  height:min(calc(100% - 48px), calc((100% - 48px) / var(--gs)));
  margin:calc(24px / var(--gs)) 0;border-radius:20px;box-shadow:0 22px 70px rgba(22,26,32,.20);
}
/* 登录页：即使在电脑模式也用手机尺寸的居中卡片，避免比例过大 */
html.yx-desktop:has(#view-auth.active) #app{
  width:min(100%, calc(100% / var(--gs)));max-width:calc(440px / var(--gs));
  height:min(100%, calc(100% / var(--gs)));margin:0;border-radius:0;
}
html.yx-desktop .safe-top{min-height:0;height:0;}
/* 左栏：会话 / 通讯录 / 我的 */
html.yx-desktop #view-chats,
html.yx-desktop #view-contacts,
html.yx-desktop #view-me{right:auto;width:328px;border-right:1px solid #D8DEE7;box-shadow:1px 0 0 #fff,4px 0 16px rgba(22,26,32,.04);}
/* 右栏：聊天与各二级页 */
html.yx-desktop #view-chat,
html.yx-desktop #view-requests,
html.yx-desktop #view-add,
html.yx-desktop #view-group,
html.yx-desktop #view-profile,
html.yx-desktop #view-password,
html.yx-desktop #view-page,
html.yx-desktop #view-empty{left:328px;right:0;width:auto;}
/* 登录页整屏、内容居中 */
html.yx-desktop #view-auth{inset:0;width:auto;}
html.yx-desktop .auth-wrap{max-width:430px;margin:0 auto;width:100%;}
/* 电脑模式下聊天页不需要返回按钮（左栏常驻） */
html.yx-desktop #chat-back{display:none;}
/* 右栏空状态占位 */
.view-empty-inner{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg);}
.view-empty-inner .ph-logo{width:78px;height:78px;border-radius:22px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(22,26,32,.08);}
.view-empty-inner .ph-t{font-size:15px;color:var(--sub);}
/* 桌面滚动条 */
html.yx-desktop ::-webkit-scrollbar{display:block;width:8px;height:8px;}
html.yx-desktop ::-webkit-scrollbar-thumb{background:rgba(139,147,161,.4);border-radius:4px;}
html.yx-desktop ::-webkit-scrollbar-track{background:transparent;}

/* 顶部安全区 */
.safe-top{height:env(safe-area-inset-top,6px);min-height:6px;flex-shrink:0;background:#fff;}

/* ============ 登录 / 注册 ============ */
#view-auth{background:#fff;}
.auth-wrap{flex:1;display:flex;flex-direction:column;padding:0 30px;overflow:auto;}
.auth-logo{display:flex;flex-direction:column;align-items:center;margin-top:64px;}
.logo-badge{width:66px;height:66px;border-radius:20px;background:var(--primary);position:relative;box-shadow:0 10px 24px rgba(43,108,246,.30);}
.logo-badge i{position:absolute;background:#fff;}
.logo-badge i:nth-child(1){left:15px;top:17px;width:24px;height:18px;border-radius:8px 8px 8px 2px;}
.logo-badge i:nth-child(2){left:27px;top:28px;width:24px;height:18px;border-radius:8px 8px 2px 8px;background:rgba(255,255,255,.55);}
.auth-title{margin-top:22px;font-size:25px;font-weight:700;letter-spacing:.04em;}
.auth-sub{margin-top:8px;font-size:14px;color:var(--sub);letter-spacing:.02em;}
.auth-form{margin-top:40px;display:flex;flex-direction:column;gap:14px;}
.field{height:54px;background:var(--field);border-radius:13px;display:flex;align-items:center;padding:0 16px;gap:10px;}
.field input{flex:1;border:none;background:transparent;font-size:16px;color:var(--text);outline:none;min-width:0;}
.field .code-btn{border:none;background:transparent;color:var(--primary);font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;padding:6px 4px;}
.field .code-btn:disabled{color:var(--muted);}
.btn-primary{margin-top:24px;height:54px;border:none;border-radius:14px;background:var(--primary);color:#fff;font-size:16px;font-weight:600;letter-spacing:.06em;cursor:pointer;box-shadow:0 8px 20px rgba(43,108,246,.28);}
.btn-primary:active{opacity:.9;}
.btn-primary:disabled{opacity:.55;box-shadow:none;}
.auth-switch{margin-top:18px;display:flex;align-items:center;justify-content:space-between;font-size:13.5px;}
.auth-switch .muted{color:var(--sub);}
.auth-switch .link{color:var(--primary);font-weight:500;cursor:pointer;}
.auth-foot{margin-top:auto;padding:24px 0 34px;text-align:center;font-size:11.5px;color:#9AA1AE;line-height:1.5;}
.auth-foot span{color:var(--primary);}

/* ============ 通用页头 ============ */
.page-head{flex-shrink:0;background:#fff;padding:12px 18px;border-bottom:1px solid var(--line);}
.page-head .row{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 12px;}
.page-title{font-size:28px;font-weight:700;letter-spacing:.01em;}
.head-btn{width:38px;height:38px;border-radius:50%;background:var(--bg);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.search-bar{height:38px;background:#EDF0F4;border-radius:11px;display:flex;align-items:center;gap:8px;padding:0 12px;}
.search-bar input{flex:1;border:none;background:transparent;font-size:14.5px;outline:none;color:var(--text);}
.search-bar input::placeholder{color:#9AA1AE;}

/* ============ 列表通用 ============ */
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;background:#fff;}
.cell{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;position:relative;}
.cell:active{background:#F7F9FC;}
.cell .divider{position:absolute;left:76px;right:0;bottom:0;height:1px;background:var(--line);}
.avatar{width:48px;height:48px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;flex-shrink:0;overflow:hidden;background-size:cover;background-position:center;}
.avatar.sq{border-radius:15px;font-size:16px;}
.avatar.sm{width:42px;height:42px;font-size:16px;border-radius:50%;}
.avatar.sm.sq{border-radius:12px;}
.avatar.feat-av{background:linear-gradient(135deg,#5B8DEF,#2B6CF6);}
.cell-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.cell-line1{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.cell-name{font-size:16px;font-weight:600;}
.cell-time{font-size:12px;color:var(--muted);flex-shrink:0;}
.cell-line2{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.cell-desc{flex:1;font-size:13.5px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.badge{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--primary);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;}
.badge.red{background:var(--danger);}
.empty{padding:60px 20px;text-align:center;color:var(--muted);font-size:14px;}

/* ============ 底部 Tab ============ */
.tabbar{flex-shrink:0;background:#fff;border-top:1px solid var(--line);display:flex;padding:8px 0 calc(env(safe-area-inset-bottom,10px) + 14px);}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;position:relative;}
.tab span{font-size:10.5px;color:var(--muted);}
.tab.active span{color:var(--primary);font-weight:600;}
.tab svg path,.tab svg rect,.tab svg circle{stroke:var(--muted);}
.tab.active svg path,.tab.active svg rect,.tab.active svg circle{stroke:var(--primary);}
.tab .dot{position:absolute;top:-2px;right:calc(50% - 18px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--danger);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;}

/* ============ 聊天对话 ============ */
.chat-head{flex-shrink:0;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:8px;display:flex;align-items:center;}
.chat-head .nav{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.chat-head .ct{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;}
.chat-head .ct .nm{font-size:16.5px;font-weight:600;}
.chat-head .ct .st{font-size:11.5px;color:var(--online);}
.chat-head .ct .st.off{color:var(--muted);}
/* 消息区底部内边距 + 负外边距：让输入框悬浮叠在消息之上，消息从液态玻璃后面滚过 */
.chat-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 16px 82px;margin-bottom:-72px;display:flex;flex-direction:column;gap:2px;}
/* 连续同发送者气泡合并：组首/单条之间留大间距，组内紧贴 */
.bubble-row.grp-first,.bubble-row.grp-single{margin-top:9px;}
.chat-body>.msg-time,.chat-body>.msg-sys{margin-top:9px;margin-bottom:2px;}
.chat-body>.bubble-row:first-child,.chat-body>.msg-time:first-child,.chat-body>.msg-sys:first-child{margin-top:2px;}
.msg-time{align-self:center;font-size:11.5px;color:#A8AFBC;background:rgba(0,0,0,.04);padding:3px 10px;border-radius:8px;}
.msg-sys{align-self:center;font-size:12px;color:#A8AFBC;padding:2px 10px;}
.bubble-row{display:flex;gap:8px;max-width:82%;}
.bubble-row.me{align-self:flex-end;flex-direction:row-reverse;}
.bubble-row.other{align-self:flex-start;}
.bubble-row .avatar.sm{width:34px;height:34px;font-size:14px;}
.bubble-wrap{display:flex;flex-direction:column;gap:3px;min-width:0;}
.bubble-name{font-size:11.5px;color:var(--sub);padding:0 4px;}
.bubble{padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.45;word-break:break-word;white-space:pre-wrap;transition:border-radius .18s ease;}
.other .bubble{background:#fff;border:1px solid var(--line);border-bottom-left-radius:7px;}
.me .bubble{background:var(--primary);color:#fff;border-bottom-right-radius:7px;}
/* 组内相邻一侧收小圆角，形成 Telegram 合并效果 */
.bubble-row.me.grp-mid .bubble,.bubble-row.me.grp-last .bubble{border-top-right-radius:7px;}
.bubble-row.other.grp-mid .bubble,.bubble-row.other.grp-last .bubble{border-top-left-radius:7px;}
/* 组内非首条隐藏群昵称（同一人连续消息只显示一次） */
.bubble-row.grp-mid .bubble-name,.bubble-row.grp-last .bubble-name{display:none;}
.bubble.img{padding:0;overflow:hidden;background:none;border:none;}
.bubble.img img{max-width:200px;border-radius:16px;}
.bubble.file{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);color:var(--text);min-width:180px;}
.me .bubble.file{background:#fff;color:var(--text);}
.bubble.file .fi{width:36px;height:36px;border-radius:8px;background:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bubble.file .fmeta{min-width:0;}
.bubble.file .fname{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;}
.bubble.file .fsize{font-size:11px;color:var(--sub);}
.bubble.pending{opacity:.6;}
/* 气泡内引用条 */
.bubble-quote{display:block;font-size:12.5px;line-height:1.4;padding:6px 9px;margin-bottom:6px;border-radius:8px;background:rgba(0,0,0,.05);color:var(--sub);border-left:3px solid var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.me .bubble-quote{background:rgba(255,255,255,.2);color:#eaf0ff;border-left-color:rgba(255,255,255,.55);}
.bubble-quote .q-name{display:block;font-weight:600;margin-bottom:1px;opacity:.9;}
/* 选中高亮 */
.bubble-row.bm-sel .bubble{filter:brightness(.94);}

/* ============ 微信式气泡菜单 ============ */
.bubble-menu-mask{position:absolute;inset:0;z-index:6200;}
.bubble-menu{position:absolute;display:flex;background:var(--card);border-radius:12px;padding:4px;box-shadow:0 10px 30px rgba(22,26,32,.20),0 2px 8px rgba(22,26,32,.1);animation:bmIn .14s ease-out;max-width:calc(100% - 16px);flex-wrap:wrap;justify-content:center;}
.bubble-menu .bm-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 12px;cursor:pointer;color:var(--text);border-radius:9px;min-width:52px;}
.bubble-menu .bm-item:active{background:var(--field);}
.bubble-menu .bm-item svg{width:22px;height:22px;}
.bubble-menu .bm-item span{font-size:12px;white-space:nowrap;}
.bubble-menu .bm-arrow{position:absolute;bottom:-6px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid var(--card);transform:translateX(-7px);filter:drop-shadow(0 2px 1px rgba(22,26,32,.08));}
.bubble-menu .bm-arrow.below{bottom:auto;top:-6px;border-top:none;border-bottom:7px solid var(--card);filter:drop-shadow(0 -2px 1px rgba(22,26,32,.08));}
@keyframes bmIn{from{opacity:0;transform:translateY(4px) scale(.96);}to{opacity:1;transform:none;}}

/* 引用输入栏 */
.reply-bar{flex-shrink:0;position:relative;z-index:2;margin:4px 10px 0;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.55);border-radius:16px;padding:8px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 16px rgba(22,26,32,.1);}
.reply-bar.hidden{display:none;}
.reply-bar .rq-body{flex:1;min-width:0;font-size:13px;color:var(--sub);background:var(--field);border-radius:8px;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.reply-bar .rq-name{color:var(--primary);font-weight:600;margin-right:6px;}
.reply-bar .rq-close{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--sub);cursor:pointer;border-radius:6px;font-size:15px;}
.reply-bar .rq-close:active{background:var(--field);}

/* 输入区 —— 液态玻璃圆角悬浮（Telegram 风） */
.chat-input{
  flex-shrink:0;position:relative;z-index:2;
  margin:6px 10px calc(env(safe-area-inset-bottom,8px) + 8px);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(28px) saturate(190%);
  backdrop-filter:blur(28px) saturate(190%);
  border:1px solid rgba(255,255,255,.6);
  border-radius:26px;
  box-shadow:0 8px 24px rgba(22,26,32,.14),inset 0 1px 0 rgba(255,255,255,.55);
  padding:4px 8px;display:flex;align-items:flex-end;gap:6px;
}
.chat-input .ic{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-bottom:3px;}
.chat-input #btn-emoji{transition:transform .18s ease;}
.chat-input #btn-emoji:active{transform:scale(.82);}
.chat-input #btn-emoji.on{transform:scale(1.08);}
.chat-input .box{flex:1;min-height:32px;max-height:116px;background:transparent;border-radius:18px;padding:6px 6px;font-size:15px;line-height:1.3;outline:none;overflow:auto;border:none;resize:none;color:var(--text);}
/* 文件键 / 发送键 同槽位切换（有无文字时形变） */
.chat-input .send-slot{position:relative;width:34px;height:34px;flex-shrink:0;margin-bottom:0;}
.chat-input .send-slot .ic,.chat-input .send-slot .send{position:absolute;inset:0;width:34px;height:34px;margin:0;transition:opacity .2s ease,transform .28s cubic-bezier(.34,1.5,.5,1);}
.chat-input .send{border:none;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px rgba(43,108,246,.3);}
/* 默认（无文字）：显示文件键，隐藏发送键 */
.chat-input .send-slot #btn-plus{opacity:1;transform:scale(1) rotate(0);pointer-events:auto;}
.chat-input .send-slot .send{opacity:0;transform:scale(.3) rotate(-90deg);pointer-events:none;}
/* 有文字：文件键 → 发送键 */
.chat-input.has-text .send-slot #btn-plus{opacity:0;transform:scale(.3) rotate(90deg);pointer-events:none;}
.chat-input.has-text .send-slot .send{opacity:1;transform:scale(1) rotate(0);pointer-events:auto;}

/* 表情面板 */
.emoji-panel{flex-shrink:0;position:relative;z-index:2;background:#fff;border-top:1px solid var(--line);height:200px;overflow:auto;padding:10px;display:grid;grid-template-columns:repeat(8,1fr);gap:6px;transform-origin:bottom center;animation:emojiUp .28s cubic-bezier(.2,.8,.3,1);}
@keyframes emojiUp{from{opacity:0;transform:translateY(16px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.emoji-panel span{font-size:24px;text-align:center;cursor:pointer;padding:4px 0;border-radius:8px;transition:transform .12s ease,background .12s;}
.emoji-panel span:active{background:var(--bg);transform:scale(1.35);}

/* 底部动作面板图标（在线状态等） */
.sheet .sheet-item.has-ic{display:flex;align-items:center;justify-content:center;gap:10px;}
.sheet .sheet-item svg{flex-shrink:0;}
.st-ic{width:22px;height:22px;}

/* 会话设置 */
.avatar.lg{width:76px;height:76px;font-size:30px;border-radius:24px;}
.cs-head{background:#fff;padding:26px 20px 22px;display:flex;flex-direction:column;align-items:center;gap:9px;border-bottom:1px solid var(--line);}
.cs-name{font-size:20px;font-weight:700;display:flex;align-items:center;gap:6px;cursor:pointer;}
.cs-name .cs-edit{width:17px;height:17px;color:var(--sub);}
.cs-id{font-size:13px;color:var(--sub);letter-spacing:.02em;}
.set-row .mi-val{font-size:14px;color:var(--sub);}
.cs-row{cursor:pointer;}
.cs-sign .sub{margin-top:5px;line-height:1.5;color:var(--text);opacity:.85;}

/* 群聊设置 */
.gav{position:relative;display:inline-block;cursor:default;}
.gav.editable{cursor:pointer;}
.gav-cam{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:0 2px 6px rgba(22,26,32,.2);}
.gm-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px 8px;}
.gm{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;min-width:0;width:100%;}
.gm .avatar.sm{width:46px;height:46px;}
.gm-name{font-size:11.5px;color:var(--sub);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;}
.gm-tags{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;}
.gm-tag{font-size:9.5px;line-height:1;padding:2px 4px;border-radius:5px;}
.gm-tag.owner{background:#FFF0DB;color:#C58A2E;}
.gm-tag.admin{background:#E4EDFF;color:var(--primary);}
.gm-tag.muted{background:#FDECEC;color:var(--danger);}

/* 系统公告：会话列表置顶入口 */
.ann-cell .ann-av{background:linear-gradient(135deg,#FFA53B,#FF7A45);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(255,122,69,.28);}
.ann-cell .ann-av svg{width:26px;height:26px;}
/* 系统公告：只读会话式页面 */
.ann-feed{padding:16px;display:flex;flex-direction:column;gap:14px;background:var(--bg);min-height:100%;}
.ann-bubble{background:#fff;border:1px solid var(--line);border-radius:14px;border-top-left-radius:5px;padding:14px 16px;box-shadow:0 2px 8px rgba(22,26,32,.05);animation:bubbleIn .24s cubic-bezier(.2,.7,.3,1);}
.ann-title{font-size:15px;font-weight:700;margin-bottom:7px;display:flex;align-items:center;gap:6px;}
.ann-title::before{content:'📢';font-size:15px;}
.ann-content{font-size:14px;line-height:1.65;color:var(--text);white-space:pre-wrap;word-break:break-word;}
.ann-time{font-size:11.5px;color:var(--muted);margin-top:9px;}

/* ============ 通讯录索引 ============ */
.idx-label{padding:6px 16px 5px;background:var(--bg);font-size:12.5px;font-weight:600;color:var(--sub);}
.contact-entry .avatar.sm{border-radius:12px;}

/* ============ 我的 ============ */
#view-me .scroll{background:var(--bg);}
/* 商业版菜单项：渐变蓝—紫高亮（替代原金色） */
.menu-item.mi-premium .mi-name{background:linear-gradient(90deg,#4A86FF,#7C5CFF 55%,#B15CE8);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-weight:600;}

/* ============ 云信高级版 ============ */
.premium-hero{background:linear-gradient(135deg,#F2A93B,#E98A2E);color:#fff;padding:30px 20px 26px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.premium-hero .ph-crown{width:72px;height:72px;border-radius:22px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(233,138,46,.4);}
.premium-hero .ph-title{font-size:22px;font-weight:800;letter-spacing:.02em;}
.premium-hero .ph-slogan{font-size:13.5px;opacity:.92;line-height:1.5;}
.premium-hero .ph-badge{margin-top:4px;background:rgba(255,255,255,.22);border-radius:20px;padding:4px 14px;font-size:13px;font-weight:600;}
.premium-feats{margin-top:12px;}
.pf-row{display:flex;align-items:center;gap:13px;padding:13px 16px;cursor:pointer;position:relative;border-bottom:1px solid var(--line);}
.pf-row:last-of-type{border-bottom:none;}
.pf-row .mi-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pf-row .pf-main{flex:1;min-width:0;}
.pf-row .pf-name{font-size:15.5px;font-weight:500;}
.pf-row .pf-desc{font-size:12.5px;color:var(--sub);margin-top:2px;}
.pf-row .chev{width:8px;height:14px;flex-shrink:0;}
.pf-more{padding:14px 16px;font-size:13px;color:var(--sub);text-align:center;}
.premium-plans{display:flex;gap:12px;padding:16px;}
.plan{flex:1;position:relative;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:16px 10px 14px;cursor:pointer;text-align:center;transition:border-color .15s,transform .1s;font-family:inherit;}
.plan:active{transform:scale(.98);}
.plan.sel{border-color:#E9A23B;background:rgba(233,162,59,.06);}
.plan .plan-name{font-size:14px;color:var(--sub);margin-bottom:6px;}
.plan .plan-price{font-size:22px;font-weight:800;color:var(--text);}
.plan .plan-price span{font-size:13px;font-weight:500;color:var(--sub);}
.plan .plan-tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#E9A23B;color:#fff;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:10px;}
.premium-need{margin:12px 16px 0;background:rgba(233,162,59,.12);color:#B4791F;border-radius:10px;padding:10px 14px;font-size:13px;text-align:center;}
html.yx-dark .premium-need{color:#E9A23B;}
/* 时间输入 */
.time-inp{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:15px;color:var(--text);background:var(--field);outline:none;font-family:inherit;}
/* 名称颜色 */
.nc-preview{text-align:center;padding:26px 16px 10px;font-size:22px;font-weight:700;}
.nc-grid{display:grid;grid-template-columns:repeat(auto-fill,46px);gap:16px;justify-content:space-between;}
.nc-sw{width:46px;height:46px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border:2px solid transparent;transition:transform .1s;}
.nc-sw:active{transform:scale(.9);}
.nc-sw.sel{border-color:var(--text);box-shadow:0 0 0 2px var(--card) inset;}
.nc-sub{font-size:12.5px;font-weight:600;color:var(--sub);margin-bottom:10px;}
.nc-sw.nc-grad{background-size:150% 100%;background-position:center;}
.nc-sw.nc-custom{position:relative;overflow:hidden;background:conic-gradient(from 0deg,#ff0000,#ff9900,#ffee00,#33dd33,#00a2ff,#6a5cff,#ff2ecb,#ff0000);}
.nc-sw.nc-custom input[type=color]{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);opacity:0;cursor:pointer;padding:0;border:none;background:none;}
.me-card{background:#fff;padding:18px;display:flex;align-items:center;gap:16px;cursor:pointer;}
.me-card .avatar{width:64px;height:64px;border-radius:20px;font-size:24px;box-shadow:0 8px 18px rgba(43,108,246,.28);}
.me-card .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.me-card .info .nm{font-size:17px;font-weight:700;}
.me-card .info .id{font-size:13px;color:var(--sub);white-space:nowrap;}
.me-card .chev{width:8px;height:14px;flex-shrink:0;}
.gap{height:10px;}
.menu-group{background:#fff;}
.menu-item{display:flex;align-items:center;gap:13px;padding:12px 16px;cursor:pointer;position:relative;}
.menu-item:active{background:#F7F9FC;}
.menu-item .mi-ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.menu-item .mi-name{flex:1;font-size:16px;}
.menu-item .mi-val{font-size:14px;color:var(--sub);margin-right:6px;}
.menu-item .chev{width:8px;height:14px;flex-shrink:0;}
.menu-item .divider{position:absolute;left:59px;right:0;bottom:0;height:1px;background:var(--line);}
.logout-btn{margin:24px 16px;height:50px;border-radius:12px;background:#fff;border:none;color:var(--danger);font-size:16px;font-weight:600;width:calc(100% - 32px);cursor:pointer;}

/* ============ 二级页头（带返回） ============ */
.sub-head{flex-shrink:0;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:6px 8px;height:52px;}
.sub-head .nav{width:44px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.sub-head .stitle{flex:1;text-align:center;font-size:17px;font-weight:600;}
.sub-head .saction{min-width:44px;text-align:center;font-size:15px;color:var(--primary);font-weight:500;cursor:pointer;padding-right:6px;background:transparent;border:none;font-family:inherit;}
.sub-head .saction:disabled{color:var(--muted);}
.sub-head button.saction:active{opacity:.6;}

/* 表单页 */
.form-page{flex:1;overflow:auto;padding:16px;}
.form-item{background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:12px;}
.form-item label{display:block;font-size:12.5px;color:var(--sub);margin-bottom:8px;}
.form-item input,.form-item textarea{width:100%;border:none;outline:none;font-size:16px;color:var(--text);background:transparent;resize:none;font-family:inherit;}

/* 搜索结果卡 */
.search-result{margin:16px;background:#fff;border-radius:14px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.search-result .avatar{width:64px;height:64px;border-radius:18px;font-size:24px;}
.search-result .nm{font-size:18px;font-weight:600;}
.search-result .id{font-size:13px;color:var(--sub);}

/* 状态点 */
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--online);display:inline-block;}
.status-dot.busy{background:#E6A23C;}
.status-dot.offline{background:var(--muted);}

/* Toast */
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:rgba(0,0,0,.82);color:#fff;font-size:14px;padding:10px 18px;border-radius:10px;z-index:9999;opacity:0;transition:opacity .25s;pointer-events:none;max-width:80%;text-align:center;}
#toast.show{opacity:1;}

/* 加载遮罩 */
#loading{position:absolute;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;z-index:5000;}
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* 选择好友进群 */
.pick-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;position:relative;}
.pick-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--muted);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.pick-item.on .pick-check{background:var(--primary);border-color:var(--primary);}
.modal-mask{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:6000;display:flex;align-items:flex-end;}
.sheet{background:#fff;width:100%;border-radius:16px 16px 0 0;padding:8px 0 calc(env(safe-area-inset-bottom,10px) + 14px);max-height:70%;overflow:auto;}
.sheet .sheet-item{padding:15px 20px;font-size:16px;text-align:center;cursor:pointer;border-bottom:1px solid var(--line);}
.sheet .sheet-item.cancel{color:var(--sub);border-bottom:none;margin-top:6px;}
/* 居中弹层容器（对话框 / 电脑端菜单） */
.modal-mask.center{align-items:center;justify-content:center;}
.sheet.as-dialog{width:auto;min-width:220px;max-width:320px;border-radius:14px;overflow:hidden;animation:popIn .16s ease-out;}
.sheet.as-dialog .sheet-item:last-of-type{border-bottom:none;}
.sheet.as-dialog .sheet-item.cancel{margin-top:0;border-top:6px solid var(--field);}

/* ============ 站内自定义对话框 ============ */
.dialog{background:#fff;width:86%;max-width:340px;border-radius:16px;padding:22px 20px 16px;box-shadow:0 18px 48px rgba(22,26,32,.22);animation:dlgIn .2s cubic-bezier(.2,.7,.3,1);}
@keyframes dlgIn{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:scale(1);}}
.dlg-title{font-size:17px;font-weight:600;color:var(--text);text-align:center;margin-bottom:12px;}
.dlg-body{margin-bottom:18px;}
.dlg-text{font-size:15px;line-height:1.6;color:var(--text);text-align:center;white-space:pre-wrap;word-break:break-word;max-height:46vh;overflow:auto;}
.dlg-input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:15px;color:var(--text);background:var(--field);outline:none;transition:border-color .15s;font-family:inherit;}
.dlg-text + .dlg-input{margin-top:12px;}
.dlg-input:focus{border-color:var(--primary);background:#fff;}
textarea.dlg-input{resize:none;line-height:1.5;}
.dlg-actions{display:flex;gap:10px;}
.dlg-btn{flex:1;height:44px;border:none;border-radius:11px;font-size:15px;font-weight:500;cursor:pointer;transition:opacity .15s,transform .12s;}
.dlg-btn:active{transform:scale(.97);}
.dlg-btn.primary{background:var(--primary);color:#fff;}
.dlg-btn.danger{background:#F5433B;color:#fff;}
.dlg-btn.ghost{background:var(--field);color:var(--text);}

/* ============ iOS 动效 ============ */
.view{transition:transform .32s cubic-bezier(.36,.66,.04,1);will-change:transform;}
.view.v-enter{transform:translateX(100%);}
.view.v-enter-active{transform:translateX(0);}
.view.v-exit-active{transform:translateX(100%);box-shadow:-10px 0 26px rgba(0,0,0,.12);}
/* 弹层/面板 */
.modal-mask{animation:maskIn .2s ease;}
@keyframes maskIn{from{opacity:0;}to{opacity:1;}}
.sheet{animation:sheetUp .28s cubic-bezier(.36,.66,.04,1);}
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
/* 设置页内多级切换的内容滑动 */
#page-body.pg-fwd{animation:pgFwd .28s cubic-bezier(.36,.66,.04,1);}
#page-body.pg-back{animation:pgBack .28s cubic-bezier(.36,.66,.04,1);}
@keyframes pgFwd{from{opacity:.35;transform:translateX(26px);}to{opacity:1;transform:none;}}
@keyframes pgBack{from{opacity:.35;transform:translateX(-26px);}to{opacity:1;transform:none;}}
/* 消息气泡入场 */
.bubble-row.msg-in{animation:bubbleIn .22s cubic-bezier(.2,.7,.3,1);}
@keyframes bubbleIn{from{opacity:0;transform:translateY(6px) scale(.96);}to{opacity:1;transform:none;}}
/* 自己发送：从右下轻微弹入 */
.bubble-row.me.msg-in{animation:sendPop .3s cubic-bezier(.2,.8,.25,1);}
@keyframes sendPop{from{opacity:0;transform:translateY(10px) scale(.86);transform-origin:bottom right;}to{opacity:1;transform:none;}}
/* 发送中：气泡左侧转圈 */
.send-spin{display:flex;align-items:center;flex-shrink:0;padding:0 2px;}
.spin-ring{width:15px;height:15px;border:2px solid var(--muted);border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;}
/* 按压反馈 */
.cell,.menu-item,.file-row,.contact-entry,.pick-item{transition:background .15s;}
.btn-primary,.chat-input .send,.head-btn{transition:transform .12s ease,opacity .15s;}
.btn-primary:active,.chat-input .send:active{transform:scale(.97);}
.head-btn:active{transform:scale(.9);}
.tab:active{opacity:.6;}

/* ============ 右上角气泡菜单 ============ */
.pop-mask{position:absolute;inset:0;z-index:6000;}
.popover{position:absolute;background:#fff;border-radius:12px;padding:4px 0;min-width:160px;box-shadow:0 12px 32px rgba(22,26,32,.16),0 2px 8px rgba(22,26,32,.08);transform-origin:top right;animation:popIn .16s ease-out;}
.popover::after{content:'';position:absolute;top:-6px;right:22px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #fff;filter:drop-shadow(0 -1px 1px rgba(22,26,32,.06));}
.popover .pi{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--text);font-size:15px;cursor:pointer;white-space:nowrap;}
.popover .pi+.pi{border-top:1px solid var(--line);}
.popover .pi:active{background:var(--field);}
.popover .pi svg{width:20px;height:20px;flex-shrink:0;}
@keyframes popIn{from{opacity:0;transform:scale(.82);}to{opacity:1;transform:scale(1);}}

/* ============ iOS 开关 ============ */
.set-group{margin-top:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;}
.set-row{display:flex;align-items:center;padding:14px 16px;gap:12px;background:#fff;}
.set-row+.set-row{border-top:1px solid var(--line);}
.set-row .lbl{font-size:16px;}
.set-row .sub{font-size:12px;color:var(--sub);margin-top:3px;}
.switch{width:48px;height:28px;border-radius:14px;background:#E3E8EF;position:relative;transition:background .22s;flex-shrink:0;cursor:pointer;}
.switch.on{background:#2FB170;}
.switch i{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .22s;}
.switch.on i{left:22px;}
.switch.disabled{opacity:.4;cursor:not-allowed;background:var(--muted);}
.switch.disabled.on{background:var(--muted);}
.set-note{padding:14px 18px;font-size:12.5px;color:var(--sub);line-height:1.6;}
.set-btn{margin:16px;height:50px;border-radius:12px;background:#fff;border:none;color:var(--primary);font-size:16px;width:calc(100% - 32px);cursor:pointer;}
.set-btn.danger{color:var(--danger);}

/* ============ 文件 / 相册 / 收藏 / 帮助 ============ */
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;}
.media-grid .cellimg{padding-top:100%;background:#E7ECF2 center/cover no-repeat;border-radius:4px;cursor:pointer;}
.file-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;cursor:pointer;}
.file-row+.file-row{border-top:1px solid var(--line);}
.file-row .fi{width:40px;height:40px;border-radius:9px;background:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.file-row .fmeta{flex:1;min-width:0;}
.file-row .fn{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file-row .fs{font-size:12px;color:var(--sub);margin-top:3px;}
.fav-item{background:#fff;padding:14px 16px;border-bottom:8px solid var(--bg);}
.fav-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--sub);margin-bottom:8px;}
.fav-head-r{display:flex;align-items:center;gap:10px;}
.fav-del{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:7px;transition:color .15s,background .15s;}
.fav-del:hover{color:#F5433B;background:var(--field);}
.fav-del:active{transform:scale(.9);}
.fav-body{font-size:15px;line-height:1.5;word-break:break-word;}
.fav-body img{max-width:160px;border-radius:8px;}
.fav-body a{color:var(--primary);text-decoration:none;}
.help-q{background:#fff;padding:14px 16px;border-bottom:1px solid var(--line);}
.help-q .q{font-size:15px;font-weight:600;}
.help-q .a{font-size:13.5px;color:var(--sub);margin-top:6px;line-height:1.6;}

/* ============ 界面大小滑块（通用设置里，左右横拉调节全局缩放） ============ */
.gs-slider{display:flex;align-items:center;gap:14px;padding:2px 2px 4px;}
.gs-slider .gs-a{font-size:15px;color:var(--sub);flex-shrink:0;}
.gs-slider .gs-b{font-size:23px;font-weight:700;color:var(--sub);flex-shrink:0;line-height:1;}
.gs-slider input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:#E3E8EF;outline:none;cursor:pointer;}
.gs-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(22,26,32,.28);border:1px solid var(--line);cursor:pointer;}
.gs-slider input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(22,26,32,.28);border:1px solid var(--line);cursor:pointer;}

/* ============================================================
   明暗切换动画：切换瞬间给全站挂上短暂的颜色过渡，令主题平滑淡变
   （只过渡颜色类属性，不含 transform，避免影响页面滑动/开关动效）
   ============================================================ */
html.yx-theme-anim,html.yx-theme-anim *{transition:background-color .5s ease,color .5s ease,border-color .5s ease,box-shadow .5s ease,fill .5s ease,stroke .5s ease !important;}

/* ============================================================
   深色模式：html.yx-dark 覆盖全站配色
   ============================================================ */
html.yx-dark{
  --primary:#4083F7;
  --bg:#14161B;
  --card:#1E2127;
  --text:#E7E9ED;
  --sub:#9AA2AD;
  --muted:#646B76;
  --line:#2B303A;
  --field:#282D35;
  --danger:#E5766F;
  --online:#37C978;
}
html.yx-dark body{background:#0C0D10;color:var(--text);}
/* 表面 → --card */
html.yx-dark .safe-top,
html.yx-dark #view-auth,
html.yx-dark .page-head,
html.yx-dark .scroll,
html.yx-dark .tabbar,
html.yx-dark .cs-head,
html.yx-dark .ann-bubble,
html.yx-dark .me-card,
html.yx-dark .menu-group,
html.yx-dark .logout-btn,
html.yx-dark .sub-head,
html.yx-dark .form-item,
html.yx-dark .search-result,
html.yx-dark #loading,
html.yx-dark .sheet,
html.yx-dark .dialog,
html.yx-dark .popover,
html.yx-dark .bubble-menu,
html.yx-dark .set-group,
html.yx-dark .set-row,
html.yx-dark .set-btn,
html.yx-dark .file-row,
html.yx-dark .fav-item,
html.yx-dark .help-q,
html.yx-dark .emoji-panel,
html.yx-dark .gav-cam,
html.yx-dark .other .bubble,
html.yx-dark .bubble.file,
html.yx-dark .me .bubble.file{background:var(--card);}
html.yx-dark .set-row+.set-row{border-top-color:var(--line);}
/* 字段 / 搜索框 */
html.yx-dark .search-bar{background:var(--field);}
html.yx-dark .media-grid .cellimg{background-color:#2A2F37;}
html.yx-dark .dlg-input:focus{background:var(--card);}
/* 顶部聊天栏毛玻璃 */
html.yx-dark .chat-head{background:rgba(28,31,37,.9);}
/* 按压 / hover 反馈 */
html.yx-dark .cell:active,
html.yx-dark .menu-item:active{background:rgba(255,255,255,.05);}
/* 气泡箭头 / 引用条 */
html.yx-dark .popover::after{border-bottom-color:var(--card);}
html.yx-dark .msg-time{background:rgba(255,255,255,.06);}
html.yx-dark .bubble-quote{background:rgba(255,255,255,.08);}
/* 开关轨道（关闭态）/ 滑块轨道；开启态保持绿色，禁用态保持置灰 */
html.yx-dark .switch{background:#3A404A;}
html.yx-dark .switch.on{background:#2FB170;}
html.yx-dark .switch.disabled,html.yx-dark .switch.disabled.on{background:var(--muted);}
html.yx-dark .gs-slider input[type=range]{background:#3A404A;}
/* 液态玻璃输入框（深色） */
html.yx-dark .chat-input{background:rgba(30,33,39,.55);border-color:rgba(255,255,255,.08);box-shadow:0 8px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);}
html.yx-dark .reply-bar{background:rgba(30,33,39,.6);border-color:rgba(255,255,255,.08);box-shadow:0 4px 16px rgba(0,0,0,.35);}
/* 群成员角色标签 */
html.yx-dark .gm-tag.owner{background:rgba(197,138,46,.22);color:#E0B057;}
html.yx-dark .gm-tag.admin{background:rgba(64,131,247,.22);color:#79A8FF;}
html.yx-dark .gm-tag.muted{background:rgba(229,118,111,.2);color:#E5766F;}
/* 电脑模式分栏边框 / 背景 */
html.yx-dark.yx-desktop body{background:#0C0D10;}
html.yx-dark.yx-desktop #view-chats,
html.yx-dark.yx-desktop #view-contacts,
html.yx-dark.yx-desktop #view-me{border-right:1px solid var(--line);box-shadow:none;}
html.yx-dark .view-empty-inner .ph-logo{background:var(--card);}
/* 遮罩加深 */
html.yx-dark .modal-mask{background:rgba(0,0,0,.55);}
/* 内联深色图标（返回箭头/更多点/加号等）反色，避免暗背景下不可见 */
html.yx-dark [stroke="#161A20"]{stroke:var(--text);}
html.yx-dark [fill="#161A20"]{fill:var(--text);}
/* 输入框占位符 */
html.yx-dark .chat-input .box::placeholder,
html.yx-dark .field input::placeholder,
html.yx-dark .form-item input::placeholder,
html.yx-dark .form-item textarea::placeholder,
html.yx-dark .dlg-input::placeholder{color:var(--muted);}

/* ============ 云信商业版：订阅页（仿参考图 · 金色 Business） ============ */
/* 整页深色 + 顶部金色光晕与射线，铺满全屏 */
.pm-wrap{position:relative;min-height:100%;background:#0b0a08;color:#fff;overflow:hidden;}
.pm-wrap::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:150%;height:52%;background:radial-gradient(60% 100% at 50% 0%,rgba(255,205,90,.6),rgba(255,170,45,.18) 46%,transparent 72%);pointer-events:none;z-index:0;}
.pm-rays{position:absolute;top:0;left:50%;transform:translateX(-50%);width:200%;height:60%;pointer-events:none;z-index:0;background:repeating-conic-gradient(from 0deg at 50% 0%,rgba(255,222,140,0) 0deg,rgba(255,222,140,.16) 2.4deg,rgba(255,222,140,0) 5deg);-webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent);opacity:.8;}
.pm-hero{position:relative;z-index:1;overflow:visible;padding:30px 20px 22px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:transparent;color:#fff;}
/* ambient 星点：绽放之后（约 .9s）整体淡入，开始持续点缀 */
.pm-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0;animation:starsFadeIn .6s ease .9s forwards;}
@keyframes starsFadeIn{to{opacity:1;}}
.pm-stars i{position:absolute;background:#fff;border-radius:50%;animation:twinkle 2.4s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.6);}50%{opacity:1;transform:scale(1.1);}}
/* 打开页面时星星从 logo 中心绽放飞散（一次性，加强版：金色光晕 + 中心闪光） */
.pm-bloom{position:absolute;left:50%;top:74px;width:0;height:0;z-index:2;pointer-events:none;}
.pm-bloom::before{content:'';position:absolute;left:0;top:0;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,215,120,.55),rgba(255,190,70,.18) 45%,transparent 70%);opacity:0;transform:translate(-50%,-50%) scale(.15);animation:bloomFlash .8s ease-out .5s both;pointer-events:none;}
@keyframes bloomFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.15);}18%{opacity:1;}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6);}}
.pm-bloom i{position:absolute;left:0;top:0;display:block;opacity:0;transform:translate(-50%,-50%) scale(.2);animation:bloomOut 1.25s cubic-bezier(.2,.7,.3,1) both;}
.pm-bloom i svg{display:block;filter:drop-shadow(0 0 6px rgba(255,205,95,.85));}
@keyframes bloomOut{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0);}12%{opacity:1;}100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(var(--sc)) rotate(var(--r));}}
/* 皇冠 logo：进入商业版页时先放大出现，再收缩到正常（无倾斜/无持续漂浮）。
   收缩到正常的瞬间（约 .5s）正好触发星星绽放，绽放后 ambient 星点再淡入点缀 */
.pm-logo{position:relative;z-index:1;filter:drop-shadow(0 10px 26px rgba(255,190,70,.45));animation:crownPop .5s cubic-bezier(.3,.75,.35,1) both;transform-origin:50% 58%;}
@keyframes crownPop{0%{opacity:0;transform:scale(1.85);}22%{opacity:1;transform:scale(1.7);}100%{opacity:1;transform:scale(1);}}
.pm-mark{overflow:visible;}
.pm-title{position:relative;z-index:1;font-size:24px;font-weight:800;letter-spacing:.02em;background:linear-gradient(180deg,#fff,#FFE9B0);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:0 2px 16px rgba(255,190,70,.22);}
.pm-sub{position:relative;z-index:1;font-size:14px;line-height:1.5;color:#EAD9B6;max-width:280px;}
.pm-badge{position:relative;z-index:1;margin-top:4px;background:rgba(255,255,255,.12);border:1px solid rgba(255,210,120,.5);border-radius:20px;padding:4px 14px;font-size:13px;font-weight:600;color:#fff;}
/* 仅限商业版：旗舰功能卡（金边） */
.pm-flag{position:relative;z-index:1;margin:8px 16px 4px;}
.pm-flabel{text-align:center;font-size:14px;font-weight:700;color:#FFD98A;margin-bottom:10px;position:relative;}
.pm-flabel::before,.pm-flabel::after{content:'';position:absolute;top:50%;width:24%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,210,120,.6));}
.pm-flabel::before{left:6%;}
.pm-flabel::after{right:6%;transform:scaleX(-1);}
.pm-flcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,205,110,.45);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 0 24px rgba(255,190,70,.06);}
.pm-flcard .pf-row{border-bottom:none;}
.pf-row.static{cursor:default;}
.pm-flcard .pf-name{color:#fff;}
.pm-flcard .pf-desc{color:rgba(255,255,255,.6);}
.pm-vic{background:transparent!important;}
.pm-vic svg{width:30px;height:30px;}
.pm-flfoot{background:linear-gradient(90deg,#F6C14B,#E7A52E);padding:6px 16px;text-align:center;font-size:12.5px;font-weight:600;color:#3a2a00;}
/* 章节标题 */
.pm-sec{position:relative;z-index:1;text-align:center;font-size:15px;font-weight:700;color:#fff;margin:18px 0 2px;}
/* 功能列表：深色卡片 */
.pm-feats{position:relative;z-index:1;margin:12px 16px;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.05);box-shadow:0 10px 30px rgba(0,0,0,.3);}
.pm-feats .pf-row{border-bottom:1px solid rgba(255,255,255,.08);}
.pm-feats .pf-name{color:#fff;}
.pm-feats .pf-desc{color:rgba(255,255,255,.55);}
.pm-feats .pf-more{color:rgba(255,255,255,.5);}
.pm-feats .chev path{stroke:rgba(255,255,255,.4);}
.pf-row.locked .pf-name{color:rgba(255,255,255,.72);}
.pf-lock{color:rgba(255,255,255,.5);flex-shrink:0;}
.pm-cta-bar{position:sticky;bottom:0;z-index:2;padding:12px 16px calc(env(safe-area-inset-bottom,8px) + 12px);background:linear-gradient(to top,#0b0a08 60%,transparent);}
.pm-cta{width:100%;height:52px;border:none;border-radius:26px;background:linear-gradient(90deg,#FFD75E,#F5B63C,#E89F26);color:#3a2a00;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 10px 26px rgba(230,160,40,.45);transition:transform .12s;}
.pm-cta:active{transform:scale(.98);}
/* 名称颜色渐变（应用态固定渐变；预览态 .yx-ng-anim 滚动） */
.yx-ng{-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;background-repeat:no-repeat;font-weight:700;}
/* 滚动预览：必须平铺(repeat)，否则背景滚出文字区域后文字变透明「颜色消失」；
   200% 背景宽 + 位移 200% 恰好平移一个完整贴片，循环无缝 */
.yx-ng-anim{background-size:200% 100%;background-repeat:repeat;animation:ncScroll 3s linear infinite;}
@keyframes ncScroll{to{background-position:200% 0;}}
.yx-grad-gold{background-image:linear-gradient(90deg,#F9D423,#FFB300,#FFF3B0,#F6A700,#F9D423);}
.yx-grad-starry{background-image:linear-gradient(90deg,#3D8BFF,#7B5CFF,#A855F7);}
.yx-grad-emerald{background-image:linear-gradient(90deg,#0BA360,#38ef7d,#11998e,#0BA360);}
.yx-grad-rainbow{background-image:linear-gradient(90deg,#ff3d6e,#ff9f1c,#ffe600,#2ecc71,#3d8bff,#9b5cff,#ff3d6e);}
/* 星空应用态为「左蓝右紫」的单向渐变；滚动预览需首尾同色才能无缝，单独给循环版 */
.yx-ng-anim.yx-grad-starry{background-image:linear-gradient(90deg,#3D8BFF,#7B5CFF,#A855F7,#7B5CFF,#3D8BFF);}
/* 认证标：与昵称基线对齐 */
.yx-verified{display:inline-block;vertical-align:-2px;margin-left:3px;flex-shrink:0;}
/* 名称颜色选择行 */
.nc-row{cursor:pointer;}
.nc-chip{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:700;}
.nc-optname{flex:1;text-align:right;margin-right:10px;color:var(--sub);font-size:14px;}
.nc-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);flex-shrink:0;position:relative;}
.nc-check.on{border-color:var(--primary);}
.nc-check.on::after{content:'';position:absolute;left:3px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--primary);}
/* 自动回复：模式单选 */
.ar-mode-row{cursor:pointer;}
.ar-radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--muted);flex-shrink:0;position:relative;transition:.15s;}
.ar-radio.on{border-color:var(--primary);}
.ar-radio.on::after{content:'';position:absolute;left:4px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--primary);}
/* 自动回复：选中模式行下方的展开面板（高度过渡动画） */
.ar-panel{height:0;overflow:hidden;transition:height .3s cubic-bezier(.4,.2,.2,1);background:var(--bg);}
.ar-panel-in{padding:12px 14px 2px;}
.ar-panel-in .premium-need{margin:0 0 12px;}
.ar-panel-in .set-btn{margin:2px 0 12px;width:100%;}
/* 面板插在行之间会打断 .set-row+.set-row 的分隔线，补回来 */
.ar-panel+.set-row{border-top:1px solid var(--line);}
/* 营业时间：每周几多选芯片 */
.biz-days{display:flex;gap:8px;padding:2px 16px 14px;background:#fff;flex-wrap:wrap;}
.bd-chip{min-width:34px;height:34px;padding:0 6px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13.5px;color:var(--sub);background:var(--field);cursor:pointer;user-select:none;transition:background .15s,color .15s;}
.bd-chip.on{background:var(--primary);color:#fff;font-weight:600;}
.biz-days+.set-row{border-top:1px solid var(--line);}
html.yx-dark .biz-days{background:var(--card);}
/* 商业版首页：打开时给 #view-page 加 .pm-mode，页头/安全区/页身跟随主题整体着色。
   深色模式（及基础样式）为深金黑；白天模式在下方整套覆盖为暖浅色 */
#view-page.pm-mode{background:#0b0a08;}
#view-page.pm-mode .safe-top{background:#0b0a08;}
#view-page.pm-mode .sub-head{background:#0b0a08;border-bottom-color:rgba(255,255,255,.08);}
#view-page.pm-mode .stitle{color:#fff;}
#view-page.pm-mode .sub-head .nav svg path{stroke:#fff;}
#view-page.pm-mode #page-body{background:#0b0a08!important;}

/* ============ 商业版页 · 白天模式适配（深色为基础样式，浅色整套覆盖） ============ */
html:not(.yx-dark) .pm-wrap{background:#FAF3E4;color:var(--text);}
html:not(.yx-dark) .pm-wrap::before{background:radial-gradient(60% 100% at 50% 0%,rgba(255,200,80,.5),rgba(255,175,55,.16) 46%,transparent 72%);}
html:not(.yx-dark) .pm-rays{background:repeating-conic-gradient(from 0deg at 50% 0%,rgba(226,160,40,0) 0deg,rgba(226,160,40,.12) 2.4deg,rgba(226,160,40,0) 5deg);}
html:not(.yx-dark) .pm-stars i{background:#E2A32B;}
html:not(.yx-dark) .pm-bloom svg path{fill:#E2A32B;}
html:not(.yx-dark) .pm-logo{filter:drop-shadow(0 10px 26px rgba(226,150,40,.35));}
html:not(.yx-dark) .pm-mark{fill:#E29A24;}
html:not(.yx-dark) .pm-mark path{stroke:#E29A24;}
html:not(.yx-dark) .pm-title{background:linear-gradient(180deg,#6B4E10,#B07C14);-webkit-background-clip:text;background-clip:text;text-shadow:0 2px 14px rgba(226,160,40,.18);}
html:not(.yx-dark) .pm-sub{color:#8F7434;}
html:not(.yx-dark) .pm-badge{background:rgba(255,255,255,.65);border-color:rgba(200,150,50,.55);color:#6B4E10;}
html:not(.yx-dark) .pm-flabel{color:#B07C14;}
html:not(.yx-dark) .pm-flabel::before,html:not(.yx-dark) .pm-flabel::after{background:linear-gradient(90deg,transparent,rgba(200,150,50,.55));}
html:not(.yx-dark) .pm-flcard{background:#fff;border-color:rgba(226,170,70,.55);box-shadow:0 10px 26px rgba(160,110,20,.12),inset 0 0 24px rgba(255,190,70,.05);}
html:not(.yx-dark) .pm-flcard .pf-name{color:var(--text);}
html:not(.yx-dark) .pm-flcard .pf-desc{color:var(--sub);}
html:not(.yx-dark) .pm-sec{color:var(--text);}
html:not(.yx-dark) .pm-feats{background:#fff;box-shadow:0 10px 26px rgba(160,110,20,.10);}
html:not(.yx-dark) .pm-feats .pf-row{border-bottom-color:var(--line);}
html:not(.yx-dark) .pm-feats .pf-name{color:var(--text);}
html:not(.yx-dark) .pm-feats .pf-desc{color:var(--sub);}
html:not(.yx-dark) .pm-feats .pf-more{color:var(--sub);}
html:not(.yx-dark) .pm-feats .chev path{stroke:var(--muted);}
html:not(.yx-dark) .pf-row.locked .pf-name{color:var(--sub);}
html:not(.yx-dark) .pf-lock{color:var(--muted);}
html:not(.yx-dark) .pm-cta-bar{background:linear-gradient(to top,#FAF3E4 60%,transparent);}
html:not(.yx-dark) #view-page.pm-mode{background:#FAF3E4;}
html:not(.yx-dark) #view-page.pm-mode .safe-top{background:#FAF3E4;}
html:not(.yx-dark) #view-page.pm-mode .sub-head{background:#FAF3E4;border-bottom-color:rgba(160,110,20,.14);}
html:not(.yx-dark) #view-page.pm-mode .stitle{color:var(--text);}
html:not(.yx-dark) #view-page.pm-mode .sub-head .nav svg path{stroke:#161A20;}
html:not(.yx-dark) #view-page.pm-mode #page-body{background:#FAF3E4!important;}
/* 营业时间徽标 */
.biz-badge{font-size:12px;font-weight:600;padding:3px 10px;border-radius:12px;flex-shrink:0;}
.biz-badge.on{background:rgba(47,177,112,.14);color:#2FB170;}
.biz-badge.off{background:rgba(139,147,161,.16);color:var(--sub);}
/* 搜索结果按钮组 */
.sr-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px;}
.sr-btn{height:44px;width:auto;padding:0 44px;margin:0;box-shadow:none;}
/* 搜索用户直显的对方主页卡：签名 + 营业时间 + 底部加好友按钮 */
.sr-sign{font-size:13px;color:var(--sub);line-height:1.5;text-align:center;max-width:270px;}
.sr-profile .set-group{align-self:stretch;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:2px;}