/**
 * 全站移动端 UI 优化补丁
 * 所有页面通用 + 各页面特定修复
 */

/* ════════ 通用导航优化 ════════ */
@media (max-width: 768px) {
  .top-nav {
    padding: 8px 12px !important;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .nav-links {
    gap: 2px !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .nav-link {
    font-size: 11px !important;
    padding: 5px 7px !important;
    letter-spacing: 0.02em !important;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
  .user-greeting {
    font-size: 11px;
    width: 100%;
    text-align: center;
    margin-bottom: 2px;
  }

  /* 通用页面标题缩小 */
  .timeline-title, .album-title, .capsule-title, .preface-title,
  .main-title, h1[style*="Ma Shan Zheng"], .section-title {
    font-size: 28px !important;
    letter-spacing: 0.08em !important;
  }
  .timeline-subtitle, .album-subtitle, .capsule-subtitle,
  .preface-subtitle, .subtitle {
    font-size: 11px !important;
  }

  /* 通用页面包装器 */
  .timeline-wrap, .album-wrap, .capsule-wrap, .preface-wrap,
  .roster-wrap, .panorama-wrap {
    padding: 68px 16px 80px !important;
  }

  /* 通用卡片 */
  .card {
    margin-bottom: 12px !important;
    border-radius: 8px !important;
  }
  .card-body { padding: 14px !important; }
  .card-header { padding: 12px 14px !important; }

  /* 按钮触摸优化 */
  .btn, button {
    min-height: 40px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .create-btn {
    padding: 10px 24px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .top-nav {
    padding: 6px 8px !important;
  }
  .nav-link {
    font-size: 10px !important;
    padding: 4px 5px !important;
  }
  .timeline-title, .album-title, .capsule-title, .preface-title,
  .main-title {
    font-size: 24px !important;
  }
  .timeline-wrap, .album-wrap, .capsule-wrap, .preface-wrap,
  .roster-wrap, .panorama-wrap {
    padding: 60px 12px 80px !important;
  }
}

/* ════════ 全局音乐播放器移动端 ════════ */
@media (max-width: 640px) {
  .gm-bar {
    bottom: 12px !important;
    min-width: 200px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 8px 12px !important;
  }
  .gm-bar-title { max-width: 120px !important; font-size: 12px !important; }
  .gm-bar-play { width: 32px !important; height: 32px !important; font-size: 14px !important; }
  .gm-panel {
    bottom: 64px !important;
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 100px) !important;
    border-radius: 14px !important;
  }
  .gm-controls { gap: 8px !important; padding: 10px 16px 6px !important; }
  .gm-ctrl-btn { width: 32px !important; height: 32px !important; font-size: 13px !important; }
  .gm-ctrl-btn.gm-play-btn { width: 40px !important; height: 40px !important; }
  .gm-list { max-height: 200px !important; }
}

/* ════════ 学生个人页音乐播放器移动端 ════════ */
@media (max-width: 640px) {
  .student-music-player {
    left: 10px !important;
    bottom: 64px !important;
    min-width: 180px !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 12px !important;
  }
  .smp-header { padding: 8px 10px !important; }
  .smp-btn { width: 28px !important; height: 28px !important; font-size: 12px !important; }
  .smp-title { font-size: 11px !important; }
  .smp-item { padding: 5px 10px !important; font-size: 11px !important; }
  .smp-list { max-height: 120px !important; }
}