/* Хром конструктора — гостевой странице не нужен. Сгенерировано scripts/split-app-styles.mjs из AppStyles.tsx; дальше правится руками. */
.back-to-templates { width: 100%; min-height: 38px; margin-bottom: 12px; border: 0; border-radius: 999px; background: #fffaf3; color: #725a42; cursor: pointer; }
.mvp-shell { min-height: 100vh; display: grid; grid-template-columns: 390px 1fr; background: #f1ece4; color: #2f2a25; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.notice-toast { position: fixed; right: 18px; top: 18px; z-index: 120; max-width: min(420px, calc(100vw - 36px)); display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 18px; background: #2f2a25; color: #fffaf3; box-shadow: 0 18px 46px rgba(0,0,0,.22); font-size: 13px; line-height: 1.4; }
.notice-toast--success { background: #58744e; }
.notice-toast--warning { background: #8a5f16; }
.notice-toast--error { background: #8a4b43; }
.notice-toast button { margin-left: auto; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 18px; line-height: 1; }
/* Карточка «Завершить отправку заказа» — в потоке, первой под шапкой. Тёплая для
   «часть фото не дошла», красная для «заявка не подтверждена», зелёная — успех. */
/* scroll-margin-top: автоскролл (OrderRecoveryCard.tsx:59, scrollIntoView block:"start")
   не должен прятать заголовок карточки под sticky-шапками .sb-editor. Десктоп (карточка
   в .ed-main) — то же значение, что уже несёт .acc (EditorStyles.tsx:190): nav + .ed-hdr
   (шапка + строка якорей #13, EditorStyles.tsx:139-164, целиком sticky top:var(--nav-h)).
   На мобиле (карточка в .canvas-host) стек короче — ниже отдельная медиа-правка. */
.order-recovery-card { margin: 12px 16px 4px; padding: 16px; border-radius: 16px; background: #fff7ea; border: 1px solid #e8d3b0; color: #3d2f16; font-size: 14px; line-height: 1.45; outline: none; scroll-margin-top: calc(var(--nav-h) + 110px); }
.order-recovery-card--not-sent { background: #fdecea; border-color: #f0b8b0; color: #5a1e16; }
.order-recovery-card--success { background: #ecf5ee; border-color: #bcd9c2; color: #1f3b28; }
.order-recovery-card h2 { margin: 0 0 6px; font-size: 16px; line-height: 1.3; }
.order-recovery-card p { margin: 0 0 10px; }
.order-recovery-card .order-recovery-hint { font-size: 12px; opacity: .8; margin: 6px 0 0; }
.order-recovery-rows { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.order-recovery-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.7); }
.order-recovery-row__thumb { display: block; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: #eadfcd; }
.order-recovery-row__label { display: block; font-weight: 600; }
.order-recovery-row__status { display: block; font-size: 12px; opacity: .8; margin-top: 2px; }
.order-recovery-row__status.is-error { color: #8f2f22; opacity: 1; }
.order-recovery-card button, .order-recovery-help button, .order-recovery-card .order-recovery-btn, .order-status-final .order-recovery-btn, .order-recovery-help a { min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid #c9a36a; background: #fff; color: inherit; font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.order-recovery-card .is-primary { background: #40563b; border-color: #40563b; color: #fffaf3; }
.order-recovery-card--not-sent .is-primary { background: #8f2f22; border-color: #8f2f22; }
.order-recovery-card button[disabled], .order-recovery-help button[disabled], .order-recovery-card .order-recovery-btn.is-disabled, .order-status-final .order-recovery-btn.is-disabled { opacity: .6; cursor: default; pointer-events: none; }
.order-recovery-actions, .order-recovery-help__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.order-recovery-help { margin-top: 12px; }
.order-recovery-help summary { cursor: pointer; text-decoration: underline; min-height: 44px; display: flex; align-items: center; }
/* Сам текст сообщения специалисту: выделяется руками, если clipboard отказал (§4.5). */
.order-recovery-help__text { white-space: pre-wrap; word-break: break-word; margin: 8px 0 10px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #e8d3b0; font: inherit; font-size: 13px; user-select: text; }
@media (max-width: 1079px) {
/* Мобильный sticky-стек (карточка в .canvas-host, ≤1079px — тот же порог, что у
   .ed-main/.canvas-host в EditorStyles.tsx:173/310): nav (fixed, var(--nav-h)) +
   .canvas-modebar (sticky top:var(--nav-h), EditorStyles.tsx:313 — padding 8px×2 +
   ряд .canvas-modebar__seg ~38px + border-bottom 1px ≈ 57px) + 12px запаса. */ .order-recovery-card { scroll-margin-top: calc(var(--nav-h) + 69px); } }
@media (max-width: 480px) {
/* Кнопка строки уезжает под подпись только если она есть: у network-строки во время
   авто-ретрая третьего элемента нет, и правило на :last-child роняло бы саму подпись
   во вторую строку сетки, оставляя миниатюру одну. */ .order-recovery-row { grid-template-columns: 44px 1fr; } .order-recovery-row > button:last-child, .order-recovery-row > label:last-child { grid-column: 1 / -1; } }
.order-sending-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(23,35,29,.55); backdrop-filter: blur(2px); }
.order-sending-overlay__card { display: grid; gap: 8px; justify-items: center; text-align: center; max-width: min(360px, calc(100vw - 40px)); padding: 22px 24px; border-radius: 18px; background: #fffaf3; color: #17231d; box-shadow: 0 24px 60px rgba(0,0,0,.32); font-size: 13px; line-height: 1.45; }
.order-sending-overlay__spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(64,86,59,.25); border-top-color: #40563b; animation: order-sending-spin .9s linear infinite; }
@keyframes order-sending-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .order-sending-overlay__spinner { animation-duration: 2.4s; } }
.order-status__shell { max-width: 560px; margin: 0 auto; padding: clamp(28px, 7vw, 56px) 18px 56px; display: grid; gap: 18px; }
.order-status__head { display: grid; gap: 8px; }
.order-status__head h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: clamp(38px, 10vw, 54px); line-height: .95; letter-spacing: -.055em; }
.order-status__ref { margin: 0; display: grid; gap: 3px; }
/* Подпись — «шапкой» лендинга, сам номер обычным регистром: заглавными он нечитаем,
   а его диктуют оператору и ищут глазами. */
.order-status__ref-label { color: #9a6b4f; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.order-status__ref-value { font-size: 14px; overflow-wrap: anywhere; }
.order-status-steps { list-style: none; margin: 0; padding: 24px 24px 22px; border: 1px solid rgba(92,74,58,.12); border-radius: 28px; background: #fffaf3; box-shadow: 0 20px 54px rgba(47,42,37,.09); display: grid; }
.order-status-step { position: relative; display: grid; grid-template-columns: 16px 1fr; gap: 14px; padding: 0 0 18px; }
.order-status-step:last-child { padding-bottom: 0; }
/* Тонкая сплошная линия между точками: пунктир на 2px рябил и спорил с самими точками. */
.order-status-step::before { content: ""; position: absolute; left: 7.5px; top: 21px; bottom: 3px; border-left: 1px solid #e3d7c5; }
.order-status-step:last-child::before { display: none; }
.order-status-step__mark { width: 16px; height: 16px; margin-top: 4px; border-radius: 50%; border: 1.5px solid #ddd0bb; background: #fff; box-sizing: border-box; }
.order-status-step.is-done .order-status-step__mark { background: #40563b; border-color: #40563b; }
/* Текущий шаг — единственное живое место экрана: точка дышит расходящимся кольцом,
   2.4 с на круг. Медленно и тихо: страница статуса — это ожидание, а не уведомление.
   Кольцо рисуется второй тенью поверх постоянной — иначе анимация затирала бы её. */
.order-status-step.is-active .order-status-step__mark { border-color: #40563b; box-shadow: 0 0 0 3px rgba(64,86,59,.14); animation: order-status-pulse 2.4s ease-out infinite; }
@keyframes order-status-pulse {
  0% { box-shadow: 0 0 0 3px rgba(64,86,59,.14), 0 0 0 0 rgba(64,86,59,.24); }
  70% { box-shadow: 0 0 0 3px rgba(64,86,59,.14), 0 0 0 9px rgba(64,86,59,0); }
  100% { box-shadow: 0 0 0 3px rgba(64,86,59,.14), 0 0 0 0 rgba(64,86,59,0); }
}
@media (prefers-reduced-motion: reduce) {
/* Уважаем системную просьбу без движения: кольцо остаётся, пульс выключается. */ .order-status-step.is-active .order-status-step__mark { animation: none; } }
.order-status-step__body { display: grid; gap: 1px; }
/* Жирным — ТОЛЬКО текущий шаг: он и есть ответ на вопрос «что сейчас». Пройденные
   читаются обычным начертанием, будущие — приглушённым цветом, без выцветания
   прозрачностью (она же съедала контраст на светлом фоне). */
.order-status-step__title { font-weight: 400; font-size: 15px; line-height: 1.45; }
.order-status-step.is-active .order-status-step__title { font-weight: 700; }
.order-status-step.is-pending .order-status-step__title { color: #a2968a; }
.order-status-step__note { font-size: 13px; color: #8a7b6e; }
/* Живая область для читалок: дублирует текущий шаг, на экране он и так виден (§5). */
.order-status__live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.order-status-final { display: grid; gap: 10px; padding: 22px; border-radius: 28px; background: #fffaf3; border: 1px solid rgba(92,74,58,.12); box-shadow: 0 20px 54px rgba(47,42,37,.09); color: #2f2a25; }
.order-status-pay { display: grid; gap: 10px; margin: 0 0 18px; padding: 22px; border-radius: 28px; background: #fffaf3; border: 1px solid rgba(92,74,58,.12); box-shadow: 0 20px 54px rgba(47,42,37,.09); color: #2f2a25; }
.order-status-pay h2, .order-status-pay p { margin: 0; }
.order-status-pay h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 24px; line-height: 1.12; letter-spacing: -.04em; }
.order-status-pay p:not(.order-status__error) { font-size: 14.5px; line-height: 1.55; color: #5d5149; }
.order-status-pay__button { min-height: 48px; padding: 12px 16px; border: 0; border-radius: 12px; background: #2f2a25; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.order-status-pay__button:disabled { opacity: .6; cursor: default; }
.order-status-final--published { background: linear-gradient(180deg, #f2f7f1, #eaf2e9); border-color: rgba(64,86,59,.22); }
.order-status-final--failed, .order-status-final--cancelled { background: linear-gradient(180deg, #fdf1ee, #f9e7e2); border-color: rgba(154,77,59,.25); }
.order-status-final h2, .order-status-remote h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 24px; line-height: 1.12; letter-spacing: -.04em; }
.order-status-final p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #5d5149; }
/* Адрес приглашения: его рассылают гостям, поэтому он виден текстом и копируется
   одним касанием, а не спрятан за кнопкой «открыть». */
.order-status-link { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; padding: 8px 8px 8px 14px; border: 1px solid rgba(92,74,58,.16); border-radius: 16px; background: #fff; }
.order-status-link__url { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; color: #2f2a25; overflow-wrap: anywhere; }
.order-status-link__copy { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(92,74,58,.16); border-radius: 12px; background: #fffaf3; color: #5d5149; cursor: pointer; }
.order-status-link__copy:hover { background: #f5eadd; color: #2f2a25; }
.order-status-final__link { display: flex; width: max-content; max-width: 100%; align-items: center; justify-content: center; min-height: 46px; margin: 4px auto 0; padding: 0 22px; border-radius: 999px; background: #2f2a25; color: #fffaf3; font-weight: 500; text-decoration: none; }
.order-status__error { margin: 0; padding: 14px 16px; border-radius: 20px; background: #fffaf3; border: 1px solid rgba(92,74,58,.12); font-size: 13px; line-height: 1.45; }
/* Признак устаревания: данные на экране есть, связи нет. Сдержанно — не блок тревоги. */
.order-status__stale { margin: -4px 0 0; font-size: 12px; line-height: 1.45; color: #7a685b; }
.order-status-progress { padding: 20px 22px; border: 1px solid rgba(92,74,58,.12); border-radius: 24px; background: #fffaf3; display: grid; gap: 10px; }
.order-status-progress h2 { margin: 0; font-size: 18px; }
.order-status-progress p { margin: 0; font-size: 14px; line-height: 1.5; }
.order-status-progress__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: #7a685b; }
.order-status-progress__steps li.is-done { color: #40563b; }
.order-status-progress__steps li.is-current { color: #2f2a25; font-weight: 700; }
.order-status-edit { display: flex; width: max-content; max-width: 100%; align-items: center; justify-content: center; min-height: 46px; margin: 8px auto 0; padding: 0 22px; border-radius: 999px; border: 1px solid #2f2a25; color: #2f2a25; font-weight: 500; text-decoration: none; }
.order-status-remote { display: grid; gap: 14px; padding: 22px; border-radius: 28px; background: #fffaf3; border: 1px solid rgba(92,74,58,.12); box-shadow: 0 20px 54px rgba(47,42,37,.09); color: #2f2a25; font-size: 14.5px; line-height: 1.55; }
.order-status-remote p { margin: 0; color: #5d5149; }
.order-status-remote__hint { font-size: 13px; color: #7a685b; }
/* Номер заказа — то единственное, что нужно назвать оператору, чтобы он нашёл заказ. */
/* Строка «значение + скопировать»: номер заказа и готовое сообщение. Набирать их
   руками с телефона мучительно, поэтому копирование — одно касание. */
.order-status-copy { display: grid; gap: 6px; }
.order-status-copy__label { color: #9a6b4f; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.order-status-copy__row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 8px 8px 14px; border: 1px solid rgba(92,74,58,.16); border-radius: 16px; background: #fff; }
.order-status-copy__value { flex: 1; min-width: 0; padding: 10px 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.order-status-copy__text { flex: 1; min-width: 0; margin: 0; padding: 6px 0; font: inherit; font-size: 13.5px; line-height: 1.5; color: #5d5149; white-space: pre-wrap; word-break: break-word; user-select: text; }
.order-status-copy__btn { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(92,74,58,.16); border-radius: 12px; background: #fffaf3; color: #5d5149; cursor: pointer; }
.order-status-copy__btn:hover { background: #f5eadd; color: #2f2a25; }
/* Каналы связи столбиком: на телефоне три пилюли в строку ломаются вразнобой. */
.order-status-channels { display: grid; gap: 8px; }
.order-status-channels a { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(92,74,58,.2); background: rgba(255,250,243,.9); color: inherit; font-weight: 500; text-decoration: none; }
.order-status-channels a:first-child { background: #2f2a25; border-color: #2f2a25; color: #fffaf3; }
.order-status-remote .order-recovery-rows { margin: 0; gap: 10px; }
.order-status-remote .order-recovery-row { padding: 10px; border: 1px solid rgba(92,74,58,.1); border-radius: 18px; background: #fff; }
.order-status-remote .order-recovery-row__thumb { background: #efe3d3; border-radius: 12px; }
.order-status-remote .order-recovery-row__status { color: #7a685b; opacity: 1; }
/* Жирного на этой странице нет нигде, кроме текущего шага таймлайна: названия слотов
   и «шапка» блока связи набраны обычным весом. */
.order-status-remote .order-recovery-row__label { font-weight: 500; }
.order-status__home { justify-self: start; min-height: 44px; padding: 0; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: #5d5149; font: inherit; font-size: 15px; cursor: pointer; }
.order-status__home:hover { color: #2f2a25; }
/* Карточка восстановления тут в общем потоке страницы, без отступов редактора. */
.order-status .order-recovery-card { margin: 0; }
.mvp-sidebar { height: 100vh; overflow: auto; overflow-anchor: none; padding: 14px; background: #fffaf3; border-right: 1px solid rgba(0,0,0,.08); display: grid; align-content: start; gap: 10px; }
.sidebar-card { background: rgba(255,255,255,.86); border: 1px solid rgba(0,0,0,.07); border-radius: 18px; padding: 14px; box-shadow: 0 8px 18px rgba(47,42,37,.035); }
.mvp-sidebar > .sidebar-card:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 8px; padding: 12px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,243,.9)); }
.mvp-sidebar > .sidebar-card:first-child .back-to-templates { order: -2; flex: 1 0 100%; min-height: 32px; margin: 0 0 2px; font-size: 13px; }
.mvp-sidebar > .sidebar-card:first-child .sidebar-kicker { order: -1; flex: 1 0 100%; margin-top: 2px; }
.mvp-sidebar > .sidebar-card:first-child h1 { flex: 1 0 100%; margin: 0; color: #2f2a25; font-size: 20px; line-height: 1.08; letter-spacing: -.025em; }
.mvp-sidebar > .sidebar-card:first-child > p:not(.sidebar-kicker) { display: none; }
.sidebar-card h1, .sidebar-card h2 { margin: 4px 0 8px; }
.sidebar-card p { margin: 0; color: #756a60; line-height: 1.45; }
.sidebar-kicker { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #9b806f !important; }
.draft-status { display: inline-flex; align-items: center; min-height: 26px; margin-top: 2px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1; white-space: nowrap; }
.draft-status--dirty { background: #fff3d6; color: #8a5f16; }
.draft-status--saving { background: #eef1f4; color: #66717b; }
.draft-status--saved { background: #eaf3e8; color: #58744e; }
.draft-status--idle { background: #fffaf3; color: #756a60; border: 1px solid #eadfd4; }
.draft-actions { flex: 1 0 100%; display: grid; gap: 8px; margin-top: 4px; }
.draft-actions button { min-height: 36px; border: 1px solid rgba(138,95,22,.22); border-radius: 999px; background: transparent; color: #8a5f16; padding: 0 14px; cursor: pointer; font-size: 12px; font-weight: 700; }
.style-list, .block-list, .editor-grid { display: grid; gap: 10px; }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.mode-switch button { min-height: 40px; border: 1px solid #ded5cb; border-radius: 999px; background: #fffaf3; color: #725a42; cursor: pointer; }
.mode-switch button.is-active { background: #2f2a25; color: #fffaf3; border-color: #2f2a25; }
.demo-info-card { display: grid; gap: 4px; padding: 9px 11px; border: 1px solid rgba(205,221,199,.8); border-radius: 16px; background: linear-gradient(180deg, #f7fbf3, #f3f8ef); color: #2f2a25; }
.demo-info-card strong { font-size: 13px; line-height: 1.15; }
.demo-info-card p { margin: 0; color: #58744e; font-size: 12px; line-height: 1.32; }
.simple-subcard { display: grid; gap: 12px; padding: 14px; border: 1px solid #eadfd4; border-radius: 18px; background: #fffaf3; }
.simple-subcard--quick { background: #fff; border-style: dashed; }
.simple-subcard-head { display: grid; gap: 4px; }
.simple-subcard-head strong { color: #2f2a25; font-size: 15px; }
.simple-subcard-head p { margin: 0; color: #756a60; font-size: 13px; line-height: 1.35; }
.simple-program-list { display: grid; gap: 10px; }
.simple-program-row { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-ivory); overflow-anchor: none; }
.simple-program-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.simple-program-top strong { color: var(--c-ink); font-size: 13px; }
.simple-program-actions, .editor-repeat-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.simple-program-top button { min-height: 40px; border: 0; border-radius: 999px; padding: 0 10px; cursor: pointer; }
.simple-program-move { min-width: 40px; background: rgba(143,160,138,.14); color: var(--c-olive); }
.simple-program-delete { background: rgba(140,74,62,.12); color: var(--c-danger); }
.simple-program-top button:disabled, .editor-repeat-actions button:disabled { opacity: .45; cursor: not-allowed; }
.simple-timeline-row { display: grid; grid-template-columns: 100px 1fr; gap: 8px; }
.simple-program-desc { border: 1px dashed var(--c-line-strong); border-radius: 12px; background: var(--c-warm-white); overflow: hidden; overflow-anchor: none; }
.simple-program-desc > summary { list-style: none; cursor: pointer; padding: 10px 11px; color: var(--c-olive); font-size: 13px; font-weight: 600; }
.simple-program-desc > summary::-webkit-details-marker { display: none; }
.simple-program-desc > summary::after { content: "⌄"; float: right; color: var(--c-sage); }
.simple-program-desc[open] > summary { border-bottom: 1px dashed var(--c-line); }
.simple-program-desc[open] > summary::after { content: "⌃"; }
.simple-program-desc .editor-field { padding: 9px 11px; }
.simple-program-desc .editor-field textarea { min-height: 72px; max-height: 140px; resize: vertical; }
.simple-preset-panel { display: grid; gap: 10px; padding: 14px; border: 1px dashed var(--c-line-strong); border-radius: 16px; background: var(--c-ivory); }
.simple-preset-panel strong { color: var(--c-ink); font-size: 14px; line-height: 1.25; }
.simple-preset-panel div { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.simple-preset-panel button { min-height: 40px; border: 0; border-radius: 999px; background: rgba(143,160,138,.14); color: var(--c-olive); padding: 0 12px; cursor: pointer; font-size: 13px; line-height: 1; white-space: nowrap; }
.simple-preset-panel button.is-added, .simple-preset-panel button:disabled { background: rgba(143,160,138,.16); color: var(--c-olive); cursor: default; opacity: .9; }
.simple-preset-panel--inline { padding: 0; border: 0; border-radius: 0; background: transparent; }
.simple-details-list { display: grid; gap: 10px; }
/* «Информация для гостей»: чипы тем → «Ваш текст» выбранной темы → варианты-карточки */
.sb-editor .details-preset-categories { display: flex; flex-wrap: wrap; gap: 10px 8px; min-width: 0; padding: 3px 0; }
.sb-editor .details-preset-cat { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-warm-white); color: var(--c-ink); font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.sb-editor .details-preset-cat:hover { border-color: var(--c-olive); }
.sb-editor .details-preset-cat svg { width: 13px; height: 13px; flex: none; }
.sb-editor .details-preset-cat.is-occupied { background: var(--c-olive); border-color: var(--c-olive); color: #fff; }
.sb-editor .details-preset-cat.is-active { box-shadow: 0 0 0 2px var(--c-warm-white), 0 0 0 3px var(--c-olive); }
.sb-editor .details-preset-cat:focus-visible { outline: 2px solid var(--c-sage); outline-offset: 3px; }
.sb-editor .details-topic { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-warm-white); min-width: 0; }
.sb-editor .details-topic__hint { margin: 0; color: var(--c-muted); font-size: 13px; line-height: 1.45; }
.sb-editor .details-chosen { display: grid; gap: 12px; min-width: 0; }
.sb-editor .details-chosen__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sb-editor .details-chosen__badge { display: inline-flex; align-items: center; gap: 6px; color: var(--c-success); font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.sb-editor .details-chosen__badge svg { width: 12px; height: 12px; }
.sb-editor .details-chosen__remove { font-size: 12px; color: var(--c-danger); text-decoration: underline; text-underline-offset: 2px; }
.sb-editor .details-options { display: grid; gap: 8px; min-width: 0; }
.sb-editor .details-chosen + .details-options { padding-top: 12px; border-top: 1px dashed var(--c-line-strong); }
.sb-editor .details-option { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; width: 100%; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-ivory); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.sb-editor .details-option:hover { border-color: var(--c-olive); background: #fff; }
.sb-editor .details-option:focus-visible { outline: 2px solid var(--c-sage); outline-offset: 2px; }
.sb-editor .details-option__tone { grid-column: 1; font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-sage); }
.sb-editor .details-option__text { grid-column: 1; color: var(--c-ink); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.sb-editor .details-option__cta { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 8px 12px; border-radius: 999px; background: rgba(143,160,138,.16); color: var(--c-olive); font-size: 12px; font-weight: 600; white-space: nowrap; }
.sb-editor .details-option:hover .details-option__cta { background: var(--c-olive); color: #fff; }
@media (max-width: 430px) { .sb-editor .details-option { grid-template-columns: 1fr; } .sb-editor .details-option__cta { grid-column: 1; grid-row: auto; justify-self: start; } }
.simple-detail-row { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-ivory); }
.simple-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.simple-row-top strong { color: var(--c-ink); font-size: 13px; }
.simple-row-top button { min-height: 40px; border: 0; border-radius: 999px; background: rgba(140,74,62,.12); color: var(--c-danger); padding: 0 10px; cursor: pointer; }
.simple-detail-preview { display: grid; grid-template-columns: auto 1fr; gap: 10px; min-width: 0; padding: 10px; border: 1px dashed var(--c-line-strong); border-radius: 14px; background: #fff; }
.simple-detail-preview > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; background: rgba(143,160,138,.14); font-size: 16px; line-height: 1; }
.simple-detail-preview div { display: grid; gap: 4px; min-width: 0; }
.simple-detail-preview strong { color: var(--c-ink); font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
.simple-detail-preview p { margin: 0; color: var(--c-muted); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.simple-detail-replace { display: grid; gap: 6px; min-width: 0; }
.simple-detail-replace span { color: var(--c-sage); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.simple-detail-replace select { width: 100%; min-height: 42px; border: 1px solid var(--c-line); border-radius: 12px; padding: 0 12px; background: var(--c-ivory); color: var(--c-ink); }
/* Единый переключатель вариантов (дресс-код «что показать», вид календаря): капсула,
   выбранный — залит основным цветом, как выбранные чипы и главные кнопки */
.seg-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: var(--c-warm-white); border: 1px solid var(--c-line-strong); }
.seg-tabs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg-tabs button { min-width: 0; min-height: 36px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--c-ink); cursor: pointer; text-align: center; padding: 6px 10px; transition: background .15s, color .15s; }
.seg-tabs button strong { color: inherit; font-size: 13px; font-weight: 500; line-height: 1; }
.seg-tabs button:hover { background: rgba(143,160,138,.12); }
.seg-tabs button.is-active { background: var(--c-olive); color: #fff; }
.seg-tabs button:focus-visible { outline: 2px solid var(--c-sage); outline-offset: 2px; }
/* Дресс-код: сетка палитр — карточка целиком кликабельна, выбранная — рамка + галочка */
.dress-picker { display: grid; gap: 16px; min-width: 0; }
.dress-palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; min-width: 0; }
@media (max-width: 430px) { .dress-palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dress-palette-card { position: relative; display: grid; gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-warm-white); cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s; }
.dress-palette-card:hover { border-color: var(--c-line-strong); box-shadow: 0 6px 16px rgba(31,42,34,.06); }
.dress-palette-card:focus-visible { outline: 2px solid var(--c-sage); outline-offset: 2px; }
.dress-palette-card.is-selected { border-color: var(--c-olive); box-shadow: 0 0 0 1px var(--c-olive); }
.dress-palette-card__name { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; padding: 10px 12px; color: var(--c-ink); font-size: 13px; font-weight: 500; line-height: 1.2; }
.dress-palette-card__name small { flex: none; font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-sage); }
.dress-palette-card__check { position: absolute; top: 8px; right: 8px; z-index: 5; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: var(--c-olive); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 2px 6px rgba(31,42,34,.25); }
.dress-palette-visual { position: relative; height: 84px; overflow: hidden; background: var(--c-ivory); }
.dress-palette-visual.has-image img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
/* «Цвета» — полоса из пяти цветов, как веер образцов ткани */
.dress-palette-visual--colors { display: grid; grid-template-columns: repeat(5, 1fr); }
.dress-palette-visual--colors i { display: block; min-width: 0; height: 100%; }
.dress-palette-visual--colors i + i { box-shadow: inset 1px 0 0 rgba(255,255,255,.35); }
.dress-palette-visual--fabric.is-placeholder, .dress-palette-visual--people.is-placeholder { display: grid; place-items: center; padding: 10px; background: var(--dress-color-3, var(--c-ivory)); }
.dress-palette-visual--custom { display: grid; place-items: center; border-bottom: 1px dashed var(--c-line-strong); background: repeating-linear-gradient(135deg, var(--c-ivory) 0 10px, var(--c-warm-white) 10px 20px); color: var(--c-olive); font-size: 26px; font-weight: 300; }
.custom-palette-panel { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-warm-white); }
.custom-palette-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.custom-palette-swatch { position: relative; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(31,42,34,.12); box-shadow: 0 0 0 3px var(--c-warm-white), 0 0 0 4px var(--c-line-strong); cursor: pointer; }
.custom-palette-swatch:hover { box-shadow: 0 0 0 3px var(--c-warm-white), 0 0 0 4px var(--c-olive); }
.custom-palette-swatch:focus-within { box-shadow: 0 0 0 3px var(--c-warm-white), 0 0 0 5px var(--c-sage); }
.custom-palette-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.dress-preview-placeholder { position: relative; z-index: 4; max-width: 210px; display: grid; justify-items: center; gap: 5px; color: var(--c-muted); text-align: center; }
.dress-preview-placeholder > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,253,248,.72); color: var(--c-sage); border: 1px solid var(--c-line-strong); font-size: 14px; line-height: 1; }
.dress-preview-placeholder strong { color: var(--c-ink); font-size: 12px; line-height: 1.15; }
.dress-preview-placeholder p { margin: 0; color: var(--c-muted); font-size: 10.5px; line-height: 1.25; }
.dress-preview-placeholder--compact { max-width: 170px; gap: 6px; }
.dress-preview-placeholder--compact > span { width: 32px; height: 32px; }
.dress-preview-placeholder--compact strong { font-size: 13px; }
.client-step-status { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 0 7px; border-radius: 999px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.client-step-status--done { background: rgba(143,160,138,.16); color: var(--c-olive); }
.client-step-status--todo { background: rgba(140,74,62,.12); color: var(--c-danger); }
.client-step-status--progress { background: rgba(154,123,62,.12); color: var(--c-warning-ink); }
.client-step-status--optional { background: rgba(143,160,138,.14); color: var(--c-muted); }
.client-step-status--warning { background: rgba(154,123,62,.12); color: var(--c-warning-ink); }
.paid-feature-grid { display: grid; gap: 8px; margin-bottom: 12px; }
.paid-feature-note { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-ivory); }
.paid-feature-note strong { color: var(--c-ink); font-size: 14px; }
.paid-feature-note p { margin: 4px 0 0; color: var(--c-muted); font-size: 13px; line-height: 1.35; }
.feature-action-card { display: grid; gap: 12px; padding: 12px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-ivory); }
.feature-action-card.is-enabled { border-color: rgba(154,123,62,.35); background: rgba(154,123,62,.08); }
.feature-action-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.feature-action-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feature-action-head strong { color: var(--c-ink); font-size: 14px; }
.feature-optional-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(143,160,138,.14); color: var(--c-warning-ink); font-size: 11px; font-weight: 700; }
.feature-action-head p { margin: 4px 0 0; color: var(--c-muted); font-size: 13px; line-height: 1.35; }
.feature-add-button, .feature-remove-button { flex: 0 0 auto; min-height: 40px; border: 0; border-radius: 999px; padding: 0 12px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.feature-add-button { background: var(--c-olive); color: #fff; }
.feature-remove-button { background: rgba(140,74,62,.12); color: var(--c-danger); }
.simple-rsvp-card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-ivory); }
.simple-rsvp-card.is-enabled { border-color: rgba(154,123,62,.35); background: rgba(154,123,62,.08); }
.simple-rsvp-list { display: grid; gap: 10px; }
.simple-rsvp-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.simple-rsvp-card-header span { display: grid; gap: 4px; }
.simple-rsvp-card-header strong { color: var(--c-ink); font-size: 15px; }
.simple-rsvp-card-header small { color: var(--c-muted); font-size: 13px; line-height: 1.35; }
.simple-rsvp-card-header button { flex: 0 0 auto; min-height: 40px; border: 0; border-radius: 999px; background: rgba(140,74,62,.12); color: var(--c-danger); padding: 0 10px; cursor: pointer; }
.simple-add-question-panel { display: grid; gap: 10px; padding: 12px; border: 1px dashed var(--c-line-strong); border-radius: 16px; background: var(--c-ivory); }
.simple-add-question-panel strong { color: var(--c-ink); font-size: 14px; }
.simple-add-question-panel div { display: flex; gap: 8px; flex-wrap: wrap; }
.simple-add-question-panel button { min-height: 40px; border: 0; border-radius: 999px; background: rgba(143,160,138,.14); color: var(--c-muted); padding: 0 12px; cursor: pointer; }
.simple-rsvp-card-preview { display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: #fff; border: 1px dashed var(--c-line-strong); }
.simple-preview-label { margin: 0; color: var(--c-sage); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.simple-preview-question { margin: 0; color: var(--c-ink); font-size: 13px; font-weight: 600; }
.simple-option-list { display: flex; gap: 7px; flex-wrap: wrap; }
.simple-option-pill { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; background: rgba(143,160,138,.14); color: var(--c-muted); font-size: 12px; }
.simple-text-placeholder { min-height: 42px; display: flex; align-items: center; padding: 0 12px; border-radius: 12px; background: var(--c-ivory); color: var(--c-muted); font-size: 13px; border: 1px solid var(--c-line); }
.simple-rsvp-results { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-ivory); }
.simple-rsvp-results summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.simple-rsvp-results summary::-webkit-details-marker { display: none; }
.simple-rsvp-results summary span { display: grid; gap: 4px; }
.simple-rsvp-results summary strong { color: var(--c-ink); font-size: 15px; }
.simple-rsvp-results summary small { color: var(--c-muted); font-size: 13px; line-height: 1.35; }
.simple-rsvp-results summary em { min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--c-olive); color: #fff; font-size: 13px; font-style: normal; }
.contacts-editor-v2 { gap: 12px; }
/* R3-5: короб-в-коробе убран — секция-обёртка прозрачная, карточкой остаётся
   только .editor-repeat.contact-repeat (одна поверхность на листе). */
.contacts-editor-section { display: grid; gap: 10px; }
/* .contacts-editor-v2 префикс поднимает специфичность выше editor-button-reset
   .sb-editor button:where(:not(.invite-theme *)) (0,1,1), иначе чипсы/корзины
   теряют рамку и фон и выглядят «простым текстом». */
/* R3-7: чипы «добавить канал» — secondary-заливка по tags.txt (как невыбранный тег). */
/* Общий чип-кнопка редактора (контакты + пресеты программы R4-3c). Префикс .sb-editor —
   специфичность (0,2,0) > editor-button-reset (0,1,1), иначе чип красится в плоский текст. */
/* Чипы «+ канал» / «+ пункт программы» — один вид с чипами тем «Информации для гостей» */
.sb-editor .contact-kind-chip { min-width: 0; min-height: 34px; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-warm-white); color: var(--c-ink); padding: 0 14px; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; transition: border-color .15s, background .15s; white-space: normal; overflow-wrap: anywhere; }
.sb-editor .contact-kind-chip:hover { border-color: var(--c-olive); background: #fff; }
.sb-editor .contact-kind-chip:focus-visible { outline: 2px solid var(--c-sage); outline-offset: 2px; }
.contact-channel-row .editor-field { flex: 1 1 auto; min-width: 0; }
/* N1: align-items:flex-end ровнял корзину по margin-box поля; обнуляем
   margin поля в рядах (spacing даёт .contact-repeat gap) и приравниваем
   высоту корзины к высоте инпута — тогда корзина центрируется по полю. */
.contacts-editor-v2 .contact-repeat .editor-field { margin-bottom: 0; }
/* R3-5: корзины — лёгкий ghost (как чрома .icon-btn), без коробки/рамки. */
.contacts-editor-v2 .contact-icon-btn { flex: 0 0 auto; width: 40px; height: 45px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-muted); cursor: pointer; transition: background .15s, color .15s; }
.contacts-editor-v2 .contact-icon-btn:hover { background: rgba(143,160,138,.12); color: var(--c-olive); }
.contacts-editor-v2 .contact-icon-btn.danger:hover { color: var(--c-danger); background: rgba(140,74,62,.08); }
.contacts-editor-v2 .contact-icon-btn:disabled { opacity: .38; cursor: not-allowed; }
.contacts-editor-v2 .contact-icon-btn:disabled:hover { background: transparent; color: var(--c-muted); }
.contacts-editor-v2 .contact-add-btn { min-height: 42px; border: 1px dashed var(--c-line-strong); border-radius: 999px; background: transparent; color: var(--c-olive); padding: 0 14px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; }
.contacts-editor-v2 .contact-add-btn:hover { background: rgba(143,160,138,.12); border-color: var(--c-sage); }
.readiness-card.is-ready { border-color: rgba(143,160,138,.5); background: rgba(143,160,138,.10); }
.published-locked-card { display: grid; gap: 10px; padding: 16px; border: 1px solid #cdddc7; border-radius: 18px; background: #f4faef; color: #2f2a25; }
.published-locked-card strong { font-size: 17px; }
.published-locked-card p { margin: 0; color: #58744e; font-size: 13px; line-height: 1.45; }
.published-locked-card div { padding: 10px 12px; border-radius: 14px; background: #fff; color: #2f2a25; font-size: 13px; }
.client-final-check-card { display: grid; gap: 12px; padding: 14px; border: 1px solid #eadfd4; border-radius: 18px; background: #fffaf3; }
.client-final-check-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.client-final-check-head strong { display: block; color: #2f2a25; font-size: 16px; }
.client-final-check-head p { margin: 4px 0 0; color: #756a60; font-size: 13px; line-height: 1.35; }
.client-final-check-head > span { min-height: 38px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 999px; background: #2f2a25; color: #fffaf3; font-size: 14px; font-weight: 700; white-space: nowrap; }
.client-final-base { display: grid; gap: 4px; padding: 10px; border-radius: 14px; background: #fff; border: 1px dashed #d8cabb; }
.client-final-base strong { color: #58744e; font-size: 13px; }
.client-final-base p { margin: 0; color: #756a60; font-size: 13px; line-height: 1.35; }
.client-final-paid-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.client-final-paid-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #eadfd4; color: #2f2a25; font-size: 13px; }
.client-final-paid-list strong { color: #8a5f16; }
.order-summary-card { display: grid; gap: 12px; padding: 14px; border: 1px solid #eadfd4; border-radius: 18px; background: #fffaf3; }
.order-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.order-summary-head strong { display: block; color: #2f2a25; font-size: 16px; }
.order-summary-head p { margin: 4px 0 0; color: #756a60; font-size: 13px; line-height: 1.35; }
.order-summary-head > span { min-height: 38px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 999px; background: #2f2a25; color: #fffaf3; font-size: 14px; font-weight: 700; white-space: nowrap; }
.order-summary-section { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid #eadfd4; }
.order-email-section { padding: 12px; border: 1px dashed #d8cabb; border-radius: 16px; background: #fff; }
.order-summary-section p { margin: 0; color: #756a60; font-size: 13px; line-height: 1.4; }
.order-summary-row, .order-summary-section li { display: flex; justify-content: space-between; gap: 10px; color: #2f2a25; font-size: 13px; }
.order-summary-section ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.order-summary-section li strong { color: #8a5f16; }
.payment-status-card { padding: 12px; border-radius: 14px; background: #fff; border: 1px dashed #d8cabb; }
.payment-status-card p { margin: 0; color: #756a60; font-size: 13px; line-height: 1.4; }
.payment-status-card--pending_payment { background: #fff3d6; border-color: #ead29e; }
.payment-status-card--published { background: #eaf3e8; border-color: #cdddc7; }
.after-payment-card { display: grid; gap: 10px; padding: 14px; border: 1px solid #cdddc7; border-radius: 18px; background: #f4faef; }
.after-payment-card strong { color: #2f2a25; font-size: 16px; }
.after-payment-card p { margin: 0; color: #58744e; font-size: 13px; line-height: 1.45; }
.after-payment-card ol { margin: 0; padding-left: 18px; color: #58744e; font-size: 13px; line-height: 1.5; }
.after-payment-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.after-payment-actions button, .after-payment-actions a { min-height: 42px; border: 0; border-radius: 999px; background: #58744e; color: #fffaf3; padding: 0 12px; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; }
.after-payment-actions button:first-child { background: #2f2a25; }
.after-payment-actions a { background: #fff; color: #58744e; border: 1px solid #cdddc7; }
.static-next-panel { display: grid; gap: 10px; margin-top: 12px; padding: 14px; border: 1px solid #cdddc7; border-radius: 18px; background: #f4faef; }
.static-next-panel strong { color: #2f2a25; font-size: 15px; }
.static-next-panel p { margin: 0; color: #58744e; font-size: 13px; line-height: 1.45; }
.static-next-panel div { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.static-next-panel span { padding: 6px 9px; border-radius: 999px; background: #fff; border: 1px solid #cdddc7; color: #58744e; font-size: 12px; }
.static-next-panel em { color: #58744e; font-style: normal; }
.order-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sticky-action-bar { position: sticky; bottom: 0; z-index: 18; display: grid; gap: 10px; margin: 4px -4px -20px; padding: 12px; border: 1px solid rgba(47,42,37,.12); border-radius: 22px 22px 0 0; background: rgba(255,250,243,.94); box-shadow: 0 -16px 42px rgba(47,42,37,.14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.sticky-action-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sticky-action-total span { color: #756a60; font-size: 12px; font-weight: 700; }
.sticky-action-total strong { color: #2f2a25; font-size: 20px; line-height: 1; }
.sticky-action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sticky-action-buttons button { min-height: 42px; border: 0; border-radius: 999px; padding: 0 12px; cursor: pointer; font-size: 13px; font-weight: 700; }
.sticky-action-buttons button:disabled { opacity: .72; cursor: default; }
.sticky-action-secondary { background: #e3d0b4; color: #5a4632; }
.sticky-action-primary { background: #2f2a25; color: #fffaf3; }
.sticky-action-muted { grid-column: 1 / -1; min-height: 36px !important; background: transparent; color: #8a4b43; border: 1px solid #f3d8d3 !important; }
.order-actions button, .order-actions a { min-height: 44px; border: 0; border-radius: 999px; cursor: pointer; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; font-size: 13px; }
.order-preview-button { background: #efe2d4; color: #725a42; }
.order-pay-button { background: #2f2a25; color: #fffaf3; }
.payment-modal-overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; background: rgba(26,23,20,.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.payment-modal { position: relative; width: min(520px, 100%); max-height: min(760px, calc(100vh - 36px)); overflow: auto; display: grid; gap: 14px; padding: 24px; border: 1px solid var(--c-line); border-radius: 20px; background: var(--c-warm-white); color: var(--c-ink); box-shadow: 0 24px 80px rgba(31,42,34,.24); }
.payment-modal h2 { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -.005em; color: var(--c-ink); }
.payment-modal .sidebar-kicker { color: var(--c-sage) !important; font-family: var(--f-mono); }
.payment-modal-close { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border: 0; border-radius: 999px; background: transparent; color: var(--c-muted); cursor: pointer; font-size: 22px; line-height: 1; transition: background .15s, color .15s; }
.payment-modal-close:hover { background: rgba(143,160,138,0.12); color: var(--c-ink); }
.payment-modal-text { margin: 0; color: var(--c-muted); font-size: 14px; line-height: 1.55; }
.payment-modal-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-radius: 18px; background: #fff; border: 1px dashed #d8cabb; }
.payment-modal-total span, .bank-terminal-card span { color: #756a60; font-size: 13px; }
.payment-modal-total strong { font-size: 24px; }
.payment-offer-check { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid #eadfd4; color: #756a60; font-size: 13px; line-height: 1.45; }
.payment-offer-check input { margin-top: 3px; }
.payment-photo-note { margin: 10px 0 0; color: #8a7f74; font-size: 12px; line-height: 1.45; }
.payment-offer-links { display: flex; gap: 8px; flex-wrap: wrap; }
.payment-offer-links button, .payment-offer-links a { min-height: 34px; border: 1px solid #eadfd4; border-radius: 999px; background: #fff; color: #725a42; padding: 0 12px; cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; text-decoration: none; }
.payment-primary-button, .payment-secondary-button { min-height: 46px; border: 0; border-radius: 999px; cursor: pointer; padding: 0 18px; }
.payment-primary-button { background: #2f2a25; color: #fffaf3; }
.payment-submit { position: sticky; bottom: 0; box-shadow: 0 -16px 20px 12px #fffaf3; }
.payment-readiness-modal { gap: 16px; }
.payment-readiness-list { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid #eadfd4; }
.payment-readiness-list strong { color: #2f2a25; font-size: 14px; }
.payment-readiness-list ul { margin: 0; padding-left: 18px; color: #756a60; font-size: 13px; line-height: 1.45; }
.payment-readiness-list--warnings { background: #fff3d6; border-color: #ead29e; }
.payment-readiness-list--warnings ul { color: #8a5f16; }
.payment-readiness-list--todo ul { list-style: none; padding-left: 0; display: grid; gap: 8px; }
.payment-readiness-list--todo li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.payment-readiness-jump { flex: 0 0 auto; min-height: 36px; display: inline-flex; align-items: center; border: 1px solid #d8cdbf; background: #fff; color: #4f5c45; border-radius: 999px; padding: 8px 16px; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s, color .2s; }
.payment-readiness-jump:hover { border-color: #4f5c45; background: #f6f3ec; }
.payment-readiness-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.payment-secondary-button { background: transparent; color: var(--c-ink); border: 1px solid var(--c-line-strong); }
.bank-terminal-card { display: grid; gap: 10px; padding: 16px; border-radius: 20px; background: #2f2a25; color: #fffaf3; }
.bank-terminal-card div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.14); }
.bank-terminal-card div:last-child { padding-bottom: 0; border-bottom: 0; }
.bank-terminal-card span { color: rgba(255,250,243,.68); }
.bank-terminal-card strong { text-align: right; }
.reset-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reset-danger-button { min-height: 46px; border: 1px solid var(--c-danger); border-radius: 999px; cursor: pointer; padding: 0 18px; background: var(--c-danger); color: #fff; }
.style-list button, .block-list button { width: 100%; min-height: 48px; border-radius: 14px; border: 1px solid #ded5cb; background: #fff; text-align: left; cursor: pointer; padding: 10px 12px; display: grid; gap: 3px; }
.style-list button span, .block-list button em { color: #83786e; font-size: 12px; font-style: normal; }
.style-list button.is-active, .block-list button.is-enabled { border-color: #8f765b; background: #f8f1e8; }
.block-list button.is-selected { outline: 2px solid rgba(143, 118, 91, .35); }
.block-editor-top { display: grid; gap: 12px; margin-bottom: 14px; }
.block-editor-top h2 { margin: 4px 0 0; }
.editor-check { display: flex; gap: 8px; align-items: center; color: var(--c-muted); font-size: 13px; }
.editor-empty, .editor-note { margin: 0; padding: 12px; border-radius: 14px; background: var(--c-ivory); color: var(--c-muted); font-size: 13px; line-height: 1.45; }
.editor-repeat { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-ivory); }
.editor-repeat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.editor-repeat-top button, .editor-add, .editor-color-row > button { border: 0; border-radius: 999px; background: rgba(143,160,138,.14); color: var(--c-olive); min-height: 40px; padding: 0 12px; cursor: pointer; }
.editor-add { min-height: 42px; }
.editor-color-row { grid-template-columns: 52px 1fr; }
.editor-color-row input[type="color"] { width: 48px; height: 48px; border: 1px solid var(--c-line); border-radius: 14px; padding: 4px; background: #fff; }
.editor-field { display: grid; gap: 6px; }
.editor-field span { color: var(--c-muted); font-size: 13px; }
.editor-field input, .editor-field textarea, .editor-field select { width: 100%; border: 1px solid var(--c-line); border-radius: 12px; padding: 11px 12px; background: var(--c-warm-white); color: var(--c-ink); transition: border-color .15s, box-shadow .15s, background .15s; }
.editor-field input:focus, .editor-field textarea:focus, .editor-field select:focus { outline: none; border-color: var(--c-sage); box-shadow: 0 0 0 3px rgba(143,160,138,.18); background: #fff; }
.editor-field input::placeholder, .editor-field textarea::placeholder { color: rgba(31,42,34,.34); opacity: 1; }
.editor-field textarea { min-height: 86px; resize: vertical; }
/* Телефон по маске: полный номер — зелёная рамка и галочка (фоном), неполный после ухода из поля — красная.
   .sb-editor + двойной класс — чтобы перебить рамку из .nested-block .editor-field > input. */
.sb-editor .editor-field.is-complete > input, .editor-field.is-complete > input { border-color: rgba(92,122,82,.7); padding-right: 38px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235C7A52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8l3.5 3.5L13 5'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.sb-editor .editor-field.is-complete > input:focus, .editor-field.is-complete > input:focus { border-color: #5C7A52; box-shadow: 0 0 0 3px rgba(92,122,82,.16); }
.sb-editor .editor-field.is-incomplete > input, .editor-field.is-incomplete > input { border-color: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,.12); }
.editor-field .phone-field__hint, .sb-editor .nested-block .editor-field > .phone-field__hint { color: #c62a2f; font-family: inherit; font-size: 12px; letter-spacing: normal; text-transform: none; line-height: 1.4; }
.editor-select { position: relative; }
.editor-select__button { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--c-line); border-radius: 12px; padding: 10px 12px; background: var(--c-warm-white); color: var(--c-ink); cursor: pointer; text-align: left; }
.editor-select__button.is-open { border-color: var(--c-sage); }
.editor-select__button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-select__button em { flex: 0 0 auto; font-style: normal; color: var(--c-sage); font-size: 14px; line-height: 1; transition: transform .15s ease; }
.editor-select__button.is-open em { transform: rotate(180deg); }
.editor-select__menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-warm-white); box-shadow: 0 16px 36px rgba(31,42,34,.18); }
.editor-select__option { width: 100%; min-height: 42px; display: flex; align-items: center; border: 0; border-radius: 9px; padding: 8px 10px; background: transparent; color: var(--c-ink); cursor: pointer; text-align: left; }
.editor-select__option:hover { background: rgba(143,160,138,.12); }
.editor-select__option.is-selected { background: rgba(143,160,138,.16); color: var(--c-olive); font-weight: 700; }
.wedding-date-input { position: relative; }
/* R5: поле-кнопка открывает поповер-календарь (вместо ручного ввода / нативного пикера). */
.wedding-date-input__field { width: 100%; min-height: 46px; display: flex; align-items: center; padding: 10px 14px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-warm-white); color: var(--c-ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.wedding-date-input__field.is-empty { color: var(--c-muted); }
.wedding-date-input__field:focus-visible { outline: 2px solid var(--c-sage); outline-offset: 2px; }
/* Инлайн (в потоке): раскрывает секцию вниз — не клипается overflow-контейнерами (аккордеон/лист). */
.wedding-date-pop { margin-top: 8px; display: grid; gap: 8px; padding: 12px; background: var(--c-ivory); border: 1px solid var(--c-line); border-radius: 16px; box-shadow: 0 10px 30px rgba(31,42,34,.12); }
.wedding-date-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wedding-date-pop__head strong { font-size: 14px; color: var(--c-ink); }
.wedding-date-pop__nav { width: 34px; height: 34px; flex: none; border: 0; border-radius: 999px; background: rgba(143,160,138,.16); color: var(--c-olive); font-size: 20px; line-height: 1; cursor: pointer; }
.wedding-date-pop__nav:hover { background: rgba(143,160,138,.28); }
.wedding-date-pop__weekdays, .wedding-date-pop__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.wedding-date-pop__weekdays span { text-align: center; font-size: 11px; color: var(--c-muted); padding: 2px 0; }
.wedding-date-pop__day { aspect-ratio: 1; border: 0; border-radius: 10px; background: transparent; color: var(--c-ink); font: inherit; font-size: 13px; cursor: pointer; }
.wedding-date-pop__day:hover { background: rgba(143,160,138,.16); }
.wedding-date-pop__day.is-selected { background: var(--c-olive); color: #fff; }
.wedding-date-pop__day:focus-visible { outline: 2px solid var(--c-sage); outline-offset: 1px; }
.wedding-date-pop__blank { aspect-ratio: 1; }
/* Дроп-зона загрузки/замены фото: клик по зоне или перетаскивание файла (без отдельной кнопки). */
.media-dropzone { position: relative; display: grid; gap: 4px; place-items: center; text-align: center; min-height: 150px; padding: 18px; border-radius: 14px; border: 1.5px dashed var(--c-line-strong); background: var(--c-warm-white); color: var(--c-muted); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.media-dropzone:hover { border-color: var(--c-line-strong); background: var(--c-ivory); }
.media-dropzone.is-drag-over { border-color: var(--c-sage); background: rgba(143,160,138,.10); }
/* file-input доступен с клавиатуры (sr-only, не display:none) — фокус виден через :focus-within. */
.media-dropzone input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.media-dropzone:focus-within { border-color: var(--c-sage); box-shadow: 0 0 0 2px rgba(143,160,138,.4); }
.media-dropzone__icon { font-size: 24px; line-height: 1; color: var(--c-sage); }
.media-dropzone__title { font-size: 14px; font-weight: 500; color: var(--c-ink); }
.media-dropzone__hint { font-size: 12px; line-height: 1.35; }
.photo-add-trigger { display: grid; gap: 3px; width: 100%; padding: 14px; border: 1px dashed var(--c-line-strong); border-radius: 16px; background: var(--c-warm-white); cursor: pointer; text-align: left; }
.photo-add-trigger:hover { border-color: var(--c-line-strong); background: #fff; }
.photo-add-trigger strong { color: var(--c-ink); font-size: 14px; }
.photo-add-trigger span { color: var(--c-muted); font-size: 12px; line-height: 1.35; }
.media-editor { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-ivory); }
.image-position-preview.is-drag-over { outline: 2px dashed var(--c-sage); outline-offset: 3px; }
.media-editor-hint { margin: 0; color: var(--c-muted); font-size: 12px; line-height: 1.4; }
/* Resting-превью фото — тот же кап по высоте, что у редакторов, чтобы после «Готово»
   блок не вырастал за экран (у cover-слотов aspect высокий). */
.media-photo { position: relative; height: min(46vh, 420px); width: auto; max-width: 100%; margin-inline: auto; overflow: hidden; border-radius: 16px; border: 1px solid var(--c-line); background: var(--c-ivory); }
.media-photo.is-drag-over { outline: 2px dashed var(--c-sage); outline-offset: -2px; }
.media-photo__pick { position: absolute; inset: 0; display: block; cursor: pointer; border: 0; background: transparent; padding: 0; }
.media-photo__pick:focus-within { outline: 2px solid var(--c-sage); outline-offset: -2px; }
/* скрытый file-input внутри кнопки «Заменить» (label.media-icon-btn) */
.media-icon-btn > input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.media-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.media-photo__actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 12px; z-index: 2; }
/* R3-7: видимая иконка 32px, но тач-зона расширена до 44px через ::after (gap полей разведён, чтобы зоны не перекрывались). */
.media-icon-btn { position: relative; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,250,243,.92); color: var(--c-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(31,42,34,.2); }
.media-icon-btn::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; }
.media-icon-btn:hover { background: var(--c-warm-white); }
.media-icon-btn:focus-visible { outline: 0; box-shadow: 0 0 0 2px rgba(143,160,138,.55); }
.media-icon-btn--danger { color: var(--c-danger); }
/* R4-1: «Кадрировать» — основное действие, делаем заметным (был бледный/прозрачный).
   Префикс .sb-editor поднимает специфичность (0,2,0) выше editor-button-reset
   .sb-editor button (0,1,1), иначе фон сбрасывается в прозрачный (как у .contact-kind-chip). */
.sb-editor .media-icon-btn--accent { background: var(--c-olive); color: #fff; box-shadow: 0 2px 10px rgba(88,116,78,.45); }
.sb-editor .media-icon-btn--accent:hover { background: var(--c-olive); filter: brightness(1.12); }
/* R5: «Удалить» — такой же заметный залитый стиль, как «Кадрировать», но в danger-палитре
   (тоже .sb-editor-scoped поверх editor-button-reset, иначе фон сбрасывался в прозрачный). */
.sb-editor .media-icon-btn--danger { background: var(--c-danger); color: #fff; box-shadow: 0 2px 10px rgba(140,74,62,.45); }
.sb-editor .media-icon-btn--danger:hover { background: var(--c-danger); filter: brightness(1.1); }
.media-icon-btn.is-active { background: rgba(143,160,138,.16); color: var(--c-olive); }
.sb-editor .media-icon-btn--accent.is-active { background: var(--c-olive); color: #fff; }
.media-photo__replace-hint { position: absolute; left: 8px; bottom: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgba(31,42,34,.55); color: #fff; font-size: 11px; line-height: 1; pointer-events: none; }
.media-done { min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--c-olive); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
/* R4-1b: инлайн-редактор кадрирования прямо в карточке фото (без модалки) — загрузил → настроил → «Готово». */
/* Без рамки/фона — это просто layout-контейнер. Единственный видимый бокс — сам кадр (stage/preview), чтобы не было «бокс в боксе». */
.media-crop-inline { display: grid; gap: 10px; }
/* B1: шапка кроп-вида с Заменить/Удалить (rest-state пропущен при autoEdit). */
.media-crop-inline__extra { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--c-line); }
.media-crop-inline__foot { display: block; }
/* Заметная кнопка подтверждения — единый primary-стиль, во всю ширину.
   background задаём явно: .sb-editor button-ресет (специфичнее базового .media-done) гасил фон. */
.media-crop-inline .media-done { width: 100%; min-height: 48px; padding: 0 26px; font-size: 15px; font-weight: 700; background: var(--c-olive); color: #fff; box-shadow: 0 8px 18px -6px rgba(31,42,34,0.45); }
.media-crop-inline .media-done:hover { background: var(--c-olive-hover); }
.simple-gallery-crop-inline { display: grid; gap: 10px; }
.simple-gallery-crop-inline__head strong { font-size: 13px; color: var(--c-ink); }
/* R3-7 (ревью): инфо-выноска «Фото для постерного коллажа» — в общей палитре
   (не amber, как раньше), с сердечком-иконкой; курсор-сердечко при наведении. */
.cover-callout { display: flex; gap: 10px; padding: 13px 15px; border-radius: 14px; background: rgba(143,160,138,.12); border: 1px solid var(--c-line); }
.cover-callout__icon { flex: 0 0 auto; margin-top: 1px; line-height: 0; color: #e0607e; }
.cover-callout__body { display: grid; gap: 5px; min-width: 0; }
.cover-callout__body strong { color: var(--c-ink); font-size: 14px; line-height: 1.25; }
.cover-callout__body p { margin: 0; color: var(--c-muted); font-size: 12.5px; line-height: 1.45; }
.cover-callout__hint { color: var(--c-olive) !important; }
.cover-callout__title-row { display: flex; align-items: center; gap: 7px; }
/* Визуальный маркер «?» внутри выноски (сама выноска — триггер поповера). */
.cover-callout__q { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--c-line); background: var(--c-warm-white); color: var(--c-muted); font-size: 12px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
/* «?»-поповер: наведение/фокус/тап раскрывают пояснение. */
.info-hint { position: relative; display: inline-flex; }
/* Блочный триггер: кликабельна вся область (выноска обложки). */
.info-hint--block { display: block; position: relative; cursor: help; }
.info-hint--block:focus-visible { outline: 2px solid var(--c-olive); outline-offset: 2px; border-radius: 14px; }
.info-hint--block:hover .cover-callout__q, .info-hint--block:focus-visible .cover-callout__q { color: var(--c-ink); border-color: var(--c-olive); }
.info-hint__btn { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--c-line); background: var(--c-warm-white); color: var(--c-muted); font-size: 12px; font-weight: 700; line-height: 1; cursor: help; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.info-hint__btn:hover, .info-hint__btn:focus-visible { color: var(--c-ink); border-color: var(--c-olive); outline: none; }
.info-hint__pop { position: absolute; z-index: 30; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); width: min(260px, 74vw); display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--c-ink); color: #fff; font-size: 12px; line-height: 1.45; box-shadow: 0 8px 24px rgba(31,42,34,.28); }
.info-hint__pop::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: var(--c-ink); }
.info-hint__pop-text { display: block; }
/* Выноска-триггер во всю ширину: поповер в потоке под карточкой, не absolute —
   иначе широкий текст обрезается рамкой шага. */
.info-hint--block .info-hint__pop { position: relative; top: auto; left: auto; transform: none; width: auto; margin-top: 8px; }
.info-hint--block .info-hint__pop::before { left: 24px; transform: none; }
.cutout-photo-result.is-paid { border-color: rgba(154,123,62,.4); background: rgba(154,123,62,.10); }
.cutout-photo-result.is-free { border-color: rgba(88,116,78,.3); background: rgba(143,160,138,.10); }
.cutout-photo-result.is-paid .cutout-photo-result__check { background: rgba(154,123,62,.2); color: var(--c-warning); }
.photo-check-note { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid rgba(154,123,62,.4); border-radius: 14px; background: rgba(154,123,62,.10); }
.photo-check-note p { margin: 0; color: var(--c-warning-ink); font-size: 12px; line-height: 1.4; }
.photo-plan-defer { display: grid; gap: 7px; padding: 13px; border: 1px solid rgba(88,116,78,.28); border-radius: 16px; background: rgba(143,160,138,.10); }
.photo-plan-defer strong { color: var(--c-ink); font-size: 14px; }
.photo-plan-defer p { margin: 0; color: var(--c-olive); font-size: 12px; line-height: 1.42; }
.photo-plan-defer button { justify-self: start; min-height: 40px; border: 0; border-radius: 999px; background: rgba(143,160,138,.16); color: var(--c-olive); padding: 0 14px; cursor: pointer; font-size: 12px; font-weight: 800; }
.photo-plan-switch { justify-self: start; min-height: 40px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-ivory); color: var(--c-olive); padding: 0 14px; cursor: pointer; font-size: 12px; font-weight: 700; }
.date-display-toggle { display: grid; gap: 7px; }
.date-display-toggle__label { color: var(--c-olive); font-size: 12px; font-weight: 700; }
.date-display-toggle__options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.date-display-option { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 11px; border: 1px solid var(--c-line-strong); border-radius: 14px; background: var(--c-ivory); color: var(--c-ink); cursor: pointer; text-align: left; }
.date-display-option.is-active { border-color: rgba(88,116,78,.5); background: rgba(143,160,138,.10); }
.date-display-option__check { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--c-line-strong); border-radius: 999px; background: #fff; color: var(--c-olive); font-size: 12px; font-weight: 800; }
.date-display-option.is-active .date-display-option__check { border-color: var(--c-olive); background: rgba(143,160,138,.16); }
.date-display-option strong { font-size: 13px; line-height: 1.2; }
.image-position-editor { display: grid; gap: 9px; }
.image-position-editor strong { color: var(--c-ink); font-size: 14px; }
.image-position-editor p { margin: 3px 0 0; color: var(--c-muted); font-size: 12px; line-height: 1.35; }
/* Высоту ведём капом (а не шириной): у cutout-слотов aspect высокий (4/5, 3/4) и
   width:100% делало превью выше экрана. height-cap + width:auto сохраняет аспект
   (WYSIWYG-рамку) и центрирует; широкие слоты упираются в max-width:100%. */
/* container-type:inline-size (Task 5b) — hero-режим рендерит heroTransform в cqw
   (translate(Xcqw,Ycqw) scale(S)), которые должны резолвиться от ширины ЭТОГО бокса —
   так же, как на обложке cqw резолвится от ширины hero-контейнера (тоже inline-size).
   Для focal/zoom-режима (тот же класс) свойство инертно — там cqw не используется. */
.image-position-preview { position: relative; aspect-ratio: 1 / .74; height: min(46vh, 420px); width: auto; max-width: 100%; min-height: 170px; margin-inline: auto; overflow: hidden; border-radius: 18px; border: 1px solid var(--c-line-strong); background: var(--c-ivory); cursor: grab; touch-action: none; user-select: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); container-type: inline-size; }
.image-position-preview:focus-visible { outline: 2px solid var(--c-sage); outline-offset: 2px; }
.image-position-preview.is-dragging { cursor: grabbing; border-color: rgba(143,160,138,.55); box-shadow: 0 0 0 3px rgba(143,160,138,.12), inset 0 1px 0 rgba(255,255,255,.7); }
.image-position-preview img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; transition: transform .16s ease, object-position .16s ease; }
/* R4-1: драг идёт локально на каждый move — гасим анимацию, чтобы фото шло за пальцем без задержки. Фейковую арку-маску и прицел убрали: превью теперь WYSIWYG. */
.image-position-preview.is-dragging img { transition: none; }
/* Task 5b: hero-режим (heroTransform, cqw) меряет БАЗОВЫЙ (нетрансформированный) размер
   фото через getBoundingClientRect() для клампа (commitHeroTransform в PhotoEditor.tsx) —
   img здесь НЕ растянут в 100%/100% (в отличие от общего .image-position-preview img
   выше), а показывает реальный отображаемый размер (auto + max-100%, как на самой
   обложке); иначе измерение всегда давало бы «100% бокса» и клампило бы неверно.
   flex-центрирование = тот же центр, что transformOrigin:center на translate(0,0)scale(1). */
.image-position-preview--hero { display: flex; align-items: center; justify-content: center; background-color: var(--c-sand); background-image: conic-gradient(rgba(20,17,15,.045) 25%, transparent 0 50%, rgba(20,17,15,.045) 0 75%, transparent 0); background-size: 16px 16px; }
.image-position-preview--hero img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
/* Панель масштаба (ZoomControl): «−» / ползунок / «+» / процент — одна на все режимы фото. */
.image-zoom-control { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px 46px; align-items: center; gap: 10px; }
.image-zoom-control .image-zoom-control__btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--c-line-strong); background: var(--c-warm-white, #fff); color: var(--c-ink); font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: border-color .15s, background .15s; }
.image-zoom-control .image-zoom-control__btn:hover:not(:disabled) { border-color: var(--c-olive); background: rgba(143,160,138,.10); }
.image-zoom-control .image-zoom-control__btn:disabled { opacity: .4; cursor: default; }
.image-zoom-control .image-zoom-control__btn:focus-visible { outline: 2px solid var(--c-sage); outline-offset: 2px; }
.image-zoom-control strong { text-align: right; color: var(--c-ink); font-family: var(--f-mono); font-size: 12px; font-weight: 500; }
.image-zoom-control input[type="range"] { width: 100%; margin: 0; accent-color: var(--c-olive); cursor: pointer; }
/* Подсказка поверх кадра до первого касания (DragHint). */
.image-drag-hint { position: absolute; left: 50%; bottom: 12px; z-index: 3; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 6px 12px; border-radius: 999px; background: rgba(31,42,34,.66); color: #fff; font-size: 12px; line-height: 1.3; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: opacity .25s ease; }
.image-drag-hint.is-hidden { opacity: 0; }
/* Task 5b: «Сбросить положение» под hero-превью (там же, что и под focal/zoom-превью). */
:is(.image-crop-editor, .image-position-editor) .media-reset-pos, .media-reset-pos { justify-self: start; min-height: 40px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-ivory); color: var(--c-olive); padding: 0 14px; cursor: pointer; font-size: 12px; font-weight: 700; }
:is(.image-crop-editor, .image-position-editor) .media-reset-pos:hover, .media-reset-pos:hover { background: rgba(143,160,138,.10); }
.image-crop-editor { display: grid; gap: 9px; }
.image-crop-editor strong { color: var(--c-ink); font-size: 14px; }
.image-crop-editor p { margin: 3px 0 0; color: var(--c-muted); font-size: 12px; line-height: 1.35; }
/* Высоту ведём капом (как у .image-position-preview): у cover-слотов aspect высокий
   (hero 4/5, story 4/5), width:100% делало react-easy-crop выше экрана. height-cap +
   width:auto сохраняет аспект кадра и центрирует; зум (внутри Cropper) не растит контейнер. */
.image-crop-stage { position: relative; height: min(46vh, 420px); width: auto; max-width: 100%; min-height: 190px; margin-inline: auto; overflow: hidden; border-radius: 16px; border: 1px solid var(--c-line-strong); background: var(--c-sand); touch-action: none; user-select: none; cursor: grab; }
.image-crop-stage:active { cursor: grabbing; }
/* Рамка = итоговый кадр (objectFit cover): белая обводка crop-area react-easy-crop не нужна. */
.image-crop-stage .reactEasyCrop_CropArea { border: 0; color: transparent; }
.image-crop-stage .reactEasyCrop_CropAreaGrid::before, .image-crop-stage .reactEasyCrop_CropAreaGrid::after { border-color: rgba(255,255,255,.7); }
.simple-gallery-uploader { display: grid; gap: 10px; padding: 10px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-ivory); }
.simple-gallery-bulk-upload { position: relative; display: grid; cursor: pointer; }
.simple-gallery-bulk-upload span { min-height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; background: var(--c-olive); color: #fff; font-size: 13px; font-weight: 800; transition: box-shadow .15s; }
/* R3-7: file-input доступен с клавиатуры (sr-only, не display:none) — фокус виден через :focus-within. */
.simple-gallery-bulk-upload input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.simple-gallery-bulk-upload:focus-within span { box-shadow: 0 0 0 3px rgba(143,160,138,.5); }
.simple-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* R4-2: высоту слота задаёт aspect-ratio (inline, = аспект галереи шаблона), а не фикс. min-height —
   иначе высокие фото (object-fit:cover) растягивали слот «на весь экран». */
.simple-gallery-slot { position: relative; border: 1px dashed var(--c-line-strong); border-radius: 16px; background: var(--c-warm-white); overflow: hidden; min-width: 0; }
.simple-gallery-slot.is-filled { border-style: solid; border-color: var(--c-line); box-shadow: 0 8px 22px rgba(31,42,34,.045); }
/* Слот-превью: <button> (клик = кадрировать) либо <label> (клик = заменить, без geometry). */
.simple-gallery-preview { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--c-ivory); cursor: pointer; }
.simple-gallery-preview input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.simple-gallery-preview:focus-within { outline: 2px solid var(--c-sage); outline-offset: -2px; }
.simple-gallery-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.simple-gallery-slot-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 12px; z-index: 2; }
.simple-gallery-slot-actions .media-icon-btn { width: 28px; height: 28px; }
.simple-gallery-upload span { min-height: 40px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; background: rgba(143,160,138,.14); color: var(--c-olive); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.simple-gallery-upload { position: relative; display: grid; cursor: pointer; }
.simple-gallery-upload input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.simple-gallery-upload--empty { width: 100%; height: 100%; place-items: center; color: var(--c-olive); }
.simple-gallery-upload--empty:focus-within { outline: 2px solid var(--c-sage); outline-offset: -2px; border-radius: 16px; }
.simple-gallery-upload--empty span { min-width: 96px; min-height: 44px; background: rgba(143,160,138,.14); border: 1px solid var(--c-line-strong); }
.simple-gallery-hint { color: var(--c-muted); font-size: 12px; line-height: 1.4; }
.settings-subsection { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-ivory); }
.seo-lengths { display: flex; gap: 8px; flex-wrap: wrap; color: var(--c-muted); font-size: 12px; }
.seo-lengths span { padding: 7px 10px; border-radius: 999px; background: var(--c-ivory); border: 1px solid var(--c-line); }
.og-preview { overflow: hidden; border: 1px solid var(--c-line-strong); border-radius: 18px; background: var(--c-warm-white); box-shadow: 0 8px 22px rgba(31,42,34,.06); }
.og-preview-image { height: 170px; display: grid; place-items: center; color: var(--c-muted); background: linear-gradient(135deg, #f5ece1, #eee1d3); overflow: hidden; }
.og-preview-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.og-preview-content { padding: 14px; display: grid; gap: 6px; }
.og-preview-content strong { color: var(--c-ink); font-size: 15px; line-height: 1.25; }
.og-preview-content p { margin: 0; color: var(--c-muted); font-size: 13px; line-height: 1.4; }
.og-preview-content small { color: var(--c-sage); font-size: 12px; }
.editor-add:disabled { opacity: .55; cursor: not-allowed; }
.export-json { margin-top: 12px; max-height: 360px; overflow: auto; border-radius: 14px; background: #2f2a25; color: #fffaf3; padding: 12px; font-size: 11px; line-height: 1.45; }
.mvp-preview { height: 100vh; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 30px; }
.phone-frame { width: 430px; min-height: 820px; border-radius: 36px; overflow: hidden; background: #fff; box-shadow: 0 24px 80px rgba(0,0,0,.18); }
.preview-overlay { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: auto 1fr; background: rgba(26,23,20,.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.preview-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 22px; background: rgba(255,250,243,.96); border-bottom: 1px solid rgba(0,0,0,.08); }
.preview-toolbar div { display: grid; gap: 3px; }
.preview-toolbar p { margin: 0; color: #9b806f; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.preview-toolbar strong { color: #2f2a25; font-size: 16px; }
.preview-toolbar span { color: #756a60; font-size: 13px; }
.preview-toolbar button { min-height: 42px; border: 0; border-radius: 999px; background: #2f2a25; color: #fffaf3; padding: 0 18px; cursor: pointer; }
.preview-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.preview-stage { overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 28px; }
/* Эталонная ширина превью = 390px (единый масштаб cqw со всеми поверхностями). */
/* transform → containing block для position:fixed потомков шаблона (напр. classic
   .classic-page-silk): фикс-фон зажимается рамкой телефона, а не перекрывает
   тулбар/кнопки модалки предпросмотра. */
.preview-phone { width: min(390px, 100%); min-height: 820px; border-radius: 34px; overflow: hidden; background: #fff; box-shadow: 0 24px 80px rgba(0,0,0,.35); container-type: inline-size; container-name: sb-phone; transform: translateZ(0); }
.rsvp-table-empty { margin-top: 12px; padding: 12px; border-radius: 14px; background: #fffaf3; color: #756a60; font-size: 13px; line-height: 1.45; }
.rsvp-table-wrap { margin-top: 12px; overflow: auto; border: 1px solid #eadfd4; border-radius: 14px; background: #fffaf3; }
.rsvp-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 12px; }
.rsvp-table th, .rsvp-table td { padding: 9px 10px; border-bottom: 1px solid #eadfd4; text-align: left; vertical-align: top; color: #2f2a25; }
.rsvp-table th { color: #756a60; font-weight: 600; background: #fff7ed; }
.db-schema-panel { display: grid; gap: 10px; margin-top: 12px; }
.db-table-card { border: 1px solid #eadfd4; border-radius: 16px; background: #fffaf3; overflow: hidden; }
.db-table-card summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; cursor: pointer; list-style: none; }
.db-table-card summary::-webkit-details-marker { display: none; }
.db-table-card summary span { display: grid; gap: 3px; }
.db-table-card summary strong { color: #2f2a25; font-size: 14px; }
.db-table-card summary small { color: #756a60; font-size: 12px; }
.db-table-card > p { margin: 0; padding: 0 12px 12px; color: #756a60; font-size: 13px; line-height: 1.45; }
.db-table { min-width: 620px; }
@media (max-width: 900px) { .mvp-shell { grid-template-columns: 1fr; } .mvp-sidebar { min-height: 100vh; height: auto; border-right: 0; border-bottom: 0; padding-bottom: 170px; } .mvp-preview { display: none; } .sticky-action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; border-radius: 22px 22px 0 0; } }
@media (max-width: 460px) {
  .mvp-preview { display: none; }
  .preview-toolbar { align-items: flex-start; flex-direction: column; }
  .preview-toolbar button { width: 100%; }
  .preview-stage { padding: 0; }
  .preview-phone { width: 100%; border-radius: 0; box-shadow: none; }
		          .desktop-label { display: none; }
  .payment-readiness-actions { grid-template-columns: 1fr; }
  .sticky-action-bar { border-radius: 0; }
  .sticky-action-buttons { grid-template-columns: 1fr; }
  .sticky-action-muted { grid-column: auto; }
}