:root{
  --bg1:#FFE3D0;
  --bg2:#FFD1E6;
  --bg3:#E3D3FF;
  --card:#FFFFFF;
  --ink:#3A2E39;
  --ink-soft:#7A6B77;
  --line:#F1E2ED;
  --coral:#FF6F5E;
  --coral-ink:#fff;
  --mint:#2FBFB1;
  --sun:#FFC15E;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg1:#2B2140;
    --bg2:#3A1F3D;
    --bg3:#241E3A;
    --card:#241F30;
    --ink:#F3ECF6;
    --ink-soft:#B6A9BE;
    --line:#3A3247;
    --coral:#FF8A73;
    --coral-ink:#2B1620;
    --mint:#4FD9CB;
    --sun:#FFCE7A;
  }
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  overflow:hidden;
  position:relative;
  background: linear-gradient(160deg, var(--bg1), var(--bg2) 55%, var(--bg3));
}

/* мягкий фон из размытых цветных пятен */
.blobs{ position:fixed; inset:0; overflow:hidden; z-index:0; }
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:.55;
  animation:drift 22s ease-in-out infinite;
}
.blob.b1{ width:380px; height:380px; background:var(--coral); top:-8%; left:-10%; animation-delay:0s; }
.blob.b2{ width:320px; height:320px; background:var(--mint); bottom:-12%; right:-8%; animation-delay:4s; }
.blob.b3{ width:260px; height:260px; background:var(--sun); bottom:10%; left:8%; animation-delay:8s; }
@keyframes drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(20px,-24px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce){ .blob{ animation:none; } }

.stage{
  position:relative;
  z-index:1;
  width:min(380px, 90vw);
  display:flex;
  align-items:center;
  gap:14px;
}

.back{
  position:absolute; top:-42px; left:0;
  background:var(--card); border:none; cursor:pointer;
  color:var(--ink-soft); font-size:15px; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.back:hover{ color:var(--ink); }
.back:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }
.back[hidden]{ visibility:hidden; }

/* боковой счётчик слайдов */
.counter{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  flex-shrink:0;
}
.counter-current{ font-size:15px; font-weight:700; color:var(--coral); }
.counter-total{ font-size:11px; color:var(--ink-soft); }
.counter-track{
  width:3px; height:170px; border-radius:2px; background:var(--line);
  position:relative; overflow:hidden;
}
.counter-track i{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(var(--coral), var(--mint));
  border-radius:2px; transition:height .45s cubic-bezier(.4,0,.2,1);
}

.card-frame{ flex:1; overflow:hidden; border-radius:26px; }

.card{
  position:relative;
  background:var(--card);
  border-radius:26px;
  padding:26px 24px 22px;
  box-shadow:0 8px 20px rgba(120,60,90,.10), 0 24px 48px rgba(120,60,90,.14);
  min-height:500px;
  display:flex;
  flex-direction:column;
  transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .32s cubic-bezier(.4,0,.2,1);
}
.card.leave-fwd{ transform:translateX(-36px); opacity:0; }
.card.leave-back{ transform:translateX(36px); opacity:0; }
.card.enter{ transform:translateX(0); opacity:1; }

/* плейсхолдер под фото — замените на <img> в script.js через поле `photo` */
.photo{
  height:230px; border-radius:18px; margin-bottom:18px;
  border:2px dashed color-mix(in srgb, var(--coral) 45%, var(--line));
  background: color-mix(in srgb, var(--coral) 6%, transparent);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-size:13px; text-align:center; padding:12px;
  overflow:hidden;
}
.photo img{ width:100%; height:100%; object-fit:cover; border-radius:16px; }

/* индивидуально увеличенное фото — управляется через photoLarge / photoMedium в script.js */
.photo.photo-large{ height:320px; }
.photo.photo-medium{ height:270px; }

.body-text{ flex:1; }
.eyebrow{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mint); margin:0 0 8px; font-weight:600;
}
h1{ font-size:22px; line-height:1.28; margin:0 0 10px; font-weight:700; text-wrap:balance; }
p{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0; }

.buttons{ display:flex; gap:10px; margin-top:22px; }
button.act{
  flex:1;
  border-radius:14px;
  padding:13px 14px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease;
  border:2px solid var(--line);
  background:var(--card);
  color:var(--ink);
}
button.act.primary{
  background:linear-gradient(135deg, var(--coral), color-mix(in srgb, var(--coral) 70%, var(--sun)));
  color:var(--coral-ink); border-color:transparent;
  box-shadow:0 8px 18px color-mix(in srgb, var(--coral) 35%, transparent);
}
button.act:active{ transform:scale(.96); }
button.act:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }

/* убегающая кнопка "Нет" — остаётся на своём месте в ряду (50/50 с "Да"),
   а при наведении курсора визуально уворачивается через transform,
   поэтому соседняя кнопка "Да" никогда не меняет размер и позицию */
button.act.runaway{
  position:relative;
  transition:transform .22s ease;
  z-index:3;
}

.question{
  font-size:15.5px; font-weight:700; color:var(--ink); margin:16px 0 0;
}
.question:empty{ display:none; margin:0; }

.contacts{ display:none; flex-direction:column; gap:10px; margin-top:6px; }
.contacts.show{ display:flex; }
.contact-row{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:13.5px;
}
.contact-row span:first-child{ color:var(--ink-soft); }
.contact-row span:last-child{ font-family: ui-monospace, monospace; font-weight:600; }

.glow{
  position:absolute; inset:0; border-radius:26px; pointer-events:none;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--sun) 35%, transparent), transparent 70%);
  opacity:0; transition:opacity .8s ease;
}
.glow.on{ opacity:1; }

.toast{
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--card);
  padding:10px 16px; border-radius:12px; font-size:13px; font-weight:600;
  opacity:0; transition:opacity .3s ease, transform .3s ease; pointer-events:none;
  z-index:2;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }