/*
 * site.css —— 本站自己的组件样式
 *
 * 这里的选择器 base.css 里不存在（唯一例外：prefers-reduced-motion 的 * 全局降级，带 !important、
 * 语义就是压过全站动效），所以本文件不参与"覆盖原站"，只新增组件：听歌室 .room-*、频道条 .tablenav、
 * 歌手页 .singer_tabs、榜单徽章、封面优先卡片的本站新增子元素、无障碍焦点环等。
 *
 * 规矩：禁止往本文件里写 base.css 已有的选择器。要改原站版式就改 base.css 里那一条本身——
 * 补丁层已随 clone.css 一起删掉了，别让它长回来（校验脚本见 cache/css-premerge-20260929/）。
 *
 * 加载顺序 base → site。base.css 已经把原 clone.css 的覆盖与适配段全部就地消化（每条选择器每个
 * 断点档只出现一处），断点为三档：≤750 手机 / 751–1024 平板 / ≥1025 桌面（+ hover、reduced-motion）。
 * 所以往 site.css 里写规则前，先查选择器在 base.css 里存不存在。
 */



/*
 * 详情页侧栏下载按钮
 *
 * 原站把这几条写在 .player_right 里的一段内联 <style> 中（<style> 是全局生效的），
 * 这里等价地放进样式表，颜色与 margin 均按原站实测值。
 */
.player_right .layui-btn,.play_right .layui-btn{width:100%;margin-top:10px;border-radius:5px}

.player_right .lkbtn,.play_right .lkbtn{background-color:#178c71;margin-top:5px}

.player_right .lklv,.play_right .lklv{background-color:#0a6352}

.player_right .lklan,.play_right .lklan{background-color:#145d42}


/*
 * MV 详情页播放器
 *
 * 本站这里也挂 DPlayer 了，但它建的 video 同样落在 .player 里，这条把播放器铺满
 * 那个 100% x 437px 的黑底框、保住黑边画幅。特异性 (0,1,1) 高于 DPlayer 自带的
 * .dplayer-video (0,1,0)，两边都是 100% x 100%，所以不冲突。
 */
.player video{display:block;width:100%;height:100%;background:#000;outline:none}


/*
 * MV 缩略图画幅
 *
 * 原站的 MV 封面走百度图片代理（size=f300_150），返回的图本身就是 2:1；
 * 本站直连酷我 wmvpic，同宽度是 16:9，卡片会比原站高出一截。
 * 只挑 width="300" 的 MV 图（歌单卡是 170、歌曲卡没写宽度），按 2:1 居中裁切。
 */
.video_list li .pic img[width="300"]{aspect-ratio:2/1;object-fit:cover}


/*
 * 新碟上架网格
 *
 * 原站的专辑卡同样排在 .video_list 里，但用页面级 <style> 把每行改成 10 个；
 * 封面原站走图片代理（返回 170:140），本站直连酷我 120 方图，所以按 170:140 居中裁切。
 * 10 列只在桌面成立：≤750px 时 base.css 自己把 .video_list li 收成 3 列，
 * 这条覆盖必须一起限定到 751px 以上，否则手机上卡片只有 55px、标题被截成两三个字。
 */
@media screen and (min-width:751px){
.album_list li{width:calc(10% - 20px)}}


.album_list li .pic{aspect-ratio:170/140}

.album_list li .pic img{object-fit:cover}



/*
 * 歌单广场网格
 *
 * 原站这块用的是 .video_list（浮动块，能包住浮动的卡片；歌单名在封面下方），
 * 但它的 li 宽度是 10 列（实测 107.8px = 1278 的 10% 减 20px 边距），
 * 而我们手上这份 base.css 的 .video_list li 是 6 列，所以只覆盖宽度。
 * 首页的 .ilingku_list 是另一套：歌单名绝对定位压在封面上，li 只有封面高，两者别混用。
 */
@media screen and (min-width:751px){
.playtype_list li{width:calc(10% - 20px)}}


.playtype_list li .pic{aspect-ratio:170/130}

.playtype_list li .pic img{object-fit:cover}


/*
 * 顶部菜单靠右
 *
 * base.css 里 header .nav 是 float:left，紧跟在 logo 后面；搜索框 float:right 在最右边，
 * 中间空出一大段。改成把 .pull-right 做成右对齐的 flex 行，菜单就贴到搜索栏左边。
 * flex 子项的 float 会被忽略，所以不用再单独清 header .nav / .search 的 float；
 * ≤1024px 时 .nav 本身是 display:none 的抽屉（汉堡 + 抽屉，见 base.css 的 ≤1024 块），剩下搜索框仍然贴右边，和原来一致。
 */
header .pull-right{display:flex;align-items:center;justify-content:flex-end;height:60px}


@media screen and (min-width:751px) and (max-width:1024px) {

.playtype_list li,.album_list li{width:calc(20% - 20px)}
}



/*
 * 下载弹窗里那一行：原站 base.css:102 是 .play_sm a{color:#ccc}，配白底几乎看不见，
 * 前面那个 .fa-download 又是白色 SVG、在白底上直接隐形。这里补成 .play_sm 自己的蓝字色，
 * 不动逐字移植的 base.css。hover 必须一起写：它和下面第一条特异性相同 (0,2,1)，
 * 不跟着补一条就会被本文件的常规色压住。
 */
.layer-tc .play_sm a{color:#1256ff}

.layer-tc .play_sm a:hover{color:#ff0000}

.layer-tc .play_sm .fa-download{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%231256ff' d='M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z'/%3E%3C/svg%3E")}



/*
 * 歌手页 tab 条（最新歌曲 / 最新视频 / 最新专辑）
 *
 * 三块数据在同一次渲染里全出，切换只是显隐（见 app.js 的 singer_tabs 那段）：
 * 不发二次请求、也不给同一页造第二个地址。空的 tab 由模板直接不渲染。
 * 激活态用站内主题色 #1aa270（顶部导航底色、板块标题那根竖条都是它），未激活就是普通文字。
 */
.singer_tabs{float:left;width:100%;background:#fff;margin-top:10px;padding:12px 14px;box-sizing:border-box;border-radius:4px}

.singer_tabs a{display:inline-block;height:32px;line-height:32px;padding:0 14px;margin-right:8px;border-radius:16px;font-size:14px;color:#555}

.singer_tabs a:hover{color:#1aa270;text-decoration:none}

.singer_tabs a.on{color:#fff;background:#1aa270;font-weight:600}

.singer_tabs a.on:hover{color:#fff}

@media screen and (max-width:750px){
  .singer_tabs{padding:10px 8px}
  .singer_tabs a{padding:0 12px;margin-right:4px;font-size:13px}}

@media screen and (max-width:750px) {

  .ilingku_fl::-webkit-scrollbar{display:none}

  .ilingku_fl+.ilingku_fl{border-top:1px solid #f2f2f2}

  .ilingku_fl li.fl-tit{position:sticky;left:0;z-index:1;margin:0;padding-right:8px;background:#fff;
    color:#999;font-size:12px;vertical-align:middle}
}

@media screen and (min-width:751px){
  footer.lkpc{margin-top:auto}}

@media screen and (min-width:751px) {

  .mvtop{display:flex;align-items:stretch}
}



/*
 * iPad 档（768 / 820 / 1024 这三档实测过）。2026-09-29 第三刀后本站断点统一为三档：
 * ≤750 手机 / 751–1024 平板 / ≥1025 桌面（+ hover、reduced-motion 两个功能档）。
 *
 * 1) 751–1024（平板档）base.css 把 header .nav 整个藏掉、只留手机的吸底栏，而吸底栏只有 5 项
 *    （没有"新歌榜"和"专辑"）——iPad 竖屏因此**根本没有入口进这两个频道**。改成这一段
 *    用顶部导航带把 7 个频道都给出去，同时撤掉吸底栏和它给 body 留的 55px：iPad 不需要
 *    手机的拇指热区，那 55px 够多放一行封面。≥1025 走桌面顶导航；≤750 也亮这条导航，
 *    但换成可横向滑动的紧凑版（见下面 max-width:750 那块）。
 * 2) layui 的容器是硬档："≥768 就固定 750px"、"≥992 就固定 970px"。820 的 iPad Air 白丢 70px，
 *    993–1024 的 iPad Pro 又会被钉在 970 档里 —— 现在 751–1024 整个放开成流式（base.css 的 layui 段），
 *    970 档从 1025 起才用。
 * 3) **1025–1199 顶导航会折行**（原先 993–1199 同病，iPad Pro 竖屏 1024×1366 实测）：这段容器固定 970，
 *    而 `header .logo` 的盒子会跟着容器变宽（实测右缘 1024→175、1100→213、1180→253），
 *    `.pull-right` 是避让左浮动的 flex 容器，于是导航 661 + 搜索 139 加进去放不下，
 *    7 项折成 1+6 两排；而 `header{height:60px}` 是死高，第二排直接被裁掉、压在正文上
 *    ——截图里"高清MV"半截盖在页面上就是这个。修法在 base.css 的 1025–1199 块（收紧导航项内边距
 *    并锁住 logo 不跟着长）。≥1200 容器变 98.5% 本来就放得下，不掺改。
 * 默认不显示，只在 751–1024 和 ≤750 这两段媒体查询里亮出来（桌面 ≥1025 顶导航够用，不多出一条）。
 */
.tablenav{display:none}

/* 手机档（≤750）：吸底栏只有 5 项（没有新歌榜和专辑），base.css 又把 header .nav 整个藏掉，
   这两个频道在手机上就没有稳定入口。这里不引汉堡、不写 JS——把每页都已输出的 .tablenav
   （main_nav 全 7 项）亮成一条**可横向滑动**的频道条：项高 40px 够按，滚动条藏掉不占高度。 */
@media screen and (max-width:750px){
  .tablenav{display:block;background:#fff;border-bottom:1px solid #eee}
  .tablenav .layui-container{width:100%;padding:0 8px;overflow-x:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tablenav .layui-container::-webkit-scrollbar{display:none}
  .tablenav a{display:inline-flex;align-items:center;height:40px;padding:0 12px;
    font-size:14px;color:#333;white-space:nowrap}
  .tablenav a i{font-size:16px;margin-right:5px}
  .tablenav a.active{color:#1aa270}}

@media screen and (min-width:751px) and (max-width:1024px) {

  .tablenav{display:block;background:#fff;border-top:1px solid #f0f0f0}

  .tablenav a{display:inline-flex;align-items:center;height:42px;margin-right:2px;padding:0 12px;
    font-size:14px;color:#333;white-space:nowrap}

  .tablenav a i{font-size:16px;margin-right:5px}

  .tablenav a:hover,.tablenav a.active{color:#1aa270}

  /* MV 页在这个区间改成上下堆叠：两栏时播放器只有 345x437（实测 768），竖盒放横视频、
     黑边吃掉一半面积；整幅 16:9 是 725x408。手机档 base.css 本来就是堆叠的，这里同构。
     .player 全站只有 MV 页在用（pages/mv.php），不会影响歌曲页。 */
  .mvtop{display:block}
}



/*
 * 无障碍与触摸目标（2026-09-28 补，之前实测的缺口都记在 app/README.md）
 *
 * 1) 焦点环。base.css 里有 6 处 `outline:0`（搜索框、搜索按钮、复制框、.player video），
 *    实测聚焦搜索框时 outline 前后都是 `none/0px` —— 用 Tab 走站的人完全看不见光标在哪。
 *    这里只补 :focus-visible（鼠标点击不显示，键盘才显示），不去动逐字移植的 base.css。
 *    颜色用 #1256ff 而不是主题绿：绿底 header、白底卡片、灰底列表三种背景上它都够对比。
 * 2) skip link + .sr-only：读屏和键盘用户原先每次都要 Tab 过整条导航才能到正文。
 * 3) 返回顶部。base.css:387/416 只有 `background-color` 和手机端 `bottom:55px`，
 *    **没有 position/right/尺寸** —— 因为原站的定位来自 layui 全量 CSS，我们的
 *    layui-subset 没搬这段，所以样式一直是死的。这里补齐（结构见 layout_footer）。
 *    注意 clone.css 在 base.css 之后加载，同特异性会盖掉它那条 `bottom:55px`，
 *    所以手机档这里显式再写一次，别指望 base.css 那条生效。
 * 4) prefers-reduced-motion：唱盘转动、封面 hover 缩放、进度动画全部降到"瞬时"。
 * 5) 列表里的歌手名链接（实测 42x16）和 `mv` 角标（25x18）点击面积太小。`.play_list`（榜单/歌单/
 *    歌手页歌曲行）被 `.name{height:30}` 卡死，只能撑满所在行高，做不到 44x44 —— 那要重排整行。
 *    `.lkmusic_list` 那两个都已经不在歌名行里了（mv 角标和歌手名都浮到封面上，见文件末尾
 *    「封面优先」块），尺寸由那边一起给。
 */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid #1256ff;outline-offset:2px}

header .search .seh_v:focus-visible,header .search .seh_b:focus-visible{outline:2px solid #1256ff;outline-offset:1px}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:8px;top:-52px;z-index:1200;padding:9px 14px;background:#1256ff;
  color:#fff;border-radius:0 0 4px 4px;transition:top .15s ease}

.skip-link:focus{top:0}

.layui-fixbar li a{display:flex;align-items:center;justify-content:center;width:40px;height:40px}

.fixbar-up{width:11px;height:11px;margin-top:6px;border-left:2px solid #fff;border-top:2px solid #fff;
  transform:rotate(45deg)}

.play_list li .name a{display:block;height:30px;line-height:30px}

/*
 * 详情页播放器（2026-09-28 补）
 *
 * 焦点环：进度条(.jp-progress)、音量条(.jp-volume-bar)、歌词框(#lrc_geci) 现在都是
 * tabindex="0" 的可聚焦元素（前两个是 role="slider"，歌词框是可滚动的 region），
 * 但上面的通用焦点环只罩 a/button/input 这几个标签，div 拿不到。前两个只有 4px 高，
 * offset 给到 4px 才看得见一个完整的环。
 * 手机档的 44px 迷你封面试过又撤了：移动端不需要（`.djpic` 在 base.css 里本来就 display:none）。
 */
.jp-progress:focus-visible,.jp-volume-bar:focus-visible,#lrc_geci:focus-visible{
  outline:2px solid #1256ff;outline-offset:4px}

.jp-retry{float:left;display:none;height:24px;line-height:24px;margin:4px 0 4px 10px;
  padding:0 12px;background:#1aa270;color:#fff;border-radius:3px;font-size:13px}

.jp-retry:hover{color:#fff;opacity:.92}


/*
 * h1 右上角那枚「加入/移出听歌室」（2026-09-28 第二轮）：
 * 上一版是自绘的 layui 风格循环开关，用户"砍掉"了它，位置让给听歌室的加入按钮；
 * 详情页下载区里原来那枚整宽按钮也一并挪过来（用户："移动到右上角按钮"）。
 * 它就是个 float:right 的紧凑胶囊：白字在站点绿上 3.2:1，和房间里的图标同一套语言
 * （.room-disc-ico 那枚 fed-icon-yinyue 字形，这里缩到 14px）；房内状态底色调深到 #0a6352，由 syncAddButtons 切 .in-room。
 */
.jp-room{float:right;margin:0;display:inline-flex;align-items:center;gap:5px;height:22px;
  padding:0 10px;border-radius:11px;background:#1aa270;color:#fff;font-size:12px}

.jp-room:hover{color:#fff;opacity:.92}

.jp-room .room-disc-ico{font-size:14px}

.jp-room.in-room{background:#0a6352}

/*
 * 标题过长时的收口（用户报的"手机端标题过长导致组件溢出"）。
 * base.css:335 给 .djname 的固定盒是 height:26px;overflow:hidden，h1 一折成两行：
 * 首行文字整宽跑到开关下面，开关被挤到第二行、落在 26px 之外被裁掉（实测 335px 宽 h1：
 * 两行 48px、开关 y 150、.djname 可视只到 152）。
 * 收口靠 .djname-t：它是 h1 里的块级 BFC（overflow:hidden），浮动在它前面，BFC 不吃浮动 ——
 * 盒子直接被挤到 283px（335-52），nowrap + 省略号截在开关左侧。注意"给 h1 加 nowrap 让文本
 * 绕开浮动"是行的（浮动不缩短 nowrap 行盒的绘制区，文字照样铺到 365 且浮在浮动之上 ——
 * 第一版就是这么错的），必须换成块级子元素来截。
 */
.djname-t{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/*
 * 听歌室（2026-09-28）：用户要的"自己加歌、按顺序、可移除、能循环"。
 *
 * 入口 = 右下角悬浮胶囊（手机收成 44px 圆钮），和 .layui-fixbar（right:14px;bottom:26px，
 * 手机 70px）上下排开：桌面 76px、手机 120px，谁也不压谁。房间本体是整屏内页（同页展开、
 * 不跳页），打开时用 clip-path 从入口位置扩开、关闭反向收（--rx/--ry 由 JS 按入口位置写）。
 * 整站都是白底列表，房间换深绿底，进门就该换一种"场景感"。
 */
/* 入口 = 迷你播放条（用户标注"重新设计ui""不够大厂风范"）。外壳只管固定定位和矩形量测
   （open() 的进场动画拿它的 getBoundingClientRect 算位移）；里面两个真 <button>。

   对照 redesign audit 改的几处，记在这儿免得又被改回去：
   - 上一版是深色玻璃。全站是白卡 + 浅色纹理底，一块深色浮层就是 audit 说的
     "cream 页中间突然一块 #111"——浮层得跟着页面光照走，所以换成浅色磨砂。
   - 玻璃要做真：1px 描边 + 顶部内高光 + 左上镜面，只有 backdrop-filter 是假玻璃。
   - 强调色只留站点绿一支（原来的 #4fd1a1 撤了，两个绿互相打）。
   - 圆角分级：容器 16 / 封面 10 / 播放键圆。封面从圆盘改成 squircle——清一色圆角圆图
     是典型 AI 味；代价是圆角方块不能自转（转起来破形），所以"播放中"改由进度线 +
     播放键光环 + 字形切换来说。
   - 阴影按底色着色（绿灰，不是纯黑），光源统一在上方。 */
/* 收起态 52px（8 + 封面 36 + 8，碟正好居中，所以不用切 justify-content——
   展开时封面不会先跳一下）；hover / :focus-within 展开到 252px。
   :focus-within 是必须的：不然键盘 Tab 会聚焦到一颗藏起来的播放键。
   shell 上不放 gap：gap 在零宽的隐藏子元素之间照样留缝，收起态就收不进 52，间距改由子元素 margin 管。 */
.room-fab{position:fixed;right:16px;bottom:78px;z-index:998;display:flex;align-items:center;
  width:52px;height:52px;padding:0 8px;border-radius:16px;color:#152420;font-size:13.5px;
  background:radial-gradient(120% 100% at 18% 0%,rgba(255,255,255,.96),rgba(255,255,255,0) 62%),
    linear-gradient(180deg,rgba(252,253,253,.90),rgba(237,244,241,.84));
  border:1px solid rgba(20,56,44,.10);
  box-shadow:0 12px 28px rgba(20,56,44,.14),0 2px 6px rgba(20,56,44,.08),inset 0 1px 0 rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  -webkit-font-smoothing:antialiased;
  transition:width .32s cubic-bezier(.2,.85,.25,1),transform .2s ease,box-shadow .2s ease}

.room-fab:hover,.room-fab:focus-within{width:252px}

.room-fab:hover{color:#152420;transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(20,56,44,.18),0 3px 8px rgba(20,56,44,.10),inset 0 1px 0 rgba(255,255,255,.95)}

/* 进度线：--p 由房内 syncTime 每次心跳写百分比；收起态和手机档都隐掉 */
.room-fab::after{content:'';position:absolute;left:10px;right:10px;bottom:5px;height:3px;border-radius:2px;
  opacity:0;transition:opacity .18s ease;
  background:linear-gradient(90deg,#1aa270 0 var(--p,0%),rgba(20,56,44,.12) var(--p,0%) 100%)}

.room-fab:hover::after,.room-fab:focus-within::after{opacity:1}

/* 注意：<button> 的 UA 默认就是 text-align:center，它会一路继承到下面两行文字——
   三个字的歌名被居中到副行中间，两行左边缘对不齐，看着就像没排版。必须显式左对齐。 */
.room-fab-main{display:flex;align-items:center;flex:1 1 auto;min-width:0;height:100%;padding:0;
  border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:14px;
  transition:background .18s ease}

.room-fab-main:hover{background:rgba(20,56,44,.05)}
.room-fab-main:active{background:rgba(20,56,44,.09)}

/* 封面位：有歌显图、没歌显音符字形。squircle + 一档绿灰投影把它从玻璃面上抬起来 */
.room-fab-disc{position:relative;flex:0 0 auto;width:36px;height:36px;border-radius:10px;overflow:hidden;
  display:grid;place-items:center;color:#1aa270;background:rgba(26,162,112,.10);
  box-shadow:0 1px 3px rgba(20,56,44,.18),inset 0 0 0 1px rgba(20,56,44,.06)}

.room-fab-cover{width:100%;height:100%;display:block;object-fit:cover}

.room-fab.has-cover .room-disc-ico,.room-fab:not(.has-cover) .room-fab-cover{display:none}

/* 两行：歌名 600 + 负字距，副行 400 灰一档；计数开等宽数字，跳数时不左右抖。
   不做跑马灯——房内已经给全名，这里再滚只会和歌词抢注意力。
   收起态宽度归零（154 = 252 - 外壳左右 16 - 封面 36 - 间距 10 - 播放键 36） */
.room-fab-meta{display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:1.3;
  width:0;margin-left:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:width .32s cubic-bezier(.2,.85,.25,1),margin .32s cubic-bezier(.2,.85,.25,1),opacity .2s ease}

.room-fab:hover .room-fab-meta,.room-fab:focus-within .room-fab-meta{width:154px;margin-left:10px;opacity:1}

.room-fab-name,.room-fab-sub,.room-fab-t{max-width:154px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.room-fab-name{font-weight:600;letter-spacing:-.1px}
.room-fab-sub{margin-top:1px;font-size:11.5px;font-weight:400;color:#5f776c;font-variant-numeric:tabular-nums}
.room-fab-t{display:none;font-weight:600;letter-spacing:-.1px}

.room-fab.empty .room-fab-t{display:block}
.room-fab.empty .room-fab-name,.room-fab.empty .room-fab-sub{display:none}
.room-fab.empty::after{display:none}   /* 清空后 --p 还留着上一首的百分比，别在空条子底下留一截绿线 */

/* 计数：桌面不再挂药丸片（副行里已经有「N 首」，两处报同一个数是噪音），只留手机档那枚角标 */
.room-fab-n{display:none}

/* 播放/暂停：这一条上唯一的主操作。用墨色实心圆而不是品牌绿实心——
   小面积浮层上再来一块饱和绿就是"土"（audit: oversaturated accent）；
   绿色整条只留进度线一处，强调色才有分量 */
.room-fab-play{position:relative;flex:0 0 auto;width:0;height:36px;overflow:hidden;opacity:0;
  border:0;border-radius:50%;background:#1c2b26;color:#fff;cursor:pointer;
  box-shadow:0 2px 8px rgba(20,56,44,.26);
  transition:width .32s cubic-bezier(.2,.85,.25,1),opacity .2s ease,background .18s ease,
    transform .18s ease,box-shadow .18s ease}

.room-fab:hover .room-fab-play,.room-fab:focus-within .room-fab-play{width:36px;opacity:1}

.room-fab-play:hover{background:#131e1a;transform:translateY(-1px)}
.room-fab-play:active{transform:scale(.94)}
.room-fab.empty .room-fab-play{display:none}
.room-fab.playing .room-fab-play{box-shadow:0 2px 8px rgba(20,56,44,.26),0 0 0 4px rgba(20,56,44,.14)}

/* 三角比同宽度的方块视觉偏左，左边距多给 1px 做光学居中（audit：数学居中≠视觉居中） */
.room-fab-play::before{content:'';position:absolute;left:50%;top:50%;margin:-7px 0 0 -3px;
  border-left:13px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}

.room-fab.playing .room-fab-play::before{display:none}

.room-fab.playing .room-fab-play::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:13px;
  margin:-6.5px 0 0 -6px;
  background:linear-gradient(to right,currentColor 0 4px,transparent 4px 8px,currentColor 8px 12px)}

/* 触屏没有 hover（平板、触屏笔电）：宽屏上直接常开，不然播放键和歌名永远够不着。
   ≤750 那档本来就是纯圆盘按钮，用 min-width 排除，不受这条影响 */
@media screen and (hover:none) and (min-width:751px){
.room-fab,.room-fab:hover{width:252px}
.room-fab .room-fab-meta{width:154px;margin-left:10px;opacity:1}
.room-fab .room-fab-play{width:36px;opacity:1}
.room-fab::after{opacity:1}}

/* 听歌室的图标：用站点自带的图标字体字形 fed-icon-yinyue（和导航「歌单」同一枚）。
   2026-09-29 用户标注"为什么不使用 fed-icon-font fed-icon-yinyue"——此前是 CSS 手画的
   白唱片 + 绿芯，中间又改成手画八分音符，都不如直接复用现成字形：省掉一堆几何声明，
   14px 那档也不用再靠百分比缩放（原来给 ::after 补 5px 芯就是为这个）。
   **别被 @font-face 绕进去**：iconfont.css 里有两个，走 at.alicdn.com CDN 的那个 family 叫
   `iconfont`（实测 unloaded，全站没人用）；导航用的是 `fed-icon-font`，base64 内嵌在同一份
   CSS 里、每页都已加载（document.fonts.check 为 true），不额外吃网络。
   房间里的列表键仍是 CSS 画的三条线（那套字体里没有对应字形）。 */
.room-disc-ico{font-size:18px;line-height:1}

/* 手机档只做一半（拍板过的）：46px 圆盘、有歌就显封面，不给独立播放键——底部本来就有
   .mfooter / .fed-tabr-info 两条固定栏，再叠一条通栏播放条要重算 body 下缘和层叠，风险高于收益。
   计数桌面隐掉、只在这一档显（挂在右上：外壳是 fixed，就是它的定位包含块）。
   隐文字用整块 .room-fab-meta，比逐条列 t/name/sub 省事也不会漏。 */
@media screen and (max-width:750px){
.room-fab{right:14px;bottom:120px;width:48px;height:48px;padding:0;border-radius:50%}
/* 上面 .room-fab:hover / :focus-within 是 (0,2,0)，会压过本块那条 (0,1,0)：
   不钉回去，窄窗口一悬停就撑出 252px 空壳（文字和播放键在这档本来就是 display:none） */
.room-fab:hover,.room-fab:focus-within{width:48px}
.room-fab::after{display:none}
.room-fab-main{width:100%;padding:0;justify-content:center;border-radius:50%}
.room-fab-disc{width:48px;height:48px;border-radius:50%;box-shadow:none}
.room-fab .room-fab-meta,.room-fab .room-fab-play{display:none}
.room-fab-n:not([hidden]){position:absolute;top:-2px;right:-2px;display:block;min-width:18px;height:18px;
  line-height:18px;padding:0 4px;border-radius:9px;background:#1aa270;color:#fff;font-size:10px;
  font-style:normal;text-align:center;box-shadow:0 1px 4px rgba(20,56,44,.28)}}



/*
 * 房间本体的版式参考 MKOnlineMusicPlayer（用户给的）：整屏深色底 + 当前封面的放大模糊背景、
 * 正中一个旋转圆盘、盘下歌名歌手、再下歌词、底部一条控制条（进度条贴着上沿、圆形播放键居中）、
 * 播放列表从侧边滑出。对应取它哪几个数：底渐变用它的 linear-gradient(200deg,#7f7280,#000) 思路
 * （这里换成偏本站墨绿的 #2b3134→#07090a）；圆盘 186px 是它手机档的尺寸，这里桌面 240 / ≤750 186；
 * 控制条它 100px 高，这里 footer 96px。强调色不跟它的 #31c27c——全站只此一绿，继续 #1aa270/#4fd1a1。
 * 图标没有素材，用 CSS 画（三角=border、暂停=background 渐变两根条、列表用现成的 fa-bars）。
 */
.room{position:fixed;left:0;top:0;right:0;bottom:0;z-index:99999990;overflow:hidden;
  background:linear-gradient(200deg,#2b3134,#07090a);color:#eef4f1}

.room[hidden]{display:none}

.room.open{animation:room-in .34s ease both}

.room.in-close{animation:room-out .26s ease both}

@keyframes room-in{from{clip-path:circle(0 at var(--rx,95%) var(--ry,92%))}
  to{clip-path:circle(150% at var(--rx,95%) var(--ry,92%))}}

@keyframes room-out{from{clip-path:circle(150% at var(--rx,95%) var(--ry,92%))}
  to{clip-path:circle(0 at var(--rx,95%) var(--ry,92%))}}


/* 背景：当前封面放大 20% 再糊掉，压一层暗罩——不压的话白字在亮封面上站不住 */
.room-bg{position:absolute;left:-10%;top:-10%;width:120%;height:120%;background-position:center;
  background-size:cover;background-repeat:no-repeat;filter:blur(48px) saturate(1.15);opacity:.6}

.room-bg::after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(5,9,8,.42)}


.room-top{position:absolute;left:0;top:0;right:0;z-index:4;display:flex;align-items:center;gap:14px;
  padding:14px 18px;font-size:13px}

.room-count{color:#a9c2b7}

.room-topbtn{margin-left:auto;padding:0;border:0;background:transparent;color:#a9c2b7;font-size:13px;cursor:pointer}

.room-topbtn + .room-topbtn{margin-left:0}

.room-topbtn:hover{color:#4fd1a1}

.room-x{font-size:20px;line-height:1;padding:0 2px}


/* 舞台：盘 → 歌名歌手 → 歌词，纵向居中；底部给控制条留 150px */
.room-stage{position:absolute;left:0;top:52px;right:0;bottom:150px;z-index:2;display:flex;
  flex-direction:column;align-items:center;justify-content:center;padding:0 18px;overflow:hidden}

.room-discwrap{position:relative;flex:0 0 auto;width:240px;height:240px;border-radius:50%;overflow:hidden;
  /* position:relative 是给等待态那圈弧（::after）锚定用的，不加它会铺满整个 .room-stage */
  box-shadow:0 18px 50px rgba(0,0,0,.55);animation:room-spin 24s linear infinite;
  animation-play-state:paused}
                       /* 暂停时定格，接着播时从原角度继续 */
.room-discwrap.on{animation-play-state:running}

/* 列表空着时整枚转盘不展示（用户标注"无列表时候无需展示"）：那会儿盘上只有 nopic 占位图，
   占着 240px 竖向空间只把"还没有在播放的歌"两行字往下顶。藏掉后 .room-stage 的
   justify-content:center 会自己把剩下的文字块重新居中，不用补别的定位。 */
.room-discwrap.empty{display:none}

.room-disc{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;
  border:10px solid rgba(255,255,255,.08);background:#132420}

@keyframes room-spin{to{transform:rotate(360deg)}}

.room-name{margin-top:22px;max-width:100%;font-size:20px;font-weight:400;text-align:center;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

.room-artist{margin-top:6px;color:#a9c2b7;font-size:13px;text-align:center}

/* 歌词盒。用户标注"现在太拥挤太小了"——原来是 150px 高 / 30px 行距 / 14px 字，一屏挤 5 行小字。
   放到 250px / 42px / 17px（当前行 22px），一屏约 6 行、字大一号也才占回本来空着的位子：
   .room-stage 是 top:52 bottom:150 的绝对定位区，实测 1145px 高的窗口里有 ~600px 富余。
   flex:0 1 auto 是窗口矮时的出口——转盘那档是 flex:0 0 auto 不让步，挤压全落在这盒子上
   （overflow:hidden 让它的自动最小尺寸为 0，缩得下去），所以定高不会被顶出舞台。 */
.room-lyric{flex:0 1 auto;width:100%;max-width:560px;height:250px;margin-top:22px;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent);
  mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent)}

/* 列表空着时歌词盒也收掉，和上面 .room-discwrap.empty 一套（见那段的说明） */
.room-lyric.empty{display:none}

.room-lyric ul{margin:0;padding:0;list-style:none;transition:transform .35s ease}

/* 行高用定值而不是 1.2 之类的倍数：当前行字号跳到 22px 时行槽不能跟着变，
   否则歌词逐行点亮时整段会上下抽动（摆位是按行中心算的，见 app.js 的 lyricCenter） */
.room-lyric li{height:42px;line-height:42px;text-align:center;font-size:17px;color:rgba(255,255,255,.42);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

.room-lyric li.on{color:#4fd1a1;font-size:22px}


/* 底部控制条：96px，背景向下渐深（参考的 100px 那股味道），进度条贴在上沿 */
.room-footer{position:absolute;left:0;right:0;bottom:0;z-index:3;height:96px;padding:0 18px;
  background:linear-gradient(transparent,rgba(0,0,0,.5))}

.room-progline{display:flex;align-items:center;gap:12px;max-width:760px;margin:0 auto}

.room-t1,.room-t2{min-width:40px;color:#a9c2b7;font-size:12px}

.room-t2{text-align:right}

.room-prog{position:relative;flex:1;height:16px;cursor:pointer}

.room-prog-track{position:absolute;left:0;right:0;top:6px;height:4px;border-radius:2px;background:rgba(255,255,255,.18)}

.room-prog-bar{position:absolute;left:0;top:6px;width:0;height:4px;border-radius:2px;background:#4fd1a1}

.room-prog-dot{position:absolute;right:-5px;top:-4px;width:12px;height:12px;border-radius:50%;background:#fff;
  box-shadow:0 0 6px rgba(0,0,0,.5)}

.room-prog:focus-visible{outline:2px solid #7ef0c2;outline-offset:3px}

/* 等待态（用户标注"音乐加载有一定时间反应，可以给听歌室添加等待效果"）。
   取地址 + 首帧缓冲通常 0.3~2 秒，而房里那行状态字早就整条撤了，所以"在等"只能靠形状说：
   盘沿一圈弧 + 播放键换成环形 + 进度轨走一道微光，三处都由 .room 上的 .load 一个类派生。
   弧用 mask 只留外圈，不为此加一个 DOM 节点。 */
.room.load .room-discwrap::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(79,209,161,0) 0 58%,rgba(79,209,161,.9) 94%,rgba(79,209,161,0) 100%);
  -webkit-mask:radial-gradient(closest-side,transparent 0 93%,#000 94%);
  mask:radial-gradient(closest-side,transparent 0 93%,#000 94%);
  animation:room-load-arc 1s linear infinite}

.room.load .room-prog-track{background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.44),rgba(255,255,255,.16));
  background-size:200% 100%;animation:room-shimmer 1.1s linear infinite}

/* display 必须显式写：中途卡顿（waiting）时 audio 并没暂停，.on 还在，
   上面 .room-ic-main.on::before{display:none} 会把 spinner 一起藏掉——
   这条 (0,3,0) 压得住，顺手把暂停那两根条隐了，键上只留一个环形色 */
.room.load .room-ic-main::before{display:block;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  border:2px solid rgba(255,255,255,.32);border-top-color:#fff;animation:room-load-arc .8s linear infinite}

.room.load .room-ic-main::after{display:none}

@keyframes room-load-arc{to{transform:rotate(360deg)}}

@keyframes room-shimmer{to{background-position:-200% 0}}

.room-ctrl{display:flex;align-items:center;justify-content:center;gap:24px;height:60px}

.room-ic{position:relative;width:40px;height:40px;padding:0;border:0;background:transparent;
  color:#eef4f1;cursor:pointer}

.room-ic:hover{color:#4fd1a1}

.room-ic-main{width:56px;height:56px;border-radius:50%;background:#1aa270;color:#fff}

.room-ic-main:hover{color:#fff;opacity:.92}

/* 播放=右三角；放上 .on 改成暂停的两根条 */
.room-ic-main::before{content:'';position:absolute;left:50%;top:50%;margin:-8px 0 0 -5px;
  border-left:15px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}

.room-ic-main.on::before{display:none}

.room-ic-main.on::after{content:'';position:absolute;left:50%;top:50%;width:18px;height:18px;
  margin:-9px 0 0 -9px;
  background:linear-gradient(to right,currentColor 0 6px,transparent 6px 12px,currentColor 12px 18px)}

/* 上一首/下一首：竖条 + 指向双三角 */
.room-ic-prev::before{content:'';position:absolute;left:50%;top:50%;margin:-7px 0 0 -11px;width:3px;height:14px;background:currentColor}

.room-ic-prev::after{content:'';position:absolute;left:50%;top:50%;margin:-7px 0 0 -7px;
  border-right:10px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}

.room-ic-next::before{content:'';position:absolute;left:50%;top:50%;margin:-7px 0 0 8px;width:3px;height:14px;background:currentColor}

.room-ic-next::after{content:'';position:absolute;left:50%;top:50%;margin:-7px 0 0 -3px;
  border-left:10px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}

.room-ic-txt{width:auto;height:34px;padding:0 14px;border:1px solid rgba(255,255,255,.22);border-radius:17px;
  font-size:13px}

/* 列表键：三条线（fa-bars 在站里没有背景图定义，是空的——别再退回图标字体） */
.room-ic-list::before{content:'';position:absolute;left:50%;top:50%;width:18px;height:14px;margin:-7px 0 0 -9px;
  background:linear-gradient(to bottom,currentColor 0 2px,transparent 2px 6px,
    currentColor 6px 8px,transparent 8px 12px,currentColor 12px 14px)}

.room-num{position:absolute;top:-1px;right:-4px;min-width:16px;height:16px;line-height:16px;padding:0 4px;
  border-radius:8px;background:#1aa270;color:#fff;font-size:11px;font-style:normal}

.room-num[hidden]{display:none}


/* 播放列表：右侧滑出（≤750 从底部推上来），当前项白色——参考里 .list-playing 就是这个意思 */
.room-pmask{position:absolute;left:0;top:0;right:0;bottom:0;z-index:4;background:rgba(0,0,0,.4)}

.room-pmask[hidden]{display:none}

.room-panel{position:absolute;right:0;top:0;bottom:0;z-index:5;display:flex;flex-direction:column;
  width:min(360px,86vw);background:rgba(10,18,15,.94);transform:translateX(100%);
  transition:transform .28s ease;box-shadow:-12px 0 40px rgba(0,0,0,.45)}

.room-panel.open{transform:none}

.room-panel-head{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;color:#a9c2b7;font-size:13px}

.room-panel-head b{color:#eef4f1;font-weight:400}

.room-panel-head .room-topbtn{margin-left:0}

.room-panel-x{margin-left:auto}

.room-list{flex:1 1 auto;min-height:0;overflow:auto;margin:0;padding:0 6px 12px;list-style:none}

.room-list li{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:6px}

.room-list li[data-i]{cursor:pointer}

.room-list li[data-i]:hover{background:rgba(255,255,255,.06)}

.room-n{width:24px;flex:0 0 auto;color:#6f8d80;font-size:12px;text-align:right}

.room-info{flex:1;min-width:0}

.room-t{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

.room-a{display:block;margin-top:2px;color:#8fb3a5;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

.room-list li.current .room-t{color:#fff}

.room-list li.current .room-n{color:#4fd1a1}

.room-rm{flex:0 0 auto;height:26px;padding:0 10px;border:1px solid rgba(255,255,255,.16);border-radius:13px;
  background:transparent;color:#8fb3a5;font-size:12px;cursor:pointer}

.room-rm:hover{border-color:#f4511e;color:#f4511e}

.room-empty{padding:26px 2px;color:#6f8d80;font-size:13px;text-align:center}

@media screen and (max-width:750px){
  .room-discwrap{width:186px;height:186px}
  .room-lyric{height:196px}
  .room-stage{bottom:140px}
  .room-panel{left:0;top:auto;right:0;bottom:0;width:auto;height:70%;transform:translateY(100%);
    border-radius:14px 14px 0 0}
  .room-panel.open{transform:none}}



/*
 * 「全部播放」（歌单信息面板里）：站点绿实心胶囊 + CSS 画的三角，和房间里的图标同一套语言。
 * 位置要贴着封面底边（用户标注"按钮底对齐"）——实测原来是浮在封面底边上方 16px：
 * 所以这块面板改成 flex（封面/文字两列等高），按钮在文字列里 margin-top:auto 压到底。
 * 只作用于歌单页（模板加 .singer_info--sheet）：歌手/专辑页共用 .singer_info，不动它们。
 */
.singer_info--sheet{display:flex;align-items:stretch}

.singer_info--sheet .pic{float:none;flex:0 0 auto;margin-right:10px}
   /* 原布局靠 calc(100% - 140px) 留的 10px 缝 */
.singer_info--sheet .pic img{float:none}

.singer_info--sheet .list_r{float:none;flex:1 1 auto;width:auto;display:flex;flex-direction:column}

.singer_info--sheet h1,.singer_info--sheet .info{float:none;width:auto}

.room-playall{position:relative;float:left;clear:both;height:30px;line-height:30px;margin-top:10px;
  padding:0 16px 0 32px;border-radius:15px;background:#1aa270;color:#fff;font-size:13px}

.singer_info--sheet .room-playall{float:none;clear:none;margin-top:auto;align-self:flex-start}

.room-playall::before{content:'';position:absolute;left:14px;top:50%;margin-top:-6px;width:0;height:0;
  border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}

.room-playall:hover{color:#fff;opacity:.92}

/* 榜单位次徽章——Ribbon 折角（用户标注"重新设计。Ribbon 四色。放在左上角"）。
   旗形主体贴在封面左上角，右下角用一个深一档的三角(:after)做"向后折叠"的立体感；数字白色居中。
   .pic 本来就 overflow:hidden，旗形溢出的右下半截会被封面裁掉，正好是折角该有的样子。
   四色由 home.php 传的档位类决定：r1 金 / r2 银 / r3 铜 / rn 站点绿（第 4 名起共用）。
   只有首页两块榜单传位次，搜索结果和详情页推荐传默认 0、模板根本不输出这个节点。 */
.lkmusic_list li .pic .rank{position:absolute;top:8px;left:0;z-index:3;
  min-width:30px;height:22px;line-height:22px;padding:0 8px 2px 6px;
  color:#fff;font-size:13px;font-weight:700;text-align:center}

.lkmusic_list li .pic .rank::after{content:'';position:absolute;left:0;top:100%;
  border-top:5px solid;border-right:6px solid transparent}

.lkmusic_list li .pic .r1{background:#f5a623}

.lkmusic_list li .pic .r1::after{border-top-color:#c9821a}

.lkmusic_list li .pic .r2{background:#9aa7b4}

.lkmusic_list li .pic .r2::after{border-top-color:#76828e}

.lkmusic_list li .pic .r3{background:#cd7f32}

.lkmusic_list li .pic .r3::after{border-top-color:#a1631f}

.lkmusic_list li .pic .rn{background:#1aa270}

.lkmusic_list li .pic .rn::after{border-top-color:#137a54}

/* 歌手名浮在封面左下角，沿用原来那枚时长胶囊的语言：半透黑底 + 白字 + 胶囊圆角。
   base.css 给 `.singer` 的是灰字 #888（`.lkmusic_list li .singer`，特异性 0,2,1），这里 (0,3,1) 盖得住。
   长名字用 max-width + 省略号截断；.pic 本来就 overflow:hidden，不会溢到卡片外。
   2026-09-29 用户标注"移除链接入口"，节点从 <a> 换成 <span>，选择器跟着去掉 a。
   **pointer-events:none 是必须的**：胶囊绝对定位浮在封面那条 /song/ 链接之上（z-index:3），
   换成不是链接的 span 之后它会把这 65x20 的点击直接吞掉——不穿透的话点歌手名那块就没反应了。 */
.lkmusic_list li .pic .singer{position:absolute;left:6px;bottom:6px;z-index:3;pointer-events:none;
  max-width:calc(100% - 12px);height:20px;line-height:20px;padding:0 6px;border-radius:10px;
  background:rgba(0,0,0,.6);color:#fff;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 定列 + 每端固定条数的网格板块（`.fixed_grid`，2026-09-29 从 `.home_music` 改的名——当时
   详情页「随机推荐」也挂了它，名字里再带 home 就成误导；现在它又改挂 `.rec_side` 了，见下一段）。
   上限**只能写死在 CSS 里**——
   `:nth-child()` 的 An+B 不接受 var()（写了整条规则会被浏览器判非法丢弃，实测过）。所以模板里
   只挂 `.fixed_grid` 类，数字在这里配平：桌面 12×2=24 / iPad 4×2=8 / 手机 3×3=9，都是整数行不留空位。
   `nth-child(n+25)` = "第 24 条之后全部隐藏"，被隐藏的卡不占格子、剩下的自然铺满前 N 格。
   用它的只有 home.php 两块音乐榜（数据各给 40 条，靠这里截）。
   桌面这档 2026-09-29 从 6 列改成 12 列（用户标注"电脑端横排需要显示 12 条，共 24 条"），
   整块关在 min-width:1025px 里：列间距和 12px 歌名都是跟着 12 列才成立的，漏到 iPad/手机档
   会把那边本来就够宽的卡无故压小，所以不写进公共那条。 */

/* 详情页「随机推荐」：坐在播放器下面那一栏（用户标注"随机推荐放在左侧，歌手和下载板块保持不动"）。
   模板里它排在 `.player_right` **之后**，所以这条 float:left 落点就是 play_left 下面、右侧那 340px
   卡片的左边；两栏宽度相加 100% - 10px，恒小于容器，于是左栏永远和右栏并排，不会因为右栏比
   播放器高就被顶到下面去（这是 float 而不是 grid 的原因：grid 的行高取整行最大值，右栏一长就整块下沉）。

   列数/条数按用户选定的「4 列 × 2 行 = 8 张」定，并且每档都保持 2 行——右侧歌手+下载卡是 322px
   （宽度锁死 340px，所以这个高度不随视口变），左栏只有稳住 2 行才贴得住它：
     751–1199  左栏 555~620 → 4 列，卡 116~132px，块高 350~382
     1200–1439 左栏 832~1068 → 6 列，卡 117~153px，块高 382~466
     ≥1440     左栏 1068~1541 → 8 列，卡 117~174px，块高 382~508
   列数不能交给 auto-fill：它在中间某档会切出 5 列，条数就变成「5 + 3」这种残行。
   卡宽掉到 116px 一档，歌名跟着降到 12px（14px 时几乎全被省略号吃掉），和首页 dense 卡同一套字号。
   手机 ≤750 没有右侧卡要配平，沿用 base.css 的通栏 3 列、截到 6 条（2 行）；下载块在 DOM 里排在本块
   前面，手机上仍是先下载后推荐。 */
@media screen and (min-width:751px){
.lkmusic_list.rec_side{float:left;width:calc(100% - 350px)}
.lkmusic_list.rec_side > ul{grid-template-columns:repeat(4,minmax(0,1fr))}
.lkmusic_list.rec_side > ul > li:nth-child(n + 9){display:none}
.lkmusic_list.rec_side > ul > li .name a.url{font-size:12px}}

@media screen and (min-width:1200px){
.lkmusic_list.rec_side > ul{grid-template-columns:repeat(6,minmax(0,1fr))}
.lkmusic_list.rec_side > ul > li:nth-child(n + 13){display:none}}

@media screen and (min-width:1440px){
.lkmusic_list.rec_side > ul{grid-template-columns:repeat(8,minmax(0,1fr))}
.lkmusic_list.rec_side > ul > li:nth-child(n + 17){display:none}}

@media screen and (max-width:750px){
.lkmusic_list.rec_side > ul > li:nth-child(n + 7){display:none}}

/* 首页「推荐歌单」每端条数配平。这张卡是浮动网格（列宽在 base.css：桌面 10% / 平板 25% / 手机 33.33%），
   条数原先由 home.php 给第 7 条起挂 `.hide-wap`——那是跟桌面 10 列无关、跟平板 4 列正好打架的写死值，
   平板档就留下 4 + 2 的残行（用户标注"补齐数量"）。改成在这里按断点截成整数行：
   桌面 10×2=20 / 平板 4×2=8 / 手机 3×2=6。同样不能写成变量（见上面 `.fixed_grid` 那段）。 */
@media screen and (min-width:1025px){
.ilingku_list > ul > li:nth-child(n + 21){display:none}}

@media screen and (min-width:751px) and (max-width:1024px){
.ilingku_list > ul > li:nth-child(n + 9){display:none}}

@media screen and (max-width:750px){
.ilingku_list > ul > li:nth-child(n + 7){display:none}}
@media screen and (min-width:1025px){
.fixed_grid > ul{grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.fixed_grid > ul > li .name a.url{font-size:12px}}


.fixed_grid > ul > li:nth-child(n + 25){display:none}

@media screen and (min-width:751px) and (max-width:1024px){
.fixed_grid > ul{grid-template-columns:repeat(4,minmax(0,1fr))}
.fixed_grid > ul > li:nth-child(n + 9){display:none}}


@media screen and (max-width:750px){
.fixed_grid > ul > li:nth-child(n + 10){display:none}}

@media screen and (prefers-reduced-motion:reduce) {

  .skip-link{transition:none}
}