/*
 * 网页播放器 0.4：外壳和各页面的排版。组件本身在 components.css，数值只引用 tokens.css。
 *
 * 窄屏（<840）：内容 + 底部导航（56 + 安全区）+ 悬浮胶囊 mini player（导航上方 6）。
 * 宽屏（≥840）：左侧栏 + 顶部搜索条 + 内容 + 底部常驻播放栏（80）。和 App 0.4.1 同一个样子。
 */

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font: var(--w-body) var(--t-body) / var(--lh-body) var(--font);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }

.center-screen { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--sp-20); background: var(--bg); }

/* ---------------- 登录 ---------------- */

.login-card { width: min(380px, 100%); display: grid; gap: var(--sp-12); text-align: center; }
.login-logo { justify-self: center; width: 72px; height: 72px; border-radius: 20px; background: var(--brand); box-shadow: var(--shadow-float); display: grid; place-items: center; color: var(--on-brand); }
.login-logo svg { width: 42px; height: 42px; }
.login-card h1 { margin: var(--sp-8) 0 0; font: var(--w-title1) var(--t-title1) / var(--lh-title1) var(--font); }
.login-hint { margin: 0; min-height: var(--lh-foot); color: var(--label-2); font: var(--w-foot) var(--t-foot) / var(--lh-foot) var(--font); }
.login-fields { text-align: left; }
.login-btn { width: 100%; }
.login-err { margin: 0; min-height: var(--lh-foot); color: var(--danger); font: var(--w-foot) var(--t-foot) / var(--lh-foot) var(--font); }

/* ---------------- 外壳（窄屏） ---------------- */

.shell { min-height: 100vh; }
.main { min-width: 0; }
.page {
  padding-bottom: calc(var(--tab-h) + var(--mini-h) + var(--mini-lift) * 2 + var(--sp-16) + env(safe-area-inset-bottom, 0px));
  max-width: var(--content-max);
  margin: 0 auto;
}
.sidebar, .top-search { display: none; }

/* 导航栏：返回 + 小标题 + 右侧操作。页面名滚走后出现小标题 */
.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-bar);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--nav-h);
  padding: env(safe-area-inset-top, 0px) var(--sp-8) 0 var(--sp-4);
  background: var(--bg);
  transition: box-shadow var(--d) var(--ease);
}
.navbar.compact { box-shadow: 0 1px 0 var(--separator); }
.nav-l { justify-self: start; display: flex; min-width: 0; }
.nav-r { justify-self: end; display: flex; align-items: center; gap: var(--sp-4); }
.nav-title { margin: 0; max-width: 50vw; font: var(--w-headline) var(--t-headline) / var(--lh-headline) var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity var(--d) var(--ease); }
.navbar.compact .nav-title { opacity: 1; }
.nav-back { color: var(--label); }
.nav-back svg { width: 22px; height: 22px; }
/* 首页（搜索条当头）、歌单 / 专辑（取色头）自己画头部，手机上不要导航栏 */
@media (max-width: 839px) { body.nav-off .navbar { display: none; } }

.large-title { margin: 0; padding: var(--sp-4) var(--margin) var(--sp-8); font: var(--w-large) var(--t-large) / var(--lh-large) var(--font); }
.page-sub { margin: 0 var(--margin) var(--sp-4); color: var(--label-2); font: var(--w-foot) var(--t-foot) / var(--lh-foot) var(--font); font-variant-numeric: tabular-nums; }

/* 离线：页面最上面一条细横幅，中性底 + 正文色（不弹窗、不挡操作） */
body.offline .main::before {
  content: "离线 · 显示的是上次的曲库";
  display: block;
  padding: calc(var(--sp-4) + env(safe-area-inset-top, 0px)) var(--margin) var(--sp-4);
  background: var(--surface-2);
  color: var(--label);
  font: var(--w-headline) var(--t-foot) / var(--lh-foot) var(--font);
  text-align: center;
}

/* 底部导航：白底（深色下深灰）+ 顶部细线；选中是能当文字用的绿 + 实心图标 */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bar);
  display: flex;
  height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
  background: var(--surface);
  box-shadow: 0 -1px 0 var(--separator);
}
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--touch); border: 0; background: transparent; color: var(--label-2); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--d-tab) var(--ease-out); }
.tabbar .ico svg { width: var(--tab-icon); height: var(--tab-icon); display: block; transition: transform var(--d-tab) var(--ease-out); }
.tabbar .lbl { font: var(--w-cap) var(--t-cap) / var(--lh-cap) var(--font); }
.tabbar button[aria-current="page"] { color: var(--tint); }
.tabbar button[aria-current="page"] .lbl { font-weight: 600; }
.tabbar button[aria-current="page"] .ico svg { transform: scale(1.1); }

.mini-wrap { position: fixed; z-index: var(--z-mini); left: var(--sp-8); right: var(--sp-8); bottom: calc(var(--tab-h) + var(--mini-lift) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 600px) { .mini-wrap { left: 50%; right: auto; width: 560px; transform: translateX(-50%); } }
.pbar { display: none; }

/* ---------------- 宽屏：侧栏 + 顶部搜索 + 底部播放栏 ---------------- */

@media (min-width: 840px) {
  .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .sidebar {
    position: sticky;
    top: 0;
    height: calc(100vh - var(--pbar-h));
    display: flex;
    flex-direction: column;
    padding: var(--sp-8) 10px var(--sp-16);
    box-sizing: border-box;
    overflow-y: auto;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--separator);
  }
  body:not(.has-track) .sidebar { height: 100vh; }
  .tabbar, .mini-wrap { display: none !important; }
  .page { padding-bottom: calc(var(--pbar-h) + var(--sp-24)); }
  body:not(.has-track) .page { padding-bottom: var(--sp-24); }
  /* 顶栏：返回、胶囊搜索框、右边操作；小标题不要（页内有大标题） */
  .navbar { grid-template-columns: auto minmax(0, 300px) 1fr auto; column-gap: var(--sp-8); min-height: 60px; padding: 0 var(--sp-16); box-shadow: none !important; }
  .nav-title { display: none; }
  .top-search { display: block; grid-column: 2; }
  .nav-r { grid-column: 4; }
  .nav-l { min-width: var(--touch); }
  .nav-back { color: var(--label-2); }
  .large-title { padding-top: var(--sp-8); }
  .pbar { display: flex; }
  body.offline .main::before { padding-top: var(--sp-4); }
}

.side-brand { display: flex; align-items: center; gap: 10px; padding: 14px 10px 6px; font: 800 19px / 1 var(--font); letter-spacing: 0.2px; }
.side-brand .logo { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); }
.side-brand .logo svg { width: 20px; height: 20px; }
.side-head { padding: var(--sp-20) 10px 6px; color: var(--label-2); font: var(--w-foot) var(--t-foot) / var(--lh-foot) var(--font); }
.side-nav, .side-pl { display: grid; gap: 2px; }
.side-item {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--sp-12);
  box-sizing: border-box;
  border: 0;
  border-radius: var(--r-art);
  background: transparent;
  color: var(--label);
  font: var(--w-sub) var(--t-sub) / 1 var(--font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.side-item .ico { display: grid; }
.side-item .ico svg { width: 20px; height: 20px; color: var(--label-2); }
.side-item:hover { background: var(--fill); }
/* 选中：品牌绿底 + 近黑字（白字在品牌绿上只有 2.6:1） */
.side-item[aria-current="page"] { background: var(--brand); color: var(--on-brand); font-weight: 600; }
.side-item[aria-current="page"] .ico svg { color: var(--on-brand); }
.side-pl .side-item span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- 分区标题、「播放全部」 ---------------- */

.sec-head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-24) var(--sp-4) var(--sp-8) var(--margin); }
.sec-head h2 { flex: 1; margin: 0; font: var(--w-title2) var(--t-title2) / var(--lh-title2) var(--font); }
.sec-head .more { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--sp-8); border: 0; background: transparent; color: var(--label-2); font: var(--w-sub) var(--t-sub) / 1 var(--font); cursor: pointer; }
.sec-head .more svg { width: 16px; height: 16px; }
.sec-head .play-round { color: var(--brand); }
.sec-head .play-round svg { width: 30px; height: 30px; }

/* ● 播放全部 N：品牌绿圆底 + 近黑三角 */
.play-all { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: var(--touch); padding: 0 var(--sp-4); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--label); font: 600 var(--t-body) / 1 var(--font); cursor: pointer; }
.play-all .dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); }
.play-all .dot svg { width: 16px; height: 16px; }
.play-all .n { color: var(--label-2); font: var(--w-foot) var(--t-foot) / 1 var(--font); font-variant-numeric: tabular-nums; }
.play-all[disabled] { cursor: default; }
.play-all[disabled] .dot { background: var(--fill); color: var(--label-3); }
.tools { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); min-height: var(--touch); padding: var(--sp-4) var(--sp-4) 0 var(--sp-12); }
.tools .sort { display: inline-flex; align-items: center; gap: 4px; color: var(--label-2); font-size: var(--t-sub); }
.tools .sort svg { width: 18px; height: 18px; }

/* ---------------- 首页 ---------------- */

.home-head { display: flex; align-items: center; gap: var(--sp-12); min-height: 60px; padding: env(safe-area-inset-top, 0px) var(--sp-8) 0 var(--margin); }
.home-head .logo { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); }
.home-head .logo svg { width: 19px; height: 19px; }
.pill-search { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; min-height: var(--touch); padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--surface); color: var(--label-2); font: var(--w-sub) var(--t-sub) / 1 var(--font); text-align: left; cursor: pointer; }
.pill-search svg { flex: none; width: 20px; height: 20px; color: var(--label-3); }
@media (min-width: 840px) { .home-head { display: none; } }

.quick-row { display: flex; max-width: 560px; padding: var(--sp-12) var(--sp-8) 0; }
@media (min-width: 840px) { .quick-row { max-width: none; } }
.quick { flex: 1; display: grid; justify-items: center; gap: 6px; padding: var(--sp-8) 0; border: 0; border-radius: var(--r-art-l); background: transparent; color: var(--label); font: var(--w-foot) var(--t-foot) / var(--lh-foot) var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.quick .qi { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-dim); color: var(--tint); }
.quick .qi svg { width: 24px; height: 24px; }
.quick:hover .qi { filter: brightness(0.97); }

/* 最近播放：手机上三首一页横着翻（露出下一页一点边）；宽屏两列 */
.pager { display: grid; grid-auto-flow: column; grid-auto-columns: 92%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pager::-webkit-scrollbar { display: none; }
.pager .pg { scroll-snap-align: start; min-width: 0; }
@media (min-width: 840px) {
  .pager { grid-auto-flow: row; grid-template-columns: 1fr 1fr; overflow: visible; }
  .pager .pg { display: contents; }
}

/* 横排卡片（我的歌单） */
.hrow { display: flex; gap: var(--sp-12); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--margin); padding: 0 var(--margin) var(--sp-4); scrollbar-width: none; overscroll-behavior-x: contain; }
.hrow::-webkit-scrollbar { display: none; }
.card { flex: none; width: var(--shelf-art); scroll-snap-align: start; padding: 0; border: 0; border-radius: var(--r-art-l); background: transparent; color: var(--label); text-align: left; cursor: pointer; }
.card .cover { width: var(--shelf-art); height: var(--shelf-art); border-radius: var(--r-art-l); overflow: hidden; background: var(--surface-2); display: grid; place-items: center; color: var(--label-3); }
.card .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .cover svg { width: 36px; height: 36px; }
.card.add .cover { background: var(--surface); color: var(--tint); }
.card .t1 { margin-top: var(--sp-8); font: var(--w-sub) var(--t-sub) / var(--lh-sub) var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .t2 { font: var(--w-foot) var(--t-foot) / var(--lh-foot) var(--font); color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.round .cover { border-radius: 50%; }
.card.round .t1, .card.round .t2 { text-align: center; }
@media (min-width: 840px) { .hrow { flex-wrap: wrap; overflow: visible; } }

/* ---------------- 音乐库 ---------------- */

.lib-tabs { position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); z-index: calc(var(--z-bar) - 1); padding: 0 var(--sp-8); background: var(--bg); }
.lib-tabs.stuck { box-shadow: 0 1px 0 var(--separator); }
@media (min-width: 840px) { .lib-tabs { top: 60px; } }
.note-line { display: flex; align-items: baseline; gap: 6px; margin: var(--sp-4) var(--margin) var(--sp-8); color: var(--label-2); font: var(--w-foot) var(--t-foot) / var(--lh-foot) var(--font); }
/* 警告橙当文字只有 2:1：字用次要灰，前面一个橙色小圆点 */
.note-line::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--warning); transform: translateY(-1px); }
.list-tools { display: flex; align-items: center; justify-content: space-between; min-height: var(--touch); padding: 0 var(--sp-4) 0 var(--margin); color: var(--label-2); font: var(--w-foot) var(--t-foot) / var(--lh-foot) var(--font); }

/* 专辑 / 歌手网格：每列最宽 180（歌手 130），间距 16 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-20) var(--sp-16); padding: var(--sp-8) var(--margin); }
@media (max-width: 480px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid .card { width: auto; }
.grid .card .cover { width: 100%; height: auto; aspect-ratio: 1; }
.grid.round-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
@media (max-width: 480px) { .grid.round-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------- 详情页：封面取色的渐变头 + 吸顶「播放全部」 ---------------- */

.coll-head {
  --pc: var(--player-fallback);
  position: relative;
  padding: env(safe-area-inset-top, 0px) var(--margin) var(--sp-20);
  background: linear-gradient(180deg, var(--pc), color-mix(in srgb, var(--pc) 65%, var(--mask-solid)));
  color: var(--on-player);
  transition: background-color 0.4s var(--ease);
}
.coll-head .ch-bar { display: grid; grid-template-columns: var(--touch) 1fr auto; align-items: center; min-height: var(--nav-h); margin: 0 calc(-1 * var(--sp-8)) var(--sp-8) calc(-1 * var(--sp-12)); }
.coll-head .ch-bar .ui-btn { color: var(--on-player); }
.coll-head .ch-bar .kind { text-align: center; font: var(--w-headline) var(--t-headline) / 1 var(--font); }
.coll-head .ch-bar .acts { display: flex; justify-content: flex-end; min-width: var(--touch); }
.coll-head .ch-main { display: flex; align-items: flex-end; gap: var(--sp-16); }
.coll-head .cover { flex: none; width: var(--playlist-art); height: var(--playlist-art); border-radius: var(--r-art-l); overflow: hidden; background: var(--player-fill); box-shadow: var(--shadow-art); display: grid; place-items: center; color: var(--lyric-rest); }
.coll-head .cover.round { border-radius: 50%; }
.coll-head .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coll-head .cover svg { width: 48px; height: 48px; }
.coll-head h1 { margin: 0; font: var(--w-title1) var(--t-title1) / 1.25 var(--font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.coll-head .meta { margin-top: var(--sp-8); color: var(--on-player-2); font: var(--w-sub) var(--t-sub) / var(--lh-sub) var(--font); font-variant-numeric: tabular-nums; }
@media (min-width: 840px) {
  .coll-head { padding: var(--sp-24) var(--sp-32); border-radius: 0; }
  .coll-head .ch-bar { display: none; }
  .coll-head .cover { width: 160px; height: 160px; }
  .coll-head h1 { font-size: var(--t-large); }
}
.pa-bar { position: sticky; top: 0; z-index: calc(var(--z-bar) - 1); display: flex; align-items: center; gap: var(--sp-4); min-height: 52px; padding: 0 var(--sp-4) 0 var(--sp-12); background: var(--bg); }
.pa-bar.stuck { box-shadow: 0 1px 0 var(--separator); }
.pa-bar .grow { flex: 1; }
@media (min-width: 840px) { .pa-bar { top: 60px; } }

/* ---------------- 搜索 ---------------- */

.search-head { position: sticky; top: 0; z-index: calc(var(--z-bar) - 1); display: flex; align-items: center; gap: var(--sp-4); min-height: 60px; padding: env(safe-area-inset-top, 0px) var(--margin) 0 var(--sp-4); background: var(--bg); }
.search-head .ui-btn.icon svg { width: 22px; height: 22px; }
@media (min-width: 840px) { .search-head { top: 60px; padding-left: var(--margin); } .search-head .back { display: none; } }
.recent { padding: var(--sp-8) var(--sp-4) 0 var(--margin); }
.recent-head { display: flex; align-items: center; justify-content: space-between; }
.recent-head h3 { margin: 0; font: var(--w-headline) var(--t-headline) / var(--lh-headline) var(--font); }
.chips { display: flex; flex-wrap: wrap; gap: 12px var(--sp-8); padding: 6px var(--sp-12) 0 0; }
.cta { display: grid; justify-items: center; padding: var(--sp-16) var(--margin); }

/* ---------------- 我的 ---------------- */

.profile { display: flex; align-items: center; gap: var(--sp-16); margin: var(--sp-8) var(--margin) 0; padding: var(--sp-16); border-radius: var(--r-card); background: var(--surface); }
.profile .avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-dim); color: var(--tint); }
.profile .avatar svg { width: 30px; height: 30px; }
.profile .name { margin: 0; font: var(--w-title2) var(--t-title2) / var(--lh-title2) var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile .sub { margin-top: 4px; color: var(--label-2); font: var(--w-foot) var(--t-foot) / var(--lh-foot) var(--font); }
.profile .txt { flex: 1; min-width: 0; }
.stats { display: flex; margin: var(--sp-12) var(--margin) 0; border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.stats button { flex: 1; display: grid; justify-items: center; gap: 2px; padding: var(--sp-12) 0; border: 0; background: transparent; color: var(--label); cursor: pointer; }
.stats button:hover { background: var(--fill); }
.stats b { font: var(--w-title2) var(--t-title2) / var(--lh-title2) var(--font); font-variant-numeric: tabular-nums; }
.stats span { color: var(--label-2); font: var(--w-foot) var(--t-foot) / var(--lh-foot) var(--font); }
.me-settings { padding-top: var(--sp-16); }

/* ---------------- 歌单编辑 ---------------- */

.list.editing .row { cursor: default; }
.row .del { flex: none; width: var(--touch); height: var(--touch); margin-left: calc(-1 * var(--sp-8)); border: 0; background: transparent; color: var(--error); display: grid; place-items: center; cursor: pointer; padding: 0; }
.row .del svg { width: 22px; height: 22px; }
.row .grip { flex: none; width: var(--touch); height: var(--touch); display: grid; place-items: center; color: var(--label-2); cursor: grab; touch-action: none; }
.row .grip svg { width: 20px; height: 20px; }
.row.lifted { z-index: 5; background: var(--surface); box-shadow: var(--shadow-float); cursor: grabbing; transition: none; }
.row.shifting { transition: transform var(--d) var(--ease); }
.list-more { height: 1px; }

/* ---------------- 全屏播放页 ---------------- */
/*
 * 背景：放大、模糊的封面，上面盖一层封面色压暗后的遮罩（--scrim-top → --scrim-bot，JS 按封面算），任何封面上白字都 ≥4.5:1。
 * 手机：「歌曲 / 歌词」左右滑切换，歌曲页在歌名下面显示当前这句歌词；宽屏：左封面右歌词。
 */

.player {
  position: fixed;
  inset: 0;
  z-index: var(--z-player);
  display: flex;
  flex-direction: column;
  background: var(--player-fallback);
  color: var(--on-player);
  transform: translateY(100%);
  transition: transform var(--d) var(--ease);
  overflow: hidden;
}
.player.open { transform: none; }
/* 封面、歌名行、进度条、按钮共用一个宽度，左右边对齐（0.5.9）。
   封面尽量大：宽度够就按高度算，除封面以外的部分（顶栏、歌名、进度、按钮）372px，再留 24px 空；有版本 chip 时再让出一行 */
.player { --np-vh: 100vh; --np-extra: 0px; --np-w: min(640px, calc(100vw - 56px), max(200px, calc(var(--np-vh) - 396px - var(--np-extra)))); }
@supports (height: 100dvh) { .player { --np-vh: 100dvh; } }
.player:has(.p-vers:not(:empty)) { --np-extra: 44px; }
.p-bg { position: absolute; inset: 0; overflow: hidden; }
/* 背景图是预先模糊好的 48 像素小图（UI.blurCover），这里只放大铺满，不再用 CSS 实时模糊 */
.p-bg img { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; }
.p-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--scrim-top, var(--player-fallback)), var(--scrim-bot, var(--mask-solid))); transition: background 0.6s var(--ease); }
.player-inner { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; padding: env(safe-area-inset-top, 0px) 0 calc(var(--sp-16) + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }

.p-top { display: grid; grid-template-columns: var(--touch) 1fr var(--touch); align-items: center; min-height: 52px; padding: 0 var(--sp-4); }
.p-top .ui-btn { color: var(--on-player); }
.p-top .ui-btn svg { width: 28px; height: 28px; }
.p-tabs { display: flex; align-items: center; justify-content: center; }
.p-tabs button { min-width: 56px; min-height: var(--touch); border: 0; background: transparent; color: var(--on-player-2); font: var(--w-sub) var(--t-sub) / 1 var(--font); cursor: pointer; }
.p-tabs button[aria-selected="true"] { color: var(--on-player); font: 700 var(--t-headline) / 1 var(--font); }
.p-tabs i { width: 1px; height: 12px; background: var(--lyric-rest); }

.p-pages { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.p-pages::-webkit-scrollbar { display: none; }
.p-song, .p-lyr { scroll-snap-align: start; min-height: 0; min-width: 0; }
.p-song { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--sp-28); }
.p-art { width: var(--np-w); max-width: 100%; aspect-ratio: 1; border-radius: var(--r-art-player); overflow: hidden; background: var(--player-fill); box-shadow: var(--shadow-art); display: grid; place-items: center; color: var(--lyric-rest); transform: scale(0.9); transition: transform 350ms var(--ease); cursor: pointer; border: 0; padding: 0; }
.player.playing .p-art { transform: scale(1); }
.p-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-art svg { width: 64px; height: 64px; }
@media (prefers-reduced-motion: reduce) { .p-art { transform: none !important; } }
.p-meta { display: flex; align-items: center; gap: var(--sp-12); width: var(--np-w); max-width: 100%; margin-top: var(--sp-24); }
.p-meta .txt { flex: 1; min-width: 0; }
.p-title { margin: 0; font: var(--w-title1) var(--t-title1) / var(--lh-title1) var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-sub { display: flex; align-items: center; gap: var(--sp-8); margin-top: 6px; color: var(--on-player-2); font: var(--w-sub) var(--t-sub) / var(--lh-sub) var(--font); min-width: 0; }
.p-sub .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-sub .tag { flex: none; padding: 0 5px; border: 0.8px solid var(--on-player-2); border-radius: 3px; color: var(--on-player); font: 600 var(--t-cap) / 1.5 var(--font); }
.p-meta .ui-btn { color: var(--on-player); }
.p-meta .ui-btn svg { width: 28px; height: 28px; }
.p-meta .ui-btn.on { color: var(--like); }
.p-now { width: var(--np-w); max-width: 100%; min-height: 24px; margin-top: var(--sp-12); text-align: center; color: var(--on-player); font: 500 var(--t-sub) / 24px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.p-lyr { position: relative; }
.p-lyrics { height: 100%; overflow-y: auto; scrollbar-width: none; text-align: center; padding: 0 var(--sp-28); box-sizing: border-box;
  -webkit-mask-image: linear-gradient(transparent, var(--mask-solid) 14%, var(--mask-solid) 86%, transparent);
  mask-image: linear-gradient(transparent, var(--mask-solid) 14%, var(--mask-solid) 86%, transparent); }
.p-lyrics::-webkit-scrollbar { display: none; }
.p-lyrics .pad { height: 45%; }
.p-lyrics p { position: relative; margin: 0; padding: var(--sp-8) var(--sp-4); color: var(--lyric-rest); font: 500 var(--t-lyric) / 1.4 var(--font); cursor: pointer; transition: color var(--d) var(--ease), font-size var(--d) var(--ease); }
.p-lyrics p.on { color: var(--lyric-now); font-size: var(--t-lyric-now); font-weight: 700; }
.p-lyrics p:hover { color: var(--lyric-now); }
.p-lyrics p .ts { margin-left: var(--sp-8); color: var(--lyric-rest); font: var(--w-foot) var(--t-foot) / 1 var(--font); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--d-icon) var(--ease-out); }
.p-lyrics p:hover .ts, .p-lyrics p.jumped .ts { opacity: 1; }
.p-lyrics .none { display: grid; place-items: center; height: 100%; color: var(--on-player-2); }

.p-ctl { width: 100%; max-width: calc(var(--np-w) + 2 * var(--sp-24)); margin: 0 auto; padding: var(--sp-8) var(--sp-24) 0; box-sizing: border-box; }
.p-vers { display: flex; gap: var(--sp-8); overflow-x: auto; scrollbar-width: none; padding: 6px 0; }
.p-vers::-webkit-scrollbar { display: none; }
.p-vers:empty { display: none; }
.p-vers .chip { background: var(--player-fill); color: var(--on-player); }
.p-vers .chip.on { background: var(--player-brand); color: var(--on-brand); }
.p-acts { display: flex; justify-content: space-around; }
.p-acts .ui-btn { color: var(--on-player-2); }
.p-acts .ui-btn.on { color: var(--player-brand); }
.p-seek { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; column-gap: var(--sp-8); }
.p-seek .tm { color: var(--on-player-2); font: var(--w-cap) var(--t-cap) / 1 var(--font); font-variant-numeric: tabular-nums; }
.p-seek .tm:last-child { text-align: right; }
.p-seek input[type="range"] { width: 100%; height: var(--touch); margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.p-seek input[type="range"]::-webkit-slider-runnable-track { height: 2.5px; border-radius: 2px; background: linear-gradient(90deg, var(--on-player) var(--p, 0%), var(--player-track) var(--p, 0%)); }
.p-seek input[type="range"]::-moz-range-track { height: 2.5px; border-radius: 2px; background: var(--player-track); }
.p-seek input[type="range"]::-moz-range-progress { height: 2.5px; border-radius: 2px; background: var(--on-player); }
.p-seek input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -3.75px; border-radius: 50%; background: var(--on-player); }
.p-seek input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--on-player); }
.p-status { min-height: 18px; text-align: center; color: var(--on-player-2); font: var(--w-foot) var(--t-foot) / 18px var(--font); font-variant-numeric: tabular-nums; }
.p-status.err { display: flex; align-items: center; gap: var(--sp-8); text-align: left; color: var(--on-player); }
.p-status.err span { flex: 1; }
.p-status .ui-btn { color: var(--on-player); font-weight: 600; }
/* 两边按钮的点击区比图标宽 10px，往外挪 10px，图标边和封面边对齐 */
.p-ctrl { display: flex; align-items: center; justify-content: space-between; margin: var(--sp-8) -10px 0; }
.p-ctrl .ui-btn { color: var(--on-player); }
.p-ctrl .side svg { width: 24px; height: 24px; }
.p-ctrl .side { color: var(--on-player-2); }
.p-ctrl .side.on { color: var(--player-brand); }
.p-ctrl .prev svg, .p-ctrl .next svg { width: 32px; height: 32px; }
/* 白色圆形播放键，近黑图标 */
.p-ctrl .play { width: 68px; height: 68px; border-radius: 50%; background: var(--on-player); color: var(--on-play-btn); }
.p-ctrl .play svg { width: 32px; height: 32px; }

/* 宽屏：左边一列（封面、歌名、进度、播放键）上下居中，右边歌词占满高度；
   定时、编辑、设备、版本四个小按钮放到顶栏右边，底下不再横着三排（0.5.9） */
@media (min-width: 840px) {
  .player { --np-w: clamp(200px, min(40vw, calc(var(--np-vh) - 330px - var(--np-extra))), 440px); }
  .player-inner {
    display: grid;
    grid-template-columns: minmax(var(--sp-24), 1fr) var(--np-w) clamp(40px, 6vw, 88px) minmax(0, 560px) minmax(var(--sp-24), 1fr);
    grid-template-rows: auto minmax(var(--sp-8), 1fr) auto auto auto auto auto minmax(var(--sp-8), 1fr);
  }
  .p-pages, .p-ctl { display: contents; }
  .p-top { grid-column: 1 / -1; grid-row: 1; }
  .p-tabs { visibility: hidden; }
  .p-acts { grid-column: 1 / -1; grid-row: 1; align-self: center; justify-self: end; gap: var(--sp-4); margin-right: calc(var(--touch) + var(--sp-12)); }
  .p-song { grid-column: 2; grid-row: 3; padding: 0; }
  .p-meta { margin-top: var(--sp-20); }
  .p-now { display: none; }
  .p-vers { grid-column: 2; grid-row: 4; }
  .p-seek { grid-column: 2; grid-row: 5; margin-top: var(--sp-8); }
  .p-status { grid-column: 2; grid-row: 6; }
  .p-ctrl { grid-column: 2; grid-row: 7; margin-top: 0; }
  .p-ctrl .play { width: 60px; height: 60px; }
  .p-ctrl .play svg { width: 28px; height: 28px; }
  .p-lyr { grid-column: 4; grid-row: 2 / -1; }
  .p-lyrics { text-align: left; padding: 0; }
}

/* ---------------- 宽屏底部播放栏 ---------------- */

.pbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mini); height: var(--pbar-h); align-items: center; padding: 0 var(--sp-16); box-sizing: border-box; background: var(--surface); box-shadow: 0 -1px 0 var(--separator); }
.pbar .pb-l { flex: none; display: flex; align-items: center; gap: var(--sp-12); width: 240px; min-width: 0; }
.pbar .pb-art { flex: none; width: 52px; height: 52px; padding: 0; border: 0; border-radius: var(--r-art); overflow: hidden; background: var(--surface-2); color: var(--label-3); display: grid; place-items: center; cursor: pointer; }
.pbar .pb-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pbar .pb-art svg { width: 22px; height: 22px; }
.pbar .pb-t { flex: 1; min-width: 0; }
.pbar .pb-t b { display: block; font: 600 var(--t-sub) / var(--lh-sub) var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbar .pb-t span { display: block; margin-top: 2px; color: var(--label-2); font: var(--w-foot) var(--t-foot) / var(--lh-foot) var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbar .pb-t span.err { color: var(--danger); }
.pbar .ui-btn.on { color: var(--like); }
.pbar .pb-c { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.pbar .pb-btns { display: flex; align-items: center; gap: var(--sp-8); }
.pbar .pb-btns .ui-btn { color: var(--label); }
.pbar .pb-btns .ui-btn.side { color: var(--label-2); }
.pbar .pb-btns .ui-btn.side.on { color: var(--tint); }
.pbar .pb-btns .ui-btn.side svg { width: 20px; height: 20px; }
/* 点击区 44，绿圆只画 36（内边距里不涂底色），和下面的进度条留开距离 */
.pbar .pb-btns .play { width: var(--touch); height: var(--touch); padding: 4px; border-radius: 50%; background: var(--brand); background-clip: content-box; color: var(--on-brand); }
.pbar .pb-btns .play svg { width: 20px; height: 20px; }
.pbar .pb-seek { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: var(--sp-8); width: 100%; max-width: 560px; margin-top: -4px; }
.pbar .pb-seek .tm { color: var(--label-2); font: var(--w-cap) var(--t-cap) / 1 var(--font); font-variant-numeric: tabular-nums; }
.pbar .pb-seek .tm:first-child { text-align: right; }
/* 进度条和音量用同一种细条：4px 的轨道，走过的部分品牌绿，白色小圆点（不用浏览器默认的粗黑条） */
.pbar input[type="range"] { --pb-track: color-mix(in srgb, var(--label-3) 45%, transparent); height: var(--touch); margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.pbar input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--brand) var(--p, 0%), var(--pb-track) var(--p, 0%)); }
.pbar input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--pb-track); }
.pbar input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--brand); }
.pbar input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.3); }
.pbar input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.3); }
.pbar input[type="range"]:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; border-radius: 4px; }
/* 点的范围上下补到 44，负外边距不占布局；和上面按钮重叠的那一条归按钮（按钮叠在上面） */
.pbar .pb-seek input { width: 100%; margin: -10px 0; }
.pbar .pb-btns { position: relative; z-index: 1; }
.pbar .pb-r { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 2px; width: 240px; color: var(--label-2); }
.pbar .pb-r .ui-btn { color: var(--label-2); }
.pbar .pb-r .ui-btn.on { color: var(--tint); }
.pbar .pb-r .ui-btn svg { width: 20px; height: 20px; }
.pbar .pb-r .vol { width: 88px; margin: 0 var(--sp-4); }
.pbar .pb-r [data-x="badge"] { display: inline-flex; align-items: center; margin-right: var(--sp-4); }
.pbar .pb-r [data-x="badge"]:empty { display: none; }
@media (min-width: 1200px) { .pbar .pb-l, .pbar .pb-r { width: 300px; } }

/* ---------------- 编辑歌曲信息 ---------------- */

.me-cover { gap: var(--sp-16); padding-block: var(--sp-12); }
.me-art { flex: none; width: 72px; height: 72px; border-radius: var(--r-art); overflow: hidden; background: var(--surface-2); color: var(--label-3); display: grid; place-items: center; }
.me-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-art svg { width: 28px; height: 28px; }
.me-cover-btns { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-12); }
.me-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8); padding: var(--sp-12) var(--sp-16); }
.me-pick { padding: 0; border: 0; border-radius: var(--r-art); overflow: hidden; aspect-ratio: 1; background: var(--surface-2); cursor: pointer; }
.me-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-lyric { padding-block: var(--sp-8); }
.me-lyric textarea { width: 100%; text-align: left; min-height: 180px; border: 0; background: transparent; color: var(--label); font: var(--w-body) var(--t-sub) / var(--lh-sub) var(--font); resize: vertical; outline: none; }
.me-note { margin: var(--sp-8) var(--margin); color: var(--label-2); font: var(--w-foot) var(--t-foot) / var(--lh-foot) var(--font); }
.me-note.err { color: var(--danger); }
.me-note:empty { display: none; }

/* 接力被浏览器拦下自动播放：mini player 上方一颗胶囊按钮 */
.resume-bar { position: fixed; z-index: var(--z-toast); left: 50%; bottom: calc(var(--tab-h) + var(--mini-h) + var(--sp-20) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 2 * var(--margin)); min-height: var(--touch); display: flex; align-items: center; gap: var(--sp-8); padding: 0 var(--sp-20); border: 0; border-radius: var(--r-pill); background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-float); font: var(--w-headline) var(--t-sub) / var(--lh-sub) var(--font); cursor: pointer; }
.resume-bar svg { width: 18px; height: 18px; flex: none; }
@media (min-width: 840px) { .resume-bar { bottom: calc(var(--pbar-h) + var(--sp-16)); } }