:root{
  --bg:#0d0d10;--bg2:#141419;--card:#1a1a21;--card2:#22222b;--line:#2a2a33;--line2:#34343f;
  --gold:#e1162b;--gold2:#ff3a4d;--au:#cdb36a;--txt:#f3f1ec;--mut:#9c9ca5;--mut2:#6f6f78;--ok:#37c978;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;--lw:404px;--ph:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg);color:var(--txt);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:800;letter-spacing:-.02em}
button{font-family:inherit}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px}

/* ==== shell: left form / right feed / bottom player ==== */
.mgr{display:flex;min-height:100vh;min-height:100dvh;padding-bottom:var(--ph)}
.lpanel{width:var(--lw);flex-shrink:0;background:var(--bg2);border-right:1px solid var(--line);position:fixed;top:0;bottom:0;left:0;overflow-y:auto;padding:18px 18px calc(var(--ph) + 22px);z-index:10}
.feed{flex:1;min-width:0;margin-left:var(--lw);padding:22px 26px 30px}

/* logo */
.logo{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px}
.logo img{height:32px;width:auto;display:block}
.logo .tag{background:linear-gradient(135deg,var(--au),#e7cf94);color:#1a1400;font-size:11px;font-weight:800;padding:2px 8px;border-radius:var(--r-pill);letter-spacing:.04em}

/* form fields */
.fld{margin-bottom:16px}
.flab{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut);font-weight:600;margin-bottom:8px}
.flab .r{margin-left:auto;font-size:11.5px;color:var(--mut2);font-weight:600;cursor:pointer}
.flab .r:hover{color:var(--txt)}
/* «Все жанры» рядом с рядом трендов: на ПК из 20 стилей в панели (367px) видно ТРИ,
   остальные молча уезжают в горизонтальный скролл, а кнопка к шторке жанров была
   только в мобильном доке (на ПК он display:none). */
.flab-all{margin-left:auto;display:inline-flex;align-items:center;gap:5px;background:transparent;
  border:1px solid var(--line);color:var(--mut);border-radius:var(--r-pill);padding:4px 10px;
  font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;transition:.15s}
.flab-all:hover{border-color:var(--gold);color:var(--txt)}
.flab-all svg{width:12px;height:12px}

/* ── Вход в жанры вместо карусели ───────────────────────────────────────────── */
.gopen{width:100%;display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;cursor:pointer;font-family:inherit;text-align:left;transition:.15s;color:var(--txt)}
.gopen:hover{border-color:var(--gold)}
.gopen > svg:first-child{width:19px;height:19px;color:var(--au,#cdb36a);flex-shrink:0}
.gopen > svg:last-child{width:14px;height:14px;color:var(--mut);margin-left:auto;flex-shrink:0}
.gopen span{display:flex;flex-direction:column;gap:2px;min-width:0}
.gopen b{font-size:13.5px;font-weight:700}
.gopen small{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gpicked{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.gpicked span{display:inline-flex;align-items:center;gap:6px;background:rgba(225,22,43,.12);
  border:1px solid var(--gold);border-radius:var(--r-pill);padding:5px 11px;font-size:12px;font-weight:600;color:#fff}

/* ── Шторка «Жанры и поджанры»: тренды сверху, ниже семья → поджанры ─────────── */
.gsbody{display:flex;flex-direction:column;gap:14px;min-height:0}
.gstrend-h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--mut);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.gstrend-h svg{width:14px;height:14px;color:var(--au,#cdb36a)}
.gstrend-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.gsi.trend{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  min-height:52px;justify-content:center;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px 13px;cursor:pointer;
  font-family:inherit;color:var(--txt);transition:.15s;white-space:nowrap}
.gsi.trend:hover{border-color:var(--gold)}
.gsi.trend b{font-size:13px;font-weight:700}
.gsi.trend small{font-size:10.5px;color:var(--mut);font-weight:600}
.gsi.trend.hot{border-color:rgba(205,179,106,.45)}

/* два столбца: слева семьи, справа поджанры выбранной */
.gscols{display:grid;grid-template-columns:210px minmax(0,1fr);gap:14px;min-height:0;flex:1}
.gsfams{display:flex;flex-direction:column;gap:4px;overflow-y:auto;max-height:46vh;max-height:46dvh;padding-right:4px}
.gsfam{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:1px solid transparent;
  border-radius:10px;padding:9px 11px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;
  color:var(--mut);text-align:left;transition:.12s}
.gsfam:hover{background:var(--card2);color:var(--txt)}
.gsfam.on{background:rgba(225,22,43,.12);border-color:var(--gold);color:#fff}
.gsfam svg{width:16px;height:16px;flex-shrink:0}
.gsfam span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsfam i{font-style:normal;font-size:11px;font-weight:700;color:var(--mut2,#6b6b78)}
.gssubs{overflow-y:auto;max-height:46vh;max-height:46dvh}
/* align-items:flex-start обязателен: по умолчанию flex РАСТЯГИВАЕТ плитки до высоты самой
   высокой в строке, и соседи «Джерси-клаб» (иконка+BPM) вытягивались с 38 до 57px — ряд
   выглядел рваным, хотя у самих плиток высота задана. */
.gssub{display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start;align-items:flex-start}
/* ⚠️ display:flex выше перебивает атрибут hidden (у него всего лишь display:none в UA-стилях),
   из-за чего показывались поджанры ВСЕХ семей разом. Гасим явно. */
.gssub[hidden]{display:none}
/* Плитка поджанра. РОВНЫЙ ПРЯМОУГОЛЬНИК, а не пилюля: у части поджанров есть подпись BPM,
   у части нет (темп ставим только подтверждённый), и при радиусе 999px соседние плитки
   разной высоты читались как овалы вперемешку с капсулами — ряд выглядел рваным.
   Фиксируем высоту и держим содержимое в ОДНУ строку. */
/* ⚠️ базовый .gsi (строка выше) — это КОЛОНКА (flex-direction:column) для старых плиток
   сетки: из-за неё название и BPM вставали друг под друга, и плитка вырастала до 57px.
   Поэтому направление и перенос переопределяем явно. */
.gsi.sub{display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:7px;min-height:38px;padding:0 13px;
  background:var(--bg);border:1px solid var(--line);border-radius:11px;white-space:nowrap;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--txt);cursor:pointer;transition:.15s}
.gsi.sub:hover{border-color:var(--gold);background:rgba(225,22,43,.08)}
/* темп показываем только там, где он подтверждён источником (music/_genre_bpm.php) */
.gsi.sub small{font-size:10.5px;font-weight:700;color:var(--mut2,#6b6b78);letter-spacing:.01em;
  padding-left:7px;border-left:1px solid var(--line)}
.gsi.sub .hf{display:inline-flex}
.gsi.sub .hf svg{width:12px;height:12px;color:var(--au,#cdb36a)}
.gsi.sub.hot{border-color:rgba(205,179,106,.4)}

@media(max-width:759px){
  /* На мобиле вход в жанры уже есть — вкладка «Жанры» в нижнем доке. Кнопка в панели
     оказалась вторым входом в то же самое (записка владельца 12.08), убираем её;
     чип выбранного жанра остаётся — иначе после закрытия шторки не видно, что выбрано. */
  #genresBtn2{display:none}
  /* ряд «Случайный жанр» живёт под этой кнопкой — без неё он висел бы в пустом блоке
     между «Голосом» и «Настроением». На телефоне то же действие есть в шторке жанров. */
  #randStyle{display:none}
  .gpicked{margin-top:0}
  /* на телефоне колонки не помещаются: семьи становятся лентой чипсов сверху */
  .gscols{grid-template-columns:1fr;gap:10px}
  .gsfams{flex-direction:row;overflow-x:auto;overflow-y:visible;max-height:none;gap:6px;padding-bottom:4px}
  .gsfam{width:auto;flex-shrink:0;border-color:var(--line);white-space:nowrap}
  .gsfam i{display:none}
  .gssubs{max-height:38vh;max-height:38dvh}
}
.q{width:15px;height:15px;border-radius:50%;border:1px solid var(--line2);color:var(--mut2);font-size:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:3px;gap:3px;margin-bottom:16px}
.seg button{flex:1;background:none;border:0;color:var(--mut);font-size:13px;font-weight:700;padding:8px;border-radius:9px;cursor:pointer;transition:.15s}
.seg button.on{background:var(--card2);color:var(--txt);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.ta{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 13px;color:var(--txt);font-family:inherit;font-size:14px;resize:vertical;min-height:88px;line-height:1.55}
.ta:focus,.inp:focus{outline:none;border-color:var(--gold)}
/* Подсветка поля, к которому привела кнопка «Поправить описание/текст» с карточки
   провала: без неё человек попадает в форму и не понимает, что именно чинить. */
.ta.cr-need{border-color:var(--au);box-shadow:0 0 0 3px rgba(205,179,106,.16)}
.ta-wrap{position:relative}
.cc{position:absolute;right:11px;bottom:9px;font-size:11px;color:var(--mut2)}
/* Счётчик текста песни: символы + СКОЛЬКО ЭТО МИНУТ ПЕНИЯ (символы человеку ничего не говорят,
   а решает именно объём — см. lyrwarn ниже). Под полем, а не в углу: строка длинная. */
.lyrmeta{margin-top:5px;font-size:11.5px;color:var(--mut2);text-align:right}
/* Текста больше, чем влезает в одну генерацию: Suno скомкает и выбросит куплеты (замер 06.09).
   Строка появляется только в этом случае, поэтому она заметная, но не красная-аварийная. */
.lyrwarn{margin-top:8px;padding:9px 11px;border:1px solid rgba(255,176,32,.32);border-radius:10px;
  background:rgba(255,176,32,.07);color:#f0c26a;font-size:12.5px;line-height:1.45}
.inp{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px;color:var(--txt);font-family:inherit;font-size:14px}
select.inp{cursor:pointer}
.sub{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.mini{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:var(--r-pill);padding:7px 12px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.mini:hover{border-color:var(--line2)}.mini svg{width:14px;height:14px}
.mini .nw{background:var(--gold);color:#fff;font-size:8.5px;font-weight:800;padding:1px 5px;border-radius:var(--r-pill)}

/* style chips (compact) */
.schips{display:flex;flex-wrap:wrap;gap:7px}
.sch{background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:var(--r-pill);padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.sch.on{border-color:var(--gold);background:rgba(225,22,43,.1);color:#fff}
.sch:hover:not(.on){border-color:var(--line2)}

/* chips row (duration) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:var(--r-md);padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.chip.on{border-color:var(--gold);background:rgba(225,22,43,.1);color:#fff}

/* toggle switch row */
.tgl{display:flex;align-items:center;gap:10px}
.tgl .t{font-size:13px;font-weight:600;color:var(--txt)}
.tgl .d{font-size:11.5px;color:var(--mut2)}
.sw{width:40px;height:23px;border-radius:var(--r-pill);background:var(--line2);position:relative;cursor:pointer;transition:.15s;flex-shrink:0;margin-left:auto}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.15s}
.sw.on{background:var(--gold)}.sw.on::after{left:19px}

/* create */
.create{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,var(--gold2),var(--gold) 72%,var(--au));color:#fff;border:0;border-radius:var(--r-md);padding:15px;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 10px 26px rgba(225,22,43,.32);transition:.15s;margin-top:4px}
.create:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(225,22,43,.42)}
.create:disabled{opacity:.75;transform:none;cursor:default}
.create .cost{background:rgba(0,0,0,.22);border-radius:var(--r-pill);padding:3px 9px;font-size:12.5px;font-weight:700}
.spin{width:17px;height:17px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.ghosts{display:flex;gap:8px;margin-top:12px}
.ghost{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;background:var(--card);border:1px solid var(--line);color:var(--mut);border-radius:var(--r-md);padding:10px;font-size:12.5px;font-weight:600;cursor:pointer}
.ghost:hover{color:var(--txt);border-color:var(--line2)}.ghost svg{width:14px;height:14px}

/* ==== feed ==== */
.feed-h{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.feed-h h1{font-family:'Unbounded';font-size:24px}
.feed-h .sp{flex:1}
.cred{display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-pill);padding:6px 7px 6px 14px;cursor:pointer}
.cred .n{font-weight:800;font-size:13.5px}.cred .n b{color:var(--au)}
.cred .streak{font-weight:800;font-size:13px;color:var(--au);white-space:nowrap;border-left:1px solid var(--line2);padding-left:8px}
/* .csh-cred — тот же чип уже переехавший в шапку сайта: там свободнее по высоте, глушим лишний зазор */
.csh-cred .streak{padding-left:7px}
@media(max-width:520px){.cred .streak{display:none}}   /* на телефоне в шапке и так тесно: баланс важнее серии */
.cred .plus{width:24px;height:24px;border-radius:50%;background:linear-gradient(180deg,var(--gold2),var(--gold));color:#fff;border:0;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
/* меню пользователя (аватарка → дропдаун) */
.uwrap{position:relative}
.usr{display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;padding:3px;border-radius:var(--r-pill)}
.usr .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#3a2a5a,#7a1f5a);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;overflow:hidden}
.usr .av img,.um-head .av img{width:100%;height:100%;object-fit:cover}
/* .nm — flex-колонка: раньше был инлайн-span с блочным <small> внутри, из-за чего
   строчный бокс ломался и текст съезжал относительно аватарки */
.usr .nm{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;
  font-size:13px;font-weight:600;line-height:1.1;text-align:left;min-width:0}
/* line-height:1 у обеих строк — иначе браузер резервирует место под выносные элементы,
   которых в «Free»/«DEV» нет, и текст оптически уезжает вверх при верной геометрии */
.usr .nm small{color:var(--mut);font-size:11px;font-weight:500;line-height:1}
.usr .chev{width:16px;height:16px;color:var(--mut);transition:transform .2s}
.usr[aria-expanded="true"] .chev{transform:rotate(180deg)}
.umenu{position:absolute;top:calc(100% + 8px);right:0;width:272px;background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:0 18px 50px rgba(0,0,0,.55);padding:8px;z-index:60;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
.umenu.open{opacity:1;visibility:visible;transform:none}
.um-head{display:flex;align-items:center;gap:11px;padding:9px 10px 12px}
.um-head .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#3a2a5a,#7a1f5a);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:17px;overflow:hidden}
.um-id{min-width:0}.um-id b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-mail{display:block;color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-plan{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:9px 12px;margin-bottom:6px}
.um-plan .um-pl{font-size:12.5px;font-weight:700;color:var(--mut)}
.um-plan.pro .um-pl{color:var(--au)}
.um-plan a{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--au);text-decoration:none}
.um-item{width:100%;display:flex;align-items:center;gap:11px;background:none;border:0;color:var(--txt);font-size:13.5px;font-weight:600;padding:10px 11px;border-radius:var(--r-md);cursor:pointer;text-decoration:none;font-family:inherit;text-align:left}
.um-item svg{width:18px;height:18px;color:var(--mut);flex-shrink:0}
.um-item:hover{background:var(--card2)}
.um-item .um-r{margin-left:auto;color:var(--au);font-weight:700;font-size:13px}
.um-item .um-arrow{margin-left:auto;color:var(--mut2)}
.um-item.danger{color:#ff6b6b}.um-item.danger svg{color:#ff6b6b}
.um-sep{height:1px;background:var(--line);margin:6px 4px}
/* крестик нужен только шторке на мобиле — на десктопе меню закрывается кликом мимо */
.um-x{display:none;margin-left:auto;align-self:flex-start;width:34px;height:34px;border:0;border-radius:50%;
  background:var(--card2);color:var(--mut);align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.um-x svg{width:17px;height:17px}
.um-x:hover{color:var(--txt)}
/* профиль-модалка */
.pform{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.pf{display:flex;flex-direction:column;gap:6px}
.pf>span{font-size:12px;color:var(--mut);font-weight:600}
.inp:disabled{color:var(--mut2);cursor:not-allowed}
.pf-row{display:flex;gap:9px;margin-top:4px}
.pbtn{flex:1;text-align:center;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#fff;border:0;border-radius:var(--r-md);padding:12px;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none}
.pbtn.ghost{background:var(--card2);border:1px solid var(--line2);color:var(--txt)}
.feed-tabs{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.ftab{background:var(--card);border:1px solid transparent;color:var(--mut);border-radius:var(--r-pill);padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer}
.ftab.on{background:var(--card2);color:var(--txt);border-color:var(--line2)}
/* ── ОБЩАЯ ГРОМКОСТЬ СТУДИИ (владелец 12.09) ──────────────────────────────────
   Стоит в ряду фильтров ленты, а не в плеере: нижнего плеера на ПК тут нет вовсе
   (см. #mplayer ниже), и кнопку было бы просто не найти. Кнопка — круглая, в размер
   вкладок ряда; ползунок открывается панелью ПОД ней (ряд наверху экрана, вверх
   открываться некуда). Уровень общий для всей студии и помнится между заходами. */
.mvol{position:relative;margin-left:auto;flex-shrink:0}
.mvol+.fsearch{margin-left:8px}
.mvol-b{width:36px;height:36px;display:flex;align-items:center;justify-content:center;padding:0;
  background:var(--card);border:1px solid var(--line);border-radius:50%;color:var(--mut);cursor:pointer;transition:.15s}
.mvol-b svg{width:17px;height:17px;display:block}
.mvol-b:hover{color:var(--txt);border-color:rgba(255,255,255,.28)}
.mvol.on .mvol-b{color:var(--txt);border-color:rgba(255,255,255,.28)}
.pvol-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:40;
  display:flex;align-items:center;gap:9px;padding:9px 11px;
  background:var(--card2,#17171c);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.55)}
.pvol-pop[hidden]{display:none}
.pvol-mute{width:26px;height:26px;flex-shrink:0;padding:0;border:0;border-radius:7px;cursor:pointer;
  background:transparent;color:var(--mut);display:flex;align-items:center;justify-content:center}
.pvol-mute:hover{color:var(--txt);background:rgba(255,255,255,.08)}
.pvol-mute svg{width:15px;height:15px;display:block}
.pvol-r{-webkit-appearance:none;appearance:none;width:118px;height:4px;border-radius:999px;
  background:rgba(255,255,255,.16);outline:none;cursor:pointer;margin:0}
.pvol-r::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:#fff;border:0;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.pvol-r::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:0;cursor:pointer}
.pvol-n{font-size:11.5px;font-weight:700;color:var(--mut);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
/* Уровень читается по самой кнопке, без открытия панели */
.mvol.muted .pvol-w1,.mvol.muted .pvol-w2{display:none}
.mvol.muted .pvol-x{display:block!important}
.mvol.muted .mvol-b{color:var(--gold2);border-color:rgba(245,51,63,.45)}
.mvol.low .pvol-w2{display:none}

.fsearch{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;color:var(--mut);font-size:13px;width:220px;max-width:40vw}
.fsearch input{flex:1;background:none;border:0;color:var(--txt);font-family:inherit;font-size:13px;outline:none;min-width:0}
.fsearch svg{width:15px;height:15px;flex-shrink:0}

/* ==== track card ==== */
.glist{display:flex;flex-direction:column;gap:12px}
.track{display:flex;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;transition:.15s}
.track:hover{border-color:var(--line2)}
.track.playing{border-color:rgba(225,22,43,.5)}
.tcov{position:relative;width:104px;height:104px;flex-shrink:0;border-radius:var(--r-md);overflow:hidden;background:var(--bg2)}
.tcov img{width:100%;height:100%;object-fit:cover;display:block}
.tp{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;border:0;background:rgba(0,0,0,.42);backdrop-filter:blur(4px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.tp:hover{background:var(--gold)}
.tp svg{width:20px;height:20px;margin-left:2px}
.tmain{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:9px}
.thead{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tt{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ttedit{font-size:16px;font-weight:700;font-family:inherit;color:var(--txt);background:var(--bg);border:1px solid var(--au);border-radius:8px;padding:3px 8px;max-width:100%;width:220px;outline:none}
.ver{background:var(--card2);border:1px solid var(--line2);color:var(--au);font-size:10px;font-weight:700;padding:2px 6px;border-radius:var(--r-pill)}
.ttags{display:flex;gap:6px;flex-wrap:wrap}
.ttag{font-size:11px;color:var(--mut);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 9px}
/* BPM, определённый по готовому аудио — не то, что просили у Suno, а то, что реально вышло */
.ttag.tbpm{color:var(--au);border-color:rgba(205,179,106,.32);font-variant-numeric:tabular-nums;font-weight:700;flex-shrink:0}
.tacts{margin-left:auto;display:flex;gap:4px}
.tbtn{width:32px;height:32px;border-radius:8px;background:none;border:0;color:var(--mut);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.tbtn:hover{background:var(--card2);color:var(--txt)}.tbtn.liked{color:var(--gold)}
.tbtn svg{width:17px;height:17px}
/* waveform */
.twave{height:46px;display:flex;align-items:center;gap:2px;overflow:hidden;cursor:pointer;touch-action:none}
.twave i{flex:1;min-width:2px;border-radius:2px;background:linear-gradient(180deg,var(--gold),var(--gold2)) left center / calc(var(--f,0) * 100%) 100% no-repeat, #33333a}
.twave.seek i{transition:none}
.tfoot{display:flex;align-items:center;gap:14px}
.ttime{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;flex-shrink:0}
.textra{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.ex{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);color:var(--mut);border-radius:var(--r-pill);padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:.15s}
.ex:hover{border-color:var(--gold);color:var(--txt)}
.ex svg{width:13px;height:13px}.ex .c{color:var(--au);font-weight:700}
.ex.dl{background:var(--card2);border-color:var(--line2);color:var(--txt)}
/* «Минус» просили как заметное действие: снять вокал — самый частый запрос к готовому треку */
.ex.exmin{border-color:rgba(205,179,106,.45);color:#e7cf94}
.ex.exmin:hover{border-color:var(--au,#cdb36a);color:#fff}

/* добавить демо + «сделать бит» из демо */
.ftab-add{display:inline-flex;align-items:center;gap:5px;background:rgba(205,179,106,.12);border:1px solid var(--au);color:var(--gold2)}
.ftab-add:hover{background:rgba(205,179,106,.2)}
.ftab-add svg{width:14px;height:14px}
.ftab-add:disabled{opacity:.6;cursor:default}
.ver.dem{background:rgba(205,179,106,.16);border-color:transparent;color:var(--gold2)}
/* Минус, снятый с готового трека. Платные экстры у него скрыты: своей задачи в Suno у него нет
   (suno_task_id пустой), и WAV/дорожки на нём отбились бы ошибкой. Скачать MP3 — можно. */
.ver.min{background:rgba(80,200,255,.14);border-color:rgba(80,200,255,.35);color:#7cd4ff}
.track.mnus .textra .ex:not(.dl){display:none}
/* нейтральные кнопки действий карточки (как WAV/Минус) */
.mkbtn{display:inline-flex;align-items:center;gap:5px;background:var(--card2);border:1px solid var(--line2);color:var(--txt);border-radius:var(--r-pill);padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:.15s}
.mkbtn:hover{border-color:var(--au);color:#fff}
.mkbtn svg{width:14px;height:14px}
.tlike.liked svg{fill:var(--gold)}
.tcov[draggable="true"]{cursor:grab}
.track.dragging{opacity:.5}

/* работа на основе трека: источник + drop-зона + слайдеры */
/* строка выбранного источника — без своей рамки/фона: живёт внутри .uz */
.dropcue{display:none;border:2px dashed var(--au);border-radius:var(--r-md);padding:14px;text-align:center;font-size:12.5px;color:var(--gold2);margin-bottom:14px}
/* разделитель: тянешь — меняешь ширину левой панели (как в Suno). Двойной клик — сброс */
.lresize{display:none;position:fixed;top:0;bottom:0;left:var(--lw);width:11px;margin-left:-6px;z-index:20;cursor:col-resize;touch-action:none}
@media(min-width:861px){.lresize{display:block}}
.lresize::after{content:"";position:absolute;top:0;bottom:0;left:5px;width:2px;background:transparent;transition:background .15s}
.lresize:hover::after,.lresize.dragging::after{background:var(--au)}
body.lresizing{cursor:col-resize;-webkit-user-select:none;user-select:none}
body.lresizing *{cursor:col-resize !important}
.lpanel.drop{outline:2px solid var(--au);outline-offset:-2px}
.lpanel.drop .dropcue{display:block}
.cvset{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.cvhint{display:block;font-style:normal;font-size:10.5px;font-weight:500;color:var(--mut2,#6b6b78);margin-top:2px;line-height:1.3}
.cvrow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 10px;font-size:11.5px;color:var(--mut);font-weight:600}
.cvrow input[type=range]{grid-column:1/3;width:100%;accent-color:var(--gold);height:4px;cursor:pointer}
.cvrow b{color:var(--au);font-variant-numeric:tabular-nums;font-size:11px}
.src-only{display:none}
.lpanel.src-on .src-only{display:grid}
/* Что делаем с прикреплённым треком: переиграть заново (кавер) или наложить вокал поверх
   (Suno Add Vocals). Раньше выбора не было — любой запуск с источником переигрывал трек. */
.srcmode{gap:7px;margin:-4px 0 14px}
.srcmode-l{font-size:11.5px;color:var(--mut2);font-weight:600}
.srcmode-b{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.srcmode-b button{background:var(--bg);border:1px solid var(--line);color:var(--mut);border-radius:var(--r-md);
  padding:8px 11px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;
  transition:border-color .15s,background-color .15s,color .15s}
/* 11.5px — кегль, который в панели уже есть (.kindhint, .cvrow): не плодим новый размер */
.srcmode-b button small{display:block;font-size:11.5px;font-weight:500;color:var(--mut2);margin-top:2px;line-height:1.25}
.srcmode-b button:hover{border-color:var(--line2);color:var(--txt)}
.srcmode-b button.on{border-color:var(--au);background:rgba(205,179,106,.12);color:#fff}

/* контекстное меню трека */
.tmenu{position:fixed;z-index:1000;min-width:210px;background:rgba(22,22,28,.99);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line2);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.55);padding:6px}
.tm-i{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;color:#e8e8ee;font:600 13px/1.2 inherit;text-align:left;padding:9px 11px;border-radius:8px;cursor:pointer;position:relative}
.tm-i>span{flex:1}
.tm-i svg{width:16px;height:16px;flex-shrink:0;color:#8b8792}
.tm-i:hover{background:rgba(255,255,255,.06)}
.tm-i:hover svg{color:var(--gold2)}
.tm-danger{color:#ff6b78}.tm-danger svg{color:#ff6b78}
.tm-danger:hover{background:rgba(225,22,43,.14)}
.tm-sep{height:1px;background:var(--line);margin:5px 8px}
.tm-arr{margin-left:auto;width:13px;height:13px}
.tm-has-sub{position:relative}
.tm-sub{position:absolute;left:100%;top:-6px;min-width:150px;background:rgba(24,24,30,.99);border:1px solid var(--line2);border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.55);padding:6px;display:none;flex-direction:column}
.tm-has-sub:hover .tm-sub{display:flex}
.tm-sub-i{background:none;border:0;color:#e8e8ee;font:600 12.5px/1.2 inherit;text-align:left;padding:8px 10px;border-radius:7px;cursor:pointer}
.tm-sub-i:hover{background:rgba(255,255,255,.06);color:var(--gold2)}
/* тап по пункту с сабменю на тач-экране (класс вешает app.js) */
.tm-has-sub.open .tm-sub{display:flex}
.tm-has-sub.open .tm-arr{transform:rotate(90deg)}

/* Мобильная шторка. Попап «у пальца» на 375px не помещался: упирался в края,
   а сабменю стилей раскрывалось всегда и раздувало меню на пол-экрана. */
@media(max-width:560px){
  .tm-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999}
  .tmenu.sheet{left:0;right:0;bottom:0;top:auto;width:auto;min-width:0;max-height:82vh;max-height:82dvh;overflow-y:auto;overscroll-behavior:contain;
    border-radius:20px 20px 0 0;border-left:0;border-right:0;border-bottom:0;
    padding:6px 10px calc(10px + env(safe-area-inset-bottom));animation:tmup .22s cubic-bezier(.22,1,.36,1)}
  @keyframes tmup{from{transform:translateY(100%)}to{transform:none}}
  .tm-grab{width:40px;height:4px;border-radius:3px;background:var(--line2);margin:8px auto 10px}
  /* пальцем нужно попадать: пункты выше и крупнее, чем мышью */
  .tmenu.sheet .tm-i{padding:14px 12px;font-size:15px;gap:13px}
  .tmenu.sheet .tm-i svg{width:19px;height:19px}
  /* закрыто по умолчанию (ховера на тач-экране нет), открывается тапом — отсюда .open */
  /* пункт становится двухстрочным: заголовок + развёрнутый список под ним.
     Без wrap статичный сабменю встаёт третьей колонкой во flex-строке и разъезжается вбок. */
  .tmenu.sheet .tm-has-sub{flex-wrap:wrap;padding-bottom:6px}
  .tmenu.sheet .tm-sub{position:static;display:none;flex:0 0 100%;width:100%;margin:2px 0 0 32px;
    box-shadow:none;border:0;background:none;padding:0}
  .tmenu.sheet .tm-has-sub.open .tm-sub{display:flex}
  .tmenu.sheet .tm-sub-i{padding:12px 10px;font-size:14.5px}
  .tmenu.sheet .tm-arr{transition:transform .18s}
}
.tgen{color:var(--mut);font-size:12.5px;display:flex;align-items:center;gap:8px}
.tgen-t{min-width:0}
/* «дольше обычного» — подсвечиваем золотом и даём выйти, а не крутим спиннер молча */
.tgen.slow{color:var(--au)}
.tgen-x{margin-left:auto;flex-shrink:0;background:var(--bg);border:1px solid var(--line);color:var(--mut);
  border-radius:var(--r-pill);padding:5px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:.15s}
.tgen-x:hover{border-color:var(--gold);color:var(--txt)}

/* ==== карточка-провал: причина + что делать дальше ====
   Раньше провалившийся трек просто исчезал из ленты, и артист не понимал, что поправить.
   Селектор с .gen намеренно: правило .track.gen с пульсацией объявлено ниже и иначе перебивает —
   на «не получилось» рамка продолжала бежать, как будто генерация ещё идёт. */
.track.gen.failed{animation:none}
.track.gen.failed::after{display:none}
.tfail{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tfail-i{width:20px;height:20px;flex-shrink:0;color:var(--gold2)}
.tfail-t{min-width:0;flex:1}
.tfail-t b{display:block;font-size:13px;font-weight:700;color:var(--txt)}
.tfail-t small{display:block;font-size:12px;color:var(--mut);line-height:1.35;margin-top:1px}
.tfail-a{display:flex;gap:6px;margin-left:auto;flex-shrink:0}
.tfail-b{background:var(--bg);border:1px solid var(--line);color:var(--mut);border-radius:var(--r-pill);
  padding:6px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:.15s}
.tfail-b:hover{border-color:var(--gold);color:var(--txt)}
.tfail-b.go{background:var(--card2);border-color:var(--line2);color:var(--txt)}
.tfail-b.go:hover{border-color:var(--au);color:#fff}
@media(max-width:560px){
  .tfail{gap:8px}
  .tfail-a{width:100%;margin-left:0}
  /* тап-цель на мобиле — не меньше 40px */
  .tfail-b{flex:1;text-align:center;min-height:40px}
  .tgen-x{min-height:40px;padding:5px 14px}
}

/* ==== мерцание генерирующегося трека ====
   Пока трек в работе: по всей карточке идёт бегущий блик (shimmer), обложка «дышит» скелетоном,
   рамка мягко пульсирует красным. Снимается само, когда poll заменит карточку готовой. */
.track.gen{position:relative;overflow:hidden;animation:crGenBorder 2.8s ease-in-out infinite}
.track.gen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.06) 45%,rgba(225,22,43,.10) 50%,rgba(255,255,255,.06) 55%,transparent 75%);
  background-size:220% 100%;animation:crShimmer 3.2s ease-in-out infinite alternate}
.track.gen .tcov{position:relative;overflow:hidden}
.track.gen .tcov img{opacity:.55;filter:saturate(.6)}
.track.gen .tcov::after{content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,rgba(30,30,36,.2) 30%,rgba(225,22,43,.18) 50%,rgba(30,30,36,.2) 70%);
  background-size:220% 100%;animation:crShimmer 3.2s ease-in-out infinite alternate}
/* alternate + ease-in-out: блик доходит до края, притормаживает и идёт обратно (маятник),
   а не «прыгает» в начало, как при linear в одну сторону */
@keyframes crShimmer{from{background-position:150% 0}to{background-position:-150% 0}}
@keyframes crGenBorder{0%,100%{border-color:var(--line)}50%{border-color:rgba(225,22,43,.55)}}
@media(prefers-reduced-motion:reduce){
  .track.gen,.track.gen::after,.track.gen .tcov::after{animation:none}
}
.feed-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:14px 0 4px;
  padding:13px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--txt);
  font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s}
.feed-more:hover{border-color:var(--gold);color:#fff}
.fm-left{font-size:11.5px;font-weight:700;color:var(--mut2,#6b6b78);background:var(--bg);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.empty-note{color:var(--mut);text-align:center;padding:60px 20px}

/* ==== bottom player ==== */
.mplayer{position:fixed;left:0;right:0;bottom:0;height:var(--ph);background:rgba(20,20,25,.95);backdrop-filter:blur(16px);border-top:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 22px;z-index:30;transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.mplayer.show{transform:translateY(0)}
.mp-cov{width:48px;height:48px;border-radius:9px;object-fit:cover;flex-shrink:0;background:var(--bg2)}
.mp-info{width:180px;flex-shrink:0;min-width:0}
.mp-info b{font-size:13.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-info small{color:var(--mut);font-size:12px}
.mp-pp{width:46px;height:46px;border-radius:50%;background:linear-gradient(180deg,var(--gold2),var(--gold));border:0;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* стрелки «предыдущий/следующий» по бокам от play — тот же размер тап-цели, но тише по цвету */
/* быстрая разметка секций у поля текста */
.secrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.secrow-l{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);font-weight:800;margin-right:2px}
.secb{background:var(--bg);border:1px solid var(--line);color:var(--mut);border-radius:var(--r-pill);
  padding:5px 10px;font:600 11.5px/1 inherit;font-family:inherit;cursor:pointer;transition:.15s;white-space:nowrap}
.secb:hover{border-color:var(--au);color:var(--txt)}

/* «похоже, это текст песни» — подсказка под полем идеи */
.asLyr{display:flex;align-items:center;gap:9px;margin-top:8px;padding:9px 11px;border-radius:12px;
  background:rgba(205,179,106,.08);border:1px solid rgba(205,179,106,.35);cursor:pointer;
  font-size:12.5px;color:var(--txt);line-height:1.35}
.asLyr[hidden]{display:none}
.asLyr input{width:16px;height:16px;flex:none;accent-color:var(--au);cursor:pointer}
.asLyr b{color:var(--gold2)}

/* ── Нижний плеер студии ──────────────────────────────────────────────────────
   На ПК его нет: там у карточки своя волна, время и кнопки — вторая панель внизу
   только занимала место (решение владельца 10.08).
   На мобиле — ОДНА компактная строка (как было до перевода на общий стиль): обложка,
   название, транспорт и крестик; прогресс — тонкой полоской по низу панели. */
@media(min-width:760px){
  #mplayer{display:none!important}
  body.player-on{--ph:0px}
}
@media(max-width:759px){
  /* Плеер живёт СВЕРХУ, полосой под шапкой (решение владельца 11.08).
     Почему уехал снизу: там он воевал с доком и вылезал криво. Прятался он
     сдвигом на 180% своей высоты (113px), а поднят над доком был на 75px —
     то есть «спрятанный» плеер всё равно торчал полосой в 25px над нижней
     панелью, всегда. Сверху этой арифметики нет: прячем за край экрана. */
  #mplayer{top:var(--hdr,56px);bottom:auto;left:0;right:0;
    border-radius:0;border-left:0;border-right:0;border-top:0;
    transform:translateY(calc(-100% - var(--hdr,56px) - 6px))}
  #mplayer.show{transform:translateY(0)}
  #mplayer .player-inner{flex-wrap:nowrap;column-gap:8px;padding:8px 10px 10px}
  #mplayer .player-cover{width:40px;height:40px;order:0}
  #mplayer .player-info{order:1;flex:1 1 auto}
  #mplayer .player-title{font-size:13.5px}
  #mplayer .player-meta{font-size:11.5px}
  #mplayer .player-bar,#mplayer #pCur,#mplayer #pTot{display:none!important}
  #mplayer .player-seek{order:2;width:34px;height:34px;margin:0}
  #mplayer #pPP{order:3;width:40px;height:40px;margin:0}
  #mplayer #pFwd{order:4}
  #mplayer .player-close{order:5;width:30px;height:30px;margin-left:2px}
  #mplayer .player-progress{display:block}
}
.mp-nav{width:38px;height:38px;flex-shrink:0;border:0;background:none;color:var(--mut);cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:50%;transition:.15s}
.mp-nav:hover{color:var(--txt);background:var(--card2)}
.mp-nav svg{width:17px;height:17px}
.mp-pp svg{width:20px;height:20px}
.mp-time{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;flex-shrink:0}
.mp-bar{flex:1;height:6px;background:var(--line);border-radius:3px;position:relative;cursor:pointer;min-width:80px}
.mp-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:3px}
.mp-dl{background:var(--card2);border:1px solid var(--line2);color:var(--txt);border-radius:var(--r-pill);padding:9px 15px;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;flex-shrink:0}
.mp-dl svg{width:15px;height:15px}

.toast{position:fixed;left:50%;bottom:calc(var(--ph) + 16px);transform:translateX(-50%) translateY(20px);background:var(--card2);border:1px solid var(--line2);color:var(--txt);padding:12px 20px;border-radius:var(--r-pill);font-size:14px;font-weight:600;box-shadow:0 14px 40px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.3s;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ==== единая шапка сайта (cr-header.js) ====
   Шапку рисует общий скрипт и она sticky сверху. Body должен расти по контенту (было height:100%),
   иначе внутренняя прокрутка мешает липкости. Левая панель фиксирована — сдвигаем её под шапку. */
html,body{height:auto;min-height:100%}
:root{--hdr:60px}                            /* высота единой шапки; уточняется в @media */
.lpanel{top:var(--hdr)}
/* свой логотип в панели больше не нужен — он есть в общей шапке */
.lpanel>.logo{display:none}
/* живой чип кредитов, перенесённый в .csh-acts общей шапки */
.csh-cred{margin:0 4px 0 0}
/* фон под открытой мобильной шторкой не скролится (свайп-закрытие не «листает» страницу) */
body.sheet-lock{overflow:hidden;touch-action:none}
@media(max-width:860px){
  :root{--hdr:56px}
  .lpanel{top:0}                             /* на мобиле панель в потоке под шапкой, не фикс */
}

/* ==== мобильные шторки: форма создания + «Вдохновиться» ==== */
/* На десктопе форма живёт в левой панели — док, грабер и крестик формы не нужны. */
.mdock,.sheet-grab,.sheet-scrim{display:none}
.lpanel .sheet-x{display:none}
.sheet-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:75;opacity:0;transition:opacity .25s}
body.sheet-on .sheet-scrim{display:block;opacity:1}

/* «Вдохновиться» доступно и на десктопе — там это центрированная модалка (на мобиле ниже
   переопределяется в шторку снизу). Иначе кнопка в панели вела бы в пустоту. */
.isheet{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%);width:min(760px,92vw);max-height:84vh;max-height:84dvh;
  overflow-y:auto;background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);
  box-shadow:0 30px 80px rgba(0,0,0,.6);padding:18px;z-index:80;opacity:0;visibility:hidden;transition:.22s}
body.gs-on #genresSheet,body.st-on #stemSheet{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
/* Пока открыта любая шторка — фон под ней НЕ листается. Без этого палец, дойдя до конца списка
   жанров, начинал прокручивать саму страницу, и человек терял место в ленте (жалоба владельца
   17.08 #527: «листаешь пальцем в модалке жанров — сайт на фоне листается»).
   overflow:hidden держит документ, overscroll-behavior не даёт прокрутке «перетечь» из шторки. */
body.create-on,body.gs-on,body.st-on{overflow:hidden}
#inspSheet,#genresSheet,#stemSheet,.lpanel,.tmenu.sheet{overscroll-behavior:contain}
.isheet .sheet-x{display:flex;position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;border-radius:50%;
  background:var(--card2);color:var(--mut);align-items:center;justify-content:center;cursor:pointer;z-index:2}
.isheet .sheet-x svg{width:17px;height:17px}
.isheet .sheet-x:hover{color:var(--txt)}
/* ⚠️ Плитки шторок «Жанры» и «Одна дорожка» ДОЛЖНЫ быть в базовых правилах, а не только в
   мобильном медиа-запросе: на десктопе эти шторки открываются как модалка, и без стилей
   иконки инструментов рисовались во весь свой viewBox — огромными белыми квадратами разного
   размера (скриншот владельца 07.08 «выглядит криво»). */
.gsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;padding:2px 2px 0}
.gsi{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--card2);
  border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px;cursor:pointer;
  text-align:left;font-family:inherit;color:var(--txt);transition:.15s}
.gsi b{font-size:13.5px;font-weight:700}
.gsi small{font-size:11px;color:var(--mut)}
.gsi.hot{border-color:rgba(205,179,106,.35)}
.gsi:hover{border-color:var(--gold);background:rgba(225,22,43,.1)}
.gsi.flash{border-color:var(--gold);background:rgba(225,22,43,.2)}
/* плитки инструментов: иконка в рамке + подпись в строку */
.stemgrid .stemi{flex-direction:row;align-items:center;gap:9px;padding:12px}
.stemico{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 auto;
  border-radius:9px;background:rgba(205,179,106,.12);color:var(--au)}
.stemico svg{width:17px;height:17px;display:block}
.isheet-h{display:flex;align-items:flex-start;gap:10px;padding:0 2px 14px;position:relative}
/* «Случайный» в шапке шторки жанров. НЕ абсолютом: на 320px он наезжал на заголовок
   (кнопка с x=135, а «Жанры и поджанры» тянется дальше). В потоке flex он прижимается
   вправо, оставляет место крестику (тот абсолютный, 34px + поля) и при нехватке ширины
   честно переносится под заголовок, а не ложится поверх него. */
.isheet-h{flex-wrap:wrap}
.gs-rand{margin-left:auto;margin-right:44px;flex-shrink:0;align-self:flex-start}
.isheet-h b{display:block;font-size:19px;font-family:'Unbounded',sans-serif}
.isheet-h small{display:block;color:var(--mut);font-size:12.5px;margin-top:4px}

/* карточки пресетов — общие для шторки и (в будущем) десктопа */
.icards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:2px 2px 0}
.icard{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:0;overflow:hidden;
  background:var(--card2);border:1px solid var(--line);border-radius:var(--r-lg);cursor:pointer;text-align:left;
  transition:.15s;font-family:inherit;color:var(--txt)}
.icard:hover,.icard:active{border-color:var(--gold);transform:translateY(-1px)}
.icard-art{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--bg2)}
.icard-art img{width:100%;height:100%;object-fit:cover;display:block}
/* лёгкая подложка под подписи, чтобы текст читался на любой картинке */
.icard-art::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,13,.55),transparent 60%)}
.icard-t{font-size:13.5px;font-weight:700;padding:9px 11px 0;line-height:1.2}
.icard-s{font-size:11.5px;color:var(--mut);padding:3px 11px 11px;line-height:1.25}

/* ==== responsive ==== */
@media(max-width:860px){
  .mgr{display:block}

  /* Форма создания = шторка снизу. Раньше она лежала СВЕРХУ над лентой и занимала весь первый
     экран: до треков надо было долго скроллить. Теперь экран — только лента, форма по запросу. */
  /* overflow-x:hidden обязателен: панель оказывалась на пару пикселей шире себя и её можно было
     утащить пальцем вбок — весь контент уезжал за левый край («кривая модалка»).
     Плюс внутренним блокам разрешаем сжиматься, чтобы они не распирали шторку. */
  /* z-index 95 — ВЫШЕ единой шапки (.csh, z-index 90). Иначе «на весь экран» получалось
     формальным: шапка оставалась сверху и накрывала крестик, закрыть шторку на телефоне
     было нечем (Escape там не нажать). */
  .lpanel{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;z-index:95;
    /* ⚠️ vh на айфоне считается от БОЛЬШОГО экрана — без адресной строки. Пока она видна,
       шторка выше видимой области: её верх с переключателем «Простой/Продвинутый» уезжает
       под строку браузера, и режим не переключить (жалоба владельца 13.08). dvh считает
       ФАКТИЧЕСКУЮ высоту. Дублируем vh первым — для браузеров без поддержки dvh.
       Тот же приём уже применён в чате продюсера (producer.css). */
    /* НА ВЕСЬ ЭКРАН (решение владельца 20.08). Была шторка на 88dvh: сверху торчал кусок
       ленты, форма казалась «недооткрытой», а на низких экранах поля упирались в край.
       dvh обязателен — vh на айфоне считается от экрана БЕЗ адресной строки. */
    top:0;height:100vh;height:100dvh;max-height:none;
    overflow-y:auto;overflow-x:hidden;border-right:0;border-radius:0;
    border-top:0;box-shadow:none;
    /* Сверху 52px + вырез: панель теперь от самого верха экрана, и переключатель
       «Простой/Продвинутый» иначе оказывается ПОД крестиком (замер: сегмент на 6px,
       крестик на 10px — перекрывали друг друга). */
    padding:calc(52px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom));
    transform:translateY(100%);transition:transform .32s cubic-bezier(.22,1,.36,1);visibility:hidden}
  body.create-on .lpanel{transform:none;visibility:visible}
  .lpanel .logo{display:none}                 /* логотип уже в шапке */
  .lresize{display:none}                      /* тянуть ширину нечего */
  /* ничто внутри шторки не должно быть шире неё */
  .lpanel .fld,.lpanel .params,.lpanel .prm,.lpanel .cvset,.lpanel .cvrow,
  .lpanel .prod,.lpanel .pgroup,.lpanel .pchips,.lpanel .ghosts{min-width:0;max-width:100%}
  .lpanel .trow,.lpanel .ta,.lpanel .inp,.lpanel textarea{max-width:100%}
  .lpanel .cvrow input[type=range]{max-width:100%}
  .lpanel .ghosts{flex-wrap:wrap}             /* три «призрачные» кнопки не влезали в строку */

  .sheet-grab{display:block;width:40px;height:4px;border-radius:3px;background:var(--line2);margin:6px auto 10px}
  /* У формы создания ручки нет: свайп-закрытие с неё снято (владелец 20.08 — «убрать
     закрытие свайпом»), а полоска обещала бы жест, которого больше нет. Закрытие — крестиком,
     по фону и Escape. У остальных шторок (жанры, дорожки, меню) ручка и свайп остались. */
  .lpanel .sheet-grab{display:none}
  /* Крестик fixed, а не absolute: панель теперь во весь экран и прокручивается — при absolute
     кнопка уезжала бы вверх вместе с содержимым и закрыть стало бы нечем. */
  .lpanel .sheet-x{display:flex;position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:14px;width:34px;height:34px;border:0;border-radius:50%;
    background:var(--card2);color:var(--mut);align-items:center;justify-content:center;cursor:pointer;z-index:96}
  .lpanel .sheet-x svg{width:17px;height:17px}

  /* ДОК: жанры сверху + круглая красная «Создать» по центру. Когда играет трек — над плеером. */
  /* Таббар — те же токены, что в Corona Visual (.vtabs), чтобы студии выглядели одинаково. */
  .mdock{display:flex;align-items:flex-end;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.07);
    background:rgba(28,30,33,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    transition:bottom .3s cubic-bezier(.2,.8,.2,1)}
  /* Док НЕ двигаем: плеер встаёт НАД ним (см. #mplayer выше). Раньше здесь было
     bottom:var(--ph) — док уезжал на 76px и оказывался ровно под плеером, из-за чего
     нижнее меню «пропадало», когда играл трек (жалоба владельца 10.08). */
  body.player-on .mdock{bottom:0}
  body.create-on .mdock,body.gs-on .mdock,body.st-on .mdock{transform:translateY(110%)}  /* при открытой шторке док не мешает */

  .mdock-nav{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;border:0;
    background:none;cursor:pointer;color:var(--mut);font:600 10.5px/1 inherit;-webkit-tap-highlight-color:transparent}
  .mdock-nav svg{width:23px;height:23px}
  .mdock-nav:active{opacity:.7}
  .mdock-nav.on{color:var(--txt)}
  .mdock-nav.on svg{color:var(--gold2)}
  /* центральная «Создать» — приподнятый круг (FAB), как .vtab-fab в Visual */
  .mdock-mid{color:var(--txt);gap:5px}
  .mdock-go{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-top:-24px;
    border-radius:50%;background:var(--gold);color:#fff;box-shadow:0 8px 22px rgba(225,22,43,.45);
    border:3px solid #0f1113}
  .mdock-go svg{width:26px;height:26px}
  .mdock-mid:active .mdock-go{transform:scale(.94)}

  /* на узком экране — две колонки; остальная форма плиток общая (см. базовые правила) */
  .gsgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gsi:active{border-color:var(--gold);background:rgba(225,22,43,.14)}

  /* лента получает весь экран; снизу место под док (и плеер, если играет) */
  .feed{margin-left:0;padding:18px 14px calc(88px + 12px)}
  /* плеер теперь сверху → снизу место нужно только доку, а сверху — под полосу плеера */
  body.player-on .feed{padding-top:calc(18px + var(--ph,76px))}
  .mgr{padding-bottom:0}

  /* «Вдохновиться» — на мобиле шторка снизу вместо центрированной модалки */
  .isheet{left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;max-height:86vh;max-height:86dvh;
    border:0;border-top:1px solid var(--line2);border-radius:20px 20px 0 0;
    box-shadow:0 -18px 50px rgba(0,0,0,.5);padding:6px 14px calc(18px + env(safe-area-inset-bottom));
    transform:translateY(100%);opacity:1;transition:transform .32s cubic-bezier(.22,1,.36,1)}
  body.gs-on #genresSheet,body.st-on #stemSheet{transform:none;opacity:1}
  .isheet-h b{font-size:17px}
  .isheet-h small{font-size:12px;max-width:240px}
  .icards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .track{flex-wrap:wrap}
  .feed-h{flex-wrap:wrap;gap:10px}
  .feed-h h1{font-size:21px}
  .usr .nm,.usr .chev{display:none}
  .umenu{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;border-radius:18px 18px 0 0;transform:translateY(100%);padding:10px 12px calc(12px + env(safe-area-inset-bottom));
    transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s,visibility .3s}
  .umenu.open{transform:none}
  .um-x{display:flex}
  .umenu::after{content:"";position:fixed;left:50%;transform:translateX(-50%);top:-16px;width:40px;height:4px;border-radius:3px;background:var(--line2)}
  .feed-tabs{flex-wrap:wrap}
  .fsearch{margin-left:0;width:100%;max-width:none;order:3}
  .mvol+.fsearch{margin-left:0}   /* поиск на своей строке — отступ от кнопки громкости не нужен */
  /* нижний плеер: обложка+название слева, play справа, тонкий прогресс сверху */
  .mplayer{gap:12px;padding:0 14px}
  .mp-cov{width:44px;height:44px}
  .mp-info{width:auto;flex:1;order:1}
  .mp-nav{order:2;width:36px;height:36px}
  .mp-pp{order:3;width:44px;height:44px}
  #mpNext{order:4}
  .mp-time,.mp-dl{display:none}
  .mp-bar{position:absolute;left:0;right:0;top:0;height:3px;min-width:0;flex:none;border-radius:0;background:var(--line)}
  .mp-fill{border-radius:0}
}
/* ==== карточка трека на мобиле ====
   Было: четыре ценника экстр (WAV/Минус/Стемы/MIDI) выстраивались лесенкой по одному в строку
   и занимали пол-карточки, а английская строка стиля разворачивалась в огромный блок.
   Стало: строка действий одна (время + MP3), экстры уехали в меню «⋮», стиль — одной строкой. */
@media(max-width:560px){
  /* Демо-карточка: «Сделать трек» + «Сделать бит» + MP3 в одну строку не влезали и резали
     скачивание правым краем (замер на 390px: ряд уходил на 12px за карточку; на 360px у
     владельца обрезало сильнее — скрин из бота 10.08). Слово «Сделать» прячем, ряд может
     перенестись — MP3 всегда целиком виден. */
  .track .textra{flex-wrap:wrap;row-gap:8px}
  .mkbtn .mkw{display:none}
  .mkbtn{padding:7px 11px;font-size:12px}
  .textra .ex[data-ex]{display:none}
  /* «Текст» на мобиле живёт в меню «⋮» — в свёрнутой строке ему места нет */
  .ex.lyr{display:none}
  .tfoot{gap:10px}
  .textra{flex-wrap:nowrap;gap:6px}

  /* ==== свёрнутая строка (как в каталоге битов) ====
     По умолчанию трек — одна строка: обложка с play · название · ♡ ⋮ · скачать.
     Тап разворачивает карточку в полную (.open) — с волной во всю ширину, как на десктопе. */
  .track{padding:10px;gap:11px;align-items:center}
  .track:not(.open) .tcov{width:52px;height:52px}
  .track:not(.open) .tp{width:30px;height:30px}
  .track:not(.open) .tp svg{width:13px;height:13px}
  .track:not(.open) .tmain{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
    column-gap:8px;gap:0}
  .track:not(.open) .thead{grid-column:1}
  .track:not(.open) .ttags,
  .track:not(.open) .twave,
  .track:not(.open) .ttime,
  .track:not(.open) .mkbtn,
  .track:not(.open) .tgen-x{display:none}
  /* Свёрнутая строка генерации. Было: голая надпись «Генерируется…» впритык к правому краю,
     без спиннера — читалось как обрезанный текст («кривая надпись», владелец 08.08).
     Стало: компактная плашка со спиннером, прижатая к правому краю с нормальным полем. */
  .track:not(.open) .tgen{grid-column:2;justify-self:end;align-self:center;gap:7px;
    font-size:12px;white-space:nowrap;padding:5px 11px;border-radius:999px;
    background:var(--bg);border:1px solid var(--line)}
  .track:not(.open) .tgen .spin{display:block;width:12px;height:12px;border-width:2px}
  .track:not(.open) .tgen-t{max-width:120px;overflow:hidden;text-overflow:ellipsis}
  .track:not(.open) .tfoot{grid-column:2;gap:0}
  .track:not(.open) .textra{margin:0}
  /* Провал — не строка списка, а сообщение: компактная сетка клала блок причины ПОД шапку
     карточки, и бейдж версии с сердечком наезжали на текст. Раскрываем такую карточку всегда. */
  .track.failed{align-items:flex-start}
  .track.failed .tmain{display:block}
  .track.failed .thead .ver,
  .track.failed .thead .ttags,
  .track.failed .thead .tacts{display:none}
  .track.failed .tfail{margin-top:8px}
  .track:not(.open) .tt{font-size:14.5px}
  /* карточка кликабельна целиком — курсор и отклик на тап */
  .track{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .track.open{cursor:default}
  .track.open .tcov{align-self:flex-start}
  .track.open{align-items:stretch}
  /* плавность разворота: обложка растёт, детали проявляются */
  .tcov{transition:width .28s cubic-bezier(.22,1,.36,1),height .28s cubic-bezier(.22,1,.36,1)}
  .track.open .twave,.track.open .tfoot,.track.open .ttags{animation:trOpen .32s ease both}
  @keyframes trOpen{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
  /* Сетка вместо flex-wrap: во flex перенос строки происходит РАНЬШЕ сжатия, поэтому длинное
     название выпихивало лайк и «⋮» на вторую строку. В гриде колонка названия просто сжимается. */
  .thead{display:grid;grid-template-columns:minmax(0,auto) auto 1fr;align-items:center;column-gap:9px;row-gap:7px}
  .thead .tt{grid-area:1/1}
  .thead .ver{grid-area:1/2}
  .tacts{grid-area:1/3;justify-self:end;margin-left:0}
  .ttags{grid-area:2/1/auto/-1;min-width:0}
  .ttag{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* цена экстры в шторке — справа, как в карточке */
  .tm-c{margin-left:auto;color:var(--au);font-weight:700;font-size:12.5px}
}
@media(max-width:480px){
  .tcov{width:84px;height:84px}
  .textra{gap:5px}.ex{padding:5px 10px;font-size:11.5px}
  .tt{font-size:15px}
  /* 3 кнопки режима — держим в одну строку, иконки прячем ради «Инструментал» */
  .seg-3 button{font-size:11.5px;padding:9px 2px}
  .seg-3 button svg{display:none}
}

/* простой режим — прячем продвинутые поля */
.adv{display:none}
.lpanel.adv-on .adv{display:block}
/* служебные поля (скрытая строка стиля) не должен раскрывать продюсер-режим */
.lpanel.adv-on .adv[hidden]{display:none}
.simple-only{display:block}
.lpanel.adv-on .simple-only{display:none}
.seg-sm button{font-size:12.5px;padding:9px 6px}
.seg-sm button svg{width:15px;height:15px;vertical-align:-3px;margin-right:2px}
.seg-3 button{font-size:12px;padding:9px 4px;white-space:nowrap}
.seg-3 button svg{width:15px;height:15px;vertical-align:-3px;margin-right:3px}

/* режим генерации: подсказка + выбор голоса */
.kindhint{font-size:11.5px;line-height:1.45;color:var(--mut2);margin:0 2px 10px}
.voiceseg{display:flex;align-items:center;gap:10px}
.voiceseg .vlab{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--mut)}
.voiceseg .vlab svg{width:15px;height:15px;color:var(--au)}
.voiceseg .vbtns{display:flex;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:3px}
.voiceseg .vbtns button{background:none;border:0;color:var(--mut);font-size:12px;font-weight:700;padding:6px 12px;border-radius:8px;cursor:pointer;transition:.15s}
.voiceseg .vbtns button.on{background:var(--card2);color:var(--txt);box-shadow:0 1px 3px rgba(0,0,0,.3)}

/* режимы «бит»/«инструментал» — прячем всё, что про вокал */
.lpanel.mode-beat .song-only,
.lpanel.mode-inst .song-only{display:none!important}
/* и наоборот: длина трека есть только у бита/инструментала (Suno берёт duration лишь в customMode) */
.lpanel.mode-song .notsong{display:none!important}
.durcustom{display:flex;align-items:center;gap:8px;margin-top:8px}
.durcustom .inp-sm{width:96px}
.durhint{font-size:11.5px;color:var(--mut2)}
/* пятая кнопка не влезает в строку на узком — разрешаем перенос вместо распирания */
.voiceseg .vbtns{flex-wrap:wrap}
/* У «Длины» кнопок ЧЕТЫРЕ, а у «Голоса» три — на 320px ряд переставал влезать:
   57 (лейбл) + 214 (кнопки) = 281 при 279 доступных, блок распирало вбок и высота прыгала
   с 35 до 50px. Ужимаем горизонтальные поля кнопок, подписи не режем — «1 мин» читается
   однозначно, а «1м» уже нет. Замер после правки — в комментарии к #durSeg (index.php). */
@media (max-width:400px){
  #durSeg .vbtns{padding:3px 2px}
  #durSeg .vbtns button{padding:6px 7px}
}

/* иконки в лейблах и мини-кнопках */
.flab svg{width:15px;height:15px;color:var(--au)}
.flab .hint{margin-left:auto;font-size:11px;color:var(--mut2);font-weight:500}
.mini svg,.ghost svg{width:15px;height:15px}

/* жанры / тренды — горизонтальный ряд */
.trow{display:flex;gap:7px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent;-webkit-overflow-scrolling:touch}
.trow::-webkit-scrollbar{height:5px}.trow::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px}
.tchip{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:var(--r-pill);padding:8px 14px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
.tchip:hover:not(.on){border-color:var(--line2)}
.tchip.on{border-color:var(--gold);background:rgba(225,22,43,.12);color:#fff}
.tchip .hf{display:inline-flex}.tchip .hf svg{width:13px;height:13px;color:var(--au)}
.tchip.on .hf svg{color:var(--gold2)}
/* короткая вспышка при вставке жанра-шаблона в поле (простой режим, без залипания .on) */
.tchip.flash{border-color:var(--gold);background:rgba(225,22,43,.18);color:#fff;transition:.05s}

/* пульт продюсера */
.prod{display:flex;flex-direction:column;gap:8px}
.pgroup{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.pgh{width:100%;display:flex;align-items:center;gap:9px;background:none;border:0;color:var(--txt);font-size:13px;font-weight:700;padding:11px 13px;cursor:pointer}
.pgi{display:inline-flex;color:var(--au)}.pgi svg{width:17px;height:17px}
.pgc{margin-left:auto;color:var(--mut2);display:inline-flex;transition:.2s}.pgc svg{width:15px;height:15px}
.pgroup.open .pgc{transform:rotate(45deg)}
.pchips{display:none;flex-wrap:wrap;gap:6px;padding:0 12px 12px}
.pgroup.open .pchips{display:flex}
.pch{background:var(--card);border:1px solid var(--line);color:var(--mut);border-radius:var(--r-pill);padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer;transition:.15s}
.pch:hover:not(.on){border-color:var(--line2);color:var(--txt)}
.pch.on{border-color:var(--au);background:rgba(205,179,106,.14);color:#fff}
/* первый выбранный инструмент = главный: он уходит в промт с явной инструкцией «ведёт партию»,
   поэтому и в UI помечен звёздочкой — видно, кто солирует */
.pch.on.lead{border-color:var(--gold2);background:rgba(225,22,43,.16)}
.pch.on.lead::before{content:"★ ";color:var(--au);font-size:10px}

/* «Режим продюсера» — сворачиваемая секция (по умолчанию закрыта) */
.pmhead{width:100%;display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-md);padding:12px 13px;color:var(--txt);font-family:inherit;font-size:13.5px;font-weight:700;
  cursor:pointer;transition:border-color .15s,background-color .15s;text-align:left}
.pmhead:hover{border-color:var(--line2)}
.pmode.open .pmhead{border-color:var(--au);background:rgba(205,179,106,.07)}
.pmhead .pmi{display:inline-flex;color:var(--au)}.pmhead .pmi svg{width:17px;height:17px}
.pmhead .pmt{flex-shrink:0}
.pmhead .hint{margin-left:auto;font-size:11px;color:var(--mut2);font-weight:500;white-space:nowrap}
.pmhead .pmchev{display:inline-flex;color:var(--mut);transition:transform .22s;flex-shrink:0}
.pmhead .pmchev svg{width:15px;height:15px}
.pmode.open .pmhead .pmchev{transform:rotate(180deg);color:var(--au)}
.pmbody{display:none;padding-top:12px;animation:pmIn .22s ease both}
.pmode.open .pmbody{display:block}
@keyframes pmIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pmbody{animation:none}.pmhead .pmchev{transition:none}}

/* большая база настроек: поиск, секции, негатив, темп */
.libsearch{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:0 12px;margin-bottom:12px}
.libsearch svg{width:16px;height:16px;color:var(--mut2);flex-shrink:0}
.libsearch input{flex:1;background:none;border:0;outline:none;color:var(--txt);font-size:13px;font-family:inherit;padding:11px 0}
.libsearch input::placeholder{color:var(--mut2)}
.libsec{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut2);margin:14px 2px 8px}
.libsec:first-of-type{margin-top:0}
.libnote{margin-left:6px;text-transform:none;letter-spacing:0;font-weight:600;color:var(--au);opacity:.75}
.prod+.libsec{margin-top:16px}
.pneg{background:var(--card);border:1px solid var(--line);color:var(--mut);border-radius:var(--r-pill);padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer;transition:.15s}
.pneg:hover:not(.on){border-color:var(--line2);color:var(--txt)}
.pneg.on{border-color:var(--gold);background:rgba(225,22,43,.14);color:#fff}
.pbpm{background:var(--card);border:1px solid var(--line);color:var(--mut);border-radius:var(--r-pill);padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer;transition:.15s}
.pbpm:hover:not(.on){border-color:var(--line2);color:var(--txt)}
.pbpm.on{border-color:var(--au);background:rgba(205,179,106,.14);color:#fff}
.pbpm .bpmn{color:var(--mut2);font-weight:700;margin-left:2px}
.pbpm.on .bpmn{color:var(--gold2)}

/* точные параметры */
.params{display:flex;gap:10px;margin-bottom:12px}
.prm{flex:1;min-width:0}
.prm .pl{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--mut);font-weight:600;margin-bottom:6px}
.prm .pl svg{width:14px;height:14px;color:var(--au)}
.inp-sm{padding:9px 11px;font-size:13px}
.tgl-sm{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px}

/* живая строка стиля */
.ta-mono{min-height:auto;font-size:12.5px;line-height:1.5;color:var(--au);min-height:56px}
#styleReset{display:inline-flex;align-items:center;gap:4px}#styleReset svg{width:13px;height:13px}
.ta-lg{min-height:200px}
.mini:disabled{opacity:.6;cursor:default}
.mini-hi{border-color:var(--au);color:#fff;background:rgba(205,179,106,.12)}
.mini-hi:hover{background:rgba(205,179,106,.2)}

/* ===== БОЛЬШОЙ РЕДАКТОР ТЕКСТА ===== */
.lyrm{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(6,6,9,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.lyrm.show{opacity:1;visibility:visible}
.lyrm-card{width:min(940px,100%);max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;
  background:var(--bg2);border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.65);
  transform:translateY(14px) scale(.985);opacity:.6;transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .24s}
.lyrm.show .lyrm-card{transform:none;opacity:1}
.lyrm-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.lyrm-head b{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-family:'Unbounded',sans-serif}
.lyrm-head b svg{width:18px;height:18px;color:var(--au)}
.lyrm-tip{margin-left:auto;font-size:11.5px;color:var(--mut2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lyrm-x{background:none;border:0;color:var(--mut);font-size:26px;line-height:1;cursor:pointer;padding:0 2px;flex-shrink:0}
.lyrm-x:hover{color:#fff}
.lyrm-body{flex:1;min-height:0;overflow-y:auto;padding:16px 18px 8px}
.lyrm-body .le-area{min-height:clamp(220px,42vh,460px)}

/* зона загрузки аудио: клик = файл с компа, drop = файл ИЛИ трек из ленты */
.uz{border:1.5px dashed var(--line2);border-radius:var(--r-md);padding:16px 14px;margin-bottom:14px;
  cursor:pointer;text-align:center;transition:border-color .15s,background-color .15s}
.uz:hover{border-color:var(--au);background:rgba(205,179,106,.05)}
.uz.drag{border-color:var(--au);background:rgba(205,179,106,.12)}
.uz.uz-on{cursor:default;border-style:solid;border-color:var(--au);background:rgba(205,179,106,.07);padding:9px 10px;text-align:left}
.uz.uz-on:hover{background:rgba(205,179,106,.07)}
.uz-icons{display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.uz-ic{width:34px;height:34px;border-radius:50%;background:var(--card2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--mut);flex-shrink:0}
.uz-ic svg{width:16px;height:16px}
.uz-ic:first-child{transform:rotate(-7deg);margin-right:-7px}
.uz-ic:last-child{transform:rotate(7deg);margin-left:-7px}
.uz-ic.mid{position:relative;z-index:1;background:var(--card);color:var(--au);width:38px;height:38px}
.uz-ic.mid svg{width:18px;height:18px}
.uz-empty b{display:block;font-size:13.5px;font-weight:700;color:var(--txt)}
.uz-empty small{display:block;color:var(--mut2);font-size:11.5px;margin-top:3px}
.uz .srcbar{display:flex;align-items:center;gap:9px;margin:0}
.uz .srcbar[hidden]{display:none}   /* иначе display:flex перебивает атрибут hidden */
.uz .srci{display:inline-flex;color:var(--au);flex-shrink:0}.uz .srci svg{width:17px;height:17px}
.uz .srcname{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uz-up{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--mut);font-size:12.5px}

/* круглые иконочные кнопки (по образцу Suno) */
.rbtn{width:38px;height:38px;flex-shrink:0;border-radius:50%;border:1px solid var(--line);
  background:var(--card2);color:var(--txt);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;transition:background-color .15s,border-color .15s,color .15s}
.rbtn:hover{background:var(--card);border-color:var(--au);color:#fff}
.rbtn svg{width:18px;height:18px}
.rbtn.sm{width:30px;height:30px}.rbtn.sm svg{width:15px;height:15px}

/* ряд с выбором «за плюсом»: свёрнут — видно только выбранное */
.sing-row.pickable .sing-chips .tagc{display:none}
.sing-row.pickable .sing-chips .tagc.on{display:inline-flex}
.sing-row.pickable.open .sing-chips .tagc{display:inline-flex}
.sing-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.sing-empty{font-size:12px;color:var(--mut2)}
.sing-row.open .sing-empty{display:none}

/* «Как спеть» — кнопка появляется при выделении текста в редакторе */
.le-area{position:relative}
.singbtn{position:absolute;right:12px;bottom:12px;z-index:5;display:inline-flex;align-items:center;gap:6px;
  background:rgba(205,179,106,.16);border:1px solid var(--au);color:#fff;border-radius:var(--r-pill);
  padding:7px 14px;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(0,0,0,.4);
  animation:singIn .16s ease both}
.singbtn:hover{background:rgba(205,179,106,.28)}
.singbtn svg{width:15px;height:15px;color:var(--au)}
@keyframes singIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.singbtn{animation:none}}

/* модалка «Как спеть» */
.sing-card{width:min(720px,100%)}
.sing-body{flex:1;min-height:0;overflow-y:auto;padding:14px 18px 4px}
.sing-row{display:flex;align-items:flex-start;gap:14px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.045)}
.sing-row:last-child{border-bottom:0}
.sing-l{flex:0 0 104px;font-size:12.5px;font-weight:700;color:var(--txt);padding-top:6px}
.sing-l i{display:block;font-style:normal;font-size:10.5px;color:var(--mut2);font-weight:500;margin-top:2px}
.sing-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.sing-foot{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--line);flex-shrink:0}
@media(max-width:640px){.sing-row{flex-direction:column;gap:6px}.sing-l{flex:none;padding-top:0}}

/* модалка «Бэк-вокал»: хор по жанрам / подпевки / эдлибы.
   Карточка-чипс двухстрочная (название + за что отвечает) — без пояснения артист не отличит
   госпел-хор от оперного и берёт наугад. Сетка авто-фит, чтобы ряды не рвались на узком экране. */
.bk-body{padding:6px 18px 10px}
.bk-grp{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.045)}
.bk-grp:last-child{border-bottom:0}
.bk-h{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.bk-i{display:flex;color:var(--au)}
.bk-i svg{width:15px;height:15px}
.bk-h b{font-size:12.5px;font-weight:700;color:var(--txt)}
.bk-h small{font-size:11px;color:var(--mut2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:6px}
.bk-c{display:block;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:8px 11px;font-family:inherit;cursor:pointer;min-width:0;
  transition:border-color .15s,background-color .15s}
.bk-c b{display:block;font-size:12.5px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-c small{display:block;font-size:11px;color:var(--mut2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-c:hover{border-color:var(--au);background:rgba(205,179,106,.1)}
.bk-c:active{background:rgba(205,179,106,.18)}
.bk-msg{flex:1;min-width:0;font-size:11.5px;color:var(--mut2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){
  .bk-body{padding:4px 14px 8px}
  .bk-chips{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  /* на узком экране пояснение переносим в две строки, а не режем многоточием */
  .bk-c small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .bk-h small{display:none}
}

/* Теги секции (вставляются в текст) */
.tagwrap{border-top:1px solid var(--line);padding:10px 18px 0;flex-shrink:0}
.tagbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tagq-l{font-size:11px;color:var(--mut2);margin-left:4px}
.tagq{background:var(--bg);border:1px solid var(--line);color:var(--mut);border-radius:var(--r-sm);
  padding:5px 9px;font-size:11.5px;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  cursor:pointer;transition:border-color .15s,color .15s}
.tagq:hover{border-color:var(--au);color:var(--txt)}
.tagb{margin-top:10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px}
.tagb-row{display:flex;align-items:flex-start;gap:10px;padding:5px 0}
.tagb-l{flex:0 0 96px;font-size:11.5px;font-weight:700;color:var(--mut);padding-top:5px}
.tagb-l i{display:block;font-style:normal;font-size:10px;color:var(--mut2);font-weight:500}
.tagb-chips{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-width:0}
.tagc{background:var(--card);border:1px solid var(--line);color:var(--mut);border-radius:var(--r-pill);
  padding:5px 10px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:border-color .15s,background-color .15s,color .15s}
.tagc:hover{border-color:var(--line2);color:var(--txt)}
.tagc.on{border-color:var(--au);background:rgba(205,179,106,.14);color:#fff}
.tagb-foot{display:flex;align-items:center;gap:10px;margin-top:8px;padding-top:9px;border-top:1px solid var(--line)}
.tagb-prev{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:7px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;color:var(--au)}
.tagb-warn{font-size:11px;color:var(--mut2);white-space:nowrap}
.tagb-warn.bad{color:var(--gold2)}
@media(max-width:640px){.tagb-row{flex-direction:column;gap:4px}.tagb-l{flex:none;padding-top:0}}

/* ИИ-панель */
.lyrm-ai{padding:10px 18px 12px;border-top:1px solid var(--line);flex-shrink:0}
.lyrm-chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:9px;scrollbar-width:none}
.lyrm-chips::-webkit-scrollbar{display:none}
.lyrm-chip{flex-shrink:0;background:var(--bg);border:1px solid var(--line);color:var(--mut);
  border-radius:var(--r-pill);padding:7px 14px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  font-family:inherit;outline:none;-webkit-tap-highlight-color:transparent;
  transition:border-color .15s,background-color .15s,color .15s}
.lyrm-chip:hover{border-color:rgba(205,179,106,.55);background:rgba(205,179,106,.08);color:var(--txt)}
.lyrm-chip:active{background:rgba(205,179,106,.14)}
.lyrm-chip:focus-visible{border-color:var(--au);box-shadow:0 0 0 2px rgba(205,179,106,.22)}
.lyrm-ask{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 6px 5px 16px;transition:.15s}
.lyrm-ask:focus-within{border-color:var(--au)}
.lyrm-ask input{flex:1;background:none;border:0;outline:none;color:var(--txt);font-family:inherit;font-size:14px;padding:8px 0;min-width:0}
.lyrm-ask input::placeholder{color:var(--mut2)}
.lyrm-send{width:36px;height:36px;border-radius:50%;border:0;background:linear-gradient(180deg,var(--gold2),var(--gold));color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:.15s}
.lyrm-send:hover:not(:disabled){transform:translateY(-1px)}
.lyrm-send:disabled{opacity:.7;cursor:default}
.lyrm-send svg{width:17px;height:17px}

.lyrm-foot{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line);flex-shrink:0}
/* На 375px ряд не влезал: 416px содержимого в 375 — «Готово», главное действие редактора,
   уезжало за правый край и обрезалось (замер 18.08). Разрешаем перенос и прижимаем «Готово»
   вправо на своей строке, чтобы кнопка всегда была целиком видна. */
@media(max-width:560px){
  .lyrm-foot{flex-wrap:wrap;row-gap:8px}
  .lyrm-foot .sp{flex:1 0 100%;height:0}
  .lyrm-foot .lyrm-done{margin-left:auto}
}
.lyrm-foot .sp{flex:1}
/* «Готово» — изящная пилюля, а не тяжёлая главная CTA (.create) */
.lyrm-done{width:auto;margin:0;padding:7px 20px;font-size:12.5px;font-weight:600;letter-spacing:.01em;
  border-radius:var(--r-pill);background:var(--gold);box-shadow:none;border:1px solid var(--gold)}
.lyrm-done:hover{transform:none;background:var(--gold2);border-color:var(--gold2);box-shadow:none}

@media(prefers-reduced-motion:reduce){.lyrm,.lyrm-card{transition:none}}
@media(max-width:640px){
  .lyrm{padding:0}
  .lyrm-card{width:100%;max-height:100vh;max-height:100dvh;height:100vh;height:100dvh;border-radius:0;border:0}
  .lyrm-tip{display:none}
}

/* ==== модалка экстр/стемов ==== */
.emodal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);padding:20px}
.emodal.show{display:flex}
.emodal-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);max-width:440px;width:100%;padding:24px;position:relative;max-height:82vh;overflow-y:auto}
.emodal-box h3{font-size:19px;margin-bottom:4px}
.emsub{color:var(--mut);font-size:13.5px;margin-bottom:18px}
.emodal-x{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--mut);font-size:26px;line-height:1;cursor:pointer}
.emodal-x:hover{color:#fff}
.emlist{display:flex;flex-direction:column;gap:9px}
/* текст песни: моноширинного не надо — это стихи, а не код, но переносы строк значимы */
.lmodal-box{max-width:520px}
/* font-family отдельным свойством: в шорткате `font:14px/1.65 inherit` «inherit» не считается
   именем семейства, и <pre> оставался моноширинным — стихи выглядели как код (видно на рендере) */
.lyr-txt{white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:14px;line-height:1.65;color:var(--txt);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;max-height:46vh;overflow:auto;margin:0 0 14px}
.lyr-txt:empty::before{content:'Загружаем…';color:var(--mut)}
.lyr-acts{display:flex;gap:9px;flex-wrap:wrap}
.lyr-acts .pbtn{flex:1 1 120px;padding:11px 12px;font-size:13.5px}
/* Кнопка «Текст» живёт в шапке карточки, рядом с тегами стиля и BPM: ряд действий внизу
   уже занят четырьмя ценниками экстр, и шестой чип сталкивал «MP3» на вторую строку
   (замер на 1280px: карточка росла 158→196px). Размер — как у тега, не как у кнопки-экстры. */
.thead .ex.lyr{padding:4px 10px;font-size:11.5px;gap:5px;color:var(--txt)}
/* иконка золотом: рядом стоят пассивные теги стиля и BPM в точно таком же пилюле —
   без акцента кнопка читается как ещё одна подпись, и по ней никто не кликнет */
.thead .ex.lyr svg{width:12px;height:12px;color:var(--au)}
.thead .ex.lyr:hover{border-color:var(--au)}
/* [Verse]/[Chorus] — не текст песни, а разметка секций: приглушаем и подсвечиваем золотом,
   чтобы структуру было видно с одного взгляда */
.lyr-txt .sec{color:var(--au);font-weight:600}
.emloading{display:flex;align-items:center;gap:12px;color:var(--mut);font-size:14px;padding:16px 0}
/* Шторка «Файлы трека» — выезжает ПОД треком, там же, где сам трек (просьба владельца 17.08:
   «можно какое-то меню выезжающее под треком и там файлы»). Модалка для этого не годится:
   она перекрывает ленту и не даёт понять, к какому треку файлы относятся. */
/* Чип «Файлы» в ряду действий — виден только у треков, где что-то уже заказано. */
.ex.files{border-color:rgba(124,212,255,.35);color:#a9e2ff}
.ex.files .fdot{display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;
  background:#7cd4ff;vertical-align:middle;animation:fdotPulse 1.4s ease-in-out infinite}
@keyframes fdotPulse{0%,100%{opacity:.35}50%{opacity:1}}
.ex.files:hover{border-color:#7cd4ff;color:#fff}
.track.filesopen .ex.files{background:rgba(124,212,255,.14);border-color:#7cd4ff;color:#fff}

/* Стрелка у сердечка — раскрыть «Файлы трека». На мобиле её нет: там та же шторка открывается
   чипом «Файлы» в ряду действий, а в свёрнутой строке карточки лишняя кнопка съедает место под
   названием (замер: на 390px в строке уже сердце + «⋮» + скачивание). */
.tbtn.tfold svg{width:18px;height:18px;transition:transform .25s}
.track.filesopen .tbtn.tfold{color:#7cd4ff}
.track.filesopen .tbtn.tfold svg{transform:rotate(180deg)}
/* На мобиле — наоборот: стрелка остаётся, а чип «Файлы» прячем. Чип занимал место в свёрнутой
   строке и выдавливал «⋮» за край (скрин владельца 17.08 #545): в строке остались обложка, v5.5,
   сердце, «Файлы» и MP3 — а кебаб исчез. Разворот шторки везде одинаковый — стрелкой. */
@media(max-width:560px){
  .ex.files{display:none}
  .tbtn.tfold{display:inline-flex;align-items:center;justify-content:center}
}

.track{flex-wrap:wrap}      /* чтобы панель файлов встала своей строкой во всю ширину */
.tfiles{display:none}
.track.filesopen .tfiles{display:block;animation:tfilesIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes tfilesIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Панель — отдельная строка карточки (flex-basis 100%), поэтому её края совпадают с краями
   трека. Замер до правки: на 390px она вылезала на 120→365 при карточке 14→376, то есть жалась
   в 245px и оставляла пустую колонку под обложкой; на 1280 висела на 620px, не совпадая ни с
   рядом действий (612→1230), ни с карточкой (430→1245). Своей рамки у неё больше нет —
   три вложенные рамки (карточка → панель → строка) выглядели коробкой в коробке. */
.tfiles{flex:0 0 100%}
.tfiles-in{margin-top:14px;padding:14px 2px 0;border-top:1px solid var(--line)}
.tfiles-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.tfiles-x{flex:none;width:40px;height:40px;margin:-8px 0 -8px 0;display:flex;align-items:center;justify-content:center;
  background:var(--card2);border:1px solid var(--line);border-radius:50%;color:var(--mut);
  font-size:17px;line-height:1;cursor:pointer;font-family:inherit;transition:.15s}
.tfiles-x:hover{border-color:var(--au);color:#fff}
/* строки-файлы: без рамки, разделитель вместо коробки */
.tfiles .stem{background:none;border:0;border-radius:0;padding:9px 2px;
  border-bottom:1px solid rgba(255,255,255,.06)}
.tfiles .fgrp:last-child .stem:last-child{border-bottom:0}
.tfiles .stem-pp,.tfiles .stem-dl{width:40px;height:40px}   /* тап-цель: было 34 */
.tfiles .emloading{padding:4px 0}

/* Пояснение в шторке «Извлечь инструмент»: почему нет галки «без эффектов». */
.stemsearch{display:flex;align-items:center;gap:9px;margin:0 0 10px;padding:9px 12px;
  background:var(--card2);border:1px solid var(--line);border-radius:var(--r-pill)}
.stemsearch svg{width:16px;height:16px;flex:none;color:var(--mut)}
.stemsearch input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--txt);
  font-family:inherit;font-size:14px}
.stemsearch input::-webkit-search-cancel-button{filter:grayscale(1) opacity(.6)}
.stemi[hidden]{display:none}
.stemnone{padding:14px 2px;font-size:13px;color:var(--mut)}
.stemnote{margin:0 0 12px;font-size:12.5px;line-height:1.5;color:var(--mut)}

/* «Что ушло в Suno»: пары «поле → значение». Моноширинный шрифт у значения — это буквально
   текст запроса, и его сверяют с тем, что выбирал человек в форме. */
.pfields{display:grid;gap:10px}
.pf{display:grid;gap:3px}
.pf-k{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.pf-v{font-size:13px;line-height:1.5;color:var(--txt);white-space:pre-wrap;word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--card2);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.pf-note{margin-top:12px;font-size:12px;line-height:1.5;color:var(--mut)}

/* Группы в шторке «Файлы трека»: заказов у трека может быть несколько (WAV, дорожки, MIDI),
   без заголовков они сливались в один список без начала и конца. */
.fgrp{margin-bottom:14px}
.fgrp:last-child{margin-bottom:0}
.fgrp-h{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:700;color:var(--txt);margin-bottom:8px}
.fgrp-h span{font-size:11.5px;font-weight:600;color:var(--mut)}

.stem{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px}
.stem-ic{width:38px;height:38px;border-radius:10px;background:var(--card2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--au);flex-shrink:0}
.stem-ic svg{width:19px;height:19px}
.stem-nm{flex:1;font-size:14px;font-weight:600}
.stem-pp{width:34px;height:34px;border-radius:50%;background:var(--card2);border:1px solid var(--line2);color:var(--txt);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stem-pp.playing{background:var(--gold);border-color:var(--gold);color:#fff}
.stem-pp svg{width:15px;height:15px;margin-left:1px}
/* Выбор инструмента для MIDI: kie снимает ноты по КОНКРЕТНОЙ дорожке (audioId), поэтому
   вместо одной кнопки «собрать MIDI» показываем, что именно можно снять. */
.emmidi-box{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.emmidi-h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--txt);margin-bottom:9px}
.emmidi-h svg{width:16px;height:16px;color:var(--au,#cdb36a);flex-shrink:0}
.emmidi-h b{margin-left:auto;font-size:11.5px;color:var(--au,#cdb36a);white-space:nowrap}
.emmidi-row{display:flex;flex-wrap:wrap;gap:7px}
.emmidi-i{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--txt);
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.emmidi-i:hover:not(:disabled){border-color:var(--gold);background:rgba(225,22,43,.08)}
.emmidi-i svg{width:14px;height:14px;color:var(--mut);flex-shrink:0}
.emmidi-i.on{border-color:var(--gold);background:rgba(225,22,43,.14);color:#fff}
.emmidi-i:disabled{opacity:.45;cursor:default}
.emmidi{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;
  padding:12px;border:1px dashed var(--line2);border-radius:var(--r-md);background:rgba(205,179,106,.07);
  color:var(--txt);font:700 13px/1 inherit;cursor:pointer;font-family:inherit}
.emmidi svg{width:17px;height:17px;color:var(--au)}
.emmidi b{color:var(--au);font-size:12px}
.emmidi:hover{border-color:var(--au)}
.emmidi:disabled{opacity:.6;cursor:default}
.stem-dl{width:34px;height:34px;border-radius:9px;background:var(--card2);border:1px solid var(--line2);color:var(--txt);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stem-dl:hover{border-color:var(--gold)}.stem-dl svg{width:16px;height:16px}
/* Формат файла подписью на кнопке скачивания: kie отдаёт дорожки в M4A, и молчаливая
   иконка «стрелка вниз» обещала mp3, которого там нет. Пусть человек видит, что берёт. */
.stem-dl{gap:5px;width:auto;min-width:34px;padding:0 9px;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;text-decoration:none}
/* ⚠️ Внутри панели файлов ширина кнопок задана жёстко (.tfiles .stem-dl{width:40px}) —
   без этого правила подпись формата вытесняла иконку, и она ужималась до нуля. */
.tfiles .stem-dl{width:auto;min-width:40px;padding:0 10px}
.stem-dl svg{flex:none}
.stem-fmt{color:var(--muted)}
.stem-dl:hover .stem-fmt{color:var(--txt)}
/* WAV собирается в браузере — кнопка рядом со «скачать как есть». */
.stem-wav{height:34px;padding:0 11px;border-radius:9px;background:var(--card2);border:1px solid var(--line2);
  color:var(--txt);font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  cursor:pointer;flex-shrink:0}
.stem-wav:hover{border-color:var(--gold)}
.stem-wav[disabled]{opacity:.6;cursor:default}
.tfiles .stem-wav{height:40px}

/* Волна дорожки с перемоткой (владелец 16.09). Рельеф настоящий — громкость по отрезкам,
   считает браузер (app.js swMeasure). Цвет прогресса — как у волны карточки (.twave). */
.stem-nm{flex:0 1 170px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swave{flex:1 1 160px;min-width:0;height:32px;display:flex;align-items:center;gap:1px;cursor:pointer;
  touch-action:pan-y;user-select:none;-webkit-user-select:none}
.swave i{flex:1;min-width:1px;border-radius:1px;pointer-events:none;
  background:linear-gradient(180deg,var(--gold),var(--gold2)) left center / calc(var(--f,0) * 100%) 100% no-repeat,#3a3a45}
.swave:hover i{background-color:#4a4a57}
.swave-wait i{animation:swWait 1.1s ease-in-out infinite alternate}
.swave-wait i:nth-child(2n){animation-delay:.25s}
.swave-wait i:nth-child(3n){animation-delay:.5s}
@keyframes swWait{from{opacity:.35}to{opacity:.8}}
.swave-flat i{height:14%!important}
.stime{flex:none;min-width:34px;text-align:right;font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.stem-fmt{color:var(--mut)}

/* Пустые дорожки — под свёрткой, а не в общем списке */
.smute{margin-top:6px}
.smute>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;
  padding:9px 2px;font-size:12.5px;font-weight:700;color:var(--mut)}
.smute>summary::-webkit-details-marker{display:none}
.smute>summary::before{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);margin-right:3px;transition:transform .15s;align-self:center}
.smute[open]>summary::before{transform:rotate(45deg)}
.smute>summary b{color:var(--txt)}
.smute>summary span{font-weight:500;font-size:12px;color:var(--mut)}
.smute>summary:hover{color:var(--txt)}
.smute .stem{opacity:.7}
.emodal .smute .stem{margin-top:8px}

/* Узко (модалка 440px и телефон): волна уходит второй строкой во всю ширину */
.emodal .stem,.emlist .stem{flex-wrap:wrap;row-gap:8px}
.emodal .stem-nm{flex:1 1 0}
.emodal .swave{order:9;flex:1 1 calc(100% - 50px)}
.emodal .stime{order:10}
/* Модалка на телефоне: иконка и подпись формата съедали имя до 28px («В…», замер 16.09) */
@media (max-width:480px){
  .emodal .stem{column-gap:8px;padding:10px 11px}
  .emodal .stem-ic,.emodal .stem-fmt{display:none}
  .emodal .swave{flex-basis:calc(100% - 44px)}
}
@media (max-width:640px){
  .tfiles .stem{flex-wrap:wrap;row-gap:6px;column-gap:10px}
  .tfiles .stem-nm{flex:1 1 0}
  .tfiles .swave{order:9;flex:1 1 calc(100% - 50px);height:36px}
  .tfiles .stime{order:10}
}

/* Паразитный горизонтальный скролл: шапка платформы (.csh-acts) на мобиле оказывается
   на ~30px шире экрана, страницу можно утащить пальцем вбок, и любой fixed-слой (плеер,
   шторка, эти модалки) считает себя по распёртой ширине и уезжает за правый край.
   Замерено на 390px: scrollWidth 420 при clientWidth 390 — причём и на прод-версии, до
   правок ниже. На /beats/ с той же шапкой скролла нет, потому что там overflow погашен.
   Тот же приём уже применён к .lpanel выше по файлу — здесь гасим на уровне страницы. */
/* ⚠️ overflow-x:hidden НА BODY делает его скролл-контейнером, и тогда position:sticky у шапки
   липнет к body (который сам не прокручивается) — шапка уезжает вверх вместе с лентой, а на
   экране остаётся один плеер, будто в воздухе (скрин владельца 17.08 #542). Поэтому по оси X
   режем на html, а телу даём clip: он гасит боковой скролл, но контейнером НЕ становится.
   Первопричину распирания (шапка на 390px вылезала на 30px за край) починили в cr-header.js. */
html{overflow-x:hidden;max-width:100%}
body{overflow-x:clip;max-width:100%}

/* ═══ Полноэкранные модалки воронки ═══
   Две точки, где канал терял людей (замер 16.08): 7 из 20 регистраций с ИИ-статей
   доходили до студии и уходили, не сделав ни одной генерации (баланс нетронут, 10 кр);
   а те, кто выработал кредиты в ноль, видели пейволл с одной только подпиской 990 ₽ —
   6 показов, 0 кликов, при том что единственная реальная покупка была пакетом за 590 ₽.
   Отсюда: экран-подсказка на первый визит и пейволл, где рядом с подпиской лежат паки. */
.fsm{position:fixed;inset:0;z-index:110;display:none;background:rgba(8,8,11,.86);backdrop-filter:blur(8px);overflow-y:auto;padding:24px 20px}
.fsm.show{display:flex;align-items:center;justify-content:center}
.fsm-box{width:100%;max-width:720px;background:var(--bg2);border:1px solid var(--line);border-radius:22px;
  padding:32px 28px 26px;position:relative;box-shadow:0 40px 90px rgba(0,0,0,.6);margin:auto}
.fsm-x{position:absolute;top:14px;right:16px;width:36px;height:36px;border:0;background:rgba(255,255,255,.06);
  color:var(--mut);border-radius:50%;font-size:24px;line-height:1;cursor:pointer;transition:.15s}
.fsm-x:hover{background:rgba(255,255,255,.14);color:#fff}
.fsm-box h3{font-size:clamp(22px,3.4vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.16;margin:0 0 8px;color:#fff}
.fsm-sub{color:var(--mut);font-size:15px;line-height:1.55;margin:0 0 22px;max-width:52ch}
.fsm-foot{margin-top:18px;text-align:center}
.fsm-later{background:none;border:0;color:var(--mut);opacity:.75;cursor:pointer;font:inherit;font-size:14px;padding:8px}
.fsm-later:hover{opacity:1;color:var(--txt)}

/* первый запуск: три готовые заготовки — клик заполняет форму (обработчик .icard общий) */
.fsm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fsm-note{margin:16px 0 0;font-size:13px;color:var(--mut2);text-align:center}

/* пейволл: пак или подписка рядом, чтобы был выбор кроме «уйти» */
.pw-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;margin:0 0 18px} /* колонок столько, сколько паков: p400 с первого экрана снят (#900) */
.pw-pack{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 12px;text-align:center;
  cursor:pointer;transition:.15s;color:var(--txt);font:inherit}
.pw-pack:hover{border-color:var(--gold);transform:translateY(-2px)}
.pw-pack-head{display:flex;align-items:baseline;justify-content:center;gap:6px}
.pw-pack .n{display:block;font-size:20px;font-weight:800;color:#fff;line-height:1.1}
.pw-pack .u{display:block;font-size:12px;color:var(--mut);margin:2px 0 8px}
.pw-pack .p{display:block;font-size:15px;font-weight:700;color:var(--au)}
.pw-pack.best{border-color:var(--au)}
.pw-pack .badge{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#1a1300;background:var(--au);padding:2px 7px;border-radius:20px;line-height:1.4}
/* --gold в этом файле — КРАСНЫЙ (см. правило проекта), поэтому именно им размечена скидка,
   а не золотым --au — он уже занят карточкой «выгоднее», разные предложения не должны сливаться. */
.pw-pack.disc{border-color:var(--gold)}
.pw-pack .badge-hot{color:#fff;background:var(--gold)}
/* Подсказка про подписку тем, кто уже покупал пак (18.09): кредит в подписке дешевле,
   но в пейволле этого не было видно — люди брали второй пак по цене дороже. */
.pw-again{margin:0 0 12px;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.45;
  color:#e8e8ee;background:rgba(225,22,43,.10);border:1px solid rgba(225,22,43,.28)}
.pw-again b{color:#fff}
/* Чем платить — говорим ДО перехода в банк (19.09): 69 брошенных оплат за месяц при 4 отказах банка. */
.pw-pay{margin:-6px 0 14px;font-size:12.5px;color:var(--mut2)}
.pw-pack .pw-was{color:var(--mut);font-weight:600;text-decoration:line-through;margin-right:3px;font-size:13px}
.pw-pack .pw-disc-note{display:block;font-size:10.5px;color:var(--gold);margin-top:2px}
.pw-or{display:flex;align-items:center;gap:12px;color:var(--mut2);font-size:12.5px;margin:0 0 16px}
.pw-or::before,.pw-or::after{content:'';flex:1;height:1px;background:var(--line)}
.pw-sub{background:var(--card);border:1px solid var(--line2);border-radius:16px;padding:18px}
.pw-sub h4{margin:0 0 8px;font-size:16px;font-weight:800;color:#fff}
.pw-sub ul{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px;font-size:13.5px;color:var(--mut)}
.pw-sub li{display:flex;gap:9px;align-items:baseline}
.pw-sub li i{font-style:normal;flex-shrink:0}

@media(max-width:640px){
  .fsm{padding:16px 12px}
  .fsm-box{padding:26px 18px 20px;border-radius:18px}
  .pw-packs{grid-template-columns:1fr}
  .pw-pack{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:12px 14px}
  .pw-pack-head{justify-content:flex-start}
  .pw-pack .u{margin:0}
  /* Заготовки на мобиле кладём горизонтально: в одну колонку карточка 4/3 занимала почти
     весь экран, три подряд превращались вдлинную ленту и кнопка «опишу сам» уезжала за край. */
  .fsm-cards{grid-template-columns:1fr;gap:10px}
  .fsm-cards .icard{display:grid;grid-template-columns:88px 1fr;grid-template-rows:auto auto;
    align-items:center;column-gap:13px;padding:0 14px 0 0;text-align:left}
  .fsm-cards .icard-art{grid-row:1/3;width:88px;height:88px;aspect-ratio:auto}
  .fsm-cards .icard-t{grid-column:2;align-self:end;padding:0;font-size:15px}
  .fsm-cards .icard-s{grid-column:2;align-self:start;padding:2px 0 0;font-size:12.5px}
}

/* ── ПРОКРУТКА НЕ ПРОБИВАЕТ НА ФОН ──────────────────────────────────────────────
   Жалоба владельца 18.08: «листаю текст внутри модалки — листается и сайт на фоне».
   Это overscroll chaining: когда внутренний блок домотан до края, колесо/палец
   продолжают крутить страницу под ним. body{overflow:hidden} от этого не спасает —
   он убирает полосу, но не цепочку прокрутки.
   Замер 18.08: из десяти прокручиваемых блоков студии защита стояла ровно у одного
   (.tmenu.sheet), поэтому чиним разом все. */
.lpanel,
.lyrm-body,          /* большой редактор текста */
.sing-body,          /* шторка «Как спеть» */
.emodal-box,         /* модалка экстр */
.fsm,                /* полноэкранная модалка */
.isheet,             /* шторки: жанры, дорожки */
.gsfams,.gssubs      /* колонки внутри шторки жанров */
{overscroll-behavior:contain}

/* Сорванная генерация (#571): трек упёрся в потолок Suno 7:59 и вместо песни склеил куски.
   Метка нужна, чтобы человек не гадал, почему «трек на 8 минут» звучит как набор обрывков. */
.trunaway{margin:10px 12px 12px;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.5;
  color:var(--mut);background:rgba(225,22,43,.07);border:1px solid rgba(225,22,43,.25)}
.trunaway b{color:var(--txt)}

/* Ручка меню трека: на десктопе меню — выпадающий список, полоска там не нужна;
   на мобиле оно шторка, и за эту полоску его тянут вниз (см. attachSheetSwipe, #596). */
.tmenu .sheet-grab{display:none}
.tmenu.sheet .sheet-grab{display:block}

/* Вкладка тянет свой полный список (избранное/демо) — на время запроса показываем это
   точкой-пульсом, иначе клик выглядит так, будто ничего не произошло. */
.feed-tabs .ftab.loading{position:relative}
.feed-tabs .ftab.loading::after{content:'';position:absolute;right:6px;top:50%;width:5px;height:5px;margin-top:-2.5px;
  border-radius:50%;background:currentColor;opacity:.55;animation:ftabPulse .9s ease-in-out infinite}
@keyframes ftabPulse{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:.8;transform:scale(1)}}

/* Вопрос «Для чего тебе песня?» на экране первого запуска (07.09) */
.fr-intent{margin:0 0 14px}
.fr-intent-q{font-weight:700;margin:0 0 8px}
.fr-intent-q span{font-weight:400;color:var(--mut);font-size:13px;margin-left:6px}
.fr-intent-row{display:flex;flex-wrap:wrap;gap:8px}
.fr-ib{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 14px;color:var(--txt);font:inherit;font-size:14px;cursor:pointer;transition:.15s}
.fr-ib:hover{border-color:var(--gold)}
.fr-ib.on{border-color:var(--gold);background:rgba(225,22,43,.12)}  /* --gold в этом файле КРАСНЫЙ */
.fr-ib:disabled{cursor:default;opacity:.75}
.fr-intent.done{opacity:.5}
@media(max-width:560px){.fr-ib{font-size:13px;padding:8px 11px}.fr-intent-q span{display:block;margin:2px 0 0}}

/* ── ВРЕМЕННАЯ плашка «перешли на Suno V6» (10.09.2026) ──────────────────────
   Убирается вместе с блоком в music/index.php (MC_V6_BANNER=false).
   Не красная: красный у нас — цвет ДЕЙСТВИЯ (кнопки «Создать»), и новость, кричащая
   тем же цветом, спорит с ним за внимание. Поэтому золото — оно в палитре как раз
   для «статуса и ценности», а не для «нажми сюда». ⚠️ --gold здесь КРАСНЫЙ, золото — --au. */
.v6bar{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;padding:12px 14px;
  border:1px solid rgba(205,179,106,.34);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(205,179,106,.10),rgba(205,179,106,.04))}
.v6tag{flex:none;margin-top:1px;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#1a1400;background:linear-gradient(135deg,var(--au),#e7cf94);
  border-radius:var(--r-pill);padding:3px 9px}
.v6txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.v6txt b{font-size:13.5px;font-weight:700;color:var(--txt)}
.v6txt span{font-size:12.5px;line-height:1.5;color:var(--mut)}
/* Тап-цель не меньше 40px: сам крестик рисуется мелким, но нажимается площадью
   (замер на 390px давал 15×20 — на телефоне в такое не попасть). */
.v6x{flex:none;margin:-8px -6px -8px auto;background:transparent;border:0;color:var(--mut2);
  font-size:20px;line-height:1;cursor:pointer;min-width:40px;min-height:40px;
  display:grid;place-items:center}
.v6x:hover{color:var(--txt)}
@media(max-width:600px){.v6bar{padding:11px 12px;gap:10px}.v6txt b{font-size:13px}}