:root{
  --ssdp36-z: 2147483000;
  --ssdp36-glass: rgba(0,0,0,.56);
  --ssdp36-glass-2: rgba(0,0,0,.92);
  --ssdp36-border: rgba(255,255,255,.16);
  --ssdp36-border-2: rgba(255,255,255,.12);
  --ssdp36-text: #fff;
  --ssdp36-h: clamp(260px, 33vh, 440px);
}

body{ padding-bottom: var(--ssdp36-h) !important; }
#ssMiniPlayer{ display:none !important; visibility:hidden !important; pointer-events:none !important; }

#ssdp36Dock{
  position:fixed !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  height: var(--ssdp36-h) !important;
  z-index: var(--ssdp36-z) !important;
  background: var(--ssdp36-glass) !important;
  backdrop-filter: blur(12px) !important;
  border-top:1px solid var(--ssdp36-border) !important;
  isolation:isolate !important;
  contain: layout paint style !important;
  overflow:hidden !important;
  transform: translateZ(0) !important;
}
#ssdp36Dock, #ssdp36Dock *{ box-sizing:border-box !important; }
#ssdp36Dock button{
  -webkit-appearance:none !important;
  appearance:none !important;
  font: inherit !important;
  line-height: 1 !important;
  margin:0 !important;
  float:none !important;
  position:static !important;
}
/* Minimize button must override the static reset above */
#ssdp36Dock #ssdp36MinimizeBtn{
  position:absolute !important;
  top:10px !important;
  right:12px !important;
  z-index:100 !important;
}

/* Playback hosts are offscreen; keep them inert */
#ssdp36YtHost, #ssdp36AudioHost{ position:fixed !important; left:-9999px !important; top:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; }

.ssdp36Inner{
  height:100% !important;
  max-width:1280px !important;
  margin:0 auto !important;
  padding:16px !important;
  display:flex !important;
  align-items:stretch !important;
  gap:18px !important;
}

.ssdp36Splatter{
  width:clamp(190px, 30vw, 360px);
  aspect-ratio:1/1;
  position:relative;
  display:grid;
  place-items:center;
  filter: drop-shadow(0 14px 32px rgba(0,0,0,.55));
  user-select:none;
  transform: rotate(-6deg);
  flex:0 0 auto;
}
.ssdp36Splatter::before{
  content:"";
  position:absolute; inset:0;
  background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20200%27%3E%0A%20%20%20%20%20%20%3Cg%20fill%3D%27%23ffffff%27%20fill-opacity%3D%270.95%27%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%27M102%2016%20C128%2012%20153%2028%20165%2053%20C177%2078%20170%20106%20156%20130%20C142%20154%20118%20173%2091%20172%20C64%20171%2040%20154%2030%20130%20C20%20106%2022%2079%2036%2055%20C50%2031%2076%2020%20102%2016%20Z%27%2F%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%27M46%20148%20C56%20130%2076%20132%2080%20146%20C84%20160%2070%20176%2056%20170%20C46%20166%2040%20156%2046%20148%20Z%27%20opacity%3D%270.90%27%2F%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%27M150%2038%20C160%2034%20170%2042%20170%2052%20C170%2062%20160%2068%20152%2064%20C144%2060%20142%2042%20150%2038%20Z%27%20opacity%3D%270.90%27%2F%3E%0A%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2724%27%20cy%3D%27104%27%20r%3D%278%27%2F%3E%3Ccircle%20cx%3D%27176%27%20cy%3D%27112%27%20r%3D%277%27%2F%3E%3Ccircle%20cx%3D%27132%27%20cy%3D%27178%27%20r%3D%279%27%2F%3E%3Ccircle%20cx%3D%2778%27%20cy%3D%27184%27%20r%3D%276%27%2F%3E%0A%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2762%27%20cy%3D%2724%27%20r%3D%277%27%2F%3E%3Ccircle%20cx%3D%27172%27%20cy%3D%2778%27%20r%3D%276%27%2F%3E%3Ccircle%20cx%3D%2728%27%20cy%3D%2770%27%20r%3D%276%27%2F%3E%3Ccircle%20cx%3D%27188%27%20cy%3D%2798%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%27126%27%20r%3D%275%27%2F%3E%0A%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fsvg%3E');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.94;
}
.ssdp36Cover{
  width:68%;
  aspect-ratio:1/1;
  border-radius:999px;
  border:3px solid rgba(0,0,0,.85);
  background:rgba(255,255,255,.06);
  background-size:cover;
  background-position:center;
  position:relative;
  z-index:2;
  overflow:hidden;
}
.ssdp36IdleBadge{
  position:absolute;
  z-index:3;
  bottom:10%;
  left:50%;
  transform:translateX(-50%) rotate(6deg);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.55);
  opacity:.92;
  display:none;
}
.ssdp36IdleLogo{ width:92px; height:auto; display:block; }
.ssdp36Dock.ssdp36Idle .ssdp36IdleBadge{ display:block; }
.ssdp36Dock.ssdp36HasLogo .ssdp36IdleBadge{ display:none !important; }

/* ── Minimized state: pill in bottom-left corner ── */
body.ssdp36IsMinimized{ padding-bottom:72px !important; }
#ssdp36Dock.ssdp36Minimized{
  left:16px !important; right:auto !important; bottom:16px !important;
  width:320px !important; height:72px !important;
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  overflow:hidden !important;
}
#ssdp36Dock.ssdp36Minimized .ssdp36Inner{ display:none !important; }
.ssdp36MiniBar{ display:none !important; }
#ssdp36Dock.ssdp36Minimized .ssdp36MiniBar{
  display:flex !important; align-items:center;
  gap:10px; height:72px; padding:0 12px 0 14px; width:100%;
}
/* Minimize button */
.ssdp36MinimizeBtn{
  position:absolute !important; top:10px !important; right:12px !important;
  z-index:10 !important; width:36px !important; height:36px !important;
  border-radius:12px !important; border:1px solid rgba(255,255,255,.22) !important;
  background:rgba(0,0,0,.4) !important; color:#fff !important;
  cursor:pointer !important; display:inline-flex !important;
  align-items:center !important; justify-content:center !important; padding:0 !important;
}
.ssdp36MinimizeBtn:hover{ background:rgba(255,255,255,.10) !important; }
.ssdp36IcoMinimize{ display:inline-flex; }
.ssdp36IcoRestore { display:none; }
#ssdp36Dock.ssdp36Minimized .ssdp36IcoMinimize{ display:none; }
#ssdp36Dock.ssdp36Minimized .ssdp36IcoRestore { display:inline-flex; }
/* Mini-bar internals */
.ssdp36MiniCover{
  width:44px; height:44px; border-radius:12px; flex:0 0 auto;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06) center/cover no-repeat;
}
.ssdp36MiniMeta{ flex:1; min-width:0; color:#fff; }
.ssdp36MiniTitle{ font-weight:950; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ssdp36MiniArtist{ font-size:11px; opacity:.8; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ssdp36MiniBtnPlay{ flex:0 0 auto; width:40px !important; min-width:40px !important; height:40px !important; }

.ssdp36Right{ flex:1; min-width:0; color:var(--ssdp36-text); height:100%; }
.ssdp36Grid{ height:100%; display:grid; grid-template-columns: 1.18fr .92fr; gap:14px; align-items:stretch; }

.ssdp36Left{ min-width:0; display:flex; flex-direction:column; gap:12px; height:100%; justify-content:flex-start; }
.ssdp36Title{ font-weight:950; font-size:20px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ssdp36Artist{ opacity:.82; margin-top:6px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ssdp36PlaylistCtx{ font-size:10px; opacity:.55; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:4px; }
.ssdp36PlaylistCtx::before{ content:"▶ playlist:"; opacity:.7; }

.ssdp36Progress{ display:grid; grid-template-columns: 52px 1fr 52px; gap:10px; align-items:center; }
.ssdp36Time{ font-weight:900; font-size:12px; opacity:.9; text-align:center; }
.ssdp36Seek{ width:100%; accent-color:#fff; height:20px; }

.ssdp36Controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ssdp36Btn{
  height:46px; min-width:46px; border-radius:16px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.35);
  color:#fff; font-weight:950; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.ssdp36Btn:hover{ background:rgba(255,255,255,.08); }
.ssdp36BtnPrimary{ min-width:66px; }
.ssdp36Ico{ display:inline-flex; width:18px; height:18px; }
.ssdp36Ico svg{ width:18px; height:18px; display:block; }
.ssdp36IcoPause{ display:none; }
#ssdp36Dock[data-playing="1"] .ssdp36IcoPlay{ display:none; }
#ssdp36Dock[data-playing="1"] .ssdp36IcoPause{ display:inline-flex; }

.ssdp36Actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ssdp36Chip{
  border-radius:999px; border:1px solid rgba(255,255,255,.18);
  background:transparent; color:#fff; padding:8px 12px;
  cursor:pointer; opacity:.92; font-weight:850;
}
.ssdp36Chip:hover{ background:rgba(255,255,255,.08); }
.ssdp36AddToPlaylist{
  width:32px; height:32px; border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.06); color:#fff;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  padding:0; flex-shrink:0;
}
.ssdp36AddToPlaylist:hover{ background:rgba(255,255,255,.16); }

.ssdp36Side{ min-width:0; display:flex; flex-direction:column; gap:12px; height:100%; }
.ssdp36Card{ border:1px solid rgba(255,255,255,.14); border-radius:18px; background:rgba(0,0,0,.35); overflow:hidden; min-height:0; }
.ssdp36CardHead{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.12); }
.ssdp36CardTitle{ font-weight:950; font-size:12px; letter-spacing:.06em; text-transform:uppercase; opacity:.92; }
.ssdp36CardTiny{ font-size:12px; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60%; }
.ssdp36List{ padding:10px; display:flex; flex-direction:column; gap:8px; max-height: calc(var(--ssdp36-h) - 170px); overflow:auto; }
.ssdp36List::-webkit-scrollbar{ width:10px; }
.ssdp36List::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:999px; }

.ssdp36Item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.22); cursor:pointer; }
.ssdp36Item:hover{ background:rgba(255,255,255,.06); }
.ssdp36Thumb{ width:34px; height:34px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); background-size:cover; background-position:center; flex:0 0 auto; }
.ssdp36ItemMeta{ min-width:0; flex:1; }
.ssdp36ItemTitle{ font-weight:900; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ssdp36ItemSub{ opacity:.75; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ssdp36Empty{ opacity:.75; font-size:12px; padding:6px 2px; }

.ssdp36Overlay{ display:none !important; position:fixed; inset:0; z-index: calc(var(--ssdp36-z) + 1); background:rgba(0,0,0,.55); backdrop-filter: blur(6px); align-items:flex-end; justify-content:center; padding:0 12px calc(var(--ssdp36-h) + 12px); }
.ssdp36Overlay.ssdp36Open{ display:flex !important; }
.ssdp36Modal{ width:min(860px, 100%); max-height:60vh; overflow:auto; border-radius:22px; border:1px solid rgba(255,255,255,.18); background: var(--ssdp36-glass-2); color:#fff; box-shadow:0 18px 50px rgba(0,0,0,.65); }
.ssdp36ModalHead{ position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border-bottom:1px solid var(--ssdp36-border-2); background: var(--ssdp36-glass-2); }
.ssdp36ModalTitle{ font-weight:950; font-size:14px; letter-spacing:.02em; text-transform:uppercase; opacity:.92; }
.ssdp36Close{ width:42px; height:42px; border-radius:14px; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.35); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.ssdp36Close:hover{ background:rgba(255,255,255,.08); }
.ssdp36Body{ padding:14px; }

.ssdp36Toast{ position:fixed; left:12px; right:12px; bottom: calc(var(--ssdp36-h) + 12px); z-index: calc(var(--ssdp36-z) + 2); max-width: 860px; margin:0 auto; padding:10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.86); color:#fff; font-size:12px; display:none; box-shadow:0 14px 40px rgba(0,0,0,.55); }

@media (max-width:920px){
  .ssdp36Grid{ grid-template-columns: 1fr; }
  .ssdp36List{ max-height: 18vh; }
}
@media (max-width:720px){
  .ssdp36Inner{ gap:12px; }
  .ssdp36Title{ font-size:16px; }
  .ssdp36Splatter{ width:clamp(165px, 42vw, 270px); }
}