.bx-v2-smart {
  --smart-ink: var(--ink, #202020);
  --smart-muted: var(--muted, #737373);
  --smart-muted-2: var(--muted-2, #959595);
  --smart-line: var(--line, rgba(32, 32, 32, 0.12));
  --smart-surface: var(--surface, #fdfdfd);
  --smart-surface-2: var(--surface-2, #e3e3e3);
  --smart-paper: var(--paper, #f3f3f3);
  --smart-accent: var(--accent, #ff5a36);
  --smart-success: var(--success, #39a467);
  --smart-danger: var(--danger-ink);
  --smart-warning: var(--warning, #c17c1d);
  /* Лестница глубины: холст под колонками → колонка → карточка. В светлой и
     тёмной теме «утопленный» слой берётся из разных токенов (в светлой самый
     тёмный — surface-2, в тёмной — paper), поэтому фиксируем её здесь, а не
     подставляем цвета руками по месту. */
  --smart-canvas: var(--surface-2, #e3e3e3);
  --smart-panel: var(--paper, #f3f3f3);
  --smart-card: var(--surface, #fdfdfd);
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 100svh;
  /* Средняя колонка ОБЯЗАНА быть ровно 1fr. По спеке сетки флексы суммой
     меньше единицы забирают лишь свою долю свободного места, а не всё: пока
     здесь стояло 0.9fr, стоило закрепить правую колонку в пикселях — и десятая
     часть остатка превращалась в мёртвую полосу у правого края. Пропорцию по
     умолчанию держит доля правой колонки. */
  grid-template-columns:
    var(--smart-nav-track, var(--smart-rail-w, 260px))
    var(--smart-rail-splitter, 7px)
    minmax(390px, 1fr)
    var(--smart-preview-splitter, 7px)
    var(--smart-preview-track, var(--smart-reality-w, minmax(410px, 1.2fr)));
  padding: 0;
  color: var(--smart-ink);
  background: var(--smart-canvas);
  overflow: clip;
}

:root[data-theme="dark"] .bx-v2-smart {
  --smart-canvas: var(--paper);
  /* Ступенька между бумагой и карточкой; поднята вместе с ними, иначе панель
     проваливается в чёрную дыру посреди смягчённой тёмной темы. */
  --smart-panel: #212121;
  --smart-card: var(--surface);
}

.bx-v2-smart.smart-nav-collapsed {
  --smart-nav-track: 56px;
  --smart-rail-splitter: 0px;
}

.bx-v2-smart.smart-preview-collapsed {
  --smart-preview-splitter: 0px;
  --smart-preview-track: 0px;
}

.bx-v2-smart.smart-preview-collapsed .smart-preview,
.bx-v2-smart.smart-nav-collapsed [data-splitter="rail"],
.bx-v2-smart.smart-preview-collapsed [data-splitter="reality"] {
  display: none;
}

.bx-v2-smart.is-loading {
  grid-template-columns: 260px minmax(390px, 1fr) minmax(410px, 1.2fr);
}

.bx-v2-smart *,
.bx-v2-smart *::before,
.bx-v2-smart *::after {
  box-sizing: border-box;
}

.bx-v2-smart button,
.bx-v2-smart input,
.bx-v2-smart select,
.bx-v2-smart textarea {
  color: inherit;
  font: inherit;
}

.bx-v2-smart button {
  border: 0;
  cursor: pointer;
}

.bx-v2-smart button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.bx-v2-smart .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.bx-v2-smart .smart-nav {
  position: sticky;
  top: 0;
  display: flex;
  min-width: 0;
  height: 100svh;
  flex-direction: column;
  padding: 22px 14px 14px;
  background: var(--smart-surface);
  border-right: 1px solid var(--smart-line);
  overflow: hidden;
}

.bx-v2-smart .smart-splitter {
  position: sticky;
  z-index: 8;
  top: 0;
  display: block;
  width: 7px;
  height: 100svh;
  padding: 0;
  background: var(--smart-canvas);
  cursor: col-resize;
  outline: 0;
  touch-action: none;
}

.bx-v2-smart .smart-splitter > i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 52px;
  background: color-mix(in srgb, var(--smart-ink) 18%, transparent);
  border-radius: var(--radius-pill);
  content: "";
  transform: translate(-50%, -50%);
  transition:
    width 140ms ease,
    height 140ms ease,
    background 140ms ease;
}

.bx-v2-smart .smart-splitter:hover > i,
.bx-v2-smart .smart-splitter:focus-visible > i,
.bx-v2-smart.is-resizing .smart-splitter > i {
  width: 3px;
  height: 76px;
  background: var(--smart-accent);
}

.bx-v2-smart.is-resizing {
  cursor: col-resize;
  user-select: none;
}

.bx-v2-smart .smart-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 7px 22px;
}

.bx-v2-smart .smart-brand > span {
  min-width: 0;
  flex: 1;
}

.bx-v2-smart .smart-nav-list-toggle {
  color: var(--smart-muted);
  background: transparent;
}

.bx-v2-smart .smart-nav-list-toggle:hover {
  color: var(--smart-ink);
  background: var(--smart-paper);
}

.bx-v2-smart .smart-brand strong,
.bx-v2-smart .smart-brand small {
  display: block;
}

.bx-v2-smart .smart-brand strong {
  font-size: 14px;
  letter-spacing: -0.015em;
}

.bx-v2-smart .smart-brand small {
  margin-top: 1px;
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-flow-picker {
  display: block;
  margin: 0 7px;
}

.bx-v2-smart .smart-mobile-pane-switch {
  display: none;
}

.bx-v2-smart .smart-mobile-item-picker {
  display: block;
  margin: 10px 7px 0;
}

.bx-v2-smart .smart-flow-picker > .smart-flow-picker-label,
.bx-v2-smart .smart-mobile-item-picker > span,
.bx-v2-smart .field > span,
.bx-v2-smart .field > label,
.bx-v2-smart .field label {
  display: block;
  margin-bottom: 6px;
  color: var(--smart-muted);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bx-v2-smart .smart-flow-picker-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bx-v2-smart .smart-flow-picker-label > strong {
  padding: 2px 5px;
  color: var(--smart-accent);
  background: color-mix(in srgb, var(--smart-accent) 9%, transparent);
  border-radius: var(--radius-4);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.bx-v2-smart .smart-flow-select-shell {
  position: relative;
  display: block;
}

.bx-v2-smart .smart-flow-select-shell > .icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 11px;
  width: 16px;
  height: 16px;
  color: var(--smart-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.bx-v2-smart .smart-flow-picker select,
.bx-v2-smart .smart-mobile-item-picker select,
.bx-v2-smart .field input,
.bx-v2-smart .field select,
.bx-v2-smart .field textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  background: var(--smart-surface);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
  outline: 0;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.bx-v2-smart .smart-flow-picker select,
.bx-v2-smart .smart-mobile-item-picker select {
  appearance: none;
  padding-right: 32px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--smart-muted) 50%),
    linear-gradient(135deg, var(--smart-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 15px) 17px,
    calc(100% - 10px) 17px;
  background-repeat: no-repeat;
  background-size: 5px 5px;
  font-size: 13px;
  font-weight: 700;
}

.bx-v2-smart .smart-flow-select-shell select {
  padding-left: 36px;
}

.bx-v2-smart .smart-flow-picker select:focus-visible,
.bx-v2-smart .smart-mobile-item-picker select:focus-visible,
.bx-v2-smart .field input:focus-visible,
.bx-v2-smart .field select:focus-visible,
.bx-v2-smart .field textarea:focus-visible,
.bx-v2-smart .smart-example-search input:focus-visible {
  border-color: color-mix(in srgb, var(--smart-accent) 62%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--smart-accent) 12%, transparent);
}

.bx-v2-smart .smart-flow-caption {
  margin: 12px 8px 2px;
  padding: 11px 1px 0;
  border-top: 1px solid var(--smart-line);
}

.bx-v2-smart .smart-flow-caption strong,
.bx-v2-smart .smart-flow-caption small {
  display: block;
}

.bx-v2-smart .smart-flow-caption strong {
  font-size: 12px;
}

.bx-v2-smart .smart-flow-caption small {
  margin-top: 4px;
  color: var(--smart-muted);
  font-size: 12px;
  line-height: 1.45;
}

.bx-v2-smart .smart-nav-list-toggle {
  display: flex;
  width: calc(100% - 14px);
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 7px 0;
  padding: 7px 9px;
  border-radius: var(--radius-8);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.bx-v2-smart .smart-nav-list-toggle .icon {
  width: 14px;
  height: 14px;
  transition: transform 160ms ease;
}

.bx-v2-smart .smart-nav-list-toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.bx-v2-smart .smart-nav-scroll {
  min-height: 0;
  margin: 0 -4px;
  padding: 0 4px 24px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--smart-line) transparent;
}

.bx-v2-smart .smart-nav-scroll[hidden] {
  display: none;
}

.bx-v2-smart .scenario-group {
  margin-top: 20px;
}

.bx-v2-smart .scenario-group > span {
  display: block;
  margin: 0 8px 8px;
  color: var(--smart-muted-2);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bx-v2-smart .scenario-btn {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  color: var(--smart-muted);
  background: transparent;
  border-radius: var(--radius-8);
  text-align: left;
  transition:
    color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}

.bx-v2-smart .scenario-btn:hover {
  color: var(--smart-ink);
  background: var(--smart-paper);
  transform: translateX(2px);
}

.bx-v2-smart .scenario-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--smart-accent) 60%, transparent);
  outline-offset: 1px;
}

.bx-v2-smart .scenario-btn.active {
  color: var(--smart-ink);
  background: var(--smart-paper);
  font-weight: 700;
}

.bx-v2-smart .scenario-btn.active::after {
  position: absolute;
  top: 9px;
  right: 5px;
  bottom: 9px;
  width: 2px;
  background: var(--smart-accent);
  border-radius: var(--radius-pill);
  content: "";
}

.bx-v2-smart .scenario-btn > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bx-v2-smart .scenario-btn small {
  margin-left: auto;
  color: var(--smart-muted-2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.bx-v2-smart .status-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--smart-muted-2);
  border-radius: 50%;
}

.bx-v2-smart .status-dot.success {
  background: var(--smart-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--smart-success) 10%, transparent);
}

.bx-v2-smart .smart-config,
.bx-v2-smart .smart-preview {
  min-width: 0;
  height: 100svh;
  padding: 28px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--smart-line) transparent;
}

.bx-v2-smart .smart-config {
  container-name: smart-config;
  container-type: inline-size;
  padding-bottom: 104px;
  background: var(--smart-panel);
  border-right: 1px solid var(--smart-line);
}

.bx-v2-smart .smart-preview {
  background: var(--smart-surface);
}

.bx-v2-smart .smart-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 24px;
  animation: smart-rise 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.bx-v2-smart .smart-head > div {
  min-width: 0;
}

.bx-v2-smart .smart-head h1,
.bx-v2-smart .smart-head h2 {
  margin: 0;
  font-size: clamp(25px, 2.2vw, 30px);
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.bx-v2-smart .smart-title-with-badge {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.bx-v2-smart .smart-scenario-badge {
  display: inline-flex;
  max-width: 240px;
  min-height: 0;
  align-items: center;
  padding: .15em .5em;
  overflow: hidden;
  color: color-mix(in srgb, var(--smart-success) 78%, var(--smart-ink));
  background: color-mix(in srgb, var(--smart-success) 10%, var(--smart-paper));
  border: 1px solid color-mix(in srgb, var(--smart-success) 30%, var(--smart-line));
  border-radius: var(--radius-pill);
  font-size: .86em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2-smart .smart-scenario-badge.is-off {
  color: var(--smart-muted);
  background: var(--smart-paper);
  border-color: var(--smart-line);
}

.bx-v2-smart .smart-head p {
  max-width: 560px;
  margin: 6px 0 0;
  color: var(--smart-muted);
  font-size: 14px;
  line-height: 1.5;
}

.bx-v2-smart .eyebrow {
  margin-bottom: 8px;
  color: var(--smart-muted-2);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bx-v2-smart .toggle {
  position: relative;
  width: 40px;
  height: 23px;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0;
  background: var(--smart-surface-2);
  border-radius: var(--radius-pill);
  transition: background 180ms ease;
}

.bx-v2-smart .toggle::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  background: var(--smart-card);
  border-radius: 50%;
  content: "";
  transition: transform 180ms ease;
}

.bx-v2-smart .toggle.on {
  background: var(--smart-success);
}

.bx-v2-smart .toggle.on::after {
  transform: translateX(17px);
}

.bx-v2-smart .config-section {
  margin-bottom: 16px;
  padding: 20px;
  background: color-mix(in srgb, var(--smart-card) 68%, transparent);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-16);
  animation: smart-rise 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.bx-v2-smart .config-section:nth-of-type(3) {
  animation-delay: 35ms;
}

.bx-v2-smart .config-section:nth-of-type(4) {
  animation-delay: 70ms;
}

/* Local saves replace only the affected fragment. Entrance motion belongs to
   navigation, not to an already visible form acknowledging a change. */
.bx-v2-smart .smart-local-update,
.bx-v2-smart .smart-local-update .smart-tool-override-body,
.bx-v2-smart .smart-local-update .smart-tag-inspector {
  animation: none;
}

.bx-v2-smart .smart-preview.smart-local-refresh .smart-head,
.bx-v2-smart .smart-preview.smart-local-refresh .preview-step,
.bx-v2-smart .smart-preview.smart-local-refresh .smart-tag-inspector {
  animation: none;
}

/* Заголовок и примечание — одной колонкой, строкой под строкой. Раньше они
   расходились по краям, и длинное примечание («Слой 3, §6.5. ПРОМТ-ЯЗЫК: …»)
   вставало прижатым к правому краю на пол-ширины: читать сам промт рядом с
   такой стеной было нечем. Пара «слева-справа» хороша для коротких подписей,
   но эти примечания короткими не бывают. */
.bx-v2-smart .smart-section-head {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}

.bx-v2-smart .smart-section-head small {
  text-align: start;
}

.bx-v2-smart .smart-section-head h3 {
  margin: 0;
  font-size: 15px;
}

.bx-v2-smart .smart-section-head small {
  max-width: 58%;
  color: var(--smart-muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: right;
}

.bx-v2-smart .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.bx-v2-smart .smart-settings-grid {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--smart-line);
}

/* Поля, которые при текущей политике в запрос не уходят. Они остаются
   рабочими — их читает ручной разбор, — но не должны выглядеть описанием
   того, что уедет модели прямо сейчас. */
.bx-v2-smart .smart-settings-dormant {
  display: grid;
  gap: 13px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--smart-line);
}

.bx-v2-smart .smart-settings-dormant .form-grid {
  opacity: .72;
}

.bx-v2-smart .smart-settings-dormant .form-grid:focus-within {
  opacity: 1;
}

.bx-v2-smart .smart-field-wide {
  grid-column: 1 / -1;
}

.bx-v2-smart .field {
  display: block;
  min-width: 0;
}

.bx-v2-smart .field input,
.bx-v2-smart .field select {
  font-size: 13px;
}

.bx-v2-smart .field textarea {
  min-height: 240px;
  resize: vertical;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.62;
  tab-size: 2;
}

.bx-v2-smart .smart-prompt-part .field textarea {
  min-height: 180px;
  margin-top: 12px;
}

.bx-v2-smart .smart-number {
  position: relative;
  display: block;
}

.bx-v2-smart .smart-number input {
  padding-right: 66px;
}

.bx-v2-smart .smart-number small {
  position: absolute;
  top: 50%;
  right: 10px;
  color: var(--smart-muted-2);
  font-size: 12px;
  pointer-events: none;
  transform: translateY(-50%);
}

.bx-v2-smart .smart-static-field {
  min-height: 62px;
  padding: 10px;
  background: color-mix(in srgb, var(--smart-surface-2) 48%, transparent);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-static-field strong {
  font-size: 12px;
}

.bx-v2-smart .smart-check-field {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 11px;
  background: var(--smart-surface);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-check-field > span {
  min-width: 0;
}

.bx-v2-smart .smart-check-field strong,
.bx-v2-smart .smart-check-field small {
  display: block;
}

.bx-v2-smart .smart-check-field strong {
  font-size: 12px;
}

.bx-v2-smart .smart-check-field small {
  margin-top: 3px;
  color: var(--smart-muted);
  font-size: 12px;
  line-height: 1.35;
}

.bx-v2-smart .smart-check-field input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  accent-color: var(--smart-success);
}

.bx-v2-smart .smart-rule-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px;
  color: var(--smart-muted);
  background: color-mix(in srgb, var(--smart-surface-2) 48%, transparent);
  border-radius: var(--radius-8);
  font-size: 12px;
  line-height: 1.45;
}

.bx-v2-smart .smart-rule-note .icon {
  width: 16px;
  height: 16px;
  color: var(--smart-accent);
}

.bx-v2-smart .smart-contract-list {
  display: grid;
  gap: 7px;
}

.bx-v2-smart .smart-contract-row {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 11px;
  background: var(--smart-surface);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-contract-row > span {
  min-width: 0;
}

.bx-v2-smart .smart-contract-row strong,
.bx-v2-smart .smart-contract-row small {
  display: block;
}

.bx-v2-smart .smart-contract-row strong {
  font-size: 12px;
}

.bx-v2-smart .smart-contract-row small {
  margin-top: 3px;
  color: var(--smart-muted);
  font-size: 12px;
  line-height: 1.4;
}

.bx-v2-smart .smart-contract-row em {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: color-mix(in srgb, var(--smart-success) 76%, var(--smart-ink));
  background: color-mix(in srgb, var(--smart-success) 10%, transparent);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}

.bx-v2-smart .smart-contract-row em.is-optional {
  color: var(--smart-muted);
  background: var(--smart-paper);
}

.bx-v2-smart .smart-contract-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 11px;
  color: color-mix(in srgb, var(--smart-danger) 74%, var(--smart-ink));
  background: color-mix(in srgb, var(--smart-danger) 7%, var(--smart-surface));
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-contract-error .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.bx-v2-smart .smart-contract-error strong,
.bx-v2-smart .smart-contract-error small {
  display: block;
}

.bx-v2-smart .smart-contract-error strong {
  font-size: 12px;
}

.bx-v2-smart .smart-contract-error small {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
}

.bx-v2-smart .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bx-v2-smart .smart-tag-row {
  margin-bottom: 10px;
}

.bx-v2-smart .tag,
.bx-v2-smart .chip {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  padding: 3px 8px;
  color: var(--smart-muted);
  background: color-mix(in srgb, var(--smart-surface-2) 58%, transparent);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-pill);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
}

.bx-v2-smart .tag {
  --smart-tag-color: var(--smart-accent);
  color: color-mix(in srgb, var(--smart-tag-color) 82%, var(--smart-ink));
  background: color-mix(in srgb, var(--smart-tag-color) 9%, var(--smart-surface));
  border-color: color-mix(in srgb, var(--smart-tag-color) 30%, var(--smart-line));
}

.bx-v2-smart button.tag {
  cursor: pointer;
  transition:
    color 140ms ease,
    background 140ms ease,
    border-color 140ms ease;
}

.bx-v2-smart button.tag:hover,
.bx-v2-smart button.tag.active {
  color: color-mix(in srgb, var(--smart-tag-color) 78%, var(--smart-ink));
  background: color-mix(in srgb, var(--smart-tag-color) 16%, var(--smart-surface));
  border-color: color-mix(in srgb, var(--smart-tag-color) 58%, var(--smart-line));
  box-shadow: inset 0 -2px 0 var(--smart-tag-color);
}

.bx-v2-smart .chip.success {
  color: var(--smart-success);
  background: color-mix(in srgb, var(--smart-success) 9%, var(--smart-card));
  border-color: color-mix(in srgb, var(--smart-success) 25%, transparent);
  font-family: inherit;
  font-weight: 700;
}

.bx-v2-smart .smart-tag-inspector {
  --smart-tag-color: var(--smart-accent);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  margin: 0;
  padding: 13px 42px 13px 13px;
  background: color-mix(in srgb, var(--smart-tag-color) 6%, var(--smart-surface));
  border: 1px solid color-mix(in srgb, var(--smart-tag-color) 28%, var(--smart-line));
  border-radius: var(--radius-12);
  animation: smart-rise 180ms ease both;
}

.bx-v2-smart .smart-tag-inspector.has-preview {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.bx-v2-smart .smart-tag-preview-card {
  width: 64px;
  height: 64px;
  align-self: start;
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-tag-preview-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bx-v2-smart .smart-tag-facts {
  display: grid;
  gap: 5px;
  margin: 10px 0 0;
}

.bx-v2-smart .smart-tag-facts > div {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 9px;
}

.bx-v2-smart .smart-tag-facts dt,
.bx-v2-smart .smart-tag-facts dd {
  min-width: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.bx-v2-smart .smart-tag-facts dt {
  color: var(--smart-muted-2);
  font-weight: 750;
  text-transform: uppercase;
}

.bx-v2-smart .smart-tag-facts dd {
  overflow-wrap: anywhere;
}

.bx-v2-smart .smart-tag-inspector > .icon-btn {
  position: absolute;
  top: 7px;
  right: 7px;
}

.bx-v2-smart .smart-tag-inspector .tag {
  width: fit-content;
  margin-bottom: 7px;
}

.bx-v2-smart .smart-tag-inspector strong,
.bx-v2-smart .smart-tag-inspector small {
  display: block;
}

.bx-v2-smart .smart-tag-inspector strong {
  font-size: 12px;
}

.bx-v2-smart .smart-tag-inspector small {
  margin-top: 4px;
  color: var(--smart-muted);
  font-size: 12px;
  line-height: 1.45;
}

.bx-v2-smart .icon-btn {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  color: var(--smart-muted);
  background: transparent;
  border-radius: var(--radius-8);
}

.bx-v2-smart .icon-btn:hover {
  color: var(--smart-ink);
  background: var(--smart-paper);
}

.bx-v2-smart .icon-btn .icon {
  width: 14px;
  height: 14px;
}

.bx-v2-smart .smart-prompt-part {
  margin-top: 12px;
  padding: 0;
  background: color-mix(in srgb, var(--smart-surface-2) 30%, transparent);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-prompt-part summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px;
  cursor: pointer;
  list-style: none;
}

.bx-v2-smart .smart-prompt-part summary::-webkit-details-marker {
  display: none;
}

.bx-v2-smart .smart-prompt-part summary strong,
.bx-v2-smart .smart-prompt-part summary small {
  display: block;
}

.bx-v2-smart .smart-prompt-part summary strong {
  font-size: 12px;
}

.bx-v2-smart .smart-prompt-part summary small {
  margin-top: 3px;
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-prompt-part summary .icon {
  width: 15px;
  height: 15px;
  transition: transform 160ms ease;
}

.bx-v2-smart .smart-prompt-part[open] summary .icon {
  transform: rotate(180deg);
}

.bx-v2-smart .smart-prompt-part > .field {
  padding: 0 12px 12px;
}

.bx-v2-smart .smart-tool-links {
  display: grid;
  gap: 7px;
}

.bx-v2-smart .smart-tool-overrides {
  display: grid;
  gap: 8px;
}

.bx-v2-smart .smart-tool-override {
  overflow: hidden;
  background: var(--smart-surface);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-12);
}

.bx-v2-smart .smart-tool-override.disabled {
  opacity: 0.68;
}

.bx-v2-smart .smart-tool-override-head {
  display: grid;
  width: 100%;
  min-height: 54px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  color: inherit;
  background: transparent;
  text-align: left;
}

.bx-v2-smart .smart-tool-override-head:hover {
  background: var(--smart-paper);
}

.bx-v2-smart .smart-tool-override-head strong,
.bx-v2-smart .smart-tool-override-head small {
  display: block;
}

.bx-v2-smart .smart-tool-override-head strong {
  font-size: 12px;
}

.bx-v2-smart .smart-tool-override-head small {
  max-width: 100%;
  margin-top: 3px;
  overflow: hidden;
  color: var(--smart-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2-smart .smart-tool-override-head > .icon {
  width: 14px;
  height: 14px;
  color: var(--smart-muted-2);
  transition: transform 160ms ease;
}

.bx-v2-smart .smart-tool-override.open .smart-tool-override-head > .icon {
  transform: rotate(180deg);
}

.bx-v2-smart .smart-tool-override-body {
  padding: 13px;
  border-top: 1px solid var(--smart-line);
  animation: smart-rise 170ms ease both;
}

.bx-v2-smart .smart-tool-override-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.bx-v2-smart .smart-tool-override-actions .smart-check-field {
  min-height: 46px;
  border: 0;
  padding: 6px 0;
}

.bx-v2-smart .smart-override-grid {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--smart-line);
}

.bx-v2-smart .smart-tool-links button {
  display: grid;
  width: 100%;
  min-height: 54px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  color: inherit;
  background: var(--smart-surface);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
  text-align: left;
  transition:
    border-color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.bx-v2-smart .smart-tool-links button:hover {
  border-color: color-mix(in srgb, var(--smart-ink) 26%, transparent);
  transform: translateY(-1px);
}

.bx-v2-smart .smart-tool-links button strong,
.bx-v2-smart .smart-tool-links button small {
  display: block;
}

.bx-v2-smart .smart-tool-links button strong {
  font-size: 12px;
}

.bx-v2-smart .smart-tool-links button small {
  margin-top: 3px;
  color: var(--smart-muted);
  font-size: 12px;
  line-height: 1.35;
}

.bx-v2-smart .smart-tool-links button > .icon {
  width: 14px;
  height: 14px;
  color: var(--smart-muted-2);
}

.bx-v2-smart .smart-flow-mark {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: var(--smart-muted);
  background: var(--smart-paper);
  border-radius: var(--radius-8);
  font-size: 12px;
  font-weight: 800;
}

.bx-v2-smart .smart-access {
  display: inline-flex;
  max-width: 170px;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 8px;
  color: var(--smart-success);
  background: color-mix(in srgb, var(--smart-success) 8%, var(--smart-card));
  border: 1px solid color-mix(in srgb, var(--smart-success) 20%, transparent);
  border-radius: var(--radius-pill);
  font-size: 12px;
  line-height: 1.25;
}

.bx-v2-smart .smart-access i {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  background: currentColor;
  border-radius: 50%;
}

.bx-v2-smart .smart-access.is-off {
  color: var(--smart-danger);
  background: color-mix(in srgb, var(--smart-danger) 8%, var(--smart-card));
  border-color: color-mix(in srgb, var(--smart-danger) 20%, transparent);
}

.bx-v2-smart .smart-system-nested {
  display: grid;
  gap: 12px;
}

.bx-v2-smart .smart-system-nested > section {
  padding: 13px;
  background: color-mix(in srgb, var(--smart-surface-2) 30%, transparent);
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-system-nested > section > strong {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
}

.bx-v2-smart .smart-vocabs {
  display: grid;
  gap: 10px;
}

.bx-v2-smart .smart-vocabs > label {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--smart-line);
}

.bx-v2-smart .smart-vocabs > label:first-child {
  padding-top: 0;
  border-top: 0;
}

.bx-v2-smart .smart-vocabs strong,
.bx-v2-smart .smart-vocabs small {
  display: block;
}

.bx-v2-smart .smart-vocabs strong {
  font-size: 12px;
}

.bx-v2-smart .smart-vocabs small {
  margin-top: 3px;
  color: var(--smart-muted);
  font-size: 12px;
  line-height: 1.4;
}

.bx-v2-smart .smart-vocabs textarea {
  width: 100%;
  min-height: 64px;
  padding: 9px 10px;
  background: var(--smart-surface);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
  outline: 0;
  resize: vertical;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
}

.bx-v2-smart .smart-system-toggle {
  padding: 14px;
}

.bx-v2-smart .smart-system-toggle .smart-check-field {
  border: 0;
}

.bx-v2-smart .smart-aliases {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.bx-v2-smart .smart-alias-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.8fr) minmax(110px, 0.8fr) minmax(130px, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 10px;
  background: var(--smart-paper);
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-alias-row .icon-btn {
  margin-bottom: 5px;
}

.bx-v2-smart .smart-location-registry {
  display: grid;
  gap: 14px;
}

.bx-v2-smart .smart-location-registry > .smart-section-head {
  margin-bottom: 0;
}

.bx-v2-smart .smart-location-snapshot {
  display: grid;
  grid-template-columns: auto minmax(150px, 0.7fr) minmax(220px, 1.3fr);
  align-items: center;
  gap: 12px;
  padding: 13px;
  background: color-mix(in srgb, var(--smart-surface-2) 44%, transparent);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-12);
}

.bx-v2-smart .smart-location-snapshot.is-ready {
  background: color-mix(in srgb, var(--smart-success) 5%, var(--smart-surface));
  border-color: color-mix(in srgb, var(--smart-success) 24%, var(--smart-line));
}

.bx-v2-smart .smart-location-snapshot-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  color: var(--smart-muted);
  background: var(--smart-paper);
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-location-snapshot.is-ready .smart-location-snapshot-icon {
  color: var(--smart-success);
}

.bx-v2-smart .smart-location-snapshot strong,
.bx-v2-smart .smart-location-snapshot small {
  display: block;
}

.bx-v2-smart .smart-location-snapshot strong {
  font-size: 13px;
}

.bx-v2-smart .smart-location-snapshot small {
  margin-top: 3px;
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-location-snapshot dl {
  display: grid;
  gap: 5px;
  margin: 0;
}

.bx-v2-smart .smart-location-snapshot dl > div {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 8px;
  font-size: 12px;
  line-height: 1.35;
}

.bx-v2-smart .smart-location-snapshot dt,
.bx-v2-smart .smart-location-snapshot dd {
  min-width: 0;
  margin: 0;
}

.bx-v2-smart .smart-location-snapshot dt {
  color: var(--smart-muted-2);
  font-weight: 700;
}

.bx-v2-smart .smart-location-snapshot dd,
.bx-v2-smart .smart-location-snapshot a {
  overflow-wrap: anywhere;
}

.bx-v2-smart .smart-location-snapshot a {
  color: var(--smart-accent);
  text-decoration: none;
}

.bx-v2-smart .smart-location-source-grid {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) minmax(160px, 1fr) 92px auto;
  align-items: end;
  gap: 9px;
}

.bx-v2-smart .smart-location-source-grid label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--smart-muted);
  font-size: 12px;
  font-weight: 650;
}

.bx-v2-smart .smart-location-source-grid input {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  background: var(--smart-surface);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
  outline: 0;
  font-size: 12px;
}

.bx-v2-smart .smart-location-source-grid input:focus {
  border-color: color-mix(in srgb, var(--smart-accent) 56%, var(--smart-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--smart-accent) 10%, transparent);
}

.bx-v2-smart .smart-location-error,
.bx-v2-smart .smart-location-notice,
.bx-v2-smart .smart-location-preview,
.bx-v2-smart .smart-location-guard {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--radius-8);
  font-size: 12px;
  line-height: 1.4;
}

.bx-v2-smart .smart-location-error {
  color: color-mix(in srgb, var(--smart-danger) 80%, var(--smart-ink));
  background: color-mix(in srgb, var(--smart-danger) 7%, var(--smart-surface));
}

.bx-v2-smart .smart-location-notice {
  color: color-mix(in srgb, var(--smart-success) 76%, var(--smart-ink));
  background: color-mix(in srgb, var(--smart-success) 7%, var(--smart-surface));
}

.bx-v2-smart .smart-location-error strong,
.bx-v2-smart .smart-location-error small,
.bx-v2-smart .smart-location-preview strong,
.bx-v2-smart .smart-location-preview small,
.bx-v2-smart .smart-location-guard strong,
.bx-v2-smart .smart-location-guard small {
  display: block;
}

.bx-v2-smart .smart-location-error small,
.bx-v2-smart .smart-location-preview small,
.bx-v2-smart .smart-location-guard small {
  margin-top: 3px;
}

.bx-v2-smart .smart-location-preview {
  color: var(--smart-muted);
  background: color-mix(in srgb, var(--smart-surface-2) 44%, transparent);
}

.bx-v2-smart .smart-location-preview.has-result {
  display: grid;
  gap: 12px;
  padding: 13px;
  color: var(--smart-ink);
  border: 1px solid var(--smart-line);
}

.bx-v2-smart .smart-location-preview.is-loading > .icon,
.bx-v2-smart .smart-location-preview-actions .btn:disabled > .icon {
  animation: smart-spin 900ms linear infinite;
}

.bx-v2-smart .smart-location-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.bx-v2-smart .smart-location-counts > div {
  display: grid;
  gap: 2px;
  padding: 10px;
  background: var(--smart-paper);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-location-counts strong {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

.bx-v2-smart .smart-location-counts span {
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-location-counts > .is-danger strong {
  color: var(--smart-danger);
}

.bx-v2-smart .smart-location-unchanged {
  margin: -3px 0 0;
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-location-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.bx-v2-smart .smart-location-examples > section {
  min-width: 0;
  padding: 10px;
  background: color-mix(in srgb, var(--smart-surface) 78%, transparent);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-location-examples > section > strong {
  font-size: 12px;
}

.bx-v2-smart .smart-location-examples ul {
  display: grid;
  gap: 7px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.bx-v2-smart .smart-location-examples li {
  min-width: 0;
  padding-top: 7px;
  border-top: 1px solid var(--smart-line);
}

.bx-v2-smart .smart-location-examples li strong,
.bx-v2-smart .smart-location-examples li small {
  display: block;
  overflow-wrap: anywhere;
}

.bx-v2-smart .smart-location-examples li strong {
  font-size: 12px;
}

.bx-v2-smart .smart-location-examples li small,
.bx-v2-smart .smart-location-examples li > span {
  color: var(--smart-muted);
  font-size: 12px;
  line-height: 1.4;
}

.bx-v2-smart .smart-location-examples li small {
  margin-top: 2px;
}

.bx-v2-smart .smart-location-examples .is-danger {
  border-color: color-mix(in srgb, var(--smart-danger) 26%, var(--smart-line));
}

.bx-v2-smart .smart-location-guard {
  color: color-mix(in srgb, var(--smart-success) 76%, var(--smart-ink));
  background: color-mix(in srgb, var(--smart-success) 7%, var(--smart-surface));
}

.bx-v2-smart .smart-location-guard.is-warning {
  color: color-mix(in srgb, #b36b00 76%, var(--smart-ink));
  background: color-mix(in srgb, #ffb84d 10%, var(--smart-surface));
}

.bx-v2-smart .smart-location-guard.is-danger {
  color: color-mix(in srgb, var(--smart-danger) 78%, var(--smart-ink));
  background: color-mix(in srgb, var(--smart-danger) 7%, var(--smart-surface));
}

.bx-v2-smart .smart-location-preview-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bx-v2-smart .smart-location-preview-actions > small {
  margin: 0;
  color: var(--smart-muted);
  font-family: "SFMono-Regular", Consolas, monospace;
}

.bx-v2-smart .smart-system-editor {
  padding: 0;
  overflow: clip;
}

.bx-v2-smart .smart-system-editor > summary {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
}

.bx-v2-smart .smart-system-editor > summary::-webkit-details-marker {
  display: none;
}

.bx-v2-smart .smart-system-editor > summary strong,
.bx-v2-smart .smart-system-editor > summary small {
  display: block;
}

.bx-v2-smart .smart-system-editor > summary strong {
  font-size: 13px;
}

.bx-v2-smart .smart-system-editor > summary small {
  margin-top: 4px;
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-editor-summary-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.bx-v2-smart .smart-editor-count {
  padding: 4px 8px;
  color: color-mix(in srgb, var(--smart-ink) 72%, var(--smart-muted));
  background: var(--smart-surface-2);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.bx-v2-smart .smart-unsaved-badge {
  padding: 4px 8px;
  color: color-mix(in srgb, var(--smart-danger) 82%, var(--smart-ink));
  background: color-mix(in srgb, var(--smart-danger) 10%, var(--smart-paper));
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.bx-v2-smart .smart-system-editor > summary .icon {
  width: 15px;
  height: 15px;
  transition: transform 160ms ease;
}

.bx-v2-smart .smart-system-editor[open] > summary .icon {
  transform: rotate(180deg);
}

.bx-v2-smart .smart-system-editor-body {
  padding: 20px;
  border-top: 1px solid var(--smart-line);
}

.bx-v2-smart .smart-editor-intro {
  margin-bottom: 18px;
  padding: 11px 13px;
  color: var(--smart-muted);
  background: color-mix(in srgb, var(--smart-surface-2) 42%, transparent);
  border-radius: var(--radius-8);
  font-size: 12px;
  line-height: 1.45;
}

.bx-v2-smart .smart-tool-trace-works {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.bx-v2-smart .smart-tool-trace-work {
  width: 96px;
  margin: 0;
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--smart-muted);
}

.bx-v2-smart .smart-tool-trace-work img {
  width: 96px;
  height: 68px;
  object-fit: contain;
  border-radius: var(--radius-8);
  background: color-mix(in srgb, var(--smart-surface-2) 60%, transparent);
}

.bx-v2-smart .smart-tool-trace-work figcaption {
  margin-top: 3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bx-v2-smart .smart-preset-flow-list {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 12.5px;
}

.bx-v2-smart .smart-preset-flow-list small {
  display: block;
  color: var(--smart-muted);
}

.bx-v2-smart .smart-preset-flow-preview summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--smart-muted);
}

.bx-v2-smart .smart-preset-flow-pre {
  max-height: 320px;
  margin-top: 8px;
  padding: 11px 13px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  background: color-mix(in srgb, var(--smart-surface-2) 42%, transparent);
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-structure-list {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.bx-v2-smart .smart-structure-item {
  overflow: hidden;
  background: color-mix(in srgb, var(--smart-surface) 76%, transparent);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-12);
}

.bx-v2-smart .smart-structure-item-head {
  display: flex;
  min-height: 56px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--smart-surface-2) 48%, transparent);
  border-bottom: 1px solid var(--smart-line);
}

.bx-v2-smart .smart-structure-item-head > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.bx-v2-smart .smart-structure-item-head strong,
.bx-v2-smart .smart-structure-item-head small {
  display: block;
}

.bx-v2-smart .smart-structure-item-head strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2-smart .smart-structure-item-head small {
  margin-top: 2px;
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-item-order {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--smart-muted);
  background: var(--smart-paper);
  border: 1px solid var(--smart-line);
  border-radius: 50%;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.bx-v2-smart .smart-structure-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.bx-v2-smart .smart-order-btn {
  color: var(--smart-muted);
  font-size: 14px;
  font-weight: 600;
}

.bx-v2-smart .smart-structure-actions .icon-btn:disabled {
  cursor: default;
  opacity: 0.28;
}

.bx-v2-smart .smart-structure-fields {
  padding: 13px;
}

.bx-v2-smart .smart-structure-fields textarea,
.bx-v2-smart .smart-simple-row textarea,
.bx-v2-smart .smart-disclaimer-row textarea {
  min-height: 66px;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
}

.bx-v2-smart .smart-machine-field input {
  color: var(--smart-muted);
  background: color-mix(in srgb, var(--smart-surface-2) 46%, transparent);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
}

.bx-v2-smart .smart-compact-check {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-compact-check input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--smart-success);
}

.bx-v2-smart .smart-closed-check {
  align-self: end;
  padding-bottom: 8px;
}

.bx-v2-smart .smart-option-list {
  padding: 0 13px 13px;
}

.bx-v2-smart .smart-subsection-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.bx-v2-smart .smart-subsection-head strong,
.bx-v2-smart .smart-subsection-head small {
  display: block;
}

.bx-v2-smart .smart-subsection-head strong {
  font-size: 12px;
}

.bx-v2-smart .smart-subsection-head small {
  margin-top: 2px;
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .btn.compact {
  min-height: 31px;
  padding: 6px 9px;
  font-size: 12px;
}

.bx-v2-smart .smart-option-rows {
  display: grid;
  gap: 7px;
}

.bx-v2-smart .smart-option-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
  background: color-mix(in srgb, var(--smart-surface-2) 36%, transparent);
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-option-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.bx-v2-smart .smart-option-main .field > span,
.bx-v2-smart .smart-option-main .smart-compact-check {
  font-size: 12px;
}

.bx-v2-smart .smart-route-fallback {
  align-items: end;
  margin-bottom: 14px;
}

.bx-v2-smart .smart-route-preview {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  background: color-mix(in srgb, var(--smart-accent) 4%, var(--smart-paper));
  border: 1px solid color-mix(in srgb, var(--smart-accent) 22%, var(--smart-line));
  border-radius: var(--radius-12);
}

.bx-v2-smart .smart-route-preview .smart-section-head {
  margin-bottom: 0;
}

.bx-v2-smart .smart-editor-subsection + .smart-editor-subsection {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--smart-line);
}

.bx-v2-smart .smart-simple-list {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
}

.bx-v2-smart .smart-simple-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.bx-v2-smart .smart-simple-row .field {
  margin: 0;
}

.bx-v2-smart .smart-brand-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.bx-v2-smart .smart-brand-style {
  display: grid;
  gap: 9px;
  padding: 12px;
  background: color-mix(in srgb, var(--smart-surface-2) 38%, transparent);
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-brand-style > strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2-smart .smart-brand-style textarea {
  min-height: 72px;
  resize: vertical;
  font-family: inherit;
}

.bx-v2-smart .smart-size-table,
.bx-v2-smart .smart-disclaimer-table {
  margin-bottom: 10px;
}

.bx-v2-smart .smart-table-head,
.bx-v2-smart .smart-size-row,
.bx-v2-smart .smart-disclaimer-row {
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--smart-line);
}

.bx-v2-smart .smart-size-table .smart-table-head,
.bx-v2-smart .smart-size-row {
  grid-template-columns: minmax(130px, 0.8fr) minmax(150px, 1fr) 76px 76px auto;
}

.bx-v2-smart .smart-disclaimer-table .smart-table-head,
.bx-v2-smart .smart-disclaimer-row {
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 0.8fr) minmax(0, 1.8fr) auto;
}

.bx-v2-smart .smart-table-head {
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-size-row:last-child,
.bx-v2-smart .smart-disclaimer-row:last-child {
  border-bottom: 0;
}

.bx-v2-smart .smart-golden-fields .field > small {
  display: block;
  margin-top: 5px;
  color: var(--smart-muted);
  font-size: 12px;
  line-height: 1.4;
}

.bx-v2-smart .smart-picker-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.bx-v2-smart .smart-system-editor input[readonly],
.bx-v2-smart .smart-system-editor input:disabled,
.bx-v2-smart .smart-system-editor select:disabled {
  cursor: default;
  color: var(--smart-muted);
  background: color-mix(in srgb, var(--smart-surface-2) 46%, transparent);
  opacity: 1;
}

.bx-v2-smart .smart-axis-actions {
  position: sticky;
  z-index: 2;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px -20px -20px;
  padding: 12px 20px;
  background: color-mix(in srgb, var(--smart-surface) 94%, transparent);
  border-top: 1px solid var(--smart-line);
  backdrop-filter: blur(12px);
}

.bx-v2-smart .smart-axis-actions > span {
  min-width: 0;
  flex: 1;
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-empty-state {
  margin: 0;
  padding: 12px;
  color: var(--smart-muted);
  background: color-mix(in srgb, var(--smart-surface-2) 34%, transparent);
  border: 1px dashed var(--smart-line);
  border-radius: var(--radius-8);
  font-size: 12px;
  line-height: 1.4;
}

.bx-v2-smart .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
}

.bx-v2-smart [data-system-section].attention {
  animation: smart-attention 1.4s ease;
}

.bx-v2-smart .sticky-actionbar {
  position: sticky;
  z-index: 5;
  bottom: -76px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px -8px -84px;
  padding: 12px;
  background: color-mix(in srgb, var(--smart-surface) 88%, transparent);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-12);
  backdrop-filter: blur(16px);
}

.bx-v2-smart .sticky-actionbar .btn {
  margin-left: auto;
}

.bx-v2-smart .notice {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: var(--smart-warning);
  font-size: 12px;
}

.bx-v2-smart .notice > i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: currentColor;
  border-radius: 50%;
}

.bx-v2-smart .notice strong,
.bx-v2-smart .notice small {
  display: block;
}

.bx-v2-smart .notice strong {
  font-size: 12px;
}

.bx-v2-smart .notice small {
  max-width: 330px;
  margin-top: 2px;
  color: var(--smart-muted);
  font-size: 12px;
  line-height: 1.35;
}

.bx-v2-smart .notice.success,
.bx-v2-smart .notice.saved {
  color: var(--smart-success);
}

.bx-v2-smart .notice.danger {
  color: var(--smart-danger);
}

/* «Сохранено частично» — не успех и не ошибка: часть записей легла, часть
   осознанно нет. Тон закреплён явно, чтобы не зависеть от цвета базы. */
.bx-v2-smart .notice.warn {
  color: var(--smart-warning);
}

.bx-v2-smart .notice.saving > i {
  animation: smart-pulse 850ms ease-in-out infinite;
}

.bx-v2-smart .btn {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
  background: var(--smart-paper);
  border-radius: var(--radius-8);
  font-size: 12px;
  font-weight: 750;
}

.bx-v2-smart .btn.primary {
  color: var(--smart-paper);
  background: var(--smart-ink);
}

.bx-v2-smart .btn.accent {
  color: #fff;
  background: var(--smart-accent);
}

.bx-v2-smart .btn:not(:disabled):hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
}

.bx-v2-smart .smart-preview-head {
  margin-bottom: 18px;
}

.bx-v2-smart .smart-run-button {
  margin-left: auto;
  white-space: nowrap;
}

.bx-v2-smart .smart-preview-run-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.bx-v2-smart .smart-corpus-save {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--smart-muted);
  cursor: pointer;
}

.bx-v2-smart .smart-corpus-save input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--smart-success);
}

.bx-v2-smart .smart-corpus-save strong,
.bx-v2-smart .smart-corpus-save small {
  display: block;
}

.bx-v2-smart .smart-corpus-save strong {
  color: var(--smart-ink);
  font-size: 12px;
}

.bx-v2-smart .smart-corpus-save small {
  margin-top: 2px;
  font-size: 12px;
}

/* Галочка «сохранить в корпусе» стоит ЗДЕСЬ, у самой кнопки, а не в шапке
   панели: она решает, чем кончится запуск, и читать её нужно в тот момент,
   когда рука уже тянется запускать. В шапке её отделяло от кнопки два экрана
   разбора, и человек нажимал «Запустить сценарий», не помня её состояния. */
.bx-v2-smart .smart-run-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--smart-line);
}

.bx-v2-smart .smart-run-footer > span {
  color: var(--smart-muted);
  font-size: 12px;
}

/* Строка состояния прижимает всё остальное вправо; при нехватке ширины
   уходит на свою строку, а группа «галочка · цены · кнопка» не рассыпается. */
.bx-v2-smart .smart-run-footer > span:first-child {
  margin-right: auto;
}

/* Итог прошлого запуска занимает всю ширину подвала и уходит на свою
   строку: «галочка · цены · кнопка» под ним не рассыпаются. */
.bx-v2-smart .smart-run-outcome {
  flex: 1 0 100%;
}

.bx-v2-smart .smart-run-outcome .notice {
  margin: 0;
}

.bx-v2-smart .smart-run-footer .smart-corpus-save {
  max-width: 300px;
}

.bx-v2-smart .smart-preview-toggle {
  position: absolute;
  z-index: 20;
  top: 10px;
  right: 10px;
}

.bx-v2-smart .smart-preview-status {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  margin: -7px 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--smart-line);
}

.bx-v2-smart .smart-preview-status .notice {
  justify-content: flex-end;
  text-align: right;
}

.bx-v2-smart .smart-cost {
  display: inline-flex;
  min-height: 21px;
  align-items: center;
  padding: 3px 7px;
  color: var(--smart-muted);
  background: var(--smart-paper);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bx-v2-smart .smart-example-picker {
  margin-bottom: 21px;
  padding: 16px;
  background: var(--smart-paper);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-12);
}

.bx-v2-smart .smart-example-picker .smart-section-head {
  margin-bottom: 11px;
}

/* Поле запроса — тот же блок, что и пикер примеров: для поиска, ассистента и
   судьи именно оно, а не объект каталога, является входом сценария. */
.bx-v2-smart .smart-query-input {
  margin-bottom: 21px;
  padding: 16px;
  background: var(--smart-paper);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-12);
}

.bx-v2-smart .smart-query-input .smart-section-head {
  margin-bottom: 11px;
}

.bx-v2-smart .smart-example-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bx-v2-smart .smart-example-head-actions .text-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.bx-v2-smart .smart-example-head-actions .icon {
  width: 12px;
  height: 12px;
}

.bx-v2-smart .smart-section-head > div h3 {
  margin: 0;
  font-size: 13px;
}

.bx-v2-smart .smart-section-head > div small {
  display: block;
  max-width: none;
  margin-top: 3px;
  text-align: left;
}

.bx-v2-smart .text-btn {
  padding: 2px;
  color: var(--smart-muted);
  background: transparent;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bx-v2-smart .preview-run {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--smart-surface);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-12);
}

.bx-v2-smart .preview-run > img,
.bx-v2-smart .smart-example-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--radius-8);
}

.bx-v2-smart .preview-run > img {
  object-fit: contain;
}

.bx-v2-smart .smart-example-avatar {
  display: grid;
  place-items: center;
  color: var(--smart-paper);
  background: var(--smart-ink);
  font-size: 12px;
  font-weight: 800;
}

.bx-v2-smart .preview-run-copy {
  min-width: 0;
  flex: 1;
}

.bx-v2-smart .preview-run-copy strong,
.bx-v2-smart .preview-run-copy small {
  display: block;
}

.bx-v2-smart .preview-run-copy strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2-smart .preview-run-copy small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--smart-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2-smart .smart-example-empty {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 11px;
  padding: 11px;
  color: var(--smart-muted);
  background: color-mix(in srgb, var(--smart-surface) 65%, transparent);
  border: 1px dashed var(--smart-line);
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-example-empty .icon {
  width: 17px;
  height: 17px;
}

.bx-v2-smart .smart-example-empty strong,
.bx-v2-smart .smart-example-empty small {
  display: block;
}

.bx-v2-smart .smart-example-empty strong {
  font-size: 12px;
}

.bx-v2-smart .smart-example-empty small {
  margin-top: 3px;
  font-size: 12px;
}

.bx-v2-smart .smart-catalog-picker {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 9px;
  background: color-mix(in srgb, var(--smart-surface) 72%, transparent);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-catalog-picker > span {
  color: var(--smart-muted);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.bx-v2-smart .smart-catalog-picker > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.bx-v2-smart .smart-catalog-picker button {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  color: var(--smart-ink);
  background: var(--smart-surface);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
  font-size: 12px;
  font-weight: 700;
  transition:
    border-color 140ms ease,
    transform 140ms ease;
}

.bx-v2-smart .smart-catalog-picker button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--smart-accent) 42%, var(--smart-line));
  transform: translateY(-1px);
}

.bx-v2-smart .smart-catalog-picker .icon {
  width: 12px;
  height: 12px;
  color: var(--smart-muted);
}

/* Класс задачи: старые и новые разбираются разными моделями, и это должно
   читаться прямо под выбранным примером, а не выясняться по счёту. */
.bx-v2-smart .smart-task-class {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 7px;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--smart-surface) 72%, transparent);
  border: 1px solid var(--smart-line);
  border-left: 3px solid var(--smart-muted);
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-task-class.live {
  border-left-color: color-mix(in srgb, var(--smart-accent) 70%, transparent);
}

.bx-v2-smart .smart-task-class.mismatch {
  border-left-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, var(--smart-surface));
}

.bx-v2-smart .smart-task-class-warn {
  color: var(--warning-ink);
  font-weight: 650;
}

.bx-v2-smart .smart-task-class .chip {
  flex: 0 0 auto;
}

.bx-v2-smart .smart-task-class-copy strong,
.bx-v2-smart .smart-task-class-copy small {
  display: block;
}

.bx-v2-smart .smart-task-class-copy strong {
  font-size: 12px;
}

.bx-v2-smart .smart-task-class-copy small {
  margin-top: 3px;
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-class-filter {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}

.bx-v2-smart .smart-class-filter button {
  flex: 1 1 0;
  min-height: 29px;
  padding: 6px 9px;
  color: var(--smart-muted);
  background: var(--smart-surface);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
  font-size: 12px;
  font-weight: 700;
  transition: border-color 140ms ease, color 140ms ease;
}

.bx-v2-smart .smart-class-filter button:hover {
  border-color: color-mix(in srgb, var(--smart-accent) 42%, var(--smart-line));
}

.bx-v2-smart .smart-class-filter button.active {
  color: var(--smart-ink);
  border-color: color-mix(in srgb, var(--smart-accent) 70%, var(--smart-line));
  background: color-mix(in srgb, var(--smart-accent) 12%, var(--smart-surface));
}

.bx-v2-smart .smart-row-flag {
  margin-left: 6px;
  padding: 1px 5px;
  color: var(--smart-muted);
  background: color-mix(in srgb, var(--smart-muted) 14%, transparent);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.bx-v2-smart .smart-example-search {
  position: relative;
  display: block;
  margin-top: 10px;
}

.bx-v2-smart .smart-example-search > .icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 10px;
  width: 14px;
  height: 14px;
  color: var(--smart-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.bx-v2-smart .smart-example-search input {
  width: 100%;
  min-height: 36px;
  padding: 8px 34px;
  background: var(--smart-surface);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
  outline: 0;
  font-size: 12px;
}

.bx-v2-smart .smart-example-search > .smart-spinner {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.bx-v2-smart .smart-example-results {
  display: grid;
  max-height: 218px;
  gap: 3px;
  margin-top: 8px;
  overflow: auto;
  scrollbar-width: thin;
}

.bx-v2-smart .smart-example-results button {
  display: grid;
  width: 100%;
  min-height: 42px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 6px 7px;
  color: inherit;
  background: transparent;
  border-radius: var(--radius-8);
  text-align: left;
}

.bx-v2-smart .smart-example-results button:hover,
.bx-v2-smart .smart-example-results button.active {
  background: var(--smart-surface);
}

.bx-v2-smart .smart-example-results button > img,
.bx-v2-smart .smart-example-results button > i {
  width: 28px;
  height: 28px;
  background: var(--smart-surface-2);
  border-radius: var(--radius-8);
  object-fit: cover;
}

.bx-v2-smart .smart-example-results button > i {
  position: relative;
}

.bx-v2-smart .smart-example-results button > i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--smart-muted-2);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.bx-v2-smart .smart-example-results button strong,
.bx-v2-smart .smart-example-results button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2-smart .smart-example-results button strong {
  font-size: 12px;
}

.bx-v2-smart .smart-example-results button small {
  margin-top: 2px;
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-example-results button > .icon {
  width: 13px;
  height: 13px;
  color: var(--smart-success);
}

.bx-v2-smart .smart-more-results {
  padding: 5px 8px;
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-inline-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: 8px;
  padding: 8px 9px;
  color: var(--smart-danger);
  background: color-mix(in srgb, var(--smart-danger) 7%, var(--smart-card));
  border: 1px solid color-mix(in srgb, var(--smart-danger) 18%, transparent);
  border-radius: var(--radius-8);
  font-size: 12px;
}

.bx-v2-smart .smart-inline-error button {
  padding: 2px;
  color: inherit;
  background: transparent;
  font-size: 12px;
  text-decoration: underline;
}

.bx-v2-smart .smart-preview-loading,
.bx-v2-smart .smart-loading-copy {
  display: flex;
  min-height: 150px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--smart-muted);
}

.bx-v2-smart .smart-preview-loading strong,
.bx-v2-smart .smart-preview-loading small,
.bx-v2-smart .smart-loading-copy strong,
.bx-v2-smart .smart-loading-copy small {
  display: block;
}

.bx-v2-smart .smart-preview-loading strong,
.bx-v2-smart .smart-loading-copy strong {
  color: var(--smart-ink);
  font-size: 12px;
}

.bx-v2-smart .smart-preview-loading small,
.bx-v2-smart .smart-loading-copy small {
  margin-top: 3px;
  font-size: 12px;
}

.bx-v2-smart .smart-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--smart-muted) 25%, transparent);
  border-top-color: var(--smart-accent);
  border-radius: 50%;
  animation: smart-spin 720ms linear infinite;
}

.bx-v2-smart .smart-spinner.small {
  width: 13px;
  height: 13px;
  border-width: 1.5px;
}

/* На акцентной кнопке спиннер был акцентом по акценту — то есть невидимым:
   крутился, но сливался с фоном, и казалось, что ничего не происходит. */
.bx-v2-smart .btn.accent .smart-spinner,
.bx-v2-smart .smart-run-button .smart-spinner {
  border-color: color-mix(in srgb, currentColor 32%, transparent);
  border-top-color: currentColor;
}

.bx-v2-smart .smart-trace {
  display: grid;
  gap: 32px;
}

/* Связка этапов — служебная подсказка «дальше вниз», а не элемент внимания:
   тонкая линия и маленькая стрелка по ЦЕНТРУ блока, приглушённые до уровня
   рамок. Раньше они шли по левому краю акцентным цветом и спорили за взгляд
   с самим содержимым этапов. */
.bx-v2-smart .smart-trace > .preview-step:not(:last-child)::before {
  position: absolute;
  bottom: -30px;
  left: 50%;
  width: 1px;
  height: 26px;
  background: var(--smart-line);
  content: "";
  opacity: 0.7;
  pointer-events: none;
  transform: translateX(-50%);
}

.bx-v2-smart .smart-trace > .preview-step:not(:last-child)::after {
  position: absolute;
  z-index: 1;
  bottom: -25px;
  left: 50%;
  width: 7px;
  height: 7px;
  background: var(--smart-surface);
  border-right: 1.5px solid var(--smart-line);
  border-bottom: 1.5px solid var(--smart-line);
  content: "";
  opacity: 0.7;
  pointer-events: none;
  transform: translateX(-50%) rotate(45deg);
}

.bx-v2-smart .preview-step {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  gap: 11px;
  padding: 13px;
  background: color-mix(in srgb, var(--smart-paper) 58%, transparent);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-12);
  animation: smart-rise 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.bx-v2-smart .preview-step:nth-child(2) {
  animation-delay: 30ms;
}

.bx-v2-smart .preview-step:nth-child(3) {
  animation-delay: 60ms;
}

.bx-v2-smart .preview-step:nth-child(4) {
  animation-delay: 90ms;
}

.bx-v2-smart .preview-step.is-skipped {
  opacity: 0.58;
}

.bx-v2-smart .preview-step-index {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: var(--smart-muted);
  background: var(--smart-surface);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
  font-size: 12px;
  font-weight: 800;
}

.bx-v2-smart .preview-step-copy {
  min-width: 0;
}

.bx-v2-smart .preview-step-head {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.bx-v2-smart .preview-step-collapse {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 2px 3px 2px 0;
  color: var(--smart-ink);
  background: transparent;
  border-radius: var(--radius-4);
  text-align: left;
}

.bx-v2-smart .preview-step-collapse:hover {
  color: var(--smart-accent);
}

.bx-v2-smart .preview-step-collapse > span {
  min-width: 0;
  font-size: 14px;
  font-weight: 780;
  line-height: 1.25;
}

.bx-v2-smart .preview-step-collapse .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--smart-muted);
  transform: rotate(180deg);
  transition: transform 180ms ease, color 140ms ease;
}

.bx-v2-smart .preview-step-collapse:hover .icon {
  color: currentColor;
}

.bx-v2-smart .preview-step.is-collapsed .preview-step-collapse .icon {
  transform: rotate(0deg);
}

.bx-v2-smart .preview-step-body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 150ms ease;
}

.bx-v2-smart .preview-step-body > div {
  min-height: 0;
  overflow: hidden;
}

.bx-v2-smart .preview-step.is-collapsed .preview-step-body {
  grid-template-rows: 0fr;
  opacity: 0;
}

.bx-v2-smart .preview-step h3 {
  margin: 0;
  font-size: 14px;
}

.bx-v2-smart .preview-step code {
  padding: 2px 5px;
  color: var(--smart-muted);
  background: var(--smart-surface);
  border-radius: var(--radius-4);
  font-size: 12px;
}

.bx-v2-smart .preview-step p {
  margin: 6px 0 0;
  color: var(--smart-muted);
  font-size: 13px;
  line-height: 1.48;
}

.bx-v2-smart .smart-stage-result pre {
  max-width: 100%;
  max-height: 420px;
  margin: 9px 0 0;
  padding: 11px;
  color: var(--smart-ink);
  background: var(--smart-surface-2);
  border-radius: var(--radius-8);
  overflow: auto;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre-wrap;
  word-break: break-word;
}

.bx-v2-smart .smart-prompt-preview {
  max-width: 100%;
  max-height: 420px;
  margin: 9px 0 0;
  padding: 12px 13px;
  color: var(--smart-ink);
  background: var(--smart-surface);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
  overflow: auto;
  font-size: 13px;
  line-height: 1.58;
  overflow-wrap: anywhere;
}

.bx-v2-smart .smart-prompt-preview .bb-list {
  display: block;
  padding: 0 0 0 1.35em;
  margin: .55em 0;
  list-style-position: outside;
}

.bx-v2-smart .smart-prompt-preview .bb-list li {
  display: list-item;
  padding-left: .18em;
  margin: .32em 0;
}

.bx-v2-smart .smart-prompt-preview .bb-list li::marker {
  color: var(--smart-accent);
}

.bx-v2-smart .smart-prompt-preview a {
  color: color-mix(in srgb, var(--smart-accent) 76%, var(--smart-ink));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bx-v2-smart .smart-prompt-preview blockquote {
  margin: .75em 0;
  padding-left: .8em;
  color: var(--smart-muted);
  border-left: 2px solid var(--smart-line);
}

.bx-v2-smart .smart-stage-play {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  color: var(--smart-paper);
  background: var(--smart-ink);
  border-radius: var(--radius-8);
  transition:
    transform 150ms ease,
    background 150ms ease;
}

.bx-v2-smart .smart-stage-play:not(:disabled):hover {
  background: var(--smart-accent);
  transform: scale(1.05);
}

.bx-v2-smart .smart-stage-play .icon {
  width: 13px;
  height: 13px;
}

.bx-v2-smart .smart-stage-result {
  margin-top: 10px;
  padding: 10px;
  background: var(--smart-surface);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-stage-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bx-v2-smart .smart-stage-result-head strong {
  font-size: 12px;
}

.bx-v2-smart .smart-media-card {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 0;
  overflow: hidden;
  color: var(--smart-ink);
  background: var(--smart-paper);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
  text-align: left;
}

.bx-v2-smart .smart-media-card-frame {
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.bx-v2-smart .smart-media-card-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bx-v2-smart .smart-result-image {
  width: 100%;
  margin-top: 9px;
}

.bx-v2-smart .smart-result-image .smart-media-card-frame img {
  max-height: 480px;
  min-height: 180px;
  object-fit: contain;
}

.bx-v2-smart .smart-media-card-footer {
  display: flex;
  min-height: 35px;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 7px 9px;
  color: var(--smart-muted);
  background: var(--smart-surface);
  border-top: 1px solid var(--smart-line);
}

.bx-v2-smart .smart-media-card-size {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2-smart .smart-media-card-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  color: var(--smart-ink);
  font-size: 12px;
  font-weight: 700;
}

.bx-v2-smart .smart-media-card:focus-visible {
  outline: 2px solid var(--smart-accent);
  outline-offset: 2px;
}

.bx-v2-smart .smart-media-card-action .icon {
  width: 13px;
  height: 13px;
}

.bx-v2-smart .smart-stage-run {
  min-width: 0;
}

.bx-v2-smart .smart-stage-run-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin: 8px 0 -3px;
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-stage-run-meta > span {
  padding: 3px 5px;
  color: var(--smart-warning);
  background: color-mix(in srgb, var(--smart-warning) 15%, transparent);
  border-radius: var(--radius-4);
}

.bx-v2-smart .smart-stage-run-meta > strong {
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-compare {
  min-width: 0;
  margin-top: 10px;
  padding: 10px;
  background: color-mix(in srgb, var(--smart-surface) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--smart-accent) 24%, var(--smart-line));
  border-radius: var(--radius-12);
}

.bx-v2-smart .smart-compare-head {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.bx-v2-smart .smart-compare-head > div strong,
.bx-v2-smart .smart-compare-head > div small {
  display: block;
}

.bx-v2-smart .smart-compare-head > div strong {
  font-size: 12px;
}

.bx-v2-smart .smart-compare-head > div small {
  margin-top: 2px;
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-compare-head label {
  display: grid;
  gap: 3px;
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-compare-head select {
  max-width: 170px;
  min-height: 28px;
  padding: 4px 25px 4px 7px;
  background: var(--smart-surface);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
  font-size: 12px;
}

.bx-v2-smart .smart-compare-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.bx-v2-smart .smart-compare-grid > article {
  min-width: 0;
  padding: 8px;
  background: var(--smart-paper);
  border-radius: var(--radius-8);
}

.bx-v2-smart .smart-compare-label {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.bx-v2-smart .smart-compare-label strong {
  font-size: 12px;
}

.bx-v2-smart .smart-compare-label span {
  overflow: hidden;
  color: var(--smart-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2-smart .smart-compare .smart-stage-result {
  padding: 8px;
}

.bx-v2-smart .smart-compare .smart-stage-result-head strong {
  font-size: 12px;
}

.bx-v2-smart .smart-compare .smart-stage-result pre {
  max-height: 300px;
  padding: 8px;
  font-size: 12px;
}

.bx-v2-smart .smart-result-list {
  display: grid;
  gap: 6px;
  margin-top: 9px;
}

/* Сводка над карточками: режим прогона и что сделал судья. Без неё видно
   только итог, но не видно, сколько кандидатов он отсеял и почему. */
.bx-v2-smart .smart-result-summary {
  margin: 0 0 10px;
  color: var(--smart-muted);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-line;
}

.bx-v2-smart .smart-low-confidence-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 9px 0 0;
  padding: 8px 9px;
  color: var(--smart-muted);
  background: color-mix(in srgb, var(--smart-accent) 7%, var(--smart-paper));
  border-left: 2px solid color-mix(in srgb, var(--smart-accent) 55%, transparent);
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
  font-size: 12px;
  line-height: 1.45;
}

.bx-v2-smart .smart-low-confidence-note .icon {
  width: 15px;
  height: 15px;
  margin-top: 1px;
}

.bx-v2-smart .smart-result-list > div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  background: var(--smart-paper);
  border-radius: var(--radius-8);
}

/* Две цены у кнопки запуска и только они: сколько стоил прошлый прогон и во
   сколько обойдётся следующий. Раньше цифры жили в трёх местах экрана разными
   шрифтами, и «прогноз» путался с «фактом». */
.bx-v2-smart .smart-run-cost {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-left: auto;
}

.bx-v2-smart .smart-run-cost > span {
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 5px 10px;
  background: var(--smart-panel);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
  text-align: right;
}

.bx-v2-smart .smart-run-cost small {
  color: var(--smart-muted);
  font-size: 12px;
  line-height: 1.1;
}

.bx-v2-smart .smart-run-cost strong {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Ответ модели читают глазами: структура важнее плотности. */
.bx-v2-smart .smart-json {
  max-height: 60svh;
  overflow: auto;
  padding: 12px 14px;
  background: var(--smart-panel);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
  font-size: 12px;
  line-height: 1.5;
  tab-size: 2;
}

.bx-v2-smart .smart-json .j-key {
  color: var(--smart-ink);
  font-weight: 650;
}

.bx-v2-smart .smart-json .j-str {
  color: var(--success, #2f7d32);
  white-space: pre-wrap;      /* модель пишет ТЗ абзацами — показываем абзацы */
}

/* Свёрнутое длинное значение: одна строка с числом знаков, клик разворачивает.
   Иначе ТЗ на две тысячи знаков хоронит поля, ради которых ответ и открыли.

   Прячем текст нулевым кеглем, а не прозрачным цветом с обрезкой по высоте:
   плашка обязана стоять В ПОТОКЕ. Абсолютная плашка искала containing block и
   находила сам .smart-shell — она переставала ездить вместе с содержимым
   панели и замирала там, где элемент был в момент отрисовки. На экране от
   свёрнутого значения оставалась пустая строка: букв нет (прозрачные), плашки
   нет (уехала), и поле открывалось только вслепую — щелчком по пустоте.
   white-space: normal обязателен по той же причине, что и у smart-sub: в
   pre-wrap переводы строк внутри свёрнутого текста всё равно ломали строку и
   каждая пустая набирала высоту по шрифту родителя. */
.bx-v2-smart .smart-json .j-str.is-folded {
  max-width: 100%;
  font-size: 0;
  line-height: 0;
  white-space: normal;
  cursor: pointer;
}

.bx-v2-smart .smart-json .j-str.is-folded::before {
  content: "«…» " attr(data-json-len) " знаков";
  display: inline-block;
  padding: 0.15em 0.7em;
  color: var(--smart-muted);
  background: color-mix(in srgb, var(--smart-ink) 8%, transparent);
  border-radius: var(--radius-pill);
  font: 500 11.5px/1.5 var(--font-mono, ui-monospace, Menlo, monospace);
  white-space: nowrap;
}

.bx-v2-smart .smart-json .j-str.is-folded:hover::before {
  color: var(--smart-ink);
  background: color-mix(in srgb, var(--smart-ink) 14%, transparent);
}

.bx-v2-smart .smart-json .j-str.is-folded:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--smart-ink) 45%, transparent);
  outline-offset: 1px;
}

.bx-v2-smart .smart-json .j-num,
.bx-v2-smart .smart-json .j-lit {
  color: var(--accent-dark, #b8452c);
}

/* След инструментов: запрос модели и что по нему нашлось. */
.bx-v2-smart .smart-tool-trace {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-12);
  background: color-mix(in srgb, var(--smart-surface-2) 55%, transparent);
}
  font: 500 11.5px/1.5 var(--font-mono, ui-monospace, Menlo, monospace);

.bx-v2-smart .smart-tool-trace ol {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

.bx-v2-smart .smart-json .j-str.is-folded:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--smart-ink) 45%, transparent);
  outline-offset: 1px;
}

.bx-v2-smart .smart-tool-trace-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

.bx-v2-smart .smart-tool-trace-head small,
.bx-v2-smart .smart-tool-trace-items {
  color: var(--smart-muted);
}

.bx-v2-smart .smart-tool-trace-args {
  margin: 3px 0 0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.bx-v2-smart .smart-tool-trace-items {
  margin: 4px 0 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.5;
}

.bx-v2-smart .smart-tool-trace-error,
.bx-v2-smart .smart-tool-trace li.is-failed code {
  color: var(--smart-danger);
}

/* Блюда, подобранные моделью, — отдельным блоком под ответом: строка id в
   JSON ничего не говорит глазу, а фото и бренд говорят сразу. */
.bx-v2-smart .smart-picked-dishes {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-12);
  background: color-mix(in srgb, var(--smart-surface-2) 55%, transparent);
}

.bx-v2-smart .smart-picked-dishes .smart-material-list > article.is-missing {
  border-color: color-mix(in srgb, var(--smart-danger) 45%, var(--smart-line));
}

.bx-v2-smart .smart-picked-dishes .smart-material-list > article.is-missing small {
  color: var(--smart-danger);
}

.bx-v2-smart .smart-material-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

/* Галочка «отправлять этот файл модели». Снятый файл остаётся в списке — иначе
   вернуть его было бы нечем — но гасится, чтобы взгляд не спотыкался. */
.bx-v2-smart .smart-material-toggle {
  position: absolute;
  z-index: 2;
  top: 6px;
  left: 6px;
  display: inline-flex;
  cursor: pointer;
}

.bx-v2-smart .smart-material-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--smart-accent);
  cursor: pointer;
}

.bx-v2-smart .smart-material-list > article {
  position: relative;
}

.bx-v2-smart .smart-material-list > article.is-unchecked {
  opacity: 0.42;
}

.bx-v2-smart .smart-material-list > article.is-unchecked strong {
  text-decoration: line-through;
}


.bx-v2-smart .smart-material-list > article {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 8px;
  padding: 8px;
  background: var(--smart-paper);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-12);
}

.bx-v2-smart .smart-material-list > article.is-file {
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
}

.bx-v2-smart .smart-result-list p,
.bx-v2-smart .smart-material-list p {
  min-width: 0;
  margin: 0;
}

.bx-v2-smart .smart-result-thumb {
  width: 54px;
  height: 44px;
  flex: 0 0 auto;
  grid-template-rows: 1fr;
  background: var(--smart-surface);
}

.bx-v2-smart .smart-result-thumb .smart-media-card-frame img {
  object-fit: contain;
}

.bx-v2-smart .smart-result-list strong,
.bx-v2-smart .smart-result-list small,
.bx-v2-smart .smart-material-list strong,
.bx-v2-smart .smart-material-list small {
  display: block;
}

.bx-v2-smart .smart-result-list strong,
.bx-v2-smart .smart-material-list strong {
  font-size: 12px;
}

.bx-v2-smart .smart-result-list small,
.bx-v2-smart .smart-material-list small {
  margin-top: 2px;
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-material-media {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.bx-v2-smart .smart-material-media .smart-media-card-frame img {
  object-fit: contain;
}

.bx-v2-smart .smart-material-media .smart-media-card-action {
  gap: 0;
  font-size: 0;
}

.bx-v2-smart .smart-material-media .smart-media-card-action .icon {
  width: 16px;
  height: 16px;
}

.bx-v2-smart .smart-material-list > article.is-file > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  background: var(--smart-surface-2);
  border-radius: var(--radius-8);
  object-fit: cover;
}

.bx-v2-smart .smart-result-thumb .smart-media-card-footer,
.bx-v2-smart .smart-tag-preview-card .smart-media-card-footer {
  display: none;
}

.bx-v2-smart .smart-result-thumb:hover,
.bx-v2-smart .smart-material-media:hover,
.bx-v2-smart .smart-tag-preview-card:hover {
  border-color: var(--smart-accent);
}

.bx-v2-smart .smart-material-list .icon {
  width: 14px;
  height: 14px;
}

.bx-v2-smart .smart-model-package {
  display: grid;
  gap: 12px;
}

.bx-v2-smart .smart-runtime-model {
  max-width: 55%;
  overflow: hidden;
  color: var(--smart-muted);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2-smart .smart-runtime-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bx-v2-smart .smart-runtime-counts > span {
  padding: 4px 7px;
  color: var(--smart-muted);
  background: var(--smart-paper);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.bx-v2-smart .smart-runtime-prompt {
  border-top: 1px solid var(--smart-line);
}

.bx-v2-smart .smart-runtime-prompt > summary {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--smart-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
}

.bx-v2-smart .smart-runtime-prompt > summary::-webkit-details-marker {
  display: none;
}

.bx-v2-smart .smart-runtime-prompt > summary .icon {
  width: 14px;
  height: 14px;
  transition: transform 180ms ease;
}

.bx-v2-smart .smart-runtime-prompt[open] > summary .icon {
  transform: rotate(180deg);
}

.bx-v2-smart .smart-runtime-prompt > pre {
  margin-top: 0;
}

/* The runtime panel is an inspection surface, not auxiliary microcopy. */
.bx-v2-smart .smart-preview .smart-head p,
.bx-v2-smart .smart-preview .notice small,
.bx-v2-smart .smart-preview .preview-run-copy small,
.bx-v2-smart .smart-preview .smart-example-empty small,
.bx-v2-smart .smart-preview .smart-example-results button small,
.bx-v2-smart .smart-preview .smart-result-list small,
.bx-v2-smart .smart-preview .smart-material-list small,
.bx-v2-smart .smart-preview .smart-compare-head small,
.bx-v2-smart .smart-preview .smart-compare-label span,
.bx-v2-smart .smart-preview .smart-run-footer > span {
  font-size: 12px;
}

.bx-v2-smart .smart-preview .notice strong,
.bx-v2-smart .smart-preview .preview-run-copy strong,
.bx-v2-smart .smart-preview .smart-example-empty strong,
.bx-v2-smart .smart-preview .smart-example-results button strong,
.bx-v2-smart .smart-preview .smart-stage-result-head strong,
.bx-v2-smart .smart-preview .smart-result-list strong,
.bx-v2-smart .smart-preview .smart-material-list strong,
.bx-v2-smart .smart-preview .smart-compare-head strong {
  font-size: 13px;
}

.bx-v2-smart .smart-preview .smart-section-head h3,
.bx-v2-smart .smart-preview .smart-preview-loading strong {
  font-size: 14px;
}

.bx-v2-smart .smart-preview .smart-example-search input,
.bx-v2-smart .smart-preview .smart-catalog-picker button,
.bx-v2-smart .smart-preview .smart-inline-error {
  font-size: 13px;
}

.bx-v2-smart .smart-preview-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  align-content: center;
  color: var(--smart-muted);
  text-align: center;
}

.bx-v2-smart .smart-preview-empty .icon {
  width: 24px;
  height: 24px;
  margin-bottom: 10px;
}

.bx-v2-smart .smart-preview-empty strong {
  color: var(--smart-ink);
  font-size: 12px;
}

.bx-v2-smart .smart-preview-empty p {
  max-width: 320px;
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.bx-v2-smart .smart-final-result {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--smart-line);
}

.bx-v2-smart .smart-execution-truth {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px;
  background: var(--smart-paper);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-12);
}

.bx-v2-smart .smart-execution-truth .smart-section-head {
  margin-bottom: 0;
}

.bx-v2-smart .smart-final-result > .smart-stage-result {
  margin-top: 0;
  background: var(--smart-paper);
}

.bx-v2-smart .smart-tool-summary {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--smart-paper);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-12);
}

.bx-v2-smart .smart-system-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--smart-line);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-12);
}

.bx-v2-smart .smart-system-facts > div {
  min-width: 0;
  padding: 13px 9px;
  background: var(--smart-paper);
}

.bx-v2-smart .smart-system-facts strong,
.bx-v2-smart .smart-system-facts span {
  display: block;
}

.bx-v2-smart .smart-system-facts strong {
  font-size: 17px;
  letter-spacing: -0.04em;
}

.bx-v2-smart .smart-system-facts span {
  margin-top: 3px;
  color: var(--smart-muted);
  font-size: 12px;
  line-height: 1.35;
}

.bx-v2-smart .smart-tool-summary dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.bx-v2-smart .smart-tool-summary dl > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid var(--smart-line);
}

.bx-v2-smart .smart-tool-summary dl > div:first-child {
  border-top: 0;
}

.bx-v2-smart .smart-tool-summary dt {
  color: var(--smart-muted);
  font-size: 12px;
}

.bx-v2-smart .smart-tool-summary dd {
  margin: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  text-align: right;
}

.bx-v2-smart .smart-muted-copy {
  margin: 8px 0 0;
  color: var(--smart-muted);
  font-size: 12px;
  line-height: 1.5;
}

.bx-v2-smart .smart-empty-panel {
  display: grid;
  min-height: 280px;
  place-items: center;
  color: var(--smart-muted);
  font-size: 12px;
  text-align: center;
}

.bx-v2-smart .smart-nav-skeleton {
  display: grid;
  gap: 12px;
  padding: 18px 7px;
}

.bx-v2-smart .smart-nav-skeleton span {
  height: 34px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--smart-line) 60%, transparent),
      color-mix(in srgb, var(--smart-line) 25%, transparent),
      color-mix(in srgb, var(--smart-line) 60%, transparent)
    );
  background-size: 220% 100%;
  border-radius: var(--radius-8);
  animation: smart-shimmer 1.3s linear infinite;
}

.bx-v2-smart.has-fatal {
  grid-template-columns: 260px minmax(0, 1fr);
}

.bx-v2-smart .smart-fatal {
  display: grid;
  max-width: 620px;
  align-content: center;
  justify-items: start;
  padding: 48px;
}

.bx-v2-smart .smart-fatal h1 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.045em;
}

.bx-v2-smart .smart-fatal p {
  margin: 10px 0 20px;
  color: var(--smart-muted);
  font-size: 12px;
  line-height: 1.55;
}

@keyframes smart-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes smart-pulse {
  50% {
    opacity: 0.28;
    transform: scale(0.78);
  }
}

@keyframes smart-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes smart-shimmer {
  to {
    background-position: -120% 0;
  }
}

@keyframes smart-attention {
  0%,
  100% {
    box-shadow: none;
  }

  28%,
  72% {
    border-color: color-mix(in srgb, var(--smart-accent) 52%, var(--smart-line));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--smart-accent) 9%, transparent);
  }
}

@media (min-width: 721px) {
  .bx-v2-smart.smart-nav-collapsed .smart-nav {
    padding: 18px 10px;
  }

  .bx-v2-smart.smart-nav-collapsed .smart-nav > :not(.smart-brand) {
    display: none;
  }

  .bx-v2-smart.smart-nav-collapsed .smart-brand {
    justify-content: center;
    margin: 0;
  }

  .bx-v2-smart.smart-nav-collapsed .smart-brand > span {
    display: none;
  }
}

@media (min-width: 1181px) {
  .bx-v2-smart:not(.is-loading) .smart-nav {
    grid-column: 1;
  }

  .bx-v2-smart:not(.is-loading) [data-splitter="rail"] {
    grid-column: 2;
  }

  .bx-v2-smart:not(.is-loading) .smart-config {
    grid-column: 3;
  }

  .bx-v2-smart:not(.is-loading) [data-splitter="reality"] {
    grid-column: 4;
  }

  .bx-v2-smart:not(.is-loading) .smart-preview {
    grid-column: 5;
  }
}

@media (max-width: 1180px) {
  .bx-v2-smart {
    grid-template-columns: 230px minmax(360px, 1fr);
    overflow: visible;
  }

  .bx-v2-smart.is-loading {
    grid-template-columns: 230px minmax(360px, 1fr);
  }

  .bx-v2-smart.smart-nav-collapsed {
    grid-template-columns: 56px minmax(360px, 1fr);
  }

  .bx-v2-smart .smart-splitter {
    display: none;
  }

  .bx-v2-smart .smart-preview {
    grid-column: 2;
    height: auto;
    min-height: 100svh;
    border-top: 1px solid var(--smart-line);
  }

  .bx-v2-smart.smart-nav-collapsed .smart-preview {
    grid-column: 2;
  }

  .bx-v2-smart .smart-config {
    height: auto;
  }

  .bx-v2-smart .smart-nav {
    grid-row: 1 / span 2;
  }

  .bx-v2-smart.has-fatal {
    grid-template-columns: 230px minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .bx-v2-smart {
    display: block;
    /* Колонка длиннее экрана, а слой страницы её обрезает: прокручиваться
       обязан сам экран Студии. Раньше низ настроек был просто недостижим —
       контент упирался в обрез и не двигался. */
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Под нижним доком приложения (58px) обязан оставаться воздух, иначе
       последняя строка колонки прячется за ним. */
    padding-bottom: 96px;
  }

  /* На телефоне колонки не помещаются рядом, а поставленные друг под друга
     дают страницу в двадцать тысяч пикселей: до результата надо было
     пролистать все настройки целиком. Показываем одну, вторая — по кнопке. */
  /* Порядок на телефоне: сценарий во всю ширину (его и выбирают), под ним —
     поток и переключатель колонок. Раньше сценарий делил ряд с потоком и
     обрезался на середине названия. */
  .bx-v2-smart .smart-mobile-item-picker {
    order: 1;
    grid-column: 1 / -1;
  }

  /* Поток переключают редко, колонку — постоянно: отдаём переключателю
     больше половины ряда, поток ужимается и обрезается многоточием. */
  .bx-v2-smart .smart-flow-picker {
    order: 2;
    min-width: 0;
  }

  .bx-v2-smart .smart-flow-picker select {
    text-overflow: ellipsis;
  }

  .bx-v2-smart .smart-mobile-pane-switch {
    order: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 3px;
    background: var(--smart-canvas);
    border: 1px solid var(--smart-line);
    border-radius: var(--radius-8);
  }

  .bx-v2-smart .smart-mobile-pane-switch button {
    min-height: 32px;
    padding: 6px 6px;
    white-space: nowrap;
    color: var(--smart-muted);
    background: transparent;
    border-radius: var(--radius-4);
    font-size: 12px;
    font-weight: 700;
  }

  .bx-v2-smart .smart-mobile-pane-switch button.active {
    color: var(--smart-ink);
    background: var(--smart-card);
  }

  .bx-v2-smart .smart-preview {
    display: none;
  }

  /* Шапка липкая: без отступа прокрутка к началу колонки прячет её первые
     строки под пикерами. */
  .bx-v2-smart .smart-config,
  .bx-v2-smart .smart-preview {
    scroll-margin-top: 124px;
  }

  .bx-v2-smart.smart-pane-preview .smart-preview {
    display: block;
  }

  .bx-v2-smart.smart-pane-preview .smart-config {
    display: none;
  }

  .bx-v2-smart .smart-nav {
    position: sticky;
    z-index: 32;
    top: 0;
    display: grid;
    width: 100%;
    height: auto;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
    gap: 7px;
    padding: 9px 9px 9px 58px;
    background: color-mix(in srgb, var(--smart-surface) 94%, transparent);
    border-right: 0;
    border-bottom: 1px solid var(--smart-line);
    overflow-x: hidden;
    backdrop-filter: blur(16px);
  }

  .bx-v2-smart .smart-brand,
  .bx-v2-smart .smart-flow-caption,
  .bx-v2-smart .smart-nav-list-toggle,
  .bx-v2-smart .scenario-group > span {
    display: none;
  }

  .bx-v2-smart .smart-flow-picker {
    min-width: 0;
    margin: 0;
  }

  .bx-v2-smart .smart-flow-picker > .smart-flow-picker-label,
  .bx-v2-smart .smart-mobile-item-picker > span {
    display: none;
  }

  .bx-v2-smart .smart-flow-select-shell > .icon {
    display: none;
  }

  .bx-v2-smart .smart-flow-select-shell select {
    padding-left: 10px;
  }

  .bx-v2-smart .smart-flow-picker select,
  .bx-v2-smart .smart-mobile-item-picker select {
    min-height: 36px;
  }

  .bx-v2-smart .smart-mobile-item-picker {
    display: block;
    min-width: 0;
  }

  .bx-v2-smart .smart-nav-scroll {
    display: none;
  }

  .bx-v2-smart .scenario-group {
    display: inline-flex;
    gap: 4px;
    margin: 0;
  }

  .bx-v2-smart .scenario-btn {
    width: auto;
    max-width: 180px;
    min-height: 36px;
    padding: 7px 10px;
    background: var(--smart-paper);
    white-space: nowrap;
  }

  .bx-v2-smart .scenario-btn:hover {
    transform: none;
  }

  .bx-v2-smart .scenario-btn.active {
    color: var(--smart-paper);
    background: var(--smart-ink);
  }

  .bx-v2-smart .scenario-btn.active::after,
  .bx-v2-smart .scenario-btn small {
    display: none;
  }

  .bx-v2-smart .smart-config,
  .bx-v2-smart .smart-preview {
    width: 100%;
    height: auto;
    min-height: 0;
    /* Свою прокрутку колонки отдают экрану: две вложенные полосы на телефоне
       ловят жест по очереди и обе останавливаются на середине. */
    overflow: visible;
    padding: 20px 16px;
  }

  .bx-v2-smart .smart-config {
    padding-bottom: 96px;
    border-right: 0;
    border-bottom: 1px solid var(--smart-line);
  }

  .bx-v2-smart .smart-preview {
    border-top: 0;
  }

  .bx-v2-smart .form-grid {
    grid-template-columns: 1fr;
  }

  .bx-v2-smart .smart-vocabs > label,
  .bx-v2-smart .smart-alias-row,
  .bx-v2-smart .smart-tool-override-actions {
    grid-template-columns: 1fr;
  }

  .bx-v2-smart .smart-location-snapshot,
  .bx-v2-smart .smart-location-source-grid,
  .bx-v2-smart .smart-location-examples {
    grid-template-columns: 1fr;
  }

  .bx-v2-smart .smart-location-snapshot-icon {
    display: none;
  }

  .bx-v2-smart .smart-location-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bx-v2-smart .smart-location-preview-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .bx-v2-smart .smart-alias-row .icon-btn {
    margin: 0;
  }

  .bx-v2-smart .smart-tag-inspector {
    grid-template-columns: 1fr;
  }

  .bx-v2-smart .smart-tag-inspector.has-preview {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .bx-v2-smart .smart-tag-inspector.has-preview > .btn {
    grid-column: 1 / -1;
  }

  .bx-v2-smart .smart-system-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bx-v2-smart .smart-system-editor > summary {
    min-height: 64px;
    padding: 14px 15px;
  }

  .bx-v2-smart .smart-system-editor-body {
    padding: 15px;
  }

  .bx-v2-smart .smart-editor-count {
    display: none;
  }

  .bx-v2-smart .smart-structure-item-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .bx-v2-smart .smart-structure-item-head > .smart-structure-actions {
    margin-left: auto;
  }

  .bx-v2-smart .smart-option-row,
  .bx-v2-smart .smart-option-main,
  .bx-v2-smart .smart-brand-style-grid {
    grid-template-columns: 1fr;
  }

  .bx-v2-smart .smart-option-row > .smart-structure-actions {
    justify-self: end;
  }

  .bx-v2-smart .smart-simple-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .bx-v2-smart .smart-simple-row > .smart-structure-actions {
    grid-column: 2;
    justify-self: end;
  }

  .bx-v2-smart .smart-table-head {
    display: none;
  }

  .bx-v2-smart .smart-table-label.sr-only {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 5px;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    clip-path: none !important;
  }

  .bx-v2-smart .smart-size-row,
  .bx-v2-smart .smart-disclaimer-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
    padding: 11px;
    background: color-mix(in srgb, var(--smart-surface-2) 36%, transparent);
    border: 0;
    border-radius: var(--radius-8);
  }

  .bx-v2-smart .smart-size-row > .field:first-child,
  .bx-v2-smart .smart-size-row > .smart-size-mediums,
  .bx-v2-smart .smart-size-row > .smart-structure-actions,
  .bx-v2-smart .smart-disclaimer-row > .field,
  .bx-v2-smart .smart-disclaimer-row > .smart-structure-actions {
    grid-column: 1 / -1;
  }

  .bx-v2-smart .smart-size-row > .smart-structure-actions,
  .bx-v2-smart .smart-disclaimer-row > .smart-structure-actions {
    justify-self: end;
  }

  .bx-v2-smart .smart-axis-actions {
    flex-wrap: wrap;
    margin: 18px -15px -15px;
    padding: 11px 15px;
  }

  .bx-v2-smart .smart-axis-actions > span {
    width: 100%;
    flex-basis: 100%;
  }

  .bx-v2-smart .smart-field-wide {
    grid-column: auto;
  }

  .bx-v2-smart .smart-section-head {
    display: block;
  }

  .bx-v2-smart .smart-section-head > small {
    max-width: none;
    margin-top: 4px;
    text-align: left;
  }

  .bx-v2-smart .sticky-actionbar {
    bottom: -70px;
    margin-bottom: -78px;
  }

  .bx-v2-smart .smart-preview-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .bx-v2-smart .smart-run-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .bx-v2-smart .smart-run-footer .smart-run-button {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }

  .bx-v2-smart .smart-result-image .smart-media-card-action {
    opacity: 1;
    transform: none;
  }

  .bx-v2-smart .smart-head h1,
  .bx-v2-smart .smart-head h2 {
    font-size: 26px;
  }

  .bx-v2-smart .smart-preview-status {
    justify-content: flex-start;
  }

  .bx-v2-smart .smart-preview-status .notice {
    justify-content: flex-start;
    text-align: left;
  }

  .bx-v2-smart .preview-step {
    grid-template-columns: 25px minmax(0, 1fr);
  }

  .bx-v2-smart .smart-stage-play {
    grid-column: 2;
    justify-self: start;
  }

  .bx-v2-smart .smart-compare-head {
    display: grid;
    align-items: start;
  }

  .bx-v2-smart .smart-compare-head select {
    width: 100%;
    max-width: none;
  }

  .bx-v2-smart .smart-compare-grid {
    grid-template-columns: 1fr;
  }

  .bx-v2-smart .smart-runtime-model {
    max-width: 48%;
  }

  .bx-v2-smart.has-fatal {
    display: block;
  }

  .bx-v2-smart.has-fatal .smart-nav {
    display: none;
  }

  .bx-v2-smart .smart-fatal {
    min-height: 100svh;
    padding: 28px 20px;
  }
}

@container smart-config (max-width: 600px) {
  .bx-v2-smart .smart-system-editor > summary {
    min-height: 64px;
    padding: 14px 15px;
  }

  .bx-v2-smart .smart-system-editor-body {
    padding: 15px;
  }

  .bx-v2-smart .smart-editor-count {
    display: none;
  }

  .bx-v2-smart .smart-structure-item-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .bx-v2-smart .smart-structure-item-head > .smart-structure-actions {
    margin-left: auto;
  }

  .bx-v2-smart .smart-option-row,
  .bx-v2-smart .smart-option-main,
  .bx-v2-smart .smart-brand-style-grid {
    grid-template-columns: 1fr;
  }

  .bx-v2-smart .smart-option-row > .smart-structure-actions {
    justify-self: end;
  }

  .bx-v2-smart .smart-simple-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .bx-v2-smart .smart-simple-row > .smart-structure-actions {
    grid-column: 2;
    justify-self: end;
  }

  .bx-v2-smart .smart-table-head {
    display: none;
  }

  .bx-v2-smart .smart-size-row,
  .bx-v2-smart .smart-disclaimer-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
    padding: 11px;
    background: color-mix(in srgb, var(--smart-surface-2) 36%, transparent);
    border: 0;
    border-radius: var(--radius-8);
  }

  .bx-v2-smart .smart-size-row > .field:first-child,
  .bx-v2-smart .smart-size-row > .smart-size-mediums,
  .bx-v2-smart .smart-size-row > .smart-structure-actions,
  .bx-v2-smart .smart-disclaimer-row > .field,
  .bx-v2-smart .smart-disclaimer-row > .smart-structure-actions {
    grid-column: 1 / -1;
  }

  .bx-v2-smart .smart-size-row > .smart-structure-actions,
  .bx-v2-smart .smart-disclaimer-row > .smart-structure-actions {
    justify-self: end;
  }

  .bx-v2-smart .smart-table-label.sr-only {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 5px;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    clip-path: none !important;
  }

  .bx-v2-smart .smart-axis-actions {
    flex-wrap: wrap;
    margin: 18px -15px -15px;
    padding: 11px 15px;
  }

  .bx-v2-smart .smart-axis-actions > span {
    width: 100%;
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bx-v2-smart *,
  .bx-v2-smart *::before,
  .bx-v2-smart *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Рентген подстановок ---------------------------------------------------
   Тег в шаблоне слева и текст, в который он превратился справа, красятся
   одним цветом (`smartTagTone`): видно, что во что развернулось, без чтения
   обоих полотен целиком. Слева это зеркало под прозрачной textarea — тот же
   приём, что у подсказок композера. */

/* Редактор промта — ОДИН слой: текст и подсветка живут в одном элементе.
   Раньше здесь была прозрачная textarea и зеркало под ней; совпасть по метрике
   до пикселя они не могли, и расхождение копилось к нижним строкам и при
   прокрутке. Геометрия повторяет `.field textarea`, чтобы поле не выделялось
   среди соседей. */
.bx-v2-smart .smart-prompt-editor {
  display: block;
  width: 100%;
  min-height: 240px;
  max-height: 62svh;
  overflow: auto;
  margin: 0;
  padding: 9px 10px;
  color: var(--smart-ink);
  background: var(--smart-surface);
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
  outline: 0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.62;
  tab-size: 2;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* Курсор наследуется от .field, а там стрелка: у textarea её перебивал
     браузер, у обычного div — некому. */
  cursor: text;
  caret-color: var(--smart-accent);
  resize: vertical;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.bx-v2-smart .smart-prompt-editor:focus {
  border-color: color-mix(in srgb, var(--smart-accent) 62%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--smart-accent) 12%, transparent);
}

.bx-v2-smart .smart-prompt-part .smart-prompt-editor {
  min-height: 180px;
  margin-top: 12px;
}

/* ── Подсветка промта ─────────────────────────────────────────────────────
   Один приём на всё: мягкая заливка роли + скруглённые края. Ни подчёркиваний,
   ни рамок, ни курсива — текст промта должен читаться как текст, а подсветка
   работать фоном. Цвет отвечает на вопрос «откуда значение», см. smartTagRole.
   ────────────────────────────────────────────────────────────────────────── */
.bx-v2-smart .smart-sub {
  --smart-sub-fill: 12%;
  padding: 0.1em 0.28em;
  margin: 0 -0.06em;
  border-radius: var(--radius-4);
  color: inherit;
  background: color-mix(in srgb, var(--smart-tag-color) var(--smart-sub-fill), transparent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-color 0.12s ease;
}

/* Скелет шаблона — самый тихий слой: он структура, а не данные. */
.bx-v2-smart .smart-sub[data-role="control"] {
  --smart-sub-fill: 0%;
  color: color-mix(in srgb, var(--smart-tag-color) 88%, var(--smart-ink));
  opacity: 0.75;
}

.bx-v2-smart .smart-prompt-xray {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Ни один моноширинный блок не имеет права раздвинуть панель: она узкая и
   делит ширину экрана по сетке, а разъехавшись — тянет за собой ВСЕ соседние
   блоки, и справа открывается полоса пустоты под горизонтальную прокрутку.
   Правило страхует и те <pre>, что рождаются вне .smart-stage-result. */
.bx-v2-smart .smart-preview pre,
.bx-v2-smart .smart-config pre {
  max-width: 100%;
  overflow: auto;
  overflow-wrap: anywhere;
}

.bx-v2-smart .smart-prompt-xray .smart-sub {
  cursor: pointer;
}

.bx-v2-smart .smart-prompt-xray .smart-sub:hover {
  --smart-sub-fill: 20%;
}

/* Свёрнутая подстановка — та же геометрия, просто короче. Текст остаётся
   в документе: копирование и поиск по странице работают по полному тексту.
   white-space обязателен: нулевой кегль прячет буквы, но переводы строк внутри
   свёрнутого текста в pre-wrap всё равно ломали строку, и каждая пустая строка
   занимала высоту по шрифту РОДИТЕЛЯ. Свёрнутая задача на девятнадцать строк
   оставляла после себя полтысячи пикселей пустоты. */
.bx-v2-smart .smart-prompt-xray .smart-sub.is-folded {
  font-size: 0;
  line-height: 0;
  white-space: normal;
  padding: 0;
  margin: 0;
  background: none;
/* Ни один моноширинный блок не имеет права раздвинуть панель: она узкая и
   делит ширину экрана по сетке, а разъехавшись — тянет за собой ВСЕ соседние
   блоки, и справа открывается полоса пустоты под горизонтальную прокрутку.
   Правило страхует и те <pre>, что рождаются вне .smart-stage-result. */
.bx-v2-smart .smart-preview pre,
.bx-v2-smart .smart-config pre {
  max-width: 100%;
  overflow: auto;
  overflow-wrap: anywhere;
}

}

.bx-v2-smart .smart-prompt-xray .smart-sub.is-folded::before {
  content: "{" attr(data-sub-tag) "}  " attr(data-len) " знаков";
  display: inline-block;
  padding: 0.15em 0.55em;
  border-radius: var(--radius-pill);
  font: 500 11.5px/1.5 var(--font-mono, ui-monospace, Menlo, monospace);
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--smart-tag-color) 82%, var(--smart-ink));
  background: color-mix(in srgb, var(--smart-tag-color) 14%, transparent);
  white-space: nowrap;
}

.bx-v2-smart .smart-prompt-xray .smart-sub.is-folded:hover::before {
  background: color-mix(in srgb, var(--smart-tag-color) 22%, transparent);
}

.bx-v2-smart .smart-prompt-xray .smart-sub:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--smart-tag-color) 60%, transparent);
  outline-offset: 1px;
}

.bx-v2-smart .smart-prompt-version {
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-12);
  background: color-mix(in srgb, var(--smart-surface-2) 72%, transparent);
}

.bx-v2-smart .smart-prompt-version > p {
  margin: 5px 0 10px;
  color: var(--smart-muted);
}

.bx-v2-smart .smart-prompt-version.is-warning {
  border-color: color-mix(in srgb, #c58a24 45%, var(--smart-line));
}

.bx-v2-smart .smart-prompt-version.is-danger {
  border-color: color-mix(in srgb, var(--smart-danger) 45%, var(--smart-line));
}

.bx-v2-smart .smart-inline-success {
  margin-bottom: 10px;
  color: color-mix(in srgb, #237a4b 84%, var(--smart-ink));
}

.bx-v2-smart .smart-prompt-version-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.bx-v2-smart .smart-prompt-version details {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-8);
  background: var(--smart-surface);
}

.bx-v2-smart .smart-prompt-version summary {
  cursor: pointer;
  font-weight: 650;
}

.bx-v2-smart .smart-prompt-version pre {
  max-height: 260px;
  margin: 8px 0 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 12px/1.45 "SFMono-Regular", Consolas, monospace;
}

.bx-v2-smart .smart-attribute-version-list {
  display: grid;
  gap: 7px;
  max-height: 300px;
  margin-top: 8px;
  overflow: auto;
}

.bx-v2-smart .smart-attribute-version-list article {
  padding-top: 7px;
  border-top: 1px solid var(--smart-line);
}

.bx-v2-smart .smart-attribute-version-list article:first-child {
  padding-top: 0;
  border-top: 0;
}

.bx-v2-smart .smart-attribute-version-list small {
  display: block;
  color: var(--smart-muted);
}

.bx-v2-smart .smart-attribute-version-list p {
  margin: 4px 0;
  color: var(--smart-muted);
}

.bx-v2-smart .smart-attribute-version-list article div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.bx-v2-smart .smart-attribute-version-list article span {
  padding: 2px 6px;
  border-radius: var(--radius-8);
  background: var(--smart-surface-2);
  font-size: 12px;
}

@media (max-width: 1150px) {
  .bx-v2-smart .smart-prompt-version-grid {
    grid-template-columns: 1fr;
  }
}

/* Обе стороны раскладки в «Живом примере» (ТЗ 04.08, §9). */
.smart-example-picker .smart-example-carriers {
  display: block;
  margin-top: 2px;
  color: var(--bxv2-muted);
}

.smart-example-picker .smart-example-carriers.is-mismatch {
  color: var(--bxv2-accent);
}


/* Чип — это тот же подсвеченный тег, только с адресом своей настройки.
   Отдельной сущности не заводим: подсветка симметрична с рентгеном справа,
   и разводить два разных вида одного и того же было бы враньём. Курсор и
   подчёркивание при наведении — единственное, что отличает чип от простого
   выделения: «сюда можно нажать». */
.smart-prompt-editor .smart-chip {
  cursor: pointer;
  border-radius: var(--radius-4);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, var(--smart-tag-color) 55%, transparent);
  text-underline-offset: 2px;
}

.smart-prompt-editor .smart-chip:hover,
.smart-prompt-editor .smart-chip:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--smart-tag-color) 70%, transparent);
  outline-offset: 1px;
  text-decoration-style: solid;
}

/* Настройка сценария — домашний чип Студии, а не новая сущность: та же
   пилюля, что у тегов, только с подписью и значением внутри. Значение видно
   сразу; диалог открывается лишь чтобы поменять. Полки с полями больше нет —
   всё, что было в сетке, лежит в кармане своего чипа. */
.bx-v2-smart .smart-setting-chips .chip-row {
  flex-wrap: wrap;
  gap: 7px;
}

.bx-v2-smart .smart-setting-chip {
  gap: 6px;
  font-family: inherit;
  font-size: 12px;
}

/* Спящая настройка не спрятана, а приглушена: при текущей политике она ни в
   один запрос не уходит, но остаётся доступной — почему именно, объясняет
   записка в её диалоге. */
.bx-v2-smart .smart-setting-chip.dormant {
  opacity: .55;
}

.bx-v2-smart .smart-setting-chip-label {
  color: var(--smart-muted);
}

.bx-v2-smart .smart-setting-chip-value {
  color: var(--smart-ink);
  font-weight: 600;
}

/* Диалог висит НАД колонкой у своего чипа: место в потоке он не занимает,
   иначе список чипов прыгал бы при каждом открытии. Позицию считает JS от
   прямоугольника чипа — CSS-якорей ещё не везде хватает. */
.bx-v2-smart .smart-setting-chips,
.bx-v2-smart .smart-prompt-section {
  position: relative;
}

/* Всплывающая панель абсолютна внутри своей секции, а секция стоит в общем
   потоке без своего слоя — поэтому следующие карточки колонки закрашивали её
   сверху: список значений признака уезжал ПОД карточку инструментов. Поднимаем
   не панель, а саму секцию, и только пока панель открыта: постоянный слой
   ломал бы порядок наведения у соседей. */
.bx-v2-smart .smart-prompt-section:has(.smart-tag-inspector),
.bx-v2-smart .smart-setting-chips:has(.smart-setting-popover) {
  z-index: 7;
}

.bx-v2-smart .smart-setting-popover,
.bx-v2-smart .smart-tag-inspector {
  position: absolute;
  z-index: 6;
  width: min(320px, calc(100% - 16px));
}

.bx-v2-smart .smart-setting-popover {
  padding: 12px;
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-12);
  background: color-mix(in srgb, var(--smart-surface-2) 58%, transparent);
  display: grid;
  gap: 10px;
}

.bx-v2-smart .smart-setting-popover > .icon-btn {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
}

.bx-v2-smart .smart-setting-popover-hint {
  color: var(--smart-muted);
}

/* Заголовок «Как выполняется сценарий» снят — его роль взяли на себя чипы со
   значениями. Осталась только записка, и без заголовка ей нужен левый край:
   шапка раскладывает пару «заголовок ↔ примечание» по разным краям, и одинокая
   записка уезжала в середину. */
.bx-v2-smart .smart-section-head-quiet {
  justify-content: flex-start;
  margin-top: 10px;
  margin-bottom: 0;
}

.bx-v2-smart .smart-section-head-quiet small {
  text-align: start;
}

/* Подпись чипа — строчными и без разрядки: капитель у тегов уместна, но здесь
   она втрое удлиняет строку и ломает перенос ряда в узкой колонке. */
.bx-v2-smart .smart-setting-chip-label {
  text-transform: none;
  letter-spacing: 0;
}

/* Шапка сценария сжата: поток и название уже выбраны слева в навигации, а
   описание нужно один раз — при первом знакомстве. Держим его одной строкой с
   полным текстом в подсказке, чтобы верх экрана не съедало то, что человек
   давно прочитал. */
.bx-v2-smart .smart-head-compact h1 {
  font-size: 20px;
  line-height: 1.25;
}

.bx-v2-smart .smart-head-compact p {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* Рентген вложений: что приложат теги [attach]. Пакет материалов и вложения —
   разные вещи, и раньше справа показывался только пакет: каноны бренда
   собирались, но человек их не видел. */
.bx-v2-smart .smart-attach-xray {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.bx-v2-smart .smart-attach-xray-row {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--smart-line);
  border-radius: var(--radius-12);
  background: color-mix(in srgb, var(--smart-surface-2) 58%, transparent);
}

.bx-v2-smart .smart-attach-xray-row > .chip {
  justify-self: start;
}

.bx-v2-smart .smart-attach-xray-names {
  color: var(--smart-ink);
  font-size: 12px;
}

.bx-v2-smart .smart-attach-xray-role {
  color: var(--smart-muted);
}

/* Правка источника прямо в чипе. Раньше чип только сообщал, что подставится, и
   единственным действием предлагал уйти на другой экран — то есть потерять
   место, на котором думал. Значения признака и есть содержимое тега, поэтому
   правятся здесь же, в том же окне, где видно весь запрос. */
.bx-v2-smart .smart-tag-editor {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}

.bx-v2-smart .smart-attr-options { /* список значений признака или слов словаря */
  max-height: 168px;
  overflow-y: auto;
  gap: 5px;
  padding-right: 2px;
}

.bx-v2-smart .smart-attr-option {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding-right: 3px;
}

/* Крестик живёт внутри пилюли и не должен её распирать: он мельче строки и
   проявляется под курсором, чтобы список читался как список, а не как пульт. */
.bx-v2-smart .smart-attr-option .icon-btn {
  width: 17px;
  height: 17px;
  min-width: 17px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  opacity: .45;
  background: transparent;
}

.bx-v2-smart .smart-attr-option .icon-btn svg {
  width: 11px;
  height: 11px;
}

.bx-v2-smart .smart-attr-option:hover .icon-btn,
.bx-v2-smart .smart-attr-option .icon-btn:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, var(--smart-tag-color) 22%, transparent);
}

.bx-v2-smart .smart-tag-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.bx-v2-smart .smart-tag-add .input {
  min-width: 0;
  height: 30px;
  font-size: 12px;
}

.bx-v2-smart .smart-tag-add .btn {
  height: 30px;
  padding-inline: 10px;
  font-size: 12px;
  white-space: nowrap;
}

.bx-v2-smart .smart-tag-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--smart-ink-soft, var(--muted));
}

/* Каноны клиента — записи, а не строки: у правила есть перечень изделий и флаг
   мокапа, у дисклеймера ключ и подсказка модели. В модель уходит текст, его и
   правим; служебные поля показываем подписью, чтобы человек видел, к чему
   правило вообще применяется. */
.bx-v2-smart .smart-canon-rows {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}

.bx-v2-smart .smart-canon-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 6px;
}

.bx-v2-smart .smart-canon-text {
  grid-column: 1;
  min-width: 0;
  resize: vertical;
  font-size: 12px;
  line-height: 1.45;
}

.bx-v2-smart .smart-canon-note {
  grid-column: 1;
  font-size: 12px;
  line-height: 1.35;
  color: var(--smart-ink-soft, var(--muted));
}

.bx-v2-smart .smart-canon-row > .icon-btn {
  grid-column: 2;
  grid-row: 1;
  width: 22px;
  height: 22px;
  min-width: 22px;
  opacity: .5;
}

.bx-v2-smart .smart-canon-row:hover > .icon-btn,
.bx-v2-smart .smart-canon-row > .icon-btn:focus-visible {
  opacity: 1;
}