/* ==========================================================================
   Cup Lab — application styles (Kashtan Design System)
   Все цвета, шрифты, отступы — из дизайн-системы.
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--k-bg);
  color: var(--k-gray-20);
  font-family: var(--k-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { min-height: 100vh; }

input, button { font-family: inherit; }

::selection { background: var(--k-green-light); color: var(--k-green-dark); }

/* — Утилитки — */
.k-caption {
  font-size: 11px;
  font-weight: var(--k-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
  color: var(--k-gray-60);
}
.muted { color: var(--k-gray-60); }
.mono  { font-family: var(--k-font-mono); }

/* ==========================================================================
   APP SHELL
   ========================================================================== */

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-main {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 32px;
  flex: 1;
}

/* ===== HEADER ===== */
.app-header {
  background: var(--k-white);
  border-bottom: 1px solid var(--k-gray-ed);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-header__guide {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--k-green);
  border-radius: var(--k-radius);
  color: var(--k-green);
  font-size: 13px;
  font-weight: var(--k-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
  cursor: pointer;
  transition: background var(--k-dur-micro) var(--k-ease), color var(--k-dur-micro) var(--k-ease), border-color var(--k-dur-micro) var(--k-ease);
}
.app-header__guide:hover { background: var(--k-green-light); color: var(--k-green-dark); border-color: var(--k-green-dark); }

/* Группа кнопок справа в шапке */
.app-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* «Сбросить настройки» — та же структура, что у навигационных кнопок,
   но с нейтрально-предупреждающей семантикой (наполнение при наведении/взводе) */
.app-header__reset-wrap { position: relative; }
.app-header__reset { color: var(--k-gray-60); border-color: var(--k-gray-da); }
.app-header__reset:hover,
.app-header__reset.is-armed {
  background: #FDECEC;
  color: var(--k-red);
  border-color: var(--k-red);
}

.reset-confirm {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  width: 320px;
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 18px;
  box-sizing: border-box;
  text-align: left;
  animation: reset-pop var(--k-dur-micro) var(--k-ease);
}
@keyframes reset-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.reset-confirm::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 24px;
  width: 9px;
  height: 9px;
  background: var(--k-white);
  border-left: 1px solid var(--k-gray-ed);
  border-top: 1px solid var(--k-gray-ed);
  transform: rotate(45deg);
}
.reset-confirm__msg {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: var(--k-fw-medium);
  color: var(--k-gray-20);
  line-height: var(--k-lh-subhead);
}
.reset-confirm__note {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--k-gray-60);
  line-height: var(--k-lh-body);
}
.reset-confirm__btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  background: var(--k-green);
  color: var(--k-white);
  border-radius: var(--k-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: repeating-linear-gradient(
    45deg, var(--k-green-dark), var(--k-green-dark) 1px,
    transparent 1px, transparent 6px
  );
  position: relative;
}
.brand-mark svg { position: relative; z-index: 1; }

.brand-name {
  font-size: 15px;
  font-weight: var(--k-fw-bold);
  color: var(--k-gray-20);
  letter-spacing: -0.005em;
}
.brand-sub {
  font-size: 12px;
  color: var(--k-gray-60);
  margin-top: 1px;
}

/* ===== STEPPER ===== */
.stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stepper__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 8px 14px 8px 8px;
  cursor: pointer;
  color: var(--k-gray-60);
  transition: all var(--k-dur) var(--k-ease);
  font-family: inherit;
}
.stepper__item:hover:not(:disabled) {
  border-color: var(--k-green);
  background: var(--k-green-light);
  color: var(--k-green-dark);
}
.stepper__item:disabled { opacity: 0.5; cursor: not-allowed; }

.stepper__item.is-active {
  background: var(--k-green);
  border-color: var(--k-green);
  color: var(--k-white);
}
.stepper__item.is-done {
  border-color: var(--k-green);
  color: var(--k-green);
}
.stepper__item.is-done .stepper__num {
  background: var(--k-green);
  color: var(--k-white);
}

.stepper__num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--k-gray-ed);
  color: var(--k-gray-60);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--k-fw-bold);
  font-family: var(--k-font-mono);
  flex-shrink: 0;
}
.stepper__item.is-active .stepper__num {
  background: var(--k-white);
  color: var(--k-green);
}

.stepper__label {
  font-size: 13px;
  font-weight: var(--k-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
}

.stepper__sep {
  width: 24px;
  height: 1px;
  background: var(--k-gray-da);
}

@media (max-width: 600px) {
  .stepper__label { display: none; }
  .stepper__item { padding: 6px; }
  .stepper__sep { width: 12px; }
}

/* ==========================================================================
   ERROR BANNER
   ========================================================================== */
.error-banner {
  max-width: 1400px;
  margin: 16px auto 0;
  width: calc(100% - 64px);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #FDE5E5;
  border: 1px solid #F0B4B4;
  border-left: 4px solid var(--k-red);
  border-radius: var(--k-radius);
  color: #6B1F1F;
  animation: errSlide 0.35s var(--k-ease);
}
@keyframes errSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.error-banner__icon { color: var(--k-red); flex-shrink: 0; padding-top: 1px; }
.error-banner__body { flex: 1; min-width: 0; }
.error-banner__title {
  font-size: 13px;
  font-weight: var(--k-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
  color: var(--k-red);
  margin-bottom: 2px;
}
.error-banner__text { font-size: 14px; color: #6B1F1F; }

.error-banner__close {
  background: transparent;
  border: none;
  color: var(--k-red);
  cursor: pointer;
  padding: 4px;
  opacity: 0.7;
  transition: opacity var(--k-dur-micro);
}
.error-banner__close:hover { opacity: 1; }

@media (max-width: 700px) {
  .error-banner { width: calc(100% - 32px); padding: 12px; }
}

/* — Предупреждение (не блокирует расчёт): жёлтый/амбер вместо красного — */
.warn-banner {
  max-width: 1400px;
  margin: 16px auto 0;
  width: calc(100% - 64px);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #FEF6E0;
  border: 1px solid #F2D98A;
  border-left: 4px solid var(--k-yellow);
  border-radius: var(--k-radius);
  color: #6B5413;
  animation: errSlide 0.35s var(--k-ease);
}
.warn-banner__icon { color: #C9961A; flex-shrink: 0; padding-top: 1px; }
.warn-banner__body { flex: 1; min-width: 0; }
.warn-banner__title {
  font-size: 13px;
  font-weight: var(--k-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
  color: #B5830F;
  margin-bottom: 4px;
}
.warn-banner__text { font-size: 14px; color: #6B5413; margin-top: 2px; }
.warn-banner__text + .warn-banner__text { padding-top: 6px; border-top: 1px solid #F2D98A; }
.warn-banner__close {
  background: transparent;
  border: none;
  color: #B5830F;
  cursor: pointer;
  padding: 4px;
  opacity: 0.7;
  transition: opacity var(--k-dur-micro);
}
.warn-banner__close:hover { opacity: 1; }
@media (max-width: 700px) {
  .warn-banner { width: calc(100% - 32px); padding: 12px; }
}

/* ==========================================================================
   STEP CARD
   ========================================================================== */
.step {
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 32px;
}

.step__header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--k-gray-ed);
}

.step__num {
  font-family: var(--k-font-mono);
  font-size: 20px;
  font-weight: var(--k-fw-bold);
  color: var(--k-green);
  background: var(--k-green-light);
  padding: 8px 14px;
  border-radius: var(--k-radius);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.step__title {
  font-size: 24px;
  font-weight: var(--k-fw-bold);
  color: var(--k-gray-20);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.step__sub {
  font-size: 14px;
  color: var(--k-gray-60);
  margin-top: 4px;
}

.step__head-actions { margin-left: auto; }

.step__nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--k-gray-ed);
}

@media (max-width: 600px) {
  .step { padding: 20px; }
  .step__title { font-size: 20px; }
  .step__num { font-size: 16px; padding: 6px 10px; }
  .app-main { padding: 16px; }
  .app-header { padding: 12px 16px; }
}

/* ==========================================================================
   FORM CONTROLS
   ========================================================================== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.form-grid--narrow {
  grid-template-columns: minmax(0, 280px);
}

@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 480px) {
  .form-grid { grid-template-columns: 1fr; }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-size: 11px;
  font-weight: var(--k-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
  color: var(--k-gray-60);
}

.field__row {
  position: relative;
  display: flex;
  align-items: stretch;
}

.field__input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 44px 0 16px;
  border: 1px solid var(--k-gray-da);
  border-radius: var(--k-radius);
  background: var(--k-white);
  color: var(--k-gray-20);
  font-family: var(--k-font-mono);
  font-size: 14px;
  font-weight: var(--k-fw-medium);
  transition: border-color var(--k-dur-micro) var(--k-ease);
}
.field__input:not(.has-suffix) { padding-right: 16px; }
.field__input:focus {
  outline: none;
  border-color: var(--k-green);
}
.field__input::placeholder { color: var(--k-gray-da); font-weight: 400; }

.field__suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--k-font-mono);
  font-size: 12px;
  color: var(--k-gray-60);
  pointer-events: none;
  background: var(--k-white);
  padding: 0 4px;
}

.field__input[type="text"] { font-family: var(--k-font); }

.field__input:not(:placeholder-shown) + .field__suffix,
.field__input[value] + .field__suffix {
  /* always visible */
}

.field__hint {
  font-size: 12px;
  color: var(--k-gray-60);
  margin-top: 4px;
  line-height: 1.4;
}

.field__error {
  font-size: 12px;
  color: var(--k-red);
  margin-top: 4px;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.field__error::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: 50%;
  background: var(--k-red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  margin-top: 1px;
}

/* Поле с ошибкой — красная рамка */
.field__row--spin.has-error {
  border-color: var(--k-red);
}
.field__row--spin.has-error:focus-within {
  border-color: var(--k-red);
}
.field__input.has-error {
  border-color: var(--k-red);
}
.field__input.has-error:focus {
  border-color: var(--k-red);
}

/* — Toggle / checkbox — */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--k-gray-20);
  user-select: none;
}
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle__box {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--k-gray-da);
  border-radius: 3px;
  background: var(--k-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all var(--k-dur-micro) var(--k-ease);
  flex-shrink: 0;
}
.toggle:hover .toggle__box { border-color: var(--k-green); }
.toggle input:checked + .toggle__box {
  background: var(--k-green);
  border-color: var(--k-green);
  color: var(--k-white);
}
.toggle input:focus-visible + .toggle__box {
  outline: 2px solid var(--k-green-light);
  outline-offset: 1px;
}

.toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 16px;
  margin-bottom: 24px;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--k-fw-medium);
  letter-spacing: var(--k-ls-section);
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--k-radius);
  cursor: pointer;
  transition: all var(--k-dur) var(--k-ease);
  white-space: nowrap;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn--primary {
  background: var(--k-green);
  border-color: var(--k-green);
  color: var(--k-white);
}
.btn--primary:hover:not(:disabled) { background: var(--k-green-dark); border-color: var(--k-green-dark); }

.btn--secondary {
  background: transparent;
  border-color: var(--k-green);
  color: var(--k-green);
}
.btn--secondary:hover:not(:disabled) { background: var(--k-green-light); color: var(--k-green-dark); border-color: var(--k-green-dark); }

.btn--ghost {
  background: transparent;
  border-color: var(--k-gray-ed);
  color: var(--k-gray-60);
}
.btn--ghost:hover:not(:disabled) { background: var(--k-green-light); border-color: var(--k-green); color: var(--k-green-dark); }

.btn--danger {
  background: var(--k-red);
  border-color: var(--k-red);
  color: #fff;
}
.btn--danger:hover:not(:disabled) { background: #c0392b; border-color: #c0392b; }

.btn--sm { padding: 5px 10px; font-size: 11px; }
.btn--lg { padding: 11px 22px; font-size: 13px; }

/* Кнопка-навигация «назад» — в визуальной стилистике степпера (номер-кружок + лейбл) */
.btn--nav {
  background: transparent;
  border-color: var(--k-gray-ed);
  color: var(--k-gray-60);
  padding: 6px 16px 6px 6px;
  gap: 8px;
  font-size: 12px;
}
.btn--nav:hover:not(:disabled) {
  background: var(--k-green-light);
  border-color: var(--k-green);
  color: var(--k-green-dark);
}
.btn--nav__ic {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--k-gray-ed);
  color: var(--k-gray-60);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease);
}
.btn--nav:hover:not(:disabled) .btn--nav__ic {
  background: var(--k-green);
  color: var(--k-white);
}

/* ==========================================================================
   PRESETS
   ========================================================================== */
.presets {
  background: var(--k-gray-f6);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 16px;
  margin-bottom: 24px;
}

.presets__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.presets__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.new-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.presets__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 8px 8px 8px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--k-gray-20);
  cursor: pointer;
  transition: all var(--k-dur-micro) var(--k-ease);
}
.preset-chip:hover { border-color: var(--k-green); }
.preset-chip.is-selected {
  border-color: var(--k-green);
  background: var(--k-green-light);
  color: var(--k-green-dark);
}

.preset-chip__name { font-weight: var(--k-fw-medium); }
.preset-chip__dim {
  font-family: var(--k-font-mono);
  font-size: 11px;
  color: var(--k-gray-60);
}
.preset-chip.is-selected .preset-chip__dim { color: var(--k-green-dark); }

.preset-chip__del {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--k-gray-60);
  background: transparent;
  transition: all var(--k-dur-micro);
  cursor: pointer;
}
.preset-chip__del:hover {
  background: var(--k-red);
  color: var(--k-white);
}

.empty-note {
  font-size: 13px;
  color: var(--k-gray-60);
  padding: 8px 0;
}

/* ==========================================================================
   CTYPE-SEL — селектор типа тары (Стакан / Банка), шаг 1
   ========================================================================== */
.ctype-sel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--k-gray-f6);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  margin-bottom: 20px;
}
.ctype-sel__label {
  font-family: var(--k-font);
  font-size: 13px;
  font-weight: var(--k-fw-medium);
  color: var(--k-gray-60);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-caption);
  white-space: nowrap;
}
.ctype-sel__btns {
  display: flex;
  gap: 4px;
}
.ctype-sel__btn {
  padding: 6px 16px;
  font-family: var(--k-font);
  font-size: 13px;
  font-weight: var(--k-fw-medium);
  border: 1.5px solid var(--k-gray-da);
  border-radius: var(--k-radius);
  background: var(--k-white);
  color: var(--k-gray-60);
  cursor: pointer;
  transition: border-color var(--k-dur-micro) var(--k-ease),
              background var(--k-dur-micro) var(--k-ease),
              color var(--k-dur-micro) var(--k-ease);
}
.ctype-sel__btn:hover {
  border-color: var(--k-green);
  color: var(--k-green);
}
.ctype-sel__btn.is-active {
  border-color: var(--k-green);
  background: var(--k-green);
  color: var(--k-white);
}

/* ==========================================================================
   PRESET CARDS — визуальные карточки пресетов стаканов (шаг 1)
   ========================================================================== */

.presets__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 10px;
}

/* Заголовок группы пресетов */
.presets__group-label {
  grid-column: 1 / -1;
  font-family: var(--k-font);
  font-size: 10px;
  font-weight: var(--k-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-caption);
  color: var(--k-gray-60);
  padding: 4px 0 2px;
  border-bottom: 1px solid var(--k-gray-ed);
  margin-bottom: 2px;
}

/* Базовая карточка */
.preset-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  padding: 0;
  transition: border-color var(--k-dur-micro) var(--k-ease),
              background var(--k-dur-micro) var(--k-ease);
}

.preset-card:hover { border-color: var(--k-green); }

.preset-card.is-selected {
  border-color: var(--k-green);
  background: var(--k-green-light);
}

/* Зона изображения — квадрат 1:1 */
.preset-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--k-gray-f6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--k-gray-ed);
  transition: border-bottom-color var(--k-dur-micro) var(--k-ease);
}

.preset-card:hover .preset-card__img,
.preset-card.is-selected .preset-card__img {
  border-bottom-color: var(--k-green);
}

.preset-card__img img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  display: block;
  /* Убираем белый фон у фото — показываем на цвете карточки */
  mix-blend-mode: multiply;
}

/* Заглушка — нет фото */
.preset-card__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  color: var(--k-gray-da);
  padding: 16px;
}

.preset-card__ph-label {
  font-size: 9px;
  font-weight: var(--k-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
  color: var(--k-gray-da);
  text-align: center;
  line-height: 1.4;
}

/* Тело карточки */
.preset-card__body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

/* Название */
.preset-card__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 13px;
  font-weight: var(--k-fw-bold);
  color: var(--k-gray-20);
  line-height: 1.2;
  margin-bottom: 4px;
}

.preset-card.is-selected .preset-card__name { color: var(--k-green-dark); }

.preset-card__check-icon {
  color: var(--k-green);
  flex-shrink: 0;
  display: inline-flex;
}

/* Список характеристик */
.preset-card__specs {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.preset-card__spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

.preset-card__spec-lbl {
  font-size: 10px;
  color: var(--k-gray-60);
  white-space: nowrap;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preset-card__spec-val {
  font-family: var(--k-font-mono);
  font-size: 10px;
  font-weight: var(--k-fw-medium);
  color: var(--k-gray-20);
  white-space: nowrap;
  flex-shrink: 0;
}

.preset-card.is-selected .preset-card__spec-val { color: var(--k-green-dark); }

/* Разделитель перед «Запечатка» */
.preset-card__divider {
  height: 1px;
  background: var(--k-gray-ed);
  margin: 3px 0;
}

.preset-card.is-selected .preset-card__divider {
  background: rgba(0, 137, 95, 0.25);
}

/* Анимация удаления карточки */
.preset-card.is-deleting {
  opacity: 0;
  transform: scale(0.93);
  pointer-events: none;
  transition: opacity 220ms var(--k-ease), transform 220ms var(--k-ease);
}

/* Inline confirm overlay */
.preset-card__confirm {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.97);
  border-radius: calc(var(--k-radius) - 1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 12px;
  animation: confirm-in 120ms var(--k-ease) both;
}
@keyframes confirm-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.preset-card__confirm-msg {
  font-family: var(--k-font);
  font-size: 12px;
  font-weight: var(--k-fw-medium);
  color: var(--k-gray-20);
  text-align: center;
  line-height: 1.45;
  margin: 0;
}
.preset-card__confirm-btns {
  display: flex;
  gap: 6px;
  width: 100%;
  justify-content: center;
}
.preset-card__confirm-btns .btn { flex: 1; justify-content: center; }

/* Кнопка удаления (только пользовательские) */
.preset-card__del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--k-gray-ed);
  color: var(--k-gray-60);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--k-dur-micro) var(--k-ease);
  z-index: 2;
  padding: 0;
}

.preset-card__del:hover {
  background: var(--k-red);
  border-color: var(--k-red);
  color: var(--k-white);
}

@media (max-width: 700px) {
  .presets__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
}
@media (max-width: 360px) {
  .presets__grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   LOGO INDIVIDUAL CARDS
   ========================================================================== */
.logo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.logo-card {
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-left: 3px solid var(--accent, var(--k-green));
  border-radius: var(--k-radius);
  padding: 14px;
  transition: border-color var(--k-dur);
  min-width: 0;
}
.logo-card:hover { border-color: var(--k-gray-da); border-left-color: var(--accent); }

.logo-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.logo-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent, var(--k-green));
  color: var(--k-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--k-fw-bold);
  font-family: var(--k-font-mono);
}

.logo-card__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  min-width: 0;
}
.logo-card__grid .field { min-width: 0; }
.logo-card__grid .field__input {
  width: 100%;
  min-width: 0;
  padding-right: 44px; /* место под "мм" суффикс */
}

/* ==========================================================================
   EXTRA SECTION
   ========================================================================== */
.extra-section {
  margin-top: 16px;
  padding: 20px;
  background: var(--k-gray-f6);
  border-radius: var(--k-radius);
  border: 1px dashed var(--k-gray-da);
}

.extra-card {
  margin-top: 16px;
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-left: 3px solid var(--accent, var(--k-orange));
  border-radius: var(--k-radius);
  padding: 16px;
}
.extra-card .form-grid { margin-bottom: 12px; }
.extra-card .toggles { margin-bottom: 12px; }
.extra-card .form-grid:last-child { margin-bottom: 0; }

/* ==========================================================================
   KPI GRID (Step 3)
   ========================================================================== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 800px) { .kpi-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .kpi-grid { grid-template-columns: 1fr; } }

.kpi {
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpi--green {
  background: var(--k-green-light);
  border-color: var(--k-green);
}
.kpi--green .kpi__value { color: var(--k-green); }

.kpi__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
  color: var(--k-gray-60);
  font-weight: var(--k-fw-medium);
}

.kpi__value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kpi__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* тултип внутри kpi — чуть компактнее триггер */
.kpi .help-tip__trigger {
  width: 15px;
  height: 15px;
  font-size: 9px;
}

.kpi__value {
  font-family: var(--k-font-mono);
  font-size: 20px;
  font-weight: var(--k-fw-bold);
  color: var(--k-gray-20);
  letter-spacing: -0.01em;
}

.kpi__sub {
  font-family: var(--k-font-mono);
  font-size: 11px;
  color: var(--k-gray-60);
}

.kpi__desc {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--k-gray-ed);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--k-gray-60);
  text-wrap: pretty;
}
.kpi--green .kpi__desc { border-top-color: rgba(0,137,95,0.25); }

.kpi-intro {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--k-green-light);
  border: 1px solid var(--k-green);
  border-radius: var(--k-radius);
  font-size: 13px;
  line-height: 1.5;
  color: var(--k-gray-20);
  text-wrap: pretty;
}
.kpi-intro svg { flex: none; color: var(--k-green); margin-top: 1px; }
.kpi-intro strong { font-family: var(--k-font-mono); color: var(--k-green); font-weight: var(--k-fw-bold); }

/* ==========================================================================
   VIZ CARDS / CANVAS
   ========================================================================== */
.viz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 880px) {
  .viz-grid { grid-template-columns: 1fr; }
}

.viz-card {
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 12px;
}

.viz-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.viz-card__dims {
  font-family: var(--k-font-mono);
  font-size: 11px;
  color: var(--k-gray-60);
}

.viz-canvas {
  display: block;
  width: 100%;
  background: var(--k-white);
  border-radius: 2px;
  cursor: crosshair;
}
.viz-canvas--cup    { height: 420px; }
.viz-canvas--unwrap { height: 420px; }

@media (max-width: 600px) {
  .viz-canvas--cup    { height: 300px; }
  .viz-canvas--unwrap { height: 300px; }
}

/* ==========================================================================
   EXPORT ROW
   ========================================================================== */
.export-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  padding: 12px;
  background: var(--k-gray-f6);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
}

/* ==========================================================================
   TABS
   ========================================================================== */
.tabs {
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  overflow: hidden;
}

.tabs__head {
  display: flex;
  border-bottom: 1px solid var(--k-gray-ed);
  background: var(--k-gray-f6);
  overflow-x: auto;
}

.tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 14px 20px;
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--k-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
  color: var(--k-gray-60);
  cursor: pointer;
  transition: all var(--k-dur-micro) var(--k-ease);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tab:hover { color: var(--k-green); }
.tab.is-active {
  color: var(--k-green);
  border-bottom-color: var(--k-green);
  background: var(--k-white);
}

.tab__count {
  background: var(--k-gray-ed);
  color: var(--k-gray-60);
  padding: 2px 7px;
  border-radius: 10px;
  font-family: var(--k-font-mono);
  font-size: 10px;
  font-weight: var(--k-fw-bold);
}
.tab.is-active .tab__count {
  background: var(--k-green);
  color: var(--k-white);
}

.tabs__body {
  padding: 20px;
}

/* ==========================================================================
   HELP TOOLTIP
   ========================================================================== */
.help-tip {
  display: inline-flex;
  position: relative;
  margin-left: 6px;
  vertical-align: middle;
}

.help-tip__trigger {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--k-gray-da);
  background: var(--k-white);
  color: var(--k-gray-60);
  font-family: var(--k-font);
  font-size: 10px;
  font-weight: var(--k-fw-bold);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  padding: 0;
  transition: all var(--k-dur-micro) var(--k-ease);
  flex-shrink: 0;
}
.help-tip:hover .help-tip__trigger,
.help-tip.is-open .help-tip__trigger {
  background: var(--k-green);
  border-color: var(--k-green);
  color: var(--k-white);
}

.help-tip__bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 320px;
  background: var(--k-gray-20);
  color: var(--k-white);
  padding: 10px 12px;
  border-radius: var(--k-radius);
  font-family: var(--k-font);
  font-size: 12px;
  font-weight: var(--k-fw-regular);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--k-dur) var(--k-ease);
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.help-tip__bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--k-gray-20);
}
.help-tip:hover .help-tip__bubble,
.help-tip.is-open .help-tip__bubble {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* Фиксированный тултип — не обрезается overflow родителя */
.help-tip__bubble--fixed {
  position: fixed;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  transform: translateY(-100%);
  width: 320px;
  max-width: calc(100vw - 16px);
  height: auto;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 9999;
}
.help-tip__bubble--fixed::after {
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
}

/* — мобильный fallback: тултип выравнивается так чтобы не вылазить за экран — */
@media (max-width: 600px) {
  .help-tip__bubble {
    max-width: 260px;
    font-size: 11px;
  }
}

/* — В заголовках таблицы тултип-триггер должен сохранять верхний регистр заголовка — */
.data-table th .help-tip__trigger {
  text-transform: none;
}

/* — В t-label выровнять label + tip по центру — */
.t-label {
  color: var(--k-gray-60);
  width: 60%;
}
.t-label__text { display: inline; }

/* ==========================================================================
   DATA TABLE
   ========================================================================== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  text-align: left;
  font-size: 10px;
  font-weight: var(--k-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
  color: var(--k-gray-60);
  padding: 10px 12px;
  border-bottom: 1px solid var(--k-gray-ed);
}

.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--k-gray-ed);
}
.data-table tr:last-child td { border-bottom: none; }

.t-label {
  width: 60%;
}
.t-label > .t-label__text { color: var(--k-gray-60); }

.t-value {
  font-family: var(--k-font-mono);
  font-weight: var(--k-fw-medium);
  color: var(--k-gray-20);
}
.t-value:not(.mono) { font-family: var(--k-font); }
/* Внутренний флекс-контейнер — НЕ на самом <td>, иначе соседние flex-ячейки
   браузер объединяет в одну анонимную колонку (баг с «Угловым зазором»). */
.t-value__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.data-table tr { transition: background var(--k-dur-micro); }
.data-table tbody tr:hover { background: var(--k-gray-f6); }
.data-table tbody tr:hover .copy-btn { opacity: 1; }

/* ==========================================================================
   COPY BUTTON
   ========================================================================== */
.copy-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: var(--k-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--k-gray-60);
  opacity: 0.3;
  transition: all var(--k-dur-micro) var(--k-ease);
  flex-shrink: 0;
}
.copy-btn:hover {
  background: var(--k-green-light);
  color: var(--k-green-dark);
  opacity: 1;
}
.copy-btn.is-done {
  background: var(--k-green);
  color: var(--k-white);
  opacity: 1;
}

/* ==========================================================================
   LOGO TABLES (Step 3)
   ========================================================================== */
.logo-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.logo-table-block {
  border: 1px solid var(--k-gray-ed);
  border-left: 3px solid var(--accent, var(--k-green));
  border-radius: var(--k-radius);
  overflow: hidden;
}

.logo-table-block__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--k-gray-f6);
  border-bottom: 1px solid var(--k-gray-ed);
}

.logo-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent, var(--k-green));
  color: var(--k-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--k-fw-bold);
  font-family: var(--k-font-mono);
}

.logo-table-block .data-table th,
.logo-table-block .data-table td { padding: 8px 16px; }
.logo-table-block .data-table { font-size: 12px; }

/* ==========================================================================
   DATA GROUP — смысловые группы значений с описанием и аудиторией
   ========================================================================== */
.data-group {
  border-bottom: 1px solid var(--k-gray-ed);
}
.data-group:last-child { border-bottom: none; }

.data-group__head {
  padding: 14px 16px 10px;
  background: var(--k-gray-f6);
  border-bottom: 1px solid var(--k-gray-ed);
}
.data-group__titlerow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.data-group__title {
  font-size: 13px;
  font-weight: var(--k-fw-bold);
  color: var(--k-green);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
}
.data-group__audience {
  font-size: 10px;
  font-weight: var(--k-fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--k-gray-60);
  background: var(--k-white);
  border: 1px solid var(--k-gray-da);
  border-radius: var(--k-radius-pill);
  padding: 2px 9px;
}
.data-group__desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--k-gray-60);
  margin: 0;
  text-wrap: pretty;
}

/* — Подсветка ключевой строки («Окружность на центре») — */
.data-table tr.row-highlight {
  background: var(--k-green-light);
}
.data-table tr.row-highlight:hover {
  background: var(--k-green-light);
}
.data-table tr.row-highlight .t-label__text,
.data-table tr.row-highlight .t-label {
  color: var(--k-green-dark);
  font-weight: var(--k-fw-bold);
}
.data-table tr.row-highlight .t-value {
  color: var(--k-green-dark);
  font-weight: var(--k-fw-bold);
}
.data-table tr.row-highlight td:first-child {
  box-shadow: inset 3px 0 0 var(--k-green);
}

/* ==========================================================================
   GAPS — пояснения и таблица зазоров
   ========================================================================== */
.gaps-wrap { display: flex; flex-direction: column; gap: 16px; }

.gaps-intro,
.gaps-symmetry {
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 16px 18px;
  background: var(--k-gray-f6);
}
.gaps-symmetry {
  border-left: 3px solid var(--k-green);
  background: var(--k-green-light);
}
.gaps-intro__head,
.gaps-symmetry__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--k-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
  color: var(--k-green);
  margin-bottom: 10px;
}
.gaps-intro__text,
.gaps-symmetry__text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--k-gray-20);
  margin: 0;
  text-wrap: pretty;
}
.gaps-symmetry__text { color: var(--k-green-dark); }
.gaps-symmetry__text strong { color: var(--k-green-dark); }

/* Смешанная раскладка — информационный (не зелёный) тон */
.gaps-symmetry--mixed {
  border-left-color: var(--k-blue);
  background: color-mix(in srgb, var(--k-blue) 7%, var(--k-white));
}
.gaps-symmetry--mixed .gaps-symmetry__head { color: var(--k-blue); }
.gaps-symmetry--mixed .gaps-symmetry__text { color: var(--k-gray-20); }
.gaps-symmetry--mixed .gaps-symmetry__text strong { color: var(--k-gray-20); }
.gaps-symmetry__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gaps-symmetry__list li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--k-gray-20);
  text-wrap: pretty;
}
.gaps-symmetry__list strong { color: var(--k-gray-20); font-family: var(--k-font-mono); }
.gaps-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--k-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: var(--k-radius-pill);
  margin-right: 6px;
  vertical-align: 1px;
}
.gaps-tag--auto { background: var(--k-green); color: var(--k-white); }
.gaps-tag--manual { background: var(--k-blue); color: var(--k-white); }
.gaps-symmetry__note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--k-blue) 35%, var(--k-white));
  color: var(--k-gray-60) !important;
  font-size: 12px;
}
.gaps-symmetry__note strong { color: var(--k-gray-20) !important; }

.gaps-defs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.gaps-def {
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 12px 14px;
}
.gaps-def__term {
  display: block;
  font-size: 12px;
  font-weight: var(--k-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.gaps-def__body {
  display: block;
  font-size: 12px;
  line-height: 1.55;
  color: var(--k-gray-60);
  text-wrap: pretty;
}

/* ==========================================================================
   MODAL
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(32, 32, 32, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
  animation: overlayIn 0.25s var(--k-ease);
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--k-white);
  border-radius: var(--k-radius);
  width: 100%;
  max-width: 460px;
  /* На невысоких экранах не выходим за пределы overlay (учитывает его padding 16px):
     шапка и подвал закреплены, прокручивается только тело (.modal__body). */
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* скругление углов сохраняется при прокрутке тела */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  animation: modalIn 0.3s var(--k-ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--k-gray-ed);
  flex-shrink: 0; /* шапка закреплена, не сжимается при прокрутке тела */
}

.modal__title {
  font-size: 18px;
  font-weight: var(--k-fw-bold);
  color: var(--k-gray-20);
}

.modal__close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--k-gray-60);
  padding: 4px;
  border-radius: var(--k-radius);
  transition: all var(--k-dur-micro);
}
.modal__close:hover { background: var(--k-gray-f6); color: var(--k-gray-20); }

.modal__body {
  padding: 20px 24px;
  flex: 1 1 auto;
  min-height: 0;       /* без этого flex-элемент не даёт телу прокручиваться */
  overflow-y: auto;    /* прокрутка содержимого при нехватке высоты экрана */
  overscroll-behavior: contain;
}

.modal__desc {
  font-size: 14px;
  color: var(--k-gray-60);
  margin-bottom: 16px;
  line-height: 1.5;
}
.modal__desc strong { color: var(--k-gray-20); font-family: var(--k-font-mono); }

/* Переключатель группы (Стаканы / Банки) в модалках */
.group-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
}
.group-toggle__label {
  font-family: var(--k-font);
  font-size: 12px;
  font-weight: var(--k-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-caption);
  color: var(--k-gray-60);
  white-space: nowrap;
}
.group-toggle__btns {
  display: flex;
  gap: 0;
  border: 1px solid var(--k-gray-da);
  border-radius: var(--k-radius);
  overflow: hidden;
}
.group-toggle__btn {
  flex: 1;
  padding: 6px 16px;
  font-family: var(--k-font);
  font-size: 13px;
  font-weight: var(--k-fw-medium);
  background: var(--k-white);
  color: var(--k-gray-60);
  border: none;
  cursor: pointer;
  transition: background var(--k-dur-micro) var(--k-ease),
              color var(--k-dur-micro) var(--k-ease);
}
.group-toggle__btn + .group-toggle__btn {
  border-left: 1px solid var(--k-gray-da);
}
.group-toggle__btn:hover {
  background: var(--k-green-light);
  color: var(--k-green);
}
.group-toggle__btn--active {
  background: var(--k-green);
  color: var(--k-white);
}
.group-toggle__btn--active:hover {
  background: var(--k-green-dark);
  color: var(--k-white);
}

.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--k-gray-ed);
  background: var(--k-gray-f6);
  border-radius: 0 0 var(--k-radius) var(--k-radius);
  flex-shrink: 0; /* подвал с кнопками всегда виден, прокручивается только тело */
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.app-footer {
  border-top: 1px solid var(--k-gray-ed);
  background: var(--k-white);
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--k-gray-60);
}

.app-footer a {
  color: var(--k-green);
  font-weight: var(--k-fw-medium);
  transition: color var(--k-dur-micro);
}
.app-footer a:hover { color: var(--k-green-dark); }

@media (max-width: 600px) {
  .app-footer { padding: 12px 16px; font-size: 11px; }
}

/* ==========================================================================
   TWEAK LAYOUT VARIATIONS
   ========================================================================== */

/* — Variant: compact (одностраничный, без степпера, всё в одной странице) — */
.app[data-layout="compact"] .step__header { padding-bottom: 16px; margin-bottom: 16px; }
.app[data-layout="compact"] .step { padding: 24px; }

/* — Variant: split (две колонки на шагах 1+2) — */
.app[data-layout="split"] .step .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* — Variant: dense (компактные отступы, меньше canvas) — */
.app[data-layout="dense"] .kpi          { padding: 10px 12px; }
.app[data-layout="dense"] .kpi__value   { font-size: 17px; }
.app[data-layout="dense"] .step         { padding: 24px; }
.app[data-layout="dense"] .step__header { padding-bottom: 16px; margin-bottom: 16px; }
.app[data-layout="dense"] .viz-canvas--cup    { height: 280px; }
.app[data-layout="dense"] .viz-canvas--unwrap { height: 300px; }
.app[data-layout="dense"] .tabs__body { padding: 12px; }
.app[data-layout="dense"] .data-table td,
.app[data-layout="dense"] .data-table th { padding: 7px 10px; font-size: 12px; }


/* ==========================================================================
   IMAGE UPLOAD WIDGET — загрузка PNG/JPG/SVG для лого
   ========================================================================== */
.img-upload {
  --upload-accent: var(--k-green);
  width: 100%;
}

.img-upload__empty {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  background: var(--k-gray-f6);
  border: 1.5px dashed var(--k-gray-da);
  border-radius: var(--k-radius);
  color: var(--k-gray-60);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--k-dur-micro) var(--k-ease);
}
.img-upload__empty:hover {
  border-color: var(--upload-accent);
  background: var(--k-white);
  color: var(--upload-accent);
}
.img-upload__empty:disabled { opacity: 0.6; cursor: wait; }

.img-upload__plus {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--k-white);
  border: 1.5px solid var(--upload-accent);
  color: var(--upload-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.img-upload__label {
  font-size: 12px;
  font-weight: var(--k-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
}
.img-upload__hint {
  font-size: 10px;
  color: var(--k-gray-60);
  font-family: var(--k-font-mono);
  letter-spacing: 0.04em;
}

.img-upload__filled {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-left: 3px solid var(--upload-accent);
  border-radius: var(--k-radius);
}
.img-upload__thumb {
  width: 48px;
  height: 48px;
  background: repeating-conic-gradient(#F5F5F5 0deg 90deg, #FAFAFA 90deg 180deg) 0 0/12px 12px;
  border-radius: var(--k-radius);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.img-upload__thumb img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.img-upload__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.img-upload__name {
  font-size: 12px;
  font-weight: var(--k-fw-medium);
  color: var(--k-gray-20);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.img-upload__actions { display: flex; gap: 4px; }
.img-upload__btn-mini {
  width: 24px; height: 24px;
  border: 1px solid var(--k-gray-ed);
  background: var(--k-white);
  border-radius: var(--k-radius);
  color: var(--k-gray-60);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--k-dur-micro);
}
.img-upload__btn-mini:hover {
  border-color: var(--upload-accent);
  color: var(--upload-accent);
}
.img-upload__btn-mini--del:hover {
  border-color: var(--k-red);
  background: var(--k-red);
  color: var(--k-white);
}

/* Подтверждение удаления логотипа: удалить с сервера / оставить / отмена */
.img-upload__confirm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-left: 3px solid var(--k-red);
  border-radius: var(--k-radius);
}
.img-upload__confirm-msg {
  font-size: 12px;
  line-height: 1.4;
  color: var(--k-gray-20);
}
.img-upload__confirm-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
/* Карточка логотипа узкая — кнопки на всю ширину, длинная подпись переносится. */
.img-upload__confirm-actions .btn {
  width: 100%;
  white-space: normal;
  line-height: 1.25;
}
.img-upload__confirm-cancel {
  align-self: center;
  margin-top: 2px;
  border: none;
  background: none;
  padding: 4px;
  font-size: 12px;
  color: var(--k-gray-60);
  cursor: pointer;
}
.img-upload__confirm-cancel:hover { color: var(--k-gray-20); }
.img-upload__confirm-cancel:disabled { opacity: 0.6; cursor: default; }

/* ==========================================================================
   LOGO-IMAGES SECTION (шаг 2)
   ========================================================================== */
.logo-images-section {
  background: var(--k-gray-f6);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 16px;
  margin-bottom: 24px;
}
.logo-images-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.logo-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.logo-image-card {
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-left: 3px solid var(--accent, var(--k-green));
  border-radius: var(--k-radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.logo-image-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* extra-card split: основные поля + загрузка изображения */
.extra-card__split {
  display: grid;
  grid-template-columns: 1fr minmax(0, 280px);
  gap: 20px;
  align-items: start;
}
.extra-card__main { min-width: 0; }
.extra-card__main .form-grid:last-child { margin-bottom: 0; }
.extra-card__upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 700px) {
  .extra-card__split { grid-template-columns: 1fr; }
}

/* ==========================================================================
   STEP 2 — РЕЖИМ ЗАГРУЗКИ + БЛОКИ, ПОЯВЛЯЮЩИЕСЯ ПОСЛЕ ЗАГРУЗКИ ИЗОБРАЖЕНИЯ
   ========================================================================== */
.mode-select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 28px;
}
.mode-select__opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--k-dur) var(--k-ease), background var(--k-dur) var(--k-ease);
}
.mode-select__opt:hover { border-color: var(--k-green); }
.mode-select__opt.is-active {
  border-color: var(--k-green);
  background: var(--k-green-light);
}
.mode-select__ic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--k-gray-f6);
  color: var(--k-gray-60);
  transition: background var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease);
}
.mode-select__opt.is-active .mode-select__ic { background: var(--k-green); color: var(--k-white); }
.mode-select__label {
  font-size: 15px;
  font-weight: var(--k-fw-medium);
  color: var(--k-gray-20);
}
.mode-select__opt.is-active .mode-select__label { color: var(--k-green-dark); }
.mode-select__desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--k-gray-60);
}
@media (max-width: 680px) {
  .mode-select { grid-template-columns: 1fr; }
}

/* Блок раздела (Логотипы / Пояс) */
.upload-block {
  margin-bottom: 28px;
}
.upload-block + .upload-block {
  padding-top: 24px;
  border-top: 1px solid var(--k-gray-ed);
}
.upload-block__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.upload-block__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: var(--k-fw-medium);
  color: var(--k-gray-20);
}
.upload-block__title svg { color: var(--k-green); }
.upload-block__sub {
  font-size: 13px;
  color: var(--k-gray-60);
}

/* Сетка карточек логотипов (изображение + параметры) */
.logo-units-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.logo-unit {
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-left: 3px solid var(--accent, var(--k-green));
  border-radius: var(--k-radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.logo-unit__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo-unit__params {
  border-top: 1px dashed var(--k-gray-ed);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.logo-unit__note {
  font-size: 12px;
  color: var(--k-gray-60);
  font-style: italic;
}
.logo-unit__note--auto {
  font-style: normal;
  color: var(--k-green);
  background: var(--k-green-light);
  border-radius: var(--k-radius);
  padding: 6px 10px;
}

/* Чекбокс «Высота 100%» в свойствах логотипа */
.logo-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 8px 10px;
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  background: var(--k-white);
  transition: border-color var(--k-dur-micro) var(--k-ease),
              background var(--k-dur-micro) var(--k-ease);
}
.logo-check:hover { border-color: var(--k-green); }
.logo-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--k-green);
  cursor: pointer;
}
.logo-check__txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 14px;
  color: var(--k-gray-20);
  line-height: 1.25;
}
.logo-check__sub {
  font-size: 11px;
  color: var(--k-gray-60);
}

/* Размещение по окружности — смешанный режим */
.logo-place {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px dashed var(--k-gray-ed);
}
.seg {
  display: flex;
  border: 1px solid var(--k-gray-da);
  border-radius: var(--k-radius);
  overflow: hidden;
}
.seg__btn {
  flex: 1;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: var(--k-fw-medium);
  background: var(--k-white);
  color: var(--k-gray-20);
  border: none;
  cursor: pointer;
  transition: background var(--k-dur-micro) var(--k-ease),
              color var(--k-dur-micro) var(--k-ease);
}
.seg__btn + .seg__btn { border-left: 1px solid var(--k-gray-da); }
.seg__btn:hover { background: var(--k-green-light); color: var(--k-green); }
.seg__btn.is-active { background: var(--k-green); color: var(--k-white); }
.seg__btn.is-active:hover { background: var(--k-green-dark); color: var(--k-white); }

/* Блокирующий баннер конфликта на шаге логотипов */
.step__nav { flex-direction: column; }
.step__nav-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.conflict-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--k-red);
  border-left-width: 4px;
  border-radius: var(--k-radius);
  background: color-mix(in srgb, var(--k-red) 7%, var(--k-white));
}
.conflict-banner__ic {
  color: var(--k-red);
  flex-shrink: 0;
  display: flex;
  margin-top: 1px;
}
.conflict-banner__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.conflict-banner__title {
  font-size: 14px;
  font-weight: var(--k-fw-bold);
  color: var(--k-red);
}
.conflict-banner__text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--k-gray-20);
}
.btn[disabled],
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
/* Явно «выключенный» вид основной кнопки расчёта при блокировке конфликтом */
.btn--primary:disabled,
.btn--primary[disabled] {
  background: var(--k-gray-da);
  border-color: var(--k-gray-da);
  color: var(--k-white);
  opacity: 1;
}

/* Drag handle — ⠿ */
.logo-unit__drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -8px -4px -8px -12px; /* вписываем в padding карточки, чтобы зона захвата 44px */
  flex-shrink: 0;
  color: var(--k-gray-da);
  font-size: 18px;
  line-height: 1;
  cursor: grab;
  border-radius: var(--k-radius) 0 0 var(--k-radius);
  transition: color var(--k-dur-micro) var(--k-ease),
              background var(--k-dur-micro) var(--k-ease);
  user-select: none;
}
.logo-unit__drag-handle:hover {
  color: var(--k-green);
  background: var(--k-green-light);
}
.logo-unit__drag-handle:active,
.logo-unit.is-dragging .logo-unit__drag-handle {
  cursor: grabbing;
  color: var(--k-green-dark);
}

/* Карточка, которую тащат */
.logo-unit.is-dragging {
  opacity: 0.45;
  border-color: var(--k-gray-da);
}

/* Карточка — зона сброса */
.logo-unit.is-drag-over {
  border: 2px dashed var(--k-green);
  background: var(--k-green-light);
}

/* Подпись «Параметры» */
.param-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
  color: var(--k-gray-60);
  font-weight: var(--k-fw-medium);
}

/* Общий блок параметров логотипов */
.shared-params {
  background: var(--k-gray-f6);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Подсказка «загрузите изображение, чтобы задать параметры» */
.reveal-hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--k-gray-60);
  background: var(--k-gray-f6);
  border: 1px dashed var(--k-gray-da);
  border-radius: var(--k-radius);
  padding: 12px 14px;
  margin: 0;
}

/* Пояс: изображение слева, параметры справа */
.belt-grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  gap: 20px;
  align-items: start;
}
.belt-grid .extra-card__main { display: flex; flex-direction: column; gap: 12px; }
.belt-grid .extra-card__main .toggles { margin-bottom: 0; }
.belt-grid .extra-card__main .form-grid { margin-bottom: 0; }
@media (max-width: 700px) {
  .belt-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CUP 3D — шаг 4
   ========================================================================== */
.step--3d .step__sub { max-width: 720px; }

.cup3d-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--k-radius);
  font-size: 13px;
  margin-bottom: 16px;
}
.cup3d-banner--warn {
  background: #FFF8E5;
  border: 1px solid #F4D77B;
  border-left: 3px solid var(--k-yellow);
  color: #6B4F00;
}
.cup3d-banner strong { font-family: var(--k-font-mono); }

.cup3d-layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .cup3d-layout { grid-template-columns: 1fr; }
}

/* ── Sidebar ── */
.cup3d-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.cup3d-panel {
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 14px 14px 12px;
}
.cup3d-panel__label {
  font-size: 10px;
  font-weight: var(--k-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
  color: var(--k-gray-60);
  margin-bottom: 10px;
}

/* ── Сворачиваемые блоки ── */
.cup3d-coll { padding: 0; overflow: hidden; }
.cup3d-coll__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--k-dur-micro);
}
.cup3d-coll__head:hover { background: var(--k-gray-f6); }
.cup3d-coll__titles { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cup3d-coll__title {
  font-size: 11px;
  font-weight: var(--k-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
  color: var(--k-gray-20);
}
.cup3d-coll__sub {
  font-family: var(--k-font-mono);
  font-size: 11px;
  color: var(--k-gray-60);
}
.cup3d-coll__chev {
  flex: none;
  display: inline-flex;
  color: var(--k-gray-60);
}
.cup3d-coll.is-open .cup3d-coll__chev { color: var(--k-green); }
.cup3d-coll__body {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--k-gray-ed);
}
.cup3d-coll__body > .cup3d-panel__label:first-child { margin-top: 8px; }

/* ── Тумблер «Логотип в естественном цвете» ── */
.cup3d-toggle {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 10px;
  background: var(--k-gray-f6);
  border-radius: var(--k-radius);
  cursor: pointer;
}
.cup3d-toggle input {
  accent-color: var(--k-green);
  width: 16px; height: 16px;
  margin-top: 2px;
  flex: none;
}
.cup3d-toggle__body { display: flex; flex-direction: column; gap: 4px; }
.cup3d-toggle__title { font-size: 13px; font-weight: var(--k-fw-medium); color: var(--k-gray-20); }
.cup3d-toggle__sub { font-size: 11.5px; line-height: 1.45; color: var(--k-gray-60); }

/* ── Понятный выбор своего цвета (пипетка) ── */
.cup3d-pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1.5px dashed var(--k-gray-da);
  border-radius: var(--k-radius);
  cursor: pointer;
  transition: border-color var(--k-dur-micro), background var(--k-dur-micro);
}
.cup3d-pick:hover { border-color: var(--k-green); background: var(--k-green-light); }
.cup3d-pick__native {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.cup3d-pick__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--k-radius);
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  color: var(--k-green);
}
.cup3d-pick__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.cup3d-pick__title { font-size: 13px; font-weight: var(--k-fw-medium); color: var(--k-gray-20); }
.cup3d-pick__sub { font-size: 11px; color: var(--k-gray-60); }
.cup3d-pick__chip {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--k-gray-da) inset;
}

/* ── Ввод цвета кодом (свёрнуто) ── */
.cup3d-advcolor { margin-top: 12px; }
.cup3d-advcolor > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--k-green);
  font-weight: var(--k-fw-medium);
  list-style: none;
  user-select: none;
}
.cup3d-advcolor > summary::-webkit-details-marker { display: none; }
.cup3d-advcolor > summary::before { content: '+ '; }
.cup3d-advcolor[open] > summary::before { content: '\2013\A0'; } /* «–»+nbsp ASCII-escape'ом — не зависит от кодировки .css */

.cup3d-hint {
  background: var(--k-gray-f6);
  border-radius: var(--k-radius);
  padding: 8px 10px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--k-gray-60);
}

/* ── Тип стакана: обычный / матовый ── */
.cup3d-typesel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cup3d-typesel__btn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 10px 11px;
  background: var(--k-white);
  border: 1.5px solid var(--k-gray-da);
  border-radius: var(--k-radius);
  cursor: pointer;
  transition: all var(--k-dur-micro) var(--k-ease);
}
.cup3d-typesel__btn:hover { border-color: var(--k-green); }
.cup3d-typesel__btn.is-active {
  border-color: var(--k-green);
  background: var(--k-green-light);
}
.cup3d-typesel__name {
  font-size: 13px;
  font-weight: var(--k-fw-bold);
  color: var(--k-gray-20);
}
.cup3d-typesel__btn.is-active .cup3d-typesel__name { color: var(--k-green-dark); }
.cup3d-typesel__sub {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--k-gray-60);
}

.cup3d-matte-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--k-green-light);
  border-radius: var(--k-radius);
  font-size: 12px;
  line-height: 1.5;
  color: var(--k-green-dark);
}
.cup3d-matte-note svg { flex-shrink: 0; margin-top: 1px; }

/* ── Пропорции стакана ── */
.cup3d-dims-note {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--k-gray-60);
}
.cup3d-dims {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cup3d-dimfield {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cup3d-dimfield span {
  font-size: 11px;
  font-weight: var(--k-fw-medium);
  color: var(--k-gray-60);
}
.cup3d-dimfield input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--k-gray-da);
  border-radius: var(--k-radius);
  font-family: var(--k-font-mono);
  font-size: 13px;
  color: var(--k-gray-20);
  background: var(--k-white);
  transition: border-color var(--k-dur-micro) var(--k-ease);
}
.cup3d-dimfield input:focus { outline: none; border-color: var(--k-green); }

/* ── Дозагрузка изображения прямо в 3D ── */
.cup3d-hint--upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--k-green-light);
  color: var(--k-green-dark);
  line-height: 1.45;
}
.cup3d-replace { margin-bottom: 12px; }
.cup3d-upload__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  justify-content: center;
  padding: 9px 12px;
  border: 1.5px solid var(--accent, var(--k-green));
  border-radius: var(--k-radius);
  background: var(--k-white);
  color: var(--accent, var(--k-green));
  font-family: var(--k-font);
  font-size: 12.5px;
  font-weight: var(--k-fw-medium);
  cursor: pointer;
  transition: all var(--k-dur-micro) var(--k-ease);
}
.cup3d-upload__btn:hover { background: var(--accent, var(--k-green)); color: var(--k-white); }
.cup3d-upload__btn:disabled { opacity: 0.6; cursor: default; }

/* Цвета стакана */
.cup3d-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.cup3d-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background-clip: padding-box;
  box-shadow: 0 0 0 1px var(--k-gray-da) inset;
  transition: transform var(--k-dur-micro), border-color var(--k-dur-micro);
}
.cup3d-swatch:hover { transform: scale(1.08); }
.cup3d-swatch.is-active {
  border-color: var(--k-green);
  box-shadow: 0 0 0 1px var(--k-green) inset;
}
.cup3d-swatch--input {
  padding: 2px;
  background: var(--k-white);
  cursor: pointer;
}

/* Превью итогового цвета (с прозрачностью) на шахматке */
.cup3d-color-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.cup3d-color-preview__chip {
  width: 40px;
  height: 28px;
  flex: none;
  border-radius: var(--k-radius);
  border: 1px solid var(--k-gray-da);
  background-image:
    linear-gradient(45deg, #ddd 25%, transparent 25%),
    linear-gradient(-45deg, #ddd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ddd 75%),
    linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
  position: relative;
  overflow: hidden;
}
.cup3d-color-preview__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
/* окрашенный слой кладём поверх шахматки через box-shadow inset не выйдет —
   используем ::after с фактическим цветом */
.cup3d-color-preview__val {
  font-family: var(--k-font-mono);
  font-size: 12px;
  color: var(--k-gray-60);
}

/* Поле ручного ввода цвета */
.cup3d-colorinput {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.cup3d-colorinput__field {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  font-family: var(--k-font-mono);
  font-size: 12px;
  color: var(--k-gray-20);
  background: var(--k-white);
  border: 1px solid var(--k-gray-da);
  border-radius: var(--k-radius);
  transition: border-color var(--k-dur-micro);
}
.cup3d-colorinput__field:focus { outline: none; border-color: var(--k-green); }
.cup3d-colorinput__btn {
  flex: none;
  height: 34px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: var(--k-fw-medium);
  color: var(--k-green);
  background: var(--k-white);
  border: 1.5px solid var(--k-green);
  border-radius: var(--k-radius);
  cursor: pointer;
  transition: background var(--k-dur-micro);
}
.cup3d-colorinput__btn:hover { background: var(--k-green-light); }
.cup3d-colorinput__hint {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--k-gray-60);
}
.cup3d-colorinput__hint code {
  font-family: var(--k-font-mono);
  font-size: 10.5px;
  background: var(--k-gray-f6);
  padding: 1px 4px;
  border-radius: 3px;
}

/* Список элементов (логотипы + пояс) */
.cup3d-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cup3d-item {
  --accent: var(--k-green);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: var(--k-white);
  border: 1.5px solid transparent;
  border-radius: var(--k-radius);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--k-gray-20);
  transition: all var(--k-dur-micro);
  min-width: 0;
}
.cup3d-item:hover {
  background: var(--k-gray-f6);
}
.cup3d-item.is-active {
  border-color: var(--accent);
  background: var(--k-gray-f6);
}
.cup3d-item.is-empty {
  opacity: 0.7;
}
.cup3d-item__badge {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--k-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--k-font-mono);
  font-size: 12px;
  font-weight: var(--k-fw-bold);
  flex-shrink: 0;
}
.cup3d-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cup3d-item__name {
  font-size: 12px;
  font-weight: var(--k-fw-medium);
}
.cup3d-item__meta {
  font-size: 10px;
  color: var(--k-gray-60);
  font-family: var(--k-font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cup3d-item__warn {
  color: var(--k-yellow);
  font-size: 14px;
  flex-shrink: 0;
}

/* Слайдеры */
.cup3d-ctrl { margin-bottom: 10px; }
.cup3d-ctrl__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.cup3d-ctrl__label {
  font-size: 11px;
  color: var(--k-gray-60);
}
.cup3d-ctrl__val {
  font-family: var(--k-font-mono);
  font-size: 11px;
  font-weight: var(--k-fw-bold);
  color: var(--k-green);
}
.cup3d-ctrl input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: var(--k-gray-ed);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.cup3d-ctrl input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--k-green);
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(0, 137, 95, 0.18);
  transition: box-shadow var(--k-dur-micro);
}
.cup3d-ctrl input[type=range]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 5px rgba(0, 137, 95, 0.28);
}
.cup3d-ctrl input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--k-green);
  border: none;
  cursor: pointer;
}

/* Blend buttons */
.cup3d-blend { margin-bottom: 6px; }
.cup3d-blend__row {
  display: flex;
  gap: 3px;
  background: var(--k-gray-f6);
  border-radius: var(--k-radius);
  padding: 3px;
  margin-top: 4px;
  overflow: visible;
}
.cup3d-blend__item {
  flex: 1;
  position: relative;
}
.cup3d-blend__btn {
  width: 100%;
  padding: 6px 4px;
  border: none;
  background: transparent;
  border-radius: calc(var(--k-radius) - 1px);
  color: var(--k-gray-60);
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--k-fw-medium);
  cursor: pointer;
  transition: all var(--k-dur-micro);
}
.cup3d-blend__btn:hover { color: var(--k-green); }
.cup3d-blend__btn.is-active {
  background: var(--k-green);
  color: var(--k-white);
}

/* Blend tooltip — единый эталонный вид (как .help-tip__bubble) */
.cup3d-blend__tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 212px;
  background: var(--k-gray-20);
  border: none;
  border-radius: var(--k-radius);
  padding: 10px 12px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--k-dur) var(--k-ease), visibility var(--k-dur) var(--k-ease);
  z-index: 300;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
/* Arrow */
.cup3d-blend__tip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--k-gray-20);
  border: none;
}
/* First item — align left */
.cup3d-blend__item:first-child .cup3d-blend__tip {
  left: 0;
  transform: none;
}
.cup3d-blend__item:first-child .cup3d-blend__tip::after {
  left: 20px;
  transform: rotate(45deg);
}
/* Last item — align right */
.cup3d-blend__item:last-child .cup3d-blend__tip {
  left: auto;
  right: 0;
  transform: none;
}
.cup3d-blend__item:last-child .cup3d-blend__tip::after {
  left: auto;
  right: 20px;
  transform: rotate(45deg);
}
/* Show on hover */
.cup3d-blend__item:hover .cup3d-blend__tip {
  opacity: 1;
  visibility: visible;
}
/* Tooltip content */
.cup3d-blend__tip-name {
  display: block;
  font-size: 10px;
  font-weight: var(--k-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--k-green-light);
  margin-bottom: 6px;
}
.cup3d-blend__tip-desc,
.cup3d-blend__tip-when,
.cup3d-blend__tip-note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--k-white);
  margin-bottom: 4px;
}
.cup3d-blend__tip-when b {
  font-weight: var(--k-fw-medium);
  color: var(--k-green-light);
}
.cup3d-blend__tip-note {
  margin-bottom: 0;
  color: var(--k-gray-da);
  font-style: italic;
}

/* Checkbox */
.cup3d-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--k-gray-20);
  cursor: pointer;
  user-select: none;
}
.cup3d-checkbox input { accent-color: var(--k-green); width: 16px; height: 16px; }

/* ── Stage (viewer + export) ── */
.cup3d-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.cup3d-viewer {
  position: relative;
  background: var(--k-gray-f6);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  overflow: hidden;
  height: 600px;
  min-height: 480px;
}
.cup3d-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.cup3d-hud {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  font-family: var(--k-font);
  font-size: 12px;
  color: var(--k-gray-20);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cup3d-hud--angle {
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  color: var(--k-gray-60);
}
.cup3d-hud--angle strong {
  color: var(--k-green);
  font-family: var(--k-font-mono);
  font-weight: var(--k-fw-bold);
}
.cup3d-hud--btns {
  top: 12px;
  right: 12px;
  padding: 4px;
  flex-direction: column;
  gap: 4px;
  background: rgba(255, 255, 255, 0.92);
}
.cup3d-vbtn {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: calc(var(--k-radius) - 1px);
  color: var(--k-gray-60);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--k-dur-micro);
}
.cup3d-vbtn:hover {
  background: var(--k-green-light);
  color: var(--k-green-dark);
}
.cup3d-vbtn.is-on {
  background: var(--k-green);
  color: var(--k-white);
}
.cup3d-hud--hint {
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  font-size: 11px;
  color: var(--k-gray-60);
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .cup3d-viewer { height: 480px; }
  .cup3d-hud--hint { font-size: 10px; padding: 4px 10px; }
}

/* Export */
.cup3d-export {
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 14px 16px;
}
.cup3d-export__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: var(--k-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
  color: var(--k-gray-60);
  margin-bottom: 10px;
}
.cup3d-export__title svg { color: var(--k-green); }
.cup3d-export__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.cup3d-export__progress {
  font-family: var(--k-font-mono);
  font-size: 12px;
  color: var(--k-green);
  font-weight: var(--k-fw-bold);
}
.cup3d-export__hint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--k-gray-60);
  line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────
   Выбор стороны логотипа OxPack для GIF
   ────────────────────────────────────────────────────────── */
.cup3d-logoside {
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  background: var(--k-gray-f6);
  padding: 14px;
  margin-bottom: 14px;
}
.cup3d-logoside__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
}
.cup3d-logoside__label {
  font-size: 11px;
  font-weight: var(--k-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
  color: var(--k-gray-60);
}
.cup3d-logoside__hint {
  font-size: 11px;
  color: var(--k-gray-60);
  line-height: 1.45;
}
.cup3d-logoside__row {
  display: flex;
  gap: 6px;
}
.cup3d-logoside__btn {
  width: 100%;
  padding: 9px 8px;
  font-family: var(--k-font);
  font-size: 13px;
  font-weight: var(--k-fw-medium);
  color: var(--k-gray-20);
  background: var(--k-white);
  border: 1.5px solid var(--k-gray-da);
  border-radius: var(--k-radius);
  cursor: pointer;
  transition: background var(--k-dur) var(--k-ease),
              border-color var(--k-dur) var(--k-ease),
              color var(--k-dur) var(--k-ease);
}
.cup3d-logoside__btn:hover { border-color: var(--k-green); background: var(--k-green-light); }
.cup3d-logoside__btn.is-active {
  background: var(--k-green);
  border-color: var(--k-green);
  color: var(--k-white);
}

/* ──────────────────────────────────────────────────────────
   GIF preview modal — живой предпросмотр анимированного разворота
   ────────────────────────────────────────────────────────── */
.cup3d-gifmodal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(28, 28, 30, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: cup3d-gifmodal-in 150ms cubic-bezier(.4, 0, .2, 1);
}
@keyframes cup3d-gifmodal-in { from { opacity: 0; } to { opacity: 1; } }

.cup3d-gifmodal__box {
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  width: min(560px, 100%);
  max-height: 92vh;
  overflow: auto;
  padding: 24px;
}

.cup3d-gifmodal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.cup3d-gifmodal__title {
  font-size: 18px;
  font-weight: var(--k-fw-bold);
  color: var(--k-green);
}
.cup3d-gifmodal__sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--k-gray-60);
}
.cup3d-gifmodal__close {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  background: var(--k-white);
  color: var(--k-gray-20);
  cursor: pointer;
  transition: background var(--k-dur-micro), border-color var(--k-dur-micro);
}
.cup3d-gifmodal__close:hover { background: var(--k-green-light); border-color: var(--k-green); }

.cup3d-gifmodal__stage {
  background: var(--k-bg);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cup3d-gifmodal__stage img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 2px;
}

.cup3d-gifmodal__note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--k-green-light);
  border-radius: var(--k-radius);
  font-size: 12.5px;
  line-height: 1.55;
  color: #1f5c47;
}
.cup3d-gifmodal__note svg { flex: none; margin-top: 1px; color: var(--k-green); }

.cup3d-gifmodal__actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.cup3d-gifmodal__actions .btn { text-decoration: none; }

/* ==========================================================================
   PRINT FILL — шаг 5 (заполняемость печати, расход краски)
   ========================================================================== */

/* — пустое состояние — */
.pf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  background: var(--k-gray-f6);
  border: 1px dashed var(--k-gray-da);
  border-radius: var(--k-radius);
}
.pf-empty__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--k-white);
  border: 1.5px solid var(--k-gray-da);
  color: var(--k-gray-60);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.pf-empty h3 { font-size: 18px; color: var(--k-gray-20); font-weight: var(--k-fw-bold); margin-bottom: 8px; }
.pf-empty p { font-size: 14px; color: var(--k-gray-60); max-width: 520px; line-height: 1.6; }
.pf-empty strong { color: var(--k-green-dark); }

/* — источники — */
.pf-sources { margin-bottom: 20px; }
.pf-sources .k-caption { display: block; margin-bottom: 8px; }
.pf-sources__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pf-sources__head .k-caption { margin-bottom: 0; }
.pf-sources__ctl { display: flex; gap: 6px; }
.pf-sources__hint { font-size: 12px; color: var(--k-gray-60); margin: 8px 0 0; }
.pf-src__check {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; margin-left: 2px;
}
.pf-sources__list { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-src {
  --accent: var(--k-green);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--k-white);
  border: 1.5px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--k-dur-micro) var(--k-ease);
}
.pf-src:hover { border-color: var(--accent); background: var(--k-gray-f6); }
.pf-src.is-active { border-color: var(--accent); background: var(--k-gray-f6); }
.pf-src__dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.pf-src__name { font-size: 13px; font-weight: var(--k-fw-medium); color: var(--k-gray-20); }
.pf-src__dim { font-family: var(--k-font-mono); font-size: 11px; color: var(--k-gray-60); }

/* — диалог объединения — */
.pf-merge-dialog {
  background: var(--k-white);
  border: 1.5px solid var(--k-green);
  border-radius: var(--k-radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.pf-merge-dialog__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--k-gray-ed);
  background: var(--k-green-light);
}
.pf-merge-dialog__title { font-weight: var(--k-fw-bold); color: var(--k-green-dark); font-size: 14px; }
.pf-merge-dialog__body { padding: 16px; }
.pf-merge-dialog__desc { font-size: 13px; color: var(--k-gray-60); margin: 0 0 12px; }
.pf-merge-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-merge-swatch {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1.5px solid var(--k-gray-ed); border-radius: var(--k-radius);
  cursor: pointer; font-size: 13px; color: var(--k-gray-20);
  transition: all var(--k-dur-micro) var(--k-ease);
}
.pf-merge-swatch:hover { border-color: var(--k-green); }
.pf-merge-swatch.is-active { border-color: var(--k-green); background: var(--k-green-light); }
.pf-merge-swatch input[type=radio] { accent-color: var(--k-green); margin: 0; }
.pf-merge-swatch--custom { gap: 8px; }
.pf-merge-dialog__foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--k-gray-ed); background: var(--k-gray-f6);
}

/* — объединённые строки — */
.pf-table tr.pf-merged-row td { background: var(--k-green-light); }
.pf-table tr.pf-merged-row:first-child td { border-top: 2px solid var(--k-green); }
.pf-merged-badge {
  display: inline-block; font-size: 10px; font-weight: var(--k-fw-bold);
  color: #fff; background: var(--k-green); border-radius: var(--k-radius-pill);
  padding: 2px 8px; margin-left: 6px; white-space: nowrap;
}
.pf-source-tag {
  display: inline-block; font-size: 11px; color: var(--k-gray-60);
  background: var(--k-gray-f6); border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius); padding: 1px 6px; margin: 0 4px 2px 0;
}

/* — габариты по каждому логотипу — */
.pf-dimlist { display: flex; flex-direction: column; gap: 8px; }
.pf-dimrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; background: var(--k-gray-f6);
  border: 1px solid var(--k-gray-ed); border-radius: var(--k-radius);
}
.pf-dimrow__name {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 13px; font-weight: var(--k-fw-medium); color: var(--k-gray-20);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-dimrow__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pf-dimrow__fields { display: flex; gap: 8px; flex-shrink: 0; }
.pf-lbl--inline {
  flex-direction: row; align-items: center; gap: 6px;
  font-size: 12px; color: var(--k-gray-60);
}
.pf-lbl--inline .numin-wrap { min-width: 96px; }

/* — верхний блок: превью + параметры — */
.pf-top {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 880px) { .pf-top { grid-template-columns: 1fr; } }

.pf-preview {
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pf-preview__head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.pf-preview__name {
  font-family: var(--k-font-mono); font-size: 11px; color: var(--k-gray-60);
  max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-preview__canvas-wrap {
  background-image:
    linear-gradient(45deg, #EDEDED 25%, transparent 25%),
    linear-gradient(-45deg, #EDEDED 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #EDEDED 75%),
    linear-gradient(-45deg, transparent 75%, #EDEDED 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  min-height: 160px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
}
.pf-preview__canvas { display: block; max-width: 100%; height: auto; }

.pf-readout {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pf-readout__src { display: flex; align-items: center; gap: 5px; }
.pf-readout__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

.pf-readout > div {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--k-gray-60);
}
.pf-readout b { font-family: var(--k-font-mono); font-weight: var(--k-fw-bold); color: var(--k-gray-20); }
.pf-readout__accent { color: var(--k-green) !important; font-size: 14px; }

.pf-warn {
  display: flex; align-items: center; gap: 8px;
  background: #FFF8E5; border: 1px solid #F4D77B; border-left: 3px solid var(--k-yellow);
  border-radius: var(--k-radius); padding: 8px 10px;
  font-size: 12px; color: #6B4F00;
}

.pf-preview__hint {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: 11px; color: var(--k-gray-60); line-height: 1.5;
}
.pf-preview__hint svg { flex-shrink: 0; margin-top: 2px; color: var(--k-green); }

/* — параметры — */
.pf-params { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pf-pgroup {
  background: var(--k-gray-f6);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 12px 14px;
}
.pf-pgroup__label {
  display: block;
  font-size: 11px; font-weight: var(--k-fw-medium); text-transform: uppercase;
  letter-spacing: var(--k-ls-section); color: var(--k-gray-60); margin-bottom: 10px;
}
.pf-pgroup__hint { font-size: 11px; color: var(--k-gray-60); margin-top: 8px; line-height: 1.5; }

.pf-row2, .pf-row3 { display: grid; gap: 10px; }
.pf-row2 { grid-template-columns: 1fr 1fr; }
.pf-row3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 520px) { .pf-row3 { grid-template-columns: 1fr 1fr; } }

.pf-lbl {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; color: var(--k-gray-60); min-width: 0;
}
.pf-num {
  height: 38px;
  width: 100%;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--k-gray-da);
  border-radius: var(--k-radius);
  background: var(--k-white);
  color: var(--k-gray-20);
  font-family: var(--k-font-mono);
  font-size: 13px;
  font-weight: var(--k-fw-medium);
  transition: border-color var(--k-dur-micro);
}
.pf-num:focus { outline: none; border-color: var(--k-green); }

/* — сегмент-переключатель — */
.pf-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 3px;
}
.pf-seg__btn {
  border: none;
  background: transparent;
  border-radius: calc(var(--k-radius) - 1px);
  padding: 7px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--k-fw-medium);
  color: var(--k-gray-60);
  cursor: pointer;
  transition: all var(--k-dur-micro);
  white-space: nowrap;
}
.pf-seg__btn:hover { color: var(--k-green); }
.pf-seg__btn.is-active { background: var(--k-green); color: var(--k-white); }
.pf-seg--inline { background: var(--k-gray-f6); }

.pf-colorline {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 12px; color: var(--k-gray-60);
}
.pf-color {
  width: 34px; height: 28px; padding: 2px; border: 1px solid var(--k-gray-da);
  border-radius: var(--k-radius); background: var(--k-white); cursor: pointer;
}
.pf-colorline code { font-family: var(--k-font-mono); font-size: 11px; color: var(--k-gray-20); }
.pf-colorline__note { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: var(--k-ls-section); color: var(--k-gray-da); }

/* — таблица красок — */
.pf-paints {
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  margin-bottom: 20px;
  overflow: hidden;
}
.pf-paints__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--k-gray-f6); border-bottom: 1px solid var(--k-gray-ed);
  flex-wrap: wrap;
}
.pf-paints__tools { display: flex; gap: 6px; }

/* — счётчик общего числа красок в шапке блока «Краски» — */
.pf-paints__title { display: inline-flex; align-items: center; gap: 8px; }
.pf-paints__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 24px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--k-radius);
  background: var(--k-green);
  color: var(--k-white);
  font-family: var(--k-font-mono);
  font-size: 13px;
  font-weight: var(--k-fw-bold);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
.pf-paints__count small {
  font-family: var(--k-font);
  font-size: 9px;
  font-weight: var(--k-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
  opacity: 0.85;
}

.pf-table-scroll { overflow-x: auto; }
.pf-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; }
.pf-table th {
  text-align: left; font-size: 10px; font-weight: var(--k-fw-medium); text-transform: uppercase;
  letter-spacing: var(--k-ls-section); color: var(--k-gray-60);
  padding: 10px 12px; border-bottom: 1px solid var(--k-gray-ed); white-space: nowrap;
}
.pf-table td { padding: 8px 12px; border-bottom: 1px solid var(--k-gray-ed); vertical-align: middle; }
.pf-table tbody tr:hover { background: var(--k-gray-f6); }
.pf-table tr.is-sel { background: var(--k-green-light); }
.pf-table tr.is-sel:hover { background: var(--k-green-light); }
.pf-th-num, .pf-num-cell { text-align: right; font-family: var(--k-font-mono); white-space: nowrap; }
/* Заголовки числовых колонок должны выравниваться вправо — строго под своими значениями.
   Перебиваем общее правило `.pf-table th { text-align:left }` (выше по специфичности). */
.pf-table th.pf-th-num { text-align: right; }
/* Help-иконка в шапке таблицы: сохраняем регистр, выстраиваем иконку после подписи */
.pf-table th .help-tip { text-transform: none; letter-spacing: 0; }
.pf-th-help { display: inline-flex; align-items: center; gap: 0; justify-content: flex-end; }
.pf-th-check, .pf-td-check { width: 34px; text-align: center; }
.pf-th-act, .pf-td-act { width: 36px; text-align: center; }
.pf-td-check input { accent-color: var(--k-green); width: 16px; height: 16px; cursor: pointer; }
.pf-strong { font-weight: var(--k-fw-bold); color: var(--k-gray-20); }

.pf-paintcell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pf-sw { width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); flex-shrink: 0; }
.pf-sw--white { background: var(--k-white); border: 1px solid var(--k-gray-da); }
.pf-codein {
  flex: 1; min-width: 90px;
  height: 32px; padding: 0 8px;
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  background: var(--k-white);
  font-family: var(--k-font); font-size: 12px; color: var(--k-gray-20);
  transition: border-color var(--k-dur-micro);
}
.pf-codein:focus { outline: none; border-color: var(--k-green); }
.pf-codein::placeholder { color: var(--k-gray-da); }

/* — Pantone-пикер: поле «Краска / Pantone код» с автоподбором и поиском — */
.pf-pantone { position: relative; flex: 1; min-width: 120px; display: flex; align-items: center; }
.pf-pantone__input { flex: 1; min-width: 0; padding-right: 48px; }
.pf-pantone__input::placeholder { color: var(--k-gray-60); font-style: italic; }
.pf-pantone__badge,
.pf-pantone__clr,
.pf-pantone__caret {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
}
.pf-pantone__badge {
  right: 26px; height: 16px; padding: 0 6px;
  font-size: 9px; font-weight: var(--k-fw-bold); letter-spacing: .04em; text-transform: uppercase;
  color: var(--k-green-dark); background: var(--k-green-light);
  border-radius: var(--k-radius-pill); pointer-events: none;
}
.pf-pantone__clr {
  right: 26px; width: 18px; height: 18px;
  border: none; background: transparent; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--k-gray-60);
  border-radius: 50%; transition: all var(--k-dur-micro);
}
.pf-pantone__clr:hover { color: var(--k-gray-20); background: var(--k-gray-ed); }
.pf-pantone__caret {
  right: 6px; width: 18px; height: 18px;
  border: none; background: transparent; cursor: pointer; color: var(--k-gray-60);
}
.pf-pantone__caret:hover { color: var(--k-green); }

.pf-pantone__pop {
  position: fixed; z-index: 9998;
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed); border-radius: var(--k-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  max-height: 280px; display: flex; flex-direction: column; overflow: hidden;
}
.pf-pantone__pophead {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; font-size: 11px; color: var(--k-gray-60);
  border-bottom: 1px solid var(--k-gray-ed); background: var(--k-gray-f7, #f7f7f5);
}
.pf-pantone__list { overflow-y: auto; padding: 4px; }
.pf-pantone__empty { padding: 10px; font-size: 11px; color: var(--k-gray-60); line-height: 1.4; }
.pf-pantone__opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: none; border-radius: 6px;
  background: transparent; cursor: pointer; text-align: left;
  transition: background var(--k-dur-micro);
}
.pf-pantone__opt:hover { background: var(--k-green-light); }
.pf-pantone__opt.is-nearest { background: rgba(0, 137, 95, 0.06); }
.pf-pantone__opt.is-nearest:hover { background: var(--k-green-light); }
.pf-pantone__sw { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); flex-shrink: 0; }
.pf-pantone__code { flex: 1; min-width: 0; font-size: 12px; color: var(--k-gray-20); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-pantone__hex { font-family: var(--k-font-mono); font-size: 10px; color: var(--k-gray-60); }
.pf-pantone__de {
  font-size: 9px; font-weight: var(--k-fw-bold); color: var(--k-green-dark);
  background: var(--k-green-light); border-radius: var(--k-radius-pill);
  padding: 1px 6px; white-space: nowrap;
}

.pf-num-cell .pf-num { height: 30px; padding: 0 6px; font-size: 12px; text-align: right; }
.pf-num-cell { line-height: 1.35; }
.pf-hex { display: block; font-size: 11px; font-weight: var(--k-fw-bold); color: var(--k-gray-20); }
.pf-rgb { display: block; font-size: 10px; color: var(--k-gray-60); }

.pf-iconbtn {
  width: 26px; height: 26px; border: 1px solid var(--k-gray-ed); background: var(--k-white);
  border-radius: var(--k-radius); color: var(--k-gray-60); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: all var(--k-dur-micro);
}
.pf-iconbtn:hover { border-color: var(--k-green); color: var(--k-green); }

.pf-table tr.pf-under td { background: #FCFBF8; }
.pf-table tr.pf-under:hover td { background: #FCFBF8; }
.pf-under-ic { color: var(--k-green); display: inline-flex; }
.pf-under-name { font-size: 13px; color: var(--k-gray-20); font-weight: var(--k-fw-medium); }
.pf-under-name em { font-style: normal; color: var(--k-gray-60); font-size: 11px; font-weight: var(--k-fw-regular); }

.pf-under-ctl {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--k-gray-ed); background: var(--k-gray-f6);
}
.pf-under-ctl__label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: var(--k-fw-bold); text-transform: uppercase;
  letter-spacing: var(--k-ls-section); color: var(--k-gray-60);
}
.pf-under-ctl__label svg { color: var(--k-green); }
.pf-under-ctl__hint { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--k-gray-60); }
.pf-under-ctl__hint svg { color: var(--k-green); }

/* — итоги — */
.pf-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 800px) { .pf-totals { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .pf-totals { grid-template-columns: 1fr; } }
.pf-kpi {
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.pf-kpi--green { background: var(--k-green-light); border-color: var(--k-green); }
.pf-kpi--green .pf-kpi__val { color: var(--k-green); }
.pf-kpi__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--k-ls-section);
  color: var(--k-gray-60); font-weight: var(--k-fw-medium);
}
.pf-kpi__val {
  font-family: var(--k-font-mono); font-size: 22px; font-weight: var(--k-fw-bold);
  color: var(--k-gray-20); letter-spacing: -0.01em;
}
.pf-kpi__val small { font-size: 12px; font-weight: var(--k-fw-medium); color: var(--k-gray-60); }
.pf-kpi__val--edit { display: flex; align-items: center; }
.pf-kpi__val--edit .pf-num { height: 36px; font-size: 18px; font-weight: var(--k-fw-bold); }
.pf-kpi__sub { font-family: var(--k-font-mono); font-size: 11px; color: var(--k-gray-60); }

/* — экспорт — */
.pf-export {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px; background: var(--k-gray-f6); border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius); margin-bottom: 8px;
}
.pf-export__hint { font-size: 12px; color: var(--k-gray-60); margin-left: 4px; }

/* ==========================================================================
   ОБЛАСТЬ ЗАПЕЧАТКИ — шаг 1 (поля) + чип пресета
   ========================================================================== */
.printarea-block {
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  background: var(--k-gray-f6);
}
.printarea-block__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--k-gray-ed);
}
.printarea-block__title {
  font-size: 15px;
  font-weight: var(--k-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--k-ls-section);
  color: var(--k-green);
}
.printarea-block__desc {
  font-size: 12px;
  color: var(--k-gray-60);
  line-height: 1.4;
}

.preset-chip__area {
  font-family: var(--k-font-mono);
  font-size: 10px;
  color: var(--k-gray-60);
  padding: 1px 6px;
  border-radius: var(--k-radius);
  background: var(--k-gray-f6);
}
.preset-chip.is-selected .preset-chip__area {
  background: var(--k-white);
  color: var(--k-green-dark);
}

/* ==========================================================================
   ШАГ 5 — БЛОК «ЗАПЕЧАТКА ОБЛАСТИ ПЕЧАТИ»
   ========================================================================== */
.pa-fill {
  border: 1px solid var(--k-green);
  border-radius: var(--k-radius);
  background: var(--k-white);
  padding: 20px;
  margin-bottom: 24px;
}
.pa-head { margin-bottom: 16px; }
.pa-head__title {
  display: flex; align-items: center; gap: 8px;
  color: var(--k-green);
  font-size: 16px; font-weight: var(--k-fw-bold);
  margin-bottom: 6px;
}
.pa-head__desc {
  font-size: 13px; line-height: 1.55; color: var(--k-gray-60);
  max-width: 760px; margin: 0;
}

.pa-area {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--k-gray-f6);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  margin-bottom: 16px;
}
.pa-area__fields { display: flex; align-items: flex-end; gap: 10px; }
.pa-area__fields .pf-lbl { gap: 6px; }
.pa-area__fields .pf-num { width: 110px; }
.pa-area__x { font-size: 18px; color: var(--k-gray-60); padding-bottom: 8px; }
.pa-area__stat { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.pa-area__stat-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--k-ls-section);
  color: var(--k-gray-60); font-weight: var(--k-fw-medium);
  display: inline-flex; align-items: center; justify-content: flex-end;
}
.pa-area__stat-label .help-tip { text-transform: none; letter-spacing: 0; }
.pa-area__stat-val { font-family: var(--k-font-mono); font-size: 15px; font-weight: var(--k-fw-bold); color: var(--k-gray-20); }
.pa-area__stat-val small { font-size: 11px; font-weight: var(--k-fw-medium); color: var(--k-gray-60); }

/* шкала заполнения */
.pa-bar-wrap { margin-bottom: 16px; }
.pa-bar {
  display: flex;
  height: 22px;
  width: 100%;
  border-radius: var(--k-radius);
  overflow: hidden;
  background: repeating-linear-gradient(45deg, var(--k-gray-f6), var(--k-gray-f6) 6px, #fff 6px, #fff 12px);
  border: 1px solid var(--k-gray-ed);
}
.pa-bar__seg { height: 100%; transition: width var(--k-dur) var(--k-ease); }
.pa-bar.is-over { border-color: var(--k-red); }
.pa-bar__legend { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.pa-bar__total { font-family: var(--k-font-mono); font-size: 15px; font-weight: var(--k-fw-bold); color: var(--k-green); }
.pa-bar__total.is-over { color: var(--k-red); }
.pa-bar__free { font-size: 12px; color: var(--k-gray-60); }

/* таблица */
.pa-table-scroll { overflow-x: auto; margin-bottom: 16px; }
.pa-table { min-width: 560px; }
.pa-table tfoot td { padding: 10px 12px; border-top: 2px solid var(--k-gray-ed); border-bottom: none; font-weight: var(--k-fw-bold); background: var(--k-gray-f6); }
.pa-row-off { opacity: 0.45; }
.pa-row-off:hover { opacity: 0.7; }
.pa-namecell { display: flex; align-items: center; gap: 8px; font-weight: var(--k-fw-medium); }
.pa-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.pa-over-txt { color: var(--k-red); }

/* KPI */
.pa-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 800px) { .pa-kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .pa-kpis { grid-template-columns: 1fr; } }
.pa-kpi {
  background: var(--k-white); border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.pa-kpi__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--k-ls-section);
  color: var(--k-gray-60); font-weight: var(--k-fw-medium);
  display: inline-flex; align-items: center;
}
.pa-kpi__label .help-tip { text-transform: none; letter-spacing: 0; }
.pa-kpi__val { font-family: var(--k-font-mono); font-size: 22px; font-weight: var(--k-fw-bold); color: var(--k-gray-20); letter-spacing: -0.01em; }
.pa-kpi__val small { font-size: 12px; font-weight: var(--k-fw-medium); color: var(--k-gray-60); }
.pa-kpi--accent { background: var(--k-green-light); border-color: var(--k-green); }
.pa-kpi--accent .pa-kpi__val { color: var(--k-green); }
.pa-kpi--over { background: #FCEAEA; border-color: var(--k-red); }
.pa-kpi--over .pa-kpi__val { color: var(--k-red); }

.pa-warn {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 10px 14px;
  background: #FCEAEA; border: 1px solid var(--k-red); border-radius: var(--k-radius);
  color: var(--k-red); font-size: 13px;
}

/* информационная заметка (Ink Area без изображения) */
.pa-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 14px; padding: 10px 14px;
  background: var(--k-green-light); border: 1px solid var(--color-border-card);
  border-radius: var(--k-radius);
  color: var(--k-gray-60); font-size: 13px; line-height: 1.5;
}
.pa-note svg { color: var(--k-green); flex-shrink: 0; margin-top: 1px; }

/* мини-тег статуса в ячейке имени логотипа */
.pa-tag {
  font-family: var(--k-font-mono);
  font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 3px;
  background: var(--k-gray-ed); color: var(--k-gray-60);
  border: 1px solid var(--color-border-input);
}
.pa-tag--warn { background: #FCEAEA; color: var(--k-red); border-color: var(--k-red); }

/* разделитель блоков шага 5 */
.pf-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 20px;
}
.pf-divider::before, .pf-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--k-gray-ed);
}
.pf-divider__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: var(--k-ls-section);
  color: var(--k-gray-60); font-weight: var(--k-fw-medium); white-space: nowrap;
}

/* пояснение к блоку «Запечатка области печати» */
.pf-areanote {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px; margin-bottom: 20px;
  background: var(--k-green-light); border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
}
.pf-areanote__icon { color: var(--k-green); flex-shrink: 0; margin-top: 1px; }
.pf-areanote__text { display: flex; flex-direction: column; gap: 8px; }
.pf-areanote__text p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--k-gray-20); }
.pf-areanote__text b { font-weight: var(--k-fw-medium); color: var(--k-green-dark); }

/* ==========================================================================
   CUSTOM SPINNER CONTROLS — кастомные кнопки ± для числовых полей
   Заменяют нативные стрелки браузера. Работают везде: Field, DimField, NumIn.
   ========================================================================== */

/* Скрываем нативные стрелки браузера глобально */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ── Базовая кнопка спиннера ──
   У кнопок нет собственной рамки: бордюр и скругление даёт группа-контейнер
   (.field__row--spin / .cup3d-dimfield__spin / .numin-wrap). Hover — нейтрально-серый,
   строго в пределах самой кнопки (наведение на «+» не подсвечивает «−» и наоборот). */
.spin-btn {
  flex-shrink: 0;
  width: 44px;
  padding: 0;
  border: none;
  background: var(--k-white);
  color: var(--k-gray-60);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: background var(--k-dur-micro) var(--k-ease),
              color var(--k-dur-micro) var(--k-ease);
}
.spin-btn:hover {
  background: var(--k-gray-ed);
  color: var(--k-gray-20);
}
.spin-btn:active {
  background: var(--k-gray-da);
  color: var(--k-gray-20);
}

/* Компактный вариант: уже, для боковой панели cup3d и ячеек таблицы */
.spin-btn--sm { width: 32px; }

/* ── Field component — spinner-режим ── */
/* Группа-спиннер (Field): единый бордюр-контейнер, белый фон, внутренние разделители */
.field__row--spin {
  border: 1px solid var(--k-gray-da);
  border-radius: var(--k-radius);
  background: var(--k-white);
  overflow: hidden;
  transition: border-color var(--k-dur-micro) var(--k-ease);
}
.field__row--spin:focus-within { border-color: var(--k-green); }
.field__row--spin .spin-btn--m { border-right: 1px solid var(--k-gray-da); }
.field__row--spin .spin-btn--p { border-left: 1px solid var(--k-gray-da); }

/* Обёртка вокруг input + suffix; suffix позиционируется относительно НЕЁЁ, не row */
.field__input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
}
.field__input-wrap .field__input {
  flex: 1;
  min-width: 0;
  width: 100%;
}

/* В spinner-режиме: input без собственных границ, белый фон, текст по центру (рамку даёт группа) */
.field__row--spin .field__input {
  border: none;
  border-radius: 0;
  background: var(--k-white);
  text-align: center;
  padding: 0 8px;
}
.field__row--spin .field__input:focus { border: none; }
.field__row--spin .field__input.has-suffix { padding-right: 32px; }

/* Suffix позиционируется относительно .field__input-wrap */
.field__row--spin .field__suffix { right: 8px; }

/* ── cup3d-dimfield — спиннер в боковой панели ── */
.cup3d-dimfield__spin {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--k-gray-da);
  border-radius: var(--k-radius);
  background: var(--k-white);
  overflow: hidden;
  transition: border-color var(--k-dur-micro) var(--k-ease);
}
.cup3d-dimfield__spin input {
  flex: 1;
  min-width: 0;
  width: auto;
  border: none;
  border-radius: 0;
  background: var(--k-white);
  text-align: center;
}
.cup3d-dimfield__spin:focus-within { border-color: var(--k-green); }
.cup3d-dimfield__spin .spin-btn--m { border-right: 1px solid var(--k-gray-da); }
.cup3d-dimfield__spin .spin-btn--p { border-left: 1px solid var(--k-gray-da); }

/* ── NumIn (ячейки таблицы printfill) ── */
.numin-wrap {
  display: inline-flex;
  align-items: stretch;
  min-width: 120px;
  border: 1px solid var(--k-gray-da);
  border-radius: var(--k-radius);
  background: var(--k-white);
  overflow: hidden;
  transition: border-color var(--k-dur-micro) var(--k-ease);
}
.pf-num--spin {
  flex: 1;
  min-width: 0;
  width: auto;
  height: 44px;
  border: none;
  border-radius: 0;
  background: var(--k-white);
  text-align: center;
}
.numin-wrap:focus-within { border-color: var(--k-green); }
.numin-wrap .spin-btn--m { border-right: 1px solid var(--k-gray-da); }
.numin-wrap .spin-btn--p { border-left: 1px solid var(--k-gray-da); }

/* Компактный вариант: кнопки sm, инпут авто-ширина по ch */
.numin-wrap--compact {
  min-width: 0;
  width: auto;
  display: inline-flex;
}
.numin-wrap--compact .pf-num--spin {
  min-width: 0;
  width: auto;
  text-align: center;
}

/* ── pf-seg__opt — кнопка + HelpTip как единый блок (без визуального разрыва) ── */
.pf-seg__opt {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: calc(var(--k-radius) - 1px);
  transition: background var(--k-dur-micro) var(--k-ease);
}
/* активная опция: весь блок (кнопка + «?») заливается зелёным */
.pf-seg__opt:has(.pf-seg__btn.is-active) { background: var(--k-green); }
/* кнопка внутри блока: своя заливка снимается, фон несёт обёртка */
.pf-seg__opt .pf-seg__btn { background: transparent; padding-right: 6px; }
.pf-seg__opt .pf-seg__btn.is-active { background: transparent; color: var(--k-white); }
.pf-seg__opt:has(.pf-seg__btn.is-active) .pf-seg__btn:hover { color: var(--k-white); }
/* «?» сидит внутри того же блока, разделителя нет */
.pf-seg__opt .help-tip {
  margin-left: 0;
  padding-right: 8px;
  align-self: stretch;
  align-items: center;
}
.pf-seg__opt .help-tip__trigger {
  width: 15px;
  height: 15px;
  font-size: 9px;
  background: transparent;
  border-color: var(--k-gray-da);
  color: var(--k-gray-60);
}
.pf-seg__opt .help-tip:hover .help-tip__trigger {
  background: var(--k-green);
  border-color: var(--k-green);
  color: var(--k-white);
}
/* в активном (зелёном) блоке «?» — белый контур, при наведении инвертируется */
.pf-seg__opt:has(.pf-seg__btn.is-active) .help-tip__trigger {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--k-white);
}
.pf-seg__opt:has(.pf-seg__btn.is-active) .help-tip:hover .help-tip__trigger {
  background: var(--k-white);
  border-color: var(--k-white);
  color: var(--k-green);
}

/* ── pf-details — раскрывающаяся инструкция в блоке параметров ── */
.pf-details {
  margin-top: 10px;
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  overflow: hidden;
}
.pf-details__summary {
  list-style: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: var(--k-fw-medium);
  color: var(--k-green);
  background: var(--k-white);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background var(--k-dur-micro) var(--k-ease);
}
.pf-details__summary::-webkit-details-marker { display: none; }
.pf-details__summary::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--k-green);
  transition: transform var(--k-dur-micro) var(--k-ease);
  flex-shrink: 0;
}
.pf-details[open] .pf-details__summary::before {
  transform: rotate(90deg);
}
.pf-details__summary:hover { background: var(--k-green-light); }
.pf-details__body {
  padding: 12px 14px;
  background: var(--k-white);
  border-top: 1px solid var(--k-gray-ed);
}

/* ── pf-deflist — dl-таблица определений внутри details ── */
.pf-deflist {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-size: 12px;
  line-height: 1.55;
}
.pf-deflist dt {
  font-family: var(--k-font-mono);
  font-size: 11px;
  font-weight: var(--k-fw-bold);
  color: var(--k-green-dark);
  white-space: nowrap;
  padding-top: 1px;
}
.pf-deflist dd {
  margin: 0;
  color: var(--k-gray-60);
}

/* ── Разделители колонок в шапке таблицы красок (Краски / запечатка) ── */
.pf-table thead tr {
  background: var(--k-gray-f6);
}
.pf-table thead th + th {
  border-left: 1px solid var(--k-gray-da);
}
/* Запечатка: то же для таблицы pa-table */
.pa-table thead tr {
  background: var(--k-gray-f6);
}
.pa-table thead th + th {
  border-left: 1px solid var(--k-gray-da);
}

/* ==========================================================================
   SECTION NAV — единый блок навигации внизу каждого шага
   (контекстный зелёный CTA + чипы быстрого перехода к разделам)
   ========================================================================== */
.section-nav {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--k-gray-ed);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* — Основной CTA: ведёт к следующему разделу — */
.section-nav__cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--k-green);
  color: var(--k-white);
  border: none;
  border-radius: var(--k-radius);
  padding: 16px 24px;
  font-family: var(--k-font);
  font-size: 13px;
  font-weight: var(--k-fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--k-dur) var(--k-ease);
}
.section-nav__cta:hover:not(:disabled) { background: var(--k-green-dark); }
.section-nav__cta:disabled { opacity: 0.45; cursor: not-allowed; }

/* — Быстрый переход к разделам — */
.section-nav__jump {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.section-nav__jump-label {
  font-size: 11px;
  font-weight: var(--k-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-gray-60);
}
.section-nav__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.section-nav__chip {
  flex: 1 1 0;
  min-width: 130px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  background: var(--k-white);
  border: 1px solid var(--k-gray-ed);
  border-radius: var(--k-radius);
  font-family: var(--k-font);
  font-size: 12px;
  font-weight: var(--k-fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--k-gray-20);
  cursor: pointer;
  transition: border-color var(--k-dur) var(--k-ease), background var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease);
}
.section-nav__chip:hover:not(:disabled) {
  border-color: var(--k-green);
  background: var(--k-green-light);
  color: var(--k-green-dark);
}
.section-nav__chip.is-current {
  background: var(--k-green);
  border-color: var(--k-green);
  color: var(--k-white);
  cursor: default;
}
.section-nav__chip:disabled:not(.is-current) {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 600px) {
  .section-nav__chip { min-width: calc(50% - 4px); }
}