/* 星空 v2.2.1 - 仿微信主题（深色/浅色由CSS变量控制） */
:root {
  --bg: #111111;          /* 页面背景 */
  --bg-list: #191919;     /* 列表/导航背景 */
  --bg-elev: #2c2c2c;     /* 输入框/气泡/卡片 */
  --bg-elev2: #333333;    /* 更亮一级 */
  --bg-soft: #1e1e1e;     /* 柔和底 */
  --bg-card: #222222;     /* 弹窗卡片 */
  --press: #222222;       /* 按下态 */
  --border: #232323;      /* 分割线 */
  --text: #d5d5d5;        /* 正文 */
  --text-strong: #e8e8e8; /* 标题 */
  --text2: #9a9a9a;       /* 次要 */
  --text3: #7a7a7a;       /* 辅助 */
  --text4: #5a5a5a;       /* 最弱 */
  /* 安全区：浏览器用 env；App 由 plus-bridge 按机型写入 */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
body.light {
  /* 仿微信浅色 */
  --bg: #ededed;
  --bg-list: #ffffff;
  --bg-elev: #ededed;
  --bg-elev2: #e2e2e2;
  --bg-soft: #ededed;
  --bg-card: #ffffff;
  --press: #ececec;
  --border: #e5e5e5;
  --text: #353535;
  --text-strong: #191919;
  --text2: #888888;
  --text3: #b2b2b2;
  --text4: #c8c8c8;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--text); font-size: 16px;
  user-select: none; -webkit-user-select: none;
  --fs-scale: 1;
  overflow-x: hidden;
}
input, select, button, textarea { font-family: inherit; font-size: inherit; outline: none; }
.hidden { display: none !important; }
img { -webkit-user-drag: none; }

/* ---------- 屏幕切换 ---------- */
.screen {
  position: fixed; inset: 0; background: var(--bg); display: none;
  flex-direction: column; overflow: hidden; z-index: 1;
}
.screen.active { display: flex; }
#screen-chat.active { z-index: 5; }

/* ---------- 启动页 ---------- */
#screen-splash.active { background: #07031a; z-index: 99; }
#screen-splash { background: #07031a; }
#screen-splash.splash-leaving,
#screen-splash.splash-leaving .splash-video {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.splash-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #07031a;
  border: 0;
  outline: none;
  z-index: 1;
  /* 禁止系统自带大播放键（视频结束时闪一下像坏了） */
  -webkit-appearance: none;
}
.splash-video::-webkit-media-controls { display: none !important; }
.splash-video::-webkit-media-controls-enclosure { display: none !important; }
.splash-video::-webkit-media-controls-panel { display: none !important; }
.splash-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.splash-video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; opacity: 0 !important; }
.splash-video::-webkit-media-controls-play-button { display: none !important; }
.splash-bottom {
  position: absolute; left: 0; right: 0; bottom: calc(48px + var(--sab));
  display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 2;
}
.splash-progress { width: 56%; height: 4px; background: rgba(255,255,255,.22); border-radius: 4px; overflow: hidden; }
#splash-bar { width: 0%; height: 100%; background: #fff; border-radius: 4px; transition: width .2s linear; }
.splash-version { color: rgba(255,255,255,.85); font-size: 13px; letter-spacing: 2px; }

/* ---------- 注册短信验证码 ---------- */
.sms-code-mask {
  position: fixed; inset: 0; z-index: 320;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.sms-code-card {
  width: 100%; max-width: 480px;
  background: var(--bg-list, #111);
  border-radius: 16px 16px 0 0;
  padding: 18px 0 calc(10px + var(--sab));
  position: relative;
  box-sizing: border-box;
}
body.light .sms-code-card { background: #f7f7f7; }
.sms-code-x {
  position: absolute; top: 10px; left: 12px;
  width: 36px; height: 36px; border: 0; background: transparent;
  color: var(--text3); font-size: 26px; line-height: 1; cursor: pointer;
}
.sms-code-title {
  text-align: center; font-size: 18px; font-weight: 600;
  color: var(--text-strong); margin-top: 6px;
}
.sms-code-hint {
  text-align: center; font-size: 13px; color: var(--text3);
  margin: 8px 24px 0; line-height: 1.45;
}
.sms-code-hint b { color: var(--text-strong); font-weight: 600; }
.sms-app-code {
  margin: 12px 24px 0;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 8px;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, Consolas, monospace;
}
.vanity-code-digits {
  margin: 16px 24px 8px;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 10px;
  color: #f5d78e;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, Consolas, monospace;
}
.vanity-code-note { text-align: center; font-size: 12px; margin-bottom: 12px; color: var(--text3); }
.sms-code-panel { width: 100%; max-width: 400px; margin: auto; background: var(--bg-list, #111); border-radius: 16px; padding: 20px 16px 16px; }
.sms-code-boxes { padding-top: 18px; }
.sms-code-boxes .pay-pin-box {
  width: 42px; height: 48px;
}
.sms-code-boxes .sms-digit {
  font-size: 22px; font-weight: 600; color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.sms-code-boxes .pay-pin-box.cur {
  border-color: #07c160;
  box-shadow: 0 0 0 1px rgba(7,193,96,.35);
}
.sms-code-err {
  text-align: center; color: #fa5151; font-size: 12px;
  margin: 8px 20px 0; line-height: 1.4; min-height: 18px;
}
.sms-resend {
  display: block; margin: 12px auto 6px;
  border: 0; background: transparent; color: #576b95;
  font-size: 14px; cursor: pointer; padding: 8px 12px;
}
.sms-resend.disabled {
  color: var(--text4); cursor: default; pointer-events: none;
}
.sms-code-pad { margin-top: 10px; }

/* ---------- 导航栏 ---------- */
.nav-bar {
  height: calc(48px + var(--sat)); padding-top: var(--sat);
  padding-left: max(2px, var(--sal, 0px));
  padding-right: max(8px, var(--sar, 0px));
  display: flex; align-items: center; background: var(--bg-list); flex-shrink: 0;
  border-bottom: 1px solid var(--border); position: relative;
  box-sizing: border-box;
}
.nav-bar.main { background: var(--bg); }
.nav-title {
  flex: 1; text-align: center; font-size: 17px; color: var(--text-strong); font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
img.nav-title-ico {
  width: 25px; height: 25px; object-fit: contain; display: block; flex-shrink: 0;
}
/* 星空标题星球：时常左右旋转（绕竖轴）；标题相对整栏绝对居中 */
#page-chats .nav-bar.main {
  position: relative;
  justify-content: space-between;
}
#chats-title {
  position: absolute;
  left: 50%;
  top: var(--sat);
  bottom: 0;
  /* 相对正中偏右（星空：15 - 2 = 13px） */
  transform: translateX(calc(-50% + 13px));
  flex: none;
  width: max-content;
  max-width: calc(100% - 148px);
  perspective: 240px;
  z-index: 1;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#page-chats .nav-bar.main .nav-side {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
#chats-title > * { pointer-events: auto; }
#chats-title .nav-title-ico,
#contacts-title .nav-title-ico {
  animation: chats-planet-lr 4.5s ease-in-out infinite;
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: visible;
}
#page-contacts .nav-bar.main {
  position: relative;
  justify-content: space-between;
}
#contacts-title {
  position: absolute;
  left: 50%;
  top: var(--sat);
  bottom: 0;
  transform: translateX(calc(-50% + 18px));
  flex: none;
  width: max-content;
  max-width: calc(100% - 148px);
  perspective: 240px;
  z-index: 1;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#page-contacts .nav-bar.main .nav-side {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
#contacts-title > * { pointer-events: auto; }
@keyframes chats-planet-lr {
  0% { transform: rotateY(0deg); }
  45% { transform: rotateY(360deg); }
  50% { transform: rotateY(360deg); }
  95% { transform: rotateY(0deg); }
  100% { transform: rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  #chats-title .nav-title-ico,
  #contacts-title .nav-title-ico { animation: none; }
}
img.nav-action-ico {
  width: 24px; height: 24px; object-fit: contain; display: block;
}
.search-fake {
  margin: 8px 12px;
  background: #fff;
  border-radius: 6px;
  padding: 9px 12px;
  min-height: 36px;
  text-align: center;
  color: var(--text3);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  border: none;
  box-shadow: none;
}
body:not(.light) .search-fake {
  background: #2c2c2c;
  color: #8a8a8a;
}
body.light .search-fake {
  background: #ffffff;
  color: #b2b2b2;
}
body.light #page-chats .chats-scroll,
body.light .contacts-scroll,
body.light #page-discover .tab-scroll,
body.light #page-me .tab-scroll {
  background: #ededed;
}
img.search-fake-ico {
  width: 16px; height: 16px; object-fit: contain; display: block; opacity: 0.55;
  flex-shrink: 0;
}

/* ---------- 下拉刷新（星空 logo 转动） ---------- */
.ptr-head {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: height .18s ease;
  pointer-events: none;
}
.ptr-head.armed, .ptr-head.refreshing { height: 56px; }
.ptr-logo {
  width: 28px; height: 28px;
  border-radius: 50%;
  margin-bottom: 10px;
  object-fit: cover;
  transform: rotate(0deg);
  will-change: transform;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.ptr-head.refreshing .ptr-logo {
  animation: ptr-spin .75s linear infinite;
}
@keyframes ptr-spin { to { transform: rotate(360deg); } }

.mo-ptr {
  position: absolute;
  left: 14px;
  top: calc(var(--sat) + 52px);
  width: 34px; height: 34px;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transform: scale(.55);
  transition: opacity .12s ease, transform .12s ease;
}
.mo-page .form-page-body { position: relative; }
.mo-ptr.show { opacity: 1; transform: scale(1); }
.mo-ptr img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
  will-change: transform;
}
.mo-ptr.refreshing img {
  animation: ptr-spin .75s linear infinite;
}

/* ---------- 全局搜索（仿微信） ---------- */
/* 浅色：灰底 + 白色搜索框（与首页 search-fake 同对比）；深色：深底 + 深灰框 */
.gs-page {
  background: #ededed !important;
}
body:not(.light) .gs-page {
  background: var(--bg) !important;
}
.gs-page > .nav-bar.gs-spacer {
  display: block !important;
  height: var(--sat, 36px);
  min-height: var(--sat, 36px);
  max-height: none;
  padding: 0 !important;
  border: 0 !important;
  background: inherit;
  flex-shrink: 0;
  box-sizing: border-box;
}
.gs-page > .form-page-body {
  padding-top: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: inherit;
}
.gs-top {
  padding: 10px 12px 12px;
  background: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 2;
  box-sizing: border-box;
}
.gs-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 36px;
  border-radius: 6px;
  padding: 9px 12px;
  background: #ffffff !important;
  box-shadow: none;
  border: none;
}
body:not(.light) .gs-input-wrap {
  background: #2c2c2c !important;
}
.gs-input-wrap img {
  width: 16px;
  height: 16px;
  opacity: .55;
  flex-shrink: 0;
}
.gs-input-wrap input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent !important;
  color: var(--text-strong);
  font-size: 15px;
  min-width: 0;
  line-height: 1.3;
}
.gs-input-wrap input::placeholder {
  color: #b2b2b2;
}
body:not(.light) .gs-input-wrap input::placeholder {
  color: #8a8a8a;
}
.gs-cancel {
  border: 0; background: transparent; color: #576b95;
  font-size: 16px; padding: 6px 2px; cursor: pointer; flex-shrink: 0;
}
.gs-body { padding-bottom: 24px; }
.gs-sec { margin-top: 8px; background: var(--bg-list); }
.gs-sec-title {
  padding: 10px 14px 4px; font-size: 13px; color: var(--text3);
}
.gs-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; cursor: pointer;
  border-top: 1px solid var(--border);
}
.gs-row:active { background: var(--bg-elev); }
.gs-row .avatar { width: 42px; height: 42px; border-radius: 6px; flex-shrink: 0; }
.gs-meta { flex: 1; min-width: 0; }
.gs-name {
  font-size: 16px; color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gs-sub {
  margin-top: 3px; font-size: 13px; color: var(--text3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gs-time { font-size: 12px; color: var(--text4); flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
.gs-more {
  padding: 12px 14px; color: #576b95; font-size: 14px; cursor: pointer;
  border-top: 1px solid var(--border);
}
.gs-net {
  margin-top: 10px; background: var(--bg-list); padding: 12px 14px;
}
.gs-net-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text3); margin-bottom: 8px;
}
.gs-net-head img { width: 20px; height: 20px; border-radius: 0; object-fit: contain; background: transparent; }
.gs-net-q {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 16px; color: var(--text-strong); cursor: pointer; padding: 6px 0;
}
.gs-net-q .arrow { color: var(--text4); }
.gs-hl { color: #07c160; }
.gs-empty { padding: 40px 16px; text-align: center; color: var(--text3); font-size: 14px; }

#chat-title {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  max-width: 100%; overflow: visible;
}
#chat-title.is-typing {
  font-size: 14px;
  font-weight: 400;
  color: var(--text2, #666);
  letter-spacing: .02em;
}
#chat-title .fl-verified { flex-shrink: 0; width: 16px; height: 16px; }
/* Telegram 官方认证印章 */
.fl-verified {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 4px; vertical-align: -2px;
  flex-shrink: 0; line-height: 0;
}
.fl-verified svg { width: 100%; height: 100%; display: block; }
.fl-prem-emoji {
  display: inline-block;
  width: 18px; height: 18px;
  object-fit: contain;
  vertical-align: -3px;
  margin-left: 4px;
  border-radius: 2px;
  flex-shrink: 0;
}
.ci-name .fl-prem-emoji { width: 16px; height: 16px; }
.msg-nick .fl-prem-emoji { width: 15px; height: 15px; }
.fl-prem-star {
  font-size: 16px;
  line-height: 18px;
  text-align: center;
}
.fl-prem-wiggle {
  animation: prem-badge-wiggle 1.1s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes prem-badge-wiggle {
  0%, 100% { transform: rotate(-10deg) translateY(0); }
  25% { transform: rotate(12deg) translateY(-1px); }
  50% { transform: rotate(-8deg) translateY(1px); }
  75% { transform: rotate(10deg) translateY(-1px); }
}
.me-prem-ico {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-right: 12px;
  animation: prem-badge-wiggle 1.1s ease-in-out infinite;
}
.premium-name {
  display: inline-block;
  font-weight: 600;
}
.premium-name-gold {
  background: linear-gradient(135deg, #fef08a 0%, #f59e0b 55%, #f97316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.premium-name-sky {
  background: linear-gradient(135deg, #a5f3fc 0%, #38bdf8 55%, #2563eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.premium-name-violet {
  background: linear-gradient(135deg, #ddd6fe 0%, #a78bfa 55%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.premium-name-rose {
  background: linear-gradient(135deg, #fecdd3 0%, #fb7185 55%, #e11d48 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.premium-name-rainbow {
  background: linear-gradient(90deg, #ff7a18 0%, #facc15 18%, #4ade80 38%, #38bdf8 58%, #818cf8 78%, #f472b6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 官方靓号：金香槟渐变，全员可见（与 Premium 默认色区分） */
.vanity-name {
  display: inline;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: linear-gradient(120deg, #fff8dc 0%, #f5d78e 28%, #e8b84a 52%, #ffd700 78%, #fff4c2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(245, 215, 142, 0.45));
}
body.light .vanity-name {
  background: linear-gradient(120deg, #8b6914 0%, #c9952a 35%, #d4af37 65%, #b8860b 100%);
  filter: none;
}
.mo-name .vanity-name,
.me-name .vanity-name,
.ci-name-text .vanity-name {
  font-weight: 700;
}
.prem-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 16px 16px;
}
.prem-theme-chip {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  padding: 12px 10px;
  text-align: center;
}
.prem-theme-chip.on {
  border-color: #31c4f3;
  box-shadow: 0 0 0 1px rgba(49,196,243,.25) inset;
}

.prem-emoji-mask { z-index: 300; }
.prem-emoji-sheet {
  width: min(92vw, 360px);
  max-height: 78vh;
  background: #1c1c1e;
  border-radius: 14px;
  padding: 14px 12px 16px;
  color: #f2f2f2;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
body.light .prem-emoji-sheet { background: #fff; color: #111; }
.prem-emoji-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.prem-emoji-title { font-size: 17px; font-weight: 600; }
.prem-emoji-x {
  border: 0; background: transparent; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.prem-emoji-tip { font-size: 12px; color: var(--text3, #888); margin-bottom: 10px; }
.prem-emoji-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  overflow: auto;
  max-height: 52vh;
  padding: 2px;
}
.prem-emoji-cell {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 8px 4px;
  cursor: pointer;
  color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
body.light .prem-emoji-cell { border-color: #e5e5e5; background: #f7f7f7; }
.prem-emoji-cell.on { outline: 2px solid #07c160; }
.prem-emoji-cell img { width: 40px; height: 40px; object-fit: contain; }
.prem-emoji-cell span { font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prem-emoji-clear {
  margin-top: 12px; width: 100%; border: 0; border-radius: 10px;
  padding: 11px; background: rgba(250,81,81,.15); color: #fa5151; font-size: 15px; cursor: pointer;
}
.cell-body-badge {
  display: inline-flex; align-items: center; gap: 6px;
}
img.fl-verified-img {
  width: 16px; height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  margin: 0;
  vertical-align: middle;
}
.fl-verified img.fl-verified-img { width: 100%; height: 100%; }
.nav-title.fl-cs-nav-title {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  max-width: 100%;
}
.nav-title.fl-cs-nav-title .fl-verified { width: 16px; height: 16px; margin-left: 0; }
/* 高于应用锁遮罩(200)，低于确认弹窗(260)，便于锁定页也能打开客服 */
.modal-page.fl-cs-page { z-index: 250; }
.modal-page.fl-cs-page .fl-cs-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--bg-list, #f5f5f5);
}
.modal-page.fl-cs-page .fl-cs-frame {
  flex: 1; width: 100%; border: 0; background: #fff;
}
.cell-body.fl-cs-entry {
  display: inline-flex; align-items: center; gap: 4px;
}
.ci-name .fl-verified { width: 15px; height: 15px; margin-left: 5px; flex-shrink: 0; }
.me-name .fl-verified { width: 18px; height: 18px; margin-left: 5px; vertical-align: -2px; }
.uc-name .fl-verified { width: 15px; height: 15px; margin-left: 4px; vertical-align: -2px; }
.fl-verified-tip {
  display: inline-block; margin-top: 4px; font-size: 12px; color: #2AABEE; font-weight: 500;
}
/* Telegram 风格机器人资料 */
.bot-profile-head {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 16px 18px; text-align: center;
}
.bot-profile-name {
  margin-top: 14px; font-size: 22px; font-weight: 600; color: var(--text-strong);
  display: inline-flex; align-items: center; justify-content: center;
}
.bot-profile-tag {
  margin-top: 6px; font-size: 13px; color: #2aabee;
}
.bot-owner-tip {
  margin-top: 8px; font-size: 12px; color: var(--text3);
  background: rgba(42, 171, 238, .12); padding: 4px 10px; border-radius: 12px;
}
.bot-info-list { padding-top: 4px; padding-bottom: 4px; }
.bot-info-block {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, rgba(127,127,127,.12));
}
.bot-info-block:last-child { border-bottom: 0; }
.bot-info-value {
  color: var(--text-strong); font-size: 16px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
}
.bot-info-value.bot-info-empty { color: var(--text4); }
.bot-info-value.bot-info-user { color: #2aabee; }
.bot-info-label {
  margin-top: 6px; font-size: 13px; color: var(--text3);
}
.switch.disabled { opacity: .45; pointer-events: none; }
/* 机器人命令联想（输入 / 时） */
.bot-cmd-suggest {
  background: var(--bg-list, var(--bg-elev));
  border-top: 1px solid rgba(127,127,127,.18);
  max-height: 220px; overflow-y: auto;
}
.bot-cmd-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px; cursor: pointer;
  border-bottom: 1px solid rgba(127,127,127,.1);
}
.bot-cmd-item:active { background: rgba(127,127,127,.12); }
.bot-cmd-item b { color: #2aabee; font-size: 15px; font-weight: 600; }
.bot-cmd-item span { color: var(--text3); font-size: 12px; }
.nav-back { width: 48px; flex-shrink: 0; text-align: center; font-size: 26px; color: var(--text); cursor: pointer; line-height: 48px; }
.nav-right {
  flex-shrink: 0;
  min-width: 44px;
  width: auto;
  padding: 0 14px 0 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  letter-spacing: 0;
  line-height: 48px;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#btn-chat-more {
  /* 三点略往里收，避免贴边或被挖孔/圆角裁切 */
  margin-right: 4px;
  padding-right: 14px;
  font-size: 0;
  line-height: 0;
}
#btn-chat-more .fl-ico,
#btn-chat-more i[data-icon],
.nav-right .fl-ico,
.nav-right i[data-icon="more"],
.nav-right i[data-icon="moreH"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text-strong);
}
#btn-chat-more svg,
.nav-right i[data-icon="more"] svg,
.nav-right i[data-icon="moreH"] svg {
  width: 22px;
  height: 22px;
  display: block;
}
.nav-side { width: 52px; }
.nav-side.right { display: flex; justify-content: center; }
.nav-side.left.nav-side-actions,
.nav-side.right.nav-side-actions {
  width: auto; min-width: 52px; display: flex; align-items: center; gap: 2px;
}
.nav-side.left.nav-side-actions { justify-content: flex-start; padding-left: 6px; }
.nav-side.right.nav-side-actions { justify-content: flex-end; padding-right: 6px; min-width: 72px; }
.nav-plus { font-size: 24px; color: var(--text-strong); cursor: pointer; width: 36px; height: 36px; line-height: 34px; text-align: center; }
.nav-ico {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  color: var(--text-strong); cursor: pointer; border-radius: 8px;
}
.nav-ico .fl-ico, .nav-ico i[data-icon] { display: flex; }
.nav-ico .nav-e2e-logo {
  width: 22px; height: 22px; object-fit: contain; display: block;
  border-radius: 50%;
}
.nav-ico.is-on { color: #07c160; }
.nav-ico#btn-app-quick-lock:active { opacity: .55; }

/* ---------- 登录 / 注册 / 切换账号 ---------- */
#screen-login, #screen-register, #screen-accounts { background: var(--bg); }
.auth-wrap { flex: 1; overflow-y: auto; padding: 32px 28px calc(30px + var(--sab)); display: flex; flex-direction: column; align-items: center; }
#screen-login .auth-wrap { padding-bottom: 16px; }
.auth-close { height: calc(20px + var(--sat)); }
.auth-logo {
  width: 84px; height: 84px; margin: 26px 0 8px;
  border-radius: 0; background: transparent;
  object-fit: contain; display: block;
}
.auth-title { color: var(--text-strong); font-size: 21px; font-weight: 600; margin: 18px 0 26px; }
.auth-avatar-ph { width: 64px; height: 64px; border-radius: 8px; background: var(--border); margin-bottom: 10px;
  background-image: radial-gradient(circle at 50% 38%, var(--text4) 12px, transparent 13px), radial-gradient(circle at 50% 88%, var(--text4) 20px, transparent 21px); }
.auth-form { width: 100%; max-width: 420px; }
.auth-row { display: flex; align-items: center; border-bottom: 1px solid var(--border); padding: 15px 2px; }
.auth-row label { width: 108px; color: var(--text); flex-shrink: 0; }
.auth-row input, .auth-row select { flex: 1; background: transparent; border: 0; color: var(--text-strong); }
.auth-row select option { background: var(--press); }
.auth-row input::placeholder { color: var(--text4); }
.auth-row input[readonly] { color: var(--text); letter-spacing: 0.04em; opacity: 0.92; }
.auth-tip { color: var(--text3); font-size: 13px; margin: 14px 0 30px; }
.auth-tip.center { text-align: center; margin: 10px 0 18px; }
.auth-err {
  color: #fa5151;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  margin: 0 0 12px;
  padding: 0 4px;
}
.auth-err.hidden { display: none; }
.auth-agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text3);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 22px;
  /* 避免部分 Android WebView 把文字拆成多个 flex 子项后乱换行 */
  flex-wrap: nowrap;
}
.auth-agree > input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  padding: 0;
}
.auth-agree-txt {
  flex: 1 1 auto;
  min-width: 0;
  display: inline;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.auth-agree a {
  color: #576b95;
  text-decoration: none;
  display: inline;
  white-space: nowrap;
}
.btn-primary {
  width: 100%; height: 48px; border: 0; border-radius: 8px; margin-top: 8px;
  background: #07c160; color: #fff; font-size: 17px; font-weight: 500;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.btn-primary:active { background: #06a552; }
.btn-primary:disabled { background: #0a5c33; color: #7aa98f; }
.auth-links { display: flex; justify-content: center; gap: 12px; margin-top: 24px; color: var(--text4); font-size: 14px; }
.auth-links a { color: #576b95; text-decoration: none; }
.auth-bottom {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 20px calc(18px + var(--sab));
  font-size: 14px;
  color: var(--text4);
}
.auth-bottom a { color: #576b95; text-decoration: none; }
.auth-bottom-sep { color: var(--text4); opacity: .7; user-select: none; }

.acc-top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: calc(12px + var(--sat)) 16px 8px; }
.acc-close { color: var(--text-strong); font-size: 16px; cursor: pointer; min-width: 48px; z-index: 1; }
.acc-brand {
  width: 32px; height: 32px; border-radius: 0;
  position: absolute; left: 50%; transform: translateX(-50%);
  object-fit: contain; background: transparent;
}
.acc-head { text-align: center; color: var(--text-strong); font-size: 17px; font-weight: 500; padding: 28px 16px 18px; border-bottom: 1px solid var(--border); margin: 0 0 18px; }
.acc-list { padding: 0 16px calc(24px + var(--sab)); display: flex; flex-direction: column; gap: 12px; overflow-y: auto; flex: 1; }
.acc-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--bg-list); border-radius: 12px; cursor: pointer; }
.acc-card:active { background: var(--press); }
.acc-card .avatar, .acc-card .acc-plus { width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0; }
.acc-plus { display: flex; align-items: center; justify-content: center; background: var(--bg-elev); color: var(--text2); font-size: 28px; border: 1px dashed var(--border); box-sizing: border-box; }
.acc-meta { flex: 1; min-width: 0; }
.acc-name { color: var(--text-strong); font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-id { color: var(--text3); font-size: 13px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-tag { color: #07c160; font-size: 13px; flex-shrink: 0; }
.acc-del { color: #fa5151; font-size: 13px; flex-shrink: 0; padding: 6px 4px; }

/* ---------- 主界面 ---------- */
#screen-main { background: var(--bg); }
.main-page { flex: 1; display: none; flex-direction: column; overflow: hidden; }
.main-page.active { display: flex; }
.main-page .list, .main-page > .scroll { overflow-y: auto; }
#page-chats .list { flex: none; overflow: visible; }
#page-chats .chats-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  overscroll-behavior-y: contain;
}
#page-contacts { overflow: hidden; }
#page-discover, #page-me { overflow: hidden; }
#page-discover .tab-scroll,
#page-me .tab-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  overscroll-behavior-y: contain;
}

/* 通讯录：滚动区 + 右侧字母索引 */
.contacts-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.contacts-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}
.contacts-scroll .search-fake { position: relative; z-index: 1; }
.contacts-index {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 2px 4px 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.contacts-index span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  min-height: 14px;
  font-size: 10px;
  line-height: 1;
  color: var(--text2);
  font-weight: 500;
}
.contacts-index span.search {
  font-size: 11px;
  margin-bottom: 1px;
  color: var(--text3);
}
.contacts-index span.on {
  color: #fff;
  background: #07c160;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  min-height: 16px;
  font-size: 9px;
}
.contacts-index-tip {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 20;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 36px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.contacts-index-tip.hidden { display: none; }
.contacts-count {
  text-align: center;
  color: var(--text3);
  font-size: 14px;
  padding: 18px 16px 28px;
  background: var(--bg);
}
.friend-list-wrap .list { background: var(--bg-list); }
.friend-list-wrap .contact-section {
  padding: 6px 16px;
  font-size: 13px;
  color: var(--text3);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 2;
}

.tabbar {
  height: calc(56px + var(--sab)); padding-bottom: var(--sab);
  background: var(--bg-list); border-top: 1px solid var(--border); display: flex; flex-shrink: 0;
}
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text3); cursor: pointer; position: relative; gap: 2px; }
.tab.active { color: #07c160; }
.tab-ico { line-height: 0; }
img.tab-logo {
  width: 28px; height: 28px;
  object-fit: contain;
  display: block;
  opacity: 0.72;
  filter: grayscale(0.15) saturate(0.9);
  transition: opacity .15s ease, filter .15s ease, transform .15s ease;
}
.tab.active img.tab-logo {
  opacity: 1;
  filter: none;
  transform: translateY(-0.5px);
}
.tab-badge { position: absolute; top: 4px; left: calc(50% + 8px); }

/* ---------- 列表/单元格 ---------- */
.list { background: var(--bg-list); }
.list.gap { margin-top: 10px; }
.cell { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; position: relative; }
.cell:active { background: var(--press); }
.cell-icon { width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 19px; margin-right: 14px; flex-shrink: 0; color: #fff; }
.cell-icon.flat { background: transparent !important; width: 28px; height: 28px; margin-right: 14px; }
/* 通讯录顶部入口：干净圆角方标 */
img.contact-ico {
  width: 30px; height: 30px;
  border-radius: 5px;
  object-fit: cover;
  margin-right: 12px;
  flex-shrink: 0;
  display: block;
  background: transparent;
  overflow: hidden;
}
/* 发现页入口图标（透明底彩色标） */
img.discover-ico {
  width: 28px; height: 28px;
  object-fit: contain;
  margin-right: 14px;
  flex-shrink: 0;
  display: block;
  background: transparent;
}
/* 「我」页入口图标 */
img.me-ico {
  width: 28px; height: 28px;
  object-fit: contain;
  margin-right: 14px;
  flex-shrink: 0;
  display: block;
  background: transparent;
}
.fl-ico { display: inline-flex; line-height: 0; }
.fl-ico svg { display: block; }
.cell-body { flex: 1; color: var(--text-strong); min-width: 0; }
.cell-note { color: var(--text3); font-size: 14px; margin-right: 6px; }
.cell-arrow { color: var(--text4); font-size: 20px; }
.contact-section { padding: 8px 16px 4px; color: var(--text3); font-size: 13px; background: var(--bg); }
.contacts-scroll .search-fake { position: relative; z-index: 1; }

/* 头像 */
.avatar { width: 46px; height: 46px; border-radius: 6px; background: var(--bg-elev2); object-fit: cover; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; overflow: hidden; }
img.avatar { content-visibility: auto; }
.avatar.sm { width: 38px; height: 38px; font-size: 15px; }
.avatar.lg { width: 60px; height: 60px; border-radius: 8px; font-size: 24px; }

/* 会话列表 */
.chat-item { display: flex; padding: 11px 14px; border-bottom: 1px solid var(--border); cursor: pointer; align-items: center; position: relative; }
.chat-item:active { background: var(--press); }
.chat-item .avatar { margin-right: 12px; }
.ci-main { flex: 1; min-width: 0; }
.ci-name { color: var(--text-strong); font-size: calc(16.5px * var(--fs-scale)); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }
.ci-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ci-last { color: var(--text3); font-size: calc(13.5px * var(--fs-scale)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: 8px; min-width: 36px; }
.ci-time { color: var(--text4); font-size: 12px; }
.ci-side-bot {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  min-height: 18px;
}
.ci-pin {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; flex-shrink: 0;
}
.ci-pin-img {
  width: 15px; height: 15px; display: block;
  background: url('../img/ui/pin-gray.png?v=pin2') center / contain no-repeat;
  pointer-events: none;
}
body:not(.light) .ci-pin-img {
  background-image: url('../img/ui/pin.png?v=pin2');
  opacity: .92;
}
.ci-pin.hidden { display: none !important; }
.ci-flags {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px;
  flex-shrink: 0; line-height: 0;
}
.ci-mute {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; flex-shrink: 0;
}
.ci-mute-img {
  width: 15px; height: 15px; display: block;
  background: url('../img/ui/mute-gray.png?v=mute1') center / contain no-repeat;
  pointer-events: none;
}
body:not(.light) .ci-mute-img {
  background-image: url('../img/ui/mute.png?v=mute1');
  opacity: .92;
}
.ci-mute.hidden { display: none !important; }
.ci-name.unread, .ci-last.unread { color: var(--text-strong); font-weight: 600; }
.ci-last.unread { color: var(--text2); }
.badge.ci-unread { flex-shrink: 0; }
.badge { background: #fa5151; color: #fff; font-size: 11px; min-width: 17px; height: 17px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 5px; font-weight: 500; }
.badge.dot { min-width: 10px; width: 10px; height: 10px; border-radius: 50%; padding: 0; font-size: 0; }
.tab-badge.dot { left: calc(50% + 10px); top: 5px; }
#mo-badge { margin-right: 6px; flex-shrink: 0; }
#mo-badge.dot { margin-right: 8px; }
#fw-badge { margin-right: 6px; flex-shrink: 0; }
#fw-badge.dot { margin-right: 8px; }

.empty-tip { text-align: center; color: var(--text4); padding: 80px 20px; line-height: 2; }

/* —— 帮助与反馈 —— */
.hf-hero {
  padding: 20px 18px 16px;
  background: var(--bg-list);
  margin-bottom: 10px;
}
.hf-hero-title {
  font-size: 20px; font-weight: 600; color: var(--text-strong); margin-bottom: 8px;
}
.hf-hero-desc {
  font-size: 13.5px; color: var(--text3); line-height: 1.55;
}
.hf-foot {
  text-align: center; color: var(--text4); font-size: 12px;
  padding: 24px 16px 40px;
}
.hf-qa {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg-list); cursor: pointer;
}
.hf-qa:active { background: var(--press); }
.hf-q {
  color: var(--text-strong); font-size: 15.5px; font-weight: 500; line-height: 1.4;
}
.hf-a {
  margin-top: 10px; color: var(--text2); font-size: 14px; line-height: 1.65;
  padding: 10px 12px; background: var(--bg); border-radius: 8px;
}
.hf-form-tip {
  padding: 12px 16px; color: var(--text3); font-size: 13px; line-height: 1.5;
  background: var(--bg);
}
.hf-types {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 16px 8px; background: var(--bg-list);
}
.hf-type {
  border: 1px solid var(--border); background: var(--bg-elev);
  color: var(--text2); font-size: 13px; padding: 7px 12px;
  border-radius: 16px; cursor: pointer;
}
.hf-type.on {
  border-color: #07c160; color: #07c160; background: rgba(7,193,96,.08);
}
.hf-textarea {
  min-height: 140px; background: var(--bg-list) !important;
}
.hf-mine-item {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg-list);
}
.hf-mine-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.hf-mine-type { color: var(--text-strong); font-size: 14px; font-weight: 500; }
.hf-mine-st {
  font-size: 12px; color: #eda20c; background: rgba(237,162,12,.12);
  padding: 2px 8px; border-radius: 10px;
}
.hf-mine-st.done {
  color: #07c160; background: rgba(7,193,96,.12);
}
.hf-mine-body {
  color: var(--text); font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.hf-mine-reply {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  background: var(--bg); color: var(--text2); font-size: 13.5px; line-height: 1.5;
}
.hf-mine-time { margin-top: 8px; color: var(--text4); font-size: 12px; }

/* 我 页面 */
.me-head { display: flex; align-items: center; gap: 16px; padding: calc(36px + var(--sat)) 20px 28px; background: var(--bg-list); cursor: pointer; }
.me-info { flex: 1; }
.me-name { color: var(--text-strong); font-size: 21px; font-weight: 600; margin-bottom: 8px; }
.me-id { color: var(--text3); font-size: 14px; -webkit-user-select: none; user-select: none; }
#me-id-row { cursor: pointer; }

/* ---------- 聊天窗口 ---------- */
#screen-chat { background: var(--bg); }
.chat-body { flex: 1; overflow-y: auto; padding: 12px 12px 6px; }
.chat-body.has-chat-bg {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: local;
}
.chat-bg-preview-wrap { padding: 24px 16px 32px; }
.chat-bg-preview {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 62vh;
  border-radius: 12px;
  background: var(--bg-elev) center/cover no-repeat;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
}
.chat-bg-tip {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text3);
  line-height: 1.5;
}
.chat-bg-use-btn {
  display: block; width: 100%; margin-top: 18px;
  height: 44px; border: 0; border-radius: 8px;
  background: #07c160; color: #fff; font-size: 16px; font-weight: 500;
}
.chat-bg-use-btn:active { opacity: .88; }
.chat-bg-clear-btn {
  display: block; width: 100%; margin-top: 10px;
  height: 44px; border: 0; border-radius: 8px;
  background: var(--bg-list); color: #fa5151; font-size: 15px;
  border: 1px solid var(--border);
}
.chat-bg-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 16px;
}
.chat-bg-preset {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 0; border-radius: 10px;
  background-size: cover; background-position: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  overflow: hidden; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chat-bg-preset span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,.45));
  color: #fff; font-size: 12px; text-align: center;
}
.chat-bg-preset:active { transform: scale(.98); }
.chat-pin-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: var(--bg-list);
  border-bottom: 1px solid var(--border);
  cursor: pointer; flex-shrink: 0;
}
.chat-pin-bar.hidden { display: none !important; }
.chat-pin-ico { font-size: 14px; flex-shrink: 0; }
.chat-pin-main { flex: 1; min-width: 0; }
.chat-pin-lab { font-size: 12px; color: #07c160; font-weight: 500; }
.chat-pin-text {
  font-size: 13px; color: var(--text2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-pin-close {
  flex-shrink: 0; border: none; background: none; color: var(--text3);
  font-size: 18px; padding: 4px 2px; cursor: pointer; line-height: 1;
}
.chat-pin-close:active { color: var(--text-strong); }
.chat-pin-close.hidden { display: none; }
.msg-time { text-align: center; color: var(--text4); font-size: 12px; margin: 12px 0 8px; }
.msg-sys {
  text-align: center;
  color: var(--text3);
  font-size: 14px;
  font-weight: 400;
  margin: 10px auto;
  max-width: calc(100% - 56px);
  padding: 6px 12px !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 8px;
  box-shadow: none !important;
  line-height: 1.45;
  text-shadow: none !important;
  display: table;
}
.msg-sys-plain {
  display: block;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0;
  font-size: 12px;
  margin: 8px auto;
  max-width: none;
}
.msg-sys-rp {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  color: #888; font-size: 12px; font-weight: 400; line-height: 1.35;
  margin: 8px auto;
  max-width: calc(100% - 40px);
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
  text-shadow: none;
}
.msg-sys-rp-txt { color: #888; font-weight: 400; }
.msg-sys-rp-link {
  color: #c8784a !important; text-decoration: none;
  cursor: pointer;
}
.msg-sys-rp-link:active { opacity: .75; }
.msg-sys-rp-ico {
  display: inline-block; width: 14px; height: 14px; border-radius: 2px; flex-shrink: 0;
  background:
    radial-gradient(circle at 50% 58%, #f6d27a 0 28%, transparent 29%),
    linear-gradient(180deg, #e85a45 0%, #c93828 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.msg-sys-gift {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  color: #111; font-size: 14px; font-weight: 700; line-height: 1.35;
  margin: 8px auto; cursor: pointer;
  max-width: calc(100% - 40px);
  padding: 6px 12px !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 8px;
  box-shadow: none !important;
  text-shadow: none;
}
.msg-sys-gift-txt { color: #111; font-weight: 700; }
.msg-sys-gift-ico {
  display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
  background:
    radial-gradient(circle at 50% 42%, #ffd76a 0 22%, transparent 23%),
    linear-gradient(145deg, #ff8f6b 0%, #ff4d6d 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}
.msg-sys-whisper {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  color: #111; font-size: 14px; font-weight: 700; line-height: 1.35;
  margin: 8px auto;
  max-width: calc(100% - 40px);
  padding: 6px 12px !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 8px;
  box-shadow: none !important;
  text-shadow: none;
}
.msg-sys-whisper.is-tap { cursor: pointer; }
.msg-sys-whisper-txt { color: #111; font-weight: 700; }
.msg-sys-whisper-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
  color: #ffe08a;
  background: linear-gradient(145deg, #ff8f6b 0%, #ff4d6d 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}
.msg-sys-whisper-ico svg { width: 9px; height: 9px; display: block; }
.msg-sys-fv {
  display: block;
  max-width: calc(100% - 40px);
  margin: 10px auto;
  padding: 8px 12px !important;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text3);
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 8px;
  text-align: center;
}
.msg-sys-fv-link {
  color: #576b95;
  text-decoration: none;
  margin-left: 2px;
}
.msg-sys-fv-link:active { opacity: .75; }
.msg-fail-icon {
  flex-shrink: 0;
  align-self: center;
  width: 22px;
  height: 22px;
  margin: 0 6px;
  border-radius: 50%;
  background: #fa5151;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}
body.light .msg-sys-fv {
  color: #888;
  background: rgba(0, 0, 0, .04) !important;
  border: 1px solid rgba(0, 0, 0, .08) !important;
}
body.light .msg-sys-fv-link { color: #576b95; }
body.light .msg-sys-gift, body.light .msg-sys-gift-txt { color: #111; }
body.light .msg-sys-whisper, body.light .msg-sys-whisper-txt { color: #111; }
body.light .msg-sys-rp, body.light .msg-sys-rp-txt { color: #b2b2b2; }
body.light .msg-sys-rp-link { color: #c8784a !important; }
.msg-row { display: flex; margin-bottom: 14px; align-items: flex-start; }
.msg-row > .avatar,
.msg-row > .msg-avatar,
.msg-row > .msg-av-hit { flex-shrink: 0; }
/* 消息多选（微信模版：浅色底栏 + 点整条消息勾选） */
#screen-chat.msg-select-mode .chat-input-bar { display: none !important; }
#screen-chat.msg-select-mode #chat-compose-full { display: none !important; }
#screen-chat.msg-select-mode .msg-row {
  cursor: pointer; position: relative; padding-left: 40px;
}
#screen-chat.msg-select-mode .msg-row .msg-avatar,
#screen-chat.msg-select-mode .msg-row .msg-content,
#screen-chat.msg-select-mode .msg-row .bubble,
#screen-chat.msg-select-mode .msg-row .msg-quote,
#screen-chat.msg-select-mode .msg-row .bot-ikb {
  pointer-events: none;
}
.msg-sel-ck {
  position: absolute; left: 10px; top: 12px;
  width: 24px; height: 24px; flex-shrink: 0;
  display: none; align-items: center; justify-content: center; z-index: 2;
  pointer-events: none;
}
#screen-chat.msg-select-mode .msg-sel-ck { display: flex; }
.msg-sel-ring {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid #c6c6c6; box-sizing: border-box; display: block;
  background: var(--bg-list, #fff);
}
body.light .msg-sel-ring { border-color: #bbb; background: #fff; }
.msg-row.msg-sel-on .msg-sel-ring {
  border-color: #07c160; background: #07c160; position: relative;
}
.msg-row.msg-sel-on .msg-sel-ring::after {
  content: ''; position: absolute; left: 6px; top: 3px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.msg-sel-bar {
  display: flex; align-items: stretch; justify-content: space-around;
  background: var(--bg-list);
  color: var(--text-strong);
  border-top: 1px solid var(--border);
  padding: 10px 6px calc(10px + var(--sab, 0px)); flex-shrink: 0;
}
.msg-sel-bar.hidden { display: none !important; }
.msg-sel-act {
  flex: 1; border: 0; background: transparent; color: var(--text-strong);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 4px 2px; font-size: 11px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.msg-sel-act.off, .msg-sel-act:disabled { opacity: .35; pointer-events: none; }
.msg-sel-act svg { display: block; opacity: .88; color: var(--text-strong); stroke: currentColor; }
.msg-sel-act span { color: var(--text2); font-size: 11px; }
.nav-back.msg-sel-cancel {
  font-size: 16px; font-weight: 500; padding: 0 8px; width: auto;
  color: var(--text-strong);
}
.msg-sel-tohere {
  position: fixed; z-index: 80;
  background: #fff; color: #576b95; border: 0;
  border-radius: 16px; padding: 7px 12px; font-size: 13px; font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,.18); cursor: pointer;
  white-space: nowrap;
}
.msg-sel-tohere.hidden { display: none !important; }
.msg-trans {
  margin-top: 6px; padding: 8px 10px; border-radius: 6px;
  background: rgba(0,0,0,.06); color: var(--text2); font-size: 13.5px; line-height: 1.45;
  position: relative;
}
.msg-row.me .msg-trans { background: rgba(0,0,0,.08); color: #333; }
.msg-trans-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 4px; font-size: 11.5px; color: var(--text4); line-height: 1.2;
}
.msg-row.me .msg-trans-hd { color: rgba(0,0,0,.45); }
.msg-trans-lang {
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-trans-x {
  flex-shrink: 0; width: 22px; height: 22px; border: 0; border-radius: 11px;
  background: rgba(0,0,0,.08); color: inherit; font-size: 16px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.msg-trans-x:active { opacity: .7; }
.msg-trans-body { word-break: break-word; }
.msg-trans-pick {
  cursor: pointer; color: #576b95; font-size: 13px;
}
.msg-row.me .msg-trans-pick { color: #1a6b3c; }
.msg-remind-mask {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.msg-remind-card {
  width: min(360px, 100%); background: var(--bg-card); border-radius: 14px;
  padding: 22px 18px 16px; text-align: center; color: var(--text-strong);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.msg-remind-card .tit { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.msg-remind-card .body { font-size: 14px; color: var(--text2); line-height: 1.5; max-height: 40vh; overflow: auto; word-break: break-word; }
.msg-remind-card .acts { display: flex; gap: 10px; margin-top: 16px; }
.msg-remind-card .acts button {
  flex: 1; height: 40px; border: 0; border-radius: 8px; font-size: 15px; cursor: pointer;
}
.msg-remind-card .acts .ok { background: #07c160; color: #fff; }
.msg-remind-card .acts .go { background: var(--bg-elev); color: var(--text-strong); }
.msg-row.msg-flash .bubble {
  animation: flMsgFlash .9s ease;
}
@keyframes flMsgFlash {
  0%, 100% { box-shadow: none; }
  40% { box-shadow: 0 0 0 3px rgba(7,193,96,.55); }
}
/* 我的消息在右，对方在左（仿微信） */
.msg-row.me { flex-direction: row-reverse; }
.msg-row:not(.me) { flex-direction: row; }
.msg-row .avatar { width: 40px; height: 40px; font-size: 15px; }
.msg-row .msg-avatar {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
.msg-row .msg-av-hit {
  display: block;
  flex-shrink: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.msg-row .msg-avatar:active,
.msg-row .msg-av-hit:active { opacity: .75; }
.msg-row .msg-av-hit .msg-avatar,
.msg-row .msg-av-hit img,
.msg-row .msg-avatar img { pointer-events: none; }
.msg-quote {
  margin-top: 6px; padding: 6px 10px; border-radius: 6px; background: rgba(0,0,0,.18);
  color: var(--text3); font-size: 12.5px; line-height: 1.35; max-width: 100%; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-row.me .msg-quote { background: rgba(0,0,0,.12); color: #3a5a30; }
.msg-quote .mq-name { color: inherit; opacity: .85; }
.bubble.deleted { color: #888 !important; font-style: italic; background: var(--bg-elev) !important; }

/* 引用回复条 */
.reply-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--bg-list); border-top: 1px solid var(--border); flex-shrink: 0;
}
.reply-bar.hidden { display: none; }
.reply-bar-main { flex: 1; min-width: 0; border-left: 3px solid #07c160; padding-left: 10px; }
.reply-bar-title { font-size: 12.5px; color: #07c160; margin-bottom: 2px; }
.reply-bar-text { font-size: 13px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-bar-close {
  width: 26px; height: 26px; border-radius: 50%; background: var(--bg-elev); color: var(--text3);
  display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; flex-shrink: 0;
}
/* 预留头像+间距，避免红包/转账固定宽在小屏上顶进头像 */
.msg-content {
  max-width: min(66%, calc(100% - 52px));
  min-width: 0;
  margin: 0 10px;
  box-sizing: border-box;
}
.msg-nick { color: var(--text3); font-size: 12px; margin-bottom: 3px; }
.msg-row.me .msg-nick { display: none; }
.bubble {
  background: #ffffff; color: #121212; padding: 10px 12px; border-radius: 6px;
  font-size: calc(16px * var(--fs-scale)); line-height: 1.45; word-break: break-word; position: relative;
  white-space: pre-wrap;
  /* 禁止系统长按选中文字/表情浮层，才能弹出「引用/撤回」菜单 */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-user-drag: none; touch-action: manipulation;
}
.msg-row.me .bubble { background: #95ec69; color: #121212; }
.msg-edited {
  display: block; margin-top: 4px; font-size: 11px; opacity: .55; font-weight: 400;
}
.msg-row.me .msg-edited { color: #2a5a1a; opacity: .7; }
/* 机器人内联按钮（仿 Telegram InlineKeyboard） */
.bot-ikb {
  margin-top: 5px; display: flex; flex-direction: column; gap: 4px;
  width: 100%; min-width: 168px; max-width: 100%;
}
.bot-ikb-row { display: flex; gap: 4px; width: 100%; }
.bot-ikb-btn {
  flex: 1; min-width: 0;
  background: var(--bg-list, var(--bg-elev));
  color: #4e8cff;
  border: 1px solid rgba(127, 127, 127, .22);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: calc(14px * var(--fs-scale));
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  word-break: break-word;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.bot-ikb-btn:active { opacity: .75; transform: scale(.98); }
.bot-ikb-btn.url::after {
  content: ' ↗';
  font-size: .85em;
  opacity: .65;
}
.bot-ikb-btn[disabled] { opacity: .45; pointer-events: none; }
.bubble .bot-caption {
  margin-top: 8px; padding: 0 2px;
  font-size: calc(15px * var(--fs-scale)); line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
}
.bubble.img.has-caption { padding: 0; background: transparent !important; }
.bubble.img.has-caption img { border-radius: 6px; }
.bubble.img.has-caption .bot-caption {
  margin-top: 4px; padding: 8px 10px; border-radius: 6px; background: var(--bg-elev);
}
.msg-row.me .bubble.img.has-caption .bot-caption { background: #95ec69; color: #121212; }
.bubble.img { padding: 0; background: transparent !important; }
.msg-row.me .bubble.img,
.msg-row:not(.me) .bubble.img { background: transparent !important; padding: 0; }
.bubble.img img {
  max-width: min(200px, 48vw);
  max-height: 220px;
  width: auto;
  height: auto;
  border-radius: 6px;
  display: block;
  object-fit: contain;
}
.bubble.img.gif-stk img {
  /* 避免部分 WebView 因 transform/contain 卡住 GIF 动画 */
  image-rendering: auto;
  -webkit-user-drag: none;
}
.sticker-grid .stk-cell img {
  image-rendering: auto;
}
.bubble.voice {
  display: flex; align-items: center; gap: 8px; min-width: 72px; max-width: 220px;
  cursor: pointer; padding: 10px 14px; box-sizing: border-box;
}
.bubble.voice .v-dur { font-size: 15px; font-variant-numeric: tabular-nums; flex-shrink: 0; line-height: 1; }
.bubble.voice .v-wave {
  width: 22px; height: 22px; flex-shrink: 0; display: block; color: inherit;
}
/* 自己在右：声纹朝左；对方在左：声纹朝右（朝向聊天中心，仿微信） */
.msg-row.me .bubble.voice .v-wave { transform: scaleX(-1); }
.msg-row:not(.me) .bubble.voice { flex-direction: row-reverse; }
.bubble.voice .v-wave path {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: .95;
}
.bubble.voice.playing .v-wave path:nth-child(1) { animation: vwave 1s ease-in-out infinite; }
.bubble.voice.playing .v-wave path:nth-child(2) { animation: vwave 1s ease-in-out .15s infinite; }
.bubble.voice.playing .v-wave path:nth-child(3) { animation: vwave 1s ease-in-out .3s infinite; }
@keyframes vwave {
  0%, 100% { opacity: .25; }
  40% { opacity: 1; }
}
.bubble.video {
  padding: 0;
  overflow: hidden;
  width: 152px;
  height: 202px;
  max-width: min(200px, 48vw);
  max-height: 280px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  background: #000 !important;
  color: #fff;
  flex-shrink: 0;
}
.msg-row.me .bubble.video { background: #000 !important; color: #fff; }
.bubble.video video,
.bubble.video .video-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
  border: 0;
  background: #000;
}
.bubble.video .video-mask {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.42);
  color: #fff; font-size: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.bubble.video .video-mask::before {
  content: ''; width: 0; height: 0; border-style: solid;
  border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff;
  margin-left: 2px;
}
.bubble.video .video-dur {
  position: absolute; right: 6px; bottom: 5px; color: #fff;
  font-size: 11px; line-height: 1; padding: 0;
  background: none; text-shadow: 0 1px 2px rgba(0,0,0,.65);
  pointer-events: none;
}

/* 红包 / 转账气泡 —— 恢复微信 260 视觉；仅当内容区不够宽时用 max-width:100% 防顶进头像 */
.bubble.rp,
.bubble.tf {
  background: #fa9d3b !important;
  color: #fff !important;
  padding: 0;
  width: 260px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  cursor: pointer;
  overflow: visible;
  border-radius: 4px;
  box-shadow: none;
  white-space: normal;
}
.msg-row.me .bubble.rp,
.msg-row.me .bubble.tf {
  background: #fa9d3b !important;
  color: #fff !important;
}
/* 已领取 / 已收款：微信浅杏灰态（图2） */
.bubble.rp.opened,
.msg-row.me .bubble.rp.opened,
.bubble.tf.opened,
.msg-row.me .bubble.tf.opened {
  background: #d0b392 !important;
  color: rgba(255, 255, 255, .96) !important;
}
.bubble.rp.opened .wx-rp-svg rect { fill: #b88978; }
.bubble.rp.opened .wx-rp-svg path { stroke: #a07466; }
.bubble.rp.opened .wx-rp-svg circle { fill: #dcc9a8; }

/* 气泡小三角（微信） */
.bubble.rp::after,
.bubble.tf::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 0; height: 0;
  border: 6px solid transparent;
}
.msg-row.me .bubble.rp::after,
.msg-row.me .bubble.tf::after {
  right: -6px;
  border-left-color: #fa9d3b;
  border-right-width: 0;
}
.msg-row:not(.me) .bubble.rp::after,
.msg-row:not(.me) .bubble.tf::after {
  left: -6px;
  border-right-color: #fa9d3b;
  border-left-width: 0;
}
.msg-row.me .bubble.rp.opened::after,
.msg-row.me .bubble.tf.opened::after { border-left-color: #d0b392; }
.msg-row:not(.me) .bubble.rp.opened::after,
.msg-row:not(.me) .bubble.tf.opened::after { border-right-color: #d0b392; }

.rp-body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 10px;
  min-height: 52px;
  box-sizing: border-box;
}
.rp-ico {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  line-height: 0;
}
.rp-ico .wx-rp-svg,
.rp-ico .wx-tf-svg { width: 34px; height: 34px; display: block; }
.rp-ico .wx-pay-ico {
  width: 34px; height: 34px; object-fit: contain; display: block;
  pointer-events: none; user-select: none;
}
.bubble.rp.opened .wx-pay-ico {
  filter: saturate(0.55) brightness(0.96) contrast(0.94);
  opacity: .92;
}
.rp-texts { flex: 1; min-width: 0; }
.rp-note {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.32;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bubble.tf .rp-note { font-size: 16px; font-weight: 600; letter-spacing: .2px; }
.rp-state {
  font-size: 11px;
  margin-top: 3px;
  color: rgba(255, 255, 255, .82);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-foot {
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 11px;
  line-height: 1;
  padding: 5px 12px 7px;
  color: rgba(255, 255, 255, .88);
  background: transparent;
}
.bubble.rp.opened .rp-foot,
.bubble.tf.opened .rp-foot {
  border-top-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .82);
}

/* 兼容旧结构类名 */
.rp-top { display: flex; align-items: center; gap: 10px; padding: 12px; }

/* 输入栏 */
.chat-input-bar {
  display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(8px + var(--sab));
  background: var(--bg-list); border-top: 1px solid var(--border); flex-shrink: 0;
}
.chat-muteall-tip {
  flex-shrink: 0; text-align: center; font-size: 13px; color: var(--text3);
  background: var(--bg-list); border-top: 1px solid var(--border);
  padding: 12px 16px calc(12px + var(--sab));
}
.chat-muteall-tip.hidden { display: none !important; }
#screen-chat.group-mute-all .chat-input-bar { display: none !important; }
#screen-chat.group-mute-all #chat-panel,
#screen-chat.group-mute-all #emoji-panel { display: none !important; }
.ci-btn {
  font-size: 24px; color: var(--text); cursor: pointer; width: 34px; text-align: center;
  flex-shrink: 0; height: 36px; display: inline-flex; align-items: center; justify-content: center;
}
.ci-input-wrap {
  flex: 1; min-width: 0; position: relative;
  display: flex; align-items: stretch;
  background: var(--bg-elev); border-radius: 6px;
}
#chat-input {
  flex: 1; width: 100%; min-width: 0;
  background: transparent; border: 0; border-radius: 6px;
  padding: 9px 12px; color: var(--text-strong);
  font: inherit; font-size: 16px; line-height: 1.35;
  resize: none; overflow-y: hidden;
  max-height: calc(1.35em * 11 + 18px);
  box-sizing: border-box;
  outline: none;
  -webkit-user-select: text; user-select: text;
}
#chat-input.ci-has-expand { padding-left: 34px; }
.ci-expand {
  position: absolute; left: 4px; top: 6px; z-index: 2;
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.06); color: var(--text2);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ci-expand.hidden { display: none !important; }
.ci-expand:active { background: rgba(0,0,0,.12); }
body.light .ci-expand { background: rgba(0,0,0,.05); }
#btn-send {
  background: #07c160; color: #fff; border: 0; border-radius: 6px;
  padding: 8px 14px; cursor: pointer; flex-shrink: 0; height: 36px;
  align-self: flex-end;
}
.ci-whisper-x {
  width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: #fa9d3b; color: #fff; font-size: 20px; line-height: 1;
  cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; align-self: flex-end; margin-bottom: 2px;
}
.ci-whisper-x.hidden { display: none !important; }
#screen-chat.whisper-mode #btn-chat-plus { display: none !important; }
#screen-chat.whisper-mode #btn-whisper-plus { display: flex !important; }
#btn-whisper-plus { display: none; }
#screen-chat.whisper-mode #chat-input,
#screen-chat.whisper-mode .ci-input-wrap { box-shadow: inset 0 0 0 1px rgba(250,157,59,.5); }

/* 全屏/大半屏长文编辑（仿微信） */
.chat-compose-full {
  position: absolute; inset: 0; z-index: 40;
  display: flex; flex-direction: column;
  background: var(--bg-list, #fff);
  padding-top: var(--sat, 0px);
}
.chat-compose-full.hidden { display: none !important; }
.ccf-head {
  flex-shrink: 0; height: 44px; display: flex; align-items: center;
  padding: 0 8px; border-bottom: 1px solid var(--border);
}
.ccf-collapse {
  width: 44px; height: 44px; border: 0; background: none;
  color: var(--text); font-size: 22px; line-height: 1; cursor: pointer;
}
.ccf-text {
  flex: 1; width: 100%; border: 0; resize: none; outline: none;
  padding: 14px 16px; font: inherit; font-size: 17px; line-height: 1.45;
  color: var(--text-strong); background: transparent;
  box-sizing: border-box; -webkit-user-select: text; user-select: text;
}
.ccf-tools {
  flex-shrink: 0; display: flex; justify-content: flex-end; gap: 10px;
  padding: 8px 14px calc(8px + var(--sab));
  border-top: 1px solid var(--border);
  background: var(--bg-list);
}
.ccf-tool {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-elev); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.bubble.whisper {
  position: relative;
  min-width: 120px;
  padding-right: 18px;
}
.bubble.whisper .wh-lock {
  position: absolute;
  left: auto;
  right: -3px;
  top: auto;
  bottom: -5px;
  z-index: 2;
  width: 15px;
  height: 15px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  color: #c9a017;
  pointer-events: none;
  transform: none;
}
.bubble.whisper .wh-lock svg {
  width: 13px;
  height: 13px;
  display: block;
}
/* 自己发的也在后面角（右下，靠头像一侧） */
.msg-row.me .bubble.whisper .wh-lock {
  left: auto;
  right: -3px;
  bottom: -5px;
  top: auto;
}
.bubble.whisper .wh-main { display: block; }
.bubble.whisper .wh-status { margin-top: 4px; font-size: 11px; opacity: .75; }
.bubble.whisper.sealed-peer {
  background: #4a4a4a !important; color: #fff !important; cursor: pointer;
}
.bubble.whisper.burned { opacity: .85; }
.whisper-view-mask {
  position: fixed; inset: 0; z-index: 320;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.whisper-view-card {
  width: min(92vw, 360px); background: #fff; color: #111;
  border-radius: 14px; padding: 22px 18px 16px; text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.whisper-view-card .lab { font-size: 13px; color: #888; margin-bottom: 10px; }
.whisper-view-card .txt {
  font-size: 17px; line-height: 1.55; word-break: break-word;
  min-height: 48px; margin-bottom: 16px;
}
.bubble.whisper .wh-media { display: flex; flex-direction: column; gap: 6px; }
.bubble.whisper .wh-thumb {
  width: 96px; height: 96px; object-fit: cover; border-radius: 6px;
  display: block; background: #111;
}
.bubble.whisper .wh-thumb-ph {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; background: #333;
}
.whisper-view-media {
  width: 100%; max-height: 55vh; object-fit: contain;
  border-radius: 8px; background: #111; margin-bottom: 14px;
  display: block;
}
.whisper-view-voice {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 6px 0 12px;
}
.whisper-view-audio { width: 100%; max-width: 280px; }
.whisper-view-voice-dur { font-size: 13px; color: #888; }
.whisper-view-card button {
  width: 100%; border: 0; border-radius: 8px; padding: 12px;
  background: #07c160; color: #fff; font-size: 16px; cursor: pointer;
}
.ci-input-wrap.hidden { display: none !important; }
#btn-voice-hold { flex: 1; background: var(--bg-elev); color: var(--text); border: 0; border-radius: 6px; padding: 9px; touch-action: none; user-select: none; -webkit-user-select: none; height: 36px; align-self: flex-end; }
#btn-voice-hold.recording { background: #07c160; color: #fff; }

/* 加号面板（与微信一致：两页宫格 + 圆点翻页） */
.chat-panel { background: var(--bg-list); flex-shrink: 0; padding-bottom: var(--sab); }
.cp-pages { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cp-page { min-width: 100%; scroll-snap-align: start; display: grid; grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(2, auto); gap: 20px 8px; padding: 22px 14px 10px; }
.cp-item { display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--text2); font-size: 12px; cursor: pointer; }
.cp-ico { width: 60px; height: 60px; background: var(--bg-elev); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--text2); }
.cp-ico-img { width: 28px; height: 28px; object-fit: contain; display: block; pointer-events: none; }
.cp-item:active .cp-ico { background: var(--bg-elev2); }
.cp-dots { display: flex; justify-content: center; gap: 7px; padding: 6px 0 12px; }
.cp-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--bg-elev2); transition: background .2s; }
.cp-dots span.on { background: var(--text3); }

/* 表情面板 */
.emoji-panel { background: #f7f7f7; flex-shrink: 0; padding-bottom: var(--sab); display: flex; flex-direction: column; position: relative; }
body:not(.light) .emoji-panel { background: var(--bg-list); }
.emoji-body { position: relative; height: 248px; }
.emoji-grid { height: 100%; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); padding: 10px 6px 56px; align-content: start; gap: 2px 0; }
.emoji-grid .em-cell,
.emoji-grid span.em-cell {
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; text-align: center; padding: 6px 0; cursor: pointer; border-radius: 8px;
  min-height: 42px; user-select: none; -webkit-user-select: none;
}
.emoji-grid .em-cell:active { background: rgba(0,0,0,.06); }
body:not(.light) .emoji-grid .em-cell:active { background: var(--bg-elev); }
.em-hd {
  width: 32px; height: 32px; object-fit: contain;
  vertical-align: -6px; pointer-events: none;
  image-rendering: -webkit-optimize-contrast;
}
.em-hd-native {
  display: inline; font-style: normal;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", sans-serif;
}
.em-hd-pick { width: 34px; height: 34px; filter: drop-shadow(0 1px 0.5px rgba(0,0,0,.12)); }
.em-hd-msg { width: 22px; height: 22px; margin: 0 1px; vertical-align: -4px; }
.em-hd-dock { width: 26px; height: 26px; }
.em-hd-gif-dock { width: 34px; height: 26px; object-fit: contain; border-radius: 4px; }
.bubble .em-hd-msg { width: 22px; height: 22px; }
/* 国旗略放大，避免被系统字当成字母框 */
.bubble .em-hd-msg[data-ekey^="1f1"] { width: 24px; height: 24px; vertical-align: -5px; }
.sticker-grid { height: 100%; overflow-y: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 10px 12px; align-content: start; }
.sticker-grid .stk-cell { aspect-ratio: 1; background: var(--bg-elev); border-radius: 10px; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.sticker-grid .stk-cell img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.sticker-grid .stk-empty { grid-column: 1 / -1; text-align: center; color: var(--text4); padding: 36px 16px; font-size: 13px; line-height: 1.8; }

/* GIF 消息操作表 */
.action-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--bg-elev, #fff);
  border-radius: 14px 14px 0 0;
  padding: 12px 12px calc(12px + var(--sab, 0px));
  display: flex; flex-direction: column; gap: 8px;
  animation: as-up .22s ease;
}
@keyframes as-up {
  from { transform: translateY(40%); opacity: .6; }
  to { transform: none; opacity: 1; }
}
.as-preview {
  align-self: center; width: 140px; height: 140px;
  margin: 4px 0 8px; border-radius: 12px; overflow: hidden;
  background: var(--bg-list, #f5f5f5);
  display: flex; align-items: center; justify-content: center;
}
.as-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.as-btn {
  border: 0; border-radius: 10px; padding: 14px 16px;
  font-size: 16px; background: var(--bg-list, #f2f2f2);
  color: var(--text-strong, #111); cursor: pointer;
}
.as-btn.cancel { color: var(--text4, #888); background: transparent; }
.as-btn.danger { color: #fa5151; }

.msg-avatar { touch-action: none; user-select: none; -webkit-user-select: none; }

/* 长按 GIF 预览播放 */
.stk-hold-mask { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.35); }
.stk-hold-pop { position: absolute; width: 168px; background: rgba(40,40,40,.96); border-radius: 12px; padding: 12px 12px 10px; box-shadow: 0 10px 28px rgba(0,0,0,.45); text-align: center; }
.stk-hold-img { width: 144px; height: 144px; margin: 0 auto; background: #1a1a1a; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.stk-hold-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.stk-hold-name { color: #fff; font-size: 13px; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk-hold-pack { color: #9a9a9a; font-size: 11px; margin-top: 2px; }
.stk-hold-album { margin-top: 10px; width: 100%; border: 0; border-radius: 8px; background: #3a3a3a; color: #ddd; font-size: 13px; padding: 8px 0; cursor: pointer; }
.stk-hold-album:active { background: #4a4a4a; }
.stk-hold-del { margin-top: 8px; width: 100%; border: 0; border-radius: 8px; background: #fa5151; color: #fff; font-size: 14px; padding: 9px 0; cursor: pointer; }
.stk-hold-del:active { opacity: .85; }
.stk-mine-cell, .stk-item-preview { touch-action: none; user-select: none; -webkit-user-select: none; }
.stk-mine-cell img, .stk-item-preview img { pointer-events: none; }
.emoji-tools { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px; z-index: 2; }
.emoji-del { width: 52px; height: 38px; background: #fff; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; color: #333; font-size: 18px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
body:not(.light) .emoji-del { background: var(--bg-elev); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.emoji-del:active { background: #eee; }
body:not(.light) .emoji-del:active { background: var(--bg-elev2); }
.emoji-send { width: 64px; height: 38px; background: #07c160; border: 0; border-radius: 8px; color: #fff; font-size: 15px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.emoji-send:disabled { background: #0a5c33; color: #7aa98f; }
.emoji-dock {
  display: flex; align-items: center; gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  border-top: 0;
  background: #ebebeb;
  overflow-x: auto;
  flex-shrink: 0;
  order: 0;
}
body:not(.light) .emoji-dock { background: var(--bg-elev); }
.emoji-dock-item {
  width: 40px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; border-radius: 8px; cursor: pointer; color: var(--text2);
}
.emoji-dock-item.on { background: #fff; }
body:not(.light) .emoji-dock-item.on { background: var(--bg-list); }
.emoji-dock-item:active { opacity: .75; }
.emoji-dock-add {
  font-size: 26px; font-weight: 300; color: var(--text-strong);
  border: 1px dashed var(--border); width: 36px; height: 32px; margin-left: 4px;
}
.emoji-dock-store {
  margin-left: auto; flex-shrink: 0; padding: 6px 10px;
  font-size: 13px; color: #07c160; cursor: pointer; white-space: nowrap;
}

/* 视频截取制作 GIF（仿微信） */
.gif-trim {
  position: fixed; inset: 0; z-index: 99990;
  background: #111; color: #fff;
  display: flex; flex-direction: column;
  padding: calc(12px + var(--sat, 0px)) 0 calc(12px + var(--sab, 0px));
  box-sizing: border-box;
}
.gif-trim-stage {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 16px;
  position: relative;
}
.gif-trim-video {
  max-width: 100%; max-height: 100%;
  background: #000; border-radius: 4px;
  object-fit: contain;
}
.gif-trim-loading {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255,255,255,.88); font-size: 14px;
  background: rgba(0,0,0,.45); padding: 10px 16px; border-radius: 8px;
  pointer-events: none;
}
.gif-trim-loading.hidden { display: none; }
.gif-trim-tip {
  text-align: center; font-size: 14px; color: rgba(255,255,255,.92);
  padding: 8px 16px 4px;
}
.gif-trim-meta {
  text-align: center; font-size: 12px; color: rgba(255,255,255,.62);
  padding: 0 16px 12px;
  font-variant-numeric: tabular-nums;
}
.gif-trim-strip-wrap {
  position: relative;
  height: 64px; margin: 0 16px 18px;
  border-radius: 4px; overflow: hidden;
  background: #1a1a1a;
  touch-action: none; user-select: none;
}
.gif-trim-strip {
  display: flex; height: 100%; width: 100%;
}
.gif-trim-strip img,
.gif-trim-ph {
  flex: 1 1 0; min-width: 0; height: 100%;
  object-fit: cover; display: block;
  background: #222;
}
.gif-trim-sel {
  position: absolute; top: 0; bottom: 0;
  border: 2px solid #fff; border-radius: 3px;
  box-sizing: border-box;
  background: rgba(255,255,255,.08);
  pointer-events: auto;
}
.gif-trim-handle {
  position: absolute; top: 0; bottom: 0; width: 18px;
  display: flex; align-items: center; justify-content: center;
}
.gif-trim-handle.left { left: -2px; }
.gif-trim-handle.right { right: -2px; }
.gif-trim-handle::after {
  content: '';
  width: 3px; height: 22px; border-radius: 2px;
  background: #fff;
}
.gif-trim-playhead {
  position: absolute; top: 0; bottom: 0; width: 2px;
  margin-left: -1px; background: #07c160;
  pointer-events: none; z-index: 2;
}
.gif-trim-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px 4px;
}
.gif-trim-cancel {
  border: 0; background: transparent; color: #fff;
  font-size: 16px; padding: 10px 4px; cursor: pointer;
}
.gif-trim-next {
  border: 0; border-radius: 8px; background: #07c160; color: #fff;
  font-size: 15px; font-weight: 500;
  padding: 10px 22px; cursor: pointer; min-width: 96px;
}
.gif-trim-next:disabled { opacity: .65; }

/* 表情商店 */
.stk-tabs { display: flex; background: var(--bg-list); border-bottom: 1px solid var(--border); }
.stk-tab { flex: 1; text-align: center; padding: 12px; font-size: 15px; color: var(--text3); cursor: pointer; position: relative; }
.stk-tab.on { color: var(--text-strong); font-weight: 600; }
.stk-tab.on::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 0; height: 2px; background: #07c160; border-radius: 1px; }
.stk-cats { display: flex; gap: 8px; padding: 12px; overflow-x: auto; background: var(--bg-list); }
.stk-cat { flex-shrink: 0; padding: 6px 14px; border-radius: 16px; background: var(--bg-elev); color: var(--text2); font-size: 13px; cursor: pointer; }
.stk-cat.on { background: #07c160; color: #fff; }
.stk-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 12px; }
.stk-pack { background: var(--bg-list); border-radius: 10px; padding: 14px 8px; text-align: center; cursor: pointer; }
.stk-pack:active { opacity: .85; }
.stk-pack-ico { font-size: 28px; margin-bottom: 6px; }
.stk-pack-name { font-size: 13px; color: var(--text-strong); }
.stk-browse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; }
.stk-item { background: var(--bg-list); border-radius: 10px; overflow: hidden; }
.stk-item-preview { aspect-ratio: 1; background: var(--bg-elev); display: flex; align-items: center; justify-content: center; }
.stk-item-preview img { width: 100%; height: 100%; object-fit: contain; }
.stk-item-meta { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.stk-item-name { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk-item-btn { border: 0; border-radius: 6px; background: #07c160; color: #fff; font-size: 12px; padding: 6px 0; cursor: pointer; }
.stk-item-btn.done { background: var(--bg-elev); color: var(--text3); }
.stk-mine { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px; }
.stk-mine-cell { aspect-ratio: 1; background: var(--bg-list); border-radius: 10px; overflow: hidden; position: relative; cursor: pointer; }
.stk-mine-cell img { width: 100%; height: 100%; object-fit: contain; }
.stk-mine-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; }

/* E2E 提示 */
.e2e-banner {
  text-align: center; font-size: 11.5px; color: #8a7b3a; background: #26221a;
  padding: 6px 14px; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.e2e-banner-logo {
  width: 16px; height: 16px; object-fit: contain; border-radius: 50%; flex-shrink: 0;
}

/* ---------- 弹层 ---------- */
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 260; display: flex; align-items: flex-end; justify-content: center; }
.modal-mask.center { align-items: center; }
.modal-page { position: fixed; inset: 0; background: var(--bg); z-index: 40; display: flex; flex-direction: column; will-change: transform; }
.modal-page.is-sliding { box-shadow: -8px 0 24px rgba(0,0,0,.18); pointer-events: none; }
.modal-sheet { width: 100%; background: var(--bg-list); border-radius: 14px 14px 0 0; padding-bottom: var(--sab); overflow: hidden; }
.sheet-item { padding: 16px; text-align: center; color: var(--text-strong); border-bottom: 1px solid var(--border); cursor: pointer; }
.sheet-item.has-ico {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding-left: 18px; padding-right: 18px;
}
.sheet-item.has-sub { padding-top: 14px; padding-bottom: 14px; }
.sheet-item-main { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sheet-item-title { font-size: 17px; line-height: 1.25; }
.sheet-item-sub { font-size: 12.5px; color: var(--text3); line-height: 1.2; }
.sheet-item-ico {
  width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; display: block;
}
.sheet-item:active { background: var(--press); }
.sheet-item.is-on { color: #07c160; }
.sheet-item.danger { color: #fa5151; }
.sheet-item-custom { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 16px; }
.sheet-item-label { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-item-del { flex-shrink: 0; font-size: 13px; color: #fa5151; padding: 4px 8px; }

/* 「+」分享链接面板 */
.share-sheet {
  width: 100%;
  background: var(--bg);
  border-radius: 14px 14px 0 0;
  padding: 8px 0 calc(10px + var(--sab));
  overflow: hidden;
}
.share-sheet-hd {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
  padding: 12px 16px 4px;
}
.share-sheet-tip {
  text-align: center;
  font-size: 12px;
  color: var(--text3);
  padding: 0 20px 12px;
  line-height: 1.4;
}
.share-apps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 4px 12px 16px;
  background: var(--bg-list);
  margin: 0 10px;
  border-radius: 12px;
}
.share-app {
  border: 0;
  background: transparent;
  padding: 12px 4px 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  color: inherit;
}
.share-app:active { opacity: .75; }
.share-app-ico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto 8px;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-app-ico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  -webkit-user-drag: none;
  user-select: none;
}
.share-app-name {
  font-size: 12px;
  color: var(--text3);
  line-height: 1.2;
}
.share-copy,
.share-cancel {
  display: block;
  width: calc(100% - 20px);
  margin: 10px 10px 0;
  border: 0;
  border-radius: 12px;
  padding: 14px;
  font-size: 16px;
  background: var(--bg-list);
  color: var(--text-strong);
  cursor: pointer;
}
.share-cancel { color: #576b95; }
.sheet-sec { padding: 10px 16px 4px; font-size: 12px; color: var(--text3); text-align: left; background: var(--bg-elev, rgba(255,255,255,.03)); }
.sheet-empty { padding: 14px 16px; text-align: center; color: var(--text4); font-size: 13px; border-bottom: 1px solid var(--border); }
.sheet-add { padding: 15px; text-align: center; color: #07c160; cursor: pointer; border-bottom: 1px solid var(--border); }
.sheet-add:active { background: var(--press); }
.sheet-hint { padding: 12px 16px 4px; text-align: center; font-size: 12.5px; color: var(--text3); line-height: 1.45; }
.sheet-confirm { padding: 15px; text-align: center; color: #07c160; font-weight: 600; cursor: pointer; border-top: 1px solid var(--border); }
.sheet-confirm:active { background: var(--press); }
.sheet-cancel { padding: 16px; text-align: center; color: var(--text-strong); font-size: 17px; cursor: pointer; margin-top: 8px; background: var(--bg-list); }
.sheet-cancel:active { background: var(--press); }
.sheet-ring-list { max-height: 52vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal-card { width: 82%; max-width: 340px; background: var(--bg-card); border-radius: 12px; overflow: hidden; }
.mc-body { padding: 24px 20px; text-align: center; color: var(--text-strong); }
.mc-actions { display: flex; border-top: 1px solid var(--border); }
.mc-actions div { flex: 1; padding: 13px; text-align: center; cursor: pointer; color: var(--text2); }
.mc-actions div + div { border-left: 1px solid var(--border); color: #07c160; }

/* 删除聊天确认（仿微信：头像 + 双选项胶囊按钮） */
.del-chat-dlg {
  width: 78%;
  max-width: 320px;
  background: #f2f2f2;
  border-radius: 16px;
  padding: 22px 18px 14px;
  text-align: center;
  box-shadow: 0 10px 36px rgba(0,0,0,.28);
}
body:not(.light) .del-chat-dlg { background: #2c2c2e; }
.del-chat-av {
  display: flex; justify-content: center; margin-bottom: 12px;
}
.del-chat-av .avatar {
  width: 64px; height: 64px; border-radius: 50%; font-size: 26px;
}
.del-chat-title {
  font-size: 18px; font-weight: 700; color: #111; line-height: 1.3;
}
body:not(.light) .del-chat-title { color: #f5f5f5; }
.del-chat-desc {
  margin: 8px 4px 18px; font-size: 14.5px; color: #222; line-height: 1.45;
}
body:not(.light) .del-chat-desc { color: #ddd; }
.del-chat-desc b { font-weight: 700; }
.del-chat-btn {
  display: block; width: 100%; box-sizing: border-box;
  border: 0; border-radius: 999px; padding: 12px 14px;
  font-size: 16px; margin-bottom: 10px; cursor: pointer;
  background: #e8e8e8; color: #111;
}
body:not(.light) .del-chat-btn { background: #3a3a3c; color: #f2f2f2; }
.del-chat-btn.danger { color: #fa5151; font-weight: 500; }
.del-chat-btn.cancel { font-weight: 700; color: #111; background: #dedede; }
body:not(.light) .del-chat-btn.cancel { color: #f5f5f5; background: #48484a; }
.del-chat-btn:active { opacity: .82; }
.del-chat-btn:disabled { opacity: .5; cursor: default; }

/* 微信风格：居中短编辑弹窗（群名/备注等） */
.wx-edit-dlg {
  width: 78%;
  max-width: 320px;
  background: #2c2c2c;
  border-radius: 10px;
  padding: 18px 18px 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
body.light .wx-edit-dlg { background: #f7f7f7; box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.wx-edit-brand {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
body.light .wx-edit-brand { color: #191919; }
.wx-edit-label {
  margin-top: 6px;
  font-size: 14px;
  color: rgba(255,255,255,.88);
  line-height: 1.35;
}
body.light .wx-edit-label { color: #666; }
.wx-edit-input {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 8px 2px 10px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.55);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 16px;
  outline: none;
  caret-color: #07c160;
}
body.light .wx-edit-input {
  color: #191919;
  border-bottom-color: #cfcfcf;
}
.wx-edit-input::placeholder { color: rgba(255,255,255,.35); }
body.light .wx-edit-input::placeholder { color: #b2b2b2; }
.wx-edit-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 28px;
  margin-top: 18px;
  padding-right: 2px;
}
.wx-edit-btn {
  border: 0;
  background: transparent;
  color: #7eb8a2;
  font-size: 15px;
  padding: 6px 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wx-edit-btn.ok { color: #7eb8a2; font-weight: 500; }
body.light .wx-edit-btn,
body.light .wx-edit-btn.ok { color: #576b95; }

/* 微信风格：字段全页编辑（群昵称/备注） */
.wx-field-page {
  background: var(--bg);
  z-index: 280;
}
.wx-field-page > .form-page-body {
  background: var(--bg);
  padding: 0;
  display: flex;
  flex-direction: column;
}
.wx-field-hd {
  text-align: center;
  padding: 28px 28px 8px;
}
.wx-field-title {
  font-size: 22px;
  font-weight: 650;
  color: var(--text-strong);
  line-height: 1.3;
}
.wx-field-tip {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text3);
  line-height: 1.5;
}
.wx-field-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-list);
}
.wx-field-row .avatar {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: cover;
}
.wx-field-row input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text-strong);
  font-size: 16px;
  outline: none;
  caret-color: #07c160;
}
.wx-field-row input::placeholder { color: var(--text4); }
.wx-field-clear {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text4);
  color: var(--bg-list);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  display: none;
}
.wx-field-clear.show { display: block; }
.wx-field-sub {
  padding: 8px 16px 0;
  font-size: 12.5px;
  color: var(--text3);
}
.wx-field-ok {
  display: block;
  width: 56%;
  max-width: 220px;
  margin: 36px auto 0;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: #cfcfcf;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  opacity: .85;
}
.wx-field-ok.active {
  background: #07c160;
  opacity: 1;
}
.wx-field-ok:disabled { cursor: default; }

/* 群公告全屏编辑（微信模版） */
.announce-edit-page {
  background: var(--bg-list);
  z-index: 280;
}
.announce-edit-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(8px + var(--sat)) 12px 8px;
  background: var(--bg-list);
  border-bottom: 1px solid var(--border);
  min-height: 48px;
}
.announce-nav-cancel,
.announce-nav-done {
  border: 0;
  background: transparent;
  font-size: 16px;
  color: var(--text-strong);
  padding: 8px 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.announce-nav-done {
  min-width: 56px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--bg-elev2);
  color: var(--text4);
  font-size: 15px;
}
.announce-nav-done.active {
  background: #07c160;
  color: #fff;
}
.announce-nav-hist {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex: 1;
}
.announce-hist-btn {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--text4);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
.announce-hist-btn.on { color: var(--text-strong); }
.announce-hist-btn:disabled { opacity: .35; cursor: default; }
.announce-edit-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-list);
}
.announce-edit-ta {
  flex: 1;
  width: 100%;
  border: 0;
  resize: none;
  padding: 16px 16px 12px;
  background: var(--bg-list);
  color: var(--text-strong);
  font-size: 16px;
  line-height: 1.55;
  outline: none;
  caret-color: #07c160;
}
.announce-edit-ta::placeholder { color: var(--text4); }
.announce-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px calc(8px + var(--sab));
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
}
.announce-tool {
  width: 44px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--text2);
  font-size: 18px;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.announce-tool:active { background: var(--press); }
.announce-tool.plus { margin-left: auto; font-size: 22px; }

/* 搜索页 */
.search-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-list); }
.search-bar input { flex: 1; background: var(--bg-elev); border: 0; border-radius: 6px; padding: 9px 12px; color: var(--text-strong); }
.search-bar .cancel { color: #07c160; cursor: pointer; flex-shrink: 0; }
.search-result { flex: 1; overflow-y: auto; }
.user-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.user-card.nf-row { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.user-card.nf-row:active { background: var(--press, rgba(0,0,0,.04)); }
.uc-info { flex: 1; min-width: 0; }
.uc-name { color: var(--text-strong); font-size: 16.5px; }
.uc-sub { color: var(--text3); font-size: 13px; margin-top: 3px; }
.btn-sm { background: #07c160; color: #fff; border: 0; border-radius: 5px; padding: 7px 14px; cursor: pointer; font-size: 14px; flex-shrink: 0; }
.btn-sm.gray { background: var(--bg-elev2); color: var(--text2); }
.btn-sm.line { background: transparent; border: 1px solid #07c160; color: #07c160; }

/* 红包发送页 */
.rp-page { background: var(--bg-list); }
.rp-form { padding: 20px 16px; }
.rp-field { display: flex; align-items: center; background: var(--bg-elev); border-radius: 8px; padding: 14px 14px; margin-bottom: 12px; }
.rp-field label { flex: 1; color: var(--text); }
.rp-field input { background: transparent; border: 0; color: var(--text-strong); text-align: right; width: 46%; }
.rp-field .unit { color: var(--text3); margin-left: 6px; }
.rp-super-list { margin: 0 0 12px; }
.rp-super-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elev); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
}
.rp-super-row .idx { color: var(--text3); width: 1.6em; flex-shrink: 0; font-size: 13px; }
.rp-super-row input {
  flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text-strong);
  text-align: right; font-size: 16px;
}
.rp-super-bind {
  flex-shrink: 0; border: 0; background: transparent; color: #576b95;
  font-size: 13px; max-width: 7.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-super-bind.on { color: #07c160; }
body.light .rp-super-row { background: #fff; }
.rp-kind { color: #fa9d3b; font-size: 13px; padding: 0 4px 14px; }
.rp-kind a { color: #576b95; text-decoration: none; }
.rp-total { text-align: center; font-size: 42px; color: var(--text-strong); margin: 26px 0; font-weight: 500; }
.rp-send-btn { width: 60%; margin: 0 auto; display: block; height: 46px; background: #e9553c; color: #fff; border: 0; border-radius: 8px; font-size: 17px; cursor: pointer; }
.rp-send-btn:active { background: #c74631; }
.rp-tip24 { text-align: center; color: var(--text3); font-size: 12px; margin-top: 16px; }

/* 红包打开弹窗 */
.rp-open-card { width: 78%; max-width: 320px; background: linear-gradient(160deg,#e9553c,#d33a24); border-radius: 14px; overflow: hidden; text-align: center; color: #ffd9a0; }
.rp-open-top { padding: 30px 20px 16px; }
.rp-open-avatar { width: 52px; height: 52px; border-radius: 8px; margin: 0 auto 10px; }
.rp-open-name { font-size: 15px; }
.rp-open-note { font-size: 19px; color: #ffe9c8; margin-top: 14px; }
.rp-open-btn { width: 84px; height: 84px; border-radius: 50%; background: #ffd06e; color: #7a3a10; font-size: 30px; border: 0;
  margin: 26px auto 30px; display: block; cursor: pointer; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.rp-open-btn:active { transform: scale(.95); }
.rp-open-amount { font-size: 40px; color: #ffd06e; margin: 18px 0 6px; font-weight: 600; }
.rp-open-close { padding: 14px; color: #ffc; opacity: .8; cursor: pointer; font-size: 14px; }
.rp-detail-list { background: var(--bg-list); max-height: 40vh; overflow-y: auto; }
.rp-share { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.rp-share .amt { color: #e8b34b; }
.rp-best { color: #fa9d3b; font-size: 11px; }

/* 支付与服务 / 余额 — 星空背景（WebView 不支持 background-attachment:fixed，用独立层）
   注意：绝不能覆盖 .modal-page 的 position:fixed，否则页面会叠在「我」页里 */
.modal-page.wl-nebula-page,
.modal-page.fl-pay-nebula,
.modal-page.fl-collect-nebula {
  background: #0a0618 !important;
  overflow: hidden;
}
.wl-nebula-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background-color: #0a0618;
  background-image: url('../img/wallet/nebula-bg.png');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
/* 沉浸顶栏：无底色条，仅返回 + 标题浮在星空上；内容区全屏透明 */
.modal-page.wl-nebula-page > .nav-bar,
.modal-page.fl-pay-nebula > .nav-bar,
.modal-page.fl-collect-nebula > .nav-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  pointer-events: none;
}
.modal-page.wl-nebula-page > .nav-bar .nav-back,
.modal-page.wl-nebula-page > .nav-bar .nav-title,
.modal-page.fl-pay-nebula > .nav-bar .nav-back,
.modal-page.fl-pay-nebula > .nav-bar .nav-title,
.modal-page.fl-collect-nebula > .nav-bar .nav-back,
.modal-page.fl-collect-nebula > .nav-bar .nav-title {
  pointer-events: auto;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.modal-page.wl-nebula-page > .nav-bar .nav-back,
.modal-page.fl-pay-nebula > .nav-bar .nav-back,
.modal-page.fl-collect-nebula > .nav-bar .nav-back {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.modal-page.wl-nebula-page > .nav-bar .nav-right,
.modal-page.fl-pay-nebula > .nav-bar .nav-right,
.modal-page.fl-collect-nebula > .nav-bar .nav-right {
  pointer-events: auto;
  opacity: 0;
  width: 48px;
  flex-shrink: 0;
}
.modal-page.wl-nebula-page > .form-page-body,
.modal-page.fl-pay-nebula > .form-page-body,
.modal-page.fl-collect-nebula > .form-page-body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  background: transparent !important;
  padding-top: calc(48px + var(--sat));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-page.wl-nebula-page .nav-back,
.modal-page.wl-nebula-page .nav-title,
.modal-page.wl-nebula-page .nav-right { color: #fff !important; }
.modal-page.wl-pay-svc-page .form-page-body {
  padding: calc(48px + var(--sat) + 8px) 16px 28px;
}

.pay-card-nebula {
  position: relative;
  width: 100%;
  margin: 10px 0 0;
  /* 兜底：老 WebView 不支持 aspect-ratio 时仍保留高度 */
  min-height: clamp(190px, 66.6015625vw, 360px);
  aspect-ratio: 1024 / 682;
}
@supports not (aspect-ratio: 1 / 1) {
  .pay-card-nebula {
    height: 0;
    min-height: unset;
    padding-bottom: 66.6015625%;
  }
}
.pay-card-nebula-frame {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
  display: block;
}
.pay-card-nebula-inner {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 22%;
  bottom: 16%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pay-card-nebula-item {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.pay-card-nebula-item + .pay-card-nebula-item {
  border-left: none;
}
.pay-card-nebula-item:active { opacity: .86; }
#w-scan {
  transform: none;
}
#w-scan .pc-img {
  transform: translateY(-22px);
}
#w-scan .pc-lab {
  transform: translateY(-27px);
}
#w-scan:active {
  opacity: .86;
}
#w-scan:active .pc-img {
  transform: translateY(-22px);
}
#w-scan:active .pc-lab {
  transform: translateY(-27px);
}
#w-wallet {
  transform: translateY(-19px);
}
#w-wallet .pc-img {
  transform: translateY(5px);
}
#w-wallet:active {
  transform: translateY(-19px) scale(.98);
  opacity: .86;
}
#w-wallet:active .pc-img {
  transform: translateY(5px);
}
.pay-card-nebula-item .pc-img {
  width: 48px; height: 48px;
  object-fit: contain;
  display: block;
  margin: 0 auto 8px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
  background: transparent;
}
.pay-card-nebula-item .pc-lab {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0,0,0,.65);
}
.pay-card-nebula-item .pc-bal {
  margin-top: 4px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

/* 支付与服务 — 服务条款 */
.pay-svc-terms {
  margin-top: 28px;
  padding: 18px 0 22px;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.pay-svc-terms-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: .3px;
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.pay-svc-terms-body {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.pay-svc-terms-body p { margin: 0 0 10px; }
.pay-svc-terms-body p:last-child { margin-bottom: 0; }
.pay-svc-terms-foot {
  margin-top: 14px !important;
  color: rgba(255,255,255,.55);
  font-size: 12px;
}

/* 旧版绿卡（保留兼容） */
.pay-card {
  display: flex;
  margin: 12px;
  background: #07c160;
  border-radius: 12px;
  overflow: hidden;
}
.pay-card-item {
  flex: 1;
  padding: 26px 10px 22px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.35;
}
.pay-card-item + .pay-card-item { border-left: 1px solid rgba(255,255,255,.22); }
.pay-card-item .pc-ico {
  width: 40px; height: 40px; margin: 0 auto 10px;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.pay-card-item .pc-ico .fl-ico,
.pay-card-item .pc-ico i.fl-ico,
.pay-card-item .pc-ico svg {
  display: block; width: 34px; height: 34px; color: #fff;
}
.pay-card-item .pc-lab { color: #fff; }
.pay-card-item .pc-bal {
  margin-top: 4px; color: rgba(255,255,255,.92);
  font-size: 13px; font-weight: 400;
}
.pay-card-item:active { background: rgba(0,0,0,.08); }
.pay-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px 0; background: var(--bg-list); padding: 14px 6px; }
.pay-svc { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--text2); font-size: 12px; padding: 10px 2px; cursor: pointer; }
.pay-svc-ico { font-size: 24px; }
.pay-svc:active { opacity: .7; }

/* —— 收付款（星空背景，图9） —— */
.modal-page.fl-pay-nebula .nav-bar,
.modal-page.fl-collect-nebula .nav-bar {
  color: #fff !important;
}
.modal-page.fl-pay-nebula .nav-back,
.modal-page.fl-pay-nebula .nav-title,
.modal-page.fl-pay-nebula .nav-right,
.modal-page.fl-collect-nebula .nav-back,
.modal-page.fl-collect-nebula .nav-title,
.modal-page.fl-collect-nebula .nav-right { color: #fff; }
.modal-page.fl-pay-nebula .form-page-body,
.modal-page.fl-collect-nebula .form-page-body {
  padding: calc(48px + var(--sat) + 10px) 16px 28px;
}
.modal-page.fl-pay-green {
  background: #07c160;
}
.modal-page.fl-pay-green .nav-bar {
  background: #07c160 !important; color: #fff !important; border-bottom: 0 !important;
}
.modal-page.fl-pay-green .nav-back,
.modal-page.fl-pay-green .nav-title,
.modal-page.fl-pay-green .nav-right { color: #fff; }
.modal-page.fl-pay-green .form-page-body {
  background: #07c160; padding: 10px 16px 28px; overflow-y: auto;
}
.fl-pay-card {
  background: #fff; border-radius: 12px; padding: 16px 18px 14px; color: #111;
}
.fl-pay-hd {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.fl-pay-hd-l {
  display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: #191919;
}
.fl-pay-hd-l .fl-pay-scan-ico {
  width: 20px; height: 20px; color: #07c160; display: inline-flex;
}
.fl-pay-more {
  color: #8c8c8c;
  width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; background: none; border: 0; line-height: 0;
}
.fl-pay-more .fl-ico,
.fl-pay-more i[data-icon],
.fl-pay-more svg {
  display: block; width: 22px; height: 22px; color: #8c8c8c;
}
.fl-pay-hint {
  text-align: center; color: #b2b2b2; font-size: 13px; margin: 4px 0 10px; cursor: pointer;
}
.fl-pay-barcode-wrap {
  display: flex; justify-content: center; align-items: center; padding: 4px 8px 14px; cursor: pointer;
}
.fl-pay-barcode-wrap canvas {
  display: block; margin: 0 auto; width: 100%; max-width: 320px; height: 72px;
}
.fl-pay-qr-wrap {
  display: flex; justify-content: center; padding: 4px 0 16px;
}
.fl-pay-qr-wrap img { width: 200px; height: 200px; display: block; min-height: 200px; }
.fl-pay-method-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0 8px; border-top: 1px solid #f0f0f0; font-size: 13px; color: #888;
}
.fl-pay-method-label .chg { color: #888; }
.fl-pay-method-box {
  display: flex; align-items: center; gap: 10px;
  background: #f7f7f7; border-radius: 8px; padding: 12px 14px; margin-top: 2px;
}
.fl-pay-balance-ico {
  width: 32px; height: 32px; object-fit: contain; flex-shrink: 0;
  background: transparent;
}
.fl-pay-yen {
  width: 28px; height: 28px; border-radius: 50%; background: #f7b500; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700;
}
.fl-pay-method-box .name { flex: 1; font-size: 16px; color: #191919; }
.fl-pay-method-box .ck { color: #07c160; font-size: 18px; font-weight: 700; }
.fl-pay-menu { margin-top: 18px; }
.fl-pay-menu-item {
  display: flex; align-items: center; gap: 14px; padding: 16px 4px;
  color: #fff; font-size: 16px; cursor: pointer;
}
.fl-pay-menu-item + .fl-pay-menu-item { border-top: 1px solid rgba(255,255,255,.12); }
.fl-pay-menu-item .ico {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fl-pay-menu-item .lab { flex: 1; }
.fl-pay-menu-item .arr { opacity: .85; font-size: 18px; }

/* 二维码收款（黄底） */
.modal-page.fl-collect-yellow { background: #f2c40c; }
.modal-page.fl-collect-nebula .form-page-body { background: transparent; }
.modal-page.fl-collect-yellow .nav-bar {
  background: #f2c40c !important; color: #fff !important; border-bottom: 0 !important;
}
.modal-page.fl-collect-yellow .nav-back,
.modal-page.fl-collect-yellow .nav-title,
.modal-page.fl-collect-yellow .nav-right { color: #fff; }
.modal-page.fl-collect-yellow .form-page-body {
  background: #f2c40c; padding: 12px 16px 28px; overflow-y: auto;
}
.fl-collect-card {
  background: #fff; border-radius: 10px; overflow: hidden; color: #191919;
}
.fl-collect-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 6px; font-size: 14px; color: #8b6914;
}
.fl-collect-hd-l { display: flex; align-items: center; gap: 6px; }
.fl-collect-name {
  text-align: center; font-size: 15px; color: #191919; padding: 4px 12px 10px;
}
.fl-collect-amt {
  text-align: center; font-size: 28px; font-weight: 600; color: #191919;
  padding: 0 12px 4px; letter-spacing: .5px;
}
.fl-collect-note {
  text-align: center; font-size: 13px; color: #888; padding: 0 16px 10px;
}
.fl-collect-qr {
  position: relative; width: 220px; height: 220px; margin: 0 auto 12px;
}
.fl-collect-qr img.qr { width: 100%; height: 100%; display: block; }
.fl-collect-av {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 6px; overflow: hidden;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); background: #eee;
}
.fl-collect-av img, .fl-collect-av .avatar {
  width: 100%; height: 100%; object-fit: cover; border-radius: 4px; margin: 0;
}
.fl-collect-av .badge {
  position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px;
  background: #07c160; border-radius: 50%; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 700;
}
.fl-collect-acts {
  display: flex; align-items: center; justify-content: center; gap: 0;
  padding: 4px 8px 16px; font-size: 13px; color: #576b95;
}
.fl-collect-acts span { padding: 6px 10px; cursor: pointer; }
.fl-collect-acts i { color: #e5e5e5; font-style: normal; }
.fl-collect-ledger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-top: 1px solid #f0f0f0; font-size: 15px; cursor: pointer;
}
.fl-collect-biz {
  margin-top: 12px; background: #f7d76a; border-radius: 10px;
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  color: #5a4508; font-size: 15px; cursor: pointer;
}
.fl-collect-biz .arr { margin-left: auto; opacity: .7; }
.fl-collect-official {
  margin-top: 12px; background: rgba(255,255,255,.35); border-radius: 10px;
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer;
}
.fl-collect-official .t1 {
  font-size: 15px; color: #191919; display: flex; align-items: center; gap: 6px;
}
.fl-collect-official .new {
  background: #fa5151; color: #fff; font-size: 10px; border-radius: 3px; padding: 1px 5px; font-weight: 700;
}
.fl-collect-official .t2 { font-size: 12px; color: #8a7a40; margin-top: 3px; }
.fl-collect-official .arr { margin-left: auto; color: #8a7a40; }

/* 收款码保存成功弹窗（仿微信，无经营收款横幅） */
.fl-collect-saved-mask { z-index: 10001; background: rgba(0, 0, 0, .55); }
.fl-collect-saved-dlg {
  width: min(320px, calc(100vw - 48px));
  background: #fff;
  border-radius: 12px;
  padding: 28px 22px 0;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
}
.fl-collect-saved-ico {
  width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 50%; background: #07c160; color: #fff;
  font-size: 28px; font-weight: 700; line-height: 54px;
}
.fl-collect-saved-title {
  font-size: 17px; font-weight: 600; color: #191919; margin-bottom: 14px;
}
.fl-collect-saved-tip {
  font-size: 14px; line-height: 1.55; color: #191919; text-align: left;
  padding: 0 2px 22px;
}
.fl-collect-saved-btn {
  display: block; width: 100%; height: 48px; margin: 0;
  border: 0; border-top: 0.5px solid #e5e5e5;
  border-radius: 0 0 12px 12px;
  background: #fff; color: #07c160;
  font-size: 17px; font-weight: 500; cursor: pointer;
}
.fl-collect-saved-dlg:not(:has(.fl-collect-saved-tip)) .fl-collect-saved-title { margin-bottom: 22px; }

/* —— 设置金额（收款设置） —— */
.modal-page.fl-cset-page {
  background: #fff; z-index: 50;
  display: flex; flex-direction: column;
}
.fl-cset-nav {
  height: calc(48px + var(--sat)); padding-top: var(--sat);
  display: flex; align-items: center; justify-content: space-between;
  padding-left: 8px; padding-right: 8px; flex-shrink: 0;
  border-bottom: 1px solid #f0f0f0; background: #fff;
}
.fl-cset-x {
  width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  font-size: 28px; line-height: 1; color: #191919; font-weight: 300;
}
.fl-cset-title {
  flex: 1; text-align: center; font-size: 17px; font-weight: 500; color: #191919;
}
.fl-cset-nav-r { width: 44px; }
.fl-cset-body {
  flex: 1; padding: 28px 24px 12px; overflow: auto;
}
.fl-cset-label { font-size: 15px; color: #191919; margin-bottom: 18px; }
.fl-cset-amt {
  display: flex; align-items: flex-end; gap: 4px; min-height: 56px;
  font-weight: 600; color: #191919;
}
.fl-cset-amt .yen { font-size: 40px; line-height: 1; padding-bottom: 4px; }
.fl-cset-amt .val {
  font-size: 48px; line-height: 1; letter-spacing: 1px;
  min-width: 4px; word-break: break-all;
}
.fl-cset-amt .cursor {
  width: 2px; height: 40px; background: #07c160; margin-bottom: 6px;
  animation: fl-cset-blink 1s step-end infinite; flex-shrink: 0;
}
.fl-cset-amt .cursor.hidden { visibility: hidden; }
@keyframes fl-cset-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.fl-cset-line {
  height: 1px; background: #e5e5e5; margin: 14px 0 16px;
}
.fl-cset-note-link {
  font-size: 15px; color: #576b95; cursor: pointer; display: inline-block;
}
.fl-cset-note-link.has-note { color: #191919; }
.fl-cset-note-edit {
  display: flex; gap: 10px; align-items: center; margin-top: 4px;
}
.fl-cset-note-edit.hidden { display: none; }
.fl-cset-note-edit input {
  flex: 1; height: 40px; border: 0; border-bottom: 1px solid #07c160;
  outline: none; font-size: 15px; background: transparent; color: #191919;
}
.fl-cset-note-edit button {
  border: 0; background: none; color: #07c160; font-size: 15px; cursor: pointer; padding: 8px;
}
.fl-cset-pad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 56px);
  background: #f7f7f7;
  border-top: 1px solid #e8e8e8;
  padding-bottom: var(--sab);
  flex-shrink: 0;
}
.fl-cset-pad button {
  border: 0; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
  background: #fff; font-size: 24px; color: #191919; cursor: pointer;
}
.fl-cset-pad button:active { background: #f0f0f0; }
.fl-cset-pad button.del { font-size: 20px; color: #333; }
.fl-cset-pad button.ok {
  grid-column: 4; grid-row: 2 / span 3;
  background: #b8dcc8; color: #fff; font-size: 17px; font-weight: 500;
  border-bottom: 0;
}
.fl-cset-pad button.ok.on { background: #07c160; }
.fl-cset-pad button.ok:disabled { background: #b8dcc8; color: #fff; opacity: 1; }
.fl-cset-pad button.zero { grid-column: 1 / span 2; }

/* 键盘第四列：删除在 (1,4)，确定跨 2-4 行；数字布局 */
.fl-cset-pad button[data-k="1"] { grid-area: 1 / 1; }
.fl-cset-pad button[data-k="2"] { grid-area: 1 / 2; }
.fl-cset-pad button[data-k="3"] { grid-area: 1 / 3; }
.fl-cset-pad button[data-k="del"] { grid-area: 1 / 4; }
.fl-cset-pad button[data-k="4"] { grid-area: 2 / 1; }
.fl-cset-pad button[data-k="5"] { grid-area: 2 / 2; }
.fl-cset-pad button[data-k="6"] { grid-area: 2 / 3; }
.fl-cset-pad button[data-k="ok"] { grid-area: 2 / 4 / 5 / 5; }
.fl-cset-pad button[data-k="7"] { grid-area: 3 / 1; }
.fl-cset-pad button[data-k="8"] { grid-area: 3 / 2; }
.fl-cset-pad button[data-k="9"] { grid-area: 3 / 3; }
.fl-cset-pad button[data-k="0"] { grid-area: 4 / 1 / 5 / 3; }
.fl-cset-pad button[data-k="."] { grid-area: 4 / 3; }

/* 扫码金额输入 */
.fl-scan-pay-mask {
  position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.fl-scan-pay-sheet {
  width: 100%; max-width: 480px; background: #fff; border-radius: 12px 12px 0 0;
  padding: 18px 18px calc(18px + var(--sab, 0px)); color: #191919;
}
.fl-scan-pay-sheet .hd { text-align: center; font-size: 15px; color: #888; }
.fl-scan-pay-sheet .to { text-align: center; font-size: 18px; margin: 8px 0 16px; font-weight: 500; }
.fl-scan-pay-sheet .amt-row {
  display: flex; align-items: baseline; gap: 6px; border-bottom: 1px solid #e5e5e5; padding-bottom: 10px;
}
.fl-scan-pay-sheet .yen { font-size: 28px; font-weight: 600; }
.fl-scan-pay-sheet input {
  flex: 1; border: 0; outline: 0; font-size: 36px; font-weight: 600; background: transparent; min-width: 0;
}
.fl-scan-pay-sheet .go {
  margin-top: 18px; width: 100%; height: 46px; border: 0; border-radius: 8px;
  background: #07c160; color: #fff; font-size: 17px; cursor: pointer;
}
.fl-scan-pay-sheet .go:disabled { opacity: .45; }
.fl-scan-pay-sheet .x {
  position: absolute; right: 14px; top: 12px; border: 0; background: none; font-size: 22px; color: #999; cursor: pointer;
}
.fl-scan-pay-sheet { position: relative; }

/* 钱包 / 零钱页 */
.wallet-balance { text-align: center; padding: 44px 20px 30px; background: linear-gradient(160deg,#07c160,#059a4c); color: #fff; }
.wallet-balance .b-label { font-size: 14px; opacity: .9; }
.wallet-balance .b-num { font-size: 42px; font-weight: 600; margin-top: 10px; }
.wallet-actions { display: flex; gap: 12px; padding: 16px; }
.wallet-actions button { flex: 1; height: 44px; border: 0; border-radius: 8px; cursor: pointer; font-size: 16px; }

.modal-page.lq-page-wrap .form-page-body {
  background: transparent;
  overflow-y: auto;
}
.modal-page.lq-page-wrap:not(.wl-nebula-page) .form-page-body {
  padding: 0;
}
.modal-page.lq-page-wrap.wl-nebula-page .form-page-body {
  padding: calc(48px + var(--sat) + 8px) 0 28px;
}
.lq-page {
  padding: 16px 16px 28px;
  max-width: 520px;
  margin: 0 auto;
}
.lq-page.lq-nebula { padding-top: 8px; }

/* 余额页 — 星空页透明卡片 + 白框 */
.lq-glass-card {
  position: relative;
  border-radius: 18px;
  padding: 32px 20px 28px;
  text-align: center;
  color: #fff;
  background: rgba(12, 8, 28, .38);
  border: 2px solid rgba(255, 255, 255, .52);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .22);
}
.lq-balance-logo {
  width: 56px; height: 56px;
  object-fit: contain;
  display: block;
  margin: 0 auto 14px;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.45));
}
.lq-label {
  font-size: 16px;
  letter-spacing: .3px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.lq-amt {
  margin-top: 10px;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.lq-sub {
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,.88);
  line-height: 1.45;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.lq-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.lq-btn {
  flex: 1;
  height: 50px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform .12s ease, opacity .12s ease;
}
.lq-btn:active { transform: scale(.98); opacity: .92; }
.lq-btn.deposit {
  background: linear-gradient(135deg, #2dd4ff 0%, #6366f1 55%, #a855f7 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(99,102,241,.35);
}
.lq-btn.remit {
  background: rgba(255,255,255,.95);
  color: #1a1a2e;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.lq-menu.lq-glass-menu {
  margin-top: 16px;
  background: rgba(12, 8, 28, .34);
  border: 2px solid rgba(255, 255, 255, .48);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .2);
}
.lq-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  cursor: pointer;
}
.lq-cell:active { background: rgba(255,255,255,.06); }
.lq-cell-logo {
  width: 36px; height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
}
#lq-recharge-orders .lq-cell-logo {
  width: 42px; height: 42px;
}
#lq-bills .lq-cell-logo {
  width: 44px; height: 44px;
}
.lq-cell-body {
  flex: 1;
  font-size: 16px;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.lq-cell-arrow {
  color: rgba(255,255,255,.75);
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.lq-cell + .lq-cell {
  border-top: 1px solid rgba(255,255,255,.16);
}
.lq-tip {
  margin-top: 20px;
  padding: 0 4px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.75;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* 旧版余额页样式（保留） */
.lq-hero {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 28px 20px 26px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(120% 80% at 10% -10%, rgba(255,255,255,.28), transparent 55%),
    linear-gradient(145deg, #1ad06d 0%, #07c160 42%, #049a4e 100%);
  box-shadow: 0 14px 32px rgba(7, 193, 96, .28);
}
.lq-hero-glow {
  position: absolute;
  right: -36px; top: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  pointer-events: none;
}
.lq-hero-glow::after {
  content: '';
  position: absolute;
  left: -70px; bottom: -90px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.lq-coin {
  position: relative;
  display: inline-flex;
  margin-bottom: 10px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.12));
}
.lq-label {
  position: relative;
  font-size: 13px;
  letter-spacing: .4px;
  opacity: .92;
}
.lq-amt {
  position: relative;
  margin-top: 8px;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.lq-sub {
  position: relative;
  margin-top: 10px;
  font-size: 12px;
  opacity: .78;
}
.lq-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.lq-btn {
  flex: 1;
  height: 48px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform .12s ease, opacity .12s ease;
}
.lq-btn:active { transform: scale(.98); opacity: .92; }
.lq-btn.primary {
  background: #07c160;
  color: #fff;
  box-shadow: 0 8px 18px rgba(7, 193, 96, .28);
}
.lq-btn.ghost {
  background: var(--bg-list);
  color: var(--text-strong);
  border: 1px solid var(--border);
}
.lq-menu {
  margin-top: 16px;
  background: var(--bg-list);
  border-radius: 14px;
  overflow: hidden;
}
.lq-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  cursor: pointer;
}
.lq-cell:active { background: var(--press); }
.lq-cell-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(7, 193, 96, .12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lq-cell-body {
  flex: 1;
  font-size: 15px;
  color: var(--text-strong);
}
.lq-cell-arrow {
  color: var(--text4);
  font-size: 18px;
  line-height: 1;
}
.lq-cell + .lq-cell {
  border-top: 1px solid var(--border);
}
.lq-tip {
  margin-top: 18px;
  padding: 0 4px;
  color: var(--text3);
  font-size: 12.5px;
  line-height: 1.7;
}

.modal-page.wl-nebula-page .rcg-bal { color: rgba(255,255,255,.82); text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.modal-page.wl-nebula-page .rcg-bal b { color: #fff; font-weight: 700; }
.modal-page.wl-nebula-page .rcg-label,
.modal-page.wl-nebula-page .rcg-sec-title { color: rgba(255,255,255,.92); font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
/* 星空页：表单区透明；存款明细每条订单单独有框 */
.modal-page.wl-nebula-page .rcg-card,
.modal-page.wl-nebula-page .rcg-pay-usdt {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
}
.modal-page.wl-nebula-page .rcg-page > .list {
  background: rgba(12, 8, 28, .34) !important;
  border: 2px solid rgba(255, 255, 255, .48) !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .2);
}
.modal-page.wl-nebula-page .rcg-page > .list .cell {
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
}
.modal-page.wl-nebula-page .rcg-page > .list .cell:active {
  background: rgba(255, 255, 255, .06) !important;
}
.modal-page.wl-nebula-page .rcg-page > .list .cell-arrow {
  color: rgba(255, 255, 255, .75) !important;
}
.modal-page.wl-nebula-page .rcg-addr-input {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 8px;
  padding: 0 12px;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  color: #fff !important;
  background: rgba(12, 8, 28, .34) !important;
  border: 2px solid rgba(255, 255, 255, .48) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .2) !important;
  text-shadow: none;
  -moz-appearance: none;
  overflow-x: auto;
  white-space: nowrap;
  text-overflow: clip;
  direction: ltr;
  text-align: left;
}
.modal-page.wl-nebula-page .rcg-addr-input:not(:placeholder-shown):not(:focus) {
  direction: rtl;
  text-overflow: ellipsis;
}
.modal-page.wl-nebula-page .rcg-addr-input::placeholder {
  color: rgba(255, 255, 255, .45);
}
.modal-page.wl-nebula-page .rcg-card { padding: 0 0 14px; }
.modal-page.wl-nebula-page .rcg-pay-usdt { overflow: visible; }
.modal-page.wl-nebula-page .rcg-pay-usdt-hd { padding: 8px 0 6px; }
.modal-page.wl-nebula-page .rcg-order-card {
  background: rgba(12, 8, 28, .38) !important;
  border: 2px solid rgba(255, 255, 255, .52) !important;
  border-radius: 16px !important;
  padding: 14px 14px 12px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .22) !important;
}
.modal-page.wl-nebula-page .rcg-order-card + .rcg-order-card {
  margin-top: 12px;
}
.modal-page.wl-nebula-page .rcg-yen,
.modal-page.wl-nebula-page .rcg-input:not(.rcg-addr-input),
.modal-page.wl-nebula-page .rcg-order-amt,
.modal-page.wl-nebula-page .rcg-order-oid,
.modal-page.wl-nebula-page .rcg-order-oid code,
.modal-page.wl-nebula-page .rcg-ch-name,
.modal-page.wl-nebula-page .rcg-pay-usdt-name,
.modal-page.wl-nebula-page .rcg-usdt-pay,
.modal-page.wl-nebula-page .rcg-usdt {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.modal-page.wl-nebula-page .rcg-yen,
.modal-page.wl-nebula-page .rcg-input:not(.rcg-addr-input),
.modal-page.wl-nebula-page .rcg-order-amt,
.modal-page.wl-nebula-page .rcg-order-oid code,
.modal-page.wl-nebula-page .rcg-ch-name,
.modal-page.wl-nebula-page .rcg-pay-usdt-name,
.modal-page.wl-nebula-page .rcg-usdt-pay { color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,.45); }
.modal-page.wl-nebula-page .rcg-usdt {
  margin: 0;
  padding: 8px 0 0;
  color: rgba(255,255,255,.88);
}
.modal-page.wl-nebula-page .rcg-usdt-pay b { color: #7dffb0 !important; text-shadow: 0 1px 4px rgba(0,0,0,.45); }
.modal-page.wl-nebula-page .rcg-usdt-warn { color: #ffd08a !important; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.modal-page.wl-nebula-page .rcg-submit.usdt { box-shadow: 0 6px 18px rgba(38,161,123,.35); }
.modal-page.wl-nebula-page .rcg-order-meta,
.modal-page.wl-nebula-page .rcg-ch-desc,
.modal-page.wl-nebula-page .rcg-pay-usdt-desc,
.modal-page.wl-nebula-page .rcg-usdt-rate { color: rgba(255,255,255,.78) !important; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.modal-page.wl-nebula-page .rcg-q {
  border: 1.5px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 600;
}
.modal-page.wl-nebula-page .rcg-q.on {
  border-color: #2dd4ff;
  color: #fff;
  background: rgba(45,212,255,.18);
  box-shadow: 0 0 0 1px rgba(45,212,255,.35) inset;
}
.modal-page.wl-nebula-page .rcg-mini-btn {
  border: 1.5px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: 600;
}
.modal-page.wl-nebula-page .rcg-mini-btn.pay { background: #26a17b; border-color: #26a17b; }
.modal-page.wl-nebula-page .rcg-mini-btn.cs { background: rgba(87,107,149,.35); border-color: rgba(255,255,255,.22); }
.modal-page.wl-nebula-page .rcg-order-st.ok { background: rgba(7,193,96,.25); color: #7dffb0; font-weight: 600; }
.modal-page.wl-nebula-page .rcg-order-st.warn { background: rgba(250,157,59,.22); color: #ffd08a; }
.modal-page.wl-nebula-page .rcg-order-st.bad { background: rgba(250,81,81,.22); color: #ffb0b0; }
.modal-page.wl-nebula-page .rcg-tip,
.modal-page.wl-nebula-page .muted,
.modal-page.wl-nebula-page .empty-tip { color: rgba(255,255,255,.82) !important; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.modal-page.wl-nebula-page .cell-body { color: #fff; font-weight: 600; }
.modal-page.wl-nebula-page .lq-cell-body { color: #fff !important; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.45); }
.modal-page.wl-nebula-page .lq-cell-arrow { color: rgba(255,255,255,.75) !important; }
.modal-page.wl-nebula-page .lq-tip { color: rgba(255,255,255,.82) !important; }
.modal-page.wl-nebula-page .rcg-orders-page > .muted { color: rgba(255,255,255,.82) !important; font-size: 13px; line-height: 1.65; padding: 12px 16px 0 !important; }
.modal-page.wl-nebula-page .lq-cell + .lq-cell { border-top: 1px solid rgba(255,255,255,.18); }

/* 充值记录 */
.rcg-orders-page { padding-bottom: 28px; }
.rcg-orders-list { padding: 10px 12px 20px; display: flex; flex-direction: column; gap: 10px; }
.rcg-order-card {
  background: var(--bg-list);
  border-radius: 12px;
  padding: 14px 14px 12px;
}
.rcg-order-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rcg-order-amt {
  font-size: 20px;
  font-weight: 650;
  color: var(--text-strong);
}
.rcg-order-st {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(127,127,127,.12);
  color: var(--text3);
}
.rcg-order-st.ok { background: rgba(7,193,96,.12); color: #07c160; }
.rcg-order-st.warn { background: rgba(250,157,59,.15); color: #d48806; }
.rcg-order-st.bad { background: rgba(250,81,81,.12); color: #fa5151; }
.rcg-order-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text3);
  line-height: 1.55;
}
.rcg-order-left { color: #26a17b; font-weight: 600; }
.rcg-order-left.over { color: #fa5151; }
.rcg-order-oid {
  margin-top: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  word-break: break-all;
}
.rcg-order-oid code {
  flex: 1;
  font-size: 11px;
  color: var(--text-strong);
}
.rcg-order-acts {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rcg-mini-btn {
  border: none;
  background: rgba(7,193,96,.12);
  color: #07c160;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.rcg-mini-btn.cs { background: rgba(87,107,149,.12); color: #576b95; }
.rcg-mini-btn.pay { background: #26a17b; color: #fff; }
.rcg-addr-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 6px;
}
.rcg-addr-row .rcg-addr-input { flex: 1; min-width: 0; overflow-x: auto; }
.rcg-scan-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  background: #26a17b;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.rcg-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 10px auto 8px;
  width: 100%;
}
.rcg-qr-img {
  width: 196px;
  height: 196px;
  max-width: 70vw;
  background: #fff;
  padding: 8px;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
}
.rcg-countdown {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(38,161,123,.1);
  color: #26a17b;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.rcg-countdown.over {
  background: rgba(250,81,81,.1);
  color: #fa5151;
}
.rcg-submit.ghost { color: #fff; }

/* 充值页 */
.rcg-page { padding: 12px 16px 28px; max-width: 520px; margin: 0 auto; }
.rcg-bal { color: var(--text3); font-size: 13px; margin-bottom: 12px; }
.rcg-bal b { color: var(--text-strong); font-weight: 600; }
.rcg-card {
  background: var(--bg-elev); border-radius: 12px; padding: 16px 16px 14px;
}
.rcg-label { color: var(--text3); font-size: 13px; margin-bottom: 8px; }
.rcg-amt-row { display: flex; align-items: baseline; gap: 6px; }
.rcg-yen { font-size: 28px; font-weight: 600; color: var(--text-strong); }
.rcg-input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-size: 36px; font-weight: 600; color: var(--text-strong); padding: 0;
  -moz-appearance: textfield;
}
.rcg-input::-webkit-outer-spin-button,
.rcg-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rcg-quick {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px;
}
.rcg-q {
  height: 36px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 14px; cursor: pointer;
}
.rcg-q.on {
  border-color: #07c160; color: #07c160; background: rgba(7,193,96,.12); font-weight: 600;
}
.rcg-sec-title {
  margin: 20px 0 10px; color: var(--text3); font-size: 13px;
}
.rcg-channels { display: flex; flex-direction: column; gap: 8px; }
.rcg-ch {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-elev); border-radius: 12px; padding: 12px 14px;
  border: 1.5px solid transparent; cursor: pointer;
}
.rcg-ch.on { border-color: #07c160; }
.rcg-ch-ico {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #2a2a2a; color: #eee; font-size: 16px; font-weight: 700;
}
.rcg-ch[data-id="e_cny"] .rcg-ch-ico { background: #c9352b; color: #fff; }
.rcg-ch[data-id="usdt_trc20"] .rcg-ch-ico { background: #26a17b; color: #fff; }
.rcg-ch[data-id="unionpay"] .rcg-ch-ico { background: #1a5fb4; color: #fff; font-size: 13px; }
.rcg-ch-body { flex: 1; min-width: 0; }
.rcg-ch-name { color: var(--text-strong); font-size: 15px; display: flex; align-items: center; gap: 6px; }
.rcg-ch-name small {
  font-size: 10px; padding: 1px 5px; border-radius: 4px;
  background: rgba(38,161,123,.2); color: #3ecf9a; font-weight: 600;
}
.rcg-ch-desc { color: var(--text3); font-size: 12px; margin-top: 2px; }
.rcg-ch-ck {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #555;
  color: transparent; display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.rcg-ch.on .rcg-ch-ck {
  background: #07c160; border-color: #07c160; color: #fff;
}
.rcg-usdt {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: rgba(38,161,123,.1); color: #9ad4c0; font-size: 13px;
}
.rcg-usdt-rate { opacity: .9; }
.rcg-usdt-pay { margin-top: 6px; color: var(--text-strong); font-size: 15px; }
.rcg-usdt-pay b { color: #26a17b; font-size: 18px; }
.rcg-usdt-warn { margin-top: 6px; font-size: 12px; color: #fa9d3b; line-height: 1.45; }
.rcg-usdt-addr { margin-top: 8px; font-size: 12px; word-break: break-all; }
.rcg-submit {
  width: 100%; height: 48px; margin-top: 22px; border: 0; border-radius: 10px;
  background: #07c160; color: #fff; font-size: 17px; font-weight: 500; cursor: pointer;
}
.rcg-submit.usdt { background: #26a17b; }
.rcg-submit.usdt:active { background: #1f8a68; }
.rcg-submit:active { background: #06ad56; }
.rcg-submit:disabled { opacity: .55; cursor: default; }
.rcg-tip {
  margin-top: 14px; text-align: center; color: var(--text4); font-size: 12px; line-height: 1.5;
}

/* USDT 图标：立体 Logo 图（存款/汇款/账单统一） */
.usdt-logo {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: none;
  overflow: hidden;
}
.usdt-logo .usdt-logo-img,
.usdt-logo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.usdt-logo svg { display: none; }
.usdt-logo.sm { width: 28px; height: 28px; border-radius: 6px; }
.usdt-logo.xs { width: 22px; height: 22px; border-radius: 5px; margin-right: 10px; }
.usdt-logo.lg {
  width: 48px; height: 48px; border-radius: 10px;
  margin: 0 auto 12px; display: flex;
}
.rcg-pay-usdt-hd .usdt-logo { width: 40px; height: 40px; border-radius: 9px; }
.cell .usdt-logo.xs { display: inline-flex; vertical-align: middle; }
.rcg-sheet-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 600; margin-bottom: 12px;
}
.rcg-pay-usdt {
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-list);
  border: 1px solid rgba(38, 161, 123, .28);
  box-shadow: 0 8px 22px rgba(38, 161, 123, .08);
}
.rcg-pay-usdt-hd {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 10px;
}
.rcg-pay-usdt-meta { flex: 1; min-width: 0; }
.rcg-pay-usdt-name {
  color: var(--text-strong); font-size: 16px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.rcg-pay-usdt-name small {
  font-size: 10px; padding: 2px 6px; border-radius: 999px;
  background: rgba(38,161,123,.16); color: #26a17b; font-weight: 700;
}
.rcg-pay-usdt-desc { color: var(--text3); font-size: 12px; margin-top: 3px; }
.rcg-pay-usdt-tag {
  flex-shrink: 0; font-size: 11px; color: #26a17b; font-weight: 600;
  padding: 4px 8px; border-radius: 999px; background: rgba(38,161,123,.12);
}
.rcg-pay-usdt .rcg-usdt {
  margin: 0 10px 12px; border-radius: 10px;
}
.rcg-q.on {
  border-color: #26a17b; color: #26a17b; background: rgba(38,161,123,.12); font-weight: 600;
}
.usdt-tx-list { background: var(--bg-list); }
.usdt-tx-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.usdt-tx-main { flex: 1; min-width: 0; }
.usdt-tx-item .t-note { color: var(--text-strong); font-size: 14px; }
.usdt-tx-item .t-time { color: var(--text4); font-size: 12px; margin-top: 4px; }
.usdt-tx-item .t-amt { flex-shrink: 0; font-weight: 600; }
.usdt-tx-item .t-amt.out { color: var(--text-strong); }
.rcg-sheet-mask {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.rcg-sheet {
  width: 100%; max-width: 480px;
  background: var(--panel, #1e1e1e);
  color: var(--text-strong, #fff);
  border-radius: 16px 16px 0 0;
  padding: 18px 16px 28px;
  max-height: 90vh; overflow: auto;
}
.rcg-sheet-row { font-size: 15px; margin: 4px 0; }
.rcg-usdt-hl {
  color: #26a17b;
  font-size: 20px;
  cursor: pointer;
  user-select: all;
  -webkit-tap-highlight-color: transparent;
}
.rcg-addr-box {
  margin-top: 6px; padding: 12px; border-radius: 10px;
  background: rgba(38,161,123,.12); word-break: break-all;
  font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.45;
  cursor: pointer;
}
.rcg-sheet-close {
  display: block; width: 100%; margin-top: 14px; padding: 12px;
  border: none; border-radius: 8px; background: transparent;
  color: var(--text3, #999); font-size: 15px;
}
.rcg-proof input.rcg-input {
  box-sizing: border-box; width: 100%; padding: 8px 10px;
  border: 1px solid var(--border, #333); border-radius: 8px;
  background: transparent; color: inherit;
}
body.light .rcg-sheet { background: #fff; color: #111; }
body.light .rcg-addr-box { background: #eefaf4; }
body.light .rcg-ch-ico { background: #eee; color: #333; }
body.light .rcg-ch[data-id="e_cny"] .rcg-ch-ico { background: #c9352b; color: #fff; }
body.light .rcg-ch[data-id="usdt_trc20"] .rcg-ch-ico { background: #26a17b; color: #fff; }
body.light .rcg-ch[data-id="unionpay"] .rcg-ch-ico { background: #1a5fb4; color: #fff; }
body.light .rcg-usdt { background: #eef8f3; color: #3d6b5c; }
body.light .rcg-pay-usdt { background: #fff; border-color: rgba(38,161,123,.22); }
body.light .rcg-pay-usdt-name small { background: rgba(38,161,123,.12); }
.tx-item { display: flex; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.tx-item .t-note { color: var(--text); }
.tx-item .t-time { color: var(--text4); font-size: 12px; margin-top: 4px; }
.tx-item .t-amt { font-size: 17px; }
.tx-item .t-amt.in { color: #e8b34b; }
.tx-item .t-amt.out { color: var(--text); }

/* —— 账单列表 / 详情：与余额同款星空背景 + 玻璃卡片 + 红绿金额 —— */
.modal-page.fl-bill-page {
  background: #0a0618 !important;
  color: #fff;
  z-index: 50;
  overflow: hidden;
}
.modal-page.fl-bill-page > .wl-nebula-bg { z-index: 0; }
.fl-bill-nav {
  position: relative;
  z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  box-sizing: border-box;
  height: calc(48px + var(--sat));
  padding: var(--sat) 6px 0;
  flex-shrink: 0;
  background: transparent;
  border-bottom: none;
}
.fl-bill-x, .fl-bill-more {
  width: 48px; height: 48px; border: 0; background: transparent;
  color: #fff; font-size: 28px; line-height: 48px; cursor: pointer;
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.fl-bill-more {
  width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center; line-height: 0;
}
.fl-bill-more.light,
.fl-bill-x.light { color: #fff; }
.fl-bill-more .fl-ico,
.fl-bill-more i[data-icon],
.fl-bill-more svg {
  display: block; width: 22px; height: 22px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
}
.fl-bill-title {
  flex: 1; text-align: center; font-size: 17px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.fl-bill-nav-spacer { width: 48px; flex-shrink: 0; }
.fl-bill-tools {
  position: relative;
  z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 12px; flex-shrink: 0;
  background: transparent;
}
.fl-bill-filter, .fl-bill-to-stats {
  border: 0; background: transparent; color: rgba(255,255,255,.88);
  font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; padding: 4px 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.fl-bill-to-stats {
  color: #9ecbff; margin-left: auto; font-weight: 700;
}
.fl-bill-search { flex: 1; min-width: 0; }
.fl-bill-search input {
  width: 100%; box-sizing: border-box; height: 34px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 10px; padding: 0 12px;
  background: rgba(12, 8, 28, .42); color: #fff; font-size: 13px; font-weight: 500; outline: none;
}
.fl-bill-search input::placeholder { color: rgba(255,255,255,.45); }
.fl-bill-scroll {
  position: relative;
  z-index: 1;
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: transparent;
  padding: 0 12px 16px;
}
.fl-bill-empty {
  text-align: center; color: rgba(255,255,255,.78); padding: 80px 20px;
  font-size: 14px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.fl-bill-empty-wrap {
  min-height: 60%;
  background: transparent;
}
.fl-bill-empty-wrap .fl-bill-empty {
  padding: 120px 20px 80px;
  color: rgba(255,255,255,.78);
  font-size: 15px; font-weight: 600;
}
.fl-bill-empty-hd {
  background: transparent;
  margin-bottom: 8px;
}
.fl-bill-month {
  background: transparent;
  margin-bottom: 14px;
}
.fl-bill-month:last-child { margin-bottom: 0; }
.fl-bill-month.collapsed .fl-bill-month-body { display: none; }
.fl-bill-month-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 10px 6px 10px; gap: 10px;
  background: transparent;
}
.fl-bill-month-lab {
  border: 0; background: transparent; color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; gap: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.fl-bill-month-sum {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; white-space: nowrap; font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.fl-bill-month-sum .out { color: #ff6b6b; }
.fl-bill-month-sum .in { color: #5dff9a; }
.fl-bill-month-body {
  background: rgba(12, 8, 28, .42);
  border: 2px solid rgba(255, 255, 255, .48);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .22);
  overflow: hidden;
}
.fl-bill-month-body .fl-bill-row + .fl-bill-row {
  border-top: 1px solid rgba(255,255,255,.12);
}
/* 账单年月选择（微信式滚轮） */
.fl-bill-pick-mask {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.fl-bill-pick {
  width: 100%;
  background: var(--bg-list);
  border-radius: 14px 14px 0 0;
  padding-bottom: calc(12px + var(--sab));
  overflow: hidden;
}
.fl-bill-pick-tabs {
  display: flex; justify-content: center; gap: 36px;
  padding: 16px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.fl-bill-pick-tabs button {
  border: 0; background: transparent; color: var(--text3);
  font-size: 16px; padding: 6px 4px 10px; cursor: pointer; position: relative;
}
.fl-bill-pick-tabs button.on {
  color: var(--text-strong); font-weight: 600;
}
.fl-bill-pick-tabs button.on::after {
  content: '';
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 28px; height: 3px; border-radius: 2px; background: #07c160;
}
.fl-bill-pick-pane { padding: 8px 0 4px; }
.fl-bill-pick-pane.hidden { display: none; }
.fl-bill-wheels {
  position: relative;
  display: flex; height: 200px;
  margin: 0 12px;
  overflow: hidden;
}
.fl-bill-wheel {
  flex: 1; min-width: 0;
  height: 200px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.fl-bill-wheel::-webkit-scrollbar { display: none; }
.fl-bill-wheel-pad { height: 80px; flex-shrink: 0; }
.fl-bill-wheel-item {
  height: 40px; line-height: 40px; text-align: center;
  font-size: 17px; color: var(--text3);
  scroll-snap-align: center;
}
.fl-bill-wheel-item.on { color: var(--text-strong); font-weight: 600; font-size: 18px; }
.fl-bill-wheel-hl {
  pointer-events: none;
  position: absolute; left: 8px; right: 8px; top: 50%;
  height: 40px; margin-top: -20px;
  background: rgba(128,128,128,.12);
  border-radius: 8px;
  z-index: 0;
}
.fl-bill-wheels .fl-bill-wheel { position: relative; z-index: 1; }
.fl-bill-range-tip {
  text-align: center; color: var(--text3); font-size: 12px;
  padding: 0 16px 4px;
}
.fl-bill-pick-actions {
  display: flex; gap: 12px; padding: 14px 16px 4px;
}
.fl-bill-pick-actions button {
  flex: 1; height: 46px; border: 0; border-radius: 8px;
  font-size: 16px; cursor: pointer;
}
.fl-bill-pick-actions .bp-cancel {
  background: var(--press); color: var(--text-strong);
}
.fl-bill-pick-actions .bp-ok {
  background: #07c160; color: #fff; font-weight: 600;
}
.fl-bill-pick-actions .bp-ok:active,
.fl-bill-pick-actions .bp-cancel:active { opacity: .88; }
body.light .fl-bill-wheel-hl { background: rgba(0,0,0,.06); }

.fl-bill-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px; cursor: pointer;
}
.fl-bill-row:active { background: rgba(255,255,255,.08); }
.fl-bill-ico {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 700; flex-shrink: 0;
  background: rgba(255,255,255,.12);
}
.fl-bill-ico.lg { width: 48px; height: 48px; font-size: 18px; margin: 0 auto 12px; }
img.fl-bill-ico-img {
  width: 42px; height: 42px;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0;
  box-shadow: none !important;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  background: transparent !important;
  padding: 0;
  margin: 0;
  -webkit-mask-image: none;
}
img.fl-bill-ico-img.lg,
.fl-bill-detail-hero img.fl-bill-ico-img {
  width: 54px; height: 54px;
  margin: 0 auto 12px;
  border-radius: 0 !important;
  background: transparent !important;
}
.fl-bill-row .usdt-logo,
.fl-bill-stats-row .usdt-logo {
  width: 40px; height: 40px;
  border-radius: 6px;
}
.fl-bill-detail-hero .usdt-logo.lg {
  width: 48px; height: 48px;
  border-radius: 8px;
}
.fl-bill-av, img.fl-bill-av, .fl-bill-av.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff;
}
.fl-bill-av.lg, img.fl-bill-av.lg, .fl-bill-detail-hero .fl-bill-av {
  width: 48px; height: 48px; font-size: 18px; margin: 0 auto 12px;
}
.fl-bill-main { flex: 1; min-width: 0; }
.fl-bill-name {
  color: #fff; font-size: 15px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.fl-bill-time {
  color: rgba(255,255,255,.62); font-size: 12px; margin-top: 4px; font-weight: 500;
}
.fl-bill-amt {
  font-size: 17px; font-weight: 800; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.fl-bill-amt.in { color: #5dff9a; }
.fl-bill-amt.out { color: #ff6b6b; }

/* 账单详情 */
.fl-bill-detail-page { background: #0a0618 !important; }
.fl-bill-detail-body {
  position: relative; z-index: 1;
  flex: 1; overflow-y: auto; background: transparent;
  padding: 0 12px 24px;
}
.fl-bill-detail-hero {
  text-align: center; padding: 20px 16px 22px;
  margin-bottom: 12px;
  background: rgba(12, 8, 28, .42);
  border: 2px solid rgba(255, 255, 255, .48);
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .22);
}
.fl-bill-detail-name {
  color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 10px;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.fl-bill-detail-amt {
  font-size: 40px; font-weight: 800; letter-spacing: .5px; color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.fl-bill-detail-amt.in { color: #5dff9a; }
.fl-bill-detail-amt.out { color: #ff6b6b; }
.fl-bill-detail-fields {
  margin: 0; padding: 4px 0;
  background: rgba(12, 8, 28, .42);
  border: 2px solid rgba(255, 255, 255, .48);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .22);
  overflow: hidden;
}
.fl-bill-field {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 14px 16px; font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.62); border-bottom: 1px solid rgba(255,255,255,.12);
}
.fl-bill-field:last-child { border-bottom: 0; }
.fl-bill-field > span:last-child {
  color: #fff; text-align: right; max-width: 68%; font-weight: 700;
  word-break: break-all; line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.fl-bill-field .mono { font-size: 12px; letter-spacing: .2px; font-weight: 600; }
.fl-bill-field-link { cursor: pointer; }
.fl-bill-field-link .link { color: #9ecbff; font-weight: 700; }
.fl-bill-detail-foot {
  text-align: center; color: rgba(255,255,255,.5); font-size: 12px; font-weight: 500;
  padding: 24px 16px 16px;
}

/* 收支统计 — 与余额同款星空背景 + 玻璃卡片，金额红绿高对比 */
.modal-page.fl-bill-stats-page {
  background: #0a0618 !important;
  z-index: 55;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-page.fl-bill-stats-page > .wl-nebula-bg { z-index: 0; }
.fl-bill-stats-nav {
  position: relative;
  z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  box-sizing: border-box;
  height: calc(48px + var(--sat));
  padding: var(--sat) 6px 0;
  flex-shrink: 0;
  background: transparent;
}
.fl-bill-stats-body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fl-bill-stats-tabs {
  display: flex; align-items: center; gap: 22px;
}
.fl-bill-stats-tabs button {
  border: 0; background: transparent; color: rgba(255,255,255,.72);
  font-size: 16px; font-weight: 600; padding: 6px 0; cursor: pointer; position: relative;
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.fl-bill-stats-tabs button.on {
  color: #fff; font-weight: 800;
}
.fl-bill-stats-tabs button.on::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: 22px; height: 3px; margin-left: -11px;
  background: #fff; border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.fl-bill-stats-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 8px; gap: 10px;
}
.fl-bill-stats-period {
  border: 0; background: transparent; color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer; padding: 4px 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.fl-bill-stats-sides {
  display: inline-flex;
  background: rgba(12, 8, 28, .42);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px; padding: 3px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fl-bill-stats-sides button {
  border: 0; background: transparent; color: rgba(255,255,255,.82);
  font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer;
}
.fl-bill-stats-sides button.on {
  background: rgba(255,255,255,.95);
  color: #1a1230;
  font-weight: 800;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.fl-bill-stats-sum { padding: 8px 18px 16px; }
.fl-bill-stats-sum-tip {
  font-size: 13px; color: rgba(255,255,255,.9);
  font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.fl-bill-stats-sum-num {
  font-size: 40px; font-weight: 800; margin-top: 8px; letter-spacing: .5px;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.45);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.fl-bill-stats-sum-num.is-out {
  color: #ff6b6b;
  text-shadow: 0 2px 10px rgba(0,0,0,.5), 0 0 18px rgba(255,80,80,.25);
}
.fl-bill-stats-sum-num.is-in {
  color: #5dff9a;
  text-shadow: 0 2px 10px rgba(0,0,0,.5), 0 0 18px rgba(80,255,140,.22);
}
.fl-bill-stats-sum-num.is-other {
  color: #fff;
}
.fl-bill-stats-panel {
  flex: 1; overflow-y: auto; min-height: 280px;
  margin: 0 12px 12px;
  padding: 18px 16px 28px;
  color: #fff;
  border-radius: 18px;
  background: rgba(12, 8, 28, .42);
  border: 2px solid rgba(255, 255, 255, .48);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .22);
  -webkit-overflow-scrolling: touch;
}
.fl-bill-stats-compose-title {
  font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 16px;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.fl-bill-bar { margin-bottom: 16px; }
.fl-bill-bar-lab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 14px; color: rgba(255,255,255,.92); margin-bottom: 8px; font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.fl-bill-bar-lab b {
  font-weight: 800; font-variant-numeric: tabular-nums;
  font-size: 15px;
}
.fl-bill-bar-lab .in { color: #5dff9a; }
.fl-bill-bar-lab .out { color: #ff6b6b; }
.fl-bill-bar-track {
  height: 10px; background: rgba(255,255,255,.16); border-radius: 5px; overflow: hidden;
}
.fl-bill-bar-track i {
  display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, #ff6b6b, #ff8f6b);
}
.fl-bill-stats-bars.tone-in .fl-bill-bar-track i {
  background: linear-gradient(90deg, #1ecf6a, #5dff9a);
}
.fl-bill-stats-empty {
  text-align: center; color: rgba(255,255,255,.78); padding: 70px 20px 40px;
  font-size: 14px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.fl-bill-stats-empty-ico {
  width: 64px; height: 64px; margin: 0 auto 14px;
  border-radius: 50%; background: rgba(255,255,255,.1); color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.fl-bill-stats-list { display: flex; flex-direction: column; gap: 0; }
.fl-bill-stats-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 15px;
  color: rgba(255,255,255,.92); font-weight: 600;
}
.fl-bill-stats-row:last-child { border-bottom: 0; }
.fl-bill-stats-row-name { min-width: 0; flex: 1; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.fl-bill-stats-row .in {
  color: #5dff9a; font-weight: 800; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.fl-bill-stats-row .out {
  color: #ff6b6b; font-weight: 800; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* 表单页面通用 */
.form-page-body { flex: 1; overflow-y: auto; }
.legal-frame {
  width: 100%; height: 100%; min-height: calc(100vh - 56px - var(--sat));
  border: 0; background: #0b0907; display: block;
}
.legal-about-hero {
  padding: 28px 20px 18px; text-align: center; background: var(--bg-list);
}
.legal-about-logo {
  width: 84px; height: 84px; border-radius: 0; margin: 0 auto 12px;
  object-fit: contain; display: block; background: transparent;
}
.legal-about-name { font-size: 20px; font-weight: 600; color: var(--text-strong); }
.legal-about-ver { margin-top: 6px; font-size: 13px; color: var(--text3); }
.legal-about-tip {
  padding: 12px 16px 4px; font-size: 12px; color: var(--text4); line-height: 1.5;
}
.fp-row { display: flex; align-items: center; padding: 14px 16px; background: var(--bg-list); border-bottom: 1px solid var(--border); }
.fp-row label { width: 90px; color: var(--text2); flex-shrink: 0; }
.fp-row input { flex: 1; background: transparent; border: 0; color: var(--text-strong); outline: none; font-size: 15px; }
.prof-qr-ico { display: inline-flex; align-items: center; color: var(--text3); }
.list .cell .avatar.sm { width: 44px; height: 44px; border-radius: 6px; }
.fp-check { display: flex; align-items: center; padding: 12px 16px; background: var(--bg-list); border-bottom: 1px solid var(--border); gap: 12px; cursor: pointer; }
.fp-check .avatar { width: 40px; height: 40px; font-size: 15px; }
.fp-check .ck { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--text4); flex-shrink: 0; }
.fp-check.on .ck { background: #07c160; border-color: #07c160; position: relative; }
.fp-check.on .ck::after { content: "✓"; color: #fff; font-size: 13px; position: absolute; left: 3px; top: 0px; }
.fp-submit { margin: 20px 16px; }

/* 朋友圈：封面态沉浸顶栏（下滑后变白底显示标题） */
.modal-page.mo-page > .nav-bar.mo-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  background: transparent; border-bottom-color: transparent;
  transition: background .18s ease, border-color .18s ease;
}
.modal-page.mo-page > .nav-bar.mo-nav .nav-title {
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
  color: var(--text-strong);
}
.modal-page.mo-page > .nav-bar.mo-nav .nav-back {
  width: 56px;
  font-size: 36px;
  line-height: 48px;
  font-weight: 300;
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.modal-page.mo-page > .nav-bar.mo-nav .mo-nav-cam,
.modal-page.mo-page > .nav-bar.mo-nav .um-nav-btn {
  width: 40px; height: 40px; margin-right: 2px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; border: 0; background: transparent; padding: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 30;
  touch-action: manipulation;
  pointer-events: auto;
}
.modal-page.mo-page > .nav-bar.mo-nav .mo-nav-cam svg,
.modal-page.mo-page > .nav-bar.mo-nav .um-nav-btn svg { width: 22px; height: 22px; display: block; }
.modal-page.mo-page > .nav-bar.mo-nav .mo-nav-cam:active,
.modal-page.mo-page > .nav-bar.mo-nav .um-nav-btn:active { opacity: .75; }
.modal-page.mo-page > .nav-bar.mo-nav.is-solid {
  background: var(--bg-list);
  border-bottom: 1px solid var(--border);
}
.modal-page.mo-page > .nav-bar.mo-nav.is-solid .nav-title { opacity: 1; pointer-events: auto; }
.modal-page.mo-page > .nav-bar.mo-nav.is-solid .nav-back {
  color: var(--text-strong);
  filter: none;
}
.modal-page.mo-page > .nav-bar.mo-nav.is-solid .mo-nav-cam,
.modal-page.mo-page > .nav-bar.mo-nav.is-solid .um-nav-btn {
  color: var(--text-strong);
  filter: none;
}
.um-nav-right {
  display: flex !important;
  align-items: center;
  gap: 2px;
  width: auto !important;
  min-width: 0;
  padding-right: 6px;
}
.modal-page.mo-page > .form-page-body { background: var(--bg-list); }

/* 朋友圈封面：加高竖向比例，object-fit:cover 拉满 */
.mo-cover {
  position: relative;
  z-index: 4;
  width: 100%;
  height: auto;
  /* 头像只探出一小截，整体更靠上（仿微信） */
  margin-bottom: 40px;
  cursor: pointer;
  overflow: visible;
  background: transparent;
}
.mo-cover-blur {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(52px + var(--sat));
  z-index: 5;
  pointer-events: none;
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  background: var(--mo-blur-tint, rgba(40, 40, 40, .28));
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, visibility .12s ease;
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
/* 只有真正下拉时才显示 blur，平时顶部完全不糊 */
.mo-cover.is-pulling .mo-cover-blur {
  opacity: 1;
  visibility: visible;
}
.mo-cover-media {
  position: relative;
  z-index: 0;
  width: 100%;
  /* 宽:高 = 3:3.2 */
  aspect-ratio: 3 / 3.2;
  min-height: 280px;
  max-height: 62vh;
  overflow: hidden;
  line-height: 0;
  background: var(--press);
  transform-origin: center top;
  will-change: transform, height;
}
.mo-cover-fill {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.mo-cover-me {
  position: absolute;
  right: 14px;
  /* 头像框整体上移：约 1/4 压在白底上 */
  bottom: -16px;
  z-index: 8;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: auto;
}
.mo-cover-name {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.65);
  /* 名字再靠上，贴头像上沿 */
  margin-top: 2px;
  line-height: 1.2;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mo-cover-me .avatar {
  /* 白边框：封面上清晰可见 */
  border: 2px solid #fff !important;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
  width: 64px;
  height: 64px;
  font-size: 26px;
}
.mo-cam, .mo-back { z-index: 6; }
/* 封面全图预览 */
.mo-cover-full {
  position: fixed; inset: 0; z-index: 280;
  background: #111;
  display: flex; flex-direction: column;
  padding-top: var(--sat);
  padding-bottom: var(--sab);
  overflow: hidden;
}
.mo-cover-full-stage {
  position: relative;
  z-index: 1;
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.mo-cover-full-media {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}
.mo-cover-full-change {
  position: absolute;
  right: 18px;
  bottom: calc(28px + var(--sab));
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: transparent; border: 0; padding: 8px;
  color: #fff; cursor: pointer;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  -webkit-tap-highlight-color: transparent;
}
.mo-cover-full-change svg {
  width: 28px; height: 28px; display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.mo-cover-full-change span { font-size: 12px; letter-spacing: .5px; }
.mo-cover-full-change:active { opacity: .75; }
.mo-cam {
  position: absolute; top: calc(8px + var(--sat)); right: 12px;
  width: 40px; height: 40px; border-radius: 0; background: transparent;
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3; padding: 0; border: 0;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.mo-cam svg { width: 26px; height: 26px; display: block; }
.mo-cam:active { opacity: .75; }
.mo-back { position: absolute; top: calc(8px + var(--sat)); left: 12px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,.35); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; z-index: 3; }
.mo-item { display: flex; gap: 12px; padding: 16px 14px 6px; border-bottom: 1px solid var(--bg-soft); }
#mo-list { position: relative; z-index: 1; }
/* 个人头像全屏页（微信同款） */
.modal-page.my-av-page {
  background: #000;
}
.modal-page.my-av-page > .nav-bar.my-av-nav {
  background: #000;
  border-bottom: none;
  flex-shrink: 0;
}
.modal-page.my-av-page > .nav-bar.my-av-nav .nav-back,
.modal-page.my-av-page > .nav-bar.my-av-nav .nav-title,
.modal-page.my-av-page > .nav-bar.my-av-nav .nav-right {
  color: #fff;
}
.modal-page.my-av-page > .nav-bar.my-av-nav .nav-right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  cursor: pointer;
}
.modal-page.my-av-page > .nav-bar.my-av-nav .nav-right .my-av-more,
.modal-page.my-av-page > .nav-bar.my-av-nav .nav-right .my-av-more .fl-ico,
.modal-page.my-av-page > .nav-bar.my-av-nav .nav-right .my-av-more i[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #fff;
  letter-spacing: 0 !important;
  font-size: 0;
}
.modal-page.my-av-page > .nav-bar.my-av-nav .nav-right .my-av-more svg {
  width: 22px;
  height: 22px;
  display: block;
}
.modal-page.my-av-page > .form-page-body.my-av-body {
  position: relative;
  flex: 1;
  min-height: 0;
  height: 0; /* 强制吃满导航下方剩余高度，避免子元素 height:100% 塌缩 */
  padding: 0;
  margin: 0;
  background: #000;
  overflow: hidden;
}
.my-av-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.my-av-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  background: #000;
  -webkit-user-drag: none;
  user-select: none;
}
.my-av-letter {
  width: min(100vw, 100%);
  max-width: 100%;
  aspect-ratio: 1;
  height: auto !important;
  border-radius: 0 !important;
  font-size: clamp(64px, 22vw, 120px) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* 头像 / 封面：全屏拖动选区（仿微信） */
body.img-crop-open { overflow: hidden; }
.img-crop-mask {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  display: flex;
  flex-direction: column;
  touch-action: none;
  padding-top: var(--sat);
}
.img-crop-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.img-crop-img {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform;
}
.img-crop-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.img-crop-hole {
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.58);
  border: 1px solid rgba(255,255,255,.9);
}
.img-crop-mask.is-avatar .img-crop-hole {
  width: min(88vw, 360px);
  height: min(88vw, 360px);
}
.img-crop-mask.is-cover .img-crop-hole {
  width: 100vw;
  max-width: 100%;
  height: min(72vh, calc(100vw * 3.2 / 3));
}
.img-crop-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.38), rgba(255,255,255,.38)) 33.33% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(255,255,255,.38), rgba(255,255,255,.38)) 66.66% 0 / 1px 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.38), rgba(255,255,255,.38)) 0 33.33% / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.38), rgba(255,255,255,.38)) 0 66.66% / 100% 1px no-repeat;
}
.img-crop-corners span {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: #fff;
  border-style: solid;
  pointer-events: none;
}
.img-crop-corners span:nth-child(1) { top: -1px; left: -1px; border-width: 3px 0 0 3px; }
.img-crop-corners span:nth-child(2) { top: -1px; right: -1px; border-width: 3px 3px 0 0; }
.img-crop-corners span:nth-child(3) { bottom: -1px; left: -1px; border-width: 0 0 3px 3px; }
.img-crop-corners span:nth-child(4) { bottom: -1px; right: -1px; border-width: 0 3px 3px 0; }
.img-crop-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255,255,255,.75);
  font-size: 15px;
  z-index: 4;
  pointer-events: none;
}
.img-crop-loading.hidden { display: none; }
.img-crop-cover-me {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
}
.img-crop-cover-name {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.65);
  margin-top: 2px;
  line-height: 1.2;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.img-crop-cover-me .avatar {
  border: 2px solid #fff !important;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
  width: 64px;
  height: 64px;
  font-size: 26px;
}
.img-crop-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px calc(12px + var(--sab));
  background: #111;
  z-index: 6;
}
.img-crop-foot button {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 17px;
  padding: 10px 6px;
  cursor: pointer;
  min-width: 52px;
}
.img-crop-foot .img-crop-reset {
  flex: 1;
  text-align: center;
  color: rgba(255,255,255,.92);
}
.img-crop-foot .img-crop-done {
  text-align: right;
  font-weight: 500;
}
.img-crop-foot button:active { opacity: .75; }

/* 资料页朋友圈预览缩略图 */
.fp-av { display: inline-flex; line-height: 0; cursor: pointer; }
.fp-av:active { opacity: .85; }
.fp-mo-preview {
  display: flex !important;
  align-items: center;
  gap: 4px;
  margin-right: 2px;
  max-width: 148px;
  overflow: hidden;
}
.fp-mo-thumb {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--press);
}
.fp-mo-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.fp-mo-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-style: normal;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  pointer-events: none;
}

/* 个人朋友圈时间线 */
.um-feed { min-height: 100%; background: var(--bg-list); }
.um-avatar { cursor: pointer; display: inline-flex; line-height: 0; }
.um-year {
  padding: 18px 16px 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-strong);
}
.um-item {
  display: flex;
  gap: 14px;
  padding: 12px 16px 14px;
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
}
.um-item-today-cam { border-bottom: none; }
.um-date {
  width: 52px;
  flex-shrink: 0;
  line-height: 1.15;
}
.um-date-empty { visibility: hidden; }
.um-date-today {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
}
.um-date-m {
  font-size: 13px;
  color: var(--text-strong);
  font-weight: 500;
}
.um-date-d {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-strong);
  margin-top: 1px;
}
.um-body { flex: 1; min-width: 0; }
.um-media { margin-top: 4px; }
.um-media .mo-grid.mo-multi { margin-left: 0; margin-right: auto; }
.um-text {
  color: var(--text-strong);
  font-size: 15.5px;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
  margin-bottom: 8px;
}
.um-thumbs {
  display: grid;
  gap: 3px;
  max-width: 260px;
}
.um-thumbs.um-n1 { grid-template-columns: 1fr; max-width: 260px; }
.um-thumbs.um-n1.um-1text { max-width: 220px; }
.um-thumbs.um-n1.um-1text .um-thumb {
  width: 220px;
  height: auto;
  aspect-ratio: unset;
  background: transparent;
}
.um-thumbs.um-n1.um-1text .um-thumb img,
.um-thumbs.um-n1.um-1text .um-thumb video {
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
}
.um-thumbs.um-multi.um-n2 { grid-template-columns: repeat(2, 100px); max-width: none; margin-left: auto; margin-right: auto; }
.um-thumbs.um-multi.um-n3 { grid-template-columns: repeat(3, 100px); max-width: none; margin-left: auto; margin-right: auto; }
.um-thumbs.um-multi .um-thumb {
  width: 100px;
  height: 100px;
  aspect-ratio: unset;
  background: transparent;
}
.um-thumbs.um-n2 { grid-template-columns: 1fr 1fr; }
.um-thumbs.um-n3 { grid-template-columns: 1fr 1fr 1fr; }
.um-thumb {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
}
.um-thumb img, .um-thumb video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.um-thumb-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-style: normal;
  background: rgba(0,0,0,.18);
  pointer-events: none;
}
.um-vis { margin-top: 0; font-size: 13px; opacity: .45; }
.um-pin {
  font-size: 11px;
  line-height: 1;
  color: #576b95;
  border: 1px solid rgba(87, 107, 149, .45);
  border-radius: 3px;
  padding: 3px 5px;
  flex-shrink: 0;
}
.um-item.is-pinned .um-date-day,
.um-item.is-pinned .um-date-today { color: #576b95; }
.um-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  min-height: 22px;
}
.um-detail-btn {
  border: 0;
  background: transparent;
  color: #576b95;
  font-size: 13px;
  padding: 0;
  cursor: pointer;
  line-height: 1.2;
}
.um-detail-btn:active { opacity: .7; }

/* 朋友圈详情页 */
.modal-page.md-detail-page {
  background: var(--bg-list);
}
.modal-page.md-detail-page > .form-page-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--bg-list);
}
.md-page {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 20px;
  -webkit-overflow-scrolling: touch;
}
.md-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.md-av { cursor: pointer; line-height: 0; }
.md-name {
  font-size: 16px;
  font-weight: 600;
  color: #576b95;
  cursor: pointer;
}
.md-text {
  color: var(--text-strong);
  font-size: calc(15.5px * var(--fs-scale, 1));
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 4px 0 10px;
}
.md-text.md-text-below {
  margin: 8px 0 10px;
}
.md-media { margin: 6px 0 0; }
.md-media .mo-grid { margin: 0; }
/* 详情图与朋友圈列表同款尺寸，点击再全屏 */
.md-mention {
  color: var(--text3);
  font-size: 13px;
  margin: 6px 0 4px;
}
.md-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 12px;
}
.md-time { color: var(--text4); font-size: 12.5px; }
.md-foot-acts { display: flex; align-items: center; gap: 10px; }
.md-del {
  width: 28px; height: 28px;
  border: 0; background: transparent;
  color: #576b95; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.md-del svg { width: 18px; height: 18px; display: block; }
.md-more {
  width: 32px; height: 22px;
  border: 0; border-radius: 3px;
  background: #f7f7f7;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; padding: 0;
}
body:not(.light) .md-more { background: #2c2c2e; }
.md-more i {
  width: 4px; height: 4px; border-radius: 50%;
  background: #576b95; display: block;
}
.md-social {
  background: #f7f7f7;
  border-radius: 4px;
  padding: 8px 10px 10px;
  margin-top: 4px;
}
body:not(.light) .md-social { background: #1c1c1e; }
.md-likes, .md-comments {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.md-likes { padding-bottom: 8px; }
.md-comments { padding-top: 8px; border-top: 1px solid rgba(0,0,0,.06); }
body:not(.light) .md-comments { border-top-color: rgba(255,255,255,.08); }
.md-likes + .md-comments { /* keep */ }
.md-ico {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  color: #576b95;
  font-size: 14px;
  line-height: 22px;
}
.md-ico.md-heart {
  color: #1E73FE;
  font-weight: 700;
}
.md-like-avs {
  display: flex; flex-wrap: wrap; gap: 6px;
  flex: 1; min-width: 0;
}
.md-like-av { cursor: pointer; line-height: 0; }
.md-like-av .avatar.sm,
.md-cmt-av .avatar.sm {
  width: 28px !important;
  height: 28px !important;
  font-size: 12px !important;
  border-radius: 4px;
}
.md-cmt-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.md-cmt { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.md-cmt-av { flex-shrink: 0; line-height: 0; }
.md-cmt-body { flex: 1; min-width: 0; }
.md-cmt-top {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  font-size: 14px; line-height: 1.35;
}
.md-cmt-name { color: #576b95; cursor: pointer; font-weight: 500; }
.md-cmt-time {
  margin-left: auto;
  color: var(--text4);
  font-size: 11.5px;
  white-space: nowrap;
}
.md-cmt-text {
  color: var(--text-strong);
  font-size: 14.5px;
  line-height: 1.4;
  margin-top: 2px;
  word-break: break-word;
}
.md-private-tip {
  text-align: center;
  color: var(--text4);
  font-size: 12.5px;
  margin: 28px 16px 10px;
  position: relative;
}
.md-private-tip::before,
.md-private-tip::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 18%;
  height: 1px;
  background: var(--border);
}
.md-private-tip::before { left: 0; }
.md-private-tip::after { right: 0; }
.md-composer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px calc(8px + var(--sab));
  background: var(--bg-elev, #f5f5f5);
  border-top: 1px solid var(--border);
}
.md-composer input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 6px;
  background: var(--bg-list, #fff);
  padding: 10px 12px;
  font-size: 15px;
  color: var(--text-strong);
  outline: none;
}
.md-cmt-send {
  border: 0;
  background: #07c160;
  color: #fff;
  border-radius: 6px;
  padding: 9px 14px;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.md-cmt-send:active { opacity: .85; }

.mo-img-preview-detail {
  position: absolute;
  right: 16px;
  bottom: calc(16px + var(--sab));
  z-index: 3;
  border: 0;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.mo-img-preview-detail:active { opacity: .8; }

.um-cam-tile {
  width: 72px; height: 72px;
  border: 0; border-radius: 4px;
  background: #f0f0f0;
  color: #c0c0c0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
body:not(.light) .um-cam-tile { background: #2a2a2a; color: #666; }
.um-cam-tile svg { width: 28px; height: 28px; }
.um-cam-tile:active { opacity: .8; }

/* 朋友圈相册 */
.mo-alb-page .form-page-body { background: var(--bg-list); }
.mo-alb-body { padding: 8px 0 28px; }
.mo-alb-year {
  padding: 16px 16px 8px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-strong);
}
.mo-alb-row {
  display: flex;
  gap: 12px;
  padding: 8px 12px 14px 16px;
  align-items: flex-start;
}
.mo-alb-month {
  width: 40px;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
  padding-top: 4px;
}
.mo-alb-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  min-width: 0;
}
.mo-alb-cell {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--press);
  cursor: pointer;
}
.mo-alb-cell img, .mo-alb-cell video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* 全部互动消息 */
.mo-nt-list { background: var(--bg-list); min-height: 100%; }
.mo-nt-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mo-nt-item:active { background: var(--press); }
.mo-nt-av { flex-shrink: 0; }
.mo-nt-main { flex: 1; min-width: 0; }
.mo-nt-arrow {
  flex-shrink: 0;
  color: var(--text4);
  font-size: 18px;
  line-height: 1.2;
  padding-top: 2px;
}
.mo-nt-line {
  color: var(--text-strong);
  font-size: 15px;
  line-height: 1.45;
  word-break: break-word;
}
.mo-nt-name {
  color: #576b95;
  cursor: pointer;
}
.mo-nt-name:active { opacity: .75; }
.mo-nt-act { color: var(--text-strong); }
.mo-nt-txt { color: var(--text-strong); }
.mo-nt-time {
  margin-top: 6px;
  color: var(--text4);
  font-size: 12px;
}

.mo-img-preview {
  position: fixed; inset: 0; z-index: 280;
  background: #000;
  display: block;
  padding: 0;
  margin: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.mo-pv-track-wrap {
  width: 100%; height: 100%;
  overflow: hidden;
}
.mo-pv-track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.mo-pv-track.mo-pv-dragging { cursor: grabbing; }
.mo-pv-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--sat) 0 calc(28px + var(--sab));
  overflow: hidden;
}
.mo-pv-zoom {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  will-change: transform;
  touch-action: none;
}
.mo-pv-slide.is-zoomed .mo-img-preview-media {
  max-width: none;
  max-height: none;
}
.mo-img-preview-stage {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sat) 0 var(--sab);
  box-sizing: border-box;
}
.mo-img-preview-media {
  display: block;
  max-width: 100vw;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* 预览层铺满可视区，不额外限制尺寸 */
.mo-pv-slide .mo-img-preview-media,
.mo-img-preview-stage .mo-img-preview-media {
  max-width: 100vw;
  max-height: 100%;
}
.mo-pv-dots {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(10px + var(--sab));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
}
.mo-pv-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.38);
  transition: transform .15s ease, background .15s ease;
}
.mo-pv-dot.on {
  background: rgba(255,255,255,.95);
  transform: scale(1.15);
}
.mo-img-preview-count {
  position: absolute;
  left: 50%;
  bottom: calc(18px + var(--sab));
  transform: translateX(-50%);
  color: rgba(255,255,255,.88);
  font-size: 13px;
  letter-spacing: .5px;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  pointer-events: none;
  z-index: 2;
}
.mo-img-preview .mo-pv-actions {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(36px + var(--sab));
  z-index: 3;
  pointer-events: auto;
}
.mo-img-preview.has-chat-acts .mo-img-preview-count {
  top: calc(14px + var(--sat));
  bottom: auto;
}
.mo-img-preview .mo-cover-full-blur { display: none; }
.mo-body { flex: 1; min-width: 0; }
.mo-avatar { flex-shrink: 0; cursor: pointer; display: inline-flex; line-height: 0; }
.mo-avatar:active { opacity: .85; }
.mo-name { color: #7085b3; font-size: calc(16px * var(--fs-scale)); font-weight: 600; cursor: pointer; width: fit-content; max-width: 100%; }
.mo-name:active { opacity: .75; }
.mo-text { color: var(--text-strong); margin: 6px 0; line-height: 1.5; word-break: break-word; user-select: text; white-space: pre-wrap; font-size: calc(15.5px * var(--fs-scale)); }
/* 单图无文字：260×290；单图+文字 mo-1text：220×260；多图 mo-multi：190×190 */
.mo-photo-fill {
  position: relative;
  overflow: hidden;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  width: fit-content;
  max-width: min(260px, 75vw);
  line-height: 0;
  height: auto;
  padding-bottom: 0;
  aspect-ratio: unset;
}
.mo-photo-fill img {
  position: static;
  width: auto;
  max-width: min(260px, 75vw);
  max-height: min(290px, 52vh);
  height: auto;
  object-fit: unset;
  object-position: center;
  display: block;
  border-radius: 2px;
  vertical-align: top;
}
.mo-grid.g1.mo-1text,
.mo-grid.g1.mo-1text .mo-photo-fill {
  max-width: 220px;
}
.mo-grid.g1.mo-1text .mo-photo-fill img {
  max-width: 220px;
  max-height: 260px;
}
/* 单图无文字：260×290；单图+文字 mo-1text：220×260；多图 mo-multi：100×100，每行最多3张居中 */
.mo-grid { display: grid; gap: 3px; margin: 6px 0; }
.mo-grid.g1 { display: block; width: fit-content; max-width: min(260px, 75vw); }
.mo-grid.mo-multi {
  width: fit-content;
  max-width: none;
}
.mo-grid.mo-multi.g2 {
  grid-template-columns: repeat(2, 100px);
}
.mo-grid.mo-multi.g3 {
  grid-template-columns: repeat(3, 100px);
}
.mo-grid.mo-multi .mo-cell {
  width: 100px;
  height: 100px;
  aspect-ratio: 1;
  padding-bottom: 0;
}
.mo-cell {
  position: relative; width: 100%; overflow: hidden;
  border-radius: 2px; background: transparent;
  height: 0; padding-bottom: 100%; aspect-ratio: 1;
}
@supports (aspect-ratio: 1 / 1) {
  .mo-cell { height: auto; padding-bottom: 0; }
}
.mo-cell img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; cursor: pointer; display: block;
}
.mo-video { width: min(180px, 62%); max-height: 240px; border-radius: 4px; background: #000; }
.mo-video-card {
  position: relative;
  width: min(180px, 62%);
  max-width: 180px;
  margin: 6px 0;
  border-radius: 4px;
  overflow: hidden;
  background: #111;
  cursor: pointer;
  aspect-ratio: 3 / 4;
  max-height: 240px;
}
.mo-video-card .mo-video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #111;
  pointer-events: none;
}
.mo-video-card .mo-video-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  padding-left: 3px;
  pointer-events: none;
}
.mo-video-card:active { opacity: .92; }
.mo-foot { display: flex; align-items: center; margin: 4px 0 8px; position: relative; gap: 0; }
.mo-time {
  color: var(--text4); font-size: 12.5px; flex: 1; min-width: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px;
  line-height: 1.4;
}
.mo-time-t { color: var(--text4); }
.mo-time-loc {
  color: #576b95; font-size: 12.5px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mo-del {
  color: #576b95; margin-right: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px; flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.mo-del svg { width: 16px; height: 16px; display: block; }
.mo-del:active { opacity: .65; }
.mo-deleted-tip {
  text-align: center;
  padding: 14px 16px 6px;
  font-size: 13px;
  color: var(--text4);
  line-height: 1.5;
}
.mo-reedit {
  color: #576b95;
  cursor: pointer;
  margin-left: 4px;
}
.mo-reedit:active { opacity: .7; }
.mo-more {
  width: 32px; height: 22px; border-radius: 4px; border: 0; cursor: pointer;
  background: var(--press); color: #576b95; display: inline-flex; align-items: center; justify-content: center;
  gap: 4px; padding: 0; flex-shrink: 0; position: relative; z-index: 2;
}
.mo-more i {
  width: 3.5px; height: 3.5px; border-radius: 50%; background: currentColor; display: block;
}
.mo-more:active { opacity: .75; }
.mo-pop {
  position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
  z-index: 20; display: flex; align-items: stretch;
  background: #4c4c4c; border-radius: 6px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.25); min-width: 168px;
}
.mo-pop button {
  flex: 1; border: 0; background: transparent; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; font-size: 14px; white-space: nowrap;
}
.mo-pop button + button { border-left: 1px solid rgba(255,255,255,.18); }
.mo-pop button:active { background: rgba(255,255,255,.1); }
.mo-pop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mo-pop button[data-act="like"].is-liked { color: #1E73FE; }
.mo-pop button[data-act="like"].is-liked svg {
  fill: #1E73FE;
  stroke: #1E73FE;
}
.mo-actions { display: none; }
.mo-social { background: var(--bg-soft); border-radius: 5px; margin-bottom: 10px; overflow: hidden; }
.mo-likes { padding: 7px 10px; color: #7085b3; font-size: 13.5px; border-bottom: 1px solid var(--border); line-height: 1.55; }
.mo-like-heart {
  margin-right: 4px;
  color: #1E73FE;
  font-weight: 700;
}
.mo-like-name { color: #576b95; cursor: pointer; }
.mo-like-name:active { opacity: .7; }
.mo-mention {
  margin-top: 4px; color: var(--text3); font-size: 12.5px;
}
.mo-comment { padding: 6px 10px; color: var(--text); font-size: calc(13.5px * var(--fs-scale)); cursor: pointer; border-radius: 4px; }
.mo-comment:active { background: rgba(128, 128, 128, .18); }
.mo-comment b { color: #7085b3; font-weight: 500; cursor: pointer; }
.mo-msg-bar { margin: 10px auto; width: fit-content; max-width: 80%; background: #4c5b8f; color: #fff;
  font-size: 14px; padding: 8px 18px; border-radius: 6px; cursor: pointer; text-align: center; }
.badge.dot { min-width: 10px; width: 10px; height: 10px; border-radius: 50%; padding: 0; font-size: 0; }
.tab-badge.dot { left: calc(50% + 10px); top: 5px; }
.mo-cmt-input { display: flex; gap: 8px; padding: 8px 10px; }
.mo-cmt-input input { flex: 1; background: var(--bg-elev); border: 0; border-radius: 5px; padding: 7px 10px; color: var(--text-strong); font-size: 14px; }

.mo-refresh-tip { display: none !important; }

/* 朋友圈发布页 */
.pub-text { width: 100%; background: transparent; border: 0; color: var(--text-strong); font-size: 16.5px; resize: none; min-height: 110px; padding: 16px; outline: none; }
.pub-opts { margin-top: 8px; }
.pub-opt {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--bg-list); border-bottom: 1px solid var(--border); cursor: pointer;
}
.pub-opt:first-child { border-top: 1px solid var(--border); }
.pub-opt:active { background: var(--press); }
.pub-opt-ico {
  width: 22px; height: 22px; flex-shrink: 0; color: var(--text2);
  display: inline-flex; align-items: center; justify-content: center;
}
.pub-opt-ico svg { width: 20px; height: 20px; }
.pub-opt-body { flex: 1; min-width: 0; color: var(--text-strong); font-size: 16px; }
.pub-opt-note {
  color: var(--text3); font-size: 14px; max-width: 46%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; margin-right: 4px;
}
.pub-opt-arrow { color: var(--text4); font-size: 18px; flex-shrink: 0; }
.mo-pub-done {
  border: 0; background: #07c160; color: #fff; border-radius: 5px;
  padding: 5px 12px; font-size: 14px; cursor: pointer; margin-right: 8px;
}
.mo-pub-done:disabled { background: #c6c6c6; color: #fff; cursor: default; }
body.light .mo-pub-done:disabled { background: #d8d8d8; color: #f5f5f5; }
.mo-nav-cancel {
  width: auto !important;
  min-width: 56px;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 16px !important;
  font-weight: 400;
  padding: 0 12px !important;
  color: var(--text-strong);
  line-height: 48px;
  cursor: pointer;
  text-align: left;
}
.mo-loc-page .search-fake, .mo-pick-search {
  margin: 8px 12px; background: var(--bg-elev); border-radius: 8px;
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
}
.mo-pick-search input {
  flex: 1; border: 0; outline: none; background: transparent; color: var(--text-strong); font-size: 15px;
}
.mo-loc-none { color: #576b95 !important; }
.mo-loc-city {
  padding: 8px 16px; color: var(--text3); font-size: 13px; background: var(--bg);
}
.mo-loc-row .cell-body { min-width: 0; }
.mo-loc-name { font-size: 16px; color: var(--text-strong); }
.mo-loc-sub { font-size: 12.5px; color: var(--text3); margin-top: 3px; line-height: 1.35; }
.mo-vis-check { color: #07c160; font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.mo-vis-page {
  background: var(--bg-list);
  min-height: 100%;
}
.mo-vis-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.mo-vis-row:active { background: var(--press); }
.mo-vis-body { flex: 1; min-width: 0; }
.mo-vis-title { font-size: 17px; color: var(--text-strong); line-height: 1.3; }
.mo-vis-desc { margin-top: 3px; font-size: 12.5px; color: var(--text3); line-height: 1.35; }
.mo-vis-chevron {
  color: var(--text4);
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.mo-vis-sub {
  padding: 4px 16px 12px 50px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-list);
}
.mo-vis-link { padding: 10px 0; cursor: pointer; }
.mo-vis-link + .mo-vis-link { border-top: 1px solid var(--border); }
.mo-vis-link-title { color: #576b95; font-size: 16px; line-height: 1.35; }
.mo-vis-link-desc { margin-top: 4px; color: var(--text3); font-size: 12.5px; line-height: 1.4; }
.mo-vis-link:active { opacity: .75; }
.mo-friend-pick .cell { gap: 12px; }
.mo-friend-check {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--text4);
  flex-shrink: 0; box-sizing: border-box;
}
.mo-friend-check.on {
  border-color: #07c160; background: #07c160;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.2 17.2L4.5 12.5l1.4-1.4 3.3 3.3 8.1-8.1 1.4 1.4z'/%3E%3C/svg%3E");
  background-size: 14px 14px; background-repeat: no-repeat; background-position: center;
}
.mo-pick-foot {
  position: sticky; bottom: 0; padding: 10px 16px calc(10px + var(--sab));
  background: var(--bg-list); border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end;
}
.pub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 16px; }
.pub-grid .pg-cell { position: relative; aspect-ratio: 1; cursor: pointer; }
.pub-grid img, .pub-grid video { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.pub-grid .pg-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.45);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; padding-left: 2px; pointer-events: none;
}
.pub-grid .pg-del { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; background: #fa5151; color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; }
.pub-add { aspect-ratio: 1; border: 1.5px dashed var(--text4); border-radius: 4px; display: flex; align-items: center; justify-content: center;
  color: var(--text4); font-size: 34px; cursor: pointer; }

/* 语音录制浮层（仿微信：波形 + 取消/转文字 + 松开发送） */
.rec-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.45); display: flex; flex-direction: column; touch-action: none; user-select: none; -webkit-user-select: none; }
.rec-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; }
.rec-bubble { background: #07c160; border-radius: 12px; padding: 18px 28px; min-width: 160px; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.rec-overlay.is-cancel .rec-bubble { background: #fa5151; }
.rec-overlay.is-text .rec-bubble { background: #576b95; }
.rec-wave { display: flex; align-items: flex-end; gap: 4px; height: 36px; }
.rec-wave i { display: block; width: 4px; border-radius: 2px; background: rgba(255,255,255,.9); animation: recBar 0.9s ease-in-out infinite; }
.rec-wave i:nth-child(1) { height: 12px; animation-delay: 0s; }
.rec-wave i:nth-child(2) { height: 22px; animation-delay: .1s; }
.rec-wave i:nth-child(3) { height: 30px; animation-delay: .2s; }
.rec-wave i:nth-child(4) { height: 18px; animation-delay: .3s; }
.rec-wave i:nth-child(5) { height: 28px; animation-delay: .15s; }
.rec-wave i:nth-child(6) { height: 14px; animation-delay: .25s; }
.rec-wave i:nth-child(7) { height: 24px; animation-delay: .05s; }
@keyframes recBar { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
.rec-timer { color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; opacity: .95; }
.rec-tip { color: #ddd; font-size: 14px; }
.rec-bottom { padding: 0 16px calc(18px + var(--sab)); display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.rec-side { background: rgba(40,40,40,.92); color: #ccc; text-align: center; padding: 14px 10px; border-radius: 12px; font-size: 14px; }
.rec-overlay.is-cancel .rec-cancel { background: #fa5151; color: #fff; }
.rec-overlay.is-text .rec-totext { background: #576b95; color: #fff; }
.rec-hold-area { grid-column: 1 / -1; background: rgba(70,70,70,.95); border-radius: 18px 18px 0 0; padding: 22px 16px 28px; text-align: center; margin: 4px -16px -18px; }
.rec-hold-tip { color: #fff; font-size: 16px; letter-spacing: 1px; }
.switch { width: 50px; height: 30px; border-radius: 15px; background: var(--bg-elev2); position: relative;
  transition: background .2s; cursor: pointer; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; top: 2px; left: 2px; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch.on { background: #07c160; }
.switch.on::after { left: 22px; }

/* 群聊天信息页（仿微信） */
.gi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px 6px; padding: 16px 10px 12px; }
.gi-member { text-align: center; cursor: pointer; min-width: 0; }
.gi-av, .gi-member .avatar { width: 52px; height: 52px; border-radius: 6px; margin: 0 auto; font-size: 20px; }
.gi-name { margin-top: 6px; font-size: 12px; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.gi-tag { margin-top: 2px; font-size: 11px; color: #fa9d3b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.gi-add-box {
  width: 52px; height: 52px; margin: 0 auto; border-radius: 6px; box-sizing: border-box;
  border: 1.5px dashed var(--text4); color: var(--text3); font-size: 28px; line-height: 48px;
  display: flex; align-items: center; justify-content: center;
}
.gi-add:active .gi-add-box { background: var(--press); }
.gi-remove-box {
  width: 52px; height: 52px; margin: 0 auto; border-radius: 6px; box-sizing: border-box;
  border: 1.5px dashed var(--text4); color: var(--text3); font-size: 28px; line-height: 48px;
  display: flex; align-items: center; justify-content: center;
}
.gi-remove:active .gi-remove-box { background: var(--press); }
.gi-remove.gi-remove-on .gi-remove-box {
  border-color: #fa5151; color: #fa5151; background: rgba(250, 81, 81, .08);
}
.gi-av-wrap { position: relative; width: 52px; margin: 0 auto; }
.gi-kick-badge {
  display: none; position: absolute; top: -5px; right: -5px;
  width: 18px; height: 18px; border-radius: 50%; background: #fa5151; color: #fff;
  font-size: 16px; line-height: 16px; text-align: center; font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); pointer-events: none;
}
.gi-kick-mode .gi-member.gi-kickable .gi-kick-badge { display: block; }
.gi-kick-mode .gi-member.gi-kickable .gi-av-wrap::after {
  content: ''; position: absolute; inset: 0; border-radius: 6px;
  background: rgba(0,0,0,.12); pointer-events: none;
}
.gi-more {
  grid-column: 1 / -1; text-align: center; color: var(--text2); font-size: 14px;
  padding: 8px 0 4px; cursor: pointer;
}
.gi-qr-ico {
  width: 18px; height: 18px; margin-right: 6px; flex-shrink: 0;
  background:
    linear-gradient(var(--text2), var(--text2)) 0 0 / 7px 7px no-repeat,
    linear-gradient(var(--text2), var(--text2)) 11px 0 / 7px 7px no-repeat,
    linear-gradient(var(--text2), var(--text2)) 0 11px / 7px 7px no-repeat,
    linear-gradient(var(--text2), var(--text2)) 11px 11px / 3px 3px no-repeat,
    linear-gradient(var(--text2), var(--text2)) 15px 11px / 3px 3px no-repeat,
    linear-gradient(var(--text2), var(--text2)) 11px 15px / 3px 3px no-repeat;
  opacity: .85;
}
.gi-leave { justify-content: center; }
.gi-leave .cell-body { flex: none; color: #fa5151; text-align: center; }
.gi-nav-search { font-size: 22px; color: var(--text-strong); padding: 0 4px; cursor: pointer; line-height: 1; }

/* @ 提醒选择 */
.msg-at { color: #576b95; }
.at-mask { align-items: flex-end; }
.at-sheet {
  width: 100%; max-height: 78vh; background: var(--bg-elevated, #1e1e1e);
  border-radius: 12px 12px 0 0; display: flex; flex-direction: column;
  color: var(--text-strong); overflow: hidden;
}
body.light .at-sheet { background: #f7f7f7; }
.at-head {
  display: grid; grid-template-columns: 56px 1fr 56px; align-items: center;
  padding: 12px 8px 8px; flex-shrink: 0;
}
.at-close { font-size: 22px; text-align: center; cursor: pointer; color: var(--text); line-height: 1; padding: 4px; }
.at-title { text-align: center; font-size: 16px; font-weight: 600; }
.at-multi { text-align: center; font-size: 15px; color: #576b95; cursor: pointer; padding: 4px; }
.at-multi.on { font-weight: 600; }
.at-search-wrap { padding: 0 12px 10px; flex-shrink: 0; }
.at-search {
  width: 100%; box-sizing: border-box; border: none; outline: none;
  border-radius: 8px; padding: 9px 12px; font-size: 15px;
  background: var(--bg, #2c2c2c); color: var(--text-strong);
}
body.light .at-search { background: #e8e8e8; }
.at-list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 24px; }
.at-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  cursor: pointer; border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
}
.at-row:active { background: var(--press, rgba(255,255,255,.06)); }
.at-av, .at-row .avatar { width: 40px; height: 40px; border-radius: 4px; flex-shrink: 0; font-size: 16px; }
.at-all {
  display: flex; align-items: center; justify-content: center;
  background: #07c160; color: #fff; font-weight: 700;
}
.at-name { flex: 1; min-width: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-sub { margin-left: 6px; color: #fa9d3b; font-size: 13px; }
.at-ck {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #888;
  flex-shrink: 0; box-sizing: border-box;
}
.at-ck.on { background: #07c160; border-color: #07c160; position: relative; }
.at-ck.on::after {
  content: ''; position: absolute; left: 6px; top: 3px;
  width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.at-empty { text-align: center; color: var(--text-dim, #888); padding: 40px 16px; font-size: 14px; }

/* 字体大小设置（仿微信） */
.fs-page { background: var(--bg); }
.fs-nav {
  height: calc(48px + var(--sat)); padding: var(--sat) 12px 0; display: flex; align-items: center;
  background: var(--bg); flex-shrink: 0;
}
.fs-nav-cancel { color: var(--text-strong); font-size: 16px; padding: 8px 10px; cursor: pointer; min-width: 56px; }
.fs-nav-title { flex: 1; text-align: center; color: var(--text-strong); font-size: 17px; font-weight: 500; }
.fs-nav-done {
  background: #07c160; color: #fff; border: 0; border-radius: 6px; font-size: 15px;
  padding: 6px 14px; cursor: pointer; min-width: 56px;
}
.fs-preview {
  flex: 1; overflow-y: auto; padding: 28px 12px 20px; display: flex; flex-direction: column; gap: 14px;
}
.fs-row { display: flex; align-items: flex-start; gap: 10px; }
.fs-row.me { flex-direction: row-reverse; }
.fs-row:not(.me) { flex-direction: row; }
.fs-row .avatar { width: 40px; height: 40px; border-radius: 4px; flex-shrink: 0; }
.fs-bubble {
  max-width: 72%; padding: 10px 12px; border-radius: 6px; line-height: 1.45; word-break: break-word;
  font-size: calc(16px * var(--fs-preview-scale, var(--fs-scale))); background: #ffffff; color: #121212;
}
.fs-row.me .fs-bubble { background: #95ec69; color: #121212; }
.fs-sys-av {
  width: 40px; height: 40px; border-radius: 4px; background: #2f7d4a; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.fs-slider-wrap {
  flex-shrink: 0; background: var(--bg-list); padding: 8px 18px calc(22px + var(--sab));
  border-top: 1px solid var(--border);
}
.fs-slider-labels {
  position: relative; height: 22px; margin: 0 28px 2px;
}
.fs-slider-std {
  position: absolute; left: calc(100% / 6 * 1); transform: translateX(-50%);
  color: var(--text2); font-size: 12px; white-space: nowrap;
}
.fs-slider-row {
  display: flex; align-items: center; gap: 10px;
}
.fs-a-sm { font-size: 14px; color: var(--text2); width: 18px; text-align: center; }
.fs-a-lg { font-size: 22px; color: var(--text-strong); width: 22px; text-align: center; font-weight: 500; }
.fs-track {
  position: relative; flex: 1; height: 44px; touch-action: none; user-select: none;
}
.fs-track-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: var(--bg-elev2); border-radius: 1px;
}
.fs-ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.fs-ticks i {
  width: 2px; height: 10px; background: var(--bg-elev2); border-radius: 1px; display: block;
}
.fs-thumb {
  position: absolute; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
  left: 0; transition: left .05s linear;
}
body.light .fs-thumb { border: 1px solid #ddd; }
body.light .fs-row.me .fs-bubble { background: #95ec69; }

/* Toast / 系统提示：统一灰色（所有 ui.toast / showLoading） */
:root {
  --sys-toast-bg: rgba(120, 120, 120, .94);
}
#toast {
  position: fixed;
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 20000;
  background: var(--sys-toast-bg) !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18) !important;
  color: #fff !important;
  text-shadow: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  display: none;
  max-width: 78%;
  text-align: center;
  pointer-events: none;
  white-space: normal;
}
body.light #toast,
body:not(.light) #toast {
  background: var(--sys-toast-bg) !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18) !important;
  color: #fff !important;
  font-weight: 400;
}

/* 加载中方框（正在生成…）同样灰色 */
#toast-loading {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 118px;
  min-height: 118px;
  padding: 18px 14px 16px;
  border-radius: 10px;
  background: var(--sys-toast-bg) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18) !important;
  pointer-events: none;
}
.toast-loading-spin {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, .22);
  border-top-color: #fff;
  border-radius: 50%;
  animation: toast-loading-spin .75s linear infinite;
}
.toast-loading-txt {
  margin-top: 12px;
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}
@keyframes toast-loading-spin {
  to { transform: rotate(360deg); }
}
img.qr-pending {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* 登录欢迎语：截图同款亮蓝 + 灰影，加粗居中拉满、无底板 */
#starry-welcome {
  position: fixed;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  width: auto;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  -webkit-text-stroke: 0;
  filter: none;
  /* 取样自用户截图：#1E73FE / #2678EB */
  color: #1E73FE;
  text-shadow:
    0 1px 0 rgba(90, 90, 90, 0.28),
    0 1px 2px rgba(70, 70, 70, 0.35),
    0 2px 4px rgba(60, 60, 60, 0.22);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  display: none;
  overflow: visible;
}
#starry-welcome.show { display: block; }
body.light #starry-welcome {
  color: #1E73FE;
  text-shadow:
    0 1px 0 rgba(90, 90, 90, 0.28),
    0 1px 2px rgba(70, 70, 70, 0.35),
    0 2px 4px rgba(60, 60, 60, 0.22);
  background: transparent !important;
  box-shadow: none !important;
}

/* 呼叫预留界面 */
.call-screen { position: fixed; inset: 0; z-index: 70; background: linear-gradient(180deg,#1b2735,#090a0f); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: var(--text-strong); }
.call-screen .avatar { width: 90px; height: 90px; border-radius: 14px; font-size: 34px; }
.call-hang { width: 64px; height: 64px; border-radius: 50%; background: #fa5151; border: 0; color: #fff; font-size: 26px; cursor: pointer; margin-top: 40px; }
.call-tip { color: var(--text3); font-size: 13px; }

::-webkit-scrollbar { width: 0; height: 0; }

/* ============ 附近的人 ============ */
.nb-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; background: var(--bg-list); }
.nb-item:active { background: var(--press); }
.nb-main { flex: 1; min-width: 0; }
.nb-name { font-size: 16px; color: var(--text-strong); display: flex; align-items: center; gap: 4px; }
.nb-sub { font-size: 12.5px; color: var(--text3); margin-top: 4px; }
.nb-sign { max-width: 38%; font-size: 12px; color: var(--text3); background: var(--bg-elev); border-radius: 6px; padding: 6px 8px; line-height: 1.4; text-align: right; }
.nb-gender { font-size: 13px; }
.nb-gender.male { color: #576b95; }
.nb-gender.female { color: #fa5151; }

/* ============ 扫一扫 ============ */
.scan-wrap {
  position: relative;
  height: calc(100vh - 44px - var(--sat));
  background: #0a0a0a;
  overflow: hidden;
}
#scan-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0a0a0a;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
#scan-video.is-ready { opacity: 1; }
#scan-video::-webkit-media-controls { display: none !important; }
#scan-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
#scan-video::-webkit-media-controls-enclosure { display: none !important; }
.scan-loading {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: rgba(255,255,255,.88); font-size: 15px;
  background: #0a0a0a; pointer-events: none;
}
.scan-loading.hidden { display: none; }
.scan-fail {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; text-align: center;
  background: #121212; color: #eee;
}
.scan-fail.hidden { display: none; }
.scan-fail-title { font-size: 17px; font-weight: 500; }
.scan-fail-desc { font-size: 13px; color: #999; line-height: 1.5; max-width: 280px; }
.scan-fail-btn {
  margin-top: 8px; border: 0; border-radius: 8px; padding: 11px 28px;
  background: #07c160; color: #fff; font-size: 15px; cursor: pointer;
}
.scan-overlay {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; pointer-events: none;
}
.scan-shade-t, .scan-shade-b { flex: 1; background: rgba(0,0,0,.52); min-height: 72px; }
.scan-mid { display: flex; flex-shrink: 0; height: 248px; }
.scan-shade-l, .scan-shade-r { flex: 1; background: rgba(0,0,0,.52); }
.scan-frame {
  position: relative;
  width: 248px; height: 248px; flex-shrink: 0;
  box-sizing: border-box;
}
.scan-frame .c {
  position: absolute; width: 22px; height: 22px;
  border: 3px solid #07c160; pointer-events: none;
}
.scan-frame .c.tl { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.scan-frame .c.tr { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 4px 0 0; }
.scan-frame .c.bl { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 4px; }
.scan-frame .c.br { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }
.scan-line {
  position: absolute; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(7,193,96,.95), transparent);
  box-shadow: 0 0 10px rgba(7,193,96,.55);
  animation: scan-line-move 2.2s ease-in-out infinite;
  top: 12%;
}
@keyframes scan-line-move {
  0% { top: 10%; opacity: .35; }
  50% { opacity: 1; }
  100% { top: 88%; opacity: .35; }
}
.scan-tip {
  color: rgba(255,255,255,.92); font-size: 14px; text-align: center;
  padding: 18px 24px 0; line-height: 1.45;
}
.scan-bar {
  position: absolute; bottom: calc(28px + var(--sab)); left: 0; right: 0;
  display: flex; justify-content: center; gap: 48px; z-index: 5;
}
.scan-btn {
  background: rgba(255,255,255,.14); border: 0; color: #fff;
  font-size: 14px; padding: 10px 22px; border-radius: 20px; cursor: pointer;
}
.scan-btn:active { background: rgba(255,255,255,.22); }
.scan-nav-album {
  color: #07c160; font-size: 15px; padding: 0 10px; cursor: pointer;
  display: flex; align-items: center; height: 100%;
}

/* 聊天拍摄页：轻触拍照 / 长按短视频 */
.cam-capture { position: fixed; inset: 0; z-index: 95; background: #0a0a0a; }
.cam-preview {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: #0a0a0a; opacity: 0; transition: opacity .2s ease;
  /* 禁止系统自带播放按钮（未出画面时像 App 坏了） */
  pointer-events: none;
}
.cam-preview.is-ready { opacity: 1; }
.cam-preview::-webkit-media-controls { display: none !important; }
.cam-preview::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.cam-preview::-webkit-media-controls-enclosure { display: none !important; }
.cam-loading {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: rgba(255,255,255,.88); font-size: 15px;
  background: #0a0a0a; pointer-events: none;
}
.cam-loading.hidden { display: none; }
.cam-loading-spin {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.2); border-top-color: #fff;
  animation: cam-spin .8s linear infinite;
}
@keyframes cam-spin { to { transform: rotate(360deg); } }
.cam-top { position: absolute; inset: calc(12px + var(--sat)) 0 auto 0; padding: 0 14px; display: flex; justify-content: flex-start; z-index: 5; }
.cam-close {
  width: 38px; height: 38px; border: 0; border-radius: 19px; background: rgba(0,0,0,.35);
  color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
}
.cam-focus {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border: 1.5px solid rgba(255,255,255,.9);
  opacity: 0; pointer-events: none; z-index: 3;
  transition: opacity .15s ease, transform .15s ease;
}
.cam-focus.show { opacity: 1; transform: scale(1.05); }
.cam-tip {
  position: absolute; left: 0; right: 0; bottom: calc(146px + var(--sab)); text-align: center;
  color: rgba(255,255,255,.95); font-size: 16px; text-shadow: 0 1px 2px rgba(0,0,0,.35);
  z-index: 4;
}
.cam-bottom {
  position: absolute; left: 0; right: 0; bottom: calc(24px + var(--sab));
  display: flex; align-items: center; justify-content: space-around;
  z-index: 5;
}
.cam-flash, .cam-flip { width: 40px; color: #fff; font-size: 30px; text-align: center; opacity: .9; user-select: none; }
.cam-shutter {
  width: 84px; height: 84px; border-radius: 50%; border: 0; background: rgba(255,255,255,.2);
  padding: 0; position: relative; cursor: pointer;
}
.cam-shutter > span {
  --cam-progress: 0;
  position: absolute; inset: 8px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.35) inset;
}
.cam-shutter.recording > span {
  background:
    conic-gradient(#07c160 calc(var(--cam-progress) * 1turn), rgba(255,255,255,.25) 0),
    radial-gradient(circle at center, #fff 27%, transparent 29%);
}

/* 拍摄后编辑：贴纸 / 文字 / 涂鸦 / 裁剪 / 马赛克 */
.med-editor { position: fixed; inset: 0; z-index: 96; background: #000; display: flex; flex-direction: column; }
.med-editor.med-editor-moment { z-index: 300; }
.med-topbar {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: calc(8px + var(--sat)) 14px 8px; background: rgba(0,0,0,.55); z-index: 4;
}
.med-cancel { border: 0; background: transparent; color: #fff; font-size: 16px; cursor: pointer; }
.med-top-done {
  border: 0; background: #07c160; color: #fff; font-size: 14px; font-weight: 600;
  padding: 6px 14px; border-radius: 4px; cursor: pointer;
}
.med-top-done:disabled { opacity: .45; cursor: default; }
.med-editor-moment .med-toolbar { justify-content: space-evenly; padding-left: 8px; padding-right: 8px; }
.med-history { display: flex; gap: 16px; }
.med-hist-btn {
  border: 0; background: transparent; color: #fff; font-size: 22px; cursor: pointer; opacity: .95;
}
.med-hist-btn:disabled { opacity: .25; cursor: default; }
.med-stage { flex: 1; position: relative; overflow: hidden; background: #000; }
.med-stage img, .med-stage video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.med-vid-el {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; background: #000; z-index: 0;
}
.med-vid-el.is-playing { opacity: 1; }
.med-vid-cover {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  background: #000; z-index: 1; pointer-events: none;
}
.med-vid-cover.hidden { display: none !important; }
/* 隐藏系统大播放钮（录完预览时 WebView 常露出灰底+▶，看起来像坏了） */
.med-stage video::-webkit-media-controls { display: none !important; }
.med-stage video::-webkit-media-controls-enclosure { display: none !important; }
.med-stage video::-webkit-media-controls-panel { display: none !important; }
.med-stage video::-webkit-media-controls-start-playback-button {
  display: none !important; -webkit-appearance: none !important; opacity: 0 !important;
  width: 0 !important; height: 0 !important; pointer-events: none !important;
}
.med-stage video::-webkit-media-controls-overlay-play-button {
  display: none !important; opacity: 0 !important; pointer-events: none !important;
}
.med-vid-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff; font-size: 22px;
  display: none; align-items: center; justify-content: center;
  pointer-events: none; z-index: 2;
}
.med-vid-hint.show { display: flex; }
.med-paint-view { position: absolute; z-index: 2; touch-action: none; pointer-events: none; }
.med-paint-view:not(.hidden) { pointer-events: auto; cursor: crosshair; }
.med-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.med-layer .med-ovl { pointer-events: auto; }
.med-ovl { position: absolute; pointer-events: auto; touch-action: none; cursor: grab; z-index: 5; }
.med-ovl.on { outline: 2px solid rgba(255,255,255,.92); outline-offset: 4px; border-radius: 4px; }
.med-ovl-x {
  position: absolute; top: -12px; right: -12px; width: 24px; height: 24px; border-radius: 50%;
  border: 0; background: #fa5151; color: #fff; font-size: 16px; line-height: 24px;
  padding: 0; cursor: pointer; z-index: 6; box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.med-stk img { width: 22vw; max-width: 120px; height: auto; display: block; }
.med-emoji .med-em-wrap { display: block; font-size: 48px; line-height: 1; }
.med-emoji .med-em-hd { width: 52px; height: 52px; display: block; }
.med-txt { font-size: 28px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.55); white-space: nowrap; padding: 4px 8px; }
.med-colors-bar {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: rgba(0,0,0,.88); overflow-x: auto;
}
.med-colors-bar i {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; cursor: pointer; border: 2px solid transparent;
}
.med-colors-bar i.on { border-color: #fff; transform: scale(1.08); }
.med-eraser {
  width: 32px; height: 32px; border: 0; border-radius: 50%; background: #333; color: #fff;
  font-size: 16px; flex-shrink: 0; cursor: pointer;
}
.med-eraser.on { outline: 2px solid #07c160; }
.med-toolbar {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  padding: 10px 12px calc(12px + var(--sab)); background: rgba(0,0,0,.82);
}
.med-tool {
  width: 42px; height: 42px; border: 0; border-radius: 8px; background: transparent; color: #fff;
  font-size: 22px; cursor: pointer;
}
.med-tool.on { color: #07c160; }
.med-send {
  margin-left: auto; background: #07c160; color: #fff; border: 0; border-radius: 6px;
  padding: 8px 18px; font-size: 16px; cursor: pointer;
}
.med-crop-page { position: absolute; inset: 0; z-index: 10; background: #000; display: flex; flex-direction: column; }
.med-crop-stage { flex: 1; position: relative; overflow: hidden; }
.med-crop-stage img { width: 100%; height: 100%; object-fit: contain; }
.med-crop-box {
  position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
  touch-action: none;
}
.med-crop-box i {
  position: absolute; width: 22px; height: 22px; border: 3px solid #fff; background: transparent;
}
.med-crop-box .tl { left: -3px; top: -3px; border-right: 0; border-bottom: 0; }
.med-crop-box .tr { right: -3px; top: -3px; border-left: 0; border-bottom: 0; }
.med-crop-box .bl { left: -3px; bottom: -3px; border-right: 0; border-top: 0; }
.med-crop-box .br { right: -3px; bottom: -3px; border-left: 0; border-top: 0; }
.med-crop-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px calc(16px + var(--sab)); background: #000;
}
.med-crop-bar button { border: 0; background: transparent; color: #fff; font-size: 22px; cursor: pointer; }
.med-crop-bar #med-crop-ok { background: #07c160; border-radius: 6px; padding: 6px 16px; font-size: 18px; }
.med-crop-bar #med-crop-reset { font-size: 14px; color: #aaa; }
.med-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 58vh; background: #1f1f1f;
  border-radius: 12px 12px 0 0; overflow: hidden; z-index: 3;
}
.med-sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; color: #ccc; font-size: 14px; }
.med-stk-tabs { display: flex; gap: 8px; }
.med-stk-tab {
  border: 0; background: transparent; color: #888; font-size: 15px; padding: 4px 10px; border-radius: 14px; cursor: pointer;
}
.med-stk-tab.on { background: #333; color: #fff; }
.med-stk-emoji-dock {
  display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto;
}
.med-em-dock-btn {
  width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 20px; cursor: pointer;
}
.med-em-dock-btn.on { background: #333; }
.med-em-grid {
  grid-template-columns: repeat(7, 1fr) !important; gap: 6px !important;
}
.med-em-pick {
  border: 0; background: transparent; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 26px; cursor: pointer; border-radius: 8px; padding: 0;
}
.med-em-pick:active { background: #333; }
.med-em-pick .med-em-hd { width: 28px; height: 28px; }
.med-stk-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 8px 12px 16px;
  max-height: 42vh; overflow-y: auto;
}
.med-stk-pick { aspect-ratio: 1; background: #2a2a2a; border-radius: 8px; overflow: hidden; cursor: pointer; }
.med-stk-pick img { width: 100%; height: 100%; object-fit: cover; }
.med-stk-empty { grid-column: 1 / -1; text-align: center; color: #888; padding: 24px 12px; font-size: 13px; }
.med-text-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #111; }
.med-text-bar input { flex: 1; background: transparent; border: 0; color: #fff; font-size: 16px; }
.med-text-cancel, .med-text-done { border: 0; background: transparent; color: #fff; font-size: 15px; cursor: pointer; }
.med-text-done { background: #07c160; border-radius: 6px; padding: 6px 12px; }
.med-colors { display: flex; gap: 10px; padding: 14px 16px 20px; overflow-x: auto; }
.med-colors i {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; cursor: pointer; border: 2px solid transparent;
}
.med-colors i.on { border-color: #fff; transform: scale(1.08); }
.med-music-search {
  margin: 12px 14px; background: #2c2c2c; border-radius: 18px; padding: 8px 14px; color: #aaa; font-size: 14px;
}
.med-music-list { display: flex; gap: 10px; padding: 0 14px 12px; overflow-x: auto; }
.med-music-card {
  flex-shrink: 0; width: 200px; background: #2c2c2c; border-radius: 10px; padding: 12px; cursor: pointer;
}
.med-music-card.on { outline: 2px solid #07c160; }
.med-music-ico { font-size: 22px; color: #ccc; margin-bottom: 8px; }
.med-music-name { color: #fff; font-size: 14px; }
.med-music-sub { color: #888; font-size: 12px; margin-top: 4px; }
.med-music-toggles { border-top: 1px solid #333; padding: 8px 0 calc(8px + var(--sab)); }
.med-music-toggles label {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; color: #fff; font-size: 15px;
}

/* 微信风格胶片条裁剪 */
.med-trim-page {
  position: absolute; inset: 0; z-index: 20; background: #000;
  display: flex; flex-direction: column;
}
.med-trim-top {
  position: relative; z-index: 30; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(8px + var(--sat)) 14px 8px;
  pointer-events: auto;
}
.med-trim-cancel {
  border: 0; background: transparent; color: #fff; font-size: 16px; cursor: pointer;
  padding: 8px 4px; min-width: 48px; text-align: left;
}
.med-trim-done {
  border: 0; background: #07c160; color: #fff; border-radius: 4px;
  padding: 8px 16px; font-weight: 600; font-size: 15px; cursor: pointer;
  min-width: 64px; pointer-events: auto; position: relative; z-index: 31;
}
.med-trim-stage {
  flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 0;
  padding: 8px 12px; pointer-events: none;
}
.med-trim-stage video {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #000;
  pointer-events: none;
}
.med-trim-foot {
  position: relative; z-index: 25; flex-shrink: 0;
  padding: 8px 12px calc(12px + var(--sab));
  pointer-events: auto;
}
.med-trim-dur {
  text-align: right; color: #fff; font-size: 13px; font-variant-numeric: tabular-nums;
  margin-bottom: 8px; padding-right: 2px;
}
.med-film {
  position: relative; height: 64px; border-radius: 2px;
  touch-action: none; user-select: none; overflow: hidden;
}
.med-film-track {
  display: flex; height: 100%; width: 100%; overflow: hidden; background: #1a1a1a;
}
.med-film-track img, .med-film-ph {
  flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; display: block; background: #222;
}
.med-film-loading {
  flex: 1; display: flex; align-items: center; justify-content: center; color: #888; font-size: 12px;
}
.med-film-dim {
  position: absolute; top: 0; bottom: 0; background: rgba(0,0,0,.5); pointer-events: none; z-index: 1;
}
.med-film-dim.l { left: 0; width: 0; }
.med-film-dim.r { right: 0; width: 0; }
.med-film-sel {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 2px;
  pointer-events: auto;
  background: transparent;
  z-index: 2;
  /* 禁止超大阴影：部分 Android WebView 会把阴影算进点击区域，盖住「完成」 */
  box-shadow: none;
}
.med-film-h {
  position: absolute; top: 0; bottom: 0; width: 22px; background: #fff; cursor: ew-resize;
  display: flex; align-items: center; justify-content: center; z-index: 3;
}
.med-film-h::after {
  content: ''; width: 2px; height: 18px;
  border-left: 2px solid #333; border-right: 2px solid #333;
}
.med-film-h.l { left: -2px; border-radius: 2px 0 0 2px; }
.med-film-h.r { right: -2px; border-radius: 0 2px 2px 0; }
.med-trim-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding: 0 4px;
}
.med-trim-actions .med-trim-cancel { font-size: 16px; }
.med-trim-actions .med-trim-done { font-size: 15px; padding: 10px 22px; }

.med-trim-bar { display: flex; justify-content: space-between; padding: 12px 16px; color: #fff; }
.med-trim-bar button { border: 0; background: transparent; color: #fff; font-size: 16px; cursor: pointer; }
.med-trim-bar #med-trim-done { background: #07c160; border-radius: 6px; padding: 6px 14px; }
.med-trim-preview { padding: 0 16px; }
.med-trim-preview video { width: 100%; max-height: 36vh; background: #000; border-radius: 8px; }
.med-trim-range { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.med-trim-range input[type=range] { width: 100%; }
.med-trim-tip { text-align: center; color: #888; font-size: 13px; padding-bottom: 16px; }

/* ============ 好友资料页 ============ */
.fp-action {
  justify-content: center; color: #5b7ce2; font-size: 16px; font-weight: 500;
  gap: 8px;
}
img.fp-action-ico {
  width: 28px; height: 28px; object-fit: contain; display: block; flex-shrink: 0;
}

.oa-folder-av {
  position: relative;
  overflow: visible !important;
  background: #4a90e2 !important;
  display: flex; align-items: center; justify-content: center;
}
.oa-folder-av img { width: 70%; height: 70%; object-fit: contain; }
.oa-folder-dot {
  position: absolute; top: -2px; right: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fa5151; border: 2px solid var(--bg-list, #fff);
}
.oa-hub { padding-bottom: 24px; }
.oa-hub-toolbar { display: flex; justify-content: flex-end; gap: 8px; padding: 4px 12px 8px; }
.oa-hub-ico {
  width: 36px; height: 36px; border: 0; border-radius: 8px;
  background: var(--bg-elev); color: var(--text-strong); font-size: 18px; cursor: pointer;
}
.oa-hub-feed { padding: 0 12px; display: flex; flex-direction: column; gap: 12px; }
.oa-hub-card {
  background: var(--bg-list); border-radius: 12px; padding: 12px; cursor: pointer;
}
.oa-hub-card-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.oa-hub-card-name { flex: 1; font-weight: 600; color: var(--text-strong); font-size: 14px; }
.oa-hub-card-time { color: var(--text4); font-size: 12px; }
.oa-hub-cover { width: 100%; border-radius: 8px; aspect-ratio: 16/9; object-fit: cover; background: var(--bg-elev); }
.oa-hub-card-title { margin-top: 8px; font-size: 15px; color: var(--text-strong); line-height: 1.45; }

.oa-cat-pick { display: flex; gap: 8px; padding: 8px 16px; }
.oa-cat {
  flex: 1; height: 36px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-list); color: var(--text2); font-size: 14px; cursor: pointer;
}
.oa-cat.on { border-color: #07c160; color: #07c160; background: rgba(7,193,96,.08); }

.oa-wx-page > .page-head, .oa-wx-page .nav-bar { display: none !important; }
.oa-wx { background: #fff; min-height: 100%; color: #111; }
body:not(.light) .oa-wx { background: var(--bg); color: var(--text-strong); }
.oa-wx-nav { display: flex; align-items: center; padding: 8px 8px 0; position: sticky; top: 0; background: inherit; z-index: 2; }
.oa-wx-nav-btn {
  width: 40px; height: 40px; border: 0; background: transparent;
  font-size: 22px; color: inherit; cursor: pointer;
}
.oa-wx-hd { display: flex; gap: 12px; padding: 8px 16px 0; align-items: flex-start; }
.oa-wx-av { width: 64px !important; height: 64px !important; border-radius: 50% !important; }
.oa-wx-name { font-size: 20px; font-weight: 700; }
.oa-star { color: #f5a623; font-size: 16px; }
.oa-wx-region { color: #888; font-size: 13px; margin-top: 4px; }
.oa-wx-desc { padding: 12px 16px 0; font-size: 14px; line-height: 1.6; }
.oa-wx-stats { padding: 8px 16px; color: #888; font-size: 13px; }
.oa-wx-actions { display: flex; gap: 10px; padding: 8px 16px 14px; }
.oa-wx-btn {
  flex: 1; height: 40px; border: 0; border-radius: 8px;
  background: #f2f2f2; color: #111; font-size: 15px; cursor: pointer;
}
body:not(.light) .oa-wx-btn { background: var(--bg-elev); color: var(--text-strong); }
.oa-wx-tabs {
  display: flex; gap: 4px; padding: 0 8px; border-bottom: 1px solid rgba(0,0,0,.06);
  overflow-x: auto;
}
.oa-wx-tabs button {
  flex-shrink: 0; border: 0; background: transparent; padding: 12px 12px;
  font-size: 14px; color: #666; cursor: pointer; position: relative;
}
.oa-wx-tabs button.on { color: #111; font-weight: 650; }
.oa-wx-tabs button.on::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 2px; background: #07c160; border-radius: 1px;
}
.oa-svc-ico { font-size: 11px; }
.oa-wx-feed { padding: 12px 16px 80px; }
.oa-wx-owner-bar {
  position: sticky; bottom: 0; display: flex; gap: 8px; padding: 10px 16px;
  background: inherit; border-top: 1px solid rgba(0,0,0,.06);
}
.oa-sec { color: #888; font-size: 13px; margin: 10px 0 8px; display: flex; justify-content: space-between; }
.oa-article { margin-bottom: 18px; cursor: pointer; }
.oa-article-cover { width: 100%; border-radius: 8px; aspect-ratio: 16/9; object-fit: cover; background: #eee; }
.oa-article-title { margin-top: 8px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.oa-article-meta { margin-top: 4px; color: #999; font-size: 12px; }
.oa-grid, .oa-vgrid { display: grid; gap: 6px; }
.oa-grid { grid-template-columns: 1fr 1fr; }
.oa-vgrid { grid-template-columns: repeat(3, 1fr); }
.oa-grid-item, .oa-vgrid-item { position: relative; border-radius: 6px; overflow: hidden; cursor: pointer; background: #eee; }
.oa-grid-item img, .oa-vgrid-item img, .oa-grid-ph { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.oa-vgrid-item img, .oa-vgrid-item .oa-grid-ph { aspect-ratio: 3/4; }
.oa-grid-like { position: absolute; right: 6px; bottom: 6px; color: #fff; font-size: 12px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }

.oa-sheet-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 12000;
  display: flex; align-items: flex-end; justify-content: center;
}
.oa-sheet {
  width: 100%; max-width: 520px; max-height: 78vh; overflow: auto;
  background: #fff; border-radius: 14px 14px 0 0; padding: 8px 0 calc(12px + var(--sab, 0px));
  color: #111;
}
.oa-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: #ddd; margin: 4px auto 10px; }
.oa-sheet-title { text-align: center; font-weight: 650; padding: 0 16px 10px; }
.oa-sheet-body { padding: 0 16px 8px; }
.oa-sheet-cancel {
  display: block; width: calc(100% - 32px); margin: 8px 16px 0; height: 44px;
  border: 0; border-radius: 10px; background: #f2f2f2; font-size: 16px; cursor: pointer;
}
.oa-svc-cat { font-size: 13px; color: #888; margin: 12px 0 8px; }
.oa-svc-items { display: flex; flex-wrap: wrap; gap: 8px; }
.oa-svc-btn {
  border: 0; background: #f2f2f2; border-radius: 8px; padding: 10px 12px;
  font-size: 14px; cursor: pointer; color: #111;
}
.oa-svc-page { font-size: 14px; line-height: 1.7; padding: 4px 0 12px; }
.oa-menu-item {
  display: block; width: 100%; border: 0; background: transparent;
  padding: 14px 16px; font-size: 16px; text-align: center; cursor: pointer; color: #111;
  border-bottom: 1px solid #f0f0f0;
}
.oa-menu-item.danger { color: #fa5151; }
.oa-info-desc { font-size: 14px; line-height: 1.6; margin-bottom: 14px; }
.oa-info-sec { font-weight: 650; margin: 10px 0 8px; }
.oa-info-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: #666; }
.oa-info-row b { color: #111; font-weight: 500; }

.oa-set-group { background: var(--bg-list); margin: 12px 0; }
.oa-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.oa-set-label { font-size: 15px; color: var(--text-strong); }
.oa-set-tip { font-size: 12px; color: var(--text4); margin-top: 4px; line-height: 1.4; max-width: 240px; }
.oa-switch { position: relative; width: 48px; height: 28px; flex-shrink: 0; }
.oa-switch input { opacity: 0; width: 0; height: 0; }
.oa-switch span {
  position: absolute; inset: 0; background: #ccc; border-radius: 28px; transition: .2s; cursor: pointer;
}
.oa-switch span::before {
  content: ''; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .2s;
}
.oa-switch input:checked + span { background: #07c160; }
.oa-switch input:checked + span::before { transform: translateX(20px); }

.oa-detail { padding: 16px; }
.oa-detail-name { font-weight: 650; }
.oa-detail-time { color: var(--text4); font-size: 12px; margin-top: 4px; }
.oa-detail-title { font-size: 20px; font-weight: 700; margin: 14px 0 10px; line-height: 1.35; }
.oa-detail-cover, .oa-detail-img { width: 100%; border-radius: 8px; margin: 8px 0; }
.oa-detail-text { font-size: 15px; line-height: 1.7; white-space: pre-wrap; }
.oa-detail-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; color: var(--text3); }
.oa-like-btn { border: 0; background: rgba(7,193,96,.12); color: #07c160; border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.oa-pin-lab { display: flex; align-items: center; gap: 8px; padding: 10px 0; color: var(--text2); font-size: 14px; }

/* 覆盖旧 oa 样式保留 compose */
.oa-posts { padding: 0 12px 24px; display: flex; flex-direction: column; gap: 10px; }
.oa-post-card {
  background: var(--bg-list);
  border-radius: 12px;
  padding: 12px 14px;
}
.oa-post-text {
  color: var(--text-strong);
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.oa-post-media {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.oa-post-media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg-elev);
}
.oa-post-foot {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text4);
  font-size: 12px;
}
.oa-post-del {
  border: 0;
  background: transparent;
  color: #576b95;
  font-size: 12px;
  cursor: pointer;
}
.oa-compose { padding: 12px 16px 28px; }
.oa-compose-imgs {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.oa-compose-thumb {
  position: relative;
  width: 72px;
  height: 72px;
}
.oa-compose-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.oa-compose-thumb button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  cursor: pointer;
}

/* ============ 服务号 ============ */
.sa-folder-av { background: #4a90e2; }
.sa-list-page { display: flex; flex-direction: column; min-height: 100%; }
.sa-list-toolbar { display: flex; justify-content: flex-end; gap: 8px; padding: 4px 12px 0; }
.sa-search { margin: 4px 12px 8px; }
.sa-az-wrap { position: relative; flex: 1; }
.sa-az-list { padding-bottom: 40px; }
.sa-az-index {
  position: absolute; right: 2px; top: 40px; bottom: 40px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 1px; z-index: 3; font-size: 10px; color: var(--text3); line-height: 1.15;
  user-select: none;
}
.sa-az-index span { padding: 0 4px; cursor: pointer; }
.sa-az-cell { background: var(--bg-list); }

.sa-chat-page > .page-head, .sa-chat-page .nav-bar { display: none !important; }
.sa-chat {
  display: flex; flex-direction: column; min-height: 100%;
  background: #ededed; color: #111;
}
body:not(.light) .sa-chat { background: var(--bg); color: var(--text-strong); }
.sa-chat-nav {
  display: flex; align-items: center; gap: 4px;
  padding: calc(8px + max(var(--sat), 24px)) 8px 10px;
  background: #f7f7f7; position: sticky; top: 0; z-index: 3;
}
body:not(.light) .sa-chat-nav { background: var(--bg-elev); }
.sa-chat-title { flex: 1; text-align: center; font-weight: 650; font-size: 16px; }
.sa-banner {
  margin: 8px 12px; padding: 10px 12px; border-radius: 8px;
  background: #fff8e6; color: #8a6d3b; font-size: 13px; line-height: 1.5;
}
body:not(.light) .sa-banner { background: rgba(250,157,59,.15); color: #e8c48a; }
.sa-chat-feed {
  flex: 1; overflow-y: auto; padding: 12px 14px 100px;
  display: flex; flex-direction: column; gap: 10px;
}
.sa-time {
  align-self: center; color: #999; font-size: 12px; margin: 6px 0;
}
.sa-card {
  background: #fff; border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); cursor: pointer;
}
body:not(.light) .sa-card { background: var(--bg-list); }
.sa-card-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #ddd; }
.sa-card-title { padding: 10px 12px 4px; font-size: 15px; font-weight: 650; line-height: 1.4; }
.sa-kind {
  display: inline-block; margin-right: 6px; padding: 0 5px; height: 18px; line-height: 18px;
  font-size: 11px; font-weight: 500; color: #07c160; background: rgba(7,193,96,.12); border-radius: 3px;
  vertical-align: 1px;
}
.sa-card-sum { padding: 0 12px 12px; font-size: 13px; color: #888; line-height: 1.45; }

.sa-chat-footer {
  position: sticky; bottom: 0; z-index: 4;
  background: #f7f7f7; border-top: 1px solid rgba(0,0,0,.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
body:not(.light) .sa-chat-footer { background: var(--bg-elev); border-top-color: rgba(255,255,255,.08); }
.sa-menu-bar { display: flex; align-items: stretch; min-height: 46px; }
.sa-kb-toggle {
  width: 44px; border: 0; background: transparent; font-size: 18px; cursor: pointer; color: inherit;
}
.sa-menu-items {
  flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-left: 1px solid rgba(0,0,0,.08);
}
body:not(.light) .sa-menu-items { border-left-color: rgba(255,255,255,.08); }
.sa-menu-item {
  border: 0; border-right: 1px solid rgba(0,0,0,.08);
  background: transparent; color: inherit; font-size: 14px; cursor: pointer;
  padding: 10px 4px;
}
body:not(.light) .sa-menu-item { border-right-color: rgba(255,255,255,.08); }
.sa-menu-item:last-child { border-right: 0; }
.sa-input-bar {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
}
.sa-input-bar input {
  flex: 1; height: 36px; border: 0; border-radius: 6px;
  background: #fff; padding: 0 12px; font-size: 15px; outline: none; color: #111;
}
body:not(.light) .sa-input-bar input { background: var(--bg); color: var(--text-strong); }
.sa-send {
  border: 0; background: #07c160; color: #fff; border-radius: 6px;
  padding: 0 14px; height: 36px; font-size: 14px; cursor: pointer;
}
.sa-owner-fab { display: none; }

.sa-studio { padding-bottom: 8px; }
.sa-studio-hd {
  display: flex; gap: 12px; padding: 16px 16px 0; align-items: flex-start;
}
.sa-studio-meta { min-width: 0; flex: 1; }
.sa-studio-stats { color: #888; font-size: 13px; margin-top: 6px; }
.sa-st-thumb {
  width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: #eee; flex-shrink: 0;
}
.sa-menu-tip {
  padding: 12px 16px 4px; font-size: 13px; color: var(--text3); line-height: 1.55;
}
.sa-me-block select {
  flex: 1; height: 36px; border: 0; background: transparent;
  color: var(--text-strong); font-size: 15px; outline: none;
}
.sa-me-kids { padding: 8px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.sa-me-kid {
  background: var(--bg); border-radius: 10px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.sa-me-kid input, .sa-me-kid textarea, .sa-me-kid select {
  width: 100%; box-sizing: border-box; border: 0; background: var(--bg-list);
  border-radius: 8px; padding: 8px 10px; color: var(--text-strong); font-size: 14px; outline: none;
}
.sa-me-del {
  align-self: flex-end; border: 0; background: transparent; color: #fa5151; font-size: 13px; cursor: pointer;
}

/* ============ 服务通知 / 记账本 ============ */
.sn-folder-av {
  background: #FA9D3B !important;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.sn-folder-av img { width: 100%; height: 100%; object-fit: cover; }

.sn-page-root > .page-head .nav-title { font-weight: 650; }
.sn-page { background: #ededed; min-height: 100%; padding: 8px 0 28px; }
body:not(.light) .sn-page { background: var(--bg); }
.sn-feed { padding: 0 12px; display: flex; flex-direction: column; gap: 10px; }
.sn-time {
  align-self: center; color: #999; font-size: 12px; margin: 8px 0 2px;
}
.sn-card {
  background: #fff; border-radius: 8px; padding: 14px 16px 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
body:not(.light) .sn-card { background: var(--bg-list); }
.sn-card-hd { display: flex; align-items: center; gap: 8px; }
.sn-pay-ico {
  width: 22px; height: 22px; border-radius: 50%; background: #07c160;
  position: relative; flex-shrink: 0;
}
.sn-pay-ico::after {
  content: ''; position: absolute; inset: 5px;
  border: 2px solid #fff; border-radius: 50%;
  border-top-color: transparent; border-left-color: transparent;
  transform: rotate(45deg);
}
.sn-brand { font-size: 14px; color: #111; font-weight: 500; }
body:not(.light) .sn-brand { color: var(--text-strong); }
.sn-card-title {
  margin-top: 14px; font-size: 17px; font-weight: 650; color: #111; line-height: 1.35;
}
body:not(.light) .sn-card-title { color: var(--text-strong); }
.sn-amt-lab {
  margin-top: 18px; text-align: center; color: #888; font-size: 13px;
}
.sn-amt {
  text-align: center; font-size: 36px; font-weight: 700; color: #111;
  margin: 6px 0 16px; letter-spacing: -0.5px;
}
body:not(.light) .sn-amt { color: var(--text-strong); }
.sn-rows { padding-bottom: 8px; }
.sn-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 14px; padding: 4px 0; color: #888;
}
.sn-row b { color: #111; font-weight: 500; text-align: right; }
body:not(.light) .sn-row b { color: var(--text-strong); }
.sn-card-ft {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(0,0,0,.06); margin-top: 8px;
  padding: 12px 0;
}
body:not(.light) .sn-card-ft { border-top-color: rgba(255,255,255,.08); }
.sn-ft-l, .sn-ft-r {
  border: 0; background: transparent; color: #888; font-size: 14px; cursor: pointer; padding: 0;
}
.sn-ft-r:active, .sn-ft-l:active { opacity: .7; }

.lg-page-root > .page-head, .lg-page-root .nav-bar { display: none !important; }
.lg-page-root > .form-page-body {
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.lg-page {
  display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%;
  background: #f7f7f7; color: #111;
}
body:not(.light) .lg-page { background: var(--bg); color: var(--text-strong); }
.lg-head {
  background: #07c160; color: #fff;
  /* 避开状态栏/挖孔，别顶太高 */
  padding: calc(10px + var(--sat, env(safe-area-inset-top, 0px))) 14px 12px;
  flex-shrink: 0;
}
.lg-head-top {
  display: flex; align-items: center; gap: 4px; margin-bottom: 10px;
}
.lg-back {
  border: 0; background: transparent; color: #fff;
  font-size: 28px; line-height: 1; padding: 0 8px 0 0; cursor: pointer;
  width: 36px; text-align: left;
}
.lg-head-title {
  flex: 1; text-align: center; font-size: 17px; font-weight: 650;
  margin-right: 36px; /* 与返回对称居中 */
}
.lg-head-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.lg-type-btn, .lg-month-btn {
  border: 0; background: rgba(255,255,255,.22); color: #fff;
  border-radius: 14px; padding: 4px 10px; font-size: 13px; cursor: pointer;
}
.lg-sum { font-size: 12.5px; opacity: .95; line-height: 1.35; }
.lg-sort {
  display: flex; gap: 8px; padding: 8px 14px; background: #fff; flex-shrink: 0;
}
body:not(.light) .lg-sort { background: var(--bg-list); }
.lg-sort button {
  border: 0; border-radius: 6px; padding: 6px 14px; font-size: 13px;
  background: #f3f3f3; color: #333; cursor: pointer;
}
.lg-sort button.on { background: #fff6e0; color: #c98a1a; font-weight: 600; }
body:not(.light) .lg-sort button { background: var(--bg-elev); color: var(--text-strong); }
body:not(.light) .lg-sort button.on { background: rgba(250,157,59,.2); color: #fa9d3b; }

.lg-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 0 70px; background: #fff; }
body:not(.light) .lg-body { background: var(--bg-list); }
.lg-recv-top { padding: 20px 16px 12px; border-bottom: 1px solid rgba(0,0,0,.06); }
.lg-recv-lab { color: #888; font-size: 14px; }
.lg-recv-amt { font-size: 32px; font-weight: 700; margin-top: 6px; }

.lg-day { margin-top: 8px; }
.lg-day-hd {
  display: flex; justify-content: space-between; padding: 8px 16px;
  font-size: 12px; color: #888; background: #f7f7f7;
}
body:not(.light) .lg-day-hd { background: var(--bg); }

.lg-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,.05);
}
.lg-ico {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  position: relative; background: #fa9d3b;
}
.lg-ico-tf { background: #07c160; }
.lg-ico-rp { background: #fa9d3b; }
.lg-ico-shop { background: #f5a623; }
.lg-ico-recharge { background: #10aeff; }
.lg-ico-withdraw { background: #576b95; }
.lg-ico-other { background: #b2b2b2; }
.lg-ico::after {
  content: ''; position: absolute; inset: 11px;
  border: 2px solid #fff; border-radius: 3px;
}
.lg-ico-rp::after { border-radius: 2px 2px 6px 6px; inset: 10px 12px; }
.lg-ico-shop::after {
  border: 0; background: #fff; inset: 12px 11px 11px;
  clip-path: polygon(50% 0, 100% 30%, 100% 100%, 0 100%, 0 30%);
}
.lg-main { flex: 1; min-width: 0; }
.lg-title { font-size: 15px; font-weight: 650; }
.lg-sub {
  margin-top: 3px; font-size: 12px; color: #999;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lg-right { text-align: right; flex-shrink: 0; }
.lg-money { font-size: 16px; font-weight: 650; }
.lg-money.in { color: #fa9d3b; }
.lg-when { margin-top: 3px; font-size: 11px; color: #999; }

.lg-tabs {
  position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr);
  background: #fff; border-top: 1px solid rgba(0,0,0,.06);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
body:not(.light) .lg-tabs { background: var(--bg-elev); }
.lg-tabs button {
  border: 0; background: transparent; padding: 8px 0; font-size: 11px;
  color: #888; cursor: pointer;
}
.lg-tabs button.on { color: #07c160; font-weight: 650; }
.lg-stats-box { padding: 24px 20px; }
.lg-stats-row {
  display: flex; justify-content: space-between; padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,.06); font-size: 15px;
}
.lg-stats-row b.in { color: #fa9d3b; }

.lg-month-sheet .lg-picker {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  max-height: 220px; overflow: hidden; padding: 8px 12px 16px;
}
.lg-picker-col { overflow-y: auto; max-height: 220px; }
.lg-pick-item {
  text-align: center; padding: 10px; font-size: 16px; color: #999; cursor: pointer;
}
.lg-pick-item.on { color: #111; font-weight: 700; font-size: 18px; }
body:not(.light) .lg-pick-item.on { color: var(--text-strong); }
.lg-picker-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 16px;
}
.lg-pick-cancel, .lg-pick-ok {
  border: 0; border-radius: 8px; height: 44px; font-size: 16px; cursor: pointer;
}
.lg-pick-cancel { background: #f2f2f2; color: #111; }
.lg-pick-ok { background: #07c160; color: #fff; }

/* ============ 收藏 ============ */
.fav-search { padding: 10px 14px 4px; }
.fav-search input { width: 100%; height: 36px; border: 0; border-radius: 8px; background: var(--bg-elev);
  color: var(--text-strong); padding: 0 14px; font-size: 14px; outline: none; text-align: center; }
.fav-search input:focus { text-align: left; }
.fav-tabs { display: flex; gap: 4px; padding: 8px 10px; overflow-x: auto; }
.fav-tab { flex-shrink: 0; padding: 6px 13px; border-radius: 15px; font-size: 13.5px; color: var(--text2); cursor: pointer; }
.fav-tab.active { background: var(--bg-elev); color: var(--text-strong); font-weight: 600; }
.fav-card { margin: 8px 12px; background: var(--bg-list); border-radius: 8px; padding: 12px 14px; cursor: pointer; }
.fav-main { display: flex; gap: 10px; align-items: flex-start; }
.fav-txt { flex: 1; color: var(--text-strong); font-size: 14.5px; line-height: 1.5; word-break: break-all;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 20px; }
.fav-thumb { width: 62px; height: 62px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--bg-elev); }
.fav-thumb-file {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #576b95; letter-spacing: .5px;
  background: #eef3ff;
}
.fav-foot { display: flex; justify-content: space-between; margin-top: 10px; color: var(--text4); font-size: 12px; }
.fav-detail-text { color: var(--text-strong); font-size: 16px; line-height: 1.7; word-break: break-all; white-space: pre-wrap; }
.fav-edit-field { padding: 10px 16px 0; }
.fav-edit-field input {
  width: 100%; height: 44px; border: 0; border-radius: 8px;
  background: var(--bg-list); color: var(--text-strong);
  padding: 0 12px; font-size: 16px; box-sizing: border-box;
}
.fav-meta { color: var(--text4); font-size: 12.5px; margin-top: 16px; }
.fav-file-head { text-align: center; padding: 8px 0 16px; }
.fav-file-ico { font-size: 42px; line-height: 1; margin-bottom: 10px; }
.fav-file-name { color: var(--text-strong); font-size: 16px; font-weight: 600; word-break: break-all; }
.fav-file-sub { color: var(--text3); font-size: 13px; margin-top: 6px; }
.fav-file-player { width: 100%; margin: 8px 0 4px; border-radius: 8px; background: #000; }
audio.fav-file-player { background: transparent; min-height: 40px; }
.fav-file-img { width: 100%; border-radius: 8px; margin: 8px 0; }
.fav-file-text {
  max-height: 48vh; overflow: auto; margin: 8px 0; padding: 12px;
  background: var(--bg-elev); border-radius: 8px; color: var(--text-strong);
  font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.fav-file-hint { color: var(--text3); font-size: 12.5px; line-height: 1.45; margin: 6px 0 4px; }
.fav-audio-play {
  display: flex; align-items: center; gap: 12px;
  margin: 10px 0 6px; padding: 14px 16px;
  background: var(--bg-elev); border-radius: 12px; cursor: pointer;
  border: 0; width: 100%; text-align: left; color: inherit; font: inherit;
}
.fav-audio-play:active { opacity: .88; }
.fav-audio-play-ico {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: #07c160; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.fav-audio-play-ico svg { width: 20px; height: 20px; display: block; }
.fav-audio-play-meta { flex: 1; min-width: 0; }
.fav-audio-play-title {
  font-size: 15px; font-weight: 600; color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fav-audio-play-sub { font-size: 12.5px; color: var(--text3); margin-top: 4px; }

/* ============ 音乐悬浮窗（仿微信） ============ */
.fl-music-float {
  position: fixed;
  z-index: 480;
  left: 12px;
  top: 120px;
  width: max-content;
  max-width: calc(100vw - 16px);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
}
.fl-music-float.is-dragging { transition: none; }
.fl-music-float.is-hidden { display: none !important; }
.fl-mf-bar {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 10px 0 12px;
  background: #fff; border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
  max-width: min(280px, calc(100vw - 24px));
}
body:not(.light) .fl-mf-bar {
  background: #2c2c2c;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
}
.fl-mf-note {
  flex-shrink: 0; width: 22px; height: 22px;
  color: #07c160; display: flex; align-items: center; justify-content: center;
}
.fl-mf-note svg { width: 18px; height: 18px; display: block; }
.fl-mf-title {
  flex: 1; min-width: 0;
  font-size: 13.5px; color: #111; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body:not(.light) .fl-mf-title { color: #f0f0f0; }
.fl-mf-btn {
  flex-shrink: 0; width: 28px; height: 28px; padding: 0; border: 0;
  background: transparent; border-radius: 50%; cursor: pointer;
  color: #666; display: flex; align-items: center; justify-content: center;
}
body:not(.light) .fl-mf-btn { color: #bbb; }
.fl-mf-btn:active { opacity: .65; }
.fl-mf-btn svg { width: 16px; height: 16px; display: block; }
.fl-mf-btn.close { color: #999; }
.fl-mf-btn.close svg { width: 14px; height: 14px; }

/* 贴边收起：半圆小条（外层必须真收缩，否则拖到右侧会被展开宽度卡在中间） */
.fl-music-float.is-collapsed {
  width: 36px; max-width: 36px; overflow: hidden;
}
.fl-music-float.is-collapsed .fl-mf-bar {
  width: 36px; max-width: 36px; height: 44px;
  padding: 0; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.16);
}
.fl-music-float.is-collapsed.edge-left .fl-mf-bar {
  border-radius: 0 22px 22px 0;
}
.fl-music-float.is-collapsed.edge-right .fl-mf-bar {
  border-radius: 22px 0 0 22px;
}
.fl-music-float.is-collapsed .fl-mf-title,
.fl-music-float.is-collapsed .fl-mf-btn { display: none; }
.fl-music-float.is-collapsed .fl-mf-note { width: 22px; height: 22px; }

/* ============ 微信式音频全屏预览 ============ */
.modal-page.wx-audio-page {
  background: #fff;
}
.modal-page.wx-audio-page > .nav-bar {
  background: #fff;
  border-bottom: 0;
}
.modal-page.wx-audio-page > .nav-bar .nav-title { opacity: 0; }
.modal-page.wx-audio-page > .nav-bar .nav-back {
  color: #111;
  font-size: 32px;
  font-weight: 300;
}
.modal-page.wx-audio-page > .form-page-body {
  overflow: hidden;
  background: #fff;
}
body:not(.light) .modal-page.wx-audio-page,
body:not(.light) .modal-page.wx-audio-page > .nav-bar,
body:not(.light) .modal-page.wx-audio-page > .form-page-body {
  background: #1a1a1a;
}
body:not(.light) .modal-page.wx-audio-page > .nav-bar .nav-back { color: #f2f2f2; }
.wxap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 28px calc(28px + var(--sab));
  min-height: 100%;
  box-sizing: border-box;
}
.wxap-cover {
  width: min(72vw, 268px);
  aspect-ratio: 1;
  background: #e8e8e8;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 36px;
}
body:not(.light) .wxap-cover { background: #2a2a2a; }
.wxap-wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  height: 52px;
}
.wxap-wave i {
  display: block;
  width: 8px;
  border-radius: 4px;
  background: #c8c8c8;
}
body:not(.light) .wxap-wave i { background: #666; }
.wxap-wave i:nth-child(1) { height: 22px; }
.wxap-wave i:nth-child(2) { height: 36px; }
.wxap-wave i:nth-child(3) { height: 18px; }
.wxap-wave i:nth-child(4) { height: 44px; }
.wxap-wave i:nth-child(5) { height: 28px; }
.wxap-cover.is-playing .wxap-wave i {
  animation: wxap-eq 1s ease-in-out infinite;
}
.wxap-cover.is-playing .wxap-wave i:nth-child(2) { animation-delay: .12s; }
.wxap-cover.is-playing .wxap-wave i:nth-child(3) { animation-delay: .24s; }
.wxap-cover.is-playing .wxap-wave i:nth-child(4) { animation-delay: .08s; }
.wxap-cover.is-playing .wxap-wave i:nth-child(5) { animation-delay: .2s; }
@keyframes wxap-eq {
  0%, 100% { transform: scaleY(.55); }
  50% { transform: scaleY(1); }
}
.wxap-name-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.wxap-name {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body:not(.light) .wxap-name { color: #f2f2f2; }
.wxap-more {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #111;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body:not(.light) .wxap-more { color: #f2f2f2; }
.wxap-more svg { width: 22px; height: 22px; display: block; }
.wxap-prog {
  width: 100%;
  padding: 10px 0;
  touch-action: none;
}
.wxap-track {
  position: relative;
  height: 2px;
  background: #d9d9d9;
  border-radius: 1px;
}
body:not(.light) .wxap-track { background: #444; }
.wxap-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: #111;
  border-radius: 1px;
}
body:not(.light) .wxap-fill { background: #f2f2f2; }
.wxap-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: #111;
  border-radius: 50%;
  pointer-events: none;
}
body:not(.light) .wxap-knob { background: #f2f2f2; }
.wxap-times {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 12px;
  color: #888;
  font-variant-numeric: tabular-nums;
}
.wxap-rate {
  border: 0;
  background: transparent;
  color: #888;
  font-size: 13px;
  padding: 4px 10px;
}
.wxap-ctrls {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 36px;
  padding: 0 6px;
}
.wxap-btn {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #111;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body:not(.light) .wxap-btn { color: #f2f2f2; }
.wxap-btn svg { width: 30px; height: 30px; display: block; }
.wxap-skip-btn { width: 48px; height: 48px; }
.wxap-skip {
  position: relative;
  width: 38px;
  height: 38px;
  display: block;
}
.wxap-skip svg {
  width: 38px;
  height: 38px;
  display: block;
}
.wxap-skip-fwd svg { transform: scaleX(-1); }
.wxap-skip em {
  position: absolute;
  left: 0; right: 0;
  top: 13px;
  height: 16px;
  margin: 0;
  font-style: normal;
  font-size: 11px;
  font-weight: 650;
  line-height: 16px;
  text-align: center;
  letter-spacing: -0.4px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  pointer-events: none;
}
.wxap-btn.wxap-toggle {
  width: 56px;
  height: 56px;
}
.wxap-btn.wxap-toggle svg { width: 38px; height: 38px; }
.wxap-btn.is-off,
.wxap-btn:disabled {
  color: #cfcfcf;
  opacity: 1;
}
body:not(.light) .wxap-btn.is-off,
body:not(.light) .wxap-btn:disabled { color: #555; }

/* ============ 位置 ============ */
.loc-bar { background: #07c160; color: #fff; font-size: 13px; padding: 8px 14px; cursor: pointer; flex-shrink: 0; }
.loc-map-wrap { height: 42vh; background: var(--bg-elev); }
.loc-map { width: 100%; height: 100%; border: 0; display: block; }
.loc-info { padding: 14px 16px; background: var(--bg-list); border-bottom: 1px solid var(--border); }
.loc-name { font-size: 16px; font-weight: 600; color: var(--text-strong); }
.loc-addr { color: var(--text2); font-size: 13px; margin-top: 5px; line-height: 1.5; }
.loc-coord { color: var(--text4); font-size: 12px; margin-top: 5px; }
.loc-actions { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.loc-btn { height: 44px; border: 0; border-radius: 8px; font-size: 16px; cursor: pointer;
  background: var(--bg-elev); color: var(--text-strong); }
.loc-btn.primary { background: #07c160; color: #fff; }
.loc-btn.danger { background: #fa5151; color: #fff; }
.bubble.loc { padding: 0; overflow: hidden; min-width: 220px; max-width: 240px; cursor: pointer; }
.loc-b-name { font-size: 14.5px; font-weight: 600; padding: 9px 12px 2px; }
.loc-b-addr { font-size: 11.5px; color: var(--text3); padding: 0 12px 8px; }
.msg-row.me .bubble.loc .loc-b-addr { color: #4a7a3a; }
.loc-b-map { position: relative; height: 100px; background: #dfe8dd; overflow: hidden; }
.loc-b-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -90%); font-size: 22px; }

/* ============ 转账（发起页） ============ */
.tf-head { display: flex; align-items: center; padding: 10px 22px 24px; }
.tf-head-info { flex: 1; }
.tf-title { font-size: 17px; font-weight: 600; color: var(--text-strong); }
.tf-id { color: var(--text3); font-size: 13px; margin-top: 4px; }
.tf-card { background: var(--bg-list); border-radius: 10px; margin: 0 14px; padding: 22px 20px 18px; }
.tf-label { color: var(--text2); font-size: 14px; }
.tf-amt-row { display: flex; align-items: center; border-bottom: 1px solid var(--border); padding: 12px 0 10px; margin-bottom: 12px; }
.tf-yen { font-size: 30px; font-weight: 700; color: var(--text-strong); margin-right: 6px; }
#tf-amt { font-size: 34px; font-weight: 600; color: var(--text-strong); min-height: 44px; }
.tf-cursor { width: 2px; height: 32px; background: #07c160; margin-left: 3px; animation: tfblink 1s step-end infinite; }
@keyframes tfblink { 50% { opacity: 0; } }
.tf-note-link { color: #576b95; font-size: 13.5px; cursor: pointer; }
.tf-note-input { width: 100%; background: transparent; border: 0; color: var(--text-strong); font-size: 14px; }
.tf-pad { position: absolute; left: 0; right: 0; bottom: 0; display: grid;
  grid-template-columns: repeat(4, 1fr); grid-auto-rows: 56px; gap: 8px;
  padding: 10px 8px calc(10px + var(--sab)); background: var(--bg); }
.tf-key { background: var(--bg-elev); border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--text-strong); cursor: pointer; user-select: none; }
.tf-key:active { background: var(--bg-elev2); }
.tf-zero { grid-column: 1 / span 2; }
.tf-go { grid-column: 4; grid-row: 2 / span 3; background: #0a5c33; color: #7aa98f; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; user-select: none; }
.tf-go.on { background: #07c160; color: #fff; }

/* ============ 会话左滑操作 / 置顶 ============ */
.chat-swipe {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--bg-list);
}
.chat-swipe.pinned { background: var(--bg-soft); }
.chat-ops {
  position: absolute; top: 0; right: 0; bottom: 0; display: flex; z-index: 0;
  /* 未滑开时完全隐藏，避免底边/亚像素透出蓝橙红色条 */
  opacity: 0; pointer-events: none; visibility: hidden;
}
.chat-swipe.is-dragging .chat-ops,
.chat-swipe.is-open .chat-ops {
  opacity: 1; pointer-events: auto; visibility: visible;
}
.chat-ops .op { width: 74px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14.5px; cursor: pointer; user-select: none; }
.op-read { background: #2a7fd1; }
.op-hide { background: #c8781e; }
.op-del { background: #fa5151; }
.chat-swipe .chat-item {
  position: relative; z-index: 1;
  background: var(--bg-list);
  border-bottom: 0;
  touch-action: pan-y; will-change: transform;
}
.chat-swipe.pinned .chat-item { background: var(--bg-soft); }

/* ============ 钱包 / 我的二维码 ============ */
.wh-footer { position: absolute; left: 0; right: 0; bottom: calc(20px + var(--sab));
  text-align: center; font-size: 13px; color: #576b95; }
.wh-footer span { cursor: pointer; }
.wh-footer i { font-style: normal; color: var(--text4); margin: 0 10px; }
.qr-section-hd { cursor: pointer; user-select: none; align-items: center; }
.qr-sec-more {
  cursor: pointer;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-right: 2px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  -webkit-tap-highlight-color: transparent;
}
.qr-sec-more svg { width: 22px; height: 22px; display: block; }
.qr-fold-arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-left: 0;
  margin-right: 4px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
}
.qr-fold-arrow svg {
  width: 20px;
  height: 11px;
  display: block;
}
.qr-fold-arrow.is-open svg { transform: rotate(180deg); }
.qr-sec-sub { color: var(--text3); font-size: 12px; margin-top: 3px; }
.qr-ftf-tip {
  padding: 4px 22px 10px; color: var(--text3); font-size: 12.5px; line-height: 1.55;
}
.qr-card-outer { padding: 6px 20px 16px; }
.qr-card-outer.is-collapsed { display: none; }
.qr-card { background: #fff; border-radius: 10px; padding: 20px 22px 16px; }
.qr-user { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.qr-name { color: #1a1a1a; font-size: 16px; font-weight: 600; }
.qr-region { color: #999; font-size: 12.5px; margin-top: 2px; }
#qr-img, #qr-rp-img, #gqr-img { width: 100%; display: block; margin: 0 auto; border-radius: 4px; }
.qr-img-wrap {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  line-height: 0;
}
.qr-card-outer.gqr-page {
  display: flex;
  justify-content: center;
  padding: 24px 20px 28px;
}
.qr-card-outer.gqr-page .qr-card {
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
}
.qr-card-outer.gqr-page .qr-user {
  justify-content: center;
  text-align: center;
}
.qr-card-outer.gqr-page .qr-user > div:last-child {
  text-align: left;
}
.qr-center-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  height: 22%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  padding: 2%;
  box-sizing: border-box;
  pointer-events: none;
  -webkit-user-drag: none;
  box-shadow: 0 0 0 2px #fff;
}
.qr-tip { text-align: center; color: #999; font-size: 12.5px; margin-top: 12px; }
.qr-brand-mark {
  margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #576b95; font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.qr-brand-mark img {
  width: 26px; height: 26px; border-radius: 0; object-fit: contain; background: transparent;
}
.qr-gno { text-align: center; color: #576b95; font-size: 14px; font-weight: 500; margin-top: 14px; letter-spacing: .5px; }

.gt-nav-txt { font-size: 16px !important; padding: 0 4px; }
.modal-page.gt-page > .form-page-body {
  display: flex; flex-direction: column; overflow: hidden;
}
.gt-done {
  border: 0; background: transparent; color: #07c160;
  font-size: 16px; padding: 0 4px; cursor: pointer;
}
.gt-done:disabled { color: #b7b7b7; cursor: default; }
.gt-search {
  margin: 8px 12px 0; height: 36px; border-radius: 8px;
  background: var(--bg-elev, #ededed);
  display: flex; align-items: center; gap: 6px; padding: 0 10px;
  color: #888; font-size: 15px; flex-shrink: 0;
}
.gt-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.gt-search input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-size: 15px; color: var(--text-strong, #111); height: 36px;
}
.gt-list { padding: 6px 0 24px; height: 100%; overflow-y: auto; }
.gt-index {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
  font-size: 11px; color: #576b95; line-height: 1.35; z-index: 2;
  pointer-events: none; padding: 4px 2px;
}
.gt-letter {
  padding: 6px 16px 4px; font-size: 13px; color: var(--text3, #888);
  background: var(--bg, #f7f7f7);
}
.gt-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: var(--bg-list, #fff); cursor: pointer;
}
.gt-radio {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid #c8c8c8; box-sizing: border-box;
}
.gt-row.on .gt-radio {
  border-color: #07c160; background: #07c160;
  box-shadow: inset 0 0 0 3px #fff;
}
.gt-meta { min-width: 0; flex: 1; }
.gt-name { font-size: 16px; color: var(--text-strong, #111); }
.gt-sub { font-size: 12px; color: var(--text3, #888); margin-top: 2px; }

/* 申请入群 */
.gi-join-head { display: flex; flex-direction: column; align-items: center; padding: 32px 20px 20px; }
.gi-join-name { font-size: 18px; font-weight: 500; margin-top: 14px; color: var(--text-strong); }
.gi-join-meta { font-size: 13px; color: var(--text3); margin-top: 6px; }
.gi-join-form { padding: 0 20px; }
.gi-join-label { display: block; font-size: 13px; color: var(--text3); margin-bottom: 8px; }
.gi-join-form textarea {
  width: 100%; min-height: 88px; box-sizing: border-box; padding: 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-list); color: var(--text-strong);
  font-size: 15px; resize: vertical;
  -webkit-appearance: none; appearance: none;
}
.gi-join-form textarea::placeholder { color: var(--text3); }
body.light .gi-join-form textarea {
  background: #fff;
  border-color: #e5e5e5;
}
body.light .gi-join-form textarea::placeholder { color: #b2b2b2; }
.gi-join-btn { width: 100%; margin-top: 16px; height: 44px; border: 0; border-radius: 8px; background: #07c160; color: #fff; font-size: 16px; }
.gi-join-pending { text-align: center; color: #576b95; font-size: 15px; padding: 24px 20px; }
.gi-join-tip { text-align: center; color: var(--text4); font-size: 12px; padding: 16px 20px 28px; line-height: 1.5; }
.gjr-acts { display: flex; flex-direction: column; gap: 8px; margin-left: 8px; }
.gjr-acts .btn-sm { min-width: 56px; }
.qr-actions { display: flex; justify-content: center; align-items: center; padding: 14px 0 2px; font-size: 14px; color: #576b95; }
.qr-actions span { cursor: pointer; }
.qr-actions i { font-style: normal; color: var(--text4); margin: 0 12px; }

/* 我的二维码 ··· 分享面板 */
.qr-share-sheet { padding-top: 10px; }
.qr-share-sec-hd {
  padding: 4px 16px 10px; font-size: 13px; color: #9a9a9a;
}
.qr-share-recent {
  display: flex; gap: 10px; overflow-x: auto; padding: 0 12px 16px;
  -webkit-overflow-scrolling: touch;
}
.qr-share-recent::-webkit-scrollbar { display: none; }
.qr-share-peer {
  flex: 0 0 auto; width: 64px; border: 0; background: transparent; color: #cfcfcf;
  padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.qr-share-peer span {
  font-size: 11px; color: #bdbdbd; max-width: 64px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; text-align: center;
}
.qr-share-av {
  width: 52px; height: 52px; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #2c2c2c;
}
.qr-share-av .avatar, .qr-share-av img {
  width: 100% !important; height: 100% !important; border-radius: 8px; object-fit: cover;
}
.qr-share-av.dashed {
  border: 1.5px dashed #666; background: transparent; color: #888; font-size: 22px;
  border-radius: 10px;
}
.qr-share-grid { padding-bottom: 8px; }
.qr-share-sheet .qr-share-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  padding: 4px 6px 14px;
  -webkit-overflow-scrolling: touch;
}
.qr-share-sheet .qr-share-grid::-webkit-scrollbar { display: none; }
.qr-share-sheet .fl-more-item {
  flex: 0 0 72px;
}
.qr-share-img { overflow: hidden; padding: 0; }
.qr-share-img img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px;
}
.qr-edit-wrap { padding: 20px 24px 40px; text-align: center; }
.qr-edit-preview {
  width: min(78vw, 320px); border-radius: 8px; background: #fff; display: block; margin: 0 auto;
}
.qr-edit-styles {
  display: flex; justify-content: center; gap: 14px; margin-top: 22px;
}
.qr-edit-swatch {
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.15);
}
.qr-edit-swatch.on { border-color: #07c160; box-shadow: 0 0 0 2px rgba(7,193,96,.35); }
.qr-edit-tip { margin-top: 12px; font-size: 12px; color: var(--text3); }

/* ============ 浅色模式专属覆盖 ============ */
body.light .bubble { background: #ffffff; color: #121212; }
body.light .msg-row.me .bubble { background: #95ec69; color: #121212; }
body.light .e2e-banner { background: #fdf3d7; color: #a5883e; }
body.light .emoji-del, body.light .emoji-send { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
body.light .chat-panel, body.light .emoji-panel { background: var(--bg); }
body.light .cp-item .cp-ico { background: #f7f7f7; }
body.light .chat-input-bar { background: var(--bg); }
body.light .ci-input-wrap, body.light #btn-voice-hold { background: #f7f7f7; }
body.light #btn-voice-hold.recording { background: #07c160; }

/* ============ 视频播放器：全屏无尺寸上限 ============ */
.fl-vv {
  position: fixed; inset: 0; z-index: 280;
  background: #000;
  display: flex; flex-direction: column; align-items: stretch; justify-content: stretch;
  color: #fff;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.fl-vv-close {
  position: absolute; top: calc(10px + var(--sat)); left: 14px; z-index: 3;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(60,60,60,.72); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.fl-vv-close svg { width: 16px; height: 16px; fill: #fff; }
.fl-vv-stage {
  flex: 1 1 auto; position: relative; width: 100%; height: 100%;
  max-width: none; max-height: none;
  display: flex; align-items: center; justify-content: center;
  min-height: 0; background: #000; border-radius: 0; overflow: hidden;
  padding: var(--sat) 0 calc(56px + var(--sab));
  box-sizing: border-box;
}
.fl-vv-video {
  width: 100%; height: 100%;
  max-width: 100vw; max-height: 100%;
  object-fit: contain; background: #000; outline: none;
}
.fl-vv-hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 12px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  pointer-events: none;
}
.fl-vv-hud > * { pointer-events: auto; }
.fl-vv-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.fl-vv-play {
  width: 28px; height: 28px; border: 0; background: transparent; color: #fff;
  padding: 0; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.fl-vv-play svg { width: 22px; height: 22px; fill: #fff; }
.fl-vv-time {
  font-size: 12px; color: rgba(255,255,255,.92); white-space: nowrap;
  font-variant-numeric: tabular-nums; min-width: 78px;
}
.fl-vv-bar {
  flex: 1; height: 22px; display: flex; align-items: center; cursor: pointer;
  touch-action: none;
}
.fl-vv-bar-track {
  position: relative; width: 100%; height: 2px; background: rgba(255,255,255,.28); border-radius: 2px;
}
.fl-vv-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: #fff; border-radius: 2px;
}
.fl-vv-bar-thumb {
  position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: #fff; border-radius: 50%; left: 0%; box-shadow: 0 0 2px rgba(0,0,0,.4);
}
.fl-vv-speed {
  border: 0; background: transparent; color: #fff; font-size: 13px;
  padding: 4px 2px; cursor: pointer; flex-shrink: 0; white-space: nowrap;
}
.fl-vv-actions {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(10px + var(--sab));
  z-index: 3;
  display: flex; justify-content: flex-end; align-items: center; gap: 4px;
  width: auto; margin: 0;
  padding: 4px 12px 6px; background: transparent; border-radius: 0;
  box-sizing: border-box;
}
.fl-vv-act {
  width: 48px; height: 40px; border: 0; background: transparent; color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.fl-vv-act svg { width: 24px; height: 24px; fill: #fff; }
.fl-vv-act:active { opacity: .65; }

/* 选择聊天（转发） */
.fl-pick {
  position: fixed; inset: 0; z-index: 85; background: #111; color: #e8e8e8;
  display: flex; flex-direction: column; padding-top: var(--sat);
}
.fl-pick-nav {
  height: 48px; display: flex; align-items: center; padding: 0 12px;
  border-bottom: 1px solid #232323; flex-shrink: 0;
}
.fl-pick-nav .fl-pick-side { width: 56px; color: #ddd; font-size: 16px; cursor: pointer; }
.fl-pick-nav .fl-pick-side.right { text-align: right; }
.fl-pick-nav .fl-pick-title { flex: 1; text-align: center; font-size: 17px; font-weight: 500; color: #eee; }
.fl-pick-search {
  margin: 10px 12px;
  background: var(--bg-elev);
  border-radius: 8px;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  color: var(--text3);
  border: 1px solid var(--border);
  box-sizing: border-box;
}
.fl-pick-search .fl-pick-search-ico {
  width: 16px; height: 16px; flex-shrink: 0; opacity: .55;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10.5 3a7.5 7.5 0 015.95 12.1l3.72 3.73a1 1 0 01-1.41 1.41l-3.73-3.72A7.5 7.5 0 1110.5 3zm0 2a5.5 5.5 0 100 11 5.5 5.5 0 000-11z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10.5 3a7.5 7.5 0 015.95 12.1l3.72 3.73a1 1 0 01-1.41 1.41l-3.73-3.72A7.5 7.5 0 1110.5 3zm0 2a5.5 5.5 0 100 11 5.5 5.5 0 000-11z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fl-pick-search input {
  flex: 1; border: 0; background: transparent; color: var(--text-strong); font-size: 15px; outline: none;
}
.fl-pick-search input::placeholder { color: var(--text4); }
body.light .fl-pick-search {
  background: #fff;
  border-color: #e5e5e5;
  color: #888;
}
body.light .fl-pick-search input { color: #111; }
.fl-pick-sec {
  display: flex; justify-content: space-between; padding: 8px 16px 6px;
  font-size: 13px; color: #8a8a8a;
}
.fl-pick-sec .fl-pick-create { color: #576b95; cursor: pointer; }
.fl-pick-list { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
.fl-pick-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer;
}
.fl-pick-item:active { background: #1c1c1c; }
.fl-pick-item .avatar { width: 44px; height: 44px; border-radius: 6px; flex-shrink: 0; }
.fl-pick-name { flex: 1; font-size: 16px; color: #e8e8e8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-pick-tag { font-size: 12px; color: #07c160; flex-shrink: 0; }

/* 聊天图片与视频画廊 */
.fl-media {
  position: fixed; inset: 0; z-index: 86; background: #000; color: #fff;
  display: flex; flex-direction: column; padding-top: var(--sat);
}
.fl-media-nav {
  height: 48px; display: flex; align-items: center; padding: 0 10px; flex-shrink: 0;
}
.fl-media-back {
  width: 40px; height: 40px; border: 0; background: transparent; color: #fff;
  font-size: 28px; line-height: 1; cursor: pointer;
}
.fl-media-pill {
  flex: 1; display: flex; justify-content: center;
}
.fl-media-pill span {
  display: inline-flex; align-items: center; gap: 4px;
  background: #2a2a2a; border-radius: 16px; padding: 6px 14px; font-size: 15px;
}
.fl-media-sel {
  width: 48px; text-align: right; color: #ddd; font-size: 15px; cursor: pointer; background: none; border: 0;
}
.fl-media-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 8px 0 24px; }
.fl-media-group-title { padding: 14px 14px 8px; font-size: 15px; color: #fff; font-weight: 500; }
.fl-media-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 0 2px;
}
.fl-media-cell {
  position: relative; aspect-ratio: 1; background: #222; overflow: hidden; cursor: pointer;
}
.fl-media-cell img, .fl-media-cell video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.fl-media-cell .fl-media-meta {
  position: absolute; left: 4px; bottom: 4px; font-size: 11px; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.7); display: flex; align-items: center; gap: 3px;
}
.fl-media-cell .fl-media-meta svg { width: 12px; height: 12px; fill: #fff; }
.fl-media-empty { text-align: center; color: #777; padding: 48px 16px; font-size: 14px; }

/* 更多：微信式宫格底栏 */
.fl-more-mask {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end;
}
.fl-more-sheet {
  width: 100%; background: #1f1f1f; border-radius: 12px 12px 0 0;
  padding: 18px 10px calc(10px + var(--sab)); color: #eee;
}
.fl-more-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px; padding: 4px 4px 16px;
}
.fl-more-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; background: none; border: 0; color: #ddd; padding: 0;
}
.fl-more-ico {
  width: 56px; height: 56px; border-radius: 12px; background: #2c2c2c;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.fl-more-ico svg { width: 28px; height: 28px; }
body.light .fl-more-sheet {
  background: #f7f7f7; color: #111;
}
body.light .fl-more-ico { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
body.light .fl-more-item { color: #333; }
body.light .fl-more-item span { color: #666; }
body.light .fl-more-cancel { background: #fff; color: #111; }
body.light .qr-share-sec-hd { color: #888; }
body.light .qr-share-peer span { color: #333; }
body.light .fl-pick {
  background: #ededed; color: #111;
}
body.light .fl-pick-nav { border-bottom-color: #e5e5e5; background: #f7f7f7; }
body.light .fl-pick-nav .fl-pick-side,
body.light .fl-pick-nav .fl-pick-title { color: #111; }
body.light .fl-pick-sec { color: #888; }
body.light .fl-pick-item:active { background: #e8e8e8; }
body.light .fl-pick-name { color: #111; }
.bubble.file {
  display: flex; align-items: center; gap: 12px; min-width: 180px; max-width: 250px;
  text-decoration: none; color: inherit; padding: 12px 14px 12px 14px;
  box-sizing: border-box;
}
.bubble.file .file-meta { flex: 1; min-width: 0; }
.bubble.file .file-name {
  font-size: 15px; font-weight: 600; color: var(--text-strong);
  word-break: break-all; line-height: 1.35;
}
.bubble.file .file-size { font-size: 12px; color: var(--text3); margin-top: 6px; }
.bubble.file .file-ico-wrap {
  position: relative; width: 46px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.bubble.file .file-ico-img {
  width: 42px; height: 42px; object-fit: contain; display: block;
  pointer-events: none; user-select: none;
}
.bubble.file.uploading .file-ico-img { opacity: .38; }
.bubble.file .file-ring {
  position: absolute; inset: 2px; border-radius: 50%;
  background: conic-gradient(#576b95 calc(var(--p, 0) * 1%), rgba(120,120,120,.22) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 0);
  pointer-events: none;
}
.bubble.file .file-ctrl {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: transparent; padding: 0; cursor: pointer; z-index: 2;
}
.bubble.file .file-ctrl.pause::before,
.bubble.file .file-ctrl.pause::after {
  content: ''; position: absolute; top: 8px; width: 3px; height: 12px;
  border-radius: 1px; background: #576b95;
}
.bubble.file .file-ctrl.pause::before { left: 9px; }
.bubble.file .file-ctrl.pause::after { right: 9px; left: auto; }
.bubble.file .file-ctrl.resume::before {
  content: ''; position: absolute; left: 10px; top: 8px;
  border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #576b95;
}
.msg-row.me .bubble.file .file-ring {
  background: conic-gradient(#576b95 calc(var(--p, 0) * 1%), rgba(255,255,255,.35) 0);
}
.msg-row.me .bubble.file .file-ctrl.pause::before,
.msg-row.me .bubble.file .file-ctrl.pause::after,
.msg-row.me .bubble.file .file-ctrl.resume::before {
  /* keep blue like WeChat send bubble */
}
.fl-more-item span { font-size: 11px; color: #bdbdbd; text-align: center; line-height: 1.25; max-width: 72px; }
.fl-more-cancel {
  margin: 4px 6px 0; height: 48px; border: 0; border-radius: 10px;
  background: #2c2c2c; color: #eee; font-size: 16px; width: calc(100% - 12px); cursor: pointer;
}
.fl-more-badge {
  position: absolute; top: -4px; right: -6px; background: #fa5151; color: #fff;
  font-size: 9px; padding: 1px 4px; border-radius: 8px; font-weight: 700;
}

/* ========== 微信风格：气泡长按菜单 ========== */
.msg-pop-mask {
  position: fixed; inset: 0; z-index: 88; background: transparent;
}
.msg-pop {
  position: fixed; z-index: 89;
  min-width: 280px; max-width: min(92vw, 340px);
  background: #4c4c4c; border-radius: 10px;
  padding: 10px 6px 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  animation: msg-pop-in .16s ease-out;
}
@keyframes msg-pop-in {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}
.msg-pop-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 0;
}
.msg-pop-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 2px; cursor: pointer; border: 0; background: none; color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.msg-pop-item:active { opacity: .65; }
.msg-pop-item svg { width: 22px; height: 22px; fill: #fff; }
.msg-pop-item span { font-size: 11px; color: rgba(255,255,255,.92); line-height: 1.1; white-space: nowrap; }
.msg-pop-arrow {
  position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px;
  margin-left: -6px; background: #4c4c4c; transform: rotate(45deg);
  border-radius: 2px;
}
.msg-pop.arrow-top .msg-pop-arrow {
  bottom: auto; top: -6px;
}

.msg-react-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2px;
  background: #ececec;
  border-radius: 22px;
  padding: 5px 8px 5px 6px;
  margin: 0 8px 10px;
}
.msg-react-q {
  width: 34px; height: 34px; border: 0; background: transparent;
  font-size: 22px; line-height: 1; cursor: pointer; border-radius: 17px;
  padding: 0;
}
.msg-react-q:active { background: rgba(0,0,0,.08); transform: scale(1.12); }
.msg-react-q.on { background: rgba(0,0,0,.1); }
.msg-react-more {
  width: 26px; height: 26px; border: 0; border-radius: 13px;
  background: #fff; color: #555; font-size: 13px; line-height: 26px;
  cursor: pointer; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.msg-reacts {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px; max-width: 100%;
}
.msg-row.me .msg-reacts { justify-content: flex-end; }
.msg-react-pill {
  display: inline-flex; align-items: center; gap: 3px;
  height: 22px; padding: 0 6px 0 5px;
  border: 0; border-radius: 11px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  font-size: 13px; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.msg-row.me .msg-react-pill { background: #e9f8df; }
.msg-react-av, .msg-react-pill .avatar {
  width: 16px !important; height: 16px !important;
  border-radius: 50% !important; font-size: 9px !important;
  overflow: hidden; flex-shrink: 0;
}
.msg-react-n { font-size: 10px; color: #666; }
.msg-react-sheet-mask {
  position: fixed; inset: 0; z-index: 92;
  background: rgba(0,0,0,.35);
  display: flex; align-items: flex-end; justify-content: center;
}
.msg-react-sheet {
  width: 100%; max-width: 520px;
  max-height: 72vh;
  background: #f4f4f6;
  border-radius: 16px 16px 0 0;
  padding: 10px 12px calc(16px + var(--sab, 0px));
  display: flex; flex-direction: column;
}
.msg-react-search {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 10px; padding: 8px 10px; margin-bottom: 10px;
  color: #888; font-size: 14px;
}
.msg-react-search input {
  flex: 1; border: 0; outline: none; background: transparent;
  font-size: 15px; color: #111;
}
.msg-react-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;
  overflow-y: auto; padding-bottom: 8px;
}
.msg-react-grid button {
  height: 40px; border: 0; background: transparent;
  font-size: 26px; cursor: pointer; border-radius: 8px;
}
.msg-react-grid button:active { background: #e4e4e8; }

/* ========== 支付密码弹层（图二） ========== */
.pay-sheet-mask {
  position: fixed; inset: 0; z-index: 96;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.pay-sheet {
  width: 100%; max-width: 520px;
  background: #2c2c2c; border-radius: 14px 14px 0 0;
  padding-bottom: var(--sab, 0px);
  animation: pay-up .22s ease-out;
}
@keyframes pay-up {
  from { transform: translateY(40%); opacity: .6; }
  to { transform: translateY(0); opacity: 1; }
}
.pay-sheet-hd {
  position: relative; text-align: center;
  padding: 14px 44px 8px; color: #e8e8e8; font-size: 15px;
}
.pay-sheet-x {
  position: absolute; left: 14px; top: 12px;
  width: 32px; height: 32px; border: 0; border-radius: 16px;
  background: transparent; color: #fff; font-size: 22px; cursor: pointer; line-height: 1;
}
.pay-sheet-amt {
  text-align: center; font-size: 36px; font-weight: 600; color: #fff;
  padding: 6px 16px 16px; letter-spacing: .5px;
}
.pay-sheet-method {
  margin: 0 16px; background: #3a3a3a; border-radius: 10px; overflow: hidden;
}
.pay-sheet-method-row {
  display: flex; align-items: center; padding: 12px 14px; color: #cfcfcf; font-size: 14px;
}
.pay-sheet-method-row .lab { color: #999; margin-right: 12px; }
.pay-sheet-method-row .chg { margin-left: auto; color: #8a8a8a; font-size: 13px; }
.pay-sheet-method-sel {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-top: 1px solid #333; color: #eee; font-size: 15px;
}
.pay-sheet-method-sel .pay-lq-ico {
  width: 22px; height: 22px; border-radius: 4px; object-fit: contain;
  flex-shrink: 0; display: block; background: transparent;
}
.pay-sheet-method-sel .pay-lq-fallback {
  width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fa9d3b; color: #fff; font-size: 14px; font-weight: 700;
}
.pay-sheet-method-sel .ck { margin-left: auto; color: #07c160; font-size: 18px; }
.pay-pin-boxes {
  display: flex; justify-content: center; gap: 8px; padding: 22px 16px 10px;
}
.pay-pin-box {
  width: 40px; height: 44px; border-radius: 6px; background: #1a1a1a;
  border: 1px solid #444; display: flex; align-items: center; justify-content: center;
}
.pay-pin-box .dot {
  width: 10px; height: 10px; border-radius: 50%; background: #fff; display: none;
}
.pay-pin-box.on .dot { display: block; }
.pay-pad {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: #1f1f1f; margin-top: 8px;
}
.pay-key {
  height: 54px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff; border-top: 1px solid #333; border-right: 1px solid #333;
  cursor: pointer; user-select: none; background: #2a2a2a;
}
.pay-key:nth-child(3n) { border-right: 0; }
.pay-key:active { background: #3a3a3a; }
.pay-key.empty { background: #1f1f1f; pointer-events: none; }
.pay-key.del { font-size: 20px; color: #ddd; }
.pay-sheet-tip {
  text-align: center; color: #999; font-size: 12px; margin-top: 10px;
}
.pay-sheet-forgot {
  text-align: center; color: #576b95; font-size: 14px;
  padding: 12px 16px 4px; cursor: pointer;
}
body.light .pay-sheet-forgot { color: #576b95; }

/* 汇款提交后：发送中 */
.wd-tx-mask {
  position: fixed; inset: 0; z-index: 120;
  background: #f4f1fb;
  display: flex; flex-direction: column;
}
.wd-tx-page {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center;
  padding: calc(12px + var(--sat, 0px)) 28px calc(28px + var(--sab, 0px));
  max-width: 520px; width: 100%; margin: 0 auto;
  box-sizing: border-box;
}
.wd-tx-x {
  align-self: flex-end;
  width: 36px; height: 36px; border: 0; background: transparent;
  color: #111; font-size: 26px; line-height: 1; cursor: pointer;
}
.wd-tx-logo-wrap {
  margin: 56px 0 28px;
  width: 88px; height: 88px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(80, 50, 140, .18);
}
.wd-tx-logo {
  width: 88px; height: 88px;
  object-fit: cover; display: block;
  animation: wd-tx-pulse 1.8s ease-in-out infinite;
}
@keyframes wd-tx-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: .92; }
}
.wd-tx-title {
  font-size: 22px; font-weight: 700; color: #111;
  text-align: center; line-height: 1.35;
}
.wd-tx-title b { font-weight: 800; }
.wd-tx-sub {
  margin-top: 12px;
  font-size: 14px; color: #8a8a8a;
  text-align: center; line-height: 1.5;
}
.wd-tx-actions {
  margin-top: auto; width: 100%;
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 40px;
}
.wd-tx-btn {
  width: 100%; height: 50px; border: 0; border-radius: 12px;
  font-size: 16px; font-weight: 600; cursor: pointer;
}
.wd-tx-btn.primary { background: #1db954; color: #fff; }
.wd-tx-btn.primary:active { opacity: .88; }

/* 普通皮肤（浅色）：支付密码 / 付款确认 */
body.light .pay-sheet {
  background: #f2f2f2;
  box-shadow: 0 -8px 28px rgba(0,0,0,.12);
}
body.light .pay-sheet-hd { color: #111; }
body.light .pay-sheet-x { color: #111; }
body.light .pay-sheet-amt { color: #111; }
body.light .pay-sheet-method {
  background: #fff;
  border: 1px solid #ebebeb;
}
body.light .pay-sheet-method-row { color: #666; }
body.light .pay-sheet-method-row .lab { color: #888; }
body.light .pay-sheet-method-row .chg { color: #888; }
body.light .pay-sheet-method-sel {
  border-top-color: #f0f0f0;
  color: #111;
}
body.light .pay-sheet-tip { color: #888; }
body.light .pay-pin-boxes .pay-pin-box,
body.light .pay-pin-box {
  background: #fff;
  border: 1px solid #dcdcdc;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
body.light .pay-pin-box .dot { background: #111; }
body.light .pay-pad {
  background: #d9d9d9;
  border-top: 1px solid #cfcfcf;
}
body.light .pay-key {
  background: #fff;
  color: #111;
  border-top-color: #cfcfcf;
  border-right-color: #cfcfcf;
}
body.light .pay-key:active { background: #f0f0f0; }
body.light .pay-key.empty { background: #d9d9d9; }
body.light .pay-key.del { color: #333; }

/* 普通皮肤：转账结果流 */
body.light .tf-flow { background: #f7f7f7; color: #111; }
body.light .tf-flow-nav button { color: #111; }
body.light .tf-flow-status { color: #111; }
body.light .tf-flow-amt { color: #111; }
body.light .tf-flow-link { color: #576b95; }
body.light .tf-flow-meta { color: #888; }
body.light .tf-flow-meta-row b { color: #333; }
body.light .tf-flow-hint { color: #888; }
body.light .tf-flow-bill { color: #576b95; }

/* ========== 应用锁 ========== */
.app-lock-mask {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg, #111);
  display: flex; align-items: stretch; justify-content: center;
}
.app-lock-card {
  width: 100%; max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column;
  padding: calc(48px + var(--sat, 0px)) 0 calc(12px + var(--sab, 0px));
  box-sizing: border-box; position: relative;
  background: var(--bg-list, #1a1a1a);
}
body.light .app-lock-card { background: #f7f7f7; }
.app-lock-x {
  position: absolute; top: calc(10px + var(--sat, 0px)); left: 12px;
  width: 40px; height: 40px; border: 0; background: transparent;
  color: var(--text-strong); font-size: 28px; cursor: pointer; line-height: 1;
}
.app-lock-ico {
  display: flex; justify-content: center; margin-top: 24px;
  color: var(--text-strong);
}
.app-lock-ico .app-lock-logo {
  width: 64px; height: 64px; object-fit: contain; display: block;
}
.app-lock-title {
  text-align: center; font-size: 18px; font-weight: 500;
  color: var(--text-strong); margin-top: 16px;
}
.app-lock-hint {
  text-align: center; font-size: 13px; color: var(--text3, #999);
  margin-top: 8px; padding: 0 28px; line-height: 1.5;
}
.app-lock-boxes { margin-top: 12px; }
.app-lock-boxes.shake-wrong {
  animation: al-pin-shake .42s cubic-bezier(.36,.07,.19,.97) both;
}
.app-lock-boxes.shake-wrong .pay-pin-box {
  border-color: #fa5151;
  background: rgba(250, 81, 81, .12);
}
@keyframes al-pin-shake {
  0%, 100% { transform: translateX(0); }
  12% { transform: translateX(-10px); }
  24% { transform: translateX(10px); }
  36% { transform: translateX(-8px); }
  48% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  72% { transform: translateX(5px); }
  84% { transform: translateX(-2px); }
  96% { transform: translateX(2px); }
}
.app-lock-fail {
  color: #fa5151;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
  padding: 0 4px;
  text-align: center;
  max-width: 92%;
}
.app-lock-mid {
  flex: 1;
  display: flex;
  /* 提示偏下一点，靠近键盘上方（以前风格） */
  align-items: flex-end;
  justify-content: center;
  min-height: 48px;
  padding: 10px 18px 14px;
}
.app-lock-bottom {
  margin-top: 0;
  flex-shrink: 0;
  padding-bottom: calc(4px + var(--sab, 0px));
}
.app-lock-pad { margin-top: 0; flex-shrink: 0; }
.app-lock-footer {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 18px calc(18px + var(--sab, 0px));
  margin-top: 4px;
}
.app-lock-footer a {
  color: var(--text3, #999); font-size: 14px; text-decoration: none;
}
.app-lock-footer a:active { opacity: .65; }
.app-lock-footer-sep { color: var(--text4, #666); font-size: 12px; }
body.light .app-lock-footer a { color: #576b95; }
body.light .app-lock-footer-sep { color: #c0c0c0; }
body.light .app-lock-pad { background: #e8e8e8; }
body.light .app-lock-pad .pay-key {
  background: #fff; color: #111; border-color: #e0e0e0;
}
body.light .app-lock-pad .pay-key.empty { background: #e8e8e8; }
body.light .app-lock-pad .pay-key:active { background: #f0f0f0; }
body.light .pay-pin-box {
  background: #fff; border-color: #ddd;
}
body.light .pay-pin-box .dot { background: #111; }

/* ========== 红包封面 / 打开结果（图3-5） ========== */
.rp-cover-mask {
  position: fixed; inset: 0; z-index: 95;
  /* 过深遮罩在部分机型会像旁边黑影；略浅更稳 */
  background: rgba(0,0,0,.42);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.rp-cover {
  width: min(78vw, 300px); aspect-ratio: 3/4.2;
  background: linear-gradient(180deg, #e0543c 0%, #c93628 55%, #b82d22 100%);
  border-radius: 12px; position: relative; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 18px 18px;
  -webkit-transform: translateZ(0); transform: translateZ(0);
  perspective: 720px;
}
.rp-cover-hd {
  display: flex; align-items: center; gap: 8px; align-self: stretch; color: #f6d59a; font-size: 13px;
}
.rp-cover-hd .avatar, .rp-cover-hd img { width: 28px; height: 28px; border-radius: 4px; }
.rp-cover-note {
  margin-top: 28px; color: #ffe9b5; font-size: 20px; font-weight: 500; text-align: center;
  line-height: 1.35; padding: 0 8px;
}
.rp-cover-flap {
  position: absolute; left: 0; right: 0; bottom: 28%;
  height: 48%; background: radial-gradient(120% 80% at 50% 0%, #d44532 0%, #b82d22 70%);
  border-radius: 50% 50% 0 0 / 28% 28% 0 0;
  transform-origin: 50% 0%;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .35s;
}
.rp-cover.opening .rp-cover-flap {
  transform: translateY(-118%) scaleY(1.05);
  opacity: .35;
}
.rp-cover-open {
  position: absolute; left: 50%; bottom: 18%;
  width: 86px; height: 86px; margin-left: -43px;
  border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #f0c45a 55%, #d4a03a);
  color: #6b3a12; font-size: 34px; font-weight: 700;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.35);
  z-index: 2; line-height: 86px; padding: 0;
  transition: transform .2s;
  -webkit-appearance: none; appearance: none;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}
.rp-cover-open .rp-open-txt { display: block; }
.rp-cover-open .rp-open-coin {
  display: none; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none;
}
.rp-cover-open:active:not(.spin) { transform: scale(.96); }
.rp-cover-open.spin {
  background: transparent;
  box-shadow: none;
  color: transparent;
  line-height: 0;
  animation: rp-coin-spin .7s linear infinite;
}
.rp-cover-open.spin .rp-open-txt { display: none; }
.rp-cover-open.spin .rp-open-coin { display: block; }
@keyframes rp-coin-spin {
  from { transform: perspective(480px) rotateY(0deg); }
  to { transform: perspective(480px) rotateY(360deg); }
}
.rp-cover-x {
  margin-top: 22px; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid rgba(240, 196, 90, .85); background: transparent;
  color: #f0c45a; font-size: 22px; cursor: pointer; line-height: 1;
}

/* —— 聊天关键字特效（仅叠在当前聊天室，离开即消失） —— */
#screen-chat .fl-emoji-rain,
.fl-emoji-rain {
  position: absolute; inset: 0; z-index: 45; pointer-events: none; overflow: hidden;
}
.fl-emoji-drop {
  position: absolute; top: -12vh; will-change: transform, opacity;
  animation-name: fl-emoji-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  user-select: none;
}
.fl-emoji-drop.fx-rp,
.fl-emoji-drop.fx-heart {
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.18));
}
.fl-emoji-drop.fx-heart {
  filter: drop-shadow(0 2px 4px rgba(255,80,120,.35));
}
.fl-emoji-drop.fx-bomb {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
.fl-emoji-drop.fx-poop {
  filter: drop-shadow(0 2px 4px rgba(120,70,20,.35));
}
.fl-emoji-drop.fx-poop-splash {
  animation-name: fl-emoji-poop-splash !important;
  animation-duration: 2s !important;
  animation-timing-function: ease-out !important;
}
.fl-emoji-drop.fx-rain-dot {
  width: 4px; height: 12px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(120,170,255,.15), rgba(80,140,240,.85));
  font-size: 0 !important; color: transparent;
  box-shadow: 0 0 2px rgba(100,160,255,.4);
}
.fl-emoji-drop.fx-swim,
.fl-emoji-drop.fx-fly,
.fl-emoji-drop.fx-pop,
.fl-emoji-drop.fx-burst {
  top: auto;
}
@keyframes fl-emoji-fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg));
    opacity: 1;
  }
  85% { opacity: 1; }
  100% {
    transform: translate3d(var(--drift, 0px), 115vh, 0) rotate(calc(var(--rot, 0deg) + var(--spin, 40deg)));
    opacity: 0;
  }
}
@keyframes fl-emoji-swim {
  0% {
    transform: translate3d(0, 0, 0) scaleX(var(--flip, 1));
    opacity: 0;
  }
  8% { opacity: 1; }
  50% {
    transform: translate3d(calc(var(--swim-x) * .5), -8px, 0) scaleX(var(--flip, 1));
  }
  92% { opacity: 1; }
  100% {
    transform: translate3d(var(--swim-x), 6px, 0) scaleX(var(--flip, 1));
    opacity: 0;
  }
}
@keyframes fl-emoji-fly {
  0% {
    transform: translate3d(0, 0, 0) rotate(-8deg);
    opacity: 0;
  }
  10% { opacity: 1; }
  100% {
    transform: translate3d(var(--fly-x), var(--fly-y), 0) rotate(12deg);
    opacity: 0;
  }
}
@keyframes fl-emoji-pop {
  0% {
    transform: translate3d(0, 0, 0) scale(.4);
    opacity: 0;
  }
  15% {
    transform: translate3d(0, -18vh, 0) scale(1.15);
    opacity: 1;
  }
  70% {
    transform: translate3d(0, -55vh, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -95vh, 0) scale(.85);
    opacity: 0;
  }
}
@keyframes fl-emoji-burst {
  0% {
    transform: translate3d(0, 0, 0) scale(.3);
    opacity: 0;
  }
  18% {
    opacity: 1;
    transform: translate3d(calc(var(--bx) * .35), calc(var(--by) * .35), 0) scale(1.1);
  }
  100% {
    transform: translate3d(var(--bx), var(--by), 0) scale(.7);
    opacity: 0;
  }
}
@keyframes fl-emoji-poop-splash {
  0% {
    transform: translate3d(var(--drift, 0px), 70vh, 0) scale(1.2);
    opacity: 1;
  }
  40% {
    transform: translate3d(var(--drift, 0px), 78vh, 0) scale(1.45);
    opacity: 1;
  }
  100% {
    transform: translate3d(calc(var(--drift, 0px) + 20px), 110vh, 0) scale(.9);
    opacity: 0;
  }
}

.rp-result {
  position: fixed; inset: 0; z-index: 96; background: #111;
  display: flex; flex-direction: column;
  padding-top: var(--sat, 0px); padding-bottom: var(--sab, 0px);
  color: #e8e8e8;
}
.rp-result-top {
  height: 100px; background: #e0543c;
  border-radius: 0 0 50% 50% / 0 0 28px 28px;
  position: relative; flex-shrink: 0;
}
.rp-result-nav {
  position: absolute; inset: 8px 8px auto 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.rp-result-nav button {
  width: 40px; height: 40px; border: 0; background: transparent; color: #fff;
  font-size: 24px; cursor: pointer; line-height: 1;
}
.rp-result-scroll {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  margin-top: -8px;
}
.rp-result-body { text-align: center; padding: 4px 20px 8px; }
.rp-result-from {
  display: inline-flex; align-items: center; gap: 8px; color: #e8e8e8; font-size: 14px; margin-top: 4px;
}
.rp-result-from .avatar, .rp-result-from img { width: 22px; height: 22px; border-radius: 4px; }
.rp-pin-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 3px; margin-left: 2px;
  background: #e8b34b; color: #6b3a12; font-size: 10px; font-weight: 700;
  font-style: normal; line-height: 1;
}
.rp-pin-badge.sm { width: 14px; height: 14px; font-size: 9px; }
.rp-result-note { color: #999; font-size: 14px; margin-top: 10px; }
.rp-result-amt {
  margin-top: 22px; font-size: 48px; font-weight: 600; color: #e8b34b;
  letter-spacing: 1px;
}
.rp-result-amt small { font-size: 18px; margin-left: 4px; font-weight: 500; }
.rp-result-tip {
  margin-top: 12px; color: #c9a35b; font-size: 13px; cursor: pointer;
}
.rp-result-reply {
  margin: 22px auto 0; display: inline-flex; align-items: center; gap: 8px;
  background: #2a2a2a; color: #ddd; border: 0; border-radius: 8px;
  padding: 12px 22px; font-size: 15px; cursor: pointer;
}
.rp-result-empty {
  margin: 28px 0 8px; color: #888; font-size: 14px;
}
.rp-result-sum {
  margin: 18px 16px 0; padding-top: 14px;
  border-top: 1px solid #222;
  color: #888; font-size: 13px;
}
.rp-result-list { padding: 4px 0 24px; }
.rp-share-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid #1f1f1f;
}
.rp-share-idx {
  width: 18px; flex-shrink: 0; text-align: center;
  color: #888; font-size: 13px; font-variant-numeric: tabular-nums;
}
.rp-share-row.is-best .rp-share-idx { color: #c9a35b; font-weight: 600; }
.rp-share-row .avatar, .rp-share-row img {
  width: 40px; height: 40px; border-radius: 6px; flex-shrink: 0;
}
.rp-share-main { flex: 1; min-width: 0; }
.rp-share-name {
  color: #e8e8e8; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-share-time { color: #777; font-size: 12px; margin-top: 3px; }
.rp-share-right { text-align: right; flex-shrink: 0; }
.rp-share-amt { color: #e8e8e8; font-size: 15px; font-weight: 500; }
.rp-share-best {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 3px; color: #c9a35b; font-size: 11px;
}
.rp-crown {
  display: inline-block; width: 12px; height: 12px;
  background: #e8b34b;
  clip-path: polygon(10% 80%, 0 30%, 30% 50%, 50% 10%, 70% 50%, 100% 30%, 90% 80%);
}
.rp-share-empty {
  text-align: center; color: #666; font-size: 13px; padding: 24px 16px;
}

/* 收到的红包汇总 */
.rp-recv {
  position: fixed; inset: 0; z-index: 97; background: #111; color: #eee;
  display: flex; flex-direction: column;
  padding-bottom: var(--sab, 0px);
}
.rp-recv-hd {
  background: #e0543c; padding-top: var(--sat, 0px); flex-shrink: 0;
}
.rp-recv-nav {
  height: 48px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px; color: #fff;
}
.rp-recv-nav button {
  width: 44px; height: 44px; border: 0; background: transparent; color: #fff;
  font-size: 24px; cursor: pointer;
}
.rp-recv-title { font-size: 17px; font-weight: 500; }
.rp-recv-body {
  flex: 1; overflow-y: auto; text-align: center; padding: 8px 0 24px;
}
.rp-recv-year {
  text-align: right; padding: 8px 16px; color: #c9a35b; font-size: 14px; cursor: pointer;
}
.rp-recv-avatar {
  display: flex; justify-content: center; margin-top: 8px;
}
.rp-recv-avatar .avatar, .rp-recv-avatar img {
  width: 56px !important; height: 56px !important; border-radius: 8px !important;
}
.rp-recv-who { margin-top: 12px; font-size: 15px; color: #ddd; }
.rp-recv-total {
  margin-top: 10px; font-size: 52px; font-weight: 600; color: #fff; letter-spacing: 1px;
}
.rp-recv-stats {
  display: flex; justify-content: center; gap: 56px; margin: 18px 0 10px;
}
.rp-recv-stats b { display: block; font-size: 22px; color: #fff; font-weight: 600; }
.rp-recv-stats span { display: block; margin-top: 4px; font-size: 12px; color: #888; }
.rp-recv-list { text-align: left; margin-top: 8px; }
.rp-recv-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-top: 1px solid #222; cursor: pointer;
}
.rp-recv-from {
  display: flex; align-items: center; gap: 6px;
  color: #e8e8e8; font-size: 15px;
}
.rp-recv-date { color: #777; font-size: 12px; margin-top: 4px; }
.rp-recv-row-r { color: #e8e8e8; font-size: 15px; font-weight: 500; }

/* ========== 转账待收款 / 已收款（图6-7） ========== */
.tf-flow {
  position: fixed; inset: 0; z-index: 90; background: #000;
  display: flex; flex-direction: column;
  padding-top: var(--sat, 0px); padding-bottom: var(--sab, 0px);
  color: #fff;
}
.tf-flow-nav {
  height: 48px; display: flex; align-items: center; padding: 0 8px;
}
.tf-flow-nav button {
  width: 44px; height: 44px; border: 0; background: transparent; color: #fff;
  font-size: 26px; cursor: pointer;
}
.tf-flow-main {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 28px 24px 20px; text-align: center;
}
.tf-flow-ico {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.tf-flow-ico.wait { background: #2f7dba; }
.tf-flow-ico.ok { background: #07c160; }
.tf-flow-ico svg { width: 28px; height: 28px; fill: #fff; }
.tf-flow-status { font-size: 17px; color: #eee; margin-bottom: 12px; }
.tf-flow-amt { font-size: 40px; font-weight: 600; letter-spacing: .5px; }
.tf-flow-link {
  margin-top: 14px; color: #6fa8dc; font-size: 14px; cursor: pointer;
}
.tf-flow-meta {
  width: 100%; max-width: 420px; margin-top: 36px;
  border-top: 1px solid #222; padding-top: 14px;
}
.tf-flow-meta-row {
  display: flex; justify-content: space-between; padding: 10px 0;
  font-size: 14px; color: #aaa;
}
.tf-flow-meta-row b { color: #e8e8e8; font-weight: 400; }
.tf-flow-foot {
  padding: 12px 20px calc(18px + var(--sab, 0px)); width: 100%; max-width: 480px; margin: 0 auto;
  box-sizing: border-box;
}
.tf-flow-btn {
  width: 100%; height: 48px; border: 0; border-radius: 8px;
  background: #07c160; color: #fff; font-size: 17px; font-weight: 500; cursor: pointer;
}
.tf-flow-btn:active { background: #06ad56; }
.tf-flow-hint {
  text-align: center; margin-top: 12px; font-size: 12px; color: #777;
}
.tf-flow-hint a { color: #576b95; text-decoration: none; }
.tf-flow-bill {
  text-align: center; padding: 16px; color: #777; font-size: 13px; cursor: pointer;
}
.tf-refund-card .mc-body { text-align: center; padding: 28px 20px 22px; font-size: 16px; color: var(--text-strong); }
.tf-refund-card .mc-actions .tf-refund-ok { color: #07c160; font-weight: 500; }

/* —— 礼物动画选择 / 气泡 / 全屏特效 —— */
.gift-sheet-mask {
  position: fixed; inset: 0; z-index: 270;
  background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.gift-sheet {
  width: 100%; max-width: 480px;
  background: var(--bg-elev, #1c1c1e);
  border-radius: 16px 16px 0 0;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  color: var(--text);
  box-shadow: 0 -8px 28px rgba(0,0,0,.25);
}
.gift-sheet-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.gift-sheet-title { font-size: 17px; font-weight: 600; }
.gift-sheet-x {
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: var(--bg, #2c2c2e); color: var(--text2, #aaa);
  font-size: 20px; cursor: pointer; line-height: 1;
}
.gift-sheet-bal { font-size: 13px; color: var(--text3, #888); margin-bottom: 12px; }
.gift-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.gift-card {
  border: 1px solid var(--border, rgba(255,255,255,.08));
  background: var(--bg, #111);
  border-radius: 12px; padding: 8px 6px 10px;
  color: var(--text); cursor: pointer; text-align: center;
}
.gift-card:active { transform: scale(.97); }
.gift-card-preview {
  width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: #1a1a1c;
  margin-bottom: 8px;
  position: relative;
}
.gift-card-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 36px; z-index: 0;
}
.gift-card-preview video {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: contain; display: block;
  pointer-events: none;
  /* 预览视频若自带棋盘格，选择页不循环强刷，避免刺眼 */
  opacity: .92;
}
.gift-card-name { font-size: 13px; font-weight: 500; }
.gift-card-price { font-size: 12px; color: #fa9d3b; margin-top: 2px; }
.gift-sheet-tip {
  margin-top: 12px; font-size: 12px; color: var(--text3, #888); line-height: 1.5;
}

/* 旧气泡样式保留兼容；新版礼物用系统条 */
.bubble.gift {
  min-width: 148px; max-width: 200px; padding: 0; overflow: hidden;
  background: linear-gradient(135deg, #ff8f6b, #ff5a7a);
  color: #fff; cursor: pointer;
}
.msg-row.me .bubble.gift {
  background: linear-gradient(135deg, #ff7a59, #ff4d6d);
}
.gift-b-ico {
  font-size: 28px; line-height: 1; padding: 12px 14px 0;
}
.gift-b-body { padding: 6px 14px 10px; }
.gift-b-name { font-size: 15px; font-weight: 600; }
.gift-b-price { font-size: 13px; opacity: .92; margin-top: 2px; }
.gift-b-foot {
  padding: 6px 14px; font-size: 11px; opacity: .85;
  border-top: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.08);
}

/* 聊天室叠加：透明、可穿透，不挡顶栏/输入框 */
#screen-chat { position: relative; }
.fl-gift-fx {
  position: absolute;
  left: 0; right: 0;
  z-index: 40;
  background: transparent !important;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none !important;
  overflow: hidden;
}
.fl-gift-fx-src {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
  left: -99px; top: -99px;
}
.fl-gift-fx-canvas {
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  background: transparent !important;
  pointer-events: none !important;
}
body.light .gift-sheet { background: #f7f7f7; color: #111; }
body.light .gift-sheet-x { background: #e8e8e8; color: #666; }
body.light .gift-card { background: #fff; border-color: #e5e5e5; color: #111; }
body.light .gift-card-preview { background: #f0f0f0; }

/* 星空世界论坛 */
.fw-page .form-page-body { background: var(--bg); padding-bottom: 24px; position: relative; }
.fw-tabs { display: flex; align-items: center; gap: 8px; padding: 10px 14px; position: sticky; top: 0; background: var(--bg); z-index: 2; }
.fw-tabs-l { display: flex; gap: 8px; min-width: 0; flex: 1; overflow-x: auto; }
.fw-tabs-l button { border: 0; background: var(--bg-elev); color: var(--text3); border-radius: 16px; padding: 6px 14px; font-size: 14px; flex-shrink: 0; }
.fw-tabs-l button.on { background: #111; color: #fff; }
body.light .fw-tabs-l button.on { background: #111; color: #fff; }
.fw-pub {
  margin-left: auto; flex-shrink: 0; border: 0;
  background: #07c160; color: #fff; border-radius: 16px;
  padding: 6px 16px; font-size: 14px; font-weight: 650;
}
.fw-pub:active { opacity: .85; }
.fw-page .ptr-head { justify-content: center; }
.fw-page .ptr-logo { width: 36px; height: 36px; margin-bottom: 12px; }
.fw-feed { padding: 0 0 24px; }
.fw-post { padding: 14px 16px 8px; border-bottom: 8px solid var(--bg); background: var(--bg-elev); }
.fw-post-hd { display: flex; gap: 10px; align-items: center; }
.fw-meta { min-width: 0; }
.fw-name { font-weight: 600; color: var(--text-strong); display: flex; align-items: center; gap: 6px; }
.fw-sex { font-size: 12px; font-weight: 700; line-height: 1; }
.fw-sex.male { color: #3b82f6; }
.fw-sex.female { color: #ec4899; }
.fw-sex-pick { display: flex; gap: 10px; }
.fw-sex-pick button {
  flex: 1; border: 1px solid var(--line, #ddd); background: var(--bg-elev); color: var(--text-strong);
  border-radius: 10px; padding: 10px 0; font-size: 15px;
}
.fw-sex-pick button.on { border-color: #07c160; background: rgba(7,193,96,.12); color: #07c160; font-weight: 600; }
.fw-time { font-size: 12px; color: var(--text4); margin-top: 2px; }
.fw-body { margin: 10px 0 8px; font-size: 15px; line-height: 1.55; color: var(--text-strong); word-break: break-word; }
.fw-tick { color: #07c160; font-weight: 600; }
.fw-imgs.one img { width: 100%; max-height: 280px; object-fit: cover; border-radius: 10px; display: block; }
.fw-imgs.grid { display: grid; gap: 4px; grid-template-columns: repeat(3, 1fr); }
.fw-imgs.grid img { width: 100%; height: 88px; object-fit: cover; border-radius: 6px; }
.fw-video video { width: 100%; max-height: 280px; border-radius: 10px; background: #000; }
.fw-file { display: block; margin: 8px 0; padding: 10px 12px; background: var(--bg); border-radius: 8px; color: var(--text-strong); text-decoration: none; }
.fw-trade { margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: #111; color: #fff; display: flex; justify-content: space-between; align-items: center; }
.fw-trade.down { background: #1a1a1a; }
.fw-trade-pnl { color: #07c160; font-weight: 700; }
.fw-trade.down .fw-trade-pnl { color: #fa5151; }
.fw-bar { display: flex; align-items: center; gap: 6px; padding: 4px 0 6px; }
.fw-act { border: 0; background: transparent; color: var(--text3); font-size: 13px; padding: 6px 8px; }
.fw-act.on { color: #fa5151; }
.fw-views { margin-left: auto; color: var(--text4); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.fw-views svg { display: block; flex-shrink: 0; }
.fw-setup { padding: 8px 16px 32px; }
.fw-setup-sub { color: var(--text3); font-size: 14px; line-height: 1.6; }
.fw-setup-av { width: 88px; height: 88px; margin: 18px auto; position: relative; }
.fw-setup-av-img, .fw-setup-av-img .avatar { width: 88px; height: 88px; border-radius: 44px; }
.fw-setup-edit { position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; border-radius: 13px; background: #fff; color: #333; text-align: center; line-height: 26px; font-size: 13px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.fw-field { margin: 14px 0; }
.fw-lab { font-size: 13px; color: var(--text3); margin-bottom: 6px; }
.fw-field input, .fw-field textarea, .fw-compose, .fw-cmt-bar input {
  width: 100%; box-sizing: border-box; border: 0; background: var(--bg-elev); border-radius: 8px;
  padding: 12px; color: var(--text-strong); font-size: 15px;
}
.fw-hint { display: flex; justify-content: space-between; color: var(--text4); font-size: 12px; margin-top: 6px; }
.fw-setup-btn { width: calc(100% - 0px); margin-top: 18px; }
.fw-setup-btn:disabled { opacity: .45; }
.fw-compose { min-height: 140px; margin: 12px 16px; resize: vertical; }
.fw-compose-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.fw-compose-bar button { border: 0; background: var(--bg-elev); color: var(--text-strong); border-radius: 16px; padding: 6px 12px; font-size: 13px; }
.fw-compose-media { padding: 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.fw-chip { background: var(--bg-elev); border-radius: 12px; padding: 4px 8px; font-size: 12px; color: var(--text3); }
.fw-chip span { margin-left: 6px; cursor: pointer; }
.fw-id-head { display: flex; gap: 12px; padding: 16px; align-items: flex-start; background: var(--bg-elev); }
.fw-id-name { font-size: 18px; font-weight: 700; }
.fw-id-bio { color: var(--text3); font-size: 13px; margin: 6px 0; line-height: 1.5; }
.fw-id-stats { font-size: 13px; color: var(--text-strong); }
.fw-follow { margin-left: auto; border: 0; background: #111; color: #fff; border-radius: 8px; padding: 8px 16px; font-weight: 600; }
.fw-follow.on { background: var(--bg); color: var(--text3); }
.fw-cmt { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.fw-cmt-text { margin: 4px 0; }
.fw-cmt-bar { display: flex; gap: 8px; padding: 10px 12px calc(10px + var(--sab, 0px)); background: var(--bg-elev); position: sticky; bottom: 0; }
.fw-cmt-bar button { border: 0; background: #07c160; color: #fff; border-radius: 8px; padding: 0 14px; }