.song-detail{
max-width:900px;
margin:40px auto;
padding:0 20px;
}
.song-detail .song-box{
background:var(--tsr-surface);
border:1px solid var(--tsr-border);
box-shadow:var(--tsr-shadow);
border-radius:var(--tsr-radius);
padding:30px;
color:var(--tsr-text);
}
.song-detail .song-title{
margin:0 0 10px;
color:var(--tsr-text);
}
.song-detail .song-charts{
margin:10px 0 18px 0;
}
.chart-icon{
display:inline-block;
padding:5px 10px;
margin-right:6px;
margin-bottom:6px;
font-size:0.8rem;
border-radius:20px;
font-weight:600;
white-space:nowrap;
background:rgba(255,255,255,0.08);
color:var(--tsr-text);
border:1px solid rgba(255,255,255,0.14);
}
.chart-icon.brd{
background:rgba(255,130,130,0.12);
color:rgba(255,255,255,0.92);
}
.chart-icon.usa{
background:rgba(120,170,255,0.12);
color:rgba(255,255,255,0.92);
}
.chart-icon.nr1{
border:1px solid rgba(0,0,0,0.15);
}
.song-detail .song-meta{
display:flex;
flex-wrap:wrap;
gap:10px 12px;
margin:18px 0 10px;
font-size:0.95rem;
}
.song-detail .song-meta span{
background:var(--tsr-surface-2);
border:1px solid rgba(255,255,255,0.10);
color:var(--tsr-text);
padding:8px 10px;
border-radius:12px;
}
.song-detail .song-meta strong{
color:var(--tsr-muted);
font-weight:650;
}
.song-detail .song-description{
margin-top:18px;
color:var(--tsr-muted);
line-height:1.65;
}
.song-detail .song-spotify{
margin-top:22px;
}
.song-detail .song-spotify a{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 16px;
border-radius:999px;
text-decoration:none;
font-weight:650;
box-shadow:0 10px 25px rgba(0,0,0,0.22);
}
.song-spotify-embed{
margin-top:25px;
}
.song-spotify-embed iframe{
max-width:100%;
}
.song-report{
margin-top:22px;
}
.song-report-btn{
cursor:pointer;
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 14px;
border-radius:999px;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.12);
font-weight:650;
}
.song-report-form{
margin-top:12px;
padding:14px;
border-radius:16px;
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.10);
}
.song-report-form textarea{
width:100%;
margin-top:8px;
padding:10px 12px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.12);
background:rgba(0,0,0,0.18);
color:inherit;
}
.song-report-form button{
margin-top:10px;
padding:10px 14px;
border-radius:12px;
border:0;
cursor:pointer;
font-weight:650;
}
.song-report-success{
margin-top:14px;
padding:10px 12px;
border-radius:12px;
background:rgba(40,180,99,0.16);
border:1px solid rgba(40,180,99,0.25);
}
.song-box{
position:relative;
}
.song-like-badge{
position:absolute;
top:18px;
right:18px;
padding:10px 16px 12px;
border-radius:16px;
background:rgba(0,0,0,0.35);
border:1px solid rgba(255,255,255,0.12);
backdrop-filter:blur(6px);
text-align:center;
min-width:110px;
cursor:pointer;
user-select:none;
transition:transform 120ms ease,background 120ms ease,border-color 120ms ease;
}
.song-like-badge:hover{
transform:translateY(-1px);
background:rgba(0,0,0,0.45);
border-color:rgba(255,255,255,0.22);
}
.song-like-badge:active{
transform:translateY(0px) scale(0.99);
}
.song-like-main{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}
.song-like-heart{
font-size:20px;
line-height:1;
color:#ff4fa0;
}
.song-like-count{
font-weight:700;
font-size:18px;
color:#fff;
}
.song-like-limit{
margin-top:4px;
font-size:12px;
opacity:0.7;
color:#fff;
}
.song-tipbox{
margin-top:14px;
padding:14px 16px;
border-radius:14px;
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.12);
display:flex;
gap:12px;
align-items:flex-start;
}
.song-tipbox-icon{
font-size:18px;
line-height:1;
margin-top:2px;
opacity:0.95;
}
.song-tipbox-title{
font-weight:700;
margin-bottom:4px;
color:#fff;
}
.song-tipbox-text{
font-size:14px;
line-height:1.45;
opacity:0.9;
color:#fff;
}
.song-tipbox-actions{
  margin-top:10px;
}
.song-tipbox-btn{
  display:inline-block;
  text-decoration:none;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:#fff;
  padding:9px 12px;
  border-radius:12px;
  font-size:14px;
  transition:transform 120ms ease,background 120ms ease,border-color 120ms ease,opacity 120ms ease;
}
.song-tipbox-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.10);
  border-color:rgba(255,255,255,0.22);
}
.song-tipbox-btn:active{
  transform:translateY(0) scale(0.99);
}
.song-actions-row{
margin-top:12px;
display:flex;
justify-content:flex-end;
}
.song-actions-right{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.song-share-btn{
appearance:none;
border:1px solid rgba(255,255,255,0.14);
background:rgba(255,255,255,0.06);
color:#fff;
padding:9px 12px;
border-radius:12px;
font-size:14px;
cursor:pointer;
user-select:none;
text-decoration:none;
transition:transform 120ms ease,background 120ms ease,border-color 120ms ease,opacity 120ms ease;
}
.song-share-btn:hover{
transform:translateY(-1px);
background:rgba(255,255,255,0.10);
border-color:rgba(255,255,255,0.22);
}
.song-share-btn:active{
transform:translateY(0) scale(0.99);
}
.song-share-btn.is-disabled{
opacity:0.55;
pointer-events:none;
}
.song-share-msg{
font-size:13px;
opacity:0.85;
margin-left:6px;
}
@media (max-width: 520px){
.song-like-badge{
position:static;
margin:10px 0 0 auto;
display:inline-block;
min-width:110px;
}
.song-title{
padding-right:0;
}
}