/*
 * kisys.ru — Дизайн-система
 * На базе Perplexity (2025-2026)
 *
 * ДОЗИРОВКА ЦВЕТА:
 * #1FB8CD — точечно: контурная кнопка (текст + рамка), не заливка.
 * 90-95% — нейтральные тона.
 * Кнопка отправки в чате — тёмная, компактная (32px круг).
 * Фокус-кольцо — apricot (#F5C1A9).
 *
 * ШРИФТ: Inter (аналог Sohne).
 * СКРУГЛЕНИЯ: маленькие (5px) = «инструмент».
 * АНИМАЦИИ: 150ms, Material standard curve.
 */

/* === Переменные === */
:root {
  --color-primary: #1FB8CD;
  --color-primary-hover: #2CA0AB;
  --color-accent-warm: #F5C1A9;
  --color-bg: #FBFAF4;
  --color-bg-secondary: #F3F3EE;
  --color-bg-card: #FFFFFF;
  --color-text: #000000;
  --color-text-secondary: #13343B;
  --color-border: #EAEEEF;
  --color-border-warm: #E4E3D4;
  --t-100: #DEF7F9;
  --t-200: #92DCE2;
  --t-400: #2CA0AB;
  --t-600: #1A6872;
  --t-700: #114F56;
  --t-800: #0B363C;
  --color-red: #BF505C;
  --color-olive: #707C36;
  --color-apricot: #FFD2A6;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 20px;
  --r-full: 9999px;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-hover: 0 2px 8px rgba(0,0,0,0.1);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-focus: 0 0 0 2px rgba(245,193,169,0.25);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 150ms;
}

/* === Сброс === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden; /* SPA управляет скроллом внутри */
}

body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Главная обёртка SPA === */
.app {
  display: flex;
  flex-direction: column;
  height: 100dvh; /* динамическая высота, учитывает мобильные браузеры */
  max-width: 100%;
  overflow: hidden;
}

/* === Шапка === */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border-warm);
  background: var(--color-bg);
  flex-shrink: 0;
  z-index: 50;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-logo {
  height: 18px;
  width: auto;
  display: block;
}

/* Кнопка «Назад / Новый чат» — появляется в режиме чата */
.header-back {
  display: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  background: var(--color-bg-secondary);
  border: 1px solid transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all var(--dur) var(--ease);
  flex-shrink: 0;
}
.header-back:hover {
  background: var(--color-border-warm);
  color: var(--color-text);
}
.header-back svg {
  width: 16px;
  height: 16px;
}
/* На мобилке текст кнопки скрыт — только иконка */
.back-text { display: none; }

/* В режиме чата показываем кнопку назад */
.app.chat-mode .header-back { display: flex; }

/* Кнопка ⓘ */
.btn-info {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur) var(--ease);
  flex-shrink: 0;
  border-radius: 50%;
}
.btn-info:hover { background: rgba(33,128,141,0.08); }
.btn-info svg { width: 22px; height: 22px; display: block; }

/* === Основной контент === */
.main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* === Стартовый экран === */
.screen-start {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.hero-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin-bottom: 6px;
}

.hero-sub {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}

/* Быстрые фильтры (чипы) */
.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.chip {
  padding: 5px 10px;
  border-radius: var(--r-full);
  background: var(--color-bg-secondary);
  font-size: 11px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  border: 1px solid transparent;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.chip:hover { background: var(--color-border-warm); color: var(--color-text); }
.chip:active { transform: scale(0.96); }

/* Секция «Готовые решения» */
.solutions-label {
  font-size: 10px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  opacity: 0.6;
}

/* === Карточки решений === */
.cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card {
  background: var(--color-bg-card);
  border-radius: var(--r-md);
  padding: 14px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border-warm);
  transition: all var(--dur) var(--ease);
}
.card:hover { box-shadow: var(--shadow-hover); }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.card h3 {
  font-size: 14px;
  font-weight: 600;
}

.card p {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}

.card-actions {
  display: flex;
  gap: 6px;
}

/* === Бейджи === */
.badge-demo {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
}

.badge-pro {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-accent-warm);
  border: 1px solid rgba(245,193,169,0.3);
  background: rgba(245,193,169,0.08);
}

/* === Кнопки === */
.btn {
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  border: none;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.btn-primary:hover {
  background: rgba(31,184,205,0.06);
  border-color: var(--color-primary-hover);
  color: var(--color-primary-hover);
}

.btn-secondary {
  background: var(--color-bg-secondary);
  color: var(--color-text);
}
.btn-secondary:hover { background: var(--color-border-warm); }

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-outline:hover { border-color: var(--color-text); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
.btn-ghost:hover { background: var(--color-bg-secondary); }

.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 24px; font-size: 16px; }
.btn-pill { border-radius: var(--r-full); }
.btn-icon { width: 40px; padding: 0; border-radius: 50%; }
.btn-full { width: 100%; }

/* === Нижняя панель ввода === */
.input-panel {
  padding: 8px 12px 10px;
  background: var(--color-bg);
  flex-shrink: 0;
  z-index: 40;
}

/* Карточка-инпут (Perplexity-стиль) */
.input-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-warm);
  border-radius: 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.02);
  padding: 12px 14px 8px;
  transition: all var(--dur) var(--ease);
}
.input-card:focus-within {
  border-color: var(--color-accent-warm);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08), var(--shadow-focus);
}

/* Компактный режим (в чате) */
.input-card.compact {
  padding: 8px 12px 6px;
  border-radius: 12px;
}
.input-card.compact .input-textarea { font-size: 14px; min-height: 20px; }

/* Текстовое поле */
.input-textarea {
  width: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: var(--font);
  background: transparent;
  color: var(--color-text);
  resize: none;
  line-height: 1.4;
  min-height: 24px;
  max-height: 120px;
}
.input-textarea::placeholder { color: var(--color-text-secondary); opacity: 0.35; }

/* Ряд кнопок-действий под текстом */
.input-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding-top: 4px;
}
.input-actions .spacer { flex: 1; }

/* Маленькая круглая кнопка действия */
.input-act {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur) var(--ease);
  flex-shrink: 0;
}
.input-act:hover { background: var(--color-bg-secondary); color: var(--color-text); }

/* Кнопка «Подбор» — специальная с текстом */
.input-act-selection {
  width: auto;
  padding: 0 8px;
  gap: 3px;
  border-radius: var(--r-full);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
}
.input-act-selection .selection-count {
  color: var(--color-primary);
  font-weight: 600;
}

/* Кнопка отправки — лёгкая, контурная */
.input-act-send {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-warm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--dur) var(--ease);
}
.input-act-send:hover { border-color: var(--color-text); color: var(--color-text); }
/* Активное состояние — когда есть текст */
.input-act-send.active {
  border-color: var(--color-text);
  background: var(--color-text);
  color: white;
}

/* === Экран чата === */
.screen-chat { display: none; }
.app.chat-mode .screen-start { display: none; }
.app.chat-mode .screen-chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.app.chat-mode .main { display: flex; flex-direction: column; }

.messages {
  flex: 1;
  padding: 12px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.msg { margin-bottom: 12px; }

.msg-user {
  background: var(--color-bg-secondary);
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.5;
  max-width: 85%;
  margin-left: auto;
}

.msg-ai {
  padding: 0 2px;
  font-size: 14px;
  line-height: 1.6;
  max-width: 95%;
}
.msg-ai p { margin-bottom: 8px; }
.msg-ai p:last-child { margin-bottom: 0; }

/* Карточки продуктов в чате */
.products-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 12px;
  scrollbar-width: none; /* Firefox */
}
.products-grid::-webkit-scrollbar { display: none; }

.product-card {
  background: var(--color-bg-card);
  border-radius: var(--r-md);
  border: 1px solid var(--color-border-warm);
  overflow: hidden;
  transition: all var(--dur) var(--ease);
  min-width: 200px;
  flex-shrink: 0;
}
.product-card:hover { box-shadow: var(--shadow-hover); }

.product-img {
  height: 120px;
  background: var(--color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  font-size: 11px;
}

.product-body { padding: 12px; }
.product-body h4 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.product-body .price { font-size: 16px; font-weight: 700; margin-bottom: 4px; color: var(--color-text); }
.product-body .desc { font-size: 12px; color: var(--color-text-secondary); line-height: 1.4; margin-bottom: 10px; }
.product-body .card-actions { display: flex; gap: 4px; }

/* === SEO-карточка товара === */
.screen-product { display: none; }
.app.product-mode .screen-start { display: none; }
.app.product-mode .screen-chat { display: none; }
.app.product-mode .screen-product { display: block; }

.product-page {
  padding: 0;
}

/* Фото товара */
.pp-photo {
  height: 200px;
  background: var(--color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  font-size: 12px;
}

.pp-content {
  padding: 16px;
}

/* Хлебные крошки */
.pp-breadcrumb {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}
.pp-breadcrumb span {
  cursor: pointer;
}
.pp-breadcrumb span:hover {
  color: var(--color-text);
}
.pp-breadcrumb .sep {
  opacity: 0.4;
  cursor: default;
}
.pp-breadcrumb .sep:hover {
  color: var(--color-text-secondary);
}

/* Заголовки */
.pp-h1 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 4px;
}
.pp-h2 {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
}
.pp-h2 .brand {
  font-weight: 500;
}
.pp-h2 .dot {
  opacity: 0.3;
}

/* Цена + наличие */
.pp-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.pp-price {
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
}
.pp-avail {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: rgba(112,124,54,0.1);
  color: var(--color-olive);
  font-weight: 500;
}

/* Краткое описание */
.pp-desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Характеристики */
.pp-specs {
  background: var(--color-bg-secondary);
  border-radius: var(--r-md);
  padding: 12px;
  margin-bottom: 16px;
}
.pp-specs-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}
.pp-spec {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid var(--color-border);
}
.pp-spec:last-child {
  border-bottom: none;
}
.pp-spec-key {
  color: var(--color-text-secondary);
}
.pp-spec-val {
  font-weight: 500;
}

/* Кнопки действий */
.pp-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

/* SEO-текст */
.pp-seo {
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}
.pp-seo h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}
.pp-seo-block {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}
.pp-seo-block:last-child {
  margin-bottom: 0;
}
.pp-seo-block p {
  margin-bottom: 4px;
}
.pp-seo-block p:last-child {
  margin-bottom: 0;
}

/* Похожие товары */
.pp-related {
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
  margin-top: 16px;
}
.pp-related-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.pp-related .product-card {
  min-width: 160px;
}
.pp-related .product-img {
  height: 80px;
  font-size: 10px;
}
.pp-related .product-body {
  padding: 8px;
}
.pp-related .product-body h4 {
  font-size: 12px;
}
.pp-related .product-body .price {
  font-size: 14px;
}

/* Фото: на мобилке — полная ширина вверху, десктопная версия скрыта */
.pp-photo-desktop { display: none; }
.pp-photo-mobile { display: flex; }

/* Двухколоночный layout — на мобилке просто колонка */
.pp-layout {
  display: flex;
  flex-direction: column;
}
.pp-info {
  width: 100%;
}

/* Кнопка назад в режиме карточки */
.app.product-mode .header-back { display: flex; }

/* === Подбор (sheet) === */
.selection-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 10%;
  background: var(--color-bg-card);
  border-top: 2px solid var(--color-border-warm);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  z-index: 60;
  transform: translateY(100%);
  transition: transform 300ms var(--ease);
}
.selection-sheet.open { transform: translateY(0); }

/* Затемнение фона */
.selection-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.2);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease);
}
.selection-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.selection-header {
  padding: 12px 16px 8px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
}
.selection-header-title {
  font-size: 15px;
  font-weight: 600;
}
.selection-header-count {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-left: 6px;
}
.selection-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 4px;
  transition: color var(--dur) var(--ease);
}
.selection-close:hover { color: var(--color-text); }

/* Таблица подбора */
.selection-items {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

.selection-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.selection-table thead {
  position: sticky;
  top: 0;
  background: var(--color-bg-card);
  z-index: 1;
}

.selection-table th {
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-border-warm);
  white-space: nowrap;
}
.selection-table th.col-qty,
.selection-table th.col-price,
.selection-table th.col-sum { text-align: right; }
.selection-table th.col-del { width: 28px; }

.selection-table td {
  padding: 8px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

/* Колонка «Фото» */
.sel-photo {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* Колонка «Наименование» */
.sel-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
.sel-desc {
  font-size: 10px;
  color: var(--color-text-secondary);
  margin-top: 1px;
}

/* Числовые колонки — правое выравнивание */
.col-qty, .col-price, .col-sum { text-align: right; white-space: nowrap; }
.col-sum { font-weight: 500; }

/* Кнопка удаления */
.sel-remove {
  background: none;
  border: none;
  color: var(--color-red);
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
  transition: opacity var(--dur) var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sel-remove:hover { opacity: 0.7; }

/* Наличие */
.sel-avail {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--r-full);
  background: rgba(112,124,54,0.1);
  color: var(--color-olive);
  font-weight: 500;
  white-space: nowrap;
}

/* Мобилка — скрываем некоторые колонки */
.col-photo { width: 44px; }
.col-article { display: none; }

@media (min-width: 768px) {
  .selection-table { font-size: 13px; }
  .col-article { display: table-cell; }
  .sel-photo { width: 44px; height: 44px; }
}

/* Прилипающий блок «Итого» */
.selection-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  padding: 10px 16px;
  background: var(--color-bg-card);
}
.selection-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.selection-total {
  font-size: 13px;
  font-weight: 600;
}
.selection-total-count {
  font-size: 11px;
  color: var(--color-text-secondary);
}

/* Дисклеймер в подборе */
.selection-disclaimer {
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-bottom: 8px;
  opacity: 0.7;
}

/* Галочка подтверждения */
.selection-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  margin-bottom: 10px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.selection-confirm input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* Неактивная кнопка */
.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* === Оверлей ⓘ === */
.info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 70;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 16px 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease);
}
.info-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.info-modal {
  background: var(--color-bg-card);
  border-radius: var(--r-lg);
  padding: 20px;
  width: 100%;
  max-width: 340px;
  box-shadow: var(--shadow-elevated);
  transform: translateY(-10px) scale(0.97);
  transition: transform 200ms var(--ease);
}
.info-overlay.open .info-modal {
  transform: translateY(0) scale(1);
}

.info-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* Табы О нас / Контакты */
.info-tabs {
  display: flex;
  gap: 0;
  background: var(--color-bg-secondary);
  border-radius: var(--r-full);
  padding: 2px;
}
.info-tab {
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font);
  transition: all var(--dur) var(--ease);
}
.info-tab.active {
  background: var(--color-bg-card);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
}

.info-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 4px;
}
.info-close:hover { color: var(--color-text); }

.info-tab-content { display: none; }
.info-tab-content.active { display: block; }

.info-about {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.info-about-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}
.info-about p { margin-bottom: 12px; }

.info-compare {
  font-size: 12px;
  background: var(--color-bg-secondary);
  padding: 10px;
  border-radius: var(--r-md);
  margin-bottom: 12px;
}
.info-compare-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}
.info-compare-row.highlight {
  color: var(--color-olive);
  font-weight: 500;
}

.info-contacts {
  font-size: 13px;
  line-height: 1.8;
}
.info-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.info-contact-item:last-child { border-bottom: none; }
.info-contact-item span.icon { font-size: 16px; flex-shrink: 0; }
.info-contact-item a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.info-contact-item a:hover { text-decoration: underline; }

/* === Кнопка импорта в шапке === */
.btn-import {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: all var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn-import:hover { color: var(--color-text); background: var(--color-bg-secondary); }

/* === Оверлей импорта === */
.import-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 75;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.import-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.import-modal {
  background: var(--color-bg-card);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  transform: translateY(-10px) scale(0.97);
  transition: transform 200ms var(--ease);
}
.import-overlay.open .import-modal {
  transform: translateY(0) scale(1);
}

.import-header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
}
.import-title { font-size: 16px; font-weight: 600; }
.import-subtitle { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }
.import-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 4px;
}
.import-close:hover { color: var(--color-text); }

/* Индикатор шагов */
.import-steps {
  padding: 12px 20px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}
.import-step {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border: 1px solid var(--color-border-warm);
  background: var(--color-bg);
  color: var(--color-text-secondary);
}
.import-step.active {
  background: var(--color-text);
  color: white;
  border-color: var(--color-text);
  font-weight: 600;
}
.import-step.done {
  background: var(--color-olive);
  color: white;
  border-color: var(--color-olive);
}
.import-step-label { color: var(--color-text-secondary); }
.import-step-label.active { font-weight: 500; color: var(--color-text); }
.import-step-arrow { color: var(--color-border-warm); }

/* Тело */
.import-body {
  padding: 16px 20px;
  min-height: 200px;
}
.import-step-content { display: none; }
.import-step-content.active { display: block; }

/* Зона перетаскивания */
.import-dropzone {
  border: 2px dashed var(--color-border-warm);
  border-radius: var(--r-md);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.import-dropzone:hover,
.import-dropzone.dragover {
  border-color: var(--color-primary);
  background: rgba(31,184,205,0.03);
}
.import-dropzone-text {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: 10px;
}
.import-dropzone-or {
  font-size: 12px;
  color: var(--color-text-secondary);
  opacity: 0.5;
  margin: 8px 0;
}

/* Подсказка маппинга */
.import-hint {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

/* Таблица маппинга */
.import-mapping-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}
.import-mapping-table th {
  padding: 6px 0;
  text-align: left;
  font-size: 11px;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  font-weight: 500;
}
.import-mapping-table td {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.import-mapping-table td:nth-child(2) {
  text-align: center;
  color: var(--color-text-secondary);
  width: 24px;
}

.import-col-name {
  background: var(--color-bg-secondary);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: 12px;
  display: inline-block;
}
.import-col-sample {
  font-size: 10px;
  color: var(--color-text-secondary);
  opacity: 0.6;
  margin-top: 2px;
}

.import-mapping-table select {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--color-border-warm);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-family: var(--font);
  background: var(--color-bg-card);
  outline: none;
  color: var(--color-text);
}
.import-mapping-table select:focus {
  border-color: var(--color-primary);
}

/* Статистика превью */
.import-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.import-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.import-stat-row:last-child { border-bottom: none; }
.import-stat-label { color: var(--color-text-secondary); }
.import-stat-value { font-weight: 600; }
.import-stat-value.green { color: var(--color-olive); }

.import-snapshot-note {
  padding: 8px 10px;
  background: var(--color-bg-secondary);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Результат */
.import-done {
  text-align: center;
  padding: 20px 0;
}
.import-done-icon { font-size: 32px; margin-bottom: 8px; }
.import-done-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.import-done-text { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; }

/* Подвал */
.import-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.import-footer .spacer { flex: 1; }

/* Кнопка ghost */
.btn-ghost {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  transition: all var(--dur) var(--ease);
}
.btn-ghost:hover { background: var(--color-bg-secondary); color: var(--color-text); }

/* Загрузка — спиннер */
.import-loading {
  text-align: center;
  padding: 40px 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* === Шторка оформления === */
.checkout-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85vh;
  background: var(--color-bg-card);
  border-top: 2px solid var(--color-border-warm);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  z-index: 65;
  transform: translateY(100%);
  transition: transform 300ms var(--ease);
}
.checkout-sheet.open { transform: translateY(0); }

.checkout-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.2);
  z-index: 62;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease);
}
.checkout-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.checkout-header {
  padding: 14px 16px 10px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
}
.checkout-header-title {
  font-size: 16px;
  font-weight: 600;
}
.checkout-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 4px;
  transition: color var(--dur) var(--ease);
}
.checkout-close:hover { color: var(--color-text); }

.checkout-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* Сводка заказа */
.checkout-summary {
  background: var(--color-bg-secondary);
  border-radius: var(--r-md);
  padding: 12px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.6;
}
.checkout-summary-total {
  font-weight: 600;
  font-size: 15px;
  margin-top: 4px;
}

/* Форма */
.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.checkout-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}
.checkout-field input,
.checkout-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--dur) var(--ease);
  -webkit-appearance: none;
}
.checkout-field input:focus,
.checkout-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
.checkout-field input::placeholder,
.checkout-field textarea::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.5;
}
.checkout-field textarea {
  resize: vertical;
  min-height: 48px;
}

/* Сообщение об ошибке */
.checkout-field.error input,
.checkout-field.error textarea {
  border-color: var(--color-red);
}
.checkout-field .field-error {
  font-size: 11px;
  color: var(--color-red);
  margin-top: 3px;
  display: none;
}
.checkout-field.error .field-error {
  display: block;
}

.checkout-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  padding: 12px 16px;
  background: var(--color-bg-card);
}

/* Состояние кнопки — отправка */
.btn-full.sending {
  opacity: 0.6;
  pointer-events: none;
}

/* Сообщение об успехе */
.checkout-success {
  text-align: center;
  padding: 24px 16px;
}
.checkout-success-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.checkout-success-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}
.checkout-success-text {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

@media (min-width: 768px) {
  .checkout-sheet {
    max-width: 480px;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
  }
  .checkout-sheet.open {
    transform: translateX(-50%) translateY(0);
  }
}

/* === Демо-баннер === */
.demo-banner {
  padding: 8px 12px;
  background: var(--color-bg-secondary);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 16px 0;
}
.demo-banner .btn { height: 26px; font-size: 10px; padding: 0 10px; }

/* === Анимации появления === */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.anim-in {
  animation: fadeUp 300ms var(--ease) both;
}

/* Каскадное появление карточек */
.cards-list .card:nth-child(1) { animation-delay: 0ms; }
.cards-list .card:nth-child(2) { animation-delay: 60ms; }
.cards-list .card:nth-child(3) { animation-delay: 120ms; }
.cards-list .card:nth-child(4) { animation-delay: 180ms; }
.cards-list .card:nth-child(5) { animation-delay: 240ms; }

/* Появление сообщений */
.msg.anim-in { animation-delay: 0ms; }

/* Печатает... индикатор */
@keyframes typingDot {
  0%, 80%, 100% { opacity: 0.2; }
  40% { opacity: 1; }
}
.typing-indicator {
  display: inline-flex;
  gap: 4px;
  padding: 8px 12px;
}
.typing-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  animation: typingDot 1.2s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }

/* === Десктоп (768px+) === */
@media (min-width: 768px) {
  .header {
    padding: 10px 24px;
  }

  .screen-start {
    padding: 32px;
    align-items: center;
    text-align: center;
  }

  .hero-title {
    font-size: 36px;
  }

  .hero-sub {
    max-width: 480px;
    margin-bottom: 20px;
  }

  .chips {
    justify-content: center;
    margin-bottom: 24px;
  }

  .solutions-label {
    text-align: left;
    width: 100%;
    max-width: 720px;
  }

  .cards-list {
    flex-direction: row;
    max-width: 720px;
    width: 100%;
  }
  .cards-list .card { flex: 1; }

  .input-panel {
    padding: 12px 24px 14px;
  }
  .input-card {
    max-width: 620px;
    margin: 0 auto;
  }

  /* Чат — ограниченная ширина по центру */
  .messages {
    padding: 20px 32px;
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }

  .products-grid .product-card { min-width: 180px; }

  /* Оверлей ⓘ — чуть крупнее */
  .info-modal { max-width: 400px; }

  /* Подбор — ограниченная ширина */
  .selection-sheet {
    max-width: 700px;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
  }
  .selection-sheet.open {
    transform: translateX(-50%) translateY(0);
  }

  /* Кнопка назад — с текстом на десктопе */
  .header-back {
    width: auto;
    padding: 0 10px;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
  }
  .back-text { display: inline; }

  /* SEO-карточка — десктоп */
  .pp-photo-mobile { display: none; }
  .pp-photo-desktop {
    display: flex;
    width: 300px;
    height: 260px;
    flex-shrink: 0;
    border-radius: var(--r-md);
  }
  .pp-layout {
    flex-direction: row;
    gap: 24px;
  }
  .pp-info {
    flex: 1;
  }
  .pp-content {
    padding: 20px 32px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
  }
  .pp-h1 { font-size: 24px; }
  .pp-h2 { font-size: 13px; }
  .pp-price { font-size: 26px; }
  .pp-breadcrumb { font-size: 12px; margin-bottom: 12px; }
  .pp-seo { max-width: 640px; margin-top: 24px; padding-top: 20px; }
  .pp-seo h3 { font-size: 16px; margin-bottom: 10px; }
  .pp-seo-block { margin-bottom: 20px; }
  .pp-related { margin-top: 20px; padding-top: 20px; }
  .pp-related-title { font-size: 16px; }
  .pp-related .product-card { min-width: 180px; }
  .pp-related .product-img { height: 100px; }
}

/* === Утилиты === */
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}