.page-switch-enter-active,
.page-switch-leave-active {
  position: absolute;
  inset: 0;
  width: 100%;
  background: transparent;
  transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1), transform 260ms cubic-bezier(0.2, 0, 0, 1);
}

.page-switch-enter-from {
  opacity: 0;
  transform: translateY(18px);
}

.page-switch-enter-to,
.page-switch-leave-from {
  opacity: 1;
  transform: translateY(0);
}

.page-switch-leave-to {
  opacity: 0;
  transform: translateY(-14px);
}

.sb-card-slide-enter-active {
  transition: opacity 260ms cubic-bezier(0.2, 0, 0, 1),
              transform 260ms cubic-bezier(0.2, 0, 0, 1);
}
.sb-card-slide-leave-active {
  position: absolute;
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1),
              transform 200ms cubic-bezier(0.2, 0, 0, 1);
}
.sb-card-slide-enter-from {
  opacity: 0;
  transform: translateY(18px);
}
.sb-card-slide-leave-to {
  opacity: 0;
  transform: translateY(-14px);
}
.sb-card-slide-move {
  transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
}

/* ── 页面切换期间的毛玻璃处理 ──
   page-switch 淡入会让页面根元素 opacity < 1，按规范这会形成 backdrop root，
   切换期间页面内元素的 backdrop-filter 采样不到页面背后的真实背景（模糊失效）。
   切换期间只把模糊归零，背景保持最终透明度，避免先实心再变透明。 */
.page-switch-enter-active .sb-card-item.glass,
.page-switch-leave-active .sb-card-item.glass,
.page-switch-enter-active .sb-stat-chip.glass,
.page-switch-leave-active .sb-stat-chip.glass,
.page-switch-enter-active .social-find-hero-panel,
.page-switch-leave-active .social-find-hero-panel,
.page-switch-enter-active .auto-join-panel,
.page-switch-leave-active .auto-join-panel {
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
}

.auto-join-panel,
.settings-shell,
.settings-sidebar,
.social-find-hero-panel {
  transition: backdrop-filter 200ms ease-out, -webkit-backdrop-filter 200ms ease-out;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.rotating {
  animation: rotate 1.5s linear infinite;
}

@keyframes slideInUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}