/* К-247 — кабинет. Фирменная пара: жёлтый + графит, акцент переключается (12 схем).
   Шрифты: Wix Madefor Display 500 / Wix Madefor Text 400. Easing: cubic-bezier(.22,1,.36,1) */

:root {
  --brand: #2F5BA8;
  --accent: #2F5BA8;
  --on-accent: #FFFFFF;
  /* что пишем поверх фирменного синего и поверх серой секционной полосы */
  --on-brand: #FFFFFF;
  --brand-lift: color-mix(in srgb, var(--brand) 40%, #FFFFFF);
  --on-bar: #FFFFFF;
  --ink: #23221F;
  --graphite: #404040;
  --paper: #EFEDE8;
  --surface: #FFFFFF;
  --surface-2: #F1F2F1;
  --line: rgba(35, 34, 31, 0.14);
  --line-strong: rgba(35, 34, 31, 0.28);
  --ok: #2E7D32;
  --warn: #C7521A;
  /* служебные цвета с макетов — темой не меняются */
  --accepted: #00FF00;
  --returned: #FAE4D5;
  --rejected: #F8CAAC;
  --selected: #DCE6F7;
  --alert: #FF0000;
  --sectionbar: #7E7F7E;
  --th-bg: #D8D9D8;
  --e: cubic-bezier(.22, 1, .36, 1);
  --r-panel: 14px;
  --r-win: 18px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 18px; --s5: 28px; --s6: 44px;
}

/* 12 схем с макета «Выбор цвета» (K_07–K_18). Схема красит и акценты, и верхнюю ленту:
   --brand это заливка ленты, --on-brand текст на ней, --on-bar текст на серой полосе. */
[data-accent="1"]  { --accent: #FFFF00; --on-accent: #000000; --brand: #FFFF00; --on-brand: #000000; --on-bar: #FFFF00; }
[data-accent="2"]  { --accent: #FFC000; --on-accent: #000000; --brand: #FFC000; --on-brand: #000000; }
[data-accent="3"]  { --accent: #1CA4DB; --on-accent: #000000; --brand: #1CA4DB; --on-brand: #000000; }
[data-accent="4"]  { --accent: #2F5BA8; --on-accent: #FFFFFF; --brand: #2F5BA8; --on-brand: #FFFFFF; }
[data-accent="5"]  { --accent: #FF46B8; --on-accent: #000000; --brand: #FF46B8; --on-brand: #000000; }
[data-accent="6"]  { --accent: #E70079; --on-accent: #FFFFFF; --brand: #E70079; --on-brand: #FFFFFF; }
[data-accent="7"]  { --accent: #9CF600; --on-accent: #404040; --brand: #9CF600; --on-brand: #404040; }
[data-accent="8"]  { --accent: #6FAC46; --on-accent: #000000; --brand: #6FAC46; --on-brand: #000000; }
[data-accent="9"]  { --accent: #7E7F7E; --on-accent: #FFFFFF; --brand: #7E7F7E; --on-brand: #FFFFFF; }
[data-accent="10"] { --accent: #000000; --on-accent: #FFFF00; --brand: #000000; --on-brand: #FFFF00; }
[data-accent="11"] { --accent: #990099; --on-accent: #FFFFFF; --brand: #990099; --on-brand: #FFFFFF; }
[data-accent="12"] { --accent: #6F2F9F; --on-accent: #FFFF00; --brand: #6F2F9F; --on-brand: #FFFF00; }

[data-density="classic"] { --r-panel: 0px; --r-win: 0px; }

* { box-sizing: border-box; margin: 0; padding: 0; }
/* П3 (29.09): закреплённая шапка закрывает верх окна на --k-stuck-h (skins/common.js wirePin) — переход к полю,
   scrollIntoView и прокрутка перед нажатием оставляют цель ниже шапки, ещё на 8 px ниже */
html { scroll-padding-top: calc(var(--k-stuck-h, 0px) + 8px); }

body {
  min-height: 100svh;
  background: var(--graphite);
  color: var(--ink);
  font-family: "Wix Madefor Text", system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .money { font-family: "Wix Madefor Display", system-ui, sans-serif; font-weight: 500; }
h1 { font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 0.95; letter-spacing: -0.03em; }
h2 { font-size: 17px; line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: 14px; line-height: 1.15; letter-spacing: -0.015em; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.6; }
.dim { opacity: 0.62; }
.lead { font-size: 14px; max-width: 60ch; opacity: 0.8; text-wrap: pretty; }
.money { white-space: nowrap; }
.num { text-align: right; }

[data-density="classic"] .btn { border-radius: 0; }

/* ---------- панели ---------- */
.panel { background: var(--surface-2); border-radius: var(--r-panel); padding: var(--s3) var(--s4) var(--s4); }
.panel + .panel { margin-top: var(--s3); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }

/* ---------- списки-строки ---------- */
.rows { display: grid; gap: 6px; max-height: 46svh; overflow-y: auto; padding-right: 4px; }
.row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: var(--s2);
  align-items: center; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 0;
  border-radius: var(--r-panel); padding: 9px var(--s3);
  transition: transform 520ms var(--e), background 320ms var(--e), box-shadow 320ms var(--e);
}
.row:hover { transform: translateX(4px); background: #fff; }
.row.is-on { background: var(--selected); transform: translateX(6px); }

/* ---------- таблицы ---------- */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th {
  position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 400;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--th-bg); color: rgba(35, 34, 31, 0.7);
  padding: 8px 10px; white-space: nowrap;
}
td { padding: 8px 10px; border-top: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover td { background: rgba(35, 34, 31, 0.03); }
tr.is-best td { background: var(--selected); }
tr.is-accepted td { background: var(--accepted); }
tr.is-rejected td { background: var(--rejected); }
tr.is-open td { background: rgba(35, 34, 31, 0.05); }
td.num, th.num { text-align: right; }

/* ---------- статусы и чипы ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 9px; border-radius: 999px; background: rgba(35, 34, 31, 0.08);
}
.chip--ok { background: var(--accepted); color: #10310F; }
.chip--wait { background: rgba(35, 34, 31, 0.08); }
.chip--warn { background: var(--returned); color: #7A3311; }
.chip--off { opacity: 0.6; }
.chip--accent { background: var(--accent); color: var(--on-accent); }

.stars { display: inline-flex; gap: 1px; vertical-align: -2px; }
.stars i { opacity: 0.25; display: inline-flex; }
.stars i.is-on { opacity: 1; color: var(--warn); }

/* ---------- кнопки ---------- */
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: #F6F5F2; font-size: 13px;
  transition: transform 620ms var(--e);
}
.btn > span, .btn > svg { position: relative; z-index: 2; transition: color 320ms var(--e); }
.btn::before {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--e);
}
.btn:hover::before { transform: scaleX(1); }
.btn:hover { transform: translateY(-1px); }
.btn:hover > span, .btn:hover > svg { color: var(--on-accent); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--line::before { background: var(--ink); }
.btn--line:hover > span, .btn--line:hover > svg { color: #F6F5F2; }
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent::before { background: var(--ink); }
.btn--accent:hover > span, .btn--accent:hover > svg { color: #F6F5F2; }
.btn--sm { min-height: 32px; padding: 0 12px; font-size: 12px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled::before { transform: scaleX(0); }
.btn:disabled:hover { transform: none; }

.iconbtn {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: rgba(35, 34, 31, 0.07); cursor: pointer;
  transition: background 320ms var(--e), transform 520ms var(--e), color 320ms var(--e);
}
.iconbtn:hover { background: var(--accent); color: var(--on-accent); transform: translateY(-1px); }
.actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
/* поле количества в строке каталога (было инлайн-стилем, проверка 26.09, L24) */
.actions > input.qty { width: 64px; }
.actions--end { justify-content: flex-end; }

/* ---------- формы ---------- */
.form { display: grid; gap: var(--s3); }

/* колонка поля не шире ячейки сетки: список с длинным вариантом («экспресс (2 часа / 1 000 ₽)», адрес) держал ширину по
   самому длинному варианту и наезжал на соседнее поле на 38–162 px (проверка 26.09, M22) */
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.field > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; min-width: 0; }
.form { grid-template-columns: minmax(0, 1fr); }
.form > * { min-width: 0; }
.field__l { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
input, select, textarea {
  min-height: 40px; padding: 8px 12px; border: 0; border-radius: 8px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 320ms var(--e);
}
[data-density="classic"] input, [data-density="classic"] select, [data-density="classic"] textarea { border-radius: 0; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
textarea { min-height: 72px; resize: vertical; line-height: 1.45; }
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 16px; height: 16px; accent-color: var(--accent); box-shadow: none; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; }

/* фильтр как в макете: серая плашка-подпись слева, поле справа */
.filters { display: grid; gap: 6px; }
.filt { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 6px; align-items: center; }
.filt > span {
  background: rgba(35, 34, 31, 0.09); border-radius: 6px; padding: 8px 10px;
  font-size: 11.5px; text-align: center;
}
[data-density="classic"] .filt > span { border-radius: 0; }
.filt select, .filt input { min-height: 34px; padding: 4px 10px; font-size: 12.5px; }

/* ---------- чат ---------- */
.chat { display: grid; gap: var(--s2); }
.msg { max-width: 78%; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 12.5px; }
.chat__rule { font-size: 11px; opacity: 0.55; max-width: 78ch; }

/* ---------- стикеры ---------- */
.notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 1100px) { .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.note {
  background: var(--brand); color: var(--on-brand); border-radius: 4px; padding: 10px 12px; font-size: 12.5px; cursor: grab;
  box-shadow: 2px 3px 0 rgba(35, 34, 31, 0.16);
  transition: transform 420ms var(--e);
}
.note:hover { transform: rotate(-1deg) translateY(-2px); }

/* ---------- дерево заданий ---------- */
.task { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: var(--s3); align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.bar { height: 6px; border-radius: 999px; background: rgba(35, 34, 31, 0.1); overflow: hidden; }
.bar > i {
  display: block; height: 100%; width: 100%; background: var(--accent); border-radius: 999px;
  transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 620ms var(--e);
}

/* ---------- модалка ---------- */
.modal {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(20, 19, 17, 0.45); opacity: 0; transition: opacity 260ms var(--e);
  padding: var(--s4);
}
.modal.is-in { opacity: 1; }
.modal__box {
  background: var(--surface); border-radius: var(--r-win); width: min(760px, 100%);
  max-height: 88svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  transform: translateY(14px); transition: transform 420ms var(--e);
}
.modal.is-in .modal__box { transform: none; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--graphite); color: #F2F1EE; border-radius: var(--r-win) var(--r-win) 0 0; }
.modal__head h2 { color: var(--brand-lift); }
.modal__head .iconbtn { background: rgba(242, 241, 238, 0.16); color: #F2F1EE; }
.modal__body { padding: var(--s4); overflow-y: auto; }
.modal__foot { display: flex; gap: var(--s2); justify-content: flex-end; padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }

/* ---------- уведомление ---------- */
.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 70;
  transform: translate(-50%, 18px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #F6F5F2; padding: 11px 20px; border-radius: 999px; font-size: 13px;
  transition: opacity 300ms var(--e), transform 560ms var(--e);
  max-width: min(560px, 90vw); text-align: center;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast--err { background: #C0392B; }
.toast--ok { background: var(--ok); }

/* ---------- вышло обновление системы: полоса в потоке над кабинетом ---------- */
.kupdate {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin: 0 0 8px; padding: 6px 6px 6px 16px;
  background: #22324F; color: #FFFFFF; font-size: 14px; line-height: 1.35;
}
/* в классических видах у body есть поля — там полоса скругляется, в современном идёт от края до края */
body.classic .kupdate { border-radius: 10px; }
.kupdate__t { flex: 1 1 200px; }
.kupdate__go, .kupdate__x {
  min-height: 44px; border: 0; border-radius: 8px; cursor: pointer; font: inherit;
  transition: background 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.kupdate__go { padding: 0 18px; background: #FFFFFF; color: #22324F; }
.kupdate__go:hover { background: #E4ECFA; box-shadow: inset 0 0 0 2px #FFFFFF; }
.kupdate__x { width: 44px; display: grid; place-items: center; background: transparent; color: inherit; }
.kupdate__x:hover { background: rgba(255, 255, 255, .16); }
.kupdate button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

.empty { opacity: 0.5; padding: var(--s4) 0; font-size: 12.5px; }
.ic { vertical-align: -3px; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ---------- УАТ в современном виде: закладки разделов внутри окна ---------- */
.kuat-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.kuat-tabs .kbtn {
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font-size: 12.5px; min-height: 32px; padding: 0 14px;
  transition: background 320ms var(--e), transform 500ms var(--e);
}
.kuat-tabs .kbtn:hover { transform: translateY(-2px); }
.kuat-tabs .kbtn.is-on { background: var(--accent); color: var(--on-accent); border-color: transparent; }

/* ---- результаты поиска предложений (API v1, этап 1): контейнер, плашка, пагинация, недавние запросы ---- */
.res { min-width: 0; }
.res-bar, .res-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; font-size: 13px;
}
.res-bar { box-shadow: inset 0 0 0 1px var(--line-strong); }
.res-bar > span { flex: 1 1 200px; font-weight: 500; }
.res-status { opacity: .7; }
.res-status--err { opacity: 1; box-shadow: inset 0 0 0 1px #C0392B; color: #8A1C1C; }
.res-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.res-pager__n { font-size: 12.5px; opacity: .7; }
.btn.res-btn { min-height: 44px; min-width: 44px; }
/* тач-цели экранов результатов классами, без инлайновых style: res-btn — любая btn или iconbtn
   («Выбрать позицию», правка и удаление в «Моих товарах»), res-ctl — селекты и поля фильтров */
.iconbtn.res-btn { width: 44px; height: 44px; }
select.res-ctl, input.res-ctl { min-height: 44px; }
@media (max-width: 600px) {
  :is(#app, body) .btn.res-btn, :is(#app, body) .res-ctl { min-height: 44px; min-width: 44px; }
  :is(#app, body) .iconbtn.res-btn { width: 44px; height: 44px; }
  .res-pager__n { flex: 1 1 100%; }
}
/* все модальные окна на всех ширинах (R20; ui.js modal — общий для modern и classic-семейства: classic, folder, crm, minimal):
   крестик, кнопки, поля, радиокнопки и чекбоксы с подписями — не меньше 44 × 44, между соседними целями не меньше 8 px;
   поля формы товара и другие .kform / .kfield в окнах — через 8 px */
.modal .modal__head :is(.iconbtn, [data-close]) { min-width: 44px; min-height: 44px; }
.modal .modal__foot { gap: 8px; flex-wrap: wrap; }
.modal :is(.modal__body, .modal__foot) :is(button, .btn, .kbtn, select, textarea, input:not([type="hidden"])) { min-height: 44px; min-width: 44px; }
.modal .modal__body :is(label:has(input[type="radio"]), label:has(input[type="checkbox"])) { min-height: 44px; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.modal .modal__body :is(label:has(input[type="radio"]), label:has(input[type="checkbox"])) > :not(input) { flex: 1 1 auto; min-width: 0; }
.modal .modal__body .lead + .lead { margin-top: 8px; }
.modal .modal__body :is(.actions, .kline, .form, .kform, .kfield) { gap: 8px; }
/* мастер «Загрузить прайс» (этап 3, поток 3B, public/app/integrations-core.js) — окно ui.js modal, общее для modern и classic-семейства;
   тач-цели кнопок, полей, радиокнопок и чекбоксов — правила .modal выше, промежутки между целями — 8 px */
.pw { display: grid; gap: 12px; min-width: 0; }
.pw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } /* 10, а не 8: кнопка под курсором поднимается на 1 px (.btn:hover, .kbtn:hover) — промежуток не падает ниже 8 */
.pw-file { cursor: pointer; }
.pw-file:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pw-progress { width: 100%; height: 12px; }
.pw-err { color: #b3261e; font-weight: 500; }
.pw-err:empty { display: none; }
.pw-held { padding: 10px 12px; border-radius: 12px; background: var(--returned); color: #7A3311; box-shadow: inset 0 0 0 1px rgba(199, 82, 26, .35); }
.pw-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 12px; }
.pw-map__row { display: grid; gap: 4px; min-width: 0; }
.pw-map__l { font-size: 12.5px; }
.pw-map__row select { width: 100%; min-width: 0; }
.pw-more > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.pw-more[open] > summary { margin-bottom: 8px; }
.pw-scroll { overflow-x: auto; max-width: 100%; }
.pw-table { font-size: 12px; border-collapse: collapse; }
.pw-table :is(td, th) { padding: 4px 8px; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.pw-sum { width: 100%; }
.pw-sum td.num { text-align: right; }
.pw-mode { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.pw-mode legend { padding: 0; margin-bottom: 4px; font-weight: 500; }
.pw-h { font-weight: 600; margin: 4px 0 0; }
.pw-brands { margin: 0; padding-left: 18px; }
@media (max-width: 600px) {
  .pw-map { grid-template-columns: 1fr; }
  .pw-actions > * { flex: 1 1 100%; }
}

/* раздел «Прайс и подключение» и панели менеджера (этап 4, поток 4C; public/app/integrations-core.js, views/integrations.js,
   classic-integrations.js) — общие классы для modern и classic-семейства; тач-цели 44 px и промежутки 8 px, без инлайновых style */
/* колонка minmax(0, 1fr): широкая таблица (журнал, последние уведомления) не раздвигает раздел шире экрана — она прокручивается в .ig-scroll */
.ig { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.ig-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.ig-h { margin: 0; font-size: 15px; font-weight: 600; }
.ig-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ig-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; }
.ig-actions--row { justify-content: flex-end; }
.ig-facts { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.ig-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ig-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; }
.ig-list li > span { flex: 1 1 220px; min-width: 0; }
.ig-scroll { overflow-x: auto; max-width: 100%; }
.ig-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ig-table :is(td, th) { padding: 6px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-strong); }
.ig-table :is(td, th).num { text-align: right; }
.ig-table tr.is-off { opacity: .6; }
.ig-table tr.is-err td { background: var(--returned); }
/* кнопки в колонке действий таблицы (список источников менеджера): без переноса по слову на строку — таблица прокручивается в .ig-scroll */
.ig-table .ig-actions--row > button { white-space: nowrap; }
.ig-paths { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ig-path { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.ig-path.is-on { box-shadow: inset 0 0 0 2px var(--ink); }
.ig-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ig-steps--plain { padding-left: 18px; list-style: disc; gap: 4px; }
.ig-step { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; }
.ig-step__mark { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--line-strong); }
.ig-step.is-done .ig-step__mark { box-shadow: inset 0 0 0 1px var(--ink); }
.ig-step__t { flex: 1 1 220px; min-width: 0; }
.ig-step__btn { flex: 0 0 auto; }
.ig-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ig-offscreen { position: fixed; top: 0; left: -9999px; opacity: 0; }
.ig-switch, .ig-check { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-height: 44px; }
.ig-warn { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--returned); color: #7A3311; }
.ig-dev > summary, .ig-group > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.ig-dev[open] > summary, .ig-group[open] > summary { margin-bottom: 10px; }
.ig-dev > :not(summary), .ig-group > :not(summary) { margin-top: 10px; }
.ig-src { display: grid; gap: 8px; padding: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.ig-src.is-off { opacity: .7; }
.ig-check-res { padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.ig-check-res p { margin: 0 0 4px; }
.ig-code { overflow-x: auto; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.ig-code code, .ig-addr, .ig-reqid, .ig-secret__val { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.ig-code code { white-space: pre; }
.ig-reqid { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ig-reqid > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-terms { width: 100%; height: min(50vh, 360px); border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.ig-days { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ig-days legend { padding: 0; margin-bottom: 4px; font-weight: 500; }
.ig-day { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.ig-time { display: flex; flex-wrap: wrap; gap: 8px; }
.ig-time .pw-map__row { flex: 1 1 140px; }
.ig-set-grid { display: grid; gap: 10px 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ig-set { align-content: start; }
/* строка интерфейса (тип text — «Доставка в меню», правки 29.09): поле во всю ширину сетки, текст до 120 знаков виден целиком */
.ig-set--wide { grid-column: 1 / -1; }
.ig-filter { flex: 1 1 240px; }
.ig-client { margin-top: 10px; }
/* блок «Уведомления о заказах» (поток NOTIFY): поле e-mail не шире 420 px, на 400 px — во всю ширину */
.ig-notify__field { max-width: 420px; }
.ig-notify__field input { width: 100%; min-width: 0; box-sizing: border-box; }
.ig-notify p { margin: 0; }
/* блок «Вебхуки» (этап 5A): карточка подписки — сеткой, длинный адрес переносится внутри карточки, а не раздвигает раздел на 400 px */
.ig-hooks p { margin: 0; }
.ig-hook-list > li.ig-hook { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.ig-hook__url { overflow-wrap: anywhere; min-width: 0; }
.ig-secret .modal__box { max-width: 560px; }
/* вопрос «Ключ больше не будет показан. Закрыть?» прячет нижнюю кнопку атрибутом hidden: .modal__foot задаёт display: flex */
.ig-secret .modal__foot[hidden] { display: none; }
.ig-secret__val { width: 100%; }
/* поле секрета, «Скопировать …» и «Я сохранил …» — через 8 px (стояли вплотную); hidden прячет блок, поэтому :not([hidden]) */
.ig-secret :is([data-s-main], [data-s-ask]):not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
/* вид minimal: плашка «баланс» (.kmin__balance, fixed, низ окна) закрывает последние ~40 px панели — запас снизу раздела */
body.k-minimal .ig[data-ig], body.k-minimal .ig[data-igm] { padding-bottom: 56px; }
@media (max-width: 600px) {
  .ig-paths, .ig-set-grid { grid-template-columns: 1fr; }
  .ig-actions > * { flex: 1 1 100%; }
  .ig-actions--row { justify-content: flex-start; }
}

/* заказ с подтверждением: решения по позициям у продавца и менеджера (этап 4, поток UIS; public/app/order-decisions.js,
   views/seller.js, views/manager.js, classic-crm.js sellerOrders) — общие классы для modern и classic-семейства;
   тач-цели — существующие res-btn / kres-btn / res-ctl / kres-ctl (44 px), промежутки 8 px, без инлайновых style */
.od-status { display: grid; gap: 8px; justify-items: start; min-width: 180px; }
.od-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.od-timer { white-space: normal; flex-wrap: wrap; row-gap: 2px; }
.od-timer > .od-part { white-space: nowrap; }
.kstat.od-timer { display: inline-block; }
.od-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 8px; }
.od-bar__t { margin: 0; flex: 1 1 260px; min-width: 0; }
.od-note { margin-top: 4px; min-width: 140px; max-width: 36ch; }
.od-qty { width: 80px; }
.od-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.od-sub { display: grid; gap: 8px; min-width: 0; }
.od-no { white-space: nowrap; }
/* «Документов нет: заказ отменён» вместо ссылок счёт / УПД / КСФ: части переносятся только целиком */
.od-nodocs { display: inline-block; min-width: 0; max-width: 20ch; text-align: left; }
.od-nodocs > span { white-space: nowrap; }
/* «после отгрузки» в ячейке «УПД» заказа покупателя (Б13, правки 06.10): подпись, не кнопка — одной строкой */
.od-updwait { white-space: nowrap; }
/* номер КСФ и «Открыть акт возврата» в ячейке «КСФ» заказа (Б10, правки 06.10): в узкой колонке переносятся целым блоком
   в две строки, а не рвутся посреди рамки */
.od-ksfnum, .od-ksfact { display: inline-block; line-height: 1.25; }
/* «Скачать документ» и окно «Документы заказа» (Б9, правки 06.10; order-decisions.js docsDialog): по строке на документ —
   название с номером и действия в ряд с переносом, между кнопками 8 px (высоту 44 px кнопкам окна задаёт общее правило
   .modal выше); на телефоне кнопки — по две в ряд на всю ширину; под списком — подсказка о PDF и строка состояния */
/* кнопка в строке заказа — своей строкой в ячейке: таблица заказов не становится шире (в CRM при 1366 px она и так занимает
   всю панель). У покупателя — над «диалог» и «оценить» (ячейка по центру), у продавца и менеджера — под ссылками «счёт»,
   «УПД», «КСФ». На телефоне между строками 8 px, отступ слева у соседней кнопки (правило «кнопки подряд») не нужен */
.kbtn.od-docsbtn { display: flex; width: max-content; white-space: nowrap; }
td.cen > .kbtn.od-docsbtn { margin: 0 auto 4px; }
td:not(.cen) > .kbtn.od-docsbtn { margin: 4px 0 0; }
@media (max-width: 600px) {
  :is(#app, body) td.cen > .kbtn.kbtn--sm.od-docsbtn { margin: 0 auto 8px; }
  :is(#app, body) td:not(.cen) > .kbtn.kbtn--sm.od-docsbtn { margin: 8px 0 0; }
  :is(#app, body) td > .kbtn.od-docsbtn + .kbtn.kbtn--sm { margin-left: 0; }
}
.od-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.od-doc { display: grid; gap: 8px; min-width: 0; }
.od-doc__t { font-weight: 600; overflow-wrap: anywhere; }
.od-doc__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.od-doc__acts > .kbtn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.od-docs__msg { margin: 16px 0 0; min-height: 1.4em; overflow-wrap: anywhere; }
@media (max-width: 600px) { .od-doc__acts > .kbtn { flex: 1 1 calc(50% - 4px); } }
tr.od-dead td { opacity: .62; }
tr.od-dead td.od-strike { text-decoration: line-through; }
@media (max-width: 600px) {
  .od-acts > * { flex: 1 1 auto; }
  .od-filter > select { flex: 1 1 100%; }
}

/* заказы покупателя: статус позиции, причина отказа, «Отменить позицию», «Найти замену» (этап 4, поток UIB; спец. E.9;
   public/app/classic.js orderLines, views/buyer.js orderLines) — общие для modern и classic-семейства; тач-цели —
   существующие res-btn / kres-btn (44 px), промежутки между кнопками 8 px, без инлайновых style */
.ordl-acts { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.ordl-why { margin-top: 4px; font-size: 12px; white-space: normal; min-width: 120px; max-width: 32ch; }
.ordl-st { margin-top: 6px; }

/* подсказка «что делать дальше» на пустых экранах (чистый старт, 16.09.2026; public/app/next-step.js) — modern и
   classic-семейство; кнопки — res-btn / kres-btn (44 px), промежутки 8 px, без инлайновых style */
.nextstep { display: grid; gap: 8px; justify-items: start; padding: 12px 0 4px; min-width: 0; }
.nextstep__t { margin: 0; font-size: 13px; line-height: 1.45; max-width: 72ch; opacity: .82; text-wrap: pretty; }
.nextstep__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.nextstep--classic { padding: 10px 4px 4px; }
.nextstep--classic .nextstep__t { font-size: 12.5px; }

/* ---------- .pw-paste: вставка таблицы из буфера в мастере загрузки (каналы v2, поток К7; integrations-core.js stepPaste) ----------
   общее для modern и classic-семейства. Поле на всю ширину окна, строки не переносятся: колонки видны как в таблице,
   прокрутка — внутри поля, а не страницы. На узком экране кнопки в столбик (правило .pw-actions выше); тач-цели — правила
   .modal (44 px), промежутки 8 px; без инлайновых style */
.pw-paste { display: grid; gap: 8px; min-width: 0; }
.pw-paste > p { margin: 0; }
.pw-paste__l { font-weight: 500; }
.pw-paste__area {
  box-sizing: border-box; display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 200px; max-height: 50vh;
  resize: vertical; white-space: pre; overflow: auto; overflow-wrap: normal; tab-size: 12;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 12.5px; line-height: 1.45;
}
.pw-paste__area[aria-readonly="true"] { cursor: default; }
.pw-paste .pw-actions { margin-top: 4px; }
@media (max-width: 600px) {
  .pw-paste__area { min-height: 160px; }
}
/* на сенсорных экранах шрифт поля 16 px: iOS не увеличивает страницу при фокусе */
@media (pointer: coarse) {
  .pw-paste__area { font-size: 16px; }
}

/* ---------- биржа в API v1 (поток X5a, спец. M.13 п.1, 3–7, 11; public/app/ui.js, integrations-core.js, views/seller.js,
   views/buyer.js, views/manager.js, classic.js, classic-crm.js) — общие классы для modern и classic-семейства.
   Тач-цели — существующие res-btn / kres-btn / res-ctl и правила .modal (44 px), промежутки 8 px; без инлайновых style,
   эмодзи и цветных полос слева у карточек ---------- */
/* блоки, которые показываются по выбору (регион заявок ключа и вебхука, подсказки): .pw-mode задаёт display, hidden его не перебивает */
.ex-region[hidden], .ex-note[hidden], .ex-hint[hidden] { display: none; }
.ex-hint { display: block; margin: 0; font-size: 11.5px; line-height: 1.4; opacity: .72; text-wrap: pretty; }
.pw-mode .ex-hint { margin: -4px 0 0 24px; }
.ex-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; text-wrap: pretty; }
/* окно после оформления заказа (M.13 п.10): перечень созданных заказов без маркеров-глифов */
.ex-orders { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.ex-orders li { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--soft, rgba(35, 34, 31, 0.05)); line-height: 1.45; text-wrap: pretty; }
/* отметка «из программы» (канал api) — нейтральный чип с обводкой, без цвета статуса */
.chip--api { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong, rgba(35, 34, 31, 0.28)); }
.ex-draft-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line-strong, rgba(35, 34, 31, 0.28)); line-height: 1.45; }
.ex-draft-note > span:last-child { flex: 1 1 220px; min-width: 0; }
/* колонка «Сумма» КП: подсказка у КП с вариантами */
.ex-sumnote { display: block; font-size: 11px; font-weight: 400; opacity: .7; white-space: normal; max-width: 22ch; margin-left: auto; }
.row .ex-sumnote, .krow .ex-sumnote { margin-left: 0; max-width: none; }
/* поле «Ссылка на фото» в форме КП: во всю ширину строки; в классических видах — отдельной строкой под вариантом */
.ex-kphoto { grid-template-columns: 24px minmax(0, 1fr); }
.ex-kphoto--pick { grid-template-columns: minmax(0, 1fr); }
.ex-kphoto__f { display: grid; gap: 2px; min-width: 0; }
/* строка КП классических видов (classic-crm.js lineRow: №, бренд, цена, сумма, срок, комментарий, ориг. номер, артикул, кнопки):
   при переносе на вторую строку комментарий попадал в узкую колонку номера (24 px) — а именно в нём теперь отмечается ошибка
   контактов. До 1400 px вторая строка начинается со второй колонки, на телефоне — две колонки полей, комментарий и кнопки во всю ширину */
.kline--offer > .knowrap { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
@media (max-width: 1400px) {
  .kline--offer > :nth-child(6) { grid-column: 2; }
}
@media (max-width: 600px) {
  .kline.kline--offer { grid-template-columns: 24px repeat(2, minmax(0, 1fr)); gap: 8px 6px; }
  .kline--offer > :nth-child(1) { grid-column: 1; }
  .kline--offer > :nth-child(2), .kline--offer > :nth-child(4), .kline--offer > :nth-child(7) { grid-column: 2; }
  .kline--offer > :nth-child(3), .kline--offer > :nth-child(5), .kline--offer > :nth-child(8) { grid-column: 3; }
  .kline--offer > :nth-child(6), .kline--offer > :nth-child(9) { grid-column: 2 / -1; }
  :is(#app, body) .kline--offer > input { min-height: 44px; }
  /* вторая строка варианта (НДС, количество, «в наличии»): те же две колонки и те же 44 px, что у первой строки —
     иначе поля оставались 26 px высотой, а «в наличии» в minimal сжималось до 12 px (ревью круга 1) */
  .kline.kline--offer2 { grid-template-columns: 24px repeat(2, minmax(0, 1fr)); gap: 8px 6px; }
  .kline--offer2 > :nth-child(2) { grid-column: 2; }
  .kline--offer2 > :nth-child(3) { grid-column: 3; }
  .kline--offer2 > :nth-child(4) { grid-column: 2 / -1; }
  :is(#app, body) .kline--offer2 > :is(input, select) { min-height: 44px; }
}
/* ссылка на фото строки КП (M.3.8) у покупателя и продавца: цель не меньше 44 px */
.ex-photo-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
/* состав заказа в окне «Принять» (M.13 п.4): позиция, вариант, цена и сколько штук будет куплено */
.kplan { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; }
.kplan > li { margin: 2px 0; }
/* «программа прислала новый черновик»: текст тянется, кнопка загрузки рядом и не меньше 44 px */
[data-ex-draft-stale] > span { flex: 1 1 220px; min-width: 0; }
:is(#app, body) [data-ex-draft-stale] :is(.btn, .kbtn) { min-height: 44px; min-width: 44px; }
/* ошибка ядра у поля формы КП (контакты, фото, цена): текст под кнопками, поле с красной рамкой */
.ex-err { margin: 8px 0 0; }
.ex-invalid, .ex-invalid:focus { outline: 2px solid #b3261e; outline-offset: 1px; }
/* «Для программиста»: тестовая заявка биржи */
.ex-sbx { display: grid; gap: 8px; min-width: 0; }
.ex-sbx p { margin: 0; }
.ex-sbx .pw-map__row { max-width: 420px; }
@media (max-width: 600px) {
  :is(#app, body) :is(.ex-photo, .ex-kphoto) input { min-height: 44px; }
  .ex-sbx .pw-map__row { max-width: none; }
  .ex-sumnote { max-width: none; }
}

/* ---------- оформление классами вместо атрибутов style (аудит 28.09, N40) ----------
   Content-Security-Policy не пускает атрибуты style (style-src-attr 'none', server/csp.js): в разметке кабинета — только классы.
   !important — как у прежнего атрибута style, который перебивал правила видов. Вычисляемые высота столбиков и ширина полос —
   классы u-pct0…u-pct100 (переменные --pct и --p, ui.js pctClass), высота или ширина по ним — у самих столбиков и полос. */
.u-mt6 { margin-top: 6px !important; }
.u-mt8 { margin-top: 8px !important; }
.u-mt10 { margin-top: 10px !important; }
.u-mb6 { margin-bottom: 6px !important; }
.u-mb8 { margin-bottom: 8px !important; }
.u-m10-0-4 { margin: 10px 0 4px !important; }
.u-big { font-size: 24px !important; font-weight: 700 !important; }
.u-tal { text-align: left !important; }
.u-tac { text-align: center !important; }
.u-tar { text-align: right !important; }
.u-p10 { padding: 10px !important; }
.u-p24 { padding: 24px !important; }
.u-grab { cursor: grab !important; }
.u-scroll180, .u-scroll240, .u-scroll260 { overflow: auto !important; }
.u-scroll180 { max-height: 180px !important; }
.u-scroll240 { max-height: 240px !important; }
.u-scroll260 { max-height: 260px !important; }
/* рост и падение показателя в сводке классического вида */
.u-up { color: #1B6E2E !important; }
.u-down { color: #B00020 !important; }
/* число непрочитанных в списке диалогов */
.u-badge-red { background: #FF0000 !important; color: #fff !important; }
/* образец файла прайса в классическом виде */
.u-sample { white-space: pre-wrap !important; font-size: 12px !important; background: #fff !important; border: 1px solid #9a9a9a !important;
  padding: 8px !important; margin: 8px 0 !important; overflow: auto !important; }
/* день с событием в календаре автопарка */
.u-cal-mark { background: var(--k-accent) !important; font-weight: 700 !important; }
.u-cal-today { outline: 2px solid #000 !important; }
/* столбики графиков и полосы выполнения: высота или ширина — из u-pct… */
.kbars__i, .kmonths__i { height: var(--pct, 0%); }
.kprog > i { width: var(--pct, 0%); }
.u-pct0 { --pct: 0%; --p: 0; } .u-pct1 { --pct: 1%; --p: 0.01; } .u-pct2 { --pct: 2%; --p: 0.02; } .u-pct3 { --pct: 3%; --p: 0.03; } .u-pct4 { --pct: 4%; --p: 0.04; }
.u-pct5 { --pct: 5%; --p: 0.05; } .u-pct6 { --pct: 6%; --p: 0.06; } .u-pct7 { --pct: 7%; --p: 0.07; } .u-pct8 { --pct: 8%; --p: 0.08; } .u-pct9 { --pct: 9%; --p: 0.09; }
.u-pct10 { --pct: 10%; --p: 0.1; } .u-pct11 { --pct: 11%; --p: 0.11; } .u-pct12 { --pct: 12%; --p: 0.12; } .u-pct13 { --pct: 13%; --p: 0.13; } .u-pct14 { --pct: 14%; --p: 0.14; }
.u-pct15 { --pct: 15%; --p: 0.15; } .u-pct16 { --pct: 16%; --p: 0.16; } .u-pct17 { --pct: 17%; --p: 0.17; } .u-pct18 { --pct: 18%; --p: 0.18; } .u-pct19 { --pct: 19%; --p: 0.19; }
.u-pct20 { --pct: 20%; --p: 0.2; } .u-pct21 { --pct: 21%; --p: 0.21; } .u-pct22 { --pct: 22%; --p: 0.22; } .u-pct23 { --pct: 23%; --p: 0.23; } .u-pct24 { --pct: 24%; --p: 0.24; }
.u-pct25 { --pct: 25%; --p: 0.25; } .u-pct26 { --pct: 26%; --p: 0.26; } .u-pct27 { --pct: 27%; --p: 0.27; } .u-pct28 { --pct: 28%; --p: 0.28; } .u-pct29 { --pct: 29%; --p: 0.29; }
.u-pct30 { --pct: 30%; --p: 0.3; } .u-pct31 { --pct: 31%; --p: 0.31; } .u-pct32 { --pct: 32%; --p: 0.32; } .u-pct33 { --pct: 33%; --p: 0.33; } .u-pct34 { --pct: 34%; --p: 0.34; }
.u-pct35 { --pct: 35%; --p: 0.35; } .u-pct36 { --pct: 36%; --p: 0.36; } .u-pct37 { --pct: 37%; --p: 0.37; } .u-pct38 { --pct: 38%; --p: 0.38; } .u-pct39 { --pct: 39%; --p: 0.39; }
.u-pct40 { --pct: 40%; --p: 0.4; } .u-pct41 { --pct: 41%; --p: 0.41; } .u-pct42 { --pct: 42%; --p: 0.42; } .u-pct43 { --pct: 43%; --p: 0.43; } .u-pct44 { --pct: 44%; --p: 0.44; }
.u-pct45 { --pct: 45%; --p: 0.45; } .u-pct46 { --pct: 46%; --p: 0.46; } .u-pct47 { --pct: 47%; --p: 0.47; } .u-pct48 { --pct: 48%; --p: 0.48; } .u-pct49 { --pct: 49%; --p: 0.49; }
.u-pct50 { --pct: 50%; --p: 0.5; } .u-pct51 { --pct: 51%; --p: 0.51; } .u-pct52 { --pct: 52%; --p: 0.52; } .u-pct53 { --pct: 53%; --p: 0.53; } .u-pct54 { --pct: 54%; --p: 0.54; }
.u-pct55 { --pct: 55%; --p: 0.55; } .u-pct56 { --pct: 56%; --p: 0.56; } .u-pct57 { --pct: 57%; --p: 0.57; } .u-pct58 { --pct: 58%; --p: 0.58; } .u-pct59 { --pct: 59%; --p: 0.59; }
.u-pct60 { --pct: 60%; --p: 0.6; } .u-pct61 { --pct: 61%; --p: 0.61; } .u-pct62 { --pct: 62%; --p: 0.62; } .u-pct63 { --pct: 63%; --p: 0.63; } .u-pct64 { --pct: 64%; --p: 0.64; }
.u-pct65 { --pct: 65%; --p: 0.65; } .u-pct66 { --pct: 66%; --p: 0.66; } .u-pct67 { --pct: 67%; --p: 0.67; } .u-pct68 { --pct: 68%; --p: 0.68; } .u-pct69 { --pct: 69%; --p: 0.69; }
.u-pct70 { --pct: 70%; --p: 0.7; } .u-pct71 { --pct: 71%; --p: 0.71; } .u-pct72 { --pct: 72%; --p: 0.72; } .u-pct73 { --pct: 73%; --p: 0.73; } .u-pct74 { --pct: 74%; --p: 0.74; }
.u-pct75 { --pct: 75%; --p: 0.75; } .u-pct76 { --pct: 76%; --p: 0.76; } .u-pct77 { --pct: 77%; --p: 0.77; } .u-pct78 { --pct: 78%; --p: 0.78; } .u-pct79 { --pct: 79%; --p: 0.79; }
.u-pct80 { --pct: 80%; --p: 0.8; } .u-pct81 { --pct: 81%; --p: 0.81; } .u-pct82 { --pct: 82%; --p: 0.82; } .u-pct83 { --pct: 83%; --p: 0.83; } .u-pct84 { --pct: 84%; --p: 0.84; }
.u-pct85 { --pct: 85%; --p: 0.85; } .u-pct86 { --pct: 86%; --p: 0.86; } .u-pct87 { --pct: 87%; --p: 0.87; } .u-pct88 { --pct: 88%; --p: 0.88; } .u-pct89 { --pct: 89%; --p: 0.89; }
.u-pct90 { --pct: 90%; --p: 0.9; } .u-pct91 { --pct: 91%; --p: 0.91; } .u-pct92 { --pct: 92%; --p: 0.92; } .u-pct93 { --pct: 93%; --p: 0.93; } .u-pct94 { --pct: 94%; --p: 0.94; }
.u-pct95 { --pct: 95%; --p: 0.95; } .u-pct96 { --pct: 96%; --p: 0.96; } .u-pct97 { --pct: 97%; --p: 0.97; } .u-pct98 { --pct: 98%; --p: 0.98; } .u-pct99 { --pct: 99%; --p: 0.99; }
.u-pct100 { --pct: 100%; --p: 1; }