/* ==========================================================================
我的网易云音乐 · 面板样式（ncm.css）
--------------------------------------------------------------------------
依赖 common/panel.css 的 --ncm-* 变量别名与 .pn-* 公共组件。
本模块只保留四部分：① 唱片盒（歌单卡 .ncm-pbox + 歌单内页封面 .ncm-dcover 共用）
② 歌单内页头部 ③ 曲目列表的「序号列」 ④ 最近在听的横向卡片
★ 曲目列表直接复用主题侧栏播放器的 .music_menu_list 结构（见 style/aside.css）。
由模板里的 ncm_song_row($i, $s) 产出的竖向行，共两处：
① 「喜爱的音乐」（列表页 #ncmSongs）
② 歌单详情内页曲目（#ncmSongs）
行样式（底色 / 边框 / 圆角 / hover 位移 / 封面缩放）全部由 aside.css 提供，
本文件只补主题列表没有的「序号列」，以及把歌名一栏撑开让歌手靠右。
★ 「最近在听」（#ncmRecents）虽然也把容器挂在 .music_menu_list 下（为了白拿
主题的「点 li 即播」），但它是**横向卡片**，由 ncm_recent_card($s) 产出，
行样式被第 3 节整个覆盖 —— 它与上面那个竖向列表**不是同一套视觉**。
========================================================================== */
.ncm *, .ncm *::before, .ncm *::after { box-sizing: border-box; }
.ncm b, .ncm strong { font-weight: 700; }
.ncm a { text-decoration: none; color: inherit; }
/* 数字统一等宽 */
.ncm .pn-metric-val {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* 区块小标题后缀（创建的歌单 / 喜爱的音乐 / 最近在听 数量说明） */
.ncm-sub {
font-size: 12px;
color: var(--ncm-text-3);
font-weight: 400;
margin-left: .5rem;
letter-spacing: 0;
}
/* 名片签名 */
.ncm-id-sign {
margin-top: .35rem;
font-size: .84rem;
color: var(--ncm-text-2);
max-width: 42rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 在线状态胶囊：网易云主题红（走 .is-theme）；链接走主题深 */
.pn-chip.is-link { color: var(--ncm-theme-deep); }
.pn-chip.is-link:hover {
background: var(--ncm-theme-soft);
border-color: color-mix(in srgb, var(--ncm-theme) 26%, transparent);
}
/* ==========================================================================
1. 创建的歌单（唱片盒造型：方形纸封套 + 右侧露出唱片；标题在封面下方）
========================================================================== */
.ncm-playlists {
display: grid;
/* 列宽 168px 起：盒宽 4 : 盒高 3，封套边长 = 盒宽 × 75%，
168px 列 → 封套约 126px，比原来 150px 的整块封面略小但多了唱片区 */
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 2rem 2.5rem;
align-items: start;
}
/* 卡片本体：只有「唱片盒 + 标题」，无边框/无卡片背景 */
.ncm-pcard {
display: flex;
flex-direction: column;
min-width: 0;
color: inherit;
cursor: pointer;
}
.ncm-pcard:focus-visible {
outline: 2px solid var(--ncm-theme);
outline-offset: 4px;
border-radius: 10px;
}
/* 唱片盒公共几何：歌单卡（.ncm-pbox）与歌单内页封面（.ncm-dcover）共用这一套。
整盒宽高比 4 : 3：左侧 75%（= 盒高，因此正好是正方形）是纸封套，右侧露出唱片。
⚠ --ncm-sleeve 与 --ncm-disc 都是百分比：
--ncm-sleeve 相对【盒宽】= 盒高/盒宽（4:3 → 3/4），保证封套是正方形；
--ncm-disc 相对【盒高】，即唱片直径比盒高矮一圈。
若比例改成 a:b，--ncm-sleeve 必须改成 b/a，否则封套会被拉成长方形。 */
.ncm-pbox,
.ncm-dcover {
--ncm-sleeve: 75%;
--ncm-disc: 80%;
position: relative;
aspect-ratio: 4 / 3;
transition: transform .22s ease;
}
/* --- 唱片：垂直居中、右贴边，直径 88% 盒高（比封套矮一圈）--- */
.ncm-pbox::before,
.ncm-dcover::before {
content: '';
position: absolute;
top: 50%;
right: 1rem;
height: var(--ncm-disc);
width: calc(var(--ncm-disc)* .75);
transform: translateY(-50%);
z-index: 1;
border-radius: 50%;
background:
/* 中心圆标（唱片公司贴纸） */
radial-gradient(circle at 50% 50%, #e3bf55 0 12%, #cba234 12% 15%, transparent 15%),
/* 中孔 */
radial-gradient(circle at 50% 50%, #101012 0 2.2%, transparent 2.2%),
/* 音轨纹路 */
repeating-radial-gradient(circle at 50% 50%,
rgba(255, 255, 255, .06) 0 1px, rgba(0, 0, 0, 0) 1px 3.5px),
/* 斜向反光（hover 旋转时才看得出来，负责「转起来」的观感） */
linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 34%),
/* 盘体 */
radial-gradient(circle at 44% 34%, #43454d 0%, #22242a 38%, #0c0d0f 100%);
box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .7);
transition: transform .38s cubic-bezier(.2, .7, .3, 1);
}
/* --- 封套正面：正方形，贴左（歌单卡封面 / 内页封面 / 无封面占位共用）--- */
.ncm-pbox img,
.ncm-dcover img,
.ncm-dcover-txt {
position: absolute;
left: 0; top: 0;
width: var(--ncm-sleeve);
height: 100%;
display: block;
object-fit: cover;
border-radius: 7px;
z-index: 2;
background: var(--ncm-line-soft);
box-shadow:
0 1px 0 rgba(0, 0, 0, .04),
0 10px 22px -14px rgba(0, 0, 0, .6);
}
/* --- 封套处理层：左侧书脊折边 + 塑料套反光 --- */
.ncm-pbox::after,
.ncm-dcover::after {
content: '';
position: absolute;
left: 0; top: 0;
width: var(--ncm-sleeve);
height: 100%;
z-index: 3;
border-radius: 7px;
opacity: .8;
pointer-events: none;
transition: opacity .25s ease;
background:
linear-gradient(90deg,
rgba(0, 0, 0, .34) 0, rgba(0, 0, 0, .28) 4px,
rgba(255, 255, 255, .20) 9px, rgba(0, 0, 0, .10) 13px,
rgba(0, 0, 0, 0) 16px),
linear-gradient(118deg,
rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .07) 20%,
rgba(255, 255, 255, 0) 42%);
}
.ncm-pcard:hover .ncm-pbox { transform: translateY(-4px); }
/* 唱片往右抽出一小截并转一下（圆形旋转不影响包围盒，不会顶到相邻卡片）。
注意必须保留 translateY(-50%)，否则唱片会掉到下半盒 */
.ncm-pcard:hover .ncm-pbox::before { transform: translate(8%, -50%) rotate(24deg); }
.ncm-pcard:hover .ncm-pbox::after { opacity: 1; }
/* 内页封面不是链接，靠头部卡片的 hover 带一下唱片，动作轻一点即可 */
.ncm-dhead:hover .ncm-dcover::before { transform: translate(8%, -50%) rotate(18deg); }
.ncm-dhead:hover .ncm-dcover::after { opacity: 1; }
/* 曲目数角标：贴封套右下（右边量 25% = 封套右边缘，再内缩 7px） */
.ncm-pc-count {
position: absolute;
right: calc(25% + 7px);
bottom: 8px;
z-index: 4;
font-size: 11px;
font-weight: 600;
color: #fff;
padding: 2px 8px;
border-radius: 6px;
background: rgba(0, 0, 0, .45);
backdrop-filter: blur(4px);
}
/* 「我喜欢的音乐」红心角标：贴封套右上 */
.ncm-pc-fav {
position: absolute;
top: 8px;
right: calc(25% + 7px);
z-index: 4;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
font-size: 14px;
color: #fff;
border-radius: 50%;
background: color-mix(in srgb, var(--ncm-theme) 90%, transparent);
box-shadow: 0 2px 8px rgba(194, 12, 12, .35);
}
/* 标题：封面下方，最多两行，保证整行对齐 */
.ncm-pname {
margin-top: .55rem;
font-size: .86rem;
font-weight: 600;
line-height: 1.35;
color: var(--ncm-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
transition: color .16s ease;
}
.ncm-pcard:hover .ncm-pname { color: var(--ncm-theme-deep); }
/* ==========================================================================
1b. 歌单详情内页（?playlist=xxx）
========================================================================== */
/* 返回按钮 */
.ncm-back {
display: inline-flex;
align-items: center;
gap: .3rem;
margin-bottom: 1rem;
padding: .35rem .85rem .35rem .65rem;
font-size: .82rem;
font-weight: 600;
color: var(--ncm-text-2);
background: var(--ncm-card);
border: 1px solid var(--ncm-line);
border-radius: 999px;
transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.ncm-back:hover {
color: var(--ncm-theme-deep);
background: var(--ncm-theme-soft);
border-color: color-mix(in srgb, var(--ncm-theme) 30%, var(--ncm-line));
}
.ncm-back i { font-size: 1.05rem; line-height: 1; }
/* 顶部：封面居中，歌单信息排在封面下方
（原先是左右两栏，信息少时右侧留白很大，改成竖向布局后宽度利用更充分） */
.ncm-dhead {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--margin);
padding: var(--margin);
margin-bottom: var(--margin);
}
/* 内页封面同样是「唱片盒」——几何与层序全在第 1 节，这里只定尺寸。
盒宽 224px → 封套 168px（224 × 75%），与改造前的正方形封面一样大。
★ height 显式写死（= 224 × 3/4），万一浏览器不认 aspect-ratio 也不会塌成 0 高。 */
.ncm-dcover {
flex: 0 0 auto;
width: 224px;
height: 168px;
}
/* 无封面时的 ♫ 占位：套用同样的封套正面样式，内容居中即可 */
.ncm-dcover-txt {
display: flex;
align-items: center;
justify-content: center;
font-size: 2.4rem;
color: var(--ncm-text-3);
}
.ncm-dinfo { width: 100%; min-width: 0; }
.ncm-dname {
margin: 0 0 .55rem;
font-size: 1.3rem;
font-weight: 800;
line-height: 1.3;
letter-spacing: .01em;
color: var(--ncm-text);
word-break: break-word;
}
/* 胶囊 / 标签行居中 */
.ncm-dhead .pn-id-chips,
.ncm-dhead .pn-tags { justify-content: center; }
.ncm-dtags { margin-top: .65rem; }
.ncm-ddesc {
/* 简介块整体居中、文字仍左对齐（长段落居中很难读） */
max-width: 42rem;
margin: .65rem auto 0;
padding-top: .65rem;
border-top: 1px dashed var(--ncm-line-soft);
font-size: .78rem;
line-height: 1.65;
color: var(--ncm-text-2);
text-align: left;
max-height: 8.5rem;
overflow-y: auto;
white-space: pre-line;
word-break: break-word;
}
/* ==========================================================================
2. 曲目列表（「喜爱的音乐」与歌单内页共用一套标记）
行样式全部来自主题 aside.css 的 .music_menu_list，这里只补：
① 去掉主题给整列加的 .75rem 内边距（面板外层已有留白）
② 序号列（主题列表没有这列）
③ 撑开歌名栏，把歌手推到最右
④ 放开主题给歌名设的 max-width:12rem（那是给侧栏抽屉用的）
⑤ 最后一行去掉 li 自带的 margin-bottom
========================================================================== */
.ncm .ncm-songs { padding: 0; }
.ncm .ncm-songs > li > .ncm-song-idx {
flex: 0 0 auto;
width: 1.6rem;
text-align: center;
font-size: .78rem;
font-weight: 700;
color: var(--ncm-text-3);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* 主题原版靠 space-between 排「歌名 | 歌手」两栏；多了序号列后
必须显式让歌名栏吃掉剩余宽度，否则歌手会挤到中间 */
.ncm .ncm-songs > li > .name { flex: 1 1 auto; }
/* 主题给歌名设了 max-width:12rem —— 那是给 20rem 宽的侧栏抽屉用的；
面板里横向富余很多，放开限制，长歌名才不会被平白截断。
min-width:0 是给下面那枚版权提示标签留位置：不加的话长歌名会把标签顶出行外 */
.ncm .ncm-songs > li > .name .title { max-width: none; min-width: 0; }
/* 歌手列：多歌手串太长时截断，不把行撑高 */
.ncm .ncm-songs > li > .author {
flex: 0 0 auto;
max-width: 38%;
margin-left: .75rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 最后一行不留底部间距（主题 li 自带 margin-bottom:.5rem），
否则卡片外框内底部会空出一截 */
.ncm .ncm-songs > li:last-child { margin-bottom: 0; }
/* 正在播放的那一行（主题 start_music 会加 .netcloudmusic_play 并内联上色），
但序号列的颜色是显式写死的，这里跟着行色走一下 */
.ncm .ncm-songs > li.netcloudmusic_play > .ncm-song-idx { color: var(--ncm-theme); }
/* --- 版权提示标签：试听 / 无版权 -------------------------------------------
由模板 ncm_song_tip() 判定，出现在两处：
· 列表行：歌名 .title 之后（同一个 .name 里，所以给 .title 加了 min-width:0）
· 卡片：胶囊行 .ncm-rmeta 里（第一枚），与同行的 .pn-chip 同高同字号 —— 见下方
「.ncm .ncm-rmeta > *」统一块
外侧也有一份同款标签：主题侧栏歌单（core/I.php + style/aside.css 的
.music_menu_block .music_menu_list .ncm-tip），类名共用，改数值要两边一起改。
规则：
fee = 1（VIP 歌曲）/ 4（数字专辑）→「试听」
本面板的播放走 Meting（匿名取流，不带账号 cookie），这类曲子只能拿到
30~45 秒试听片段（实测「海阔天空」dt=326s，Meting 返回的 mp3 仅 45.1s）
dt <= 0（时长取不到）或 privilege.st < 0（已下架）→「无版权」
Meting 对这类曲子直接返回 0 字节，点了是死行
-------------------------------------------------------------------------- */
.ncm .ncm-tip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
height: 1.05rem;
padding: 0 .34rem;
/* ★ .name 是 display:flex + gap:.75rem，若给正 margin，歌名与标签之间会变成
12 + 6.7 ≈ 19px 的空档 —— 这里用负 margin 抵消主题的 gap，净距约 6px。
主题若调整 .name 的 gap，这个值要跟着改。 */
margin: .16rem 0 0 -.4rem;
/* 歌名是两行截断块：按 flex-start 对齐才能贴着第一行，居中会掉到两行中间 */
align-self: flex-start;
font-size: .62rem;
font-weight: 600;
line-height: 1;
letter-spacing: .02em;
white-space: nowrap;
border-radius: .3rem;
border: 1px solid transparent;
}
.ncm .ncm-tip.is-trial {
color: var(--ncm-theme-deep);
background: color-mix(in srgb, var(--ncm-theme) 12%, transparent);
border-color: color-mix(in srgb, var(--ncm-theme) 32%, transparent);
}
.ncm .ncm-tip.is-nc {
color: var(--ncm-text-3);
background: var(--ncm-fill);
border-color: var(--ncm-line);
}
/* ==========================================================================
3. 最近在听（横向卡片网格）
--------------------------------------------------------------------------
结构：
★ 容器为什么还要挂 .music_menu_list：
主题 mainjs.js 的 $(document).on('click','ul.music_menu_list>li') 读 li 上的
url/name/author/img 调用侧栏播放器（也就是「点卡片即播」）。挂上这个类就白拿这个行为，
又天然没有 href，pjax 不会劫持。代价是主题那套「左歌名 / 右歌手」的行样式会渗进来，
所以下面必须把 li 的 display / justify-content / padding / background / border 全部显式盖掉。
========================================================================== */
.ncm .ncm-recents {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1rem;
/* 盖掉 .music_menu_list 自带的 .75rem 内边距与纵向滚动条 */
padding: 0;
overflow: visible;
}
.ncm .ncm-recents > li {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1rem;
width: 100%;
padding: .9rem;
margin-bottom: 0;
border-radius: var(--ncm-radius);
background: var(--ncm-card);
border: 1px solid var(--ncm-line);
}
.ncm .ncm-recents > li:hover {
/* 主题给 li:hover 的是 translateX(3px) + 主题色底，这里换成卡片上浮 */
transform: translateY(-3px);
background: color-mix(in srgb, var(--ncm-theme) 6%, var(--ncm-card));
border-color: color-mix(in srgb, var(--ncm-theme) 35%, var(--ncm-line));
box-shadow: var(--ncm-shadow-lg);
}
.ncm .ncm-recents > li:hover > .ncm-rcap { transform: scale(1.04); }
/* 封面：固定 120px 正方形（「图片大一些」） */
.ncm .ncm-recents > li > .ncm-rcap {
position: relative;
flex: 0 0 auto;
width: 120px;
height: 120px;
overflow: hidden;
border-radius: 10px;
background: var(--ncm-line-soft);
box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .55);
transition: transform .25s ease;
}
.ncm .ncm-recents > li > .ncm-rcap img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 封面左下角的播放角标：卡片没有 ，用它提示「可以点」 */
.ncm-rplay {
position: absolute;
left: 7px;
bottom: 7px;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
font-size: 10px;
color: #fff;
border-radius: 50%;
background: color-mix(in srgb, var(--ncm-theme) 80%, transparent);
backdrop-filter: blur(4px);
}
/* 右侧信息区 */
.ncm-rbody {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: .2rem;
min-width: 0;
}
.ncm-rname {
font-size: .95rem;
font-weight: 600;
line-height: 1.35;
color: var(--ncm-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ncm-rart {
font-size: .78rem;
line-height: 1.4;
color: var(--ncm-text-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ncm-ralbum {
font-size: .72rem;
line-height: 1.4;
color: var(--ncm-text-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ncm-rmeta {
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin-top: .4rem;
}
/* 胶囊行里的每个子项（本周 N 次 / 时长 / 音质 / 试听·无版权）统一成同一口径。
★ 只对齐 font-size 与 padding 是不够的：.pn-chip 没写 line-height，会继承主题的
line-height:1.5（main.css），盒子自然高 = .7rem × 1.5 + .36rem ≈ 1.41rem；
而 .ncm-tip 是 line-height:1，同字号只有 ≈ 1.06rem —— 并排就是一高一矮。
所以这里给「.ncm-rmeta 的所有直接子元素」钉死同一套盒模型，以后再加子项也自动同高。
★ 选择器用 .ncm .ncm-rmeta > *（权重 0,2,0）：与 .ncm .ncm-tip 同权重但位置更靠后，
足以压掉列表行那套 height:1.05rem —— 若写成 .ncm-rmeta > * 就压不住了。 */
.ncm .ncm-rmeta > * {
display: inline-flex;
align-items: center;
box-sizing: border-box;
height: 1.42rem; /* ≈ .pn-chip 原本的自然高度，取值只为「统一」而非改变观感 */
padding: 0 .62rem;
font-size: .7rem;
line-height: 1;
letter-spacing: .02em;
white-space: nowrap;
border-radius: 999px;
}
/* 数字不再单独放大（原 .78rem）：加粗本身已够分级；要更大的话改回 1.1em */
.ncm .ncm-rmeta > .pn-chip b { font-size: 1em; }
/* 版权提示：卡片行里没有 .name 的 gap，把列表行那套负 margin / flex-start 复位 */
.ncm .ncm-rmeta > .ncm-tip {
margin: 0;
align-self: center;
}
/* ==========================================================================
响应式（统一 640px，与公共 panel.css 一致）
========================================================================== */
@media (max-width: 640px) {
.ncm-id-sign { white-space: normal; }
/* 列宽 140px → 封套约 105px，唱片仍能露出 */
.ncm-playlists { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.1rem .75rem; }
/* 卡片最小 350px，窄屏塞不下会自动撑破容器 → 强制单列；封面同步收小 */
.ncm .ncm-recents { grid-template-columns: 1fr; }
.ncm .ncm-recents > li > .ncm-rcap { width: 92px; height: 92px; }
/* 内页头部本来就是竖排，窄屏只需收一收留白 */
.ncm-dhead { gap: .9rem; padding: 1.15rem 1rem 1rem; }
/* 盒宽 184px → 封套 138px（与改造前一致） */
.ncm-dcover { width: 184px; height: 138px; }
/* 窄屏歌手列收窄，优先保证歌名可读 */
.ncm .ncm-songs > li > .author { max-width: 32%; }
.ncm .ncm-songs > li > .ncm-song-idx { width: 1.25rem; }
.pn-bar-tools { flex-direction: column; align-items: stretch; }
.pn-sorts { justify-content: center; }
}