/* ════════════════════════════════════════════════════════════════════════
   editor-particles.css — стили нативных панелей системы частиц (fifi)
   внутри контекста слоя rlottie (Stage U шаг 4 эпика fifi-integration).

   Здесь живут только КОНТРОЛЫ частиц, которых ещё нет в дизайн-системе
   Deepreview: ползунок-дорожка, редактируемое число у ползунка, компас
   направления+разброса, двойной ползунок «от–до», ползунок гравитации,
   вкладки. Все цвета/радиусы/отступы — только через токены base.css
   (--accent / --gray-* / --white / --r-*). Хардкода цветов нет, чтобы
   работала смена темы (themes.css).

   Раскладочные классы конкретной панели/острова (где это стоит на экране)
   живут в editor.css — здесь только сами «кирпичики»-контролы.
   ════════════════════════════════════════════════════════════════════════ */

/* ════ 0. ПОЛЗУНОК-ДОРОЖКА (.ui-range) ════════════════════════════════════
   В редакторе раньше не было ни одного ползунка (только числовые поля
   .ui-input) — поэтому стиль дорожки пишем с нуля. Заполненная часть слева
   рисуется градиентом по переменной --range-fill (её ставит JS в процентах). */
.ui-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: 7px 0;
  border-radius: var(--r-sm);
  background:
    linear-gradient(
      to right,
      var(--accent) 0%,
      var(--accent) var(--range-fill, 0%),
      var(--gray-33) var(--range-fill, 0%),
      var(--gray-33) 100%
    );
  outline: none;
  cursor: pointer;
}
.ui-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--accent);
  cursor: grab;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.ui-range::-webkit-slider-thumb:active { cursor: grabbing; }
.ui-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--accent);
  cursor: grab;
}
.ui-range:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft); }

/* ════ 1. РЯД ПАРАМЕТРА: подпись + ползунок + редактируемое число ══════════
   Тыкаешь на число — вводишь точное значение. Поле прозрачное, рамка только
   при наведении/фокусе. */
.particle-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.particle-row .spr__label { flex: 0 0 auto; min-width: 78px; }
.particle-row .ui-range { flex: 1 1 auto; }
.particle-row .num-wrap { flex: 0 0 auto; display: inline-flex; align-items: baseline; }
.particle-row--lighting { gap: 6px; }
.particle-row--lighting .spr__label { min-width: 58px; }
.particle-lighting-color {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.particle-lighting-color .color-swatch { width: 22px; height: 22px; }
.particle-lighting-color .spr__hex { width: 66px; }
.particle-row--switch-value { justify-content: space-between; gap: 6px; }
.particle-inline-percent {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  color: var(--gray-99);
  font-size: 11px;
}
.particle-inline-percent__label { white-space: nowrap; }
.particle-inline-percent .num-field { width: 3.2em; }

/* Поле без ползунка (зерно seed до ~1e9 — 10 знаков): растягиваем на всю свободную
   ширину ряда, иначе 3.4em обрезали бы длинное число. */
.particle-row--wide .num-wrap { flex: 1 1 auto; }
.particle-row--wide .num-field { width: 100%; }

.num-field {
  width: 3.4em;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--gray-cc);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 2px 4px;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}
.num-field::-webkit-inner-spin-button,
.num-field::-webkit-outer-spin-button { -webkit-appearance: none; }
.num-field:hover { border-color: var(--gray-44); }
.num-field:focus { border-color: var(--accent); color: var(--white); }
.num-unit { font-size: 11px; color: var(--gray-66); margin-left: 1px; }

/* ════ 2. ВЫБОР ИЗ ВАРИАНТОВ (чипы) ═══════════════════════════════════════ */
.choice-row { display: flex; flex-direction: column; gap: 6px; }
.choice-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.particle-source-picker .hierarchy-row__label { flex: 0 0 auto; }
.particle-dimensions {
  width: 100%;
  min-height: 28px;
}
.particle-dimensions__field { flex: 1 1 0; }
.particle-dimensions__field .ui-input {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.particle-dimensions__unit {
  flex: 0 0 auto;
  color: var(--gray-66);
  font-size: 10px;
}
.particle-control--disabled { opacity: 0.42; }
.particle-control--disabled input,
.particle-control--disabled button { cursor: default; }

.visual-nose-row { display: flex; align-items: center; gap: 8px; }
.visual-nose-row .spr__label { flex: 1 1 auto; }
.visual-nose-buttons { display: inline-flex; gap: 2px; }
.visual-nose-btn {
  width: 26px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--gray-33);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--gray-99);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.visual-nose-btn:hover { color: var(--white); border-color: var(--gray-66); }
.visual-nose-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ════ 3. КОМПАС: направление (стрелка) + разброс (сектор-конус) ═══════════ */
.compass-box { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.compass svg { touch-action: none; cursor: pointer; user-select: none; display: block; }
.compass__ring   { fill: var(--gray-15); stroke: var(--gray-33); }
.compass__cone   { fill: var(--accent); opacity: 0.20; }
.compass__arrow  { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.compass__hub    { fill: var(--accent); }
.compass__handle { fill: var(--accent); stroke: var(--white); stroke-width: 1.5; cursor: grab; }
.compass__edge   { fill: var(--white); stroke: var(--accent); stroke-width: 1.5; cursor: grab; }
.compass__cap    { font-size: 11px; color: var(--gray-66); display: flex; align-items: baseline; gap: 3px; }
.compass__cap input {
  width: 2.6em; background: transparent; border: 1px solid transparent;
  border-radius: var(--r-sm); color: var(--gray-66); font-size: 11px;
  text-align: right; padding: 0 2px; outline: none;
  appearance: textfield; -moz-appearance: textfield; font-variant-numeric: tabular-nums;
}
.compass__cap input::-webkit-inner-spin-button,
.compass__cap input::-webkit-outer-spin-button { -webkit-appearance: none; }
.compass__cap input:hover { border-color: var(--gray-44); }
.compass__cap input:focus { border-color: var(--accent); color: var(--white); }

/* Ряд «компас + столбец скорости/гравитации» — стоят рядом, если хватает
   ширины; на узкой панели столбец переносится под компас. */
.fly-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.fly-row__col { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* ════ 4. ДВОЙНОЙ ПОЛЗУНОК «от–до» (две ручки на дорожке) ══════════════════ */
.pf { display: flex; flex-direction: column; gap: 8px; }
.pf__label { font-size: 12px; color: var(--gray-cc); }
/* Строка «подпись + редактируемое число» (например, у гравитации). */
.pf__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pf__head .num-field { text-align: right; }
.dual__track { position: relative; height: 18px; margin-top: 2px; }
.dual__rail {
  position: absolute; top: 50%; left: 0; right: 0; height: 4px;
  transform: translateY(-50%); background: var(--gray-33); border-radius: var(--r-sm);
}
.dual__fill {
  position: absolute; top: 50%; height: 4px;
  transform: translateY(-50%); background: var(--accent); border-radius: var(--r-sm);
}
.dual__range {
  position: absolute; top: 0; left: 0; width: 100%; height: 18px; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.dual__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--accent); cursor: grab;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.dual__range::-moz-range-thumb {
  pointer-events: auto; width: 14px; height: 14px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--accent); cursor: grab;
}
.dual__ends { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.dual__end { display: flex; align-items: baseline; gap: 3px; font-size: 11px; color: var(--gray-66); }
.dual__end input {
  width: 3em; background: transparent; border: 1px solid transparent;
  border-radius: var(--r-sm); color: var(--gray-66); font-size: 11px;
  text-align: left; padding: 0 2px; outline: none;
  appearance: textfield; -moz-appearance: textfield; font-variant-numeric: tabular-nums;
}
.dual__end:last-child input { text-align: right; }
.dual__end input::-webkit-inner-spin-button,
.dual__end input::-webkit-outer-spin-button { -webkit-appearance: none; }
.dual__end input:hover { border-color: var(--gray-44); }
.dual__end input:focus { border-color: var(--accent); color: var(--white); }

/* Гравитация: засечка нуля по центру + подписи краёв (двойной ползунок «от-до»). */
.grav__tick {
  position: absolute; left: 50%; top: 50%; width: 2px; height: 12px;
  transform: translate(-50%, -50%); background: var(--gray-44); border-radius: 1px;
  pointer-events: none;
}
.grav__ends { display: flex; justify-content: space-between; font-size: 10px; color: var(--gray-66); margin-top: 2px; }

/* ════ 5. ВКЛАДКИ, делящие настройки на разделы ═══════════════════════════ */
.particle-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--gray-33);
  overflow-x: auto; scrollbar-width: none;
}
.particle-tabs::-webkit-scrollbar { display: none; }
.particle-tab {
  display: flex; align-items: center; gap: 4px; border: none; background: transparent;
  color: var(--gray-66); font-size: 12px; padding: 9px 4px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
.particle-tab__icon { display: inline-flex; }
.particle-tab svg { flex: 0 0 auto; width: 13px; height: 13px; }
.particle-tab:hover { color: var(--gray-cc); }
.particle-tab--on { color: var(--accent); border-bottom-color: var(--accent); }
.particle-tab-body { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }

/* Ряд уровня СЦЕНЫ — ползунок «качество ↔ размер» (Этап 3 «Честная траектория»).
   Общий для всей системы, поэтому отделён от per-слотовых табов чертой сверху и
   виден всегда, пока открыта панель. Пусто (нет системы) — без отступов/черты. */
.particle-scene-row { display: flex; flex-direction: column; gap: 8px; }
.particle-scene-row:not(:empty) {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gray-33);
}

/* ════ 6. Заголовок группы и поясняющая заметка внутри тела вкладки ════════ */
.particle-group-title {
  color: var(--gray-66); font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase; margin: 4px 0 2px;
}
.particle-note { color: var(--gray-66); font-size: 12px; line-height: 1.5; font-style: italic; }

/* ════ 6b. РЕДАКТОР КРИВОЙ «кручение ↔ скорость полёта» (spinCurve) ═════════
   Один cubic Bézier: два anchors по краям + два усика. Порт контрола fifi;
   цвета — токены deepreview (--gray-15 фон, --gray-33 сетка, --accent кривая). */
.spincurve { margin-top: 2px; }
.spincurve svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; }
.spincurve__plot { fill: var(--gray-15); stroke: var(--gray-33); }
.spincurve__grid { stroke: var(--gray-33); }
.spincurve__base { stroke: var(--gray-33); stroke-dasharray: 4 4; }
.spincurve__line { fill: none; stroke: var(--accent); stroke-width: 2; }
.spincurve__handle-line { stroke: var(--gray-66); stroke-width: 1; }
.spincurve__dot, .spincurve__handle { cursor: grab; }
.spincurve__dot { fill: var(--white); stroke: var(--accent); stroke-width: 2; }
.spincurve__handle { fill: var(--accent); stroke: var(--gray-15); stroke-width: 1.5; }
.spincurve__dot:active, .spincurve__handle:active { cursor: grabbing; }
.spincurve__tick { fill: var(--gray-66); font-size: 10px; }
.spincurve__cap { display: flex; justify-content: space-between; font-size: 11px; color: var(--gray-66); margin-top: 2px; padding: 0 8px; }

/* ════ 6c. ЦВЕТА ПРИМИТИВНОГО СЛОТА В СИСТЕМНОЙ ПАЛИТРЕ ═══════════════════
   СТОЛБИК цветов (COLOR-PICKER этап 4): квадратик .color-swatch (тот же, что у
   Solid/Текста — по клику открывает наше окно выбора цвета `ui/colorPicker.js`,
   не системную модалку) + код цвета (hex) + «×» (убрать). Снизу — «+ Добавить
   цвет». Цвета через токены deepreview. */
.palette { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 2px; }
.palette__cell { display: flex; align-items: center; gap: 11px; }
.palette__hex {
  width: 74px; padding: 2px 3px; border: 1px solid transparent;
  border-radius: var(--r-sm); background: transparent;
  font-size: 12px; color: var(--gray-cc);
  font-variant-numeric: tabular-nums; letter-spacing: .4px;
}
.palette__hex:hover { border-color: var(--island-border); }
.palette__hex:focus { outline: none; border-color: var(--accent); background: var(--gray-15); color: var(--white); }
.palette__del {
  margin-left: auto;
  width: 18px; height: 18px; padding: 0;
  font-size: 13px; line-height: 16px; text-align: center;
  border: 1px solid var(--gray-33); border-radius: 50%;
  background: var(--gray-22); color: var(--gray-66); cursor: pointer;
}
.palette__del:hover { color: var(--white); border-color: var(--gray-66); }
.palette__add {
  width: 100%; height: 28px; margin-top: 2px; padding: 0;
  font-size: 12px; line-height: 1;
  border: 1px dashed var(--gray-33); border-radius: var(--r-md);
  background: none; color: var(--gray-66); cursor: pointer;
}
.palette__add:hover { color: var(--accent); border-color: var(--accent); }

/* ════ 6d. ЕДИНЫЕ СИСТЕМНЫЕ ПАЛИТРЫ ═══════════════════════════════════════
   Первая палитра — обычные цвета системы и fallback death-spawn. Карточка
   показывает схему всех слотов: примитивы редактируются общим color-picker,
   Lottie/raster явно остаются исходными. */
.relation-note,
.creator-note {
  color: var(--gray-66);
  font-size: 10px;
  line-height: 1.45;
}
.palette-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}
.system-palette {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--gray-44);
  border-radius: var(--r-md);
  background: var(--gray-22);
}
.system-palette::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: transparent;
}
.system-palette--primary { border-color: var(--accent); }
.system-palette--primary::before { background: var(--accent); }
.system-palette__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 8px 7px 8px 10px;
  background: color-mix(in srgb, var(--gray-33) 34%, var(--gray-22));
}
.system-palette--primary .system-palette__header { background: var(--accent-softer); }
.system-palette__identity { min-width: 0; }
.system-palette__eyebrow {
  margin-bottom: 1px;
  color: var(--accent-hover);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.2;
  text-transform: uppercase;
}
.system-palette__name {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
}
.system-palette__tools { display: flex; flex: none; gap: 3px; }
.palette-icon-btn {
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--gray-66);
  background: transparent;
  cursor: pointer;
}
.palette-icon-btn:hover {
  border-color: var(--gray-44);
  color: var(--white);
  background: var(--hover-bg-sm);
}
.palette-icon-btn--danger:hover { border-color: var(--danger); color: var(--danger); }
.palette-icon-btn svg { width: 13px; height: 13px; }
.system-palette__edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px 24px;
  min-width: 0;
  align-items: center;
  gap: 4px;
}
.system-palette__edit .ui-input { width: 100%; min-width: 0; box-sizing: border-box; }
.system-palette__slots { min-width: 0; border-top: 1px solid var(--island-border); }
.palette-slot {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  min-width: 0;
  align-items: center;
  gap: 6px;
  padding: 6px 7px 6px 10px;
  border-top: 1px solid var(--island-border);
}
.palette-slot:first-child { border-top: 0; }
.palette-slot__identity {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr);
  min-width: 0;
  align-items: center;
  gap: 5px;
}
.palette-slot__identity .slot-thumb { width: 21px; height: 21px; }
.palette-slot__identity .slot-thumb__shape { width: 11px; height: 11px; }
.palette-slot__text { min-width: 0; }
.palette-slot__name {
  min-width: 0;
  overflow: hidden;
  color: var(--gray-cc);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palette-slot__kind {
  min-width: 0;
  overflow: hidden;
  margin-top: 1px;
  color: var(--gray-66);
  font-size: 7px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palette-slot__colors {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.palette-color {
  display: flex;
  width: auto;
  min-width: 0;
  height: 26px;
  flex: 1 1 82px;
  max-width: 98px;
  align-items: center;
  gap: 3px;
  padding: 2px 2px 2px 3px;
  border: 1px solid var(--island-border);
  border-radius: var(--r-sm);
  background: var(--gray-22);
  box-sizing: border-box;
}
.palette-color:focus-within { border-color: var(--accent); }
.palette-color .color-swatch {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: var(--r-sm);
}
.palette-color__hex {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--gray-cc);
  background: transparent;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.palette-color__remove {
  display: grid;
  width: 17px;
  height: 18px;
  flex: none;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--gray-66);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.palette-color__remove:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.palette-color__remove:disabled { opacity: .3; cursor: not-allowed; }
.palette-color__remove:disabled:hover { color: var(--gray-66); background: transparent; }
.palette-color-add {
  display: grid;
  width: 24px;
  height: 26px;
  flex: none;
  padding: 0;
  place-items: center;
  border: 1px dashed var(--gray-44);
  border-radius: var(--r-sm);
  color: var(--accent-hover);
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.palette-color-add:hover { border-color: var(--accent); color: var(--accent-hover); }
.palette-slot__source {
  display: flex;
  min-width: 0;
  height: 26px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--island-border);
  border-radius: var(--r-sm);
  color: var(--gray-66);
  background: var(--gray-15);
  font-size: 8px;
}
.palette-slot__source svg { width: 10px; height: 10px; flex: none; opacity: .72; }
.system-palette__confirm {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  padding: 7px 6px 7px 10px;
  border-top: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--gray-cc);
  background: color-mix(in srgb, var(--danger) 8%, var(--gray-22));
  font-size: 9px;
}
.system-palette__confirm span { min-width: 0; flex: 1; }
.system-palette__confirm .chip { height: 24px; padding: 0 7px; font-size: 9px; }
.system-palette__confirm .chip:last-child { color: var(--danger); }
.palette-create {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed var(--gray-44);
  border-radius: var(--r-md);
  color: var(--gray-cc);
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
}
.palette-create:hover {
  border-color: var(--accent);
  color: var(--white);
  background: var(--accent-softer);
}
.palette-create__plus { color: var(--accent-hover); font-size: 16px; line-height: 1; }
.palette-list-note { color: var(--gray-66); font-size: 9px; line-height: 1.4; }

/* На базовых 360 px идентичность слота и цвета стоят в строку. При фактической
   ширине production-колонки 260 px контейнер панели становится уже 280 px —
   слот складывается в один столбец без зависимости от ширины всего окна. */
#particleBlock { container-type: inline-size; }
@container (max-width: 280px) {
  .system-palette__header { gap: 4px; padding-right: 5px; padding-left: 8px; }
  .palette-slot { grid-template-columns: minmax(0, 1fr); gap: 5px; padding-right: 5px; padding-left: 8px; }
  .palette-slot__identity { grid-template-columns: 21px minmax(0, 1fr); }
  .palette-slot__kind { font-size: 7px; }
  .palette-slot__colors { gap: 3px; }
  .palette-color { height: 25px; }
  .palette-color__hex { font-size: 8px; }
  .palette-icon-btn { width: 21px; height: 21px; }
  .palette-slot__source { justify-content: flex-start; padding: 0 7px; }
}

.mini-swatches { display: inline-flex; flex: 0 0 auto; align-items: center; }
.mini-swatch {
  width: 14px;
  height: 14px;
  margin-left: -3px;
  border: 1px solid var(--gray-15);
  border-radius: 50%;
  box-sizing: border-box;
}
.mini-swatch:first-child { margin-left: 0; }

.palette-creator {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--accent-softer);
}
.palette-creator__title { color: var(--white); font-size: 11px; font-weight: 600; }
.palette-creator .ui-input { width: 100%; box-sizing: border-box; }
.palette-creator__actions { display: flex; gap: 6px; }
.palette-creator__actions .chip { flex: 1 1 0; }

/* Соответствие родительского слота палитре дочерней системы: утверждённый
   карточный вариант. На 260 px номер, имя и тип остаются сверху, select — ниже. */
.mapping-list { display: flex; flex-direction: column; gap: 6px; }
.mapping-card {
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--island-border);
  border-radius: var(--r-md);
  background: var(--gray-22);
}
.mapping-card__identity {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  margin-bottom: 7px;
}
.slot-thumb {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--island-border);
  border-radius: var(--r-sm);
  background: var(--gray-15);
}
.slot-thumb img { width: 100%; height: 100%; object-fit: contain; }
.slot-thumb .mini-swatches { justify-content: center; transform: scale(.9); }
.slot-thumb__glyph { color: var(--gray-cc); font-size: 11px; font-weight: 600; }
.slot-thumb--missing { border-style: dashed; color: var(--gray-66); }
.slot-thumb--missing svg { width: 16px; height: 16px; }
.slot-thumb__shape { width: 14px; height: 14px; display: block; background: var(--accent); }
.slot-thumb__shape--rect { width: 15px; height: 11px; border-radius: 2px; }
.slot-thumb__shape--ellipse { border-radius: 50%; }
.slot-thumb svg.slot-thumb__shape--star { background: transparent; color: var(--accent); }
.slot-thumb__shape--worm { width: 15px; height: 7px; border-radius: 50%; clip-path: polygon(0 36%,12% 12%,25% 12%,37% 64%,50% 64%,62% 12%,75% 12%,88% 88%,100% 64%,88% 100%,75% 100%,62% 48%,50% 48%,38% 100%,25% 100%,12% 36%); }
.slot-meta { min-width: 0; }
.slot-meta__number { color: var(--white); font-size: 11px; font-weight: 600; }
.slot-meta__name,
.slot-meta__kind {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slot-meta__name { margin-top: 2px; color: var(--gray-cc); font-size: 10px; }
.slot-meta__kind { margin-top: 1px; color: var(--gray-66); font-size: 8px; }
.mapping-card .ui-select { width: 100%; }
.slot-name-editor .ui-input { width: 100%; box-sizing: border-box; }

/* ════ 6e. ФЕЙДЫ: «Появление и исчезновение» (одна дорожка, зелёный+красный) ═══
   Порт контрола fifi: левая ручка (зелёная) — длина появления от левого края,
   правая (красная) — длина исчезания от правого; на одной дорожке-«жизни» фейды
   вместе не больше окна. --fade-in / --fade-out — те же семантические цвета,
   что у фейдов на траектории в режиме оверлеев. */
.fade__fill-in  { position: absolute; top: 50%; left: 0;  height: 4px; transform: translateY(-50%); background: var(--fade-in); border-radius: 2px; }
.fade__fill-out { position: absolute; top: 50%; right: 0; height: 4px; transform: translateY(-50%); background: var(--fade-out); border-radius: 2px; }
.fade-range--in::-webkit-slider-thumb  { border-color: var(--fade-in); }
.fade-range--in::-moz-range-thumb      { border-color: var(--fade-in); }
.fade-range--out::-webkit-slider-thumb { border-color: var(--fade-out); }
.fade-range--out::-moz-range-thumb     { border-color: var(--fade-out); }

.fade-ico-row { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 6px; }
.fade-ico-group { display: flex; gap: 3px; }
.fade-ico {
  width: 36px; height: 28px;
  border: 1px solid var(--gray-33); border-radius: var(--r-sm);
  background: transparent; color: var(--gray-66);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.fade-ico svg { display: block; }
.fade-ico:hover { color: var(--white); }
.fade-ico--onG { border-color: var(--fade-in); color: var(--fade-in); background: color-mix(in srgb, var(--fade-in) 14%, transparent); }
.fade-ico--onR { border-color: var(--fade-out); color: var(--fade-out); background: color-mix(in srgb, var(--fade-out) 14%, transparent); }

/* Раздел «7. Остров слоёв частиц» убран в Шаге 3 Варианта 2 (2026-06-21):
   система частиц теперь обычный слой в #layersPanel, отдельного острова нет. */

/* ════ 8. Слоты (формы одного разлёта частиц, вкладка «Частица») ═══════════
   Равноправные строки: превью + стабильный номер/источник + вес + удаление.
   Выбор меняет форму/палитру ниже; длинные имена источников не расширяют панель. */
.group-members { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.group-member {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 50px 44px 44px;
  grid-template-areas: "thumb identity weight enabled remove";
  min-height: 60px;
  align-items: center;
  gap: 6px;
  padding: 7px 6px 7px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--gray-22);
  color: var(--gray-cc);
  font-size: 12px;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.group-member > .slot-thumb { grid-area: thumb; width: 34px; height: 34px; border-color: var(--gray-44); }
.group-member > .slot-thumb .slot-thumb__shape { width: 18px; height: 18px; }
.group-member > .slot-thumb svg.slot-thumb__shape--star { width: 20px; height: 20px; }
.slot-identity { grid-area: identity; min-width: 0; }
.slot-identity__number,
.slot-identity__source {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slot-identity__number { color: var(--gray-cc); font-size: 10px; line-height: 1.25; }
.slot-identity__source {
  margin-top: 3px;
  color: var(--gray-cc);
  font-size: 12px;
  font-weight: 520;
  line-height: 1.25;
}
.slot-identity__source--missing { color: var(--gray-66); font-style: italic; font-weight: 400; }
.slot-weight { grid-area: weight; min-width: 0; }
.slot-weight__label {
  display: block;
  margin-bottom: 2px;
  color: var(--gray-cc);
  font-size: 10px;
  line-height: 1;
  text-align: center;
}
.slot-weight__control { display: grid; grid-template-columns: minmax(0, 1fr) 15px; width: 50px; }
.group-member__weight {
  width: 100%;
  height: 26px;
  box-sizing: border-box;
  text-align: center;
  background: var(--gray-33); border: 1px solid var(--island-border); border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm); color: var(--white); font-size: 12px; padding: 2px 3px;
  font-variant-numeric: tabular-nums;
}
.group-member__weight:focus { outline: none; border-color: var(--accent); }
.group-member__weight::-webkit-inner-spin-button,
.group-member__weight::-webkit-outer-spin-button { appearance: none; margin: 0; }
.group-member__weight { appearance: textfield; -moz-appearance: textfield; }
.slot-weight__steps { display: grid; grid-template-rows: 1fr 1fr; }
.slot-weight__step {
  display: flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--island-border); background: var(--gray-33); color: var(--gray-cc); cursor: pointer;
}
.slot-weight__step--up { border-radius: 0 var(--r-sm) 0 0; }
.slot-weight__step--down { border-top: 0; border-radius: 0 0 var(--r-sm) 0; }
.slot-weight__step svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.slot-weight__step:hover { background: var(--gray-44); color: var(--white); }
.slot-weight__step:active { background: var(--gray-66); }
.slot-weight__step:focus,
.slot-weight__step:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--accent); outline-offset: 1px; }
.group-member__remove {
  grid-area: remove;
  width: 44px; height: 44px; padding: 0; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: var(--r-sm);
  color: var(--gray-cc); cursor: pointer;
}
.group-member__remove svg { width: 14px; height: 14px; }
.group-member__remove:hover { color: var(--danger); background: var(--gray-33); }
.slot-enabled {
  grid-area: enabled;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  gap: 2px;
  cursor: pointer;
  color: var(--gray-cc);
  font-size: 10px;
  line-height: 1;
}
.slot-enabled input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}
.slot-enabled__slider {
  position: relative;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: var(--gray-44);
  box-shadow: inset 0 0 0 1px var(--gray-66);
  transition: background 0.12s, box-shadow 0.12s;
}
.slot-enabled__slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gray-cc);
  transition: transform 0.12s, background 0.12s;
}
.slot-enabled input:checked + .slot-enabled__slider {
  background: var(--gray-cc);
  box-shadow: none;
}
.slot-enabled input:checked + .slot-enabled__slider::before {
  transform: translateX(12px);
  background: var(--gray-22);
}
.slot-enabled input:focus-visible + .slot-enabled__slider {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.slot-enabled:has(input:disabled) { cursor: not-allowed; opacity: 0.55; }
.slot-enabled-hint {
  margin: 6px 2px 0;
  color: var(--gray-cc);
  font-size: 10px;
  line-height: 1.35;
}
/* Строка-слот: выбирается кликом (форма/палитра ниже — выбранного слота). */
.group-member--slot { cursor: pointer; }
.group-member--slot:hover { background: var(--gray-33); }
.group-member--disabled > .slot-thumb,
.group-member--disabled > .slot-identity { opacity: 0.42; }
.group-member--on:hover,
.group-member--on {
  border-color: var(--accent);
  background: var(--accent-softer);
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--white);
}
.group-member--on .slot-identity__number { color: var(--accent-hover); }
.group-member--on .slot-identity__source { color: var(--white); }

@container (max-width: 280px) {
  .group-member {
    grid-template-columns: minmax(0, 1fr) 44px 44px 44px;
    grid-template-areas: "identity weight enabled remove";
    gap: 4px;
    padding-right: 5px;
    padding-left: 6px;
  }
  .group-member > .slot-thumb { display: none; }
  .slot-weight__control { width: 44px; }
}

/* ════ 9. «Нули» в группе «Оверлеи» (UI-ANIM-EXPORT-OVERLAYS Заход B) ════════════
   Внутри слоя «Анимация» маркеры слоёв-якорей (тип `null`) — часть группы «Оверлеи»:
   по умолчанию скрыты, видны только когда включён глаз + пункт «Нули». Класс
   `anim-overlay-nulls-on` ставит rlottieParticles на body по флагам `on && nulls`
   (_syncNullOverlayVisibility). Сами маркеры рисует общая subsystem canvasNullMarker —
   её JS не трогаем, гейтим показ снаружи через CSS. В главном редакторе и IA (нет
   is-inside-rlottie-layer) маркеры видны всегда — этот гейт их не касается. */
body.is-inside-rlottie-layer:not(.anim-overlay-nulls-on) .null-marker-overlay,
body.is-inside-rlottie-layer.anim-context-playing .null-marker-overlay {
  display: none;
}

/* ════ 8. КАЛИБРОВКА ШАГА СТРЕЛОК ↑↓ (чип + остров-менюшка) ════════════════════
   Чип в колонке частиц открывает плавающий остров левее настроек: список всех
   параметров частиц с полем-множителем на родной шаг поля, конфиг с промтом и
   кнопкой копирования (см. arrowCalibPanel.js). Песочница подбора — пишет в
   localStorage, в проект не уходит. */
.arrow-calib-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--gray-22); border: 1px solid var(--gray-33); color: var(--gray-cc);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; font-family: inherit;
  /* Отступ от ряда «Качество ↔ размер» выше: раньше кнопку отодвигал заголовок
     «Калибровка», теперь его нет — держим тот же ритм 14px, что между секциями. */
  margin-top: 14px;
}
.arrow-calib-chip:hover { border-color: var(--accent); color: #fff; }

.acal {
  position: fixed; z-index: 60; width: 320px;
  display: flex; flex-direction: column; max-height: calc(100vh - 28px);
  background: var(--panel-deep); border: 1px solid var(--gray-33);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
}
.acal__head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--gray-33);
}
.acal__head b { font-size: 12.5px; }
.acal__tag {
  font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--gray-33); border-radius: 5px; padding: 2px 5px; white-space: nowrap;
}
.acal__x {
  margin-left: auto; cursor: pointer; color: var(--gray-cc); font-size: 15px;
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px;
  background: none; border: none; font-family: inherit;
}
.acal__x:hover { background: var(--gray-22); color: #fff; }
.acal__hint {
  padding: 7px 14px; font-size: 10.5px; color: var(--gray-cc); line-height: 1.4;
  border-bottom: 1px solid var(--gray-33); font-style: italic;
}
.acal__body { overflow-y: auto; padding: 4px 0; flex: 1 1 auto; }
.acal__grp {
  padding: 8px 14px 2px; font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--gray-66);
}
.acal-row { display: flex; align-items: center; gap: 8px; padding: 2px 14px; height: 24px; }
.acal-row__name {
  flex: 1 1 auto; font-size: 12px; color: var(--gray-cc);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acal-row__base { font-size: 9.5px; color: var(--gray-66); flex: 0 0 auto; }
.acal-row__mult {
  width: 3em; height: 21px; text-align: center; font-size: 11.5px;
  background: var(--gray-15); border: 1px solid var(--gray-33); color: var(--gray-cc);
  border-radius: 6px; font-family: inherit;
}
.acal-row__mult:hover { border-color: var(--gray-66); }
.acal-row.is-changed .acal-row__mult { border-color: var(--accent); color: #fff; }
.acal__cfg { border-top: 1px solid var(--gray-33); padding: 10px 14px 12px; }
.acal__cfg-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px;
}
.acal__cfg-row span { font-size: 10px; color: var(--gray-cc); }
.acal__btns { display: flex; gap: 6px; }
.acal__btns .btn { font-size: 11px; }
.acal__cfg-text {
  width: 100%; box-sizing: border-box; height: 96px; resize: vertical;
  background: var(--gray-15); border: 1px solid var(--gray-33); border-radius: 8px;
  color: var(--gray-cc); font-family: ui-monospace, Menlo, monospace; font-size: 10px;
  line-height: 1.5; padding: 8px;
}