/* MAGIC MUSIC RECORD — общий плеер и элементы всех макетов */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --mm-fg: #f6f1ff;
  --mm-dim: rgba(246, 241, 255, .62);
  --mm-faint: rgba(246, 241, 255, .36);
  --mm-accent: #a970ff;
  --mm-accent-2: #6b2bd9;
  --mm-ink: #0b0614;
  --mm-glass: rgba(16, 10, 30, .56);
  --mm-line: rgba(255, 255, 255, .12);
  --mm-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mm-radius: 18px;
}

.mm-hud, .mm-hud *, .mm-spot, .mm-spot *, .mm-toasts * { box-sizing: border-box; }
/* сброс кнопок слабее любых классов (:where) — иначе он съедал рамки, отступы и размер значков */
:where(.mm-hud, .mm-spot) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.mm-hud svg, .mm-spot svg { width: 1em; height: 1em; fill: currentColor; display: block; }

/* ---------- нижняя панель ---------- */
.mm-hud {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 9px;
  border-radius: var(--mm-radius); background: var(--mm-glass); border: 1px solid var(--mm-line);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  color: var(--mm-fg); font: 500 13px/1.25 var(--mm-font);
  opacity: 0; transform: translateY(24px); pointer-events: none;
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}
.mm-hud.on { opacity: 1; transform: none; pointer-events: auto; }
/* облегчённое качество (слабое устройство): без размытия под панелями — его пересчитывают каждый кадр поверх анимации */
html.mm-lite * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.mm-lite { --mm-glass: rgba(16, 10, 30, .9); }
html.mm-lite .dj, html.mm-lite .mm-drawer, html.mm-lite .mm-spot, html.mm-lite .mm-volpop, html.mm-lite .mm-pop { background: rgba(14, 8, 28, .96) !important; }
.mm-hud.mm-top { top: 16px; bottom: auto; transform: translateY(-24px); }
.mm-hud.mm-top.on { transform: none; }

.mm-bar { position: absolute; left: 18px; right: 18px; top: -4px; height: 9px; cursor: pointer; }
.mm-bar::before, .mm-bar i { content: ''; position: absolute; left: 0; top: 4px; height: 1.5px; border-radius: 2px; }
.mm-bar::before { right: 0; background: var(--mm-line); }
.mm-bar i { width: 0; background: linear-gradient(90deg, var(--mm-accent-2), var(--mm-accent), #fff); box-shadow: 0 0 10px var(--mm-accent); }

.mm-np { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 300px; }
.mm-cover { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.mm-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-meta { display: flex; flex-direction: column; min-width: 0; }
.mm-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-artist { color: var(--mm-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mm-ctrl { display: flex; align-items: center; gap: 2px; flex: none; }
.mm-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 21px; color: var(--mm-dim); transition: color .2s, background .2s, transform .2s; }
.mm-btn:hover { color: var(--mm-fg); background: rgba(255, 255, 255, .07); }
.mm-btn.mm-play { width: 46px; height: 46px; font-size: 22px; color: var(--mm-ink); background: var(--mm-fg); }
.mm-btn.mm-play:hover { background: #fff; transform: scale(1.06); }

.mm-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--mm-line); white-space: nowrap; color: var(--mm-dim); font-size: 12px; font-weight: 600; transition: color .2s, border-color .2s, background .2s; }
button.mm-chip:hover { color: var(--mm-fg); border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .05); }
.mm-chip svg { font-size: 15px; }
.mm-gap { flex: 1; }
.mm-live { color: var(--mm-fg); border-color: rgba(169, 112, 255, .45); background: rgba(169, 112, 255, .12); max-width: 460px; min-width: 0; overflow: hidden; padding: 0 12px 0 3px; gap: 8px; }
.mm-live-c { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.mm-live-b { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 9px !important; font-weight: 800; letter-spacing: .12em !important; flex: none; }
.mm-live-b em { font-style: normal; }
.mm-live-b i { width: 6px; height: 6px; border-radius: 50%; background: #f0e2ff; animation: mm-blink 1.4s ease-in-out infinite; }
@keyframes mm-blink { 50% { opacity: .3; } }
.mm-live[hidden] { display: none; }
.mm-live-t { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.mm-live u { text-decoration: none; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .5); }
.mm-demo { font-style: normal; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 5px; border-radius: 5px; background: rgba(255, 255, 255, .14); color: var(--mm-dim); }
.mm-dot { width: 7px; height: 7px; border-radius: 50%; background: #d7b8ff; box-shadow: 0 0 0 0 rgba(215, 184, 255, .7); animation: mm-pulse 1.6s infinite; flex: none; }
@keyframes mm-pulse { 0% { box-shadow: 0 0 0 0 rgba(215, 184, 255, .7); } 70% { box-shadow: 0 0 0 9px rgba(215, 184, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(215, 184, 255, 0); } }
.mm-cd { font-variant-numeric: tabular-nums; }
.mm-links { display: flex; align-items: center; gap: 4px; flex: none; }
.mm-ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--mm-dim); font-size: 16px; text-decoration: none; transition: color .2s, background .2s; }
.mm-ic:hover { color: var(--mm-fg); background: rgba(255, 255, 255, .08); }
.mm-ic-t, .mm-lang { font: 800 10.5px/1 var(--mm-font); letter-spacing: .04em; }

/* средняя ширина: в LIVE — только трек (без «Даниил слушает:»), плашка релиза уступает место */
@media (min-width: 1600px) { .mm-live { max-width: 600px; } }
@media (max-width: 1366px) { .mm-live-p { display: none; } }
@media (max-width: 1180px) { .mm-cd { display: none; } }
@media (max-width: 900px) {
  .mm-cd, .mm-full span { display: none; }
  .mm-live-t { display: none; }
}
@media (max-width: 640px) {
  .mm-hud { left: 10px; right: 10px; bottom: 10px; gap: 6px; padding: 7px 8px 7px 7px; }
  .mm-np { flex: 1 1 auto; }
  .mm-prev, .mm-links .mm-ic:not(.mm-lang), .mm-live u { display: none; }
  .mm-live { padding: 0 8px; }
}

/* обложки в палитре сайта: чёрный → фиолетовый → белый, цвет при наведении */
.mm-duo { position: relative; overflow: hidden; background: #1a0f2e; isolation: isolate; }
.mm-duo img { filter: grayscale(1) contrast(1.12) brightness(.95); transition: filter .5s; }
.mm-duo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(150deg, #d9c2ff, #7c3aed 55%, #2a0b52); mix-blend-mode: color; transition: opacity .5s; pointer-events: none; }
.mm-duo.mm-color img, .mm-duo:hover img { filter: none; }
.mm-duo.mm-color::after, .mm-duo:hover::after { opacity: 0; }

/* ---------- окно Spotify ---------- */
.mm-spot {
  position: fixed; right: 16px; bottom: 84px; z-index: 61; width: min(420px, calc(100vw - 32px));
  padding: 10px; border-radius: 20px; background: rgba(12, 8, 22, .82); border: 1px solid var(--mm-line);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--mm-fg); font: 500 12px/1.35 var(--mm-font);
  opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none; transition: opacity .4s, transform .4s;
}
.mm-spot.on { opacity: 1; transform: none; pointer-events: auto; }
.mm-spot-h { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 8px 6px; }
.mm-spot-h b { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mm-spot-slot { border-radius: 12px; overflow: hidden; min-height: 152px; background: #111; }
.mm-spot-slot iframe { display: block; border: 0; }
.mm-spot-n { margin: 8px 6px 2px; color: var(--mm-faint); }

/* ---------- уведомления ---------- */
.mm-toasts { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
/* уведомления — под переключателем миров (top ставит MM.toast), крупные и со свечением, чтобы их замечали */
.mm-toast { padding: 13px 22px; border-radius: 18px; background: linear-gradient(135deg, rgba(46, 24, 88, .96), rgba(20, 11, 38, .96)); border: 1px solid rgba(201, 168, 255, .6); color: #fff;
  font: 700 15px/1.35 var(--mm-font); box-shadow: 0 0 0 4px rgba(169, 112, 255, .14), 0 14px 50px rgba(110, 50, 220, .55); opacity: 0; transform: translateY(-14px) scale(.96);
  transition: opacity .45s, transform .5s cubic-bezier(.2, .9, .3, 1.2); max-width: min(560px, calc(100vw - 32px)); text-align: center; }
.mm-toast.on { opacity: 1; transform: none; }
@media (max-width: 760px) { .mm-toast { font-size: 14px; padding: 12px 18px; } }

/* ---------- вход ---------- */
.mm-gone { opacity: 0 !important; pointer-events: none !important; transition: opacity 1.1s ease !important; }

/* ---------- сайт: «где слушать», загрузка, недавно слушал ---------- */
.mm-hud.mm-loading .mm-play { animation: mm-spin 1s linear infinite; background: conic-gradient(#fff 0 70%, rgba(255, 255, 255, .25) 0); }
@keyframes mm-spin { to { transform: rotate(360deg); } }
.mm-live.mm-was { border-color: var(--mm-line); background: rgba(255, 255, 255, .04); color: var(--mm-dim); }
.mm-live.mm-was .mm-live-b i { animation: none; opacity: .45; }
.mm-np { cursor: pointer; }
.mm-pop { position: absolute; right: 0; bottom: calc(100% + 10px); width: min(300px, calc(100vw - 32px)); display: none; flex-direction: column; gap: 2px; padding: 10px; border-radius: 16px; background: rgba(14, 9, 26, .92); border: 1px solid var(--mm-line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.mm-pop.on { display: flex; }
.mm-pop b { padding: 4px 8px 8px; font-size: 12px; color: var(--mm-dim); font-weight: 600; }
.mm-pop a { padding: 9px 10px; border-radius: 10px; color: var(--mm-fg); text-decoration: none; font-weight: 600; }
.mm-pop a:hover { background: rgba(169, 112, 255, .16); }
@media (min-width: 641px) { .mm-pop { right: auto; left: 330px; } }

/* ---------- все треки ---------- */
.mm-drawer { position: fixed; top: 12px; right: 12px; bottom: 92px; z-index: 65; width: min(430px, calc(100vw - 24px)); display: flex; flex-direction: column; border-radius: 22px; background: rgba(12, 8, 22, .9); border: 1px solid var(--mm-line); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); color: var(--mm-fg); font: 500 13px/1.3 var(--mm-font); transform: translateX(calc(100% + 24px)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.mm-drawer.on { transform: none; }
.mm-drawer button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.mm-drawer svg { width: 1em; height: 1em; fill: currentColor; display: block; }
.mm-dr-h { display: flex; align-items: center; gap: 10px; padding: 16px 12px 8px 20px; }
.mm-dr-h b { font-size: 17px; font-weight: 800; }
.mm-dr-n { color: var(--mm-faint); font-weight: 700; }
.mm-dr-x { margin-left: auto; }
.mm-dr-q { margin: 4px 16px 8px; height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--mm-line); background: rgba(255, 255, 255, .05); color: var(--mm-fg); font: 500 14px var(--mm-font); outline: none; }
.mm-dr-q:focus { border-color: rgba(169, 112, 255, .6); }
.mm-dr-f { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.mm-dr-f button { height: 28px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--mm-line) !important; color: var(--mm-dim) !important; font-size: 12px !important; font-weight: 700 !important; }
.mm-dr-f button.on { background: var(--mm-fg) !important; color: var(--mm-ink) !important; border-color: transparent !important; }
.mm-dr-list { flex: 1; overflow-y: auto; padding: 0 8px 10px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.mm-row { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 12px; cursor: pointer; }
.mm-row:hover { background: rgba(255, 255, 255, .05); }
.mm-row.on { background: rgba(169, 112, 255, .16); }
.mm-row[hidden] { display: none; }
.mm-row .mm-cover { width: 44px; height: 44px; border-radius: 9px; }
.mm-row-m { flex: 1; min-width: 0; }
.mm-row-m b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-row-m em { font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #c9a8ff; margin-left: 4px; }
.mm-row-m i { font-style: normal; font-size: 9px; letter-spacing: .1em; padding: 2px 5px; border-radius: 5px; background: #fff; color: var(--mm-ink); margin-left: 4px; vertical-align: 1px; }
.mm-row-m small { display: block; color: var(--mm-faint); font-size: 11.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-row-l { display: flex; gap: 2px; opacity: .55; transition: opacity .2s; }
.mm-row:hover .mm-row-l { opacity: 1; }
.mm-row-l a { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--mm-fg); text-decoration: none; font: 800 9.5px var(--mm-font); }
.mm-row-l a:hover { background: rgba(255, 255, 255, .1); }
.mm-row-l svg { width: 15px; height: 15px; }

/* ---------- сцены и верхняя полоса ---------- */
.scene { position: fixed; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1s ease; overflow: hidden; }
.scene.on { opacity: 1; pointer-events: auto; }
.mm-top { position: fixed; left: 0; right: 0; top: 0; z-index: 55; display: flex; align-items: center; gap: 12px; padding: 18px 24px; pointer-events: none; opacity: 0; transition: opacity 1s; }
.mm-top.on { opacity: 1; }
.mm-top > * { pointer-events: auto; }
.mm-brand { font: 600 12px/1.45 'Unbounded', var(--mm-font); letter-spacing: .24em; text-transform: uppercase; color: var(--mm-fg); text-shadow: 0 1px 14px rgba(0, 0, 0, .7); text-decoration: none; cursor: pointer; transition: opacity .2s; }
.mm-brand:hover { opacity: .8; }
.mm-brand span { display: block; font: 500 12px var(--mm-font); letter-spacing: .05em; text-transform: none; color: var(--mm-dim); }
.mm-switch { margin: 0 auto; display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: var(--mm-glass); border: 1px solid var(--mm-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.mm-switch button { height: 32px; padding: 0 16px; border-radius: 99px; border: 0; background: none; color: var(--mm-dim); font: 700 12px var(--mm-font); letter-spacing: .06em; cursor: pointer; transition: background .3s, color .3s; }
.mm-switch button:hover { color: var(--mm-fg); }
.mm-switch button.on { background: var(--mm-fg); color: var(--mm-ink); }
.mm-tracks { height: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--mm-line); background: var(--mm-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--mm-fg); font: 700 12px var(--mm-font); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.mm-tracks svg { width: 16px; height: 16px; fill: currentColor; }
.mm-tracks:hover { background: rgba(169, 112, 255, .2); }
/* «?» — пройти обучение снова */
.mm-help { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--mm-line); background: var(--mm-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--mm-fg); font: 800 15px/1 var(--mm-font); cursor: pointer; transition: background .2s, border-color .2s; }
.mm-help:hover { background: rgba(169, 112, 255, .25); border-color: rgba(201, 168, 255, .6); }
@media (max-width: 760px) {
  .mm-top { padding: 12px 12px; gap: 8px; flex-wrap: wrap; }
  .mm-brand span { display: none; }
  .mm-switch { order: 3; margin: 0; width: 100%; justify-content: center; }
  .mm-switch button { flex: 1; padding: 0 8px; }
  .mm-help { margin-left: auto; width: 34px; height: 34px; }
  .mm-tracks { height: 34px; padding: 0 12px; }
  .mm-tracks span { display: none; }
}

.mm-cd[hidden] { display: none; }
.mm-cd.mm-out { cursor: pointer; color: var(--mm-fg); border-color: rgba(169, 112, 255, .5); background: rgba(169, 112, 255, .12); }

/* фокус: без белых рамок после клика, но видно с клавиатуры */
.mm-hud button:focus, .mm-spot button:focus, .mm-drawer button:focus, .mm-top button:focus { outline: none; }
.mm-hud button:focus-visible, .mm-spot button:focus-visible, .mm-drawer button:focus-visible, .mm-top button:focus-visible { outline: 2px solid rgba(201, 168, 255, .75); outline-offset: 2px; }
/* смена трека в плеере — плавно */
.mm-np { transition: opacity .2s ease, transform .2s ease; }
.mm-np.mm-swap { opacity: 0; transform: translateY(5px); }
/* «К трекам сайта» — вернуться со Spotify */
.mm-back { color: #fff; border-color: rgba(201, 168, 255, .55); background: rgba(169, 112, 255, .2); }
.mm-back[hidden], .mm-where[hidden] { display: none; }
button.mm-live:hover, button.mm-back:hover, .mm-spot-back:hover { color: #fff; border-color: rgba(201, 168, 255, .8); background: rgba(169, 112, 255, .28); }
.mm-spot-h > span { display: flex; align-items: center; gap: 6px; }
.mm-spot-back { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid rgba(201, 168, 255, .5); background: rgba(169, 112, 255, .18); color: #fff; font-size: 12px; font-weight: 700; transition: border-color .2s, background .2s; }
.mm-spot-back svg { font-size: 15px; }
/* телефон: плеер в две строки — трек и кнопки сверху, остальное снизу */
@media (max-width: 640px) {
  .mm-hud { flex-wrap: wrap; row-gap: 8px; column-gap: 6px; padding: 8px 10px; }
  .mm-np { order: 1; flex: 1 1 calc(100% - 190px); min-width: 0; }  /* строка 1: трек + кнопки, остальное переносится вниз */
  .mm-ctrl { order: 2; }
  .mm-prev { display: grid; }
  .mm-where, .mm-back, .mm-live, .mm-links { order: 3; }
  .mm-gap, .mm-cd, .mm-links .mm-ic:not(.mm-lang) { display: none; }
  .mm-live { flex: 1 1 0; min-width: 0; max-width: none; padding: 0 10px 0 3px; }
  .mm-live-t { display: block; }
  .mm-live u, .mm-demo { display: none; }
  .mm-where span, .mm-back span { display: inline; }
  .mm-spot { bottom: 128px; }
  .mm-drawer { bottom: 128px; }
}
/* громкость */
.mm-volpop { position: absolute; bottom: calc(100% + 10px); width: 230px; display: none; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(14, 9, 26, .94); border: 1px solid var(--mm-line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); z-index: 2; }
.mm-volpop.on { display: flex; }
.mm-volpop b { font-size: 12px; color: var(--mm-dim); font-weight: 600; }
.mm-volpop label { display: grid; grid-template-columns: 1fr 42px; align-items: center; gap: 2px 8px; font-size: 12.5px; }
.mm-volpop input { grid-column: 1 / 3; width: 100%; margin: 0; accent-color: #c9a8ff; cursor: pointer; }
.mm-volpop em { grid-row: 1; grid-column: 2; font-style: normal; text-align: right; color: var(--mm-dim); font-size: 12px; }
.mm-volpop small { color: var(--mm-faint); font-size: 11px; line-height: 1.35; }
.mm-volpop .mm-enh { display: flex; grid-template-columns: none; align-items: flex-start; gap: 9px; padding-top: 8px; border-top: 1px solid var(--mm-line); cursor: pointer; }
.mm-volpop .mm-enh input { width: 16px; height: 16px; margin: 1px 0 0; flex: none; grid-column: auto; }
.mm-volpop .mm-enh span { display: flex; flex-direction: column; gap: 2px; }
.mm-volpop .mm-enh b { color: var(--mm-fg); font-size: 12.5px; font-weight: 700; }
.mm-volpop .mm-enh i { font-style: normal; color: var(--mm-faint); font-size: 11px; line-height: 1.3; }
/* перемотка перетаскиванием: полоса шире под пальцем, кружок и время при наведении */
.mm-bar { top: -9px; height: 18px; touch-action: none; }
.mm-bar::before, .mm-bar i { top: 8px; transition: height .15s, top .15s; }
.mm-bar:hover::before, .mm-bar:hover i, .mm-bar.mm-scrub::before, .mm-bar.mm-scrub i { height: 4px; top: 7px; }
.mm-bar i::after { content: ''; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--mm-accent); opacity: 0; transition: opacity .15s; }
.mm-bar:hover i::after, .mm-bar.mm-scrub i::after { opacity: 1; }
.mm-bar-t { position: absolute; bottom: 16px; transform: translateX(-50%); padding: 3px 7px; border-radius: 7px; background: rgba(14, 9, 26, .92); border: 1px solid var(--mm-line); font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; font-variant-numeric: tabular-nums; }
.mm-bar:hover .mm-bar-t, .mm-bar.mm-scrub .mm-bar-t { opacity: 1; }
/* играющий трек в списке: обложка в цвете, полоски «играет», название акцентом */
.mm-row.on { background: rgba(169, 112, 255, .22); box-shadow: inset 0 0 0 1px rgba(201, 168, 255, .35); }
.mm-row.on .mm-row-m b { color: #e3d2ff; }
.mm-row .mm-cover { position: relative; }
.mm-eq { display: none; position: absolute; left: 50%; bottom: 7px; z-index: 3; transform: translateX(-50%); gap: 2px; align-items: flex-end; height: 14px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.mm-row.on .mm-eq { display: flex; }
.mm-eq i { width: 3px; height: 14px; border-radius: 1px; background: #fff; transform: scaleY(.25); transform-origin: bottom; }
.mm-drawer.on.mm-playing .mm-row.on .mm-eq i { animation: mm-eqs 1.05s ease-in-out infinite; }   /* только при открытом списке: под размытым фоном анимация давала вспышки экрана */
.mm-eq i:nth-child(2) { animation-delay: -.35s !important; } .mm-eq i:nth-child(3) { animation-delay: -.7s !important; }
@keyframes gl-eq { 0%, 100% { height: 3px; } 50% { height: 14px; } }
@keyframes mm-eqs { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }   /* масштаб, а не высота — без перерисовки размытого слоя */