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

  /* ---------- 底部导航：iOS 26 液态玻璃悬浮胶囊 Dock（App Store 式 · 深 blur + 多层 3D 阴影） ---------- */
  .mobile-tabbar {
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 95;
    width: max-content;
    max-width: calc(100vw - 20px);
    height: 62px;
    padding: 0 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--md-sys-color-surface-container, #f3edf7) 76%, transparent);
    backdrop-filter: blur(50px) saturate(200%);
    -webkit-backdrop-filter: blur(50px) saturate(200%);
    border: 1px solid color-mix(in srgb, #ffffff 52%, transparent);
    box-shadow:
      0 40px 80px -20px color-mix(in srgb, var(--md-sys-color-on-surface, #1d1b20) 24%, transparent),
      0 10px 30px -10px color-mix(in srgb, var(--md-sys-color-on-surface, #1d1b20) 16%, transparent),
      inset 0 2px 3px -1px color-mix(in srgb, #ffffff 68%, transparent),
      inset 0 -2px 4px -1px color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 8%, transparent),
      inset 0 0 0 1px color-mix(in srgb, #ffffff 28%, transparent);
  }
  /* 选中光晕：酷安液态玻璃式 —— 主色柔边渐变光斑（无硬边胶囊，中心亮边缘淡出） */
  .tri-tab-pill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 52px;
    border-radius: 999px;
    background:
      radial-gradient(125% 130% at 50% 44%,
        color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 36%, transparent) 0%,
        color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 13%, transparent) 52%,
        color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 5%, transparent) 74%,
        transparent 100%);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    box-shadow:
      0 0 20px color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 22%, transparent),
      inset 0 2px 3px -1px color-mix(in srgb, #ffffff 55%, transparent),
      inset 0 -2px 4px -1px color-mix(in srgb, #ffffff 22%, transparent);
    transition: left 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
    pointer-events: none;
  }
  .mobile-tab {
    position: relative;
    gap: 3px;
    min-width: 58px;
    padding: 0 6px;
    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;
  }
  /* 点击动效：酷安液态玻璃式 —— 按压时该区域光晕渲染（spotlight 柔光），无 MD3 挤压 */
  .mobile-tab i {
    font-size: 23px;
    transition: color 0.3s ease;
    will-change: transform;
  }
  .mobile-tab span {
    transition: color 0.3s ease;
  }
  .mobile-tab:active {
    background: radial-gradient(circle at center,
      color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 13%, transparent) 0%,
      transparent 72%);
  }
  .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);
  }
  .mobile-tab.is-active span {
    color: var(--md-sys-color-primary, #6750a4);
  }
  .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(98px + 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;
  }
}