.if-music-feature{
  margin-top:22px;
}

.if-music-bar{
  position:relative;
  display:grid;
  grid-template-columns:56px minmax(230px,300px) minmax(180px,1fr) auto;
  align-items:center;
  gap:13px;
  padding:7px 10px 7px 7px;
  border:1px solid var(--if-border,#e4e3e7);
  border-radius:12px;
  background:var(--if-paper,#fff);
  box-shadow:0 5px 16px rgba(30,38,64,.035);
}

.if-music-cover{
  width:56px;
  height:56px;
  object-fit:cover;
  border-radius:8px;
  flex:none;
}

.if-music-copy,
.if-music-now{
  min-width:0;
}

.if-music-kicker{
  display:block;
  margin:0 0 2px;
  color:#766a99;
  font-size:9px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.if-music-copy h2{
  margin:0;
  color:var(--if-deep,#1e2640);
  font-family:var(--if-serif,Georgia,'Times New Roman',serif);
  font-size:20px;
  font-weight:400;
  line-height:1.02;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Ocupa justamente o espaço que antes ficava vazio. */
.if-music-now{
  display:flex;
  align-items:center;
  min-height:38px;
  padding:0 10px;
  border-left:1px solid var(--if-border,#e4e3e7);
  color:var(--if-muted,#6f7683);
}

.if-music-pillars,
.if-music-track{
  display:block;
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.if-music-pillars{
  font-size:9px;
  line-height:1.2;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.if-music-track{
  color:var(--if-slate,#4b5870);
  font-size:12px;
  font-weight:650;
  line-height:1.25;
  letter-spacing:0;
  text-transform:none;
}

.if-music-track[hidden],
.if-music-pillars[hidden]{
  display:none!important;
}

.if-music-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:none;
}

.if-music-controls{
  display:flex;
  align-items:center;
  gap:5px;
}

.if-music-toggle,
.if-music-skip{
  min-height:38px;
  border:0;
  border-radius:8px;
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease,transform .2s ease,opacity .2s ease;
}

.if-music-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 13px;
  background:#766a99;
  color:#fff;
  white-space:nowrap;
}

.if-music-skip{
  width:38px;
  padding:0;
  display:grid;
  place-items:center;
  background:#f0eef6;
  color:#665b89;
}

.if-music-toggle:hover,
.if-music-skip:not(:disabled):hover{
  transform:translateY(-1px);
}

.if-music-toggle:hover{
  background:#665b89;
}

.if-music-skip:not(:disabled):hover{
  background:#e6e1f0;
}

.if-music-skip:disabled{
  opacity:.38;
  cursor:default;
}

.if-music-toggle:focus-visible,
.if-music-skip:focus-visible,
.if-music-external:focus-visible{
  outline:3px solid var(--if-mist,#b7b1d6);
  outline-offset:3px;
}

.if-music-external{
  display:inline-flex;
  min-height:38px;
  align-items:center;
  padding:8px 2px;
  color:var(--if-slate,#4b5870);
  font-size:11px;
  font-weight:650;
  white-space:nowrap;
}

.if-music-external:hover{
  color:#665b89;
}

.if-music-youtube-player{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  opacity:0!important;
  pointer-events:none!important;
  left:0!important;
  bottom:0!important;
}

.if-music-youtube-player iframe{
  width:1px!important;
  height:1px!important;
  border:0!important;
}

html[data-theme="dark"] .if-music-bar{
  background:#171f2f;
  border-color:#2b3548;
}

html[data-theme="dark"] .if-music-now{
  border-color:#2b3548;
}

html[data-theme="dark"] .if-music-external,
html[data-theme="dark"] .if-music-track{
  color:#b9c3d4;
}

html[data-theme="dark"] .if-music-skip{
  background:#262b40;
  color:#c7bff3;
}

html[data-theme="dark"] .if-music-skip:not(:disabled):hover{
  background:#303650;
}

@media(max-width:980px){
  .if-music-bar{
    grid-template-columns:50px minmax(210px,270px) minmax(130px,1fr) auto;
    gap:10px;
  }

  .if-music-cover{
    width:50px;
    height:50px;
  }

  .if-music-copy h2{
    font-size:17px;
  }

  .if-music-external{
    display:none;
  }
}

@media(max-width:720px){
  .if-music-bar{
    grid-template-columns:50px minmax(0,1fr) auto;
    padding:6px 7px;
  }

  .if-music-now{
    grid-column:2/4;
    grid-row:2;
    min-height:24px;
    padding:2px 0 0;
    border-left:0;
    border-top:1px solid var(--if-border,#e4e3e7);
  }

  .if-music-actions{
    grid-column:3;
    grid-row:1;
  }

  .if-music-toggle{
    min-height:36px;
    padding:7px 10px;
    font-size:11px;
  }

  .if-music-skip{
    width:36px;
    min-height:36px;
  }
}

@media(max-width:480px){
  .if-music-feature{
    margin-top:18px;
  }

  .if-music-bar{
    grid-template-columns:44px minmax(0,1fr);
    gap:8px;
  }

  .if-music-cover{
    width:44px;
    height:44px;
  }

  .if-music-copy h2{
    font-size:16px;
  }

  .if-music-kicker{
    font-size:8px;
  }

  .if-music-actions{
    grid-column:1/-1;
    grid-row:2;
    justify-content:flex-start;
  }

  .if-music-now{
    grid-column:1/-1;
    grid-row:3;
    padding-top:5px;
  }

  .if-music-pillars{
    font-size:8px;
  }

  .if-music-track{
    font-size:10px;
  }
}