:root{
  --ink:#16202b; --ink-2:#39485a; --ink-3:#57667a;
  --line:#e2e7ee; --line-2:#cfd7e1;
  --bg:#eef1f5; --panel:#ffffff;
  --accent:#0b8f3c; --accent-2:#0bb648; --accent-soft:#e8f6ed;
  --warn:#b45309; --warn-soft:#fff5e6;
  --radius:10px;
  --doc-w:210mm;
  /* ПОЛЯ ДОКУМЕНТА — единственное место, где их задают.
     Отсюда их берут: макет на экране (padding листа), печатный лист
     (ширина и высота) и линейка внутри fitCover(). Менять только здесь…
     …и продублировать в @page: правило @page переменные не читает,
     поэтому те три числа внизу файла обязаны совпасть с этими. */
  /* РАЗМЕР ЛИСТА. Не 210×297: Chrome печатает не во весь бумажный лист, а внутрь
     своих полей, и лист «в размер бумаги» не влезает — после каждой страницы
     он доливает пустую. Поэтому лист = ОБЛАСТЬ ПЕЧАТИ, а видимые поля документа
     складываются из полей Chrome и небольшого padding ниже.
     Значения подбираются в панели, поля «Лист» — там же и запоминаются. */
  /* Канонические размеры листа A4 для печати из браузера (paper-css):
     ширина полная, высота 296 мм вместо 297 — Chrome не переносит хвост
     на пустую страницу. Работает вместе с `body{width:210mm}` в @media print. */
  --sheet-w:210mm; --sheet-h:295mm;
  --pad-t:10mm; --pad-l:11mm; --pad-r:11mm; --pad-b:4mm;
  --area-w:calc(var(--sheet-w) - var(--pad-l) - var(--pad-r));  /* полоса набора */
  --area-h:calc(var(--sheet-h) - var(--pad-t) - var(--pad-b));
  --font:'Montserrat','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:500 15px/1.5 var(--font);
  -webkit-font-smoothing:antialiased;
}
input,select,textarea,button{font-family:var(--font);font-weight:500}
/* документ: базовый вес на ступень выше обычного — текст мелкий, тонкий не читается */
.page{font-family:var(--font);font-weight:500}
.page .lbl,.page .cm-ttl,.page th{font-weight:700}

/* ---------- РАСКЛАДКА ---------- */
.app{display:grid;grid-template-columns:430px 510px 1fr;min-height:100vh;align-items:start}
.side,.side2{
  position:sticky;top:0;height:100vh;overflow-y:auto;
  background:var(--panel);border-right:1px solid var(--line);padding:18px 16px 60px
}
.side2{background:#f7f9fb}
.side2 h3.sec:first-child{margin-top:0}
.stage{padding:24px 24px 80px;display:flex;flex-direction:column;align-items:center;gap:18px}

/* масштаб макета */
.zoombar{position:fixed;top:14px;right:18px;z-index:20;display:flex;flex-direction:column;gap:5px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:9px;padding:6px;
  box-shadow:0 2px 10px rgba(20,32,45,.10)}
.zoombar .zrow{display:flex;align-items:center;gap:4px;justify-content:center}
.zoombar button{min-width:30px;height:28px;padding:0 8px;border-radius:6px;border:1px solid var(--line-2);
  background:#fff;cursor:pointer;font:inherit;font-size:13px;font-weight:700;color:var(--ink-2)}
.zoombar button:hover{border-color:var(--accent-2);color:var(--accent)}
.zoombar .val{min-width:46px;text-align:center;font-size:13px;font-weight:700;color:var(--ink)}
.zoombar .sep{width:1px;height:18px;background:var(--line);margin:0 3px}

/* ---------- ПАНЕЛЬ ---------- */
.brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.brand b{font-size:16px;letter-spacing:.2px}
.brand span{font-size:12px;color:var(--ink-3);display:block;font-weight:400}
h3.sec{
  font-size:12.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2);
  margin:22px 0 9px;font-weight:700
}
/* зоны панели: мягкая заливка, чтобы взгляд сразу отделял «кому» от «от кого» и т. д. */
.pane{border-radius:12px;padding:13px 14px 15px;margin-bottom:12px;border:1px solid rgba(20,32,45,.055)}
.pane h3.sec{margin-top:0}
.pane .field:last-child,.pane .hint:last-child,.pane p:last-child{margin-bottom:0}
.p1{background:#eef4fb}   /* кому */
.p2{background:#f5f1fa}   /* заголовок и вступление */
.p3{background:#edf6f0}   /* от кого */
.p4{background:#fdf6ec}   /* utm */
.p5{background:#f2f6ec}   /* деньги */
.p6{background:#f1f3f6}   /* что показывать */
.p7{background:#faf2f2}   /* сохранить состав */
.p8{background:#fff}      /* каталог */

/* ---------- ВЕРСИЯ 2: КАТАЛОГ В ОТДЕЛЬНОМ ОКНЕ ----------
   Каталог больше не занимает низ панели: там осталась кнопка вызова,
   а сам каталог открывается поверх интерфейса окном-полосой.
   Размер окна: 90 % ширины экрана × 50 % высоты — горизонтальный формат,
   в котором позиции внутри раздела идут в несколько колонок.
   `noprint` на оверлее: в @media print действует `.side,.noprint{display:none}` —
   на бумагу окно не попадёт даже открытым. */
.cat-open{                                  /* большая кнопка вызова каталога */
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 14px;border-radius:10px;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:#fff;
  font:inherit;font-size:16px;font-weight:700;letter-spacing:.2px;
  box-shadow:0 1px 4px rgba(20,32,45,.12)
}
.cat-open:hover{filter:brightness(1.08)}
.cat-open .n{font-size:13px;font-weight:600;opacity:.85}

.ovl{                                       /* затемнение вокруг окна */
  position:fixed;inset:0;z-index:60;background:rgba(20,32,45,.46);
  display:none;align-items:center;justify-content:center;padding:18px
}
.ovl.open{display:flex}
.modal{
  width:90vw;max-width:1900px;height:50vh;min-height:340px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:14px;
  box-shadow:0 20px 64px rgba(20,32,45,.30);
  display:flex;flex-direction:column;overflow:hidden
}
.modal-head{
  display:flex;align-items:center;gap:14px;flex-wrap:nowrap;
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel)
}
.modal-head b{font-size:16px;white-space:nowrap}
.modal-head .in-kp{font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap}
.modal-head .grow{flex:1}
.modal-head .msearch{flex:0 1 380px}
.modal-head .qwrap{position:relative}
.modal-head .msearch input{padding-right:38px;margin:0}
.modal-body{flex:1;overflow-y:auto;padding:6px 16px 20px;background:var(--panel)}
/* внутри окна раскрытый раздел выкладывает позиции колонками по ширине окна */
.modal-body .cat-group.open .cat-body{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:6px;align-items:start
}
/* строка позиции в колонке уже, чем в панели: убираем лишние внутренние отступы */
.modal-body .pos{align-content:start}
.mbtn{
  padding:10px 16px;border-radius:8px;border:1px solid var(--line-2);background:#fff;
  font:inherit;font-size:14.5px;font-weight:700;color:var(--ink-2);cursor:pointer;white-space:nowrap
}
.mbtn:hover{border-color:var(--accent-2);color:var(--accent)}
.mbtn.main{background:var(--accent);border-color:var(--accent);color:#fff}
.mbtn.main:hover{filter:brightness(1.08);color:#fff}
.mbtn.x{padding:8px 12px;font-size:17px;line-height:1}

/* ---------- ОКНО РАСЧЁТА МОНТАЖА И ВЫЕЗДА (версия 2) ----------
   Формулы и тарифы перенесены один в один с калькулятора gunstrainer.ru/calc,
   вид сделан под панель конструктора. Окно компактное — это форма из двух
   полей, а не список на 226 позиций, поэтому размеры свои. */
.cat-open.calc{background:#fff;color:var(--accent);border-color:var(--accent-2);margin-top:9px}
.cat-open.calc:hover{background:var(--accent-soft);filter:none}
.modal.calcbox{width:min(720px,94vw);height:auto;max-height:88vh}
.calc-body{padding:16px 18px 6px;overflow-y:auto}
.calc-body .field{margin-bottom:13px}
/* пояснения под полями — как в калькуляторе-источнике: мелкий текст, без плашки */
.calc-hint{font-size:12.5px;line-height:1.45;color:var(--ink-3);margin:5px 0 0}
.calc-rows{border-top:1px solid var(--line)}
.calc-rows .row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:9px 2px;border-bottom:1px solid var(--line);font-size:14px
}
.calc-rows .row .k{color:var(--ink-2);font-weight:600}
.calc-rows .row .k .sm{display:block;font-size:12px;font-weight:500;color:var(--ink-3);margin-top:2px}
.calc-rows .row .v{font-weight:700;white-space:nowrap}
.calc-rows .row .v.days{color:var(--accent)}
.calc-total{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 2px 4px;font-size:17px;font-weight:700
}
.calc-total .v{color:var(--accent);font-size:20px}
.calc-note{font-size:12px;line-height:1.45;color:var(--ink-3);margin:8px 0 4px}
.calc-foot{
  display:flex;align-items:center;gap:10px;justify-content:flex-end;
  padding:12px 18px;border-top:1px solid var(--line);background:var(--panel)
}
.calc-foot .grow{flex:1}
.calc-foot .added{font-size:13px;font-weight:700;color:var(--accent)}
.side2 .pane{background:#fff}
.field{margin-bottom:11px}
.field label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:4px;font-weight:600}
input[type=text],input[type=date],input[type=number],textarea,select{
  width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:8px;
  font:inherit;font-size:15px;font-weight:500;color:var(--ink);background:#fff
}
textarea{resize:vertical;min-height:76px;line-height:1.5}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent-2);outline-offset:-1px;border-color:transparent}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:9px}

/* Номер КП: «№» запечён в поле — это не текст, который можно стереть.
   Рамку рисует обёртка, сам input внутри без рамки и без своего фокуса. */
.num-row{display:grid;grid-template-columns:1fr auto;gap:6px}
.numfield{display:flex;align-items:center;border:1px solid var(--line-2);
  border-radius:8px;background:#fff;overflow:hidden;min-width:0}
.numfield:focus-within{outline:2px solid var(--accent-2);outline-offset:-1px;border-color:transparent}
.numfield .pfx{padding:0 1px 0 11px;font-size:15px;font-weight:700;color:var(--ink-2);
  user-select:none;flex:none}
.numfield input[type=text]{border:none;border-radius:0;background:transparent;
  padding:10px 10px 10px 5px;min-width:0}
.numfield input[type=text]:focus{outline:none;border-color:transparent}
.num-row .utm-btn{width:38px;height:40px}
.toggle{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:15px;color:var(--ink);cursor:pointer}
.toggle input{width:18px;height:18px;accent-color:var(--accent-2);cursor:pointer}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 16px;border-radius:8px;border:1px solid var(--line-2);background:#fff;
  font:inherit;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;width:100%
}
.btn:hover{border-color:var(--ink-3)}
.btn-main{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-main:hover{background:var(--accent-2);border-color:var(--accent-2)}
/* Ритм панели: между блоками всегда 12px, внутри блока действий — 8px.
   Кнопка «Вернуть последний состав» лежит ВНУТРИ .actions, поэтому отступ
   до первой зоны не скачет от того, показана она или спрятана. */
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.actions{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}

/* ---------- КАТАЛОГ ---------- */
.search{position:sticky;top:-18px;background:var(--panel);padding:8px 0 8px;z-index:5}
/* крестик очистки лежит ПОВЕРХ поля справа, поэтому полю нужен отступ под него */
.search .qwrap{position:relative}
.search input{padding-right:38px}
.qclr{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border:0;border-radius:50%;background:transparent;
  cursor:pointer;font-size:17px;line-height:1;color:var(--ink-3);display:none}
.qclr:hover{background:#eef1f5;color:var(--ink)}
.qwrap.has .qclr{display:block}   /* показываем, только когда есть что стирать */
.cat-group{margin-bottom:4px;border-top:1px solid var(--line)}
.cat-head{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:11px 2px;cursor:pointer;font-size:14.5px;font-weight:700;color:var(--ink)
}
.cat-head .cnt{font-size:12.5px;color:var(--ink-3);font-weight:700}
.cat-head .chev{transition:transform .15s;color:var(--ink-3);font-size:11px}
.cat-group.open .chev{transform:rotate(90deg)}
.cat-body{display:none;padding-bottom:8px}
.cat-group.open .cat-body{display:block}

.pos{display:grid;grid-template-columns:44px 1fr auto;gap:9px;align-items:center;
  padding:8px;border-radius:8px}
.pos-extra{grid-column:1/-1;display:grid;grid-template-columns:1fr 52px 96px auto;gap:7px;
  align-items:center;margin-top:3px}
.pos-extra + .pos-extra{margin-top:5px;padding-top:5px;border-top:1px dashed var(--line-2)}
.pos-extra select{padding:7px 8px;font-size:13px;border:1px solid var(--line-2);border-radius:6px;background:#fff}
.pos-extra .gft{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-2);
  white-space:nowrap;cursor:pointer;font-weight:600}
.pos-extra .gft input{width:16px;height:16px;accent-color:var(--accent-2);cursor:pointer}
.pos.on .pos-extra .gft.is-gift{color:var(--accent)}

/* состав КП: заголовок раздела и карточки под ним */
.cgroup{margin-bottom:14px}
.cghead{display:flex;align-items:center;gap:8px;background:var(--accent);color:#fff;
  border-radius:7px;padding:7px 11px;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}
.cghead .n{margin-left:auto;flex:none;white-space:nowrap;padding-left:12px;
  font-size:12px;opacity:.95;letter-spacing:0}
.cghead.plain{background:#e6ebf1;color:var(--ink-2)}

.crow{display:grid;grid-template-columns:44px 1fr auto;gap:9px;align-items:start;
  padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#fff}
.crow.is-gift{background:var(--accent-soft);border-color:#b7e2c6}
.crow img{width:44px;height:44px;object-fit:contain;border-radius:4px}
.crow .noimg{width:44px;height:44px;border-radius:4px;background:#f2f5f8}
.crow .cnm{font-size:13.5px;line-height:1.32;font-weight:600}
.crow .cbase{font-size:11.5px;color:var(--ink-3);margin-top:3px;font-weight:600}
.crow .cbase s{color:#8b97a6;font-weight:500}
.crow .cbtns{display:flex;flex-direction:column;gap:6px}
.crow .cdel,.crow .ccopy{width:34px;height:34px;border-radius:8px;background:#fff;cursor:pointer;
  font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center}
.crow .cdel{border:1px solid #edc9c4;color:#c0392b;font-size:17px}
.crow .cdel:hover{background:#c0392b;border-color:#c0392b;color:#fff}
.crow .ccopy{border:1px solid var(--line-2);color:var(--ink-2);font-size:15px}
.crow .ccopy:hover{border-color:var(--accent-2);color:var(--accent);background:var(--accent-soft)}
.crow .csel{grid-column:1/-1;margin-top:2px}
.crow .cctl{grid-column:1/-1;display:grid;
  grid-template-columns:60px 104px 1fr auto auto;gap:7px;align-items:center}
.crow select,.crow input[type=text],.crow .qty{
  padding:9px 10px;font-size:13.5px;border:1px solid var(--line-2);border-radius:7px;background:#fff;
  min-width:0;width:100%;font-family:var(--font);font-weight:500}
.crow .cctl button{width:36px;height:36px;border-radius:8px;border:1px solid var(--line-2);
  background:#fff;cursor:pointer;font-size:19px;line-height:1;color:var(--ink-2);
  display:flex;align-items:center;justify-content:center}
.crow .cctl button.copy{font-size:15px}
.crow .cctl button:hover:not(:disabled){border-color:var(--accent-2);color:var(--accent);background:var(--accent-soft)}
.crow .cctl button:disabled{opacity:.3;cursor:default}
.crow .gft{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);
  white-space:nowrap;cursor:pointer;font-weight:600;justify-content:center}
.crow .gft input{width:17px;height:17px;accent-color:var(--accent-2);cursor:pointer}

/* разделы КП */
.srow{display:grid;grid-template-columns:1fr auto auto auto;gap:5px;align-items:center;margin-bottom:6px}
.srow input{padding:8px 10px;font-size:14px;border:1px solid var(--line-2);border-radius:7px;background:#fff}
.srow button{width:30px;height:30px;border-radius:6px;border:1px solid var(--line-2);background:#fff;
  cursor:pointer;font-size:14px;line-height:1;color:var(--ink-2)}
.srow button:hover{border-color:var(--accent-2);color:var(--accent)}
.srow button.del:hover{border-color:#c0392b;color:#c0392b}
.sect-add{display:grid;grid-template-columns:1fr auto;gap:7px;margin-bottom:9px}
.sect-add .btn{width:auto;padding:10px 15px}
.sect-empty{font-size:13px;color:var(--ink-3);padding:6px 0 10px}
.pos-extra input{padding:7px 9px;font-size:13.5px;border:1px solid var(--line-2);border-radius:6px;background:#fff}
.pos-extra input::placeholder{color:#6e7d90}
.pos:hover{background:#f6f8fa}
.pos.on{background:var(--accent-soft)}
.pos img{width:44px;height:44px;object-fit:contain;border-radius:4px;background:#fff}
.pos .nm{font-size:14px;line-height:1.35;color:var(--ink);font-weight:500}
.pos .nm a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line-2)}
.pos .nm a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.pos .pr{font-size:13px;color:var(--ink-2);margin-top:3px;font-weight:600}
.pos .pr .conflict{color:var(--warn);cursor:help}
.pos .ctl{display:flex;flex-direction:column;align-items:center;gap:6px}
.qty{width:54px;padding:6px;text-align:center;font-size:14px;border:1px solid var(--line-2);border-radius:6px}
.add,.pos .rm{width:34px;height:34px;border-radius:8px;border:1px solid var(--line-2);background:#fff;
  cursor:pointer;font-size:18px;line-height:1;color:var(--ink-2);
  display:flex;align-items:center;justify-content:center}
.add:hover{border-color:var(--accent-2);color:var(--accent)}
.pos.on .add{background:var(--accent);border-color:var(--accent);color:#fff}
.pos .rm{border-color:#edc9c4;color:#c0392b;font-size:16px;font-weight:700}
.pos .rm:hover{background:#c0392b;border-color:#c0392b;color:#fff}

.hint{font-size:12.5px;line-height:1.45;color:var(--ink-3);margin:6px 0 0}
.utm-row{display:grid;grid-template-columns:1fr auto;gap:6px}
.utm-btn{width:40px;height:40px;border-radius:8px;border:1px solid var(--line-2);background:#fff;
  cursor:pointer;font-size:17px;line-height:1;color:var(--ink-2)}
.utm-btn:hover{border-color:var(--accent-2);color:var(--accent);background:var(--accent-soft)}
.utm-out{display:block;font-size:12px;color:var(--accent);margin-top:3px;font-weight:700;
  font-family:ui-monospace,Consolas,monospace;overflow-wrap:anywhere}
.utm-out i{color:var(--ink-3);font-style:normal;font-weight:500}
#utmPreview{background:#f2f5f8;border-radius:7px;padding:8px 10px;font-size:11.5px;
  font-family:ui-monospace,Consolas,monospace;color:var(--ink-2);overflow-wrap:anywhere}
.alert{
  background:var(--warn-soft);border:1px solid #f0d5a8;border-radius:8px;
  padding:9px 10px;font-size:11.8px;line-height:1.45;color:#7a4c07;margin:0 0 12px
}
.alert b{color:#5c3a05}

/* ---------- ДОКУМЕНТ ---------- */
/* Лист — РОВНО A4 и обрезает всё лишнее: страницы режет пагинатор, а не браузер,
   поэтому переполнение здесь означает ошибку раскладки, а не «перенесётся само». */
.page{
  width:var(--sheet-w);height:var(--sheet-h);background:#fff;color:#16202b;
  box-shadow:0 1px 3px rgba(20,32,45,.10),0 12px 32px rgba(20,32,45,.10);
  padding:var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
  position:relative;display:flex;flex-direction:column;overflow:hidden
}
/* flex:none обязателен: иначе flex сожмёт тело листа, и offsetHeight покажет
   меньше, чем содержимое на самом деле занимает — замер пагинатора соврёт */
.pbody{flex:none}
/* Три части в одну тонкую линию: компания слева, КП по центру, номер листа справа.
   nowrap обязателен — иначе длинное название компании ломает подвал на две строки
   и замер пагинатора, снятый до этого, окажется неверным. */
/* «Продолжение дальше» ставится ПОСЛЕ раскладки в пустой низ листа.
   margin-top:auto и у него, и у подвала — свободное место делится между ними,
   поэтому надпись оказывается ровно посередине пустоты, а не липнет к подвалу. */
.contd{margin-top:auto;text-align:center;color:#aab4c0;font-size:11px;
  letter-spacing:.04em;padding:3mm 0;font-weight:500;white-space:nowrap}
.contd i{font-style:normal;font-size:15px;line-height:1;color:#bcc5d0;
  vertical-align:-1px;margin:0 9px}
.pfoot{margin-top:auto;padding-top:5px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:10px;
  font-size:9.5px;color:#6e7d90;white-space:nowrap}
.pfoot .pkp{text-align:center}
.pfoot .pno{text-align:right}
.flow{position:absolute;left:-10000px;top:0;visibility:hidden}
.page + .page{margin-top:0}

/* титул */
.cover-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.cover-logo{height:26mm;width:auto;object-fit:contain}
.cover-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  text-align:right;font-size:13.5px;line-height:1.35;color:var(--ink);padding-top:2mm;font-weight:700}
.cover-meta .cm-ttl{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-3);margin-bottom:3px;font-weight:700}
.cover-meta .row{display:flex;align-items:center;gap:7px;justify-content:flex-end}
.cover-meta .ico{font-size:15px}

/* ссылки в документе */
.page a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(11,143,60,.35)}
.page a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* иконки */
.ico{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.14em}
.ico-a{color:var(--accent)}

/* блок контактов */
.contacts{margin-top:7mm;break-inside:avoid}
.cbox{border:1px solid var(--line);border-radius:10px;background:#fbfcfd;padding:12px 14px;
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:stretch}
/* Высоту блока задаёт колонка QR-кодов, а список контактов её просто не добирал.
   space-between раздаёт этот запас между строками — воздух получается бесплатно,
   блок от него не растёт. gap работает как минимум, если список окажется длиннее. */
.clist{display:flex;flex-direction:column;justify-content:space-between;
  gap:14px;font-size:13.5px;line-height:1.35}
.clist .row{display:flex;align-items:center;gap:9px}
.clist .row .ico{font-size:17px}
.clist .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);
  display:block;margin-bottom:2px;font-weight:700}
.clist .val{font-size:14.5px;font-weight:700}
.clist .val a{border-bottom-color:rgba(11,143,60,.5)}
.qrs{display:grid;grid-template-columns:repeat(2,auto);gap:9px 12px}
.qrs figure{margin:0;text-align:center;width:26mm}
.qrs .qr{display:block;width:26mm;height:26mm;border:1px solid var(--line);border-radius:5px;background:#fff}
.qrs figcaption{font-size:10.5px;color:var(--ink-2);margin-top:4px;line-height:1.25;
  overflow-wrap:anywhere;font-weight:600}
.cover-title{margin-top:26mm}
.kicker{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700}
.cover-title h1{font-size:34px;line-height:1.1;margin:8px 0 0;letter-spacing:-.4px}
.cover-title .sub{font-size:15px;color:#39485a;margin-top:10px;max-width:135mm;line-height:1.5}
.cover-for{
  margin-top:14mm;border-left:3px solid var(--accent);padding:2px 0 2px 12px
}
.cover-for .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:700}
.cover-for .val{font-size:19px;font-weight:700;margin-top:3px}
.cover-for .val2{font-size:13px;color:#39485a;margin-top:3px}
/* Преимущества переехали с титульника в конец документа: там обычный блок
   в потоке, а не прижатый к низу листа — поэтому margin-top:auto убран. */
.adv{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:6mm}
.adv .card{border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:#fbfcfd;
  display:grid;grid-template-columns:auto 1fr;gap:9px}
.adv .card .ico{font-size:20px;margin-top:1px}
.adv .card b{display:block;font-size:12.5px;margin-bottom:3px}
.adv .card span{font-size:12.2px;color:#39485a;line-height:1.45}
.cover-foot{margin-top:9mm;padding-top:7px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;font-size:10.5px;color:#57667a}

/* Тематический фон титульника: мишенные круги из правого верхнего угла,
   доходят примерно до середины листа и тают к низу. Это ФОН, а не элемент:
   на раскладку и замеры пагинатора он не влияет вообще, а печатается
   благодаря общему print-color-adjust:exact. */
.page.slim{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201000%201000%27%3E%3Cg%20fill=%27none%27%20stroke=%27rgb(11,143,60)%27%20stroke-linecap=%27round%27%3E%3Ccircle%20cx=%271000%27%20cy=%270%27%20r=%2790%27%20stroke-opacity=%270.170%27%20stroke-width=%274.0%27/%3E%3Ccircle%20cx=%271000%27%20cy=%270%27%20r=%27200%27%20stroke-opacity=%270.153%27%20stroke-width=%273.0%27/%3E%3Ccircle%20cx=%271000%27%20cy=%270%27%20r=%27320%27%20stroke-opacity=%270.136%27%20stroke-width=%274.0%27/%3E%3Ccircle%20cx=%271000%27%20cy=%270%27%20r=%27450%27%20stroke-opacity=%270.119%27%20stroke-width=%273.0%27/%3E%3Ccircle%20cx=%271000%27%20cy=%270%27%20r=%27590%27%20stroke-opacity=%270.102%27%20stroke-width=%274.0%27/%3E%3Ccircle%20cx=%271000%27%20cy=%270%27%20r=%27740%27%20stroke-opacity=%270.085%27%20stroke-width=%273.0%27/%3E%3Ccircle%20cx=%271000%27%20cy=%270%27%20r=%27900%27%20stroke-opacity=%270.068%27%20stroke-width=%274.0%27/%3E%3Cline%20x1=%27954%27%20y1=%270%27%20x2=%27954%27%20y2=%2715%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27985%27%20y1=%2746%27%20x2=%271000%27%20y2=%2746%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27908%27%20y1=%270%27%20x2=%27908%27%20y2=%2715%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27985%27%20y1=%2792%27%20x2=%271000%27%20y2=%2792%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27862%27%20y1=%270%27%20x2=%27862%27%20y2=%2726%27%20stroke-opacity=%270.14%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27974%27%20y1=%27138%27%20x2=%271000%27%20y2=%27138%27%20stroke-opacity=%270.14%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27816%27%20y1=%270%27%20x2=%27816%27%20y2=%2715%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27985%27%20y1=%27184%27%20x2=%271000%27%20y2=%27184%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27770%27%20y1=%270%27%20x2=%27770%27%20y2=%2715%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27985%27%20y1=%27230%27%20x2=%271000%27%20y2=%27230%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27724%27%20y1=%270%27%20x2=%27724%27%20y2=%2726%27%20stroke-opacity=%270.14%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27974%27%20y1=%27276%27%20x2=%271000%27%20y2=%27276%27%20stroke-opacity=%270.14%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27678%27%20y1=%270%27%20x2=%27678%27%20y2=%2715%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27985%27%20y1=%27322%27%20x2=%271000%27%20y2=%27322%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27632%27%20y1=%270%27%20x2=%27632%27%20y2=%2715%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27985%27%20y1=%27368%27%20x2=%271000%27%20y2=%27368%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27586%27%20y1=%270%27%20x2=%27586%27%20y2=%2726%27%20stroke-opacity=%270.14%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27974%27%20y1=%27414%27%20x2=%271000%27%20y2=%27414%27%20stroke-opacity=%270.14%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27540%27%20y1=%270%27%20x2=%27540%27%20y2=%2715%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27985%27%20y1=%27460%27%20x2=%271000%27%20y2=%27460%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27494%27%20y1=%270%27%20x2=%27494%27%20y2=%2715%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27985%27%20y1=%27506%27%20x2=%271000%27%20y2=%27506%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27448%27%20y1=%270%27%20x2=%27448%27%20y2=%2726%27%20stroke-opacity=%270.14%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27974%27%20y1=%27552%27%20x2=%271000%27%20y2=%27552%27%20stroke-opacity=%270.14%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27402%27%20y1=%270%27%20x2=%27402%27%20y2=%2715%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27985%27%20y1=%27598%27%20x2=%271000%27%20y2=%27598%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27356%27%20y1=%270%27%20x2=%27356%27%20y2=%2715%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27985%27%20y1=%27644%27%20x2=%271000%27%20y2=%27644%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27310%27%20y1=%270%27%20x2=%27310%27%20y2=%2726%27%20stroke-opacity=%270.14%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27974%27%20y1=%27690%27%20x2=%271000%27%20y2=%27690%27%20stroke-opacity=%270.14%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27264%27%20y1=%270%27%20x2=%27264%27%20y2=%2715%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27985%27%20y1=%27736%27%20x2=%271000%27%20y2=%27736%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27218%27%20y1=%270%27%20x2=%27218%27%20y2=%2715%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27985%27%20y1=%27782%27%20x2=%271000%27%20y2=%27782%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27172%27%20y1=%270%27%20x2=%27172%27%20y2=%2726%27%20stroke-opacity=%270.14%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27974%27%20y1=%27828%27%20x2=%271000%27%20y2=%27828%27%20stroke-opacity=%270.14%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27126%27%20y1=%270%27%20x2=%27126%27%20y2=%2715%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27985%27%20y1=%27874%27%20x2=%271000%27%20y2=%27874%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%2780%27%20y1=%270%27%20x2=%2780%27%20y2=%2715%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27985%27%20y1=%27920%27%20x2=%271000%27%20y2=%27920%27%20stroke-opacity=%270.11%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27837%27%20y1=%27163%27%20x2=%27385%27%20y2=%27615%27%20stroke-opacity=%270.1%27%20stroke-width=%273.0%27/%3E%3Cline%20x1=%27364%27%20y1=%27636%27%20x2=%27406%27%20y2=%27594%27%20stroke-opacity=%270.1%27%20stroke-width=%273.4%27/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right top;
  background-size:200mm 200mm;
}

/* Титульник с контактами и реквизитами внизу: воздуха меньше, иначе блоки
   не помещаются на лист. Числа подобраны по высоте, вживую проверяет печать. */
/* Воздух сверху отдан блоку контактов — QR на титульнике КРУПНЕЕ обычных 26 мм.
   Верхняя часть листа поджата ровно настолько, сколько забрали QR. */
.page.slim .cover-title{margin-top:6mm}
.page.slim .cover-for{margin-top:5mm}
/* На титульнике теперь стоит блок доверия — он и прижимается к низу листа,
   и он же поджимается ступенями, если титульник переполняется. */
.page.slim .trust{margin-top:auto;padding-top:6mm}
.page.slim.fit1 .trust{padding-top:4mm}
.page.slim.fit2 .tgrid{gap:6px}
.page.slim.fit2 .trust .tcard b{font-size:24px}
.page.slim.fit3 .trust .tcard b{font-size:21px}
.page.slim.fit4 .trust .tcard b{font-size:19px}
.page.slim .contacts{margin-top:5mm}
.page.slim .reqs{margin-top:5mm}
.page.slim .pfoot{margin-top:auto;padding-top:5px}
.page.slim .clist{gap:14px}
/* карточки преимуществ отдают высоту блоку контактов — текст тот же, воздуха меньше */
.page.slim .adv{gap:7px}
.page.slim .adv .card{padding:8px 11px;gap:8px}
.page.slim .adv .card .ico{font-size:18px}
.page.slim .adv .card b{font-size:12px;margin-bottom:2px}
.page.slim .adv .card span{font-size:11.6px;line-height:1.4}
.page.slim .cover-title .sub{margin-top:7px;font-size:14.5px}
.page.slim .reqs .rgrid{gap:6px 18px;line-height:1.5}

/* Ступени поджатия титульника. Включает их fitCover() — по ЗАМЕРУ высоты
   в браузере, а не по моей прикидке в миллиметрах, которая уже один раз соврала.
   Ступени накапливаются: fit1 → fit1+fit2 → fit1+fit2+fit3. */
/* Ступени НЕ трогают padding листа: на печати поля задаёт @page, padding там ноль,
   и такая экономия существовала бы только на экране — замер разошёлся бы с бумагой. */
.page.slim.fit1 .cover-logo{height:20mm}
.page.slim.fit1 .cover-title{margin-top:4mm}
.page.slim.fit1 .cover-for{margin-top:4mm}
.page.slim.fit1 .adv{padding-top:3mm}
.page.slim.fit1 .contacts{margin-top:4mm}
.page.slim.fit1 .reqs{margin-top:4mm}

.page.slim.fit2 .cover-for{margin-top:3mm}
.page.slim.fit2 .clist{gap:8px}
.page.slim.fit2 .qrs figure{width:31mm}
.page.slim.fit2 .qrs .qr{width:29mm;height:29mm}
.page.slim.fit2 .reqs .rgrid{font-size:10.8px;line-height:1.45}

.page.slim.fit3 .cover-title h1{font-size:29px}
.page.slim.fit3 .cover-title .sub{font-size:13.5px;margin-top:5px}
.page.slim.fit3 .adv .card span{font-size:11.2px}
.page.slim.fit3 .qrs figure{width:28mm}
.page.slim.fit3 .qrs .qr{width:26mm;height:26mm}

/* Последняя ступень — если и её не хватило, страница честно говорит об этом */
.page.slim.fit4 .cover-logo{height:17mm}
.page.slim.fit4 .cover-title h1{font-size:26px}
.page.slim.fit4 .adv .card{padding:6px 10px}
.page.slim.fit4 .clist{gap:6px}
.page.slim.fit4 .qrs figure{width:25mm}
.page.slim.fit4 .qrs .qr{width:23mm;height:23mm}
.page.slim.fit4 .reqs{margin-top:3mm;padding-top:6px}
/* Клетка шире самого кода: иначе подпись «sportshooting.ru» рвётся на две строки */
.page.slim .qrs{gap:8px 10px}
.page.slim .qrs figure{width:34mm}
.page.slim .qrs .qr{width:32mm;height:32mm;margin:0 auto}
.page.slim .qrs figcaption{font-size:10.5px;margin-top:4px}

/* обычная страница */
/* Колонтитул повторяется на каждом листе, поэтому он должен быть узкой полоской,
   а не блоком: логотип 9 мм вместо 14, отбивка снизу 5 мм вместо 10. */
.doc-head{display:flex;justify-content:space-between;align-items:center;
  padding-bottom:4px;border-bottom:1px solid var(--line);margin-bottom:5mm}
.doc-head img{height:9mm;width:auto;object-fit:contain}
.doc-head .rt{font-size:9.5px;color:#57667a;text-align:right;line-height:1.45}

h2.grp{
  display:flex;align-items:center;gap:8px;
  font-size:12px;text-transform:uppercase;letter-spacing:.09em;
  color:#fff;background:var(--accent);border-radius:7px;
  margin:0 0 9px;font-weight:700;padding:7px 12px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
  break-after:avoid;page-break-after:avoid
}
h2.grp .ico{font-size:16px;color:#fff}
/* Отбивку даёт САМА таблица, а не связка «заголовок + таблица».
   У таблицы-продолжения на следующем листе заголовка нет, и правило
   `h2.grp + .tbl` до неё не доставало — разделы слипались. */
.tbl{margin-bottom:12mm}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{
  text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:#57667a;font-weight:700;padding:0 7px 6px;border-bottom:1px solid var(--line)
}
.tbl th.num,.tbl td.num{text-align:right;white-space:nowrap}
.tbl th.ctr,.tbl td.ctr{text-align:center;white-space:nowrap}
.tbl td{padding:9px 7px;border-bottom:1px solid #f0f3f7;vertical-align:middle}
.tbl td.num{font-size:13.5px;font-weight:600}
.tbl td.num b{font-size:14px;font-weight:700}
.tbl td.ctr{font-size:13.5px;font-weight:600}
.tbl tr{break-inside:avoid;page-break-inside:avoid}
.tbl .idx{color:#6e7d90;font-size:12px;width:8mm}
.tbl .ph{width:23mm;text-align:center}
.tbl .ph img{width:21mm;height:21mm;object-fit:contain;background:#fff;border-radius:4px;
  display:block;margin:0 auto;vertical-align:middle}
.tbl .nm{font-weight:700;line-height:1.35;font-size:13px}
/* название кликабельно, но выглядит как обычный текст — подчёркивание в КП лишнее */
.tbl .nm a{color:inherit;border-bottom:none;text-decoration:none}
.tbl .nm a:hover{color:var(--accent)}
.tbl .ds{font-size:11.5px;color:#39485a;margin-top:4px;line-height:1.4;white-space:pre-line}
.tbl .tag{display:inline-block;font-size:10.5px;padding:2px 7px;border-radius:99px;
  background:var(--accent-soft);color:var(--accent);margin-top:4px;font-weight:700}
.tbl .gift{color:var(--accent);font-weight:700}
/* цена ниже прайса: слева зелёная плашка со скидкой, справа зачёркнутая прайсовая */
.tbl .old{text-decoration:line-through;color:#8b97a6;font-size:11.5px;font-weight:500;margin-bottom:1px}
.tbl .dsc{display:inline-block;font-size:10px;font-weight:700;color:#fff;background:var(--accent);
  border-radius:99px;padding:1px 6px;margin-right:6px;vertical-align:1px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.tbl .sub td{border-bottom:none;border-top:1px solid var(--line-2);
  padding-top:7px;font-size:12.5px;color:#39485a;font-weight:600}
.tbl .sub td b{font-size:14px;color:var(--ink);font-weight:700}

.totwrap{break-inside:avoid;page-break-inside:avoid}
/* Пара «итоги + подпись» (версия 2, 06.09): подпись с печатью не должна уезжать
   на отдельный лист без суммы. Обёртка ничего не рисует и не добавляет отступов —
   она нужна только пагинатору, который переносит блоки потока целиком. */
.paypair{display:block;break-inside:avoid;page-break-inside:avoid}
.totals{margin-top:6mm;margin-left:auto;width:96mm;font-size:13.5px}
.totals div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid #f0f3f7}
.totals .fin{border-bottom:none;border-top:2px solid var(--ink);margin-top:4px;padding-top:9px;
  font-size:18px;font-weight:700}
.totals .disc{color:var(--accent)}
.words{margin-top:7px;font-size:11.5px;color:#39485a;text-align:right;font-style:italic}

/* блок доверия: цифры и оценка */
.trust{margin-top:6mm;break-inside:avoid}
.trust .tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.trust .tcard{border:1px solid var(--line);border-radius:9px;padding:11px 12px;background:#fbfcfd;
  display:flex;flex-direction:column;gap:4px;break-inside:avoid}
.trust .tcard b{font-size:28px;line-height:1;letter-spacing:-.8px;color:var(--accent)}
.trust .tcard span{font-size:10.5px;line-height:1.35;color:#39485a}
.trust .tcard .stars{color:#e8a317;font-size:14px;letter-spacing:1px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.trust .src{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.trust .rbtn{display:inline-block;font-size:9px;font-weight:700;padding:2px 6px;border-radius:99px;
  border:1px solid;background:#fff;text-decoration:none;white-space:nowrap}
.trust .rbtn:hover{filter:brightness(.85)}
.trust .more{margin-top:8px;font-size:10.5px;color:#39485a;display:flex;align-items:center;gap:8px}
.trust .tbtn{display:inline-block;padding:5px 13px;border-radius:99px;background:var(--accent);
  color:#fff;font-size:10.5px;font-weight:700;text-decoration:none;border:none;white-space:nowrap;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.trust .tbtn:hover{background:var(--accent-2);color:#fff}

.terms{margin-top:6mm}
.terms .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.terms .box{border:1px solid var(--line);border-radius:9px;padding:11px 13px;background:#fbfcfd;break-inside:avoid}
.terms .box b{display:flex;align-items:center;gap:7px;font-size:11.5px;margin-bottom:5px;color:var(--ink)}
.terms .box b .ico{font-size:16px}
.terms .box ul{margin:0;padding-left:15px}
.terms .box li{font-size:11.8px;line-height:1.55;color:#39485a;margin-bottom:3px}

.sign{margin-top:4mm;padding-top:4mm;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;break-inside:avoid}
.sign .who{font-size:11.5px;line-height:1.6}
.sign .who b{display:block;font-size:12.5px}
/* печать — крупная, подпись — мелкая, поверх линии */
.sign .stamp{position:relative;flex:none;width:74mm;height:44mm;margin-top:-4mm}
.sign .stamp img.st{position:absolute;right:0;bottom:3mm;height:40mm;width:auto;opacity:.85;z-index:1}
.sign .stamp img.sg{position:absolute;right:26mm;bottom:6mm;height:12mm;width:auto;z-index:2}
.sign .line{position:absolute;left:6mm;right:0;bottom:0;border-top:1px solid var(--ink-3);
  padding-top:4px;font-size:10px;color:#57667a;text-align:center;z-index:3}
.reqs{margin-top:6mm;padding-top:9px;border-top:2px solid var(--accent-soft);break-inside:avoid}
.reqs .rname{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.2px;margin-bottom:6px}
.reqs .rname{display:flex;align-items:center;gap:8px}
.reqs .rname .ico{font-size:18px}
.reqs .rgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;
  font-size:11.4px;line-height:1.6;color:#39485a}
.reqs .rgrid .r{display:grid;grid-template-columns:auto 1fr;gap:7px;align-items:start}
.reqs .rgrid .r.noico{grid-template-columns:1fr}   /* строка без иконки — ИНН/КПП/ОГРН */
.reqs .rgrid .ico{font-size:14px;margin-top:2px;color:#6e7d90}
.reqs .rgrid b{color:var(--ink);font-weight:700}

.pgnum{position:absolute;bottom:8mm;right:15mm;font-size:9.5px;color:#6e7d90}
.empty{color:#6e7d90;text-align:center;padding:40mm 0;font-size:13px}

/* ---------- ПЕЧАТЬ ----------
   ПОЛЯ ЗАДАЁТ @page, А НЕ padding ЛИСТА. Так было наоборот, и из-за этого
   поля на бумаге отличались от макета: лист с таблицами — ОДИН блок .page,
   который браузер сам режет на страницы, а padding применяется только к началу
   первого куска и концу последнего. Второй и третий листы шли вообще без верхнего
   поля — таблица начиналась у самого края. Поля страницы этой болезнью не болеют:
   их получает каждый лист, включая продолжения. */
/* Поля НЕ задаются через @page: их даёт padding самого листа, а листы теперь
   настоящие — по одному на страницу. Поэтому @page обнулён, и что видно
   в макете, то и печатается: одинаковые поля на КАЖДОМ листе, включая
   продолжения таблицы, и никакого масштабирования «по месту». */
@page{size:A4;margin:0}
@media print{
  /* Без этого Chrome печатает фоны белыми, а бледные цвета «подгоняет» под
     читаемость и делает темнее. Раньше разрешение стояло точечно — только
     на зелёных плашках, поэтому печатались они одни. Теперь на всём документе,
     и печать совпадает с макетом независимо от галки «Фон» в диалоге. */
  .page,.page *{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important
  }
  /* ЛЕЧЕНИЕ БАГА CHROMIUM #273306 — то, чего не хватало.
     Без явной ширины бумаги у body Chrome считает ширину раскладки по-своему
     и разносит лист по двум страницам. Строка взята из библиотеки paper-css,
     которая ровно для A4-печати и сделана; там же и высота 296 мм вместо 297. */
  body{background:#fff;width:210mm;margin:0}
  /* ПРИЧИНА ПУСТОЙ СТРАНИЦЫ В КОНЦЕ: у .app стоит min-height:100vh (чтобы панель
     на экране была во всю высоту окна). При печати 100vh = высота страницы,
     и контейнер требует эту высоту СВЕРХ уже разложенных листов — браузер
     дорисовывает пустой лист. Сбрасываем высоты на auto именно в печати. */
  html,body{height:auto}
  .side,.noprint{display:none !important}
  /* display:contents убирает у обёрток СОБСТВЕННУЮ коробку: листы становятся
     прямыми детьми body. Ни высота, ни отступы, ни min-height контейнеров
     больше не могут добавить лишнюю страницу — добавлять их просто некому. */
  .app,.stage{display:contents}
  .stage{zoom:1 !important}   /* масштаб предпросмотра — только для экрана */
  /* ПРОВЕРЕНО НА ПЕЧАТИ: принудительный разрыв (`page-break-after:always`)
     здесь ЛОМАЕТ раскладку — титульник разрезается, подвал уезжает на след.
     страницу. Работает только запрет рвать лист внутри: каждый лист ниже
     страницы, два подряд не помещаются, поэтому следующий переходит сам. */
  .page{
    width:var(--sheet-w);height:var(--sheet-h);box-shadow:none;margin:0;
    break-inside:avoid;page-break-inside:avoid
  }
}
@media (max-width:1500px){
  .app{grid-template-columns:1fr 1fr}
  .zoombar{top:auto;bottom:14px}
}
@media (max-width:1100px){
  .app{grid-template-columns:1fr}
  .side,.side2{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line)}
  .stage{padding:16px 8px 60px}
  /* Лист НЕ растягиваем под узкое окно: пагинатор мерит именно его,
     и «резиновый» лист дал бы разбивку, не совпадающую с печатью.
     В узком окне лист просто уменьшается масштабом. */
}