/* SENSIK AI — dark player skin. Keep the original dark studio background. */
#studio-workspace .music-panel > .hero-player-area {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  padding: 20px 14px 22px !important;
  overflow: hidden !important;
  color: #eaf4ff !important;
  background:
    radial-gradient(ellipse at 50% 13%, rgba(51, 194, 187, .13), transparent 42%),
    radial-gradient(ellipse at 88% 0%, rgba(123, 100, 211, .08), transparent 36%),
    linear-gradient(180deg, rgba(12, 20, 33, .98) 0%, rgba(7, 12, 21, .98) 100%) !important;
  border: 1px solid rgba(84, 240, 210, .16) !important;
  border-radius: 0 0 20px 20px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 32px rgba(0,0,0,.24) !important;
}
#studio-workspace .music-panel > .hero-player-area::before {
  content: "SENSIK AI  ·  PILIH DAN PUTAR MUSIKMU";
  display: inline-flex; align-self: center; justify-content: center; align-items: center;
  min-height: 36px; max-width: 100%; padding: 8px 17px; margin: 0 auto 1px;
  overflow: hidden; border: 1px solid rgba(84,240,210,.18); border-radius: 999px;
  background: rgba(8, 17, 29, .88); color: #ddfff8;
  box-shadow: 0 6px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035);
  font-size: clamp(10px, .95vw, 13px); font-weight: 800; letter-spacing: .035em;
  line-height: 1.2; white-space: nowrap; text-overflow: ellipsis;
}
#studio-workspace .music-panel .cf-carousel {
  box-sizing: border-box !important; flex: 0 0 290px !important;
  width: 100% !important; height: 290px !important; min-height: 290px !important;
  max-width: 100% !important; margin: 0 auto 2px !important; padding: 0 2px !important;
  perspective: 1250px !important; overflow: hidden !important; isolation: isolate !important;
}
#studio-workspace .music-panel .cf-card {
  background: #0c1725 !important; color: #f4f8ff !important;
  border: 1px solid rgba(132,178,207,.28) !important; border-radius: 17px !important;
  box-shadow: 0 15px 35px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04) !important;
  backface-visibility: hidden; -webkit-tap-highlight-color: transparent;
  transition: transform .38s cubic-bezier(.2,.75,.25,1), opacity .32s ease, filter .32s ease, border-color .32s ease, box-shadow .32s ease !important;
}
#studio-workspace .music-panel .cf-card img { transform: scale(1.005); transition: transform .65s ease, filter .3s ease; }
#studio-workspace .music-panel .cf-card::after {
  background: linear-gradient(180deg, rgba(7,12,22,.04) 0%, rgba(7,12,22,0) 38%, rgba(4,9,17,.82) 100%) !important;
}
#studio-workspace .music-panel .cf-card.is-center {
  border: 1px solid rgba(84,240,210,.82) !important;
  box-shadow: 0 22px 48px rgba(0,0,0,.50), 0 0 0 1px rgba(84,240,210,.16), 0 0 32px rgba(84,240,210,.11), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
#studio-workspace .music-panel .cf-card.is-center:focus-visible { outline: 3px solid rgba(84,240,210,.60) !important; outline-offset: 3px !important; }
#studio-workspace .music-panel .cf-card.is-center:hover img { transform: scale(1.045); }
#studio-workspace .music-panel .cf-card-country {
  top: 12px !important; left: 12px !important; color: rgba(238,255,252,.92) !important;
  font-size: 9px !important; line-height: 1.2 !important; letter-spacing: .08em !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.7) !important;
}
#studio-workspace .music-panel .cf-card-title {
  left: 13px !important; right: 13px !important; bottom: 14px !important;
  color: #fff !important; font-size: clamp(11px, 1vw, 14px) !important;
  line-height: 1.24 !important; text-shadow: 0 2px 10px rgba(0,0,0,.85) !important;
}
#studio-workspace .music-panel .cf-card-now-pill {
  top: 10px !important; right: 10px !important; max-width: 64% !important;
  padding: 6px 9px !important; border: 1px solid rgba(153,230,220,.25) !important;
  border-radius: 999px !important; background: rgba(5,14,24,.82) !important;
  color: #d9fff7 !important; box-shadow: 0 3px 11px rgba(0,0,0,.26) !important;
  backdrop-filter: blur(8px); font-size: 8px !important; letter-spacing: .045em !important;
}
#studio-workspace .music-panel .cf-card-now-pill::before {
  content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 5px;
  border-radius: 50%; background: #8493a7 !important;
}
#studio-workspace .music-panel .cf-card.is-playing .cf-card-now-pill::before {
  background: #54f0d2 !important; box-shadow: 0 0 0 3px rgba(84,240,210,.12), 0 0 10px rgba(84,240,210,.65) !important;
  animation: sensikNowPlayingPulse 1.25s ease-in-out infinite;
}
#studio-workspace .music-panel .cf-card.is-paused .cf-card-now-pill::before { background: #ffc66d !important; }
#studio-workspace .music-panel .cf-card.is-stopped .cf-card-now-pill::before { background: #8090a5 !important; animation: none !important; }
#studio-workspace .music-panel .cf-card-play-orb {
  width: clamp(44px, 4.5vw, 58px) !important; height: clamp(44px, 4.5vw, 58px) !important;
  display: grid; place-items: center; color: #062229 !important;
  background: linear-gradient(135deg,#64f7db 0%,#42d6da 68%,#a1a5ff 120%) !important;
  border: 1px solid rgba(224,255,251,.76) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.42), 0 0 0 7px rgba(82,239,216,.09), 0 0 28px rgba(73,245,213,.24) !important;
  backdrop-filter: blur(8px); transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
#studio-workspace .music-panel .cf-card.is-playing .cf-card-play-orb {
  background: linear-gradient(135deg,#91ffe6 0%,#46e0cb 66%,#8c98ff 120%) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.42), 0 0 0 8px rgba(82,239,216,.15), 0 0 35px rgba(73,245,213,.37) !important;
}
#studio-workspace .music-panel .cf-card.is-paused .cf-card-play-orb { filter: saturate(.82); }
#studio-workspace .music-panel .cf-card.is-stopped .cf-card-play-orb { background: rgba(8,18,29,.82) !important; color: #e5fff9 !important; }
#studio-workspace .music-panel .cf-card-play-icon { font-size: 22px !important; line-height: 1; }
#studio-workspace .music-panel .cf-card.is-playing .cf-card-play-icon { margin-left: 0 !important; }
#studio-workspace .music-panel .hero-controls-area {
  position: relative !important; z-index: 5 !important; flex: 0 0 auto !important;
  width: min(100%, 480px) !important; margin: 0 auto !important; padding: 0 8px !important;
  color: #eaf4ff !important; text-align: center !important;
}
#studio-workspace .music-panel .hero-title {
  margin: 0 0 7px !important; color: #f3f7ff !important; font-size: clamp(15px, 1.35vw, 18px) !important;
  font-weight: 850 !important; letter-spacing: -.025em !important; text-shadow: 0 2px 16px rgba(0,0,0,.38) !important;
}
#studio-workspace .music-panel .hero-tags { display:flex; justify-content:center; gap: 6px !important; margin-bottom: 6px !important; }
#studio-workspace .music-panel .hero-tag-pill {
  color: #9fadc0 !important; border: 1px solid rgba(157,184,215,.18) !important;
  background: rgba(9,17,29,.85) !important; border-radius: 999px !important; padding: 4px 9px !important; font-size: 9px !important;
}
#studio-workspace .music-panel .hero-playback-status {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0 auto 2px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid rgba(143,179,204,.16); background: rgba(8,16,27,.7);
  color: #93a6bb; font-size: 8px; line-height: 1.2; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
}
#studio-workspace .music-panel .hero-playback-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #7c8da4; }
#studio-workspace .music-panel .hero-playback-status[data-state="playing"] { color: #9bffeb; border-color: rgba(84,240,210,.28); background: rgba(25,104,96,.14); }
#studio-workspace .music-panel .hero-playback-status[data-state="playing"]::before { background: #54f0d2; box-shadow: 0 0 9px rgba(84,240,210,.8); animation: sensikNowPlayingPulse 1.25s ease-in-out infinite; }
#studio-workspace .music-panel .hero-playback-status[data-state="paused"] { color: #ffd69a; border-color: rgba(255,198,109,.2); background: rgba(120,75,20,.12); }
#studio-workspace .music-panel .hero-playback-status[data-state="paused"]::before { background: #ffc66d; }
#studio-workspace .music-panel .hero-playback-status[data-state="stopped"]::before { background: #7c8da4; animation: none !important; }
#studio-workspace .music-panel .hero-progress-bar { display:flex; align-items:center; gap: 10px !important; margin: 8px 0 11px !important; }
#studio-workspace .music-panel .hero-time { color: #91a1b7 !important; font-size: 10px !important; }
#studio-workspace .music-panel .hero-range { accent-color: #54f0d2 !important; cursor: pointer; }
#studio-workspace .music-panel .h-btn { color: #9bacc0 !important; background: rgba(9,17,29,.52) !important; border: 1px solid rgba(145,174,204,.13) !important; }
#studio-workspace .music-panel .h-btn:hover { color: #eafffb !important; background: rgba(35,91,91,.32) !important; }
#studio-workspace .music-panel .h-stop-btn { color: #ffb6b6 !important; }
#studio-workspace .music-panel .h-stop-btn:hover { color: #fff !important; background: rgba(161,54,69,.22) !important; }
#studio-workspace .music-panel .h-play-btn {
  width: 46px !important; height: 46px !important; color: #062229 !important;
  background: linear-gradient(135deg,#64f7db 0%,#42d6da 66%,#a1a5ff 120%) !important;
  border: 1px solid rgba(224,255,251,.74) !important; border-radius: 50% !important;
  box-shadow: 0 8px 28px rgba(73,245,213,.18), 0 5px 17px rgba(0,0,0,.24) !important; font-size: 16px !important;
}
#studio-workspace .music-panel .h-play-btn.is-playing { box-shadow: 0 0 0 6px rgba(84,240,210,.10), 0 8px 32px rgba(73,245,213,.27) !important; }
#studio-workspace .music-panel .h-play-btn.is-paused { color: #ffe0ad !important; background: linear-gradient(135deg,#57411e,#1c2635) !important; border-color: rgba(255,198,109,.5) !important; }
#studio-workspace .music-panel .h-play-btn.is-stopped { color: #d9fff7 !important; background: rgba(7,16,27,.94) !important; border-color: rgba(84,240,210,.25) !important; box-shadow: 0 4px 16px rgba(0,0,0,.25) !important; }
#studio-workspace .music-panel .hero-buttons { display:flex; align-items:center; justify-content:center; gap: 12px !important; min-height: 46px !important; }
@media (min-width: 1051px) {
  #studio-workspace .music-panel > .hero-player-area { min-height: 445px !important; max-height: 445px !important; }
  #studio-workspace .music-panel .cf-carousel { flex-basis: 230px !important; height: 230px !important; min-height: 230px !important; }
}
@media (min-width: 761px) and (max-width: 1050px) {
  #studio-workspace .music-panel > .hero-player-area { min-height: 425px !important; }
  #studio-workspace .music-panel .cf-carousel { flex-basis: 225px !important; height: 225px !important; min-height: 225px !important; }
}
@media (max-width: 760px) {
  #studio-workspace .music-panel > .hero-player-area { min-height: 420px !important; padding: 16px 7px 18px !important; gap: 6px !important; border-radius: 0 0 16px 16px !important; }
  #studio-workspace .music-panel > .hero-player-area::before { min-height: 32px; padding: 7px 12px; font-size: 10px; }
  #studio-workspace .music-panel .cf-carousel { flex-basis: 210px !important; height: 210px !important; min-height: 210px !important; }
  #studio-workspace .music-panel .cf-card { border-radius: 14px !important; }
  #studio-workspace .music-panel .cf-card-country { top: 9px !important; left: 9px !important; font-size: 8px !important; }
  #studio-workspace .music-panel .cf-card-title { left: 9px !important; right: 9px !important; bottom: 10px !important; font-size: 11px !important; }
  #studio-workspace .music-panel .cf-card-now-pill { top: 7px !important; right: 7px !important; padding: 5px 7px !important; font-size: 7px !important; }
  #studio-workspace .music-panel .cf-card-play-orb { width: 44px !important; height: 44px !important; }
  #studio-workspace .music-panel .hero-title { font-size: 15px !important; }
  #studio-workspace .music-panel .hero-tags { margin-bottom: 4px !important; }
  #studio-workspace .music-panel .hero-progress-bar { margin: 5px 0 8px !important; }
  #studio-workspace .music-panel .hero-buttons { gap: 8px !important; }
  #studio-workspace .music-panel .h-play-btn { width: 42px !important; height: 42px !important; }
}
@keyframes sensikNowPlayingPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .56; transform: scale(.78); } }
@media (prefers-reduced-motion: reduce) {
  #studio-workspace .music-panel .cf-card, #studio-workspace .music-panel .cf-card img,
  #studio-workspace .music-panel .cf-card-play-orb, #studio-workspace .music-panel .h-play-btn { transition: none !important; }
  #studio-workspace .music-panel .cf-card.is-playing .cf-card-now-pill::before,
  #studio-workspace .music-panel .hero-playback-status[data-state="playing"]::before { animation: none !important; }
}
/* Marketing hero card uses the same real audio state as the studio player. */
.snv-music-art { cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; transition: box-shadow .25s ease,border-color .25s ease,filter .25s ease; }
.snv-music-art:focus-visible { outline: 3px solid rgba(84,240,210,.6); outline-offset: 5px; }
.snv-music-art.is-playing { border-color: rgba(84,240,210,.7) !important; box-shadow: 0 35px 100px rgba(0,0,0,.52),0 0 0 1px rgba(84,240,210,.15),0 0 58px rgba(84,240,210,.16) !important; }
.snv-music-art.is-paused { border-color: rgba(255,198,109,.48) !important; }
.snv-music-art.is-stopped { border-color: rgba(143,203,219,.24) !important; }
.snv-player-status {
  display: inline-flex; align-items: center; gap: 5px; max-width: 68%; border: 1px solid rgba(84,240,210,.24);
  border-radius: 999px; padding: 5px 9px; background: rgba(0,0,0,.28); color: #75f6dd;
  font-size: 9px; font-weight: 900; letter-spacing: .10em; white-space: nowrap;
}
.snv-player-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #8392a6; flex: 0 0 5px; }
.snv-player-status[data-state="playing"] { color: #8ffff0; border-color: rgba(84,240,210,.48); }
.snv-player-status[data-state="playing"]::before { background: #54f0d2; box-shadow: 0 0 10px rgba(84,240,210,.9); animation: sensikNowPlayingPulse 1.25s ease-in-out infinite; }
.snv-player-status[data-state="paused"] { color: #ffd69a; border-color: rgba(255,198,109,.42); }
.snv-player-status[data-state="paused"]::before { background: #ffc66d; }
.snv-player-status[data-state="stopped"]::before { background: #8392a6; animation: none !important; }
.snv-music-art .snv-disc-center { transition: transform .2s ease,filter .2s ease,background .2s ease; }
.snv-music-art.is-playing .snv-disc-center { box-shadow: 0 0 0 7px rgba(84,240,210,.10),0 0 32px rgba(84,240,210,.42) !important; }
.snv-music-art.is-paused .snv-disc-center { background: linear-gradient(145deg,#f2cb85,#b98b45 58%,#42331d) !important; color: #20170b !important; }
.snv-music-art.is-stopped .snv-disc-center { filter: saturate(.78); }
.snv-music-art .snv-soundbars span { animation-play-state: paused !important; opacity: .55; }
.snv-music-art.is-playing .snv-soundbars span { animation-play-state: running !important; opacity: 1; }
.snv-music-art.is-paused .snv-soundbars span { animation-play-state: paused !important; opacity: .55; }
.snv-music-art.is-stopped .snv-soundbars span { animation: none !important; height: 3px !important; opacity: .35; }
@media (max-width: 760px) { .snv-player-status { max-width: 63%; padding: 4px 7px; font-size: 8px; } }


/* SENSIK COMPACT PLAYER + LIBRARY VIEWPORT FIT (late override for earlier cover-upsize rules) */
#studio-workspace .music-panel > .hero-player-area {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 10px 12px 12px !important;
  gap: 6px !important;
  overflow: hidden !important;
}
#studio-workspace .music-panel .cf-carousel {
  flex: 0 0 230px !important;
  height: 230px !important;
  min-height: 230px !important;
  max-height: 230px !important;
  margin: 0 auto 1px !important;
  overflow: hidden !important;
}
#studio-workspace .music-panel .cf-card {
  width: clamp(150px, 18vw, 205px) !important;
  height: clamp(166px, 19vw, 215px) !important;
}
#studio-workspace .music-panel .cf-card.is-center {
  width: clamp(195px, 22vw, 235px) !important;
  height: clamp(200px, 22vw, 228px) !important;
}
#studio-workspace .music-panel .hero-controls-area {
  width: min(100%, 470px) !important;
}
#studio-workspace .music-panel .hero-title { font-size: clamp(14px, 1.2vw, 16px) !important; margin-bottom: 4px !important; }
#studio-workspace .music-panel .hero-tags { margin-bottom: 3px !important; }
#studio-workspace .music-panel .hero-progress-bar { margin: 5px 0 7px !important; }
#studio-workspace .music-panel .hero-buttons { min-height: 40px !important; gap: 9px !important; }
#studio-workspace .music-panel .h-play-btn { width: 40px !important; height: 40px !important; }
#studio-workspace .music-panel > .music-feed {
  box-sizing: border-box !important;
  flex: 1 1 0% !important;
  width: 100% !important;
  height: auto !important;
  min-height: 170px !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}
#studio-workspace .music-panel .list-item {
  grid-template-columns: 48px minmax(0, 1fr) 0 96px !important;
  gap: 7px !important;
  padding: 5px 8px !important;
  margin: 0 0 5px !important;
}
#studio-workspace .music-panel .li-thumb-play { width: 46px !important; height: 46px !important; border-radius: 10px !important; }
#studio-workspace .music-panel .li-icon-btn { width: 27px !important; height: 27px !important; }
#studio-workspace .music-panel .li-actions-right { gap: 4px !important; }
#studio-workspace .music-panel > .music-pagination { flex: 0 0 auto !important; }

@media (min-width: 1051px) {
  #studio-workspace .music-panel > .hero-player-area {
    flex-basis: 445px !important; min-height: 445px !important; max-height: 445px !important;
  }
  #studio-workspace .music-panel .cf-carousel { flex-basis: 230px !important; height: 230px !important; min-height: 230px !important; max-height: 230px !important; }
  #studio-workspace .music-panel .cf-card.is-center { width: clamp(215px, 21vw, 250px) !important; height: clamp(205px, 20vw, 225px) !important; }
}
@media (min-width: 761px) and (max-width: 1050px) {
  #studio-workspace .music-panel > .hero-player-area {
    flex-basis: 425px !important; min-height: 425px !important; max-height: 425px !important;
    padding: 9px 9px 10px !important;
  }
  #studio-workspace .music-panel > .hero-player-area::before { min-height: 30px !important; padding: 6px 12px !important; }
  #studio-workspace .music-panel .cf-carousel { flex-basis: 225px !important; height: 225px !important; min-height: 225px !important; max-height: 225px !important; }
  #studio-workspace .music-panel .cf-card { width: clamp(150px, 18vw, 195px) !important; height: clamp(165px, 19vw, 210px) !important; }
  #studio-workspace .music-panel .cf-card.is-center { width: clamp(195px, 22vw, 230px) !important; height: clamp(195px, 21vw, 220px) !important; }
  #studio-workspace .music-panel .hero-progress-bar { margin: 4px 0 5px !important; }
  #studio-workspace .music-panel .hero-buttons { min-height: 36px !important; }
  #studio-workspace .music-panel .h-play-btn { width: 38px !important; height: 38px !important; }
}
@media (max-width: 760px) {
  #studio-workspace .music-panel > .hero-player-area {
    flex-basis: auto !important; min-height: 420px !important; max-height: none !important;
    padding: 10px 7px 12px !important; gap: 5px !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-basis: 210px !important; height: 210px !important; min-height: 210px !important; max-height: 210px !important; }
  #studio-workspace .music-panel .cf-card { width: clamp(142px, 44vw, 178px) !important; height: clamp(160px, 47vw, 190px) !important; }
  #studio-workspace .music-panel .cf-card.is-center { width: clamp(180px, 56vw, 220px) !important; height: clamp(185px, 54vw, 210px) !important; }
  #studio-workspace .music-panel .hero-controls-area { width: 100% !important; padding: 0 5px !important; }
  #studio-workspace .music-panel .hero-title { font-size: 14px !important; }
  #studio-workspace .music-panel .hero-progress-bar { margin: 4px 0 6px !important; gap: 6px !important; }
  #studio-workspace .music-panel .hero-buttons { min-height: 38px !important; gap: 7px !important; }
  #studio-workspace .music-panel .h-play-btn { width: 38px !important; height: 38px !important; }
  #studio-workspace .music-panel > .music-feed { flex: 0 0 auto !important; min-height: 220px !important; max-height: 58vh !important; overflow-y: auto !important; }
  #studio-workspace .music-panel .list-item { grid-template-columns: 46px minmax(0,1fr) auto !important; padding: 6px 7px !important; }
  #studio-workspace .music-panel .li-thumb-play { width: 44px !important; height: 44px !important; }
}
@media (min-width: 761px) and (max-height: 760px) {
  #studio-workspace .music-panel > .hero-player-area { flex-basis: 415px !important; min-height: 415px !important; max-height: 415px !important; }
  #studio-workspace .music-panel > .hero-player-area::before { min-height: 28px !important; padding: 5px 11px !important; }
  #studio-workspace .music-panel .cf-carousel { flex-basis: 205px !important; height: 205px !important; min-height: 205px !important; max-height: 205px !important; }
  #studio-workspace .music-panel .hero-progress-bar { margin: 3px 0 4px !important; }
  #studio-workspace .music-panel .hero-buttons { min-height: 34px !important; }
}