/* ============================================================
   Glass Social — 全局玻璃拟态设计系统
   规范来源：《玻璃质感动态社交APP 全功能开发文档》1.2 视觉核心规范
   ============================================================ */

/* ---------- 1. 设计令牌 Design Tokens ---------- */
:root {
  /* 主色：极简青蓝渐变 */
  --c-cyan: #39c6e8;
  --c-blue: #2f7cf6;
  --c-blue-deep: #1e5fd0;
  --grad-primary: linear-gradient(135deg, #46d1ec 0%, #2f7cf6 100%);
  --grad-primary-soft: linear-gradient(135deg, rgba(70, 209, 236, .18), rgba(47, 124, 246, .18));

  /* VIP 专属金紫 */
  --c-gold: #ffd76a;
  --c-purple: #a86bff;
  --grad-vip: linear-gradient(135deg, #ffd76a 0%, #ff9a5b 45%, #a86bff 100%);
  --grad-vip-soft: linear-gradient(135deg, rgba(255, 215, 106, .22), rgba(168, 107, 255, .22));

  /* 状态色 */
  --c-success: #1fbf7a;
  --c-warn: #f0a020;
  --c-danger: #f4525f;
  --c-info: #3f8bff;

  /* 背景 */
  --bg-1: #e8f2ff;
  --bg-2: #f4fbff;
  --bg-3: #e6f7f4;
  --bg-4: #f7f0ff;

  /* 玻璃层级（分层透明渐变） */
  --glass-1: rgba(255, 255, 255, .42);
  --glass-2: rgba(255, 255, 255, .58);
  --glass-3: rgba(255, 255, 255, .74);
  --glass-4: rgba(255, 255, 255, .88);
  --glass-brd: rgba(255, 255, 255, .78);
  --glass-brd-soft: rgba(255, 255, 255, .5);
  --glass-line: rgba(31, 74, 140, .08);

  /* 模糊强度（随窗口动态变化，见媒体查询） */
  --blur-s: 10px;
  --blur-m: 18px;
  --blur-l: 30px;

  /* 柔光阴影 */
  --sd-1: 0 2px 8px rgba(31, 74, 140, .06);
  --sd-2: 0 8px 24px rgba(31, 74, 140, .10), 0 2px 6px rgba(31, 74, 140, .05);
  --sd-3: 0 18px 48px rgba(31, 74, 140, .16), 0 4px 12px rgba(31, 74, 140, .07);
  --sd-glow: 0 8px 24px rgba(47, 124, 246, .28);
  --sd-vip: 0 8px 26px rgba(168, 107, 255, .28);

  /* 文本 */
  --t-1: #12263f;
  --t-2: #4a6076;
  --t-3: #8296ab;
  --t-4: #a9bacb;
  --t-inv: #ffffff;

  /* 圆角 */
  --r-xs: 8px;
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 22px;
  --r-xl: 28px;
  --r-full: 999px;

  /* 动效曲线 */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-inout: cubic-bezier(.65, .05, .36, 1);
  --dur-f: .18s;
  --dur-m: .32s;
  --dur-s: .55s;

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
}

/* 玻璃模糊强度随窗口动态变化 */
@media (max-width: 900px) {
  :root { --blur-s: 8px; --blur-m: 14px; --blur-l: 22px; }
}
@media (min-width: 1600px) {
  :root { --blur-s: 12px; --blur-m: 22px; --blur-l: 38px; }
}

/* ---------- 2. Reset ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--t-1);
  font-size: 14px;
  line-height: 1.55;
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { border: none; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; }
p { margin: 0; }

/* 惯性平滑滚动 + 细玻璃滚动条 */
.scroll-y {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.scroll-y::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-y::-webkit-scrollbar-thumb {
  background: rgba(47, 124, 246, .22);
  border-radius: 99px;
}
.scroll-y::-webkit-scrollbar-thumb:hover { background: rgba(47, 124, 246, .38); }
.scroll-y::-webkit-scrollbar-track { background: transparent; }

/* ---------- 3. 动态背景（视差玻璃光斑） ---------- */
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 8% 4%, var(--bg-1) 0%, transparent 60%),
    radial-gradient(900px 620px at 96% 12%, var(--bg-4) 0%, transparent 58%),
    radial-gradient(1000px 700px at 50% 110%, var(--bg-3) 0%, transparent 62%),
    var(--bg-2);
}
.aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  animation: floatBlob 18s var(--ease-inout) infinite;
}
.aurora i:nth-child(1) { width: 420px; height: 420px; left: -80px; top: -60px; background: rgba(70, 209, 236, .55); }
.aurora i:nth-child(2) { width: 380px; height: 380px; right: -60px; top: 12%; background: rgba(168, 107, 255, .38); animation-delay: -4s; }
.aurora i:nth-child(3) { width: 460px; height: 460px; left: 26%; bottom: -160px; background: rgba(47, 124, 246, .34); animation-delay: -9s; }
.aurora i:nth-child(4) { width: 300px; height: 300px; right: 18%; bottom: -80px; background: rgba(255, 215, 106, .30); animation-delay: -13s; }

@keyframes floatBlob {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(38px, -30px, 0) scale(1.1); }
  66% { transform: translate3d(-26px, 26px, 0) scale(.94); }
}

/* ---------- 4. 玻璃基元 ---------- */
.glass {
  background: var(--glass-2);
  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-2);
  border-radius: var(--r-l);
}
.glass-1 { background: var(--glass-1); }
.glass-3 { background: var(--glass-3); }
.glass-4 { background: var(--glass-4); }
.glass-thin { backdrop-filter: blur(var(--blur-s)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur-s)) saturate(160%); }
.glass-thick { backdrop-filter: blur(var(--blur-l)) saturate(200%); -webkit-backdrop-filter: blur(var(--blur-l)) saturate(200%); }

/* 顶部高光描边 */
.glass-hl { position: relative; overflow: hidden; }
.glass-hl::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
  pointer-events: none;
}

/* 卡片交互：hover 按压缩放 + 柔光 */
.hoverable { transition: transform var(--dur-m) var(--ease-out), box-shadow var(--dur-m) var(--ease-out), background var(--dur-m); }
.hoverable:hover { transform: translateY(-2px); box-shadow: var(--sd-3); background: var(--glass-3); }
.hoverable:active { transform: scale(.985); }

/* 柔光扫过 */
.shine { position: relative; overflow: hidden; }
.shine::after {
  content: "";
  position: absolute;
  top: -60%; left: -120%;
  width: 60%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: rotate(12deg);
  transition: left .7s var(--ease-out);
  pointer-events: none;
}
.shine:hover::after { left: 130%; }

/* ---------- 5. 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 18px;
  border-radius: var(--r-full);
  font-size: 13.5px; font-weight: 600;
  color: var(--t-2);
  background: var(--glass-3);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(var(--blur-s));
  -webkit-backdrop-filter: blur(var(--blur-s));
  box-shadow: var(--sd-1);
  transition: all var(--dur-f) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sd-2); color: var(--c-blue); }
.btn:active { transform: scale(.95); }
.btn-primary {
  background: var(--grad-primary);
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
  box-shadow: var(--sd-glow);
}
.btn-primary:hover { color: #fff; box-shadow: 0 12px 30px rgba(47, 124, 246, .38); }
.btn-vip {
  background: var(--grad-vip);
  color: #4a2b00;
  border-color: rgba(255, 255, 255, .6);
  box-shadow: var(--sd-vip);
}
.btn-vip:hover { color: #4a2b00; }
.btn-danger { background: linear-gradient(135deg, #ff8a8a, #f4525f); color: #fff; box-shadow: 0 8px 22px rgba(244, 82, 95, .3); }
.btn-danger:hover { color: #fff; }
.btn-ghost { background: transparent; border-color: var(--glass-line); box-shadow: none; }
.btn-sm { height: 30px; padding: 0 13px; font-size: 12.5px; }
.btn-xs { height: 26px; padding: 0 10px; font-size: 12px; border-radius: var(--r-s); }
.btn-lg { height: 46px; padding: 0 26px; font-size: 15px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

/* ---------- 6. 表单 ---------- */
.field {
  width: 100%; height: 40px; padding: 0 14px;
  border-radius: var(--r-s);
  background: var(--glass-3);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(var(--blur-s));
  -webkit-backdrop-filter: blur(var(--blur-s));
  outline: none;
  transition: all var(--dur-f) var(--ease-out);
  color: var(--t-1);
}
.field::placeholder { color: var(--t-4); }
.field:focus {
  border-color: rgba(47, 124, 246, .6);
  box-shadow: 0 0 0 3px rgba(47, 124, 246, .12);
  background: var(--glass-4);
}
textarea.field { height: auto; padding: 10px 14px; resize: vertical; line-height: 1.6; }
select.field { cursor: pointer; }

/* 开关 */
.switch {
  position: relative; display: inline-block;
  width: 46px; height: 26px; border-radius: 99px;
  background: rgba(130, 150, 171, .3);
  transition: background var(--dur-m) var(--ease-out);
  cursor: pointer; flex: none;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--sd-1);
  transition: transform var(--dur-m) var(--ease-spring);
}
.switch.on { background: var(--grad-primary); }
.switch.on::after { transform: translateX(20px); }

/* ---------- 7. 标签 / 徽标 ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 21px; padding: 0 8px;
  border-radius: var(--r-xs);
  font-size: 11.5px; font-weight: 600;
  background: var(--grad-primary-soft);
  color: var(--c-blue);
  border: 1px solid rgba(47, 124, 246, .18);
}
.tag-vip { background: var(--grad-vip); color: #4a2b00; border-color: rgba(255, 215, 106, .5); box-shadow: 0 2px 8px rgba(168, 107, 255, .22); }
.tag-success { background: rgba(31, 191, 122, .14); color: #128f5c; border-color: rgba(31, 191, 122, .22); }
.tag-warn { background: rgba(240, 160, 32, .14); color: #b57608; border-color: rgba(240, 160, 32, .24); }
.tag-danger { background: rgba(244, 82, 95, .13); color: #d13543; border-color: rgba(244, 82, 95, .22); }
.tag-gray { background: rgba(130, 150, 171, .14); color: var(--t-3); border-color: rgba(130, 150, 171, .18); }

/* VIP 等级光环徽标 */
.vip-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; min-width: 34px; padding: 0 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px;
  color: #4a2b00; border-radius: 5px;
  background: var(--grad-vip);
  box-shadow: 0 2px 8px rgba(168, 107, 255, .35);
  position: relative; overflow: hidden;
}
.vip-badge::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: badgeSweep 2.8s var(--ease-inout) infinite;
}
@keyframes badgeSweep { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.vip-badge.lv8 { box-shadow: 0 0 0 1px rgba(255, 215, 106, .8), 0 4px 14px rgba(255, 160, 60, .55); }

/* 未读红点 */
.dot {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 99px;
  background: linear-gradient(135deg, #ff7a7a, #f4525f);
  color: #fff; font-size: 11px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(244, 82, 95, .45);
  animation: dotPulse 1.8s var(--ease-inout) infinite;
}
.dot-mini { width: 9px; height: 9px; min-width: 0; padding: 0; }
@keyframes dotPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(244, 82, 95, .45); }
  50% { transform: scale(1.12); box-shadow: 0 3px 14px rgba(244, 82, 95, .65); }
}

/* 在线状态点（群成员列表 / 群聊 header） */
.av-wrap { position: relative; flex: none; }
.online-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #c4c9d4; box-shadow: 0 0 0 2px #fff; transition: background .2s, box-shadow .2s; }
.online-dot.on { background: #2ecc71; box-shadow: 0 0 0 2px #fff, 0 0 6px rgba(46,204,113,.65); }

/* 头像 */
.avatar {
  width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 15px; flex: none;
  box-shadow: var(--sd-1), inset 0 0 0 1px rgba(255, 255, 255, .35);
  background: var(--grad-primary);
  object-fit: cover; overflow: hidden;
  position: relative;
}
.avatar.rounded { border-radius: 50%; }
.avatar.sm { width: 34px; height: 34px; border-radius: 11px; font-size: 13px; }
.avatar.lg { width: 62px; height: 62px; border-radius: 20px; font-size: 21px; }
.avatar.xl { width: 82px; height: 82px; border-radius: 26px; font-size: 28px; }
.avatar.online::after {
  content: ""; position: absolute; right: -2px; bottom: -2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-success); border: 2px solid #fff;
}

/* ---------- 8. 全局动效关键帧 ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.88) translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes blurIn { from { opacity: 0; filter: blur(14px); transform: scale(1.04); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes shake {
  10%, 90% { transform: translate3d(-2px, 0, 0) rotate(-.4deg); }
  20%, 80% { transform: translate3d(4px, 0, 0) rotate(.6deg); }
  30%, 50%, 70% { transform: translate3d(-7px, 0, 0) rotate(-.8deg); }
  40%, 60% { transform: translate3d(7px, 0, 0) rotate(.8deg); }
}
/* 群惩罚专用：幅度更大（±16px）+ 斜角抖动 + 轻微缩放，震慑感更强 */
@keyframes punishShake {
  0%   { transform: translate3d(0,0,0) rotate(0) scale(1); }
  10%  { transform: translate3d(-16px, -6px, 0) rotate(-2.2deg) scale(1.015); }
  20%  { transform: translate3d(15px, 5px, 0) rotate(2deg) scale(.99); }
  30%  { transform: translate3d(-14px, 7px, 0) rotate(-1.8deg) scale(1.012); }
  40%  { transform: translate3d(16px, -5px, 0) rotate(2.4deg) scale(1); }
  50%  { transform: translate3d(-15px, -7px, 0) rotate(-2deg) scale(1.015); }
  60%  { transform: translate3d(14px, 6px, 0) rotate(1.8deg) scale(.99); }
  70%  { transform: translate3d(-16px, 4px, 0) rotate(-2.4deg) scale(1.012); }
  80%  { transform: translate3d(15px, -6px, 0) rotate(2deg) scale(1); }
  90%  { transform: translate3d(-13px, 5px, 0) rotate(-1.6deg) scale(1.01); }
  100% { transform: translate3d(0,0,0) rotate(0) scale(1); }
}
@keyframes punishEdge {
  0%, 100% { border-color: rgba(255,45,45,.9); box-shadow: inset 0 0 24px 4px rgba(255,35,35,.45); }
  50%      { border-color: rgba(255,120,120,.35); box-shadow: inset 0 0 40px 10px rgba(255,40,40,.75); }
}
/* 屏幕惩罚：持续晃动 + 报警（整段时长反复） */
.screen.shaking { animation: shake .82s var(--ease-inout) 2; }
/* 群惩罚：大振幅晃动 + 红色脉冲边框 + 报警底纹（视觉震慑更强） */
.screen.shaking-persistent {
  animation: punishShake .42s cubic-bezier(.36,.07,.19,.97) infinite;
  box-shadow: inset 0 0 0 4px rgba(255,45,45,.85), inset 0 0 60px 8px rgba(255,30,30,.40);
}
.screen.shaking-persistent::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 60;
  border: 6px solid transparent;
  box-shadow: inset 0 0 28px 6px rgba(255,40,40,.55);
  animation: punishEdge 1.1s ease-in-out infinite;
}
/* 屏幕惩罚中头像：四字动态标签（红色脉冲+轻微晃动） */
.sp-badge {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  background: linear-gradient(135deg,#ff3b3b,#ff8a5b); color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: 1px; padding: 1px 6px; border-radius: 7px;
  box-shadow: 0 0 8px rgba(255,59,59,.7);
  animation: spBadgePulse 1.2s var(--ease-inout) infinite;
  pointer-events: none; white-space: nowrap;
  z-index: 2;
}
@keyframes spBadgePulse {
  0%, 100% { transform: translateX(-50%) scale(1) rotate(-2deg); box-shadow: 0 0 6px rgba(255,59,59,.55); }
  50%      { transform: translateX(-50%) scale(1.12) rotate(2deg);  box-shadow: 0 0 14px rgba(255,80,80,.95); }
}
@keyframes spBannerPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,59,59,.35); }
  50%      { box-shadow: 0 0 22px rgba(255,80,80,.8); }
}
@media (prefers-reduced-motion: reduce) {
  .screen.shaking-persistent { animation: punishShake 1.6s linear infinite; }
  .screen.shaking-persistent::after { animation: none; }
  .sp-badge { animation: none; }
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  22% { opacity: .28; }
  44% { opacity: 1; }
  62% { opacity: .35; }
  80% { opacity: .9; }
}
@keyframes punishPop {
  0% { transform: scale(.4) rotate(-6deg); opacity: 0; }
  60% { transform: scale(1.18) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes burnAway {
  0% { opacity: 1; filter: blur(0) brightness(1); transform: scale(1); }
  20% { opacity: 1; filter: blur(0) brightness(1.3) sepia(.3); transform: scale(1.04); }
  45% { opacity: .85; filter: blur(2px) brightness(1.5) sepia(.6); transform: scale(1.03); }
  100% { opacity: 0; filter: blur(16px) brightness(2.2) sepia(1); transform: scale(.82) translateY(-14px); }
}
/* 火焰粒子从气泡底部喷出 */
@keyframes sparksUp {
  0%   { transform: translate(-50%, 0) scale(.5); opacity: 0; }
  15%  { opacity: 1; }
  60%  { opacity: .8; }
  100% { transform: translate(-50%, -70px) scale(1.4); opacity: 0; }
}
/* 灰烬颗粒向上飘散 */
@keyframes ashesUp {
  0%   { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
  25%  { opacity: .9; }
  100% { transform: translate(-50%, -90px) scale(1.6); opacity: 0; }
}
/* 最后 3 秒抖动预警 */
@keyframes shakeWarn {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px) rotate(-.6deg); }
  40% { transform: translateX(2px) rotate(.6deg); }
  60% { transform: translateX(-1.5px); }
  80% { transform: translateX(1.5px); }
}
/* 倒计时紧急态红色脉冲 */
@keyframes urgentPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 26px rgba(255,40,40,.65), inset 0 0 16px rgba(255,80,80,.35); }
  50% { transform: scale(1.12); box-shadow: 0 0 34px rgba(255,40,40,.9), inset 0 0 22px rgba(255,80,80,.55); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-14deg); }
  30% { transform: rotate(12deg); }
  45% { transform: rotate(-9deg); }
  60% { transform: rotate(7deg); }
  75% { transform: rotate(-4deg); }
}
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes wavePulse { 0% { transform: scale(.85); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes shimmerBg { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes countUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.anim-fade-up { animation: fadeUp var(--dur-s) var(--ease-out) both; }
.anim-pop { animation: popIn var(--dur-m) var(--ease-spring) both; }
.anim-blur-in { animation: blurIn var(--dur-s) var(--ease-out) both; }
.anim-shake { animation: shake .82s var(--ease-inout); }
.anim-flicker { animation: flicker 1.1s linear infinite; }
.anim-spin { animation: spin 1s linear infinite; }
.anim-ring { animation: ring 1.4s var(--ease-inout) infinite; transform-origin: 50% 12%; }

/* 逐项入场延迟 */
.stagger > * { animation: fadeUp .5s var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .06s; }
.stagger > *:nth-child(3) { animation-delay: .1s; }
.stagger > *:nth-child(4) { animation-delay: .14s; }
.stagger > *:nth-child(5) { animation-delay: .18s; }
.stagger > *:nth-child(6) { animation-delay: .22s; }
.stagger > *:nth-child(7) { animation-delay: .26s; }
.stagger > *:nth-child(8) { animation-delay: .3s; }
.stagger > *:nth-child(9) { animation-delay: .34s; }
.stagger > *:nth-child(n+10) { animation-delay: .38s; }

/* 骨架 / 加载 */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.35) 25%, rgba(255,255,255,.75) 50%, rgba(255,255,255,.35) 75%);
  background-size: 200% 100%;
  animation: shimmerBg 1.4s linear infinite;
  border-radius: var(--r-s);
}
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(47, 124, 246, .22);
  border-top-color: var(--c-blue);
  animation: spin .8s linear infinite;
  display: inline-block;
}

/* ---------- 9. 弹层：遮罩 / 弹窗 / Toast ---------- */
.mask {
  position: absolute; inset: 0; z-index: 60;
  background: rgba(18, 38, 63, .28);
  backdrop-filter: blur(var(--blur-m));
  -webkit-backdrop-filter: blur(var(--blur-m));
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn var(--dur-m) var(--ease-out) both;
  padding: 22px;
}
.mask.bottom { align-items: flex-end; padding: 0; }
.modal {
  width: 100%; max-width: 340px;
  background: var(--glass-4);
  backdrop-filter: blur(var(--blur-l)) saturate(200%);
  -webkit-backdrop-filter: blur(var(--blur-l)) saturate(200%);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-xl);
  box-shadow: var(--sd-3);
  padding: 22px 20px 18px;
  animation: popIn var(--dur-m) var(--ease-spring) both;
}
.sheet {
  width: 100%;
  background: var(--glass-4);
  backdrop-filter: blur(var(--blur-l)) saturate(200%);
  -webkit-backdrop-filter: blur(var(--blur-l)) saturate(200%);
  border-top: 1px solid var(--glass-brd);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -14px 40px rgba(31, 74, 140, .18);
  padding: 8px 0 22px;                 /* 加大下 padding，留出 Home Indicator 空间 */
  animation: slideUp var(--dur-m) var(--ease-out) both;
  max-height: 92vh;                    /* 提升高度阈值，减少裁切 */
  display: flex; flex-direction: column;
  overflow-y: auto;                    /* 关键：内容超出时可滚动，不再被截断 */
  -webkit-overflow-scrolling: touch;   /* iOS 弹性滚动 */
  overscroll-behavior: contain;        /* 防止滚到遮罩外 */
}
.sheet-handle {
  width: 38px; height: 4px; border-radius: 99px;
  background: rgba(130, 150, 171, .35);
  margin: 6px auto 10px;
}
.modal-title { font-size: 16px; font-weight: 700; text-align: center; margin-bottom: 4px; }
.modal-desc { font-size: 13px; color: var(--t-3); text-align: center; line-height: 1.6; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions .btn { flex: 1; }

.toast-layer {
  position: absolute; left: 50%; top: 84px; z-index: 200;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none;
}
.toast {
  padding: 10px 20px; border-radius: var(--r-full);
  background: rgba(18, 38, 63, .78);
  backdrop-filter: blur(var(--blur-m));
  -webkit-backdrop-filter: blur(var(--blur-m));
  color: #fff; font-size: 14px; font-weight: 600;
  line-height: 1.5;
  box-shadow: var(--sd-3);
  animation: popIn .3s var(--ease-spring) both;
  max-width: 88vw; text-align: center;
  pointer-events: auto;
  word-break: break-word;
}
.toast.out { animation: fadeIn .28s var(--ease-out) reverse both; }
.toast.ok { background: linear-gradient(135deg, rgba(31,191,122,.92), rgba(16,150,95,.92)); }
.toast.err { background: linear-gradient(135deg, rgba(244,82,95,.92), rgba(200,45,60,.92)); }
.toast [data-jump-log],
.toast a.link,
.toast .link { color: #fff; text-decoration: underline; text-underline-offset: 2px; opacity: .95; cursor: pointer; }
.toast [data-jump-log]:hover,
.toast a.link:hover,
.toast .link:hover { opacity: 1; }

/* ---------- 10. 工具类 ---------- */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.center { align-items: center; justify-content: center; }
.gap4 { gap: 4px; } .gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap10 { gap: 10px; }
.gap12 { gap: 12px; } .gap16 { gap: 16px; } .gap20 { gap: 20px; }
.flex1 { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t1 { color: var(--t-1); } .t2 { color: var(--t-2); } .t3 { color: var(--t-3); } .t4 { color: var(--t-4); }
.fw6 { font-weight: 600; } .fw7 { font-weight: 700; }
.f11 { font-size: 11px; } .f12 { font-size: 12px; } .f13 { font-size: 13px; }
.f15 { font-size: 15px; } .f16 { font-size: 16px; } .f18 { font-size: 18px; } .f22 { font-size: 22px; }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; }
.grad-text {
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.grad-text-vip {
  background: var(--grad-vip);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hide { display: none !important; }
.icon { width: 20px; height: 20px; flex: none; }
.icon-s { width: 16px; height: 16px; }
.icon-l { width: 26px; height: 26px; }
.icon-xs { width: 12px; height: 12px; }
.divider { height: 1px; background: var(--glass-line); margin: 10px 0; }