/* BuddySocial v10.80 - premium desktop + mobile player rebuild */
.profile-player.profile-playlist{
  --bs-player-accent:var(--player-accent,#f39a16);
  position:relative !important;
  display:grid !important;
  grid-template-columns:170px minmax(0,1fr) !important;
  grid-template-areas:
    "brand brand"
    "cover main"
    "cover controls"
    "toggle toggle"
    "list list" !important;
  width:100% !important;
  max-width:820px !important;
  min-width:0 !important;
  gap:14px 20px !important;
  padding:18px 20px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 14% 18%,color-mix(in srgb,var(--bs-player-accent) 20%,transparent),transparent 32%),
    radial-gradient(circle at 78% 58%,rgba(120,0,0,.16),transparent 40%),
    linear-gradient(145deg,#0a0b10 0%,#10090d 48%,#090a0e 100%) !important;
  color:#fff !important;
  box-shadow:0 18px 40px rgba(5,8,16,.28),inset 0 1px 0 rgba(255,255,255,.09) !important;
  overflow:hidden !important;
  contain:layout paint !important;
  isolation:isolate !important;
}
.profile-player.profile-playlist::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:linear-gradient(115deg,rgba(255,255,255,.04),transparent 28%,transparent 72%,color-mix(in srgb,var(--bs-player-accent) 8%,transparent)) !important;
}
.profile-player.profile-playlist audio{display:none !important}

.profile-player.profile-playlist .pp-brand{
  grid-area:brand !important;
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  width:auto !important;
  max-width:none !important;
  min-height:34px !important;
  padding:0 0 11px !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  background:transparent !important;
}
.profile-player.profile-playlist .pp-brand img{
  width:34px !important;height:34px !important;object-fit:contain !important;border-radius:8px !important;background:rgba(255,255,255,.94) !important;
}
.profile-player.profile-playlist .pp-brand span{
  max-width:none !important;color:#fff !important;font-size:12px !important;font-weight:900 !important;letter-spacing:.08em !important;text-transform:uppercase !important;
}
.profile-player.profile-playlist:not(:has(.pp-brand))::after{
  content:"♫  BuddySocial Music";
  grid-area:brand;
  align-self:center;
  display:block;
  padding:0 0 11px;
  border-bottom:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.profile-player.profile-playlist .pp-vinyl-wrap{
  grid-area:cover !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  padding:4px 0 !important;
  overflow:visible !important;
}
.profile-player.profile-playlist .pp-vinyl{
  position:relative !important;
  width:154px !important;height:154px !important;max-width:154px !important;max-height:154px !important;
  border-radius:50% !important;
  padding:4px !important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--bs-player-accent) 88%,#fff),color-mix(in srgb,var(--bs-player-accent) 74%,#111)) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 0 22px color-mix(in srgb,var(--bs-player-accent) 34%,transparent),0 10px 24px rgba(0,0,0,.42) !important;
  animation:none !important;
  overflow:hidden !important;
}
.profile-player.profile-playlist .pp-vinyl-label{
  position:absolute !important;inset:5px !important;border-radius:50% !important;overflow:hidden !important;
  background:radial-gradient(circle at 35% 30%,#41301c,#131217 62%,#07080b) !important;
}
.profile-player.profile-playlist .pp-vinyl-label::before{
  content:"♪";position:absolute;inset:0;display:grid;place-items:center;color:color-mix(in srgb,var(--bs-player-accent) 88%,#fff);font-size:44px;font-weight:900;opacity:.78;
}
.profile-player.profile-playlist .pp-vinyl-cover{
  position:relative !important;z-index:2 !important;width:100% !important;height:100% !important;object-fit:cover !important;border-radius:50% !important;
}
.profile-player.profile-playlist .pp-vinyl-hole{display:none !important}
.profile-player.profile-playlist.is-playing .pp-vinyl{box-shadow:0 0 0 1px rgba(255,255,255,.13),0 0 30px color-mix(in srgb,var(--bs-player-accent) 48%,transparent),0 12px 28px rgba(0,0,0,.48) !important}

.profile-player.profile-playlist .pp-main{
  grid-area:main !important;
  align-self:center !important;
  min-width:0 !important;
  padding:5px 0 0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.profile-player.profile-playlist .pp-now{
  display:flex !important;align-items:center !important;flex-wrap:wrap !important;gap:7px !important;
  height:auto !important;min-height:0 !important;max-height:none !important;margin:0 0 12px !important;overflow:visible !important;
}
.profile-player.profile-playlist .pp-title{
  flex:1 0 100% !important;display:block !important;min-width:0 !important;max-width:100% !important;
  color:#fff !important;font-size:clamp(19px,2.4vw,29px) !important;line-height:1.12 !important;font-weight:950 !important;
  letter-spacing:-.025em !important;white-space:normal !important;overflow:hidden !important;text-overflow:ellipsis !important;text-shadow:0 2px 5px rgba(0,0,0,.45) !important;
}
.profile-player.profile-playlist .pp-live-badge,
.profile-player.profile-playlist .pp-listeners,
.profile-player.profile-playlist .pp-trackno{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;min-height:25px !important;height:auto !important;
  padding:4px 9px !important;border-radius:999px !important;font-size:9px !important;line-height:1 !important;font-weight:900 !important;white-space:nowrap !important;
}
.profile-player.profile-playlist .pp-live-badge{background:rgba(0,190,78,.16) !important;border:1px solid rgba(0,235,99,.62) !important;color:#3cff84 !important}
.profile-player.profile-playlist .pp-listeners,.profile-player.profile-playlist .pp-trackno{background:rgba(255,255,255,.07) !important;border:1px solid rgba(255,255,255,.10) !important;color:#dbe0e8 !important;opacity:1 !important}
.profile-player.profile-playlist .pp-trackno{order:3}

.profile-player.profile-playlist .pp-progress{
  position:relative !important;height:7px !important;min-height:7px !important;margin:6px 0 14px !important;border:0 !important;border-radius:999px !important;
  background:rgba(255,255,255,.13) !important;box-shadow:inset 0 1px 3px rgba(0,0,0,.35) !important;cursor:pointer !important;overflow:visible !important;
}
.profile-player.profile-playlist .pp-progress>span{
  position:absolute !important;left:0 !important;top:0 !important;height:100% !important;width:0;border-radius:999px !important;background:linear-gradient(90deg,color-mix(in srgb,var(--bs-player-accent) 90%,#fff),var(--bs-player-accent)) !important;
  box-shadow:0 0 12px color-mix(in srgb,var(--bs-player-accent) 45%,transparent) !important;
}
.profile-player.profile-playlist .pp-progress>span::after{
  content:"";position:absolute;right:-7px;top:50%;width:14px;height:14px;border-radius:50%;transform:translateY(-50%);background:var(--bs-player-accent);box-shadow:0 2px 9px rgba(0,0,0,.35),0 0 8px color-mix(in srgb,var(--bs-player-accent) 50%,transparent);
}

.profile-player.profile-playlist .pp-eq{
  display:flex !important;align-items:end !important;justify-content:space-between !important;gap:3px !important;
  width:100% !important;height:45px !important;min-height:45px !important;max-height:45px !important;margin:6px 0 13px !important;padding:0 !important;overflow:hidden !important;opacity:1 !important;
}
.profile-player.profile-playlist .pp-eq span{
  flex:1 1 0 !important;min-width:3px !important;max-width:none !important;width:auto !important;height:22% !important;border-radius:3px 3px 0 0 !important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bs-player-accent) 75%,#fff),var(--bs-player-accent) 58%,color-mix(in srgb,var(--bs-player-accent) 74%,#3c1700)) !important;
  box-shadow:0 0 7px color-mix(in srgb,var(--bs-player-accent) 30%,transparent) !important;
  transform-origin:bottom !important;
}
.profile-player.profile-playlist.is-playing .pp-eq span{animation:bsEq1080 .72s ease-in-out infinite alternate !important}
.profile-player.profile-playlist.is-playing .pp-eq span:nth-child(3n){animation-duration:.48s !important}.profile-player.profile-playlist.is-playing .pp-eq span:nth-child(4n){animation-duration:.94s !important}.profile-player.profile-playlist.is-playing .pp-eq span:nth-child(5n){animation-duration:.61s !important}.profile-player.profile-playlist.is-playing .pp-eq span:nth-child(7n){animation-duration:1.1s !important}
@keyframes bsEq1080{0%{height:14%}35%{height:48%}70%{height:92%}100%{height:32%}}

.profile-player.profile-playlist .pp-bottomline{
  display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;
  min-height:38px !important;max-height:none !important;margin:0 !important;overflow:visible !important;
}
.profile-player.profile-playlist .pp-time{
  display:inline-flex !important;align-items:center !important;gap:5px !important;flex:0 0 auto !important;min-height:28px !important;padding:5px 9px !important;
  border:1px solid rgba(255,255,255,.10) !important;border-radius:8px !important;background:rgba(255,255,255,.06) !important;color:#cfd5df !important;font:700 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace !important;
}
.profile-player.profile-playlist .pp-volume-inline{
  display:flex !important;align-items:center !important;gap:9px !important;flex:1 1 auto !important;max-width:250px !important;min-height:36px !important;padding:0 !important;border:0 !important;background:transparent !important;
}
.profile-player.profile-playlist .pp-mute{
  display:grid !important;place-items:center !important;width:32px !important;min-width:32px !important;height:32px !important;min-height:32px !important;padding:0 !important;border:0 !important;border-radius:50% !important;background:transparent !important;color:#fff !important;font-size:15px !important;
}
.profile-player.profile-playlist .pp-volume{width:100% !important;max-width:none !important;min-width:70px !important;accent-color:var(--bs-player-accent) !important}
.profile-player.profile-playlist .pp-stream-info{display:flex !important;flex-wrap:wrap !important;gap:5px !important;margin-top:9px !important;overflow:visible !important;white-space:normal !important}
.profile-player.profile-playlist .pp-stream-info[hidden]{display:none !important}
.profile-player.profile-playlist .pp-stream-info span{max-width:100% !important;padding:4px 7px !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:7px !important;background:rgba(255,255,255,.05) !important;color:#aeb7c5 !important;font-size:9px !important}

.profile-player.profile-playlist .pp-controls{
  grid-area:controls !important;display:flex !important;align-items:center !important;justify-content:flex-start !important;gap:10px !important;padding:0 !important;margin-top:-4px !important;
}
.profile-player.profile-playlist .pp-controls button{
  display:grid !important;place-items:center !important;width:42px !important;min-width:42px !important;height:42px !important;min-height:42px !important;padding:0 !important;
  border:1px solid rgba(255,255,255,.16) !important;border-radius:50% !important;background:rgba(255,255,255,.07) !important;color:#fff !important;font-size:16px !important;line-height:1 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 7px 14px rgba(0,0,0,.22) !important;transition:transform .14s ease,filter .14s ease !important;
}
.profile-player.profile-playlist .pp-controls button:hover{filter:brightness(1.14) !important;transform:translateY(-1px) !important}
.profile-player.profile-playlist .pp-controls .pp-play{
  width:58px !important;min-width:58px !important;height:58px !important;min-height:58px !important;
  border:1px solid color-mix(in srgb,var(--bs-player-accent) 72%,#fff) !important;background:linear-gradient(145deg,color-mix(in srgb,var(--bs-player-accent) 88%,#fff),var(--bs-player-accent)) !important;
  color:#fff !important;font-size:22px !important;box-shadow:0 0 24px color-mix(in srgb,var(--bs-player-accent) 34%,transparent),0 8px 18px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.30) !important;
}

.profile-player.profile-playlist .pp-list-toggle{
  grid-area:toggle !important;width:100% !important;min-height:38px !important;margin-top:2px !important;padding:8px 11px !important;border:1px solid rgba(255,255,255,.10) !important;border-radius:10px !important;
  background:rgba(255,255,255,.055) !important;color:#dbe0e8 !important;font-size:10px !important;font-weight:900 !important;text-align:left !important;
}
.profile-player.profile-playlist .pp-playlist-list{
  grid-area:list !important;width:100% !important;max-height:210px !important;padding:4px !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:10px !important;background:rgba(0,0,0,.20) !important;overflow:auto !important;
}
.profile-player.profile-playlist .pp-track{min-height:39px !important;margin:2px 0 !important;padding:7px 9px !important;border:1px solid transparent !important;border-radius:8px !important;background:rgba(255,255,255,.035) !important;color:#e7e9ed !important}
.profile-player.profile-playlist .pp-track.active{border-color:color-mix(in srgb,var(--bs-player-accent) 50%,transparent) !important;background:color-mix(in srgb,var(--bs-player-accent) 12%,rgba(255,255,255,.04)) !important}

@media (max-width:1100px){
  .profile-player.profile-playlist{
    grid-template-columns:1fr !important;
    grid-template-areas:"brand" "cover" "main" "controls" "toggle" "list" !important;
    gap:10px !important;
    width:100% !important;max-width:100% !important;padding:14px !important;border-radius:20px !important;
  }
  .profile-player.profile-playlist .pp-brand{min-height:30px !important;padding-bottom:8px !important}
  .profile-player.profile-playlist .pp-brand img{width:29px !important;height:29px !important}
  .profile-player.profile-playlist .pp-brand span{font-size:10px !important}
  .profile-player.profile-playlist:not(:has(.pp-brand))::after{font-size:10px;padding-bottom:8px}
  .profile-player.profile-playlist .pp-vinyl-wrap{padding:1px 0 3px !important}
  .profile-player.profile-playlist .pp-vinyl{width:clamp(120px,39vw,164px) !important;height:clamp(120px,39vw,164px) !important;max-width:164px !important;max-height:164px !important}
  .profile-player.profile-playlist .pp-main{padding:0 !important;text-align:center !important}
  .profile-player.profile-playlist .pp-now{justify-content:center !important;gap:6px !important;margin-bottom:10px !important}
  .profile-player.profile-playlist .pp-title{font-size:clamp(17px,5.3vw,22px) !important;line-height:1.15 !important;text-align:center !important;display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;white-space:normal !important}
  .profile-player.profile-playlist .pp-progress{height:6px !important;min-height:6px !important;margin:8px 3px 12px !important}
  .profile-player.profile-playlist .pp-eq{height:36px !important;min-height:36px !important;max-height:36px !important;margin:5px 0 10px !important;gap:2px !important}
  .profile-player.profile-playlist .pp-bottomline{justify-content:center !important;flex-wrap:wrap !important;gap:8px !important}
  .profile-player.profile-playlist .pp-volume-inline{flex:1 1 150px !important;max-width:230px !important}
  .profile-player.profile-playlist .pp-controls{justify-content:center !important;gap:12px !important;margin:0 !important}
  .profile-player.profile-playlist .pp-controls button{width:40px !important;min-width:40px !important;height:40px !important;min-height:40px !important}
  .profile-player.profile-playlist .pp-controls .pp-play{width:58px !important;min-width:58px !important;height:58px !important;min-height:58px !important}
  .profile-player.profile-playlist .pp-stream-info{justify-content:center !important}
  .profile-player.profile-playlist .pp-list-toggle{min-height:40px !important;text-align:center !important}
  .profile-player.profile-playlist[data-mobile-playlist-open="0"] .pp-playlist-list{display:none !important}
  .profile-player.profile-playlist[data-mobile-playlist-open="1"] .pp-playlist-list{display:block !important;max-height:220px !important}
}

@media (max-width:430px){
  .profile-player.profile-playlist{padding:11px !important;border-radius:17px !important;gap:8px !important}
  .profile-player.profile-playlist .pp-vinyl{width:124px !important;height:124px !important;max-width:124px !important;max-height:124px !important}
  .profile-player.profile-playlist .pp-title{font-size:17px !important}
  .profile-player.profile-playlist .pp-live-badge,.profile-player.profile-playlist .pp-listeners,.profile-player.profile-playlist .pp-trackno{min-height:22px !important;padding:3px 7px !important;font-size:8px !important}
  .profile-player.profile-playlist .pp-eq{height:30px !important;min-height:30px !important;max-height:30px !important}
  .profile-player.profile-playlist .pp-time{font-size:9px !important}
  .profile-player.profile-playlist .pp-controls{gap:9px !important}
  .profile-player.profile-playlist .pp-controls button{width:37px !important;min-width:37px !important;height:37px !important;min-height:37px !important;font-size:14px !important}
  .profile-player.profile-playlist .pp-controls .pp-play{width:52px !important;min-width:52px !important;height:52px !important;min-height:52px !important;font-size:20px !important}
}

@media (prefers-reduced-motion:reduce){.profile-player.profile-playlist .pp-eq span{animation:none !important}}