/* ---------- эквалайзер ---------- */

.eq { position: relative; height: 118px; touch-action: none; }
.eq__curve { position: absolute; left: 0; top: 0; width: 100%; height: 118px; pointer-events: none; color: var(--accent); opacity: 0.7; }
.eq__bands { position: relative; display: flex; align-items: flex-end; justify-content: space-between; height: 118px; }
.eq__band { position: relative; width: 4px; height: 118px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); cursor: grab; }
.eq__band::before { content: ''; position: absolute; inset: -8px -18px; }
.eq__band.is-drag { cursor: grabbing; }
.eq__fill { position: absolute; left: 0; bottom: 0; width: 4px; border-radius: 2px; background: var(--accent); }
.eq__knob { position: absolute; left: -5px; width: 14px; height: 14px; margin-bottom: -7px; border-radius: var(--pill); background: #ffffff; box-shadow: var(--shadow-1); pointer-events: none; }
.eq__band.is-drag .eq__knob { transform: scale(1.3); }
.eq__labels { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--t4); }
.eq__labels span { flex: none; width: 4px; text-align: center; white-space: nowrap; }

/* ---------- переключатели ---------- */

.switchrow { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-el); cursor: pointer; }
.switchrow__text { display: flex; flex-direction: column; gap: 4px; }
.switchrow__text b { font-size: 15px; font-weight: 700; }
.switchrow__text i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--t3); }
.switch { position: relative; flex: none; width: 48px; height: 28px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track {
  position: absolute; inset: 0; border-radius: var(--pill); pointer-events: none;
  background: var(--surface-3);
  transition: background var(--dur) var(--ease);
}
.switch__track::after {
  content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: var(--pill);
  background: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur) var(--ease);
}
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }

/* ---------- док: мини-плеер + таб-бар ---------- */

.dock { position: relative; z-index: 5; display: flex; flex-direction: column; }

.mini {
  position: relative; display: flex; align-items: center; gap: var(--gap-el);
  margin: 0; padding: 10px var(--gutter) 12px; text-align: left;
  background: rgba(var(--surface-1-rgb), 0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  overflow: visible;
}
.mini__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mini__text b { font-size: 13px; font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini__text i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--t2); }
.mini__ctl { display: flex; align-items: center; gap: 8px; }
.mini__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255, 255, 255, 0.10); }
.mini__bar i { display: block; height: 3px; width: 0; background: var(--accent); border-radius: 0 2px 2px 0; }

.btn-round {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 52px; height: 52px; border-radius: var(--pill);
  background: var(--accent); color: var(--on-accent);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-round:active { background: var(--accent-deep); transform: scale(0.94); }
.btn-round--sm { width: 36px; height: 36px; }
.btn-round--lg { width: 72px; height: 72px; box-shadow: 0 8px 24px var(--accent-glow); }

/* Кнопка play в состоянии загрузки: пока добывается ссылка на звук и трек
   буферизуется, значок — крутящаяся дуга (#i-loading, ставит core/player.js).
   Крутим только transform (композитор), линейно: это индикатор активности, не
   пружина. Для reduced-motion — статичная приглушённая дуга без вращения. */
@keyframes ic-spin { to { transform: rotate(1turn); } }
.btn-round.is-loading .ic { animation: ic-spin 0.75s linear infinite; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) {
  .btn-round.is-loading .ic { animation: none; opacity: 0.55; }
}

.tabbar {
  display: flex; align-items: center; justify-content: space-around;
  padding: 10px 4px var(--pad-b);
  background: rgba(var(--surface-1-rgb), 0.92); border-top: 1px solid var(--line-soft);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.tabbar::before { content: none; }
.tab { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; padding: 10px 0; color: var(--t3); transition: color var(--dur) var(--ease); }
/* Контур и заливка лежат рядом в одной кнопке: :active из JS не выразить,
   да и вид решает CSS — скрипт только вешает tab--on. */
.tab .ic--fill { display: none; }
.tab--on, .tab:active { color: var(--accent); }
.tab--on .ic--line, .tab:active .ic--line { display: none; }
.tab--on .ic--fill, .tab:active .ic--fill { display: block; }