/* Bottom player bar (mini, flatter like previous version) */
.playerBar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;
}
.playerInner{
  display:grid;
  grid-template-columns: 320px 220px minmax(0,1fr) 48px 170px;
  gap:12px;
  align-items:center;
  padding:10px 18px;
  border-radius: 0;
  background: rgba(7,10,16,.94);
  backdrop-filter: blur(0px);
  border-top:1px solid rgba(255,255,255,.10);
  box-shadow: 0 -16px 40px rgba(0,0,0,.55);
}
.playerLeft{display:flex; gap:10px; align-items:center; min-width:0;}
.playerCover{
  width:40px; height:40px; border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  background-size: cover;
  background-position:center;
}
.playerMeta{min-width:0;}
.playerTitle{font-weight:800; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.playerSub{font-size:11px; color:rgba(234,240,255,.70); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* transport */
.playerTransport{display:flex; gap:10px; align-items:center; justify-content:flex-start;}
.tbtn{
  width:40px; height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,.06) 55%, rgba(0,0,0,.15));
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.22);
  display:grid; place-items:center;
  cursor:pointer;
  position:relative;
}
.tbtn:active{transform: translateY(1px)}
.tbtn .ico{display:block; width:0; height:0;}
.tbtn.play .ico{
  border-left: 14px solid rgba(234,240,255,.92);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left:2px;
}
.tbtn.pause .ico{
  width:14px; height:16px;
  border-left: 5px solid rgba(234,240,255,.92);
  border-right: 5px solid rgba(234,240,255,.92);
}
.tbtn.stop .ico{
  width:16px; height:16px;
  background: rgba(234,240,255,.92); /* Stop = white (not red) */
  border-radius:3px;
}

/* glowing state */
.tbtn.isOn.play{
  border-color: rgba(34,197,94,.45);
  box-shadow:
    0 14px 34px rgba(34,197,94,.18),
    0 10px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.tbtn.isOn.play .ico{border-left-color: rgba(34,197,94,.95)}

.tbtn.isOn.pause{
  border-color: rgba(245,158,11,.45);
  box-shadow:
    0 14px 34px rgba(245,158,11,.18),
    0 10px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.tbtn.isOn.pause .ico{
  border-left-color: rgba(245,158,11,.95);
  border-right-color: rgba(245,158,11,.95);
}

.playerCenter{display:flex; flex-direction:column; gap:6px; align-items:stretch;}
.waveWrap{width:100%; border-radius:12px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); padding:6px;}
.wave{width:100%; height:36px; display:block;}
.timeRow{display:flex; justify-content:space-between; gap:10px; align-items:center;}
.time{font-size:11px; color:rgba(234,240,255,.70); text-align:center;}

.playerSide{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.meter{
  width:18px;
  height:36px; /* match wave height */
  border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.timeNow{
  font-size:13px;
  font-weight:800;
  color:rgba(234,240,255,.78);
  min-width: 42px;
  text-align:left;
}

.playerRight{display:flex; justify-content:flex-end; gap:10px; align-items:center;}

/* center the plus nicely inside the icon button */
#playerAdd{
  font-size:20px;
  line-height:1;
  display:grid;
  place-items:center;
}

/* avoid content being hidden behind the fixed player */
.shell{padding-bottom: 104px;}