/*!
 * ArchiPaint · podbor.css
 * Сервис подбора краски: подбор по фото, поиск по коду и координатам,
 * интерьерные палитры, визуализатор и расчёт расхода.
 *
 * Порядок разделов:
 *   1. Токены и сброс          7. Гармонии и цветовой круг
 *   2. Типографика и кнопки    8. Интерьерные палитры
 *   3. Каркас страницы         9. Визуализатор комнаты
 *   4. Загрузка изображения   10. Калькулятор расхода
 *   5. Палитра и совпадения   11. Модальные окна
 *   6. Поиск по коду          12. Служебное, адаптив, печать
 */

/* ============================================================
 * 1. Токены и сброс
 * ============================================================ */

.ap-tool {
  /* фирменная гамма — земля, зелень, извёстка */
  --ink: #20241F;
  --ink-2: #4A5148;
  --ink-3: #7C8479;
  --paper: #FAFAF7;
  --card: #FFFFFF;
  --line: #E3E4DC;
  --line-2: #C6CBBB;
  --accent: #3E4A3D;
  --accent-hover: #2E382D;
  --accent-soft: #EDF1E9;
  --terra: #8C4A3E;
  --terra-soft: #F6EAE7;

  /* шкала качества совпадения ΔE */
  --good: #4F8A5B;
  --mid: #C08A2E;
  --poor: #B4523F;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(32, 36, 31, .06), 0 1px 3px rgba(32, 36, 31, .05);
  --shadow: 0 4px 16px rgba(32, 36, 31, .07), 0 1px 3px rgba(32, 36, 31, .05);
  --shadow-lg: 0 18px 48px rgba(32, 36, 31, .16), 0 4px 12px rgba(32, 36, 31, .08);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);

  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.ap-tool *,
.ap-tool *::before,
.ap-tool *::after { box-sizing: border-box; }

.ap-tool .wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.ap-tool :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* атрибут hidden должен побеждать любое авторское display-правило ниже */
.ap-tool [hidden] { display: none !important; }

.ap-tool .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ap-tool .visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
 * 2. Типографика и кнопки
 * ============================================================ */

.ap-tool h1 { font-size: clamp(28px, 4.2vw, 44px); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 14px; }
.ap-tool h2 { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.25; letter-spacing: -.01em; margin: 0 0 18px; }
.ap-tool h3 { font-size: 18px; line-height: 1.3; margin: 0 0 10px; }
.ap-tool h4 { font-size: 14px; line-height: 1.35; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }

.ap-tool .kicker {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 6px 12px; border-radius: 100px;
  margin: 0 0 18px;
}

.ap-tool .sub { font-size: 16px; color: var(--ink-2); margin: 0 0 22px; }
.ap-tool .fine { font-size: 12.5px; color: var(--ink-3); }
.ap-tool .m-fine { font-size: 12.5px; color: var(--ink-3); margin: 10px 0 0; }

.ap-tool .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), transform .1s var(--ease), box-shadow .16s var(--ease);
  text-decoration: none;
  text-align: center;
  max-width: 100%;
}
.ap-tool .btn:active { transform: translateY(1px); }
.ap-tool .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.ap-tool .btn svg { width: 17px; height: 17px; flex: none; }

.ap-tool .btn-accent { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.ap-tool .btn-accent:hover:not(:disabled) { background: var(--accent-hover); }

.ap-tool .btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.ap-tool .btn-ghost:hover:not(:disabled) { border-color: var(--line-2); background: #FCFCFA; }

.ap-tool .btn-quiet { background: transparent; color: var(--ink-2); padding: 7px 10px; }
.ap-tool .btn-quiet:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }

.ap-tool .btn-sm { font-size: 13px; padding: 8px 13px; }
.ap-tool .btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ============================================================
 * 3. Каркас страницы
 * ============================================================ */

.ap-tool .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}

.ap-tool .stepnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; margin-right: 11px;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 700;
  vertical-align: -5px;
}

.ap-tool .hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 44px; align-items: center;
  padding: 46px 0 40px;
}
.ap-tool .hero > * { min-width: 0; }
.ap-tool .workspace > * { min-width: 0; }
.ap-tool .hero-art { margin: 0; }
.ap-tool .hero-art svg { width: 100%; height: auto; display: block; }
.ap-tool .hero-art figcaption { font-size: 12.5px; color: var(--ink-3); text-align: center; margin-top: 10px; }

.ap-tool .steps { list-style: none; display: grid; gap: 11px; margin: 0 0 24px; padding: 0; }
.ap-tool .steps li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink-2); }
.ap-tool .steps b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; flex: none;
  border-radius: 50%; border: 1.5px solid var(--line-2);
  font-size: 12.5px; color: var(--accent); background: var(--card);
}

/* Единственная строка поиска: коды, названия и координаты в одном поле.
   Раньше в шапке стояли две кнопки — к поиску по коду и к поиску по
   координатам, — а само поле жило секцией ниже. */
.ap-tool .hero-search { margin-top: 4px; max-width: 560px; }
.ap-tool .hero-search input { width: 100%; font-size: 15px; padding: 12px 44px 12px 14px; }
.ap-tool .hero-search > label { font-size: 13.5px; font-weight: 650; color: var(--ink-2); }

/* Вторичный путь ко вводу по полям — ссылкой внутри подсказки, а не кнопкой:
   форма с полями нужна редко и не должна спорить с основным полем. */
.ap-tool .link-btn {
  font: inherit; font-size: inherit; color: var(--accent);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.ap-tool .link-btn:hover { color: var(--accent-hover); }

.ap-tool .workspace {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* Колонка под фото тянется на всю высоту ряда — сама она невидима,
   зато карточке внутри есть вдоль чего прилипать. Липкой карточка
   становится только с загруженным фото: пустой дропзоне ездить незачем. */
.ap-tool .upload-col { align-self: stretch; min-width: 0; }
.ap-tool .workspace.has-image .upload-card {
  position: sticky; top: 16px;
  max-height: calc(100vh - 32px); overflow-y: auto;
}

.ap-tool section.card,
.ap-tool .ap-section { margin-top: 22px; }

.ap-tool .section-intro { color: var(--ink-2); margin: -8px 0 20px; font-size: 14.5px; }

/* Пояснения занимают ширину карточки, а не узкую колонку слева: на широком
   экране обрезанная по 74ch строка оставляла половину блока пустой. */
.ap-tool .sub,
.ap-tool .section-intro,
.ap-tool .scheme-desc,
.ap-tool .m-fine,
.ap-tool .hint { max-width: none; }

/* Каталог-заглушка: полоса не должна теряться в шапке, иначе о ней забудут */

/* ============================================================
 * 4. Загрузка изображения
 * ============================================================ */

.ap-tool #drop {
  border: 2px dashed var(--line-2);
  border-radius: var(--radius);
  padding: 34px 20px;
  text-align: center;
  cursor: pointer;
  background: #FCFCFA;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.ap-tool #drop:hover,
.ap-tool #drop:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.ap-tool #drop.is-dragover { border-color: var(--accent); background: var(--accent-soft); border-style: solid; }
.ap-tool #drop svg { width: 42px; height: 42px; color: var(--line-2); margin-bottom: 12px; }
.ap-tool #drop p { font-weight: 650; margin: 0 0 5px; }
.ap-tool #drop small { color: var(--ink-3); font-size: 12.5px; display: block; margin-bottom: 4px; }

.ap-tool .preview-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #F1F1EC;
  border: 1px solid var(--line);
  line-height: 0;
}
.ap-tool .preview-wrap img,
.ap-tool .preview-wrap canvas { width: 100%; height: auto; display: block; max-height: 420px; object-fit: contain; }
.ap-tool .preview-wrap.is-picking { cursor: crosshair; }

.ap-tool #loupe {
  position: absolute; pointer-events: none; z-index: 5;
  transform: translate(-50%, calc(-100% - 16px));
  background: rgba(24, 27, 23, .93);
  color: #fff; border-radius: 10px;
  padding: 7px 9px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  box-shadow: var(--shadow);
  line-height: 1;
}
.ap-tool #loupe::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  width: 10px; height: 10px; background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.ap-tool #loupeSw { width: 22px; height: 22px; border-radius: 5px; border: 1.5px solid rgba(255, 255, 255, .5); flex: none; }

.ap-tool #pickDot {
  position: absolute; width: 20px; height: 20px; z-index: 4;
  transform: translate(-50%, -50%);
  border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55), var(--shadow-sm);
  pointer-events: none;
}

.ap-tool .file-note { font-size: 12.5px; color: var(--ink-3); margin: 12px 0 0; word-break: break-all; }

.ap-tool .pick-hint {
  background: var(--accent-soft); color: var(--accent);
  border-radius: var(--radius-sm);
  padding: 9px 12px; margin-top: 12px;
  font-size: 13px; font-weight: 600; line-height: 1.5;
}
.ap-tool .pick-hint b {
  display: inline-block;
  min-width: 20px; text-align: center;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: 5px; padding: 1px 5px;
  font-family: var(--mono); font-size: 11.5px;
}

/* ============================================================
 * 5. Палитра и ближайшие цвета
 * ============================================================ */

.ap-tool .res-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  min-height: 260px; padding: 26px;
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  color: var(--ink-3); background: #FCFCFA;
}
.ap-tool .res-empty svg { width: 44px; height: 44px; color: var(--line-2); }
.ap-tool .res-empty small { font-size: 12.5px; line-height: 1.5; }

.ap-tool .swatch-list { display: grid; gap: 14px; }

.ap-tool .sw-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 16px; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; background: var(--card);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.ap-tool .sw-row:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.ap-tool .sw-row.is-empty-slot { border-style: dashed; background: #FCFCFA; }

.ap-tool .sw-main {
  border-radius: var(--radius-sm);
  min-height: 108px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 10px; position: relative; overflow: hidden;
  border: 1px solid rgba(32, 36, 31, .12);
}
.ap-tool .sw-share {
  align-self: flex-start;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  background: rgba(255, 255, 255, .82); color: #20241F;
  border-radius: 100px; padding: 3px 8px;
}
.ap-tool .sw-hex {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: .02em;
}

.ap-tool .sw-body { display: flex; flex-direction: column; min-width: 0; }
.ap-tool .sw-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.ap-tool .sw-title strong { font-size: 14px; }
.ap-tool .sw-meta { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); margin-bottom: 9px; }

.ap-tool .match-list { display: grid; gap: 6px; }

.ap-tool .match-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  padding: 6px; border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent; width: 100%;
  font: inherit; text-align: left; cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.ap-tool .match-item:hover { background: #FBFBF8; border-color: var(--line); }
.ap-tool .match-sw-mini {
  width: 30px; height: 30px; border-radius: 6px; flex: none;
  border: 1px solid rgba(32, 36, 31, .14);
}
.ap-tool .match-name { min-width: 0; }
.ap-tool .match-name b { display: block; font-size: 13px; font-weight: 650; }
.ap-tool .match-name span {
  display: block; font-size: 11px; color: var(--ink-3);
  font-family: var(--mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ap-tool .de {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  padding: 4px 8px; border-radius: 100px;
  color: #fff; white-space: nowrap;
}
.ap-tool .de.good { background: var(--good); }
.ap-tool .de.mid { background: var(--mid); }
.ap-tool .de.poor { background: var(--poor); }

.ap-tool .legend {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 20px; margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2);
}
.ap-tool .legend span { display: inline-flex; align-items: center; gap: 7px; }
.ap-tool .legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.ap-tool .legend a { color: var(--accent); }

.ap-tool .toolbar {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  align-items: center; margin-bottom: 18px;
  padding: 12px 14px;
  background: #FBFBF8; border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.ap-tool .toolbar label { font-size: 12.5px; font-weight: 650; color: var(--ink-2); display: flex; align-items: center; gap: 7px; min-width: 0; }
.ap-tool .toolbar select { flex: 1 1 auto; min-width: 0; max-width: 220px; }
.ap-tool .toolbar select,
.ap-tool .field select,
.ap-tool .field input {
  font: inherit; font-size: 13.5px;
  padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink);
  max-width: 100%;
}
.ap-tool .toolbar select:focus,
.ap-tool .field select:focus,
.ap-tool .field input:focus { border-color: var(--accent); outline: none; }

.ap-tool .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ap-tool .field > label { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.ap-tool .field .hint { font-size: 11.5px; color: var(--ink-3); }
.ap-tool .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }

/* ============================================================
 * 6. Поиск по коду и коллекции
 * ============================================================ */


.ap-tool .std-input-wrap { position: relative; }
.ap-tool .std-input-wrap input { width: 100%; padding-right: 44px; }
.ap-tool .std-swatch {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--line-2); background: #ddd;
}

.ap-tool .ac-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 30;
  max-height: 290px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 5px;
}
.ap-tool .ac-item {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  width: 100%; padding: 7px; border: 0; border-radius: 7px;
  background: transparent; font: inherit; text-align: left; cursor: pointer;
}
.ap-tool .ac-item:hover,
.ap-tool .ac-item.is-active { background: var(--accent-soft); }
.ap-tool .ac-item .ac-sw { width: 30px; height: 30px; border-radius: 6px; border: 1px solid rgba(32, 36, 31, .14); }
.ap-tool .ac-item b { display: block; font-size: 13px; }
.ap-tool .ac-item span { display: block; font-size: 11px; color: var(--ink-3); font-family: var(--mono); }
.ap-tool .ac-group {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-3); padding: 9px 8px 5px;
}

.ap-tool .std-result { display: none; }
.ap-tool .std-result.is-visible { display: block; }

.ap-tool .std-source {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 15px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #FBFBF8; margin-bottom: 18px;
}
.ap-tool .std-source .std-source-sw {
  width: 92px; height: 92px; border-radius: var(--radius-sm);
  border: 1px solid rgba(32, 36, 31, .14);
}
.ap-tool .std-source h3 { margin: 0 0 4px; }
.ap-tool .std-source .mono { font-size: 12px; color: var(--ink-3); }

.ap-tool .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }

.ap-tool .color-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); overflow: hidden; cursor: pointer;
  padding: 0; text-align: left; font: inherit; width: 100%;
  transition: transform .14s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.ap-tool .color-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-2); }
.ap-tool .color-card .cc-sw {
  height: 96px; position: relative;
  display: flex; align-items: flex-end; padding: 8px;
}
.ap-tool .color-card .cc-lab {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  background: rgba(255, 255, 255, .82); color: #20241F;
  border-radius: 5px; padding: 2px 6px;
  opacity: 0; transition: opacity .16s var(--ease);
}
.ap-tool .color-card:hover .cc-lab { opacity: 1; }
.ap-tool .color-card .cc-meta { padding: 10px 11px 12px; border-top: 1px solid var(--line); }
.ap-tool .color-card .cc-code { display: block; font-family: var(--mono); font-size: 12px; font-weight: 700; }
.ap-tool .color-card .cc-name { display: block; font-size: 12.5px; color: var(--ink-2); margin: 2px 0 6px; }
.ap-tool .color-card .cc-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.ap-tool .chip {
  display: inline-block; font-size: 10.5px; font-weight: 650;
  padding: 3px 8px; border-radius: 100px;
  background: var(--accent-soft); color: var(--accent);
  white-space: nowrap;
}
.ap-tool .chip-muted { background: #F2F2ED; color: var(--ink-3); }

.ap-tool .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ap-tool .filter-chip {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 13px; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  transition: all .14s var(--ease);
}
.ap-tool .filter-chip:hover { border-color: var(--line-2); }
.ap-tool .filter-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.ap-tool .disclaimer {
  margin-top: 22px; padding: 16px 18px;
  border-left: 3px solid var(--line-2);
  background: #FBFBF8; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
}
.ap-tool .disclaimer strong { color: var(--ink); }

/* ============================================================
 * 7. Гармонии и цветовой круг
 * ============================================================ */

/* Базовый цвет, вкладки схем и описание идут во всю ширину: в узкой
   колонке семь вкладок разваливались на пять строк и перегружали её,
   а правая колонка пустовала под карточками. */
.ap-tool .harmony-card .h-cols { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; align-items: start; }
.ap-tool .harmony-card .h-left { display: flex; flex-direction: column; align-items: center; }
.ap-tool .harmony-card .h-right { min-width: 0; }

.ap-tool #wheel { width: 100%; max-width: 300px; height: auto; aspect-ratio: 1; display: block; margin: 0 auto 18px; }

.ap-tool .scheme-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.ap-tool .scheme-tab {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  transition: all .14s var(--ease);
}
.ap-tool .scheme-tab:hover { border-color: var(--line-2); }
.ap-tool .scheme-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.ap-tool .base-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ap-tool .base-sw { width: 46px; height: 46px; border-radius: 10px; border: 1px solid rgba(32, 36, 31, .14); flex: none; }
.ap-tool .scheme-desc { color: var(--ink-2); font-size: 14px; margin: 14px 0 10px; }

/* Куда уходит выбранная схема. Раньше список схем стоял на странице дважды —
   вкладками здесь и карточками в интерьерных палитрах, — и было непонятно,
   где схема выбирается на самом деле. Теперь выбор один, а связь показана. */
.ap-tool .scheme-forward {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 600;
}
.ap-tool .scheme-forward .btn { margin-left: auto; }
@media (max-width: 620px) {
  /* на узком экране кнопка переезжает на свою строку — пусть занимает её целиком */
  .ap-tool .scheme-forward .btn { margin-left: 0; width: 100%; }
}

/* Карточки цветов схемы — строками: так они заполняют широкую правую
   колонку и заодно служат легендой к точкам в объёме Lab. */
.ap-tool .hs-grid { display: grid; gap: 10px; }
.ap-tool .hs-item {
  display: grid; grid-template-columns: 26px 62px minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; background: var(--card);
  padding: 11px 14px; text-align: left; font: inherit; width: 100%;
  transition: border-color .14s var(--ease), box-shadow .16s var(--ease), background .14s var(--ease);
}
.ap-tool .hs-item:hover, .ap-tool .hs-item.is-active { border-color: var(--accent); box-shadow: var(--shadow); }
.ap-tool .hs-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ap-tool .hs-sw { height: 54px; border-radius: 9px; border: 1px solid rgba(32, 36, 31, .12); }
.ap-tool .hs-meta { min-width: 0; display: flex; flex-direction: column; }
.ap-tool .hs-hex { font-family: var(--mono); font-size: 13px; font-weight: 650; }
.ap-tool .hs-coords { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.ap-tool .hs-near { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.ap-tool .hs-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

@media (max-width: 560px) {
  .ap-tool .hs-item { grid-template-columns: 24px 46px minmax(0, 1fr); }
  .ap-tool .hs-right { grid-column: 2 / -1; flex-direction: row; align-items: center; }
}

/* ============================================================
 * 8. Интерьерные палитры
 * ============================================================ */

.ap-tool .mood-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 11px; margin-bottom: 0; }
.ap-tool .mood-groups { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }
.ap-tool .mood-group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.ap-tool .mood-group-title { font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2); }
.ap-tool .mood-group-hint { font-size: 12.5px; color: var(--ink-3); }
.ap-tool .mood-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0; overflow: hidden; cursor: pointer; background: var(--card);
  text-align: left; font: inherit; width: 100%;
  transition: all .14s var(--ease);
}
.ap-tool .mood-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.ap-tool .mood-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ap-tool .mood-strip { display: flex; height: 30px; }
.ap-tool .mood-strip i { flex: 1; display: block; }
.ap-tool .mood-name { display: block; padding: 9px 11px 10px; font-size: 13px; font-weight: 650; }

.ap-tool .schemes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; }

/* Одиночная палитра занимает всю ширину секции: цвета встают в две колонки,
   разбор и кнопки идут под ними во всю ширину. */
.ap-tool .scheme-card.is-single { padding: 22px; }
.ap-tool .scheme-card.is-single .scheme-colors {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 4px 18px;
}
.ap-tool .scheme-card.is-single .scheme-checks {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.ap-tool .scheme-mood { color: var(--ink-3); font-weight: 500; }

/* Сравнение схем: восемь карточек открыты сразу, под выбором характера */
.ap-tool .compare-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.ap-tool .compare-card {
  display: flex; flex-direction: column; gap: 9px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: 13px 14px 14px;
  font: inherit; text-align: left; cursor: pointer; width: 100%;
  transition: border-color .14s var(--ease), box-shadow .16s var(--ease), transform .12s var(--ease);
}
.ap-tool .compare-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.ap-tool .compare-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); cursor: default; }
.ap-tool .compare-card.is-active:hover { transform: none; }
.ap-tool .compare-name {
  display: flex; align-items: flex-start; gap: 7px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 650; line-height: 1.25;
  /* место под два слова в две строки: иначе «Раздельно-комплементарная»
     съезжала вниз и полосы площадей в ряду переставали совпадать */
  min-height: 34px;
}
.ap-tool .compare-bar-strip {
  display: flex; height: 26px; border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(32, 36, 31, .1);
}
.ap-tool .compare-bar-strip i { display: block; }
.ap-tool .compare-swatches { display: flex; gap: 3px; }
.ap-tool .compare-swatches i {
  flex: 1; height: 22px; border-radius: 4px; display: block;
  border: 1px solid rgba(32, 36, 31, .12);
}
.ap-tool .compare-meta { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }

.ap-tool .scheme-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 17px; background: var(--card);
  display: flex; flex-direction: column;
}
.ap-tool .scheme-card h3 { font-size: 15.5px; margin: 0 0 3px; }
.ap-tool .scheme-card .scheme-note { font-size: 12px; color: var(--ink-3); margin: 0 0 13px; }

.ap-tool .scheme-bar {
  display: flex; height: 46px; border-radius: 9px; overflow: hidden;
  margin-bottom: 6px; border: 1px solid rgba(32, 36, 31, .1);
}
.ap-tool .scheme-bar i {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  font-style: normal;
}
.ap-tool .scheme-ratio {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--ink-3); font-family: var(--mono);
  margin-bottom: 13px;
}

.ap-tool .scheme-colors { display: grid; gap: 4px; margin-bottom: 14px; }

/* Разбор палитры: ведущий контраст и найденные огрехи */
.ap-tool .scheme-checks { display: grid; gap: 6px; margin-bottom: 14px; }
.ap-tool .check-lead {
  padding: 9px 11px; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid rgba(62, 74, 61, .18);
}
.ap-tool .check-lead b { display: block; font-size: 12.5px; margin-bottom: 3px; }
.ap-tool .check-lead span { display: block; font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }
.ap-tool .check-warn, .ap-tool .check-note {
  padding: 8px 11px; border-radius: 8px;
  font-size: 11.5px; line-height: 1.45;
  border-left: 3px solid var(--poor); background: #FCF6F3; color: var(--ink-2);
}
.ap-tool .check-note { border-left-color: var(--mid); background: #FBF9F2; }
.ap-tool .scheme-color-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 11px; align-items: center;
  padding: 5px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; width: 100%; font: inherit; text-align: left; cursor: pointer;
  transition: background .14s var(--ease);
}
.ap-tool .scheme-color-row:hover { background: #FBFBF8; border-color: var(--line); }
.ap-tool .scheme-color-sw { width: 36px; height: 36px; border-radius: 7px; border: 1px solid rgba(32, 36, 31, .14); flex: none; }
.ap-tool .scheme-color-info { min-width: 0; }
.ap-tool .scheme-color-code { font-family: var(--mono); font-size: 12px; font-weight: 650; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-tool .scheme-color-lch { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); display: block; }

.ap-tool .badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 7px; border-radius: 5px; white-space: nowrap;
}
.ap-tool .badge-main { background: var(--accent-soft); color: var(--accent); }
.ap-tool .badge-accent { background: var(--terra-soft); color: var(--terra); }
.ap-tool .badge-additional { background: #F2F2ED; color: var(--ink-3); }
.ap-tool .badge-base { background: var(--ink); color: #fff; }

.ap-tool .scheme-foot {
  margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}

.ap-tool .rating-stars { display: inline-flex; gap: 2px; }
.ap-tool .rating-star {
  border: 0; background: transparent; padding: 2px; cursor: pointer;
  width: 22px; height: 22px; color: var(--line-2);
  transition: color .12s var(--ease), transform .12s var(--ease);
}
.ap-tool .rating-star:hover { transform: scale(1.14); }
.ap-tool .rating-star svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.ap-tool .rating-star.is-on { color: #E0A32E; }
.ap-tool .rating-label { font-size: 11.5px; color: var(--ink-3); margin-right: 7px; }

/* Базовый цвет рядом с выбором роли: высота как у соседнего select,
   чтобы два поля в ряду стояли по одной линии */
.ap-tool .base-pick {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 5px 11px; min-height: 38px;
  border: 1px solid var(--line); border-radius: 8px; background: #FBFBF8;
}
.ap-tool .base-pick-sw {
  width: 26px; height: 26px; flex: none;
  border-radius: 6px; border: 1px solid rgba(32, 36, 31, .16);
}
.ap-tool .base-pick-info { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ap-tool .base-pick-info b { font-size: 13px; font-weight: 700; }
.ap-tool .base-pick-info span {
  font-size: 11.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ap-tool .selected-color-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px; margin-bottom: 20px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #FBFBF8;
}
.ap-tool .selected-swatch { width: 54px; height: 54px; border-radius: 10px; border: 1px solid rgba(32, 36, 31, .14); flex: none; }
.ap-tool .selected-info-main { min-width: 0; flex: 1; }

/* ============================================================
 * 9. Визуализатор комнаты
 * ============================================================ */

.ap-tool .viz-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 24px; align-items: start; }
.ap-tool .viz-stage {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: #F1F1EC; line-height: 0;
}
.ap-tool .viz-stage svg { width: 100%; height: auto; display: block; }

/* Фотосцена: кадр перекрашивается попиксельно и кладётся в canvas */
.ap-tool .viz-col { min-width: 0; }
.ap-tool .viz-stage .viz-photo { width: 100%; height: auto; display: block; }
.ap-tool .viz-note { margin: 10px 0 0; line-height: 1.5; }

.ap-tool .viz-controls { display: grid; gap: 16px; }
.ap-tool .viz-assign { display: grid; gap: 8px; }
.ap-tool .viz-assign-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
}
.ap-tool .viz-assign-row .viz-sw { width: 30px; height: 30px; border-radius: 6px; border: 1px solid rgba(32, 36, 31, .14); }
.ap-tool .viz-assign-row b { font-size: 12.5px; display: block; }
.ap-tool .viz-assign-row span { font-size: 11px; color: var(--ink-3); font-family: var(--mono); }

.ap-tool .seg {
  display: inline-flex; border: 1px solid var(--line);
  border-radius: 100px; padding: 3px; background: var(--card); flex-wrap: wrap;
}
.ap-tool .seg button {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border: 0; border-radius: 100px;
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: all .14s var(--ease);
}
.ap-tool .seg button.is-active { background: var(--accent); color: #fff; }

/* объём Lab: пресеты вида под сценой */
.ap-tool .lab-tools { width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 12px; }

/* переключатель круга и объёма Lab */
.ap-tool .seg-wheel { align-self: center; margin-top: 12px; }
.ap-tool #wheelHint { display: block; text-align: left; margin-top: 10px; line-height: 1.5; }
/* сцена Lab по природе шире, чем выше: квадрат оставлял треть холста пустой */
.ap-tool #wheel.is-lab { max-width: 380px; aspect-ratio: 4 / 3; margin-bottom: 0; }
.ap-tool #wheel.is-spinnable { cursor: grab; touch-action: none; }
.ap-tool #wheel.is-spinning { cursor: grabbing; }

/* семь помещений в одну строку не влезают — раскладываем в несколько */
.ap-tool .seg-rooms { display: flex; flex-wrap: wrap; }
.ap-tool .seg-rooms button { flex: 1 1 auto; padding: 6px 11px; white-space: nowrap; }

/* ============================================================
 * 10. Калькулятор расхода
 * ============================================================ */

.ap-tool .calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 24px; align-items: start; }
.ap-tool .calc-out {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; background: var(--accent-soft);
}
.ap-tool .calc-big { font-size: 34px; font-weight: 750; line-height: 1.05; color: var(--accent); letter-spacing: -.02em; }
.ap-tool .calc-big small { font-size: 15px; font-weight: 600; }
.ap-tool .calc-rows { display: grid; gap: 7px; margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(62, 74, 61, .18); }
.ap-tool .calc-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.ap-tool .calc-row span { color: var(--ink-2); }
.ap-tool .calc-row b { font-family: var(--mono); }
.ap-tool .calc-row-total {
  margin-top: 4px; padding-top: 8px; font-size: 14px; font-weight: 700;
  border-top: 1px solid rgba(62, 74, 61, .18);
}
.ap-tool .calc-row-total span { color: var(--ink); font-weight: 700; }

.ap-tool .calc-area { display: flex; gap: 8px; align-items: center; }
.ap-tool .calc-area input { flex: 1; min-width: 0; }

/* выбор цвета в калькуляторе: образец плюс список поверхностей примерки */
.ap-tool .calc-color { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ap-tool .calc-color select { flex: 1 1 auto; min-width: 0; }
.ap-tool .calc-color b { font-family: var(--mono); font-size: 12.5px; }
.ap-tool .calc-color-sw {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 7px;
  border: 1px solid rgba(32, 36, 31, .18);
  /* пустой образец не должен выглядеть белым цветом — показываем «нет цвета» */
  background: repeating-linear-gradient(45deg, #E6E3DA, #E6E3DA 5px, #F5F3EC 5px, #F5F3EC 10px);
}

/* ============================================================
 * 10a. Корзина
 * ============================================================ */

.ap-tool .cart-list { display: grid; gap: 9px; }
.ap-tool .cart-item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto auto;
  gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
}
.ap-tool .cart-sw {
  width: 34px; height: 34px; border-radius: 7px;
  border: 1px solid rgba(32, 36, 31, .14);
}
.ap-tool .cart-info { min-width: 0; }
.ap-tool .cart-info b { display: block; font-size: 13.5px; }
.ap-tool .cart-info .fine { font-family: var(--mono); font-size: 11px; }
.ap-tool .cart-qty { display: flex; align-items: center; gap: 8px; }
.ap-tool .cart-qty b { min-width: 20px; text-align: center; font-family: var(--mono); }
.ap-tool .cart-price { font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }
.ap-tool .cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 15px;
}
.ap-tool .cart-total b { font-family: var(--mono); font-size: 21px; color: var(--accent); }

@media (max-width: 620px) {
  .ap-tool .cart-item { grid-template-columns: 30px minmax(0, 1fr) auto; row-gap: 8px; }
  .ap-tool .cart-qty { grid-column: 2; }
  .ap-tool .cart-price { grid-column: 3; }
}

/* ============================================================
 * 11. Модальные окна
 * ============================================================ */

.ap-tool .modal-back {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(24, 27, 23, .55);
  backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center;
  padding: 22px;
  overflow-y: auto;
}
.ap-tool .modal-back.is-open { display: flex; }

.ap-tool .modal {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: ap-modal-in .2s var(--ease);
}
@keyframes ap-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-tool .modal { animation: none; }
  .ap-tool * { transition-duration: .01ms !important; }
}

.ap-tool .modal-x {
  position: absolute; top: 13px; right: 13px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .92);
  color: var(--ink-2); font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .14s var(--ease);
}
.ap-tool .modal-x:hover { background: #fff; color: var(--ink); border-color: var(--line-2); }

.ap-tool .modal-banner {
  min-height: 168px; padding: 24px;
  display: flex; align-items: flex-end;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.ap-tool .m-kicker { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .8; margin-bottom: 6px; }
.ap-tool .modal-banner h3 { margin: 0 0 9px; font-size: 25px; letter-spacing: -.01em; }
.ap-tool .m-hexchip {
  display: inline-block; font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  background: rgba(255, 255, 255, .88); color: #20241F;
  padding: 5px 11px; border-radius: 100px;
}
.ap-tool .modal-body { padding: 22px 24px 26px; }

.ap-tool .match-box {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 12px; align-items: center;
  padding: 14px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #FBFBF8; margin-bottom: 14px;
}
.ap-tool .match-sw { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-3); text-align: center; }
.ap-tool .match-sw .sw { width: 56px; height: 56px; border-radius: 10px; border: 1px solid rgba(32, 36, 31, .14); }
.ap-tool .match-de { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ap-tool .match-de .arr { font-size: 10px; color: var(--ink-3); white-space: nowrap; }
.ap-tool .m-note { font-size: 13px; color: var(--ink-2); margin: 0 0 20px; }

.ap-tool .prop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 9px; margin-bottom: 20px; }
.ap-tool .prop {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 11px; background: #FBFBF8;
}
.ap-tool .prop dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-bottom: 3px; }
.ap-tool .prop dd { margin: 0; font-size: 14px; font-weight: 650; font-family: var(--mono); }
.ap-tool .prop dd small { font-family: inherit; font-weight: 500; font-size: 11.5px; color: var(--ink-3); display: block; margin-top: 2px; }

.ap-tool .opts { display: grid; gap: 9px; }
.ap-tool .opt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; background: var(--card);
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.ap-tool .opt:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.ap-tool .opt-info b { display: block; font-size: 14px; }
.ap-tool .opt-info span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.ap-tool .opt-buy { display: flex; align-items: center; gap: 11px; }
.ap-tool .opt-price { font-family: var(--mono); font-size: 15px; font-weight: 700; white-space: nowrap; }

.ap-tool .coord-head { padding: 24px 24px 0; }
.ap-tool .coord-head h3 { margin: 0 0 6px; padding-right: 40px; }
.ap-tool .coord-head p { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.ap-tool .coord-body { padding: 18px 24px 26px; }
.ap-tool .coord-input-row { position: relative; margin-bottom: 12px; }
.ap-tool .coord-input-row input {
  width: 100%; font-family: var(--mono); font-size: 15px;
  padding: 13px 56px 13px 15px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink);
}
.ap-tool .coord-input-row input:focus { border-color: var(--accent); outline: none; }
.ap-tool .coord-preview {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 7px;
  border: 1px solid var(--line-2); background: #E6E6E0;
}
.ap-tool .coord-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.ap-tool .mode-tab {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 13px; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
}
.ap-tool .mode-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ap-tool .coord-detected { font-size: 12.5px; color: var(--ink-2); margin: 0 0 14px; min-height: 19px; }
.ap-tool .coord-detected b { color: var(--accent); }
.ap-tool .coord-detected.is-error { color: var(--poor); }
.ap-tool .coord-results { display: grid; gap: 8px; margin-bottom: 14px; }
.ap-tool .coord-hint { font-size: 12px; color: var(--ink-3); margin: 0; }
.ap-tool .coord-hint code {
  font-family: var(--mono); font-size: 11.5px;
  background: #F2F2ED; padding: 2px 6px; border-radius: 4px; color: var(--ink-2);
}

/* Каталог: на широком экране ровно восемь оттенков в ряд.
   Колонки заданы числом, а не auto-fill: иначе их количество плавает
   от ширины окна и ряд то и дело оказывается неполным. */
.ap-tool .modal-cat { width: min(1180px, 100%); }

.ap-tool .cat-head {
  position: sticky; top: 0; z-index: 4;
  padding: 20px 24px 15px;
  background: var(--card); border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.ap-tool .cat-head h3 { margin: 0 0 12px; padding-right: 46px; }
.ap-tool .cat-tools { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.ap-tool .cat-tools input[type="search"] {
  flex: 1; min-width: 190px; font: inherit; font-size: 13.5px;
  padding: 9px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
}
.ap-tool .cat-tools input[type="search"]:focus { border-color: var(--accent); outline: none; }
.ap-tool .cat-count { font-size: 12.5px; color: var(--ink-3); font-family: var(--mono); white-space: nowrap; }
.ap-tool .cat-grid {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 11px; padding: 20px 24px 26px;
}
@media (max-width: 999px)  { .ap-tool .cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .ap-tool .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ap-tool .cat-cell {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; cursor: pointer; background: var(--card);
  padding: 0; text-align: left; font: inherit; width: 100%;
  transition: transform .12s var(--ease), box-shadow .14s var(--ease);
}
.ap-tool .cat-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ap-tool .cat-cell i { display: block; height: 66px; }
.ap-tool .cat-cell .cat-meta { padding: 8px 9px 10px; border-top: 1px solid var(--line); }
.ap-tool .cat-cell b { display: block; font-family: var(--mono); font-size: 11px; }
.ap-tool .cat-cell span { display: block; font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Задание для archicolor-ai: промпт, негатив, JSON и русская сверка */
.ap-tool .modal-ai { width: min(760px, 100%); }

.ap-tool .ai-blocks { display: grid; gap: 18px; }
.ap-tool .ai-block-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 5px;
}
.ap-tool .ai-block-head b { font-size: 14px; }
.ap-tool .ai-block-head .btn { margin-left: auto; }

.ap-tool .ai-pre {
  margin: 0; padding: 13px 14px;
  max-height: 260px; overflow: auto;
  background: #FBFBF8; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--ink);
  /* длинные строки промпта переносим, а не режем горизонтальной прокруткой */
  white-space: pre-wrap; word-break: break-word;
}

.ap-tool .ai-by {
  margin: 0 0 6px !important;
  font-size: 12px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent);
}

.ap-tool .ai-cta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 20px; padding: 16px 18px;
  background: var(--accent-soft);
  border: 1px solid rgba(62, 74, 61, .18);
  border-radius: var(--radius);
}
.ap-tool .ai-cta .btn { flex: 0 0 auto; }

.ap-tool .ai-note {
  flex: 1 1 320px; margin: 0;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
}
.ap-tool .ai-note strong { display: block; color: var(--accent); margin-bottom: 3px; }

@media (max-width: 620px) {
  .ap-tool .ai-cta .btn { width: 100%; }
}

@media (max-width: 620px) {
  .ap-tool .ai-block-head .btn { margin-left: 0; }
}

/* ============================================================
 * 12. Служебное, адаптив, печать
 * ============================================================ */

.ap-tool #toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 9500;
  transform: translate(-50%, 20px);
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: 100px;
  font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  max-width: calc(100vw - 40px); text-align: center;
}
.ap-tool #toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.ap-tool .compare-tray {
  position: fixed; left: 50%; bottom: 22px; z-index: 8000;
  transform: translate(-50%, 130%);
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 100px; box-shadow: var(--shadow-lg);
  transition: transform .22s var(--ease);
  max-width: calc(100vw - 32px);
}
.ap-tool .compare-tray.is-visible { transform: translate(-50%, 0); }
.ap-tool .compare-items { display: flex; gap: 6px; }
.ap-tool .compare-items i {
  width: 32px; height: 32px; border-radius: 7px; display: block;
  border: 1px solid rgba(32, 36, 31, .16); cursor: pointer;
}

.ap-tool .error-msg {
  padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--terra-soft); color: var(--terra);
  font-size: 13px; font-weight: 600; margin-bottom: 14px;
}

.ap-tool .spinner {
  display: inline-block; width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  border-radius: 50%; animation: ap-spin .7s linear infinite;
}
@keyframes ap-spin { to { transform: rotate(360deg); } }

.ap-tool .is-busy { opacity: .55; pointer-events: none; }

@media (max-width: 1080px) {
  .ap-tool .workspace { grid-template-columns: 1fr; }
  .ap-tool .workspace.has-image .upload-card { position: static; max-height: none; overflow: visible; }
  .ap-tool .harmony-card .h-cols { grid-template-columns: 1fr; }
  .ap-tool .viz-layout,
  .ap-tool .calc-layout { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .ap-tool .hero { grid-template-columns: 1fr; gap: 30px; padding: 30px 0 26px; }
  .ap-tool .hero-art { max-width: 420px; margin: 0 auto; }
}

@media (max-width: 620px) {
  .ap-tool .wrap { padding: 0 14px; }
  .ap-tool .btn-row { gap: 8px; }
  .ap-tool .btn-row > .btn:not(.btn-sm):not(.btn-quiet) { flex: 1 1 100%; }
  .ap-tool .toolbar { flex-direction: column; align-items: stretch; }
  .ap-tool .toolbar label { justify-content: space-between; }
  .ap-tool .toolbar select { max-width: none; width: 100%; }
  .ap-tool .card { padding: 18px; border-radius: var(--radius); }
  .ap-tool .sw-row { grid-template-columns: 1fr; }
  .ap-tool .sw-main { min-height: 84px; }
  .ap-tool .match-box { grid-template-columns: 1fr; text-align: center; }
  .ap-tool .modal-back { padding: 0; align-items: flex-end; }
  .ap-tool .modal { max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; width: 100%; }
  .ap-tool .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px; gap: 9px; }
  .ap-tool .opt { grid-template-columns: 1fr; }
  .ap-tool .opt-buy { justify-content: space-between; }
  .ap-tool .compare-tray { border-radius: var(--radius); left: 12px; right: 12px; transform: translateY(130%); }
  .ap-tool .compare-tray.is-visible { transform: translateY(0); }
}

@media (max-width: 400px) {
  .ap-tool .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  .ap-tool .hero-art,
  .ap-tool .btn,
  .ap-tool .modal-back,
  .ap-tool .compare-tray,
  .ap-tool #toast,
  .ap-tool .upload-card,
  .ap-tool .toolbar,
  .ap-tool .rating-stars { display: none !important; }
  .ap-tool { font-size: 11pt; }
  .ap-tool .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
  .ap-tool .scheme-card,
  .ap-tool .sw-row { break-inside: avoid; page-break-inside: avoid; }
  .ap-tool .scheme-bar i,
  .ap-tool .sw-main,
  .ap-tool .cc-sw,
  .ap-tool .mood-strip i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================================
 * 13. UX visual layer — service explanation
 * ============================================================ */
.ap-tool .hero-photo {
  position: relative; overflow: hidden; border-radius: 28px;
  background: #e9e4da; box-shadow: 0 22px 60px rgba(32,36,31,.14);
}
.ap-tool .hero-photo img { width: 100%; aspect-ratio: 1.08 / 1; object-fit: cover; display: block; }
.ap-tool .hero-photo figcaption {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  margin: 0; padding: 10px 13px; border-radius: 12px;
  color: #fff; background: rgba(31,35,29,.72); backdrop-filter: blur(8px);
  font-size: 12.5px; text-align: left;
}
.ap-tool .flow-strip { margin: 8px 0 28px; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(135deg,#f8f5ee,#f0eee6); }
.ap-tool .flow-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.75fr); gap:30px; align-items:end; margin-bottom:22px; }
.ap-tool .flow-head h2 { margin:0; font-size:clamp(24px,3vw,34px); }
.ap-tool .flow-head .kicker { margin-bottom:10px; }
.ap-tool .flow-head > p { margin:0; color:var(--ink-2); }
.ap-tool .flow-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.ap-tool .flow-item { position:relative; min-height:210px; padding:18px; border-radius:16px; background:rgba(255,255,255,.82); border:1px solid rgba(227,228,220,.9); }
.ap-tool .flow-item > span { font:700 11px/1 var(--mono); color:var(--ink-3); }
.ap-tool .flow-item h3 { margin:14px 0 7px; font-size:16px; }
.ap-tool .flow-item p { margin:0; color:var(--ink-2); font-size:13px; line-height:1.45; }
.ap-tool .flow-icon { width:54px;height:54px;margin-top:16px;border:1px solid var(--line-2);border-radius:13px;display:grid;place-items:center;font-size:28px;background:#fff; }
.ap-tool .flow-pixels { width:58px;height:58px;margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border-radius:12px;overflow:hidden; }
.ap-tool .flow-pixels i:nth-child(1),.ap-tool .flow-pixels i:nth-child(6){background:#d8d1c4}.ap-tool .flow-pixels i:nth-child(2),.ap-tool .flow-pixels i:nth-child(8){background:#a9aa94}.ap-tool .flow-pixels i:nth-child(3),.ap-tool .flow-pixels i:nth-child(7){background:#6f7561}.ap-tool .flow-pixels i:nth-child(4){background:#b99f80}.ap-tool .flow-pixels i:nth-child(5){background:#8d8b76}.ap-tool .flow-pixels i:nth-child(9){background:#e7e2d7}
.ap-tool .flow-swatches { display:flex; align-items:center; margin-top:20px; }
.ap-tool .flow-swatches i { width:42px;height:42px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line);margin-right:-8px; }
.ap-tool .flow-swatches i:nth-child(1){background:#a5a48d}.ap-tool .flow-swatches i:nth-child(2){background:#d0c4b3}.ap-tool .flow-swatches i:nth-child(3){background:#6f705f}
.ap-tool .flow-can { width:52px;height:58px;margin-top:14px;border:1px solid #cfcfc8;border-radius:7px 7px 10px 10px;background:repeating-linear-gradient(90deg,#fff 0 3px,#eee 3px 4px);position:relative;box-shadow:0 5px 12px rgba(32,36,31,.08); }
.ap-tool .flow-can:before { content:"ARCHIPAINT"; position:absolute; left:7px;right:7px;top:24px;padding:4px 1px;border:1px solid #bcb7ae;background:#f3f0e9;text-align:center;font-size:5px;font-weight:700;letter-spacing:.04em; }
.ap-tool .harmony-visual { display:grid; grid-template-columns:minmax(0,.9fr) minmax(320px,1.1fr); gap:24px; align-items:center; overflow:hidden; margin:-6px -6px 28px; padding:26px; border-radius:18px; background:#30362d; color:#fff; }
.ap-tool .harmony-visual-copy h2 { margin:8px 0 10px; font-size:clamp(23px,3vw,34px); color:#fff; }
.ap-tool .harmony-visual-copy p { margin:0; color:rgba(255,255,255,.78); }
.ap-tool .harmony-visual .eyebrow { font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#d9d8c8; }
.ap-tool .harmony-visual img { width:100%;height:260px;object-fit:cover;border-radius:14px;display:block; }
.ap-tool .role-pills { display:flex;flex-wrap:wrap;gap:7px;margin-top:16px; }
.ap-tool .role-pills span { padding:6px 9px;border:1px solid rgba(255,255,255,.24);border-radius:999px;font-size:11.5px;color:#f5f5ef; }
@media (max-width: 900px) {
  .ap-tool .flow-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ap-tool .harmony-visual { grid-template-columns:1fr; }
  .ap-tool .harmony-visual img { height:240px; }
}
@media (max-width: 640px) {
  .ap-tool .hero { gap:24px; padding-top:24px; }
  .ap-tool .hero-photo { border-radius:20px; }
  .ap-tool .flow-strip { padding:20px 14px; border-radius:18px; }
  .ap-tool .flow-head { grid-template-columns:1fr; gap:10px; }
  .ap-tool .flow-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .ap-tool .flow-item { min-height:190px; padding:14px; }
  .ap-tool .flow-item p { font-size:12px; }
  .ap-tool .harmony-visual { margin:-10px -10px 24px; padding:20px 16px; }
  .ap-tool .harmony-visual img { height:210px; }
}
@media (max-width: 430px) {
  .ap-tool .flow-grid { grid-template-columns:1fr; }
  .ap-tool .flow-item { min-height:0; }
}

.ap-tool .flow-real-cans { width:92px; height:68px; margin-top:8px; object-fit:contain; object-position:left center; display:block; }

/* ================================================================
   STAGE 6 — guided UX: harmony → palette → room → calculation → order
   ================================================================ */
.ux-journey{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:22px 0 18px;padding:10px;background:#f4f1eb;border:1px solid rgba(42,40,34,.08);border-radius:20px;position:sticky;top:8px;z-index:18;box-shadow:0 10px 34px rgba(42,40,34,.08)}
.ux-journey a{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 11px;border-radius:14px;color:inherit;text-decoration:none;transition:.2s ease;background:rgba(255,255,255,.48)}
.ux-journey a:hover{background:#fff;transform:translateY(-1px)}
.ux-journey b{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#686956;color:#fff;flex:0 0 auto;font-size:13px}
.ux-journey span{display:block;min-width:0;font-size:12px;font-weight:700;line-height:1.2}
.ux-journey small{display:block;margin-bottom:3px;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.08em;color:#7b786f;font-weight:600}
.ux-bridge{margin:14px 0 20px;padding:22px 24px;border-radius:22px;background:linear-gradient(110deg,#f5f1e9,#e8e1d4);display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid rgba(65,61,51,.08)}
.ux-bridge>div{display:grid;gap:5px;max-width:720px}.ux-bridge span,.ux-section-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:#777862}.ux-bridge strong{font-family:Georgia,'Times New Roman',serif;font-size:22px;line-height:1.12;font-weight:500}.ux-bridge small{font-size:13px;line-height:1.45;color:#66635d}
.ux-bridge .btn{white-space:nowrap;flex:0 0 auto}.ux-bridge-dark{background:linear-gradient(120deg,#555745,#34372c);color:#fff}.ux-bridge-dark span,.ux-bridge-dark small{color:rgba(255,255,255,.72)}.btn-light{background:#fff!important;color:#36382d!important;border-color:#fff!important}
.ux-viz-card{overflow:hidden;position:relative}.ux-viz-card:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#9b9d82,#c8b9a5,#766d5c)}
.ux-section-kicker{margin-bottom:8px}.ux-calc-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:-8px 0 0}.ux-calc-head>div{min-width:0}.ux-calc-head img{width:min(30%,320px);height:150px;object-fit:contain;object-position:center;filter:drop-shadow(0 15px 20px rgba(45,41,33,.12))}.ux-calc-card{background:linear-gradient(145deg,#fff 0%,#fff 67%,#f2ede4 100%)}
.ux-cart-card{border:1px solid rgba(88,89,70,.2);background:linear-gradient(145deg,#f8f6f1,#fff)}.ux-cart-card h2{margin-top:4px}
@media(max-width:900px){.ux-journey{position:relative;top:auto;display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding:8px}.ux-journey a{min-width:155px;scroll-snap-align:start}.ux-bridge{align-items:flex-start;flex-direction:column}.ux-bridge .btn{width:100%;justify-content:center}.ux-calc-head img{width:180px;height:120px}}
@media(max-width:600px){.ux-journey{margin-inline:-4px;border-radius:16px}.ux-bridge{padding:18px;border-radius:18px}.ux-bridge strong{font-size:19px}.ux-calc-head{align-items:flex-start}.ux-calc-head img{width:120px;height:92px;margin-right:-8px}.ux-section-kicker{font-size:10px}}
@media(prefers-reduced-motion:reduce){.ux-journey a{transition:none}.ux-journey a:hover{transform:none}}

/* ================================================================
   STAGE 7 — final interaction polish, loading/error/empty states
   ================================================================ */
.ap-net-status{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1200;display:flex;align-items:center;gap:9px;max-width:min(92vw,620px);padding:10px 13px;border-radius:999px;background:rgba(39,42,34,.94);color:#fff;box-shadow:0 14px 42px rgba(25,27,22,.22);backdrop-filter:blur(12px);font-size:12px;line-height:1.3;animation:apStatusIn .22s ease both}
.ap-net-status[hidden]{display:none}.ap-net-dot{width:8px;height:8px;border-radius:50%;background:#d6d2c6;flex:0 0 auto}.ap-net-status.is-loading .ap-net-dot{background:#e9dfbd;animation:apPulse 1s ease-in-out infinite}.ap-net-status.is-ok .ap-net-dot{background:#b9d5b0}.ap-net-status.is-error{background:rgba(82,48,40,.96)}.ap-net-status.is-error .ap-net-dot{background:#f0b2a2}.ap-net-retry{display:none;border:0;border-left:1px solid rgba(255,255,255,.24);background:transparent;color:#fff;font:inherit;font-weight:750;padding:2px 2px 2px 10px;cursor:pointer}.ap-net-status.is-error .ap-net-retry{display:inline-block}
@keyframes apPulse{50%{opacity:.35;transform:scale(.72)}}@keyframes apStatusIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.ap-tool :where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:3px solid rgba(96,102,75,.42);outline-offset:3px}
.ap-tool .btn,.ap-tool button,.ap-tool .color-card,.ap-tool .sw-row{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,opacity .18s ease}
.ap-tool .btn:not(:disabled):active,.ap-tool button:not(:disabled):active{transform:translateY(1px) scale(.99)}
.ap-tool button:disabled,.ap-tool .btn:disabled{opacity:.52;cursor:not-allowed;filter:saturate(.65)}
.ap-tool .res-empty{border-radius:18px;background:linear-gradient(135deg,rgba(247,245,240,.9),rgba(255,255,255,.72));border:1px dashed rgba(80,79,68,.16)}
.ap-tool .spinner{animation:apSpin .8s linear infinite}@keyframes apSpin{to{transform:rotate(360deg)}}
.ap-tool .modal-back{backdrop-filter:blur(5px)}.ap-tool .modal{max-height:min(88vh,820px);overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 90px rgba(29,29,25,.22)}
@media(max-width:600px){.ap-net-status{bottom:12px;border-radius:16px;width:calc(100vw - 24px);justify-content:flex-start}.ap-net-label{flex:1}.ap-tool .modal-back{align-items:flex-end;padding:0}.ap-tool .modal{width:100%!important;max-width:none!important;max-height:92dvh;border-radius:22px 22px 0 0;margin:0;padding-bottom:max(20px,env(safe-area-inset-bottom));animation:apSheetIn .22s ease both}@keyframes apSheetIn{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}}
@media(prefers-reduced-motion:reduce){.ap-net-status,.ap-net-dot,.ap-tool .spinner,.ap-tool .modal,.ap-tool .btn,.ap-tool button,.ap-tool .color-card,.ap-tool .sw-row{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Compact product choices inside the color dialog. */
.ap-tool #mOpts {gap:6px;}
.ap-tool #mOpts .opt {grid-template-columns:44px minmax(0,1fr) auto;gap:10px;padding:9px 12px;min-height:64px;}
.ap-tool #mOpts .opt-ico {display:block;width:44px;height:44px;max-width:44px;object-fit:contain;background:#fff;border-radius:6px;}
.ap-tool #mOpts .opt-info {min-width:0;}
.ap-tool #mOpts .opt-info b {font-size:13px;line-height:1.35;}
.ap-tool #mOpts .opt-info span {font-size:11px;line-height:1.35;margin-top:2px;}
.ap-tool #mOpts .opt-buy {gap:10px;}
.ap-tool #mOpts .opt-price {font-family:Montserrat,sans-serif;font-size:13px;}
.ap-tool #mOpts .opt-buy .btn {min-height:36px;padding:7px 12px;font-size:12px;line-height:1.4;white-space:nowrap;}
@media(max-width:600px){
 .ap-tool #mOpts .opt {grid-template-columns:40px minmax(0,1fr);gap:7px 10px;padding:10px;}
 .ap-tool #mOpts .opt-ico {width:40px;height:40px;max-width:40px;grid-column:1;grid-row:1;}
 .ap-tool #mOpts .opt-info {grid-column:2;grid-row:1;}
 .ap-tool #mOpts .opt-buy {grid-column:1/-1;grid-row:2;justify-content:space-between;}
 .ap-tool #mOpts .opt-buy .btn {min-height:44px;padding:10px 16px;}
}
/* Calculator: intact product photo and visual colour selector. */
.ap-tool #calculator .ux-calc-head{align-items:center;}
.ap-tool #calculator .ux-calc-head img{width:210px;height:auto;max-height:180px;object-fit:contain;object-position:center;display:block;border-radius:12px;}
.ap-tool #calcColorSel[hidden]{display:none!important;}
.ap-tool .calc-color-picker{width:100%;min-width:0;}
.ap-tool .calc-color-picker summary,.ap-tool .calc-color-option{display:flex;align-items:center;gap:12px;width:100%;padding:12px;text-align:left;border:1px solid #d9ddd4;border-radius:12px;background:#fff;color:#20241f;font:inherit;cursor:pointer;list-style:none;min-height:64px;}
.ap-tool .calc-color-picker summary::-webkit-details-marker{display:none;}
.ap-tool .calc-choice-swatch{display:block;width:40px;height:40px;border:1px solid rgba(0,0,0,.15);border-radius:9px;flex:0 0 40px;}
.ap-tool .calc-choice-copy{display:flex;flex-direction:column;min-width:0;flex:1;gap:3px;}
.ap-tool .calc-choice-copy b{font-size:13px;line-height:1.4;}
.ap-tool .calc-choice-copy>span{font-size:12px;line-height:1.45;overflow-wrap:anywhere;}
.ap-tool .calc-color-choices{margin-top:8px;padding:10px;border:1px solid #d9ddd4;border-radius:14px;background:#f8f9f5;max-height:420px;overflow-y:auto;overscroll-behavior:contain;}
.ap-tool .calc-color-option{margin-bottom:6px;}
.ap-tool .calc-color-option.is-selected{border-color:#455448;background:#eef2ea;}
.ap-tool .calc-choice-group{font-size:11px;font-weight:700;padding:8px 3px;text-transform:uppercase;letter-spacing:.08em;color:#657363;}
.ap-tool .calc-choice-check{color:#455448;font-size:20px;}
.ap-tool .calc-choice-arrow{font-size:20px;}
.ap-tool .calc-color-picker summary:focus-visible,.ap-tool .calc-color-option:focus-visible{outline:2px solid #455448;outline-offset:3px;}
@media(max-width:600px){
.ap-tool #calculator .ux-calc-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.ap-tool #calculator .ux-calc-head img{position:static;width:100%;max-width:300px;height:auto;max-height:220px;margin:0 auto;object-fit:contain;}
.ap-tool .calc-choice-copy b{font-size:14px;}
.ap-tool .calc-choice-copy>span{font-size:12px;}
.ap-tool .calc-color-choices{max-height:55vh;padding:8px;}
}

.ap-tool #calcColorSw{display:none;}
/* One number per step; complete product photo. */
.ap-tool ol.steps,.ap-tool ol.steps>li{list-style:none!important;}
.ap-tool ol.steps>li::marker{content:'';}
.ap-tool .flow-real-cans{object-fit:contain;object-position:center;width:100%;max-width:180px;height:auto;max-height:108px;border-radius:8px;display:block;}
.ap-tool .hs-hex{white-space:normal;overflow-wrap:anywhere;}
.ap-tool .hs-item:disabled{cursor:wait;}
.ap-tool ol.steps>li::before{content:none!important;display:none!important;}

/* Equal-width room tabs on phones only. */
@media (max-width: 767px) {
  .ap-tool #vizViews.seg-rooms {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }
  .ap-tool #vizViews.seg-rooms > button {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-left: 4px;
    padding-right: 4px;
    white-space: nowrap;
    text-align: center;
  }
}

/* Stretch the room selector itself in the mobile flex layout. */
@media (max-width: 767px) {
  .ap-tool #visualizer .viz-controls > .field:first-child {
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0;
    max-width: none !important;
    box-sizing: border-box;
  }
  .ap-tool #visualizer #vizViews.seg-rooms {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}