/* ============================================================
   班级圈 ClassCircle · 设计系统 v2
   「温暖高级感」 — 奶油暖底 + 珊瑚琥珀主色 + 深暖墨色
   8pt 网格 · 双层阴影 · 克制而有力量的动效
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root {
  /* 主色板（珊瑚 → 琥珀，更浓郁、更高级） */
  --primary: #FF6A2B;
  --primary-deep: #F04E0F;
  --primary-soft: #FFE7D6;
  --amber: #FFA53D;
  --amber-soft: #FFF0DC;

  /* 支持色（调低饱和度，统一暖调，更耐看） */
  --mint: #3FB99B;
  --mint-deep: #1F9C80;
  --mint-soft: #DFF4EC;
  --sky: #4FB3D9;
  --sky-soft: #E1F2F9;
  --violet: #9B7FD4;
  --violet-soft: #EEE8FA;
  --rose: #F5699B;
  --rose-soft: #FFE4EE;

  /* 中性色（深暖墨色，替代纯黑） */
  --bg: #FFF6EC;
  --bg-2: #FFF0E0;
  --card: #FFFFFF;
  --ink: #2B2633;
  --ink-2: #5B5566;
  --ink-3: #9A93A3;
  --ink-4: #C6BFCB;
  --line: rgba(242, 120, 60, 0.10);
  --line-strong: rgba(242, 120, 60, 0.18);

  /* 圆角 */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 34px;
  --r-full: 999px;

  /* 阴影（三层深度，暖色投影） */
  --shadow-xs: 0 1px 2px rgba(242, 108, 40, 0.06);
  --shadow-sm: 0 2px 8px rgba(242, 108, 40, 0.06), 0 1px 2px rgba(43, 38, 51, 0.04);
  --shadow-md: 0 10px 28px rgba(242, 108, 40, 0.12), 0 2px 8px rgba(43, 38, 51, 0.05);
  --shadow-lg: 0 24px 60px rgba(240, 78, 15, 0.20), 0 6px 18px rgba(43, 38, 51, 0.08);
  --shadow-hero: 0 18px 44px rgba(240, 78, 15, 0.30), 0 4px 12px rgba(43, 38, 51, 0.10);

  /* 动效（自然减速曲线，克制而自信） */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-fast: 0.16s;
  --dur-mid: 0.28s;
  --dur-slow: 0.5s;

  /* 尺寸 */
  --tabbar-h: 66px;
  --header-h: 54px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --app-max: 560px;
}

/* ---------- 暗色模式 ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #FF8A4D;
    --primary-deep: #FF7A33;
    --primary-soft: #3A2820;
    --amber: #FFB85D;
    --amber-soft: #3A2E1E;
    --mint: #4FCFB0;
    --mint-deep: #2DB89A;
    --mint-soft: #1E3A32;
    --sky: #5FC3E9;
    --sky-soft: #1E3240;
    --violet: #AB8FDD;
    --violet-soft: #2E2840;
    --rose: #F67BAB;
    --rose-soft: #3A1E2A;
    --bg: #1A1620;
    --bg-2: #221E2C;
    --card: #2D2838;
    --ink: #F0EBE0;
    --ink-2: #B8B0C0;
    --ink-3: #807890;
    --ink-4: #5A5468;
    --line: rgba(255, 138, 77, 0.08);
    --line-strong: rgba(255, 138, 77, 0.15);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.12);
    --shadow-hero: 0 18px 44px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}
:root[data-theme="dark"] {
  --primary: #FF8A4D;
  --primary-deep: #FF7A33;
  --primary-soft: #3A2820;
  --amber: #FFB85D;
  --amber-soft: #3A2E1E;
  --mint: #4FCFB0;
  --mint-deep: #2DB89A;
  --mint-soft: #1E3A32;
  --sky: #5FC3E9;
  --sky-soft: #1E3240;
  --violet: #AB8FDD;
  --violet-soft: #2E2840;
  --rose: #F67BAB;
  --rose-soft: #3A1E2A;
  --bg: #1A1620;
  --bg-2: #221E2C;
  --card: #2D2838;
  --ink: #F0EBE0;
  --ink-2: #B8B0C0;
  --ink-3: #807890;
  --ink-4: #5A5468;
  --line: rgba(255, 138, 77, 0.08);
  --line-strong: rgba(255, 138, 77, 0.15);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.12);
  --shadow-hero: 0 18px 44px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.1);
}
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(900px 520px at 18% -8%, #2A2238 0%, transparent 55%),
    radial-gradient(760px 500px at 88% 6%, #2A2030 0%, transparent 52%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 46%, #151218 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  max-width: var(--app-max);
  margin: 0 auto;
  position: relative;
}

/* ============================================================
   桌面画布：居中限宽 + 柔和氛围光
   ============================================================ */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 520px at 18% -8%, #FFE4C8 0%, transparent 55%),
    radial-gradient(760px 500px at 88% 6%, #FFD9B8 0%, transparent 52%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 46%, #FDF4EC 100%);
  transition: opacity .4s;
}

/* 桌面端氛围光 + 极淡噪点光斑 */
@media (min-width: 640px) {
  body::before {
    background:
      radial-gradient(1200px 700px at 24% -10%, #FFE3C4 0%, transparent 55%),
      radial-gradient(1000px 600px at 84% 4%, #FFD5AE 0%, transparent 52%),
      linear-gradient(180deg, #FFF3E4 0%, #FFF7EE 50%, #FBF1E8 100%);
  }
  body::after {
    content: "";
    position: fixed; inset: 0; z-index: -1;
    background:
      radial-gradient(300px 300px at 20% 80%, rgba(255,165,61,.10), transparent 60%),
      radial-gradient(260px 260px at 85% 70%, rgba(63,185,155,.08), transparent 60%);
    pointer-events: none;
  }
  #app {
    border-left: 1px solid rgba(255,255,255,.6);
    border-right: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 0 80px rgba(242,108,40,.08), 0 0 0 1px rgba(242,120,60,.05);
  }
}

/* ============================================================
   启动屏
   ============================================================ */
.splash {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #FFF3E4, #FFF8F0);
  transition: opacity .5s var(--ease-out-quint), visibility .5s;
}
.splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-logo { animation: splashPop .9s var(--ease-out-expo) both; }
.splash-logo svg { width: 96px; height: 96px; filter: drop-shadow(0 14px 26px rgba(240,78,15,.30)); }
.splash-brand {
  margin-top: 18px; text-align: center;
  font-size: 19px; font-weight: 800; letter-spacing: 6px; text-indent: 6px;
  background: linear-gradient(135deg, var(--primary-deep), var(--amber));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: splashFade .9s .25s var(--ease-out-quint) both;
}
.splash-sub {
  margin-top: 8px; font-size: 12px; color: var(--ink-3); letter-spacing: 2px;
  animation: splashFade .9s .4s var(--ease-out-quint) both;
}
@keyframes splashPop {
  0% { transform: scale(.7); opacity: 0; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes splashFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================
   顶部状态栏
   ============================================================ */
.app-header {
  height: var(--header-h);
  padding: 0 10px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255, 247, 238, 0.72);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  transition: height .28s var(--ease-out-quint), background .28s, box-shadow .28s;
}
.app-header.scrolled {
  height: 48px;
  background: rgba(255, 247, 238, 0.86);
  box-shadow: 0 6px 20px rgba(242,108,40,.06);
}
.app-title {
  font-size: 17px; font-weight: 800; letter-spacing: 2px;
  background: linear-gradient(135deg, var(--primary-deep), var(--amber));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  transition: font-size .28s var(--ease-out-quint);
}
.app-header.scrolled .app-title { font-size: 16px; }
.header-actions { display: flex; gap: 4px; align-items: center; }
.icon-btn {
  width: 38px; height: 38px; border: none; background: transparent;
  border-radius: var(--r-full); display: grid; place-items: center;
  color: var(--ink-2); cursor: pointer; position: relative; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, transform .18s var(--ease-spring), color .2s;
}
.icon-btn:hover { background: var(--primary-soft); color: var(--primary-deep); }
.icon-btn:active { background: var(--primary-soft); transform: scale(.86); color: var(--primary-deep); }
.icon-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.65), transparent 62%);
  opacity: 0; transition: opacity .25s;
}
.icon-btn:hover::after { opacity: 1; }
.icon-btn svg {
  width: 22px; height: 22px; position: relative; z-index: 1;
  filter: drop-shadow(0 1px 1px rgba(43,38,51,.06));
  transition: transform .28s var(--ease-spring);
}
.icon-btn:active svg { transform: scale(.8); }
/* 返回箭头：按下微滑动 */
#header-back:active svg { transform: translateX(-2px) scale(.8); }

/* ============================================================
   视图容器与切换动画
   ============================================================ */
.view {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
}
.view-enter { animation: viewIn .5s var(--ease-out-quint) both; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* 滚动显现：仅在 JS 接管（[data-rv]）后隐藏，避免无脚本时内容不可见 */
[data-rv] .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s var(--ease-out-expo), transform .55s var(--ease-out-expo);
}
[data-rv] .reveal.in { opacity: 1; transform: none; }
.page-pad { padding: 18px 18px calc(var(--tabbar-h) + 20px + var(--safe-b)); }

/* 下拉刷新指示 */
.pull-hint {
  display: flex; align-items: center; justify-content: center;
  height: 0; overflow: hidden; color: var(--ink-2); font-size: 12px;
  transition: height .32s var(--ease-out-quint);
  gap: 6px;
}
.pull-hint.show { height: 46px; }
.pull-hint .spin { display: inline-block; animation: spin 1s linear infinite; font-size: 15px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 骨架屏 */
.skeleton {
  position: relative; overflow: hidden; background: #F4EDE4;
  border-radius: var(--r-sm);
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.85) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shimmer 1.3s infinite;
  animation-delay: var(--sk-delay, 0s);
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton-card .sk-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.skeleton-card .sk-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ============================================================
   通用组件
   ============================================================ */
.card {
  background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(255,255,255,.7);
  position: relative;
}

/* 按钮：渐变 + 微光扫过 + 按压下沉 */
.btn {
  border: none; cursor: pointer; font-family: inherit;
  transition: transform .18s var(--ease-spring), box-shadow .28s var(--ease-out-quint), opacity .2s, filter .2s;
  position: relative; overflow: hidden; user-select: none;
}
.btn:active { transform: scale(.94); }
.btn-primary {
  border: none; cursor: pointer; font-family: inherit; user-select: none;
  background: linear-gradient(135deg, var(--primary) 0%, var(--amber) 100%);
  color: #fff; font-size: 15px; font-weight: 700;
  padding: 13px 28px; border-radius: var(--r-full);
  box-shadow: var(--shadow-md);
  letter-spacing: 2px; position: relative; overflow: hidden;
  transition: transform .18s var(--ease-spring), box-shadow .28s var(--ease-out-quint), opacity .2s;
}
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .5s var(--ease-out-quint);
}
.btn-primary:active::after { left: 130%; }
.btn-primary:active { transform: scale(.95); box-shadow: 0 4px 14px rgba(240,78,15,.30); }
.btn-primary:disabled { opacity: .5; }
.btn-block { display: block; width: 100%; }
.btn-ghost {
  border: 1.5px solid var(--primary); background: #fff; color: var(--primary-deep);
  font-size: 14px; font-weight: 700; padding: 10px 22px; border-radius: var(--r-full);
  cursor: pointer; transition: all .2s var(--ease-out-quint); font-family: inherit;
}
.btn-ghost:active { background: var(--primary-soft); transform: scale(.95); }

/* Toast 容器 + 多类型提示 */
.toast-container {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 34px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column-reverse;
  gap: 8px; align-items: center; pointer-events: none;
  max-width: 84%;
}
.toast-item {
  display: flex; align-items: center; gap: 10px;
  background: rgba(43, 38, 51, 0.92); color: #fff;
  padding: 11px 18px; border-radius: var(--r-full);
  font-size: 14px; font-weight: 500;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(43,38,51,.28);
  opacity: 0; transform: translateY(14px) scale(.95);
  pointer-events: auto;
  transition: opacity .3s var(--ease-out-quint), transform .34s var(--ease-out-expo);
  touch-action: pan-y; will-change: transform, opacity;
}
.toast-item.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  flex-shrink: 0; color: #fff;
}
.toast-success .toast-icon { background: var(--mint); }
.toast-error .toast-icon { background: var(--rose); }
.toast-warning .toast-icon { background: var(--amber); }
.toast-info .toast-icon { background: var(--sky); }
.toast-msg { flex: 1; line-height: 1.4; }
.toast-action {
  background: none; border: none; color: var(--amber);
  font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: inherit; padding: 0 4px; white-space: nowrap;
}
.toast-action:active { opacity: .6; }

/* 弹窗 */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; }
[hidden] { display: none !important; }
.modal-mask {
  position: absolute; inset: 0; background: rgba(43,38,51,.48);
  backdrop-filter: blur(6px);
  animation: fadeIn .3s both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 确认弹窗 */
.confirm-dialog {
  position: relative; z-index: 1;
  background: var(--card); border-radius: var(--r-xl);
  padding: 28px 24px 20px; width: 300px; max-width: 88vw;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: confirmPop .4s var(--ease-spring) both;
}
#confirm-modal.show .confirm-dialog { animation: confirmPop .4s var(--ease-spring) both; }
@keyframes confirmPop {
  from { transform: scale(.85) translateY(10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.confirm-icon {
  font-size: 40px; margin: 0 auto 12px;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
}
.confirm-text {
  font-size: 16px; color: var(--ink); line-height: 1.6;
  margin-bottom: 20px; font-weight: 500;
}
.confirm-actions {
  display: flex; gap: 12px; justify-content: center;
}
.confirm-actions button { flex: 1; }

/* 成就弹窗：彩色碎片 */
.ach-pop {
  position: relative; background: #fff; width: 320px; border-radius: var(--r-2xl);
  padding: 36px 26px 26px; text-align: center;
  animation: popIn .55s var(--ease-spring) both;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ach-pop::before {
  content: ""; position: absolute; inset: -40% -30% auto;
  height: 70%; background: radial-gradient(closest-side, rgba(255,165,61,.22), transparent 70%);
  pointer-events: none;
}
@keyframes popIn {
  0% { transform: scale(.6) translateY(20px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.ach-burst { position: relative; width: 104px; height: 104px; margin: 0 auto 14px; }
.ach-icon {
  width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  font-size: 48px;
  background: radial-gradient(circle at 32% 28%, #FFF4E0, var(--primary-soft));
  border: 4px solid #fff; box-shadow: var(--shadow-md);
  animation: bob 2.4s ease-in-out infinite;
  position: relative; z-index: 1;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.spark { position: absolute; font-size: 20px; color: var(--amber); animation: sparkle 1.4s ease-out infinite; z-index: 0; }
.s1 { top: -8px; left: 16px; animation-delay: 0s; }
.s2 { top: 6px; right: -6px; animation-delay: .18s; }
.s3 { bottom: 4px; left: -10px; animation-delay: .36s; }
.s4 { top: 38px; right: -16px; animation-delay: .1s; color: var(--mint); }
.s5 { bottom: -10px; right: 18px; animation-delay: .28s; color: var(--sky); }
.s6 { top: -12px; right: 34px; animation-delay: .44s; color: var(--rose); }
@keyframes sparkle {
  0% { transform: scale(0) rotate(0); opacity: 0; }
  50% { transform: scale(1.25) rotate(100deg); opacity: 1; }
  100% { transform: scale(0) rotate(200deg); opacity: 0; }
}
.ach-title { font-size: 11px; color: var(--ink-3); letter-spacing: 4px; }
.ach-name { font-size: 21px; font-weight: 800; margin: 6px 0; color: var(--primary-deep); }
.ach-desc { font-size: 13px; color: var(--ink-2); margin-bottom: 22px; line-height: 1.6; }
.ach-pop .btn-primary { padding: 12px 40px; }

/* 发布弹层 */
.sheet { position: fixed; inset: 0; z-index: 110; }
.sheet-mask { position: absolute; inset: 0; background: rgba(43,38,51,.42); animation: fadeIn .3s both; }
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-width: var(--app-max); margin: 0 auto;
  background: #fff; border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding: 12px 22px calc(22px + var(--safe-b));
  animation: sheetUp .45s var(--ease-spring) both;
  box-shadow: 0 -16px 50px rgba(43,38,51,.18);
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet-handle { width: 44px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 0 auto 14px; }
.sheet-title { text-align: center; font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.publish-input {
  width: 100%; height: 120px; border: none; resize: none; outline: none;
  font-size: 15px; font-family: inherit; line-height: 1.75; color: var(--ink);
  background: var(--bg); border-radius: var(--r-md); padding: 14px 16px;
}
.publish-input:focus { background: #FFF3E8; }
.publish-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.publish-preview img {
  width: 66px; height: 66px; object-fit: cover; border-radius: var(--r-sm);
  border: 1px solid var(--line); animation: popIn .3s var(--ease-spring) both;
}
.publish-toolbar {
  display: flex; align-items: center; gap: 16px; margin: 14px 0;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.tool-btn { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; padding: 6px 10px; border-radius: var(--r-full); transition: background .2s; }
.tool-btn:active { background: var(--mint-soft); }
.tool-btn svg { width: 20px; height: 20px; color: var(--mint-deep); }
.publish-count { margin-left: auto; font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

/* ============================================================
   底部导航 · 悬浮胶囊 Dock
   ============================================================ */
.tabbar {
  position: absolute; left: 14px; right: 14px; bottom: calc(12px + var(--safe-b));
  height: calc(var(--tabbar-h) - 14px);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: var(--r-2xl);
  box-shadow: 0 14px 40px rgba(242,108,40,.16), 0 2px 8px rgba(43,38,51,.06);
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: stretch; z-index: 60;
}
.tab-item {
  border: none; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-4); position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color .25s var(--ease-out-quint), transform .2s var(--ease-spring);
}
.tab-item:active { transform: scale(.86); }
.tab-item .tab-icon { width: 24px; height: 24px; position: relative; transition: transform .34s var(--ease-spring); }
/* 活跃胶囊光晕 */
.tab-item .tab-icon::before {
  content: ""; position: absolute; inset: -8px -6px; border-radius: 13px;
  background: linear-gradient(135deg, var(--primary), var(--amber));
  opacity: 0; transform: scale(.4) rotate(-8deg);
  transition: opacity .3s var(--ease-out-quint), transform .34s var(--ease-spring);
}
.tab-item .tab-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
/* 双图层图标：线性（默认）⇄ 渐变填充（选中），交叉淡入 + 弹性缩放 */
.tab-item .tab-icon .ic-line {
  opacity: 1; transform: scale(1);
  filter: drop-shadow(0 1px 1px rgba(43,38,51,.06));
  transition: opacity .3s var(--ease-out-quint), transform .42s var(--ease-spring), filter .3s;
}
.tab-item .tab-icon .ic-fill {
  opacity: 0; transform: scale(.5);
  transition: opacity .32s var(--ease-out-quint), transform .46s var(--ease-spring);
}
.tab-item.active { color: var(--primary-deep); }
.tab-item.active .tab-icon { transform: translateY(-2px) scale(1.1); }
.tab-item.active .tab-icon::before { opacity: .16; transform: scale(1) rotate(0deg); animation: glowBreath 2.8s ease-in-out infinite; }
.tab-item.active .tab-icon::after {
  content: "✦"; position: absolute; top: -9px; right: -7px; z-index: 2;
  font-size: 9px; color: var(--amber); line-height: 1;
  opacity: 0; transform: scale(.4) rotate(0deg);
  text-shadow: 0 0 6px rgba(255,165,61,.95);
  animation: tabSpark 2.6s ease-in-out infinite;
}
@keyframes tabSpark {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  12% { opacity: 1; transform: scale(1) rotate(28deg); }
  34% { opacity: 0; transform: scale(.55) rotate(55deg); }
}
@keyframes glowBreath {
  0%, 100% { opacity: .16; }
  50% { opacity: .28; }
}
.tab-item.active .tab-icon .ic-line { opacity: 0; transform: scale(.5); }
.tab-item.active .tab-icon .ic-fill {
  opacity: 1; transform: scale(1);
  filter: drop-shadow(0 3px 9px rgba(240,78,15,.42));
  animation: iconPop .5s var(--ease-spring), tabIdle 3s ease-in-out infinite .6s;
}
@keyframes tabIdle {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 3px 8px rgba(240,78,15,.38)); }
  50% { transform: translateY(-1.5px) scale(1.06); filter: drop-shadow(0 5px 14px rgba(240,78,15,.6)); }
}
.tab-label {
  font-size: 10px; font-weight: 600; letter-spacing: .5px;
  transition: transform .3s var(--ease-spring);
}
.tab-item.active .tab-label {
  font-weight: 800;
  background: linear-gradient(90deg, var(--primary-deep), var(--amber));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translateY(1px);
}
@keyframes iconPop { 0% { transform: scale(.5); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* 活跃指示器 · 发光小星点 */
.tab-item.active::after {
  content: ""; position: absolute; top: 4px;
  width: 5px; height: 5px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--amber));
  box-shadow: 0 0 9px 2px rgba(240,78,15,.45);
  animation: dotIn .4s var(--ease-out-quint) both;
}
@keyframes dotIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tab-dot {
  position: absolute; top: 8px; right: calc(50% - 24px);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rose); border: 2px solid #fff;
  animation: dotPulse 2.4s ease-out infinite;
}
@keyframes dotPulse {
  0% { box-shadow: 0 0 0 0 rgba(245,105,155,.55); }
  70% { box-shadow: 0 0 0 9px rgba(245,105,155,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,105,155,0); }
}
/* 中央发布按钮（凸出 + 公转光环） */
.tab-publish {
  border: none; cursor: pointer; background: transparent;
  display: grid; place-items: center; position: relative;
}
.tab-publish::before {
  content: ""; position: absolute; width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--amber));
  box-shadow: 0 10px 24px rgba(240, 78, 15, 0.42), inset 0 1px 0 rgba(255,255,255,.4);
  top: -26px;
  transition: transform .3s var(--ease-spring), box-shadow .35s;
}
/* 虚线公转轨道 */
.tab-publish::after {
  content: ""; position: absolute; width: 62px; height: 62px; border-radius: 50%;
  top: -30px;
  border: 1.5px dashed rgba(240,108,40,.45);
  animation: ringSpin 16s linear infinite;
  transition: border-color .35s;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
.tab-publish:hover::before { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(240,78,15,.52), inset 0 1px 0 rgba(255,255,255,.5); }
.tab-publish:hover::after { border-color: rgba(240,108,40,.9); }
.tab-publish:active::before { transform: scale(.86) rotate(90deg); }
.tab-publish svg {
  width: 26px; height: 26px; color: #fff; position: relative; z-index: 1; transform: translateY(-13px);
  filter: drop-shadow(0 1px 2px rgba(120,40,0,.35));
  transition: transform .3s var(--ease-spring);
}
.tab-publish:active svg { transform: translateY(-13px) scale(.88); }

/* ============================================================
   登录 / 注册页
   ============================================================ */
.auth-wrap {
  min-height: 100%; display: flex; flex-direction: column;
  padding: 44px 30px 36px; position: relative;
}
.auth-bg-blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none;
  animation: blobFloat 9s ease-in-out infinite;
}
@keyframes blobFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(12px,-14px) scale(1.06); }
}
.auth-logo { text-align: center; margin-bottom: 6px; animation: floaty 4s ease-in-out infinite; filter: drop-shadow(0 18px 30px rgba(240,78,15,.30)); }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.auth-brand { text-align: center; margin-bottom: 34px; }
.auth-brand h1 {
  font-size: 28px; font-weight: 800; letter-spacing: 4px;
  background: linear-gradient(135deg, var(--primary-deep), var(--amber));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.auth-brand p { color: var(--ink-2); font-size: 13px; margin-top: 8px; letter-spacing: 1px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; position: relative; }
.field {
  position: relative; background: rgba(255,255,255,.9); border-radius: var(--r-md);
  border: 1.5px solid transparent; padding: 0 18px;
  box-shadow: var(--shadow-sm);
  transition: border-color .25s, box-shadow .25s, transform .2s var(--ease-spring);
  backdrop-filter: blur(8px);
}
.field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 5px rgba(255,106,43,.12), var(--shadow-sm); transform: translateY(-1px); }
.field input {
  width: 100%; height: 54px; border: none; outline: none; font-size: 15px;
  font-family: inherit; background: transparent; color: var(--ink);
}
.field input::placeholder { color: var(--ink-4); }
.auth-role { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.role-chip {
  border: 1.5px solid var(--line); background: rgba(255,255,255,.85); border-radius: var(--r-md);
  padding: 11px 0; text-align: center; font-size: 13px; color: var(--ink-2);
  cursor: pointer; transition: all .22s var(--ease-out-quint); font-family: inherit;
}
.role-chip:active { transform: scale(.94); }
.role-chip.active {
  border-color: var(--primary); color: var(--primary-deep); background: var(--primary-soft);
  font-weight: 700; box-shadow: 0 6px 16px rgba(255,106,43,.16);
}
.auth-switch { text-align: center; margin-top: 22px; font-size: 13px; color: var(--ink-2); }
.auth-switch b { color: var(--primary-deep); cursor: pointer; font-weight: 700; }
.auth-guest { text-align: center; margin-top: 12px; font-size: 13px; color: var(--ink-4); }
.auth-guest b { color: var(--mint-deep); cursor: pointer; font-weight: 700; }

/* ============================================================
   首页 · 问候横幅
   ============================================================ */
.home-hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); padding: 22px 22px 20px; margin-bottom: 18px;
  color: #fff;
  background: linear-gradient(120deg, #FF7A33 0%, var(--primary) 42%, var(--amber) 100%);
  box-shadow: var(--shadow-hero);
  animation: viewIn .55s var(--ease-out-quint) both;
}
.home-hero::before {
  content: ""; position: absolute; right: -40px; top: -70px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(255,255,255,.14);
}
.home-hero::after {
  content: ""; position: absolute; right: 60px; bottom: -70px; width: 150px; height: 150px;
  border-radius: 50%; background: rgba(255,255,255,.10);
}
.home-hero .hero-emoji { font-size: 34px; display: block; margin-bottom: 6px; position: relative; z-index: 1; animation: floaty 3.4s ease-in-out infinite; }
.home-hero h2 { font-size: 22px; font-weight: 800; letter-spacing: 1px; position: relative; z-index: 1; }
.home-hero p { font-size: 13px; opacity: .94; margin-top: 4px; position: relative; z-index: 1; }
.home-hero .hero-date { font-size: 12px; opacity: .85; margin-top: 12px; display: inline-flex; gap: 8px; align-items: center; position: relative; z-index: 1; }

/* ============================================================
   动态流
   ============================================================ */
.feed-item {
  background: var(--card); border-radius: var(--r-xl); padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(255,255,255,.7);
  transition: transform .28s var(--ease-out-quint), box-shadow .28s var(--ease-out-quint);
  animation: itemIn .55s var(--ease-out-quint) both;
}
.feed-item:active { transform: scale(.985); }
@keyframes itemIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.feed-item:nth-child(2) { animation-delay: .05s; }
.feed-item:nth-child(3) { animation-delay: .1s; }
.feed-item:nth-child(4) { animation-delay: .15s; }
.feed-item:nth-child(n+5) { animation-delay: .2s; }
.feed-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.avatar {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary-soft), var(--amber-soft));
  border: 2.5px solid #fff; box-shadow: var(--shadow-sm);
  display: grid; place-items: center; font-weight: 800; color: var(--primary-deep); font-size: 17px;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-author { flex: 1; min-width: 0; }
.feed-name { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.badge {
  font-size: 10px; padding: 2px 9px; border-radius: var(--r-full); font-weight: 700; flex-shrink: 0;
  letter-spacing: .5px;
}
.badge.official { background: linear-gradient(135deg, var(--amber), var(--primary)); color: #fff; }
.badge.teacher { background: var(--mint-soft); color: var(--mint-deep); }
.badge.student { background: var(--sky-soft); color: var(--sky); }
.badge.monitor { background: var(--violet-soft); color: var(--violet); }
.feed-time { font-size: 11px; color: var(--ink-4); margin-top: 2px; font-variant-numeric: tabular-nums; }
.feed-content { font-size: 15px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; margin-bottom: 12px; }
.feed-content-wrap { margin-bottom: 12px; }
.feed-content-wrap .feed-content { margin-bottom: 0; }
.feed-content.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.expand-btn {
  color: var(--primary); font-size: 14px; font-weight: 600;
  background: none; border: none; cursor: pointer;
  font-family: inherit; padding: 4px 0 0; display: block;
}
.expand-btn:active { opacity: .6; }
.feed-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.feed-images img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); cursor: pointer; transition: transform .25s var(--ease-out-quint), filter .25s; }
.feed-images.single img { aspect-ratio: 16 / 10; border-radius: var(--r-lg); }
.feed-images img:active { transform: scale(.94); filter: brightness(.92); }
.feed-images .img-more { position: relative; }
.feed-images .img-more::after {
  content: attr(data-more); position: absolute; inset: 0;
  background: rgba(43,38,51,.52); color: #fff; font-size: 22px; font-weight: 800;
  display: grid; place-items: center; border-radius: var(--r-md);
  backdrop-filter: blur(2px);
}
.feed-actions { display: flex; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; }

/* ============================================================
   动态卡片 · 操作按钮（点赞 / 评论）
   ============================================================ */
.action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: none; background: transparent;
  border-radius: var(--r-full); color: var(--ink-2);
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent;
  transition: transform .18s var(--ease-spring), background .22s, color .22s;
}
/* 顶部高光 · 悬浮质感 */
.action-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.6), transparent 62%);
  opacity: 0; transition: opacity .25s;
}
.action-btn:hover::before { opacity: 1; }
.action-btn:active { transform: scale(.84); background: var(--primary-soft); }
.action-btn svg { width: 20px; height: 20px; transition: transform .28s var(--ease-spring); }
.action-btn:active svg { transform: scale(.82); }
.like-btn { color: var(--ink-2); }
.like-btn:hover { color: var(--rose); }
.like-btn svg { transition: fill .25s var(--ease-out-quint), transform .28s var(--ease-spring); }
.like-btn.liked {
  color: var(--rose);
  background: linear-gradient(135deg, rgba(255,122,158,.14), rgba(255,138,61,.14));
}
/* 渐变爱心：必须落在 path 上（其自带 fill 属性优先级高于继承） */
.like-btn.liked svg path {
  fill: url(#heartGrad);
  stroke: url(#heartGrad);
}
.like-btn.liked svg {
  animation: popHeart .55s var(--ease-spring);
  filter: drop-shadow(0 3px 10px rgba(245,105,155,.55));
}
@keyframes popHeart {
  0% { transform: scale(1); }
  35% { transform: scale(1.45) rotate(-12deg); }
  60% { transform: scale(.9) rotate(4deg); }
  80% { transform: scale(1.08) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.like-num { min-width: 14px; text-align: left; font-variant-numeric: tabular-nums; transition: transform .25s var(--ease-spring), color .25s; }
.like-num.bump { animation: numBump .45s var(--ease-spring); }
@keyframes numBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.55); color: var(--rose); }
  100% { transform: scale(1); }
}
.like-btn.liked .like-num { color: var(--rose); }

/* 评论按钮：气泡式悬浮 */
.cmt-btn { color: var(--ink-2); }
.cmt-btn:hover { color: var(--mint-deep); }
.cmt-btn svg { transition: transform .3s var(--ease-spring), color .22s; }
.cmt-btn:hover svg { transform: scale(1.18) rotate(-8deg); filter: drop-shadow(0 2px 6px rgba(63,185,155,.35)); }
.cmt-btn:active { background: var(--mint-soft); }
.cmt-btn:active svg { transform: scale(.82) rotate(4deg); }

/* 点赞粒子 */
.like-burst { position: fixed; z-index: 999; pointer-events: none; }
.like-burst .particle {
  position: absolute; line-height: 1; user-select: none;
  transform: translate(-50%, -50%);
  text-shadow: 0 1px 4px rgba(43,38,51,.15);
  animation: burst .78s var(--ease-out-quint) forwards;
}
@keyframes burst {
  0% { transform: translate(-50%,-50%) translate(0,0) rotate(0deg) scale(.3); opacity: 0; }
  18% { opacity: 1; transform: translate(-50%,-50%) translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1.12); }
  100% { transform: translate(-50%,-50%) translate(calc(var(--dx) * 1.25), calc(var(--dy) * 1.3 + 18px)) rotate(var(--rot)) scale(.65); opacity: 0; }
}

/* 公告卡片 */
.announce-card {
  background: linear-gradient(135deg, #FFF4E2, #FFE9D4);
  border: 1px solid #FFDFB8; border-radius: var(--r-lg);
  padding: 14px 16px; margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
  animation: viewIn .5s var(--ease-out-quint) both;
}
.announce-card::before {
  content: "📢"; position: absolute; right: -4px; bottom: -10px; font-size: 60px; opacity: .10;
}
.announce-title { font-size: 14px; font-weight: 800; color: var(--primary-deep); position: relative; z-index: 1; }
.announce-body { font-size: 13px; color: #8A6A4A; margin-top: 4px; position: relative; z-index: 1; }

/* 空状态 */
.empty { text-align: center; padding: 56px 20px; color: var(--ink-3); }
.empty .empty-emoji { font-size: 56px; margin-bottom: 14px; animation: floaty 2.8s ease-in-out infinite; display: inline-block; }
.empty p { font-size: 14px; }

/* ============================================================
   班级空间
   ============================================================ */
.class-hero {
  border-radius: var(--r-2xl); padding: 24px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(125deg, #FF7A33 0%, var(--primary) 40%, var(--amber) 100%);
  box-shadow: var(--shadow-hero); margin-bottom: 16px;
  animation: viewIn .55s var(--ease-out-quint) both;
}
.class-hero::before {
  content: ""; position: absolute; right: -36px; top: -52px; width: 190px; height: 190px;
  border-radius: 50%; background: rgba(255,255,255,.14);
}
.class-hero::after {
  content: ""; position: absolute; right: 46px; bottom: -64px; width: 130px; height: 130px;
  border-radius: 50%; background: rgba(255,255,255,.10);
}
.class-hero h2 { font-size: 24px; font-weight: 800; letter-spacing: 1px; position: relative; z-index: 1; }
.class-hero .class-motto { font-size: 13px; opacity: .95; margin-top: 8px; position: relative; z-index: 1; }
.class-hero .class-meta { display: flex; gap: 16px; margin-top: 18px; font-size: 12px; opacity: .95; position: relative; z-index: 1; flex-wrap: wrap; }
.class-stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.stat-card {
  background: #fff; border-radius: var(--r-lg); padding: 16px 8px; text-align: center;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(255,255,255,.7);
  transition: transform .22s var(--ease-spring);
}
.stat-card:active { transform: scale(.94); }
.stat-num { font-size: 24px; font-weight: 800; color: var(--primary-deep); font-variant-numeric: tabular-nums; }
.stat-label { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.section-title {
  font-size: 15px; font-weight: 800; margin: 20px 0 12px; display: flex; align-items: center; gap: 9px;
}
.section-title::before {
  content: ""; width: 5px; height: 18px; border-radius: 3px;
  background: linear-gradient(180deg, var(--primary), var(--amber));
  box-shadow: 0 2px 6px rgba(255,106,43,.35);
}
.member-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.member-cell { text-align: center; transition: transform .22s var(--ease-spring); }
.member-cell:active { transform: scale(.92); }
.member-cell .avatar { width: 54px; height: 54px; margin: 0 auto 7px; font-size: 21px; }
.member-cell .member-name { font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.member-cell .member-role { font-size: 10px; color: var(--ink-3); }

/* ============================================================
   游戏化中心
   ============================================================ */
.game-hero {
  border-radius: var(--r-xl); padding: 20px; margin-bottom: 16px;
  background: linear-gradient(135deg, #FFEDD9, #FFF5E4);
  border: 1px solid rgba(255, 138, 61, 0.18);
  display: flex; align-items: center; gap: 18px;
  box-shadow: var(--shadow-sm);
  animation: viewIn .55s var(--ease-out-quint) both;
  position: relative; overflow: hidden;
}
.game-hero::after {
  content: ""; position: absolute; left: -30px; bottom: -60px; width: 150px; height: 150px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,165,61,.25), transparent 70%);
  pointer-events: none;
}
.pet-stage {
  width: 116px; height: 116px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 32% 28%, #fff, var(--amber-soft));
  display: grid; place-items: center; position: relative;
  box-shadow: inset 0 0 24px rgba(255,184,77,.4), 0 8px 20px rgba(242,108,40,.12);
  animation: stageGlow 3s ease-in-out infinite;
}
@keyframes stageGlow {
  0%,100% { box-shadow: inset 0 0 24px rgba(255,184,77,.4), 0 8px 20px rgba(242,108,40,.12); }
  50% { box-shadow: inset 0 0 34px rgba(255,184,77,.55), 0 12px 28px rgba(242,108,40,.18); }
}
.pet-stage svg { width: 92px; height: 92px; animation: petBreathe 2.6s ease-in-out infinite; position: relative; z-index: 1; }
@keyframes petBreathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.03); } }
.pet-stage .pet-emoji { font-size: 56px; animation: petBreathe 2.6s ease-in-out infinite; position: relative; z-index: 1; }
.pet-spark {
  position: absolute; font-size: 14px; opacity: 0; animation: petSpark 2.8s ease-in-out infinite; z-index: 0;
}
@keyframes petSpark {
  0%, 70%, 100% { opacity: 0; transform: translateY(6px) scale(.6); }
  30% { opacity: 1; transform: translateY(-4px) scale(1); }
}
.pet-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.pet-name { font-size: 20px; font-weight: 800; color: var(--primary-deep); display: flex; align-items: center; gap: 8px; }
.pet-form { font-size: 12px; color: var(--ink-2); margin: 3px 0 10px; }
.pet-form b { color: var(--mint-deep); font-weight: 800; }
.exp-bar {
  height: 11px; border-radius: 6px; background: rgba(255,255,255,.9); overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.07); position: relative;
}
.exp-bar i {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--mint), var(--sky));
  background-size: 200% 100%;
  animation: expSlide 2.4s linear infinite;
  transition: width .7s var(--ease-out-expo);
}
@keyframes expSlide { from { background-position: 0 0; } to { background-position: -200% 0; } }
.exp-text { font-size: 11px; color: var(--ink-2); margin-top: 7px; font-variant-numeric: tabular-nums; }

/* 游戏 Tabs */
.game-tabs {
  display: flex; gap: 6px; background: rgba(240,232,222,.9); border-radius: var(--r-full);
  padding: 5px; margin-bottom: 18px; position: relative;
}
.game-tab {
  flex: 1; border: none; background: transparent; padding: 10px 0; font-size: 13px;
  border-radius: var(--r-full); color: var(--ink-2); cursor: pointer; font-family: inherit;
  transition: all .28s var(--ease-out-quint); font-weight: 700; position: relative; z-index: 1;
}
.game-tab:active { transform: scale(.95); }
.game-tab.active { background: #fff; color: var(--primary-deep); box-shadow: var(--shadow-sm); }

/* 排行榜 */
.rank-item {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  background: #fff; border-radius: var(--r-md); margin-bottom: 10px;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(255,255,255,.7);
  animation: itemIn .45s var(--ease-out-quint) both;
  transition: transform .2s var(--ease-spring);
}
.rank-item:nth-child(2) { animation-delay: .05s; }
.rank-item:nth-child(3) { animation-delay: .1s; }
.rank-item:active { transform: scale(.97); }
.rank-no {
  width: 32px; text-align: center; font-weight: 800; font-size: 18px; color: var(--ink-4); flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.rank-item:nth-child(1) .rank-no { color: #F7B500; }
.rank-item:nth-child(2) .rank-no { color: #A8A9AD; }
.rank-item:nth-child(3) .rank-no { color: #CD7F32; }
.rank-item.me { border: 1.5px solid var(--primary); box-shadow: 0 0 0 3px rgba(255,106,43,.08), var(--shadow-sm); }
.rank-item .avatar { width: 42px; height: 42px; font-size: 17px; }
.rank-name { flex: 1; font-weight: 700; font-size: 14px; }
.rank-pts { font-weight: 800; color: var(--primary-deep); font-size: 15px; font-variant-numeric: tabular-nums; }
.rank-pts small { font-size: 11px; color: var(--ink-4); font-weight: 600; }
.rank-gain { font-size: 11px; color: var(--mint-deep); font-weight: 800; }

/* 积分流 */
.points-head {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #FFF2E2, #FFF8EE); border-radius: var(--r-lg);
  padding: 20px; box-shadow: var(--shadow-sm); margin-bottom: 14px;
  border: 1px solid rgba(255,165,61,.22); position: relative; overflow: hidden;
}
.points-head::after {
  content: "⭐"; position: absolute; right: -8px; top: -12px; font-size: 64px; opacity: .08;
}
.points-total { font-size: 34px; font-weight: 800; color: var(--primary-deep); line-height: 1; font-variant-numeric: tabular-nums; }
.points-total small { font-size: 13px; color: var(--ink-2); font-weight: 600; margin-left: 5px; }
.points-rank { text-align: right; font-size: 13px; color: var(--ink-2); position: relative; z-index: 1; }
.points-rank b { color: var(--amber); font-size: 22px; font-variant-numeric: tabular-nums; }
.log-item {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border-radius: var(--r-md); padding: 13px 14px; margin-bottom: 10px;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(255,255,255,.7);
  animation: itemIn .4s var(--ease-out-quint) both;
}
.log-icon {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: 18px; flex-shrink: 0;
}
.log-text { flex: 1; font-size: 14px; font-weight: 700; }
.log-time { font-size: 11px; color: var(--ink-4); margin-top: 2px; }
.log-amount { font-weight: 800; color: var(--mint-deep); font-size: 16px; font-variant-numeric: tabular-nums; }

/* 成就墙 */
.ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; }
.ach-cell {
  background: #fff; border-radius: var(--r-lg); padding: 16px 6px; text-align: center;
  box-shadow: var(--shadow-sm); position: relative; transition: transform .2s var(--ease-spring);
  border: 1px solid rgba(255,255,255,.7);
  animation: itemIn .45s var(--ease-out-quint) both;
}
.ach-cell:active { transform: scale(.92); }
.ach-cell .ach-cell-icon {
  font-size: 32px; display: block; margin-bottom: 8px;
  filter: drop-shadow(0 4px 8px rgba(255,165,61,.3));
  transition: filter .3s, transform .3s;
  animation: achFloat 3.2s ease-in-out infinite;
}
@keyframes achFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ach-cell.locked .ach-cell-icon { filter: grayscale(1) opacity(.35); animation: none; }
.ach-cell-name { font-size: 12px; font-weight: 800; }
.ach-cell-progress { height: 5px; border-radius: 3px; background: var(--line); margin-top: 9px; overflow: hidden; }
.ach-cell-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--amber)); border-radius: 3px; transition: width .8s var(--ease-out-expo); }
.ach-cell.locked .ach-cell-name { color: var(--ink-3); }

/* ============================================================
   消息
   ============================================================ */
.msg-item {
  display: flex; gap: 12px; background: #fff; border-radius: var(--r-lg);
  padding: 15px; margin-bottom: 12px; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(255,255,255,.7);
  animation: itemIn .4s var(--ease-out-quint) both;
  cursor: pointer; transition: transform .2s var(--ease-spring), box-shadow .2s;
}
.msg-item:active { transform: scale(.97); }
.msg-icon {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-size: 21px; box-shadow: inset 0 -2px 6px rgba(43,38,51,.05);
}
.msg-body { flex: 1; min-width: 0; }
.msg-title { font-size: 14px; font-weight: 800; }
.msg-content { font-size: 13px; color: var(--ink-2); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.55; }
.msg-time { font-size: 11px; color: var(--ink-4); margin-top: 5px; font-variant-numeric: tabular-nums; }
.msg-item.unread { background: linear-gradient(135deg, #FFF8EF, #FFFDF9); border-color: rgba(255,165,61,.22); }
.msg-item.unread .msg-title::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--rose); margin-right: 7px; box-shadow: 0 0 0 3px rgba(245,105,155,.18);
}

/* ============================================================
   我的
   ============================================================ */
.profile-hero {
  display: flex; align-items: center; gap: 18px; padding: 26px 22px;
  border-radius: var(--r-2xl); color: #fff; margin-bottom: 18px;
  background: linear-gradient(120deg, #FF7A33 0%, var(--primary) 42%, var(--amber) 100%);
  box-shadow: var(--shadow-hero); position: relative; overflow: hidden;
  animation: viewIn .55s var(--ease-out-quint) both;
}
.profile-hero::before {
  content: ""; position: absolute; right: -24px; top: -40px; width: 170px; height: 170px;
  border-radius: 50%; background: rgba(255,255,255,.12);
}
.profile-hero::after {
  content: ""; position: absolute; right: 50px; bottom: -70px; width: 130px; height: 130px;
  border-radius: 50%; background: rgba(255,255,255,.10);
}
.profile-hero .avatar { width: 68px; height: 68px; font-size: 26px; border-width: 3px; box-shadow: 0 8px 20px rgba(43,38,51,.2); }
.profile-name { font-size: 22px; font-weight: 800; position: relative; z-index: 1; }
.profile-role { font-size: 12px; opacity: .95; margin-top: 2px; position: relative; z-index: 1; }
.profile-sign { font-size: 12px; opacity: .9; margin-top: 7px; position: relative; z-index: 1; }
.profile-stats { display: flex; gap: 24px; margin-top: 14px; position: relative; z-index: 1; }
.profile-stats .ps-num { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.profile-stats .ps-label { font-size: 11px; opacity: .92; }
.menu-list {
  background: #fff; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(255,255,255,.7);
}
.menu-item {
  display: flex; align-items: center; gap: 13px; padding: 16px 18px;
  border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14px; font-weight: 600;
  transition: background .2s, transform .15s var(--ease-spring);
}
.menu-item:last-child { border-bottom: none; }
.menu-item:active { background: var(--primary-soft); transform: scale(.985); }
.menu-item .menu-ico { font-size: 21px; }
.menu-item .menu-arrow { margin-left: auto; color: var(--ink-4); font-size: 14px; transition: transform .2s; }
.menu-item:active .menu-arrow { transform: translateX(3px); }
.menu-item.logout { color: var(--rose); justify-content: center; font-weight: 800; }

/* 动态详情 */
.detail-head {
  display: flex; align-items: center; gap: 12px; padding: 16px; background: #fff;
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); margin-bottom: 14px;
}
.comment-input-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100%; max-width: var(--app-max);
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px calc(12px + var(--safe-b));
  background: rgba(255,255,255,0.9); backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid var(--line);
  z-index: 50;
}
.comment-input {
  flex: 1; border: none; background: var(--bg);
  border-radius: var(--r-full); padding: 11px 18px;
  font-size: 14px; outline: none; color: var(--ink); font-family: inherit;
  transition: background .2s, box-shadow .2s;
}
.comment-input:focus { background: var(--primary-soft); box-shadow: 0 0 0 3px rgba(255,106,43,.12); }
.comment-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 84px; }
.comment-item { display: flex; gap: 10px; animation: itemIn .35s var(--ease-out-quint) both; }
.comment-item .avatar { width: 36px; height: 36px; font-size: 15px; }
.comment-name { font-size: 13px; font-weight: 800; color: var(--mint-deep); }
.comment-text { font-size: 14px; color: var(--ink); margin: 2px 0; line-height: 1.6; }
.comment-time { font-size: 11px; color: var(--ink-4); margin-top: 4px; }
.reply-nest { margin-left: 46px; }

/* ============================================================
   图片预览
   ============================================================ */
.img-viewer {
  position: fixed; inset: 0; z-index: 130; background: rgba(15,13,18,.94);
  display: grid; place-items: center; animation: fadeIn .25s both;
  backdrop-filter: blur(8px);
}
.img-viewer img {
  max-width: 92%; max-height: 86%; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  animation: imgZoom .3s var(--ease-out-expo) both;
}
@keyframes imgZoom { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.img-viewer .close-x {
  position: absolute; top: 20px; right: 22px; color: #fff;
  font-size: 32px; cursor: pointer; opacity: .9;
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255,255,255,.12);
  transition: background .2s, transform .2s var(--ease-spring);
}
.img-viewer .close-x:active { background: rgba(255,255,255,.25); transform: scale(.88); }

/* 加载更多 */
.load-more { text-align: center; padding: 22px; color: var(--ink-3); font-size: 13px; letter-spacing: 1px; }

/* ============================================================
   小工具类
   ============================================================ */
.flex { display: flex; align-items: center; }
.gap8 { gap: 8px; }
.mt8 { margin-top: 8px; }
.mt16 { margin-top: 16px; }
.text-sub { color: var(--ink-2); }
.text-sm { font-size: 13px; }
.center { text-align: center; }

/* ============================================================
   图标系统 v2 · 微交互与质感
   统一的世界级图标手感：涟漪按压 + 磁吸跟随 + 光泽扫过 + 环境光晕
   ============================================================ */

/* 涟漪按压（JS 注入 .ripple 元素） */
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255,106,43,.26) 0%, rgba(255,165,61,.15) 52%, transparent 72%);
  transform: scale(0); opacity: .9;
  animation: rippleOut .62s var(--ease-out-expo) forwards;
}
@keyframes rippleOut {
  60% { opacity: .85; }
  to { transform: scale(1); opacity: 0; }
}

/* 磁吸跟随（仅桌面 hover 设备，JS 写入 --mx/--my） */
@media (hover: hover) and (pointer: fine) {
  .icon-btn, .action-btn, .tool-btn, .tab-publish { will-change: transform; }
  .icon-btn { transform: translate(calc(var(--mx, 0) * .55px), calc(var(--my, 0) * .55px)); }
  .icon-btn:active { transform: translate(calc(var(--mx, 0) * .55px), calc(var(--my, 0) * .55px)) scale(.86); }
  .action-btn { transform: translate(calc(var(--mx, 0) * .45px), calc(var(--my, 0) * .45px)); }
  .action-btn:active { transform: translate(calc(var(--mx, 0) * .45px), calc(var(--my, 0) * .45px)) scale(.84); }
  .tool-btn { transform: translate(calc(var(--mx, 0) * .4px), calc(var(--my, 0) * .4px)); }
  .tab-publish { transform: translate(calc(var(--mx, 0) * .5px), calc(var(--my, 0) * .5px)); }
  .tab-publish:active { transform: translate(calc(var(--mx, 0) * .5px), calc(var(--my, 0) * .5px)); }
  /* 磁吸时图标内部更灵活 */
  .action-btn svg { transition: transform .28s var(--ease-spring); }
}

/* 允许涟漪的按钮容器裁剪 */
.tab-item { overflow: hidden; }
.menu-item { overflow: hidden; }

/* 发布工具栏按钮：图标微动 + 光晕 */
.tool-btn { position: relative; }
.tool-btn svg {
  transition: transform .3s var(--ease-spring), color .2s;
  filter: drop-shadow(0 2px 5px rgba(31,156,128,.28));
}
.tool-btn:hover svg { transform: scale(1.18) rotate(-6deg); }
.tool-btn:active svg { transform: scale(.88) rotate(4deg); }

/* 圆徽章图标（积分流水 / 消息）：渐变环 + 光泽扫过 + 悬浮光晕 */
.log-icon, .msg-icon {
  position: relative; overflow: hidden;
  box-shadow: 0 6px 16px rgba(43,38,51,.10), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 6px rgba(43,38,51,.06);
  transition: transform .28s var(--ease-spring), box-shadow .3s;
}
.log-icon > *, .msg-icon > * { position: relative; z-index: 1; }
/* 悬浮光晕 */
.log-icon::before, .msg-icon::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.85), transparent 62%);
  opacity: 0; transition: opacity .3s;
}
.log-item:hover .log-icon::before, .msg-item:hover .msg-icon::before { opacity: .7; }
/* 光泽扫过 */
.log-icon::after, .msg-icon::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.85) 48%, rgba(255,255,255,.06) 58%, transparent 70%);
  background-size: 220% 100%; background-position: 130% 0;
  opacity: 0; transition: opacity .25s, background-position .8s var(--ease-out-expo);
}
.log-item:hover .log-icon::after, .log-item:active .log-icon::after,
.msg-item:hover .msg-icon::after, .msg-item:active .msg-icon::after {
  opacity: 1; background-position: -70% 0;
}
.log-item:active .log-icon, .msg-item:active .msg-icon { transform: scale(.88); box-shadow: 0 2px 8px rgba(43,38,51,.12), inset 0 1px 0 rgba(255,255,255,.75); }

/* 成就图标：呼吸光环 */
.ach-cell { overflow: hidden; }
.ach-cell .ach-cell-icon {
  position: relative; z-index: 1;
  filter: drop-shadow(0 4px 10px rgba(255,165,61,.45));
  transition: transform .3s var(--ease-spring);
  animation: achFloat 3.2s ease-in-out infinite;
}
.ach-cell .ach-cell-icon::after {
  content: ""; position: absolute; inset: -11px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255,165,61,.32), transparent 66%);
  animation: achHalo 3.2s ease-in-out infinite;
}
@keyframes achHalo {
  0%, 100% { transform: scale(.82); opacity: .55; }
  50% { transform: scale(1.12); opacity: 1; }
}
.ach-cell:active .ach-cell-icon { transform: scale(1.22) rotate(-8deg); }
.ach-cell.locked .ach-cell-icon::after { display: none; }

/* 菜单图标：按压弹跳 */
.menu-ico { position: relative; transition: transform .28s var(--ease-spring), filter .28s; filter: drop-shadow(0 2px 4px rgba(43,38,51,.08)); }
.menu-item:active .menu-ico { transform: scale(1.32) rotate(-8deg); filter: drop-shadow(0 4px 10px rgba(255,106,43,.3)); }
.menu-item:active .menu-arrow { transform: translateX(4px) scale(1.15); color: var(--primary); }

/* 空状态表情：柔光浮动 */
.empty .empty-emoji { filter: drop-shadow(0 12px 22px rgba(255,165,61,.28)); }

/* 首页大表情：呼吸光晕 */
.home-hero .hero-emoji { filter: drop-shadow(0 10px 18px rgba(255,165,61,.35)); }

/* ============================================================
   无障碍：减弱动效
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 演示模式提示条 */
.mock-tip {
  position: fixed; top: calc(var(--header-h) + 10px); left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 999; padding: 7px 14px; border-radius: var(--r-full);
  background: rgba(43, 38, 51, .85); color: #fff; font-size: 12px;
  box-shadow: var(--shadow-md); opacity: 1;
  transition: opacity .5s var(--ease-out-expo), transform .5s var(--ease-out-expo);
}
.mock-tip.out { opacity: 0; transform: translateX(-50%) translateY(-8px); }

/* ============================================================
   Phase 2: 交互升级 + 视觉打磨
   ============================================================ */

/* ---- 暗色模式适配补充 ---- */
:root[data-theme="dark"] .skeleton,
:root:not([data-theme="light"]) .skeleton {
  background: #352F40;
}
:root[data-theme="dark"] .skeleton::after,
:root:not([data-theme="light"]) .skeleton::after {
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
}
:root[data-theme="dark"] .tabbar,
:root:not([data-theme="light"]) .tabbar {
  background: rgba(45, 40, 56, 0.86);
  border-color: rgba(255,255,255,.06);
}
:root[data-theme="dark"] .publish-input,
:root:not([data-theme="light"]) .publish-input { background: var(--bg-2); }
:root[data-theme="dark"] .publish-input:focus,
:root:not([data-theme="light"]) .publish-input:focus { background: #352F40; }
:root[data-theme="dark"] .game-tabs,
:root:not([data-theme="light"]) .game-tabs { background: rgba(40,36,50,.9); }
:root[data-theme="dark"] .game-tab.active,
:root:not([data-theme="light"]) .game-tab.active { background: var(--card); }
:root[data-theme="dark"] .comment-input-bar,
:root:not([data-theme="light"]) .comment-input-bar {
  background: rgba(45,40,56,0.9);
}

/* ---- 暗色模式切换按钮 ---- */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: none; background: var(--bg-2); color: var(--ink-2);
  transition: transform .2s var(--ease-spring), background .2s;
}
.theme-toggle:active { transform: scale(.88) rotate(30deg); }
.theme-toggle svg { width: 20px; height: 20px; }

/* ---- 下拉刷新增强 ---- */
.pull-hint .pull-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--line-strong); border-top-color: var(--primary);
  animation: spin .8s linear infinite;
}
.pull-hint.refreshing .pull-spinner { border-top-color: var(--primary); }

/* ---- 排行榜 Top3 领奖台 ---- */
.rank-podium {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 10px; padding: 20px 8px 8px; margin-bottom: 18px;
}
.podium-item {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; max-width: 100px; position: relative;
  animation: podiumRise .6s var(--ease-spring) both;
}
.podium-item.p1 { animation-delay: 0s; }
.podium-item.p2 { animation-delay: .12s; }
.podium-item.p3 { animation-delay: .24s; }
@keyframes podiumRise {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.podium-avatar {
  border-radius: 50%; border: 3px solid #fff;
  display: grid; place-items: center; font-weight: 800;
  box-shadow: var(--shadow-md); margin-bottom: 6px; position: relative;
}
.podium-item.p1 .podium-avatar {
  width: 56px; height: 56px; font-size: 22px;
  border-color: #FFD27D; box-shadow: 0 8px 24px rgba(255,210,125,.4);
}
.podium-item.p2 .podium-avatar {
  width: 48px; height: 48px; font-size: 19px;
  border-color: #D0D0D0; box-shadow: 0 6px 18px rgba(208,208,208,.3);
}
.podium-item.p3 .podium-avatar {
  width: 42px; height: 42px; font-size: 17px;
  border-color: #E0A070; box-shadow: 0 5px 14px rgba(224,160,112,.3);
}
.podium-medal { font-size: 20px; position: absolute; top: -10px; right: -6px; }
.podium-name { font-size: 12px; font-weight: 700; color: var(--ink-2); text-align: center; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-pts { font-size: 13px; font-weight: 800; color: var(--primary-deep); margin-top: 2px; }
.podium-stand {
  border-radius: var(--r-sm) var(--r-sm) 0 0; margin-top: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #fff;
}
.podium-item.p1 .podium-stand { height: 48px; background: linear-gradient(180deg, #FFD27D, #FF9A3D); width: 72px; }
.podium-item.p2 .podium-stand { height: 34px; background: linear-gradient(180deg, #D8D8D8, #B0B0B0); width: 64px; }
.podium-item.p3 .podium-stand { height: 24px; background: linear-gradient(180deg, #E0A070, #B07040); width: 56px; }
.rank-gap-bar {
  height: 5px; border-radius: 3px; background: var(--line); margin-top: 4px; overflow: hidden;
}
.rank-gap-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--primary), var(--amber)); transition: width .6s var(--ease-out-quint); }

/* ---- 通知筛选 Tab ---- */
.notify-tabs {
  display: flex; gap: 6px; background: var(--bg-2); border-radius: var(--r-full);
  padding: 4px; margin-bottom: 14px; position: sticky; top: 0; z-index: 5;
}
.notify-tab {
  flex: 1; border: none; background: transparent; padding: 8px 0; font-size: 12px;
  border-radius: var(--r-full); color: var(--ink-2); cursor: pointer; font-family: inherit;
  transition: all .25s var(--ease-out-quint); font-weight: 700; text-align: center;
}
.notify-tab:active { transform: scale(.93); }
.notify-tab.active { background: var(--card); color: var(--primary-deep); box-shadow: var(--shadow-xs); }
.notify-group-title {
  font-size: 12px; font-weight: 800; color: var(--ink-3);
  padding: 12px 4px 8px; letter-spacing: 1px;
}

/* ---- 成就解锁特效增强 ---- */
.ach-particles {
  position: fixed; inset: 0; z-index: 125; pointer-events: none;
}
.ach-particle {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  animation: achBurst .9s var(--ease-out-expo) forwards;
}
@keyframes achBurst {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--bx), var(--by)) scale(0); opacity: 0; }
}
.ach-glow {
  position: fixed; inset: 0; z-index: 124; pointer-events: none;
  background: radial-gradient(circle at center, rgba(255,165,61,.3) 0%, transparent 60%);
  animation: achGlow .8s ease-out forwards;
}
@keyframes achGlow {
  0% { opacity: 0; transform: scale(.5); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: scale(2); }
}
#achievement-modal.show .ach-pop {
  animation: achFlip .8s var(--ease-spring) both;
}
@keyframes achFlip {
  0% { transform: perspective(800px) rotateY(90deg) scale(.7); opacity: 0; }
  50% { transform: perspective(800px) rotateY(-8deg) scale(1.05); opacity: 1; }
  100% { transform: perspective(800px) rotateY(0) scale(1); opacity: 1; }
}

/* ---- 图片预览增强 ---- */
.img-viewer {
  touch-action: none; overflow: hidden;
}
.img-viewer .img-track {
  display: flex; width: 100%; height: 100%; align-items: center;
  transition: transform .35s var(--ease-out-expo);
}
.img-viewer .img-track img {
  flex-shrink: 0; width: 100%; max-width: var(--app-max);
  object-fit: contain; padding: 0 4px;
}
.img-viewer .img-dots {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 2;
}
.img-viewer .img-dot {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3);
  transition: all .25s;
}
.img-viewer .img-dot.active { background: #fff; width: 18px; border-radius: 3px; }

/* ---- 发布面板：表情选择器 ---- */
.emoji-picker {
  display: none; flex-wrap: wrap; gap: 4px; padding: 12px;
  background: var(--bg-2); border-radius: var(--r-md); margin-top: 8px;
  max-height: 160px; overflow-y: auto;
}
.emoji-picker.show { display: flex; animation: viewIn .3s var(--ease-out-quint) both; }
.emoji-btn {
  width: 36px; height: 36px; border: none; background: transparent;
  font-size: 22px; cursor: pointer; border-radius: var(--r-sm);
  transition: background .15s, transform .15s var(--ease-spring);
}
.emoji-btn:active { background: var(--primary-soft); transform: scale(1.2); }
.publish-preview img {
  position: relative; cursor: grab;
}
.publish-preview img.dragging { opacity: .4; cursor: grabbing; }
.pub-emoji-btn { display: flex; align-items: center; gap: 6px; }

/* ---- 页面切换动画 ---- */
.view.slide-out-left { animation: slideOutLeft .25s var(--ease-out-quint) both; }
.view.slide-in-right { animation: slideInRight .3s var(--ease-out-quint) both; }
.view.slide-out-right { animation: slideOutRight .25s var(--ease-out-quint) both; }
.view.slide-in-left { animation: slideInLeft .3s var(--ease-out-quint) both; }
@keyframes slideOutLeft { to { transform: translateX(-30%); opacity: 0; } }
@keyframes slideInRight { from { transform: translateX(30%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideOutRight { to { transform: translateX(30%); opacity: 0; } }
@keyframes slideInLeft { from { transform: translateX(-30%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================
   Phase 3 · 宠物互动 / 心情系统 / 成就稀有度 / 仪表盘 / 举报
   ============================================================ */

/* ---- 宠物心情 ---- */
.pet-mood-row {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; font-size: 12px;
}
.pet-mood-emoji { font-size: 18px; }
.pet-mood-label { color: var(--text-sub); white-space: nowrap; }
.mood-bar {
  flex: 1; height: 6px; border-radius: 3px;
  background: var(--bg-tag, #eee); overflow: hidden;
}
.mood-bar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #FF8A3D, #FFD27D);
  transition: width .4s var(--ease-out-quint);
}

/* ---- 宠物互动按钮 ---- */
.pet-actions {
  display: flex; gap: 10px; margin: 16px 0;
}
.pet-action-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 14px 6px; border: none; border-radius: var(--r-md);
  background: var(--card, #fff);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  cursor: pointer; position: relative;
  transition: transform .15s var(--ease-spring), box-shadow .2s;
}
.pet-action-btn:active { transform: scale(.95); }
.pet-action-btn.loading { opacity: .6; pointer-events: none; }
.pet-action-btn.disabled { opacity: .45; pointer-events: none; }
.pet-action-icon { font-size: 24px; }
.pet-action-text { font-size: 12px; font-weight: 600; color: var(--text); }
.pet-action-cd {
  font-size: 10px; color: var(--text-sub);
  background: var(--bg-tag, #f0f0f0); padding: 1px 6px; border-radius: 8px;
}
.pet-action-streak {
  font-size: 10px; color: var(--primary);
  background: var(--primary-soft); padding: 1px 6px; border-radius: 8px;
}

/* ---- 成就稀有度 ---- */
.ach-rarity-bar {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
}
.ach-rarity-chip {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 12px; font-size: 11px;
  background: var(--bg-tag, #f0f0f0);
}
.ach-rarity-chip.rarity-common { background: #f5f5f5; color: #90a4ae; }
.ach-rarity-chip.rarity-rare { background: #e3f2fd; color: #42a5f5; }
.ach-rarity-chip.rarity-epic { background: #f3e5f5; color: #ab47bc; }
.ach-rarity-chip.rarity-legendary { background: #fff8e1; color: #ffb300; }
.ach-rarity-chip .rarity-count { font-weight: 700; }

.ach-cell {
  position: relative; transition: box-shadow .3s;
}
.ach-cell.rarity-rare { border-color: rgba(66,165,245,.3); }
.ach-cell.rarity-epic { border-color: rgba(171,71,188,.3); }
.ach-cell.rarity-legendary { border-color: rgba(255,179,0,.4); }
.ach-cell.rarity-legendary.unlocked {
  animation: legendaryGlow 2s ease-in-out infinite alternate;
}
@keyframes legendaryGlow {
  to { box-shadow: 0 0 16px rgba(255,179,0,.4); }
}
.ach-cell-rarity {
  font-size: 10px; font-weight: 700; margin-top: 2px;
  text-transform: uppercase; letter-spacing: .5px;
}
.ach-cell-remain {
  font-size: 10px; color: var(--text-sub); margin-top: 2px; text-align: center;
}

/* ---- 个人主页仪表盘 ---- */
.dashboard-section {
  margin-bottom: 16px;
}
.dash-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.dash-stat-card {
  text-align: center; padding: 14px 4px;
  background: var(--card, #fff); border-radius: var(--r-md);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.dash-stat-icon {
  width: 36px; height: 36px; margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 16px;
}
.dash-stat-num {
  font-size: 20px; font-weight: 800; color: var(--text);
  line-height: 1.2;
}
.dash-stat-label {
  font-size: 11px; color: var(--text-sub); margin-top: 2px;
}

/* 趋势图 */
.dash-trend-chart {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 6px; padding: 16px 8px;
  background: var(--card, #fff); border-radius: var(--r-md);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  min-height: 120px;
}
.trend-bar-col {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1;
}
.trend-bar {
  width: 100%; max-width: 32px; min-height: 4px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--primary), var(--primary-light, #FFD27D));
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 2px;
  transition: height .4s var(--ease-out-quint);
}
.trend-bar-val {
  font-size: 10px; color: #fff; font-weight: 700;
}
.trend-bar-label {
  font-size: 10px; color: var(--text-sub);
}

/* 积分类型分布 */
.dash-type-list {
  background: var(--card, #fff); border-radius: var(--r-md);
  box-shadow: 0 2px 8px rgba(0,0,0,.04); padding: 12px;
}
.dash-type-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
}
.dash-type-label {
  font-size: 12px; color: var(--text); white-space: nowrap; width: 70px;
}
.dash-type-bar {
  flex: 1; height: 8px; border-radius: 4px;
  background: var(--bg-tag, #f0f0f0); overflow: hidden;
}
.dash-type-bar i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--primary), #FFD27D);
  transition: width .5s var(--ease-out-quint);
}
.dash-type-num {
  font-size: 13px; font-weight: 700; color: var(--primary-deep);
  min-width: 30px; text-align: right;
}

/* ---- 举报弹窗 ---- */
.report-dialog {
  background: var(--card, #fff); border-radius: var(--r-lg);
  padding: 24px 20px; width: 90%; max-width: 360px;
  box-shadow: 0 12px 40px rgba(0,0,0,.15);
  animation: modalIn .3s var(--ease-spring);
}
.report-title {
  font-size: 17px; font-weight: 700; margin-bottom: 16px; text-align: center;
}
.report-types {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px;
}
.report-type-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border: 2px solid var(--border, #eee);
  border-radius: var(--r-md); background: transparent;
  cursor: pointer; transition: all .15s;
  font-size: 14px; color: var(--text);
}
.report-type-btn:hover { border-color: var(--primary-light, #FFD27D); }
.report-type-btn.active {
  border-color: var(--primary); background: var(--primary-soft);
  color: var(--primary-deep);
}
.report-type-btn span:first-child { font-size: 18px; }
.report-reason {
  width: 100%; min-height: 80px; padding: 10px 12px;
  border: 1px solid var(--border, #eee); border-radius: var(--r-md);
  font-size: 14px; resize: none; margin-bottom: 16px;
  background: var(--bg-input, #f8f8f8); color: var(--text);
}
.report-reason:focus {
  outline: none; border-color: var(--primary);
}

/* ---- PWA 安装提示 ---- */
.pwa-install-banner {
  position: fixed; bottom: 70px; left: 12px; right: 12px;
  background: var(--card, #fff); border-radius: var(--r-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
  z-index: 200; animation: slideUp .3s var(--ease-spring);
}
.pwa-install-banner .pwa-icon { font-size: 28px; }
.pwa-install-banner .pwa-text { flex: 1; }
.pwa-install-banner .pwa-title { font-size: 14px; font-weight: 600; }
.pwa-install-banner .pwa-sub { font-size: 12px; color: var(--text-sub); }
.pwa-install-banner .pwa-close {
  position: absolute; top: 6px; right: 8px;
  font-size: 16px; color: var(--text-sub); cursor: pointer;
}
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- 暗色模式适配 ---- */
:root[data-theme="dark"] .dash-stat-card,
:root[data-theme="dark"] .dash-trend-chart,
:root[data-theme="dark"] .dash-type-list,
:root[data-theme="dark"] .pet-action-btn {
  background: var(--card-dark, #1e1e1e);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
:root[data-theme="dark"] .report-dialog {
  background: var(--card-dark, #1e1e1e);
}
:root[data-theme="dark"] .report-reason {
  background: var(--bg-input-dark, #2a2a2a);
}
:root[data-theme="dark"] .report-type-btn {
  border-color: var(--border-dark, #333);
}

/* ============================================================
   Phase 4: 搜索 / 私信 / 数据统计 / 无障碍 / 详情沉浸
   ============================================================ */

/* 无障碍：键盘焦点环 + 跳过链接 */
.skip-link {
  position: absolute; top: -40px; left: 0; z-index: 9999;
  background: var(--primary, #FF6A2B); color: #fff;
  padding: 8px 16px; border-radius: 0 0 8px 0; font-size: 13px;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

body:not(.kb-nav) *:focus { outline: none; }
body.kb-nav *:focus-visible {
  outline: 2px solid var(--primary, #FF6A2B);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 头部消息角标 */
.msg-badge {
  position: absolute; top: -2px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #FF3B5C; color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  animation: badgePop .3s var(--ease-out-expo);
}
.icon-btn { position: relative; }
@keyframes badgePop { from { transform: scale(0); } to { transform: scale(1); } }

/* 搜索 */
.search-bar-wrap {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.search-input-box {
  flex: 1; position: relative; display: flex; align-items: center;
  background: var(--card, #fff); border-radius: 12px; padding: 0 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.search-ic { width: 18px; height: 18px; color: var(--text-sub, #999); flex-shrink: 0; }
.search-input-box input {
  flex: 1; border: none; outline: none; background: transparent;
  padding: 10px 8px; font-size: 14px; color: var(--text, #333);
}
.search-clear {
  background: none; border: none; font-size: 18px; color: var(--text-sub, #999);
  cursor: pointer; padding: 4px;
}
.search-section-title {
  font-size: 13px; font-weight: 600; color: var(--text-sub, #888);
  margin: 16px 0 10px; padding-left: 2px;
}
.hot-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hot-tag {
  display: flex; align-items: center; gap: 4px;
  background: var(--card, #fff); border: none;
  padding: 6px 14px; border-radius: 99px; font-size: 13px;
  color: var(--text, #333); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: transform .15s;
}
.hot-tag:active { transform: scale(.95); }
.hot-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px; font-size: 11px; font-weight: 700;
  background: var(--primary-soft, #FFF0E6); color: var(--primary, #FF6A2B);
}
.hot-tag:nth-child(1) .hot-rank { background: #FF3B5C; color: #fff; }
.hot-tag:nth-child(2) .hot-rank { background: #FF7A2B; color: #fff; }
.hot-tag:nth-child(3) .hot-rank { background: #FFB84D; color: #fff; }
.hot-fire { font-size: 12px; }
.search-loading {
  text-align: center; padding: 32px 0; color: var(--text-sub, #999); font-size: 14px;
}
.search-loading .pull-spinner { display: inline-block; }
.search-tabs {
  display: flex; gap: 0; margin-bottom: 12px;
  border-bottom: 1px solid var(--border, #eee);
}
.search-tab {
  padding: 8px 18px; border: none; background: none;
  font-size: 14px; color: var(--text-sub, #888); cursor: pointer;
  border-bottom: 2px solid transparent; transition: all .2s;
}
.search-tab.active { color: var(--primary, #FF6A2B); border-bottom-color: var(--primary, #FF6A2B); }
.search-user-list { display: flex; flex-direction: column; gap: 0; }
.search-user-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--border, #f0f0f0); cursor: pointer;
}
.search-user-item:active { background: var(--bg-tap, #f5f5f5); }
.search-user-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.search-user-points { font-size: 13px; font-weight: 700; color: var(--primary, #FF6A2B); }

/* 私信 */
.conv-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 12px;
  border-bottom: 1px solid var(--border, #f0f0f0); cursor: pointer;
  transition: background .15s;
}
.conv-item:active { background: var(--bg-tap, #f5f5f5); }
.conv-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #FF3B5C; color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 9px; display: flex; align-items: center; justify-content: center;
}
.conv-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.conv-preview {
  font-size: 13px; color: var(--text-sub, #999);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-time { font-size: 12px; color: var(--text-sub, #bbb); flex-shrink: 0; }

/* 聊天界面 */
.chat-wrap {
  display: flex; flex-direction: column; height: calc(100vh - 110px);
}
.chat-messages {
  flex: 1; overflow-y: auto; padding: 16px 12px; -webkit-overflow-scrolling: touch;
}
.chat-msg {
  display: flex; gap: 8px; margin-bottom: 12px; align-items: flex-end;
}
.chat-msg.mine { flex-direction: row-reverse; }
.chat-bubble {
  max-width: 72%; padding: 10px 14px; border-radius: 16px;
  font-size: 14px; line-height: 1.5; word-break: break-word;
  background: var(--card, #fff); box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.chat-bubble.mine {
  background: linear-gradient(135deg, #FF9A3D, #FF6A2B); color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-bubble:not(.mine) { border-bottom-left-radius: 4px; }
.chat-text { white-space: pre-wrap; }
.chat-time { font-size: 11px; opacity: .6; margin-top: 4px; }
.chat-input-bar {
  display: flex; gap: 8px; padding: 10px 12px;
  background: var(--card, #fff); border-top: 1px solid var(--border, #eee);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.chat-input {
  flex: 1; border: 1px solid var(--border, #eee); border-radius: 20px;
  padding: 10px 16px; font-size: 14px; outline: none; background: var(--bg, #f8f8f8);
}
.chat-input:focus { border-color: var(--primary, #FF6A2B); }
.chat-send-btn { padding: 8px 18px; font-size: 14px; white-space: nowrap; }

/* 数据统计 */
.stats-overview-card {
  background: linear-gradient(135deg, #FFD27D, #FF8A3D);
  border-radius: 16px; padding: 24px; text-align: center;
  margin-bottom: 16px; color: #fff;
}
.stats-ov-num { font-size: 40px; font-weight: 800; line-height: 1; }
.stats-ov-label { font-size: 14px; margin-top: 6px; opacity: .9; }
.stats-ov-rate { font-size: 12px; margin-top: 8px; opacity: .7; }

.heatmap-grid {
  display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px;
  margin-bottom: 10px;
}
.heat-cell {
  aspect-ratio: 1; border-radius: 3px;
}
.heat-l0 { background: #ebedf0; }
.heat-l1 { background: #ffd0ab; }
.heat-l2 { background: #ffa463; }
.heat-l3 { background: #ff7a2b; }
.heat-l4 { background: #e0551a; }
.heatmap-legend {
  display: flex; align-items: center; gap: 4px; justify-content: flex-end;
  font-size: 11px; color: var(--text-sub, #999);
}
.heat-legend-cell {
  width: 12px; height: 12px; border-radius: 2px;
}

.growth-chart { width: 100%; height: auto; display: block; }

.hour-chart {
  display: flex; align-items: flex-end; gap: 2px; height: 70px;
  margin-top: 8px;
}
.hour-bar-col {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.hour-bar {
  width: 100%; max-width: 14px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #FFB84D, #FF8A3D);
  transition: height .3s var(--ease-out-expo);
}
.hour-bar-label { font-size: 10px; color: var(--text-sub, #999); margin-top: 4px; }

/* 动态详情沉浸式头部 */
.detail-hero {
  position: relative; height: 200px; overflow: hidden;
  border-radius: 0 0 20px 20px; margin: -8px -12px 16px;
}
.detail-hero-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transform: scale(1.05); transition: transform .1s linear;
  filter: blur(0.5px);
}
.detail-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.5) 100%);
}
.detail-hero-content {
  position: absolute; bottom: 16px; left: 16px; right: 16px;
  display: flex; align-items: center; gap: 10px; color: #fff;
}
.detail-hero-content .avatar { width: 40px; height: 40px; font-size: 18px; border: 2px solid rgba(255,255,255,.6); }
.detail-hero-name { font-size: 16px; font-weight: 700; }
.detail-hero-time { font-size: 12px; opacity: .8; }

/* 暗色模式适配 */
:root[data-theme="dark"] .search-input-box { background: var(--card-dark, #1e1e1e); }
:root[data-theme="dark"] .search-input-box input { color: var(--text-dark, #eee); }
:root[data-theme="dark"] .hot-tag { background: var(--card-dark, #1e1e1e); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
:root[data-theme="dark"] .conv-item { border-color: var(--border-dark, #2a2a2a); }
:root[data-theme="dark"] .conv-item:active { background: rgba(255,255,255,.04); }
:root[data-theme="dark"] .chat-bubble { background: var(--card-dark, #2a2a2a); color: var(--text-dark, #eee); }
:root[data-theme="dark"] .chat-input { background: var(--bg-dark, #1a1a1a); border-color: var(--border-dark, #333); color: var(--text-dark, #eee); }
:root[data-theme="dark"] .chat-input-bar { background: var(--card-dark, #1e1e1e); border-color: var(--border-dark, #2a2a2a); }
:root[data-theme="dark"] .heat-l0 { background: #2d333b; }
:root[data-theme="dark"] .search-user-item { border-color: var(--border-dark, #2a2a2a); }
:root[data-theme="dark"] .search-user-item:active { background: rgba(255,255,255,.04); }
:root[data-theme="dark"] .search-tabs { border-color: var(--border-dark, #2a2a2a); }

/* 移动端适配 */
@media (max-width: 768px) {
  .heatmap-grid { grid-template-columns: repeat(10, 1fr); gap: 4px; }
  .chat-bubble { max-width: 80%; }
  .detail-hero { height: 180px; }
  .hour-chart { gap: 1px; }
  .hour-bar { max-width: 10px; }
}
@media (max-width: 480px) {
  .heatmap-grid { grid-template-columns: repeat(7, 1fr); }
  .stats-ov-num { font-size: 32px; }
  .search-bar-wrap { flex-wrap: wrap; }
  .search-input-box { flex: 1 1 100%; }
  #search-go { flex: 1; }
}

/* ============================================================
   游戏化乐园 v2 — 顶级视觉重构
   ============================================================ */

/* ---- 错误状态 ---- */
.game-error-state {
  text-align: center; padding: 60px 20px;
  animation: viewIn .5s var(--ease-out-quint) both;
}
.game-error-icon { font-size: 56px; margin-bottom: 16px; animation: petBreathe 2s ease-in-out infinite; }
.game-error-state p { color: var(--ink-2); font-size: 15px; margin-bottom: 20px; }
.btn-retry-game {
  border: none; background: var(--primary); color: #fff; padding: 12px 32px;
  border-radius: var(--r-full); font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: inherit; box-shadow: var(--shadow-md); transition: transform .2s var(--ease-spring);
}
.btn-retry-game:active { transform: scale(.92); }

/* ---- 沉浸式宠物 Hero ---- */
.game-hero-v2 {
  border-radius: var(--r-2xl); padding: 24px 20px 18px; margin-bottom: 16px;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #FFF0D9 0%, #FFE0C0 40%, #FFD4B0 100%);
  border: 1px solid rgba(255, 138, 61, 0.15);
  box-shadow: var(--shadow-md);
  animation: viewIn .6s var(--ease-out-quint) both;
}
.game-hero-v2.mood-ecstatic { background: linear-gradient(135deg, #FFF5E0, #FFE8B0, #FFD97D); }
.game-hero-v2.mood-happy { background: linear-gradient(135deg, #FFF0D9, #FFDFB0, #FFCE90); }
.game-hero-v2.mood-neutral { background: linear-gradient(135deg, #F0EEE8, #E8E0D8, #DDD5CC); }
.game-hero-v2.mood-sad { background: linear-gradient(135deg, #E8E5F0, #D5D0E5, #C8C0D8); }
.game-hero-v2.mood-terrible { background: linear-gradient(135deg, #E0D5E0, #D0BBD0, #C0A8C0); }

/* 背景装饰光球 */
.hero-bg-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-bg-orbs .orb {
  position: absolute; border-radius: 50%; filter: blur(20px); opacity: .5;
  animation: orbFloat 8s ease-in-out infinite;
}
.hero-bg-orbs .orb-1 { width: 100px; height: 100px; top: -20px; right: -10px; background: rgba(255,165,61,.3); animation-delay: 0s; }
.hero-bg-orbs .orb-2 { width: 80px; height: 80px; bottom: -10px; left: -20px; background: rgba(255,106,43,.2); animation-delay: -3s; }
.hero-bg-orbs .orb-3 { width: 60px; height: 60px; top: 40%; right: 30%; background: rgba(255,200,100,.15); animation-delay: -5s; }
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(10px, -8px) scale(1.08); }
  66% { transform: translate(-8px, 6px) scale(.94); }
}

.hero-content { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }

/* 宠物舞台 */
.pet-stage-v2 {
  width: 120px; height: 120px; flex-shrink: 0; position: relative;
  display: grid; place-items: center;
}
.pet-stage-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,184,77,.4), rgba(255,106,43,.2), rgba(255,184,77,.4));
  animation: stageRotate 6s linear infinite;
  mask: radial-gradient(circle, transparent 56%, #000 57%);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%);
}
@keyframes stageRotate { to { transform: rotate(360deg); } }
.pet-stage-inner {
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, var(--amber-soft));
  display: grid; place-items: center; position: relative; z-index: 1;
  box-shadow: inset 0 0 24px rgba(255,184,77,.4), 0 8px 20px rgba(242,108,40,.12);
  animation: stageGlow 3s ease-in-out infinite;
}
.pet-stage-inner svg { width: 80px; height: 80px; animation: petBreathe 2.6s ease-in-out infinite; position: relative; z-index: 1; }
.pet-stage-shadow {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 10px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(43,38,51,.12), transparent 70%);
  animation: petShadow 2.6s ease-in-out infinite;
}
@keyframes petShadow {
  0%, 100% { width: 70px; opacity: 1; }
  50% { width: 60px; opacity: .6; }
}

/* 宠物信息 */
.pet-info-v2 { flex: 1; min-width: 0; position: relative; z-index: 1; }
.pet-name-v2 { font-size: 22px; font-weight: 800; color: var(--primary-deep); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pet-badge-lv {
  font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--amber), var(--primary));
  padding: 2px 10px; border-radius: var(--r-full);
  box-shadow: 0 2px 8px rgba(255,106,43,.3);
}
.pet-form-v2 { font-size: 13px; color: var(--ink-2); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.pet-evolve-hint { font-size: 11px; color: var(--primary); background: rgba(255,106,43,.1); padding: 2px 8px; border-radius: var(--r-full); font-weight: 700; }
.pet-evolve-hint.max { color: var(--mint-deep); background: var(--mint-soft); }

/* 经验条 */
.exp-bar-v2 {
  height: 12px; border-radius: 6px; background: rgba(255,255,255,.7); overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.06); position: relative;
}
.exp-bar-v2 i {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--mint), var(--sky));
  background-size: 200% 100%; animation: expSlide 2.4s linear infinite;
  transition: width .8s var(--ease-out-expo);
}
.exp-bar-glow {
  position: absolute; top: 0; height: 100%; width: 8px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  filter: blur(2px); transition: left .8s var(--ease-out-expo);
  pointer-events: none;
}
.exp-text-v2 { font-size: 11px; color: var(--ink-3); margin-top: 6px; font-variant-numeric: tabular-nums; font-weight: 600; }

/* 心情条 */
.mood-bar-v2 {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,138,61,.1);
  position: relative; z-index: 1;
}
.mood-bar-label { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.mood-bar-track {
  height: 8px; border-radius: 4px; background: rgba(255,255,255,.5); overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}
.mood-bar-track i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--rose), var(--amber), var(--mint));
  background-size: 200% 100%;
  transition: width .8s var(--ease-out-expo);
}

/* ---- 宠物互动按钮 ---- */
.pet-actions-v2 { display: flex; gap: 12px; margin-bottom: 20px; }
.pet-btn-v2 {
  flex: 1; border: none; background: var(--card); padding: 16px 8px 14px;
  border-radius: var(--r-lg); cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  box-shadow: var(--shadow-sm); border: 1.5px solid rgba(255,138,61,.08);
  transition: transform .2s var(--ease-spring), box-shadow .25s;
  position: relative; overflow: hidden;
  animation: btnPopIn .4s var(--ease-spring) both;
}
.pet-btn-v2:nth-child(1) { animation-delay: 0s; }
.pet-btn-v2:nth-child(2) { animation-delay: .06s; }
.pet-btn-v2:nth-child(3) { animation-delay: .12s; }
@keyframes btnPopIn { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.pet-btn-v2:not(.disabled):not(.done):active { transform: scale(.93); box-shadow: var(--shadow-xs); }
.pet-btn-v2:not(.disabled):not(.done) { background: linear-gradient(180deg, #fff, #FFFAF0); }
.pet-btn-v2.disabled { opacity: .55; }
.pet-btn-v2.done { opacity: .7; background: var(--mint-soft); }
.pet-btn-icon { font-size: 28px; line-height: 1; transition: transform .25s var(--ease-spring); }
.pet-btn-v2:not(.disabled):active .pet-btn-icon { transform: scale(1.2) rotate(-8deg); }
.pet-btn-label { font-size: 13px; font-weight: 800; color: var(--ink); }
.pet-btn-cd { font-size: 10px; color: var(--ink-3); font-weight: 600; }
.pet-btn-streak { font-size: 10px; color: var(--mint-deep); font-weight: 800; }
.pet-btn-ripple {
  position: absolute; inset: 0; border-radius: var(--r-lg);
  background: radial-gradient(circle at center, rgba(255,106,43,.15), transparent 60%);
  opacity: 0; transform: scale(1); transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.pet-btn-v2.loading .pet-btn-icon { animation: btnSpin .8s linear infinite; }
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* 浮动表情特效 */
.float-emoji-fx {
  position: fixed; font-size: 24px; z-index: 9999; pointer-events: none;
  animation: floatUp 1.4s var(--ease-out-quint) forwards;
}
@keyframes floatUp {
  0% { transform: translate(-50%, 0) scale(.5); opacity: 0; }
  20% { transform: translate(-50%, -20px) scale(1.2); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--drift, 0px)), -80px) scale(.8); opacity: 0; }
}

/* ---- 分段切换器 ---- */
.game-seg {
  display: flex; gap: 0; background: rgba(240,232,222,.9); border-radius: var(--r-full);
  padding: 4px; margin-bottom: 18px; position: relative;
}
.game-seg-indicator {
  position: absolute; top: 4px; left: 4px; width: calc((100% - 8px) / 3);
  height: calc(100% - 8px); border-radius: var(--r-full);
  background: #fff; box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease-out-quint);
}
.game-seg-btn {
  flex: 1; border: none; background: transparent; padding: 10px 0; font-size: 13px;
  border-radius: var(--r-full); color: var(--ink-2); cursor: pointer; font-family: inherit;
  transition: color .28s; font-weight: 700; position: relative; z-index: 1;
}
.game-seg-btn.active { color: var(--primary-deep); }

/* ---- 积分面板 v2 ---- */
.game-body-v2 { animation: viewIn .4s var(--ease-out-quint) both; }

.points-card-v2 {
  background: linear-gradient(135deg, #FFF5E5, #FFF8F0); border-radius: var(--r-xl);
  padding: 24px; box-shadow: var(--shadow-sm); margin-bottom: 16px;
  display: flex; align-items: center; gap: 20px;
  border: 1px solid rgba(255,165,61,.1);
  animation: itemIn .5s var(--ease-out-quint) both;
}
.points-ring-wrap { position: relative; width: 100px; height: 100px; flex-shrink: 0; }
.points-ring { width: 100%; height: 100%; }
.points-ring circle { transition: stroke-dashoffset 1s var(--ease-out-expo); }
.points-ring-center {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
}
.points-num { font-size: 26px; font-weight: 800; color: var(--primary-deep); line-height: 1; }
.points-label { font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.points-stats-v2 { flex: 1; display: flex; align-items: center; gap: 14px; }
.ps-item { text-align: center; flex: 1; }
.ps-value { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.ps-label { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.ps-divider { width: 1px; height: 36px; background: var(--line-strong); }

.section-title-v2 {
  font-size: 15px; font-weight: 800; color: var(--ink); margin: 18px 0 10px;
  display: flex; align-items: center; gap: 6px;
}
.section-title-v2::before {
  content: ""; width: 4px; height: 16px; border-radius: 2px;
  background: linear-gradient(180deg, var(--primary), var(--amber));
}

/* 积分日志 */
.log-item-v2 {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  background: var(--card); border-radius: var(--r-md); margin-bottom: 8px;
  box-shadow: var(--shadow-xs); border: 1px solid rgba(255,255,255,.6);
  animation: itemIn .4s var(--ease-out-quint) both;
  animation-delay: calc(var(--li, 0) * 0.05s);
  transition: transform .2s var(--ease-spring);
}
.log-item-v2:active { transform: scale(.97); }
.log-icon-v2 {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 14px; font-weight: 800;
}
.log-icon-v2.gain { background: var(--mint-soft); color: var(--mint-deep); }
.log-icon-v2.loss { background: var(--rose-soft); color: var(--rose); }
.log-info-v2 { flex: 1; min-width: 0; }
.log-text-v2 { font-size: 14px; font-weight: 700; color: var(--ink); }
.log-time-v2 { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.log-amount-v2 { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.log-amount-v2.gain { color: var(--mint-deep); }
.log-amount-v2.loss { color: var(--rose); }

/* ---- 排行榜 v2 ---- */
.rank-summary-v2 {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #FFF2E2, #FFF8EE); border-radius: var(--r-lg);
  padding: 18px 22px; box-shadow: var(--shadow-sm); margin-bottom: 16px;
  animation: itemIn .5s var(--ease-out-quint) both;
}
.rs-label { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.rs-value { font-size: 24px; font-weight: 800; color: var(--primary-deep); }

/* 领奖台 v2 */
.podium-v2 {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 10px; padding: 24px 8px 12px; margin-bottom: 18px;
  position: relative;
}
.podium-v2::before {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(180deg, transparent, rgba(255,165,61,.06));
  border-radius: var(--r-xl); pointer-events: none;
}
.podium-item-v2 {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; max-width: 100px; position: relative;
  animation: podiumRise .6s var(--ease-spring) both;
}
.podium-item-v2.p1 { animation-delay: 0s; }
.podium-item-v2.p2 { animation-delay: .12s; }
.podium-item-v2.p3 { animation-delay: .24s; }
.podium-crown {
  font-size: 20px; margin-bottom: 2px; opacity: 0; transform: translateY(8px);
  transition: all .5s var(--ease-spring) .3s;
}
.podium-crown.show { opacity: 1; transform: translateY(0); animation: crownBob 2s ease-in-out infinite .8s; }
@keyframes crownBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.podium-avatar-v2 {
  border-radius: 50%; border: 3px solid #fff;
  display: grid; place-items: center; font-weight: 800;
  box-shadow: var(--shadow-md); margin-bottom: 6px; position: relative;
}
.podium-avatar-v2.gold { width: 58px; height: 58px; font-size: 23px; border-color: #FFD27D; box-shadow: 0 8px 24px rgba(255,210,125,.45); }
.podium-avatar-v2.silver { width: 48px; height: 48px; font-size: 19px; border-color: #D0D0D0; box-shadow: 0 6px 18px rgba(208,208,208,.35); }
.podium-avatar-v2.bronze { width: 42px; height: 42px; font-size: 17px; border-color: #E0A070; box-shadow: 0 5px 14px rgba(224,160,112,.3); }
.podium-medal-v2 { font-size: 22px; position: absolute; top: -10px; right: -6px; }
.podium-name-v2 { font-size: 12px; font-weight: 700; color: var(--ink-2); text-align: center; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-pts-v2 { font-size: 14px; font-weight: 800; color: var(--primary-deep); margin-top: 2px; }
.podium-pts-v2 small { font-size: 10px; color: var(--ink-3); font-weight: 600; }
.podium-stand-v2 {
  border-radius: var(--r-sm) var(--r-sm) 0 0; margin-top: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #fff;
}
.podium-stand-v2.p1 { height: 52px; background: linear-gradient(180deg, #FFE19A, #FFB84D, #FF9A3D); width: 72px; box-shadow: 0 4px 16px rgba(255,184,77,.3); }
.podium-stand-v2.p2 { height: 36px; background: linear-gradient(180deg, #E0E0E0, #B8B8B8); width: 64px; }
.podium-stand-v2.p3 { height: 26px; background: linear-gradient(180deg, #E8B888, #B07040); width: 56px; }
.podium-empty { padding: 20px 0; }

/* 排行列表 */
.rank-item-v2 {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  background: var(--card); border-radius: var(--r-md); margin-bottom: 8px;
  box-shadow: var(--shadow-xs); border: 1px solid rgba(255,255,255,.6);
  animation: itemIn .4s var(--ease-out-quint) both;
  animation-delay: calc(var(--ri, 0) * 0.05s);
  transition: transform .2s var(--ease-spring);
}
.rank-item-v2:active { transform: scale(.97); }
.rank-no-v2 {
  width: 32px; text-align: center; font-weight: 800; font-size: 18px; color: var(--ink-4); flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.rank-item-v2:nth-child(1) .rank-no-v2 { color: #F7B500; }
.rank-item-v2:nth-child(2) .rank-no-v2 { color: #A8A9AD; }
.rank-item-v2:nth-child(3) .rank-no-v2 { color: #CD7F32; }
.rank-item-v2.me { border: 1.5px solid var(--primary); box-shadow: 0 0 0 3px rgba(255,106,43,.08), var(--shadow-sm); background: linear-gradient(135deg, #FFF8F0, #fff); }
.rank-item-v2 .avatar { width: 42px; height: 42px; font-size: 17px; }
.rank-name-v2 { flex: 1; font-weight: 700; font-size: 14px; }
.rank-me-tag { font-size: 11px; color: #fff; background: var(--primary); padding: 1px 6px; border-radius: var(--r-full); margin-left: 6px; }
.rank-pts-wrap { text-align: right; min-width: 60px; }
.rank-pts-v2 { font-weight: 800; color: var(--primary-deep); font-size: 15px; font-variant-numeric: tabular-nums; }
.rank-pts-v2 small { font-size: 10px; color: var(--ink-4); font-weight: 600; }
.rank-bar-v2 { height: 5px; border-radius: 3px; background: var(--line); margin-top: 4px; overflow: hidden; }
.rank-bar-v2 i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--primary), var(--amber)); transition: width .6s var(--ease-out-expo); }
.rank-gain-v2 { font-size: 12px; color: var(--mint-deep); font-weight: 800; }
.rank-gain-v2 small { font-size: 10px; color: var(--ink-3); font-weight: 600; }

/* ---- 成就墙 v2 ---- */
.ach-summary-v2 {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  background: linear-gradient(135deg, #FFF8E8, #FFF5E0); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); margin-bottom: 14px;
  border: 1px solid rgba(255,165,61,.1);
  animation: itemIn .5s var(--ease-out-quint) both;
}
.ach-summary-ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.ach-summary-ring svg { width: 100%; height: 100%; }
.ach-summary-ring circle { transition: stroke-dashoffset 1s var(--ease-out-expo); }
.ach-ring-center {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 16px; font-weight: 800; color: var(--amber); line-height: 1;
}
.ach-ring-center small { font-size: 10px; color: var(--ink-3); }
.ach-summary-text { flex: 1; }
.ach-summary-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.ach-summary-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

.ach-rarity-bar-v2 {
  display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
}
.ach-rarity-chip-v2 {
  display: flex; align-items: center; gap: 5px; padding: 5px 12px;
  border-radius: var(--r-full); font-size: 12px; font-weight: 700;
  background: var(--card); box-shadow: var(--shadow-xs);
  animation: itemIn .4s var(--ease-out-quint) both;
}
.ach-rarity-chip-v2 .rarity-dot { width: 8px; height: 8px; border-radius: 50%; }
.ach-rarity-chip-v2.rarity-common .rarity-dot { background: #90a4ae; }
.ach-rarity-chip-v2.rarity-rare .rarity-dot { background: #42a5f5; }
.ach-rarity-chip-v2.rarity-epic .rarity-dot { background: #ab47bc; }
.ach-rarity-chip-v2.rarity-legendary .rarity-dot { background: #ffb300; box-shadow: 0 0 8px rgba(255,179,0,.5); }
.ach-rarity-chip-v2 .rarity-text { color: var(--ink-2); }
.ach-rarity-chip-v2 .rarity-count-v2 { color: var(--ink-3); font-variant-numeric: tabular-nums; }

.ach-grid-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; }
.ach-cell-v2 {
  border-radius: var(--r-md); padding: 14px 8px 12px; text-align: center;
  background: var(--card); position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--shadow-xs);
  animation: achCellIn .5s var(--ease-spring) both;
  animation-delay: calc(var(--ai, 0) * 0.04s);
  transition: transform .2s var(--ease-spring);
}
@keyframes achCellIn { from { transform: scale(.8) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.ach-cell-v2:active { transform: scale(.92); }
.ach-cell-v2.unlocked { background: linear-gradient(135deg, #FFFDF5, #FFF8E8); }
.ach-cell-v2.locked { opacity: .75; }
.ach-cell-v2.locked::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  background-size: 200% 100%; animation: shimmer 3s linear infinite;
  pointer-events: none;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ach-cell-icon-v2 {
  font-size: 28px; line-height: 1; margin-bottom: 8px;
  display: inline-block; transition: transform .25s var(--ease-spring);
}
.ach-cell-v2:active .ach-cell-icon-v2 { transform: scale(1.22) rotate(-8deg); }
.ach-cell-v2.locked .ach-cell-icon-v2 { filter: grayscale(1) opacity(.4); }
.ach-cell-v2.unlocked .ach-cell-icon-v2 { animation: iconGlow 2s ease-in-out infinite; }
@keyframes iconGlow { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 2px 6px rgba(255,165,61,.3)); } }
.ach-cell-name-v2 { font-size: 12px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.ach-cell-v2.locked .ach-cell-name-v2 { color: var(--ink-3); }
.ach-cell-rarity-v2 { font-size: 10px; font-weight: 800; margin-bottom: 6px; }
.ach-cell-done { font-size: 10px; color: var(--mint-deep); font-weight: 800; }
.ach-cell-progress-v2 { height: 5px; border-radius: 3px; background: var(--line); margin-top: 4px; overflow: hidden; }
.ach-cell-progress-v2 i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--primary), var(--amber)); transition: width .8s var(--ease-out-expo); }
.ach-cell-remain-v2 { font-size: 9px; color: var(--ink-3); margin-top: 4px; }

/* ---- 暗色模式 v2 ---- */
:root[data-theme="dark"] .game-hero-v2,
:root:not([data-theme="light"]) .game-hero-v2 { border-color: rgba(255,138,77,.12); }
:root[data-theme="dark"] .pet-btn-v2,
:root:not([data-theme="light"]) .pet-btn-v2 { background: var(--card); border-color: rgba(255,138,77,.1); }
:root[data-theme="dark"] .pet-btn-v2:not(.disabled):not(.done),
:root:not([data-theme="light"]) .pet-btn-v2:not(.disabled):not(.done) { background: linear-gradient(180deg, var(--card), var(--bg-2)); }
:root[data-theme="dark"] .game-seg,
:root:not([data-theme="light"]) .game-seg { background: rgba(40,36,50,.9); }
:root[data-theme="dark"] .game-seg-indicator,
:root:not([data-theme="light"]) .game-seg-indicator { background: var(--card); }
:root[data-theme="dark"] .points-card-v2,
:root:not([data-theme="light"]) .points-card-v2 { background: linear-gradient(135deg, var(--bg-2), var(--card)); border-color: var(--line); }
:root[data-theme="dark"] .rank-summary-v2,
:root:not([data-theme="light"]) .rank-summary-v2 { background: linear-gradient(135deg, var(--bg-2), var(--card)); }
:root[data-theme="dark"] .ach-summary-v2,
:root:not([data-theme="light"]) .ach-summary-v2 { background: linear-gradient(135deg, var(--bg-2), var(--card)); border-color: var(--line); }
:root[data-theme="dark"] .log-item-v2,
:root:not([data-theme="light"]) .log-item-v2,
:root[data-theme="dark"] .rank-item-v2,
:root:not([data-theme="light"]) .rank-item-v2,
:root[data-theme="dark"] .ach-cell-v2,
:root:not([data-theme="light"]) .ach-cell-v2 { background: var(--card); border-color: var(--line); }
:root[data-theme="dark"] .ach-rarity-chip-v2,
:root:not([data-theme="light"]) .ach-rarity-chip-v2 { background: var(--bg-2); }