:root{
  --player-width: 360px;
  --player-height: 220px;
  --glass-blur: 12px;
  --bg-color: rgba(255,255,255,0.04);
  --accent: #c28dfe;
  --text: #ffffff;
}

*{box-sizing:border-box}

.aux-player{
  width:var(--player-width);
  min-width:var(--player-width);
  max-width:var(--player-width);
  height:var(--player-height);
  padding:14px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(40,40,40,0.6);
  color:var(--text);
  display:flex;
  flex-direction:column;
  gap:12px;
  box-sizing: border-box;
  overflow: hidden;
  flex: 0 0 auto;
  overflow-x: hidden;
}

.player-top{display:flex;gap:12px}
.player-top{ flex: 0 0 112px; }
.cover{width:96px;height:96px;border-radius:8px;overflow:hidden;flex:0 0 96px;background:rgba(255,255,255,0.02);display:flex;align-items:center;justify-content:center}
.cover img{width:100%;height:100%;object-fit:cover;display:block}

.meta{flex:1;display:flex;flex-direction:column;justify-content:center}
.meta{ min-width: 0; }
.now-label{font-size:12px;color:rgba(255,255,255,0.6);margin-bottom:6px}
.title{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.artist{font-size:13px;color:rgba(255,255,255,0.8);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.controls{display:flex;gap:8px;flex:0 0 auto}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color:var(--accent);
  padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:700;
  min-width:48px;
  height:40px;
  line-height:1;
  font-size:16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .12s ease, opacity .12s ease;
  flex: 0 0 auto;
}
/* Thin dark border for play/pause to match schedule styling */
#play-pause{ border: 1px solid rgba(40,40,40,0.6); }
.btn:active{ transform: scale(.98) }
.btn.play{ background: linear-gradient(180deg, rgba(0,102,204,0.18), rgba(0,102,204,0.12)); color:#000 }

/* Loading state (spinner) */
.btn.loading{ position: relative; color: transparent; min-width:48px }
.btn.loading:after{
  content: "";
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,0.2);border-top-color:var(--accent);
  animation: spin 1s linear infinite;
}

@keyframes spin{ to { transform: translate(-50%,-50%) rotate(360deg) } }

/* SVG icon sizing inside button */
.btn svg{ width:18px; height:18px; display:block; color: #fff }
.btn .btn-icon{ width:18px; height:18px; display:block; }
.btn.play{ color:#000 }
.btn:not(.play){ color:var(--accent) }

.previous{border-top:1px solid rgba(255,255,255,0.03);padding-top:8px;width:100%}
.previous h4{font-size:13px;margin:0 0 8px;color:rgba(255,255,255,0.8)}
.previous-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;max-height:calc(var(--player-height) - 140px);overflow:auto;width:100%}
.previous-item{display:flex;flex-direction:column;gap:4px;padding:6px 2px;width:100%}
.previous-meta{font-size:13px;line-height:1.05}
.previous-meta .p-title{font-weight:700}
.previous-meta .p-artist{color:rgba(255,255,255,0.7);font-size:12px}

/* Small screens */
@media (max-width:420px){
  :root{--player-width:94vw}
  .cover{width:72px;height:72px}
}

/* Blurred, transparent scrollbar for previous list */
.previous-list{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.06) transparent;
}
.previous-list::-webkit-scrollbar{ width:8px; height:8px }
.previous-list::-webkit-scrollbar-track{
  background: transparent;
  backdrop-filter: blur(6px);
}
.previous-list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.previous-list::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.10) }

/* no global demo body styles here so the player doesn't affect the site layout */