.desktop-music-icon { top: 155px; }
.music-icon-art { width: 46px; height: 46px; display: block; object-fit: contain; filter: drop-shadow(0 3px 8px #0002); }
.window-caption > .music-icon-art { width: 20px; height: 20px; flex-shrink: 0; filter: none; }
#music {
    /* 主色调：只改 --accent-rgb 这一处，其余色值全部由它派生 */
    --accent-rgb:236,65,65;                 /* 默认：网易云红 */
    --accent:rgb(var(--accent-rgb));
    --accent-soft:rgba(var(--accent-rgb),.10);
    --accent-glow:rgba(var(--accent-rgb),.55);
    --accent-dark:#d93a3a;                  /* 不支持 color-mix 时的回退 */
    --accent-dark:color-mix(in srgb, var(--accent) 86%, #000);
    --accent-light:#ff6a6a;                 /* 不支持 color-mix 时的回退 */
    --accent-light:color-mix(in srgb, var(--accent) 72%, #fff);
    --text:#1c1c1e;
    --text-2:#8a8f98;
    --line:rgba(0,0,0,.10);                 /* 0.5px 分割线颜色 */
    --window-bg:#ffffff;
    --panel-bg:#fafbfc;
    --radius:14px;
  }
#music .body { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); }
#music .player { flex:0 0 auto; display:grid; grid-template-columns:minmax(150px,1fr) minmax(240px,1.4fr) minmax(170px,1fr); align-items:center; gap:20px; padding:16px 22px 12px; border-top:1px solid var(--line); background:var(--panel-bg); position:relative; z-index:2; }
#music .now{display:flex;align-items:center;gap:12px;min-width:0;}
#music .cover { position:relative; width:48px; height:48px; flex:0 0 auto; border-radius:9px; overflow:hidden; background:var(--accent-soft); box-shadow:0 3px 12px #00000012; }
#music .cover img{width:100%;height:100%;object-fit:cover;display:block;}
#music .cover .ph{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    font-size:22px;color:rgba(var(--accent-rgb),.65);
  }
#music .now-meta{min-width:0;flex:1 1 auto;}
#music .song-name { font-size:13px; font-weight:600; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
#music .song-artist { margin-top:3px; font-size:11px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#music .progress{display:flex;align-items:center;gap:10px;}
#music .time{
    font-size:12px;color:var(--text-2);
    font-variant-numeric:tabular-nums;
    flex:0 0 auto;min-width:36px;
  }
#music .time.total{text-align:right;}
#music .track{
    position:relative;flex:1 1 auto;height:16px;
    display:flex;align-items:center;
    cursor:var(--cursor-pointer, pointer);
    touch-action:none;
    outline:none;
  }
#music .track.ready{cursor:var(--cursor-pointer, pointer);}
#music .rail{
    position:relative;width:100%;height:4px;
    border-radius:99px;
    background:rgba(0,0,0,.08);
    overflow:hidden;
    transition:height .12s ease;
  }
#music .track:hover .rail{height:6px;}
#music .buffer{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(0,0,0,.07);}
#music .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);border-radius:99px;}
#music .knob{
    position:absolute;top:50%;left:0;
    width:11px;height:11px;margin-left:-5.5px;
    border-radius:50%;background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.32);
    transform:translateY(-50%) scale(.7);
    opacity:0;pointer-events:none;
    transition:opacity .15s ease,transform .15s ease;
  }
#music .track:hover .knob,
#music .track.dragging .knob,
#music .track:focus-visible .knob{opacity:1;transform:translateY(-50%) scale(1);}
#music .track:focus-visible .rail{box-shadow:0 0 0 3px var(--accent-soft);}
/* Keep the play button centered even when the optional platform link is absent. */
#music .controls { display:grid; grid-template-columns:repeat(2,34px) 36px repeat(2,34px); align-items:center; justify-items:center; justify-content:center; gap:14px; }
#music .controls > .ctrl { grid-row:1; }
#music-btnLoop { grid-column:1; }
#music-btnPrev { grid-column:2; }
#music-btnPlay { grid-column:3; }
#music-btnNext { grid-column:4; }
#music-btnLink { grid-column:5; }
#music .ctrl{
    width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
    border:0;border-radius:50%;
    background:transparent;color:#4a5058;
    cursor:var(--cursor-pointer, pointer);
    transition:background .15s,color .15s,transform .1s;
  }
#music .ctrl:hover{background:rgba(0,0,0,.055);color:#1f2430;}
#music .ctrl:active{transform:scale(.94);}
#music .ctrl:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
#music .ctrl.on{color:var(--accent);}
#music .ctrl.on:hover{background:var(--accent-soft);}
#music .ctrl.play { width:36px; height:36px; color:#fff; background:var(--accent); box-shadow:0 4px 12px -4px var(--accent-glow); }
#music .ctrl.play:hover{background:var(--accent-dark);color:#fff;}
#music .ctrl:disabled{opacity:.4;cursor:not-allowed;}
#music .utility { display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:0; }
#music .volume{display:flex;align-items:center;gap:8px;min-width:0;}
#music .vol-btn{
    width:26px;height:26px;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    border:0;border-radius:7px;
    background:transparent;color:#5c636d;
    cursor:var(--cursor-pointer, pointer);
    transition:background .15s,color .15s;
  }
#music .vol-btn:hover{background:rgba(0,0,0,.055);color:#1f2430;}
#music .vol-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
#music .vol-track { position:relative; width:60px; height:20px; display:flex; align-items:center; cursor:var(--cursor-pointer,pointer); touch-action:none; outline:none; flex:0 0 auto; }
#music .vol-rail{
    position:relative;width:100%;height:4px;
    border-radius:99px;background:rgba(0,0,0,.09);
    overflow:hidden;
    transition:height .12s ease;
  }
#music .vol-track:hover .vol-rail{height:6px;}
#music .vol-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--accent);border-radius:99px;}
#music .vol-knob{
    position:absolute;top:50%;left:100%;
    width:10px;height:10px;margin-left:-5px;
    border-radius:50%;background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.32);
    transform:translateY(-50%) scale(.7);
    opacity:0;pointer-events:none;
    transition:opacity .15s ease,transform .15s ease;
  }
#music .vol-track:hover .vol-knob,
#music .vol-track.dragging .vol-knob,
#music .vol-track:focus-visible .vol-knob{opacity:1;transform:translateY(-50%) scale(1);}
#music .vol-track:focus-visible .vol-rail{box-shadow:0 0 0 3px var(--accent-soft);}
#music .vol-num{
    font-size:11px;color:var(--text-2);
    font-variant-numeric:tabular-nums;
    min-width:22px;
  }
#music .theme-wrap{position:relative;flex:0 0 auto;}
#music .theme-btn{
    width:26px;height:26px;
    display:flex;align-items:center;justify-content:center;
    border:0;border-radius:8px;
    background:transparent;
    cursor:var(--cursor-pointer, pointer);
    transition:background .15s;
  }
#music .theme-btn:hover{background:rgba(0,0,0,.055);}
#music .theme-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
#music .theme-dot{
    width:15px;height:15px;border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft), inset 0 0 0 .5px rgba(0,0,0,.12);
  }
#music .theme-pop { position:absolute; bottom:calc(100% + 16px); right:0; z-index:40; width:216px; padding:12px; background:#fff; border-radius:12px; border:1px solid var(--line); box-shadow:0 16px 40px -10px #141a2c57; animation:popIn .16s ease; }
#music .theme-pop[hidden]{display:none;}
@keyframes popIn{
    from{opacity:0;transform:translateY(-6px) scale(.98);}
    to{opacity:1;transform:none;}
  }
#music .tp-title{font-size:12px;font-weight:600;color:#3b4049;margin-bottom:9px;}
#music .tp-swatches{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;
    margin-bottom:11px;
  }
#music .tp-sw{
    width:24px;height:24px;
    padding:0;
    border:0;
    border-radius:50%;
    cursor:var(--cursor-pointer, pointer);
    box-shadow:inset 0 0 0 .5px rgba(0,0,0,.14);
    transition:transform .14s ease,box-shadow .14s ease;
  }
#music .tp-sw:hover{transform:scale(1.12);}
#music .tp-sw.on{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--sw);}
#music .tp-sw:focus-visible{outline:2px solid #4a5058;outline-offset:2px;}
#music .tp-row{
    display:flex;align-items:center;gap:8px;
    padding-top:10px;
    border-top:.5px solid var(--line);
  }
#music .tp-label{font-size:12px;color:var(--text-2);}
#music .tp-color{
    width:30px;height:24px;padding:0;
    border:.5px solid var(--line);
    border-radius:6px;
    background:none;
    cursor:var(--cursor-pointer, pointer);
  }
#music .tp-color::-webkit-color-swatch-wrapper{padding:2px;}
#music .tp-color::-webkit-color-swatch{border:0;border-radius:4px;}
#music .tp-hex{
    font-size:11px;color:var(--text-2);
    font-variant-numeric:tabular-nums;
    letter-spacing:.3px;
  }
#music .tp-reset{
    margin-top:10px;width:100%;
    padding:6px 0;
    font-size:12px;
    border:.5px solid var(--line);
    border-radius:7px;
    background:#fbfbfc;color:#4a5058;
    cursor:var(--cursor-pointer, pointer);
    transition:background .15s;
  }
#music .tp-reset:hover{background:#f2f3f5;}
#music .list-wrap { position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
#music .playlist { flex:1 1 auto; min-height:0; margin:0; padding:6px 0 12px; list-style:none; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
#music .playlist::-webkit-scrollbar{width:9px;}
#music .playlist::-webkit-scrollbar-track{background:transparent;}
#music .playlist::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.16);
    border:2.5px solid transparent;
    background-clip:content-box;
    border-radius:99px;
  }
#music .playlist::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.28);background-clip:content-box;}
#music .row { position:relative; display:grid; grid-template-columns:24px 40px minmax(0,1fr); align-items:center; gap:14px; min-height:62px; padding:9px 16px; border-radius:9px; cursor:var(--cursor-pointer,pointer); transition:background .14s ease; outline:none; }
#music .row:hover{background:rgba(0,0,0,.035);}
#music .row:focus-visible{box-shadow:inset 0 0 0 2px var(--accent);}
#music .row::before{
    content:"";
    position:absolute;left:2px;top:50%;
    width:2px;height:0;
    border-radius:2px;
    background:var(--accent);
    transform:translateY(-50%);
    transition:height .18s ease;
  }
#music .row.active{background:var(--accent-soft);}
#music .row.active::before{height:16px;}
#music .row-idx { font-size:11px; color:var(--text-2); font-variant-numeric:tabular-nums; text-align:center; }
#music .row-name { display:block; font-size:13px; line-height:1.5; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#music .row-artist { display:block; margin-top:3px; font-size:11px; color:var(--text-2); text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#music .row.active .row-name{color:var(--accent);font-weight:600;}
#music .row.active .row-idx{color:var(--accent);}
#music .row.bad .row-name{color:#b04a4a;}
#music .row.bad .row-idx{color:#e5484d;}
#music .row.bad::after{
    content:"";
    position:absolute;left:37px;top:50%;
    width:5px;height:5px;margin-top:-2.5px;
    border-radius:50%;
    background:#e5484d;
  }
#music .list-state{
    position:absolute;inset:0;
    display:none;
    flex-direction:column;align-items:center;justify-content:center;
    gap:8px;
    padding:18px;
    text-align:center;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(2px);
  }
#music .list-state.show{display:flex;}
#music .list-state .ls-title{font-size:13px;font-weight:600;color:#3b4049;}
#music .list-state .ls-desc{
    font-size:11px;color:var(--text-2);line-height:1.6;
    max-height:104px;overflow:auto;
    white-space:pre-line;
    word-break:break-all;
  }
#music .list-state .ls-actions{display:flex;gap:8px;margin-top:2px;}
#music .mini-btn{
    padding:5px 12px;
    font-size:12px;
    border:.5px solid var(--line);
    border-radius:7px;
    background:#fff;color:#3b4049;
    cursor:var(--cursor-pointer, pointer);
    transition:background .15s,border-color .15s,color .15s;
  }
#music .mini-btn:hover{background:#f5f6f8;}
#music .mini-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
#music .mini-btn.primary:hover{background:var(--accent-dark);}
#music .spinner{
    width:18px;height:18px;border-radius:50%;
    border:2px solid rgba(0,0,0,.12);
    border-top-color:var(--accent);
    animation:spin .8s linear infinite;
  }
@keyframes spin{to{transform:rotate(360deg);}}
#music .lyrics{
    position:relative;
    min-width:0;
    border-left:.5px solid var(--line);
    background:linear-gradient(180deg,#fcfcfe,#f7f8fb);
    overflow:hidden;
  }
#music .lyrics-scroll{
    position:absolute;
    inset:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
  }
#music .lyrics-scroll::-webkit-scrollbar{width:0;height:0;}
#music .lyrics-inner{
    padding:0 20px;              
    text-align:center;
  }
#music .lyric-line{
    padding:6px 0;
    font-size:13px;
    line-height:1.6;
    color:var(--text-2);
    opacity:.30;
    word-break:break-word;
    cursor:var(--cursor-pointer, pointer);
    border-radius:6px;
    transition:opacity .3s ease,color .3s ease,font-size .3s ease,transform .3s ease;
  }
#music .lyric-line[data-dist="1"]{opacity:.62;font-size:13.5px;}
#music .lyric-line[data-dist="2"]{opacity:.44;}
#music .lyric-line[data-dist="3"]{opacity:.30;}
#music .lyric-line:hover{opacity:.85;}
#music .lyric-line.active{
    font-size:15px;              
    font-weight:700;
    color:var(--accent);
    opacity:1;
    transform:scale(1.02);
  }
#music .lyric-line.active:hover{opacity:1;}
#music .lyrics-empty{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    text-align:center;
    font-size:13px;
    color:var(--text-2);
    opacity:.7;
    pointer-events:none;
  }
#music .lyrics-empty[hidden]{display:none;}

.music-window {width:min(1150px,calc(100vw - 112px));height:min(875px,calc(100dvh - 64px));left:max(85px,calc(50vw - 535px));top:max(32px,calc(50dvh - 437.5px));min-width:380px;min-height:380px;background:#fff;}
#music .titlebar {background:linear-gradient(#fcfcfd,#f6f7f9);border-bottom:1px solid var(--line);}
#music .window-caption > svg {color:var(--accent);}
#music .body {overflow:hidden;}
#music .playlist {max-height:none;}
#music .player {overflow:visible;}
#music .controls svg,#music .volume svg {width:18px;height:18px;}
#music .cover img {position:relative;z-index:1;}
#music .row {width:100%;text-align:left;}
#music .lyrics-inner {position:relative;}
#music .lyric-line {display:block;width:100%;font-family:inherit;}
#music .window-status {flex-shrink:0;min-height:30px;height:auto;gap:10px;padding:7px 14px;background:var(--panel-bg);border-top:1px solid var(--line);color:var(--text-2);}
#music-status {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#music .window-status > :last-child {flex-shrink:0;}
.dock-button[data-open="music"].is-playing {color:#ffe4a7;}
@media(max-width:760px) {
 .music-window,.music-window.is-maximized {left:58px!important;top:8px!important;width:calc(100vw - 66px)!important;height:calc(100dvh - 16px)!important;min-width:0;min-height:0;}
 #music .window-status > :last-child {display:none;}
}
@media(prefers-reduced-motion:reduce) {#music * {animation:none!important;transition:none!important;}}

#music .utility-actions { display:flex; align-items:center; gap:10px; }
#music .lyrics-toggle { width:28px; height:28px; border:1px solid var(--line); border-radius:7px; color:var(--text-2); font-size:14px; font-weight:600; }
#music .lyrics-toggle:hover { color:var(--accent); background:var(--accent-soft); }
#music .lyrics-toggle[aria-expanded="true"] { color:var(--accent); background:var(--accent-soft); border-color:var(--accent); }
#music.lyrics-hidden .body { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
#music .row-idx { position:relative; }
#music .rhythm-bars { display:none; height:16px; align-items:flex-end; justify-content:flex-end; gap:2px; color:var(--accent); }
#music .row.active .row-number { visibility:hidden; }
#music .row.active .rhythm-bars { display:flex; position:absolute; inset:0; margin:auto 0; }
#music .rhythm-bars i { display:block; width:3px; height:100%; border-radius:2px; background:currentColor; transform-origin:bottom; transform:scaleY(.25); animation:music-rhythm .85s ease-in-out infinite alternate; animation-play-state:paused; }
#music .rhythm-bars i:nth-child(2) { animation-delay:-.35s; transform:scaleY(.6); }
#music .rhythm-bars i:nth-child(3) { animation-delay:-.6s; transform:scaleY(.85); }
#music .rhythm-bars i:nth-child(4) { animation-delay:-.15s; transform:scaleY(.4); }
#music .row.is-playing .rhythm-bars i { animation-play-state:running; }
@keyframes music-rhythm { 0% { transform:scaleY(.2); } 50% { transform:scaleY(.65); } 100% { transform:scaleY(1); } }

/* Library view and compact persistent playback bar. */
#music { container-type:inline-size; }
#music .library { min-width:0; min-height:0; display:flex; flex-direction:column; padding:24px 24px 0; color:var(--text); background:var(--window-bg); }
#music .library-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
#music .library-heading h2 { margin:0; font-size:23px; font-weight:700; letter-spacing:-.5px; }
#music .library-heading p { margin:5px 0 0; color:var(--text-2); font-size:11px; }
#music .library-heading b { font-weight:400; }
#music .library-actions { display:flex; align-items:center; gap:10px; min-width:0; }
#music .music-search { display:flex; align-items:center; gap:8px; width:220px; max-width:100%; padding:9px 12px; border-radius:20px; background:var(--panel-bg); border:1px solid var(--line); }
#music .music-search:focus-within { border-color:var(--accent); }
#music .music-search svg { width:15px; height:15px; flex-shrink:0; color:var(--text-2); }
#music .music-search input { width:100%; min-width:0; padding:0; background:transparent; border:0; outline:none; color:var(--text); font:inherit; font-size:12px; }
#music .music-search input::placeholder { color:var(--text-2); }
#music-reload { flex-shrink:0; width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--text-2); }
#music-reload svg { width:16px; height:16px; }
#music-reload:hover { color:var(--accent); background:var(--accent-soft); }
#music-reload:disabled { opacity:.45; cursor:wait; }
#music .list-columns { display:grid; grid-template-columns:24px 1fr; gap:14px; padding:0 16px 12px; border-bottom:1px solid var(--line); color:var(--text-2); font-size:11px; }
#music .list-columns > :first-child { text-align:center; }
#music .row-cover { display:grid; place-items:center; position:relative; width:40px; height:40px; border-radius:7px; overflow:hidden; background:var(--accent-soft); color:var(--accent); font-size:20px; }
#music .row-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#music .row-meta { min-width:0; }
#music .row.bad::after { left:8px; }
#music .search-empty { margin:auto; padding:32px 16px; text-align:center; color:var(--text-2); font-size:13px; }
#music .transport { display:flex; flex-direction:column; gap:8px; min-width:0; }
#music .time { font-size:10px; min-width:29px; }
#music .vol-num { display:none; }
#music .utility-actions { gap:8px; }
#music .window-status { min-height:24px; padding:4px 16px; font-size:10px; }
#music .lyrics { min-height:0; }
@container (max-width:760px) {
 #music .player { grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:12px 16px; }
 #music .now { grid-column:1; grid-row:1; }
 #music .utility { grid-column:2; grid-row:1; }
 #music .transport { grid-column:1 / -1; grid-row:2; }
 #music .controls { gap:18px; }
 #music .library { padding:18px 14px 0; }
 #music .library-heading { flex-wrap:wrap; gap:12px; margin-bottom:16px; }
 #music .library-actions { flex:1 1 200px; }
 #music .music-search { flex:1; width:auto; }
}
@container (max-width:520px) {
 #music .lyrics { border-left:0; border-top:1px solid var(--line); }
 #music .library-heading h2 { font-size:20px; }
 #music .row { gap:10px; padding:9px 8px; grid-template-columns:20px 36px minmax(0,1fr); }
 #music .row-cover { width:36px; height:36px; }
 #music .volume { gap:4px; }
 #music .vol-track { width:44px; }
 #music .cover { width:40px; height:40px; }
 #music .now { gap:8px; }
}

/* The listening screen shares the same controls with the library playback bar. */
#music .music-workspace { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; container-type:size; }
#music .cover { padding:0; border:0; }
#music .cover:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#music .listening-view { flex:1; min-height:0; display:flex; flex-direction:column; color:var(--text); background:radial-gradient(ellipse at 10% 10%,rgba(var(--accent-rgb),.19),transparent 65%),radial-gradient(ellipse at 95% 90%,#a499df26,transparent 65%),var(--window-bg); }
#music .listening-heading { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:16px 22px; color:var(--text-2); font-size:11px; }
#music-backToList { display:flex; align-items:center; gap:8px; padding:8px 12px 8px 8px; border-radius:20px; font-size:12px; color:var(--text); background:var(--accent-soft); }
#music-backToList svg { width:18px; height:18px; }
#music-backToList:hover { background:var(--accent-soft); color:var(--accent); }
#music .listening-content { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,6cqw,72px); padding:12px clamp(28px,7cqw,90px) 32px; }
#music .listening-player { min-width:0; min-height:0; display:flex; align-items:center; justify-content:center; overflow:auto; scrollbar-width:thin; }
#music.is-lyrics-view .player { width:100%; max-width:min(320px,44cqh); display:flex; flex-direction:column; align-items:stretch; gap:20px; padding:0; border:0; background:transparent; }
#music.is-lyrics-view .now { display:flex; flex-direction:column; align-items:stretch; gap:20px; }
#music.is-lyrics-view .cover { align-self:center; width:min(100%,44cqh); height:auto; aspect-ratio:1; border-radius:16px; box-shadow:0 16px 44px #15172e26,inset 0 0 0 1px #ffffff30; cursor:default; }
#music.is-lyrics-view .cover img { position:absolute; inset:0; }
#music.is-lyrics-view .cover .ph { font-size:72px; }
#music.is-lyrics-view .song-name { font-size:21px; line-height:1.4; white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
#music.is-lyrics-view .song-artist { margin-top:6px; font-size:12px; }
#music.is-lyrics-view .transport { gap:15px; }
#music.is-lyrics-view .progress { order:-1; }
#music.is-lyrics-view .controls { grid-template-columns:34px minmax(0,1fr) 44px minmax(0,1fr) 34px; gap:10px; }
#music.is-lyrics-view .ctrl.play { width:44px; height:44px; }
#music.is-lyrics-view .utility { justify-content:space-between; }
#music.is-lyrics-view #music-btnLyrics { display:none; }
#music .listening-view .lyrics { min-height:0; border:0; background:transparent; }
#music .listening-view .lyrics-inner { padding-left:6px; padding-right:6px; text-align:left; }
#music .listening-view .lyric-line { text-align:left; padding:12px 0; font-size:17px; line-height:1.7; opacity:.34; transform:none; }
#music .listening-view .lyric-line[data-dist="1"] { opacity:.6; }
#music .listening-view .lyric-line.active { font-size:20px; font-weight:700; opacity:1; color:var(--accent); }
#music .listening-view .lyric-line:hover { opacity:1; }
html[data-system-theme="dark"] #music .listening-view { background:radial-gradient(ellipse at 5% 5%,rgba(var(--accent-rgb),.24),transparent 65%),radial-gradient(ellipse at 95% 95%,#6d5eae30,transparent 65%),#181b24; }
html[data-system-theme="dark"] #music .listening-view .lyrics { background:transparent; }
html[data-system-theme="dark"] #music .listening-view .lyric-line.active { color:#fff; }
@container (max-width:600px) {
 #music .listening-heading { padding:10px 14px; }
 #music .listening-content { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(140px,1fr); gap:12px; padding:8px 22px 18px; overflow:auto; }
 #music .listening-player { overflow:visible; }
 #music.is-lyrics-view .player { max-width:none; gap:12px; }
 #music.is-lyrics-view .now { flex-direction:row; align-items:center; gap:16px; }
 #music.is-lyrics-view .cover { width:100px; height:100px; border-radius:12px; }
 #music.is-lyrics-view .song-name { font-size:18px; }
 #music.is-lyrics-view .transport { gap:8px; }
 #music.is-lyrics-view .utility { justify-content:flex-end; }
 #music .listening-view .lyric-line { text-align:center; font-size:15px; padding:8px 0; }
 #music .listening-view .lyric-line.active { font-size:17px; }
}
@container (max-height:450px) and (min-width:601px) {
 #music .listening-heading { padding:8px 16px; }
 #music .listening-content { padding-top:0; padding-bottom:16px; }
 #music.is-lyrics-view .player { gap:10px; }
 #music.is-lyrics-view .now { gap:10px; }
 #music.is-lyrics-view .cover { width:min(100%,32cqh); }
 #music.is-lyrics-view .song-name { font-size:16px; }
 #music.is-lyrics-view .transport { gap:6px; }
}

/* Let the shared cover travel between the playback bar and listening view. */
#music.music-view-transition .music-workspace {overflow:hidden;}
#music.music-view-transition .listening-content,
#music.music-view-transition .listening-player {overflow:visible;}
#music.music-view-transition .cover {z-index:3;will-change:transform;}
#music.music-view-transition .now-meta,
#music.music-view-transition .transport,
#music.music-view-transition .utility {will-change:transform,opacity;}

/* A short vinyl overture, separate from the dock minimize/restore journey. */
.music-launch {position:fixed;pointer-events:none;isolation:isolate;}
.music-launch-record {position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:repeating-radial-gradient(circle at center,#16171c 0 2px,#2a2b32 3px,#17181d 4px 6px);box-shadow:0 18px 45px #0006,inset 0 0 0 1px #ffffff35;animation:music-record-arrive var(--music-launch-duration) both;}
.music-launch-record::before {content:"";position:absolute;inset:0;border-radius:inherit;background:conic-gradient(from 25deg,transparent 0deg,#ffffff30 45deg,transparent 85deg,transparent 180deg,#ffffff24 225deg,transparent 265deg);}
.music-launch-label {position:relative;width:46%;height:46%;border-radius:50%;overflow:hidden;background:rgb(var(--launch-accent));box-shadow:0 0 0 5px #111318,0 0 0 6px #ffffff17;}
.music-launch-label img {display:block;width:100%;height:100%;object-fit:cover;}
.music-launch-label::after {content:"";position:absolute;left:calc(50% - 4px);top:calc(50% - 4px);width:8px;height:8px;background:#14151b;border-radius:50%;box-shadow:0 0 0 2px #ffffff55;}
.music-launch-wave {position:absolute;inset:-8px;border:1px solid rgba(var(--launch-accent),.65);border-radius:50%;box-shadow:0 0 18px rgba(var(--launch-accent),.14);animation:music-record-wave var(--music-launch-duration) both;}
.music-launch-wave-outer {inset:-24px;animation-name:music-record-wave-outer;}
#music.music-is-starting .music-workspace {animation:music-launch-content var(--music-launch-duration) both;}
#music.music-is-starting .player {animation:music-launch-controls var(--music-launch-duration) both;}
@keyframes music-record-arrive {
  0% {opacity:0;transform:translateY(12px) scale(.7) rotate(-24deg);}
  20% {opacity:1;transform:translateY(0) scale(1) rotate(-10deg);}
  52% {opacity:1;transform:scale(1) rotate(4deg);}
  82%,100% {opacity:0;transform:scale(1.12) rotate(12deg);}
}
@keyframes music-record-wave {
  0%,12% {opacity:0;transform:scale(.8);}
  28% {opacity:.7;}
  85%,100% {opacity:0;transform:scale(1.85);}
}
@keyframes music-record-wave-outer {
  0%,24% {opacity:0;transform:scale(.85);}
  40% {opacity:.35;}
  100% {opacity:0;transform:scale(1.9);}
}
@keyframes music-launch-content {
  0%,45% {opacity:0;transform:translateY(10px);}
  100% {opacity:1;transform:translateY(0);}
}
@keyframes music-launch-controls {
  0%,58% {opacity:0;transform:translateY(6px);}
  100% {opacity:1;transform:translateY(0);}
}
@media(prefers-reduced-motion:reduce) {.music-launch {display:none;}}

/* Closing uses reversible Web Animations on the same vinyl artwork. */
.music-launch.music-close .music-launch-record,
.music-launch.music-close .music-launch-wave {animation:none;}
.music-launch.music-close .music-launch-wave-outer {display:none;}

/* Light appearance from the standalone preview; the listening controls stay transparent. */
html:not([data-system-theme="dark"]) #music {
  --text:#1b1f27; --text-2:#5b6475; --line:#dce0e9;
  --window-bg:#f1f3f8; --panel-bg:#e8ebf2; --hover:rgba(255,255,255,.75);
  background:var(--window-bg); border-color:rgba(27,31,39,.10);
  box-shadow:0 22px 60px -12px rgba(27,38,60,.28),0 2px 8px rgba(27,38,60,.08);
}
html:not([data-system-theme="dark"]) #music .titlebar {background:var(--panel-bg);border-bottom:1px solid var(--line);}
html:not([data-system-theme="dark"]) #music .window-controls button:not([data-action="close"]):hover {background:rgba(27,31,39,.07);}
html:not([data-system-theme="dark"]) #music .music-search {background:#fff;border-color:var(--line);transition:background .15s,box-shadow .15s,border-color .15s;}
html:not([data-system-theme="dark"]) #music .music-search:hover {border-color:#c9cfdb;}
html:not([data-system-theme="dark"]) #music .music-search:focus-within {background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
html:not([data-system-theme="dark"]) #music .row:hover {background:var(--hover);}
html:not([data-system-theme="dark"]) #music .row.active {background:rgba(var(--accent-rgb),.11);}
html:not([data-system-theme="dark"]) #music .row.active:not(.bad) :is(.row-name,.row-idx) {color:var(--accent-dark);color:color-mix(in srgb,var(--accent) 68%,#000);}
html:not([data-system-theme="dark"]) #music .row-cover {background:rgba(var(--accent-rgb),.12);}
html:not([data-system-theme="dark"]) #music .list-state {background:rgba(241,243,248,.94);}
html:not([data-system-theme="dark"]) #music:not(.is-lyrics-view) .player {background:var(--panel-bg);box-shadow:0 -10px 24px -18px rgba(27,38,60,.25);}
html:not([data-system-theme="dark"]) #music :is(.rail,.vol-rail) {background:rgba(27,31,39,.17);}
html:not([data-system-theme="dark"]) #music .buffer {background:rgba(27,31,39,.10);}
html:not([data-system-theme="dark"]) #music .playlist::-webkit-scrollbar-thumb {background:rgba(27,31,39,.20);background-clip:content-box;}
html:not([data-system-theme="dark"]) #music .playlist::-webkit-scrollbar-thumb:hover {background:rgba(27,31,39,.34);background-clip:content-box;}
/* Match the visual weight of Chinese and Latin song titles. */
#music :is(.row,.row.active) .row-name,#music .song-name {font-weight:700;}