/* SENSIK AI — final player spacing correction.
   Loaded after older player skins so the measured carousel and controls stay in sync. */
#studio-workspace .music-panel > .hero-player-area {
  box-sizing: border-box !important;
  padding: 14px 14px 16px !important;
  gap: 6px !important;
}
#studio-workspace .music-panel .cf-carousel {
  flex: 0 0 188px !important;
  height: 188px !important;
  min-height: 188px !important;
  max-height: 188px !important;
  margin: 0 auto 2px !important;
  overflow: hidden !important;
}
#studio-workspace .music-panel .cf-card {
  width: clamp(142px, 16vw, 180px) !important;
  height: clamp(152px, 17vw, 186px) !important;
}
#studio-workspace .music-panel .cf-card.is-center {
  width: clamp(180px, 19vw, 208px) !important;
  height: clamp(180px, 19vw, 204px) !important;
}
#studio-workspace .music-panel .hero-controls-area {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  width: min(100%, 480px) !important;
  margin: 0 auto !important;
  padding: 2px 10px 3px !important;
}
#studio-workspace .music-panel .hero-title {
  margin: 0 0 2px !important;
  line-height: 1.3 !important;
}
#studio-workspace .music-panel .hero-tags {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 0 !important;
}
#studio-workspace .music-panel .hero-playback-status {
  margin: 1px auto 2px !important;
}
#studio-workspace .music-panel .hero-progress-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 3px 0 5px !important;
}
#studio-workspace .music-panel .hero-range {
  min-width: 0 !important;
}
#studio-workspace .music-panel .hero-buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  min-height: 46px !important;
  margin: 1px 0 0 !important;
  padding: 1px 0 2px !important;
}
#studio-workspace .music-panel .hero-buttons .h-btn {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 10px !important;
}
#studio-workspace .music-panel .hero-buttons .h-play-btn {
  flex: 0 0 46px !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 2px !important;
  border-radius: 50% !important;
}
@media (min-width: 1051px) {
  #studio-workspace .music-panel > .hero-player-area {
    flex: 0 0 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
  }
  #studio-workspace .music-panel .cf-carousel { flex-basis: 188px !important; }
}
@media (min-width: 761px) and (max-width: 1050px) {
  #studio-workspace .music-panel > .hero-player-area {
    flex: 0 0 415px !important;
    min-height: 415px !important;
    max-height: 415px !important;
    padding: 12px 10px 14px !important;
  }
  #studio-workspace .music-panel .cf-carousel {
    flex-basis: 180px !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
  }
  #studio-workspace .music-panel .cf-card.is-center {
    width: clamp(178px, 20vw, 202px) !important;
    height: clamp(178px, 20vw, 198px) !important;
  }
  #studio-workspace .music-panel .hero-buttons { gap: 12px !important; }
}
@media (max-width: 760px) {
  #studio-workspace .music-panel > .hero-player-area {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px 7px 13px !important;
    gap: 7px !important;
  }
  #studio-workspace .music-panel > .hero-player-area::before {
    min-height: 30px !important;
    padding: 6px 10px !important;
    font-size: 9px !important;
  }
  #studio-workspace .music-panel .cf-carousel {
    flex: 0 0 170px !important;
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
  }
  #studio-workspace .music-panel .cf-card {
    width: clamp(132px, 41vw, 160px) !important;
    height: clamp(145px, 44vw, 170px) !important;
  }
  #studio-workspace .music-panel .cf-card.is-center {
    width: clamp(165px, 49vw, 190px) !important;
    height: clamp(165px, 49vw, 190px) !important;
  }
  #studio-workspace .music-panel .hero-controls-area {
    gap: 4px !important;
    padding: 1px 5px 2px !important;
  }
  #studio-workspace .music-panel .hero-title { font-size: 14px !important; }
  #studio-workspace .music-panel .hero-progress-bar {
    gap: 7px !important;
    margin: 3px 0 4px !important;
  }
  #studio-workspace .music-panel .hero-buttons { gap: 8px !important; min-height: 42px !important; }
  #studio-workspace .music-panel .hero-buttons .h-btn {
    flex-basis: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
  #studio-workspace .music-panel .hero-buttons .h-play-btn {
    flex-basis: 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }
}
@media (min-width: 761px) and (max-height: 760px) {
  #studio-workspace .music-panel > .hero-player-area {
    flex-basis: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  #studio-workspace .music-panel .cf-carousel {
    flex-basis: 172px !important;
    height: 172px !important;
    min-height: 172px !important;
    max-height: 172px !important;
  }
  #studio-workspace .music-panel .cf-card.is-center {
    width: clamp(170px, 18vw, 196px) !important;
    height: clamp(170px, 18vw, 192px) !important;
  }
}


/* Final alignment: player controls remain readable and evenly spaced. */
#studio-workspace .music-panel .hero-controls-area {
  gap: 8px !important;
}
#studio-workspace .music-panel .hero-title {
  margin-bottom: 4px !important;
}
#studio-workspace .music-panel .hero-tags {
  margin-top: 1px !important;
  margin-bottom: 2px !important;
  gap: 8px !important;
}
#studio-workspace .music-panel .hero-playback-status {
  margin: 3px auto 4px !important;
  padding: 5px 11px !important;
}
#studio-workspace .music-panel .hero-progress-bar {
  width: min(100%, 500px) !important;
  margin: 6px auto 8px !important;
  gap: 14px !important;
}
#studio-workspace .music-panel .hero-buttons {
  gap: clamp(10px, 1.2vw, 16px) !important;
  margin-top: 4px !important;
  padding-bottom: 4px !important;
}
#studio-workspace .music-panel .hero-buttons .h-btn {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#studio-workspace .music-panel .hero-buttons .h-play-btn {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 4px !important;
}
@media (max-width: 760px) {
  #studio-workspace .music-panel .hero-controls-area { gap: 6px !important; }
  #studio-workspace .music-panel .hero-progress-bar { gap: 8px !important; margin: 4px auto 6px !important; }
  #studio-workspace .music-panel .hero-buttons { gap: 8px !important; }
  #studio-workspace .music-panel .hero-buttons .h-btn { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; }
  #studio-workspace .music-panel .hero-buttons .h-play-btn { width: 43px !important; min-width: 43px !important; height: 43px !important; min-height: 43px !important; margin: 0 2px !important; }
}


/* 2026-10-23 final fit: more room below player, balanced control spacing. */
#studio-workspace .music-panel > .hero-player-area {
  flex: 0 0 388px !important;
  min-height: 388px !important;
  max-height: none !important;
  height: auto !important;
  padding: 10px 12px 14px !important;
  gap: 5px !important;
  overflow: visible !important;
}
#studio-workspace .music-panel .cf-carousel {
  flex-basis: 164px !important;
  height: 164px !important;
  min-height: 164px !important;
  max-height: 164px !important;
  overflow: visible !important;
  margin-bottom: 4px !important;
}
#studio-workspace .music-panel .cf-card.is-center {
  width: clamp(160px, 17vw, 190px) !important;
  height: clamp(160px, 17vw, 190px) !important;
}
#studio-workspace .music-panel .hero-controls-area {
  gap: 7px !important;
  padding: 2px 10px 8px !important;
}
#studio-workspace .music-panel .hero-title { margin: 2px 0 3px !important; }
#studio-workspace .music-panel .hero-tags { gap: 8px !important; margin: 0 0 2px !important; }
#studio-workspace .music-panel .hero-playback-status { margin: 2px auto 3px !important; }
#studio-workspace .music-panel .hero-progress-bar { margin: 4px auto 7px !important; gap: 12px !important; }
#studio-workspace .music-panel .hero-buttons { gap: clamp(12px, 1.5vw, 18px) !important; min-height: 48px !important; margin-top: 1px !important; padding-bottom: 2px !important; }
#studio-workspace .music-panel .hero-buttons .h-btn { width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; }
#studio-workspace .music-panel .hero-buttons .h-play-btn { width: 46px !important; min-width: 46px !important; height: 46px !important; min-height: 46px !important; margin: 0 3px !important; }
@media (min-width: 761px) and (max-height: 760px) {
  #studio-workspace .music-panel > .hero-player-area { flex-basis: 370px !important; min-height: 370px !important; }
  #studio-workspace .music-panel .cf-carousel { flex-basis: 148px !important; height: 148px !important; min-height: 148px !important; max-height: 148px !important; }
  #studio-workspace .music-panel .cf-card.is-center { width: clamp(150px, 16vw, 174px) !important; height: clamp(150px, 16vw, 174px) !important; }
}
@media (max-width: 760px) {
  #studio-workspace .music-panel > .hero-player-area { flex: 0 0 auto !important; min-height: 0 !important; max-height: none !important; padding: 9px 6px 12px !important; }
  #studio-workspace .music-panel .cf-carousel { flex-basis: 158px !important; height: 158px !important; min-height: 158px !important; max-height: 158px !important; }
  #studio-workspace .music-panel .cf-card.is-center { width: clamp(150px, 46vw, 178px) !important; height: clamp(150px, 46vw, 178px) !important; }
  #studio-workspace .music-panel .hero-controls-area { gap: 6px !important; padding: 2px 4px 6px !important; }
  #studio-workspace .music-panel .hero-progress-bar { gap: 7px !important; margin: 4px auto 6px !important; }
  #studio-workspace .music-panel .hero-buttons { gap: 9px !important; min-height: 44px !important; }
  #studio-workspace .music-panel .hero-buttons .h-btn { width: 33px !important; min-width: 33px !important; height: 33px !important; min-height: 33px !important; }
  #studio-workspace .music-panel .hero-buttons .h-play-btn { width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; }
}


/* 2026-10-23 viewport fit: keep the entire transport row inside the player card.
   The previous 388px desktop basis clipped the bottom of the control buttons. */
#studio-workspace .music-panel > .hero-player-area {
  box-sizing: border-box !important;
  flex: 0 0 432px !important;
  min-height: 432px !important;
  height: auto !important;
  max-height: none !important;
  flex-shrink: 0 !important;
  padding: 10px 12px 18px !important;
  overflow: visible !important;
}
#studio-workspace .music-panel .hero-controls-area {
  flex: 0 0 auto !important;
  gap: 7px !important;
  padding-bottom: 10px !important;
}
#studio-workspace .music-panel .hero-buttons {
  flex: 0 0 auto !important;
  min-height: 50px !important;
  margin: 2px 0 5px !important;
  padding: 2px 0 6px !important;
}
#studio-workspace .music-panel > .music-feed {
  min-height: 0 !important;
  flex: 1 1 0% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
@media (min-width: 761px) and (max-width: 1050px) {
  #studio-workspace .music-panel > .hero-player-area {
    flex-basis: 420px !important;
    min-height: 420px !important;
    padding-bottom: 16px !important;
  }
}
@media (min-width: 761px) and (max-height: 760px) {
  #studio-workspace .music-panel > .hero-player-area {
    flex-basis: 410px !important;
    min-height: 410px !important;
    padding-top: 7px !important;
    padding-bottom: 12px !important;
  }
  #studio-workspace .music-panel .cf-carousel {
    flex-basis: 150px !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
  }
  #studio-workspace .music-panel .cf-card.is-center {
    width: clamp(148px, 16vw, 172px) !important;
    height: clamp(148px, 16vw, 172px) !important;
  }
}
@media (max-width: 760px) {
  #studio-workspace .music-panel > .hero-player-area {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 9px 6px 15px !important;
  }
  #studio-workspace .music-panel .hero-buttons {
    min-height: 46px !important;
    margin-bottom: 4px !important;
    padding-bottom: 5px !important;
  }
}