/* Song detail page styles. Shared primitives live in base/header/components. */
:root{
    --song-bg-main:#050007;
    --song-panel:rgba(12,0,20,.88);
    --song-panel-2:rgba(18,5,32,.90);
    --song-line:rgba(255,255,255,.11);
    --song-cyan:#22e7ff;
    --song-pink:#f91fb0;
    --song-muted:#c8b9ff;
}

body.song-bg{
    background:
        linear-gradient(90deg, rgba(0,0,0,.92), rgba(0,0,0,.34), rgba(0,0,0,.92)),
        radial-gradient(circle at 18% -10%, rgba(249,31,176,.24), transparent 32%),
        radial-gradient(circle at 88% 4%, rgba(34,231,255,.13), transparent 30%),
        var(--song-bg, none),
        linear-gradient(180deg,#050007 0%,#100018 46%,#020006 100%);
    background-size:auto, auto, auto, cover, auto;
    background-position:center;
    background-attachment:fixed;
    color:#fff;
}

.is-hidden{
    display:none !important;
}

.wrapper.song-wallpaper{
    width:min(1320px, calc(100vw - 36px));
    max-width:none;
    margin:0 auto;
    padding:38px 0 68px;
}

.song-header.song-hero{
    position:relative;
    display:grid;
    grid-template-columns:minmax(260px,320px) minmax(0,1fr);
    gap:28px;
    align-items:start;
    padding:26px;
    border-radius:8px;
    overflow:hidden;
    background:
        linear-gradient(135deg, rgba(0,0,0,.72), rgba(14,2,28,.84)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 84px);
    border:1px solid rgba(34,231,255,.22);
    box-shadow:0 28px 90px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.06);
}

.song-header.song-hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(90deg, rgba(249,31,176,.18), transparent 42%),
        linear-gradient(180deg, rgba(34,231,255,.08), transparent 40%);
}

.song-header.song-hero > *{
    position:relative;
    z-index:1;
}

.song-header .cover{
    width:100%;
    padding:12px;
    border-radius:8px;
    border:1px solid rgba(249,31,176,.46);
    background:linear-gradient(145deg, rgba(255,255,255,.10), rgba(0,0,0,.40));
    box-shadow:0 20px 56px rgba(249,31,176,.26), 0 18px 55px rgba(0,0,0,.72);
}

.song-header .cover img{
    width:100%;
    display:block;
    aspect-ratio:1 / 1;
    object-fit:cover;
    border-radius:6px;
    cursor:zoom-in;
}

.image-rights-note{
    margin:12px 0 0;
    padding:10px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.30);
    color:#d8cdf4;
    font-size:12px;
    line-height:1.4;
}

.image-rights-note a{
    color:var(--song-cyan);
    font-weight:900;
}

.badge.badge-toggle{
    width:100%;
    min-height:42px;
    margin-top:12px;
    justify-content:center;
    border-radius:8px;
    background:rgba(0,0,0,.28);
    color:#fff;
    font-weight:900;
    cursor:pointer;
}

.song-header .info{
    min-width:0;
}

.song-kicker{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
    color:var(--song-cyan);
    font-size:12px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.song-kicker-line{
    width:38px;
    height:2px;
    background:linear-gradient(90deg,var(--song-cyan),var(--song-pink));
    box-shadow:0 0 14px rgba(34,231,255,.52);
}

.song-header .title{
    max-width:860px;
    margin:0;
    color:#fff;
    font-family:var(--font-display);
    font-size:clamp(38px,5vw,72px);
    line-height:.95;
    letter-spacing:0;
    text-wrap:balance;
    text-shadow:0 0 24px rgba(249,31,176,.40);
}

.song-header .artist{
    margin-top:12px;
    color:#e9defd;
    font-size:clamp(18px,2vw,25px);
    font-weight:700;
}

.song-header .artist a{
    color:inherit;
    text-decoration:none;
    border-bottom:1px solid rgba(34,231,255,.45);
}

.song-intro{
    max-width:760px;
    margin:14px 0 0;
    color:var(--song-muted);
    font-size:14px;
    line-height:1.6;
}

.song-artist-links{
    margin-top:12px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

.song-artist-links span{
    color:var(--song-muted);
    font-size:12px;
    font-weight:850;
    text-transform:uppercase;
}

.song-artist-chip,
.song-jumpbar a,
.badge{
    min-height:32px;
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(34,231,255,.24);
    background:rgba(0,0,0,.28);
    color:#fff;
    font-size:12px;
    font-weight:900;
    text-decoration:none;
}

.song-intro{
    max-width:790px;
    margin:14px 0 0;
    color:#d6c8ee;
    font-size:15px;
    line-height:1.55;
}

.badges{
    margin-top:16px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.song-signal-grid{
    margin-top:18px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.song-signal{
    min-height:74px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    padding:12px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.28);
}

.song-signal span,
.song-people-signal span{
    color:var(--song-muted);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-weight:850;
}

.song-signal strong{
    color:#fff;
    font-size:18px;
    line-height:1.15;
    overflow-wrap:anywhere;
}

.song-signal--wide{
    grid-column:span 2;
}

.song-people-signal{
    margin-top:14px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.song-people-signal span{
    min-height:30px;
    display:inline-flex;
    align-items:center;
    padding:0 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.28);
    color:#fff;
}

.release-pro,
.section{
    margin-top:24px;
    padding:22px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.11);
    background:
        radial-gradient(circle at 100% 0%, rgba(34,231,255,.06), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        var(--song-panel);
    box-shadow:0 16px 44px rgba(0,0,0,.48);
}

#vinyl-details{
    display:none;
    margin-top:22px;
}

#vinyl-details.is-open{
    display:grid;
    gap:16px;
}

#vinyl-details .section{
    margin-top:0;
    background:
        radial-gradient(circle at 100% 0%, rgba(34,231,255,.08), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.018)),
        rgba(5,7,18,.90);
}

#vinyl-details h2{
    margin:0 0 14px;
    font-family:var(--font-display);
    font-size:24px;
    line-height:1.1;
}

#vinyl-details .data-table,
#vinyl-details .id-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 8px;
}

#vinyl-details .data-table td,
#vinyl-details .id-table td{
    padding:10px 12px;
    vertical-align:top;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
    background:rgba(0,0,0,.22);
}

#vinyl-details .data-table td:first-child,
#vinyl-details .id-table td:first-child{
    width:160px;
    border-left:1px solid rgba(255,255,255,.08);
    border-radius:8px 0 0 8px;
    color:#aeefff;
    font-size:12px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.06em;
}

#vinyl-details .data-table td:last-child,
#vinyl-details .id-table td:last-child{
    border-right:1px solid rgba(255,255,255,.08);
    border-radius:0 8px 8px 0;
    color:#fff;
}

.video-message,
.video-retry-note{
    margin:0;
    padding:12px;
    color:var(--text-muted);
    font-size:13px;
    line-height:1.45;
}

.video-retry-note{
    padding:8px 12px;
    font-size:12px;
}

.video-fallback{
    min-height:260px;
    height:100%;
    display:grid;
    place-items:center;
    padding:22px;
    text-align:center;
}

.video-fallback strong,
.video-fallback span{
    display:block;
}

.video-fallback strong{
    margin-bottom:8px;
    color:#fff;
}

.video-fallback span{
    color:var(--text-muted);
    font-size:13px;
    line-height:1.45;
}

.video-fallback .video-open-link{
    margin-top:14px;
}

.video-wrapper-tracklist{
    margin-top:0;
    padding-bottom:56.25%;
}

.release-hero{
    display:grid;
    grid-template-columns:96px minmax(0,1fr);
    gap:14px;
    align-items:center;
}

.release-cover img{
    width:96px;
    height:96px;
    object-fit:cover;
    border-radius:8px;
}

.release-kicker,
.rating-eyebrow,
.icon-group-title{
    color:var(--song-cyan);
    font-size:12px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.release-title{
    margin-top:4px;
    font-family:var(--font-display);
    font-size:22px;
    line-height:1.1;
}

.release-meta,
.release-status{
    color:var(--song-muted);
    font-size:13px;
}

.release-actions{
    margin-top:12px;
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}

.btn-release,
.comment-button,
.video-open-link{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 16px;
    border-radius:8px;
    border:0;
    background:linear-gradient(135deg,#f64ac7 0%,#ff75df 42%,#22e7ff 100%);
    color:#07000d;
    font-weight:950;
    text-decoration:none;
    cursor:pointer;
}

.release-player{
    margin-top:16px;
    border-radius:8px;
    overflow:hidden;
    border:1px solid rgba(249,31,176,.28);
    background:#000;
}

.release-player-idle{
    min-height:64px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:14px 16px;
    border-radius:8px;
    background:
        linear-gradient(135deg, rgba(34,231,255,.08), rgba(249,31,176,.07)),
        rgba(0,0,0,.30);
    color:#fff;
}

.release-idle-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid rgba(34,231,255,.34);
    background:rgba(34,231,255,.10);
    color:#dffbff;
    font-size:15px;
}

.release-idle-icon::before{
    content:"\25B6";
    width:18px;
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left:2px;
    color:#dffbff;
    font-size:15px;
    line-height:1;
    filter:drop-shadow(0 0 6px rgba(34,231,255,.45));
}

.release-idle-icon .tr-ui-icon,
.release-idle-icon svg{
    width:17px;
    height:17px;
    display:block;
    transform:translateX(1px);
}

.release-player-idle .release-idle-copy,
.release-player-idle .release-idle-copy strong,
.release-player-idle .release-idle-copy span{
    display:block;
}

.release-player-idle .release-idle-copy strong{
    font-size:15px;
    line-height:1.2;
}

.release-player-idle .release-idle-copy span{
    margin-top:3px;
    color:var(--song-muted);
    font-size:13px;
    line-height:1.35;
}

.section-video h2{
    margin-bottom:14px;
}

.video-head-card{
    margin:0 0 16px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:16px;
    border-radius:8px;
    border:1px solid rgba(34,231,255,.20);
    background:
        radial-gradient(circle at 8% 50%, rgba(249,31,176,.16), transparent 32%),
        linear-gradient(135deg, rgba(34,231,255,.10), rgba(249,31,176,.07)),
        rgba(0,0,0,.30);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.section-video .temazo-pill,
.section-lyrics .temazo-pill{
    margin:0 0 16px;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr);
    gap:14px;
    align-items:center;
    width:100%;
    max-width:none;
    padding:16px;
    border-radius:8px;
    border:1px solid rgba(34,231,255,.20);
    background:
        radial-gradient(circle at 8% 50%, rgba(249,31,176,.16), transparent 32%),
        linear-gradient(135deg, rgba(34,231,255,.10), rgba(249,31,176,.07)),
        rgba(0,0,0,.30);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.section-video .temazo-pill-ico,
.section-lyrics .temazo-pill-ico{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid rgba(249,31,176,.55);
    background:rgba(0,0,0,.46);
    color:#fff;
    box-shadow:0 0 18px rgba(249,31,176,.32);
}

.section-video .temazo-pill-ico img,
.section-lyrics .temazo-pill-ico img{
    width:20px !important;
    height:20px !important;
    object-fit:contain;
}

.section-video .temazo-pill-txt,
.section-lyrics .temazo-pill-txt{
    min-width:0;
}

.section-video .temazo-label,
.section-lyrics .temazo-label{
    display:block;
    margin-bottom:5px;
    color:var(--song-cyan);
    font-size:11px;
    font-weight:950;
    letter-spacing:.10em;
    text-transform:uppercase;
}

.section-video .temazo-pill strong,
.section-lyrics .temazo-pill strong{
    display:block;
    color:#fff;
    font-size:18px;
    line-height:1.25;
    overflow-wrap:anywhere;
}


.video-head-icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid rgba(249,31,176,.55);
    background:rgba(0,0,0,.46);
    color:#fff;
    box-shadow:0 0 18px rgba(249,31,176,.32);
}

.video-head-icon .tr-ui-icon,
.video-head-icon .tr-action-symbol,
.video-head-icon svg{
    width:20px !important;
    height:20px !important;
}

.video-head-copy{
    min-width:0;
}

.video-head-kicker{
    display:block;
    margin-bottom:5px;
    color:var(--song-cyan);
    font-size:11px;
    font-weight:950;
    letter-spacing:.10em;
    text-transform:uppercase;
}

.video-head-copy strong{
    display:block;
    max-width:100%;
    color:#fff;
    font-size:18px;
    line-height:1.25;
    overflow-wrap:anywhere;
}

.video-head-status{
    min-height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 12px;
    border-radius:999px;
    border:1px solid rgba(34,231,255,.28);
    background:rgba(34,231,255,.08);
    color:#dffbff;
    font-size:11px;
    font-weight:950;
    letter-spacing:.04em;
    text-transform:uppercase;
}

@media (max-width:720px){
    .video-head-card{
        grid-template-columns:auto minmax(0,1fr);
    }

    .video-head-status{
        grid-column:2;
        justify-self:start;
    }
}

.release-tracklist{
    margin-top:14px;
    display:grid;
    gap:8px;
}

.rel-trk{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:10px 12px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.25);
}

.rel-trk.is-active{
    border-color:rgba(34,231,255,.55);
    box-shadow:0 0 22px rgba(34,231,255,.12);
}

.rel-trk-left,
.rel-trk-right{
    display:flex;
    gap:10px;
    align-items:center;
}

.rel-t{
    color:#fff;
    font-weight:850;
}

.rel-n{
    color:#bfb3df;
    font-weight:900;
}

.track-fav-btn,
.rel-play{
    min-height:34px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.05);
    color:#fff;
    font-weight:850;
    cursor:pointer;
}

.rel-play{
    width:38px;
}

.trk-modal-backdrop{
    position:fixed;
    inset:0;
    z-index:10020;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.78);
    backdrop-filter:blur(10px);
}

.trk-modal{
    width:min(720px, 100%);
    max-height:min(760px, calc(100vh - 40px));
    overflow:auto;
    padding:18px;
    border-radius:8px;
    border:1px solid rgba(249,31,176,.38);
    background:
        radial-gradient(circle at 100% 0%, rgba(34,231,255,.10), transparent 34%),
        linear-gradient(180deg, rgba(20,8,34,.98), rgba(5,0,8,.98));
    box-shadow:0 26px 90px rgba(0,0,0,.76), 0 0 38px rgba(249,31,176,.16);
}

.trk-modal-head{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
    margin-bottom:14px;
    padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.10);
}

.trk-modal-title{
    margin:0;
    font-family:var(--font-display);
    font-size:24px;
    line-height:1.05;
}

.trk-modal-sub{
    margin-top:4px;
    color:var(--song-muted);
    font-size:13px;
}

.trk-modal-close{
    min-height:36px;
    padding:0 12px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    color:#fff;
    font-weight:900;
    cursor:pointer;
}

.trk-modal-list{
    display:grid;
    gap:8px;
}

.song-jumpbar{
    margin-top:16px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.song-participation-callout{
    margin-top:18px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:16px;
    border-radius:8px;
    border:1px solid rgba(249,31,176,.28);
    background:linear-gradient(135deg, rgba(249,31,176,.14), rgba(34,231,255,.07));
}

.song-participation-callout strong,
.song-participation-callout span{
    display:block;
}

.song-participation-callout span{
    color:var(--song-muted);
    margin-top:4px;
}

.icon-actions{
    margin-top:18px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.icon-group{
    padding:16px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.22);
}

.icon-row{
    margin-top:12px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.icon-row-share{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.icon-btn{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#fff;
    text-decoration:none;
    cursor:pointer;
}

.icon-btn[disabled]{
    cursor:default;
    opacity:.92;
}

.icon-btn-form,
.inline-action-form{
    display:inline-flex;
}

.icon-btn-submit{
    border:0;
    background:none;
    padding:0;
    font:inherit;
}

.icon-circle{
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid rgba(249,31,176,.72);
    background:#050007;
    box-shadow:0 0 24px rgba(249,31,176,.42);
}

.icon-circle .tr-ui-icon,
.icon-circle svg{
    width:25px;
    height:25px;
}

.icon-label{
    color:#fff;
    font-size:13px;
    font-weight:900;
    line-height:1.15;
    text-align:center;
}

.icon-btn-active .icon-circle{
    border-color:rgba(34,231,255,.80);
    box-shadow:0 0 24px rgba(34,231,255,.34);
}

.video-wrapper,
#video-autosearch{
    position:relative;
    min-height:300px;
    border-radius:8px;
    overflow:hidden;
    background:#000;
    border:1px solid rgba(249,31,176,.28);
}

.vinyl-tracklist-title{
    margin:22px 0 0;
    color:#ff5fd0;
    font-family:var(--font-display);
    font-size:22px;
    line-height:1.1;
}

.vinyl-tracklist-list{
    list-style:none;
    padding:0;
    margin:8px 0 0;
    color:#d9c7ff;
    font-size:13px;
}

.vinyl-tracklist-list li{
    padding:3px 0;
}

.video-wrapper iframe,
#video-autosearch iframe,
#main-yt-player,
#yt-player{
    width:100%;
    aspect-ratio:16 / 9;
    min-height:300px;
    display:block;
}

.video-status-text{
    padding:12px;
    color:var(--song-muted);
    font-size:13px;
}

.lyrics-box,
.comment-text,
.comment-textarea{
    border-radius:8px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.28);
}

.rating-panel{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:16px;
    align-items:center;
    padding:16px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.035);
}

.rating-score{
    color:#ff5fd0;
    font-size:24px;
    letter-spacing:2px;
}

.rating-meta,
.rating-login,
.comment-login-hint,
.comment-empty{
    color:var(--song-muted);
}

.rating-form{
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:flex-end;
}

.rating-help{
    color:#d8ccf1;
    font-size:12px;
    font-weight:850;
}

.star-picker{
    display:flex;
    flex-direction:row;
    gap:7px;
    padding:7px;
    border-radius:999px;
    border:1px solid rgba(249,31,176,.24);
    background:rgba(0,0,0,.28);
}

.star-button{
    width:42px;
    min-height:42px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    border-radius:8px;
    border:0;
    background:transparent;
    color:#bfb3df;
    font-size:22px;
    cursor:pointer;
    font-family:inherit;
    transition:background .14s ease, color .14s ease, transform .14s ease;
}

.star-glyph{
    line-height:1;
}

.star-number{
    color:#8f83ad;
    font-size:10px;
    font-weight:950;
    line-height:1;
}

.star-button.is-active,
.star-button:hover,
.star-button:focus-visible{
    color:#ff5fd0;
    background:rgba(249,31,176,.12);
}

.star-button.is-active .star-number,
.star-button:hover .star-number,
.star-button:focus-visible .star-number{
    color:#fff;
}

.star-button:hover,
.star-button:focus-visible{
    transform:translateY(-1px);
}

.comment-form{
    margin-top:16px;
    padding:16px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.22);
}

.comment-label{
    display:block;
    color:#fff;
    font-weight:900;
    margin-bottom:10px;
}

.comment-prompts{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:10px;
}

.comment-prompts button,
.comment-prompts span{
    min-height:30px;
    display:inline-flex;
    align-items:center;
    padding:0 10px;
    border-radius:999px;
    border:1px solid rgba(34,231,255,.22);
    background:rgba(34,231,255,.07);
    color:#fff;
    font-size:12px;
    font-weight:850;
}

.comment-textarea{
    width:100%;
    min-height:92px;
    padding:12px;
    color:#fff;
    resize:vertical;
}

.comments-list{
    margin-top:16px;
    display:grid;
    gap:10px;
}

.comment-item{
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    gap:12px;
    padding:14px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.24);
}

.comment-avatar{
    width:58px;
    height:58px;
    border-radius:50%;
    overflow:hidden;
    border:1px solid rgba(249,31,176,.65);
    background:#040006;
    cursor:pointer;
}

.comment-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.comment-avatar-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:900;
}

.comment-meta{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}

.comment-author{
    color:#fff;
    font-family:var(--font-display);
    font-weight:850;
    cursor:pointer;
}

.comment-date{
    color:#bfb3df;
    font-size:12px;
}

.comment-rating,
.comment-badges{
    margin-top:6px;
}

.comment-rating{
    color:#ff5fd7;
    font-size:14px;
    margin-bottom:4px;
}

.comment-badges{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.comment-badges span{
    min-height:26px;
    display:inline-flex;
    align-items:center;
    padding:0 8px;
    border-radius:999px;
    background:rgba(249,31,176,.13);
    border:1px solid rgba(249,31,176,.28);
    color:#fff;
    font-size:11px;
    font-weight:850;
}

.comment-text{
    margin-top:8px;
    padding:10px;
    color:#fff;
    line-height:1.5;
}

.comment-rating{
    margin:6px 0 2px;
    color:#ff5fd7;
    font-size:14px;
    letter-spacing:1px;
}

body.song-bg .related-section{
    overflow:hidden;
}

body.song-bg .related-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(152px,1fr));
    gap:12px;
    align-items:stretch;
}

body.song-bg .related-card{
    min-width:0;
    display:grid;
    grid-template-rows:auto 1fr;
    overflow:hidden;
    padding:0;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.11);
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        rgba(0,0,0,.32);
    color:#fff;
    text-decoration:none;
    transform:translateZ(0);
}

body.song-bg .related-card:hover{
    border-color:rgba(34,231,255,.42);
    box-shadow:0 0 22px rgba(34,231,255,.14);
    text-decoration:none;
}

body.song-bg .related-cover-wrap{
    width:100%;
    aspect-ratio:1 / 1;
    overflow:hidden;
    background:#050007;
    border-bottom:1px solid rgba(255,255,255,.08);
}

body.song-bg .related-cover-wrap img{
    width:100%;
    height:100%;
    max-width:none;
    display:block;
    object-fit:cover;
    border-radius:0;
}

body.song-bg .related-info{
    min-height:104px;
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:10px;
}

body.song-bg .related-title{
    color:#fff;
    font-family:var(--font-display);
    font-size:15px;
    font-weight:850;
    line-height:1.15;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

body.song-bg .related-artist{
    color:#cfc3ee;
    font-size:12px;
    line-height:1.25;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

body.song-bg .related-year{
    margin-top:auto;
    width:max-content;
    max-width:100%;
    min-height:22px;
    display:inline-flex;
    align-items:center;
    padding:0 8px;
    border-radius:999px;
    border:1px solid rgba(249,31,176,.30);
    background:rgba(249,31,176,.10);
    color:#fff;
    font-size:11px;
    font-weight:900;
}

.img-lightbox{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(0,0,0,.84);
    z-index:10000;
}

.img-lightbox.is-open{
    display:flex;
}

.img-lightbox-card{
    position:relative;
    max-width:min(980px,96vw);
    max-height:92vh;
}

.img-lightbox-card img{
    max-width:100%;
    max-height:92vh;
    display:block;
    border-radius:8px;
}

.img-lightbox-close{
    position:absolute;
    right:10px;
    top:10px;
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(0,0,0,.62);
    color:#fff;
    cursor:pointer;
}

@media (max-width:940px){
    .song-header.song-hero,
    .icon-actions,
    .song-participation-callout,
    .rating-panel{
        grid-template-columns:1fr;
    }

    .song-header .cover{
        max-width:360px;
        margin:0 auto;
    }

    .song-signal-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .icon-row,
    .icon-row-share{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:620px){
    .wrapper.song-wallpaper{
        width:min(100% - 24px,1320px);
        padding:22px 0 54px;
    }

    .song-header.song-hero,
    .release-pro,
    .section{
        padding:16px;
    }

    .song-header .title{
        font-size:38px;
    }

    .song-signal-grid,
    .release-hero,
    .rel-trk,
    .comment-item{
        grid-template-columns:1fr;
    }

    .song-signal--wide{
        grid-column:span 1;
    }
}

/* Action buttons: help-center inspired, stable icon alignment. */
body.song-bg .icon-actions{
    gap:14px;
}

body.song-bg .icon-group{
    padding:16px;
}

body.song-bg .icon-row,
body.song-bg .icon-row-actions,
body.song-bg .icon-row-share{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

body.song-bg .icon-btn,
body.song-bg .icon-btn-form,
body.song-bg .icon-btn-submit{
    width:100%;
    min-height:58px;
    min-width:0;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    padding:10px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.42);
    color:#fff;
    text-align:left;
    box-shadow:none;
}

body.song-bg .icon-btn:hover,
body.song-bg .icon-btn:focus-visible{
    border-color:rgba(249,31,176,.55);
    background:rgba(249,31,176,.09);
    box-shadow:0 0 18px rgba(249,31,176,.12);
}

body.song-bg .icon-btn-form{
    display:flex !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    margin:0 !important;
}

body.song-bg .icon-btn-form .icon-btn-submit{
    width:100%;
    min-height:58px;
    border:1px solid rgba(255,255,255,.10) !important;
    background:rgba(0,0,0,.42) !important;
    padding:10px !important;
}

body.song-bg .icon-circle{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    margin:0;
    border-radius:50%;
    border:1px solid rgba(34,231,255,.30);
    background:rgba(34,231,255,.12);
    box-shadow:none;
}

body.song-bg .icon-circle .tr-ui-icon,
body.song-bg .icon-circle svg,
body.song-bg .icon-circle > .tr-action-symbol{
    width:18px !important;
    height:18px !important;
    display:block;
    color:#dffbff !important;
    stroke-width:2.15;
}

body.song-bg .icon-label{
    max-width:none;
    margin:0;
    color:#fff;
    font-size:13px;
    font-weight:900;
    line-height:1.15;
    text-align:left;
}

body.song-bg .icon-btn-active{
    border-color:rgba(34,231,255,.46);
    background:rgba(34,231,255,.09);
}

body.song-bg .icon-btn-active .icon-circle{
    border-color:rgba(249,31,176,.72);
    background:rgba(249,31,176,.14);
    box-shadow:0 0 14px rgba(249,31,176,.22);
}

@media (max-width:620px){
    body.song-bg .icon-actions,
    body.song-bg .icon-row,
    body.song-bg .icon-row-actions,
    body.song-bg .icon-row-share{
        grid-template-columns:1fr;
    }
}

/* Tracklist breathing room */
body.song-bg .release-pro{
    padding:26px;
}

body.song-bg .release-hero{
    grid-template-columns:118px minmax(0,1fr);
    gap:20px;
    align-items:center;
    padding:16px;
    border-radius:8px;
    border:1px solid rgba(34,231,255,.18);
    background:rgba(4,12,22,.64);
}

body.song-bg .release-cover img{
    width:118px;
    height:118px;
    display:block;
}

body.song-bg .release-title{
    margin-top:6px;
    font-size:25px;
}

body.song-bg .release-meta{
    margin-top:4px;
}

body.song-bg .release-actions{
    margin-top:16px;
    gap:14px;
}

body.song-bg .release-status{
    padding-left:2px;
}

body.song-bg .release-player{
    margin-top:18px;
    border-color:rgba(34,231,255,.18);
    background:rgba(0,0,0,.24);
}

body.song-bg .release-player:has(.release-player-idle){
    border-color:rgba(255,255,255,.10);
    background:rgba(3,7,16,.62);
}

body.song-bg .release-tracklist{
    margin-top:18px;
    gap:10px;
}

body.song-bg .rel-trk{
    min-height:58px;
    padding:13px 14px;
    gap:16px;
}

body.song-bg .rel-trk-left{
    gap:12px;
}

body.song-bg .rel-t{
    font-size:15px;
    line-height:1.25;
}

body.song-bg .track-fav-btn{
    min-height:36px;
    padding:0 12px;
}

body.song-bg .rel-play{
    width:42px;
    min-height:36px;
}

body.song-bg .trk-ok,
body.song-bg .trk-no,
body.song-bg .trk-wait{
    width:24px;
    height:24px;
    display:inline-grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    font-size:13px;
    font-weight:900;
}

body.song-bg .trk-ok{
    background:rgba(34,231,255,.12);
    border:1px solid rgba(34,231,255,.38);
    color:#dffbff;
}

body.song-bg .comment-form .comment-button,
body.song-bg .lyric-request-form .comment-button,
body.song-bg .rating-form .comment-button{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 16px;
    border-radius:8px;
    color:#fff !important;
    background:
        linear-gradient(135deg, rgba(34,231,255,.18), rgba(249,31,176,.15)),
        rgba(4,9,18,.94) !important;
    border:1px solid rgba(34,231,255,.42) !important;
    box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 12px 26px rgba(0,0,0,.34), 0 0 18px rgba(34,231,255,.12) !important;
    font-weight:900;
    cursor:pointer;
}

body.song-bg .comment-form .comment-button::after,
body.song-bg .lyric-request-form .comment-button::after,
body.song-bg .rating-form .comment-button::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(110deg, transparent 0 34%, rgba(255,255,255,.16) 46%, transparent 58% 100%);
    transform:translateX(-120%);
    animation:headerCtaSheen 3.4s ease-in-out infinite;
}

body.song-bg .comment-form .comment-button:hover,
body.song-bg .lyric-request-form .comment-button:hover,
body.song-bg .rating-form .comment-button:hover{
    color:#fff !important;
    background:
        linear-gradient(135deg, rgba(34,231,255,.24), rgba(249,31,176,.18)),
        rgba(4,9,18,.98) !important;
    border-color:rgba(34,231,255,.72) !important;
    transform:translateY(-1px);
}

body.song-bg .flash-message-error{
    border-color:rgba(255,95,150,.36);
    background:
        linear-gradient(135deg, rgba(255,95,150,.12), rgba(249,31,176,.08)),
        rgba(0,0,0,.28);
    color:#ffe4ef;
}

@media (max-width:720px){
    body.song-bg .release-pro{
        padding:20px;
    }

    body.song-bg .release-hero{
        grid-template-columns:86px minmax(0,1fr);
        gap:14px;
    }

    body.song-bg .release-cover img{
        width:86px;
        height:86px;
    }

    body.song-bg .release-title{
        font-size:21px;
    }
}

/* Final song page polish: keep cancion.php visually stable over old embedded rules. */
body.song-bg .section,
body.song-bg .release-pro,
body.song-bg .song-header.song-hero{
    border-radius:8px;
}

body.song-bg .section h2{
    margin:0 0 18px;
    font-family:var(--font-display);
    font-size:clamp(24px,2.4vw,34px);
    line-height:1.05;
    letter-spacing:0;
}

body.song-bg .section-video,
body.song-bg .section-lyrics,
body.song-bg #pedir-letra,
body.song-bg #comentarios,
body.song-bg .related-section{
    background:
        radial-gradient(circle at 100% 0%, rgba(34,231,255,.06), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        rgba(7,2,18,.92);
}

body.song-bg .video-head-card{
    border-radius:8px;
    border-color:rgba(34,231,255,.22);
    background:
        linear-gradient(135deg, rgba(34,231,255,.10), rgba(249,31,176,.07)),
        rgba(0,0,0,.28);
}

body.song-bg .lyrics-box{
    width:100%;
    max-height:520px;
    margin-top:16px;
    padding:18px;
    overflow:auto;
    white-space:pre-wrap;
    color:#fff;
    line-height:1.58;
}

body.song-bg .rating-panel{
    border-color:rgba(34,231,255,.18);
    background:
        linear-gradient(135deg, rgba(34,231,255,.06), rgba(249,31,176,.04)),
        rgba(0,0,0,.24);
}

body.song-bg .star-picker{
    gap:5px;
    padding:7px 8px;
}

body.song-bg .star-button{
    color:#857999;
}

body.song-bg .star-button.is-active,
body.song-bg .star-picker[data-hover="1"] .star-button:nth-child(-n+1),
body.song-bg .star-picker[data-hover="2"] .star-button:nth-child(-n+2),
body.song-bg .star-picker[data-hover="3"] .star-button:nth-child(-n+3),
body.song-bg .star-picker[data-hover="4"] .star-button:nth-child(-n+4),
body.song-bg .star-picker[data-hover="5"] .star-button:nth-child(-n+5),
body.song-bg .star-picker:has(.star-button:nth-child(1):is(:hover,:focus-visible)) .star-button:nth-child(-n+1),
body.song-bg .star-picker:has(.star-button:nth-child(2):is(:hover,:focus-visible)) .star-button:nth-child(-n+2),
body.song-bg .star-picker:has(.star-button:nth-child(3):is(:hover,:focus-visible)) .star-button:nth-child(-n+3),
body.song-bg .star-picker:has(.star-button:nth-child(4):is(:hover,:focus-visible)) .star-button:nth-child(-n+4),
body.song-bg .star-picker:has(.star-button:nth-child(5):is(:hover,:focus-visible)) .star-button:nth-child(-n+5){
    color:#ff5fd0;
    background:rgba(249,31,176,.12);
    text-shadow:0 0 14px rgba(249,31,176,.42);
}

body.song-bg .star-button.is-active .star-number,
body.song-bg .star-picker[data-hover="1"] .star-button:nth-child(-n+1) .star-number,
body.song-bg .star-picker[data-hover="2"] .star-button:nth-child(-n+2) .star-number,
body.song-bg .star-picker[data-hover="3"] .star-button:nth-child(-n+3) .star-number,
body.song-bg .star-picker[data-hover="4"] .star-button:nth-child(-n+4) .star-number,
body.song-bg .star-picker[data-hover="5"] .star-button:nth-child(-n+5) .star-number,
body.song-bg .star-picker:has(.star-button:nth-child(1):is(:hover,:focus-visible)) .star-button:nth-child(-n+1) .star-number,
body.song-bg .star-picker:has(.star-button:nth-child(2):is(:hover,:focus-visible)) .star-button:nth-child(-n+2) .star-number,
body.song-bg .star-picker:has(.star-button:nth-child(3):is(:hover,:focus-visible)) .star-button:nth-child(-n+3) .star-number,
body.song-bg .star-picker:has(.star-button:nth-child(4):is(:hover,:focus-visible)) .star-button:nth-child(-n+4) .star-number,
body.song-bg .star-picker:has(.star-button:nth-child(5):is(:hover,:focus-visible)) .star-button:nth-child(-n+5) .star-number{
    color:#fff;
}

body.song-bg .comment-form{
    border-color:rgba(34,231,255,.16);
    background:rgba(0,0,0,.24);
}

body.song-bg .comment-textarea{
    min-height:104px;
    border-color:rgba(255,255,255,.14);
    background:rgba(0,0,0,.34);
    font:inherit;
}

body.song-bg .related-section h2{
    margin-bottom:14px;
}

body.song-bg .song-jumpbar{
    margin-top:18px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

body.song-bg .song-jumpbar a{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 12px;
    border-radius:8px;
    border:1px solid rgba(34,231,255,.24);
    background:rgba(0,0,0,.30);
    color:#fff;
    font-size:12px;
    font-weight:900;
    text-decoration:none;
}

body.song-bg .song-jumpbar a:hover{
    border-color:rgba(34,231,255,.58);
    background:rgba(34,231,255,.09);
    box-shadow:0 0 18px rgba(34,231,255,.12);
}

body.song-bg .song-jumpbar .tr-svg-icon{
    width:16px;
    height:16px;
    color:#22e7ff;
}

body.song-bg .section-title-row{
    margin-bottom:18px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    border-bottom:1px solid rgba(255,255,255,.08);
    padding-bottom:12px;
}

body.song-bg .section-title-row h2{
    margin:0;
}

body.song-bg .section-count{
    min-height:28px;
    display:inline-flex;
    align-items:center;
    padding:0 10px;
    border-radius:999px;
    border:1px solid rgba(34,231,255,.24);
    background:rgba(34,231,255,.08);
    color:#dffbff;
    font-size:11px;
    font-weight:950;
    text-transform:uppercase;
    white-space:nowrap;
}

body.song-bg .btn-release.tr-cta-sheen,
body.song-bg .comment-button.tr-cta-sheen{
    min-height:42px !important;
    border-radius:8px !important;
}

body.song-bg .lyric-request-form .comment-button.tr-cta-sheen{
    min-width:148px;
}

body.song-bg .release-actions .tr-cta-sheen{
    padding-inline:18px !important;
}

@media (max-width:720px){
    body.song-bg .section-title-row{
        align-items:flex-start;
        flex-direction:column;
    }

    body.song-bg .song-jumpbar a{
        flex:1 1 calc(50% - 8px);
    }
}

/* Ficha de cancion: el boton de ayuda usa la misma posicion que el resto de la web. */
body.song-bg .tr-help-fab{
    position:fixed !important;
    inset:auto max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) auto !important;
    left:auto !important;
    right:max(12px, env(safe-area-inset-right)) !important;
    bottom:max(14px, env(safe-area-inset-bottom)) !important;
    margin:0 !important;
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;
    overflow:visible !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    transform:none !important;
    transform-origin:center center !important;
}

body.song-bg .tr-help-fab:hover{
    transform:translateY(-1px) !important;
}

body.song-bg .tr-help-fab img{
    width:34px !important;
    height:34px !important;
    max-width:34px !important;
    max-height:34px !important;
    object-fit:contain !important;
    display:block !important;
    margin:0 !important;
    transform:none !important;
}

@media (max-width:720px){
    body.song-bg #pedir-letra{
        padding:16px 14px !important;
    }

    body.song-bg #pedir-letra h2{
        margin-bottom:14px !important;
        font-size:26px !important;
    }

    body.song-bg .lyric-request-card{
        padding:14px !important;
        overflow:hidden !important;
    }

    body.song-bg .lyric-request-card p{
        margin-bottom:14px !important;
        font-size:14px !important;
        line-height:1.5 !important;
    }

    body.song-bg .lyric-request-form{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;
        align-items:stretch !important;
    }

    body.song-bg .lyric-request-form input[type="email"]{
        width:100% !important;
        min-width:0 !important;
        min-height:46px !important;
        font-size:16px !important;
    }

    body.song-bg .lyric-request-form .comment-button.tr-cta-sheen{
        width:100% !important;
        min-width:0 !important;
        min-height:46px !important;
        padding:0 14px !important;
    }

    body.song-bg .tr-help-fab{
        inset:auto max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) auto !important;
        right:max(12px, env(safe-area-inset-right)) !important;
        bottom:max(14px, env(safe-area-inset-bottom)) !important;
        width:56px !important;
        height:56px !important;
        min-width:56px !important;
        min-height:56px !important;
    }
}

@media (min-width:768px){
    body.song-bg .tr-help-fab img{
        width:38px !important;
        height:38px !important;
        max-width:38px !important;
        max-height:38px !important;
    }
}

/* Song page overflow guard.
   The help button was being clipped only on cancion.php because some song-only
   grids/buttons can grow wider than the viewport on narrow screens. */
body.song-bg{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

body.song-bg .wrapper.song-wallpaper{
    width:min(1320px, calc(100% - 36px)) !important;
    max-width:1320px !important;
    overflow-x:clip;
}

body.song-bg .song-header,
body.song-bg .song-header *,
body.song-bg .release-pro,
body.song-bg .release-pro *,
body.song-bg .section,
body.song-bg .section *,
body.song-bg .song-jumpbar,
body.song-bg .song-jumpbar *,
body.song-bg .icon-actions,
body.song-bg .icon-actions *,
body.song-bg .related-grid,
body.song-bg .related-grid *{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
}

body.song-bg .song-header,
body.song-bg .release-pro,
body.song-bg .section,
body.song-bg .release-player,
body.song-bg .release-tracklist,
body.song-bg .related-section{
    overflow-x:clip;
}

body.song-bg .song-header .title,
body.song-bg .song-header .artist,
body.song-bg .song-desc,
body.song-bg .release-title,
body.song-bg .rel-t,
body.song-bg .video-head-copy strong,
body.song-bg .lyrics-head-card strong,
body.song-bg .related-title,
body.song-bg .related-artist{
    overflow-wrap:anywhere;
}

@media (max-width:720px){
    body.song-bg .wrapper.song-wallpaper{
        width:calc(100% - 20px) !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    body.song-bg .song-header.song-hero{
        grid-template-columns:minmax(0,1fr) !important;
    }

    body.song-bg .song-header .cover{
        width:100%;
        max-width:min(360px,100%) !important;
    }

    body.song-bg .song-jumpbar{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    body.song-bg .song-jumpbar a{
        width:100%;
        flex:initial !important;
        justify-content:center;
    }

    body.song-bg .release-hero{
        grid-template-columns:minmax(72px,92px) minmax(0,1fr) !important;
    }

    body.song-bg .release-cover img{
        width:100% !important;
        height:auto !important;
        aspect-ratio:1 / 1;
    }

    body.song-bg .release-actions{
        display:grid !important;
        grid-template-columns:1fr !important;
    }

    body.song-bg .release-actions .tr-cta-sheen,
    body.song-bg .release-actions .release-status{
        width:100% !important;
        max-width:100% !important;
    }

    body.song-bg .rel-trk{
        grid-template-columns:minmax(0,1fr) !important;
    }

    body.song-bg .rel-trk-right{
        width:100%;
        justify-content:flex-start;
        flex-wrap:wrap;
    }

    body.song-bg .related-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media (max-width:420px){
    body.song-bg .related-grid{
        grid-template-columns:1fr !important;
    }

    body.song-bg .song-jumpbar{
        grid-template-columns:1fr !important;
    }
}

/* =========================================================
   CABECERA: misma tipografía efectiva que INDEX
   No modifica títulos ni contenido de la ficha.
   ========================================================= */

/* INDEX precarga TR Inter y la usa para navegación y acciones. */
body.song-bg .site-header,
body.song-bg .site-header .header-center,
body.song-bg .site-header .header-center a,
body.song-bg .site-header .header-home-btn,
body.song-bg .site-header .header-fb-btn,
body.song-bg .site-header .header-right,
body.song-bg .site-header .user-area,
body.song-bg .site-header .user-area a,
body.song-bg .site-header .user-greeting,
body.song-bg .site-header .logo-text-sub {
    font-family:
        "TR Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;
}

/*
   En INDEX --tr-font-display apunta a Archivo, pero INDEX no registra
   Archivo con @font-face. Por tanto el logo principal cae al fallback
   del sistema. Reproducimos exactamente ese aspecto solo en la cabecera.
*/
body.song-bg .site-header .logo-text-main {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;
}

/* Evita que variables tipográficas de la ficha cambien la cabecera. */
body.song-bg .site-header {
    --tr-font-ui:
        "TR Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

/* =========================================================
   SHELL EXTERIOR: ocupa todo el viewport SIN ensanchar contenido
   ========================================================= */

/* Evita cualquier desplazamiento horizontal que corte visualmente
   la línea inferior de la cabecera. */
html,
body.song-bg{
    width:100%;
    min-width:100%;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    overflow-x:clip !important;
}

/* Las capas de fondo pertenecen al viewport completo, no al wrapper. */
body.song-bg::before,
body.song-bg::after{
    left:0 !important;
    right:0 !important;
    width:auto !important;
    max-width:none !important;
}

/* La cabecera y su borde azul deben llegar de borde a borde.
   Esto NO modifica el ancho de la ficha. */
body.song-bg .site-header{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
}