.bg-mesh{
  background:
    radial-gradient(800px 400px at 15% 10%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(700px 400px at 85% 20%, rgba(16,185,129,.18), transparent 55%),
    radial-gradient(700px 500px at 50% 95%, rgba(236,72,153,.14), transparent 55%),
    linear-gradient(180deg, #0b1220 0%, #0b1220 45%, #0a1020 100%);
}

.glass{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
}

.shadow-soft{
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

@keyframes pulseDot {
  0%,100% { transform: scale(1); opacity: 1 }
  50%     { transform: scale(1.15); opacity: .75 }
}

.pulse-dot{
  animation: pulseDot 1.2s ease-in-out infinite;
}


/* --- Fallback for Tailwind's .hidden (на случай если CDN Tailwind не загрузился) --- */
.hidden{ display:none; }

/* --- Screenshot preview (2 страницы: Содержание + Введение) --- */
.docshot-scroll{
  margin-top: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.docshot-img{
  display: block;
  height: auto;
  cursor: zoom-in;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #e5e7eb;
  box-shadow: 0 10px 26px rgba(15,23,42,0.12);
}
/* По умолчанию вписываем картинку по ширине контейнера.
   На мобильных просмотр делаем через модалку и страницы по отдельности —
   поэтому принудительное «шире экрана» больше не требуется. */
.docshot-img{
  width: 100%;
  max-width: 100%;
}


/* --- Desktop-only: превью скриншота не показываем на мобильных (там используется модалка) --- */
@media (max-width: 1023px){
  #docScreenshotWrap{ display:none !important; }
}

/* --- Desktop: результат (DOCX + Уникальность) размещаем слева под скриншотом --- */
@media (max-width: 1023px){
  #desktopResultMount{ display:none !important; }
}
@media (min-width: 1024px){
  /* Скрываем правый блок "Результат" только если JS уже переместил карточки в левую колонку. */
  body.has-desktop-result [data-wizard-right="result"]{ display:none !important; }

/* Desktop: после запуска прячем блок «Создание проекта» и показываем «Результат/Уникальность» */
body.desktop-show-result #createProjectCard{ display:none !important; }

/* По умолчанию (до запуска) результат на десктопе скрыт — появится после старта генерации */
body:not(.desktop-show-result) #desktopResultMount{ display:none !important; }

/* В режиме результата убираем лишние верхние отступы, чтобы блоки «вставали» на место формы */
body.desktop-show-result #desktopResultMount{ margin-top: 0 !important; }
body.desktop-show-result #docScreenshotWrap{
  /* Скриншот показываем ПОСЛЕ результата — нужен отступ сверху, а не снизу */
  margin-top: 24px !important;
  margin-bottom: 0 !important;
}

/* Desktop: на 3 этапе (когда результат готов) скрываем «План проекта» */
body.desktop-stage-3 #planPreviewWrap{ display:none !important; }

/* Верхняя панель действий над результатом */
#desktopResultActions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}


  #desktopResultMount #resultBlocks{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
  }

  /* Карточки «DOCX» и «Уникальность» визуально выравниваем по высоте */
  #desktopResultMount #docxResultWrap,
  #desktopResultMount #uniResultWrap{
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  #desktopResultMount #docxResultWrap .unified-card,
  #desktopResultMount #uniResultWrap .unified-card{
    flex: 1 1 auto;
  }

  /* В гриде отступ сверху у блока уникальности не нужен */
  #desktopResultMount #uniResultWrap{ margin-top: 0 !important; }

  /* 3-й блок: «План проекта» — размещаем аккуратно ниже «Результат/Уникальность» */
  #desktopResultMount #planPreviewWrap{
    grid-column: 1 / -1;
    margin-top: 0 !important;
  }
}

/* --- Mobile/All: модальное окно (фрейм) для просмотра скриншота --- */
.docshot-lock{
  overflow: hidden;
}

.docshot-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.docshot-modal.hidden{
  display: none;
}

.docshot-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(6px);
}

.docshot-modal__panel{
  position: relative;
  width: 100%;
  max-width: 980px;
  max-height: 92vh;
  border-radius: 18px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(15, 23, 42, 0.16);
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.docshot-modal__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}

.docshot-modal__title{
  font-weight: 900;
  font-size: 14px;
  color: rgba(15, 23, 42, 0.92);
}

.docshot-modal__close{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255,255,255,0.92);
  color: rgba(15, 23, 42, 0.85);
  font-weight: 900;
  line-height: 1;
}

.docshot-modal__body{
  padding: 12px 14px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.docshot-modal__footer{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.10);
}

.docshot-scroll--modal{
  margin-top: 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
  touch-action: pan-x pan-y;
}

/* Tabs in mobile viewer */
.docshot-tabs{
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.docshot-tab{
  flex: 1 1 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255,255,255,0.92);
  font-weight: 900;
  font-size: 12px;
  line-height: 1.1;
  color: rgba(15, 23, 42, 0.86);
}

.docshot-tab.is-active{
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.10);
  color: rgba(6, 95, 70, 0.95);
}

/* Desktop lightbox mode (show combined 2-page screenshot, no tabs) */
.docshot-modal--desktop .docshot-tabs{
  display: none;
}

@media (min-width: 1024px){
  .docshot-modal--desktop .docshot-modal__panel{
    /* Two A4 pages + gap is ~1238px; keep it readable but not fullscreen */
    max-width: 1240px;
  }
}

/* Desktop preview image should feel like it can be enlarged */
#docScreenshotImg{
  cursor: zoom-in;
}
#docScreenshotImg:hover{
  filter: brightness(1.02);
}


/* --- Payment modal (download gating) --- */
.pay-modal__panel{ max-width: 660px; }

.pay-section-title{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(55,65,81,.90);
  margin-top: 8px;
}

.pay-plans{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.plan-card{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(248,250,249,.92);
  border-radius: 18px;
  padding: 12px 14px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.plan-card:hover{
  transform: translateY(-1px);
  border-color: rgba(116,168,70,.45);
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
}

.plan-card.is-selected{
  border-color: rgba(116,168,70,.55);
  background: rgba(116,168,70,.10);
  box-shadow: 0 14px 34px rgba(116,168,70,.14);
}

.plan-radio{
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: #74a846;
  flex: none;
}

.plan-title{
  font-weight: 900;
  font-size: 14px;
  color: rgba(15,23,42,.92);
}

.plan-desc{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(55,65,81,.88);
  font-weight: 650;
  line-height: 1.25;
}

.plan-right{
  margin-left: auto;
  text-align: right;
  flex: none;
}

.plan-price{
  font-weight: 900;
  font-size: 14px;
  color: rgba(15,23,42,.92);
}

.plan-tag{
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.05);
  font-size: 11px;
  font-weight: 800;
  color: rgba(31,41,55,.92);
}

.pay-field{
  width: 100%;
  height: 48px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  padding: 0 14px;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: box-shadow .18s ease, border-color .18s ease;
}

.pay-field::placeholder{ color: rgba(107,114,128,.85); }

.pay-field:focus{
  border-color: rgba(116,168,70,.65);
  box-shadow: 0 0 0 6px rgba(116,168,70,.22);
}

.pay-row{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

@media (min-width: 640px){
  .pay-row{ grid-template-columns: 1fr 1fr; }
}

.pay-total{
  margin-top: 12px;
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(15,23,42,.10);
}

.pay-total-label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(55,65,81,.90);
}

.pay-total-value{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,.92);
}

.pay-check{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 12px;
  color: rgba(55,65,81,.90);
  font-weight: 650;
  line-height: 1.25;
}

.pay-check input{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #74a846;
}

.pay-error{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(220,38,38,.35);
  background: rgba(220,38,38,.08);
  color: rgba(127,29,29,.98);
  font-size: 12px;
  font-weight: 750;
  display:none;
}

.pay-note{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(55,65,81,.88);
  font-weight: 600;
}


/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 10050;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(248,250,249,.96);
  box-shadow: 0 18px 46px rgba(15,23,42,.18);
  padding: 12px 14px;
  color: rgba(15,23,42,.92);
  font-weight: 750;
  font-size: 13px;
  max-width: min(560px, calc(100vw - 32px));
  display:none;
}

.toast .muted{ font-weight: 650; font-size: 12px; margin-top: 2px; }