/* =========================================================================
   DivoDivo — дизайн-система «Персиковое облако»
   Слой 4: библиотека, плеер, страницы фото/видео/профиль/платежи, модалки
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Библиотека композиций
   ------------------------------------------------------------------------- */

.library-tools {
  gap: 10px;
}

.favorite-filter,
.library-clear {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink-soft);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.favorite-filter:hover,
.library-clear:hover {
  transform: translateY(-1px);
  color: var(--rose-500);
  border-color: var(--rose-300);
  background: #fff;
}

.favorite-filter.is-active {
  color: #fff;
  border-color: transparent;
  background: var(--grad-accent);
  box-shadow: var(--sh-glow);
}

.processing-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--sh-xs);
  overflow: hidden;
}

.processing-card__bar {
  background: linear-gradient(90deg, transparent, rgba(255, 172, 200, 0.85), rgba(255, 205, 176, 0.9), transparent);
}

.processing-card__text {
  color: var(--ink-soft);
}

.library-empty,
.video-library-empty,
.payments-empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.56);
  color: var(--ink-dim);
}

.composition-card {
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  animation: sh-rise 460ms var(--ease-out) backwards;
}

.composition-card:hover {
  transform: translateY(-3px);
  background: #fff;
  border-color: rgba(250, 190, 212, 0.7);
  box-shadow: var(--sh-md);
}

.composition-card.is-playing {
  border-color: var(--rose-300);
  background: linear-gradient(140deg, rgba(255, 240, 233, 0.95), rgba(255, 236, 244, 0.9));
  box-shadow: var(--sh-sm), 0 0 0 3px rgba(255, 196, 218, 0.28);
}

.composition-card__cover {
  border-radius: var(--r-sm);
  box-shadow: var(--sh-xs);
}

.composition-card__cover-indicator {
  background: rgba(72, 40, 56, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.composition-card__duration {
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(72, 40, 56, 0.56);
  color: #fff;
}

.composition-card__title {
  color: var(--ink-strong);
}

.composition-card__desc {
  color: var(--ink-dim);
}

.composition-card__action-pill {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.composition-card__action-pill:hover {
  transform: translateY(-1px);
  border-color: var(--rose-300);
  color: var(--rose-600);
  box-shadow: var(--sh-sm);
}

.composition-card__icon,
.composition-card__menu,
.composition-card__star,
.composition-card__rename {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink-dim);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.composition-card__icon:hover,
.composition-card__menu:hover,
.composition-card__star:hover,
.composition-card__rename:hover {
  transform: translateY(-1px) scale(1.06);
  color: var(--rose-500);
  border-color: var(--rose-300);
  background: #fff;
}

.composition-card__star.is-active {
  color: #ff9a3d;
  border-color: rgba(255, 178, 110, 0.6);
  background: rgba(255, 240, 224, 0.95);
}

.composition-menu {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  box-shadow: var(--sh-lg);
  animation: sh-rise 200ms var(--ease-out) backwards;
}

.composition-menu__item {
  border-radius: var(--r-xs);
  color: var(--ink-soft);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.composition-menu__item:hover {
  color: var(--ink-strong);
  background: rgba(255, 228, 237, 0.8);
  transform: translateX(3px);
}

.composition-menu__item--danger {
  color: #e05a7f;
}

.composition-menu__divider {
  background: var(--line);
}

.library-pagination__nav,
.library-pagination__page,
.payments-page {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink-soft);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.library-pagination__nav:hover:not(:disabled),
.library-pagination__page:hover,
.payments-page:hover {
  transform: translateY(-1px);
  color: var(--ink-strong);
  border-color: var(--rose-300);
  background: #fff;
}

.library-pagination__page.is-active,
.payments-page.is-active {
  color: #fff;
  border-color: transparent;
  background: var(--grad-accent);
  box-shadow: var(--sh-glow);
}

.library-pagination__nav:disabled {
  opacity: 0.42;
}

/* задачи и результаты генерации */
.task-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--sh-xs);
}

.task-card__head strong {
  color: var(--ink-strong);
}

.task-card__meta,
.task-card__empty {
  color: var(--ink-dim);
}

.generated-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.8);
}

.generated-item p {
  color: var(--ink-soft);
}

.generated-item__links a {
  color: var(--rose-600);
}

/* -------------------------------------------------------------------------
   2. Текст песни (выдвижная панель)
   ------------------------------------------------------------------------- */

.lyrics-drawer {
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.94), rgba(255, 248, 250, 0.86));
  backdrop-filter: blur(22px) saturate(126%);
  -webkit-backdrop-filter: blur(22px) saturate(126%);
  box-shadow: var(--sh-md);
}

.lyrics-drawer__title {
  color: var(--ink-strong);
}

.lyrics-drawer__close {
  color: var(--ink-dim);
  transition: color var(--dur) var(--ease);
}

.lyrics-drawer__close:hover {
  color: var(--rose-600);
}

.lyrics-drawer__status {
  color: var(--ink-soft);
}

.lyrics-drawer__loading span {
  background: var(--grad-accent);
}

.lyrics-drawer__content {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
}

.lyrics-variant {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.8);
}

.lyrics-variant__choose {
  border-radius: var(--r-pill);
  background: var(--grad-accent);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--sh-glow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.lyrics-variant__choose:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-glow-strong);
}

.lyrics-variant__text {
  color: var(--ink-soft);
}

/* -------------------------------------------------------------------------
   3. Плеер
   ------------------------------------------------------------------------- */

.player-dock {
  grid-template-columns: minmax(0, 1.35fr) auto minmax(0, 0.9fr) 38px;
  gap: 12px;
  padding: 14px 18px 20px;
  border: 1px solid var(--line-light);
  border-radius: var(--r-xl) var(--r-xl) var(--r-md) var(--r-md);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.97), rgba(255, 246, 249, 0.93));
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  box-shadow: var(--sh-lg), var(--sh-inset);
  animation: sh-rise 420ms var(--ease-out) backwards;
}

.player-dock > *,
.player-dock__track,
.player-dock__meta,
.player-dock__controls,
.player-dock__volume,
.player-progress {
  min-width: 0;
}

.player-dock__track {
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
}

.player-dock__cover {
  width: 54px;
  height: 54px;
}

.player-dock__meta strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.player-dock__controls {
  gap: 8px;
}

.player-btn {
  width: 38px;
  height: 38px;
}

.player-btn--play {
  width: 46px;
  height: 46px;
}

/* ползунки в тон палитре */
.player-progress,
.player-dock__volume input,
input[type="range"].music-tuning__range,
body[data-page="music"] .music-tuning__range {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 205, 176, 0.95), rgba(250, 160, 195, 0.95));
  box-shadow: inset 0 1px 2px rgba(206, 124, 157, 0.18);
  cursor: pointer;
}

.player-progress::-webkit-slider-thumb,
.player-dock__volume input::-webkit-slider-thumb,
body[data-page="music"] .music-tuning__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--rose-400);
  background: #fff;
  box-shadow: 0 3px 10px rgba(238, 115, 155, 0.4);
  transition: transform var(--dur-fast) var(--ease);
}

.player-progress::-webkit-slider-thumb:hover,
.player-dock__volume input::-webkit-slider-thumb:hover,
body[data-page="music"] .music-tuning__range::-webkit-slider-thumb:hover {
  transform: scale(1.18);
}

.player-progress::-moz-range-track,
.player-dock__volume input::-moz-range-track,
body[data-page="music"] .music-tuning__range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 205, 176, 0.95), rgba(250, 160, 195, 0.95));
}

.player-progress::-moz-range-thumb,
.player-dock__volume input::-moz-range-thumb,
body[data-page="music"] .music-tuning__range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--rose-400);
  background: #fff;
}

/* на узких колонках док перестраивается в два ряда — ничего не теряется */
@media (max-width: 1180px) and (min-width: 761px) {
  .player-dock {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 10px;
  }

  .player-dock__volume {
    grid-column: 1;
    justify-content: flex-start;
    max-width: 190px;
  }

  .player-close {
    grid-column: 2;
    justify-self: end;
  }
}

/* мобильный док: обложка+название, ряд управления, громкость и закрытие, прогресс */
@media (max-width: 760px) {
  .player-dock {
    grid-template-columns: minmax(0, 1fr) 38px;
    grid-template-areas:
      "track close"
      "controls controls"
      "volume volume"
      "progress progress";
    gap: 12px;
    padding: 14px 14px 16px;
    border-radius: var(--r-lg);
  }

  .player-dock__track {
    grid-area: track;
  }

  .player-dock__controls {
    grid-area: controls;
    justify-content: center;
    gap: 10px;
  }

  .player-dock__volume {
    grid-area: volume;
    justify-content: flex-start;
    max-width: 220px;
  }

  .player-close {
    grid-area: close;
    justify-self: end;
    align-self: start;
  }

  .player-progress {
    grid-area: progress;
  }
}

.player-dock__cover {
  border-radius: var(--r-sm);
  box-shadow: var(--sh-sm);
}

.player-dock__meta strong {
  color: var(--ink-strong);
}

.player-dock__time {
  color: var(--ink-dim);
}

.player-btn,
.player-close {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink-soft);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.player-btn:hover,
.player-close:hover {
  transform: translateY(-1px) scale(1.05);
  color: var(--rose-600);
  border-color: var(--rose-300);
  background: #fff;
}

.player-btn--play {
  color: #fff;
  border-color: transparent;
  background: var(--grad-accent);
  box-shadow: var(--sh-glow);
}

.player-btn--play:hover {
  color: #fff;
  border-color: transparent;
  background: var(--grad-accent-hover);
  box-shadow: var(--sh-glow-strong);
}

.player-btn.is-active {
  color: var(--rose-600);
  border-color: var(--rose-300);
  background: rgba(255, 236, 243, 0.95);
}

.player-dock__volume span {
  color: var(--ink-dim);
}

.player-dock__volume input,
.player-progress {
  accent-color: var(--rose-400);
}

/* -------------------------------------------------------------------------
   4. Страница «Создать фото»
   ------------------------------------------------------------------------- */

.results-panel--photo,
.results-panel--video {
  padding: 24px;
}

.photo-field,
.photo-pill-select {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--sh-xs);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.photo-field:hover,
.photo-pill-select:hover {
  border-color: var(--rose-300);
  background: #fff;
  box-shadow: var(--sh-sm);
}

.photo-field__icon,
.photo-pill-select__icon {
  color: var(--rose-500);
}

.photo-field__label {
  color: var(--ink-soft);
}

.photo-native-select {
  color: var(--ink);
  background: transparent;
}

.photo-native-select option {
  color: var(--ink);
  background: #fff;
}

.photo-slot,
.video-slot,
.animate-slot {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink-soft);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.photo-slot:hover,
.video-slot:hover {
  transform: translateY(-2px);
  border-color: var(--rose-400);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--sh-sm);
}

.photo-slot--disabled,
.video-slot--disabled,
.video-slot--disabled:hover {
  opacity: 0.5;
  transform: none;
}

.photo-slot__plus,
.video-slot__icon {
  color: var(--rose-400);
}

.photo-slot__label,
.video-slot__label {
  color: var(--ink-soft);
}

.photo-slot__caption,
.video-slot__caption {
  background: rgba(72, 40, 56, 0.6);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.photo-slot__remove,
.video-slot__remove,
.video-reference-file__remove {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(72, 40, 56, 0.62);
  color: #fff;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.photo-slot__remove:hover,
.video-slot__remove:hover,
.video-reference-file__remove:hover {
  transform: scale(1.08);
  background: #e05a7f;
}

.photo-note,
.video-note {
  color: var(--ink-dim);
}

.photo-stage {
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 246, 249, 0.56));
  box-shadow: var(--sh-inset);
}

.photo-stage__card {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}

.photo-stage__card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--sh-lg);
}

.photo-stage__empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink-soft);
}

.photo-stage__empty h3,
.video-stage__empty h3 {
  color: var(--ink-strong);
}

.photo-stage__empty p,
.video-stage__empty p {
  color: var(--ink-dim);
}

.photo-history-panel,
.video-history-panel {
  border-top: 1px solid var(--line);
}

.photo-history-panel__head h3,
.video-history-panel__head h3 {
  color: var(--ink-strong);
}

.photo-history-card,
.video-history-card,
.animate-history-card {
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.photo-history-card:hover,
.video-history-card:hover,
.animate-history-card:hover {
  transform: translateY(-4px);
  border-color: rgba(250, 190, 212, 0.75);
  box-shadow: var(--sh-md);
}

.photo-history-card__overlay {
  background: linear-gradient(180deg, transparent, rgba(72, 40, 56, 0.68));
}

.photo-history-card__overlay span {
  color: #fff;
}

.video-history-card--active,
.animate-history-card--active {
  border-color: var(--rose-300);
  box-shadow: var(--sh-sm), 0 0 0 3px rgba(255, 196, 218, 0.3);
}

.video-history-card__body span,
.animate-history-card__body span {
  color: var(--ink-dim);
}

.video-history-card,
.animate-history-card {
  color: var(--ink);
}

.video-history-card__thumb,
.animate-history-card__thumb {
  background: linear-gradient(160deg, rgba(255, 224, 210, 0.8), rgba(255, 214, 230, 0.72));
}

.video-history-card__thumb-badge {
  background: rgba(72, 40, 56, 0.6);
  color: #fff;
}

.video-history-card__placeholder {
  color: var(--ink-dim);
}

.video-history-card__download {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.video-history-card__download:hover {
  transform: translateY(-1px);
  border-color: var(--rose-300);
  color: var(--rose-600);
}

.video-history-card__download--disabled {
  color: var(--ink-faint);
  opacity: 0.6;
}

/* -------------------------------------------------------------------------
   5. Страница «Создать видео» / «Оживить фото»
   ------------------------------------------------------------------------- */

.video-coming-card {
  border: 1px solid var(--line-light);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 246, 249, 0.72));
  box-shadow: var(--sh-lg), var(--sh-inset);
}

.video-coming-card__eyebrow {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.86);
  color: var(--rose-600);
}

.video-coming-card h1 {
  color: var(--ink-strong);
}

.video-coming-card p {
  color: var(--ink-soft);
}

.video-model-trigger {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.video-model-trigger:hover {
  transform: translateY(-1px);
  border-color: var(--rose-300);
  box-shadow: var(--sh-sm);
}

.video-model-trigger__label {
  color: var(--ink-dim);
}

.video-model-trigger__value {
  color: var(--ink-strong);
  font-weight: 700;
}

.video-model-trigger__arrow {
  color: var(--rose-500);
}

body[data-page="video"] .video-prompt-btn {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

body[data-page="video"] .video-prompt-btn:hover {
  transform: translateY(-2px);
  border-color: var(--rose-300);
  background: #fff;
  box-shadow: var(--sh-sm);
}

body[data-page="video"] .video-prompt-btn__icon {
  color: var(--rose-500);
}

body[data-page="video"] .video-prompt-btn--accent {
  border-color: transparent;
  background: var(--grad-accent);
  color: #fff;
  box-shadow: var(--sh-glow);
}

body[data-page="video"] .video-prompt-btn--accent:hover {
  background: var(--grad-accent-hover);
  box-shadow: var(--sh-glow-strong);
}

body[data-page="video"] .video-prompt-btn--accent .video-prompt-btn__icon {
  color: #fff;
}

body[data-page="video"] .video-prompt-btn:disabled {
  opacity: 0.5;
}

body[data-page="video"] .prompt-composer--video #video-prompt-counter {
  color: var(--ink-dim);
}

.video-reference-mode .tab-switch__item {
  color: var(--ink-soft);
}

.video-multimodal-panel,
.video-reference-list-block {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.66);
}

.video-reference-list-head strong {
  color: var(--ink-strong);
}

.video-reference-file {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.86);
}

.video-reference-file__name {
  color: var(--ink);
}

.video-reference-file__meta,
.video-reference-file-empty {
  color: var(--ink-dim);
}

.video-showcase {
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.86), rgba(255, 246, 249, 0.68));
  box-shadow: var(--sh-sm), var(--sh-inset);
}

.video-showcase__head h3 {
  color: var(--ink-strong);
}

.video-showcase__price,
.video-model-card__price {
  color: var(--rose-600);
  font-weight: 800;
}

.video-showcase__description,
.video-showcase__prompt-block p {
  color: var(--ink-soft);
}

.video-showcase__prompt-block {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.7);
}

.video-showcase__prompt-label {
  color: var(--rose-500);
  font-weight: 700;
}

.video-showcase__tag,
.video-model-card__tag {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 244, 248, 0.9);
  color: var(--ink-soft);
}

.video-tip-card {
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.video-tip-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-sm);
}

.video-tip-card strong {
  color: var(--ink-strong);
}

.video-tip-card p {
  color: var(--ink-soft);
}

.video-stage {
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 246, 249, 0.56));
  box-shadow: var(--sh-inset);
}

.video-stage__player {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.video-stage__empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.5);
}

.video-stage__chip {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 244, 248, 0.9);
  color: var(--ink-soft);
}

.video-stage__prompt {
  color: var(--ink-soft);
}

.video-model-card {
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.video-model-card:hover {
  transform: translateY(-4px);
  border-color: rgba(250, 190, 212, 0.75);
  box-shadow: var(--sh-md);
}

.video-model-card--active {
  border-color: var(--rose-300);
  background: linear-gradient(150deg, rgba(255, 242, 236, 0.96), rgba(255, 238, 245, 0.92));
  box-shadow: var(--sh-sm), 0 0 0 3px rgba(255, 196, 218, 0.3);
}

.video-model-card h3 {
  color: var(--ink-strong);
}

.video-model-card p {
  color: var(--ink-soft);
}

.video-model-card__select {
  border-radius: var(--r-pill);
  background: var(--grad-accent);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--sh-glow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.video-model-card__select:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-glow-strong);
}

.video-model-modal__backdrop,
.photo-modal__backdrop,
.topup-modal__backdrop,
.promo-modal__backdrop,
.mobile-account-modal__backdrop {
  background: rgba(90, 56, 74, 0.32);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

.video-model-modal__card,
.photo-modal__card,
.topup-modal__card,
.promo-modal__card {
  border: 1px solid var(--line-light);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.97), rgba(255, 247, 250, 0.94));
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  box-shadow: var(--sh-lg), var(--sh-inset);
  animation: sh-rise 320ms var(--ease-out) backwards;
}

.video-model-modal__head h2,
.photo-modal__head h3,
.topup-modal__head h3,
.promo-modal__head h3 {
  color: var(--ink-strong);
}

.video-model-modal__close,
.photo-modal__close,
.topup-modal__close,
.promo-modal__close,
.mobile-account-modal__close {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-soft);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.video-model-modal__close:hover,
.photo-modal__close:hover,
.topup-modal__close:hover,
.promo-modal__close:hover,
.mobile-account-modal__close:hover {
  transform: rotate(90deg);
  color: var(--rose-600);
  background: #fff;
}

.photo-modal__media {
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255, 240, 232, 0.9), rgba(255, 235, 243, 0.86));
}

.photo-modal__prompt {
  color: var(--ink-soft);
}

.photo-modal__chip {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 244, 248, 0.9);
  color: var(--ink-soft);
}

/* -------------------------------------------------------------------------
   6. Профиль
   ------------------------------------------------------------------------- */

.profile-panel {
  padding-top: 18px;
  animation: sh-rise 560ms var(--ease-out) backwards;
}

.profile-title,
.legal-title,
.payments-panel__head h1 {
  color: var(--ink-strong);
  letter-spacing: -0.04em;
}

.profile-title {
  margin-bottom: 28px;
  font-size: clamp(2.2rem, 3.4vw, 3.3rem);
}

.profile-grid {
  gap: 28px;
}

.profile-avatar-card,
.profile-form-card {
  padding: 26px;
  border: 1px solid var(--line-light);
  border-radius: var(--r-xl);
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.94), rgba(255, 251, 252, 0.86));
  backdrop-filter: blur(22px) saturate(126%);
  -webkit-backdrop-filter: blur(22px) saturate(126%);
  box-shadow: var(--sh-md), var(--sh-inset);
}

.profile-avatar-card {
  justify-items: center;
  gap: 18px;
}

.profile-form-card {
  max-width: 820px;
}

.profile-avatar {
  border: 3px solid rgba(255, 255, 255, 0.9);
  background: var(--grad-accent);
  color: #fff;
  font-weight: 800;
  box-shadow: var(--sh-glow);
}

.profile-avatar__button {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.profile-avatar__button:hover {
  transform: translateY(-2px);
  border-color: var(--rose-300);
  box-shadow: var(--sh-sm);
}

.profile-status {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 246, 249, 0.9);
  color: var(--ink-soft);
}

.profile-status[data-state="success"] {
  border-color: rgba(126, 196, 150, 0.5);
  background: rgba(233, 250, 238, 0.9);
  color: #3f7d58;
}

.profile-status[data-state="error"] {
  border-color: rgba(230, 110, 145, 0.45);
  background: rgba(255, 232, 238, 0.92);
  color: #b84568;
}

.profile-field > span {
  color: var(--ink-soft);
}

.profile-field input,
.profile-readonly input {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.profile-field input:focus {
  border-color: var(--rose-300);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 196, 218, 0.3);
}

.profile-readonly input {
  color: var(--ink-dim);
}

.profile-copy-btn {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.profile-copy-btn:hover {
  transform: translateY(-1px);
  border-color: var(--rose-300);
  color: var(--rose-600);
}

.profile-save-btn {
  border-radius: var(--r-pill);
  background: var(--grad-accent);
  color: #fff;
  font-weight: 800;
  box-shadow: var(--sh-glow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.profile-save-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-glow-strong);
}

/* -------------------------------------------------------------------------
   7. Платежи
   ------------------------------------------------------------------------- */

.payments-panel {
  padding-top: 18px;
  animation: sh-rise 560ms var(--ease-out) backwards;
}

.payments-panel__head h1 {
  font-size: clamp(2.2rem, 3.4vw, 3.3rem);
}

.payments-panel__head p {
  color: var(--ink-soft);
}

.payments-status--error {
  color: #b84568;
}

.payment-row {
  border: 1px solid var(--line-light);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.payment-row:hover {
  transform: translateX(3px);
  background: #fff;
  box-shadow: var(--sh-sm);
}

.payment-row__date {
  color: var(--ink-dim);
}

.payment-row__reason {
  color: var(--ink-soft);
}

.payment-row__type {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 244, 248, 0.9);
  color: var(--ink-soft);
}

.payment-row__type--credit {
  border-color: rgba(126, 196, 150, 0.45);
  background: rgba(233, 250, 238, 0.9);
  color: #3f7d58;
}

.payment-row__type--charge {
  border-color: rgba(240, 168, 192, 0.5);
  background: rgba(255, 238, 244, 0.9);
  color: #b84568;
}

.payment-row__amount--credit {
  color: #3f7d58;
  font-weight: 800;
}

.payment-row__amount--charge {
  color: #b84568;
  font-weight: 800;
}

/* -------------------------------------------------------------------------
   8. Документы (оферта, политика)
   ------------------------------------------------------------------------- */

.legal-panel {
  animation: sh-rise 560ms var(--ease-out) backwards;
}

.legal-meta {
  color: var(--ink-dim);
}

.legal-card {
  border: 1px solid var(--line-light);
  border-radius: var(--r-xl);
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 250, 0.74));
  backdrop-filter: blur(20px) saturate(124%);
  -webkit-backdrop-filter: blur(20px) saturate(124%);
  box-shadow: var(--sh-md), var(--sh-inset);
}

.legal-card h2 {
  color: var(--ink-strong);
}

.legal-card p,
.legal-card li {
  color: var(--ink-soft);
}

.legal-card a {
  color: var(--rose-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-company {
  color: var(--ink-dim);
}

/* -------------------------------------------------------------------------
   9. Модалки пополнения и промокодов, баннер согласия
   ------------------------------------------------------------------------- */

.topup-modal__eyebrow,
.promo-modal__eyebrow {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 244, 248, 0.9);
  color: var(--rose-600);
  font-weight: 700;
}

.topup-modal__head p,
.topup-modal__note {
  color: var(--ink-soft);
}

.topup-amount-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.topup-amount-card strong {
  color: var(--ink-strong);
}

.topup-amount-card span {
  color: var(--ink-dim);
}

.topup-amount-card:hover {
  transform: translateY(-3px);
  border-color: var(--rose-300);
  background: linear-gradient(140deg, rgba(255, 242, 235, 0.95), rgba(255, 238, 245, 0.92));
  box-shadow: var(--sh-md);
}

.topup-amount-card:disabled {
  opacity: 0.5;
}

.topup-consent {
  border-top: 1px solid var(--line);
}

.topup-consent__label {
  color: var(--ink-soft);
}

.topup-consent__label a {
  color: var(--rose-600);
}

.topup-consent__checkbox {
  accent-color: var(--rose-400);
}

.topup-consent__checkbox[aria-invalid="true"] {
  outline: 2px solid #e05a7f;
}

.topup-consent__error,
.promo-status--error {
  color: #b84568;
}

.promo-status--success {
  color: #3f7d58;
}

.promo-field span {
  color: var(--ink-soft);
}

.promo-field input {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
}

.promo-field input::placeholder {
  color: var(--ink-faint);
}

.promo-field input:focus {
  border-color: var(--rose-300);
  box-shadow: 0 0 0 4px rgba(255, 196, 218, 0.3);
}

.promo-field input[aria-invalid="true"] {
  border-color: #e05a7f;
}

.promo-status {
  color: var(--ink-soft);
}

.promo-submit {
  border-radius: var(--r-pill);
  background: var(--grad-accent);
  color: #fff;
  font-weight: 800;
  box-shadow: var(--sh-glow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.promo-submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-glow-strong);
}

.promo-submit:disabled {
  opacity: 0.55;
}

.site-consent-banner__card {
  border: 1px solid var(--line-light);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 250, 0.92));
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  box-shadow: var(--sh-lg), var(--sh-inset);
}

.site-consent-banner__text {
  color: var(--ink-soft);
}

.site-consent-banner__text a {
  color: var(--rose-600);
}

.site-consent-banner__accept {
  border-radius: var(--r-pill);
  background: var(--grad-accent);
  color: #fff;
  font-weight: 800;
  box-shadow: var(--sh-glow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.site-consent-banner__accept:hover {
  transform: translateY(-2px);
  background: var(--grad-accent-hover);
  box-shadow: var(--sh-glow-strong);
}

/* -------------------------------------------------------------------------
   10. Мобильная версия
   ------------------------------------------------------------------------- */

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(900px 520px at 6% -6%, rgba(255, 214, 191, 0.8), transparent 62%),
      radial-gradient(760px 480px at 98% 4%, rgba(255, 203, 221, 0.76), transparent 60%),
      linear-gradient(180deg, #fffaf7 0%, #fff5f1 42%, #fff2f4 100%);
  }

  body::before {
    display: block;
    opacity: 0.5;
    filter: blur(46px);
  }

  body::after {
    display: none;
  }

  .app-shell::before {
    display: none;
  }

  .mobile-topbar {
    border-bottom: 1px solid var(--line);
    background: rgba(255, 252, 251, 0.9);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    box-shadow: 0 8px 26px rgba(206, 124, 157, 0.1);
  }

  .mobile-menu-toggle {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--sh-xs);
  }

  .mobile-menu-toggle span {
    background: var(--rose-500);
  }

  .mobile-topbar__logo {
    background: linear-gradient(104deg, #ff9a71 0%, #f7749f 46%, #c98bf0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .mobile-account-pill {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.9);
    color: var(--rose-600);
    box-shadow: var(--sh-xs);
  }

  .mobile-account-pill--auth {
    border-color: transparent;
    background: var(--grad-accent);
    color: #fff;
    box-shadow: var(--sh-glow);
  }

  .mobile-account-pill__avatar {
    background: linear-gradient(135deg, rgba(255, 205, 176, 0.9), rgba(252, 184, 214, 0.9));
    color: #7d3554;
  }

  .mobile-account-pill--auth .mobile-account-pill__avatar {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
  }

  /* выдвижное меню: анимация появления отключена, иначе она перебивает transform-скрытие */
  .sidebar,
  body[data-page="home"] .sidebar,
  body[data-page="profile"] .sidebar {
    width: min(322px, calc(100vw - 12px));
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0 var(--r-xl) var(--r-xl) 0;
    background: linear-gradient(168deg, rgba(255, 253, 252, 0.98), rgba(255, 246, 244, 0.96) 50%, rgba(255, 242, 245, 0.98));
    backdrop-filter: blur(26px) saturate(130%);
    -webkit-backdrop-filter: blur(26px) saturate(130%);
    box-shadow: 22px 0 60px rgba(198, 112, 148, 0.18);
    animation: none;
  }

  .mobile-menu-backdrop {
    background: rgba(90, 56, 74, 0.34);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .mobile-account-modal__sheet {
    background: linear-gradient(180deg, #fffaf8 0%, #fff4f4 60%, #fff6f9 100%);
  }

  .account-menu--mobile .account-menu__balance {
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: linear-gradient(140deg, rgba(255, 214, 191, 0.65), rgba(255, 203, 221, 0.6));
    box-shadow: var(--sh-sm);
  }

  .account-menu--mobile .account-menu__item {
    color: var(--ink-soft);
  }

  .creation-panel,
  body[data-page="music"] .creation-panel--music,
  .creation-panel--photo,
  .results-panel,
  .results-panel--photo,
  .results-panel--video {
    padding: 14px;
    border-radius: var(--r-lg);
  }

  /* шапка музыкальной панели: на узких экранах селектор модели переносится на вторую строку */
  body[data-page="music"] .panel-head--music {
    flex-wrap: wrap;
    gap: 10px;
  }

  body[data-page="music"] .panel-head--music .tab-switch {
    flex: 1 1 200px;
    min-width: 0;
  }

  body[data-page="music"] .panel-head--music .tab-switch__item {
    padding: 0 10px;
  }

  body[data-page="music"] .panel-head--music .custom-dropdown--compact {
    flex: 1 1 128px;
    min-width: 0;
  }

  body[data-page="music"] .panel-head--music .custom-dropdown__trigger {
    width: 100%;
    white-space: nowrap;
  }

  /* чипы режимов композиции: не сжимаются до обрезки текста, а переносятся на новую строку */
  body[data-page="music"] .composer-toolbar--music {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 12px 14px;
  }

  body[data-page="music"] .composer-chip--music {
    flex: 1 1 auto;
    width: auto;
    min-width: auto;
    padding: 0 12px;
    font-size: 0.84rem;
  }

  /* переключатель голоса: три сегмента в один ряд без наползания текста */
  body[data-page="music"] .music-voice-switch {
    padding: 4px;
    gap: 3px;
  }

  body[data-page="music"] .music-voice-switch__item {
    padding: 0 4px;
    font-size: 0.78rem;
    letter-spacing: -0.025em;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* панель поиска: кнопка сброса на мобильных скрыта, поэтому поле занимает всю ширину */
  .library-tools {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
  }

  /* широкий селектор формата на видео: иконка и значение в одну строку */
  .photo-pill-select--wide {
    grid-template-columns: auto 1fr;
  }

  /* три вкладки режимов референсов на видео: даём переносить слова, не раздувая экран */
  .video-reference-mode .tab-switch__item {
    padding: 0 8px;
    font-size: 0.78rem;
    white-space: normal;
    line-height: 1.15;
  }

  /* длинные заголовки документов не должны растягивать экран */
  .legal-title,
  .profile-title {
    font-size: clamp(1.7rem, 8.4vw, 2.6rem);
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .legal-card p,
  .legal-card li,
  .legal-company {
    overflow-wrap: anywhere;
  }

  body[data-page="home"] .home-video-clips {
    padding: 16px;
    border-radius: var(--r-lg);
  }

  .hero-banner,
  body[data-page="home"] .hero-banner {
    border-radius: var(--r-lg);
  }

  .feature-card,
  body[data-page="home"] .feature-card {
    border-radius: var(--r-md);
  }

  .quick-start,
  body[data-page="home"] .quick-start {
    max-width: none;
  }
}

/* планшет: боковая панель превращается в компактную шапку, а не в высокий блок */
@media (max-width: 980px) and (min-width: 761px) {
  .sidebar,
  body[data-page="home"] .sidebar,
  body[data-page="profile"] .sidebar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "logo nav auth"
      "promo promo promo"
      "footer footer footer";
    align-items: center;
    gap: 12px 18px;
    margin: 16px 16px 0;
    padding: 16px 20px;
    border: 1px solid var(--line-light);
    border-radius: var(--r-xl);
    animation: none;
  }

  .sidebar .logo,
  body[data-page="home"] .sidebar .logo {
    grid-area: logo;
    margin: 0;
    font-size: 1.7rem;
  }

  .auth-card,
  body[data-page="home"] .auth-card,
  .account-dock {
    grid-area: auth;
    margin: 0;
    padding: 0;
  }

  .auth-btn {
    width: auto;
    min-height: 44px;
    padding: 0 18px;
    white-space: nowrap;
  }

  .account-trigger,
  body[data-page="home"] .account-trigger {
    min-height: 48px;
    min-width: 200px;
  }

  .sidebar-nav {
    grid-area: nav;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
  }

  .sidebar-nav a,
  body[data-page="home"] .sidebar-nav a {
    width: auto;
    min-height: 40px;
    padding: 0 12px;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .sidebar-nav a::before,
  body[data-page="home"] .sidebar-nav a::before {
    display: none;
  }

  .quick-start,
  body[data-page="home"] .quick-start {
    grid-area: promo;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0;
    padding: 12px 18px;
    border-radius: var(--r-md);
  }

  .quick-start h3,
  body[data-page="home"] .quick-start h3 {
    margin: 0;
    font-size: 0.98rem;
  }

  .quick-start p,
  body[data-page="home"] .quick-start p {
    font-size: 0.86rem;
  }

  .quick-start::after {
    display: none;
  }

  .sidebar-footer {
    grid-area: footer;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
  }

  .sidebar-footer a,
  .sidebar-footer a.sidebar-social-button,
  .sidebar-footer a.sidebar-support-link {
    flex: 0 0 auto;
    width: auto;
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.86rem;
  }
}