:root{
    --bg:#08090e;
    --panel:rgba(255,255,255,.055);
    --panel-strong:rgba(255,255,255,.10);
    --stroke:rgba(255,255,255,.11);
    --text:#eef1f8;
    --muted:#959db3;
    --accent:#7c5cff;
    --accent2:#22d3ee;
    --hue:265;
    --mini-h:76px;
    --appbar-h:58px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* hidden 属性必须永远隐藏：否则会被 .modal{display:flex} 之类的作者样式覆盖 */
  [hidden]{display:none!important}
  body{
    font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Inter,system-ui,sans-serif;
    background:var(--bg);color:var(--text);
    min-height:100vh;overflow-x:hidden;
    padding-top:calc(var(--appbar-h) + env(safe-area-inset-top));
    padding-bottom:calc(var(--mini-h) + env(safe-area-inset-bottom));
    -webkit-tap-highlight-color:transparent;
  }
  .blob{position:fixed;border-radius:50%;filter:blur(90px);opacity:.5;z-index:0;pointer-events:none}
  .blob.a{width:520px;height:520px;background:#5b2bd6;top:-180px;left:-140px;animation:float 14s ease-in-out infinite}
  .blob.b{width:460px;height:460px;background:#0e7490;bottom:-160px;right:-120px;animation:float 18s ease-in-out infinite reverse}
  @keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}
  /* 播放页打开时隐藏背景光斑，避免两团大范围模糊层持续参与合成 */
  body.detail-open .blob{display:none}

  button{border:none;background:none;color:inherit;font:inherit;cursor:pointer;
        touch-action:manipulation}

  /* ============ 歌单页 ============ */
  .wrap{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:52px 20px 0}
  header{margin-bottom:26px}
  .hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .hero-text{min-width:0}
  .search-entry{display:inline-flex;align-items:center;gap:6px;flex:none;
    padding:9px 14px;border-radius:999px;border:1px solid var(--stroke);
    background:var(--panel);color:var(--muted);font-size:13.5px;
    transition:all .18s ease;white-space:nowrap}
  .search-entry:hover{color:var(--text);background:var(--panel-strong);border-color:var(--accent)}
  .search-entry:active{transform:scale(.96)}
  .search-entry svg{width:17px;height:17px;fill:currentColor;flex:none}
  .eyebrow{font-size:12px;letter-spacing:.32em;color:var(--accent2);text-transform:uppercase;margin-bottom:10px}
  h1{font-size:34px;font-weight:800;letter-spacing:-.02em;
     background:linear-gradient(100deg,#fff 20%,#b9a9ff 60%,#7fe9f7 95%);
     -webkit-background-clip:text;background-clip:text;color:transparent}
  .sub{color:var(--muted);margin-top:10px;font-size:14px}

  .card{background:var(--panel);border:1px solid var(--stroke);border-radius:20px;
        backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:clip}
  .list-head{display:flex;align-items:center;justify-content:space-between;
             padding:15px 20px;border-bottom:1px solid var(--stroke)}
  .list-head span{font-size:13px;color:var(--muted);letter-spacing:.08em}

  ul{list-style:none}
  .track{display:flex;align-items:center;gap:14px;padding:12px 18px;cursor:pointer;
         border-bottom:1px solid rgba(255,255,255,.045);
         transition:background .2s ease}
  .track:last-child{border-bottom:none}
  .track:hover{background:var(--panel-strong)}
  .track.active{background:linear-gradient(90deg,rgba(124,92,255,.20),rgba(34,211,238,.06))}
  .idx{width:24px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums;
       font-size:14px;flex:none;position:relative}
  .track.active .idx{color:var(--accent2)}
  .meta{min-width:0;flex:1}
  .t-title{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .track.active .t-title{color:#fff}
  .t-artist{font-size:12.5px;color:var(--muted);margin-top:3px;
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .badge{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--stroke);
         color:var(--muted);flex:none}
  .eq{display:none;gap:2.5px;align-items:flex-end;height:16px;flex:none;width:18px}
  .track.active .eq{display:flex}
  .eq i{width:3px;background:var(--accent2);border-radius:2px;height:5px;animation:bar .9s ease-in-out infinite}
  .eq i:nth-child(2){animation-delay:.15s}
  .eq i:nth-child(3){animation-delay:.3s}
  .eq i:nth-child(4){animation-delay:.45s}
  @keyframes bar{0%,100%{height:4px;opacity:.6}50%{height:16px;opacity:1}}
  .track:not(.playing) .eq i{animation-play-state:paused}

  /* ============ 封面（通用） ============ */
  .cover{position:relative;border-radius:22px;overflow:hidden;flex:none;
         box-shadow:0 24px 60px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.07) inset}
  .cover-inner{position:absolute;inset:0;display:grid;place-items:center;
    background:
      radial-gradient(circle at 30% 22%,hsl(var(--hue) 92% 70% / .95),transparent 58%),
      radial-gradient(circle at 78% 82%,hsl(calc(var(--hue) + 55) 88% 58% / .9),transparent 60%),
      linear-gradient(140deg,hsl(var(--hue) 70% 42%),hsl(calc(var(--hue) + 70) 72% 30%));
  }
  .cover-inner::after{content:"";position:absolute;width:34%;height:34%;border-radius:50%;
    background:rgba(8,9,14,.72);box-shadow:0 0 0 2px rgba(255,255,255,.14)}
  .cover svg{position:relative;z-index:1;width:34%;height:34%;fill:rgba(255,255,255,.92);
    filter:drop-shadow(0 3px 10px rgba(0,0,0,.4))}
  /* 真实封面图：加载完成淡入，未加载时仍显示渐变占位 */
  .cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    z-index:2;opacity:0;transition:opacity .35s ease}
  .cover-img[src]{opacity:1}
  .cover.has-img .cover-inner{display:none}
  /* 曲库列表行缩略图 */
  .thumb{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:none;
    background:var(--panel-strong);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
  .playing .cover-inner{animation:spin 18s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* ============ 歌曲歌词详情页 ============ */
  .detail-view{
    position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;
    background:var(--bg);
    transform:translateY(100%);visibility:hidden;
    transition:transform .42s cubic-bezier(.22,.9,.24,1),visibility .42s;
    will-change:transform;
  }
  .detail-view.open{transform:translateY(0);visibility:visible}
  /* 播放页打开时把列表与迷你条移出合成，
     避免分组后大量 sticky/backdrop 层叠加导致闪屏、卡顿、控件掉帧消失 */
  body.detail-open #page,
  body.detail-open .mini{display:none}
  .detail-bg{position:absolute;inset:0;z-index:0;
    background:
      radial-gradient(circle at 22% 18%,hsl(var(--hue) 90% 58% / .38),transparent 46%),
      radial-gradient(circle at 82% 78%,hsl(calc(var(--hue) + 60) 85% 50% / .30),transparent 48%),
      linear-gradient(180deg,rgba(8,9,14,.6),var(--bg) 78%)}

  /* ============ 歌手详情页 ============ */
  .singer-view{position:fixed;inset:0;z-index:34;display:flex;flex-direction:column;
    background:
      radial-gradient(circle at 28% 0%,hsl(var(--hue) 70% 34% / .45),transparent 52%),
      radial-gradient(circle at 92% 10%,hsl(calc(var(--hue) + 60) 70% 30% / .30),transparent 48%),
      var(--bg);
    transform:translateY(100%);visibility:hidden;
    transition:transform .42s cubic-bezier(.22,.9,.24,1),visibility .42s;
    will-change:transform}
  .singer-view.open{transform:translateY(0);visibility:visible}
  .singer-top{display:flex;align-items:center;gap:12px;flex:none;
    padding:calc(14px + env(safe-area-inset-top)) 18px 10px}
  .singer-top .t-head{flex:1;text-align:center;font-size:13px;letter-spacing:.24em;
    color:var(--muted);text-transform:uppercase}
  .singer-top .icon-btn{width:40px;height:40px}
  .singer-hero{display:flex;align-items:center;gap:18px;flex:none;padding:6px 22px 16px}
  .singer-avatar{width:96px;height:96px;border-radius:50%;overflow:hidden;flex:none;
    background:
      radial-gradient(circle at 35% 28%,hsl(var(--hue) 82% 62%),hsl(calc(var(--hue) + 60) 72% 34%));
    box-shadow:0 16px 36px -14px rgba(0,0,0,.8),0 0 0 2px rgba(255,255,255,.07) inset}
  .singer-avatar img{width:100%;height:100%;object-fit:cover;display:block}
  .singer-info{min-width:0;flex:1}
  .singer-name{font-size:20px;font-weight:800;letter-spacing:-.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .singer-sub{font-size:12.5px;color:var(--muted);margin-top:4px}
  .singer-info .btn{margin-top:12px}
  .singer-listwrap{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:calc(var(--mini-h) + 28px + env(safe-area-inset-bottom))}
  .singer-listwrap .list-head{position:sticky;top:0;z-index:2;background:var(--bg)}
  .singer-listwrap .track .act{margin-left:auto}
  /* 在线歌曲行里可点击的歌手名 */
  .singer-link{cursor:pointer}
  .singer-link:hover{color:var(--accent2);text-decoration:underline}

  .detail-top{position:relative;z-index:2;display:flex;align-items:center;gap:12px;
    padding:calc(14px + env(safe-area-inset-top)) 18px 10px}
  .detail-top .t-head{flex:1;text-align:center;font-size:13px;letter-spacing:.24em;
    color:var(--muted);text-transform:uppercase;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .icon-btn{display:grid;place-items:center;border-radius:50%;color:var(--text);
    transition:background .2s ease,transform .15s ease,color .2s ease;flex:none}
  .icon-btn:hover{background:var(--panel-strong)}
  .icon-btn:active{transform:scale(.92)}
  .icon-btn:disabled{opacity:.3;cursor:default;pointer-events:none}
  .detail-top .icon-btn{width:40px;height:40px}
  .icon-btn svg{width:20px;height:20px;fill:currentColor}

  .detail-body{position:relative;z-index:2;flex:1;min-height:0;
    display:flex;flex-direction:column;align-items:center;
    padding:8px 22px 0}

  .detail-art{display:flex;flex-direction:column;align-items:center;flex:none}
  .detail-art .cover{width:min(56vw,220px);height:min(56vw,220px)}
  .detail-meta{text-align:center;margin-top:20px;max-width:100%}
  .d-title{font-size:21px;font-weight:800;letter-spacing:-.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .d-artist{font-size:13.5px;color:var(--muted);margin-top:7px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .lyrics{flex:1;min-height:0;width:100%;max-width:560px;margin-top:16px;
    overflow-y:auto;padding:52px 12px 28px;scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.8) 10%,#000 20%,#000 80%,rgba(0,0,0,.8) 90%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,.8) 10%,#000 20%,#000 80%,rgba(0,0,0,.8) 90%)}
  .lyrics::-webkit-scrollbar{width:6px}
  .lyrics::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px}
  .lyric-line{text-align:center;font-size:15.5px;line-height:34px;
    padding:4px 0;opacity:.62;transform:scale(.97);transform-origin:center;
    transition:opacity .25s ease,transform .25s ease}

/* ═══════ 歌词区 ═══════ */
/* 逐字高亮：普通字切 color（廉价），仅当前正在填的那个字走渐变。
   发光只给「静态」状态（激活行 / 已唱字），sweep 全程无光：
   text-shadow 会糊在渐变上，filter 会每帧重算阴影，必掉帧。 */
.lyric-line{position:relative;font-size:20px;line-height:2.7;transform:scale(1);
  transform-origin:center;
  transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .25s ease}
/* 激活行：单层紧贴光。三层大半径会被每个 .ch 继承 → 整行蒙雾 */
.lyric-line.active{transform:scale(1.1);
  text-shadow:0 0 14px hsl(var(--hue) 90% 66% / .45)}
/* 行背后一盏柔光，跟随行宽呼吸。alpha 必须低，否则本身也是一团雾 */
.lyric-line.active::before{content:"";position:absolute;inset:-10px -18%;z-index:-1;
  pointer-events:none;border-radius:999px;
  background:radial-gradient(55% 100% at 50% 50%,hsl(var(--hue) 92% 62% / .14),transparent 70%)}
/* 关键：显式 text-shadow:none，阻断父级光晕的继承 */
.lyric-line .ch{color:var(--muted);text-shadow:none;
  transition:color .18s ease,text-shadow .25s ease}
/* 已唱：只留一层紧贴微光，和未唱暗字拉开层次 */
.lyric-line .ch.on{color:#fff;text-shadow:0 0 8px hsl(var(--hue) 95% 80% / .35)}
.lyric-line.active .ch{color:rgba(255,255,255,.45)}
.lyric-line.active .ch.on{color:#fff;text-shadow:0 0 9px hsl(var(--hue) 95% 82% / .5)}
/* color 提前锁白 + transition:none，摘 sweep 时不会闪。
   不加发光：text-shadow 盖在渐变上会发灰 */
.lyric-line .ch.sweep,.lyric-line.active .ch.sweep{
  color:#fff;transition:none;-webkit-text-fill-color:transparent;
  background-image:linear-gradient(90deg,#fff var(--cp,0%),rgba(255,255,255,.45) var(--cp,0%));
  -webkit-background-clip:text;background-clip:text;text-shadow:none}
.lyric-empty{text-align:center;color:var(--muted);padding:44px 0;font-size:14px}

/* ═══════ 控制条 ═══════ */
.detail-controls{position:relative;z-index:2;flex:none;
  padding:10px 22px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,rgba(8,9,14,.72) 40%)}
.bar-wrap{display:flex;align-items:center;gap:12px;max-width:640px;margin:0 auto}
.time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none;
  width:42px;text-align:center}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:16px;
  background:transparent;border:none;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track,input[type=range]::-moz-range-track{
  height:5px;border-radius:99px;
  background:linear-gradient(90deg,#fff var(--p,0%),rgba(255,255,255,.15) var(--p,0%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;
  margin-top:-4px;border:none;border-radius:50%;background:#fff;
  box-shadow:0 0 0 4px hsl(var(--hue) 85% 62% / .4),
             0 0 14px hsl(var(--hue) 95% 70% / .65);
  transition:transform .15s,box-shadow .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1);
  box-shadow:0 0 0 4px hsl(var(--hue) 85% 62% / .55),
             0 0 20px hsl(var(--hue) 95% 72% / .85)}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;
  background:#fff;box-shadow:0 0 0 4px hsl(var(--hue) 85% 62% / .4),
                            0 0 14px hsl(var(--hue) 95% 70% / .65)}
input[type=range]:focus-visible{outline:2px solid hsl(var(--hue) 85% 62% / .85);outline-offset:6px}

/* ═══════ 移动端覆盖 ═══════ */
@media (max-width:640px){
  .lyric-line{font-size:16px;line-height:2.6;padding:5px 0}
  /* 不再改 .active 的 font-size：和 scale 叠加会双重放大 + 触发整段重排 */
  .detail-controls{padding:8px 14px calc(14px + env(safe-area-inset-bottom))}
  .bar-wrap{gap:8px}
  .time{font-size:11px;width:36px}
  /* input 高度只撑触摸区，视觉高度由 track 决定，别在这里改 */
  input[type=range]::-webkit-slider-thumb{width:16px;height:16px;margin-top:-5.5px}
  input[type=range]::-moz-range-thumb{width:16px;height:16px}
}

/* ═══════ 降级 ═══════ */
@media (prefers-reduced-motion:reduce){
  .lyric-line,.lyric-line .ch,input[type=range]::-webkit-slider-thumb{transition:none}}
    
  /* 进度条三层：底轨 ← 已缓冲(--buf) ← 已播(--prog)，由 player.js 更新。
     用 background-size 分层而非渐变色标，这样 --buf 小于 --prog 时也不会画反。 */
  #dSeek{--prog:0%;--buf:0%;
    background:
      linear-gradient(90deg,var(--accent),var(--accent2)) 0 0/var(--prog) 100% no-repeat,
      linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.24)) 0 0/var(--buf) 100% no-repeat,
      rgba(255,255,255,.13)}
  #dSeek::-moz-range-track{
    background:
      linear-gradient(90deg,var(--accent),var(--accent2)) 0 0/var(--prog) 100% no-repeat,
      linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.24)) 0 0/var(--buf) 100% no-repeat,
      rgba(255,255,255,.13)}

  /* 缓冲中状态行（详情页） */
  .buf-state{margin-top:8px;font-size:12.5px;color:hsl(var(--hue) 90% 72%);
    display:flex;align-items:center;gap:7px}
  .buf-state[hidden]{display:none}
  .buf-state::before{content:"";width:11px;height:11px;flex:none;border-radius:50%;
    border:2px solid currentColor;border-top-color:transparent;animation:bufspin .7s linear infinite}
  @keyframes bufspin{to{transform:rotate(360deg)}}

  /* 缓冲中：封面与波形停下（表示没在推进），迷你条做扫光提示 */
  body.buffering .cover.playing .cover-inner{animation-play-state:paused}
  body.buffering .track.playing .eq i{animation-play-state:paused}
  body.buffering .mini-bar::after{content:"";position:absolute;inset:0;overflow:hidden;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
    transform:translateX(-100%);animation:bufsweep 1.2s ease-in-out infinite}
  @keyframes bufsweep{to{transform:translateX(100%)}}

  .ctrl-row{display:flex;align-items:center;justify-content:center;gap:22px;
    max-width:640px;margin:6px auto 0;position:relative}
  .ctrl-row .icon-btn{width:44px;height:44px}
  .ctrl-row .icon-btn.play{width:62px;height:62px;border-radius:50%;color:#0a0b10;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    box-shadow:0 12px 30px -8px hsl(var(--hue) 85% 55% / .8)}
  .ctrl-row .icon-btn.play svg{width:26px;height:26px}
  .vol{position:absolute;right:0;display:flex;align-items:center;gap:8px;width:118px;
    color:var(--muted)}
  .vol svg{width:16px;height:16px;fill:currentColor;flex:none}

  /* ============ 迷你播放条 ============ */
  .mini{position:fixed;left:0;right:0;bottom:0;z-index:38;
    height:calc(var(--mini-h) + env(safe-area-inset-bottom));
    padding:0 16px env(safe-area-inset-bottom);
    display:flex;align-items:center;gap:12px;
    background:rgba(13,15,23,.82);backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);border-top:1px solid var(--stroke)}
  .mini-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0;cursor:pointer}
  .mini-cover{width:48px;height:48px;border-radius:12px;font-size:0}
  .mini-text{min-width:0}
  .m-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-artist{font-size:12px;color:var(--muted);margin-top:3px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mini-controls{display:flex;align-items:center;gap:6px;flex:none}
  .mini-controls .icon-btn{width:42px;height:42px}
  .mini-bar{position:absolute;left:0;right:0;top:0;height:2px;
    background:rgba(255,255,255,.09);overflow:hidden}
  .mini-bar i{position:absolute;left:0;top:0;height:100%;width:0;
    background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .2s linear}
  /* 已缓冲段（铺在已播段下面，DOM 里排在前面） */
  .mini-bar i.mbuf{background:rgba(255,255,255,.26)}

  /* ============ 桌面端：详情页左右分栏 ============ */
  @media (min-width:900px){
    .detail-body{flex-direction:row;align-items:center;justify-content:center;
      gap:56px;padding:10px 56px}
    .detail-art .cover{width:300px;height:300px}
    .detail-meta{margin-top:24px}
    .d-title{font-size:24px}
    .lyrics{flex:0 1 520px;width:520px;height:100%;margin-top:0;padding:64px 12px 28px}
    .ctrl-row{justify-content:center}
    .vol{right:22px}
  }
  /* ============ 移动端适配 (≤ 640px) ============ */
  @media (max-width: 640px) {
    /* --- 整体排版 --- */
    .wrap {
      padding: 44px 14px 0;
    }
    header { margin-bottom: 18px; }
    h1 { font-size: 24px; }
    .eyebrow { font-size: 11px; }
    .sub { font-size: 13px; }

    /* --- 工具栏的窄屏覆盖写在基础规则之后（见文件末尾 @media 640），
           否则同优先级的基础规则 .toolbar select{flex:none} 会把它盖掉 --- */

    /* --- 曲库列表行：加大触摸区 --- */
    .track { padding: 14px 14px; gap: 12px; }
    .idx { width: 20px; font-size: 13px; }
    .t-title { font-size: 14px; }
    .t-artist { font-size: 12px; }

    /* --- 详情页顶部 --- */
    .detail-top {
      padding: calc(10px + env(safe-area-inset-top)) 14px 8px;
      gap: 8px;
    }
    .detail-top .icon-btn { width: 44px; height: 44px; }
    .detail-top .icon-btn svg { width: 22px; height: 22px; }
    .detail-top .t-head { font-size: 12px; }

    /* --- 详情页主体：封面缩小，meta 紧贴，歌词区域充分展开 --- */
    .detail-body { padding: 4px 16px 0; gap: 0; }
    .detail-art .cover { display: none; }
    .detail-meta { margin-top: 4px; }
    .d-title { font-size: 17px; }
    .d-artist { font-size: 13px; }
    .d-extra { margin-top: 6px; gap: 5px; }
    .d-extra span { font-size: 10.5px; padding: 2px 8px; }

    /* --- 歌词区域：全屏可滚动，优化触摸 --- */
    .lyrics {
      margin-top: 10px;
      padding: 60px 16px 28px;
      -webkit-overflow-scrolling: touch;
      cursor: default;
    }
    .lyric-line { font-size: 14.5px; line-height: 30px; padding: 5px 0; }
    .lyric-line.active { font-size: 16.5px; }
    .lyric-empty { padding: 60px 16px 32px; font-size: 13px; }

    /* --- 播放控制栏：移除音量绝对定位，改为内联 --- */
    .detail-controls {
      padding: 8px 14px calc(14px + env(safe-area-inset-bottom));
    }
    .bar-wrap { gap: 8px; }
    .time { font-size: 11px; width: 36px; }
    input[type=range] { height: 4px; }
    input[type=range]::-webkit-slider-thumb { width: 16px; height: 16px; }
    input[type=range]::-moz-range-thumb { width: 16px; height: 16px; }

    .ctrl-row {
      gap: 14px;
      margin-top: 4px;
    }
    .ctrl-row .icon-btn {
      width: 50px;
      height: 50px;
    }
    .ctrl-row .icon-btn svg { width: 24px; height: 24px; }
    .ctrl-row .icon-btn.play {
      width: 64px;
      height: 64px;
    }
    .ctrl-row .icon-btn.play svg { width: 28px; height: 28px; }

    /* 音量改为内联，不再绝对定位 */
    .vol {
      position: static;
      width: auto;
      justify-content: center;
      margin-top: 8px;
      color: var(--muted);
    }
    .vol svg { width: 18px; height: 18px; }
    .vol input[type=range] { width: 120px; }

    /* --- 迷你播放条 --- */
    .mini {
      height: calc(64px + env(safe-area-inset-bottom));
      padding: 0 12px env(safe-area-inset-bottom);
      gap: 8px;
    }
    .mini-cover { width: 44px; height: 44px; border-radius: 10px; }
    .m-title { font-size: 13px; }
    .m-artist { font-size: 11px; }
    .mini-controls .icon-btn { width: 48px; height: 48px; }

    /* --- Toast 位置 --- */
    .toast {
      bottom: calc(64px + 16px + env(safe-area-inset-bottom));
      min-width: 240px;
      padding: 12px 14px;
      font-size: 13px;
    }
  }

  /* --- 小屏手机 (≤ 380px) 进一步收紧 --- */
  @media (max-width: 380px) {
    .wrap { padding: 36px 10px 0; }
    h1 { font-size: 20px; }
    .detail-body { padding: 2px 10px 0; }
    .detail-art .cover { display: none; }
    .ctrl-row { gap: 10px; }
    .ctrl-row .icon-btn { width: 44px; height: 44px; }
    .ctrl-row .icon-btn.play { width: 56px; height: 56px; }
    .vol input[type=range] { width: 90px; }
  }

  /* 现有断点补充 */
  @media (max-width:560px){
    h1{font-size:26px}
    .detail-art .cover{width:min(62vw,240px);height:min(62vw,240px)}
    .toolbar input[type=search]{min-width:0}
    .track .dur{display:none}
  }

  /* 小屏：隐藏音质 badge（副标题已含 专辑·音质·体积），把宽度让给副标题和删除按钮 */
  @media (max-width:480px){
    .track .badge{display:none}
    /* 下载 + 删除两个按钮：小屏收紧内边距，避免挤压标题 */
    .track .act{gap:6px}
    .track .act .dl-btn,.track .act .del-btn{padding:7px 10px}
  }

  /* ============ 页签 / 工具栏 ============ */
  .tabs{display:flex;gap:6px;margin-top:20px;flex-wrap:wrap}
  .tab{font-size:13.5px;padding:8px 16px;border-radius:999px;color:var(--muted);
       border:1px solid transparent;transition:all .18s ease;white-space:nowrap}
  .tab:hover{color:var(--text);background:var(--panel)}
  .tab.active{color:#0a0b10;background:linear-gradient(135deg,var(--accent),var(--accent2));
              font-weight:600}
  .tabs.indent{margin-top:14px;margin-bottom:2px}

  /* ============ 独立搜索页 ============ */
  .search-view{
    position:fixed;inset:0;z-index:18;display:flex;flex-direction:column;
    background:var(--bg);
    transform:translateY(100%);visibility:hidden;
    transition:transform .42s cubic-bezier(.22,.9,.24,1),visibility .42s;
    will-change:transform;
    /* 底部给迷你播放条留位，内容滚动区止于其上方 */
    padding-bottom:calc(var(--mini-h) + env(safe-area-inset-bottom));
  }
  .search-view.open{transform:translateY(0);visibility:visible}
  .search-top{display:flex;align-items:center;gap:8px;flex:none;
    padding:calc(12px + env(safe-area-inset-top)) 14px 10px;
    border-bottom:1px solid var(--stroke)}
  .search-top .icon-btn{width:38px;height:38px;flex:none}
  .search-top input[type=search]{flex:1;min-width:0}
  .search-top select{flex:none;max-width:84px;padding:9px 8px}
  .search-top .btn{flex:none;padding:9px 12px}
  .search-view .crumb{margin:0 0 10px}
  .search-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:12px 14px 0}
  .search-body .card{margin-bottom:14px}

  /* 在线 / 本地 结果来源切换 */
  .search-tabs{display:flex;gap:6px;flex:none;padding:10px 14px 2px}
  .stab{flex:1;text-align:center;font-size:13.5px;padding:8px 0;border-radius:10px;
        color:var(--muted);border:1px solid transparent;transition:all .18s ease}
  .stab:hover{color:var(--text);background:var(--panel)}
  .stab.active{color:#0a0b10;font-weight:600;
    background:linear-gradient(135deg,var(--accent),var(--accent2))}

  /* 在线结果的类型 chips */
  .search-types{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
  .chip{font-size:13px;padding:6px 14px;border-radius:999px;border:1px solid var(--stroke);
        color:var(--muted);background:transparent;transition:all .16s ease}
  .chip:hover{color:var(--text);background:var(--panel)}
  .chip.active{color:var(--accent2);border-color:var(--accent2);
        background:rgba(34,211,238,.12);font-weight:600}

  /* 分页「加载更多」 */
  .more-btn{display:block;width:calc(100% - 24px);margin:2px 12px 14px;padding:11px;
        border-radius:12px;border:1px solid var(--stroke);background:var(--panel);
        color:var(--text);font-size:13.5px;transition:all .18s ease}
  .more-btn:hover{background:var(--panel-strong);border-color:var(--accent)}
  .more-btn:disabled{opacity:.6;cursor:default}
  .singer-listwrap .more-btn{margin-top:6px}

  .toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
  .toolbar input[type=search]{flex:1;min-width:180px}
  .toolbar select{flex:none}

  /* 窄屏工具栏：搜索独占一行，三个下拉并排平分剩余宽度。
     必须写在上面的基础规则之后，否则同优先级的 .toolbar select{flex:none} 会覆盖掉。 */
  @media (max-width:640px){
    .toolbar{gap:8px;margin-bottom:12px}
    .toolbar input[type=search]{flex:0 0 100%;width:100%;min-width:0}
    .toolbar select{flex:1;min-width:0}
    .toolbar .btn{width:100%;text-align:center}
    /* 移动端去掉大面板的实时模糊，改用近似纯色，降低合成开销 */
    .card{background:rgba(19,21,30,.94);backdrop-filter:none;-webkit-backdrop-filter:none}
    /* 背景光斑：停止动画、降低模糊半径，否则持续重算大范围 blur */
    .blob{filter:blur(56px);opacity:.4}
    .blob.a,.blob.b{animation:none}
    /* 歌词滚动容器去掉遮罩：mask 在滚动时会导致整层重绘 */
    .lyrics{-webkit-mask-image:none;mask-image:none}
  }
  input[type=search],select{
    background:var(--panel);border:1px solid var(--stroke);border-radius:12px;
    color:var(--text);font-size:13.5px;padding:10px 14px;outline:none;
    transition:border-color .18s ease,background .18s ease}
  input[type=search]::placeholder{color:var(--muted)}
  input[type=search]:focus,select:focus{border-color:var(--accent);background:var(--panel-strong)}
  select option{background:#12141d;color:var(--text)}
  .btn{font-size:13.5px;padding:10px 18px;border-radius:12px;border:1px solid var(--stroke);
       background:var(--panel);color:var(--text);transition:all .18s ease;white-space:nowrap}
  .btn:hover{background:var(--panel-strong);border-color:var(--accent)}
  .btn.primary{border:none;color:#0a0b10;font-weight:600;
               background:linear-gradient(135deg,var(--accent),var(--accent2))}
  .btn.primary:hover{filter:brightness(1.1)}
  .btn:disabled{opacity:.5;cursor:not-allowed;filter:none}

  /* ============ 列表通用 ============ */
  .list{max-height:none}
  .group-head{display:flex;align-items:center;gap:10px;padding:11px 18px;
    background:rgba(15,17,26,.97);border-bottom:1px solid rgba(255,255,255,.06);
    font-size:13px;font-weight:700;color:var(--text);letter-spacing:.03em;
    position:sticky;top:0;z-index:1}
  .group-head .gh-sub{font-weight:400;color:var(--muted);font-size:12px}
  .track .sub2{font-size:12px;color:var(--muted);margin-top:3px;
               white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .track .dur{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;
              flex:none;width:44px;text-align:right}
  .empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:14px}

  /* ============ 在线浏览 ============ */
  .crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);
         margin-bottom:14px;flex-wrap:wrap}
  .crumb a{color:var(--accent2);cursor:pointer;text-decoration:none}
  .crumb a:hover{text-decoration:underline}
  .crumb .cur{color:var(--text);font-weight:600}

  .avatar{width:46px;height:46px;border-radius:12px;object-fit:cover;flex:none;
          background:linear-gradient(135deg,hsl(var(--hue) 60% 40%),hsl(calc(var(--hue) + 60) 60% 30%));
          font-size:0}
  .avatar.round{border-radius:50%}
  .act{flex:none;display:flex;gap:8px;align-items:center}
  .dl-btn{font-size:12px;padding:7px 14px;border-radius:999px;
          border:1px solid var(--stroke);color:var(--text);background:transparent;
          transition:all .16s ease;white-space:nowrap}
  .dl-btn:hover{border-color:var(--accent2);color:var(--accent2);background:rgba(34,211,238,.10)}
  .dl-btn.busy{opacity:.55;cursor:progress}
  .dl-btn.have{border-color:transparent;color:var(--accent2);background:rgba(34,211,238,.12);
               cursor:default}
  .dl-btn.have:hover{color:var(--accent2);background:rgba(34,211,238,.12)}
  .track.playable{cursor:pointer}
  .track:not(.have) .idx{opacity:.55}

  /* ============ 下载进度 ============ */
  .toast{position:fixed;left:50%;transform:translateX(-50%);
         bottom:calc(var(--mini-h) + 24px + env(safe-area-inset-bottom));
         z-index:40;min-width:260px;max-width:min(560px,90vw);
         background:rgba(18,20,30,.95);border:1px solid var(--stroke);
         border-radius:16px;padding:14px 18px;font-size:13.5px;
         box-shadow:0 20px 50px -18px rgba(0,0,0,.9);
         backdrop-filter:blur(16px);transition:opacity .25s ease,transform .25s ease}
  .toast[hidden]{display:none}
  .toast .tt-title{font-weight:600;margin-bottom:8px;display:flex;justify-content:space-between;
                   gap:14px;align-items:center}
  .toast .tt-title button{color:var(--muted);font-size:16px;line-height:1}
  .toast .tt-title button:hover{color:var(--text)}
  .prog{height:5px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
  .prog i{display:block;height:100%;width:0;border-radius:99px;
          background:linear-gradient(90deg,var(--accent),var(--accent2));
          transition:width .3s ease}
  .tt-log{margin-top:9px;max-height:132px;overflow-y:auto;font-size:12px;line-height:1.7;
          color:var(--muted);font-family:Consolas,Menlo,monospace;white-space:pre-wrap;
          word-break:break-all}
  .tt-log::-webkit-scrollbar{width:5px}
  .tt-log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px}

  /* ============ 详情页元数据 ============ */
  .d-extra{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
  .d-extra span{font-size:11.5px;padding:4px 11px;border-radius:999px;
                border:1px solid var(--stroke);color:var(--muted)}

  /* ============ 轻量提示（#notice） ============ */
  .notice{position:fixed;left:50%;transform:translateX(-50%);
          bottom:calc(var(--mini-h) + 24px + env(safe-area-inset-bottom));
          z-index:41;display:flex;align-items:center;gap:12px;
          max-width:min(560px,92vw);padding:12px 14px 12px 18px;
          background:rgba(18,20,30,.96);border:1px solid var(--stroke);
          border-radius:14px;font-size:13.5px;color:var(--text);
          box-shadow:0 18px 46px -18px rgba(0,0,0,.9);
          backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
          animation:noticeIn .22s ease}
  .notice[hidden]{display:none}
  .notice .n-msg{flex:1;min-width:0;word-break:break-all}
  .notice .n-close{flex:none;color:var(--muted);font-size:17px;line-height:1;
                   padding:2px 6px;border-radius:8px;transition:color .15s}
  .notice .n-close:hover{color:var(--text);background:var(--panel-strong)}
  @keyframes noticeIn{from{opacity:0;transform:translate(-50%,10px)}
                      to{opacity:1;transform:translate(-50%,0)}}

  /* ============ 删除按钮 ============ */
  .del-btn{font-size:12px;padding:7px 13px;border-radius:999px;
           border:1px solid var(--stroke);color:var(--muted);background:transparent;
           transition:all .16s ease;white-space:nowrap}
  .del-btn:hover{border-color:#ff6b6b;color:#ffb4b4;background:rgba(255,80,80,.12)}
  .del-btn:disabled{opacity:.4;cursor:not-allowed}
  .track .act{opacity:.8;transition:opacity .16s ease}
  .track:hover .act{opacity:1}

/* ════════════════════════════════════════════════════════════
   底部播放控件重设计
   更克制的层级、更精致的进度条与按钮、玻璃质感分隔，
   向主流音乐 App（Apple Music / Spotify / 网易云）的观感靠拢。
   ════════════════════════════════════════════════════════════ */

  /* ---- 控制面板容器：玻璃质感 + 顶部发丝线 ---- */
  .detail-controls{
    padding:14px clamp(16px,4vw,28px) calc(20px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,
      rgba(8,9,14,0) 0%,
      rgba(8,9,14,.55) 34%,
      rgba(8,9,14,.94) 100%);
    border-top:1px solid rgba(255,255,255,.06)}

  /* ---- 进度条 ---- */
  .detail-controls .bar-wrap{max-width:680px;gap:12px}
  .time{font-size:11.5px;width:42px;color:var(--muted);
        font-variant-numeric:tabular-nums;letter-spacing:.02em}

  /* 进度全部画在 track 伪元素上；清掉元素自身背景，避免出现整块色带 */
  #dSeek{height:24px;background:none}
  #dSeek::-webkit-slider-runnable-track{
    height:6px;border-radius:999px;
    background:
      linear-gradient(90deg,var(--accent),var(--accent2)) 0 0/var(--prog,0%) 100% no-repeat,
      linear-gradient(90deg,rgba(255,255,255,.32),rgba(255,255,255,.20)) 0 0/var(--buf,0%) 100% no-repeat,
      rgba(255,255,255,.10);
    box-shadow:inset 0 1px 1px rgba(0,0,0,.35)}
  #dSeek::-moz-range-track{
    height:6px;border-radius:999px;
    background:
      linear-gradient(90deg,var(--accent),var(--accent2)) 0 0/var(--prog,0%) 100% no-repeat,
      linear-gradient(90deg,rgba(255,255,255,.32),rgba(255,255,255,.20)) 0 0/var(--buf,0%) 100% no-repeat,
      rgba(255,255,255,.10);
    box-shadow:inset 0 1px 1px rgba(0,0,0,.35)}
  #dSeek::-webkit-slider-thumb{
    -webkit-appearance:none;width:14px;height:14px;margin-top:-4px;
    border:none;border-radius:50%;background:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,.55),0 0 0 5px hsl(var(--hue) 85% 62% / .22);
    transition:transform .16s ease,box-shadow .16s ease}
  #dSeek::-moz-range-thumb{
    width:14px;height:14px;border:none;border-radius:50%;background:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,.55),0 0 0 5px hsl(var(--hue) 85% 62% / .22);
    transition:transform .16s ease,box-shadow .16s ease}
  #dSeek:hover::-webkit-slider-thumb,#dSeek:active::-webkit-slider-thumb{
    transform:scale(1.18);
    box-shadow:0 2px 8px rgba(0,0,0,.6),0 0 0 7px hsl(var(--hue) 85% 62% / .30)}
  #dSeek:hover::-moz-range-thumb,#dSeek:active::-moz-range-thumb{
    transform:scale(1.18);
    box-shadow:0 2px 8px rgba(0,0,0,.6),0 0 0 7px hsl(var(--hue) 85% 62% / .30)}

  /* ---- 传输按钮：次要按钮克制，主播放键突出 ---- */
  .ctrl-row{gap:clamp(20px,7vw,40px);margin-top:12px;max-width:640px}
  .ctrl-row .icon-btn{
    width:50px;height:50px;border-radius:50%;color:#c3c9da;
    transition:color .18s ease,background .18s ease,transform .12s ease}
  .ctrl-row .icon-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
  .ctrl-row .icon-btn:active{transform:scale(.9)}
  .ctrl-row .icon-btn svg{width:24px;height:24px}
  .ctrl-row .icon-btn.play{
    width:68px;height:68px;color:#0b0c12;border-radius:50%;
    background:linear-gradient(145deg,var(--accent),var(--accent2));
    box-shadow:0 16px 36px -12px hsl(var(--hue) 88% 58% / .9),
               0 0 0 1px rgba(255,255,255,.16) inset;
    transition:transform .16s ease,box-shadow .2s ease,filter .2s ease}
  .ctrl-row .icon-btn.play:hover{
    transform:translateY(-1px) scale(1.045);filter:brightness(1.06);
    box-shadow:0 20px 44px -12px hsl(var(--hue) 88% 60% / 1),
               0 0 0 1px rgba(255,255,255,.20) inset}
  .ctrl-row .icon-btn.play:active{transform:scale(.97)}
  .ctrl-row .icon-btn.play svg{width:28px;height:28px}

  /* ---- 音量：细轨 + 小圆点，填充随数值走（--p 由 js 维护） ---- */
  .vol{width:132px;gap:8px;color:var(--muted)}
  .vol svg{width:17px;height:17px;fill:currentColor;flex:none}
  .vol input[type=range]{height:18px}
  .vol input[type=range]::-webkit-slider-runnable-track{
    height:4px;border-radius:999px;
    background:linear-gradient(90deg,var(--accent2) var(--p,90%),
               rgba(255,255,255,.16) var(--p,90%))}
  .vol input[type=range]::-moz-range-track{
    height:4px;border-radius:999px;
    background:linear-gradient(90deg,var(--accent2) var(--p,90%),
               rgba(255,255,255,.16) var(--p,90%))}
  .vol input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:12px;height:12px;margin-top:-4px;
    border:none;border-radius:50%;background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.5);transition:transform .15s ease}
  .vol input[type=range]::-moz-range-thumb{
    width:12px;height:12px;border:none;border-radius:50%;background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.5);transition:transform .15s ease}
  .vol input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15)}
  .vol input[type=range]:hover::-moz-range-thumb{transform:scale(1.15)}

  /* ---- 功能图标行：播放模式 / 声道 / 倍速 / 下载 ---- */
  .extra-row{display:flex;align-items:center;justify-content:center;
    gap:clamp(20px,8vw,52px);margin:16px auto 0;position:relative}
  .extra-row .icon-btn{width:42px;height:42px;border-radius:50%;color:#c3c9da;
    transition:color .18s ease,background .18s ease,transform .12s ease}
  .extra-row .icon-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
  .extra-row .icon-btn:active{transform:scale(.9)}
  .extra-row .icon-btn svg{width:22px;height:22px}
  .extra-row .icon-btn:disabled{opacity:.3;cursor:default;pointer-events:none}

  /* 声道选择弹层 */
  .channel-pop{position:absolute;left:50%;transform:translateX(-50%);
    bottom:calc(100% + 14px);z-index:6;min-width:148px;padding:6px;
    background:rgba(20,22,32,.98);border:1px solid rgba(255,255,255,.10);
    border-radius:16px;box-shadow:0 22px 54px -18px rgba(0,0,0,.95);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    animation:popIn .16s ease}
  .channel-pop[hidden]{display:none}
  .channel-pop button{display:block;width:100%;text-align:center;font-size:13px;
    padding:9px 12px;border-radius:11px;color:var(--text);
    transition:background .15s ease,color .15s ease}
  .channel-pop button:hover{background:rgba(255,255,255,.08)}
  .channel-pop button.active{color:#0b0c12;font-weight:600;
    background:linear-gradient(135deg,var(--accent),var(--accent2))}
  @keyframes popIn{from{opacity:0;transform:translate(-50%,8px)}
                   to{opacity:1;transform:translate(-50%,0)}}

  /* ---- 缓冲提示 ---- */
  .buf-state{margin-top:10px;font-size:12px;color:hsl(var(--hue) 90% 74%);gap:8px}
  .buf-state::before{width:12px;height:12px;border-width:2px}

  /* 播放页打开时，把轻量提示抬到控制条之上，避免被控件遮住 */
  body.detail-open .notice{bottom:calc(210px + env(safe-area-inset-bottom))}

  /* ---- 迷你播放条 ---- */
  .mini{padding:0 18px env(safe-area-inset-bottom);
    background:rgba(12,13,20,.80);
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    border-top:1px solid rgba(255,255,255,.07);
    box-shadow:0 -16px 44px -28px rgba(0,0,0,.95)}
  .mini-cover{box-shadow:0 8px 20px -10px rgba(0,0,0,.8)}
  .mini-controls .icon-btn{width:44px;height:44px;color:#c3c9da;border-radius:50%;
    transition:color .18s ease,background .18s ease,transform .12s ease}
  .mini-controls .icon-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
  .mini-controls .icon-btn:active{transform:scale(.9)}
  .mini-controls .icon-btn svg{width:20px;height:20px}
  #miniPlay{color:var(--accent2)}
  #miniPlay:hover{color:#fff}
  .mini-bar{height:3px;background:rgba(255,255,255,.10)}

  /* ---- 响应式 ---- */
  @media (max-width:640px){
    .detail-controls{padding:10px 16px calc(16px + env(safe-area-inset-bottom));
      background:linear-gradient(180deg,rgba(8,9,14,0),rgba(8,9,14,.94) 46%)}
    /* 传输键一行，音量条换行居中，窄屏也不会挤爆 */
    .ctrl-row{flex-wrap:wrap;gap:clamp(14px,8vw,24px);row-gap:6px;margin-top:8px}
    .ctrl-row .icon-btn{width:48px;height:48px}
    .ctrl-row .icon-btn.play{width:64px;height:64px}
    .ctrl-row .icon-btn.play svg{width:26px;height:26px}
    .vol{position:static;flex-basis:100%;width:auto;margin-top:4px;justify-content:center}
    .vol input[type=range]{width:min(56vw,200px)}
    .extra-row{margin-top:12px;gap:clamp(16px,7vw,34px)}
    .extra-row .icon-btn{width:40px;height:40px}
    .mini{padding:0 14px env(safe-area-inset-bottom)}
    .mini-controls .icon-btn{width:46px;height:46px}
  }

  @media (max-width:380px){
    .ctrl-row{gap:12px}
    .ctrl-row .icon-btn{width:42px;height:42px}
    .ctrl-row .icon-btn.play{width:56px;height:56px}
    .vol input[type=range]{width:min(60vw,180px)}
    .extra-row{gap:14px}
    .extra-row .icon-btn{width:38px;height:38px}
  }

/* ════════════════════════════════════════════════════════════
   间奏 / 纯音乐占位行（lyric.js 给无歌词行加 .is-note）
   需求：不显示 ♪，且这时歌词停止滚动。
     · font-size/opacity 置 0 → 不显示音符
     · 高度/行高/内边距折叠为 0 → 相邻占位行位置一致，滚动目标不动，
       因此歌词在这些段落保持不动，不再逐行往下滚
   精确匹配，不会误伤单字歌词行。
   ════════════════════════════════════════════════════════════ */
.lyric-line.is-note{
  height:0;min-height:0;line-height:0;padding:0;margin:0;
  font-size:0;opacity:0;pointer-events:none;transform:none}
.lyric-line.is-note.active{transform:none;text-shadow:none}
.lyric-line.is-note.active::before{display:none}

/* ============ 顶部账号入口 ============ */
.hero-actions{display:flex;gap:8px;align-items:center;flex:none}
.user-entry{display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:9px 14px;border-radius:999px;border:1px solid var(--stroke);
  background:var(--panel);color:var(--text);font-size:13.5px;
  transition:all .18s ease;max-width:36vw}
.user-entry:hover{background:var(--panel-strong);border-color:var(--accent)}
.user-entry:active{transform:scale(.96)}
.user-entry svg{width:17px;height:17px;fill:currentColor;flex:none}
.user-entry span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============ 整页浮层（我的歌单 / 用户管理） ============ */
.page-view{position:fixed;inset:0;z-index:36;display:flex;flex-direction:column;
  background:var(--bg);
  transform:translateY(100%);visibility:hidden;
  transition:transform .42s cubic-bezier(.22,.9,.24,1),visibility .42s;
  will-change:transform}
.page-view.open{transform:translateY(0);visibility:visible}
.page-top{display:flex;align-items:center;gap:12px;flex:none;
  padding:calc(14px + env(safe-area-inset-top)) 18px 10px;
  border-bottom:1px solid var(--stroke)}
.page-top .t-head{flex:1;text-align:center;font-size:13px;letter-spacing:.24em;
  color:var(--muted);text-transform:uppercase}
.page-top .icon-btn{width:40px;height:40px}
.page-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px 16px calc(var(--mini-h) + 28px + env(safe-area-inset-bottom))}

.account-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.account-bar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:13.5px;color:var(--muted)}
.account-bar .btn{padding:7px 12px;font-size:12.5px}
.pl-newbar{display:flex;gap:8px;margin-bottom:14px}.pl-newbar input,.modal-input{flex:1;min-width:0;background:var(--panel);
  border:1px solid var(--stroke);border-radius:12px;color:var(--text);
  font-size:13.5px;padding:10px 14px;outline:none}
.pl-newbar input:focus,.modal-input:focus{border-color:var(--accent);background:var(--panel-strong)}
.pl-detail-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pl-detail-head span{font-size:15px;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pl-lists li{display:flex;align-items:center;gap:10px;padding:13px 4px;
  border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer}
.pl-lists li:hover{background:var(--panel)}
.pl-lists .pl-li-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-lists .pl-li-count{color:var(--muted);font-size:12px;flex:none}
.pl-lists .pl-li-act{display:flex;gap:6px;flex:none}
.pl-lists .pl-li-act .btn{padding:6px 10px;font-size:12px}

/* ============ 模态框 ============ */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;
  justify-content:center;padding:20px}
.modal-mask{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.modal-card{position:relative;width:100%;max-width:360px;background:#161a24;
  border:1px solid var(--stroke);border-radius:18px;padding:18px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);max-height:82vh;overflow-y:auto}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;font-size:16px;font-weight:700}
.modal-x{color:var(--muted);font-size:22px;line-height:1}
.modal-x:hover{color:var(--text)}
.modal-tabs{display:flex;gap:6px;margin-bottom:14px}
.modal-input{width:100%;margin-bottom:10px}
.modal-err{color:#ff8a8a;font-size:12.5px;margin-bottom:10px}
.modal-submit{width:100%}
.picker-song{color:var(--muted);font-size:12.5px;margin-bottom:10px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-list{max-height:40vh;overflow-y:auto;margin-bottom:10px}
.picker-list li{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.05);font-size:13.5px}
.picker-list li:last-child{border-bottom:none}
.picker-list .pl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.picker-list .pl-add{flex:none}
.picker-list .pl-add .btn{padding:6px 12px;font-size:12px}

/* ============ 用户管理 ============ */
.admin-user{display:flex;align-items:center;gap:10px;padding:12px 4px;
  border-bottom:1px solid rgba(255,255,255,.05)}
.admin-user .au-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-user .au-role{font-size:11px;color:var(--muted);border:1px solid var(--stroke);
  border-radius:999px;padding:2px 8px;flex:none}
.admin-user.disabled .au-name{opacity:.5;text-decoration:line-through}
.admin-user .au-act{display:flex;gap:6px;flex:none}
.admin-user .au-act .btn{padding:6px 10px;font-size:12px}

@media (max-width:480px){
  .user-entry{padding:9px 11px}
  .user-entry span{max-width:80px}
}

/* ============================================================
   多页外壳：顶栏 / 页面容器 / 登录 / 专辑头 / 管理页
   ============================================================ */
.app-bar{position:fixed;top:0;left:0;right:0;z-index:28;
  height:calc(var(--appbar-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 14px 0;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  background:rgba(8,9,14,.82);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--stroke)}
.app-bar .icon-btn{width:40px;height:40px}
.app-bar .search-entry{padding:8px 10px}
.app-bar-title{grid-column:2;justify-self:center;min-width:0;max-width:100%;
  text-align:center;font-size:15px;font-weight:700;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-bar-actions{grid-column:3;display:flex;align-items:center;gap:8px;flex:none}

.page-wrap{position:relative;z-index:1;max-width:820px;margin:0 auto;
  padding:16px 20px 22px}
.page-wrap .sub:first-child{margin-top:0}
.page-wrap > .card{margin-bottom:14px}
.page-wrap .search-top{padding:0 0 12px;border-bottom:none}
.page-wrap .search-tabs{padding:10px 0 2px}
.page-wrap .singer-hero{padding:6px 0 16px}

/* 专辑头 */
.album-hero{display:flex;align-items:center;gap:18px;padding:6px 0 16px}
.album-hero .singer-info{min-width:0;flex:1}

/* 管理页 */
.admin-bar{display:flex;justify-content:flex-end;margin-bottom:14px}
.admin-bar .btn{padding:8px 14px;font-size:13px}

/* 登录页 */
.login-card{max-width:360px;margin:6vh auto 0;background:var(--panel);
  border:1px solid var(--stroke);border-radius:20px;padding:22px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.login-title{font-size:20px;font-weight:800;text-align:center;margin-bottom:16px}
.login-card .modal-tabs{display:flex;gap:6px;margin-bottom:16px}
.login-card .modal-input{margin-bottom:10px;width:100%}
.login-card .modal-submit{width:100%}
.login-card .modal-err{color:#ff8a8a;font-size:12.5px;margin-bottom:10px}

@media (max-width:480px){
  .page-wrap{padding:14px 14px 18px}
}

/* ============ 当前播放列表抽屉 ============ */
.queue-drawer{position:fixed;inset:0;z-index:46;visibility:hidden}
.queue-drawer.open{visibility:visible}
.queue-mask{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;
  transition:opacity .25s ease}
.queue-drawer.open .queue-mask{opacity:1}
.queue-panel{position:absolute;left:0;right:0;bottom:0;max-height:72vh;
  display:flex;flex-direction:column;background:#12141d;
  border-top:1px solid var(--stroke);border-radius:20px 20px 0 0;
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.22,.9,.24,1);
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.9)}
.queue-drawer.open .queue-panel{transform:translateY(0)}
.queue-head{display:flex;align-items:center;gap:10px;padding:16px 18px 10px;
  border-bottom:1px solid var(--stroke);flex:none}
.queue-head .queue-source{font-size:15px;font-weight:700;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue-head .queue-count{font-size:12px;color:var(--muted);flex:none}
.queue-head .btn{padding:7px 12px;font-size:12.5px;flex:none}
.queue-head .icon-btn{width:36px;height:36px;flex:none}
#queueList{flex:1;min-height:0;overflow-y:auto;
  padding-bottom:calc(env(safe-area-inset-bottom))}
#queueList .track.missing{opacity:.55}

/* ============ 设置页 ============ */
.settings-card{padding:4px 4px}
.set-row{display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.set-row:last-child{border-bottom:none}
.set-row label{font-size:14px;flex:1;min-width:0}
.set-row label small{display:block;color:var(--muted);font-size:12px;margin-top:3px;font-weight:400}
.set-row select{flex:none;min-width:132px}
.set-row input[type=range]{flex:none;width:140px}
.set-row input.switch{flex:none;width:22px;height:22px;accent-color:var(--accent);cursor:pointer}
#setVolumeVal{color:var(--accent2);font-variant-numeric:tabular-nums}
.settings-note{color:var(--muted);font-size:12.5px;margin-top:12px;line-height:1.6}

/* ============ 歌曲操作菜单 ============ */
.sheet{position:fixed;inset:0;z-index:48;visibility:hidden}
.sheet.open{visibility:visible}
.sheet-mask{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;
  transition:opacity .22s ease}
.sheet.open .sheet-mask{opacity:1}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;background:#14161f;
  border-top:1px solid var(--stroke);border-radius:20px 20px 0 0;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.22,.9,.24,1);
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.9)}
.sheet.open .sheet-panel{transform:translateY(0)}
.sheet-title{font-size:14px;font-weight:700;padding:4px 8px 12px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.sheet-actions{margin-bottom:8px}
.sheet-actions li{border-bottom:1px solid rgba(255,255,255,.05)}
.sheet-actions li:last-child{border-bottom:none}
.sheet-action{display:block;width:100%;text-align:center;padding:14px 10px;
  font-size:15px;color:var(--text);border-radius:12px;transition:background .15s}
.sheet-action:hover{background:var(--panel)}
.sheet-action.danger{color:#ff8a8a}
.sheet-cancel{width:100%;background:var(--panel-strong)}