/* ===================== 海报专用字体 ===================== */
@font-face{
  font-family:'XWX PTSans';
  src:url('/assest/css/fonts/PTsans.ttf') format('truetype');
  font-display:swap;
}
@font-face{
  font-family:'XWX W02';
  src:url('/assest/css/fonts/W02.woff2') format('woff2');
  font-display:swap;
}
/* ===================== 面包屑 ===================== */
.breadcrumb{display:flex;align-items:center;gap:.4rem;padding:1.5rem 0 .875rem;font-size:.71875rem;letter-spacing:.03em;color:var(--muted)}
.breadcrumb a{display:inline-flex;align-items:center;gap:.3rem;transition:color .22s}
.breadcrumb a:hover{color:var(--c-audio)}
.breadcrumb svg{width:.75rem;height:.75rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.breadcrumb .sep{opacity:.4}
.breadcrumb .current{color:var(--ink);font-weight:500}

/* ===================== 主布局 ===================== */
.song-layout{display:grid;grid-template-columns:minmax(0,1fr) 18.5rem;gap:2.25rem;align-items:start;padding-bottom:1rem}
.song-main{min-width:0;display:flex;flex-direction:column;gap:1.5rem}

/* 歌曲头部 */
.song-head{position:relative;padding:1.75rem 1.875rem 1.625rem;border:1px solid rgba(255,255,255,.62);border-radius:var(--radius);background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(1.5rem) saturate(1.6);backdrop-filter:blur(1.5rem) saturate(1.6);box-shadow:0 .0625rem .125rem rgba(31,31,31,.03),0 1.25rem 2.5rem -1.5rem rgba(31,31,31,.26);overflow:hidden}
.song-head::before{content:"";position:absolute;left:0;right:0;top:0;height:.1875rem;background:linear-gradient(90deg,var(--c-audio),var(--c-photo));opacity:.7}
.song-title{margin:0;font-family:var(--serif);font-size:clamp(1.375rem,3vw,1.75rem);font-weight:600;line-height:1.4;letter-spacing:.04em}

/* ===================== 生成海报 ===================== */
.song-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.5rem;
}

.song-title-row .song-title{
  flex:1 1 auto;
  min-width:0;
}

.poster-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-top:.35rem;
  padding:.5rem 1rem;
  border:1px solid rgba(106,90,156,.28);
  border-radius:999px;
  background:rgba(106,90,156,.08);
  color:var(--c-audio);
  font:inherit;
  font-size:.75rem;
  letter-spacing:.06em;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:background .25s,color .25s,border-color .25s,transform .25s,box-shadow .25s;
}
.poster-btn:hover{
  background:var(--c-audio);
  color:#fff;
  border-color:transparent;
  transform:translateY(-.125rem);
  box-shadow:0 .5rem 1.125rem -.5rem rgba(106,90,156,.75);
}
.poster-btn:active{
  transform:translateY(0);
}
.poster-btn svg{
  width:.875rem;
  height:.875rem;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.song-author{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.375rem;font-size:.78125rem;color:var(--muted);letter-spacing:.02em}
.song-author img{width:1.625rem;height:1.625rem;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.95);box-shadow:0 .1875rem .5rem -.1875rem rgba(31,31,31,.45)}
.song-author strong{color:var(--ink);font-weight:600}

/* 播放器 */
.player{display:flex;align-items:center;gap:1rem}
.player-btn{flex:0 0 auto;width:3.25rem;height:3.25rem;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;background:var(--c-audio);color:#fff;box-shadow:0 .625rem 1.375rem -.5rem rgba(106,90,156,.85);transition:transform .22s,background .22s,box-shadow .22s}
.player-btn:hover{transform:scale(1.05);background:#5B4C8A;box-shadow:0 .875rem 1.75rem -.5rem rgba(106,90,156,.9)}
.player-btn:active{transform:scale(.98)}
.player-btn svg{width:1.125rem;height:1.125rem;fill:currentColor;margin-left:.125rem}
.player-btn .ico-pause{display:none;margin-left:0}
.player.is-playing .player-btn .ico-play{display:none}
.player.is-playing .player-btn .ico-pause{display:block}
.player-bar{flex:1 1 auto;min-width:0}
.player-time{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.5rem;font-size:.6875rem;letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums}
.player-time .now{color:var(--c-audio);font-weight:600}
.progress-track{position:relative;height:.375rem;border-radius:999px;background:rgba(31,31,31,.08);cursor:pointer;overflow:hidden}
.progress-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:999px;background:linear-gradient(90deg,var(--c-audio),#8B7BC0)}
.progress-thumb{position:absolute;top:50%;left:0;width:.75rem;height:.75rem;border-radius:50%;background:#fff;border:2px solid var(--c-audio);box-shadow:0 .1875rem .5rem rgba(106,90,156,.5);transform:translate(-50%,-50%) scale(0);transition:transform .2s;pointer-events:none}
.progress-track:hover .progress-thumb,.player.is-playing .progress-thumb{transform:translate(-50%,-50%) scale(1)}

/* 歌词 */
.lyrics-card{position:relative;padding:1.5rem 1.875rem 1.5rem;border:1px solid rgba(255,255,255,.62);border-radius:var(--radius);background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(1.5rem) saturate(1.6);backdrop-filter:blur(1.5rem) saturate(1.6);box-shadow:0 .0625rem .125rem rgba(31,31,31,.03),0 1.25rem 2.5rem -1.5rem rgba(31,31,31,.26)}
.lyrics-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;padding-bottom:.875rem;border-bottom:1px solid var(--line)}
.lyrics-title{display:inline-flex;align-items:center;gap:.4rem;margin:0;font-family:var(--serif);font-size:.9375rem;letter-spacing:.06em}
.lyrics-title svg{width:.9375rem;height:.9375rem;fill:none;stroke:var(--c-audio);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lyrics-tip{font-size:.65625rem;letter-spacing:.03em;color:var(--muted)}
.lyrics-scroll{position:relative;max-height:22rem;overflow-y:auto;padding:1rem .25rem;scrollbar-width:thin;scrollbar-color:rgba(31,31,31,.14) transparent;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 8%,#000 92%,transparent 100%)}
.lyrics-scroll::-webkit-scrollbar{width:.25rem}
.lyrics-scroll::-webkit-scrollbar-thumb{background:rgba(31,31,31,.14);border-radius:.125rem}
.lyric-line{display:block;width:100%;padding:.5rem .75rem;margin-bottom:.125rem;border:0;border-radius:.5rem;background:transparent;text-align:left;font-family:var(--sans);font-size:.875rem;line-height:1.7;color:rgba(31,31,31,.4);letter-spacing:.02em;cursor:pointer;transition:color .3s,background .25s,transform .25s,font-size .3s}
.lyric-line:hover{color:rgba(31,31,31,.7);background:rgba(106,90,156,.05)}
.lyric-line.is-active{color:var(--c-audio);font-family:var(--serif);font-size:1.03125rem;font-weight:600;background:rgba(106,90,156,.08);transform:translateX(.25rem)}
.lyric-line.is-instrumental{font-style:italic;opacity:.65}

 
/* ===================== 右侧专辑卡 ===================== */
.side-sticky{position:sticky;top:4.625rem;display:flex;flex-direction:column;gap:1.25rem;max-height:calc(100vh - 3.375rem - 2.5rem);overflow-y:auto;padding-right:.25rem;scrollbar-width:thin;scrollbar-color:rgba(31,31,31,.12) transparent}
.side-sticky::-webkit-scrollbar{width:.25rem}
.side-sticky::-webkit-scrollbar-thumb{background:rgba(31,31,31,.12);border-radius:.125rem}
.album-card{position:relative;padding:1.25rem;border:1px solid rgba(255,255,255,.62);border-radius:var(--radius);background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(1.5rem) saturate(1.6);backdrop-filter:blur(1.5rem) saturate(1.6);box-shadow:0 .0625rem .125rem rgba(31,31,31,.03),0 1.25rem 2.5rem -1.5rem rgba(31,31,31,.26)}
.album-cover{position:relative;aspect-ratio:1/1;border-radius:.625rem;overflow:hidden;background:#EDEAE3;box-shadow:0 .75rem 1.75rem -.75rem rgba(31,31,31,.55);margin-bottom:1rem}
.album-cover img{width:100%;height:100%;object-fit:cover}
.album-cover::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(72% 62% at 25% 15%,rgba(255,255,255,.2),transparent 62%)}
.album-vinyl{position:absolute;right:.75rem;top:.75rem;width:2.25rem;height:2.25rem;border-radius:50%;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);display:grid;place-items:center;color:#fff;opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s;z-index:2}
body.is-playing .album-vinyl{opacity:1;transform:scale(1)}
.album-vinyl svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;animation:vinylSpin 3.2s linear infinite}
@keyframes vinylSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.album-name{margin:0 0 .5rem;font-family:var(--serif);font-size:1rem;font-weight:600;letter-spacing:.04em}
.album-meta{display:flex;flex-direction:column;gap:.35rem;padding-top:.875rem;border-top:1px dashed var(--line)}
.album-meta-row{display:flex;align-items:center;gap:.5rem;font-size:.71875rem;color:#3A3A3A}
.album-meta-row svg{flex:0 0 auto;width:.8125rem;height:.8125rem;fill:none;stroke:var(--c-audio);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.album-meta-label{flex:0 0 auto;color:var(--muted);font-size:.6875rem}
.album-meta-value{margin-left:auto;font-weight:500;color:var(--ink);text-align:right}

/* 悬浮工具 & Toast */
.side-tools{position:fixed;left:1rem;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:.5rem}
.tool-btn{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid rgba(255,255,255,.7);cursor:pointer;display:grid;place-items:center;color:var(--ink);background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(.875rem) saturate(1.6);backdrop-filter:blur(.875rem) saturate(1.6);box-shadow:0 .5rem 1rem -.5rem rgba(31,31,31,.4);transition:transform .25s,background .25s,color .25s,opacity .3s}
.tool-btn:hover{transform:scale(1.08);background:rgba(255,255,255,.9);color:var(--c-audio)}


/* ===================== 海报弹窗 ===================== */
.poster-modal{
  position:fixed;
  inset:0;
  z-index:500;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:1rem;
  padding:1.5rem;
  background:rgba(31,31,31,.68);
  -webkit-backdrop-filter:blur(.75rem) saturate(1.4);
  backdrop-filter:blur(.75rem) saturate(1.4);
  opacity:0;
  transition:opacity .28s;
}
.poster-modal.show{
  display:flex;
  opacity:1;
}

.poster-container{
  max-height:78vh;
  overflow:auto;
  border-radius:.75rem;
  background:transparent;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.35) transparent;
}
.poster-container::-webkit-scrollbar{width:.35rem}
.poster-container::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.35);
  border-radius:.2rem;
}

.poster-canvas{
  display:block;
  width:360px;
  height:auto;
  max-width:82vw;
  border-radius:.75rem;
  box-shadow:0 1.5rem 3.5rem -1rem rgba(0,0,0,.6);
  background:#F7F5F0;
}

.poster-actions{
  display:flex;
  gap:.75rem;
}

.poster-actions .download-btn,
.poster-actions .retry-btn{
  border:0;
  cursor:pointer;
  padding:.6rem 1.4rem;
  border-radius:999px;
  font-size:.78125rem;
  letter-spacing:.08em;
  transition:transform .22s,background .22s,box-shadow .22s;
}
.poster-actions .download-btn{
  background:#6A5A9C;
  color:#fff;
  box-shadow:0 .5rem 1.25rem -.5rem rgba(106,90,156,.85);
}
.poster-actions .download-btn:hover{
  transform:translateY(-.125rem);
  background:#5B4C8A;
}
.poster-actions .retry-btn{
  background:rgba(255,255,255,.15);
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
}
.poster-actions .retry-btn:hover{
  background:rgba(255,255,255,.25);
}

.modal-close-btn{
  position:absolute;
  top:1rem;
  right:1.25rem;
  width:2.5rem;
  height:2.5rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  cursor:pointer;
  color:#fff;
  font-size:1.5rem;
  line-height:1;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  transition:background .22s,transform .22s;
  user-select:none;
}
.modal-close-btn:hover{
  background:rgba(255,255,255,.28);
  transform:rotate(90deg);
}

.error-message{
  min-height:1.1rem;
  font-size:.71875rem;
  letter-spacing:.03em;
  color:#F2B8B8;
  text-align:center;
}

@media (max-width:40rem){
  .poster-canvas{width:300px}
  .modal-close-btn{top:.75rem;right:.75rem;width:2.1rem;height:2.1rem;font-size:1.25rem}
  .poster-actions .download-btn,
  .poster-actions .retry-btn{padding:.55rem 1.15rem;font-size:.71875rem}
}

/* ===================== 微信内长按保存的 <img> ===================== */
.poster-image{
  display:block;
  width:360px;
  height:auto;
  max-width:82vw;
  border-radius:.75rem;
  box-shadow:0 1.5rem 3.5rem -1rem rgba(0,0,0,.6);
  background:#F7F5F0;
  /* 允许微信长按弹出菜单 */
  -webkit-touch-callout:default;
  user-select:auto;
}

/* ===================== 微信引导提示条 ===================== */
.poster-wechat-tip{
  display:none;
  position:absolute;
  top:0;left:0;right:0;
  padding:.75rem 1.25rem;
  background:linear-gradient(180deg,
    rgba(31,31,31,.94) 0%,
    rgba(31,31,31,.78) 70%,
    rgba(31,31,31,0) 100%);
  color:#fff;
  font-size:.72rem;
  line-height:1.7;
  letter-spacing:.03em;
  text-align:center;
  pointer-events:none;
  z-index:5;
}
.poster-wechat-tip .arrow{
  display:inline-block;
  margin:0 .1rem;
  font-size:.92rem;
  color:#F2C57C;
  vertical-align:middle;
}
.poster-wechat-tip strong{
  color:#F2C57C;
  font-weight:600;
}
body.is-wechat .poster-wechat-tip{ display:block; }

/* 微信里隐藏原生 canvas（用 <img> 替代以支持长按） */
body.is-wechat .poster-canvas{ display:none; }


@media (max-width:64rem){
  .song-layout{grid-template-columns:minmax(0,1fr) 16.5rem;gap:1.75rem}
}
@media (max-width:51.25rem){
  .breadcrumb{padding:1.25rem 0 .75rem}
  .song-layout{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .side-sticky{position:static;max-height:none;overflow:visible;padding-right:0}
  .form-row{grid-template-columns:minmax(0,1fr)}
  .side-tools{left:.5rem;gap:.4rem}
  .tool-btn{width:2.375rem;height:2.375rem}
}
@media (max-width:40rem){
  .song-head{padding:1.375rem 1.25rem 1.25rem}
  .lyrics-card{padding:1.25rem 1.25rem 1rem}
  .lyrics-scroll{max-height:17rem}
  .comment-form-wrap{padding:1.25rem 1.25rem 1.375rem}
  .comment-avatar{width:2.125rem;height:2.125rem}
  .album-card{padding:1.125rem 1rem}
  .song-title{font-size:1.25rem}
    .poster-btn{
    padding:.5rem .6rem;
  }
  .poster-btn span{
    display:none;
  }
}
@media (max-width:30rem){
  .player-btn{width:2.875rem;height:2.875rem}
  .player-btn svg{width:1rem;height:1rem}
  .lyric-line{font-size:.8125rem}
  .lyric-line.is-active{font-size:.9375rem}
}