/* ============================================================
   星海音乐 Web · responsive.css（v6.21 · 从 style.css 结构化拆分）
   内容：≤920px 基础响应式（竖屏平板布局）
   ⚠ 级联顺序即加载顺序（app.html 按本文件在链中的位置引入），
     调整 @media / 覆盖关系时请保持文件间相对顺序不变。
   ============================================================ */

/* ================= 响应式 ================= */
@media (max-width: 920px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .sidebar {
    grid-row: auto;
    flex-direction: row;
    align-items: center;
    padding: 10px 14px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .logo { padding: 0 12px 0 0; font-size: 17px; }
  .nav { flex-direction: row; gap: 6px; }
  .nav-item { padding: 8px 12px; font-size: 13px; }
  .sidebar-foot { display: none; }
  .player-bar { grid-column: 1; }
  .pb-right { display: none; }
  .player-bar { grid-template-columns: minmax(0, 1fr); }
  .pb-left { display: none; }
  .song-row { grid-template-columns: 38px minmax(0, 1fr) 64px 92px; }
  .col-src { display: none; }
  .lyric-panel { width: 100vw; bottom: 0; z-index: 80; }
  /* 【v6.12】搜索框 + 平台选择同一行（旧版 flex-wrap 分两行）
     【v6.13】整行合并为一块连续条：去间隙、接缝两侧去直角，中间仅一道发丝分隔线 */
  .topbar { flex-wrap: nowrap; gap: 0; }
  .search-box { min-width: 0; border-radius: 13px 0 0 13px; border-right: none; }
  /* 手机端：除发现页外隐藏搜索顶栏 */
  body[data-view]:not([data-view="discover"]) .topbar { display: none; }
  body[data-view]:not([data-view="discover"]) .view { padding-top: 4px; }
  .selectors { width: auto; flex: none; gap: 0; }
  .selectors select { flex: none; max-width: 118px; border-radius: 0 13px 13px 0; border-left: none; }
  /* 【v6.29.4】自绘下拉镜像同款拼接条样式（右段去左圆角/左边框） */
  .selectors .xsel-btn { flex: none; max-width: 118px; border-radius: 0 13px 13px 0; border-left: none; }
  /* 正在播放视图：移动端单列 */
  .np-stage { grid-template-columns: 1fr; gap: 22px; }
  .np-left { position: static; }
  .np-cover-wrap, .np-cover-ring { width: 220px; height: 220px; }
  .np-cover, .np-cover-fallback { width: 140px; height: 140px; }
  .np-cover-fallback .icon { width: 44px; height: 44px; }
  .np-name { font-size: 21px; white-space: normal; }
  .np-lyric { height: 200px; }
}
@media (max-width: 560px) {
  .np-actions { flex-wrap: wrap; }
  .btn-download { width: 100%; justify-content: center; }
}