/* ════════════════════════════════════════════════════════════════════
   VeoSuno — стили каркаса страницы (templates/h1.html) и того, что рисует h1.js: токены, база, шапка, левое меню, нижняя панель телефона,
   плеер (и развёрнутый на телефоне), меню профиля и «⋯», окно пополнения, окна, тосты, подсказки, протобар.
   Правила с пометкой «общее: каркас + музыка» используются и каркасом, и модулем музыки — их держим здесь, в общем файле.
   Разделено автоматически из tokens.css, nav.css, site.css, studio.css, mastering.css — правила не менялись.
   ════════════════════════════════════════════════════════════════════ */

/* ══════ из tokens.css ══════ */
/* ════════════════════════════════════════════════════════════════════
   VeoSuno — дизайн-токены: цвета, градиент, шрифт. Общие для всех разделов сайта.
   Поменять цвет здесь — он поменяется везде. Подключается первым из стилей.
   Цвета как на veosuno.ru, только тёмная тема.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --bg: #101012;
  --panel: #151517;
  --card: #1F1F21;
  --line: #333335;
  --line2: #49494A;
  --fg: #FFFFFF;
  --fg2: #C9C9CB;
  --muted: #8D8D8F;
  --accent: #DE762B;
  --accent-ink: #101012;
  --ok: #2BDE90;
  --bad: #FF6B6B;
  --ref: #8FA3FF;
  --fade: #22D3EE;
  --grad: linear-gradient(135deg, #A23BF5, #E0457B 55%, #DE762B);
  --font: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

/* ══════ из site.css ══════ */
/* ════════════════════════════════════════════════════════════════════
   Каркас сайта для прототипа (меню, форма, список, панель, страница трека).
   В продакшене это вёрстка VeoSuno; стили мастеринга — в mastering.css.
   ════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   1. БАЗА (токены цветов — shared/tokens.css)
   ══════════════════════════════════════════════════════════════ */
/* токены (:root) — в shared/tokens.css, подключается до этого файла */
/* общее: каркас + музыка */
[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 14px;
}

/* общее: каркас + музыка */
button,
input {
  font-family: inherit;
  color: inherit;
}

/* общее: каркас + музыка */
button {
  cursor: pointer;
}

/* общее: каркас + музыка */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   2. КАРКАС САЙТА (прототип) — меню, форма создания, библиотека,
      правая панель трека с ручкой для растягивания
      В продакшене это вёрстка VeoSuno, здесь только для показа.
   ══════════════════════════════════════════════════════════════ */
html,
body {
  height: 100%;
  overflow: hidden;
}

.app {
  display: flex;
  height: calc(100vh - var(--siteplayer-h, 64px));
  min-height: 0;
}

/* плеер сайта внизу: всё приложение заканчивается над ним, поэтому липкие кнопки его не перекрывают */
.siteplayer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--siteplayer-h, 64px);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: #0c0c0e;
  border-top: 1px solid var(--line);
  opacity: .75;
}

.siteplayer .sp-cover {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: center/cover;
}

.siteplayer b {
  display: block;
  font-size: 13px;
}

.siteplayer small {
  font-size: 11px;
  color: var(--muted);
}

.siteplayer .sp-bar {
  flex: 2;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}

.siteplayer .sp-bar i {
  display: block;
  width: 23%;
  height: 100%;
  background: var(--fg2);
  border-radius: 2px;
}

.nav {
  width: 240px;
  flex-shrink: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: 1px solid var(--line);
}

.nav span {
  color: var(--muted);
  font-size: 13px;
}

.nav .on {
  color: var(--accent);
}

body.resizing {
  cursor: ew-resize;
  user-select: none;
}

/* подпись прототипа */
.protobar {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border-radius: 100px;
  background: rgba(31, 31, 33, .95);
  border: 1px solid var(--line2);
  font-size: 12px;
  color: var(--muted);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

@media (max-width: 900px) {
  .nav {
    display: none;
  }

  .protobar {
    left: 8px;
    right: auto;
    top: 8px;
    bottom: auto;
    padding: 3px;
    font-size: 11px;
    opacity: .92;
  }

  .protobar .mini-seg button {
    height: 24px;
    padding: 0 8px;
    font-size: 11px;
  }

  body>.protobar {
    color: transparent;
    gap: 0;
  }
}

/* общие элементы каркаса (в продакшене — стили сайта) */

/* общее: каркас + музыка */
.pill {
  height: 32px;
  padding: 0 14px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: var(--line2);
  color: #fff;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* общее: каркас + музыка */
.pill.sm {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

/* общее: каркас + музыка */
.iconbtn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .15);
  background: var(--panel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

/* общее: каркас + музыка */
.small {
  font-size: 12px;
  line-height: 17px;
  color: var(--muted);
}

/* общее: каркас + музыка */
.grow {
  flex: 1;
  min-width: 0;
}

/* общее: каркас + музыка */
.mini-seg {
  display: flex;
  padding: 2px;
  border-radius: 100px;
  background: var(--bg);
  border: 1px solid var(--line2);
  gap: 2px;
}

/* общее: каркас + музыка */
.mini-seg button {
  height: 28px;
  padding: 0 12px;
  border-radius: 100px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}

/* общее: каркас + музыка */
.mini-seg button[aria-pressed=true] {
  background: var(--line);
  color: var(--fg);
}

/* общее: каркас + музыка */
.cf-create {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 100px;
  color: #fff;
  font-size: 15px;
  background: radial-gradient(140% 200% at -10% 20%, #DE642B 0%, #E54270 100%);
}

/* «Оживить обложку»: окно, переключатель «Обложка / Видео», имитация мини-клипа */
.smodal {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ssheet {
  width: 440px;
  max-width: 100%;
  background: var(--card);
  border-radius: 24px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stoast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--siteplayer-h, 64px) + 20px);
  transform: translateX(-50%);
  z-index: 95;
  background: var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

/* анимация «Создать»: заливка, искры-ноты летят в список, в списке появляются два трека «Создаём…» */
/* общее: каркас + музыка */
.cf-create {
  position: relative;
  overflow: hidden;
  transition: transform .15s;
}

/* общее: каркас + музыка */
.cf-create:active {
  transform: scale(.97);
}

@keyframes cf-pop {
  40% {
    transform: scale(1.35);
  }
}

/* сообщение с действием */
.stoast {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stoast-act {
  height: 28px;
  padding: 0 12px;
  border-radius: 100px;
  border: 0;
  background: var(--grad);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* «Создать» неактивна, пока не заполнен минимум; когда можно — «просыпается» */
/* общее: каркас + музыка */
.cf-create:disabled {
  opacity: .4;
  filter: saturate(.35);
  cursor: not-allowed;
}

/* на телефоне поля ввода 16 px — иначе iPhone увеличивает страницу при вводе (альбом, название, промпт) */
@media (pointer: coarse) {

  /* общее: каркас + музыка */
  input {
    font-size: 16px !important;
  }
}

/* общее: каркас + музыка */
.cf-create:not(.sending):not(.done):not(:disabled)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%) -150% 0 / 60% 100% no-repeat;
  animation: cf-glint 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cf-glint {

  0%,
  70% {
    background-position: -150% 0;
  }

  100% {
    background-position: 250% 0;
  }
}

/* ══════ из nav.css ══════ */
/* ════════════════════════════════════════════════════════════════════
   VeoSuno — левое меню (разметку строит shared/nav.js). Общее для всех разделов.
   Подключается после site.css и до стилей раздела. Ширина меню — переменная --nav-w
   (задаёт раздел: 240px, свёрнутое — 72px). Здесь же — планшет и телефон.
   Верхняя полоса телефона (.mtop) и нижняя панель (.mtabs) пока у раздела — в music/studio.css.
   ════════════════════════════════════════════════════════════════════ */
.nav.sidenav {
  width: var(--nav-w);
  padding: 14px 12px 12px;
  gap: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
  scrollbar-width: none;
  transition: width .25s cubic-bezier(.3, .7, .3, 1);
  background: var(--bg);
}

.nav.sidenav::-webkit-scrollbar {
  display: none;
}

.sn-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 40px;
  margin-bottom: 18px;
  padding-left: 6px;
}

.sn-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  min-width: 0;
}

.sn-word {
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: opacity .18s;
}

.sn-word .vs-logo {
  width: 138px;
  height: auto;
  display: block;
}

.sn-mark {
  display: none;
  align-items: center;
}

.sn-mark .vs-logo {
  width: 22px;
  height: 26px;
  display: block;
}

.sn-fold {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 0;
  background: none;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sn-fold:hover {
  background: var(--card);
  color: #fff;
}

.sn-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sn-i {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--fg2);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  transition: background .15s, color .15s, padding .25s;
}

.sn-i:hover {
  background: var(--card);
  color: #fff;
}

.sn-i.on {
  background: rgba(222, 118, 43, .13);
  color: var(--accent);
}

.sn-i.on::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.sn-t {
  transition: opacity .18s;
}

.sn-grow {
  flex: 1;
  min-height: 16px;
}

.sn-small .sn-i {
  height: 34px;
  font-size: 13px;
  color: var(--muted);
}

.sn-small .sn-i .i {
  width: 18px;
  height: 18px;
}

.sn-promo {
  position: relative;
  display: flex;
  gap: 10px;
  margin: 0 0 12px;
  padding: 14px;
  border-radius: 18px;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  background: radial-gradient(120% 120% at 0% 0%, #A23BF5 0%, #7B2FF7 35%, #E0457B 100%);
  box-shadow: 0 10px 30px rgba(162, 59, 245, .25);
  transition: padding .25s, border-radius .25s;
}

.sn-promo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .18) 45%, transparent 60%);
  transform: translateX(-100%);
  animation: sn-glint 5s ease-in-out 2s infinite;
}

@keyframes sn-glint {

  0%,
  70% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.sn-promo-ic {
  display: none;
}

.sn-promo-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sn-promo-body b {
  font-size: 18px;
  line-height: 1.15;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.sn-promo-body small {
  color: #fff;
}

.sn-promo-body small {
  font-size: 12px;
  line-height: 1.35;
  opacity: .9;
}

.sn-promo-btn {
  align-self: flex-start;
  margin-top: 4px;
  height: 32px;
  padding: 0 16px;
  border-radius: 100px;
  background: rgba(16, 16, 18, .75);
  display: inline-flex;
  align-items: center;
  font-size: 13px;
}

.sn-promo:hover .sn-promo-btn {
  background: #101012;
}

.sn-prof {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  text-align: left;
  color: #fff;
}

.sn-prof:hover {
  border-color: var(--line2);
}

.sn-ava {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sn-pdata {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sn-pdata b {
  font-size: 14px;
}

.sn-pdata small {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.sn-chev {
  color: var(--muted);
}

/* свёрнутое меню: только иконки, подписи гаснут, подсказки справа */
.nav-mini .sn-top {
  flex-direction: column;
  height: auto;
  gap: 10px;
  padding-left: 0;
}

.nav-mini .sn-word {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.nav-mini .sn-mark {
  display: flex;
  order: 0;
  height: 26px;
}

.nav-mini .sn-i {
  padding: 0 13px;
}

.nav-mini .sn-t,
.nav-mini .sn-pdata,
.nav-mini .sn-chev {
  opacity: 0;
  pointer-events: none;
  width: 0;
  overflow: hidden;
}

.nav-mini .sn-promo {
  padding: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  align-self: center;
  justify-content: center;
  align-items: center;
}

.nav-mini .sn-promo-body {
  display: none;
}

.nav-mini .sn-promo-ic {
  display: inline-flex;
}

.nav-mini .sn-prof {
  padding: 5px;
  justify-content: center;
  border-color: transparent;
  background: none;
}

.sn-tip {
  position: fixed;
  z-index: 120;
  transform: translateY(-50%);
  background: #2A2A2D;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}

.nav-scrim,
.mtop,
.mtabs,
.sn-monly {
  display: none !important;
}

/* ══════════ Наведение, карточка пополнения и профиля, состояния баланса ══════════
   ══════════ Планшет и телефон (≤ 900 px): меню выезжает слева поверх страницы ══════════ */
@media (max-width: 900px) {
  .nav.sidenav {
    display: flex !important;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 110;
    width: 280px;
    transform: translateX(-102%);
    transition: transform .25s cubic-bezier(.3, .7, .3, 1);
    border-right: 1px solid var(--line);
  }

  .nav-open .nav.sidenav {
    transform: none;
    box-shadow: 20px 0 60px rgba(0, 0, 0, .6);
  }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 105;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
  }

  .nav-open .nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-open .nav.sidenav .sn-fold {
    display: none;
  }

  .nav-mini .nav.sidenav .sn-t,
  .nav-mini .nav.sidenav .sn-pdata,
  .nav-mini .nav.sidenav .sn-chev,
  .nav-mini .nav.sidenav .sn-word {
    opacity: 1;
    width: auto;
    pointer-events: auto;
  }

  .nav-mini .nav.sidenav .sn-promo {
    width: auto;
    height: auto;
    padding: 14px;
    border-radius: 18px;
    align-self: stretch;
    justify-content: flex-start;
  }

  .nav-mini .nav.sidenav .sn-promo-body {
    display: flex;
  }

  .nav-mini .nav.sidenav .sn-promo-ic {
    display: none;
  }

  .nav-mini .nav.sidenav .sn-top {
    flex-direction: row;
  }

  .nav-mini .nav.sidenav .sn-mark {
    display: none;
  }

  .nav-mini .nav.sidenav .sn-prof {
    padding: 8px;
    justify-content: flex-start;
    border-color: var(--line);
    background: var(--panel);
  }
}

@media (max-width: 900px) {
  .nav-open .nav.sidenav {
    padding-bottom: 104px;
  }
}

/* подсветка при наведении, как у Mureka */
.sn-logo:hover .vs-bars rect {
  animation-duration: .9s;
}

.sn-i {
  transition: background .18s, color .18s, transform .18s;
}

.sn-i .i {
  transition: transform .2s cubic-bezier(.3, 1.5, .5, 1), color .18s;
}

.sn-i:hover {
  background: rgba(255, 255, 255, .09);
  color: #fff;
}

.sn-i:hover .i {
  transform: scale(1.12);
  color: #fff;
}

.sn-i.on:hover {
  background: rgba(222, 118, 43, .2);
}

.sn-i.on:hover .i {
  color: var(--accent);
}

.sn-small .sn-i:hover {
  color: #fff;
}

.sn-i:active {
  transform: scale(.98);
}

.sn-fold:hover {
  background: rgba(255, 255, 255, .09);
}

.sn-prof {
  transition: border-color .18s, background .18s;
}

.sn-prof:hover {
  background: #1c1c1f;
  border-color: #5a5a5c;
}

/* баннер пополнения: кнопка яркая, при наведении — свечение */
.sn-promo {
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, padding .25s, border-radius .25s;
}

.sn-promo:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(162, 59, 245, .42), 0 0 0 1px rgba(255, 255, 255, .18) inset;
}

.sn-promo-btn {
  position: relative;
  z-index: 1;
  background: #fff;
  color: #3a1466;
  -webkit-text-fill-color: #3a1466;
  font-weight: 700;
  height: 34px;
  padding: 0 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: transform .18s, box-shadow .18s, background .18s, color .18s;
}

.sn-promo:hover .sn-promo-btn {
  background: #fff;
  color: #7B2FF7;
  -webkit-text-fill-color: #7B2FF7;
  transform: scale(1.05);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .22), 0 8px 20px rgba(0, 0, 0, .3);
}

.sn-promo-ic {
  color: #fff;
}

.nav-mini .sn-promo:hover {
  transform: scale(1.08);
}

@media (max-width: 900px) {
  .sn-monly {
    display: flex !important;
  }
}

/* карточка аккаунта: аватар, имя, баланс */
.sn-acc {
  position: relative;
  margin-top: 10px;
  padding: 6px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .2s, box-shadow .2s;
}

.sn-acc.drop {
  border-color: #E0457B;
  box-shadow: 0 0 0 4px rgba(224, 69, 123, .15);
}

.sn-acc .sn-prof {
  margin: 0;
  border: 0;
  background: none;
  padding: 6px;
  border-radius: 12px;
}

.sn-acc .sn-prof:hover {
  background: rgba(255, 255, 255, .06);
  border: 0;
}

.sn-ava {
  background: center / cover var(--line);
  color: var(--fg2);
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px rgba(224, 69, 123, .6);
}

.sn-pdata small {
  color: var(--fg2);
}

.nav-mini .sn-acc {
  padding: 4px;
  border-color: transparent;
  background: none;
  align-items: center;
}

.nav-mini .sn-acc .sn-prof {
  padding: 4px;
}

.nav-mini .sn-pay {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0;
}

.nav-mini .sn-pay .sn-t {
  display: none;
}

@media (max-width: 900px) {
  .nav-mini .nav.sidenav .sn-acc {
    padding: 6px;
    border-color: var(--line);
    background: var(--panel);
    align-items: stretch;
  }

  .nav-mini .nav.sidenav .sn-pay {
    width: auto;
    height: 40px;
    border-radius: 12px;
  }

  .nav-mini .nav.sidenav .sn-pay .sn-t {
    display: inline;
  }
}

/* баннер, когда баланс на исходе или закончился */
.sn-promo.low,
.sn-promo.empty {
  background: #1C1A1F;
  box-shadow: none;
  border: 1px solid rgba(222, 118, 43, .4);
}

.sn-promo.empty {
  border-color: rgba(255, 107, 107, .35);
}

.sn-promo.low::after,
.sn-promo.empty::after {
  display: none;
}

.sn-promo.low .sn-promo-body b,
.sn-promo.empty .sn-promo-body b {
  font-size: 16px;
}

.sn-promo.low .sn-promo-body small,
.sn-promo.empty .sn-promo-body small {
  color: var(--fg2);
  -webkit-text-fill-color: var(--fg2);
}

.sn-promo.low:hover,
.sn-promo.empty:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}

/* баланс на исходе — тонкое цветное кольцо у аватара, без мигания */
[data-bal=low] .sn-ava {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px rgba(222, 118, 43, .8);
}

[data-bal=empty] .sn-ava {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px rgba(255, 107, 107, .75);
}

.sn-ava {
  overflow: hidden;
}

/* нет своего аватара — первая буква имени на градиенте бренда */
.sn-ava.ini,
.mtop-ava.ini {
  background: radial-gradient(140% 140% at 0% 0%, #A23BF5 0%, #E0457B 55%, #DE762B 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 900px) {
  .nav-scrim {
    display: block !important;
  }
}

/* ══════ из studio.css ══════ */
/* ════════════════════════════════════════════════════════════════════
   VeoSuno — левое меню, список треков, плеер, вложения формы.
   Подключается после site.css, использует его токены (--bg, --card, --line, --grad…).
   ════════════════════════════════════════════════════════════════════ */
body {
  --siteplayer-h: 0px;
  --nav-w: 240px;
  --fw: 480px;
}

body.has-player {
  --siteplayer-h: 76px;
}

body.nav-mini {
  --nav-w: 72px;
}

.app {
  transition: height .22s ease;
}

/* общее: каркас + музыка */
.grow {
  flex: 1;
  min-width: 0;
}

/* общее: каркас + музыка */
.small {
  font-size: 12px;
  color: var(--muted);
}

/* общее: каркас + музыка */
.i {
  flex-shrink: 0;
}

/* общее: каркас + музыка */
.sh-t {
  font-size: 17px;
  font-weight: 700;
}

/* общее: каркас + музыка */
.cf-create.danger {
  background: linear-gradient(135deg, #E5484D, #B4232A);
}

/* общее: каркас + музыка */
.cf-create:disabled {
  opacity: .5;
}

/* общее: каркас + музыка */
.tl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 48px 16px;
  color: var(--muted);
  text-align: center;
}

/* общее: каркас + музыка */
.tl-empty b {
  color: #fff;
  font-size: 15px;
}

/* общее: каркас + музыка */
.tl-empty span {
  font-size: 13px;
  max-width: 320px;
  line-height: 1.4;
}

/* общее: каркас + музыка */
.tg {
  height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--line);
  color: var(--fg2);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

/* общее: каркас + музыка */
.tr-ic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: none;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* общее: каркас + музыка */
.tr-ic:hover,
.tr-ic[aria-expanded=true] {
  background: var(--line);
  color: #fff;
}

/* меню ⋯ */
.vmenu {
  position: fixed;
  z-index: 85;
  min-width: 250px;
  background: #1F1F21;
  border: 1px solid var(--line2);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
  animation: vm-in .14s ease-out;
}

@keyframes vm-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(.98);
  }
}

.vm-i {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--fg2);
  font-size: 13.5px;
  text-align: left;
}

.vm-i:hover,
.vm-i:focus-visible,
.vm-i.open {
  background: var(--line);
  color: #fff;
  outline: none;
}

.vm-i.danger {
  color: var(--bad);
}

.vm-i.danger:hover {
  background: rgba(255, 107, 107, .12);
}

.vm-p {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.vm-sep {
  height: 1px;
  background: var(--line);
  margin: 5px 6px;
}

.vm-sub {
  position: absolute;
  left: calc(100% + 6px);
  top: -6px;
  display: none;
  min-width: 230px;
  background: #1F1F21;
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
}

.vm-sub::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 0;
  bottom: 0;
  width: 10px;
}

.sub-left .vm-sub {
  left: auto;
  right: calc(100% + 6px);
}

.sub-left .vm-sub::before {
  left: auto;
  right: -10px;
}

.has-sub:hover>.vm-sub,
.has-sub.open>.vm-sub,
.has-sub:focus-within>.vm-sub {
  display: block;
}

@media (hover: none),
(max-width: 560px) {
  .has-sub.open>.vm-sub {
    position: static;
    display: block;
    box-shadow: none;
    border: 0;
    padding: 2px 0 0 18px;
    min-width: 0;
    background: none;
  }

  .vm-i.has-sub {
    height: auto;
    min-height: 38px;
    flex-wrap: wrap;
  }

  .has-sub:hover>.vm-sub {
    display: none;
  }

  .has-sub.open>.vm-sub {
    display: block;
    width: 100%;
  }
}

/* ══════════ 4. ПЛЕЕР ══════════ */
.siteplayer {
  display: block;
  padding: 0;
  opacity: 1;
  height: 76px;
  background: rgba(21, 21, 23, .94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform .24s cubic-bezier(.3, .7, .3, 1);
  z-index: 60;
}

.has-player .siteplayer {
  transform: none;
}

.pl-prog {
  position: absolute;
  left: 0;
  right: 0;
  top: -7px;
  height: 14px;
  cursor: pointer;
  touch-action: none;
  outline: none;
}

.pl-prog::before,
.pl-buf,
.pl-fill {
  position: absolute;
  left: 0;
  top: 6px;
  height: 3px;
  border-radius: 2px;
  transition: height .12s, top .12s;
}

.pl-prog::before {
  content: '';
  right: 0;
  background: var(--line);
}

.pl-buf {
  background: var(--line2);
  width: 0;
}

.pl-fill {
  background: var(--grad);
  width: 0;
}

.pl-prog:hover::before,
.pl-prog:hover .pl-buf,
.pl-prog:hover .pl-fill,
.pl-prog.drag::before,
.pl-prog.drag .pl-buf,
.pl-prog.drag .pl-fill,
.pl-prog:focus-visible .pl-fill {
  top: 5px;
  height: 5px;
}

.pl-knob {
  position: absolute;
  right: -7px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(224, 69, 123, .5);
  transform: scale(0);
  transition: transform .12s;
}

.pl-prog:hover .pl-knob,
.pl-prog.drag .pl-knob,
.pl-prog:focus-visible .pl-knob {
  transform: scale(1);
}

.pl-hover {
  position: absolute;
  bottom: 16px;
  transform: translateX(-50%);
  background: #2A2A2D;
  color: #fff;
  font-size: 11.5px;
  padding: 3px 7px;
  border-radius: 6px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.pl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 0 16px calc(env(safe-area-inset-bottom, 0px));
}

.pl-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pl-cov {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 0;
  padding: 0;
  background: center/cover var(--line);
  flex-shrink: 0;
  color: #fff;
  font-weight: 700;
}

.pl-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pl-meta b {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-meta small {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pl-mid {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pl-ic {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: none;
  color: var(--fg2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.pl-ic:hover {
  background: var(--card);
  color: #fff;
}

.pl-mode.on {
  color: var(--accent);
}

.pl-mode.on::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--accent);
}

.pl-one {
  display: none;
  position: absolute;
  top: 6px;
  right: 5px;
  font-size: 9px;
  font-weight: 700;
  min-width: 13px;
  height: 13px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--bg);
  line-height: 13px;
  text-align: center;
}

.pl-mode.one .pl-one {
  display: block;
}

.pl-play {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform .12s;
}

.pl-play:hover {
  transform: scale(1.06);
}

.pl-play .i:last-child,
.is-playing .pl-play .i:first-child {
  display: none;
}

.is-playing .pl-play .i:last-child {
  display: block;
}

.pl-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

#plVol {
  -webkit-appearance: none;
  appearance: none;
  width: 110px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #fff var(--v, 90%), var(--line) var(--v, 90%));
  outline: none;
}

#plVol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
}

#plVol::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

.stoast {
  bottom: calc(var(--siteplayer-h, 0px) + 20px);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  z-index: 130;
}

/* ══════════ 5. ПЛАНШЕТ И ТЕЛЕФОН ══════════ */
@media (max-width: 1279px) {
  body {
    --fw: 420px;
  }
}

@media (max-width: 1100px) {
  .pl-right #plVol {
    width: 80px;
  }
}

@media (max-width: 900px) {
  body {
    --nav-w: 280px;
  }

  body.has-player {
    --siteplayer-h: 68px;
  }

  .mtop {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding: 0 12px;
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(16, 16, 18, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 45;
    border-bottom: 1px solid var(--line);
  }

  .mtop-logo {
    font-size: 20px;
    font-weight: 700;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .mtop-bal {
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 100px;
    background: var(--card);
  }

  .app {
    margin-top: 56px;
    height: calc(100vh - 56px - var(--siteplayer-h, 0px));
    height: calc(100dvh - 56px - var(--siteplayer-h, 0px));
  }

  .form-open {
    overflow: hidden;
  }

  .pl-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 0 8px 0 12px;
  }

  .pl-mid {
    gap: 2px;
  }

  .pl-right,
  #plShuf,
  #plRep,
  #plPrev {
    display: none;
  }

  .pl-cov {
    width: 44px;
    height: 44px;
  }

  .pl-play {
    width: 44px;
    height: 44px;
  }

  .protobar {
    top: auto !important;
    bottom: calc(var(--siteplayer-h, 0px) + 72px) !important;
    left: 8px !important;
    flex-wrap: wrap;
    max-width: calc(100vw - 16px);
  }

  .pb-l {
    display: none;
  }
}

.pb-l {
  font-size: 11px;
  color: var(--muted);
  margin-left: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .vs-bars rect {
    animation: none !important;
  }
}

/* протобар — над списком треков, не закрывает меню и форму */
@media (min-width: 901px) {
  .protobar {
    left: calc(var(--nav-w) + var(--fw) + 12px) !important;
    bottom: calc(var(--siteplayer-h, 0px) + 12px) !important;
    transition: left .25s;
  }
}

@media (min-width: 901px) {
  .protobar {
    flex-wrap: wrap;
    max-width: 330px;
    border-radius: 16px;
    padding: 6px 8px;
    font-size: 11px;
    gap: 4px 6px;
    opacity: .55;
    transition: opacity .2s, left .25s;
  }

  .protobar:hover {
    opacity: 1;
  }

  .protobar .mini-seg button {
    height: 24px;
    padding: 0 8px;
    font-size: 11px;
  }
}

@media (max-width: 900px) {
  .protobar {
    display: none !important;
  }

  .nav-open .protobar {
    display: flex !important;
    z-index: 115;
    top: auto !important;
    bottom: 12px !important;
    left: 12px !important;
    right: 12px;
    max-width: none;
  }
}

@media (min-width: 600px) and (max-width: 900px) {

  #plPrev,
  #plShuf,
  #plRep {
    display: inline-flex;
  }
}

/* ════════════════════════════════════════════════════════════════════
   v15 — логотип, подсветки, пополнение, выбор, публикация, «Возможности», справка, очередь,
   развёрнутый плеер, «Спеть мотив», плашки библиотек, нижняя панель на телефоне
   ════════════════════════════════════════════════════════════════════ */
/* логотип из макета: три полоски пульсируют по очереди */
.vs-bars rect {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: vs-bar 1.8s ease-in-out infinite;
}

.vs-bars .b2 {
  animation-delay: .22s;
}

.vs-bars .b3 {
  animation-delay: .44s;
}

@keyframes vs-bar {

  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(.62);
  }
}

/* кнопки-«таблетки» (Ремикс, Исправить промпт, Повторить…) — градиентная рамка и свечение при наведении */

/* общее: каркас + музыка */
.pill {
  transition: background .18s, border-color .18s, box-shadow .18s, color .18s, transform .12s;
}

/* общее: каркас + музыка */
.pill:hover:not(:disabled) {
  background: #3a3a3e;
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}

/* общее: каркас + музыка */
.pill:active:not(:disabled) {
  transform: scale(.97);
}

/* общее: каркас + музыка */
.pill:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* общее: каркас + музыка */
.tr-ic {
  transition: background .15s, color .15s, transform .15s;
}

/* общее: каркас + музыка */
.tr-ic:hover {
  transform: scale(1.06);
}

/* окна подтверждения: узкие, по центру, компактные кнопки */
.smodal.confirm .ssheet {
  width: 380px;
  padding: 24px 22px 20px;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: cm-in .18s ease-out;
}

@keyframes cm-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }
}

/* общее: каркас + музыка */
.cf-create.sm {
  width: auto;
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pl-like.on {
  color: #E0457B;
}

.pl-like.on svg {
  fill: currentColor;
}

/* плеер: подсказки, лайк, поделиться, очередь */
.pl-tip {
  transform: translate(-50%, -100%);
}

.pl-meta {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.pl-meta:hover b {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .35);
}

.pl-by {
  color: var(--muted);
}

.pl-ic.on.pl-q,
#plQueue.on {
  color: var(--accent);
  background: rgba(222, 118, 43, .12);
}

.pl-ic {
  transition: background .15s, color .15s, transform .15s;
}

.pl-ic:active {
  transform: scale(.92);
}

.pl-like,
.pl-share {
  flex-shrink: 0;
}

.pl-queue {
  position: absolute;
  right: 12px;
  bottom: calc(100% + 10px);
  width: 380px;
  max-width: calc(100vw - 24px);
  max-height: min(560px, 62vh);
  overflow-y: auto;
  padding: 8px;
  border-radius: 20px;
  background: #1C1C1F;
  border: 1px solid var(--line2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  animation: vm-in .16s ease-out;
  overscroll-behavior: contain;
}

.q-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 4px 10px;
}

.q-h b {
  font-size: 16px;
}

.q-g {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 12px 10px 6px;
}

.q-clear {
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  padding: 2px 6px;
  border-radius: 6px;
}

.q-clear:hover {
  background: rgba(222, 118, 43, .12);
}

.q-i {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 12px;
  cursor: pointer;
}

.q-i:hover {
  background: rgba(255, 255, 255, .06);
}

.q-i.now {
  background: rgba(224, 69, 123, .1);
  cursor: default;
}

.q-i.now b {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.q-cov {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: center / cover var(--line);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.q-i b {
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block;
  vertical-align: middle;
}

.q-i .tg {
  vertical-align: middle;
  height: 18px;
  font-size: 10px;
}

.q-i small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.q-i .tr-ic {
  opacity: 0;
  width: 30px;
  height: 30px;
}

.q-i:hover .tr-ic {
  opacity: 1;
}

.q-empty {
  padding: 10px 12px 14px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* телефон: развёрнутый плеер */
.fplayer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 22px calc(18px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #2a1838 0%, #141216 55%, #101012 100%);
  transform: translateY(102%);
  transition: transform .3s cubic-bezier(.3, .7, .3, 1);
  overflow: hidden;
}

.fplayer.open {
  transform: none;
}

.fp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fp-cov {
  align-self: center;
  width: min(78vw, 46vh, 380px);
  aspect-ratio: 1;
  border-radius: 22px;
  background: center / cover var(--line);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 700;
  margin-top: 8px;
}

.fp-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.fp-meta b {
  display: block;
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fp-meta small {
  font-size: 14px;
  color: var(--muted);
}

.fp-prog .pl-prog {
  position: relative;
  top: 0;
  height: 22px;
}

.fp-prog .pl-prog::before,
.fp-prog .pl-buf,
.fp-prog .pl-fill {
  top: 9px;
  height: 4px;
}

.fp-prog .pl-knob {
  transform: scale(1);
}

.fp-times {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.fp-ctl {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fp-ctl .pl-ic {
  width: 52px;
  height: 52px;
  color: #fff;
}

.fp-play {
  width: 72px;
  height: 72px;
}

.fplayer.is-playing .fp-play .i:first-child {
  display: none;
}

.fplayer.is-playing .fp-play .i:last-child {
  display: block;
}

.fplayer:not(.is-playing) .fp-play .i:last-child {
  display: none;
}

.fp-bottom {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.fp-bottom .pill {
  height: 40px;
  padding: 0 16px;
}

.fp-q {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 72%;
  overflow-y: auto;
  padding: 8px 10px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 24px 24px 0 0;
  background: #1C1C1F;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .6);
  animation: fp-q .22s ease-out;
}

@keyframes fp-q {
  from {
    transform: translateY(40%);
    opacity: 0;
  }
}

.fp-q .q-i .tr-ic {
  opacity: 1;
}

/* окно пополнения: сумма, быстрые суммы, сколько придёт сверху и одно предложение «добавьте ещё» */
.smodal.topup .ssheet {
  width: 440px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 20px;
}

.tp-pop {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.tp-head .sh-t {
  font-size: 19px;
}

.tp-amount {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 68px;
  padding: 0 10px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--line2);
  transition: border-color .15s, box-shadow .15s;
}

.tp-in {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: text;
}

.tp-in input {
  text-align: center;
  width: 100%;
}

.tp-step {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: background .15s, border-color .15s, transform .1s;
}

.tp-step:hover {
  background: rgba(255, 255, 255, .1);
  border-color: #6b6b6d;
}

.tp-step:active {
  transform: scale(.92);
}

.tp-amount:focus-within {
  border-color: #E0457B;
  box-shadow: 0 0 0 4px rgba(224, 69, 123, .12);
}

.tp-amount input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.tp-amount span {
  font-size: 28px;
  color: var(--muted);
  font-weight: 600;
}

.tp-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.tp-quick button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: none;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .15s, background .15s;
}

.tp-quick button small {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ok);
}

.tp-quick button i {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
  padding: 1px 7px;
  border-radius: 100px;
  background: var(--grad);
  color: #fff;
}

.tp-quick button:hover {
  border-color: #6b6b6d;
  background: rgba(255, 255, 255, .04);
}

.tp-quick button[aria-pressed=true] {
  border-color: #E0457B;
  background: rgba(224, 69, 123, .08);
}

.tp-line {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tp-line:empty {
  display: none;
}

.tp-gift {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(43, 222, 144, .08);
  border: 1px solid rgba(43, 222, 144, .22);
  font-size: 14px;
  line-height: 1.4;
  color: var(--fg2);
}

.tp-gift b {
  color: var(--ok);
}

.tp-gift-ic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 222, 144, .16);
  color: var(--ok);
}

.tp-up {
  align-self: flex-start;
  border: 0;
  background: none;
  color: var(--fg2);
  font-size: 13px;
  padding: 4px 2px;
  border-bottom: 1px dashed rgba(255, 255, 255, .3);
  border-radius: 0;
}

.tp-up b {
  color: var(--ok);
}

.tp-up:hover {
  color: #fff;
  border-bottom-color: #fff;
}

.tp-pay {
  height: 54px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
}

.tp-pay small {
  font-size: 11.5px;
  font-weight: 400;
  opacity: .9;
}

.tp-foot {
  text-align: center;
}

.tp-proto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 11px;
  color: var(--muted);
}

.tp-proto button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tp-proto button:hover {
  color: #fff;
}

/* ══════════ ОПЛАТА ПО СБП: QR-код в окне пополнения ══════════ */
.tp-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px 0 4px;
  text-align: center;
}

.tp-qr .tp-head {
  width: 100%;
  text-align: left;
}

.tp-qr-img {
  width: 200px;
  height: 200px;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  box-sizing: content-box;
}

.tp-qr-link {
  color: var(--fg2);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, .3);
}

.tp-qr-link:hover {
  color: #fff;
  border-bottom-color: #fff;
}

.tp-qr-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.tp-qr-spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: #fff;
  animation: tp-qr-spin .8s linear infinite;
}

@keyframes tp-qr-spin {
  to {
    transform: rotate(360deg);
  }
}

.tp-qr-wait {
  padding: 36px 0;
  color: var(--muted);
}

.tp-qr .tp-pay {
  width: 100%;
}

@media (max-width: 480px) {
  .tp-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 12px;
  }

  .tp-amount input {
    font-size: 28px;
  }
}

/* ══════════ ТЕЛЕФОН И ПЛАНШЕТ: нижняя панель как в приложениях Suno и Mureka ══════════ */
@media (max-width: 900px) {
  body {
    --mtab-h: calc(62px + env(safe-area-inset-bottom, 0px));
  }

  body.has-player {
    --siteplayer-h: 62px;
  }

  .mtop {
    display: flex !important;
  }

  .mtop-logo {
    display: flex;
    align-items: center;
  }

  .mtop-logo .vs-logo {
    width: 116px;
    height: auto;
  }

  .mtop-bal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 6px 0 14px;
    border: 0;
    border-radius: 100px;
    background: var(--card);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
  }

  .mtop-bal b {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--grad);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }

  .app {
    height: calc(100vh - 56px - var(--siteplayer-h, 0px) - var(--mtab-h));
    height: calc(100dvh - 56px - var(--siteplayer-h, 0px) - var(--mtab-h));
  }

  .mtabs {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 75;
    height: var(--mtab-h);
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    background: rgba(16, 16, 18, .96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
  }

  .mtabs button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 62px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 600;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
  }

  .mtabs button span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 10px;
    letter-spacing: -.02em;
  }

  .mtabs button[aria-current=page] {
    color: #fff;
  }

  .mtabs button[aria-current=page] svg {
    color: var(--accent);
  }

  .mtabs button:active svg {
    transform: scale(.9);
  }

  .mt-create i {
    width: 48px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: radial-gradient(140% 200% at -10% 20%, #DE642B 0%, #E54270 100%);
    box-shadow: 0 6px 18px rgba(229, 66, 112, .4);
    transition: transform .15s;
  }

  .mt-create[aria-current=page] i {
    box-shadow: 0 0 0 3px rgba(229, 66, 112, .3), 0 6px 18px rgba(229, 66, 112, .4);
  }

  .mt-create[aria-current=page] svg {
    color: #fff !important;
  }

  .mt-create:active i {
    transform: scale(.92);
  }

  .siteplayer {
    bottom: var(--mtab-h) !important;
    height: 62px;
    border-top: 0;
    border-radius: 14px 14px 0 0;
    background: rgba(36, 30, 42, .97);
  }

  .siteplayer .pl-prog {
    top: auto;
    bottom: -6px;
    left: 10px;
    right: 10px;
  }

  .siteplayer .pl-like,
  .siteplayer .pl-share,
  .siteplayer .pl-ic.pl-q {
    display: none;
  }

  .pl-mid #plNext {
    display: inline-flex;
  }

  .stoast {
    bottom: calc(var(--siteplayer-h, 0px) + var(--mtab-h) + 14px) !important;
  }

  .form-open .siteplayer {
    transform: translateY(calc(100% + var(--mtab-h)));
  }

  .pl-queue {
    right: 8px;
    left: 8px;
    width: auto;
  }
}

@media (min-width: 600px) and (max-width: 900px) {

  .siteplayer .pl-like,
  .siteplayer .pl-ic.pl-q {
    display: inline-flex;
  }
}

.sel-mode .protobar {
  display: none !important;
}

.smodal.confirm .ssheet:has(.cm-left) {
  width: 440px;
}

.bl-empty {
  color: #ffb0b0;
}

[data-bal=empty] .mtop-bal .balance {
  color: #ffb0b0;
}

/* промострока сверху */
body {
  --strip-h: 0px;
}

body.has-strip {
  --strip-h: 38px;
}

.pstrip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--strip-h);
  z-index: 46;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 44px 0 16px;
  background: linear-gradient(90deg, rgba(162, 59, 245, .18), rgba(224, 69, 123, .14) 50%, rgba(222, 118, 43, .16)), #121014;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  transition: transform .25s, opacity .25s;
}

.pstrip.out {
  transform: translateY(-100%);
  opacity: 0;
}

.ps-t {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  color: #fff;
  text-decoration: none;
  font-size: 13.5px;
}

.ps-t span {
  margin-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(90deg, #fff, #ffd2e3 60%, #ffc48f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ps-sp {
  flex-shrink: 0;
  color: #FFC24B;
  animation: ps-tw 2.4s ease-in-out infinite;
}

.ps-sp:nth-child(2) {
  color: #FF7BAC;
  animation-delay: .3s;
}

.ps-sp:nth-child(3) {
  color: #C88BFF;
  animation-delay: .6s;
}

@keyframes ps-tw {
  50% {
    transform: scale(.65) rotate(20deg);
    opacity: .6;
  }
}

.ps-t:hover span {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .4);
}

.ps-go,
.ps-x {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg2);
  border: 0;
  background: none;
  flex-shrink: 0;
}

.ps-go:hover,
.ps-x:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.ps-x {
  position: absolute;
  right: 8px;
}

body.has-strip .app {
  margin-top: var(--strip-h);
  height: calc(100vh - var(--siteplayer-h, 0px) - var(--strip-h));
}

@media (max-width: 900px) {
  body.has-strip {
    --strip-h: 34px;
  }

  .pstrip {
    top: 56px;
    justify-content: flex-start;
    padding: 0 40px 0 12px;
  }

  .ps-t {
    font-size: 12.5px;
  }

  .ps-t .ps-sp:nth-child(n+2) {
    display: none;
  }

  .ps-go {
    display: none;
  }

  body.has-strip .app {
    margin-top: calc(56px + var(--strip-h));
    height: calc(100dvh - 56px - var(--strip-h) - var(--siteplayer-h, 0px) - var(--mtab-h));
  }
}

@media (prefers-reduced-motion: reduce) {

  .ps-sp,
  [data-bal] .sn-pay {
    animation: none !important;
  }
}

.ps-t span {
  background: none;
  color: #fff;
}

.stoast {
  width: max-content;
}

.tp-in input {
  field-sizing: content;
  width: auto;
  min-width: 3ch;
  max-width: 100%;
  flex: 0 1 auto;
}

/* меню профиля — как на сайте: сверху баланс и яркая «Пополнить» */
.vm-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 2px 2px 6px;
  padding: 12px;
  border-radius: 12px;
  background: #2A2A2D;
}

.vm-card-r {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--fg2);
}

.vm-card-r b {
  color: var(--ok);
  font-size: 14px;
}

.vm-pay {
  width: 100%;
  height: 38px;
}

.vm-card small {
  font-size: 11.5px;
  color: var(--accent);
  text-align: center;
}

[data-bal=empty] .vm-card small {
  color: var(--bad);
}

.vm-info {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--muted);
}

.vmenu:has(.vm-card) {
  min-width: 270px;
}

/* телефон и планшет: в мини-плеере есть ⋯ — меню трека */
@media (max-width: 900px) {
  .pl-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .pl-right {
    display: flex !important;
    gap: 0;
  }

  .pl-right> :not(#plMore) {
    display: none !important;
  }
}

/* меню трека: цена видна при наведении */
.vm-p.hov {
  opacity: 0;
  transition: opacity .15s;
}

.vm-i:hover>.vm-p.hov,
.vm-i:focus-visible>.vm-p.hov {
  opacity: 1;
}

@media (hover: none) {
  .vm-p.hov {
    opacity: 1;
  }
}

/* видно, как меняется баланс */
.balance-line,
.mtop-bal {
  position: relative;
}

.bal-fx {
  position: absolute;
  left: 0;
  top: -2px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  animation: bal-fx 1.6s ease-out forwards;
}

.bal-fx.minus {
  color: #ff8a8a;
}

.bal-fx.plus {
  color: var(--ok);
}

.mtop-bal .bal-fx {
  left: 12px;
  top: 8px;
}

@keyframes bal-fx {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }

  15% {
    opacity: 1;
    transform: translateY(-8px);
  }

  100% {
    opacity: 0;
    transform: translateY(-26px);
  }
}

.mtabs .nb {
  position: absolute;
  margin: 0;
  transform: translate(14px, -16px);
}

.mtabs button {
  position: relative;
}

.vm-sub {
  min-width: 270px;
}

.vm-sub .vm-i .grow,
.vmenu .vm-i .grow {
  white-space: nowrap;
}

@media (min-width: 901px) {
  .onb-on .protobar {
    left: auto !important;
    right: 12px;
  }
}

/* общее: каркас + музыка */
body[data-drag=ew],
body[data-drag=ew] * {
  cursor: ew-resize !important;
  user-select: none;
}

/* общее: каркас + музыка */
body[data-drag=grabbing],
body[data-drag=grabbing] * {
  cursor: grabbing !important;
  user-select: none;
}

/* окно пополнения: экран «готово» */
.tp-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 10px 0 4px;
}

.tp-done-ic {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ok);
  background: rgba(43, 222, 144, .12);
  box-shadow: 0 0 0 8px rgba(43, 222, 144, .05);
  animation: cf-pop .45s cubic-bezier(.2, 1.6, .4, 1);
}

.tp-done-t {
  font-size: 19px;
}

.tp-done-sum {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tp-done-sum>span:first-child {
  font-size: 32px;
  font-weight: 700;
}

.tp-done-b {
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(43, 222, 144, .12);
  color: var(--ok);
  font-weight: 700;
  font-size: 14px;
  animation: cf-pop .5s .2s cubic-bezier(.2, 1.6, .4, 1) both;
}

.tp-done .tp-pay {
  width: 100%;
  margin-top: 6px;
}

/* ══════════ ГОСТЬ: класс vs-guest на <html> (ставит h1.html по window.VS_USER) ══════════
   Вместо профиля, баланса и карточки пополнения — вход: блок в меню (модуль authorization) и «Войти» в верхней полосе телефона */

.mtop-login {
  display: none;
}

/* блок входа (модуль authorization) — сразу под логотипом, над разделами */
.sidenav>.sn-top {
  order: -2;
}

.sidenav>.vs-auth-module {
  order: -1;
}

/* «Войти» на месте профиля: та же карточка, что у профиля, без градиента — главный акцент гостя в блоке входа под логотипом */
.sn-login {
  display: none;
}

.vs-guest .sn-login {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 10px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .1s;
}

.vs-guest .sn-login:hover {
  border-color: #5a5a5c;
  background: #1c1c1f;
}

.vs-guest .sn-login:active {
  transform: scale(.98);
}

.sn-login-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line2);
}

.sn-login .sn-login-ic {
  color: #fff;
}

/* у span в меню свой серый цвет (.nav span) — иконка сливалась с кругом */
.sn-login .sn-pdata b {
  color: #fff;
}

.sn-login .sn-pdata small {
  color: var(--muted);
}

@media (min-width: 901px) {

  .nav-mini .sn-login .sn-pdata,
  .nav-mini .sn-login .sn-chev {
    display: none;
  }

  .vs-guest .nav-mini .sn-login {
    width: 44px;
    height: 44px;
    padding: 3px;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
    align-self: center;
  }
}

@media (max-width: 900px) {
  .vs-guest .mtop-login {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 18px;
    border: 0;
    border-radius: 100px;
    background: radial-gradient(140% 200% at -10% 20%, #DE642B 0%, #E54270 100%);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  .vs-guest .mtop-login:active {
    transform: scale(.96);
  }
}

/* загрузка страницы: без анимаций, пока каркас не готов (класс vs-preload снимает h1.js) */
.vs-preload *,
.vs-preload *::before,
.vs-preload *::after {
  transition: none !important;
}

/* ══════════ ПЛАВНЫЙ ВХОД И ВЫХОД ══════════
   1) браузер плавно меняет страницу при переходах внутри сайта (Chrome, Edge, Safari 18+, Яндекс Браузер; где не умеет — обычный переход) */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .25s;
}

/* 2) шторка. vs-loading — страница собирается: шторка проявляется, только если сборка дольше ~0,35 с.
      vs-curtain-on — шторка видна сразу (вход, выход). Знак — полоски из логотипа с той же анимацией (.vs-bars) */
.vs-curtain {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s .3s;
}

.vs-loading .vs-curtain {
  visibility: visible;
  animation: vs-curtain-in .25s ease .35s both;
}

.vs-curtain-on .vs-curtain {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: none;
  transition: opacity .2s ease;
}

@keyframes vs-curtain-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  .vs-curtain,
  .vs-curtain-on .vs-curtain {
    transition: none;
  }
}