/* Фотосессия DeepMaha — третий раздел мини-аппа (24.10.26).
   Дизайн-система та же, что в skills.css: нижние табы, тёмный фон, золотой акцент. */

.ph-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(64px + var(--safe-bottom, 0px));
  background:
    radial-gradient(440px 280px at 12% -10%, rgba(245, 197, 24, .10), transparent 70%),
    radial-gradient(420px 300px at 92% 4%, rgba(210, 60, 120, .08), transparent 72%),
    linear-gradient(180deg, #0a0a0f, #0d0e15 44%, #0a0a0f);
}

.ph-panel[hidden] { display: none; }

.ph-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: calc(16px + var(--safe-top, 0px)) calc(16px + var(--safe-right, 0px)) 8px calc(16px + var(--safe-left, 0px));
}

.ph-title {
  margin: 0;
  font-size: 23px;
  line-height: 27px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.ph-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 17px;
}

.ph-heart-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--muted);
  font: 700 13px/1 inherit;
  cursor: pointer;
}

.ph-heart-btn.is-active {
  border-color: rgba(232, 78, 128, .5);
  background: rgba(232, 78, 128, .14);
  color: #ff8fb0;
}

.ph-heart { font-size: 15px; }
.ph-favcount { font-size: 13px; }

/* --- референсы --- */

/* Референсы живут справа от кадра: колонка шириной ровно с миниатюру */
.ph-refs {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
  width: 58px;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ph-refs::-webkit-scrollbar { display: none; }

.ph-ref {
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--card);
  cursor: pointer;
}

.ph-ref img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* не растягиваем: обрезаем по центру */
  display: block;
}

.ph-ref.is-active {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 2px rgba(245, 197, 24, .18);
}

.ph-ref-add {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(245, 197, 24, .45);
  color: var(--gold-light);
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
}

.ph-ref-del {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(8, 8, 12, .82);
  color: #fff;
  font: 700 13px/1 inherit;
  cursor: pointer;
}

/* --- сцена со свайпом --- */

.ph-stage {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  padding: 2px calc(14px + var(--safe-right, 0px)) 0 calc(14px + var(--safe-left, 0px));
  min-height: 0;
}

.ph-deck {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
  height: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ph-card {
  position: absolute;
  inset: 0;
  margin: auto;
  /* размер считает fitDeck(): высота — до шапки, ширина из пропорции 2:3 */
  width: var(--card-w, 100%);
  height: var(--card-h, 100%);
  max-height: 100%;
  max-width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  background: #11121a;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}

/* Картинка держит своё 2:3 и никогда не растягивается */
.ph-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
  pointer-events: none;
}

.ph-card-next {
  transform: scale(.955) translateY(8px);
  opacity: .55;
  filter: saturate(.85);
  z-index: 1;
}

.ph-card-next + .ph-card { z-index: 2; }

.ph-card.is-like { box-shadow: 0 18px 44px rgba(57, 217, 138, .28); }
.ph-card.is-skip { box-shadow: 0 18px 44px rgba(232, 78, 128, .22); }

.ph-card-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 16px 12px;
  background: linear-gradient(180deg, rgba(5, 5, 9, 0), rgba(5, 5, 9, .86) 62%);
}

.ph-card-title {
  font-size: 15px;
  font-weight: 750;
  line-height: 21px;
  color: #fff;
}

.ph-card-sub {
  margin-top: 3px;
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
  line-height: 16px;
}

.ph-hint {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, .34);
  font-size: 11px;
  pointer-events: none;
}

.ph-empty {
  margin: auto;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 24px;
}

/* --- кнопки --- */

.ph-actions {
  display: flex;
  gap: 8px;
  padding: 10px calc(16px + var(--safe-right, 0px)) 6px calc(16px + var(--safe-left, 0px));
}

.ph-btn {
  flex: 1 1 0;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font: 700 15px/1 inherit;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(.22, 1, .36, 1), background 160ms cubic-bezier(.22, 1, .36, 1), border-color 160ms cubic-bezier(.22, 1, .36, 1);
}

.ph-btn:active { transform: scale(.985); }

.ph-skip { color: var(--muted); }

.ph-like {
  border-color: rgba(232, 78, 128, .42);
  background: rgba(232, 78, 128, .16);
  color: #ff9dba;
}

/* --- избранное --- */

.ph-fav-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(64px + var(--safe-bottom, 0px));
  top: calc(68px + var(--safe-top, 0px));
  z-index: 5;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px calc(16px + var(--safe-right, 0px)) 20px calc(16px + var(--safe-left, 0px));
  background: linear-gradient(180deg, rgba(10, 10, 15, .97), rgba(10, 10, 15, .99));
}

.ph-fav-wrap[hidden] { display: none; }

.ph-fav-title {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ph-fav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ph-fav-card {
  position: relative;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  cursor: pointer;
  aspect-ratio: 2 / 3;
}

.ph-fav-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ph-fav-card span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 8px 8px;
  background: linear-gradient(180deg, transparent, rgba(5, 5, 9, .88));
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  text-align: left;
}

/* --- модалка результата --- */

.ph-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Сверху оставляем место под шапку Telegram (крестик, ⋯), снизу — под её панель. */
  padding: max(var(--safe-top, 0px), 60px) 16px max(var(--safe-bottom, 0px), 56px);
  background: rgba(4, 4, 8, .82);
  backdrop-filter: blur(10px);
}

.ph-modal[hidden] { display: none; }

.ph-modal-box {
  width: 100%;
  max-width: 420px;
  max-height: calc(100dvh - max(var(--safe-top, 0px), 60px) - max(var(--safe-bottom, 0px), 56px));
  overflow-y: auto;
  padding: 16px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #14151d, #0d0e15);
  text-align: center;
}

/* Просмотр картинки (референса) во весь экран: тап в любом месте закрывает. */
.ph-pop {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: max(var(--safe-top, 0px), 60px) 16px max(var(--safe-bottom, 0px), 56px);
  background: rgba(4, 4, 8, .94);
  backdrop-filter: blur(12px);
  animation: ph-pop-in 160ms var(--ease);
}

.ph-pop img {
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: 12px;
  display: block;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
}

.ph-pop-btn {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 16px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font: 700 15px/1 inherit;
  cursor: pointer;
}

@keyframes ph-pop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Полноэкранный просмотр кадра: фото тянется, меню и крестик влезают на любом экране. */
.ph-modal.is-full {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

.ph-modal.is-full .ph-modal-box {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: max(var(--safe-top, 0px), 60px) 16px max(var(--safe-bottom, 0px), 56px);
  border: 0;
  border-radius: 0;
  background: #0a0a0f;
  overflow: hidden;
}

.ph-modal.is-full .ph-modal-title {
  flex: 0 0 auto;
  padding: 0 40px;
  font-size: 15px;
  line-height: 22px;
}

.ph-modal.is-full .ph-modal-x {
  position: fixed;
  top: max(var(--safe-top, 0px), 60px);
  right: max(12px, var(--safe-right, 0px));
}

.ph-modal.is-full .ph-result {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  object-fit: contain;
}

.ph-modal.is-full .ph-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}

.ph-modal.is-full .ph-modal-actions {
  flex: 0 0 auto;
  margin-top: 0;
}

/* Закрыть: во всех всплывашках одинаково, справа сверху. */
.ph-modal-x {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06);
  color: var(--text); font-size: 15px; line-height: 1; font-family: inherit;
  cursor: pointer; opacity: 0.85; z-index: 2;
}
.ph-modal-x:active { transform: scale(0.94); }

.ph-modal-back {
  position: absolute; top: 11px; left: 10px;
  padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06);
  color: var(--text); font-size: 12px; font-family: inherit; cursor: pointer;
}

/* Строка кошелька в шапке фотосессии */
.ph-wallet {
  width: 100%; margin: 2px 0 8px; padding: 8px 12px;
  display: flex; align-items: center; gap: 8px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); color: inherit;
  font-family: inherit; font-size: 12px; cursor: pointer;
}
.ph-wallet.is-off {
  border-color: rgba(255, 209, 102, 0.5);
  background: rgba(255, 209, 102, 0.1);
}
.ph-wallet-ico { font-size: 13px; opacity: 0.9; }
.ph-wallet-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Окно кошелька */
.ph-wallet-line {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 13px;
}
.ph-wallet-line span { opacity: 0.65; }
.ph-wallet-line b { font-weight: 600; }

.ph-modal-title { font-size: 18px; font-weight: 750; }
.ph-modal-sub { margin-top: 6px; color: var(--muted); font-size: 13px; }

.ph-result {
  width: 100%;
  margin-top: 12px;
  border-radius: 16px;
  display: block;
}

.ph-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.ph-bar {
  height: 4px;
  margin-top: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.ph-bar i {
  display: block;
  height: 100%;
  width: 6%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f5c518, #ff9dba);
  transition: width 320ms cubic-bezier(.22, 1, .36, 1);
}

.ph-spin {
  width: 26px;
  height: 26px;
  margin: 4px auto 8px;
  border: 2.5px solid rgba(245, 197, 24, .25);
  border-top-color: var(--gold-light);
  border-radius: 50%;
  animation: ph-spin .9s linear infinite;
}

@keyframes ph-spin { to { transform: rotate(360deg); } }

/* --- тост --- */

.ph-toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + var(--safe-bottom, 0px));
  transform: translate(-50%, 12px);
  z-index: 95;
  max-width: 84vw;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(18, 19, 26, .96);
  color: var(--text);
  font-size: 13px;
  line-height: 17px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms cubic-bezier(.22, 1, .36, 1), transform 160ms cubic-bezier(.22, 1, .36, 1);
}

.ph-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}


/* --- мои генерации + отправка в чат (24.10.26) --- */

.ph-head-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ph-hist-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--muted);
  font: 700 13px/1 inherit;
  cursor: pointer;
}

.ph-hist-btn.is-active {
  border-color: rgba(120, 170, 255, .5);
  background: rgba(120, 170, 255, .14);
  color: #9dc0ff;
}

.ph-hist-ico { font-size: 15px; }
.ph-hist-label { font-size: 13px; letter-spacing: .01em; }
.ph-histcount { font-size: 13px; }
.ph-histcount[hidden] { display: none; }

.ph-hist-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(64px + var(--safe-bottom, 0px));
  top: calc(68px + var(--safe-top, 0px));
  z-index: 5;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px 24px;
  background: var(--bg, #050509);
}

.ph-hist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ph-hist-card {
  position: relative;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  cursor: pointer;
  aspect-ratio: 2 / 3;
}

.ph-hist-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ph-hist-fail {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--muted);
  font-size: 18px;
}

.ph-hist-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 16px 8px 4px;
  background: linear-gradient(180deg, transparent, rgba(5, 5, 9, .9));
  color: #fff;
  font-size: 11px;
  font-weight: 650;
}

.ph-hist-meta i { font-style: normal; opacity: .85; }

.ph-hist-sent {
  padding: 2px 4px;
  border-radius: 999px;
  background: rgba(120, 220, 160, .22);
  color: #9ff0bd;
  font-size: 11px;
}

.ph-modal-actions {
  flex-wrap: wrap;
}

.ph-row {
  display: flex;
  gap: 8px;
  flex: 1 1 100%;
}

.ph-row .ph-btn { flex: 1 1 0; }

.ph-send {
  flex: 1 1 100%;
  border-color: rgba(120, 200, 255, .45);
  background: rgba(90, 170, 255, .18);
  color: #a9d6ff;
}

.ph-link {
  flex: 1 1 100%;
  min-height: 40px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 650;
}

.ph-del {
  flex: 1 1 100%;
  min-height: 40px;
  border-color: rgba(255, 120, 120, .3);
  background: rgba(255, 90, 90, .12);
  color: #ff9d9d;
  font-weight: 650;
}


/* --- правка избранного (24.10.26) --- */

.ph-fav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ph-fav-edit {
  flex: 0 0 auto;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--muted);
  font: 700 13px/1 inherit;
  cursor: pointer;
}

.ph-fav-edit.is-on {
  border-color: rgba(120, 170, 255, .5);
  background: rgba(120, 170, 255, .14);
  color: #9dc0ff;
}

.ph-fav-tools {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 0 4px;
  background: linear-gradient(180deg, transparent, var(--bg, #050509) 45%);
}

.ph-pick-mark {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .6);
  background: rgba(5, 5, 9, .55);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.ph-fav-card.is-pick {
  outline: 2px solid #7db4ff;
  outline-offset: -2px;
}

.ph-fav-card.is-pick .ph-pick-mark {
  border-color: #7db4ff;
  background: #7db4ff;
  color: #050509;
}

.ph-fav-card.is-pick img {
  opacity: .82;
}


/* --- профиль персонажа (24.10.26) --- */

.ph-prof-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}

.ph-prof-btn.is-fold,
.ph-prof-btn.is-active {
  color: var(--text);
  border-color: rgba(120, 170, 255, .45);
}

.ph-prof-btn.is-set::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7db4ff;
  box-shadow: 0 0 6px rgba(125, 180, 255, .9);
}

.ph-prof-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}

.ph-prof-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.ph-prof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ph-prof-grid label,
.ph-prof-row > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.ph-prof-grid input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: 600 15px/1.2 inherit;
  box-sizing: border-box;
}

.ph-prof-grid input:focus,
.ph-prof-notes:focus {
  outline: none;
  border-color: rgba(120, 170, 255, .55);
}

.ph-prof-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ph-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ph-chips button {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--muted);
  font: 600 12px/1 inherit;
  cursor: pointer;
}

.ph-chips button.is-on {
  border-color: rgba(125, 180, 255, .6);
  background: rgba(125, 180, 255, .16);
  color: #b9d4ff;
}

.ph-prof-notes {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: 500 13px/1.45 inherit;
  resize: vertical;
  box-sizing: border-box;
}


/* --- профиль: отдельный экран (24.10.26) --- */

.ph-prof-screen {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ph-prof-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px calc(16px + var(--safe-right, 0px)) 24px calc(16px + var(--safe-left, 0px));
}

.ph-prof-body .ph-fav-tools {
  position: sticky;
  bottom: 0;
  margin: 4px calc(-16px - var(--safe-right, 0px)) -24px calc(-16px - var(--safe-left, 0px));
  padding: 12px calc(16px + var(--safe-right, 0px)) 14px calc(16px + var(--safe-left, 0px));
  background: rgba(9, 9, 14, 0.94);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.35);
}

.ph-prof-body .ph-fav-tools .ph-btn {
  min-height: 46px;
}

.ph-prof-body .ph-fav-tools .ph-skip {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line);
  color: var(--muted);
}

.ph-prof-tab {
  flex: 0 0 auto;
}

.sk-tabs:has(.ph-prof-tab) {
  overflow-x: auto;
  scrollbar-width: none;
}

.sk-tabs:has(.ph-prof-tab)::-webkit-scrollbar {
  display: none;
}


/* --- свёрнутый прогресс генерации (24.10.26) --- */

.ph-min-btn {
  margin-top: 12px;
  flex: 0 0 auto;
  width: 100%;
}

.ph-mini {
  position: fixed;
  left: calc(10px + var(--safe-left, 0px));
  right: calc(10px + var(--safe-right, 0px));
  bottom: calc(72px + var(--safe-bottom, 0px));
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 12px;
  border: 1px solid rgba(245, 197, 24, .38);
  border-radius: 16px;
  background: rgba(20, 20, 28, .96);
  backdrop-filter: blur(14px);
  color: var(--text);
  font: 600 13px/1 inherit;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}

.ph-mini[hidden] { display: none; }

.ph-mini-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f5c518;
  animation: phPulse 1.1s ease-in-out infinite;
}

.ph-mini-text {
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ph-mini-pct {
  flex: 0 0 auto;
  color: #f5c518;
  font-variant-numeric: tabular-nums;
}

.ph-mini-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 6%;
  border-radius: 0 0px 0px 0;
  background: linear-gradient(90deg, #f5c518, #ff6aa2);
  transition: width 320ms cubic-bezier(.22, 1, .36, 1);
}

@keyframes phPulse {
  0%, 100% { opacity: .3; }
  50% { opacity: 1; }
}

/* --- выбор движка генерации: подписка или платный Провод (24.10.26) --- */
.ph-eng-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 8px; }
.ph-eng { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left;
  padding: 12px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05); color: inherit; font: inherit; cursor: pointer; }
.ph-eng:active { transform: scale(0.985); }
.ph-eng-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ph-eng-name { font-size: 15px; font-weight: 600; }
.ph-eng-price { font-size: 13px; font-variant-numeric: tabular-nums; }
.ph-eng-sub { font-size: 12px; line-height: 1.35; opacity: 0.6; }
.ph-eng-hint { font-size: 11px; line-height: 1.3; opacity: 0.42; }
.ph-eng.is-short { opacity: 0.5; }
.ph-eng.is-short .ph-eng-sub { color: #ff9a9a; opacity: 0.9; }
.ph-eng-bal { text-align: center; font-size: 12px; opacity: 0.55; margin-top: 10px; }
.ph-gram-topup {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.12);
  color: inherit; font-size: 12px; font-family: inherit; opacity: 1;
}
.ph-gram-note { margin-top: 12px; text-align: center; font-size: 12px; opacity: 0.7; min-height: 16px; }

/* Ж/М: кого снимаем — переключатель над листалкой */
.ph-sex-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 12px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
}
.ph-sex-tab {
  flex: 1 1 0;
  min-height: 36px;
  padding: 4px 8px;
  border: 0;
  border-radius: 10px;
  background: 0 0;
  color: rgba(255, 255, 255, .58);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background 160ms cubic-bezier(.22, 1, .36, 1), color 160ms cubic-bezier(.22, 1, .36, 1), box-shadow 160ms cubic-bezier(.22, 1, .36, 1);
}
.ph-sex-tab.is-on {
  color: #0b0905;
  background: linear-gradient(135deg, #ffd955, #e8a800);
  box-shadow: 0 4px 14px rgba(245, 179, 1, .22);
}

/* Закрытая вкладка — как видео-модели: погашено, замок, без переключения */
.ph-sex-tab.is-locked {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .028);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  cursor: not-allowed;
}

.ph-sex-tab.is-locked .ph-lock {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, .44);
}

.ph-sex-tab.is-locked .ph-lock svg {
  width: 13px;
  height: 13px;
}
.ph-sex-tab[hidden] { display: none; }

/* Карточка без превью: показываем название сцены вместо пустой картинки */
.ph-card-ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 24px 16px;
  text-align: center;
  background:
    radial-gradient(220px 160px at 80% 12%, rgba(245, 197, 24, .16), transparent 70%),
    linear-gradient(160deg, #1b1b23, #101017);
}
.ph-card-ph span {
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 20px;
  font-weight: 650;
  letter-spacing: -.01em;
}

/* ── Доступность: клавиатурный фокус (27.10.26) ── */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold, #f5c518);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 160ms !important;
    scroll-behavior: auto !important;
  }
  .ph-mini-dot { animation: none; opacity: 1; }
  .ph-spin { animation-duration: 2.4s; }
}