:root{
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --shadow: 0 16px 40px rgba(0,0,0,.35);
  --shadow2: 0 10px 24px rgba(0,0,0,.28);
  --radius: 18px;
  --radius2: 14px;
  --ring: 0 0 0 3px rgba(255,255,255,.14);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "PingFang SC","Hiragino Sans GB","Microsoft YaHei", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(99,102,241,.35), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(16,185,129,.28), transparent 55%),
    radial-gradient(800px 600px at 70% 90%, rgba(245,158,11,.22), transparent 55%),
    linear-gradient(180deg, #070b14 0%, #0b1220 45%, #070b14 100%);
  overflow-x:hidden;
}
.container{
  width: min(1040px, calc(100% - 32px));
  margin: 22px auto 56px;
}
/* 顶部按钮组 */
.top-actions{
  position: relative;
  z-index: 6;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

/* 返回按钮 */
.back-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight: 750;
  letter-spacing:.2px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  user-select:none;
}
.back-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
  filter: brightness(1.04);
}
.back-btn:focus{outline:none; box-shadow: var(--shadow2), var(--ring);}

/* 歌单广场按钮 */
.back{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight: 750;
  letter-spacing:.2px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  user-select:none;
}
.back:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
  filter: brightness(1.04);
}
.back:focus{outline:none; box-shadow: var(--shadow2), var(--ring);}

/* 标题 */
.hero-title{
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display:flex;
  align-items:flex-end;
  z-index: 5;
}
.hero h1{
  margin:0;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height:1.15;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* 主体卡片 */
.song-detail{
  margin-top: -10px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(15,23,42,.96), rgba(15,23,42,.90));
  border: 1px solid rgba(148,163,184,.35);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow2);
  padding: 22px;
  position: relative;
  z-index: 2;
}

/* 信息区 */
.song-info{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(148,163,184,.35);
}
.song-info p{
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}
.song-info strong{color: var(--text)}

/* 播放器卡片 */
.player-card{
  margin-top: 16px;
  padding: 14px;
  border-radius: var(--radius2);
  background: radial-gradient(circle at 0 0, rgba(59,130,246,.20), transparent 60%),
              radial-gradient(circle at 100% 100%, rgba(16,185,129,.18), transparent 55%),
              rgba(15,23,42,.96);
  border: 1px solid rgba(148,163,184,.45);
  box-shadow: 0 14px 36px rgba(15,23,42,.95);
}

/* 平台按钮 */
.button-container{
  display:flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.btn{
  flex: 1 1 220px;
  padding: 12px 14px;
  text-decoration:none;
  font-weight: 750;
  letter-spacing: .2px;
  border-radius: 14px;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(148,163,184,.55);
  background: radial-gradient(circle at 0 0, rgba(255,255,255,.16), transparent 55%),
              rgba(15,23,42,.96);
  box-shadow: 0 12px 28px rgba(15,23,42,.95);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 44px;
  user-select:none;
}
.btn:focus{outline:none; box-shadow: var(--shadow2), var(--ring);}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15,23,42,1);
  filter: brightness(1.04);
}
.btn-qq{
  background: radial-gradient(circle at 0 0, rgba(191,219,254,.24), transparent 55%),
              linear-gradient(135deg, #0ea5e9,#2563eb);
}
.btn-netease{
  background: radial-gradient(circle at 0 0, rgba(254,202,202,.24), transparent 55%),
              linear-gradient(135deg, #ef4444,#f97316);
}
.btn-youtube{
  background: radial-gradient(circle at 0 0, rgba(254,202,202,.24), transparent 55%),
              linear-gradient(135deg, #dc2626,#fb7185);
}
.btn-invalid{
  background: rgba(15,23,42,.82) !important;
  color: rgba(148,163,184,.65) !important;
  border-color: rgba(148,163,184,.45) !important;
  box-shadow: none !important;
  transform:none !important;
  pointer-events:none;
  filter: grayscale(1);
  opacity:.9;
}

/* B站视频 */
.bilibili-player{
  margin-top: 18px;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(148,163,184,.45);
  box-shadow: 0 18px 40px rgba(15,23,42,1);
  background: radial-gradient(circle at 0 0, rgba(59,130,246,.24), transparent 55%),
              #020617;
}
.bilibili-player .ratio{
  position: relative;
  width:100%;
  padding-top: 56.25%;
}
.bilibili-player iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* 小屏优化 */
@media (max-width: 520px){
  .song-detail{padding: 16px}
  .btn{flex-basis: 100%}
  .hero-inner{padding: 14px 14px 0}
  .hero-title{left:14px; right:14px; bottom:14px}
}

/* ================== 自定义音频播放器 ================== */
.custom-player audio{display:none;}
.player-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.play-btn{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(248,250,252,.85);
  background: radial-gradient(circle at 30% 20%, #fecaca,#f97373);
  color: #111827;
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 12px 28px rgba(15,23,42,1);
  backdrop-filter: blur(12px);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
  user-select:none;
}
.play-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 16px 40px rgba(15,23,42,1);
}
.play-btn:active{transform: translateY(0);}
.play-btn:focus{outline:none; box-shadow: var(--shadow2), var(--ring);}

.time{
  color: rgba(226,232,240,.92);
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
}
.time .sep{opacity:.5; margin:0 6px;}

.progress-wrap{
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: rgba(15,23,42,.92);
  border: 1px solid rgba(148,163,184,.55);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(148,163,184,.28);
}
.progress-fill{
  position:absolute;
  inset:0;
  width:0%;
  background: linear-gradient(90deg,#22c55e,#a3e635,#facc15);
}
.progress{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
}
.progress::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width: 18px;
  height: 18px;
  border-radius:999px;
  background: rgba(248,250,252,.98);
  border: 3px solid rgba(15,23,42,1);
  box-shadow: 0 10px 24px rgba(15,23,42,1);
  transform: translateY(-2px);
}
.progress::-webkit-slider-runnable-track{height: 14px; background: transparent;}
.progress::-moz-range-thumb{
  width: 18px; height: 18px; border-radius:999px;
  background: rgba(248,250,252,.98);
  border: 3px solid rgba(15,23,42,1);
  box-shadow: 0 10px 24px rgba(15,23,42,1);
}
.progress::-moz-range-track{height: 14px; background: transparent; border: none;}

/* ================== 评论区（去空白 & 不刷新配合AJAX） ================== */
.comment-section{
  margin-top: 22px;
  padding: 14px 14px 8px;
  border-radius: var(--radius2);
  background:
    radial-gradient(circle at 0 0, rgba(59,130,246,.22), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(248,113,113,.22), transparent 55%),
    rgba(15,23,42,.96);
  border: 1px solid rgba(148,163,184,.55);
  box-shadow: 0 14px 40px rgba(15,23,42,1);
}
.comment-section h2{
  margin:0 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing:.2px;
  color: var(--text);
  display:flex;
  align-items:center;
  gap:6px;
}
.comment-section h2 span{
  font-size:.78rem;
  color: var(--muted);
}

.comment-form{
  padding-bottom:10px;
  border-bottom:1px solid rgba(148,163,184,.45);
  margin-bottom:8px;
}
.comment-form textarea{
  width:100%;
  padding: 9px 11px;
  border-radius: 10px;
  border:1px solid rgba(148,163,184,.7);
  background: rgba(15,23,42,.92);
  color: var(--text);
  font-size:.88rem;
  resize:vertical;
  min-height:72px;
  outline:none;
}
.comment-form textarea::placeholder{ color: rgba(148,163,184,.85); }

.comment-submit{
  margin-top:6px;
  padding: 6px 18px;
  border-radius:999px;
  border:1px solid rgba(248,113,113,.95);
  background: linear-gradient(135deg,#f97373,#fb7185);
  color:#0b1120;
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
  float:right;
  box-shadow: 0 10px 26px rgba(15,23,42,1);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.comment-submit:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 14px 34px rgba(15,23,42,1);
}
.comment-submit:focus{outline:none; box-shadow: var(--shadow2), var(--ring);}

.comment-error{
  margin-top:4px;
  font-size:.78rem;
  color:#fecaca;
}
.comment-login-tip,
.no-comment{
  font-size:.85rem;
  color: var(--muted);
}

.comment-list{
  display:flex;
  flex-direction:column;
}

.comment-item{
  display:flex;
  padding: 10px 2px;
  border-bottom:1px solid rgba(148,163,184,.22);
}
.comment-item:last-child{ border-bottom:none; }

.comment-avatar-wrap{ flex-shrink:0; margin-right:10px; }
.comment-avatar,
.default-avatar{
  width:40px; height:40px;
  border-radius:50%;
  object-fit:cover;
  background: radial-gradient(circle at 30% 20%, rgba(248,250,252,.24), rgba(15,23,42,1));
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; font-weight:700;
  color: rgba(248,250,252,.92);
  box-shadow: 0 10px 26px rgba(15,23,42,1);
}

.comment-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.comment-row-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.comment-meta-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.comment-author{
  font-size:.9rem;
  font-weight:600;
  color: rgba(96,165,250,1);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.comment-meta-right{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}

.comment-del-form{margin:0;}
.comment-del-link{
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:.78rem;
  color: rgba(248,250,252,.75);
  padding:0 4px;
}
.comment-del-link:hover{ color: rgba(252,165,165,1); }

.icon-btn{
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:.9rem;
  padding:0 3px;
  color: rgba(148,163,184,.9);
}
.icon-btn:hover{ color: rgba(248,250,252,1); }

/* 关键：正文别用 pre-wrap（避免吃到模板缩进/空白），换行由 nl2br 负责 */
.comment-row-content{
  margin-top:4px;
  font-size:.9rem;
  line-height:1.6;
  color: var(--text);
  white-space: normal;
}
.comment-row-bottom{ margin-top:3px; }
.comment-date{ font-size:.78rem; color: rgba(148,163,184,.9); }

@media (max-width:520px){
  .comment-section{ padding: 12px 10px 6px; }
  .comment-item{ padding:8px 0; }
}