/* ============================================================
   AURA — Photo Sessions
   Banner + auto-prompt bar + session prompt grid + viewer + upload popup
   ============================================================ */

/* ---------- BANNER ---------- */
.ps-banner {
  position: relative;
  overflow: hidden;
}
.ps-banner-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ps-banner h1 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 14px;
  color: #fff;
}
.ps-banner .ps-sub {
  margin: 0 0 28px;
  color: var(--text-2);
}

/* ---------- AUTO-PROMPT BAR ---------- */
.ps-bar {
  width: 100%;
  max-width: 920px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  /* Кнопка активного профиля должна стоять по центру hero — под числом пресетов.
     Без этого она прижималась к левому краю контейнера. */
  justify-content: center;
  margin-inline: auto;
}
.ps-bar:empty { display: none; }
.ps-bar .ps-create { flex: 0 0 auto; }
.ps-bar-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
}
.ps-upload-btn {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: color .15s, border-color .15s, background .15s;
}
.ps-upload-btn:hover { color: var(--text); border-color: var(--line-strong); }
.ps-upload-btn svg { width: 21px; height: 21px; }
.ps-upload-btn.has-photo { padding: 0; overflow: hidden; border-color: var(--accent-ring); }
.ps-upload-btn.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.ps-upload-btn .ps-up-x {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #000; color: #fff; border: 1px solid var(--line-strong);
  display: grid; place-items: center; font-size: 13px; line-height: 1;
  cursor: pointer;
}
@keyframes psNudge {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.ps-upload-btn.nudge { animation: psNudge .42s ease; border-color: var(--accent); color: var(--accent-2); }

.ps-bar input {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  min-width: 0;
}
.ps-bar input::placeholder { color: var(--text-3); }

.ps-clear {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  display: grid; place-items: center;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.ps-clear:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface-3); }
.ps-clear svg { width: 18px; height: 18px; }

.ps-create {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 13px 24px;
  position: relative;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
  box-shadow: 0 10px 28px -8px var(--accent-ring);
  transition: filter .15s, transform .1s, background .15s, color .15s, box-shadow .2s;
}
.ps-create:hover { filter: brightness(1.08); box-shadow: 0 14px 34px -8px var(--accent-ring); }
.ps-create:active { transform: scale(.97); }
.ps-create.empty {
  background: var(--surface-3);
  color: var(--text-3);
  box-shadow: none;
  cursor: not-allowed;
}

/* in-field upload hint */
.ps-hint {
  display: none;
  align-items: center;
  gap: 9px;
  margin: 2px 12px 10px;
  padding: 9px 13px;
  border-radius: 11px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-ring);
  color: var(--accent-2);
  font-size: 13.5px;
  font-weight: 600;
  animation: fadeUp .3s ease;
}
.ps-hint.show { display: flex; }
.ps-hint svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ---------- BROWSE (filters + grid) ---------- */
.ps-browse {
  width: 100%;
  margin: 0 auto;
  padding: 34px 40px 80px;
  max-width: 1700px;
}
.ps-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.ps-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  border: 0;
  border-radius: 99px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 700;
  user-select: none;
}
.ps-tag svg { width: 17px; height: 17px; }
.ps-only-image {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.ps-only-image svg { width: 16px; height: 16px; }
.ps-sep { width: 1px; height: 26px; background: var(--line-strong); margin: 0 4px; }

/* category pills (reuse .pill look) */
.ps-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ps-cat-pill:hover { color: var(--text); border-color: var(--line-strong); }
.ps-cat-pill.active { background: #ffffff; border-color: transparent; color: #111111; }

/* ---------- PROMPT GRID ---------- */
.ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 18px;
}
.ps-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  aspect-ratio: 3 / 4;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.55);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.ps-card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 24px 46px -24px rgba(0,0,0,.72); }
.ps-card image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.ps-card .ps-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(10,10,12,.78) 0%, rgba(10,10,12,.05) 42%, transparent 65%);
  pointer-events: none;
}
.ps-card-cat {
  max-width: calc(100% - 56px); white-space: normal; line-height: 1.15;
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(12,12,16,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16);
  padding: 5px 10px;
  border-radius: 99px;
}
.ps-card-count {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(12,12,16,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16);
  padding: 5px 9px;
  border-radius: 99px;
}
.ps-card-count svg { width: 13px; height: 13px; }
.ps-card-info {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 3;
}
.ps-card-info h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  line-height: 1.1;
}
.ps-card-info p {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.72);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* hover: Использовать */
.ps-card-use {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,12,.5);
  opacity: 0;
  transition: opacity .18s;
}
.ps-card:hover .ps-card-use { opacity: 1; }
.ps-use-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #111;
  border: 0;
  border-radius: 12px;
  padding: 11px 20px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 34px -8px rgba(0,0,0,.66);
  transform: translateY(6px);
  transition: transform .18s, filter .12s;
}
.ps-card:hover .ps-use-btn { transform: translateY(0); }
.ps-use-btn:hover { filter: brightness(.94); }
.ps-use-btn:active { transform: scale(.96); }
.ps-use-btn svg { width: 17px; height: 17px; }

/* ---------- PROMPT VIEWER ---------- */
.ps-viewer {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(10,10,14,.66);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  transition: opacity .2s;
}
.ps-viewer.open { display: flex; opacity: 1; }
.ps-viewer-card {
  width: 100%;
  max-width: 980px;
  max-height: 88vh;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(14px);
  transition: transform .22s;
  box-shadow: 0 50px 110px -34px rgba(0,0,0,.82);
}
.ps-viewer.open .ps-viewer-card { transform: translateY(0); }
.ps-viewer-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line);
}
.ps-viewer-head .pvh-main { flex: 1 1 auto; min-width: 0; }
.ps-viewer-head .pvh-cat {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 6px;
}
.ps-viewer-head h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
}
.ps-viewer-head p { margin: 0; color: var(--text-2); font-size: 14px; max-width: 60ch; }
.ps-viewer-close {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  display: grid; place-items: center;
  cursor: pointer;
}
.ps-viewer-close:hover { color: var(--text); border-color: var(--line-strong); }
.ps-viewer-close svg { width: 20px; height: 20px; }
.ps-viewer-body {
  padding: 20px 24px;
  overflow-y: auto;
}
.ps-viewer-body .pvb-label {
  font-size: 12.5px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px;
}
.ps-examples {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.ps-examples .pse {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 3 / 4;
}
.ps-examples .pse image-slot { width: 100%; height: 100%; }
.ps-viewer-foot {
  padding: 16px 24px 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.ps-viewer-foot .pvf-note { width: 100%; }
.pvf-actions { display: flex; align-items: center; gap: 10px; width: 100%; }
.pvf-cost { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--text); margin-right: auto; white-space: nowrap; flex: none; }
.ps-viewer-foot .pvf-note {
  font-size: 13px;
  color: var(--text-2);
  display: flex; align-items: center; gap: 8px;
}
.ps-viewer-foot .pvf-note svg { width: 16px; height: 16px; color: var(--accent-2); }
.ps-viewer-use {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #111111;
  border: 0;
  border-radius: 12px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.35);
  transition: filter .15s, transform .1s;
  flex: 0 0 auto;
}
.ps-viewer-use:hover { filter: brightness(.94); box-shadow: 0 14px 30px -10px rgba(0,0,0,.4); }
.ps-viewer-use:active { transform: scale(.97); }
.ps-viewer-use svg { width: 17px; height: 17px; }
.ps-viewer-use.ghost { background: rgba(255,255,255,.08); border: 1px solid var(--line-strong); color: var(--text); box-shadow: none; }
.ps-viewer-use.ghost:hover { background: rgba(255,255,255,.14); filter: none; box-shadow: none; }

/* ---------- UPLOAD INSTRUCTIONS POPUP ---------- */
.ps-upload-pop {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(6,6,9,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  opacity: 0;
  transition: opacity .2s;
}
.ps-upload-pop.open { display: flex; opacity: 1; }
.ps-upload-box {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform: translateY(14px);
  transition: transform .22s;
  box-shadow: 0 50px 110px -34px rgba(0,0,0,.82);
}
.ps-upload-pop.open .ps-upload-box { transform: translateY(0); }
.ps-upbox-head {
  position: relative;
  padding: 24px 26px 18px;
}
.ps-upbox-head h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
}
.ps-upbox-head p { margin: 0; color: var(--text-2); font-size: 14px; }
.ps-upbox-close {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-2); display: grid; place-items: center; cursor: pointer;
}
.ps-upbox-close:hover { color: var(--text); }
.ps-upbox-close svg { width: 18px; height: 18px; }
.ps-upbox-body {
  display: flex;
  gap: 20px;
  padding: 6px 26px 8px;
}
.ps-upbox-example {
  flex: 0 0 150px;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.ps-upbox-example image-slot { width: 100%; height: 100%; }
.ps-rules { flex: 1 1 auto; display: flex; flex-direction: column; gap: 11px; }
.ps-rule {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.4;
}
.ps-rule .pr-ico {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 7px;
  display: grid; place-items: center;
  margin-top: 1px;
}
.ps-rule.good .pr-ico { background: rgba(72,199,116,.16); color: #5fd18a; }
.ps-rule.bad .pr-ico { background: rgba(240,90,90,.15); color: #ef7a7a; }
.ps-rule .pr-ico svg { width: 14px; height: 14px; }
.ps-upbox-foot {
  padding: 18px 26px 24px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.ps-upbox-upload {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 13px 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px -8px var(--accent-ring);
  transition: filter .15s, transform .1s;
}
.ps-upbox-upload:hover { filter: brightness(1.08); }
.ps-upbox-upload:active { transform: scale(.98); }
.ps-upbox-upload svg { width: 19px; height: 19px; }

/* ---------- CHAT (generating) MODE ---------- */
.ps-banner.chatting {
  min-height: 100vh;
  justify-content: flex-end;
  padding-top: 24px;
  padding-bottom: 30px;
}
.ps-banner.chatting h1,
.ps-banner.chatting .ps-sub,
.ps-banner.chatting .ps-bar { display: none; }
.content.chatting .ps-browse { display: none; }
.content.chatting .lp-foot { display: none; }

.ps-feed-wrap { display: none; }
.ps-banner.chatting .ps-banner-inner {
  height: calc(100vh - 54px);
  max-width: 1080px;
}
.ps-banner.chatting .ps-feed-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  padding: 6px 4px 22px;
}
.ps-feed-head {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px;
  pointer-events: none;
}
.ps-feed-head > * { pointer-events: auto; }
.ps-feed-title {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
.ps-new {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff; border: 0; border-radius: 11px;
  padding: 9px 16px; font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; box-shadow: 0 8px 24px -8px var(--accent-ring);
  transition: filter .15s, transform .1s;
}
.ps-new:hover { filter: brightness(1.08); }
.ps-new:active { transform: scale(.96); }
.ps-new svg { width: 16px; height: 16px; }
.ps-feed { display: flex; flex-direction: column; gap: 36px; width: 100%; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .ps-upbox-body { flex-direction: column; }
  .ps-upbox-example { flex: 0 0 auto; width: 130px; }
}

/* ============================================================
   SHARED GUIDANCE POPUP (good/bad photo examples)
   ============================================================ */
.ag-pop {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(6,6,9,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  opacity: 0;
  transition: opacity .2s;
}
.ag-pop.open { display: flex; opacity: 1; }
.ag-box {
  width: 100%;
  max-width: 640px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform: translateY(14px);
  transition: transform .22s;
  box-shadow: 0 50px 110px -34px rgba(0,0,0,.82);
}
.ag-pop.open .ag-box { transform: translateY(0); }
.ag-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 26px 16px;
}
.ag-head h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
}
.ag-head p { margin: 0; color: var(--text-2); font-size: 14px; max-width: 52ch; }
.ag-close {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  display: grid; place-items: center; cursor: pointer;
}
.ag-close:hover { color: var(--text); border-color: var(--line-strong); }
.ag-close svg { width: 19px; height: 19px; }
.ag-body {
  padding: 6px 26px 4px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ag-group-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  margin-bottom: 12px;
}
.ag-group-title.good { color: #5fd18a; }
.ag-group-title.bad { color: #ef7a7a; }
.ag-dot { width: 8px; height: 8px; border-radius: 50%; }
.ag-dot.good { background: #5fd18a; }
.ag-dot.bad { background: #ef7a7a; }
.ag-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ag-cell { display: flex; flex-direction: column; gap: 8px; }
.ag-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.ag-cell.good .ag-thumb { border-color: rgba(95,209,138,.5); }
.ag-cell.bad .ag-thumb { border-color: rgba(239,122,122,.45); }
.ag-thumb image-slot { width: 100%; height: 100%; }
/* schematic portrait illustrations */
.agp-scene {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #4a4a58, #26262e);
  overflow: hidden;
}
.agp-scene.g-light { background: linear-gradient(160deg, #5b5b6a, #313139); }
.agp-scene.g-single { background: linear-gradient(160deg, #45505c, #25292f); }
.agp-scene.blur { filter: blur(2.6px) brightness(.62); }
.agp-head {
  position: absolute; left: 50%; top: 26%;
  transform: translateX(-50%);
  width: 40%; height: 40%;
  border-radius: 50%;
  background: #cda484;
  z-index: 2;
}
.agp-head.back { background: #b78f6e; }
.agp-head.back::after {
  content: ""; position: absolute; inset: -6% -4% 30% -4%;
  border-radius: 50%; background: #5a4632;
}
.agp-body {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 66%; height: 32%;
  border-radius: 46% 46% 0 0;
  background: #5a6473;
  z-index: 1;
}
.agp-eye {
  position: absolute; top: 40%; width: 4.5%; height: 4.5%;
  border-radius: 50%; background: #2a2320; z-index: 3;
}
.agp-eye.l { left: 42%; }
.agp-eye.r { left: 53.5%; }
.agp-mouth {
  position: absolute; top: 55%; left: 50%;
  transform: translateX(-50%);
  width: 8%; height: 4%;
  border: 0; border-bottom: 2px solid #2a2320;
  border-radius: 0 0 60% 60%; z-index: 3;
}
.agp-shades {
  position: absolute; top: 37%; left: 32%; right: 32%;
  height: 9%; background: #15151a; border-radius: 4px; z-index: 4;
}
.agp-cap {
  position: absolute; top: 19%; left: 30%; right: 30%;
  height: 13%; background: #2f3d49; border-radius: 50% 50% 8% 8%; z-index: 4;
}
.ag-badge {
  position: absolute;
  top: 8px; left: 8px;
  width: 24px; height: 24px;
  border-radius: 7px;
  display: grid; place-items: center;
  color: #fff;
  z-index: 2;
}
.ag-cell.good .ag-badge { background: #3fae6e; }
.ag-cell.bad .ag-badge { background: #d85a5a; }
.ag-badge svg { width: 15px; height: 15px; }
.ag-cap { font-size: 12.5px; color: var(--text-2); line-height: 1.35; }
.ag-foot {
  padding: 18px 26px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ag-note {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-2);
}
.ag-note svg { width: 16px; height: 16px; color: var(--accent-2); }
.ag-upload {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px -8px var(--accent-ring);
  transition: filter .15s, transform .1s;
}
.ag-upload:hover { filter: brightness(1.08); }
.ag-upload:active { transform: scale(.98); }
.ag-upload svg { width: 19px; height: 19px; }

@media (max-width: 560px) {
  .ag-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ag-cap { font-size: 11px; }
}

/* ---------- HOME: Использовать chips + viewer extras ---------- */
.use-chip {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  color: #111;
  border: 0;
  border-radius: 10px;
  padding: 9px 15px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .16s, transform .16s, filter .12s;
}
.use-chip svg { width: 16px; height: 16px; }
.use-chip:hover { filter: brightness(.94); }
.use-chip:active { transform: scale(.96); }

/* trending card */
.bp-thumb .use-chip {
  left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% + 6px));
}
.bp-card:hover .bp-thumb::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  background: rgba(10,10,12,.42);
  transition: opacity .16s;
}
.bp-card:hover .use-chip { opacity: 1; transform: translate(-50%, -50%); }

/* community tile */
.tile .tile-hover {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 10px;
}
.tile .tile-top {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.tile .tile-top .tile-actions { margin-left: auto; }
.tile .tile-hover { pointer-events: none; }
.tile:hover .tile-hover { pointer-events: auto; }
.tile .tile-use {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: #111;
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.tile .tile-use:hover { filter: brightness(.94); }
.tile .tile-use svg { width: 16px; height: 16px; }

/* Home prompt-bar hint (reuses .ps-hint look) */
.prompt-bar .ps-hint { margin: 0 12px 8px; }

/* viewer: prompt text block + single work */
.hs-work {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
  margin-bottom: 18px;
}
.hs-work .hs-img { display: block; max-width: 100%; max-height: 52vh; width: auto; height: auto; margin: 0 auto; object-fit: contain; border-radius: 10px; }
.hs-work image-slot { width: 100%; height: 100%; }
.ps-viewer-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 20px;
  font-family: inherit; font-size: 14.5px; font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ps-viewer-ghost:hover { border-color: var(--line-strong); background: var(--surface-3); }
.hs-prompt-label {
  font-size: 12.5px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
.hs-prompt {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}

/* Звезда сохранения в Фотосеты — на карточке и в попапе (п1) */
.ps-star { top: 12px; right: 12px; }
.ps-viewer-star {
  width: 46px; height: 46px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  display: grid; place-items: center; flex: 0 0 auto; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, transform .1s;
}
.ps-viewer-star:hover { color: var(--text); border-color: var(--line-strong); }
.ps-viewer-star:active { transform: scale(.92); }
.ps-viewer-star svg { width: 20px; height: 20px; }
.ps-viewer-star.saved-done { color: #f5c542; border-color: rgba(245,197,66,.55); }
.ps-viewer-star.saved-done svg { fill: #f5c542; }

/* перенос длинного названия фотосета на карточке (чтобы не лезло под звезду) */
.ps-card-info h3 { overflow-wrap: anywhere; word-break: break-word; padding-right: 4px; }

/* монетка токенов в попапе фотосета */
.pvf-cost .coin { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(160deg, #f0d97a, #c79a2e); display: inline-block; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
/* крестик появляется только когда промпт вставлен */
.ps-clear[hidden] { display: none !important; }

/* C2 — автор + лайк в шапке вьюера промпта */
.pvh-by { display: flex; align-items: center; gap: 14px; margin-top: 9px; flex-wrap: wrap; }
.pvh-author { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.pvh-dot { width: 7px; height: 7px; border-radius: 50%; background: #ffffff; display: inline-block; }
.pvh-like { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); cursor: pointer; font-size: 13px; font-weight: 600; transition: border-color .15s, color .15s, background .15s; }
.pvh-like svg { width: 16px; height: 16px; }
.pvh-like:hover { border-color: var(--accent-ring); color: var(--text); }
.pvh-like.liked { color: #ff5a7a; border-color: rgba(255,90,122,.42); background: rgba(255,90,122,.10); }
.pvh-like.liked svg { fill: #ff5a7a; }
.pvh-like[disabled] { opacity: .5; cursor: default; }

/* ============================================================
   Попап «Промпт сообщества» (главная) — НОВЫЙ дизайн.
   Десктоп: сплит (картинка слева, инфо справа). Мобилка: герой-оверлей.
   Классы .cpv-* отдельные — старый .ps-viewer-* остаётся для Фотосета.
   ============================================================ */
.cpv-card {
  width: 100%;
  max-width: 840px;
  max-height: 88vh;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 50px 110px -34px rgba(0,0,0,.82);
  transform: translateY(14px);
  transition: transform .22s;
  display: grid;
  grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "bar bar" "media side";
}
.ps-viewer.open .cpv-card { transform: translateY(0); }

.cpv-bar {
  grid-area: bar;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 20px; border-bottom: 1px solid var(--line);
}
.cpv-bar-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cpv-bar-r { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cpv-cat { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-2); white-space: nowrap; }
.cpv-author { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--text-2); min-width: 0; }
.cpv-author .cpv-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffffff; flex: 0 0 auto; }

.cpv-like { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; }
.cpv-like svg { width: 16px; height: 16px; }
.cpv-like.liked { color: #ff5a7a; border-color: rgba(255,90,122,.4); }
.cpv-like.liked svg { fill: #ff5a7a; stroke: #ff5a7a; }
.cpv-like[disabled] { opacity: .55; cursor: default; }
.cpv-iconbtn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.cpv-iconbtn:hover { color: var(--text); border-color: var(--line-strong); }
.cpv-iconbtn svg { width: 18px; height: 18px; }

.cpv-media { grid-area: media; position: relative; background: var(--bg); display: grid; place-items: center; padding: 18px; border-right: 1px solid var(--line); }
.cpv-img { display: block; max-width: 100%; max-height: 58vh; width: auto; height: auto; object-fit: contain; border-radius: 12px; }
image-slot.cpv-img { width: 100%; height: 360px; }
.cpv-ov { display: none; }

.cpv-side { grid-area: side; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; min-width: 0; overflow: hidden; }
.cpv-plabel { font-size: 12px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.cpv-prompt { color: var(--text); font-size: 14.5px; line-height: 1.6; overflow-y: auto; max-height: 42vh; padding-right: 6px; }
.cpv-prompt::-webkit-scrollbar { width: 7px; }
.cpv-prompt::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; }

.cpv-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.cpv-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.cpv-note svg { width: 16px; height: 16px; color: var(--accent-2); flex: 0 0 auto; }
.cpv-acts { display: flex; align-items: center; gap: 10px; }
.cpv-tr { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); display: grid; place-items: center; cursor: pointer; position: relative; }
.cpv-tr.locked { opacity: .9; }
.cpv-tr-lock { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; background: var(--lime); color: var(--lime-ink); display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); }
.cpv-tr-lock svg { width: 9px; height: 9px; }
.cpv-tr:hover { color: var(--text); border-color: var(--line-strong); }
.cpv-tr svg { width: 20px; height: 20px; }
.cpv-use { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; border: 0; border-radius: 13px; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 0 12px 30px -10px var(--accent-ring); }
.cpv-use:hover { filter: brightness(1.08); box-shadow: 0 16px 36px -8px var(--accent-ring); }
.cpv-use:active { transform: scale(.98); }
.cpv-use svg { width: 18px; height: 18px; }

/* ===== МОБИЛКА (≤760px): герой-оверлей ===== */
@media (max-width: 760px) {
  .cpv-card { display: block; max-width: 460px; max-height: 92vh; overflow-y: auto; }
  .cpv-bar { display: none; }
  .cpv-media { padding: 0; border-right: 0; background: var(--surface); display: block; position: relative; }
  .cpv-img { width: 100%; max-height: 56vh; border-radius: 0; }
  image-slot.cpv-img { height: 56vh; }
  .cpv-ov { display: flex; position: absolute; left: 0; right: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; pointer-events: none; }
  .cpv-ov > * { pointer-events: auto; }
  .cpv-ov-t { top: 0; background: linear-gradient(180deg, rgba(8,8,11,.78), transparent); }
  .cpv-ov-b { bottom: 0; background: linear-gradient(0deg, rgba(8,8,11,.85), transparent); }
  .cpv-ov .cpv-cat, .cpv-ov .cpv-author { color: #fff; }
  .cpv-ov .cpv-like, .cpv-ov .cpv-iconbtn { background: rgba(12,12,16,.5); border-color: rgba(255,255,255,.2); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .cpv-side { padding: 16px; overflow: visible; }
  .cpv-prompt { max-height: none; }
}

/* ============================================================
   LoRA-флоу: онбординг, обучение, генерация, лайтбокс
   ============================================================ */
#ps-layer { max-width: 760px; margin: 0 auto; padding: 32px 22px 80px; }

/* счётчик кадров на карточке */
.ps-card-count {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
  padding: 3px 9px; border-radius: 20px;
}

/* ── Онбординг ── */
.ps-ob-back, .ps-ob-title, .ps-ob-sub { text-align: left; }
.ps-ob-back { display: inline-flex; align-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); cursor: pointer; font-size: 13px; font-family: inherit; padding: 7px 14px; border-radius: 20px; margin-bottom: 16px; transition: .15s; }
.ps-ob-back:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface-3); }
.ps-ob-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px,4vw,30px); margin: 0 0 8px; }
.ps-ob-sub { color: var(--text-2); line-height: 1.6; margin: 0 0 20px; }
.ps-ob-tips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.ps-ob-tip { font-size: 13px; color: var(--text-2); background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.ps-ob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-bottom: 20px; }
.ps-ob-cell { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.ps-ob-cell img { width: 100%; height: 100%; object-fit: cover; }
.ps-ob-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; border: none; cursor: pointer; font-size: 15px; line-height: 1; }
.ps-ob-add { aspect-ratio: 1; border: 1.5px dashed var(--line-strong); border-radius: 12px; background: rgba(255,255,255,.02); color: var(--text-2); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; }
.ps-ob-add svg { width: 22px; height: 22px; }
.ps-ob-add:hover { border-color: var(--accent); color: var(--accent-2); }
.ps-ob-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-2); line-height: 1.5; margin-bottom: 18px; cursor: pointer; }
.ps-ob-consent input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); flex-shrink: 0; }
.ps-ob-consent a { color: var(--accent-2); }

/* ── Обучение (слайд-фильм) ── */
.ps-train { text-align: center; padding: 30px 0; display: flex; flex-direction: column; align-items: center; }
.ps-train-anim { position: relative; width: 120px; height: 120px; margin: 10px auto 30px; }
.ps-train-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--accent-soft); border-top-color: var(--accent); animation: psSpin 1.1s linear infinite; }
.ps-train-core { position: absolute; inset: 30px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--accent-2), var(--accent)); opacity: .85; animation: psPulse 2.2s ease-in-out infinite; }
@keyframes psSpin { to { transform: rotate(360deg); } }
@keyframes psPulse { 0%,100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.05); opacity: 1; } }
.ps-train-slide { min-height: 96px; transition: opacity .25s; max-width: 460px; }
.ps-train-slide h2 { font-family: var(--font-display); font-weight: 700; font-size: 21px; margin: 0 0 8px; }
.ps-train-slide p { color: var(--text-2); line-height: 1.6; margin: 0; }
.ps-train-status { color: var(--accent-2); font-size: 14px; margin: 18px 0 14px; }
.ps-train-dots { display: flex; gap: 7px; margin-bottom: 26px; }
.ps-train-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: background .3s; }
.ps-train-dots span.on { background: #ffffff; }

/* ── Генерация фотосета ── */
.ps-gen-bar { height: 6px; background: rgba(255,255,255,.06); border-radius: 20px; overflow: hidden; margin: 14px 0 22px; }
.ps-gen-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 20px; transition: width .5s ease; }
.ps-gen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ps-gen-cell { aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.ps-gen-cell img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .2s; }
.ps-gen-cell img:hover { transform: scale(1.03); }
.ps-gen-cell.skeleton { background: linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.03) 70%); background-size: 200% 100%; animation: psShimmer 1.4s infinite; }
@keyframes psShimmer { to { background-position: -200% 0; } }
.ps-gen-actions { display: flex; justify-content: center; margin-top: 22px; }

/* ── Лайтбокс ── */
.ps-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(6,6,9,.92); backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; cursor: zoom-out; }
.ps-lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); }
.ps-lb-dl { color: #111111; background: #ffffff; padding: 10px 24px; border-radius: 12px; text-decoration: none; font-weight: 600; border: 0; cursor: pointer; font-family: inherit; font-size: inherit; }
.ps-lb-dl:hover { background: var(--accent-2); }

/* ── Карточка: ряд превью-шейпов с hover-зумом ── */
.ps-card-previews { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4; display: flex; gap: 6px; justify-content: center; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.ps-card:hover .ps-card-previews { opacity: 1; transform: translateY(0); }
.ps-card-previews.shown { opacity: 1; transform: translateY(0); }   /* всегда видны */
.ps-card-prev { width: 38px; height: 50px; border-radius: 8px; overflow: hidden; border: 1.5px solid rgba(255,255,255,.5); box-shadow: 0 4px 10px -3px rgba(0,0,0,.6); transition: transform .18s; background: rgba(0,0,0,.3); }
.ps-card-prev img { width: 100%; height: 100%; object-fit: cover; }
.ps-card-prev:hover { transform: scale(1.18); border-color: #fff; }

/* ── Модалка пресета: галерея примеров ── */
.pv-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.pv-gallery-cell { aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.pv-gallery-cell.big { grid-column: 1 / -1; aspect-ratio: 16/10; }
.pv-gallery-cell img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .25s; }
.pv-gallery-cell img:hover { transform: scale(1.04); }
.pvb-empty { padding: 30px; text-align: center; color: var(--text-3); }
.pvf-note { font-size: 13px; color: var(--text-2); }

/* ── Двойники (профили) ── */
.ps-profiles { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.ps-profile { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2, rgba(255,255,255,.03)); cursor: pointer; transition: border-color .2s; }
.ps-profile.active { border-color: var(--accent); background: var(--accent-soft, rgba(140,120,255,.08)); }
.ps-profile-ava { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; }
.ps-profile-main { flex: 1; }
.ps-profile-name { font-weight: 600; }
.ps-profile-meta { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.ps-profile-del { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 13px; }
.ps-profile-del:hover { color: #ff7a7a; }
.ps-profile-add { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border: 1.5px dashed var(--line-strong); border-radius: 14px; background: none; color: var(--text-2); cursor: pointer; font-size: 14px; width: 100%; }
.ps-profile-add:hover { border-color: var(--accent); color: var(--accent-2); }
.ps-profile-add[disabled] { opacity: .5; cursor: not-allowed; }

/* ── История фотосетов ── */
.ps-hist { display: flex; flex-direction: column; gap: 22px; margin-top: 16px; }
.ps-hist-item { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--surface-2, rgba(255,255,255,.03)); }
.ps-hist-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.ps-hist-title { font-weight: 600; }
.ps-hist-date { font-size: 12px; color: var(--text-3); }
.ps-hist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.ps-hist-grid img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; cursor: zoom-in; }

/* ── Кнопки в баннере: двойники + история ── */
#ps-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.ps-create.ghost { background: rgba(255,255,255,.08); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18); color: #fff; }
.ps-create.ghost:hover { background: rgba(255,255,255,.16); }

/* ============================================================
   Баннер D1 — лента фотосетов на всю ширину + текст слева
   ============================================================ */
.ps-banner { position: relative; overflow: hidden; min-height: 760px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 32px; }
/* фон как на главной */
.ps-hero-bg { position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(11,11,16,.42) 0%, rgba(11,11,16,.30) 42%, rgba(11,11,16,.74) 100%),
    radial-gradient(90% 70% at 50% -10%, rgba(124,92,255,.28) 0%, transparent 60%),
    url('hero-banner.jpg');
  background-size: cover; background-position: center 38%; background-repeat: no-repeat; }
.ps-hero-glow { display: none; }
.ps-banner::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(10,10,12,.55) 100%),
    linear-gradient(to bottom, rgba(10,10,12,.35) 0%, rgba(10,10,12,.15) 45%, rgba(10,10,12,.92) 100%); }
.ps-banner-inner { position: relative; z-index: 3; width: 100%; max-width: 1080px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.psd-badge { display: none; }
.ps-banner-inner h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.02; letter-spacing: -.015em; margin-bottom: 16px; color: #fff; text-align: center; text-shadow: 0 4px 40px rgba(0,0,0,.45); }
.ps-banner-inner .ps-sub { color: rgba(255,255,255,.82); font-size: clamp(15px, 1.6vw, 19px); line-height: 1.4; margin-bottom: 34px; max-width: 560px; text-align: center; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
/* кнопки в одну строку, равной ширины */
#ps-bar { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
#ps-bar .ps-create { flex: 1 1 0; min-width: 190px; max-width: 260px; justify-content: center; display: inline-flex; align-items: center; }
@media (max-width: 760px) {
  .ps-banner { min-height: 540px; padding: 0 22px; }
  .ps-banner-inner h1 { font-size: clamp(28px, 8vw, 38px); line-height: 1.06; letter-spacing: -.01em; word-break: keep-all; overflow-wrap: break-word; hyphens: none; max-width: 100%; }
  .ps-banner-inner .ps-sub { font-size: 14.5px; line-height: 1.5; max-width: 340px; word-break: normal; overflow-wrap: normal; hyphens: none; }
  #ps-bar { width: 100%; max-width: 320px; }
  #ps-bar .ps-create { flex: 1 1 100%; min-width: 0; max-width: none; }
}

/* ============================================================
   Окно пресета — Hero-сплит
   ============================================================ */
.ps-viewer-card.hero { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; max-width: 880px; width: 100%; max-height: 86vh; height: auto; background: var(--surface-2, #1c1c23); border-radius: var(--radius-lg, 22px); overflow: hidden; border: 1px solid var(--line-strong); align-items: stretch; box-shadow: 0 30px 80px -30px rgba(0,0,0,.7); }
.ps-viewer-card.hero .pvh-img { height: 100%; align-self: stretch; }
.ps-viewer-card.hero .ps-viewer-close { position: absolute; top: 14px; right: 14px; z-index: 5; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ps-viewer-card.hero .ps-viewer-close svg { width: 18px; height: 18px; }
.pvh-img { background-size: cover; background-position: center; min-height: 440px; display: flex; align-items: center; justify-content: center; filter: none; opacity: 1; }
.pvh-side { padding: 30px; display: flex; flex-direction: column; overflow-y: auto; background: #26262e; }
.pvh-cat { color: var(--accent-2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.pvh-side h2 { font-family: var(--font-display); font-weight: 700; font-size: 26px; margin-bottom: 10px; }
.pvh-desc { color: var(--text-2); font-size: 14px; margin-bottom: 14px; line-height: 1.55; }
.pvh-meta { font-size: 13px; color: var(--text-3); margin-bottom: 16px; }
.pvh-examples { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 0 0 4px; }
.pvh-ex { width: 60px; height: 80px; border-radius: 10px; overflow: hidden; border: 2px solid var(--line); cursor: pointer; transition: transform .18s, border-color .18s; }
.pvh-ex img { width: 100%; height: 100%; object-fit: cover; }
.pvh-ex:hover { transform: scale(1.08); border-color: var(--accent); }
.pvh-ex.on { border-color: var(--accent); }
.pvh-foot { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.pvh-foot .pvf-note { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 12px; }
.pvh-foot .pvf-actions { display: flex; align-items: center; justify-content: space-between; }
.pvf-cost { font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; }
.pvf-cost .coin { flex: none; }
@media (max-width: 720px) {
  .ps-viewer { padding: 16px; align-items: center; }
  .ps-viewer-card.hero { display: block; grid-template-columns: none; max-width: 440px; width: 100%; max-height: 90vh; overflow-y: auto; border-radius: 20px; }
  /* фото сверху на всю ширину карточки, ровно, без зазоров */
  .ps-viewer-card.hero .pvh-img { width: 100%; height: auto; aspect-ratio: 4/5; align-self: auto; display: block; }
  .pvh-img { min-height: 0; background-size: cover; background-position: center; border-radius: 0; }
  /* крестик — крупный, контрастный */
  .ps-viewer-card.hero .ps-viewer-close { top: 12px; right: 12px; width: 40px; height: 40px; background: rgba(0,0,0,.6); box-shadow: 0 2px 10px rgba(0,0,0,.4); }
  .ps-viewer-card.hero .ps-viewer-close svg { width: 20px; height: 20px; }
  /* инфо-блок под фото */
  .pvh-side { padding: 20px 18px 22px; background: #26262e; }
  .pvh-side h2 { font-size: 22px; }
  .pvh-cat { margin-bottom: 6px; }
  .pvh-examples { justify-content: space-between; gap: 6px; }
  .pvh-ex { width: 100%; height: auto; aspect-ratio: 3/4; flex: 1 1 0; min-width: 0; }
  /* нижний блок: цена сверху, кнопки в строку равной ширины */
  .pvh-foot { margin-top: 18px; padding-top: 16px; }
  .pvh-foot .pvf-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .pvh-foot .pvf-actions .pvf-cost { justify-content: center; margin-bottom: 2px; }
  .pvh-foot .pvf-actions .ps-create,
  .pvh-foot .pvf-actions .ps-viewer-use,
  .pvh-foot .pvf-actions button:not(.pvf-cost),
  .pvh-foot .pvf-actions a:not(.pvf-cost) { width: 100%; justify-content: center; text-align: center; box-sizing: border-box; }
}

/* ============================================================
   A2 — Создание фотопрофиля (сплит: шаги + цена слева, фото справа)
   ============================================================ */
.ps-ob2 { max-width: 920px; margin: 0 auto; }
.ps-ob2-grid { display: grid; grid-template-columns: 0.85fr 1fr; border: 1px solid var(--line); border-radius: var(--radius-lg, 22px); overflow: hidden; margin-top: 14px; }
.ps-ob2-left { background: linear-gradient(160deg, #221c3a, var(--surface)); padding: 32px; display: flex; flex-direction: column; justify-content: center; }
.ps-ob2-h { font-family: var(--font-display); font-weight: 700; font-size: 24px; margin-bottom: 16px; }
.ps-ob2-steps { list-style: none; padding: 0; margin: 0; }
.ps-ob2-steps li { color: var(--text-2); padding: 7px 0 7px 32px; position: relative; font-size: 14px; }
.ps-ob2-steps li::before { content: attr(data-n); position: absolute; left: 0; top: 5px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-2); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ps-price-box { margin-top: 22px; background: rgba(124,92,255,.1); border: 1px solid var(--accent-soft); border-radius: 14px; padding: 16px; }
.ps-price-lbl { font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.ps-price-val { font-family: var(--font-display); font-weight: 700; font-size: 24px; display: flex; align-items: center; gap: 8px; }
.ps-price-note { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.ps-ob2-right { padding: 30px; }
.ps-ob2-rh { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin-bottom: 4px; }
.ps-ob2-cap { color: var(--text-2); font-size: 13px; margin-bottom: 12px; }
.ps-ob2-counter { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--accent-2); padding: 4px 11px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-bottom: 12px; }
.ps-ob2-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; max-height: 230px; overflow-y: auto; padding-right: 6px; margin-bottom: 14px; }
.ps-ob2-cells::-webkit-scrollbar { width: 7px; }
.ps-ob2-cells::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
.ps-ob2-cells .ps-ob-cell { aspect-ratio: 1; position: relative; border-radius: 11px; overflow: hidden; border: 1px solid var(--line); }
.ps-ob2-cells .ps-ob-cell img { width: 100%; height: 100%; object-fit: cover; }
.ps-ob2-cells .ps-ob-del { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; border: none; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.ps-ob2-cells .ps-ob-add { aspect-ratio: 1; border: 1.5px dashed var(--line-strong); border-radius: 11px; background: none; color: var(--text-3); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; }
.ps-ob2-cells .ps-ob-add:hover { border-color: var(--accent); color: var(--accent-2); }
.ps-ob2-cells .ps-ob-add svg { width: 20px; height: 20px; }
.coin { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, #e9c46a, #c9961f); display: inline-block; vertical-align: -2px; }
@media (max-width: 760px) {
  .ps-ob2-grid { grid-template-columns: 1fr; }
  .ps-ob2-left { padding: 24px 20px; }
  .ps-ob2-right { padding: 22px 18px; }
  .ps-ob2-cells { grid-template-columns: repeat(3, 1fr); max-height: 300px; }
}

/* ============================================================
   C1 — Экран фотопрофилей (карточки)
   ============================================================ */
.ps-pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 18px 0 12px; }
.ps-pcard { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: var(--surface-2); position: relative; transition: border-color .2s; }
.ps-pcard.active { border-color: var(--accent); background: var(--accent-soft); }
.ps-pcard-badge { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 600; color: var(--accent-2); background: rgba(124,92,255,.15); padding: 3px 9px; border-radius: 20px; }
.ps-pcard-ava { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.ps-pcard-nm { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.ps-pcard-name { font-weight: 600; font-size: 15px; }
.ps-pcard-edit { background: none; border: none; cursor: pointer; color: var(--text-3); padding: 2px; display: flex; }
.ps-pcard-edit svg { width: 14px; height: 14px; }
.ps-pcard-edit:hover { color: var(--accent-2); }
.ps-pcard-meta { font-size: 12.5px; color: var(--text-3); margin-bottom: 14px; }
.ps-pcard-acts { display: flex; gap: 8px; }
.ps-pcard-use { flex: 1; font-size: 12.5px; padding: 8px; border-radius: 9px; border: 1px solid var(--line); background: none; color: var(--text-2); cursor: pointer; font-family: inherit; }
.ps-pcard-use.on { background: #ffffff; border-color: var(--accent); color: #111111; font-weight: 600; }
.ps-pcard-use:not(.on):hover { border-color: var(--accent); color: var(--accent-2); }
.ps-pcard-del { width: 34px; border-radius: 9px; border: 1px solid var(--line); background: none; color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ps-pcard-del svg { width: 15px; height: 15px; }
.ps-pcard-del:hover { border-color: #ff7a7a; color: #ff7a7a; }
.ps-pcard.add { border: 1.5px dashed var(--line-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; min-height: 180px; gap: 8px; }
.ps-pcard.add:hover { border-color: var(--accent); }
.ps-pcard.add[data-disabled="1"] { opacity: .5; cursor: not-allowed; }
.ps-pcard-plus { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-2); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.ps-pcard-addtxt { font-size: 14px; color: var(--text); }
.ps-pcard-price { font-size: 12px; color: var(--text-3); }
.ps-pcards-note { font-size: 12.5px; color: var(--text-3); text-align: center; margin-top: 6px; }
@media (max-width: 560px) { .ps-pcards { grid-template-columns: 1fr; } }

/* Hero — селектор фотопрофиля */
.pvh-prof { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 9px 12px; margin: 14px 0 0; background: var(--surface-2); }
.pvh-prof[data-multi] { cursor: pointer; }
.pvh-prof[data-multi]:hover { border-color: var(--accent); }
.pvh-prof-ava { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 13px; flex-shrink: 0; }
.pvh-prof-info { flex: 1; min-width: 0; }
.pvh-prof-lbl { font-size: 11px; color: var(--text-3); }
.pvh-prof-name { font-size: 13.5px; font-weight: 600; }
.pvh-prof-chev { color: var(--text-3); flex-shrink: 0; }

/* ============================================================
   D3 — Генерация (стопка карточек)
   ============================================================ */
.ps-gen3 { max-width: 560px; margin: 0 auto; text-align: center; }
.ps-gen3 .ps-ob-back { display: inline-block; margin-bottom: 18px; }
.ps-gen3-h { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin-bottom: 6px; }
.ps-gen3-sub { color: var(--text-3); font-size: 12.5px; margin-bottom: 28px; }
.ps-gen3-sub b { color: var(--text-2); }
.ps-gen3-stack { position: relative; width: 230px; height: 300px; margin: 0 auto 22px; }
.ps-gen3-card { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface-2); box-shadow: 0 14px 40px -16px rgba(0,0,0,.7); }
.ps-gen3-card[data-i="0"] { transform: rotate(-6deg) translateX(-10px); }
.ps-gen3-card[data-i="1"] { transform: rotate(3deg) translateX(8px); }
.ps-gen3-card[data-i="2"] { transform: rotate(-2deg); }
.ps-gen3-card[data-i="3"] { transform: rotate(5deg) translateX(4px); }
.ps-gen3-card img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.ps-gen3-card.done img { opacity: 1; }
.ps-gen3-sp { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 26px; height: 26px; border: 3px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.ps-gen3-prog { max-width: 360px; margin: 0 auto; height: 6px; background: rgba(255,255,255,.07); border-radius: 20px; overflow: hidden; }
.ps-gen3-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 20px; transition: width .6s; }
.ps-gen3-count { font-size: 13px; color: var(--text-2); margin-top: 12px; }
.ps-gen3-count b { color: var(--accent-2); }

/* ============================================================
   E2 — Результат
   ============================================================ */
.ps-e2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; max-width: 840px; margin: 0 auto; }
.ps-e2-main { border-radius: 18px; overflow: hidden; max-height: 72vh; border: 1px solid var(--line-strong); background: #0d0d12; display: flex; align-items: center; justify-content: center; }
.ps-e2-main img { max-width: 100%; max-height: 72vh; width: auto; height: auto; object-fit: contain; display: block; }
.ps-e2-head { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.ps-e2-check { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; animation: e2pop .45s cubic-bezier(.2,1.4,.5,1) both; }
@keyframes e2pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ps-e2-check svg { width: 19px; height: 19px; }
.ps-e2-check svg path { stroke: var(--accent-2); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke-dasharray: 24; stroke-dashoffset: 24; animation: e2draw .5s .25s forwards; }
@keyframes e2draw { to { stroke-dashoffset: 0; } }
.ps-e2-head h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; }
.ps-e2-sub { color: var(--text-2); font-size: 13.5px; margin-bottom: 16px; }
.ps-e2-sub b { color: var(--text); }
.ps-e2-thumbs { display: flex; gap: 8px; margin-bottom: 18px; }
.ps-e2-thumbs img { width: 58px; aspect-ratio: 3/4; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); cursor: pointer; transition: border-color .15s, transform .15s; }
.ps-e2-thumbs img:hover { transform: translateY(-2px); }
.ps-e2-thumbs img.on { border-color: var(--accent); }
.ps-e2-saved { display: inline-flex; align-items: center; gap: 7px; background: rgba(62,207,142,.12); color: #3ecf8e; font-size: 12.5px; font-weight: 500; padding: 7px 14px; border-radius: 20px; margin-bottom: 20px; }
.ps-e2-saved a { color: var(--text); text-decoration: underline; }
.ps-e2-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.ps-e2-acts .ps-create { width: auto; display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 760px) {
  .ps-e2 { grid-template-columns: 1fr; gap: 18px; }
  .ps-e2-main { max-height: 60vh; width: auto; margin: 0 auto; }
  .ps-e2-thumbs img { flex: 1; }
  .ps-e2-acts { flex-direction: column; }
  .ps-e2-acts .ps-create { width: 100%; justify-content: center; }
}

/* ============================================================
   B — Тур во время обучения (полноэкранный)
   ============================================================ */
.ps-tour { border: 1px solid var(--line); border-radius: var(--radius-lg, 22px); overflow: hidden; background: var(--surface); max-width: 1000px; margin: 0 auto; }
.ps-tour-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid var(--line); background: var(--surface-2); position: relative; z-index: 5; }
.ps-tour-st { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.ps-tour-sp { width: 16px; height: 16px; border: 2px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
.ps-tour-bell { position: relative; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.ps-tour-bell svg { width: 18px; height: 18px; color: var(--text-2); }
.ps-tour-dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 2px var(--surface-2); }
.ps-tour-stage { position: relative; height: 520px; overflow: hidden; background: #000; }
.ps-tour-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-tour-anim-bg { background: radial-gradient(120% 100% at 30% 20%, #1e1830, #101014); }
.ps-tour-vph { background: radial-gradient(120% 100% at 30% 20%, #2a2018, #101014); }
.ps-tour-veil { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(8,8,11,.4) 60%, rgba(8,8,11,.9) 100%), linear-gradient(to top, rgba(8,8,11,.85), transparent 45%); }
.ps-tour-tag { position: absolute; top: 16px; left: 20px; font-size: 11px; font-weight: 600; letter-spacing: .05em; color: #fff; text-transform: uppercase; background: rgba(0,0,0,.45); padding: 5px 11px; border-radius: 20px; z-index: 3; }
.ps-tour-cta { position: absolute; right: 28px; bottom: 26px; max-width: 62%; text-align: right; z-index: 3; }
.ps-tour-cta::before { content: ""; position: absolute; inset: -20px -20px -20px -40px; background: radial-gradient(120% 120% at 80% 80%, rgba(8,8,11,.7), transparent 70%); z-index: -1; border-radius: 20px; }
.ps-tour-cta h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; margin-bottom: 6px; color: #fff; }
.ps-tour-cta p { color: rgba(255,255,255,.85); font-size: 14px; margin-bottom: 14px; }
.ps-tour-try { background: #ffffff; color: #111111; border: none; padding: 12px 24px; border-radius: 12px; font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit; }
.ps-tour-try:hover { background: var(--accent-2); }
/* имитации */
.ps-tour-sim { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); width: 46%; z-index: 2; }
.ps-tour-bubble { background: rgba(40,40,48,.92); backdrop-filter: blur(4px); border-radius: 14px 14px 4px 14px; padding: 11px 15px; font-size: 14px; margin-left: auto; max-width: 90%; margin-bottom: 12px; color: #fff; min-height: 20px; }
.ps-tour-attach { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-bottom: 12px; color: #fff; font-size: 12px; }
.ps-tour-attach img { width: 46px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-strong); }
.ps-tour-res { display: flex; justify-content: flex-start; }
.ps-tour-res img { width: 150px; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; border: 1px solid var(--line-strong); opacity: 0; transform: scale(.92); transition: opacity .5s, transform .5s; }
.ps-tour-res img.show { opacity: 1; transform: scale(1); }
.ps-tour-ba { display: flex; gap: 10px; align-items: center; }
.ps-tour-ba img { width: 120px; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.ps-tour-cut { background: repeating-conic-gradient(#2a2a33 0% 25%, #1c1c23 0% 50%) 50%/14px 14px; opacity: 0; transition: opacity .6s; }
.ps-tour-arr { color: #fff; font-size: 22px; }
.ps-tour-claude { width: 50%; }
.ps-tour-claude-h { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.ps-tour-av { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, #d97757, #c45a38); display: flex; align-items: center; justify-content: center; }
.ps-tour-ans { font-size: 13.5px; color: #fff; line-height: 1.55; min-height: 40px; }
.ps-tour-cursor { display: inline-block; width: 2px; height: 15px; background: #fff; vertical-align: -2px; animation: blink .7s steps(1) infinite; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }
/* низ */
.ps-tour-foot { padding: 15px 22px; border-top: 1px solid var(--line); background: var(--surface-2); }
.ps-tour-foot-row { display: flex; align-items: center; gap: 12px; justify-content: center; }
.ps-tour-foot .ps-tour-bell { cursor: default; }
.ps-tour-wait { font-size: 14px; font-weight: 600; color: var(--text); }
.ps-tour-sub { font-size: 12px; color: var(--text-3); }
.ps-tour-sub b { color: var(--accent-2); font-weight: 600; }
@media (max-width: 760px) {
  .ps-tour-stage { height: 540px; }
  .ps-tour-sim { left: 18px; right: 18px; width: auto; top: 38%; }
  .ps-tour-claude { width: auto; }
  .ps-tour-cta { right: 18px; left: 18px; bottom: 20px; max-width: 100%; }
  .ps-tour-cta h2 { font-size: 20px; }
  .ps-tour-wait { font-size: 13px; }
  .ps-tour-sub { font-size: 11px; }
}

/* ============================================================
   Фильтры каталога — десктоп кнопки / мобилка «Выбрать»
   ============================================================ */
.ps-filters { margin-bottom: 20px; }
.ps-cats-desk { display: flex; gap: 8px; flex-wrap: wrap; }
.ps-cats-desk .ps-cat-pill { background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); padding: 9px 18px; border-radius: 24px; cursor: pointer; font-size: 13.5px; font-weight: 500; font-family: inherit; white-space: nowrap; transition: .15s; }
.ps-cats-desk .ps-cat-pill.active { background: #ffffff; border-color: var(--accent); color: #111111; }
.ps-cats-desk .ps-cat-pill:not(.active):hover { border-color: var(--line-strong); color: var(--text); }
/* мобильный селектор скрыт на десктопе */
.ps-cats-mob { display: none; position: relative; }
.ps-select-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text); padding: 12px 16px; border-radius: 12px; cursor: pointer; font-size: 14px; font-family: inherit; }
.ps-select-cur { font-weight: 600; }
.ps-select-btn svg { width: 16px; height: 16px; color: var(--text-3); transition: transform .2s; }
.ps-select-btn.open svg { transform: rotate(180deg); }
.ps-dropdown { position: absolute; top: 54px; left: 0; right: 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 20px 50px -16px rgba(0,0,0,.7); z-index: 30; overflow: hidden; display: none; }
.ps-dropdown.open { display: block; }
.ps-dd-sec { padding: 6px; }
.ps-dd-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; padding: 8px 12px 4px; }
.ps-dd-item { padding: 11px 12px; border-radius: 9px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: space-between; }
.ps-dd-item:hover { background: var(--surface-2); }
.ps-dd-item.on { color: var(--accent-2); font-weight: 600; }
.ps-dd-item.on::after { content: "✓"; }
.ps-dd-sep { height: 1px; background: var(--line); margin: 4px 0; }
@media (max-width: 720px) {
  /* На мобилке — открытые кнопки пола (Все/Женские/Мужские), а не выпадашка «Все стили» */
  .ps-cats-desk { display: flex; }
  .ps-cats-mob { display: none; }
  .ps-cats-desk .ps-cat-pill { padding: 8px 15px; font-size: 13px; }
}

/* ============================================================
   Inline-блок «Мои фотопрофили» (раскрывается под hero)
   ============================================================ */
.ps-profiles-inline { max-width: 1040px; margin: 0 auto; padding: 0 24px; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .35s ease, opacity .3s ease, padding .35s ease; }
.ps-profiles-inline.open { max-height: 1200px; opacity: 1; padding: 24px; }
.ps-pinline-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ps-pinline-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; margin-bottom: 4px; }
.ps-pinline-sub { color: var(--text-2); font-size: 14px; max-width: 560px; }
.ps-pinline-close { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ps-pinline-close:hover { border-color: var(--line-strong); color: var(--text); }
.ps-pinline-close svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .ps-profiles-inline.open { padding: 18px; }
  .ps-pinline-title { font-size: 21px; }
}

/* ============================================================
   Кнопка «Пример» + попап с примерами фото
   ============================================================ */
.ps-ob2-counterrow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ps-ob2-counterrow .ps-ob2-counter { margin-bottom: 0; }
.ps-ob2-example { display: inline-flex; align-items: center; gap: 5px; background: var(--accent-soft); color: var(--accent-2); border: 1px solid rgba(124,92,255,.25); padding: 4px 11px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: .15s; }
.ps-ob2-example:hover { background: rgba(124,92,255,.24); }
.ps-ex-pop { position: fixed; inset: 0; z-index: 220; background: rgba(6,6,9,.78); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .22s; }
.ps-ex-pop.open { opacity: 1; }
.ps-ex-card { position: relative; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg, 22px); max-width: 540px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 28px; transform: scale(.96); transition: transform .22s; }
.ps-ex-pop.open .ps-ex-card { transform: scale(1); }
.ps-ex-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ps-ex-close:hover { color: var(--text); border-color: var(--line-strong); }
.ps-ex-close svg { width: 16px; height: 16px; }
.ps-ex-h { font-family: var(--font-display); font-weight: 700; font-size: 21px; margin-bottom: 6px; padding-right: 40px; }
.ps-ex-sub { color: var(--text-2); font-size: 13.5px; line-height: 1.5; margin-bottom: 18px; }
.ps-ex-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.ps-ex-cell { aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.ps-ex-cell img { width: 100%; height: 100%; object-fit: cover; }
.ps-ex-load { grid-column: 1/-1; text-align: center; color: var(--text-3); font-size: 13px; padding: 24px 0; }
.ps-ex-tips { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ps-ex-tips li { font-size: 12.5px; color: var(--text-2); }
@media (max-width: 560px) {
  .ps-ex-grid { grid-template-columns: repeat(3, 1fr); }
  .ps-ex-tips { grid-template-columns: 1fr; }
  .ps-ex-card { padding: 22px 18px; }
}

/* ============================================================
   Всплывающий список профилей у кнопки «Выбрать профиль»
   ============================================================ */
.pvh-menu { z-index: 3000; background: var(--surface, #15151a); border: 1px solid var(--line, rgba(255,255,255,.1));
  border-radius: 14px; padding: 8px; box-shadow: 0 24px 60px -14px rgba(0,0,0,.75); max-height: 320px; overflow-y: auto; }
.pvh-menu-it { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px;
  background: none; border: 0; cursor: pointer; text-align: left; color: var(--text, #f4f4f6); }
.pvh-menu-it:hover { background: rgba(255,255,255,.05); }
.pvh-menu-it.sel { background: rgba(228,244,130,.1); }
.pvh-menu-ava { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--surface-2, #1e1e24); font-weight: 700; font-size: 13px; }
.pvh-menu-name { font-size: 14px; font-weight: 500; }
.pvh-menu-add { display: block; margin-top: 6px; padding: 10px; border-radius: 10px; text-align: center;
  text-decoration: none; color: var(--accent, #E4F482); font-weight: 600; font-size: 13px;
  border: 1px dashed rgba(228,244,130,.3); }
.pvh-menu-add:hover { background: rgba(228,244,130,.08); }

/* ============================================================
   /photoset — единый анимированный фон (заголовок + карточки), как /character.
   Заголовок центрирован, без отдельного шейпа и без затемнения.
   ============================================================ */
/* Общий фон под всей страницей */
.ps-bganim { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(120deg, #0a0812, #0d0a18, #0a0d18, #0c0a14);
  background-size: 300% 300%; animation: psBgShift 24s ease-in-out infinite; }
.ps-bganim::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(700px 520px at 20% 20%, rgba(124,92,255,.22), transparent 60%),
    radial-gradient(650px 500px at 80% 70%, rgba(228,244,130,.12), transparent 60%),
    radial-gradient(600px 480px at 60% 30%, rgba(80,160,255,.14), transparent 60%);
  animation: psBgFloat 28s ease-in-out infinite alternate;
}
@keyframes psBgShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes psBgFloat {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .ps-bganim, .ps-bganim::before { animation: none; } }
/* контент над фоном; сам фон контента прозрачный, чтобы виднелась анимация */
body[data-page="photo"] .content { position: relative; z-index: 1; background: transparent !important; }
body[data-page="photo"] .content > .ps-browse { background: transparent !important; }

/* Заголовок: центрированный блок БЕЗ шейпа/рамки/затемнения, на общем фоне.
   Никакого негативного margin — идеально по центру области контента. */
.ps-banner.ps-banner-b {
  min-height: 0 !important; display: block !important; position: relative; z-index: 1;
  margin: 40px auto 0 !important; padding: 0 40px !important;
  width: 100%; max-width: 1100px; overflow: visible !important; background: transparent !important; border: 0 !important;
}
.ps-banner-b .ps-banner-inner {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0;
  border: 0 !important; border-radius: 0 !important; padding: 20px 0 !important; overflow: visible !important;
  margin: 0 auto !important; background: transparent !important; box-shadow: none !important;
}
.ps-banner-b .ps-banner-inner::before { display: none !important; }  /* убрали затемнение/подложку */
/* Убираем ВСЁ, что создаёт «шейп» и затемнение баннера — остаётся единый фон страницы */
.ps-banner.ps-banner-b::after,
.ps-banner.ps-banner-b::before { display: none !important; content: none !important; }
.ps-banner.ps-banner-b .ps-hero-bg,
.ps-banner.ps-banner-b .ps-banner-bg,
.ps-banner.ps-banner-b .ps-hero-glow { display: none !important; background: none !important; }
.ps-banner-b .psb-l { max-width: 60ch; }
.ps-banner-b .psd-badge { display: inline-block; margin-bottom: 16px; font: 700 12px/1 var(--font-display);
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent); background: none; padding: 0; border: 0; }
.ps-banner-b h1 { font-family: var(--font-head, var(--font-display)); font-weight: 700;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.04; margin: 0; color: #fff; }
.ps-banner-b .ps-sub { color: var(--text-2); font-size: 16px; line-height: 1.5; margin: 16px auto 0; max-width: 52ch; }
.ps-banner-b .psb-r { text-align: center; flex: none; margin-top: 24px; }
.ps-banner-b .psb-stat { font-family: var(--font-display); font-weight: 700; font-size: 34px; color: var(--accent); line-height: 1; }
.ps-banner-b .psb-stat-l { color: var(--text-2); font-size: 13px; margin-top: 4px; }
.ps-banner-b .ps-bar { display: none; }

@media (max-width: 820px) {
  .ps-banner.ps-banner-b { margin-top: 16px !important; padding: 0 16px !important; }
  .ps-banner-b h1 { font-size: clamp(26px, 8vw, 34px); }
  .ps-banner-b .ps-sub { padding: 0 6px; }
}

/* Экран «Фотосессия готова»: «Скачать все» — белый шейп, чёрный текст */
#ps-e2-dlall.ps-create { background: #ffffff !important; color: #111111 !important; box-shadow: 0 10px 26px -10px rgba(0,0,0,.35); }
#ps-e2-dlall.ps-create:hover { filter: brightness(.94); }

/* ── Этап 14: мобильные правки фотосессий ── */
@media (max-width: 720px) {
  /* убираем 2 шейпа на карточке (название + кадры) — на мелких карточках они наезжают */
  .ps-card-cat, .ps-card-count { display: none !important; }
  /* убираем затемняющий оверлей поверх обложки карточки */
  .ps-card > .ps-card-overlay { background: transparent !important; }
}

/* ─────────────────────────────────────────────────────────────
   Кнопка «Активный профиль» над каталогом.
   Раскрывает панель со списком фотопрофилей: выбрать, переименовать, удалить.
   Раньше панель была скрыта, и второй персонаж выбрать было негде.
   ───────────────────────────────────────────────────────────── */
.ps-bar-prof {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px 9px 10px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 999px; cursor: pointer; color: var(--text);
  font-family: inherit; transition: border-color .15s, background .15s;
}
.ps-bar-prof:hover { border-color: var(--accent-ring); background: rgba(255,255,255,.04); }

.ps-bar-ava {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 700; font-size: 14px;
}
.ps-bar-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.ps-bar-lbl { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.ps-bar-name { font-size: 14px; font-weight: 600; }
.ps-bar-count { font-size: 12px; color: var(--text-2); margin-left: 2px; }
.ps-bar-car { width: 16px; height: 16px; color: var(--text-2); transition: transform .2s; }
.ps-bar-prof[aria-expanded="true"] .ps-bar-car { transform: rotate(180deg); }

@media (max-width: 820px) {
  .ps-bar { margin-bottom: 14px; }
  .ps-bar-name { font-size: 13.5px; }
}

/* Убираем любое затемнение/оверлей поверх превью-миниатюр в модалке фотосессии */
.pvh-examples, .pvh-ex { position: relative; z-index: 2; }
.pvh-ex::before, .pvh-ex::after, .pvh-examples::before, .pvh-examples::after { display: none !important; content: none !important; }
.pvh-ex img { filter: none !important; opacity: 1 !important; }
.pvh-ex { background: transparent !important; }
/* карточка модалки — гарантированно непрозрачная, чтобы каталог позади не просвечивал */
.ps-viewer-card.hero { background: #1c1c23 !important; }
.pvh-side { background: #26262e !important; position: relative; z-index: 1; }