/* ── замок конструктора: шаги только читаются ── */
  .lockbar { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-bottom:14px;
             padding:12px 16px; border:0; border-radius:var(--radius-card);
             background:var(--ink-faint) }
  .lockbar b { font-size:13.5px; flex:0 0 auto }
  .lockbar span { flex:1 1 240px; color:var(--muted); font-size:12px; line-height:1.5 }
  .lockbtn { flex:0 0 auto; border:0; border-radius:var(--radius-mark); background:var(--paper);
             box-shadow:var(--shadow-chip); padding:7px 15px; font:inherit; font-size:12px;
             font-variation-settings:var(--axis-active); cursor:pointer; color:var(--ink-strong) }
  .lockbtn:hover { color:var(--ink) }
  .lockbtn:active { transform:translateY(1px) }
  /* один селектор на все три шага: тела шагов — это .card / .calc-panel / .ad-panel.
     .q-side — та же панель расчёта, но в быстром виде: у неё своя обёртка, и без
     неё в списке настройки заказанной кампании оставались бы кликабельными. */
  .cn-body.locked .card, .cn-body.locked .calc-panel, .cn-body.locked .ad-panel,
  .cn-body.locked .q-side { pointer-events:none; opacity:.72 }
  /* Кнопки действий живут ВНЕ панелей (иначе бы приглушились вместе с ней), поэтому
     их прячем отдельно: и «вперёд по шагу» (.act-btn), и блок кнопок объявления
     целиком — «Сгенерировать заново» у заказанной кампании не значит ничего. */
  .cn-body.locked .act-btn, .cn-body.locked .ad-actions { display:none }
  /* тот же замок для шага аудитории в ленте */
  #audStep.locked .aud-grid, #audStep.locked .aud-add { pointer-events:none; opacity:.72 }
  #audStep.locked .act-btn { display:none }
  /* Пройденный шаг (ушли в расчёт) приглушён слабее замка: это не запрет, а
     «сюда уже не смотрим». Возврат — строкой под чипами, в манере «Показать
     переписку»: на экране и так видно, что шаг погашен. */
  #audStep.past .aud-grid { pointer-events:none; opacity:.8 }
  #audStep.past .aud-add, #audStep.past .lim { display:none }
  .aud-back { display:block; margin:14px auto 0; border:0; background:transparent; font:inherit;
              font-size:12.5px; color:var(--muted); cursor:pointer; padding:5px 9px; border-radius:8px }
  .aud-back:hover { background:var(--ink-faint); color:var(--ink) }
  /* Заказ в ленте: заголовок шага по центру, как у аудитории и объявления, а само
     тело — влево, там таблицы сумм и списки. Кнопки шага (оплатить, вернуться)
     живут вне .ord-panel, поэтому центруем их отдельно. */
  #ordStep .ord-body { margin-top:12px; text-align:left }
  #ordStep .act-btn, #ordStep .ad-ghost { display:flex; width:fit-content; margin:14px auto 0 }
  /* ── этап ordered: гейты и счёт ── */
  .ord-panel { border:0; border-radius:var(--radius-card); background:var(--paper);
               box-shadow:var(--shadow-card); padding:22px 24px }
  .ord-panel h4 { margin:0 0 6px; font-family:var(--font-display); font-weight:700;
                  font-size:20px; letter-spacing:.1px }
  .ord-panel p { margin:0 0 10px; color:var(--muted); font-size:13px; line-height:1.55 }
  .ord-bad { color:var(--bad) !important }
  .ord-link { display:inline-block; margin-top:4px; font-size:12.5px; color:var(--accent); text-decoration:none }
  /* та же ссылка, но открывающая форму в панели, а не новую вкладку */
  .ord-linkbtn { display:inline-block; margin-top:4px; padding:0; border:0; background:none;
                 font:inherit; font-size:12.5px; color:var(--accent); text-decoration:underline; cursor:pointer }
  .ord-miss { margin:0 0 12px; padding-left:18px; color:var(--text); font-size:13px }
  .ord-miss li { margin:3px 0 }
  .ord-hint { margin:0 0 4px; color:var(--muted); font-size:12px; line-height:1.5 }
  .ord-note { margin:2px 0 12px; padding:10px 12px; border-radius:var(--radius-hit);
              background:var(--ink-faint); color:var(--ink-strong); font-size:12px; line-height:1.5 }
  .ord-rows { margin-top:16px; padding-top:10px; position:relative }
  .ord-rows::before { content:''; position:absolute; top:0; left:0; right:0; height:var(--rule-h);
                      background:var(--rule-src) center / 100% 100% no-repeat; opacity:.7 }
  .ord-row { display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:12.5px; color:var(--muted) }
  .ord-row b { color:var(--text); font-variant-numeric:tabular-nums }
  .ord-row.tot { margin-top:8px; padding-top:14px; font-size:14px;
                 font-variation-settings:var(--axis-active); color:var(--ink); position:relative }
  .ord-row.tot::before { content:''; position:absolute; top:0; left:0; right:0; height:var(--rule-h);
                         background:var(--rule-src) center / 100% 100% no-repeat; opacity:.7 }
  .ord-row.tot b { font-family:var(--font-script); font-weight:300; font-size:25px }
  .ord-inv { margin-top:14px; padding-top:14px; font-size:12px; color:var(--ink-muted); position:relative }
  .ord-inv::before { content:''; position:absolute; top:0; left:0; right:0; height:var(--rule-h);
                     background:var(--rule-src) center / 100% 100% no-repeat; opacity:.55 }
  /* Подзаголовок над блоком строк: экран первого пополнения показывает ДВА расчёта
     подряд — кампанию и сам платёж, — и без подписи они читались бы как один. */
  .ord-sub { margin:16px 0 -8px; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted) }
  .ord-row.sub { margin-top:6px; padding-top:10px; color:var(--ink-strong);
                 font-variation-settings:var(--axis-active) }
  /* Ответы на «а деньги-то мои?» — тремя короткими строками, а не абзацем: абзац
     под крупной суммой не читают. */
  .ord-why { margin:14px 0 6px; padding:0; list-style:none; font-size:12.5px; line-height:1.6; color:var(--muted) }
  .ord-why li { position:relative; padding-left:16px; margin:5px 0 }
  .ord-why li:before { content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:700 }