/* PairScan — тёплый дизайн прохождения теста (форма / тест / загрузка).
   Токены как на лендинге mockup-v4 и в отчёте report.html. */
:root{
  --ink:#241f33; --ink-soft:#463f5c; --ink-mute:#7b7590; --line:rgba(37,31,51,.09);
  --peri:#6980F0; --peri-deep:#4d63d8; --pink:#F53F94; --pink-deep:#d81f77;
  --green:#57b93a; --green-deep:#3f9a28; --amber:#E0902A; --red:#E5334F;
  --g-pink:linear-gradient(135deg,#FF6BB0,#F53F94 55%,#d81f77);
  --g-peri:linear-gradient(135deg,#8AA0FF,#6980F0 55%,#4d63d8);
  --glass:rgba(255,255,255,.74);
  --sh-soft:0 14px 36px -14px rgba(70,40,120,.26);
  --sh-lift:0 26px 60px -18px rgba(70,40,120,.40);
  --fd:'Oswald',sans-serif; --fb:'Manrope',sans-serif;
  --r:26px;
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* все кнопки воронки: без нативного оформления и без квадратной фокус-обводки при клике мышью;
   обводка только для клавиатуры (:focus-visible) — для доступности */
button{ -webkit-appearance:none; appearance:none; font-family:inherit; }
button:focus{ outline:none; }
button:focus-visible{ outline:2px solid var(--peri); outline-offset:2px; }
html{ -webkit-text-size-adjust:100%; background:#F4F0FB; }
body{
  font-family:var(--fb); color:var(--ink); position:relative; min-height:100vh; overflow-x:hidden;
  /* свечения в vw — масштабируются с шириной экрана (как аврора главной на любом мониторе) */
  background:
    radial-gradient(54vw 50vw at 4% -6%, rgba(245,63,148,.16), transparent 60%),
    radial-gradient(52vw 50vw at 98% -4%, rgba(105,128,240,.15), transparent 58%),
    radial-gradient(46vw 46vw at 104% 46%, rgba(245,63,148,.10), transparent 60%),
    radial-gradient(46vw 46vw at -4% 56%, rgba(105,128,240,.11), transparent 60%),
    radial-gradient(56vw 48vw at 62% 106%, rgba(245,63,148,.11), transparent 62%),
    linear-gradient(170deg,#F8F4FC,#EFEFF9 60%,#F4F0FB);
  background-attachment:fixed;
}
body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── nav (как на главной: прозрачная, в общей сетке 1080) ── */
.q-nav{ display:flex; align-items:center; justify-content:space-between;
  max-width:1080px; margin:0 auto; padding:18px 20px 8px; position:relative; z-index:2; }
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.brand-hearts{ width:40px; height:35px; display:block; flex:0 0 auto; overflow:visible; }
.brand-word{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:27px; line-height:1; color:#2c2a33; letter-spacing:-.01em; }
.back-link{ font-size:14px; font-weight:700; color:var(--ink-mute); text-decoration:none; padding:6px 4px; }
.back-link:hover{ color:var(--ink); }

/* ── layout (ширина = сайту, 1080; шапка и контент выровнены по краям) ── */
.test-wrap, .form-wrap{ max-width:1080px; margin:0 auto; padding:8px 20px 120px; position:relative; z-index:1; }
.load-wrap{ max-width:1080px; margin:0 auto; padding:8px 20px 80px; position:relative; z-index:1; }

/* ── прогресс + заголовок вопроса ── */
.prog{ margin:6px 0 18px; }
.segs{ display:flex; gap:5px; }
.seg{ flex:1; height:6px; border-radius:999px; background:rgba(37,31,51,.1); transition:background .3s; }
.seg.done{ background:var(--g-peri); }
.seg.cur{ background:var(--g-pink); }
.lab{ margin-top:9px; font-size:12.5px; font-weight:700; color:var(--ink-mute); }
.lab b{ color:var(--pink-deep); }
.q-head{ margin:4px 0 20px; }
.q-title{ font-family:var(--fd); text-transform:uppercase; font-size:clamp(23px,5.6vw,32px); line-height:1.08; color:var(--ink); }
.q-sub{ margin-top:9px; font-size:14px; line-height:1.5; color:var(--ink-mute); font-weight:600; }

/* ── text ── */
.pp-textarea{ width:100%; min-height:120px; resize:none; border-radius:18px; border:1.5px solid var(--line);
  background:rgba(255,255,255,.85); padding:15px 16px; font-family:var(--fb); font-size:15px; line-height:1.5; color:var(--ink);
  box-shadow:inset 0 1px 4px rgba(37,31,51,.05); outline:none; transition:border-color .15s; }
.pp-textarea:focus{ border-color:var(--pink); }
.pp-textarea.her:focus{ border-color:var(--pink); } .pp-textarea.him:focus{ border-color:var(--peri); }
.pp-voice{ display:flex; align-items:center; gap:11px; margin-top:11px; }
.pp-voice-btn{ width:44px; height:44px; flex:0 0 auto; border-radius:50%; border:none; cursor:pointer;
  background:var(--g-peri); display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 7px 12px rgba(77,99,216,.5)); transition:transform .12s; }
.pp-voice-btn.her{ background:var(--g-pink); filter:drop-shadow(0 7px 12px rgba(216,31,119,.5)); }
.pp-voice-btn:active{ transform:scale(.94); }
.pp-voice-btn svg{ width:20px; height:20px; fill:#fff; }
.pp-voice-btn.rec{ animation:pulseRec 1s infinite; }
@keyframes pulseRec{ 0%,100%{ box-shadow:0 0 0 0 rgba(245,63,148,.4);} 50%{ box-shadow:0 0 0 10px rgba(245,63,148,0);} }
.pp-voice-note{ font-size:12.5px; font-weight:600; color:var(--ink-mute); line-height:1.3; }

/* ── chips ── */
.pp-chips{ display:flex; flex-direction:column; gap:9px; }
.pp-chip{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  background:rgba(255,255,255,.82); border:1.5px solid var(--line); border-radius:16px; padding:12px 14px;
  font-family:var(--fb); font-size:14px; font-weight:600; color:var(--ink); filter:drop-shadow(0 6px 12px rgba(70,40,120,.16)); transition:.14s; position:relative; }
.pp-chip img{ width:30px; height:30px; flex:0 0 auto; }
.pp-chip .txt{ flex:1; line-height:1.3; }
.pp-chip .tick{ width:22px; height:22px; flex:0 0 auto; border-radius:50%; border:2px solid rgba(37,31,51,.16); display:flex; align-items:center; justify-content:center; }
.pp-chip .tick svg{ width:13px; height:13px; fill:none; stroke:#fff; stroke-width:2.6; opacity:0; }
.pp-chip.sel{ border-color:transparent; background:linear-gradient(135deg,rgba(245,63,148,.1),rgba(105,128,240,.08)); }
.pp-chip.her-side.sel{ filter:drop-shadow(0 9px 15px rgba(216,31,119,.32)); }
.pp-chip.him-side.sel{ filter:drop-shadow(0 9px 15px rgba(77,99,216,.32)); }
.pp-chip.her-side.sel .tick{ background:var(--g-pink); border-color:transparent; }
.pp-chip.him-side.sel .tick{ background:var(--g-peri); border-color:transparent; }
.pp-chip.sel .tick svg{ opacity:1; }

/* ── дуэль (десктоп, per-side) ── */
.duel{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:start; }
.duel-panel{ background:var(--glass); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.7); border-radius:var(--r); padding:20px 16px; box-shadow:var(--sh-soft); }
.duel-panel.her{ border-top:3px solid var(--pink); } .duel-panel.him{ border-top:3px solid var(--peri); }
.duel-crown{ text-align:center; margin-bottom:14px; }
.pp-avatar{ width:64px; height:64px; margin:0 auto 8px; border-radius:50%; overflow:hidden; border:3px solid #fff; filter:drop-shadow(0 8px 16px rgba(70,40,120,.22)); }
.pp-avatar img{ width:100%; height:100%; object-fit:cover; }
.pp-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:999px; color:#fff; font-weight:800; font-size:13px; }
.pp-pill.her{ background:var(--g-pink); } .pp-pill.him{ background:var(--g-peri); }
.pp-pill .k{ width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,.28); font-size:10px; display:inline-flex; align-items:center; justify-content:center; }
.duel-medallion{ align-self:center; width:46px; height:46px; border-radius:50%; background:#fff; box-shadow:var(--sh-soft); display:flex; align-items:center; justify-content:center; margin-top:60px; }
.duel-medallion img{ width:26px; height:26px; }

/* ── флип (мобайл, передача телефона) ── */
.flip-hold{ perspective:1400px; }
.flip-scene{ position:relative; }
.flip-card{ position:relative; transform-style:preserve-3d; transition:transform .62s cubic-bezier(.4,.15,.2,1); }
.flip-card.flipped{ transform:rotateY(180deg); }
.flip-face{ backface-visibility:hidden; -webkit-backface-visibility:hidden; background:var(--glass); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--r); padding:22px 18px; box-shadow:var(--sh-soft); }
.flip-face.back{ position:absolute; inset:0; transform:rotateY(180deg); }
.flip-top{ text-align:center; margin-bottom:16px; }
.flip-panel{ margin-bottom:14px; }
.step-ind{ text-align:center; font-size:12px; font-weight:700; color:var(--ink-mute); margin:2px 0 12px; }
.flip-hint{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:12px; font-size:12.5px; font-weight:700; color:var(--peri-deep); }
.flip-hint svg{ width:17px; height:17px; fill:none; stroke:var(--peri-deep); stroke-width:2; }
.flip-hint.rot{ color:var(--ink-mute); } .flip-hint.rot svg{ stroke:var(--ink-mute); }

/* ── общий список (шкала / баттл / дилеммы / норм / угадай) ── */
.shared-list{ display:flex; flex-direction:column; gap:12px; }
.shared-card{ background:var(--glass); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.7); border-radius:20px; padding:16px 16px 14px; box-shadow:var(--sh-soft); }
.idx{ width:26px; height:26px; min-width:26px; border-radius:50%; background:var(--g-peri); color:#fff; font-family:var(--fd); font-size:14px; display:inline-flex; align-items:center; justify-content:center; filter:drop-shadow(0 4px 8px rgba(77,99,216,.45)); }
.dil-head{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; margin:6px 0 14px; }
.dil-side{ font-weight:800; font-size:14px; line-height:1.25; }
.dil-side.left{ text-align:left; color:var(--pink-deep); } .dil-side.right{ text-align:right; color:var(--peri-deep); }
.dil-or{ font-family:var(--fd); color:var(--ink-mute); font-size:13px; }
.scl-head{ display:flex; gap:10px; align-items:flex-start; font-weight:700; font-size:14.5px; line-height:1.3; margin-bottom:6px; }
/* якоря/полюса: мельче и КАПСОМ — чтобы не путались со строчными подписями Она/Он; выровнены над точками */
.scl-anchors{ display:flex; justify-content:space-between; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-mute); margin:0 0 8px; padding:0 6px 0 44px; }
.scl-anchors .her{ color:var(--pink); } .scl-anchors .him{ color:var(--peri); }
.scale-line{ display:flex; align-items:center; gap:8px; margin:9px 0; }
.scale-who{ width:34px; min-width:34px; font-size:12px; font-weight:800; }
.scale-who.her{ color:var(--pink); } .scale-who.him{ color:var(--peri); }
/* дорожка с тёплой линией-треком за точками — читается как шкала, не как холодные радио */
.scale-dots{ position:relative; display:flex; justify-content:space-between; flex:1; align-items:center; }
.scale-dots::before{ content:""; position:absolute; left:11px; right:11px; top:50%; height:3px; transform:translateY(-50%); border-radius:3px; background:linear-gradient(90deg,rgba(245,63,148,.22),rgba(105,128,240,.22)); z-index:0; }
.sdot{ position:relative; z-index:1; -webkit-appearance:none; appearance:none; padding:0; outline:none; width:22px; height:22px; border-radius:50%; border:2px solid rgba(120,110,175,.32); background:#fff; cursor:pointer; transition:all .12s; }
.sdot:active{ transform:scale(.9); }
.sdot:focus{ outline:none; }
.sdot:focus-visible{ box-shadow:0 0 0 3px rgba(105,128,240,.35); }
/* тень через filter:drop-shadow (не box-shadow!) — иначе Chrome рисует квадрат внутри backdrop-filter-карточки */
.sdot.on-her{ background:var(--g-pink); border-color:transparent; filter:drop-shadow(0 3px 5px rgba(245,63,148,.45)); }
.sdot.on-him{ background:var(--g-peri); border-color:transparent; filter:drop-shadow(0 3px 5px rgba(105,128,240,.45)); }
/* 7-точечная (дилеммы/баттл): средняя (4-я) чуть меньше как нейтраль (мягко, не как дефект) */
.scale-dots:has(.sdot:nth-child(7)) .sdot:nth-child(4){ width:18px; height:18px; }
/* 5-точечная (шкала/угадай): средняя (3-я) чуть меньше */
.scale-dots:not(:has(.sdot:nth-child(6))) .sdot:nth-child(3){ width:18px; height:18px; }
.norm-head{ display:flex; gap:10px; align-items:flex-start; font-weight:700; font-size:14.5px; line-height:1.3; margin-bottom:10px; }
.norm-line{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.norm-who{ min-width:88px; width:88px; font-size:11.5px; font-weight:800; line-height:1.15; }
.norm-who.her{ color:var(--pink); } .norm-who.him{ color:var(--peri); }
.norm-btn{ -webkit-appearance:none; appearance:none; outline:none; flex:1; padding:9px 0; border-radius:999px; border:1.6px solid rgba(37,31,51,.12); font-family:var(--fb); font-weight:800; font-size:13.5px; background:#fff; cursor:pointer; transition:.12s; }
.norm-btn:active{ transform:scale(.97); }
.norm-btn.norm.on{ background:var(--green); border-color:transparent; color:#fff; filter:drop-shadow(0 5px 10px rgba(87,185,58,.4)); }
.norm-btn.strem.on{ background:var(--red); border-color:transparent; color:#fff; filter:drop-shadow(0 5px 10px rgba(229,51,79,.4)); }
/* «угадай»: выбор красим по стороне (её/его), а не по норм/стрём — чтобы «Стрём» не был зелёным */
.norm-btn.gp.her.on{ background:var(--g-pink); border-color:transparent; color:#fff; filter:drop-shadow(0 5px 10px rgba(245,63,148,.4)); }
.norm-btn.gp.him.on{ background:var(--g-peri); border-color:transparent; color:#fff; filter:drop-shadow(0 5px 10px rgba(105,128,240,.4)); }
.guess-line{ align-items:center; }
.guess-ctrl{ display:flex; gap:8px; flex:1; align-items:center; }
.guess-ctrl .scale-dots{ flex:1; }

/* ── низ: кнопка «Далее» ── */
.pp-foot{ position:sticky; bottom:0; z-index:20; padding:16px 0 18px; margin-top:20px;
  background:linear-gradient(180deg,rgba(244,240,251,0) 0%,#F4F0FB 42%); }
.pp-cta{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:16px 24px; border:none; cursor:pointer;
  border-radius:999px; font-family:var(--fb); font-weight:800; font-size:16px; color:#fff; box-shadow:0 20px 40px -14px rgba(216,31,119,.6); transition:.14s; }
.pp-cta.peri{ background:var(--g-peri); box-shadow:0 20px 40px -14px rgba(77,99,216,.6); }
.pp-cta.pink{ background:var(--g-pink); }
.pp-cta svg{ fill:none; stroke:#fff; stroke-width:2.4; }
.pp-cta:active{ transform:scale(.98); }
.pp-cta:disabled{ background:linear-gradient(135deg,#dcd6ee,#cec6e6); color:#8b84a8; box-shadow:none; cursor:default; opacity:1; }
.pp-cta:disabled svg{ stroke:#8b84a8; }

@media(min-width:880px){
  /* форма: карточки Она/Он рядом, поля пары в ряд, кнопка по центру */
  .f-duo{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; margin-bottom:18px; }
  .f-duo .f-card{ margin-bottom:0; }
  .f-wide{ display:grid; grid-template-columns:1fr 1fr; column-gap:20px; }
  .f-wide .f-field{ margin-bottom:0; }
  .f-actions{ text-align:center; margin-top:20px; }
  .f-actions .pp-cta{ max-width:460px; margin:0 auto; }
  .f-actions .f-note{ max-width:560px; margin-left:auto; margin-right:auto; }
  /* тест: общий список в 2 колонки, ровная высота ряда (низы совпадают) */
  .shared-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
  /* контент выровнен по верху (прогресс+заголовок сразу под шапкой), низ — с запасом */
  .test-wrap{ padding-top:4px; padding-bottom:56px; }
  /* заголовок вопроса крупнее — под масштаб заголовков главной, шире по строке */
  .q-title{ font-size:clamp(32px,3.4vw,44px); }
  .q-head{ margin:8px 0 26px; }
  .q-sub{ font-size:15px; }
  /* на десктопе «Далее» СТАТИЧНА (не липкая — не наезжает на карточки), по центру */
  .pp-foot{ position:static; background:none; margin-top:28px; padding:0 0 4px; display:flex; justify-content:center; }
  .pp-foot .pp-cta{ max-width:520px; }
  /* дуэль текст/чипсы — панели пошире, медальон по центру */
  .duel{ gap:22px; }
}
@media(max-width:520px){
  .q-title{ font-size:24px; }
  .norm-who{ min-width:78px; width:78px; }
}

/* ── форма старта ── */
.form-hero{ text-align:center; padding:24px 0 30px; }
.couple-mini{ display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:16px; }
.couple-mini img{ width:60px; height:60px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:var(--sh-soft); }
.couple-mini .amp{ font-family:var(--fd); font-size:22px; color:var(--pink); }
.form-hero .q-title{ font-size:clamp(28px,7.4vw,42px); }
.form-hero .q-sub{ max-width:420px; margin:12px auto 0; }
.f-card{ background:var(--glass); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.7); border-radius:var(--r); padding:24px 24px 22px; box-shadow:var(--sh-soft); margin-bottom:18px; }
.f-card.her{ border-top:3px solid var(--pink); } .f-card.him{ border-top:3px solid var(--peri); }
.f-tag{ display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:13px; padding:4px 14px; border-radius:999px; color:#fff; margin-bottom:12px; }
.f-tag.her{ background:var(--g-pink); } .f-tag.him{ background:var(--g-peri); }
.f-field{ margin-bottom:12px; } .f-field:last-child{ margin-bottom:0; }
.f-field label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-mute); margin-bottom:6px; }
.f-field input{ width:100%; border-radius:14px; border:1.5px solid var(--line); background:rgba(255,255,255,.9); padding:13px 15px; font-family:var(--fb); font-size:15px; color:var(--ink); outline:none; transition:border-color .15s; }
.f-field input:focus{ border-color:var(--pink); }
/* селекты дат (свой шеврон — нативная стрелка убрана) */
.f-date{ display:flex; gap:8px; }
.f-date.f-rel .f-select.m{ flex:1.4; } .f-date.f-rel .f-select.y{ flex:1; }
.f-date .f-select.d{ flex:0 0 96px; } .f-date .f-select.m{ flex:1; } .f-date .f-select.y{ flex:0 0 104px; }
.f-select{ width:100%; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:14px; border:1.5px solid var(--line);
  background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237b7590' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center;
  padding:13px 38px 13px 15px; font-family:var(--fb); font-size:15px; color:var(--ink); outline:none; cursor:pointer; transition:border-color .15s; }
.f-select:focus{ border-color:var(--pink); }
.f-select.placeholder{ color:var(--ink-mute); }
.f-select.bad{ border-color:var(--red); }
.f-err{ font-size:12px; color:var(--red); font-weight:700; margin-top:7px; }
.f-note{ font-size:12px; color:var(--ink-mute); text-align:center; margin-top:14px; line-height:1.5; }
.f-note a{ color:var(--pink-deep); font-weight:700; }
/* узкие экраны: месяцу больше места (день/год компактнее) — стоит ПОСЛЕ базовых .f-date */
@media(max-width:520px){
  .f-date{ gap:6px; }
  .f-date .f-select.d{ flex:0 0 64px; } .f-date .f-select.y{ flex:0 0 80px; }
  .f-select{ padding:13px 26px 13px 12px; font-size:14px; background-position:right 9px center; }
}

/* ── загрузка ── */
.load-wrap{ text-align:center; padding-top:18px; }
.load-ring{ position:relative; width:150px; height:150px; margin:10px auto 22px; }
.load-ring svg{ transform:rotate(-90deg); }
.load-ring .pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:36px; background:var(--g-pink); -webkit-background-clip:text; background-clip:text; color:transparent; }
.load-title{ font-family:var(--fd); text-transform:uppercase; font-size:22px; line-height:1.1; margin-bottom:6px; }
.load-lead{ font-size:14px; color:var(--ink-mute); font-weight:600; margin-bottom:20px; }
.feed{ text-align:left; max-width:360px; margin:0 auto; min-height:280px; }
.feed-msg{ background:var(--glass); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.7); border-radius:16px 16px 16px 4px; box-shadow:var(--sh-soft); padding:12px 15px; font-size:14px; font-weight:600; margin-bottom:10px; display:flex; gap:9px; align-items:flex-start; opacity:0; transform:translateY(8px); transition:all .3s; color:var(--ink-soft); }
.feed-msg.in{ opacity:1; transform:none; }
.feed-msg img{ width:24px; height:24px; margin-top:1px; }
.load-eta{ margin-top:14px; font-size:13px; color:var(--ink-mute); }
.word{ opacity:0; } .word.in{ opacity:1; transition:opacity .18s; }