/* DNB1ST SPECTRA — аудиоплеер с живым спектром (бренд: acid/orange/ink).
   Тёмная тема — дефолт; html[data-theme=light] переопределяет палитру плеера. */
.vlc{
  --pl-bg:#101114; --pl-panel:#0a0a0c; --pl-line:#2a2c30; --pl-line2:#232529;
  --pl-text:#d8d8d8; --pl-sub:#9a9da2; --pl-faint:#7c7f85;
  --pl-btn-bg:#17181b; --pl-btn-line:#3c3f44;
  --pl-row-hover:#141519; --pl-dim:#262a20;
  max-width:860px;margin:0 auto;background:var(--pl-bg);border:1px solid var(--pl-line);
  border-radius:14px;overflow:hidden;font-size:14px;color:var(--pl-text);
  box-shadow:0 10px 40px rgba(0,0,0,.45);position:relative}
html[data-theme=light] .vlc{
  --pl-bg:#fbfbf6; --pl-panel:#f1f1ea; --pl-line:#c9c9bd; --pl-line2:#d8d8cc;
  --pl-text:#26262a; --pl-sub:#5c5c58; --pl-faint:#6d6d68;
  --pl-btn-bg:#fff; --pl-btn-line:#b9b9ad;
  --pl-row-hover:#f0f0e7; --pl-dim:#d2d2c4;
  box-shadow:0 10px 34px rgba(20,20,30,.14)}

/* Шапка */
.vlc-top{display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:var(--pl-panel);border-bottom:1px solid var(--pl-line)}
.vlc-top .stamp{flex-shrink:0;font-size:10.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--orange,#ff5c00);
  border:1px solid var(--orange,#ff5c00);border-radius:4px;padding:3px 8px}
.vlc-top .now{font-weight:700;color:var(--pl-text);font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.vlc-tools{display:flex;gap:6px;flex-shrink:0;margin-left:auto}
.vlc-tool{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  background:none;border:1px solid var(--pl-btn-line);border-radius:99px;
  color:var(--pl-sub);font:700 10.5px/1 var(--sans,sans-serif);letter-spacing:.05em;
  text-transform:uppercase;padding:5px 10px;transition:color .15s,border-color .15s}
.vlc-tool:hover{color:var(--acid,#c8ff00);border-color:var(--acid,#c8ff00)}
.vlc-tool svg{width:12px;height:12px;fill:currentColor}

/* Живой спектр */
.vlc .spec{display:block;width:100%;height:120px;background:var(--pl-panel);
  border-bottom:1px solid var(--pl-line)}
@media (max-width:640px){.vlc .spec{height:84px}}

/* Прогресс */
.vlc-seek{padding:14px 16px 4px}
.vlc-seek .bar{position:relative;height:8px;background:var(--pl-line2);border-radius:99px;
  cursor:pointer}
.vlc-seek .bar .buf{position:absolute;inset:0 auto 0 0;width:0%;
  background:var(--pl-btn-line);border-radius:99px}
.vlc-seek .bar .fill{position:absolute;inset:0 auto 0 0;width:0%;
  background:var(--acid,#c8ff00);border-radius:99px;box-shadow:0 0 8px rgba(200,255,0,.35)}
.vlc-seek .bar .knob{position:absolute;top:50%;left:0%;width:14px;height:14px;
  transform:translate(-50%,-50%);background:var(--orange,#ff5c00);
  border:2px solid var(--pl-panel);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:var(--pl-sub);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 var(--pl-btn-line);
  background:var(--pl-btn-bg);color:var(--pl-text);display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0}
.vlc-btn:hover{border-color:var(--acid,#c8ff00);color:var(--acid,#c8ff00)}
.vlc-btn svg{width:15px;height:15px;fill:currentColor}
.vlc-btn.play{width:46px;height:46px;background:var(--acid,#c8ff00);
  border-color:var(--acid,#c8ff00);color:#0a0a0c;
  box-shadow:3px 3px 0 var(--orange,#ff5c00)}
.vlc-btn.play:hover{transform:translate(-1px,-1px);
  box-shadow:5px 5px 0 var(--orange,#ff5c00)}
.vlc-btn.play svg{width:17px;height:17px}
.vlc-btn.speed,.vlc-btn.mode{width:auto;min-width:46px;border-radius:99px;padding:0 12px;
  font:700 11px/1 var(--sans,sans-serif);letter-spacing:.05em}
.vlc-btn.mode{color:var(--acid,#c8ff00);border-color:var(--pl-btn-line)}
.vlc-btn.mode:hover{border-color:var(--acid,#c8ff00)}
.vlc-btn.shuffle.on,.vlc-btn.repeat.on{background:var(--acid,#c8ff00);
  border-color:var(--acid,#c8ff00);color:#0a0a0c}
.vlc-btn.shuffle.on:hover,.vlc-btn.repeat.on:hover{color:#0a0a0c}

/* Громкость */
.vlc-vol{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:130px}
.vlc-vol button{background:none;border:none;color:var(--pl-sub);cursor:pointer;
  display:inline-flex;padding:4px}
.vlc-vol button:hover{color:var(--acid,#c8ff00)}
.vlc-vol button svg{width:16px;height:16px;fill:currentColor}
.vlc-vol input[type=range]{width:80px;accent-color:var(--acid,#c8ff00);cursor:pointer}

/* Поиск по плейлисту */
.vlc-search{display:flex;align-items:center;gap:8px;padding:10px 16px 0}
.vlc-search input{width:100%;max-width:340px;background:var(--pl-panel);
  border:1px solid var(--pl-btn-line);border-radius:99px;color:var(--pl-text);
  font:600 13px/1.4 var(--sans,sans-serif);padding:7px 14px;outline:none}
.vlc-search input:focus{border-color:var(--acid,#c8ff00)}
.vlc-search input::placeholder{color:var(--pl-faint)}
.vlc-search .cnt{font:700 10.5px/1 var(--sans,sans-serif);color:var(--pl-faint);
  text-transform:uppercase;letter-spacing:.06em}

/* Плейлист */
.vlc-list{max-height:280px;overflow-y:auto;border-top:1px solid var(--pl-line2);
  scrollbar-width:thin;scrollbar-color:var(--pl-btn-line) transparent}
.vlc-list .li{display:flex;align-items:center;gap:10px;padding:8px 16px;
  cursor:pointer;border-left:3px solid transparent;transition:background .12s}
.vlc-list .li:hover{background:var(--pl-row-hover)}
.vlc-list .li.active{background:var(--pl-row-hover);border-left-color:var(--acid,#c8ff00)}
.vlc-list .li .num{width:22px;font-size:11px;color:var(--pl-faint);
  font-variant-numeric:tabular-nums;flex-shrink:0}
.vlc-list .li.active .num{color:var(--acid,#c8ff00)}
.vlc-list .li .title{flex:1;font-size:13px;color:var(--pl-sub);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vlc-list .li.active .title{color:var(--pl-text);font-weight:700}
.vlc-list .li .dur{font-size:11px;color:var(--pl-faint);font-variant-numeric:tabular-nums}
.vlc-list .li .eq{display:none;gap:2px;align-items:flex-end;height:12px;flex-shrink:0}
.vlc-list .li.playing .eq{display:inline-flex}
.vlc-list .li .eq i{width:3px;background:var(--acid,#c8ff00);animation:eqb 0.9s ease-in-out infinite}
.vlc-list .li .eq i:nth-child(2){animation-delay:.25s}
.vlc-list .li .eq i:nth-child(3){animation-delay:.5s}
@keyframes eqb{0%,100%{height:3px}50%{height:12px}}
.vlc-list.nores{position:relative;min-height:64px}
.vlc-list.nores:after{content:"Ничего не найдено — попробуй другое слово";
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--pl-faint)}

/* Подвал: горячие клавиши */
.vlc-hint{padding:9px 16px;font-size:11px;color:var(--pl-faint);
  border-top:1px solid var(--pl-line2);background:var(--pl-panel);
  display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.vlc-hint .hk{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.vlc-hint kbd{display:inline-block;background:var(--pl-btn-bg);
  border:1px solid var(--pl-btn-line);border-bottom-width:2px;border-radius:4px;
  font:700 10px/1 var(--mono,monospace);color:var(--pl-sub);padding:3px 5px}

/* Тост */
.vlc-toast{position:absolute;left:50%;bottom:64px;transform:translate(-50%,8px);
  background:var(--acid,#c8ff00);color:#0a0a0c;font:800 12px/1.3 var(--sans,sans-serif);
  padding:10px 16px;border-radius:8px;box-shadow:4px 4px 0 var(--orange,#ff5c00);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5;
  max-width:calc(100% - 32px);text-align:center}
.vlc-toast.show{opacity:1;transform:translate(-50%,0)}