/* ==========================================================================
   ═══ 手机端整体精致化（M3 2025 · 酷安式底部导航）═══
   仅覆盖视觉样式，不改结构/交互逻辑；仅在 ≤768px 生效。
   ========================================================================== */
@media (max-width: 768px) {

  /* ---------- 底部导航：酷安液态玻璃胶囊版（滑动胶囊 · 玻璃质感 · 悬浮阴影） ---------- */
  .mobile-tabbar {
    position: relative;
    height: calc(62px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--md-sys-color-surface-container, #f3edf7) 78%, transparent);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    box-shadow: 0 -0.5px 0 color-mix(in srgb, var(--md-sys-color-outline-variant, #cac4d0) 45%, transparent);
  }
  /* 滑动胶囊：液态玻璃质感，切换时横向平滑滑动（由 JS 驱动 left） */
  .tri-tab-pill {
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 0;
    width: 20%;
    border-radius: 22px;
    background: linear-gradient(150deg,
      color-mix(in srgb, var(--md-sys-color-surface-container-highest, #ece6f0) 88%, white 12%),
      color-mix(in srgb, var(--md-sys-color-surface-container-highest, #ece6f0) 66%, white 34%));
    -webkit-backdrop-filter: blur(22px) saturate(200%);
    backdrop-filter: blur(22px) saturate(200%);
    border: 1px solid color-mix(in srgb, var(--md-sys-color-surface-container-highest, #ece6f0) 72%, white 28%);
    box-shadow:
      0 3px 12px color-mix(in srgb, var(--md-sys-color-on-surface, #1d1b20) 10%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--md-sys-color-on-surface, #1d1b20) 7%, white 40%);
    transition: left 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
    pointer-events: none;
  }
  .mobile-tab {
    position: relative;
    gap: 3px;
    font-size: 11px;
    letter-spacing: 0.2px;
    color: var(--md-sys-color-on-surface-variant, #49454f);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.3s ease;
    z-index: 1;
  }
  .mobile-tab i,
  .mobile-tab span {
    position: relative;
    z-index: 1;
  }
  .mobile-tab i {
    font-size: 23px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
  }
  .mobile-tab span {
    transition: color 0.3s ease;
  }
  .mobile-tab.is-active {
    color: var(--md-sys-color-primary, #6750a4);
    font-weight: 600;
  }
  .mobile-tab.is-active i {
    color: var(--md-sys-color-primary, #6750a4);
    transform: translateY(-1px) scale(1.08);
  }
  .mobile-tab.is-active span {
    color: var(--md-sys-color-primary, #6750a4);
  }
  /* 按压光晕（酷安液态玻璃按压效果：柔光，非扩散圆） */
  .mobile-tab:active {
    background: color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 9%, transparent);
  }
  .mobile-tab .tab-ripple {
    position: absolute;
    border-radius: 50%;
    background: color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 26%, transparent);
    opacity: 0.2;
    transform: scale(0);
    animation: tri-tab-ripple 0.55s ease-out forwards;
    pointer-events: none;
    z-index: 0;
  }
  @keyframes tri-tab-ripple {
    to {
      transform: scale(2.4);
      opacity: 0;
    }
  }
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }

  /* ---------- 个人资料卡：个人主页化（无 banner 时居中） ---------- */
  .profile-card:not(.has-banner) {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 22px 16px 18px;
  }
  .profile-card:not(.has-banner) .profile-avatar {
    width: 88px;
    height: 88px;
    border: 3px solid var(--md-sys-color-surface-container-lowest, #fff);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 24%, transparent);
  }
  .profile-card:not(.has-banner) .profile-info {
    flex-basis: auto;
    justify-content: center;
  }
  .profile-card:not(.has-banner) .profile-top {
    flex-basis: auto;
    justify-content: center;
    gap: 8px;
  }
  .profile-card:not(.has-banner) .profile-bio {
    margin: 2px 0 0;
    text-align: center;
    max-width: 100%;
  }
  .profile-card:not(.has-banner) .profile-extras {
    align-items: center;
    text-align: center;
  }
  .profile-card:not(.has-banner) .profile-stats {
    justify-content: center;
    gap: 30px;
    margin-top: 8px;
  }
  .profile-card:not(.has-banner) .profile-stat {
    flex-direction: column;
    align-items: center;
    gap: 1px;
  }
  .profile-card:not(.has-banner) .profile-stat b {
    font-size: 18px;
    font-weight: 700;
  }
  .profile-card:not(.has-banner) .profile-actions {
    margin-left: 0;
    margin-bottom: 0;
  }

  /* banner 布局：头像半叠更精致（白描边 + 阴影提升质感） */
  .profile-card.has-banner .profile-avatar {
    top: -44px;
    left: 18px;
    width: 80px;
    height: 80px;
    border: 3px solid var(--md-sys-color-surface-container-lowest, #fff);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  }
  .profile-card.has-banner .profile-info {
    margin-left: 100px;
    margin-top: -12px;
  }
  .profile-card.has-banner .profile-bio {
    margin-left: 100px;
    font-size: 13px;
  }
  .profile-card.has-banner .profile-name {
    font-size: 20px;
  }
  /* 统计：数字 + 标签竖排（App 主页式） */
  .profile-stat {
    flex-direction: column;
    align-items: center;
    gap: 1px;
  }
  .profile-stat b {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
  }
  .profile-stat em {
    font-size: 10.5px;
    letter-spacing: 0.2px;
  }
  .profile-stats {
    gap: 24px;
    align-items: center;
  }

  /* ---------- 说说卡片：精致排版（保持无背景 + 细分割线） ---------- */
  .moment-card,
  .post-fuse-card {
    padding: 16px 2px;
    border-bottom-color: color-mix(in srgb, var(--md-sys-color-outline-variant, #cac4d0) 32%, transparent);
  }
  .mc-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }
  .mc-meta {
    gap: 8px;
  }
  .mc-name {
    font-size: 15px;
    font-weight: 700;
  }
  .mc-time {
    font-size: 12px;
  }
  .mc-text {
    font-size: 15px;
    line-height: 1.7;
    margin: 8px 0 10px;
  }
  .mc-actions {
    margin-top: 6px;
  }
  .mc-act {
    padding: 6px 12px;
    font-size: 12.5px;
    gap: 6px;
    border-radius: 999px;
  }
  .mc-act i {
    font-size: 17px;
  }
  .mc-act.liked {
    color: var(--md-sys-color-error, #b3261e);
  }
  .mc-act.liked i {
    font-weight: 700;
  }
  /* 媒体卡片大圆角统一 */
  .mc-music,
  .mc-video,
  .mc-live,
  .mc-bili {
    border-radius: 16px;
  }

  /* ---------- 文章卡片：移动端更紧凑精致 ---------- */
  .post-card {
    gap: 14px;
    padding: 13px 0;
  }
  .post-thumb {
    flex: 0 0 32%;
    height: 96px;
    border-radius: 14px;
  }
  .post-body {
    height: 96px;
  }
  .post-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    margin: 1px 0 5px;
    -webkit-line-clamp: 2;
  }
  .post-excerpt {
    font-size: 13px;
    line-height: 1.55;
    -webkit-line-clamp: 2;
  }

  /* ---------- 悬浮按钮组：M3 圆角 FAB 质感 ---------- */
  .tri3-fab-stack .fab-btn,
  .fab-btn {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    font-size: 20px;
  }

  /* ---------- 首页菜单 chips 微调：统一高度、更紧 ---------- */
  .home-menu-item {
    min-height: 34px;
    padding: 0 16px;
    font-size: 13.5px;
  }
  .home-menu-inner {
    gap: 8px;
  }

  /* ---------- 列表卡片入场动效（stagger 已由 tri3-reveal 驱动） ---------- */
  .tri3-reveal {
    will-change: opacity, transform;
  }
}