/* ============================================================
   LUVI — ТОКЕНЫ К-01
   «Архитектура интерфейса Luvi», версия 2 от 07.09.2026.
   Единственный источник значений: цвет, шкала отступов, радиусы,
   тень, z-index, шрифты, кривые и длительности.
   ============================================================ */

:root,
html[data-theme="dark"] {
  --bg: #0C0B10;
  --surface-1: #15141B;
  --surface-2: #1C1B23;
  --surface-3: #24232C;
  --surface-hover: #2A2933;

  --text-1: #F7F5F1;
  --text-2: #CFCCD6;
  --text-3: #A09CAA;
  --text-ph: #6E6A79;   /* подсказки в полях — темнее остального текста */

  --border-1: rgba(255, 255, 255, .10);
  --border-2: rgba(255, 255, 255, .06);

  --accent: #FD429C;
  --accent-hover: #E0388C;
  --accent-soft: rgba(253, 66, 156, .14);
  --grad: linear-gradient(115deg, #FF8A18 0%, #FB4595 62%, #E83B8A 100%);

  --success: #2FBE7A;
  --warning: #F5A65C;
  --error: #FF6B5E;

  --s1: 4px;  --s2: 8px;   --s3: 12px; --s4: 16px;
  /* --s5 и --s7 в шкале отсутствовали, хотя к ним обращались в
     четырнадцати местах: те отступы молча не работали (браузер
     отбрасывает объявление с неизвестной переменной целиком). */
  --s5: 20px; --s6: 24px;  --s7: 28px; --s8: 32px;
  --s12: 48px; --s16: 64px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 999px;
  --shadow-overlay: 0 16px 40px rgba(0, 0, 0, .45);

  --font-ui: "Mulish", -apple-system, "Segoe UI", sans-serif;
  --font-head: "Onest", "Mulish", sans-serif;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --t-press: 120ms; --t-hover: 160ms; --t-pop: 160ms; --t-drawer: 240ms;

  --z-dropdown: 40; --z-sticky: 50; --z-player: 60; --z-drawer: 80;
  --z-backdrop: 90; --z-modal: 100; --z-toast: 110; --z-tooltip: 120;

  /* высота плеера: пока он не играет, места под него не занимаем */
  --player-h: 0px;
  /* одно мягкое кольцо вместо двойного контура вокруг элемента */
  --ring: 0 0 0 3px rgba(253, 66, 156, .22);
}
:root[data-player="on"] { --player-h: 72px; }
@media (max-width: 900px) { :root[data-player="on"] { --player-h: 64px; } }
/* в снимках прода сброс приходил из его собственных стилей —
   здесь приложение стоит само по себе, поэтому база своя */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font: 400 14px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
details summary { cursor: pointer; }
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.tabular { font-variant-numeric: tabular-nums; }
/* ===== КОМПОНЕНТЫ К-02…К-13 И НАВИГАЦИЯ ===== */
/* ------------------------------------------------------------
   К-02. КАРКАС СТРАНИЦЫ
   ------------------------------------------------------------ */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: var(--vh); }
.sidebar {
  position: sticky;
  top: 0;
  height: var(--vh);
  background: var(--surface-1);
  border-right: 1px solid var(--border-2);
  display: flex;
  flex-direction: column;
}
.content {
  /* На широком мониторе узкая полоса посередине смотрится бедно, поэтому
     занимаем почти всю ширину. Потолок подняли с 1600 до 2100 (решение
     владельца 21.09.2026): на мониторе 2560 по краям оставалось больше
     тысячи точек пустоты. Совсем снимать потолок не стали — строка
     длиной во весь такой экран читается хуже, а не лучше.

     Лишнюю ширину забирает содержимое, а не поля: полки в ленте и
     сетки, набранные через repeat(auto-fill, …), просто кладут в ряд
     больше карточек. Узкими намеренно остаются места, где читают текст:
     документы, вопросы на тарифах и чат помощника. */
  /* Потолка ширины нет. Он был 1600, потом 2100, и всё равно на
     мониторе шире оставлял пустую полосу справа. Раз содержимое прижато
     к меню, ограничивать его незачем: колонки внутри и так знают свою
     ширину — рабочая область не шире 900, карточка трека в ленте
     фиксирована, сетки просто кладут в ряд больше карточек. Узкими
     остаются места, где читают текст: документы, вопросы на тарифах,
     переписка с помощником — у них свои ограничения. */
  /* Слева отступ такой же, как зазор между колонками студии: 24 по
     краю формы, 17 разделитель, 24 по краю «Моих треков» — всего 65,
     берём ближайшую ступень шкалы, 64. Тогда меню, рабочая область и
     «Мои треки» стоят через один и тот же шаг.

     Прижато влево, а не по центру: на мониторе шире 2100 точек
     содержимое отъезжало от меню и между ними зияла дыра. Свободное
     место теперь уходит вправо, к краю экрана. Решение владельца
     22.09.2026. */
  padding: var(--s8) var(--s8) calc(var(--s8) + var(--player-h)) var(--s16);
  margin: 0 auto 0 0;
  width: 100%;
}
.page-head {
  width: 100%;
  /* в библиотеке заголовок лежит внутри flex-строки прода: без этого
     шапка сжимается по содержимому и действия липнут к подзаголовку */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s6);
}
.page-head h1 { font: 800 28px/1.15 var(--font-head); letter-spacing: -.02em; margin: 0; }
.page-head p { margin: 4px 0 0; color: var(--text-2); }
.page-head__actions { display: flex; align-items: center; gap: var(--s2); flex: none; }
/* Шапка без заголовка: остаются только действия справа, и отступ ниже
   меньше — иначе на месте снятого заголовка зияет пустота. */
.page-head--bare { justify-content: flex-end; margin-bottom: var(--s2); }
@media (max-width: 900px) {
  /* `1fr` берёт минимумом ширину содержимого, поэтому широкая таблица
     раздувала колонку до 450 px при экране 390 и уводила вбок всю
     страницу. `minmax(0, 1fr)` разрешает колонке быть уже содержимого,
     и таблица крутится внутри своей обёртки, как и задумано. */
  .app { grid-template-columns: minmax(0, 1fr); }
  /* На телефоне сайдбар не исчезает, а уезжает за левый край и
     выходит по бургеру в таб-баре. Второй копии навигации нет
     намеренно: две копии разъехались бы на первой же правке. */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(300px, 86vw);
    height: var(--vh);
    /* выше подложки: иначе она затемняет само меню */
    z-index: var(--z-backdrop);
    border-right: 1px solid var(--border-1);
    transform: translateX(-100%);
    transition: transform var(--t-drawer) var(--ease-drawer);
    visibility: hidden;
    /* внизу меню строка аккаунта: без этого отступа её закрывал таб-бар,
       и «Кабинет» становился недостижим вовсе */
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  body[data-menu="1"] .sidebar { transform: none; visibility: visible; }
  /* Пока меню открыто, весь `.app` поднимается над плеером, кнопкой
     поддержки и обучением: иначе они рисуются поверх меню, потому что
     лежат в body, а у `.app` свой слой. Таб-бар поднимаем следом, чтобы
     бургером можно было закрыть меню обратно. */
  body[data-menu="1"] .app { z-index: var(--z-toast); }
  body[data-menu="1"] .tabbar { z-index: calc(var(--z-toast) + 1); }
  .nav-back {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-drawer) var(--ease-drawer), visibility var(--t-drawer);
  }
  body[data-menu="1"] .nav-back { opacity: 1; visibility: visible; }
  /* +72 снизу — запас под круглую кнопку поддержки: без него она
     закрывала последнюю строку и кнопки внизу страниц (аудит 19.10.2026). */
  .content {
    padding: var(--s4) var(--s4) calc(var(--s4) + 72px + 64px + var(--player-h) + env(safe-area-inset-bottom, 0px));
  }
  .page-head h1 { font-size: 24px; }
}
/* ------------------------------------------------------------
   К-03. ТИПОГРАФИКА
   ------------------------------------------------------------ */
.h1 { font: 800 28px/1.15 var(--font-head); letter-spacing: -.02em; text-wrap: balance; }
.h2 { font: 700 18px/1.25 var(--font-head); letter-spacing: -.01em; }
.title { font: 700 16px/1.3 var(--font-ui); }
.body { font: 400 14px/1.5 var(--font-ui); color: var(--text-2); text-wrap: pretty; }
.label { font: 600 12px/1.35 var(--font-ui); color: var(--text-3); }
.num { font: 800 28px/1.1 var(--font-head); font-variant-numeric: tabular-nums; }
.kicker {
  font: 700 11px/1 var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
/* ------------------------------------------------------------
   К-04. КНОПКИ
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font: 600 14px/1 var(--font-ui);
  color: var(--text-1);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out),
              background var(--t-hover), border-color var(--t-hover), color var(--t-hover);
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--grad); color: #fff; }
.btn--secondary { background: var(--surface-2); border-color: var(--border-1); }
.btn--ghost { background: transparent; color: var(--text-2); }
.btn--danger { background: transparent; color: var(--error); }
.btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn--icon {
  width: 36px; height: 36px; padding: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-2);
}
.btn--icon:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { filter: brightness(1.06); }
  .btn--secondary:hover { background: var(--surface-3); }
  .btn--ghost:hover { background: var(--surface-2); color: var(--text-1); }
  .btn--danger:hover { background: rgba(255, 107, 94, .12); }
  .btn--icon:hover { background: var(--surface-2); color: var(--text-1); }
}
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--surface-2);
  background-image: none;
  border-color: var(--border-1);
  color: var(--text-3);
  cursor: not-allowed;
  transform: none;
  filter: none;
}
.btn[data-loading="1"] { pointer-events: none; color: transparent; position: relative; }
.btn[data-loading="1"]::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-why {
  display: block;
  margin-top: 6px;
  font: 400 12px/1.35 var(--font-ui);
  color: var(--text-3);
  text-align: center;
}
@media (max-width: 900px) {
  .btn { height: 48px; }
  .btn--icon { width: 44px; height: 44px; }
  .btn--sm { height: 40px; }
}
/* состояния для витрины: показать наведение и нажатие без мыши */
.is-hover.btn--primary { filter: brightness(1.06); }
.is-hover.btn--secondary { background: var(--surface-3); }
.is-hover.btn--ghost { background: var(--surface-2); color: var(--text-1); }
.is-hover.btn--danger { background: rgba(255, 107, 94, .12); }
.is-hover.btn--icon { background: var(--surface-2); color: var(--text-1); }
.is-press { transform: scale(.97); }
.is-press.btn--icon { transform: scale(.94); }
.is-focus { box-shadow: var(--ring); }
/* ------------------------------------------------------------
   К-05. ЧИПЫ
   ------------------------------------------------------------ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  font: 600 13px/1 var(--font-ui);
  cursor: pointer;
  transition: background var(--t-hover), border-color var(--t-hover),
              color var(--t-hover), transform var(--t-press);
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover { border-color: var(--border-1); color: var(--text-1); }
}
.chip:active, .chip.is-press { transform: scale(.97); }
.chip.is-hover { border-color: var(--border-1); color: var(--text-1); }
.chip[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.chip:disabled { opacity: .5; cursor: not-allowed; }
.chip .n { color: var(--text-3); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .n { color: var(--accent); }
.chip--add { background: transparent; border-style: dashed; color: var(--text-3); }
.tag {
  display: inline-block;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-2);
  font: 600 12px/24px var(--font-ui);
}
.tag--genre { background: var(--accent-soft); color: var(--accent); }
/* На шторке карточки и в выбранной строке ленты фон тот же surface-2, и
   плашка жанра пропадала: «Синтвейв» висел словом с непонятным отступом.
   Там плашка на ступень светлее (проверка скиллом interface-design, 21.10.2026). */
.fcard .tag, .fd-col .track.is-sel .tag { background: var(--surface-3); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { height: 36px; flex: none; }
}
/* ------------------------------------------------------------
   К-06. ПОЛЕ ВВОДА
   ------------------------------------------------------------ */
.field { display: block; }
/* поля друг под другом не слипаются: в окне возврата «Какой платёж» и
   «Причина» стояли вплотную (аудит 19.10.2026) */
.drawer__body > .field + .field { margin-top: var(--s4); }
.field__label {
  display: block;
  margin-bottom: 6px;
  font: 600 12px/1.35 var(--font-ui);
  color: var(--text-3);
}
.field__input,
.field textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  color: var(--text-1);
  font: 400 15px/1.4 var(--font-ui);
  transition: border-color var(--t-hover);
}
.field textarea { height: auto; min-height: 160px; padding: 12px 14px; resize: vertical; }
.field__input::placeholder,
.field textarea::placeholder { color: var(--text-ph); font-size: 14px; }
.field__input:focus,
.field textarea:focus { border-color: var(--accent); outline: none; box-shadow: var(--ring); }
/* у поля своё кольцо — второе от :focus-visible было бы лишним */
.field__input:focus-visible,
.field textarea:focus-visible { box-shadow: var(--ring); }
.field__help,
.field__hint,
.field__error { display: block; margin-top: 6px; font: 400 12px/1.4 var(--font-ui); color: var(--text-3); }
.field__error { color: var(--error); }
.field[data-invalid="1"] .field__input,
.field[data-invalid="1"] textarea { border-color: var(--error); }
.field[data-invalid="1"] .field__help { display: none; }
.field.is-focus .field__input { border-color: var(--accent); box-shadow: var(--ring); }
@media (max-width: 900px) { .field__input { height: 48px; } }
/* ------------------------------------------------------------
   К-07. СТРОКА ТРЕКА
   ------------------------------------------------------------ */
.track {
  display: grid;
  grid-template-columns: 20px 56px minmax(0, 1fr) auto 48px auto;
  align-items: center;
  gap: 12px;
  height: 72px;
  padding: 0 16px;
  border-radius: var(--r-md);
  transition: background var(--t-hover);
}
.track[data-playing="1"], .track.is-hover { background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) { .track:hover { background: var(--surface-2); } }
.track__check { opacity: 0; transition: opacity var(--t-hover); }
.track:hover .track__check,
.track.is-hover .track__check,
.track__check:has(:checked) { opacity: 1; }
.track__cover {
  position: relative;
  width: 56px; height: 56px;
  border: 0; padding: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--grad);
  cursor: pointer;
}
.track__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.track__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  opacity: 0;
  transform: scale(.9);
  transition: opacity var(--t-hover), transform var(--t-hover);
}
.track:hover .track__play,
.track.is-hover .track__play,
.track[data-playing="1"] .track__play { opacity: 1; transform: scale(1); }
.track__title {
  font: 700 16px/1.3 var(--font-ui);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Многоточие ставится на самом тексте, а не на флекс-контейнере:
   рядом с названием живут плашка «Новое» и эквалайзер, и обрезать
   надо только название, иначе оно рубится на полубукве. */
.track__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track__v { flex: none; font: 400 12px/1 var(--font-ui); color: var(--text-3); white-space: nowrap; }
.track__main { min-width: 0; }
/* Плашка модели и описание нужны только в просторном виде: в строке
   высотой 72px им негде стоять. Рисуются всегда, показываются классом
   на списке — так переключение вида не пересобирает строки. */
.tag--model, .track__desc { display: none; }
.track[data-playing="1"] .track__title { color: var(--accent); }
.track__sub { font: 400 12px/1.35 var(--font-ui); color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track__tags { display: flex; gap: 6px; }
.track__time { font: 600 13px/1 var(--font-ui); color: var(--text-3); text-align: right; }
.track__actions { display: flex; gap: 4px; opacity: 0; transition: opacity var(--t-hover); }
.track:hover .track__actions,
.track.is-hover .track__actions,
.track:focus-within .track__actions { opacity: 1; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.eq i { width: 2px; background: var(--accent); border-radius: 1px; animation: eq .9s ease-in-out infinite; }
.eq i:nth-child(1) { height: 6px; }
.eq i:nth-child(2) { height: 12px; animation-delay: .16s; }
.eq i:nth-child(3) { height: 8px; animation-delay: .32s; }
@keyframes eq { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
@media (hover: none) {
  .track__actions { opacity: 1; }
  .track__actions .btn--icon:not(:last-child) { display: none; }
  .track__play { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .track { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; padding: 0 8px; }
  /* Прятали саму длительность, а её обёртка оставалась ячейкой и
     занимала третью колонку: «…» уезжало на вторую строку и висело
     под списком сиротой. Прячем обёртку целиком. */
  .track__check, .track__tags, .track__time-wrap { display: none; }
}
/* ------------------------------------------------------------
   К-08. МЕНЮ «…»
   ------------------------------------------------------------ */
.menu {
  position: fixed;
  z-index: var(--z-dropdown);
  min-width: 220px;
  /* без потолка длинная сноска растягивала меню на пол-экрана, и
     правое выравнивание выносило его за левый край */
  max-width: 300px;
  padding: 6px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-overlay);
  transform-origin: var(--origin, top left);
  animation: pop var(--t-pop) var(--ease-out);
}
@keyframes pop { from { opacity: 0; transform: scale(.96); } }
.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-2);
  font: 600 14px/1 var(--font-ui);
  text-align: left;
  cursor: pointer;
}
.menu__item:hover, .menu__item.is-hover { background: var(--surface-hover); color: var(--text-1); }
.menu__item--danger { color: var(--error); }
.menu hr { border: 0; border-top: 1px solid var(--border-1); margin: 6px 4px; }
.menu--static { position: static; animation: none; }
/* ------------------------------------------------------------
   К-09. ЯЩИК И ПОДЛОЖКА
   ------------------------------------------------------------ */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: rgba(8, 7, 12, .48);
  animation: fade var(--t-drawer);
}
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(480px, 100%);
  /* Выше собственной подложки. Стояло `--z-drawer` (80) против её
     `--z-backdrop` (90), и подложка накрывала шторку целиком: она
     выглядела погашенной и не нажималась ни в одном месте. Проверки
     этого не видели, потому что дёргали `.click()` по самому элементу,
     а он проходит мимо перекрытий. */
  z-index: calc(var(--z-backdrop) + 1);
  background: var(--surface-1);
  border-left: 1px solid var(--border-1);
  display: flex;
  flex-direction: column;
  animation: slide-in var(--t-drawer) var(--ease-drawer);
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-2);
}
.drawer__body { flex: 1; overflow: auto; padding: 24px; }
.drawer__foot { padding: 16px 24px; border-top: 1px solid var(--border-2); }
@keyframes slide-in { from { transform: translateX(100%); } }
@keyframes fade { from { opacity: 0; } }
@media (max-width: 900px) {
  .drawer {
    top: auto; left: 0;
    width: 100%;
    height: calc(var(--vh) * .92);
    border-left: 0;
    border-top: 1px solid var(--border-1);
    border-radius: 16px 16px 0 0;
    animation-name: slide-up;
  }
  .drawer::before {
    content: "";
    display: block;
    width: 36px; height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: var(--border-1);
  }
  @keyframes slide-up { from { transform: translateY(100%); } }
}
/* витрина: показать ящик в потоке страницы */
.drawer--static { position: static; width: 100%; height: auto; animation: none; border: 1px solid var(--border-1); border-radius: var(--r-lg); }
.drawer--static::before { display: none; }
/* ------------------------------------------------------------
   К-10. ТОСТ, СКЕЛЕТОН, ПУСТОЕ СОСТОЯНИЕ
   ------------------------------------------------------------ */
.toast {
  /* по центру экрана, в виде окна вопроса (.confirm), владелец 04.11.2026 */
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-toast);
  box-sizing: border-box;
  width: max-content;
  min-width: min(300px, calc(100vw - 32px));
  max-width: min(420px, calc(100vw - 32px));
  padding: 22px 24px;
  border-radius: var(--r-lg);
  background: var(--surface-3);
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-overlay);
  color: var(--text-1);
  text-align: center;
  animation: toast-in 220ms var(--ease-out);
}
/* стеклянная картинка по смыслу (ui.js КАРТИНКИ_УВЕДОМЛЕНИЙ) — сверху по центру */
.toast__art { display: block; width: 72px; height: 72px; margin: 0 auto 12px; object-fit: contain; }
.toast__art--grust { animation: toast-grust 3.2s ease-in-out infinite; }
@keyframes toast-grust { 50% { transform: translateY(-3px); } }
.toast__title { margin: 0; font: 700 18px/1.3 var(--font-head); overflow-wrap: anywhere; }
.toast__text { margin: 6px 0 0; font: 500 16px/1.5 var(--font-ui); color: var(--text-2); overflow-wrap: anywhere; }
.toast__text:first-child { margin-top: 0; color: var(--text-1); }
.toast__acts { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.toast__acts .btn:focus-visible { outline: none; box-shadow: var(--ring); }
/* одна строка без кнопки («Скопировано»): компактно и по центру */
.toast--short { min-width: 0; padding: 16px 24px; text-align: center; }
/* короткое с картинкой — в строку: значок слева, текст справа */
.toast--short.toast--art { display: flex; align-items: center; gap: 12px; padding: 12px 22px 12px 14px; text-align: left; }
.toast--short .toast__art { width: 44px; height: 44px; margin: 0; flex: none; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
@media (min-width: 901px) {
  .toast { max-width: min(480px, calc(100vw - 48px)); padding: 26px 28px; }
  .toast--short { padding: 18px 28px; }
  .toast--short.toast--art { padding: 14px 26px 14px 16px; }
  .toast__art { width: 84px; height: 84px; margin-bottom: 14px; }
  .toast--short .toast__art { width: 48px; height: 48px; margin: 0; }
  .toast__title { font-size: 20px; }
  .toast__text { font-size: 17px; }
}
@media (max-width: 600px) { .toast { padding: 20px; } .toast--short { padding: 16px 20px; } .toast--short.toast--art { padding: 12px 20px 12px 14px; } }
/* Удаление на телефоне — полосой внизу, над меню и плеером (владелец
   06.11.2026). Точный отступ снизу ставит ui.js отступСнизу() по замеру
   полос, здесь — запас на случай, если замер не удался. */
.toast.toast--niz {
  top: auto;
  left: 16px;
  right: 16px;
  bottom: calc(64px + var(--player-h) + env(safe-area-inset-bottom, 0px) + 12px);
  transform: none;
  width: auto;
  min-width: 0;
  max-width: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 12px;
  text-align: left;
  animation: toast-niz 200ms var(--ease-out);
}
.toast--niz .toast__art { width: 40px; height: 40px; margin: 0; flex: none; }
.toast--niz .toast__title { flex: 1; min-width: 0; font-size: 16px; }
.toast--niz .toast__acts { flex: none; margin: 0; }
@keyframes toast-niz { from { opacity: 0; transform: translateY(12px); } }
/* Вид Б (владелец 06.11.2026: «отступы по бокам слишком большие»): как
   окно «Кавер временно не работает». Плашка уже прежней и без пустоты по
   бокам, значок сверху, «Понятно» и действие одной ширины. Одинаково на
   телефоне и компьютере. Короткая плашка и полоса удаления — свои. */
.toast:not(.toast--short):not(.toast--niz) { width: min(340px, calc(100vw - 32px)); min-width: 0; max-width: none; padding: 20px 20px 16px; }
.toast:not(.toast--short):not(.toast--niz) .toast__art { width: 64px; height: 64px; margin: 0 auto 10px; }
.toast:not(.toast--short):not(.toast--niz) .toast__title { font-size: 18px; }
.toast:not(.toast--short):not(.toast--niz) .toast__text { font-size: 15px; }
.toast:not(.toast--niz) .toast__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.toast:not(.toast--niz) .toast__acts > :only-child { grid-column: 1 / -1; }
.toast:not(.toast--niz) .toast__acts .btn { width: 100%; height: 40px; }
@media (prefers-reduced-motion: reduce) { .toast, .toast.toast--niz, .toast__art--grust { animation: none; } }
.toast--static { position: static; transform: none; animation: none; display: inline-block; }
.skeleton { background: var(--surface-2); border-radius: var(--r-sm); position: relative; overflow: hidden; }
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent);
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.track--skeleton .track__cover { background: var(--surface-2); }
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 24px; text-align: center; }
.empty h3 { font: 700 18px/1.25 var(--font-head); margin: 0; }
.empty p {
  max-width: 46ch; margin: 0; color: var(--text-2);
  /* Сюда подставляется то, что человек искал. Длинное слово без пробелов
     растягивало страницу до пяти тысяч точек вместо тысячи с лишним
     (нашёл обход 21.09.2026), поэтому переносим его по буквам. */
  overflow-wrap: anywhere;
}
/* ------------------------------------------------------------
   К-11. СЕГМЕНТ-КОНТРОЛ
   ------------------------------------------------------------ */
.seg {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
}
.seg__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-full);
  background: none;
  color: var(--text-2);
  font: 600 14px/1 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
.seg__item[aria-selected="true"] { background: var(--surface-3); color: var(--text-1); }
.seg__item:active { transform: scale(.97); }
@media (max-width: 900px) {
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg__item { flex: none; }
}
/* ------------------------------------------------------------
   К-12. ДИАЛОГ ОПАСНОГО ДЕЙСТВИЯ
   ------------------------------------------------------------ */
.confirm {
  width: 420px;
  max-width: calc(100% - 32px);
  padding: 24px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  background: var(--surface-3);
  color: var(--text-1);
  box-shadow: var(--shadow-overlay);
}
.confirm::backdrop { background: rgba(8, 7, 12, .6); }
.confirm h3 { font: 700 18px/1.25 var(--font-head); margin: 0 0 8px; }
.confirm p { color: var(--text-2); margin: 0 0 20px; }
.confirm__actions { display: flex; justify-content: flex-end; gap: 8px; }
/* фокус одним контуром: обводка и кольцо вместе давали двойной (аудит 19.10.2026) */
.confirm__actions .btn:focus-visible { outline: none; box-shadow: var(--ring); }
/* ------------------------------------------------------------
   NAV-01…03. САЙДБАР 240
   ------------------------------------------------------------ */
.sidebar__head {
  display: flex;
  align-items: center;
  height: 64px;
  padding-right: 8px;
  flex: none;
}
.sidebar__logo {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 20px;
  flex: 1 1 auto;
  min-width: 0;
}
.sidebar__logo img { height: 28px; width: auto; display: block; }
.sidebar__logo .sidebar__mark { display: none; }
/* Просто треугольник: без рамки, без подложки и без кольца фокуса.
   Кнопка служебная, ей незачем спорить с логотипом. */
.sidebar__fold {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-4, var(--text-3));
  opacity: .55;
  transition: opacity var(--t-hover);
}
/* та же «птичка», что сворачивает текст песни и стиль, и та же, что
   стоит у «Админа»: повёрнута влево — меню уедет в эту сторону */
.sidebar__fold svg { transform: rotate(90deg); }
.sidebar__fold:focus-visible { box-shadow: none; outline: none; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .sidebar__fold:hover { opacity: 1; }
}
.sidebar section { display: block; }
.sidebar .kicker { display: block; padding: 24px 20px 8px; }
.sidebar section:first-child .kicker { padding-top: 8px; }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  margin: 0 8px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font: 600 14px/1 var(--font-ui);
  text-decoration: none;
  transition: background var(--t-hover), color var(--t-hover);
}
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover { background: var(--surface-2); color: var(--text-1); }
}
.nav-item[aria-current="page"] { background: var(--surface-2); color: var(--accent); }
.nav-item svg { flex: none; }
.nav-item .tag { margin-left: auto; background: none; color: var(--text-3); padding: 0; }
/* NAV-02: аккаунт внизу */
.account {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-2);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-hover);
}
@media (hover: hover) and (pointer: fine) { .account:hover { background: var(--surface-2); } }
.account__ava {
  width: 32px; height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-1);
  font: 700 13px/1 var(--font-ui);
}
.account__body { min-width: 0; flex: 1; }
.account__name {
  display: block;
  font: 600 14px/1.2 var(--font-ui);
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account__status { display: block; margin-top: var(--s1); font: 400 12px/1.3 var(--font-ui); color: var(--text-3); }
.account__status b { color: var(--text-1); font-weight: 700; }
.account__status b.is-low { color: var(--warning); }
.account__status b.is-zero { color: var(--error); }
.sidebar__topup { display: block; padding: 0 16px 12px; }
.sidebar__topup .btn { width: 100%; }
/* В развёрнутом меню хватает подписи: значок валюты рядом со словом
   «Пополнить» — лишний шум. */
.sidebar__topup-i { display: none; place-items: center; }
/* ------------------------------------------------------------
   NAV-04. ТАБ-БАР
   ------------------------------------------------------------ */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: var(--z-sticky);
  background: var(--surface-1);
  border-top: 1px solid var(--border-2);
  display: grid;
  /* число мест задаёт TABS в app.js (с 30.10.2026 до семи) */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
@media (min-width: 901px) { .tabbar { display: none; } }
.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  color: var(--text-3);
  text-decoration: none;
  font: 600 11px/1 var(--font-ui);
  /* бургер это кнопка, а не ссылка: снимаем с неё вид кнопки браузера,
     иначе она стоит в баре серой плашкой */
  background: none;
  border: 0;
  padding: 0;
}
.tabbar__menu[aria-expanded="true"] { color: var(--accent); }
.tabbar__item[aria-current="page"] { color: var(--accent); }
.tabbar__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar__create i {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: #fff;
  /* приподнята на 8 px: translateY двигает вид, margin — раскладку,
     иначе подпись «Создать» не помещается в 64 px бара */
  transform: translateY(-8px);
  margin-bottom: -8px;
  transition: transform var(--t-press) var(--ease-out);
}
.tabbar__create:active i { transform: translateY(-8px) scale(.94); }
.page-head__actions .dot {
  position: absolute;
  top: 2px; right: 2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.support-btn { position: relative; }
/* ===== ПЛЕЕР PL-01…PL-12 ===== */
/* ------------------------------------------------------------
   4.1 МИНИ-ПЛЕЕР
   ------------------------------------------------------------ */
.player {
  position: fixed;
  left: 240px;
  right: 0;
  bottom: 0;
  height: 72px;
  z-index: var(--z-player);
  /* управление ровно по центру полосы: слева обложка с названием,
     справа время и дополнительные кнопки, обе стороны одной ширины */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  background: var(--surface-1);
  border-top: 1px solid var(--border-1);
}
.player__progress { position: absolute; left: 0; right: 0; top: -1px; height: 2px; }
.player__progress::before { content: ""; position: absolute; inset: -10px 0; } /* зона клика 22 px */
.player__progress input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  /* Строчный элемент садится на базовую линию и уезжает вниз из своей
     обёртки: полоса времени рисовалась на 11 px ниже, чем стояла, и
     на телефоне перечёркивала обложку. Блочный держится на месте. */
  display: block;
  width: 100%;
  height: 2px;
  margin: 0;
  background: linear-gradient(var(--accent), var(--accent)) 0/var(--p, 0%) no-repeat var(--surface-3);
  cursor: pointer;
}
.player__progress input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--t-hover);
}
.player:hover .player__progress input::-webkit-slider-thumb { opacity: 1; }
.player__cover {
  position: relative;
  width: 48px; height: 48px;
  border: 0; padding: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--grad);
}
.player__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.player__cover span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  opacity: 0;
  transition: opacity var(--t-hover);
}
@media (hover: hover) and (pointer: fine) { .player__cover:hover span { opacity: 1; } }
.player__meta { min-width: 0; cursor: pointer; }
.player__title {
  font: 700 15px/1.3 var(--font-ui);
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--t-hover);
}
.player__sub { font: 400 12px/1.3 var(--font-ui); color: var(--text-3); }
.player[data-swap="1"] .player__title,
.player[data-swap="1"] .player__sub,
.player[data-swap="1"] .player__cover img { opacity: 0; }
.player__controls { display: flex; align-items: center; gap: 4px; }
/* Кнопка без розового круга: рядом в интерфейсе уже есть розовые
   кнопки, и ещё одна клякса спорила с ними. Здесь она такая же иконка,
   как соседние, только крупнее. */
.player__play {
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-1);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--t-press), color var(--t-hover);
}
.player__play:active { transform: scale(.94); }
/* Наведение показываем размером, а не подложкой: кружок под иконкой
   читался как обводка. Решение владельца 21.09.2026. */
@media (hover: hover) and (pointer: fine) {
  .player__play:hover { transform: scale(1.12); color: var(--text-1); }
  .player__controls .btn--icon:hover,
  .player__right .btn--icon:hover {
    background: none;
    color: var(--text-1);
    transform: scale(1.12);
  }
}
.player__controls .btn--icon,
.player__right .btn--icon { transition: transform var(--t-press), color var(--t-hover); }
/* Ряд управления крупнее и жирнее остального интерфейса: это главные
   кнопки на экране, к ним тянутся не глядя. Набор значков рисуется
   единой обводкой 1.75 — здесь её утолщаем, иначе крупная кнопка с
   тонким значком выглядит пустой. */
.player__controls .btn--icon,
.player__right .btn--icon { width: 40px; height: 40px; }
.player__controls .luvi-ico,
.player__right .luvi-ico { stroke-width: 2.1; }
.player__play { width: 48px; height: 48px; }
.player__play .luvi-ico { stroke-width: 2.2; }
/* PL-03: play↔пауза — кроссфейд с размытием, а не подмена */
.player__play .ico-swap { display: grid; place-items: center; }
.ico-swap { position: relative; }
.ico-swap > * { grid-area: 1 / 1; transition: opacity var(--t-press) ease-out, filter var(--t-press) ease-out; }
.ico-swap > [hidden] { display: block; opacity: 0; filter: blur(2px); }
.player__time { font: 600 12px/1 var(--font-ui); color: var(--text-3); font-variant-numeric: tabular-nums; }
.player__extra { display: flex; gap: 4px; align-items: center; position: relative; }
.player [aria-pressed="true"] { color: var(--accent); }
.player .btn--icon.is-liked { color: var(--accent); }
.player__dot {
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}
.player__vol {
  position: absolute;
  right: 40px;
  bottom: calc(100% + 8px);
  display: none;
  padding: 12px 8px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-overlay);
}
.player__vol input { writing-mode: vertical-lr; direction: rtl; width: 4px; height: 84px; accent-color: var(--accent); }
.player__extra:hover .player__vol,
.player__vol.is-open { display: block; }
@media (max-width: 900px) {
  .player {
    left: 0;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    height: 60px;
    /* те же три группы, что и на большом экране: управление по центру */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    padding: 0 12px;
  }
  .player__progress input { height: 3px; }
  .player__time, .player__extra { display: none; }
  /* На телефоне в полосе остаются только перемотка и пауза: назад,
     играть, вперёд. Перемешивание и повтор уходят — это настройки
     режима, их место в полноэкранном плеере, а не в узкой строке. */
  .player__controls .shuffle,
  .player__controls .repeat { display: none; }
  .player__play { width: 44px; height: 44px; }
  .player__cover { width: 44px; height: 44px; }
}
/* ------------------------------------------------------------
   4.2 ПОЛНОЭКРАННЫЙ ПЛЕЕР
   ------------------------------------------------------------ */
.fs {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--bg);
  display: grid;
  grid-template-rows: 1fr 96px;
  animation: fade var(--t-drawer) var(--ease-drawer);
}
.fs__bg {
  position: absolute;
  inset: -40px;
  background-position: center;
  background-size: cover;
  filter: blur(40px) saturate(1.2);
  opacity: .9;
}
.fs__dim { position: absolute; inset: 0; background: rgba(8, 7, 12, .55); }
.fs__close {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 3;
  width: 44px; height: 44px;
}
.fs__body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 48px;
  align-content: center;
  align-items: start;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 64px 32px 0;
  min-height: 0;
}
.fs__cover {
  width: 380px; height: 380px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);   /* единственная большая тень */
  background: var(--grad);
}
.fs__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs__right { min-width: 0; display: flex; flex-direction: column; min-height: 0; max-height: calc(var(--vh) * .60); }
.fs__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fs__title { font: 800 28px/1.15 var(--font-head); letter-spacing: -.02em; margin: 0; color: var(--text-1); }
.fs__author { margin: 4px 0 0; font: 400 14px/1.5 var(--font-ui); color: var(--text-2); }
.fs__actions { display: flex; gap: 4px; flex: none; }
.fs__actions .btn--icon { width: 40px; height: 40px; }
.fs__actions .is-liked { color: var(--accent); }
.lyrics {
  margin-top: 24px;
  overflow: auto;
  min-height: 0;
  flex: 1;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(#000 84%, transparent);
  mask-image: linear-gradient(#000 84%, transparent);
}
.lyrics::-webkit-scrollbar { display: none; }
.lyrics .kicker { display: block; margin: 16px 0 8px; }
.lyrics .kicker:first-child { margin-top: 0; }
.line {
  font: 400 16px/1.6 var(--font-ui);
  color: var(--text-2);
  padding: 4px 0 4px 16px;
  position: relative;
  cursor: pointer;
  transition: color var(--t-hover);
}
.line.is-past { color: var(--text-3); }
.line.is-now { color: var(--text-1); font-weight: 700; }
.line.is-now::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 16px;
  border-radius: 2px;
  background: var(--accent);
}
.lyrics__none { color: var(--text-3); font: 400 14px/1.5 var(--font-ui); padding-left: 16px; }
.fs__bar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* снизу воздух под второй ряд: без него повтор и очередь упирались
     в самый край экрана */
  padding: 0 32px 20px;
}
.fs__seek { display: flex; align-items: center; gap: 12px; width: min(720px, 100%); }
.fs__seek span { font: 600 13px/1 var(--font-ui); color: var(--text-3); font-variant-numeric: tabular-nums; }
.fs__seek input {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  padding: 10px 0;              /* зона тапа 24 */
  /* Пройденное красим на самом ползунке, а не на его дорожке: Safari на
     iPhone не перерисовывает дорожку, когда меняется --p, и полоса
     оставалась серой до конца песни (владелец 30.10.2026). Мини-плеер
     красит так же и на iPhone работает. Полоса 4 px по центру зоны тапа. */
  background:
    linear-gradient(var(--accent), var(--accent)) 0 50% / var(--p, 0%) 4px no-repeat,
    linear-gradient(var(--surface-3), var(--surface-3)) 0 50% / 100% 4px no-repeat;
  cursor: pointer;
}
.fs__seek input::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}
.fs__seek input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform var(--t-hover);
}
.fs__seek input:active::-webkit-slider-thumb { transform: scale(1.29); }
.fs__bubble {
  position: absolute;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  border: 1px solid var(--border-1);
  font: 600 12px/1 var(--font-ui);
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transition: opacity 125ms;
}
.fs__bubble.is-on { opacity: 1; }
.fs__controls { display: flex; align-items: center; gap: 16px; }
.fs__controls .btn--icon { width: 40px; height: 40px; }
.fs__controls .prev, .fs__controls .next { width: 44px; height: 44px; }
.fs__play {
  width: 64px; height: 64px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--t-press), background var(--t-hover);
}
.fs__play:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .fs__play:hover { background: var(--accent-hover); } }
/* обложка перелетает между баром и полноэкранным (PL-04) */
.fs-flip {
  position: fixed;
  z-index: calc(var(--z-modal) + 1);
  border-radius: var(--r-sm);
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}
.fs-flip img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .fs { grid-template-rows: minmax(0, 1fr) auto; }
  /* Содержимое стояло `align-content: start`, и между кнопками действий
     и полосой перемотки зияло 315 px пустоты: экран выглядел сломанным.
     Теперь столбик стоит по центру свободного места, а обложка тянется
     по ширине телефона. */
  .fs__body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
    padding: 72px var(--s4) var(--s4);
    justify-items: center;
    align-content: center;
  }
  .fs__cover { width: min(78vw, 340px); height: auto; aspect-ratio: 1 / 1; }
  .fs__right { max-height: none; width: 100%; text-align: center; }
  .fs__head { flex-direction: column; align-items: center; gap: var(--s3); }
  .fs__title { font-size: 24px; }
  .fs__actions { gap: var(--s2); }
  .fs__actions .btn--icon { width: 44px; height: 44px; }
  .fs__close { left: 50%; transform: translateX(-50%); }
  .lyrics { display: none; }          /* текст — по свайпу вверх */
  .fs__bar { padding: 0 var(--s4) calc(var(--s6) + env(safe-area-inset-bottom, 0px)); gap: var(--s3); }
  .fs__play { width: 64px; height: 64px; }
  .fs__controls { gap: var(--s6); }
  .fs__lyrics-open { display: inline-flex; align-self: center; margin-top: var(--s2); }
  .fs.is-lyrics .lyrics { display: block; text-align: left; max-height: calc(var(--vh) * .40); }
}
/* на десктопе текст виден всегда, кнопка не нужна. Правило стоит в своём
   медиазапросе: без него оно перебивало мобильное ниже по файлу, и на
   телефоне до текста песни было не добраться вовсе. */
@media (min-width: 901px) {
  .fs__lyrics-open { display: none; }
}
/* PL-10: свайп вниз */
.fs.is-dragging { animation: none; }
/* ------------------------------------------------------------
   PL-11. ОЧЕРЕДЬ
   ------------------------------------------------------------ */
.queue__title { font: 700 18px/1.25 var(--font-head); margin: 0; }
.queue .kicker { display: block; margin: 24px 0 8px; }
.queue .kicker:first-child { margin-top: 0; }
.queue .track { cursor: pointer; }
.queue .track__grip { color: var(--text-3); cursor: grab; display: grid; place-items: center; }
/* ===== СТУДИЯ И ГЕНЕРАЦИЯ ===== */

/* ------------------------------------------------------------
   ST-01. РЕЖИМЫ И ПОЯСНЕНИЕ
   ------------------------------------------------------------ */
.studio { display: flex; flex-direction: column; min-height: 0; }
/* плашка режимов по содержимому: раньше она тянулась во всю строку и
   справа от «Своим голосом» оставался пустой хвост, а знак вопроса
   уезжал к самому краю */
.studio__top { display: flex; align-items: center; justify-content: flex-start; gap: var(--s2); }
.studio__top .seg { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.studio__top .seg::-webkit-scrollbar { display: none; }
.studio__top .seg__item { flex: none; padding: 0 12px; font-size: 13px; }
.studio__help { flex: none; }
/* раньше вкладки от поля отделяла подпись; её убрали — отступ ставим сами */
.studio__body { margin-top: var(--s6); }
/* ------------------------------------------------------------
   ST-02. ПОЛЕ ОПИСАНИЯ — ГЛАВНЫЙ ЭЛЕМЕНТ
   ------------------------------------------------------------ */
.studio__field { position: relative; }
/* у скина есть общее правило textarea{min-height:96px} с большей
   специфичностью — поэтому здесь важность, а не «побольше селекторов» */
.studio__field textarea {
  min-height: 160px;
  font-size: 16px;
  padding: 14px;
  padding-bottom: 28px;
}
.studio__count {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font: 400 12px/1 var(--font-ui);
  color: var(--text-3);
  visibility: hidden;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.studio__count.is-on { visibility: visible; }
.studio__count.is-over { color: var(--error); }
.studio__quick { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
/* ------------------------------------------------------------
   ST-05. КАЧЕСТВО И ЦЕНА
   ------------------------------------------------------------ */
/* качество: две карточки вместо строчки с точкой */
.seg--cards { height: auto; padding: 4px; gap: 4px; border-radius: var(--r-md); }
.seg--cards .seg__item {
  display: block;
  height: auto;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  text-align: left;
  line-height: 1.25;
}
.seg--cards .seg__item b { display: block; font: 700 14px/1.2 var(--font-ui); color: var(--text-1); }
.seg--cards .seg__item .opt__cost {
  display: inline-block;
  margin-top: 3px;
  font: 600 12px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.seg--cards .seg__item .opt__hint {
  display: block;
  margin-top: 2px;
  font: 400 11px/1.3 var(--font-ui);
  color: var(--text-3);
}
.seg--cards .seg__item[aria-selected="true"] { background: var(--surface-3); }
.seg--cards .seg__item[aria-selected="true"] .opt__cost { color: var(--text-1); }
/* «Про» дороже — это видно заранее, до нажатия */
.seg--cards .seg__item.is-pro b::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 6px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--accent);
}
.seg--cards .seg__item.is-pro[aria-selected="true"] {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(253, 66, 156, .35);
}
.seg--cards .seg__item.is-pro[aria-selected="true"] .opt__cost { color: var(--accent); }
@media (max-width: 900px) {
  .seg--cards .seg__item { flex: 1; }
}/* ------------------------------------------------------------
   ST-04. ЛИПКАЯ КНОПКА
   ------------------------------------------------------------ */
.studio__cta {
  position: sticky;
  /* на десктопе кнопка стоит на высоте плеера, на телефоне сверху
     добавляется таб-бар: мобильное правило ниже по файлу */
  bottom: var(--player-h);
  z-index: var(--z-sticky);
  margin-top: var(--s4);
  padding: 12px 0 8px;
  background: linear-gradient(to top, var(--bg) 78%, transparent);
}
.studio__cta-row { display: flex; align-items: center; gap: var(--s2); }
.studio__cta .btn--primary { flex: 1; height: 48px; }
.studio__cta .btn--icon { width: 44px; height: 44px; flex: none; }
.studio__note {
  margin: 6px 0 0;
  font: 400 12px/1.35 var(--font-ui);
  color: var(--text-3);
  text-align: center;
}
.studio .btn-why { margin-top: 6px; }
/* ------------------------------------------------------------
   ST-09. СТРОКА «ПОЛЕ + КНОПКА» · ST-10. ЗАГРУЗКА ФАЙЛА
   ------------------------------------------------------------ */
.studio__row { display: flex; align-items: flex-end; gap: var(--s2); }
.studio__row .field { flex: 1; min-width: 0; }
.studio__row .btn { flex: none; }
@media (max-width: 560px) {
  .studio__row { flex-wrap: wrap; }
  .studio__row .field { flex: 1 1 100%; }
  .studio__row .btn { width: 100%; }
}
.drop {
  height: 120px;
  border: 1px dashed var(--border-1);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  text-align: center;
  gap: 4px;
  padding: var(--s3);
  cursor: pointer;
  transition: border-color var(--t-hover), background var(--t-hover);
}
.drop b { font: 400 14px/1.4 var(--font-ui); color: var(--text-1); }
.drop span { font: 400 12px/1.35 var(--font-ui); color: var(--text-3); }
.drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.drop-file {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: 56px;
  padding: 0 var(--s3);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.drop-file b { font: 600 14px/1.3 var(--font-ui); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-file span { font: 600 12px/1 var(--font-ui); color: var(--text-3); font-variant-numeric: tabular-nums; }
.rec-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--error);
  animation: rec 1s ease-in-out infinite;
}
@keyframes rec { 50% { opacity: .35; } }
/* ------------------------------------------------------------
   ST-06, ST-11. ПРАВАЯ КОЛОНКА «МОИ ТРЕКИ»
   ------------------------------------------------------------ */
.mine { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.mine__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s6) var(--s3);
}
.mine__head h2 { margin: 0; display: flex; align-items: baseline; gap: var(--s2); }
.mine__count { font: 400 14px/1 var(--font-ui); color: var(--text-3); font-variant-numeric: tabular-nums; }
.mine__tools { margin-left: auto; display: flex; align-items: center; gap: var(--s1); }
.mine__tools .all {
  font: 600 13px/1 var(--font-ui);
  color: var(--text-2);
  text-decoration: none;
  padding: 0 var(--s2);
  white-space: nowrap;
}
.mine__tools .all:hover { color: var(--text-1); }
.mine__search-row { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s6) var(--s3); }
.mine__search-row .field { flex: 1; min-width: 0; }
.mine__search { height: 36px; }
.mine__filters { padding: 0 var(--s6) var(--s3); }
.mine__list { padding: 0 var(--s6) var(--s6); overflow-y: auto; min-height: 0; flex: 1; }
/* Пустая папка — это сообщение на всю колонку, а не ещё одна плитка.
   В видах «плитки» и «карточки» список превращается в сетку, и без
   этой строки сообщение вставало в ячейку шириной 110 точек: текст
   переносился по одному слову. */
/* пустое состояние на всю ширину сетки, а не в одной клетке: в виде
   «Обложками» выходило «Ничего не / нашли» (аудит 19.10.2026) */
.mine__list .empty, .lib-list .empty { grid-column: 1 / -1; width: 100%; }
.mine__empty { padding: var(--s8) var(--s6); text-align: center; }
.mine__empty p { margin: 0 0 var(--s3); color: var(--text-2); font: 400 14px/1.5 var(--font-ui); }
/* ST-06: в колонке студии строка короткая — обложка, название, действия;
   чипы и длительность съедали название до одной буквы */
.mine__list .track { grid-template-columns: 56px minmax(0, 1fr) auto; }
.mine__list .track__check,
.mine__list .track__tags,
.mine__list .track__time-wrap { display: none; }
.mine__list .track__actions { opacity: 1; }
/* в узкой строке колонки — только «нравится» и «…»; в карточках все
   инструменты (владелец 28.10.2026) */
.mine__list.is-list .track__actions .btn--icon:not(.like):not(.more) { display: none; }
/* три вида колонки: строки, плитки и крупные карточки.
   Плитки и карточки — всегда в два ряда: в один они выглядят
   как случайно растянутые обложки. */
/* ---- вид «Карточками»: обложка слева, описание, кнопки внизу ----
   Тот вид, к которому люди привыкли в прошлом дизайне. Сетка из двух
   колонок и двух рядов: обложка занимает оба ряда, справа сверху текст,
   снизу длительность и действия. */
.mine__list.is-comfy .track {
  grid-template-columns: 96px minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "cover main main"
    "cover time acts";
  align-items: start;
  gap: 8px 16px;
  height: auto;
  min-height: 128px;
  padding: 12px;
}
.mine__list.is-comfy .track__cover {
  grid-area: cover;
  width: 96px; height: 128px;
  border-radius: var(--r-md);
}
.mine__list.is-comfy .track__main { grid-area: main; align-self: start; }
.mine__list.is-comfy .track__time-wrap { grid-area: time; align-self: end; }
.mine__list.is-comfy .track__actions { grid-area: acts; align-self: end; }
/* Кнопки видны всегда: наведения на телефоне нет, а прятать их в
   просторной карточке нечего — место под них и так отведено. */
.mine__list.is-comfy .track__actions { opacity: 1; }
.mine__list.is-comfy .track__check,
.mine__list.is-comfy .track__tags,
.mine__list.is-comfy .track__pin { display: none; }
.mine__list.is-comfy .track__time { text-align: left; }
.mine__list.is-comfy .track-group { display: contents; }
/* Серая, а не розовая: розовая плашка в каждой строке спорила с главной
   кнопкой за внимание (аудит 19.10.2026). */
.mine__list.is-comfy .tag--model {
  display: inline-block;
  flex: none;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-3);
  font: 700 9px/18px var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mine__list.is-comfy .track__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  font: 400 13px/1.45 var(--font-ui);
  color: var(--text-2);
}
/* Описания может не быть: у песни со своим текстом описание пустое, и
   пустая строка оставляла бы дыру между подписью и кнопками. */
.mine__list.is-comfy .track__desc:empty { display: none; }
/* На телефоне и в узкой колонке обложка мельче, иначе тексту остаётся
   полоска в два слова. */
@media (max-width: 900px) {
  .mine__list.is-comfy .track { grid-template-columns: 72px minmax(0, 1fr) auto; min-height: 96px; }
  .mine__list.is-comfy .track__cover { width: 72px; height: 96px; }
}

.mine__list.is-tiles,
.mine__list.is-cards {
  display: grid;
  gap: var(--s4);
  align-content: start;
}
/* мелкие плитки перекладываются под ширину галереи: в самой узкой их
   два в ряд, как было решено, на растянутой — больше */
.mine__list.is-tiles { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
/* крупные карточки всегда по две: это отдельное решение, ширина его не меняет */
.mine__list.is-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mine__list.is-tiles .track,
.mine__list.is-cards .track { display: block; height: auto; padding: 0; }
.mine__list.is-tiles .track-group,
.mine__list.is-cards .track-group { display: contents; }
.mine__list.is-tiles .track__cover,
.mine__list.is-cards .track__cover {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
}
.mine__list.is-tiles .track__cover img,
.mine__list.is-cards .track__cover img { height: 100%; }
/* Обложка у крупной карточки была квадратной, и четыре трека занимали
   всю колонку целиком. Оставляем две в ряд, но кладём обложку на бок:
   карточка становится ниже на треть, а в колонку влезает вдвое больше. */
.mine__list.is-cards .track__cover { aspect-ratio: 16 / 10; }
.mine__list.is-tiles .track__check,
.mine__list.is-tiles .track__tags,
.mine__list.is-tiles .track__actions,
.mine__list.is-cards .track__check { display: none; }
/* Длительность полезна в любом виде, а строки под неё в сетке нет:
   кладём её плашкой в угол обложки, напротив значка «…». */
.mine__list.is-tiles .track__time-wrap,
.mine__list.is-cards .track__time-wrap {
  display: block;
  position: absolute;
  top: var(--s2); left: var(--s2);
  z-index: 2;
  padding: 3px 7px;
  border-radius: var(--r-sm);
  background: rgba(10, 8, 14, .72);
}
.mine__list.is-tiles .track__time,
.mine__list.is-cards .track__time { color: #fff; font-size: 12px; }

/* «…» на обложке. В списке действия стоят справа от строки, а на плитке
   и на крупной карточке класть их некуда, поэтому значок ложится в угол
   обложки. Без него с плитки нельзя ни переименовать трек, ни удалить. */
.track__pin { display: none; }
.mine__list.is-tiles .track,
.mine__list.is-cards .track,
.track-list.is-grid .track { position: relative; }
.mine__list.is-tiles .track__pin,
.mine__list.is-cards .track__pin,
.track-list.is-grid .track__pin {
  display: grid;
  place-items: center;
  position: absolute;
  top: var(--s2); right: var(--s2);
  z-index: 2;
  width: 36px; height: 36px;
  border: 0;
  border-radius: var(--r-sm);
  background: rgba(10, 8, 14, .72);
  color: #fff;
  opacity: 0;
  transition: opacity var(--t-hover);
}
@media (hover: hover) and (pointer: fine) {
  .mine__list.is-tiles .track:hover .track__pin,
  .mine__list.is-cards .track:hover .track__pin,
  .track-list.is-grid .track:hover .track__pin { opacity: 1; }
  .mine__list.is-tiles .track__pin:hover,
  .mine__list.is-cards .track__pin:hover,
  .track-list.is-grid .track__pin:hover { background: rgba(10, 8, 14, .9); }
}
/* пальцем навести нечем: на сенсорном экране значок виден всегда и крупнее */
@media (hover: none) {
  .mine__list.is-tiles .track__pin,
  .mine__list.is-cards .track__pin,
  .track-list.is-grid .track__pin { opacity: 1; width: 44px; height: 44px; }
}
.track__pin:focus-visible { opacity: 1; box-shadow: var(--ring); outline: none; }
.mine__list.is-tiles .track__main { padding: var(--s2) 2px 0; }
.mine__list.is-tiles .track__title { font-size: 14px; }
.mine__list.is-tiles .track__sub { font-size: 11px; }
/* крупные карточки: обложка, название, чипы и действия */
.mine__list.is-cards .track {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: var(--s2);
  transition: background var(--t-hover);
}
.mine__list.is-cards .track__main { padding: var(--s3) 2px var(--s2); }
.mine__list.is-cards .track__title { font-size: 15px; }
.mine__list.is-cards .track__tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 2px; }
.mine__list.is-cards .track__tags .tag:nth-child(n+3) { display: none; }
.mine__list.is-cards .track__actions { opacity: 1; padding: var(--s2) 2px 0; }
/* Ссылки «Показать вариант 2» больше нет: оба варианта видны сразу. */
/* ------------------------------------------------------------
   GEN-01…GEN-03. ОЖИДАНИЕ, РЕЗУЛЬТАТ, ОШИБКА
   ------------------------------------------------------------ */
.track--pending, .track--failed {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  height: 96px;
  padding: 0 var(--s4);
  border-radius: var(--r-md);
  animation: gen-in 200ms var(--ease-out) both;
}
@keyframes gen-in { from { opacity: 0; transform: translateY(-8px); } }
.track--pending .skeleton { width: 56px; height: 56px; }
.track--failed { background: rgba(255, 107, 94, .08); }
.track--failed .fail-ico { width: 56px; display: grid; place-items: center; color: var(--error); }
.gen__title { font: 700 15px/1.3 var(--font-ui); color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen__line { display: flex; align-items: center; gap: var(--s3); margin-top: 6px; }
.gen__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.gen__bar i { display: block; height: 100%; background: var(--accent); width: 0; transition: width 1s linear; }
.gen__eta { font: 600 12px/1 var(--font-ui); color: var(--text-3); font-variant-numeric: tabular-nums; }
.gen__steps { margin-top: 6px; font: 400 12px/1.3 var(--font-ui); color: var(--text-3); }
.gen__steps b { color: var(--text-1); font-weight: 700; }
.gen__why { margin-top: 4px; font: 400 13px/1.4 var(--font-ui); color: var(--text-2); }
.gen__kept { display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font: 400 12px/1.3 var(--font-ui); color: var(--text-2); }
.gen__acts { display: flex; align-items: center; gap: var(--s2); }
/* GEN-02: результат проявляется — единственная «дорогая» анимация */
.track--new .track__cover,
.track--new .track__main { animation: reveal 320ms ease-out both; }
.track--new:nth-child(2) .track__cover,
.track--new:nth-child(2) .track__main { animation-delay: 60ms; }
@keyframes reveal {
  from { opacity: 0; transform: scale(.96); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
.tag--new { background: var(--accent-soft); color: var(--accent); height: 20px; line-height: 20px; padding: 0 7px; }
/* GEN-04: варианты одной группой */
.track-group { border-radius: var(--r-md); }
/* ------------------------------------------------------------
   ST-07. КАТАЛОГ СТИЛЕЙ — окно по центру
   Раньше это был тёмный ящик у края: список едва помещался,
   а колесо над категориями не крутило страницу.
   ------------------------------------------------------------ */
.modal {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal);
  width: min(720px, calc(100vw - 48px));
  max-height: min(calc(var(--vh) * .80), 720px);
  display: flex;
  flex-direction: column;
  padding: var(--s6);
  border-radius: var(--r-lg);
  background: var(--surface-3);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--shadow-overlay);
  animation: modal-in var(--t-drawer) var(--ease-drawer);
}
@keyframes modal-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.98); }
}
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.modal__head .h2 { margin: 0; }
.modal__close { flex: none; margin: -6px -6px 0 0; }
.cat__sub { margin: 4px 0 0; font: 400 13px/1.4 var(--font-ui); color: var(--text-2); }
.cat__search { margin: var(--s4) 0 0; }
.cat__search .field__input { background: var(--bg); }
.cat__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 calc(var(--s6) * -1) calc(var(--s6) * -1);
  padding: 0 var(--s6) var(--s6);
  scrollbar-width: thin;
}
.cat__cats {
  --чип: 36px;
  position: sticky;
  top: 0;
  z-index: 1;
  flex-wrap: wrap;
  overflow: hidden;
  /* два ряда: вбок разделы больше не листаются */
  max-height: calc(var(--s4) + var(--чип) * 2 + 8px + var(--s3));
  padding: var(--s4) 46px var(--s3) 0;
  background: var(--surface-3);
  transition: max-height .24s ease;
}
.cat__cats[data-open="1"] { max-height: calc(var(--s4) + var(--чип) * 9 + 64px + var(--s3)); }
.cat__cats .chip { flex: none; }
.cat__more {
  position: absolute;
  right: 0;
  bottom: var(--s3);
  width: 38px;
  padding: 0;
  justify-content: center;
}
@media (max-width: 900px) {
  .cat__cats { --чип: 44px; }
}
.cat__list { display: flex; flex-direction: column; }
/* Раздел в списке. Сто с лишним стилей подряд читать нельзя, поэтому
   в общем списке они разложены по группам, и заголовок раздела липнет
   к верху при прокрутке, чтобы не терять, где находишься. */
.cat__group {
  position: sticky;
  top: 52px;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s4);
  padding: var(--s2) var(--s3);
  background: var(--surface-3);
  color: var(--text-3);
  font: 600 12px/1.2 var(--font-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cat__group:first-child { margin-top: 0; }
.cat__group b { color: var(--text-3); font-weight: 400; letter-spacing: 0; }
/* число стилей рядом с заголовком окна */
.cat__n { color: var(--text-3); font-weight: 400; }
.cat__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: var(--s4);
  width: 100%;
  min-height: 60px;
  padding: var(--s3) var(--s3);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  text-align: left;
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--t-hover);
}
@media (hover: hover) and (pointer: fine) {
  .cat__row:hover { background: rgba(255, 255, 255, .06); }
}
.cat__row .txt { min-width: 0; }
.cat__row b { display: block; font: 700 15px/1.3 var(--font-ui); }
.cat__row .txt span { display: block; margin-top: 2px; font: 400 13px/1.4 var(--font-ui); color: var(--text-2); }
.cat__cat { font: 400 12px/1 var(--font-ui); color: var(--text-3); white-space: nowrap; }
/* ---- строка настоящего каталога ----
   У пресета три уровня: название, сухая справка (поджанр, темп, кто
   поёт) и само описание. Описание — это тот текст, который встанет в
   поле и уйдёт движку, поэтому его показываем, но обрезаем двумя
   строками: целиком это четыреста знаков, и десяток таких подряд
   читать невозможно. */
.cat__row { align-items: start; }
.cat__row .cat__meta {
  margin-top: 2px;
  font: 400 12px/1.3 var(--font-ui);
  color: var(--text-3);
}
.cat__row .cat__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  font: 400 13px/1.45 var(--font-ui);
  color: var(--text-2);
}
.cat__row .cat__pick { align-self: center; }
/* Второй ряд — поджанры выбранного жанра. Мельче первого: это
   уточнение к уже сделанному выбору, а не равный ему. */
.cat__subs { margin-top: var(--s2); }
.cat__subs[hidden] { display: none; }
.chip--sm { height: 26px; padding: 0 10px; font-size: 12px; }
/* Сколько строк показано и что делать, чтобы увидеть остальные. */
.cat__more-note {
  padding: var(--s3);
  font: 400 12px/1.4 var(--font-ui);
  color: var(--text-3);
  text-align: center;
}
.cat__pick { color: var(--text-3); opacity: 0; }
.cat__row:hover .cat__pick { opacity: .6; }
.cat__row.is-current { background: var(--accent-soft); }
.cat__row.is-current .cat__pick { opacity: 1; color: var(--accent); }
@media (max-width: 900px) {
  .modal {
    width: 100%;
    max-height: calc(var(--vh) * .88);
    left: 0; top: auto;
    bottom: calc(64px + var(--player-h) + env(safe-area-inset-bottom, 0px));
    transform: none;
    border-radius: 16px 16px 0 0;
    animation-name: slide-up;
  }
  .cat__cat { display: none; }
  .cat__row { grid-template-columns: minmax(0, 1fr) 24px; }
}
/* ------------------------------------------------------------
   ONB-01. КОУЧМАРКИ
   ------------------------------------------------------------ */
/* Затемнение не ловит клики: обучение интерактивное, по ходу рассказа
   можно тыкать в то, о чём идёт речь, и переключать режимы. Закрыть
   можно кнопкой «Пропустить» или клавишей Esc. */
/* Кнопки держатся справа и не сжимаются. Втроём («Назад»,
   «Пропустить», «Дальше») они шире, чем остаётся места в плашке, и
   сжатие выталкивало «Дальше» за её край. */
.coach__btns {
  display: flex;
  align-items: center;
  gap: var(--s1);
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}
.coach__btns .btn { flex: none; }
/* Кольцо и есть затемнение: тень наружу гасит весь экран, кроме того
   места, о котором идёт рассказ. Раньше поверх лежала плашка на весь
   экран и гасила заодно и сам предмет рассказа: он не выделялся, и
   казалось, что обучение не работает. */
.coach-ring {
  position: fixed;
  z-index: var(--z-backdrop);
  border-radius: var(--r-md);
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 9999px rgba(8, 7, 12, .66);
  pointer-events: none;
  animation: fade var(--t-hover);
  transition: left var(--t-drawer) var(--ease-drawer), top var(--t-drawer) var(--ease-drawer),
              width var(--t-drawer) var(--ease-drawer), height var(--t-drawer) var(--ease-drawer);
}
@media (prefers-reduced-motion: reduce) { .coach-ring { transition: none; } }
.coach {
  position: fixed;
  z-index: var(--z-modal);
  width: 280px;
  /* На узком экране плашка не должна вылезать за края. */
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-overlay);
  animation: pop var(--t-pop) var(--ease-out);
}
.coach p { margin: 0 0 var(--s3); font: 400 14px/1.5 var(--font-ui); color: var(--text-1); }
/* Ряд переносится: если счётчик и три кнопки не помещаются в строку,
   кнопки уезжают на следующую целиком — вместо того чтобы вылезать за
   плашку. */
.coach__acts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  flex-wrap: wrap;
}
/* Счётчик не сжимаем и не переносим по словам: сжатый до нуля, он
   разрывался на три строки — «2», «из», «7». */
.coach__step {
  flex: none;
  white-space: nowrap;
  font: 600 12px/1 var(--font-ui);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
/* ------------------------------------------------------------
   ONB-02. «КАК ПОЛЬЗОВАТЬСЯ»
   ------------------------------------------------------------ */
/* нумерованные шаги: кружок с цифрой и строка рядом. Так они выглядят
   на «Партнёрам» и в других рассказах на страницах */
.howto__step {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  padding: var(--s2) 0;
}
.howto__n {
  width: 28px; height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  font: 700 13px/1 var(--font-ui);
  color: var(--text-1);
}
.howto__step p { margin: 0; font: 400 14px/1.45 var(--font-ui); color: var(--text-2); }

/* ---------- шторка «Как пользоваться» ----------
   Здесь шаг это заголовок и объяснение под ним. Номер вписан в сам
   заголовок («Шаг 2. Выберите стиль»), поэтому кружка с цифрой рядом
   нет: он был бы повтором. */
.drawer.howto .howto__tabs { margin-bottom: var(--s4); }
.drawer.howto .howto__step { display: block; min-height: 0; padding: var(--s3) 0; }
.drawer.howto .howto__step + .howto__step { border-top: 1px solid var(--border-2); }
.drawer.howto .howto__t {
  display: block;
  margin-bottom: 6px;
  font: 600 15px/1.35 var(--font-ui);
  color: var(--text-1);
}
.drawer.howto .howto__step p { font: 400 14px/1.5 var(--font-ui); }
/* Четыре режима не влезают в узкую шторку в одну строку. Вбок их
   прятать нельзя: край обрезает подпись, и кажется, что сломалось.
   Поэтому переносим на вторую строку и растягиваем поровну. */
.drawer.howto .howto__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
}
.drawer.howto .howto__tabs .seg__item { flex: 1 1 auto; padding: 0 12px; }
/* на телефоне в строку не помещаются даже с переносом: ставим ровным
   квадратом два на два, чтобы не было висящей одинокой вкладки */
@media (max-width: 900px) {
  .drawer.howto .howto__tabs { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-lg); }
}
/* ------------------------------------------------------------
   ST-12. МОБИЛЬНАЯ СТУДИЯ
   ------------------------------------------------------------ */
.studio-tabs { display: none; margin-bottom: var(--s4); }
@media (max-width: 900px) {
  .studio-tabs { display: flex; width: 100%; }
  /* видна одна вкладка: либо форма, либо треки */
  body[data-studio-tab="mine"] .studio__top,
  body[data-studio-tab="mine"] .studio__hint,
  body[data-studio-tab="mine"] .studio__body,
  body[data-studio-tab="mine"] .studio__cta { display: none; }
  body[data-studio-tab="form"] .mine { display: none; }
  .mine { height: auto; }
  .mine__list { overflow: visible; }
  .studio-tabs .seg__item { flex: 1; }
  .studio__field textarea { min-height: 120px; }
  .studio__cta {
    bottom: calc(64px + var(--player-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: 12px;
  }
  /* четыре действия не влезают в строку — переносим, а не режем подписи */
  .studio__quick { flex-wrap: wrap; }
  .studio__quick .btn--sm { flex: 0 1 auto; }
  .mine__head, .mine__filters, .mine__list { padding-left: var(--s4); padding-right: var(--s4); }
  /* На телефоне «Мои треки» уже написано на вкладке: заголовок повторял
     её и теснил кнопки в шапке (аудит 19.10.2026). */
  body[data-studio-tab] .mine__head .h2 { display: none; }
  .mine__list.is-tiles, .mine__list.is-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio__hints .chips { flex-wrap: nowrap; overflow-x: auto; }
  .coach { width: calc(100% - 32px); left: 16px; }
}
/* при слишком узкой форме — только иконки в быстрых действиях */
@media (max-width: 360px) {
  .studio__quick .btn--sm span { display: none; }
}
/* липкий блок не должен накрывать последнюю настройку формы */
@media (max-width: 900px) {
  .studio__cta { margin-bottom: calc(64px + var(--player-h) + env(safe-area-inset-bottom, 0px)); }
}
/* кнопки в карточках генерации не должны растягиваться по высоте строки */
.gen__acts { flex: none; align-items: center; }
.gen__acts .btn--icon { width: 36px; height: 36px; flex: none; }
.gen__acts .btn--sm { flex: none; }
.track--pending, .track--failed { overflow: hidden; }
/* ===== БИБЛИОТЕКА И ЛЕНТА ===== */

/* ------------------------------------------------------------
   LIB-01. ОДНА СТРОКА ИНСТРУМЕНТОВ
   ------------------------------------------------------------ */
/* Поиск открытым полем во всю строку. Раньше он прятался под значок и
   разворачивался на 280 px: на телефоне это была кнопка-заготовка, по
   которой непонятно, есть тут поиск или нет. Библиотека существует
   ради поиска, поэтому поле стоит открытым. */
.lib-bar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
/* значки не ужимаются под поле: иначе на узком экране они становятся
   уже 44 px и в них не попасть пальцем */
.lib-bar .btn--icon { flex: none; }
.lib-find {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s2);
  height: 40px;
  padding: 0 var(--s3);
  border: 1px solid var(--border-1);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-3);
}
.lib-find:focus-within { border-color: rgba(255, 255, 255, .26); box-shadow: var(--ring); }
.lib-search {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text-1);
  font: 400 15px/1 var(--font-ui);
  outline: none;
}
.lib-search::placeholder { color: var(--text-ph); font-size: 14px; }
.lib-clear {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: none;
  color: var(--text-3);
}
.lib-clear:hover { color: var(--text-1); }
@media (max-width: 900px) {
  /* палец в 24 px не попадает: на телефоне поле выше, крестик крупнее */
  .lib-find { height: 48px; }
  .lib-clear { width: 44px; height: 44px; }
}
.lib-bar .n {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: #fff;
  font: 700 11px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.lib-count { font: 400 14px/1 var(--font-ui); color: var(--text-3); font-variant-numeric: tabular-nums; }
.page-head h1 .lib-count { margin-left: var(--s2); }
/* ------------------------------------------------------------
   LIB-02. ГРУППЫ — ЧИПЫ С ДЕЙСТВИЯМИ ВНУТРИ
   ------------------------------------------------------------ */
.groups { margin: var(--s4) 0; }
.groups .chip { position: relative; }
.groups .chip.is-over { border-color: var(--accent); background: var(--accent-soft); }
.groups .chip.is-bump { animation: bump 160ms ease-out; }
@keyframes bump { 50% { transform: scale(1.06); } }
.groups__menu {
  display: none;
  margin-left: 2px;
  color: inherit;
  opacity: .7;
}
.chip[aria-pressed="true"] .groups__menu { display: inline-flex; }
.groups__name {
  height: 32px;
  width: 180px;
  padding: 0 12px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--accent);
  color: var(--text-1);
  font: 600 13px/1 var(--font-ui);
}
/* ------------------------------------------------------------
   LIB-04. МУЛЬТИВЫБОР
   ------------------------------------------------------------ */
.track__check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.track.is-picked { background: var(--surface-2); }
.track.is-picked .track__check { opacity: 1; }
.bulk {
  position: sticky;
  bottom: calc(var(--player-h) + var(--s3));
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s2);
  height: 56px;
  margin-top: var(--s3);
  padding: 0 var(--s4);
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-overlay);
}
.bulk__n { font: 600 14px/1 var(--font-ui); color: var(--text-1); margin-right: var(--s2); }
.bulk .close { margin-left: auto; }
@media (max-width: 900px) {
  .bulk { bottom: calc(64px + var(--player-h) + var(--s2)); }
  .bulk .btn--sm span { display: none; }
}
/* ------------------------------------------------------------
   LIB-05. СЕТКА КАК ВТОРОЙ ВИД
   ------------------------------------------------------------ */
.track-list.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s4);
  align-content: start;
}
.track-list.is-grid .track { display: block; height: auto; padding: 0; }
.track-list.is-grid .track__cover {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
}
.track-list.is-grid .track__cover img { height: 100%; }
.track-list.is-grid .track__check,
.track-list.is-grid .track__time-wrap,
.track-list.is-grid .track__sub { display: none; }
.track-list.is-grid .track__main { padding: var(--s2) 2px 0; }
.track-list.is-grid .track__title { font-size: 15px; }
.track-list.is-grid .track__tags { padding: 0 2px; }
.track-list.is-grid .track__tags .tag:nth-child(n+2) { display: none; }
.track-list.is-grid .track__actions { opacity: 1; padding: var(--s2) 2px 0; }
.track-list.is-grid .track-group { display: contents; }
.track-list.is-grid .track--alt { display: none; }
@media (max-width: 900px) {
  .track-list.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ------------------------------------------------------------
   LIB-06. ПУСТЫЕ СОСТОЯНИЯ И ЗАГРУЗКА
   ------------------------------------------------------------ */
.track--skeleton {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: var(--s3);
  height: 72px;
  padding: 0 var(--s4);
}
.track--skeleton .lines { display: flex; flex-direction: column; gap: var(--s2); }
.track--skeleton .lines i { display: block; height: 12px; border-radius: 4px; }
/* ------------------------------------------------------------
   LIB-07. БЫСТРОЕ ПЕРЕИМЕНОВАНИЕ
   ------------------------------------------------------------ */
.track__rename {
  height: 28px;
  min-width: 200px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  border: 1px solid var(--accent);
  color: var(--text-1);
  font: 700 16px/1 var(--font-ui);
}
/* ------------------------------------------------------------
   FEED-02. ЛЕНТА
   Панель «сейчас играет» снята: её место заняла карточка трека
   (.fcard) из нового модуля ленты. Здесь осталось только то,
   чем пользуются другие экраны.
   ------------------------------------------------------------ */
.cover--breathing { animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.02); } }
/* ------------------------------------------------------------
   FEED-03. СТРОКА ЛЕНТЫ
   ------------------------------------------------------------ */
.feed__rows .track { grid-template-columns: 64px minmax(180px, 1fr) auto auto auto; }
/* три чипа съедают название до одной буквы — в ленте хватает жанра и настроения */
.feed__rows .track__tags .tag:nth-child(n+3) { display: none; }
.feed__rows .track__main { min-width: 0; }
.feed__rows .track__tags { flex-wrap: nowrap; }
.feed__rows .track__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed__rows .track__cover { width: 64px; height: 64px; }
.track__author {
  color: var(--text-2);
  text-decoration: none;
  font: 400 12px/1.35 var(--font-ui);
}
.track__author:hover { text-decoration: underline; color: var(--text-1); }
.track__likes {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-2);
  font: 600 12px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .track__likes:hover { background: var(--surface-2); color: var(--text-1); }
}
.track__likes.is-on { color: var(--accent); }
.track__plays {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-3);
  font: 600 12px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.feed__rows .track__actions { opacity: 1; }
.feed__rows .track__actions .btn--icon:not(.more) { display: none; }
@media (max-width: 900px) {
  .feed__rows .track { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .feed__rows .track__cover { width: 56px; height: 56px; }
  .feed__rows .track__plays, .feed__rows .track__tags { display: none; }
}
/* ------------------------------------------------------------
   FEED-04. ФИЛЬТРЫ
   ------------------------------------------------------------ */
.feed__filters {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  margin-bottom: var(--s4);
  flex-wrap: wrap;
}
.feed__filters .seg { flex: none; }
.feed__filters .chips { flex: 1; min-width: 0; }
.feed__rows.is-fading { opacity: 0; transition: opacity var(--t-hover); }
@media (max-width: 900px) {
  .feed__filters { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .feed__filters .seg { width: 100%; }
  .feed__filters .seg__item { flex: 1; }
}
/* ------------------------------------------------------------
   FEED-05. ПОДГРУЗКА И «НАВЕРХ»
   ------------------------------------------------------------ */
.feed__top {
  position: fixed;
  right: var(--s6);
  bottom: calc(var(--player-h) + var(--s6));
  z-index: var(--z-sticky);
  width: 40px;
  height: 40px;
  background: var(--surface-3);
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-hover);
}
.feed__top.is-on { opacity: 1; pointer-events: auto; }
@media (max-width: 900px) {
  .feed__top { bottom: calc(64px + var(--player-h) + var(--s3)); right: var(--s4); }
}
/* ------------------------------------------------------------
   FEED-08. ПРОФИЛЬ АВТОРА
   ------------------------------------------------------------ */
.author {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s6);
}
.author__ava {
  width: 72px; height: 72px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-1);
  font: 800 26px/1 var(--font-head);
}
.author__body { min-width: 0; flex: 1; }
.author__body h2 { margin: 0; font: 800 28px/1.15 var(--font-head); letter-spacing: -.02em; }
.author__body p { margin: 4px 0 0; font: 400 14px/1.4 var(--font-ui); color: var(--text-2); }
/* ===== ТАРИФЫ И КАБИНЕТ ===== */

/* ------------------------------------------------------------
   PRF-01. ТАРИФ — СТРОКА ФАКТОВ
   ------------------------------------------------------------ */
.plan-card {
  position: relative;
  display: grid;
  gap: var(--s5);
  padding: var(--s6);
  border-radius: var(--r-lg);
  /* фирменный градиент, как в кабинете на бою */
  background: var(--grad);
  color: #fff;
  box-shadow: 0 18px 50px -24px rgba(251, 69, 149, .55);
}
.plan-card__k {
  display: block;
  margin-bottom: 6px;
  font: 700 11px/1 var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.plan-card__name {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  font: 700 38px/1.05 var(--font-head);
  letter-spacing: -.02em;
  color: #fff;
}
.plan-card__next { margin: var(--s2) 0 0; font: 400 14px/1.45 var(--font-ui); color: rgba(255, 255, 255, .84); }
.plan-card__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s5);
}
.plan-card__stats b { display: block; font: 700 26px/1.1 var(--font-head); color: #fff; }
.plan-card__sm { display: block; margin-top: 4px; font: 400 12px/1.35 var(--font-ui); color: rgba(255, 255, 255, .7); }
.plan-card .plan-bar { background: rgba(255, 255, 255, .28); }
.plan-card .plan-bar i { background: #fff; }
.plan-card .plan-bar.is-low i { background: #FFE3A3; }
.plan-card .plan-bar.is-zero i { background: #FFD1D1; }
.plan-card__bar-wrap .plan-bar { margin-top: 10px; }
/* кнопки лежат на градиенте: белая главная и прозрачные рядом */
.plan-card .plan-acts .btn--primary {
  background: #fff;
  color: #1A1020;
}
.plan-card .plan-acts .btn--secondary {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
}
.plan-card .plan-acts .btn--ghost { color: rgba(255, 255, 255, .8); }
@media (hover: hover) and (pointer: fine) {
  .plan-card .plan-acts .btn--primary:hover { background: rgba(255, 255, 255, .88); }
  .plan-card .plan-acts .btn--secondary:hover { background: rgba(255, 255, 255, .28); }
  .plan-card .plan-acts .btn--ghost:hover { color: #fff; }
}
.plan-bar { height: 4px; margin-top: var(--s2); border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.plan-bar i { display: block; height: 100%; background: var(--accent); }
.plan-bar.is-low i { background: var(--warning); }
.plan-bar.is-zero i { background: var(--error); }
.plan-acts { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); grid-column: 1 / -1; flex-wrap: wrap; }
.plan-acts .cancel { margin-left: auto; }
@media (max-width: 900px) {
  .plan-card { padding: var(--s5); gap: var(--s4); }
  .plan-card__name { font-size: 30px; }
  .plan-card__stats { gap: var(--s4); }
  .plan-acts .cancel { margin-left: 0; }
}
/* ------------------------------------------------------------
   PRF-03. СЕКЦИИ КАБИНЕТА
   ------------------------------------------------------------ */
.acc { max-width: 720px; }
/* Кабинет собран плитками и карточками, а не сплошной простынёй строк:
   раньше между разделами стояло 48 px, каждая строка занимала три
   этажа, и на телефоне экран уходил на четыре прокрутки. */
.acc-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s2);
  margin: var(--s4) 0;
}
.atile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s1);
  min-height: 84px;
  padding: var(--s3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.atile__n { font: 800 24px/1 var(--font-head); color: var(--text-1); }
.atile__n--s { font-size: 15px; line-height: 1.2; }
.atile__c { font: 400 12px/1.2 var(--font-ui); color: var(--text-3); }
.acc__sec + .acc__sec { margin-top: var(--s4); }
/* после «Пригласить друга» был зазор 2 пикселя до «Платежей» (аудит 19.10.2026) */
.inv-entry + .acc__sec, .plan-card + .inv-entry { margin-top: var(--s4); }
.acc__sec {
  padding: var(--s4);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
.acc__sec > .kicker { display: block; margin-bottom: var(--s3); }
.acc__sec .empty { padding: var(--s4) 0; }
.row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 56px;
  gap: var(--s4);
  border-bottom: 1px solid var(--border-2);
}
.row:last-child { border-bottom: 0; }
.row__label { font: 400 13px/1.4 var(--font-ui); color: var(--text-3); }
.row__value { font: 400 15px/1.4 var(--font-ui); color: var(--text-1); min-width: 0; }
.row__value .field__input { max-width: 360px; }
.row__help { display: block; margin-top: 2px; font: 400 12px/1.35 var(--font-ui); color: var(--text-3); }
.row__acts { display: flex; gap: var(--s2); }
@media (max-width: 900px) {
  /* Подпись и значение стояли друг под другом, а кнопка уходила на
     третью строку: одна строка профиля занимала треть экрана. Теперь
     текст слева в две строчки, кнопка справа на всю их высоту. */
  .row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--s3);
    padding: var(--s3) 0;
    align-items: center;
  }
  .row__label { grid-column: 1; grid-row: 1; }
  .row__value { grid-column: 1; grid-row: 2; }
  .row__acts { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; }
}
/* PRF-04 */
.acc__danger { margin-top: var(--s4); padding: var(--s4); border: 1px solid var(--border-2); border-radius: var(--r-lg); }
.acc__danger > .kicker { display: block; }
@media (max-width: 900px) {
  .acc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.confirm__field { margin: 0 0 20px; }
/* PRF-05 */
.hist { width: 100%; border-collapse: collapse; }
.hist td { height: 44px; padding: 0 var(--s3) 0 0; border-bottom: 1px solid var(--border-2); font: 400 14px/1.4 var(--font-ui); }
.hist td:first-child { color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.hist td:nth-child(3).plus { color: var(--success); }
.hist td:last-child { text-align: right; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist a { color: var(--text-3); text-decoration: none; }
.hist a:hover { color: var(--text-1); text-decoration: underline; }
.hist__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); }
@media (max-width: 900px) {
  .hist td:nth-child(4) { display: none; }
}
.pricing { display: flex; flex-direction: column; gap: var(--s16); }
.pricing__seg { display: flex; justify-content: center; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 26/24 — как в прошлом дизайне: по бокам чуть уже, чем сверху. */
  padding: var(--s6);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
}
.plan.is-best { border-color: var(--accent); }
.plan.is-current { border-color: var(--border-1); }
.plan__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.plan__name { margin: 0; font: 700 20px/1.2 var(--font-head); letter-spacing: -.01em; }
.plan__who { margin: 4px 0 0; font: 400 13px/1.4 var(--font-ui); color: var(--text-2); }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin-top: var(--s4); }
.plan__price .num { font: 800 28px/1.1 var(--font-head); font-variant-numeric: tabular-nums; }
.plan__price span { font: 400 14px/1 var(--font-ui); color: var(--text-3); }
/* Цена главная цифра карточки: правило выше для «/ мес» задевало и её
   (тот же span), и цена выходила самым тусклым серым (Intent, 21.10.2026). */
.plan__price span.num { color: var(--text-1); }
.plan__per { margin: 6px 0 0; font: 600 14px/1.3 var(--font-ui); color: var(--accent); }
.plan__what { margin: 4px 0 0; font: 400 13px/1.4 var(--font-ui); color: var(--text-2); }
.plan .btn { margin: 20px 0; width: 100%; }
.plan__feats { display: flex; flex-direction: column; gap: var(--s2); }
.plan__feats div { display: flex; gap: var(--s2); font: 400 13px/1.4 var(--font-ui); color: var(--text-2); }
.plan__all { margin-top: auto; padding-top: var(--s4); font: 400 13px/1 var(--font-ui); color: var(--text-3); text-decoration: none; }
.plan__all:hover { color: var(--text-1); }
.plans.is-fading { opacity: 0; transition: opacity var(--t-hover); }
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); text-align: center; }
.trust b { display: block; font: 800 28px/1.1 var(--font-head); font-variant-numeric: tabular-nums; }
.trust span { display: block; margin-top: 4px; font: 400 13px/1.35 var(--font-ui); color: var(--text-3); }
.pricing h2, .pricing__h2 { font: 700 18px/1.25 var(--font-head); letter-spacing: -.01em; margin: 0 0 var(--s4); }
.pricing details > summary { list-style: none; cursor: pointer; }
.pricing details > summary::-webkit-details-marker { display: none; }
.all-feats > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font: 600 14px/1 var(--font-ui);
  color: var(--text-2);
}
/* PRC-05: примеры — те же строки К-07, только без действий */
.examples__list .track { grid-template-columns: 64px minmax(180px, 1fr) auto auto; }
.examples__list .track__cover { width: 64px; height: 64px; }
.examples__list .track__actions { display: none; }
/* ------------------------------------------------------------
   PRC-03, PRC-06. ОПЛАТА И ПОПОЛНЕНИЕ
   ------------------------------------------------------------ */
.pay__total { font: 700 16px/1.35 var(--font-ui); color: var(--text-1); }
.pay__note { margin: 4px 0 var(--s4); font: 400 13px/1.4 var(--font-ui); color: var(--text-3); }
.pay__list { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s6); }
.pay__list div { display: flex; gap: var(--s2); font: 400 14px/1.4 var(--font-ui); color: var(--text-2); }
.pay__seg { margin-bottom: var(--s4); }
/* без системного треугольника: «Есть промокод» — ссылкой (аудит 19.10.2026) */
.pay__promo summary { font: 600 13px/1 var(--font-ui); color: var(--text-2); margin-bottom: var(--s3); list-style: none; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.pay__promo summary::-webkit-details-marker { display: none; }
.pay__why { margin: var(--s2) 0 0; text-align: center; font: 400 12.5px/1.4 var(--font-ui); color: var(--text-3); }
.pay__why[hidden] { display: none; }
.pay__promo .studio__row, .pay__promo .pay__promo-row { display: flex; gap: var(--s2); margin-bottom: var(--s4); }
.pay__promo .field { flex: 1; }
.pay__sum { display: flex; align-items: baseline; justify-content: space-between; font: 700 18px/1.25 var(--font-head); }
.pay__sum span:last-child { font-variant-numeric: tabular-nums; }
.pay__legal { display: block; margin-top: var(--s2); font: 400 12px/1.35 var(--font-ui); color: var(--text-3); text-align: center; }
.pack {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: 64px;
  padding: 0 var(--s4);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  cursor: pointer;
  margin-bottom: var(--s2);
}
.pack:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pack input { accent-color: var(--accent); width: 18px; height: 18px; }
.pack b { font: 700 15px/1.3 var(--font-ui); }
.pack span { font: 400 13px/1.3 var(--font-ui); color: var(--text-3); }
.pack .sum { margin-left: auto; font: 700 15px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
/* своя сумма: у этой строки цены нет, её вводят ниже */
.pack--own span { margin-left: auto; }
.own { margin: calc(var(--s2) * -1) 0 var(--s4); padding: var(--s4); border: 1px solid var(--accent);
  border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); background: var(--accent-soft); }
.own[hidden] { display: none; }
.own__row { position: relative; }
.own__inp {
  width: 100%;
  height: 48px;
  padding: 0 40px 0 var(--s4);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text-1);
  font: 700 18px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.own__inp:focus { outline: none; box-shadow: var(--ring); }
.own__cur {
  position: absolute;
  right: var(--s4); top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font: 700 18px/1 var(--font-ui);
  pointer-events: none;
}
.own__hint { margin: var(--s2) 0 0; font: 400 13px/1.4 var(--font-ui); color: var(--text-2); }
.own__hint.is-bad { color: var(--error); }
/* ожидание СБП */
.qr {
  width: 200px; height: 200px;
  margin: 0 auto var(--s4);
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: #fff;
  color: #0c0b10;
  font: 700 13px/1.3 var(--font-ui);
  text-align: center;
  padding: var(--s3);
}
.qr-wait { text-align: center; }
.qr-wait .timer { font: 700 18px/1 var(--font-head); font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------
   PRC-04. ЭКРАНЫ РЕЗУЛЬТАТА
   ------------------------------------------------------------ */
.pay-result {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--bg);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s6);
  animation: fade var(--t-drawer);
}
.pay-result__ico {
  width: 48px; height: 48px;
  margin: 0 auto var(--s4);
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: rgba(47, 190, 122, .14);
  color: var(--success);
}
.pay-result.is-fail .pay-result__ico { background: rgba(255, 107, 94, .12); color: var(--error); }
/* стеклянная картинка (views-money.js result), как у уведомлений */
.pay-result__art { display: block; width: 112px; height: 112px; margin: 0 auto var(--s4); object-fit: contain; }
.pay-result h2 { margin: 0; font: 800 28px/1.15 var(--font-head); letter-spacing: -.02em; }
.pay-result p { margin: var(--s3) 0 0; font: 400 16px/1.5 var(--font-ui); color: var(--text-2); max-width: 46ch; }
.pay-result .kept { font-size: 14px; color: var(--text-2); }
.pay-result__acts { display: flex; gap: var(--s2); justify-content: center; margin-top: var(--s6); flex-wrap: wrap; }
.pay-result a.check { display: inline-block; margin-top: var(--s4); font: 400 13px/1 var(--font-ui); color: var(--text-3); }
/* ------------------------------------------------------------
   PRC-06. МАЛО КРЕДИТОВ — ПОДСКАЗКА В СТУДИИ
   ------------------------------------------------------------ */
/* Ровный фон без градиентных пятен и без значка: градиент оставлен
   главной кнопке (аудит 19.10.2026). */
.low-credits {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s2) var(--s3);
  padding: var(--s4);
  margin-bottom: var(--s3);
  border-radius: var(--r-lg);
  border: 1px solid rgba(251, 69, 149, .28);
  background: var(--surface-2);
  font: 400 13px/1.45 var(--font-ui);
  color: var(--text-2);
}
.low-credits__body b {
  display: block;
  margin-bottom: 2px;
  font: 700 15px/1.25 var(--font-head);
  color: var(--text-1);
}
.low-credits__acts {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s1);
}
.low-credits__go { text-decoration: none; }
/* в колонке студии кнопки растягиваются во всю ширину — здесь не надо */
.low-credits__acts .btn { flex: 0 0 auto; width: auto; padding: 0 20px; }
@media (max-width: 560px) {
  .low-credits { grid-template-columns: minmax(0, 1fr); }
  .low-credits__acts { grid-column: 1; }
  .low-credits__acts .btn { flex: 1 1 auto; }
}
/* ------------------------------------------------------------
   PRC-07. ТАРИФЫ НА ТЕЛЕФОНЕ
   Карточки друг под другом, как на боевой странице тарифов (владелец
   21.10.2026). Карусель из прототипа прятала две цены из трёх, а её
   точки и липкая кнопка показывали не ту карточку, что на экране.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .plans { display: flex; flex-direction: column; gap: var(--s4); }
  .plan { flex: none; }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
  .pricing { gap: var(--s8); }
}
/* ===== ВХОД, ЧАТ, ПОДДЕРЖКА, АДМИНКА, ДОКУМЕНТЫ ===== */

/* ------------------------------------------------------------
   AUTH-01. ДВЕ КОЛОНКИ
   ------------------------------------------------------------ */
.auth {
  display: grid;
  grid-template-columns: minmax(340px, 1.05fr) minmax(280px, .95fr);
  gap: var(--s12);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--s12) var(--s6);
}
/* Поля и кнопки на экранах входа были во всю ширину колонки и
   растягивались почти на 540 px: строка ввода почты длиной с абзац
   выглядит нелепо и читается хуже. Ограничиваем саму форму, а не
   каждое поле по отдельности. */
.auth__form { min-width: 0; max-width: 400px; }
/* Заголовок и подзаголовок лежат на живом свете. Блок собственного
   размера не имеет: свет привязан к тексту, а не наоборот, — иначе при
   смене заголовка («Войдите» / «Создайте аккаунт и получите 10
   кредитов») пятно съезжало бы относительно строк. */
.auth__top { position: relative; isolation: isolate; }
/* На большом экране света за заголовком нет: там стоит витрина с
   кадрами, и второй источник света с ней спорит. */
.auth__glow { display: none; }
@media (max-width: 900px) { .auth__glow { display: block; } }
.auth__glow {
  position: absolute;
  left: 50%; top: 50%;
  /* Ровно по ширине колонки: шире — и на телефоне появляется прокрутка
     вбок. Края растворяет маска, поэтому границы всё равно не видно. */
  width: 100%; height: 280px;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
}
/* Холст сюда кладёт общий модуль WaveArt, поэтому и класс у него общий.
   Здесь свет тише, чем в ленте: за ним читают текст. */
.auth__glow .wave__art {
  /* Холст общий, и по умолчанию он шире блока на 20% с каждой стороны:
     в ленте это нужно, чтобы свет растекался, а здесь давало прокрутку
     вбок на телефоне. Вверх и вниз пусть растекается. */
  left: 0; right: 0; width: 100%;
  opacity: .95;
  /* Блок растянут вширь, и ленты в нём получаются плоскими и бледными.
     Насыщенность с яркостью возвращают им цвет, не трогая общий модуль. */
  filter: blur(var(--wave-blur, 0px)) saturate(1.45) brightness(1.3);
  -webkit-mask-image: radial-gradient(76% 68% at 50% 50%, #000 32%, rgba(0,0,0,.7) 60%, transparent 88%);
  mask-image: radial-gradient(76% 68% at 50% 50%, #000 32%, rgba(0,0,0,.7) 60%, transparent 88%);
}
.auth__h1 { margin: 0; font: 800 28px/1.15 var(--font-head); letter-spacing: -.02em;
  text-shadow: 0 2px 18px rgba(8, 6, 14, .55); }
.auth__lead { margin: var(--s3) 0 var(--s6); font: 400 15px/1.5 var(--font-ui); color: var(--text-2); }
.auth .field { margin-bottom: var(--s4); }
.auth .field__input { height: 48px; }
.auth .btn { width: 100%; height: 48px; }
.auth__or {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s4) 0;
  font: 400 12px/1 var(--font-ui);
  color: var(--text-3);
}
.auth__or::before, .auth__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-2);
}
.auth__yandex { display: flex; align-items: center; justify-content: center; gap: var(--s2); }
.auth__yandex i {
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: #fc3f1d;
  color: #fff;
  font: 700 13px/1 var(--font-ui);
  font-style: normal;
}
.auth__pros { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s6); }
.auth__pros div { display: flex; gap: var(--s2); font: 400 13px/1.4 var(--font-ui); color: var(--text-2); }
.auth__legal { margin-top: var(--s6); font: 400 12px/1.5 var(--font-ui); color: var(--text-3); }
.auth__legal a { color: var(--text-2); text-decoration: underline; }
.auth__art {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.auth__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auth__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 7, 12, .92) 8%, transparent 70%);
}
.auth__cap { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; }
.art__cap { position: absolute; left: 24px; right: 24px; bottom: 56px; z-index: 3; }
.art__cap .kicker { color: var(--accent); }
.art__cap h3 { margin: 6px 0 4px; font: 800 22px/1.2 var(--font-head); color: #fff; letter-spacing: -.015em; }
.art__cap p { margin: 0; font: 400 13px/1.45 var(--font-ui); color: rgba(255, 255, 255, .72); }
.auth__cap .kicker { color: var(--accent); }
.auth__cap h3 { margin: 6px 0 4px; font: 800 22px/1.2 var(--font-head); color: #fff; letter-spacing: -.015em; }
.auth__cap p { margin: 0; font: 400 13px/1.45 var(--font-ui); color: rgba(255, 255, 255, .72); }
.auth__play {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 3;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.auth__cap.has-play { padding-left: 64px; }
.auth__bar { height: 2px; margin-top: var(--s3); background: rgba(255, 255, 255, .25); border-radius: 1px; }
.auth__bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 1px; }
/* AUTH-03, AUTH-05 */
.sent { animation: fade var(--t-hover); }
.sent__ico {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: var(--s4);
}
.sent.is-old .sent__ico { background: rgba(255, 107, 94, .12); color: var(--error); }
.sent h2 { margin: 0 0 var(--s3); font: 800 22px/1.2 var(--font-head); letter-spacing: -.015em; }
.sent p { margin: 0 0 var(--s3); font: 400 15px/1.5 var(--font-ui); color: var(--text-2); }
.sent .hint { font: 400 12px/1.4 var(--font-ui); color: var(--text-3); }
.sent__links { display: flex; gap: var(--s4); margin-top: var(--s4); }
.sent__links button {
  border: 0;
  background: none;
  padding: 0;
  font: 600 13px/1 var(--font-ui);
  color: var(--text-2);
  cursor: pointer;
}
.sent__links button:disabled { color: var(--text-3); cursor: default; }
.sent__links button:not(:disabled):hover { color: var(--text-1); }
/* AUTH-04. Плашка про cookie снята 18.09.2026, стилей ей больше не надо. */
@media (max-width: 900px) {
  .auth {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
    /* Отступ сверху больше: логотип и заголовок не должны стоять
       впритык, между ними воздух. */
    /* Шкала отступов — 4/8/12/16/20/24/28/32/48/64; --s10 в ней нет, и
       с ней весь отступ слетал в ноль, а заголовок прилипал к логотипу. */
    padding: var(--s8) var(--s4);
    /* Вход занимает целый экран, поэтому подвал за него не заглядывает.
       Раньше он начинался на 630-й точке при экране 844 и лез в глаза
       сразу, хотя человек ещё не ввёл почту. Единица svh — это высота
       без адресной строки браузера, обычный vh на телефоне считает её
       как будто строки нет, и экран выходит выше настоящего. */
    min-height: calc(100svh / var(--zoom, 1) - 64px);
    /* Вся конструкция — от заголовка до строки про персональные данные —
       стоит посередине экрана, а не жмётся к шапке. Просьба владельца
       22.09.2026. */
    align-content: center;
  }
}
@supports not (height: 100svh) {
  @media (max-width: 900px) { .auth { min-height: calc(100vh / var(--zoom, 1) - 64px); } }
}
/* ------------------------------------------------------------
   CHT-01, SUP-02. МЕССЕНДЖЕР
   ------------------------------------------------------------ */
/* лента без ограничения ширины растягивает реплики на весь экран */
.chat {
  display: flex;
  flex-direction: column;
  height: calc(var(--vh) - 72px - var(--player-h));
  max-width: 720px;
  width: 100%;
}
.chat__feed { flex: 1; overflow: auto; padding: var(--s6) 0; scrollbar-width: none; }
.chat__feed::-webkit-scrollbar { display: none; }
.msg {
  max-width: 76%;
  padding: 11px 14px;
  border-radius: var(--r-lg);
  font: 400 14px/1.5 var(--font-ui);
  margin-bottom: var(--s3);
}
.msg--bot { background: var(--surface-2); color: var(--text-1); border-bottom-left-radius: 6px; margin-right: auto; }
.msg--me {
  background: var(--accent-soft);
  border: 1px solid rgba(253, 66, 156, .34);
  color: var(--text-1);
  border-bottom-right-radius: 6px;
  margin-left: auto;
}
.msg__time { display: block; margin-top: 4px; font: 400 11px/1 var(--font-ui); color: var(--text-3); opacity: 0; }
.msg:hover .msg__time { opacity: 1; }
.msg__state { display: flex; align-items: center; gap: 4px; justify-content: flex-end;
  margin: -8px 0 var(--s3); font: 400 11px/1 var(--font-ui); color: var(--text-3); }
.chat__chips { margin-bottom: var(--s4); }
.chat__composer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--s2);
  padding: var(--s3) 0;
  background: var(--bg);
}
.chat__composer .field { flex: 1; }
.chat__composer textarea {
  min-height: 44px;
  max-height: 120px;
  padding: 11px 14px;
  resize: none;
}
.chat__send {
  width: 44px; height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.chat__send:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }
.chat__got { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.chat__got .tag { display: inline-flex; align-items: center; gap: 6px; }
.chat__got .tag button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; opacity: .7; }
.chat__acts { display: flex; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
/* CHT-04 */
/* ---------- помощник: три колонки ----------
   Список разговоров, сам разговор и «Мои треки». Раньше список и
   разговор лежали на одном фоне и сливались, а справа пустовала
   половина экрана. Теперь у каждой колонки своя поверхность, и
   границу видно без линейки. */
.chat-wrap {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 360px;
  gap: var(--s5);
  align-items: start;
}
.chat-hist {
  position: sticky;
  top: var(--s6);
  padding: var(--s3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
/* разговор стоит на своей поверхности, чуть светлее фона страницы */
.chat--pane {
  max-width: none;
  padding: 0 var(--s5);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}
.chat--pane .chat__feed { padding: var(--s5) 0; }
.chat-mine { position: sticky; top: var(--s6); }
/* в узкой колонке переключать вид нечем: он всегда список */
.mine--compact .view { display: none; }
.chat-hist__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s3);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-2);
  font: 400 14px/1.35 var(--font-ui);
  cursor: pointer;
}
.chat-hist__item b { display: block; color: var(--text-1); font-weight: 600; }
.chat-hist__item span { font-size: 12px; color: var(--text-3); }
.chat-hist__item.is-on, .chat-hist__item:hover { background: var(--surface-2); }
/* на узком экране колонки уходят по очереди: сначала «Мои треки»,
   потом список разговоров. Разговор остаётся всегда */
@media (max-width: 1360px) {
  .chat-wrap { grid-template-columns: 260px minmax(0, 1fr); }
  .chat-mine { display: none; }
}
@media (max-width: 1100px) {
  .chat-wrap { grid-template-columns: minmax(0, 1fr); }
  .chat-hist { display: none; }
  .chat--pane { padding: 0 var(--s4); }
}
/* ------------------------------------------------------------
   ADM-01. ГЛАВНАЯ АДМИНКИ
   ------------------------------------------------------------ */
.adm-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s8); }
.adm-card {
  display: block;
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  text-decoration: none;
}
.adm-card:hover { border-color: var(--border-1); }
.adm-card .kicker { display: block; margin-bottom: var(--s2); }
.adm-card b { font: 800 28px/1.1 var(--font-head); font-variant-numeric: tabular-nums; color: var(--text-1); }
.adm-card em { font-style: normal; font: 600 12px/1 var(--font-ui); margin-left: var(--s2); }
.adm-card em.up { color: var(--warning); }
.adm-card em.down { color: var(--success); }
.adm-rows { display: flex; flex-direction: column; }
.adm-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--border-2);
  text-decoration: none;
  color: var(--text-1);
}
.adm-row:hover { background: var(--surface-2); }
.adm-row b { display: block; font: 700 15px/1.3 var(--font-ui); }
.adm-row span { display: block; font: 400 13px/1.35 var(--font-ui); color: var(--text-2); }
.adm-row .n { font: 600 14px/1 var(--font-ui); color: var(--text-2); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .adm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.adm-pager { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4);
  font: 400 13px/1 var(--font-ui); color: var(--text-3); }
.adm-pager .btn { margin-left: auto; }
/* ------------------------------------------------------------
   LEG-01. ПРАВОВЫЕ ДОКУМЕНТЫ
   ------------------------------------------------------------ */
.legal { display: grid; grid-template-columns: 260px minmax(0, 68ch); gap: var(--s12); align-items: start; }
.legal__toc { position: sticky; top: var(--s6); }
.legal__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal__toc a {
  display: block;
  padding: 6px 0;
  font: 400 13px/1.4 var(--font-ui);
  color: var(--text-2);
  text-decoration: none;
}
.legal__toc a:hover { color: var(--text-1); }
.legal__toc a.is-on { color: var(--accent); }
.legal__body h1 { font: 800 28px/1.15 var(--font-head); letter-spacing: -.02em; margin: 0; }
.legal__date { margin: var(--s2) 0 var(--s6); font: 400 13px/1 var(--font-ui); color: var(--text-3); }
.legal__body h2 { font: 700 18px/1.25 var(--font-head); scroll-margin-top: var(--s6); margin: var(--s8) 0 var(--s3); }
/* прод выравнивает текст по ширине — в узкой колонке это даёт «реки» */
.legal__body p, .legal__body li {
  font: 400 16px/1.65 var(--font-ui);
  color: var(--text-2);
  text-align: left;
}
@media (max-width: 900px) {
  .legal { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .legal__toc { position: static; }
  .legal__toc summary { font: 600 14px/1 var(--font-ui); color: var(--text-2); cursor: pointer; padding: var(--s3) 0; }
}
/* ------------------------------------------------------------
   5.11. СКВОЗНЫЕ СОСТОЯНИЯ
   ------------------------------------------------------------ */
/* нет обложки — заглушка с иконкой, а не пустой прямоугольник */
.track__cover:empty::after,
.track__cover.is-blank::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad);
}
.cover-blank {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: rgba(255, 255, 255, .8);
}/* ------------------------------------------------------------
   ПРИЛОЖЕНИЕ: экран входа без плеера и таб-бара
   ------------------------------------------------------------ */
body[data-no-player="1"] .player,
body[data-no-player="1"] .tabbar { display: none; }
body[data-no-player="1"] .sidebar { display: none; }
body[data-no-player="1"] .app { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------------------
   ПРИЛОЖЕНИЕ: раскладка студии
   В снимках прода две колонки задавала его собственная вёрстка —
   здесь приложение стоит само, поэтому сетка своя.
   ------------------------------------------------------------ */
/* Ширину рабочей области тянут за границу, галерея занимает весь
   остаток — раньше лишняя ширина превращалась в щель между колонками. */
.studio-wrap {
  display: grid;
  grid-template-columns: var(--form-w, 660px) 17px minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.split {
  position: relative;
  align-self: stretch;
  min-height: 120px;
  cursor: col-resize;
  touch-action: none;
}
.split::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: var(--border-2);
  transition: background var(--t-hover), width var(--t-hover);
}
@media (hover: hover) and (pointer: fine) {
  .split:hover::before { width: 2px; background: var(--accent); }
}
.split:focus-visible { outline: none; }
.split:focus-visible::before { width: 2px; background: var(--accent); }
.split.is-drag::before { width: 2px; background: var(--accent); }
/* пока тянем — не выделяем текст и не ловим курсор чужими элементами */
body.is-splitting { user-select: none; cursor: col-resize; }
/* сама ручка остаётся живой: на ней держится захват мыши */
body.is-splitting .studio-wrap *:not(.split) { pointer-events: none; }
.studio-col { padding-right: var(--s6); }
.mine-col { padding-left: var(--s6); }
.studio-col { min-width: 0; }
.mine-col { position: sticky; top: var(--s8); min-width: 0; }
.mine-col .mine {
  height: calc(var(--vh) - var(--s8) * 2 - var(--player-h));
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
}
@media (max-width: 1180px) {
  .studio-wrap { grid-template-columns: minmax(0, 1fr) 17px minmax(0, 320px); }
}
@media (max-width: 900px) {
  /* на телефоне колонки складываются в одну — тянуть нечего */
  .studio-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .split { display: none; }
  .studio-col, .mine-col { padding-left: 0; padding-right: 0; }
  .mine-col { position: static; }
  .mine-col .mine { height: auto; background: none; border: 0; }
}

/* три тарифа рядом: на телефоне ниже включается карусель PRC-07.

   Потолок ширины ОБЯЗАТЕЛЕН. У страницы потолка нет (решение владельца:
   на широком мониторе лишнюю ширину забирает содержимое), и без него три
   плитки разъезжались на всю ширину монитора — по шестьсот точек каждая.
   Плитка тарифа от этого не становится понятнее: в ней короткие строки,
   и они просто повисают в пустоте. В прошлом дизайне ряд был шириной
   1060 — оставляем столько же. */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1060px;
  margin-inline: auto;
}
/* карточка тарифа — такой же отступ до первой секции, как между секциями */
.plan-card + .acc__sec { margin-top: var(--s12); }
/* На телефоне фильтры ленты стоят колонкой, но перенос из базового правила
   остаётся — колоночный flex с переносом растягивает строку чипов на всю
   их ширину и раздвигает страницу. Перенос выключаем. */
@media (max-width: 900px) { .feed__filters { flex-wrap: nowrap; } }
/* На телефоне заголовок и инструменты не помещаются в одну строку —
   переносим действия на свою строку, а не режем их. */
@media (max-width: 900px) {
  .page-head { flex-wrap: wrap; }
  .page-head__actions { flex: 1 1 100%; justify-content: flex-end; }
  .page-head__actions .field__input { width: 100%; }
}
/* ============================================================
   АДМИНКА: таблицы, метки, формы, цепочки каверов
   ============================================================ */
.adm-sec { margin-top: var(--s12); }
.adm-sec > .h2 { margin-bottom: var(--s2); }
.adm-sec > .body { margin: 0 0 var(--s4); max-width: 72ch; }
.adm-sec .adm-cards { margin-top: var(--s4); }
.adm-card__sub { display: block; margin-top: 6px; font: 400 12px/1.45 var(--font-ui); color: var(--text-3); }
.adm-period { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6); }
.adm-period .seg { flex: none; }
.adm-period__custom { display: flex; align-items: center; gap: var(--s2); color: var(--text-3); }
.adm-period__custom .field__input { width: 150px; height: 36px; }
.adm-tools { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.adm-tools .field__input { width: 280px; height: 36px; }
.adm-count { margin: 0 0 var(--s4); color: var(--text-3); }
.adm-mails { display: flex; flex-direction: column; gap: 6px; font: 400 13px/1.4 var(--font-ui); color: var(--text-2); }
.adm-mails div { padding: 6px 0; border-bottom: 1px solid var(--border-2); }
.adm-form { max-width: 640px; }
.adm-form .field { margin-bottom: var(--s4); }
.adm-form .btn--primary { margin-top: var(--s2); }
/* кнопки переносятся: на телефоне две кнопки в строку не влезают */
.adm-form__acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.adm-will { margin: -8px 0 var(--s4); color: var(--text-3); }

.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left;
  padding: 0 var(--s4) var(--s2) 0;
  font: 600 12px/1.35 var(--font-ui);
  color: var(--text-3);
  white-space: nowrap;
  border-bottom: 1px solid var(--border-2);
}
.tbl th.right, .tbl td.right { text-align: right; padding-right: 0; }
.tbl td {
  height: 56px;
  padding: var(--s2) var(--s4) var(--s2) 0;
  border-bottom: 1px solid var(--border-2);
  font: 400 14px/1.4 var(--font-ui);
  color: var(--text-2);
  vertical-align: middle;
}
.tbl td b { display: block; color: var(--text-1); font: 600 14px/1.35 var(--font-ui); }
.tbl .dim { display: block; font: 400 12px/1.35 var(--font-ui); color: var(--text-3); }
.tbl .num { font: 600 14px/1 var(--font-ui); color: var(--text-1); font-variant-numeric: tabular-nums; }
.tbl tr.is-clickable { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .tbl tr.is-clickable:hover td { background: var(--surface-2); } }
.tbl .btn--sm + .btn--sm { margin-left: var(--s2); }

.pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-full);
  font: 600 11px/1 var(--font-ui);
  white-space: nowrap;
}
.pill--gray { background: var(--surface-3); color: var(--text-2); }
.pill--green { background: rgba(47, 190, 122, .16); color: var(--success); }
.pill--amber { background: rgba(245, 166, 92, .16); color: var(--warning); }
.pill--red { background: rgba(255, 107, 94, .14); color: var(--error); }
.pill--pink { background: var(--accent-soft); color: var(--accent); }
.code {
  font: 500 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 4px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* диагностика каверов */
.chain {
  padding: var(--s4);
  margin-bottom: var(--s3);
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
}
.chain__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.chain__head b { font: 700 16px/1.3 var(--font-ui); margin-right: var(--s2); }
.chain__head .dim { display: block; margin-top: 4px; font: 400 12px/1.4 var(--font-ui); color: var(--text-3); }
.chain__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: var(--s4) 0; }
.chain__step {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font: 400 13px/1.35 var(--font-ui);
  color: var(--text-2);
}
.chain__step.is-empty { opacity: .55; }
.chain__step em { display: block; font-style: normal; font-size: 11px; color: var(--text-3); }
.chain__more summary { font: 600 13px/1 var(--font-ui); color: var(--text-2); }
.chain__more .kicker { display: block; margin: var(--s3) 0 4px; }
.chain__more .body { margin: 0; }
@media (max-width: 900px) { .chain__steps { grid-template-columns: 1fr; } }

/* лаборатория каверов */
.lab__check { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2);
  font: 400 14px/1.4 var(--font-ui); color: var(--text-2); cursor: pointer; }
.lab__check input { width: 18px; height: 18px; accent-color: var(--accent); }
.lab__models { display: flex; flex-direction: column; }
.lab__model { height: auto; padding: var(--s3) var(--s4); align-items: flex-start; }
.lab__model span span { display: block; margin-top: 4px; }
.lab__out { max-width: 640px; margin-top: var(--s4); }
.lab .drop { margin-bottom: var(--s3); }
/* ============================================================
   ТАРИФЫ: тёплое свечение и карточки как на проде
   ============================================================ */
.app { position: relative; z-index: 1; }
.pricing-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 560px at 50% -10%, rgba(253, 66, 156, .17), transparent 62%),
    radial-gradient(760px 460px at 8% 26%, rgba(245, 140, 90, .11), transparent 58%),
    radial-gradient(820px 520px at 94% 6%, rgba(150, 90, 255, .09), transparent 60%);
}
.pricing__head { margin-bottom: var(--s8); }
.pricing__head h1 { font-size: 40px; line-height: 1.08; }
.pricing__seg { flex-direction: column; align-items: center; gap: var(--s3); }
.pricing__note { margin: 0; font: 400 13px/1.4 var(--font-ui); color: var(--text-3); }
.seg--big { height: 52px; padding: 5px; border-radius: var(--r-full); }
.seg--big .seg__item {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 42px;
  padding: 0 22px;
  gap: 10px;
  white-space: nowrap;
  font: 600 15px/1 var(--font-ui);
  border-radius: var(--r-full);
}
.seg--big .seg__item[aria-selected="true"] {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 6px 24px rgba(253, 66, 156, .28);
}
.seg__badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-2);
  font: 700 11px/1 var(--font-ui);
  white-space: nowrap;
}
.seg--big .seg__item[aria-selected="true"] .seg__badge { background: #fff; color: var(--accent); }
@media (max-width: 900px) {
  .pricing__head h1 { font-size: 28px; }
  /* Две половины в строку, а не два овала столбиком внутри третьего:
     так переключатель выглядел сломанным (аудит 19.10.2026). Плашку
     «до 30%» на узком экране прячем, чтобы подписи влезли. */
  .seg--big { width: 100%; height: auto; flex-direction: row; }
  .seg--big .seg__item { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 12px; font-size: 14px; }
}

.plan__badge {
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 28px;
  margin-bottom: var(--s3);
  padding: 0 14px;
  border-radius: var(--r-full);
  background: var(--grad);
  color: #fff;
  font: 700 11px/1 var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.plan.is-best { box-shadow: 0 0 0 1px var(--accent), 0 18px 60px rgba(253, 66, 156, .12); }
/* Плашка «Популярный» стоит внутри карточки и сдвигала цену и кнопку
   «Профи» ниже, чем у соседей: сравнивать цены глазом по строке было
   нельзя. На компьютере у остальных карточек под неё такое же место
   (проверка скиллом interface-design, 21.10.2026). */
@media (min-width: 901px) {
  .plans .plan:not(.is-best)::before { content: ""; display: block; flex: none; height: calc(28px + var(--s3)); }
}
/* Плитка собрана плотнее: цена крупная, а всё вокруг неё — короткие
   пояснения, и держать между ними по два десятка точек незачем. */
.plan__price { margin-top: var(--s3); }
.plan__price .num { font-size: 30px; }
.plan__terms { margin: 4px 0 0; font: 400 12px/1.4 var(--font-ui); color: var(--text-3); }
.plan__what { margin: var(--s2) 0 0; font: 400 13px/1.4 var(--font-ui); color: var(--text-2); }
.plan__per {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  align-self: flex-start;
  margin: var(--s2) 0 0;
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-1);
  font: 700 15px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.plan__per span { font: 400 13px/1 var(--font-ui); color: var(--text-3); }
.plan__per.is-best { background: var(--accent-soft); color: var(--accent); }
.plan__per.is-best span { color: var(--accent); opacity: .8; }
.plan .btn { margin: var(--s4) 0 6px; }
.plan__cancel { margin: 0 0 var(--s4); text-align: center; font: 400 12px/1.35 var(--font-ui); color: var(--text-3); }
.plan__kicker { display: block; margin-bottom: var(--s2); }
/* ============================================================
   ПОМОЩНИК: раскладка мессенджера
   Прокручивается лента сообщений, а не страница; поле ввода
   всегда прижато к низу; непрочитанные разговоры горят.
   ============================================================ */
body[data-screen="chat"] .content {
  height: var(--vh);
  max-height: var(--vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: var(--s4);
}
body[data-screen="chat"] .page-head { flex: none; }
.chat-wrap { flex: 1; min-height: 0; align-items: stretch; }
.chat-hist {
  position: static;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--border-2);
  padding-right: var(--s3);
}
.chat-hist__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--s3) var(--s2);
  flex: none;
}
.chat-hist__list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.chat-hist__list::-webkit-scrollbar { display: none; }
.chat-hist__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--s2);
  margin-bottom: 2px;
}
.chat-hist__item b { grid-column: 1; font: 600 14px/1.3 var(--font-ui); }
.chat-hist__last {
  grid-column: 1;
  font: 400 12px/1.35 var(--font-ui);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-hist__meta {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font: 400 11px/1 var(--font-ui);
  color: var(--text-3);
}
.chat-hist__dot {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: #fff;
  font: 700 11px/1 var(--font-ui);
  font-style: normal;
}
/* непрочитанный разговор виден сразу */
.chat-hist__item.is-unread { background: rgba(253, 66, 156, .07); }
.chat-hist__item.is-unread b { color: var(--text-1); }
.chat-hist__item.is-unread .chat-hist__last { color: var(--text-2); }
/* Выбранный разговор лежит внутри своей панели, и подсветка тем же
   surface-2 с ней сливалась: красим его мягким акцентом. */
.chat-hist__item.is-on { background: var(--accent-soft); }
.chat-hist__item.is-on b { color: var(--accent); }

.chat { height: 100%; min-height: 0; }
.chat__feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--s4) var(--s4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.chat__feed .msg--me { align-self: flex-end; }
.chat__feed .msg--bot { align-self: flex-start; }
.chat__feed .msg__state { align-self: flex-end; }
.chat__bottom {
  flex: none;
  padding: var(--s3) var(--s4) 0;
  border-top: 1px solid var(--border-2);
  background: var(--bg);
}
.chat__composer { position: static; padding: var(--s3) 0 0; }
.chat__composer .field { flex: 1; min-width: 0; }
.chat__composer textarea {
  min-height: 44px;
  max-height: 140px;
  border-radius: var(--r-lg);
  overflow-y: auto;
}
.msg--typing { display: flex; gap: 4px; align-items: center; padding: 14px; }
.msg--typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  animation: typing 1s ease-in-out infinite;
}
.msg--typing i:nth-child(2) { animation-delay: .16s; }
.msg--typing i:nth-child(3) { animation-delay: .32s; }
@keyframes typing { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 1100px) {
  .chat-hist { display: none; }
}
@media (max-width: 900px) {
  body[data-screen="chat"] .content {
    height: calc(var(--vh) - 64px - var(--player-h));
    max-height: none;
  }
  .chat__bottom { padding: var(--s3) 0 0; }
  .chat__feed { padding: 0 0 var(--s3); }
}

/* ============================================================
   ПОДДЕРЖКА: всегда видимая кнопка справа
   ============================================================ */
.support-fab {
  /* круглая кнопка в углу, как на боевом сайте */
  position: fixed;
  right: var(--s6);
  bottom: calc(var(--player-h) + var(--s6));
  z-index: var(--z-drawer);
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 30px rgba(253, 66, 156, .32), var(--shadow-overlay);
  cursor: pointer;
  transition: transform var(--t-hover), box-shadow var(--t-hover);
}
@media (hover: hover) and (pointer: fine) {
  .support-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(253, 66, 156, .42); }
}
.support-fab:active { transform: scale(.95); }
.support-fab .dot {
  position: absolute;
  top: 2px; right: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px var(--accent);
}
/* «Наверх» в ленте встаёт над кнопкой поддержки, а не под неё */
.feed__top { bottom: calc(var(--player-h) + var(--s6) + 68px); }
/* на экране помощника внизу поле ввода — кнопку поднимаем */
body[data-screen="chat"] .support-fab { bottom: calc(var(--player-h) + 128px); }
@media (max-width: 900px) {
  .support-fab {
    right: var(--s4);
    bottom: calc(64px + var(--player-h) + env(safe-area-inset-bottom, 0px) + var(--s3));
    width: 52px; height: 52px;
  }
  .feed__top { bottom: calc(64px + var(--player-h) + env(safe-area-inset-bottom, 0px) + 76px); }
  body[data-screen="chat"] .support-fab {
    bottom: calc(64px + var(--player-h) + env(safe-area-inset-bottom, 0px) + 96px);
  }
}
/* сообщения прижаты к низу, как в мессенджерах */
.chat__feed > .msg:first-child { margin-top: auto; }
/* В помощнике сообщения лежат во внутренней колонке (.chat__col), и правило
   выше их не находило: приветствие висело наверху над пустотой (проверка
   скиллом interface-design, 21.10.2026). Колонка во всю высоту ленты. */
.chat-wrap--full .chat__feed .chat__col { flex: 1 0 auto; }
.chat-wrap--full .chat__feed .chat__col > :first-child { margin-top: auto; }
/* ============================================================
   НИЧЕГО НЕ УЕЗЖАЕТ ПОД ПЛЕЕР
   Плеер лежит поверх страницы, поэтому липкие элементы должны
   стоять на его высоте, а не на нуле, а высота экрана чата —
   считаться за вычетом плеера. Пока ничего не играет,
   --player-h равен нулю и место не пропадает.
   ============================================================ */
body[data-screen="chat"] .content { height: calc(var(--vh) - var(--player-h)); }
@media (max-width: 900px) {
  body[data-screen="chat"] .content { height: calc(var(--vh) - 64px - var(--player-h)); }
}
/* ============================================================
   ПУБЛИЧНЫЕ СТРАНИЦЫ: верхняя строка, карусель обложек, подвал
   ============================================================ */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--s6);
  height: 64px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--s6);
}
.topbar__logo img { height: 26px; width: auto; display: block; }
/* На телефоне логотип мельче: он спорил с заголовком. Правило стоит
   здесь, а не в общем мобильном блоке выше, — тот лежит раньше по файлу
   и этой же строкой перебивался. */
@media (max-width: 900px) { .topbar__logo img { height: 21px; } }
.topbar__nav { display: flex; align-items: center; gap: var(--s5, 20px); margin-left: var(--s6); }
.topbar__nav a {
  font: 600 14px/1 var(--font-ui);
  color: var(--text-2);
  transition: color var(--t-hover);
}
@media (hover: hover) and (pointer: fine) { .topbar__nav a:hover { color: var(--text-1); } }
.topbar__auth { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.topbar__auth .btn[aria-current="page"] { color: var(--accent); }
.topbar__auth .btn--secondary[aria-current="page"] { border-color: var(--accent); color: var(--accent); }
@media (max-width: 760px) {
  .topbar { gap: var(--s3); padding: 0 var(--s4); }
  .topbar__nav { display: none; }
}

.auth__art { position: relative; }
.art__track { position: absolute; inset: 0; }
.art__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
}
.art__slide.is-on { opacity: 1; }
.art__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auth__art::after { z-index: 2; }
.art__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 11, 16, .55);
  color: #fff;
  opacity: 0;
  transition: opacity var(--t-hover), background var(--t-hover);
}
.auth__art:hover .art__nav, .art__nav:focus-visible { opacity: 1; }
.art__nav:hover { background: rgba(12, 11, 16, .8); }
.art__nav--prev { left: 12px; }
.art__nav--prev svg { transform: rotate(90deg); }
.art__nav--next { right: 12px; }
.art__nav--next svg { transform: rotate(-90deg); }
.art__dots {
  position: absolute;
  left: 0; right: 0;
  bottom: 20px;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.art__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .32);
  cursor: pointer;
  transition: background var(--t-hover), transform var(--t-hover);
}
.art__dot.is-on { background: var(--accent); transform: scale(1.25); }
@media (hover: none) { .art__nav { opacity: 1; } }

.foot {
  max-width: 1240px;
  margin: var(--s16) auto 0;
  padding: var(--s8) var(--s6) var(--s6);
  border-top: 1px solid var(--border-2);
}
.foot__top {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s8);
}
.foot__logo { height: 24px; width: auto; display: block; margin-bottom: var(--s3); }
.foot__about p { margin: 0; font: 400 13px/1.55 var(--font-ui); color: var(--text-3); max-width: 34ch; }
.foot__col { display: flex; flex-direction: column; gap: 10px; }
.foot__col .kicker { margin-bottom: 2px; }
.foot__col a, .foot__col span:not(.kicker) {
  font: 400 13px/1.35 var(--font-ui);
  color: var(--text-2);
  transition: color var(--t-hover);
}
@media (hover: hover) and (pointer: fine) { .foot__col a:hover { color: var(--accent); } }
.foot__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s8);
  padding-top: var(--s4);
  border-top: 1px solid var(--border-2);
  font: 400 12px/1.4 var(--font-ui);
  color: var(--text-3);
}
@media (max-width: 900px) {
  .foot { margin-top: var(--s12); padding: var(--s6) var(--s4) var(--s4); }
  .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
  .foot__about { grid-column: 1 / -1; }
  .foot__bottom { flex-direction: column; gap: var(--s2); }
}
/* пример трека прямо на входе */
.art__cap { display: flex; align-items: flex-end; gap: var(--s3); }
.art__txt { min-width: 0; flex: 1; }
.art__play {
  flex: none;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out);
}
.art__play:active { transform: scale(.94); }
.art__cap .auth__bar { margin-top: 10px; }
/* ------------------------------------------------------------
   Ящик не залезает под плеер и таб-бар: иначе при играющей музыке
   кнопки «Оплатить», «Продолжить» и «Отправить» оказывались под
   панелью и до них было не дотянуться.
   ------------------------------------------------------------ */
.drawer { bottom: var(--player-h); }
.backdrop { bottom: 0; }
/* На телефоне шторка выше плеера и таб-бара по слою (91 против 60–61),
   поэтому отступ над ними не нужен: он оставлял под шторкой тёмную полосу
   со старым плеером (проверка скиллом interface-design, 21.10.2026).
   Прижимаем к низу экрана, нижний край — с запасом под полосу iPhone. */
@media (max-width: 900px) {
  .drawer {
    bottom: 0;
    height: auto;
    max-height: calc(var(--vh) * .88);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}
/* полноэкранный плеер и экран результата оплаты перекрывают всё сами */
.fs, .pay-result { bottom: 0; }
/* ------------------------------------------------------------
   МЕНЮ: два состояния вместо длинного списка со скроллом
   Обычное меню и меню админки показываются целиком — прокрутка
   в сайдбаре появляться не должна.
   ------------------------------------------------------------ */
.sidebar__nav { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.sidebar__nav::-webkit-scrollbar { display: none; }
.sidebar__nav--admin { display: none; }
body[data-nav="admin"] .sidebar__nav--main { display: none; }
body[data-nav="admin"] .sidebar__nav--admin { display: block; }
/* свободное место — между меню и нижним блоком, а не за счёт меню */
.sidebar__nav + .sidebar__nav { margin-bottom: auto; }
.sidebar__nav--main { margin-bottom: auto; }
body[data-nav="admin"] .sidebar__nav--admin { margin-bottom: auto; }

.nav-item--admin .nav-item__chev { margin-left: auto; display: inline-flex; transform: rotate(-90deg); opacity: .6; }
.nav-item--back { color: var(--text-3); margin-bottom: var(--s2); }
.nav-item--back:hover { color: var(--text-1); }
/* разделы админки: их пятнадцать, поэтому строки чуть плотнее */
.sidebar__nav--admin .nav-item { height: 30px; font-size: 13px; padding-left: 14px; }
.sidebar__nav--admin .nav-item--back { height: 36px; font-size: 14px; padding-left: 12px; }
.sidebar__nav--admin .kicker { padding: 6px 20px 4px; }
/* Значок и заголовок на экранах письма — одной строкой, значок слева */
.sent__head { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.sent__head .sent__ico { flex: none; margin-bottom: 0; }
.sent__head h2 { margin: 0; }
@media (max-width: 900px) {
  .sent__head { gap: var(--s3); }
  .sent__head .sent__ico { width: 44px; height: 44px; }
}
/* ============================================================
   SUP-01. ОКНО ПОДДЕРЖКИ — как на боевом сайте
   Панель в углу: шапка градиентом, переписка, поле со скрепкой
   и круглой кнопкой отправки.
   ============================================================ */
.sup {
  position: fixed;
  right: var(--s6);
  bottom: calc(var(--player-h) + var(--s6));
  z-index: var(--z-drawer);
  width: 360px;
  height: min(calc(var(--vh) * .70), 520px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-overlay);
  animation: sup-in var(--t-drawer) var(--ease-drawer);
}
@keyframes sup-in { from { opacity: 0; transform: translateY(12px); } }
/* пока окно открыто, кнопка-ярлык не мозолит глаз */
body[data-sup="open"] .support-fab { display: none; }

.sup__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--grad);
  color: #fff;
  flex: none;
}
.sup__ava { display: grid; place-items: center; flex: none; }
.sup__who { flex: 1; min-width: 0; }
.sup__who b { display: block; font: 600 14px/1.25 var(--font-ui); }
.sup__who span { display: block; font: 400 11px/1.3 var(--font-ui); opacity: .9; }
.sup__x {
  flex: none;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: background var(--t-hover);
}
.sup__x:hover { background: rgba(255, 255, 255, .18); }

.sup__feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s4);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
}
.sup__feed > .msg:first-of-type { margin-top: auto; }
.sup__feed .msg { max-width: 85%; margin: 0; font-size: 13px; }
.sup__feed .msg--me {
  align-self: flex-end;
  background: var(--grad);
  border: 0;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.sup__feed .msg--me .msg__time { color: rgba(255, 255, 255, .75); }
.sup__feed .msg--bot { align-self: flex-start; border-bottom-left-radius: 4px; }
.sup__ctx {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: var(--s2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-3);
}
.sup__ctx img { width: 36px; height: 36px; border-radius: var(--r-sm); object-fit: cover; }
.sup__ctx b { display: block; font: 600 13px/1.3 var(--font-ui); color: var(--text-1); }
.sup__ctx span span { font: 400 11px/1.3 var(--font-ui); }

.sup__foot { flex: none; padding: 10px; border-top: 1px solid var(--border-2); background: var(--surface-1); }
.sup__topics { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
.sup__topics::-webkit-scrollbar { display: none; }
.sup__topics .chip { flex: none; height: 28px; font-size: 12px; padding: 0 10px; }
.sup__row { display: flex; align-items: flex-end; gap: 8px; }
.sup__clip, .sup__send {
  flex: none;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--t-hover), opacity var(--t-hover);
}
.sup__clip { background: none; color: var(--text-3); }
.sup__clip:hover { background: var(--surface-2); color: var(--text-1); }
.sup__send { background: var(--grad); color: #fff; }
.sup__send:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }
.sup__input {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  max-height: 110px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--border-1);
  color: var(--text-1);
  font: 400 13px/1.4 var(--font-ui);
  resize: none;
  outline: none;
  transition: border-color var(--t-hover), box-shadow var(--t-hover);
}
.sup__input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.sup__input::placeholder { color: var(--text-ph); font-size: 14px; }

@media (max-width: 900px) {
  .sup {
    right: var(--s3);
    left: var(--s3);
    width: auto;
    height: min(calc(var(--vh) * .72), 480px);
    bottom: calc(64px + var(--player-h) + env(safe-area-inset-bottom, 0px) + var(--s2));
  }
}

/* полоса плеера: три группы, управление посередине */
.player__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.player__right { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
@media (max-width: 900px) {
  /* на телефоне полоса та же, но по краям меньше воздуха */
  .player { padding: 0 12px; gap: 8px; }
  .player__right { display: none; }
  .player__left { gap: 8px; }
  /* Две правки одним куском.
     1. Плеер стоял тем же цветом, что и таб-бар, и они читались одной
        плашкой: непонятно, где меню, а где музыка. Делаем плеер
        светлее, а таб-бар уводим в цвет страницы.
     2. Управление стояло по центру полосы, а по центру таб-бара под
        ним круглая кнопка «Создать»: две круглые кнопки вставали
        друг над другом. Управление уходит вправо. */
  .player {
    grid-template-columns: minmax(0, 1fr) auto;
    background: var(--surface-3);
    border-top: 0;
    /* прямые углы (владелец 30.10.2026): скругление было лишним, и над ним
       торчали концы полосы прогресса тёмными точками */
    border-radius: 0;
  }
  .tabbar { background: var(--bg); }
  .player__controls { justify-content: flex-end; gap: 2px; }

  /* Полоса времени идёт по верхнему краю плеера. Снизу её перечёркивала
     приподнятая круглая кнопка «Создать» из таб-бара, и уменьшение
     кнопки не помогало: режет не размер, а сам подъём. Сверху полоса
     свободна во всю ширину и заодно отделяет ленту от плеера.
     Раньше она тут тоже стояла, но рисовалась на 11 px ниже своей
     обёртки из-за строчного поля — это чинится отдельно, выше по файлу. */
  .player__progress { top: 0; bottom: auto; height: 3px; }
  .player__progress::before { inset: 0 0 -8px; }
  .player__progress input { height: 3px; }
  /* бегунок пальцем не тянут, а места он занимает много */
  .player__progress input::-webkit-slider-thumb { display: none; }

  /* Всё управление мельче: в полосе 56 px круглая кнопка 44 упиралась
     в края и наезжала на соседей. */
  /* Полоса времени идёт по верхнему краю, поэтому содержимое смещаем
     вниз: математически оно и так по центру, но глаз считает полосу
     частью верхнего края и видит перекос. 5 px хватает. */
  .player { height: 64px; padding: 5px var(--s3) 0; }
  /* Сколько прошло и сколько всего — мелко под кнопками справа.
     Полоса времени показывает долю, а цифры отвечают на вопрос
     «успею ли дослушать». */
  .player__right {
    display: block;
    position: absolute;
    right: var(--s3);
    bottom: 4px;
    min-width: 0;
  }
  .player__right .player__time {
    display: block;
    font: 600 11px/1 var(--font-ui);
    color: var(--text-3);
  }
  .player__extra { display: none; }
  .player__controls { align-self: start; margin-top: 2px; }
  .player__cover { width: 36px; height: 36px; }
  /* Кнопка паузы без розового круга: рядом в таб-баре уже есть круглая
     розовая «Создать», и две одинаковые кляксы спорили друг с другом.
     Сама кнопка крупнее соседей, чтобы пальцем не промахнуться, а
     нажатие показывает себя сжатием и вспышкой подложки. */
  .player__play {
    width: 44px; height: 44px;
    background: none;
    color: var(--text-1);
    transition: transform var(--t-press) var(--ease-out), background var(--t-press);
  }
  .player__play svg { width: 28px; height: 28px; }
  .player__play:active { transform: scale(.86); background: rgba(255, 255, 255, .10); }
  /* 34 точки при масштабе 90 % давали ~31: палец попадал в «закрыть»
     вместо «следующего». Минимум 40 и зазор перед крестиком (проверка
     скиллом interface-design, 21.10.2026). */
  .player__controls .btn--icon { width: 40px; height: 40px; }
  .player__controls .player__close { margin-left: 4px; }
  .player__controls .btn--icon svg { width: 20px; height: 20px; }
  .player__title { font-size: 14px; }
  .player__sub { font-size: 11px; }

  /* Круглая кнопка «Создать» заходит на плеер сверху, а не прячется
     под ним: у таб-бара слой ниже, поэтому поднимаем его над плеером.
     По горизонтали они не спорят — кнопка по центру, управление справа. */
  .tabbar { z-index: calc(var(--z-player) + 1); }
}
/* На телефоне на экранах с липкой главной кнопкой (студия, звуки, тарифы)
   круглой поддержки нет: она лежала то на «Создать трек», то на полях
   формы и третьим розовым пятном спорила с главным действием (проверка
   скиллом interface-design, 21.10.2026). Поддержка там — в «Меню», а на
   тарифах ещё и в блоке «Мы рядом». */
@media (max-width: 900px) {
  body[data-screen="studio"] .support-fab,
  body[data-screen="sounds"] .support-fab,
  body[data-screen="pricing"] .support-fab { display: none; }
}

/* ------------------------------------------------------------
   ПАНЕЛИ ФОРМЫ СТУДИИ
   Минимализм: рамку рисует панель, а поля внутри её не имеют —
   иначе получается прямоугольник в прямоугольнике. Панель
   складывается и помнит своё состояние. Настройки идут строками
   «подпись слева, выбор справа», разделённые волоском.
   ------------------------------------------------------------ */
/* Решение владельца от 18.09.2026: панель залита, а не обведена.
   Раньше она была цвета страницы с еле заметной рамкой, и форма
   расползалась по тёмному фону: не видно, где кончается одна панель и
   начинается другая, а поля внутри висели в воздухе без признака
   «сюда пишут». Заливка решает и то и другое, не прибавляя высоты:
   поля внутри по-прежнему без своих коробок. Рамка при заливке лишняя,
   она остаётся прозрачной и проявляется только при вводе. */
.pan {
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--surface-2);
  overflow: hidden;
}
/* Зазор между панелями формы. 8 px при зуме 0.9 читались как 7 и панели
   слипались в одну стопку. 14 px это решение владельца от 14.09.2026:
   между ступенями шкалы 12 и 16, потому что 12 ещё тесно, а 16 уже
   разваливает форму. Единственное намеренное исключение из шкалы. */
.pan + .pan { margin-top: 14px; }
/* Пока пишут в поле, у панели проявляется контур: поля внутри своей
   рамки не имеют, и без этого непонятно, где сейчас курсор. Подсветка
   намеренно слабая — это подсказка, а не выделение. */
.pan:focus-within { border-color: rgba(255, 255, 255, .18); }
/* Всё, что лежит ВНУТРИ панели, поднимается на ступень: панель теперь
   сама цвета `--surface-2`, и список языка, круглые кнопки и плашки
   режимов на ней растворялись. */
.pan .rbtn,
.pan .pick,
.pan .seg { background: var(--surface-3); }
.pan .seg__item[aria-selected="true"] { background: var(--surface-hover); }
.pan__head { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s2) 0 0; }
.pan__toggle {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 var(--s3);
  border: 0;
  background: none;
  color: var(--text-2);
  font: 600 14px/1 var(--font-ui);
  cursor: pointer;
  text-align: left;
}
.pan__toggle svg { flex: none; transition: transform var(--t-hover); }
.pan__toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.pan__toggle--fixed { cursor: default; }
.pan__tools { display: flex; align-items: center; gap: 2px; flex: none; }
.pan__tool {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-3);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .pan__tool:hover { background: var(--surface-2); color: var(--text-1); }
}
.pan__tool:focus-visible { box-shadow: var(--ring); outline: none; }
.pan__body { padding: 0 var(--s3) var(--s3); }
.pan__body[hidden] { display: none; }
.pan__row { position: relative; }
.pan__row + .pan__row { margin-top: var(--s3); }
/* пояснение под полем: мельче текста, тем же цветом, что подсказки */
.pan__note { font: 400 12px/1.4 var(--font-ui); color: var(--text-3); }
/* заглушка вместо поля, когда текста не будет */
.stub {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 88px;
  padding: var(--s4);
  border: 1px dashed var(--border-1);
  border-radius: var(--r-md);
  color: var(--text-3);
  font: 400 14px/1.45 var(--font-ui);
}
.stub svg { flex: none; }
/* у переключателя способов задать текст значки рядом с подписью */
.seg[data-seg="lyrics"] .seg__item { gap: 6px; }
/* ряд под полем стиля: круглые кнопки и разбор строки на теги */
.srow { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; width: 100%; }
/* ряд правки текста стоит над полем и прижат вправо: слева читается
   заголовок панели, а кнопки собраны у края, как в прошлом дизайне */
.srow--end { justify-content: flex-end; }
.rbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex: none;
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
@media (hover: hover) and (pointer: fine) {
  .rbtn:hover:not(:disabled) { background: var(--surface-3); color: var(--text-1); }
}
.rbtn:focus-visible { outline: none; box-shadow: var(--ring); }
.rbtn:disabled { opacity: .4; cursor: default; }
/* «Исключить» — вторая половина вопроса о стиле, поэтому живёт в той
   же панели, но отделена волоском и помечена значком */
.pan__row--minus {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--border-2);
}
.pan__minus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: var(--text-3);
  font: 400 13px/1 var(--font-ui);
  white-space: nowrap;
}
/* Теги занимают всю строку под кнопками: иначе ряд считает ширину по
   содержимому и длинные приметы вылезают за край панели. */
.srow__tags { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  flex: 1 1 100%; min-width: 0; }
.stag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  max-width: min(100%, 280px);
  padding: 0 6px 0 12px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  font: 400 13px/1 var(--font-ui);
  white-space: nowrap;
}
/* Длинная примета обрезается многоточием, а не растягивает ряд во всю
   строку. Целиком её видно по наведению, в подсказке. */
.stag__t { overflow: hidden; text-overflow: ellipsis; }
.stag--more { color: var(--text-3); padding: 0 12px; }
.stag button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: none;
  color: var(--text-3);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .stag button:hover { background: var(--surface-3); color: var(--text-1); }
}
.stag button:focus-visible { outline: none; box-shadow: var(--ring); }
.pan__row--title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding-bottom: var(--s3);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--border-2);
  color: var(--text-3);
}
.pan__row--title + .pan__row { margin-top: 0; }
/* поле без своей коробки: рамку уже нарисовала панель */
.bare {
  width: 100%;
  border: 0;
  background: none;
  color: var(--text-1);
  font: 400 15px/1.5 var(--font-ui);
  padding: 0;
  resize: vertical;
}
.bare:focus, .bare:focus-visible { outline: none; box-shadow: none; }
.bare::placeholder {
  color: var(--text-ph);
  font: 400 14px/1.5 var(--font-ui);
  font-style: normal;
  opacity: 1;
}
textarea.bare { display: block; padding-bottom: 20px; }
/* РАСТУЩЕЕ ПОЛЕ (стиль, «исключить»).
   Выглядит как строка, но это textarea: со второй строки оно вырастает
   само, дальше не растёт. Ручку в углу показываем только когда текст
   уже не помещается, — на пустом поле она сбивает с толку и намекает,
   что тянуть надо всегда. */
textarea.bare.grow {
  padding-bottom: 0;
  overflow: hidden;
  resize: none;
  min-height: 0;
}
textarea.bare.grow.is-full { overflow: auto; resize: vertical; }
/* ------------------------------------------------------------
   ПОЛЗУНОК С НАСЕЧКАМИ
   Шкала из чёрточек: активная горит акцентом и выше остальных,
   показание стоит справа фиксированной колонкой, чтобы строки
   не дёргались, когда меняется длина числа.
   ------------------------------------------------------------ */
.eq {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 1;
  min-width: 0;
  padding: var(--s2) 0;
  cursor: pointer;
  touch-action: none;
}
.eq__bars {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  height: 20px;
}
.eq__bars i {
  width: 2px;
  height: 11px;
  border-radius: 1px;
  background: var(--border-1);
  transition: background var(--t-hover), height var(--t-hover);
}
.eq__bars i.is-on {
  height: 20px;
  width: 4px;
  border-radius: var(--r-full);
  background: var(--accent);
}
.eq__val {
  flex: none;
  width: 52px;
  text-align: right;
  color: var(--text-1);
  font: 400 13px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.eq:focus-visible { outline: none; }
.eq:focus-visible .eq__bars { box-shadow: var(--ring); border-radius: var(--r-sm); }
@media (hover: hover) and (pointer: fine) {
  .eq:hover .eq__bars i { background: var(--border-1); }
  .eq:hover .eq__bars i.is-on { background: var(--accent-hover); }
}
.eq.is-drag .eq__bars i.is-on { background: var(--accent); }
@media (max-width: 560px) {
  .orow__t { width: auto; }
  .eq { width: 100%; }
}
/* строка настройки */
.orow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 48px;
  padding: var(--s2) 0;
}
.orow + .orow { border-top: 1px solid var(--border-2); }
/* подпись — колонка постоянной ширины, иначе длинное пояснение
   толкает ползунок и шкалы начинаются на разной высоте строки */
.orow__t {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: none;
  width: 170px;
  font: 400 14px/1.3 var(--font-ui);
  color: var(--text-2);
}
/* Подпись настройки и значок пояснения стоят в строку: пояснение
   уехало в подсказку, второй строки под названием больше нет. */
.orow__t { flex-direction: row; align-items: center; gap: var(--s1); }
.orow__i {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: none;
  color: var(--text-3);
  cursor: help;
}
@media (hover: hover) and (pointer: fine) {
  .orow__i:hover { color: var(--accent); }
}
.orow__i:focus-visible { outline: none; box-shadow: var(--ring); color: var(--accent); }
/* на телефоне значок остаётся: по тапу показывается та же подсказка,
   иначе пояснение просто пропало бы */
@media (hover: none) { .orow__i { width: 28px; height: 28px; margin-left: -4px; } }
/* управление занимает всё, что осталось, — у всех строк одна левая граница */
.orow > :not(.orow__t) { margin-left: auto; }
/* свой список вместо системного: у системного стрелка прижата к краю
   и не слушается наших отступов */
.pick {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 36px;
  padding: 0 var(--s3);
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text-1);
  font: 400 14px/1 var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
}
.pick svg { flex: none; color: var(--text-3); }
@media (hover: hover) and (pointer: fine) { .pick:hover { background: var(--surface-3); } }
.pick:focus-visible { outline: none; box-shadow: var(--ring); }
.seg--tight { height: 36px; padding: 3px; flex: none; }
/* кнопка стала флексовой — пробел между подписью и ценой схлопывается,
   поэтому зазор задаём сами */
.seg--tight .seg__item { flex: none; gap: 5px; height: 30px; padding: 0 10px; font-size: 13px; }
.seg--tight .opt__cost { color: var(--text-3); font-variant-numeric: tabular-nums; }
.seg--tight .seg__item[aria-selected="true"] .opt__cost { color: var(--text-1); }
.seg--tight .is-pro[aria-selected="true"] { background: var(--accent-soft); }
.seg--tight .is-pro[aria-selected="true"] .opt__cost { color: var(--accent); }
@media (max-width: 560px) {
  .orow { flex-wrap: wrap; }
  /* Плашка занимает всю строку, и кнопки делят её поровну. Раньше здесь
     стояла прокрутка: у «Вокала» четыре кнопки не помещались в строку по
     своей ширине, и ряд ездил вбок. Но ездил он и там, где ездить нечему —
     у «Качества» всего две кнопки, а ряд всё равно дёргался на пару
     пикселей и справа зияла пустота в половину строки. Поровну — и
     помещается, и не дрожит. */
  .orow .seg--tight { width: 100%; overflow: visible; }
  .orow .seg--tight .seg__item {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 6px;
    gap: 4px;
  }
  .pick { width: 100%; justify-content: space-between; }
}

/* ============================================================
   ЛЕНТА КАК ПЛОЩАДКА ДЛЯ СЛУШАТЕЛЯ
   ТЗ от 14.09.2026. Три зоны, карточка трека справа, страница
   музыканта, плейлисты. Блок цельный: мобильные правила стоят
   в его конце, чтобы ничто ниже по файлу их не перебило.
   ============================================================ */

/* окно по центру: тело и низ */
.modal__body { flex: 1; min-height: 0; overflow: auto; margin-top: var(--s4); scrollbar-width: thin; }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s4); }

/* гостю меню показываем урезанным: только то, чем он может пользоваться */
body[data-guest="1"] .sidebar__nav--main li:not([data-guest]) { display: none; }
body[data-guest="1"] .sidebar__nav--main section:not(:has(li[data-guest])) { display: none; }
body[data-guest="1"] .sidebar__topup { display: none; }

/* ---------- раскладка ---------- */
.fd-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17px var(--card-w, 380px);
  align-items: start;
}
.fd-col { min-width: 0; padding-right: var(--s6); }
body.is-splitting .fd-wrap *:not(.split) { pointer-events: none; }

/* ---------- поиск ----------
   Свёрнутый это один значок у заголовка. По нажатию поле разворачивается
   влево, от правого края. Полем во всю строку он занимал первый экран
   ленты, хотя в ленту приходят слушать, а не искать. */
.fd-search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s1);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  transition: background var(--t-hover), border-color var(--t-hover);
}
.fd-search.is-open {
  padding-left: var(--s3);
  padding-right: 6px;          /* крестик прижимался к самому краю овала */
  border-color: var(--border-1);
  background: var(--surface-2);
}
.fd-search__clear { width: 34px; height: 34px; }
.fd-search.is-open:focus-within { border-color: rgba(255, 255, 255, .26); box-shadow: var(--ring); }
.fd-search__inp {
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  background: none;
  color: var(--text-1);
  font: 400 15px/1 var(--font-ui);
  outline: none;
  transition: width var(--t-drawer) var(--ease-drawer), opacity var(--t-hover);
}
.fd-search__inp::placeholder { color: var(--text-ph); font-size: 14px; }
.fd-search.is-open .fd-search__inp { width: 280px; opacity: 1; }
.fd-search.is-open .fd-search__go { color: var(--text-3); }
@media (max-width: 900px) {
  /* открытый поиск занимает всю строку под заголовком: 280 px в неё
     всё равно не поместятся рядом с «Лентой» */
  .page-head:has(.fd-search.is-open) { flex-wrap: wrap; }
  .page-head:has(.fd-search.is-open) .page-head__actions { flex: 1 1 100%; }
  .fd-search.is-open .fd-search__inp { width: 100%; flex: 1 1 auto; }
}
.fd-more { width: 100%; margin-top: var(--s4); }

/* ---------- карточка трека ---------- */
.fcard {
  position: sticky;
  top: var(--s8);
  margin-left: var(--s6);
  padding: var(--s4);
  max-height: calc(var(--vh) - var(--s8) * 2 - var(--player-h));
  overflow: auto;
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  scrollbar-width: none;
}
.fcard::-webkit-scrollbar { display: none; }
.fcard__close { display: none; }
.fcard--empty { display: grid; place-items: center; min-height: 320px; }
.fcard__hint { display: grid; justify-items: center; gap: var(--s3); padding: var(--s6); color: var(--text-3); text-align: center; }
.fcard__hint p { margin: 0; font: 400 13px/1.5 var(--font-ui); }
.fcard__cover {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
}
.fcard__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fcard__title { margin: var(--s4) 0 0; font: 800 20px/1.25 var(--font-head); letter-spacing: -.015em; }
.fcard__by { display: inline-block; margin-top: var(--s1); font: 600 13px/1.4 var(--font-ui); color: var(--accent); }
.fcard__tags { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.fcard__nums { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); font: 400 13px/1.4 var(--font-ui); color: var(--text-3); }
.fcard__nums span { display: inline-flex; align-items: center; gap: var(--s1); }
.fcard__acts { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.fcard__acts .btn--primary { flex: 1; }
.fcard__acts .fav.is-on { color: var(--accent); }
.fcard__radio { width: 100%; margin-top: var(--s2); }
/* Складные «Текст песни» и «Как сделан трек» в карточке — строкой, как
   «Ещё у автора», без своей заливки: было поле в поле (аудит 19.10.2026). */
.fcard .pan { margin-top: var(--s3); background: none; border: 0; border-top: 1px solid var(--border-2); border-radius: 0; }
.fcard .pan .pan__toggle { padding-left: 0; }
.fcard .pan .pan__body { padding-left: 0; padding-right: 0; }
.fcard .lyrics { max-height: calc(var(--vh) * .40); overflow: auto; scrollbar-width: thin; }
.fcard__prompt { margin: 0; font: 400 13px/1.5 var(--font-ui); color: var(--text-2); }

/* ссылки на площадки */
.fcard__links { margin-top: var(--s4); }
/* Площадки одним рядом прямоугольными знаками: подписи «ВК Музыка» и
   «Яндекс Музыка» ломали блок на две колонки, а знак и так узнаётся.
   Число колонок ставит разметка: сколько ссылок, столько плиток. */
.plat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s2); }
.plat__item {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
}
.plat__item svg { flex: none; color: var(--text-2); }
@media (hover: hover) and (pointer: fine) {
  .plat__item:hover { background: var(--surface-hover); color: var(--text-1); }
  .plat__item:hover svg { color: var(--accent); }
}

/* похожие */
.fcard__sim { margin-top: var(--s4); }
.fcard__simlist { display: grid; gap: var(--s1); margin-top: var(--s2); }
.simrow {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  min-height: 48px;
  padding: var(--s1) var(--s2) var(--s1) var(--s1);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: inherit;
  text-align: left;
}
.simrow__cov { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.simrow__cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.simrow__main { min-width: 0; display: grid; }
.simrow__main b { font: 600 13px/1.3 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.simrow__main span { font: 400 12px/1.3 var(--font-ui); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.simrow__time { font: 400 12px/1 var(--font-ui); color: var(--text-3); }
@media (hover: hover) and (pointer: fine) { .simrow:hover { background: var(--surface-2); } }

/* ---------- окно входа для гостя ---------- */
.modal.gate, .modal.plpick { width: min(440px, calc(100vw - 48px)); }
.gate__sub { margin: var(--s1) 0 0; font: 400 13px/1.45 var(--font-ui); color: var(--text-2); }
.gate__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.gate__list li { display: flex; align-items: center; gap: var(--s3); font: 400 14px/1.4 var(--font-ui); color: var(--text-2); }
.gate__list svg { flex: none; color: var(--accent); }

/* ---------- окно «в плейлист» ---------- */
.plpick__list { display: grid; gap: var(--s1); }
.plpick__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 56px;
  padding: var(--s2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: inherit;
  text-align: left;
}
.plpick__row.is-on { border-color: var(--accent); color: var(--text-1); }
.plpick__row.is-on > svg { color: var(--accent); }
.plpick__name { display: grid; min-width: 0; }
.plpick__name b { font: 600 14px/1.3 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plpick__name span { font: 400 12px/1.3 var(--font-ui); color: var(--text-3); }

/* ---- библиотека своих текстов ----
   Строка из двух частей: сам текст (по нему берут) и крестик. Кнопка
   внутри кнопки была бы недоступна с клавиатуры, поэтому это две
   отдельные кнопки в общей рамке. */
.lyrpick__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: var(--s2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.lyrpick__take {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.lyrpick__take b {
  font: 600 14px/1.3 var(--font-ui);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lyrpick__take span { font: 400 12px/1.3 var(--font-ui); color: var(--text-3); }
.lyrpick__take:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

/* обложка плейлиста из четырёх первых треков */
.plcov {
  display: grid;
  width: 100%; height: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-3);
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.plcov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plcov--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.plcov--2 { grid-template-rows: 1fr; }
.plcov--3 img:first-child { grid-row: span 2; }
.plcov--none { place-items: center; color: var(--text-3); grid-template-columns: 1fr; grid-template-rows: 1fr; }
.plpick__cov { display: block; width: 44px; height: 44px; }

/* ---------- список плейлистов ---------- */
.plgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s3);
  margin-top: var(--s4);
}
.plcard {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.plcard__cov { display: block; width: 64px; height: 64px; }
.plcard__main { display: grid; min-width: 0; gap: var(--s1); }
.plcard__main b { font: 700 15px/1.25 var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plcard__main span { font: 400 12px/1.3 var(--font-ui); color: var(--text-3); }

/* ---------- шапка плейлиста ---------- */
.plhead {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--s6);
  align-items: end;
  margin-bottom: var(--s6);
}
.plhead__cov { display: block; width: 180px; height: 180px; }
.plhead__main { min-width: 0; }
.plhead__main .h1 { margin: var(--s1) 0 0; }
.plhead__sub { margin: var(--s2) 0 0; font: 400 13px/1.4 var(--font-ui); color: var(--text-3); }
.plhead__acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* ---------- чарт ---------- */
.chart .track { grid-template-columns: 32px 64px minmax(180px, 1fr) auto auto auto; }
.chart__n { font: 700 16px/1 var(--font-head); color: var(--text-3); text-align: center; }
.chart__n.is-top { font-size: 22px; color: var(--text-1); }

/* ============================================================
   СТРАНИЦА МУЗЫКАНТА
   ============================================================ */
.art__hero {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.art__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(2px);
  transform: scale(1.06);
}
/* затемнение поверх обложки: иначе имя не читается на светлом кадре */
.art__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 11, 16, .35) 0%, rgba(12, 11, 16, .88) 100%);
}
.art__in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s4);
  min-height: 240px;
  padding: var(--s6);
}
.art__ava {
  display: grid;
  place-items: center;
  width: 96px; height: 96px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  border: 2px solid rgba(255, 255, 255, .18);
  font: 800 36px/1 var(--font-head);
  color: var(--text-1);
}
.art__id { min-width: 0; }
.art__name { margin: 0; font: 800 34px/1.1 var(--font-head); letter-spacing: -.02em; }
.art__nick { margin: var(--s1) 0 0; font: 400 14px/1.3 var(--font-ui); color: var(--text-3); }
.art__nums { display: flex; gap: var(--s4); margin: var(--s2) 0 0; font: 400 13px/1.3 var(--font-ui); color: var(--text-2); }
.art__nums span { display: inline-flex; align-items: center; gap: var(--s1); }
.art__acts { display: flex; align-items: center; gap: var(--s2); }
.art__follow[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.art__play {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--grad);
  color: #fff;
}
.art__play:focus-visible { box-shadow: var(--ring); outline: none; }

.art__stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.stat {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 36px;
  padding: 0 var(--s3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  background: var(--surface-1);
  font: 600 13px/1 var(--font-ui);
  color: var(--text-2);
}
.stat svg { color: var(--text-3); }
.art__stats-acts { display: flex; gap: var(--s1); margin-left: auto; }

/* закреплённый трек */
.art__pin {
  margin-top: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.art__pin-mark { display: inline-flex; align-items: center; gap: var(--s1); font: 600 12px/1 var(--font-ui); color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.art__pin-body { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); margin-top: var(--s3); }
.art__pin-cov { display: block; width: 72px; height: 72px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.art__pin-cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art__pin-main { display: grid; gap: var(--s1); min-width: 0; }
.art__pin-main b { font: 700 16px/1.25 var(--font-head); }
.art__pin-main span { display: inline-flex; align-items: center; gap: 4px; font: 400 12px/1.3 var(--font-ui); color: var(--text-3); }
.art__pin-acts { display: flex; gap: var(--s2); }

.art__sec { margin-top: var(--s8); }
.art__sec-head { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s3); }
.art__sec-head .h2 { margin: 0; }
.art__sec-n { font: 400 13px/1 var(--font-ui); color: var(--text-3); }
.art__songs { --cols: 1; }
.art__tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s3); }
.artpack {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--s3);
  padding: var(--s2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.artpack__cov { grid-row: span 2; width: 56px; height: 56px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.artpack__cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artpack b { align-self: end; font: 700 14px/1.25 var(--font-head); }
.artpack span { align-self: start; font: 400 12px/1.3 var(--font-ui); color: var(--text-3); }
@media (hover: hover) and (pointer: fine) {
  .artpack:hover { background: var(--surface-2); }
  .plcard:hover { background: var(--surface-2); }
}

/* ---------- узкий экран ---------- */
@media (max-width: 1180px) {
  .fd-wrap { grid-template-columns: minmax(0, 1fr) 17px minmax(0, 320px); }
}
@media (max-width: 900px) {
  /* колонки складываются в одну, тянуть нечего */
  .fd-wrap { grid-template-columns: minmax(0, 1fr); }
  .fd-wrap .split { display: none; }
  .fd-col { padding-right: 0; }

  /* карточка становится шторкой снизу и не заезжает под плеер и таб-бар */
  .fcard {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(64px + var(--player-h) + env(safe-area-inset-bottom, 0px));
    top: auto;
    z-index: var(--z-drawer);
    margin: 0;
    max-height: calc(var(--vh) * .70);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: 0;
    background: var(--surface-2);
    transform: translateY(110%);
    transition: transform var(--t-drawer) var(--ease-drawer);
  }
  .fcard.is-open { transform: none; }
  .fcard--empty { display: none; }
  .fcard--dr { position: static; transform: none; max-height: none; border: 0; background: none; padding: 0; }
  .fcard__close { display: grid; position: absolute; top: var(--s2); right: var(--s2); z-index: 2; }
  /* в шторке крестик уже есть в шапке ящика, свой не нужен */
  .fcard--dr .fcard__close { display: none; }
  .plat { grid-template-columns: minmax(0, 1fr); }

  .art__in { grid-template-columns: 64px minmax(0, 1fr); padding: var(--s4); min-height: 0; }
  .art__ava { width: 64px; height: 64px; font-size: 24px; }
  .art__name { font-size: 24px; }
  .art__acts { grid-column: 1 / -1; }
  .art__acts .btn { flex: 1; }
  .art__stats-acts { margin-left: 0; }
  .plhead { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .plhead__cov { width: 140px; height: 140px; }
  .plhead__acts .btn--primary, .plhead__acts .btn--secondary { flex: 1; }
  .chart .track { grid-template-columns: 24px 56px minmax(0, 1fr) auto; }
}

/* ---------- полки витрины ---------- */
.fd-shelves { margin-bottom: var(--s6); }
.shelf + .shelf { margin-top: var(--s6); }
.shelf__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.shelf__head .h2 { margin: 0; font-size: 18px; }
/* «Все» у полки: сама подпись мелкая, поэтому площадь нажатия добираем
   отступами, иначе пальцем в неё не попасть */
.shelf__all {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 0 var(--s2);
  margin-right: calc(var(--s2) * -1);
  font: 600 13px/1 var(--font-ui);
  color: var(--text-3);
}
.shelf__all svg { transform: rotate(-90deg); }
@media (hover: hover) and (pointer: fine) { .shelf__all:hover { color: var(--accent); } }
/* ряд крутится вбок внутри себя и не растягивает страницу */
.shelf__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 148px;
  gap: var(--s3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: var(--s2);
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.shelf__row--packs { grid-auto-columns: 180px; }
.shcard, .shpack {
  display: grid;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  scroll-snap-align: start;
}
.shcard b, .shpack b { font: 700 14px/1.3 var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shcard > span:last-child, .shpack > span:last-child { font: 400 12px/1.3 var(--font-ui); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shcard__cov, .shpack__cov {
  position: relative;
  display: block;
  aspect-ratio: 1;
  margin-bottom: var(--s2);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
}
.shcard__cov img, .shpack__cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Затемнение обложки. Кнопка запуска стоит по центру песни, как в
   больших сервисах: наводишь — обложка гаснет и проступает значок,
   играет — обложка остаётся притушенной, а в значке пляшет эквалайзер. */
.shcard__cov::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 12, .52);
  opacity: 0;
  transition: opacity var(--t-hover);
  pointer-events: none;
}
.shcard[data-playing="1"] .shcard__cov::after { opacity: 1; }
.shcard__play {
  position: absolute;
  left: 50%; top: 50%;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  /* тёмный кружок с белым треугольником, не фирменный розовый:
     розовый на цветной обложке спорит с ней и теряется */
  background: rgba(8, 8, 14, .72);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.88);
  transition: opacity var(--t-hover), transform var(--t-hover);
}
.shcard[data-playing="1"] .shcard__play { opacity: 1; transform: translate(-50%, -50%); }
.shcard__play svg { margin-left: 2px; }           /* треугольник оптически по центру */
.shcard__pause { display: none; }
.shcard[data-on="1"] > .shcard__cov .shcard__play > svg { display: none; }
/* навёл на играющую — вместо эквалайзера пауза: видно, что тык остановит */
.shcard[data-on="1"]:hover .shcard__eq { display: none; }
.shcard[data-on="1"]:hover .shcard__pause { display: block; }
.shcard__eq { display: none; align-items: flex-end; gap: 3px; height: 16px; }
.shcard[data-on="1"] .shcard__eq { display: inline-flex; }
.shcard__eq i {
  width: 3px; height: 100%;
  border-radius: 2px;
  background: #fff;
  transform-origin: bottom;
  animation: eq .9s ease-in-out infinite;
}
.shcard__eq i:nth-child(2) { animation-delay: .16s; }
.shcard__eq i:nth-child(3) { animation-delay: .32s; }
@media (hover: hover) and (pointer: fine) {
  .shcard:hover .shcard__cov::after { opacity: 1; }
  .shcard:hover .shcard__play { opacity: 1; transform: translate(-50%, -50%); }
  .shcard:hover .shcard__play:active { transform: translate(-50%, -50%) scale(.92); }
  .shcard:hover b { color: var(--accent); }
}
.shcard:focus-visible { outline: none; }
.shcard:focus-visible .shcard__cov { box-shadow: var(--ring); }
.shpack .plcov { border-radius: var(--r-md); }
@media (max-width: 900px) {
  .shelf__row { grid-auto-columns: 132px; }
  .shelf__row--packs { grid-auto-columns: 148px; }
  /* Наводить пальцем нечем, поэтому в покое значок на телефоне не нужен:
     играет тап по самой плитке, а она заведомо больше 44 px. Значок
     остаётся только у того, что сейчас играет — как отметка. */
  .shcard__play { width: 40px; height: 40px; }
  .shcard:not([data-playing="1"]) .shcard__play { display: none; }
}

/* ---------- автор проставляет ссылки на площадки ---------- */
.plat-edit__note { margin: 0 0 var(--s4); font: 400 13px/1.45 var(--font-ui); color: var(--text-2); }
.plat-edit__row { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: var(--s3); }
.plat-edit__row + .plat-edit__row { margin-top: var(--s2); }
.plat-edit__row > span { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text-2); }
.plat-edit__row > span svg { flex: none; color: var(--text-3); }
.plat-edit__row b { font: 600 13px/1.2 var(--font-ui); }
@media (max-width: 900px) {
  .plat-edit__row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
}

/* ---------- админка на узком экране ----------
   Ряд периодов стоял `flex: none` и держал свою полную ширину, из-за чего
   вся страница админки разъезжалась вбок на телефоне. Теперь ряд крутится
   внутри себя, а поля дат и поиска занимают строку целиком. */
@media (max-width: 900px) {
  .adm-period { gap: var(--s3); }
  .adm-period .seg {
    flex: 1 1 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .adm-period .seg::-webkit-scrollbar { display: none; }
  .adm-period__custom { flex-wrap: wrap; width: 100%; }
  .adm-period__custom .field__input { flex: 1 1 140px; width: auto; min-width: 0; }
  .adm-tools { gap: var(--s3); }
  .adm-tools .field__input { width: 100%; }
  .adm-tools .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
}

/* ---------- карточка-шторка на телефоне ----------
   Квадратная обложка во всю ширину съедала весь экран, и до кнопок
   приходилось прокручивать. Кладём её слева небольшим квадратом, а
   название с тегами справа. */
@media (max-width: 900px) {
  .fcard__top {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: var(--s3);
    align-items: start;
  }
  .fcard__cover { width: 96px; height: 96px; aspect-ratio: auto; }
  .fcard__info { min-width: 0; }
  .fcard__title { margin-top: 0; font-size: 17px; }
  .fcard__nums { margin-top: var(--s1); }
  /* круглая кнопка поддержки стояла ровно поверх ряда действий карточки */
  body:has(.fcard.is-open) .support-fab { display: none; }
}

/* ---------- узкие экраны: закреплённый трек и шапка библиотеки ----------
   Ряд кнопок у закреплённого трека и ряд инструментов библиотеки стояли
   в одну строку и раздвигали страницу на 390. */
@media (max-width: 900px) {
  .art__pin-body { grid-template-columns: 56px minmax(0, 1fr); }
  .art__pin-cov { width: 56px; height: 56px; }
  .art__pin-acts { grid-column: 1 / -1; margin-top: var(--s2); }
  .art__pin-acts .btn { flex: 1; }
  .page-head__actions { flex-wrap: wrap; }
  .page-head__actions .btn--sm { flex: 1 1 auto; min-width: 0; }
}

/* ---------- карточка ошибки генерации на телефоне ----------
   Три кнопки в одну строку не влезали, и «Убрать» уходил за край
   вместе с половиной «Изменить описание». Карточка растёт вниз. */
@media (max-width: 560px) {
  .track--pending, .track--failed {
    grid-template-columns: 56px minmax(0, 1fr);
    height: auto;
    padding: var(--s3) var(--s4);
  }
  .gen__acts {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    margin-top: var(--s2);
  }
  .gen__acts .btn--sm { flex: 1 1 auto; }
}

/* ============================================================
   ТАПЫ 44 px НА ТЕЛЕФОНЕ
   Решение владельца от 14.09.2026: на десктопе плотный вид
   остаётся, на телефоне всё, во что тычут пальцем, не меньше
   44 px. Плеер и таб-бар не трогаем: у них своя сетка.
   ============================================================ */
@media (max-width: 900px) {
  .chip { min-height: 44px; }
  .seg__item { min-height: 44px; }
  .content .btn--sm,
  .drawer .btn--sm,
  .modal .btn--sm { height: 44px; }
  .content .btn--icon,
  .drawer .btn--icon,
  .modal .btn--icon { width: 44px; height: 44px; }
  .pan__tool { width: 44px; height: 44px; }
  .menu__item { min-height: 44px; }
  .plat__item { min-height: 48px; }
  /* ряд действий в строке трека от этого не должен разъезжаться */
  .track__actions { gap: 0; }
}

/* ссылка «Все» в шапке «Моих треков»: подпись мелкая, площадь нажатия
   добираем высотой, иначе пальцем в неё не попасть */
@media (max-width: 900px) {
  .mine__tools .all { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- очередь плеера на телефоне ----------
   Строка очереди начинается с ручки перетаскивания, поэтому общая
   мобильная сетка `56px minmax(0,1fr) auto` сдвигала всё на колонку:
   название попадало в колонку `auto` и раздувало ящик до 551 px при
   экране 390. Здесь у очереди своя сетка, пустые ячейки убраны. */
@media (max-width: 900px) {
  .queue .track { grid-template-columns: 24px 56px minmax(0, 1fr) auto; }
  .queue .track > span:empty { display: none; }
}
/* Потолок ширины был `100vw`, и это обрезало шторку: `vw` не знает про
   зум интерфейса, поэтому 100vw это 390 CSS-пикселей, а экран при зуме
   0.9 занимает 433. Справа оставался пустой столбец в 39 px. Края шторке
   задают `left` и `right`, потолок ей не нужен вовсе. */
.drawer { max-width: none; }

/* остаток мелких тапов на телефоне: круглые кнопки у поля стиля,
   текстовые ссылки в карточках и логотип на экране входа */
@media (max-width: 900px) {
  .rbtn { width: 44px; height: 44px; }
  .gen__acts .again,
  .drop .back,
  .sent .again,
  .sent .back { display: inline-flex; align-items: center; min-height: 44px; }
  .topbar__logo { display: inline-flex; align-items: center; min-height: 44px; }
}

/* оглавление юридических страниц: ссылки идут подряд, пальцем в них
   не попасть, поэтому на телефоне у каждой своя высота */
@media (max-width: 900px) {
  .legal__toc a { display: flex; align-items: center; min-height: 44px; }
}

/* ============================================================
   ЗУМ ИНТЕРФЕЙСА
   Просьба владельца от 14.09.2026: показывать всё приложение
   чуть мельче. `zoom` масштабирует и размеры, и шрифты одним
   числом, поэтому шкала отступов и сетки остаются целыми.

   Высота окна при этом не масштабируется, поэтому всё, что
   меряется в `vh`, считаем через `--vh`: это высота окна в тех
   же единицах, в которых после зума живёт вёрстка.
   ============================================================ */
:root {
  --zoom: .9;
  --vh: calc(100vh / .9);
}
/* На iPhone «100vh» — высота экрана вместе с местом под панелями Safari,
   и низ экранов во всю высоту (помощник) уходил под нижнее меню
   (владелец 20.10.2026). dvh — видимая высота, без панелей. */
@supports (height: 100dvh) {
  :root { --vh: calc(100dvh / .9); }
}
/* На телефоне тоже 90 % (владелец 20.10.2026: «всё очень крупно», меню и
   кнопки великоваты). 19.10 на телефоне ставили 100 % — тогда при вводе
   iPhone приближал страницу; теперь шрифт полей считается от зума (см.
   «ПОЛЯ НА ТЕЛЕФОНЕ НЕ ПРИБЛИЖАЮТ СТРАНИЦУ»), и на экране в поле ровно 16. */
html { zoom: var(--zoom); }

/* ---------- плитки жанров ----------
   Жанр это навигация, а не ещё один трек, поэтому плитка крупнее строки,
   название лежит поверх рисунка, а сам ряд не прокручивается вбок:
   все жанры должны быть видны сразу. */
.genres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s3);
}
.genre {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  isolation: isolate;
}
.genre__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-drawer) var(--ease-out);
}
/* затемнение снизу: без него название теряется на светлых кадрах */
/* Шторка под названием. Плитки стали яркими, поэтому она начинается
   ниже и внизу почти непрозрачная: белый текст должен держаться и на
   оранжевом поле, а сам предмет в центре остаётся чистым. */
.genre__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 8, 14, 0) 45%,
    rgba(10, 8, 14, .55) 72%,
    rgba(10, 8, 14, .9) 100%);
}
.genre__cap {
  position: absolute;
  left: var(--s3); right: var(--s3); bottom: var(--s3);
  display: grid;
  gap: 2px;
}
.genre__cap b { font: 700 16px/1.2 var(--font-head); color: #fff; letter-spacing: -.01em; }
.genre__cap span { font: 400 12px/1.2 var(--font-ui); color: rgba(255, 255, 255, .62); }
@media (hover: hover) and (pointer: fine) {
  .genre:hover .genre__img { transform: scale(1.04); }
  .genre:hover .genre__cap b { color: var(--accent); }
}
.genre:focus-visible { outline: none; box-shadow: var(--ring); }
@media (max-width: 900px) {
  /* по три в ряд и квадратные: так плитки читаются как обложки
     подборок, а не как широкие баннеры */
  .genres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
  .genre { aspect-ratio: 1; }
  .genre__cap { left: var(--s2); right: var(--s2); bottom: var(--s2); }
  .genre__cap b { font-size: 12px; line-height: 1.15; }
  /* число треков в 112 px не влезает и мешает названию */
  .genre__cap span { display: none; }
}

/* Всю плитку больше не гасим: предмет в центре должен оставаться
   ярким, за читаемость названия отвечает шторка снизу. */
:root { --genre-dim: 1; }
.genre__img { filter: brightness(var(--genre-dim)); }

/* ============================================================
   МОЯ ВОЛНА
   Главный блок ленты. Одна кнопка: нажал и играет. Фон живой,
   но без картинок: два размытых пятна фирменных цветов медленно
   ходят под тёмной подложкой. Это и есть тот самый один
   градиентный элемент экрана.
   ============================================================ */
.wave {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--s6);
  padding: var(--s6);
  border-radius: var(--r-lg);
  background: #120F1A;
  isolation: isolate;
}
.wave__glow {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .8;
  pointer-events: none;
  z-index: -1;
}
.wave__glow--a {
  left: -80px; top: -180px;
  background: radial-gradient(circle, #FF8A18 0%, rgba(255, 138, 24, 0) 70%);
  animation: wave-a 28s ease-in-out infinite alternate;
}
.wave__glow--b {
  right: -60px; bottom: -220px;
  background: radial-gradient(circle, #FB4595 0%, rgba(251, 69, 149, 0) 70%);
  animation: wave-b 34s ease-in-out infinite alternate;
}
@keyframes wave-a { to { transform: translate3d(90px, 60px, 0) scale(1.15); } }
@keyframes wave-b { to { transform: translate3d(-70px, -50px, 0) scale(1.1); } }

/* Третье пятно: с двумя фон читается как диагональ, с тремя — как свет,
   который живёт сам по себе. Рисуем псевдоэлементом, чтобы не трогать
   разметку. */
.wave::before {
  content: "";
  position: absolute;
  left: 42%; top: -140px;
  width: 360px; height: 360px;
  border-radius: 50%;
  filter: blur(76px);
  opacity: .55;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle, #7B5CFF 0%, rgba(123, 92, 255, 0) 70%);
  animation: wave-c 40s ease-in-out infinite alternate;
}
@keyframes wave-c { to { transform: translate3d(-120px, 90px, 0) scale(1.2); } }

/* ПОКА ВОЛНА ИГРАЕТ, СВЕТ ДЫШИТ.
   Здесь был такт на 120 ударов в минуту, полсекунды на удар. Решение
   владельца от 19.09.2026: слишком дёргано. Блок фоновый, а мельтешил
   сильнее всего на экране. Теперь это дыхание — цикл 6 секунд, размах
   3 %. Движение заметно, только если смотреть на него нарочно.

   Дыхание живёт отдельным свойством `scale`, а не внутри `transform`:
   иначе оно затирало бы медленный дрейф пятен, они складываются только
   когда записаны порознь. */
.wave.is-on .wave__glow,
.wave.is-on::before { opacity: 1; }
.wave.is-on .wave__glow--a { animation: wave-a 28s ease-in-out infinite alternate, wave-breathe 6s ease-in-out infinite; }
.wave.is-on .wave__glow--b { animation: wave-b 34s ease-in-out infinite alternate, wave-breathe 6s ease-in-out infinite -2s; }
.wave.is-on::before { animation: wave-c 40s ease-in-out infinite alternate, wave-breathe 7.5s ease-in-out infinite -4s; }
@keyframes wave-breathe {
  0%, 100% { scale: 1; }
  50% { scale: 1.03; }
}
/* кнопка отзывается тем же дыханием, но совсем слабо: она главная,
   ей не к лицу прыгать */
.wave.is-on .wave__play { animation: wave-breathe-btn 6s ease-in-out infinite; }
@keyframes wave-breathe-btn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .18); }
  50% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .wave.is-on .wave__glow--a, .wave.is-on .wave__glow--b,
  .wave.is-on::before, .wave.is-on .wave__play { animation: none; }
}

/* ---------- волна по треку ----------
   Другой вид, чтобы было видно: играет не своя волна, а подобранная
   под конкретную песню. Обложка уходит в фон, цветные пятна гаснут,
   сверху появляется подпись, что это за волна. */
.wave__seed {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  filter: blur(18px) saturate(1.2);
  transition: opacity var(--t-slow, .4s) ease;
  pointer-events: none;
  z-index: -1;
}
.wave.is-seed .wave__seed { opacity: .5; }
.wave.is-seed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(18, 15, 26, .95) 0%, rgba(18, 15, 26, .78) 55%, rgba(18, 15, 26, .5) 100%);
}
.wave.is-seed .wave__glow { opacity: .2; }
/* Обычной подписью, а не плашкой заглавными над заголовком (аудит
   19.10.2026, правило владельца): что это волна, сказано, но не кричит. */
.wave__kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--s2);
  color: rgba(255, 255, 255, .78);
  font: 600 13px/1.2 var(--font-ui);
}
.wave__kicker[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .wave__glow { animation: none; }
}

/* Всё по центру колонкой: мелкая надпись, крупное название песни,
   исполнитель, ряд управления. Главное здесь песня, а не слово
   «волна», поэтому название набрано крупно и первым делом читается
   именно оно. Градиент работает фоном, а не заливкой кнопки. */
.wave__in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4) 0 var(--s2);
}
.wave__title {
  margin: 0;
  /* Растёт вместе с блоком, но не бесконечно: на широком экране имя
     песни не должно превращаться в вывеску. */
  font: 800 clamp(32px, 6vw, 68px)/1.02 var(--font-head);
  letter-spacing: -.035em;
  color: #fff;
  text-align: center;
  /* длинные названия обрезаем на второй строке, а не растягиваем блок */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: min(15ch, 100%);
  /* Длинное слово шире колонки не обрежется краем: сначала пробуем
     перенос по слогам, и только если и так не влезает — по буквам. */
  hyphens: auto;
  overflow-wrap: anywhere;
}
/* Длинное название набираем мельче: иначе одно слово занимает всю
   ширину и читается хуже, чем набранное спокойнее. */
.wave__title--long { font-size: clamp(26px, 3.6vw, 44px); max-width: 100%; }
.wave__by {
  font: 500 15px/1.3 var(--font-ui);
  color: rgba(255, 255, 255, .72);
  text-align: center;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Ряд управления: крупная кнопка в середине, остальные по бокам —
   слева перемотка назад и сердце, справа вперёд и «ещё». */
.wave__ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  margin-top: var(--s3);
}
.wave__ctrl .btn--icon {
  width: 44px; height: 44px;
  color: rgba(255, 255, 255, .78);
  flex: none;
}
.wave__ctrl .btn--icon:hover { color: #fff; }
.wave__play {
  display: grid;
  place-items: center;
  width: 96px; height: 96px;
  border: 0;
  border-radius: var(--r-full);
  background: #fff;
  color: #17141F;
  transition: transform var(--t-hover);
}
@media (hover: hover) and (pointer: fine) {
  .wave__play:hover { transform: scale(1.05); }
}
.wave__play:active { transform: scale(.96); }
.wave__play:focus-visible { outline: none; box-shadow: var(--ring); }
.wave__like.is-on { color: var(--accent); }

@media (max-width: 900px) {
  .wave { padding: var(--s4); margin-bottom: var(--s4); }
  /* На телефоне блок узкий, и проценты от ширины окна дают слишком
     мелко: там название должно быть таким же главным, как на большом
     экране. Поэтому свой размер, от ширины экрана, и перенос раньше. */
  .wave__title { font-size: clamp(36px, 10.5vw, 54px); max-width: min(11ch, 100%); }
  .wave__title--long { font-size: clamp(26px, 7.4vw, 38px); max-width: 100%; }
  .wave__by { font-size: 14px; }
  .wave__play { width: 76px; height: 76px; }
  .wave__ctrl { gap: var(--s2); }
  .wave__glow { width: 340px; height: 340px; filter: blur(60px); }
}

/* ряды настройки волны */
.worow + .worow { margin-top: var(--s4); }
.worow__cap {
  display: block;
  margin-bottom: var(--s2);
  font: 600 13px/1 var(--font-ui);
  color: var(--text-3);
}

/* ---------- подсказка при наведении ----------
   Своя вместо системной: та появляется через полторы секунды и рисуется
   светлой плашкой поверх тёмного интерфейса. */
.tip {
  position: fixed;
  z-index: var(--z-tooltip);
  max-width: 260px;
  padding: 6px var(--s2);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-overlay);
  color: var(--text-1);
  font: 400 12px/1.35 var(--font-ui);
  pointer-events: none;
  animation: tip-in 120ms var(--ease-out);
}
@keyframes tip-in { from { opacity: 0; transform: translateY(4px); } }
.tip--below { animation-name: tip-in-below; }
@keyframes tip-in-below { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .tip { animation: none; } }
/* Пальцем не наводят, поэтому на телефоне подсказка приходит по тапу
   на значок пояснения и сама уходит через пару секунд. */

/* сноска в меню: предупреждение, а не пункт — нажимать нечего */
.menu__note {
  margin: var(--s1) 0 0;
  padding: var(--s2) var(--s3) var(--s1);
  font: 400 12px/1.4 var(--font-ui);
  color: var(--text-3);
  border-top: 1px solid var(--border-2);
}

/* ---------- значки внутри поля описания ----------
   Ручка растягивания принадлежит самому полю и сидит в его правом
   нижнем углу. Чтобы значки стояли с ней на одной линии, кладём их
   внутрь того же угла слева, а полю снизу даём место под них. */
.pan__row--area { position: relative; }
.pan__row--area textarea { padding-bottom: 52px; }
/* Ряд круглых кнопок лежит поверх текстового поля, поэтому отступ ему
   задаётся вручную. Он должен совпадать с кнопками в соседних панелях:
   «Своё аудио» и «Каталог стилей» стоят на одной вертикали, иначе форма
   выглядит косой. У поля собственных полей нет, значит и сдвига быть не
   должно — ноль. */
.srow--in {
  position: absolute;
  left: 0;
  bottom: 10px;
}
/* счётчик символов уходит выше ручки, чтобы не спорить с ней */
.pan__row--area .studio__count { bottom: 34px; }

/* ---------- «Ваш голос»: пустое состояние ----------
   Кнопка записи это второй способ дать запись, а не отдельный шаг,
   поэтому она стоит рядом с полем перетаскивания, а не под ним. */
.voice-alt {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s3);
}
.voice-alt > span { color: var(--text-3); font: 400 13px/1 var(--font-ui); }
/* пока идёт запись, перетаскивание приглушено */
.drop.is-mute { opacity: .35; pointer-events: none; }

/* ------------------------------------------------------------
   ПУБЛИКАЦИЯ НА ПЛОЩАДКАХ
   Раздел-рассказ: человек приходит из «…» у своего трека и должен
   за один экран понять, что мы умеем и что нужно от него.
   ------------------------------------------------------------ */
.mplat { display: inline-flex; flex: none; align-items: center; }
.mplat svg { flex: none; }
/* вторая марка заходит на первую: так видно, что площадок несколько */
.mplat svg + svg { margin-left: -4px; }
.pub__hero { padding: var(--s6) 0 var(--s5); }
.pub__lead {
  max-width: 62ch;
  margin: var(--s3) 0 0;
  font: 400 16px/1.55 var(--font-ui);
  color: var(--text-2);
}
.pub__track {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: fit-content;
  max-width: 100%;
  margin-top: var(--s5);
  padding: var(--s2) var(--s4) var(--s2) var(--s2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.pub__cov { width: 48px; height: 48px; flex: none; border-radius: var(--r-md); overflow: hidden; }
.pub__cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub__tname { display: grid; min-width: 0; }
.pub__tname b { font: 600 15px/1.3 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub__tname span { font: 400 13px/1.3 var(--font-ui); color: var(--text-3); }
.pub__cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s5); }
.pub__price { font: 400 13px/1.4 var(--font-ui); color: var(--text-3); }
.pub__where { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s3); }
.pub__plat {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.pub__plat svg { grid-row: span 2; color: var(--text-3); }
.pub__plat b { font: 600 14px/1.3 var(--font-ui); }
.pub__plat span { font: 400 12px/1.3 var(--font-ui); color: var(--text-3); }
.pub__note { margin: var(--s4) 0 0; font: 400 13px/1.45 var(--font-ui); color: var(--text-3); }
.adm-card .pub__ct { display: block; margin-bottom: 8px; font: 600 16px/1.3 var(--font-ui); }
.pub__faq { border-bottom: 1px solid var(--border-2); }
.pub__faq summary {
  padding: var(--s4) 0;
  font: 600 15px/1.35 var(--font-ui);
  color: var(--text-1);
  cursor: pointer;
  list-style: none;
}
.pub__faq summary::-webkit-details-marker { display: none; }
.pub__faq summary::after { content: "+"; float: right; color: var(--text-3); font-weight: 400; }
.pub__faq[open] summary::after { content: "–"; }
.pub__faq p { margin: 0 0 var(--s4); max-width: 62ch; font: 400 14px/1.55 var(--font-ui); color: var(--text-2); }
.pub__end { margin-top: var(--s6); padding: var(--s6) 0; text-align: center; }
.pub__end p { margin: var(--s2) 0 var(--s4); color: var(--text-2); }
.pub-form__track {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--border-2);
}
.pub-form__track .btn { margin-left: auto; flex: none; }
.pub-form__ok { align-items: flex-start; margin-top: var(--s4); }
.pub-form__ok span { font: 400 13px/1.45 var(--font-ui); color: var(--text-2); }
@media (max-width: 600px) {
  .pub__where { grid-template-columns: 1fr; }
  .pub__cta .btn { width: 100%; }
}

/* ------------------------------------------------------------
   СТРАНИЦА ЖАНРА
   Крупная обложка слева, рассказ и кнопки справа, под ними поиск
   с сортировкой и список. Так устроены полки у больших сервисов,
   и человек узнаёт это устройство с первого взгляда.
   ------------------------------------------------------------ */
.gpage {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s6);
  align-items: end;
  margin-bottom: var(--s6);
}
.gpage__cov {
  width: 220px; height: 220px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.gpage__cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gpage__cov--flat { display: grid; place-items: center; color: var(--text-3); }
.gpage__body { min-width: 0; padding-bottom: var(--s2); }
.gpage__title {
  margin: var(--s2) 0 0;
  font: 700 44px/1.05 var(--font-head);
  letter-spacing: -.02em;
}
.gpage__about {
  max-width: 62ch;
  margin: var(--s3) 0 0;
  font: 400 15px/1.5 var(--font-ui);
  color: var(--text-2);
}
.gpage__meta { margin: var(--s2) 0 0; font: 400 13px/1.4 var(--font-ui); color: var(--text-3); }
.gpage__acts { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s5); }
.gpage__acts .btn--primary { padding: 0 24px; }
.gpage__bar { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
/* Жанры любимого: без своего отступа список треков прилипал прямо
   к ряду кнопок и читался как его продолжение. */
.favs__tags { margin-bottom: var(--s4); }
.gpage__find { position: relative; flex: 1; min-width: 0; }
.gpage__findi {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  display: grid;
  color: var(--text-3);
  pointer-events: none;
}
.gpage__find .field__input { padding-left: 44px; }
.gpage__sort { flex: none; }
/* длительность встаёт перед действиями, поэтому в сетке строки
   появляется ещё одна колонка */
.gpage__list .track { grid-template-columns: 64px minmax(160px, 1fr) auto auto auto auto; }
.gpage__list .track__time-wrap { display: block; }
@media (max-width: 900px) {
  .gpage { grid-template-columns: 1fr; gap: var(--s4); align-items: start; }
  .gpage__cov { width: 140px; height: 140px; }
  .gpage__title { font-size: 32px; }
  .gpage__bar { flex-wrap: wrap; }
  .gpage__find { flex: 1 1 100%; }
  .gpage__list .track { grid-template-columns: 56px minmax(0, 1fr) auto auto; }
  .gpage__list .track__tags, .gpage__list .track__plays { display: none; }
}

/* ------------------------------------------------------------
   ПРОМПТ ДЛЯ ЮРИДИЧЕСКИХ СТРАНИЦ
   ------------------------------------------------------------ */
.lp__warn {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-bottom: var(--s6);
  padding: var(--s4);
  border: 1px solid rgba(253, 66, 156, .28);
  border-radius: var(--r-lg);
  background: var(--accent-soft);
}
.lp__warn svg { flex: none; color: var(--accent); margin-top: 2px; }
.lp__warn p { margin: 0; max-width: 72ch; font: 400 14px/1.55 var(--font-ui); color: var(--text-2); }
.lp__warn b { color: var(--text-1); }
.lp__box { position: relative; }
.lp__text {
  margin: 0;
  max-width: 100%;
  padding: var(--s5);
  padding-right: 160px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--text-2);
  font: 400 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
.lp__copy { position: absolute; top: var(--s3); right: var(--s3); }
.lp__docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s2); }
.lp__doc {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font: 400 14px/1.35 var(--font-ui);
}
.lp__doc b { flex: none; color: var(--text-3); font-weight: 600; }
@media (max-width: 600px) {
  .lp__text { padding: var(--s4); padding-top: 56px; }
  .lp__copy { top: var(--s2); right: var(--s2); }
}
.lp__open { margin-top: var(--s4); }

/* ------------------------------------------------------------
   ЭКРАН ВХОДА: КРУПНЫЙ КАДР И ПРИЗЫВ
   Человек ещё не зарегистрировался, и уговаривать его надо не
   интерфейсом, а тем, кем он может стать. Поэтому здесь во всю
   высоту живое лицо, поверх него призыв, и всё это меняется
   каждые три секунды.
   ------------------------------------------------------------ */
.aart {
  position: relative;
  overflow: hidden;
  background: #100D18;
}
/* затемнение под фотографию тут своё, снизу и сверху сразу */
.aart::after { content: none; }
.aart__slides { position: absolute; inset: 0; }
.aart__slide {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  /* лёгкий наезд, пока кадр показан: снимок дышит, а не висит */
  transform: scale(1.04);
  transition: opacity .9s ease, transform 6s ease-out;
}
.aart__slide.is-on { opacity: 1; transform: scale(1.11); }
/* Текст должен читаться на любом кадре, а кадры разные: сверху
   плотная тень под призыв, снизу под точки. */
.aart__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 7, 12, .86) 0%, rgba(8, 7, 12, .28) 34%, transparent 52%),
    linear-gradient(0deg, rgba(8, 7, 12, .78) 0%, transparent 34%);
}
.aart__slog {
  position: absolute;
  left: var(--s6); right: var(--s6); top: var(--s6);
  margin: 0;
  /* узкая колонка рвала «рок-звездой» пополам по дефису: даём строке
     всю ширину кадра, переносы встают по словам */
  font: 800 32px/1.14 var(--font-head);
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
}
.aart__slog.is-in { animation: aart-in .55s ease both; }
@keyframes aart-in { from { opacity: 0; transform: translateY(10px); } }
.aart__foot {
  position: absolute;
  left: var(--s6); right: var(--s6); bottom: var(--s6);
  display: flex;
  align-items: center;
  gap: var(--s4);
}
/* мелкий эквалайзер: знак того, что здесь про музыку */
.aart__eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; flex: none; }
.aart__eq i {
  width: 3px;
  height: 100%;
  border-radius: var(--r-full);
  background: var(--accent);
  transform: scaleY(var(--h, .5));
  transform-origin: bottom;
  animation: aeq var(--d, 1s) var(--t, 0s) ease-in-out infinite alternate;
}
@keyframes aeq { to { transform: scaleY(1); } }
.aart__dots { display: flex; gap: 6px; }
.aart__dot {
  width: 24px; height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: background var(--t-hover);
}
.aart__dot.is-on { background: #fff; }
.aart__dot:focus-visible { outline: none; box-shadow: var(--ring); }

@media (prefers-reduced-motion: reduce) {
  .aart__slide, .aart__slog.is-in, .aart__eq i { animation: none; transition: opacity .2s ease; }
  .aart__slide { transform: none; }
  .aart__slide.is-on { transform: none; }
}

/* На телефоне кадры уходят фоном за форму и гасятся. Полкой под формой
   они спорили с ней за внимание, а призыв в маленьком кадре читался как
   баннер. Фоном они работают на настроение, а не на чтение, поэтому сам
   призыв, точки и эквалайзер здесь не нужны: слова остаются только у
   формы. `z-index: -1` кладёт кадр за содержимое, оставаясь при этом
   выше фона страницы. */
@media (max-width: 900px) {
  .aart {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    aspect-ratio: auto;
    max-height: none;
    border-radius: 0;
    background: var(--bg);
  }
  .aart__slog, .aart__foot { display: none; }
  /* Лёгкое размытие уводит кадр на второй план: без него светлые кадры
     спорят с формой за внимание. Кадр и так показан с наездом, поэтому
     размытые края за экран не вылезают. */
  .aart__slide { filter: saturate(.9) blur(2px); }
  /* тень плотнее к низу: там подвал со ссылками, его надо читать */
  .aart__shade {
    background: linear-gradient(180deg,
      rgba(8, 7, 12, .74) 0%,
      rgba(8, 7, 12, .84) 38%,
      rgba(8, 7, 12, .94) 72%,
      rgba(8, 7, 12, .97) 100%);
  }
}

/* ============================================================
   АФИША
   Слева поля, справа живой предпросмотр. Кнопки «Сохранить» нет:
   всё ложится в состояние по ходу ввода, как в студии.
   ============================================================ */
.pos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: var(--s6);
}
.pos__form { display: grid; gap: var(--s3); min-width: 0; }
.pos__prev { position: sticky; top: var(--s6); min-width: 0; }
.pos__prev > .kicker { display: block; margin-bottom: var(--s2); }
.pos__lab {
  display: block;
  margin-bottom: var(--s3);
  font: 400 13px/1.4 var(--font-ui);
  color: var(--text-3);
}
.pos__lab:last-child { margin-bottom: 0; }
.pos__lab .field__input { margin-top: 6px; width: 100%; }
.pos__lab--row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: var(--s3);
}
.pos__lab--row .field__input { margin-top: 0; }
.pos__about { resize: vertical; min-height: 72px; }
.pos__cnt { display: block; margin-top: 4px; font: 400 12px/1 var(--font-ui); color: var(--text-3); }
/* Подписи как у остальных полей формы: было два вида подписей рядом —
   серые обычные и белые полужирные (аудит 19.10.2026). */
.pos__cap {
  display: block;
  margin-bottom: var(--s2);
  font: 400 13px/1.4 var(--font-ui);
  color: var(--text-3);
}
.pos__covers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.pos__cov {
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: none;
  aspect-ratio: 1 / 1;
}
.pos__cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pos__cov.is-on { border-color: var(--accent); }
.pos__pins { display: grid; gap: var(--s1); }
.pos__pin {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: 0 var(--s2);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-2);
  text-align: left;
  font: 400 14px/1.3 var(--font-ui);
}
/* панель «Афиши» сама surface-2 — подсветка на ступень светлее, иначе её не видно */
.pos__pin:hover { background: var(--surface-3); }
.pos__pin.is-on { background: var(--accent-soft); color: var(--text-1); }
.pos__pin-cov { width: 36px; height: 36px; border-radius: 6px; overflow: hidden; }
.pos__pin-cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pos__pin-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos__pin-m { color: var(--text-3); opacity: 0; }
.pos__pin.is-on .pos__pin-m { opacity: 1; color: var(--accent); }
.pos__sec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 52px;
  cursor: pointer;
}
.pos__sec + .pos__sec { border-top: 1px solid var(--border-2); }
.pos__sec-t { font: 600 14px/1.3 var(--font-ui); color: var(--text-1); }
.pos__sec-h { display: block; margin-top: 2px; font: 400 12px/1.35 var(--font-ui); color: var(--text-3); }
.pos__sec input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.pos__note { margin: var(--s3) 0 0; font: 400 12px/1.45 var(--font-ui); color: var(--text-3); }
/* карточка предпросмотра: та же шапка, что у страницы музыканта */
.pcard {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-2);
  background: var(--surface-1);
}
.pcard__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .5;
  filter: blur(2px);
}
.pcard__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 7, 12, .5) 0%, rgba(8, 7, 12, .92) 78%);
}
.pcard__in { position: relative; padding: var(--s6) var(--s4) var(--s4); }
.pcard__ava {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: var(--s3);
  border-radius: var(--r-full);
  background: var(--grad);
  color: #fff;
  font: 800 22px/1 var(--font-head);
}
.pcard__name { margin: 0; font: 800 22px/1.15 var(--font-head); letter-spacing: -.02em; color: #fff; }
.pcard__nick { margin: 4px 0 0; font: 400 13px/1.3 var(--font-ui); color: rgba(255, 255, 255, .72); }
.pcard__about { margin: var(--s3) 0 0; font: 400 14px/1.5 var(--font-ui); color: rgba(255, 255, 255, .86); }
.pcard__links { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.pcard__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: 600 12px/1 var(--font-ui);
}
.pcard__pin {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
  padding: var(--s3);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text-2);
  font: 400 13px/1.3 var(--font-ui);
}
/* ссылки автора на самой странице музыканта */
.art__about { margin: var(--s3) 0 0; font: 400 15px/1.5 var(--font-ui); color: rgba(255, 255, 255, .86); max-width: 560px; }
.art__links { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.art__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: 600 13px/1 var(--font-ui);
}
.art__link:hover { background: rgba(255, 255, 255, .24); }
@media (max-width: 900px) {
  .pos { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  /* на телефоне предпросмотр идёт первым: сначала человек видит, что
     получится, и только потом правит */
  .pos__prev { position: static; order: -1; }
  .pos__lab--row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .art__link { min-height: 44px; }
}

/* Название трека в списке открывает карточку: показываем это курсором,
   иначе догадаться о нажатии нельзя. Обложка рядом запускает трек —
   у двух соседних мест два разных действия, и оба должны читаться. */
.track__main.is-open-able { cursor: pointer; }
.track__main.is-open-able:hover .track__t { color: var(--text-1); }

/* ============================================================
   ШТОРКА НА ТЕЛЕФОНЕ: ШИРИНА И ОБУЧЕНИЕ ВО ВЕСЬ ЭКРАН
   ============================================================ */
@media (max-width: 900px) {
  /* Справа оставался пустой столбец в 39 px. Та же ловушка зума, что и с
     высотой: у прижатого элемента `width: 100%` считается от основания
     без учёта зума, и шторка выходила уже экрана. Ширину не задаём вовсе,
     растягиваем краями — они от зума не зависят. */
  .drawer {
    left: 0;
    right: 0;
    width: auto;
  }
  /* «Как пользоваться» занимает весь экран и накрывает плеер: это рассказ,
     в который человек вчитывается, а не окошко над интерфейсом. Остальные
     шторки по-прежнему не заезжают под плеер и таб-бар. */
  .drawer.howto {
    top: 0;
    bottom: 0;
    height: auto;
    max-height: none;
    border-radius: 0;
    border-top: 0;
  }
  .drawer.howto::before { display: none; }   /* ручка перетаскивания ни к чему */
  /* Кнопки по центру и с зазором: прижатые к левому краю они читались
     как случайные ссылки, а не как выбор из двух действий. */
  .drawer.howto .drawer__foot {
    display: flex;
    justify-content: center;
    gap: var(--s3);
    padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  }
  .drawer.howto .drawer__foot .btn { flex: 0 1 auto; }
}

/* ============================================================
   ПОЛНОЭКРАННЫЙ ПЛЕЕР: ШАПКА, ПОРЯДОК, ВТОРОЙ РЯД
   Собран по образцу привычных плееров: сверху видно, откуда играет,
   название слева, а всё редкое уходит вторым рядом вниз, чтобы не
   спорить с главной кнопкой.
   ============================================================ */
.fs { grid-template-rows: auto minmax(0, 1fr) auto; }
.fs__top {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4) 0;
}
.fs__top .fs__close {
  position: static;
  top: auto; left: auto;
  transform: none;
}
.fs__where { text-align: center; min-width: 0; }
.fs__where span {
  display: block;
  font: 400 12px/1.2 var(--font-ui);
  color: var(--text-3);
}
.fs__src {
  display: block;
  margin-top: 2px;
  font: 700 14px/1.2 var(--font-ui);
  color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* второй ряд: повтор, очередь, текст песни */
.fs__extra {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s12);
  margin-top: var(--s2);
}
.fs__extra .btn--icon { color: var(--text-3); }
.fs__extra .btn--icon:hover { color: var(--text-1); }
.fs__controls .like2.is-liked { color: var(--accent); }

@media (max-width: 900px) {
  /* Название слева, а не по центру: так строка читается с одного края,
     как во всех плеерах, и рядом с ней помещается «…». */
  .fs__right { text-align: left; }
  .fs__head { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .fs__actions { gap: var(--s1); }
  /* оставляем в верхнем ряду только «…», остальное ушло вниз к управлению */
  .fs__actions .grp, .fs__actions .shr, .fs__actions .dl { display: none; }
  /* Обложка с названием стоят по центру свободного места: при
     `start` под ними зияла пустота в треть экрана, а полоса времени
     с управлением всё равно прижаты к низу. */
  .fs__body { padding: var(--s4) var(--s4) 0; gap: var(--s4); align-content: center; }
  .fs__cover { width: min(80vw, 360px); }
  .fs__bar { gap: var(--s2); padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px)); }
  .fs__controls { gap: var(--s4); }
  .fs__extra { gap: var(--s8); margin-top: 0; }
  .fs__lyrics-open { display: none; }   /* текст открывается значком во втором ряду */
}

/* ============================================================
   ПОЛЯ ПОИСКА: ОВАЛ БЕЗ ПРЯМОУГОЛЬНИКА ВНУТРИ
   Во всём приложении поиск выглядит одинаково: овальное поле со
   значком лупы слева. Прямоугольное кольцо внутри овальной оболочки
   было самой заметной неряшливостью — видно два разных поля там,
   где оно одно.
   ============================================================ */
/* 1. Поле без своей коробки внутри овальной оболочки кольца не рисует:
      фокус показывает оболочка, она для того и нужна. */
.fd-search__inp:focus,
.fd-search__inp:focus-visible,
.lib-search:focus,
.lib-search:focus-visible,
.gpage__find .field__input:focus,
.gpage__find .field__input:focus-visible { box-shadow: none; outline: none; }

/* 2. Поля поиска, у которых своя коробка есть, становятся овальными —
      вместе с ними овальным становится и кольцо фокуса. */
.cat__search .field__input,
.mine__search,
.gpage__find,
.adm-tools .field__input[aria-label="Поиск"] { border-radius: var(--r-full); }
/* значок лупы слева, текст от него отступает */
.cat__search .field__input,
.mine__search { padding-left: var(--s4); }

/* ============================================================
   В СТУДИИ ПЛЕЕРА НЕТ
   Решение владельца 19.09.2026: нажал «Создать» — полоса плеера
   пропадает. На экране создания она лишняя: там своя липкая кнопка
   внизу, и две полосы друг над другом съедают половину телефона.
   Высоту обнуляем тем же токеном, иначе под плеер остаётся дыра.
   ============================================================ */
@media (max-width: 900px) {
  body[data-screen="studio"] { --player-h: 0px; }
  body[data-screen="studio"] .player { display: none; }
}

/* ============================================================
   ПОЛНОЭКРАННЫЙ ПЛЕЕР НА ТЕЛЕФОНЕ: ВРЕМЯ ПОД ПОЛОСОЙ
   В эталоне цифры стоят под полосой по краям, а не сжимают её с
   боков: полоса получает всю ширину, и по ней легче попасть пальцем.
   ============================================================ */
@media (max-width: 900px) {
  .fs__seek {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    row-gap: 6px;
    width: 100%;
    gap: 0 var(--s3);
  }
  .fs__seek input { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .fs__seek .now { grid-row: 2; justify-self: start; }
  .fs__seek .all { grid-row: 2; justify-self: end; }
  /* между полосой и управлением нужен воздух, иначе они читаются одним узлом */
  .fs__bar { gap: var(--s6); }
  .fs__controls { gap: var(--s4); }
  .fs__extra { gap: var(--s12); margin-top: var(--s2); }
}

@media (max-width: 900px) {
  /* Обложка встаёт под шапкой, а не по центру экрана: под названием
     теперь стоит полоса времени, и свободное место должно копиться
     внизу, перед управлением. */
  .fs__body { align-content: start; }
  .fs__right .fs__seek { margin-top: var(--s4); }
  .fs__bar { gap: var(--s4); justify-content: flex-end; }
}

/* ============================================================
   ПОЛНОЭКРАННЫЙ ПЛЕЕР: ОДНА КОНСТРУКЦИЯ ПО ЦЕНТРУ
   Обложка, название, время и управление — это один узел, и он стоит
   по центру экрана. Управление, прижатое к низу, отрывалось от
   хронометража и висело само по себе. Внизу остаётся только тихий
   ряд: повтор, очередь, текст.
   ============================================================ */
@media (max-width: 900px) {
  .fs__body {
    align-content: center;
    padding: var(--s4) var(--s6) 0;   /* по краям больше воздуха */
  }
  .fs__right .fs__controls {
    justify-content: center;
    margin-top: var(--s6);
    gap: var(--s6);
  }
  .fs__bar {
    justify-content: flex-end;
    padding: 0 var(--s6) calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   ПЛАШКА ВЫБОРА В НАСТРОЙКАХ УСТРОЕНА КАК ТУМБЛЕР РЕЖИМОВ
   Правило «тапы от 44 px» поднимает кнопку, а высота этой плашки была
   прибита к 36 — выбранная кнопка вылезала из дорожки и выглядела
   недорисованной. Раньше это пряталось прокруткой; убрали прокрутку —
   стало видно. Теперь дорожка тянется под кнопку, как у тумблера
   режимов сверху: поле 4 px, кнопка внутри, ничего не торчит.
   Начинаем с 900 px, потому что с этой же точки включается правило
   про палец: чинить надо там, где причина.
   ============================================================ */
@media (max-width: 900px) {
  .seg--tight { height: auto; padding: 4px; overflow: visible; }
  .seg--tight .seg__item { height: 44px; }
}

/* ------------------------------------------------------------
   NAV-05. СЖАТОЕ МЕНЮ ДО ИКОНОК
   Только на большом экране: на телефоне сайдбар и так выезжает
   поверх всего, сжимать там нечего.
   ------------------------------------------------------------ */
@media (min-width: 901px) {
  body[data-side="mini"] .app { grid-template-columns: 72px minmax(0, 1fr); }
  body[data-side="mini"] .sidebar__head { padding-right: 0; flex-direction: column; height: auto; padding-top: 12px; gap: 4px; }
  body[data-side="mini"] .sidebar__logo { height: 40px; padding: 0; justify-content: center; }
  body[data-side="mini"] .sidebar__wordmark { display: none; }
  body[data-side="mini"] .sidebar__mark { display: block; height: 26px; }
  body[data-side="mini"] .sidebar__fold svg { transform: rotate(-90deg); }
  /* названия разделов в узкой колонке не помещаются; вместо них
     между группами остаётся черта — группы всё ещё читаются */
  body[data-side="mini"] .sidebar .kicker { display: none; }
  body[data-side="mini"] .sidebar__nav section + section { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-2); }
  body[data-side="mini"] .nav-item {
    justify-content: center;
    gap: 0;
    margin: 2px 12px;
    padding: 0;
    height: 44px;
  }
  body[data-side="mini"] .nav-item > span,
  body[data-side="mini"] .nav-item .tag,
  body[data-side="mini"] .nav-item__chev { display: none; }
  body[data-side="mini"] .sidebar__topup { padding: 0 12px 12px; }
  /* Значок ровно по центру: подпись убираем совсем, а не прячем кеглем */
  body[data-side="mini"] .sidebar__topup .btn { padding: 0; height: 40px; }
  body[data-side="mini"] .sidebar__topup-t { display: none; }
  body[data-side="mini"] .sidebar__topup-i { display: grid; }
  body[data-side="mini"] .account { justify-content: center; gap: 0; padding: 12px 8px; }
  body[data-side="mini"] .account__body,
  body[data-side="mini"] .account > svg { display: none; }
  /* админское подменю — это список без иконок, в 72 px от него
     остались бы обрубки слов. Там колонка разворачивается сама */
  body[data-side="mini"][data-nav="admin"] .app { grid-template-columns: 240px minmax(0, 1fr); }
  body[data-side="mini"][data-nav="admin"] .sidebar__head { flex-direction: row; height: 64px; padding-top: 0; padding-right: 8px; }
  body[data-side="mini"][data-nav="admin"] .sidebar__wordmark { display: block; }
  body[data-side="mini"][data-nav="admin"] .sidebar__mark { display: none; }
  body[data-side="mini"][data-nav="admin"] .sidebar__logo { height: 64px; padding: 0 20px; justify-content: flex-start; }
  body[data-side="mini"][data-nav="admin"] .sidebar .kicker { display: block; }
  body[data-side="mini"][data-nav="admin"] .nav-item { justify-content: flex-start; gap: 12px; margin: 0 8px; padding: 0 12px; height: 40px; }
  body[data-side="mini"][data-nav="admin"] .nav-item > span { display: inline; }
  body[data-side="mini"][data-nav="admin"] .account { justify-content: flex-start; gap: 12px; padding: 12px 16px; }
  body[data-side="mini"][data-nav="admin"] .account__body { display: block; }
  body[data-side="mini"][data-nav="admin"] .sidebar__topup .btn { font-size: 14px; }
  body[data-side="mini"][data-nav="admin"] .sidebar__topup .btn::before { content: none; }
}

/* ------------------------------------------------------------
   LIB-08. ПЛОТНЫЙ ВИД И КАРТОЧКИ ГЕНЕРАЦИЙ
   Кнопка вида отвечает только за плотность и размер. Отбор и
   порядок живут в воронке рядом.
   ------------------------------------------------------------ */
/* --- плотно, без обложек: втрое больше треков на экран --- */
.lib-list.is-dense .track {
  grid-template-columns: 20px 22px minmax(0, 1fr) auto auto;
  height: 40px;
  gap: 10px;
  padding: 0 12px;
}
.lib-list.is-dense .track__tags,
.lib-list.is-dense .track__pin { display: none; }
/* обложки нет, но запускать трек чем-то надо: на её месте остаётся
   один значок, без картинки и без подложки */
.lib-list.is-dense .track__cover {
  width: 22px; height: 22px;
  border-radius: var(--r-full);
  background: none;
}
.lib-list.is-dense .track__cover img,
.lib-list.is-dense .cover-blank { display: none; }
.lib-list.is-dense .track__play {
  opacity: 1;
  transform: none;
  background: none;
  color: var(--text-3);
}
.lib-list.is-dense .track__play svg { width: 15px; height: 15px; }
.lib-list.is-dense .track:hover .track__play { color: var(--text-1); }
.lib-list.is-dense .track__main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.lib-list.is-dense .track__title { min-width: 0; }
.lib-list.is-dense .track__t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.lib-list.is-dense .track__sub {
  flex: none;
  margin: 0;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}
.lib-list.is-dense .track__time-wrap { font-size: 12px; color: var(--text-3); }
@media (max-width: 560px) {
  /* на телефоне действия не влезают рядом с названием: оставляем «…» */
  .lib-list.is-dense .track__actions .like,
  .lib-list.is-dense .track__actions .dl,
  .lib-list.is-dense .track__actions .sh { display: none; }
  .lib-list.is-dense .track__actions { opacity: 1; }
}

/* --- карточки генераций --- */
/* одна колонка и не во всю ширину монитора: строка длиной в полтора
   метра читается хуже, чем колонка книжной ширины */
/* Карточки раскладываются по ширине окна, а не одной колонкой в 900.

   Столбец в девятьсот точек на мониторе в полторы тысячи читался как
   обрезанная страница: справа пустое поле шириной с сами карточки.
   Карточек к тому же стало вдвое больше — на каждую песню своя, — и
   одной колонкой их пришлось бы крутить вдвое дольше.

   Порог в 560 подобран по самой карточке: обложка 180 плюс текст. Уже
   этого описание рубится на три слова в строке. */
.lib-list.is-cards {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(560px, 1fr));
  align-items: start;
}
@media (max-width: 700px) {
  .lib-list.is-cards { grid-template-columns: minmax(0, 1fr); }
}
.libcard {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s3);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
}
.libcard__cov {
  position: relative;
  display: block;
  width: 180px; height: 180px;
  padding: 0; border: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--grad);
}
.libcard__cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.libcard__cov::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 12, .52);
  opacity: 0;
  transition: opacity var(--t-hover);
  pointer-events: none;
}
.libcard[data-playing="1"] .libcard__cov::after { opacity: 1; }
.libcard__play {
  position: absolute;
  left: 50%; top: 50%;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  background: rgba(8, 8, 14, .72);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.88);
  transition: opacity var(--t-hover), transform var(--t-hover);
}
.libcard[data-playing="1"] .libcard__play { opacity: 1; transform: translate(-50%, -50%); }
.libcard__play > svg { margin-left: 2px; }
.libcard__pause { display: none; }
.libcard[data-on="1"] .libcard__play > svg { display: none; }
.libcard[data-on="1"]:hover .libcard__eq { display: none; }
.libcard[data-on="1"]:hover .libcard__pause { display: block; }
.libcard__eq { display: none; align-items: flex-end; gap: 3px; height: 18px; }
.libcard[data-on="1"] .libcard__eq { display: inline-flex; }
.libcard__eq i {
  width: 3px; height: 100%;
  border-radius: 2px;
  background: #fff;
  transform-origin: bottom;
  animation: eq .9s ease-in-out infinite;
}
.libcard__eq i:nth-child(2) { animation-delay: .16s; }
.libcard__eq i:nth-child(3) { animation-delay: .32s; }
@media (hover: hover) and (pointer: fine) {
  .libcard__cov:hover::after { opacity: 1; }
  .libcard__cov:hover .libcard__play { opacity: 1; transform: translate(-50%, -50%); }
}
.libcard__body { display: grid; align-content: start; gap: var(--s2); min-width: 0; }
.libcard__top { display: flex; align-items: flex-start; gap: var(--s2); }
.libcard__t {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font: 700 17px/1.25 var(--font-head);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .libcard__t:hover { color: var(--accent); } }
.libcard__meta { font: 400 13px/1.3 var(--font-ui); color: var(--text-3); }
.libcard__tags { display: flex; flex-wrap: wrap; gap: 4px; }
/* запрос целиком: ради него сюда и приходят, обрезать его нечестно */
.libcard__prompt {
  margin: 0;
  font: 400 14px/1.5 var(--font-ui);
  color: var(--text-2);
}
.libcard__t .tag--model {
  display: inline-block;
  flex: none;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font: 700 9px/18px var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Сердце стоит первым в ряду действий: лайк — самое частое, что тут
   делают, и тянуться за ним в меню «…» было бы странно. */
.libcard__like { flex: none; }
.libcard__like.is-liked { color: var(--accent); }
.libcard__acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: 2px; }
/* Планшет и узкое окно: обложка остаётся сбоку, но меньше. Если её
   тут растянуть во всю ширину, она займёт весь экран одна. */
@media (max-width: 900px) {
  .libcard { grid-template-columns: 140px minmax(0, 1fr); gap: var(--s3); }
  .libcard__cov { width: 140px; height: 140px; }
  .libcard__play { width: 44px; height: 44px; }
  .libcard__var { flex: 1 1 150px; min-width: 0; }
}
@media (max-width: 560px) {
  .libcard { grid-template-columns: minmax(0, 1fr); }
  .libcard__cov { width: 100%; height: auto; aspect-ratio: 1; }
  .libcard__acts .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------------
   FEED-09. РЯД ЖАНРОВ БЕЗ ЛИСТАНИЯ
   Полоса чипов высотой 36 px листается пальцем плохо: попасть в неё
   вдоль труднее, чем нажать жанр поперёк. Показываем один ряд, всё
   остальное раскрывается вниз по плюсику.
   ------------------------------------------------------------ */
.chips--fold {
  position: relative;
  flex-wrap: wrap;
  overflow: hidden;
  /* ровно один ряд: на телефоне чип 44 px по правилу о пальце */
  max-height: 44px;
  padding-right: 46px;
  transition: max-height .22s ease;
}
.chips--fold[data-open="1"] { max-height: 260px; }
.chip--more {
  position: absolute;
  top: 0; right: 0;
  width: 38px;
  padding: 0;
  justify-content: center;
  flex: none;
}
.chip--more svg { transition: transform .22s ease; }
.chips--fold[data-open="1"] .chip--more svg { transform: rotate(45deg); }  /* плюс становится крестиком */
@media (max-width: 900px) {
  /* общий mobile-режим чипов листает их вбок: этому ряду он не нужен */
  .chips--fold { flex-wrap: wrap; overflow: hidden; max-height: 44px; padding-bottom: 0; }
  .chips--fold[data-open="1"] { max-height: 260px; }
}
@media (min-width: 901px) {
  /* В ЛЕНТЕ на мониторе места хватает: два ряда жанров видно целиком,
     плюсик там не нужен. Правило именно про ленту: тем же приёмом
     свёрнуты подсказки помощника, и им плюсик нужен на любом экране. */
  .feed__filters .chips--fold { max-height: none; padding-right: 0; }
  .feed__filters .chip--more { display: none; }
}

/* ------------------------------------------------------------
   PL-13. ОДНА ШИРИНА НА ВСЮ СТРАНИЦУ ПЛЕЕРА
   Обложка была уже текста и полосы времени: три разных края на одном
   экране. Теперь у всего один столбец и одни поля.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .fs { --fs-pad: var(--s6); }
  .fs__body { padding-left: var(--fs-pad); padding-right: var(--fs-pad); }
  .fs__bar { padding-left: var(--fs-pad); padding-right: var(--fs-pad); }
  .fs__cover { width: 100%; max-width: none; }
  .fs__right { width: 100%; }
  .fs__seek { width: 100%; }
  .fs__controls, .fs__extra { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------
   FEED-10. ЖИВОЙ СВЕТ «МОЕЙ ВОЛНЫ»
   Холст 220×90 растянут на весь блок и размыт средствами CSS: так
   мягкие переходы достаются даром. Пятна на CSS остаются запасным
   вариантом и гаснут, как только холст встал на место.
   ------------------------------------------------------------ */
.wave__art {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  z-index: -1;
  display: block;
  /* Радиус размытия приходит из модуля переменной --wave-blur: считать
     его в стилях нечем, он зависит от размеров холста. */
  filter: blur(var(--wave-blur, 0px)) saturate(1.15);
  opacity: .70;
  transition: opacity .5s ease;
  pointer-events: none;
}
.wave.is-on .wave__art { opacity: 1; }
/* свет стал ярким, и белый заголовок на нём должен держаться сам */
.wave.has-art .wave__title { text-shadow: 0 2px 18px rgba(8, 6, 14, .55); }
/* холст встал — старые пятна больше не нужны */
.wave.has-art .wave__glow { display: none; }
.wave.has-art::before { content: none; }
/* У волны по треку фоном стоит обложка, свет уходит на второй план.
   Порядок слоёв здесь важнее прозрачности: обложка, поверх неё
   затемнение, и только потом свет. Пока затемнение лежало над холстом,
   оно съедало ленты целиком и блок читался как пустой прямоугольник. */
.wave.is-seed .wave__art { opacity: .72; }
.wave.has-art.is-seed .wave__seed { z-index: -3; }
.wave.has-art.is-seed::after { z-index: -2; }
@media (prefers-reduced-motion: reduce) {
  .wave__art { opacity: .7; }
}

/* Свет без карточки: подложки у блока нет, края растворяются. Рамка и
   заливка выдавали бы баннер, а свет должен лежать прямо на странице. */
.wave.has-art {
  background: transparent;
  overflow: visible;                 /* иначе свечение обрежется прямоугольником */
}
.wave.has-art .wave__art {
  /* Свет сходит на нет раньше, чем кончается холст: иначе по краю
     видно прямую линию среза, и снова получается карточка. */
  -webkit-mask-image: radial-gradient(78% 72% at 50% 56%, #000 34%, rgba(0,0,0,.65) 60%, transparent 84%);
  mask-image: radial-gradient(78% 72% at 50% 56%, #000 34%, rgba(0,0,0,.65) 60%, transparent 84%);
}
/* у волны по треку фоном стоит обложка — там карточка нужна */
.wave.has-art.is-seed { background: #120F1A; overflow: hidden; }
/* Раз блок не обрезает детей, слои света не должны вылезать за ширину
   страницы: на телефоне это давало прокрутку вбок. Вверх и вниз пусть
   растекаются, там страница и так листается. */
.wave.has-art:not(.is-seed) .wave__art { left: 0; right: 0; width: 100%; }

/* ------------------------------------------------------------
   GEN-05. КАРТОЧКА НЕУДАЧНОЙ ГЕНЕРАЦИИ
   Значок на строке заголовка, причина во всю ширину, кнопки снизу.
   ------------------------------------------------------------ */
.track--failed {
  display: block;
  height: auto;
  padding: var(--s3) var(--s4) var(--s4);
}
.fail__top { display: flex; align-items: center; gap: var(--s2); }
.track--failed .fail-ico {
  width: auto;
  display: inline-flex;
  flex: none;
  color: var(--error);
}
.track--failed .gen__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  white-space: normal;        /* длинное название переносим, а не режем */
  overflow: visible;
  text-overflow: clip;
}
.track--failed .drop { flex: none; margin: -4px -8px -4px 0; }
.track--failed .gen__why { margin-top: var(--s2); }
.track--failed .gen__acts { margin-top: var(--s3); flex-wrap: wrap; }

/* Сердце в плашке плеера. На большом экране оно живёт справа, вместе с
   очередью и громкостью; на телефоне тот ряд спрятан, и сердце
   переезжает в ряд управления, слева от «назад». */
.player__controls .like--mob { display: none; }
@media (max-width: 900px) {
  .player__controls .like--mob { display: inline-flex; }
}

/* ------------------------------------------------------------
   КОМПАКТНЫЕ ШАПКИ РАЗДЕЛОВ НА ТЕЛЕФОНЕ
   Обложка, название, описание и кнопки стояли столбиком: картинка
   съедала верх экрана, а список уходил под сгиб. Ставим текст справа
   от картинки — то же самое занимает вдвое меньше места.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .gpage {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: var(--s3);
    align-items: start;
  }
  .gpage__cov { width: 112px; height: 112px; }
  .gpage__title { margin-top: 2px; font-size: 24px; }
  .gpage__about {
    margin-top: var(--s1);
    font-size: 13px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;         /* описание не должно оттеснять список */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .gpage__meta { margin-top: var(--s1); font-size: 12px; }
  /* кнопки шире картинки, поэтому они выходят под неё во всю строку */
  .gpage__acts {
    grid-column: 1 / -1;
    margin-top: var(--s3);
    flex-wrap: wrap;
  }
  .gpage__acts .btn--primary { flex: 1 1 auto; }

  .plhead {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: var(--s3);
    align-items: start;
  }
  .plhead__cov { width: 112px; height: 112px; }
  .plhead__main .h1 { margin-top: 2px; font-size: 24px; }
  .plhead__sub { margin-top: var(--s1); font-size: 12px; }
  .plhead__acts { grid-column: 1 / -1; margin-top: var(--s3); }
}

/* Порядок списка на телефоне: значок рядом с поиском вместо строки во
   всю ширину. Она читалась как второе поле поиска. */
.gpage__sort-i { display: none; }
@media (max-width: 900px) {
  .gpage__bar { flex-wrap: nowrap; }
  .gpage__find { flex: 1 1 auto; }
  .gpage__sort {
    flex: none;
    width: 46px;
    padding: 0;
    justify-content: center;
  }
  .gpage__sort .gpage__sort-t { display: none; }
  .gpage__sort .gpage__sort-i { display: inline-flex; }
  .gpage__sort > svg { display: none; }     /* птичка без надписи лишняя */
  /* значок «поделиться» уезжал на свою строку под кнопки */
  .gpage__acts { flex-wrap: nowrap; }
}

/* На телефоне экран входа — просто тёмный фон. Кадр там не строится
   вовсе (см. authArt), это правило на случай старой разметки в кэше. */
@media (max-width: 900px) {
  .auth__art, .aart { display: none; }
}

/* ------------------------------------------------------------
   CHT-03. ПОМОЩНИК НА БОЛЬШОМ ЭКРАНЕ
   Лента сообщений упиралась в панель разговоров вплотную, реплики
   растягивались почти на всю колонку, а время показывалось только по
   наведению — из-за него в строке держалось пустое место.
   ------------------------------------------------------------ */
@media (min-width: 901px) {
  /* .chat--pane задаёт свои поля и перебивает по весу — целимся туда же */
  .chat__feed, .chat--pane .chat__feed { padding-left: var(--s6); padding-right: var(--s6); }
  .chat__bottom, .chat--pane .chat__bottom { padding-left: var(--s6); padding-right: var(--s6); }
  /* реплика длиной в полторы сотни знаков читается глазами по строке,
     а не по экрану: держим её в пределах книжной колонки */
  .chat__feed .msg { max-width: min(52ch, 72%); }
}
/* ------------------------------------------------------------
   CHT-05. РЯД ДЕЙСТВИЙ НАД РЕПЛИКОЙ
   Время держали в каждой реплике постоянно: в разговоре важен
   порядок, а не минуты. Теперь при наведении над репликой всплывает
   ряд с действиями, и время стоит там же, последним.
   ------------------------------------------------------------ */
.msg { position: relative; }
.msg__t { display: block; }
.msg__bar {
  position: absolute;
  /* сбоку от реплики, а не над ней: сверху ряд накрывал первую строку */
  top: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px 3px 5px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .7);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity var(--t-hover), transform var(--t-hover);
  pointer-events: none;
  z-index: 2;
}
.msg--bot .msg__bar { left: calc(100% + 8px); }
.msg--me .msg__bar { right: calc(100% + 8px); }
@media (max-width: 700px) {
  /* на телефоне места сбоку нет: ряд встаёт над репликой */
  .msg__bar { top: -16px; }
  .msg--bot .msg__bar { left: var(--s3); }
  .msg--me .msg__bar { right: var(--s3); left: auto; }
}
@media (hover: hover) and (pointer: fine) {
  .msg:hover .msg__bar, .msg:focus-within .msg__bar {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}
/* пальцем наводить нечем: ряд открывается тапом по самой реплике */
.msg.is-open .msg__bar { opacity: 1; transform: none; pointer-events: auto; }
.msg__b {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 0;
  border-radius: var(--r-full);
  background: none;
  color: var(--text-3);
  transition: background var(--t-hover), color var(--t-hover);
}
@media (hover: hover) and (pointer: fine) {
  .msg__b:hover { background: var(--surface-hover); color: var(--text-1); }
}
.msg__time {
  padding: 0 7px 0 4px;
  font: 400 11px/1 var(--font-ui);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
/* Поле ввода: полностью круглые бока, как у поиска */
.chat__composer textarea {
  border-radius: var(--r-full);
  padding: 12px 18px;
  min-height: 44px;
}

/* ------------------------------------------------------------
   CHT-04. ПОДСКАЗКИ В ПОМОЩНИКЕ
   Тёмный прямоугольник под вводом делил панель надвое, хотя это одна
   и та же карточка. Подсказки стали мельче и стоят одним рядом, за
   плюсиком прячутся остальные.
   ------------------------------------------------------------ */
.chat--pane .chat__bottom,
.chat--pane .chat__composer {
  background: transparent;
  border-top: 0;
}
.chat__chips {
  --чип: 30px;
  max-height: 30px;
  padding-right: 40px;
  margin-bottom: var(--s3);
}
.chat__chips[data-open="1"] { max-height: 160px; }
.chat__chips .chip {
  height: 30px;
  min-height: 30px;
  padding: 0 12px;
  font-size: 13px;
}
.chat__chips .chip--more { width: 32px; padding: 0; }
@media (max-width: 900px) {
  /* правило о пальце поднимает чипы до 44 px — здесь ряд остаётся низким,
     но сами подсказки держим крупнее, чтобы в них попадать */
  .chat__chips { --чип: 36px; max-height: 36px; }
  .chat__chips[data-open="1"] { max-height: 200px; }
  .chat__chips .chip { height: 36px; min-height: 36px; }
}

/* ============================================================
   PRC-08. СТРАНИЦА ТАРИФОВ ПО ИСХОДНИКУ luvi-pricing-v2
   Крупная шапка, тумблер оплаты, три карточки, блок «мы рядом»,
   разбор по ситуациям, таблица цен, цифры, сравнение, отзывы,
   вопросы. Тарифы и цены берём из данных приложения.
   ============================================================ */
.phero { text-align: center; padding: var(--s6) 0 var(--s4); }
.phero__h {
  margin: 0;
  font: 800 46px/1.08 var(--font-head);
  letter-spacing: -.025em;
}
.phero__p {
  max-width: 560px;
  margin: var(--s4) auto 0;
  font: 400 16px/1.55 var(--font-ui);
  color: var(--text-2);
}
.pricing__h2--c { text-align: center; }
.pricing__lead {
  max-width: 620px;
  margin: var(--s3) auto var(--s6);
  text-align: center;
  font: 400 15px/1.55 var(--font-ui);
  color: var(--text-2);
}
.pricing__lead--l { max-width: none; margin: -4px 0 var(--s4); text-align: left; }

/* подсказка под кнопкой первого тарифа */
.plan__hint {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin: var(--s2) 0 var(--s4);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font: 400 12.5px/1.4 var(--font-ui);
  color: var(--text-2);
}
.plan__hint svg { flex: none; color: var(--accent); margin-top: 1px; }
/* главное, ради чего берут уровень, подсвечено */
.plan__feats .is-key span { color: var(--text-1); }
.plan__feats .is-key svg { color: var(--accent); }

/* ---------- «мы рядом» ---------- */
/* Одна панель: «Поддержка 24/7» рядом говорила то же самое и слита
   сюда кнопкой (аудит 19.10.2026). */
.pcalm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  margin-top: var(--s12);
}
.pcalm__main {
  padding: var(--s6);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
}
.pcalm__h { margin: 0 0 var(--s3); font: 700 22px/1.2 var(--font-head); letter-spacing: -.01em; }
.pcalm__main p { margin: 0; font: 400 14.5px/1.6 var(--font-ui); color: var(--text-2); }
.pcalm__marks { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.ppay__m {
  padding: 8px 16px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  font: 700 12px/1 var(--font-ui);
  color: var(--text-2);
  letter-spacing: .04em;
}
.pcalm__small { margin: var(--s3) 0 0; font: 400 12.5px/1.5 var(--font-ui); color: var(--text-3); }
.pcalm__sup { display: flex; margin-top: var(--s4); }
.pcalm__t {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font: 700 17px/1.25 var(--font-head);
}
.pcalm__ico { display: inline-flex; flex: none; color: var(--accent); }
.pcalm__sup > span { font: 400 13px/1.45 var(--font-ui); color: var(--text-3); }


/* ---------- ситуации ---------- */
.pcase { margin-top: var(--s12); }
.pcase__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.pcase__c {
  display: flex;
  flex-direction: column;
  padding: var(--s6);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
}
.pcase__c.is-best { border-color: rgba(253, 66, 156, .55); }
.pcase__k { display: block; color: var(--accent); margin-bottom: var(--s3); }
.pcase__c h3 { margin: 0 0 var(--s2); font: 700 18px/1.25 var(--font-head); }
.pcase__c > p { margin: 0 0 var(--s4); font: 400 14px/1.55 var(--font-ui); color: var(--text-2); }
.pcase__take { display: block; margin-bottom: var(--s3); font: 700 14px/1.3 var(--font-ui); color: var(--text-1); }
.pcase__list { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.pcase__list div { display: flex; align-items: flex-start; gap: var(--s2); font: 400 13px/1.45 var(--font-ui); color: var(--text-2); }
.pcase__list svg { flex: none; margin-top: 2px; color: var(--accent); }
.pcase__c .btn { margin-top: auto; width: 100%; }

/* ---------- таблица цен ---------- */
.ptab { margin-top: var(--s12); }
.ptab__wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border-2); }
.ptab__t { width: 100%; border-collapse: collapse; background: var(--surface-1); }
.ptab__t th, .ptab__t td {
  padding: 12px 16px;
  text-align: left;
  font: 400 13.5px/1.35 var(--font-ui);
  white-space: nowrap;
  border-bottom: 1px solid var(--border-2);
}
.ptab__t th { font-weight: 700; color: var(--text-2); background: var(--surface-2); }
.ptab__t tbody tr:last-child td { border-bottom: 0; }
.ptab__t tr.is-best td { background: rgba(253, 66, 156, .06); }
.ptab__dim { color: var(--text-3); }
.ptab__win { color: var(--accent); font-weight: 700; }
.ptab__base { margin: var(--s3) 0 0; text-align: center; font: 400 12.5px/1.4 var(--font-ui); color: var(--text-3); }

/* ---------- разовое пополнение ---------- */
.ppacks { margin-top: var(--s12); }

/* ---------- цифры ---------- */
.ptrust { margin-top: var(--s12); text-align: center; }
.ptrust__k { display: block; color: var(--text-3); margin-bottom: var(--s4); }
.ptrust__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.ptrust__c {
  padding: var(--s5) var(--s3);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
}
.ptrust__c b {
  display: block;
  font: 800 28px/1 var(--font-head);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ptrust__c span { display: block; margin-top: 6px; font: 400 12.5px/1.35 var(--font-ui); color: var(--text-3); }

/* ---------- сравнение ---------- */
.pcmp { margin-top: var(--s12); }
.pcmp__wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border-2); }
.pcmp__t { width: 100%; border-collapse: collapse; background: var(--surface-1); min-width: 640px; }
.pcmp__t th, .pcmp__t td {
  padding: 11px 16px;
  font: 400 13.5px/1.4 var(--font-ui);
  border-bottom: 1px solid var(--border-2);
  text-align: center;
}
.pcmp__t th:first-child, .pcmp__t td:first-child { text-align: left; width: 42%; }
.pcmp__t th:not(:first-child), .pcmp__t td:not(:first-child) { width: 19.3%; }
.pcmp__t th { font-weight: 700; color: var(--text-2); background: var(--surface-2); }
.pcmp__t th.is-best { color: var(--accent); }
/* средняя колонка подсвечена во всю высоту: её и выбирают чаще всего */
.pcmp__t td.is-best, .pcmp__t th.is-best { background: rgba(253, 66, 156, .07); }
.pcmp__g td {
  background: var(--surface-2);
  font: 700 11px/1 var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pcmp__y { color: var(--accent); }
.pcmp__y svg { vertical-align: middle; }
.pcmp__n { color: var(--text-4, var(--text-3)); opacity: .5; }
.pcmp__t .pcmp__t, .pcmp__t td.pcmp__t { color: var(--text-2); font-size: 12.5px; }

/* ---------- отзывы ---------- */
/* Отзывы на тарифах. Класс назывался .prev и совпадал с кнопкой
   «предыдущий» в плеере — её сдвигало вниз отступом этой секции. */
.prevs { margin-top: var(--s12); }
.prevs__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 300px;
  gap: var(--s4);
  overflow-x: auto;
  padding-bottom: var(--s3);
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.prevs__c {
  padding: var(--s5);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  scroll-snap-align: start;
}
.prevs__stars { color: #F5A65C; font-size: 13px; letter-spacing: 2px; }
.prevs__c p { margin: var(--s3) 0 var(--s4); font: 400 14px/1.55 var(--font-ui); color: var(--text-1); }
.prevs__who { display: flex; align-items: center; gap: var(--s2); }
.prevs__who i {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  background: var(--grad);
  color: #fff;
  font: 700 14px/1 var(--font-ui);
  font-style: normal;
}
.prevs__who b { display: block; font: 600 13px/1.3 var(--font-ui); }
.prevs__who span span { font: 400 12px/1.3 var(--font-ui); color: var(--text-3); }

/* ---------- живые примеры ----------
   Пять песен в ряд, на телефоне ряд листается вбок. Обложка квадратная:
   так карточка читается как трек, а не как статья. */
.pex { margin-top: var(--s12); }
.pex__k { display: block; text-align: center; color: var(--accent); margin-bottom: var(--s2); }
.pex__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
  overflow-x: auto;
  padding-bottom: var(--s2);
  scrollbar-width: thin;
}
.pexc { min-width: 0; }
.pexc__cov {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  background: var(--surface-2) center / cover no-repeat;
  overflow: hidden;
}
.pexc__tag {
  position: absolute; left: var(--s2); top: var(--s2);
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: rgba(10, 8, 16, .72);
  font: 600 11px/1 var(--font-ui);
  color: #fff;
}
.pexc__play {
  position: absolute; left: var(--s2); bottom: var(--s2);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--grad);
  color: #fff;
  cursor: pointer;
  transition: transform var(--t-press);
}
@media (hover: hover) and (pointer: fine) { .pexc__play:hover { transform: scale(1.08); } }
.pexc__t { display: block; margin-top: var(--s3); font: 700 14px/1.3 var(--font-ui); }
.pexc__d { margin: 4px 0 0; font: 400 12px/1.45 var(--font-ui); color: var(--text-3); }

/* ---------- почему подписка выгоднее ---------- */
.pwhy { margin-top: var(--s12); }
.pwhy__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin-top: var(--s6);
}
.pwhyc {
  padding: var(--s5);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
}
.pwhyc__i {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  margin-bottom: var(--s3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--accent);
}
.pwhyc b { display: block; font: 700 15px/1.3 var(--font-ui); margin-bottom: 6px; }
.pwhyc p { margin: 0; font: 400 13px/1.55 var(--font-ui); color: var(--text-2); }
@media (max-width: 900px) {
  .pex, .pwhy { margin-top: var(--s8); }
  .pwhy__row { grid-template-columns: minmax(0, 1fr); }
  .pex__row { grid-auto-columns: 62%; }
}

/* ---------- вопросы ---------- */
.pfaq { margin-top: var(--s12); }
.pfaq__i {
  margin: 0 auto var(--s2);
  max-width: 760px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
}
.pfaq__i summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4);
  font: 600 15px/1.35 var(--font-ui);
  list-style: none;
}
.pfaq__i summary::-webkit-details-marker { display: none; }
.pfaq__i summary svg { flex: none; color: var(--text-3); transition: transform var(--t-hover); }
.pfaq__i[open] summary svg { transform: rotate(45deg); }
.pfaq__i p { margin: 0; padding: 0 var(--s4) var(--s4); font: 400 14px/1.6 var(--font-ui); color: var(--text-2); }
.ppay__legal {
  margin: var(--s5) auto 0;
  max-width: 560px;
  text-align: center;
  font: 400 12.5px/1.5 var(--font-ui);
  color: var(--text-3);
}
.ppay__legal a { color: var(--text-2); text-decoration: underline; }

@media (max-width: 900px) {
  .phero { padding: var(--s3) 0 var(--s2); }
  .phero__h { font-size: 30px; }
  .phero__p { font-size: 14.5px; }
  .pcalm { grid-template-columns: minmax(0, 1fr); margin-top: var(--s8); }
  .pcalm__main, .pcase__c { padding: var(--s5); }
  .pcase, .ptab, .ppacks, .ptrust, .pcmp, .prevs, .pfaq { margin-top: var(--s8); }
  .pcase__grid { grid-template-columns: minmax(0, 1fr); }
  .ptrust__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prevs__row { grid-auto-columns: 82%; }
  .pricing__h2--c, .pricing__lead { text-align: left; }
}

/* Тарифы на телефоне столбиком (PRC-07). Десктопная сетка `.plans` в три
   колонки стоит ниже PRC-07 и перебивала его по порядку следования,
   поэтому столбик повторён здесь. */
@media (max-width: 900px) {
  .plans { display: flex; flex-direction: column; grid-template-columns: none; gap: var(--s4); }
  .plan { flex: none; }
}

/* ------------------------------------------------------------
   СВЕДЕНИЕ
   Песня по дорожкам. На бою это всплывающее окно, и двенадцать
   дорожек в него не влезают: волны сжаты в полоску, общей шкалы
   времени нет. Здесь тот же смысл, но во всю ширину экрана.
   ------------------------------------------------------------ */
.mix { display: flex; flex-direction: column; gap: var(--s4); }

/* шапка: что сводим */
.mix__top {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
}
.mix__cov {
  width: 56px; height: 56px;
  flex: none;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
}
.mix__cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mix__about { display: grid; gap: var(--s1); min-width: 0; }
.mix__about b { font: 700 16px/1.25 var(--font-ui); }
.mix__about span { font: 400 13px/1.3 var(--font-ui); color: var(--text-3); }
.mix__play { margin-left: auto; flex: none; }

/* песня ещё не разобрана */
.mix__start {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  padding: var(--s12) var(--s6);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  text-align: center;
}
.mix__start-i {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--accent);
}
.mix__start b { font: 700 20px/1.25 var(--font-head); }
.mix__start p { margin: 0; max-width: 52ch; color: var(--text-2); font: 400 14px/1.6 var(--font-ui); }
.mix__start-acts { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; margin-top: var(--s2); }

/* разбор идёт */
.mix__wait {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  padding: var(--s12) var(--s6);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
}
.mix__wait b { font: 700 18px/1.25 var(--font-head); }
.mix__wait-step { margin: 0; color: var(--text-2); font: 400 14px/1.4 var(--font-ui); }
.mix__bar { width: min(420px, 100%); height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.mix__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); transition: width .12s linear; }

/* общая шкала времени: одна на все дорожки */
.mix__ruler {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding-left: 96px;
  font: 400 11px/1 var(--font-ui);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.mix__list { display: flex; flex-direction: column; gap: var(--s2); }

/* одна дорожка */
.mixrow {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--s3);
  align-items: center;
  padding: var(--s3);
  border-radius: var(--r-lg);
  /* цвет дорожки задаёт скрипт: он один и тот же в любой песне */
  background: color-mix(in srgb, var(--c) 10%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  transition: opacity var(--t-hover);
}
.mixrow.is-mute { opacity: .45; }
.mixrow.is-solo { border-color: var(--c); }
.mixrow__side { display: flex; align-items: center; gap: var(--s2); }
.mixrow__mute, .mixrow__solo {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  color: var(--c);
  cursor: pointer;
  font: 700 13px/1 var(--font-ui);
  transition: transform var(--t-press), background var(--t-hover);
}
.mixrow__solo { background: var(--surface-2); color: var(--text-3); }
.mixrow__solo[aria-pressed="true"] { background: var(--c); color: #12101A; }
@media (hover: hover) and (pointer: fine) {
  .mixrow__mute:hover, .mixrow__solo:hover { transform: scale(1.08); }
}
.mixrow__main { min-width: 0; }
.mixrow__head { display: flex; align-items: center; gap: var(--s3); }
.mixrow__t { color: var(--c); font: 700 14px/1 var(--font-ui); flex: none; }
.mixrow__vol { flex: 1 1 120px; max-width: 220px; accent-color: var(--c); }
.mixrow__num { font: 400 12px/1 var(--font-ui); color: var(--text-3); flex: none; }
.mixrow__dl { display: flex; gap: 6px; margin-left: auto; flex: none; }
.mixrow__dl .btn {
  width: auto; height: 30px; padding: 0 10px; gap: 6px;
  font: 600 12px/1 var(--font-ui);
  color: var(--text-3);
}
.mixrow__dl .btn:hover { color: var(--text-1); }

/* волна: высота столбиков идёт из скрипта, прозрачность — от громкости */
.mixrow__wave {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 56px;
  margin-top: var(--s2);
  cursor: text;
  touch-action: none;
}
.mixrow__wave i {
  flex: 1 1 auto;
  min-width: 1px;
  border-radius: 1px;
  background: var(--c);
  opacity: calc(.35 + var(--v, 1) * .5);
}
/* Правки видно прямо на волне: у каждой свой почерк, чтобы не лезть
   в список и не гадать, что тут сделано. */
.mixrow__wave i.is-down { opacity: .18; }
.mixrow__wave i.is-up { opacity: 1; box-shadow: 0 0 6px var(--c); }
.mixrow__wave i.is-off { opacity: .08; }
/* вырезано — на месте куска пусто, остаётся только черта снизу */
.mixrow__wave i.is-cut { opacity: .05; height: 2px !important; }
/* повтор — кусок светится ровным блоком */
.mixrow__wave i.is-loop { opacity: .95; filter: saturate(1.4); }
/* плавный вход и уход: столбики сходят на нет в нужную сторону */
.mixrow__wave i.is-in { opacity: .5; }
.mixrow__wave i.is-out { opacity: .5; }

/* ---------- панель правки дорожки ---------- */
.mixrow__fx[aria-expanded="true"] { color: var(--c) !important; }
.mixrow__panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s3) var(--s5);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid color-mix(in srgb, var(--c) 24%, transparent);
}
.mixrow__grp { display: grid; gap: 8px; align-content: start; }
.mixrow__grp--wide { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s2); }
.mixrow__cap {
  font: 600 11px/1 var(--font-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
}
/* РЕГУЛЯТОРЫ ДОРОЖКИ.
   Та же шкала делениями, что в настройках студии: человек уже знает,
   что её тянут и щёлкают. Отличие одно — риски красятся цветом
   дорожки, чтобы было видно, чью силу крутишь. */
.mixrow__regs {
  grid-column: 1 / -1;
  display: grid;
  /* Не больше двух в ряд: вчетвером шкалы сжимаются так, что риски
     слипаются и тянуть нечего. */
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--s1) var(--s8);
}
@media (min-width: 1500px) {
  .mixrow__regs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mixreg {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 86px;
  align-items: center;
  gap: var(--s3);
  padding: 6px 0;
  cursor: pointer;
}
.mixreg:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
.mixreg__t {
  display: flex;
  align-items: center;
  gap: 2px;
  font: 400 13px/1 var(--font-ui);
  color: var(--text-2);
}
.mixreg__i { flex: none; }
.mixreg__bars {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  height: 22px;
  touch-action: none;
}
/* Риски тонкие и тихие, как в настройках студии: там шкала не спорит
   с содержимым, и здесь не должна. Горит только отметка. */
.mixreg__bars i {
  width: 2px;
  height: 11px;
  border-radius: 1px;
  background: var(--border-1);
  transition: height var(--t-hover), background var(--t-hover), width var(--t-hover);
}
.mixreg__bars i[data-точка] {
  width: 4px;
  height: 20px;
  border-radius: var(--r-full);
  background: var(--c);
}
.mixreg__v {
  font: 600 12px/1 var(--font-ui);
  color: var(--text-2);
  text-align: right;
}
/* у шкалы с серединой ставим метку центра, чтобы «как есть» было видно */
.mixreg--центр .mixreg__bars { position: relative; }
.mixreg--центр .mixreg__bars::before {
  content: "";
  position: absolute;
  left: 50%; top: -2px; bottom: -2px;
  width: 1px;
  background: var(--border-1);
  transform: translateX(-50%);
}
/* Курсор воспроизведения. Один на все дорожки: его положение считает
   плеер, поэтому полоски совпадают по вертикали и видно, какой кусок
   песни звучит. */
.mixrow__cur {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, .6);
  pointer-events: none;
  opacity: .9;
}
.mixrow__sel {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--c) 22%, transparent);
  border: 1px solid var(--c);
  pointer-events: none;
}

.mix__deep { align-self: start; }

/* что уже поправили */
.mix__edits {
  padding: var(--s4);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
}
.mix__edits b { display: block; font: 700 15px/1.3 var(--font-ui); margin-bottom: 6px; }
.mix__edits p { margin: 0; font: 400 13px/1.55 var(--font-ui); color: var(--text-2); max-width: 70ch; }
.mix__edits-none { color: var(--text-3) !important; margin-top: var(--s3) !important; }
.mix__edits-list { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.mix__edit {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 12px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  font: 400 12px/1 var(--font-ui);
  color: var(--text-2);
}
.mix__edit b { display: inline; margin: 0; font-size: 12px; color: var(--text-1); }
.mix__edit button {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
.mix__edit button:hover { color: var(--text-1); }

.mix__foot { display: grid; gap: var(--s2); justify-items: center; margin-top: var(--s2); }
/* Кнопка по содержимому, а не во всю колонку: растянутая на 700 точек
   она выбивалась из остального интерфейса. */
.mix__save { padding: 0 28px; }
.mix__foot-note { margin: 0; font: 400 12px/1.4 var(--font-ui); color: var(--text-3); text-align: center; }

/* ---------- выбор песни для сведения ---------- */
.mixpick { display: flex; flex-direction: column; gap: var(--s2); }
/* Строки как в библиотеке, без отдельной карточки в рамке на каждую;
   стрелка вправо — строка уводит на страницу песни (аудит 19.10.2026). */
.mixpick__c {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-md);
  background: none;
  border: 1px solid transparent;
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-hover), border-color var(--t-hover);
}
@media (hover: hover) and (pointer: fine) {
  .mixpick__c:hover { background: var(--surface-2); border-color: var(--border-1); }
}
.mixpick__cov { width: 48px; height: 48px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.mixpick__cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mixpick__main { display: grid; gap: var(--s1); min-width: 0; }
.mixpick__main b { font: 600 15px/1.25 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mixpick__main span { font: 400 12px/1.3 var(--font-ui); color: var(--text-3); }
.mixpick__done { display: grid; place-items: center; color: var(--ok, #3DD68C); }
.mixpick__c > svg:last-child { color: var(--text-3); transform: rotate(-90deg); }
.mixpick { gap: var(--s1); }

/* ---------- окно «как разделить» ---------- */
.splitq__v {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-hover), background var(--t-hover);
}
.splitq__v + .splitq__v { margin-top: var(--s2); }
@media (hover: hover) and (pointer: fine) {
  .splitq__v:hover { border-color: var(--accent); background: var(--surface-3); }
}
.splitq__v b { font: 700 15px/1.25 var(--font-ui); }
.splitq__v span { font: 400 13px/1.5 var(--font-ui); color: var(--text-2); }
.splitq__v i { font: 600 13px/1 var(--font-ui); font-style: normal; color: var(--accent); margin-top: 4px; }

@media (max-width: 900px) {
  /* На телефоне дорожка складывается в три строки: сверху кнопки и
     название, под ними громкость, внизу волна. Раньше кнопки уезжали
     под волну, а скачивание переносилось на свою строку — ряд
     разъезжался, и было непонятно, к чему что относится. */
  .mixrow {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
    padding: var(--s3) var(--s3) var(--s4);
  }
  .mixrow__side { order: -1; }
  .mixrow__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "name name dl" "vol vol num";
    gap: var(--s2) var(--s3);
    align-items: center;
  }
  .mixrow__t { grid-area: name; }
  .mixrow__vol { grid-area: vol; max-width: none; }
  .mixrow__num { grid-area: num; }
  .mixrow__dl { grid-area: dl; margin-left: 0; }
  .mixrow__wave { height: 64px; }
  .mix__ruler { padding-left: 0; }
  /* По центру узкие строки рвутся «расчёской»: каждая своей длины и
     обе границы рваные. Слева ровный край, читать легче. */
  .mix__start, .mix__wait {
    padding: var(--s8) var(--s4);
    justify-items: start;
    text-align: left;
  }
  .mix__start-acts { justify-content: stretch; width: 100%; }
  .mix__start-acts .btn { flex: 1 1 100%; }
  .mix__bar { width: 100%; }
  .mix__foot { justify-items: stretch; }
  .mix__save { width: 100%; }
  .mix__foot-note { text-align: left; }
  .mix__deep { align-self: stretch; height: auto; min-height: 44px; padding: 10px 16px; white-space: normal; }
  /* Снизу кроме плеера стоит ещё и таб-бар: без этого запаса кнопка
     «Сохранить как новый трек» пряталась под ними. */
  .mix { padding-bottom: 72px; }
}

/* Согласия перед оплатой. Обязательные отмечены звёздочкой; согласие на
   автосписание для подписки НЕ отмечается заранее — это требование
   банка, а не наше решение по вёрстке. */
.pay__consents { display: grid; gap: 10px; margin: 4px 0 14px; }
.pay__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
  cursor: pointer;
}
.pay__consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--accent);
  cursor: pointer;
}
.pay__consent a { color: var(--text-1); text-decoration: underline; }
.pay__consent b { color: var(--accent); font-weight: 600; }

/* ============================================================
   ЗАПИСЬ ГОЛОСА: выбор из готовых и шаг проверочной фразы
   ============================================================ */

/* Список голосов. Умерший показан бледным и не выбирается: выбрать
   его значит списать кредиты и не получить песню. */
.voice-list { display: grid; gap: 8px; margin-bottom: 12px; }
.voice-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-hover), background var(--t-hover);
}
.voice-pick b { font: 600 14px/1.3 var(--font-head); }
.voice-pick span { font: 400 12px/1 var(--font-ui); color: var(--text-3); }
.voice-pick:hover { border-color: var(--accent); }
.voice-pick.is-on { border-color: var(--accent); background: var(--accent-soft); }
.voice-pick.is-on span { color: var(--accent); }
.voice-pick.is-dead { opacity: .55; cursor: not-allowed; }
.voice-pick.is-dead:hover { border-color: var(--border-2); }

/* Подтверждение права на голос. Не украшение: без него сервер образец
   не примет, и это правильно — чужой голос берут только со спросом. */
.voice-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  font: 400 13px/1.45 var(--font-ui);
  color: var(--text-2);
  cursor: pointer;
}
.voice-consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Сама фраза. Крупно и в рамке: её надо прочесть с экрана и спеть, а
   мелкий текст в середине формы для этого не годится. */
.voice-phrase {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  margin-bottom: 12px;
  border-radius: var(--r-lg);
  border: 1px solid var(--accent);
  background: var(--accent-soft);
}
.voice-phrase__hint { font: 400 12px/1.35 var(--font-ui); color: var(--text-2); }
.voice-phrase b { font: 600 18px/1.35 var(--font-head); color: var(--text-1); }
.voice-name { margin-bottom: 12px; }

/* ============================================================
   СВОЁ АУДИО: прикреплённый файл и окно записи
   ============================================================ */

/* Строка «Своё аудио» — ПЕРВАЯ в форме, над панелями.

   Раньше кнопка пряталась круглым значком в углу поля текста, а имя
   прикреплённого файла ложилось следом за рядом этих значков. Ряд лежит
   ПОВЕРХ поля (position: absolute), поэтому строка с именем оказывалась
   под ним: крестик было не нажать, и файл повисал намертво.

   Прикреплённое молча меняет результат, поэтому видно всегда: имя,
   «заменить» и крестик. */
.ownbar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
  min-width: 0;
}
/* Пояснения — третьим уровнем текста: цвет подсказок в полях на тёмной
   панели не читался (контраст 3,3, аудит 19.10.2026). */
.ownbar__note {
  min-width: 0;
  font: 400 12px/1.35 var(--font-ui);
  color: var(--text-3);
}
.ownbar.is-on {
  padding: 6px 8px 6px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--accent);
  background: var(--accent-soft);
}
.ownbar.is-on > svg { flex: none; color: var(--accent); }
.ownbar__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 13px/1.2 var(--font-ui);
  color: var(--text-1);
}
.ownbar .btn { flex: none; }
/* На телефоне пояснение съедает всю строку и выталкивает кнопку. */
@media (max-width: 900px) {
  .ownbar__note { display: none; }
}

.rec-box { display: grid; gap: var(--s3); justify-items: center; text-align: center; }
.rec-box__time { font: 700 28px/1 var(--font-head); color: var(--text-1); }


/* ============================================================
   ПРИГЛАСИТЬ ДРУГА (#/invite) и вход в него из кабинета
   ============================================================ */
/* колонка — не шире самой страницы: без minmax(0, 1fr) она росла по самому
   широкому содержимому, и при 100 % на телефоне три цифры распирали всю
   страницу до 423 точек — экран обрезался справа (19.10.2026) */
.inv { max-width: 720px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }

/* Обещание — в фирменном градиенте, как плашка тарифа в кабинете:
   это то, ради чего сюда приходят. Большой подарок в углу — фон, а не
   кнопка, поэтому полупрозрачный и за текстом. */
.inv-hero {
  position: relative;
  overflow: hidden;
  padding: var(--s6);
  border-radius: var(--r-lg);
  background: linear-gradient(115deg, #ff8a18 0%, #fd429c 55%, #e83b8a 100%);
  color: #fff;
}
.inv-hero .kicker { color: rgba(255, 255, 255, .8); }
.inv-hero__t { margin: 4px 0 0; font: 800 28px/1.15 var(--font-head); letter-spacing: -.02em; }
.inv-hero p { margin: var(--s2) 0 0; max-width: 44ch; font: 400 14px/1.45 var(--font-ui); color: rgba(255, 255, 255, .9); }
.inv-hero__ico { position: absolute; right: -14px; top: -14px; opacity: .16; pointer-events: none; }
.inv-hero__ico .luvi-ico { stroke-width: 1.2; }

.inv-sec {
  padding: var(--s5);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
}
.inv-sec > .h2 { margin: 0 0 var(--s3); font-size: 16px; }
.inv-link { display: flex; gap: var(--s2); align-items: center; }
.inv-link .field { flex: 1; min-width: 0; }
.inv-link .btn { flex: none; }
.inv-share { margin-top: var(--s3); }
.inv-share .chip { text-decoration: none; }

.inv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }

.inv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.inv-steps li { display: flex; gap: var(--s3); }
.inv-steps__ico {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-2); color: var(--text-2);
  font: 700 14px/1 var(--font-ui); font-variant-numeric: tabular-nums;
}
.inv-steps b { display: block; font: 600 14px/1.35 var(--font-ui); color: var(--text-1); }
.inv-steps li > span:last-child > span { font: 400 13px/1.45 var(--font-ui); color: var(--text-2); }

.inv-list { list-style: none; margin: 0; padding: 0; }
.inv-list li {
  display: flex; justify-content: space-between; gap: var(--s3);
  padding: 10px 0; font: 400 14px/1.35 var(--font-ui);
}
.inv-list li + li { border-top: 1px solid var(--border-2); }
.inv-list__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); }
.inv-list__m { flex: none; color: var(--text-3); }
.inv-list__m b { color: var(--accent); }

.inv-rules { margin: 0; padding: 0 4px; font: 400 12px/1.5 var(--font-ui); color: var(--text-3); }

/* Вход из кабинета: одна строка-ссылка под плитками сводки. */
.inv-entry {
  display: flex; align-items: center; gap: var(--s4);
  margin-top: var(--s4);
  padding: var(--s4);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  color: inherit; text-decoration: none;
  transition: background var(--t-hover);
}
@media (hover: hover) and (pointer: fine) { .inv-entry:hover { background: var(--surface-2); } }
.inv-entry__ico {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: linear-gradient(115deg, #ff8a18 0%, #fd429c 55%, #e83b8a 100%);
  color: #fff;
}
.inv-entry__txt { min-width: 0; flex: 1; }
.inv-entry__txt b { display: block; font: 600 15px/1.3 var(--font-ui); color: var(--text-1); }
.inv-entry__txt span { display: block; font: 400 13px/1.4 var(--font-ui); color: var(--text-2); }
.inv-entry__go { display: inline-flex; align-items: center; gap: 4px; flex: none; font: 600 13px/1 var(--font-ui); color: var(--accent); }
.inv-entry__go .luvi-ico { transform: rotate(-90deg); }

@media (max-width: 700px) {
  /* три числа в ряд, а не столбиком на весь экран (аудит 19.10.2026) */
  .inv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
  .inv-stats .atile { padding: var(--s3); }
  .inv-stats .atile__c { font-size: 12px; }
  .inv-link { flex-wrap: wrap; }
  .inv-link .btn { width: 100%; }
  .inv-entry__go { display: none; }
}

/* ============================================================
   МОИ ОТКРЫТКИ (#/cards, 09.10)
   Карточка открытки: кому, повод и песня, плашка состояния справа,
   ниже — когда отправлена и просмотры, ещё ниже — действия.
   ============================================================ */
.crd { max-width: 720px; display: grid; gap: var(--s3); }
.crd-item {
  padding: var(--s4);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
}
.crd-item.is-revoked { opacity: .7; }
.crd-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.crd-item__who { min-width: 0; }
.crd-item__who b { display: block; font: 600 16px/1.3 var(--font-ui); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crd-item__who span { display: block; margin-top: 2px; font: 400 13px/1.4 var(--font-ui); color: var(--text-2); }
.crd-item__meta { display: flex; flex-wrap: wrap; gap: 4px var(--s4); margin-top: var(--s2); font: 400 12.5px/1.4 var(--font-ui); color: var(--text-3); }
.crd-item__acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.crd-item__acts .btn { text-decoration: none; }
.crd-share { margin-top: var(--s3); }
.crd-share .chip { text-decoration: none; }

.crd-chip {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font: 600 12px/1.3 var(--font-ui);
  background: var(--surface-2);
  color: var(--text-2);
}
.crd-chip--opened { background: rgba(47, 190, 122, .14); color: var(--success); }
.crd-chip--scheduled { background: var(--accent-soft); color: var(--accent); }
.crd-chip--revoked { background: rgba(255, 107, 94, .12); color: var(--error); }

@media (max-width: 700px) {
  .crd-item__top { flex-direction: column; }
  .crd-item__acts .btn { flex: 1 1 calc(50% - var(--s2)); justify-content: center; }
}


/* ============================================================
   СТУДИЯ ПО СОЗВОНУ 09.10.2026
   Своё аудио на виду, кнопки текста и стиля с подписями, вокал в
   стиле, качество наверху, название внизу, новый каталог стилей.
   Блок нарочно в конце файла: перекрывает прежние правила по месту,
   и вся переделка видна в одном месте.
   ============================================================ */

/* ---------- верхняя строка: режимы, справка, качество ---------- */
.studio__top { flex-wrap: nowrap; }
.studio__model { margin-left: auto; flex: none; }
.studio__model:empty { display: none; }
.pick--model { height: 36px; gap: 6px; font-weight: 600; font-size: 13px; }
.pick--model > svg:first-child { color: var(--accent); }

/* второе слово пункта меню — пояснение, чем он отличается от соседних */
.menu__two { display: grid; gap: 3px; min-width: 0; }
.menu__two small { font: 400 12px/1.25 var(--font-ui); color: var(--text-3); }
.menu .menu__item:has(.menu__two) { height: auto; min-height: 48px; padding-top: 8px; padding-bottom: 8px; }

/* ---------- своё аудио и свой текст ---------- */
.ownbar { flex-wrap: wrap; gap: var(--s2); }
.ownpill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px 0 6px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-1);
  font: 600 14px/1 var(--font-ui);
  cursor: pointer;
  transition: border-color var(--t-hover), background var(--t-hover);
}
.ownpill__plus {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .ownpill:hover { border-color: rgba(253, 66, 156, .5); background: var(--surface-3); }
}
.ownpill:active { transform: scale(.98); }
.ownpill:focus-visible { outline: none; box-shadow: var(--ring); }
.ownbar.is-on { padding: 5px 6px 5px 5px; gap: var(--s2); }
.ownbar__play {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
span.ownbar__play { cursor: default; }
.ownbar__name { display: grid; gap: 2px; white-space: normal; }
.ownbar__name b {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 13px/1.2 var(--font-ui); color: var(--text-1);
}
.ownbar__name span { font: 400 11.5px/1.2 var(--font-ui); color: var(--text-2); }

/* ---------- кнопки с подписями ---------- */
.tbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 34px;
  padding: 0 14px 0 11px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-1);
  font: 600 13px/1 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-hover), border-color var(--t-hover), color var(--t-hover);
}
.tbtn svg { flex: none; color: var(--text-2); }
@media (hover: hover) and (pointer: fine) {
  .tbtn:hover { background: var(--surface-hover); border-color: rgba(255, 255, 255, .18); }
}
.tbtn:active { transform: scale(.98); }
.tbtn:focus-visible { outline: none; box-shadow: var(--ring); }
/* главная кнопка панели — с акцентом, но не кричит громче «Создать» */
.tbtn--main, .tbtn--cat {
  border-color: rgba(253, 66, 156, .45);
  background: var(--accent-soft);
}
.tbtn--main svg, .tbtn--cat svg { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .tbtn--main:hover, .tbtn--cat:hover { background: rgba(253, 66, 156, .22); border-color: var(--accent); }
}
.tbtn--main { height: 40px; padding: 0 16px 0 13px; font-size: 14px; }
.tbtn__cost {
  margin-left: 2px;
  padding: 3px 7px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .08);
  font: 600 11.5px/1 var(--font-ui);
  color: var(--text-2);
}
.tbtn__acc { font: 700 15px/1 var(--font-head); color: var(--accent); letter-spacing: .02em; }
/* ряд под полем текста: «Сгенерировать текст» и «Ударение» */
.tacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
/* «Подскажи идею» лежит в углу поля — та же кнопка, только поменьше */
.srow--in .tbtn { height: 32px; background: var(--surface-3); }
.srow--in .tbtn svg { color: var(--warning); }

/* ---------- режим ударений (04.11.2026) ----------
   Кнопка «Ударение» превращает поле в текст, где слово нажимается одним
   касанием (views-studio.js, «РЕЖИМ УДАРЕНИЙ»). Строка с «Готово» липнет
   к верху экрана, пока листают длинную песню, варианты встают под словом.
   Липнуть ей мешал бы overflow: hidden панели — в режиме он открыт. */
.pan.is-stress,
.pan.is-stress:focus-within { border-color: rgba(253, 66, 156, .45); overflow: visible; }
/* текст правят словами, а не клавиатурой: поле, кнопки под ним, «Новый
   текст» и библиотека в режиме не нужны */
.pan.is-stress .pan__row--clear,
.pan.is-stress .tacts,
.pan.is-stress .accbar,
.pan.is-stress [data-act="new-text"],
.pan.is-stress [data-act="lib-text"] { display: none; }
.stress-bar {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--s2));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border: 1px solid rgba(253, 66, 156, .45);
  border-radius: var(--r-md);
  background: var(--surface-3);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
.stress-bar__t { flex: 1; min-width: 0; margin: 0; font: 600 13px/1.4 var(--font-ui); color: var(--text-2); }
.stress-bar__t b { color: var(--warning); font-weight: 700; }
/* .tbtn--main на телефоне тянется на всю строку — здесь не надо */
.stress-bar .stress-bar__done { flex: none; height: 38px; padding: 0 18px; }
.stress-box { position: relative; }
.stress-text {
  min-height: 160px;
  padding-bottom: var(--s2);
  color: var(--text-1);
  font: 400 16px/2 var(--font-ui);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  /* без системного меню «Скопировать» и без увеличения по двойному касанию */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.stress-tag { color: var(--text-3); }
/* слово, которое можно нажать: точки снизу; поле касания шире слова за
   счёт отступов, а сам текст при этом не сдвигается */
.stress-w {
  padding: 5px 2px;
  margin: 0 -2px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(255, 255, 255, .26);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  transition: background var(--t-hover), color var(--t-hover);
}
.stress-w b { font-weight: 700; color: var(--accent); }
.stress-w.is-acc { text-decoration-style: solid; text-decoration-color: rgba(253, 66, 156, .45); }
/* спорное слово — оранжевым: этот вид владелец выбрал из трёх (04.11.2026) */
.stress-w.is-risk { color: var(--warning); text-decoration-color: rgba(245, 166, 92, .6); }
.stress-w.is-on { background: var(--accent-soft); color: var(--text-1); text-decoration-color: transparent; }
.stress-w.is-new { animation: stress-new 1s var(--ease-out); }
.stress-w:focus-visible { outline: none; box-shadow: var(--ring); }
@media (hover: hover) and (pointer: fine) {
  .stress-w:hover:not(.is-on) { background: var(--surface-3); }
}
@keyframes stress-new { from { background: rgba(253, 66, 156, .34); } to { background: transparent; } }
.stress-pop {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  width: max-content;
  max-width: 100%;
  padding: 10px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  background: var(--surface-3);
  box-shadow: var(--shadow-overlay);
  touch-action: manipulation;
  /* прокручивая к окну, оставляем место под строку «Готово» сверху и
     под «Создать трек» с подписью и меню телефона снизу */
  scroll-margin: 96px 0 calc(190px + var(--player-h));
  animation: stress-pop-in var(--t-pop) var(--ease-out);
}
.stress-pop[hidden] { display: none; }
@keyframes stress-pop-in { from { opacity: 0; transform: translateY(-4px); } }
.stress-pop__why { margin: 0 2px; font: 600 12px/1.35 var(--font-ui); color: var(--text-3); }
.stress-pop__opts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.stress-opt {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border-1);
  border-radius: 22px;
  background: var(--surface-2);
  color: var(--text-1);
  font: 400 17px/1 var(--font-ui);
  cursor: pointer;
}
.stress-opt b { font-weight: 700; color: var(--accent); }
.stress-opt small { font: 600 12px/1 var(--font-ui); color: var(--text-3); }
.stress-opt:has(small) { padding: 9px 16px; border-radius: 16px; }
.stress-opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.stress-opt--off { color: var(--text-2); font: 600 14px/1 var(--font-ui); }
.stress-skip {
  height: 36px;
  padding: 0 10px;
  margin-left: -4px;
  border: 0;
  border-radius: var(--r-full);
  background: none;
  color: var(--text-2);
  font: 600 13px/1 var(--font-ui);
  text-decoration: underline;
  text-decoration-color: var(--border-1);
  text-underline-offset: 4px;
  cursor: pointer;
}
.stress-opt:focus-visible,
.stress-skip:focus-visible { outline: none; box-shadow: var(--ring); }
@media (prefers-reduced-motion: reduce) {
  .stress-pop { animation: none; }
  .stress-w.is-new { animation-duration: 1ms; }
}

/* ---------- ударение по двойному нажатию ---------- */
.accbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 8px 12px;
  border: 1px solid rgba(253, 66, 156, .45);
  border-radius: var(--r-md);
  background: var(--surface-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.accbar::-webkit-scrollbar { display: none; }
.accbar[hidden] { display: none; }
.accbar__t { flex: none; font: 600 12px/1 var(--font-ui); color: var(--text-3); }
.accbar .chip { flex: none; font-size: 14px; }
.accbar__x { margin-left: auto; width: 28px; height: 28px; flex: none; }

/* ---------- стиль ---------- */
.srow__preset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 12px/1.2 var(--font-ui);
  color: var(--success);
}
.srow__why {
  flex: 1 0 100%;
  margin: 2px 0 0;
  font: 400 12.5px/1.45 var(--font-ui);
  color: var(--text-3);
}
/* вокал — строкой внутри панели стиля */
.vrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--border-2);
}
.vrow--sub { border-top: 0; padding-top: 0; }
.vrow__t { flex: none; width: 64px; font: 400 14px/1.3 var(--font-ui); color: var(--text-2); }
.vrow .seg { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.vrow .seg::-webkit-scrollbar { display: none; }
.vrow .seg__item { flex: none; height: 30px; padding: 0 12px; font-size: 13px; }
.vrow .seg { height: 36px; padding: 3px; }
.vrow__voice { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* строка «Сохранить в папку» внутри панели названия */
.orow--flat { min-height: 0; padding: 0; }
.pan[data-pan="name"] input.bare { font-weight: 600; font-size: 15px; }

/* ---------- выбор трека из библиотеки: послушать и взять ---------- */
.plpick__line { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s2); align-items: stretch; }
.plpick__line + .plpick__line { margin-top: var(--s1); }
.plpick__line .plpick__row { grid-template-columns: minmax(0, 1fr) auto; }
.plpick__play {
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface-3) center / cover no-repeat;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
}
.plpick__play::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 12, .45);
  transition: background var(--t-hover);
}
.plpick__play svg { position: relative; }
.plpick__play.is-on::before { background: rgba(253, 66, 156, .55); }
@media (hover: hover) and (pointer: fine) { .plpick__play:hover::before { background: rgba(8, 7, 12, .25); } }

/* ---------- окно «Сгенерировать текст» ---------- */
.gentext .gentext__idea {
  height: auto;
  min-height: 112px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.45;
}
.gentext__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin: var(--s3) 0;
}
.gentext__lang { display: inline-flex; align-items: center; gap: var(--s2); font: 400 13px/1 var(--font-ui); color: var(--text-2); }

/* ---------- «Как у исполнителя» ---------- */
.artist .field + .field, .artist .artist__sug + .field { margin-top: var(--s4); }
.artist__sug { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); }
.artist__sug[hidden] { display: none; }
.artist .pan__note { margin-top: var(--s3); }

/* ---------- выбор голоса шторкой ---------- */
.vpush__note { margin: 0 0 var(--s4); font: 400 13px/1.45 var(--font-ui); color: var(--text-2); }
.vpush__list { display: grid; gap: var(--s2); }
.vpush__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 24px;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.vpush__ava {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.vpush__t { display: grid; gap: 3px; min-width: 0; }
.vpush__t b { font: 600 15px/1.2 var(--font-ui); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vpush__t span { font: 400 12.5px/1.2 var(--font-ui); color: var(--text-3); }
.vpush__on { color: var(--accent); }
.vpush__row.is-on { border-color: var(--accent); background: var(--accent-soft); }
.vpush__row.is-dead { opacity: .55; }
.vpush__row.is-dead .vpush__ava { background: var(--surface-3); color: var(--text-3); }
@media (hover: hover) and (pointer: fine) { .vpush__row:not(.is-dead):hover { border-color: rgba(255, 255, 255, .22); } }
.vpush__rec { width: 100%; justify-content: center; }

@media (max-width: 700px) {
  .studio__top .seg__item { padding: 0 10px; }
  .pick--model span { max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
  .tbtn--main { flex: 1 1 100%; justify-content: center; }
  .vrow { flex-wrap: wrap; gap: var(--s2); }
  .vrow__t { width: 100%; }
  /* «Вокал» обрезался снизу: высота 36 при кнопках в две строки, а
     «Свой текст · По описанию · Инструментал» не влезал по ширине
     (аудит 19.10.2026). Вокал — две строки по две кнопки, способ
     текста — три равные кнопки без значков. */
  .vrow .seg { width: 100%; height: auto; flex-wrap: wrap; overflow: visible; border-radius: var(--r-lg); }
  .vrow .seg__item { flex: 1 1 calc(50% - 4px); }
  .seg[data-seg="lyrics"] { display: flex; width: 100%; }
  .seg[data-seg="lyrics"] .seg__item { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: 13px; }
  .seg[data-seg="lyrics"] .seg__item svg { display: none; }
}


/* ============================================================
   КАТАЛОГ СТИЛЕЙ (styles-catalog.js)
   Большое окно: сначала разделы-плитки с картинками, внутри —
   направления и карточки стилей. На телефоне — во весь экран.
   ============================================================ */
html.is-scat, html.is-scat body { overflow: hidden; }
.scat {
  --hue: var(--accent);
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal);
  width: min(980px, calc(100vw - 48px));
  height: min(calc(var(--vh) * .88), 860px);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
  animation: modal-in var(--t-drawer) var(--ease-drawer);
}
/* цвет раздела тихо подсвечивает шапку — видно, где находишься */
.scat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 220px;
  background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--hue) 22%, transparent), transparent 70%);
  pointer-events: none;
  transition: background .3s;
}
.scat__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 20px 20px 0 24px;
}
.scat__title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.scat__title .h2 { margin: 0; white-space: nowrap; }
.scat__crumb { font: 600 14px/1.2 var(--font-ui); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scat__back { margin-left: -8px; }
.scat__back[hidden] { display: none; }
.scat__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 24px 0;
  height: 46px;
  padding: 0 16px;
  border-radius: var(--r-full);
  background: var(--bg);
  border: 1px solid var(--border-1);
  color: var(--text-3);
}
.scat__search:focus-within { border-color: rgba(255, 255, 255, .24); }
.scat__search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--text-1);
  font: 400 15px/1 var(--font-ui);
  outline: none;
}
.scat__search input::placeholder { color: var(--text-ph); }
.scat__body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 24px 28px;
  scrollbar-width: thin;
}

/* зачем вообще нужен каталог */
.scat__why {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(115deg, rgba(255, 138, 24, .10), rgba(251, 69, 149, .10));
  border: 1px solid rgba(253, 66, 156, .22);
}
.scat__why-ico {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
}
.scat__why p { margin: 0; font: 400 13.5px/1.5 var(--font-ui); color: var(--text-2); }
.scat__why b { color: var(--text-1); font-weight: 700; }

/* плитки разделов */
.scat__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.scat-tile {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  gap: 6px;
  min-height: 168px;
  padding: 16px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--hue) 26%, transparent), transparent 70%),
    var(--surface-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .18s var(--ease-out), border-color var(--t-hover), box-shadow .18s var(--ease-out);
}
.scat-tile__ico {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--hue) 18%, var(--surface-3));
  border: 1px solid color-mix(in srgb, var(--hue) 40%, transparent);
  color: var(--hue);
}
.scat-tile__t { font: 700 17px/1.2 var(--font-head); color: var(--text-1); }
/* Две строки у всех: трёхстрочное описание «Русского» делало первый
   ряд выше остальных (аудит 19.10.2026). */
.scat-tile__d { font: 400 13px/1.4 var(--font-ui); color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.4em); }
.scat-tile__n { margin-top: 6px; font: 600 12px/1 var(--font-ui); color: var(--text-3); }
@media (hover: hover) and (pointer: fine) {
  .scat-tile:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--hue) 55%, transparent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
  }
}
.scat-tile:active { transform: scale(.98); }
.scat-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hue) 40%, transparent); }

/* направления внутри раздела */
.scat__subs {
  position: sticky;
  top: -18px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -18px -24px 14px;
  padding: 14px 24px 12px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-2);
}
.scat__subs .chip { flex: none; }
.scat__subs .chip[aria-pressed="true"] {
  border-color: var(--hue);
  background: color-mix(in srgb, var(--hue) 16%, transparent);
  color: var(--text-1);
}
.scat__subs .chip[aria-pressed="true"] .n { color: var(--hue); }

/* карточки стилей */
.scat__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 14px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-hover), background var(--t-hover);
}
.scat-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.scat-card__top b { font: 700 15px/1.3 var(--font-ui); color: var(--text-1); }
.scat-card__on {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: #fff;
  font: 700 11px/1 var(--font-ui);
}
.scat-card__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 600 12px/1.3 var(--font-ui); color: var(--hue); }
.scat-card__sub i {
  font-style: normal;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--hue) 16%, transparent);
  color: var(--hue);
}
.scat-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 400 13px/1.45 var(--font-ui);
  color: var(--text-2);
}
.scat-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.scat-card__tags i {
  font-style: normal;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  font: 600 11.5px/1 var(--font-ui);
  color: var(--text-2);
}
.scat-card__go {
  align-self: flex-start;
  margin-top: 4px;
  padding: 7px 14px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  font: 700 12.5px/1 var(--font-ui);
  color: var(--text-1);
  transition: background var(--t-hover), color var(--t-hover);
}
@media (hover: hover) and (pointer: fine) {
  .scat-card:hover { border-color: color-mix(in srgb, var(--hue) 55%, transparent); background: var(--surface-3); }
  .scat-card:hover .scat-card__go { background: var(--grad); color: #fff; }
}
.scat-card:active { transform: scale(.99); }
.scat-card:focus-visible { outline: none; box-shadow: var(--ring); }
.scat-card.is-current { border-color: var(--accent); background: var(--accent-soft); }
.scat__found, .scat__more { margin: 0 0 12px; font: 600 13px/1.4 var(--font-ui); color: var(--text-3); }
.scat__more { margin: 14px 0 0; text-align: center; }

@media (max-width: 900px) {
  .scat {
    left: 0; top: 0;
    transform: none;
    width: 100%;
    height: var(--vh);
    border-radius: 0;
    border: 0;
    animation: slide-up var(--t-drawer) var(--ease-drawer);
  }
  .scat__head { padding: 14px 12px 0 16px; padding-top: max(14px, env(safe-area-inset-top)); }
  .scat__search { margin: 12px 16px 0; height: 44px; }
  .scat__body { padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); }
  .scat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .scat-tile { min-height: 0; padding: 14px; gap: 4px; }
  .scat-tile__ico { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 4px; }
  .scat-tile__t { font-size: 15.5px; }
  .scat-tile__d { font-size: 12px; }
  .scat__why { padding: 12px 14px; }
  .scat__why p { font-size: 13px; }
  /* направления на телефоне — одной полосой с прокруткой вбок */
  .scat__subs {
    top: -14px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: -14px -16px 12px;
    padding: 12px 16px 10px;
  }
  .scat__subs::-webkit-scrollbar { display: none; }
  .scat__list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .scat, .scat-tile { animation: none; transition: none; }
}

/* На телефоне четыре режима, справка и качество в одну строку не
   влезают: «Своим голосом» обрезалось. Режимы — на всю ширину,
   справка и качество — строкой ниже, по краям. */
@media (max-width: 700px) {
  .studio__top { flex-wrap: wrap; row-gap: var(--s2); }
  .studio__top .seg { flex: 1 1 100%; order: -1; }
  .studio__top .seg__item { flex: 1 0 auto; padding: 0 8px; }
  /* В «Простом» качества нет, и «?» оставался один в целой строке,
     похожий на забытую кнопку. Там он получает подпись и становится
     понятной ссылкой «Как пользоваться». */
  .studio__top:has(.studio__model:empty) .studio__help {
    width: auto; padding: 0 12px 0 6px; gap: 6px; color: var(--text-2);
  }
  .studio__top:has(.studio__model:empty) .studio__help-t { display: inline; }
}
.studio__help-t { display: none; font: 500 13px/1 var(--font-ui); }

/* ============================================================
   МИНИ-ПЛЕЕР: полоса трека под кнопками (созвон 09.10.2026)
   Как у Suno: кнопки, под ними полоса со временем по бокам. Бегунок
   едет плавно — между отметками позиции доля дорисовывается
   переходом, а не прыгает раз в четверть секунды.
   ============================================================ */
@property --p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.player__mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.player__seek { display: none; }
@media (min-width: 901px) {
  :root[data-player="on"] { --player-h: 84px; }
  .player { height: 84px; }
  .player__mid { width: min(560px, 42vw); }
  .player__seek {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .player__now, .player__all {
    flex: none;
    min-width: 34px;
    font: 600 11px/1 var(--font-ui);
    color: var(--text-3);
  }
  .player__now { text-align: right; }
  .player__progress {
    position: relative;
    top: auto; left: auto; right: auto;
    flex: 1;
    height: 4px;
  }
  .player__progress::before { inset: -8px 0; }
  .player__progress input {
    height: 4px;
    border-radius: 2px;
    transition: --p .25s linear;
  }
  .player__progress input::-webkit-slider-thumb { width: 12px; height: 12px; }
  .player:hover .player__progress input { height: 5px; }
  /* время теперь под кнопками — справа его второй раз не пишем */
  .player__right .player__time { display: none; }
}
@media (max-width: 900px) {
  /* на телефоне обёрток нет: полоса снова прижата к верху полосы плеера,
     а время, как и раньше, мелко справа под кнопками */
  .player__mid, .player__seek { display: contents; }
  .player__now, .player__all { display: none; }
}
@media (prefers-reduced-motion: reduce) { .player__progress input { transition: none; } }

/* ---------- имя автора вместо почты (созвон 09.10.2026) ---------- */
.fd-noname {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s4);
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid rgba(253, 66, 156, .3);
  font: 400 13.5px/1.4 var(--font-ui);
  color: var(--text-2);
}
.fd-noname > svg { flex: none; color: var(--accent); }
.fd-noname span { flex: 1; min-width: 0; }
.fd-noname .btn { flex: none; }
.fcard__setname {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: 600 13px/1.3 var(--font-ui);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .fcard__setname:hover { text-decoration: underline; } }
@media (max-width: 700px) {
  .fd-noname { flex-wrap: wrap; }
  .fd-noname .btn { margin-left: 30px; }
}

/* ---------- «Своим голосом»: карточка текущего голоса ---------- */
/* Без своей рамки и заливки: карточка стоит внутри панели, и была рамка
   в рамке (аудит 19.10.2026). Выбранный голос отмечает аватар. */
.voice-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
}
.voice-card__ava {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
}
.voice-card__t { display: grid; gap: 3px; min-width: 0; }
.voice-card__t b { font: 700 16px/1.2 var(--font-head); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-card__t span { font: 400 12.5px/1.3 var(--font-ui); color: var(--text-2); }
.voice-card__new { margin-top: var(--s2); }

/* Подсказки обучения: «Назад», «Пропустить» и «Дальше» — в одну строку
   (владелец 13.10.2026). В 280 px три кнопки со счётчиком не влезали,
   и «Дальше» уезжала под остальные. Плашка шире, кнопки не переносятся. */
.coach { width: 360px; }
.coach__acts, .coach__btns { flex-wrap: nowrap; }
.coach__btns { gap: 2px; }
.coach__btns .btn--sm { padding-left: 12px; padding-right: 12px; }

/* Поле поиска каталога: рамку фокуса рисует сама капсула (:focus-within),
   общая обводка полей давала вторую рамку внутри неё. */
.scat__search input:focus,
.scat__search input:focus-visible { outline: none; box-shadow: none; }
.scat__search:focus-within { border-color: rgba(253, 66, 156, .55); box-shadow: var(--ring); }
/* цена в списке качества — справа, перед галочкой */
.menu__item .label { color: var(--text-3); font: 600 12px/1 var(--font-ui); white-space: nowrap; }
.menu__item .label + span { margin-left: 10px !important; }

/* ---------- плитки каталога: объёмный значок и сцена жанра ----------
   (владелец 13.10.2026) Значок без плашки, со свечением цвета раздела;
   сцена — справа, одним цветом, гаснет к тексту. */
.scat-tile { isolation: isolate; background: var(--surface-2); }
.scat-tile > :not(.scat-tile__art) { position: relative; z-index: 1; }
.scat-tile__art {
  position: absolute;
  inset: 0 0 0 28%;
  z-index: 0;
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .62;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 60%);
          mask-image: linear-gradient(to right, transparent 0%, #000 60%);
  transition: opacity .3s var(--ease-out), transform .6s var(--ease-out);
  pointer-events: none;
}
.scat-tile__ico {
  width: 68px; height: 68px;
  margin: -4px 0 4px -6px;
  border: 0;
  border-radius: 0;
  background: none;
  filter: drop-shadow(0 8px 20px color-mix(in srgb, var(--hue) 45%, transparent));
  transition: transform .35s var(--ease-out);
}
.scat-tile__ico img { display: block; width: 100%; height: 100%; object-fit: contain; }
.scat-tile__svg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--hue); }
.scat-tile__t { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.scat-tile__d { max-width: 78%; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
@media (hover: hover) and (pointer: fine) {
  .scat-tile:hover .scat-tile__art { opacity: .85; transform: scale(1.04); }
  .scat-tile:hover .scat-tile__ico { transform: translateY(-3px) rotate(-4deg) scale(1.06); }
}
/* внутри раздела его сцена тихо стоит в правом верхнем углу окна */
.scat::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 60%;
  height: 200px;
  background: var(--art, none) right top / cover no-repeat;
  opacity: .32;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 70%), linear-gradient(to bottom, #000 40%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 70%), linear-gradient(to bottom, #000 40%, transparent);
          mask-composite: intersect;
  pointer-events: none;
  z-index: 0;
}
.scat__head, .scat__search, .scat__body { z-index: 1; }
@media (max-width: 900px) {
  .scat-tile__art {
    inset: 0;
    opacity: .5;
    -webkit-mask-image: linear-gradient(200deg, #000 25%, transparent 75%);
            mask-image: linear-gradient(200deg, #000 25%, transparent 75%);
  }
  .scat-tile__ico { width: 56px; height: 56px; }
  .scat-tile__d { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scat-tile__art, .scat-tile__ico { transition: none; }
}

/* меню с пояснениями (качество) шире: пояснение и цена в одну строку */
.menu:has(.menu__two) { min-width: 340px; }
.menu__two small { white-space: nowrap; }
/* описание раздела не заходит на яркую часть сцены */
@media (min-width: 901px) {
  .scat-tile__d { max-width: 62%; }
  .scat-tile__art {
    -webkit-mask-image: linear-gradient(to right, transparent 8%, #000 72%);
            mask-image: linear-gradient(to right, transparent 8%, #000 72%);
  }
}
/* цена у пунктов без галочки стоит там же, где у выбранного */
.menu__item .label:last-child { margin-right: 24px; }


/* ============================================================
   ПРАВКИ ВЛАДЕЛЬЦА 13.10.2026 (второй круг)
   ============================================================ */

/* Ползунки «Ещё настроек» не прыгают. У них тот же класс .eq, что у
   играющего эквалайзера, и к чёрточкам прилипала его бесконечная
   анимация, а первым трём — его высоты. Шкала стоит неподвижно и
   нарисована плотнее. */
.eq .eq__bars i {
  animation: none;
  transform: none;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .16);
}
.eq .eq__bars i.is-on {
  width: 5px;
  height: 24px;
  border-radius: var(--r-full);
  background: var(--accent);
}
.eq .eq__bars { height: 24px; }
@media (hover: hover) and (pointer: fine) {
  .eq:hover .eq__bars i { background: rgba(255, 255, 255, .22); }
  .eq:hover .eq__bars i.is-on { background: var(--accent-hover); }
}

/* «Исключить:» — подписью ярче, без крестика */
.pan__minus { color: var(--text-2); font: 600 13px/1 var(--font-ui); }

/* подсказка под пустым стилем — справкой, тише остального */
.srow__why { font-size: 12px; line-height: 1.45; color: var(--text-3); }

/* папка без подписи — кнопкой у левого края */
.pick--folder { max-width: 100%; }
.pick--folder span { overflow: hidden; text-overflow: ellipsis; }

/* каталог: ровный отступ после поиска; «зачем каталог» — серой справкой внизу */
.scat__body { padding-top: 20px; }
.scat__why {
  display: block;
  margin: 18px 2px 0;
  padding: 0;
  border: 0;
  background: none;
  font: 400 12.5px/1.55 var(--font-ui);
  color: var(--text-3);
}

/* окно по центру (как у каталога): «Как у исполнителя» */
.modal.pop { width: min(520px, calc(100vw - 32px)); max-height: min(calc(var(--vh) * .86), 640px); }
.pop .modal__head { align-items: flex-start; }
.pop__sub { margin: 6px 0 0; font: 400 13.5px/1.45 var(--font-ui); color: var(--text-2); }
.pop__body { margin-top: var(--s5); overflow: auto; }
.pop__body .field + .field, .pop__body .artist__sug + .field { margin-top: var(--s4); }
.pop__body .pan__note { margin-top: var(--s3); }
.pop__foot { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s5); }
@media (max-width: 700px) {
  .modal.pop { padding: var(--s5); }
  .pop__foot .btn { flex: 1; justify-content: center; }
}

/* «Как пользоваться»: сначала описание режима. По дизайн-системе —
   надпись (.kicker), заголовок (.h2) и вводный абзац крупнее шагов
   (как .lv-lead). Ни плашки, ни цветной полосы сбоку: выделяет кегль,
   а не рамка (владелец 13.10.2026). */
.howto__intro { padding: var(--s1) 0 var(--s5); border-bottom: 1px solid var(--border-2); }
.howto__intro .kicker { display: block; margin-bottom: var(--s2); }
.howto__intro .h2 { margin: 0; color: var(--text-1); }
.howto__lead { margin: var(--s2) 0 0; font: 400 15.5px/1.55 var(--font-ui); color: var(--text-1); text-wrap: pretty; }
/* на телефоне окна приложения — шторка снизу во всю ширину, как остальные */
@media (max-width: 900px) { .modal.pop { width: 100%; } }
/* на узком экране 32 чёрточки по 3 px сливались в сплошную полосу */
@media (max-width: 700px) {
  .eq .eq__bars i { width: 2px; height: 12px; }
  .eq .eq__bars i.is-on { width: 4px; height: 22px; }
}

/* Поиск каталога в фокусе подсвечивается так же тихо, как панели формы
   (.pan:focus-within): светлый контур, без розового кольца (владелец 13.10.2026). */
.scat__search:focus-within { border-color: rgba(255, 255, 255, .18); box-shadow: none; }
/* Внутри раздела между поиском и направлениями больше воздуха. */
.scat__subs { margin-top: -6px; top: -20px; }
@media (max-width: 900px) {
  .scat__subs { margin-top: -4px; top: -20px; }
}

/* голос в шторке: строка выбора и «…» с действиями рядом */
.vpush__line { display: flex; align-items: center; gap: var(--s1); }
.vpush__line .vpush__row { flex: 1; min-width: 0; }
.vpush__more { flex: none; width: 40px; height: 40px; }

/* ============================================================
   ПОДДЕРЖКА: настоящая переписка, вложения, крупнее (13.10.2026)
   ============================================================ */
.sup { width: 420px; height: min(calc(var(--vh) * .78), 640px); }
.sup__foot { position: relative; }
.sup__feed .msg { font-size: 13.5px; }
.sup__feed .msg .msg__t { white-space: pre-wrap; overflow-wrap: anywhere; }
.sup__feed .msg__time { display: block; margin-top: 4px; font: 400 11px/1 var(--font-ui); color: var(--text-3); text-align: right; }
.msg__img { display: block; margin-top: 6px; border-radius: var(--r-sm); overflow: hidden; max-width: 240px; }
.msg__img img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; }
.msg__audio { display: block; margin-top: 6px; width: 240px; max-width: 100%; height: 36px; }
/* приложенные к сообщению файлы — над полем ввода */
.sup__files { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; }
.sup__files[hidden] { display: none; }
.sup__file {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 4px 4px 4px 4px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
}
.sup__file img, .sup__file-ico {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 6px; object-fit: cover;
  background: var(--surface-3); color: var(--text-2);
}
.sup__file-t { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/1.2 var(--font-ui); color: var(--text-2); }
.sup__file-x { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border: 0; border-radius: 50%; background: none; color: var(--text-3); cursor: pointer; }
.sup__file-x:hover { background: var(--surface-3); color: var(--text-1); }
.sup__file.is-load { opacity: .6; }
.sup__file.is-load .sup__file-t::after { content: " · загружаем"; color: var(--text-3); }
.sup__file.is-err { border-color: rgba(255, 107, 94, .5); }
.sup__file.is-err .sup__file-t::after { content: " · не загрузился"; color: var(--error); }
/* слой «отпустите файл» поверх всего окна */
.sup__drop {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px dashed rgba(255, 255, 255, .28);
  border-radius: var(--r-lg);
  background: rgba(12, 11, 16, .86);
  color: var(--text-1);
  pointer-events: none;
}
.sup__drop[hidden] { display: none; }
.sup__drop b { font: 600 15px/1.3 var(--font-ui); }
.sup__drop span { font: 400 12.5px/1.3 var(--font-ui); color: var(--text-3); }
/* поле ввода в фокусе — тихий контур, как у панелей формы */
.sup__input:focus { border-color: rgba(255, 255, 255, .22); box-shadow: none; }
@media (max-width: 900px) {
  .sup { width: auto; height: min(calc(var(--vh) * .78), 560px); }
}

/* карточка трека: тихая строка «задать имя» под подписью автора */
.fcard__noname { margin: 6px 0 0; font: 400 12.5px/1.45 var(--font-ui); color: var(--text-3); }
.fcard__noname button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-1);
  font: 600 12.5px/1.45 var(--font-ui);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .3);
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .fcard__noname button:hover { text-decoration-color: currentColor; } }
/* метки частей песни в тексте — подписями, а не строками */
.lyrics .lyrics__part { display: block; margin: 14px 0 4px; }
.lyrics .lyrics__part:first-child { margin-top: 0; }
/* плашка «задайте имя» в ленте — нейтральная, не розовая */
.fd-noname { background: var(--surface-2); border-color: var(--border-1); color: var(--text-2); }
.fd-noname > svg { color: var(--text-3); }


/* ============================================================
   БИБЛИОТЕКА (13.10.2026, решение владельца)
   Список слева, карточка выбранного трека справа. Два вида —
   «Списком» и «Обложками». Играющий трек отмечен на обложке и
   цветом названия, без прыгающих полосок рядом с ним.
   ============================================================ */
.lib-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--s6);
  align-items: start;
  margin-top: var(--s4);
}
.lib-wrap.is-empty { grid-template-columns: minmax(0, 1fr); }
.lib-wrap.is-empty .ldet-col { display: none; }
.ldet-col {
  position: sticky;
  top: var(--s4);
  max-height: calc(var(--vh) - var(--player-h) - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding: var(--s4);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
}
.ldet-col:empty { display: none; }

/* строка списка */
.lib-list.is-list .track {
  grid-template-columns: 20px 48px minmax(0, 1fr) 44px auto;
  height: 64px;
  gap: 12px;
  padding: 0 10px;
  cursor: default;
}
.lib-list.is-list .track__cover { width: 48px; height: 48px; }
.lib-list.is-list .track__tags { display: none; }
.lib-list.is-list .track__title { font-size: 15px; }
.lib-list .track__title .eq { display: none !important; }
/* инструменты видны прямо в строке (владелец 28.10.2026) */
.lib-list.is-list .track__actions { opacity: 1; }
.lib-list.is-list .track__actions .btn--icon { color: var(--text-3); }
.lib-list.is-list .track__actions .is-liked { color: var(--accent); }
/* выбранный трек — подсветка строки; играющий — цвет названия и пауза на обложке */
.lib-list .track.is-current { background: var(--surface-2); }
.lib-list .track[data-playing="1"]:not(.is-current) { background: none; }
@media (hover: hover) and (pointer: fine) {
  .lib-list .track:hover { background: var(--surface-2); }
}
.lib-list .track__main.is-open-able { cursor: pointer; }
.lib-list .track-group + .track-group,
.lib-list .track-group + .track,
.lib-list .track + .track-group { margin-top: var(--s2); }
/* В карточке трека текст песни без отступа плеера: 24 сверху и сдвиг
   строк на 16 нужны полноэкранному плееру с подсветкой строки, а тут
   давали 22 пикселя до первой строки и сдвиг вправо (аудит 19.10.2026). */
.ldet__lyr .lyrics { margin-top: 0; -webkit-mask-image: none; mask-image: none; }
.ldet__lyr .line { padding-left: 0; font-size: 14px; }

/* ---------- карточка своего трека ---------- */
.ldet { display: flex; flex-direction: column; gap: var(--s3); }
.ldet__cov {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--grad);
  cursor: pointer;
}
.ldet__cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ldet__play {
  position: absolute;
  right: 12px; bottom: 12px;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(12, 11, 16, .72);
  color: #fff;
  backdrop-filter: blur(6px);
  transition: transform var(--t-hover);
}
@media (hover: hover) and (pointer: fine) { .ldet__cov:hover .ldet__play { transform: scale(1.06); } }
.ldet__t { margin: 4px 0 0; font: 700 20px/1.25 var(--font-head); color: var(--text-1); overflow-wrap: anywhere; }
.ldet__sub { margin: -6px 0 0; font: 400 13px/1.4 var(--font-ui); color: var(--text-3); }
.ldet__acts { display: flex; align-items: center; gap: 4px; }
.ldet__acts .ldet__go { flex: 1; justify-content: center; height: 44px; }
.ldet__acts .is-liked { color: var(--accent); }
.ldet__list {
  display: grid;
  margin: 2px 0;
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  padding: 4px 0;
}
.ldet__do {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 42px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-2);
  font: 600 14px/1 var(--font-ui);
  text-align: left;
  cursor: pointer;
}
.ldet__do svg { flex: none; color: var(--text-3); }
@media (hover: hover) and (pointer: fine) {
  .ldet__do:hover { background: var(--surface-2); color: var(--text-1); }
  .ldet__do:hover svg { color: var(--text-1); }
}
.ldet__do:focus-visible { outline: none; box-shadow: var(--ring); }
.ldet__sec .kicker { display: block; margin-bottom: var(--s2); }
.ldet__prompt { margin: 0; font: 400 13.5px/1.55 var(--font-ui); color: var(--text-2); }
.ldet__lyr .lyrics { font: 400 14px/1.6 var(--font-ui); color: var(--text-2); }
.ldet__lyr[hidden] { display: none; }

/* видимый фильтр рядом с папками */
.chip--filter { gap: 6px; }
.chip--filter svg { color: currentColor; opacity: .7; }
.lib-bar .sort.is-on { color: var(--accent); }

@media (max-width: 900px) {
  .lib-wrap { grid-template-columns: minmax(0, 1fr); }
  .ldet-col { display: none; }
  .lib-list.is-list .track { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 0 4px; }
  .lib-list.is-list .track__check { display: none; }
  .lib-list.is-list .track__time-wrap { display: none; }
  .ldet-dr .drawer__body { padding-top: var(--s3); }
}
/* карточку справа можно закрыть: список — во всю ширину */
.lib-wrap.is-closed { grid-template-columns: minmax(0, 1fr); }
.lib-wrap.is-closed .ldet-col { display: none; }
.ldet { position: relative; }
.ldet__x {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 1;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(12, 11, 16, .72);
  color: #fff;
  backdrop-filter: blur(6px);
}
@media (hover: hover) and (pointer: fine) { .ldet__x:hover { background: rgba(12, 11, 16, .9); } }

/* ---------- меню с пояснениями (выбор модели), как у Suno ----------
   Подпись раздела сверху, имя с плашкой и галочкой, описание серым под
   ним, выбранная строка подсвечена. Цена — одной сноской внизу. */
.menu:has(.menu__two) { width: 340px; min-width: 0; padding: 6px; }
.menu__head {
  margin: 6px 10px 6px;
  font: 700 11px/1 var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.menu .menu__item:has(.menu__two) {
  height: auto;
  min-height: 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  align-items: flex-start;
}
.menu .menu__item:has(.menu__two) + .menu__item:has(.menu__two) { margin-top: 2px; }
.menu .menu__item.is-on { background: var(--surface-hover); }
.menu__two { gap: 4px; }
.menu__name { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1.25 var(--font-ui); color: var(--text-1); }
.menu__two small { white-space: normal; font: 400 12.5px/1.4 var(--font-ui); color: var(--text-3); }
.menu__badge {
  font-style: normal;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
  font: 700 10.5px/1.3 var(--font-ui);
  letter-spacing: .02em;
}
.menu__on { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--text-1); color: var(--bg); }
.menu__on svg { width: 12px; height: 12px; stroke-width: 2.6; }
.menu:has(.menu__two) .menu__note { margin: 6px 10px 4px; }

/* На телефоне кнопки с подписями — под палец, не ниже 40 px
   (обход 13.10.2026 нашёл 29–31 px). */
@media (hover: none), (max-width: 700px) {
  .tbtn { height: 40px; padding: 0 14px 0 12px; }
  .srow--in .tbtn { height: 38px; }
  .fcard__noname button { min-height: 32px; padding: 6px 2px; }
  .ldet__do { height: 46px; }
}
@media (hover: none) { .orow__i { width: 36px; height: 36px; margin: -6px -6px -6px -8px; } }

/* ============================================================
   ЗАПИСЬ ГОЛОСА — шаги под телефон (13.10.2026)
   ============================================================ */
.vw {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px dashed var(--border-1);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  transition: border-color var(--t-hover), background var(--t-hover);
}
.vw.is-over { border-color: rgba(255, 255, 255, .35); background: var(--surface-3); }
.vw.is-rec { border-style: solid; border-color: rgba(255, 107, 94, .55); }
.vw__steps { display: flex; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.vw__steps li {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px/1 var(--font-ui); color: var(--text-3);
}
.vw__steps li span {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-3);
  font: 700 11px/1 var(--font-ui);
}
.vw__steps li.is-on { color: var(--text-1); }
.vw__steps li.is-on span { background: var(--grad); color: #fff; }
.vw__steps li.is-done span { background: var(--success); color: #fff; }
.vw__t { margin: 2px 0 0; font: 700 17px/1.3 var(--font-head); color: var(--text-1); }
.vw__tips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vw__tips li {
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  font: 600 12px/1.3 var(--font-ui);
  color: var(--text-2);
}
.vw__hint { margin: 0; font: 400 13.5px/1.5 var(--font-ui); color: var(--text-2); }
.vw .voice-consent { margin: 0; }
.vw__rec { width: 100%; height: 48px; justify-content: center; gap: 8px; font-size: 15px; }
.vw:not(.is-ready) .vw__rec, .vw:not(.is-ready) .vw__file { opacity: .55; }
.vw__rec.is-rec { background: var(--error); }
.vw__rec .rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: vw-blink 1s infinite; }
@keyframes vw-blink { 50% { opacity: .3; } }
.vw__file { align-self: center; }
.vw__cancel { align-self: center; color: var(--text-3); }
.vw__drop { margin: -4px 0 0; text-align: center; font: 400 12px/1.3 var(--font-ui); color: var(--text-3); }
@media (hover: none) { .vw__drop { display: none; } }
.vw .voice-phrase { margin: 0; }
.vw__wait .vw__steps { justify-content: center; margin-bottom: var(--s3); }
@media (prefers-reduced-motion: reduce) { .vw__rec .rec-dot { animation: none; } }
/* бар ударения на телефоне — под палец */
@media (hover: none), (max-width: 700px) {
  .accbar { gap: 8px; padding: 8px 8px 8px 12px; }
  .accbar .chip { height: 38px; padding: 0 14px; font-size: 16px; }
  .accbar__x { width: 38px; height: 38px; }
}

/* ---------- библиотека: выбор нескольких (и на телефоне) ---------- */
.lib-list.is-picking .track__check { display: grid !important; place-items: center; opacity: 1; }
.lib-list.is-picking .track { cursor: pointer; }
.lib-list.is-picking .track.is-picked { background: var(--accent-soft); }
.lib-list.is-picking .track__check input { width: 20px; height: 20px; }
/* В режиме выбора нажатие по обложке отмечает трек, а «играть» и «…» на
   ней обещали другое: остаётся одна галочка (проверка скиллом
   interface-design, 21.10.2026). */
.lib-list.is-picking .track__play, .lib-list.is-picking .track__pin { display: none; }
@media (max-width: 900px) {
  .lib-list.is-list.is-picking .track { grid-template-columns: 28px 48px minmax(0, 1fr) auto; }
  .bulk { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bulk .btn--sm { flex: none; }
}
/* На телефоне панель выбора в две строки (19.10.2026): при 100 % в одну
   строку не влезали «Выбрать все», четыре действия и крестик, и «В ленту»
   с «Удалить» уезжали за край. Сверху — сколько выбрано, «Выбрать все» и
   крестик, снизу — четыре действия поровну. */
.bulk__br { display: none; }
@media (max-width: 560px) {
  .bulk { flex-wrap: wrap; overflow: visible; height: auto; padding: var(--s2) var(--s3); row-gap: var(--s2); }
  .bulk__n { order: 0; }
  .bulk .all { order: 1; }
  .bulk .close { order: 2; }
  .bulk__br { display: block; order: 3; flex-basis: 100%; height: 0; }
  .bulk .g, .bulk .d, .bulk .f, .bulk .x { order: 4; flex: 1 1 0; min-width: 0; }
  /* Четыре значка без подписей не читались («компас» = «В ленту»): во
     второй строке место есть, подпись под значком (проверка скиллом
     interface-design, 21.10.2026). */
  .bulk .g span, .bulk .d span, .bulk .f span, .bulk .x span { display: inline; }
  .bulk .g, .bulk .d, .bulk .f, .bulk .x {
    flex-direction: column; gap: 2px; height: auto; min-height: 48px; padding: 6px 4px;
    font-size: 12px; line-height: 1.1;
  }
}

/* ---------- библиотека: вид «Обложками» ----------
   Плитка: обложка с кнопкой и «…» в углу, под ней название и дата.
   Жанр и ряд действий убраны — всё это в карточке трека справа. */
.lib-list.is-grid {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: var(--s3);
}
.lib-list.is-grid .track-group { display: contents; }
.lib-list.is-grid .track {
  padding: 8px 8px 10px;
  border-radius: var(--r-lg);
  transition: background var(--t-hover);
}
.lib-list.is-grid .track.is-current { background: var(--surface-2); }
.lib-list.is-grid .track__cover { border-radius: var(--r-md); }
.lib-list.is-grid .track__play { background: rgba(10, 8, 14, .35); }
.lib-list.is-grid .track__play svg { width: 34px; height: 34px; }
.lib-list.is-grid .track__main { padding: 10px 2px 0; }
.lib-list.is-grid .track__title { font: 700 14.5px/1.3 var(--font-ui); }
.lib-list.is-grid .track__sub { display: block; margin-top: 3px; font-size: 12px; }
.lib-list.is-grid .track__tags,
.lib-list.is-grid .track__actions,
.lib-list.is-grid .track__time-wrap { display: none; }
.lib-list.is-grid .track[data-playing="1"] .track__title { color: var(--accent); }
/* галочка выбора — в углу обложки */
.lib-list.is-grid.is-picking .track__check {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(10, 8, 14, .72);
}
@media (max-width: 700px) {
  .lib-list.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .lib-list.is-grid .track { padding: 6px 6px 8px; }
}
.bulk__n { white-space: nowrap; flex: none; }


/* ============================================================
   ПОМОЩНИК НА ВСЮ ШИРИНУ (13.10.2026)
   Слева разговоры, справа переписка во всю оставшуюся ширину.
   Реплики и поле ввода — в одной колонке по центру, чтобы строку
   было удобно читать на широком мониторе.
   ============================================================ */
.chat-wrap--full {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: var(--s4);
  flex: 1;
  min-height: 0;
}
.chat-wrap--full.chat-wrap--solo { grid-template-columns: minmax(0, 1fr); }
.chat-wrap--solo .chat-hist { display: none; }
.chat-wrap--full .chat--pane {
  max-width: none;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  padding: 0;
  overflow: hidden;
}
.chat-wrap--full .chat__col { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 var(--s6); }
.chat-wrap--full .chat__feed { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s6) 0 var(--s3); scrollbar-width: thin; }
.chat-wrap--full .chat__feed .chat__col { display: flex; flex-direction: column; }
.chat-wrap--full .chat__bottom { flex: none; padding: var(--s2) 0 var(--s4); border-top: 1px solid var(--border-2); background: var(--surface-1); }
.chat-wrap--full .msg { max-width: min(82%, 640px); font-size: 15px; line-height: 1.55; }
.chat-wrap--full .msg__t { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-wrap--full .msg--typing { display: inline-flex; align-items: center; gap: 6px; }
.msg__work { margin-right: 6px; font: 400 13px/1 var(--font-ui); color: var(--text-2); }
.chat__again { align-self: flex-start; margin: -6px 0 var(--s3); }
.chat-wrap--full .chat__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s2) 0 var(--s2); }
.chat-wrap--full .chat__chips[hidden] { display: none; }
.chat-wrap--full .chat__composer {
  position: static;
  align-items: flex-end;
  gap: var(--s2);
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--border-1);
  border-radius: 24px;
  background: var(--bg);
}
.chat-wrap--full .chat__composer:focus-within { border-color: rgba(255, 255, 255, .22); }
.chat-wrap--full .chat__composer textarea {
  flex: 1;
  min-height: 40px;
  max-height: 180px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--text-1);
  font: 400 15px/1.45 var(--font-ui);
  resize: none;
  outline: none;
}
.chat-wrap--full .chat__composer textarea:focus { box-shadow: none; }
/* Скругление «полностью круглые бока» осталось у поля от старого вида и
   на нескольких строках обрезало края текста овалом (владелец,
   20.10.2026: «расширяется как будто в овале»). Форму задаёт полоса
   ввода, у самого поля скругления нет. */
.chat-wrap--full .chat__composer textarea { border-radius: 0; }
.chat-wrap--full .chat__send { width: 40px; height: 40px; background: var(--grad); }
.chat__note { margin: 8px 4px 0; font: 400 12px/1.4 var(--font-ui); color: var(--text-3); text-align: center; }

/* что уже собрано — строка над полем ввода */
.chat__brief {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s2) 0;
  padding: 10px 10px 10px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
}
.chat__brief[hidden] { display: none; }
.chat__brief-rows { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.chat__brief-rows span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 13px/1.4 var(--font-ui); color: var(--text-1); }
.chat__brief-rows i { font-style: normal; color: var(--text-3); margin-right: 6px; }
.chat__go { flex: none; }

/* два варианта текста рядом */
.chat__vars { margin-bottom: var(--s3); }
.chat__vars-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.chat__var { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-1); }
.chat__var-t { margin: 0; white-space: pre-wrap; font: 400 13px/1.5 var(--font-ui); color: var(--text-2); max-height: 260px; overflow: auto; }
.chat__var .btn { align-self: flex-start; }

/* разговоры слева */
.chat-wrap--full .chat-hist { border-right: 0; padding-right: 0; gap: var(--s2); }
.chat-hist__new { width: 100%; justify-content: center; flex: none; }
.chat-wrap--full .chat-hist__item {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border-radius: var(--r-md);
}
.chat-hist__open {
  flex: 1; min-width: 0;
  display: grid; gap: 2px;
  padding: 10px 12px;
  border: 0; background: none; color: var(--text-2);
  text-align: left; cursor: pointer;
}
.chat-hist__open b { font: 600 14px/1.3 var(--font-ui); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-hist__x { flex: none; width: 32px; height: 32px; margin-right: 4px; color: var(--text-3); opacity: 0; }
.chat-wrap--full .chat-hist__item:hover .chat-hist__x, .chat-wrap--full .chat-hist__item.is-on .chat-hist__x { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .chat-wrap--full .chat-hist__item:hover { background: var(--surface-2); } }
.chat-wrap--full .chat-hist__item.is-on { background: var(--surface-2); }
.chat-wrap--full .chat-hist__item.is-on b { color: var(--text-1); }

@media (max-width: 900px) {
  .chat-wrap--full { grid-template-columns: minmax(0, 1fr); }
  .chat-wrap--full .chat-hist { display: none; }
  .chat-wrap--full .chat__col { padding: 0 var(--s3); }
  .chat-wrap--full .msg { max-width: 88%; }
  .chat__vars-row { grid-template-columns: minmax(0, 1fr); }
  .chat__brief { flex-wrap: wrap; }
  .chat__go { width: 100%; justify-content: center; }
  .chat-hist__x { opacity: 1; }
}
.chat-mob { display: none; }
@media (max-width: 900px) {
  body[data-screen="chat"] .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
  .chat-mob { display: inline-flex; flex: none; }
}
.chat__var .btn { margin-top: auto; }
/* на телефоне кнопка поддержки закрывала «Отправить» в помощнике —
   поднимаем её к верху экрана, к заголовку */
@media (max-width: 900px) {
  body[data-screen="chat"] .support-fab { top: calc(16px + env(safe-area-inset-top, 0px)); bottom: auto; width: 44px; height: 44px; }
}

/* библиотека «Карточками» — как в студии: обложка крупнее, описание и жанр */
.lib-list.is-comfy .track {
  grid-template-columns: 20px 72px minmax(0, 1fr) 44px auto;
  height: auto;
  min-height: 96px;
  padding: 12px 10px;
  gap: 14px;
  align-items: center;
}
.lib-list.is-comfy .track__cover { width: 72px; height: 72px; }
.lib-list.is-comfy .track__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  font: 400 13px/1.45 var(--font-ui);
  color: var(--text-2);
}
.lib-list.is-comfy .track__tags { display: none; }
.lib-list.is-comfy .track__actions { opacity: 1; }
.lib-list.is-comfy .track.is-current { background: var(--surface-2); }
@media (max-width: 900px) {
  .lib-list.is-comfy .track { grid-template-columns: 64px minmax(0, 1fr) auto; padding: 10px 4px; }
  .lib-list.is-comfy .track__cover { width: 64px; height: 64px; }
  .lib-list.is-comfy .track__check, .lib-list.is-comfy .track__time-wrap { display: none; }
  .lib-list.is-comfy.is-picking .track { grid-template-columns: 28px 64px minmax(0, 1fr) auto; }
}

/* ---------- афиша: имя из ленты, проверка ссылок (13.10.2026) ---------- */
.pos__name { display: grid; gap: 6px; }
.pos__name-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.pos__name-row b { font: 600 15px/1.3 var(--font-ui); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos__hint { font: 400 12px/1.4 var(--font-ui); color: var(--text-3); }
.pos__lab.is-err input { color: var(--error); }
.pos__lab.is-err::after { content: "Это не похоже на адрес сайта"; display: block; margin-top: 4px; font: 400 12px/1.3 var(--font-ui); color: var(--error); }
.fcard__by--anon { color: var(--text-2); }
span.track__author { color: var(--text-3); }
.pos__lab--row.is-err::after { grid-column: 1 / -1; }
@media (hover: none), (max-width: 700px) {
  .sup__x { width: 40px; height: 40px; }
  .fcard__noname button { min-height: 36px; }
}

/* Поиск в шторке «Мой голос» — появляется от шести голосов (16.10.2026). */
.vpush__search { width: 100%; margin-bottom: var(--s3); }
.vpush__line[hidden] { display: none; }

/* Каталог: подразделы внутри раздела (16.10.2026). «‹ Все подразделы»
   тише остальных чипов — это шаг назад, а не выбор. */
.scat__subs .chip--back { gap: 4px; color: var(--text-2); }
.scat__subs .chip--back svg { flex: none; }

/* ============================================================
   ПУБЛИКАЦИЯ = LUVI MUSIC DELIVERY (16.10.2026, название с 21.10)
   Тексты и условия как на посадочной /delivery, выпуск — в кабинете
   Distrocore. Площадки — плашками, а не карточками: их шестнадцать.
   ============================================================ */
.pub__hero .kicker { display: block; margin-bottom: var(--s2); }
.pub__facts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: var(--s4) 0 0; padding: 0; list-style: none; }
.pub__facts li { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1.3 var(--font-ui); color: var(--text-1); }
.pub__facts svg { color: var(--accent); flex: none; }
.pub__cta a.btn { gap: 8px; text-decoration: none; }
.pub__cta .btn svg { flex: none; }
.pub__sub { max-width: 66ch; margin: calc(-1 * var(--s2)) 0 var(--s4); font: 400 14px/1.55 var(--font-ui); color: var(--text-2); }
.pub__plats { display: flex; flex-wrap: wrap; gap: 8px; }
.pub__plats .pub__plat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-full);
  font: 500 14px/1.2 var(--font-ui); color: var(--text-1);
}
.pub__plats .pub__plat svg { color: var(--text-2); }
.pub__prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.pub__tariff {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: var(--s5) var(--s4) var(--s4);
  border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface-2);
}
.pub__tariff.is-hot { border-color: var(--accent); }
.pub__badge {
  position: absolute; top: -11px; left: var(--s4);
  padding: 3px 10px; border-radius: var(--r-full);
  background: var(--accent); color: #fff; font: 600 12px/1.3 var(--font-ui);
}
.pub__tn { font: 600 15px/1.3 var(--font-ui); color: var(--text-2); }
.pub__sum { margin: 0; font: 700 30px/1.15 var(--font-ui); color: var(--text-1); }
.pub__sum span { font: 400 14px/1 var(--font-ui); color: var(--text-3); }
.pub__tnote { margin: 0 0 var(--s2); font: 400 13px/1.4 var(--font-ui); color: var(--text-3); }
.pub__feats, .pub__ai { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pub__feats li, .pub__ai li { display: flex; gap: 8px; align-items: flex-start; font: 400 14px/1.45 var(--font-ui); color: var(--text-2); }
.pub__feats svg, .pub__ai svg { flex: none; margin-top: 2px; color: var(--success); }
.pub__ai li.net svg { color: var(--error); }
.pub__ai b { color: var(--text-1); font-weight: 600; }
.pub__shema { display: flex; align-items: stretch; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.pub__shag {
  flex: 1 1 0; min-width: 0; padding: var(--s4);
  border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface-2);
}
.pub__shag b { display: block; margin: 4px 0; font: 600 14px/1.3 var(--font-ui); color: var(--text-1); }
.pub__shag p { margin: 0; font: 400 13px/1.45 var(--font-ui); color: var(--text-3); }
.pub__ssum { font: 700 24px/1.15 var(--font-ui); color: var(--text-1); }
.pub__shag--vy { border-color: var(--accent); }
.pub__shag--vy .pub__ssum { color: var(--accent); }
.pub__znak { align-self: center; flex: none; font: 600 22px/1 var(--font-ui); color: var(--text-3); }
@media (max-width: 900px) {
  .pub__prices { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .pub__tariff.is-hot { order: -1; }
  .pub__shema { flex-direction: column; }
  .pub__znak { align-self: flex-start; padding-left: var(--s4); }
}

/* ============================================================
   ОКНА НА КОМПЬЮТЕРЕ — ПО ЦЕНТРУ (владелец 16.10.2026)
   Раньше часть окон открывалась по центру («Как у исполнителя»,
   каталог, «В плейлист»), а часть выезжала шторкой справа («Мой
   голос», «Сгенерировать текст», «Новая папка», оплата). Теперь на
   компьютере все по центру, как .modal. На телефоне (до 900px) всё
   по-прежнему поднимается снизу — эти правила туда не доходят.
   Админка (.sup) живёт своей раскладкой и сюда не попадает.
   z-index тот же, что у .modal: окно, открытое из другого окна
   («Новый плейлист» из «В плейлист»), встаёт поверх по порядку.
   ============================================================ */
@media (min-width: 901px) {
  .drawer:not(.sup) {
    top: 50%; left: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 48px));
    height: auto;
    max-height: min(calc(var(--vh) * .86), 760px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-overlay);
    overflow: hidden;
    z-index: var(--z-modal);
    animation: modal-in var(--t-drawer) var(--ease-drawer);
  }
  .drawer:not(.sup) .drawer__body { min-height: 0; }
  /* Списки с поиском — постоянной высоты, иначе окно прыгает при наборе. */
  .drawer.pick-src, .drawer.vpush, .drawer.queue, .drawer.plat-edit {
    height: min(calc(var(--vh) * .80), 680px);
  }
  /* «Как пользоваться» — шире: вкладки режимов в одну строку. */
  .drawer.howto { width: min(720px, calc(100vw - 48px)); height: min(calc(var(--vh) * .86), 760px); }
  /* Карточка трека в окне: без своей рамки и липкости — рамка уже у окна. */
  .drawer.fcard-dr .fcard {
    position: static; max-height: none; margin: 0; padding: 0; border: 0; background: none;
  }
  .drawer.fcard-dr { width: min(560px, calc(100vw - 48px)); }
}
/* Цены «Публикации»: две карточки (16.10.2026). */
.pub__prices:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; }
.pub__sum--text { font-size: 24px; }
.pub__tbtn { margin-top: auto; align-self: flex-start; text-decoration: none; }
.pub__feats { margin-bottom: var(--s4); }
@media (max-width: 900px) { .pub__prices:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   ПУБЛИКАЦИЯ — ЛЁГКАЯ ВЕРСИЯ (владелец 16.10.2026: меньше текста)
   Главное — тремя крупными цифрами. Доводы и шаги — по строке.
   Полоса «Выпустить трек» липнет к низу колонки при прокрутке.
   ============================================================ */
.pub__lead { font-size: 16px; }
.pub__stats { display: flex; flex-wrap: wrap; gap: var(--s5) 48px; margin: var(--s5) 0 0; }
.pub__stats div { display: grid; gap: 2px; }
.pub__stats dt { font: 800 32px/1.1 var(--font-head); letter-spacing: -.02em; color: var(--text-1); }
.pub__stats dd { margin: 0; font: 400 14px/1.3 var(--font-ui); color: var(--text-3); }
.pub__sec { margin-top: var(--s8, 48px); }
.pub__plats .pub__plat--more { cursor: pointer; color: var(--text-2); background: transparent; }
.pub__plats .pub__plat--more:hover { color: var(--text-1); border-color: var(--border-1); }
.pub__plats .pub__plat[hidden] { display: none; }
.pub__trio, .pub__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.pub__pro, .pub__steps li {
  display: grid; gap: 4px; align-content: start; padding: var(--s4);
  border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface-2);
}
.pub__pro b, .pub__steps b { font: 600 15px/1.3 var(--font-ui); color: var(--text-1); }
.pub__pro span, .pub__steps li > span:last-child { font: 400 13px/1.45 var(--font-ui); color: var(--text-3); }
.pub__n { font: 800 22px/1 var(--font-head); color: var(--accent); margin-bottom: 4px; }
.pub__all { margin: var(--s3) 0 0; font: 400 13px/1.5 var(--font-ui); color: var(--text-3); }
.pub__shag { padding: var(--s3) var(--s4); }
.pub__shag b { margin: 2px 0 0; font-weight: 500; color: var(--text-3); }
.pub__end { padding-bottom: var(--s5); }

.pub__float {
  position: sticky;
  bottom: calc(var(--player-h) + 16px);
  z-index: 5;
  display: flex; align-items: center; gap: var(--s4);
  width: fit-content; max-width: calc(100% - 16px);
  margin: var(--s5) auto 0;
  padding: 8px 8px 8px var(--s4);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-full);
  background: var(--surface-3);
  box-shadow: var(--shadow-overlay);
  opacity: 0; translate: 0 16px; pointer-events: none;
  transition: opacity .25s ease, translate .25s ease;
}
.pub__float.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.pub__float-t { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1.2 var(--font-ui); color: var(--text-1); white-space: nowrap; }
.pub__float-t svg { flex: none; color: var(--text-2); }
.pub__float-t span { margin-left: 6px; }
.pub__float-btn { gap: 8px; text-decoration: none; }
@media (max-width: 900px) {
  .pub__trio, .pub__steps { grid-template-columns: minmax(0, 1fr); }
  .pub__stats { gap: var(--s4) 28px; }
  .pub__stats dt { font-size: 26px; }
  .pub__float { bottom: calc(64px + var(--player-h) + 12px + env(safe-area-inset-bottom, 0px)); padding-left: 8px; }
  .pub__float-t { display: none; }
  .pub__float-btn { min-width: 220px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .pub__float { transition: none; } }
/* Телефон: доводы и шаги — лёгким списком, а не шестью карточками подряд. */
@media (max-width: 900px) {
  .pub__trio, .pub__steps { gap: 0; }
  .pub__pro, .pub__steps li {
    padding: 12px 0; border: 0; border-bottom: 1px solid var(--border-2); border-radius: 0; background: none;
  }
  .pub__steps li { grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; }
  .pub__steps .pub__n { grid-row: span 2; margin: 0; font-size: 20px; }
}

/* ============================================================
   ПУБЛИКАЦИЯ — ПЕРВЫЙ ЭКРАН-ОБЛОЖКА (владелец 16.10.2026)
   Слева заголовок, строка и кнопка; справа сцена, растворённая в фон
   маской (без своей рамки), и карточка релиза; снизу три цифры.
   ============================================================ */
.pub__cover {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  min-height: 460px;
  margin-top: var(--s4);
  border: 1px solid var(--border-2);
  border-radius: 24px;
  background: var(--surface-1);
  overflow: hidden;
  isolation: isolate;
}
.pub__cover-art { position: absolute; inset: 0 0 0 38%; z-index: -1; }
.pub__cover-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%);
          mask-image: linear-gradient(90deg, transparent 0, #000 42%);
}
.pub__cover-text { align-self: center; max-width: 560px; padding: 56px 48px 40px; }
.pub__cover-text .kicker { display: block; margin-bottom: var(--s3); }
.pub__h1 { margin: 0; font: 800 40px/1.08 var(--font-head); letter-spacing: -.025em; text-wrap: balance; color: var(--text-1); }
.pub__cover .pub__lead { max-width: 44ch; margin: var(--s4) 0 0; font-size: 17px; }
.pub__cover .pub__cta { margin-top: var(--s6); }

.pub__reliz {
  position: absolute; right: 32px; bottom: 112px;
  display: flex; align-items: center; gap: 12px;
  max-width: min(320px, 40%);
  padding: 10px 18px 10px 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: rgba(16, 14, 22, .72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.pub__reliz img { width: 56px; height: 56px; flex: none; border-radius: 12px; object-fit: cover; }
.pub__reliz span { display: grid; gap: 6px; min-width: 0; }
.pub__reliz b { font: 600 15px/1.25 var(--font-ui); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub__reliz small { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .78); }
.pub__reliz i { font: 400 12px/1.2 var(--font-ui); font-style: normal; margin-left: 2px; }

.pub__cover .pub__stats {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin: 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(10, 9, 14, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pub__cover .pub__stats div { padding: 18px 48px; }
.pub__cover .pub__stats div + div { border-left: 1px solid rgba(255, 255, 255, .08); }

@media (max-width: 900px) {
  .pub__cover { display: block; min-height: 0; border-radius: 20px; }
  .pub__cover-art { position: relative; inset: auto; height: 210px; z-index: 0; }
  .pub__cover-art img {
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
            mask-image: linear-gradient(180deg, #000 55%, transparent);
  }
  .pub__reliz { right: auto; left: 16px; top: 128px; bottom: auto; max-width: calc(100% - 32px); }
  .pub__cover-text { padding: 36px 20px 24px; max-width: none; }
  .pub__h1 { font-size: 30px; }
  .pub__cover .pub__lead { font-size: 16px; }
  .pub__cover .pub__cta .btn { width: 100%; justify-content: center; }
  .pub__cover .pub__stats div { padding: 14px 12px 16px 20px; }
  .pub__cover .pub__stats dt { font-size: 22px; }
  .pub__cover .pub__stats dd { font-size: 12px; }
}
@media (max-width: 900px) {
  .pub__cover .pub__stats dt { font-size: 20px; white-space: nowrap; }
  .pub__cover .pub__stats div { padding: 14px 8px 16px 16px; }
}

/* ============================================================
   ПУБЛИКАЦИЯ — ПРАВКИ ВЛАДЕЛЬЦА 16.10.2026 (вечер)
   ============================================================ */
/* Сцена кончается над полосой цифр: фигура не уходит под неё и стоит
   выше. Карточка релиза — наверху справа, не на поднятой руке. */
.pub__cover-art { bottom: 76px; }
.pub__cover-art img { object-position: 62% 100%; }
.pub__reliz { top: 32px; bottom: auto; }

/* Доводы: значок перед заголовком, в цвет акцента, без плашки. */
.pub__pro b { display: flex; align-items: center; gap: 8px; }
.pub__pro b svg { flex: none; color: var(--accent); }
.pub__pro span { padding-left: 26px; }

/* Шаги: номер на одной строке с заголовком, пояснение под заголовком. */
.pub__steps li { grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; align-items: baseline; }
.pub__steps .pub__n { grid-row: auto; margin: 0; font: 800 18px/1.3 var(--font-head); }
.pub__steps li > span:last-child { grid-column: 2; }

/* Вопросы — узкой колонкой: широкие строки тяжело читать. */
.pub__sec .pub__faq { max-width: 760px; }

/* Последний экран с призывом и фото. */
.pub__final {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  margin-top: var(--s8); min-height: 360px;
  border: 1px solid var(--border-2); border-radius: 24px; overflow: hidden;
  background:
    radial-gradient(90% 120% at 0% 100%, rgba(253, 66, 156, .16), transparent 60%),
    var(--surface-1);
}
.pub__final-text { align-self: center; padding: 48px; }
.pub__h2 { margin: 0; font: 800 32px/1.12 var(--font-head); letter-spacing: -.02em; text-wrap: balance; color: var(--text-1); }
.pub__final .pub__lead { max-width: 44ch; margin: var(--s3) 0 0; }
.pub__final .pub__cta { margin-top: var(--s6); }
.pub__final-art { position: relative; }
.pub__final-art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%);
          mask-image: linear-gradient(90deg, transparent 0, #000 35%);
}
@media (max-width: 900px) {
  .pub__cover-art { bottom: auto; }
  .pub__cover-art img { object-position: 60% 70%; }
  .pub__reliz { top: 128px; }
  .pub__final { display: flex; flex-direction: column-reverse; min-height: 0; border-radius: 20px; }
  .pub__final-art { height: 220px; }
  .pub__final-art img {
    -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 45%);
            mask-image: linear-gradient(0deg, transparent 0, #000 45%);
  }
  .pub__final-text { padding: 8px 20px 28px; }
  .pub__h2 { font-size: 26px; }
  .pub__final .pub__cta .btn { width: 100%; justify-content: center; }
  .pub__pro span { padding-left: 26px; }
}

/* ============================================================
   ПОМОЩНИК — РОВНЫЕ ОТСТУПЫ (владелец 16.10.2026)
   Подсказки убраны. Обе колонки — карточки одной высоты с одинаковыми
   полями 16px; в переписке поля 24px, поле ввода внизу на той же
   ширине, что и реплики, и с тем же отступом снизу, что сверху у ленты.
   ============================================================ */
.chat-wrap--full { gap: var(--s4); }
.chat-wrap--full .chat-hist {
  padding: var(--s4);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  overflow-y: auto;
}
.chat-wrap--full .chat__col { padding: 0 var(--s6); }
.chat-wrap--full .chat__feed { padding: var(--s6) 0 var(--s4); }
.chat-wrap--full .chat__bottom { padding: var(--s4) 0 var(--s5); }
.chat-wrap--full .chat__brief { margin: 0 0 var(--s3); }
.chat-wrap--full .chat__note { margin: var(--s2) 0 0; }
@media (max-width: 900px) {
  .chat-wrap--full .chat__col { padding: 0 var(--s4); }
  .chat-wrap--full .chat__feed { padding: var(--s4) 0 var(--s3); }
  .chat-wrap--full .chat__bottom { padding: var(--s3) 0 var(--s4); }
}
/* Отступ справа у заголовка Помощника под кнопку поддержки снят
   (20.10.2026): саму кнопку на этом экране скрыли ещё 19.10, а пустое
   место осталось, и «Разговоры» стояли не у края, а ближе к середине. */

/* ============================================================
   КНОПКА ПОДДЕРЖКИ НЕ ЗАКРЫВАЕТ ГЛАВНОЕ (аудит 19.10.2026)
   На «Помощнике» это второй вход в тот же чат, а при выборе
   нескольких треков она лежала на «Удалить». На телефоне в тарифах
   встаёт над закреплённой кнопкой «Выбрать», а не на неё.
   ============================================================ */
body[data-screen="chat"] .support-fab { display: none; }
body:has(.lib-list.is-picking) .support-fab { display: none; }
/* строка ленты, чья карточка открыта справа */
.fd-col .track.is-sel { background: var(--surface-2); }

/* «до 30% выгоднее» на телефоне разваливал переключатель «Разовая оплата /
   Подписка» на две строки внутри овала (аудит 19.10.2026). */
@media (max-width: 900px) { .seg--big .seg__badge { display: none; } }

/* ============================================================
   НАЖИМАТЬ ПАЛЬЦЕМ (аудит 19.10.2026)
   На сенсорных экранах мелкие кнопки — не ниже 44 пикселей до
   уменьшения интерфейса: «Подскажи идею», «Каталог стилей»,
   «Ударение», кнопки обучения, отправка в помощнике, «Ещё 8» на
   публикации, кнопки окна подтверждения.
   ============================================================ */
@media (pointer: coarse) {
  .tbtn { height: 44px; }
  .coach__acts .btn, .coach__btns .btn { min-height: 44px; }
  .chat__send { width: 44px; height: 44px; }
  .pub__plat--more { min-height: 44px; }
  .confirm__actions .btn { min-height: 44px; }
}

/* ============================================================
   ЗВУКИ (19.10.2026)
   Форма слева, «Мои звуки» справа; на телефоне две вкладки, как в
   студии. Панели и строки настроек — те же, что у формы студии,
   чтобы раздел не выглядел отдельной страницей другого вида.
   ============================================================ */
.snd {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: var(--s8);
  align-items: start;
}
.snd-tabs { display: none; }
.snd__form { min-width: 0; }
.snd__body { margin-top: var(--s4); }
.snd__cta {
  position: sticky;
  bottom: var(--player-h);
  z-index: var(--z-sticky);
  margin-top: var(--s4);
  padding: 12px 0 8px;
  background: linear-gradient(to top, var(--bg) 78%, transparent);
}
.snd__go { width: 100%; height: 48px; }
.snd__err { margin: var(--s2) 0 0; font: 400 13px/1.4 var(--font-ui); color: var(--error); text-align: center; }
.snd__link { color: var(--accent); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .snd__link:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* выбор тональности: системный список в нашем виде */
.snd-select { position: relative; display: inline-flex; }
.snd-select select.pick {
  -webkit-appearance: none;
  appearance: none;
  min-width: 200px;
  padding-right: 36px;
  color-scheme: dark;
}
.snd-select svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-3); }

/* жанры бита: те же карточки выбора, что «Качество» в студии, сеткой */
.snd-genres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.snd-genre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 84px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-hover), border-color var(--t-hover), transform var(--t-press) var(--ease-out);
}
.snd-genre b { font: 700 14px/1.2 var(--font-ui); color: var(--text-1); }
.snd-genre span { font: 400 12px/1.35 var(--font-ui); color: var(--text-3); }
.snd-genre em { margin-top: auto; padding-top: 4px; font: 600 12px/1 var(--font-ui); font-style: normal; color: var(--text-3); }
.snd-genre:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .snd-genre:hover { background: var(--surface-hover); } }
.snd-genre[aria-checked="true"] { background: var(--accent-soft); border-color: rgba(253, 66, 156, .45); }
.snd-genre[aria-checked="true"] em { color: var(--accent); }
.snd-line { padding-top: var(--s3); border-top: 1px solid var(--border-2); }
/* «120 BPM» в одну строку: у ползунков студии показание короче */
.snd-bpm .eq__val { width: 64px; white-space: nowrap; }

/* ---------- «Мои звуки» ---------- */
.snd__mine { min-width: 0; }
/* высота шапки = высоте переключателя режимов слева: верх колонок на одной линии */
.snd__mine-head { display: flex; align-items: center; min-height: 46px; margin-bottom: var(--s3); }
.snd__mine-head .h2 { margin: 0; }
.snd__filters { margin-bottom: var(--s4); }
.snd__list { display: flex; flex-direction: column; gap: var(--s3); }
.snd__list .empty { padding: var(--s12) var(--s6); }
.snd__loading { margin: var(--s8) 0; color: var(--text-3); }

.sitem {
  padding: var(--s4);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  transition: border-color var(--t-hover);
}
.sitem.is-playing { border-color: var(--border-1); }
.sitem__top { display: flex; align-items: center; gap: var(--s3); }
.sitem__play {
  display: grid;
  place-items: center;
  flex: none;
  position: relative;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--t-hover), transform var(--t-press) var(--ease-out);
}
.sitem__play:active { transform: scale(.94); }
.sitem__play.is-on { background: var(--grad); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .sitem__play:not(.sitem__play--off):not(.is-on):hover { background: var(--surface-hover); }
}
.sitem__play--off { cursor: default; background: var(--surface-2); color: var(--text-3); }
.sitem__play[data-loading="1"] { color: transparent; }
/* звук ещё готовится — в круге крутится то же колесо, что у кнопок */
.is-wait .sitem__play--off::after,
.sitem__play[data-loading="1"]::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.sitem__main { flex: 1; min-width: 0; }
.sitem__name {
  display: block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-1);
  font: 700 15px/1.3 var(--font-ui);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
}
@media (hover: hover) and (pointer: fine) {
  .sitem__name:hover { text-decoration: underline dotted var(--text-3); text-underline-offset: 4px; }
}
.sitem__rename.field__input { height: 32px; padding: 0 10px; font-weight: 700; }
.sitem__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 4px;
  font: 400 12px/1.4 var(--font-ui);
  color: var(--text-3);
}
.sitem__meta .tag { height: 20px; padding: 0 8px; font-size: 11px; line-height: 20px; }
.sitem__rep { flex: none; }
.sitem__wave {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: var(--s3);
  color: var(--text-1);       /* цвет тихой части волны берёт холст */
  cursor: pointer;
  touch-action: manipulation;
}
.sitem__wait { margin-top: var(--s3); }
.sitem__shimmer { display: block; height: 44px; }
.sitem__wait p {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  margin: var(--s2) 0 0;
  font: 400 12px/1.4 var(--font-ui);
  color: var(--text-3);
}
.sitem__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.sitem__acts .btn--sm { gap: 6px; }
/* обрезка открыта — кнопка горит, как нажатая фишка */
.sitem__acts .btn[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.sitem__del { margin-left: auto; color: var(--text-3); }
.sitem__note { margin: var(--s2) 0 0; font: 400 13px/1.4 var(--font-ui); color: var(--text-2); }
.sitem__note.is-err { color: var(--error); }

.is-wait .sitem__play--off::after { border-color: var(--border-1); border-top-color: var(--accent); }

/* ---------- обрезка: часть той же строки, отделена волоском ---------- */
.strim { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border-2); }
.strim__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.strim__head b { font: 600 14px/1.3 var(--font-ui); }
.strim__box {
  position: relative;
  height: 80px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: col-resize;
}
.strim__wave { position: absolute; left: 0; top: 8px; width: 100%; height: calc(100% - 16px); color: var(--text-1); }
.strim__dim { position: absolute; top: 0; bottom: 0; background: rgba(12, 11, 16, .55); pointer-events: none; }
.strim__dim--l { left: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.strim__dim--r { right: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.strim__h { position: absolute; top: 0; bottom: 0; width: 24px; margin-left: -12px; cursor: ew-resize; touch-action: none; }
.strim__h::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 1px;
  background: var(--accent);
}
.strim__h::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 24px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--accent);
  border-radius: var(--r-full);
  background: var(--bg);
}
.strim__h:focus-visible { outline: none; }
.strim__h:focus-visible::after { box-shadow: var(--ring); }
.strim__times {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  margin: var(--s2) 0 0;
  font: 400 12px/1.4 var(--font-ui);
  color: var(--text-3);
}
.strim__times b { font-weight: 600; color: var(--text-2); }
.strim__fades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s3); }
.strim__fade { display: block; }
.strim__fade span {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font: 400 12px/1.4 var(--font-ui);
  color: var(--text-3);
}
.strim__fade output { color: var(--text-2); }
.strim__fade input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: 8px 0;
  border-radius: var(--r-full);
  background: var(--surface-3);
  cursor: pointer;
}
.strim__fade input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
}
.strim__fade input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
}
.strim__fade input[type="range"]:focus-visible { outline: none; box-shadow: var(--ring); }
.strim__fade input[type="range"]:disabled { opacity: .5; cursor: not-allowed; }
.strim__acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.strim__reset { margin-left: auto; }

@media (max-width: 1180px) {
  .snd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); }
}
@media (max-width: 900px) {
  /* видна одна вкладка: либо форма, либо «Мои звуки» */
  .snd { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .snd-tabs { display: flex; width: 100%; margin-bottom: var(--s4); }
  .snd-tabs .seg__item { flex: 1; }
  body[data-snd-tab="mine"] .snd__form { display: none; }
  body[data-snd-tab="form"] .snd__mine { display: none; }
  /* «Мои звуки» уже написано на вкладке */
  .snd__mine-head { display: none; }
  .snd__top .seg { width: 100%; }
  .snd__top .seg__item { flex: 1; }
  .snd__cta {
    bottom: calc(64px + var(--player-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: 12px;
    /* липкая кнопка не должна накрывать последнюю настройку формы */
    margin-bottom: calc(64px + var(--player-h) + env(safe-area-inset-bottom, 0px));
  }
  .snd-select, .snd-select select.pick { width: 100%; min-width: 0; }
}
@media (max-width: 560px) {
  .sitem { padding: var(--s3); }
  .strim__fades { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .strim__reset { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sitem__play[data-loading="1"]::after,
  .is-wait .sitem__play--off::after { animation-duration: 2s; }
}

/* ============================================================
   ВЕРХ СТУДИИ НА ТЕЛЕФОНЕ (владелец 20.10.2026)
   «?» и качество стояли строкой под режимами, по краям, с дырой
   посередине. Теперь они — первая строка студии и общие для всех
   режимов: слева «Как пользоваться» с подписью, справа качество.
   Ниже — «Создать / Мои треки» (тоньше: крупными на телефоне были
   именно они), под ними режимы. Разметка та же, что на компьютере:
   строку собираем сеткой, а .studio__top отдаёт свои части в неё.
   ============================================================ */
@media (max-width: 900px) {
  .studio { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s2); }
  .studio > * { grid-column: 1 / -1; }
  .studio__top { display: contents; }
  .studio__help, .studio__model { grid-row: 1; margin-bottom: var(--s3); }
  /* .content .btn--icon держит круглые кнопки шириной 44 — у этой подпись */
  .studio .studio__help.btn--icon {
    grid-column: 1;
    justify-self: start;
    width: auto;
    padding: 0 12px 0 6px;
    gap: 6px;
    color: var(--text-2);
  }
  .studio__help .studio__help-t { display: inline; }
  .studio__model { grid-column: 2; align-self: center; }
  .studio-tabs { grid-row: 2; margin-bottom: var(--s3); }
  .studio__top > .seg { grid-row: 3; grid-column: 1 / -1; }
  /* «Создать / Мои треки» — переключатель вкладок, а не главная кнопка */
  .studio-tabs { padding: 3px; }
  .studio-tabs .seg__item { height: 34px; font-size: 13px; }
}

/* ---------- прикреплённое своё аудио (владелец 20.10.2026) ----------
   На телефоне строка переносилась: крестик падал вниз, а скругление
   «пилюлей» раздувало её в розовый овал на две строки. Теперь это та же
   панель, что «Ваш голос» и остальные панели формы: одна строка, слева
   кнопка прослушивания, имя файла в одну строку с многоточием, справа
   «заменить» и «убрать». Что аудио прикреплено, видно по розовой кнопке
   и подписи — розовая заливка всей строки не нужна. */
.ownbar.is-on {
  flex-wrap: nowrap;
  padding: var(--s2) var(--s2) var(--s2) var(--s3);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.ownbar.is-on .ownbar__name { flex: 1 1 auto; min-width: 0; }
.ownbar.is-on .ownbar__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ownbar.is-on .btn--icon { color: var(--text-2); }

/* ============================================================
   ПОЛЯ НА ТЕЛЕФОНЕ НЕ ПРИБЛИЖАЮТ СТРАНИЦУ (владелец 20.10.2026)
   iPhone сам увеличивает страницу, когда нажимаешь в поле со шрифтом
   мельче 16 точек, и обратно не отдаляет — после этого экран ездит
   влево-вправо. На сенсорных экранах шрифт любого поля — не меньше 16
   точек на экране (с поправкой на зум интерфейса: на компьютере с
   сенсором и зумом 90 % выйдет те же 16).
   ============================================================ */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea,
  select { font-size: calc(16px / var(--zoom, 1)) !important; }
}

/* ============================================================
   ПОМОЩНИК НА ТЕЛЕФОНЕ (владелец 20.10.2026)
   «Поле в поле и ещё поле»: переписка лежала в рамке, низ — своей
   полосой, а поле ввода — овалом внутри. Теперь переписка прямо на
   странице, во всю ширину, а внизу одна полоса ввода от края до края:
   без рамки вокруг, без овала, поле растёт вверх по мере текста.
   Плеер на этом экране на телефоне не показываем — ему тут не место,
   а музыка играет дальше и плеер вернётся на других экранах.
   ============================================================ */
@media (max-width: 900px) {
  body[data-screen="chat"] { --player-h: 0px; }
  body[data-screen="chat"] .player { display: none; }
  /* полоса ввода стоит прямо на нижнем меню, без щели под ней */
  body[data-screen="chat"] .content { padding-bottom: 0; }
  .chat-wrap--full .chat--pane {
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }
  .chat-wrap--full .chat__col { padding: 0; }
  .chat-wrap--full .chat__feed { padding: var(--s2) 0 var(--s3); }
  /* полоса ввода от края до края экрана: поля страницы — 16 */
  .chat-wrap--full .chat__bottom {
    margin: 0 calc(-1 * var(--s4));
    padding: var(--s2) var(--s4) var(--s3);
    border-top: 1px solid var(--border-2);
    background: var(--surface-1);
  }
  .chat-wrap--full .chat__composer {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    align-items: flex-end;
  }
  .chat-wrap--full .chat__composer textarea { padding: 10px 0; max-height: 40vh; }
  .chat-wrap--full .chat__note { margin-top: var(--s1); }
  .chat-wrap--full .msg { max-width: 86%; }
}

/* ---------- «Сгенерировать текст» и «Ударение» в одну строку ----------
   Владелец 20.10.2026: на телефоне кнопки стояли друг над другом. Вдвоём
   с подписями им нужно 385 точек, а строке на телефоне 390 — 332. Главная
   кнопка занимает остаток строки, «Ударение» на узком экране — квадрат
   «а́» (имя и подсказка в атрибутах), на экранах шире 480 — с подписью. */
@media (max-width: 700px) {
  .tacts { flex-wrap: nowrap; }
  .tbtn--main { flex: 1 1 auto; min-width: 0; padding: 0 12px 0 10px; }
}
@media (max-width: 480px) {
  .tbtn--stress { flex: none; width: 44px; padding: 0; justify-content: center; }
  .tbtn--stress > span:not(.tbtn__acc) { display: none; }
}

/* ---------- обход телефона 20.10.2026: ещё две рамки и наложение ----------
   1) «Мотив»: выбранная песня лежала рамкой того же цвета, что и панель —
      рамка в рамке. По правилу панелей всё внутри поднимается на ступень
      светлее и без своей рамки.
   2) «Подскажи идею» лежит поверх поля, чтобы стоять в линию с уголком
      растягивания. На телефоне поле невысокое, и последняя строка текста
      уходила под кнопку — там кнопка стоит под полем. */
.pan .drop-file { border-color: transparent; background: var(--surface-3); }
@media (max-width: 900px) {
  .pan__row--area textarea { padding-bottom: 20px; }
  .pan__row--area .srow--in { position: static; margin-top: var(--s2); }
  /* счётчик знаков — в строке с «Подскажи идею», справа */
  .pan__row--area .studio__count { bottom: 16px; }
}

/* ---------- «…» на обложке (владелец 20.10.2026) ----------
   На сенсорном экране кнопка была тёмным квадратом 44×44 на пол-обложки.
   Теперь видно небольшой круг, а нажать по-прежнему можно в квадрате 44. */
.mine__list.is-tiles .track__pin,
.mine__list.is-cards .track__pin,
.track-list.is-grid .track__pin {
  top: 2px; right: 2px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 8, 14, .62) 0 14px, transparent 14.5px);
}
@media (hover: hover) and (pointer: fine) {
  .mine__list.is-tiles .track__pin:hover,
  .mine__list.is-cards .track__pin:hover,
  .track-list.is-grid .track__pin:hover { background: radial-gradient(circle, rgba(10, 8, 14, .88) 0 14px, transparent 14.5px); }
}
@media (hover: none) {
  .mine__list.is-tiles .track__pin,
  .mine__list.is-cards .track__pin,
  .track-list.is-grid .track__pin { width: 44px; height: 44px; top: 0; right: 0; }
}
/* меню, которое выше экрана, прокручивается внутри (см. U.menu) */
.menu { overflow-y: auto; overscroll-behavior: contain; }
/* пока открыто меню, кнопка поддержки не лежит поверх его пунктов */
body:has(> .menu) .support-fab { display: none; }

/* ============================================================
   ТЕЛЕФОН, ПРАВКИ ВЛАДЕЛЬЦА 20.10.2026 (второй круг)
   ============================================================ */
@media (max-width: 900px) {
  /* Помощник: полоса ввода стоит на нижнем меню, а не под ним — меню на
     iPhone выше на «безопасную зону» под полосой жестов */
  body[data-screen="chat"] .content {
    height: calc(var(--vh) - 64px - var(--player-h) - env(safe-area-inset-bottom, 0px));
  }
  /* «Разговор бесплатный…» — мельче и отделено тонкой чертой от поля */
  .chat-wrap--full .chat__note {
    margin: var(--s2) 0 0;
    padding-top: 6px;
    border-top: 1px solid var(--border-2);
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-3);
  }

  /* Поддержка на телефоне — во весь экран, как любой мессенджер: окно в
     углу закрывало страницу наполовину и выглядело карточкой поверх.
     Низ — та же полоса ввода, что у помощника, без поля в поле. */
  .sup {
    inset: 0;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    z-index: var(--z-modal);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sup__head { padding-top: calc(var(--s3) + env(safe-area-inset-top, 0px)); }
  .sup__foot { padding: var(--s2) var(--s3); }
  .sup__input { border: 0; background: none; border-radius: 0; padding-left: 0; padding-right: 0; }
  .sup__input:focus { box-shadow: none; }

  /* Плеер: на телефоне справа крестик «закрыть», «назад» — в развёрнутом
     плеере (место в полосе одно) */
  .player__controls .prev { display: none; }
  .player__controls .player__close { display: inline-flex; color: var(--text-3); }
  .player { touch-action: pan-x; }
}
.player__close { display: none; }

/* пустые экраны со стеклянным значком */
.empty__art { display: block; width: 104px; height: 104px; margin: 0 auto 4px; }
.empty--art { padding-top: var(--s8); }

/* «Новый плейлист»: одно окно без этажей — заголовок, поле и широкая
   кнопка; отмена — крестиком в углу (владелец: «кнопки слиплись, куча
   этажей ненужных») */
.pl-new .drawer__head { border-bottom: 0; padding-bottom: 0; }
.pl-new .drawer__body { padding-top: var(--s4); }
.pl-new__go { width: 100%; margin-top: var(--s3); }

/* ---------- развёрнутый плеер: страница под ним стоит (20.10.2026) ----------
   Пока плеер открыт, у страницы нет прокрутки — панели Safari не прячутся,
   высота экрана не меняется, и плеер не съезжает. Сам плеер — ровно
   видимая высота экрана и не передаёт прокрутку странице. */
html:has(body[data-fs="1"]), body[data-fs="1"] { overflow: hidden; }
.fs { height: var(--vh); overscroll-behavior: contain; transition: transform 160ms cubic-bezier(.23, 1, .32, 1); }

/* ---------- помощник на телефоне стоит на месте (владелец 20.10.2026) ----------
   Экран помощника тянулся вверх-вниз как страница: iPhone оттягивает её
   «резинкой», даже когда прокручивать нечего, и прячет панели Safari.
   У страницы на этом экране нет ни прокрутки, ни резинки; прокручивается
   только переписка (и длинный текст в поле), не передавая прокрутку дальше. */
@media (max-width: 900px) {
  html:has(body[data-screen="chat"]),
  body[data-screen="chat"] { overflow: hidden; overscroll-behavior: none; }
  .chat-wrap--full .chat__feed,
  .chat-wrap--full .chat__composer textarea,
  .sidebar__nav { overscroll-behavior: contain; }
}

/* ============================================================
   ПУБЛИКАЦИЯ НА ТЕЛЕФОНЕ (владелец 20.10.2026)
   ============================================================ */
@media (max-width: 900px) {
  /* Первый экран: картинка ниже, карточка «Новый сингл вышел» — маленькой
     плашкой в правом верхнем углу (она закрывала человека и была
     непонятной), заголовок в две строки без надписи над ним, кнопка
     «Выпустить трек» остаётся на первом экране. */
  .pub__cover-art { height: 168px; }
  .pub__reliz {
    left: auto; right: 10px; top: 10px; bottom: auto;
    max-width: 62%;
    gap: 8px;
    padding: 5px 10px 5px 5px;
    border-radius: 12px;
    box-shadow: none;
  }
  .pub__reliz img { width: 30px; height: 30px; border-radius: 8px; }
  .pub__reliz span { gap: 3px; }
  .pub__reliz b { font-size: 12px; }
  .pub__reliz small { gap: 4px; }
  .pub__reliz small svg { width: 11px; height: 11px; }
  .pub__reliz i { font-size: 10.5px; }
  .pub__cover-text { padding: 18px 20px 20px; }
  .pub__cover-text .kicker { display: none; }
  .pub__h1 { font-size: 23px; line-height: 1.14; }
  .pub__cover .pub__lead { margin-top: var(--s2); font-size: 15px; }
  .pub__cover .pub__cta { margin-top: var(--s4); }

  /* 16 площадок — две строки, все сразу, листаются вбок */
  .pub__plats {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--s4));
    padding: 0 var(--s4) 2px;
  }
  .pub__plats::-webkit-scrollbar { display: none; }
  .pub__plats .pub__plat[hidden] { display: inline-flex; }
  .pub__plats .pub__plat--more { display: none; }

  /* Последний экран: фото внизу, под ним никакой пустоты — отступ снизу
     только под нижнее меню и плеер, без запаса под кнопку поддержки
     (она ложится на фото, это не страшно). */
  .pub__final { flex-direction: column; }
  .pub__final-text { padding: 28px 20px 4px; }
  .pub__final-art img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40%);
            mask-image: linear-gradient(180deg, transparent 0, #000 40%);
  }
  body[data-screen="publish"] .content {
    padding-bottom: calc(var(--s3) + 64px + var(--player-h) + env(safe-area-inset-bottom, 0px));
  }
  /* Плавающая полоса «Выпустить трек» на телефоне — fixed: липкая занимала
     место в потоке, и под последним экраном оставалась чёрная дыра. Колонка
     здесь во всю ширину, так что по центру она встаёт и без sticky. */
  .pub__float { position: fixed; left: 0; right: 0; margin: 0 auto; }
}

/* ============================================================
   КРЕСТИК «ОЧИСТИТЬ ПОЛЕ» (владелец 20.10.2026)
   В правом верхнем углу поля текста и поля стиля. Пока поле пустое,
   крестика нет: стирать нечего, а лишний значок только мешает.
   ============================================================ */
.pan__row--clear > textarea { padding-right: 36px; }
.fclear {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--t-hover), background var(--t-hover);
}
/* видимый кружок маленький, а попасть пальцем можно в 44 точки */
.fclear::after { content: ''; position: absolute; inset: -9px; }
.pan__row--clear:has(> textarea:placeholder-shown) > .fclear { display: none; }
@media (hover: hover) and (pointer: fine) {
  .fclear:hover { background: var(--surface-hover); color: var(--text-1); }
}
.fclear:focus-visible { outline: none; box-shadow: var(--ring); }

/* ========== Правки по проверке Intent, 21.10.2026 ========== */
/* окно получает фокус само (не поле), кольцо вокруг всего окна не нужно */
.drawer:focus, .modal:focus { outline: none; }

/* d7. Кабинет партнёра: карточки цифр не нажимаются — без подсветки;
   между ссылкой и цифрами обычный отступ */
.partner__cards { margin-top: var(--s6); }
.partner__cards .adm-card:hover { border-color: var(--border-2); }
.partner__wait { margin: 0; color: var(--text-2); }
.partner__why { margin-top: var(--s2); }

/* d10. «Текст не трогаем» на служебном экране — обычным абзацем, без розовой плашки */
.lp__warn { padding: 0; border: 0; background: none; }
.lp__warn p { font-size: 15px; }

/* s3. «Мои треки» карточками: длительность пряталась общим правилом колонки
   (.mine__list .track__time-wrap), а вид «Карточками» только назначал ей место */
.mine__list.is-comfy .track__time-wrap { display: block; }

/* s4. «Обложками»: «вариант 2» в одной строке с названием рубил его до 4–5 букв */
.mine__list.is-tiles .track__title { flex-wrap: wrap; }
.mine__list.is-tiles .track__v { flex-basis: 100%; margin-top: 2px; }

/* s6, s11. «Сведение», выбор песни: строки не тянутся на всю ширину
   (стрелка стояла в тысяче точек от названия) */
.mixpick { max-width: 720px; }
.mixpick__lost { margin: 0 0 var(--s4); font: 400 15px/1.5 var(--font-ui); color: var(--text-2); }

/* s12. Плитки каталога: наведение было 300–600 мс, вязче всей студии (120–240) */
.scat-tile__art { transition: opacity .2s var(--ease-out), transform .25s var(--ease-out); }
.scat-tile__ico { transition: transform .2s var(--ease-out); }

/* l6. Очередь без ручек перетаскивания: своя сетка без первой колонки */
.queue .track { grid-template-columns: 56px minmax(0, 1fr) auto; }
.queue .track > span:empty { display: none; }
@media (max-width: 900px) {
  .queue .track { grid-template-columns: 56px minmax(0, 1fr) auto; }
}
/* l2. Название и строка открываются с клавиатуры — видимое кольцо фокуса */
.track:focus-visible { outline: none; box-shadow: var(--ring); }
.track__main.is-open-able:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

/* l3. «Афиша»: поля без коробки (стиль студии .bare) не читались как поля,
   «Москва» в подсказке выглядела введённым городом, фокуса не было видно.
   Здесь обычный вид поля приложения, чуть темнее панели. */
.pos__lab .field__input.bare {
  height: 44px;
  padding: 0 14px;
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  transition: border-color var(--t-hover);
}
.pos__lab textarea.field__input.bare { height: auto; min-height: 88px; padding: 12px 14px; }
.pos__lab .field__input.bare:focus,
.pos__lab .field__input.bare:focus-visible { border-color: var(--accent); outline: none; box-shadow: var(--ring); }

/* l8. Выбор нескольких: «выбрано» главнее «открыт в карточке». Подсветка
   текущего трека (.is-current) в сетке и карточках перебивала розовую,
   и из двух выбранных плиток одна была серой. */
.lib-list.is-picking .track.is-picked,
.lib-list.is-picking.is-grid .track.is-picked,
.lib-list.is-picking.is-comfy .track.is-picked { background: var(--accent-soft); }

/* l14. Пустые состояния без висячих слов («другое / слово.»), лупа в поиске
   библиотеки не сжимается, когда рядом появляется крестик */
.empty h3 { text-wrap: balance; }
.empty p { text-wrap: pretty; }
.lib-find > svg { flex: none; }

/* l15. Меню листается, но полосы прокрутки нет, и последний пункт
   («Админ») резало кнопкой «Выбрать тариф». Запас снизу и затухание
   у края показывают, что ниже есть ещё. */
.sidebar__nav--main {
  padding-bottom: var(--s4);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
}

/* o4. Надписи заглавными над заголовками и разделами («ПОХОЖИЕ ТРЕКИ»,
   «ТЕКУЩИЙ ТАРИФ», «ОПАСНАЯ ЗОНА», «СИТУАЦИЯ 1»…) — правило владельца:
   выделяем размером и весом, не заглавными. Боковое меню, подвал,
   подписи частей текста песни и «Luvi Music Delivery» (решение владельца)
   остаются как были. */
.content .kicker, .drawer .kicker, .modal .kicker, .plan-card__k {
  text-transform: none;
  letter-spacing: 0;
  font: 600 14px/1.3 var(--font-ui);
}
.content .lyrics__part, .drawer .lyrics__part,
.content .foot__col .kicker, .content .pub__cover-text .kicker {
  text-transform: uppercase;
  letter-spacing: .1em;
  font: 700 11px/1 var(--font-ui);
}

/* Галочки в списках тарифов: на длинных строках значок сжимался и вставал
   на другой отступ (проверка скиллом interface-design, 21.10.2026) */
.plan__feats div svg { flex: none; }

/* Очередь: что звучит сейчас — розовым названием, как в остальных списках */
.queue .track.is-playing .track__title { color: var(--accent); }

/* Тарифы: строка «Сейчас: тариф, остаток» у тех, кто уже платил */
.pricing__now { margin: 0 auto; max-width: 60ch; text-align: center; font: 500 15px/1.45 var(--font-ui); color: var(--text-1); }
/* «Оплата прошла»: ссылка на кабинет и чек выглядит ссылкой, а не серым текстом */
.pay-result a.check { text-decoration: underline; text-underline-offset: 3px; color: var(--text-2); }

/* Два варианта текста окном (владелец 28.10.2026): тексты целиком рядом,
   у каждого «Выбрать», внизу «Сочинить другие». */
.modal.lyrvars { width: min(880px, calc(100vw - 32px)); max-height: min(calc(var(--vh) * .9), 820px); }
.lyrvars__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.lyrvars__card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 14px 16px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border-1);
}
.lyrvars__t {
  margin: 0; flex: 1; white-space: pre-wrap; overflow: auto;
  max-height: min(calc(var(--vh) * .48), 440px);
  font: 400 13.5px/1.55 var(--font-ui); color: var(--text-1); scrollbar-width: thin;
}
.lyrvars__card .btn { width: 100%; justify-content: center; }
.lyrvars__wait { display: grid; gap: 9px; padding: 6px 0 4px; }
.lyrvars__wait i {
  display: block; height: 11px; border-radius: 6px; background: var(--surface-3);
  animation: lyrvars-pulse 1.4s ease-in-out infinite;
}
.lyrvars__wait i:nth-child(3n) { width: 70%; }
.lyrvars__wait i:nth-child(3n+2) { width: 85%; }
@keyframes lyrvars-pulse { 50% { opacity: .45; } }
.lyrvars__note { grid-column: 1 / -1; margin: 0; font: 400 13px/1.45 var(--font-ui); color: var(--text-2); }
.lyrvars .modal__foot { justify-content: center; }
@media (max-width: 700px) {
  .modal.lyrvars { padding: var(--s5); }
  .lyrvars__row { grid-template-columns: minmax(0, 1fr); }
  .lyrvars__t { max-height: 34vh; }
  .lyrvars .modal__foot .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .lyrvars__wait i { animation: none; } }

/* Звуки: что значит «Звук / Луп / Бит» — строкой под переключателем, а у
   звука число вариантов стоит под описанием, без пустой панели «Настройки»
   (владелец 28.10.2026) */
.snd__about { margin: var(--s2) 0 0; max-width: 60ch; font: 400 13.5px/1.45 var(--font-ui); color: var(--text-2); text-wrap: pretty; }
.snd .snd-hints + .orow { margin-top: var(--s2); border-top: 1px solid var(--border-2); }

/* ============================================================
   СВОЙ ГОЛОС — окном (владелец 28.10.2026)
   В панели «Ваш голос» — приглашение или выбранный голос; запись,
   инструкция, проверочная фраза и создание — в окне по центру.
   ============================================================ */
.vinv { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s2) 0; }
.vinv__ava { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--grad); color: #fff; }
.vinv__t { display: grid; gap: 3px; min-width: 0; }
.vinv__t b { font: 700 16px/1.25 var(--font-head); color: var(--text-1); }
.vinv__t span { font: 400 12.5px/1.4 var(--font-ui); color: var(--text-2); }
@media (max-width: 600px) {
  .vinv { grid-template-columns: 44px minmax(0, 1fr); }
  .vinv__go { grid-column: 1 / -1; width: 100%; justify-content: center; }
}

.modal.vrec { width: min(640px, calc(100vw - 32px)); max-height: min(calc(var(--vh) * .92), 860px); }
.vrec .modal__head > div { display: grid; gap: var(--s3); }
.vrec__steps { flex-wrap: wrap; }
.vrec .modal__body { display: grid; align-content: start; }
.vrec__screen { display: grid; gap: var(--s4); min-width: 0; }
.vrec.is-over .vrec__screen { outline: 2px dashed rgba(255, 255, 255, .3); outline-offset: 6px; border-radius: var(--r-md); }
.vrec__lede { margin: 0; font: 400 14.5px/1.55 var(--font-ui); color: var(--text-2); max-width: 62ch; }

.vrec__meter { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-1); }
.vrec__meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.vrec__meter-head b { font: 600 14px/1.3 var(--font-ui); color: var(--text-1); }
.vrec__target { font: 600 13px/1.3 var(--font-ui); color: var(--success); }
.vrec__track { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; height: 12px; }
.vrec__z { display: block; height: 100%; }
.vrec__z--low { border-radius: 6px 0 0 6px; background: repeating-linear-gradient(135deg, var(--border-1) 0 5px, transparent 5px 10px); border: 1px solid var(--border-1); border-right: 0; }
.vrec__z--ok { background: linear-gradient(90deg, rgba(47, 190, 122, .25), var(--success)); }
.vrec__z--off { border-radius: 0 6px 6px 0; border: 1px dashed var(--border-1); border-left: 0; }
.vrec__pos { position: absolute; top: -5px; width: 3px; height: 22px; margin-left: -1.5px; border-radius: 2px; background: var(--text-1); transition: left 1s linear; }
.vrec__ticks { display: flex; justify-content: space-between; font: 500 11.5px/1 var(--font-ui); color: var(--text-3); }
.vrec__zones { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; font: 400 12px/1.3 var(--font-ui); color: var(--text-3); }
.vrec__zones b { color: var(--success); font-weight: 600; }
.vrec__small { margin: 2px 0 0; font: 400 12.5px/1.45 var(--font-ui); color: var(--text-2); }

.vrec__how { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; counter-reset: vrec; }
.vrec__how > li { counter-increment: vrec; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s3); row-gap: 8px; }
.vrec__how > li::before {
  content: counter(vrec); grid-row: 1 / span 2; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--text-2);
  font: 700 13px/1 var(--font-ui); color: var(--text-1);
}
.vrec__how > li > b { font: 700 16px/28px var(--font-head); color: var(--text-1); }
.vrec__how ul, .vrec__tips ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vrec__how ul li, .vrec__tips ul li { position: relative; padding-left: 14px; font: 400 13.5px/1.5 var(--font-ui); color: var(--text-2); max-width: 62ch; }
.vrec__how ul li::before, .vrec__tips ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
.vrec__how strong, .vrec__tips strong { color: var(--text-1); font-weight: 600; }

.vrec__check { border-radius: var(--r-md); border: 1px solid var(--border-1); background: var(--surface-2); }
.vrec__check summary { cursor: pointer; padding: 12px 16px; font: 600 14px/1.3 var(--font-ui); color: var(--text-1); }
.vrec__cmp { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border-1); }
.vrec__cmp > * { display: flex; gap: 8px; align-items: baseline; min-width: 0; padding: 9px 16px; border-bottom: 1px solid var(--border-2); font: 400 13px/1.4 var(--font-ui); color: var(--text-2); }
.vrec__cmp > :nth-child(odd) { border-right: 1px solid var(--border-2); }
.vrec__cmp > b { font: 600 12.5px/1.3 var(--font-ui); }
.vrec__cmp svg { flex: none; position: relative; top: 2px; }
.vrec__cmp .is-yes svg, .vrec__cmp b.is-yes { color: var(--success); }
.vrec__cmp .is-no svg, .vrec__cmp b.is-no { color: var(--error); }
.vrec__cmp span.is-yes { color: var(--text-1); }

.vrec__foot { display: grid; gap: var(--s3); width: 100%; }
.vrec .modal__foot { border-top: 1px solid var(--border-2); padding-top: var(--s4); }
.vrec .voice-consent { margin: 0; }
.vrec__acts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); }
.vrec__acts .btn { height: 48px; justify-content: center; gap: 8px; }
.vrec__acts:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.vrec__foot:not(.is-ready) .vw__rec, .vrec__foot:not(.is-ready) .vrec__file { opacity: .55; }
.vrec .vw__rec { width: auto; height: 48px; }
.vrec__cancel { justify-self: center; color: var(--text-3); }
.vrec .voice-phrase { margin: 0; }
.vrec .voice-name { margin: 0; }

.vrec__audio { width: 100%; }
.vrec__len { margin: 0; font: 400 13.5px/1.5 var(--font-ui); color: var(--text-2); }
.vrec__len b { color: var(--success); margin-right: 6px; }
.vrec__len.is-low b { color: var(--warning); }
.vrec__life { margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-1); font: 400 13px/1.5 var(--font-ui); color: var(--text-2); }
.vrec__life b { color: var(--text-1); }
.vrec__wait { padding: var(--s8) var(--s4); text-align: center; }
.vrec__wait p { margin: 0; color: var(--text-2); font: 400 14px/1.45 var(--font-ui); }

.vrec__done { display: grid; justify-items: center; gap: 8px; text-align: center; padding: var(--s4) 0 var(--s2); }
.vrec__done-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--success); color: #fff; }
.vrec__tips { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-1); }
.vrec__tips > b { font: 600 14px/1.3 var(--font-ui); color: var(--text-1); }
.vrec__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vrec__chips i { font-style: normal; padding: 3px 10px; border-radius: var(--r-full); border: 1px solid var(--border-1); background: var(--surface-1); font: 500 12.5px/1.4 var(--font-ui); color: var(--text-1); }
.vrec__chips i.is-off { text-decoration: line-through; color: var(--error); }

@media (max-width: 600px) {
  .modal.vrec { padding: var(--s5); }
  .vrec__acts { grid-template-columns: minmax(0, 1fr); }
  .vrec__zones { font-size: 11px; }
  .vrec__cmp > * { padding: 8px 10px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .vrec__pos { transition: none; } }

/* ============================================================
   ПОМОЩНИК: быстрые ответы, итог и песня в разговоре (владелец 28.10.2026)
   ============================================================ */
.chat-wrap--full .chat__chips { max-height: none; padding-right: 0; }
.msg--printing .msg__bar { visibility: hidden; }

.chat__var.is-picked { border-color: var(--accent); }
.chat__var-acts { display: flex; gap: var(--s2); margin-top: auto; }
.chat__var-acts .btn { margin-top: 0; }
.chat__var-acts .btn--primary { flex: 1; justify-content: center; }
.chat__vars-more { width: 100%; justify-content: center; margin-top: var(--s2); }
.chat__var-t { max-height: 300px; color: var(--text-1); }

.chat__make { align-self: stretch; justify-content: center; height: 48px; margin: var(--s2) 0 var(--s3); font-size: 15px; }

.chat-final {
  display: grid; gap: var(--s3); margin: var(--s2) 0 var(--s3);
  padding: var(--s5); border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--border-1);
}
.chat-final__head { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.chat-final__head b { font: 700 16px/1.3 var(--font-head); color: var(--text-1); }
.chat-final__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-final__tags .tag--accent { background: var(--accent-soft); color: var(--accent); }
.chat-final__row { margin: 0; font: 400 13.5px/1.5 var(--font-ui); color: var(--text-1); white-space: pre-wrap; }
.chat-final__row i { font-style: normal; color: var(--text-3); margin-right: 8px; }
.chat-final .field { margin: 0; }
.chat-final__text { min-height: 220px; resize: vertical; font: 400 13.5px/1.55 var(--font-ui); }
.chat-final__text.is-wait { opacity: .5; }
.chat-final__note { margin: -4px 0 0; font: 400 12px/1.45 var(--font-ui); color: var(--text-3); }
.chat-final__note b { color: var(--text-2); font-weight: 600; }
.chat-final__acts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chat-final__acts .btn { height: 46px; }
.chat-final__acts [data-f="go"] { flex: 1 1 220px; justify-content: center; }
.chat-final__small { margin: -4px 0 0; text-align: center; font: 400 12px/1.4 var(--font-ui); color: var(--text-3); }

.chat-gen {
  display: grid; gap: 8px; margin: var(--s2) 0 var(--s3);
  padding: 14px 16px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border-1);
}
.chat-gen > b, .chat-gen__t { font: 600 14px/1.35 var(--font-ui); color: var(--text-1); }
.chat-gen p { margin: 0; font: 400 13px/1.45 var(--font-ui); color: var(--text-2); }
.chat-gen .btn { justify-self: start; }
.chat-gen.is-failed { border-color: rgba(255, 107, 94, .4); }
.chat-gen .track-group, .chat-gen .track { margin: 0; }
@media (max-width: 900px) {
  .chat-final { padding: var(--s4); }
  .chat-final__acts .btn { flex: 1 1 auto; justify-content: center; }
  .chat-final__acts [data-f="go"] { flex-basis: 100%; order: -1; }
}

/* ------------------------------------------------------------
   PRF-06. «СМЕНИТЬ ТАРИФ» В КАБИНЕТЕ (владелец 28.10.2026)
   Как в прошлом дизайне: тумблер «Подписка / Докупить кредиты» и три
   тарифа плитками. Плитка целиком — кнопка оплаты.
   ------------------------------------------------------------ */
.plan-card + .acc-plans { margin-top: var(--s4); }
.acc-plans + .inv-entry { margin-top: var(--s4); }
.acc-plans__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
}
.acc-plans__h { margin: 0; font: 700 17px/1.3 var(--font-head); color: var(--text-1); }
.acc-plans__note { margin: var(--s2) 0 var(--s4); font: 400 13px/1.45 var(--font-ui); color: var(--text-3); }
.acc-plans__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.acc-plan {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-height: 132px; padding: var(--s4);
  border: 1px solid var(--border-1); border-radius: var(--r-lg);
  background: var(--surface-2); color: var(--text-1); text-align: left;
  cursor: pointer; transition: border-color var(--t-hover), background var(--t-hover);
}
.acc-plan:hover:not(:disabled) { border-color: var(--accent); background: var(--surface-3); }
.acc-plan:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acc-plan.is-best { border-color: rgba(253, 66, 156, .45); }
.acc-plan.is-current { border-color: var(--text-3); }
.acc-plan:disabled { cursor: default; opacity: .62; }
.acc-plan__name { font: 700 11px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.acc-plan__price { display: flex; align-items: baseline; gap: 4px; font: 600 15px/1 var(--font-ui); }
.acc-plan__price b { font: 800 24px/1 var(--font-head); }
.acc-plan__price small { font: 400 12px/1 var(--font-ui); color: var(--text-3); }
.acc-plan__what { font: 400 12.5px/1.4 var(--font-ui); color: var(--text-3); }
.acc-plan__go { margin-top: auto; font: 600 13px/1 var(--font-ui); color: var(--accent); }
.acc-plan.is-current .acc-plan__go, .acc-plan:disabled .acc-plan__go { color: var(--text-3); }
@media (max-width: 700px) {
  .acc-plans__grid { grid-template-columns: 1fr; }
  .acc-plan { min-height: 0; }
}

/* ------------------------------------------------------------
   LIB-09. ИНСТРУМЕНТЫ НА КАРТОЧКЕ ПЕСНИ (владелец 28.10.2026)
   Нравится, поделиться, скачать, дорожки и «промпт снова» видны прямо
   на карточке, как в прошлом дизайне; те же пункты есть в «…».
   Карандаш у названия переименовывает песню.
   ------------------------------------------------------------ */
.track__ren {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-left: -4px; padding: 0;
  border: 0; border-radius: var(--r-full);
  background: none; color: var(--text-3);
  cursor: pointer; opacity: 0;
  transition: opacity var(--t-hover), color var(--t-hover), background var(--t-hover);
}
.track:hover .track__ren, .track:focus-within .track__ren { opacity: 1; }
.track__ren:hover { color: var(--text-1); background: var(--surface-3); }
.track__ren:focus-visible { opacity: 1; outline: none; box-shadow: var(--ring); }
.track-list.is-grid .track__ren,
.mine__list.is-tiles .track__ren,
.lib-list.is-grid .track__ren { display: none; }
/* в ленте чужие песни: переименовывать там нечего */
.feed__rows .track__ren { display: none; }

/* В просторных видах инструменты видны всегда, и на телефоне тоже:
   общее правило для касаний оставляло одну «…». */
@media (hover: none) {
  .track__ren { opacity: 1; }
  .mine__list.is-comfy .track__actions .btn--icon,
  .mine__list.is-cards .track__actions .btn--icon,
  .lib-list.is-comfy .track__actions .btn--icon { display: inline-flex; }
}
/* в крупной карточке студии две в ряд: «промпт снова» остаётся в «…» */
.mine__list.is-cards .track__actions .btn--icon.reuse { display: none; }
.mine__list.is-cards .track__actions { flex-wrap: wrap; gap: 0; }
.track-list.is-grid .track__actions { flex-wrap: wrap; gap: 0; }
@media (max-width: 480px) {
  .mine__list.is-comfy .track__actions .btn--icon.reuse,
  .lib-list.is-comfy .track__actions .btn--icon.reuse { display: none; }
  .mine__list.is-comfy .track__actions .btn--icon,
  .lib-list.is-comfy .track__actions .btn--icon { width: 34px; }
}
/* строка библиотеки на телефоне узкая: в ней «нравится» и «…» */
@media (max-width: 700px) {
  .lib-list.is-list .track__actions .btn--icon:not(.like):not(.more) { display: none; }
}

/* ---------- окно «Скачать»: выбор формата, как у Suno ---------- */
.dlpick { width: min(440px, calc(100vw - 32px)); }
.dlpick__name {
  margin: 4px 0 0; font: 400 14px/1.4 var(--font-ui); color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px;
}
.dlpick__list { display: grid; gap: 6px; }
.dlpick__opt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  grid-template-areas: "t lock on" "d lock on";
  align-items: center;
  column-gap: var(--s3);
  width: 100%; min-height: 56px; padding: 10px var(--s4);
  border: 1px solid var(--border-2); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text-1);
  text-align: left; cursor: pointer;
  transition: background var(--t-hover), border-color var(--t-hover);
}
.dlpick__opt:hover { background: var(--surface-hover); }
.dlpick__opt:focus-visible { outline: none; box-shadow: var(--ring); }
.dlpick__opt[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.dlpick__t { grid-area: t; font: 700 15px/1.25 var(--font-ui); }
.dlpick__d { grid-area: d; font: 400 12.5px/1.35 var(--font-ui); color: var(--text-3); }
.dlpick__lock {
  grid-area: lock;
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 10.5px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3);
}
.dlpick__on { grid-area: on; display: inline-flex; color: var(--accent); visibility: hidden; }
.dlpick__opt[aria-checked="true"] .dlpick__on { visibility: visible; }
.dlpick .modal__foot .btn { flex: 1; }

/* ---------- окно «Обложка песни» ---------- */
.covpick { width: min(420px, calc(100vw - 32px)); }
.covpick__now {
  width: 200px; aspect-ratio: 1; margin: 0 auto;
  border-radius: var(--r-md); overflow: hidden; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; color: var(--text-3);
}
.covpick__now img { width: 100%; height: 100%; object-fit: cover; display: block; }
.covpick__hint { margin: var(--s4) 0 0; font: 400 13px/1.5 var(--font-ui); color: var(--text-3); text-align: center; }
.covpick .modal__foot { flex-wrap: wrap; }
.covpick .modal__foot .btn--primary { flex: 1; gap: 8px; }

/* ============================================================
   «СВОЙ ГОЛОС» ПО ОБРАЗЦУ SUNO (владелец 28.10.2026)
   Вступление с карточками советов, запись с таймером и живой волной,
   обрезка, проверочная фраза. Красная кнопка записи — свой цвет окна:
   розовый акцент сайта на ней читался бы как «создать», а не «запись».
   ============================================================ */
.modal.vs {
  --rec: #FF5236;
  width: min(760px, calc(100vw - 32px));
  min-height: min(640px, calc(var(--vh) * .92));
  max-height: min(calc(var(--vh) * .94), 880px);
  background: var(--surface-1);
}
.vs .modal__head { align-items: center; }
.vs .modal__head > div { display: block; min-width: 0; }
.vs__head { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.vs__back { margin-left: -6px; }
.vs__title { font: 700 18px/1.3 var(--font-head); }
.vs .modal__foot { border-top: 0; padding-top: var(--s3); justify-content: center; }
.vs__steps { display: flex; gap: 6px; }
.vs__steps i { width: 64px; height: 6px; border-radius: 3px; background: var(--surface-3); transition: background var(--t-hover); }
.vs__steps i.is-on { background: var(--text-3); }
.vs__screen { display: grid; gap: var(--s4); min-width: 0; align-content: start; }
.vs .modal__body { display: grid; }

/* ---------- вступление ---------- */
.vs-drop {
  display: grid; justify-items: center; gap: 10px;
  padding: 56px var(--s5) 36px;
  border-radius: var(--r-lg);
  border: 1px dashed rgba(255, 255, 255, .16);
  background: var(--surface-2);
  box-shadow: inset 0 0 70px rgba(255, 138, 24, .30), inset 0 0 150px rgba(251, 69, 149, .22);
  text-align: center;
  transition: box-shadow var(--t-hover), border-color var(--t-hover);
}
.vs.is-over .vs-drop {
  border-color: rgba(255, 255, 255, .4);
  box-shadow: inset 0 0 90px rgba(255, 138, 24, .5), inset 0 0 180px rgba(251, 69, 149, .35);
}
.vs-drop__t { margin: 0; font: 700 21px/1.3 var(--font-head); color: var(--text-1); text-wrap: balance; }
.vs-drop__p { margin: 0; max-width: 46ch; font: 400 14.5px/1.5 var(--font-ui); color: var(--text-2); }
.vs-drop__hint { margin: 6px 0 4px; font: 400 12.5px/1.4 var(--font-ui); color: var(--text-3); }
.vs-drop__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-top: 6px; }
.vs-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 24px;
  border: 1px solid var(--border-1); border-radius: var(--r-md);
  background: var(--surface-3); color: var(--text-1);
  font: 600 15px/1 var(--font-ui); cursor: pointer;
  transition: background var(--t-hover), opacity var(--t-hover);
}
.vs-pill:hover { background: var(--surface-hover); }
.vs-pill:focus-visible { outline: none; box-shadow: var(--ring); }
.vs-drop:not(.is-ready) .vs-pill { opacity: .6; }
.vs-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--rec); }
.vs-consent { margin-top: 14px; justify-content: center; }
.vs-consent.is-ask span { color: var(--warning); }
.vs-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vs-tip {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--s3); row-gap: 3px;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--border-1); background: var(--surface-2);
}
.vs-tip svg { grid-row: 1 / span 2; color: var(--text-2); margin-top: 1px; }
.vs-tip b { font: 600 14px/1.35 var(--font-ui); color: var(--text-1); }
.vs-tip span { font: 400 12.5px/1.45 var(--font-ui); color: var(--text-3); }
.vs-more__in { display: grid; gap: var(--s4); padding: var(--s4); border-top: 1px solid var(--border-1); }
.vs-more .vrec__cmp { border: 1px solid var(--border-1); border-radius: var(--r-md); overflow: hidden; }

/* ---------- запись ---------- */
.vs-rec, .vs-phr, .vs-trim, .vs-wait { justify-items: center; text-align: center; }
.vs-rec { gap: var(--s3); padding-top: var(--s2); }
.vs-rec__time {
  font: 500 15px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .06em; color: var(--text-2);
}
.vs-rec__say { margin: 0; min-height: 1.4em; font: 600 18px/1.35 var(--font-ui); color: var(--text-1); text-wrap: balance; }
.vs-wave { width: 100%; height: 110px; color: var(--text-3); }
.vs-wave canvas { display: block; width: 100%; height: 100%; }
.vs.is-rec .vs-wave { color: var(--text-1); }
.vs-wave--sm { height: 70px; }
.vs-len { position: relative; width: min(420px, 100%); height: 6px; border-radius: 3px; background: var(--surface-3); }
.vs-len__fill { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--warning); transition: width 1s linear, background var(--t-hover); }
.vs-len__fill.is-ok { background: var(--success); }
.vs-len__m { position: absolute; left: 50%; top: -3px; width: 2px; height: 12px; border-radius: 1px; background: var(--text-3); }
.vs-len__t {
  display: flex; justify-content: space-between; width: min(420px, 100%); margin: -4px 0 0;
  font: 400 11.5px/1.3 var(--font-ui); color: var(--text-3);
}
.vs-ctl {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: var(--s5); width: min(480px, 100%); margin-top: var(--s2);
}
.vs-side {
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 18px;
  border: 1px solid var(--border-1); border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-1);
  font: 600 14px/1 var(--font-ui); cursor: pointer;
}
.vs-side:hover:not(:disabled) { background: var(--surface-3); }
.vs-side:focus-visible { outline: none; box-shadow: var(--ring); }
.vs-side:disabled { opacity: .4; cursor: default; }
.vs-again { justify-self: end; }
.vs-ok { justify-self: start; }
.vs-big {
  position: relative; display: grid; place-items: center;
  width: 104px; height: 104px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.vs-big:focus-visible { outline: none; box-shadow: var(--ring); }
.vs-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.vs-ring__bg { fill: none; stroke: var(--surface-3); stroke-width: 6; }
.vs-ring__fg { fill: none; stroke: var(--rec); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.vs-big__in {
  position: relative; display: block; width: 76px; height: 76px; border-radius: 50%;
  background: var(--rec); transition: background var(--t-hover), transform var(--t-press);
}
.vs-big:active .vs-big__in { transform: scale(.95); }
/* идёт запись: серый круг с паузой */
.vs-big.is-rec:not(.is-check) .vs-big__in { background: var(--surface-3); }
.vs-big.is-rec:not(.is-check) .vs-big__in::before,
.vs-big.is-rec:not(.is-check) .vs-big__in::after {
  content: ""; position: absolute; top: 26px; width: 6px; height: 24px; border-radius: 2px; background: var(--text-1);
}
.vs-big.is-rec:not(.is-check) .vs-big__in::before { left: 28px; }
.vs-big.is-rec:not(.is-check) .vs-big__in::after { left: 42px; }
/* фраза пишется: красный круг с галочкой — нажать, когда спели */
.vs-big.is-check .vs-big__in::before {
  content: ""; position: absolute; left: 26px; top: 25px; width: 24px; height: 12px;
  border-left: 3.5px solid #fff; border-bottom: 3.5px solid #fff; transform: rotate(-45deg);
}
.vs-rec__cta { margin: 0; min-height: 1.4em; font: 400 13.5px/1.4 var(--font-ui); color: var(--text-3); }
.vs-rec__tips { width: min(460px, 100%); text-align: left; }
.vs-rec__tips summary {
  cursor: pointer; text-align: center; list-style: none;
  font: 500 13px/1.4 var(--font-ui); color: var(--text-2);
}
.vs-rec__tips summary::-webkit-details-marker { display: none; }
.vs-rec__tips summary::after { content: " ▾"; color: var(--text-3); }
.vs-rec__tips[open] summary::after { content: " ▴"; }
.vs-rec__tips ul { display: grid; gap: 6px; margin: var(--s3) 0 0; padding-left: 18px; font: 400 13px/1.5 var(--font-ui); color: var(--text-2); }

/* ---------- обрезка ---------- */
.vs-trim__p { margin: 0; max-width: 48ch; font: 400 14.5px/1.5 var(--font-ui); color: var(--text-2); }
.vs-trim__box { position: relative; width: 100%; padding-top: 38px; }
.vs-trim__len {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  padding: 5px 10px; border-radius: var(--r-sm);
  background: var(--accent); color: #fff; font: 700 13px/1 var(--font-ui);
  white-space: nowrap;
}
.vs-trim__wave {
  position: relative; height: 128px; border-radius: 10px;
  background: var(--surface-2); color: var(--text-3);
}
.vs-trim__wave canvas { display: block; width: 100%; height: 100%; }
.vs-trim__sel {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  border: 2px solid var(--accent); border-radius: 10px;
  background: rgba(253, 66, 156, .08); pointer-events: none;
}
.vs-trim__wave.is-plain .vs-trim__sel { border-color: var(--border-1); background: none; }
.vs-trim__h {
  position: absolute; top: -2px; bottom: -2px; width: 14px;
  background: var(--accent); cursor: ew-resize; pointer-events: auto; touch-action: none;
}
.vs-trim__h--a { left: -2px; border-radius: 10px 0 0 10px; }
.vs-trim__h--b { right: -2px; border-radius: 0 10px 10px 0; }
.vs-trim__h::after {
  content: ""; position: absolute; left: 6px; top: 50%; width: 2px; height: 22px; margin-top: -11px;
  border-radius: 1px; background: rgba(255, 255, 255, .9);
}
.vs-trim__h:focus-visible { outline: none; box-shadow: var(--ring); }
.vs-trim__pos { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--text-1); pointer-events: none; }
.vs-trim__range {
  margin: 10px 0 0; text-align: center;
  font: 500 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-3);
}
.vs-play {
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: 50%; background: var(--surface-3); color: var(--text-1); cursor: pointer;
}
.vs-play:hover { background: var(--surface-hover); }
.vs-play:focus-visible { outline: none; box-shadow: var(--ring); }
.vs-trim__verdict { margin: 0; font: 400 13.5px/1.5 var(--font-ui); color: var(--text-2); max-width: 52ch; }
.vs-trim__verdict.is-ok { color: var(--success); }
.vs-trim__verdict.is-low { color: var(--warning); }
.vs-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); width: 100%; }
.vs-acts .btn { height: 48px; min-width: 170px; justify-content: center; gap: 8px; border-radius: var(--r-full); }

/* ---------- ожидание и фраза ---------- */
.vs-wait { gap: 10px; padding: 80px var(--s4); }
.vs-wait b { font: 700 19px/1.3 var(--font-head); color: var(--text-1); }
.vs-wait p { margin: 0; max-width: 44ch; font: 400 14px/1.5 var(--font-ui); color: var(--text-2); }
.vs-spin {
  width: 40px; height: 40px; margin-bottom: 8px; border-radius: 50%;
  border: 3px solid var(--surface-3); border-top-color: var(--accent);
  animation: vs-spin .9s linear infinite;
}
@keyframes vs-spin { to { transform: rotate(360deg); } }
.vs-phr { gap: var(--s3); padding-top: var(--s4); }
.vs-phr__k { margin: 0; font: 600 15px/1.3 var(--font-ui); color: var(--text-1); }
.vs-phr__q {
  margin: 0; max-width: 26ch;
  font: 400 clamp(24px, 4.2vw, 36px)/1.22 Georgia, "Times New Roman", serif;
  color: var(--text-1); text-wrap: balance;
}
.vs-phr__hint { margin: 0; max-width: 50ch; font: 400 13px/1.5 var(--font-ui); color: var(--text-3); }
.vs-phr__ctl { display: grid; justify-items: center; gap: 10px; min-height: 150px; align-content: center; }
.vs-phr__time { margin: 0; font: 400 13px/1.4 var(--font-ui); color: var(--text-3); }
.vs-phr__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.vs-phr__links .btn { gap: 6px; color: var(--text-3); }
.vs-miss { display: grid; justify-items: center; gap: 10px; }
.vs-miss__i {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-1); font: 700 20px/1 var(--font-ui);
}
.vs-miss p { margin: 0; max-width: 42ch; font: 400 14px/1.5 var(--font-ui); color: var(--text-2); }
.vs-make { gap: var(--s4); }
.vs-done .vs-acts .btn { min-width: 220px; }

@media (max-width: 600px) {
  .modal.vs { width: calc(100vw - 16px); padding: var(--s4); min-height: 0; }
  .vs-drop { padding: 36px var(--s3) 28px; }
  .vs-tips { grid-template-columns: minmax(0, 1fr); }
  .vs-ctl { gap: var(--s3); }
  .vs-side { padding: 0 12px; }
  .vs__steps i { width: 44px; }
  .vs-acts .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-ring__fg, .vs-len__fill { transition: none; }
  .vs-spin { animation-duration: 2.4s; }
}

/* ============================================================
   ПРАВКИ ВЛАДЕЛЬЦА 28.10.2026, ТРЕТИЙ КРУГ
   ============================================================ */

/* Меню поверх окон и плеера: в окне «Мой голос» оно открывалось под
   окном, а у трека уходило под плеер. */
.menu { z-index: calc(var(--z-modal) + 5); }

/* ---------- поле стиля: своя полоса прокрутки, крестик отдельно ----------
   Крестик стоял поверх полосы прокрутки, и его задевали. Теперь у
   крестика своя колонка справа от поля, полоса — тонкая, без стрелок. */
.pan__row--clear { padding-right: 36px; }
.pan__row--clear > textarea { padding-right: 6px; }
textarea.bare::-webkit-scrollbar { width: 6px; }
textarea.bare::-webkit-scrollbar-button { display: none; height: 0; }
textarea.bare::-webkit-scrollbar-track { background: transparent; }
textarea.bare::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(255, 255, 255, .16); }
textarea.bare::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .28); }
@supports (-moz-appearance: none) {
  textarea.bare { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
}

/* ---------- карточка песни: время на обложке, корзина в углу ---------- */
.track__dur {
  position: absolute; right: 4px; bottom: 4px; z-index: 1;
  display: none;
  padding: 2px 6px; border-radius: 6px;
  background: rgba(10, 8, 14, .72); color: #fff;
  font: 600 11px/1.3 var(--font-ui);
  pointer-events: none;
}
.mine__list.is-comfy .track__dur,
.lib-list.is-comfy .track__dur { display: block; }
.mine__list.is-comfy .track__time-wrap,
.lib-list.is-comfy .track__time-wrap { display: none; }
.lib-list.is-comfy .track { grid-template-columns: 20px 72px minmax(0, 1fr) auto; }
.track__del { display: none; }
.mine__list.is-comfy .track { position: relative; }
.mine__list.is-comfy .track__main { padding-right: 30px; }
.mine__list.is-comfy .track__del {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; width: 32px; height: 32px;
  color: var(--text-3);
}
.mine__list.is-comfy .track__del:hover { color: var(--error); background: var(--surface-3); }

/* ---------- название правится прямо в строке ---------- */
.track__edit { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.track__title.is-editing > :not(.track__edit) { display: none; }
.track__edit-in {
  flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px;
  border: 1px solid var(--accent); border-radius: var(--r-sm);
  background: var(--surface-1); color: var(--text-1);
  font: 700 15px/1 var(--font-ui);
}
.track__edit-in:focus { outline: none; box-shadow: var(--ring); }
.track__edit-ok, .track__edit-no {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--r-full); cursor: pointer;
}
.track__edit-ok { background: var(--accent); color: #fff; }
.track__edit-no { background: var(--surface-3); color: var(--text-2); }
.track__edit-ok:focus-visible, .track__edit-no:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- «Свой голос»: инструкция выше советов, стрелка вниз ---------- */
.vs-drop__ok { margin: 10px 0 0; font: 400 12px/1.4 var(--font-ui); color: var(--text-3); }
.vs-more summary { list-style: none; display: flex; align-items: center; gap: 10px; }
.vs-more summary::-webkit-details-marker { display: none; }
.vs-more summary::before {
  content: ""; flex: none; width: 8px; height: 8px; margin: -4px 2px 0;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2);
  transform: rotate(45deg); transition: transform var(--t-hover);
}
.vs-more[open] summary::before { transform: rotate(-135deg); margin-top: 4px; }

/* ---------- картинка голоса ---------- */
.vpush__ava, .voice-card__ava { overflow: hidden; }
.vpush__ava img, .voice-card__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- «Дорожки»: вкладки списка ---------- */
.mixpick__seg { margin-bottom: var(--s3); align-self: flex-start; }
.mixpick__seg .seg__item span { margin-left: 4px; color: var(--text-3); font-weight: 500; }
.mixpick__hint { margin: 0 0 var(--s3); font: 400 13.5px/1.5 var(--font-ui); color: var(--text-2); }
.mixpick__hint[hidden] { display: none; }

/* ---------- пульт дорожек ---------- */
.mixer { display: grid; gap: var(--s3); }
.mixer__bar {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--border-1);
}
.mixer__play {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 50%; background: var(--grad); color: #fff; cursor: pointer;
}
.mixer__play:focus-visible { outline: none; box-shadow: var(--ring); }
.mixer__time, .mixer__len { font: 600 13px/1 var(--font-ui); color: var(--text-2); min-width: 36px; }
.mixer__pos, .mixtr__vol input { width: 100%; accent-color: var(--accent); }
.mixer__hint { margin: 0; font: 400 12.5px/1.45 var(--font-ui); color: var(--text-3); }
.mixer__rows { display: grid; gap: 6px; }
.mixtr {
  display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(140px, 2fr) auto;
  align-items: center; gap: var(--s3);
  padding: 10px var(--s4); border-radius: var(--r-md);
  background: var(--surface-1); border: 1px solid var(--border-2);
  transition: opacity var(--t-hover);
}
.mixtr.is-off .mixtr__name, .mixtr.is-off .mixtr__vol { opacity: .45; }
.mixtr__name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mixtr__name i { flex: none; width: 4px; height: 26px; border-radius: 2px; background: var(--c); }
.mixtr__name b { font: 600 14px/1.3 var(--font-ui); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mixtr__ms { display: flex; gap: 6px; }
.mixtr__m, .mixtr__s {
  width: 34px; height: 30px; padding: 0;
  border: 1px solid var(--border-1); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-2);
  font: 700 12px/1 var(--font-ui); cursor: pointer;
}
.mixtr__m[aria-pressed="true"] { background: var(--error); border-color: var(--error); color: #fff; }
.mixtr__s[aria-pressed="true"] { background: var(--warning); border-color: var(--warning); color: #1A1410; }
.mixtr__m:focus-visible, .mixtr__s:focus-visible { outline: none; box-shadow: var(--ring); }
.mixtr__vol { display: flex; align-items: center; gap: 10px; }
.mixtr__vol span { flex: none; width: 40px; text-align: right; font: 500 12px/1 var(--font-ui); color: var(--text-3); }
.mixtr__dl { display: flex; gap: 4px; }
.mixtr__dl .btn { gap: 4px; }
@media (max-width: 700px) {
  .mixer__bar { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .mixer__reset { grid-column: 1 / -1; justify-self: start; }
  .mixtr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .mixtr__vol { grid-column: 1 / -1; }
  .mixtr__dl { grid-column: 1 / -1; }
}

/* ---------- карточка студии как в прошлом дизайне (владелец 28.10.2026) ----------
   Кнопки — одной строкой под описанием, от левого края текста; корзина
   на той же строке в правом углу, того же размера. Время на обложке —
   на белой полупрозрачной подложке, как у Suno. */
.mine__list.is-comfy .track {
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-areas:
    "cover main"
    "cover acts";
}
.mine__list.is-comfy .track__main { padding-right: 0; }
.mine__list.is-comfy .track__actions { justify-self: start; margin-left: -8px; padding-right: 44px; }
.mine__list.is-comfy .track__del { top: auto; bottom: 12px; right: 12px; width: 36px; height: 36px; }
.track__dur {
  right: 6px; bottom: 6px;
  padding: 3px 7px; border-radius: 7px;
  background: rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  color: #fff;
  font: 700 12.5px/1.25 var(--font-head);
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* ---------- «Дорожки»: отдельный инструмент и MIDI (владелец 28.10.2026) ---------- */
.mixx { display: grid; gap: var(--s3); margin-top: var(--s4); }
.mixx__card {
  display: grid; gap: var(--s3);
  padding: var(--s4); border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--border-1);
}
.mixx__head { display: grid; gap: 4px; }
.mixx__head b { font: 700 16px/1.3 var(--font-head); color: var(--text-1); }
.mixx__head span { font: 400 13px/1.5 var(--font-ui); color: var(--text-3); }
.mixx__pick { display: flex; flex-wrap: wrap; gap: var(--s2); }
.mixx__sel { flex: 1 1 240px; min-width: 0; height: 44px; }
.mixx__pick .btn { height: 44px; }
.mixx__wait { margin: 0; font: 400 13px/1.5 var(--font-ui); color: var(--text-2); }
.mixx__list { display: grid; gap: 6px; }
.mixx__list:empty { display: none; }
.mixx__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3);
  padding: 8px var(--s3); border-radius: var(--r-md); background: var(--surface-1); border: 1px solid var(--border-2);
}
.mixx__row b { font: 600 14px/1.3 var(--font-ui); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mixx__dl { display: flex; gap: 4px; }
.mixx__dl .btn { gap: 4px; }
.mixx__midi .btn { gap: 8px; }
@media (max-width: 600px) {
  .mixx__row { grid-template-columns: auto minmax(0, 1fr); }
  .mixx__dl { grid-column: 1 / -1; }
}

/* ============================================================
   КАРТОЧКА «АУДИО» В «МАСТЕРЕ» (владелец 28.10.2026, как у Suno)
   Прикреплённый трек, переключатель действий, волна и выделение.
   ============================================================ */
.acard {
  display: grid; gap: var(--s3);
  margin-bottom: var(--s3); padding: var(--s4);
  border-radius: var(--r-lg); border: 1px solid var(--border-1); background: var(--surface-2);
}
.acard__top { display: flex; align-items: center; gap: var(--s2); }
.acard__k { margin-right: auto; font: 700 15px/1.3 var(--font-head); color: var(--text-1); }
.acard__mode {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px; border-radius: var(--r-full);
  border: 1px solid var(--border-1); background: var(--surface-3); color: var(--text-1);
  font: 600 14px/1 var(--font-ui); cursor: pointer;
}
.acard__mode:hover { background: var(--surface-hover); }
.acard__mode:focus-visible { outline: none; box-shadow: var(--ring); }
.acard__mode svg:last-child { color: var(--text-3); }
.acard__del { color: var(--text-3); }
.acard__track { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); }
.acard__play {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--r-md); background: var(--grad); color: #fff; cursor: pointer;
}
.acard__play:disabled { opacity: .5; cursor: default; }
.acard__play:focus-visible { outline: none; box-shadow: var(--ring); }
.acard__name { display: grid; gap: 2px; min-width: 0; }
.acard__name b { font: 600 14.5px/1.3 var(--font-ui); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard__name span { font: 500 12.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-3); }
.acard__wave {
  position: relative; height: 76px; border-radius: 10px;
  background: var(--surface-1); color: var(--text-2);
}
.acard__wave canvas { display: block; width: 100%; height: 100%; }
.acard__pos { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--text-1); pointer-events: none; }
.acard__sel {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  border: 2px solid var(--accent); border-radius: 10px;
  background: rgba(253, 66, 156, .10); pointer-events: none;
}
.acard__wave[data-kind="remove"] .acard__sel { border-color: var(--error); background: rgba(255, 107, 94, .14); }
.acard__wave[data-kind="extend"] .acard__sel { border-right-width: 3px; }
.acard__tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  padding: 2px 8px; border-radius: 6px; background: var(--accent); color: #fff;
  font: 700 10.5px/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.acard__wave[data-kind="remove"] .acard__tag { background: var(--error); }
.acard__h {
  position: absolute; top: -2px; bottom: -2px; width: 14px;
  background: var(--accent); cursor: ew-resize; pointer-events: auto; touch-action: none;
}
.acard__h--a { left: -2px; border-radius: 10px 0 0 10px; }
.acard__h--b { right: -2px; border-radius: 0 10px 10px 0; }
.acard__wave[data-kind="remove"] .acard__h { background: var(--error); }
.acard__h::after {
  content: ""; position: absolute; left: 6px; top: 50%; width: 2px; height: 20px; margin-top: -10px;
  border-radius: 1px; background: rgba(255, 255, 255, .9);
}
.acard__h:focus-visible { outline: none; box-shadow: var(--ring); }
.acard__fade { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.acard__fade--in { left: 0; background: linear-gradient(90deg, rgba(12, 11, 16, .85), transparent); border-radius: 10px 0 0 10px; }
.acard__fade--out { right: 0; background: linear-gradient(270deg, rgba(12, 11, 16, .85), transparent); border-radius: 0 10px 10px 0; }
.acard__range { margin: 0; font: 500 12.5px/1.4 var(--font-ui); color: var(--text-2); }
.acard__range:empty { display: none; }
.acard__row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.acard__row input[type="range"] { flex: 1 1 160px; accent-color: var(--accent); }
.acard__lbl { font: 600 13px/1.3 var(--font-ui); color: var(--text-2); }
.acard__val { font: 600 13.5px/1.3 var(--font-ui); color: var(--text-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard__row .btn { gap: 6px; }
.acard__hint { margin: 0; font: 400 12.5px/1.45 var(--font-ui); color: var(--text-3); }
.acard__apply { justify-self: start; gap: 8px; }

/* ---------- значки на карточке песни: чётче и чуть правее (владелец 28.10.2026) ----------
   Страница уменьшена до 90 % (zoom), и тонкая линия значка ложилась
   между пикселями — значки выглядели размытыми. Значок 20 точек и линия
   плотнее дают ровный штрих; кнопка мягко подсвечивается под курсором. */
.track__actions { gap: 2px; }
.track__actions .luvi-ico, .track__del .luvi-ico { stroke-width: 1.9; shape-rendering: geometricPrecision; }
.track__actions .btn--icon { color: var(--text-2); transition: background var(--t-hover), color var(--t-hover); }
.track__actions .btn--icon.is-liked { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .track__actions .btn--icon:hover { background: var(--surface-3); color: var(--text-1); }
}
.mine__list.is-comfy .track__actions { margin-left: 0; }

/* ---------- карточка «Аудио»: обложка, мэшап, выделение (владелец 29.10.2026) ---------- */
.acard__cov {
  position: relative; display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0; flex: none;
  border: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-3) center / cover no-repeat; color: #fff; cursor: pointer;
}
.acard__cov::before { content: ""; position: absolute; inset: 0; background: rgba(8, 7, 12, .38); transition: background var(--t-hover); }
.acard__cov svg { position: relative; }
@media (hover: hover) and (pointer: fine) { .acard__cov:hover::before { background: rgba(8, 7, 12, .18); } }
.acard__cov:focus-visible { outline: none; box-shadow: var(--ring); }
.acard__songs { display: grid; gap: var(--s2); }
.acard__song {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3);
  padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-1); border: 1px solid var(--border-2);
}
.acard__add {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 64px; padding: var(--s3);
  border: 1.5px dashed rgba(255, 255, 255, .18); border-radius: var(--r-md);
  background: transparent; color: var(--text-1); font: 600 15px/1.3 var(--font-ui); cursor: pointer;
  transition: border-color var(--t-hover), background var(--t-hover);
}
.acard__add:hover { border-color: var(--accent); background: var(--accent-soft); }
.acard__add:focus-visible { outline: none; box-shadow: var(--ring); }
.acard__sel-box {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-1);
}
.acard__sel-box:empty { display: none; }
.acard__sel-k { font: 500 13px/1 var(--font-ui); color: var(--text-3); }
.acard__sel-box b {
  padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--border-1); background: var(--surface-2);
  font: 600 16px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-1);
}
.acard__sel-box i { font-style: normal; color: var(--text-3); }
.acard__sel-len { font: 600 13px/1 var(--font-ui); color: var(--accent); }
.acard__sel-box small { flex-basis: 100%; text-align: center; font: 400 12px/1.3 var(--font-ui); color: var(--text-3); }

/* окно «Вторая песня»: загрузка — отдельной строкой, ниже список с обложками */
.pick-two__up {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: var(--s2);
  width: 100%; min-height: 56px; padding: 0 var(--s2) 0 0;
  border: 1.5px dashed rgba(255, 255, 255, .18); border-radius: var(--r-sm);
  background: transparent; color: var(--text-1); text-align: left; cursor: pointer;
}
.pick-two__up:hover { border-color: var(--accent); background: var(--accent-soft); }
.pick-two__up-ico { display: grid; place-items: center; height: 100%; color: var(--accent); }
.pick-two__k { margin: var(--s4) 0 var(--s2); font: 600 12px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

/* ---------- угол поля: без белого квадрата (владелец 29.10.2026) ----------
   Белым был «угол» между полосой прокрутки и ручкой растягивания: свою
   полосу мы перекрасили, а угол браузер красил по умолчанию. */
textarea.bare::-webkit-scrollbar-corner { background: transparent; }
textarea.bare::-webkit-resizer {
  background: transparent;
  background-image:
    linear-gradient(135deg, transparent 0 58%, rgba(255, 255, 255, .28) 58% 64%, transparent 64% 74%,
                    rgba(255, 255, 255, .28) 74% 80%, transparent 80%);
}

/* пульт дорожек: строка загрузки и предупреждение (владелец 29.10.2026) */
.mixer__load { margin: 0; font: 500 13px/1.45 var(--font-ui); color: var(--text-2); }
.mixer__load.is-warn { color: var(--warning); }
.mixer__load[hidden] { display: none; }
.mixer__play:disabled { opacity: .5; cursor: progress; }

/* ---------- окно «Обложка песни»: своя или нарисовать (владелец 29.10.2026) ---------- */
.covpick { width: min(520px, calc(100vw - 32px)); }
.covpick .modal__body { display: grid; gap: var(--s4); }
.covpick__stage { display: flex; justify-content: center; gap: var(--s4); }
.covpick__now, .covpick__new { position: relative; width: 180px; margin: 0; }
.covpick__new[hidden] { display: none; }
.covpick__now img, .covpick__new img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); display: block; }
.covpick__badge {
  position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 6px;
  background: rgba(10, 8, 14, .7); color: #fff; font: 600 11px/1.3 var(--font-ui);
}
.covpick__badge.is-new { background: var(--accent); }
.covpick__seg { justify-self: center; }
.covpick__seg .seg__item { gap: 6px; }
/* На телефоне «Своя картинка» уезжала за край окна (снимок владельца
   31.10.2026): у вкладок на узком экране своя ширина и прокрутка вбок.
   Здесь вкладок две — делим ширину окна между ними. */
@media (max-width: 900px) {
  .covpick__seg { justify-self: stretch; display: flex; max-width: none; overflow: visible; }
  .covpick__seg .seg__item { flex: 1 1 auto; min-width: 0; padding: 0 10px; font-size: 13px; }
  .covpick__seg .seg__item svg { flex: none; }
  .covpick__seg .seg__item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* Пока пишут описание, окно стоит на клавиатуре (kb-up) и над ней
     остаётся полэкрана: поле не помещалось и обрезалось сверху. Картинку,
     вкладки, подсказку и «Вернуть исходную» на это время прячем — цена
     и так на кнопке «Нарисовать». */
  .covpick.kb-up .covpick__stage, .covpick.kb-up .covpick__seg,
  .covpick.kb-up .covpick__hint, .covpick.kb-up .covpick__back { display: none; }
  /* поле занимает, сколько осталось: на маленьком iPhone над клавиатурой
     меньше места, чем у поля по умолчанию */
  .covpick.kb-up .modal__body { display: flex; flex-direction: column; }
  .covpick.kb-up .covpick__pane:not([hidden]),
  .covpick.kb-up .covpick__pane .field { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .covpick.kb-up .covpick__prompt { flex: 1 1 auto; min-height: 48px; resize: none; }
}
.covpick__pane[hidden] { display: none; }
.covpick__pane .field { margin: 0; }
.covpick__prompt { min-height: 84px; resize: vertical; }
.covpick__drop {
  display: grid; justify-items: center; gap: 6px; width: 100%; padding: var(--s6) var(--s4);
  border: 1.5px dashed rgba(255, 255, 255, .18); border-radius: var(--r-md);
  background: transparent; color: var(--text-1); cursor: pointer;
}
.covpick__drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.covpick__drop b { font: 600 15px/1.3 var(--font-ui); }
.covpick__drop span { font: 400 12.5px/1.4 var(--font-ui); color: var(--text-3); }
.covpick__hint { margin: var(--s2) 0 0; font: 400 12.5px/1.45 var(--font-ui); color: var(--text-3); text-align: left; }
.covpick .modal__foot { flex-wrap: wrap; }
.covpick .modal__foot .btn--primary { flex: 1 1 220px; gap: 8px; justify-content: center; }
.covpick .modal__foot .btn--secondary { gap: 6px; }
@media (max-width: 480px) { .covpick__now, .covpick__new { width: 46%; } }

/* ============================================================
   CRD-02. КОНСТРУКТОР ОТКРЫТКИ В v3 (владелец 29.10.2026)
   Слева — шаги формы, справа — живое превью, как увидит получатель.
   ============================================================ */
.cnew { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s6); align-items: start; max-width: 1100px; }
.cnew__form { display: grid; gap: var(--s4); min-width: 0; }
.cnew__sec { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r-lg); background: var(--surface-1); border: 1px solid var(--border-2); }
.cnew__h { margin: 0; font: 700 15px/1.3 var(--font-head); color: var(--text-1); }
.cnew__h-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.cnew__song { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); }
.cnew__cov { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--surface-3) center / cover no-repeat; }
.cnew__song-t { display: grid; gap: 2px; min-width: 0; }
.cnew__song-t b { font: 600 14.5px/1.3 var(--font-ui); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnew__song-t span { font: 400 12.5px/1.2 var(--font-ui); color: var(--text-3); }
.cnew__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cnew__chips .chip.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--text-1); }
.cnew__themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.cnew__theme { display: grid; gap: 6px; padding: 6px; border: 1.5px solid transparent; border-radius: var(--r-md); background: none; color: var(--text-2); cursor: pointer; text-align: left; }
.cnew__theme.is-on { border-color: var(--accent); color: var(--text-1); }
.cnew__theme:focus-visible { outline: none; box-shadow: var(--ring); }
.cnew__swatch { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.cnew__swatch i { font-style: normal; font-size: 24px; }
.cnew__theme-t { font: 500 12.5px/1.3 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnew__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.cnew__two .field, .cnew__sec > .field { margin: 0; position: relative; }
.cnew__msg { min-height: 110px; resize: vertical; }
.cnew__count { position: absolute; right: 10px; bottom: 8px; font: 500 11.5px/1 var(--font-ui); color: var(--text-3); }
.cnew__opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s4); }
.cnew__check { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.3 var(--font-ui); color: var(--text-2); cursor: pointer; }
.cnew__check input { accent-color: var(--accent); width: 18px; height: 18px; }
.cnew__when { margin: 0; flex: 1 1 220px; }
.cnew__err { margin: 0; padding: 10px 14px; border-radius: var(--r-md); background: rgba(255, 107, 94, .12); color: var(--error); font: 500 13.5px/1.4 var(--font-ui); }
.cnew__err[hidden] { display: none; }
.cnew__go { justify-self: start; height: 50px; padding: 0 28px; gap: 8px; font-size: 15px; }
.cnew__side { position: sticky; top: var(--s4); display: grid; gap: var(--s2); }
.cnew__k { margin: 0; font: 600 12px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.cnew__scene {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  min-height: 460px; padding: var(--s6) var(--s4) var(--s4); border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow-overlay);
}
.cnew__emoji { font-size: 40px; line-height: 1; }
.cnew__occ { padding: 4px 10px; border-radius: var(--r-full); background: rgba(255, 255, 255, .14); font: 600 12px/1.3 var(--font-ui); }
.cnew__to { font: 800 26px/1.15 var(--font-head); margin-top: 6px; overflow-wrap: anywhere; }
.cnew__from { font: 500 14px/1.3 var(--font-ui); opacity: .85; }
.cnew__text { margin: 6px 0 0; font: 400 14px/1.55 var(--font-ui); opacity: .92; white-space: pre-wrap; overflow-wrap: anywhere; }
.cnew__player {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 34px; align-items: center; gap: 10px;
  width: 100%; margin-top: auto; padding: 8px; border-radius: 14px; background: rgba(10, 8, 14, .45); text-align: left;
}
.cnew__pcov { width: 40px; height: 40px; border-radius: 9px; background: var(--surface-3) center / cover no-repeat; }
.cnew__pt { display: grid; min-width: 0; }
.cnew__pt b { font: 600 13px/1.3 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnew__pt span { font: 400 11.5px/1.2 var(--font-ui); opacity: .75; }
.cnew__pplay { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--a); color: #fff; }
.cnew__done { grid-column: 1 / -1; display: grid; justify-items: center; gap: var(--s3); max-width: 560px; margin: 0 auto; padding: var(--s8) var(--s4); text-align: center; }
.cnew__done p { margin: 0; color: var(--text-2); }
.cnew__ok { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--success); color: #fff; }
.cnew__link { display: flex; gap: var(--s2); width: 100%; }
.cnew__link .field__input { flex: 1; min-width: 0; }
.cnew__link .btn { gap: 6px; }
.cnew__share { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cnew__share .chip { text-decoration: none; gap: 6px; }
.cnew__after { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
@media (max-width: 960px) {
  .cnew { grid-template-columns: minmax(0, 1fr); }
  .cnew__side { position: static; order: -1; }
  .cnew__scene { min-height: 0; }
}
@media (max-width: 560px) { .cnew__two { grid-template-columns: 1fr; } }

/* ---------- вкладки режимов: всё влезает, промежутки одинаковые (владелец 29.10.2026) ----------
   С новыми названиями («Создать песню», «По мотиву») ряд перестал
   влезать и «Своим голосом» обрезался, а растянутые на телефоне вкладки
   стояли с разными промежутками. Отступ у всех одинаковый и меньше,
   ряд не сжимается — уступает место выбор качества справа. */
.studio__top .seg { flex: 0 0 auto; gap: 2px; }
.studio__top .seg__item { flex: 0 0 auto; padding: 0 9px; font-size: 13px; }
.studio__top .pick { min-width: 0; flex: 0 1 auto; }
@media (max-width: 700px) {
  .studio__top .seg { flex: 1 1 100%; justify-content: space-between; }
  .studio__top .seg__item { flex: 0 0 auto; padding: 0 8px; }
}
@media (max-width: 380px) {
  .studio__top .seg__item { padding: 0 6px; font-size: 12.5px; }
}

/* ---------- «Подскажи идею» не ложится на текст (владелец 29.10.2026) ----------
   Ряд кнопок стоял поверх нижнего края поля, и длинный текст уходил под
   кнопку. Теперь ряд — отдельной строкой под полем на всех экранах, а
   счётчик знаков — справа в той же строке. */
.pan__row--area textarea { padding-bottom: 8px; }
.pan__row--area .srow--in { position: static; margin-top: var(--s2); }
.pan__row--area .studio__count { top: auto; bottom: 10px; right: 0; }

/* ---------- студия: поля плотнее (владелец 29.10.2026) ----------
   Слева от формы было 64, между формой и «Моими треками» 24 + 17 + 24,
   справа 32. Слева и посередине теперь по ~32 (одинаково), справа чуть
   больше — 40, чтобы «Мои треки» не липли к краю экрана. */
@media (min-width: 901px) {
  body[data-screen="studio"] .content { padding-left: var(--s8); padding-right: 40px; }
  body[data-screen="studio"] .studio-col { padding-right: 8px; }
  body[data-screen="studio"] .mine-col { padding-left: 8px; }
}

/* ---------- карточка ожидания песни (владелец 29.10.2026) ----------
   Как готовая карточка: обложка с кружком загрузки, название, таймер,
   шаг и описание; по строке на каждую из двух песен. */
.gen2 { position: relative; display: grid; gap: 10px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-2); height: auto; }
.gen2__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
.mine__list.is-list .gen2__row, .lib-list .gen2__row { grid-template-columns: 56px minmax(0, 1fr); }
.gen2__cov {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1; width: 100%; border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-3) center / cover no-repeat;
}
/* заставка Luvi, пока нет настоящей обложки (владелец 29.10.2026):
   тёплое свечение фирменного градиента медленно дышит под кружком */
.gen2__cov:not(.is-real) {
  background:
    radial-gradient(90% 80% at 18% 12%, rgba(255, 138, 24, .55), transparent 62%),
    radial-gradient(100% 90% at 88% 92%, rgba(251, 69, 149, .65), transparent 64%),
    linear-gradient(155deg, #2b1526 0%, #160d18 100%);
  background-size: 160% 160%, 160% 160%, 100% 100%;
  animation: gen2-glow 6s ease-in-out infinite alternate;
}
.gen2__cov:not(.is-real)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
@keyframes gen2-glow {
  from { background-position: 0% 0%, 100% 100%, 0 0; }
  to { background-position: 40% 30%, 60% 70%, 0 0; }
}
.gen2__cov.is-real::before { content: ""; position: absolute; inset: 0; background: rgba(8, 7, 12, .5); }
@media (prefers-reduced-motion: reduce) { .gen2__cov:not(.is-real) { animation: none; } }
.gen2__spin {
  position: relative; width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff;
  animation: gen2-spin .9s linear infinite;
}
@keyframes gen2-spin { to { transform: rotate(360deg); } }
.gen2__main { display: grid; gap: 4px; min-width: 0; padding-right: 32px; }
.gen2__t { font: 700 15px/1.3 var(--font-ui); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen2__st { font: 500 12.5px/1.4 var(--font-ui); color: var(--text-2); }
.gen2__st > b { color: var(--accent); font-weight: 700; }
.gen2__st .gen__steps { margin: 0; display: inline; font-size: 12.5px; }
.gen2__d { margin: 0; font: 400 13px/1.45 var(--font-ui); color: var(--text-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gen2 .gen__bar { height: 3px; margin-top: 4px; }
.gen2__x { position: absolute; top: 8px; right: 8px; color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { .gen2__spin { animation-duration: 2.4s; } }

/* кнопка «Создать трек» сразу после нажатия: кружок, как у Suno */
.studio__go.is-busy { gap: 10px; }
.studio__spin {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: gen2-spin .8s linear infinite;
}
.track--pending.gen2 { grid-template-columns: minmax(0, 1fr); align-items: stretch; height: auto; min-height: 0; }

/* ---------- «Основной» выделен среди режимов (владелец 29.10.2026) ----------
   Главный режим: точка в фирменном градиенте и текст ярче соседей; когда
   он выбран — мягкая розовая подложка вместо серой. */
.studio__top .seg__item--main { gap: 6px; color: var(--text-1); font-weight: 700; }
.seg__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); flex: none; }
.studio__top .seg__item--main[aria-selected="true"] {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(253, 66, 156, .45);
}

/* ---------- вкладки режимов: шире и крупнее (владелец 29.10.2026) ----------
   Ряд занимает свободное место до «?» и выбора модели, вкладки делят его
   поровну, подписи крупнее. */
.studio__top .seg { flex: 1 1 auto; max-width: 560px; }
.studio__top .seg__item { flex: 1 1 auto; padding: 0 12px; font-size: 14px; height: 38px; }
@media (max-width: 700px) {
  .studio__top .seg { max-width: none; }
  .studio__top .seg__item { padding: 0 8px; font-size: 13.5px; }
}
@media (max-width: 380px) { .studio__top .seg__item { padding: 0 6px; font-size: 12.5px; } }

/* «Основной» — главный путь. Без точки: подпись в фирменном градиенте,
   пока режим не выбран, — глаз сразу находит его среди серых соседей.
   Выбранный — залитая градиентом пилюля с белым текстом и мягким
   свечением, как главная кнопка сайта: видно, что это «правильный» выбор. */
.seg__dot { display: none; }
.studio__top .seg__item--main { font-weight: 700; box-shadow: none; }
.studio__top .seg__item--main span {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.studio__top .seg__item--main[aria-selected="true"] {
  background: var(--grad); box-shadow: 0 4px 16px rgba(251, 69, 149, .35);
}
.studio__top .seg__item--main[aria-selected="true"] span {
  background: none; -webkit-text-fill-color: #fff; color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .studio__top .seg__item--main:not([aria-selected="true"]):hover { background: var(--accent-soft); }
}

/* ---------- уголок растягивания поля: три полоски по диагонали ---------- */
textarea.bare::-webkit-resizer {
  background-color: transparent;
  background-image: linear-gradient(135deg,
    transparent 0 38%, rgba(255, 255, 255, .45) 38% 44%,
    transparent 44% 56%, rgba(255, 255, 255, .45) 56% 62%,
    transparent 62% 74%, rgba(255, 255, 255, .45) 74% 80%,
    transparent 80%);
}

/* Карточка ожидания в плитках и крупных карточках (владелец 29.10.2026):
   обе песни — отдельными плитками, как готовые: заставка с кружком,
   под ней название и таймер. Общая рамка карточки в сетке не нужна. */
.gen2__rx { display: none; }
.mine__list.is-tiles .gen2, .mine__list.is-cards .gen2 { display: contents; }
.mine__list.is-tiles .gen2__x, .mine__list.is-cards .gen2__x { display: none; }
.mine__list.is-tiles .gen2__row, .mine__list.is-cards .gen2__row {
  display: block; position: relative; min-width: 0;
  animation: gen-in 200ms var(--ease-out) both;
}
.mine__list.is-tiles .gen2__cov, .mine__list.is-cards .gen2__cov { width: 100%; aspect-ratio: 1 / 1; }
.mine__list.is-cards .gen2__cov { aspect-ratio: 16 / 10; }
.mine__list.is-tiles .gen2__main { padding: var(--s2) 2px 0; gap: 2px; }
.mine__list.is-cards .gen2__main { padding: var(--s3) 2px var(--s2); }
.mine__list.is-tiles .gen2__t { font-size: 14px; }
.mine__list.is-tiles .gen2__st { font-size: 11px; }
.mine__list.is-tiles .gen2__sep, .mine__list.is-tiles .gen2__st .gen__steps,
.mine__list.is-tiles .gen2__d, .mine__list.is-cards .gen2__d { display: none; }
.mine__list.is-tiles .gen2 .gen__bar { height: 2px; }
.mine__list.is-tiles .gen2__rx, .mine__list.is-cards .gen2__rx {
  display: grid; place-items: center;
  position: absolute; top: var(--s2); right: var(--s2); z-index: 2;
  width: 32px; height: 32px; border: 0; border-radius: var(--r-sm);
  background: rgba(10, 8, 14, .72); color: #fff; cursor: pointer;
}
.mine__list.is-tiles .gen2__rx:hover, .mine__list.is-cards .gen2__rx:hover { background: rgba(10, 8, 14, .9); }

/* Текст песни у нижнего плеера (владелец 29.10.2026): панель справа
   над плеером, как в старом дизайне; текущая строка подсвечена. */
.plyr {
  position: fixed; top: 0; right: 0; bottom: var(--player-h);
  width: 400px; max-width: 100%;
  z-index: var(--z-player);
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border-left: 1px solid var(--border-1);
  box-shadow: -16px 0 40px rgba(0, 0, 0, .35);
  animation: gen-in 200ms var(--ease-out) both;
}
.plyr__head { display: flex; align-items: center; gap: 4px; padding: 16px 12px 12px 20px; border-bottom: 1px solid var(--border-1); }
.plyr__who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.plyr__t { font: 700 15px/1.3 var(--font-ui); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plyr__body.lyrics { margin: 0; padding: 20px 20px 40%; flex: 1; -webkit-mask-image: none; mask-image: none; }
@media (max-width: 900px) { .plyr { width: 100%; border-left: 0; } }

/* Вкладка «Звуки» в библиотеке (владелец 29.10.2026): список «Мои звуки»
   без формы; поиск и вид треков к звукам не относятся — прячем. */
.lib-bar.is-sounds { display: none; }
.lib-sounds { margin-top: var(--s4); }
.snd.snd--lib { display: block; }
.snd--lib .snd__mine-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); justify-content: space-between; }
.snd--lib .snd__filters { margin: 0; }
@media (max-width: 900px) { .snd--lib .snd__mine-head { display: flex; } }

/* Громкость и кнопка чата (владелец 29.10.2026): регулятор громкости
   выезжает над плеером ровно там, где висит круглая кнопка чата, и она
   его закрывала. Пока курсор на правой части плеера, кнопка чата
   уступает место (как при открытом меню); открыта панель текста — тоже. */
.support-fab { transition: transform var(--t-hover), box-shadow var(--t-hover), opacity 160ms ease-out; }
body:has(.player__extra:hover) .support-fab,
body:has(.player__vol.is-open) .support-fab { opacity: 0; pointer-events: none; transform: scale(.9); }
body:has(.plyr) .support-fab { display: none; }
/* Узкий экран компьютера: семь значков справа не помещались и наезжали
   на полосу времени. «Поделиться», «Скачать» и «Очередь» есть в «…». */
@media (min-width: 901px) and (max-width: 1499px) { .player__extra .shr, .player__extra .dl { display: none; } }
@media (min-width: 901px) and (max-width: 1279px) { .player__extra .queue { display: none; } }

/* Звуки: поиск, воронка и сердце, как у треков (владелец 29.10.2026) */
.snd-bar { margin-bottom: var(--s3); }
.snd-bar .snd-sort.is-on { color: var(--accent); }
.sitem__like { margin-left: auto; color: var(--text-3); }
.sitem__like.is-liked { color: var(--accent); }
.sitem__like + .sitem__del { margin-left: 0; }
.lib-liked-sounds { margin-top: var(--s8); }
.snd--liked .snd__mine-head { margin-bottom: var(--s3); }

/* ------------------------------------------------------------
   «КАВЕР» ВРЕМЕННО НЕ РАБОТАЕТ (владелец 30.10.2026)
   Окно views-studio.js каверНеРаботает: сердце почти без воды, в ней
   пульс и пузырьки.
   Сердце по центру; текст на компьютере по центру, на телефоне слева.
   ------------------------------------------------------------ */
/* 440: подсказка про «Основной» помещается в одну строку (ей нужно 383 px) */
.modal.cover-off { width: min(440px, calc(100vw - 48px)); }
.cover-off .modal__body { margin-top: var(--s4); }
/* Сердце по центру (владелец 30.10.2026), крестик в углу поверх шапки, чтобы
   не сдвигал сердце вбок. Текст: на компьютере по центру, строки
   выровнены по длине (без «расчёски»), на телефоне — по левому краю. */
.cover-off .modal__head { justify-content: center; }
.cover-off .modal__close { position: absolute; top: 18px; right: 18px; margin: 0; }
@media (min-width: 901px) {
  .cover-off .modal__body { text-align: center; }
  .cover-off__text { text-wrap: balance; }
}
.cover-off__heart { position: relative; display: block; width: 88px; height: 88px; }
.cover-off__heart img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Остаток жизни: вода на дне вспыхивает светом в ритме сердца — два
   удара и пауза. Светлая копия картинки видна только в полосе воды. */
.cover-off__pulse {
  filter: brightness(1.45) saturate(1.2);
  -webkit-mask: linear-gradient(to top, transparent 6%, #000 11%, #000 31%, transparent 40%);
  mask: linear-gradient(to top, transparent 6%, #000 11%, #000 31%, transparent 40%);
  opacity: 0;
  animation: cover-off-stuk 2.6s ease-out infinite;
}
@keyframes cover-off-stuk {
  0% { opacity: 0; }
  7% { opacity: .75; }
  16% { opacity: .15; }
  24% { opacity: .6; }
  42%, 100% { opacity: 0; }
}
/* пузырьки поднимаются в воде и гаснут у поверхности */
.cover-off__bubble {
  position: absolute;
  left: 44%; bottom: 14%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255, 205, 228, .85);
  box-shadow: 0 0 3px 1px rgba(255, 160, 205, .55);
  opacity: 0;
  animation: cover-off-puzyr 3.4s ease-in infinite;
}
.cover-off__bubble + .cover-off__bubble { left: 57%; width: 2px; height: 2px; animation-delay: 1.7s; }
@keyframes cover-off-puzyr {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: .9; }
  75% { opacity: .7; }
  100% { transform: translateY(-14px); opacity: 0; }
}
.cover-off__title { margin: 0; text-wrap: balance; }
.cover-off__text { margin: var(--s3) 0 0; font: 400 15px/1.5 var(--font-ui); color: var(--text-2); text-wrap: pretty; }
/* подсказка мельче, в одну строку, подчёркнута и ведёт в «Основной» */
.cover-off__hint {
  display: block;
  width: 100%;
  margin: var(--s3) 0 0;
  padding: 0;
  border: 0;
  background: none;
  font: 400 13px/1.4 var(--font-ui);
  color: var(--text-2);
  text-align: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cover-off__hint:hover { color: var(--text-1); }
/* две кнопки одной ширины: ровный край, как у текста */
.cover-off .modal__foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s6); }
@media (max-width: 900px) {
  .modal.cover-off { width: 100%; }
  .cover-off .modal__foot { grid-template-columns: minmax(0, 1fr); }
  .cover-off .modal__foot [data-f="manual"] { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .cover-off__pulse, .cover-off__bubble { animation: none; }
}

/* ------------------------------------------------------------
   ОКНА ОПЛАТЫ (30.10.2026) — как в прежней студии, в оформлении новой.
   views-money.js продать() и скачиваниеПослеОплаты().
   ------------------------------------------------------------ */
.modal.pw { width: min(480px, calc(100vw - 32px)); }
.modal.pw-dl { width: min(420px, calc(100vw - 32px)); }
/* Крестик в углу поверх шапки: он выше заголовка и раздувал шапку, под
   заголовком оставалась пустота (владелец 30.10.2026). Текст — сразу под
   заголовком. */
.pw .modal__head, .pw-dl .modal__head { padding-right: 36px; }
.pw .modal__close, .pw-dl .modal__close { position: absolute; top: 18px; right: 18px; margin: 0; }
.pw .modal__body, .pw-dl .modal__body { margin-top: var(--s2); }
.pw__text { margin: 0; font: 400 14.5px/1.55 var(--font-ui); color: var(--text-2); text-wrap: pretty; }
.pw__text b { color: var(--text-1); font-weight: 600; }
.pw__packs { display: grid; gap: var(--s2); margin-top: var(--s5); }
.pw__pack {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--s3); align-items: start;
  width: 100%; padding: 14px var(--s4);
  border: 1px solid var(--border-1); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text-1);
  text-align: left; cursor: pointer;
  transition: background var(--t-hover), border-color var(--t-hover), box-shadow var(--t-hover);
}
.pw__pack:hover { background: var(--surface-hover); }
.pw__pack:focus-visible { outline: none; box-shadow: var(--ring); }
.pw__pack[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(253, 66, 156, .12); }
.pw__dot {
  width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  border: 2px solid var(--border-1); display: grid; place-items: center;
}
.pw__pack[aria-checked="true"] .pw__dot { border-color: var(--accent); }
.pw__pack[aria-checked="true"] .pw__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--grad); }
.pw__main { display: grid; gap: 2px; min-width: 0; }
.pw__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.pw__name { display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font: 700 16px/1.3 var(--font-ui); }
.pw__badge {
  font: 700 11px/1 var(--font-ui); font-style: normal; color: #fff;
  padding: 4px 8px; border-radius: var(--r-full); background: var(--grad);
}
.pw__price { font: 700 16px/1.3 var(--font-ui); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw__sub { font: 400 12.5px/1.4 var(--font-ui); color: var(--text-3); font-variant-numeric: tabular-nums; }
.pw__perk {
  margin-top: 6px; font: 600 12.5px/1.35 var(--font-ui);
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pw__err {
  margin: var(--s3) 0 0; padding: 10px var(--s3); border-radius: var(--r-md);
  background: rgba(255, 107, 94, .1); color: var(--error); font: 400 13px/1.4 var(--font-ui);
}
.pw .modal__foot { flex-direction: column; align-items: stretch; gap: var(--s2); margin-top: var(--s5); }
.pw__go { height: 48px; }
.pw__all {
  align-self: center; padding: 6px 8px; border: 0; background: none; cursor: pointer;
  font: 600 13px/1.3 var(--font-ui); color: var(--text-3);
}
.pw__all:hover { color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; }
.pw-dl .modal__foot .btn { flex: 1; }
@media (max-width: 900px) {
  .modal.pw, .modal.pw-dl { width: 100%; }
}

/* ------------------------------------------------------------
   ПЛЕЕР НА ТЕЛЕФОНЕ РОВНО (владелец 30.10.2026: «сердечко, плей,
   перелистнуть и стоп стоят неровно»). Значки стояли выше обложки и
   названия: под ними была строка времени и тянула их вверх, а пауза была
   крупнее соседей. Теперь значки по центру полосы, на одной линии с
   обложкой, пауза того же размера, что и соседи (чуть крупнее значок),
   а время — рядом с исполнителем: «Автор Luvi · 0:12 / 3:16».
   ------------------------------------------------------------ */
.player__subrow { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.player__subrow .player__sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player__mtime { display: none; }
@media (max-width: 900px) {
  .player .player__right { display: none; }
  .player__mtime { display: inline; flex: none; font: 600 11px/1.3 var(--font-ui); color: var(--text-3); }
  .player__mtime::before { content: "· "; }
  .player__controls { align-self: center; margin-top: 0; gap: 2px; }
  .player__play { width: 40px; height: 40px; }
  .player__play svg { width: 24px; height: 24px; }
}

/* ------------------------------------------------------------
   «Сохранить голос» (31.10.2026, rows.js сохранитьГолос)
   ------------------------------------------------------------ */
.modal.svoice { width: min(480px, calc(100vw - 32px)); }
.svoice .modal__body { display: grid; gap: var(--s4); }
.svoice__pick { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--surface-2); }
.svoice__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: var(--s3); font: 600 13px/1.3 var(--font-ui); color: var(--text-3); }
.svoice__row input[type="range"] { width: 100%; accent-color: var(--accent); }
.svoice__times { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s1); font: 600 13px/1 var(--font-ui); color: var(--text-3); }
.svoice__times label { display: inline-flex; align-items: center; gap: 6px; }
.svoice__times .field__input { width: 72px; height: 36px; padding: 0 10px; text-align: center; font-variant-numeric: tabular-nums; }
.svoice__len { color: var(--text-1); }
.svoice__len.is-bad { color: var(--error); }
.svoice__play { margin-left: auto; }
.svoice .modal__foot .btn { flex: 1; }
@media (max-width: 900px) {
  .modal.svoice { width: 100%; }
  .svoice__times .field__input { font-size: calc(16px / var(--zoom, 1)); }
}

/* «Показать ещё» в конце библиотеки (31.10.2026) */
/* в виде плиткой — во всю ширину сетки, а не в одну ячейку */
.lib-more { display: flex; margin: 16px auto 8px; min-width: 200px; justify-content: center; grid-column: 1 / -1; justify-self: center; }

/* ── Кабинет по варианту А (владелец 31.10.2026) ─────────────────────
   Телефон: одна колонка. Компьютер: слева карточка тарифа и тарифы,
   справа голоса и история, внизу друзья, помощь и профиль. */
.acc.kab { max-width: 1180px; display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
.kab__main, .kab__side, .kab__bottom { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.kab .acc__sec, .kab .plan-card, .kab .acc-plans { margin: 0; }
@media (min-width: 1100px) {
  .acc.kab { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .kab__main, .kab__side { gap: var(--s6); }
  .kab__bottom { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s6); align-items: start; }
}
.kab-card { display: flex; flex-direction: column; gap: var(--s4); border-radius: 22px; padding: var(--s5); }
.kab-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.kab-pill { flex: none; font: 700 11px/1 var(--font-ui); padding: 6px 9px; border-radius: var(--r-full); background: rgba(255, 255, 255, .2); color: #fff; white-space: nowrap; }
.kab-pill.is-dark { background: rgba(12, 11, 16, .32); }
.kab-card__songs { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font: 400 15px/1.3 var(--font-ui); color: rgba(255, 255, 255, .9); }
.kab-card__songs b { font: 700 40px/1 var(--font-head); color: #fff; letter-spacing: -.02em; }
.kab-card__zero { margin: 0; font: 700 24px/1.2 var(--font-head); color: #fff; }
.kab-meter { display: flex; gap: 3px; height: 20px; }
.kab-meter i { flex: 1; border-radius: 2px; background: rgba(255, 255, 255, .28); }
.kab-meter i.on { background: #fff; }
.kab-card__sm { margin: 0; font: 400 13px/1.4 var(--font-ui); color: rgba(255, 255, 255, .88); }
/* Остаток и «не сгорают» жирно (вариант Б, владелец 06.11.2026) */
.kab-card__left { margin: 0; font: 700 17px/1.35 var(--font-head); color: #fff; }
.kab-card__forever { margin: 0; font: 400 15px/1.4 var(--font-ui); color: rgba(255, 255, 255, .92); }
.kab-card__forever b { font-weight: 700; color: #fff; }
.kab-strip { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: 12px 14px; border-radius: 14px; background: rgba(12, 11, 16, .18); font: 400 14px/1.3 var(--font-ui); color: rgba(255, 255, 255, .9); }
.kab-strip b { font: 700 15px/1.2 var(--font-ui); color: #fff; text-align: right; }
.kab-acts { margin-top: 0; }
.kab-card .kab-btn { background: #fff; color: #16141B; border: 0; flex: 1 1 auto; }
.kab-card .kab-btn--o { background: rgba(255, 255, 255, .16); color: #fff; flex: 0 1 auto; }
@media (hover: hover) {
  .kab-card .kab-btn:hover { background: #F1EEF5; }
  .kab-card .kab-btn--o:hover { background: rgba(255, 255, 255, .24); }
}
.kab-cancel { align-self: flex-start; margin-top: var(--s3); color: var(--text-2); }
.kab-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.kab-h { margin: 0; font: 600 19px/1.2 var(--font-head); color: var(--text-1); }
.kab-n { font: 400 13px/1 var(--font-ui); color: var(--text-3); }
.kab-link { font: 700 13px/1.2 var(--font-ui); color: var(--accent); text-decoration: none; }
.kab-muted { margin: 0; font: 400 14px/1.45 var(--font-ui); color: var(--text-3); }

.kab-vlist { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.kab-voice { flex: none; width: 210px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); }
.kab-voice__ava { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; overflow: hidden; flex: none; }
.kab-voice__ava img { width: 100%; height: 100%; object-fit: cover; }
.kab-voice.is-dead .kab-voice__ava { background: var(--surface-3); color: var(--text-3); }
.kab-voice__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kab-voice__t b { font: 600 15px/1.3 var(--font-ui); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kab-voice__t span { font: 400 13px/1.35 var(--font-ui); color: var(--text-3); }
.kab-voice.is-dead .kab-voice__t span { color: var(--warning); }
.kab-voice__acts { display: flex; align-items: center; gap: 6px; margin-top: auto; }
.kab-voice__acts .btn { flex: 1; }
.kab-voice__more { flex: none; }
.kab-vempty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.kab-vempty p { margin: 0; font: 400 14px/1.45 var(--font-ui); color: var(--text-2); }
@media (min-width: 1100px) {
  .kab-vlist { flex-direction: column; overflow: visible; gap: 0; }
  .kab-voice { width: auto; flex-direction: row; align-items: center; gap: 12px; padding: 12px 0; background: none; border-radius: 0; }
  .kab-voice + .kab-voice { box-shadow: inset 0 1px 0 var(--border-2); }
  .kab-voice__t { flex: 1; }
  .kab-voice__acts { margin-top: 0; }
  .kab-voice__acts .btn { flex: none; }
}

.kab-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; min-height: 56px; box-sizing: border-box; color: var(--text-1); text-decoration: none; }
.kab-row + .kab-row { box-shadow: inset 0 1px 0 var(--border-2); }
.kab-row__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kab-row__t b { font: 600 15px/1.3 var(--font-ui); }
.kab-row__t span { font: 400 13px/1.35 var(--font-ui); color: var(--text-3); }
.kab-row__ico { flex: none; display: grid; place-items: center; width: 24px; color: var(--text-2); }
.kab-row__go { flex: none; display: grid; place-items: center; color: var(--text-3); }
.kab-row__go .luvi-ico { transform: rotate(-90deg); }
.kab-list > .kicker, .kab-hist__phone > .kicker { display: block; margin-bottom: var(--s1); }
.kab-hist__phone { display: none; }
@media (max-width: 1099px) {
  .kab-hist .kab-sec-head, .kab-hist__rows { display: none; }
  .kab-hist__phone { display: block; }
}

.kab-mv { display: flex; align-items: center; gap: 12px; padding: 12px 0; min-height: 56px; box-sizing: border-box; }
.kab-mv + .kab-mv { box-shadow: inset 0 1px 0 var(--border-2); }
.kab-mv__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kab-mv__t b { font: 600 15px/1.3 var(--font-ui); color: var(--text-1); overflow-wrap: anywhere; }
.kab-mv__t span { font: 400 13px/1.35 var(--font-ui); color: var(--text-3); }
.kab-mv__a { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.kab-mv__a b { font: 700 16px/1 var(--font-head); color: var(--text-2); }
.kab-mv__a span { font: 400 12px/1 var(--font-ui); color: var(--text-3); }
.kab-mv__a b.is-plus, .kab-sum b.is-plus { color: #6FE0A6; }
.kab-day { font: 700 12px/1 var(--font-ui); color: var(--text-3); padding: var(--s5) 0 var(--s2); }
.kab-day:first-child { padding-top: 0; }

.kab-prof .row:last-of-type { margin-bottom: 0; }
.kab-out { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); padding-top: var(--s4); box-shadow: inset 0 1px 0 var(--border-2); }
.kab-del { background: transparent; border: 0; color: var(--error); }

/* История кредитов и платежей, #/profile/history */
.kab-back { display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; margin-bottom: var(--s1); color: var(--text-2); font: 600 14px/1 var(--font-ui); text-decoration: none; }
.kab-back .luvi-ico { transform: rotate(90deg); }
.kab-history { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); max-width: 1100px; }
.kab-history__tabs { justify-self: start; }
.kab-history__main, .kab-history__side { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.kab-history .acc__sec { margin: 0; }
.kab-history.is-mv .kab-history__side, .kab-history.is-pay .kab-history__main { display: none; }
@media (min-width: 1100px) {
  .kab-history { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s6); align-items: start; }
  .kab-history__tabs { display: none; }
  .kab-history.is-mv .kab-history__side, .kab-history.is-pay .kab-history__main { display: flex; }
}
.kab-sum__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: var(--s3) 0; }
.kab-sum__nums div { display: flex; flex-direction: column; gap: 4px; }
.kab-sum__nums span { font: 400 12px/1 var(--font-ui); color: var(--text-3); }
.kab-sum__nums b { font: 700 22px/1 var(--font-head); color: var(--text-1); }
.kab-more { align-self: center; min-width: 200px; margin-top: var(--s2); }
.kab-pays__note { margin-top: var(--s3); font-size: 13px; }

/* Смена почты (31.10.2026): окно в два шага */
/* Отступы по одной шкале (владелец 31.10.2026: «правила отступов»):
   снаружи 24 сверху и снизу; внутри меньше, чем снаружи — заголовок →
   поле 18, поле → подсказка 8, подсказка → кнопки 18. Крестик вынесен из
   потока, чтобы не раздувать шапку. */
.drawer.mail-change .drawer__head { display: block; padding: 24px 56px 0 20px; min-height: 0; border-bottom: 0; }
.drawer.mail-change .drawer__head .h2 { margin: 0; font-size: 20px; line-height: 1.2; text-wrap: balance; }
.drawer.mail-change .dr-close { position: absolute; top: 12px; right: 10px; margin: 0; }
.drawer.mail-change .drawer__body { flex: none; padding: 18px 20px 0; }
.drawer.mail-change .field { margin: 0; }
.drawer.mail-change .drawer__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: 18px 20px 24px; border-top: 0; }
.drawer.mail-change .drawer__foot [hidden] { display: none; }
.drawer.mail-change .mail-alt { padding: 0 8px; font-size: 13px; color: var(--text-2); }
.drawer.mail-change .drawer__foot .btn--primary { padding: 0 18px; }
.mail-change .mail-note { margin: 8px 0 0; font: 400 13px/1.45 var(--font-ui); color: var(--text-3); }
.mail-change .mail-sent { margin: 0; font: 400 15px/1.5 var(--font-ui); color: var(--text-1); }
.mail-change .mail-to { overflow-wrap: anywhere; }
/* На телефоне — шторка по содержимому, «ручка» входит в те же 24 сверху.
   Пока пишут почту, шторка стоит на клавиатуре без «ручки» («Окна на
   телефоне» ниже), и сверху остаются обычные 24. */
@media (max-width: 900px) {
  .drawer.mail-change { height: auto; }
  .drawer.mail-change:not(.kb-up)::before { margin-top: 6px; }
  .drawer.mail-change:not(.kb-up) .drawer__head { padding-top: 14px; }
  .drawer.mail-change:not(.kb-up) .dr-close { top: 14px; }
}
@media (min-width: 901px) { .drawer.mail-change { width: min(440px, calc(100vw - 48px)); } }

/* ============================================================
   ОКНА НА ТЕЛЕФОНЕ (владелец 31.10.2026, снимки с iPhone)
   • Окна .modal («Скачать», «В плейлист», окна оплаты) стояли шторкой
     слева внизу и уже экрана: ширина 100% у прижатого окна в Safari
     считается без учёта зума страницы. Теперь — карточка по центру,
     растянута краями (края от зума не зависят), середина по --vh.
   • Окно с полем ввода («Переименовать», «Новый плейлист», имя, почта,
     обложка) закрывала клавиатура: iPhone и Chrome на Android страницу не
     сжимают, а закрывают её низ. Теперь, пока клавиатура открыта, окно
     стоит нижним краем на ней: шторка вплотную, карточка с зазором 8.
     Где верх клавиатуры, считает ui.js (класс kb-up, --kb-bottom,
     --kb-max — в пикселях страницы, уже с поправкой на зум). Середину
     карточки держим через bottom, чтобы к клавиатуре она ехала плавно.
   • Окно, открытое из окна («Новый плейлист» из «В плейлист»), было
     ПОД ним: у шторки слой ниже, чем у окна. Теперь у окон, шторок и
     затемнения один слой, и кто открыт позже — тот выше; нижнее окно
     уходит под затемнение нового и не нажимается, а пока в верхнем
     пишут — прячется совсем (kb-under), чтобы над клавиатурой не было
     двух окон внахлёст.
   ============================================================ */
@media (max-width: 900px) {
  .backdrop, .drawer, .modal { z-index: var(--z-modal); }
  /* body … [role] — сильнее правил ширины отдельных окон (.modal.plpick,
     .modal.pw, .modal.vs …): иначе их ширина сдвигала окно влево */
  body .modal[role="dialog"] {
    left: 12px; right: 12px; width: auto; min-width: 0;
    top: auto; bottom: calc(var(--vh) * .5);
    transform: translateY(50%);
    max-height: calc(var(--vh) * .84);
    border-radius: var(--r-lg);
    animation: modal-in-phone var(--t-drawer) var(--ease-drawer);
    transition: bottom var(--t-drawer) var(--ease-drawer), transform var(--t-drawer) var(--ease-drawer);
  }
  @keyframes modal-in-phone { from { opacity: 0; transform: translateY(53%) scale(.98); } }
  .drawer { transition: bottom var(--t-drawer) var(--ease-drawer); }
  body .modal[role="dialog"].kb-up, .drawer.kb-up, dialog.confirm.kb-up {
    bottom: var(--kb-bottom);
    max-height: calc(var(--kb-max) - env(safe-area-inset-top, 0px));
  }
  body .modal[role="dialog"].kb-up { transform: translateY(0); }
  /* полоса iPhone внизу закрыта клавиатурой — запас под неё не нужен;
     «ручку» тоже убираем: над клавиатурой на маленьком iPhone каждый
     пиксель на счету, а тянуть шторку, пока пишут, некуда */
  .drawer.kb-up { padding-bottom: 0; }
  .drawer.kb-up::before { display: none; }
  .drawer.kb-up .drawer__body { flex: 0 1 auto; min-height: 0; }
  dialog.confirm.kb-up { top: auto; margin-bottom: 0; overflow: auto; }
  .kb-under { opacity: 0; pointer-events: none; transition: opacity var(--t-pop); }
}

/* ============================================================
   СТУДИЯ НА ПОСАДОЧНЫХ (INT-80, 04.11.2026)
   /studio, /music, /song-from-text, /cover у гостя: та же студия, внизу
   меню вход вместо аккаунта, справа примеры вместо «Моих треков», под
   студией текст страницы (его стили — /v3/lp/lp.css). Логика —
   posadochnaya.js.
   ============================================================ */

/* меню гостя: «Начать бесплатно» и «Войти» вместо аккаунта и «Пополнить» */
.lp-auth { display: grid; gap: var(--s2); padding: var(--s3) var(--s4) var(--s4); }
.lp-auth .btn { width: 100%; }
body[data-lp-gost="1"] .account { display: none; }
/* в свёрнутом меню подписи не помещаются: вход — из развёрнутого */
body[data-side="mini"] .lp-auth { display: none; }

/* примеры справа: строки «Моих треков» без скачивания и меню */
.lp-primery__sub { margin: 0; padding: 0 var(--s6) var(--s3); font: 400 12px/1.4 var(--font-ui); color: var(--text-3); }
.lp-primery__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--s6) var(--s3); }
.lp-primery__chips button {
  height: 30px; padding: 0 12px;
  border: 1px solid var(--border-1); border-radius: var(--r-full);
  background: transparent; color: var(--text-2);
  font: 600 12px/1 var(--font-ui);
}
.lp-primery__chips button[aria-pressed="true"] { background: var(--surface-3); border-color: transparent; color: var(--text-1); }
.lp-ex .track__cover { position: relative; }
.lp-ex__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .35); color: #fff;
  opacity: 0; transition: opacity var(--t-hover);
}
.lp-ex__play .lp-ex__pause { display: none; }
.lp-ex.is-playing .lp-ex__play { opacity: 1; }
.lp-ex.is-playing .lp-ex__play .lp-ex__go { display: none; }
.lp-ex.is-playing .lp-ex__play .lp-ex__pause { display: block; }
@media (hover: hover) and (pointer: fine) {
  .lp-ex .track__cover:hover .lp-ex__play { opacity: 1; }
}
.lp-ex__tag {
  flex: none; height: 18px; padding: 0 6px;
  border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent);
  font: 700 9px/18px var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
}
.lp-ex__desc { margin-top: 2px; font: 400 12px/1.35 var(--font-ui); color: var(--text-3); }
.lp-ex__like {
  height: 30px; padding: 0 12px;
  border: 1px solid var(--border-1); border-radius: var(--r-full);
  background: transparent; color: var(--text-1);
  font: 600 12px/1 var(--font-ui); white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .lp-ex__like:hover { background: var(--surface-2); }
}

/* примеров у страницы нет (каверы ещё не созданы) — форма одна */
.studio-wrap.is-solo { grid-template-columns: minmax(0, var(--form-w, 660px)); }
.studio-wrap.is-solo .split, .studio-wrap.is-solo .mine-col { display: none; }

/* текст страницы под студией — его поля и полосы в /v3/lp/lp-svoi.css */

/* телефон: студия → примеры → текст (ТЗ, раздел 9); вкладок
   «Создать / Мои треки» у гостя нет — примеры сразу под формой */
@media (max-width: 900px) {
  body[data-lp-gost="1"] .studio-tabs { display: none; }
  body[data-lp-gost="1"][data-studio-tab="form"] .mine.lp-primery { display: flex; }
  body[data-lp-gost="1"] .mine-col .lp-primery { margin-top: var(--s8); }
  body[data-lp-gost="1"] .lp-primery .mine__head .h2 { display: block; }
}

/* «Звуки» первым экраном /beat и /sounds (этап 2): справа примеры в той
   же колонке, что у студии; вкладок «Создать / Мои звуки» у гостя нет —
   на телефоне примеры сразу под формой. Примеров нет — форма одна. */
.snd__primery.mine-col { padding-left: 0; }
/* Поля как у студии на посадочных: текст под формой выводит полосы во всю
   ширину по полям студии (lp-svoi.css, 32 слева и 40 справа), а у «Звуков»
   поля 64 и 32 — на ПК текст вылезал вправо на 8 px и давал прокрутку вбок. */
@media (min-width: 901px) {
  body[data-lp-gost="1"][data-screen="sounds"] .content { padding-left: var(--s8); padding-right: 40px; }
}
.snd.is-solo { grid-template-columns: minmax(0, 560px); }
.snd.is-solo .snd__primery { display: none; }
body[data-lp-gost="1"] .snd-tabs { display: none; }
@media (max-width: 900px) {
  body[data-lp-gost="1"] .page-head .h1 { font-size: 24px; }
}

/* окно входа поверх страницы (как окно входа сайта, AuthModal) */
.modal.lp-vhod { width: min(440px, calc(100vw - 32px)); }
.lp-vhod .modal__head { margin-bottom: 0; }
.lp-vhod__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-vhod__box { display: grid; gap: var(--s3); text-align: center; }
/* После входа с посадочной: «Мы сохранили ваш запрос…» над «Создать трек»
   (Катя 06.11.2026) — пока человек сам её не нажмёт. */
.lp-sohranili {
  margin: 0 0 var(--s3); padding: 12px 16px;
  border-radius: var(--r-md); border: 1px solid rgba(253, 66, 156, .35);
  /* плотный фон: на телефоне блок кнопки прилипает к низу поверх формы,
     сквозь прозрачный просвечивали поля под ним */
  background: #241620;
  font: 600 14px/1.45 var(--font-ui); color: var(--text-1); text-align: center; text-wrap: balance;
}
@media (max-width: 900px) { .lp-sohranili { margin-bottom: var(--s2); padding: 10px 14px; font-size: 15px; } }
.lp-vhod__art { width: 64px; height: 64px; margin: 0 auto; }
/* заголовок крупно под сердцем, переключатель — под ним (владелец 06.11.2026) */
.lp-vhod__h1 { margin: 0; font: 800 26px/1.15 var(--font-head); letter-spacing: -.02em; color: var(--text-1); text-wrap: balance; }
.lp-vhod__seg { display: flex; width: 100%; margin-top: var(--s2); }
.lp-vhod__seg .seg__item { flex: 1; }
.lp-vhod__lead, .lp-vhod__text { display: grid; gap: 2px; margin: 0; font: 400 14px/1.45 var(--font-ui); color: var(--text-2); }
.lp-vhod__lead { display: block; font-size: 16px; text-wrap: balance; }
.lp-vhod__lead b { color: var(--text-1); }
/* Телефон (владелец 06.11.2026): вход — шторка почти во всю высоту, а не
   окно по центру с прокруткой внутри; так вход открывают на телефонах.
   Помещается — содержимое посередине, нет — листается вся шторка. Пока
   пишут почту, общие правила «Окна на телефоне» (kb-up, ui.js) ставят её
   на клавиатуру. Всё крупно, кнопки и поля под палец, поле 16 px — iOS
   не приближает страницу. */
@media (max-width: 900px) {
  body .modal[role="dialog"].lp-vhod {
    left: 0; right: 0; top: auto; bottom: 0;
    transform: none;
    height: calc(var(--vh) - 10px - env(safe-area-inset-top, 0px));
    max-height: none;
    padding: var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    animation: lp-vhod-vverh var(--t-drawer) var(--ease-drawer);
  }
  @keyframes lp-vhod-vverh { from { opacity: 0; transform: translateY(32px); } }
  body .modal[role="dialog"].lp-vhod.kb-up {
    bottom: var(--kb-bottom); height: auto;
    max-height: calc(var(--kb-max) - env(safe-area-inset-top, 0px));
  }
  .lp-vhod .modal__body { display: flex; flex-direction: column; margin-top: 0; }
  .lp-vhod__box { margin-block: auto; }
  .lp-vhod__art { width: 56px; height: 56px; }
  .lp-vhod__h1 { font-size: 24px; }
  .lp-vhod__seg .seg__item, .lp-vhod__form .btn, .lp-vhod__way { min-height: 50px; }
  .lp-vhod__form input { min-height: 50px; font-size: 16px; }
  .lp-vhod__or { font-size: 13px; }
  .lp-vhod__perks { font-size: 14px; gap: 8px; }
  .lp-vhod__legal { font-size: 12px; }
}
.lp-vhod__form { display: grid; gap: var(--s3); text-align: left; }
.lp-vhod__form .btn { width: 100%; }
.lp-vhod__small { justify-self: center; font-size: 13px; color: var(--text-2); text-decoration: underline; }
.lp-vhod__err { margin: 0; font-size: 13px; line-height: 1.4; color: var(--error); }
.lp-vhod__or { margin-top: var(--s2); font-size: 12px; color: var(--text-3); }
.lp-vhod__oauth { display: grid; gap: var(--s2); }
.lp-vhod__way { width: 100%; }
.lp-vhod__way-in { display: inline-flex; align-items: center; gap: 10px; width: 200px; text-align: left; }
.lp-vhod__way img { flex: none; border-radius: 4px; background: #fff; object-fit: contain; }
.lp-vhod__letter {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font: 700 10px/1 var(--font-ui);
}
.lp-vhod__perks { list-style: none; display: grid; gap: 6px; margin: var(--s2) 0 0; padding: 0; text-align: left; font-size: 13px; color: var(--text-2); }
.lp-vhod__perks li { display: flex; align-items: center; gap: var(--s2); }
.lp-vhod__perks svg { flex: none; color: var(--accent); }
.lp-vhod__legal { margin: 0; font-size: 11px; line-height: 1.45; color: var(--text-3); }
.lp-vhod__legal a { text-decoration: underline; }
.lp-vhod__h { margin: 0; }
.lp-vhod__mail { margin: 0; font-weight: 700; word-break: break-all; }

/* Примеры гостя на телефоне (INT-80): в масштабе студии 0.9 подписи выходили
   по 11 px, а кнопки по 27 — по чек-листу сайтов подпись не мельче 14,
   цель нажатия не меньше 44 (размеры здесь на 1/0.9 больше нужных). */
@media (max-width: 900px) {
  .lp-primery .track__t { font-size: 17px; }
  .lp-primery .track__sub, .lp-primery .lp-ex__desc, .lp-primery__sub { font-size: 15.5px; line-height: 1.4; }
  /* Строка примера на телефоне (владелец 06.11.2026): обложка крупнее и
     квадратная, на ней всегда круг с треугольником — видно, что нажатие
     включает музыку (при игре — пауза); «Создать похожее» поменьше и
     аккуратнее, под описанием. На всех посадочных со студией. */
  .lp-primery .mine__list.is-comfy .track {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas: "cover main" "cover acts";
    gap: 10px 16px; min-height: 112px;
  }
  .lp-primery .mine__list.is-comfy .track__cover { width: 112px; height: 112px; }
  .lp-primery .mine__list.is-comfy .track__actions { justify-self: start; }
  .lp-primery .lp-ex__play { opacity: 1; background: rgba(0, 0, 0, .18); }
  .lp-primery .lp-ex__play svg {
    /* content-box: при общем border-box отступы съедали значок до нуля */
    box-sizing: content-box; width: 22px; height: 22px; padding: 12px; border-radius: 50%;
    background: rgba(14, 12, 18, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  .lp-primery .lp-ex.is-playing .lp-ex__play svg { background: var(--accent); }
  /* название целиком, хоть в две строки: на 320 px «Раскаты …» обрезалось */
  .lp-primery .track__title { flex-wrap: wrap; row-gap: 2px; }
  .lp-primery .track__t { white-space: normal; overflow: visible; text-overflow: clip; }
  .lp-primery .lp-ex__like { height: 40px; padding: 0 14px; font-size: 14.5px; border-color: var(--border-1); }
  /* самые узкие телефоны (320 px, первый iPhone SE): обложка чуть меньше,
     чтобы «Создать похожее» не вылезала за край */
  @media (max-width: 359px) {
    .lp-primery .mine__list.is-comfy .track { grid-template-columns: 96px minmax(0, 1fr); min-height: 96px; }
    .lp-primery .mine__list.is-comfy .track__cover { width: 96px; height: 96px; }
    .lp-primery .lp-ex__like { padding: 0 12px; font-size: 14px; }
  }
  .lp-primery__chips { gap: 8px; }
  .lp-primery__chips button { height: 49px; padding: 0 18px; font-size: 15.5px; }
}