/* ── быстрый экран: объявление слева, настройки кампании справа ──
     Отдельная сетка поверх .ad-panel, а не свой экран с нуля: поля объявления,
     превью и кнопки те же самые, отличается только то, что рядом с ними стоит
     колонка настроек вместо отдельного шага «Расчёт». */
  .q-side { border:0; border-radius:var(--radius-card); background:transparent; overflow:hidden;
            position:sticky; top:0 }
  .q-side .calc-sec { padding:12px 14px }
  .q-top { display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--border) }
  .q-top b { font-family:var(--font-display); font-weight:700; font-size:17px; flex:1 }
  .q-sub { font-size:11px; color:var(--muted); line-height:1.4; margin-top:7px }
  /* ── смета настроек ──────────────────────────────────────────────────────
     Настройки читаются как счёт: за что · почём за штуку · сколько вышло.
     Ставка стоит в одной строке с ручкой, которая её меняет: иначе связь
     «покрутил → подорожало» приходится ловить глазами через весь блок.

     Денежные строки и расписание разделены намеренно. У срока и старта цены
     нет, и пока они стояли в общем списке, колонка «Цена» была то ценой, то
     комментарием («дней из 60», «3 дн. на модерацию») — то есть врала. */
  .q-bill, .q-when { display:flex; flex-direction:column }
  .q-bhead { display:none }                 /* шапка колонок — только в широком виде */
  .q-brow, .q-wrow { display:grid; grid-template-columns:1fr auto; align-items:center;
                     gap:5px 14px; padding:9px 0 }
  .q-brow + .q-brow, .q-wrow + .q-wrow { box-shadow:inset 0 1px 0 rgb(0 0 0 / .06) }
  .q-brow .k, .q-wrow .k { font-size:var(--fs-fact); color:var(--ink-muted) }
  /* Формула «400 чел. × 1 показ/день × 10 дн.» висит под своей строкой: это
     не отдельный факт, а расшифровка того, откуда взялось число показов. */
  .q-brow .k small { display:block; margin-top:4px; font-size:11.5px;
                     font-variation-settings:var(--axis-small); color:var(--ink-muted) }
  .q-brow .ctl, .q-wrow .ctl { justify-self:end }
  .q-brow .rate, .q-brow .sum, .q-wrow .note {
    font-size:11.5px; line-height:1.35; color:var(--ink-muted);
    font-variation-settings:var(--axis-small) }
  .q-brow .rate b, .q-brow .sum b { display:block; font-size:var(--fs-fact);
    color:var(--ink-strong); font-variation-settings:var(--axis-active); font-weight:400;
    font-variant-numeric:tabular-nums }
  /* Формула «N чел. × K показов/день × D дн.» объясняет не подпись строки, а
     число справа: откуда взялись показы. Поэтому стоит под ним. */
  .q-brow .sum small { display:block; margin:2px 0 3px; font-size:11px; opacity:.85 }
  /* Текстовое поле аудитории шире числового: семизначное число с разделителями. */
  .q-side #qUsers { width:7.6em }
  /* Расписание — не статья расхода, поэтому оно отбито от денег пустотой,
     а не ещё одной линией: линий в кабинете и так одна. */
  .q-when { margin-top:12px }
  .q-total { display:grid; grid-template-columns:1fr auto; align-items:baseline;
             margin-top:18px; padding-top:20px; position:relative }
  .q-total::before { content:''; position:absolute; top:0; left:0; right:0; height:var(--rule-h);
                     background:var(--rule-src) center / 100% 100% no-repeat; opacity:.8 }
  .q-total .k { font-size:17px; font-variation-settings:var(--axis-active) }
  .q-total .v { font-family:var(--font-display); font-weight:700; font-size:34px; line-height:1;
                color:var(--ink); font-variant-numeric:tabular-nums }

  /* Контролы сметы: глубина вместо рамок, как везде в кабинете. Область
     скоупим на .q-side — те же .seg живут ещё в панели расчёта. */
  .q-side .seg { display:inline-flex; gap:7px; flex-wrap:wrap; border:0; border-radius:0; overflow:visible }
  .q-side .seg button { flex:0 0 auto; border:0; border-radius:var(--radius-chip);
    padding:6px 13px 8px; background:var(--paper); box-shadow:var(--shadow-chip);
    font:inherit; font-size:var(--fs-fact); color:var(--ink-strong); cursor:pointer;
    display:flex; flex-direction:column; align-items:center; line-height:1.25 }
  .q-side .seg button + button { border-left:0 }
  .q-side .seg button small { display:block; opacity:1; font-size:11px; color:var(--ink-muted);
                              font-variation-settings:var(--axis-small) }
  .q-side .seg button.sel { background:var(--ink); color:var(--paper); box-shadow:none;
                            font-variation-settings:var(--axis-active) }
  .q-side .seg button.sel small { color:rgb(255 255 255 / .62) }
  .q-side #segImpr button { min-width:36px; justify-content:center }
  .q-side #qUsers, .q-side input[type=number], .q-side input[type=date] {
    border:0; border-radius:var(--radius-chip); padding:6px 14px 8px;
    background:var(--paper); box-shadow:var(--shadow-field);
    font:inherit; font-size:var(--fs-fact); font-variation-settings:var(--axis-active);
    color:var(--ink-strong); text-align:center; color-scheme:light;
    font-variant-numeric:tabular-nums; -moz-appearance:textfield }
  .q-side input[type=number] { width:6.4em }
  .q-side input[type=number]::-webkit-outer-spin-button,
  .q-side input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0 }
  .q-side input[type=date]::-webkit-calendar-picker-indicator { opacity:.45; cursor:pointer }
  /* Дата и точный срок образуют один период: две одинаковые ручки рядом вместо
     двух растянутых строк, одна из которых раньше была приблизительным ползунком. */
  .q-period { display:flex; align-items:flex-end; justify-content:flex-end; gap:14px }
  .q-period-part { display:flex; flex-direction:column; align-items:flex-start; gap:6px }
  .q-period-cap { font-size:10.5px; color:var(--ink-muted);
                  font-variation-settings:var(--axis-small); white-space:nowrap }
  .q-days { display:flex; align-items:center; gap:7px; color:var(--ink-muted);
            font-size:12px; font-variation-settings:var(--axis-small) }
  .q-days #cDays { width:72px }
  @media (max-width:1100px) { .q-side { position:static } }
  /* ── панель-конструктор (артефакт справа) ── */
  .constructor { display:none; flex:1 1 0; min-width:0; flex-direction:column; background:var(--bg); border-left:1px solid var(--border) }
  .constructor.open { display:flex }
  .app.paneled .main { flex:0 0 clamp(340px, 40%, 560px) }   /* чат сужается, панель занимает остальное */
  .cn-head { display:flex; align-items:center; gap:8px; padding:11px 16px; border-bottom:1px solid var(--border) }
  .cn-steps { display:flex; gap:3px; flex:1; flex-wrap:wrap; min-width:0 }
  .cn-step { border:0; background:transparent; font:inherit; font-size:13px; font-weight:600; color:var(--muted);
             padding:6px 11px 6px 7px; border-radius:9px; cursor:pointer; display:inline-flex; align-items:center; gap:7px }
  .cn-step:hover { background:var(--panel) }
  .cn-step.active { color:var(--text) }
  .cn-step .num { width:19px; height:19px; border-radius:50%; background:var(--ink-faint); color:var(--muted);
                  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700 }
  .cn-step.active .num { background:var(--ink); color:var(--paper) }
  /* индикатор автосохранения: кнопки «Сохранить» нет, поэтому состояние записи
     обязано быть видно — иначе непонятно, доехала правка или нет */
  .cn-save { flex:0 0 auto; font-size:11px; color:var(--muted); white-space:nowrap }
  .cn-save.error { color:#b93b2f }
  .cn-retry { border:0; background:none; padding:0 0 0 5px; font:inherit; font-size:11px;
              color:var(--accent); cursor:pointer; text-decoration:underline }
  .cn-x { flex:0 0 auto; border:0; background:transparent; font-size:22px; line-height:1; color:var(--muted); cursor:pointer; padding:2px 7px; border-radius:8px }
  .cn-x:hover { background:var(--panel); color:var(--text) }
  .cn-body { flex:1; overflow-y:auto; padding:20px 22px; max-width:920px; width:100%; margin:0 auto; box-sizing:border-box }
  .cn-steps { align-items:center }
  .cn-ico { font-size:16px; margin-right:7px } .cn-title { font-size:14px; font-weight:700; color:var(--text) }
  @media (max-width:900px) {
    .constructor { position:fixed; inset:0; z-index:30; border-left:0 }
    .app.paneled .main { flex:1 }
  }
  @media (max-width:640px) { .sidebar { width:210px; flex-basis:210px }
    .interest-col + .interest-col { border-left:0; border-top:1px solid var(--border) } }