/* 聆听 · 音乐 - 仿网易云音乐 web 版(第三轮布局整改:全宽顶栏 + 独立 tab 行 + 横向滑动轮播 + 整页歌曲详情,播放条精简) */
* { box-sizing: border-box; margin: 0; }

/* [hidden] 兜底:当元素显式写了 display(如 .song-page 的 flex、.badge 的 inline-flex),
   HTML 的 hidden 属性会被覆盖导致元素误显示;用 !important 强制隐藏,保证 hidden 始终生效 */
[hidden] { display: none !important; }

:root {
  /* ---------- 颜色 token(三层背景:侧栏/顶栏 bg0 / 主区 bg1 / 卡片与播放条 bg2) ---------- */
  --bg0: #0d0f13;                  /* 顶栏 / 侧栏 / 页面底层 */
  --bg1: #12151b;                  /* 主区 */
  --bg2: #171b22;                  /* 卡片 / 面板 / 播放条 */
  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.16);   /* hover 边框 */
  --red: #c2212f;
  --red-hover: #d6303f;
  --text: #dfe3e8;
  --muted: #98a0ab;
  --pink: #f08fa8;
  --err: #ff7b7b;
  --skel: #1d2027;

  /* ---------- 字号标尺 ---------- */
  --t0: 11px;
  --t1: 12px;
  --t2: 14px;
  --t3: 16px;
  --t4: 20px;
  --t5: 26px;

  /* ---------- 间距标尺 ---------- */
  --gap-s: 8px;
  --gap-m: 14px;
  --gap-l: 20px;

  /* ---------- 圆角:卡片 8 / 按钮·输入 6 / 侧栏块·面板 10 ---------- */
  --radius: 8px;
  --radius-s: 6px;
  --radius-l: 10px;

  /* ---------- 阴影(仅卡片 hover 与播放条两级) ---------- */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.5);

  /* ---------- 尺寸 ---------- */
  --player-h: 64px;      /* 底部播放条高度 */
  --sidebar-w: 220px;    /* 侧栏宽度 */
  --topbar-h: 60px;      /* 全宽顶栏高度 */
  --song-head-h: 52px;   /* 歌曲详情页面包屑行高度 */
  --header-h: 60px;      /* toast 避让高度(顶栏) */
}

/* body 改为两层 grid:顶栏 / 内容区(侧栏 + 主区);播放条 fixed 在底部;滚动发生在 .content */
body {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg0);
  min-height: 100vh;
  height: 100vh;
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
  /* 兜底:窄屏下任何偶发超宽元素不引发横向滚动/页面被撑破 */
  overflow-x: hidden;
}

/* 焦点可见:键盘操作时给出红色轮廓(网易云强调色) */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ---------- 统一 SVG 图标 ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.ic.lg { width: 20px; height: 20px; }

/* ---------- 全宽顶栏(网易云式):logo 40px + 搜索框 + 播放状态 + 缓存统计 badge ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 31;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  padding: 0 var(--gap-l);
  background: var(--bg0);
  border-bottom: 1px solid var(--line);
}
.topbar-logo { flex: none; width: 40px; display: grid; place-items: center; }
.logo-mark {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.logo-name {
  font-size: var(--t3);
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
}
/* 搜索框:宽 420px,最多占 45%;放大镜图标即提交按钮;focus 红色描边 */
.search {
  flex: 1 1 420px;
  width: 420px;
  max-width: 45%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg2);
  position: relative; /* 搜索联想下拉相对搜索框定位 */
}
/* 搜索联想下拉面板:最多 6 条「歌名 - 歌手」,点击直接播放 */
.search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-2);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 40;
}
.suggest-item {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--t1);
  padding: 6px 8px;
  border-radius: var(--radius-s);
  cursor: pointer;
  text-align: left;
}
.suggest-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--red); }
.suggest-item[aria-selected="true"] { background: rgba(194, 33, 47, 0.12); color: var(--red); }
.search:focus-within { border-color: var(--red); }
.search .search-icon {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 2px;
}
.search .search-icon:hover { color: var(--red); }
.search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--t2);
}
.search input:focus { outline: none; }
.search .search-clear {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 2px;
}
.search .search-clear:hover { color: var(--text); }
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* ---------- 内容区 grid:侧栏(220px) + 主区;滚动在内容区发生,顶栏保持在顶 ---------- */
.content {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 0;
  overflow-y: auto;
}

/* ---------- 侧栏(宽 220px,固定不随内容滚动;<1000px 时折叠为汉堡抽屉,主区占满宽度) ---------- */
.sidebar {
  position: fixed;
  left: 0;
  top: var(--topbar-h);
  bottom: var(--player-h);
  width: var(--sidebar-w);
  background: var(--bg0);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 20;
}
.side-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--gap-m) var(--gap-s);
  scrollbar-width: thin;
  scrollbar-color: var(--line2) transparent;
}
.side-scroll::-webkit-scrollbar { width: 4px; }
.side-scroll::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 2px; }
.side-block { margin-bottom: var(--gap-l); }
.side-title {
  font-size: var(--t1);
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 var(--gap-s);
  letter-spacing: 0.5px;
}
.side-item {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  width: 100%;
  padding: 9px var(--gap-m);
  border: none;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text);
  font-size: var(--t2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.side-item:hover { background: rgba(255, 255, 255, 0.05); }
.side-item:active { transform: translateY(1px); background: rgba(255, 255, 255, 0.08); }
.side-item.active { color: var(--red); background: rgba(194, 33, 47, 0.10); font-weight: 600; }

/* 新建歌单输入 */
.pl-create { display: flex; gap: var(--gap-s); margin: var(--gap-m) 0 var(--gap-s); }
.pl-create input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--bg2);
  color: var(--text);
  font-size: var(--t1);
}
.pl-create input:focus { border-color: var(--red); outline: none; }
.pl-create button {
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius-s);
  background: var(--red);
  color: #fff;
  font-size: var(--t1);
  cursor: pointer;
}
.pl-create button:hover { background: var(--red-hover); }
.pl-create button:active { transform: translateY(1px); background: var(--red-hover); }

/* 侧栏/总览歌单列表:一行 = 40px 小封面 + 名称 + 歌曲数 */
.pl-list { display: flex; flex-direction: column; gap: var(--gap-s); }
.pl-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--gap-s) 10px;
  border-radius: var(--radius-s);
  background: var(--bg2);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 0.15s;
}
.pl-chip:hover { border-color: var(--line2); }
.pl-chip:active { transform: translateY(1px); }
.pl-chip.open { border-color: var(--red); }
.pl-cover { width: 40px; height: 40px; border-radius: var(--radius-s); overflow: hidden; flex: none; }
.pl-cover img { width: 100%; height: 100%; object-fit: cover; }
.pl-cover .cover-ph { width: 100%; height: 100%; border-radius: var(--radius-s); font-size: var(--t3); }
.pl-name {
  flex: 1;
  min-width: 0;
  font-size: var(--t2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pl-count { color: var(--muted); font-size: var(--t1); }

/* 「正在播放」区块 */
.np-head {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-l);
}
.np-cover { width: 48px; height: 48px; border-radius: var(--radius-s); overflow: hidden; flex: none; background: var(--bg2); }
.np-cover img { width: 100%; height: 100%; object-fit: cover; }
.np-cover .cover-ph { width: 100%; height: 100%; border-radius: var(--radius-s); font-size: var(--t4); }
.np-title { font-size: var(--t2); font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.np-artist { font-size: var(--t1); color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.queue { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.queue-item {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  padding: 7px 10px;
  border-radius: var(--radius-s);
  background: var(--bg2);
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: var(--t1);
  transition: border-color 0.15s;
}
.queue-item:hover { border-color: var(--line2); }
.queue-item:active { transform: translateY(1px); }
.queue-item.current { border-color: var(--red); background: rgba(194, 33, 47, 0.12); }
/* 当前播放高亮:队列/网格正在播放条目——左侧 3px 红竖条 + 浅红背景 + 标题前三格均衡器动画(纯 CSS) */
.queue-item.is-playing, .card.is-playing {
  border-left: 3px solid var(--red);
  background: rgba(194, 33, 47, 0.10);
}
.eq-bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; flex: none; }
.eq-bars i { width: 3px; height: 4px; border-radius: 1px; background: var(--red); animation: eq-bounce 1.1s ease-in-out infinite; }
.eq-bars i:nth-child(2) { animation-delay: 0.22s; }
.eq-bars i:nth-child(3) { animation-delay: 0.44s; }
@keyframes eq-bounce { 0%, 100% { height: 4px; } 50% { height: 12px; } }
.queue-item .q-index { color: var(--muted); flex: none; }
.queue-item .q-cover { width: 34px; height: 34px; border-radius: var(--radius-s); overflow: hidden; flex: none; }
.queue-item .q-cover img { width: 100%; height: 100%; object-fit: cover; }
.queue-item .q-cover .cover-ph { width: 100%; height: 100%; border-radius: var(--radius-s); font-size: var(--t1); }
.queue-item.current .q-index { color: var(--red); font-weight: 700; }
.queue-item .q-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.queue-item .q-artist { color: var(--muted); flex: none; max-width: 70px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.queue-empty { color: var(--muted); font-size: var(--t1); padding: var(--gap-s) 10px; }

/* ---------- 窄屏汉堡按钮(顶栏内) + 抽屉遮罩(默认隐藏) ---------- */
.hamburger {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  place-items: center;
  flex: none;
}
.hamburger:hover { border-color: var(--line2); }
.hamburger:active { transform: translateY(1px); background: var(--bg1); }
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 15;
}

/* ---------- 主区(--bg1 与侧栏/卡片明确分层;桌面限宽 1100px) ---------- */
.main {
  max-width: 1100px;
  background: var(--bg1);
  padding: var(--gap-l) var(--gap-l) calc(var(--player-h) + var(--gap-l));
  min-width: 0;
}

/* tab 导航:主区内容顶部独立一行,网易云式下划线(active 红色 2px 下划线) */
.tabs {
  display: flex;
  gap: var(--gap-m);
  margin-top: 12px;       /* 与顶栏搜索框拉开层级 */
  padding-top: 10px;
  border-top: 1px solid var(--line); /* 搜索框与标签行之间的分隔线 */
  margin-bottom: var(--gap-l);
}
.tab {
  position: relative;
  padding: 8px 4px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: var(--t2);
  cursor: pointer;
  transition: color 0.15s;
}
.tab:hover { color: var(--text); }
.tab:active { transform: translateY(1px); }
.tab.active { color: var(--red); font-weight: 600; }
.tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
}

.section-title {
  font-size: var(--t3);
  font-weight: 600;
  margin: 6px 0 var(--gap-m);
}

/* ---------- 网易云封面卡片网格:卡片大小完全由网格列宽决定,断点逐级收窄 ---------- */
.grid {
  display: grid;
  /* ≥1000px 桌面默认:列宽 minmax(150px,1fr),封面自然 ≈150px,不写死封面 px */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--gap-m);
  /* 卡片高度不一时顶部对齐,避免短卡片被居中拉伸错位 */
  align-items: start;
}
.card {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  cursor: pointer;
  animation: fadeUp 0.4s ease both;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--line2);
  box-shadow: var(--shadow-2);
}
/* 卡片封面:不写死任何 px,尺寸完全跟随网格列宽;1:1 正方形 */
.card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
}
.card .card-cover img, .card .card-cover .cover-ph {
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  object-fit: cover;
}
.card-cover img { transition: transform 0.18s; }
.card:hover .card-cover img { transform: scale(1.04); }
/* 缺封面/加载失败用渐变 + SVG 音符占位(不使用字符符号) */
.cover-ph {
  background: linear-gradient(135deg,
    hsl(var(--ph-hue, 220), 55%, 40%),
    hsl(var(--ph-hue, 220), 45%, 16%));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
}
/* 封面加载失败:纯色占位(--skel) */
.cover-ph.solid { background: var(--skel); }
.ph-ic { width: 22px; height: 22px; }
/* 榜单序号:左上角半透明红底胶囊,避免复杂封面上不可读 */
.rank {
  position: absolute;
  top: var(--gap-s);
  left: var(--gap-s);
  font-size: var(--t1);
  font-weight: 700;
  color: #fff;
  background: rgba(194, 33, 47, 0.85);
  padding: 2px 8px;
  border-radius: 999px;
}
/* hover 时封面右下角出现播放三角;触摸屏常显 */
.play-tri {
  position: absolute;
  right: var(--gap-s);
  bottom: var(--gap-s);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(194, 33, 47, 0.92);
  color: #fff;
  opacity: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: opacity 0.18s, transform 0.18s;
}
.card:hover .play-tri, .card:focus-within .play-tri { opacity: 1; }
.play-tri:hover { transform: scale(1.1); }
.play-tri:active { transform: translateY(1px); }
@media (hover: none) {
  .play-tri { opacity: 0.9; }
}
.meta { margin-top: var(--gap-s); min-width: 0; }
.meta h4 {
  font-size: var(--t2);   /* 桌面标题 14px,单行 ellipsis */
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.meta .artist {
  display: block;
  margin-top: 3px;
  font-size: var(--t1);   /* 桌面艺术家 12px,单行 ellipsis */
  line-height: 1.35;
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 内联歌手/专辑链接(卡片、相似推荐、详情页面包屑):继承所在行文本样式,不破坏布局 */
.inline-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;           /* 与周围文字同字号/字体,仅颜色与 cursor 不同 */
  color: var(--red);
  cursor: pointer;
}
.inline-link:hover { text-decoration: underline; color: var(--red-hover); }
.meta .src {
  display: flex;
  align-items: center;
  gap: 4px;
  /* 合并重复 selector:src 均在 .meta-foot 内,无需额外上边距 */
  margin-top: 0;
  font-size: var(--t0);
  color: var(--muted);
}
.src.cached { color: var(--red); font-weight: 600; }
/* playable=false:已知无可用源,置灰卡片并加标签,点击只 toast 不触发回退 */
.card.unplayable { opacity: 0.5; }
.card.unplayable h4 { color: var(--muted); }
.card.unplayable .play-tri { opacity: 0.3; }
.src.no-src { color: var(--muted); font-style: italic; }
/* 收藏/移除按钮:卡片右上角小按钮 */
.card-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: rgba(13, 15, 19, 0.6);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.15s, transform 0.15s;
}
.card-btn:hover { border-color: var(--red); color: var(--red); transform: scale(1.08); }
.card-btn:active { transform: translateY(1px) scale(1.02); }

/* 取源失败:卡片短暂标红 + 抖动,失败不静默 */
.card.card-error { animation: cardShake 0.45s ease-in-out; }
.card.card-error .card-cover { box-shadow: 0 0 0 2px var(--red); }
.card.card-error h4 { color: var(--red); }
@keyframes cardShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 加载骨架:用宽高比近似真实卡片(1:1 封面 + 文字区),跟随列宽而不是固定高度 */
.skel {
  aspect-ratio: 1 / 1.35;  /* 骨架近似真实卡片:1:1 封面 + 文字区 */
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--bg2) 25%, var(--skel) 50%, var(--bg2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
}
.skel-row {
  height: 56px;
  border-radius: var(--radius-s);
  background: linear-gradient(90deg, var(--bg2) 25%, var(--skel) 50%, var(--bg2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.loading { color: var(--muted); font-size: var(--t2); padding: var(--gap-l) var(--gap-s); text-align: center; }

/* 空状态:图标 + 一句话 */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-s);
  padding: 36px var(--gap-s);
  color: var(--muted);
  font-size: var(--t2);
}
.empty-icon { color: var(--muted); }
.empty-icon .ic { width: 24px; height: 24px; }

/* ---------- 首页轮播 banner(横向滑动):track 宽度 = slide 数 × 100%,切换 = translateX(-idx*100%) ---------- */
.banner {
  position: relative;
  height: clamp(180px, 22vw, 260px);   /* 宽屏 260px,窄屏随宽度缩小到 180px,不再断点写死 */
  border-radius: var(--radius-l);
  overflow: hidden;
  margin-bottom: var(--gap-l);
  background: var(--bg2);
  border: 1px solid var(--line);
}
.banner-track {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 0.4s ease;
}
.banner-slide {
  flex: 0 0 100%;   /* 每个 slide 恰好占 banner 宽度,track 总宽 = N × 100% */
  position: relative;
  cursor: pointer;
}
.banner-slide img, .banner-slide .cover-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 左右箭头:绝对定位,hover 时显示;触摸设备常显 */
.banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(13, 15, 19, 0.55);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  z-index: 3;
  transition: opacity 0.2s, background 0.2s;
}
.banner:hover .banner-arrow, .banner:focus-within .banner-arrow { opacity: 1; }
.banner-arrow:hover { background: var(--red); }
.banner-arrow:active { transform: translateY(-50%) scale(0.95); }
.banner-prev { left: 12px; }
.banner-next { right: 12px; }
@media (hover: none) {
  .banner-arrow { opacity: 0.85; }
}
.banner-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  padding: 12px 16px;
  background: linear-gradient(to top, rgba(13, 15, 19, 0.88), rgba(13, 15, 19, 0.4) 55%, transparent);
}
.banner-text { flex: 1; min-width: 0; }
.banner-title {
  font-size: var(--t4);
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.banner-artist {
  margin-top: 2px;
  font-size: var(--t1);
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.banner-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-s);
  background: var(--red);
  color: #fff;
  font-size: var(--t2);
  cursor: pointer;
  flex: none;
}
.banner-play:hover { background: var(--red-hover); }
.banner-play:active { transform: translateY(1px); }
.banner-dots {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.banner-dot:hover { background: rgba(255, 255, 255, 0.6); }
.banner-dot.active { background: var(--red); transform: scale(1.3); }

/* 卡片元信息行(来源 + 时长 + 时间 + 大小) */
.meta-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.meta .dur, .meta .time { font-size: var(--t0); color: var(--muted); }

/* 歌单相对时间 */
.pl-time { color: var(--muted); font-size: var(--t0); flex: none; }
/* 歌单删除按钮(侧栏/总览歌单行右侧) */
.pl-del {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.15s, color 0.15s;
}
.pl-del:hover { border-color: var(--red); color: var(--red); }

/* 卡片下载按钮(本地音乐视图):红色 hover 已由 .card-btn:hover 覆盖,不再重复定义 */
/* 本地音乐「删除缓存」按钮:第一次点击变红待确认,第二次执行删除 */
.del-btn {
  margin-top: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--muted);
  font-size: var(--t0);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.del-btn:hover { border-color: var(--red); color: var(--red); }
.del-btn.confirm { background: var(--red); border-color: var(--red); color: #fff; }
.del-btn:disabled { opacity: 0.6; cursor: default; }

/* 搜索「加载更多」 */
.load-more {
  margin-top: var(--gap-m);
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg2);
  color: var(--text);
  font-size: var(--t2);
  cursor: pointer;
}
.load-more:hover { border-color: var(--red); color: var(--red); }
.load-more:active { transform: translateY(1px); }
.load-more:disabled { opacity: 0.6; cursor: default; }

/* 缓存 badge(顶栏右侧) */
.topbar-right .badge { flex: none; }

/* 播放条上一首/下一首无队列时禁用 */
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.icon-btn:disabled:hover { border-color: var(--line); background: transparent; color: var(--text); }

/* ---------- 底部播放条(网易云样式:可点击封面 + 两行文字 + 缓存 badge + 细进度 + 图标按钮组;歌词已移入详情页) ---------- */
.player {
  position: fixed;
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  height: var(--player-h);
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  padding: 0 var(--gap-l);
  background: var(--bg2);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  z-index: 30;
}
/* 封面 = 按钮:点击直达歌曲详情页;无当前歌曲时 disabled,不做 hover 放大 */
.player-cover {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-s);
  background: var(--bg1);
  border: none;
  padding: 0;
  flex: none;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s;
}
.player-cover:disabled { cursor: default; }
.player-cover:not(:disabled):hover { transform: scale(1.05); }
.player-cover img { width: 100%; height: 100%; object-fit: cover; }
.player-cover .cover-ph { width: 100%; height: 100%; border-radius: var(--radius-s); }
.player-info { min-width: 120px; max-width: 300px; }
.player-title {
  font-size: var(--t3);
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.player-artist {
  font-size: var(--t1);
  line-height: 1.35;
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 缓存徽章移入播放条(播放状态文字已移入顶栏右侧) */
.player-meta {
  display: flex;
  align-items: center;
  max-width: 170px;
}
.status-text {
  font-size: var(--t0);
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.idle-hint { font-size: var(--t1); color: var(--muted); } /* 未播放时底部引导文案,有播放后隐藏 */
.progress { flex: 1; min-width: 120px; display: flex; align-items: center; gap: var(--gap-s); }
.progress-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.10);
  cursor: pointer;
  touch-action: none;
}
.progress-bar:hover, .progress-bar:focus-visible { background: rgba(255, 255, 255, 0.18); }
.progress-fill {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: var(--red);
  transition: width 0.3s;
}
/* hover/拖动时进度末端显示红色圆点 thumb */
.progress-fill::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red-hover);
  opacity: 0;
  transition: opacity 0.15s;
}
.progress-bar:hover .progress-fill::after,
.progress-bar:focus-visible .progress-fill::after { opacity: 1; }
/* 正在获取音源:播放条与详情页进度区脉冲(合并重复规则),表示点击已受理、正在加载 */
.progress-bar.is-loading, .seek-bar.is-loading {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.10) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.progress-time { font-size: var(--t0); color: var(--muted); }
.player-actions { display: flex; gap: 10px; }
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.icon-btn:hover { border-color: var(--line2); background: rgba(255, 255, 255, 0.06); color: var(--red); }
.icon-btn:active { transform: translateY(1px); background: rgba(255, 255, 255, 0.10); }
.icon-btn.faved { color: var(--red); border-color: var(--red); background: rgba(194, 33, 47, 0.12); }

/* 播放模式按钮(顺序/随机/循环):文字按钮,hover 红色描边 */
.mode-btn {
  padding: 6px 10px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: var(--t1);
  cursor: pointer;
  flex: none;
  transition: border-color 0.15s, color 0.15s;
}
.mode-btn:hover { border-color: var(--red); color: var(--red); }
.mode-btn:active { transform: translateY(1px); }
/* 播放条内联音量滑块:紧凑宽度,红色 accent */
.player-volume {
  width: 56px;
  height: 6px;
  flex: none;
  accent-color: var(--red);
}

/* ---------- 缓存徽章 ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t0);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge .ic { width: 14px; height: 14px; }
.badge.stream {
  background: rgba(194, 33, 47, 0.12);
  color: var(--red);
  border: 1px solid rgba(194, 33, 47, 0.35);
}
/* 「本地」与「正在获取」徽章颜色几乎一致:合并 selector 避免重复声明 */
.badge.local, .badge.loading {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border: 1px solid var(--line);
}
.badge.bili {
  background: rgba(240, 143, 168, 0.13);
  color: var(--pink);
  border: 1px solid rgba(240, 143, 168, 0.40);
}
.badge.err {
  background: rgba(255, 123, 123, 0.13);
  color: var(--err);
  border: 1px solid rgba(255, 123, 123, 0.40);
}
/* 正在获取音源的转圈 spinner(纯 CSS,不依赖图标) */
.badge .spin {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

/* ---------- 歌词视窗(独立整页歌词页的滚动区):当前行高亮居中,前后行淡化,上下 mask 渐变遮罩 ---------- */
.lyric-viewport {
  position: relative;
  overflow-y: auto;
  scrollbar-width: none;
  /* 上下渐变遮罩:靠近边缘的行淡出 */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0, 0, 0, 0.16) 14%, #000 34%, #000 66%, rgba(0, 0, 0, 0.16) 86%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0, 0, 0, 0.16) 14%, #000 34%, #000 66%, rgba(0, 0, 0, 0.16) 86%, transparent 100%);
}
.lyric-viewport::-webkit-scrollbar { display: none; }
.lyric-line {
  padding: 8px 12px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--muted);
  opacity: 0.32;   /* 默认距离当前行 ≥3 的行:统一低透明度 */
  text-align: center;
  cursor: pointer;
  transition: opacity 0.35s, font-size 0.35s, color 0.35s;
}
/* 可读性分级:按与当前行的距离 d1(1行)/d2(2行)/d3(其余),字号差温和、透明度递增清晰 */
.lyric-line.d1 { opacity: 0.55; font-size: 17px; }
.lyric-line.d2 { opacity: 0.40; }
.lyric-line.d3 { opacity: 0.32; }
/* 键盘可访问性:歌词行可聚焦,焦点描边清晰 */
.lyric-line:focus-visible { outline: 1px solid var(--red); outline-offset: 2px; }
.lyric-line.current {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  color: #fff;
  opacity: 1;
  margin-block: 10px; /* 上下呼吸感:当前行与前后行拉开间距 */
}
.lyric-empty {
  color: var(--muted);
  font-size: var(--t2);
  text-align: center;
  padding: 30px 0;
}

/* ---------- Toast:顶部居中红底,窄屏避开 hamburger ---------- */
.toast {
  position: fixed;
  top: calc(var(--header-h) + var(--gap-s));
  left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-s);
  font-size: var(--t2);
  z-index: 50;
  animation: fadeUp 0.3s ease;
}

/* ---------- 整页歌曲详情页(仿网易云 song page):面包屑 + 唱片/控制/信息,歌词入口为独立整页 ---------- */
.song-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--player-h);   /* 底部预留播放条高度 */
  z-index: 40;
  background: var(--bg0);
  display: flex;
  flex-direction: column;
  animation: fadeUp 0.4s ease both;
}
/* 顶部面包屑行:歌曲名 - 艺术家,右侧关闭按钮 */
.song-head {
  flex: none;
  height: var(--song-head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  padding: 0 var(--gap-l);
  border-bottom: 1px solid var(--line);
}
.breadcrumb { display: flex; align-items: center; gap: var(--gap-s); min-width: 0; font-size: var(--t2); }
.bc-title { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bc-sep { color: var(--muted); flex: none; }
.bc-artist { color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.song-close { flex: none; width: 40px; height: 40px; }
.song-close:hover { border-color: var(--red); color: var(--red); }
.song-page-inner {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);   /* 左:唱片/控制列;右:相似推荐卡片网格(窄屏回退单列见响应式区) */
  gap: var(--gap-l);
  padding: var(--gap-m) var(--gap-l);
  max-width: 980px;
  margin: 0 auto;
}
.song-left {
  display: grid;
  gap: var(--gap-m);
  justify-content: center;
}
.vinyl-wrap { display: flex; justify-content: center; }
/* 唱片封面:240px 圆,播放时旋转 */
.vinyl {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: var(--bg2);
  position: relative;
  border: 6px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.2s;
}
.vinyl.spinning { animation: spin 12s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.vinyl-hole {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg0);
  transform: translate(-50%, -50%);
  border: 4px solid rgba(255, 255, 255, 0.12);
}
/* .song-title/.song-artist 已删除:详情页标题/艺术家由面包屑 .bc-title/.bc-artist 承担 */
.song-seek { display: flex; align-items: center; gap: var(--gap-s); }.seek-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.10);
  cursor: pointer;
  overflow: hidden;
  touch-action: none;
}
.seek-fill { height: 100%; width: 0%; border-radius: 2px; background: var(--red); }
.seek-time { font-size: var(--t0); color: var(--muted); }
.song-volume { display: flex; align-items: center; gap: var(--gap-s); }
.vol-label { font-size: var(--t1); color: var(--muted); }
.song-volume input[type="range"] { flex: 1; accent-color: var(--red); height: 6px; }
.vol-val { font-size: var(--t1); color: var(--muted); }
.song-actions { display: flex; flex-wrap: wrap; gap: var(--gap-s); align-items: center; }
/* 主按钮:红实心;次按钮:描边 */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-s);
  border: none;
  background: var(--red);
  color: #fff;
  font-size: var(--t2);
  cursor: pointer;
}
.btn-primary:hover { background: var(--red-hover); }
.btn-primary:active { transform: translateY(1px); background: var(--red-hover); }
.fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-size: var(--t2);
  cursor: pointer;
  transition: border-color 0.15s;
}
.fav-btn:hover { border-color: var(--red); color: var(--red); }
.fav-btn:active { transform: translateY(1px); }
.fav-btn.faved { background: rgba(194, 33, 47, 0.14); border-color: var(--red); color: var(--red); }
.pl-add { display: flex; gap: var(--gap-s); align-items: center; }
.pl-add select {
  padding: 8px 10px;
  border-radius: var(--radius-s);
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--line);
  font-size: var(--t2);
}
.pl-add select:focus { border-color: var(--red); }
.pl-add button {
  padding: 8px 14px;
  border-radius: var(--radius-s);
  border: none;
  background: var(--red);
  color: #fff;
  font-size: var(--t2);
  cursor: pointer;
}
.pl-add button:hover { background: var(--red-hover); }
.pl-add button:active { transform: translateY(1px); background: var(--red-hover); }
/* 下载按钮:描边样式,仅本地缓存可用时显示 */
.dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-size: var(--t2);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.dl-btn:hover { border-color: var(--red); color: var(--red); }

/* ---------- 独立歌词页(网易云式整页歌词):铺满视口(不含底部播放条),背景模糊封面 ---------- */
.lyric-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--player-h);   /* 底部预留播放条高度,播放条仍可见可操作 */
  z-index: 45;               /* 高于详情页(40),低于 toast(50) */
  background: var(--bg0);
  display: flex;
  flex-direction: column;
  animation: fadeUp 0.35s ease both;
}
/* 背景层:当前封面大图 blur(40px),四周扩 inset 避免模糊边缘露底色 */
.lyric-bg {
  position: absolute;
  inset: -40px;
  background-size: cover;
  background-position: center;
  filter: blur(40px);
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}
/* 氛围呼吸:播放时模糊封面极缓慢明暗变化(4s 周期),减少动态偏好下关闭 */
@keyframes lyricBreath { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.50; } }
.lyric-bg.breathing { animation: lyricBreath 4s ease-in-out infinite; }
/* 深色遮罩:在模糊封面之上、歌词文字(z-index 1)之下,稳定文字对比度 */
.lyric-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 15, 19, 0.55), rgba(13, 15, 19, 0.78));
  z-index: 0; /* 与 .lyric-bg 同层,DOM 顺序靠后故覆盖封面,仍低于歌词区(z-index 1) */
  pointer-events: none;
}
.lyric-head {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  padding: 12px var(--gap-l);
}
.lyric-back { flex: none; width: 40px; height: 40px; }
.lyric-back:hover { border-color: var(--red); color: var(--red); }
.lyric-head-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lyric-title { font-size: var(--t3); font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lyric-artist { font-size: var(--t2); color: #b6c0cc; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* 歌词区:满高,当前行居中(centerLyric 算法复用),上下 mask 淡出由 .lyric-viewport 提供 */
.lyric-view {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  padding: var(--gap-l) var(--gap-s);
}

/* 详情页「歌词」入口:大红色按钮(继承 .btn-primary 的红底白字) */
.lyric-open {
  width: 100%;
  justify-content: center;
  padding: 12px 18px;
  font-size: var(--t3);
  font-weight: 600;
}
/* 侧栏「正在播放」卡片上的歌词小按钮 */
.np-lyric-btn {
  flex: none;
  padding: 7px 12px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: var(--t1);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.np-lyric-btn:hover { border-color: var(--red); color: var(--red); }
.np-lyric-btn:active { transform: translateY(1px); }

/* ---------- 响应式:断点密度 ≥1000 / 640-999 / <640 ---------- */
/* 640-999px:网格列宽收窄到 130px */
@media (max-width: 999px) and (min-width: 640px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* <1000px:侧栏折叠成汉堡抽屉(不再占 220px),主区占满宽度;抽屉宽度 88vw */
@media (max-width: 1000px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: var(--topbar-h);
    bottom: var(--player-h);
    width: min(88vw, 320px);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: none;
    height: auto;
  }
  .sidebar.open {
    transform: none;
    box-shadow: var(--shadow-2);
  }
  .hamburger { display: grid; }
  .content { grid-template-columns: 1fr; }
  .main { padding: var(--gap-m) var(--gap-m) calc(var(--player-h) + var(--gap-m)); }
  .player { left: 0; }
}

/* <900px:歌曲详情页左列变横向顶部块(封面 120px + 按钮一行),歌词仍占满下方剩余高度 */
@media (max-width: 900px) {
  .song-page-inner { grid-template-columns: 1fr; gap: var(--gap-m); }
  .song-left {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-m);
  }
  .vinyl { width: 120px; height: 120px; border-width: 4px; }
  .vinyl-hole { width: 16px; height: 16px; }
  .song-seek, .song-volume { flex: 1 1 100%; }
  .song-actions { flex: 1 1 100%; }
  .song-left .badge { flex: 1 1 100%; }
}

/* <640px:手机密度--顶栏换行(logo 一行 + 搜索框整行)、tabs 一行横向滚动、
   卡片网格单列(64px 封面紧凑行)、banner 180px、触摸目标 ≥40px */
@media (max-width: 640px) {
  :root { --player-h: 104px; --topbar-h: 104px; --header-h: 104px; }
  /* 顶栏 flex 换行:第一行 logo+状态,第二行搜索框占满 100% */
  .topbar { flex-wrap: wrap; }
  .logo-name, .topbar-right .status-text { display: none; }
  .hamburger { width: 40px; height: 40px; }
  .search { flex: 1 1 100%; width: 100%; max-width: 100%; }
  /* tabs 一行不换行,可横向滚动 */
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  /* 卡片网格单列:64px 封面 + 文字,高度紧凑 */
  .grid { grid-template-columns: 1fr; gap: var(--gap-s); }
  .card { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 10px; }
  .card-cover { width: 64px; }
  .meta { margin-top: 0; padding-right: 42px; }
  .play-tri { display: none; }   /* 单列卡片整卡可点,小三角多余 */
  .card-btn { width: 40px; height: 40px; top: 8px; right: 8px; }
  /* 文字层级随尺寸收紧:标题 13 / 艺术家 11,均单行 ellipsis */
  .meta h4 { font-size: 13px; line-height: 1.35; }
  .meta .artist { font-size: 11px; line-height: 1.35; }
  /* 序号 12px;窄屏 banner 高度 180px 且文字缩小 */
  .rank { font-size: 12px; padding: 2px 6px; }
  .banner { height: 180px; }
  .banner-title { font-size: var(--t3); }
  .banner-artist { font-size: var(--t0); }
  .banner-play { padding: 7px 12px; font-size: var(--t1); }
  .banner-arrow { width: 40px; height: 40px; }
  /* 侧栏「正在播放」队列与歌单列表:紧凑行 44px 高、封面 32px */
  .pl-chip { height: 44px; }
  .pl-cover { width: 32px; height: 32px; }
  .queue-item { height: 44px; }
  .queue-item .q-cover { width: 32px; height: 32px; }
  .queue-item .q-artist { max-width: 110px; }
  /* 移动端触控尺寸:图标按钮 44px,进度条加粗到 8px,播放条封面保持 44px */
  .icon-btn { width: 44px; height: 44px; }
  .progress-bar { height: 8px; }
  .player-cover { width: 44px; height: 44px; }
  .np-cover { width: 32px; height: 32px; }
  /* 歌曲页:控制按钮一行排完;歌词入口按钮字号稍收 */
  .song-actions { flex-wrap: nowrap; gap: 6px; }
  .btn-primary, .fav-btn { padding: 7px 10px; font-size: var(--t1); }
  .lyric-open { font-size: var(--t2); padding: 11px 14px; }
  .pl-add select { min-width: 0; max-width: 80px; padding: 6px 8px; font-size: var(--t1); }
  .pl-add button { padding: 6px 10px; font-size: var(--t1); }
  /* 独立歌词页手机密度:字号缩小、padding 12px */
  .lyric-head { padding: 10px 12px; }
  .lyric-view { padding: 12px; }
  .lyric-line { font-size: 15px; padding: 6px 8px; }
  .lyric-line.current { font-size: clamp(19px, 6vw, 24px); }
  .player {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--gap-s);
    padding: 10px var(--gap-m);
  }
  .player-cover { grid-column: 1; grid-row: 1; }
  .player-info { grid-column: 2; grid-row: 1; max-width: none; }
  .player-actions { grid-column: 3; grid-row: 1; }
  .player-meta { grid-column: 1 / 3; grid-row: 2; flex-direction: row; max-width: none; }
  .progress { grid-column: 3; grid-row: 2; }
}

/* <420px:播放条三行精简(隐藏进度时间文本),图标按钮 40px 触摸目标,详情页封面 160px */
@media (max-width: 420px) {
  :root { --player-h: 120px; }
  .player {
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto auto;
    gap: 6px;
    padding: 8px var(--gap-m);
  }
  .player-cover { grid-column: 1; grid-row: 1; }
  .player-info { grid-column: 2; grid-row: 1; }
  .player-actions { grid-column: 1 / 3; grid-row: 2; justify-content: space-between; }
  /* ≤420px 保留缓存徽章(player-badge):与进度条同占第三行 */
  .player-meta { grid-column: 1; grid-row: 3; max-width: none; }
  .progress { grid-column: 2; grid-row: 3; min-width: 0; }
  .progress-time { display: none; }
  .icon-btn { width: 44px; height: 44px; }
  .topbar-right .badge { display: none; }
  .vinyl { width: 160px; height: 160px; border-width: 4px; }
  .vinyl-hole { width: 16px; height: 16px; }
}

/* 尊重系统「减少动态效果」:关闭唱片旋转、骨架闪烁、卡片/面板渐入、轮播滑动过渡 */
@media (prefers-reduced-motion: reduce) {
  .vinyl.spinning { animation: none; }
  .banner-track { transition: none; }
  .banner-dot { transition: none; }
  .skel, .skel-row { animation: none; }
  .card, .song-page, .toast { animation: none; }
  .ic, .card, .icon-btn, .lyric-line, .card-cover img, .play-tri, .pl-chip, .queue-item { transition: none; }
  .lyric-bg.breathing { animation: none; } /* 减少动态偏好:封面呼吸动画关闭 */
  .eq-bars i { animation: none; height: 6px; } /* 减少动态偏好:均衡器动画静止 */
}

/* ---------- 账号系统:顶栏登录区 + 登录弹窗(网易云深色风格) ---------- */
.auth-area { display: flex; align-items: center; gap: 10px; flex: none; }
.user-name { font-size: var(--t2); color: var(--text); font-weight: 600; }
.ghost-btn { background: none; border: 1px solid var(--line2); color: var(--muted); border-radius: var(--radius-s); padding: 6px 12px; font-size: var(--t1); cursor: pointer; }
.ghost-btn:hover { border-color: var(--red); color: var(--red); }
.ghost-btn:disabled { opacity: .5; cursor: not-allowed; }
.auth-open-btn { padding: 8px 14px; }

.auth-modal { position: fixed; inset: 0; background: rgba(8, 9, 12, 0.72); display: flex; align-items: center; justify-content: center; z-index: 100; }
.auth-box { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 22px 26px; width: 380px; max-width: 92vw; box-shadow: var(--shadow-2); }
.auth-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.auth-title { font-size: var(--t4); font-weight: 700; color: var(--red); }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.auth-tab { background: none; border: 1px solid var(--line2); color: var(--muted); padding: 7px 12px; border-radius: var(--radius-s); cursor: pointer; font-size: var(--t2); }
.auth-tab.active { color: var(--red); border-color: var(--red); font-weight: 600; }
.auth-msg { font-size: var(--t1); color: var(--err); margin-bottom: 10px; }
.auth-msg.ok { color: #7bd88f; }
.auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.auth-field span { font-size: var(--t1); color: var(--muted); }
.auth-field input { background: var(--bg1); border: 1px solid var(--line); border-radius: var(--radius-s); color: var(--text); padding: 9px 11px; font-size: var(--t2); }
.auth-field input:focus { border-color: var(--red); outline: none; }
.auth-code-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.auth-code-hint { font-size: var(--t0); color: var(--muted); }
.auth-go { width: 100%; }
.qr-wrap { display: flex; justify-content: center; margin-bottom: 10px; }
.qr-wrap img { width: 200px; height: 200px; border-radius: 8px; background: #fff; }
.qr-hint { font-size: var(--t1); color: var(--muted); text-align: center; }