/* ============================================================================
   Страницы Agata Control (control.agata24.ru) и Техкарт (cards.agata24.ru)
   поверх оболочки дизайн-системы (static/css/ui.css). Только то, чего нет
   в ui.css: сетки метрик и доски, поля Django-форм, редактор техкарты.
   Префикс .oth-. Подключается через {% block extra_head %} на своих страницах.
   ========================================================================== */

/* ---------- Метрики: 4 в ряд на компьютере, 2 на телефоне ---------- */
.oth-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ui-s3); }
.oth-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oth-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-stat.is-active { border-color: var(--ui-primary); box-shadow: 0 0 0 2px var(--ui-primary-tint); }
.ui-stat__value--text { font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.oth-stat-progress { margin-top: 6px; }

/* ---------- Заголовок страницы: подзаголовок с бейджами ---------- */
.oth-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ui-muted); font-size: var(--ui-fs-sm); }

/* ---------- Доска действий: колонки-карточки со строками ---------- */
.oth-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: var(--ui-s4); align-items: start; }
.oth-board .ui-card__head { padding: 12px 16px; }
.oth-board .ui-card__title { font-size: 15px; }
.oth-board .ui-row { padding: 10px 16px; min-height: 56px; }
.oth-board .ui-row__title { font-size: 14px; }
.oth-board__empty { padding: 14px 16px; color: var(--ui-muted); font-size: var(--ui-fs-sm); }
.oth-board .ui-card--critical { border-color: var(--ui-warn-line); }
.oth-board .ui-card--critical .ui-card__head { background: var(--ui-warn-bg); border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0; }
.oth-board .ui-card--overdue { border-color: var(--ui-bad-line); }
.oth-board .ui-card--overdue .ui-card__head { background: var(--ui-bad-bg); border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0; }

/* ---------- Списки-строки внутри карточек ---------- */
.ui-card__body--flush .ui-list { border: 0; border-radius: 0; }
.ui-card__body--flush .ui-row:first-child { border-top: 0; }
.ui-card__body--flush > .ui-row:last-child { border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg); }
.oth-row-text { color: var(--ui-ink-2); font-size: 14px; line-height: 1.45; margin: 2px 0 0; }
.oth-row-text--muted { color: var(--ui-muted); }
.ui-row__meta .ui-badge { margin-left: -2px; }
.ui-row__aside .ui-icon--muted { color: var(--ui-line-strong); }

/* Замечание: заголовок + бейджи + текст + рекомендация */
.oth-finding { display: grid; gap: 6px; padding: 14px 16px; border-top: 1px solid var(--ui-line); }
.oth-finding:first-child { border-top: 0; }
.oth-finding__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.oth-finding__title { font-weight: 600; font-size: 15px; }
.oth-finding__text { margin: 0; color: var(--ui-ink-2); font-size: 14px; }
.oth-finding__rec { display: flex; gap: 8px; margin: 2px 0 0; padding: 8px 12px; border-radius: var(--ui-radius); background: var(--ui-surface-2); color: var(--ui-ink-2); font-size: 14px; }
.oth-finding__rec .ui-icon { flex: none; margin-top: 2px; color: var(--ui-primary); }
.oth-finding__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.oth-group-title { padding: 10px 16px 4px; font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); background: var(--ui-surface-2); border-top: 1px solid var(--ui-line); }
.oth-group-title:first-child { border-top: 0; }

/* Инлайн-формы с одной кнопкой (удалить, отправить) */
.oth-inline-form { display: inline; margin: 0; }
.oth-stack-form { display: grid; gap: var(--ui-s3); }

/* ---------- Ключ — значение в один ряд (реквизиты действия) ---------- */
.oth-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--ui-s3); margin: 0; }
.oth-facts div { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); min-width: 0; }
.oth-facts dt { font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); }
.oth-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Полоска фильтров (эксперт: компания + статус) ---------- */
.oth-filter { display: flex; flex-wrap: wrap; align-items: end; gap: var(--ui-s3); margin: 0; }
.oth-filter .ui-field { flex: 1 1 220px; }
.oth-filter .ui-btn { flex: none; }

/* ---------- Django-формы: виджеты в облике .ui-input без правки forms.py ---------- */
.oth-form { display: grid; gap: var(--ui-s4); }
.oth-form [hidden] { display: none !important; }
.oth-form :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="color"]) {
  width: 100%; min-height: var(--ui-input-h); padding: 10px 14px; box-sizing: border-box;
  border: 1px solid var(--ui-line-input); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ui-ink);
  font-family: var(--ui-font); font-size: 16px; font-weight: 400; line-height: 1.3;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
.oth-form :is(input, textarea)::placeholder { color: var(--ui-placeholder); }
.oth-form :is(input, select, textarea):hover { border-color: var(--ui-ink-2); }
.oth-form :is(input, select, textarea):focus { outline: none; border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-focus); }
.oth-form select:not([multiple]) {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4843' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px;
}
.oth-form textarea { min-height: 96px; resize: vertical; }
.oth-form .ui-input-group--icon .ui-input { padding-left: 42px; }
/* Файл: нативный input спрятан, видна кнопка дизайн-системы и имя выбранного файла (.ui-file из ui.css) */
.oth-form .ui-file { position: relative; flex-wrap: wrap; gap: 10px 14px; }
.oth-form .ui-file input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; opacity: 0; }
.oth-form .ui-file .ui-btn { flex: none; }
.oth-form .ui-file__name { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.oth-form .ui-file.has-file .ui-file__name { color: var(--ui-ink); font-weight: 500; }
.oth-form .ui-file:has(input:focus-visible) .ui-btn { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
.oth-form input[type="date"], .oth-form input[type="time"] { min-width: 0; }
.oth-form .ui-field.is-error :is(input, select, textarea) { border-color: var(--ui-bad); }
.oth-form .ui-field--check { padding: 2px 0; }
.oth-form--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oth-form--2 > .ui-field:has(textarea), .oth-form--2 > .ui-notice, .oth-form--2 > .oth-form__full { grid-column: 1 / -1; }
.oth-form__actions { display: flex; flex-wrap: wrap; gap: var(--ui-s2); padding-top: var(--ui-s1); }
.oth-form__actions .ui-btn--primary { min-width: 200px; }

/* ---------- Доказательства: строка с файлом ---------- */
.oth-evidence-name { font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Шаг-подсказка (что дальше) ---------- */
.oth-next { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--ui-radius-lg); background: var(--ui-primary-tint); border: 1px solid var(--ui-primary-line); }
.oth-next .ui-icon { flex: none; margin-top: 2px; color: var(--ui-primary); }
.oth-next__title { font-weight: 600; }
.oth-next__text { margin: 2px 0 0; color: var(--ui-ink-2); font-size: 14px; }
.oth-next--ok { background: var(--ui-ok-bg); border-color: var(--ui-ok-line); }
.oth-next--ok .ui-icon { color: var(--ui-ok); }
.oth-next--bad { background: var(--ui-bad-bg); border-color: var(--ui-bad-line); }
.oth-next--bad .ui-icon { color: var(--ui-bad); }
.oth-next--warn { background: var(--ui-warn-bg); border-color: var(--ui-warn-line); }
.oth-next--warn .ui-icon { color: var(--ui-warn); }

/* ---------- Публичная страница Agata Control ---------- */
.oth-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-s3); }
.oth-flow div { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); }
.oth-flow strong { font-size: 15px; }
.oth-flow span { color: var(--ui-muted); font-size: 14px; }
.oth-hero-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-s3); }

/* ---------- Техкарты ---------- */
.tc-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ui-s3); margin: 0; padding: 0; list-style: none; }
.tc-flow > * { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface-2); }
.tc-flow strong { font-size: 14px; color: var(--ui-ink); }
.tc-flow span { color: var(--ui-muted); font-size: var(--ui-fs-sm); }
.tc-kbju { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ui-ink-2); font-size: 14px; }
.tc-kbju b { font-weight: 600; color: var(--ui-ink); font-variant-numeric: tabular-nums; }
.tc-warnings { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ui-ink-2); font-size: 14px; }
.tc-check { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tc-check li { display: flex; gap: 8px; align-items: flex-start; color: var(--ui-ink-2); font-size: 14px; line-height: 1.45; }
.tc-check li .ui-icon { flex: none; margin-top: 2px; color: var(--ui-ok); }
.tc-text { white-space: pre-line; color: var(--ui-ink-2); margin: 0; }

/* Пакеты пополнения */
.tc-packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-s4); }
.tc-package { position: relative; display: grid; gap: 4px; align-content: start; padding: var(--ui-s5); margin: 0; }
.tc-package__badge { position: absolute; top: -12px; left: 16px; }
.tc-package__title { font-size: var(--ui-fs-h3); font-weight: 600; }
.tc-package__cards { font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tc-package__cards small { font-size: 15px; font-weight: 500; color: var(--ui-muted); margin-left: 4px; }
.tc-package__note { color: var(--ui-muted); font-size: var(--ui-fs-sm); min-height: 1.4em; }
.tc-package .ui-btn { margin-top: var(--ui-s3); }
.tc-amount--plus { color: var(--ui-ok); font-weight: 600; }
.tc-amount--minus { color: var(--ui-ink); font-weight: 600; }

/* Выбор способа создания */
.tc-choose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-s4); align-items: stretch; }
.tc-choose .ui-card__body { display: grid; gap: var(--ui-s3); align-content: start; height: 100%; }
.tc-choose .ui-btn { justify-self: start; margin-top: auto; }
.tc-choose__price { font-size: 14px; color: var(--ui-muted); }

/* Редактор техкарты: форма слева, расчёт справа (классы .tech-* нужны techcards-form.js) */
.ui-root .tech-form-layout, .site-mode-techcards.is-authenticated .tech-form-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .55fr); gap: var(--ui-s5); align-items: start; padding: 0; margin: 0; width: auto; max-width: none; }
.tech-form-main { display: grid; gap: var(--ui-s5); min-width: 0; }
.tech-form-aside { display: grid; gap: var(--ui-s3); align-content: start; position: sticky; top: calc(var(--ui-topbar-h) + 16px); min-width: 0; }
.tech-ingredient-editor { display: grid; gap: var(--ui-s3); }
.tech-ingredient-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px 14px; align-items: start; padding: var(--ui-s4); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-paper); }
.tech-ingredient-row.is-selected { border-color: var(--ui-primary-line); background: var(--ui-surface); }
.tech-ingredient-row.is-manual { border-color: var(--ui-amber-line); background: var(--ui-surface); }
.tech-ingredient-row.is-deleted { display: none; }
.tech-row-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tech-row-index { font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-primary); }
.tech-field-product { display: grid; gap: 6px; min-width: 0; }
.tech-field-hint { font-size: var(--ui-fs-sm); color: var(--ui-muted); }
.tech-row-numbers { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.tech-ingredient-row .ui-field { min-width: 0; }
.tech-ingredient-row .inline-check { grid-column: 1 / -1; }
.tech-ingredient-row .inline-check-hidden { display: none; }
.tech-ingredient-preview { grid-column: 1 / -1; display: grid; gap: 2px; padding: 10px 12px; border: 1px dashed var(--ui-line-strong); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-muted); font-size: var(--ui-fs-sm); }
.tech-ingredient-preview strong { color: var(--ui-ink); font-size: 14px; }
.tech-preview-line { color: var(--ui-ink-2); }
.tech-preview-hint { color: var(--ui-muted); }
.tech-preview-hint:empty { display: none; }
.tech-calc-card .ui-card__head { background: var(--ui-primary-tint); border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0; }
.tech-calc-stats { display: grid; }
.tech-calc-stats div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 20px; border-top: 1px solid var(--ui-line); }
.tech-calc-stats div:first-child { border-top: 0; }
.tech-calc-stats span { color: var(--ui-muted); font-size: var(--ui-fs-sm); font-weight: 500; }
.tech-calc-stats b { font-size: 16px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.tech-calc-kbju { flex-direction: column; align-items: flex-start !important; gap: 2px !important; }
.tech-calc-kbju b { font-size: 14px; font-weight: 600; text-align: left; }
.tech-calc-empty { margin: 0; padding: 14px 20px; color: var(--ui-muted); font-size: var(--ui-fs-sm); line-height: 1.5; }
.tech-calc-card.is-empty .tech-calc-stats { display: none; }
.tech-calc-card:not(.is-empty) .tech-calc-empty { display: none; }
.tech-actions { display: grid; gap: var(--ui-s2); }
.tech-actions-hint { margin: 0; text-align: center; color: var(--ui-muted); font-size: var(--ui-fs-xs); }
.tc-add-row { width: 100%; border-style: dashed; }

/* Окно ожидания ИИ */
.ai-loading-overlay { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; background: rgba(29, 28, 25, .5); }
.ai-loading-overlay[hidden] { display: none; }
.ai-loading-card { display: grid; gap: 12px; justify-items: center; text-align: center; width: 100%; max-width: 380px; padding: 32px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-lg); }
.ai-loading-card strong { font-size: 18px; }
.ai-loading-card span { color: var(--ui-muted); font-size: 14px; line-height: 1.5; }
.ai-loading-spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--ui-primary-tint); border-top-color: var(--ui-primary); animation: oth-spin .8s linear infinite; }
@keyframes oth-spin { to { transform: rotate(360deg); } }

/* Голосовой аудит */
.oth-record { display: grid; gap: var(--ui-s3); padding: var(--ui-s4); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-paper); }
.oth-record__status { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.oth-record__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ui-bad); box-shadow: 0 0 0 3px var(--ui-bad-bg); }
.oth-record__timer { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ui-muted); font-weight: 500; }
.oth-transcript { margin: 0; padding: 14px 16px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-paper); white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.5 var(--ui-font); color: var(--ui-ink-2); max-height: 480px; overflow: auto; }
.oth-quote { margin: 4px 0 0; padding: 8px 12px; border-left: 3px solid var(--ui-line-strong); color: var(--ui-muted); font-size: 14px; font-style: italic; }
.oth-audio { width: 100%; margin-top: 8px; }

/* ---------- Только на телефоне / только на компьютере (список вместо таблицы) ---------- */
.oth-only-mobile { display: none; }

/* ---------- Клиенты эксперта: подвал карточки ---------- */
.oth-client-foot__extra { display: flex; gap: var(--ui-s2); flex: none; }

/* ---------- Публичные страницы Техкарт (/ и /ttk/…) ---------- */
.tc-section { padding-top: var(--ui-s8); padding-bottom: var(--ui-s8); }
.tc-section__head { display: grid; gap: 6px; max-width: 64ch; margin-bottom: var(--ui-s5); }
.tc-section__head p { margin: 0; }
.tc-points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--ui-ink-2); font-size: 14px; font-weight: 500; }
.tc-points li { display: inline-flex; align-items: center; gap: 6px; }
.tc-points .ui-icon { color: var(--ui-ok); }
.tc-demo { display: grid; gap: 14px; padding: 20px; box-shadow: var(--ui-shadow-lg); }
.tc-demo__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tc-demo__head strong { font-size: 17px; }
.tc-demo__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tc-demo__metrics .ui-stat { padding: 10px 12px; gap: 2px; background: var(--ui-surface-2); border-color: transparent; }
.tc-demo__metrics .ui-stat__label { font-size: 12px; }
.tc-demo__metrics .ui-stat__value { font-size: 22px; }
.tc-demo__metrics .ui-stat__value--text { font-size: 15px; line-height: 1.6; }
.tc-demo__table { margin: 0; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); overflow: hidden; }
.tc-demo__table div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--ui-line); font-size: 14px; }
.tc-demo__table div:first-child { border-top: 0; }
.tc-demo__table dt { color: var(--ui-ink-2); }
.tc-demo__table dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.tc-demo__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 2px 0; }
.tc-demo__foot span { color: var(--ui-muted); font-size: 14px; }
.tc-demo__foot strong { font-size: 24px; color: var(--ui-amber-text); font-variant-numeric: tabular-nums; }
.tc-demo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 2px; border-top: 1px solid var(--ui-line); padding-top: 12px; }
.tc-demo__actions .ui-small { margin-right: auto; }
.tc-audience { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-s3); }
.tc-audience li { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 16px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); font-weight: 600; }
.tc-audience .ui-icon { flex: none; color: var(--ui-primary); }
.tc-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: var(--ui-s8); align-items: center; }
.tc-split__copy { display: grid; gap: var(--ui-s3); }
.tc-split__copy p { margin: 0; }
.tc-split__actions { display: flex; flex-wrap: wrap; gap: var(--ui-s2); margin-top: 4px; }
.tc-check--card { padding: 18px 20px; gap: 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); }
.tc-check--card li { font-size: 15px; color: var(--ui-ink); }
.tc-band--amber { background: var(--ui-amber-tint); border-color: var(--ui-amber-line); }
.tc-faq { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.tc-faq .ui-h2 { margin-bottom: 6px; }
.tc-faq__item { padding: 0 18px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); }
.tc-faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 0; font-weight: 600; cursor: pointer; }
.tc-faq__item summary::-webkit-details-marker { display: none; }
.tc-faq__item summary .ui-icon { flex: none; color: var(--ui-muted); transition: transform .15s ease; }
.tc-faq__item[open] summary .ui-icon { transform: rotate(180deg); }
.tc-faq__item p { margin: 0; padding: 0 0 16px; color: var(--ui-ink-2); }
.tc-cta { border-bottom: 0; }
.tc-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s6); }
.tc-cta__inner p { margin: 6px 0 0; max-width: 60ch; }
.tc-cta__actions { display: flex; flex-wrap: wrap; gap: var(--ui-s2); flex: none; }

/* Кнопки формы техкарты: на компьютере — обычный блок в правой колонке (липкость нужна только на телефоне) */
.tech-actions.ui-sticky-actions { position: static; display: grid; gap: var(--ui-s2); padding: 0; margin: 0; background: none; }
.tech-actions.ui-sticky-actions .ui-btn { width: 100%; }

/* ---------- Адаптив ---------- */
@media (min-width: 1101px) {
  /* Первый экран — только герой: плавающий «Помощник» не ложится на карточки шагов */
  .tc-hero { min-height: calc(100vh - 96px); }
}
@media (max-width: 1100px) {
  .ui-root .tech-form-layout, .site-mode-techcards.is-authenticated .tech-form-layout { grid-template-columns: 1fr; padding: 0; }
  /* Правая колонка распадается: расчёт встаёт под форму, а кнопки прилипают к низу экрана на всю длину формы */
  .tech-form-aside { display: contents; }
  /* Старое правило app.css режет overflow-x у .main — из-за него sticky не работает; на странице формы возвращаем visible */
  .site-mode-techcards.is-authenticated .ui-main:has(.tech-form-layout) { overflow: visible; }
  .tech-actions.ui-sticky-actions { position: sticky; display: flex; align-items: center; gap: 10px; padding: 12px 0; margin-top: var(--ui-s2); background: linear-gradient(to top, var(--ui-paper) 70%, rgba(247, 245, 240, 0)); }
  .tech-actions.ui-sticky-actions .ui-btn--primary { flex: 1; width: auto; min-height: 52px; }
  .tech-actions.ui-sticky-actions .ui-btn--ghost { width: auto; flex: none; }
  .tech-actions.ui-sticky-actions .tech-actions-hint { display: none; }
  .tc-packages { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .oth-stats, .oth-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-s2); }
  .oth-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-s2); }
  .oth-stats--3 .ui-stat { padding: 12px; }
  .oth-stats--3 .ui-stat__value { font-size: 22px; }
  .oth-stats--3 .ui-stat__value small { font-size: 13px; margin-left: 3px; }
  .tc-audience { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-split { grid-template-columns: 1fr; gap: var(--ui-s5); }
  .tc-cta__inner { flex-direction: column; align-items: stretch; }
  .tc-cta__actions { flex-direction: column; }
  .tc-cta__actions .ui-btn { width: 100%; }
  .tc-section { padding-top: var(--ui-s6); padding-bottom: var(--ui-s6); }
  .ui-stat { padding: var(--ui-s3) var(--ui-s4); }
  .oth-form--2 { grid-template-columns: 1fr; }
  .tc-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-s2); }
  .tc-choose { grid-template-columns: 1fr; }
  .oth-flow { grid-template-columns: 1fr; }
  .tech-ingredient-row { grid-template-columns: 1fr; }
  .oth-form__actions .ui-btn--primary { flex: 1 1 100%; min-width: 0; }
  .oth-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-s2); }
}
@media (max-width: 700px) {
  .oth-only-mobile { display: grid; }
  .oth-only-desktop { display: none; }
  .oth-client-foot { display: grid; gap: var(--ui-s2); }
  .oth-client-foot > .ui-btn { width: 100%; }
  .oth-client-foot__extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-hero .ui-hero__actions { flex-direction: column; align-items: stretch; }
  .tc-flow { grid-template-columns: 1fr; }
  .tc-demo { padding: 16px; }
  .tc-demo__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-split__actions { flex-direction: column; }
  .tc-split__actions .ui-btn { width: 100%; }
  .tc-faq__item { padding: 0 14px; }
  .oth-filter { align-items: stretch; flex-direction: column; }
  .oth-filter .ui-field { flex: none; }
  .oth-filter .ui-btn { width: 100%; }
  .ui-page-head__actions { flex-wrap: wrap; }
  .ui-page-head__actions .ui-menu { flex: none; }
  .oth-board { grid-template-columns: 1fr; gap: var(--ui-s3); }
  /* На телефоне стрелка-шеврон в строке не нужна: вся строка — ссылка */
  .ui-row__aside:has(> .ui-icon:only-child) { display: none; }
  .ui-section__head { flex-wrap: wrap; }
  .ui-table--cards td.ui-table__primary + td::before { padding-top: 2px; }
}