/* [ПРОТОТИП] Способ оплаты в окне пополнения (shell-proto.js) — до переноса в h1.css. Только токены: работает в обеих темах. */
.tp-method {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tp-method button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}

.tp-method button:hover {
  border-color: color-mix(in srgb, var(--fg) 30%, transparent);
}

.tp-method button[aria-checked="true"] {
  border-color: #E0457B;
  background: color-mix(in srgb, #E0457B 8%, transparent);
}

.tp-method button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tp-m-ic {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  color: var(--fg2);
}

.tp-m-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tp-m-t b {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 600;
}

.tp-m-t b i {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 100px;
  background: var(--grad);
  color: var(--on-media);
}

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

.tp-m-ck {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}

.tp-method button[aria-checked="true"] .tp-m-ck {
  border-color: transparent;
  background: var(--grad);
  color: var(--on-media);
}

.tp-card-wait {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 140px;
  color: var(--fg2);
  font-size: 14px;
}

/* экран QR-кода: код — на белой карточке (сканеру нужен белый фон в любой теме), под ним шаги и статус */
.tp-qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
  border-radius: 22px;
  border: 2px solid transparent;
  background: linear-gradient(var(--on-media), var(--on-media)) padding-box, var(--grad) border-box;
  box-shadow: 0 14px 36px color-mix(in srgb, #E0457B 18%, transparent);
}

/* рамка — градиентом бренда */
.tp-qr-card .tp-qr-img {
  width: 200px;
  height: 200px;
  padding: 0;
  border-radius: 0;
  background: none;
  image-rendering: pixelated;
}

.tp-qr-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding-top: 10px;
  border-top: 1px dashed #DCDCE2;
  font-size: 12.5px;
  color: #686872;
}

/* карточка всегда белая — цвета текста на ней постоянные */
.tp-qr-cap b {
  font-size: 18px;
  color: #141416;
  font-variant-numeric: tabular-nums;
}

.tp-qr-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: s;
  text-align: left;
  font-size: 13px;
  color: var(--fg2);
}

.tp-qr-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  counter-increment: s;
}

.tp-qr-steps li::before {
  content: counter(s);
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
}

.tp-qr-steps.mob,
.tp-qr-link .mob {
  display: none;
}

.tp-qr-status {
  padding: 8px 14px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  color: var(--fg2);
}

.tp-qr-link {
  border-bottom-color: color-mix(in srgb, var(--fg) 30%, transparent);
}

.tp-qr-link:hover {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

@media (max-width: 560px),
(pointer: coarse) {

  /* на телефоне свой экран не отсканировать: главное — перейти в приложение банка */
  .tp-qr .tp-head {
    order: -3;
  }

  .tp-qr-link {
    order: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    /* внизу, под кодом — под большим пальцем */
    border: 0;
    border-radius: 100px;
    background: radial-gradient(140% 200% at -10% 20%, #DE642B 0%, #E54270 100%);
    color: var(--on-media);
    font-size: 15px;
    font-weight: 600;
  }

  .tp-qr-link:hover {
    color: var(--on-media);
  }

  .tp-qr-steps.desk,
  .tp-qr-link .desk {
    display: none;
  }

  .tp-qr-link .mob {
    display: inline;
  }

  .tp-qr-steps.mob {
    display: flex;
    order: -2;
  }

  .tp-qr-card {
    order: -1;
  }

  .tp-qr-card {
    padding: 12px 12px 10px;
  }

  .tp-qr-card .tp-qr-img {
    width: 150px;
    height: 150px;
  }
}

/* упёрлись в лимит символов (shell-proto.js, п. 5): поле вздрагивает и подсвечивается, счётчик краснеет */
.lim-hit {
  animation: lim-shake .32s cubic-bezier(.36, .07, .19, .97);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 55%, transparent) !important;
  transition: box-shadow .2s;
}

@keyframes lim-shake {

  20%,
  60% {
    transform: translateX(-3px);
  }

  40%,
  80% {
    transform: translateX(3px);
  }
}

.lim-full {
  color: var(--bad) !important;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .lim-hit {
    animation: none;
  }
}

/* TODO(влад): в выезжающем меню на телефоне (.nav.sidenav — колонка с прокруткой) карточка «Пополнить баланс»
   сжималась по высоте, когда пунктов не хватало места: видна была только полоска заголовка. Не сжимаем — меню прокручивается */
.nav.sidenav .sn-promo {
  flex-shrink: 0;
}

/* ── полноэкранный плеер на телефоне (shell-proto.js, п. 7) ── TODO(влад): перенести в h1.css / h1.js */
#fullPlayer {
  color: var(--fg);
}

/* data-theme="dark" внутри — цвет текста берём заново, иначе он наследуется от светлой страницы */
body:has(#fullPlayer.open) .vmenu {
  z-index: 130;
}

/* ПРОБУЕМ (20.10.2026, как undo-snackbar): тост «Вернуть» / «Отменить» после удаления — прямо под кнопкой, на которую
   нажали (место ставит shell-proto.js), появляется «пружинкой», полоска градиента внизу тает 6 с — видно, сколько осталось,
   чтобы вернуть. Остальные тосты — сверху (правило 6 кита). TODO влад: в h1.* */
html body .stoast.undo {
  overflow: hidden;
  animation: st-pop .38s cubic-bezier(.34, 1.56, .64, 1);
}

html body .stoast.undo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--grad);
  transform-origin: left;
  animation: st-drain 6s linear forwards;
}

@keyframes st-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -6px) scale(.94);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes st-drain {
  to {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .stoast.undo {
    animation: none;
  }
}

/* меню «⋯» — поверх плеера (у плеера z-index 100) */
.fp-bottom {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fp-bottom [data-fplyr][aria-pressed="true"] {
  background: var(--fg);
  color: var(--bg);
  border-color: transparent;
}

.fp-lyr {
  display: none;
}

.fplayer.lyr .fp-cov {
  display: none;
}

.fplayer.lyr .fp-lyr {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -22px;
  padding: 18px 22px 45%;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 78%, transparent);
  mask-image: linear-gradient(transparent, #000 10%, #000 78%, transparent);
}

.fplayer.lyr .fp-lyr::-webkit-scrollbar {
  display: none;
}

.fplayer.lyr .fp-meta {
  margin-top: 0;
}

.fp-lyr .tp-lyr {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.32;
}

.fp-lyr .ky-l {
  margin: 0 0 14px;
  padding: 0;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--fg) 40%, transparent);
  cursor: pointer;
  transition: color .3s;
}

.fp-lyr .ky-l.past {
  color: color-mix(in srgb, var(--fg) 58%, transparent);
}

.fp-lyr .ky-l.on {
  color: var(--fg);
}

.fp-lyr .ky-w {
  color: inherit !important;
  text-shadow: none !important;
  filter: none !important;
}

.fp-lyr .ky-tag {
  margin: 22px 0 10px;
  font-size: 11.5px;
}

.fp-lyr .ky-gap {
  height: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .fp-lyr .ky-l {
    transition: none;
  }
}

/* ── меню VSUI.menu (h1.js) — общее для всех разделов. TODO(влад): в h1.css ── */
/* несколько подменю: открыто только то, над которым мышь (иначе первое, получившее фокус, висит поверх остальных) */
@media (hover: hover) and (min-width: 561px) {
  .vmenu:hover .has-sub:not(:hover)>.vm-sub {
    display: none;
  }
}

/* телефон: подменю раскрывается внутри меню; заливка только у строки пункта; не всплывает сбоку от фокуса */
@media (hover: none),
(max-width: 560px) {
  .vm-i.has-sub.open {
    background: none;
  }

  .vm-i.has-sub.open>.vm-sub {
    margin-top: 2px;
    border-radius: 0;
    border-top: 1px solid var(--line);
    padding-top: 6px;
  }

  .has-sub:focus-within:not(.open)>.vm-sub {
    display: none;
  }
}

/* телефон: меню — шторкой снизу на всю ширину, с затемнением (правило кита 12), а не всплывашкой у кнопки:
   длинные пункты («WAV или MP3 после мастеринга») обрезались краем экрана, низ меню уходил под край */
@media (max-width: 560px) {
  .vmenu {
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    min-width: 0 !important;
    max-height: min(80vh, calc(100dvh - 24px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    border-radius: 22px;
    box-shadow: var(--shadow-2);
    animation: vm-sheet .24s cubic-bezier(.2, .8, .2, 1);
  }

  .vmenu .vm-i {
    height: auto;
    min-height: 46px;
    font-size: 15px;
  }

  .vmenu .vm-i .grow {
    white-space: normal;
  }

  .vmenu .vm-sub .vm-i {
    min-height: 42px;
    font-size: 14px;
  }

  @keyframes vm-sheet {
    from {
      transform: translateY(28px);
      opacity: 0;
    }
  }

  /* подложка под шторкой (её ставит shell-proto.js): ловит нажатие мимо меню, чтобы не сработало то, что под ней */
  .vmenu-bd {
    position: fixed;
    inset: 0;
    background: var(--backdrop);
    animation: vm-bd .2s ease-out;
    touch-action: none;
  }

  @keyframes vm-bd {
    from {
      opacity: 0;
    }
  }
}

@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
  .vmenu {
    animation: none;
  }
}

/* Нижний плеер на телефоне: «играть» — простой значок, без цветного круга (как мини-плеер в музыкальных приложениях).
   Круг в 44 px тянул на себя внимание сильнее списка треков. Полноэкранный плеер не трогаем. TODO влад: перенести в h1.css */
@media (max-width: 900px) {
  .siteplayer .pl-play {
    width: 40px;
    height: 40px;
    background: transparent !important;
    color: var(--fg) !important;
  }

  .siteplayer .pl-play svg {
    width: 26px;
    height: 26px;
  }

  .siteplayer .pl-play:active {
    background: var(--line) !important;
    transform: none;
  }
}

/* ══ главные кнопки (.cf-create) — аудит светлой темы 18.10.26. TODO влад: перенести в h1.css ══ */
/* С-Н009: отклик на наведение (на нажатие уже есть scale .97) */
.cf-create {
  transition: transform .15s, filter .15s, box-shadow .15s;
}

@media (hover: hover) {
  .cf-create:not(:disabled):not(.sending):not(.done):hover {
    filter: brightness(1.07);
    box-shadow: 0 6px 18px rgba(229, 66, 112, .28);
  }
}

/* С-Н011: белый текст на градиенте — полужирный, как в фото и пополнении (в музыке был 400) */
.cf-create {
  font-weight: 600;
}

/* С-Н010: неактивная главная кнопка в светлой теме — серая с читаемым текстом, а не выцветший градиент */
:where([data-theme="light"]) .cf-create:disabled:not(.need-pay) {
  opacity: 1;
  filter: none;
  background: var(--line);
  color: var(--muted);
}

:where([data-theme="light"]) .cf-create:disabled:not(.need-pay)::after {
  display: none;
}

/* М-Н006: цена в меню «⋯» видна всегда, а не только при наведении — цена должна быть на кнопке */
.vm-p.hov {
  opacity: 1;
}

/* С-Н002: тост — сверху по центру, а не над нижним краем: внизу он ложился на платные кнопки
   («Создать 2 трека за 19 ₽», «Создать фото за 8 ₽», «Улучшить звук»). TODO влад: перенести в h1.css;
   там же — тип тоста (ошибка / успех), сейчас они одинаково серые */
.stoast {
  /* М-Н073: без top тост вставал за нижний край экрана (top=900 при 1440×900) — строка была закомментирована в b622de4 */
  top: calc(var(--strip-h, 0px) + 16px);
  height: 20px;
  bottom: auto !important;
  animation: st-in .22s ease-out;
}

@media (max-width: 900px) {
  .stoast {
    top: calc(env(safe-area-inset-top, 0px) + 64px + var(--strip-h, 0px));
  }
}

@keyframes st-in {
  from {
    opacity: 0;
    transform: translate(-50%, -8px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* С-Н016: пустой кружок «Банковской картой» читается в светлой теме */
:where([data-theme="light"]) .tp-m-ck {
  border-color: var(--muted);
}

/* С-Н018: «Ждём оплату» — заметный статус: тёплая подложка вместо серой пилюли (крутилка в статусе уже есть) */
.tp-qr-status {
  background: var(--accent-soft);
  color: var(--fg);
  font-weight: 600;
}

/* С-Н017: подсказки свёрнутого меню (.sn-tip) — только для мыши; на телефоне после тапа висели обрезанными */
@media (hover: none) {
  .sn-tip {
    display: none !important;
  }
}

/* Телефон, мини-плеер: только «играть» — маленький «вперёд» рядом выглядел второй кнопкой «играть» */
@media (max-width: 900px) {
  .siteplayer #plNext {
    display: none !important;
  }
}

/* Полноэкранный плеер: «играть» — белый круг 64 px (был градиентный 72 px), нижние действия — один ряд значков */
#fullPlayer .fp-play {
  width: 64px;
  height: 64px;
  background: var(--fg);
  color: var(--bg);
}

#fullPlayer .fp-play svg {
  width: 26px;
  height: 26px;
}

#fullPlayer .fp-bottom {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0;
  padding: 0 2px;
}

#fullPlayer .fp-bottom .pill {
  width: 52px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--fg2);
  font-size: 0;
  justify-content: center;
}

#fullPlayer .fp-bottom .pill svg {
  width: 22px;
  height: 22px;
}

#fullPlayer .fp-bottom .pill:hover {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}

#fullPlayer .fp-bottom [data-fplyr][aria-pressed="true"] {
  background: color-mix(in srgb, var(--fg) 14%, transparent);
  color: var(--fg);
}

/* ИИ-помощник (фото, видео, музыка): «Отправить» — круглая кнопка со стрелкой, как до PR #15 (в unknow.css сейчас
   прямоугольник 93×53 со скруглением 6 %). Если сообщение платное — капсула «↑ 3 ₽» (цена на кнопке, правило кита 3).
   TODO влад: в unknow.css вместо .cf-ai-send { width: 93px; height: 53px; border-radius: 6% } */
html body .cf-ai-send {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  gap: 4px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

html body .cf-ai-send.paid {
  width: auto;
  padding: 0 12px 0 10px;
}

html body .cf-ai-send:disabled {
  opacity: .5;
  cursor: default;
}

/* ══════════ Общие блоки разделов: «Частые вопросы» и финальная карточка ══════════
   Гостевые страницы фото и видео, ТОП-30 в музыке. Один источник — здесь (31.10.2026 перенесено из photo.css и music.css;
   в UI-ките — раздел «Гостевые блоки»). Разметка:
   <div class="vsp-land"><section class="vsp-land-s"><div class="vsp-land-h"><h2>…</h2><p>…</p></div>
     <div class="vsp-faq"><details><summary>Вопрос</summary><p>Ответ</p></details>…</div></section>
     <div class="vsp-land-cta"><b>…</b><span>…</span><button class="cf-create">…</button></div></div>
   Картинка финальной карточки — фон ::before (раздел задаёт свой). Открытие ответа плавное — скрипт раздела (faqAnim). */
.vsp-land {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 40px 0 8px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
}

.vsp-land-h h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  color: var(--fg);
}

.vsp-land-h p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg2);
  max-width: 640px;
}

.vsp-land-s {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vsp-land-s > .pill {
  align-self: flex-start;
  text-decoration: none;
}

.vsp-land-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.vsp-faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.vsp-faq details {
  border-bottom: 1px solid var(--line);
}

.vsp-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 48px 18px 16px;
  margin: 4px 0;
  border-radius: 14px;
  position: relative;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--fg);
  transition: color .2s, background .2s;
}
/* 02.11.2026: строка вопроса подсвечивается при наведении; открытый вопрос — мягкая подложка и полоска цветом бренда слева */

.vsp-faq summary:hover {
  background: var(--hover);
}

.vsp-faq summary:hover::after {
  border-color: var(--fg);
}

.vsp-faq summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.vsp-faq details {
  position: relative;
  transition: background .25s;
}

.vsp-faq details[open]:not(.vsp-closing) {
  background: linear-gradient(90deg, rgba(224, 69, 123, .09), transparent 75%);
}

.vsp-faq details[open]:not(.vsp-closing)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #A23BF5, #E0457B, #DE762B);
}

.vsp-faq details[open] summary:hover {
  background: transparent;
}

.vsp-faq summary::-webkit-details-marker {
  display: none;
}

.vsp-faq summary::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border: solid var(--fg2);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform .3s cubic-bezier(.22,1,.36,1), margin .3s;
}

.vsp-faq details[open]:not(.vsp-closing) summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.vsp-faq p {
  margin: 0 0 16px;
  padding: 0 48px 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg2);
}

.vsp-land-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 260px;
  padding: 36px 20px;
  border-radius: 22px;
  text-align: center;
  background: radial-gradient(120% 140% at 50% 0%, rgba(229,66,112,.22), transparent 60%), var(--card);
}

.vsp-land-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bg) center / cover no-repeat;
}

.vsp-land-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(90% 120% at 50% 50%, rgba(10,10,12,.55), rgba(10,10,12,.88));
}

.vsp-land-cta b {
  font-size: 26px;
  color: var(--on-media);
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
}

.vsp-land-cta span {
  font-size: 14px;
  color: rgba(255,255,255,.85);
}

.vsp-land-cta .cf-create {
  width: auto;
  padding: 0 32px;
  height: 48px;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .vsp-land {
    gap: 28px;
    padding-top: 28px;
  }

  .vsp-land-h h2 {
    font-size: 19px;
  }
}
/* [→ Влад, h1.css] свёрнутое меню: аватар по центру колонки, как иконки (05.11.2026).
   Подписи и стрелка в .sn-prof сжаты до 0, но gap 10px между ними оставался — аватар уезжал на 10px влево */

.nav-mini .sn-prof {
  gap: 0;
}