#prps-box{
  max-width:420px;margin:24px auto;padding:14px 16px;
  background:#141414;border:1px solid #2a2a2a;border-radius:14px;
  font-family:Arial,Helvetica,sans-serif;color:#fff;box-sizing:border-box;
}
.prps-head{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
.prps-r{font-size:11px;letter-spacing:2px;color:#fff}
.prps-h{font-size:20px;font-weight:bold;color:#e2001a;letter-spacing:1px}
.prps-label{font-size:11px;color:#666;margin-left:auto}
.prps-btns{display:flex;gap:8px;margin-bottom:14px}
.prps-btn{
  flex:1;height:46px;border:1px solid #333;border-radius:10px;
  background:#1e1e1e;color:#aaa;font-size:17px;cursor:pointer;
  transition:background .15s,color .15s;
}
.prps-btn:hover{background:#262626}
.prps-btn.act{background:#e2001a;border-color:#e2001a;color:#fff;font-weight:bold}
.prps-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.prps-row:last-of-type{margin-bottom:0}
#prps-pp{
  width:38px;height:38px;border:0;border-radius:50%;background:#e2001a;
  cursor:pointer;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
}
#prps-pp:hover{background:#ff1a30}
.prps-icon{
  width:0;height:0;margin-left:3px;
  border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;
}
#prps-pp.playing .prps-icon{
  width:4px;height:14px;margin:0;border:0;
  border-left:4px solid #fff;border-right:4px solid #fff;box-sizing:content-box;
}
.prps-mid{flex:1 1 auto;min-width:0}
.prps-status{font-size:13px;color:#9a9a9a}
.prps-status.live{color:#3ddc6b}
.prps-status.load{color:#f0b400}
.prps-status.err{color:#ff5a5a}
.prps-bars{display:flex;gap:3px;height:14px;margin-top:5px;align-items:flex-end}
.prps-bars i{width:4px;height:4px;background:#3a3a3a;border-radius:2px}
#prps-box.on .prps-bars i{background:#e2001a;animation:prpsB .9s infinite ease-in-out}
#prps-box.on .prps-bars i:nth-child(2){animation-delay:.15s}
#prps-box.on .prps-bars i:nth-child(3){animation-delay:.3s}
#prps-box.on .prps-bars i:nth-child(4){animation-delay:.45s}
@keyframes prpsB{0%,100%{height:4px}50%{height:14px}}
.prps-rate{font-size:11px;color:#666;flex:0 0 auto;min-width:66px;text-align:right}
.prps-rate.good{color:#3ddc6b}
.prps-rate.mid{color:#f0b400}
.prps-rate.low{color:#ff5a5a}
.prps-spk{
  width:0;height:0;flex:0 0 auto;
  border-right:10px solid #888;border-top:7px solid transparent;border-bottom:7px solid transparent;
}
#prps-vol{flex:1 1 auto;accent-color:#e2001a;cursor:pointer;min-width:60px}
.prps-lock{
  flex:0 0 auto;padding:6px 10px;border:1px solid #333;border-radius:8px;
  background:#1e1e1e;color:#999;font-size:11px;cursor:pointer;
}
.prps-lock.on{background:#e2001a;border-color:#e2001a;color:#fff}