/* Refreshed detail: the dialog owns the viewport; only its form scrolls on desktop. */
.effect-preview-dialog .effect-detail-shell.effect-detail-refresh {
  min-height: 0;
  height: 100% !important;
}
@media (min-width: 768px) {
  .effect-preview-dialog .effect-detail-shell.effect-detail-refresh {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "preview heading" "preview intro" "preview form" "preview action";
    overflow: hidden !important;
  }
  .effect-preview-dialog .effect-detail-shell.effect-detail-refresh .effect-detail-form {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px !important;
  }
  .effect-preview-dialog .effect-detail-shell.effect-detail-refresh .effect-detail-preview {
    height: var(--effect-preview-height) !important;
    min-height: 0;
  }
  /* Кнопка — своя строка грида под формой, а не плашка поверх неё: колонка в
     диалоге прозрачная над --efx-surface, и подложка #121412 от карточной
     раскладки (048/053) читалась светлой полосой со скруглением под кнопкой. */
  .effect-preview-dialog .effect-detail-shell.effect-detail-refresh .effect-detail-cta {
    padding: 12px 0 8px !important;
    border-radius: 0;
    background: none !important;
  }
  .effect-preview-dialog
    .effect-detail-shell.effect-detail-refresh
    .effect-detail-preview-media
    :is(img, video) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}
@media (min-width: 960px) and (min-height: 640px) {
  /* height:auto only works stretched over the whole "preview" column: 150 sets
     align-self:start + aspect-ratio:auto and the media inside is absolute, so a
     start-aligned box collapses to 1px (black left half). 048's page cap
     max-width:426px must not narrow the dialog column either. */
  .effect-preview-dialog
    .effect-detail-shell.effect-detail-refresh.effect-detail-media-landscape
    .effect-detail-preview {
    height: auto !important;
    align-self: stretch !important;
    max-width: none !important;
  }
  .effect-preview-dialog
    .effect-detail-shell.effect-detail-refresh.effect-detail-media-landscape
    .effect-detail-preview-media
    :is(img, video) {
    object-fit: contain !important;
  }
}
@media (max-width: 767px) {
  .effect-preview-dialog {
    width: calc(100% - 16px);
    height: calc(100dvh - 24px);
    border-radius: 20px;
  }
  .effect-preview-dialog .effect-detail-shell.effect-detail-refresh {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "heading" "preview" "intro" "form" "action";
    padding: 0 12px;
    overflow-y: auto !important;
  }
  .effect-preview-dialog .effect-detail-shell.effect-detail-refresh .effect-detail-preview {
    position: relative !important;
    height: clamp(248px, 72vw, 304px) !important;
  }
  /* Горизонтальный ролик — во всю ширину диалога и по своей пропорции,
     без пустых полос над и под кадром. */
  .effect-preview-dialog
    .effect-detail-shell.effect-detail-refresh.effect-detail-media-landscape
    :is(.effect-detail-preview, .effect-chrome-media) {
    margin-inline: -12px;
  }
  .effect-preview-dialog
    .effect-detail-shell.effect-detail-refresh.effect-detail-media-landscape
    .effect-detail-preview {
    width: auto !important;
    /* Явная высота, а не aspect-ratio: с height:auto строка грида не
       растёт под превью, и полоса управления уезжает на верх кадра.
       Ширина кадра = ширина диалога (100% − 16px). */
    height: calc((100vw - 16px) * 9 / 16) !important;
    border-radius: 0 !important;
  }
  .effect-preview-dialog
    .effect-detail-shell.effect-detail-refresh.effect-detail-media-landscape
    .effect-chrome-share {
    margin-inline-end: 0;
  }
  /* Пустая зона фото — низкая плашка «иконка слева, подпись справа» вместо
     квадрата 180px: 010/020 держат min-height 180px без медиазапроса. */
  .effect-preview-dialog .effect-detail-shell .effect-character-upload {
    min-height: 0 !important;
  }
  .effect-preview-dialog
    .effect-detail-shell
    .effect-character-upload
    [data-desktop-upload-well="image"] {
    height: 76px !important;
  }
  .effect-preview-dialog
    .effect-detail-shell
    .effect-character-upload
    [data-desktop-upload-well="image"][data-upload-state="empty"] {
    min-height: 0 !important;
    align-items: flex-start !important;
    padding: 0 0 0 20px !important;
  }
  .effect-preview-dialog .effect-detail-shell .effect-character-upload [data-desktop-upload-icon] {
    margin: 0 !important;
  }
  .effect-preview-dialog .effect-detail-shell .effect-character-upload-caption {
    inset: 20px 12px auto 60px !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .effect-preview-dialog .effect-detail-shell.effect-detail-refresh .effect-detail-form {
    height: auto;
    overflow: visible;
  }
  .effect-preview-dialog .effect-detail-shell.effect-detail-refresh .effect-detail-cta {
    position: sticky !important;
    bottom: 0;
    left: auto;
    right: auto;
    width: 100% !important;
    padding: 12px 0 max(12px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
  }
}
.effect-link-landing {
  min-height: 100dvh;
  padding: 32px 24px;
  background: var(--app-page, #090b0b);
  color: var(--app-text-1, #f4f4f4);
}
.effect-link-landing > .effect-landing {
  display: none;
}
.effect-route-seo {
  display: none !important;
}
.effect-link-landing > button {
  margin-block: 20px;
  padding: 12px 20px;
  border-radius: 14px;
  background: #193426;
  color: #d7f9bc;
}