/* ============================================================
   Glass Social — 移动端 APP 原型样式
   ============================================================ */

/* 聊天容器：进聊天需瞬间跳到底部（最新消息），禁用平滑滚动动画 */
#chatScroll { scroll-behavior: auto !important; }

/* ---------- 舞台布局 ---------- */
.stage {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  gap: 34px; padding: 28px 24px;
  transition: gap .35s var(--ease-inout);
}
/* 演示控制台折叠按钮（固定左上角） */
.side-toggle {
  position: fixed; top: 18px; left: 18px; z-index: 200;
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; cursor: pointer;
  color: var(--t-2);
  transition: transform .25s var(--ease-out), left .35s var(--ease-inout), color .2s;
}
.side-toggle:hover { transform: scale(1.06); color: var(--c-blue); }
.side-toggle svg { width: 18px; height: 18px; transition: transform .35s var(--ease-inout); }
.side-toggle.collapsed svg { transform: rotate(180deg); }

.stage-side {
  width: 300px; flex: none;
  display: flex; flex-direction: column; gap: 14px;
  max-height: 88vh; overflow-y: auto; padding-right: 4px;
  transition: transform .35s var(--ease-inout), opacity .3s var(--ease-inout), width .35s var(--ease-inout);
}
.stage-side.collapsed {
  transform: translateX(-340px);
  opacity: 0;
  pointer-events: none;
  width: 0; padding: 0; margin: 0; overflow: hidden;
}
/* 折叠后给手机腾出空间，让其真正居中 */
.stage.no-side { gap: 0; padding-left: 80px; padding-right: 80px; }

/* ---------- 纯净手机模式：默认只显示手机，无控制台、无折叠按钮 ---------- */
body.pure-phone .stage-side,
body.pure-phone .side-toggle,
body.is-plus .stage-side,
body.is-plus .side-toggle { display: none !important; }
body.pure-phone .stage,
body.is-plus .stage { gap: 0; padding: 0; min-height: 100vh; min-height: 100dvh; }
.stage-side::-webkit-scrollbar { width: 5px; }

/* ---------- 真机 / HBuilderX 5+ App 全屏适配：去掉手机外壳，让 screen 铺满真实屏幕 ---------- */
body.pure-phone,
body.is-plus { overflow: hidden; }
body.pure-phone .stage,
body.is-plus .stage {
  height: 100vh; height: 100dvh;
  align-items: stretch; justify-content: stretch;
}
body.pure-phone .phone-wrap,
body.is-plus .phone-wrap {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; height: 100dvh;
}
body.pure-phone .phone,
body.is-plus .phone {
  width: 100%; height: 100%;
  border-radius: 0; padding: 0;
  background: transparent; border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.pure-phone .phone::after,
body.is-plus .phone::after { display: none; }
body.pure-phone .screen,
body.is-plus .screen { border-radius: 0; }

/* 状态栏适配刘海/灵动岛，内容区域让出动态高度 */
body.pure-phone .status-bar,
body.is-plus .status-bar {
  height: auto; min-height: 46px;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(14px, env(safe-area-inset-left, 0px));
  padding-right: max(14px, env(safe-area-inset-right, 0px));
}
body.pure-phone .views,
body.is-plus .views { top: calc(46px + env(safe-area-inset-top, 0px)); }

/* TabBar 贴底并避让底部手势条 */
body.pure-phone .tabbar,
body.is-plus .tabbar {
  left: 0; right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  border-radius: 24px 24px 0 0;
}
body.pure-phone .views.has-tabbar,
body.is-plus .views.has-tabbar {
  bottom: calc(62px + env(safe-area-inset-bottom, 0px));
}
.stage-side::-webkit-scrollbar-thumb { background: rgba(47,124,246,.2); border-radius: 99px; }

.side-card { padding: 16px 16px 14px; border-radius: var(--r-l); }
.side-card h4 { font-size: 13px; letter-spacing: .4px; color: var(--t-2); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.side-card h4 .bar { width: 3px; height: 13px; border-radius: 2px; background: var(--grad-primary); }
.side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.side-btn {
  height: 34px; border-radius: var(--r-s); font-size: 12.5px; font-weight: 600;
  background: var(--glass-3); border: 1px solid var(--glass-brd); color: var(--t-2);
  transition: all var(--dur-f) var(--ease-out); box-shadow: var(--sd-1);
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.side-btn:hover { color: var(--c-blue); transform: translateY(-1px); box-shadow: var(--sd-2); }
.side-btn:active { transform: scale(.95); }
.side-btn.gold { background: var(--grad-vip); color: #4a2b00; border-color: rgba(255,255,255,.6); }
.side-btn.red { background: linear-gradient(135deg,#ff8a8a,#f4525f); color: #fff; }

.vip-slider { width: 100%; margin: 6px 0 2px; accent-color: var(--c-blue); }
.brand-mini { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.brand-logo {
  width: 38px; height: 38px; border-radius: 12px; background: var(--grad-primary);
  display: grid; place-items: center; box-shadow: var(--sd-glow); flex: none;
}
.brand-logo svg { width: 21px; height: 21px; }

/* ---------- 手机外壳 ---------- */
.phone-wrap { position: relative; flex: none; }
.phone {
  position: relative;
  width: 390px; height: 830px;
  border-radius: 54px;
  padding: 12px;
  background: linear-gradient(150deg, rgba(255,255,255,.85), rgba(226,240,255,.6));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow:
    0 40px 90px rgba(31, 74, 140, .22),
    0 10px 28px rgba(31, 74, 140, .12),
    inset 0 0 0 1px rgba(255,255,255,.7);
  backdrop-filter: blur(var(--blur-l));
  -webkit-backdrop-filter: blur(var(--blur-l));
}
.phone::after {
  content: ""; position: absolute; left: 50%; top: 22px; transform: translateX(-50%);
  width: 108px; height: 26px; border-radius: 99px;
  background: rgba(18, 38, 63, .82); z-index: 50; pointer-events: none;
}
.screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 44px; overflow: hidden;
  background:
    radial-gradient(700px 420px at 12% -6%, #dcefff 0%, transparent 62%),
    radial-gradient(560px 420px at 100% 16%, #f2e9ff 0%, transparent 58%),
    radial-gradient(620px 460px at 40% 108%, #e0f7f2 0%, transparent 60%),
    #f5faff;
  isolation: isolate;
}
.screen-blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.screen-blobs i { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; animation: floatBlob 16s var(--ease-inout) infinite; }
.screen-blobs i:nth-child(1) { width: 240px; height: 240px; left: -70px; top: 60px; background: rgba(70,209,236,.6); }
.screen-blobs i:nth-child(2) { width: 220px; height: 220px; right: -60px; top: 40%; background: rgba(168,107,255,.42); animation-delay: -6s; }
.screen-blobs i:nth-child(3) { width: 260px; height: 260px; left: 20%; bottom: -90px; background: rgba(47,124,246,.34); animation-delay: -11s; }

/* 状态栏 */
.status-bar {
  position: relative; z-index: 20;
  height: 46px; padding: 0 26px 0 30px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 700; color: var(--t-1);
}
.status-bar .sb-right { display: flex; align-items: center; gap: 5px; }
.sb-bar { width: 3px; border-radius: 1px; background: var(--t-1); }
.sb-battery { width: 22px; height: 11px; border: 1.4px solid var(--t-1); border-radius: 3px; position: relative; opacity: .85; }
.sb-battery::before { content: ""; position: absolute; inset: 1.5px; width: 72%; background: var(--t-1); border-radius: 1px; }
.sb-battery::after { content: ""; position: absolute; right: -3.5px; top: 3px; width: 2px; height: 5px; border-radius: 0 2px 2px 0; background: var(--t-1); }

/* ---------- 视图容器 ---------- */
.views { position: absolute; inset: 46px 0 0 0; z-index: 10; transition: bottom var(--dur-m) var(--ease-out); }
.views.has-tabbar { bottom: 84px; }  /* TabBar 浮在底部 12+62+10 安全区，让出空间避免 cell 透过 TabBar 露出 */
.view {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transform: scale(1.015);
  filter: blur(10px);
  transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out), filter var(--dur-m) var(--ease-out), visibility var(--dur-m);
  pointer-events: none;
}
.view.active {
  opacity: 1; visibility: visible; transform: none; filter: blur(0);
  pointer-events: auto;
}

/* 顶部导航条 */
.navbar {
  position: relative; z-index: 5; flex: none;
  height: 50px; padding: 0 14px;
  display: flex; align-items: center; gap: 8px;
  background: var(--glass-2);
  backdrop-filter: blur(var(--blur-l)) saturate(190%);
  -webkit-backdrop-filter: blur(var(--blur-l)) saturate(190%);
  border-bottom: 1px solid var(--glass-brd-soft);
}
.navbar .nav-title { font-size: 16.5px; font-weight: 700; letter-spacing: .3px; }
.nav-btn {
  width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center; flex: none;
  background: var(--glass-3); border: 1px solid var(--glass-brd-soft);
  box-shadow: var(--sd-1); color: var(--t-2);
  transition: all var(--dur-f) var(--ease-out);
}
.nav-btn:hover { color: var(--c-blue); transform: translateY(-1px); box-shadow: var(--sd-2); }
.nav-btn:active { transform: scale(.9); }
.nav-btn.plain { background: transparent; border-color: transparent; box-shadow: none; }

/* 视图主体 */
.view-body { flex: 1; min-height: 0; position: relative; }
.view-scroll { position: absolute; inset: 0; overflow-y: auto; padding-bottom: 84px; }

/* ---------- 底部 TabBar ---------- */
.tabbar {
  position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  height: 62px; padding: 6px;
  display: flex; align-items: center;
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(var(--blur-l)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-l)) saturate(180%);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 14px 34px rgba(31, 74, 140, .18);
}
.tab {
  flex: 1; height: 100%; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--t-3); font-size: 10.5px; font-weight: 600;
  position: relative;
  transition: color var(--dur-m) var(--ease-out), transform var(--dur-f) var(--ease-out);
}
.tab:active { transform: scale(.9); }
.tab svg { width: 21px; height: 21px; transition: transform var(--dur-m) var(--ease-spring); }
.tab.active { color: var(--c-blue); }
.tab.active svg { transform: translateY(-1px) scale(1.08); }
.tab.active::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 18px; background: var(--grad-primary-soft);
  box-shadow: inset 0 0 0 1px rgba(47,124,246,.14);
  animation: popIn .3s var(--ease-spring) both;
}
.tab > * { position: relative; }
.tab .dot { position: absolute; top: -3px; right: -12px; }
.tab-ico-wrap { position: relative; }

/* ---------- 会话列表 ---------- */
.search-bar { padding: 10px 14px 6px; }
.search-inner {
  height: 36px; border-radius: 12px; padding: 0 12px;
  display: flex; align-items: center; gap: 8px;
  background: var(--glass-2); border: 1px solid var(--glass-brd-soft);
  color: var(--t-3); font-size: 13px;
  backdrop-filter: blur(var(--blur-s));
  -webkit-backdrop-filter: blur(var(--blur-s));
}
.session-list { padding: 4px 12px 84px; display: flex; flex-direction: column; gap: 7px; }
.session {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 18px;
  background: var(--glass-2);
  backdrop-filter: blur(var(--blur-s)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--blur-s)) saturate(170%);
  border: 1px solid var(--glass-brd-soft);
  box-shadow: var(--sd-1);
  transition: all var(--dur-m) var(--ease-out);
  cursor: pointer; position: relative; overflow: hidden;
}
.session:hover { background: var(--glass-3); transform: translateY(-1px); box-shadow: var(--sd-2); }
.session:active { transform: scale(.985); }
.session.top { background: linear-gradient(135deg, rgba(70,209,236,.16), var(--glass-3)); border-color: rgba(47,124,246,.22); }
.session .s-name { font-size: 14.5px; font-weight: 600; }
.session .s-msg { font-size: 12.5px; color: var(--t-3); }
.session .s-time { font-size: 11px; color: var(--t-4); white-space: nowrap; }
.session-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }

/* ---------- 聊天页 ---------- */
.chat-view .view-body { background: transparent; }
.chat-scroll { position: absolute; inset: 0; overflow-y: auto; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 12px; }
.chat-day { align-self: center; font-size: 11px; color: var(--t-3); padding: 3px 12px; border-radius: 99px; background: var(--glass-2); border: 1px solid var(--glass-brd-soft); }

.msg { display: flex; gap: 9px; align-items: flex-start; animation: popIn .34s var(--ease-spring) both; max-width: 100%; }
.msg.self { flex-direction: row-reverse; }
.msg-col { display: flex; flex-direction: column; gap: 4px; max-width: 232px; min-width: 0; }
.msg.self .msg-col { align-items: flex-end; }
.bubble {
  position: relative;
  padding: 9px 13px; border-radius: 16px;
  font-size: 14px; line-height: 1.55;
  background: var(--glass-4);
  backdrop-filter: blur(var(--blur-m)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-m)) saturate(180%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--sd-1);
  word-break: break-word;
  transition: transform var(--dur-f) var(--ease-out);
}
.bubble:active { transform: scale(.98); }
.msg.self .bubble {
  background: linear-gradient(135deg, rgba(70,209,236,.92), rgba(47,124,246,.92));
  color: #fff; border-color: rgba(255,255,255,.45);
  box-shadow: 0 6px 18px rgba(47,124,246,.26);
}
.bubble.img { padding: 5px; border-radius: 18px; overflow: hidden; }
.bubble.img .ph {
  width: 168px; height: 118px; border-radius: 14px;
  background: linear-gradient(135deg, #bfe3ff, #d9c9ff 55%, #c6f0e6);
  display: grid; place-items: center; color: rgba(18,38,63,.42); font-size: 12px; font-weight: 600;
  cursor: zoom-in;
}
.bubble.voice { display: flex; align-items: center; gap: 9px; min-width: 96px; cursor: pointer; }
.voice-wave { display: flex; align-items: flex-end; gap: 2px; height: 15px; }
.voice-wave i { width: 2.5px; border-radius: 2px; background: currentColor; opacity: .8; height: 5px; }
.bubble.voice.playing .voice-wave i { animation: vw .8s var(--ease-inout) infinite; }
.bubble.voice.playing .voice-wave i:nth-child(2) { animation-delay: .1s; }
.bubble.voice.playing .voice-wave i:nth-child(3) { animation-delay: .2s; }
.bubble.voice.playing .voice-wave i:nth-child(4) { animation-delay: .3s; }
.bubble.voice.playing .voice-wave i:nth-child(5) { animation-delay: .4s; }
@keyframes vw { 0%,100% { height: 4px; } 50% { height: 15px; } }

/* 焚烧消息气泡 */
/* ===== 焚烧消息——缩略态（未展开） ===== */
.bubble.burn {
  background: linear-gradient(135deg, rgba(255,180,120,.32), rgba(255,110,110,.28));
  border-color: rgba(255,150,110,.55);
  color: #c44a20;
  box-shadow: 0 6px 20px rgba(255,120,80,.24);
  display: flex; align-items: center; gap: 8px; cursor: pointer;
}
/* ═══════════════════ 焚烧消息——玻璃拟态重设计 v=202608042141 ═══════════════════ */
.msg.self .bubble.burn { color: #fff; background: linear-gradient(135deg, rgba(255,140,90/.92), rgba(240,80,90/.92)); backdrop-filter: blur(12px); }
.flame { width: 15px; height: 15px; animation: breathe 1.6s var(--ease-inout) infinite; flex: none; }
/* 升级版销毁动效：抖动预警 → 火焰粒子 → 灰烬飘落 → 缩放消失 */
.bubble.burn.burning {
  animation: burnAway 1.15s cubic-bezier(.55,.06,.68,.19) forwards;
  position: relative;
  overflow: visible !important;
}
/* 火焰粒子层：气泡四周喷射的小火苗 */
.bubble.burn.burning::before {
  content: ''; position: absolute; left: 50%; bottom: -6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle, #fff7a0 0%, #ff8b3d 50%, transparent 70%);
  box-shadow:
    -28px -2px 0 -2px #ffb84d,
    24px -4px 0 -3px #ff7e3d,
    -16px -10px 0 -3px #ffcf5e,
    18px -14px 0 -4px #ff5e3d,
    -36px -8px 0 -4px #ff8b3d,
    30px -16px 0 -3px #ffae3d,
    0px -22px 0 -3px #fff176;
  animation: sparksUp 0.95s cubic-bezier(.18,.6,.32,1) forwards;
  opacity: 0;
  animation-delay: .05s;
  z-index: 5;
  filter: blur(.6px);
}
/* 灰烬层：黑色小颗粒向上飘散 */
.bubble.burn.burning::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: #2a1a14;
  box-shadow:
    -22px -8px 0 0 #3a251c, 18px -14px 0 0 #2a1812,
    -30px -22px 0 0 #4a3024, 28px -28px 0 0 #2a1812,
    -16px -36px 0 0 #1f1208, 22px -42px 0 0 #3a251c,
    -38px -16px 0 0 #2a1812, 36px -20px 0 0 #4a3024,
    -10px -54px 0 0 #2a1812, 14px -60px 0 0 #1f1208;
  animation: ashesUp 1.15s ease-out forwards;
  opacity: 0;
  animation-delay: .25s;
  z-index: 4;
}
/* 抖动预警：剩余 ≤3s 时轻微抖动 */
.bubble.burn.burn-expanded.warn {
  animation: shakeWarn .55s ease-in-out infinite;
}
.burn-count { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ── 展开卡片：玻璃拟态主卡片（毛玻璃底 + 内嵌内容卡 + 底部精巧倒计时条） ── */
.bubble.burn.burn-expanded {
  display: block; padding: 0; max-width: 300px; text-align: left;
  overflow: visible; border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,245,240/.92), rgba(255,235,225/.88));
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,180,140/.35);
  box-shadow:
    0 12px 40px rgba(200,100,60/.14),
    0 4px 12px rgba(200,100,60/.08),
    inset 0 1px 0 rgba(255,255,255/.6);
}
.msg.self .bubble.burn.burn-expanded {
  background: linear-gradient(145deg, rgba(255,160,120/.94), rgba(230,90,95/.95));
  border-color: rgba(255,200,170/.3);
  box-shadow:
    0 12px 44px rgba(220,80,70/.28),
    0 4px 14px rgba(180,50,60/.16),
    inset 0 1px 0 rgba(255,255,255/.25);
}
/* 展开时把该消息 msg-col 的 232px 上限放宽到 320px，让整段密钥文字排得开 */
.msg:has(.bubble.burn.burn-expanded) .msg-col { max-width: 320px; }

/* ── 顶部安全标签栏 ── */
.burn-head {
  display: inline-flex; align-items: center; gap: 5px; justify-content: center;
  font-size: 10.5px; opacity: .7; margin: 0; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase;
  padding: 10px 16px 8px; border-radius: 20px 20px 0 0;
  background: transparent;
}
.msg.self .burn-head { opacity: .75; }
.burn-lock { font-size: 12px; }

/* ── 内容区：内嵌浮雕卡片（像一张机密便签） ── */
.burn-bubble-content {
  display: block; width: 100%;
  font-size: 17px; font-weight: 700; line-height: 1.7; word-break: break-word;
  color: #4a2800; overflow: visible;
  letter-spacing: .3px;
  margin: 0 12px; padding: 16px 18px;
  background: linear-gradient(135deg, rgba(255,250,245/.8), rgba(255,240,230/.7));
  border-radius: 14px;
  border: 1px solid rgba(220,180,150/.25);
  box-shadow: inset 0 1px 3px rgba(255,255,255/.5), 0 2px 8px rgba(180,120,80/.06);
}
.msg.self .bubble.burn.burn-expanded .burn-bubble-content {
  color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255/.15), rgba(255,255,255/.06));
  border-color: rgba(255,255,255/.12);
  box-shadow: inset 0 1px 3px rgba(255,255,255/.2), 0 2px 8px rgba(0,0,0/.1);
  text-shadow: 0 1px 4px rgba(80,20,10/.3);
}

/* ── 分隔线（新设计不需要） ── */
.burn-sep { display: none; }

/* ── 倒计时区：底部横条式（紧凑、精致、不抢内容） ── */
.burn-countdown-wrap {
  position: relative; margin: 0; padding: 10px 16px 14px;
  display: flex; align-items: center; gap: 10px;
  width: auto; height: auto;
  border-top: 1px solid rgba(200,150,120/.15);
  background: rgba(255,240,230/.3);
  border-radius: 0 0 20px 20px;
}
.msg.self .burn-countdown-wrap {
  border-top-color: rgba(255,255,255/.1);
  background: rgba(0,0,0/.08);
}

.burn-countdown-ring {
  position: relative; width: 38px; height: 38px; flex-shrink: 0;
  transform: none;
}
.burn-countdown-ring .ring-bg {
  fill: none; stroke: rgba(200,150,120/.2); stroke-width: 3.5;
}
.burn-countdown-ring .ring-fg {
  fill: none; stroke: #e8854a; stroke-width: 3.5; stroke-linecap: round;
  transition: stroke-dashoffset .9s var(--ease-out), stroke .25s;
  filter: drop-shadow(0 0 4px rgba(232,133,74/.4));
}
.msg.self .burn-countdown-ring .ring-fg {
  stroke: #ffd700; filter: drop-shadow(0 0 6px rgba(255,215,0/.5));
}

.burn-countdown-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 18px; font-weight: 900; line-height: 1;
  color: #d47030;
  text-shadow: 0 1px 2px rgba(255,200,160/.4);
  transition: color .25s, transform .2s var(--ease-spring);
}
.msg.self .burn-countdown-num { color: #fff; text-shadow: 0 0 10px rgba(255,215,0/.5); }

/* ── ≤3s 紧急态：柔和红色脉冲 ── */
.bubble.burn.burn-expanded.warn {
  animation: urgentShake .42s ease-in-out infinite;
  border-color: rgba(255,100,80/.5);
}
.bubble.burn.burn-expanded.warn .burn-bubble-content {
  border-color: rgba(255,120,100/.35);
  background: linear-gradient(135deg, rgba(255,240,235/.85), rgba(255,225,215/.75));
}
.msg.self .bubble.burn.burn-expanded.warn {
  background: linear-gradient(145deg, rgba(255,120,90/.94), rgba(210,55,60/.96));
  box-shadow:
    0 12px 44px rgba(220,60,50/.38),
    0 4px 14px rgba(180,40,50/.22),
    inset 0 1px 0 rgba(255,255,255/.2);
}
.msg.self .bubble.burn.burn-expanded.warn .burn-bubble-content {
  background: linear-gradient(135deg, rgba(255,255,255/.18), rgba(255,255,255/.08));
  border-color: rgba(255,150,130/.25);
}
.bubble.burn.burn-expanded.warn .burn-countdown-wrap {
  border-top-color: rgba(255,100,80/.3);
  background: rgba(255,220,210/.4);
}
.msg.self .bubble.burn.burn-expanded.warn .burn-countdown-wrap {
  border-top-color: rgba(255,255,255/.15);
  background: rgba(0,0,0/.12);
}

.burn-countdown-num.urgent {
  color: #e84040;
  text-shadow: 0 0 10px rgba(232,64,64/.5);
  animation: urgentNumPulse .55s ease-in-out infinite;
}
.msg.self .burn-countdown-num.urgent { color: #ff6b6b; text-shadow: 0 0 12px rgba(255,100,100/.7); }
.burn-countdown-ring .ring-fg.urgent { stroke: #e84040; }
.msg.self .burn-countdown-ring .ring-fg.urgent { stroke: #ff6b6b; }
/* ── 倒计时文字提示 ── */
.burn-hint {
  font-size: 11.5px; opacity: .55; font-weight: 500;
  letter-spacing: .2px; white-space: nowrap;
}
.msg.self .burn-hint { opacity: .6; color: rgba(255,255,255/.8); }

/* 数字闪烁 */
.burn-countdown-num.tick {
  animation: numTick .22s var(--ease-spring);
}
@keyframes numTick {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.55); font-size: 38px; }
  100% { transform: scale(1); }
}
@keyframes urgentNumPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
@keyframes urgentShake {
  0%, 100% { transform: translate(0,0); }
  20%      { transform: translate(-1.5px, 0); }
  40%      { transform: translate(1.5px, 0); }
  60%      { transform: translate(-1px, 1px); }
  80%      { transform: translate(1px, -1px); }
}
/* ≤0 销毁动效触发瞬间：数字震屏爆开 */
.burn-countdown-num.boom {
  animation: numBoom .25s var(--ease-spring) forwards;
}
@keyframes numBoom {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; filter: blur(8px); }
}

/* 兼容旧 CSS */
.burn-count { font-variant-numeric: tabular-nums; font-weight: 700; }
.burn-bubble-timer {
  margin: 10px auto 0; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px; font-weight: 800;
  border: 2px solid rgba(255,180,120/.7); color: #ffd6a8;
  box-shadow: 0 0 20px rgba(255,140,80/.4), inset 0 0 16px rgba(255,140,80/.25);
  animation: breathe 1s var(--ease-inout) infinite;
}
.burn-bubble-timer.urgent { color: #ff3a3a; border-color: rgba(255,60,60/.85); box-shadow: 0 0 26px rgba(255,40,40/.65); font-size: 19px; }
.burn-bubble-hint { font-size: 11px; opacity: .7; margin-top: 6px; }

/* 消息状态 */
.msg-status { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--t-3); }
.msg-status.fail { color: var(--c-danger); cursor: pointer; font-weight: 600; }
.msg-status.fail:hover { text-decoration: underline; }
.msg-time { font-size: 11px; color: var(--t-3); opacity: .85; }
.fail-ico {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--c-danger); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
}
.msg-tip { align-self: center; font-size: 11.5px; color: var(--t-3); background: var(--glass-2); padding: 3px 12px; border-radius: 99px; border: 1px solid var(--glass-brd-soft); }
.msg-tip.at-hint { color: #fff; background: linear-gradient(135deg,#7a5cff,#4f6ef7); border-color: transparent; font-weight: 600; animation: popIn .34s var(--ease-spring) both; }

/* 聊天内对方头像：长按可 @ TA */
.msg .at-target {
  cursor: pointer;
  position: relative;
  transition: transform .14s var(--ease-out);
}
.msg .at-target::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  border: 2px solid transparent;
  transition: border-color .2s, box-shadow .2s;
  pointer-events: none;
}
.msg .at-target:hover::after {
  border-color: rgba(122, 92, 255, .45);
  box-shadow: 0 0 0 4px rgba(122, 92, 255, .12);
}
.msg .at-target:active { transform: scale(.94); }
.msg .at-target.is-pressing {
  animation: atPressRing .5s var(--ease-out) forwards;
}
@keyframes atPressRing {
  0% { box-shadow: 0 0 0 0 rgba(122,92,255,.55); }
  100% { box-shadow: 0 0 0 14px rgba(122,92,255,0); transform: scale(1.08); }
}

/* 输入栏 */
.chat-input-wrap {
  flex: none; padding: 8px 10px 10px;
  background: var(--glass-2);
  backdrop-filter: blur(var(--blur-l)) saturate(190%);
  -webkit-backdrop-filter: blur(var(--blur-l)) saturate(190%);
  border-top: 1px solid var(--glass-brd-soft);
}
.chat-input {
  display: flex; align-items: center; gap: 8px;
}
.ci-btn {
  width: 36px; height: 36px; border-radius: 12px; flex: none;
  display: grid; place-items: center; color: var(--t-2);
  background: var(--glass-3); border: 1px solid var(--glass-brd-soft);
  box-shadow: var(--sd-1); transition: all var(--dur-f) var(--ease-out);
}
.ci-btn:hover { color: var(--c-blue); transform: translateY(-1px); }
.ci-btn:active { transform: scale(.88); }
.ci-btn.on { background: var(--grad-primary); color: #fff; }
.ci-field {
  flex: 1; height: 36px; padding: 0 14px; border-radius: 14px;
  background: var(--glass-4); border: 1px solid var(--glass-brd);
  outline: none; font-size: 14px;
  box-shadow: inset 0 1px 3px rgba(31,74,140,.05);
  transition: all var(--dur-f) var(--ease-out);
}
.ci-field:focus { border-color: rgba(47,124,246,.5); box-shadow: 0 0 0 3px rgba(47,124,246,.1); }
.ci-send {
  height: 36px; padding: 0 16px; border-radius: 14px; flex: none;
  background: var(--grad-primary); color: #fff; font-weight: 700; font-size: 13px;
  box-shadow: var(--sd-glow); transition: all var(--dur-f) var(--ease-out);
}
.ci-send:active { transform: scale(.93); }

.panel-more {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 14px 6px 4px;
  animation: fadeUp .28s var(--ease-out) both;
}
.pm-item { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--t-2); }
.pm-ico {
  width: 50px; height: 50px; border-radius: 17px;
  display: grid; place-items: center;
  background: var(--glass-4); border: 1px solid var(--glass-brd);
  box-shadow: var(--sd-1); color: var(--c-blue);
  transition: all var(--dur-m) var(--ease-spring);
}
.pm-item:hover .pm-ico { transform: translateY(-3px) scale(1.05); box-shadow: var(--sd-2); }
.pm-item:active .pm-ico { transform: scale(.9); }
.pm-ico.gold { background: var(--grad-vip); color: #4a2b00; border-color: rgba(255,255,255,.6); box-shadow: var(--sd-vip); }
.pm-ico.fire { background: linear-gradient(135deg, #ffd0a8, #ff8a7a); color: #8a3410; }
.pm-lock { position: absolute; }

.emoji-panel { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; padding: 12px 6px 2px; animation: fadeUp .28s var(--ease-out) both; }
.emoji-panel span {
  height: 34px; display: grid; place-items: center; font-size: 20px; border-radius: 10px;
  transition: all var(--dur-f) var(--ease-out); cursor: pointer;
}
.emoji-panel span:hover { background: var(--glass-4); transform: scale(1.15); }

/* ---------- 通用列表行 ---------- */
.cell-group { margin: 10px 12px; border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.82); backdrop-filter: blur(var(--blur-s)); -webkit-backdrop-filter: blur(var(--blur-s)); border: 1px solid var(--glass-brd-soft); box-shadow: var(--sd-1); }
.cell {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; cursor: pointer;
  transition: background var(--dur-f) var(--ease-out);
  position: relative; background: rgba(255,255,255,.55);
}
.cell + .cell::before { content: ""; position: absolute; left: 14px; right: 0; top: 0; height: 1px; background: var(--glass-line); }
.cell:hover { background: rgba(255,255,255,.78); }
.cell:active { background: rgba(255,255,255,.92); }
.cell-ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff; background: var(--grad-primary); box-shadow: var(--sd-1); }
.cell-title { font-size: 14.5px; font-weight: 500; }
.cell-sub { font-size: 12px; color: var(--t-3); }
.cell-arrow { color: var(--t-4); flex: none; }
.group-title { padding: 14px 20px 6px; font-size: 12px; font-weight: 700; color: var(--t-3); letter-spacing: .5px; }

/* ---------- 发现 / 动态 ---------- */
.moment {
  margin: 8px 12px; padding: 13px; border-radius: 20px;
  background: var(--glass-2); border: 1px solid var(--glass-brd-soft);
  backdrop-filter: blur(var(--blur-s)); -webkit-backdrop-filter: blur(var(--blur-s));
  box-shadow: var(--sd-1);
}
.moment-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 9px; }
.moment-imgs i {
  aspect-ratio: 1; border-radius: 11px; display: block;
  background: linear-gradient(135deg, #cfe6ff, #e4d4ff);
  cursor: pointer; transition: transform .18s var(--ease-out), box-shadow .18s;
}
.moment-imgs i:hover { box-shadow: 0 0 0 2px var(--c-blue-soft); }
.moment-imgs i:active { transform: scale(.94); }

/* 朋友圈图片全屏查看器 */
.img-viewer {
  background: rgba(0, 0, 0, 0.92) !important;
  display: flex; flex-direction: column; align-items: stretch; justify-content: space-between;
  padding: 0;
  width: 100%; height: 100%;
}
.img-viewer-top {
  padding: 14px 16px; color: #fff; flex-shrink: 0;
}
.img-viewer-top .img-viewer-close { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: .9; }
.img-viewer-top .img-viewer-close:hover { opacity: 1; }
.img-viewer-top .img-viewer-close svg { stroke: #fff; }
.img-viewer-stage {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 12px;
  user-select: none; -webkit-user-select: none;
}
.img-viewer-img {
  width: min(78vw, 360px); aspect-ratio: 1; border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  transition: transform .25s var(--ease-out);
}
.img-nav {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.15);
  color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .18s, transform .18s;
  -webkit-tap-highlight-color: transparent;
}
.img-nav:hover { background: rgba(255, 255, 255, 0.28); }
.img-nav:active { transform: scale(.9); }
.img-nav.disabled { opacity: .25; cursor: not-allowed; pointer-events: none; }
.img-nav svg { stroke: #fff; fill: none; }
.img-nav.next svg { transform: rotate(180deg); }
.img-viewer-foot {
  padding: 18px 0 26px; text-align: center; color: #fff; font-size: 13px; opacity: .85;
  flex-shrink: 0;
  display: flex; justify-content: center; align-items: center; gap: 14px;
}
.img-viewer-hint { font-size: 11px; opacity: .55; padding: 3px 9px; border-radius: 10px; background: rgba(255,255,255,.08); }
.moment-bar { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--t-3); }
.moment-bar span { display: flex; align-items: center; gap: 4px; transition: color var(--dur-f); cursor: pointer; }
.moment-bar span:hover { color: var(--c-blue); }
.moment-bar span.like-btn.liked { color: #f4525f; }
.moment-bar span.like-btn.liked svg path { fill: #f4525f; }
.moment-bar span.like-btn:active, .moment-bar span.comment-btn:active { transform: scale(.85); }
.moment-bar span.like-btn.pop svg, .moment-bar span.comment-btn.pop svg { animation: likePop .35s var(--ease-out); }
@keyframes likePop { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }
.moment-cmts { margin-top: 6px; padding: 6px 8px; background: var(--glass-2); border-radius: 8px; }

/* v-msg 顶部"朋友圈互动"banner：显示点赞/评论提示 */
.moment-notif-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 12px 0; padding: 10px 14px;
  background: linear-gradient(135deg, rgba(255, 200, 220, .25), rgba(190, 220, 255, .25));
  border: 1px solid var(--glass-brd);
  border-radius: 14px;
  cursor: pointer; transition: transform .15s, background .15s;
}
.moment-notif-banner:active { transform: scale(.98); background: var(--glass-2); }
.moment-notif-banner .notif-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ff8aae, #ffb37a);
  color: #fff; flex-shrink: 0;
}
.moment-notif-banner .notif-unread { color: #ff5168; margin-left: 4px; font-weight: 600; }
.moment-notif-banner .notif-text .ellipsis { max-width: 220px; }

/* 朋友圈互动列表 sheet */
.notif-sheet .notif-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid var(--glass-brd-soft);
  cursor: pointer; transition: background .15s;
}
.notif-sheet .notif-item:last-child { border-bottom: 0; }
.notif-sheet .notif-item:active { background: var(--glass-2); }
.notif-sheet .notif-type { font-size: 22px; flex-shrink: 0; }
.moment-cmt { font-size: 12px; line-height: 1.5; color: var(--t-2); cursor: pointer; padding: 1px 0; }
.moment-cmt:hover { color: var(--t-1); }
.moment-cmt:active { background: var(--glass-3); border-radius: 4px; }
.moment-cmt b { color: var(--c-blue); margin-right: 4px; }
.moment-cmt .cmt-reply-to { color: var(--c-blue); margin: 0 2px; font-weight: 500; }

.comment-sheet { padding: 0; }
.comment-list .cmt-item { padding: 8px 6px; border-bottom: 1px solid var(--glass-brd-soft); cursor: pointer; border-radius: 6px; margin: 0 -6px; transition: background .15s; }
.comment-list .cmt-item:hover { background: var(--glass-2); }
.comment-list .cmt-item:active { background: var(--glass-3); }
.comment-list .cmt-item:last-child { border-bottom: 0; }
.comment-input .ipt { background: var(--glass-2); border: 1px solid var(--glass-brd); border-radius: 18px; padding: 6px 12px; }
.cmt-reply-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 10px; margin: 0 0 0 2px;
  background: var(--glass-2); border: 1px solid var(--glass-brd);
  border-radius: 99px; font-size: 12px; color: var(--t-2);
}
.cmt-reply-chip b { color: var(--c-blue); }
.cmt-reply-x {
  width: 18px; height: 18px; line-height: 1; border-radius: 50%;
  background: rgba(0,0,0,.06); border: 0; color: var(--t-3);
  font-size: 14px; cursor: pointer; padding: 0;
}
.cmt-reply-x:hover { background: rgba(0,0,0,.12); color: var(--t-1); }
.cmt-reply-to { color: var(--c-blue); }
.btn-sm { padding: 4px 14px; font-size: 12px; }

.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px; }
.feature-item {
  padding: 13px 6px 11px; border-radius: 18px; text-align: center;
  background: var(--glass-2); border: 1px solid var(--glass-brd-soft);
  box-shadow: var(--sd-1); font-size: 11.5px; color: var(--t-2); font-weight: 600;
  transition: all var(--dur-m) var(--ease-out); cursor: pointer;
}
.feature-item:hover { transform: translateY(-3px); box-shadow: var(--sd-2); background: var(--glass-3); }
.feature-item:active { transform: scale(.94); }
.fi-ico { width: 40px; height: 40px; margin: 0 auto 7px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--grad-primary); box-shadow: var(--sd-glow); }
.fi-ico.v2 { background: linear-gradient(135deg,#ff9a76,#f4525f); box-shadow: 0 6px 16px rgba(244,82,95,.3); }
.fi-ico.v3 { background: linear-gradient(135deg,#7bdcb5,#1fbf7a); box-shadow: 0 6px 16px rgba(31,191,122,.3); }
.fi-ico.v4 { background: var(--grad-vip); color: #4a2b00; box-shadow: var(--sd-vip); }

/* ---------- 我的 / 个人主页 ---------- */
.profile-hero {
  margin: 12px; padding: 18px; border-radius: 24px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(70,209,236,.32), rgba(47,124,246,.28) 55%, rgba(168,107,255,.26));
  border: 1px solid var(--glass-brd);
  box-shadow: var(--sd-2);
  backdrop-filter: blur(var(--blur-m)); -webkit-backdrop-filter: blur(var(--blur-m));
}
.profile-hero.vip { background: linear-gradient(135deg, rgba(255,215,106,.4), rgba(255,154,91,.3) 45%, rgba(168,107,255,.35)); }
.profile-hero::before {
  content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -90px;
  border-radius: 50%; background: rgba(255,255,255,.4); filter: blur(30px);
}
.ph-stats { display: flex; gap: 8px; margin-top: 14px; position: relative; }
.ph-stat { flex: 1; text-align: center; padding: 8px 4px; border-radius: 14px; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.7); }
.ph-stat b { display: block; font-size: 16px; }
.ph-stat span { font-size: 10.5px; color: var(--t-3); }

/* 访客记录页 */
.stat-mini { padding: 11px 10px; border-radius: 14px; background: rgba(255,255,255,.55); border: 1px solid var(--glass-brd-soft); text-align: center; }
.visitor-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--glass-line); }
.visitor-row:last-child { border-bottom: 0; }

.vip-card {
  margin: 12px; padding: 16px; border-radius: 22px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #ffdf8a, #ffab6b 42%, #b57bff);
  box-shadow: var(--sd-vip); color: #3b2000; cursor: pointer;
  transition: transform var(--dur-m) var(--ease-out);
}
.vip-card:hover { transform: translateY(-2px) scale(1.005); }
.vip-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.6) 48%, transparent 66%);
  transform: translateX(-100%); animation: badgeSweep 4s var(--ease-inout) infinite;
}
.vip-halo { position: absolute; right: -34px; bottom: -46px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.32); filter: blur(4px); }
.vip-progress { height: 6px; border-radius: 99px; background: rgba(255,255,255,.45); overflow: hidden; margin-top: 9px; }
.vip-progress i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg,#fff,rgba(255,255,255,.6)); transition: width .8s var(--ease-out); }

.vip-level-list { padding: 6px 12px 90px; display: flex; flex-direction: column; gap: 9px; }
.vip-lv {
  padding: 13px 14px; border-radius: 18px; cursor: pointer;
  background: var(--glass-2); border: 1px solid var(--glass-brd-soft);
  box-shadow: var(--sd-1); transition: all var(--dur-m) var(--ease-out);
}
.vip-lv:hover { transform: translateY(-2px); box-shadow: var(--sd-2); }
.vip-lv.cur { background: var(--grad-vip-soft); border-color: rgba(168,107,255,.35); box-shadow: var(--sd-2); }
.vip-lv.locked { opacity: .78; }
.vip-lv .lv-name { font-size: 14.5px; font-weight: 700; }
.vip-lv .lv-rights { font-size: 12px; color: var(--t-2); margin-top: 6px; line-height: 1.65; }

/* ---------- 通话 ---------- */
.call-layer {
  position: absolute; inset: 0; z-index: 120;
  display: flex; flex-direction: column; align-items: center;
  padding: 70px 24px 44px;
  background:
    radial-gradient(600px 400px at 50% 10%, rgba(70,209,236,.4), transparent 60%),
    linear-gradient(160deg, rgba(18,38,63,.86), rgba(30,60,120,.9));
  backdrop-filter: blur(var(--blur-l)); -webkit-backdrop-filter: blur(var(--blur-l));
  color: #fff; animation: blurIn .4s var(--ease-out) both;
}
.call-layer.vip8 { background: radial-gradient(600px 400px at 50% 10%, rgba(255,190,90,.45), transparent 60%), linear-gradient(160deg, rgba(60,20,90,.9), rgba(30,10,60,.94)); }
.call-avatar { position: relative; margin-bottom: 18px; }
.call-avatar .wave { position: absolute; inset: -10px; border-radius: 34px; border: 2px solid rgba(255,255,255,.45); animation: wavePulse 2s var(--ease-out) infinite; }
.call-avatar .wave:nth-child(2) { animation-delay: .6s; }
.call-avatar .wave:nth-child(3) { animation-delay: 1.2s; }
.call-name { font-size: 21px; font-weight: 700; }
.call-status { font-size: 13px; opacity: .8; margin-top: 5px; }
.call-watermark {
  margin-top: 14px; padding: 5px 14px; border-radius: 99px; font-size: 11.5px; font-weight: 700;
  background: var(--grad-vip); color: #4a2b00; box-shadow: var(--sd-vip);
}
.call-actions { margin-top: auto; display: flex; gap: 26px; align-items: center; }
.call-btn {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(var(--blur-s)); -webkit-backdrop-filter: blur(var(--blur-s));
  color: #fff; transition: all var(--dur-f) var(--ease-out);
}
.call-btn:hover { background: rgba(255,255,255,.3); transform: translateY(-2px); }
.call-btn:active { transform: scale(.9); }
.call-btn.hang { background: linear-gradient(135deg,#ff7a7a,#e63946); border-color: rgba(255,255,255,.35); box-shadow: 0 10px 26px rgba(230,57,70,.5); }
.call-btn.answer { background: linear-gradient(135deg,#6ee7a8,#1fbf7a); box-shadow: 0 10px 26px rgba(31,191,122,.45); }
.call-tools { display: flex; gap: 14px; margin-bottom: 26px; }
.call-tool { padding: 8px 14px; border-radius: 14px; font-size: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 62px; }

/* ---------- 远程控制 ---------- */
.remote-layer { position: absolute; inset: 0; z-index: 115; background: linear-gradient(160deg, rgba(12,26,48,.94), rgba(20,44,84,.94)); color: #fff; padding: 20px 16px; display: flex; flex-direction: column; animation: blurIn .4s var(--ease-out) both; }
.remote-screen {
  flex: 1; border-radius: 18px; margin: 12px 0;
  background: linear-gradient(135deg, #17335a, #0e2244);
  border: 1px solid rgba(255,255,255,.18);
  position: relative; overflow: hidden;
  display: grid; place-items: center;
}
.remote-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(70,209,236,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(70,209,236,.1) 1px, transparent 1px); background-size: 28px 28px; animation: gridMove 12s linear infinite; }
@keyframes gridMove { to { background-position: 28px 28px; } }
.remote-cursor { position: absolute; width: 16px; height: 16px; animation: cursorMove 6s var(--ease-inout) infinite; }
@keyframes cursorMove {
  0% { left: 20%; top: 26%; } 25% { left: 62%; top: 40%; }
  50% { left: 40%; top: 70%; } 75% { left: 74%; top: 22%; } 100% { left: 20%; top: 26%; }
}
.remote-panel { display: flex; gap: 8px; flex-wrap: wrap; }
.remote-chip { padding: 7px 12px; border-radius: 12px; font-size: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); display: flex; align-items: center; gap: 5px; transition: all var(--dur-f); }
.remote-chip:hover { background: rgba(255,255,255,.26); }
.remote-warning { position: absolute; left: 12px; right: 12px; top: 58px; z-index: 118; padding: 9px 14px; border-radius: 14px; font-size: 12px; font-weight: 600; color: #8a3410; background: linear-gradient(135deg, rgba(255,214,150,.95), rgba(255,170,120,.95)); box-shadow: var(--sd-2); display: flex; align-items: center; gap: 8px; animation: fadeUp .4s var(--ease-out) both; }
.remote-rec-ind { display: none; align-items: center; gap: 6px; align-self: flex-start; margin-top: 8px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(244,82,95,.32); border: 1px solid rgba(244,82,95,.6); }
.remote-rec-ind::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ff5252; animation: blink 1s steps(2,start) infinite; }
@keyframes blink { 50% { opacity: .2; } }
#remoteAnno { cursor: crosshair; }

/* ---------- 群惩罚特效 ---------- */
.punish-overlay {
  position: absolute; inset: 0; z-index: 150; pointer-events: none;
  background:
    repeating-linear-gradient(45deg, rgba(255,40,40,.10) 0 22px, rgba(255,40,40,0) 22px 44px),
    radial-gradient(circle at 50% 38%, rgba(255,90,90,.32), rgba(120,0,20,.46));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .2s both;
}
.punish-text {
  font-size: 34px; font-weight: 900; letter-spacing: 4px; color: #fff;
  text-shadow: 0 0 22px rgba(255,60,60,1), 0 2px 0 #7a0010, 0 6px 18px rgba(0,0,0,.6);
  animation: flicker .9s linear infinite, punishPop .6s var(--ease-inout) both;
  text-align: center;
  padding: 0 18px;
}
.screen.shaking { animation: shake .82s var(--ease-inout) 2; }

/* ---------- 商城 / 直播 / 同城 ---------- */
.goods-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 12px 90px; }
.goods {
  border-radius: 18px; overflow: hidden; background: var(--glass-2);
  border: 1px solid var(--glass-brd-soft); box-shadow: var(--sd-1);
  transition: all var(--dur-m) var(--ease-out); cursor: pointer;
}
.goods:hover { transform: translateY(-3px); box-shadow: var(--sd-2); }
.goods-img { height: 106px; background: linear-gradient(135deg,#cfe6ff,#e6d6ff); display: grid; place-items: center; color: rgba(18,38,63,.35); font-size: 12px; font-weight: 700; }
.goods-info { padding: 9px 11px 11px; }
.price { color: #f4525f; font-weight: 800; font-size: 15px; }
.price small { font-size: 11px; }
.price-old { color: var(--t-4); font-size: 11px; text-decoration: line-through; margin-left: 5px; }

.live-card {
  margin: 10px 12px; height: 150px; border-radius: 20px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #7bb8ff, #b48bff);
  box-shadow: var(--sd-2); cursor: pointer;
}
.live-card:hover .live-cover { transform: scale(1.05); }
.live-cover { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(70,209,236,.7), rgba(168,107,255,.7)); transition: transform .6s var(--ease-out); }
.live-badge { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#ff7a7a,#f4525f); display: flex; align-items: center; gap: 5px; box-shadow: 0 4px 12px rgba(244,82,95,.4); }
.live-badge i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: dotPulse 1.2s infinite; }
.live-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; color: #fff; background: linear-gradient(transparent, rgba(10,26,50,.6)); }

/* ---------- 直播间页面 ---------- */
.live-player-wrap { position: relative; width: 100%; height: 56.25vw; min-height: 210px; max-height: 320px; overflow: hidden; }
.live-player { position: relative; width: 100%; height: 100%;
  background: linear-gradient(135deg, #1a1a3e 0%, #2d1b4e 30%, #1e3a5f 60%, #0d2137 100%);
  display: flex; flex-direction: column; justify-content: space-between;
}
/* ---- 直播模拟视频画面（主播形象） ---- */
.live-video-feed { position:absolute; inset:0; z-index:1; overflow:hidden; }
.live-video-bg { position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(255,120,180,.15), transparent),
    radial-gradient(ellipse 60% 50% at 30% 70%, rgba(100,180,255,.12), transparent),
    radial-gradient(ellipse 50% 40% at 75% 60%, rgba(180,100,255,.10), transparent),
    linear-gradient(160deg, #1a1a3e 0%, #2d1b4e 35%, #1e3a5f 65%, #0d2137 100%);
  animation: liveBgShift 12s ease-in-out infinite; }
@keyframes liveBgShift {
  0%,100%{ filter:hue-rotate(0deg) brightness(1); }
  33%{ filter:hue-rotate(8deg) brightness(1.06); }
  66%{ filter:hue-rotate(-6deg) brightness(.96); }
}
.live-video-scene { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; }
.live-anchor-figure { display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2; }
.live-anchor-face { width:90px; height:90px; border-radius:50%; background:linear-gradient(145deg, #ff7a7a, #f4525f, #ff4d6d);
  display:grid; place-items:center; font-size:42px; font-weight:800; color:#fff;
  border:3px solid rgba(255,255,255,.55); box-shadow:
    0 0 40px rgba(255,77,109,.45), 0 0 80px rgba(255,77,109,.2), inset 0 2px 8px rgba(255,255,255,.25);
  animation: liveFacePulse 3s ease-in-out infinite; }
@keyframes liveFacePulse {
  0%,100%{ transform:scale(1); box-shadow:0 0 40px rgba(255,77,109,.45), 0 0 80px rgba(255,77,109,.2), inset 0 2px 8px rgba(255,255,255,.25); }
  50%{ transform:scale(1.04); box-shadow:0 0 55px rgba(255,77,109,.6), 0 0 100px rgba(255,77,109,.28), inset 0 2px 10px rgba(255,255,255,.35); }
}
.live-anchor-name { font-size:16px; font-weight:800; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.6), 0 0 20px rgba(255,77,109,.4);
  letter-spacing:2px; animation: liveNameGlow 2.5s ease-in-out infinite; }
@keyframes liveNameGlow {
  0%,100%{ opacity:.9; } 50%{ opacity:1; text-shadow:0 2px 10px rgba(0,0,0,.6), 0 0 30px rgba(255,77,109,.6); }
}
/* 麦克风音波指示器 */
.live-mic-indicator { display:flex; gap:3px; align-items:flex-end; height:18px; margin-top:4px; }
.live-mic-indicator i { width:3px; border-radius:2px; background:rgba(255,255,255,.7); animation: micWave .8s ease-in-out infinite; }
.live-mic-indicator i:nth-child(1){ height:6px; animation-delay:0s; }
.live-mic-indicator i:nth-child(2){ height:14px; animation-delay:.15s; }
.live-mic-indicator i:nth-child(3){ height:10px; animation-delay:.3s; }
@keyframes micWave { 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.4); } }
/* 摄像头视角画面（模拟摄像头开启效果） */
.live-cam-view { position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
  overflow: hidden; }
.live-cam-overlay { position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,77,109,.08) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(70,180,255,.08) 0%, transparent 50%);
  animation: camOverlayShift 4s ease-in-out infinite alternate;
  pointer-events: none; }
@keyframes camOverlayShift {
  0% { opacity: .5; }
  100% { opacity: 1; }
}
.live-cam-face { position: relative; z-index: 2; width: 120px; height: 120px; border-radius: 50%;
  background: linear-gradient(135deg, #ff7a7a, #f4525f, #ff3366);
  display: grid; place-items: center; font-size: 48px; font-weight: 800; color: #fff;
  border: 4px solid rgba(255,255,255,.4);
  box-shadow: 0 0 60px rgba(244,82,95,.5), 0 0 120px rgba(244,82,95,.25), inset 0 -4px 20px rgba(0,0,0,.2);
  animation: camFacePulse 2s ease-in-out infinite; }
@keyframes camFacePulse {
  0%,100%{ transform: scale(1); box-shadow: 0 0 60px rgba(244,82,95,.5), 0 0 120px rgba(244,82,95,.25); }
  50%{ transform: scale(1.03); box-shadow: 0 0 80px rgba(244,82,95,.65), 0 0 150px rgba(244,82,95,.35); }
}
.live-cam-status { position: absolute; top: 16px; left: 16px; z-index: 3;
  padding: 4px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 800; color: #ff4444;
  background: rgba(0,0,0,.55); backdrop-filter: blur(8px);
  animation: camRecBlink 1.2s step-end infinite;
  letter-spacing: 1px; }
@keyframes camRecBlink { 0%,100%{ opacity:1; } 50%{ opacity:0; } }
.live-cam-timer { position: absolute; top: 16px; right: 16px; z-index: 3;
  padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: #fff;
  background: rgba(0,0,0,.45); backdrop-filter: blur(8px);
  font-family: 'SF Mono', Consolas, monospace; }
/* 扫描线效果（模拟摄像头） */
.live-cam-view::before { content:''; position:absolute; inset:0; z-index:1;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px, rgba(255,255,255,.015) 2px, rgba(255,255,255,.015) 4px
  );
  pointer-events: none; animation: camScanRoll 8s linear infinite; }
@keyframes camScanRoll { from{ background-position: 0 0; } to{ background-position: 0 100%; } }
.live-status { position: absolute; top: 50px; left: 12px; z-index: 5;
  padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(244,82,95,.88); backdrop-filter: blur(8px); display: flex; align-items: center; gap: 5px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: dotPulse 1s infinite; }
.live-anchor-info { position: absolute; bottom: 52px; left: 12px; z-index: 5; display: flex; gap: 8px; align-items: center; color: #fff; }
.live-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#ff7a7a,#f4525f);
  display: grid; place-items: center; font-size: 15px; font-weight: 700; border: 2px solid rgba(255,255,255,.5); }
.live-bullet-area { position: absolute; top: 54px; left: 8px; right: 8px; height: calc(100% - 120px); z-index: 4;
  overflow: hidden; pointer-events: none; }
.bullet-msg { display: inline-block; max-width: 70%; padding: 3px 9px; border-radius: 8px; margin: 2px 0;
  font-size: 12px; color: #fff; background: rgba(0,0,0,.42); backdrop-filter: blur(4px);
  animation: bulletIn .35s var(--ease-out) both, bulletOut .4s var(--ease-in) 3.5s forwards; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes bulletIn { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:none} }
@keyframes bulletOut { to{opacity:0;transform:translateY(-8px)} }
.live-goods-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
  padding: 8px 12px; background: linear-gradient(transparent, rgba(0,0,0,.55));
  display: flex; gap: 8px; align-items: center; overflow-x: auto; }
.live-goods-label { flex: none; padding: 5px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg,rgba(255,200,60,.9),rgba(255,140,40,.9)); white-space: nowrap; }
.live-interact-bar { display: flex; flex-direction: column; height: 160px; border-top: 1px solid var(--glass-brd-soft);
  background: var(--glass-1); }
.live-chat-area { flex: 1; overflow-y: auto; padding: 8px 12px; font-size: 12.5px; line-height: 1.65; }
.live-sys-msg { color: var(--t-3); text-align: center; padding: 6px 0; font-size: 11.5px; }
.chat-bubble-live { display: inline-block; max-width: 90%; padding: 4px 10px; border-radius: 10px;
  margin: 2px 0; word-break: break-word; font-size: 12.5px; }
.chat-bubble-live.other { background: var(--glass-2); color: var(--t-1); border: 1px solid var(--glass-brd-soft); }
.chat-bubble-live.self { background: linear-gradient(135deg,rgba(70,180,255,.18),rgba(120,100,255,.14)); color: var(--t-1);
  border: 1px solid rgba(70,150,255,.25); margin-left: auto; }
.live-input-row { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--glass-brd-soft); align-items: center; }
.live-input { flex: 1; height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--glass-brd-soft);
  background: var(--glass-2); font-size: 13px; outline: none; color: var(--t-1); }
.live-input::placeholder { color: var(--t-3); }
.live-send-btn { flex: none; height: 34px; padding: 0 14px; border-radius: 99px; border: none; font-size: 12.5px; font-weight: 600;
  background: linear-gradient(135deg, #46b4ff, #7868ff); color: #fff; cursor: pointer; }
.live-like-btn { flex: none; width: 38px; height: 34px; border-radius: 99px; border: 1px solid var(--glass-brd-soft);
  background: var(--glass-2); color: #f4525f; display: grid; place-items: center; cursor: pointer; transition: transform .2s; }
.live-like-btn:active { transform: scale(.88); }

/* ---- 打赏按钮 ---- */
.live-tip-btn { flex: none; height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--glass-brd-soft);
  background: linear-gradient(135deg, #ffd75a, #ffb347); color: #7a3b00; font-size: 15px;
  display: grid; place-items: center; cursor: pointer; transition: transform .2s; font-weight: 700; }
.live-tip-btn:active { transform: scale(.88); }

/* ---- 购物车可点击 ---- */
.live-goods-bar { cursor: pointer; }
.live-goods-bar:active { opacity: .8; }

/* ---- 直播分享：好友/群选择器 ---- */
.share-picker-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto;
  margin-bottom: 10px; }
.share-picker-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px;
  cursor: pointer; transition: background .2s; border: 1.5px solid transparent; }
.share-picker-item:hover { background: var(--glass-2); border-color: rgba(70,180,255,.35); }
.share-picker-item:active { background: rgba(70,180,255,.12); transform: scale(.98); }
.share-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff; flex: none; }
.group-icon { background: linear-gradient(135deg,#7c5cff,#4f8cff) !important; font-size: 16px; }

/* ---- 直播商品列表（购物车内） ---- */
.live-goods-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 40vh; overflow-y: auto; padding: 4px 0; }
.live-goods-card { padding: 10px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--glass-brd-soft);
  cursor: pointer; transition: transform .2s, box-shadow .2s; text-align: center; }
.live-goods-card:active { transform: scale(.96); }
.live-goods-img { width: 100%; aspect-ratio: 1; border-radius: 10px; background: linear-gradient(135deg,#e8f0fe,#f0e6ff);
  display: grid; place-items: center; font-size: 28px; color: #999; margin-bottom: 6px; }
.live-goods-name { font-size: 12.5px; font-weight: 600; line-height: 1.4; height: 34px; overflow: hidden; color: var(--t-1); }
.live-goods-price { font-size: 15px; font-weight: 800; color: #f4525f; margin-top: 4px; }
.live-goods-sold { font-size: 10.5px; color: var(--t-3); margin-top: 2px; }

/* ================================================================
   商城 / 商品 / 购物车 / 结算 / 地址 / 订单 —— 全能商城系统
   ================================================================ */

/* ---- 商城头部（分类标签） ---- */
.shop-header { padding: 10px 14px 0; }
.shop-cats { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.shop-cats::-webkit-scrollbar { display: none; }
.shop-cat { flex: none; padding: 5px 14px; border-radius: 99px; font-size: 12px; font-weight: 600;
  background: var(--glass-2); border: 1.5px solid var(--glass-brd-soft); color: var(--t-2);
  cursor: pointer; transition: all .2s; white-space: nowrap; }
.shop-cat.on { background: linear-gradient(135deg,#46b4ff,#7868ff); color: #fff; border-color: transparent; }

/* ---- 商品卡片（商城列表） ---- */
.goods-card { border-radius: 16px; background: var(--glass-2); border: 1px solid var(--glass-brd-soft);
  overflow: hidden; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.goods-card:active { transform: scale(.97); }
.goods-cover { position: relative; width: 100%; aspect-ratio: 1.2; display: grid; place-items: center;
  overflow: hidden; }
.goods-cover-icon { font-size: 36px; opacity: .35; filter: grayscale(.3); }
.goods-cat-tag { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 6px;
  font-size: 10px; font-weight: 700; color: #fff; background: rgba(0,0,0,.35); backdrop-filter: blur(6px); }
.goods-cat-tag-sm { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 5px;
  font-size: 9px; font-weight: 700; color: #fff; background: rgba(0,0,0,.3); backdrop-filter: blur(4px); }
.goods-hot-tag { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 6px;
  font-size: 9.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#f4525f,#ff7a45); }
.goods-info { padding: 10px 12px 12px; }

/* ---- 商品详情页 ---- */
.prod-hero { width: 100%; aspect-ratio: 1; display: grid; place-items: center; position: relative; overflow: hidden; }
.prod-hero-icon { font-size: 64px; opacity: .25; filter: grayscale(.2); }
.prod-tags { position: absolute; bottom: 12px; left: 12px; display: flex; gap: 6px; }
.prod-tag { padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px); }
.prod-price-bar { padding: 14px 16px; background: var(--glass-1);
  border-bottom: 1px solid var(--glass-brd-soft); }
.prod-price { color: #f4525f; font-size: 18px; font-weight: 800; }
.prod-price big { font-size: 26px; }
.prod-old-price { text-decoration: line-through; color: var(--t-3); font-size: 13px; margin-left: 6px; }
.prod-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; gap: 10px; padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--glass-brd-soft); }
.prod-btn { flex: none; height: 42px; padding: 0 22px; border-radius: 22px; border: none;
  font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .15s; white-space: nowrap; }
.prod-btn:active { transform: scale(.95); }
.prod-cart-btn { background: linear-gradient(135deg,#ffd75a,#ffb347); color: #7a3b00; }
.prod-buy-btn { background: linear-gradient(135deg,#f4525f,#ff3366); color: #fff; }

/* ---- 规格选择 & 数量步进器 ---- */
.spec-chip { padding: 6px 14px; border-radius: 99px; border: 1.5px solid var(--glass-brd-soft);
  font-size: 13px; color: var(--t-1); background: var(--glass-2); cursor: pointer; transition: all .2s; }
.spec-chip.on { border-color: #46b4ff; background: rgba(70,180,255,.1); color: #46b4ff; font-weight: 600; }
.qty-stepper { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid var(--glass-brd-soft); border-radius: 10px; overflow: hidden; }
.qty-btn { width: 32px; height: 32px; border: none; background: var(--glass-2); font-size: 18px; color: var(--t-1);
  cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.qty-btn:hover:not(:disabled) { background: rgba(70,180,255,.1); }
.qty-btn:disabled { opacity: .35; cursor: default; }
.qty-num { width: 38px; height: 32px; text-align: center; line-height: 32px; font-size: 14px; font-weight: 600;
  border-left: 1px solid var(--glass-brd-soft); border-right: 1px solid var(--glass-brd-soft);
  background: var(--glass-1); font-variant-numeric: tabular-nums; }

/* ---- 购物车页面 ---- */
.cart-item { align-items: center; }
.cart-item-img { width: 72px; height: 72px; border-radius: 12px; display: grid; place-items: center;
  flex: none; background: linear-gradient(135deg,#e8f0fe,#f0e6ff); }
.cart-item-img.sm { width: 56px; height: 56px; border-radius: 10px; }
.cart-del { width: 28px; height: 28px; border-radius: 50%; border: none; background: transparent;
  color: var(--t-3); font-size: 18px; cursor: pointer; display: grid; place-items: center; flex: none; }
.cart-del:active { background: rgba(244,82,95,.1); color: #f4525f; }
.nav-badge { animation: badgePop .3s ease-out; }
@keyframes badgePop { from{transform:scale(0)} to{transform:scale(1)} }

/* ---- 结算页 ---- */
.addr-bar { cursor: pointer; transition: background .2s; }
.addr-bar:active { background: var(--glass-2); }
.addr-bar.addr-empty { color: var(--t-3); justify-content: center; }
.pay-method { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--glass-brd-soft); background: var(--glass-2); margin-bottom: 8px; cursor: pointer; }
.pay-method.on { border-color: #22c55e; background: rgba(34,197,94,.06); }
.pay-icon { font-size: 22px; }
.pay-check { color: #22c55e; font-weight: 800; font-size: 16px; }

/* ---- 收货地址管理 ---- */
.addr-card { transition: border-color .2s; }
.addr-card.addr-def { border-color: #46b4ff !important; background: rgba(70,180,255,.04) !important; }
.modal-input { width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--glass-brd-soft);
  background: var(--glass-1); font-size: 14px; outline: none; color: var(--t-1); box-sizing: border-box; }
.modal-input::placeholder { color: var(--t-3); }
.modal-textarea { width: 100%; min-height: 60px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--glass-brd-soft);
  background: var(--glass-1); font-size: 14px; outline: none; color: var(--t-1); resize: vertical; box-sizing: border-box; }

/* ---- 订单列表 ---- */
.order-tabs { display: flex; padding: 0 16px; gap: 0; background: var(--glass-1);
  border-bottom: 1px solid var(--glass-brd-soft); }
.order-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 13px; font-weight: 600;
  color: var(--t-3); cursor: pointer; border-bottom: 2px solid transparent; transition: all .2s; }
.order-tab.on { color: #46b4ff; border-bottom-color: #46b4ff; }
.order-card { transition: border-color .2s; }
.order-status { padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.order-pending { background: rgba(245,166,35,.12); color: #f5a623; }
.order-shipped { background: rgba(70,180,255,.12); color: #46b4ff; }
.order-done { background: rgba(34,197,94,.12); color: #22c55e; }

/* ---- 打赏面板 ---- */
.tip-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tip-amount-btn { padding: 10px 0; border-radius: 12px; border: 1.5px solid var(--glass-brd-soft);
  background: var(--glass-2); font-size: 16px; font-weight: 700; color: var(--t-1); cursor: pointer;
  transition: all .2s; text-align: center; }
.tip-amount-btn.btn-primary { border-color: #ffd75a; background: linear-gradient(135deg,#fff8e0,#ffefc8); color: #b8860b; }
.tip-gifts { display: flex; gap: 8px; flex-wrap: wrap; }
.tip-gift-btn { padding: 8px 14px; border-radius: 20px; border: 1.5px solid var(--glass-brd-soft);
  background: var(--glass-2); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .2s; white-space: nowrap; }
.tip-gift-btn.btn-primary { border-color: #ff7acc; background: linear-gradient(135deg,#fff0f6,#ffe8f4); color: #c42872; }

.city-item { margin: 8px 12px; padding: 12px; border-radius: 18px; background: var(--glass-2); border: 1px solid var(--glass-brd-soft); box-shadow: var(--sd-1); display: flex; gap: 11px; }
.city-thumb { width: 62px; height: 62px; border-radius: 14px; background: linear-gradient(135deg,#c9ecff,#dcd0ff); flex: none; }

/* ---------- 好友申请 ---------- */
.apply-item { margin: 8px 12px; padding: 13px; border-radius: 18px; background: var(--glass-2); border: 1px solid var(--glass-brd-soft); box-shadow: var(--sd-1); }
.apply-remark { margin-top: 8px; padding: 8px 11px; border-radius: 12px; background: rgba(255,255,255,.55); font-size: 12.5px; color: var(--t-2); border: 1px solid var(--glass-brd-soft); }

/* ---------- 分享弹窗 ---------- */
.share-target {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px; cursor: pointer;
  transition: background var(--dur-f);
}
.share-target:hover { background: rgba(255,255,255,.55); }
.share-check {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 1.6px solid rgba(130,150,171,.5); display: grid; place-items: center;
  transition: all var(--dur-f) var(--ease-spring);
}
.share-check.on { background: var(--grad-primary); border-color: transparent; box-shadow: var(--sd-glow); }
.share-tabs { display: flex; gap: 8px; padding: 4px 16px 10px; }
.share-tab { flex: 1; height: 32px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--t-3); background: var(--glass-2); border: 1px solid var(--glass-brd-soft); }
.share-tab.on { background: var(--grad-primary); color: #fff; box-shadow: var(--sd-glow); border-color: transparent; }
.share-card {
  padding: 11px; border-radius: 14px; background: rgba(255,255,255,.6);
  border: 1px solid var(--glass-brd); display: flex; gap: 10px; align-items: center;
  margin: 0 16px 10px;
}

/* 聊天里的分享卡片气泡 */
.bubble.share-card-msg {
  background: linear-gradient(135deg, rgba(70,209,236,.10), rgba(47,124,246,.12));
  border: 1px solid rgba(70,209,236,.28);
  padding: 10px 12px; min-width: 220px; max-width: 280px;
  border-radius: 14px;
}
.sc-head { display: flex; align-items: center; gap: 6px; color: #2f7cf6; margin-bottom: 6px; }
.sc-tag { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: var(--grad-primary); color: #fff; }
.sc-title { line-height: 1.45; color: var(--t-1); }
.sc-msg { color: var(--t-2); line-height: 1.5; }
.sc-from { padding-top: 6px; border-top: 1px dashed var(--glass-line); }
.msg.self .bubble.share-card-msg { background: linear-gradient(135deg, rgba(47,124,246,.12), rgba(138,99,247,.10)); }

/* 直播分享卡片（醒目红 + 播放键，点击进入直播间） */
.bubble.share-card-msg.live-share {
  background: linear-gradient(135deg, rgba(255,78,90,.14), rgba(255,122,85,.12));
  border: 1px solid rgba(255,90,70,.40);
  box-shadow: 0 6px 20px rgba(255,78,90,.18);
}
.sc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; box-shadow: 0 0 0 0 rgba(255,77,79,.6); animation: livePulse 1.4s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,79,.55);} 70%{ box-shadow: 0 0 0 7px rgba(255,77,79,0);} 100%{ box-shadow: 0 0 0 0 rgba(255,77,79,0);} }
.sc-tag.live { background: linear-gradient(135deg,#ff5a46,#ff8a4c); }
.sc-live-body { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.sc-live-play { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg,#ff5a46,#ff8a4c); color: #fff; box-shadow: 0 4px 12px rgba(255,90,70,.35); }
.sc-live-play .icon-m { width: 20px; height: 20px; }
.share-card-detail-card.live { background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,244,240,.94)); }
.scd-icon.live { background: linear-gradient(135deg,#ff5a46,#ff8a4c); color: #fff; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; }
.scd-icon.live .icon-l { width: 30px; height: 30px; }
.share-card-detail-card.game { background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(240,244,255,.94)); }
.scd-icon.game { background: linear-gradient(135deg,#6b7bff,#9b6bff); color: #fff; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 28px; }

/* 游戏分享卡片（🎮 标签 + 分数，点击开玩） */
.bubble.share-card-msg.game-share {
  background: linear-gradient(135deg, rgba(107,123,255,.14), rgba(155,107,255,.12));
  border: 1px solid rgba(123,110,255,.40);
  box-shadow: 0 6px 20px rgba(107,123,255,.18);
}
.sc-tag.game { background: linear-gradient(135deg,#6b7bff,#9b6bff); }
.sc-game-dot { font-size: 13px; }
.sc-live-play.game { background: linear-gradient(135deg,#6b7bff,#9b6bff); }

/* ---------- 发现页 · 广告位 Banner（原斗地主入口，现轮播广告系统） ---------- */
.ad-carousel {
  position: relative;
  margin: 10px 12px 6px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(145deg, #0d1b3e 0%, #1a2a5e 35%, #2d1b4e 70%, #1a0a2e 100%);
  border: 1.5px solid rgba(255,215,100,.3);
  box-shadow:
    0 10px 40px rgba(10,5,40,.55),
    0 0 60px rgba(255,180,50,.08),
    inset 0 1px 0 rgba(255,255,255,.12);
  animation: adSlotPulse 4s ease-in-out infinite;
}
.ad-slides { position: relative; min-height: 132px; }
.ad-slide {
  position: relative;
  width: 100%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s ease;
  position: absolute; inset: 0;
  background: transparent;
}
.ad-slide.active {
  opacity: 1;
  visibility: visible;
  position: relative;
}
.ad-slide:hover {
  transform: translateY(-2px);
}
.ad-slide:active { transform: translateY(0) scale(.99); transition:.1s; }

@keyframes adSlotPulse {
  0%,100% { box-shadow: 0 10px 40px rgba(10,5,40,.55), 0 0 60px rgba(255,180,50,.08), inset 0 1px 0 rgba(255,255,255,.12); }
  50%      { box-shadow: 0 14px 48px rgba(10,5,40,.65), 0 0 75px rgba(255,180,50,.16), inset 0 1px 0 rgba(255,255,255,.18); }
}

/* 背景层：光晕 + 流光 */
.ad-slot-bg {
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.ad-orb {
  position:absolute; border-radius:50%; filter:blur(45px); opacity:.45;
}
.ad-orb1 { width:200px;height:200px;background:radial-gradient(circle,#ff6b35,#f72585); top:-50px;right:-30px; animation:adOrb1 7s ease-in-out infinite; }
.ad-orb2 { width:180px;height:180px;background:radial-gradient(circle,#4cc9f0,#4361ee); bottom:-40px;left:-20px; animation:adOrb2 9s ease-in-out infinite; }
@keyframes adOrb1{0%,100%{transform:translate(0,0)}50%{transform:translate(-25px,20px)}}
@keyframes adOrb2{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-18px)}}

.ad-shine {
  position:absolute; inset:-50%; background:
    linear-gradient(105deg,transparent 38%, rgba(255,255,255,.06) 42%, rgba(255,230,150,.14) 48%, rgba(255,255,255,.06) 54%, transparent 58%);
  animation: adShine 5.5s ease-in-out infinite;
}
@keyframes adShine { 0%{transform:translateX(-100%) rotate(8deg);} 100%{transform:translateX(120%) rotate(8deg);} }

/* 内容区 */
.ad-slot-body {
  position:relative; z-index:1; padding:18px 16px 14px; display:flex; flex-direction:column; gap:12px;
}
.ad-slot-top { display:flex; align-items:flex-start; gap:13px; }
.ad-icon-wrap {
  width:56px;height:56px;border-radius:18px;flex:none;display:grid;place-items:center;
  background:linear-gradient(145deg,#f7c948,#e6a000);
  box-shadow:0 6px 20px rgba(230,160,0,.45), inset 0 2px 0 rgba(255,255,255,.35);
  position:relative; overflow:hidden;
}
.ad-icon-wrap::after {
  content:'';position:absolute;inset:0;border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.25),transparent 55%);
  pointer-events:none;
}
.ad-icon-inner { font-size:29px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.ad-info { flex:1; min-width:0; }
.ad-title-row { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.ad-title {
  font-size:19px; font-weight:800; letter-spacing:.5px;
  background:linear-gradient(180deg,#fff8d6 0%,#f7d654 50%,#e6a000 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-shadow:0 2px 8px rgba(230,160,0,.3);
}
.ad-badge {
  font-size:9px; font-weight:800; padding:2px 7px; border-radius:6px; letter-spacing:.5px;
  vertical-align:middle; text-transform:uppercase;
  background:linear-gradient(135deg,#ff4757,#ff6b81); color:#fff;
  box-shadow:0 2px 8px rgba(255,71,87,.4); animation:adBadgePulse 2s ease-in-out infinite;
}
@keyframes adBadgePulse{0%,100%{box-shadow:0 2px 8px rgba(255,71,87,.4)}50%{box-shadow:0 2px 14px rgba(255,71,87,.65)}}

.ad-subtitle {
  font-size:12px; color:rgba(180,195,220,.85); font-weight:500; margin-bottom:6px;
}
.ad-tags { display:flex; gap:5px; flex-wrap:wrap; }
.ad-tag {
  font-size:10px; padding:2px 8px; border-radius:8px; font-weight:600;
  background:rgba(255,255,255,.1); color:rgba(200,210,235,.9);
  border:1px solid rgba(255,255,255,.12);
}
.ad-slot-img {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:72px; height:72px; object-fit:cover; border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.35); z-index:2;
}

/* 底部描述 + CTA */
.ad-slot-bottom {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:10px; border-top:1px solid rgba(255,255,255,.08);
}
.ad-desc {
  font-size:11.5px; color:rgba(170,185,215,.8); line-height:1.4; flex:1;
}
.ad-cta {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 14px; border-radius:12px; font-size:12px; font-weight:700;
  background:linear-gradient(135deg,#f7c948,#e6a000); color:#1a1a2e;
  box-shadow:0 4px 14px rgba(230,160,0,.35);
  white-space:nowrap; transition:transform .2s,box-shadow .2s;
}
.ad-slide:hover .ad-cta { transform:scale(1.05); box-shadow:0 6px 20px rgba(230,160,0,.5); }
.ad-cta-arrow { font-size:10px; transition:transform .2s; }
.ad-slide:hover .ad-cta-arrow { transform:translateX(3px); }

/* 轮播指示器 + 投放入口 */
.ad-dots {
  position: absolute; bottom: 42px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px;
  z-index: 3; pointer-events: none;
}
.ad-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.35);
  pointer-events: auto; cursor: pointer;
  transition: background .2s, transform .2s;
}
.ad-dot.active { background: #ffd166; transform: scale(1.3); }

.ad-deposit-bar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 12px;
  background: rgba(0,0,0,.28);
  border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ad-deposit-tip { font-size: 11px; color: rgba(200,210,235,.75); }
.ad-deposit-btn {
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 10px;
  background: linear-gradient(135deg,#f7c948,#e6a000); color: #1a1a2e;
  border: none; cursor: pointer;
  box-shadow: 0 2px 8px rgba(230,160,0,.35);
  transition: transform .15s;
}
.ad-deposit-btn:active { transform: scale(.96); }

/* 广告投放弹窗 · 套餐选择 */
.ad-pkg-list { display: flex; gap: 8px; flex-wrap: wrap; }
.ad-pkg {
  flex: 1; min-width: 84px; padding: 8px 6px;
  border-radius: 12px; border: 1.5px solid rgba(91,124,255,.25);
  background: rgba(245,250,255,.7);
  color: #4a5a7a; cursor: pointer;
  text-align: center; transition: all .2s;
}
.ad-pkg b { display: block; font-size: 13px; margin-bottom: 2px; }
.ad-pkg div { font-size: 12px; font-weight: 700; color: #ff6b35; }
.ad-pkg.selected {
  border-color: #5b7cff;
  background: linear-gradient(135deg,rgba(91,124,255,.15),rgba(139,92,246,.12));
  box-shadow: 0 2px 10px rgba(91,124,255,.25);
}

/* ===== 对局舞台：竖屏自动横屏 ===== */
.ddz-stage { position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; animation: ddzStageIn .5s ease; }
@keyframes ddzStageIn { from{ opacity:0; transform:scale(.97);} to{ opacity:1; transform:scale(1);} }
@media (orientation: portrait) and (max-width: 920px) {
  .ddz-stage { position:fixed; top:0; left:100vw; right:auto; bottom:auto; width:100vh; height:100vw; transform: rotate(90deg); transform-origin:0 0; }
}
.ddz-viewbody { background: linear-gradient(135deg, #1a2150 0%, #3a1d5c 55%, #5a2b6b 100%); overflow:hidden; }
.ddz-viewbody::before, .ddz-viewbody::after { content:''; position:absolute; border-radius:50%; filter: blur(50px); opacity:.5; pointer-events:none; z-index:0; }
.ddz-viewbody::before { width:280px; height:280px; background:radial-gradient(circle, #ff9ed2, #ff5fa2); top:-60px; left:-40px; animation: ddzFloat1 9s ease-in-out infinite; }
.ddz-viewbody::after { width:320px; height:320px; background:radial-gradient(circle, #7af0ff, #4f7bff); bottom:-80px; right:-50px; animation: ddzFloat2 11s ease-in-out infinite; }
@keyframes ddzFloat1 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(40px,30px) scale(1.15);} }
@keyframes ddzFloat2 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-50px,-20px) scale(1.1);} }

.ddz-root { position:absolute; inset:0; z-index:1; }
.ddz-nav { background: rgba(20,16,46,.5) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom:1px solid rgba(255,255,255,.15); }
.ddz-nav .nav-title { color:#fff; font-weight:800; letter-spacing:1px; }

.ddz-board { position:absolute; inset:0; display:flex; flex-direction:column; padding:8px 10px; gap:6px; color:#fff; font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; z-index:1; }
.ddz-top { display:flex; flex-direction:column; gap:6px; }
.ddz-info { display:flex; justify-content:space-between; align-items:center; }
.ddz-mult { background:rgba(255,235,160,.18); border:1px solid rgba(255,225,140,.55); color:#ffe9a8; font-weight:800; font-size:13px; padding:3px 12px; border-radius:14px; box-shadow:0 0 14px rgba(255,220,120,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.ddz-phase { font-size:12px; color:#dfe6ff; }
.ddz-opps { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; }
.ddz-opp { display:flex; flex-direction:column; align-items:center; gap:3px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-radius:14px; padding:6px 8px; min-width:108px; width:108px; position:relative; box-shadow:0 4px 16px rgba(20,10,40,.35); }
.ddz-opp.turn { box-shadow:0 0 0 2px #ffe08a, 0 0 18px rgba(255,224,138,.7); animation: ddzTurnGlow 1.6s ease-in-out infinite; }
@keyframes ddzTurnGlow { 0%,100%{ box-shadow:0 0 0 2px #ffe08a, 0 0 14px rgba(255,224,138,.5);} 50%{ box-shadow:0 0 0 2px #fff3cf, 0 0 26px rgba(255,224,138,.95);} }
.ddz-avatar { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:18px; font-weight:800; color:#fff; background:linear-gradient(160deg,#7a5cff,#4f8cff); border:2px solid rgba(255,255,255,.6); box-shadow:0 3px 10px rgba(0,0,0,.3); }
.ddz-avatar.landlord { background:linear-gradient(160deg,#ffcf6a,#ff9a3c); border-color:#fff3cf; color:#3a2400; }
.ddz-avatar.farmer { background:linear-gradient(160deg,#46d1ec,#3a7bff); }
.ddz-opp-row { display:flex; align-items:center; gap:5px; }
.ddz-opp-name { font-size:11px; color:#eef; }
.ddz-role { font-size:9.5px; padding:1px 7px; border-radius:8px; font-weight:700; }
.ddz-role.landlord { background:linear-gradient(160deg,#ffcf6a,#ff9a3c); color:#3a2400; }
.ddz-role.farmer { background:rgba(74,140,255,.85); color:#fff; }
.ddz-opp-cnt { font-size:11px; color:#cfe0ff; }
.ddz-opp-play { min-height:30px; display:flex; align-items:center; justify-content:center; }
.ddz-opp-cards { display:flex; flex-wrap:wrap; gap:2px; max-width:104px; justify-content:center; }
.ddz-pass { color:#ffd166; font-size:14px; font-weight:800; text-shadow:0 0 8px rgba(255,209,102,.6); }

.ddz-bottomcards { display:flex; flex-direction:column; align-items:center; gap:3px; background:rgba(255,255,255,.1); border:1px dashed rgba(255,225,140,.5); border-radius:10px; padding:5px 8px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.ddz-bc-label { font-size:9px; color:#ffe9a8; letter-spacing:1px; }

.ddz-center { flex:1; min-height:92px; display:grid; place-items:center; }
.ddz-last { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }
.ddz-center-hint { font-size:12px; color:#dfe6ff; background:rgba(255,255,255,.1); padding:6px 14px; border-radius:16px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }

.ddz-self { display:flex; flex-direction:column; gap:5px; }
.ddz-self-info { display:flex; align-items:center; gap:8px; }
.ddz-self-cnt { font-size:11px; color:#cfe0ff; }
.ddz-hand { display:flex; justify-content:center; align-items:flex-end; gap:3px; min-height:92px; padding-bottom:2px; max-width:100%; overflow-x:auto; flex-wrap:nowrap; }
.ddz-hc { transition:transform .12s, filter .12s; cursor:pointer; flex:0 0 auto; }
.ddz-hc:hover { transform:translateY(-8px); filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.ddz-hc.sel { transform:translateY(-14px); }
.ddz-hc.sel .ddz-card { box-shadow:0 0 0 2px #8fe9ff, 0 6px 18px rgba(120,220,255,.7); border-color:#bff0ff; }

.ddz-card { width:54px; height:78px; border-radius:9px; background:rgba(255,255,255,.9); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); color:#1a1a1a; padding:4px 5px; box-shadow:0 3px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.8); display:flex; flex-direction:column; justify-content:space-between; border:1px solid rgba(255,255,255,.7); position:relative; }
.ddz-card.red { color:#e23b3b; }
.ddz-card.black { color:#1a1a1a; }
.ddz-card.joker { background:linear-gradient(170deg,#fff,#ffe9c2); color:#b8860b; }
.ddz-card.joker.red { color:#e23b3b; }
.ddz-card .cf-top { font-weight:800; font-size:15px; line-height:1; display:flex; align-items:center; gap:2px; }
.ddz-card .cf-mid { font-size:26px; text-align:center; line-height:1; }
.ddz-card .cf-bot { font-weight:800; font-size:15px; line-height:1; text-align:right; }
.ddz-card .suit { font-style:normal; }
.ddz-card.played { }
@keyframes ddzPop { 0%{ transform:scale(.6); opacity:0;} 60%{ transform:scale(1.12);} 100%{ transform:scale(1); opacity:1;} }

.ddz-mini { display:inline-flex; align-items:center; gap:1px; background:rgba(255,255,255,.92); color:#1a1a1a; border:1px solid rgba(0,0,0,.15); border-radius:4px; padding:1px 4px; font-size:11px; font-weight:800; line-height:1.3; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.ddz-mini.red { color:#e23b3b; }
.ddz-mini.black { color:#1a1a1a; }
.ddz-mini.joker { background:linear-gradient(170deg,#fff,#ffe9c2); color:#b8860b; }
.ddz-mini.joker.red { color:#e23b3b; }
.ddz-mini .suit { font-style:normal; }

/* ---- 明牌 / 暗牌 ---- */
.ddz-reveal { margin-left:auto; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#ffe9a8; font-weight:700; font-size:11px; padding:3px 11px; border-radius:12px; cursor:pointer; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:transform .12s; }
.ddz-reveal:active { transform:scale(.94); }
.ddz-reveal.dark { color:#cfe0ff; }
.ddz-card.back { background:repeating-linear-gradient(45deg, #4a3a8a, #4a3a8a 6px, #5a47a8 6px, #5a47a8 12px); color:rgba(255,255,255,.5); border-color:rgba(255,255,255,.5); box-shadow:0 3px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3); }
.ddz-card.back .cf-top, .ddz-card.back .cf-mid, .ddz-card.back .cf-bot { display:none; }
.ddz-card.back::after { content:'🂠'; font-size:30px; text-align:center; line-height:74px; }

/* ---- 对方头像可点 + 表情特效 ---- */
.ddz-avatar { cursor:pointer; transition:transform .15s, box-shadow .15s; }
.ddz-avatar:hover { transform:scale(1.08); }
.ddz-avatar:active { transform:scale(.96); }
.ddz-emote-picker { z-index:45; background:rgba(30,22,60,.82); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.3); border-radius:18px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; align-items:center; box-shadow:0 10px 36px rgba(0,0,0,.5); animation: ddzPop .25s ease; max-width:86%; }
.ddz-emote-title { font-size:13px; font-weight:800; color:#ffe9a8; }
.ddz-emote-row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.ddz-emote-picker .e { font-size:30px; cursor:pointer; transition:transform .12s; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.ddz-emote-picker .e:hover { transform:scale(1.3) translateY(-3px); }
.ddz-emote-picker .e:active { transform:scale(.9); }

/* 飞行动效 + 贴纸爆裂 */
.ddz-fx-layer { position:absolute; inset:0; z-index:48; pointer-events:none; overflow:hidden; }
.ddz-fly { position:absolute; font-size:42px; will-change:transform,opacity; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.ddz-fly.go { transition:transform .72s cubic-bezier(.45,.05,.55,.95), opacity .72s ease; }
.ddz-burst { position:absolute; font-size:54px; transform:translate(-50%,-50%) scale(.4); opacity:0; will-change:transform,opacity; }
.ddz-burst.go { animation: ddzBurst .8s ease forwards; }
@keyframes ddzBurst { 0%{ transform:translate(-50%,-50%) scale(.4) rotate(-12deg); opacity:0; } 30%{ transform:translate(-50%,-50%) scale(1.5) rotate(8deg); opacity:1; } 60%{ transform:translate(-50%,-50%) scale(1.2) rotate(-4deg); opacity:1; } 100%{ transform:translate(-50%,-50%) scale(1.7) rotate(6deg); opacity:0; } }
/* 粒子四散 */
.ddz-particle { position:fixed; z-index:9998; pointer-events:none; will-change:transform,opacity; transition:transform .7s cubic-bezier(.2,.7,.3,1), opacity .7s ease; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
/* 头像震动（被特效命中时） */
.ddz-avatar.ddz-shake { animation: ddzShake .12s linear infinite; }
@keyframes ddzShake { 0%{ transform:translate(0,0) rotate(0); } 25%{ transform:translate(-3px,2px) rotate(-4deg); } 50%{ transform:translate(3px,-2px) rotate(4deg); } 75%{ transform:translate(-2px,-3px) rotate(-3deg); } 100%{ transform:translate(2px,3px) rotate(3deg); } }
/* 明牌徽章 */
.ddz-ming-badge { position:absolute; right:-4px; bottom:-4px; background:linear-gradient(135deg,#ffd76a,#ff7a3d); color:#3a1f00; font-size:10px; font-weight:800; width:16px; height:16px; line-height:16px; text-align:center; border-radius:50%; border:1.5px solid #fff; box-shadow:0 0 8px rgba(255,170,90,.8); }
.ddz-avatar { position:relative; }
/* 明牌按钮（叫地主弹窗） */
.ddz-btn.mingpai { background:linear-gradient(135deg,#ffd76a,#ff7a3d); color:#3a1f00; border:none; font-weight:800; box-shadow:0 0 16px rgba(255,170,90,.6); animation: ddzMingPulse 1.6s ease infinite; }
@keyframes ddzMingPulse { 0%,100%{ box-shadow:0 0 12px rgba(255,170,90,.5);} 50%{ box-shadow:0 0 24px rgba(255,170,90,.95);} }
.ddz-reveal.ming { background:linear-gradient(135deg,#ffd76a,#ff7a3d); color:#3a1f00; border:none; opacity:.92; cursor:default; }

.ddz-actions { display:flex; gap:8px; justify-content:center; }
.ddz-btn { background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-weight:700; padding:9px 18px; border-radius:14px; font-size:13px; box-shadow:0 4px 14px rgba(20,10,40,.3); transition:transform .12s, box-shadow .12s; }
.ddz-btn:active { transform:scale(.95); }
.ddz-btn.ghost { background:rgba(255,255,255,.08); }
.ddz-btn.primary { background:linear-gradient(135deg,#ffd76a,#ff9a5b); color:#3a1f00; border:none; box-shadow:0 4px 16px rgba(255,170,90,.55); }
.ddz-btn.hidden { visibility:hidden; }

.ddz-log { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:10px; padding:5px 8px; overflow:hidden; font-size:10px; line-height:1.5; height:74px; }
.ddz-log-line { color:#dfeeff; opacity:.9; }
.ddz-log-line.good { color:#8fffc0; }
.ddz-log-line.bad { color:#ff9a9a; }
.ddz-log-line.sys { color:#ffe9a8; font-weight:700; }

.ddz-tip { position:absolute; bottom:120px; left:50%; transform:translateX(-50%); background:rgba(20,16,46,.8); color:#ffe08a; font-size:11px; padding:6px 16px; border-radius:16px; z-index:30; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2); }

.ddz-modal { position:absolute; inset:0; background:rgba(10,8,30,.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:grid; place-items:center; z-index:40; }
.ddz-modal-inner { background:rgba(40,30,80,.55); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.3); border-radius:18px; padding:18px 22px; text-align:center; max-width:84%; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.ddz-modal-title { font-size:17px; font-weight:800; color:#ffe9a8; }
.ddz-modal-desc { font-size:11px; color:#dfe6ff; margin-top:4px; }
.ddz-modal-btns { display:flex; gap:8px; justify-content:center; margin-top:14px; flex-wrap:wrap; }

.ddz-over { position:absolute; inset:0; background:rgba(10,8,30,.55); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); display:grid; place-items:center; z-index:50; }
.ddz-over-inner { background:rgba(40,30,80,.6); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid rgba(255,255,255,.35); border-radius:22px; padding:28px 36px; text-align:center; box-shadow:0 14px 50px rgba(0,0,0,.6); animation: ddzIn .4s ease; }
@keyframes ddzIn { from{ transform:scale(.8); opacity:0;} to{ transform:scale(1); opacity:1;} }
.ddz-over-emoji { font-size:46px; animation: ddzBounce 1.4s ease infinite; }
@keyframes ddzBounce { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.ddz-over-title { font-size:22px; font-weight:800; margin-top:8px; color:#ffe9a8; }
.ddz-over-sub { font-size:13px; color:#eef; margin-top:8px; }
.ddz-over-btns { margin-top:18px; display:flex; flex-direction:column; gap:8px; }

/* ===== 聊天气泡（飘在头像上方） ===== */
.ddz-bubble-area { position:relative; min-height:28px; display:flex; flex-direction:column; align-items:center; gap:3px; margin-bottom:2px; pointer-events:none; z-index:8; }
.ddz-bubble-self { align-items:flex-start; padding-left:4px; }
.ddz-bubble { font-size:11px; line-height:1.35; padding:4px 10px; border-radius:10px; max-width:160px; word-break:break-word; animation: ddzBubbleIn .3s ease, ddzBubbleFade .6s ease 4.4s forwards; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; box-shadow:0 3px 12px rgba(0,0,0,.35); }
.ddz-bubble.me { background:linear-gradient(135deg,#7a5cff,#4f8cff); color:#fff; border-bottom-right-radius:3px; }
.ddz-bubble.ai { background:rgba(255,255,255,.22); color:#eef; border-bottom-left-radius:3px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25); }
.ddz-bubble.sys { background:rgba(255,217,106,.2); color:#ffe9a8; font-weight:700; border:1px solid rgba(255,217,106,.35); }
@keyframes ddzBubbleIn { from{ opacity:0; transform:translateY(6px) scale(.85);} to{ opacity:1; transform:translateY(0) scale(1);} }
@keyframes ddzBubbleFade { to{ opacity:0; transform:translateY(-6px);} }

/* ===== 聊天 / 语音 / 表情（紧凑悬浮条） ===== */
.ddz-chat-toggle { position:absolute; right:10px; bottom:96px; z-index:35; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#fff; font-size:20px; display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.ddz-chat-toggle:active { transform:scale(.92); }
/* 紧凑聊天条（气泡已在头像上显示，这里只做输入+历史） */
.ddz-chat { position:absolute; right:8px; bottom:8px; width:230px; max-height:280px; display:flex; flex-direction:column; gap:5px; background:rgba(40,30,80,.5); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.3); border-radius:16px; padding:7px; z-index:36; box-shadow:0 10px 40px rgba(0,0,0,.5); animation: ddzIn .25s ease; }
.ddz-chat-bar { max-height:260px; }
.ddz-chat-head { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.ddz-chat-title { font-size:12px; color:#ffe9a8; font-weight:700; }
.ddz-voice { width:34px; height:30px; border-radius:10px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); color:#dfe6ff; font-size:15px; }
.ddz-voice.on { background:linear-gradient(135deg,#ffd76a,#ff9a5b); color:#3a1f00; border:none; box-shadow:0 0 14px rgba(255,170,90,.6); }
.ddz-chat-close { width:30px; height:30px; border-radius:10px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:14px; }
.ddz-chat-msgs { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:4px; max-height:120px; padding-right:2px; }
.ddz-msg { font-size:11px; line-height:1.35; padding:4px 8px; border-radius:10px; max-width:88%; word-break:break-word; }
.ddz-msg.me { align-self:flex-end; background:linear-gradient(135deg,#7a5cff,#4f8cff); color:#fff; border-bottom-right-radius:4px; }
.ddz-msg.ai { align-self:flex-start; background:rgba(255,255,255,.16); color:#eef; border-bottom-left-radius:4px; }
.ddz-msg.sys { align-self:center; background:transparent; color:#ffe9a8; font-size:11px; }
.ddz-emojis { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.ddz-emojis .e { font-size:20px; width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.1); cursor:pointer; }
.ddz-emojis .e:active { transform:scale(.9); }
.ddz-chat-input { flex:1; min-width:0; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); border-radius:10px; color:#fff; font-size:12px; padding:6px 8px; outline:none; }
.ddz-chat-input::placeholder { color:rgba(255,255,255,.5); }
.ddz-chat-send { padding:6px 12px; border-radius:10px; background:linear-gradient(135deg,#ffd76a,#ff9a5b); color:#3a1f00; border:none; font-weight:700; font-size:12px; }
.ddz-chat-inputrow { display:flex; gap:6px; }

/* ---------- 分享卡片详情弹层 ---------- */
.share-card-detail {
  position: fixed; inset: 0; background: rgba(8, 14, 30, .65); backdrop-filter: blur(18px);
  display: grid; place-items: center; z-index: 200; padding: 24px;
}
.share-card-detail-card {
  position: relative; max-width: 360px; width: 100%; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,255,.92));
  box-shadow: 0 30px 80px rgba(20, 28, 60, .35); overflow: hidden;
  border: 1px solid rgba(255,255,255,.6);
}
.scd-head {
  padding: 28px 20px 20px; text-align: center; color: #fff;
  background: linear-gradient(135deg, #2f7cf6, #8a63f7);
}
.scd-icon {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 16px;
  display: grid; place-items: center; background: rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
}
.scd-icon svg { width: 30px; height: 30px; }
.scd-body { padding: 20px; }
.scd-label { font-size: 11px; color: var(--t3); letter-spacing: .5px; }
.scd-title { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--t1); margin-top: 4px; word-break: break-word; }
.scd-msg { font-size: 13px; color: var(--t2); line-height: 1.6; padding: 10px 12px; border-radius: 12px; background: rgba(47,124,246,.06); }
.scd-meta { padding: 12px 14px; border-radius: 12px; background: var(--glass-1); border: 1px solid var(--glass-line); font-size: 12.5px; }
.scd-meta-k { display: inline-block; width: 56px; color: var(--t3); }
.scd-actions { padding: 0 20px 20px; display: flex; gap: 10px; }

/* ---------- 分享赚 VIP 页面 ---------- */
.share-earn-hero {
  position: relative; overflow: hidden; padding: 18px 18px 16px;
  border-radius: 20px; background: linear-gradient(135deg, rgba(255,154,118,.12), rgba(244,82,95,.10));
  border: 1px solid rgba(255,154,118,.25); margin: 12px 14px 0;
}
.se-glow {
  position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,154,118,.5), transparent 70%);
  filter: blur(20px); pointer-events: none;
}
.se-icon {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, #ff9a76, #f4525f); color: #fff;
  box-shadow: 0 8px 22px rgba(244,82,95,.35);
}
.se-icon svg { width: 24px; height: 24px; }
.se-num { font-size: 28px; font-weight: 700; color: var(--t1); }
.se-vip-reward { text-align: right; }
.se-progress { padding-top: 12px; border-top: 1px solid var(--glass-line); }
.se-progress-bar { height: 6px; border-radius: 3px; background: rgba(0,0,0,.06); overflow: hidden; }
.se-progress-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff9a76, #f4525f); transition: width .4s; }

.share-earn-card {
  margin: 12px 14px; padding: 16px; border-radius: 20px;
  background: var(--glass-1); border: 1px solid var(--glass-brd-soft);
}
.qr-box {
  width: 200px; height: 200px; margin: 0 auto; padding: 12px;
  border-radius: 16px; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.share-earn-link {
  font-size: 11.5px; color: var(--t3); padding: 8px 12px; border-radius: 10px;
  background: rgba(0,0,0,.04); text-align: center; word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.se-rules { display: flex; flex-direction: column; gap: 8px; }
.se-rule {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--glass-1); border: 1px solid var(--glass-line);
}
.se-rule.reached { background: linear-gradient(135deg, rgba(70,209,236,.12), rgba(47,124,246,.10)); border-color: rgba(70,209,236,.3); }
.se-rule-mark {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.06); color: var(--t3); font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.se-rule.reached .se-rule-mark { background: linear-gradient(135deg, #46d1ec, #2f7cf6); color: #fff; }
.se-rule-vip { flex-shrink: 0; }

.se-invite-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--glass-line);
}
.se-invite-row:last-child { border-bottom: 0; }

/* ---------- 权限拦截弹窗 ---------- */
.lock-hero {
  height: 88px; margin: -22px -20px 14px; border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--grad-vip); display: grid; place-items: center; position: relative; overflow: hidden;
}
.lock-hero svg { width: 38px; height: 38px; color: #4a2b00; position: relative; }
.lock-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-100%); animation: badgeSweep 3s var(--ease-inout) infinite; }

/* ---------- 焚烧阅读全屏 ---------- */
.burn-read {
  position: absolute; inset: 0; z-index: 130;
  background: radial-gradient(circle at 50% 45%, rgba(255,160,90,.3), rgba(30,10,10,.9));
  backdrop-filter: blur(var(--blur-l)); -webkit-backdrop-filter: blur(var(--blur-l));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 30px; color: #fff; animation: blurIn .35s var(--ease-out) both;
}
.burn-content { font-size: 18px; font-weight: 600; text-align: center; line-height: 1.7; max-width: 280px; }
.burn-timer {
  margin-top: 26px; width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; font-weight: 800;
  border: 3px solid rgba(255,180,120,.7); color: #ffd6a8;
  box-shadow: 0 0 30px rgba(255,140,80,.5), inset 0 0 24px rgba(255,140,80,.3);
  animation: breathe 1s var(--ease-inout) infinite;
}

/* ---------- 登录 / 注册页 ---------- */
.auth-wrap {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 30px; text-align: center; position: relative; z-index: 1;
}
.auth-logo {
  width: 62px; height: 62px; border-radius: 20px;
  background: var(--grad-primary); display: grid; place-items: center;
  box-shadow: var(--sd-glow); animation: breathe 3s var(--ease-inout) infinite;
}
.auth-logo .icon { width: 32px; height: 32px; }
.auth-name { font-size: 24px; font-weight: 800; margin-top: 14px; letter-spacing: .5px; }
.auth-sub { font-size: 12.5px; color: var(--t-3); margin-top: 6px; line-height: 1.6; }
.auth-card { width: 100%; margin-top: 26px; text-align: left; }
.auth-card .field { margin-bottom: 12px; }
.auth-link { color: var(--c-blue); font-weight: 600; cursor: pointer; }
.auth-cbox {
  width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center;
  font-size: 11px; color: #fff; background: var(--grad-primary); flex: none;
}
.auth-tip { margin-top: 18px; font-size: 11.5px; color: var(--t-4); line-height: 1.8; }
.auth-demo {
  margin-top: 12px; padding: 7px 14px; border-radius: 99px; font-size: 11px;
  background: var(--glass-2); border: 1px solid var(--glass-brd-soft); color: var(--t-3);
}

/* ---------- 群管理：成员宫格 ---------- */
.gm-members {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 6px 16px 12px;
}
.gm-member {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 4px; border-radius: 12px; cursor: pointer;
  transition: background var(--dur-f) var(--ease-out);
}
.gm-member:hover { background: rgba(255,255,255,.6); }
.gm-member span { font-size: 11px; color: var(--t-2); max-width: 100%; }
.gm-member .gm-avatar { position: relative; display: inline-block; }
.gm-member .gm-admin-badge {
  position: absolute; right: -4px; bottom: -2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--grad-vip); color: #4a2b00;
  font-size: 9px; font-weight: 800;
  display: grid; place-items: center;
  border: 1.5px solid #fff;
}
.gm-member .gm-more, .gm-member .gm-add {
  background: rgba(255,255,255,.65);
  border: 1.5px dashed rgba(130,150,171,.55);
  color: var(--t-3);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
}
.gm-member .gm-add { color: var(--c-blue); }

/* 全员禁言横幅（后台群聊参数控制） */
.mute-banner {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 12px 0; padding: 8px 12px;
  border-radius: 12px; font-size: 12px; color: #b9791f;
  background: rgba(255,179,58,.14); border: 1px solid rgba(255,179,58,.35);
}

/* 群管理设置容器：透明（避免"白条"空卡片），由 cell 自身玻璃感区分 */
.gm-cells { margin: 0 12px; }
.gm-cells .cell { margin-bottom: 8px; border-radius: 16px; }
.gm-cells .cell:last-child { margin-bottom: 0; }

/* 头像渐变选择器 */
.ap-center { display: grid; place-items: center; padding: 10px 0 14px; }
.ap-preview {
  width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 36px; font-weight: 700;
  background-size: cover; background-position: center;
  box-shadow: 0 8px 22px rgba(31,74,140,.22);
  border: 3px solid #fff;
  transition: all .28s var(--ease-out);
}
.ap-actions { display: flex; justify-content: center; padding: 0 18px 14px; gap: 8px; }
.ap-tips { text-align: center; font-size: 11px; color: var(--t-3); padding: 0 18px 8px; }
.ap-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  padding: 6px 18px 14px;
}
.ap-swatch {
  width: 100%; aspect-ratio: 1/1; border-radius: 16px;
  border: 2px solid rgba(255,255,255,.7);
  cursor: pointer; transition: transform .2s var(--ease-out), box-shadow .2s;
  box-shadow: 0 6px 16px rgba(31,74,140,.18);
}
.ap-swatch:hover { transform: scale(1.04); }
.ap-swatch:active { transform: scale(.96); }

/* 三档段控（震动强度等） */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; background: var(--glass-3); border: 1px solid var(--glass-brd-soft); }
.seg-btn { border: 0; background: transparent; padding: 6px 12px; border-radius: 99px; font-size: 12px; color: var(--t-2); cursor: pointer; transition: all .2s var(--ease-out); }
.seg-btn.on { background: var(--grad-primary); color: #fff; box-shadow: 0 4px 10px rgba(47,124,246,.3); }


/* ---------- 空态提示（新账号 / 无数据） ---------- */
.empty-tip {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; padding: 44px 28px 30px; color: var(--t-4);
}
.empty-tip .icon { width: 34px; height: 34px; opacity: .5; }
.empty-tip b { font-size: 15px; font-weight: 600; color: var(--t-3); margin-top: 6px; }
.empty-tip span { font-size: 12px; line-height: 1.7; max-width: 230px; }
.empty-tip.sm { padding: 26px 18px; }
.msg-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 60px 0; color: var(--t-4); font-size: 13px;
}
.msg-empty span { font-size: 11.5px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .stage { flex-direction: column; gap: 20px; padding: 20px 14px; }
  .stage-side { width: 100%; max-width: 390px; max-height: none; }
  .phone { transform: scale(.94); transform-origin: top center; }
}
@media (max-width: 460px) {
  /* ⚠️ 修复：窄视口下必须给 .phone-wrap 显式宽度，否则 width:100% 与 column flex
     的「内容决定宽度」形成循环依赖，手机容器塌缩到内容 min-content（实测 156px），
     聊天文字被压成竖条。 */
  .phone-wrap { width: 100%; }
  .phone { width: 100%; height: 92vh; border-radius: 40px; padding: 8px; transform: none; }
  .screen { border-radius: 34px; }
}

/* ====== Task 20: 头像框 / 主页背景 / 聊天背景 / 写动态&相册 ====== */

/* 头像框：3 套动态玻璃质感 */
.avatar-wrap { position: relative; display: inline-block; }
.vip-frame {
  position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  border: 2px solid transparent; background-clip: padding-box;
}
.vip-frame::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 0deg, #ffd76a, #ff7a8a, #7a9cff, #b07bff, #ffd76a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: frameSpin 6s linear infinite;
}
.vip-frame-halo::before { filter: drop-shadow(0 0 8px rgba(255,215,106,.7)); }
.vip-frame-aurora::before {
  background: conic-gradient(from 0deg, #46d1ec, #2f7cf6, #a86bff, #ff7ab8, #ffd76a, #46d1ec);
  animation-duration: 4s;
}
.vip-frame-prism::before {
  background: conic-gradient(from 45deg, #ff9a76, #f4525f, #b48bff, #7a9cff, #7bdcb5, #ffd76a, #ff9a76);
  animation-duration: 8s;
}
@keyframes frameSpin { to { transform: rotate(360deg); } }

/* 主页背景：4 套玻璃质感 */
.profile-hero.profile-bg-aurora {
  background: linear-gradient(135deg, rgba(70,209,236,.45), rgba(47,124,246,.38) 55%, rgba(168,107,255,.42));
}
.profile-hero.profile-bg-aurora::after {
  content: ""; position: absolute; width: 260px; height: 260px; left: -60px; bottom: -120px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.45), transparent 70%); pointer-events: none;
}
.profile-hero.profile-bg-ocean {
  background: linear-gradient(160deg, rgba(20,60,120,.55), rgba(40,120,180,.45) 50%, rgba(120,200,220,.45));
}
.profile-hero.profile-bg-sunset {
  background: linear-gradient(135deg, rgba(255,154,118,.55), rgba(244,82,95,.4) 45%, rgba(180,80,180,.45));
}
.profile-hero.profile-bg-diamond {
  background: linear-gradient(135deg, rgba(230,230,250,.7), rgba(180,160,240,.55) 50%, rgba(120,180,230,.6));
}

/* 聊天背景：作用于 .chat-view .view-body */
.chat-view .view-body.chat-bg-aurora { background: linear-gradient(135deg, rgba(70,209,236,.22), rgba(168,107,255,.18) 60%, rgba(255,215,106,.16)); }
.chat-view .view-body.chat-bg-ocean  { background: linear-gradient(160deg, rgba(20,60,120,.28), rgba(80,160,200,.22) 60%, rgba(180,220,240,.25)); }
.chat-view .view-body.chat-bg-sunset { background: linear-gradient(135deg, rgba(255,154,118,.28), rgba(244,82,95,.22) 50%, rgba(180,80,180,.25)); }
.chat-view .view-body.chat-bg-diamond{ background: linear-gradient(135deg, rgba(230,230,250,.35), rgba(180,160,240,.3) 50%, rgba(120,180,230,.32)); }

/* stat tile 可点击 */
.ph-stat.clickable { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.ph-stat.clickable:active { transform: scale(.96); }
.ph-stat.clickable:hover { box-shadow: var(--sd-1); }
.ph-stat .stat-act { display:block; font-size: 9.5px; color: var(--c-blue); margin-top: 2px; font-weight: 600; }

/* 选择网格（头像框 / 背景） */
.picker-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 4px 0 10px; }
.picker-card {
  border-radius: 14px; padding: 14px 8px; text-align: center; cursor: pointer;
  border: 1.5px solid var(--glass-brd); background: rgba(255,255,255,.45);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.picker-card:active { transform: scale(.97); }
.picker-card.on { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(79,110,247,.18); background: rgba(255,255,255,.7); }
.picker-card .pc-swatch { width: 100%; height: 56px; border-radius: 10px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,.6); }
.picker-card .pc-name { font-size: 13px; font-weight: 600; }
.picker-card .pc-sub { font-size: 10.5px; color: var(--t-3); margin-top: 2px; }

/* 写动态 / 相册上传 sheet 内表单 */
.compose-area {
  width: 100%; min-height: 110px; padding: 12px; border-radius: 14px;
  border: 1px solid var(--glass-brd); background: rgba(255,255,255,.55); resize: vertical;
  font-size: 14px; color: var(--t-1); outline: none;
}
.upload-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.upload-slot {
  aspect-ratio: 1/1; border-radius: 12px; border: 1.5px dashed rgba(120,140,180,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--t-3); font-size: 11px; cursor: pointer;
  background: rgba(255,255,255,.35); transition: border-color .18s, background .18s;
}
.upload-slot:hover { border-color: var(--c-blue); background: rgba(47,124,246,.08); }

/* ============ UGC：动态 / 相册 / 评论 ============ */
/* 草稿预览缩略图 */
.up-thumb { position: relative; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.4); }
.up-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.up-x {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border: 0; cursor: pointer;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.up-x:hover { background: var(--c-danger); }

/* 我的动态卡片 */
.mm-list { padding: 0 12px; display: flex; flex-direction: column; gap: 10px; }
.mm-card {
  padding: 12px 13px; border-radius: 16px; cursor: pointer;
  background: rgba(255,255,255,.55); border: 1px solid var(--glass-brd);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: transform .16s, box-shadow .16s;
}
.mm-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(40,70,140,.12); }
.mm-text { font-size: 14px; line-height: 1.65; color: var(--t-1); margin-top: 6px; word-break: break-word; }
.mm-imgs { display: grid; gap: 4px; margin-top: 8px; grid-template-columns: repeat(3, 1fr); }
.mm-imgs.n1 { grid-template-columns: minmax(0, 62%); }
.mm-imgs.n2, .mm-imgs.n4 { grid-template-columns: repeat(2, 1fr); }
.mm-imgs img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; display: block; cursor: zoom-in; }
.mm-imgs.n1 img { aspect-ratio: 4/3; }
.mm-blocked {
  margin-top: 8px; padding: 14px; border-radius: 12px; text-align: center; font-size: 12px;
  color: var(--c-danger); background: rgba(244,82,95,.08); border: 1px dashed rgba(244,82,95,.35);
}
.mm-op { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.mm-op.on { color: var(--c-danger); font-weight: 600; }
.mm-del {
  border: 0; background: transparent; color: var(--t-3); cursor: pointer; padding: 2px 4px;
  display: inline-flex; align-items: center; border-radius: 6px;
}
.mm-del:hover { color: var(--c-danger); background: rgba(244,82,95,.1); }

/* 我的相册网格 */
.ab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 12px; }
.ab-card {
  border-radius: 14px; overflow: hidden; cursor: pointer; padding: 6px;
  background: rgba(255,255,255,.5); border: 1px solid var(--glass-brd); transition: transform .16s;
}
.ab-card:hover { transform: translateY(-2px); }
.ab-cover { position: relative; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; background: rgba(120,150,200,.16); }
.ab-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--t-3); opacity: .6; }
.ab-count {
  position: absolute; right: 4px; bottom: 4px; padding: 1px 6px; border-radius: 8px;
  background: rgba(0,0,0,.5); color: #fff; font-size: 10px;
}
.ab-blocked {
  position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 8px;
  background: var(--c-danger); color: #fff; font-size: 10px;
}
.ab-name {
  font-size: 12px; font-weight: 600; color: var(--t-1); margin: 5px 2px 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* UGC 空状态 */
.ugc-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px 18px; margin: 0 12px; border-radius: 16px; color: var(--t-3);
  background: rgba(255,255,255,.4); border: 1px dashed var(--glass-brd);
}
.ugc-empty .icon { opacity: .45; }

/* 相册详情照片网格 + 大图查看器 */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ph-item { position: relative; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; }
.ph-item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.photo-viewer {
  position: fixed; inset: 0; z-index: 99; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.9); padding: 20px;
}
.photo-viewer img { max-width: 100%; max-height: 84vh; border-radius: 10px; object-fit: contain; }
.photo-close {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border: 0; cursor: pointer;
  border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 20px; line-height: 1;
}

/* 评论列表 */
.cmt-list { display: flex; flex-direction: column; gap: 2px; }
.cmt-list .cmt-item { padding: 8px 0; border-bottom: 1px solid var(--glass-line); }
.cmt-list .cmt-item:last-child { border-bottom: 0; }
.form-lbl { display: block; margin: 8px 0 4px; }
.confirm-sheet { padding-bottom: 4px; }

/* 钱包 / 收藏 sheet tabs */
.wallet-tabs, .fav-tabs { display: flex; gap: 6px; padding: 6px 0 10px; border-bottom: 1px solid var(--glass-line); margin-bottom: 10px; }
.wallet-tabs .tab, .fav-tabs .tab {
  flex: 1; text-align: center; padding: 8px 0; border-radius: 10px; font-size: 12.5px; color: var(--t-3); cursor: pointer;
}
.wallet-tabs .tab.on, .fav-tabs .tab.on { background: var(--c-blue); color: #fff; font-weight: 600; }
.wallet-balance { padding: 14px; border-radius: 16px; background: linear-gradient(135deg,#ffdf8a,#ffab6b 60%,#b57bff); color:#fff; margin-bottom:10px; }
.wallet-balance b { font-size: 26px; }
.order-row, .fav-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--glass-line); font-size: 13px;
}
.order-row:last-child, .fav-row:last-child { border-bottom: 0; }

/* homeAuth VIP 门槛分隔 */
.auth-divider { margin: 12px 0 6px; padding-top: 10px; border-top: 1px dashed var(--glass-brd-soft); display: flex; align-items: center; gap: 6px; }
.auth-divider .f12 { font-weight: 600; }
.auth-divider .auth-vip-tag { margin-left: auto; }

/* 我的广告订单 */
.ad-orders-list { padding-right: 2px; }
.ad-order-card { background: var(--glass-bg, #fff); }
.ad-order-tag.ok { color: #18a058; font-weight: 600; }
.ad-order-pay { padding: 6px 12px; font-size: 13px; }
.t-warn { color: #f0883a; }

/* ============================================================
   聊天长按菜单 / 收藏 / 客服 / 特权账号（新组件样式）
   ============================================================ */

/* 通用未读红点 */
.dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: linear-gradient(135deg,#ff5168,#f4525f);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(244,82,95,.35);
  flex-shrink: 0;
}
.cell .dot { margin-right: 6px; }

/* 聊天消息长按菜单 */
.msg-menu-sheet { padding: 8px 4px 14px; }
.msg-menu-sheet .sheet-handle { margin-bottom: 8px; }
.mm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 10px; }
.mm-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 12px 4px; border-radius: 12px;
  background: var(--glass-bg-2, rgba(255,255,255,.12));
  border: 1px solid var(--glass-brd-soft, rgba(255,255,255,.12));
  color: var(--t-1, #fff); font-size: 12px; cursor: pointer;
  transition: transform .15s, background .15s;
}
.mm-item:active { transform: scale(0.96); background: rgba(255,255,255,.22); }
.mm-item .icon-m { font-size: 22px; margin-bottom: 2px; }

/* 大图查看器 */
.media-viewer { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.media-viewer img, .media-viewer video { max-width: 100%; max-height: 100%; object-fit: contain; }
.mv-toolbar { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 16px 24px; background: linear-gradient(transparent, rgba(0,0,0,.6)); display: flex; gap: 12px; justify-content: center; }
.mv-toolbar button { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: 20px; padding: 8px 16px; font-size: 13px; }
.mv-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 22px; }

/* 我的收藏 */
.fav-list { padding: 8px 14px 14px; }
.fav-card {
  background: var(--glass-bg, rgba(255,255,255,.16));
  border: 1px solid var(--glass-brd, rgba(255,255,255,.14));
  border-radius: 14px; padding: 12px; margin-bottom: 10px;
  backdrop-filter: blur(8px);
}
.fav-card .fav-title { font-size: 14px; font-weight: 700; }
.fav-card .fav-body { font-size: 13px; opacity: .9; margin-top: 6px; line-height: 1.5; }
.fav-card .fav-note { font-size: 11px; opacity: .65; margin-top: 8px; }
.fav-card .fav-meta { display: flex; gap: 8px; margin-top: 10px; }
.fav-card .fav-tag { font-size: 10px; padding: 2px 7px; border-radius: 6px; background: rgba(79,110,247,.18); color: #a8b8ff; }

/* 客服中心 */
.cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 10px 14px; }
.cs-card {
  background: var(--glass-bg, rgba(255,255,255,.14));
  border: 1px solid var(--glass-brd, rgba(255,255,255,.12));
  border-radius: 16px; padding: 16px 12px; text-align: center;
  backdrop-filter: blur(8px); cursor: pointer;
}
.cs-card .cs-ico { font-size: 28px; margin-bottom: 6px; }
.cs-card .cs-title { font-size: 14px; font-weight: 700; }
.cs-card .cs-sub { font-size: 11px; opacity: .75; margin-top: 4px; }

/* 投诉工单 */
.cp-list { padding: 8px 14px 14px; }
.cp-item {
  background: var(--glass-bg, rgba(255,255,255,.14));
  border: 1px solid var(--glass-brd, rgba(255,255,255,.12));
  border-radius: 14px; padding: 12px; margin-bottom: 10px;
}
.cp-item .cp-head { display: flex; justify-content: space-between; align-items: center; }
.cp-item .cp-type { font-size: 11px; padding: 2px 8px; border-radius: 8px; background: rgba(244,82,95,.15); color: #ff9aa5; }
.cp-item .cp-status { font-size: 11px; }
.cp-item .cp-status.done { color: #6ee7a8; }
.cp-item .cp-status.pending { color: #ffd76a; }
.cp-item .cp-body { font-size: 13px; margin-top: 8px; line-height: 1.5; }
.cp-item .cp-time { font-size: 10px; opacity: .55; margin-top: 6px; }
.cp-reply { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(34,197,94,.1); font-size: 12px; color: #6ee7a8; }
.cp-empty { text-align: center; padding: 40px 20px; opacity: .7; }

/* 特权账号面板 */
.su-banner {
  margin: 12px 14px 0; padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,215,106,.18), rgba(240,136,58,.18));
  border: 1px solid rgba(255,215,106,.25);
}
.su-banner .su-title { font-size: 15px; font-weight: 800; }
.su-banner .su-sub { font-size: 12px; opacity: .85; margin-top: 4px; }
.su-list { padding: 10px 14px 14px; }
.su-user {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass-bg, rgba(255,255,255,.12));
  border: 1px solid var(--glass-brd, rgba(255,255,255,.1));
  border-radius: 14px; padding: 12px; margin-bottom: 10px;
}
.su-user .su-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; background: linear-gradient(135deg,#f0883a,#f4525f); color: #fff; flex-shrink: 0; }
.su-user .su-name { font-size: 14px; font-weight: 700; }
.su-user .su-sub { font-size: 10px; opacity: .6; margin-top: 2px; word-break: break-all; }
.su-user .su-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 6px; margin-left: 4px; }
.su-user .su-badge.on { background: rgba(34,197,94,.2); color: #6ee7a8; }
.su-user .su-badge.off { background: rgba(244,82,95,.2); color: #ff9aa5; }
.su-user .su-badge.super { background: linear-gradient(135deg,#f0883a,#f4525f); color: #fff; }

/* 直播间礼物飘屏 */
.live-gift-float {
  position: absolute; left: 50%; top: 30%; transform: translateX(-50%) scale(0.8);
  pointer-events: none; z-index: 100;
}
.live-gift-float > div {
  background: linear-gradient(90deg,#ff9a76,#f4525f); color: #fff;
  padding: 8px 18px; border-radius: 20px; font-size: 14px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(244,82,95,.4);
}
@keyframes liveGiftFloat {
  0% { transform: translateX(-50%) scale(0.6); opacity: 0; }
  15% { transform: translateX(-50%) scale(1.05); opacity: 1; }
  30% { transform: translateX(-50%) scale(1); opacity: 1; }
  80% { transform: translateX(-50%) translateY(-40px) scale(0.95); opacity: .9; }
  100% { transform: translateX(-50%) translateY(-80px) scale(0.8); opacity: 0; }
}
.live-gift-float { animation: liveGiftFloat 2.2s ease forwards; }

/* 同城生活 */
.city-banner { margin: 8px 14px 4px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.1); font-size: 12px; opacity: .9; }
.city-card { display: flex; gap: 12px; background: var(--glass-bg, rgba(255,255,255,.14)); border: 1px solid var(--glass-brd, rgba(255,255,255,.1)); border-radius: 16px; padding: 12px; margin: 10px 14px; }
.city-cover { width: 72px; height: 72px; border-radius: 12px; background: rgba(255,255,255,.1); background-size: cover; background-position: center; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.city-cover-emoji { font-size: 32px; }
.city-body { flex: 1; min-width: 0; }
.city-cat { font-size: 10px; padding: 2px 8px; border-radius: 8px; background: rgba(79,110,247,.18); color: #a8b8ff; }
.city-meta { display: flex; align-items: center; gap: 5px; font-size: 12px; opacity: .75; margin-top: 5px; }
.city-detail-cover { height: 160px; border-radius: 16px 16px 0 0; background: rgba(255,255,255,.1); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.city-detail-cover.city-cover-emoji { border-radius: 16px 16px 0 0; font-size: 64px; }
.city-comment-box { border-top: 1px solid var(--glass-brd, rgba(255,255,255,.1)); padding-top: 12px; }
.city-comment-list { max-height: 160px; overflow-y: auto; margin-bottom: 8px; }
.city-comment { background: rgba(255,255,255,.08); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.city-comment b { font-size: 12px; }
.city-cover-picker { width: 72px; height: 72px; border-radius: 12px; border: 1.5px dashed rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(255,255,255,.06); }
.city-cover-add { text-align: center; font-size: 22px; color: var(--t-2, #fff); }
.city-cover-add span { font-size: 11px; }

/* ============================================================
   App 内性能模式（body.is-plus）：WebView 降载，专治「手机里卡/慢」
   来源：HBuilderX 5+ App 原生壳加载本网页时，app.html 会给 body 加 is-plus。
   思路：① 关闭长期持续型动画（背景光斑/来电波纹/远程桌面网格光标）
        ② 大幅降低毛玻璃模糊（backdrop-filter 是 WebView 头号 GPU 消耗）
        ③ 过渡动画收敛到极短，减少滚动/切换掉帧
   ============================================================ */
/* ① 关闭长期持续动画 —— 这些每帧重绘，是卡顿主因 */
body.is-plus .screen-blobs { display: none !important; }          /* 背景浮动光斑：直接省掉 */
body.is-plus .call-avatar .wave,
body.is-plus .remote-grid-bg,
body.is-plus .remote-cursor,
body.is-plus .profile-hero.profile-bg-aurora::after,
body.is-plus [class*="aurora"]::after { animation: none !important; }

/* ② 降低毛玻璃模糊：优先降低 CSS 变量；再单独覆盖写死大模糊的几个容器。
   注意：绝不用 body.is-plus * 通配，否则会把普通文字/图片也强制 blur，
         导致统计卡片等布局压扁、界面难看。 */
body.is-plus { --blur-l: 6px; --blur-m: 4px; --blur-s: 3px; }
body.is-plus .screen,
body.is-plus .view-card,
body.is-plus .cell-group,
body.is-plus .modal,
body.is-plus .panel,
body.is-plus .tabbar,
body.is-plus .bubble,
body.is-plus .msg,
body.is-plus .glass,
body.is-plus .remote-layer,
body.is-plus [class*="blur"] {
  backdrop-filter: blur(4px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(4px) saturate(120%) !important;
}

/* ③ 过渡动画收敛，仅作用于交互元素，避免列表滚动/切换掉帧 */
body.is-plus .btn,
body.is-plus .cell,
body.is-plus .tab-item,
body.is-plus .bubble,
body.is-plus .card,
body.is-plus .nav-back,
body.is-plus input,
body.is-plus textarea,
body.is-plus button { transition-duration: 0.12s !important; }