/* hz-player.css —— 海禛云紧凑音乐播放器（单曲）样式。
 *
 * 与云盘自带的整页播放器（static/drive/player.html：歌单 + 黑胶 + 全屏）区分开：
 * 这一套是**嵌进页面的紧凑组件**，用在「官网作品页」和「云盘公开分享落地页」，
 * 所以配色一律走宿主的主题变量、取不到才用兜底色 —— 浅色页里是浅色卡，
 * 深色主题（[data-theme="dark"] 或宿主本来就深）自动跟随，不写成死板的深色 app。
 *
 * 变量口径对齐 CMS 主题（cms.css/cms-content.css 用的 --accent/--card-bg/--text-primary/
 * --text-secondary/--border-color），云盘侧同名可用，故一套样式两边都服帖。
 */

.hzp{
  --hzp-accent: var(--accent, #ec4141);
  --hzp-bg: var(--card-bg, #fff);
  --hzp-fg: var(--text-primary, #1a1a2e);
  --hzp-sub: var(--text-secondary, #8a8f98);
  --hzp-line: var(--border-color, #e8eaf0);
  --hzp-soft: var(--bg-secondary, rgba(127,127,127,.08));
  box-sizing:border-box;
  border:1px solid var(--hzp-line);
  border-radius:14px;
  background:var(--hzp-bg);
  padding:14px 16px;
  font-size:14px;
  color:var(--hzp-fg);
}
.hzp *{box-sizing:border-box}

/* 头部：封面块 + 标题/副标题 */
.hzp-head{display:flex;align-items:center;gap:12px;min-width:0}
.hzp-art{
  width:44px;height:44px;flex:0 0 auto;border-radius:12px;
  background:linear-gradient(135deg,var(--hzp-accent),#ff7a45);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;box-shadow:0 4px 14px rgba(236,65,65,.28);
}
.hzp-art.spin{animation:hzp-spin 6s linear infinite}
@keyframes hzp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.hzp-art.spin{animation:none}}
.hzp-meta{min-width:0;flex:1}
.hzp-t{font-weight:700;font-size:15px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hzp-s{font-size:12px;color:var(--hzp-sub);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hzp-acts{display:flex;gap:8px;align-items:center;flex:0 0 auto}

/* 通用小按钮 */
.hzp-btn{
  appearance:none;border:1px solid var(--hzp-line);background:transparent;color:var(--hzp-sub);
  width:32px;height:32px;border-radius:9px;cursor:pointer;font-size:0;
  display:inline-flex;align-items:center;justify-content:center;transition:.18s;
}
.hzp-btn svg{width:16px;height:16px;fill:currentColor}
.hzp-btn:hover{color:var(--hzp-fg);border-color:var(--hzp-accent)}
.hzp-btn.on{color:var(--hzp-accent);border-color:var(--hzp-accent)}
.hzp-btn.hzp-play{
  width:42px;height:42px;border-radius:50%;border:none;color:#fff;
  background:linear-gradient(135deg,var(--hzp-accent),#ff7a45);
  box-shadow:0 6px 18px rgba(236,65,65,.32);
}
.hzp-btn.hzp-play svg{width:20px;height:20px;fill:#fff}
.hzp-btn.hzp-play:hover{filter:brightness(1.05)}

/* 进度条 */
.hzp-prog{display:flex;align-items:center;gap:10px;margin-top:12px}
.hzp-time{font-size:12px;color:var(--hzp-sub);font-variant-numeric:tabular-nums;min-width:44px}
.hzp-time.end{text-align:right}
.hzp-bar{flex:1;height:22px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.hzp-track{position:relative;width:100%;height:5px;border-radius:3px;background:var(--hzp-soft);overflow:hidden}
.hzp-buf{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--hzp-line)}
.hzp-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--hzp-accent);border-radius:3px}
.hzp-dot{
  position:absolute;top:50%;left:0;width:11px;height:11px;margin-left:-5.5px;
  border-radius:50%;background:#fff;border:2px solid var(--hzp-accent);
  transform:translateY(-50%);opacity:0;transition:opacity .15s;
}
.hzp-bar:hover .hzp-dot,.hzp-bar.drag .hzp-dot{opacity:1}

/* 控制排 */
.hzp-ctrls{display:flex;align-items:center;gap:10px;margin-top:8px}
.hzp-spacer{flex:1}
.hzp-vol{display:flex;align-items:center;gap:6px;color:var(--hzp-sub)}
.hzp-vol input[type=range]{width:78px;accent-color:var(--hzp-accent)}
@media (max-width:560px){ .hzp-vol{display:none} }

/* 歌词区（默认展开：一边播一边看词） */
.hzp-lyr{
  margin-top:12px;border-top:1px dashed var(--hzp-line);padding-top:10px;
  max-height:240px;overflow-y:auto;line-height:1.95;font-size:13px;color:var(--hzp-sub);
  scrollbar-width:thin;
}
.hzp-lyr.hide{display:none}
.hzp-lyr .hzp-sec{color:var(--hzp-accent);font-weight:600;margin-top:8px}
.hzp-lyr .hzp-sec:first-child{margin-top:0}
.hzp-lyr .hzp-line{transition:color .2s,opacity .2s}
.hzp-lyr .hzp-line.on{color:var(--hzp-fg);font-weight:600;font-size:14px}
.hzp-lyr .hzp-line.on::before{content:"♪ ";color:var(--hzp-accent)}
.hzp-empty{color:var(--hzp-sub);font-size:12px}