/* «Громко» — анкета «под ключ». Язык лендинга (landing.css): тёплая бумага, Prata в заголовках, Golos в тексте,
   оливковый акцент, кнопки-пилюли. Мобильный первый: 320 px без горизонтальной прокрутки, цели от 44 px. */

@font-face { font-family: "Prata Fallback"; src: local("Georgia"); size-adjust: 109.7%; ascent-override: 90%; descent-override: 33%; line-gap-override: 0%; }
@font-face { font-family: "Golos Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 103.5%; ascent-override: 95%; descent-override: 21%; line-gap-override: 0%; }

:root {
  --bg: #F7F5F0;
  --bg-2: #EFEBE3;
  --paper: #FBFAF7;
  --ink: #161616;
  --soft: #66625B;
  --mute: #8A857C;
  --line: rgba(22, 22, 22, .12);
  --line-2: rgba(22, 22, 22, .2);
  --accent: #3E4630;
  --accent-ink: #2C3222;
  --accent-bg: #EEF0E8;
  --err: #A33A2B;
  --on-dark: #F4F0E6;
  --serif: "Prata", "Prata Fallback", "Times New Roman", serif;
  --sans: "Golos Text", "Golos Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --num: "Lora", "Prata", serif;
  --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --col: 600px;
  --nav: 76px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
@media (min-width: 400px) { :root { --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; scroll-padding-bottom: calc(var(--nav) + 16px); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--bg); color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; overflow-x: clip;
}
h1, h2, h3, p, ol, ul, pre, fieldset, figure, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--on-dark); }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
.center { text-align: center; }

/* ---------- шапка и прогресс ---------- */
.top { position: sticky; top: 0; z-index: 30; background: rgba(247, 245, 240, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.top__in { display: flex; align-items: center; gap: 12px; max-width: calc(var(--col) + var(--gutter) * 2); margin: 0 auto; padding: calc(6px + env(safe-area-inset-top)) var(--gutter) 6px; min-height: 52px; }
.top__brand { font: 400 20px/1 var(--serif); letter-spacing: -.01em; flex: none; }
.top__step { flex: 1; min-width: 0; font-size: 13px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 389px) { .top__t { display: none; } }
.top__restart { flex: none; min-height: 40px; padding: 0 2px; font-size: 13px; color: var(--soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.top__restart:hover { color: var(--ink); }
.bar { height: 2px; background: var(--line); }
.bar i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s var(--ease); }

/* ---------- шаг ---------- */
.main { max-width: calc(var(--col) + var(--gutter) * 2); margin: 0 auto; padding: 24px var(--gutter) calc(var(--nav) + 40px + env(safe-area-inset-bottom)); outline: none; }
body[data-step="0"] .main { padding-bottom: 48px; }
.stp { display: grid; gap: 20px; }
.stp__hd { display: grid; gap: 10px; margin-bottom: 4px; }
.label { font: 500 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.h { font: 400 clamp(30px, 8.6vw, 46px)/1.06 var(--serif); letter-spacing: -.02em; text-wrap: balance; outline: none; overflow-wrap: anywhere; }
.lead { color: var(--soft); font-size: 16px; line-height: 1.55; max-width: 46ch; text-wrap: pretty; }
.fine { font-size: 13px; color: var(--soft); text-align: center; }
.ticks { display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 28px; line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px; border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg); }
.cta { display: grid; gap: 12px; margin-top: 8px; }

.sec { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.sec--tight { padding-top: 0; border-top: 0; gap: 10px; }
.sec__h { font: 400 22px/1.2 var(--serif); letter-spacing: -.01em; }
.sub { display: grid; gap: 14px; padding: 14px; border-radius: 16px; background: var(--bg-2); }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font: 500 15px/1.2 var(--sans); letter-spacing: .005em; text-decoration: none; text-align: center;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  cursor: pointer;
}
.btn:active { transform: scale(.98); }
.btn--ink { background: var(--accent); color: var(--on-dark); }
.btn--ink:hover { background: var(--accent-ink); }
.btn--line { border: 1px solid var(--line-2); color: var(--ink); background: transparent; }
.btn--line:hover { border-color: var(--ink); }
.btn--block { width: 100%; }
.add { justify-self: start; min-height: 44px; color: var(--accent); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; }
.chip:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.chip.is-hint { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); font-weight: 500; }

/* ---------- поля ---------- */
.f { display: grid; gap: 6px; min-width: 0; }
.f__l { font-size: 14px; font-weight: 500; color: var(--ink); }
.f__req { color: var(--err); }
.f__opt { font-weight: 400; color: var(--mute); }
.f__h { font-size: 13px; line-height: 1.45; color: var(--soft); }
.f__err { font-size: 13px; line-height: 1.4; color: var(--err); }
.f__err:empty { display: none; }
.f__cnt { justify-self: end; font-size: 12px; color: var(--mute); min-height: 0; }
.f__cnt:empty { display: none; }
.f__wd { font-size: 14px; color: var(--soft); min-height: 1.4em; }
.inp {
  display: block; width: 100%; min-width: 0; min-height: 52px; padding: 13px 14px;
  border-radius: 14px; border: 1px solid var(--line-2); background: var(--paper);
  font-size: 16px; line-height: 1.45; /* 16 px — iOS не увеличивает страницу при фокусе */
  outline: none; transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
textarea.inp { resize: vertical; min-height: 96px; }
.inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(62, 70, 48, .14); }
.inp[aria-invalid="true"] { border-color: var(--err); box-shadow: 0 0 0 3px rgba(163, 58, 43, .12); }
.inp::placeholder { color: #A29D94; }
.inp--date { max-width: 260px; }
input[type="time"].inp, input[type="date"].inp { min-height: 52px; }
input[type="date"].inp::-webkit-date-and-time-value, input[type="time"].inp::-webkit-date-and-time-value { text-align: left; }
.f--time { flex: 0 0 116px; }
.f--grow { flex: 1 1 140px; }
.f--sub { margin-top: -8px; }

.pair { display: flex; align-items: flex-start; gap: 10px; }
.pair .f { flex: 1; }
.pair__amp { margin-top: 28px; font: 400 26px/52px var(--serif); color: var(--soft); flex: none; }
@media (max-width: 359px) { .pair { flex-direction: column; align-items: stretch; gap: 14px; } .pair__amp { display: none; } }

/* выбор одного — карточки на настоящих радиокнопках */
.fs { display: grid; gap: 10px; }
.opts { display: grid; gap: 8px; }
.opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt { position: relative; display: block; cursor: pointer; }
.opt__in, .tc .opt__in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.opt__b { display: grid; gap: 4px; height: 100%; min-height: 52px; align-content: center; padding: 12px 14px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); transition: border-color .2s, background-color .2s; }
.opts--3 .opt__b { padding: 10px 8px; text-align: center; justify-items: center; }
.opt__t { font-weight: 500; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
.opts--3 .opt__t { font-size: 14px; }
.opt__s { font-size: 13px; line-height: 1.45; color: var(--soft); font-family: var(--serif); }
.opt:hover .opt__b { border-color: var(--line-2); }
.opt__in:checked + .opt__b { border-color: var(--accent); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); }
.opt__in:focus-visible + .opt__b { outline: 2px solid var(--accent); outline-offset: 2px; }

/* флажки и переключатели */
.checks { display: grid; gap: 4px; }
.chk { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; cursor: pointer; }
.chk__in { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.chk__b { display: grid; gap: 2px; min-width: 0; }
.chk__t { font-size: 15px; line-height: 1.4; }
.chk__s { font-size: 13px; line-height: 1.45; color: var(--soft); }
.chk--sw { justify-content: space-between; flex-direction: row-reverse; border-bottom: 1px solid var(--line); padding: 12px 0; }
.chk--sw:last-child { border-bottom: 0; }
.chk--sw .chk__in {
  -webkit-appearance: none; appearance: none; width: 44px; height: 26px; border-radius: 26px; margin: 0;
  background: var(--line-2); position: relative; transition: background-color .2s;
}
.chk--sw .chk__in::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .2s var(--ease); }
.chk--sw .chk__in:checked { background: var(--accent); }
.chk--sw .chk__in:checked::after { transform: translateX(18px); }
.chk--sw .chk__in:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- шаг 3: точки дня ---------- */
.stops { display: grid; gap: 12px; counter-reset: stop; }
.stop { display: grid; gap: 12px; padding: 14px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.stop__top { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 -6px; }
.stop__n { font: 500 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.stop__rm { min-height: 40px; padding: 0 4px; font-size: 13px; color: var(--soft); text-decoration: underline; text-underline-offset: 3px; justify-self: end; }
.stop__rm:hover { color: var(--err); }
.stop__row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- шаг 4: темы ---------- */
.tray {
  --cw: min(58vw, 216px); --s: .5;
  display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 14px; scroll-padding: 0 var(--gutter);
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.tc-w { flex: none; width: var(--cw); display: grid; gap: 6px; scroll-snap-align: center; align-content: start; }
.tc { position: relative; display: grid; gap: 10px; cursor: pointer; }
.tc__screen { position: relative; display: block; width: 100%; aspect-ratio: 390 / 760; border-radius: 18px; overflow: hidden; background: var(--bg-2); box-shadow: 0 0 0 1px var(--line), 0 10px 26px -12px rgba(22, 22, 22, .3); transition: box-shadow .25s, transform .25s var(--ease); }
.tc:hover .tc__screen { transform: translateY(-2px); }
.tc .opt__in:checked ~ .tc__screen { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 12px 28px -12px rgba(22, 22, 22, .35); }
.tc .opt__in:focus-visible ~ .tc__screen { outline: 2px solid var(--accent); outline-offset: 6px; }
.tc__poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px; text-align: center; }
.tc__k { font-size: 8px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.tc__names { font-size: 22px; line-height: 1.1; overflow-wrap: anywhere; }
.tc__names.is-caps { text-transform: uppercase; font-size: 16px; letter-spacing: .08em; }
.tc__d { font: 400 12px/1 var(--num); opacity: .75; }
.tc__live { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; pointer-events: none; }
.tc__live.is-ld { opacity: 1; }
.tc__frame { position: absolute; top: 0; left: 0; width: 390px; height: 760px; border: 0; transform: scale(var(--s)); transform-origin: 0 0; pointer-events: none; background: #fff; }
.tc__meta { display: grid; gap: 2px; line-height: 1.3; }
.tc__meta b { font: 400 18px/1.2 var(--serif); }
.tc__meta span { font-size: 13px; color: var(--soft); }
.tc .opt__in:checked ~ .tc__meta b::after { content: " ✓"; color: var(--accent); font-family: var(--sans); font-size: 15px; }
.tc__open { justify-self: start; font-size: 13px; color: var(--soft); text-underline-offset: 3px; min-height: 32px; display: inline-flex; align-items: center; }
.tc__screen--auto { display: grid; place-content: center; gap: 10px; padding: 18px; text-align: center; background: var(--paper); border: 1px dashed var(--line-2); box-shadow: none; }
.tc__auto-h { font: 400 24px/1.15 var(--serif); }
.tc__auto-p { font-size: 14px; color: var(--soft); line-height: 1.45; }

/* ---------- шаг 6: палитра ---------- */
.sws { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; }
.sw__c { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); flex: none; }
.sw[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-bg); font-weight: 500; }
.sw[aria-pressed="true"] .sw__c { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 2px var(--paper), 0 0 0 3.5px var(--accent); }

/* ---------- шаг 7 ---------- */
.cqs { display: grid; gap: 14px; }
.cqs .stop__rm { margin-top: -4px; }

/* ---------- шаг 8: гости ---------- */
.ex { padding: 8px 12px; border-left: 2px solid var(--accent); font: 400 14px/1.6 var(--sans); color: var(--soft); white-space: pre-wrap; }
.gl { display: grid; gap: 10px; }
.gl:empty { display: none; }
.gl__sum { font-weight: 500; }
.gl__list { display: grid; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.gl__i { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 14px; }
.gl__i:first-child { border-top: 0; }
.gl__g { min-width: 0; overflow-wrap: anywhere; }
.gl__n { flex: none; color: var(--soft); font-size: 13px; }
.gl__i.is-low .gl__g::after { content: " · проверим"; color: #9A6A12; font-size: 12px; }

/* ---------- шаг 9: фото ---------- */
.ph { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ph:empty { display: none; }
.ph__i { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.ph__i img { width: 100%; height: 100%; object-fit: cover; }
.ph__i[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.ph__tag { position: absolute; left: 6px; bottom: 6px; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: var(--on-dark); font-size: 11px; font-weight: 500; }
.vh:focus-visible + .btn { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- шаг 10: проверка и отправка ---------- */
.rv { display: grid; gap: 0; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.rv__s { padding: 14px 16px; border-top: 1px solid var(--line); }
.rv__s:first-child { border-top: 0; }
.rv__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rv__t { font: 500 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.rv__ed { min-height: 40px; padding: 0 2px; font-size: 14px; color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rv__p { margin-top: 2px; white-space: pre-line; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5; }
.cons .chk__t { font-size: 14px; }
.doc { border-radius: 14px; background: var(--bg-2); }
.doc summary { min-height: 44px; display: flex; align-items: center; padding: 0 14px; font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; }
.doc summary::-webkit-details-marker { display: none; }
.doc summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.doc[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.doc__b { display: grid; gap: 8px; padding: 0 14px 14px; font-size: 13px; line-height: 1.5; color: var(--soft); }
.doc__b a { color: var(--ink); text-underline-offset: 3px; }
.msg { margin: 0 14px 14px; padding: 12px; max-height: 360px; overflow: auto; border-radius: 10px; background: var(--paper); font: 400 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.chans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chan {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  min-height: 58px; padding: 0 16px; border-radius: 16px;
  background: var(--paper); border: 1px solid var(--line);
  text-decoration: none; font: 500 16px/1.1 var(--sans);
  transition: border-color .3s, background-color .3s;
}
.chan svg { width: 24px; height: 24px; flex: none; color: var(--accent); }
.chan span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan:hover { border-color: var(--ink); }
.chan.is-done { border-color: var(--accent); background: var(--accent-bg); }
.chan--main { grid-column: 1 / -1; background: var(--accent); color: var(--on-dark); border-color: var(--accent); justify-content: center; }
.chan--main svg { color: var(--on-dark); }
.chan--wide { grid-column: 1 / -1; justify-content: center; }
.chan--main:hover { background: var(--accent-ink); }
.after__sup { margin-top: 2px; }
.after__l a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 359px) { .chan { padding: 0 10px; gap: 8px; font-size: 15px; } }
.send__note { font-size: 14px; line-height: 1.45; color: var(--soft); min-height: 0; }
.send__note:empty { display: none; }
.send__note.is-ok { color: var(--accent); font-weight: 500; }
.long { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: #FFF4DE; border: 1px solid rgba(154, 106, 18, .25); }
.long__t { font-size: 14px; line-height: 1.45; }
.long__l { display: grid; gap: 8px; }
.long__b { justify-content: flex-start; min-height: 48px; padding: 0 18px; background: var(--paper); white-space: normal; text-align: left; }
.long__b.is-done { border-color: var(--accent); background: var(--accent-bg); }
.after { display: grid; gap: 10px; margin-top: 6px; padding: 16px; border-radius: 18px; background: var(--bg-2); }
.after__h { font: 400 20px/1.2 var(--serif); }
.after__l { display: grid; gap: 8px; counter-reset: a; }
.after__l li { position: relative; padding-left: 28px; font-size: 14px; line-height: 1.5; counter-increment: a; }
.after__l li::before { content: counter(a); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); font: 500 12px/20px var(--num); text-align: center; color: var(--accent); }

/* ---------- нижняя панель ---------- */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(247, 245, 240, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.nav__in { display: flex; gap: 10px; max-width: calc(var(--col) + var(--gutter) * 2); margin: 0 auto; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); }
.nav__back { flex: none; padding: 0 20px; }
.nav__next { flex: 1; }
@media (max-width: 359px) { .nav__back { padding: 0 16px; } .btn { padding: 0 18px; } }

/* ---------- диалог и уведомление ---------- */
.dlg { border: 0; padding: 0; width: min(420px, calc(100vw - 32px)); border-radius: 22px; background: var(--bg); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .4); }
.dlg::backdrop { background: rgba(14, 12, 10, .45); }
.dlg__in { display: grid; gap: 12px; padding: 24px 20px 20px; }
.dlg__h { font: 400 26px/1.1 var(--serif); }
.dlg__p { color: var(--soft); font-size: 15px; }
.dlg__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dlg__acts .btn { flex: 1 1 auto; padding: 0 18px; }
.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav) + 16px + env(safe-area-inset-bottom)); z-index: 60;
  max-width: calc(100vw - 32px); width: max-content; padding: 12px 18px; border-radius: 18px;
  background: var(--ink); color: var(--on-dark); font: 500 14px/1.35 var(--sans); text-align: center;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 760px) {
  .main { padding-top: 48px; }
  .stp { gap: 24px; }
  .tray { --cw: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- ревью №2: тост с «Вернуть», «Назад» на шаге проверки, цена на приветствии ---------- */
.toast { display: flex; align-items: center; gap: 12px; }
.toast.is-on { pointer-events: auto; }
.toast__act { min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: #E6D3A3; font: 600 14px/1 var(--sans); cursor: pointer; white-space: nowrap; }
.back-link { justify-self: start; min-height: 40px; padding: 0; border: 0; background: none; color: var(--soft); font: 500 15px/1 var(--sans); cursor: pointer; }
.back-link:hover { color: var(--ink); }
.fine--price { color: var(--ink); }
body[data-step="10"] .main { padding-bottom: 32px; }
.inp:disabled { opacity: .5; }

/* ---------- ревью №3 ---------- */
/* «Свой цвет» дресс-кода — словами, оттенок подберём */
.own { display: flex; gap: 8px; margin-top: 10px; }
.own .inp { flex: 1; min-width: 0; }
.own__b { flex: none; min-height: 44px; padding: 0 14px; white-space: nowrap; }
.sw__c--own { background: repeating-linear-gradient(135deg, var(--line-2) 0 3px, transparent 3px 7px); }
/* подсказка про особые данные у своего вопроса */
.f__warn { color: var(--err, #a33); }
.f__warn .link { color: inherit; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; padding: 6px 0; margin: -6px 0; display: inline-block; }