/*!
 * player.css — 自建悬浮音乐播放器的全部样式
 *
 * 约定:
 *   - 所有选择器都在 #hst-player / .hst-* 命名空间下, 与 theme-hao 零重名。
 *   - 主题变量 (--heo-*) 全部带 fallback, 主题换色/暗色模式自动跟随; 主题升级不会丢。
 *   - 尺寸/定位写在 CSS 里, JS 只改 data-* 与内联的进度百分比。
 */

/* 后台「播放器外观」生成的覆盖层 (阶段 4, 2026-09-14)。
   文件在 nginx/static/player/theme/theme.css, 由插件写、由 nginx 的
   `location = /static/player/theme` 下发, 全程不经过 Halo, 也不改 DB。

   ★ 它**必须**放在最前面 (这里), 不能挪到文件末尾: 这句话不改变结果, 但改变原因 ——
     @import 拉进来的规则在层叠里排在**本文档所有规则之前**, 所以生成的样式**天生**
     打不过本文件里任何一条同特异性的规则。生成器为此给每条声明都加了 !important
     (作者来源的 !important 无视特异性), 那才是它们能生效的原因。
     挪到末尾不会让 !important 失效, 但会让人误以为"靠位置取胜" —— 下次谁去掉
     !important 就会想不明白为什么颜色又被浅色/深色主题块盖掉了。

   ★ 绝不在这条 @import 上用 CSS 的「层」语法 (at 规则 layer): 不支持它的浏览器会
     **丢掉整块样式**, 播放器直接退化成裸 HTML。生成器对此是**报错拒绝**而不是剥离
     (剥掉会留下一个孤立的 { } 块, 浏览器同样静默丢弃)。 */
@import url("/static/player/theme");

#hst-player[hidden] { display: none !important; }

/* 让位: 本页自己就有整页播放器 (/music 音乐馆) → 悬浮球连面板一起收起来
   (2026-09-14 用户要求: "音乐馆打开后, 左下角那个播放器就不要再显示了")。

   ★ 这里**故意用 visibility 而不是 display:none** —— 两个 <audio> 元素是 #hst-player
     的子节点, 而这个文件/JS 的既有注释记着"部分 iOS 版本拒绝播放隐藏子树里的媒体元素",
     display:none 有把媒体元素弄哑的风险 (让位只是"收起控件", 不该顺手改媒体的可达性)。
   visibility:hidden 保留布局盒 ⇒ elementFromPoint 打不到球 (回归探针据此断言
   "既看不见、也点不到"), 而 JS 侧已同时 pause() 停声, 两者缺一不可。
   pointer-events 是冗余保险 (visibility:hidden 的盒子本来就不接收事件),
   但按本项目惯例: 承重的东西写两遍, 因为两条都不会报错。 */
#hst-player[data-yield="true"] {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 双保险: 万一主题升级把 nav_musicEnable 重置回 true, 也不让两套播放器叠在同一坐标
   (体检脚本会 FAIL 报出来, 这条只是兜住"用户先看到两个球") */
#nav-music { display: none !important; }

#hst-player {
  /* 强调色**故意不跟** --heo-main / --heo-theme:
     主题设置里 style.themeLightSkin 是出厂默认的蓝 #425AEF (用户从没用过这个颜色),
     而本站常年是深色模式, 访客看到的基色是 style.themeDarkSkin 的琥珀金 #f2b94b,
     首页背景画也是金调 —— 所以播放器统一用这抹金, 浅色下加深一档保证白底可读。
     主题若改了基色, 这里要跟着改 (见 LOCAL_DEBUG 常见坑)。 */
  --hst-accent: #f2b94b;
  --hst-accent-deep: #a9741a;
  --hst-bg: var(--heo-card-bg, #fff);
  --hst-fg: var(--heo-fontcolor, #363636);
  --hst-dim: var(--heo-secondtext, #8b8b8b);
  --hst-main: var(--hst-accent);
  --hst-border: var(--heo-card-border, #e3e8f7);
  --hst-ring-bg: rgba(255, 255, 255, .28);
  --hst-shadow: 0 8px 30px rgba(31, 38, 64, .14);
  --hst-panel-bg: var(--heo-card-bg, #fff);
  position: fixed;
  left: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 99;                       /* 主题 #nav-music=9, #rightside=100 */
  width: 56px;
  height: 56px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hst-fg);
  -webkit-tap-highlight-color: transparent;
}

/* 两个音频通道: 必须留在可渲染子树里 (部分 iOS 拒绝播放隐藏子树里的媒体元素),
   所以用 0 尺寸 + 透明, 不用 display:none */
#hst-player .hst-audio {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------ 收起态: 唱片球 */

#hst-ball {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--hst-bg);
  box-shadow: var(--hst-shadow);
  cursor: pointer;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  /* 球可以按住拖到任意位置 (2026-09-14)。touch-action:none 是**必需**的 —— 没有它,
     手机上按住球拖动 = 滚动页面, 球一动不动。而 JS 那边 pointerdown 里不能
     preventDefault (那会连 click 一起掐掉, 球就点不响了), 所以只能靠这里。 */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#hst-ball:hover { transform: scale(1.06); box-shadow: 0 8px 28px rgba(0, 0, 0, .18); }
#hst-ball:active { transform: scale(.97); }
#hst-ball:focus-visible { outline: 2px solid var(--hst-main); outline-offset: 3px; }

/* 球的盘面: 主题金渐变 (有封面时被封面盖住) */
#hst-ball .hst-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--hst-accent) 0%, var(--hst-accent-deep) 100%);
  color: #fff;
  transition: filter .3s ease;
}

/* 无封面: 中间的音符字 (纯 CSS, 不引第三方图) */
#hst-player[data-cover="false"] .hst-disc::after {
  content: "♪";
  font-size: 21px;
  line-height: 1;
  position: relative;
  z-index: 1;
}
/* 唱片在转, 音符会跟着绕圈 —— 反向同速抵消掉, 让它看着是静止的 */
#hst-player[data-cover="false"][data-state="playing"] .hst-disc::after { animation: hst-spin 12s linear infinite reverse; }

#hst-ball .hst-disc img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

/* 播放中: 只有"有封面"时才转 (纯金渐变盘面转起来看不出区别, 白白耗电) */
#hst-player[data-cover="true"][data-state="playing"] .hst-disc { animation: hst-spin 12s linear infinite; }
#hst-player[data-state="loading"] .hst-disc { animation: hst-pulse 1.4s ease-in-out infinite; }

@keyframes hst-spin { to { transform: rotate(360deg); } }
@keyframes hst-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* 进度环 */
#hst-ball .hst-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
#hst-ball .hst-ring circle { fill: none; stroke-width: 3; }
#hst-ball .hst-ring-bg { stroke: var(--hst-ring-bg); }
#hst-ball #hst-ring-fg {
  stroke: #fff;              /* 进度环画在金色盘面上, 用白比用基色看得清 */
  stroke-linecap: round;
  transition: stroke-dashoffset .25s linear;
}
#hst-player[data-state="idle"] #hst-ball #hst-ring-fg { stroke-dashoffset: 163.36; }

/* 播放/暂停图标: 暂停时露出 (这就是"点我播放"的提示), 播放中只在悬停时露出 */
#hst-ball .hst-glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  z-index: 4;
  color: #fff;
  opacity: 1;
  transition: opacity .2s ease;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
  pointer-events: none;
}
#hst-ball .hst-glyph svg { width: 100%; height: 100%; display: block; }
#hst-player[data-state="playing"] #hst-ball .hst-glyph { opacity: 0; }
#hst-player[data-state="playing"] #hst-ball:hover .hst-glyph,
#hst-player[data-state="playing"] #hst-ball:focus-visible .hst-glyph { opacity: 1; }
#hst-player[data-state="playing"] #hst-ball:hover .hst-disc,
#hst-player[data-state="playing"] #hst-ball:focus-visible .hst-disc { filter: brightness(.62); }

/* "上次听到一半"的呼吸提示点 */
/* 位置从右上角挪到右下角: 右上角被放大的展开按钮占了, 原来那个点完全被盖住 */
#hst-player .hst-hint {
  position: absolute;
  right: 1px;
  bottom: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;                      /* 金色球上只有白点看得见 */
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .3);
  z-index: 5;
  animation: hst-breath 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hst-breath {
  0%, 100% { transform: scale(.72); opacity: .5; }
  50% { transform: scale(1.12); opacity: 1; }
}

/* 展开/收起的小箭头。
   尺寸是从 22px 提到 26px 的: 用户实测反馈"这播放器就是个开关, 没有别的" ——
   球本身是播放/暂停, 能展开面板的唯一入口就是这颗小箭头, 太不显眼就等于没有。
   首次访问还会上下轻晃 (data-hint) 直到用户展开过一次。 */
#hst-expand {
  position: absolute;
  right: -7px;
  top: -7px;
  z-index: 6;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  /* 深底 + 金箭头: 球本身也是金的, 同色按钮会糊成一坨认不出来 */
  background: #1d1d21;
  color: var(--hst-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35), 0 0 0 2px rgba(255, 255, 255, .16);
  transition: transform .25s ease;
}
#hst-expand svg { width: 15px; height: 15px; }
#hst-player[data-hint="true"] #hst-expand { animation: hst-nudge 2.6s ease-in-out infinite; }
@keyframes hst-nudge {
  0%, 60%, 100% { transform: translateY(0); }
  70% { transform: translateY(-3px); }
  85% { transform: translateY(1px); }
}
#hst-expand:hover { transform: scale(1.12); }
#hst-player[data-expanded="true"] #hst-expand { transform: rotate(180deg); }
#hst-player[data-expanded="true"] #hst-expand:hover { transform: rotate(180deg) scale(1.12); }

/* ------------------------------------------------------------ 展开态: 面板 */

#hst-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 14px);
  width: 320px;
  padding: 14px;
  box-sizing: border-box;
  border: 1px solid var(--hst-border);
  border-radius: 20px;
  background: var(--hst-panel-bg);
  box-shadow: var(--hst-shadow);
  transform-origin: left bottom;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
#hst-player[data-expanded="false"] #hst-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.94);
  pointer-events: none;
}

#hst-panel .hst-head { display: flex; align-items: center; gap: 10px; }

#hst-panel #hst-cover-lg {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--hst-border);
}

#hst-panel .hst-meta { flex: 1 1 auto; min-width: 0; }
#hst-panel .hst-title {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#hst-panel .hst-artist {
  font-size: 12px;
  color: var(--hst-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#hst-panel #hst-close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--hst-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
#hst-panel #hst-close:hover { background: var(--hst-border); color: var(--hst-fg); }

/* 进度条 / 音量条 (div[role=slider], 指针拖动 + 方向键) */
#hst-panel .hst-slider {
  position: relative;
  height: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
  outline: none;
}
#hst-panel .hst-slider-bg {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--hst-border);
  overflow: hidden;
}
#hst-panel .hst-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 2px;
  background: var(--hst-main);
}
#hst-panel .hst-knob {
  position: absolute;
  left: 0;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--hst-main);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
#hst-panel .hst-slider:hover .hst-knob,
#hst-panel .hst-slider:focus-visible .hst-knob,
#hst-panel .hst-slider.is-drag .hst-knob { opacity: 1; }
#hst-panel .hst-slider:focus-visible .hst-slider-bg { box-shadow: 0 0 0 2px var(--hst-main); }

#hst-panel .hst-time {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--hst-dim);
  margin: -2px 2px 8px;
  font-variant-numeric: tabular-nums;
}

#hst-panel .hst-ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 8px;
}
#hst-panel .hst-ctrl button {
  width: 34px;
  height: 34px;
  padding: 7px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--hst-fg);
  cursor: pointer;
  box-sizing: border-box;
  transition: background .18s ease, transform .18s ease;
}
#hst-panel .hst-ctrl button svg { width: 100%; height: 100%; display: block; }
#hst-panel .hst-ctrl button:hover { background: var(--hst-border); }
#hst-panel .hst-ctrl button:active { transform: scale(.92); }
#hst-panel .hst-ctrl button:focus-visible { outline: 2px solid var(--hst-main); outline-offset: 1px; }
#hst-panel .hst-ctrl button[aria-pressed="true"] { color: var(--hst-main); }
#hst-panel .hst-ctrl .hst-play {
  width: 42px;
  height: 42px;
  padding: 10px;
  background: var(--hst-main);
  color: #fff;
}
#hst-panel .hst-ctrl .hst-play:hover { background: var(--hst-main); filter: brightness(1.1); }

#hst-panel .hst-vol-row { display: flex; align-items: center; gap: 8px; }
#hst-panel #hst-mute {
  width: 26px;
  height: 26px;
  padding: 4px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--hst-dim);
  cursor: pointer;
  box-sizing: border-box;
}
#hst-panel #hst-mute svg { width: 100%; height: 100%; display: block; }
#hst-panel #hst-mute:hover { color: var(--hst-fg); background: var(--hst-border); }
#hst-panel .hst-vol { flex: 1 1 auto; height: 14px; }

/* 歌单列表 */
#hst-panel #hst-list {
  margin-top: 10px;
  border-top: 1px solid var(--hst-border);
  padding-top: 6px;
}
#hst-panel .hst-list-inner {
  max-height: 190px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  /* 系统默认滚动条在两种主题下都很抢眼; color-mix 不支持时自动退回默认样式 */
  scrollbar-color: color-mix(in srgb, var(--hst-dim) 45%, transparent) transparent;
}
#hst-panel .hst-list-inner::-webkit-scrollbar { width: 6px; }
#hst-panel .hst-list-inner::-webkit-scrollbar-track { background: transparent; }
#hst-panel .hst-list-inner::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--hst-dim) 45%, transparent);
  border-radius: 3px;
}

#hst-panel .hst-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 7px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .16s ease;
}
#hst-panel .hst-row:hover { background: var(--hst-border); }
#hst-panel .hst-row:focus-visible { outline: 2px solid var(--hst-main); outline-offset: -2px; }
#hst-panel .hst-row-cover {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--hst-border);
}
#hst-panel .hst-row-note {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hst-dim);
  padding: 7px;
  box-sizing: border-box;
}
#hst-panel .hst-row-note svg { width: 100%; height: 100%; display: block; }
#hst-panel .hst-row-text { flex: 1 1 auto; min-width: 0; }
#hst-panel .hst-row-name {
  display: block;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#hst-panel .hst-row-artist {
  display: block;
  font-size: 11px;
  color: var(--hst-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#hst-panel .hst-row.is-active .hst-row-name { color: var(--hst-main); font-weight: 600; }
#hst-panel .hst-row.is-active .hst-row-cover { box-shadow: 0 0 0 2px var(--hst-main); }

/* 曲目时长。player.js 里 .hst-row-dur 这个 span 从上线起就被建出来却**从没被填过**
   (2026-09-17 之前的"从没实现"), 也没有任何样式规则 —— 2026-09-13 补上:
   时长走懒探测 (首次展开面板时 preload=metadata 问一次, 缓存进 localStorage)。 */
#hst-panel .hst-row-dur {
  flex: 0 0 auto;
  margin-left: 8px;
  font-size: 11px;
  color: var(--hst-dim);
  font-variant-numeric: tabular-nums;
}

/* 歌单顶部的 "共 N 首 · 总时长" */
#hst-panel .hst-list-sum {
  padding: 2px 8px 6px;
  font-size: 11px;
  color: var(--hst-dim);
}

/* 播放失败时的说明。之前 syncUi() 会设 data-state="error", 但**没有任何规则读它**,
   于是播放失败时球和面板看着跟没事一样 (用户只能感觉"点了没反应")。 */
#hst-panel #hst-err {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: #e5484d;
  word-break: break-word;
}
#hst-panel #hst-err[hidden] { display: none; }
#hst-player[data-state="error"] #hst-ball { box-shadow: inset 0 0 0 2px #e5484d; }
#hst-player[data-state="error"] #hst-ball .hst-glyph { color: #e5484d; }
#hst-player[data-state="error"] #hst-ball .hst-ring-fg { stroke: #e5484d; }

/* 面板磨砂: 半透明 + 背景虚化, 让它在任何页面上都像"浮"着而不是糊一块实心色 */
#hst-panel {
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
}

/* ------------------------------------------------------------ 暗色 (跟随主题) */

html[data-theme="dark"] #hst-player {
  --hst-bg: var(--heo-card-bg, #2b2b2b);
  --hst-fg: var(--heo-fontcolor, #d8d8d8);
  --hst-dim: var(--heo-secondtext, #909090);
  --hst-border: rgba(255, 255, 255, .12);
  --hst-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  --hst-panel-bg: rgba(40, 42, 52, .78);
  --hst-ring-bg: rgba(255, 255, 255, .28);   /* 暗色下主题边框太黑, 轨道环会看不见 */
}
html[data-theme="dark"] #hst-player .hst-hint { box-shadow: 0 0 0 2px var(--hst-bg); }
html[data-theme="dark"] #hst-panel .hst-knob { background: #f0f0f0; }

/* 浅色: 金加深一档 (原色 #f2b94b 在白底上太飘, 文字用它读不清) */
html[data-theme="light"] #hst-player {
  --hst-accent: #d9a02a;
  --hst-accent-deep: #a9741a;
  --hst-border: rgba(0, 0, 0, .07);
  --hst-shadow: 0 10px 34px rgba(31, 38, 64, .16);
  --hst-panel-bg: rgba(255, 255, 255, .82);
}

/* ------------------------------------------------------------ 拖动球 (2026-09-14)
   用户: "有点太挡视野, 可以默认在这个位置, 但用户可以随意拖动到合适的位置"。
   球一旦被拖走, 面板就不能再假定"球在左下角"了 —— 锚点/展开方向跟着翻,
   否则会出现"球拖到右上角, 面板整个开在屏幕外"的够不着状态。 */

/* 拖动中: 关掉 hover/active 的缩放, 否则球会在手指下面一跳一跳 */
#hst-player[data-dragging="true"] #hst-ball,
#hst-player[data-dragging="true"] #hst-ball:hover,
#hst-player[data-dragging="true"] #hst-ball:active {
  transform: none;
  cursor: grabbing;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .32);
}

/* 只作用于桌面: 手机上 #hst-panel 是贴底抽屉 (由 ≤768px 那段全权接管),
   这里若不加 min-width 守卫, 属性选择器的高优先级会把抽屉拽回球旁边。 */
@media (min-width: 769px) {
  /* 球在右半边 → 面板锚到球的右边缘 */
  #hst-player[data-anchor="right"] #hst-panel {
    left: auto;
    right: 0;
    transform-origin: right bottom;
  }
  /* 球在上半边 → 面板改成往下展开 */
  #hst-player[data-open="down"] #hst-panel {
    bottom: auto;
    top: calc(100% + 14px);
    transform-origin: left top;
  }
  #hst-player[data-anchor="right"][data-open="down"] #hst-panel { transform-origin: right top; }
  /* 收起时的入场位移也要跟着反向, 否则"往下开"的面板会从反方向滑进来 */
  #hst-player[data-open="down"][data-expanded="false"] #hst-panel { transform: translateY(-10px) scale(.94); }
}

/* ------------------------------------------------------------ 手机 (≤768px) */

@media (max-width: 768px) {
  #hst-player {
    left: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 50px;
    height: 50px;
  }
  #hst-ball { width: 50px; height: 50px; }
  #hst-ball .hst-glyph { width: 19px; height: 19px; margin: -9.5px 0 0 -9.5px; }
  /* 面板改成贴底抽屉: 320px 在窄屏放不下, 也够不到 */
  #hst-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 74vh;
    overflow-y: auto;
    border-radius: 18px 18px 0 0;
    border-width: 1px 0 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform-origin: center bottom;
    overscroll-behavior: contain;
  }
  #hst-player[data-expanded="true"]::before {
    /* 抽屉背后的遮罩 (点击不关: 关闭走面板里的 ×, 避免误触) */
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, .35);
  }
  #hst-panel .hst-list-inner { max-height: 40vh; }
  #hst-panel .hst-ctrl button { width: 38px; height: 38px; padding: 9px; }
  #hst-panel .hst-ctrl .hst-play { width: 46px; height: 46px; padding: 12px; }

  /* --- 触摸目标 (2026-09-13, 用户反馈"手机上不好用") ---
     滑块的**命中区**只有 16px 高, 远低于 44px 的最小触摸目标 —— 手指按下去
     经常落在条外, 感觉就是"按不中/拖不动"。视觉粗细 (hst-slider-bg 的 4px)
     保持不变, 只把可触摸的盒子撑高。 */
  #hst-panel .hst-slider { height: 30px; }
  #hst-panel .hst-knob { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
  /* 触摸设备没有 hover, 圆点必须常显 —— 否则用户根本看不出这里能拖 */
  #hst-panel .hst-slider .hst-knob { opacity: 1; }
  #hst-panel .hst-time { font-size: 12px; }
  /* 歌单行也放大: 34px 封面 + 6px 内边距的行高对拇指太局促 */
  #hst-panel .hst-row { padding: 9px 8px; gap: 11px; }
  #hst-panel .hst-row-cover { width: 40px; height: 40px; }
  #hst-panel .hst-row-name { font-size: 14px; }
  #hst-panel .hst-row-artist { font-size: 12px; }
  /* 底部安全区: 抽屉最后一行的时长/封面别被 iPhone 的小黑条压住 */
  #hst-panel .hst-list-inner { padding-bottom: 6px; }
}

/* 尊重"减少动态效果"偏好 */
@media (prefers-reduced-motion: reduce) {
  #hst-player .hst-disc,
  #hst-player[data-state="playing"] .hst-disc,
  #hst-player .hst-hint { animation: none !important; }
  #hst-player * { transition-duration: .01ms !important; }
}