/* VLC-стилизованный аудиоплеер DNB1ST */
.vlc{max-width:860px;margin:0 auto;background:#1d1f21;border:1px solid #33363a;
  border-radius:14px;overflow:hidden;font-size:14px;color:#d8d8d8}
.vlc-top{display:flex;align-items:center;gap:10px;padding:10px 16px;
  background:#26282b;border-bottom:1px solid #33363a}
.vlc-top .cone{width:22px;height:22px;flex-shrink:0}
.vlc-top .now{font-weight:600;color:#fff;font-size:13.5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.vlc-top .tag{margin-left:auto;flex-shrink:0;font-size:10.5px;letter-spacing:.8px;
  text-transform:uppercase;color:#8a8d91;border:1px solid #3c3f44;
  border-radius:4px;padding:1px 7px}

/* Прогресс */
.vlc-seek{padding:12px 16px 4px}
.vlc-seek .bar{position:relative;height:8px;background:#3a3d42;border-radius:99px;
  cursor:pointer}
.vlc-seek .bar .fill{position:absolute;inset:0 auto 0 0;width:0%;
  background:linear-gradient(90deg,#e06800,var(--vlc-orange,#ff8800));border-radius:99px}
.vlc-seek .bar .knob{position:absolute;top:50%;left:0%;width:14px;height:14px;
  transform:translate(-50%,-50%);background:#ff8800;border:2px solid #1d1f21;
  border-radius:50%;opacity:0;transition:opacity .15s;pointer-events:none}
.vlc-seek .bar:hover .knob,.vlc-seek .bar.dragging .knob{opacity:1}
.vlc-times{display:flex;justify-content:space-between;font-size:11.5px;
  color:#9a9da2;padding:5px 2px 0;font-variant-numeric:tabular-nums}

/* Кнопки управления */
.vlc-ctrl{display:flex;align-items:center;gap:8px;padding:8px 16px 12px;flex-wrap:wrap}
.vlc-btn{width:38px;height:38px;border-radius:50%;border:1px solid #3c3f44;
  background:#26282b;color:#d8d8d8;display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0}
.vlc-btn:hover{border-color:#ff8800;color:#fff}
.vlc-btn svg{width:15px;height:15px;fill:currentColor}
.vlc-btn.play{width:46px;height:46px;background:#ff8800;border-color:#ff8800;color:#1d1f21}
.vlc-btn.play:hover{background:#ffa033;border-color:#ffa033;color:#1d1f21}
.vlc-btn.play svg{width:17px;height:17px}

/* Громкость */
.vlc-vol{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:130px}
.vlc-vol button{background:none;border:none;color:#9a9da2;cursor:pointer;
  display:inline-flex;padding:4px}
.vlc-vol button:hover{color:#fff}
.vlc-vol button svg{width:16px;height:16px;fill:currentColor}
.vlc-vol input[type=range]{-webkit-appearance:none;appearance:none;width:90px;height:6px;
  border-radius:99px;background:#3a3d42;outline:none;cursor:pointer}
.vlc-vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:13px;height:13px;border-radius:50%;background:#ff8800;border:none}
.vlc-vol input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;
  background:#ff8800;border:none}
.vlc-vol input[type=range]::-moz-range-progress{background:#ff8800;height:6px;border-radius:99px}
.vlc-vol input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px}

/* Плейлист */
.vlc-list{border-top:1px solid #33363a;background:#232527}
.vlc-list .li{display:flex;align-items:center;gap:12px;padding:11px 16px;
  cursor:pointer;border-bottom:1px solid #2b2e31;transition:background .12s}
.vlc-list .li:last-child{border-bottom:none}
.vlc-list .li:hover{background:#2b2e31}
.vlc-list .li.active{background:linear-gradient(90deg,rgba(255,136,0,.16),transparent);box-shadow:inset 3px 0 0 #ff8800}
.vlc-list .num{width:22px;font-size:12px;color:#8a8d91;text-align:center;
  font-variant-numeric:tabular-nums;flex-shrink:0}
.vlc-list .li.active .num{color:#ff8800}
.vlc-list .title{font-weight:600;color:#e8e8e8;font-size:13.5px;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vlc-list .li.active .title{color:#fff}
.vlc-list .eq{display:none;align-items:flex-end;gap:2px;height:13px;flex-shrink:0}
.vlc-list .li.playing .eq{display:flex}
.vlc-list .eq i{width:3px;background:#ff8800;border-radius:1px;animation:eq 1s ease-in-out infinite}
.vlc-list .eq i:nth-child(2){animation-delay:.25s}
.vlc-list .eq i:nth-child(3){animation-delay:.5s}
@keyframes eq{0%,100%{height:4px}50%{height:13px}}
.vlc-list .dur{font-size:12px;color:#8a8d91;font-variant-numeric:tabular-nums;flex-shrink:0}
.vlc-hint{padding:8px 16px;font-size:11.5px;color:#75787d;background:#1d1f21}

@media (max-width:560px){
  .vlc-vol{margin-left:0;min-width:0}
  .vlc-vol input[type=range]{width:70px}
  .vlc-top .tag{display:none}
}