/* ═══════════════════════════════════════════════════════════════════════════
   HOME PLAYER HUB — unified multi-source player
   - 60% player (left) / 40% sources (right) on desktop
   - Single column on mobile ≤1000px (player сверху, sources ниже)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Scrollbar jump fix — браузер всегда резервирует место под vertical scrollbar,
   даже когда его нет. Иначе появление скроллбара (expand карточек, modal,
   длинный список сетов) резко сдвигает всю страницу влево на ~15px. */
html{ scrollbar-gutter: stable; }

/* overflow: clip > overflow: hidden — hidden ВСЁ ЕЩЁ разрешает программный
 * scroll (например, element.scrollIntoView() каскадно скроллит такого предка).
 * Из-за этого клик на chip сета / mood-плашку сдвигал весь .player-hub влево:
 * внутри sub-chips-row был scrollIntoView, и Chrome подтягивал горизонтальный
 * scroll главного контейнера вместе с ним. `clip` полностью запрещает scroll
 * и обрезку перекрывает рендером — визуально идентичен hidden,
 * но scrollIntoView ancestors уже не сдвинет. */
main.home{ overflow: clip }

/* ═══════════════════════════════════════════════════════════════════════════
 * Shared-track landing — body.shared-mode ставится из player-init.js, когда
 * юзер пришёл по ссылке /?track_share=<uuid>. Прячем hero и dj-scene на
 * десктопе тоже (на мобиле hero уже скрыт через radio-widget.css), чтобы
 * юзер сразу видел плеер с нужным треком.
 * ═══════════════════════════════════════════════════════════════════════════ */
body.shared-mode .hero-copy  { display: none !important }
body.shared-mode .dj-scene   { display: none !important }
body.shared-mode .ambient    { display: none !important }
body.shared-mode .home       { padding-top: 70px !important }
/* В hub-е убираем верхний margin — он толкал плеер под dj-girl, которой здесь нет. */
body.shared-mode .player-hub { margin-top: 0 !important }
/* Мобильный радио-виджет на landing шареного трека тоже не показываем —
   фокус пользователя на треке, иначе два аудио-источника спорят. */
body.shared-mode #radio-widget-wrap { display: none !important }

.player-hub{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,60fr) minmax(0,40fr);
  gap:22px;
  /* dj-scene (1024px absolute) делает fade от 68% до 82% высоты картинки =
     нижняя кромка fade на ~752px от верха страницы. Опускаем плеер под
     эту зону, иначе glass панели накрывают низ девушки-DJ.
     На моб media queries переопределяют этот margin. */
  margin-top:360px;
  padding:0 5vw;
  align-items:start;
}
.player-hub .glass{
  padding:20px 22px 22px;
  border-radius:22px;
  height:620px;                          /* фикс — обе панели равной высоты */
  max-height:calc(100vh - 100px);        /* но не больше viewport */
  display:flex;flex-direction:column;
  overflow:hidden;                       /* панели не растягиваются */
}

/* ─── PLAYER (left) ─────────────────────────────────────────────────── */
.player-panel{gap:14px}

.player-context{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;
  border-radius:20px;
  background:rgba(15,10,35,.45);
  border:1px solid var(--src-color,#7d5eb8);
  align-self:flex-start;
  font-size:10px;letter-spacing:2px;
  text-transform:uppercase;
  color:var(--src-color,#c9bfe8);
  box-shadow:0 0 12px color-mix(in srgb,var(--src-color,#7d5eb8) 30%,transparent);
  transition:border-color .3s,color .3s,box-shadow .3s;
}
.context-sep{opacity:.45}
.context-sub{opacity:.85;letter-spacing:1.5px}

.player-cover{
  width:min(300px,60%);
  aspect-ratio:1;
  margin:8px auto 4px;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
  border:1px solid #2a2148;
  background:linear-gradient(135deg,#1a1237,#0e0925);
  box-shadow:0 12px 40px rgba(0,0,0,.4),inset 0 0 20px rgba(139,66,187,.1);
  transition:transform .18s,box-shadow .2s;
}
.player-cover:hover{transform:translateY(-2px)}
.player-cover img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.cover-overlay{
  position:absolute;inset:0;
  display:grid;place-items:center;
  background:radial-gradient(circle at center,rgba(15,7,40,.45),rgba(15,7,40,.65));
  opacity:0;
  transition:opacity .22s;
}
.player-cover:hover .cover-overlay,
.player-cover.paused .cover-overlay{opacity:1}
.cover-play-icon{
  font-size:44px;
  color:#fff;
  text-shadow:0 4px 20px rgba(0,0,0,.7);
  transition:transform .1s;
}
.player-cover:active .cover-play-icon{transform:scale(.92)}

/* Meta: artist + title + like */
.player-meta{
  display:flex;align-items:center;gap:14px;
  min-height:44px;
}
.player-titles{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:3px;
}
.player-title{
  font-size:17px;font-weight:600;
  color:#f0eaff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.player-artist{
  font-size:13px;
  color:#a89bd0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.player-like{
  width:36px;height:36px;
  border-radius:50%;
  background:transparent;
  border:1px solid var(--border,#3a2b64);
  color:#8f83b8;
  font-size:16px;
  display:grid;place-items:center;
  cursor:pointer;
  transition:all .15s;
  flex-shrink:0;
}
.player-like:not(:disabled):hover{
  color:#ff8ac2;border-color:#ff5a9e88;transform:scale(1.06);
}
.player-like:disabled{opacity:.35;cursor:not-allowed}
.player-like.active{
  color:#ff5a9e;border-color:#ff5a9e;background:#40122a;
  box-shadow:0 0 10px #ff5a9e55;
}

/* Waveform (static, same 2-canvas pattern as online-dj) */
.player-wf{
  position:relative;
  height:56px;
  border-radius:10px;
  background:rgba(10,8,30,.55);
  border:1px solid #21173e;
  overflow:hidden;
  margin-top:2px;
  cursor:pointer;
}
.player-wf .wf-bg,
.player-wf .wf-fg{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  display:block;pointer-events:none;
}
.player-wf .wf-fg{clip-path:inset(0 100% 0 0);will-change:clip-path}
/* Sprint "player-opt-sprint1" (24.10.2026):
   JS теперь двигает playhead через transform:translate3d(X px,0,0) вместо
   style.left = X%. translate3d — GPU-only (composite), не триггерит layout.
   Статическая центровка 2px бара теперь через margin-left:-1px вместо
   transform:translateX(-1px), чтобы не блокировать JS-translate.
   will-change:transform — hint браузеру промотировать слой на композитор. */
.player-wf .wf-ph{
  position:absolute;top:6%;bottom:6%;
  width:2px;
  background:#fff;
  box-shadow:0 0 8px #fff;
  left:0;
  margin-left:-1px;
  pointer-events:none;
  z-index:2;
  will-change:transform;
  transform:translate3d(0,0,0);
}

/* ═══════════════════════════════════════════════════════════════════════
 * Loading state — показываем "скелетон спектрограммы" с бегущим шиммером,
 * пока audio-эл-т грузит трек (от тапа на карточку до фактического 'playing'
 * event). Устраняет ощущение залипшего UI на плохом соединении.
 * ═══════════════════════════════════════════════════════════════════════ */
.player-wf.loading::before{
  content:"";
  position:absolute;inset:0;
  z-index:3;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(217, 78, 255, .18) 48%,
    rgba(40, 207, 241, .22) 50%,
    rgba(217, 78, 255, .18) 52%,
    transparent 100%);
  background-size:200% 100%;
  animation:wf-shimmer 1.1s linear infinite;
  pointer-events:none;
  border-radius:inherit;
}
.player-wf.loading .wf-ph{
  animation:wf-ph-sweep 1.1s linear infinite;
  background:#d94eff;
  box-shadow:0 0 10px #d94eff;
}
@keyframes wf-shimmer{
  0%   { background-position:  100% 0 }
  100% { background-position: -100% 0 }
}
/* Sprint opt1: translate3d вместо left для sweep — GPU-only.
   Расчёт по 300vw компенсирует произвольную ширину контейнера:
   при 300vw -> ~3 экрана, визуально sweep пробегает всю полоску. */
@keyframes wf-ph-sweep{
  0%   { transform: translate3d(0, 0, 0)       }
  100% { transform: translate3d(300vw, 0, 0)   }
}
.player-time{
  display:flex;justify-content:space-between;
  font-size:11px;color:var(--muted,#8f83b8);
  font-variant-numeric:tabular-nums;
  letter-spacing:.4px;
  padding:0 2px;
  margin-top:-4px;
}

/* Transport controls */
.player-controls{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:6px;
}
.ctrl-btn{
  width:40px;height:40px;
  border-radius:50%;
  border:1px solid var(--border,#3a2b64);
  background:rgba(15,10,35,.55);
  color:#c9bfe8;
  font-size:15px;
  display:grid;place-items:center;
  cursor:pointer;
  transition:all .16s;
  font-family:inherit;
}
.ctrl-btn:hover:not(:disabled){
  border-color:#b393ff;
  color:#eabaff;
  transform:translateY(-1px);
}
.ctrl-btn:disabled{opacity:.35;cursor:not-allowed}
.ctrl-btn.small{width:32px;height:32px;font-size:13px}
.ctrl-btn.ctrl-play{
  width:54px;height:54px;
  font-size:20px;
  background:linear-gradient(135deg,#8d42bb,#6a2f99);
  border-color:#cf75f3;
  color:#fff;
  box-shadow:0 4px 18px rgba(217,78,255,.35);
}
.ctrl-btn.ctrl-play:hover:not(:disabled){
  box-shadow:0 6px 22px rgba(217,78,255,.55);
  transform:translateY(-2px);
}

/* Toggle states */
.ctrl-btn[aria-pressed="true"],
.ctrl-btn[data-mode="all"],
.ctrl-btn[data-mode="one"]{
  background:rgba(141,66,187,.35);
  border-color:#cf75f3;
  color:#eabaff;
  box-shadow:inset 0 0 8px rgba(217,78,255,.25);
}
.ctrl-btn[data-mode="one"]::after{
  content:'1';
  position:absolute;
  font-size:8px;
  color:#eabaff;
  transform:translate(11px,-9px);
  font-weight:700;
}

.player-volume{
  display:flex;align-items:center;gap:10px;
  margin-top:4px;
  padding-top:12px;
  border-top:1px solid #21173e;
}
.player-volume input[type=range]{
  flex:1;
  height:4px;
  appearance:none;-webkit-appearance:none;
  background:linear-gradient(90deg,#8d42bb var(--vol,60%),#2a2148 var(--vol,60%));
  border-radius:2px;
  outline:none;
}
.player-volume input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:#eabaff;
  cursor:pointer;
  border:2px solid #d94eff;
  box-shadow:0 0 6px rgba(217,78,255,.5);
}
.player-volume input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:#eabaff;cursor:pointer;
  border:2px solid #d94eff;
}

/* ─── SOURCES (right) ───────────────────────────────────────────────── */
.sources-panel{gap:12px;overflow:hidden}

/* Sprint "player-opt-sprint1" (24.10.2026):
   Убран backdrop-filter:blur(14px) — всегда-видимый композитный слой blur
   на iOS Safari ощутимо жрёт батарею (переcompose при любом движении
   над/под ним — playhead, hero-slider, vibe-pulse). Компенсируем альфой
   gradient'а: .88/.95 вместо .45/.55 — визуально разница минимальна. */
.sources-tabs{
  display:flex;gap:3px;
  padding:4px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(30,20,60,.88),rgba(15,10,35,.95));
  border:1px solid #2a2148;
  flex-shrink:0;
}
.src-tab{
  flex:1;
  padding:9px 8px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted,#8f83b8);
  font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;
  font-family:inherit;
  cursor:pointer;
  transition:all .2s;
  position:relative;
}
.src-tab:hover:not(.active){color:#c9bfe8;background:rgba(139,66,187,.08)}
.src-tab.active{
  color:#f0eaff;
  border-color:var(--src-color,#cf75f3);
  background:linear-gradient(135deg,color-mix(in srgb,var(--src-color,#cf75f3) 28%,transparent),color-mix(in srgb,var(--src-color,#cf75f3) 15%,transparent));
  box-shadow:0 0 10px color-mix(in srgb,var(--src-color,#cf75f3) 30%,transparent);
}
/* Per-tab accent colors */
.src-tab[data-source="hot"].active   { --src-color:#ffb84f }
.src-tab[data-source="mixer"].active { --src-color:#ff8ac2 }
.src-tab[data-source="sets"].active  { --src-color:#a074e6 }
.src-tab[data-source="moods"].active { --src-color:#50c8f0 }

/* ─── Sub-selector zone: контейнер для нескольких стек-элементов
       (chips-row + optional mgmt-panel). Горизонтальный скролл — на
       внутренних .sub-chips-row, не здесь. */
.sources-sub{
  display:flex;flex-direction:column;gap:0;
  padding:4px 0 4px;
  border-bottom:1px solid #251b40;
  flex-shrink:0;
  min-height:0;
}
.sources-sub:empty{display:none}

.mix-preset,
.sub-chip{
  padding:5px 11px;
  border-radius:14px;
  border:1px solid var(--border,#3a2b64);
  background:rgba(15,10,35,.5);
  color:#a89bd0;
  font-size:10px;letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .16s;
  font-family:inherit;
  white-space:nowrap;
}
.mix-preset:hover:not(.active),
.sub-chip:hover:not(.active){
  border-color:#7d5eb8;color:#eabaff;
}
.mix-preset.active,
.sub-chip.active{
  background:linear-gradient(135deg,rgba(255,138,194,.4),rgba(200,90,180,.4));
  border-color:#ff8ac2;
  color:#fff;
  box-shadow:0 0 10px rgba(255,138,194,.4);
}

/* Track list */
.sources-list{
  flex:1;min-height:0;
  overflow-y:auto;
  padding:2px 2px 4px;
  scrollbar-width:thin;
}
.sources-list::-webkit-scrollbar{width:6px}
.sources-list::-webkit-scrollbar-thumb{background:#5a4a8a55;border-radius:3px}

.src-card{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:11px;align-items:stretch;
  padding:8px;
  margin-bottom:7px;
  border-radius:12px;
  border:1px solid #21173e;
  background:rgba(15,10,35,.42);
  cursor:pointer;
  transition:all .15s;
}
.src-card:hover{border-color:#7d5eb8;background:rgba(30,20,60,.55)}
.src-card.playing{
  border-color:#cf75f3;
  background:linear-gradient(90deg,rgba(141,66,187,.25),rgba(15,10,35,.55));
  box-shadow:inset 0 0 8px rgba(217,78,255,.15);
}

.src-card-cover{
  width:56px;height:56px;
  border-radius:8px;
  background:linear-gradient(135deg,#1a1237,#0e0925);
  overflow:hidden;
  flex-shrink:0;
}
.src-card-cover img{width:100%;height:100%;object-fit:cover;display:block}

/* Main area: 2 rows — top (title/artist) + bottom (badges + buttons) */
.src-card-main{
  min-width:0;
  display:flex;flex-direction:column;
  justify-content:space-between;
  gap:4px;
}
.src-card-top{
  min-width:0;
  display:flex;flex-direction:column;gap:2px;
}
.src-card-title{
  font-size:13px;color:#f0eaff;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.src-card-artist{
  font-size:11px;color:#a89bd0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.src-card-bottom{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;min-width:0;
}
.src-card-badges{
  display:flex;gap:4px;flex-wrap:nowrap;
  overflow:hidden;min-width:0;
}
.src-card-badges .badge{
  font-size:9px;letter-spacing:.4px;
  padding:2px 7px;border-radius:8px;
  background:rgba(139,66,187,.25);
  color:#c9bfe8;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.src-card-btns{
  display:flex;flex-direction:row;gap:5px;
  flex-shrink:0;
}
.card-btn{
  width:26px;height:26px;
  border-radius:50%;
  background:transparent;
  border:1px solid #3a2b64;
  color:#8f83b8;
  font-size:12px;
  display:grid;place-items:center;
  cursor:pointer;
  transition:all .15s;
  font-family:inherit;
  padding:0;
}
.card-btn:hover{color:#eabaff;border-color:#b393ff}
.card-like:hover{color:#ff8ac2;border-color:#ff5a9e88}
.card-like.active{color:#ff5a9e;border-color:#ff5a9e}

.src-empty{
  padding:40px 20px;
  text-align:center;
  color:var(--muted,#8f83b8);
  font-size:13px;
  line-height:1.5;
}
.src-empty small{
  display:block;
  margin-top:6px;
  opacity:.7;
  font-size:11px;
}

.src-skel{
  padding:10px 12px;margin-bottom:7px;
  border-radius:10px;
  background:rgba(15,10,35,.4);
  animation:srcskel 1.4s ease-in-out infinite;
}
@keyframes srcskel{
  0%,100%{opacity:.6}
  50%{opacity:.9}
}
.src-skel-line{
  height:10px;border-radius:3px;
  background:linear-gradient(90deg,#2a2148,#3a2b64,#2a2148);
  margin-bottom:6px;
}

/* ═══ MOBILE (≤1000px): single column ═══════════════════════════════════ */
@media (max-width: 1000px){
  .player-hub{
    grid-template-columns:1fr;
    gap:14px;
    padding:0 14px;
    margin-top:20px;
  }
  .player-hub .glass{
    min-height:auto;
    padding:14px 14px 16px;
  }
  .player-cover{width:min(260px,70%)}
  .sources-panel{max-height:70vh}
  .sources-list{max-height:400px}
  .src-card{grid-template-columns:48px 1fr;gap:10px;padding:7px}
  .src-card-cover{width:48px;height:48px}
  .src-card-title{font-size:12px}
  .src-card-artist{font-size:10px}
  .ctrl-btn{width:38px;height:38px}
  .ctrl-btn.ctrl-play{width:50px;height:50px}
}

/* ═══ Sub-selector: Sets chips + management panel ═══════════════════════ */
.sub-chip{
  display:inline-flex;align-items:center;gap:6px;
  flex-shrink:0;
}
.sub-chip .chip-name{max-width:110px;overflow:hidden;text-overflow:ellipsis}
.sub-chip .chip-meta{
  font-size:9px;
  padding:1px 5px;border-radius:8px;
  background:rgba(255,255,255,.08);
  opacity:.75;
  font-variant-numeric:tabular-nums;
}
.sub-chip.active .chip-meta{background:rgba(255,255,255,.14);opacity:1}

.sub-chip.play-all-chip{
  background:linear-gradient(120deg,rgba(160,116,230,.35),rgba(106,47,153,.4));
  border-color:#a074e6;
  color:#f0eaff;
  letter-spacing:1.5px;
  font-weight:500;
}
.sub-chip.play-all-chip:hover{
  border-color:#c095ff;
  box-shadow:0 0 10px rgba(160,116,230,.35);
}
.sub-chip.play-all-chip.active{
  background:linear-gradient(120deg,rgba(160,116,230,.6),rgba(106,47,153,.7));
  box-shadow:0 0 12px rgba(160,116,230,.6);
}

/* ═══ Mood tiles ════════════════════════════════════════════════════════ */
.mood-tile{
  flex-shrink:0;
  min-width:140px;max-width:180px;
  padding:8px 12px 9px;
  border-radius:12px;
  border:1.5px solid #5a4a8a55;
  background:linear-gradient(140deg,rgba(20,15,45,.65),rgba(10,8,30,.75));
  color:#f0eaff;
  font-family:inherit;
  cursor:pointer;
  transition:transform .18s,border-color .18s,box-shadow .22s;
  display:flex;flex-direction:column;gap:4px;
  text-align:left;
  position:relative;
  overflow:hidden;
}
.mood-tile::before{
  content:'';
  position:absolute;top:0;right:0;bottom:0;
  width:70%;
  background:radial-gradient(ellipse at top right,var(--tile-glow,rgba(124,92,191,.14)) 0%,transparent 65%);
  pointer-events:none;opacity:.85;
}
.mood-tile:hover:not(.active){
  transform:translateY(-1px);
  border-color:var(--tile-border,rgba(160,120,230,.7));
  box-shadow:0 4px 14px var(--tile-glow,rgba(124,92,191,.25));
}
.mood-tile.active{
  border-color:var(--tile-border,#cf75f3);
  box-shadow:0 0 14px var(--tile-glow,rgba(217,78,255,.45)),
             inset 0 0 10px var(--tile-glow-inset,rgba(217,78,255,.15));
}
.mood-tile-head{
  display:flex;align-items:center;gap:7px;
  position:relative;z-index:1;
}
.mood-tile-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 5px currentColor;
}
.mood-tile-name{
  font-size:12px;font-weight:500;color:#f0eaff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mood-tile-meta{
  display:flex;gap:8px;
  font-size:9px;color:#c9bfe8;
  padding-left:15px;padding-top:1px;
  font-variant-numeric:tabular-nums;
  position:relative;z-index:1;
}

/* Color schemes для 7 color_tag */
.mood-tile.color-purple    { --tile-border:rgba(160,120,230,.7);--tile-glow:rgba(124,92,191,.35);--tile-glow-inset:rgba(160,120,230,.2) }
.mood-tile.color-purple    .mood-tile-dot{color:#a074e6;background:#a074e6}
.mood-tile.color-red       { --tile-border:rgba(230,90,110,.75);--tile-glow:rgba(200,60,80,.4);--tile-glow-inset:rgba(230,90,110,.2) }
.mood-tile.color-red       .mood-tile-dot{color:#e65a70;background:#e65a70}
.mood-tile.color-blue      { --tile-border:rgba(80,140,230,.75);--tile-glow:rgba(60,120,220,.4);--tile-glow-inset:rgba(90,150,240,.2) }
.mood-tile.color-blue      .mood-tile-dot{color:#5090e8;background:#5090e8}
.mood-tile.color-orange    { --tile-border:rgba(240,150,60,.75);--tile-glow:rgba(220,130,40,.4);--tile-glow-inset:rgba(240,160,70,.2) }
.mood-tile.color-orange    .mood-tile-dot{color:#f09640;background:#f09640}
.mood-tile.color-light_blue{ --tile-border:rgba(80,200,240,.75);--tile-glow:rgba(60,180,220,.4);--tile-glow-inset:rgba(90,210,255,.2) }
.mood-tile.color-light_blue.mood-tile-dot,
.mood-tile.color-light_blue .mood-tile-dot{color:#50c8f0;background:#50c8f0}
.mood-tile.color-green     { --tile-border:rgba(80,200,120,.75);--tile-glow:rgba(60,180,100,.4);--tile-glow-inset:rgba(90,210,130,.2) }
.mood-tile.color-green     .mood-tile-dot{color:#50c878;background:#50c878}
.mood-tile.color-black     { --tile-border:rgba(200,200,200,.55);--tile-glow:rgba(160,160,180,.25);--tile-glow-inset:rgba(200,200,220,.15) }
.mood-tile.color-black     .mood-tile-dot{color:#c0c0c8;background:#c0c0c8}

/* ═══ INFO Modal (portированные стили dj.css) ══════════════════════════ */
dialog#info-modal{
  border:1px solid #3a2b64;
  border-radius:18px;
  background:linear-gradient(140deg,#12112de6,#080820ec);
  color:var(--text,#f0eaff);
  padding:28px 26px 22px;
  min-width:520px;max-width:640px;
  width:min(640px,92vw);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
dialog#info-modal::backdrop{background:rgba(3,2,15,.72);backdrop-filter:blur(3px)}
dialog#info-modal .close.icon{
  position:absolute;top:12px;right:12px;
  width:28px;height:28px;
  border-radius:50%;
  background:transparent;border:1px solid #3a2b64;
  color:#a89bd0;font-size:16px;
  display:grid;place-items:center;cursor:pointer;
  transition:color .15s,border-color .15s;
}
dialog#info-modal .close.icon:hover{color:#eabaff;border-color:#b393ff}
dialog#info-modal .eyebrow{display:block;margin-bottom:6px;font-size:11px;letter-spacing:2px;color:#a89bd0;text-transform:uppercase}
dialog#info-modal h2{margin:4px 0 14px;font-size:20px;color:#f0eaff}

.info-head{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.info-cover{
  width:96px;height:96px;
  border-radius:12px;overflow:hidden;
  background:#291064;flex-shrink:0;
  border:1px solid #291a4b;
  box-shadow:0 4px 18px rgba(0,0,0,.3);
}
.info-cover img{width:100%;height:100%;object-fit:cover;display:block}
.info-titles{flex:1;min-width:0}
.info-titles h2{margin:0 0 4px;font-size:18px;line-height:1.3;color:#f0eaff}
.info-artist{
  font-size:14px;color:#eabaff;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.info-album{
  font-size:12px;color:#a89bd0;margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.info-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:8px;margin-bottom:16px;
}
.info-cell{
  display:flex;flex-direction:column;gap:3px;
  padding:9px 10px;
  border:1px solid #251b40;border-radius:10px;
  background:rgba(10,8,30,.55);
}
.info-cell-label{
  font-size:9px;color:#a89bd0;
  letter-spacing:1.2px;text-transform:uppercase;
}
.info-cell-value{
  font-size:14px;color:#e5d7ff;font-weight:500;
  font-variant-numeric:tabular-nums;
}
.info-cell.accent{
  border-color:#5f3f8f;
  background:linear-gradient(135deg,#3a1e5e60,#25153a70);
}
.info-cell.accent .info-cell-value{color:#eabaff}

.info-wf{
  height:60px;border-radius:10px;
  background:rgba(10,8,30,.55);
  border:1px solid #21173e;overflow:hidden;
  margin-bottom:18px;
}
.info-wf canvas{width:100%;height:100%;display:block}

.info-actions{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.info-actions .info-load{min-width:180px;justify-content:center}

@media(max-width:640px){
  dialog#info-modal{min-width:0;width:96vw;padding:24px 18px}
  .info-grid{grid-template-columns:repeat(2,1fr)}
  .info-cover{width:76px;height:76px}
}

/* ═══ PUBLIC tab accent ═════════════════════════════════════════════════ */
.src-tab[data-source="public"].active { --src-color:#7dc8ff }

/* ═══ Sub-chip flags (public / subscribed) ═════════════════════════════ */
.sub-chip .chip-flag{
  font-size:10px;color:#a074e6;margin-right:2px;
  opacity:.9;font-weight:700;
}
.sub-chip .chip-flag.sub{color:#7dc8ff}

/* Chip row scroll container (extracted from sources-sub for management panel) */
.sub-chips-row{
  display:flex;gap:5px;
  overflow-x:auto;overflow-y:hidden;
  padding:2px 2px 8px;
  scrollbar-width:thin;scrollbar-color:#5a4a8a55 transparent;
  scroll-behavior:smooth;
}
.sub-chips-row::-webkit-scrollbar{height:4px}
.sub-chips-row::-webkit-scrollbar-thumb{background:#5a4a8a55;border-radius:2px}

/* ═══ Set management panel ═════════════════════════════════════════════ */
.set-mgmt-panel{
  display:flex;gap:5px;
  padding:6px 2px 8px;
  border-top:1px solid #21173e;
  margin-top:2px;
  overflow-x:auto;overflow-y:hidden;
  flex-wrap:nowrap;
  scrollbar-width:thin;scrollbar-color:#5a4a8a55 transparent;
}
.set-mgmt-panel::-webkit-scrollbar{height:3px}
.set-mgmt-panel::-webkit-scrollbar-thumb{background:#5a4a8a55;border-radius:2px}
.mgmt-btn{
  flex:1 0 auto;
  min-width:0;
  padding:6px 8px;
  border-radius:9px;
  border:1px solid #3a2b64;
  background:rgba(15,10,35,.55);
  color:#c9bfe8;
  font-size:10px;letter-spacing:.6px;
  font-family:inherit;
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
  text-align:center;
}
.mgmt-btn:hover:not(:disabled){
  border-color:#b393ff;color:#eabaff;
  background:rgba(30,20,60,.7);
}
.mgmt-btn:disabled{opacity:.4;cursor:not-allowed}
.mgmt-btn.primary{
  background:linear-gradient(135deg,rgba(141,66,187,.5),rgba(106,47,153,.55));
  border-color:#cf75f3;color:#f0eaff;
}
.mgmt-btn.primary:hover{
  background:linear-gradient(135deg,rgba(141,66,187,.7),rgba(106,47,153,.75));
}
.mgmt-btn.accent{
  background:linear-gradient(135deg,rgba(80,200,240,.25),rgba(60,150,200,.3));
  border-color:#7dc8ff;color:#d3ebff;
}
.mgmt-btn.accent:hover{
  background:linear-gradient(135deg,rgba(80,200,240,.4),rgba(60,150,200,.45));
}

/* ═══ Set management modal (общие стили) ═══════════════════════════════ */
dialog#set-modal{
  border:1px solid #3a2b64;
  border-radius:18px;
  background:linear-gradient(140deg,#12112de6,#080820ec);
  color:#f0eaff;
  padding:28px 26px 22px;
  min-width:420px;max-width:520px;
  width:min(520px,92vw);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
dialog#set-modal::backdrop{background:rgba(3,2,15,.72);backdrop-filter:blur(3px)}
dialog#set-modal .close.icon{
  position:absolute;top:12px;right:12px;
  width:28px;height:28px;
  border-radius:50%;
  background:transparent;border:1px solid #3a2b64;
  color:#a89bd0;font-size:16px;
  display:grid;place-items:center;cursor:pointer;
  transition:color .15s,border-color .15s;
}
dialog#set-modal .close.icon:hover{color:#eabaff;border-color:#b393ff}
dialog#set-modal .eyebrow{
  display:block;margin-bottom:6px;
  font-size:11px;letter-spacing:2px;color:#a89bd0;text-transform:uppercase;
}
dialog#set-modal h2{
  margin:4px 0 12px;font-size:19px;color:#f0eaff;line-height:1.35;
}
dialog#set-modal .modal-copy{
  color:#c9bfe8;font-size:13px;line-height:1.55;
  margin:0 0 20px;
}
dialog#set-modal .modal-copy strong{color:#eabaff}
dialog#set-modal .modal-label{
  display:block;margin:6px 0 5px;
  font-size:10px;letter-spacing:1.4px;color:#a89bd0;text-transform:uppercase;
}
dialog#set-modal .modal-input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #3a2b64;
  background:rgba(10,8,30,.6);
  color:#f0eaff;
  font-family:inherit;font-size:14px;
  margin-bottom:18px;
  transition:border-color .15s,box-shadow .15s;
}
dialog#set-modal .modal-input:focus{
  outline:none;
  border-color:#b393ff;
  box-shadow:0 0 0 3px rgba(179,147,255,.15);
}
dialog#set-modal .modal-actions{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:10px;
}
dialog#set-modal .modal-actions.single{justify-content:flex-end}
dialog#set-modal .primary.danger{
  background:linear-gradient(135deg,#c33455,#8b1e3a);
  border-color:#ff5a7c;
  box-shadow:0 4px 18px rgba(200,50,90,.35);
}
dialog#set-modal .primary.danger:hover{
  box-shadow:0 6px 22px rgba(200,50,90,.55);
}

/* Get Link box */
dialog#set-modal .link-box{
  display:flex;gap:6px;margin:12px 0 18px;align-items:stretch;
}
dialog#set-modal .link-input{
  flex:1;margin:0;
  font-family:'Menlo','Consolas',monospace;
  font-size:12px;
  color:#eabaff;
  cursor:text;
}
dialog#set-modal .link-copy{
  padding:0 18px;
  min-width:80px;
  border-radius:10px;
  font-size:13px;
  flex-shrink:0;
}

/* ═══ Set cover modal — превью 3:2 ════════════════════════════════════════ */
dialog#set-modal .set-cover-preview{
  width:100%;
  aspect-ratio:3 / 2;
  margin:14px 0 18px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(179,147,255,.25);
  background:linear-gradient(135deg,#1a1540 0%,#2a1a5a 100%);
  display:grid;place-items:center;
  box-shadow:inset 0 0 24px rgba(90,60,180,.18);
}
dialog#set-modal .set-cover-preview img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}
dialog#set-modal .set-cover-preview.empty{
  background:
    repeating-linear-gradient(45deg,
      rgba(80,60,140,.12) 0 10px,
      rgba(40,30,80,.08) 10px 20px);
}
dialog#set-modal .set-cover-empty{
  color:#8f83b8;
  font-size:12px;letter-spacing:.5px;
  text-transform:uppercase;
}

@media(max-width:520px){
  dialog#set-modal{min-width:0;width:96vw;padding:24px 18px}
  dialog#set-modal .set-cover-preview{margin:10px 0 14px;border-radius:10px}
}

/* ═══ PUBLIC placeholder ═══════════════════════════════════════════════ */
.public-placeholder{
  padding:30px 22px;
  text-align:center;
  color:#c9bfe8;
}
.public-title{
  font-size:16px;font-weight:600;color:#eabaff;
  margin-bottom:14px;letter-spacing:.3px;
}
.public-placeholder p{
  font-size:13px;line-height:1.55;
  margin:0 0 10px;
  color:#a89bd0;
}
.public-placeholder p strong{color:#7dc8ff}
.public-counter{
  margin-top:22px;
  padding:18px 20px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(80,200,240,.15),rgba(60,150,200,.2));
  border:1px solid rgba(125,200,255,.35);
  display:flex;flex-direction:column;gap:4px;align-items:center;
}
.counter-label{
  font-size:10px;letter-spacing:1.5px;color:#a89bd0;
  text-transform:uppercase;
}
.counter-value{
  font-size:32px;font-weight:600;color:#7dc8ff;
  font-variant-numeric:tabular-nums;
}

/* ═══ Subscribe modal (public set preview) ═════════════════════════════ */
dialog#subscribe-modal{
  border:1px solid #3a2b64;
  border-radius:18px;
  background:linear-gradient(140deg,#12112de6,#080820ec);
  color:#f0eaff;
  padding:28px 26px 22px;
  min-width:480px;max-width:600px;
  width:min(600px,94vw);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
dialog#subscribe-modal::backdrop{background:rgba(3,2,15,.72);backdrop-filter:blur(3px)}
dialog#subscribe-modal .close.icon{
  position:absolute;top:12px;right:12px;
  width:28px;height:28px;
  border-radius:50%;
  background:transparent;border:1px solid #3a2b64;
  color:#a89bd0;font-size:16px;
  display:grid;place-items:center;cursor:pointer;
  transition:color .15s,border-color .15s;
}
dialog#subscribe-modal .close.icon:hover{color:#eabaff;border-color:#b393ff}
dialog#subscribe-modal .eyebrow{
  display:block;margin-bottom:6px;
  font-size:11px;letter-spacing:2px;color:#a89bd0;text-transform:uppercase;
}

.preview-title{
  margin:4px 0 12px;
  font-size:22px;font-weight:600;color:#f0eaff;
  line-height:1.25;
}
.preview-meta{
  display:flex;gap:8px;flex-wrap:wrap;
  margin-bottom:16px;
}
.preview-badge{
  padding:5px 12px;
  border-radius:14px;
  background:rgba(139,66,187,.25);
  border:1px solid rgba(179,147,255,.35);
  color:#c9bfe8;
  font-size:11px;letter-spacing:.4px;
}
.preview-badge b{
  color:#eabaff;font-weight:600;
  font-variant-numeric:tabular-nums;
}

.preview-tracks{
  border:1px solid #21173e;
  border-radius:12px;
  padding:6px 4px;
  max-height:280px;overflow-y:auto;
  background:rgba(10,8,30,.35);
  scrollbar-width:thin;scrollbar-color:#5a4a8a55 transparent;
}
.preview-tracks::-webkit-scrollbar{width:5px}
.preview-tracks::-webkit-scrollbar-thumb{background:#5a4a8a55;border-radius:2px}

.preview-track{
  display:grid;grid-template-columns:24px 1fr auto;
  gap:10px;align-items:center;
  padding:6px 10px;
  border-radius:8px;
  transition:background .12s;
}
.preview-track:hover{background:rgba(139,66,187,.1)}
.preview-track-num{
  text-align:center;
  font-size:11px;color:#7d5eb8;
  font-variant-numeric:tabular-nums;
}
.preview-track-info{min-width:0}
.preview-track-title{
  font-size:13px;color:#eae3ff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.preview-track-artist{
  font-size:11px;color:#a89bd0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.preview-track-bpm{
  font-size:10px;color:#c9bfe8;
  padding:2px 7px;
  background:rgba(139,66,187,.2);
  border-radius:8px;
  font-variant-numeric:tabular-nums;
}
.preview-more{
  text-align:center;
  padding:8px;
  font-size:11px;color:#8f83b8;
  font-style:italic;
}

dialog#subscribe-modal .modal-copy{
  color:#c9bfe8;font-size:13px;line-height:1.55;margin:0;
}
dialog#subscribe-modal .modal-copy code{
  font-family:'Menlo','Consolas',monospace;
  background:rgba(10,8,30,.6);
  padding:2px 6px;border-radius:5px;
  color:#eabaff;font-size:12px;
}
dialog#subscribe-modal .modal-actions{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:20px;
}
dialog#subscribe-modal .modal-actions.single{justify-content:flex-end}

@media(max-width:600px){
  dialog#subscribe-modal{min-width:0;width:96vw;padding:24px 18px}
  .preview-title{font-size:19px}
  .preview-tracks{max-height:220px}
}

/* ═════════════════════════════════════════════════════════════════════════
   AUX INPUT button + mobile bottom-sheet infrastructure (desktop hidden)
   ═════════════════════════════════════════════════════════════════════════ */

/* By default (desktop) все mobile-only элементы скрыты */
.aux-input-btn,
.mobile-sheet-close,
.mobile-sheet-handle,
.sheet-backdrop,
.hero-slider{display:none}

/* ═════════════════════════════════════════════════════════════════════════
   Mobile layout (≤ 900px)
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ─── Home container: scroll-snap between hero and player ─── */
  main.home{
    height:100dvh;
    overflow-y:scroll;
    overflow-x:hidden;
    scroll-snap-type:y mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    padding:0;
    display:block;
  }

  /* Hero — snap-начало. Две вертикальные зоны:
       ~35vh слайдер сверху, остальное — текст + CTA + features. */
  .hero-copy{
    scroll-snap-align:start;
    scroll-snap-stop:always;
    min-height:100dvh;
    height:100dvh;
    max-width:none;
    width:100%;
    padding:0;
    display:flex;flex-direction:column;
    position:relative;
    z-index:2;
    background:transparent;
    overflow:hidden;
  }
  /* Оригинальный .dj-scene (position:absolute, 1536×1024, z-index:-1) на мобиле
     не нужен — вместо него слайдер сверху hero. */
  .dj-scene{display:none !important}

  /* Верхняя зона: слайдер диджея, 3 картинки crossfade */
  .hero-slider{
    display:block;
    position:relative;
    width:100%;
    height:38dvh;
    flex-shrink:0;
    overflow:hidden;
    background:#0e0925;
    border-bottom:1px solid rgba(139,66,187,.25);
  }
  .hero-slider .slide{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    object-position:center 20%;
    opacity:0;
    transition:opacity 1200ms ease-in-out;
    will-change:opacity;
  }
  .hero-slider .slide.active{opacity:1}
  /* Плавный тёмный fade к тексту снизу */
  .hero-slider::after{
    content:"";
    position:absolute;left:0;right:0;bottom:0;
    height:60px;
    background:linear-gradient(180deg,transparent,#080820);
    pointer-events:none;
  }

  /* Нижняя зона — текст, CTA, features */
  .hero-copy > .eyebrow,
  .hero-copy > h1,
  .hero-copy > .intro,
  .hero-copy > .short-line,
  .hero-copy > .features,
  .hero-copy > .hero-actions{
    padding-left:22px;padding-right:22px;
  }
  .hero-copy .eyebrow{
    margin:16px 0 8px;font-size:11px;letter-spacing:2px;
  }
  .hero-copy h1{
    font-size:28px;line-height:1.1;margin:0 0 10px;
  }
  .hero-copy .intro{
    font-size:13px;line-height:1.45;margin:0 0 10px;
  }
  .hero-copy .short-line{
    width:auto !important;
    height:auto !important;
    background:none !important;
    margin:10px 0 6px !important;
    padding:0 22px !important;
    font-size:10px !important;
    letter-spacing:2px !important;
    color:#7dc8ff !important;
    text-transform:uppercase !important;
    font-weight:600 !important;
    text-align:left !important;
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }
  .hero-copy .short-line::after{
    content:"" !important;
    flex:1 !important;
    height:1px !important;
    background:linear-gradient(90deg,rgba(125,200,255,.4),transparent) !important;
  }
  .hero-copy .features{
    display:flex;flex-direction:column;gap:6px;
    margin:6px 0 12px;
  }
  .hero-copy .features > div{
    display:flex;align-items:center;gap:10px;
    border:none;padding:0;
  }
  .hero-copy .features span{font-size:18px;flex-shrink:0;width:22px;text-align:center}
  .hero-copy .features p{font-size:11px;line-height:1.3;margin:0}
  .hero-copy .hero-actions{
    display:flex;gap:12px;align-items:center;
    margin:0;
    padding:0 22px;
  }
  .hero-copy .hero-actions .primary{
    padding:11px 20px;font-size:13px;flex:1;
    justify-content:center;
  }
  .hero-copy .hero-actions .round{
    width:42px;height:42px;
    display:grid;place-items:center;
    border-radius:50%;
    border:1px solid rgba(179,147,255,.4);
    color:#eabaff;font-size:20px;
    text-decoration:none;
    flex-shrink:0;
    animation:bounce-hint 2s ease-in-out infinite;
  }
  @keyframes bounce-hint{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(4px)}
  }

  /* Player hub — второй snap-экран */
  .player-hub{
    scroll-snap-align:start;
    scroll-snap-stop:always;
    min-height:100dvh;
    height:100dvh;
    display:block;
    padding:70px 12px 20px;
    position:relative;
    grid-template-columns:none;
    gap:0;
  }

  /* Player panel во всю высоту экрана */
  .player-panel{
    height:calc(100dvh - 90px);
    max-height:calc(100dvh - 90px);
    padding:16px 18px 14px;
    display:flex;flex-direction:column;
    overflow:hidden;
  }

  .player-cover{
    width:min(240px,55vw);
    aspect-ratio:1;
    margin:8px auto 12px;
  }
  .player-title{font-size:16px}
  .player-artist{font-size:12px}
  .player-wf{margin:8px 0 4px}
  .player-controls{gap:12px;margin:8px 0}
  .ctrl-btn{width:40px;height:40px;font-size:15px}
  .ctrl-btn.ctrl-play{width:52px;height:52px;font-size:19px}

  /* ─── AUX INPUT button — большая пилюля снизу плеера ─── */
  /* Sprint "player-opt-sprint1" (24.10.2026):
     Animation перенесён на ::after overlay (opacity, GPU) — вместо того
     чтобы animate'ить box-shadow прямо на кнопке (paint каждый кадр). */
  .aux-input-btn{
    position:relative;
    display:flex;align-items:center;gap:12px;
    width:100%;
    margin-top:auto;
    padding:14px 18px;
    border-radius:14px;
    border:1px solid rgba(179,147,255,.5);
    background:linear-gradient(120deg,rgba(141,66,187,.35),rgba(80,60,150,.4));
    color:#f0eaff;
    font-family:inherit;
    cursor:pointer;
    transition:all .2s;
    box-shadow:0 4px 18px rgba(139,66,187,.25);
  }
  .aux-input-btn::after{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    pointer-events:none;
    box-shadow:0 4px 32px rgba(179,147,255,.55);
    opacity:0;
    animation:aux-glow 3s ease-in-out infinite;
    will-change:opacity;
  }
  .aux-input-btn:active{transform:scale(.98)}
  .aux-input-btn .aux-icon{
    font-size:22px;flex-shrink:0;
    filter:drop-shadow(0 0 6px rgba(179,147,255,.6));
  }
  .aux-input-btn .aux-text{
    flex:1;text-align:left;display:flex;flex-direction:column;gap:2px;
  }
  .aux-input-btn .aux-text b{
    font-size:14px;letter-spacing:1.5px;font-weight:600;color:#f0eaff;
  }
  .aux-input-btn .aux-text small{
    font-size:11px;color:#c9bfe8;letter-spacing:.3px;
  }
  .aux-input-btn .aux-arrow{
    font-size:16px;color:#eabaff;flex-shrink:0;
    transition:transform .3s;
  }
  /* Sprint "player-opt-sprint1" (24.10.2026):
     Переписали с animate'нутого box-shadow (paint) на opacity статичного
     ::after overlay'я — compositor-only, батарея-френдли. Визуально та же
     пульсация-glow, но стоит в разы дешевле. */
  @keyframes aux-glow{
    0%,100%{ opacity: .35 }
    50%    { opacity:  1  }
  }

  /* ─── Sources panel = FULL-SCREEN sheet ───────────────────────────────
     100dvh на моб: юзер исследует длинный список треков, не хотим
     терять ~10% экрана на старую «пилюлю». safe-area-inset-* защищают
     от overlay под home-indicator (iOS) и gesture-bar (Android).
     Скругление сверху убрано — на full-screen sheet'е оно смотрелось
     бы как «кнопка», плюс при вытянутом вверх контенте уголки
     подрезали бы верхнюю строку текста. */
  .sources-panel{
    position:fixed;
    left:0;right:0;bottom:0;top:auto;
    z-index:200;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
    padding:
      calc(10px + env(safe-area-inset-top))
      12px
      calc(10px + env(safe-area-inset-bottom))
      12px;
    transform:translateY(100%);
    transition:transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow:0 -12px 40px rgba(0,0,0,.5);
    display:flex;flex-direction:column;
  }
  .sources-panel.mobile-open{
    transform:translateY(0);
  }

  .mobile-sheet-handle{
    display:block;
    width:40px;height:4px;
    margin:0 auto 8px;
    border-radius:2px;
    background:rgba(179,147,255,.35);
    flex-shrink:0;
  }

  .mobile-sheet-close{
    display:grid;place-items:center;
    position:absolute;
    top:calc(10px + env(safe-area-inset-top));
    right:14px;
    width:34px;height:34px;
    border-radius:50%;
    background:rgba(15,10,35,.7);
    border:1px solid #3a2b64;
    color:#eabaff;
    font-size:18px;line-height:1;
    cursor:pointer;
    z-index:2;
  }
  .mobile-sheet-close:active{background:rgba(30,20,60,.8)}

  /* Backdrop under sheet */
  .sheet-backdrop{
    display:block;
    position:fixed;inset:0;
    background:rgba(3,2,15,.65);
    backdrop-filter:blur(3px);
    z-index:150;
    opacity:0;pointer-events:none;
    transition:opacity 260ms;
  }
  .sheet-backdrop.active{
    opacity:1;pointer-events:auto;
  }

  /* Lock body scroll when sheet open */
  body.sheet-open{overflow:hidden}

  /* Sources tabs — компактнее на мобиле */
  .sources-tabs{padding:2px 4px;gap:2px}
  .src-tab{padding:8px 6px;font-size:11px;letter-spacing:.6px}

  /* Sources list — max height доступна теперь ~70vh */
  .sources-list{
    max-height:none;
    flex:1;
    min-height:0;
  }

  /* Ambient bg скрыт на мобиле — dj-scene важнее */
  .ambient{display:none}
}

/* ═════════════════════════════════════════════════════════════════════════
   Small mobile (≤ 480px) — ещё компактнее
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero-slider{height:34dvh}
  .hero-copy > .eyebrow,
  .hero-copy > h1,
  .hero-copy > .intro,
  .hero-copy > .short-line,
  .hero-copy > .features,
  .hero-copy > .hero-actions{padding-left:18px;padding-right:18px}
  .hero-copy h1{font-size:24px;line-height:1.15}
  .hero-copy .intro{font-size:12px}
  .hero-copy .features p{font-size:10.5px}
  .hero-copy .features span{font-size:16px;width:20px}
  .hero-copy .hero-actions .primary{padding:10px 16px;font-size:12px}
  .hero-copy .hero-actions .round{width:38px;height:38px;font-size:18px}

  .player-hub{padding:60px 8px 12px}
  .player-panel{
    height:calc(100dvh - 76px);
    max-height:calc(100dvh - 76px);
    padding:12px 14px 10px;
  }
  .player-cover{width:min(200px,50vw);margin:4px auto 10px}
  .player-title{font-size:14px}
  .player-artist{font-size:11px}
  .player-controls{gap:8px}
  .ctrl-btn{width:36px;height:36px;font-size:13px}
  .ctrl-btn.ctrl-play{width:46px;height:46px;font-size:17px}
  .player-time{font-size:10px}

  .aux-input-btn{padding:11px 14px;gap:10px}
  .aux-input-btn .aux-icon{font-size:19px}
  .aux-input-btn .aux-text b{font-size:12px;letter-spacing:1.2px}
  .aux-input-btn .aux-text small{font-size:10px}

  .sources-panel{
    /* 100dvh наследуется из @media (max-width:900px). Здесь только
       уменьшаем горизонтальный padding под узкие экраны. */
    padding:
      calc(10px + env(safe-area-inset-top))
      8px
      calc(10px + env(safe-area-inset-bottom))
      8px;
  }
}

/* ═══ Add to Set chip button (top of player) ═══════════════════════════ */
.player-top-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:18px;
  min-height:24px;
}
.player-top-row .player-context{margin-bottom:0}

.player-add-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  border-radius:16px;
  border:1px solid rgba(179,147,255,.4);
  background:rgba(139,66,187,.18);
  color:#eabaff;
  font-size:11px;letter-spacing:.5px;
  font-family:inherit;
  cursor:pointer;
  transition:all .15s;
  flex-shrink:0;
}
.player-add-chip:hover:not(:disabled){
  background:rgba(139,66,187,.35);
  border-color:#cf75f3;
  color:#f0eaff;
}
.player-add-chip:disabled{
  opacity:.35;cursor:not-allowed;
  border-color:#3a2b64;color:#8f83b8;
  background:transparent;
}
.player-add-chip .add-icon{
  font-size:14px;line-height:1;
  color:#cf75f3;
  font-weight:600;
}
.player-add-chip:disabled .add-icon{color:#8f83b8}

@media (max-width: 480px) {
  .player-add-chip{padding:5px 10px;font-size:10px}
  .player-add-chip .add-icon{font-size:12px}
  .player-top-row{margin-bottom:12px}
}

/* ═══ Add to Set list (inside #set-modal) ══════════════════════════════ */
.add-to-set-list{
  max-height:340px;overflow-y:auto;
  margin:6px 0 18px;
  border:1px solid #21173e;
  border-radius:12px;
  padding:4px;
  scrollbar-width:thin;scrollbar-color:#5a4a8a55 transparent;
}
.add-to-set-list::-webkit-scrollbar{width:5px}
.add-to-set-list::-webkit-scrollbar-thumb{background:#5a4a8a55;border-radius:2px}

.add-loading, .add-empty, .add-error{
  padding:28px 14px;text-align:center;
  color:#a89bd0;font-size:13px;line-height:1.5;
}
.add-error{color:#ff8ac2}
.add-empty small{color:#8f83b8;font-size:11px}

.add-set-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;width:100%;
  padding:12px 14px;
  border:none;border-radius:9px;
  background:transparent;
  color:#f0eaff;
  font-family:inherit;text-align:left;
  cursor:pointer;
  transition:background .12s;
}
.add-set-row:hover:not(:disabled){background:rgba(139,66,187,.18)}
.add-set-row:disabled{opacity:.4;cursor:not-allowed}
.add-set-row.adding{background:rgba(179,147,255,.25)}

.add-set-name{
  font-size:14px;color:#f0eaff;font-weight:500;
  display:flex;align-items:center;gap:6px;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.add-set-flag{color:#cf75f3;font-size:11px}
.add-set-count{
  font-size:11px;color:#a89bd0;
  flex-shrink:0;
  padding:3px 9px;
  border-radius:10px;
  background:rgba(139,66,187,.22);
}

/* ═════════════════════════════════════════════════════════════════════════
   Height-based adaptations — гарантия что OPEN PLAYER виден на всех высотах
   ═════════════════════════════════════════════════════════════════════════ */

/* Средние экраны: 560px–700px по высоте (iPhone SE, старые Android).
   Уменьшаем слайдер, поджимаем отступы. */
@media (max-width: 900px) and (max-height: 700px) {
  .hero-slider{height:30dvh}
  .hero-copy .eyebrow{margin:10px 0 5px;font-size:10px}
  .hero-copy h1{font-size:22px;margin-bottom:6px}
  .hero-copy .intro{font-size:12px;margin-bottom:6px}
  .hero-copy .short-line{margin:4px 0}
  .hero-copy .features{gap:4px;margin:4px 0 8px}
  .hero-copy .features p{font-size:10px;line-height:1.25}
  .hero-copy .features span{font-size:15px;width:18px}
  .hero-copy .hero-actions{padding-top:4px;padding-bottom:10px}
}

/* Низкие экраны: ≤ 560px по высоте (landscape mode, очень маленькие устройства).
   Скрываем features полностью — оставляем главное: слайдер, заголовок, CTA. */
@media (max-width: 900px) and (max-height: 560px) {
  .hero-slider{height:26dvh}
  .hero-copy > .features,
  .hero-copy > .short-line{display:none}
  .hero-copy h1{font-size:19px;margin-bottom:4px}
  .hero-copy .intro{font-size:11px;margin-bottom:4px}
  .hero-copy .eyebrow{margin:8px 0 4px}
  .hero-copy .hero-actions{padding-bottom:8px}
}

/* Высокие экраны: ≥ 800px по высоте — можно позволить слайдеру побольше */
@media (max-width: 900px) and (min-height: 800px) {
  .hero-slider{height:42dvh}
  .hero-copy h1{font-size:32px}
  .hero-copy .intro{font-size:14px}
  .hero-copy .features{gap:8px;margin:12px 0}
  .hero-copy .features p{font-size:12px;line-height:1.4}
}

/* ═══ Vibe points (Three feature blocks in hero) ═══════════════════════ */

/* Desktop: hidden — decorative mobile-only feature */
.hero-copy .vibe-points{display:none}

@media (max-width: 900px) {
  .hero-copy .vibe-points{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    margin:12px 0 0 !important;
    padding:0 22px !important;
    width:100% !important;
    box-sizing:border-box !important;
    max-width:100% !important;
  }
  .hero-copy .vibe-points .vibe-card{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    padding:10px 14px !important;
    border-radius:14px !important;
    background:linear-gradient(120deg,
      rgba(139,66,187,.14),
      rgba(60,50,110,.18)) !important;
    border:1px solid rgba(179,147,255,.22) !important;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    transition:transform .2s,border-color .2s;
    width:auto !important;
    box-sizing:border-box !important;
  }
  .hero-copy .vibe-points .vibe-card:active{transform:scale(.98)}
  .hero-copy .vibe-points .vibe-icon{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    flex-shrink:0 !important;
    display:grid !important;
    place-items:center !important;
    border-radius:10px !important;
    background:rgba(10,8,30,.4) !important;
    border:1px solid rgba(179,147,255,.25) !important;
    padding:0 !important;
    overflow:hidden !important;
  }
  .hero-copy .vibe-points .vibe-icon svg{
    width:24px !important;
    height:24px !important;
    max-width:24px !important;
    max-height:24px !important;
    display:block !important;
    flex-shrink:0 !important;
  }
  .hero-copy .vibe-points .vibe-text{
    min-width:0 !important;
    flex:1 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
  }
  .hero-copy .vibe-points .vibe-text b{
    font-size:11.5px !important;
    letter-spacing:1.2px !important;
    font-weight:600 !important;
    color:#f0eaff !important;
    text-transform:uppercase !important;
    line-height:1.2 !important;
    margin:0 !important;
  }
  .hero-copy .vibe-points .vibe-text small{
    font-size:10.5px !important;
    line-height:1.35 !important;
    color:#a89bd0 !important;
    letter-spacing:.2px !important;
  }
}

@media (max-width: 900px) and (max-height: 700px) {
  .hero-copy .vibe-points{gap:6px !important;margin-top:8px !important}
  .hero-copy .vibe-points .vibe-card{padding:8px 12px !important;gap:10px !important}
  .hero-copy .vibe-points .vibe-icon{
    width:32px !important;height:32px !important;
    min-width:32px !important;max-width:32px !important;
  }
  .hero-copy .vibe-points .vibe-icon svg{
    width:20px !important;height:20px !important;
    max-width:20px !important;max-height:20px !important;
  }
  .hero-copy .vibe-points .vibe-text b{font-size:10.5px !important}
  .hero-copy .vibe-points .vibe-text small{font-size:9.5px !important}
}

@media (max-width: 900px) and (max-height: 560px) {
  .hero-copy .vibe-points{display:none !important}
}

/* ═════════════════════════════════════════════════════════════════════════
   MOBILE PLAYER — Neon Club Vibe (глассморфизм, футура)
   Ориентир: online-dj.html
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* Base panel: тёмный glass с фиолетово-неоновым свечением */
  .player-panel{
    height:auto !important;
    max-height:calc(100dvh - 76px) !important;
    padding:16px 18px 14px !important;
    display:flex;flex-direction:column;
    gap:12px;
    background:
      radial-gradient(ellipse at 50% -20%, rgba(217,78,255,.18), transparent 60%),
      linear-gradient(160deg, rgba(30,15,60,.65), rgba(10,8,30,.75)) !important;
    border:1px solid rgba(179,147,255,.28) !important;
    box-shadow:
      inset 0 0 60px rgba(179,147,255,.08),
      inset 0 1px 0 rgba(255,255,255,.06),
      0 20px 60px rgba(0,0,0,.5),
      0 0 40px rgba(139,66,187,.15) !important;
    border-radius:24px !important;
    position:relative;
    overflow:hidden;
  }

  /* Neon top border-glow */
  .player-panel::before{
    content:"";
    position:absolute;top:0;left:15%;right:15%;
    height:1px;
    background:linear-gradient(90deg,transparent,#cf75f3,transparent);
    box-shadow:0 0 12px #cf75f3;
    pointer-events:none;
  }

  /* ─── Context (centered, oval capsule) ─── */
  .player-panel .player-context{
    align-self:center;
    display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:8px 20px;
    border-radius:22px;
    background:rgba(10,8,30,.55);
    border:1px solid rgba(179,147,255,.35);
    min-width:60%;
    max-width:90%;
    text-align:center;
    box-shadow:inset 0 0 12px rgba(179,147,255,.08);
  }
  .player-panel .context-line{
    font-size:11px;letter-spacing:1.5px;
    color:#f0eaff;font-weight:600;text-transform:uppercase;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:100%;
  }
  .player-panel .context-author{
    font-size:9.5px;letter-spacing:1.4px;
    color:#a89bd0;
    text-transform:uppercase;
  }
  .player-panel .context-author[hidden]{display:none !important}

  /* ─── Cover — large square, neon glow ─── */
  .player-panel .player-cover{
    width:min(240px,58vw);
    aspect-ratio:1;
    margin:2px auto 0;
    border-radius:16px;
    overflow:hidden;
    position:relative;
    border:1px solid rgba(179,147,255,.4);
    box-shadow:
      0 8px 30px rgba(0,0,0,.5),
      0 0 40px rgba(139,66,187,.25),
      inset 0 0 20px rgba(217,78,255,.1);
    cursor:pointer;
  }
  .player-panel .player-cover img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .player-panel .cover-overlay{
    position:absolute;inset:0;
    display:grid;place-items:center;
    background:radial-gradient(ellipse at center, rgba(217,78,255,.25), transparent 60%);
    opacity:0;transition:opacity .2s;
  }
  .player-panel .player-cover:hover .cover-overlay,
  .player-panel .player-cover:active .cover-overlay{opacity:1}
  .player-panel .cover-play-icon{
    color:#eabaff;
    filter:drop-shadow(0 0 10px rgba(217,78,255,.9));
  }

  /* ─── Meta (title + artist) — under cover ─── */
  .player-panel .player-meta{
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    padding:8px 12px;
    border-radius:12px;
    background:rgba(10,8,30,.45);
    border:1px solid rgba(179,147,255,.2);
  }
  .player-panel .player-title{
    font-size:14px;color:#f0eaff;font-weight:600;
    letter-spacing:.3px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    width:100%;
    text-transform:uppercase;
  }
  .player-panel .player-artist{
    font-size:11px;color:#a89bd0;
    letter-spacing:.4px;text-transform:uppercase;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    width:100%;
  }

  /* ─── Actions row: DISLIKE / LIKE / ADD TO SET / SHARE ─── */
  .player-panel .player-actions{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:5px;
  }
  .player-panel .pact{
    display:flex;align-items:center;justify-content:center;gap:6px;
    padding:9px 6px;
    border-radius:22px;
    border:1px solid rgba(179,147,255,.35);
    background:rgba(15,10,35,.6);
    color:#c9bfe8;
    font-family:inherit;
    font-size:10.5px;letter-spacing:1px;font-weight:500;
    cursor:pointer;
    transition:all .18s;
    text-transform:uppercase;
    min-width:0;
  }
  .player-panel .pact:hover:not(:disabled),
  .player-panel .pact:active:not(:disabled){
    border-color:#cf75f3;color:#f0eaff;
    background:rgba(30,20,60,.7);
    box-shadow:0 0 14px rgba(217,78,255,.25);
  }
  .player-panel .pact:disabled{opacity:.35;cursor:not-allowed}
  .player-panel .pact .pact-icon{
    display:grid;place-items:center;
    color:#cf75f3;
    flex-shrink:0;
  }
  .player-panel .pact .pact-icon svg{display:block}

  /* Active states */
  .player-panel .pact-like[aria-pressed="true"]{
    border-color:#ff5a9e;color:#ff5a9e;
    background:rgba(80,15,45,.5);
    box-shadow:0 0 16px rgba(255,90,158,.35);
  }
  .player-panel .pact-like[aria-pressed="true"] .pact-icon{color:#ff5a9e}
  .player-panel .pact-like[aria-pressed="true"] .heart-path{fill:currentColor}

  .player-panel .pact-dislike[aria-pressed="true"]{
    border-color:#7dc8ff;color:#7dc8ff;
    background:rgba(15,45,80,.5);
    box-shadow:0 0 14px rgba(125,200,255,.3);
  }
  .player-panel .pact-dislike[aria-pressed="true"] .pact-icon{color:#7dc8ff}

  /* Share — акцент бирюзово-ментоловый, отличается от add (магента) и like (роз). */
  .player-panel .pact-share .pact-icon{color:#5ee8c6}
  .player-panel .pact-share:not(:disabled):hover,
  .player-panel .pact-share:not(:disabled):active{
    border-color:#5ee8c6;color:#e9fff7;
    background:rgba(15,55,45,.55);
    box-shadow:0 0 14px rgba(94,232,198,.3);
  }
  /* Momentary "just-shared" visual акк — класс ставится из JS на 900мс после копи/share */
  .player-panel .pact-share.just-shared{
    border-color:#5ee8c6;color:#5ee8c6;
    background:rgba(15,55,45,.55);
    box-shadow:0 0 18px rgba(94,232,198,.5);
  }

  /* ─── Waveform strip (уменьшенная высота на моб) ─── */
  .player-panel .player-wf{
    height:44px;
    margin:2px 0 0;
    border-radius:8px;
    background:rgba(10,8,30,.45);
    border:1px solid rgba(179,147,255,.15);
    position:relative;overflow:hidden;
  }
  .player-panel .player-time{
    display:flex;justify-content:space-between;
    font-size:10px;letter-spacing:.6px;
    color:#a89bd0;
    font-variant-numeric:tabular-nums;
    margin-top:-2px;
  }

  /* ─── Transport controls ─── */
  .player-panel .player-controls{
    display:flex;justify-content:space-between;align-items:center;
    gap:8px;
    margin-top:4px;
  }
  .player-panel .ctrl-btn{
    width:44px;height:44px;
    border-radius:50%;
    background:radial-gradient(ellipse at 50% 30%, rgba(139,66,187,.5), rgba(15,10,35,.7));
    border:1px solid rgba(179,147,255,.5);
    color:#eabaff;
    display:grid;place-items:center;
    cursor:pointer;
    transition:all .18s;
    padding:0;flex-shrink:0;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 4px 14px rgba(0,0,0,.4);
  }
  .player-panel .ctrl-btn:active{transform:scale(.94)}
  .player-panel .ctrl-btn:hover:not(:disabled){
    border-color:#cf75f3;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 4px 18px rgba(217,78,255,.35);
  }
  .player-panel .ctrl-btn.ctrl-secondary{
    width:38px;height:38px;
    background:transparent;
    border-color:rgba(179,147,255,.3);
    color:#a89bd0;
    box-shadow:none;
  }
  .player-panel .ctrl-btn.ctrl-secondary:hover:not(:disabled){
    color:#eabaff;border-color:#cf75f3;
  }
  .player-panel .ctrl-btn[aria-pressed="true"],
  .player-panel .ctrl-btn[data-mode]:not([data-mode="off"]){
    border-color:#cf75f3;
    color:#eabaff;
    background:rgba(139,66,187,.35);
    box-shadow:0 0 12px rgba(217,78,255,.4);
  }

  /* Big play button */
  .player-panel .ctrl-btn.ctrl-play{
    width:60px;height:60px;
    background:radial-gradient(ellipse at 50% 30%, #b048d8, #5a1e7f);
    border:1px solid #eabaff;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.15),
      0 6px 22px rgba(217,78,255,.5),
      0 0 30px rgba(217,78,255,.35);
    color:#fff;
  }
  .player-panel .ctrl-btn.ctrl-play:hover:not(:disabled){
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.2),
      0 6px 28px rgba(217,78,255,.7),
      0 0 40px rgba(217,78,255,.5);
  }
  .player-panel .ctrl-btn.ctrl-play svg{display:block}
  .player-panel .ctrl-btn.ctrl-play svg[hidden]{display:none !important}

  .player-panel .repeat-badge{
    position:absolute;top:-2px;right:-2px;
    width:14px;height:14px;
    border-radius:50%;
    background:#cf75f3;
    color:#fff;font-size:9px;
    display:grid;place-items:center;
    font-weight:600;
    box-shadow:0 0 6px rgba(217,78,255,.6);
  }
  .player-panel .ctrl-btn[data-mode="off"] .repeat-badge{display:none}

  /* Hide old .player-volume (removed) and old .player-titles/like */
  .player-panel .player-volume{display:none !important}
  .player-panel .player-titles{display:contents}
  .player-panel > #player-like{display:none}
  .player-panel > .player-add-chip{display:none}
  .player-panel > .player-top-row{display:none}
}

@media (max-width: 480px) {
  .player-panel{padding:14px 14px 12px !important;gap:10px}
  .player-panel .player-context{padding:6px 16px;min-width:70%}
  .player-panel .context-line{font-size:10px}
  .player-panel .context-author{font-size:8.5px}
  .player-panel .player-cover{width:min(200px,50vw);border-radius:14px}
  .player-panel .player-title{font-size:13px}
  .player-panel .player-artist{font-size:10px}
  /* 4 кнопки в ряд — на экранах 320-380px лейблы могут не помещаться
     рядом с иконкой, разрешаем переноc за счёт flex-direction:column. */
  .player-panel .pact{padding:7px 3px;font-size:8.5px;gap:3px;flex-direction:column;letter-spacing:.5px}
  .player-panel .pact .pact-icon svg{width:14px;height:14px}
  .player-panel .pact .pact-label{text-align:center;line-height:1.1}
  .player-panel .ctrl-btn{width:38px;height:38px}
  .player-panel .ctrl-btn.ctrl-secondary{width:34px;height:34px}
  .player-panel .ctrl-btn.ctrl-play{width:52px;height:52px}
  .player-panel .ctrl-btn svg{width:18px;height:18px}
  .player-panel .ctrl-btn.ctrl-play svg{width:22px;height:22px}
}

/* ═════════════════════════════════════════════════════════════════════════
   STYLE MIXER — новый UI по мотивам play.html
   ═════════════════════════════════════════════════════════════════════════ */

.vibe-mixer{
  display:flex;flex-direction:column;
  gap:14px;
  padding:10px 12px 4px;
}

.vibe-mixer .vm-loading{
  padding:24px 8px;text-align:center;
  color:#a89bd0;font-size:12px;letter-spacing:.4px;
}

/* ─── Title capsule (like context in player) ─── */
.vibe-mixer .vm-title{
  align-self:center;
  padding:8px 22px;
  border-radius:22px;
  background:rgba(10,8,30,.55);
  border:1px solid rgba(179,147,255,.35);
  color:#f0eaff;
  font-size:11px;letter-spacing:1.8px;
  font-weight:600;text-transform:uppercase;
  box-shadow:inset 0 0 12px rgba(179,147,255,.1);
}
.vibe-mixer .vm-subtitle{
  text-align:center;
  font-size:10.5px;color:#a89bd0;
  letter-spacing:.3px;
  margin:-4px 0 2px;
}

/* ─── Vibe chips ─── */
.vibe-mixer .vm-vibes{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:6px 6px;
  padding:2px 2px;
}
.vibe-mixer .vibe-chip{
  padding:8px 14px;
  border-radius:20px;
  border:1px solid rgba(179,147,255,.35);
  background:rgba(15,10,35,.5);
  color:#c9bfe8;
  font-family:inherit;font-size:11.5px;letter-spacing:.6px;
  cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1);
}
.vibe-mixer .vibe-chip:hover:not(.selected):not(.banned){
  border-color:#b393ff;color:#eabaff;
  background:rgba(30,20,60,.7);
}
.vibe-mixer .vibe-chip.selected{
  background:linear-gradient(135deg,rgba(141,66,187,.55),rgba(106,47,153,.6));
  border-color:#cf75f3;color:#fff;
  box-shadow:0 0 14px rgba(217,78,255,.4);
}
.vibe-mixer .vibe-chip.banned{
  opacity:0;pointer-events:none;
  transform:scale(.8);
}

/* ─── Style Balance card ─── */
.vibe-mixer .vm-balance{
  border-radius:16px;
  padding:14px 12px 10px;
  background:
    radial-gradient(ellipse at 50% -30%, rgba(217,78,255,.12), transparent 70%),
    linear-gradient(160deg, rgba(30,15,60,.55), rgba(10,8,30,.65));
  border:1px solid rgba(179,147,255,.28);
  box-shadow:
    inset 0 0 30px rgba(179,147,255,.06),
    0 4px 20px rgba(0,0,0,.35);
  position:relative;
  transition:opacity .3s;
}
.vibe-mixer .vm-balance.empty{
  opacity:.5;
}
.vibe-mixer .vm-balance-title{
  text-align:center;
  font-size:9px;letter-spacing:2.5px;
  color:#7dc8ff;font-weight:600;
  margin-bottom:10px;
  text-transform:uppercase;
}

/* Sliders row */
.vibe-mixer .vm-sliders{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  padding:4px 0 12px;
}
.vibe-mixer .mixer-slider{
  display:flex;flex-direction:column;align-items:center;
  gap:6px;
  min-width:0;
}
.vibe-mixer .ms-label{
  font-size:11px;font-weight:600;color:#f0eaff;
  letter-spacing:.4px;
  text-align:center;
  min-height:14px;
  overflow:hidden;text-overflow:ellipsis;
  max-width:100%;white-space:nowrap;
}
.vibe-mixer .mixer-slider.empty .ms-label{color:#5a4a8a}

.vibe-mixer .ms-track{
  position:relative;
  width:6px;height:120px;
  background:rgba(15,10,35,.7);
  border-radius:3px;
  border:1px solid rgba(179,147,255,.18);
  overflow:visible;
  cursor:pointer;
}
.vibe-mixer .ms-fill{
  position:absolute;
  bottom:0;left:0;right:0;
  background:linear-gradient(0deg,#cf75f3,#7dc8ff);
  border-radius:3px;
  box-shadow:0 0 8px rgba(207,117,243,.5);
  transition:height .12s;
}
.vibe-mixer .ms-thumb{
  position:absolute;
  left:50%;transform:translate(-50%,50%);
  width:20px;height:20px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,#cf75f3 60%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    0 0 10px rgba(217,78,255,.6),
    0 2px 6px rgba(0,0,0,.4);
  cursor:grab;
  z-index:2;
  transition:transform .1s;
  touch-action:none;
}
.vibe-mixer .ms-thumb:active{cursor:grabbing;transform:translate(-50%,50%) scale(1.15)}
.vibe-mixer .mixer-slider.empty .ms-track,
.vibe-mixer .mixer-slider.empty .ms-thumb{display:none}
.vibe-mixer .mixer-slider.empty::before{
  content:"";
  width:6px;height:120px;
  background:rgba(15,10,35,.3);
  border-radius:3px;
  border:1px dashed rgba(179,147,255,.15);
}

.vibe-mixer .ms-value{
  font-size:11px;font-weight:600;color:#eabaff;
  font-variant-numeric:tabular-nums;
  letter-spacing:.4px;
  min-height:14px;
}
.vibe-mixer .mixer-slider.empty .ms-value{color:#5a4a8a}

/* Reset button */
.vibe-mixer .vm-reset{
  display:block;width:100%;
  padding:8px;
  border-radius:12px;
  border:1px solid rgba(179,147,255,.3);
  background:rgba(10,8,30,.5);
  color:#c9bfe8;
  font-family:inherit;
  font-size:10px;letter-spacing:1.5px;font-weight:600;
  cursor:pointer;text-transform:uppercase;
  transition:all .15s;
}
.vibe-mixer .vm-reset:hover:not(:disabled){
  border-color:#b393ff;color:#eabaff;
  background:rgba(30,20,60,.7);
}
.vibe-mixer .vm-reset:disabled{opacity:.3;cursor:not-allowed}

/* ─── PLAY button — big & glowing ─── */
.vibe-mixer .vm-play{
  display:flex;align-items:center;justify-content:center;
  gap:10px;
  width:100%;
  padding:14px;
  border-radius:16px;
  border:1px solid #eabaff;
  background:radial-gradient(ellipse at 50% 30%, #b048d8, #5a1e7f);
  color:#fff;
  font-family:inherit;
  font-size:14px;letter-spacing:2.5px;font-weight:600;
  cursor:pointer;text-transform:uppercase;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.15),
    0 6px 22px rgba(217,78,255,.5),
    0 0 30px rgba(217,78,255,.35);
  transition:all .18s;
}
.vibe-mixer .vm-play:hover:not(:disabled),
.vibe-mixer .vm-play:active:not(:disabled){
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.2),
    0 6px 28px rgba(217,78,255,.7),
    0 0 40px rgba(217,78,255,.5);
}
.vibe-mixer .vm-play:active:not(:disabled){transform:scale(.98)}
.vibe-mixer .vm-play:disabled{
  opacity:.35;cursor:not-allowed;
  background:rgba(30,20,50,.7);
  color:#7d5eb8;
  border-color:rgba(179,147,255,.25);
  box-shadow:none;
}
.vibe-mixer .vm-play-icon{
  display:grid;place-items:center;
  color:currentColor;
}

@media (max-width: 480px) {
  .vibe-mixer{gap:12px;padding:8px 6px 2px}
  .vibe-mixer .vm-title{padding:6px 18px;font-size:10px}
  .vibe-mixer .vm-subtitle{font-size:9.5px}
  .vibe-mixer .vibe-chip{padding:7px 12px;font-size:10.5px}
  .vibe-mixer .ms-track,
  .vibe-mixer .mixer-slider.empty::before{height:100px}
  .vibe-mixer .ms-label{font-size:10px}
  .vibe-mixer .ms-value{font-size:10px}
  .vibe-mixer .vm-play{padding:12px;font-size:12.5px;letter-spacing:2px}
}

/* ═════════════════════════════════════════════════════════════════════════
   LANGUAGE SWITCHER
   ═════════════════════════════════════════════════════════════════════════ */

.lang-switch{
  display:inline-flex;
  gap:2px;
  padding:2px;
  border:1px solid var(--border, rgba(147,123,255,.3));
  border-radius:12px;
  background:rgba(10,8,30,.4);
  margin-right:12px;
  flex-shrink:0;
}
.lang-switch .lang-btn{
  padding:6px 10px;
  font-size:10.5px;
  letter-spacing:.5px;
  font-weight:600;
  color:#a89bd0;
  background:transparent;
  border:0;
  border-radius:10px;
  cursor:pointer;
  transition:all .15s;
  min-width:32px;
}
.lang-switch .lang-btn:hover{color:#eabaff}
.lang-switch .lang-btn[aria-pressed="true"]{
  background:linear-gradient(135deg,rgba(141,66,187,.55),rgba(106,47,153,.6));
  color:#fff;
  box-shadow:0 0 10px rgba(217,78,255,.3);
}

/* Mobile menu: switcher показывается внутри футера */
.mobile-menu-lang{
  display:flex;
  gap:4px;
  padding:4px;
  border:1px solid var(--border, rgba(147,123,255,.3));
  border-radius:12px;
  background:rgba(10,8,30,.4);
  margin-bottom:10px;
}
.mobile-menu-lang .lang-btn{
  flex:1;
  padding:8px;
  font-size:12px;
  font-weight:600;
  color:#a89bd0;
  background:transparent;
  border:0;
  border-radius:10px;
  cursor:pointer;
}
.mobile-menu-lang .lang-btn[aria-pressed="true"]{
  background:linear-gradient(135deg,rgba(141,66,187,.55),rgba(106,47,153,.6));
  color:#fff;
}

/* Hide desktop switcher on mobile — остаётся только в mobile menu */
@media (max-width: 950px) {
  header > .lang-switch{display:none}
}

/* ═════════════════════════════════════════════════════════════════════════
   SIMILARS FEATURE — top-level view tabs + Similars pane + Similar-search
   buttons (desktop & mobile). Пишем в конец файла, ничего не переопределяем
   — исходная механика HOT/MIXER/SETS/MOODS/PUBLIC остаётся как была.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── Top-level view tabs: My Explorer / Similars / Public ─── */
.view-tabs{
  display:flex;gap:4px;
  padding:4px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(30,20,60,.55),rgba(15,10,35,.65));
  border:1px solid #2a2148;
  flex-shrink:0;
  margin-bottom:10px;
}
.view-tab{
  flex:1;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:#a89bd0;
  font-size:11px;letter-spacing:1.4px;
  text-transform:uppercase;
  font-family:inherit;
  cursor:pointer;
  transition:all .18s;
  font-weight:500;
}
.view-tab:hover:not(.active){
  color:#eabaff;background:rgba(139,66,187,.1);
}
.view-tab.active{
  color:#f0eaff;
  border-color:#cf75f3;
  background:linear-gradient(135deg,rgba(207,117,243,.28),rgba(141,66,187,.22));
  box-shadow:0 0 12px rgba(207,117,243,.35);
}

/* ─── View panes: показываем только активный, inactive полностью скрыт ─── */
.view-pane{
  display:flex;flex-direction:column;
  flex:1;min-height:0;
  gap:12px;
}
.view-pane[hidden]{display:none !important}

/* ═══ Similars view ═══════════════════════════════════════════════════════ */

/* Original track header — та же плашка что у списка, но без hover/click,
   с подписью "ORIGINAL TRACK". Выделен акцентной рамкой — чтобы юзер
   отличал источник от результатов. */
.similars-original{
  flex-shrink:0;
  padding:8px 10px 10px;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(207,117,243,.08),rgba(15,10,35,.4));
  border:1px solid rgba(207,117,243,.4);
  box-shadow:inset 0 0 10px rgba(207,117,243,.08);
}
.similars-original-label{
  font-size:10px;letter-spacing:2px;
  color:#cf75f3;
  text-transform:uppercase;
  margin-bottom:6px;
  padding:0 2px;
  font-weight:600;
}
.similars-original-card{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:11px;align-items:stretch;
  padding:0;
}
.similars-original-card .src-card-cover{
  width:56px;height:56px;
  border-radius:8px;
  background:linear-gradient(135deg,#1a1237,#0e0925);
  overflow:hidden;
  flex-shrink:0;
}
.similars-original-card .src-card-cover img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.similars-original-card .src-card-main{
  min-width:0;
  display:flex;flex-direction:column;justify-content:space-between;gap:4px;
}

/* ─── Filter bar: Camelot toggle + Reset ─── */
.similars-filters{
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;
  padding:2px 2px 6px;
  border-bottom:1px solid #251b40;
}
.similars-filter-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  border-radius:14px;
  border:1px solid var(--border,#3a2b64);
  background:rgba(15,10,35,.5);
  color:#a89bd0;
  font-size:10px;letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .16s;
  font-family:inherit;
}
.similars-filter-chip:hover:not([aria-pressed="true"]){
  border-color:#7d5eb8;color:#eabaff;
}
.similars-filter-chip[aria-pressed="true"]{
  background:linear-gradient(135deg,rgba(94,232,198,.3),rgba(30,120,100,.3));
  border-color:#5ee8c6;
  color:#e9fff7;
  box-shadow:0 0 10px rgba(94,232,198,.3);
}
.similars-filter-chip .chip-icon{display:grid;place-items:center;color:currentColor}
.similars-filter-chip .chip-icon svg{display:block}

.similars-reset{
  margin-left:auto;
  padding:5px 14px;
  border-radius:12px;
  border:1px solid rgba(255,138,194,.35);
  background:transparent;
  color:#ff8ac2;
  font-size:10px;letter-spacing:1.2px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .14s;
  font-family:inherit;
}
.similars-reset:hover{
  background:rgba(255,138,194,.12);
  border-color:#ff8ac2;
  color:#ffb0d6;
}
.similars-reset:active{transform:scale(.96)}

/* ─── Similars list — те же .src-card что в explorer, механика клика
       делегируется в js. Общие стили .src-card уже определены ранее. */
.similars-list{
  flex:1;min-height:0;
  overflow-y:auto;
  padding:4px 2px 4px;
  scrollbar-width:thin;
}
.similars-list::-webkit-scrollbar{width:6px}
.similars-list::-webkit-scrollbar-thumb{background:#5a4a8a55;border-radius:3px}

/* Накладываем акцентную подсветку когда карточка играет в плеере — такая
   же как в explorer, но для .src-card внутри .similars-list тоже работает. */

/* ─── Public view stub ─── */
.view-public .public-placeholder{
  margin:auto;
  padding:40px 24px;
  text-align:center;
  color:#a89bd0;
  display:flex;flex-direction:column;gap:10px;align-items:center;
  max-width:360px;
}
.view-public .public-title{
  font-size:16px;letter-spacing:1.5px;
  color:#eabaff;
  text-transform:uppercase;
  font-weight:600;
}
.view-public p{
  margin:0;font-size:12px;line-height:1.5;
}

/* ═══ Similar-search button (DESKTOP) — 5-я кнопка в .player-actions ═════ */
.pact-similar{
  /* Структурно наследует .pact, акцент — радарно-бирюзовый */
}
.pact-similar .pact-icon{color:#8ad8ff}
.pact-similar:not(:disabled):hover,
.pact-similar:not(:disabled):active{
  border-color:#8ad8ff;color:#dff0ff;
  background:rgba(15,45,75,.55);
  box-shadow:0 0 14px rgba(138,216,255,.3);
}
.pact-similar[hidden]{display:none !important}

/* Отключаем desktop pact-similar на мобиле (там отдельная .similar-search-btn-m) */
@media (max-width: 1000px){
  .player-panel .pact-similar{display:none !important}
}

/* ═══ Similar-search button (MOBILE) — отдельная кнопка над AUX INPUT ════ */
.similar-search-btn-m{
  display:none;                 /* desktop скрыт */
}
.similar-search-btn-m[hidden]{display:none !important}

@media (max-width: 900px){
  .similar-search-btn-m{
    display:flex;align-items:center;gap:12px;
    width:100%;
    margin-top:auto;             /* прижимаем к низу плеера, выше AUX */
    margin-bottom:10px;
    padding:12px 16px;
    border-radius:14px;
    border:1px solid rgba(138,216,255,.5);
    background:linear-gradient(120deg,rgba(40,120,180,.35),rgba(80,140,180,.3));
    color:#f0faff;
    font-family:inherit;
    cursor:pointer;
    transition:all .2s;
    box-shadow:0 4px 16px rgba(40,120,180,.25);
  }
  /* AUX-кнопка перестаёт быть крайней снизу, когда есть .similar-search-btn-m
     — та забрала margin-top:auto. Сбрасываем у AUX, чтобы не было двойного
     отступа. */
  .similar-search-btn-m + .aux-input-btn{margin-top:0}

  .similar-search-btn-m:active{transform:scale(.98)}
  .similar-search-btn-m[hidden]{display:none !important}
  .similar-search-btn-m .ssm-icon{
    flex-shrink:0;
    display:grid;place-items:center;
    color:#8ad8ff;
    filter:drop-shadow(0 0 6px rgba(138,216,255,.5));
  }
  .similar-search-btn-m .ssm-icon svg{display:block}
  .similar-search-btn-m .ssm-text{
    flex:1;text-align:left;display:flex;flex-direction:column;gap:2px;
  }
  .similar-search-btn-m .ssm-text b{
    font-size:13px;letter-spacing:1.4px;font-weight:600;color:#f0faff;
    text-transform:uppercase;
  }
  .similar-search-btn-m .ssm-text small{
    font-size:11px;color:#b8d8e8;letter-spacing:.3px;
  }
}

@media (max-width: 480px){
  .similar-search-btn-m{padding:10px 14px;gap:10px}
  .similar-search-btn-m .ssm-text b{font-size:12px;letter-spacing:1.1px}
  .similar-search-btn-m .ssm-text small{font-size:10px}
}

/* ═══ Mobile: view-tabs — вверх bottom-sheet'а, под handle ═══════════════ */
@media (max-width: 900px){
  .view-tabs{
    margin-top:6px;
    padding:3px;gap:2px;
  }
  .view-tab{padding:8px 6px;font-size:10.5px;letter-spacing:1px}

  /* Similars original + filters компактнее */
  .similars-original{padding:7px 9px 9px}
  .similars-original-label{font-size:9px;letter-spacing:1.6px;margin-bottom:5px}
  .similars-original-card{grid-template-columns:48px 1fr;gap:10px}
  .similars-original-card .src-card-cover{width:48px;height:48px}
  .similars-original-card .src-card-title{font-size:12px}
  .similars-original-card .src-card-artist{font-size:10px}

  .similars-filters{padding:2px 2px 5px;gap:6px}
  .similars-filter-chip{padding:5px 10px;font-size:9.5px}
  .similars-reset{padding:4px 11px;font-size:9.5px}

  .similars-list{max-height:none}
}

/* ═════════════════════════════════════════════════════════════════════════
   CARD PLAY/PAUSE OVERLAY — мини-кнопка поверх кавера на плашках треков.
   Применяется и в MyExplorer (sources-list), и в Similars (similars-list):
   селектор .src-card-cover > .card-pp.
   ═════════════════════════════════════════════════════════════════════════ */

/* У кавера теперь позиционируется абсолютный overlay. */
.src-card-cover{position:relative}

.card-pp{
  position:absolute;inset:0;
  display:grid;place-items:center;
  border:0;padding:0;margin:0;
  background:rgba(10,8,30,.45);
  color:#f0eaff;
  cursor:pointer;
  opacity:0;                              /* по умолчанию скрыто на desktop */
  transition:opacity .18s ease,background .18s,color .18s,transform .08s;
  border-radius:inherit;                  /* совпадает с .src-card-cover */
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
.card-pp:hover{
  background:linear-gradient(135deg,rgba(207,117,243,.55),rgba(10,8,30,.5));
  color:#fff;
}
.card-pp:active{transform:scale(.94)}

/* ─── Иконки — обе в DOM, переключаются [data-pp]'ом ─── */
.card-pp .pp-icon{
  display:none;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
  pointer-events:none;
}
.card-pp[data-pp="play"]  .pp-play {display:block}
.card-pp[data-pp="pause"] .pp-pause{display:block}

/* ─── Видимость ─────────────────────────────────────────────────────────
     • Desktop (есть hover): показывается на наведении И всегда на активной
       (играющей / поставленной на паузу) карточке.
     • Touch (no hover): всегда видно, но полупрозрачно для неактивных —
       чтобы юзер видел CTA. */
.src-card:hover .card-pp,
.src-card.playing .card-pp,
.src-card.paused  .card-pp{
  opacity:1;
}

@media (hover: none){
  .card-pp{
    opacity:1;
    background:rgba(10,8,30,.35);
  }
  .src-card.playing .card-pp,
  .src-card.paused  .card-pp{
    opacity:1;
  }
}

/* ─── Активный трек (играет сейчас в плеере) ─── */
.src-card.playing .card-pp,
.src-card.paused  .card-pp{
  background:linear-gradient(135deg,rgba(207,117,243,.6),rgba(141,66,187,.55));
  color:#fff;
  box-shadow:inset 0 0 10px rgba(217,78,255,.35);
}
.src-card.playing .card-pp:hover,
.src-card.paused  .card-pp:hover{
  background:linear-gradient(135deg,rgba(217,78,255,.75),rgba(141,66,187,.7));
}

/* ═════════════════════════════════════════════════════════════════════════
   iOS Safari focus-zoom prevention.
   iOS 10+ Safari автоматически зумит страницу когда юзер фокусируется на
   input/select/textarea с font-size меньше 16px. После закрытия модала
   zoom не всегда возвращается к 100% (особо выражено на iOS 14.3).
   Форсируем 16px на все поля ввода внутри модалов и bottom-sheet —
   чтобы причина zoom'а не возникала изначально. Reset через
   MunIOS.viewportReset() (ios-safari-fix.js) — страховка на случай
   если где-то 16px недостаточно (например, компактные формы инлайн).
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px){
  dialog input,
  dialog select,
  dialog textarea,
  .sources-panel input,
  .sources-panel select,
  .sources-panel textarea,
  .mobile-menu input,
  .mobile-menu select,
  .mobile-menu textarea{
    font-size:16px !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   VIBES RAIL — горизонтальная scroll-панель вайбов (sprint 2).
   Desktop: ниже плеера+источника, во всю ширину .player-hub (grid row 2).
   Mobile:  над плеером (order:-1).
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Desktop: включаем 2-строчный grid для .player-hub ───────────────────── */
.player-hub{
  /* grid-template-columns наследуется из основного правила выше.
     Добавляем row-definition: row1=auto (player/sources), row2=auto (rail). */
  grid-template-rows: auto auto;
}
.vibes-rail{
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 4px;
  padding: 10px 0 4px;
  position: relative;
  min-height: 0;              /* избегаем overflow раздувания в grid */
}
.vibes-rail[hidden]{display:none !important}
.vibes-rail:empty{display:none}

.vibes-rail-head{
  display:flex;align-items:baseline;gap:10px;
  padding:0 2px 8px;
}
.vibes-rail-eyebrow{
  font-size:10px;letter-spacing:2.4px;
  color:#8ad8ff;
  text-transform:uppercase;
  font-weight:600;
}

/* Горизонтальный scroll area */
.vibes-rail-scroll{
  display:flex;gap:12px;
  overflow-x:auto;overflow-y:hidden;
  padding:4px 2px 8px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:#5a4a8a55 transparent;
  /* защита от «подхвата» вертикального свайпа на touch — scroll строго
     горизонтальный внутри ленты */
  touch-action: pan-x;
}
.vibes-rail-scroll::-webkit-scrollbar{height:6px}
.vibes-rail-scroll::-webkit-scrollbar-thumb{background:#5a4a8a55;border-radius:3px}

/* Fade edges — подсказка «можно скроллить» */
.vibes-rail-fade{
  position:absolute;
  top:40px;bottom:12px;
  width:28px;pointer-events:none;z-index:2;
}
.vibes-rail-fade.left{
  left:0;
  background:linear-gradient(90deg,rgba(8,8,32,.85),transparent);
}
.vibes-rail-fade.right{
  right:0;
  background:linear-gradient(-90deg,rgba(8,8,32,.85),transparent);
}

/* ── Плашка вайба ───────────────────────────────────────────────────────── */
.vibe-tile{
  position:relative;flex-shrink:0;
  width:240px;aspect-ratio:3/2;
  border-radius:14px;overflow:hidden;
  border:1.5px solid #2a2148;
  background:linear-gradient(135deg,#1a1237,#0e0925);
  cursor:pointer;padding:0;
  transition:border-color .18s, transform .14s, box-shadow .18s;
  scroll-snap-align:start;
  font-family:inherit;
}
.vibe-tile:hover{
  border-color:#7d5eb8;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.vibe-tile:active{transform:translateY(0)}

.vibe-tile .vt-cover{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  display:block;
}
.vibe-tile .vt-cover.empty{
  background:linear-gradient(135deg,#1a1237,#2d1b55);
}
/* Overlay-градиент сверху для читаемости текста поверх ЛЮБОЙ обложки */
.vibe-tile .vt-shade{
  position:absolute;top:0;left:0;right:0;height:55%;
  background:linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 50%, transparent 100%);
  pointer-events:none;
}

/* Имя — top-left, крупно, читаемо на любом фоне */
.vibe-tile .vt-name{
  position:absolute;top:10px;left:12px;right:12px;
  color:#f0eaff;
  font-size:14px;font-weight:600;letter-spacing:.3px;
  line-height:1.2;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
  overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
  text-align:left;
}

/* ── Pulse активной плашки ──────────────────────────────────────────────── */
/* Sprint "player-opt-sprint1" (24.10.2026):
   Переписали с animate'нутого box-shadow (paint!) на статичный box-shadow +
   animate opacity::after (compositor-only). Эффект пульсации выглядит так же,
   но стоит в разы дешевле на мобиле. */
.vibe-tile.playing{
  border-color:#cf75f3;
  box-shadow:
    0 0 0 2px rgba(207,117,243,.5),
    0 0 24px rgba(207,117,243,.5);
  position:relative;
  overflow:visible;
}
.vibe-tile.playing::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    0 0 0 2px rgba(207,117,243,.4),
    0 0 32px rgba(207,117,243,.75);
  opacity:0;
  animation: vibe-pulse 1.8s ease-in-out infinite;
  will-change:opacity;
}
@keyframes vibe-pulse{
  0%, 100% { opacity: 0;   }
  50%      { opacity: 1;   }
}

/* ─── MOBILE (≤900px): переносим рельсу над плеером ─────────────────────── */
@media (max-width: 900px){
  .vibes-rail{
    grid-column: auto;
    grid-row:    auto;
    order:       -1;             /* выше .player-panel и .sources-panel */
    padding:     8px 0 2px;
    margin:      0 0 2px;
  }
  .vibes-rail-head{padding:0 14px 6px}
  .vibes-rail-scroll{
    padding:4px 14px 8px;
    gap:10px;
    scroll-padding-left:14px;
  }
  .vibes-rail-fade{top:34px;bottom:10px;width:20px}
  .vibe-tile{
    width:200px;
    border-radius:12px;
  }
  .vibe-tile .vt-name{font-size:13px;top:8px;left:10px;right:10px}
}

@media (max-width: 480px){
  .vibe-tile{width:170px}
  .vibe-tile .vt-name{font-size:12px}
}