/* ============ UI-kit «3Д Цех» — общий слой (29.09.2026) ============
   Токены + базовые компоненты, общие для /calc, /generate, /plastic.
   Источник правды: calc.css (дизайн-система «3Д Цех»).
   Страницы подключают ui-kit.css ПЕРВЫМ, затем свой слой (plastic.css и т.п.),
   где остаются ТОЛЬКО page-специфика. Дублировать токены/базовые классы
   в page-слое нельзя — это источник дрейфа (аудит 28.09, п. 26). */

/* ============ Токены дизайн-системы ============ */
:root {
  --primary: #e31e24;
  --primary-hover: #c4171d;
  --text: #1a1d21;
  --text-secondary: #5b6470;
  --border: #e2e6ea;
  --bg: #ffffff;
  --bg-section: #f6f7f9;
  --success: #178a4c;
  --error: #d92d20;
  --hairline: #c9ced4;
  --overlay: rgba(0,0,0,0.4);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px;
  --fs-18: 18px; --fs-24: 24px; --fs-32: 32px; --fs-48: 48px;

  --space-4: 4px; --space-8: 8px; --space-12: 12px;
  --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-40: 40px;
  --space-48: 48px; --space-64: 64px;

  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-pill: 999px; /* пилюли: бейджи, чипы (29.09, аудит п. 30) */

  --shadow-card: 0 1px 6px rgba(0,0,0,0.06);
  --shadow-dropdown: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-modal: 0 8px 32px rgba(0,0,0,0.14);

  --transition: 150ms ease-out;
  --transition-slow: 250ms ease-out;

  --btn-lg: 48px; --btn-md: 40px; --btn-sm: 32px;
  --input-height: 40px;
  --switch-w: 44px; --switch-h: 24px;
  --switch-knob: 20px; --switch-offset: 2px;
  --touch-target: 44px;
  --container-max: 1200px;
  --swatch-size: 40px;
  --swatch-touch: 48px;

  --dim-line: 1px;
  --contour-line: 1.5px;

  --ring-w: 2px;
  --border-w: 1px;
  --icon: 20px;
  --control: 20px;
  --border-accent: 4px;
  --preview-h: 200px;
  --preview-h-lg: 500px;
  --toast-w: 360px;
  --modal-w: 480px;
  --col-form: 640px;
  --header-h: 56px;

  --z-content: 0;
  --z-bar: 100;
  --z-header: 200;
  --z-chat: 300;
  --z-toast: 400;
  --z-modal: 500;
}

/* ============ База ============ */
*, *::before, *::after { box-sizing: border-box; }

/* hidden всегда скрывает элемент, даже если класс задаёт display: flex/grid. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-16);
  color: var(--text); background: var(--bg-section); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, dl, dd, fieldset { margin: 0; padding: 0; }
fieldset { border: none; min-width: 0; }
button { font-family: var(--font); }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-24); }
.icon { width: var(--icon); height: var(--icon); flex-shrink: 0; }
.tnum, .side-price, .mobile-bar-price, .input[type="number"] { font-feature-settings: "tnum"; }

/* ============ Страница ============ */
.page { padding: var(--space-48) 0 calc(var(--space-64) + var(--btn-lg) + var(--space-24)); }
.page-title { font-size: var(--fs-32); font-weight: 700; margin-bottom: var(--space-8); }
.page-sub { font-size: var(--fs-16); color: var(--text-secondary); margin-bottom: var(--space-32); }

/* ============ Секции-карточки ============ */
.form-section {
  background: var(--bg); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: var(--space-24);
  margin-bottom: var(--space-24);
  display: flex; flex-direction: column;
}
.form-section { scroll-margin-top: calc(var(--header-h) + var(--space-16)); }
.form-section.is-locked { opacity: 0.6; pointer-events: none; }
.section-title {
  font-size: var(--fs-18); font-weight: 600; margin-bottom: var(--space-16);
  display: flex; align-items: center; gap: var(--space-12);
}
/* Бейдж шага: круг 24×24, fs12, fw600 */
.step {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--fs-24); height: var(--fs-24); border-radius: 50%;
  background: var(--bg-section); color: var(--text-secondary);
  font-size: var(--fs-12); font-weight: 600; flex-shrink: 0;
}
.step--icon .icon { width: var(--fs-14); height: var(--fs-14); color: var(--text-secondary); flex-shrink: 0; }

/* ============ Поля ввода ============ */
.input-group { display: flex; flex-direction: column; gap: var(--space-4); min-width: 240px; flex: 1; }
.input-label { font-size: var(--fs-14); font-weight: 500; }
.input {
  height: var(--input-height); padding: 0 var(--space-12);
  border: var(--border-w) solid var(--border); border-radius: var(--radius-sm);
  font: var(--fs-14) var(--font); color: var(--text); background: var(--bg);
  transition: border-color var(--transition); width: 100%;
  min-height: var(--touch-target);
}
.input--textarea { height: auto; min-height: var(--btn-lg); padding: var(--space-12); resize: vertical; }
.input:focus { outline: none; border-color: var(--primary); }
.input:focus-visible { outline: var(--ring-w) solid var(--primary); outline-offset: var(--ring-w); }
.input:disabled { background: var(--bg-section); color: var(--text-secondary); opacity: 0.6; }
.input--error { border-color: var(--error); }
.field-error { font-size: var(--fs-12); color: var(--error); }
.select-wrapper { position: relative; display: flex; align-items: center; }
.select-wrapper .input { appearance: none; -webkit-appearance: none; padding-right: var(--space-32); }
.select-arrow { position: absolute; right: var(--space-12); pointer-events: none; color: var(--text-secondary); }

/* Кастомный дропдаун (нативный select скрыт, UI поверх) — выпадающая рамка по киту,
   не системная. Используется там, где важен вид (селектор склада /plastic, 29.09). */
.select-custom { position: relative; min-width: 0; width: 100%; align-self: flex-start; }
.select-custom__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); width: 100%; cursor: pointer; text-align: left; }
.select-custom__trigger .select-arrow { position: static; flex-shrink: 0; pointer-events: none; }
.select-custom__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-custom__menu {
  position: absolute; top: calc(100% + var(--space-4)); left: 0; right: 0; z-index: var(--z-modal);
  background: var(--bg); border: var(--border-w) solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-dropdown); max-height: 240px; overflow-y: auto; overflow-x: hidden; padding: var(--space-4);
}
.select-custom__menu.select-custom--up { top: auto; bottom: calc(100% + var(--space-4)); }
.select-custom__opt { padding: var(--space-8) var(--space-12); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-14); color: var(--text); }
.select-custom__opt.is-active { background: var(--bg-section); }
.select-custom__opt.is-selected { color: var(--primary); font-weight: 500; }
.select-custom__opt.is-disabled { opacity: 0.4; cursor: default; }

/* ============ Кнопки ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-8); font-weight: 500; border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--transition); border: none;
  text-decoration: none; white-space: nowrap; min-height: var(--touch-target);
  font-size: var(--fs-14); position: relative; overflow: hidden;
}
.btn--lg { height: var(--btn-lg); padding: 0 var(--space-24); }
.btn--md { height: var(--btn-md); padding: 0 var(--space-16); }
.btn--sm { height: var(--btn-sm); padding: 0 var(--space-12); font-size: var(--fs-12); }
.btn--primary { background: var(--primary); color: var(--bg); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--secondary { background: var(--bg); color: var(--primary); border: var(--ring-w) solid var(--primary); }
.btn--secondary:hover { background: var(--primary); color: var(--bg); }
.btn--ghost { background: transparent; color: var(--primary); }
.btn--ghost:hover { background: var(--bg-section); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn:focus-visible { outline: var(--ring-w) solid var(--primary); outline-offset: var(--ring-w); }
/* Loading (shimmer) — состояние ожидания на кнопке */
.btn--loading::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: translateX(-100%); animation: shimmer 1.5s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* ============ Карточка ============ */
.card { background: var(--bg); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-24); }

/* ============ Тосты ============ */
.toast-container {
  position: fixed; bottom: var(--space-24); left: var(--space-24); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-8);
}
.toast {
  width: var(--toast-w); max-width: calc(100vw - var(--space-48)); background: var(--bg);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-dropdown);
  padding: var(--space-16); display: flex; align-items: center; gap: var(--space-12);
  animation: toast-in var(--transition-slow); border-left: var(--border-accent) solid transparent;
  font-size: var(--fs-14);
}
.toast--success { border-left-color: var(--success); }
.toast--error { border-left-color: var(--error); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(var(--space-16)); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ Модалка ============ */
.modal-overlay {
  position: fixed; inset: 0; background: var(--overlay);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-modal); animation: fade-in var(--transition-slow); padding: var(--space-24);
}
.modal {
  background: var(--bg); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal); padding: var(--space-32);
  max-width: var(--modal-w); width: 100%; animation: modal-in var(--transition-slow);
  position: relative; display: flex; flex-direction: column; gap: var(--space-16);
}
.modal-title { font-size: var(--fs-24); font-weight: 700; }
.modal-sub { font-size: var(--fs-14); color: var(--text-secondary); }
.modal-submit { width: 100%; }
.modal-close {
  position: absolute; top: var(--space-12); right: var(--space-12);
  background: transparent; border: none; cursor: pointer; color: var(--text-secondary);
  min-width: var(--touch-target); min-height: var(--touch-target);
  display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--bg-section); }
.modal-close:focus-visible { outline: var(--ring-w) solid var(--primary); outline-offset: var(--ring-w); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(var(--space-16)); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ Скелетоны ============ */
.skeleton { background: var(--border); border-radius: var(--radius-sm); animation: pulse 1.5s ease-in-out infinite; }
.skeleton--title { height: var(--fs-24); width: 60%; }
.skeleton--text { height: var(--fs-16); width: 100%; }
.skeleton--text-short { height: var(--fs-16); width: 80%; }
.skeleton--input { height: var(--input-height); }
.skeleton--btn { height: var(--btn-md); width: 140px; }
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }