/* ===== responsive ===== */
@media (max-width: 1280px) {
  :root { --sidebar-w: 300px; }
}
@media (max-width: 1100px) {
  .rightbar { --rightbar-w: 300px; width: 300px; }
  .browse-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
  .tl-head, .track-row { grid-template-columns: [index] 24px [first] minmax(180px, 6fr) [album] minmax(120px, 4fr) [last] minmax(80px, 1fr); }
  .tr-date, .tl-head .tl-date { display: none; }
}
@media (max-width: 1000px) {
  .rightbar { display: none !important; }
}
@media (max-width: 900px) {
  :root { --sidebar-w: 76px; --sidebar-w-min: 76px; }
  .sidebar__nav-item span, .sidebar__nav-logo span, .lib__title span, .lib__chips, .lib__tools, .lib__list { display: none; }
  .sidebar__nav-item { justify-content: center; padding: 14px 0; gap: 0; }
  .sidebar__nav { padding: 8px 4px; }
  .lib__head { flex-direction: column; padding: 8px 4px; gap: 2px; }
  .lib__title { justify-content: center; padding: 8px; gap: 0; }
  .lib__head-actions { margin-left: 0; flex-direction: column; }
  .sidebar.collapsed { width: 76px; min-width: 76px; }
  .sidebar__lib { display: none; }
  .sidebar > .rail { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; flex: 1; overflow-y: auto; scrollbar-width: none; background: var(--bg-panel); border-radius: var(--panel-radius); }
  .sidebar > .rail::-webkit-scrollbar { display: none; }
  .detail-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
  .detail-hero__img { width: 180px; height: 180px; }
  .topbar { padding: 16px 20px; gap: 8px; }
  .shelf__head, .shelf__scroll, .greeting-grid, .home-greeting, .search-wrap,
  .browse-grid, .topresult-grid, .search-chips, .detail-hero, .detail-actions,
  .tracklist, .queue-wrap, .lib-view, .genre-view, .popular-head, .artist-about, .artist-hero { padding-left: 20px; padding-right: 20px; }
  .topresult-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .tl-head, .track-row { grid-template-columns: [index] 20px [first] minmax(140px, 1fr) [last] minmax(70px, auto); gap: 10px; }
  .tr-album, .tl-head .tl-album { display: none; }
  .np__right .ctl-btn.hide-sm { display: none; }
  .np__vol { width: 90px; }
  .np__left { min-width: 130px; }
  .np__right { min-width: 0; }
  .pill-btn.hide-sm { display: none; }
  .topbar__search { width: 100%; }
  .footer__cols { gap: 24px; }
  .home-greeting h1 { font-size: 24px; }
  .detail-hero__title { font-size: 2rem; }
}
@media (max-width: 500px) {
  .np__center { gap: 4px; }
  .np__time { display: none; }
  .np__vol { display: none; }
  .greeting-grid { grid-template-columns: 1fr 1fr; }
  .greeting-card span { font-size: 13px; }
  .browse-tile { font-size: 18px; }
}