:root{
  font-family:Inter,"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Noto Sans TC",sans-serif;
  color-scheme:dark;
  --bg:#141617;--bar:#181a1c;--panel:#17191b;--line:#2b3034;--line-soft:#25292c;
  --text:#e4e6e8;--text-strong:#e9ebec;--muted:#858b91;--faint:#62686e;
  --active:#30353a;--hover:#202326;--playing:#292e32;--input-bg:#101213;
  --range-fill:#bfc3c6;--range-track:#34393d;--range-thumb:#e6e8e9;
  --button-fg:#a4aaaf;--button-bg:#d8dbdd;--button-text:#17191b;
  --cover-bg1:#292d30;--cover-bg2:#191c1e;--cover-border:#353a3e;
}
.light{
  color-scheme:light;
  --bg:#e8e9ea;--bar:#eef0f1;--panel:#f4f5f5;--line:#cfd2d5;--line-soft:#d9dcde;
  --text:#232629;--text-strong:#171a1c;--muted:#656b70;--faint:#80868b;
  --active:#d5d9dc;--hover:#e2e5e7;--playing:#d3d7da;--input-bg:#f8f9f9;
  --range-fill:#5f666c;--range-track:#c5c9cc;--range-thumb:#444a4f;
  --button-fg:#4f565b;--button-bg:#2f3438;--button-text:#f4f5f6;
  --cover-bg1:#dfe2e4;--cover-bg2:#cfd3d5;--cover-border:#c2c7ca;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text)}
body{overflow:hidden}
.app{height:100%;display:grid;grid-template-rows:50px 1fr 78px;min-height:0}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 15px;background:var(--bar);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px}.brand-mark{width:25px;height:25px;border:1px solid var(--cover-border);border-radius:4px;display:grid;place-items:center;color:var(--text-strong);font-size:14px;background:var(--hover)}
.brand-copy{display:flex;flex-direction:column;line-height:1.05}.brand-copy b{font-size:13px;font-weight:650;color:var(--text-strong)}.brand-copy span{font-size:8px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-top:4px}
.top-actions{display:flex;gap:3px}.icon-btn{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--button-fg);cursor:pointer;font-size:16px;padding:6px;border-radius:4px}.icon-btn:hover{background:var(--hover);color:var(--text-strong)}
.workspace{min-height:0;display:grid;grid-template-columns:195px minmax(0,1fr)}
.sidebar{min-height:0;display:flex;flex-direction:column;background:var(--bar);border-right:1px solid var(--line);padding:15px 9px}.section-label{font-size:9px;letter-spacing:.16em;color:var(--muted);font-weight:700}
.nav-item{width:100%;height:33px;display:grid;grid-template-columns:21px 1fr auto;align-items:center;margin-top:4px;padding:0 9px;border:0;border-radius:4px;background:transparent;color:var(--muted);text-align:left;cursor:pointer;font-size:12px}.nav-item:hover{background:var(--hover);color:var(--text)}.nav-item.active{background:var(--active);color:var(--text-strong);box-shadow:inset 2px 0 var(--button-bg)}.nav-icon{color:var(--muted);font-size:13px}.nav-count,.pl-count{font-size:10px;color:var(--faint)}
.sidebar-head{margin:20px 7px 6px}.playlist-list{min-height:0;overflow:auto}.playlist-item{width:100%;display:grid;grid-template-columns:1fr auto;gap:7px;border:0;background:transparent;color:var(--muted);text-align:left;padding:7px 9px;border-radius:4px;cursor:pointer;font-size:11px}.playlist-item:hover{background:var(--hover);color:var(--text)}.playlist-item.active{background:var(--active);color:var(--text-strong)}
.main{min-width:0;min-height:0;background:var(--bg)}.toolbar{height:70px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 17px;background:var(--bar);border-bottom:1px solid var(--line)}
.title-block{min-width:0}.title-block h1{font-size:16px;line-height:1.1;color:var(--text-strong);margin:0;font-weight:650}.title-block span{display:block;font-size:10px;color:var(--muted);margin-top:6px}
.search{height:30px;width:290px;max-width:34%;display:flex;align-items:center;gap:7px;padding:0 8px;background:var(--input-bg);border:1px solid var(--line);border-radius:4px;color:var(--muted)}.search:focus-within{border-color:var(--muted)}.search input{min-width:0;flex:1;border:0;outline:none;background:transparent;color:var(--text);font-size:11px}.search input::placeholder{color:var(--muted)}.search kbd{font:9px/1 "SFMono-Regular",Consolas,monospace;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:3px 5px}
.mobile-playlist-btn{display:none}.content-grid{height:calc(100% - 70px);min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px}.track-panel{min-width:0;min-height:0;overflow:hidden;border-right:1px solid var(--line)}.library-wrap{width:100%;height:100%;min-width:0;min-height:0;overflow:auto;position:relative}
.tracks{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:11px}.tracks col.col-num{width:46px}.tracks col.col-title{width:auto}.tracks col.col-type{width:64px}.tracks col.col-size{width:84px}.tracks col.col-share{width:58px}.tracks thead{background:var(--hover)}.tracks thead th{height:31px;padding:0 10px;color:var(--muted);border-bottom:1px solid var(--line);font-size:9px;font-weight:500;text-align:left;white-space:nowrap;vertical-align:middle}.tracks thead th.num{text-align:center;padding:0}.tracks thead th.sizecol{text-align:right}.tracks thead th.sharecol{text-align:center}
.tracks tbody tr{height:42px;cursor:pointer}.tracks tbody td{height:42px;padding:0 10px;border-bottom:1px solid var(--line-soft);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.tracks tbody td.num{text-align:center;color:var(--faint);font-variant-numeric:tabular-nums;padding:0 4px}.tracks tbody td.typecol{color:var(--muted);text-transform:uppercase;font-size:9px}.tracks tbody td.sizecol{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}.tracks tbody td.sharecol{text-align:center;padding:0 5px}.share-btn{width:26px;height:26px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--muted);font-size:14px;line-height:1;cursor:pointer;opacity:.72;transition:background .12s,color .12s,opacity .12s,border-color .12s}.share-btn:hover{background:var(--hover);color:var(--text-strong);border-color:var(--line);opacity:1}.share-btn.copied{color:var(--text-strong);opacity:1}.songcell{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;height:41px;overflow:hidden}.song-name{overflow:hidden;text-overflow:ellipsis;color:inherit}.songcell small{display:block;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:9px;line-height:1.1}.tracks tbody tr:hover td{background:var(--hover)}.tracks tbody tr.playing td{background:var(--playing);color:var(--text-strong)}.tracks tbody tr.playing td.num{color:var(--button-fg)}.tracks tbody tr.playing td.num:before{content:'▶';font-size:7px;margin-right:5px;color:var(--button-fg)}
.empty[hidden]{display:none!important}.empty{position:absolute;inset:31px 0 0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--muted);gap:5px}.empty-icon{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:4px;background:var(--hover);color:var(--muted);font-size:18px;margin-bottom:6px}.empty b{font-size:12px;color:var(--muted)}.empty span{font-size:10px}
.lyrics-panel{min-height:0;display:flex;flex-direction:column;background:var(--panel)}.lyrics-head{height:37px;flex:0 0 37px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--line)}.lyrics-head>span:last-child{font-size:8px;letter-spacing:.12em;color:var(--muted)}.lyrics-title{padding:15px 14px 8px;font-size:12px;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lyrics{min-height:0;overflow:auto;padding:8px 13px 25px}.lyrics-empty,.lyrics-loading{padding:35px 10px;text-align:center;color:var(--muted);font-size:10px}.lyric-line{padding:6px 7px;color:var(--muted);font-size:11px;line-height:1.55;border-radius:3px;cursor:pointer;transition:background .15s,color .15s,transform .15s}.lyric-line:hover{background:var(--hover);color:var(--text)}.lyric-line.active{background:var(--playing);color:var(--text-strong);transform:translateX(2px)}
.player{display:grid;grid-template-columns:minmax(190px,1fr) minmax(320px,1.25fr) minmax(130px,.55fr);gap:12px;align-items:center;padding:7px 12px;background:var(--bar);border-top:1px solid var(--line);box-shadow:0 -6px 18px #0002;z-index:3}.now-playing{min-width:0;display:flex;align-items:center;gap:9px}.cover{width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center;background:linear-gradient(135deg,var(--cover-bg1),var(--cover-bg2));background-size:cover;background-position:center;border:1px solid var(--cover-border);border-radius:3px;color:var(--muted);font-size:19px;overflow:hidden}.cover.has-image span{display:none}.nowtext{min-width:0;display:flex;flex-direction:column;gap:5px}.nowtext strong{font-size:11px;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nowtext span{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.like-btn{border:0;background:transparent;color:var(--muted);font-size:19px;cursor:pointer;padding:4px}.like-btn:hover,.like-btn.liked{color:var(--text-strong)}
.play-center{min-width:0}.controls{display:flex;justify-content:center;align-items:center;gap:7px;margin-bottom:5px}.transport,.play-btn{border:0;background:transparent;color:var(--button-fg);cursor:pointer}.transport{font-size:16px;padding:3px 7px}.play-btn{width:31px;height:31px;border-radius:50%;background:var(--button-bg);color:var(--button-text);font-size:0;padding:0;display:grid;place-items:center}.play-btn::before{content:'';display:block}.play-btn:not(.is-playing)::before{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid currentColor;margin-left:2px}.play-btn.is-playing::before{width:3px;height:11px;background:currentColor;box-shadow:6px 0 currentColor}
.progress{display:grid;grid-template-columns:35px 1fr 35px;align-items:center;gap:7px;color:var(--muted);font:9px/1 monospace}.progress input,.volume input{width:100%;margin:0;accent-color:var(--range-fill)}
input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,var(--range-fill) 0%,var(--range-fill) var(--range-progress,0%),var(--range-track) var(--range-progress,0%),var(--range-track) 100%)}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:9px;height:9px;margin-top:-3px;border-radius:50%;border:0;background:var(--range-thumb)}input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:var(--range-track)}input[type=range]::-moz-range-progress{height:3px;border-radius:3px;background:var(--range-fill)}input[type=range]::-moz-range-thumb{width:9px;height:9px;border:0;border-radius:50%;background:var(--range-thumb)}
.player-right{display:flex;justify-content:flex-end}.volume{display:flex;align-items:center;gap:5px;width:125px}
@media(max-width:900px){
  html,body{height:100%;width:100%;overflow:hidden}
  .app{height:100dvh;min-height:0;width:100%;display:flex;flex-direction:column;overflow:hidden}
  .topbar{flex:0 0 50px;height:50px;min-height:50px}
  .workspace{grid-template-columns:1fr;min-height:0;min-width:0;flex:1 1 auto;overflow:hidden;display:flex}
  .sidebar{display:none}
  .main{min-height:0;min-width:0;flex:1 1 auto;display:flex;flex-direction:column;overflow:hidden}
  .toolbar{flex:0 0 64px;height:64px;min-height:64px;padding:11px 12px}
  .search{width:240px;max-width:46%;min-width:150px}
  .mobile-playlist-btn{display:grid;flex:0 0 38px;grid-template-columns:22px 1fr 20px;align-items:center;width:calc(100% - 20px);height:38px;min-height:38px;margin:4px 10px 4px;padding:0 11px;border:1px solid var(--line);border-radius:5px;background:var(--bar);color:var(--text-strong);text-align:left;font:600 11px/1 system-ui,sans-serif;cursor:pointer}
  .mobile-playlist-icon{color:var(--muted)}
  .mobile-playlist-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-playlist-chevron{justify-self:end;color:var(--muted);font-size:14px;line-height:1}
  .content-grid{grid-template-columns:1fr;flex:1 1 auto;height:auto;min-height:0;min-width:0;overflow:hidden}
  .track-panel{min-width:0;min-height:0;height:auto;flex:1 1 auto;border-right:0;overflow:hidden}
  .library-wrap{width:100%;height:100%;min-width:0;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
  .lyrics-panel{display:none}
  .tracks col.col-num{width:38px}.tracks col.col-type{width:54px}.tracks col.col-size{width:74px}.tracks col.col-share{width:52px}
  .playlist-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;background:rgba(0,0,0,.5)}
  .playlist-overlay[hidden]{display:none}
  .playlist-sheet{width:100%;max-height:min(72dvh,560px);display:flex;flex-direction:column;background:var(--bar);border-top:1px solid var(--line);border-radius:12px 12px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.35);padding-bottom:env(safe-area-inset-bottom)}
  .playlist-sheet-head{height:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--line)}
  .playlist-sheet-head strong{font-size:13px;font-weight:650;color:var(--text-strong)}
  .mobile-playlist-list{overflow:auto;padding:8px 8px 12px}
  .mobile-playlist-list .playlist-item{height:43px;font-size:12px;padding:0 11px;margin:2px 0;grid-template-columns:1fr auto}
  .mobile-playlist-list .playlist-item.active{box-shadow:inset 2px 0 var(--button-bg)}

  /* Mobile player: fixed-height area; controls -> progress -> song info. */
  .player{position:relative;display:grid;flex:0 0 98px;grid-template-columns:1fr;grid-template-rows:30px 22px 42px;width:100%;height:98px;min-height:98px;max-height:98px;gap:0;padding:4px 9px 6px;border-top:1px solid var(--line);box-shadow:0 -6px 18px #0002;overflow:hidden}
  .play-center{display:contents}
  .controls{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:center;margin:0;gap:8px;height:30px}
  .transport{font-size:15px;padding:2px 8px;line-height:1}
  .play-btn{width:30px;height:30px}
  .player .progress{grid-column:1;grid-row:2;height:22px;display:grid;grid-template-columns:34px 1fr 34px;gap:5px;margin:0;z-index:auto;align-items:center}
  .player .progress span{display:block;font-size:8px;color:var(--muted);text-align:center}
  .player .progress input{height:12px;width:100%}
  .now-playing{grid-column:1;grid-row:3;min-width:0;height:42px;align-self:center;margin:0;display:flex;align-items:center;gap:8px;overflow:hidden}
  .now-playing .cover{width:40px;height:40px}
  .nowtext{min-width:0;flex:1;padding-right:2px;overflow:hidden}
  .nowtext strong,.nowtext span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .like-btn{padding:2px 3px}
  .player-right{display:none}
}
@media(max-width:560px){
  .app{height:100dvh;min-height:0}
  .main{min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .toolbar{flex:0 0 60px;height:60px;min-height:60px;padding:9px 10px}
  .title-block h1{font-size:15px}
  .search{min-width:120px;height:28px}
  .content-grid{flex:1 1 auto;min-height:0;height:auto}
  .tracks col.col-num{width:36px}.tracks col.col-type{width:50px}.tracks col.col-size{display:none}.tracks col.col-share{width:48px}
  .tracks thead tr{height:28px}.tracks thead th{height:28px}
  .tracks tbody tr,.tracks tbody td{height:44px}
  .tracks th.sizecol,.tracks td.sizecol{display:none}
  .tracks col.col-title{width:auto}
  .songcell{height:43px}.songcell small{font-size:8px}
  .transport{font-size:14px;padding:3px}
  .play-btn{width:29px;height:29px}
  .playlist-sheet{max-height:78dvh}
}

/* Sidebar: all songs, divider, then folder playlists */
.sidebar-divider{height:1px;background:var(--line);margin:10px 7px 8px}