@charset "UTF-8";
/* ============================================================================
   neon.css —— 「赛博朋克 Cyberpunk」主题层
   ----------------------------------------------------------------------------
   由 cscms/config/sys/Cs_Cscms.php 的 jialei_dynamic_route() 在输出期注入到 </head> 之前,
   因此天然排在 public.css / user.css 与页面内联样式之后,同特异性即可胜出。

   为什么令牌用 :root:root 这种写法:
     页面里有一段内联样式 <style id="dj-theme-color">:root,:root.light{--title:#ff1a44;…}</style>
     写死了主色,且 js/common.js 的 applyThemeColorCss() 每次 DOM ready 还会重写它的 textContent。
     两者都是普通 style 元素、普通层叠(:root=0,1,0 / :root.light=0,2,0),
     所以这里用 (0,3,1) 无条件压过,全程无须 !important。

   回滚:删除 Cs_Cscms.php 里注入本次样式的 5 行(搜索 neon.css),或把本文件清空。

   本层分四块:
     一~二  设计令牌(夜=深色电光青 / 白天=暗紫霓虹朋克,两套)
     三~五  页面底、扫描线数字网格、页头
     六~十二 卡片 HUD 角框 / 封面扫描线 / 标题栏 / 列表 / 榜单 / 按钮 / 播放页频谱
     十三   无须覆盖的部分与借用注意(备忘)
   ========================================================================== */

/* ==========================================================================
   一、设计令牌 —— 暗色(主)
   ========================================================================== */
html:not(.light):root:root{
  /* —— 覆盖 public.css:1-25 的原始变量 —— */
  --bg:#06030d;                    /* 近黑带紫,赛博基底 */
  --card:#0b0518;
  --bar:#09040f;
  --line:#2a1140;                  /* 紫调分隔线(原本 #101218 几乎看不见) */
  --text:#eaf6ff;
  --name:#8a7fb0;
  --title:#00f0ff;                 /* 电光青 */
  --accent:#00f0ff;
  --primary:#00f0ff;
  --red:#ff2a6d;
  --hot-red:#ff2a6d;
  --title-rgb:0,240,255;
  --accent-rgb:0,240,255;
  --hot-red-rgb:255,42,109;
  --hover-bg:#140a26;
  --search-hover:rgb(0 240 255 / 8%);
  --shadow:0 10px 34px rgba(0,0,0,.7),0 0 26px rgba(0,240,255,.08);
  --radius:14px;
  --songs-name:#d6e8ff;
  --font-family:honorSansBrand;
  --tool-border:2px solid #0b0518;
  --tool-btn:linear-gradient(180deg,#150a2a,#0b0518),linear-gradient(180deg,#00f0ff,#ff00a0);
  --hread:#06030de6;

  /* —— cyberpunk 专用色板 —— */
  --cp-cyan:#00f0ff;
  --cp-magenta:#ff00a0;
  --cp-yellow:#f9f002;
  --cp-glow-cyan:rgba(0,240,255,.55);
  --cp-glow-magenta:rgba(255,0,160,.5);
  --cp-line:rgba(0,240,255,.22);
  --cp-line-hot:rgba(0,240,255,.6);
  --cp-scan:rgba(0,240,255,.14);
  --cp-grid:rgba(0,240,255,.07);
  --cp-grid-m:rgba(255,0,160,.07);
  --cp-tint:rgba(0,240,255,.10);
  --cp-tint-soft:rgba(0,240,255,.055);
  --cp-card-bg:linear-gradient(160deg,rgba(12,5,26,.94),rgba(8,4,17,.94));
  --cp-zebra:rgba(0,240,255,.022);
  --cp-bz-hot-fg:#ffd6ec; --cp-bz-hot-bg:rgba(255,0,160,.20); --cp-bz-hot-bd:rgba(255,0,160,.45);
  --cp-bz-new-fg:#d0fbff; --cp-bz-new-bg:rgba(0,240,255,.16); --cp-bz-new-bd:rgba(0,240,255,.42);
}

/* ==========================================================================
   二、设计令牌 —— 白天模式(暗紫霓虹·朋克)
   --------------------------------------------------------------------------
   2026-09-28 第三版(定稿):白天=「暗紫霓虹朋克」——
   深紫渐变底(刻意避开纯黑与白底) + 后台同款品红/青/紫霓虹 + 极光漂移动效:
     · 底色 #0d0518 深紫黑,body 叠品红/紫罗兰/青三色大光晕 + body::after 极光层;
     · 主辅互换:本模式下 --cp-cyan 承载「品红值」(主色,对应后台 --neon-magenta),
       --cp-magenta 承载「青值」(辅色,对应后台 --neon-cyan)。
       变量名保持不动以兼容下方数百行既有规则;凡以 cp-cyan 为主动色的规则
       (导航高亮/标题/链接悬停/选中态…)自动变品红,与后台品红主导的观感一致。
     · 紫罗兰 #a855ff 作为第三色:极光层 / 主按钮渐变 / 页头霓虹线。
     · 机制:theme-init.js / common.js 给 <html> 挂 day(不再挂 light),
       旧 light 规则全部失效;本块从夜间深色基底上整体重写。
   ========================================================================== */
html.day:root:root{
  /* —— 覆盖 public.css:1-25 的原始变量(深紫底) —— */
  --bg:#0d0518;                    /* 深紫黑(非纯黑) */
  --card:#150a26;
  --bar:#120722;
  --line:#3a1b52;                  /* 紫调分隔线 */
  --text:#f0e8ff;
  --name:#a292c9;
  --title:#ff2e88;                 /* 霓虹品红(后台 --neon-magenta) */
  --accent:#ff2e88;
  --primary:#ff2e88;
  --red:#ff3b52;                   /* 危险色:后台 --neon-red */
  --hot-red:#ff2e88;
  --title-rgb:255,46,136;
  --accent-rgb:255,46,136;
  --hot-red-rgb:255,46,136;
  --hover-bg:#22103a;
  --search-hover:rgb(255 46 136 / 12%);
  --shadow:0 12px 40px rgba(0,0,0,.65),0 0 30px rgba(168,85,255,.12);
  --radius:14px;
  --songs-name:#e9ddff;
  --font-family:honorSansBrand;
  --tool-border:2px solid #150a26;
  --tool-btn:linear-gradient(180deg,#241238,#150a26),linear-gradient(180deg,#ff2e88,#a855ff);
  --hread:#0d0518e6;

  /* —— cyberpunk 色板(主辅互换:cyan 变量=品红主色,magenta 变量=青辅色) —— */
  --cp-cyan:#ff2e88;
  --cp-magenta:#22e5ff;
  --cp-yellow:#f9f002;
  --cp-glow-cyan:rgba(255,46,136,.60);
  --cp-glow-magenta:rgba(34,229,255,.50);
  --cp-line:rgba(255,46,136,.28);
  --cp-line-hot:rgba(255,46,136,.65);
  --cp-scan:rgba(255,46,136,.14);
  --cp-grid:rgba(255,46,136,.09);
  --cp-grid-m:rgba(34,229,255,.09);
  --cp-tint:rgba(255,46,136,.12);
  --cp-tint-soft:rgba(255,46,136,.06);
  --cp-card-bg:linear-gradient(160deg,rgba(38,16,60,.92),rgba(16,7,30,.94));
  --cp-zebra:rgba(255,46,136,.03);
  --cp-bz-hot-fg:#ffd6ec; --cp-bz-hot-bg:rgba(255,46,136,.22); --cp-bz-hot-bd:rgba(255,46,136,.50);
  --cp-bz-new-fg:#d0fbff; --cp-bz-new-bg:rgba(34,229,255,.16); --cp-bz-new-bd:rgba(34,229,255,.42);
}

/* ==========================================================================
   三、页面底 + 数字网格 + 扫描线(改动面积最大的两块之一)
   body::before 在 public.css 中未被占用;body 未创建层叠上下文,
   故 z-index:-1 落在画布背景之上、正文之下,不盖文字、也不影响点击。
   ========================================================================== */
html:not(.light):root:root body{
  background:
    radial-gradient(900px 500px at 8% -6%,var(--cp-glow-magenta),transparent 60%),
    radial-gradient(1100px 600px at 95% 4%,var(--cp-glow-cyan),transparent 62%),
    radial-gradient(800px 700px at 50% 116%,rgba(255,42,109,.14),transparent 66%),
    linear-gradient(180deg,#06030d,#0a0418 55%,#06030d);
  background-attachment:fixed;
}
/* ⚠ 图层结构(2026-09-28 实测修正):体背景若画在不透明的 body 上,会把
   body::before/::after(z-index:-1)整层压住不可见(像素对比实测差异=0)。
   因此 day 模式的底色统一画在 html 上(html 背景=画布底,先于负 z-index 层绘制),
   body 置透明,扫描线/网格/极光层才真正可见。夜间暂维持原结构不动。 */
html.day:root:root{
  background-image:
    radial-gradient(1000px 560px at 6% -8%,rgba(255,46,136,.35),transparent 62%),
    radial-gradient(1200px 640px at 96% 6%,rgba(34,229,255,.16),transparent 64%),
    radial-gradient(900px 760px at 52% 118%,rgba(168,85,255,.30),transparent 66%),
    linear-gradient(160deg,#160a28 0%,#0d0518 46%,#150826 100%);
  background-attachment:fixed;
}
html.day:root:root body{background:transparent}
/* 白天模式:极光漂移层(body::after 未被占用;纯 transform 动画,走合成器不重排不重绘) */
html.day:root:root body::after{
  content:'';position:fixed;inset:-18%;pointer-events:none;z-index:-1;
  background:
    radial-gradient(42% 36% at 22% 28%,rgba(255,46,136,.16),transparent 70%),
    radial-gradient(46% 40% at 78% 62%,rgba(168,85,255,.16),transparent 70%),
    radial-gradient(36% 30% at 62% 16%,rgba(34,229,255,.10),transparent 70%);
  animation:djDayAurora 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes djDayAurora{
  from{transform:translate3d(-2.5%,-1.5%,0) scale(1) rotate(0deg)}
  to  {transform:translate3d(2.5%,2%,0) scale(1.08) rotate(2deg)}
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:
    repeating-linear-gradient(0deg,var(--cp-scan) 0 1px,transparent 1px 4px),   /* 扫描线 */
    linear-gradient(var(--cp-grid) 1px,transparent 1px),                       /* 方格 */
    linear-gradient(90deg,var(--cp-grid-m) 1px,transparent 1px);
  background-size:100% 4px,56px 56px,56px 56px;
  -webkit-mask-image:radial-gradient(78% 70% at 50% 34%,#000,transparent 90%);
          mask-image:radial-gradient(78% 70% at 50% 34%,#000,transparent 90%);
}

/* ==========================================================================
   四、页头(public.css 的 .header 已 position:relative / z-index:999,且未占用 ::after)
   ========================================================================== */
.header{
  background:linear-gradient(180deg,rgba(10,4,22,.96),rgba(6,3,13,.92));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
html.day:root:root .header{background:linear-gradient(180deg,rgba(24,10,42,.97),rgba(11,5,22,.95))}
html.day:root:root .header::after{
  background:linear-gradient(90deg,transparent,#a855ff 14%,#ff2e88 50%,#22e5ff 78%,transparent);
  box-shadow:0 0 18px rgba(255,46,136,.5);
}
.header::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--cp-magenta) 12%,var(--cp-cyan) 50%,var(--cp-yellow) 76%,transparent);
  box-shadow:0 0 14px var(--cp-glow-cyan);pointer-events:none;
}
.navItem:hover{background:var(--cp-tint)}
.navItem.active,.navItem.active a{color:var(--cp-cyan);text-shadow:0 0 12px var(--cp-glow-cyan)}

/* ==========================================================================
   五、卡片 HUD 角框(.box 未占用伪元素;角标画在盒内,不受 overflow:hidden 影响)
   8 个直角标记用多重背景一次画完,不引入定位、不影响任何子元素布局。
   ========================================================================== */
.box{
  position:relative;               /* 仅供下面 ::before 的 inset:0 定位;自身仍在文档流内,不改变尺寸 */
  background:var(--cp-card-bg);
  /* 描边用 inset 阴影而不是 border:border 会撑高 height:auto 的盒子,
     inset 阴影不参与布局计算,可做到零位移。 */
  box-shadow:
    inset 0 0 0 1px var(--cp-line),
    var(--shadow),
    inset 0 0 44px rgba(0,240,255,.045);
  transition:box-shadow .25s ease;
}
.box::before{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.9;
  background:
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) top left / 15px 2px,
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) top left / 2px 15px,
    linear-gradient(var(--cp-magenta),var(--cp-magenta)) top right / 15px 2px,
    linear-gradient(var(--cp-magenta),var(--cp-magenta)) top right / 2px 15px,
    linear-gradient(var(--cp-magenta),var(--cp-magenta)) bottom left / 15px 2px,
    linear-gradient(var(--cp-magenta),var(--cp-magenta)) bottom left / 2px 15px,
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) bottom right / 15px 2px,
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) bottom right / 2px 15px;
  background-repeat:no-repeat;
}
.box:hover{
  box-shadow:
    inset 0 0 0 1px var(--cp-line-hot),
    var(--shadow),
    0 0 22px var(--cp-glow-cyan);
}

/* ==========================================================================
   六、封面扫描线(首页/列表共 120 个 .col-cover,面积最大且上一版完全没动)
   在封面图上叠一层青色扫描线 + 品红斜向高光 + 霓虹内描边,不动任何图片资源。
   ========================================================================== */
.col-cover{position:relative;border-radius:10px;overflow:hidden}
.col-cover::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(0,240,255,.13) 0 1px,transparent 1px 3px),
    linear-gradient(155deg,rgba(255,0,160,.26),transparent 52%);
  box-shadow:inset 0 0 0 1px rgba(0,240,255,.38);
  transition:box-shadow .25s ease;
}
.col-cover:hover::after{box-shadow:inset 0 0 0 1px var(--cp-magenta),0 0 20px var(--cp-glow-magenta)}
html.day:root:root .col-cover::after{
  background:
    repeating-linear-gradient(0deg,rgba(255,46,136,.16) 0 1px,transparent 1px 3px),
    linear-gradient(155deg,rgba(34,229,255,.22),transparent 52%);
  box-shadow:inset 0 0 0 1px rgba(255,46,136,.45);
}

/* ==========================================================================
   六之二、首屏横幅(.banner 约 40 万 px²,是全页最大的单一色块)
   上一版没动它,是"看起来变化不大"的另一半原因。叠加扫描线 + 品红/青斜向wash
   + 霓虹内描边 + HUD 角框;全部走伪元素,pointer-events:none 不影响轮播点击。
   ========================================================================== */
.banner{
  box-shadow:var(--shadow),0 0 0 1px var(--cp-line),0 0 30px rgba(0,240,255,.16);
}
.banner::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(0,240,255,.13) 0 1px,transparent 1px 4px),
    linear-gradient(115deg,rgba(255,0,160,.20),transparent 38% 62%,rgba(0,240,255,.17));
  box-shadow:inset 0 0 0 1px rgba(0,240,255,.45),inset 0 0 46px rgba(255,0,160,.10);
}
html.day:root:root .banner::after{
  background:
    repeating-linear-gradient(0deg,rgba(255,46,136,.14) 0 1px,transparent 1px 4px),
    linear-gradient(115deg,rgba(34,229,255,.20),transparent 38% 62%,rgba(255,46,136,.20));
  box-shadow:inset 0 0 0 1px rgba(255,46,136,.50),inset 0 0 46px rgba(168,85,255,.12);
}
.banner::before{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) top left / 22px 3px,
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) top left / 3px 22px,
    linear-gradient(var(--cp-magenta),var(--cp-magenta)) top right / 22px 3px,
    linear-gradient(var(--cp-magenta),var(--cp-magenta)) top right / 3px 22px,
    linear-gradient(var(--cp-magenta),var(--cp-magenta)) bottom left / 22px 3px,
    linear-gradient(var(--cp-magenta),var(--cp-magenta)) bottom left / 3px 22px,
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) bottom right / 22px 3px,
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) bottom right / 3px 22px;
  background-repeat:no-repeat;
}
.banner-btn{
  background:rgba(6,3,13,.62);backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px var(--cp-line),0 0 16px rgba(0,240,255,.22);
  color:var(--text);
}
.banner-btn:hover{box-shadow:0 0 0 1px var(--cp-magenta),0 0 22px var(--cp-glow-magenta)}

/* ==========================================================================
   七、标题栏与十色图标(.titleBar 未占用伪元素)
   ========================================================================== */
.titleBar{border-bottom-color:transparent}
.titleBar::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,var(--cp-magenta),var(--cp-cyan) 32%,transparent 74%);
  box-shadow:0 0 10px var(--cp-glow-cyan);
}
.titleBar h3{text-shadow:0 0 14px var(--cp-glow-cyan)}
.titleBar > a{color:var(--cp-cyan)}
.titleBar > a:hover{text-shadow:0 0 12px var(--cp-glow-cyan)}

.h-icon-1 { background-image:linear-gradient(135deg,#00f0ff,#0066ff); box-shadow:0 0 14px rgba(0,240,255,.55); }
.h-icon-2 { background-image:linear-gradient(135deg,#ff00a0,#ff5cc8); box-shadow:0 0 14px rgba(255,0,160,.5); }
.h-icon-3 { background-image:linear-gradient(135deg,#f9f002,#ff9a00); box-shadow:0 0 14px rgba(249,240,2,.45); }
.h-icon-4 { background-image:linear-gradient(135deg,#00ffa3,#00f0ff); box-shadow:0 0 14px rgba(0,255,163,.45); }
.h-icon-5 { background-image:linear-gradient(135deg,#7b2dff,#ff00a0); box-shadow:0 0 14px rgba(123,45,255,.5); }
.h-icon-6 { background-image:linear-gradient(135deg,#ff2a6d,#f9f002); box-shadow:0 0 14px rgba(255,42,109,.5); }
.h-icon-7 { background-image:linear-gradient(135deg,#00f0ff,#7b2dff); box-shadow:0 0 14px rgba(0,240,255,.5); }
.h-icon-8 { background-image:linear-gradient(135deg,#ff9a00,#ff00a0); box-shadow:0 0 14px rgba(255,154,0,.45); }
.h-icon-9 { background-image:linear-gradient(135deg,#0066ff,#00f0ff); box-shadow:0 0 14px rgba(0,102,255,.5); }
.h-icon-10{ background-image:linear-gradient(135deg,#c8ff00,#00f0ff); box-shadow:0 0 14px rgba(200,255,0,.4); }

/* ==========================================================================
   八、歌曲列表行与列表页筛选
   ========================================================================== */
.listHeader{
  background:linear-gradient(90deg,var(--cp-tint),transparent 70%);
  border-bottom:1px solid var(--cp-line);
}
.songItem{position:relative;border-bottom-color:var(--cp-tint)}
.songItem:nth-child(odd){background:var(--cp-zebra)}
.songItem::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;opacity:0;
  background:linear-gradient(180deg,var(--cp-cyan),var(--cp-magenta));
  transition:opacity .2s ease;pointer-events:none;
}
.songItem:hover{background:linear-gradient(90deg,var(--cp-tint),transparent 62%)}
.songItem:hover::before{opacity:1;box-shadow:0 0 12px var(--cp-glow-cyan)}
.song-title{transition:color .2s ease,text-shadow .2s ease}
.song-title:hover{color:var(--cp-cyan);text-shadow:0 0 10px var(--cp-glow-cyan)}
.op-icon:hover{color:var(--cp-cyan);text-shadow:0 0 10px var(--cp-glow-cyan)}
.col-cz:hover{color:var(--cp-magenta);border-color:var(--cp-magenta)}
.badge-hot{color:var(--cp-bz-hot-fg);background:var(--cp-bz-hot-bg);border:1px solid var(--cp-bz-hot-bd)}
.badge-new{color:var(--cp-bz-new-fg);background:var(--cp-bz-new-bg);border:1px solid var(--cp-bz-new-bd)}

.cardFilter{border-bottom-color:var(--cp-line)}
.filterTag{transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.filterTag:hover{background:var(--cp-tint);color:var(--text)}
.filterTag.active{
  color:var(--cp-cyan);background:var(--cp-tint);
  box-shadow:inset 0 0 0 1px var(--cp-cyan),0 0 16px var(--cp-glow-cyan);
}
.sortTabList .sortItem{border:1px solid var(--cp-line);color:var(--name)}
.sortTabList .sortItem:hover{border-color:var(--cp-line-hot);color:var(--text)}
.sortTabList .sortItem.active,
.sortItem.active{
  color:#04060c;background:linear-gradient(135deg,var(--cp-cyan),var(--cp-magenta));
  border-color:transparent;font-weight:600;box-shadow:0 0 20px var(--cp-glow-cyan) !important;
}
html.day:root:root .sortTabList .sortItem.active,
html.day:root:root .sortItem.active,
html.day:root:root .dj-page-btn.active,
html.day:root:root .actionBtn.primary{
  color:#ffffff;
  background:linear-gradient(135deg,#ff2e88,#a855ff);
}
.dj-page-btn{border:1px solid var(--cp-line);color:var(--name)}
.dj-page-btn:hover{border-color:var(--cp-line-hot);color:var(--text)}
.dj-page-btn.active{
  color:#04060c;background:linear-gradient(135deg,var(--cp-cyan),var(--cp-magenta));
  border-color:transparent;box-shadow:0 0 18px var(--cp-glow-cyan);
}

/* 列表底部控制条底色：去掉 public.css 的 --bar 近黑色块
   （2026-10-11 主人反馈：播放全部/加入播放 背后出现一块黑色矩形，与紫底卡片不搭。
    该色块来自 .list_controllbox{background:var(--bar)}，赛博主题下 --bar=#09040f 近黑；
    改为透明与卡片底融为一体。） */
.list_controllbox{background:transparent}

/* 列表底部「播放全部 / 加入播放」按钮：纳入霓虹按钮体系（2026-10-11）
   public.css 原样式是「扁平纯色 / 死黑 #222」，与主题胶囊按钮语言不一致（主人反馈观感问题）。
   主按钮=青→品红渐变胶囊；次按钮=霓虹描边胶囊。全部用 --cp-* 变量，白天主题自动换品红系。 */
.playall,.addall{
  color:#04060c;
  background:linear-gradient(135deg,var(--cp-cyan),var(--cp-magenta));
  border:1px solid transparent;
  border-radius:8px;
  font-weight:600;
  letter-spacing:.5px;
  box-shadow:0 0 16px var(--cp-glow-cyan);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease,background .2s ease;
}
.playall:hover,.addall:hover{transform:translateY(-1px);box-shadow:0 0 24px var(--cp-glow-cyan)}
.playall:active,.addall:active{transform:translateY(0);box-shadow:0 0 12px var(--cp-glow-cyan)}
.addall{
  color:var(--cp-cyan);
  background:var(--cp-tint);
  border-color:var(--cp-line);
  box-shadow:none;
}
.addall:hover{
  color:var(--text);
  border-color:var(--cp-line-hot);
  box-shadow:0 0 16px var(--cp-glow-cyan);
}

/* ==========================================================================
   九、榜单 / 工具球 / 页脚
   ========================================================================== */
.rankItem .rankNum{color:var(--cp-cyan);text-shadow:0 0 10px var(--cp-glow-cyan)}
.rankItem:nth-child(1) .rankNum{color:var(--cp-yellow);text-shadow:0 0 12px rgba(249,240,2,.75)}
.rankItem:nth-child(2) .rankNum{color:#e6f9ff;text-shadow:0 0 12px rgba(230,249,255,.7)}
.rankItem:nth-child(3) .rankNum{color:var(--cp-magenta);text-shadow:0 0 12px var(--cp-glow-magenta)}
.rankItem:hover{background:var(--cp-tint-soft)}

.toolBtn,.social-item{
  background:var(--tool-btn);
  box-shadow:0 0 0 1px var(--cp-line),0 0 18px rgba(0,240,255,.22);
}
.toolBtn:hover,.social-item:hover{
  color:var(--cp-cyan);box-shadow:0 0 0 1px var(--cp-magenta),0 0 24px var(--cp-glow-magenta);
}
.site-footer{
  /* 原 public.css 的 border-top: var(--line) 缺 width/style,是无效声明(等于无边框);
     这里用 inset 阴影补一道霓虹顶线,不参与布局计算。 */
  box-shadow:inset 0 1px 0 0 var(--cp-line);
  background:linear-gradient(180deg,rgba(9,4,15,.96),rgba(6,3,13,.99));
}
html.day:root:root .site-footer{background:linear-gradient(180deg,rgba(20,9,34,.97),rgba(10,5,20,.99))}

/* ==========================================================================
   十、六色循环卡片(public.css 的 .songListItem/.sgCard:nth-child(6n+N) 的 --sg-accent)
   原色 #0052d9 #2ba471 #e37318 #ef4444 #8b5cf6 #06b6d4 → 赛博族
   ========================================================================== */
.songListItem:nth-child(6n+1),.sgCard:nth-child(6n+1){ --sg-accent:#00f0ff; }
.songListItem:nth-child(6n+2),.sgCard:nth-child(6n+2){ --sg-accent:#ff00a0; }
.songListItem:nth-child(6n+3),.sgCard:nth-child(6n+3){ --sg-accent:#f9f002; }
.songListItem:nth-child(6n+4),.sgCard:nth-child(6n+4){ --sg-accent:#7b2dff; }
.songListItem:nth-child(6n+5),.sgCard:nth-child(6n+5){ --sg-accent:#ff2a6d; }
.songListItem:nth-child(6n+6),.sgCard:nth-child(6n+6){ --sg-accent:#00ffa3; }

/* ==========================================================================
   十一、播放页 · 频谱进度条(public.css:6494+ 原为「霓虹朋克」品红 #ff00de/#ff2d78)
   ========================================================================== */
.playerProgress.has-spec{
  border:1px solid var(--cp-line-hot);
  background:
    linear-gradient(180deg,transparent calc(100% - 2px),var(--cp-glow-cyan) calc(100% - 2px)),
    linear-gradient(var(--cp-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--cp-grid-m) 1px,transparent 1px),
    linear-gradient(160deg,#08041a 0%,#100724 45%,#061024 100%);
  background-size:100% 100%,28px 28px,28px 28px,100% 100%;
  box-shadow:0 0 22px rgba(0,240,255,.16),inset 0 0 30px rgba(3,2,10,.85);
}
html.day:root:root .playerProgress.has-spec{
  border-color:var(--cp-line);
  background:
    linear-gradient(180deg,transparent calc(100% - 2px),var(--cp-glow-cyan) calc(100% - 2px)),
    linear-gradient(var(--cp-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--cp-grid-m) 1px,transparent 1px),
    linear-gradient(160deg,#1a0a2e 0%,#22103a 45%,#120720 100%);
  box-shadow:0 0 24px rgba(255,46,136,.18),inset 0 0 30px rgba(3,2,10,.85);
}
.playerProgress.has-spec::before{
  background:linear-gradient(180deg,transparent,rgba(0,240,255,.07) 45%,rgba(255,0,160,.10) 55%,transparent);
}
.playerProgress.has-spec::after{
  color:var(--cp-cyan);text-shadow:0 0 6px var(--cp-glow-cyan);
  background:
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) top left / 16px 2px,
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) top left / 2px 16px,
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) top right / 16px 2px,
    linear-gradient(var(--cp-cyan),var(--cp-cyan)) top right / 2px 16px,
    linear-gradient(var(--cp-magenta),var(--cp-magenta)) bottom left / 16px 2px,
    linear-gradient(var(--cp-magenta),var(--cp-magenta)) bottom left / 2px 16px,
    linear-gradient(var(--cp-magenta),var(--cp-magenta)) bottom right / 16px 2px,
    linear-gradient(var(--cp-magenta),var(--cp-magenta)) bottom right / 2px 16px;
  background-repeat:no-repeat;
}

/* 频谱柱:JS 按 --hue = (320 + i*360/n) % 360 生成全彩虹色相。
   这里用 calc() 把整条彩虹线性压缩到 176 → 322(青 → 紫 → 玫瑰),无须改任何 JS。
   下方若内核不认 hsl(calc()) 会丢弃该声明,自动回落到 public.css 的原彩虹。 */
.specBar{
  background:linear-gradient(180deg,
    hsl(calc(176 + var(--hue,320) * .405),100%,86%) 0%,
    hsl(calc(176 + var(--hue,320) * .405),100%,62%) 45%,
    hsl(calc(176 + var(--hue,320) * .405),100%,52%) 100%);
  box-shadow:
    0 0 6px  hsla(calc(176 + var(--hue,320) * .405),100%,60%,.65),
    0 0 14px hsla(calc(176 + var(--hue,320) * .405),100%,55%,.35);
}
.specBar.on{background:linear-gradient(180deg,#150b28,#08040f);box-shadow:0 0 4px rgba(0,240,255,.14)}
.specPlayhead{
  background:linear-gradient(180deg,#ffffff,#d9f6ff 45%,var(--cp-cyan));
  box-shadow:0 0 6px rgba(255,255,255,.9),0 0 16px var(--cp-glow-cyan),0 0 30px var(--cp-glow-cyan);
}
@keyframes neonPulse{
  0%,100%{opacity:.95;box-shadow:0 0 6px rgba(255,255,255,.9),0 0 16px var(--cp-glow-cyan),0 0 30px var(--cp-glow-cyan)}
  50%    {opacity:1;  box-shadow:0 0 10px rgba(255,255,255,1),0 0 24px var(--cp-glow-cyan),0 0 44px var(--cp-glow-cyan)}
}
.playerProgress.is-dragging .specPlayhead{
  box-shadow:0 0 10px rgba(255,255,255,1),0 0 24px var(--cp-glow-cyan),0 0 44px var(--cp-glow-cyan);
}

/* 播放页其余部件 */
.playTitle{text-shadow:0 0 22px var(--cp-glow-cyan)}
.playParams span{color:var(--name);background:var(--cp-tint-soft);border:1px solid var(--cp-line)}
.actionBtn.primary{
  background:linear-gradient(135deg,var(--cp-cyan),var(--cp-magenta));
  border-color:transparent;color:#04060c;font-weight:600;
  box-shadow:0 0 0 1px var(--cp-line-hot),0 0 26px var(--cp-glow-cyan);
}
.actionBtn.gray{color:var(--text);background:var(--cp-tint-soft);border-color:var(--cp-line)}
.actionBtn.gray:hover{color:var(--cp-cyan);border-color:var(--cp-magenta);box-shadow:0 0 18px var(--cp-glow-magenta)}
.playCover-disc{box-shadow:0 0 0 1px var(--cp-line-hot),0 0 46px var(--cp-glow-cyan),inset 0 0 40px rgba(0,0,0,.7)}
.playlist{border-top-color:var(--cp-line);background:rgba(8,4,17,.6)}
html.day:root:root .playlist{background:rgba(16,8,30,.66)}
.playlist_menu{border-bottom-color:var(--cp-line)}
.playlist_menu li.pton{color:var(--cp-cyan);text-shadow:0 0 10px var(--cp-glow-cyan)}
.playlist_menu li.pton::after{background:linear-gradient(90deg,var(--cp-cyan),var(--cp-magenta));box-shadow:0 0 10px var(--cp-glow-cyan)}
.playerTools i{color:var(--name)}
.playerTools i:hover{color:var(--cp-cyan);text-shadow:0 0 12px var(--cp-glow-cyan)}

/* ==========================================================================
   十二、移动端与侧栏补齐
   ========================================================================== */
.mobile-bottom-nav{border-top:1px solid var(--cp-line)}
.mobile-nav-item.active{color:var(--cp-cyan);text-shadow:0 0 12px var(--cp-glow-cyan)}
.sidebarGenreCard{border:1px solid var(--cp-line)}
.sidebar-link--main.active{background:var(--cp-tint);color:var(--cp-cyan)}


/* ==========================================================================
   十四、把「换配色」升级为「换质感」
   ----------------------------------------------------------------------------
   前两版的通病:改的都是色相与纹理,而页面的感知重量来自
     · 图片质感(封面 / 横幅)   · 色场(大片表面的明度与饱和度)   · 版面节奏
   这一节动的就是这三样。
   ========================================================================== */

/* ---- 1. 封面双色调:120 张彩色封面 → 统一的青/品红霓虹马赛克 ----
   先灰度化,再用 mix-blend-mode:color 把青→品红渐变染上去 = 标准 duotone。
   @supports 兜底:内核不支持混合模式时整段不生效,封面保持原样,不会出现盖住图片的色块。 */
@supports (mix-blend-mode: color){
  .col-cover{isolation:isolate}
  .col-cover img,
  .col-cover .exCover{filter:grayscale(1) contrast(1.18) brightness(1.06)}
  .col-cover::before{
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(140deg,var(--cp-cyan) 0%,var(--cp-magenta) 100%);
    mix-blend-mode:color;opacity:.92;
  }
  .col-cover::after{z-index:2}          /* 扫描线仍压在最上层 */
}

/* ---- 2. 卡片表面:从「近黑」改成可辨识的深紫,色场整体偏移 ---- */
html:not(.light):root:root .box{
  background:linear-gradient(160deg,#1c0b3a 0%,#130827 55%,#0d0619 100%);
}
html.day:root:root .box{
  background:linear-gradient(160deg,#26103c 0%,#180a2c 55%,#100620 100%);
}

/* ---- 3. 卡片左侧霓虹竖条 + 描边(全用 inset 阴影,不参与布局计算) ---- */
.box{
  box-shadow:
    inset 3px 0 0 0 var(--cp-cyan),
    inset 0 0 0 1px var(--cp-line),
    var(--shadow),
    inset 0 0 44px rgba(0,240,255,.045);
}
html.day:root:root .box{
  box-shadow:
    inset 3px 0 0 0 var(--cp-cyan),
    inset 0 0 0 1px var(--cp-line),
    var(--shadow),
    inset 0 0 44px rgba(168,85,255,.07);
}
.box:hover{
  box-shadow:
    inset 3px 0 0 0 var(--cp-magenta),
    inset 0 0 0 1px var(--cp-line-hot),
    var(--shadow),
    0 0 22px var(--cp-glow-magenta);
}

/* ---- 4. 白天模式(暗紫霓虹朋克)补丁 ----
   2026-09-28 第三版:白天=暗紫霓虹朋克(令牌见第二节,tokens 自动跟随);
   这里补「令牌覆盖不到」的写死青色调与霓虹强化:
     · .banner / .toolBtn 的 box-shadow 里硬编码了 rgba(0,240,255,*) 青光晕;
     · 主行动按钮统一成品红→紫渐变(后台「修改/删除」按钮同款,白字);
     · 卡片悬停加紫霓虹辉光,整体更"炫"。 */
html.day:root:root .banner{
  box-shadow:var(--shadow),0 0 0 1px var(--cp-line),0 0 34px rgba(255,46,136,.20);
}
html.day:root:root .toolBtn,
html.day:root:root .social-item{
  box-shadow:0 0 0 1px var(--cp-line),0 0 22px rgba(255,46,136,.28);
}
html.day:root:root .box:hover{
  box-shadow:
    inset 3px 0 0 0 var(--cp-cyan),
    inset 0 0 0 1px var(--cp-line-hot),
    var(--shadow),
    0 0 28px rgba(255,46,136,.30);
}
html.day:root:root .specBar.on{
  background:linear-gradient(180deg,#241238,#120720);
  box-shadow:0 0 4px rgba(255,46,136,.16);
}

/* ---- 5. 版面节奏:行更高、封面更大、元数据等宽,整体密度变化 ---- */
.songItemRow{padding-top:11px;padding-bottom:11px}
.col-cover{width:48px;height:48px}
.song-title{font-size:14px;font-weight:500}
.song-info,.col-hot,.col-time{letter-spacing:.01em}
.col-hot,.col-time,.rankNum,.playerTime,.playParams span,
.songItem .idx{font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;font-variant-numeric:tabular-nums}
.titleBar h3{letter-spacing:.08em}

/* ---- 6. 横幅:向品红/青偏移,并加厚扫描线 ---- */
.banner{filter:saturate(1.25) contrast(1.06) hue-rotate(-18deg)}
.banner::after{
  background:
    repeating-linear-gradient(0deg,rgba(0,240,255,.17) 0 1px,transparent 1px 4px),
    linear-gradient(115deg,rgba(255,0,160,.26),transparent 34% 60%,rgba(0,240,255,.22));
}
/* ==========================================================================
   十三、无须覆盖的部分(备忘,避免以后重复劳动)
   ----------------------------------------------------------------------------
   下列组件本身就走变量,令牌层改完即自动跟随,不需要在此重复声明:
     .login_btn_primary / .qqlogin_btn_primary  → background: var(--title)
     .gp-pc-play 等播放器按钮                    → background: var(--gp-accent)
     .gp-accent = var(--accent, var(--title, #ff2d55)) · 已在 :root 变量化
     .coverPlay                                  → color-mix(var(--accent) 75%, transparent)
     .actionBtn.gray / 各类卡片、文字、分隔线     → var(--text/--name/--line/--hover-bg…)

   ⚠ 伪元素占用情况(已核对 public.css):
     .exItem::before 与 .songListItem::before/::after、.sgCard::before/::after 已被占用,
     不要在这三处新增伪元素装饰;封面层的装饰统一走 .col-cover::after。

   ⚠ 仍受 hard-code 制约、需要人工编辑 public.css 的,只剩约 1100 处直接写字面色值的规则
     (其中 311 处是旧主色 #ff2d55)。这些吃不到 CSS 变量,是本主题层的覆盖边界。

   ⚠ 本层不改变任何元素的 display / position / 尺寸,
     因此不会引起布局位移(可用元素包围盒对比验证)。
   ========================================================================== */