/*
 * design/components.css — базовые компоненты дизайн-системы «Контура» (v3).
 *
 * Что делает модуль
 *   Описывает компоненты с префиксом .k-: кнопка (три размера), поле с подписью и ошибкой,
 *   сегмент-переключатель, фишка, карточка, аккордеон, таблица с числовыми столбцами,
 *   строка работы с редактируемым объёмом, площади комнаты, тост, пустое состояние,
 *   закреплённая панель итога, шапка, переключатель темы, иконка из спрайта.
 *   Каждый интерактивный компонент имеет состояния: обычное, наведение, фокус, нажатие,
 *   выключено, загрузка, ошибка. Цвета, размеры и шрифты — только из design/tokens.css;
 *   темы (design/theme-*.css) меняют характер поверх этих правил, имена классов не меняют.
 *
 * От чего зависит: design/tokens.css (переменные --k-*), design/icons.svg (спрайт иконок).
 * Кто использует: index.html и экраны калькулятора (rooms-v3, works-v3), вход, кабинет, CRM,
 *   лендинг. Полный список классов и примеры разметки — design/README.md.
 * Правило стабильности: имена классов из README не переименовываются и не удаляются.
 */

/* ── Основа документа ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Прокрутка к элементу (scrollIntoView, переход фокуса с клавиатуры, автотесты) не прячет его под
   липкими панелями: сверху — шапка .k-header, снизу — фиксированные панели телефона (нижняя навигация
   #mainNavigation и #mobileDock: их общую высоту rooms-v3.js пишет в --rooms-dock, до замера —
   высота навигации --mobile-nav-height из ui-foundation.css), липкий итог открытой комнаты
   .rooms-result (до 320 px, не больше 42 % экрана) и панель итога .k-totalbar. */
html{
  --k-sticky-bottom:max(var(--rooms-dock,0px),var(--mobile-nav-height,0px));
  --k-sticky-extra:0px;
  scroll-padding-top:calc(var(--k-header-h,64px) + var(--k-s-2));
  scroll-padding-bottom:calc(var(--k-sticky-bottom) + var(--k-sticky-extra) + var(--k-s-2));
}
html:has(.k-totalbar:not(.k-totalbar--aside)){--k-sticky-extra:var(--k-totalbar-h,72px)}
html:has(.rooms-card.is-open .rooms-result){--k-sticky-extra:min(320px,42vh)}
@media (max-width:760px){html{scroll-padding-top:calc(60px + var(--k-s-2))}}
body{background-color:var(--k-bg);background-image:var(--k-page-pattern);color:var(--k-ink);font-family:var(--k-font-sans);line-height:var(--k-lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--k-accent);color:var(--k-on-accent)}
:focus-visible{outline:2px solid var(--k-focus);outline-offset:2px}
.k-num,.k-table .k-num{font-family:var(--k-font-num);font-variant-numeric:var(--k-num-features);white-space:nowrap}
.k-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── Заголовки и текст ── */
.k-h1,.k-h2,.k-h3{font-family:var(--k-font-display);font-weight:var(--k-fw-display);letter-spacing:var(--k-tracking-display);line-height:var(--k-lh-tight);color:var(--k-ink);margin:0;text-wrap:balance}
.k-h1{font-size:var(--k-fs-3xl)}
.k-h2{font-size:var(--k-fs-2xl)}
.k-h3{font-size:var(--k-fs-xl)}
.k-lead{font-size:var(--k-fs-md);color:var(--k-ink-2);max-width:65ch;margin:var(--k-s-2) 0 0;text-wrap:pretty}
.k-muted{color:var(--k-ink-3)}
.k-label-caps{font-size:var(--k-fs-xs);font-weight:var(--k-fw-strong);letter-spacing:var(--k-tracking-caps);text-transform:uppercase;color:var(--k-ink-3)}

/* ── Раскладка ── */
.k-page{max-width:var(--k-page-max);margin-inline:auto;padding:var(--k-s-6) var(--k-gutter) var(--k-s-9)}
.k-stack{display:flex;flex-direction:column;gap:var(--k-gap)}
.k-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--k-s-2)}
.k-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:var(--k-s-6);align-items:start}
.k-split__aside{position:sticky;top:calc(var(--k-header-h,64px) + var(--k-s-4))}
@media (max-width:1023px){.k-split{grid-template-columns:minmax(0,1fr)}.k-split__aside{position:static}}
@media (min-width:761px){.k-page{padding-inline:var(--k-s-7)}}

/* ── Иконка из спрайта: <svg class="k-icon"><use href="design/icons.svg#i-plus"/></svg> ── */
.k-icon{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:-.25em;fill:none;stroke:currentColor;stroke-width:var(--k-icon-stroke,1.75);stroke-linecap:round;stroke-linejoin:round}
.k-icon--lg{width:1.5em;height:1.5em}

/* ── Кнопка ──
   .k-btn (md) · .k-btn--sm · .k-btn--lg; варианты --primary, --accent, --ghost, --danger, --link;
   --block (на всю ширину), --icon (только иконка, обязателен aria-label).
   Загрузка: aria-busy="true" (текст остаётся, ширина не прыгает). */
.k-btn{--_bg:var(--k-surface);--_ink:var(--k-ink);--_line:var(--k-line-strong);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--k-s-2);
  min-height:var(--k-h-md);padding:0 var(--k-s-4);margin:0;
  font:var(--k-fw-strong) var(--k-fs-md)/1.2 var(--k-font-sans);letter-spacing:0;text-align:center;text-decoration:none;white-space:nowrap;
  color:var(--_ink);background:var(--_bg);border:var(--k-border) solid var(--_line);border-radius:var(--k-r-control);
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background-color var(--k-dur-fast) var(--k-ease),border-color var(--k-dur-fast) var(--k-ease),color var(--k-dur-fast) var(--k-ease),transform var(--k-dur-fast) var(--k-ease),box-shadow var(--k-dur-fast) var(--k-ease)}
.k-btn:hover{background:var(--k-surface-2)}
.k-btn:active{transform:translateY(1px)}
.k-btn:focus-visible{outline:2px solid var(--k-focus);outline-offset:2px}
.k-btn:disabled,.k-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.k-btn[aria-busy="true"]{position:relative;color:transparent!important;pointer-events:none}
.k-btn[aria-busy="true"]::after{content:"";position:absolute;width:1.1em;height:1.1em;border-radius:50%;border:2px solid var(--_ink);border-right-color:transparent;animation:k-spin .7s linear infinite}
.k-btn--sm{min-height:var(--k-h-sm);padding:0 var(--k-s-3);font-size:var(--k-fs-sm)}
.k-btn--lg{min-height:var(--k-h-lg);padding:0 var(--k-s-6);font-size:var(--k-fs-lg)}
.k-btn--primary{--_bg:var(--k-primary);--_ink:var(--k-on-primary);--_line:var(--k-primary)}
.k-btn--primary:hover{background:var(--k-primary-hover);border-color:var(--k-primary-hover)}
.k-btn--accent{--_bg:var(--k-accent);--_ink:var(--k-on-accent);--_line:var(--k-accent)}
.k-btn--accent:hover{background:var(--k-accent);filter:brightness(.95)}
.k-btn--ghost{--_bg:transparent;--_line:transparent}
.k-btn--ghost:hover{background:var(--k-surface-2)}
.k-btn--danger{--_ink:var(--k-danger);--_line:var(--k-line)}
.k-btn--danger:hover{background:var(--k-danger-soft);border-color:var(--k-danger)}
.k-btn--link{--_bg:transparent;--_line:transparent;--_ink:var(--k-link);padding-inline:var(--k-s-1);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.k-btn--link:hover{background:transparent;text-decoration-thickness:2px}
.k-btn--link{white-space:normal;text-align:left;min-height:auto;padding-block:var(--k-s-2)}
.k-btn--block{display:flex;width:100%}
.k-btn--icon{padding:0;width:var(--k-h-md);flex:none}
.k-btn--icon.k-btn--sm{width:var(--k-h-sm)}
.k-btn--icon.k-btn--lg{width:var(--k-h-lg)}
.k-btn-row{display:flex;flex-wrap:wrap;gap:var(--k-s-2);align-items:center}
@keyframes k-spin{to{transform:rotate(360deg)}}

/* ── Поле: подпись над полем, подсказка, ошибка под полем ──
   .k-field > .k-field__label + .k-field__control(> .k-field__input + .k-field__unit) + .k-field__hint + .k-field__error
   Ошибка видна, только когда у .k-field есть .is-invalid (ставить после того, как поле тронули). */
.k-field{display:flex;flex-direction:column;gap:var(--k-s-1);min-width:0;margin:0}
.k-field__label{font-size:var(--k-fs-sm);font-weight:var(--k-fw-medium);color:var(--k-ink-2);line-height:1.35}
.k-field__control{position:relative;display:flex;align-items:center}
.k-field__input{width:100%;min-width:0;min-height:var(--k-h-md);margin:0;padding:0 var(--k-s-3);
  font:var(--k-fw-regular) var(--k-fs-md)/1.3 var(--k-font-sans);color:var(--k-ink);
  background:var(--k-field-bg);border:var(--k-field-line-w) solid var(--k-field-line);border-radius:var(--k-r-control);
  transition:border-color var(--k-dur-fast) var(--k-ease),box-shadow var(--k-dur-fast) var(--k-ease);appearance:none;-webkit-appearance:none}
textarea.k-field__input{min-height:calc(var(--k-h-md) * 2);padding-block:var(--k-s-2);resize:vertical}
select.k-field__input{padding-right:var(--k-s-8);background-image:linear-gradient(45deg,transparent 50%,var(--k-ink-3) 50%),linear-gradient(135deg,var(--k-ink-3) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.k-field__input::placeholder{color:var(--k-ink-3);opacity:1}
.k-field__input:hover{border-color:var(--k-ink-3)}
.k-field__input:focus{outline:none;border-color:var(--k-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--k-focus) 25%,transparent)}
.k-field__input:disabled{background:var(--k-surface-2);color:var(--k-ink-3);cursor:not-allowed}
.k-field__input[readonly]{background:var(--k-surface-2)}
.k-field--num .k-field__input,.k-field__input[inputmode="decimal"],.k-field__input[inputmode="numeric"]{font-family:var(--k-font-num);font-variant-numeric:var(--k-num-features)}
.k-field__unit{position:absolute;right:var(--k-s-3);pointer-events:none;color:var(--k-ink-3);font-size:var(--k-fs-sm)}
.k-field__control:has(.k-field__unit) .k-field__input{padding-right:var(--k-s-8)}
.k-field__hint{font-size:var(--k-fs-xs);color:var(--k-ink-3);line-height:1.45}
.k-field__error{display:none;font-size:var(--k-fs-xs);font-weight:var(--k-fw-medium);color:var(--k-danger);line-height:1.45}
.k-field.is-invalid .k-field__input{border-color:var(--k-danger)}
.k-field.is-invalid .k-field__input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--k-danger) 22%,transparent)}
.k-field.is-invalid .k-field__error{display:block}
.k-field.is-invalid .k-field__hint{display:none}
/* Строка полей: «длина · ширина · высота» в одну строку даже на 360 px */
.k-field-row{display:grid;grid-template-columns:repeat(var(--k-cols,3),minmax(0,1fr));gap:var(--k-s-2)}
.k-field-row--2{--k-cols:2}
.k-field-row--4{--k-cols:4}
@media (max-width:420px){.k-field-row--4{--k-cols:2}}
/* Флажок и переключатель */
.k-check{display:flex;align-items:flex-start;gap:var(--k-s-2);min-height:var(--k-h-sm);font-size:var(--k-fs-md);color:var(--k-ink);cursor:pointer;margin:0}
.k-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--k-primary);flex:none}

/* ── Сегмент-переключатель: способ ввода «Быстро · По стенам · План», валюта ₸ ₽ $ ──
   <div class="k-segment" role="group"><button class="k-segment__item" aria-pressed="true">…</button>…</div>
   Выбранный элемент: aria-pressed="true" или aria-selected="true" или .is-active. */
.k-segment{display:flex;gap:2px;padding:3px;background:var(--k-surface-2);border:var(--k-border) solid var(--k-line);border-radius:calc(var(--k-r-control) + 3px);max-width:100%;overflow-x:auto;scrollbar-width:none}
.k-segment::-webkit-scrollbar{display:none}
.k-segment__item{flex:1 1 0;min-width:max-content;min-height:calc(var(--k-h-md) - 8px);padding:0 var(--k-s-3);margin:0;border:0;border-radius:var(--k-r-control);background:transparent;color:var(--k-ink-2);font:var(--k-fw-strong) var(--k-fs-sm)/1.2 var(--k-font-sans);cursor:pointer;white-space:nowrap;transition:background-color var(--k-dur-fast) var(--k-ease),color var(--k-dur-fast) var(--k-ease)}
.k-segment__item:hover{color:var(--k-ink);background:color-mix(in srgb,var(--k-surface) 60%,transparent)}
.k-segment__item[aria-pressed="true"],.k-segment__item[aria-selected="true"],.k-segment__item.is-active{background:var(--k-surface);color:var(--k-ink);box-shadow:var(--k-shadow-1)}
.k-segment__item:disabled{opacity:.5;cursor:not-allowed}
.k-segment--sm .k-segment__item{min-height:calc(var(--k-h-sm) - 6px);font-size:var(--k-fs-xs)}
.k-segment--block{display:flex;width:100%}

/* ── Фишка: «+ Дверь», «+ Окно», фильтр «Кухня», тип работы ──
   .k-chip (кнопка) · .k-chip--add (добавление, пунктир) · .is-selected / aria-pressed="true" ·
   .k-chip__remove (крестик внутри фишки) · контейнер .k-chips */
.k-chips{display:flex;flex-wrap:wrap;gap:var(--k-s-2)}
.k-chips--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.k-chips--scroll::-webkit-scrollbar{display:none}
.k-chip{display:inline-flex;align-items:center;gap:var(--k-s-1);min-height:var(--k-h-sm);padding:0 var(--k-s-3);margin:0;flex:none;
  font:var(--k-fw-medium) var(--k-fs-sm)/1.2 var(--k-font-sans);color:var(--k-ink);background:var(--k-surface);
  border:var(--k-border) solid var(--k-line-strong);border-radius:var(--k-r-pill);cursor:pointer;white-space:nowrap;
  transition:background-color var(--k-dur-fast) var(--k-ease),border-color var(--k-dur-fast) var(--k-ease)}
/* Длинная подпись фишки (набор комнат с пояснением) переносится, а не раздвигает страницу; в строке с прокруткой — без переноса */
.k-chip{max-width:100%;white-space:normal;text-align:left;padding-block:var(--k-s-1)}
.k-chips--scroll .k-chip{white-space:nowrap;max-width:none}
.k-chip:hover{background:var(--k-surface-2)}
.k-chip:disabled{opacity:.5;cursor:not-allowed}
.k-chip--add{border-style:dashed;color:var(--k-ink-2)}
.k-chip--add:hover{border-style:solid;color:var(--k-ink)}
.k-chip.is-selected,.k-chip[aria-pressed="true"]{background:var(--k-selected);border-color:var(--k-selected);color:var(--k-on-selected)}
.k-chip__remove{display:inline-grid;place-items:center;width:28px;height:28px;margin:0 calc(var(--k-s-2) * -1) 0 0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.k-chip__remove:hover{background:color-mix(in srgb,currentColor 14%,transparent)}
@media (pointer:coarse){.k-chip{min-height:44px}}

/* ── Метка состояния: «Черновик», «Отправлена», «вручную» ── */
.k-badge{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:0 8px;border-radius:var(--k-r-pill);font:var(--k-fw-strong) var(--k-fs-xs)/1 var(--k-font-sans);background:var(--k-surface-2);color:var(--k-ink-2);white-space:nowrap}
.k-badge--accent{background:var(--k-accent-soft);color:var(--k-accent-text)}
.k-badge--success{background:var(--k-success-soft);color:var(--k-success)}
.k-badge--warning{background:var(--k-warning-soft);color:var(--k-warning)}
.k-badge--danger{background:var(--k-danger-soft);color:var(--k-danger)}
.k-badge--info{background:var(--k-info-soft);color:var(--k-info)}

/* ── Карточка: комната, заказ, раздел кабинета ──
   .k-card > .k-card__head(.k-card__title + .k-card__meta + .k-card__actions) + .k-card__body + .k-card__foot
   .k-card--flat (без тени) · .k-card--interactive (вся карточка нажимается) · .is-selected */
.k-card{background:var(--k-surface);border:var(--k-border) solid var(--k-line);border-radius:var(--k-r-md);box-shadow:var(--k-shadow-1);padding:var(--k-pad-card);min-width:0}
.k-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--k-s-3);margin-bottom:var(--k-s-3)}
.k-card__title{margin:0;font:var(--k-fw-display) var(--k-fs-lg)/var(--k-lh-tight) var(--k-font-display);letter-spacing:var(--k-tracking-display);color:var(--k-ink)}
.k-card__meta{margin:var(--k-s-1) 0 0;font-size:var(--k-fs-sm);color:var(--k-ink-3)}
.k-card__actions{display:flex;gap:var(--k-s-1);flex:none}
.k-card__body{display:flex;flex-direction:column;gap:var(--k-gap)}
.k-card__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--k-s-2);margin-top:var(--k-s-4);padding-top:var(--k-s-3);border-top:var(--k-border) solid var(--k-line)}
.k-card--flat{box-shadow:none}
.k-card--sunken{background:var(--k-surface-2);box-shadow:none}
.k-card--interactive{cursor:pointer;transition:border-color var(--k-dur-fast) var(--k-ease),box-shadow var(--k-dur) var(--k-ease)}
.k-card--interactive:hover{border-color:var(--k-line-strong);box-shadow:var(--k-shadow-2)}
.k-card.is-selected{border-color:var(--k-selected);box-shadow:0 0 0 1px var(--k-selected)}

/* ── Площади комнаты: «Пол 12 · Потолок 12 · Стены 31,6 м²» ──
   .k-metrics > .k-metric(.k-metric__label + .k-metric__value + .k-metric__unit); .k-metrics--inline — в строку */
.k-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:var(--k-s-2)}
.k-metric{display:flex;flex-direction:column;gap:2px;min-width:0;padding:var(--k-s-2) var(--k-s-3);background:var(--k-surface-2);border-radius:var(--k-r-sm)}
.k-metric__label{font-size:var(--k-fs-xs);color:var(--k-ink-3);line-height:1.3}
.k-metric__value{font:var(--k-fw-strong) var(--k-fs-num)/1.15 var(--k-font-num);font-variant-numeric:var(--k-num-features);color:var(--k-ink);white-space:nowrap}
.k-metric__unit{font-size:var(--k-fs-sm);font-weight:var(--k-fw-regular);color:var(--k-ink-3);margin-left:2px}
.k-metric.is-manual .k-metric__value{box-shadow:inset 0 -3px 0 var(--k-accent)}
.k-metrics--inline{display:flex;flex-wrap:wrap;gap:var(--k-s-1) var(--k-s-4)}
.k-metrics--inline .k-metric{flex-direction:row;align-items:baseline;gap:var(--k-s-1);padding:0;background:none}
.k-metrics--inline .k-metric__value{font-size:var(--k-fs-md)}

/* ── Аккордеон: группы работ, блок «Уточнить», карточка комнаты ──
   <details class="k-acc"><summary class="k-acc__head"><span class="k-acc__title">…</span><span class="k-acc__meta">…</span></summary><div class="k-acc__body">…</div></details>
   Стрелка рисуется сама. .k-acc--card — в рамке карточки; .k-acc-group — список без промежутков. */
.k-acc{border-bottom:var(--k-border) solid var(--k-line);margin:0}
.k-acc__head{display:flex;align-items:center;gap:var(--k-s-3);min-height:var(--k-h-lg);padding:var(--k-s-2) 0;cursor:pointer;list-style:none;user-select:none;-webkit-tap-highlight-color:transparent}
.k-acc__head::-webkit-details-marker{display:none}
.k-acc__head::after{content:"";flex:none;width:8px;height:8px;margin:0 6px 4px auto;border:solid var(--k-ink-3);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform var(--k-dur) var(--k-ease)}
.k-acc[open]>.k-acc__head::after{transform:translateY(3px) rotate(-135deg)}
.k-acc__head:hover .k-acc__title{color:var(--k-ink)}
.k-acc__head:focus-visible{outline:2px solid var(--k-focus);outline-offset:2px;border-radius:var(--k-r-xs)}
.k-acc__title{flex:1;min-width:0;font:var(--k-fw-strong) var(--k-fs-md)/1.3 var(--k-font-sans);color:var(--k-ink)}
.k-acc__meta{flex:none;font-size:var(--k-fs-sm);color:var(--k-ink-3);font-variant-numeric:var(--k-num-features)}
.k-acc__body{padding:0 0 var(--k-s-4)}
.k-acc--card{background:var(--k-surface);border:var(--k-border) solid var(--k-line);border-radius:var(--k-r-md);box-shadow:var(--k-shadow-1)}
.k-acc--card>.k-acc__head{padding:var(--k-s-2) var(--k-pad-card)}
.k-acc--card>.k-acc__body{padding:0 var(--k-pad-card) var(--k-pad-card)}
.k-acc--card+.k-acc--card{margin-top:var(--k-s-3)}
.k-acc-group{border-top:var(--k-border) solid var(--k-line)}
.k-card>.k-acc-group:first-child{border-top:0;margin-top:calc(var(--k-s-2) * -1)}
.k-card>.k-acc-group>.k-acc:last-child{border-bottom:0}

/* ── Строка работы: название, объём (правится на месте), цена, сумма ──
   .k-row > .k-row__main(.k-row__title + .k-row__sub) + .k-row__qty(.k-qty) + .k-row__sum
   .k-qty > input.k-qty__input + .k-qty__unit; .k-qty.is-manual — объём введён руками (не затирается пересчётом). */
.k-rows{display:flex;flex-direction:column}
.k-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--k-s-2) var(--k-s-3);padding:var(--k-s-3) 0;border-bottom:var(--k-border) solid var(--k-line)}
.k-row:last-child{border-bottom:0}
.k-row__main{min-width:0}
.k-row__title{display:block;font-weight:var(--k-fw-strong);font-size:var(--k-fs-md);line-height:1.3;color:var(--k-ink);overflow-wrap:anywhere}
.k-row__sub{display:block;margin-top:2px;font-size:var(--k-fs-sm);color:var(--k-ink-3)}
.k-row__sum{font:var(--k-fw-strong) var(--k-fs-md)/1.2 var(--k-font-num);font-variant-numeric:var(--k-num-features);text-align:right;white-space:nowrap;min-width:6ch}
.k-row--button{cursor:pointer}
.k-row--button:hover .k-row__title{text-decoration:underline;text-underline-offset:.2em}
.k-row.is-added{background:linear-gradient(90deg,var(--k-accent-soft),transparent 70%)}
@media (max-width:560px){.k-row{grid-template-columns:minmax(0,1fr) auto}.k-row__main{grid-column:1/-1}.k-row__qty{justify-self:start}}
.k-qty{display:inline-flex;align-items:center;gap:4px;height:var(--k-h-sm);padding:0 var(--k-s-2) 0 0;background:var(--k-field-bg);border:var(--k-field-line-w) solid var(--k-field-line);border-radius:var(--k-r-control)}
.k-qty:focus-within{border-color:var(--k-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--k-focus) 25%,transparent)}
.k-qty__input{width:7ch;min-width:0;height:100%;margin:0;padding:0 0 0 var(--k-s-2);border:0;background:transparent;color:var(--k-ink);font:var(--k-fw-strong) var(--k-fs-md)/1 var(--k-font-num);font-variant-numeric:var(--k-num-features);text-align:right;appearance:textfield;-moz-appearance:textfield}
.k-qty__input:focus{outline:none}
.k-qty__input::-webkit-inner-spin-button,.k-qty__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.k-qty__unit{font-size:var(--k-fs-sm);color:var(--k-ink-3)}
.k-qty.is-manual{border-color:var(--k-accent);box-shadow:inset 0 -3px 0 var(--k-accent)}
.k-qty.is-invalid{border-color:var(--k-danger)}
@media (pointer:coarse){.k-qty{height:44px}}

/* ── Таблица: смета, прайс, CRM ──
   <div class="k-table-wrap"><table class="k-table"><th class="k-num">Сумма</th>…<td class="k-num">…</td></table></div>
   .k-table--dense · .k-table--stack (на телефоне строки становятся карточками, подпись из data-label) ·
   tfoot — строка итога. Числовые столбцы: .k-num (вправо, моноширинные цифры темы). */
.k-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:var(--k-border) solid var(--k-line);border-radius:var(--k-r-md);background:var(--k-surface)}
.k-table{width:100%;border-collapse:collapse;font-size:var(--k-fs-sm);color:var(--k-ink)}
.k-table th,.k-table td{padding:var(--k-s-3) var(--k-s-4);text-align:left;vertical-align:top;border-bottom:var(--k-border) solid var(--k-line)}
.k-table thead th{position:sticky;top:0;z-index:1;background:var(--k-surface-2);font-size:var(--k-fs-xs);font-weight:var(--k-fw-strong);color:var(--k-ink-2);letter-spacing:.02em;white-space:nowrap;vertical-align:bottom}
.k-table tbody tr:hover td{background:color-mix(in srgb,var(--k-surface-2) 55%,transparent)}
.k-table tbody tr:last-child td{border-bottom:0}
.k-table .k-num{text-align:right}
.k-table tfoot td,.k-table tfoot th{border-top:2px solid var(--k-ink);border-bottom:0;font-weight:var(--k-fw-strong);font-size:var(--k-fs-md);background:var(--k-surface)}
.k-table__group td{background:var(--k-surface-2);font-weight:var(--k-fw-strong);color:var(--k-ink-2)}
.k-table--dense th,.k-table--dense td{padding:var(--k-s-2) var(--k-s-3)}
@media (max-width:640px){
  .k-table--stack thead{display:none}
  .k-table--stack,.k-table--stack tbody,.k-table--stack tfoot,.k-table--stack tr,.k-table--stack td,.k-table--stack th{display:block;width:100%}
  .k-table--stack tfoot tr{display:flex;justify-content:space-between;gap:var(--k-s-3)}
  .k-table--stack tfoot td:empty{display:none}
  .k-table--stack tfoot td{width:auto;padding:0;border:0}
  .k-table--stack tr{padding:var(--k-s-3) var(--k-s-4);border-bottom:var(--k-border) solid var(--k-line)}
  .k-table--stack td{display:flex;justify-content:space-between;gap:var(--k-s-3);padding:2px 0;border:0;text-align:right}
  .k-table--stack td::before{content:attr(data-label);color:var(--k-ink-3);text-align:left}
  .k-table--stack td:first-child{display:block;text-align:left;font-weight:var(--k-fw-strong);font-size:var(--k-fs-md)}
  .k-table--stack td:first-child::before{content:none}
  .k-table--stack td:empty{display:none}
  .k-table--stack .k-table__group td{margin:0 calc(var(--k-s-4) * -1);width:calc(100% + 2 * var(--k-s-4));padding:var(--k-s-2) var(--k-s-4)}
}

/* ── Тост: короткое подтверждение действия ──
   <div class="k-toast-region" aria-live="polite"><div class="k-toast k-toast--success">Сохранено</div></div>
   Видимость: .is-visible (или атрибут hidden снят). */
.k-toast-region{position:fixed;left:50%;bottom:calc(var(--k-totalbar-h,0px) + var(--k-s-4) + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:var(--k-z-toast);display:flex;flex-direction:column;align-items:center;gap:var(--k-s-2);width:min(440px,calc(100% - 2 * var(--k-gutter)));pointer-events:none}
.k-toast{display:flex;align-items:center;gap:var(--k-s-2);width:100%;padding:var(--k-s-3) var(--k-s-4);border-radius:var(--k-r-md);background:var(--k-ink);color:var(--k-bg);font-size:var(--k-fs-sm);font-weight:var(--k-fw-medium);box-shadow:var(--k-shadow-3);pointer-events:auto;animation:k-toast-in var(--k-dur) var(--k-ease)}
.k-toast--success .k-icon{color:var(--k-success-soft)}
.k-toast--error{background:var(--k-danger-soft);color:var(--k-ink);border:var(--k-border) solid var(--k-danger)}
.k-toast--error .k-icon{color:var(--k-danger)}
.k-toast__action{margin-left:auto;padding:0 var(--k-s-2);min-height:32px;border:0;background:transparent;color:inherit;font:inherit;font-weight:var(--k-fw-strong);text-decoration:underline;cursor:pointer}
@keyframes k-toast-in{from{opacity:0;transform:translateY(8px)}}

/* ── Пустое состояние: учит, что сделать дальше ──
   .k-empty > .k-empty__icon + .k-empty__title + .k-empty__text + .k-empty__actions */
.k-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--k-s-2);padding:var(--k-s-8) var(--k-s-5);border:var(--k-border) dashed var(--k-line-strong);border-radius:var(--k-r-md);background:var(--k-surface)}
.k-empty__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--k-r-md);background:var(--k-surface-2);color:var(--k-ink-2)}
.k-empty__icon .k-icon{width:24px;height:24px}
.k-empty__title{margin:var(--k-s-1) 0 0;font:var(--k-fw-display) var(--k-fs-lg)/1.3 var(--k-font-display);color:var(--k-ink)}
.k-empty__text{margin:0;max-width:46ch;font-size:var(--k-fs-sm);color:var(--k-ink-2);text-wrap:pretty}
.k-empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--k-s-2);margin-top:var(--k-s-3)}

/* ── Закреплённая панель итога ──
   Телефон: прилипает к низу экрана; компьютер: .k-totalbar--aside живёт в правой колонке .k-split__aside.
   .k-totalbar > .k-totalbar__item(.k-totalbar__label + .k-totalbar__value) … + .k-totalbar__actions
   .k-totalbar__value--main — главный итог (крупнее). Высота на телефоне — в --k-totalbar-h (для отступа страницы). */
.k-totalbar{--k-totalbar-h:72px;position:sticky;bottom:0;z-index:var(--k-z-totalbar);display:flex;align-items:center;gap:var(--k-s-4);
  padding:var(--k-s-3) var(--k-s-4) calc(var(--k-s-3) + env(safe-area-inset-bottom));margin:var(--k-s-5) 0 0;border-radius:var(--k-r-md) var(--k-r-md) 0 0;
  background:var(--k-surface);border-top:var(--k-border) solid var(--k-line);box-shadow:0 -6px 20px rgb(0 0 0 / .06)}
.k-totalbar__item{display:flex;flex-direction:column;min-width:0}
.k-totalbar__label{font-size:var(--k-fs-xs);color:var(--k-ink-3);line-height:1.3;white-space:nowrap}
.k-totalbar__value{font:var(--k-fw-strong) var(--k-fs-lg)/1.15 var(--k-font-num);font-variant-numeric:var(--k-num-features);color:var(--k-ink);white-space:nowrap}
.k-totalbar__value--main{font-size:var(--k-fs-num)}
.k-totalbar__sub{font-size:var(--k-fs-xs);color:var(--k-ink-3)}
.k-totalbar__actions{display:flex;gap:var(--k-s-2);margin-left:auto;flex:none}
@media (max-width:420px){
  .k-totalbar{gap:var(--k-s-3);padding-inline:var(--k-s-3)}
  .k-totalbar__value{font-size:var(--k-fs-md)}
  .k-totalbar__value--main{font-size:var(--k-fs-lg)}
  .k-totalbar__actions .k-btn{padding-inline:var(--k-s-3)}
  .k-totalbar__item:nth-child(n+3):not(:has(.k-totalbar__value--main)){display:none}
}
.k-totalbar--aside{position:static;flex-direction:column;align-items:stretch;gap:var(--k-s-3);margin:0;padding:var(--k-pad-card);border:var(--k-border) solid var(--k-line);border-radius:var(--k-r-md);box-shadow:var(--k-shadow-1)}
.k-totalbar--aside .k-totalbar__item{flex-direction:row;justify-content:space-between;align-items:baseline;gap:var(--k-s-3)}
.k-totalbar--aside .k-totalbar__item:has(.k-totalbar__value--main){padding-top:var(--k-s-3);border-top:var(--k-border) solid var(--k-line)}
.k-totalbar--aside .k-totalbar__actions{margin:0;flex-direction:column}
.k-totalbar--aside .k-totalbar__actions .k-btn{width:100%}

/* ── Шапка приложения ──
   <header class="k-header"><a class="k-header__brand">…</a><nav class="k-header__nav"><button class="k-header__tab" aria-current="page">…</button></nav><div class="k-header__actions">…</div></header>
   Активная вкладка: aria-current="page" или .active (совместимость с app.js). */
.k-header{position:sticky;top:0;z-index:var(--k-z-header);display:flex;align-items:center;gap:var(--k-s-4);min-height:var(--k-header-h,64px);padding:var(--k-s-2) max(var(--k-gutter),calc((100vw - var(--k-page-max)) / 2));background:var(--k-surface);border-bottom:var(--k-border) solid var(--k-line)}
.k-header__brand{display:inline-flex;align-items:center;gap:var(--k-s-2);flex:none;color:var(--k-ink);text-decoration:none;font:var(--k-fw-display) var(--k-fs-lg)/1 var(--k-font-display);letter-spacing:.02em}
.k-header__mark{width:28px;height:28px;flex:none}
.k-header__brand span,.k-header__brand small{color:inherit}
.k-header__brand small{opacity:.78}
.k-header__nav{display:flex;align-items:center;gap:var(--k-s-1);margin-inline:auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.k-header__nav::-webkit-scrollbar{display:none}
.k-header__tab{display:inline-flex;align-items:center;gap:var(--k-s-2);min-height:var(--k-h-sm);padding:0 var(--k-s-3);margin:0;border:0;border-radius:var(--k-r-control);background:transparent;color:var(--k-ink-2);font:var(--k-fw-strong) var(--k-fs-sm)/1.2 var(--k-font-sans);white-space:nowrap;cursor:pointer;text-decoration:none}
.k-header__tab:hover{background:var(--k-surface-2);color:var(--k-ink)}
.k-header__tab[aria-current="page"],.k-header__tab.active{background:var(--k-surface-2);color:var(--k-ink)}
.k-header__actions{display:flex;align-items:center;gap:var(--k-s-2);flex:none}
@media (max-width:760px){
  .k-header{--k-header-h:56px;gap:var(--k-s-2);padding:var(--k-s-2) var(--k-gutter)}
  .k-header .k-header__brand{display:inline-flex;min-width:0;margin-right:auto;font-size:var(--k-fs-md)}
  .k-header__brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .k-header__brand small{display:none}
  .k-header .k-theme-switch .k-segment__item{padding:0 6px}
}
.k-header{flex-wrap:nowrap}
@media (max-width:440px){.k-header:has(.k-theme-switch:not([hidden])) .k-header__brand span{display:none}}

/* ── Переключатель темы (стенд и настройки) ──
   <div class="k-theme-switch" data-theme-switch>…</div> — разметку строит design/theme.js. */
.k-theme-switch{display:flex;align-items:center;gap:var(--k-s-1)}
.k-theme-switch .k-segment{padding:2px}
.k-theme-switch .k-segment__item{min-height:30px;padding:0 var(--k-s-2);font-size:var(--k-fs-xs)}
.k-theme-switch__mode{min-height:34px;width:34px}

/* ── Нижний лист / диалог ── */
.k-sheet{width:min(560px,calc(100% - 2 * var(--k-gutter)));max-height:min(88dvh,800px);padding:var(--k-pad-card);border:var(--k-border) solid var(--k-line);border-radius:var(--k-r-lg);background:var(--k-surface);color:var(--k-ink);box-shadow:var(--k-shadow-3)}
.k-sheet::backdrop{background:var(--k-overlay)}
.k-sheet__head{display:flex;align-items:center;justify-content:space-between;gap:var(--k-s-3);margin-bottom:var(--k-s-4)}
@media (max-width:760px){.k-sheet{width:100%;max-width:100%;margin:auto 0 0;border-radius:var(--k-r-lg) var(--k-r-lg) 0 0;padding-bottom:calc(var(--k-pad-card) + env(safe-area-inset-bottom))}}

/* ── Поиск ── */
.k-search{position:relative;display:flex;align-items:center}
.k-search .k-icon{position:absolute;left:var(--k-s-3);color:var(--k-ink-3);pointer-events:none}
.k-search .k-field__input{padding-left:calc(var(--k-s-3) + 1.25em + var(--k-s-2))}

/* ── Скелет загрузки ── */
.k-skeleton{display:block;min-height:1em;border-radius:var(--k-r-xs);background:linear-gradient(90deg,var(--k-surface-2) 25%,var(--k-surface-3) 50%,var(--k-surface-2) 75%);background-size:300% 100%;animation:k-shimmer 1.4s ease-in-out infinite}
@keyframes k-shimmer{from{background-position:100% 0}to{background-position:0 0}}

/* ── Сообщение в потоке страницы ── */
.k-note{display:flex;gap:var(--k-s-2);align-items:flex-start;padding:var(--k-s-3) var(--k-s-4);border-radius:var(--k-r-sm);background:var(--k-info-soft);color:var(--k-ink);font-size:var(--k-fs-sm)}
.k-note .k-icon{color:var(--k-info);margin-top:1px}
.k-note--warning{background:var(--k-warning-soft)}.k-note--warning .k-icon{color:var(--k-warning)}
.k-note--danger{background:var(--k-danger-soft)}.k-note--danger .k-icon{color:var(--k-danger)}
.k-note--success{background:var(--k-success-soft)}.k-note--success .k-icon{color:var(--k-success)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
}
@media print{
  body{background:#fff;color:#000}
  .k-header,.k-totalbar,.k-toast-region,.k-theme-switch{display:none!important}
}