/* 移动端曲目详情页样式 */
body.mobile-app .m-track-detail-page{
    padding: 12px;
}
body.mobile-app .mtd-card{
    border:1px solid var(--app-border);
    border-radius:16px;
    background:linear-gradient(180deg, rgba(19,27,41,.92), rgba(15,22,36,.92));
    box-shadow:0 10px 28px rgba(2,6,23,.28);
}
body.mobile-app .mtd-hero{
    padding:14px;
}
body.mobile-app .mtd-cover{
    width:100%;
    aspect-ratio:1/1;
    border-radius:14px;
    overflow:hidden;
    border:1px solid rgba(148,163,184,.26);
    margin-bottom:12px;
}
body.mobile-app .mtd-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
body.mobile-app .mtd-title{
    margin:0;
    color:var(--app-text-primary);
    font-size:20px;
    line-height:1.35;
    font-weight:800;
    word-break:break-word;
    overflow-wrap:anywhere;
}
body.mobile-app .mtd-artist{
    margin:6px 0 0;
    color:var(--app-text-secondary);
    font-size:14px;
}
body.mobile-app .mtd-tags{
    margin-top:10px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
body.mobile-app .mtd-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:26px;
    padding:0 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    border:1px solid rgba(255,255,255,.14);
    color:var(--app-text-secondary);
    background:rgba(255,255,255,.06);
}
body.mobile-app .mtd-tag.price{
    color:#ff8a80;
    border-color:rgba(255,138,128,.35);
    background:rgba(255,138,128,.12);
}
body.mobile-app .mtd-actions{
    margin-top:12px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}
body.mobile-app .mtd-actions .m-button{
    width:100%;
    min-width:0;
    height:42px;
    border-radius:12px;
    padding:0 10px;
    font-size:14px;
    font-weight:700;
}
body.mobile-app .mtd-actions .m-button.primary{
    grid-column:1 / -1;
}
body.mobile-app .mtd-meta{
    margin-top:14px;
    padding:12px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}
body.mobile-app .mtd-meta-item{
    min-width:0;
    border:1px solid rgba(148,163,184,.16);
    border-radius:10px;
    background:rgba(12,20,38,.56);
    padding:10px;
}
body.mobile-app .mtd-meta-item.full{
    grid-column:1 / -1;
}
body.mobile-app .mtd-meta-label{
    color:var(--app-text-muted);
    font-size:11px;
    line-height:1.2;
}
body.mobile-app .mtd-meta-value{
    color:var(--app-text-primary);
    font-size:15px;
    line-height:1.3;
    font-weight:700;
    margin-top:4px;
    word-break:break-word;
    overflow-wrap:anywhere;
}
body.mobile-app .mtd-section-title{
    margin:18px 2px 10px;
    font-size:20px;
    line-height:1.2;
    font-weight:800;
    color:var(--app-text-primary);
}
body.mobile-app .mtd-related-list{
    display:grid;
    gap:8px;
}
body.mobile-app .mtd-related-item{
    display:grid;
    grid-template-columns:56px 1fr auto;
    gap:10px;
    align-items:center;
    padding:9px;
    min-width:0;
    text-decoration:none;
    color:inherit;
}
body.mobile-app .mtd-related-cover{
    width:56px;
    height:56px;
    border-radius:10px;
    overflow:hidden;
    border:1px solid rgba(148,163,184,.2);
}
body.mobile-app .mtd-related-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
body.mobile-app .mtd-related-body{
    min-width:0;
}
body.mobile-app .mtd-related-title{
    color:var(--app-text-primary);
    font-size:16px;
    line-height:1.3;
    font-weight:700;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    word-break:break-word;
    overflow-wrap:anywhere;
}
body.mobile-app .mtd-related-artist{
    margin-top:4px;
    color:var(--app-text-secondary);
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
body.mobile-app .mtd-related-price{
    justify-self:end;
    white-space:nowrap;
    height:24px;
    padding:0 8px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    font-size:12px;
    font-weight:700;
    border:1px solid rgba(255,255,255,.14);
    color:#a7f3d0;
    background:rgba(22,163,74,.18);
}
body.mobile-app .mtd-related-actions{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:8px;
}
@media (max-width: 360px){
    body.mobile-app .mtd-actions{
        grid-template-columns:1fr;
    }
    body.mobile-app .mtd-actions .m-button.primary{
        grid-column:auto;
    }
    body.mobile-app .mtd-meta{
        grid-template-columns:1fr;
    }
}

