/* ===== Morph · 原生微信风（无第三方资源） ===== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
:root { --accent:var(--accent); --bubble-me:var(--bubble-me); --m-font:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Roboto,sans-serif; }
body {
  font-family:var(--m-font);
  color:#111; background:#ededed; font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
/* 字体全局强制继承：标题/按钮/气泡/列表/设置全部跟随主题字体 */
#app, #app *, .view, .view * { font-family:var(--m-font) !important; }
.hidden { display:none !important; }
a { color:#576b95; text-decoration:none; }
img { display:block; }
svg { width:24px; height:24px; }
button { border:0; background:none; font-family:inherit; cursor:pointer; color:inherit; }
input,textarea { font-family:inherit; font-size:15px; outline:none; border:0; background:none; color:#111; }
::-webkit-scrollbar { width:0; height:0; }

/* ===== 启动屏 ===== */
#boot { position:fixed; inset:0; background:linear-gradient(165deg,#f6f4ff 0%,#eef7f1 55%,#fdeef4 100%); display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; -webkit-align-items:center; align-items:center; -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center; z-index:50; }
.boot-card { text-align:center; }
.boot-logo { width:92px; height:92px; margin:0 auto; border-radius:26px;
  background:linear-gradient(150deg,#8b7ff0 0%,#c86bd6 48%,#f279a0 100%);
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center;
  box-shadow:0 18px 42px rgba(150,110,220,.38), inset 0 1px 0 rgba(255,255,255,.35);
  -webkit-animation:bootfloat 2.6s ease-in-out infinite; animation:bootfloat 2.6s ease-in-out infinite; }
.boot-mark { width:46px; height:46px; }
@-webkit-keyframes bootfloat { 0%,100%{-webkit-transform:translateY(0) scale(1);}50%{-webkit-transform:translateY(-7px) scale(1.02);} }
@keyframes bootfloat { 0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-7px) scale(1.02);} }
.boot-name { margin-top:22px; font-size:25px; font-weight:700; letter-spacing:1.5px; color:#1f2233; }
.boot-sub { margin-top:7px; font-size:13.5px; color:#8b8fa3; letter-spacing:.5px; }
.boot-bar { width:120px; height:3px; margin:26px auto 0; background:rgba(0,0,0,.08); border-radius:3px; overflow:hidden; }
.boot-bar span { display:block; width:40%; height:100%; background:linear-gradient(90deg,#8b7ff0,#f279a0); border-radius:3px;
  -webkit-animation:bootmove 1.1s ease-in-out infinite; animation:bootmove 1.1s ease-in-out infinite; }
@-webkit-keyframes bootmove { 0%{-webkit-transform:translateX(-110%);}100%{-webkit-transform:translateX(300%);} }
@keyframes bootmove { 0%{transform:translateX(-110%);}100%{transform:translateX(300%);} }

/* ===== 应用框架 ===== */
#app { position:fixed; inset:0; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-orient:vertical;
  -webkit-flex-direction:column; flex-direction:column; background:#ededed; }
.view { position:absolute; inset:0; max-width:600px; margin:0 auto; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-orient:vertical;
  -webkit-flex-direction:column; flex-direction:column; background:#ededed; }
.navbar { position:relative; height:48px; -webkit-flex-shrink:0; flex-shrink:0; background:#f7f7f7;
  border-bottom:1px solid #e0e0e0; display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; -webkit-align-items:center; align-items:center; padding:0 10px; z-index:10; }
.nav-left,.nav-right { min-width:54px; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; height:100%; color:#111; }
.nav-right { -webkit-box-pack:end; -webkit-justify-content:flex-end; justify-content:flex-end; }
.nav-title { -webkit-box-flex:1; -webkit-flex:1; flex:1; text-align:center; font-size:17px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 6px; }
.nav-title small { display:block; font-size:11px; font-weight:400; color:#888; }
.nav-btn { height:100%; padding:0 6px; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; color:#111; }
.nav-icon { width:24px; height:24px; fill:#111; }
.screen-body { -webkit-box-flex:1; -webkit-flex:1; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; position:relative; }

/* ===== 底部 Tab ===== */
.tabbar { -webkit-flex-shrink:0; flex-shrink:0; height:58px; background:#f7f7f7; border-top:1px solid #e6e6e6;
  display:-webkit-box; display:-webkit-flex; display:flex; padding-bottom:constant(safe-area-inset-bottom); padding-bottom:env(safe-area-inset-bottom); }
.tab-item { -webkit-box-flex:1; -webkit-flex:1; flex:1; display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-orient:vertical; -webkit-flex-direction:column; flex-direction:column; -webkit-box-align:center; align-items:center;
  -webkit-box-pack:center; justify-content:center; color:#8a8f99; font-size:10.5px; gap:3px; }
.tab-item.active { color:var(--accent); font-weight:600; }
.tab-ic { width:25px; height:25px; position:relative; -webkit-transition:transform .18s ease; transition:transform .18s ease; }
.tab-item.active .tab-ic { transform:scale(1.12); }
.tab-ic svg { width:100%; height:100%; fill:currentColor; }
.tab-badge { position:absolute; top:-4px; right:-9px; min-width:17px; height:17px; padding:0 5px; border-radius:9px;
  background:#fa5151; color:#fff; font-size:11px; line-height:17px; text-align:center; border:1px solid #f7f7f7; }
.tab-badge.dot { width:9px; min-width:9px; height:9px; padding:0; top:-1px; right:-3px; border-radius:50%; }

/* ===== 通用列表 ===== */
.list { background:#fff; }
.cell { position:relative; min-height:54px; padding:9px 12px; display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center; background:#fff; }
.cell:active { background:#ececec; }
.cell + .cell::before { content:""; position:absolute; top:0; left:54px; right:0; height:1px; background:#ececec; }
.cell-ic { width:30px; height:30px; margin-right:12px; -webkit-flex-shrink:0; flex-shrink:0; display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center; }
.cell-ic svg { width:24px; height:24px; fill:var(--accent); }
/* 精致彩色圆角入口图标块（发现页 / 我页面） */
.entry { min-height:58px; }
.entry-ic { width:38px; height:38px; margin-right:14px; -webkit-flex-shrink:0; flex-shrink:0; border-radius:11px;
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center; color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.12); }
.entry-ic svg { width:21px; height:21px; }
.entry-ic.custom { width:38px; height:38px; }
.entry-img { width:30px; height:30px; object-fit:contain; }
.cell-main { -webkit-box-flex:1; -webkit-flex:1; flex:1; min-width:0; }
.cell-title { font-size:16px; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cell-sub { font-size:12px; color:#b2b2b2; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cell-right { color:#b2b2b2; font-size:14px; margin-left:8px; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; }
.cell-arrow { width:8px; height:8px; margin-left:8px; border-top:1.6px solid #c8c8c8; border-right:1.6px solid #c8c8c8;
  -webkit-transform:rotate(45deg); transform:rotate(45deg); }
.cell-switch { width:50px; height:28px; border-radius:16px; background:#e5e5e5; position:relative; -webkit-transition:background .2s; transition:background .2s; }
.cell-switch.on { background:var(--accent); }
.cell-switch::after { content:""; position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2); -webkit-transition:left .2s; transition:left .2s; }
.cell-switch.on::after { left:24px; }
.group-gap { height:8px; background:#ededed; }
.group-label { padding:6px 14px; font-size:12px; color:#888; }

/* ===== 头像 ===== */
.avatar { position:relative; border-radius:7px; background:#ccc; color:#fff; display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; -webkit-align-items:center; align-items:center; -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center;
  font-weight:500; -webkit-flex-shrink:0; flex-shrink:0; overflow:visible; font-size:16px; }
.avatar img { width:100%; height:100%; border-radius:6px; object-fit:cover; }
.av32 { width:32px; height:32px; font-size:14px; border-radius:5px;}
.av40 { width:40px; height:40px; font-size:17px;}
.av48 { width:48px; height:48px; font-size:20px;}
.av64 { width:64px; height:64px; font-size:26px;}
.c1{background:#f5a623;}.c2{background:#7ed321;}.c3{background:#4a90e2;}.c4{background:#bd10e0;}
.c5{background:#f8668d;}.c6{background:#50e3c2;}.c7{background:#9013fe;}.c8{background:#ff6b35;}
.avatar .ring { position:absolute; inset:-4px; border-radius:10px; border:2px solid transparent; pointer-events:none; }
.ring-green { border-color:var(--accent); }
.ring-gold { border-color:#e6b84d; box-shadow:0 0 6px rgba(230,184,77,.6); }
.ring-pink { border-color:#f5a3c0; }
.online-dot { position:absolute; right:-3px; bottom:-3px; width:13px; height:13px; border-radius:50%; background:var(--accent); border:2px solid #fff; }

/* ===== 红点角标 ===== */
.badge-num { min-width:18px; height:18px; padding:0 5px; border-radius:10px; background:#fa5151; color:#fff;
  font-size:11px; line-height:18px; text-align:center; }
.badge-dot { width:10px; height:10px; border-radius:50%; background:#fa5151; }

/* ===== 按钮/表单 ===== */
.btn { display:block; width:100%; height:46px; line-height:46px; text-align:center; border-radius:8px; font-size:16px; font-weight:500; }
.btn-green { background:var(--accent); color:#fff; }
.btn-green:active { background:#06ad56; }
.btn-green:disabled { background:#9ed8b8; }
.btn-plain { background:#fff; color:var(--accent); border:1px solid var(--accent); }
.btn-gray { background:#f7f7f7; color:#333; border:1px solid #e0e0e0; }
.btn-red { background:#fa5151; color:#fff; }
.btn-sm { height:36px; line-height:36px; font-size:14px; border-radius:6px; display:inline-block; padding:0 16px; width:auto; }
.form-card { background:#fff; margin:10px; border-radius:12px; overflow:hidden; }
.field { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; min-height:52px; padding:0 14px; border-bottom:1px solid #f0f0f0; }
.field:last-child { border-bottom:0; }
.field label { width:84px; -webkit-flex-shrink:0; flex-shrink:0; font-size:15px; color:#111; }
.field input, .field textarea { -webkit-box-flex:1; -webkit-flex:1; flex:1; min-width:0; font-size:15px; padding:12px 0; }
.field .eye { color:#888; font-size:13px; padding:6px; }
.page-pad { padding:14px; }
.muted { color:#888; font-size:12px; }
.hr { height:1px; background:#ececec; margin:10px 0; }

/* ===== 弹层/模态/Toast ===== */
.mask { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:30; }
.sheet { position:fixed; left:0; right:0; bottom:0; z-index:31; background:#f7f7f7;
  border-radius:14px 14px 0 0; padding-bottom:constant(safe-area-inset-bottom); padding-bottom:env(safe-area-inset-bottom);
  -webkit-transform:translateY(100%); transform:translateY(100%); -webkit-transition:transform .22s ease; transition:transform .22s ease; }
.sheet.show { -webkit-transform:translateY(0); transform:translateY(0); }
.sheet-title { text-align:center; padding:14px; font-size:14px; color:#888; border-bottom:1px solid #e5e5e5; position:relative; }
.sheet-close { position:absolute; right:12px; top:12px; font-size:18px; color:#888; }
.sheet-item { padding:16px; text-align:center; font-size:16px; background:#fff; border-bottom:1px solid #f0f0f0; }
.sheet-item:active { background:#f2f2f2; }
.sheet-item.danger { color:#fa5151; }
.modal-mask { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:100; display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center; padding:40px; }
.modal { width:100%; max-width:300px; max-height:88vh; background:#fff; border-radius:14px; overflow:hidden;
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-orient:vertical; -webkit-flex-direction:column; flex-direction:column; }
.modal-head { text-align:center; padding:20px 16px 8px; font-size:16px; font-weight:600; }
.modal-body { -webkit-box-flex:1; -webkit-flex:1 1 auto; flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:6px 18px 20px; font-size:14px; color:#666; text-align:center; line-height:1.6; }
.modal-foot { -webkit-flex-shrink:0; flex-shrink:0; display:-webkit-box; display:-webkit-flex; display:flex; border-top:1px solid #f0f0f0; }
.modal-foot button { -webkit-box-flex:1; -webkit-flex:1; flex:1; height:48px; font-size:16px; }
.modal-foot button + button { border-left:1px solid #f0f0f0; }
.modal-foot .ok { color:var(--accent); font-weight:500; }
.modal-foot .danger { color:#fa5151; }
#toast { position:fixed; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);
  background:rgba(20,20,20,.82); color:#fff; padding:12px 18px; border-radius:10px; font-size:14px; z-index:60;
  max-width:78%; text-align:center; line-height:1.5; opacity:0; pointer-events:none; -webkit-transition:opacity .2s; transition:opacity .2s; }
#toast.show { opacity:1; }

/* ===== Onboarding ===== */
.ob { position:absolute; inset:0; background:#ededed; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-orient:vertical;
  -webkit-flex-direction:column; flex-direction:column; }
.ob-body { -webkit-box-flex:1; -webkit-flex:1; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.ob-hero { text-align:center; padding:40px 24px 20px; }
.ob-logo { width:92px; height:92px; margin:0 auto; border-radius:26px;
  background:linear-gradient(150deg,#8b7ff0 0%,#c86bd6 48%,#f279a0 100%);
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center;
  -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center;
  box-shadow:0 18px 42px rgba(150,110,220,.38), inset 0 1px 0 rgba(255,255,255,.35);
  -webkit-animation:bootfloat 2.6s ease-in-out infinite; animation:bootfloat 2.6s ease-in-out infinite; }
.ob-logo .boot-mark { width:46px; height:46px; }
.ob-hero h2 { margin-top:18px; font-size:24px; }
.ob-hero p { margin-top:10px; color:#888; font-size:14px; line-height:1.7; }
.feat-intro { background:#fff; border-radius:14px; margin:6px 16px; overflow:hidden; }
.feat-intro .cell { min-height:60px; }
.feat-intro .cell-ic { width:40px; height:40px; border-radius:10px; background:#e9faf0; }
.feat-intro .cell-ic svg { fill:var(--accent); }
.ob-foot { padding:12px 16px calc(14px + constant(safe-area-inset-bottom)); padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
.avatar-pick, .frame-pick { display:-webkit-box; display:-webkit-flex; display:flex; flex-wrap:wrap; gap:12px; padding:8px 16px; }
.pick-av { width:56px; height:56px; border-radius:10px; color:#fff; font-size:22px; display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center; border:2px solid transparent; }
.pick-av.sel { border-color:var(--accent); box-shadow:0 0 0 2px rgba(7,193,96,.22); }
.pick-av.sel::after { content:"✓"; color:#fff; font-size:26px; font-weight:bold; line-height:1; }
.pick-frame { width:56px; height:56px; border-radius:10px; background:#f0f0f0; display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center; font-size:12px; color:#666; position:relative; }
.pick-frame.sel { box-shadow:0 0 0 2px var(--accent); }
.ob-section-title { padding:16px 18px 4px; font-size:13px; color:#888; }

/* ===== 聊天列表 ===== */
.search-bar { padding:8px 12px; background:#ededed; }
.search-in { height:36px; background:#fff; border-radius:8px; display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center; color:#b2b2b2; font-size:14px; gap:5px; }
.search-in svg { width:17px; height:17px; fill:#b2b2b2; }
.conv { position:relative; padding:11px 12px; display:-webkit-box; display:-webkit-flex; display:flex; background:#fff; }
.conv:active { background:#ececec; }
.conv + .conv::before { content:""; position:absolute; top:0; left:64px; right:0; height:1px; background:#ececec; }
.conv-body { -webkit-box-flex:1; -webkit-flex:1; flex:1; min-width:0; margin-left:12px; }
.conv-name { font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-last { font-size:13px; color:#b2b2b2; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-meta { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-orient:vertical; -webkit-flex-direction:column;
  flex-direction:column; -webkit-box-align:end; align-items:flex-end; margin-left:8px; }
.conv-time { font-size:12px; color:#b2b2b2; }
.conv-meta .badge-num { margin-top:6px; }
.home-banner { background:linear-gradient(135deg,var(--accent),#06ad56); color:#fff; margin:12px; border-radius:18px;
  padding:16px 18px; font-size:13px; line-height:1.65; box-shadow:0 6px 18px rgba(7,193,96,.22); }
.home-banner b { font-size:16px; }

/* ===== 聊天页 ===== */
.chat-scroll { -webkit-box-flex:1; -webkit-flex:1; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px 0; }
.day-line { text-align:center; margin:8px 0; }
.day-line span { background:rgba(0,0,0,.18); color:#fff; font-size:12px; padding:2px 8px; border-radius:4px; }
.msg-row { display:-webkit-box; display:-webkit-flex; display:flex; padding:5px 12px; -webkit-box-align:flex-start; align-items:flex-start; }
.msg-row.other { -webkit-box-pack:start; -webkit-justify-content:flex-start; justify-content:flex-start; }
.msg-row.me { -webkit-box-pack:end; -webkit-justify-content:flex-end; justify-content:flex-end; }
.msg-av { width:38px; height:38px; border-radius:6px; -webkit-flex-shrink:0; flex-shrink:0; color:#fff; display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center; font-size:16px; }
.msg-row.other .msg-av { margin-right:9px; }
.msg-row.me .msg-av { margin-left:9px; -webkit-box-ordinal:3; order:3; }
.msg-stack { max-width:74%; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-orient:vertical; -webkit-flex-direction:column; flex-direction:column; }
.msg-row.me .msg-stack { -webkit-box-align:end; align-items:flex-end; }
.bubble { position:relative; padding:10px 14px; border-radius:18px; font-size:16px; line-height:1.5; word-break:break-word;
  display:inline-block; text-align:left; white-space:pre-wrap; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.other .bubble { background:#fff; color:#111; border:1px solid #ececec; border-top-left-radius:6px; }
.me .bubble { background:var(--bubble-me); color:#111; border-top-right-radius:6px; }
.bubble.tail::before { content:""; position:absolute; top:14px; width:0; height:0; border:7px solid transparent; }
.other .bubble.tail::before { left:-12px; border-right-color:#fff; }
.me .bubble.tail::before { right:-12px; border-left-color:var(--bubble-me); }
.bubble.sys { background:transparent; color:#b2b2b2; font-size:13px; text-align:center; }
.bubble .ai-tag { display:inline-block; font-size:10px; color:var(--accent); border:1px solid var(--accent); border-radius:4px;
  padding:0 4px; margin-right:5px; vertical-align:1px; }
.msg-meta { font-size:11px; color:#b2b2b2; margin-top:3px; }
.typing { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; padding:4px 0; }
.typing i { width:6px; height:6px; margin:0 2px; border-radius:50%; background:#b2b2b2; display:inline-block;
  -webkit-animation:tp 1s infinite; animation:tp 1s infinite; }
.typing i:nth-child(2){-webkit-animation-delay:.2s;animation-delay:.2s;} .typing i:nth-child(3){-webkit-animation-delay:.4s;animation-delay:.4s;}
@-webkit-keyframes tp{0%,60%,100%{opacity:.3;-webkit-transform:translateY(0);}30%{opacity:1;-webkit-transform:translateY(-3px);}}
@keyframes tp{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

/* 红包/转账 消息气泡 */
.bubble-rp { width:210px; background:#f79c42 !important; color:#fff !important; border-radius:8px !important; padding:0 !important; overflow:hidden; }
.bubble-rp .rp-in { display:-webkit-box; display:-webkit-flex; display:flex; padding:12px; -webkit-box-align:center; align-items:center; }
.bubble-rp .rp-ic { width:40px; height:44px; margin-right:10px; }
.bubble-rp .rp-tx { -webkit-box-flex:1; -webkit-flex:1; flex:1; min-width:0; }
.bubble-rp .rp-t1 { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bubble-rp .rp-t2 { font-size:11px; opacity:.85; margin-top:4px; }
.bubble-rp .rp-foot { background:#e88a35; font-size:11px; padding:5px 12px; color:#ffe9d2; }
.bubble-tf { width:210px; background:#fff !important; border:1px solid #ececec; border-radius:8px !important; padding:12px !important; }
.bubble-tf .tf-amt { font-size:22px; color:#111; font-weight:500; }
.bubble-tf .tf-amt small { font-size:13px; font-weight:400; }
.bubble-tf .tf-st { font-size:12px; color:#b2b2b2; margin-top:6px; }
.bubble-tf .tf-icline { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; color:var(--accent); font-size:13px; margin-top:6px; }

/* 聊天工具栏 */
.chat-bar { -webkit-flex-shrink:0; flex-shrink:0; background:#f7f7f7; border-top:1px solid #e0e0e0;
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:end; align-items:flex-end; padding:7px 8px;
  padding-bottom:calc(7px + constant(safe-area-inset-bottom)); padding-bottom:calc(7px + env(safe-area-inset-bottom)); }
.chat-bar svg { width:28px; height:28px; fill:#555; -webkit-flex-shrink:0; flex-shrink:0; }
.chat-input-wrap { -webkit-box-flex:1; -webkit-flex:1; flex:1; margin:0 6px; }
.chat-input { width:100%; min-height:38px; max-height:90px; background:#fff; border-radius:11px; padding:8px 13px;
  font-size:16px; line-height:1.4; resize:none; display:block; border:1px solid #e8e8e8; }
.voice-hold { -webkit-box-flex:1; -webkit-flex:1; flex:1; height:38px; margin:0 6px; background:#fff; border-radius:11px;
  text-align:center; line-height:38px; font-size:15px; border:1px solid #e0e0e0; }
.plus-panel { -webkit-flex-shrink:0; flex-shrink:0; background:#f7f7f7; border-top:1px solid #e5e5e5; height:210px; overflow-y:auto; }
.plus-grid { display:-webkit-box; display:-webkit-flex; display:flex; flex-wrap:wrap; padding:16px 8px; }
.plus-item { width:25%; text-align:center; padding:10px 0; font-size:12px; color:#666; }
.plus-item .pi-ic { width:54px; height:54px; margin:0 auto 7px; background:#fff; border-radius:12px; display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center; }
.plus-item .pi-ic svg { width:30px; height:30px; fill:#576b95; }
.plus-item.rp .pi-ic svg { fill:#f79c42; } .plus-item.tf .pi-ic svg { fill:var(--accent); }
.quota-line { text-align:center; font-size:11px; color:#b2b2b2; padding:3px 0 0; }
.quota-line b { color:var(--accent); }

/* ===== 通讯录 ===== */
.idx-letter { position:absolute; right:4px; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%);
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-orient:vertical; -webkit-flex-direction:column;
  flex-direction:column; font-size:11px; color:var(--accent); z-index:5; }
.idx-letter span { padding:1px 7px; }
.add-cell-ic { width:36px; height:36px; border-radius:7px; display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center; margin-right:12px; }
.add-cell-ic svg { width:22px; height:22px; fill:#fff; }
.bg-orange{background:#fa9d3b;} .bg-green{background:var(--accent);} .bg-blue{background:#3b82f6;} .bg-purple{background:#8b5cf6;}

/* ===== 发现/朋友圈 ===== */
.moments-entry { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; padding:10px 12px; background:#fff; }
.moments-entry .me-right { margin-left:auto; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; color:#b2b2b2; font-size:13px; }
.moments-entry .me-right .avatar { margin:0 8px; }
.moments { background:#fff; }
.moments-cover { position:relative; height:260px; background:#3b3f45; }
.moments-cover img { width:100%; height:100%; object-fit:cover; }
.moments-owner { position:absolute; right:14px; bottom:-22px; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; }
.moments-owner b { color:#fff; font-size:16px; margin-right:10px; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.moments-owner .avatar { width:62px; height:62px; border-radius:8px; }
.moments-list { padding:34px 0 10px; }
.mo-item { display:-webkit-box; display:-webkit-flex; display:flex; padding:16px 12px 6px; }
.mo-item .avatar { width:42px; height:42px; border-radius:6px; margin-right:10px; }
.mo-main { -webkit-box-flex:1; -webkit-flex:1; flex:1; min-width:0; }
.mo-name { color:#576b95; font-size:15px; font-weight:500; }
.mo-text { font-size:15px; margin:4px 0; }
.mo-imgs { display:-webkit-box; display:-webkit-flex; display:flex; flex-wrap:wrap; gap:4px; margin:6px 0; }
.mo-imgs .ph { width:31%; height:0; padding-bottom:31%; background:#d9d9d9; border-radius:4px; }
.mo-foot { display:-webkit-box; display:-webkit-flex; display:flex; color:#b2b2b2; font-size:12px; margin-top:4px; }
.mo-like { background:#f7f7f7; border-radius:4px; margin:6px 0 0; padding:6px 8px; font-size:13px; color:#576b95; }

/* ===== 我 ===== */
.me-header { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; background:#fff; padding:22px 14px; }
.me-header > svg { width:26px; height:26px; fill:#b2b2b2; -webkit-flex-shrink:0; flex-shrink:0; }
.me-header .avatar { width:64px; height:64px; border-radius:10px; margin-right:14px; }
.me-id { -webkit-box-flex:1; -webkit-flex:1; flex:1; min-width:0; }
.me-id h3 { font-size:20px; font-weight:600; }
.me-id p { color:#b2b2b2; font-size:13px; margin-top:6px; }
.qr-ic { width:20px; height:20px; fill:#111; }

/* ===== 钱包 ===== */
.wallet-head { background:var(--accent); color:#fff; padding:20px 16px 26px; }
.wallet-head .wh-top { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-pack:end; justify-content:flex-end; font-size:13px; }
.wallet-balance { margin-top:8px; font-size:13px; opacity:.9; }
.wallet-balance b { display:block; font-size:34px; font-weight:600; margin-top:4px; }
.wallet-quick { display:-webkit-box; display:-webkit-flex; display:flex; background:#fff; margin:-16px 12px 0; border-radius:12px; overflow:hidden; }
.wallet-quick .wq { -webkit-box-flex:1; -webkit-flex:1; flex:1; text-align:center; padding:14px 0; font-size:13px; color:#333; }
.wallet-quick .wq svg { width:28px; height:28px; fill:var(--accent); display:block; margin:0 auto 6px; }
.wallet-grid { display:-webkit-box; display:-webkit-flex; display:flex; flex-wrap:wrap; background:#fff; margin:12px; border-radius:12px; padding:14px 0; }
.wallet-grid .wg { width:25%; text-align:center; font-size:12px; color:#555; padding:10px 0; }
.wallet-grid .wg svg { width:28px; height:28px; fill:#7a7a7a; display:block; margin:0 auto 6px; }
.ent-note { text-align:center; color:#b2b2b2; font-size:12px; padding:6px 16px 20px; }

/* 收付款 */
.paycode-page { background:#fff; min-height:100%; text-align:center; padding:20px 16px; }
.paycode-tabs { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-pack:center; justify-content:center; gap:24px; margin-bottom:16px; }
.paycode-tabs span { font-size:15px; color:#b2b2b2; padding:6px 2px; }
.paycode-tabs span.on { color:#111; border-bottom:2px solid var(--accent); }
.barcode { width:80%; height:110px; margin:10px auto; background:repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 4px,#111 4px 7px,#fff 7px 9px); }
.qrbox { width:200px; height:200px; margin:14px auto; border:1px solid #eee; padding:12px; }
.qrbox .qr { width:100%; height:100%; background:
  repeating-conic-gradient(#111 0 6px,#fff 6px 12px); border-radius:6px; }
.paycode-page .num { font-size:22px; letter-spacing:2px; margin-top:8px; }

/* ===== 红包页 ===== */
.rp-page { position:absolute; inset:0; background:linear-gradient(180deg,#f79c42,#e8822e); color:#fff; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-orient:vertical; -webkit-flex-direction:column; flex-direction:column; }
.rp-top { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; padding:12px; font-size:15px; }
.rp-top .avatar { width:34px; height:34px; border-radius:5px; margin-right:10px; }
.rp-greet { text-align:center; font-size:26px; margin-top:40px; letter-spacing:2px; }
.rp-from { text-align:center; font-size:14px; opacity:.9; margin-top:14px; }
.rp-amount-box { width:78%; margin:36px auto 0; }
.rp-amount-box input { width:100%; background:transparent; border-bottom:1px solid rgba(255,255,255,.6); color:#fff;
  font-size:40px; text-align:center; padding:8px 0; }
.rp-amount-box input::-webkit-input-placeholder { color:rgba(255,255,255,.6); }
.rp-count { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-pack:center; justify-content:center; gap:8px; margin-top:20px; font-size:14px; }
.rp-count input { width:70px; background:rgba(255,255,255,.2); border-radius:6px; color:#fff; text-align:center; padding:8px; }
.rp-send { width:78%; margin:30px auto 0; height:46px; border-radius:23px; background:#fff; color:#e8822e; font-size:17px; font-weight:600; }
.rp-open { width:90px; height:90px; margin:60px auto 0; border-radius:50%; background:#fff; display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center; }
.rp-open .rp-open-ic { width:60px; height:66px; }
.rp-detail { -webkit-box-flex:1; -webkit-flex:1; flex:1; background:#fff; color:#111; margin-top:30px; border-radius:16px 16px 0 0; padding:24px 20px; }
.rp-detail .rd-amt { font-size:34px; text-align:center; margin:10px 0; }
.rp-detail .rd-row { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; padding:12px 0; border-bottom:1px solid #f0f0f0; font-size:14px; }
.rp-detail .rd-row .avatar { width:36px; height:36px; border-radius:5px; margin-right:10px; }
.rp-detail .rd-row .rd-sp { margin-left:auto; color:#888; }

/* ===== 转账页 ===== */
.tf-page { background:#ededed; position:absolute; inset:0; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-orient:vertical; -webkit-flex-direction:column; flex-direction:column; }
.tf-to { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; background:#fff; padding:16px; font-size:15px; }
.tf-to .avatar { width:38px; height:38px; border-radius:6px; margin-right:10px; }
.tf-amount-in { background:#fff; margin-top:1px; padding:24px 16px 10px; }
.tf-amount-in .cur { font-size:30px; color:#111; }
.tf-amount-in input { width:100%; font-size:40px; padding:6px 0; border-bottom:1px solid #ececec; }
.tf-amount-in .bal { font-size:12px; color:#b2b2b2; margin-top:10px; }
.tf-note-in { background:#fff; padding:14px 16px; margin-top:8px; }
.tf-note-in input { width:100%; font-size:14px; color:#555; }
.tf-confirm-box { padding:20px 16px; }
.tf-wait { text-align:center; padding:40px 20px; background:#fff; -webkit-box-flex:1; -webkit-flex:1; flex:1; }
.tf-wait .tw-day { color:#888; font-size:13px; }
.tf-wait .tw-amt { font-size:46px; margin:24px 0; font-weight:500; }
.tf-wait .tw-from { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center; color:#576b95; gap:8px; }
.tf-wait .tw-from .avatar { width:28px; height:28px; border-radius:5px; }
.tf-wait .tw-accept { width:80%; margin:30px auto 0; height:46px; background:var(--accent); color:#fff; border-radius:8px; font-size:16px; }
.tf-wait .tw-return { width:80%; margin:12px auto 0; height:44px; color:var(--accent); font-size:15px; }

/* ===== 群聊 / 商城 / 404 ===== */
.mall-grid { display:-webkit-box; display:-webkit-flex; display:flex; flex-wrap:wrap; padding:8px; background:#fff; }
.mall-card { width:50%; padding:8px; }
.mall-card .mc-img { width:100%; height:0; padding-bottom:100%; background:#f0f0f0; border-radius:8px; margin-bottom:8px; }
.mall-card .mc-t { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mall-card .mc-p { color:#fa5151; font-size:14px; margin-top:4px; }
.nf { position:absolute; inset:0; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-orient:vertical;
  -webkit-flex-direction:column; flex-direction:column; -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center; background:#ededed; gap:14px; }
.nf .nf-ic { width:72px; height:72px; fill:#c8c8c8; }
.nf p { color:#888; font-size:14px; }
.empty { text-align:center; padding:60px 20px; color:#b2b2b2; font-size:14px; }
.empty svg { width:64px; height:64px; fill:#d9d9d9; display:block; margin:0 auto 14px; }

/* ===== 异形气泡（body[data-bubble] 选择；形状不同，me/other 镜像；保留 me 绿 / other 白底色） ===== */
/* 云朵 */
body[data-bubble="cloud"] .other .bubble { border-radius:4px 20px 20px 20px; }
body[data-bubble="cloud"] .me .bubble { border-radius:20px 4px 20px 20px; }
body[data-bubble="cloud"] .bubble.tail::before { border-width:5px; top:15px; }
body[data-bubble="cloud"] .other .bubble.tail::before { left:-9px; border-right-color:#fff; }
body[data-bubble="cloud"] .me .bubble.tail::before { right:-9px; border-left-color:var(--bubble-me); }
/* 漫画对话框：大尖尾 */
body[data-bubble="speech"] .other .bubble { border-radius:14px 14px 14px 3px; }
body[data-bubble="speech"] .me .bubble { border-radius:14px 14px 3px 14px; }
body[data-bubble="speech"] .bubble.tail::before { border-width:9px; top:10px; }
body[data-bubble="speech"] .other .bubble.tail::before { left:-16px; border-right-color:#fff; }
body[data-bubble="speech"] .me .bubble.tail::before { right:-16px; border-left-color:var(--bubble-me); }
/* 便签：微斜 + 折角 */
body[data-bubble="note"] .bubble { border-radius:3px; box-shadow:0 2px 5px rgba(0,0,0,.12); }
body[data-bubble="note"] .other .bubble { -webkit-transform:rotate(-.6deg); transform:rotate(-.6deg); }
body[data-bubble="note"] .me .bubble { -webkit-transform:rotate(.6deg); transform:rotate(.6deg); }
body[data-bubble="note"] .bubble.tail::before { display:none; }
body[data-bubble="note"] .bubble::after { content:""; position:absolute; bottom:0; width:10px; height:10px;
  background:linear-gradient(135deg, rgba(0,0,0,.10) 0 50%, transparent 50%); }
body[data-bubble="note"] .other .bubble::after { left:0; }
body[data-bubble="note"] .me .bubble::after { right:0; -webkit-transform:scaleX(-1); transform:scaleX(-1); }
/* 胶囊 */
body[data-bubble="capsule"] .bubble { border-radius:999px; padding-left:16px; padding-right:16px; }
body[data-bubble="capsule"] .bubble.tail::before { display:none; }
/* 软糯软糖 */
body[data-bubble="soft"] .other .bubble { border-radius:18px 22px 20px 24px; }
body[data-bubble="soft"] .me .bubble { border-radius:22px 18px 24px 20px; }
body[data-bubble="soft"] .bubble { box-shadow:0 3px 0 rgba(0,0,0,.06), inset 0 2px 2px rgba(255,255,255,.5); }
body[data-bubble="soft"] .bubble.tail::before { border-width:7px; top:16px; }
body[data-bubble="soft"] .other .bubble.tail::before { left:-12px; border-right-color:#fff; }
body[data-bubble="soft"] .me .bubble.tail::before { right:-12px; border-left-color:var(--bubble-me); }

/* 已读回执 */
.msg-receipt { font-size:11px; color:#b2b2b2; margin:2px 4px 0; text-align:right; }
.msg-receipt.read { color:var(--accent); }

/* 大表情 */
.sticker-big { font-size:64px; line-height:1.1; padding:4px 2px; display:inline-block;
  -webkit-animation:stickerpop .25s ease; animation:stickerpop .25s ease; }
@-webkit-keyframes stickerpop { 0%{-webkit-transform:scale(.4);}70%{-webkit-transform:scale(1.12);}100%{-webkit-transform:scale(1);} }
@keyframes stickerpop { 0%{transform:scale(.4);}70%{transform:scale(1.12);}100%{transform:scale(1);} }

/* ===== 一起听歌卡片（居中，黑胶旋转 + 模拟进度） ===== */
.music-row { -webkit-box-pack:center; justify-content:center; }
.music-card { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center;
  background:#fff; border-radius:14px; padding:14px; width:86%; max-width:340px; box-shadow:0 4px 14px rgba(0,0,0,.08); }
.disc { position:relative; width:56px; height:56px; border-radius:50%; -webkit-flex-shrink:0; flex-shrink:0; margin-right:14px;
  background:radial-gradient(circle at center, #444 0 18%, #111 19% 100%);
  -webkit-animation:spin 6s linear infinite; animation:spin 6s linear infinite; }
.disc-hole { position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--bubble-me); }
@-webkit-keyframes spin { to { -webkit-transform:rotate(360deg); } }
@keyframes spin { to { transform:rotate(360deg); } }
.music-info { -webkit-box-flex:1; -webkit-flex:1; flex:1; min-width:0; }
.mu-title { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mu-artist { font-size:12px; color:#b2b2b2; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mu-bar { height:3px; background:#ececec; border-radius:2px; margin-top:9px; overflow:hidden; }
.mu-bar i { display:block; width:38%; height:100%; background:var(--accent); border-radius:2px;
  -webkit-animation:muprog 30s linear infinite; animation:muprog 30s linear infinite; }
@-webkit-keyframes muprog { from{-webkit-transform:translateX(-100%);}to{-webkit-transform:translateX(260%);} }
@keyframes muprog { from{transform:translateX(-100%);}to{transform:translateX(260%);} }
.mu-tag { font-size:11px; color:var(--accent); margin-top:6px; }

/* ===== 表情面板（dock 内，分类 tab + 网格） ===== */
.emoji-panel { -webkit-flex-shrink:0; flex-shrink:0; background:#f7f7f7; border-top:1px solid #e5e5e5; height:240px;
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-orient:vertical; -webkit-flex-direction:column; flex-direction:column; }
.ep-tabs { display:-webkit-box; display:-webkit-flex; display:flex; border-bottom:1px solid #e5e5e5; background:#fff; }
.ep-tab { -webkit-box-flex:1; -webkit-flex:1; flex:1; height:42px; font-size:14px; color:#666; }
.ep-tab.on { color:var(--accent); border-bottom:2px solid var(--accent); font-weight:500; }
.ep-grid { -webkit-box-flex:1; -webkit-flex:1; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:-webkit-box; display:-webkit-flex; display:flex; flex-wrap:wrap; -webkit-align-content:flex-start; align-content:flex-start; padding:8px; }
.ep-cell { width:10%; height:40px; font-size:23px; line-height:40px; text-align:center; }
.ep-cell:active { -webkit-transform:scale(1.3); transform:scale(1.3); }

/* ===== 深夜已睡：收起输入栏 ===== */
.chat-bar.locked { -webkit-box-pack:center; justify-content:center; }
.sleep-bar { width:100%; text-align:center; font-size:14px; color:#b2b2b2; padding:6px 0; }

/* ===== 发现页 · 真人区入口 ===== */
.plaza-entry { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; padding:10px 12px; background:#fff; }
.plaza-entry:active { background:#ececec; }

/* ===== 真人区 ===== */
.plaza-tabs { display:-webkit-box; display:-webkit-flex; display:flex; background:#fff; border-bottom:1px solid #ececec; }
.plaza-tab { -webkit-box-flex:1; -webkit-flex:1; flex:1; height:46px; font-size:15px; color:#666; position:relative; }
.plaza-tab.on { color:#111; font-weight:600; }
.plaza-tab.on::after { content:""; position:absolute; left:50%; bottom:0; width:28px; height:3px; margin-left:-14px; background:var(--accent); border-radius:2px; }
.plaza-actions { display:-webkit-box; display:-webkit-flex; display:flex; gap:10px; padding:10px 12px; }
.plaza-body { padding:0 10px 10px; }
.sc-card, .hm-card { background:#fff; border-radius:12px; padding:12px; margin-bottom:10px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.sc-head, .hm-head { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; }
.sc-who, .hm-who { -webkit-box-flex:1; -webkit-flex:1; flex:1; min-width:0; margin-left:10px; }
.sc-name, .hm-name { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-author, .hm-account { font-size:12px; color:#b2b2b2; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-world { font-size:14px; color:#444; margin:9px 0; line-height:1.55; display:-webkit-box;
  -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.sc-traits { display:-webkit-box; display:-webkit-flex; display:flex; flex-wrap:wrap; gap:6px; margin-bottom:9px; }
.trait-chip { font-size:12px; color:var(--accent); background:#e9faf0; border-radius:5px; padding:2px 8px; }
.sc-foot, .hm-foot { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; gap:10px; }
.sc-foot .like-btn { margin-left:auto; }
.sc-foot .adopt-count { font-size:12px; color:#b2b2b2; }
.hm-content { font-size:15px; line-height:1.6; margin:9px 0 4px; white-space:pre-wrap; word-break:break-word; }
.tag-ai { display:inline-block; font-size:10px; color:#fff; background:var(--accent); border-radius:4px; padding:0 5px; vertical-align:1px; font-weight:500; }
.tag-real { display:inline-block; font-size:10px; color:#fff; background:#3b82f6; border-radius:4px; padding:0 5px; vertical-align:1px; font-weight:500; }
.like-btn { font-size:13px; color:#b2b2b2; padding:4px 6px; }
.like-btn.liked { color:#fa5151; }
.like-btn:active { -webkit-transform:scale(1.15); transform:scale(1.15); }

/* ===== 深色模式（微信深色配色；html[data-theme="dark"]） ===== */
html[data-theme="dark"] body, html[data-theme="dark"] #app, html[data-theme="dark"] .view,
html[data-theme="dark"] #boot, html[data-theme="dark"] .ob { background:#191919; color:#e2e2e2; }
html[data-theme="dark"] .navbar, html[data-theme="dark"] .tabbar, html[data-theme="dark"] .chat-bar,
html[data-theme="dark"] .plus-panel, html[data-theme="dark"] .emoji-panel, html[data-theme="dark"] .sheet { background:#1f1f1f; border-color:#2a2a2a; }
html[data-theme="dark"] .nav-left, html[data-theme="dark"] .nav-right, html[data-theme="dark"] .nav-btn,
html[data-theme="dark"] .nav-title { color:#e2e2e2; }
html[data-theme="dark"] .nav-icon, html[data-theme="dark"] .nav-btn svg { fill:#e2e2e2; }
html[data-theme="dark"] .tab-item { color:#8a8a8a; }
html[data-theme="dark"] .tab-item.active { color:var(--accent); }
html[data-theme="dark"] .list, html[data-theme="dark"] .cell, html[data-theme="dark"] .conv, html[data-theme="dark"] .moments,
html[data-theme="dark"] .form-card, html[data-theme="dark"] .sc-card, html[data-theme="dark"] .hm-card,
html[data-theme="dark"] .music-card, html[data-theme="dark"] .modal { background:#2b2b2b; color:#e2e2e2; }
html[data-theme="dark"] .cs-head { background:#2b2b2b; color:#e2e2e2; }
html[data-theme="dark"] .cs-head .me-id h3 { color:#e2e2e2; }
html[data-theme="dark"] .me-header { background:#2b2b2b; }
html[data-theme="dark"] .me-header > svg { fill:#8a8a8a; }
html[data-theme="dark"] .cell:active, html[data-theme="dark"] .conv:active { background:#333; }
html[data-theme="dark"] .cell + .cell::before, html[data-theme="dark"] .conv + .cell::before,
html[data-theme="dark"] .conv + .conv::before { background:#2a2a2a; }
html[data-theme="dark"] .cell-title, html[data-theme="dark"] .conv-name, html[data-theme="dark"] .field label { color:#e2e2e2; }
html[data-theme="dark"] .cell-sub, html[data-theme="dark"] .conv-last, html[data-theme="dark"] .cell-right,
html[data-theme="dark"] .muted, html[data-theme="dark"] .conv-time, html[data-theme="dark"] .sc-author,
html[data-theme="dark"] .hm-account, html[data-theme="dark"] .msg-meta, html[data-theme="dark"] .quota-line,
html[data-theme="dark"] .sleep-bar, html[data-theme="dark"] .adopt-count { color:#8a8a8a; }
html[data-theme="dark"] .other .bubble { background:#2b2b2b; color:#e2e2e2; }
html[data-theme="dark"] .me .bubble { background:#617a55; color:#e2e2e2; }
html[data-theme="dark"] .other .bubble.tail::before,
html[data-theme="dark"] body[data-bubble="cloud"] .other .bubble.tail::before,
html[data-theme="dark"] body[data-bubble="speech"] .other .bubble.tail::before,
html[data-theme="dark"] body[data-bubble="soft"] .other .bubble.tail::before { border-right-color:#2b2b2b; }
html[data-theme="dark"] .me .bubble.tail::before,
html[data-theme="dark"] body[data-bubble="cloud"] .me .bubble.tail::before,
html[data-theme="dark"] body[data-bubble="speech"] .me .bubble.tail::before,
html[data-theme="dark"] body[data-bubble="soft"] .me .bubble.tail::before { border-left-color:#617a55; }
html[data-theme="dark"] input, html[data-theme="dark"] textarea { color:#e2e2e2; }
html[data-theme="dark"] .chat-input, html[data-theme="dark"] .voice-hold { background:#2b2b2b; color:#e2e2e2; border-color:#2a2a2a; }
html[data-theme="dark"] .search-bar { background:#191919; }
html[data-theme="dark"] .search-in { background:#2b2b2b; color:#8a8a8a; }
html[data-theme="dark"] .group-gap { background:#191919; }
html[data-theme="dark"] .ep-grid, html[data-theme="dark"] .plaza-body { background:transparent; }
html[data-theme="dark"] .ep-tabs, html[data-theme="dark"] .plaza-tabs, html[data-theme="dark"] .sheet-item { background:#2b2b2b; color:#e2e2e2; border-color:#2a2a2a; }
html[data-theme="dark"] .ep-tab, html[data-theme="dark"] .plaza-tab { color:#8a8a8a; }
html[data-theme="dark"] .plaza-tab.on, html[data-theme="dark"] .ep-tab.on { color:var(--accent); }
html[data-theme="dark"] .trait-chip { background:#263a2c; color:#7fd49a; }
html[data-theme="dark"] .sc-world, html[data-theme="dark"] .hm-content { color:#cfcfcf; }
html[data-theme="dark"] .like-btn { color:#8a8a8a; }
html[data-theme="dark"] .like-btn.liked { color:#fa5151; }
html[data-theme="dark"] .btn-gray { background:#2b2b2b; color:#e2e2e2; border-color:#2a2a2a; }
html[data-theme="dark"] .btn-plain { background:transparent; }
html[data-theme="dark"] .nf { background:#191919; }
html[data-theme="dark"] .nf p { color:#8a8a8a; }
html[data-theme="dark"] .mu-bar { background:#3a3a3a; }
html[data-theme="dark"] .mo-like { background:#2b2b2b; color:#7fd49a; }
html[data-theme="dark"] .bubble.sys { color:#8a8a8a; }

/* ===== 轻淡入（只动 opacity，避免整列重渲染时明显闪烁） ===== */
.msg-row { -webkit-animation:msgfade .16s ease; animation:msgfade .16s ease; }
@-webkit-keyframes msgfade { from{opacity:0;}to{opacity:1;} }
@keyframes msgfade { from{opacity:0;}to{opacity:1;} }

/* ===== 补充：快速回复气泡 ===== */
.quick-replies { -webkit-flex-shrink:0; flex-shrink:0; background:#f2f2f2; padding:8px 12px; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:8px; }
.qr-chip { background:#fff; border-radius:16px; padding:7px 14px; font-size:14px; color:#576b95; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.qr-chip:active { background:#e8f0fe; }

/* ===== 网络错误 / 危机提示气泡 ===== */
.neterr { max-width:80%; background:#fff7e6; border:1px solid #ffd591; border-radius:8px; padding:10px 12px; }
.neterr-msg { font-size:13px; color:#ad6800; line-height:1.5; }
.neterr-retry { margin-top:8px; display:inline-block; color:#fa8c16; font-size:14px; padding:4px 12px; border:1px solid #fa8c16; border-radius:14px; }
.bubble.sys.crisis { background:#fff1f0; color:#cf1322; border-radius:8px; padding:10px 14px; text-align:left; max-width:86%; margin:8px auto; line-height:1.6; }
.offline-tag { display:block; font-size:10px; color:#fa8c16; margin-bottom:3px; }

/* ===== 音乐播放器补充 ===== */
.mu-ctl { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; margin-top:8px; gap:8px; }
.mu-play { width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-size:11px; line-height:26px; text-align:center; -webkit-flex-shrink:0; flex-shrink:0; }
.music-card .disc { -webkit-animation-play-state:paused; animation-play-state:paused; }
.music-card .disc.spin { -webkit-animation-play-state:running; animation-play-state:running; }

/* ===== 聊天信息页 ===== */
.cs-head { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; background:#fff; padding:18px 14px; }
.cs-head .me-id h3 { font-size:19px; }
.aff-bar { width:100%; height:6px; background:#ececec; border-radius:3px; margin-top:8px; overflow:hidden; }
.aff-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),#7fd49a); border-radius:3px; -webkit-transition:width .4s; transition:width .4s; }

/* ===== 卡包 / 记忆卡 ===== */
.card-grid { display:-webkit-box; display:-webkit-flex; display:flex; flex-wrap:wrap; padding:12px; gap:12px; background:#ededed; }
.mem-card { width:calc(50% - 6px); border-radius:12px; padding:16px 14px; min-height:96px; color:#fff; -webkit-box-shadow:0 2px 6px rgba(0,0,0,.12); box-shadow:0 2px 6px rgba(0,0,0,.12); }
.mem-card .mc-name { font-size:15px; font-weight:600; }
.mem-card .mc-desc { font-size:12px; opacity:.9; margin-top:8px; line-height:1.5; }

/* ===== 扫一扫 / 摇一摇 ===== */
.scan-page, .shake-page { text-align:center; padding:30px 20px; }
.scan-frame { width:210px; height:210px; margin:10px auto; position:relative; border-radius:8px; background:#111; overflow:hidden; }
.scan-corner { position:absolute; width:22px; height:22px; border:3px solid var(--accent); }
.scan-corner.tl { top:0; left:0; border-right:0; border-bottom:0; border-radius:6px 0 0 0; }
.scan-corner.tr { top:0; right:0; border-left:0; border-bottom:0; border-radius:0 6px 0 0; }
.scan-corner.bl { bottom:0; left:0; border-right:0; border-top:0; border-radius:0 0 0 6px; }
.scan-corner.br { bottom:0; right:0; border-left:0; border-top:0; border-radius:0 0 6px 0; }
.scan-line { position:absolute; left:6px; right:6px; height:2px; background:var(--accent); -webkit-animation:scanmove 2.2s ease-in-out infinite; animation:scanmove 2.2s ease-in-out infinite; }
@-webkit-keyframes scanmove { 0%,100%{top:8px;}50%{top:196px;} }
@keyframes scanmove { 0%,100%{top:8px;}50%{top:196px;} }
.result-card { max-width:280px; margin:20px auto; background:#fff; border-radius:14px; padding:24px 16px; text-align:center; -webkit-box-shadow:0 4px 16px rgba(0,0,0,.08); box-shadow:0 4px 16px rgba(0,0,0,.08); }
.result-card h3 { margin-top:12px; font-size:17px; }
.result-card p { margin-top:8px; font-size:13px; }
.shake-phone { font-size:70px; margin:20px 0; -webkit-animation:shakew .6s ease-in-out infinite; animation:shakew .6s ease-in-out infinite; display:inline-block; }
@-webkit-keyframes shakew { 0%,100%{-webkit-transform:rotate(0);}25%{-webkit-transform:rotate(-8deg);}75%{-webkit-transform:rotate(8deg);} }
@keyframes shakew { 0%,100%{transform:rotate(0);}25%{transform:rotate(-8deg);}75%{transform:rotate(8deg);} }

/* ===== 公众号文章 / 关于 ===== */
.article { background:#fff; padding:20px 18px; }
.article h2 { font-size:20px; line-height:1.4; }
.article p { margin-top:14px; line-height:1.8; color:#333; font-size:15px; }
.about-hero { background:linear-gradient(160deg,var(--accent),#06ad56); color:#fff; text-align:center; padding:40px 20px 46px; }
.about-hero .boot-logo { margin:0 auto; background:#fff; color:var(--accent); }
.about-hero h2 { margin-top:14px; font-size:20px; }
.about-hero p { font-size:13px; opacity:.9; margin-top:6px; }

/* ===== 外观 / 气泡预览卡 ===== */
.appearance-cards, .bubble-cards { display:-webkit-box; display:-webkit-flex; display:flex; flex-wrap:wrap; padding:12px; gap:10px; background:#ededed; }
.appearance-card, .bubble-card { width:calc(50% - 5px); background:#fff; border-radius:10px; padding:14px; text-align:center; font-size:13px; border:2px solid transparent; }
.appearance-card.sel, .bubble-card.sel { border-color:var(--accent); }
.bubble-card .pv-me { background:var(--bubble-me); border-radius:6px; padding:8px; font-size:12px; color:#111; margin:4px 0; text-align:left; }
.bubble-card .pv-other { background:#f0f0f0; border-radius:6px; padding:8px; font-size:12px; color:#111; text-align:left; }

/* ===== 聊天背景格 ===== */
.bg-grid { display:-webkit-box; display:-webkit-flex; display:flex; flex-wrap:wrap; padding:12px; gap:10px; background:#ededed; }
.bg-tile { width:calc(25% - 8px); height:64px; border-radius:8px; border:2px solid transparent; }
.bg-tile.sel { border-color:var(--accent); }

/* ===== 其它杂项 ===== */
.linkbtn { color:#576b95; font-size:14px; padding:4px 8px; }
.linkbtn.dim { color:#b2b2b2; }
.danger-cell { color:#fa5151; text-align:center; }
.legal-page { background:#fff; padding:20px 18px; }
.legal-page p { margin:12px 0; line-height:1.7; font-size:14px; color:#444; }
.song-row { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; padding:12px; background:#fff; border-bottom:1px solid #f0f0f0; }
.song-row .sr-info { -webkit-box-flex:1; -webkit-flex:1; flex:1; min-width:0; }
.song-row .sr-title { font-size:15px; }
.song-row .sr-sub { font-size:12px; color:#b2b2b2; margin-top:2px; }
.wx-cell { display:inline-block; width:40px; height:40px; }
.wx-cell svg { width:28px; height:28px; margin:6px; }

/* ===== RTL 镜像 ===== */
[dir="rtl"] .nav-left { -webkit-box-ordinal:2; order:2; }
[dir="rtl"] .nav-right { -webkit-box-ordinal:1; order:1; }
[dir="rtl"] .cell-ic, [dir="rtl"] .msg-row.other .msg-av, [dir="rtl"] .sc-head .avatar, [dir="rtl"] .hm-head .avatar { margin-right:0; margin-left:12px; }
[dir="rtl"] .cell-arrow { -webkit-transform:rotate(225deg); transform:rotate(225deg); }
[dir="rtl"] .msg-row.other .msg-av { margin-left:9px; margin-right:0; }
[dir="rtl"] .msg-row.me .msg-av { margin-right:9px; margin-left:0; }
[dir="rtl"] .other .bubble.tail::before { left:auto; right:-11px; border-left-color:#fff; border-right:0; }
[dir="rtl"] .me .bubble.tail::before { right:auto; left:-11px; border-right-color:var(--bubble-me); border-left:0; }
[dir="rtl"] .sc-foot .like-btn, [dir="rtl"] .sc-foot .btn { margin-left:0; margin-right:auto; }
[dir="rtl"] .cell-main, [dir="rtl"] .sc-who, [dir="rtl"] .hm-who, [dir="rtl"] .me-id, [dir="rtl"] .conv-body { margin-left:0; margin-right:12px; }
[dir="rtl"] .mo-like, [dir="rtl"] .neterr-msg { text-align:right; }

/* ===== 新组件深色适配 ===== */
html[data-theme="dark"] .neterr { background:#3a2f1a; border-color:#5c4a1e; }
html[data-theme="dark"] .neterr-msg { color:#f0c060; }
html[data-theme="dark"] .qr-chip { background:#2b2b2b; color:#9db4e0; }
html[data-theme="dark"] .crisis { background:#3a1f1f; color:#ff6b6b; }
html[data-theme="dark"] .result-card, html[data-theme="dark"] .article { background:#2b2b2b; color:#e2e2e2; }
html[data-theme="dark"] .article p { color:#cfcfcf; }
html[data-theme="dark"] .appearance-card, html[data-theme="dark"] .bubble-card, html[data-theme="dark"] .song-row { background:#2b2b2b; color:#e2e2e2; }
html[data-theme="dark"] .bubble-card .pv-other { background:#3a3a3a; color:#e2e2e2; }
html[data-theme="dark"] .aff-bar { background:#3a3a3a; }
html[data-theme="dark"] .legal-page { background:#2b2b2b; }
html[data-theme="dark"] .legal-page p { color:#cfcfcf; }
html[data-theme="dark"] .bg-tile { }

/* ===== 外观主题选择卡 ===== */
.appearance-cards { display:-webkit-box; display:-webkit-flex; display:flex; flex-wrap:wrap; padding:14px; gap:12px; background:#ededed; }
.app-card { width:calc(33.33% - 8px); text-align:center; }
.app-preview { height:120px; border-radius:10px; border:2px solid transparent; position:relative; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.1); }
.app-card.on .app-preview { border-color:var(--accent); }
.app-preview .app-bar { position:absolute; top:10px; left:12px; right:12px; height:8px; border-radius:4px; background:rgba(128,128,128,.35); }
.app-preview .app-bubble { position:absolute; top:30px; left:12px; width:60%; height:14px; border-radius:7px; background:rgba(128,128,128,.3); }
.app-preview .app-bubble.r { left:auto; right:12px; background:var(--bubble-me); }
.app-name { margin-top:8px; font-size:13px; color:#555; }
.app-card.on .app-name { color:var(--accent); }

/* ===== 气泡形状预览 ===== */
.bubble-card { background:#fff; border-radius:12px; padding:14px; margin:10px; border:2px solid transparent; }
.bubble-card.on { border-color:var(--accent); }
.bp-row { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; margin:6px 0; }
.bp-row.me { -webkit-box-pack:end; -webkit-justify-content:flex-end; justify-content:flex-end; }
.bp-av { width:26px; height:26px; border-radius:5px; background:#4a90e2; -webkit-flex-shrink:0; flex-shrink:0; }
.bp-row.me .bp-av { background:#f5a623; margin-left:8px; }
.bp-row.other .bp-av { margin-right:8px; }
.bp-row .bubble { font-size:12px; padding:5px 9px; }

/* 深色：外观/气泡预览文字 */
html[data-theme="dark"] .appearance-cards { background:#191919; }
html[data-theme="dark"] .app-name { color:#cfcfcf; }
html[data-theme="dark"] .bubble-card { background:#2b2b2b; }
html[data-theme="dark"] .bp-row .bubble.other { background:#3a3a3a; color:#e2e2e2; }

/* ============ 长按消息黑色菜单（微信式） ============ */
.ctx-mask { position:fixed; left:0; top:0; right:0; bottom:0; z-index:900; background:transparent; }
.ctx-menu {
  position:fixed; z-index:901; display:-webkit-box; display:-webkit-flex; display:flex;
  background:#2d2d2d; border-radius:10px; padding:14px 6px 12px;
  box-shadow:0 4px 18px rgba(0,0,0,.28);
  -webkit-animation:ctxIn .12s ease-out; animation:ctxIn .12s ease-out;
}
@-webkit-keyframes ctxIn { from { opacity:0; -webkit-transform:scale(.92); } to { opacity:1; -webkit-transform:scale(1); } }
@keyframes ctxIn { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }
.ctx-item {
  -webkit-box-flex:1; -webkit-flex:1 1 0; flex:1 1 0; min-width:0;
  background:transparent; border:0; color:#f2f2f2; font-size:12px;
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-orient:vertical; -webkit-flex-direction:column; flex-direction:column;
  -webkit-box-align:center; align-items:center; padding:0 2px;
}
.ctx-item span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:64px; }
.ctx-item:active { background:rgba(255,255,255,.12); border-radius:6px; }
.ctx-item.danger { color:#ff5a5a; }
.ctx-arrow { position:absolute; width:0; height:0; border:8px solid transparent; }
.ctx-menu .ctx-arrow { left:50%; bottom:-14px; border-top-color:#2d2d2d; border-bottom:0; }
.ctx-menu.below .ctx-arrow { top:-14px; bottom:auto; border-bottom-color:#2d2d2d; border-top:0; }

/* ============ 引用 ============ */
.quote-bar { display:none; }
.quote-bar.on {
  display:block; margin:0 8px 6px; padding:6px 28px 6px 10px; position:relative;
  background:#f2f2f2; border-left:3px solid var(--accent); border-radius:3px; font-size:13px; color:#666;
}
.quote-bar .qb-name { color:#576b95; }
.quote-bar .qb-cancel { position:absolute; right:6px; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); border:0; background:transparent; color:#999; font-size:16px; padding:2px 6px; }
.bubble-quote {
  background:rgba(0,0,0,.06); border-left:3px solid #b0b0b0; border-radius:4px;
  padding:4px 8px; margin-bottom:6px; max-width:220px;
}
.me .bubble-quote { background:rgba(0,0,0,.08); }
.bubble-quote .bq-name { color:#576b95; font-size:12px; }
.me .bubble-quote .bq-name { color:#3d6b2f; }
.bubble-quote .bq-text { color:#888; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ============ 深夜催睡 ============ */
.sleep-bar {
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center;
  -webkit-box-pack:justify; justify-content:space-between; gap:10px; width:100%; padding:0 4px;
  color:#7a7a7a; font-size:14px;
}
.sleep-continue {
  border:1px solid var(--accent); color:var(--accent); background:transparent;
  border-radius:16px; padding:6px 14px; font-size:13px; white-space:nowrap;
}
.sleep-continue:active { background:rgba(7,193,96,.1); }

/* ============ 发送按钮 ============ */
.nav-btn.btn-send {
  background:var(--accent); color:#fff !important; border-radius:6px; width:auto; min-width:56px;
  height:36px; padding:0 12px; font-size:15px;
  display:-webkit-box; display:-webkit-flex; display:flex;
  -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center;
}
.nav-btn.btn-send:active { background:#06a552; }

/* ============ 消息发送状态 ============ */
.msg-fail {
  -webkit-align-self:center; align-self:center; width:18px; height:18px; margin-right:6px;
  background:#fa5151; color:#fff; border-radius:50%; font-size:13px; line-height:18px;
  text-align:center; font-style:normal; border:0;
}
.msg-sending { -webkit-align-self:center; align-self:center; margin-right:6px; display:-webkit-box; display:-webkit-flex; display:flex; }
.mini-spin {
  width:14px; height:14px; border:2px solid #ccc; border-top-color:#666; border-radius:50%;
  -webkit-animation:spn .7s linear infinite; animation:spn .7s linear infinite;
}
@-webkit-keyframes spn { to { -webkit-transform:rotate(360deg); } }
@keyframes spn { to { transform:rotate(360deg); } }

/* ============ 首页列表背景 ============ */
.home-body.has-listbg { background-size:cover !important; background-position:center !important; }
.home-body.has-listbg .conv { background:rgba(255,255,255,.84); }
.home-body.has-listbg .conv:active { background:rgba(236,236,236,.84); }
.home-body.has-listbg .home-banner { background:transparent; }
.home-body.has-listbg .search-bar { background:transparent; }
.home-body.has-listbg .search-in { background:rgba(255,255,255,.7); }

/* ============ 真人会话 ============ */
.tag-real { display:inline-block; font-size:10px; color:#fff; background:#ff7a2d; border-radius:3px; padding:0 3px; vertical-align:middle; margin-left:4px; }
.tag-real.sm { font-size:9px; padding:0 2px; }
.dm-conv .conv-name { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; }

/* ============ 底部操作面板（iOS/微信式 action sheet） ============ */
.sheet-actions { margin:0 8px 8px; }
.sheet-action {
  display:block; width:100%; text-align:center; background:#fff; border:0;
  padding:15px; font-size:17px; border-radius:0; color:#111;
  border-bottom:1px solid #f0f0f0;
}
.sheet-actions .sheet-action:first-child { border-radius:14px 14px 0 0; }
.sheet-actions .sheet-action:last-child { border-radius:0 0 14px 14px; border-bottom:0; }
.sheet-action:only-child { border-radius:14px; }
.sheet-action:active { background:#f2f2f2; }
.sheet-action.danger { color:#fa5151; }
.sheet-action.cancel { border-radius:14px; margin-top:8px; font-weight:600; border-bottom:0; }

/* 气泡按压态 */
.bubble { -webkit-tap-highlight-color:transparent; }
.bubble:active { -webkit-transform:scale(.99); transform:scale(.99); }

/* ===== Morph 主题系统 ===== */
.tab-img { width:100%; height:100%; object-fit:contain; display:block; }
body { font-size:calc(15px * var(--m-fscale, 1)); font-weight:var(--m-fweight, 400); }
.me .bubble, .me .bubble.tail { background:var(--bubble-me); border-radius:var(--bubble-me-radius, 18px); opacity:var(--bubble-me-opacity, 1); }
.me .bubble.tail::before { border-left-color:var(--bubble-me); }

.theme-page { padding-bottom:40px; }
.th-sec { margin:14px 12px; background:#fff; border-radius:12px; padding:14px; }
[data-theme="dark"] .th-sec { background:#2a2a2a; }
.th-title { font-size:14px; color:#888; margin-bottom:10px; font-weight:500; }
.th-swatches { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:10px; }
.swatch { width:34px; height:34px; border-radius:50%; display:inline-block; cursor:pointer; border:2px solid transparent; -webkit-box-flex:0; -webkit-flex:none; flex:none; position:relative; overflow:hidden; }
.swatch.on { border-color:#333; box-shadow:0 0 0 2px #fff inset; }
[data-theme="dark"] .swatch.on { border-color:#fff; }
.swatch-custom input { position:absolute; left:-9999px; }
.swatch-custom span { display:block; width:100%; height:100%; border-radius:50%; }
.th-fonts { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; gap:8px; }
.th-font { padding:8px 12px; border:1px solid #e5e5e5; border-radius:10px; font-size:14px; cursor:pointer; }
.th-font.on { border-color:var(--accent); color:var(--accent); }
.th-slider { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; gap:10px; margin-top:10px; font-size:13px; color:#555; }
.th-slider input[type="range"] { -webkit-box-flex:1; -webkit-flex:1; flex:1; }
.th-val { color:var(--accent); min-width:26px; text-align:right; font-size:13px; }
.th-row { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; gap:10px; font-size:13px; color:#555; margin-top:6px; }
.th-row input[type="color"] { width:44px; height:30px; border:0; padding:0; background:none; }
.th-tabrow { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; gap:8px; margin-top:10px; }
.th-tabname { font-size:13px; color:#333; min-width:52px; }
[data-theme="dark"] .th-tabname { color:#ddd; }
.th-tabprev { width:30px; height:30px; background:#f2f2f2; border-radius:8px; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center; overflow:hidden; }
[data-theme="dark"] .th-tabprev { background:#3a3a3a; }
.th-tabprev img { max-width:26px; max-height:26px; object-fit:contain; }
.th-up { font-size:12px; color:var(--accent); border:1px solid var(--accent); border-radius:8px; padding:4px 8px; cursor:pointer; display:inline-block; }
.th-up input { display:none; }
.th-reset { font-size:12px; color:#999; border:1px solid #e0e0e0; border-radius:8px; padding:4px 8px; cursor:pointer; }
.th-tip { font-size:12px; color:#999; line-height:1.6; margin-bottom:10px; }
.th-codebtns { display:-webkit-box; display:-webkit-flex; display:flex; gap:10px; }
.th-codebtns .btn-green, .th-codebtns .btn-plain { -webkit-box-flex:1; -webkit-flex:1; flex:1; text-align:center; padding:10px 0; border-radius:10px; font-size:14px; }
.th-codebox { background:#f6f6f6; border:1px dashed #ccc; border-radius:10px; padding:12px; font-size:12px; word-break:break-all; line-height:1.7; max-height:160px; overflow-y:auto; color:#333; }
[data-theme="dark"] .th-codebox { background:#333; border-color:#555; color:#eee; }
.th-importbox textarea { width:100%; border:1px solid #e0e0e0; border-radius:10px; padding:10px; font-size:13px; resize:none; color:#333; background:#fafafa; }
[data-theme="dark"] .th-importbox textarea { border-color:#555; background:#333; color:#eee; }
.sheet-full { width:100%; margin-top:12px; padding:11px 0; border-radius:10px; text-align:center; }
.sheet-title { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; align-items:center; -webkit-box-pack:justify; justify-content:space-between; font-size:16px; font-weight:600; padding:14px 16px 4px; }
.sheet-close { width:26px; height:26px; border-radius:50%; background:#f0f0f0; color:#666; font-size:13px; line-height:26px; text-align:center; }

/* =========================================================================
   Morph · 液态玻璃（Liquid Glass）全局质感层
   半透明毛玻璃 + 高光描边 + 折射光斑 + 悬浮胶囊，作用于导航/卡片/气泡/输入栏
   ========================================================================= */

/* ---- 1. 全局彩色光斑背景（让玻璃有东西可折射） ---- */
body {
  background:#eef0f6;
}
#app, .view {
  background:
    radial-gradient(120% 60% at 8% -4%, rgba(139,127,240,.18), transparent 60%),
    radial-gradient(120% 70% at 100% 8%, rgba(242,121,160,.16), transparent 58%),
    radial-gradient(140% 80% at 50% 108%, rgba(16,200,180,.14), transparent 60%),
    linear-gradient(180deg,#f4f5fb 0%,#eef1f6 46%,#f2f0f8 100%);
}
/* 内容滚动区透出光斑，避免被实色盖住 */
.screen-body { background:transparent; }

/* 玻璃基类：圆角毛玻璃 + 顶部内高光 + 发丝描边 */
.lg-glass {
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 8px 28px rgba(40,46,90,.10), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(255,255,255,.35);
}

/* ---- 2. 顶部导航栏：毛玻璃 ---- */
.navbar {
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.55);
  box-shadow:0 1px 0 rgba(40,46,90,.05);
}

/* ---- 3. 底部导航：悬浮玻璃胶囊（核心） ---- */
.tabbar {
  height:62px;
  margin:0 12px;
  margin-bottom:calc(10px + constant(safe-area-inset-bottom));
  margin-bottom:calc(10px + env(safe-area-inset-bottom));
  padding:6px 6px;
  border-radius:26px;
  background:rgba(255,255,255,.52);
  -webkit-backdrop-filter:blur(28px) saturate(190%);
  backdrop-filter:blur(28px) saturate(190%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 14px 34px rgba(40,46,90,.16), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -2px 8px rgba(255,255,255,.35);
  position:relative; z-index:20;
}
.tab-item { position:relative; border-radius:20px; height:50px; }
.tab-item.active { color:var(--accent); }
/* 选中项的玻璃圆片高光 */
.tab-item.active::before {
  content:""; position:absolute; top:2px; left:50%; width:46px; height:30px; margin-left:-23px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.32));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 2px 10px rgba(80,90,160,.16);
  z-index:-1;
}
.tab-item.active .tab-ic { transform:scale(1.08); }
/* 角标底色随胶囊微调 */
.tab-badge { border-color:rgba(255,255,255,.6); }

/* ---- 4. 分组卡片：浮起玻璃 ---- */
.list, .form-card, .feat-intro, .sc-card, .hm-card, .music-card,
.group-gap + .list {
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
  border-radius:16px;
  margin-left:10px; margin-right:10px; margin-top:10px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(40,46,90,.08), inset 0 1px 0 rgba(255,255,255,.7);
}
/* 列表里的行不再用实色底，让玻璃透出 */
.cell, .conv, .moments-entry { background:transparent; }
.cell:active, .conv:active { background:rgba(255,255,255,.5); }
.list, .form-card { background:rgba(255,255,255,.66); }
/* 独立整块（无分组）的白卡兜底 */
.modal, .sheet {
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
}

/* 首页会话列表直接是 .conv 序列，需要外层玻璃卡片；给 body 加内边距承载 */
.home-body .conv { background:rgba(255,255,255,.6); }
.home-body .conv + .conv::before { background:rgba(40,46,90,.08); }

/* ---- 5. 搜索条：玻璃胶囊 ---- */
.search-bar { background:transparent; padding:10px 12px 6px; }
.search-in {
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

/* ---- 6. 聊天栏：悬浮毛玻璃 + 输入玻璃胶囊 ---- */
.chat-bar {
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.55);
}
.chat-input {
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.75);
  border-radius:19px;
  box-shadow:inset 0 1px 2px rgba(40,46,90,.06), 0 1px 4px rgba(40,46,90,.06);
}
.voice-hold {
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.75);
  border-radius:19px;
}

/* ---- 7. 气泡：玻璃高光 + 柔和边缘 ---- */
.other .bubble {
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  backdrop-filter:blur(12px) saturate(150%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 2px 10px rgba(40,46,90,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.me .bubble {
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 2px 10px rgba(40,140,80,.14), inset 0 1px 0 rgba(255,255,255,.35);
}
/* 日期条玻璃 */
.day-line span { background:rgba(40,46,90,.28); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

/* ---- 8. 按钮轻微玻璃化 ---- */
.btn-green {
  background:linear-gradient(135deg,var(--accent),#06ad56);
  box-shadow:0 8px 20px rgba(7,193,96,.3), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-plain { background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }

/* 功能面板/加号面板玻璃 */
.plus-panel { background:rgba(247,247,250,.7); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
.plus-item .pi-ic { background:rgba(255,255,255,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(40,46,90,.08); }

/* 引导页玻璃化 */
.ob { background:transparent; }
.feat-intro { background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }

/* =========================================================================
   深色模式液态玻璃
   ========================================================================= */
html[data-theme="dark"] body { background:#101114; }
html[data-theme="dark"] #app, html[data-theme="dark"] .view {
  background:
    radial-gradient(120% 60% at 8% -4%, rgba(120,110,220,.22), transparent 60%),
    radial-gradient(120% 70% at 100% 8%, rgba(200,90,150,.18), transparent 58%),
    radial-gradient(140% 80% at 50% 108%, rgba(20,160,150,.16), transparent 60%),
    linear-gradient(180deg,#15161c 0%,#101114 46%,#14121a 100%);
}
html[data-theme="dark"] .navbar {
  background:rgba(28,29,36,.6);
  -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
  border-bottom-color:rgba(255,255,255,.06); box-shadow:0 1px 0 rgba(0,0,0,.3);
}
html[data-theme="dark"] .tabbar {
  background:rgba(28,29,36,.55);
  -webkit-backdrop-filter:blur(28px) saturate(190%); backdrop-filter:blur(28px) saturate(190%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="dark"] .tab-item.active::before {
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 10px rgba(0,0,0,.4);
}
html[data-theme="dark"] .list, html[data-theme="dark"] .form-card, html[data-theme="dark"] .feat-intro,
html[data-theme="dark"] .sc-card, html[data-theme="dark"] .hm-card, html[data-theme="dark"] .music-card {
  background:rgba(43,43,43,.55);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 6px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="dark"] .cell, html[data-theme="dark"] .conv, html[data-theme="dark"] .moments-entry { background:transparent; }
html[data-theme="dark"] .cell:active, html[data-theme="dark"] .conv:active { background:rgba(255,255,255,.06); }
html[data-theme="dark"] .home-body .conv { background:rgba(43,43,43,.5); }
html[data-theme="dark"] .modal, html[data-theme="dark"] .sheet {
  background:rgba(34,35,42,.85);
  -webkit-backdrop-filter:blur(26px) saturate(180%); backdrop-filter:blur(26px) saturate(180%);
}
html[data-theme="dark"] .search-in {
  background:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);
}
html[data-theme="dark"] .chat-bar {
  background:rgba(28,29,36,.62);
  -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
  border-top-color:rgba(255,255,255,.06);
}
html[data-theme="dark"] .chat-input, html[data-theme="dark"] .voice-hold {
  background:rgba(255,255,255,.09); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
}
html[data-theme="dark"] .other .bubble {
  background:rgba(43,43,43,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 2px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="dark"] .plus-panel { background:rgba(24,25,30,.72); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
html[data-theme="dark"] .plus-item .pi-ic { background:rgba(255,255,255,.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
html[data-theme="dark"] .ob { background:transparent; }

/* 我页头部玻璃卡 */
.me-header {
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  margin:10px; border-radius:18px; border:1px solid rgba(255,255,255,.65);
  box-shadow:0 6px 20px rgba(40,46,90,.08), inset 0 1px 0 rgba(255,255,255,.75);
}
html[data-theme="dark"] .me-header {
  background:rgba(43,43,43,.55); border:1px solid rgba(255,255,255,.06);
  box-shadow:0 6px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
/* 聊天页/真人区二级页背景也透出光斑 */
.chat-scroll, .plaza-body, .cs-body, .set-body { background:transparent; }
.plaza-tabs {
  background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-bottom-color:rgba(255,255,255,.5);
}
html[data-theme="dark"] .plaza-tabs { background:rgba(28,29,36,.6); border-bottom-color:rgba(255,255,255,.06); }

/* =========================================================================
   真·液态玻璃 v2：主 Tab 页全屏布局，内容从玻璃栏下方滑动穿过
   ========================================================================= */
.view.tabview { position:absolute; inset:0; overflow:hidden; }
.view.tabview > .navbar {
  position:absolute; top:0; left:0; right:0; z-index:30;
  background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(28px) saturate(200%); backdrop-filter:blur(28px) saturate(200%);
  border-bottom:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 6px 20px rgba(40,46,90,.08);
}
.view.tabview > .tabbar {
  position:absolute; left:12px; right:12px; bottom:calc(10px + constant(safe-area-inset-bottom)); bottom:calc(10px + env(safe-area-inset-bottom));
  z-index:30; height:62px; margin:0;
  background:rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(30px) saturate(210%); backdrop-filter:blur(30px) saturate(210%);
  border:1px solid rgba(255,255,255,.72);
  border-radius:28px;
  box-shadow:0 16px 38px rgba(40,46,90,.2), inset 0 1.2px 0 rgba(255,255,255,.9), inset 0 -3px 10px rgba(255,255,255,.3);
}
.view.tabview > .screen-body {
  position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-top:48px; padding-bottom:118px;
}
/* 列表/卡片在滚动时从栏下穿过，玻璃栏才有真实模糊折射 */
.view.tabview > .screen-body > .group-gap:first-child,
.view.tabview > .screen-body > .home-banner:first-child { margin-top:8px; }

/* 深色：真玻璃 */
html[data-theme="dark"] .view.tabview > .navbar {
  background:rgba(24,25,31,.45);
  -webkit-backdrop-filter:blur(28px) saturate(200%); backdrop-filter:blur(28px) saturate(200%);
  border-bottom-color:rgba(255,255,255,.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 20px rgba(0,0,0,.4);
}
html[data-theme="dark"] .view.tabview > .tabbar {
  background:rgba(26,27,33,.42);
  -webkit-backdrop-filter:blur(30px) saturate(210%); backdrop-filter:blur(30px) saturate(210%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 16px 38px rgba(0,0,0,.55), inset 0 1.2px 0 rgba(255,255,255,.1), inset 0 -3px 10px rgba(0,0,0,.3);
}
/* 滚动条隐藏（玻璃氛围） */
.view.tabview > .screen-body::-webkit-scrollbar { width:0; height:0; }

/* =========================================================================
   全局界面背景（定制v风格，所有页面）
   ========================================================================= */
html[data-gb="image"] body::before {
  content:""; position:fixed; top:-40px; left:-40px; right:-40px; bottom:-40px; z-index:0;
  background-image:var(--gb-image); background-size:cover; background-position:center;
  filter:blur(var(--gb-blur,0px)); opacity:var(--gb-opacity,1); pointer-events:none;
}
/* 图片型：整层浅色蒙版，让壁纸透出但不影响阅读 */
html[data-gb="image"] #app {
  background:linear-gradient(rgba(242,243,248,var(--gb-tint,.62)), rgba(240,242,248,var(--gb-tint,.62)));
}
html[data-gb="image"] .view {
  background:linear-gradient(rgba(242,243,248,var(--gb-tint,.62)), rgba(240,242,248,var(--gb-tint,.62)));
}
/* 纯色/渐变型：直接铺底 */
html[data-gb="color"] #app, html[data-gb="gradient"] #app,
html[data-gb="color"] .view, html[data-gb="gradient"] .view { background:var(--gb-color); }
/* 深色模式下壁纸蒙版加深（两个属性都在同一 html 元素上） */
html[data-theme="dark"][data-gb="image"] #app,
html[data-theme="dark"][data-gb="image"] .view {
  background:linear-gradient(rgba(18,19,24,var(--gb-tint,.6)), rgba(18,19,24,var(--gb-tint,.6)));
}

/* 真人区“找真人”卡 */
.plaza-find { display:flex; align-items:center; gap:10px; margin:10px 12px 4px; padding:12px 14px;
  border-radius:18px; background:linear-gradient(135deg,rgba(139,92,246,.92),rgba(255,95,158,.92));
  color:#fff; box-shadow:0 10px 24px rgba(139,92,246,.3); }
.plaza-find .pf-ava { width:42px; height:42px; flex:0 0 42px; border-radius:13px; background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; }
.plaza-find .pf-ava svg { width:24px; height:24px; fill:#fff; }
.plaza-find .pf-text { flex:1; min-width:0; }
.plaza-find .pf-title { font-size:15px; font-weight:700; }
.plaza-find .pf-sub { font-size:11px; opacity:.88; margin-top:2px; }
.plaza-find .btn-green { background:rgba(255,255,255,.92); color:#7c3aed; border-color:transparent; flex:0 0 auto; }

/* ===== 主题对接码独立页 ===== */
.tc-card { background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.75); border-radius:18px;
  padding:16px 15px; margin-bottom:14px; box-shadow:0 8px 24px rgba(40,46,90,.08);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); }
.tc-h { font-size:15px; font-weight:700; margin-bottom:6px; color:#1d2330; }
.tc-desc { font-size:12.5px; color:#6b7080; line-height:1.65; margin:0 0 12px; }
.tc-label { font-size:12px; color:#8a8f9c; margin:4px 0 6px; }
.tc-share { font-size:11.5px; color:#8a8f9c; line-height:1.6; margin:10px 2px 0; }
.tc-only { font-size:11.5px; color:#9a6bd8; text-align:center; line-height:1.7; padding:0 12px; }
.tc-ta { width:100%; border:1px solid #e3e5ee; border-radius:12px; padding:11px; font-size:13px;
  resize:none; color:#1d2330; background:#f7f8fc; box-sizing:border-box; }
.tc-ta:focus { outline:none; border-color:#07c160; }
.tc-entry { background:linear-gradient(135deg,rgba(139,92,246,.1),rgba(255,95,158,.1)); }
.tc-banner { display:flex; align-items:center; margin:4px 12px 12px; padding:14px 15px;
  border-radius:16px; background:linear-gradient(135deg,#8b5cf6,#ff5f9e); color:#fff;
  box-shadow:0 10px 24px rgba(139,92,246,.32); }
.tc-banner-l { flex:1; min-width:0; }
.tc-banner-t { font-size:15px; font-weight:700; }
.tc-banner-d { font-size:11.5px; opacity:.9; margin-top:3px; }
.tc-banner .cell-arrow { border-color:#fff; }
html[data-theme="dark"] .tc-card { background:rgba(34,35,42,.7); border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .tc-h, html[data-theme="dark"] .tc-ta { color:#eef0f6; }
html[data-theme="dark"] .tc-ta { background:#2a2b33; border-color:#3a3b44; }

/* ===== 我·个人主页封面 ===== */
.me-header.has-cover { position:relative; overflow:hidden; isolation:isolate; border-radius:14px; }
.me-header.has-cover::before { content:""; position:absolute; inset:0; z-index:-1;
  background-image:var(--cover); background-size:cover; background-position:center;
  -webkit-filter:blur(var(--cover-blur,0)); filter:blur(var(--cover-blur,0));
  opacity:var(--cover-op,1); transform:scale(1.08); }
.me-header.has-cover::after { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.62)); }
html[data-theme="dark"] .me-header.has-cover::after { background:linear-gradient(180deg,rgba(20,20,26,.45),rgba(20,20,26,.66)); }
.me-morphid { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; letter-spacing:.2px; }

/* ===== 自定义气泡背景图 ===== */
.msg-row.me .bubble { background-image:var(--bubble-me-img,none); background-size:100% 100%; background-repeat:no-repeat; }
/* ===== 内置风格预设包 ===== */
.preset-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.preset-card { border-radius:14px; padding:10px 8px; text-align:center;
  background:rgba(255,255,255,.7); border:1px solid rgba(0,0,0,.05); }
.preset-card .pp-dot { width:34px; height:34px; border-radius:50%; margin:0 auto 6px;
  box-shadow:0 4px 10px rgba(0,0,0,.12); }
.preset-card .pp-name { font-size:11.5px; color:#333; }
.preset-card.on { outline:2px solid var(--accent,#07c160); }
html[data-theme="dark"] .preset-card { background:rgba(40,40,46,.7); }
html[data-theme="dark"] .preset-card .pp-name { color:#eee; }
.bub-img-row { display:flex; align-items:center; gap:8px; margin-top:8px; }

/* ===== 语音音色选择 ===== */
.voice-sel { display:flex; gap:8px; margin-top:8px; }
.voice-btn { flex:1; padding:10px 0; border-radius:12px; border:1.5px solid #e3e5ee;
  background:#f7f8fc; color:#444; font-size:13px; }
.voice-btn.on { border-color:var(--accent,#07c160); color:var(--accent,#07c160);
  background:rgba(7,193,96,.08); font-weight:600; }