/* Плавающие стеклянные панели (glass.js). Подключается последним.
   Лента занимает всё окно и уезжает ПОД стекло - поэтому оно её и преломляет. */
:root {
  --g: 12px;
  --side-w: 236px;
  --player-h: 84px;
  --top-h: 48px;
  --queue-w: 340px;
}
body { background: #060608; }

/* живой фон под всем */
.glass-root { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#ambient { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------------- стекло */
.lg { position: relative; isolation: auto; box-shadow: 0 14px 44px rgba(0,0,0,.38), 0 2px 6px rgba(0,0,0,.25); }
.lg > :not(.lg-layers) { position: relative; z-index: 1; }
.lg-layers {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; overflow: hidden;
}
.lg-layers > span { position: absolute; inset: 0; border-radius: inherit; }
.lg-rim {
  padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  background: linear-gradient(var(--ang, 135deg), rgba(255,255,255,0) 0%, rgba(255,255,255,var(--a1, .12)) var(--p1, 33%), rgba(255,255,255,var(--a2, .4)) var(--p2, 66%), rgba(255,255,255,0) 100%);
}
/* без mix-blend-mode: смешивание изолирует группу, и backdrop-filter перестаёт видеть, что под стеклом.
   Поэтому кромка просто полупрозрачная: блик по диагонали за курсором + еле видная линия по контуру */
.lg-rim1 { opacity: .3; }
.lg-rim2 { background: none; padding: 0; -webkit-mask: none; mask: none; box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset, 0 1px 0 rgba(255,255,255,.06) inset; }
.lg-shine { opacity: 0; transition: opacity .2s ease-out; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 90%); }
.lg-btn:hover .lg-shine { opacity: .6; }
.lg-btn:active .lg-shine { opacity: 1; }
.lg-btn:active { transition: transform .1s; }
.lg:not(.lg-btn) { transition: transform .2s ease-out; }
.lg-btn { transition: transform .2s ease-out; }

/* ---------------- раскладка: лента на всё окно, панели плавают над ней */
.app { position: fixed; inset: 0; z-index: 1; display: block; }
.main {
  position: absolute; inset: 0; z-index: 1;
  overflow-y: auto; overflow-x: hidden;
  padding: calc(var(--top-h) + var(--g) * 2) var(--g) calc(var(--player-h) + var(--g) * 2 + 16px) calc(var(--side-w) + var(--g) * 2);
}
.main::-webkit-scrollbar { width: 12px; }
.main .ambient { display: none; }
.view { padding: 8px 20px 20px; }
.side {
  position: absolute; z-index: 5; left: var(--g); top: var(--g); bottom: calc(var(--player-h) + var(--g) * 2);
  width: var(--side-w); background: transparent; border: 0;
  padding: 12px 12px 12px;
}
.side .logo { display: none; }
.top {
  position: absolute; z-index: 5;
  left: calc(var(--side-w) + var(--g) * 2); right: calc(var(--g) + 14px); top: var(--g); height: var(--top-h);
  padding: 0; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important;
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.hist-btns { height: var(--top-h); padding: 0 5px; align-items: center; }
.icon-btn.round { background: transparent; width: 38px; height: 38px; }
.icon-btn.round:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.search { height: var(--top-h); max-width: 520px; background: transparent; border: 0; }
.search:focus-within { background: transparent; }
.search:focus-within .lg-tint { background: rgba(8,8,12,.34) !important; }
.top-me { padding: 8px; background: transparent; }
.player {
  position: absolute; z-index: 5; left: var(--g); right: var(--g); bottom: var(--g); height: var(--player-h);
  background: transparent; border: 0; padding: 0 22px 0 13px;
}
.player .range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--text) var(--p), rgba(255,255,255,.28) var(--p)); }
.player .range:hover::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--red) var(--p), rgba(255,255,255,.28) var(--p)); }
.queue {
  position: absolute; z-index: 5; right: var(--g); top: var(--g); bottom: calc(var(--player-h) + var(--g) * 2);
  width: var(--queue-w); background: transparent; border: 0;
}
.app:has(#queuePanel:not([hidden])) .main { padding-right: calc(var(--queue-w) + var(--g) * 2); }
.app:has(#queuePanel:not([hidden])) .top { right: calc(var(--queue-w) + var(--g) * 2); }

/* шапки исполнителя и профиля - карточками внутри ленты */
.a-hero { margin: 0 0 22px; border-radius: 26px; height: clamp(260px, 42vh, 430px); }
.a-hero-body { padding: 0 28px 24px; }
.prof-hero { margin: 0 0 22px; border-radius: 26px; padding: 64px 28px 26px; }
.tile { background: rgba(14,14,18,.55); }
.a-hero-bg::after {
  background:
    radial-gradient(120% 90% at 0% 100%, rgba(6,6,8,.82) 0%, rgba(6,6,8,.55) 35%, transparent 70%),
    linear-gradient(180deg, rgba(6,6,8,.1) 0%, rgba(6,6,8,0) 45%, rgba(6,6,8,.55) 100%);
}
.a-hero .pl-kind, .a-hero .pl-sub { color: rgba(255,255,255,.92); text-shadow: 0 1px 12px rgba(0,0,0,.8), 0 0 2px rgba(0,0,0,.6); }
.a-hero .pl-kind { font-size: 13px; }
.a-hero .a-name { text-shadow: 0 4px 30px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.4); }

/* ---------------- во весь экран: над всем, кроме плеера */
.np {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  z-index: 4; background: transparent; animation: npIn .4s cubic-bezier(.2,.8,.2,1);
}
.np-bg, #viz, .np-src { display: none; }
.np-body { inset: 0 0 calc(var(--player-h) + var(--g) + 150px); }
.np.has-lyrics .np-body { padding-top: 76px; }
.np-close, .np-lyr, .icon-btn.np-lyr.on { position: absolute; background: transparent; top: 22px; width: 46px; height: 46px; color: var(--text); }
.np-close { left: 22px; }
.np-lyr, .icon-btn.np-lyr.on { right: 22px; }
.icon-btn.np-lyr.on { color: var(--red); }
.icon-btn.np-lyr.none.on { color: var(--mute); }
.icon-btn.np-lyr.on::after { display: none; }
.np-clip, .icon-btn.np-clip.on { position: absolute; top: 22px; right: 22px; width: 46px; height: 46px; background: transparent; color: var(--text); }
.icon-btn.np-clip.on { color: var(--red); }
.icon-btn.np-clip.on::after { display: none; }

/* клип на месте обложки */
.np-cover { position: relative; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.np-cover-img { position: absolute; inset: 0; transition: opacity .6s; }
#npVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; transition: opacity .7s; pointer-events: none; }
.np-cover.clip-on #npVideo { opacity: 1; }
.np-cover.clip-on .np-cover-img { opacity: 0; }
.np.has-clip .np-cover { aspect-ratio: 16 / 9; width: min(64vw, 1060px); }
.np.has-clip.has-lyrics .np-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4vw; padding-left: 5vw; }
.np.has-clip.has-lyrics .np-cover { width: min(40vw, 760px); }
body.np-open .side, body.np-open .top, body.np-open .main, body.np-open .queue { visibility: hidden; }
/* backdrop-filter рисуется и у невидимого элемента - стекло скрытых панелей убираем совсем */
body.np-open .side .lg-layers, body.np-open .top .lg-layers, body.np-open .queue .lg-layers { display: none; }

/* ---------------- вход */
.auth { background: transparent; }
.auth-glow, .auth-bars { display: none; }
.auth-card { background: transparent; border: 0; box-shadow: 0 30px 80px rgba(0,0,0,.45); backdrop-filter: none; }
.auth-card .fld input { background: rgba(0,0,0,.3); border-color: rgba(255,255,255,.12); }
.seg { background: rgba(0,0,0,.28); }

@media (max-width: 1000px) {
  :root { --side-w: 76px; }
  .side { padding: 12px 8px 12px; }
}

/* ---------------- эквалайзер */
.eq-panel {
  position: absolute; z-index: 8; right: calc(var(--g) + 8px); bottom: calc(var(--player-h) + var(--g) * 2);
  width: 520px; max-width: calc(100vw - 2 * var(--g)); padding: 16px 18px 16px;
  border-radius: 26px; animation: eqIn .28s cubic-bezier(.2,.9,.25,1);
}
@keyframes eqIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.eq-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.eq-head b { font-size: 16px; font-weight: 800; margin-right: auto; }
.eq-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.eq-presets .chip { padding: 6px 12px; font-size: 12.5px; background: rgba(255,255,255,.08); }
.eq-presets .chip.on { background: var(--red); color: #fff; }
.eq-body { position: relative; height: 196px; }
#eqCurve { position: absolute; left: 0; right: 0; top: 22px; height: 150px; width: 100%; pointer-events: none; }
.eq-bands { position: relative; display: grid; grid-template-columns: repeat(10, 1fr); height: 100%; }
.eq-band { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.eq-db { height: 16px; font-size: 11px; font-weight: 700; color: var(--mute); font-variant-numeric: tabular-nums; }
.eq-track { position: relative; width: 28px; height: 150px; cursor: ns-resize; touch-action: none; }
.eq-track::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; border-radius: 2px; background: rgba(255,255,255,.12); }
.eq-zero { position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: rgba(255,255,255,.18); }
.eq-fill { position: absolute; left: 50%; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--red); box-shadow: 0 0 10px rgba(255,43,61,.5); }
.eq-knob { position: absolute; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); transition: transform .12s; }
.eq-track:hover .eq-knob, .eq-track:active .eq-knob { transform: scale(1.2); }
.eq-hz { font-size: 11px; font-weight: 700; color: var(--mute); }
.eq-panel.off .eq-fill { background: rgba(255,255,255,.35); box-shadow: none; }
.eq-panel.off .eq-db { opacity: .5; }
.eq-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); font-weight: 700; font-size: 13px; }
.eq-foot .eq-lbl { color: var(--mute); font-weight: 650; margin-left: 8px; }
.eq-foot .range { flex: 1; }
.eq-foot .range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--red) var(--p), rgba(255,255,255,.18) var(--p)); }
.eq-foot .range::-webkit-slider-thumb { opacity: 1; }

/* переключатель как в iOS */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch i { position: absolute; inset: 0; border-radius: 12px; background: rgba(255,255,255,.18); transition: background .2s; }
.switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.switch input:checked + i { background: var(--red); }
.switch input:checked + i::after { transform: translateX(18px); }
#eqBtn.on { color: var(--red); }

/* ---------------- тряска */
.shake-panel { width: 380px; }
.sh-power { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 2px 6px; font-weight: 700; }
.sh-power b { font-size: 22px; font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; }
.sh-range { width: 100%; height: 22px; }
.sh-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--red) var(--p), rgba(255,255,255,.18) var(--p)); }
.sh-range::-webkit-slider-thumb { opacity: 1; width: 18px; height: 18px; margin-top: -6px; }
.sh-opts { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 14px; }
.sh-opt { display: flex; align-items: center; justify-content: space-between; padding: 7px 2px; font-weight: 650; font-size: 13.5px; }
.sh-opt + .sh-opt { border-top: 1px solid rgba(255,255,255,.06); }
.shake-panel.off .sh-opts, .shake-panel.off .sh-power, .shake-panel.off .sh-range { opacity: .45; }
.sh-test { height: 40px; }
#shakeBtn.on { color: var(--red); }

/* фон и обложка трясутся сами по себе: свой слой на видеокарте, без перерисовки интерфейса */
#glass, #npMedia { will-change: transform; transform: scale(1.05); }
#npMedia { transform: none; }
.a-hero-bg { overflow: hidden; }
.a-hero-bg img { transform: scale(1.06); }

.fx-h { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin: 6px 2px 8px; }
.fx-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.fx-row > span { width: 40px; flex: none; color: var(--mute); font-weight: 650; font-size: 13px; }
.fx-row .eq-presets { margin-bottom: 0; }
.shake-panel .fx-h + .eq-presets, .shake-panel #shPresets { margin-bottom: 12px; }
.shake-panel { width: 400px; }
#glass { transition: none; }

/* визуализатор отдельно от фона: фон трясётся, полоски - нет */
.viz-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.np-meta { will-change: transform; }
#lyrics { will-change: transform; }

/* ---------------- фонк-эдит: вспышка кадра во весь экран (кнопки над ней) */
.np-flash { position: absolute; inset: 0; z-index: 1; background: #fff; opacity: 0; pointer-events: none; }
.np-close, .np-lyr, .np-clip { z-index: 3; }
.np-body { will-change: transform; transform-origin: 50% 45%; }

/* во время тряски - стекло без SVG-преломления (только размытие): иначе лаги */
body.fx-busy #np .lg-warp { filter: none !important; }
#vizLayer { will-change: filter; }

/* SVG-преломление больших панелей - самое тяжёлое место (144 -> 45 кадров); по умолчанию выкл */
body:not(.glass-hq) .lg-big:not(.player) .lg-warp { filter: none !important; }   /* у плеера - настоящее стекло всегда */
.sh-note { display: block; font-size: 11.5px; font-weight: 600; color: var(--mute); margin-top: 2px; }
.shake-panel { max-height: calc(100vh - var(--player-h) - var(--g) * 4); overflow-y: auto; }

/* лента мягко гаснет у краёв, как в iOS: под шапкой исчезает до того, как залезть
   под поиск и кнопки, под плеером - приглушается */
.main {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 18px, rgba(0,0,0,.2) 44px,
    #000 calc(var(--top-h) + var(--g) * 2 + 8px),
    #000 calc(100% - var(--player-h) - var(--g) * 2 - 6px), rgba(0,0,0,.8) calc(100% - var(--player-h) * 0.4), rgba(0,0,0,.6) 100%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 18px, rgba(0,0,0,.2) 44px,
    #000 calc(var(--top-h) + var(--g) * 2 + 8px),
    #000 calc(100% - var(--player-h) - var(--g) * 2 - 6px), rgba(0,0,0,.8) calc(100% - var(--player-h) * 0.4), rgba(0,0,0,.6) 100%);
}

.viz-layer { inset: auto; left: 0; right: 0; top: 0; width: 100%; height: 0; }

/* стекло плеера: светлая кромка сверху и ярче блик - как у стеклянных кнопок */
.player .lg-rim1 { opacity: .55; }
.player .lg-rim2 { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.09), inset 0 -1px 0 rgba(255,255,255,.06); }