:root{--red:#73070B;--red2:#73070B;--bg:#090a0e;--panel:#121318;--panel2:#181a20;--line:#2b2e36;--muted:#9ca1ad;--white:#f5f5f4}
*{box-sizing:border-box;border-radius:0!important}html,body{margin:0;background:#f4f0e9;color:#fff;font-family:Arial,Helvetica,sans-serif}a{text-decoration:none;color:inherit}button,input{font:inherit}
.os-topbar{min-height:68px;background:#050608;border-bottom:2px solid var(--red)}.brand-row{min-height:68px;display:flex;align-items:center;gap:32px;padding:0 28px}.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:900}.brand span{background:var(--red);padding:14px 12px}.brand-row nav{display:flex;gap:21px;align-items:center;flex:1;font-size:13px}.brand-row nav a.active,.brand-row nav a:hover{color:var(--red)}.back-dashboard{border:1px solid #454a55;padding:9px 12px;font-size:11px}
.music-shell{max-width:1420px;margin:auto;padding:27px 28px 60px}.music-hero{background:linear-gradient(115deg,#0b0c10 0%,#250b11 55%,#73070B 100%);border:1px solid #292d35;border-left:4px solid var(--red);padding:27px;display:flex;justify-content:space-between;align-items:center;gap:28px}.music-hero>div:first-child>span,.panel-heading span,.playlist-head span{color:var(--red);font-size:10px;font-weight:900;letter-spacing:1.2px}.music-hero h1{font-size:38px;margin:5px 0}.music-hero p{color:#bec2ca;margin:0}.music-stats{display:grid;grid-template-columns:repeat(3,130px);gap:10px}.music-stats article{background:#101116;border:1px solid #30333b;padding:15px}.music-stats span{display:block;color:#969ba6;font-size:10px}.music-stats strong{display:block;font-size:25px;margin-top:5px}
.music-tabs{display:grid;grid-template-columns:repeat(3,1fr);margin:18px 0 0;border:1px solid var(--line)}.tab{border:0;border-right:1px solid var(--line);background:#111217;color:#fff;padding:15px;font-weight:800;cursor:pointer}.tab:last-child{border-right:0}.tab.active{background:var(--red);color:#fff}
.tab-panel{display:none;background:#0d0e12;border:1px solid var(--line);border-top:0;padding:20px}.tab-panel.active{display:block}.panel-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:15px}.panel-heading h2,.panel-heading h3{margin:5px 0 0}.panel-heading p{margin:0;color:#9ca1ad;font-size:11px}.panel-heading.compact{margin-top:25px}
.track-list{border:1px solid #2c3037}.track-row{display:grid;grid-template-columns:62px minmax(0,1fr) 120px 120px auto;gap:12px;align-items:center;padding:10px;background:#121318;border-top:1px solid #2b2e35}.track-row:first-child{border-top:0}.cover{width:58px;height:58px;background:#22252c center/cover no-repeat}.track-info strong{display:block;font-size:13px}.track-info span{display:block;color:#9ca1aa;font-size:10px;margin-top:4px}.track-meta span{display:block;color:#8f949e;font-size:9px}.track-meta strong{font-size:11px}.row-actions{display:flex;gap:7px;justify-content:flex-end}.row-actions a,.row-actions button,.available-card button{background:#73070B;border:0;color:#fff;padding:9px 11px;font-size:10px;font-weight:800;cursor:pointer}.row-actions .ghost{background:#181a20;border:1px solid #3a3e48}.row-actions .remove{background:#101116;border:1px solid #4c515e}
.playlist-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:14px}.playlist-sidebar,.playlist-detail{background:#111217;border:1px solid #2b2e36;padding:14px}.create-playlist label{display:block;font-size:11px;font-weight:800;margin-bottom:8px}.create-playlist>div{display:grid;grid-template-columns:1fr auto}.create-playlist input{background:#090a0e;border:1px solid #3a3e47;color:#fff;padding:11px}.create-playlist button{border:0;background:var(--red);color:#fff;font-weight:800;padding:0 14px}.playlist-list{margin-top:14px}.playlist-item{display:grid;grid-template-columns:1fr auto;align-items:center;border-top:1px solid #2d3038;padding:11px;cursor:pointer}.playlist-item:first-child{border-top:0}.playlist-item.active{background:#73070B;border-left:3px solid var(--red)}.playlist-item strong{font-size:12px}.playlist-item span{color:#8f949f;font-size:9px}.playlist-count{font-size:10px;color:#b9bdc5}
.playlist-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #2a2d34;padding-bottom:12px;margin-bottom:12px}.playlist-head h3{font-size:22px;margin:4px 0}.danger-button{border:1px solid #73070B;background:#2b0c12;color:#73070B;padding:9px 12px;cursor:pointer}.available-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.available-card{border:1px solid #2c3037;background:#17191f;padding:11px}.available-card strong{display:block;font-size:11px}.available-card span{display:block;color:#90959f;font-size:9px;margin:4px 0 9px}.available-card button{width:100%;background:#20232a;border:1px solid #3a3f49}.available-card button:hover{border-color:var(--red)}
.empty{padding:24px;text-align:center;color:#9297a1}.empty.large{min-height:300px;display:grid;place-items:center}
@media(max-width:950px){.brand-row{flex-wrap:wrap;padding:10px 16px}.brand-row nav{order:3;width:100%;overflow:auto}.music-hero{align-items:flex-start;flex-direction:column}.music-stats{grid-template-columns:repeat(3,1fr);width:100%}.playlist-layout{grid-template-columns:1fr}.available-grid{grid-template-columns:1fr 1fr}.track-row{grid-template-columns:58px 1fr auto}.track-meta{display:none}}
@media(max-width:620px){.music-shell{padding:18px 10px 40px}.music-tabs{grid-template-columns:1fr}.tab{border-bottom:1px solid var(--line)}.music-stats{grid-template-columns:1fr}.panel-heading{align-items:flex-start;flex-direction:column}.available-grid{grid-template-columns:1fr}.track-row{grid-template-columns:52px 1fr}.row-actions{grid-column:1/-1;justify-content:flex-start}}


/* =========================================================
   STAGE 17 — PLAYLISTS + FAVORITES COMPLETION
   ========================================================= */

.playlist-item{
  cursor:pointer !important;
  transition:border-color .15s ease,background .15s ease !important;
}

.playlist-item:hover{
  border-color:#73070B !important;
}

.playlist-item.active{
  border-color:#73070B !important;
  background:#1a1115 !important;
}

.row-actions button,
.row-actions a{
  min-width:78px !important;
}

.available-card{
  border-top:3px solid #73070B !important;
}

.favorite-heart{
  color:#73070B !important;
  font-size:16px !important;
  line-height:1 !important;
}

.library-toast{
  position:fixed !important;
  right:18px !important;
  bottom:18px !important;
  z-index:90 !important;
  background:#111318 !important;
  border:1px solid #3b4049 !important;
  border-left:4px solid #73070B !important;
  color:#fff !important;
  padding:12px 14px !important;
  font-size:10px !important;
  box-shadow:0 12px 30px #0008 !important;
  max-width:320px !important;
}

.library-toast.error{
  border-left-color:#73070B !important;
}


/* STAGE 18 — My Music playback */
.row-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
}
.row-actions [data-library-play]{
  border:1px solid #73070B !important;
  background:#111318 !important;
  color:#fff !important;
  padding:8px 12px !important;
  cursor:pointer !important;
}
.row-actions [data-library-play]:hover{
  background:linear-gradient(135deg, #73070B 0%, #73070B 38%, #310306 72%, #050506 100%) !important;
}


/* =========================================================
   STAGE 19 — FULL OSBEATS PLAYER IN MY MUSIC
   ========================================================= */

body{
  padding-bottom:96px !important;
}

.os-player{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:100 !important;
  min-height:88px !important;
  display:grid !important;
  grid-template-columns:280px minmax(0,1fr) 300px !important;
  align-items:center !important;
  gap:18px !important;
  padding:11px 22px !important;
  background:#07080b !important;
  border-top:2px solid #73070B !important;
  box-shadow:0 -8px 25px #000a !important;
}

.os-player[hidden]{
  display:none !important;
}

.player-track{
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:58px minmax(0,1fr) !important;
  gap:11px !important;
  align-items:center !important;
}

.player-cover{
  width:58px !important;
  height:58px !important;
  background-color:#20232a !important;
  background-position:center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  border:1px solid #393d47 !important;
}

.player-track-copy{
  min-width:0 !important;
}

.player-track-copy strong{
  display:block !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  font-size:13px !important;
}

.player-track-copy span{
  display:block !important;
  margin-top:4px !important;
  color:#989da7 !important;
  font-size:10px !important;
}

.player-controls{
  min-width:0 !important;
  display:grid !important;
  gap:7px !important;
}

.transport{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:13px !important;
}

.transport button,
.player-actions button{
  border:0 !important;
  background:transparent !important;
  color:#fff !important;
  cursor:pointer !important;
  padding:4px !important;
}

.transport button svg,
.player-actions button svg{
  width:20px !important;
  height:20px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.9 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.transport .main-play{
  width:36px !important;
  height:36px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid #fff !important;
  background:linear-gradient(135deg, #73070B 0%, #73070B 38%, #310306 72%, #050506 100%) !important;
}

.transport .main-play svg{
  width:18px !important;
  height:18px !important;
}

.wave-row{
  display:grid !important;
  grid-template-columns:38px minmax(0,1fr) 38px !important;
  gap:9px !important;
  align-items:center !important;
}

.wave-row>span{
  color:#9fa4ae !important;
  font-size:9px !important;
  text-align:center !important;
}

.osbeats-real-waveform{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:42px !important;
  overflow:hidden !important;
  border:0 !important;
  padding:0 !important;
  background:transparent !important;
  cursor:pointer !important;
}

.osbeats-real-wave-svg{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
}

.osbeats-real-wave-svg path{
  stroke:none !important;
}

.osbeats-real-wave-gray path{
  fill:#555b65 !important;
}

.osbeats-real-wave-progress{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:visible !important;
  pointer-events:none !important;
  z-index:2 !important;
  clip-path:inset(0 100% 0 0) !important;
  -webkit-clip-path:inset(0 100% 0 0) !important;
}

.osbeats-real-wave-progress .osbeats-real-wave-svg{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

.osbeats-real-wave-red path{
  fill:#73070B !important;
}

.player-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:12px !important;
}

.player-actions button.active{
  color:#73070B !important;
}

.volume-wrap{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
}

#volumeSlider{
  width:100px !important;
  accent-color:#73070B !important;
}

@media(max-width:900px){
  .os-player{
    grid-template-columns:200px minmax(0,1fr) !important;
  }
  .player-actions{
    display:none !important;
  }
}

@media(max-width:650px){
  .os-player{
    grid-template-columns:1fr !important;
    gap:7px !important;
    padding:9px 12px !important;
  }
  .player-track{
    grid-template-columns:44px minmax(0,1fr) !important;
  }
  .player-cover{
    width:44px !important;
    height:44px !important;
  }
}


/* =========================================================
   PURCHASE FULFILLMENT + LICENSE DETAILS
   ========================================================= */

.purchase-row{
  grid-template-columns:64px minmax(180px,1.4fr) minmax(80px,.55fr) minmax(110px,.75fr) minmax(100px,.7fr) auto;
}

.purchase-row .track-info small,
.download-status small{
  display:block;
  margin-top:4px;
  color:#747b86;
  font-size:9px;
}

.purchase-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}

.button-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.license-modal[hidden]{
  display:none !important;
}

.license-modal{
  position:fixed;
  inset:0;
  z-index:10020;
  display:grid;
  place-items:center;
  padding:24px;
}

.license-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.8);
}

.license-modal-card{
  position:relative;
  z-index:1;
  width:min(860px,96vw);
  max-height:90vh;
  overflow:auto;
  background:#111318;
  border:1px solid #343943;
  border-top:3px solid #73070B;
  box-shadow:0 28px 70px rgba(0,0,0,.5);
}

.license-modal-card>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 20px;
  border-bottom:1px solid #343943;
}

.license-modal-card>header span,
.license-terms-box>span,
.license-buyer>span{
  display:block;
  color:#73070B;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}

.license-modal-card>header h2{
  margin:4px 0 0;
  color:#fff;
  font-size:22px;
}

.license-modal-card>header button{
  width:38px;
  height:38px;
  background:#0c0e12;
  border:1px solid #414650;
  color:#fff;
  font-size:23px;
  cursor:pointer;
}

.license-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin:16px 20px;
  background:#343943;
  border:1px solid #343943;
}

.license-summary article{
  padding:12px;
  background:#0d0f13;
}

.license-summary span{
  display:block;
  color:#858c97;
  font-size:9px;
}

.license-summary strong{
  display:block;
  margin-top:5px;
  color:#fff;
  font-size:13px;
}

.license-buyer,
.license-terms-box{
  margin:16px 20px;
  padding:14px;
  background:#0d0f13;
  border:1px solid #343943;
}

.license-buyer strong{
  display:block;
  margin-top:5px;
  color:#fff;
  font-size:14px;
}

.license-buyer small{
  display:block;
  margin-top:3px;
  color:#858c97;
}

.license-terms-box pre{
  min-height:150px;
  max-height:320px;
  overflow:auto;
  margin:10px 0 0;
  padding:13px;
  background:#08090c;
  border:1px solid #2f343c;
  color:#d8dce3;
  font-family:inherit;
  font-size:11px;
  line-height:1.55;
  white-space:pre-wrap;
}

.license-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:0 20px 20px;
}

.license-modal-actions a,
.license-modal-actions button{
  min-height:42px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #414650;
  background:#0d0f13;
  color:#fff;
  text-decoration:none;
  font-weight:900;
  cursor:pointer;
}

.license-modal-actions .primary{
  background:linear-gradient(135deg, #73070B 0%, #73070B 38%, #310306 72%, #050506 100%);
  border-color:#73070B;
}

body.license-modal-open{
  overflow:hidden;
}

@media(max-width:1050px){
  .purchase-row{
    grid-template-columns:64px 1fr 1fr;
  }

  .purchase-actions{
    grid-column:1/-1;
    justify-content:flex-start;
  }
}

@media(max-width:650px){
  .license-summary{
    grid-template-columns:1fr 1fr;
  }
}

/* =========================================================
   OSBEATS — MY MUSIC GLOBAL PLAYER POLISH
   Visual-only refinement. Playback/waveform behavior unchanged.
   ========================================================= */
body{
  padding-bottom:88px !important;
}

.os-player{
  min-height:80px !important;
  grid-template-columns:250px minmax(0,1fr) 285px !important;
  gap:20px !important;
  padding:9px 20px !important;
  border-top:1px solid #73070B !important;
  box-shadow:0 -6px 20px rgba(0,0,0,.45) !important;
}

.player-track{
  grid-template-columns:50px minmax(0,1fr) !important;
  gap:12px !important;
}

.player-cover{
  width:50px !important;
  height:50px !important;
  border-color:#454a55 !important;
}

.player-track-copy strong{
  font-size:14px !important;
  line-height:1.2 !important;
}

.player-track-copy span{
  margin-top:3px !important;
  font-size:10px !important;
  line-height:1.2 !important;
}

.player-controls{
  gap:3px !important;
}

.transport{
  gap:15px !important;
  min-height:34px !important;
}

.transport button,
.player-actions button{
  min-width:32px !important;
  min-height:32px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid transparent !important;
  transition:background .16s ease,border-color .16s ease,color .16s ease !important;
}

.transport button:hover,
.player-actions button:hover{
  background:#14171d !important;
  border-color:#343945 !important;
}

.transport .main-play{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  border:1px solid #73070B !important;
  background:linear-gradient(135deg, #73070B 0%, #73070B 38%, #310306 72%, #050506 100%) !important;
}

.transport .main-play:hover{
  background:#73070B !important;
  border-color:#73070B !important;
}

.wave-row{
  grid-template-columns:34px minmax(0,1fr) 34px !important;
  gap:8px !important;
}

.wave-row>span{
  font-size:9px !important;
  color:#a5aab4 !important;
  font-variant-numeric:tabular-nums !important;
}

.osbeats-real-waveform{
  height:36px !important;
}

.player-actions{
  gap:7px !important;
  padding-left:8px !important;
}

.player-actions button{
  width:34px !important;
  height:34px !important;
}

.volume-wrap{
  gap:8px !important;
}

#volumeSlider{
  width:90px !important;
}

@media(max-width:1100px){
  .os-player{
    grid-template-columns:220px minmax(0,1fr) 235px !important;
    gap:14px !important;
  }
  #volumeSlider{
    width:70px !important;
  }
}

@media(max-width:900px){
  body{
    padding-bottom:82px !important;
  }
  .os-player{
    grid-template-columns:190px minmax(0,1fr) !important;
    min-height:76px !important;
    padding:8px 14px !important;
  }
}


/* =========================================================
   NOW PLAYING EXPANDED VIEW
   ========================================================= */
body.now-playing-open{
  overflow:hidden !important;
}

.now-playing-modal{
  position:fixed;
  inset:0;
  z-index:500;
}

.now-playing-modal[hidden]{
  display:none !important;
}

.now-playing-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(5px);
}

.now-playing-card{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(900px,calc(100vw - 48px));
  min-height:470px;
  display:grid;
  grid-template-columns:minmax(260px,340px) minmax(0,1fr);
  gap:40px;
  align-items:center;
  padding:44px;
  background:#0b0d12;
  border:1px solid #343944;
  border-top:3px solid #73070B;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
  color:#fff;
}

.now-playing-close{
  position:absolute;
  top:18px;
  right:18px;
  width:40px;
  height:40px;
  border:1px solid #454a55;
  background:#11141a;
  color:#fff;
  font-size:25px;
  line-height:1;
  cursor:pointer;
}

.now-playing-close:hover{
  border-color:#73070B;
}

.now-playing-art-wrap{
  width:100%;
  max-width:340px;
  justify-self:center;
}

.now-playing-cover{
  width:100%;
  aspect-ratio:1/1;
  background:#171a21 center/cover no-repeat;
  border:1px solid #373c46;
  box-shadow:0 20px 45px rgba(0,0,0,.45);
}

.now-playing-content{
  min-width:0;
}

.now-playing-kicker{
  display:block;
  margin-bottom:10px;
  color:#73070B;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
}

.now-playing-content h2{
  margin:0;
  font-size:clamp(32px,4vw,54px);
  line-height:1.03;
  overflow-wrap:anywhere;
}

.now-playing-content p{
  margin:10px 0 34px;
  color:#9ba1ac;
  font-size:15px;
}

.now-playing-seek-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 42px;
  gap:12px;
  align-items:center;
  margin-bottom:30px;
}

.now-playing-seek-row span{
  color:#969ca7;
  font-size:10px;
  text-align:center;
}

#nowPlayingSeek{
  width:100%;
  accent-color:#73070B;
  cursor:pointer;
}

.now-playing-transport{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  margin-bottom:30px;
}

.now-playing-transport button{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid #3c414b;
  background:#101319;
  color:#fff;
  cursor:pointer;
}

.now-playing-transport button:hover{
  border-color:#73070B;
}

.now-playing-transport svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.now-playing-transport .now-playing-main-play{
  width:66px;
  height:66px;
  background:linear-gradient(135deg, #73070B 0%, #73070B 38%, #310306 72%, #050506 100%);
  border-color:#73070B;
}

.now-playing-transport .now-playing-main-play svg{
  width:28px;
  height:28px;
}

.now-playing-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.now-playing-actions button{
  min-height:44px;
  border:1px solid #3b404a;
  background:#11141a;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

.now-playing-actions button:hover,
.now-playing-actions button.active{
  border-color:#73070B;
  color:#73070B;
}

@media(max-width:760px){
  .now-playing-card{
    width:min(560px,calc(100vw - 24px));
    max-height:calc(100vh - 24px);
    overflow:auto;
    grid-template-columns:1fr;
    gap:24px;
    padding:56px 24px 28px;
  }
  .now-playing-art-wrap{
    width:min(300px,80vw);
    margin:0 auto;
  }
  .now-playing-content h2{
    font-size:34px;
  }
  .now-playing-content p{
    margin-bottom:22px;
  }
}


.now-playing-share{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #262b34;
}

.now-playing-share-label{
  display:block;
  margin-bottom:9px;
  color:#777e8a;
  font-size:9px;
  font-weight:800;
  letter-spacing:.15em;
}

.now-playing-share-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.now-playing-share-buttons button{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid #3b404a;
  background:#11141a;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

.now-playing-share-buttons button:hover{
  border-color:#73070B;
  color:#73070B;
}

.share-facebook-mark,
.share-x-mark{
  display:inline-grid;
  place-items:center;
  width:21px;
  height:21px;
  font-size:18px;
  font-weight:900;
  line-height:1;
}

.share-facebook-mark{
  font-family:Arial,sans-serif;
  font-size:20px;
}

@media(max-width:520px){
  .now-playing-share-buttons{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   NOW PLAYING ARTWORK FIT + CARD SIZE REPAIR
   Keeps the full uploaded track artwork visible instead of cropping it.
   ========================================================= */
.now-playing-card{
  width:min(820px,calc(100vw - 48px)) !important;
  min-height:0 !important;
  grid-template-columns:280px minmax(0,1fr) !important;
  gap:34px !important;
  padding:36px !important;
}

.now-playing-art-wrap{
  width:280px !important;
  max-width:280px !important;
}

.now-playing-cover{
  width:280px !important;
  height:280px !important;
  aspect-ratio:auto !important;
  background-color:#11141a !important;
  background-position:center !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  box-shadow:0 16px 36px rgba(0,0,0,.42) !important;
}

.now-playing-content h2{
  font-size:clamp(30px,3.5vw,46px) !important;
}

.now-playing-content p{
  margin:8px 0 26px !important;
}

@media(max-width:760px){
  .now-playing-card{
    width:min(540px,calc(100vw - 24px)) !important;
    grid-template-columns:1fr !important;
    gap:20px !important;
    padding:54px 22px 24px !important;
  }

  .now-playing-art-wrap{
    width:min(260px,72vw) !important;
    max-width:260px !important;
  }

  .now-playing-cover{
    width:min(260px,72vw) !important;
    height:min(260px,72vw) !important;
  }
}


/* COVER THUMBNAIL CONSISTENCY
   My Music rows use the same square center-crop as the dashboard. */
.track-row .cover{
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}


/* =========================================================
   MY PLAYLISTS COMPACT LAYOUT REPAIR
   Removes the hidden empty-state space and lets the page size to content.
   ========================================================= */
#playlistEmpty[hidden],
#playlistContent[hidden]{
  display:none !important;
}

.playlist-layout{
  grid-template-columns:280px minmax(0,1fr) !important;
  gap:14px !important;
  align-items:start !important;
}

.playlist-sidebar,
.playlist-detail{
  align-self:start !important;
  min-height:0 !important;
}

.playlist-detail{
  padding:16px !important;
}

.playlist-item{
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:12px !important;
  padding:12px 10px !important;
}

.playlist-item > div{
  min-width:0 !important;
}

.playlist-item > div strong{
  display:block !important;
  margin-bottom:4px !important;
  line-height:1.2 !important;
}

.playlist-item > div span{
  display:block !important;
  line-height:1.25 !important;
  white-space:normal !important;
}

.playlist-count{
  align-self:center !important;
  white-space:nowrap !important;
}

.playlist-head{
  margin-bottom:12px !important;
  padding-bottom:12px !important;
}

.playlist-head h3{
  margin:4px 0 0 !important;
}

.add-music{
  margin-top:18px !important;
}

.add-music .panel-heading.compact{
  margin-top:0 !important;
  margin-bottom:10px !important;
}

.available-grid{
  grid-template-columns:repeat(auto-fit,minmax(210px,280px)) !important;
  justify-content:start !important;
}

.empty.large{
  min-height:160px !important;
}

@media(max-width:950px){
  .playlist-layout{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   MY PLAYLISTS SIDEBAR + AUTO-FIT REPAIR
   Fixes clipped Create button and keeps the sidebar balanced.
   ========================================================= */
.playlist-layout{
  grid-template-columns:310px minmax(0,1fr) !important;
}

.create-playlist > div{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  width:100% !important;
}

.create-playlist input{
  min-width:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
}

.create-playlist button{
  white-space:nowrap !important;
  padding:0 16px !important;
}

.playlist-sidebar{
  overflow:hidden !important;
}

@media(max-width:950px){
  .playlist-layout{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   MY PLAYLISTS FINAL POLISH
   Small visual refinements only; no playlist logic changes.
   ========================================================= */
#deletePlaylist{
  min-height:38px !important;
  padding:0 14px !important;
  font-size:12px !important;
  border-color:#73070B !important;
  color:#73070B !important;
  background:transparent !important;
}

#deletePlaylist:hover{
  background:rgba(89,5,9,.08) !important;
  border-color:#73070B !important;
  color:#fff !important;
}

.playlist-item{
  transition:background .16s ease,border-color .16s ease,transform .16s ease !important;
}

.playlist-item:hover{
  background:#171a21 !important;
  border-left-color:#73070B !important;
  transform:translateX(2px) !important;
}

.playlist-item.active{
  background:#1a1116 !important;
}

.playlist-item > div strong{
  margin-bottom:6px !important;
}

.playlist-item > div span{
  color:#8f96a2 !important;
}

.playlist-track{
  align-items:center !important;
}

.playlist-track .row-actions{
  gap:8px !important;
  justify-content:flex-end !important;
}

.playlist-track .row-actions button{
  min-width:78px !important;
}

.add-music{
  margin-top:14px !important;
}

.available-grid{
  gap:10px !important;
}

.available-card{
  margin-top:0 !important;
}


/* =========================================================
   MY PLAYLISTS — DELETE BUTTON TEXT CONTRAST FIX
   Target the real playlist delete control on My Music.
   ========================================================= */
#deletePlaylist,
#deletePlaylistBtn,
button#deletePlaylist,
button#deletePlaylistBtn,
.playlist-content #deletePlaylist,
.playlist-content .delete-playlist,
.playlist-panel #deletePlaylist,
.playlist-panel .delete-playlist,
.playlist-header #deletePlaylist,
.playlist-header .delete-playlist {
  color:#fff !important;
}

#deletePlaylist:hover,
#deletePlaylistBtn:hover,
button#deletePlaylist:hover,
button#deletePlaylistBtn:hover,
.playlist-content #deletePlaylist:hover,
.playlist-content .delete-playlist:hover,
.playlist-panel #deletePlaylist:hover,
.playlist-panel .delete-playlist:hover,
.playlist-header #deletePlaylist:hover,
.playlist-header .delete-playlist:hover {
  color:#fff !important;
}


/* =========================================================
   PLAYER ARTWORK CONSISTENCY — POLISH V1
   All player artwork uses the same square center-crop behavior
   as OSBeats marketplace cards.
   ========================================================= */

.player-cover,
.now-playing-cover,
.track-row .cover{
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}

/* Override an older late rule that changed the expanded Now Playing
   artwork back to "contain" and created empty bands around wide covers. */
.now-playing-cover{
  background-size:cover !important;
}

/* =========================================================
   MY MUSIC / LIBRARY — AUTHENTICATED PAGE CONTRAST FIX
   Keeps all dark library panels readable and independent from
   public/legal page typography rules.
   ========================================================= */
.music-hero,
.music-hero h1,
.music-hero h2,
.music-hero h3,
.music-stats strong,
.music-tabs,
.tab-panel,
.tab-panel h2,
.tab-panel h3,
.track-row,
.track-info strong,
.track-meta strong,
.playlist-sidebar,
.playlist-detail,
.create-playlist label,
.playlist-item strong,
.playlist-head h3,
.available-card strong,
.os-player,
.player-track-copy strong{
  color:#fff !important;
}

.music-hero h1{
  opacity:1 !important;
}

.music-stats strong{
  opacity:1 !important;
}

.panel-heading h2,
.panel-heading h3{
  color:#fff !important;
  opacity:1 !important;
}

.track-info strong,
.track-meta strong{
  color:#fff !important;
}

.playlist-item strong,
.available-card strong{
  color:#fff !important;
}

.back-dashboard,
.brand-row nav a,
.brand,
.brand strong{
  color:#fff !important;
}

.brand-row nav a.active,
.brand-row nav a:hover{
  color:#73070B !important;
}